/* global */
body {
    font-family: 'droid.Arabic.Kufi', sans-serif;
}
/* #832EE0 */

.btn.btn-primary {
    background-color: #832EE0;
    border-color: #AD42D8;
}

.btn.btn-primary.focus:not(.btn-text),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    color: #fff;
    background-color: #AD42D8;
    border-color: #AD42D8;
}

.btn.btn-primary:not(:disabled):not(.disabled).active,
.btn.btn-primary:not(:disabled):not(.disabled):active:not(.btn-text),
.show .btn.btn-primary.btn-dropdown, .show>.btn.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #AD42D8;
    border-color: #AD42D8;
}

.btn.btn-hover-primary.focus:not(.btn-text), .btn.btn-hover-primary:focus:not(.btn-text), .btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled) {
    background-color: #AD42D8 !important;
    border-color: #AD42D8 !important;
}


.navi .navi-item .navi-link:hover .navi-text {
    color: #450a47;
}


a:hover {
    color: #450a47;
}

.brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 80px;
}

.brand-logo img {
    width: 66px;
    filter: invert(0) brightness(50) !important;
}

.brand a p {
    color: #FFF;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    font-family: Poppins,Helvetica,sans-serif !important;
    margin-right: 10px;
}

.aside {
    width: 230px;
}

.aside-menu .menu-nav>.menu-item>.menu-heading .menu-text,
.aside-menu .menu-nav>.menu-item>.menu-link .menu-text {
    font-size: 13px !important;
}

@media (min-width: 992px) {
    .aside-fixed .wrapper {
        padding-right: 230px;
    }
}

@media (min-width: 992px) {
    .container-fluid {
        padding: 0 15px;
    }
}

.aside .menu-nav .menu-item .menu-icon i {
    font-size: 15px !important;
}

.aside-menu {
    margin-top: 0 !important;
}

.aside-menu .menu-nav>.menu-item>.menu-heading .menu-icon,
.aside-menu .menu-nav>.menu-item>.menu-link .menu-icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 29px;
    flex: 0 0 29px;
}

.aside-menu .menu-nav>.menu-item>.menu-heading .menu-icon svg,
.aside-menu .menu-nav>.menu-item>.menu-link .menu-icon svg {
    height: 20px;
    width: 20px;
}

.menu-item-active .menu-icon path {
    fill: #0096e3;
}

.menu-nav .menu-item a:hover .menu-icon path{
    fill: #0096e3 !important;
}


.btn .svg-icon {
    margin-left: 0;
}

.card.card-custom>.card-header .card-title,
.card.card-custom>.card-header .card-title .card-label {
    font-size: 1.1rem;
}

.card.card-custom>.card-header {
    min-height: 60px;
}

.settings-about {
    height: 350px;
    width: 80%;
}

@media (max-width: 991.98px) {
    .header-mobile-fixed .header-mobile  img {
        width: 52px !important;
        filter: invert(0) brightness(50) !important;
    }
}

@media (max-width: 991.98px) {
    .header-mobile .burger-icon:hover span {
        background-color: #0096e3;
    }

    .header-mobile .burger-icon:hover span::after,
    .header-mobile .burger-icon:hover span::before {
        background-color: #0096e3;
    }
}

@media (max-width: 575.98px) {
    .topbar .topbar-item .btn.btn-icon {
        height: 35px !important;
        width: 35px !important;
    }

    #kt_quick_user_toggle {
        background: #eaeaea;
    }
}

.panel-login {
    background: url(../images/login-bg3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    min-height: 100vh;
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;

}

.panel-login:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #832EE0, 0, #AD42D8 20%, #8c7575 100%);
    opacity: 0.7;
    z-index: -1;
}



.panel-login .login-logo  {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto 10px;
}

.panel-login .login-logo img {
    width: 84px;
}

.panel-login .login-box {
    padding: 20px;
    background: #FFF;
    border-radius: 10px;
    min-width: 500px;
}

