*{
    outline:none;
    max-width:100%;
    box-sizing:border-box;
    font-family:'calibri', Helvetica, sans-serif;   
}
body{
    margin:0;
}

header{
    display:flex;
    align-items:center;
    border-top:50px solid #007979;
    margin-bottom:50px;
}

header .left{
    width:100%;
    text-align:center;
    background: #007979;
    padding:10px;
    margin-top:-20px;
    border-radius:20px 20px 0 0;
    border-bottom:1px solid #e7e7e7;
}

header .left img{
    width:200px;
}

header .right .tab{
    border-left:1px solid #c9d7ee;
    padding:10px 15px; 
}

header .right .q{
    width:38px;
}

header .right .u{
    width:44px;
}

.liner{
    color:#000000;
    text-align:center;
    padding:20px;
}

.liner .container{
    display:inline-block;
    width:450px;
    text-align:left;
    font-size:1.1em;
    font-weight:bold;
}

main{
    text-align:center;
}

main .container{
    display:inline-block;
    width:470px; 
    text-align:left;
    padding:10px;
}

main .left{
    width:100%; 
}
main .title{
    font-size:1.3em;
    font-weight:bold;
    color:#272727;
    margin-bottom:60px ;
}

input{
    width:100%;
    display:block;
    padding:13px;
    font-size:0.9em;
    border:1px solid #cacaca;
    border-radius:3px;
    color:#303030;
}

.col{
    margin:30px 0;
}

.col span{
    font-size:0.8em;
    color:#030303;
    display:block;
    margin:3px 0;
}

.col a{
    display:block;
    margin:10px 0;
    color:#003cb4;
    font-size:0.9em;  
}

button{
    width:100%;
    border:none;
    padding:14px;
    border-radius:4px;
    background:#212121;
    color:white;
    font-weight:bold;
    font-size:1em;
}

.text{
    font-size:0.9rem;
    color:#4e4e4e;
}

.code{
    padding:20px 0;
    text-align:center;
    font-size:1.5rem;
    letter-spacing:6px;
}

.reader span{
    display:block;
    padding:10px 0;
    color:gray;
}
    main .right img{width:400px;}

    input.error{
        border:1Px solid red;
        box-shadow:0 0 0 0.5px red;
    }

    .loader{
        display:none;
        position:fixed;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:rgb(26 26 26 / 63%);
    }
    
    .loader .content{
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    
    .loader img{
        width:50px;
    }

label{
    display:block;
    margin:6px 0;
    font-weight:bold;
}

div.error{
    color:#c50202;
    padding:15px;
    background:#ffe8e8;
    width:100%;
    border-radius:6px;
    margin:20px 0;
    font-size:0.9rem
}

.multi{
    display:flex;
    gap:10px;
    margin:20px 0;
}

.multi .col{
    margin:0;
    width:100%;
}
    
@media screen and (max-width:700px){
    main .container{display:block;}
    main .container div{width:100%;}
    main .right img{width:340px;}
}


footer{
    margin:80px 0;
    padding:20px;
    text-align:center;
    font-size:0.7rem;
}