/* -- reset -- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

body.fixed {
    overflow: hidden;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*:hover,
*:focus {
    outline: none !important;
}

* {
    --primary-color: 96, 196, 82;
    /* #60c452 */
    --primary-color-dark: 79, 179, 65;
    /* #4fb341 */
    --primary-color-dark2x: 62, 162, 48;
    /* #3ea230 */
    --second-color: 245, 174, 22;
    /* #f5ae16 */
    --second-color-dark: 228, 157, 5;
    /* #e49d05 */
    --second-color-dark2x: 211, 140, 0;
    /* #d38c00 */
    --third-color: 148, 179, 222;
    /* #94b3de */
    --third-color-dark: 131, 162, 205;
    /* #83a2cd */
    --third-color-dark2x: 114, 145, 188;
    /* #7291bc */
    --danger-color: 240, 75, 75;
    /* #f04b4b */
    --danger-color-dark: 223, 58, 58;
    /* #df3a3a */
    --danger-color-dark2x: 206, 41, 41;
    /* #ce2929 */
    --blue-bg: 110, 145, 202;
    /* #6e91ca */
    --academy-bg: 248, 252, 255;
    /* #f8fcff */
    --color-000000: 0, 0, 0;
    /* #000000 */
    --color-333333: 51, 51, 51;
    /* #333333 */
    --color-4d4d4d: 77, 77, 77;
    /* #4d4d4d */
    --color-545454: 84, 84, 84;
    /* #545454 */
    --color-767676: 118, 118, 118;
    /* #767676 */
    --color-999999: 153, 153, 153;
    /* #999999 */
    --color-a0a0a0: 160, 160, 160;
    /* #a0a0a0 */
    --color-bdbdbd: 189, 189, 189;
    /* #bdbdbd */
    --color-cccccc: 204, 204, 204;
    /* #cccccc */
    --color-eaeaea: 234, 234, 234;
    /* #eaeaea */
    --color-f1f1f1: 241, 241, 241;
    /* #f1f1f1 */
    --color-f8f8f8: 248, 248, 248;
    /* #f8f8f8 */
    --color-f9f9f9: 249, 249, 249;
    /* #f9f9f9 */
    --color-fafafa: 250, 250, 250;
    /* #fafafa */
    --color-ffffff: 255, 255, 255;
    /* #ffffff */
    --color-f8f9fa: 248, 250, 255;
    /* #f8f9fa */
    --color-shadow: 115, 128, 157;
    /* #73809d */
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Black.eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Black.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum)_Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum)_Black.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum)_Black.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/eot/IRANSansWeb(FaNum).eot');
    src: url('../fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('../fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('../fonts/woff/IRANSansWeb(FaNum).woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('../fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}

html {
    height: 100%;
    box-sizing: border-box;
    font: 14px IRANSans;
    color: rgb(var(--color-333333));
}

html *,
html *::before,
html *::after {
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    direction: rtl;
}

strong,
b {
    font-weight: 700;
    color: rgb(var(--color-333333));
}

a {
    text-decoration: none;
    transition: all 0.4s;
}
.hidden-btn {
    display: none !important;
}
.alert {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 15px 20px;
    align-items: center;
    gap: 10px !important;
    margin: 0 0 20px;
    position: relative;
    border-radius: 5px;
    font-weight: 300;
}

.alert:last-child {
    margin-bottom: 0;
}

.min-alert {
    font: 300 13.5px IRANSans;
    padding: 5px 20px 5px 50px;
}

.alert-text {
    text-align: center;
    margin: 20px 0 5px;
}

.alert svg {
    flex: 0 0 25px;
}

.alert-icon {
    display: none;
    height: 25px;
}

.alert .link-simple {
    border-bottom: 1px solid;
    margin: 0 2px;
}

.alert .btn {
    height: 35px;
    white-space: nowrap;
}

.close-alert {
    position: absolute;
    left: 15px;
    cursor: pointer;
}

.danger-alert {
    background: rgba(var(--danger-color), 0.15);
    color: rgb(var(--danger-color-dark2x));
}

.danger-alert svg {
    fill: rgb(var(--danger-color-dark));
}

.danger-alert .link-simple:hover {
    border-bottom: 1px solid rgb(var(--danger-color));
}

.warning-alert {
    background: rgba(var(--second-color), 0.15);
    color: rgb(var(--second-color-dark2x));
}

.warning-alert svg {
    fill: rgb(var(--second-color-dark));
}

.warning-alert .link-simple:hover {
    border-bottom: 1px solid rgb(var(--second-color));
}

.success-alert {
    background: rgba(var(--primary-color), 0.15);
    color: rgb(var(--primary-color-dark2x));
}

.success-alert svg {
    fill: rgb(var(--primary-color-dark));
}

.success-alert .link-simple:hover {
    border-bottom: 1px solid rgb(var(--primary-color));
}

.info-alert {
    background: rgba(var(--third-color), 0.15);
    color: rgb(var(--third-color-dark2x));
}

.info-alert svg {
    fill: rgb(var(--third-color-dark));
}

.info-alert .link-simple:hover {
    border-bottom: 1px solid rgb(var(--third-color));
}

.green-text {
    color: rgb(var(--primary-color)) !important;
}

.orange-text {
    color: rgb(var(--second-color)) !important;
}

.blue-text {
    color: rgb(var(--third-color)) !important;
}

.red-text {
    color: rgb(var(--danger-color)) !important;
}

.dark-text {
    color: rgb(var(--color-333333)) !important;
}

a.green-text:hover {
    color: rgb(var(--primary-color-dark2x)) !important;
}

a.orange-text:hover {
    color: rgb(var(--second-color-dark2x)) !important;
}

a.blue-text:hover {
    color: rgb(var(--third-color-dark2x)) !important;
}

a.red-text:hover {
    color: rgb(var(--danger-color-dark2x)) !important;
}

.text-center {
    text-align: center !important;
    align-items: center;
}

.text-right {
    text-align: right !important;
    align-self: flex-start;
}

.text-left {
    text-align: left !important;
    align-self: flex-end;
}

body {
    width: 100%;
    min-height: 100%;
    padding: 30px 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f5fa;
    position: relative;
}

::selection {
    background: #7081b9;
    color: rgb(var(--color-ffffff));
}


.form-box {
    width: 450px;
    max-width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    position: relative;
}

.logo {
    width: 160px;
    margin-bottom: 10px;
}

.form {
    width: 100%;
    box-shadow: rgba(119, 132, 157, .1) 0 4px 40px;
    padding: 25px 40px 30px;
    border-radius: 5px;
    margin-bottom: 10px;
    position: relative;
    background: rgb(var(--color-ffffff));
}

.seprator {
    border-bottom: 1px dashed #b1c5d8;
    margin-bottom: 20px;
}

.signin-title {
    font: 500 17px IRANSans;
    margin-bottom: 20px;
    text-align: center;
}

.quick-login {
    border-bottom: 1px dashed #b1c5d8;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quick-login-title {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(var(--color-ffffff));
    padding: 0 10px;
    color: #b1c5d8;
    font-weight: 300;
}

.form-element {
    position: relative;
}

.form-element:not(:last-child) {
    margin-bottom: 25px;
}

.form-svg {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    fill: #7286a250;
    transition: all 0.4s;
}

.form-links-box {
    margin: -5px 0 10px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.form-link {
    color: #999999;
    transition: all 0.4s;
}

.form-link svg {
    fill: #999999;
    transition: all 0.4s;
}

.form-link:hover {
    color: #767676;
}

.form-link:hover svg {
    fill: #767676;
}

.text-under-button {
    text-align: center;
    margin-top: 10px;
    color: #999;
}

.nice-input {
    width: 100%;
    height: 50px;
    font-size: 14px;
    color: #7286a2;
    background: #f1f5fa;
    border: 1px solid #f0f4f9;
    padding: 0 50px 0 15px;
    border-radius: 4px;
}

.nice-input::placeholder {
    opacity: 0.5;
}


.nice-input:-webkit-autofill {
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 0 1000px #f1f5fa inset;
    -webkit-text-fill-color: #7286a2;
}

.danger-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff6f6 inset;
    -webkit-text-fill-color: rgb(var(--danger-color-dark2x));
}

.warning-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fffbf3 inset;
    -webkit-text-fill-color: rgb(var(--second-color-dark2x));
}

