/*.................... Custom CSS - START .................... */
.pswfe-vertical-steps {
  --e-global-color-white: #ffffff;
  --step-container-background-color: transparent;
  --step-container-border-radius: 0;
  --step-container-margin: 0;
  --step-container-padding: 0;
  --step-padding: 20px;

  --bar-color: var(--e-global-color-secondary);
  --bar-size: 4px;
  --bar-gap: 5px;
  --bar-border-color: var(--e-global-color-accent);

  --marker-size: 6;
  --marker-border-color: var(--e-global-color-accent);
  --marker-border-style: dashed;
  --marker-border-width: 2px;
  --marker-background-color: var(--e-global-color-primary);
  --marker-border-radius: 50%;
  --marker-color: var(--e-global-color-text);
  --marker-text-size: 7px;
  --badge-color: var(--e-global-color-white);
  --badge-background-color: var(--e-global-color-secondary);
  --badge-border-style: solid;
  --badge-border-width: 4px;
  --badge-border-color: var(--e-global-color-accent);
  --badge-border-radius: 50%;
  --badge-font-size: 2px;
  --badge-font-weight: bold;
  --badge-padding: 11px 11px 11px 11px;
  --badge-top-pos: calc(var(--marker-size) * 1px);
  --badge-right-pos: calc((var(--marker-size) * 1px) / 2);
  --badge-text-bd-radius: 20px;

  --arrow-border-color: var(--e-global-color-secondary, #222);
  --arrow-border-style: dashed;
  --arrow-border-width: 2px;

  --step-content-padding: 5px 5px 5px 5px;
  --step-content-margin: 5px 5px 5px 5px;

  --content-background-color: '';
  --content-border-radius: 6px 6px 6px 6px;
  --content-heading-font-size: 2rem;
  --content-heading-align: left;
  --content-desc-align: left;
  --content-desc-font-size: 1rem;
  --content-arrow-top-pos: 16%;
  --content-title-color: var(--e-global-color-text, #222);
  --content-bg-title-color: '';
  --content-desc-color: var(--e-global-color-text);
  --content-bg-color: '';
  --content-desc-font-family: var(--e-global-typography-secondary-font-family);
  --content-desc-font-weight: var(--e-global-typography-secondary-font-weight);
  --content-title-font-family: var(--e-global-typography-secondary-font-family);
  --content-title-font-weight: var(--e-global-typography-secondary-font-weight);
  --content-width: 600px;
  --active-badge-color: #fff;
  --active-bg-badge-color: #222;
  --active-bar-color: #f13e3ef2;
  --step-animation-hover-color: #f13e3e;
}

/*.................... Custom CSS - END .................... */

/*.................... Step Container CSS - START ....................*/
.pswfe-vertical-steps {
  display: flex;
  position: relative;
  list-style-type: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  border-radius: var(--step-container-border-radius);
  padding: var(--step-padding);
  margin: 20px auto;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.pswfe-vertical-steps span.pswfe-vertical-marker-text {
  width: calc((var(--marker-size) * var(--marker-text-size)));
  height: calc((var(--marker-size) * var(--marker-text-size)));
  fill: var(--marker-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

/*.................... Step Container CSS - END ....................*/

/*.................... Step  Segment CSS - START  ....................*/
.pswfe-vertical-steps .pswfe-vertical-steps-segment {
  flex: 1;
  position: relative;
  border-radius: var(--step-container-border-radius);
  padding: var(--step-container-padding);
  margin: var(--step-container-margin);
  background-color: var(--step-container-background-color);
  min-width: 0;
  min-height: 0;
}

.pswfe-vertical-steps .pswfe-vertical-steps-segment:not(:last-child) {
  padding-bottom: calc((var(--marker-size) * 1rem) / 2);
}

/* .pswfe-vertical-steps .pswfe-vertical-steps-segment:not(:last-child):after {
    left: calc((var(--marker-size)*1rem)/2 - var(--bar-size)/2);
    right: auto;
    top: calc((var(--marker-size)*1rem));
    bottom: 0px;
    width: var(--bar-size);
    background-color: var(--bar-color);
    height: auto;
} */

/*.................... Step  Segment CSS - END  ....................*/

/* ....................Step Marker CSS - START ....................*/

.pswfe-vertical-steps .pswfe-vertical-steps-marker {
  width: calc(var(--marker-size) * 1rem);
  height: calc(var(--marker-size) * 1rem);
  background-color: var(--marker-background-color);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: var(--marker-border-radius);
  /* border-width: var(--marker-border-width);
    border-color: var(--marker-border-color);
    border-style: var(--marker-border-style); */
  font-size: calc((var(--marker-size) * 1rem) / 3);
  color: var(--marker-color);
}

.pswfe-vertical-steps img.pswfe-vertical-marker-image {
  height: 100%;
  border-radius: var(--marker-border-radius);
  width: 100%;
}

.pswfe-vertical-steps .pswfe-vertical-steps-marker:hover {
  box-shadow: 0 0 15px var(--marker-background-color);
}

.pswfe-vertical-steps .pswfe-vertical-marker-text {
  font-size: calc(var(--marker-size) * var(--marker-text-size));
  font-family: var(--e-global-typography-primary-font-family);
  font-weight: var(--e-global-typography-primary-font-family);
  z-index: 99;
}

.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.is-active
  .pswfe-vertical-marker-text.is-active {
  color: white;
}

.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.is-active
  .pswfe-vertical-steps-marker {
  box-shadow: 0px 0px 10px var(--active-bar-color);
  background-color: var(--active-bar-color);
  color: white;
  border-color: var(--active-bar-color) !important;
}

.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.is-active
  .pswfe-vertical-steps-marker
  .pswfe-vertical-badge.is-active {
  background-color: var(--active-bg-badge-color);
  color: var(--active-badge-color);
}

/* ....................Step Marker CSS - END ....................*/

/*.................... Step Content CSS - START ....................*/

.pswfe-vertical-steps .pswfe-vertical-steps-content {
  margin-left: calc(var(--marker-size) * 1rem + 2rem);
  margin-top: calc(0px - var(--marker-size) * 1rem);
  background-color: var(--content-background-color);
  padding: var(--step-content-padding);
  border-radius: var(--content-border-radius);
  width: calc(
    var(--content-width) - var(--marker-size) * 1rem - 2rem -
      var(--step-content-padding)
  );
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: calc(var(--marker-size) * 1rem);
}

.pswfe-vertical-steps .pswfe-vertical-steps-content .pswfe-vertical-title {
  line-height: initial;
  font-size: var(--content-heading-font-size);
  text-align: var(--content-heading-align);
  color: var(--content-title-color);
  word-break: break-word;
  font-family: var(--content-title-font-family);
  font-weight: var(--content-title-font-weight);
  margin: 0;
}

.pswfe-vertical-steps
  .pswfe-vertical-steps-content
  .pswfe-vertical-content-desc {
  text-align: var(--content-desc-align);
  font-size: var(--content-desc-font-size);
  color: var(--content-desc-color);

  font-family: var(--content-desc-font-family);
  font-weight: var(--content-desc-font-weight);
  word-break: break-word;
}

.pswfe-vertical-steps-segment.is-active
  .pswfe-vertical-steps-content
  .pswfe-vertical-title {
  color: var(--active-bar-color);
}

/*.................... Step Content CSS - END ....................*/

/*.................... step bar css  ....................*/
.pswfe-vertical-steps .pswfe-vertical-has-arrow:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc((var(--marker-size) * 1rem) / 2 - var(--bar-size) * 1.5);
  top: auto;
  margin: var(--step-container-margin);
  bottom: calc(var(--bar-size) / 1.5);
  border-right: var(--bar-size) solid var(--bar-color);
  border-bottom: var(--bar-size) solid var(--bar-color);
  transform: rotate(45deg);
  height: calc(var(--bar-size) * 3);
  width: calc(var(--bar-size) * 3);
  z-index: 101;
}

.pswfe-vertical-steps .pswfe-vertical-steps-segment:not(:last-child):after {
  content: "";
  position: absolute;
  left: calc((var(--marker-size) * 1rem) / 2 - var(--bar-size) / 2);
  right: auto;
  top: calc(var(--marker-size) * 1rem);
  bottom: 0;
  width: var(--bar-size);
  background-color: var(--bar-color);
  height: auto;
  z-index: 100;
  margin: var(--step-container-margin);
  /* border-color: var(--bar-border-color);
    border-style: solid;
    border-width: 0 1px; */
}

.pswfe-vertical-steps
  .pswfe-vertical-has-arrow.pswfe-vertical-steps-segment:not(
    :last-child
  )::after {
  bottom: calc(var(--bar-size));
}

.pswfe-vertical-steps
  .pswfe-vertical-is-dashed.pswfe-vertical-steps-segment:after,
.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.pswfe-vertical-is-dashed:after {
  background: repeating-linear-gradient(
    180deg,
    var(--bar-color),
    var(--bar-color) 5px,
    transparent 5px,
    transparent 10px
  ) !important;
}

.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.pswfe-vertical-has-gap:not(:last-child):after {
  top: calc(var(--marker-size) * 1rem + var(--bar-gap)) !important;
  bottom: calc(0px + var(--bar-gap) + var(--bar-size)) !important;
}

.pswfe-vertical-steps
  .pswfe-vertical-has-arrow.pswfe-vertical-has-gap:not(:last-child)::before {
  bottom: calc(var(--bar-size) / 1.5 + var(--bar-gap));
}

.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.is-active:not(:last-child):after {
  background-color: var(--active-bar-color);
}

.pswfe-vertical-steps
  .pswfe-vertical-has-arrow.is-active:not(:last-child)::before {
  border-right: var(--bar-size) solid var(--active-bar-color);
  border-bottom: var(--bar-size) solid var(--active-bar-color);
}

.pswfe-vertical-steps
  .pswfe-vertical-is-dashed.pswfe-vertical-steps-segment.is-active::after,
.pswfe-vertical-steps
  .pswfe-vertical-steps-segment.pswfe-vertical-is-dashed.is-active::after {
  background: repeating-linear-gradient(
    180deg,
    var(--active-bar-color),
    var(--active-bar-color) 5px,
    transparent 5px,
    transparent 10px
  ) !important;
}

.pswfe-vertical-steps
  .pswfe-vertical-is-dashed.pswfe-vertical-has-arrow.is-active::before,
.pswfe-vertical-steps
  .pswfe-vertical-has-arrow.pswfe-vertical-is-dashed.is-active::before {
  border-right: var(--bar-size) dotted var(--active-bar-color);
  border-bottom: var(--bar-size) dotted var(--active-bar-color);
}

/*.................... Step Bar CSS - END  ....................*/

/*.................... Badge CSS - START  ....................*/
.pswfe-vertical-steps .pswfe-vertical-badge {
  position: absolute;
  min-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--badge-padding);
  color: var(--badge-color);
  width: calc(var(--marker-size) * 2px);
  height: calc(var(--marker-size) * 2px);
  border-radius: var(--badge-border-radius);
  background-color: var(--badge-background-color);
  font-size: calc(var(--marker-size) * var(--badge-font-size));
  font-weight: var(--badge-font-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 99;
  /*     position: absolute;
    top: var(--badge-top-pos);
    right: var(--badge-right-pos);
    overflow: hidden;
    padding: var(--badge-padding);
    max-width: 200%;
 
    border-radius: var(--badge-border-radius);
    background-color: var(--badge-background-color);
    color: var(--badge-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(var(--marker-size) * var(--badge-font-size));
    line-height: 1; */
}
.pswfe-vertical-badge.steps.top-left,
.pswfe-vertical-badge.top-left {
  left: var(--badge-right-pos);
  top: var(--badge-top-pos);
}
.pswfe-vertical-badge.steps.top-right,
.pswfe-vertical-badge.top-right {
  right: var(--badge-right-pos);
  top: var(--badge-top-pos);
}
.pswfe-vertical-badge.steps.bottom-left,
.pswfe-vertical-badge.bottom-left {
  left: var(--badge-right-pos);
  bottom: var(--badge-top-pos);
}
.pswfe-vertical-badge.steps.bottom-right,
.pswfe-vertical-badge.bottom-right {
  right: var(--badge-right-pos);
  bottom: var(--badge-top-pos);
}
.pswfe-vertical-badge.steps {
  border-radius: var(--badge-text-bd-radius);
  width: auto;
  max-width: 100%;
}
/* .pswfe-vertical-steps .pswfe-vertical-steps-segment.is-active .pswfe-vertical-badge {
    background-color: rgb(203, 198, 198);
    color: var(--active-bar-color);
    border-color: var(--active-bar-color) !important;
} */

/*.................... Badge CSS - END  ....................*/

@media screen and (max-width: 768px) {
  .pswfe-vertical-steps {
    width: 100% !important;
    --marker-size: 6;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .pswfe-vertical-steps {
    width: 80% !important;
  }
}
/* @media screen and (min-width: 220px) and (max-width: 450px) {
  
    .pswfe-vertical-steps.v-style-2 .pswfe-vertical-steps-marker {
    
     left: calc(50% - (var(--marker-size) * 1rem) / 2);
  }
   .pswfe-vertical-steps.v-style-2 .pswfe-vertical-steps-content{
    display: initial;
    --content-heading-align: center;
    --content-desc-align: center;
   
  }
} */

/* new design css   */

.cps-show-events {
  --marker-color: black;
  --marker-background-color: var(--e-global-color-primary);
  --marker-size: 3;
  --marker-text-size: 5px;
  --marker-border-radius: 50%;
  --badge-color: var(--e-global-color-white);
  --badge-background-color: white;
  --badge-border-radius: 20px;
  --badge-padding: 2px 5px 2px 5px;
  --bar-size: 3px;
  --bar-color: rgba(77, 76, 76, 0.829);
  --content-title-color: black;
  --content-desc-color: var(--e-global-color-text);
  --image-bg-color: #169fe212;
}
.cps-show-events {
  display: flex;
  gap: 30px;
  position: relative;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
.cps-category-filters ul {
  display: flex;
  gap: 25px;
  list-style-type: none;
}

.cps-category-filters li {
  list-style: none;
  background-color: #eff8ff;
  color: #000;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
}

.cps-left {
  width: 49%;
}

.cps-accordion {
  list-style: none;
  position: relative;
  display: flex;
  margin-bottom: 0px;
  padding-bottom: 1rem;
  align-content: center;
}

.cps-accordion::before {
  content: "";
  position: absolute;
  background: var(--bar-color);
  width: var(--bar-size);
  top: calc(var(--marker-size) * 1rem);
  left: calc(0px + ((var(--marker-size) * 1rem) / 2) - var(--bar-size) / 2);
  height: auto;
  z-index: 100;
  bottom: 0px;
  right: auto;
}

.cps-icon_div {
  background: #eff8ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  left: 0px;
  z-index: 2;
}
.cps-icon_div span {
  justify-content: center;
  display: flex;
  align-items: center;
}

.cps-process-details {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #c2c2c2;
  padding-bottom: 15px;
  width: calc(100% - 1rem - (var(--marker-size) * 1rem));
}

svg.cps-icon-arrow {
  position: absolute;
  right: 10px;
  top: 5px;
  fill: black;
  width: 15px;
  height: 15px;
}

.cps-footer {
  transition: height 2s ease-in-out, opacity 2s ease-in-out;
  transition: max-height 2s ease-in-out, opacity 2s ease-in-out;
  /* display: none; */
}
.cps-accordion:not(.active) .cps-footer {
  display: none;
}

.calendar-days:before {
  content: "\f073";
}

.classShow {
  opacity: 1;
  transition: height 2s ease-in-out;
}

.classHide {
  display: none !important;
  height: 0;
  opacity: 0;
  transition: height 2s;
}

.cps-accordion::after {
  content: "";
  position: absolute;
  background: transparent;
  width: var(--bar-size);
  top: calc(var(--marker-size) * 1rem);
  left: calc((var(--marker-size) * 1rem) / 2 - var(--bar-size) / 2);
  height: 0%;
  transition: height 5.2s linear;
  z-index: 100;
  bottom: 0px;
  right: auto;
  max-height: calc(100% - (var(--marker-size) * 1rem));
}

.cps-accordion.active::after {
  height: 98%;
  background: var(--marker-color);
}

.cps-selected .cps-icon_div {
  background-color: var(--marker-color) !important;
  fill: var(--marker-background-color) !important;
  /* transition: all 0.2s ease-in-out; */
}
.cps-accordion.cps-selected .cps-icon_div svg {
  fill: var(--marker-background-color);
}
.cps-accordion.cps-accordion.cps-selected .cps-icon_div i {
  color: var(--marker-background-color);
}

.cps-accordion .cps-icon_div,
.cps-accordion .cps-icon_div svg,
.cps-accordion .cps-icon_div i {
  transition: all 0.6s ease-in-out;
}

.pswfe-accordion-marker-text {
  fill: var(--marker-color);
  width: calc((var(--marker-size) * var(--marker-text-size)));
  height: calc((var(--marker-size) * var(--marker-text-size)));
  display: flex;
  justify-content: center;
  align-items: center;
}
.pswfe-accordion-marker-text {
  color: var(--marker-color);
  font-size: calc((var(--marker-size) * var(--marker-text-size)));
}
.cps-badge {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  word-break: break-word;
}

.cps-badge span {
  font-size: 12px;
  border: 1px solid black;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--badge-color);
  background-color: var(--badge-background-color);
  border-radius: var(--badge-border-radius);
  padding: var(--badge-padding);
}

.cps-right .cps-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.cps-process-details .pswfe-accordion-title {
  line-height: initial;
  font-size: var(--content-heading-font-size, 22px);
  text-align: var(--content-heading-align);
  color: var(--content-title-color);
  word-break: break-word;
  font-family: var(--content-title-font-family);
  font-weight: var(--content-title-font-weight, 600px);
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
}

.cps-footer .pswfe-vertical-content-desc {
  text-align: var(--content-desc-align);
  font-size: var(--content-desc-font-size, 15);
  color: var(--content-desc-color);
  font-family: var(--content-desc-font-family);
  font-weight: var(--content-desc-font-weight);
  word-break: break-word;
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
}

@media only screen and (max-width: 433px) {
  .cps-left {
    width: 100%;
  }
  .cps-show-events {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .cps-footer .cps_mobile_image {
    display: block;
    width: 98%;
    margin-top: 10px;
    margin-bottom: 20px;
    height: 250px;
    display: flex;
  }
  .cps-show-events .cps-right.cps_desktop_img {
    display: none;
  }
  .cps-footer .cps-img img {
    width: 100%;
    border-radius: 10px;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    object-position: center;
  }
  .cps-img {
    display: flex;
  }
}

.cps-right,
.cps_mobile_image {
  width: 49%;
  background-color: var(--image-bg-color);
  border-radius: 5px;
  padding: 20px;
}
.cps_mobile_image {
  display: none;
}
.cps-right.cps_desktop_img {
  display: block;
}

.cps-footer .cps-right .cps-img img {
  display: none;
}
.cps-icon-arrow-up {
  position: absolute;
  right: 34px;
  top: 5px;
  fill: black;
  width: 15px;
  height: 15px;
  transform: rotate(360deg);
}

ul.pswfe-steps-accoridion .cps-icon_div {
  background-color: var(--marker-background-color);
  width: calc(var(--marker-size) * 1rem);
  height: calc(var(--marker-size) * 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--marker-border-radius);

  overflow: hidden;
}

ul.pswfe-steps-accoridion.pswfe-process {
  padding: 0px;
}

.cps-accordion:nth-last-child(1)::before {
  content: unset;
}
.cps-accordion:nth-last-child(1)::after {
  content: unset;
}
li.cps-accordion .cps-icon-arrow-up {
  transition: all 0.3s ease-in-out;
}
li.cps-accordion.cps-selected .cps-icon-arrow-up {
  transform: rotate(180deg);
}
.cps-process-details:nth-last-child(1) {
  border: 0px;
}

.pswfe-steps-accoridion img.pswfe-accordion-image {
  height: 100%;
  width: 100%;
}

li.cps-accordion.cps-selected .cps-badge .pswfe-badge-tab-design {
  background-color: var(--marker-color);
  color: var(--marker-background-color);
  transition: all 0.6s ease-in-out;
}
