:root {
    --primary-color: #017BFF;
    --bg-color: #f6f6f6;
    --bg-color2: #ffffff;
    --bg-color3: #dfdfdf;
    --font-color: #222;
    --hint-color: #888;
    --hint-color2: #666;
}

[data-theme="dark"] {}

@font-face {
    font-family: 'iran';
    src: url('fonts/iran.woff');
    font-weight: normal;
    font-style: normal
}

body {
    font-family: "iran";
    background-color: var(--bg-color);
    direction: rtl;
    text-align: right;
}

.service,
.image,
.plan,
.region {
    position: relative;
    text-align: center;
    background-color: var(--bg-color2);
    color: var(--primary-color);
    border-radius: 12px;
    padding: 40px 5px;
    font-size: 1.5em;
    font-weight: 500;
    box-shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 10%);
    cursor: pointer;
    transition: .3s;
}

.image {
    font-size: 1.1em;
    font-weight: 400;
    color: var(--font-color);
    padding: 20px 0 50px;
}

.region {
    font-size: .7em;
    color: var(--hint-color2);
    padding: 25px 0;
    text-align: left;
}

.region b {
    color: var(--font-color);
    font-size: 1.2em;
}

.plan {
    padding: 0;
    font-size: .9em;
    font-weight: 200;
    color: var(--font-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 23px;
}

.plan div:first-child {
    border-bottom: 1px solid var(--bg-color3);
    font-size: 1.2em;
    font-weight: 400;
}

.plan div {
    padding: 15px 10px;
}

.service:hover,
.image:hover,
.plan:hover {
    color: var(--bg-color2);
    background-color: var(--primary-color);
}

.service.act,
.image.act,
.plan.act,
.region.act {
    color: var(--bg-color2);
    background-color: var(--primary-color);
    border: 1px solid #8cbeff;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
}

.region.act b {
    color: var(--bg-color2);
}

.description {
    text-align: left;
    color: var(--hint-color);
    font-family: serif;
    font-size: .9em;
    padding: 13px 7px;
}

.selectBox {
    position: absolute;
    padding: 8px 24px;
    cursor: pointer;
    font-size: 13px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color2);
    color: var(--font-color);
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--bg-color3);
}

.selectBox__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.selectBox:after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: all 0.2s ease-in-out;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.001' height='8.165' viewBox='0 0 14.001 8.165'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23212121;%7D%3C/style%3E%3C/defs%3E%3Cpath class='a' d='M13.861,60.224l-.7-.7a.441.441,0,0,0-.645,0L7,65.036,1.487,59.522a.441.441,0,0,0-.645,0l-.7.7a.441.441,0,0,0,0,.645l6.537,6.538a.441.441,0,0,0,.645,0l6.538-6.538a.442.442,0,0,0,0-.645Z' transform='translate(0 -59.382)'/%3E%3C/svg%3E");
}

.selectBox .dropdown-menu {
    transition: all 0.5s ease-in-out;
    opacity: 0;
    display: block;
    top: 100%;
    width: 100%;
    padding: 0;
    max-height: 250px;
    z-index: -1;
    overflow-y: auto;
    transform: translateY(-15%);
    visibility: hidden;
}

.selectBox.show {
    background-color: #fff;
}

.selectBox.show:after {
    transform: translateY(-50%) rotate(180deg);
}

.selectBox.show .dropdown-menu {
    transition: all 0.3s ease-in-out;
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0);
}

password-validator i {
    color: red;
    font-size: 1.2em;
}

password-validator i.valid {
    color: green;
}

.hint {
    color: var(--hint-color);
}

nav {
    margin-bottom: 40px;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-block;
}

.menuli {
    color: var(--hint-color);
    padding: 10px 5px 4px;
    cursor: pointer;
    margin-left: 10px;
    border-bottom: 2px solid transparent;
}

.menuli:hover {
    color: var(--primary-color);
}

