/* Custom Styles for Login Button */
.sa-switcher {
    color: #ec6d2b !important;
    transition: transform 0.3s ease-in-out;
}
.sa-switcher:hover {
    color: #d56528 !important;
    transform: translateX(-10px);
}

.lg a.dropdown-item {
    padding: 10px 10px;
    border-radius: 5px;
}

.lg .dropdown-menu.dropdown-menu-end.show {
    padding: 0;
}

/* Custom Styles for Admin Dashboard */
nav.navbar {
    z-index: 1;
}

/* Sidebar Styling */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /*width: 250px;
    background-image: linear-gradient(0deg, #004d8f, #00b7ff);*/
    background-image: linear-gradient(0deg, #325327, #538840);
    padding-top: 20px;
    z-index: 9;
}

.sidebar-heading {
    text-align: center;
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 20px;
}

.sb .nav-link {
    color: #ffffff;
    font-weight: 500;
}

.sb .nav-link:hover {
    color: #ffffff;
    scale: 1.01;
}

.sb .nav-link.active {
    background-color: #ffffff;
    /*border-radius: 20px 0 0 20px;*/
    border-radius: 5px 0 0 5px;
    color: #2a5075;
}

.sb .nav-item {
    transition: background 0.3s;
    position: relative;
    /*border-radius: 20px 0 0 20px;*/
    border-radius: 5px 0 0 5px;
    margin-left: 5px;
}

.sb .nav-item:hover, .sb .submenu li:hover {
    background-color: #ffffff20;
}

.sb .nav-item i {
    margin-right: 10px;
    min-width: 20px;
}

.sb .dropdown-menu {
    border: none;
    border-radius: 0;
    background: #538840;
    padding: unset;
}
.sb .submenu { 
	display: none;
	position: absolute;
	left:100%; 
    top:0;
	min-width: 155px;
}
.sb li:hover > .submenu { 
    display: block; 
}
.sb .submenu li {
    padding: 0 0 0 5px;
    transition: background 0.3s;
}

/* Curvy Menu Item Left Side */
.sb .active .nav-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 15px 30px 0;
    border-color: transparent #343a40 transparent transparent;
}

/* Content Area Styling */
.content {
    margin-left: 250px;
    padding: 20px;
}

#mob-head {
    display: none;
    height: 100%;
}

#nav-offcanvas {
    background-image: linear-gradient(0deg, #325327, #538840);
}

#nav-offcanvas .nav-link.active, #nav-offcanvas .nav-item, #nav-offcanvas .submenu li, #nav-offcanvas .dropdown-menu {
    border-radius: 20px !important;
}

#nav-offcanvas .dropdown-menu {
    transform: unset  !important;
    width: 80%  !important;
    position: relative  !important;
}

/* Responsive Styles */
@media (max-width: 767.98px) {
    .sidebar {
        width: 100%;
        height: 60px;
        padding-top: 0;
        text-align: center;
        border-radius: 0 0 10px 10px;
    }

    #desk-head {
        display: none;
    }

    #mob-head {
        display: flex;
    }
    
    .sb .submenu { 
    	left: unset;
    }
    
    .sb .dropdown-menu { 
    	background: transparent;
    }
}


/* table */
.table-responsive .col-sm-12 {
    border-radius: 10px !important;
    border-color: transparent !important;
    margin-bottom: 0 !important;
}

.table-responsive .col-sm-12 table {
    margin-top: 0 !important;
}

.table {
    margin-bottom: 0 !important;
}

tbody tr {
    font-size: 13px;
    color: #4e4e4e;
    line-height: 1.2;
    font-weight: unset;
}

tbody tr.odd {
    background-color: transparent;
}

tbody tr.even {
    background-color: #f2f2f2;
}

th::after, th::before {
    display: none !important;
}

.table-responsive th {
    resize: horizontal;
    overflow: auto;
    background: #f9f9f8 !important;
    vertical-align: middle!important;
    font-weight: 500;
    padding: 5px 10px;
    padding-right: 10px !important;
    font-size: 13px;
}

.table-responsive td {
    padding: 4px 10px;
    padding-right: 10px !important;
    font-size: 12px;
}

.dataTables_filter {
    display: none !important;
}

.dataTables_length {
    margin: 5px 0 !important;
}

.dataTables_info {
    display:none !important;
}

.pagination {
    --bs-pagination-color: #ec6d2b;
    --bs-pagination-hover-color: #ec6d2b;
    --bs-pagination-focus-color: #ec6d2b;
    --bs-pagination-active-bg: #ec6d2b;
    --bs-pagination-active-border-color: #ec6d2b;
}

/* Tabs */
.nav-tabs .nav-link {
    background: #008dd2;
    color: white;
    margin: 0 2px;
    border-radius: 3px 3px 0 0;
    border:none;
}

.nav-tabs a.nav-link.active {
    border: 1px solid #80808040;
    background: #ADD8E6;
}

#store-info-tab {
    margin-left: 0;
}

#store-info-tab.active {
    margin-left: -0.5px;
}

ul#myTabs {
    border-bottom: none;
}

.tab-content {
    box-shadow: 0 0 1px grey;
}

/* fields */
.bootstrap-tagsinput .tag {
    margin: 2px 0;
    margin-right: 5px;
    color: white !important;
    background-color: #ec6d2b;
    padding: 0 5px 2px 5px;
    border-radius: 5px;
    font-size: 15px;
}

.bootstrap-tagsinput {
    display: flex !important;
    flex-wrap: wrap !important;
    width: calc(100% - 45px) !important;
    border-radius: 0 5px 5px 0 !important;
}

.customer-add .bootstrap-tagsinput {
    width: 100% !important;
    border-radius: 2px !important;
    padding: 7px;
}

/* Bootstrap customizing */
.card, .btn, .form-control, .rounded, .form-select {
    border-radius: 2px !important;
 }

 .btn-primary {
    --bs-btn-bg: #ec6d2b;
    --bs-btn-border-color: #ec6d2b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f2702a;
    --bs-btn-hover-border-color: #f2702a;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f2702a;
    --bs-btn-active-border-color: #f2702a;
    --bs-btn-disabled-bg: #e87f46;
    --bs-btn-disabled-border-color: #e87f46;
 }

.btn-primary:hover {
    background-color: #ff7637;
    border-color: #ff7637;
 }