.digr_image_accordion .digr_img_accordion_container {
  width: 100%;
  display: flex;
  overflow: hidden;
}

/* Visual Builder fix:
 * In Divi 5 VB, every hovered child module renders an `.et-vb-module-options`
 * toolbar (4-icon panel: settings/clone/delete/more) as a direct child of the
 * item. By default Divi positions it absolutely, but inside our flex/overflow
 * container it can fall back to normal flow and the dark toolbar background
 * stretches top-to-bottom next to the item. Force it back into absolute. */
.digr_image_accordion .digr_image_accordion_item {
  position: relative;
}

.digr_image_accordion .digr_image_accordion_item > .et-vb-module-options {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
  max-height: 22px;
  pointer-events: none;
  z-index: 9;
}
/* .digr_image_accordion .digr_image_accordion_item > .et-vb-module-options{
  position:relative;
  justify-content: flex-end;
  display: inline-flex;
} */
.digr_image_accordion .digr_image_accordion_item > .et-vb-module-options > * {
  pointer-events: auto;

}

/*======== Accordion Button ================ */
.digr_img_accordion_container .digr_img_accordion_item_wrapper .et_pb_button_wrapper .et_pb_button:before,
.digr_img_accordion_container .digr_img_accordion_item_wrapper .et_pb_button_wrapper .et_pb_button:after {
  content: attr(data-icon);
}

.digr_image_accordion .digr_image_accordion_item {
  --transition: 0.5s;
  transition: var(--transition) ease-in-out !important;
}

.digr_img_accordion_container .digr_image_accordion_item .digr_img_accordion_content {
  opacity: 0;
}

.digr_img_accordion_container .digr_image_accordion_item.digr_active .digr_img_accordion_content {
  opacity: 1;
}

.digr_img_accordion_container .digr_image_accordion_item.digr_active .digr_img_accordion_content,
.digr_img_accordion_container .digr_image_accordion_item.digr_active {
  transition: opacity var(--transition) ease-in-out;
}

/* ======================= Border Animation ======================== */
/* .digr_img_accordion_item_wrapper, */
.digr_active {
  --border_gap: 4px;
  --border_width: 6px;
  --border_color: #17ff0f;
  --border_gradient_1_color: #41f1df;
  --border_gradient_2_color: #e44862;
  --border_transition: var(--transition);
}

/* ========================= style 1 =========================== */


.digr_img_accordion_container.style_1 .digr_active .digr_img_accordion_item_wrapper:after,
.digr_img_accordion_container.style_1 .digr_active .digr_img_accordion_item_wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-color: var(--border_color);
  border-style: solid;
  border-width: 0;
  transform-origin: 0 0;
  animation-duration: var(--border_transition);
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.digr_img_accordion_container.style_1 .digr_active .digr_img_accordion_item_wrapper:before {
  top: 0;
  right: 0;
  border-top-width: 0px;
  border-left-width: 0px;
  left: 1px;
}

.digr_img_accordion_container.style_1 .digr_active .digr_img_accordion_item_wrapper:hover:before {
  animation-name: borderTopLeft;
  /* border-width:var(--border_width) */
}

.digr_img_accordion_container.style_1 .digr_active .digr_img_accordion_item_wrapper:after {
  bottom: 0;
  right: 0;
}

.digr_img_accordion_container.style_1 .digr_active .digr_img_accordion_item_wrapper:hover:after {
  animation-name: borderBottomRight;
  /* border-width:var(--border_width) */
}

@keyframes borderTopLeft {

  /* 0%  */
  from {
    border-top-width: var(--border_width);
    /* border-top-width: 0; */
    border-left-width: var(--border_width);
    width: 0;
    height: 0;
  }

  50% {
    width: 100%;
    height: 0;
  }

  to {
    height: 100%;
    border-top-width: var(--border_width);
    border-left-width: var(--border_width);
  }
}

@keyframes borderBottomRight {
  0% {
    border-bottom-width: var(--border_width);
    border-right-width: var(--border_width);
    width: 0;
    height: 0;
  }

  50% {
    width: 100%;
    height: 0;
  }

  100% {
    height: 100%;
    border-right-width: var(--border_width);
    border-bottom-width: var(--border_width);

  }
}

