:root {
    --header-height: 60px;
    --orange: #FF9B28;
    --blue: #2196f3;
    --primary:#4A5FC8;
    --purple: #b318b3;
    --green-dark: #1bb162;
    --red-dark: #c51646;
    --blue-dark: #4c31ad;
    --update-color: var(--active);
    --queue-odd-bg: #ffffff00;
    --queue-even-bg: #ffffff7a;
    --queue-buy-bg: rgb(11 165 11/23%);
    --queue-sell-bg: rgb(236 75 91/21%);
    --page-side-margin: 15px;
    --font-feature-settings: "ss01" 1;

}

/*#region . themes*/

:root[data-theme=light] {
    --green: #1EA591;
    --red: #c93232;
    --body-bg: #fff;
    --main-bg: #fff;
    --main-color: #000;
    --light-color: #616161;
    --header-bg: #f1f1f1;
    --active: #4361EE;
    --row-bg: var(--header-bg);
    --row-alt-bg: #fff;
    --grid-icon-bg:var(--footer-bg);
    --footer-bg: #f4f4f4;
    --border: #E9E9E9;
    --border-2: #DCDCE9;
    --shadow-bg: rgb(165, 165, 165);
    --disable: #9F9F9F;
    --disable-bg: #f0f0f6;
    --click-bg: #f7f7f7;
    --shadow: rgb(0 0 0 / 9%);
    --reverse: #000;
    --tab-color: var(--light-color);
    --pop-bg: var(--header-bg);
    --grid-text-color: var(--light-color);
    --control-bg: #f4f4f4;
    --control-bg-alt: #f9f9f9;
    --grid-row-bg: #fff;
    --icon-bg: #bababa;
    --green-light: #8CECD9;
    --green-light-2: #CFF8EC;
    --red-light: #FAB7B7;
    --red-light-2: #FFE8E8;
    --muted: var(--header-bg);
}

:root[data-theme=dark]{
    --green: #20AA83;
    --red: #D26060;
    --body-bg: #18191B;
    --main-bg: var(--grid-row-bg);
    --main-color: #cdcdcd;
    --light-color: #cdcdcd;
    --header-bg: #000;
    --active: var(--primary);
    --row-bg: #000;
    --row-alt-bg: #000;
    --grid-icon-bg:var(--body-bg);
    --footer-bg: #000;
    --border: #232323;
    --border-2: rgb(255 255 255 / 17%);
    --shadow-bg: #161129;
    --disable: #606060;
    --disable-bg: #141212;
    --click-bg: #2d2d2d;
    --shadow: #000;
    --reverse: #fff;
    --tab-color: #CDCDCD;
    --green-light: #3ab870;
    --red-light: #e74451;
    --queue-even-bg: #ffffff2e;
    --pop-bg: #272829;
    --grid-text-color: var(--light-color);
    --control-bg: #18191B;
    --control-bg-alt: #131416;
    --grid-row-bg: #131416;
    --green-light-2: var(--green-light);
    --red-light-2: var(--red-light);
    --green-light: #114335;
    --red-light: #4C2020;
    --muted: #000000;
}

:root[data-theme=dark-blue]{
    --green:#20AA83;
    --red:#C05151;
    --body-bg: #101627;
    --main-bg: #090C19;
    --main-color: #B6BCD3;
    --light-color: #B6BCD3;
    --header-bg: #090C19;
    --active: #2f374f;
    --row-bg: #090C19;
    --row-alt-bg: #000000;
    --footer-bg: #090C19;
    --grid-icon-bg:var(--body-bg);
    --border: #1C2644;
    --border-2: rgb(255 255 255 / 17%);
    --shadow-bg: #161129;
    --disable: #1F3B40;
    --disable-bg: #141212;
    --click-bg: #2d2d2d;
    --shadow: #000;
    --reverse: #fff;
    --tab-color: #B6BCD3;
    --green-light: #165348;
    --red-light: #e74451;
    --queue-even-bg: #ffffff2e;
    --pop-bg: #1f2433;
    --grid-text-color: var(--light-color);
    --control-bg: var(--body-bg);
    --control-bg-alt: var(--row-bg);
    --grid-row-bg: var(--footer-bg);
    --green-light-2: var(--green-light);
    --red-light-2: #7a262d;
    --muted: #000105;

    .tag{color:var(--main-bg);}
}

:root[data-theme=dark-green] {
    --green: #20AA83;
    --red: #C05151;
    --body-bg: #0F2525;
    --main-bg: #041515;
    --main-color: #B6CDD3;
    --light-color: #B6CDD3;
    --header-bg: var(--main-bg);
    --active: var(--green-light);
    --row-bg: var(--main-bg);
    --row-alt-bg: #0b1010;
    --footer-bg: var(--main-bg);
    --grid-icon-bg: var(--body-bg);
    --border: #1D373D;
    --border-2: rgb(255 255 255 / 17%);
    --shadow-bg: #161129;
    --disable: #264B4B;
    --disable-bg: #141212;
    --click-bg: #2d2d2d;
    --shadow: #000;
    --reverse: #fff;
    --tab-color: #ccc;
    --green-light: #165348;
    --red-light: #942936;
    --queue-even-bg: #ffffff2e;
    --pop-bg: #192a2f;
    --grid-text-color: var(--main-color);
    --control-bg: var(--body-bg);
    --control-bg-alt: var(--row-bg);
    --grid-row-bg: var(--footer-bg);
    --green-light-2: var(--green-light);
    --red-light-2: #7a262d;
    --muted: #060606;

    .tag{color:var(--main-bg);}
}
/*#endregion*/

/*#region . layout*/
body {
    font-family: yekanbakh;
    font-size: 13px;
    background-color: var(--body-bg);
    color: var(--main-color);
    padding: 0px;
    margin: 0;
    direction: rtl;
    direction: rtl;
    text-align: right;
}

/*body,html {height:100%;}*/

a, h1, h2, h3, h4, h5, h6, p, text, textarea, input, button, span, td, tr, li, ul, ol, table, div, select {
    font-family: yekanbakh;
    color: var(--color);
}

body.connected #icon-connecting{display:none;}
body.disconnected #icon-connecting{display:flex;}

header {
    height: var(--header-height);
    line-height: var(--header-height);
    background: var(--header-bg);
    padding: 0 12px;
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    box-shadow: 1px 5px 10px var(--body-bg);
}
header .header-box{
    display:flex;
    align-items:center;
    gap: 8px;
    height:100%;
}
#header-profile-picture img{width:26px;height:26px;border-radius:50%;}
header #current-time-element{font-size:16px;padding:0 5px;width:auto;min-width:65px;color:var(--light-color)}
.header-btn {
    width: 26px;
    height: 26px;
    line-height: 22px;
    border-radius: 12px;
    background-color: var(--body-bg);
    margin-right: auto;
    margin: 7px 3px;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
}
.wrapper-space{padding:1px 15px;margin:var(--header-height) auto 100px;max-width:980px;}
.wrapper-full {
    margin-left: calc(-1 * var(--page-side-margin));
    margin-right: calc(-1 * var(--page-side-margin));
    padding-left:var(--page-side-margin)!important;
    padding-right:var(--page-side-margin)!important;
}

.page-full-screen>header,.page-full-screen>footer{display:none}
.page-full-screen .wrapper-space{margin:0}
.page-hide-menu>footer{display:none}
.logo-img{max-height:30px;}
.filters-container {
    display: flex;
    gap: 5px;
    padding: 5px 10px;
    position: sticky;
    top: 60px;
    z-index: 3;
    white-space: nowrap;
    margin: 0 calc(-1 * var(--page-side-margin)) 5px;
    border-radius: 0 !important;
    overflow: auto;
    align-items: center;
    background:var(--body-bg);
}

.tab-page-body-container{min-height: calc(100vh - 150px);}

#startup-help-container{
    background-color: var(--active);
    color:#fff;
    position:fixed;
    top:47px;
    left:5px;
    right:5px;
    padding:16px;
    border-radius:5px;
    z-index:10;
    line-height: 25px;
}
#btn-close-startup-help{
    background-color: #fff;height: 30px;border-radius: 2px;border: 0;padding: 0 10px
}


#page-loading-elem {
    position: fixed;
    top: 200px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    z-index: 9;
    opacity:0;
    visibility:hidden;
    transition: opacity 2s;

}
#page-loading-elem.active {
    opacity:1;
    visibility:visible;
}

.pic-profile{border-radius:50%;float:right}

.fix-above-footer {
    position: fixed;
    bottom: 100px;
    right: 0;
    left: 0;
    line-height: 40px;
    z-index: 2;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: 5px solid var(--body-bg);
    box-shadow: var(--body-bg) 0px -16px 30px 1px;
    background-color:var(--body-bg);
}
#stock-full-details-container .fix-above-footer {bottom:150px}


/*#endregion */

/*#region . footer*/
.shadow-up {
    box-shadow: var(--body-bg) 0px -16px 30px 1px;
}
.page-marketmap .shadow-up{
    box-shadow: none;
}
.page-marketmap header {
    box-shadow: none;
}
.footer-container {
    position: fixed;
    background: var(--body-bg);
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0px 15px 10px;
    z-index: 7;
}
ul.footer {
    background: var(--footer-bg);
    line-height: 56px;
    display: flex;
    justify-content: center;
    z-index: 1;
    border-radius: 30px;
    margin: 0;
    padding: 0;
    height: 55px;
}
ul.footer li {display: inline;list-style-type: none;margin: 0;width: 20%;text-align: center;position:relative}
ul.footer li a {
    font-weight: normal;
    text-decoration: none;
    padding: 11px 0px;
    display: block;
    font-size: 95%;
    line-height: 17px;
    color: var(--disable);
}
ul.footer li a i {font-size: 120%;}
ul.footer li.active i{font-weight: 800;}
ul.footer li.active a{color: var(--main-color);}
.page-stock .footer-container, .page-watchlistmanage .footer-container, .page-notes .footer-container,
.page-marketinstruments .footer-container, .page-watchlist .footer-container,
.page-orders .footer-container,.keyboard-is-open .footer-container,
.page-ordersreport .footer-container,.page-tradesreport .footer-container,.page-vouchers .footer-container{
    box-shadow: none;
}
.page-stock .modal-container {z-index: 7!important}
.page-stock .modal-container .modal-inner{bottom: 10px!important;}
/*#endregion */

/*#region  . card*/

