@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir.eot');
    src: url('../fonts/Vazir.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Vazir.woff2') format('woff2'),
    url('../fonts/Vazir.woff') format('woff'),
    url('../fonts/Vazir.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir-Bold.eot');
    src: url('../fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Vazir-Bold.woff2') format('woff2'),
    url('../fonts/Vazir-Bold.woff') format('woff'),
    url('../fonts/Vazir-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir-Light.eot');
    src: url('../fonts/Vazir-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Vazir-Light.woff2') format('woff2'),
    url('../fonts/Vazir-Light.woff') format('woff'),
    url('../fonts/Vazir-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir-Medium.eot');
    src: url('../fonts/Vazir-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Vazir-Medium.woff2') format('woff2'),
    url('../fonts/Vazir-Medium.woff') format('woff'),
    url('../fonts/Vazir-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir-Thin.eot');
    src: url('../fonts/Vazir-Thin.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Vazir-Thin.woff2') format('woff2'),
    url('../fonts/Vazir-Thin.woff') format('woff'),
    url('../fonts/Vazir-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: Vazir;
    src: url('../fonts/Vazir-Black.eot');
    src: url('../fonts/Vazir-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Vazir-Black.woff2') format('woff2'),
    url('../fonts/Vazir-Black.woff') format('woff'),
    url('../fonts/Vazir-Black.ttf') format('truetype');
    font-weight: 900;
}

:root {
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 100%;
    --c1: rgb(210, 41, 0);
    --c2: rgb(12 26 163 / 1%);
    --color1-bg: #00227b;
    --color1-color-hover: #00227b;
    --color1-color: #fff;
    --color1-bg-hover: #dbe5ff;
    --color2-bg: #ff0000;
    --color2-color-hover: #ff0000;
    --color2-color: #fff;
    --color2-bg-hover: #ffb5b5;
    --color3-bg: #72009c;
    --color3-color-hover: #72009c;
    --color3-color: #fff;
    --color3-bg-hover: #eeb8ff;
    --color4-bg: #2dad00;
    --color4-color-hover: #2dad00;
    --color4-color: #fff;
    --color4-bg-hover: #d2ffc2;
    --color5-bg: #ffc107;
    --color5-color-hover: #ffc107;
    --color5-color: #5f5f5f;
    --color5-bg-hover: #fff;
    --color6-bg: orange;
    --color6-color-hover: orange;
    --color6-color: #fff;
    --color6-bg-hover: #ffe8d8;
    --color7-bg: #000;
    --color7-color-hover: #000;
    --color7-color: #fff;
    --color7-bg-hover: #c2c2c2;
    --color8-bg: #878787;
    --color8-color-hover: #878787;
    --color8-color: #282828;
    --color8-bg-hover: #f1f1f1;
    --color9-bg: #e600ff;
    --color9-color-hover: #e600ff;
    --color9-color: #fff;
    --color9-bg-hover: #fac6ff;
    --color10-bg: #fff;
    --color10-color-hover: #000;
    --color10-color: #000;
    --color10-bg-hover: #e7e7e7;
}

