@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,ul,li,p,a{
    margin: 0;
    padding: 0;
}

body{
  background-color: #ecf0f4;
}
.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: 1px solid #ddd !important;
}
td, th{
    text-align:left !important;
    font-size:12px !important;
}
table tr td:nth-child(2) img{
    width:70px !important;
    height:70px !important;
}
select{
    padding:5px !important;
}

.user-dropdown {
  position: relative;
  display: inline-block;
}
.btn .btn-info{
    margin-top:10px;
}

.user-dropdown-content {
  text-align: center;
  display: none;
  position: absolute;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  color: #fff;
  border: none;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  cursor: pointer;
  
}
.user-dropdown:hover .user-dropdown-content {
  display: block;
}

.left_col {
  background: #1175f5;
  background: linear-gradient(180deg, #1175f5, #00d2ff);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c9c9c9e8 #80808000;
}

.nav_menu .nav-items ul li ul li {
  margin-right: 0px;
}
#company-logo {
  width: 70px;
  margin-top: 10px;
}
.nav-sm .body .col-md-3.left_col {
  width: 70px;
  padding: 0;
  z-index: 9999;
  position: fixed;
  
}

.nav-sm .body .col-md-3.left_col.menu_fixed {
  position: fixed;
  height: 100%;
}

.nav-sm .body .col-md-3.left_col .mCSB_container,
.nav-sm .body .col-md-3.left_col .mCustomScrollBox {
  overflow: visible;
}

.nav-sm .hidden-small {
  visibility: hidden;
}

.nav-sm .body .right_col {
  padding: 10px 20px;
  margin-left: 70px;
  z-index: 2;
}

.nav-sm .navbar.nav_title {
  width: 70px;
  text-align: center;
}

.nav-sm .navbar.nav_title a span {
  display: none;
}

.nav-sm .navbar.nav_title a i {
  font-size: 27px;
  margin: 0px 15px 0 10px;
}
.site_title i {
  border: 1px solid #EAEAEA;
  padding: 5px 6px;
  border-radius: 50%;
}

.nav-sm .main_container .top_nav {
  display: block;
  margin-left: 70px;
  z-index: 2;
}

.nav-sm .nav.side-menu li a {
  text-align: center !important;
  font-weight: 400;
  font-size: 10px;
  padding:  10px 5px;
}

.bannerDashboard{
    height:500px;
    background:url(/assets/images/bgDashboard.jpg);
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
}
.bannerDashboard:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay color with opacity */
    top:auto !important;
}
.bannerDashboard .container{z-index:999 !important;}
.bannerDashboard h2{
    text-align:center;
    font-size:42px;
    color:#fff;
    font-weight:bold;
    line-height:1.7em;
}
.classDashboard{
    padding:100px 0;
}
.classDashboard row{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.classDashboard img{
    width:250px;
    height:250px;
    object-fit:cover;
}
@media(max-width:320px){
    .classDashboard{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction:column;
        padding:50px;
    }
    .classDashboard img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        margin-left: 62px;
    }
    
    .bannerDashboard .container {
        margin-left: 50px;
    }
    .bannerDashboard h2 {
       font-size: 39px;
       margin-left:31%;
    }
}

.classDashboard h4{
    text-align:center;
    padding-top:20px!important;
}
.bannerDashboard p{
    text-align:center;
    line-height:1.7em;
    font-size:24px!important;
    color:#fff;
}
.item {
  border: 2px solid #222222;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  align-items: center;
  will-change: transform;
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
    justify-content: space-evenly;
}

.item:hover {
  border-color: #1175f5;
  transform: scale(1.025);
}

.item svg {
  width: 36px;
  height: 36px;
  transition: all 0.3s ease-in-out;
}

.item:hover svg {
  color: #1175f5;
  fill: red;
}

.item button {
  all: unset;
  margin-left: auto;
  background-color: #1175f5;
  padding: 12px 16px;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.item button:hover {
  background-color: #7126f1;
}

.item .filedata {
 display: flex;
    gap: 4px;
    font-size: 12px;
    margin-top: 2px;
    color: #797777;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.filedata sapn:hover{
    color:#00d2ff;
}
#btnsearch{
    padding: 14px 20px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 1px solid transparent;
  color: #000;
  
}
#btnsearch:hover{
background: linear-gradient(90deg, #00d2ff, #3a7bd5);
    /*border: none;*/
}
.reportSpacing{
  max-width: 80%;
  width: 580px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding:70px 0;
}
input[type=file]{
    padding: 15px;
    border: none;
    margin-bottom: 20px;
    width: 100%;
    background: #f1f1f1;
}
input[type=number]
{
    padding: 15px;
    border: none;
    margin-bottom: 20px;
    width: 100%;
    background: #f1f1f1;
}
textarea{
    padding: 15px !important;
    border: none !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    background: #f1f1f1 !important;
}
select{
    padding: 15px !important;
    border: none !important;
    margin-bottom: 20px ;
    width: 100% !important;
    background: #f1f1f1 ;
}
#updateOrderStatus{
     width: 83% !important;
}
select[multiple] option, select[size] option{
    margin-bottom:10px;
    padding:5px;
}

/* View Product */
.viewProductImage{
    width:100px !important;
    height:100px !important;
    object-fit:contain !important;
}
/* View Product */

/* View Supplier */
#productList{
    display: inline-block !important;
    list-style-type: square !important;
    text-align:left!important;
    padding:10px!important;
    width:100%;
}
/* End View Supplier */
@media (max-width:992px){
  .nav-sm .nav.side-menu li a {
    padding: 3px !important;
    font-size:9px !important;
  }
}
@media (max-width:1440px){
  .nav-sm .nav.side-menu li a {
    padding: 3px !important;
    font-size:9px !important;
  }
}

@media (max-width:1440px){
  .order-search form {
 gap:1rem !important;
  }
}


.nav-sm .nav.child_menu li.active, .nav-sm .nav.side-menu li.active-sm {
  border-right: 5px solid #d0d0d0;
}

.nav-sm ul.nav.child_menu ul, .nav-sm .nav.side-menu li.active-sm ul ul {
  position: static;
  width: 200px;
  background: none;
}

.nav-sm > .nav.side-menu > li.active-sm > a {
  color: #1ABB9C !important;
}

.nav-sm .nav.side-menu li a i.toggle-up {
  display: none !important;
}

.nav-sm .nav.side-menu li a i {
  font-size: 25px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 5px;
}

.nav-sm ul.nav.child_menu {
  left: 0%;
  position: absolute;
  top: 100%;
   z-index: 4000;
   /*width:59px;*/
   /*background:white;*/
  width: 210px;
  background: #1175f5 ;
  display: none;
}

.nav-sm ul.nav.child_menu li {
  padding: 0 10px;
}

.nav-sm ul.nav.child_menu li a {
  text-align: left !important;
}

.nav-sm .profile {
  display: none;
}

.menu_section {
  margin-bottom: 35px;
}

.menu_section h3 {
  padding-left: 23px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 1px 1px #000;
}

.menu_section > ul {
  margin-top: 10px;
}

.profile_pic {
  width: 35%;
  float: left;
}

.img-circle.profile_img {
  width: 70%;
  background: #fff;
  margin-left: 15%;
  z-index: 1000;
  position: inherit;
  margin-top: 20px;
  border: 1px solid rgba(52, 73, 94, 0.44);
  padding: 4px;
}

.profile_info {
  padding: 25px 10px 10px;
  width: 65%;
  float: left;
}

.profile_info span {
  font-size: 13px;
  line-height: 30px;
  color: #BAB8B8;
}

.profile_info h2 {
  font-size: 14px;
  color: #ECF0F1;
  margin: 0;
  font-weight: 300;
}

.profile.img_2 {
  text-align: center;
}

.profile.img_2 .profile_pic {
  width: 100%;
}

.profile.img_2 .profile_pic .img-circle.profile_img {
  width: 50%;
  margin: 10px 0 0;
}

