@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

.spc5{height:5px;width: 90%;}
  
  
@keyframes slideDown 
{
    
from {
transform: translateY(-100%);
opacity: 0;
}


to {
transform: translateY(0);
opacity: 1;

}}



.slide-down
{
    background-color: #007BFF;
    text-align: center;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    animation: slideDown 1s ease forwards;
}
 
 

@media (max-width:910px) and (min-width:200px) {


 .btnlogin
{
    width: 90%;
    
    height: 44px;
    margin: 8px auto 8px auto;
    padding: 8px 10px 21px 10px;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-family: 'Righteous' , cursive;
    display: flex;
    flex-flow: wrap;
    text-align: center;
    align-items: center;
    place-items: center;
    vertical-align: middle;
    justify-content: center;
    border-radius: 8px;
    border: 2px solid var(--clr2);
    background: var(--clr1);
    box-shadow: 0 1px 0 0 var(--clr1);
 
}   


.btnlogin:hover {
    background:linear-gradient(to bottom,#019ad2 5%,#33bdef 100%);
    background-color:#019ad2
}
.btnlogin:active {
    position:relative;
    top:1px
}


    .login-container
    {
        width: 94%;
        height: 100%;
        min-height :500px;
        margin: 4% auto auto auto;
        padding: 0px 0px 25px 0px;
        font-size: calc(0.9em + 0.9vw);
        background-color: #FFFFFF;
        -webkit-border-radius: 10px;
        border-radius: 8px;
        border: 2px solid var(--clr1);
        box-shadow: 0 0 0.9em var(--clr1);
        box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc, 0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999, 0px 7px 2px rgba(0, 0, 0, .5), 0px 7px 2px rgba(0, 0, 0, 0.1), 0px 7px 2px rgba(0, 0, 0, .73), 0px 3px 5px rgba(0, 0, 0, .3), 0px 5px 10px rgba(0, 0, 0, .37), 0px 10px 10px rgba(0, 0, 0, .1), 0px 20px 20px rgba(0, 0, 0, 0.1);
    }


    .img
    {
        padding: 0px;
        width: 100%;
        height: 350px;
        margin: 0px auto auto auto;
        border-radius: 6px 6px 0px 0px;
        position: relative;
        top: 0px;
    }

  }



@media only screen and (max-width:1600px) and (min-width:900px){ 

 .btnlogin
    {
        width: 90%;
        height: 44px;
        margin: 8px auto 8px auto;
        padding: 8px 10px 21px 10px;
        cursor: pointer;
        color: #FFFFFF;
        font-size: 19px;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        font-size: 20px;
        font-family: 'Righteous' , cursive;
        display: flex;
        flex-flow: wrap;
        text-align: center;
        align-items: center;
        place-items: center;
        vertical-align: middle;
        justify-content: center;
        border-radius: 8px;
        border: 2px solid var(--clr2);
        background: var(--clr1);
        box-shadow: 0 1px 0 0 var(--clr1);
      
    }   


.btnlogin:hover {
    background:linear-gradient(to bottom,#019ad2 5%,#33bdef 100%);
    background-color: var(--clr2);
}
.btnlogin:active {
    position:relative;
    top:1px
}

  .img
    {
        width: 100%;
        height: 50%;
        margin: auto;
        top: 0px;
        padding: 0px;
        border-radius: 6px 6px 0px 0px;
        flex-flow: nowrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        place-items: center;
        vertical-align: middle;
        border-bottom: 1px solid #081197;
        position: relative;
    top: -15px;
    }

  .login-container
    {
        width: 40%;
        max-width: 400px;
        height: 80vh;
        margin: 2% auto 4% auto;
        padding: 15px 0px 0px 0px;
        font-size: calc(0.9em + 0.9vw);
        background-color: #FFFFFF;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border: 2px solid var(--clr1);
        box-shadow: 0 0 0.9em var(--clr1);
        box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc, 0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999, 0px 7px 2px rgba(0, 0, 0, .5), 0px 7px 2px rgba(0, 0, 0, 0.1), 0px 7px 2px rgba(0, 0, 0, .73), 0px 3px 5px rgba(0, 0, 0, .3), 0px 5px 10px rgba(0, 0, 0, .37), 0px 10px 10px rgba(0, 0, 0, .1), 0px 20px 20px rgba(0, 0, 0, 0.1);
    }




  
  }


.facss {
    width: 40px;
    height: 100%;
    margin: 0px;
    top: 0px;
    padding: 10px;
    border-radius:1px;
   color: #ffffff;

}

 



.form-group
{
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    display: flex;
    align-items: center;
    border: 2px solid var(--clr1);
    border-radius: 4px;
    background-color: var(--clr1);
}

.form-group i {
    margin-right: 0px;
}

.txtlogin {
    
  flex: 1;
  width: 90%;
    height: 50px;
    padding: 0px;
    color: var(--clr1);


    border: none;
    border-radius: 0px 5px 5px 0px;
     font-size: 20px;

     font-weight: 800;
   
    text-align: center;
    direction: rtl;
    font-family: 'Righteous', cursive;
}

.txtlogin:focus {

border: none !important;
outline: none;
}