/*===================== style 2 ==================== */


.digr_img_accordion_container.style_2 .digr_active .digr_img_accordion_item_wrapper::before,
.digr_img_accordion_container.style_2 .digr_active .digr_img_accordion_item_wrapper::after {
  content: '';
  position: absolute;
  width: var(--border_width);
  height: 0;
  background-color: var(--border_color);
  transition: all var(--border_transition) ease-in-out;
}

.digr_img_accordion_container.style_2 .digr_active .digr_img_accordion_item_wrapper::before {
  left: var(--border_gap);
  transition: all var(--border_transition) ease-in-out;

}

.digr_img_accordion_container.style_2 .digr_active .digr_img_accordion_item_wrapper::after {
  right: var(--border_gap);
  transition: all var(--border_transition) ease-in-out;

}

.digr_img_accordion_container.style_2 .digr_active .digr_img_accordion_item_wrapper:hover::before,
.digr_img_accordion_container.style_2 .digr_active .digr_img_accordion_item_wrapper:hover::after {
  height: calc(100% - 2 * var(--border_gap));
  transition: height var(--border_transition) ease-in-out;
}


/* style 3  */

.digr_img_accordion_container.style_3 .digr_img_accordion_item_wrapper::before,
.digr_img_accordion_container.style_3 .digr_img_accordion_item_wrapper::after {
  content: '';
  position: absolute;
  width: 0;
  height: var(--border_width);
  background-color: var(--border_color);
  transition: all var(--border_transition) ease-in-out;
}

.digr_img_accordion_container.style_3 .digr_img_accordion_item_wrapper::before {
  top: var(--border_gap);

}

.digr_img_accordion_container.style_3 .digr_img_accordion_item_wrapper::after {
  bottom: var(--border_gap);

}

.digr_img_accordion_container.style_3 .digr_active .digr_img_accordion_item_wrapper:hover::before,
.digr_img_accordion_container.style_3 .digr_active .digr_img_accordion_item_wrapper:hover::after {
  width: calc(100% - 2 * var(--border_gap));
  transition: width var(--border_transition) ease-in-out;
}

/* style 4  */

.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper {

  position: relative;
  overflow: hidden;
  padding: calc(var(--border_gap) + var(--border_width));
}

.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper::before,
.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper::after {
  content: '';
  position: absolute;
  background-color: var(--border_color);
  transition: transform var(--border_transition);
}

.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper::before {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--border_width);
  transform: scaleX(0);
  transform-origin: left;
}

.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper::after {
  bottom: 0;
  right: 0;
  width: 100%;
  height: var(--border_width);
  transform: scaleX(0);
  transform-origin: right;
}

.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper:hover::before,
.digr_img_accordion_container.style_4 .digr_img_accordion_item_wrapper:hover::after {
  transform: scaleX(1);
}

/* style 5  */
.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper {
  position: relative;
  overflow: hidden;
  padding: calc(var(--border_gap) + var(--border_width));
}

.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper::before,
.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper::after {
  content: '';
  position: absolute;
  width: var(--border_width);
  height: 0;
  background-color: var(--border_color);
  transition: height var(--border_transition);
}

.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper::before {
  top: 0;
  left: var(--border_gap);
}

.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper::after {
  bottom: 0;
  right: var(--border_gap);
}

.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper:hover::before,
.digr_img_accordion_container.style_5 .digr_img_accordion_item_wrapper:hover::after {
  /* height: calc(100% - 2 * var(--border_gap)); */
  transition: height var(--border_transition);
  height: 100%;
}

/*===================== style 6 ======================== */
.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper {
  border: var(--border_width) solid transparent;
}

.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:before,
.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:after {
  content: "";
  position: absolute;
}

.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:focus:before,
.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:hover:before {
  animation: styleSixBeforeBorders var(--border_transition) forwards ease-in-out;
}

.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:focus:after,
.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:hover:after {
  animation: styleSixAfterBorders var(--border_transition) forwards ease-in-out;
}

