/*login screen css starts*/

.login-bg{
    /*background-color:#0e151a;*/
    background-image: url("/assets/media/company-logos/login-bg.jpg"); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;    
}

.kt-login.kt-login--v1 .kt-login__wrapper {
    padding: 3rem 2.5rem;
    background: #ffffff;
    border-radius:15px;
}


/*login screen css ends*/

/*Menu css starts*/

h3, .h3 {
    font-size: 1.75rem;
    color: #000000;
}
.row {
    margin-right: 0px !important;
     margin-left: 0px !important; 
}
.menu-title{
    color:#ffffff;
}
.status-label{
    color:#ffffff;
}
.fa-caret-right{
    margin-left: 10px;
    font-size: 15px !important;
}
.fa-caret-right:before {
    float: right;
    display: flex;
    content: "\f0da";
}
.chart-img{
    width:100%;
}
.iq-sidebar-menu .iq-menu li a:hover, .iq-sidebar-menu .iq-menu li.active>a, .iq-sidebar-menu .iq-menu li.menu-open>a {
    color: #7ac14c !important;
    text-decoration: none;
}
.navbar-dc {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar-dc a {
  float: left;
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown-dc {
  float: left;
  overflow: hidden;
}

.dropdown-dc .dropbtn-dc {
  font-size: 15px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar-dc a:hover, .dropdown-dc:hover .dropbtn-dc {
  background-color: red;
}

.dropdown-content-dc {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content-dc a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content-dc a:hover {
  background-color: #ddd;
}

.dropdown-dc:hover .dropdown-content-dc {
  display: block;
}
.btn.btn-sm [class^="fa-"], .btn-group-sm > .btn [class^="fa-"], .btn.btn-sm [class*=" fa-"], .btn-group-sm > .btn [class*=" fa-"] {
    font-size: 0.8rem;
}

/*@media (max-width: 1024px) {*/
/*    .kt-header-mobile--fixed .kt-header__topbar {*/
/*        display: none;*/
/*        position: fixed;*/
/*        z-index: 96;*/
/*    }*/
/*}*/

/*Menu css ends*/

.kt-notification .kt-notification__custom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
     border-top: 0px solid #f7f8fa; 
    padding: 1.6rem 1.5rem;
}
.kt-user-card {
    padding: 0rem 0rem; 
}
label.btn.btn-label-brand, a.btn.btn-label-brand, button.btn.btn-label-brand, input.btn.btn-label-brand {
    background-color: #ffffff;
    cursor: pointer !important;
    color: #000000;
    padding: 5px 10px 5px 10px;
}
label.btn.btn-label-brand:focus, label.btn.btn-label-brand:hover, label.btn.btn-label-brand.active, a.btn.btn-label-brand:focus, a.btn.btn-label-brand:hover, a.btn.btn-label-brand.active, button.btn.btn-label-brand:focus, button.btn.btn-label-brand:hover, button.btn.btn-label-brand.active, input.btn.btn-label-brand:focus, input.btn.btn-label-brand:hover, input.btn.btn-label-brand.active {
    background-color: #000000;
    color: #ffffff;
}
.kt-user-card .kt-user-card__name {
     padding-left: 0rem; 
}
.kt-notification .kt-notification__custom {
    padding: 1.6rem 0rem;
}
.btn-warning{
    background-color:#67bd2f;
    border:1px solid #67bd2f;
    color:#ffffff;
}
.btn-warning:hover{
    background-color:#000000;
    border:1px solid #000000;
    color:#ffffff;
}
.btn-primary{
    background-color:#000000;
    border:1px solid #000000;
    color:#ffffff;
}
.btn-primary:hover{
    background-color:#67bd2f;
    border:1px solid #67bd2f;
    color:#ffffff;
}
.btn-danger{
    color: #fff;
    background-color: #bf0000;
    border-color: #bf0000;
}
.btn-danger:hover{
    color: #fff;
    background-color: #dd3b3b;
    border-color: #dd3b3b;
}
.btn.btn-sm i, .btn-group-sm > .btn i {
    padding-right: 0rem;
}
.dataTables_wrapper .pagination .page-item.active > .page-link {
    background: #000000;
    color: #ffffff;
}
.dataTables_wrapper .pagination .page-item:hover > .page-link {
    background: #67bd2f;
    color: #ffffff;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item {
    cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
     border: none !important; 
}
.kt-subheader .kt-subheader__toolbar .btn:not(.dropdown-toggle-split) {
    background-color: #67bd2f;
    color:#ffffff;
}
.kt-subheader .btn i {
    color: #ffffff !important;
    font-size: 1rem !important;
}
.kt-subheader .kt-subheader__main .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link.kt-subheader__breadcrumbs-link--active {
    color: #67bd2f;
}
.kt-section__body{
    padding-top:30px !important;
}
.kt-portlet__body{
    padding-top:10px !important;
}
.btn-success{
    background-color: #67bd2f !important;
    border:1px solid #67bd2f;
    color:#ffffff;
}
.btn-success:hover{
    background-color: #000000 !important;
    border:1px solid #000000;
    color:#ffffff;
}
.kt-aside--fixed.kt-aside--minimize .kt-wrapper {
        padding-left: 0px;
}
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
    color: #fff;
    background-color: #66bb2f;
    border-color: #66bb2f;
}
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
    color: #ffffff;
    background-color: #000000;
    border-color: #000000;
}
.day3{
    padding-top: 6px;
}
.day6{
    padding-top: 6px;
}
.day10{
    padding-top: 6px;
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: #078b64;
    border-color: #66bb2f;
}


.kt-grid.kt-grid--hor:not(.kt-grid--desktop):not(.kt-grid--desktop-and-tablet):not(.kt-grid--tablet):not(.kt-grid--tablet-and-mobile):not(.kt-grid--mobile) {
    background-position: center;
}

.kt-aside--enabled .kt-header.kt-header--fixed {
        background-color:#000000;
        border: none;
}
.main-logo{
    height:60px!important;
}   
.kt-login__title{
  margin-top:20px;  
}
.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form {
    margin-top: -2rem !important;
    margin-right: auto;
    margin-bottom: 4rem;
    margin-left: auto;
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions .kt-login__btn-secondary, .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__actions .kt-login__btn-primary {
    font-weight: 500;
    font-size: 1.3rem;
    height: 50px;
    /*padding-left: 2.75rem;*/
    /*padding-right: 2.75rem;*/
    border:none;
    background-color:#79c04d;
    display: block; margin: 0 auto;
}
.kt-login__copyright{
    text-align:center;
}
.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group .form-control {
    background-color: rgb(231 231 231 / 70%);
}
.kt-aside--fixed .kt-wrapper{
    padding-left:0px;
}
.kt-aside--enabled .kt-header.kt-header--fixed {
    left: 0px;
}
.kt-aside--enabled.kt-subheader--fixed .kt-subheader {
    left: 0px;
}
.main-logo-2{
    height:40px!important;
} 
.text-dark{
    font-size:16px;
    font-weight:600;
}
.counter{
    font-size:40px;
    font-weight:700;
}
.subtitle{
    font-size:16px;
    font-weight:400;
    margin-top:-30px !important;
}
.counter-icon{
    height:80px!important;
}
.counter-middle{
    vertical-align:middle;
    padding-left:15px;
}
/*.counter-box{*/
/*    padding-top:10px;*/
/*}*/
.card {
    box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .09);
    border-radius: 10px !important;
}
.kt-portlet {
    border-radius: 10px !important;
    box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, .09);
}
.mb-3{
    /*margin-right: 0px !important;*/
    /*padding-left: 0px !important;*/
    /*margin-left: 0px !important;*/
    /*padding-right: 0px !important;*/
    margin-bottom: 1.6rem !important;
}
.kt-grid.kt-grid--hor:not(.kt-grid--desktop):not(.kt-grid--desktop-and-tablet):not(.kt-grid--tablet):not(.kt-grid--tablet-and-mobile):not(.kt-grid--mobile) > .kt-grid__item.kt-grid__item--fluid, .kt-grid.kt-grid--hor:not(.kt-grid--desktop):not(.kt-grid--desktop-and-tablet):not(.kt-grid--tablet):not(.kt-grid--tablet-and-mobile):not(.kt-grid--mobile) > .kt-grid__item.kt-grid__item--fluid {
    background-color: #f5f7fa;
}
.kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-header__topbar-user .kt-badge.kt-badge--username {
    background-color: #ffffff;
}


/* dashboard css starts */

.main-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--header-height);
        background: #f5f7fa;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    .dashboard-logo{
        width: 150px;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .logo-icon {
        font-size: 1.8rem;
        color: var(--secondary);
    }

    .logo h1 {
        font-size: 1.6rem;
        font-weight: 700;
    }

    /* Navigation Menu */
    .main-nav {
        display: flex;
        gap: 5px;
        height: 100%;
    }

    .nav-item {
        padding: 0px !important;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.83rem;
        font-weight: 500;
        color: #000000 !important;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

    .nav-item:hover, .nav-item.active {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .nav-item.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: #5ba92a;
    }

    /* User Actions */
    .user-actions {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .user-dropdown {
        position: relative;
        cursor: pointer;
    }

    .user-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        color:#79c04d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.1rem;
    }

    .dropdown-content {
        position: absolute;
        top: 110%;
        right: 0;
        background: white;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        width: 200px;
        overflow: hidden;
        display: none;
        z-index: 100;
    }

    .dropdown-content a {
        display: block;
        padding: 12px 20px;
        text-decoration: none;
        color: var(--dark);
        font-size: 14px;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .dropdown-content a:hover {
        background: #eef6e9;
        color: #5ba92a;
    }

    .user-dropdown:hover .dropdown-content {
        display: block;
    }

    .logout-btn {
        background: #e74c3c;
        color: white;
        border: none;
        padding: 8px 10px;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /*html a:hover, html a:active, html a:focus, body a:hover, body a:active, body a:focus {*/
    /*    color: #29a744 !important;*/
    /*    text-decoration: none !important;*/
    /*}*/

    .logout-btn:hover {
        background: #c0392b;
    }

    /* Main Content */
    .main-content {
        padding: 0px 20px 20px 20px;
        width: 100%;
    }

    /* Top Bar */
    .top-bar {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0px 0;
        margin-bottom: 20px;
    }

    .page-title h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #57a128;
    }

    .search-bar {
        position: relative;
        width: 500px;
    }

    .search-bar input {
        width: 100%;
        background-color:#ffffff !important;
        padding: 12px 20px 12px 45px;
        border: 1px solid var(--border);
        border-radius: 7px;
        font-size: 1.1rem !important;
        background: var(--card-bg);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .search-bar input:focus {
        outline: none;
        border-color: #5ba92a;
        box-shadow: 0 0 0 3px rgba(91, 169, 42, 0.2);
    }

    .search-bar i {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
    }

    .search-bar-new {
        position: relative;
        width: 100%;
    }

    .search-bar-new input {
        width: 100%;
        padding: 12px 20px 12px 45px;
        border: 1px solid var(--border);
        border-radius: 7px;
        font-size: 0.9rem;
        background: var(--card-bg);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .search-bar-new input:focus {
        outline: none;
        border-color: #5ba92a;
        box-shadow: 0 0 0 3px rgba(91, 169, 42, 0.2);
    }

    .search-bar-new i {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
    }

    .panel {
      background: #fff;
      border-radius: 14px;
      padding: 22px;
      border: 1px solid #dadada;
    }

    .panel-header{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }
    .panel-header h2{
      margin:0;
      color:#56a028;
      font-weight:700;
      font-size:20px;
    }

    .cards {
      display:flex;
      gap:15px;
      align-items:stretch;
      flex-wrap:wrap;
    }
    
    .cards-wrapper {
      display: flex;
      align-items: center;
      position: relative;
    }

    .cards-new {
      display: flex;
      gap: 15px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding: 10px 0;
      scrollbar-width: none; /* Firefox */
    }

    .cards-new::-webkit-scrollbar {
      display: none; /* Chrome, Safari */
    }

    .cards-new > div {
      flex: 0 0 calc(20% - 15px); 
    }

    /* Card styles */
    
    .dots-container {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      gap: 8px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: none;
      background: #ddd;
      cursor: pointer;
      transition: background 0.3s;
    }

    .dot.active {
      background: #56a028;
    }

    @media (max-width: 768px) {
      .cards > div {
        flex: 0 0 calc(33.333% - 12px); /* 3 per row on tablets */
      }
    }

    @media (max-width: 576px) {
      .cards-new > div {
        flex: 0 0 calc(100% - 12px); /* 2 per row on mobile */
      }
      
    }
    
    /*.arrow-card {*/
    /*  position: absolute;*/
    /*  top: 30%;*/
    /*  transform: translateY(-50%);*/
    /*  color: #000000;*/
    /*  background:none;*/
    /*  font-size:20px;*/
    /*  font-weight:600;*/
    /*  border: none;*/
    /*  padding: 10px 14px;*/
    /*  cursor: pointer;*/
    /*  border-radius: 50%;*/
    /*  z-index: 2;*/
    /*}*/

    /*.arrow-card.left {*/
    /*  left: -30px;*/
    /*  top: 50%;*/
    /*}*/

    /*.arrow-card.right {*/
    /*  right: -20px;*/
    /*  top: 50%;*/
    /*}*/
    
    
    /* Yellow Cards starts */
    .yellow-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #fffcf1;
      padding:25px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #e9b308;
      overflow:visible;
    }

    .y-view-pill{
      cursor: pointer;
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .y-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-yellow .icon-box{
        background: #f0af00;
        color: #ffffff;
    }
    .c-yellow .y-view-pill{
        background: #f0af00;
        color:#ffffff;
        border:1px solid #f0af00;
    }

    /* Yellow Cards ends */

    /* pink Cards starts */
    .pink-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f7f7ff;
      padding:25px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #6366f1;
      overflow:visible;
    }

    .p-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .p-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-pink .icon-box{
        background: #6366f1;
        color: #ffffff;
    }
    .c-pink .p-view-pill{
        background: #6366f1;
        color:#ffffff;
        border:1px solid #6366f1;
    }

    /* pink Cards ends */

    /* red Cards starts */
    .red-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f7f7ff;
      padding:25px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #ee4444;
      overflow:visible;
    }

    .r-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .r-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-red .icon-box{
        background: #ee4444;
        color: #ffffff;
    }
    .c-red .r-view-pill{
        background: #ee4444;
        color:#ffffff;
        border:1px solid #ee4444;
    }

    /* red Cards ends */

    /* blue Cards starts */
    .blue-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f4f5ff;
      padding:25px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #4046be;
      overflow:visible;
    }

    .b-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .b-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-blue .icon-box{
        background: #4149e4;
        color: #ffffff;
    }
    .c-blue .b-view-pill{
        background: #4149e4;
        color:#ffffff;
        border:1px solid #4149e4;
    }

    /* blue Cards ends */

    /* green Cards starts */
    .green-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f4f5ff;
      padding:25px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #28a745;
      overflow:visible;
    }

    .g-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .g-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-green .icon-box{
        background: #28a745;
        color: #ffffff;
    }
    .c-green .g-view-pill{
        background: #28a745;
        color:#ffffff;
        border:1px solid #28a745;
    }

    /* green Cards ends */

    /* stock blue Cards starts */
    .stock-b-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f4f5ff;
      padding:15px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #3b82f6;
      overflow:visible;
    }

    .stock-b-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .stock-b-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }
    .left{
        position:absolute;
        top:10px;
        left:10px;
    }

    .c-stock-b .icon-box{
        background: #3b82f6;
        color: #ffffff;
    }
    .c-stock-b .stock-b-view-pill{
        background: #3b82f6;
        color:#ffffff;
        border:1px solid #3b82f6;
    }

    /* stock blue Cards ends */

    /* stock green Cards starts */
    .stock-g-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f4f5ff;
      padding:15px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #29a744;
      overflow:visible;
    }

    .stock-g-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .stock-g-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-stock-g .icon-box{
        background: #29a744;
        color: #ffffff;
    }
    .c-stock-g .stock-g-view-pill{
        background: #29a744;
        color:#ffffff;
        border:1px solid #29a744;
    }

    /* stock green Cards ends */

    /* stock orange Cards starts */
    .stock-o-card {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f4f5ff;
      padding:15px 18px 15px 18px;
      border-radius:12px;
      position:relative;
      border: 1px solid #fa7317;
      overflow:visible;
    }

    .stock-o-view-pill{
      position:absolute;
      top:10px;
      right:10px;
      background: rgba(0,0,0,0.06);
      color:#0f172a;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .stock-o-view-pill a{
        text-decoration:none;
        color: #ffffff;
    }

    .c-stock-o .icon-box{
        background: #fa7317;
        color: #ffffff;
    }
    .c-stock-o .stock-o-view-pill{
        background: #fa7317;
        color:#ffffff;
        border:1px solid #fa7317;
    }

    /* stock orange Cards ends */

    .icon-box{
      width:55px;
      height:55px;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }

    .card-content{
      display:flex;
      flex-direction:column;
    }

    .count{
      font-size:30px;
      font-weight:700;
    }

    .label{
      font-size:13px;
      font-weight:500;
    }

    .fa-cart-plus{
        font-size: 20px;
    }

    @media (max-width:720px){
      .panel { padding:14px; }
      .count{ font-size:22px; }
      .icon-box{ width:54px; height:54px; min-width:54px; }
      .cards { gap:12px; }
      .yellow-card { padding:12px; border-radius:10px; }
    }

    @media (max-width:600px){
      .yellow-card{ width:100%; }
      .cards > div {
        flex: 0 0 calc(25% - 15px);
        min-width: 100%;
    }
    .arrow-card.right {
        right: -30px;
    }
    }

    .icon svg{
        width:28px;
        height:28px;
        opacity:0.98;
    }