.profile.img_2 .profile_info {
  padding: 15px 10px 0;
  width: 100%;
  margin-bottom: 10px;
  float: left;
}

.main_menu span.fa {
  float: right;
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
  min-width: inherit;
  color: #C4CFDA;
}

.active a span.fa {
  text-align: right !important;
  margin-right: 4px;
}

.nav-sm .menu_section {
  margin: 0;
  margin-top: -54px;
}

.nav-sm span.fa, .nav-sm .menu_section h3 {
  display: none;
}

.nav-sm li li span.fa {
  display: inline-block;
}

.nav_menu {
  float: left;

  width: 100%;
  position: relative;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #3a7bd5, rgb(237, 237, 237)) border-box;
  border-bottom: 1px solid transparent;
}
.classDashboard .row{
    margin-top:20px;
    display:flex;
    justify-content:center;
    align-item:center;
}

@media (min-width: 480px) {
  .nav_menu {
    position: static;
  }
  .bannerDashboard p{
      font-size:19px;
  }
}
.nav-md .body .col-md-3.left_col {
  width: 230px;
  padding: 0;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  z-index: 9999;
}

.nav-md .body .col-md-3.left_col.menu_fixed {
  height: 100%;
  position: fixed;
}

body .body .right_col {
  background: #ecf0f4;
}

.nav-md .body .right_col {
  padding: 10px 20px 0;
  margin-left: 230px;
}

.nav_title {
    width: 230px;
    float: left;
    background:  transparent;
    border-radius: 0;
    height: 80px;
    text-align: end;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 991px) {
  .nav-md .body .right_col, .nav-md .body .top_nav {
    width: 100%;
    margin: 0;
  }

  .nav-md .body .right_col {
    width: 100%;
    padding-right: 0;
  }

  .right_col {
    padding: 10px !important;
  }
}
@media (max-width: 1200px) {
  .x_title h2 {
    width: 62%;
    font-size: 17px;
  }

  .tile, .graph {
    zoom: 85%;
    height: inherit;
  }
}
@media (max-width: 1270px) and (min-width: 192px) {
  .x_title h2 small {
    display: none;
  }
}
.left_col .mCSB_scrollTools {
  width: 6px;
}

.left_col .mCSB_dragger {
  max-height: 400px !important;
}

/**  ------------------------------------------  **/
.blue {
  color: #3498DB;
}

.purple {
  color: #9B59B6;
}

.green {
  color: #1ABB9C;
}

.aero {
  color: #9CC2CB;
}

.red {
  color: #E74C3C;
}

.dark {
  color: #34495E;
}

.border-blue {
  border-color: #3498DB !important;
}

.border-purple {
  border-color: #9B59B6 !important;
}

.border-green {
  border-color: #1ABB9C !important;
}

.border-aero {
  border-color: #9CC2CB !important;
}

.border-red {
  border-color: #E74C3C !important;
}

.border-dark {
  border-color: #34495E !important;
}

.bg-white {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: #73879C;
}

.bg-green {
  background: #38ce3c !important;
  border: 1px solid #38ce3c !important;
  color: #fff;
}

.bg-red {
  background: #E74C3C !important;
  border: 1px solid #E74C3C !important;
  color: #fff;
}

.bg-blue {
  background: #3498DB !important;
  border: 1px solid #3498DB !important;
  color: #fff;
}

.bg-orange {
  background: #F39C12 !important;
  border: 1px solid #F39C12 !important;
  color: #fff;
}

.bg-purple {
  background: #9B59B6 !important;
  border: 1px solid #9B59B6 !important;
  color: #fff;
}

.bg-blue-sky {
  background: #50C1CF !important;
  border: 1px solid #50C1CF !important;
  color: #fff;
}

 /* {
  width: 100%;
  padding: 0;
} */

.navbar-nav > li > a, .navbar-brand, .navbar-nav > li > a {
  color: #fff !important;
}

.top_nav .nav > li > a:focus,
.top_nav .nav > li > a:hover,
.top_nav .nav .open > a,
.top_nav .nav .open > a:focus,
.top_nav .nav .open > a:hover {
  background: #D9DEE4;
}

body {
  font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.471;
}

.main_container .top_nav {
  display: block;
  margin-left: 230px;
}

.no-padding {
  padding: 0 !important;
}

.page-title {
  width: 100%;
  height: 65px;
  padding: 10px 0;
}

.page-title .title_left {
  width: 45%;
  float: left;
  display: block;
}

.page-title .title_left h3 {
  margin: 9px 0;
}

.page-title .title_right {
  width: 55%;
  float: left;
  display: block;
}

.page-title .title_right .pull-right {
  margin: 10px 0;
}

.fixed_height_320 {
  height: 320px;
}

.fixed_height_390 {
  height: 390px;
}

.fixed_height_200 {
  height: 200px;
}

.overflow_hidden {
  overflow: hidden;
}

.progress-bar-dark {
  background-color: #34495E !important;
}

.progress-bar-gray {
  background-color: #BDC3C7 !important;
}

table.no-margin .progress {
  margin-bottom: 0;
}

.main_content {
  padding: 10px 20px;
}

.col-md-55 {
  width: 50%;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .col-md-55 {
    width: 20%;
  }

}
@media (min-width: 992px) {
  .col-md-55 {
    width: 20%;
  }
}
@media (min-width: 1200px) {
  .col-md-55 {
    width: 20%;
  }
}
@media (min-width: 192px) and (max-width: 1270px) {
  table.tile_info span.right {
    margin-right: 7px;
    float: left;
  }
}
.center-margin {
  margin: 0 auto;
  float: none !important;
}

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

.grid_slider .col-md-6 {
  padding: 0 40px;
}

a,
a:visited,
a:focus,
a:active,
:visited,
:focus,
:active,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: 0;
}

a:hover, a:focus {
  text-decoration: none;
}

.navbar {
  margin-bottom: 0;
}

.navbar-header {
  background: #34495E;
}

.navbar-right {
  margin-right: 0;
}

.top_nav .navbar-right {
  margin: 0;
  float: right;
}

@media (max-width:768px){
  .top_nav .navbar-right {
    margin: 0px;
    width: 100%;
    float: right;
}
/*table td:last-child{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: baseline;*/
/*    padding: 0px;*/
/*}*/
  .classDashboard .row{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column ;
    gap: 20px;
  }
}

.top_nav .navbar-right li {
  display: inline-block;
  float: right;
  position: static;
}

@media (min-width: 480px) {
  .top_nav .navbar-right li {
    position: relative;
  }
}
.top_nav .dropdown-menu li {
  width: 100%;
}

.top_nav .dropdown-menu li a {
  width: 100%;
  padding: 12px 20px;
}


.navbar-static-top {
  position: fixed;
  top: 0;
  width: 100%;
}

.sidebar-header {
  border-bottom: 0;
  margin-top: 46px;
}

.sidebar-header:first-of-type {
  margin-top: 0;
}

.nav.side-menu > li {
  position: relative;
  display: block;
  cursor: pointer;
}

.nav.side-menu > li > a {
  margin-bottom: 6px;
}

.nav.side-menu > li > a:hover {
  color: #F2F5F7 !important;
}

.nav.side-menu > li > a:hover, .nav > li > a:focus {
  text-decoration: none;
  background: transparent;
}

.nav.child_menu {
  display: none;
}

.nav.child_menu li:hover, .nav.child_menu li.active {
  background-color: #dddddd61;
  /*background-color: rgba(255, 255, 255, 0.06);*/
}

.nav.child_menu li {
  padding-left: 36px;
}

.nav-md ul.nav.child_menu li:before {
  background: #1175f5;
  bottom: auto;
  content: "";
  height: 8px;
  left: 23px;
  margin-top: 15px;
  position: absolute;
  right: auto;
  width: 8px;
  z-index: 1;
  border-radius: 50%;
}