.success-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f7fcf6 inset;
    -webkit-text-fill-color: rgb(var(--primary-color-dark2x));
}

:-webkit-autofill::selection {
    -webkit-text-fill-color: rgb(var(--color-ffffff));
}


.otp-input-box {
    display: flex;
    flex-direction: row-reverse;
    gap: 15px;
}

.otp-input {
    text-align: center;
    padding: 0 15px;
    font: 500 18px IRANSans;
}

.autofill-password {
    position: absolute;
    right: 51px;
    top: 15px;
    opacity: 0.5;
    color: #7286a2;
    display: none;
}

.danger-input .autofill-password {
    color: rgb(var(--danger-color-dark2x)) !important;
}

.danger-input input:not(.select2-search__field),
.danger-input textarea,
.danger-input .select2-selection {
    border: 1px solid rgb(var(--danger-color)) !important;
    background: rgba(var(--danger-color), 0.05) !important;
    color: rgb(var(--danger-color-dark2x)) !important;
}

.danger-input input::placeholder,
.danger-input textarea::placeholder {
    color: rgba(var(--danger-color), 0.8)
}

.danger-input::after {
    color: rgb(var(--danger-color));
    position: absolute;
    bottom: -20px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 12px IRANSans;
    z-index: 10;
}

.danger-input svg {
    fill: rgb(var(--danger-color-dark2x));
}