.menuli.act {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

nav .icon {
    font-size: 18px;
    border: 1px solid var(--hint-color2);
    padding: 0px 8px 3px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 3px;
    display: inline-block;
    color: var(--hint-color2);
    transition: .3s;
    background-color: var(--bg-color2);
    line-height: 24px;
}

nav .icon span {
    font-size: 13px;
}

nav .icon i {
    position: relative;
    top: 2px;
}

nav .icon:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.red {
    color: red;
}

.blue {
    color: #45A2C0
}

.green {
    color: #26912d
}

.yellow {
    color: rgb(226, 215, 2);
}

.pointer {
    cursor: pointer;
}

.notification {
    position: fixed;
    top: 80px;
    right: 20px;
    max-width: calc(100% - 40px);
    z-index: 10000
}

.notification>div {
    min-width: 200px;
    padding: 10px 12px 10px 25px;
    border-radius: 5px;
    position: relative;
    margin-bottom: 10px;
    display: none;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

.notification span {
    text-align: justify;
    line-height: 25px;
    display: block;
    font-size: .9em;
}

.notification .danger {
    background-color: #ffcdd2;
    color: #d32f2f;
    border: 1px solid #ef9a9a
}

.notification .warning {
    background-color: #fff59d;
    color: #ee770e;
    border: 1px solid #fdd835
}

.notification .info {
    background-color: #81d4fa;
    color: #01579b;
    border: 1px solid #4fc3f7
}

.notification .success {
    background-color: #a5d6a7;
    color: #1b5e20;
    border: 1px solid #81c784
}

.notification i {
    position: absolute;
    right: 4px;
    top: 10px;
    font-size: 1.5em
}

.notification .icofont-close {
    left: 0px;
    top: 0px;
    font-size: 1em;
    right: unset;
}

.notification .notif {
    font-size: .9em;
    padding: 7px 38px 7px 16px;
    margin-bottom: 15px;
}

.notification .notif .pic {
    background-image: url(img/noimg0.jpg);
    width: 50px;
    min-width: initial;
    height: 50px;
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0;
    position: absolute;
    border-radius: 50%;
    top: calc(50% - 25px);
    right: -12px;
}

.notif.warning .pic {
    border: 3px solid #fdd735;
}

.notif.success .pic {
    border: 3px solid #81c784;
}

.notif.danger .pic {
    border: 3px solid #ef9a9a;
}

.serverRow {
    background-color: var(--bg-color2);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid var(--bg-color3);
    box-shadow: 1px 2px 3px var(--bg-color3);
}

.serverRow i {
    font-size: 1.2em;
    margin-left: 5px;
}

.serverRow i.disable {
    opacity: .3;
}

.serverRow .progress {
    width: calc(100% - 110px);
    display: inline-block;
    float: right;
    right: 5px;
    height: 14px;
    position: relative;
    bottom: -5px;
    font-size: 9px;
    background-color: dimgray;
}

.curselect {
    position: relative;
    border-radius: 4px !important;
    border: 1px solid var(--bg-color3) !important
}

.curselect img {
    width: 28px;
    margin-right: 4px;
}

#qrcode img {
    margin: auto;
}

.osLogo {
    max-width: 50px;
    padding: 0 10px;
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

.spin {
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
    display: inline-block;
}

.loading {
    position: fixed;
    bottom: 90px;
    left: calc(50% - 30px);
    z-index: 10000;
}

.loading i {
    font-size: 60px;
    color: var(--primary-color);
}

.toggle {
    font-size: 40px;
    position: relative;
    top: 8px;
    cursor: pointer;
    margin-right: 5px;
}

.toggle.icofont-toggle-on {
    color: #26912d;
}

.toggle.icofont-toggle-off {
    color: #8b8b8b;
    opacity: .4s;
}

.price-list li {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    padding: 9px 0 8px 0;
    width: 30%;
    font-size: 13px;
    cursor: pointer;
}

.price-list {
    margin: 0;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 5px;
}

.mybox {
    background-color: var(--bg-color2);
    padding: 15px 25px;
    border-radius: 7px;
    border: 1px solid var(--bg-color3);
    box-shadow: 1px 2px 3px var(--bg-color3);
}

.t-small {
    font-size: .9em
}

.t-smaller {
    font-size: .8em
}

.t-smallest {
    font-size: .7em
}

.t-big {
    font-size: 1.1em
}

.t-bigger {
    font-size: 1.2em
}

.t-biggest {
    font-size: 1.3em
}

.t-verybig {
    font-size: 1.5em
}

#transactionList .row {
    border: 1px solid var(--bg-color3);
    border-radius: 30px;
    margin-bottom: 6px;
}

#transactionList .row:nth-child(odd) {
    border: 1px solid var(--bg-color3);
    background-color: var(--bg-color3);
}

.trth {
    background-color: var(--blue);
    color: white;
    padding: 5px 0;
    border-radius: 30px;
    margin-bottom: 8px;
}

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

@media all and (max-width: 991px) {
    #transactionList .row {
        border-radius: 3px;
        padding-bottom: 10px;
    }

    .trth {
        border-radius: 3px;
        padding-bottom: 10px;
    }
}

.form-control.is-valid,
.was-validated .form-control:valid {
    background-position: center left calc(0.375em + 0.1875rem);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-position: center left calc(0.375em + 0.1875rem);
}
.modal-header .close {
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem 0 !important;
}