.nav-md ul.nav.child_menu li:after {
  border-left: 1px solid #425668;
  bottom: 0;
  content: "";
  left: 27px;
  position: absolute;
  top: 0;
}

.nav.side-menu > li > a, .nav.child_menu > li > a {
  color: #E7E7E7;
  font-weight: 500;
}

.nav.child_menu li li:hover, .nav.child_menu li li.active {
  background: none;
}

.nav.child_menu li li a:hover, .nav.child_menu li li a.active {
  color: #fff;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 13px 15px 18px;
}

.nav.side-menu > li.current-page, .nav.side-menu > li.active {
  border-right: 5px solid #d0d0d0;
}

.nav li.current-page {
  background: rgba(255, 255, 255, 0.05);
}

.nav li li li.current-page {
  background: none;
}

.nav li li.current-page a {
  color: #fff;
}

.nav.side-menu > li.active > a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  background:#1175f5;
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0,
    inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

.navbar-brand, .navbar-nav > li > a {
  font-weight: 500;
  color: #000 !important;
  margin-left: 0 !important;
  line-height: 32px;
}

.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 100%;
  margin: 0;
  padding-left: 10px;
  text-align: start;
}

.site_title:hover, .site_title:focus {
  text-decoration: none;
}

.nav.navbar-nav > li > a {
  color: #515356 ;
}

.nav.top_menu > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #34495E ;
}

.nav > li > a:hover, .nav > li > a:focus {
  background-color: transparent;
  font-weight:600 !important;
}

.top_search {
  padding: 0;
}

.top_search .form-control {
  border-right: 0;
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
  border-radius: 25px 0px 0px 25px;
  padding-left: 20px;
  border: 1px solid rgba(221, 226, 232, 0.49);
}

.top_search .form-control:focus {
  border: 1px solid rgba(221, 226, 232, 0.49);
  border-right: 0;
}

.top_search .input-group-btn button {
  border-radius: 0px 25px 25px 0px;
  border: 1px solid rgba(221, 226, 232, 0.49);
  border-left: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  color: #93A2B2;
  margin-bottom: 0 !important;
}

.toggle {
  float: left;
  margin: 0;
  padding-top: 16px;
  width: 70px;
}

.toggle a {
  padding: 15px 15px 0;
  margin: 0;
  cursor: pointer;
}

.toggle a i {
  font-size: 26px;
}

.nav.child_menu > li > a {
  color: rgba(255, 255, 255, 0.75);
  /*color: #1175f5;*/
  font-size: 12px;
  padding: 9px;
}

.panel_toolbox {
  float: right;
  min-width: 70px;
}

.panel_toolbox > li {
  float: left;
  cursor: pointer;
}

.panel_toolbox > li > a {
  padding: 5px;
  color: #C5C7CB;
  font-size: 14px;
}

.panel_toolbox > li > a:hover {
  background: #F5F7FA;
}

.line_30 {
  line-height: 30px;
}

.main_menu_side {
  padding: 0;
}

.bs-docs-sidebar .nav > li > a {
  display: block;
  padding: 4px 6px;
}

footer {
  background: #fff;
  padding: 15px 20px;
  display: block;
}

@media (min-width: 768px) {
  footer {
    margin-left: 230px;
  }
}
.nav-sm footer {
  margin-left: 70px;
}

.footer_fixed footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

@media (min-width: 768px) {
  .footer_fixed footer {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .footer_fixed .nav-sm footer {
    margin-left: 0;
  }
}
.tile-stats.sparkline {
  padding: 10px;
  text-align: center;
}

.jqstooltip {
  background: #34495E !important;
  width: 30px !important;
  height: 22px !important;
  text-decoration: none;
}

.tooltip {
  display: block !important;
}

.tiles {
  border-top: 1px solid #ccc;
  margin-top: 15px;
  padding-top: 5px;
  margin-bottom: 0;
}

.tile {
  overflow: hidden;
}

.top_tiles {
  margin-bottom: 0;
}

.top_tiles .tile h2 {
  font-size: 30px;
  line-height: 30px;
  margin: 3px 0 7px;
  font-weight: bold;
}

article.media {
  width: 100%;
}
.user-dropdown-content button{
    background:transparent !important;
    border:none !important;
}
/* *********  custom accordion  **************************** */
*, *:before, *:after {
  box-sizing: border-box;
}

#integration-list {
  width: 100%;
  margin: 0 auto;
  display: table;
}

#integration-list ul {
  padding: 0;
  margin: 20px 0;
  color: #555;
}

#integration-list ul > li {
  list-style: none;
  border-top: 1px solid #ddd;
  display: block;
  padding: 15px;
  overflow: hidden;
}

#integration-list ul:last-child {
  border-bottom: 1px solid #ddd;
}

#integration-list ul > li:hover {
  background: #efefef;
}

.expand {
  display: block;
  text-decoration: none;
  color: #555;
  cursor: pointer;
}

.expand h2 {
  width: 85%;
  float: left;
}

h2 {
  font-size: 18px;
  font-weight: 400;
}

#left, #right {
  display: table;
}

#sup {
  display: table-cell;
  vertical-align: middle;
  width: 80%;
}

.detail a {
  text-decoration: none;
  color: #C0392B;
  border: 1px solid #C0392B;
  padding: 6px 10px 5px;
  font-size: 13px;
  margin-right: 7px;
}

.detail {
  margin: 10px 0 10px 0px;
  display: none;
  line-height: 22px;
  height: 150px;
}

.detail span {
  margin: 0;
}

.right-arrow {
  width: 10px;
  float: right;
  font-weight: bold;
  font-size: 20px;
}

.accordion .panel {
  margin-bottom: 5px;
  border-radius: 0;
  border-bottom: 1px solid #efefef;
}

.accordion .panel-heading {
  background: #F2F5F7;
  padding: 13px;
  width: 100%;
  display: block;
}

.accordion .panel:hover {
  background: #F2F5F7;
}

.x_panel {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 17px;
  display: inline-block;
  background: #fff;
  border: 1px solid #E6E9ED;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  opacity: 1;
  transition: all .2s ease;
}

.x_title {
  border-bottom: 2px solid #E6E9ED;
  padding: 1px 5px 6px;
  margin-bottom: 10px;
}

.x_title .filter {
  width: 40%;
  float: right;
}