.login-box-head {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.panel-login .form-group  {
    margin-bottom: 13px;
}

.panel-login .form-group label {
    font-size: 12px !important;
    color: #3f4254 !important;
    margin-bottom: 0;
}

.panel-login .form-group .form-control {
    border: 1px solid #DDD !important;
    height: 40px !important;
    border-radius: 3px !important;
    margin-top: 11px;
    padding: 10px !important;
}

.panel-login #kt_login_singin_form_submit_button {
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px !important;

}

@media (max-width: 576px) {
    .panel-login .login-wrapper {
        width: 90%;
    }

    .panel-login .login-box {
        min-width: 100%;
    }
}


.stormnology-cards {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.stormnology-card {
    background: #FFF !important;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15);
    border-radius: 10px;
    padding: 20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.stormnology-card:hover {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
    -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
            transform: translateY(-5px);
}

.stormnology-card .svg-icon.svg-icon-2x svg  {
    width: 30px !important;
    height: 30px !important;
}

.stormnology-card a {
    color: #832EE0 !important;
    pointer-events: none;
}

.stormnology-card .number {
    color: #832EE0;
    font-size: 20px;
    margin-right: 30px;
    margin-top: 10px;
}

@media (max-width: 576px) {
    .stormnology-cards {
        -ms-grid-columns: 1fr;
        grid-template-columns: repeat(1, 1fr);
    }
}

a.text-primary:focus,
a.text-primary:hover {
    color: #510853 !important;
}


.svg-icon.svg-icon-primary svg g [fill] {

    fill: linear-gradient(to right, #832EE0, #AD42D8) !important;
}

.aside-menu .menu-nav>.menu-item.menu-item-active>.menu-heading, .aside-menu .menu-nav>.menu-item.menu-item-active>.menu-link {
    background: linear-gradient(to right, #832EE0, #AD42D8);
}

.menu-nav .menu-item a:hover .menu-icon path {
    fill: #FFF !important;
}
.menu-item-active .menu-icon path {
    fill: #FFF;
}


.menu-item-active .menu-icon img {
    filter: invert(1) brightness(10);
}

.menu-item-active .menu-icon > i {
    color: #FFFFFF;
}

.menu-item-active .menu-submenu .menu-item-active .menu-icon i {
    color: #FFFFFF;
}

.menu-item-active .menu-submenu .menu-icon > i {
    color: #b5b5c3;
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-heading .menu-bullet.menu-bullet-dot>span, .aside-menu .menu-nav>.menu-item .menu-submenu .menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover>.menu-link .menu-bullet.menu-bullet-dot>span  {
    background-color: #FFF;
}


.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-heading, .aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-link {
    background: linear-gradient(to right, #832EE0, #AD42D8);
}

.aside-menu .menu-nav>.menu-item .menu-submenu .menu-item.menu-item-active>.menu-link .menu-bullet.menu-bullet-dot>span {
    background-color: #FFF;
}


.btn.btn-primary .fa-plus {
    font-size: 11px;
    position: relative;
    top: 1px;
}

.nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link.active, .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link:hover:not(.disabled), .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .show>.nav-link {
    border-bottom: 3px solid #832EE0;
}

.nav .nav-link.active .nav-text, .nav .nav-link:hover:not(.disabled) .nav-text, .nav .show>.nav-link .nav-text {
    color: #832EE0;
}

.card-spacer {
    padding: 0 15px !important;
    margin-bottom: 30px !important;
}

.card.card-custom>.card-body {
    padding: 15px;
}

.card.card-custom>.card-header {
    min-height: 50px;
    border-bottom: 1px solid #EEE !important;
}

.card-table-box {
    max-height: 400px;
    min-height: 400px;
    overflow-y: auto;
    padding-left: 10px;
}

.card-table-box::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
.card-table-box::-webkit-scrollbar-thumb {
    background: #d4d4d4;
}
.card-table-box::-webkit-scrollbar-track {
    background: #f9f9f9;
}

.card-table-box .table td,
.card-table-box .table th {
    font-size: 12px;
    text-align: center;
}

.card-switch {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .header-fixed.subheader-fixed.subheader-enabled .wrapper {
        padding-top: 60px;
    }
}

@media (max-width: 991.98px) {
    .header-mobile-fixed .wrapper {
        padding-top: 80px !important;
    }
}

@media (min-width: 1400px) {
    .d-flex.flex-column-fluid > .container {
        max-width: 100%;
    }
}


.stormnology-card img {
    width: 40px;
    height: 40px;
}

.stormnology-card i {
    font-size: 30px !important;
}

.menu-icon img {
    width: 20px;
    height: 20px;
}

.menu-icon  i {
    font-size: 18px !important;
}

.aside .aside-menu.ps>.ps__rail-y {
    display: none;
}

.switch input:checked~span:after {
    background-color: #832EE0;
}



.datatable.datatable-default>.datatable-pager>.datatable-pager-nav>li>.datatable-pager-link.datatable-pager-link-active {
    background-color: #832EE0
}

.datatable.datatable-default>.datatable-pager>.datatable-pager-nav>li>.datatable-pager-link:hover:not(.datatable-pager-link-disabled) {
    background-color: #832EE0
}

.switch input:checked~span:after {
    background-color: #832EE0
}

.swal2-styled.swal2-confirm {
    background-color: #832EE0 !important;
}

.note-editor.note-frame .note-editing-area .note-editable {
    height: 150px;
}

.btn-action .btn {
    min-width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.btn-action .btn.btn-default {
    color: #606060;
    background-color: #dfe0e1;
    border-color: #dfe0e1;
}

.btn-action .btn.btn-default:hover {
    color: #000;
    background-color: #c7c7c7;
    border-color: #c7c7c7;
}

.btn-action .btn.btn-default.focus:not(.btn-text),
.btn-action .btn.btn-default:focus:not(.btn-text),
.btn-action .btn.btn-default:hover:not(.btn-text):not(:disabled):not(.disabled) {
    color: #000;
    background-color: #c7c7c7;
    border-color: #c7c7c7;
}

.scrolltop {
    background-color: #832EE0;
    transition: 0.3s ;
}

@media (max-width: 575.98px) {
   .header .topbar .topbar-item .btn.btn-icon {
        height: auto !important;
        width: auto !important;
    }
}


@media (max-width: 991.98px) {
    .header-mobile .btn.active .svg-icon svg g [fill], .header-mobile .btn:hover .svg-icon svg g [fill] {
        fill: #832EE0;
    }
}


.datatable-cell .alert-info {
    background-color: transparent;
}

.datatable.datatable-default>.datatable-table>.datatable-body .datatable-toggle-detail i {
    color: #832EE0 !important
}

.btn.btn-clean.focus:not(.btn-text) i, .btn.btn-clean:focus:not(.btn-text) i, .btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled) i{
    color: #832EE0 !important;
}

@media (max-width: 575.98px) {
    .topbar .topbar-item .btn.btn-icon {
        height: 35px !important;
        width: 35px !important;
    }

    #kt_quick_user_toggle {
        background: #eaeaea;
    }
}


.btn.btn-light-primary {
    color: #832EE0;
    background-color: #f7eaeb;
}

.btn.btn-light-primary:hover {
    color: #FFF;
    background-color: #832EE0;
}


.btn.btn-light-primary.focus:not(.btn-text),
.btn.btn-light-primary:focus:not(.btn-text),
.btn.btn-light-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-primary:not(:disabled):not(.disabled).active,
.btn.btn-light-primary:not(:disabled):not(.disabled):active:not(.btn-text),
.show .btn.btn-light-primary.btn-dropdown,
.show>.btn.btn-light-primary.dropdown-toggle

{
    color: #FFF;
    background-color: #832EE0;
}

.form-control:focus {
    border-color: #e4e6ef !important;
}

.text-primary {
    color: #832EE0 !important;
}

.modal .modal-header .close:hover,
.modal .modal-header .close:hover .ki, .modal .modal-header .close:hover i
{
    color: #832EE0;
}

.text-hover-primary:hover, a.text-hover-primary:hover {
    color: #832EE0 !important;
}

.permissions .checkbox-inline .checkbox {
    margin-left: 3rem;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: row-reverse;
}

.checkbox>input:checked~span {
    background-color: #832EE0;
}

.accordion.accordion-toggle-arrow .card .card-header .card-title {
    color: #832EE0;
}

.accordion.accordion-toggle-arrow .card .card-header .card-title:after {
    color: #832EE0;
}

.btn-container {
    display: flex;
    justify-content: flex-end;
}

.btn-container .fa-edit {
    font-size: 14px !important;
}

.btn.btn-default {
    color: #565656;
    background-color: #f7f7f7;
    padding: 8px 25px !important;
}

.btn.btn-default.focus:not(.btn-text),
.btn.btn-default:focus:not(.btn-text),
.btn.btn-default:hover:not(.btn-text):not(:disabled):not(.disabled) {
    color: #434344;
    background-color: #e3e3e3;
}

.navi .navi-item .navi-link.active .navi-text {
    color: #832EE0;
}

.navi .navi-item .navi-link.active .navi-icon svg g [fill] {
    fill: #832EE0;
}

.navi .navi-item .navi-link:hover .navi-icon svg g [fill] {
    fill: #832EE0;
}


label.error {
    font-size: 12px !important;
    margin-top: 5px !important;
}

.form-group label {
    direction: ltr;
}

.rateit.rateit-font .rateit-reset span {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0;
    height: 0;
}

.table .my-border-raduis-circle {
    width: 30px;
    height: 30px;
}

.datatable-table .my-border-raduis-circle {
    width: 30px !important;
    height: 30px;
}

/* order-data table */

.order-data-wrap .order-data-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    margin-bottom: 15px;
}

.order-data-wrap .order-data-head  h6 {
    margin-bottom: 0;
}

.order-data-wrap .order-data-details {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.order-data-wrap .order-data-details .container {
    padding: 0;
}

.order-data-wrap .order-data-details .order-data-info h5 {
    font-size: 14px;
    color: #232323;
    font-weight: 600;
    margin-bottom: 20px;
}

.order-data-wrap .order-data-details .order-data-info div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 8px;
}

.order-data-wrap .order-data-details .order-data-info div label {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 0;
}

.order-data-wrap .order-data-details .order-data-info div p {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 16px;
    padding-right: 5px;
}

.order-data-wrap .order-data-table {
    margin-top: 30px;
}

.order-data-wrap .order-data-table .products-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.order-data-wrap .order-data-table .products-box .products-img {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 767px) {
    .order-data-wrap .order-data-table .products-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .order-data-wrap .order-data-table .products-box .products-img {
        flex-shrink: 0;
        margin-bottom: 15px;

    }
}

.order-data-wrap .order-data-table thead tr {
    background: #f5f5f5;
}

.order-data-wrap .order-data-table td {
    vertical-align: middle;
}

.order-data-wrap .order-data-table tbody td {
    font-weight: 500;
    font-size: 14px;
}

.order-data-wrap .order-data-table tbody td .total {
    font-weight: bold;
    font-size: 13px;
}
.order-data-wrap .order-data-table tbody td .total-number {
    font-weight: bold;
    color: #08b36c;
    font-size: 15px;
}

.order-data-wrap .order-data-table p {
    margin-bottom: 0;
}

.order-data-wrap .order-data-table .products-box a {
    padding-right: 5px;
    color: #232323;
}

.order-data-wrap .order-data-table  .products-hint {
    font-size: 12px;
    color: #832EE0;
}

.modal-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.product-details-modal .modal-header {
    padding: 15px;
}

.product-details-modal .modal-header .modal-title {
    font-size: 16px !important;
}

.product-details-modal .product-details-inner label {
    font-weight: 600;
    font-size: 13px;
}

.product-details-modal .product-details-inner p {
    font-size: 15px;
}

.clients-table table thead tr {
    vertical-align: middle;
}

.clients-table table thead tr th {
    vertical-align: middle !important;
}

.clients-table table tbody td {
    vertical-align: middle !important;
}

.clients-table  .user-clients-th {
    width: 60%;
}

.clients-table .clients-th {
    width: 13.3%;
    text-align: center;
}

.clients-table .user-clients-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.clients-table .user-clients-box .img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
.clients-table .user-clients-box .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
}

.clients-table .user-clients-info {
    padding-right: 10px;
}

.clients-table .user-clients-info h5 {
    font-size: 14px;
    font-weight: bold;
}

.clients-table .user-clients-info-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.clients-table .user-clients-info-row div {
    margin-left: 10px;
}

.clients-table .user-clients-info-row div i {
    font-size: 13px;
}

.clients-table .user-clients-info-row div span {
    font-size: 13px;
    color: #6c6c6c;
}

.clients-table p {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}

.clients-table  .switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.order-data-modal .modal-body {
    padding: 0 !important;
    padding-bottom: 20px !important;
}

.order-data-modal .order-data-head {
    background: #3f3f52 !important;
    padding: 10px 15px;
    color: #FFF;
}

.order-data-modal .order-data-wrap .order-data-details,
.order-data-modal .order-data-wrap .order-data-table,
.order-data-modal .order-data-wrap .modal-btn
{
    padding: 0 20px;
}

.product-img {
  width: 100px !important;
  height: 100px !important;
}

.products-table .datatable-head tr [data-field="title"] span {
    width: 170px !important;
}

.products-table .datatable-body tr [data-field="title"] span {
    width: 170px !important;
}

.products-table .datatable-body tr td .product-img {
    width: 80px !important;
    height: 80px !important;
}

.products-table .change_qty {
    font-size: 14px;
    color: #3f4254;
    font-weight: 500;
}

.edit-quantity .edit-quantity-box {
    display: flex;
    align-items: center;
}

.edit-quantity .edit-quantity-box label:nth-of-type(1) {
    flex-shrink: 0;
}

.edit-quantity .edit-quantity-box label:nth-of-type(2) {
    padding-right: 10px;
    font-weight: bold;

}

.edit-quantity .edit-quantity-box .quantity-input {
    margin-right: 20px;
    width: 150px;
}

.modal .modal-header .modal-title {
    font-size: 1.1rem;
}

.image-input .image-input-wrapper {
    border: 1px solid #DDD !important
}

.my-border-raduis-circle {
    margin-left: 7px;
}

.modal-product-table .table thead {
    background: #f7f7f7;
}

.modal-product-table .table tr th {
    text-align: center;
}

.modal-product-table .table tr th:nth-of-type(1) {
    width: 400px;
    text-align: right;
}
.modal-product-table .table tr td:nth-of-type(1) {
    width: 400px;
    text-align: right;
}

@media (max-width: 575px) {
    .modal-product-table .table tr th:nth-of-type(1),
    .modal-product-table .table tr td:nth-of-type(1) {
        width: auto !important;
    }

}

.modal-product-table .table tr td {
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
}

.modal-product-table .hint p {
    font-size: 13px;
    text-align: right;
    margin: 0;
    color: #3f4254;
}

.modal-product-table .totla-row {
    font-weight: bold;
}

.orders-tabs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
}

@media (max-width: 1300px) {
    .orders-tabs {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 991px) {
    .orders-tabs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .orders-tabs {
        overflow-x: scroll;
        grid-template-columns: none;
        padding: 0 10px;
        grid-auto-flow: column;
        grid-auto-columns: 30%;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
        scroll-padding-inline: 16px;
    }
}

@media (max-width: 575px) {
    .orders-tabs {
        grid-auto-columns: 45%;
    }
}

.orders-tabs .order-tab {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    cursor: pointer;
    padding: 15px 15px 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    border-radius: 5px;
    background: #FFF;
    transition: box-shadow 0.3s;
}

@media (max-width: 767px) {
    .orders-tabs .order-tab {
        padding: 15px 10px;
        margin: 15px 0;
    }
}

@media (max-width: 575px) {
    .orders-tabs .order-tab {
        padding: 15px;
    }
}

.orders-tabs .order-tab:hover {
    box-shadow: 0 0 20px  rgba(0,0,0,0.05);
}

.orders-tabs .order-tab span i {
    font-size: 18px;
    color: #9898a1;
}

.orders-tabs .order-tab div {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-top: 15px;
}

.orders-tabs .order-tab div h4 {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: bold;
    color: #606072;
}

.orders-tabs .order-tab div p {
    font-size: 15px;
    font-weight: bold;
    color: #626262;
    margin-bottom: 0;
}

.orders-tabs .order-tab.active {
    background: #f56970;
}

.orders-tabs .order-tab.active div h4 {
    color: #FFF;
}

.orders-tabs .order-tab.active div p {
    color: #FFF;
}

.orders-tabs .order-tab.active  span i {
    color: #FFF;
}

.order-data-box {
    border: 1px solid #f5f5f5;
    border-radius: 5px;
    margin-bottom: 20px;
    min-height: 180px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.order-data-box .head {
    padding: 15px 10px;
    background: #f3f3f3;
}

.order-data-box .head h5 {
    margin-bottom: 0;
    font-size: 13px;
    color: #444;
    font-weight: bold;
}

.order-data-box .order-data-inner {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.order-data-box .order-data-inner .user-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.order-data-box .order-data-inner .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.order-data-box .order-data-inner div {
    display: flex;
    align-items: center;
}

.order-data-box .order-data-inner div:not(:last-of-type) {
    margin-bottom: 10px;
}

.order-data-box .order-data-inner div > i {
    font-size: 13px;
}

.order-data-box .order-data-inner div p {
    margin-right: 8px;
    margin-bottom: 0;
    color: #444;
    font-weight: 500;
    font-size: 14px;
}

.order-data-box .order-data-inner div a {
    color: inherit;
}

.order-data-box .order-data-inner div label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

.order-data-box .order-data-inner div .call {
    background: #35cbb5;
    border-radius: 20px;
    padding: 3px 10px;
    margin-right: 5px;
    transition: background 0.3s;
}

.order-data-box .order-data-inner div .call:hover {
    background: #279e8c;
}

.order-data-box .order-data-inner div .call i {
    font-size: 8px;
    color: #FFF;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
}

.order-data-box .order-data-inner div .call span {
    color: #FFF;
    font-size: 11px;
    padding-right: 3px;
}


.order-data-box .shipping-information-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 10px;
}

.order-data-box .shipping-information-inner h4 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14px;
}

.order-data-box .shipping-information-inner p {
    margin: 0 !important;
    font-weight: normal !important;
}

/* date */
.report-date {
    margin-bottom: 15px;
}

.report-date .report-date-btn {
    background: #FFF;
    padding: 5px 15px;
    border: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    min-height: 50px;
    position: relative;
    padding-left: 25px;
}

.report-date .report-date-btn .arrow {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.report-date .report-date-btn:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .report-date .report-date-btn {
        width: 100%;
    }
}

.report-date .report-date-btn .text {
    display: flex;
    align-items: center;
    border-left: 1px solid #efefef;
    padding-left: 10px;
}

.report-date .report-date-btn .text i {
    font-size: 14px;
}

.report-date .report-date-btn .text p {
    font-size: 12px;
    font-weight: 600;
    padding-right: 3px;
    margin-bottom: 0;
}

.report-date .report-date-btn .date-range {
    padding-right: 10px;
}

.report-date .report-date-btn input {
    border: none;
    outline: none;
    cursor: pointer;
    width: 180px;
    font-size: 14px;
}

.report-type-card {
    padding: 20px;
    border-bottom: 1px solid #EEE;
    padding-bottom: 30px;
    margin-bottom: 10px;
}

.report-type-card h5 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.report-type-card .report-type-navs .nav-tabs {
    border: none;
}

.report-type-card .report-type-navs .nav-tabs .nav-item {
    margin: 0;
}

.report-type-card .report-type-navs .nav-tabs .nav-item .nav-link {
    border: 1px solid #DDD;
    padding: 12px 10px;
    min-width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    margin-left: 15px;
    border-radius: 5px;
    margin-bottom: 15px;

}

.report-type-card .report-type-navs .nav-tabs .nav-item .nav-link.active {
    border: 1px solid #832EE0 !important;
}

.report-type-card .report-type-navs .nav-tabs .nav-item .nav-link i {
    font-size: 16px;
    transition: .15s ease;
}

.report-type-card .report-type-navs .nav-tabs .nav-item .nav-link.active i {
    color: #832EE0;
}

.report-type-card .report-type-navs .nav-tabs .nav-item .nav-link span {
    padding-right: 8px;
}

.report-type-card .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link.active,
.report-type-card .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link:hover:not(.disabled),
.report-type-card .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .show>.nav-link {
    border: 1px solid #832EE0 !important;
}


.report-type-card .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link.active i,
.report-type-card .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .nav-link:hover:not(.disabled) i,
.report-type-card .nav.nav-tabs.nav-tabs-line.nav-tabs-line-3x .show>.nav-link i {
    color: #832EE0;
}

.order-info-panel .rec-order-info-block .order-top-line {
    display: flex;
    align-items: center;
}

.order-info-panel .rec-order-info-block .order-top-line i {
    font-size: 14px;
    margin-left: 2px;
}

.order-info-panel .rec-order-info-block .order-top-line span {
    display: block;
    color: #aaa;
    font-size: 14px;
    margin-right: 5px;
}

.order-info-panel .rec-order-info-block .order-second-line {
    font-size: 15px;
    color: #444;
    margin-top: 13px;
    font-weight: bold;
}

.order-info-panel .rec-order-info-block .btn  {
    font-size: 12px;
    padding: 7px 10px;
}


.cs-table-foot td {
    border-bottom: 1px solid #ebedf3;
}

.apexcharts-legend-text,
.apexcharts-text, .apexcharts-title-text {
    font-family: 'droid.Arabic.Kufi', sans-serif !important;
}

.legend-mouseover-inactive{
    opacity: 1 !important;
}


/* marketing-modal */

.marketing-modal .modal-body {
    padding: 30px 28px;
}

@media (min-width: 576px) {
    .marketing-modal .modal-dialog {
        max-width: 675px;
    }
}

.marketing-modal .modal-content {
    border-radius: 8px;
    box-shadow: none;
    border: none;
}

.marketing-modal .modal-header {
    background: #F8F8F8;
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.marketing-modal .modal-header .modal-title {
    font-size: 12px;
    font-weight: bold;
    color: #1C1C1C;
}

.marketing-modal .modal-header .btn-close {
    opacity: 1;
    background: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    padding: 0;
    outline: none !important;
    box-shadow: none !important
}

.marketing-modal .modal-footer {
    background: #F8F8F8;
    border-top: 0;
}

.marketing-modal .modal-footer .btn-secondary {
    min-width: 87px;
    height: 35px;
    font-size: 13px;
    font-weight: 500;
}

.marketing-modal .marketing-heading {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #832EE0;
    margin-bottom: 25px;

}

.marketing-modal .marketing-message {
    background: #F8F8F8;
    border-radius: 8px;
    padding: 21px;
    margin-bottom: 15px;
}

.marketing-modal .marketing-message h4 {
    font-size: 14px;
    font-weight: bold;
    color: #1C1C1C;
    margin-bottom: 15px;
}

.marketing-modal .marketing-message p {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
    color: #1C1C1C;
}

.marketing-modal .marketing-links {
    margin-bottom: 12px;
}

.marketing-modal .marketing-links h4 {
    color: #1C1C1C;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
}

.marketing-modal .marketing-links a {
    color: #34AEFF;
    font-size: 14px;
    word-break: break-all;
}

.marketing-modal .copy-message-btn {
    background-color: #414141;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.7px;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    height: 43px;
    border-radius: 5px;
    border-color: transparent;
    transition: 0.3s;
}

.marketing-modal .copy-message-btn:hover {
    background-color: #363030;
    transform: scale(0.98) translateY(2px);
}

.marketing-modal .link-details {
    margin-top: 20px;
}

.marketing-modal .link-details h5 {
    font-size: 15px;
    font-weight: bold;
    color: #832EE0;
    margin-bottom: 13px;
}

.marketing-modal .link-details .marketing-link-btn {
    border: 1px solid #F0F0F0;
    padding: 4px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
}

.marketing-modal .link-details .marketing-link-btn .link-btn-text {
    display: flex;
    align-items: center;
    color: #1C1C1C;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
}

.marketing-modal .link-details .marketing-link-btn .link-btn-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 85px;
    font-size: 15px;
    gap: 4.7px;
    background: #F9F9F9;
    height: 100%;
    border-radius: 8px;
}

.marketing-modal .link-details .marketing-link-btn .link-btn-copy.done {
    background: #189b83;
    color: #FFF;
    pointer-events: none;
}

.marketing-modal .link-details .marketing-link-btn .link-btn-copy:hover {
    background: #e6e5e5;
}


.datatable-order.datatable.datatable-default.datatable-head-custom>.datatable-table>.datatable-foot .datatable-row>.datatable-cell>span, .datatable-order.datatable.datatable-default.datatable-head-custom>.datatable-table>.datatable-head .datatable-row>.datatable-cell>span {
    font-size: 11px;
}


.datatable-order .change_order_status {
    font-size: 10px !important;
}

.report-search .form-control {
    height: 50px;
}
.report-search .custom-select {
    min-width: 50px;
    box-shadow: none;
    border-radius: 5px 0 0 5px;
}

.mobile-input {
    direction: ltr;
    text-align: left;
}

.datatable-order * {
    font-size: 11px !important;
}

.datatable-order th span {
    font-size: 10px !important;
}


.datatable-order .datatable-cell {
    padding: 1rem 3px !important;
}

.datatable-order .dropdown .btn {
    font-size: 10px !important;
    padding: 8px 5px !important;
}

.datatable-products * {
    font-size: 11.5px !important;
}

.datatable-products .datatable-cell {
    padding: 1rem 5px !important;
}

.datatable-cell.datatable-products th span {
    font-size: 11px !important;
}

.sticky-thead {
    position: fixed !important;
    top: 0;
    z-index: 1000;
    background: #FFF;
}

.order-btn-wrap .btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 30px !important;
    height: 30px !important;
}

.bg-emerald,
.btn-emerald
{
    background-color: #337CCF !important;
    color: #FFF !important;
}

.bg-fuchsia,
.btn-fuchsia
{
    background-color: #4a044e !important;
    color: #FFF !important;
}

.bg-jacksons-purple,
.btn-jacksons-purple
{
    background-color: #251a9e !important;
    color: #FFF !important;
}

.bg-forest-green,
.btn-forest-green
{
    background-color: #1a9e23 !important;
    color: #FFF !important;
}

.bg-reefgold,
.btn-reefgold
{
    background-color: #cfd121 !important;
    color: #FFF !important;
}

.bg-cognac,
.btn-cognac
{
    background-color: #84391c !important;
    color: #FFF !important;
}

.no-arrow {
    -moz-appearance: textfield;
}

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.data-repeater-item {
    border: 1px dashed #DDD;
    background: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.wrapping {
    position: relative;
}

.fixed-scroll.fixed {
    position: fixed;
    top: 15px;
    left: 0;
    padding: 0 15px;
    width: calc(100% - 230px);
    z-index: 99;
}

.fixed-scroll.fixed .card {
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
    margin: 0 !important;
}

@media (max-width: 991px) {
    .fixed-scroll.fixed {
        width: 100%;
    }
}