html {height: 100%;}
body { min-height: 100%;       position: relative;       font-family: Open Sans;       margin: auto;   background: #ecedf1;
    display: flex;
    align-items: center; background-position: center top; background-size: cover;}

div,span.body,input,li,ul {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.clear{width:100%; clear: both;}
h1, h2, h3, h4, h5, p {margin: 0; padding: 0;}



.content{    margin: 0 auto;    padding: 0 10px 60px 10px; }



h1, h2, h3 {font-weight: normal; margin: 0 0 0 0; }




#content { position: relative;  margin: 0 auto;  width: 600px; background-color: white;  overflow: hidden; color: black;  font-size: 10pt;  border-radius:  5px ;  box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.15);
}
.alert{color:white; padding: 10px 20px;
    border-radius: 5px;
    margin: 10px 0 0 0;}
.alert.red{background:#C91E4C;}
.alert.done{background: #64C553;}
.alert.orange{background: #C96E1E;}


.btn {  padding: 12px 18px;text-decoration: none;     font-size: 10pt;
    border: none;
    color:white; border-radius: 5px;background: #64C553; cursor: pointer; display:inline-block ; float:none ; margin: 10px 0 20px 0;
    transition: all 200ms ease-in-out;
}

.firsttimeinfo{padding: 19px 0 20px 0;}


.h-fix{overflow: hidden;}


.pruvodce h1{font-size: 14pt; font-weight: bold; margin: 0; padding: 10px 0;}
.pruvodce p{font-size: 10pt; margin: 0; padding: 0; opacity: .6;}
.pruvodce a{color:black;}
.pruvodce .underline{text-decoration: underline; cursor: pointer;}


#inp_mail, #inp_password, #inp_code{padding: 11px 20px; border: none; font-size: 10pt; display: block; border-radius: 5px; width: 100%; margin: 0 auto 10px auto;
border-style:solid; border-width: 1px; border-color: #9aa1b5;    background: #f9f9fa;}

#inp_mail, #inp_password{padding-left: 65px;}
#inp_mail_label, #inp_password_label{    position: relative;
    margin: -39px 0 21px 0;
    z-index: 99;
    display: block; opacity: .6;
    width: 45px;
    padding: 0 0 0 15px;}

#inp_mail:focus, #inp_password:focus, #inp_code:focus{ outline:none; border: 1px solid #64C553; }
input:-webkit-autofill {box-shadow: 0 0 0 30px #f9f9fa inset !important;}
#inp_code{ -moz-appearance: textfield; text-align: center; display: inline-block; width: 201px;
    margin: 0 10px 0px 0; letter-spacing: 2px;;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#form1, #form2, #form3{transition: all 350ms ease-in-out;}
#form1.hide{transform: translate(-30px,0);  opacity: 0;}
#form2.hide{transform: translate(30px,0); opacity: 0;}
#form3.hide{transform: translate(30px,0); opacity: 0;}

#form2 p{padding: 3px 0 10px 0;}
#form3 p{padding: 3px 0 22px 0; text-align: center;}

#inp_continue, #inp_login{display: block; margin: 0 auto; padding: 12px 22px; font-weight: bold;}

#inp_clear, #inp_back, #inp_2fa{     display: block;
    font-size: 9pt;
    text-align: center;
    margin: 10px auto;
    opacity: .6;
    width: 140px;
}

#inp_continue{display: inline-block;    width: 120px;}

.repeataccess{margin-top: 20px;}
.repeataccess .circ{width: 80px; height: 80px; background-size:cover; background-position: center; border-radius:50%; float: left;  box-shadow: -5px 5px 20px 0px rgba(0, 0, 0, 0.1);}
.repeataccess .circ1{margin-left: 95px;}
.repeataccess .circ2{margin-left: -15px;}
.repeataccess .name{text-align: center; font-weight: bold; padding: 10px; font-size: 12pt;}

.btn.red {background: #C91E4C;}
.btn.blue {background: #00ABFF;}
.btn.green {background: #64C553;}
.btn.orange {background: #C96E1E;}
.btn.grey {background: #F4F4F4; color:black;}
.btn.bottombtn {background: #b6bac5; color:white;}
.btn.greyOpac {background: #ffffff33;    color: white;}
.btn.white {background: white; font-weight: bold; color:black;}
.btn:hover{ box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.15); }
.btn.noshadow{opacity: 0.7;}
.btn.noshadow:hover{ box-shadow: none; cursor: default; }
.btn.hidden{opacity: 0;}



.bckline{ height: 100%; z-index: 9999;
    position: absolute; border-radius: 5px 0 0 5px; overflow: hidden;}
.pruvodce{
    padding: 15px 15px 15px 250px;
    min-height: 350px;
  width: 100%;
   }
.bckline img{width: 230px; display: block;}


.loginalert{
    position: relative;
    margin: 0 auto;
    width: 600px;
    background-color: white;
    overflow: hidden;
    color: white;
    background: #00ABFF;
    font-size: 10pt;
    border-radius: 5px;
    margin: 0 0 20px 0;
    padding: 15px;
    box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 15%);
    min-height: max-content;

}



.icon {width: 120px; height: 120px; background-position: center; background-size:cover;border-radius: 50%; margin: -100px auto 0 auto; position: relative;    box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.2);
}


.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11 {min-height:1px; float: left;  position: relative;}
.col-1:after,.col-2:after,.col-3:after,.col-4:after,.col-5:after,.col-6:after,.col-7:after,.col-8:after,.col-9:after,.col-10:after,.col-11:after{ content: " "; clear: both; display: block; }

.col-1 { width: 8.333333333333332%; }
.col-2 { width: 16.666666666666664%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333333333%; }
.col-5 { width: 41.66666666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333333333336%; }
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333334%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }