:root{
    --primary: #ee1022;
    --primary-hover: #fe0018;
    --primary-glassy: #8c0d17;
    --primary-opacity-25: rgba(238, 16, 34, 0.25);
    --primary-opacity-50: rgba(238, 16, 34, 0.5);
    --primary-opacity-75: rgba(238, 16, 34, 0.75);

    --white: #fff;
    --black: #000;
    --dark: #121212;
    --semiblack: #2e2e2e;
    --gray: #c4c5c6;
    --light-gray: #dfdfdf;
    
    --secondary: #3c4550;
    --danger: #ee1022;
    --success: #0cc20c;
    --info: #0ab1fc;
    --warning: #e5b000;
    --border: #232b35;
    --border-focus: #3c4550;
    --secondary2: #29313c;
    --secondary3: #1a2128;

	--success-opacity-25: rgba(12, 194, 12, 0.25);
    --success-opacity-50: rgba(12, 194, 12, 0.5);
	--success-opacity-75: rgba(12, 194, 12, 0.75);
    --danger-opacity-25: rgba(238, 16, 34, 0.25);
	--danger-opacity-50: rgba(238, 16, 34, 0.5);
	--danger-opacity-75: rgba(238, 16, 34, 0.75);
}


body.theme-red {
    --primary: #ee1022;
    --primary-hover: #fe0018;
    --primary-glassy: #8c0d17;
    --primary-opacity-25: rgba(238, 16, 34, 0.25);
    --primary-opacity-50: rgba(238, 16, 34, 0.5);
    --primary-opacity-75: rgba(238, 16, 34, 0.75);
    --bg-default: url(../images/colors/red/bg-default.jpg);
    --bg-main: url(../images/colors/red/bg.jpg);
    --bg-login: url(../images/colors/red/bg-login.jpg);
    --footer-before: url(../images/colors/red/bg-footer.jpg);
    --bg-login-sm: url(../images/colors/red/bg-login-sm.jpg);
}
body.theme-orange {
    --primary: #ff5200;
    --primary-hover: #ff4800;
    --primary-glassy: #6b3b0b;
    --primary-opacity-25: rgba(255, 82, 0, 0.25);
    --primary-opacity-50: rgba(255, 82, 0, 0.5);
    --primary-opacity-75: rgba(255, 82, 0, 0.75);
    --bg-default: url(../images/colors/orange/bg-default.jpg);
    --bg-main: url(../images/colors/orange/bg.jpg);
    --bg-login: url(../images/colors/orange/bg-login.jpg);
    --footer-before: url(../images/colors/orange/bg-footer.jpg);
    --bg-login-sm: url(../images/colors/orange/bg-login-sm.jpg);
}
body.theme-purple {
    --primary: #a020f0;
    --primary-hover: #860dd1;
    --primary-glassy: #1d052c;
    --primary-opacity-25: rgba(160, 32, 240, 0.25);
    --primary-opacity-50: rgba(160, 32, 240, 0.5);
    --primary-opacity-75: rgba(160, 32, 240, 0.75);
    --bg-default: url(../images/colors/purple/bg-default.jpg);
    --bg-main: url(../images/colors/purple/bg.jpg);
    --bg-login: url(../images/colors/purple/bg-login.jpg);
    --footer-before: url(../images/colors/purple/bg-footer.jpg);
    --bg-login-sm: url(../images/colors/purple/bg-login-sm.jpg);
}
body.theme-blue {
    --primary: #00b9ff;
    --primary-hover: #008ec2;
    --primary-glassy: #1b4456;
    --primary-opacity-25: rgba(0, 185, 255, 0.25);
    --primary-opacity-50: rgba(0, 185, 255, 0.5);
    --primary-opacity-75: rgba(0, 185, 255, 0.75);
    --bg-default: url(../images/colors/blue/bg-default.jpg);
    --bg-main: url(../images/colors/blue/bg.jpg);
    --bg-login: url(../images/colors/blue/bg-login.jpg);
    --footer-before: url(../images/colors/blue/bg-footer.jpg);
    --bg-login-sm: url(../images/colors/blue/bg-login-sm.jpg);
}
  


@font-face {
	font-family: Rokh;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/rokh/woff/Rokh-Regular.woff') format('woff'),
	url('../fonts/rokh/woff2/Rokh-Regular.woff2') format('woff2');
}
@font-face {
	font-family: Rokh;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/rokh/woff/Rokh-Medium.woff') format('woff'),
	url('../fonts/rokh/woff2/Rokh-Medium.woff2') format('woff2');
}
@font-face {
	font-family: Rokh;
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/rokh/woff/Rokh-SemiBold.woff') format('woff'),
	url('../fonts/rokh/woff2/Rokh-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: Rokh;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/rokh/woff/Rokh-Bold.woff') format('woff'),
	url('../fonts/rokh/woff2/Rokh-Bold.woff2') format('woff2');
}

@font-face {
	font-family: RokhFa;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/rokh-fa/woff/RokhFaNum-Regular.woff') format('woff'),
	url('../fonts/rokh-fa/woff2/RokhFaNum-Regular.woff2') format('woff2');
}
@font-face {
	font-family: RokhFa;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/rokh-fa/woff/RokhFaNum-Medium.woff') format('woff'),
	url('../fonts/rokh-fa/woff2/RokhFaNum-Medium.woff2') format('woff2');
}
@font-face {
	font-family: RokhFa;
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/rokh-fa/woff/RokhFaNum-SemiBold.woff') format('woff'),
	url('../fonts/rokh-fa/woff2/RokhFaNum-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: RokhFa;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/rokh-fa/woff/RokhFaNum-Bold.woff') format('woff'),
	url('../fonts/rokh-fa/woff2/RokhFaNum-Bold.woff2') format('woff2');
}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: normal; /* 200 */
	src: url('../fonts/lato/Lato-Light.woff') format('woff');
}

/*-------------------------- General Start ------------------------*/
body{
    font-family: RokhFa, Rokh, Tahoma;
    font-size: 14px;
    text-align: justify;
    color: var(--white);
    background: var(--black);
    line-height: 30px;
    overflow-x: hidden;
}
body.bg-default{
    background: var(--black) var(--bg-default) center top no-repeat;
}
body.bg-main{
    background: var(--black) var(--bg-main) center top no-repeat;
}
body.bg-login{
    background: var(--black) var(--bg-login) center top no-repeat;
    background-size: cover;
}
a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    color: #efefef;
}
a:hover, a:focus, a:active{
    text-decoration: none;
    outline: none;
    color: var(--white);
}
p, .p {
    font-size: 15px;
}
::-moz-selection {
    color:  rgba(0, 0, 0, 0.9);
    background: rgba(255, 255, 255, 0.9);
}
::selection {
    color:  rgba(0, 0, 0, 0.9);
    background: rgba(255, 255, 255, 0.9);
}
.rtl{direction: rtl !important}
.ltr{direction: ltr !important}
.left{float: left !important}
.right{float: right !important}
h1, h2, h3, h4, h5, h6{
    margin: 5px auto;
    letter-spacing: normal;
    font-family: RokhFa;
}
h1, .h1{font: 13pt RokhFa}
h2, .h2{font: 11.5pt RokhFa}
h3, .h3{font: 11.5pt RokhFa}
h4, h5, .h4, .h5{font: 11pt RokhFa}
h6, .h6{font: 9pt RokhFa}
.en-numbers{font-family: Rokh}
.tahoma{font-family: tahoma, Lato !important}
.lato{font-family: Lato !important}
p, ol, ul{margin-bottom:0}
i{vertical-align: middle}

button, optgroup, textarea, input, select, .card .card-body{
    font-family: RokhFa;
    font-size: 14px;
}
ul, ol{
    list-style:none;
    padding-right: 0;
    padding-left: 0;
}
ul li{padding-right: 0}
.img-center{
    display: block;
    margin: 0 auto;
    text-align: center;
}
.img-float{
    float: right;
    margin: 10px 0 10px 10px;
}

.m-0{margin:0 !important}
.m-5{margin:5px !important}
.m-10{margin:10px !important}
.m-15{margin:15px !important}
.m-20{margin:20px !important}
.m-25{margin:25px !important}
.m-30{margin:30px !important}
.m-t-0{margin-top:0 !important}
.m-t-5{margin-top:5px !important}
.m-t-10{margin-top:10px !important}
.m-t-15{margin-top:15px !important}
.m-t-20{margin-top:20px !important}
.m-t-25{margin-top:25px !important}
.m-t-30{margin-top:30px !important}
.m-t-40{margin-top:40px !important}
.m-t-50{margin-top:50px !important}
.m-t-60{margin-top:60px !important}
.m-t-75{margin-top:75px !important}
.m-t-100{margin-top:100px !important}
.m-b-0{margin-bottom:0 !important}
.m-b-5{margin-bottom:5px !important}
.m-b-10{margin-bottom:10px !important}
.m-b-15{margin-bottom:15px !important}
.m-b-20{margin-bottom:20px !important}
.m-b-25{margin-bottom:25px !important}
.m-b-30{margin-bottom:30px !important}
.m-b-40{margin-bottom:40px !important}
.m-b-50{margin-bottom:50px !important}
.m-b-60{margin-bottom:60px !important}
.m-b-75{margin-bottom:75px !important}
.m-b-100{margin-bottom:100px !important}

.p-0{padding:0 !important}
.p-5{padding:5px !important}
.p-0{padding:0 !important}
.p-10{padding:10px !important}
.p-15{padding:15px !important}
.p-20{padding:20px !important}
.p-25{padding:25px !important}
.p-30{padding:30px !important}
.p-t-10{padding-top:10px !important}
.p-t-15{padding-top:15px !important}
.p-t-20{padding-top:20px !important}
.p-t-25{padding-top:25px !important}
.p-t-30{padding-top:30px !important}
.p-t-40{padding-top:40px !important}
.p-t-50{padding-top:50px !important}
.p-t-60{padding-top:60px !important}
.p-t-75{padding-top:75px !important}
.p-t-100{padding-top:100px !important}
.p-b-0{padding-bottom:0 !important}
.p-b-10{padding-bottom:10px !important}
.p-b-15{padding-bottom:15px !important}
.p-b-20{padding-bottom:20px !important}
.p-b-25{padding-bottom:25px !important}
.p-b-30{padding-bottom:30px !important}
.p-b-40{padding-bottom:40px !important}
.p-b-50{padding-bottom:50px !important}
.p-b-60{padding-bottom:60px !important}
.p-b-75{padding-bottom:75px !important}
.p-b-100{padding-bottom:100px !important}


.font-xs{font-size: 8pt}
.font-sm{font-size: 10pt}
.font-lg{font-size: 14pt}
.font-xl{font-size: 16pt}
.font-xxl{font-size: 18pt}
.font-3xl{font-size: 24pt}
.font-4xl{font-size: 36pt}
.font-5xl{font-size: 48pt}

.font-en{
    font-family: Rokh;
}
.small, small{font-size: 75%}

.ellipsis {
    word-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bordered{border: 1px solid var(--border)}
.borderless{border: none !important}
.curve{border-radius: 8px}
.form-group input.round, .round{border-radius: 25px}
.checkbox label{padding: 0}
.radio label{padding-right: 25px}
hr {border-top: 1px solid var(--border-focus)}

body.modal-open{padding-right: 0 !important}
.modal{direction: ltr}
.modal *{direction: rtl}
.inline-block{display: inline-block !important}
.block{display: block !important}
.relative{position: relative !important;}
.overhide{overflow: hidden}
.fluid{
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}

.form-control{
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    border-bottom: 2px solid var(--border);
    height: 38px;
    padding: 7px;
}
.form-control:focus {
    border-bottom-color: var(--border-focus);
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--dark);
}
.bordered-input .form-control:disabled, .bordered-input .form-control[readonly] {
    background-color: transparent;
    color: var(--bs-gray-500);
}
input.form-control.has-border, textarea.form-control.has-border{
    border: 1px solid var(--border);
}
input.form-control.has-border:focus, textarea.form-control.has-border:focus{
    border: 1px solid var(--border-focus) !important;
    color: var(--white);
}
.form-control, .btn, .btn:focus, .btn:active, .btn:hover{
    outline: 0 !important;
}
.btn{
    line-height: 28px;
    font-size: 14px;
    color: #fff !important;
    border-radius: 25px;
    transition: all 0.25s ease;
}
.btn:not(.btn[class*='btn-outline-']){
    border: none;
}
.btn[class*='btn-outline-']{
    color: #fff !important;
}
.btn, .btn:focus, .btn:active, .btn:hover{
    box-shadow: none;
    -webkit-box-shadow: none;
}
.btn, .navbar .navbar-nav > li > a.btn{
    padding: 6px 30px;
}