.x_title h2 {
  margin: 5px 0 6px;
  float: left;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.x_title h2 small {
  margin-left: 10px;
}

.x_title span {
  color: #BDBDBD;
}

.x_content {
  padding: 0 5px 6px;
  position: relative;
  width: 100%;
  float: left;
  clear: both;
  margin-top: 5px;
}

.x_content h4 {
  font-size: 16px;
  font-weight: 500;
}

legend {
  padding-bottom: 7px;
}

.demo-placeholder {
  height: 280px;
}

  
/** top tiles  */
.tile_count {
  margin-bottom: 20px;
  margin-top: 20px;
}

.tile_count .tile_stats_count {
  border-bottom: 1px solid #D9DEE4;
  padding: 0 10px 0 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

@media (min-width: 992px) {
  .tile_count .tile_stats_count {
    margin-bottom: 10px;
    border-bottom: 0;
    padding-bottom: 10px;
  }
}
.tile_count .tile_stats_count:before {
  content: "";
  position: absolute;
  left: 0;
  height: 65px;
  border-left: 2px solid #ADB2B5;
  margin-top: 10px;
}

@media (min-width: 992px) {
  .tile_count .tile_stats_count:first-child:before {
    border-left: 0;
  }
}
.tile_count .tile_stats_count .count {
  font-size: 30px;
  line-height: 47px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .tile_count .tile_stats_count .count {
    font-size: 40px;
  }
}
@media (min-width: 992px) and (max-width: 1100px) {
  .tile_count .tile_stats_count .count {
    font-size: 30px;
  }
}
.tile_count .tile_stats_count span {
  font-size: 12px;
}

@media (min-width: 768px) {
  .tile_count .tile_stats_count span {
    font-size: 13px;
  }

}
.tile_count .tile_stats_count .count_bottom i {
  width: 12px;
}

/** top tiles **/
.dashboard_graph {
  background: #fff;
  padding: 7px 10px;
}

.dashboard_graph .col-md-9, .dashboard_graph .col-md-3 {
  padding: 0;
}

a.user-profile {
  color: #5E6974 !important;
}

.user-profile img {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  margin-right: 10px;
}

ul.top_profiles {
  height: 330px;
  width: 100%;
}

ul.top_profiles li {
  margin: 0;
  padding: 3px 5px;
}

ul.top_profiles li:nth-child(odd) {
  background-color: #eee;
}

.media .profile_thumb {
  border: 1px solid;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0;
  border-radius: 50%;
  padding: 9px 12px;
}

.media .profile_thumb i {
  font-size: 30px;
}

.media .date {
  background: #ccc;
  width: 52px;
  margin-right: 10px;
  border-radius: 10px;
  padding: 5px;
}

.media .date .month {
  margin: 0;
  text-align: center;
  color: #fff;
}

.media .date .day {
  text-align: center;
  color: #fff;
  font-size: 27px;
  margin: 0;
  line-height: 27px;
  font-weight: bold;
}

.event .media-body a.title {
  font-weight: bold;
}

.event .media-body p {
  margin-bottom: 0;
}

h4.graph_title {
  margin: 7px;
  text-align: center;
}


/*****  iconts-display  *****/
.fontawesome-icon-list .fa-hover a:hover {
  background-color: #ddd;
  color: #fff;
  text-decoration: none;
}

.fontawesome-icon-list .fa-hover a {
  display: block;
  line-height: 32px;
  height: 32px;
  padding-left: 10px;
  border-radius: 4px;
}

.fontawesome-icon-list .fa-hover a:hover .fa {
  font-size: 28px;
  vertical-align: -6px;
}

.fontawesome-icon-list .fa-hover a .fa {
  width: 32px;
  font-size: 16px;
  display: inline-block;
  text-align: right;
  margin-right: 10px;
}

.main_menu .fa {
  width: 26px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/** Dropzone.js **/
.dropzone {
  min-height: 300px;
  border: 1px solid #e5e5e5;
}

/** /Dropzone.js **/

#burger {
  font-size: 32px;
  color: #fff;
  margin-right: 25px;
  margin-bottom: 15px;
}
ul.nav.navbar-nav.navbar-right {
    display: flex;
    justify-content: end;
    align-items: center;
}

ul li .nav-icon{
    font-size: 20px;
    margin-right: 20px;
    color: #1175f5;
}
ul li .nav-icon:hover{
    cursor: pointer;
}
ul li .nav-icon-message{
    font-size: 20px;
   padding: 0px;
   margin-top: 5px;
   color: #181824;

}.top_nav li a i {
  font-size: 20px;
}
.nav-items .search-box {
    padding: 5px;
    margin-right: 20px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
    border-radius: 20px;
    border: 1px solid transparent;
}
.nav-items .search-box input {
  background: transparent;
  border: none;
  margin-right: 5px;
  color: #000;
  font-size: 14px;
}

.nav-items {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top_nav .navbar-right {
  margin: 0;
  width: auto;
  float: right;
}

i.fa-solid.fa-magnifying-glass.nav-icon {
  font-size: 16px;
  color: #1175f5;
}
i.fa-solid.fa-magnifying-glass.nav-icon:hover {
  cursor: pointer;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}.nav-heading h1{
  font-family: "Cinzel", serif;
  margin-left: 30px;
  color:#181824
}
a.dropdown-toggle.info-number {
  padding: 0px;
  margin-right: 10px;
}
a.user-profile.dropdown-toggle {
  padding: 0px;
  margin-right: 10px;
  margin-bottom: 5px;
}
.nav_menu .nav-items ul li{
  margin-right: 10px;
}
a#menu_toggle {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width:992px){
  .nav_menu .nav-items ul li{
    margin-right: 0px;
  }
}
@media (max-width:768px){
  nav{
      display: block;
      text-align: center;
  }.nav-items {
    margin-bottom: 10px;
    justify-content: center;
}
}
@media (max-width:576px){
  .nav-items {
    flex-wrap: wrap-reverse;
  }.search-items {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}.nav-items .search-box {
  padding: 5px;
  border-radius: 20px;
  margin-right: 10px;
  width: 205px;
  margin-bottom: 10px;
}
ul.nav.navbar-nav.navbar-right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}a.dropdown-toggle.info-number {
  padding: 0px;
}.info-number .badge {
  right: -10px;
  top: -6px;
}ul li .nav-icon {
  font-size: 20px;
  margin-right: 20px;
}.nav-heading h1 {
  margin-left: 0px;
  font-size: 30px;
}a.user-profile.dropdown-toggle {
  padding: 0px;
  padding-left: 10px;
}
#suggestionDropdown{
  min-width: 98%;
    top: 130px;
    padding-bottom: 30rem;
text-align: left;
}
}

/* ! Login Page Css */