.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:focus,
.digr_img_accordion_container.style_6 .digr_active .digr_img_accordion_item_wrapper:hover {
  animation: styleSixBorderColors var(--border_transition) ease-in-out forwards;
  outline: none;
}

@keyframes styleSixBeforeBorders {
  0% {
    top: calc(var(--border_width) * -1);
    left: 50%;
    bottom: auto;
    right: auto;
    width: 0;
    height: var(--border_width);
  }

  33% {
    top: calc(var(--border_width) * -1);
    left: calc(var(--border_width) * -1);
    bottom: auto;
    right: auto;
    width: calc(var(--border_width) + 50%);
    height: var(--border_width);
  }

  66% {
    top: calc(var(--border_width) * -1);
    left: calc(var(--border_width) * -1);
    bottom: auto;
    right: auto;
    width: var(--border_width);
    height: calc((var(--border_width) * 2) + 100%);
  }

  100% {
    top: auto;
    left: calc(var(--border_width) * -1);
    bottom: calc(var(--border_width) * -1);
    right: auto;
    width: calc(var(--border_width) + 50%);
    height: calc((var(--border_width) * 2) + 100%);
  }
}

@keyframes styleSixAfterBorders {
  0% {
    top: calc(var(--border_width) * -1);
    left: auto;
    bottom: auto;
    right: 50%;
    width: 0;
    height: var(--border_width);
  }

  33% {
    top: calc(var(--border_width) * -1);
    left: auto;
    bottom: auto;
    right: calc(var(--border_width) * -1);
    width: calc(var(--border_width) + 50%);
    height: var(--border_width);
  }

  66% {
    top: calc(var(--border_width) * -1);
    left: auto;
    bottom: auto;
    right: calc(var(--border_width) * -1);
    width: var(--border_width);
    height: calc((var(--border_width) * 2) + 100%);
  }

  100% {
    top: auto;
    left: auto;
    bottom: calc(var(--border_width) * -1);
    right: calc(var(--border_width) * -1);
    width: calc(var(--border_width) + 50%);
    height: calc((var(--border_width) * 2) + 100%);
  }
}