.warning-input input,
.warning-input textarea {
    border: 1px solid rgb(var(--second-color)) !important;
    background: rgba(var(--second-color), 0.05) !important;
    color: rgb(var(--second-color-dark2x)) !important;
}

.warning-input input::placeholder,
.warning-input textarea::placeholder {
    color: rgba(var(--second-color), 0.8)
}

.warning-input::after {
    color: rgb(var(--second-color));
    position: absolute;
    bottom: -20px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 12px IRANSans;
    z-index: 10;
}

.warning-input svg {
    fill: rgb(var(--second-color-dark2x));
}

.success-input input,
.success-input textarea {
    border: 1px solid rgb(var(--primary-color)) !important;
    background: rgba(var(--primary-color), 0.05) !important;
    color: rgb(var(--primary-color-dark2x)) !important;
}

.success-input input::placeholder,
.success-input textarea::placeholder {
    color: rgba(var(--primary-color), 0.8)
}

.success-input::after {
    color: rgb(var(--primary-color));
    position: absolute;
    bottom: -20px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 300 12px IRANSans;
    z-index: 10;
}

.success-input svg {
    fill: rgb(var(--primary-color-dark2x));
}

.data-min::after {
    content: "حداقل مقدار" " " attr(data-value-min) " " "است.";
}

.data-max::after {
    content: "حداکثر مقدار" " " attr(data-value-max) " " "است.";
}

.weak-pass::after {
    content: "پسورد ضعیف است.";
}

.medium-pass::after {
    content: "پسورد معمولی است.";
}

.strong-pass::after {
    content: "پسورد قوی است.";
}

.success-repass:after {
    content: "تکرار پسورد صحیح است.";
}

.unsuccess-repas:after {
    content: "تکرار رمز عبور.";
}

.valid-email::after {
    content: "ایمیل وارد شده معتبر است.";
}

.invalid-email::after {
    content: "لطفا از یک ایمیل معتبر استفاده کنید.";
}

