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://www.buk.cl/hubfs/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://www.buk.cl/hubfs/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;}
}