.myColor1{
    background-color: var(--color1-bg);
    color: var(--color1-color);
    transition: background-color ease-in 300ms;
}
.myColor1:hover{
    background-color: var(--color1-bg-hover);
    color: var(--color1-color-hover);
    border: 1px solid var(--color1-bg);
}
.myColor2{
    background-color: var(--color2-bg);
    color: var(--color2-color);
    transition: background-color ease-in 300ms;
}
.myColor2:hover{
    background-color: var(--color2-bg-hover);
    color: var(--color2-color-hover);
    border: 1px solid var(--color2-bg);
}
.myColor3{
    background-color: var(--color3-bg);
    color: var(--color3-color);
    transition: background-color ease-in 300ms;
}
.myColor3:hover{
    background-color: var(--color3-bg-hover);
    color: var(--color3-color-hover);
    border: 1px solid var(--color3-bg);
}
.myColor4{
    background-color: var(--color4-bg);
    color: var(--color4-color);
    transition: background-color ease-in 300ms;
}
.myColor4:hover{
    background-color: var(--color4-bg-hover);
    color: var(--color4-color-hover);
    border: 1px solid var(--color4-bg);
}
.myColor5{
    background-color: var(--color5-bg);
    color: var(--color5-color);
    transition: background-color ease-in 300ms;
}
.myColor5:hover{
    background-color: var(--color5-bg-hover);
    color: var(--color5-color-hover);
    border: 1px solid var(--color5-bg);
}
.myColor6{
    background-color: var(--color6-bg);
    color: var(--color6-color);
    transition: background-color ease-in 300ms;
}
.myColor6:hover{
    background-color: var(--color6-bg-hover);
    color: var(--color6-color-hover);
    border: 1px solid var(--color6-bg);
}
.myColor7{
    background-color: var(--color7-bg);
    color: var(--color7-color);
    transition: background-color ease-in 300ms;
}
.myColor7:hover{
    background-color: var(--color7-bg-hover);
    color: var(--color7-color-hover);
    border: 1px solid var(--color7-bg);
}
.myColor8{
    background-color: var(--color8-bg);
    color: var(--color8-color);
    transition: background-color ease-in 300ms;
}
.myColor8:hover{
    background-color: var(--color8-bg-hover);
    color: var(--color8-color-hover);
    border: 1px solid var(--color8-bg);
}
.myColor9{
    background-color: var(--color9-bg);
    color: var(--color9-color);
    transition: background-color ease-in 300ms;
}
.myColor9:hover{
    background-color: var(--color9-bg-hover);
    color: var(--color9-color-hover);
    border: 1px solid var(--color9-bg);
}
.myColor10{
    background-color: var(--color10-bg);
    color: var(--color10-color);
    transition: background-color ease-in 300ms;
}
.myColor10:hover{
    background-color: var(--color10-bg-hover);
    color: var(--color10-color-hover);
    border: 1px solid var(--color10-bg);
}

/*---------------------------------- End of fonts ---------------------------------- */
.card .overlay>.fa, .overlay-wrapper .overlay>.fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    color: #000;
    font-size: 30px;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    /*height: 5px;*/
}

/* Track */
::-webkit-scrollbar-track {
    background: #c1c1c1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ff6600;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgb(255 193 14);
}

/* Track */
.sidebar::-webkit-scrollbar-track {
    background: #343a40;
}

/* Handle */
.sidebar::-webkit-scrollbar-thumb {
    background: #2d333a;
}

*{
    font-size: 0.95rem;
}

@media screen and (max-width:1024px) {
    *{
        font-size: 0.85rem;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1420px) {
    *{
        font-size: 0.9rem;
    }
}
@media screen and (min-width: 1421px) {
    .top-notes{
        max-height: 650px;
    }
}
@media screen and (max-width: 650px) {
    .charge-status-lg{
        display: none !important;
    }
    .charge-status-sm{
        display: inherit !important;
    }
    .charge-status-sm>div{
        line-height: 15px;
        text-align: center;
    }
    .charge-status-sm>div span.price{
        font-size: 18px;
        font-weight: bold;
    }
}
a{
    color: #0c0c0c;
    text-decoration: none;
}

/*************************************************/
/** box loader */
@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
}

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
}

.box-loader {
     border: 2px solid;
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.9turn, var(--c1) 0.24turn, rgb(22 0 255 / 10%) 0.22turn) 1;
    animation: borderRotate var(--d) linear infinite forwards;
}

@keyframes borderRotate {
    100% {
        --angle: 420deg;
    }
}

@keyframes borderRadial {
    20% {
        --gradX: 100%;
        --gradY: 50%;
    }
    40% {
        --gradX: 100%;
        --gradY: 100%;
    }
    60% {
        --gradX: 50%;
        --gradY: 100%;
    }
    80% {
        --gradX: 0%;
        --gradY: 50%;
    }
    100% {
        --gradX: 50%;
        --gradY: 0%;
    }
}
 /**********************************/

