/*******************************
    Template-86
*******************************/
/* .template-86 .card .card-header button::before {
    content: '1';
    pointer-events: none;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 15px;
    font-size: 19px;
} 

.template-86 .card .card-header button:after {
	content: attr(data-symbol-opened);
	pointer-events: none;
	position: absolute;
	top: 25px;
	right: 50px;
	width: 20px;
	height: 22px;;
	transform: rotate(180deg);
	transition: all 0.3s;
}

.template-86 .card .card-header button.collapsed:after {
	content: attr(data-symbol-closed);
}*/


.template-86 .card-header small {
    pointer-events: none;
}

/* Active number color class */

.template-86.number-color-active-3 .card-header strong {
    color: var(--color-1);
    transition: 0.1s;
}

.template-86.number-color-active-3:has(.card .collapse.show) .card-header strong{
    color: var(--color-3);
}

/* Active background color class */

.template-86.bg-color-active-11 .card-header,
.template-86.bg-color-active-11 .card-body, 
.template-86.bg-color-active-11 button {
    background-color: var(--color-2);
    transition: 0.1s;
}

.template-86.bg-color-active-11:has(.card .collapse.show) .card-header, 
.template-86.bg-color-active-11:has(.card .collapse.show) .card-body, 
.template-86.bg-color-active-11:has(.card .collapse.show) button {
    background-color: var(--color-11);
}

/* Active background color 2 class */

.template-86.bg-color-active-2:not(:has(.card .card-header button.collapsed)) .card,
.template-86.bg-color-active-2:not(:has(.card .card-header button.collapsed)) .card-header, 
.template-86.bg-color-active-2:not(:has(.card .card-header button.collapsed)) .card-body, 
.template-86.bg-color-active-2:not(:has(.card .card-header button.collapsed)) .collapse.show, 
.template-86.bg-color-active-2:not(:has(.card .card-header button.collapsed)) button {
    background-color: var(--color-2);
}

/* Active heading color 2 class */

.template-86.heading-color-active-3:not(:has(.card .card-header button.collapsed)) .card-header span {
    color: var(--color-3);
    transition: 0.1s;
}

/* symbol style 1 */

.template-86.symbol-style-1 .card-header .card__symbol svg {
    rotate: 0deg;
    fill: var(--color-1);
    transition: all 0.3s ease-in-out;
}

.template-86.symbol-style-1:not(:has(.card .card-header button.collapsed)) .card-header .card__symbol svg {
    rotate: 180deg;
    fill: var(--color-4);
}

/*Active effect - Eco max*/
.template-86-active .collapse.show ~ .card-header .color-1,
.template-86-active .collapsing ~ .card-header .color-1 {
  color: var(--color-3) !important;
}

.template-86-active .collapse.show .card-body,
.template-86-active .collapsing .card-body {
  background-color: white !important;
}

.template-86-active .card:has(.collapse.show) .card-header,
.template-86-active .card:has(.collapsing) .card-header {
  background-color: white !important;
}

.template-86-active .card:has(.collapse.show) .card-header button,
.template-86-active .card:has(.collapsing) .card-header button {
  background-color: white !important;
}

.template-86-active .card:has(.collapse.show) .card-header button small,
.template-86-active .card:has(.collapsing) .card-header button small {
  display: none;
}

.template-86-active .card:has(.collapse.show) .card-header button span,
.template-86-active .card:has(.collapsing) .card-header button span {
  color: var(--color-4)!important;
}

/* Hover and active style 1 */

.template-86.hover-style-1 .card,
.template-86.active-style-1 .card:has(.collapse.show),
.template-86.active-style-1 .card:has(.collapsing) {
  transition: box-shadow .3s;
}

.template-86.active-style-1 .card:has(.collapse.show),
.template-86.active-style-1 .card:has(.collapsing) {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
}

.template-86.active-shadow-1 .card:has(.collapse.show),
.template-86.active-shadow-1 .card:has(.collapsing) {
  box-shadow: 0px 0px 10px 0px #00000040;
}

