:root {
    --OneColor: #00642e;
    --TwoColor: #3face1;
    --TreeColor: rgba(0, 0, 0, 0.05);
    --FourColor: black;
}

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: 'Far_Naskh';
    src: url( '../fonts/Far_Naskh.ttf' ) format( 'truetype' ); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
    font-family: 'BYekan';
    src: url( '../fonts/BYekan.eot?#' ) format( 'eot' ), /* IE6�8 */ url( '../fonts/BYekan.woff' ) format( 'woff' ), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url( '../fonts/BYekan.ttf' ) format( 'truetype' ); /* Saf3�5, Chrome4+, FF3.5, Opera 10+ */
}

@font-face {
    font-family: 'Sarbaz';
    src: url( '../fonts/Sarbaz-Black.otf' ) format( 'opentype' );
}

@font-face {
    font-family: 'IRANSansWeb';
    src: url( '../fonts/IRANSansWeb.woff2' ) format( 'woff2' );
}

* {
    font-family: 'IRANSansWeb', arial;
    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

.page[b-1mzj6d937u] {
    display: block !important;
}

body {
    background-color: var(--TreeColor);
}

.GapTop {
    margin-top: 5em;
}

.DContent {
    background-color: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid var(--FiveColor);
    margin-bottom: 15px;
    padding: 1em;
}

.page {
    padding: 1em 4.5em;
}


.LoginMain {
    width: 450px;
    max-width: 100%;
    background: #fff;
    transition: 0.4s all cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-x: hidden;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 10%;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}

.loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(250,250,250,0.8);
    height: 100%;
    width: 100%;
    text-align: center;
    background-image: url('../img/loader.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
    z-index: 101;
}

.lc {
    position: absolute;
    right: 0px;
    font-size: 1.000em;
    font-family: Yekan;
    color: white;
    background-color: red;
    -moz-border-radius: 0.188em;
    -webkit-border-radius: 0.188em;
    border-radius: 0.188em;
    border: 0px solid white;
    padding: 0.625em;
    margin: auto;
}

.SendSMSBTN {
    cursor: pointer;
}

.TitleForm {
    color: var(--OneColor);
    font-weight: bold;
}

.HrForm {
    margin: 0.5em 0 2em 0;
}

.alert {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    border: 0;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}

.BoxBtn {
    text-align: center;
    width: 100%;
    background-color: white;
    padding: 2em 1em 1.5em 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    color: var(--FourColor);
    position: relative;
    display: block;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    overflow: hidden;
}

    .BoxBtn:hover {
        color: var(--TwoColor);
    }

    .BoxBtn i {
        font-size: 2em;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: -0.5em;
        background-color: red;
        color: white;
        border-radius: 50%;
        width: 2em;
        height: 2em;
        line-height: 2.5em;
    }

    .BoxBtn:hover i {
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        line-height: 2em;
    }

.wrap {
    min-height: 10.3em;
    position: relative;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    background-color: white;
    margin: 0.5em;
    flex: 1 !important;
    padding: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    overflow: hidden;
    padding-top: 3em !important;
}

    .wrap a {
        color: var(--FourColor);
    }

        .wrap a:hover {
            color: var(--TwoColor);
        }

    .wrap i {
        font-size: 2em;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: -0.5em;
        background-color: red;
        color: white;
        border-radius: 50%;
        width: 2em;
        height: 2em;
        line-height: 2.5em;
    }

    .wrap:hover i {
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        line-height: 2em;
    }

@media screen and (max-width: 900px) {
    .wrap {
        flex: 20% !important;
    }
}

@media screen and (max-width: 500px) {
    .wrap {
        flex: 50% !important;
    }
}

.bottpmDiv {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    padding: 0.5em !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
}

    .bottpmDiv span {
        background-color: rgba(255,255,255,0.2);
        position: absolute;
        height: 2em;
        width: 50%;
        bottom: 0;
        left: 0;
    }

.toptpmDiv {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    padding: 0.25em 0.8em !important;
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
    color: white;
}

    .toptpmDiv span {
        background-color: rgba(255,255,255,0.2);
        position: absolute;
        height: 2em;
        width: 50%;
        top: 0;
        left: 0;
    }

    .toptpmDiv a {
        position: absolute;
        padding: 0 0.5em;
        top: 0.2em;
        left: 0.2em;
        -webkit-border-top-left-radius: 0.9em;
        border-top-left-radius: 0.9em;
    }

.bd-blue {
    background-color: #42A5F5 !important;
}

.bd-danger {
    background-color: #EF5350 !important;
}

.bd-orange {
    background-color: #FF7043 !important;
}

.bd-brown {
    background-color: #8D6E63 !important;
}

.bd-One {
    background-color: #66BB6A !important;
}

.bd-Green {
    background-color: #26A69A !important;
}

#blazor-error-ui {
    display: block;
    z-index: 9999999999999999999999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    padding: 2em;
    font-size: 1.5em;
    color: yellow;
}

.BoxShowInfo {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    overflow: hidden;
    position: relative;
    padding: 1em 0;
    height: 17em;
    background-color: white;
    margin-bottom: 1em;
}

.BoxShowScroll {
    overflow-y: scroll;
    height: 100%;
    width: 100%;
    padding: 0.7em 0;
}

    .BoxShowScroll table {
        font-size: 0.7em;
    }

    .BoxShowScroll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    .BoxShowScroll::-webkit-scrollbar {
        width: 3px;
        background-color: #F5F5F5;
    }

    .BoxShowScroll::-webkit-scrollbar-thumb {
        background-color: #000000;
    }


.BoxShowInfo-InfoList {
}

.Search-DropDown {
    z-index: 999;
    position: absolute;
    overflow-y: scroll;
    background-color: white;
    left: 1em;
    right: 1em;
    max-height: 20em;
    padding: 1em;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
}

    .Search-DropDown div {
        border-bottom: 1px solid var(--TreeColor);
        padding: 0.5em;
        position: relative;
    }

    .Search-DropDown h5 {
        font-size: 1em;
    }

    .Search-DropDown button {
        padding: 0 0.5em;
        position: relative;
    }

    .Search-DropDown::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
    }

    .Search-DropDown::-webkit-scrollbar {
        width: 6px;
        background-color: #F5F5F5;
    }

    .Search-DropDown::-webkit-scrollbar-thumb {
        background-color: #000000;
    }

.modal-header .close {
    position: absolute;
    color: orangered;
    left: 0;
}

.modal {
    overflow-y: scroll;
}

    .modal:before {
        content: ' ';
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,0.5);
    }

.loaderDiv {
    background-image: url(../img/loader.gif);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    background-color: rgba(255,255,255,0.8);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10em;
}

.LoadEgh {
    background-image: url(../img/loader.gif);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    background-color: rgba(255,255,255,0.8);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10em;
}

.TicketList {
    border-right: 1px solid var(--TreeColor);
}

    .TicketList a {
        color: black;
        padding: 0.3em 0;
        display: block;
        margin: 0.1em 0;
        border-bottom: 1px solid var(--TreeColor);
        position: relative;
    }

        .TicketList a:hover {
            color: var(--TwoColor);
        }

    .TicketList span {
        position: absolute;
        left: 0;
        background-color: var(--TwoColor);
        border-radius: 50px;
        padding: 0 0.5em;
        width: 2em;
        text-align: center;
        color: white;
    }

.btn-success:hover {
    background-color: var(--OneColor);
    border-color: var(--OneColor);
}

.btn-secondary {
    background-color: #6c757d78;
    border-color: #6c757d38;
}

.EnamadLink {
    margin: auto;
    width: 100%;
    text-align: center;
}
/*
select {
    width: 300px !important;
}

    select option {
        width: 300px !important;
        overflow: hidden;
    }
*/

.AddsBox {
    position: relative;
    padding: 4em 0 4em 0;
}

    .AddsBox img {
        height: 100%;
        width: 100%;
    }

    .AddsBox h3 {
        text-align: center;
        color: var(--OneColor);
        margin-bottom: 1em;
    }

@media screen and (max-width: 900px) {
    .header a {
        padding: 0.5em !important;
        font-size: 0.8em;
    }

    .bg-warp-befor {
        border-width: 65px 40px 0 0 !important;
    }

    .bg-warp-after {
        border-width: 0 0 64px 40px !important;
    }

    .header .col-md-6 {
        padding: 0;
    }

    .NavTop li a {
        padding-top: 1.3rem !important;
        padding-bottom: 1.3rem !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .BasicDiv {
        flex: 100%;
    }

    .NavTopLogo-brand {
        font-size: 3em !important;
    }

    .d-Settings {
        padding: 2em 0 2em 0 !important;
    }

    .BasicDivContainer {
        width: 100% !important;
        max-width: 90% !important;
    }

    .d-Info {
    }

        .d-Info .col-md-6 {
            width: 100%;
            flex: 100%;
        }

    .d-Settings .col-md-3 {
        width: 50% !important;
        flex: 50% !important;
    }


    .AddsBox .col-md-3 {
        width: 26% !important;
        flex: 26% !important;
    }

    .AddsBox .col-md-6 {
        width: 48% !important;
        flex: 48% !important;
    }

    .d-blog {
        padding: 2em 0 2em 0 !important;
    }

    .DarkhastPaddTop {
        padding-top: 20em;
    }

    .BaseTop .col-md-6,
    .BaseTop .col-md-3 {
        width: 100% !important;
        flex: 100% !important;
        max-width: 100% !important;
    }

    .TopFaq .d-blog {
        max-height: 10em !important;
        overflow-y: scroll;
        padding: 0 !important;
    }

    .Slider {
        height: 15em !important; 
    }

    .SliderBox p {
        font-size: 1em !important;
    }
}

@media screen and (max-width: 600px) {
    .NoMobile,
    .bg-warp-befor,
    .bg-warp-after {
        display: none !important;
    }

    .AddsBox .col-md-3 {
        width: 100% !important;
        flex: 100% !important;
    }

    .AddsBox .col-md-6 {
        width: 100% !important;
        flex: 100% !important;
        margin-bottom: 1em;
        margin-top: 1em;
    }

    .d-Settings .col-md-3 {
        width: 100% !important;
        flex: 100% !important;
    }
}