.banner-generics { min-height: 500px;background: var(--wb-bg-modules);}
.banner-generics h1 .tachado { text-decoration: line-through #ffbc2f;-webkit-text-decoration: line-through #ffbc2f; -webkit-text-decoration-skip: line-through #ffbc2f}
.txt-loop { display: none; }

.button-large {
  background: var(--color-white);
  
  border: 1px solid var(--color-light-blue);
  cursor: pointer;
  color: #2E47A7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 400;
  padding: 16px 24px;
  position: relative;
  width: 100%;
}
/* .button-large.active { margin-bottom: 1.5rem; } */

.button-large::after { 
  content: "";
  transition: .6s ease-in-out;
  background-image: url("https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-position-y: center;
  width: 20px;
  height: 20px;
  
}
.button-large.active::after { transform: rotate(180deg); }

@media only screen and (min-width: 767px) {
  .button-large { font-size: 1.5rem; }
}

.button-large .text-questions { width: 90%; }
@media only screen and (min-width: 767px) {
  .button-large .text-questions { width: 97%; }
}

.panel-info { transition: .6s ease-in-out; max-height: 0px; overflow: hidden; opacity: 0; color: var(--wb-font-color-1) !important; }
.panel-info.show { max-height: 1300px; overflow: visible; opacity: 1; }

.panel-info li::before{content: url(https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Buk-ui-kit/encuestas/Flecha.svg); left: -30px; position: absolute; width: 22px;}
.panel-info li {font-size: 1.125rem; /*padding-left: 30px;*/ position: relative; margin-left: 30px;}
.panel-info li:not(:last-of-type){margin-bottom: 1.125rem;  margin-left: 30px;}

.text-questions { font-family: var(--font-family-title); font-size: 1rem; }


.panel-info ol { list-style: none; counter-reset: lista-contador;  padding-left: 0; }
.panel-info ol li { counter-increment: lista-contador; display: flex; align-items: start; margin-bottom: 10px; font-size: 16px;/* Color del texto */ }
.panel-info ol li::before { content: counter(lista-contador); background-color: #73A0DB; color: white; font-weight: 600; font-size: 14px;
        min-width: 22px; min-height: 22px; display: flex; align-items: center; justify-content: center;
        border-radius: 50%;margin-right: 16px; white-space: nowrap; }
.swiper-pagination { position: static !important; }

.swiper-pagination-bullet {
  background: var(--color-blue-buk) !important;
  transition: .5s ease !important;
  height: 0.8rem;
  width: 0.8rem;
}

.bg-blue-buk .swiper-pagination-bullet {
  background: white !important;
  transition: .5s ease !important;
  height: 0.8rem;
  width: 0.8rem;
}
.buk-modal {
  display: none;
  animation: fadeOverlayModal .35s linear;
  background: rgba(0, 0, 0, .75);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  outline: 0;
}

.buk-modal.buk-modal--show {
  display: block;
}

.buk-modal__dialog {
  display: flex;
  align-items: center;

  position: relative;
  max-width: 550px;
  margin: 1.25rem auto 1.25rem auto;
  min-height: calc(100% - 1.75rem * 2);
  width: auto;

}

.buk-modal__content {
  animation: fadeDownDialog .4s linear;
  background-color: var(--wb-bg-modules);
  border-radius: 9px;
  padding: 1rem;
  width: 100%;

}

.buk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .75rem;
  border-bottom: 2px solid #70707038;
}
.buk-modal__header p {
  font-family: var(--font-family-title);
  font-size: 1.5rem;
  color: var(--color-blue-buk);
}
.buk-modal__header button {
  appearance: none;
  border: 2px solid #2f48a7;
  border-radius: 4px;
  cursor: pointer;
  padding: .3rem;
}
.buk-modal__header button:hover {
  opacity: .65;
}
.buk-modal__header button:focus {
  box-shadow: 0 0 0 3px rgba(116, 116, 119, 0.29);
  outline: 0;
}
.buk-modal__header button svg {
  vertical-align: middle;
}

.buk-modal__body p,
.buk-modal__body {
  font-size: 1.125rem;
}

.buk-modal__body ul {
  margin-top: .5rem;
}

.buk-modal__body ul li:not(:last-of-type) {
  padding-bottom: .5rem;
}

.buk-modal__body ul li {
  font-weight: 600;
}

@keyframes fadeOverlayModal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeDownDialog {
  0% { transform: translateY(-55px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1;}
}
input[data-currency="true"] { text-align: right; }
.calc input,
.select-group .select-control {
  border-radius: 21px;
  padding: .5rem 1.45rem .5rem 1.25rem;
  width: 100%;
  font-family: inherit;
  font-size: 1.125rem;
  border: 2px solid #d9e3fc;
}

.select-group select {   -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url(https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Calculadoras/flecha-select.svg);
  background-position-x: calc(100% - 17px);
  background-position-y: 16px;
  background-repeat: no-repeat;
/*background: white;*/
}

.calc label,
.calc span,
.select-group .select-control {
  font-size: 1.125rem;
}

.calc__title {
  border-radius: 12px;
}

.calc-box__section {background: var(--color-light-blue);}
.calc-box__section p { font-size: 1.25rem; font-weight: 600;}

@media only screen and (min-width: 767px) {
  .calc__title {
    border-radius: 67px;
  }

  .calc__title p {
    font-size: 1.25rem;
  }
}

@media only screen and (min-width: 1020px) {
  .calc__title p {
    font-size: 1.35rem;
  }
  
  .calc-box__section p {
    font-size: 1.5rem;
    font-weight: 700;
  }
}

.date-group input[type="date"]::-webkit-calendar-picker-indicator {
  content: "";
  cursor: pointer;
  background: url("https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Icons/Calendario%20icono.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 15px;
  width: 15px;
}

.calc input:not([readonly]) {
  border: 2px solid #d9e3fc;
  cursor: pointer;
  background: white;
}

.calc input[type="number"] {
  text-align: right;
}

.calc input:not([readonly]):focus,
.calc input:not([readonly]):hover,
.select-group .select-control:focus,
.select-group .select-control:hover {
  border-color: var(--color-blue-buk);
  outline: 0;
}

.calc input[readonly] {
  background: var(--wb-bg-modules);
  border: 2px solid var(--wb-bg-modules);
  cursor: initial;
}

.calc input[readonly]:focus {outline: 0;}
.calc .buk-col hr {border: 2px solid #D9E3FC;}

@media only screen and (max-width: 767px) {
  .calc [class*="buk-col"] {
    padding-top: .2rem;
    padding-bottom: .2rem;
  }
}

.calc .calc__fields--py-xs { padding-top: .1rem; padding-bottom: .1rem;}
.calc__title-details {border-radius: 16px 16px 0 0;}

/*radio button*/
input[type=radio] { cursor: pointer; height: 17px; margin-left: 1rem; vertical-align: middle; width: auto; width: 17px;}

.calc-box__label {color: var(--color-blue-buk); font-family: var(--font-family-body); font-size: 1.125rem; font-weight: 600;}
.box-label__tooltip{width: 85%;} /* para fijar tamaño texto */
.box-label__tooltip.tooltip{width: 10%;} /*para fijar tamaño tooltip*/

/*para detalle tipo liquidacion*/
.cal-detail__title {background: var(--wb-bg-modules);}
.cal-detail__title p {font-size: 1.125rem;}
.cal-detail__item {border-bottom: 2px solid var(--color-light-blue);}
.cal-detail__item p{font-size: 1rem;}
.cal-boxblue__total {font-size: 2rem; }

@media only screen and (min-width: 767px) {
  .calc-detail--separator {
    padding-right: 16px;
    border-right: 2px solid var(--color-light-blue);
  }
}

.border-error {
  border-color: var(--color-error) !important;
}



/* content text */
.tooltip { cursor: pointer; display: inline-block; margin-left: 8px; position: relative;}

/* Tooltip text */
.tooltip .tooltiptext {
    font-family: var(--font-family-body);font-size: 14px; visibility: hidden; background-color: var(--wb-bg-modules); color: var(--wb-font-color-1);
    text-align: left; padding: 16px 12px; border-radius: 16px; opacity: 0; transition: opacity 0.5s; bottom: 150%; transform: translateX(-62%);
    min-width: 230px; max-width: 230px;
    /* Position the tooltip text - see examples below! */
    position: absolute;  z-index: 1000; box-shadow: 0 0 10px 4px rgba(43,60,106,.12);}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip-trigger:hover + .tooltiptext { visibility: visible;}
.tooltip .tooltiptext::after { content: " ";  position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%;}
.tooltip:hover .tooltiptext { opacity: 1;}}

@media only screen and (max-width: 767px) {
.tooltip .tooltiptext {  min-width: 250px; max-width: 250px;}
}

[class*="buk-col"] {
  position: relative;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.calc-fields input[type="radio"] {
  vertical-align: middle;
  width: 17px !important;
  height: 17px;
}


.buk-grid label {
  font-size: 1.125rem;
}

.calc-national-values input,
.calc-fields input {
  width: 100%;
}

.calc-national-values input[readonly]:focus,
.calc-fields input[readonly]:focus {
  outline: 0;
}

.calc-fields .control-radio input {
  width: initial;
}

.calc-national-values input[readonly] {
  background: var(--wb-bg-modules);
  border: 1px solid #d9e3fc;
  color: var(--color-blue-buk);
  font-family: var(--font-family-title);
  font-size: 1.75rem;
  font-weight: 700;
}

.calc-fields input {
  color: inherit;
  font-family: var(--font-family-body);
  font-size: 1.125rem;
}

.calc-fields input:not([readonly]) {
  background: var(--wb-bg-modules);
  border: 2px solid #fff;
  border-radius: 21px;
  cursor: pointer;
  padding: 0.625rem 1rem;
}

.calc-fields input:not([readonly]):focus,
.calc-fields input:not([readonly]):hover {
  border-color: var(--color-blue-buk);
  outline: 0;
}

.calc-fields input[readonly] {
  background: #f3f3f3;
  border: 2px solid #fff;
  border-radius: 21px;
  padding: 0.625rem 1rem;
}

@media only screen and (min-width: 767px) {
  .sticky-box {
    position: sticky;
    top: 84px;
  }
  .pi-end {
    place-items: end;
  }
}
@media only screen and (min-width: 1115px) {
  .sticky-box { top: 120px; }
}



.lbl-total-discount {color: var(--color-blue-buk)!important;
    font-family: var(--font-family-title);
	font-size: 2rem!important}

/*.calc-fields .lbl-total-discount {
  background: var(--wb-bg-modules);
  border: 1px solid #d9e3fc;
  color: var(--color-blue-buk);
  font-family: var(--font-family-title);
  font-size: 1.75rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
}*/


.lbl-total-salary {color: var(--color-white)!important;
    font-family: var(--font-family-title);
   font-size: 2rem!important;
} 

/*.lbl-total-salary {
  border: 1px solid var(--color-blue-buk);
  color: var(--color-blue-buk);
  font-family: var(--font-family-title);
  font-size: 1.75rem;
  font-weight: 600;
  padding: 0.625rem 1rem;
}*/

.calc-fields--results [class*="buk-col"] {
  padding-top: 0;
  padding-bottom: 0;
}

.buk-col hr {
  border-width: 0px;
  border-radius: 14px;
  height: 2px;
  background: var(--color-light-blue);
}

.rounded-bottom-16 { border-radius: 0 0 16px 16px; }


.tooltip {
  display: inline-block;
  cursor: pointer;
}

.tooltip svg { vertical-align: text-bottom; }

.tooltip .tooltip-text {
    box-shadow: 0 0 10px 4px rgba(43,60,106, .12);
    font-family: var(--font-family-body);
    font-weight: 400;
    font-size: 14px;
    visibility: hidden;
    background-color: var(--color-light-blue);
    color: var(--wb-font-color-1);
    text-align: center;
    padding: 16px;
    border-radius: 9px;
    opacity: 0;
    transition: opacity 0.5s;
    width: auto;
    bottom: 35px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    max-width: 220px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 10;
}

.tooltip .tooltip-text::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-light-blue) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

@media only screen and (min-width: 767px) {
  .tooltip { position: relative; }
  .tooltip .tooltip-text {  bottom: 37px; }
}

/*acordeon*/
.calc__fields--dropdown {
  border-radius: 0 0 16px 16px;
  height: 0;
  overflow: hidden;
  transition: height .5s;
}

.calc--btn-dropdown button {
  background: var(--wb-bg-modules);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: var(--color-blue-buk);
  font-family: var(--font-family-title);
  font-size: 1.125rem;
  font-weight: 700;
  outline: 0;
  padding: .75rem 1.5rem;
  position: relative;
  text-align: left;
  width: 100%;
}

.calc--btn-dropdown button.active {
  border-radius: 16px 16px 0 0;
}

.calc--btn-dropdown button::after {
  background: url(https://3790458.fs1.hubspotusercontent-na1.net/hubfs/3790458/2023/Calculadoras/flecha.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  content: "";
  height: 25px;
  position: absolute;
  right: 2.5%;
  transform: rotate(180deg);
  transition: transform .5s;
  width: 25px;
}

.calc--btn-dropdown button.active::after {
  transform: rotate(0deg);
}

.calc--btn-dropdown .active~.calc__fields--dropdown {
  min-height: 835px;
}

@media only screen and (min-width: 767px) {
  .calc--btn-dropdown .active~.calc__fields--dropdown {
    min-height: 533px;
  }
}

@media only screen and (min-width: 1020px) {
  .calc--btn-dropdown .active~.calc__fields--dropdown {
    min-height: 600px;
  }

  .calc--btn-dropdown button {
    font-size: 1.5rem;
  }

  .calc--btn-dropdown button::after {
    height: 32px;
  }
}