.card {
    background-color: var(--main-bg);
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0px 0px 15px 0px #0000000D;
    padding: 15px;
}
.card-blue {
    background: linear-gradient(to bottom, #3b5fe1, #2d58fd);
    color: #fff;
    --border: #2d58fd;
}
.card-blue .dashed-sep {
        --border: #5b95c3;
        --row-bg: #3b5fe1;
    }
.card.same-height{width: 100%;padding-top: 100%;}

.card-muted{background-color:var(--muted);border:0;box-shadow:none;color:var(--light-color)}
.card-muted .tabs li{--row-bg:var(--body-bg)}

.alert-card{border-radius:12px;padding:10px;line-height:20px;border:1px solid #eee;text-align: justify;}
.alert-card.info{background-color:#EEF5FE;color:#616161;border-color:transparent}
.alert-card.warning{background-color:#f8d7da;color:#721c24;border-color:#f5c6cb}
.alert-card.alert-danger{color: #842029;background-color: #f8d7da;border-color: #f5c2c7;}

.grid-card{border-radius:22px;}
.card-icon .fa {
    color: var(--icon-bg);
    font-size: 120%;
}

.collapsable .bdy{transition:all 0.2s ease-in-out;max-height:500px;overflow:auto}
.collapsable.collapse{}
.collapsable.collapse .bdy{
    max-height:0px!important;
    overflow:hidden;
    padding:0px!important;
}
.collapsable.collapse .icon-collapse{transform: rotate(180deg);}
.collapsable .hdr {
    padding: 3px 10px 5px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--light-color);
    font-weight: 500;
}
.collapsable .hdr .box-actions {
    display: flex;
    gap: 10px;
    color: var(--main-color);
}
.collapsable .hdr .box-actions .btn-pin {
}
.collapsable .hdr .box-actions > * {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--row-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.br-8{border-radius:8px;}
.br-12{border-radius:12px;}
.br-32{border-radius:32px;}
.br-full{border-radius:32px!important;}

/*#endregion */

/*#region . keyframes*/
@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}
@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*#endregion */

/*#region . svg charts*/

.circular-chart {display: block;margin: 0px auto 0 0;max-height: 250px;}
.circle-bg {stroke: #e6ebff;stroke-width: 4;}
.percentage {fill: var(--grid-text-color);font-size: 80%;text-anchor: middle;}
.circular-chart .circle {stroke: #249efa;fill:#fff}
.circular-chart.blue .circle {stroke: #249efa;fill:var(--row-bg)}
.circular-chart.green .circle {stroke: var(--green);fill:var(--row-bg)}
.circular-chart.red .circle {stroke: var(--red);fill:var(--row-bg)}
.circular-chart.yello .circle {stroke: rgb(255 190 3);fill:var(--row-bg)}
.no-animate .circle {animation: none;}
.circle {fill: none;stroke-width: 4;stroke-linecap: unset;animation: progress 1s ease-out forwards;}

.pie {width: 300px;background: #eee;border-radius: 50%;}
.pie circle {fill: none;stroke: gold;stroke-width: 32;animation: rotate 1.5s ease-in;}
/*#endregion */

/*#region . list-view*/
.listview {
    display: block;
    padding: 0;
    margin: 0;
    line-height: 1.3em;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.listview>li {
    padding: 5px 16px;
    display: flex;
    align-items: center;
    justify-content: start;
    position: relative;
    min-height: 30px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0px 0px 15px 0px #0000000D;
}
.listview>li .val{font-weight:500}
.image-listview>li {
    padding: 1px;
    min-height: auto;
    max-height: 50px;
}
.image-listview>li:active{
    background-color:var(--click-bg);
}
.image-listview>li .item {
    padding: 0px 8px;
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    line-height:25px;
}
.image-listview>li .item .icon-box {
    min-width: 32px;
    max-width: 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1em;
    font-size: 115%;
    border-radius: 50%;
    position:absolute;
    top: 4px;
    left: 5px;
}
.image-listview>li .img-box{width: 75px;display:flex;justify-content:start;align-items:center}
.image-listview>li .img-box img{height:100%;max-height:40px;margin:0 auto}
.image-listview>li .item .in {
    display: flex;
    align-items: center;
    width: 100%;
    height:100%;
    line-height: 20px;
    padding: 0;
}
.image-listview>li .item .blk{display:block;width: calc(100% - 26px);max-width: calc(100% - 26px);}

.line-row .image-listview{display:flex;flex-direction:row}
.line-row .image-listview>li{flex-grow:1}
.line-row .image-listview>li .item{min-height: 40px;}


.listview.dashed-sep > li:not(.no-border):after {
background-image: linear-gradient(to right,var(--border) 50%,var(--row-bg) 0%);
background-size: 12px 8px;
background-repeat: repeat-x;
}
.listview.item-p-5 > li .item{
    padding:0 5px;
}
.simple-listview li {
    margin-bottom: 0;
    box-shadow: none;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 5px;
    min-height: 10px;
}
.simple-listview li .item {min-height: 30px;}
.simple-listview li:last-child{border-bottom:0;}
.listview .toggle,.listview .radio{background:none}

.info-rows{display:flex;flex-direction:column;gap:5px;}
.info-rows>div{border-radius:32px;padding:5px 10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap ;}
.info-rows>div{background-color:var(--control-bg)}

.info-rows .val{display:inline-block;direction:ltr;margin-left: 7px}
.info-rows .tit{ display: inline-block;margin-left:5px;color: var(--light-color);font-size: 90%;margin-right: 7px}

.info-rows.alt>div:nth-child(2n){background-color:var(--control-bg-alt)}
.info-rows.alt>div:nth-child(2n+1){background-color:var(--control-bg)}
.info-rows .toggle{width: 100%;background:none;padding:0;margin:0}

.row-cols-2{display:flex;flex-wrap:wrap;gap:6px;flex-direction:row}
.row-cols-2>*{width:calc(50% - 3px);margin:0;padding-right:0!important;padding-left:0!important}

.row-cols-3{display:flex;flex-wrap:wrap;gap:7px}
.row-cols-3>*{width:calc(33.33333% - 5px)}


.edit-list > div {
    justify-content: space-between;
    align-items: center;
    display: flex;
    padding: 5px 10px;
    border-radius: 12px;
    background-color: var(--main-bg);
}

/*#endregion */

/*#region . radio*/

.radio {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height: 30px;
    line-height: 30px;
    background: var(--control-bg);
    padding: 3px 10px;
    margin: 5px 0;
    border-radius: 32px;
}
.radio.small{
    min-height: 30px;
    line-height: 30px;
}
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio .checkmark {
  position: absolute;
  top: calc(50% - 10px);
  left: 9px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color:var(--disable);
}
.radio.r {
    margin-right: 15px;
}
.radio.r .checkmark {
    right:-13px;
}
.radio input:checked ~ .checkmark.red {
  background-color: var(--red);
}

.radio:hover input ~ .checkmark {
  background-color: #ccc;
}

.radio input:checked ~ .checkmark {
  background-color: var(--green);
}

.radio .checkmark:after {
  content: "";
  position: absolute;
}

.radio input:checked ~ .checkmark:after {
  display: block;
}

.radio .checkmark:after {
 	top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
	border-radius: 50%;
	background: white;
}


/*#endregion */

/*#region . checkbox*/
.chbx {
  display: flex;
  align-items:center;
  position: relative;
  padding-right: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 22px;
}
.chbx input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.chbx .marker {
  position: absolute;
  top: 0;
  right: 0;
  height: 18px;
  width: 18px;
  border: 2px solid var(--border);
  border-radius: 5px;
}
.chbx:hover input ~ .marker {
  background-color: #ccc;
}
.chbx input:checked ~ .marker {
  background-color: var(--green);
  border-color: var(--green);
}
.chbx .marker:after {
  content: "";
  position: absolute;
  display: none;
}
.chbx input:checked ~ .marker:after {
  display: block;
}
.chbx .marker:after {
  left: 7px;
  top: 3px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*#endregion*/

/*#region . flex-row*/
.flex-row{display:flex;flex-wrap: nowrap}

.flex-row .col{flex-grow: 1;margin:3px}
.col-1{width: 100%}
.col-2{width: 50%;float:right;}
.col-2-5{width: 40%;}
.col-3{width: 33.333333%;}
.col-4{width: 25%;}
.col-5{width: 20%;}
.col-6{width: 16.6666%}
.col-7{width: 14.285%}
.col-8{width: 12.5% ;}

.flex-row .col:last-child{margin-left:0;}
.flex-row .col:first-child{margin-right:0}
/*#endregion */

/*#region . Tabs And Title*/
.tab-container,.page-header-title{position: sticky;top: calc(var(--header-height) + 0px);padding:7px 0 3px;z-index: 3;background:var(--main-bg)}

.page-header-title{width: 100%;padding:0 8px;margin:0 calc(-1 * var(--page-side-margin)) 1px;display:flex;height:45px;line-height:50px;align-items:center;gap:5px;}
.page-header-title .icon {text-align:center;width: 35px;height: 35px;display: inline-block;line-height: 42px!important;}
.page-header-title .icon .fa{font-weight:bold;font-size:120%}
.page-header-title .icon.active{border-radius: 50%;background-color: var(--header-bg);}
.page-header-title .title{font-size:110%}
.page-header-title i.back:before{content:"\f054";font-size: 120%;}


.tab-container{height:40px;line-height:initial;background-color:var(--body-bg)}
.tab-container .tabs{display:flex;padding:5px;margin:0;overflow:auto;width: calc(100% - 20px);gap:4px;}
.tab-container .tabs > li{height:30px}
.tab-container .tabs > li a{color:var(--tab-color)}
.tab-container .tabs > li:not(.more) {
        margin: 0;
        list-style-type: none;
        padding: 0px 8px;
        white-space: nowrap;
        border-radius: 32px;
        transition: background-color 0.2s;
        line-height: inherit;
        background: var(--row-bg);
        color: var(--tab-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
.tab-container .tabs > li.icon{padding:0;background: none;border: 0;box-shadow: none;}
.tab-container .tabs > li.icon a{display:flex;align-items:center}
.tab-container .tabs > li.active,.tab-container .tabs > li.active > a{background-color:var(--active)!important;color:#fff;border:0}
.tab-container.second-tabs .tabs > li.active,.tab-container.second-tabs .tabs > li.active > a{background-color:var(--light-color)}

.tab-container .options {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: var(--main-bg);
    padding: 0px 15px;
    border-radius: 0;
    height: 40px;
    line-height: 45px;
    font-size: 20px;
}
.tab-container .more {
    position: absolute;
    left: var(--page-side-margin);
    top: 12px;
    font-size: 12px;
    list-style: none;
    background-color: var(--row-bg);
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-justify-content:center;
    -webkit-align-items:center;
    box-shadow: 10px 0px 4px var(--body-bg);
}
.tab-container .toggle-menu .btn-act {
    margin: 0;
    padding: 0;
    height: 30px;
    max-height: 30px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    -webkit-align-content:center;
    -webkit-justify-content: center;
}
.tab-container.tabs-rect {
    background: var(--header-bg);
    border-radius: 32px;
    padding: 0;
    border: 0;
    position: relative;
    top: auto;
    z-index:1;
}
.tab-container.tabs-rect li.active{background-color:var(--body-bg)!important;color:var(--main-color)}
.tab-container.tabs-rect .tabs{gap: 15px}
.tab-container.tabs-rect .tabs > li:not(.more){background:transparent}
.tab-container.tab-mini li{
    margin: 0 2px !important;
    height: 27px;
    line-height: 22px !important;
}

.tab-container.with-close-active .tabs > li.active:before {
    content: "\f00d";
    padding: 5px;
    font-family:fas7;
    font-weight:bold;
}
/*#endregion*/

/*#region . modal*/
.modal-container.no-back{
    background:transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    height:0;
    z-index: 7;
}
.modal-container.no-back .modal-inner{
    box-shadow: 0px -5px 10px var(--body-bg);
}
.modal-container,.confirm-container{
    position: fixed;
    width: 100%;
    top: 0;
    left:0;
    background: #0000004d;
    z-index: 8;
    height: 100%;
    -webkit-backdrop-filter: saturate(180%) blur(1px);
    backdrop-filter: saturate(180%) blur(1px);
}
.modal-container.active .modal-inner{overflow:auto}

.modal-container.left .modal-inner, 
.modal-container.right .modal-inner {top: 0px;bottom: 0px;transition:width 0.4s ease-in-out;width:0%;}

.modal-container.left .modal-inner {left: 0;}
.modal-container.right .modal-inner{right: 0;}

.modal-container.top .modal-inner ,
.modal-container.bottom .modal-inner {left: 15px;right: 15px;width:calc(100% - 30px)!important;transition:max-height 0.4s ease-in-out;max-height:0;}

.modal-container.top .modal-inner {top: 0px;}
.modal-container.bottom .modal-inner {bottom: 10px;}
.modal-container.no-back .modal-inner {bottom: 106px;}

.modal-inner {
    position: fixed;
    background: var(--pop-bg);
    z-index: 10;
    box-shadow: 0 0px 20px #0000008c;
    padding: 0px;
    /*--control-bg:var(--body-bg);*/
}
.modal-inner .toggle,.modal-inner .radio {background-color:var(--body-bg)}
.modal-inner .modal-content{padding: 10px;min-width:250px;line-height:25px;}
.modal-inner .modal-header{
    line-height: 20px;
    padding: 10px 5px 0;
    display: flex;
    align-items: center;
    margin: 5px;
    gap:5px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pop-bg);
}

.modal-container.left.active .modal-inner,
.modal-container.right.active .modal-inner{width:80%;height:100%}

.modal-container.top.active .modal-inner,
.modal-container.bottom.active .modal-inner{width:100%;max-height:calc(100% - 50px);border-radius: 24px ;}

.modal-container #btn-close, .confirm-container #btn-close {
    float: right;
    padding: 5px;
    background: var(--body-bg);
    border-radius: 50%;
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-container .title,.confirm-container .title{font-size:110%;}
.modal-container .sub-title,.confirm-container .sub-title{font-size:90%;float: left;margin-left: 30px}
.modal-content b p, .modal-content b div{font-weight: normal}
.confirm-container .confirm-inner {
    top: 0px;
    left: 0;
}
.confirm-inner{
    position: fixed;
    background: var(--row-bg);
    z-index: 10;
    box-shadow: 5px 5px 5px var(--shadow);
    border: 1px solid var(--border);
    width:0%;
    padding:0px;
    transition:width 0.4s;
}
.confirm-inner .modal-content{padding: 10px;text-align: center;width: calc(100% - 20px);}
.confirm-inner .modal-header{
    padding:10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.confirm-container .confirm-inner{
    left: 50%;
    top: 50%;
    min-height: 100px;
    max-height: calc(100vh - 50px);
    overflow: auto;
    border-radius: 15px;
    transition:transform 0.1s;
    transform: translate(-50%,-50%) scale(0);
    transform-origin: bottom center;
    width:85%;
}
.confirm-container.active .confirm-inner{transform: translate(-50%,-50%) ;}
.confirm-container.active .modal-content{min-height:50px;max-height: calc(100vh - 200px);overflow: auto;line-height:23px;}
.confirm-container .modal-footer{display: flex;justify-content: space-evenly;margin-bottom:10px;margin-top:10px;}

.back-drop{position:fixed;top:0;bottom:0;left:0;right:0;background: #ffffff36;z-index:-1}

/*#endregion*/

/*#region . tags*/
.tag{border-radius:12px;padding:0 6px;line-height: 18px;text-align: center;height: 17px;}
.tag-green{color:#fff;background:var(--green);}
.tag-red{color:#fff;background:var(--red);}
.tag-light{color:var(--main-color);background:var(--muted);}
.tags-container{display:flex;flex-wrap:wrap}
.tags-container .tag{background-color:var(--active);border-radius:20px;padding:5px 10px;margin:5px;line-height: 25px;color:#fff}
.tags-container .tag.active{background-color:var(--disable);color:var(--main-color)}
.tags-container .tag.plus{background-color:var(--disable);color:var(--main-color)}
.tags-container .tag.plus .fa{float: right;margin: 6px 0;padding: 0 5px 0 10px;}
.tags-container .tag .fa{padding: 0 5px;margin-right:5px;}

.tab-1 .show-on-tab-2{display:none;}
.tab-2 .show-on-tab-1{display:none}

/*#endregion*/

/*#region . input-container*/
.input-container, .input-control {
    position: relative;
    background-color: var(--main-bg);
    border-radius: 12px;
    line-height: 30px;
    display: flex;
    padding: 0 10px;
    width: calc(100% - 20px);
    color: var(--color);
    height: 40px;
    line-height: 35px;
    align-items: center;
    border: 1px solid var(--border);
    box-shadow: 0px 0px 15px 0px #0000000D;
}
textarea.input-container{height:auto;}
.input-container:disabled,.input-control:disabled{opacity:0.5}
select.input-control{width:100%;}
.input-container.noborder{border:0}
.input-container.toman{display:block;border:0;height:auto}
.input-container.toman>div{display:flex;justify-content: space-between;position:relative;padding:5px 10px;}
.input-container.toman>div:first-child:before{border-bottom: 1px solid var(--border);content: "";width:calc(100% - 20px);position: absolute;bottom: 0;right: 10px;}
.input-container.required,.input-container .required{border-right:1px solid var(--red)!important}
.input-container input,
.input-container select,
.input-container textarea{border:0;background-color:transparent;color:var(--main-color);padding:0 5px;min-height:30px;line-height:30px;font-size:110%;width:100%;}
.input-container select{width:calc(100% - 10px)}
.input-container select option{background-color:var(--row-bg)}
.input-container button{margin: 5px auto 5px 5px}
.input-container button:last-child{margin-right:0}
.input-container input + .controls {
  min-width:100%;
  height:0;
  overflow:hidden;
  position:absolute;
  top:-44px;
  right:-1px;
  z-index:5;
  transition:height 0.2s;
  text-align:center;
  white-space:nowrap;
  padding:0 5px;
  display:flex;
  border-radius:5px;
  background-color:var(--main-bg);
}
.input-container input + .controls > *{border-left:1px solid var(--border);padding:0 7px;}
.input-container input + .controls > *:last-child{border-left:0}
.input-container input + .controls .single-line{line-height:40px;}
.input-container.focused .controls,.input-container input:focus+.controls{height:40px;line-height:17px;}
.input-container > .fa {font-size: 13px;color: var(--icon-bg);}
.input-container input.commasep{letter-spacing:1px;}

.select-new {
    background-image: url(../images/select-down-arrow.svg);
    background-repeat: no-repeat;
    background-position: left 15px center;
    -webkit-appearance: none;
    padding-left: 25px !important;
    background-size: 12px;
    width: 100%;
}

/*#endregion */

/*#region . status-tag*/
.status-tag{width:6px;height:6px;border-radius:2px;}
.status-tag.I,
.status-tag.IG,
.status-tag.IS,
.status-tag.IR{background-color:var(--red);display:inline-block;}
.status-tag.AG,
.status-tag.AS,
.status-tag.AR{background-color:var(--orange);display:inline-block;}
/*#endregion*/

/*#region . strength_meter*/
.strength_meter {
    position: relative;
    margin-top: 10px;
    height: 20px;
    overflow: hidden
}
.strength_meter .weak {
    background-color: #ffb78c;
    color:#fff;
}
.strength_meter .medium {
    background-color:  var(--orange);
    color:#fff;
}
.strength_meter .strong {
    background-color: var(--green);
    color:#fff;
}
.strength_meter .lbl {
    position: absolute;
    left: 0px;
    display: inline-block;
    border-right: 1px solid var(--border);
    margin: 0 0;
    line-height: 19px;
    padding: 0 5px;
    height: 100%;
    font-size: 10px;
    width: 55px;
    text-align: center;
}
.strength_meter .title{
    font-size:10px;
    color: var(--light-color);
}
.strength_meter .prog{
    position:absolute;
    display:inline-block;
    height:100%;
    top:0;
    right:0;
    width:0;
    transition: width .2s ease-in-out;
    opacity:0.5;
    z-index:0;
}
/*#endregion */

/*#region . tippy-box*/
.tippy-box {
    background-color: var(--active);
}
.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color: var(--active);}
.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color: var(--active);}
.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color: var(--active);}
.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color: var(--active);}
[data-tippy-root]{z-index:2!important;}

.tooltipss {
    position: relative;
    display: inline-block;
}
    .tooltipss .tooltiptext {
        visibility: hidden;
        background-color: var(--active);
        color: #fff;
        text-align: center;
        padding: 5px 5px;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        right: 50%;
        opacity: 0;
        transition: opacity 0.3s;
        white-space: nowrap;
        display:none;
    }
    .tooltipss .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--active) transparent transparent transparent;
    }
.tooltipss:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        display:inline-block;
    }
/*#endregion*/

/*#region . toggle-menu*/

.drop-menu {
    visibility: hidden;
    list-style-type: none;
    max-height: 0;
    transition: all 0.3s ease-in;
    position: absolute;
    top : 32px;
    left: 5px;
    background-color: var(--main-bg);
    padding: 0px;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 5px 5px 10px var(--border);
    z-index: 1;
    color:var(--light-color);
}

.drop-menu li {
    white-space: nowrap;
    color: var(--main-color);
    user-select:none;
    line-height:27px;
    padding:5px 15px;
    color:var(--light-color);
}
.drop-menu li a{color:var(--light-color);}
.drop-menu li:not(:last-child) {border-bottom:1px solid var(--border);}
.toggle-menu.active .drop-menu {
        max-height: 400px;
        visibility: visible
    }

/*#endregion*/

/*#region . toggle*/

.toggle {
    display: flex;
    align-items: center;
    justify-content:space-between;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: var(--control-bg);
    min-height: 30px;
    line-height: 30px;
    padding: 3px 10px;
    margin: 5px 0;
    border-radius: 32px;
    direction:rtl;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle .slide {
    position: relative;
    cursor: pointer;
    -webkit-transition: .4s;
    transition: .4s;
    background-color: var(--disable);
    border-radius: 34px;
    display: block;
    height: 20px;
    width: 40px;
    min-width: 40px;
    margin:0 5px;
}

.toggle .slide:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .2s cubic-bezier(.54,1.6,.5,1);
    transition: .2s cubic-bezier(.54,1.6,.5,1);
}
.toggle input:checked + .slide {background-color: var(--green);}
.toggle input:disabled + .slide {opacity: 0.5;}
.toggle input:checked:disabled + .slide {opacity: 0.4;}
.toggle input:checked + .slide:before {-webkit-transform: translateX(17px);-ms-transform: translateX(17px);transform: translateX(17px);}
.toggle .slide:before {border-radius: 50%;}
/*#endregion */

/*#region  . toast*/
.toast-container{
    position: fixed;
    top: 6px;
    left: 6px;
    right: 6px;
    z-index: 50;
    max-height: 80%;
    overflow: scroll;
    margin-top: 10px;
    display:flex;
    flex-direction:column;
}
.toast-container > div > i {float: right;padding: 6px;}
.toast-container > div {
    line-height: 20px;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .2s;
    color: #fff;
    margin-bottom: 4px;
    overflow: hidden;
    /*border: 1px solid var(--border);*/
    border-radius: 12px;
    order:1;
}

.toast-container > div.open {transform: scaleX(1);}

.toast-container > div.success  {--border: var(--green);}
.toast-container > div.warning  {--border: var(--orange);}
.toast-container > div.info     {--border: var(--primary);}
.toast-container > div.error    {--border: var(--red);}

.toast-container > div.success .title{background-color: var(--green);}
.toast-container > div.warning .title{background-color: var(--orange);}
.toast-container > div.info    .title{background-color: var(--primary);}
.toast-container > div.error   .title{background-color: var(--red);}

.toast-container > div.success .text{background-color: #E2F4F3}
.toast-container > div.warning .text{background-color: #FBF8F0}
.toast-container > div.info    .text{background-color: #EEF5FE}
.toast-container > div.error   .text{background-color: #FBF0F0}
.toast-container > div.pined {order:0}
.toast-container > div.pined .btn-pin-toast {transform:rotate(90deg);}

.toast-container .fa {background: #cccccc45;border-radius: 50%;width: 23px;height: 23px;display: flex;align-items: center;justify-content: center;}
.toast-container > div .text > * {color: #616161}
.toast-container > div .btn-pin-toast {transition:transform 0.1s ease-in}
.toast-container .title{display:flex;padding:5px 10px;gap:6px;align-items:center }
.toast-container .text{padding: 5px 20px;color:#616161;}
.toast-container .actions{margin-right:auto;display:flex;gap:10px;align-items:center;}
.toast-container > div:before {
    width: 0;
    position: absolute;
    bottom: 0;
    height: 1px;
    background-color: var(--border);
    content: '';
    transition: width 4s linear;
}
.toast-container > div.open:before{width:100%;} 
.toast-container > div.open.pined:before{width:0;transition:none} 

/*#endregion*/

/*#region . margin*/
.m-0{margin:0!important;}
.m-r-a{margin-right:auto}
.m-l-a{margin-left:auto}
.m-5{margin:5px;}
.m-t-5{margin-top:5px;}
.m-b-5{margin-bottom:5px;}
.m-r-5{margin-right:5px;}
.m-l-5{margin-left:5px;}
.mx-5,.m-r-l-5{margin-right:5px;margin-left:5px}
.my-5,.m-t-b-5{margin-top:5px;margin-bottom:5px}

.m-10{margin:10px;}
.m-t-10{margin-top:10px;}
.m-b-10{margin-bottom:10px;}
.m-r-10{margin-right:10px;}
.m-l-10{margin-left:10px;}
.mx-10,.m-r-l-10{margin-right:10px;margin-left:10px}
.my-10,.m-t-b-10{margin-top:10px;margin-bottom:10px}

.m-15{margin:15px;}
.m-t-15{margin-top:15px;}
.m-b-15{margin-bottom:15px;}
.m-r-15{margin-right:15px;}
.m-l-15{margin-left:15px;}
.mx-15,.m-r-l-15{margin-right:15px;margin-left:15px}
.my-15,.m-t-b-15{margin-top:15px;margin-bottom:15px}

.m-20{margin:20px;}
.m-t-20{margin-top:20px;}
.m-b-20{margin-bottom:20px;}
.m-r-20{margin-right:20px;}
.m-l-20{margin-left:20px;}
.mx-20,.m-r-l-20{margin-right:20px;margin-left:20px}
.my-20,.m-t-b-20{margin-top:20px;margin-bottom:20px}

.m-30{margin:30px;}
.m-t-30{margin-top:30px;}
.m-b-30{margin-bottom:30px;}
.m-r-30{margin-right:30px;}
.m-l-30{margin-left:30px;}
.mx-30,.m-r-l-30{margin-right:30px;margin-left:30px}
.my-30,.m-t-b-30{margin-top:30px;margin-bottom:30px}
/*#endregion margin*/

/*#region . padding*/
.p-0{padding:0!important;}
.p-t-0{padding-top:0;}
.p-b-0{padding-bottom:0;}
.py-0,.p-t-b-0{padding-top:0!important;padding-bottom:0!important;}
.px-0 {padding-right:0;padding-left:0;}

.p-5{padding:5px;}
.p-t-5{padding-top:5px;}
.p-b-5{padding-bottom:5px;}
.p-r-5{padding-right:5px;}
.p-l-5{padding-left:5px;}
.px-5,.p-r-l-5{padding-right:5px;padding-left:5px;}
.py-5,.p-t-b-5{padding-top:5px;padding-bottom:5px;}

.p-10{padding:10px;}
.p-t-10{padding-top:10px;}
.p-b-10{padding-bottom:10px;}
.p-r-10{padding-right:10px;}
.p-l-10{padding-left:10px;}
.px-10,.p-r-l-10{padding-right:10px;padding-left:10px;}
.py-10,.p-t-b-10{padding-top:10px;padding-bottom:10px;}

.p-15{padding:15px;}
.p-t-15{padding-top:15px;}
.p-b-15{padding-bottom:15px;}
.p-r-15{padding-right:15px;}
.p-l-15{padding-left:15px;}
.px-15,.p-r-l-15{padding-right:15px;padding-left:15px;}
.py-15{padding-top:15px;padding-bottom:15px;}

.p-20{padding:20px;}
.p-t-20{padding-top:20px;}
.p-b-20{padding-bottom:20px;}
.p-r-20{padding-right:20px;}
.p-l-20{padding-left:20px;}
.px-20,.p-r-l-20{padding-right:20px;padding-left:20px;}
.py-20{padding-top:20px;padding-bottom:20px;}



/*#endregion */

/*#region . btn*/
.btn{
    border-radius:32px;
    height:40px;
    line-height:38px;
    display:inline-flex;
    font-size: 13px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    text-align:center;
    border:0;
    white-space:nowrap;
    width: 100%;
}
.btn-small{height: 30px;line-height: 27px;}
.btn-primary {color: #fff!important;background: linear-gradient(94.84deg, #3A50BF 0%, #4361EE 97.47%)!important;}
.btn-green, .btn-success {
    color: #fff!important;
    background-color: var(--green)!important;
    background: linear-gradient(94.84deg, var(--green) 0%, #0F847D 97.47%)!important;
    border: 0;
}
.btn-warning {
    color: #fff;
    background-color: var(--orange);
    border:0;
}
.btn-second {
    background-color: var(--header-bg);
    color: var(--light-color);
}
.btn-disable {
    background-color: var(--disable);
    color: var(--light-color);
}
.btn-danger {
    color: #fff;
    background: linear-gradient(94.84deg, #C93232 0%, #EF5A5A 97.47%);
}
.btn.icon.radius {
    display:flex;
    border-radius:15px;
    padding: 0px 10px;
    height: 29px;
}
.btn .fa {
    margin-left:5px;
}
.btn-second .fa{color:var(--main-color)}
.btn-sq-40 .fa {
    margin: 0;
}
.btn.fa{font-size:15px}
.btn-sq-40{width:40px;height:40px;line-height:47px;padding:0;display:inline-block}
.btn-circle {
    border-radius: 50%;
    display: flex;
    justify-content:center;
    align-items: center;
    width:30px;
    min-width:30px;
    height:30px;
}
.btn-full{width: 80%;margin: 0 auto;display:flex}
.btn:active,.btn:hover{
    opacity:0.8
}

.hover-active:hover,
.hover-active:active{opacity:0.8}

.btn-outline-primary {
    border: 1px solid var(--active);
    color: var(--active);
}
.btn-outline-success {
    border: 1px solid var(--green);
    color: var(--green);
}
.btn-outline-second{
    border: 1px solid var(--border);
}
.btn-outline-danger {
  border: 1px solid var(--red);
  color:var(--red);
}
.btn-outline-warning {
    border: 1px solid var(--orange);
    color: var(--orange);
}

.btn[disabled] {
    background: var(--disable);
    opacity: 0.7;
}
/*#endregion*/

/*#region . tag state*/
.tag-state {
    width: 8px;
    min-width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: -8px;
}
.tag-state.I {background: var(--red);}

/*#endregion*/

/*#region . Grid*/
.prc-prc{direction:ltr;min-width:40px;padding:0 2px;text-align:center}
.has-symbol-state .tbl thead tr th:first-child{padding-right:10px; }
.has-symbol-state .tbl tr td:first-child{padding-right:10px; }
th.ask-cell,th.bid-cell{text-align:center}
td.ask-cell,td.bid-cell{border-radius:6px;padding:0 7px}
td.ask-cell{background: var(--green-light);text-align:left}
td.bid-cell{background: var(--red-light);text-align:right}
.digit{direction:ltr;display:inline-block;white-space:nowrap}

/*#endregion*/

/*#region . share*/
a{text-decoration: none;color:var(--main-color);}
.d-flex{display:flex}
.d-block{display:block}
.d-in-block{display:inline-block}
.flex-1{display:flex}
.flex-1 > *{flex:1}

.flex-grow-1{flex-grow:1}
.a-i-c{align-items:center}
.j-c-b{justify-content:space-between}
.j-c-c{justify-content:center}
.f-d-c{flex-direction:column;}
.f-d-r{flex-direction:row;}
.gap-2{gap:2px;}
.gap-4{gap:4px;}
.gap-3{gap:3px;}
.gap-5{gap:5px;}
.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:15px;}
.gap-30{gap:15px;}
.f-g-1{flex-grow:1;}

.vertical-center {position:relative;}
.vertical-center > *{position: absolute;margin: 0;top: 50%;-ms-transform: translateX(50%) translateY(-50%) ;transform: translateX(50%) translateY(-50%);width:100%}
.rotate{transform:rotate(180deg);}
.rotate-90{transform:rotate(90deg);}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}

.fw-norm{font-weight:normal}
.fw-semibold{font-weight:500}
.fw-bold{font-weight:bold}
.fw-light{font-weight:300}

.fs-9{font-size:0.85em;}
.fs-10{font-size:0.9em;}
.fs-11{font-size:0.95em;}
.fs-12{font-size:1em;}
.fs-13{font-size:1.05em;}
.fs-14{font-size:1.1em;}
.fs-15{font-size:1.15em;}
.fs-16{font-size:1.2em;}
.fs-17{font-size:1.25em;}
.fs-18{font-size:1.3em;}
.fs-20{font-size:1.35em;}

.w-100{width:100%}
.w-full{width:100%}
.w-50{width:50%}
.h-100{height:100%}
.h-auto{height:auto}
.mx-h-norm{max-height:500px;overflow:auto;}
.w-100px{width:100px!important}
.w-auto{width:auto!important;}
.ws-nowrap,.nowrap{white-space:nowrap;}
.ws-norm{white-space:normal!important;}
.text-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.over-auto{overflow:auto;}
.over-hide{overflow:hidden;}
.spinner-grow{
    color: #0d6efd;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: .75s linear infinite spinner-grow;
    animation: .75s linear infinite spinner-grow;
}

.loader {
  border: 1px solid var(--active);
  border-top: 1px solid transparent;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
  margin: 2px;
  vertical-align:middle;
}

.pipe {
    width: 0;
    border-right: 1px solid var(--border);
    height: 25px
}
.section-title {
    font-size: 110%;
    padding: 6px 0;
    margin: 15px 15px 5px;
    color: var(--light-color);
}

.rtl {direction:rtl;}
.ltr {direction:ltr}

.rtl .m-s-l{margin-left: 16px;}
.ltr .m-s-l{margin-right: 16px;}

.fl-r{float:right}
.fl-l{float:left}

.no-border{border:0!important}
p, span, div {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
* {
    -webkit-touch-callout: none;
    scrollbar-width: none;
    webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline: none;
    outline-width: 0;
    -ms-overflow-style: none;  /* IE and Edge */
    text-decoration: none;
}
*::-webkit-scrollbar {
    display: none;
}
::-webkit-scrollbar {display: none;}

input[type=number] {
    -moz-appearance: textfield;
}
::-webkit-input-placeholder {letter-spacing:0}
::-moz-placeholder {letter-spacing:0}
:-ms-input-placeholder {letter-spacing:0}
:-moz-placeholder {letter-spacing:0}input:-webkit-autofill,


.change {direction: ltr;display: inline-block;}

.blink{animation: blinker 1s linear infinite;}

.icon-large{font-size:16px;font-weight:bold}
.ps{font-size:90%;}
.glass{
    background-color: var(--footer-bg);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: saturate(180%) blur(7px);
}

.hide-overflow-text{
    text-overflow: ellipsis;
    overflow: hidden;
}

.section-header {
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;
    background-color: var(--header-bg);
}
.section-header:before{
    content:"\f106";
    font-family:"fas7";
    font-size:18px;
    float:right;
    transition:transform 0.2s;
    position: absolute;
    left: 15px;
}
.section-header.expanded:before {
    transform:rotate(180deg);
}

body.update-color .updated{color:var(--update-color)!important;}
body.update-color .updated .red,body.update-color .updated .green{color:var(--update-color)!important;}
body.update-fontweight .updated{font-weight:bold!important;}

.bullet{
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display:inline-block;
    margin-left:2px;
    margin-right:2px;
    position: absolute;
    top: -5px;
    left: calc(50% + 5px);
}
.bullet-in {
    min-width: 12px;
    height: 14px;
    font-style: normal;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
}
.pos-rel{position:relative}
.pos-fix{position:fixed}
.pos-abs{position:absolute}

.border{border:1px solid var(--border)}

.rtl{direction:rtl!important;}
.ltr{direction:ltr!important;}

.txt-center{text-align:center!important}
.txt-left{text-align:left!important}
.txt-right{text-align:right!important}
.txt-j{text-align:justify}
.txt-clip {
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
}

.hide, .hide-force {
    display: none !important
}

.faded{opacity:0.5}

a {
    text-decoration: none;
}

ul{margin:0;padding:0}
li{list-style-type:none}

.lbl {color: var(--light-color);margin-right: 5px;}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/*#endregion */

/*#region . colors*/
.bg-body{background-color:var(--body-bg)!important}
.bg-primary {background: var(--primary);color: #FFF;}
.bg-red {background: var(--red);color: #FFF;}
.bg-danger {background: var(--red);color: #FFF;}
.bg-danger-light{background: var(--red-light);color: var(--red);}
.bg-danger-light-2{background: var(--red-light-2);color: var(--red);}
.bg-blue {background: var(--blue);color: #FFF;}
.bg-black {background: #000;color: #FFF;}
.bg-purple {background: var(--purple);color: #FFF;}
.bg-warning {background: var(--orange);color: #FFF;}
.bg-disable{background-color: var(--disable);}
.bg-green{background-color: var(--green);color: #FFF;}
.bg-green-light{background-color: var(--green-light);color: var(--green);}
.bg-green-light-2{background-color: var(--green-light-2);color: var(--green);}
.bg-purle{background-color:var(--purple);color: #FFF;}
.bg-row{background-color:var(--row-bg)}
.bg-header{background-color:var(--header-bg);}
.bg-muted{background-color:var(--muted);}
.bg-none{background-color:transparent!important;}
.bg-control{background-color:var(--control-bg);}
.bg-control-alt{background-color:var(--control-bg-alt);}
.red{color:var(--red)!important;}
.green{color:var(--green)!important;}
.color-orange{color:var(--orange)!important;}
.color-active{color:var(--active)!important;}
.color-main{color:var(--main-color)!important;}
.muted{color:var(--light-color);}
.disable {color: var(--disable);}

/*#endregion */

/*#region . guage*/
.gauge {
    position: relative;
    border-radius: 50%/100% 99% 0 0;
    background-color: var(--color, #a22);
    overflow: hidden;
}
.gauge:before{
    content: "";
    display: block;
    padding-top: 50%;   /* ratio of 2:1*/
}
.gauge .sep{
    position: absolute;
    top: 0;
    right: calc(50% - 2px);
    width: 5px;
    background: var(--body-bg);
    height: 27%;
    z-index: 5;
}
.gauge .chart {
  overflow: hidden;
}
.gauge .mask {
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 0;
  top: 27%;
  background-color: var(--main-bg);
  border-radius: 50%/100% 100% 0 0;
}

.gauge .percentage{
    position:  absolute;
    top: -1px;
    left: -1px;
    bottom: 0;
    right: -1px;
    background-color: var(--background, #aaa);
    transform:rotate(var(--rotation)); 
    transform-origin: bottom center; 
    transition-duration: 600;
}
.gauge:hover {
  --rotation: 100deg;
}
.gauge .value {
  position:absolute; bottom:0%; left:0;   
  width:100%; 
  text-align: center;
}

.gauge .min {
  position:absolute; 
  bottom:0; left:5%;   
}
.gauge .max {
  position:absolute; 
  bottom:0; right:5%;   
 }

/*#endregion*/

/*#region . Responsive */
@media(max-width:360px){
    .row-cols-2:not(.no-responsive) > *{width:100%!important;}
}
@media(max-width:320px){
    .row-cols-3 > *{width:100%!important;}
    .row-cols-xs-2 > * {width:calc(50% - 5px)!important}
}
/*#endregion*/

/*#region . Support_Bubble */
.support-bubble {
  position: fixed;
  bottom: 108px;
  left: 16px;
  z-index: 51;
}
.support-bubble.open .bubble-drawer {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.support-bubble.open .close-icon{
    display: none;
}
.support-bubble .close-icon {
    position: absolute;
    top: -9px;
    right: -6px;
    background: red;
    height: 16px;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 12px;
    border: 2px solid #fff;
    font-size: 8px;
}
.support-bubble .bubble-button {
    width: 40px;
    height: 40px;
    background-color: #e69a19;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    color: var(--main-bg);
}
.support-bubble .bubble-button:hover {
  transform: scale(1.1);
}
.support-bubble .bubble-button:active {
  transform: scale(0.95);
}
.support-bubble .bubble-drawer {
  position: absolute;
  border-radius: 14px;
  bottom: 41px;
  left: 0;
  width: 180px;
  max-height: 350px;
  background-color: var(--footer-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  pointer-events: none;
  box-shadow: 0 4px 12px var(--shadow-bg);
  padding: 5px 10px 10px;
}
.support-bubble #close_drawer_icon {
  cursor: pointer;
  font-size: smaller;
  color: var(--light-color);
}
.support-bubble .bubble-section-title {
  margin: 10px 0;
}
.support-bubble .bubble-social-item,.bubble-support-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--body-bg);
  margin-bottom: 10px;
}
.support-bubble .bubble-social-item {
  height: 25px;
  display: flex;
  align-items: center;
}
.support-bubble .bubble-support-item {
  border: 1px solid var(--green);
}
.support-bubble .label {
  color: var(--light-color);
}
.bubble-social-item:hover,.bubble-support-item:hover {
  border-color: var(--primary);
  transform: scale(1.03);
  box-shadow: 0 4px 12px var(--shadow-bg);
}
.bubble-social-item:hover {
  background: linear-gradient(
    135deg,
    rgba(98, 95, 255, 0.582),
    rgba(95, 183, 255, 0.205)
  );
}
.bubble-social-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 8px;
  display: flex;
}
.support-bubble .fa-aparat {
  margin-right: -5px;
  font-size: 22px;
}
.bubble-social-item:hover .bubble-social-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px var(--shadow);
}
.bubble-support-item:hover .bubble-social-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px var(--shadow);
}
/*#endregion*/