/* customer data starts */

/* On going order Cards starts */
    
.on-orders {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #fffdf1;
      border-radius:12px;
      position:relative;
      border: 1px solid #e9b308;
      overflow:visible;
    }

    .on-order-view{
      position:absolute;
      top:10px;
      right:10px;
      background: #e9b308;
      color:#ffffff;
      border:1px solid #e9b308;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .on-order-view a{
        text-decoration:none;
        color: #ffffff;
    }

    .on-order-icon .icon-box{
        background: #e9b308;
        color: #ffffff;
    }
    .on-order-icon{
        margin-top: 38px !important;
        padding-bottom: 12px;
    }

/* Past order Cards starts */
    
    .past-orders {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f7f7ff;
      border-radius:12px;
      position:relative;
      border: 1px solid #6366f1;
      overflow:visible;
    }

    .past-order-view{
      position:absolute;
      top:10px;
      right:10px;
      background: #6366f1;
      color:#ffffff;
      border:1px solid #6366f1;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .past-order-view a{
        text-decoration:none;
        color: #ffffff;
    }

    .past-order-icon .icon-box{
        background: #6366f1;
        color: #ffffff;
    }
    .past-order-icon{
        margin-top: 38px !important;
        padding-bottom: 12px;
    }

/* Approve order Cards starts */
    
    .approve-orders {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #fff1f1;
      border-radius:12px;
      position:relative;
      border: 1px solid #ee4444;
      overflow:visible;
    }

    .approve-order-view{
      position:absolute;
      top:10px;
      right:10px;
      background: #ee4444;
      color:#ffffff;
      border:1px solid #ee4444;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .approve-order-view a{
        text-decoration:none;
        color: #ffffff;
    }

    .approve-order-icon .icon-box{
        background: #ee4444;
        color: #ffffff;
    }
    .approve-order-icon{
        margin-top: 38px !important;
        padding-bottom: 12px;
    }

 /* Pending order Cards starts */
    
    .pending-orders {
      flex: 1 1 200px;
      display:flex;
      align-items:center;
      gap:16px;
      background: #f4f5ff;
      border-radius:12px;
      position:relative;
      border: 1px solid #4149e4;
      overflow:visible;
    }

    .pending-order-view{
      position:absolute;
      top:10px;
      right:10px;
      background: #4149e4;
      color:#ffffff;
      border:1px solid #4149e4;
      padding: 2px 8px;
      font-size: 10px;
      border-radius:14px;
    }
    .pending-order-view a{
        text-decoration:none;
        color: #ffffff;
    }

    .pending-order-icon .icon-box{
        background: #2b33d1;
        color: #ffffff;
    }
    .pending-order-icon{
        margin-top: 38px !important;
        padding-bottom: 12px;
    }

