body {
    background: #fbfbfb;
    
} 

body,input,button,label{
    font-family: vazir;
}

input {
    border: 0.5px solid #6d6bf685;
    border-radius: 3px;
    width: 100%;
    text-align: center;
    padding: 5px;
}

input:focus-visible {
    outline-color: #6d6bf6;
    outline-width: medium;
}

input#remember_me {
    width: auto;
}

span.ml-2.text-sm.text-gray-600 {
    font-size: 14px;
}

ul.text-sm.text-red-600.space-y-1.mt-error {
    padding: 0px;
}

.items-error li {
    font-size: 15px;
    list-style-type: none;
    color: #c31a1a;
}



.l2 {
    text-align: center;
    background: white;
    /* margin: auto; */
    padding: 25px;
    border-radius: 5px;
    /* margin-top: 20%; */
}

.mt-1 label, .mt-4 label {
    display: block;
    text-align: right;
    margin: auto;
    padding: 5px;
    font-size: 14px;
    font-weight: 500;
}

.block.mt-4 {
    margin-top: 15px;
}

.captcha p {
    margin: 0;
    margin-top: 10px;
}

.input-captcha {
    padding: 10px;
}

.login-button button {
    cursor: pointer;
    background: #5f77f1;
    border: none;
    padding: 5px;
    font-weight: 600;
    color: white;
    width: 74px;
    border-radius: 4px;
}

.login-button button:hover {
    background: #485cbf;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 35%;
  
}

@media screen and (max-width: 976px){
    
    .grid-container {
     
     grid-gap: 25%;
     }
    
}

@media screen and (max-width: 476px){
    
    .grid-container {
     
     grid-gap: 10%;
     }
    
}