body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}








.error_dialog{

    position: fixed;
    left:0;
    right:0;

    width:auto;
    height:30px;
    padding:16px;
    background-color:transparent;

    display:flex;
    justify-content:center;
    align-items: center;

    animation: scroll-down-effect 7s ;
}


@keyframes scroll-down-effect {
    0%{
        top:0;
        height:0px;
    }
    10%{
        top: 4;
        height:10px;
    }
    20%{
        top: 10;
        height:30px;
    }
}


.error_dialog .error_container .icon svg{
    width:18px;
    padding:0;
}

.error_dialog .error_container .msg span{
    padding:0;
}

.error_dialog .error_container{
    width:auto;
    padding:7px;
    padding-left:20px;
    padding-right:20px;
    background-color:red;
    border-radius:50px;
    color: white;
    font-weight: 500;
    font-size:15px;

    display:flex;
    justify-content:space-evenly;
    gap:10px;
    align-items: center;
}






.page{
    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items: start;
    
}


.page .wrapper{
    padding-top:150px;
}


.page .wrapper .signup_pages{
    width:280px;
    height:50vh;
    background-color: white;
    padding:10px;
}

.page .wrapper .signup_pages .title{
    line-height: 5px;
}

.page .wrapper .signup_pages .title button {
    padding:2px;
    background-color:white;
}

.page .wrapper .signup_pages .title button svg{
    width:20px;
}

.page .wrapper .signup_pages .title p{
    font-size:20px;
}
.page .wrapper .signup_pages .title span{
    font-size:14px;
    font-weight: 400;
}



.page .wrapper .form {
    padding-top:30px;
}

.page .wrapper .form_2{
    padding-top:10px;
}

.page .wrapper .form .form_title {
    font-size:15px;
    font-weight: 400;
}

.page .wrapper .form .input {
    padding-top:5px;
}

.page .wrapper .form .input input{
    padding:15px;
    width:100%;
    outline:none;
    border: 1px solid rgb(150, 150, 150);
    border-radius:2px;
}


.page .wrapper .form button{
  
    background-color:rgb(3, 3, 204);
    padding:10px;
    flex-grow:10;
    color: white;
    border-radius:5px;
}























.backdrop{
    background-color:rgba(0, 0, 0, 0.215);

    position: fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;

    animation: opacity 1s;

    display:none;
}
.showopt{
    background-color:white;
    width:50%;
    height:100vh;
    float:right;

    display:flex;
    justify-content: start;
    align-items: center;
    animation: scroll-left 1s;
}


@keyframes opacity {
   10%{
    opacity: 0.2;
   }
}

@keyframes scroll-left {
    0%{
        width:0;
    }
    10%{
        width:20%;
    }
    30%{
        width:40%;
    }
    40%{
        width:50%;
    }

}

.showopt .opt_container{
    padding-left:100px;
}

.showopt .opt_container .head button{
    padding:2px;
    background-color:white;
    padding-bottom:20px;
}

.showopt .opt_container .head button svg{
    width:20px;
}

.rows{
    padding-top:60px;
    display:flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}

.containers_row{
    width:50px;
    height:50px;
    border:1px solid rgba(0, 0, 0, 0.657);
    border-radius:100000px;
    padding:5px;

    display:flex;
    justify-content:center;
    align-items: center;

    font-weight: bold;
    color: blue;
}



.refresh_button{
    padding-top:30px;
}

.refresh_button a{
    padding:0px 0px; 
}

.refresh_button a svg{
    width:12px;
}