*{
    box-sizing:border-box;
}
a{
    text-decoration: none;;
}
body{
    font-family: "Dosis", sans-serif;
    margin:0px;
    padding:0px;
    font-size:18px;
    color:gray;
    background:#b9d2f7;
    height: 100%;
}
html{
    height: 100%;
}
input, select {
    border: 1px solid #3e4094;
    border-radius: 10px;;
    color:#3e4094;
    font-family: "Dosis", sans-serif;
    font-size:20px;
    margin:10px 0; 
    padding:10px;
    width:100%;
}
.advancePicture{
    display:flex;
    justify-content: center;
    flex-wrap:wrap;
    overflow-y: auto;
}
.advancePicture button{
    width:48%;
    margin:1%;
}

.advancePicture #video,  .advancePicture #canvas {
    width: 320px;   
    height: 640px;  
    border: 2px solid black;
    object-fit: cover; 
    background-color: #000; 
}
.advancePicture #imageStatus{
    width:100%;
}

.align-items-center{
    align-items: center;
}
.button{
    cursor:pointer;
    padding:15px;
    border-radius:10px;
    border:none;
}
.color-yellow{
    padding:5px 10px;
    color:white;
    background-color: chocolate;
    border-radius:10px;
}
.flex{
    display: flex;
}
.header{
    display:flex;
}
.header__logo{
    padding:10px;
}
.header__logo img{
    width:100%;
    max-width: 200px;
}
.login{
    align-items: center;
    justify-content: center;
    display:flex;
    width:100%;
    height: 100%;
}
.login__in{
    background:white;
    border-radius:10px;
    max-width:650px;
    padding:20px;
    width:90%;
}
.login__in img{
    display: block;
    max-width:320px;
    margin:  10px auto;
    width:100%;
}
.login__in p{
    margin-top:30px;
    text-align: center;
    font-weight: 700;
}
.system__first{
    background: #3e4094;
    color:white;
    cursor:pointer;
}
.system__first:hover{
    background: #b9d2f7;
    color: #3e4094;
    cursor:pointer;
}
.s-100{
    margin: 1%;
    max-width:100%;
    width:100%;
}
.s-50{
    margin: 1%;
    max-width:48%;
    width:100%;
}
.s-33{
    margin: 1%;
    max-width:31%;
    width:100%;
}
.s-25{
    margin: 1%;
    max-width:23%;
    width:100%;
}