@import url("https://media.bankaool.com/cdn/cd/b2fa459540d915c7777003f045d1d6b9/9f89c84a559f573636a47ff8daed0d33/bootstrap.min.css");

@charset "utf-8";

@font-face {
    font-family: PoppinsR;
    src: url('../fonts/Poppins-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: PoppinsM;
    src: url('../fonts/Poppins-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: PoppinsB;
    src: url('../fonts/Poppins-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: PoppinsX;
    src: url('../fonts/Poppins-Black.ttf');
    font-weight: 900;
    font-style: normal;
}

body {
    color: var(--bankaool-primary-black, #141415);
    font-family: PoppinsR;
}

main {
  padding: 15px;
}
#mainLogin {
  background: url("../img/login/login_be.jpg") no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  height: calc(100vh - 122px);
}
#logoBanco img {
  width: 65%;
}
p.codigoT {
  padding-right: 0;
  margin-right: 0;
  line-height: 1;
  text-align: right;
}
/* * * *  MODAL * * * */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1050;
  /* Sit on top */
  padding-top: 20px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  width: 1025px;
}
.modal-content img {
  max-width: 100% !important;
  height: auto !important;
  padding: 5px;
}
.close {
    color: var(--bankaool-primary-black);
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/* * * * OTROS * * * */
#formNewPass li {
  padding-top: 0.25rem;
  font-size: 0.8rem;
}
@media (max-width: 575.98px) {
  #logosSeguridad {
    align-content: center !important;
    text-align: center;
  }
  #logosSeguridad img {
    margin-bottom: 0.75rem;
  }
  p.codigoT {
    text-align: left;
  }
}
@media (max-width: 767.98px) {
  #mainLogin h1 {
    font-size: 1.25rem;
  }
}

.spn-permisogeo {
    max-width: 370px;
    color: var(--bankaool-primary-500, #707070);
    font-family: PoppinsR;
    font-size: 10px !important;
    line-height: 150%;
}

.div-btn-tutos {
    margin-top: 7em;
    color: var(--bankaool-primary-black, #141415);
    font-family: PoppinsR;
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 16px !important;
}

.btn-entrar {
    border: none;
    padding: 16px 32px;
    border-radius: 60px;
    background: var(--bankaool-primary-black, #141415);
    color: var(--bankaool-primary-white, #FFF);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: PoppinsB;
    font-size: 17px !important;
    line-height: normal;
    margin-top: 22px;
    text-transform: none;
    cursor: pointer;
}

input.identificador {
    border: none;
    border-bottom: 1px solid #ccc;
    color: var(--bankaool-primary-400, #ADADAD);
    leading-trim: both;
    text-edge: cap;
    font-family: PoppinsR;
    font-size: 18px !important;
    line-height: normal;
    border-radius: 0;
    padding: 26px 0px;
}

h3.identificador {
    color: var(--bankaool-primary-black, #141415);
    font-family: PoppinsM;
    line-height: 130%;
}

div.ico-mostrar {
    border-bottom: 1px solid #ccc;
}

input.identificador:focus {
    box-shadow: none;
    border-color: var(--bankaool-secondary-base, #85FC9F);
    border-radius: 0;
}

input.identificador:focus + div.ico-mostrar {
    border-bottom: 1px solid #ccc;
    border-color: var(--bankaool-secondary-base, #85FC9F);
}

div.ico-mostrar > button:focus {
    box-shadow: none;
}

div.ico-mostrar > button {
    background-color: transparent;
    color: black;
}

label.identificador {
    color: var(--bankaool-primary-black, #141415);
    font-family: PoppinsM;
    font-size: 16px !important;
    line-height: 130%;
}

.div-btn-tutos > a {
    border-bottom: 1px solid black;
    color: var(--bankaool-primary-black, #141415);
    font-family: PoppinsR;
    font-size: 14px !important;
    line-height: 150%;
}
.div-btn-tutos > a:hover {
    text-decoration: none;
}

.hLineaOjo {
    display:none;
    border-top: 2px solid #212121;
    transform: rotate(45deg);
    margin-bottom: -12px;
    margin-top: 10px;
}

div.div-mensaje > div {
    color: #000000;
    background-color: #ededed;
}

div.div-mensaje {
    padding: 15px;
    padding-top: 0;
}

h2, .h2, h3, .h3, h5, .h5, h6, .h6 {
    font-family: "PoppinsR"
}




#aModalSwitch, #aModalSelectVersion {
    z-index: 1050;
    padding-top: 0;
}

    #aModalSwitch > div,
    #aModalSelectVersion > div {
        max-width: 416px;
    }


    #aModalSwitch .modal-content {
        border-radius: 16px;
        padding: 32px;
        gap: 32px;
    }

    #aModalSelectVersion .modal-content {
        border-radius: 16px;
        padding: 32px;
        gap: 32px;
        width: 416px;
    }

        #aModalSwitch .modal-content .titulo,
        #aModalSelectVersion .modal-content .titulo {
         
            padding: 0;
        }


        #aModalSwitch .modal-content .titulo,
        #aModalSelectVersion .modal-content .titulo 
        {
            color: var(--bankaool-primary-black, #141415);
            text-align: center;
            /* Bankaool/Desktop/body bold */
            font-family: PoppinsB;
            font-size: 18px;
            line-height: 23.4px; /* 155.556% */
        }


    #aModalSwitch .modal-header,
    #aModalSelectVersion .modal-header {
        padding: 0;
        align-items:self-end;
        border-bottom:none;
    }

    #aModalSwitch .modal-body {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0;
    }

    #aModalSelectVersion .modal-body {
        display: flex !important;
        flex-direction: column;
        align-items: center;        
        padding: 0;
        gap: 8px;
    }

    #aModalSwitch .modal-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 0;
        border-top: none;
    }

    #aModalSelectVersion .modal-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 0;
        border-top: none;
        margin-top: 0px;
    }


        #aModalSwitch .modal-footer .btn-entrar,
        
        #aModalSelectVersion .modal-footer .btn-entrar {
            margin-top: 0;
            display: flex;
            padding: 19px 40px;
            justify-content: center;
            align-items: center;
            gap: 8px;
            width: 100%;
            height: 56px;
            margin-right: 0px;
            font-family:PoppinsB
        }


        #aModalSwitch .modal-footer .btn-cerrar {
            border: solid 2px var(--bankaool-primary-black);
            border-radius: 100px;
            padding: 19px 40px;
            width: 100%;
            height: 56px;
            font-weight: 700;
            margin-left: 0px;
            background-color: transparent;
            font-family: PoppinsB
        }

        #aModalSelectVersion .modal-footer .btn-cerrar {
            border: solid 3px var(--bankaool-primary-black);
            border-radius: 100px;
            padding: 19px 40px;
            width: 100%;
            height: 56px;
            font-weight: 700;
            margin-left: 0px;
            background-color: transparent;
            font-family: PoppinsB;
            line-height: 18px
        }

    #aModalSwitch .modal-body .titulo
    #aModalSelectVersion .modal-body .titulo {
        color: var(--bankaool-primary-black, #141415);
        text-align: center;
        /* Bankaool/Desktop/body bold */
        font-family: PoppinsB;
        font-size: 18px;
        line-height: 28px; /* 155.556% */
    }

    #aModalSwitch .modal-content .mensaje,
    #aModalSelectVersion .modal-body .mensaje {
        color: var(--bankaool-primary-black, #141415);
        text-align: center;
        font-family: PoppinsR;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
    }

