/* 1. Import Roboto from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

/* 2. Hijack the template's default font variable */
:root {
    --font-rubik: 'Roboto', sans-serif !important;
}

/* 3. Force Roboto on the body and all typography elements */
body, 
h1, h2, h3, h4, h5, h6, 
p, a, span, button, input, select, textarea,
.sidebar-wrapper .main-menu > li > a,
.sidebar-wrapper .sub-menu li a {
    font-family: 'Roboto', sans-serif !important;
}


body {
   
    /* background-color: #f3f3f3; */
    background-color: #f6f7fa;
}


main {
 
    padding-top: 2rem;
}


.delete-details-list {
  list-style-type: none; /* Removes the bullet points */
  padding-left: 0; /* Removes default left padding */
  text-align: left; /* Aligns the list to the left */
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}

.details-row {
  display: flex; /* Makes the li a flex container */
  justify-content: space-between; /* Pushes the first item (label) to the left and the second (value) to the right */
  margin-bottom: 5px; /* Adds space between list items */
}

.activesidebarselected
{
  background-color: rgba(15, 98, 106,1);
  color:white !important
}

.activesidebarselected>a
{
  color:white !important
}

.activesidebarselected svg {
    
    fill: white !important;
    /* stroke: white !important; */
}


.profile-container .person-details {
   
    text-align: left;
}

.remove-pic-button {
  position: absolute; /* Position relative to #imgPreview */
  top: 50%; /* Move the top edge to the vertical center */
  left: 50%; /* Move the left edge to the horizontal center */
  transform: translate(-50%, -50%); /* Adjust for the button's own width/height to truly center it */
  z-index: 10; /* Ensure it's above the image */

  /* Button styling */
  background-color: rgba(255, 0, 0, 0.7); /* Red with some transparency */
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px; /* Slightly larger for better visibility in the center */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 16px; /* Larger icon */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

/* Make button visible on hover over the preview area */
.avatar-preview:hover .remove-pic-button {
  opacity: 1;
}

.remove-pic-button:hover {
  background-color: rgba(255, 0, 0, 0.9);
}


nav .app-logo .logo img {
    width: 280px;
  
}

.google-blue-button
{
    background-color: #4285F4;
    color: white;
}

nav .app-logo .logo {
    padding: 0.1rem;
    
}


.app-line-breadcrumbs li + li.active a {
    color: #527321 !important;
}

.btn-orange-outlined
{
 border-color: #ed563d;
 color: #ed563d;
   
}

.btn-orange-outlined:hover
{
  background-color: #ed563d;
 color:white;  
}

.tab-wrapper .tabs .tab-link.active {
    color: #fff;
    border-color: rgba(var(--primary), 1);
    border: 1px dotted;
}


.app-form.app-icon-form i {
  
    /* top: 7px; */
}


.app-form.app-icon-form .form-control {
   
    border: 2px solid rgb(0 0 0 / 55%);
}


.app-logo .ti-settings:before {
    content: "\eb20";
    color: green;
}

.footer-text {
  
    color: #373737 !important;
    
}


.app-wrapper .app-content {
   
    box-shadow: none;
}


nav .app-nav .main-nav > li:not(.menu-title) ul li {
    padding: 0.2rem;
   
}
nav .app-nav .main-nav > li:not(.menu-title) ul li:hover {
    background-color: lightgrey;
   
}





/* ========================================================
   ULTIMATE PROFESSIONAL DARK SIDEBAR (Milma Theme)
   ======================================================== */

/* 1. Sidebar Main Container */
nav {
    background-color: #0c4e55 !important; /* Deepened Milma Teal for better contrast */
    border-right: none !important;
}

.pos-menu-item
{
    color:white !important;
    background-color:  #0c4e55 !important;
    padding: 5px 5px !important;
}

/* 2. Sidebar Section Titles (e.g., POINT OF SALE, OPERATIONS) */
.sidebar-wrapper .menu-title span {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    padding-left: 5px !important;
}

/* 3. Top-Level Menu Links (Inactive) */
.sidebar-wrapper .main-menu > li > a {
    background: transparent !important;
    color: #a7c5c8 !important; /* Soft light teal-grey */
    border-radius: 8px !important;
    margin: 4px 15px !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    border-left: 4px solid transparent !important;
    transition: all 0.2s ease-in-out !important;
}

/* 4. Top-Level Hover */
.sidebar-wrapper .main-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* 5. Top-Level Active/Selected */
.sidebar-wrapper .main-menu > li.active > a,
.sidebar-wrapper .main-menu > li > a[aria-expanded="true"] {
    background: #fff;/* Elegant glass highlight */
    color: #0c4e55 !important;
    border-left: 4px solid #f1c40f !important; /* Gold Accent marker */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* 6. Icons */
.sidebar-wrapper .main-menu > li > a i,
.sidebar-wrapper .main-menu > li > a svg {
    color: inherit !important;
    opacity: 0.8 !important;
    margin-right: 12px !important;
}

.sidebar-wrapper .main-menu > li > a:hover i,
.sidebar-wrapper .main-menu > li > a:hover svg,
.sidebar-wrapper .main-menu > li.active > a i,
.sidebar-wrapper .main-menu > li.active > a svg {
    opacity: 1 !important;
}

/* 7. Sub-menu Container (Recessed dark well) */
.sidebar-wrapper .sub-menu {
    background: rgba(0, 0, 0, 0.2) !important; /* Darker background to show depth */
    border-radius: 8px !important;
    margin: 2px 15px 8px 15px !important;
    padding: 8px 0 !important;
}

/* 8. Sub-menu Links (Inactive) */
.sidebar-wrapper .sub-menu li a {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important; /* Makes text visible against dark bg */
    padding: 10px 15px 10px 48px !important;
    font-size: 0.85rem !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

/* 9. Sub-menu Hover */
.sidebar-wrapper .sub-menu li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(4px) !important;
}

/* 10. Sub-menu Active/Selected */
.sidebar-wrapper .sub-menu li.active a,
.sidebar-wrapper .sub-menu li a.active,
.activesidebarselected > a {
    color: #f1c40f !important; /* Gold text for active sub-item to pop clearly */
    font-weight: 600 !important;
    background: transparent !important;
}

/* Strip out bad template active classes */
.activesidebarselected {
    background-color: transparent !important;
}

/* 11. User Profile Section in Sidebar (Top left fixes) */
.app-logo .nav-profile {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.app-logo .nav-profile h6 { color: #ffffff !important; font-weight: 600 !important; }
.app-logo .nav-profile p { color: rgba(255,255,255,0.6) !important; }
.app-logo .nav-profile i { color: rgba(255,255,255,0.8) !important; }


.pos-menu-item.active {
    background-color: #f7f7f7 !important;
    color: #0c4e55 !important;
}

.app-logo .ti-settings:before {
   
    color: #fff;
}

nav .app-logo .nav-profile 
{
    background-color: #791212 !important;
}


.pos-submenu li a
{
    color :white !important;
}
.bg-sale
{
    background-color: #d0dfd1 !important;
}
.pos-submenu li a:hover
{
    background-color: #c1d3c2 !important;
    color: #0c4e55 !important;
} 

.btn-red
{
    background-color:rgb(173 59 20) !important;
    color: white;
    text-wrap-mode: nowrap !important;
}

.cart-window {
    max-height: 45vh;
    overflow-y: scroll;
}

@media (min-width: 1200px) {
    .cart-window {
        max-height: 55vh;
    }
}

.ph-squares-four
{
    color: rgb(173 59 20);
}

.btn-green
{
    background-color:rgb(30 105 103) !important;
    color: white !important;
    
}



.text-success {
    color: rgb(23 134 80) !important;
}

.btn-light-reddit {
    background-color: rgb(46 115 61) !important;
    color: white !important;
}

/* Add this to your stylesheet */
@media (min-width: 992px) {
    .search-bar {
        max-width: 400px; /* Adjust this value to your preference */
        flex-grow: 1;
    }
}




.app-pagination .page-item.active .page-link {
    
    background: rgb(30 46 128 / 70%) !important;
    color: white !important;
}

.app-pagination .page-item .page-link {
    
    color: rgb(30 46 128 / 70%) !important;
    
}


.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    
    background-color: rgb(30 46 128 / 70%) !important;
}


.gradient-1-bg
{
    background:linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%) !important;
    color: white !important;
}
.gradient-2-bg
{
    background:linear-gradient(135deg, rgb(255, 81, 47) 0%, rgb(221, 36, 118) 100%) !important;
    color: white !important;
}
.gradient-3-bg
{
    background:linear-gradient(135deg, rgb(17, 153, 142) 0%, rgb(56, 239, 125) 100%) !important;
    color: white !important;
}
.gradient-4-bg
{
    background:linear-gradient(135deg, rgb(128 55 161) 0%, rgb(60, 186, 146) 100%) !important;
    color: white !important;
}

div > footer {
   padding: 0.1rem .1rem 0.1rem 20rem !important;
}

.btn-info
{
    background-color: rgb(30 46 128 / 70%) !important;
    border-color:rgb(30 46 128 / 70%) !important;
    color:white !important;
}



.activesidebarselected a {
    
     color:#0c4e55 !important;
   
}


.sidebar-wrapper .sub-menu li.active a, .sidebar-wrapper .sub-menu li a.active, .activesidebarselected > a {
   
    background-color: white !important;
    color:#0c4e55 !important;
}

nav .app-nav .main-nav > li:not(.menu-title) > a {
    
    color: #fff;
}

.collapse a
{
    color: #fff !important;
}