/* customer data ends */


/* sales data starts */

.sales-data {
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      border: 1px solid #dadada;
    }

    /* Header Row */
    .sales-data-header {
      display: flex;
      justify-content: space-between;
      align-items: self-end;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px;
    }

    .sales-data-header h2 {
      color: #3ea44e;
      margin: 0;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* Tabs */
    .tab {
      padding: 8px 20px;
      border-radius: 20px;
      border: 1px solid #ddd;
      cursor: pointer;
      background: #fff;
      transition: 0.3s;
      font-size: 15px;
      padding: 10px 30px;
      border-radius: 100px;
    }
    .t-green{
      padding: 8px 20px;
      border-radius: 20px;
      border: 1px solid #28a745;
      cursor: pointer;
      background: #f8fffa;
      transition: 0.3s;
      font-size: 15px;
      padding: 10px 30px;
      border-radius: 100px;
    }
    .t-pink{
      padding: 8px 20px;
      border-radius: 20px;
      border: 1px solid #a855f7;
      cursor: pointer;
      background: #fbf6ff;
      transition: 0.3s;
      font-size: 15px;
      padding: 10px 30px;
      border-radius: 100px;
    }
    .t-orange{
      padding: 8px 20px;
      border-radius: 20px;
      border: 1px solid #f97316;
      cursor: pointer;
      background: #fff6f0;
      transition: 0.3s;
      font-size: 15px;
      padding: 10px 30px;
      border-radius: 100px;
    }

    .tab.active {
      background: #3b82f6;
      color: #fff;
      font-size: 15px;
      padding: 10px 30px;
      border-radius: 100px;
      border: none;
    }

    /* Dropdown */
    select {
      padding: 8px 15px;
      border-radius: 20px;
      border: 1px solid #ddd;
      font-size: 15px;
      padding: 10px 18px;
      border-radius: 7px;
      cursor: pointer;
    }

    /* Charts Grid */
    .charts {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
    }

    .chart-card {
      background: #fff;
      padding: 15px;
      border-radius: 12px;
      border: 1px solid #cdcdcd;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .charts {
        grid-template-columns: 1fr;
      }
    }