.template-86.rounded-style-1:first-of-type .card {
  border-radius: calc(1.25rem - 5px) calc(1.25rem - 1px) 0 0;
}

.template-86.rounded-style-1:last-of-type .card {
  border-radius: 0 0 calc(1.25rem - 5px) calc(1.25rem - 1px);
}

.template-86.rounded-style-2:first-of-type .card {
  border-radius: 30px 30px 0 0;
}

.template-86.rounded-style-2:last-of-type .card {
  border-radius: 0 0 30px 30px;
}

.template-86.active-title-color-11 .card-header button:not(.collapsed) strong,
.template-86.active-title-color-11 .card-header button:not(.collapsed) span {
    transition: all .3s;
    color: var(--color-11) !important;
}

@media (min-width: 991.92px) {

  .template-86.hover-style-1 .card:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
  }
}

.template-86.active-title-color-3 .card:is(:has(.collapse.show), :has(.collapsing)) .card-header button :is(strong, small, span) {
    transition: all .3s;
    color: var(--color-3) !important;
}

.template-86.active-title-color-3 .card:is(:has(.collapse.show), :has(.collapsing)) .card-header button small svg path {
    transition: all .3s;
    fill: var(--color-3) !important;
}

/* active title color 4 class */

.template-86.active-title-color-4 .card:is(:has(.collapse.show), :has(.collapsing)) .card-header button :is(strong, small, span) {
    transition: all .3s;
    color: var(--color-4) !important;
}

.template-86.active-title-color-4 .card:is(:has(.collapse.show), :has(.collapsing)) .card-header button small svg path {
    transition: all .3s;
    fill: var(--color-4) !important;
}

/* inactive background color 3 class */

.template-86.inactive-bg-color-3 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-3 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-3);
    transition: all .3s;
}

/* inactive background color 4 class */

.template-86.inactive-bg-color-4 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-4 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-4);
    transition: all .3s;
}

/* inactive background color 5 class */

.template-86.inactive-bg-color-5 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-5 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-5);
    transition: all .3s;
}

/* inactive background color 6 class */

.template-86.inactive-bg-color-6 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-6 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-6);
    transition: all .3s;
}

/* inactive background color 7class */

.template-86.inactive-bg-color-7.card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-7.card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-7);
    transition: all .3s;
}

/* inactive background color 8 class */

.template-86.inactive-bg-color-8 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-8 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-8);
    transition: all .3s;
}

/* inactive background color 9 class */

.template-86.inactive-bg-color-9 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-9 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-9);
    transition: all .3s;
}

/* inactive background color 10 class */

.template-86.inactive-bg-color-10 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-10 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-10);
    transition: all .3s;
}

/* inactive background color 629 class */

.template-86.inactive-bg-color-629 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header,
.template-86.inactive-bg-color-629 .card:not(:is(:has(.collapse.show), :has(.collapsing))) .card-header button[data-toggle="collapse"] {
    background-color: var(--color-629);
    transition: all .3s;
}

/* Green active style used in Balkan Trade*/

.template-86.template-86-green-active .card:has(.collapse.show) .card-header,
.template-86.template-86-green-active .card:has(.collapsing) .card-header {
  background-color: rgba(157, 214, 125, 0.1);
}

.template-86.template-86-green-active .card:has(.collapse.show) .card-body,
.template-86.template-86-green-active .card:has(.collapsing) .card-body {
  background-color: rgba(157, 214, 125, 0.1);
}

.template-86.template-86-green-active .card:has(.collapse.show) .card-header button,
.template-86.template-86-green-active .card:has(.collapsing) .card-header button {
  background-color: transparent;
}

.template-86.template-86-green-active .card:has(.collapse.show) .card-header strong,
.template-86.template-86-green-active .card:has(.collapsing) .card-header strong {
  color: #9DD67D;
}

/* When active header to be transparent */

.template-86.active-header-transparent .card:has(.collapse.show) .card-header {
  background-color: transparent !important;
}