/*  Cookies Box */
/*  ============================= */


.cookies-box {
  max-width: 520px;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  background-color: var(--wtl-panel-color-bg-white);
  border-radius: 10px;
  flex-direction: column;
  padding: 15px;
  display: none;
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 9999;
  border: 1px solid var(--wtl-panel-color-bg-border-active);
  font-weight: 400;
  margin: 15px;
  color: var(--wtl-panel-color-font-dark-100);
}
.cookies-box *:not(.fas, .fa-classic, .fa-solid, .far, .fa-regular, .fal, .fa-light, .fat, .fa-thin) {
  font-family: var(--wtl-panel-font-family);
}
.cookies-box.active {
  display: flex;
}
.cookies-box > h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--wtl-panel-color-font-dark-100);
}
.cookies-box > p {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
.cookies-box > .actions {
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  justify-content: space-between;
  display: flex;
  margin-top: 10px;
}
.cookies-box > .actions a {
  flex: 1;
}
.cookies-popup a:hover,
.cookies-box a:hover {
  text-decoration: none;
}
@media screen and (max-width: 479px) {
  .cookies-box {
    max-width: 100%;
  }
  .cookies-box > .actions {
    flex-direction: column;
  }
}


/*  Cookies Wrapper Overlay */
/*  ============================= */

.cookie-wrapper.overlay-active {
  position: fixed;
  background: var(--wtl-panel-color-bg-overlay);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  z-index: 9999999999;
}

.cookie-wrapper {
  position: unset;
  background: unset;
  top: unset;
  right: unset;
  bottom: unset;
  left: unset;
  content: unset;
  z-index: unset;
}


/*  Cookies Popup */
/*  ============================= */

.cookies-popup {
  width: 100%;
  height: 100%;
  background-color: var(--wtl-panel-color-bg-overlay);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
  overflow: hidden;
  z-index: 9999;
  font-size: 14px;
  line-height: 20px;
}

.cookies-popup *:not(.fas, .fa-classic, .fa-solid, .far, .fa-regular, .fal, .fa-light, .fat, .fa-thin) {
  font-family: var(--wtl-panel-font-family);
}

.cookies-popup.active {
  display: flex;
}

.cookies-popup p {
  margin: 0;
}

.cookies-popup > .cookies-popup-wrap {
  max-height: 100%;
  max-width: 100%;
  background-color: var(--wtl-panel-color-bg-white);
  border-radius: 10px;
  display: block;
  position: relative;
  width: 660px;
  padding: 20px;
  overflow: visible;
}

.cookies-popup .cookies-popup-close {
  width: 30px;
  height: 30px;
  background-color: var(--wtl-panel-color-bg-white);
  color: var(--wtl-panel-color-font-100);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 17px;
  line-height: 20px;
  display: flex;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: auto;
  right: 0%;
  cursor: pointer;
  transition: all .2s ease;
}

.cookies-popup .cookies-popup-close:hover {
  color: var(--wtl-panel-color-font-75);
}

.cookies-popup .cookies-content {
  max-height: 100%;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  display: flex;
}

.cookies-popup .cookies-content > h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
}

.cookies-popup .cookies-content .cookies-scroll-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  display: flex;
  overflow: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.cookies-popup .cookies-content .cookies-scroll-wrap::-webkit-scrollbar {
  display: none;  /* Hide scrollbar for IE, Edge and Firefox */
}

.cookies-popup .cookies-description {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-bottom: 1px solid var(--wtl-panel-color-bg-border);
  flex-direction: column;
  padding-bottom: 20px;
  display: flex;
  line-height: 20px;
}

.cookies-popup .cookies-description p:nth-of-type(n+2),
.cookies-popup .cookies-description.active .cookies-description-toggle > .more,
.cookies-popup .cookies-description .cookies-description-toggle > .less {
  display: none;
}

.cookies-popup .cookies-description.active p:nth-of-type(n+2),
.cookies-popup .cookies-description .cookies-description-toggle > .more,
.cookies-popup .cookies-description.active .cookies-description-toggle > .less {
  display: block;
}

.cookies-popup .cookies-description a {
  cursor: pointer;
  color: var(--wtl-panel-color-accent);
}