.btn.border{
    border: double medium;
}
.btn-round{
    border-radius: 50px !important;
}
.btn-curve{
    border-radius: 8px !important;
}

.btn-default.btn-border{
    border: 1px solid var(--border);
    background: var(--white);
}
.btn.btn-icon{
    width: 32px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    border-radius: 25px;
    padding: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.btn.btn-sm.btn-icon{
    width: 26px;
    height: 26px;
    line-height: 28px;
}
.btn-transparent{
    background: transparent;
    border: none;
}
.btn-outline-primary{
    border-color: var(--primary);
}
.btn-outline-primary:hover{
    border-color: var(--primary-hover);
}

.text-primary{color:var(--primary) !important}
.text-danger{color:var(--primary)}
.text-success{color:var(--success)}
.text-gray{color: var(--gray)}
.text-info{color: #019add}
.text-warning{color: #e5b000}
.text-white{color:#f1f1f1}
.text-inverse{color:#333}

.parallax{
    background-attachment: fixed;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
i{display: inline-block}
a.btn i {
    font-size: 18px;
    line-height: 20px;
}
th{font-weight: normal}

.table-box{
    display: table;
}
.cell-box{
    display: inline-block;
}
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child){
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.tooltip-inner{
    font-family: RokhFa;
}

.modal-content {
    background: var(--black);
    border: 3px solid var(--border);
    box-shadow: none !important;
}
.modal-title{
    font-weight: bold;
    color: var(--white);
    font-size: 16px;
}
.full-modal{
    padding: 0 !important;
    background: rgba(0,0,0,0.8);
}
.modal-backdrop{
    background: rgba(0,0,0,0.8);
}
.full-modal .modal-content{
    border-radius: 0;
    border: none;
}
.full-modal .modal-dialog{
    width: 90%;
    height: 100%;
    margin: auto;
    padding: 0 !important;
}
.full-modal .modal-content{
    min-height: 98%;
}
.full-modal.modal .close {
    font-size: 36px;
    outline: none !important;
}
.full-modal .input-group input.form-control{
    height: 40px;
}

.breadcrumb {
    padding: 4px 15px;
    margin: 20px 0;
    list-style: none;
    border-radius: 5px;
    border: 1px solid var(--border);
}
.breadcrumb>.active {
    color: var(--gray);
}
.breadcrumb i{
    font-size: 22px;
    line-height: 22px;
}
.breadcrumb>li+li:before {
    content: "/";
    padding: 5px 6px 0 6px;
    line-height: 30px;
}
ul.pagination {
    display: block;
    text-align: center;
    margin: 10px 0;
}
ul.pagination li{
    display: inline-block;
    margin: 1px 5px;
    min-width: 36px;
    height: 36px;
    text-align: center;
}
.pagination > li > a, .pagination > li > span {
    padding: 0;
    display: block;
    height: 100%;
    min-width: 36px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    display: block;
    background: var(--secondary3);
    color: var(--white);
    border-radius: 25px;
}
.pagination > li.active > a{
    background: var(--primary);
}
.pagination > li > a i{
    font-size: 16px;
    transform: translateY(-1px);
}
.pagination > li > a:hover{
    background: var(--secondary2);
}

.input-group-addon{
    border: 1px solid #ccc;
}
.input-group-addon:last-child {border: none}
.input-group-addon:first-child {border: none}

.input-group.curve .input-group-btn {
    padding: 0;
}
.form-group .input-group .form-control {
    margin-bottom: 0;
    height: 40px;
}
.input-group-addon i{
    min-height: 16px;
    vertical-align: middle;
}

.form-group{
    margin-bottom: 25px;
}
.form-group.curve .form-control{border-radius:4px}

.input-group.round .form-control:last-child, .input-group.round .input-group-addon:last-child, .input-group.round .input-group-btn:last-child>.btn, .input-group.round .input-group-btn:last-child>.dropdown-toggle, .input-group.round .input-group-btn:first-child>.btn:not(:first-child) {
    border-radius: 25px 0 0 25px;
}
.input-group.round .form-control:first-child, .input-group.round .input-group-addon:first-child, .input-group.round .input-group-btn:first-child>.btn, .input-group.round .input-group-btn:first-child>.dropdown-toggle, .input-group.round .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0 25px  25px 0;
}
.form-group.round .form-control{border-radius:25px}
.form-control, .form-group .form-control {
    border-radius: 4px;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 600;
    border: none;
    background: transparent;
}
.form-control:focus, .form-group .form-control:focus, .quantity input:focus {
    border: none;
    background: transparent;
}
.form-group input[type=file]{
    opacity: 1 !important;
    position: relative !important;
}
.input-group.is-focused{
    border-bottom-color: var(--border-focus);
}
.input-group .input-group-addon {
    padding: 4px 5px;
}
.form-group .checkbox label, .form-group .radio label, .form-group label{
    color: #fff;
}

.form-check-input{
    background: transparent;
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:after{
    color: var(--white);
    font-size: 0.8rem;
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"], .form-check:not(.form-switch) .form-check-input[type="radio"]{
    border-color: var(--semiblack);
}
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked, .form-check:not(.form-switch) .form-check-input[type="radio"]:checked ,
.form-group:not(.has-error) .input-group.is-focused .input-group-addon:first-child {
    border-color: var(--gray);
    background-color: var(--black);
}

.like-table{
    display: table;
    width: 100%;
}
.like-tablecell{display: table-cell}
.curve{border-radius: 8px}
.bold{ font-weight: bold}
.bg-white{background: var(--white)}
.bg-dark{background-color: var(--dark) !important}
.bg-primary {background-color: var(--primary) !important}
.bg-secondary {background-color: var(--secondary) !important}
.bg-danger {background-color: var(--danger) !important}
.bg-success {background-color: var(--success) !important}
.bg-info {background-color: var(--info) !important}
.bg-secondary2{background-color: var(--secondary2) !important}

.btn-secondary {
    background-color: var(--secondary);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active{
    background-color: var(--secondary2);
}
.alert-success{
    background: var(--success);
}

/* webkit solution */
::-webkit-input-placeholder { text-align:right; direction: rtl;}
/* mozilla solution */
input:-moz-placeholder, input::-moz-placeholder { text-align:right; direction: rtl;}

.main img {
    max-width: 100%;
}
.serial{
    overflow-wrap: break-word;
    direction: ltr;
}
.serial pre{
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 20px;
}
.standard-cards{
    margin-bottom: 40px;
    background: var(--secondary3);
    border-radius: 15px;
    padding: 30px 10px 10px;
}
.my-card.standard-cards{
    border-radius: 27px;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 30px;
}
.standard-cards .serial, .card-other-information{
    position: relative;
    min-height: 40px;
    background: transparent;
    padding: 5px 55px 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--border);
}
.card-other-information{
	margin-top:20px;
	padding: 10px;
}
.standard-cards .title{
    margin-top: 15px;
}
.standard-cards .serial .btn{
    position: absolute;
    top: 1px;
    right: 1px;
    margin: auto 0;
    padding: 5px 5px;
    width: 50px;
    height: 50px;
    max-height: calc(100% - 2px);
    border-radius: 3px;
    background-color: var(--primary);
}
.hide{
    display: none;
}

#navbar-main ul > li{
    padding-right: 10px;
    padding-left: 10px;
}
ul.dropdown-menu li a{
    border-radius: 5px;
}
.show .dropdown-menu, .show .sub-dropdown-submenu {
    animation: show-dropdown .2s ease forwards !important;
}
input[name="captcha"]{
    height: 34px;
    line-height: 34px;
}
.pay-box input[name="captcha"]{
    margin-bottom: 10px;
    max-width: calc(100% - 10px)
}

.table{
    border-color: var(--border);
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
}
.table> :not(:last-child)> :last-child>* {
    border-bottom-color: var(--border);
}
.table-hover>tbody>tr:hover {
    --bs-table-accent-bg: var(--secondary3);
    color: var(--white);
}
.table tbody tr:last-child td {
    border-width: 0 1px;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}

.nav-tabs .nav-link {
    color: var(--white);
}
img{
    max-width: 100%;
}
.btn .icon-arrow-right{
    margin-left: 4px;
}

.icon-home-color .path1:before, .icon-bell-color .path1:before{
    color: var(--primary);
}
.dropdown-menu{
    background: var(--dark);
}
.dropdown .dropdown-menu:before{
    color: var(--dark);
}
.dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu{
    padding: 8px 16px;
}
.dropdown.dropdown-hover:hover>.dropdown-menu:before, .dropdown .dropdown-menu.show:before {
    top: -16px;
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--primary);
    background-color: transparent;
}
.modal .panel-body, .modal .panel-body p{
    font-weight: 500;
    font-size: 15px;
}
.modal .panel-title a{
    display: block;
    padding: 15px;
    font-weight: bold;
    font-size: 15px;
}
.modal .panel{
    margin-bottom: 20px;
}
.tab-content{
    outline: none;
}
.img-thumbnail {
    background-color: var(--secondary3);
    border: 1px solid var(--border);
}
/*--------------------------- General End -------------------------*/



/*-------------------------- Pages Start --------------------------*/
.general-info{
    background: var(--secondary3);
    border-radius: 15px;
}
.general-info, .card-row{
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
}
.panel{
    border-radius: 8px;
}
.panel-heading {
    border-radius: 8px;
}
.panel-collapse > .faq-answer{
    padding: 0 25px 15px 25px;
    margin-bottom: 10px;
    color: var(--white);
    line-height: 30px;
}
.panel-collapse > .faq-answer p{
    line-height: 30px !important;
}
.panel > .panel-heading, .panel.panel-default > .panel-heading {
    background-color: var(--secondary3);
}
.accordion-faq .panel-heading{
    position: relative;
}
.accordion-faq .panel-title{
    position: relative;
    z-index: 2;
    padding-left: 7px;
}
.accordion-faq .card-header {
    padding: 0;
}
.accordion-faq .card-header .card-title{
    margin: 0;
}
.accordion-faq .card-header a{
    display: block;
    font-weight: bold;
    color: var(--white);
    padding: 1.5rem 1.5rem 1.5rem 2rem;
}
.accordion-faq .card-header .icon{
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 1;
}
.accordion-faq .card-header i.fa.fa-question{
    color: #aaa;
}
.card .card-header{
    background: transparent;
}
.side-texts{
    padding-right: 15px;
}
.side-texts, .side-texts h2{
    color: var(--white);
}
.my-card img{
    width: 80px;
    height: auto;
    border-radius: 4px;
}
.caption h1, .caption h2{
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--white);
}
.caption h1 i, .caption h2 i{
    margin-left: 5px;
}
.btn.btn-copy{
    font-size: 12px;
}
.btn.btn-copy i{
    font-size: 14px;
}
.btn.btn-copy i.fa-check, .btn.btn-copy i.fa-copy.lg {
    font-size: 18px;
}
.nav-tabs.nav-pay .nav-link {
    width: 100px;
}
.nav-tabs>li>a:focus, .nav-tabs>li>a:active{
    outline: none;
}

.charge-page .pay-box .half-box{
    background: var(--secondary3);
}

.transaction-badges .badge{
    padding: 10px 10px 8px 10px;
}
.contact-info i{
    margin-right: 6px;
}
.contact-info p i{
    margin-left: 6px;
}
.contact-info span.fa-at{
    margin: 0 1px;
    vertical-align: middle;
}
body img, body video{
    max-width: 100%;
    height: auto !important;
}
.maybe-long{
    white-space: wrap;
    word-break: break-word;
}
/*--------------------------- Pages End ---------------------------*/



/*------------------------- Material Start ------------------------*/
.navbar{
    padding: 0;
    margin: 0;
}
.navbar ul.nav{
    margin-top: 5px;
}
.navbar .navbar-nav > li > a{
    height: 82px;
    font-size: 15px;
    color: var(--white);
    position: relative;
}
.navbar .navbar-nav > li > a.active:before{
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: -3px;
    height: 3px;
    width: 21px;
    margin: 0 auto;
    z-index: 2;
    background: var(--primary);
}
.checkbox .checkbox-material .check:before {
    margin-left: auto;
    margin-right: 10px;
}
.checkbox input[type=checkbox]:checked + .checkbox-material .check {
    background: var(--secondary);
}
.checkbox label, .radio label, label{
    color: var(--white);
}
.checkbox .checkbox-material:before{
    display: none;
}
.checkbox .checkbox-material{
    padding-right: 0;
}
label.form-check-label {
    display: inline;
    padding-right: 5px;
}
.radio label span {
    right: 2px;
    top: 0;
    left: inherit;
}
.label {
    border-radius: 25px;
}

.dropdown-menu>li>a{
    color: var(--white);
}
textarea.form-control{
    height: auto !important;
}

.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
    color: var(--danger);
    text-shadow: 0 0 1px var(--primary);
}
.form-group.is-focused.has-error .form-control,.form-group.has-error .form-control, 
.form-group.has-error .select2-container--default .select2-selection--single {
    border: 1px solid var(--danger) !important;
}
.form-group.is-focused.has-error .input-group-dynamic .form-control, .form-group.has-error .input-group-dynamic .form-control{
    border: none !important;
}

.checkbox .help-block,
.form-group .help-block {
    display: none;
    font-size: 12px;
    position: relative;
}
.checkbox.has-error .help-block, .form-group.has-error .help-block {
    position: inherit;
    display: block;
    padding-top: 5px;
}
.has-error .input-group-addon {
    color: var(--danger);
    border-color: var(--danger);
}
.help-block p, .help-block{
    font-size: 12px !important;
    line-height: 20px;
    font-weight: 600;
}

.modal .modal-header{
    border-bottom: 3px solid var(--border);
    flex-direction: row-reverse;
    gap: 10px;
}
.modal .modal-footer{
    border-top: none;
}
.modal .modal-header .close{
    border-radius: 8px;
    border: none;
    color: var(--gray);
    height: 36px;
    width: 36px;
    line-height: 40px;
    font-size: 28px;
    background: var(--primary);
    color: var(--white);
    font-weight: bold;
    text-align: center;
    transition: all 0.4s ease;
}
.modal .modal-header .close:hover, .modal .modal-header .close:focus {
    background: var(--primary-hover);
    color: var(--white);
}
.alert, .alert p{
    font-weight: 600;
}
.alert.alert-danger, .alert.alert-success, .alert.alert-info, .alert h2, .alert h3{
    color: var(--white);
}
.alert.alert-info {
    background: var(--info);
}
.alert.alert-danger{
    background: var(--danger);
}
.card{
    background: var(--secondary3);
}

.dropdown-toggle::after{
    display: none;
}

.form-check-input {
    width: 1.5em;
    height: 1.5em;
}

.rtl .form-group:not(.has-error) .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
    margin-right: 0;
}
.rtl .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n + 3), .rtl .input-group:not(.has-validation)> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.rtl .input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group.curve .form-control:last-child, .input-group.curve .input-group-addon:last-child, .input-group.curve .input-group-btn:last-child>.btn, .input-group.curve .input-group-btn:last-child>.dropdown-toggle, .input-group.curve .input-group-btn:first-child>.btn:not(:first-child) {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group.curve .form-control:first-child, .input-group.curve .input-group-addon:first-child, .input-group.curve .input-group-btn:first-child>.btn, .input-group.curve .input-group-btn:first-child>.dropdown-toggle, .input-group.curve .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bg-cover {
    background-position: center;
}
.input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child) {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
select.form-select{
    background-color: var(--secondary3);
    background-position: 10px 15px;
    border: 1px solid var(--border);
}
select.form-select:focus{
    border-color: var(--border-focus);
}
.input-group.has-select{
    position: relative;
}
.input-group.has-select:before{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 16px;
    height: 12px;
    z-index: 2;
}
.has-select.input-group.input-group-dynamic select.form-control{
    position: relative;
    z-index: 1;
    background-color: var(--secondary3) !important;
}
.has-select.input-group.input-group-dynamic label,
.has-select.input-group.input-group-dynamic.has-icon i{
    z-index: 2;
}
.input-group-dynamic textarea.form-control{
    margin-top: 15px;
}

input:-webkit-autofill, input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 50px #0b0e12 inset; /* Change the color to your own background color */
	-webkit-text-fill-color: rgb(175, 175, 175) !important;
}
.input-group-dynamic input:-webkit-autofill, .input-group-dynamic input:-webkit-autofill:focus {
	margin-top: 9px !important;
    height: 25px !important;
}
.boxed input:-webkit-autofill, .boxed input:-webkit-autofill:focus, .boxed input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 20px var(--black) inset;
	border-radius: 0 !important;
}
input.form-control, textarea.form-control, select.form-control{
    color: var(--white);
    font-size: 16px;
    font-family: Rokh;
}
.input-group .form-label, .input-group .form-control:focus{
    color: var(--white);
}
.input-group.input-group-dynamic .form-control, .input-group.input-group-dynamic .form-control:focus, .input-group.input-group-static .form-control, .input-group.input-group-static .form-control:focus {
    background-image: linear-gradient(0deg, #fff 2px, rgba(0, 0, 0, 0) 0), linear-gradient(0deg, var(--border) 2px, transparent 0);
}
.has-error .input-group.input-group-dynamic .form-control, .has-error .input-group.input-group-dynamic .form-control:focus, .has-error .input-group.input-group-static .form-control, .has-error .input-group.input-group-static .form-control:focus {
    background-image: linear-gradient(0deg, #fff 2px, rgba(0, 0, 0, 0) 0), linear-gradient(0deg, var(--danger) 2px, transparent 0);
}
.input-group.input-group-dynamic.is-focused label, .input-group.input-group-static.is-focused label{
    color: var(--white);
}
.input-group .form-label {
    top: 5px;
}

.input-group.input-group-dynamic.is-filled.is-focused .form-label, .input-group.input-group-dynamic.is-filled .form-label, .input-group.input-group-static.is-filled.is-focused .form-label, .input-group.input-group-static.is-filled .form-label,
.input-group.input-group-dynamic.is-focused .form-label, .input-group.input-group-static.is-focused .form-label {
    top: -12px;
}
.input-group.input-group-dynamic.fix-label .form-label{
    top: -10px;
}
.input-group.input-group-dynamic.has-icon.fix-label i{
    top: -5px !important;
}
/*-------------------------- Material End -------------------------*/



/*------------------- Loading & Animations Start ------------------*/
@keyframes show-navbar-collapse {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes hide-navbar-collapse {
    from {
        opacity: 1;
        transform: scale(1);
        transform-origin: 100% 0;
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

@keyframes show-dropdown {
    0% {
        opacity: 0;
        transform-origin: perspective(200px) rotateX(-2deg);
        transition: visibility 0.45s, opacity .5s;
    }

    100% {
        opacity: 1;
    }
}
@keyframes hide-dropdown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(0, 10px);
    }
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
@-webkit-keyframes spin { from {transform: rotate(0deg);}to {transform: rotate(360deg);}}

@-webkit-keyframes fadeIn{0%{opacity:0};50%{opacity:1}}@keyframes fadeIn{0%{opacity:0}50%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeOut{0%{opacity:1};50%,to{opacity:0}}@keyframes fadeOut{0%{opacity:1}50%,to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}

@-webkit-keyframes zoomInTiny{0%{opacity:0;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}50%{opacity:1}}@keyframes zoomInTiny{0%{opacity:0;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}50%{opacity:1}}.zoomInTiny{-webkit-animation-name:zoomInTiny;animation-name:zoomInTiny}
@-webkit-keyframes zoomOutTiny{0%{opacity:1}50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.01,1.01,1.01)}50%,to{opacity:0}}@keyframes zoomOutTiny{0%{opacity:1}50%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.01,1.01,1.01)}50%,to{opacity:0}}.zoomOutTiny{-webkit-animation-name:zoomOutTiny;animation-name:zoomOutTiny}
@-webkit-keyframes wave{0%{transform: translateY(0)} 50%{transform: translateY(-10px)} 100%{transform: translateY(0)}} @keyframes wave{0%{transform: translateY(0)}50%{transform: translateY(-10px)} 100%{transform: translateY(0)}}
/*-------------------- Loading & Animations End -------------------*/



/*-------------------------- Header Start -------------------------*/
.topest{
    display: flex;
    margin: 15px 25px 0 25px;
}
.slogan{
    margin-left: auto;
    display: flex;
    gap: 15px;
    align-items: center;
}
.right-wrapper h1, .right-wrapper h2{
    color: var(--white);
    font-size: 24px;
    font-weight: 700;
}
.left-wrapper h2{
    margin: 0;
    line-height: 16px;
}
.left-wrapper .persian{
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}
.slogan .english{
    font-family: Lato;
    font-size: 11.4px;
    font-weight: lighter;
    color: var(--white);
    text-transform: uppercase;
}
.topest ul.socials{
    margin-right: auto;
}

.double-head{
    position: relative;
    background: var(--black);
    width: 100%;
    border-radius: 30px;
    top: -6px;
}
.double-head:before{
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    border-radius: 33px;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(41,41,41,0) 0%,rgba(41,41,41, 0) 40%, rgba(41,41,41,1) 100%);
}
.skew-bar{
    border-radius: 30px 10px 30px 10px;
    width: 100%;
    height: 110px;
    padding-top: 28px;
    display: flex;
    gap: 10px;
    position: relative;
}
.skew-bar:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    opacity: 0.6;
    background-image: url(../images/header/menu-full.svg);
    background-size: 100% 100%;
}
.skew-bar > div:first-child, .skew-bar > div:last-child{
    width: calc(50% - 54px);
    height: calc(100% - 3px);
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}
.skew-bar > div:first-child{
    padding-right: 30px;
}
.skew-bar > div:last-child{
    padding-left: 30px;
}
.skew-bar .logo-wrapper{
    position: relative;
    top: 0;
    z-index: 1;
    width: 108px;
    text-align: center;
}
.notifications{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: bold;
}
.notifications .caption{
    font-weight: bold;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.notifications .caption .icon-bell-color{
    position: relative;
    font-size: 20px;
}
.notifications .caption.active .icon-bell-color:before{
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: var(--white);
    box-shadow: 0 0 5px 1px var(--white);
}
.notifications .items{
    height: 100%;
    width: 100%;
}
.notifications .items.single{
    display: flex;
    align-items: center;
}
.notifications ul{
    right: 0;
    left: 0;
}
.notifications ul li{
    list-style: none;
    padding: 0;
    cursor: pointer;
    height: 30px;
    word-wrap: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-wrapper img{
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.dropdown.btn-user{
    display: flex;
    margin-right: auto;

}
.dropdown.btn-user a.dropdown-toggle{
    font-weight: 600;
    height: 48px;
}
.dropdown.btn-user i.fa-angle-down{
    padding-top: 3px;
}

.specific-icon{
    position: relative;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
}
.specific-icon i{
    position: relative;
    z-index: 2;
    color: var(--white);
    font-size: 20px;
}
.specific-icon:before, .specific-icon:after{
    content: "";
    position: absolute;
    display: inline-block;
}
.specific-icon:before{
    width:100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    border-radius: 11px 6px 11px 11px;
    transform: rotate(45deg);
    background: var(--primary);
    box-shadow: -2px 2px 10px -2px var(--primary);
}
.specific-icon:after{
    top: 1px;
    right: -3px;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background: var(--black);
    z-index: 0;
    border-radius: 10px 4px 10px 50px;
    transform: rotate(45deg) skew(-5deg, -5deg);
    box-shadow: 1px -1px 10px -2px var(--primary);
}
a.not-login{
    display: flex;
    align-items: center;
    color: var(--white);
}
a.not-login {
    display: flex;
    align-items: center;
    color: var(--white);
}
.not-login-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 20px;
}
.btn-user .specific-icon{
    margin-left: 20px;
}
.welcome-message{
    font-size: 12px;
    font-weight: bold;
}
.btn-user .signin{
    font-size: 16px;
    font-weight: bold;
}
#navbar_global .icon-home-color{
    font-size: 22px;
}
.navbar a.dropdown-item{
    font-weight: bold;
}
.dropdown-item {
    padding: 30px 16px;
}
.navbar a.dropdown-item:hover, .navbar a.dropdown-item:focus{
    background-color: transparent;
    color: var(--primary);
}
.navbar .navbar-nav > li > a.dropdown-item:hover, .navbar .navbar-nav > li > a.dropdown-item:focus{
    background-color: transparent;
    color: var(--primary);
}
.dropdown-menu[data-bs-popper] {
    margin-top: 0;
}
#navbar_global .dropdown-menu {
    border-radius: 0.375rem;
    right: 0;
    left: inherit;
}
#navbar_global li li .dropdown-menu {
    right: 100%;
    top: -8px;
}
.dropdown-submenu .fa-angle-down.nav-link-arrow{
    margin-right: 5px;
    position: relative;
    top: 4px;
    text-align: center;
    width: 16px;
}
.dropdown-submenu .fa-angle-down.nav-link-arrow:before{
    color: var(--primary);
    font-size: 18px !important;
}
.dropdown-submenu .fa-angle-down.nav-link-arrow:after{
    content: "\f107";
    position: absolute;
    font-size: 13px;
    font-weight: 600;
    top: -3px;
    right: 0;
    left: 0;
    margin: 0 auto;
    color: var(--semiblack);
}

.dropdown-menu li > a {
    padding: 8px 12px 8px 20px;
    text-align: right;
}
.navbar.navbar-main ul.navbar-nav li.dropdown-submenu{
    position: relative;
}
#navbar-main .btn-user .nav-link{
    transition-duration: 0s !important;
}
.user-section ul.dropdown-menu li a{
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
}
.user-section ul.dropdown-menu li a i{
    margin-left: 5px;
}
.user-section a.unread-tickets{
    position: absolute;
    z-index: 9;
    display: block;
    width: 30px;
    height: 30px;
    right: -10px;
    top: -10px;
    
}
.navbar-toggler .navbar-toggler-icon .navbar-toggler-bar{
    background: var(--white);
}
/*--------------------------- Header End --------------------------*/



/*------------------------- Carousels Start ------------------------*/
.main-carousel-box, #owl-main{
    height: 450px;
}
.main-carousel-box{
    position: relative;
}
.owl-carousel .owl-item img{
    width: auto;
    max-width: 100%;
}
.slider-slogan{
    position: absolute;
    left: 0;
    top: 30%;
    z-index: 1;
}
.slider-slogan img{
    position: absolute;
    margin: 0 auto;
    right: 0;
    left: 0;
}
.slider-slogan .logo{
    width: 266px;
    z-index: 0;
    top: 0;
}
.slider-slogan .slogan{
    width: 448px;
    height: 84px;
    z-index: 1;
    top: 45%;
}
.slider-slogan .texts{
    position: relative;
    z-index: 3;
    width: 448px;
    height: 223px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.slider-slogan h2{
    margin: 0;
    text-align: center;
}
.slider-slogan h2.persian{
    font-size: 32px;
    font-weight: bold;
    color: var(--primary);
    line-height: 45px;
}
.slider-slogan h2.english{
    font-size: 23px;
    font-family: Lato;
    font-weight: lighter;
    color: var(--white);
    text-transform: uppercase;
}
#owl-main{
    position: relative;
    z-index: 0;
}
#owl-main .img-box{
    margin-right: 75px;
}
#owl-main .owl-dots {
    position: absolute;
    margin: auto;
    top: calc(50% - 60px);
    right: 35px;
    z-index: 2;
    background: #181a1a;
    border-radius: 30px;
    width: 32px;
    padding: 20px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#owl-main.owl-theme .owl-dots .owl-dot span{
    background: transparent;
    border: 1px solid #5a5a5a;
    transition: ease 0.3s all;
}
#owl-main.owl-theme .owl-dots .owl-dot:hover span{
    border-color: var(--primary);
}
#owl-main.owl-theme .owl-dots .owl-dot.active span{
    background: var(--primary);
    box-shadow: 0 0 4px 0 var(--primary);
    border-color: var(--primary);
    height: 30px;
}
/*-------------------------- Carousels End -------------------------*/



/*--------------------------- Home Start --------------------------*/
.home-page{
    position: relative;
    z-index: 1;
}

.pretty-wrapper, .pretty-wrapper .main-section{
    position: relative;
    z-index: 1;
}
.pretty-wrapper .top-wave{
    position: relative;
    z-index: 0;
}
.pretty-wrapper .top-wave img{
    width: 100%;
    opacity: 0.95;
}
.pretty-wrapper .main-section{
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-radius: 0 0 66px 66px;
    background: rgba(17, 23, 29, 0.95);
    border-bottom: 15px solid rgb(0 0 0 / 20%);
}
.pretty-wrapper .red-line{
    z-index: 0;
    width: 100%;
    position: absolute;
    top: -120px;
    right: 0;
    left: 0;
}
.pretty-wrapper .main-front{
    position: relative;
    z-index: 1;
}

ul.tabs{
    padding: 0;
    margin: 0 auto 75px auto;
    display: flex;
    gap: 100px;
    justify-content: center;
}
ul.tabs li{
    position: relative;
    cursor: pointer;
}
ul.tabs li:before{
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(../images/svg/arrow.svg) center center no-repeat;
    right: 145px;
    top: 11px;
    z-index: 0;
}
ul.tabs li:last-child:before{
    display: none;
}
ul.tabs li.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.tabs .caption{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.tabs h3{
    margin: 0;
}
.tabs h3.persian{
    font-weight: bold;
    font-size: 18px;
    color: var(--white);
}
.tabs h3.english{
    font-family: Lato;
    font-weight: lighter;
    color: var(--light-gray);
    font-size: 13px;
    text-transform: uppercase;
}
.tabs .third h3.english{
    letter-spacing: 1px;
}

.tabs .specific-icon{
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 28px;
}
.tabs .specific-icon i{
    z-index: 2;
    font-size: 24px;
    color: var(--primary);
}
.tabs .second .specific-icon i{
    font-size: 20px
}
.tabs .specific-icon i, .tabs .specific-icon:before, .tabs .specific-icon:after{
    transition: ease 0.2s all;
}
.tabs .specific-icon:before{
    width:100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    border-radius: 15px 15px 2px 15px;
    transform: rotate(45deg);
    background: var(--black);
    box-shadow: -2px 2px 10px -2px var(--black);
}
.tabs .specific-icon:after{
    display: none;
}

.tabs li.current .specific-icon i, .tabs li:hover .specific-icon i{
    color: var(--white);
}
.tabs li.current .specific-icon:before{
    background: var(--primary);
    box-shadow: -2px 2px 10px -2px var(--primary);
}
.tabs .specific-icon svg{
    position: absolute;
    z-index: 2;
    fill: var(--primary);
    right: -1px;
    bottom: -12px;
    width: 53px;
    height: auto;
    transition: ease 0.3s all;
}
.tabs li.current .specific-icon svg{
    fill: var(--primary-glassy);
}


.category{
    position: relative;
    border-radius: 28px;
    padding-bottom: 15px;
    margin-bottom: 25px;
    min-height: 110px;
    cursor: pointer;
    transition: ease 0.6s all;
    border: 1px solid rgba(0, 0, 0, 0);
}
.category:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: #07090c;
    z-index: -1;
    border-radius: 28px;
}
.category.disabled{
    cursor: default;
    opacity: 0.6;
}
.category .top-section, .category .bottom-section{
    width: 100%;
    display: flex;
    margin-right: auto;
}
.category .top-section{
    background: var(--secondary3);
    border-radius: 27px;
    padding: 15px 92px 15px 40px;
}
.category.active{
    border: 1px dashed rgba(255, 255, 255, 0.3)
}
.category:not(.disabled):hover{
    border-color: var(--border-focus);
    /* box-shadow: 0 0 25px 2px var(--border-focus); */
}
.category .bottom-section{
    padding: 10px 92px 0 40px;
}
.category .img-section{
    width: 183px;
    position: absolute;
    right: -92px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.category .img-section img{
    max-height: 100%;
    max-width: 100%;
}
.category .captions{
    display: flex;
    gap: 5px;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 55%;
}
.category .captions h2{
    font-family: Rokh;
    position: relative;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    padding-right: 13px;
}
.category .captions h2:before{
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    width: 16px;
    height: 8px;
    border-right: 7px solid var(--primary);
    border-left: 7px solid transparent;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
.category .captions .caption-secondary{
    font-family: Rokh;
    font-size: 16px;
    font-weight: normal;
    color: var(--light-gray);
    margin: 0;
}
.category .captions .caption-fa{
    color: var(--white);
    margin-left: 5px;
}
.category .captions .caption-en{
    color: var(--primary);
}
.category .features{
    display: flex;
    width: 45%;
    gap: 20px;
    align-items: center;
    justify-content: center;
}
.category ul.advantages{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--light-gray);
}
.category ul.advantages li{
    font-weight: 500;
    padding-right: 25px;
}
.category ul.advantages i{
    position: relative;
    font-size: 12px;
}
.category ul.advantages i:before{
    position: relative;
    z-index: 1;
    right: -13px;
}
.category ul.advantages i:after{
    content: "";
    position: absolute;
    transform: rotate(45deg);
    border-radius: 6px;
    width: 16px;
    height: 16px;
    background: var(--primary);
    top: -2px;
    right: -26px;
    left: 0;
    margin: 0 auto;
    z-index: 0;
}
.category .platforms{
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-right: auto;
    cursor: default;
}
.category .platform{
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
}
.category .platform i{
    font-size: 32px;
    color: var(--light-gray);
    transition: ease 0.3s all;
}
.category .platform span{
    line-height: 20px;
    font-size: 12px;
    font-family: Lato;
    transition: ease 0.3s all;
}
.category:not(.disabled) .platform:hover{
    color: var(--white);
    text-shadow: 0 0 10px var(--white);
}
.category:not(.disabled) .platform.windows:hover{
    color: var(--info);
    text-shadow: 0 0 10px var(--info);
}
.category:not(.disabled) .platform.apple:hover{
    color: var(--white);
    text-shadow: 0 0 10px var(--white);
}
.category:not(.disabled) .platform.android:hover{
    color: var(--success);
    text-shadow: 0 0 10px var(--success);
}
.category.disabled .platform{
    pointer-events: none;
    cursor: default;
}

.category .description{
    margin-top: 5px;
    font-weight: bold;
    color: var(--white);
    line-height: 24px;
}
ul.locations{
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 13px;
}
ul.locations li{
    display: flex;
    gap: 12px;
    line-height: 24px;
    font-weight: 700;
    align-items: end;
}
ul.locations li img{
    max-width: 28px;
    max-height: 28px;
}


.category-products{
    padding: 0 20px;
}
.product-box{
    position: relative;
    margin-bottom: 24px;
}
.product-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 25px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: ease 0.3s all;
}
.product-box:hover .product-wrapper{
    border-color: var(--border-focus);
}
.product-wrapper .img-box{
    text-align: center;
    width: 100%;
}
.product-wrapper .img-box img{
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    
}

.product-box .special{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 24px 0px 18px 0px;
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
}
.product-box .btn-product-info{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 54px;
    height: 54px;
    background: #1b2127;
    border-radius: 0 18px 0 24px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: ease 0.3s all;
}
.product-box .properties{
    display: flex;
    flex-direction: column;
    padding: 15px 20px 0 20px;
}
.product-box h3{
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    height: 76px;
    line-height: 25px;
    width: 100%;
    overflow: hidden;
    color: var(--white);
    margin-top: 0;
    margin-bottom: 3px;
    font-family: Rokh;
}
.price-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: Rokh;
    font-weight: bold;
    direction: ltr;
    letter-spacing: 1px;
    line-height: 24px;
    height: 48px;
}
.price-box .price{
    font-size: 16px;
}
.price-box .del-price{
    position: relative;
}
.price-box .del-price{
    opacity: 0.5;
}
.price-box .del-price:before{
    content: "";
    position: absolute;
    width: 120%;
    height: 1px;
    right: -10%;
    left: -10%;
    top: 40%;
    background: var(--white);
    transform: rotate(-7deg);
}
.price-box .currency{
    color: var(--primary);
}

