@font-face {
    font-family: "MRT_Dinar Two Medium";
    font-style: normal;
    src: url("../fonts/Dinar Two Light_MRT.ttf");
}

@font-face {
    font-family: Vazir;
    src: url("../fonts/Vazir-Medium.eot");
    src: url("../fonts/Vazir-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Vazir-Medium.woff2") format("woff2"),
        url("../fonts/Vazir-Medium.woff") format("woff"),
        url("../fonts/Vazir-Medium.ttf") format("truetype");
    font-weight: 500;
}

body {
    margin: 0;
    overflow-y: hidden;
    background: url("../../Images/LoginBG1.jpg");
    background-repeat: no-repeat;
    background-size: auto;
}

.main-content {
    position: absolute;
    width: 26%;
    left: 37%;
}

.backgroundCompelet img {
    width: 100%;
}

.text {
    position: absolute;
    top: 9%;
    width: 100%;
}

.text img {
    width: 20%;
}

form {
    padding-top: 35px;
}

.text h1 {
    font-family: "MRT_Dinar Two Medium";
    text-align: center;
    direction: rtl;
    color: #6a6969;
    font-size: 160%;
}

.welcome {
    box-shadow: -7px 5px 10px #0003;
}

.text h1 span {
    font-size: 180%;
    font-weight: 600;
}

.welcomeBG img {
    width: 100%;
    display: block;
}

.loginForm {
    text-align: center;
    background: linear-gradient(
        233deg,
        rgb(234, 234, 234) 0%,
        rgb(244, 244, 244) 100%
    );
    padding: 0 0 40px;
    margin-top: 10px;
    box-shadow: -7px 5px 10px #0003;
    position: relative;
}

.inputGroup {
    width: 60%;
    margin: 0 auto;
    position: relative;
}

.inputGroup img {
    position: absolute;
    top: 21px;
    right: 18px;
    width: 18px;
}

input {
    border: none;
    height: 40px;
    border-radius: 20px;
    margin: 12px 0;
    width: 85%;
    padding-right: 20%;
    background: rgb(233, 233, 232);
    background: linear-gradient(
        -90deg,
        rgba(233, 233, 232, 1) 0%,
        rgba(247, 246, 246, 1) 100%
    );
    box-shadow: -7px 5px 9px 0px rgba(223, 223, 223, 0.91),
        7px -5px 9px 0px rgba(251, 250, 250, 0.93);
    font-family: IRANSans;
}

input:focus {
    outline: none;
}

button {
    border: none;
    background: linear-gradient(
        90deg,
        rgb(247, 243, 186) 0%,
        rgb(255, 230, 59) 100%
    );
    height: 40px;
    width: 120px;
    border-radius: 25px;
    margin-top: 30px;
    box-shadow: -5px 3px 9px 0px rgba(213, 210, 210, 0.95),
        7px -5px 9px 0px rgb(255, 255, 255);
    font-family: "MRT_Dinar Two Medium";
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #666;
}

input:-webkit-autofill {
    background: linear-gradient(
        -90deg,
        rgb(233, 233, 232) 0%,
        rgb(247, 246, 246) 100%
    ) !important;
    background-image: none !important;
    box-shadow: -7px 5px 10px #0000001a, 7px -5px 10px hsla(0, 0%, 100%, 0.54) !important;
}

button:hover {
    cursor: pointer;
}

@media only screen and (max-width: 1550px) {
    .text h1 {
        font-size: 140%;
    }

    .main-content {
        width: 31%;
        left: 34%;
    }
}

@media only screen and (max-width: 1300px) {
    .main-content {
        width: 36%;
        left: 32%;
    }
}

@media only screen and (max-width: 1050px) {
    .main-content {
        width: 44%;
        left: 28%;
    }
}

@media only screen and (max-width: 991px) {
    .main-content {
        width: 52%;
        left: 28%;
    }
}

@media only screen and (max-width: 767px) {
    .main-content {
        width: 66%;
        left: 18%;
    }
}

@media only screen and (max-width: 576px) {
    .main-content {
        width: 90%;
        left: 5%;
    }
}

.invalid-feedback {
    font-family: Vazir;
    color: #5e5e5e;
    font-weight: 100;
}

.PassForgot {
    position: absolute;
    left: 20px;
    bottom: 20px;
    color: #5e5e5e;
    font-family: Vazir;
}

.loginBtn {
    margin-bottom: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #d5d5d5;
}

.codeMeli {
    margin-top: 30px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #c8c8c8;
}

.noPadding {
    padding: 0;
}

#resetHeader {
    font-size: 24px;
}

a {
    color: unset;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

@media only screen and (max-width: 1800px) {
    #resetHeader {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1600px) {
    #resetHeader {
        font-size: 20px;
    }
}

@media only screen and (max-width: 400px) {
    #resetHeader {
        font-size: 18px;
    }
}