
.calculator *                               { font-family: 'BiNeoIndustrial-Regular' !important; outline: none; }
.calculator__nota                           { font-size: 13px; margin: 10px 0px; color: #4a4949; font-family: 'BiNeoIndustrial-Regular' !important }
.calculator__subtitle, .form-title          { margin-top: 24px; margin-bottom: 10px;  font-family: BiNeoIndustrial-Bold,sans-serif!important; font-size: 20px; color: #003865; text-align: center;  }


.noUi-target,.noUi-target *                 { box-sizing: border-box; }
.noUi-horizontal                            { height: 10px; }
.noUi-base, .noUi-connects                  { width: 100%; height: 100%; position: relative; }
.noUi-connects                              { background-image: radial-gradient(#DDDDDD 2px, transparent 0%); background-size: 12px 12px; background-position-y: -2px; border-radius: 5px; overflow: hidden; }
.noUi-connect                               { width: 100%; height: 100%; background: #FFB81C; position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.noUi-horizontal .noUi-origin               { width: 10%; height: 100%; position: absolute; top: 0px; left: auto; right: 0px; will-change: transform; }
.noUi-horizontal .noUi-handle               { width: 20px; height: 20px; margin-top: -10px; background: #FFB81C; border-radius: 100%; position: absolute; top: 50%; right: -10px; left: auto; cursor: pointer; }
.noUi-tooltip                               { width: 100px; margin-top: -44px; margin-left: -40px; padding: 8px; background: #003865; border-radius: 10px; font-weight: bold; color: #FFF !important; text-align: center; position: relative; }
.noUi-tooltip:before                        { width: 0px; height: 0px; margin-left: -8px; border-style: solid; border-width: 8px 8px 0 8px; border-color: #003865 transparent transparent transparent; content: " "; position: absolute; top: 100%; left: 50%; }

.form__label                                { padding-left: 0px !important; font-family: BiNeoIndustrial-Bold,sans-serif!important; font-weight: bold; font-size: 18px; color: #003865 !important; }
.form__question                             { margin-bottom: 20px; }
.form__question--slider                     { padding-bottom: 12px; }
.form__tarjtas .field                       { padding-top: 10px; padding-bottom: 10px; position: relative; }

.col-6                                      { width: 50% !important; margin-right: -3px !important; display: inline-block !important; vertical-align: middle !important; }
.landing-form label                         { padding-left: 0px !important; }

.controls                                   { padding-left: 48px; padding-right: 48px; position: relative; }
.controls__btn                              { width: 24px; height: 24px; margin-top: -12px; background: #2C8B9E; border-radius: 100%; font-weight: bold; font-style: normal; font-size: 16px; color: #FFF !important; line-height: 25px; text-shadow: 0px 0px 3px #666; text-align: center; display: block; position: absolute; top: 50%; cursor: pointer; z-index: 10; }
.controls__btn--right                       { right: 0px; }
.controls__btn--left                        { left: 0px; }
.controls.amount                            { margin-top: 58px; }
.controls.months                            { padding-left: 30px; padding-right: 30px; }

.months                                     { height: 30px; }
.months__container                          { position: relative; }
.months__month                              { width: 12.5%; float: left; display: block; position: relative; }
.months__active                             { width: 12.5%; height: 100%; position: absolute; top: 0px; left: 0px; transition: left 0.5s; }
.months__active:before                      { background: #FFB81C; content: " "; display: block; }
.months__active:before, .months__value      { width: 30px; height: 30px; margin-left: auto; border-radius: 100%; margin-right: auto; }
.months__value                              { font-weight: bold; font-style: normal; color: #003865 !important; text-align: center; line-height: 30px; display: block; cursor: pointer; }
.months__value:hover                        { background: #BDCBD4; }
.months__value.active                       { color: #003865 !important; transition: color 1.01s; }
.months__value.active:hover                 { background: transparent; }

.col-6 .field                               { margin-bottom: 0px !important; padding-left: 0px !important; position: relative; }
.field__radio                               { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; }
/*.field__btn                                 { width: 30px; height: 30px; margin-right: 10px; background: #FFF; border-radius: 100%; box-shadow: 0px 0px 3px #888; display: inline-block; vertical-align: middle; position: relative; cursor: pointer; cursor: pointer; }
.field__btn:before                          { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px; background: #3E70B7; border-radius: 100%; content: " "; position: absolute; top: 50%; left: 50%; opacity: 0; transition: opacity 0.4s; }*/
.field__icon                                { display: inline-block; vertical-align: middle; position: relative; cursor: pointer; }
.field__icon img                            { transition: opacity 0.4s; }
.field__icon img.active                     { position: absolute; top: 0px; left: 0px; opacity: 0; }
:checked ~ .field__btn:before               { opacity: 1; }
:checked ~ .field__icon img                 { opacity: 0; }
:checked ~ .field__icon img.active          { opacity: 1; }

.fee .slick-list                            { overflow: hidden; }
.fee__item                                  { padding: 5px; }
.fee__inner                                 { max-width: 130px; margin-left: auto; margin-right: auto; padding: 16px; background: #2C8B9E; border-radius: 16px 0px; }
.fee__number, .fee__payment                 { color: #FFF; text-align: center; display: block; }
.fee__payment                               { font-weight: bold; font-size: 20px; }

.slick-arrow                                { width: 30px; height: 30px; background: #003865; border-radius: 100%; border: none; padding: 0px; text-indent: -99999px; position: absolute; top: 26px; cursor: pointer; }
.slick-arrow.slick-prev                     { left: 0px; }
.slick-arrow.slick-next                     { right: 0px; }
.slick-arrow:before                         { width: 8px; height: 8px; border-left: 4px solid #FFF; border-bottom: 4px solid #FFF; content: " "; transform: rotate(45deg); position: absolute; top: 9px; left: 11px; }
.slick-arrow.slick-next:before              { border: none; border-top: 4px solid #FFF; border-right: 4px solid #FFF; left: 8px; }

.slick-dots                                 { margin: 0px; padding: 0px; list-style: none; text-align: center; }
.slick-dots li                              { padding: 10px; display: inline-block; }
.slick-dots button                          { width: 10px; height: 10px; padding: 0px !important; background: #003865; border-radius: 100%; border: none; text-indent: -99999px; overflow: hidden; cursor: pointer;  display: block; position: static !important; }
.slick-dots .slick-active button            { opacity: initial; background: #FFB81C;}

@media (max-width: 767px) {
    .controls.months                            { padding-left: 32px; padding-right: 32px; }
    .field__icon                                { max-width: 130px; }
    .form__tarjtas                              { display: none; }
    .slick-arrow                                { top: 82px; }
    .slick-dots                                 { padding-left: 32px; padding-right: 32px; }
}

@media (min-width: 768px) {
    .form__questions                            { padding-right: 266px; position: relative; }
    .form__tarjtas                              { width: 180px; position: absolute; top: 0px; right: 15px; }
    .form__tarjtas:before                       { width: 2px; height: 100%; background: #BECCD5; content: " "; position: absolute; left: -35px; top: 0px; }
    .form__tarjtas--mb                          { display: none; }

    .fee                                        { padding-left: 54px; padding-right: 54px; }
}

.field__icon img {
    transition: opacity .4s;
    width: 100px;
    object-fit: contain;
}



