@font-face{
    font-family:reg;
    src:url('reg.woff')
}

@font-face{
    font-family:bold;
    src:url('bold.woff')
}

*{
    font-family:reg, "sans-serif";
}

.backbtn{
    margin-bottom:30px;
}

.backbtn img{
    width:110px;
}

.leftcol{
    width:600px !important;
    padding:30px 20px;
    border-right: 1px solid #ababab;
}


.logo{
    text-align:center;
}

.logo img{
    width:180px;
}



.rightcol{
    background:url('back.jpg') center no-repeat;
    background-size:cover;
    width:100% !important;
    position:relative;
}

.textboxes{
    margin-top:100px;
    padding:30px;
    background: linear-gradient( 180deg, rgb(255 255 255 / 88%) 67%, rgb(255 255 255) 82%)!important;
    opacity:1;
    position:absolute;
    bottom:0;
}

.textboxes a{

    display:block;
    color:black;
    text-decoration:underline;
    padding:3px 0;
    font-size:0.82em;
}
.textboxes i{
    margin-right:6px;
    font-size:0.9em;
}

.box .col{
    width:100%;
}


h3 img{
    margin-right:7px;
    background:#ebf0f5;
    padding:6px;
    width:40px;
    border:1px solid #0468c3;
    border-radius:50%;
}
h3{
    color:#0463c1;
    font-family:bold;
    display:flex;
    align-items:center;
}



.form{
    margin-top:80px !important;
}


.form a{
    color:#0E3368;
    text-decoration:underline;
    font-size:0.8em;
}

label{
    display:flex;
    align-items:center;
    color:#0E3368;
    font-size:0.8em;
    font-weight:bold;
    font-family:bold;
}
span{
    font-size:0.7em !important;
    color:#0E3368;
}
span a{
    font-size:0.99em !important;
}
.textinput{
    width:100%;
    margin:20px 0;
    border:1px solid #d0d0d0;
    padding:15px;
    border-radius:8px;
    font-size:1em;
    color:#0E3368;
    font-family:bold;
}

.textinput:focus{
    border:1px solid #0970E6;
}


.textinput.error{
    border:1px solid #ca1010 !important;
}



.sbmt{
    background:#0970E6 ;
    width:100%;
    color:white;
    padding:16px;
    border-radius:8px;
    border:none;
    font-family:bold;
    font-size:1em;
}



.keyboard{
    margin:50px 0;
}

.kb-sector{
    display:flex;
    align-items:center;
    margin:8px 0;
}
 .kb-button{
    text-align:center;
    width:100%;
    margin:0 4px;
}
.kb-button button{

    color:#1b5ab8;
    font-size:1.4em;
    font-family:bold;
    background:#fdfdfd;
    border:1px solid #dfe4e9;
    padding:7px;
    width:56px;
    height:56px;
    border-radius:5px;
    font-weight:bold;
}

.textinput button{
        display:block;
    color:black;
    text-decoration:underline;
    padding:3px 0;
    font-size:0.82em;
    background:none;
    border:none;
}


.danger{
    background:#ffecec;
    font-size:0.9em;
    padding:20px;
    color:#757171;
}



@media screen and (max-width:650px){
    .colsholder .col{
        width:100% !important;
        display:block;
    }

    .box .row{
        display:block;
    }
    .box .col{
    width:100%;
}

    
}


@media screen and (max-width:1050px){
    .colsholder .col{
        width:100% !important;
        display:block;
    }
    
}


@media screen and (max-width:850px){
    .colsholder{
        display:block;
    }
    .colsholder .col{
        width:100% !important;
        display:block;
    }
    .leftcol{
        border:none;
        border-bottom:1px solid #ababab;
    }
    .rightcol{
        display:none !important;
    }
}