@keyframes loaderRotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loader {
    width: 16px;
    height: 16px;
    border: 2px solid;
    border-color: #FF3D00 transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: loaderRotation 1s linear infinite;
}

.modal{
    z-index: 10000;
}

.kbd{
    direction: rtl;
}

/* LOADER 1 */
.order-search-box-loader{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    top: 15px;
    left: 25px;
}
.order-search-box-loader:before, .order-search-box-loader:after{
    content: "";
    position: absolute;
    top: -5px;
    /* right: 0px; */
    /* width: 100%; */
    /* height: 100%; */
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: #db3463;
}

.order-search-box-loader:before{
    z-index: 100;
    animation: spin 1s infinite;
}

.order-search-box-loader:after{
    border: 10px solid #ccc;
}
.search-box{
    position: absolute;
    background: rgb(255 255 255);
    z-index: 2000;
    margin-top: 3px;
    padding: 10px;
    border: 1px solid #969696;
}
.search-box table thead{
    background-color: #f9ca9d;
}
.searcher-box{
    position: absolute;
    margin-top: 10px;
    z-index: 10000;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 0 10px 1px #8f8f8f;
}
.searcher-box > ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.searcher-box > ul li{
    font-size: 14px;
    padding: 5px 10px 2px 5px;
    border-bottom: 1px solid #dfdcdc;
    -moz-transition: padding-right ease-in-out 0.3s;
    -webkit-transition: padding-right ease-in-out 0.3s;
    transition: padding-right ease-in-out 0.3s;
}
.searcher-box > ul li:hover{
    background-color: #f3f3f3;
    padding-right: 20px;
}

@keyframes spin{
    0%{
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100%{
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* LOADER 4 */
#loader-4{
    position: absolute;
    right: 25px;
    margin-top: 10px;
}
#loader-4 span{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #f00;
    /* margin: 16px 5px; */
    opacity: 0;
/* padding: 0;
/* margin: 0; */
}

#loader-4 span:nth-child(1){
animation: opacitychange 0.7s ease-in-out infinite;
}

#loader-4 span:nth-child(2){
animation: opacitychange 0.7s ease-in-out 0.33s infinite;
}

#loader-4 span:nth-child(3){
animation: opacitychange 0.7s ease-in-out 0.66s infinite;
}

@keyframes opacitychange{
0%, 100%{
    opacity: 0;
}

60%{
    opacity: 1;
}
}

/**** loading data spinner*/
.loading{
    background: #00000085;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}
.loading>div{
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    top: calc(50% - 80px);
    right: calc(50% - 80px);
    /*background: #00000085;*/
}
.loading>div:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: loading-spinner 1.2s infinite;
}
@keyframes loading-spinner {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
        transform: rotate(1800deg);
    }
}
/********************************************/
body {
    font-family: 'Vazir', sans-serif !important;
}

.ltr {
    direction:ltr !important;
}

.rtl{
    direction: rtl !important;
}

ul {
    padding-inline-start: 0px;
}

.table thead{
    vertical-align: middle !important;
    /*background: #82b3fb !important;*/
    /*color: #0a00a5 !important;*/
}

.table-md tr td, .table-md tr th{
    padding: 3px 10px !important;
}

.dropdown-item {
    text-align: right;
}
.dropdown-footer, .dropdown-header {
    text-align: center;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding-left: .5rem;
}
.pointer{
    cursor: pointer;
}
.pointer-default{
    cursor: default;
}
.pointer-copy{
    cursor: copy;
}

/*------------------------------------ contacts-list ------------------------------------*/

.contacts-list-img {
    float: right;
}

.contacts-list-info {
    margin-right: 45px;
    margin-left: 0;
}


/* sidebar */