/* sales data ends */


/* Tables Section */
        .tables-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
            gap: 25px;
        }

        .table-card {
            background: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .card-header {
            padding: 12px 25px;
            background: #5ba92a;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-header h3 {
            font-size: 1.2rem;
            font-weight: 500;
        }

        .view-all {
            color: white;
            font-size: 0.9rem;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .view-all:hover {
            text-decoration: underline;
        }

        .btn-download {
            background: #5ba92a;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-download:hover {
            background: #0e151a;
        }

        table.dataTable.no-footer {
            border-bottom: none;
        }

        .raw-material{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .raw-material select {
            padding: 6px 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
        }
        
        tr:nth-child(even) {background: #f1f4f8;}
        tr:nth-child(odd) {background: #ffffff;}
        
        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
            padding-top: 15px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            font-size: 14px;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            font-size: 14px;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: .3em 1em;
        }
        .dataTables_wrapper .dataTables_filter{
            /*display: block;*/
        }
        .dataTables_wrapper{
            padding-bottom: 15px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0em 0.5em !important;
            margin-bottom:10px;
        }
        .dataTables_wrapper .dataTables_paginate .pagination .page-item {
            margin-left: 0rem !important;
        }
        div.table-responsive > div.dataTables_wrapper > div.row {
            display: ruby;
        }
        .dataTables_wrapper .dataTable th.dt-center, .dataTables_wrapper .dataTable td.dt-center {
            text-align: left;
        }
        table.dataTable tr.dtrg-group.dtrg-level-1 td, table.dataTable tr.dtrg-group.dtrg-level-2 td {
            padding-left: 0.7em; 
        }
        .col-sm-12{
            padding-left:0px;
            padding-right:0px;
        }
        
/* customer data starts */

.card {
      border: 1px solid #f0c74b;
      border-radius: 10px;
      padding: 20px;
      background: #fff;
      position: relative;
      flex: 1 1 200px;
    }

    .c-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 25px !important;
    }
    .c-data{
        left: 15px;
        top: 10px;
        position: absolute;
        font-size: 14px;
        font-weight: 500;
    }

    .content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* customer data ends */

    
    .kt-portlet .kt-portlet__body {
        padding: 0px 15px;
    }
    .col-form-label {
        padding-top: calc(0rem + 0px);
        padding-bottom: calc(0.65rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }
    .status-label {
        color: #000000 !important;
    }
    small, .small {
        font-size: 100%;
    }
    table.dataTable tr.dtrg-group.dtrg-level-1 td, table.dataTable tr.dtrg-group.dtrg-level-2 td {
        background-color: #fffcf1;
    }
    table.dataTable tr.dtrg-group td {
        background-color: #dde4ef;
    }
    /*.btn-sm, .btn-group-sm > .btn {*/
    /*    padding: 0.1rem 0.3rem; */
    /*    font-size: 0rem;*/
    /*}*/
    

    /* Responsive Design */

@media only screen and (max-width: 600px) {
  .yellow-card {
    flex: 1 1 100px;
  }
  .pink-card {
    flex: 1 1 100px;
  }
  .red-card {
    flex: 1 1 100px;
  }
  .blue-card {
   flex: 1 1 100px;
  }
  .green-card {
   flex: 1 1 100px;
  }
  .stock-b-card {
   flex: 1 1 100px;
  }
  .stock-g-card {
   flex: 1 1 100px;
  }
  .stock-o-card {
    flex: 1 1 100px;
  }
  .raw-material {
    display: grid;
  }
  .on-orders {
    flex: 1 1 100px;
  }
  .past-orders {
    flex: 1 1 100px;
  }
  .approve-orders {
    flex: 1 1 100px;
  }
  .pending-orders {
    flex: 1 1 100px;
  }
  .footer {
    display: flow;
    text-align: center;
  }
  .kt-quick-panel--right .kt-quick-panel {
    display: none !important;
}
}

    @media (max-width: 1100px) {
        .tables-section {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {
        .main-nav {
            gap: 0;
        }
        
        .nav-item {
            padding: 0 12px;
            font-size: 0.85rem;
        }
        
        .nav-item span {
            display: none;
        }
        
        .nav-item i {
            margin-right: 0;
        }
    }

    @media (max-width: 768px) {
        .top-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }
        
        .search-bar {
            width: 100%;
        }
        
        .user-info {
            flex-direction: column;
            text-align: center;
        }
        
        .welcome-banner {
            text-align: center;
        }
        
        .btn-edit {
            margin: 0 auto;
        }
        
        .main-header {
            padding: 0 15px;
        }
        
        .user-actions {
            gap: 10px;
        }
    }

    @media (max-width: 480px) {
        .logo h1 {
            font-size: 1.3rem;
        }
        
        .nav-item {
            padding: 0 8px;
        }
        
        .logout-btn span {
            display: none;
        }
        
        .logout-btn {
            padding: 8px 12px;
        }
        .card-new{
            min-width:auto !important;
        }
        .price {
            padding-left:10px;    
        }
        .section-title{
            font-size:15px !important;
        }
    }
    @media (min-width: 600px) {
        .card-new{
            min-width:auto !important;
        }
        .price {
            padding-left:10px;    
        }
        .section-title{
            font-size:15px !important;
        }
    }
    

/*dashboard css ends*/