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

.template-5802 .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-5802 .card .card-header button.collapsed:after {
	content: attr(data-symbol-closed);
}*/


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

/* Active number color class */

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

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

/* Active background color class */

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

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

/* Active background color 2 class */

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

/* Active heading color 2 class */

.template-5802.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-5802.symbol-style-1 .card-header .card__symbol svg {
    rotate: 0deg;
    fill: var(--color-1);
    transition: all 0.3s ease-in-out;
}

.template-5802.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-5802-active .collapse.show ~ .card-header .color-1,
.template-5802-active .collapsing ~ .card-header .color-1 {
  color: var(--color-3) !important;
}

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

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

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

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

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

/* Hover and active style 1 */

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

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

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

.template-5802-rounded-style-1-wrapper > div:first-child .template-5802.rounded-style-1 .card,
.template-5802-rounded-group-1 > div:first-child .template-5802.rounded-style-1 .card {
  border-radius: calc(1.25rem - 5px) calc(1.25rem - 1px) 0 0;
}

.template-5802-rounded-style-1-wrapper > div:last-child .template-5802.rounded-style-1 .card,
.template-5802-rounded-group-1 > div:last-child .template-5802.rounded-style-1 .card {
  border-radius: 0 0 calc(1.25rem - 5px) calc(1.25rem - 1px);
}

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

@media (min-width: 991.92px) {

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

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

.template-5802.active-title-color-3 .card-header button:not(.collapsed) small svg path {
    transition: all .3s;
    fill: var(--color-3) !important;
}

/* Green active style used in Balkan Trade*/

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

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

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

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

/* When active header to be transparent */

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