.banner-container {
    padding-bottom: 1rem;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: .5rem;
}

.banner-body {
    margin: -9px;
    display: flex;
    margin-bottom: -4px;
}

.banner-body-text-container {
    width:160px;
}

.banner-title {
    font-weight: 700;
    font-size: 14px;
    color: #FFF;
    font-family: PoppinsR;
    line-height: 100%;
}

.banner-text {
    font-size: 12px;
    color: #FFF;
    font-family: PoppinsR;
    font-weight: 400;
    padding: 0;
    margin: 0;
}

.banner {
    background-color: #006DFE;
    border-radius: .4rem;
    border: 0.847px solid #141415;
    box-shadow: 0px 4.517px 0px 0px #141415 !important;
}

.banner-button {
    background-color: #FFF;
    color: #141415;
    font-size: 12px;
    font-weight: 700;
    font-family: PoppinsB;
    line-height: 10px;
    padding: 6px 16px;
    border-radius: 56.5px;
    align-items: center;
    justify-content: center;
}

.banner-button:hover {
    text-decoration: none;
}

.banner-button-container {
    width: 170px;
    margin-top: 1rem;
}

.banner-alpha-img {
    width: 90px;
    margin-left: -17px;
    margin-top: 5px;
    display: block;
}

@media(max-width:1200px) {
    .banner-alpha-img {
        display: none;
    }
}

@media(max-width:990px) {
    .banner-alpha-img {
        margin-left: 12%;
    }

    .banner-body {
        justify-content: space-between;
    }

    .banner-body-text-container {
        width: 100%;
    }

    .banner-alpha-img {
        display: block;
        margin-top: -15px;
    }
}

@media(max-width:425px) {
    .banner-alpha-img {
        margin-top: 5px;
    }
}