.login-area{
  background-image: url(/assets/images/25097.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-area .login-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  margin: 0 auto;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
}

.login-area .login-form {
  display: flex;
  flex-direction: column;
}

.login-area .login-form h1 {
  font-family: "Raleway", sans-serif;
  margin-bottom: 10px;
  color: #3a7bd5;
}

.login-area .login-form p {
  margin-bottom: 20px;
  color: #777;
}

.login-area .input-group {
  margin-bottom: 20px;
}

.login-area .input-group input {
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  width: 100%;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.login-area .input-group input:focus {
  border-color: #1175f5;
  outline: none;
}

.login-area button {
  padding: 15px;
  border: none;
  border-radius: 8px;
background: #B56AC7;
background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition:  0.3s ease;
  margin-top:1rem;
}


.login-area .bottom-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  color: #777;
}

.login-area .bottom-text p {
  margin-bottom: 10px;
}

.login-area .bottom-text a {
  color: #181824;
  text-decoration: none;
  transition: color 0.3s ease;
}

.login-area .bottom-text a:hover {
  color: #1175f5;
}

@media(max-width: 600px) {
  .login-area .login-container {
    width: 100%;
  }
}


/***** Adduser Css *****/


/* Full-width input fields */
.adduser-area{
  margin-top: 100px;
}
.adduser-area h1{
  font-family: "Cinzel", serif;
  color: #3a7bd5;
}
.adduser-area input[type=text], .adduser-area  input[type=password] , .adduser-area  input[type=date] ,.adduser-area select.select-role{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1 !important;
}

.adduser-area input[type=text]:focus, .adduser-area  input[type=date] ,.adduser-area input[type=password]:focus ,.adduser-area select.select-role:focus{
  background-color: #ddd;
  outline: none;
}

.adduser-area hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
.orderlink{
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  color: #000;
  padding: 14px 0px;
  margin: 8px 0;
  cursor: pointer;
  width: 15% !important;
  opacity: 0.9;
  text-align: center;
}
.adduser-area button {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  color: #000;
  padding: 14px 0px;
  margin: 8px 0;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
.orderlinkBox{
    display:flex;
    justify-content:center;
    align-items:center;
}
.adduser-area button:hover,.adduser-area .cancelbtn:hover  {
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  border: none;
}

.adduser-area .cancelbtn {
  padding: 14px 20px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  color: #000;
}
.cancelbtn a{
    color:black;
}
.adduser-area .cancelbtn, .adduser-area .signupbtn {
  float: left;
  width: 100px;
  margin-right: 10px;
  border-radius: 10px;
  margin-top:10px;
  text-align:center;
}


.adduser-area .clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.adduser-area .adduser-box{
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 50px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.dailyupdate{
    display:flex;
    gap:12rem;
}
.totalproduct{
width: 220px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff38, #3a7bd52e) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
    height: 100px;
    padding: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    justify-content: space-between;
}
.totalproduct  i{
    font-size: 30px;
    /*margin-right: 20px;*/
    color: #1175f5;
}
.number h5{
    font-weight: 600 !important;
    width:11rem;
}
.number p{
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 300 !important;
    /*color: #005cd0d4;*/
}
.number p span{
     font-weight: 600 !important;
     font-size:1.5rem;
     color:#005cd0d4;
}
.adduser-area select.select-role {
  width: 200px;
  padding: 10px;
  margin-bottom: 50px;
}
.ordrebox{
       display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}
.adduser-area .select-role .role-option{
  width: 200px;
  padding: 10px;
}
@media (max-width:768px){
  .adduser-area{
    margin-top: 200px;
  }.adduser-area h1 {
 font-size: 24px;
}
/*#suggestionDropdown{*/
/*   width: 68.2% !important;*/
/*}*/
}

@media(max-width:576px){
  .adduser-area .adduser-box{
    padding: 20px;
  }
}

@media (min-width:2560px){
    #suggestionDropdown{
  width: 90.5% !important;
}

}
/*@media (min-width:1024px){*/
/*    #suggestionDropdown{*/
/*  width: 76.1% !important;*/
/*}*/
/*}*/
/*@media (min-width:1440px){*/
/*    #suggestionDropdown{*/
/*  width: 87.1% !important;*/
/*}*/
/*}*/

/***** Viewuser Css ****/
.view-user {
  margin-top: 100px;
}
.viewuser-area .view-user-box {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.viewuser-area h1{
  font-family: "Cinzel", serif;
  margin-bottom: 20px;
  color: #3a7bd5;
}
.viewuser-area th{
  background-color: #1175f5;
  color: #fff;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}
.viewuser-area th , .viewuser-area td{
  font-size: 14px;
  text-align: left;
  vertical-align: middle !important;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}
 
@media (max-width:768px){
  .view-user {
    margin-top: 150px;
}.viewuser-area h1 {
  font-size: 24px;
}
}
@media (max-width:576px){
  .view-user{
    padding: 0px;
  }

}

/***** Vieworder Css ****/
.vieworder-area {
  margin-top: 100px;
}.view-order-box {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.vieworder-area h1{
  font-family: "Cinzel", serif;
  margin-bottom: 20px;
  color: #3a7bd5;
}


.vieworder-area th{
  background-color: #1175f5;
  color: #fff;

}
.vieworder-area th , td{
  font-size: 14px;
  text-align: center;
  vertical-align: middle !important;
  border-top: none !important;

}
.vieworder-area td img{
  width:60px;
}
.vieworder-area th{
  font-family: "Raleway", sans-serif;
}
.vieworder-area .order-date-box {
  display: flex;
  justify-content: end;
  align-items: end;
  margin-bottom: 20px;
}
.vieworder-area .order-filter {
  display: flex;
 justify-content:center;
  align-items: center;
  gap:300px;
  margin-bottom:20px !important;
  
}
#order-filter{
    background-color: white;
    border-radius: 10px;
    color: black;
    opacity: 0.99;
    width: 100% !important;
    margin-top: -459px;
    height: 444px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 200px; */
    box-shadow: 0px 0px 66px #010101;

}
#order-filter .close {
    float: right;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    /*filter: alpha(opacity = 20);*/
     opacity:1 !important; 
    position: relative;
    top: -45%;
    left: 30%;
}
.date-box{
    height: 35px;
    border: 2px solid #00d2ff;
    border-radius: 10px;
    width: 100%;
    padding-left:20px;
}
.vieworder-area .order-search-input{
  width: 200px;
  margin-right: 5px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border: 2px solid transparent;
  padding: 5px;
    border-radius: 10px;
}
.vieworder-area .order-filter .order-search-btn {
  padding: 20px;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  border: 1px solid #1175f5;
  color: black;
  border-radius: 10px;
  height:35%;
  width:35%;
}
.vieworder-area .order-date-box input.date-box {
  width: 200px;
  margin-right: 10px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border: 2px solid transparent;
  padding: 5px;
  border-radius: 10px;
}

@media(max-width:1100px){
  .vieworder-area th, .vieworder-area td {
    font-size: 12px;
    padding: 7px !important;
}
}
 @media (max-width:992px){
.vieworder-area .order-filter {
    display: block;
}
.vieworder-area .order-date-box {
  display: flex;
  justify-content: start;
  align-items: end;
  margin-bottom: 20px;
  margin-top: 20px;
}
.vieworder-area .order-search-input {
  width: 156px;
}
.vieworder-area .order-date-box input.date-box {
  width: 160px;
}
 }

 @media(max-width:768px){
  .vieworder-area {
    margin-top: 200px;
  }.vieworder-area h1 {
  font-size: 24px;
}
 }
 @media (max-width:576px){
  .vieworder-area .order-date-box {
    display: block;
    justify-content: start;
    align-items: end;
    margin-bottom: 20px;
    margin-top: 20px;
  }.vieworder-area .order-date-box input.date-box {
    margin-bottom: 10px;
  }
 }
 @media (max-width:351px){
  .vieworder-area .order-filter .order-search-btn {
    margin-top: 5px;
 }
 }

/***** Create-Order-Css *****/
.create-order-area .create-order-heading h1 {
  font-family: "Cinzel", serif;
  margin-bottom: 20px;
  color: #3a7bd5;
}
.create-order-area th{
  background-color: #1175f5;
  color: #fff;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}.create-order-area th , .create-order-area td{
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}
.create-order-area td img{
   width: 70px;
}
.create-order-area .create-quantity{
  width: 50px;
}
.create-order-area .col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.create-order-area .col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.create-order-area .col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.create-order-area .col-25,
.create-order-area .col-50,
.create-order-area .col-75 {
  padding: 0 16px;
}


.create-order-area input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.create-order-area label {
  margin-bottom: 10px;
  display: block;
}

.create-order-area .icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.create-order-area .checkout {
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  color: #fff;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
}

.create-order-area .btn:hover {
  background-color: #45a049;
}

.create-order-area span.price {
  float: right;
  color: grey;
}
.create-order-area {
  margin-top: 100px;
}

.create-order-area .create-order-box .create-order-btns{
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 5px;
}
.create-order-area .create-order-product{
  background-color: #fff;
  padding: 20px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.create-order-area .create-order-box p{
 margin-top: 5px;
}
.create-order-area .create-order-box .add-btn{
  margin-top: 10px;
  font-size: 14px;
  width: 100%;
  border-radius: 5px;
  border: 1px solid #000;
}
.create-order-area .create-order-box .create-order-btns h6{
  margin: 0px 5px;
  font-size: 14px;
}
.create-order-area .create-order-box .create-order-btns .plus-btn , .minus-btn{
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid grey;
}
.create-order-area .create-order-form{
  background-color: #fff;
  padding: 20px;
  margin-top: 50px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent; 
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 
}
.create-order-area .create-order-form h4{
  margin-bottom: 20px;
}
.create-order-area .create-order-total{
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.create-order-area .create-order-total h6{
font-weight: 600;

}
.PImage{
    width: 30%;
    height: 30%;
}
@media(max-width:1100px){
  .create-order-area th, .create-order-area td {
    font-size: 12px;
    padding: 8px;
}
}

@media (max-width: 800px) {
  .create-order-area .create-order-form .row {
    flex-direction: column;
  }
  .create-order-area .create-order-form .col-25 {
    margin-bottom: 20px;
  }
}

@media (max-width:768px){
  .create-order-area {
    margin-top: 150px;
  }.create-order-area .create-order-heading h1 {
    font-size: 24px;
}
}
@media (max-width:576px){
  .order-product-box {
 text-align: center;
  }
  .create-order-area .create-order-box .create-order-btns {
    justify-content: center;
}
.create-order-area .create-order-box .add-btn {
  width: 50%;
}
.create-order-area td img{
  width: 60px;
}
}

@media(max-width:420px){
  .create-order-area th, .create-order-area td {
    font-size: 10px;
    padding: 2px;
}
}



/* **** Production-area Css**** */

.production-area{
  background: #ecf0f4;
  margin-top: 100px;
  }

.production-area .production-box{
  background: #fff;
  height: 505px; 
}
.production-area .production-box h2{
  margin: 0;
  font-size: 24px;
}
.production-area .production-box-2{
  background: #fff;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center ;
  height: 505px;
}
.production-area .production-box-2 h1{
  font-size: 20px;
  font-weight: 800;
}
canvas#barChart {
  height: 500px !important;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

@keyframes bake-pie {
  from {
    transform: rotate(0deg) translate3d(0,0,0);
  }
}

.production-area section {
  margin-top: 30px;
}
.production-area .pieID {
  display: inline-block;
  vertical-align: top;
}
.production-area .pie {
  height: 200px;
  width: 200px;
  position: relative;
  margin: 0 30px 30px 0;
}
.production-area .pie::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background: #EEE;
  border-radius: 50%;
  top: 50px;
  left: 50px;
}
.production-area .pie::after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
  margin: 220px auto;
  
}
.production-area .slice {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 200px, 200px, 100px);
  animation: bake-pie 1s;
}
.production-area .slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
}
.production-area .legend {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #FFF;
  padding: 15px;
  font-size: 13px;
  box-shadow: 1px 1px 0 #DDD,  2px 2px 0 #BBB;
}
.production-area .legend li {
  width: 110px;
  height: 1.25em;
  margin-bottom: 0.7em;
  padding-left: 0.5em;
  border-left: 1.25em solid black;
}
.production-area .legend em {
  font-style: normal;
}
.production-area .legend span {
  float: right;
}
.production-area footer {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 13px;
  background: #DDD;
  padding: 5px 10px;
  margin: 5px;
}
.production-area .material-symbols-outlined {
  font-size: 40px;
  color: #fff;
  background: #38ce3c;
  padding: 10px;
}
.production-area .production-report {
  background-color: #fff;
  margin-top: 20px;
}
.production-area .report-box {
  padding: 20px;
  padding-top: 0px;
}
.production-area .report-box .report-border {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 10px;
  border-right: 1px solid #e8ecf1;
}
.production-area .report-box .report-border-4 {
  border-right: none;
}
.production-area .production-report-heading{
  padding: 20px;
}
.production-area .production-report-heading h2{
  margin-bottom: 10px;
  font-weight: 700;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
}
.production-area .production-report-heading .production-report-line{ 
 height: 1px ;
 background-color:  #e8ecf1;
}
.production-area .production-social-media {
 margin: 50px 0px;
 overflow: hidden;
}
.production-area .production-media-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.production-area .production-media-box .media-icon {
  font-size: 30px;
  background: #fff;
  color: #1175f5;
  padding: 10px;
  border-radius: 50%;
  margin-right: 10px;
}
.production-area .production-media-box p{
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.production-area .production-media-box h1{
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}
@media (max-width:1200px){
  .production-area .report-box .report-border-3 {
    border-right: none;
  }
  .production-area .production-box-2 {
    margin-top: 20px;
}
}
@media(max-width:1120px){ 
  .production-area canvas#barChart {
    height: 400px !important;
  }
}
@media (max-width:992px){
  .production-area .production-media-box p{
    font-size: 14px;
  }
  .production-area .production-media-box h1{
    font-size: 26px;
  }.production-area .production-media-box .media-icon {
    font-size: 30px;
    padding: 5px;
}.production-area .production-box{
  background: #fff;
  height: 380px; 
}
.production-area .production-box-2 {
  height: 440px;
}
}
@media(max-width:768px){
  .production-area canvas#barChart {
    height: 350px !important;
  }
  .production-area {
    margin-top: 140px;
}  .production-area .production-media-box {
    margin-top: 20px;
}
.production-area .report-box .report-border {
  border-right: none;
  border-bottom: 1px solid #e8ecf1;
}
}  
@media(max-width:576px){
  .production-area canvas#barChart {
    height: 240px !important;
  }
  .production-area .pie::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 80px;
    height: 80px;
    background: #EEE;
    border-radius: 50%;
    top: 35px;
    left: 35px;
}
.production-area .slice {
  position: absolute;
  width: 150px;
  height: 150px;
  clip: rect(0px, 208px, 207px, 89px);
  animation: bake-pie 1s;
}.production-area .slice span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  clip: rect(9px, 206px, 198px, 62px);
}
.production-area .pie {
  height: 200px;
  width: 200px;
  position: relative;
  margin:0;
}
.production-area {
  margin-top: 160px;
}
.production-area .production-box {
  background: #fff;
  height: 300px;
}
.production-area .production-box-2 h1 {
  font-size: 16px;
}
.production-area .production-box-2 p {
  font-size: 12px;
  margin-top: 5px;
}

} 

