@import url("/assets/css/font/primary-iran-yekan.css");
@import url("/assets/css/font/secondary-pinar.css");

* {
    margin: auto;
    text-align: center;
    direction: rtl;
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
    top: -3px
}
.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right]{
    top: -3px
}
.errorMessage {
    color: #f58008;
    font-size: 18px;
    position: relative;
    top: 5px;
    display: inline-block;
    margin: 5px 0;
}
.hidden {
    display: none;
}
.password-Message {
    font-size: 13px;
    display: inline-block;
    color: #f58008;
}
body {
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
    font-family: "primary-font", "segoe ui", "tahoma" !important;
}
@media only screen and (min-width:560px){
    body {
        background-color: #0093E9;
        background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
        background-size: cover;
        opacity: 1;
        z-index: 0;
    }
nav{
    padding: 2%;
    text-align: right;
    padding-right: 5%;
}
a.nav{
    font-size: 20px;
    color: #000000;
    padding: 1%;
    font-weight: 900;
}
a.nav:hover{
    color: #657a88;
}
span {
    color: rgb(0, 102, 255);
}

label {
    Font-weight: 900;
}

a {
    text-decoration: none;
    font-size: 17.4px;
}

.firsta {
    color: #444444;
    transition: all 300ms linear;
}

.firsta:hover {
    color: #000000;
    border-bottom: 1px solid rgb(55, 135, 255);
}

.seconda {
    color: #0d92c8;
    transition: all 300ms linear;
}

.seconda:hover {
    color: #004a68;
    border-bottom:1px solid rgb(55, 135, 255);
}
div.main{
    margin-top: 5%;
    opacity: 0.78;
}
div.login {
    width: 450px;
    background-color: #ffffff;
    border-radius: 3%;
    font-size: 20px;
    opacity: 1;
    z-index: 1;
    box-shadow: 0vw 0.4vw 1vw 0vw rgba(61, 61, 61, 0.164);
}
.main-sign{
    margin-top: -2%;
    opacity: 0.78;
}
.sign-in{
    margin-top: 0%;
    width: 500px;
    height: 600px;
    background-color: #ffffff;
    border-radius: 3%;
    font-size: 20px;
    opacity: 1;
    z-index: 1;
    box-shadow: 0vw 0.4vw 1vw 0vw rgba(61, 61, 61, 0.164);
    padding: 0 0 0 0;
}
form {
    padding: 12%;
    opacity: 1;
}

input {
    opacity: 1;
    font-size: 18px;
    width: 220px;
    height: 45px;
    margin-bottom: 20px;
    text-align: right;
    border: none;
    border: white;
    border-bottom: 2px solid rgb(158, 197, 255);
    transition: all 300ms linear;
    caret-color: rgb(55, 135, 255);
}

.button {
    opacity: 1;
    text-align: center;
    background-color: rgb(55, 135, 255);
    border: none;
    border-radius: 10px;
    width: 220px;
    height: 50px;
    margin-top: 4%;
    font-size: 19px;
    transition: all 500ms linear;
}

input::placeholder{
    padding: 3px;
    font-size: 14px;
}
input:focus{
    border-bottom: 2px solid rgb(55, 135, 255);
    opacity: 1;
    outline: none;
    box-sizing: border-box;
}

.button:hover {
color: white;
    background-color: rgb(0, 4, 255);
    transform: scale(1.05,1);
    cursor: pointer;
}
}
@media only screen and (max-width:560px) {
    body {
        background-color: #0093E9;
        background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
        background-size: cover;
        opacity: 1;
        z-index: 0;
    }
    nav{
        padding: 2%;
        text-align: right;
        padding-right: 5%;
    }
    a.nav{
        font-size: 20px;
        color: #000000;
        padding: 1%;
        font-weight: 900;
    }
    a.nav:hover{
        color: #657a88;
    }
    span {
        color: rgb(0, 102, 255);
    }
    
    label {
        Font-weight: 900;
    }
    
    a {
        text-decoration: none;
        font-size: 17.4px;
    }
    
    .firsta {
        color: #444444;
        transition: all 300ms linear;
    }
    
    .firsta:hover {
        color: #000000;
        border-bottom: 1px solid rgb(55, 135, 255);
    }
    
    .seconda {
        color: #0d92c8;
        transition: all 300ms linear;
    }
    
    .seconda:hover {
        color: #004a68;
        border-bottom:1px solid rgb(55, 135, 255);
    }
    div.main{
        margin-top: 5%;
        opacity: 0.78;
    }
    div.login {
        width: 90%;
        background-color: #ffffff;
        border-radius: 3%;
        font-size: 20px;
        opacity: 1;
        z-index: 1;
        box-shadow: 0vw 0.4vw 1vw 0vw rgba(61, 61, 61, 0.164);
    }
    .main-sign{
        margin-top: -2%;
        opacity: 0.78;
    }
    .sign-in{
        margin-top: 0%;
        width: 90%;
        background-color: #ffffff;
        border-radius: 3%;
        font-size: 20px;
        opacity: 1;
        z-index: 1;
        box-shadow: 0vw 0.4vw 1vw 0vw rgba(61, 61, 61, 0.164);
        padding: 0 0 0 0;
    }
    form {
        padding: 12%;
        opacity: 1;
    }
    
    input {
        opacity: 1;
        font-size: 18px;
        width: 90%;
        height: 45px;
        margin-bottom: 20px;
        text-align: right;
        border: none;
        border: white;
        border-bottom: 2px solid rgb(158, 197, 255);
        transition: all 300ms linear;
        caret-color: rgb(55, 135, 255);
    }
    
    .button {
        opacity: 1;
        text-align: center;
        background-color: rgb(55, 135, 255);
        border: none;
        border-radius: 10px;
        width: 90%;
        height: 50px;
        margin-top: 4%;
        font-size: 19px;
        transition: all 500ms linear;
    }
    
    input::placeholder{
        padding: 3px;
        font-size: 14px;
    }
    input:focus{
        border-bottom: 2px solid rgb(55, 135, 255);
        opacity: 1;
        outline: none;
        box-sizing: border-box;
    }
    
    .button:hover {
    color: white;
        background-color: rgb(0, 4, 255);
        transform: scale(1.05,1);
        cursor: pointer;
    }
}