@keyframes styleSixBorderColors {
  0% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  33% {
    border-top-color: var(--border_color);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  66% {
    border-top-color: var(--border_color);
    border-right-color: var(--border_color);
    border-bottom-color: transparent;
    border-left-color: var(--border_color);
  }

  100% {
    border-top-color: var(--border_color);
    border-right-color: var(--border_color);
    border-bottom-color: var(--border_color);
    border-left-color: var(--border_color);
  }
}


/*===================== style 7 ======================== */

.digr_img_accordion_container.style_7 .digr_active .digr_img_accordion_item_wrapper {

  background-repeat: no-repeat;
  background-image: linear-gradient(to right, var(--border_color) 100%, var(--border_color) 100%),
    linear-gradient(to bottom, var(--border_color) 100%, var(--border_color) 100%),
    linear-gradient(to right, var(--border_color) 100%, var(--border_color) 100%),
    linear-gradient(to bottom, var(--border_color) 100%, var(--border_color) 100%);
  background-size: 100% var(--border_width),
    var(--border_width) 100%,
    100% var(--border_width),
    var(--border_width) 100%;
  background-position: 0 0,
    100% 0,
    100% 100%,
    0 100%;
  animation: styleFour var(--border_transition) cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-play-state: paused;
}

.digr_img_accordion_container.style_7 .digr_active .digr_img_accordion_item_wrapper:hover {
  animation-play-state: running;
}

@keyframes styleFour {
  0% {
    background-size: 0 var(--border_width),
      var(--border_width) 0,
      0 var(--border_width),
      var(--border_width) 0;
  }

  25% {
    background-size: 100% var(--border_width),
      var(--border_width) 0,
      0 var(--border_width),
      var(--border_width) 0;
  }

  50% {
    background-size: 100% var(--border_width),
      var(--border_width) 100%,
      0 var(--border_width),
      var(--border_width) 0;
  }

  75% {
    background-size: 100% var(--border_width),
      var(--border_width) 100%,
      100% var(--border_width),
      var(--border_width) 0;
  }

  100% {
    background-size: 100% var(--border_width),
      var(--border_width) 100%,
      100% var(--border_width),
      var(--border_width) 100%;
  }
}



/*===================== style 8 ======================== */
.digr_img_accordion_container.style_8 .digr_active .digr_img_accordion_item_wrapper:hover::before,
.digr_img_accordion_container.style_8 .digr_active .digr_img_accordion_item_wrapper:hover::after {
  content: "";
  position: absolute;
  height: auto;
  width: auto;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: var(--border_width) solid var(--border_color);
  transition: var(--border_transition);
  animation: doubleBorder var(--border_transition) infinite linear;

}

.digr_img_accordion_container.style_8 .digr_active .digr_img_accordion_item_wrapper:hover::after {
  -webkit-animation: doubleBorder var(--border_transition) infinite -1.5s linear;
  animation: doubleBorder var(--border_transition) infinite -1.5s linear;
}

@keyframes doubleBorder {

  0%,
  100% {
    clip-path: inset(0 0 98% 0);
  }

  25% {
    clip-path: inset(0 98% 0 0);
  }

  50% {
    clip-path: inset(98% 0 0 0);
  }

  75% {
    clip-path: inset(0 0 0 98%);
  }
}

/*===================== style 9 ======================== */


.digr_img_accordion_container.style_9 .digr_active .digr_img_accordion_item_wrapper {
  padding: calc(var(--border_gap) + var(--border_width));
  --_border_color: #0000 0 25%, var(--border_color) 0 50%;
  cursor: pointer;
  filter: grayscale(50%);
  /* transition: var(--border_transition); */
}

.digr_img_accordion_container.style_9 .digr_active .digr_img_accordion_item_wrapper:hover {
  --_gradient_position: calc(75% + var(--border_width));
  filter: grayscale(0%);



  --_gradient_1: repeating-linear-gradient(90deg, var(--_border_color)) repeat-x;
  --_gradient_2: repeating-linear-gradient(180deg, var(--_border_color)) repeat-y;

  background: var(--_gradient_1) calc(var(--_gradient_position, 25%) - var(--border_width)) 0,
    var(--_gradient_2) 0 calc(var(--_gradient_position, 125%) - var(--border_width)),
    var(--_gradient_1) calc(var(--_gradient_position, 125%) - var(--border_width)) 100%,
    var(--_gradient_2) 100% calc(var(--_gradient_position, 25%) - var(--border_width));

  background-size: 200% calc(var(--border_width) * 2), calc(var(--border_width) * 2) 200%;

}


/*===================== style 10 ======================== */


.digr_img_accordion_container.style_10 .digr_active .digr_img_accordion_item_wrapper {

  display: grid;
  place-items: center;

  border: var(--border_width) solid transparent;
  transition: var(--border_transition);
}

.digr_img_accordion_container.style_10 .digr_active .digr_img_accordion_item_wrapper:hover {
  border-width: var(--border_width);
  border-image: repeating-linear-gradient(45deg, var(--border_gradient_1_color), var(--border_gradient_2_color) 4%) 1;
  transition: var(--border_transition);
}




/* ============================ style 11 ===========================*/

.digr_img_accordion_container.style_11 .digr_active .digr_img_accordion_item_wrapper {
  border-style: solid;
  border-width: var(--border_width);
  border-image: radial-gradient(var(--border_gradient_1_color), var(--border_gradient_2_color), var(--border_gradient_1_color), var(--border_gradient_2_color)) 1;
}

/* ============================ style 12 ===========================*/

.digr_img_accordion_container.style_12 .digr_active .digr_img_accordion_item_wrapper {
  border-top: var(--border_width) solid var(--border_gradient_1_color);
  border-bottom: var(--border_width) solid var(--border_gradient_2_color);
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: var(--border_width) 100%;
  background-image: linear-gradient(to bottom, var(--border_gradient_1_color) 0%, var(--border_gradient_2_color) 100%), linear-gradient(to bottom, var(--border_gradient_1_color) 0%, var(--border_gradient_2_color) 100%);

}

/* .digr_img_accordion_container{
  height:500px;
} */