.btn-cart{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 52px;
    height: 52px;
    background: #1b2127;
    border-radius: 18px 0 24px 0;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: ease 0.3s all;
}
.btn-cart:before{
    content: "";
    z-index: -1;
    position: absolute;
    left: -2px;
    top: -2px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 19px 0 25px 0;
    transition: ease 0.3s all;
    background: linear-gradient(45deg, #1b2127 0%, var(--primary) 50%, var(--primary) 50%,#1b2127 100%);
}
.btn-cart:hover:before{
    background: var(--primary);
}
.btn-cart:hover{
    background: var(--primary);
    box-shadow: 0 0 10px 1px var(--primary);
}
svg.icon-cart{
    width: 24px;
    height: 24px;
}
svg.icon-cart .a{
    fill: none;
    stroke: var(--white);
    stroke-width: 2
}
svg.icon-cart .b{
    fill: none;
    stroke: var(--white);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
svg.icon-cart .line{
    fill: none;
    stroke: var(--primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    transition: ease 0.3s all;
}
.btn-cart:hover svg.icon-cart .line{
    stroke: var(--primary-glassy);
}
.product-not-exist{
    opacity: 0.5;
}
.not-exist{
    padding: 5px 25px;
    border-radius: 20px;
    background-color: var(--danger);
    color: var(--white);
    width: 120px;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 8px;
    font-weight: bold;
}
.product-not-exist .product-wrapper{
    cursor: default;
}

.half-box{
    border-radius: 48px;
    padding: 50px 40px 25px;
}
.information-box .half-box{
    background: rgba(0, 0, 0, 0.34);
}
.pay-box .half-box{
    background: var(--black);
}
.input-group.input-group-dynamic.has-icon label{
    padding-right: 40px;
}
.input-group.input-group-dynamic.has-icon i{
    width: 40px;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 0;
    text-align: center;
}
.input-group.input-group-dynamic.has-icon select.form-control,
.input-group.input-group-dynamic.has-icon input.form-control:not(.ltr){
    text-indent: 30px;
}
.input-group.input-group-dynamic.has-icon input.form-control.ltr{
    padding-right: 32px;
}
.input-group.boxed{
    background: var(--black);
    border-radius: 28px;
    min-height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px;
}
.input-group.boxed .btn-sm{
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    padding: 5px 12px;
    min-width: 100px;
    height: 30px;
    line-height: 20px;
    overflow: hidden;
}
.input-group.boxed input.form-control{
    height: 30px;
    margin: 0;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.input-group.boxed input.form-control::placeholder {
    font-size: 13px;
    font-weight: 600;
}
.form-group .small{
    font-size: 90%;
    font-weight: 500;
}
.form-group.is-boxed{
    margin-bottom: 40px;
}
.form-group.is-boxed .alert{
    margin-top: 15px;
    padding: 8px 16px;
}

.alert.alert-gradient-border{
    background: transparent;
    position: relative;
    z-index: 0;
    width: auto;
    border-radius: 25px;
    padding: 10px 25px;
    min-width: 51%;
    max-width: 100%;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
}
.alert.alert-gradient-border:before {
    content: "";
    position: absolute;
    width: auto;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: -1;
    padding: 1px;
    border-radius: 23px;
    /* aspect-ratio: 1; */
    inset: 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.alert.alert-success.alert-gradient-border{
    color: var(--success);
}
.alert.alert-success.alert-gradient-border.alert-success:before {
    background: linear-gradient(to right, transparent, transparent, var(--success-opacity-25), var(--success-opacity-50), var(--success-opacity-75), var(--success));
}
.alert.alert-danger.alert-gradient-border{
    color: var(--danger);
}
.alert.alert-danger.alert-gradient-border:before {
    background: linear-gradient(to right, transparent, transparent, var(--danger-opacity-25), var(--danger-opacity-50), var(--danger-opacity-75), var(--danger));
}
.alert.alert-gradient-border i{
    margin-left: 10px;
}

.form-group.is-boxed label{
    font-weight: 600;
    font-size: 16px;
    padding-right: 25px;
}
.buy-alerts{
    font-size: 15px;
}
.buy-alert{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: start;
    margin-bottom: 20px;
    line-height: 20px;
}
.buy-alert i{
    position: relative;
    font-size: 12px;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.buy-alert i:before{
    position: relative;
    z-index: 1;
    color: var(--white);
}
.buy-alert i:after{
    content: "";
    position: absolute;
    z-index: 0;
    right: 0;
    top: 0;
    border-radius: 4px;
    width: 16px;
    height: 16px;
    background: var(--primary);
    transform: rotate(45deg);
}
.buy-alert span{
    width: 100%;
    text-align: justify;
    font-weight: 500;
    font-size: 15px;
}

.pay-box{
    font-weight: 600;
}
.pay-box label{
    margin: 0;
    font-weight: 500;
}
.pay-box label .user-credit{
    font-weight: bold;
    font-size: 18px;
}
.row.has-style{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}
.row.has-style:before{
    content: "";
    position: absolute;
    width: calc(100% - 24px);
    height: 1px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: #232b36;
}
.row.has-style > div[class^='col-']{
    display: flex;
    justify-content: center;
    align-items: center;
}
#selected-product{
    font-weight: bold;
    font-family: Rokh;
    font-size: 15px;
}
img#selected-product-image{
    border-radius: 4px;
    margin-bottom: 10px;
    max-width: 120px;
}
.pay-box label.box{
    font-weight: bold;
    font-size: 20px;
}
.pay-box label.box .currency{
    font-size: 13px;
}
.pay-box label.box.source{
    font-size: 25px;
}
.pay-box label.box.source .currency, #pure-dollar-total .currency{
    font-size: 14px;
    color: var(--primary);
}
#pure-dollar-total{
    font-size: 16px;
    margin-top: 10px;
}
#pure-dollar-total .amount{
    font-size: 25px;
    margin-left: 3px;
}

div.quantity{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.quantity .btn{
    margin: 0;
}
.quantity input{
    background-color: transparent;
    border: none;
    width: 60px;
    color: var(--white);
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    outline: none;
}
.pay-box #btn-save{
    min-width: 220px;
    position: relative;
    text-align: right;
    font-size: 18px;
    height: 46px;
}
.pay-box #btn-save i{
    position: absolute;
    left: 28px;
    top: 12px;
    z-index: 1;
}
a.agree-link{
    color: #949494;
    display: inline-block;
    border-bottom: 1px solid #949494;
}
a.agree-link:hover{
    color: var(--white);
    border-color: var(--white)
}
.one-line{
    white-space: nowrap;
}

#gateways-box{
    margin-top: 20px;
    padding: 15px 10px;
}
#gateways-box.row.has-style:before{
    display: none;
}
.gateway-contents > .row{
    width: 100%;
}
.all-gateways{
    align-items: center;
    justify-content: center;
}
.item-gateway{
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid var(--border-focus);
    cursor: pointer;
    transition: ease 0.2s all;
}
.item-gateway.active{
    border-color: var(--white);
    cursor: default;
}
.item-gateway img{
    border-radius: 4px;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
}
.item-gateway > span{
    font-weight: bold;
    color: var(--white);
}
.img-gateway.active{
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
    border-color: #888;
}
.row.gateway-content > div[class^='col-']{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#gateways-box{
    background: #11171d;
    border-radius: 45px;
}
.gateway-methods{
    margin-bottom: 10px;
}
.gateway-method{
    display: inline-block;
    width: auto;
    font-size: 14px;
    color: var(--white);
    background-color: transparent;
    border:1px solid var(--border);
    border-radius: 5px;
    padding: 4px 24px;
    cursor: pointer;
    position: relative;
    line-height: 28px;
    transition: ease 0.3s all;
}
.gateway-method.active{
    border-color: var(--white);
}
.gateway-method:hover{
    border-color: var(--gray);
}
.gateway-method i{
    position: absolute;
    top: 10px;
    right: 8px;
    color: var(--primary);
    transition: ease 0.2s all;
}
.gateway-method.active i{
    color: var(--primary);
}
.gateway-method:not(.active) i{
    opacity: 0;
}
.gateway-methods .or{
    font-size: 18px;
    margin: 0 5px;
}
.alert-card2card{
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-weight: 600;
    margin-bottom: 16px;
    padding: 16px;
}
#btn-clear-image {
    border-radius: 25px;
    border: 1px solid var(--border);
    color: var(--white);
    width: 32px;
    height: 32px;
    line-height: 34px;
    font-size: 30px;
    transition: all 0.4s ease;
    background: var(--danger);
    position: absolute;
    top: 50px;
    left: 13px;
    z-index: 2;
    font-weight: bold;
}
.agree-box .form-check  .help-block{
    margin-top: 7px;
}
.banner{
    margin-bottom: 25px;
}
.banner img{
    border-radius: 28px;
    border: none;
}
/*---------------------------- Home End ---------------------------*/