.sidebar {
    direction: ltr;
    height: calc(100vh - 13rem);
}

.sidebar > div:first-child {
    direction: rtl;
}

.control-sidebar, .control-sidebar:before {
    left: -250px;
    right: auto;
    transition: left .3s ease-in-out;
}

.control-sidebar-slide-open .control-sidebar, .control-sidebar-slide-open .control-sidebar:before {
    left: 0;
    right: auto;
}

.small-box .icon {
    right:auto;
    left:10px;
}

.nav-sidebar .nav-link>p>.right {
    left: 1rem;
    right: auto;
}

.nav-sidebar>.nav-item .nav-icon {
    margin-right: 0;
    margin-left: .2rem;
}

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .main-header {
        margin-right: 4.6rem;
        margin-left: 0;
    }
}

@media (min-width: 992px) {
    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer, .sidebar-mini.sidebar-collapse .main-header {
        margin-left: 0rem !important;
        margin-right: 4.6rem !important;
        z-index:100;
    }

    .sidebar-mini.sidebar-collapse .main-sidebar, .sidebar-mini.sidebar-collapse .main-sidebar:before {
        margin-right: 0;
        width: 4.6rem;
    }
}


@media (min-width: 768px) {
    .content-wrapper, .main-footer, .main-header {
        transition: margin-right .3s ease-in-out;
        margin-right: 250px;
        margin-left : 0;
        z-index: 3000;
    }
}

@media (max-width: 991.98px) {
    .main-sidebar, .main-sidebar:before {
        box-shadow: none!important;
        margin-right: -250px;
        margin-left: 0;
    }

    .content-wrapper, .content-wrapper:before, .main-footer, .main-footer:before, .main-header, .main-header:before {
        margin-right: 0;
    }

    .sidebar-open .main-sidebar, .sidebar-open .main-sidebar:before {
        margin-right: 0;
        z-index: 4000;
    }
}

.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar:before {
    margin-right: -250px;
}

.main-sidebar {
    left: auto;
    right:0;
}

/* Cards */

.card-header>.card-tools {
    right:auto;
    left:1rem;
}

.user-block img {
     float: right;
}

.attachment-block .attachment-img {
    float: right;
}

.attachment-block .attachment-pushed {
    margin-left: 0px;
    margin-right: 110px;
}

.card-comments .card-comment img, .img-lg, .img-md, .img-sm, .user-block.user-block-sm img {
    float: right;
}

.card-comments .comment-text {
    margin-right: 40px;
    margin-left: 0;
}

.card-comments .card-comment img+.img-push, .img-sm+.img-push, .user-block.user-block-sm img+.img-push {
    margin-left: 0px;
    margin-right: 40px;
}

.user-block .comment, .user-block .description, .user-block .username {
    margin-right: 50px;
    margin-left: 0px;
}

.btn-group-vertical {
    align-items: center;
}
.card-banafsh .card-header{
    background-color: #6c3bff;
    border-bottom: 0;
    color: #fff;
}
/*------------------------- Form ----------------------------*/
.select2-container .select2-search--inline {
    float: right;
}

.select2-container--default .select2-search--inline .select2-search__field {
    text-align: right;
}

/*----------------------- Extra Page ---------------------------*/
.error-page>.headline {
    float: right;
}

.error-page>.error-content {
    margin-right: 190px;
    margin-left: 0;
}

.lockscreen-image {
    left: auto;
    right:-10px;
}

.lockscreen-credentials {
    margin-left: 0px;
    margin-right: 70px;
}

.nav {
    padding-inline-start: 0px !important;
}

/*---------------------------------- Persian Date Picker ---------------------------------- */

.datepicker-plot-area {
    font-family: 'Vazir', sans-serif;
}

.search_results{
    position: absolute;
    width: 95%;
    margin-top: 2px;
    z-index: 100;
    background: #faf3f3;
}
.search_results a{
    background: beige;
}
.search_results a:hover{
    background: #e5e5bd;
}

