@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap');

/*
    primary color: #309975
    gray color: #f1f1f1!important
*/

*,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Tajawal', sans-serif;
}

body,
html {
    height: 100%!important;
    width: 100%!important;
    box-sizing: border-box!important;
}


/*************************** pos styles **************************************/

.lockscreen .custom-content {
    background-color: transparent!important;
    overflow-x: hidden;
}

.lockscreen {
    background-color: #43d477;
    background-image: url(/img/pattern.png);
}

.pos-form-actions {
    background-color: transparent;
}

.product_box:hover {
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
}

.pos_quantity_container input {
    border-radius: 5em!important;
    text-align: center!important;
}

.pos_quantity_container .btn {
    border-radius: 5em!important;
    background-color: #f1f1f1!important;
}

.pos_quantity_container .btn i {
    color: black!important;
}

.btn-default .i {
    color: white!important;
}

.sb-shadow {
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%);
}

.pos_product_div {
    padding: 0px!important;
}

.pos_form_div_container {
    padding: 3px!important;
}

.btn-default {
    border: 2px solid darkgray;
    color: black!important;
    margin-left: 2px!important;
}

.pos_product_div table td {
    font-size: 15px!important;
    color: black!important;
}

.pos_remove_row {
    padding: 12px!important;
    border-radius: 7px!important;
    background-color: gray;
    color: black!important;
    margin-top: -10px;
}

.pos_quantity_container,
.pos-tr-total {}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    border-top: 1px solid #d8d8d8;
}

.btn {
    border-radius: 7px!important;
}

hr {
    background-color: black;
}


/************* notifications styles **************/

.notif-icon {
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%);
    border: 1px dashed darkgreen;
}

.notification-li {
    border-bottom: 2px dashed gray;
    background-color: white!important;
}

.notification-li:last-of-type {
    border-bottom: none!important;
}


/************* sidebar styles **************/

body,
html {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}

.main-sidebar,
.sidebar {
    background-color: transparent!important;
    background-size: auto;
}

.skin-black-light .main-sidebar,
.skin-blue-light .main-sidebar,
.skin-green-light .main-sidebar,
.skin-purple-light .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow-light .main-sidebar {
    /**/
}

.skin-blue .main-header .navbar,
.skin-blue-light .main-header .navbar,
.skin-blue .main-header .logo,
.skin-blue-light .main-header .logo,
.skin-black-light .main-sidebar,
.skin-blue-light .main-sidebar,
.skin-green-light .main-sidebar,
.skin-purple-light .main-sidebar,
.skin-red-light .main-sidebar,
.skin-yellow-light .main-sidebar,
.skin-black-light .sidebar-menu>li>.treeview-menu,
.skin-blue-light .sidebar-menu>li>.treeview-menu,
.skin-green-light .sidebar-menu>li>.treeview-menu,
.skin-purple-light .sidebar-menu>li>.treeview-menu,
.skin-red-light .sidebar-menu>li>.treeview-menu,
.content-wrapper,
.skin-yellow-light .sidebar-menu>li>.treeview-menu,
.skin-blue-light .left-side,
.skin-blue-light .main-sidebar,
.skin-blue-light .wrapper {
    background-color: transparent!important;
    /* background-color: white!important;*/
}

.skin-blue-light .sidebar-menu>li>a,
.sidebar .tree-menu a span,
.treeview-menu a span,
.treeview-menu a .fa {
    color: white;
    font-weight: bold;
}

.custom-content {
    border-radius: 10px;
    background-color: #fafafa !important;
    width: 100%;
    min-height: 90vh;
}

.content-wrapper {
    padding-bottom: 10px;
    padding-left: 10px;
}

.skin-black-light .sidebar-menu>li.active>a,
.skin-black-light .sidebar-menu>li.menu-open>a,
.skin-black-light .sidebar-menu>li:hover>a,
.skin-blue-light .sidebar-menu>li.active>a,
.skin-blue-light .sidebar-menu>li.menu-open>a,
.skin-blue-light .sidebar-menu>li:hover>a,
.skin-green-light .sidebar-menu>li.active>a,
.skin-green-light .sidebar-menu>li.menu-open>a,
.skin-green-light .sidebar-menu>li:hover>a,
.skin-purple-light .sidebar-menu>li.active>a,
.skin-purple-light .sidebar-menu>li.menu-open>a,
.skin-purple-light .sidebar-menu>li:hover>a,
.skin-red-light .sidebar-menu>li.active>a,
.skin-red-light .sidebar-menu>li.menu-open>a,
.skin-red-light .sidebar-menu>li:hover>a,
.skin-yellow-light .sidebar-menu>li.active>a,
.skin-yellow-light .sidebar-menu>li.menu-open>a,
.skin-yellow-light .sidebar-menu>li:hover>a {
    margin: 3px;
    background-color: white!important;
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%);
    color: #04584f!important;
    border-radius: 7px;
}

.sidebar-menu>li:hover>a span {
    color: #04584f!important;
}


/************* form styles **************/

.form-control {
    border: 2px solid darkgray!important;
    border-radius: 5px!important;
    background-color: #fcfcfc !important;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover {
    background-color: gray;
}

ul.dt-button-collection {
    background-color: white;
    border: 1px solid gray;
}

.nav-tabs-custom>.nav-tabs {
    padding: 5px;
}


/************* nav items customize **************/

.nav-tabs-custom>.nav-tabs>li.active {
    border: 2px solid darkgray;
    border-radius: 7px;
}

.nav-tabs-custom>.nav-tabs>li>a {
    padding: 5px!important;
}

.nav-tabs-custom>.nav-tabs>li.active:hover>a,
.nav-tabs-custom>.nav-tabs>li.active>a {
    background-color: transparent;
}


/************* table customize **************/

.dataTables_wrapper .table tbody tr {}

.dataTables_wrapper .table {}

.dataTables_wrapper {
    margin-left: -10px;
    margin-right: -10px;
}

.dataTables_wrapper .row {
    margin-left: 5px!important;
    margin-right: 5px!important;
}

.table tr td:first-of-type {}

.dataTables_wrapper .table tr td:last-of-type {}

.table>thead:first-child>tr:first-child>th {
    height: 35px;
}

.dataTables_wrapper .dataTables_filter input[type=search] {
    background-color: white;
    border-radius: 4px;
    width: 180px!important;
}

.table td,
.table th {
    color: black;
}

.table .btn {
    color: white;
}

.table * {
    color: black;
}

.btn {
    box-shadow: 0 1px 1px rgb(0 0 0 / 12%);
}

.btn-primary {
    background: linear-gradient(to top, #0ba360 0%, #3cba92 100%)!important;
    color: white;
    border: 2px solid #0ba360;
}

.btn-primary:hover {
    border: 2px solid #1a9f65;
}