/*------------------------ Users Page Start -----------------------*/
.login-box{
    position: relative;
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.col-login{
    display: flex;
    justify-content: center;
}
.bg-login .card{
    background: rgba(18, 23, 29, 86%);
    border-radius: 75px;
    padding: 0;
    width: 515px;
    position: relative;
    z-index: 2;
}

.card-body.gradient-border{
    display: block;
    position: relative;
    z-index: 0;
    width: 100%;
}
.card-body.gradient-border:before {
    content: "";
    position: absolute;
    width: calc(100% - 30px);
    height: 100%;
    right: 15px !important;
    top: -18px !important;
    z-index: -1;
    padding: 2px;
    border-radius: 60px;
    aspect-ratio: 1;
    inset: 0;
    background: linear-gradient(to bottom, transparent, transparent, var(--primary-opacity-25), var(--primary-opacity-50), var(--primary-opacity-75), var(--primary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.login-box .card-header{
    text-align: center;
}
.login-box h1{
    color: var(--white);
    font-weight: bold;
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 0;
}
.login-box .card-header i{
    color: var(--primary);
    font-size: 24px;
}
.login-box .text-help{
    font-size: 12px;
    line-height: 18px;
}

.col-bordered-input label{
    font-size: 15px;
    text-align: center;
    margin-bottom: 0;
    width: 100%;
}
.bordered-input{
    border: 2px solid var(--border); 
    border-radius: 25px;
    width: 320px;
    max-width: 100%;
    height: 55px;
    margin: 0 auto 15px;
    position: relative;
    overflow: hidden;
}
.bordered-input input.form-control{
    font-size: 18px;
    font-weight: bold;
    font-family: RokhFa;
    color: var(--white);
    text-align: center;
    border-radius: 25px;
    height: 50px;
    padding-top: 15px;    
}
.bordered-input .captcha-image img{
    border-radius: 25px;
    margin-top: 8px;
    margin-right: 10px;
}
.bordered-input .captcha-image i{
    margin-top: 14px;
    margin-right: 15px;
    font-size: 20px;
    position: relative;
    top: inherit;
    left: inherit;
}
.bordered-input input.form-control[name='captcha']{
    background: rgba(0, 0, 0, 0.2);
}
.bordered-input input.form-control.numeric{
    letter-spacing: 2px;
}
.bordered-input input.form-control.numeric.more-letter-spacing{
    letter-spacing: 15px;
}
label a.text-dark{
    color: var(--gray) !important;
    font-weight: bold;
    margin-right: 10px;
}
.bordered-input i{
    position: absolute;
    z-index: 1;
    color: var(--primary);
    left: 20px;
    top: 18px;
}

.login-box .buttons{
    width: 320px;
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.btn.btn-inner-shadow{
    position: relative;
    text-align: right;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    height: 44px;
    overflow: hidden;
}
.btn.btn-inner-shadow span{
    position: relative;
    z-index: 2;
    font-size: 16px;
    white-space: nowrap;
}
.btn.btn-inner-shadow i {
    position: absolute;
    left: 28px;
    top: 14px;
    z-index: 1;
}
.btn.btn-inner-shadow:before{
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    right: -50%;
    top: 0;
    bottom: 0;
    margin: auto;

    transition: ease 0.6s all;
    transform: skew(-15deg, -25deg);
    background: var(--success);
    background: radial-gradient(
        circle,
        rgba(12,194,12,1) 0%,
        rgba(12,194,12,1) 30%,
        rgba(62,207,62,1) 30.5%,
		rgba(62,207,62,1) 45%,
        rgba(31, 112, 36, 0.5) 46%,
        rgba(31, 112, 36, 0.1) 65%,
        rgba(12,194,12,1) 80%
    );
}
.btn.btn-inner-shadow:hover:before{
    right: -55%;
}
.login-box a.btn-back, .pages a.btn-back{
    min-width: 46px;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 6px;
    font-weight: bold;
    color: var(--white);
    background: transparent;
    border: 2px solid var(--border);
}
.login-box a.btn-back:hover, .pages a.btn-back:hover{
    border-color: var(--border-focus);
}
.btn.btn-back .icon-arrow-right{
    margin: 0;
}


.side-content{
    position: relative;
}
.side-content a.btn-home{
    font-weight: bold;
    display: block;
    width: 100%;
    margin-right: -20px;
    margin-bottom: 5px;
    text-align: center;
}
.side-content a.btn-home .icon-home-color{
    font-size: 20px;
    padding-left: 10px;
    margin-top: 3px;
    display: inline-block;
    vertical-align: top;
}
.circles-and-shadow{
    width: 475px;
    height: 475px;
    position: relative;
    top: 10%;
    right: -5%;
}
.circles{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 50%;
    border: 8px solid rgba(243, 239, 247, 0.23);
}
.circles:before, .circles:after{
    content: "";
    position: absolute;
    border-radius: 50%;
}
.circles:before{
    top: 32px;
    right: 32px;
    width: calc(100% - 64px);
    height: calc(100% - 64px);
    border: 8px solid rgba(243, 239, 247, 0.15);
}
.circles:after{
    top: 72px;
    right: 72px;
    width: calc(100% - 144px);
    height: calc(100% - 144px);
    border: 8px solid rgba(243, 239, 247, 0.07);
}
.front-shadow{
    position: absolute;
    right: -50%;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: auto;
    background: rgba(0, 0, 0, 0);
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
}

.logo-text{
    position: absolute;
    text-align: center;
    width: 100%;
    height: auto;
    z-index: 2;
    top: 25%;
    right: -10%;
    left: 0;
    margin: 0 auto;
}

img.login-logo{
    width: 145px;
    height: auto;
    margin: 20px auto;
}
.login-slogan{
    margin: 10px 0;
}
.login-slogan h2.persian{
    font-size: 22.5px;
    font-weight: bold;
    color: var(--primary);
    line-height: 20px;
    margin: 0;
}
.login-slogan h2.english{
    font-size: 16px;
    font-family: Lato;
    font-weight: lighter;
    color: var(--white);
    line-height: 20px;
    margin: 0;
    text-transform: uppercase;
}
.logo-text .links{
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
}
.logo-text .separator{
    color: var(--primary);
}
#ticker-box{
    margin-top: 5px;
    margin-bottom: 15px !important;
}
#ticker-box .bold{
    color: var(--success);
}
#btn-resend-sms{
    font-weight: bold;
}

.login-box .side-svgs{
    position: relative;
    right: 0;
    z-index: -1;
    order: -1;
    margin-left: -45px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.login-box .side-svgs svg:first-child{
    fill: var(--white);
}
.login-box .side-svgs svg:last-child{
    fill: var(--primary);
}

.box-default{
    margin-bottom: 40px;
    background: var(--secondary3);
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 30px;
    border-radius: 48px;
    padding: 50px 40px 25px;
}
.pages .buttons{
    width: 320px;
    max-width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 12px;
    margin: 0 auto;
}
.pages .buttons .btn{
    margin: 0;
    position: relative;
}
.pages .buttons .btn.bg-primary i, .pages .buttons .btn[name="submit"] i{
    position: absolute;
    left: 28px;
    top: 12px;
    z-index: 1;
    font-size: 18px;
}
/*------------------------- Users Page End ------------------------*/


/*---------------------------- Cahrge Start ---------------------------*/
.charge-page{
    font-size: 15px;
}
.charge-page .user-credit{
    font-size: 20px;
}
.charge-packages{
    text-align: center;
    margin-top: 10px;
}
.charge-package{
    display: inline-block;
    width: auto;
    font-size: 15px;
    color: var(--white);
    background-color: transparent;
    border:1px solid var(--border);
    border-radius: 8px;
    padding: 4px 24px;
    cursor: pointer;
    position: relative;
    transition: ease 0.3s all;
    margin-bottom: 5px;
    margin-left: 2px;
}
.charge-package:hover{
    border-color: var(--primary);
}
.charge-package.active {
    background-color: var(--primary);
    border-color: var(--primary);
}
.charge-page .half-box{
    padding-top: 35px;
    min-height: max-content !important;
}
.charge-page #gateways-box {
    border-radius: 25px;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--white);
}
.nav-tabs.nav-pay {
    border-bottom-color: var(--secondary);
}
.nav-tabs .nav-link{
    line-height: 25px;
    font-weight: 600 !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
    padding-top: 4px;
    padding-bottom: 4px;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: var(--secondary);
}
.charge-page .input-group.boxed {
    background: #11171d;
}
/*---------------------------- Charge End ---------------------------*/


/*-------------------------- 404 Page Start -----------------------*/

/*--------------------------- 404 Page End ------------------------*/



/*----------------------  Messages Page Start ---------------------*/
.discussion {
    list-style: none;
    margin: 0;
    padding: 0 0 50px 0;

}
.discussion li {
    padding: 1rem;
    overflow: hidden;
    display: flex;
}
.discussion .avatar {
    width: 70px;
    height: 70px;
    position: relative;
}
.discussion .avatar img {
    display: block;
    width: 100%;
    border-radius: 50%;
}
.self .message{
    background: var(--secondary2);
}
.self .avatar:before {
    content: "";
    position: absolute;
    top: 25px;
    left: -2px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left-color: var(--secondary2);
}
.other {
    justify-content: flex-end;
    align-items: flex-end;
}
.other .avatar {
    order: 2;
}
.other .message {
    order: 1;
    background: var(--dark);
    color: var(--light-gray);
}
.other .avatar:before {
    content: "";
    position: absolute;
    top: 25px;
    right: -2px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-right-color: var(--dark);
}

.message {
    padding: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-width: 80%;
    min-width: 50%;
    border-radius: 10px;
}
.message .content {
    margin: 0 0 0.2rem 0;
}
.message time ,.message .sender-name {
    font-size: 13px;
    color: var(--gray);
}
.message .btn-round{
    border-radius: 50px !important;
    padding: 0;
    width: 28px;
    height: 28px;
    line-height: 26px;
}
.message .btn-round i{
    font-size: 16px;
    margin: 0;
    padding: 0;
}
.message .box-message-edit textarea{
    width: 600px;
    max-width: 100%;
}
.unread-message{
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 0;
    right: 0;
    text-align: center;
    line-height: 32px;
    background-color: var(--danger);
    color: var(--white); 
    font-weight: bold;
    box-shadow: 0 0 2px 0 var(--white);
}
.btn.btn-download{
    padding: 0px 10px !important;
    font-weight: bold;
    font-size: 13px;
    float: left;
}

.tickets-page .standard-cards{
    padding: 25px 10px;
    margin-left: 0;
    margin-right: 0;
    align-items: center;
}
.standard-cards .badge-unread {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    margin-left: 3px;
    color: var(--white);
    background-color: var(--danger);
}
.standard-cards .ticket-title{
    font-size: 15px;
    font-weight: 600;
}
.messages-page .text-center .btn i{
    margin-left: 3px;
}
/*-----------------------  Messages Page End ----------------------*/


/*--------------------------- Plugins Start -----------------------*/
.flat .noty_bar.noty_type_error {
    background-color: #f55145;
    border-color: #f55145;
    color: #fff;
}
.flat .noty_bar.noty_type_warning {
    background-color: #ffbd15;
    border-color: #ffbd15;
    color: #000;
}
.flat .noty_bar.noty_type_success {
    background-color: #0abb87;
    border-color: #0abb87;
    color: #fff;
}
.flat .noty_bar.noty_type_information {
    background-color: #14B9D6;
    border-color: #14B9D6;
    color: #fff;
}
.flat .noty_bar{
    border-radius: 5px !important;
}
ul li.flat{
    margin-bottom: 10px;
}

.swal2-modal .swal2-title {
    font-size: 22px;
    text-transform: none;
}
.swal2-content, .swal2-buttonswrapper button {
    font-family: Rokh;
}
.swal2-buttonswrapper button {
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    padding: 6px 20px !important;
    outline: none;
}
.swal2-buttonswrapper button:active, .swal2-buttonswrapper button:focus {
    outline: none;
}
.swal2-container{direction: ltr}
.swal2-modal{
    direction: rtl;
    border-radius: 10px;
}
.swal2-modal button.swal2-styled.swal2-confirm{
    background: var(--primary) !important;
}
.swal2-modal button.swal2-styled.swal2-cancel{
    background-color: var(--semiblack) !important;
}
.swal2-title, .swal2-modal .swal2-title{
    color: var(--white);
}
.swal2-popup {
    background: var(--dark);
}
.swal2-modal, .swal2-content{
    color: var(--white) !important;
    background: var(--secondary) !important;
}
.swal2-success-circular-line-right, .swal2-success-circular-line-left, .swal2-success-fix{
    background: var(--dark-bg-2) !important;
}


.clockpicker-popover{
    z-index: 9999;
}
.clockpicker-popover .popover-title{
    direction:ltr;
    border-color: var(--border);
}
.popover.clockpicker-popover.bottom>.arrow:after {
    top: 1px;
    margin-left: 0;
    left: -10px;
}
.popover.clockpicker-popover .btn.clockpicker-button {
    padding-top: 7px;
    padding-bottom: 7px;
}
.clockpicker-popover .popover-title .text-primary{
    color: var(--white) !important;
}
.clockpicker-canvas-bearing, .clockpicker-canvas-fg {
    fill: var(--primary);
}
.clockpicker-canvas line {
    fill: var(--primary);
    stroke: var(--primary);
}
.clockpicker-canvas-bg {
    fill: var(--black);
}

.bd-main{
    border-radius: 4px;
    border-color: var(--border);
}
.input-group .bd-table-days button:hover, .bd-selected-day{
    color: var(--black) !important;
}
.bd-main .bd-goto-today{
    border-radius: 4px;
    padding-top: 0;
}
.bd-main .bd-today {
    background-color: var(--black) !important;
    color: var(--white)
}
.bd-table-days button:hover{
    color: var(--gray);
}
.bd-main .bd-table-days .bd-holiday {
    background-color: var(--gray) !important;
}

.datepicker-plot-area{
    font-size: 14px;
    font-family: RokhFa;
    border-radius: 6px;
}
.datepicker-plot-area .toolbox {
    margin-top: 0;
    margin-bottom: 5px;
}
.datepicker-plot-area .btn-today {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 10px;
}
.datepicker-plot-area .datepicker-day-view .table-days td.selected span, .datepicker-plot-area .datepicker-year-view .year-item.selected, .datepicker-plot-area .datepicker-month-view .month-item.selected {
    text-shadow: none;
}
.datepicker-plot-area .btn{
	width: 30px;
	height: 30px;
	line-height: 30px;
	vertical-align: top;
}
.datepicker-plot-area .datepicker-year-view .year-item,
.datepicker-plot-area .datepicker-month-view .month-item {
    border-radius: 6px;
}
.datepicker-plot-area .datepicker-year-view .year-item.selected,
.datepicker-plot-area .datepicker-month-view .month-item.selected {
    background-color: var(--secondary);
}
.datepicker-plot-area .datepicker-year-view .year-item:hover,
.datepicker-plot-area .datepicker-month-view .month-item:hover {
    background-color: var(--secondary);
}
.datepicker-plot-area .btn-prev, .datepicker-plot-area .btn-next{
	margin: 0;
	width: 30px;
	height: 30px;
	max-width: 30px;
	padding: 2px 10px;
}
.datepicker-plot-area .btn.btn-switch{
	width: calc( 100% - 80px);
    padding: 3px 0;
    margin-bottom: 10px;
}
.datepicker-plot-area .datepicker-day-view .table-days td span {
    border-radius: 3px;
}

.datepicker-plot-area .datepicker-day-view .month-grid-box{
    margin: 0;
}
.datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
    background-color: transparent;
    color: var(--gray);
}

.datepicker-plot-area .btn-next, .datepicker-plot-area .btn-prev{
    position: relative;
}
.datepicker-plot-area .btn-prev:before, .datepicker-plot-area .btn-next:before{
    position: absolute;
    top: 9px;
    right: 0;
    left: 0;
    margin: auto;
    font: normal normal normal 14px/1 FontAwesome;
}
.datepicker-plot-area .btn-prev:before{
    content: "\f061";
}
.datepicker-plot-area .btn-next:before{
    content: "\f060";
}
.datepicker-plot-area .btn-next, .datepicker-plot-area .btn-prev, .datepicker-plot-area .btn-switch {
    background-color: var(--dark);
    color: var(--white) !important;
}
.datepicker-plot-area .datepicker-day-view .table-days td span.selected{
    color: var(--white);
    font-weight: bold;
}
.datepicker-plot-area .datepicker-day-view .table-days td.selected span .datepicker-plot-area .datepicker-day-view .table-days td:hover, .datepicker-plot-area .datepicker-day-view .table-days td span:hover{
    background: var(--secondary);
    color: var(--white);
}
.datepicker-plot-area .datepicker-month-view .month-item:hover, .datepicker-plot-area .datepicker-year-view .year-item:hover{
    color: var(--white);
}
.datepicker-plot-area .datepicker-day-view .table-days td span.today{
    position: relative;
}
.datepicker-plot-area .datepicker-day-view .table-days td span.today:before{
    position: absolute;
    content: "";
    height: 1px;
    width: 16px;
    background: var(--secondary);
    right: 0;
    left: 0;
    bottom: 3px;
    margin: 0 auto;
    opacity: 0.3;
}

a.btn, .clockpicker-tick{
    color: var(--white) !important;
}
a.btn, .clockpicker-tick{
    color: var(--white) !important;
}
.clockpicker-popover .popover-title, .clockpicker-plate, .select2-dropdown, .select2-container--default .select2-selection--multiple{
    background-color: var(--semiblack);
    color: var(--white) !important;
}
.clockpicker-popover .popover-content, .popover{
    background-color: var(--semiblack);
}
.popover.clockpicker-popover.bottom>.arrow:after{
    border-bottom-color: var(--semiblack);
}
.clockpicker-canvas-bg {
    fill: var(--dark);
}