@media(max-width:443px){
  .pieID.pie {
    display: flex;
    justify-content: center;
    align-items: center;
}
.production-area .pie::before {
  top: 60px;
  left: 60px;
}
}
@media(max-width:375px){
  .production-area canvas#barChart {
    height: 190px !important;
  }
}  


/***** View Suppplier Css ****/


.view-supplier{
  margin-top: 100px;
}
.viewsupplier-area .view-supplier-box {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.viewsupplier-area h1{
  font-family: "Cinzel", serif;
  margin-bottom: 20px;
  color: #3a7bd5;
}
.viewsupplier-area th{
  background-color: #1175f5;
  color: #fff;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}.viewsupplier-area th , .viewsupplier-area td{
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}
 
@media (max-width:768px){
   .view-supplier{
    margin-top: 150px;
   }
   .viewsupplier-area h1 {
    font-size: 24px;
}
}


/***** Add Supplier Css  *****/


.addsupplier-area button {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  color: #000;
  padding: 14px 0px;
  margin: 8px 0;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.addsupplier-area button:hover {
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  border: none;
}

.addsupplier-area .cancelbtn {
  padding: 14px 20px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  color: #000;
}

.addsupplier-area .cancelbtn, .addsupplier-area .signupbtn {
  float: left;
  width: 80px;
  margin-right: 10px;
  border-radius: 10px;
}

.addsupplier-area  {
  padding: 16px;
}
.addsupplier-area .clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.addsupplier-area .addsupplier-box{
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 50px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.addsupplier-area select.select-role {
  width: 200px;
  padding: 10px;
  margin-bottom: 50px;
}
.addsupplier-area .select-role .role-option{
  width: 200px;
  padding: 10px;
}
.addsupplier-area{
 margin-top: 100px;
}
.addsupplier-area h1{
  font-family: "Cinzel", serif;
  color: #3a7bd5;
}
.addsupplier-area input[type=text], .addsupplier-area  input[type=password] ,.addsupplier-area select.select-role, .addsupplier-area input[type=email]{
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

.addsupplier-area input[type=text]:focus, .addsupplier-area input[type=password]:focus ,.addsupplier-area select.select-role:focus{
  background-color: #ddd;
  outline: none;
}

.addsupplier-area hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
@media (max-width:768px){
  .addsupplier-area{
    margin-top: 150px;
  }.addsupplier-area h1 {
   font-size: 24px;
}
  .addsupplier-area p{
   font-size: 12px;
   margin-top: 10px;
}
}

@media(max-width:576px){
  .addsupplier-area .addsupplier-box{
    padding: 20px;
  }
}


/***** Payment Css ****/


.payment{
margin-top: 100px;
}
.payment-area .payment-box {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
  border-radius: 20px;
  border: 2px solid transparent;
  padding: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.payment-area h1{
  font-family: "Cinzel", serif;
  margin-bottom: 20px;
  color: #3a7bd5;
}
.payment-area th{
  background-color: #1175f5;
  color: #fff;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}.payment-area th , .payment-area td{
  font-size: 14px;
  text-align: center;
  vertical-align: middle !important;
  border: 1px solid #a9a9a9;
  border-collapse: collapse;
}
.payment-area .payment-heading p{
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  color: gray;
}
.payment-area .payment-heading h4{
  font-size: 26px;
  
}
.payment-area .payment-heading .online-order , .amount-recieved{
  box-shadow: 1px 1px #e2e2e2;
  border-radius: 5px;
  padding: 20px;
}
.payment-area .payment-transaction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px;
}
.payment-area .payment-transaction .payment-month{
  padding: 5px 10px;
}
@media (max-width:768px){

  .payment{
    margin-top: 150px;
    }.payment-area h1 {
      font-size: 24px;
  }
}

@media (max-width:400px){
  .payment-area .payment-transaction .payment-month {
   margin-left: 10px;
}
  .payment-area h1 {
    margin-top: 10px;
}
.payment-area .payment-transaction {
  margin: 25px 0px;
}
}

@media (max-width:360px){
  .main_container {
 overflow: hidden;
  }
  .dt-layout-row{
      flex-direction:column;
  }
  .dt-layout-row{
      width:5%;
  }
}
/*Product Description*/
.prod_desc{
    max-width:500px !important;
    width:fix-content !important;
}
/* End Product Description*/

/*Orderview datatable*/
.dt-input {
    /*margin-right: 5px;*/
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
    border: 2px solid transparent;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px !important;
}
.dt-search #dt-length-0{
     width:35%!important;
}
.dt-length{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    align-items: center;
    padding: 0;
    margin: 0;
}
.dt-length label{
        text-transform: capitalize;
}
div.dt-container select.dt-input{
    margin:0px !important;
    width:10% !important;
}
.dt-length select{
    border: 2px solid transparent;
    padding: 5px !important;
    border-radius: 10px;
    border: 2px solid transparent !important; 
    width:10%!important;
}
#myTable_wrapper .dt-layout-row{
    display: flex;
    max-width: 100% !important;
    justify-content: space-between;
    /*gap: 1129px;*/
}
#myTable_wrapper{
    width:100% !important;   
}
.dt-layout-cell {
    width:100% !important;
}
.dt-paging-button{
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box;
    border: 2px solid transparent;
    padding: 5px;
    border-radius: 10px;
}
div.dt-container .dt-search input{
     border: 2px solid transparent;
    padding: 5px !important;
    border-radius: 10px;
    border: 2px solid transparent !important; 
}

#PaymentType{
    margin-right: 5px !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box !important;
    border: 2px solid transparent !important;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px !important;
    width:100%;
}
.mark, mark {
    padding:0px !important;
    background: #ffff007d !important;
} 
#suggestionDropdown {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    overflow-y: auto;
    z-index: 9999;
    width: 87% !important;
    height: 40%;
    max-height: 100%;
    right: 5px;
    box-shadow: 9px 10px 10px gray;
    }
    #suggestionDropdown option{
        margin-top:1rem;
    }
    .suggestion-item {
        padding: 8px 12px; /* Padding */
        cursor: pointer; /* Show pointer cursor on hover */
    }
    .suggestion-item a{
        color:black;
    }
    .suggestion-item:hover {
        background-color: #f2f2f2; /* Highlight background on hover */
    }
    .no-data{
        font-size: 20px;
        padding: 81px;
    }
