*{
    box-sizing: border-box;
}
html, body {
    direction: rtl;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
body.ltr{
    direction: ltr;
}
body.ltr .el-rtl{
    display: none;
}
body.rtl .el-ltr{
    display: none;
}
body.ltr .form-header-title{
    text-align: left;
    padding-right: 0;
    padding-left: 20px;
}
body.ltr .form-caution-box p{
    margin-right: 0;
    margin-left: 30px;
}
body.ltr .caution-img-container{
    float: left;
}
form {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin-bottom: 0;
}

.clsLoginBackground {
    width: 100%;
    min-height: 100%;
    height: 100%;
    background-color: white;
    /*background: url("../images/cosmos-laka-flowers-sky.jpg");*/
    /*background-position: 100%;*/
    background-size: cover;
    -weblit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
}


.clsLoginGlassContainer, .clsLogoutGlassContainer {
    background-color: rgba(255, 255, 255, 0.85);
    margin: 0;
    border-radius: 5px;
    text-align: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.49);


    margin-bottom: 30px;
    padding: 10px 30px 30px 30px;
}

.clsLoginInfo {
    border: none;
    direction: rtl;
    text-align: right;
    /*margin-top: 20px;*/
    border-top: solid 1px #444444;

}

.clsLeftIcon {
    float: left;
    display: table-cell;
}


.clsLoginMessageContainer {
    padding: 10px;
}



.clsLeftIcon.clsCapcha {
    background: url("../images/refresh.png");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    left: 113px;
    top: 24px;
    bottom: 0;
    margin: auto;
    width: 16px;
    height: 16px;
}

body.ltr .clsLeftIcon.clsCapcha{
    left: inherit;
    right: 113px;
}

#retryButtonBlock .clsLeftIcon.clsCapcha {
    left: 15px;
}
body.ltr #retryButtonBlock .clsLeftIcon.clsCapcha{
    left: inherit;
    right: 15px;
}

.clsLoginTextInvisible {
    display: none;
}

.clsLoginErrMessage {
    font-family: Vazir, Tahoma;
    color: #444444;
    color: red;
    margin-top: 5px;
    vertical-align: middle;
}

.clsLoginErrMessage img {
    vertical-align: middle;
    max-width: 18px;
    margin-left: 5px;
}

.clsLoginInfoMessage {
    font-family: Vazir, Tahoma;
    color: #444444;
    color: green;
}
.clsLoginInfoMessage.forgot-pass{
    display: block;
}
.clsCheckAgree {
    width: 15px;
}


/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
    font-family: Vazir, Tahoma;
    font-size: 10px;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    line-height: 1.2;
    font-family: Vazir, Tahoma;
    font-size: 10px;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-family: Vazir, Tahoma;
    font-size: 0;
    line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


.CapsLockOn {
    width: 189px;
    height: 64px;
    background-image: url('../images/capslock16.png');
    position: absolute;
    left: 0px;
    z-index: 99;
    top: 71px;
}

.CapsLockOff {
    width: 0px;
    height: 0px;
    background-image: none;
    position: absolute;
}

.clsLoginCapchaInput {
    float: left;
}

.clsLoginCapchaImage {
    position: absolute;
    left: 10px;
    top: 28px;
    bottom: 0;
    margin: auto;
}
body.ltr .clsLoginCapchaImage {
    left: inherit;
    right: 10px;
}


.clsLoginGroupContainer {
    width: 22em;
    margin-left: -11em; /*set to a negative number 1/2 of your width*/
    margin-top: -9em; /*set to a negative number 1/2 of your height*/

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

}

.clsLoginButton {
    font-size: 20px;
    height: 50px;
    margin: 10px 0px 10px 0px;
    padding-top: 10px;
}

.clsLoginMessage {
    font-size: 14px;
}

.clsLeftIcon.clsPassword, .clsLeftIcon.clsUsername {
    width: 22px;
    height: 22px;
}


.clsLoginCapchaImage {
    width: 100px;
}

.clsLoginCapchaInput {
    width: 50%;
}

.clsLoginCapcha {
    width: 80%;
}


.clsLoginInfoMessage, .clsLoginErrMessage {
    font-size: 12px;
}

.clsLoginInfo {
    height: 15px
}

.clsLoginInfoMessage {
    display: inline-block;
    vertical-align: middle;
}

.clsLoginInfoMessage img {
    width: 12px;
    margin-left: 5px;
}

.clsBottomBannerGlass {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0%;
    background-color: rgba(0, 0, 0, 0.60);
    color: White;
    text-align: left;
    vertical-align: middle;
    font-family: Vazir, Tahoma;
    font-size: 12px;
}
body.ltr .clsBottomBannerGlass{
    left: 0;
}

.clsGamLogo {
    float: left;
    width: 32px;
    height: 32px;
    background: url("../images/gam.png");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: cover;
    -weblit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
}

.clsGamInfo {
    float: left;
    margin-right: 5px;
    height: 32px;
    line-height: 32px;
}

.clsGamInfoContainer {
    margin: 10px 15px 5px 15px;
    float: right;
    cursor: pointer;
}

/************************************** Logout *********************************/
.clsLogoutGlassContainer {
    padding: 30px;
}

.clsLogotGroupContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 18em;
    margin-top: -10em; /*set to a negative number 1/2 of your height*/
    margin-left: -10em; /*set to a negative number 1/2 of your width*/
    width: 20em;
    min-height: 20em;
}

.clsLogoutMessageContainer {
    line-height: 20px;
    vertical-align: middle;
    height: 100%;
    height: auto;
    width: 100%;
}

.clsLogoutMessage {
    font-family: Vazir, Tahoma;
    overflow: hidden;
    text-align: right;
}

.clsLogoutInfoMessage {
    color: #4f4f4f;
}

.clsLogoutMessage {
    font-size: 14px;
}

@media screen and (min-width: 900px) {
    .clsLogoutMessage {
        font-size: 14px;
    }

    .clsLogotGroupContainer {
        width: 50em;
        min-height: 20em;
        margin-top: -10em;
        margin-left: -25em;
    }
}

@media screen and (min-width: 1500px) {
    .clsLogoutMessage {
        font-size: 14px;
    }

    .clsLogotGroupContainer {
        width: 60em;
        min-height: 20em;
        margin-top: -10em;
        margin-left: -30em;
    }
}
body.ltr .clsGamInfoContainer{
    float: left;
}
body.ltr  .clsGamInfo{
    float: right;
}
body.ltr  .clsLogoutLogoCompany{
    left: inherit;
    right: 50px;
}
body.ltr .clsLogoutMessage{
    text-align: left;
}
/*************************************************************************************/


html,
body {
    direction: rtl;
    margin: 0;
    font-family: Vazir;
    overflow-x: hidden;
}

.contact-us {
    display: flex;
    position: absolute;
    bottom: 30px;
    right: 30px;
    padding: 15px 25px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 1);
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}
.footer-logo{
    position: absolute;
    right: 15px;
    top: 14px;
    max-width: 20px;
}
.contact-us img {
    width: 100%;
    vertical-align: middle;
}
.contact-us a {
    transition: 0.3s all ease;
    font-weight: 300;
    color: #000000;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    text-decoration: none;
    font-size: 12px;
    font-weight: 200;
    white-space: nowrap;
    width: 0px;
    overflow: hidden;
}
.contact-us:hover a{
    width: 100%;
    padding-right: 18px;
}

button {
    border: none;
    outline: 0;
    background-color: transparent;
    font-family: inherit;
}

.button-submit {
    background-color: #1798EC;
    padding: 18px 15px 17px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 15px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease 0s;
    color: #fff;
    width: 100%;
}

.button-submit:hover {
    background-color: #1187d4;
}
.button-submit.disabled {
    opacity: 0.65;
    cursor: default;
}
.button-sso {
    background-color: #891ec0;
    padding: 18px 15px 17px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 15px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease 0s;
    color: #fff;
    width: 100%;
    margin-top: 15px;
}

.button-sso:hover {
    background-color: #7811ac;
}

.form-group a {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    color: #444;
}

.clsLoginInfoMessage {
    margin-top: 10px;
}
.msg-wrapper{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 30px;
}
.message-ctn {
    padding: 25px 30px;
    background-color: rgba(255, 255, 255, 50%);
    transition: background-color 0.4ms;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    border: 1px solid rgba(0,0,0,15%);
    border-radius: 25px;
}

.message-ctn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transition: background-color 0.4ms;
}

.message-ctn a {
    position: relative;
    text-decoration: none;
    border-bottom: 1px solid #444444;
}

.message-ctn * {
    font-family: Vazir, Tahoma !important;
}

.message-ctn.go-top {
    z-index: 9999;
}
.message-ctn p{
    margin: 0 0 5px !important;
}


body.ltr .contact-us{
    right: unset;
    left: 30px;
}
body.ltr .msg-wrapper{
    left: 30px;
    right: unset;
}

.arrow_box {
    top: 40px;
    position: relative;
    background: #ffffff;
    border: 1px solid #719ECE; /*set border colour here*/
    width: 200px;
    height: 200px;
    border-radius: 3px;
    -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour  and size here*/
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}

.arrow_box:after,
.arrow_box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 19px;
    left: 50%;
    margin-left: -19px;
}

.arrow_box:before {
    border-color: rgba(113, 158, 206, 0);
    border-bottom-color: #719ECE;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}
.back-btn{
    display: block;
    max-width: 140px;
    border: 1px solid #3B93F1;
    margin: auto;
    font-size: 12px;
    padding: 0 7px;
    cursor: pointer;
}

.back-btn img{
    display: table-cell;
    vertical-align: middle;
    width: 13px;
}
.back-btn span{
    color: #3B93F1;
    padding: 6px 0;
    display: table-cell;
    margin-right: 3px;
}

.select-language{
    position: absolute;
    left: 30px;
    bottom: 30px;
    background-color: rgba(255,255,255,100%);
    color: #000000;
    border-radius: 15px;
    padding: 14px 15px;
    font-size: 10px;
}
#progressBarText {
    position: absolute;
    top: 6px;
    bottom: 0;
    margin: auto;
    z-index: 99;
    display: block;
    right: 0;
    font-family: Vazir, Tahoma;
    left: 0;
    font-size: 11px;
}
#barStatus {
    position: absolute;
    height: 100%;
    background-color: #9fd078;
    /*background-color: #25F;*/
    top: 0;
    z-index: 9;

}
#progressBar {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: #c4c4c4;

}
body.ltr .select-language{
    right: 30px;
    left: unset;
}



body.ltr #agr_td{
    display: table;
}
body.ltr .clsLeftIcon{
    float: none;
    vertical-align: top;
}

body.ltr #progressBarText{
    font-family: Tahoma;
}
body.ltr #errMsg{
    font-family: Tahoma;
}

.body-container{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 100%;
}
.sidebar{

}
.sidebar.right-sidebar{
    flex-basis: 595px;
    overflow-y: auto;
}
.left-sidebar{
    flex: 1;
    background-image:url('/cas/bgimage');
    background-position: center;
    background-size: cover;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    position: relative;
}

.form-container{
    display: table;
    padding: 0 90px;
    height: 100%;
}

.language-box{
    display: inline-block;
    background-color: rgba(0,0,0,3%);
    padding: 8px 15px;
    border-radius: 28px;
    cursor: pointer;
    font-size: 16px;
}
.language-box-img{
    width: 20px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}
.language-box-img img{
    max-width: 100%;

}
.language-box-text{
    /*margin-right: 8px;*/
    display: inline-block;
}
.form-header-img {
    display: inline-block;
    padding: 15px;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, 20%);
    vertical-align: middle;
    max-width: 140px;
}

.form-header-img img{
    width: 100%;
}
.form-header{
    display: flex;
    align-items: center;
    /*margin-top: 46px;*/
}
.form-header-title {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    color: #000000;
    padding-right: 20px;

}
.form-header-h1{
    line-height: 51px;
    font-size: 33px;
    font-weight: 700;
    margin: 0;
}
.form-header-h3{
    line-height: 28px;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    opacity: 0.5;
}
.form-body{
    margin-top: 30px;
}
.form-body-header{
    display: inline-block;
    margin-bottom: 27px;
}
.form-body-header div{
    font-size: 20px;
    font-weight: 600;
}
.form-body-header p{
    margin-top: 8px;
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 400;
}
.form-fields{
    display: inline-block;
    width: 100%;
    position: relative;
    margin-bottom: 15px;

}
.form-fields.reverse-fields{
    display: flex;
    flex-direction: column-reverse;
}
.form-fields.reverse-fields .text-input:focus + label, .form-fields.reverse-fields .text-input:focus-visible + label {
    color: #1798EC;
}
.form-fields.reverse-fields select:focus + label, .form-fields.reverse-fields select:focus-visible + label {
    color: #1798EC;
}
.form-fields:last-child{
    margin-bottom: 0px;
}
.form-fields label{
    display: block;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}
.form-fields-input{
    display: inline-block;
    width: 100%;
    transition: all 0.3s ease;
    font-size: 17px;
}
.form-fields-input.text-input{
    padding: 17px 15px 15px 17px;
    border: 1px solid rgba(0,0,0,15%);
    border-radius: 15px;
}
.form-fields-input.text-input::placeholder{
    font-family: Vazir, Tahoma;
    font-size: 14px;
    opacity: 50%;
    font-weight: 500;
}
.form-fields-input.text-input:focus, .form-fields-input.text-input:focus-visible, .form-fields select:focus-visible,  .form-fields select:focus{
    border-color: #1798EC;
    outline: 0;
}