.order_search_orders{
    width: 98%;
    top: 40px;
    margin-top: 0;
}

.order_search_customers{
    position: absolute;
    width: 98%;
    z-index: 1000;
    margin-top: 3px;
    background-color: white;
}
.order_search_customers a{
    background: beige;
}
.order_search_customers a:hover{}

.th{
    background-color: #efefef;
}

.breadcrumb-item+.breadcrumb-item::before{
    content: '>' !important;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 5px 0px;
    font-size: 10px;
    line-height: 1;
    border-radius: 15px;
}

.fade-scale {
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}

.fade-scale.in {
    opacity: 1;
    transform: scale(1);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active{
    background-color: #034e9f !important;
    /*color: #000;*/
}
.sidebar-dark-primary .nav-treeview>.nav-item>.nav-link{
    color: #fff !important;
}
.sidebar-dark-primary .nav-treeview>.nav-item>.nav-link.active, .sidebar-dark-primary .nav-treeview>.nav-item>.nav-link.active:hover{
    /*background-color: #525252 !important;*/
    background-color: #007bff !important;
    color: #fff !important;
}

.text-orange{
    color: orangered !important;
}
.btn-orange{
    color: #fff;
    background-color: orangered;
    border-color: orangered;
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-orange:hover {
    background-color: #ff7849;
    border-color: orangered;
    color: white;
}
.btn-outline-orange {
    color: orangered;
    background-color: transparent;
    background-image: none;
    border-color: orangered;
}
.btn-outline-orange:hover {
    color: #fff;
    background-color: orangered;
    border-color: #c43300;
}
.alert-orange, .bg-orange, .label-orange {
    background-color: orangered !important;
    border-color: #c43600;
    color: #fff;
}

.alert-success{
    color: #0a4f1a !important;
    border-color: #23923d !important;
    background-color: #a1efb3!important;
}

.alert-warning{
    color: #644e0b !important;
    border-color: #ffd24e !important;
    background-color: #fffcb6 !important;
}

.alert-info, .alert-info a, .bg-info, .bg-info a, .label-info, .label-info a {
    color: #404040 !important;
}
.alert-info {
    border-color: #30bbdc;
    color: black !important;
}
.bg-info, .label-info, .alert-info {
    background-color: #00d7ff !important;
}


.text-banafsh{
    color: #4a00c4 !important;
}
.btn-banafsh{
    color: #fff;
    background-color: #7d2dff;
    border-color: #870dff;
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-banafsh:disabled{
    background-color: #d2c4ff;
    border: 1px solid #b198ff;
}
.btn-banafsh:hover {
    background-color: #5b00e7;
    border-color: #4f00a3;
    color: white;
}
.btn-outline-banafsh {
    color: #870dff;
    background-color: transparent;
    background-image: none;
    border-color: #870dff;
}
.btn-outline-banafsh:hover {
    color: #fff;
    background-color: #7d2dff;
    border-color: #870dff;
}
.alert-banafsh, .bg-banafsh, .label-banafsh {
    background-color: #ae60ff;
    border-color: #8d0eff;
    color: #fff;
}
.rhr-nav-item{
    padding-right: 20px;
    transition: padding-right;
    transition-duration: 500ms;
}
.rhr-nav-item:hover{
    padding-right: 10px;
}
.rhr-nav-item i{
    font-size: 14px !important;
}
.page-link{
    color: #000;
}
.page-item.active .page-link{
    background-color: #007bff !important;
    /*border-color: #000000 !important;*/
}

/*.table tbody tr:nth-of-type(odd) {
    background-color: #dbdbdb36;
}*/
.table-striped tbody tr:nth-of-type(odd){
    background-color: rgba(0,0,0,0) !important;
}
.table-hover>tbody>tr:hover{
    --bs-table-accent-bg: rgb(255 254 211);
}

tbody, td, tfoot, th, thead, tr{
    vertical-align: middle !important;
}

/******** Invoices ******************/
.invoice-title{
    background: #5d5d5d;
    position: absolute;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    /*margin-bottom: 70px;*/
}
.invoice-title span{
    float: right;
    display: inline-block;
    transform: rotate(-90deg);
    /* margin-top: 85px; */
    margin-right: 9px;
    /* background: #e3e2e2; */
    /* padding: 10px; */
    /* opacity: 0.8; */
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.invoice-title-info{
    position: absolute;
    width: 100%;
    background: #fff;
    right: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 0 35px 35px 0;
    /* margin-top: 1px; */
    padding-right: 20px;
    border: 1px solid #585858;
    /*margin-bottom: 70px;*/
}

.user-panel img {
    width: 80px !important;
}

.tags{
    display: block;
    background: #f9fbde;
    border: 1px solid #adadad;
    padding: 2px 5px;
    border-radius: 5px 0;
    margin-left: 10px;
    font-size: 14px;
}

.order-show-title{
    padding: 7px 15px;
}
.order-show-title>span{
    display: block;
    font-size: 1.6rem !important;
}
.order-show-title:hover{
    background-color: white;
    border: 1px solid #e2e2e2;
    padding: 5px 15px;
    cursor: text;
}

.nowrap{
    white-space: nowrap;
}

.odd{
    background-color: rgb(0 0 0 / 4%) !important
}
.odd2{
    background-color: rgb(0 0 0 / 8%) !important
}


/*sweet alert colors*/
.swal2-container{
    z-index: 10000 !important;
}
.swal2-popup.swal2-toast{
    border: 1px solid #a2a2a2 !important;
}
.swal2-popup.swal2-toast .swal2-title a{
    color: #0c0c0c !important;
}
.swal2-timer-progress-bar{
    background: rgb(0 0 0 / 75%) !important;
}

.person_rows{
    vertical-align: middle;
}
/********* Modal **********/
.modal .close{
    position: absolute;
    left: 10px;
    color: red;
}

.full-screen .modal-dialog {
    min-width: 99% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.full-screen .modal-content {
    height: auto !important;
    min-height: 100% !important;
    border-radius: 0 !important;
}


/****** FieldSet *********/
.fieldset{
    border: 1px solid #c3c3c3 !important;
    border-radius: 5px;
    padding: 25px 5px 10px 5px;
    position: relative;
    background-color: #f9f9f9;
}
.fieldset > span{
    border: 1px solid #c3c3c3;
    border-radius: 5px;
    padding: 3px 10px;
    position: absolute;
    top: -14px;
    font-size: 13px;
    right: 28px;
    background-color: gainsboro;
}
.fieldset label{
    margin-bottom: 0 !important;
}

.menu-open .active>ul{
    background-color: yellow !important;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-treeview{
    background: #63696e !important;
    border-radius: 5px !important;
    border: 1px solid black !important;
}

.fa-link{
    font-size: 12px;
}

.btn-search-rtl{
    border-radius: 0;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
}

.alert-danger{
    color: #842029 !important;
    background-color: #f8d7da !important;
}

p.sms-variable span{
    font-size: 13px;
    background-color: antiquewhite;
    padding: 3px 5px;
    border-radius: 5px;
    border: 1px solid #e1ceb5;
    margin: 0px 0px 3px 5px;
    display: inline-block;
}

.btn-app{
    border: 1px solid #ddd !important;
    background-color: #f4f4f4 !important;
}
.btn-app:hover{
    border: 1px solid #939393 !important;
    background-color: #e5e5e5 !important;
}
.topbar-badge{
    position: absolute;
    right: 15px;
    bottom: -5px;
    padding: 0 5px;
}

.top-notes{
    overflow-y: auto;
    max-height: 450px;
}

.invert-color{
    filter: invert(1);
}

.status{
    font-size: 13px;
    font-weight: bold !important;
    line-height: 18px;
    padding: 2px 5px !important;
    border-radius: 10px;
}
.status-success{
    background-color: #b0ffc0;
    color: #007f1c !important;
}
.status-danger{
    background-color: #ffcaca;
    color: #ff0000;
}
.status-info{
    background-color: #cfe9ff;
    color: #0075c2 !important;
}
.status-primary{
    background-color: #77c6fc;
    color: #006da9 !important;
}
.status-warning{
    background-color: #fde600;
    color: #7a6802 !important;
}
.status-smoky{
    background-color: #cfcfcf;
    color: #5d5d5d !important;
}
.status-vip{
    background-color: #fff6c4;
    color: #ad9307 !important;
}


.btn-1{
    color: var(--color1-color);
    background-color: var(--color1-bg);
    border-color: var(--color1-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-1:hover {
    background-color: var(--color1-color-hover);
    border-color: var(--color1-bg);
    color: var(--color1-color);
}
.btn-outline-1 {
    color: var(--color1-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color1-bg);
}
.btn-outline-1:hover {
    color: var(--color1-color);
    background-color: var(--color1-bg);
    border-color: var(--color1-color);
}
/*BTN 2*/
.btn-2{
    color: var(--color2-color);
    background-color: var(--color2-bg);
    border-color: var(--color2-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-2:hover {
    background-color: var(--color2-color-hover);
    border-color: var(--color2-bg);
    color: var(--color2-color);
}
.btn-outline-2 {
    color: var(--color2-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color2-bg);
}
.btn-outline-2:hover {
    color: var(--color2-color);
    background-color: var(--color2-bg);
    border-color: var(--color2-color);
}
/* BTN 3 */
.btn-3{
    color: var(--color3-color);
    background-color: var(--color3-bg);
    border-color: var(--color3-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-3:hover {
    background-color: var(--color3-color-hover);
    border-color: var(--color3-bg);
    color: var(--color3-color);
}
.btn-outline-3 {
    color: var(--color3-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color3-bg);
}
.btn-outline-3:hover {
    color: var(--color3-color);
    background-color: var(--color3-bg);
    border-color: var(--color3-color);
}
/* BTN 4 */
.btn-4{
    color: var(--color4-color);
    background-color: var(--color4-bg);
    border-color: var(--color4-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-4:hover {
    background-color: var(--color4-color-hover);
    border-color: var(--color4-bg);
    color: var(--color4-color);
}
.btn-outline-4 {
    color: var(--color4-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color4-bg);
}
.btn-outline-4:hover {
    color: var(--color4-color);
    background-color: var(--color4-bg);
    border-color: var(--color4-color);
}
/* BTN 5 */
.btn-5{
    color: var(--color5-color);
    background-color: var(--color5-bg);
    border-color: var(--color5-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-5:hover {
    background-color: var(--color5-color-hover);
    border-color: var(--color5-bg);
    color: var(--color5-color);
}
.btn-outline-5 {
    color: var(--color5-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color5-bg);
}
.btn-outline-5:hover {
    color: var(--color5-color);
    background-color: var(--color5-bg);
    /*border-color: var(--color5-color);*/
}
/* BTN 6 */
.btn-6{
    color: var(--color6-color);
    background-color: var(--color6-bg);
    border-color: var(--color6-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-6:hover {
    background-color: var(--color6-color-hover);
    border-color: var(--color6-bg);
    color: var(--color6-color);
}
.btn-outline-6 {
    color: var(--color6-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color6-bg);
}
.btn-outline-6:hover {
    color: var(--color6-color);
    background-color: var(--color6-bg);
    border-color: var(--color6-color);
}
/* BTN 7 */
.btn-7{
    color: var(--color7-color);
    background-color: var(--color7-bg);
    border-color: var(--color7-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-7:hover {
    background-color: var(--color7-color-hover);
    border-color: var(--color7-bg);
    color: var(--color7-color);
}
.btn-outline-7 {
    color: var(--color7-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color7-bg);
}
.btn-outline-7:hover {
    color: var(--color7-color);
    background-color: var(--color7-bg);
    border-color: var(--color7-color);
}
/* BTN 8 */
.btn-8{
    color: var(--color8-color);
    background-color: var(--color8-bg);
    border-color: var(--color8-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-8:hover {
    background-color: var(--color8-color-hover);
    border-color: var(--color8-bg);
    color: var(--color8-color);
}
.btn-outline-8 {
    color: var(--color8-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color8-bg);
}
.btn-outline-8:hover {
    color: var(--color8-color);
    background-color: var(--color8-bg);
    border-color: var(--color8-color);
}
/* BTN 9 */
.btn-9{
    color: var(--color9-color);
    background-color: var(--color9-bg);
    border-color: var(--color9-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-9:hover {
    background-color: var(--color9-color-hover);
    border-color: var(--color9-bg);
    color: var(--color9-color);
}
.btn-outline-9 {
    color: var(--color9-color-hover);
    background-color:transparent;
    background-image: none;
    border-color: var(--color9-bg);
}
.btn-outline-9:hover {
    color: var(--color9-color);
    background-color: var(--color9-bg);
    border-color: var(--color9-color);
}
/* BTN 10 */
.btn-10{
    color: var(--color10-color);
    background-color: var(--color10-bg);
    border-color: var(--color10-bg-hover);
    box-shadow: 0 1px 1px rgba(0,0,0,.075);
}
.btn-10:hover {
    background-color: var(--color10-color-hover);
    border-color: var(--color10-bg);
    color: var(--color10-color);
}
.btn-outline-10 {
    color: var(--color10-color-hover);
    background-color: transparent;
    background-image: none;
    border-color: var(--color10-bg);
}
.btn-outline-10:hover {
    color: var(--color10-color);
    background-color: var(--color10-bg);
    border-color: var(--color10-color);
}
.apexcharts-tooltip-series-group{
    text-align: right !important;
    justify-content: right !important;
    font-size: 2px !important;
}
.upload-btn input[type='file'] {
    display: none;
}

.notes{
    position: relative;
}
.notes .details{
    display: none;
    position: absolute;
    left: 20px;
    top: 15px;
}
.notes:hover .details{
    transition: cubic-bezier(0.38, 0.04, 0.18, 1.01);
    display: block !important;
}
.time-button-fields-side{
    position: relative;
    padding: 4px 8px;
    background-color: #e9ecef;
    line-height: 25px !important;
    border: 1px solid #ced4da;
    border-radius: 5px 0 0 5px !important;
    cursor: pointer;
}
.break-line{
    white-space: pre-line;
}


.radio-group {
    /*display: flex;*/
    /*gap: 10px;*/
    /*margin-top: 32px;*/
}

/* Hide the native radio input */
.radio-group input[type="radio"] {
    appearance: none;
    opacity: 0;
    position: absolute;
}

.radio-group label {
    position: relative;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 2px 2px 6px 0px var(--grey);
    background-color: #ecf0ff;
    border: 1px solid #c1d0ff;
    transition: all ease 200ms;
}
.radio-group *{
    user-select: none;
    cursor: pointer;
}
.radio-group label span{
    display: none;
}

.radio-group label::after {
    display: none;
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    right: 16px;
    top: 16px;
    background: var(--grey);
}

/* When the radio is checked, style the label accordingly */
.radio-group input[type="radio"]:checked + label {
    background: #deedff;
    outline: solid 3px var(--blue);
    /*color: #62ff00;*/
}
.radio-group input[type="radio"]:checked + label {
    /*padding: 17px 45px 12px 20px;*/
}
.radio-group input[type="radio"]:checked + label span{
    display: block;

}

/* When the radio is focused, style the label accordingly */
.radio-group input[type="radio"]:focus + label {
    outline-offset: 3px;
}

/* When the radio is checked, style the pseudo-element accordingly */
.radio-group input[type="radio"]:checked + label::after {
    background: var(--blue);
}