.wearehouse{
    margin-top: 0px !important;
}
#PaymentType,#orderType {
    margin-right: 5px !important;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #00d2ff, #3a7bd5) border-box !important;
    border: 2px solid transparent !important;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 20px !important;
    width: 100%;
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
     white-space: wrap !important; 
}
.ProductionLog {
        display: none; /* Initially hidden */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background: linear-gradient(180deg, #1175f5, #00d2ff);
        z-index: 1000; /* Ensure it's above the overlay */
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 50%;
    }
 


/*@media (min-width: 425px) {*/
/*    .classDashboard{*/
/*        padding:20px;*/
/*    }*/
/*    .bannerDashboard h2{*/
/*        font-size: 21px;*/
/*        margin-left: 44px;*/
/*    }*/
/*    .bannerDashboard p{*/
/*        font-size: 14px;*/
/*        margin-left: 47px;*/
    
/*    }*/
/*    .classDashboard img {*/
/*    width: 67%;*/
/*    height: 67%;*/
/*    margin-left: 10rem;*/
/*    }*/
/*    .menu_section > ul{*/
/*        margin-top: 12px;*/
/*    }*/
/*}*/
/*@media (max-width: 320px){*/
/*    .bannerDashboard h2{*/
/*        font-size: 19px;*/
/*        margin-left: 63px;*/
/*    }*/
/*    .bannerDashboard p{*/
/*        font-size: 11px;*/
/*        margin-left: 56px;*/
    
/*    }*/
/*    .classDashboard{*/
/*        padding:10px;*/
/*    }*/
/*    .classDashboard img{*/
/*        margin-left: 80px;*/
/*        height: 69%;*/
/*        width: 69%;*/
/*    }*/
/*    .menu_section > ul{*/
/*        margin-top: 12;*/
/*    }*/
/*}*/
/*@media (min-width: 768px){*/
/*    .classDashboard {*/
/*        padding:20px;*/
/*    }*/
/*    .classDashboard img{*/
/*        width: 79%;*/
/*        height: 50%;*/
/*        margin-left: 11rem;*/
/*    }*/
/*}*/
/*@media (min-width: 1024px){*/
/*    .classDashboard .row{*/
/*        gap:10px;*/
/*    }*/
/*     .classDashboard img{*/
/*        width: 187px;*/
/*        height: 187px;*/
/*        margin-left: 6rem;*/
/*        object-fit: cover;*/
     
/*     }*/
/*}*/

@media screen and (max-width: 320px) {
     /*media for Home Report Page*/
    .reportSpacing {
        padding:20px 0;
    }
    .reportSpacing .item{
        flex-direction: column;
        margin-left: 25%;
        gap: 10px;
    }
    .downloadBox{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;  
    }
    .filename p{
        text-align: center;
    }
    #order-filter{
       width: 74% !important;
        /* margin-top: -258px; */
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 135%;
        right: 10px;
        height:40%;
    }
    #order-filter .close{
        position:absolute;
        top: 1%;
        left: 87%;
    }
    .order-date-box form{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    
    }
    /*media for Purchase Order Page*/
    .viewProductImage{
        width:50px !important;
        height:50px !important;
    }
    #searchboxtable{
        flex-direction: column;
    }
    .wearehouse {
        left: 61% !important;
        width: 73%;
    }
    .clearfix{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .PImage{
        width:100%;
        height: 100% !important;
    }
    .shipTable{
        overflow-y:auto;
        width:100%;
    }
    .shipTable table th, td {
        text-align: center;
        padding: 0px;
        font-size: 12px;
    }
    #addplog{
        font-size:10px !important;
        margin-left:30px;
    }
    .ProductionLog{
        width: 70% !important;
        margin-left: 34px !important; 
    }
    .VCProd .row .col-sm-10{
        width: 100% !important;
        overflow: auto;
    }
   
    .pdfbox {
        margin-bottom: 10px;
        margin-right: 34px;
    }
   .col-sm-2 .col-form-label{
        /*width:28% !important;*/
        text-align:left;
    }
    .adduser-area .row{
        flex-direction:column;
    }
    .adduser-area .row .col-form-label{
        text-align:left !important;
        width:100%;
    }
    .comment_container {
        left: 60% !important;
        width: 63% !important;
    }
    .comment_form{
        margin-left:0px !important;
    }
    .badge {
        right:32px;
    }
    .VPO tr td:last-child{
        width:-11px;
    }
    .serial-number-column{
        width: 100% !important;
        padding: 0 15px !important;
    }
    #serialNumbersContainer input[type=text]{
        width:100% !important;
    }
}