.cookies-popup .cookies-options {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  display: flex;
}

.cookies-popup .cookies-options .cookies-option-header {
  align-items: center;
  display: flex;
  transition: all .2s ease;
  cursor: pointer;
}

.cookies-popup .cookies-options label.required {
  display: none;
}

.cookies-popup .cookies-options i {
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.cookies-popup .cookies-options h6 {
  flex: 1;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 17px;
  line-height: 20px;
  margin-right: 20px;
  letter-spacing: 0;
}

.cookies-popup .cookies-options .cookie-required {
  font-size: 12px;
  line-height: 20px;
  border-radius: 10px;
  padding: 0 7px;
  color: var(--wtl-panel-color-font-white);
  background: var(--wtl-color-green);
}

.cookies-popup .cookies-options .option-value {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 30px;
}

.cookies-popup .cookies-option .option-value {
  display: none;
}

.cookies-popup .cookies-option.active .option-value {
  display: block;
}

.cookies-popup .cookies-option.active .cookies-option-header i {
  transform: rotate(90deg);
} 

.cookies-popup .cookies-actions {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  display: flex;
  border-top: 1px solid var(--wtl-panel-color-bg-border);
  padding-top: 20px;
}

.cookies-popup .cookies-actions .right {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

@media screen and (max-width: 479px) {
  .cookies-popup .cookies-actions, 
  .cookies-popup .cookies-actions .right {
    flex-direction: column;
  }
}

/*  BTNS */
/*  ============================= */

.cookies-box a.wtl-btn-standard,
.cookies-popup a.wtl-btn-standard {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  font-weight: 500;
  line-height: 20px;
  transition: all .2s;
  display: flex;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  -webkit-appearance: button;
  border: 0;
  transition: all .2s ease;
  font-size: 14px;
  background-color: var(--wtl-panel-color-accent);  
  color: var(--wtl-panel-color-font-white);
}

.cookies-box a.wtl-btn-standard:hover,
.cookies-popup a.wtl-btn-standard:hover {
  background-color: var(--wtl-panel-color-accent-hover);
  color: var(--wtl-panel-color-font-white);
}

.cookies-box a.wtl-btn-standard.btn-color-light,
.cookies-popup a.wtl-btn-standard.btn-color-light {
  background-color: var(--wtl-panel-color-dark-light); 
  color: var(--wtl-panel-color-font-dark-50);
}
.cookies-box a.wtl-btn-standard.btn-color-light:hover,
.cookies-popup a.wtl-btn-standard.btn-color-light:hover {
  background-color: var(--wtl-panel-color-dark-light-hover);
  color: var(--wtl-panel-color-font-dark-100);
}



/*  Checkbox toggle */
/*  ============================= */

.cookies-popup .new-input-checkbox-toggle {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 0;
	padding-left: 0;
	justify-content: flex-end;
	align-items: center;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: row-reverse;
  cursor: pointer;
}

.cookies-popup .new-input-checkbox-toggle > input {display: none;}
.cookies-popup .new-input-checkbox-toggle > input:checked ~ .toggle {background: var(--wtl-color-green);}
.cookies-popup .new-input-checkbox-toggle > input:checked ~ .toggle > .switch {left: 13px;}

.cookies-popup .new-input-checkbox-toggle > span {
	position: relative;
	z-index: 1;
	margin-bottom: 0;
	margin-left: 0;
	padding-left: 0;
	font-family: var(--wtl-font-family);
	color: var(--wtl-dark-100);
	font-size: 15px;
	line-height: 28px;
	font-weight: normal;
}

.cookies-popup .new-input-checkbox-toggle > .toggle {
	position: relative;
	width: 30px;
	height: 20px;
	margin-right: 0;
	padding-right: 0;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 10px;
	background-color: var(--wtl-panel-color-accent-light-hover);
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
}

.cookies-popup .new-input-checkbox-toggle > .toggle > .switch {
	position: absolute;
	left: 3px;
	top: 3px;
	width: 14px;
	height: 14px;
  min-height: 14px;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 50%;
	background-color: var(--wtl-panel-color-font-white);
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
}