.datepicker-plot-area{
    border: none;
    background: var(--semiblack);
}
.datepicker-plot-area .datepicker-day-view .table-days td span, .datepicker-plot-area .datepicker-year-view .year-item, .datepicker-plot-area .datepicker-month-view .month-item,
.datepicker-plot-area .datepicker-navigator .pwt-btn-next, .datepicker-plot-area .datepicker-navigator .pwt-btn-switch, .datepicker-plot-area .datepicker-navigator .pwt-btn-prev{
    background-color: var(--semiblack);
    color: var(--white);
}
.datepicker-plot-area .datepicker-day-view .month-grid-box .header .header-row-cell{
    color: var(--white);
}
.datepicker-plot-area .datepicker-day-view .table-days td.today span,
.datepicker-plot-area .datepicker-day-view .table-days td.selected span .datepicker-plot-area .datepicker-day-view .table-days td:hover, .datepicker-plot-area .datepicker-day-view .table-days td span:hover, .datepicker-plot-area .datepicker-year-view .year-item:hover, .datepicker-plot-area .datepicker-month-view .month-item:hover {
    background-color: var(--dark) !important;
    color: var(--light-gray) !important;
}
.datepicker-plot-area *{
    color: var(--white);
}
.datepicker-plot-area .datepicker-day-view .table-days td span.selected{
    color: var(--from);
}
.datepicker-plot-area .btn-next, .datepicker-plot-area .btn-prev, .datepicker-plot-area .btn-switch {
    color: var(--dark-fg-2) !important;
}
.datepicker-plot-area .datepicker-month-view .month-item.selected,
.datepicker-plot-area .datepicker-year-view .year-item.selected{
    background: var(--dark);
}
.datepicker-plot-area .datepicker-day-view .table-days td span.other-month {
    color: #555;
}

.form-group .bd-main{
    background: var(--secondary);
    color: var(--white);
    border-color: var(--dark-border);
}
.bd-table-days button{
    background: var(--secondary);
    color: var(--white);
}
.bd-main .bd-table-days .bd-holiday {
    background-color: var(--dark) !important;
    color: var(--white) !important;
}
.bd-main, .bd-next, .bd-prev, .bd-dropdown select{
    background-color: var(--semiblack) !important;
    color: var(--white) !important;
}
.stepy-header li.stepy-active div{
    color: var(--white);
}
.bd-main thead {
    background-color: var(--secondary);
    color: var(--white);
}
.bd-main .bd-today {
    background-color: var(--dark) !important;
    color: var(--white);
}
.bd-main .bd-goto-today{
    background-color: var(--dark) !important;
    color: var(--white);
}
.clockpicker-tick.active, .clockpicker-tick:hover{
    background: var(--dark);
}
/*---------------------------- Plugins End ------------------------*/



/*-------------------------- Social Start -------------------------*/
ul.socials>li{
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 2px;
}
ul.socials>li a{
    opacity: 0.65;
    color: var(--white);
    display: inline-block;
    width: 30px;
    position: relative;
}
ul.socials>li:first-child{
    margin-right: 0;
}
ul.socials>li:last-child{
    margin-left: 0;
}
ul.socials>li i{
    font-size: 20px;
}
ul.socials>li i.fa-send-o, ul.socials>li i.fa-telegram{
    font-size: 18px;
}


ul.socials>li.aparat i{
    transform: scale(0.75) rotate(22.5deg);
}
ul.socials li a svg{
    fill: var(--white);
    width: 20px;
    height: 20px;
}
ul.socials>li a:hover, ul.socials li a:hover svg{
    opacity: 1;
}
ul.socials>li a:before{
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    background: #1d1d1d;
    right: 0;
    left: 0;
    bottom: -5px;
    margin:0 auto;
    transition: ease 0.3s all;
    
}
ul.socials>li a:hover:before{
    background: var(--primary);
    box-shadow: 0 0 4px 0 var(--primary);
}

i.icon-aparat{
    position: relative;
    background: var(--white);
    border-radius: 5px;
    width: 24px;
    height: 24px;
    display: inline-block;
}
.icon-aparat:before, .icon-aparat:after{
    content:"";
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.icon-aparat:before{
    width: 2px;
    height: 2px;
    background: var(--black);
    border-radius: 50%;
    z-index: 2;
}
.icon-aparat:after{
    width: 26px;
    height: 26px;
    background: var(--white);
    border-radius: 50%;
    border: 2px solid var(--black);
    right: -1px;
    top: -1px;
    transition: ease 0.3s all;
}
.icon-aparat span{
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
    right: 0;
    top: 0;
    z-index: 1;
}
.icon-aparat span:before, .icon-aparat span:after{
    width: 6px;
    height: 6px;
    content:"";
    position: absolute;
    background: var(--black);
    right: 0;
    left: 0;
    top: 3px;
    margin: auto;
    border-radius: 50%;
}
.icon-aparat span:after{
    top: 15px;
}
.icon-aparat span:last-child{
    transform: rotate(90deg);
}
/*--------------------------- Social End --------------------------*/



/*--------------------------- Footer Start ------------------------*/
footer{
    overflow: visible;
    margin-top: 75px;
    position: relative;
}
footer:before{
    content: "";
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 0;
    height: 400px;
    background: var(--footer-before) center bottom repeat-x;
}
footer .row.has-border{
    position: relative;
}
footer .row.has-border:before{
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 10%;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--semiblack);
    border-top: 1px solid var(--semiblack);
    border-radius: 65px 0 0 0;
    background: rgba(0, 0, 0, 0.5);
}
.col-character{
    position: relative;
    z-index: 2;
}
.character-wrapper{
    position: relative;
    height: 100%;
    z-index: 2;
}
.character-wrapper img{
    max-width: 435px;
    max-height: calc(100% + 50px);
    height: auto;
    width: auto;
    position: absolute;
    bottom: 0;
    left: -100px;
}
.col-footer-main{
    position: relative;
    z-index: 3;
    padding: 17px 100px 17px 32px;
}

ul.bottom-menu{
    margin-top: 20px;
}
ul.bottom-menu li a{
    padding-right: 22px;
    position: relative;
    color: #a7a7a7;
    font-weight: 600;
    height: 25px;
    line-height: 25px;
}
ul.bottom-menu li a:hover{
    color: var(--white);
}
ul.bottom-menu li a:before{
    content: "";
    position: absolute;
    right: 0;
    top: 5px;
    height: 3px;
    width: 12px;
    border-radius: 3px;
    background: var(--secondary);
    transition: ease 0.3s all;
}
ul.bottom-menu li a:hover:before{
    background: var(--primary);
}

.copyrights{
    color: #c8c8c8;
    font-size: 13px;
    font-weight: 500;
    margin-top: -50px;
    position: relative;
}
.copyrights a{
    color: #a7a7a7;
}
.copyrights a:hover{
    color: var(--white);
}
footer .rights{
    font-family: Lato;
    font-size: 12px;
    margin-bottom: 3px;
}

ul.telegram-ways{
    position: relative;
    display: flex;
    gap: 20px;
    height: 80px;
    margin-top: 20px;
    margin-bottom: 30px;
}
ul.telegram-ways li{
    margin: 0;
    padding: 0;
}
ul.telegram-ways li a{
    font-weight: bold;
    font-size: 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 15px;
}
ul.telegram-ways .icon-box{
    position: relative;
    z-index: 1;
}
ul.telegram-ways .border-box{
    z-index: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
ul.telegram-ways .border-box:before, ul.telegram-ways .border-box:after{
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    transform: rotate(45deg);
}
ul.telegram-ways .border-box:before{
    width: 36px;
    height: 36px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    z-index: 2;
}
ul.telegram-ways .border-box:after{
    width: 50px;
    height: 50px;
    border-radius: 16px;
    border: 1px solid var(--primary-glassy);
    top: -7px;
    opacity: 0.35;
    z-index: 0;
    opacity: 0;
    transition: ease 0.3s all;
}
ul.telegram-ways .border-box .bottom-shadow{
    position: absolute;
    width: 100%;
    z-index: 1;
    right: 0;
    left: 0;
    bottom: 30px;
    height: 35px;
    margin: 0 auto;
    opacity: 0;
    transition: ease 0.3s all;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,1) 100%);
}
ul.telegram-ways i{
    position: relative;
    font-size: 18px;
    color: var(--primary);
}
ul.telegram-ways .caption{
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 600;
}
ul.telegram-ways .tooltip-box{
    opacity: 0;
    width: 200px;
    /* height: 105px; */
    position: absolute;
    right: 0;
    left: 0;
    top: -30px;
    margin: 0 auto;
    z-index: -1;
    transition: ease 0.3s all;
}
ul.telegram-ways a:hover{
    color: var(--primary)
}
ul.telegram-ways a:hover .border-box .bottom-shadow, ul.telegram-ways a:hover .border-box:after{
    opacity: 1;
}
ul.telegram-ways .tooltip-box span{
    position: absolute;
    z-index: 2;
    transform: rotate(-11deg);
    font-size: 14px;
    color: var(--white);
    top: -24px;
    right: -112px;
}
ul.telegram-ways .tooltip-box svg{
    position: absolute;
    z-index: 1;
    top: -40px;
    right: -130px;
}
ul.telegram-ways .tooltip-box .shape{
    /* filter: url(#f1);*/
    fill: var(--primary); 
}
ul.telegram-ways a:hover .tooltip-box{
    opacity: 1;
    z-index: 3;
}
.designer-copyright{
    font-family: Lato;
    text-transform: uppercase; 
    align-items: center;
    display: flex;
    justify-content: end;
    gap: 10px;
}
.designer-copyright .texts{
    display: flex;
    flex-direction: column;
    font-weight: bold;
    line-height: 16px;
}
.designer-copyright .texts span:first-child{
    color: var(--primary);
    font-size: 18.5px;
}
.designer-copyright .texts span:last-child{
    color: var(--white);
    font-size: 11px;
}

.certificates-wrapper{
    border-radius: 30px;
    margin-top: 20px;
    padding: 25px 12px;
    background: #f3f7fb;
    position: relative;
}
#owl-certificates.owl-theme .owl-nav [class*=owl-] {
    background: transparent;
    margin: 0;
    padding: 0;
    position: absolute;
    top: calc(50% - 14px);
    transition: ease 0.3s all;
    width: 28px;
    height: 28px;
    background: var(--semiblack);
    text-align: center;
    line-height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}
#owl-certificates.owl-theme .owl-nav [class*=owl-] i{
    color: var(--primary);
    transition: ease 0.3s all;
}
#owl-certificates.owl-theme .owl-nav [class*=owl-]:hover i{
    color: var(--white);
}
#owl-certificates.owl-theme .owl-nav .owl-next{
    left: -24px
}
#owl-certificates.owl-theme .owl-nav .owl-prev{
    right: -24px;
}
#owl-certificates.owl-theme .owl-nav{
    margin: 0;
}
#owl-certificates.owl-carousel .owl-item img{
    width: 100%;
}

footer .socials-box{
    display: none;
    text-align: center;
    margin-top: 10px;
}
ul.socials>li a:before{
    display: none;
}
/*---------------------------- Footer End -------------------------*/