/*media for Home Page*/
@media screen and (min-width: 321px) and (max-width: 375px) {
    /*media for Home Page*/
    .bannerDashboard h2 {
        font-size: 39px;
        margin-left: 60px;
    }
    .bannerDashboard p {
        font-size: 17px !important;
        margin-left: 68px;
    }
    .classDashboard{
        padding: 30px 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-left: 64px;
    }
    /*media for Report Page*/
    .reportSpacing {
        padding:20px 0;
    }
    .reportSpacing .item{
        flex-direction: column;
        margin-left: 20%;
        gap: 10px;
    }
    .downloadBox{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;  
    }
    .filename p{
        text-align: center;
    }
    #order-filter{
       width: 77% !important;
        /* margin-top: -258px; */
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 135%;
        right: 10px;
        height:40%;
    }
    #order-filter .close{
        position:absolute;
        top: 1%;
        left: 87%;
    }
    .order-date-box form{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }
    .viewProductImage{
        width:50px !important;
        height:50px !important;
    }
    #searchboxtable{
        flex-direction: column;
    }
    .wearehouse {
        left: 59% !important;
         width: 75%;
    }
    .clearfix{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .shipTable{
        overflow-y:auto;
    }
    .shipTable table th, td {
        text-align: center;
        padding: 0px;
        font-size: 12px;
    }
    #addplog{
        font-size:10px !important;
    }
    .ProductionLog{
        width: 70% !important;
        margin-left: 34px !important; 
    }
    .PImage{
        width:100%;
        height: 100% !important;
    }
   
    .col-sm-2{
        width:28% !important;
    }
    .InComDes{
        padding:10px;
        width:100% !important;
        text-align:center;
    } 
    .comment_container {
        left: 59% !important;
        width: 75% !important;
    }
    .comment_form{
        margin-left:0px !important;
    }
     .serial-number-column{
        width: 100% !important;
        padding: 0 15px !important;
    }
    #serialNumbersContainer input[type=text]{
        width:100% !important;
    }
}   
@media screen and (min-width: 376px) and (max-width: 425px) {
    /*media for Home Screen*/
    .classDashboard{
       padding: 30px 0; 
       display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-left: 64px;
    }
    .classDashboard img {
        width: 280px;
        height: 280px;
    }
    .bannerDashboard h2 {
        font-size: 39px;
        margin-left: 60px;
    }
    .bannerDashboard p {
        font-size: 17px !important;
        margin-left: 68px;
    }
    
      /*media for Report Page*/
    .reportSpacing {
        padding:20px 0;
    }
    .reportSpacing .item{
        flex-direction: column;
        margin-left: 20%;
        gap: 10px;
    }
    .downloadBox{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;  
    }
    .filename p{
        text-align: center;
    }
    #order-filter{
       width: 77% !important;
        /* margin-top: -258px; */
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 135%;
        right: 15px;
        height:40%;
    }
    #order-filter .close{
        position:absolute;
        top: 1%;
        left: 87%;
    }
    .order-date-box form{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    
    }
    .viewProductImage{
        width:50px !important;
        height:50px !important;
    }
    #searchboxtable{
        flex-direction: column;
    }
    .wearehouse {
       left: 58% !important;
        width: 76% !important;
    }
    .clearfix{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .shipTable{
        overflow-y:auto;
    }
    .shipTable table th, td {
        text-align: center;
        padding: 0px;
        font-size: 12px;
    }
    #addplog{
        font-size:10px !important;
    }
    .ProductionLog{
        width: 78% !important;
        margin-left: 34px !important; 
    }
    .PImage{
        width: 70% !important;
        height: 60% !important;
    
    }
    
    .col-sm-2{
        width:28% !important;
    }
    .InComDes{
        padding:10px;
        width:100% !important;
        text-align:center;
    } 
     .comment_container {
        left: 58% !important;
        width: 77% !important;
    }
    .comment_form{
        margin-left:0px !important;
    }
     .serial-number-column{
       width: 48% !important;
       padding: 0px 6px !important;
    }
    #serialNumbersContainer input[type=text]{
        width:90% !important;
    }
}
@media screen and (min-width: 426px) and (max-width: 768px) {
     /*media for Home Screen*/
    .classDashboard{
       padding: 30px 0; 
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        /*margin-left: 18px;*/
        width:100%;
    }
    .classDashboard img {
        width: 100%;
        height: 300px;
    }
    .reportSpacing{
        margin-left:128px;
        padding: 50px 0px;
    }
    .wearehouse {
        left: 54% !important;
        width: 85% !important;
    }
    .ProductionLog{
        width: 78% !important;
        margin-left: 34px !important; 
    }
    .shipTable{
         overflow-y:auto;
    }
    
    #suggestionDropdown{
    width: 90.2% !important;
    }
    .InComDes{
        padding:10px;
        width:100% !important;
        text-align:center;
    }
     .comment_container {
        left: 54% !important;
        width: 81% !important;
    }
    .comment_form{
        margin-left:113px !important;
    }
    #serialNumbersContainer input[type=text]{
        width: 31% !important;
    }
    .serial-number-column{
        width:33% !important;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
     /*media for Home Screen*/
     .classDashboard{
        padding: 0;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
     }
     .classDashboard .row .col-md-3{
         width:100%;
     }
     .classDashboard .row{
        margin-top: 20px;
        display: flex;
        justify-content: center;
        flex-direction: column ;
        gap: 20px;
    }
     #updateStatu{
         width:100% !important;
     }
     .action{
         width:100% !important;
     }
     .action a{
         padding:6px !important;
     }
     #updateOrderStatus{
         width:100% !important;
     }
    .classDashboard img{
        padding:20px 25px;
    }
    .reportSpacing{
         margin-left:250px;
    }
   
    .ProductionLog{
        width: 64% !important;
        margin-left: 110px !important;
    }
    #suggestionDropdown{
        width: 77.1% !important;
    }
    .btn-success{
        margin-top:10px;
    }
    .InComDes{
        padding:10px;
        width:100% !important;
        text-align:center;
    }
    .comment_container {
        left: 63% !important;
        width: 50% !important;
    }
    .comment_form{
        margin-left:72px !important;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
  td{
      font-size:10px !important;
  }
  
  span{
      /*font-size:10px !important;*/
  }
  #updateOrderStatus{
      width:100% !important;
      padding:10px !important;
  }
  .action a{padding:3px 6px !important;}
  .toggle_comment_btnView img, .toggle_comment_btn img{
      width:20px !important;
  }
  .cusaction{
        width:15%;
    }
    #suggestionDropdown{
        width: 84% !important;
    }
    .InComDes{
        padding:10px;
        width:100% !important;
        text-align:center;
    }
    .comment_form{
        margin-left:22px !important;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        padding:4px !important;
    }
}
@media screen and (min-width: 1441px) and (max-width: 2560px) {
    #suggestionDropdown{
        width: 91% !important;
    }
    .action a{padding:2px 6px !important;}
}
@media screen and (max-width: 317px) {
    .reportSpacing{
        margin-left:0px !important;
    }
    .reportSpacing .item{
        flex-direction: column;
        margin-left: 25%;
        gap: 10px;
    }
    .downloadBox{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;  
    }
    .filename p{
        text-align: center;
    }
    .comment_form{
        margin-left:181px !important;
    }
}
.badge{
        display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: blue !important;
    border-radius: 10px; 
    position: absolute;
   top: -8px;
    right: -6px !important;
}
.btn-group, .btn-group-vertical{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}
.btn-group-vertical>.btn:first-child:not(:last-child) {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group-vertical>.btn:last-child:not(:first-child){
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;

}
.UserAction .btn-group-vertical>.btn, .btn-group-vertical>.btn-group, .btn-group-vertical>.btn-group>.btn{
        width: 26% !important;
    max-width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.UserAction{
    width:10% !important;
}
#serialNumbersContainer ,.serialNoBox{
    overflow-y: scroll !important;
    height: 200px !important; 
}