.form-fields-input.chk-box{
    display: block;
    position: relative;
    padding-right: 35px;
    margin-bottom: 12px;
    padding-left: 2px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form-fields-input.chk-box input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 8px;
}
/* On mouse-over, add a grey background color */
.form-fields-input.chk-box:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.form-fields-input.chk-box input:checked ~ .checkmark {
    background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.form-fields-input.chk-box input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.form-fields-input.chk-box .checkmark::after {
    right: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.agreement-text {
    font-size: 12px;
    opacity: 0.6;
    padding-top: 3px;
    display: inline-block;
}
.agreement-text a{
    color: #000000;
    position: relative;
    text-decoration: none;
}
.agreement-text a:after{
    position: absolute;
    right: 0;
    width: 100%;
    height: 1px;
    top: 19px;
    background-color: rgba(0,0,0,40%);
}
.agreement-text:hover a:after{
    content: "";
    background-color: rgba(0,0,0,80%);
}
.agreement-text:hover{
    opacity: 0.8;
}
.form-link{
    color: #1798EC;
    position: relative;
    text-decoration: none;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.form-link:after{
    content: "";
    position: absolute;
    right: 0;
    display: none;
    width: 100%;
    height: 1px;
    top: 21px;
    background-color: #1798EC;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.form-link:hover:after{
    display: block;
}
.forgot-pass .form-link{
    font-size: 13px;
    font-weight: 500;
}
.language-box-text .form-link{
    font-size: 12px;
    font-weight: 500;
    color: #000000;
    margin: 0 2px;
}
.language-box-text .form-link:hover{
    color: #1798EC;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.form-caution-box{
    padding: 20px;
    background-color: rgba(0,0,0,2%);
    border-radius: 15px;
    margin-top: 40px;
    margin-bottom: 15px;
}
.caution-img-container{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FEBF48;
    text-align: center;
    float: right;
}
.caution-img-container img{
    display: block;
    margin: auto;
    margin-top: 3px;
}
.form-caution-box p{
    margin: 0;
    opacity: 0.6;
    font-size: 12px;
    margin-right: 25px;
}

body.ltr .caution-img-container{
    float: left;
}
body.ltr .left-sidebar{
    border-radius: 50px 0 0 50px;
}
@media screen and (max-width: 1500px) {
    .form-container{
        padding: 15px 45px 0px 45px;
    }
    .sidebar.right-sidebar {
        flex-basis: 455px;
    }
    .form-header-img{
        max-width: 118px;
        padding: 11px;
    }

    .form-header-h1{
        font-size: 28px;
    }
    .form-header-h3{
        font-size: 15px;
    }
    .form-body{
        margin-top: 15px;
    }
    .form-caution-box{
        margin-top: 25px;
        padding: 10px;
    }
    .form-caution-box p{
        font-size: 11px;
    }
}

@media screen and (max-width: 1200px) {
    .form-container{
        padding: 0 30px;
    }
    .sidebar.right-sidebar {
        flex-basis: 360px;
    }
    .left-sidebar .message-ctn{
        font-size: 12px !important;
        padding: 15px 20px;
    }
    .form-header-h1{
        font-size: 24px;
    }
    .form-header-h3{
        line-height: 5px;
        font-size: 14px;
    }
    .form-header-img{
        width: 68px;
        height: 68px;
    }

    .form-body-header{
        margin-bottom: 20px;
    }
    .form-body-header p{
        font-size: 14px;
    }

    .contact-us a{
        font-size: 12px;
    }
    .language-box-text .form-link{
        font-size: 12px;
    }
    .form-fields-input.text-input{
        padding: 15px;
    }
}

@media screen and (max-width: 980px) {

    .sidebar.right-sidebar {
        flex-basis: 340px;
    }
    .contact-us a{
        display: none;
    }
    .contact-us{
        padding: 23px 25px;
    }
    .footer-logo{
        top: 12px;
    }
}

@media screen and (max-width: 768px) {
    body{
        overflow-y: auto;
        overflow-x: hidden;
    }
    .body-container{
        display: inline-block;
        width: 100%;
    }
    .left-sidebar{
        display: none;
    }

    .form-container{
        width: 100%;
        padding: 0 120px;
    }
    .message-ctn{
        max-height: 90px;
        overflow: auto;
    }
    form{
        width: 100%;
    }

}
@media screen and (max-width: 560px) {

    .form-container{
        padding: 0 80px;
    }
}

@media screen and (max-width: 420px) {
    .right-side-outer-ctn {
        width: 320px;

    }
    .form-container{
        padding: 0 60px;
    }
}
@media screen and (max-width: 320px) {
    .right-side {
        width: 280px;

    }
}



@media screen and (max-height: 668px) {
    .logo-ctn.responsive-md {
        /*top: 9%;*/
    }

}
/* Generated by script */
@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-Thin-FD.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/*@font-face {*/
/*    font-family: Vazir;*/
/*    src: url('/wr/fonts/Vazir/Vazir-ExtraLight.woff2') format('woff2');*/
/*    font-weight: 200;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-Light-FD.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-FD.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-Medium-FD.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-Black-FD.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-Bold-FD.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*@font-face {*/
/*    font-family: Vazir;*/
/*    src: url('/wr/fonts/Vazir/Vazir-ExtraBold.woff2') format('woff2');*/
/*    font-weight: 800;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

@font-face {
    font-family: Vazir;
    src: url('/wr/fonts/Vazir/Vazir-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}