/*------------------------ Responsive Start -----------------------*/
@media (min-width: 1200px){
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1170px;
    }
    .container.container-specific {
        padding-right: 10px;
        padding-left: 10px;
    }
    .main{
        min-height: calc(100vh - 500px);
    }
    ul.telegram-ways .caption {
        width: 80px;
        white-space: nowrap;
        text-align: center;
    }
    img#selected-product-image {
        max-width: 100px;
    }
}
@media (max-width: 1199px){
    .col-footer-main {
        padding: 17px 32px;
    }
    footer .row.has-border:before {
        left: 12px;
        right: 12px;
        border: 1px solid var(--semiblack);
        border-bottom: none;
        border-radius: 45px 45px 0 0;
    }
    .character-wrapper{
        display: none;
    }
    .half-box {
        border-radius: 24px;
        padding: 30px 20px 15px;
    }
    #gateways-box {
        border-radius: 25px;
        margin-right: 0;
        margin-left: 0;
    }
    .box-default{
        border-radius: 24px;
        padding: 30px 20px 15px;
    }
    .messages-page .box-default{
        padding: 30px 0 15px;
    }
    .copyrights p{
        font-size: 13px;
    }
    .dropdown .dropdown-menu:before {
        left: calc(50% - 5px);
    }
    .slider-slogan{
        left: 20px;
    }
    .slider-slogan .texts {
        position: relative;
        z-index: 3;
        width: 224px;
        height: 112px;
        gap: 5px;
    }
    .slider-slogan .logo {
        width: 133px;
    }
    .slider-slogan .slogan {
        width: 224px;
        height: 42px;
    }
    .slider-slogan h2.persian {
        font-size: 18px;
        line-height: 22px;
    }
    .slider-slogan h2.english {
        font-size: 12px;
    }
    ul.tabs {
        margin-bottom: 35px;
    }

    .category .platform i {
        font-size: 24px;
    }
    .category .platform span {
        font-size: 11px;
    }
    .category ul.advantages li {
        font-size: 13px;
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .pretty-wrapper .red-line{
        top: -100px;
    }
    .category .top-section {
        padding: 15px 76px 15px 25px;
    }
    .category .bottom-section {
        padding: 10px 76px 0 25px;
    }
    .category .img-section {
        right: -100px;
    }
    .bg-login .card {
        width: 500px;
    }
}
@media (max-width: 991.98px) {
    .dropdown.btn-user .dropdown-menu {
        margin-right: -25px !important;
    }
    .topest ul.socials{
        display: none;
    }
    footer .socials-box{
        display: block;
    }
}
@media (min-width: 992px){
    header .navbar-toggler{
        display: none;
    }
    .product-wrapper:hover{
        transform: translateY(-10px);
    }
    .dropdown-submenu .dropdown-submenu .fa-angle-down.nav-link-arrow{
        position: absolute;
        z-index: 1;
        left: 8px;
        top: 12px;
        width: 18px;
        height: 18px;
        transform: rotate(90deg);
    }
    #navbar_global > ul > li:first-child{
        padding-right: 0;
    }
    #navbar_global > ul > li:last-child{
        padding-left: 0;
    }
}
@media (max-width: 991px){
    .topest {
        margin: 15px 0 0 0;
    }
    .navbar-collapse.collapsing, .navbar-collapse.show {
        animation: show-navbar-collapse .3s ease forwards;
        transform-origin: center center;
    }
    #navbar-main .navbar-collapse {
        width: 100%;
        position: absolute;
        top: -72px;
        left: 0;
        right: 0;
        z-index: 1050;
        overflow-y: auto;
        height: calc(100vh - 75px) !important;
        opacity: 1;
        background: var(--dark);
        border-radius: 25px;
    }
    #navbar-main.navbar .navbar-nav{
        padding: 15px 10px;
    }
    .navbar .navbar-nav > li > a{
        height: auto;
        padding: 6px 16px;
    }
    .dropdown-menu li > a{
        padding-right: 25px;
    }
    .dropdown-menu li li > a{
        padding-right: 35px;
    }
    #navbar-main.navbar .navbar-nav > li > a.active:before{
        right: 0;
        left: inherit;
        top: 16px;
        bottom: inherit;
        height: 3px;
        width: 10px;
        margin: 0;
        border-radius: 3px;
    }
    .double-head{
        background: transparent;
    }
    .double-head:before{
        display: none;
    }
    .skew-bar .logo-wrapper{
        width: 70px;
    }
    .skew-bar > div:first-child, .skew-bar > div:last-child {
        width: calc(50% - 35px);
    }
    .skew-bar > div:first-child {
        padding-right: 15px;
    }
    .skew-bar > div:last-child{
        padding-left: 15px;
    }
    .skew-bar {
        height: 80px;
        padding-top: 18px;
    }
    .logo-wrapper img {
        bottom: 8px;
    } 
    .dropdown.btn-user a.dropdown-toggle {
        height: 40px;
    }
    .btn-user .specific-icon {
        margin-left: 8px;
        transform: scale(0.8);
    }
    .pretty-wrapper .red-line {
        top: -75px;
    }

    .tabs h3.persian {
        font-size: 14px;
    }
    .tabs h3.english {
        font-size: 10px;
        color: var(--gray);
    }
    .category .img-section {
        right: -92px;
    }
    .category .top-section {
        border-radius: 25px;
        padding: 10px 92px 10px 20px;
    }
    .category .top-section {
        flex-direction: column;
        gap: 10px;
    }
    .category .captions {
        width: 100%;
        margin-top: 10px;
    }
    .category .features {
        display: flex;
        width: 100%;
    }
    .category ul.advantages li {
        line-height: 24px;
        padding-right: 12px;
    }

    .copyrights{
        text-align: center;
        margin-top: 0;
    }
    .certificates-wrapper {
        border-radius: 10px;
        padding: 5px 3px;
    }
    #owl-certificates.owl-theme .owl-nav .owl-prev {
        right: -17px;
    }
    #owl-certificates.owl-theme .owl-nav .owl-next {
        left: -17px;
    }

    footer{
        margin-top: 75px;
    }
    ul.telegram-ways {
        gap: 5px;
        height: auto;
        margin-bottom: 0;
        margin-top: 25px;
    }
    ul.telegram-ways .caption {
        font-size: 11px;
        white-space: nowrap;
        margin-top: 10px;
    }
    ul.telegram-ways .icon-box {
        top: 8px;
    }
    ul.telegram-ways li {
        width: 33.33%;
    }
    ul.bottom-menu li a{
        font-size: 12px;
    }
    .designer-copyright{
        display: none;
    }

    .topest .navbar-toggler{
        margin-left: -10px;
    }
    .bg-login .card {
        width: 400px;
        max-width: 100%;
    }
    .circles-and-shadow {
        width: 300px;
        height: 300px;
    }
    img.login-logo {
        width: 100px;
        margin: 5px auto;
    }
    .login-slogan h2.persian {
        font-size: 16px;
    }
    .login-slogan h2.english{
        font-size: 11px;
    }
    .standard-cards{
        margin-bottom: 0;
    }
    .category:not(.disabled) .platform{
        color: var(--white);
        text-shadow: 0 0 10px var(--white);
    }
    .category:not(.disabled) .platform.windows{
        color: var(--info);
        text-shadow: 0 0 10px var(--info);
    }
    .category:not(.disabled) .platform.apple{
        color: var(--white);
        text-shadow: 0 0 10px var(--white);
    }
    .category:not(.disabled) .platform.android{
        color: var(--success);
        text-shadow: 0 0 10px var(--success);
    }
}
@media (min-width: 768px) and (max-width: 991px){
    body.bg-main{
        background-size: 250% auto;
    }
    ul.tabs li:before {
        right: 115px;
    }
}
@media (min-width: 768px){

}
@media (max-width: 767px) {
    .xs-hide{
        display: none
    }
    .notifications ul, .welcome-message, .circles-and-shadow,
    .signin span:nth-child(2), .signin span:nth-child(3) {
        display: none;
    }

    .logo-wrapper img {
        bottom: 2px;
    }
    #navbar-main .navbar-collapse {
        top: -60px;
        border-radius: 15px;
    }
    .skew-bar {
        height: 60px;
        padding-top: 14px;
        margin-top: 5px;
    }
    .skew-bar .logo-wrapper {
        width: 58px;
    }
    .btn-user .signin {
        font-size: 14px;
    }
    ul.tabs {
        margin-bottom: 25px;
        gap: 70px;
    }
    .skew-bar:before {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 15px;
    }
    .main-carousel-box, #owl-main {
        height: 300px;
    }
    #owl-main .owl-dots{
        right: 0;
    }
    .slider-slogan {
        left: 20px;
        transform: scale(0.5);
    }
    .pretty-wrapper .red-line {
        top: -50px;
    }
    ul.tabs li:before {
        width: 24px;
        height: 24px;
        right: 71px;
    }
    .pretty-wrapper .main-section {
        padding-bottom: 25px;
        border-radius: 0 0 40px 40px;
        border-bottom: none;
    }
    .pretty-wrapper.pages .main-section {
        padding-right: 12px;
        padding-left: 12px;
    }
    .category .bottom-section {
        padding: 10px 20px;
    }
    .category .img-section {
        width: 100%;
        max-width: 100%;
        display: flex;
        position: relative;
        right: 0;
        left: 0;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
        background: var(--secondary3);
        border-radius: 28px 28px 0 0;
    }
    .category .top-section{
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }
    .category .top-section{
        padding: 10px 15px;
    }
    .category .captions {
        align-items: center;
    }
    .category .captions h2{
        padding-right: 0;
    }
    .category .captions h2:before{
        display: none;
    }
    ul.locations {
        align-items: right;
        gap: 20px;
        flex-wrap: wrap;
    }
    .product-wrapper{
        max-width: 302px;
        margin: 0 auto;
    }
    img#selected-product-image{
        max-width: 80px;
    }

    body.bg-login {
        padding-bottom: 60px;
    }
    .login-logo-mobile{
        position: relative;
        width: 100%;
        text-align: center;
    }
    .login-logo-mobile .circles-and-shadow{
        display: block;
        position: absolute;
        top: -87px;
        z-index: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
    }
    img.logo-mobile{
        width: 100px;
        height: auto;
        margin: 20px auto;
        position: relative;
        z-index: 2;
    }
    .login-box .side-svgs{
        position: absolute;
        z-index: 0;
        right: 10%;
        transform: scale(0.3);
        top: -119px;
    }

    .login-box {
        flex-direction: column;
    }
    .bg-login .card {
        width: 450px;
        max-width: calc(100% - 30px);
    }
    .side-content a.btn-home {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
        margin-top: 60px;
    }
    .side-content {
        width: 100%;
    }
    .logo-text {
        right: 0;
    }
    .login-logo{
        display: none;
    }
    .login-slogan{
        top: 68px;
        position: absolute;
        right: 0;
        left: 0;
        padding-bottom: 10px;
    }
    .general-info {
        padding: 15px 20px;
    }
    .my-card.standard-cards{
        margin-bottom: 20px;
    }
    .standard-cards {
        padding: 30px 5px 10px;
    }
    .products .standard-cards{
        padding: 0 5px;
    }
    .products .standard-cards .card-row{
        padding: 0 15px;
    }
    .tickets-page .standard-cards {
        margin-right: 0;
        margin-left: 0;
    }

    footer {
        margin-top: 30px;
    }
    ul.telegram-ways a:hover .tooltip-box{
        display: none;
    }
    .telegram-ways-wrapper{
        overflow: hidden;
    }
    ul.telegram-ways {
        margin-top: 50px;
    }
    ul.telegram-ways .caption {
        font-size: 13px;
        white-space: wrap;
        margin-top: 10px;
        width: 50px;
        text-align: center;
        line-height: 20px;
    }
    .copyrights {
        margin-top: 15px;
    }
}
@media  (min-width: 575px) and (max-width: 767px){

}
@media (max-width: 575px){
    .xxs-hide{
        display: none
    }
    body.bg-main {
        background-position: center 100px;
        background-size: 150%;
    }
    body.bg-login{
        background-image: var(--bg-login-sm);
    }
    .dropdown .dropdown-menu:before {
        left: 20%;
    }
    .dropdown.btn-user .dropdown-menu {
        margin-right: calc(-100% - 15px) !important;
    }
    .skew-bar .logo-wrapper {
        width: 50px;
    }
    .slider-slogan{
        left: -40px;
        bottom: 0;
        top: inherit;
    }
    .main-carousel-box, #owl-main{
        height: 250px;
    }
    .category-products {
        padding: 0;
    }
    footer:before {
        background-size: 200% 80%;
    }
}
@media (max-width: 480px){
    .xxs-wide{
        width: 100% !important;
    }
    .user-section ul.dropdown-menu li a {
        padding: 5px 12px;
    }
    .pretty-wrapper .red-line {
        top: -36px;
    }
    #gateways-box {
        border-radius: 15px;
    }
    .gateway-method {
        white-space: nowrap;
    }
}
@media (max-width: 420px){
    .container{
        padding-right: 15px;
        padding-left: 15px;
    }
    .right-wrapper h1, .right-wrapper h2 {
        font-size: 20px;
    }
    .left-wrapper .persian {
        font-size: 12px;
    }
    .slogan .english {
        font-size: 8.5px;
    }
    .product-wrapper {
        max-width: 100%;
    }
    .product-wrapper .img-box img{
        width: 100%;
    }
    .card-body.gradient-border:before {
        width: calc(100% - 10px);
        right: 5px !important;
        top: -6px !important;
        border-radius: 70px;
    }
    ul.telegram-ways {
        margin-top: 40px;
    }
    .copyrights p {
        font-size: 11px;
        line-height: 1.5;
    }
}
@media (max-width: 380px){
    ul.tabs {
        gap: 50px;
    }
    ul.tabs li:before {
        width: 18px;
        height: 18px;
        right: 64px;
    }
    #gateways-box{
        background: transparent;
    }
    .login-box .side-svgs{
        right: 0;
    }
}
@media (max-width: 360px){
    .pretty-wrapper .red-line {
        top: -30px;
    }
    ul.telegram-ways {
        margin-top: 30px;
    }
}
@media (max-width: 350px){

}
/*-------------------------- Responsive End -----------------------*/