.exists-email::after {
    content: "این ایمیل قبلا در سایت ثبت شده است.";
}

.valid-url::after {
    content: "آدرس سایت معتبر است.";
}

.invalid-url::after {
    content: "لطفا آدرس سایت را به درستی وارد کنید.";
}

.valid-phone::after {
    content: "شماره تلفن معتبر است.";
}

.invalid-phone::after {
    content: "لطفا شماره تماس را به درستی وارد کنید.";
}

.exists-phone::after {
    content: "این شماره تماس قبلا در سایت ثبت شده است.";
}

.valid-email-phone::after {
    content: "شماره تلفن یا معتبر است.";
}

.invalid-email-phone::after {
    content: "لطفا شماره تماس یا ایمیل را به درستی وارد کنید.";
}

.invalid-nation-code::after {
    content: "کدملی وارد شده صحیح نیست.";
}

.valid-nation-code::after {
    content: "کدملی وارد شده صحیح است.";
}

.required::after {
    content: "لطفا فیلد بالا را پر کنید.";
}

.max-length::after {
    content: "حداکثر تعداد کاراکتر";
}

.server-error::after {
    content: attr(data-alert)
}

.invalid-persian::after {
    content: "لطفا از کاراکترهای فارسی استفاده کنید.";
    color: rgb(var(--danger-color));
    position: absolute;
    bottom: -20px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 10;
}

.btn {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    padding: 0px 15px;
    font-size: 15px;
    border-radius: 3px;
    color: rgb(var(--color-ffffff));
    cursor: pointer;
    justify-content: center;
    border: none;
    transition: all 0.4s;
    font-family: IRANSans;
}

.btn-primary {
    background: rgb(var(--primary-color));
    box-shadow: 5px 5px 20px rgba(var(--primary-color), 0.1);
}

.btn-primary:hover {
    background: rgb(var(--primary-color-dark));
}

.btn-outside {
    background: #f1f5fa;
    border: 1px solid #f0f4f9;
    color: #a1b5c8;
    gap: 15px;
}

.btn-outside:hover {
    background: #f0f4f9;
    color: #8195a8;
}

.google-licence {
    color: #a0b4b6;
    font: 300 12.5px IRANSans;
    padding: 15px 5px 10px;
    direction: ltr;
}

.terms {
    color: #a0b4b6;
    text-align: center;
    font: 300 13.5px/2 IRANSans;
}

.signin-link {
    color: #7286a2;
    font-weight: 400;
    transition: all 0.4s;
}

.signin-link:hover {
    color: #506480;
}

.form-back {
    width: 100%;
    margin: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
}

.timer {
    height: 22px;
    display: block;
    direction: ltr;
    font-size: 15px;
    margin: 0 0 -10px;
    color: #999999;
}

.resend-code {
    height: 22px;
    display: none;
    justify-content: flex-end;
    margin: 0 0 -10px;
    cursor: pointer;
}

.captcha-refresh-box::before {
    content: attr(data-p);
    position: absolute;
    background: #fff;
    top: -45px;
    box-shadow: rgba(119, 132, 157, .2) 0 4px 40px;
    padding: 10px;
    z-index: 10000;
    left: calc(100% - 15px);
    white-space: nowrap;
    transform: translateX(-50%);
    color: #7286a2;
    border-radius: 3px;
    opacity: 0;
    z-index: -1;
    font: 300 14px IRANSans;
    transition: all 0.4s;
}

.captcha-refresh-box:hover::before {
    opacity: 1;
    z-index: 100;
}

.captcha-refresh:hover {
    cursor: pointer;
    fill: #7286a290;
}

.captcha-img {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 48px;
    border-radius: 3px 0 0 3px;
}
.loading-box {
    position: relative;
    transition: all 0.4s;
}

.loading-box::after {
    content: url(../images/loading.svg);
    position: absolute;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-ffffff), 0.75);
}