.layout {
  z-index: 1;
}
.layout .header {
  display: flex;
  align-items: center;
  padding: 20px;
}
.layout .content {
  padding: 12px 50px;
  display: flex;
  flex-direction: column;
}
.layout .footer {
  text-align: center;
  margin-top: auto;
  margin-bottom: 20px;
  padding: 20px;
}

.sidebar {
  color: #7d84ab;
  overflow-x: hidden !important;
  position: relative;
	z-index: 9;
}
.sidebar::-webkit-scrollbar-thumb {
  border-radius: 4px;
}
.sidebar:hover::-webkit-scrollbar-thumb {
  background-color: #1a4173;
}
.sidebar::-webkit-scrollbar {
  width: 6px;
  background-color: #0c1e35;
}
.sidebar .image-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: none;
}
.sidebar .image-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sidebar.has-bg-image .image-wrapper {
  display: block;
}
.sidebar .sidebar-layout {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #0B0C10;
  z-index: 2;
}
.artos-pic img{width: 100%;}
.sidebar .sidebar-layout .sidebar-header {
  height: 100px;
  min-height: 100px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.sidebar .sidebar-layout .sidebar-header > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sidebar .sidebar-layout .sidebar-content {
  flex-grow: 1;
  padding: 10px 0;
}
table th {
    background: #0103AE;
    color: #fff;
}
.sidebar .sidebar-layout .sidebar-footer {
  height: 230px;
  min-height: 230px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.sidebar .sidebar-layout .sidebar-footer > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@keyframes swing {
  0%, 30%, 50%, 70%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
}
.layout .sidebar .menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.layout .sidebar .menu .menu-header {
  font-weight: 600;
  padding: 10px 25px;
  font-size: 0.8em;
  letter-spacing: 2px;
  transition: opacity 0.3s;
  opacity: 0.5;
}
.layout .sidebar .menu .menu-item a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  color: #7d84ab;
  margin-bottom: 10px;
}
.layout .sidebar .menu .menu-item a:hover{ background:#E80606; border-radius:6px; }

.layout .sidebar .menu .menu-item a .menu-icon {
  font-size: 1.2rem;
  width: 35px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
  border-radius: 2px;
  transition: color 0.3s;
}
.layout .sidebar .menu .menu-item a .menu-icon i {
  display: inline-block;
}
.layout .sidebar .menu .menu-item a .menu-title {
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-grow: 1;
  transition: color 0.3s;
}
.layout .sidebar .menu .menu-item a .menu-prefix,
.layout .sidebar .menu .menu-item a .menu-suffix {
  display: inline-block;
  padding: 5px;
  opacity: 1;
  transition: opacity 0.3s;
}
.layout .sidebar .menu .menu-item a:hover .menu-title {
  color: #dee2ec;
}
.layout .sidebar .menu .menu-item a:hover .menu-icon {
  color: #dee2ec;
}
.layout .sidebar .menu .menu-item a:hover .menu-icon i {
  animation: swing ease-in-out 0.5s 1 alternate;
}
.layout .sidebar .menu .menu-item a:hover::after {
  border-color: #dee2ec !important;
}
.layout .sidebar .menu .menu-item.sub-menu {
  position: relative;
}
.layout .sidebar .menu .menu-item.sub-menu > a::after {
  content: "";
  transition: transform 0.3s;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  width: 5px;
  height: 5px;
  transform: rotate(-45deg);
}
.layout .sidebar .menu .menu-item.sub-menu > .sub-menu-list {
  padding-left: 20px;
  display: none;
  overflow: hidden;
  z-index: 999;
}
.layout .sidebar .menu .menu-item.sub-menu.open > a {
  color: #dee2ec;
}
.layout .sidebar .menu .menu-item.sub-menu.open > a::after {
  transform: rotate(45deg);
}
.layout .sidebar .menu .menu-item.active > a .menu-title {
  color: #dee2ec;
}
.layout .sidebar .menu .menu-item.active > a::after {
  border-color: #dee2ec;
}
.layout .sidebar .menu .menu-item.active > a .menu-icon {
  color: #dee2ec;
}
.layout .sidebar .menu > ul > .sub-menu > .sub-menu-list {
  background-color: #0b1a2c;
}
.layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon, .layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon, .layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon {
  background-color: #0b1a2c;
}
.layout .sidebar .menu.icon-shape-circle .menu-item a .menu-icon {
  border-radius: 50%;
}
.layout .sidebar .menu.icon-shape-rounded .menu-item a .menu-icon {
  border-radius: 4px;
}
.layout .sidebar .menu.icon-shape-square .menu-item a .menu-icon {
  border-radius: 0;
}
.layout .sidebar:not(.collapsed) .menu > ul > .menu-item.sub-menu > .sub-menu-list {
  visibility: visible !important;
  position: static !important;
  transform: translate(0, 0) !important;
}
.layout .sidebar.collapsed .menu > ul > .menu-header {
  opacity: 0;
}
.layout .sidebar.collapsed .menu > ul > .menu-item > a .menu-prefix,
.layout .sidebar.collapsed .menu > ul > .menu-item > a .menu-suffix {
  opacity: 0;
}
.layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > a::after {
  content: "";
  width: 5px;
  height: 5px;
  background-color: currentcolor;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 50%;
  border: none;
  transform: translateY(-50%);
}
.layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > a:hover::after {
  background-color: #dee2ec;
}
.layout .sidebar.collapsed .menu > ul > .menu-item.sub-menu > .sub-menu-list {
  transition: none !important;
  width: 200px;
  margin-left: 3px !important;
  border-radius: 4px;
  display: block !important;
}
.layout .sidebar.collapsed .menu > ul > .menu-item.active > a::after {
  background-color: #dee2ec;
}
.layout .sidebar.has-bg-image .menu.icon-shape-circle .menu-item a .menu-icon, .layout .sidebar.has-bg-image .menu.icon-shape-rounded .menu-item a .menu-icon, .layout .sidebar.has-bg-image .menu.icon-shape-square .menu-item a .menu-icon {
  background-color: rgba(11, 26, 44, 0.6);
}
.layout .sidebar.has-bg-image:not(.collapsed) .menu > ul > .sub-menu > .sub-menu-list {
  background-color: rgba(11, 26, 44, 0.6);
}
.layout.rtl .sidebar .menu .menu-item a .menu-icon {
  margin-left: 10px;
  margin-right: 0;
}
.layout.rtl .sidebar .menu .menu-item.sub-menu > a::after {
  transform: rotate(135deg);
}
.layout.rtl .sidebar .menu .menu-item.sub-menu > .sub-menu-list {
  padding-left: 0;
  padding-right: 20px;
}
.layout.rtl .sidebar .menu .menu-item.sub-menu.open > a::after {
  transform: rotate(45deg);
}
.layout.rtl .sidebar.collapsed .menu > ul > .menu-item.sub-menu a::after {
  right: auto;
  left: 10px;
}
.layout.rtl .sidebar.collapsed .menu > ul > .menu-item.sub-menu > .sub-menu-list {
  margin-left: -3px !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  font-family: "Poppins", sans-serif;
  color: #3f4750;
  font-size: 0.9rem;
	background: #f5f5f5;
}

a {
  text-decoration: none;
}

@media (max-width: 576px) {
  #btn-collapse {
    display: none;
  }
}
.layout .sidebar .pro-sidebar-logo {
  display: flex;
  align-items: center;
}
.layout .sidebar .pro-sidebar-logo > div {
  width: 35px;
  min-width: 35px;
  height: 35px;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: white;
  font-size: 24px;
  font-weight: 700;
  background-color: #ff8100;
  margin-right: 10px;
}
.layout .sidebar .pro-sidebar-logo > h5 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 20px;
  line-height: 30px;
  transition: opacity 0.3s;
  opacity: 1;
}
.layout .sidebar .footer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8em;
  padding: 20px 0;
  border-radius: 8px;
  width: 180px;
  min-width: 190px;
  margin: 0 auto;
  background-color: #162d4a;
}
.layout .sidebar .footer-box img.react-logo {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}
.layout .sidebar .footer-box a {
  color: #fff;
  font-weight: 600;
  margin-bottom: 10px;
}
.layout .sidebar .sidebar-collapser {
  transition: left, right, 0.3s;
  position: fixed;
  left: 260px;
  top: 40px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #00829f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  transform: translateX(50%);
  z-index: 111;
  cursor: pointer;
  color: white;
  box-shadow: 1px 1px 4px #0c1e35;
  display: none;
}
.layout .sidebar.collapsed .pro-sidebar-logo > h5 {
  opacity: 0;
}
.layout .sidebar.collapsed .footer-box {
  display: none;
}
.layout .sidebar.collapsed .sidebar-collapser {
  left: 60px;
}
.layout .sidebar.collapsed .sidebar-collapser i {
  transform: rotate(180deg);
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  color: #fff;
  background-color: #6c757d;
}
.badge.primary {
  background-color: #ab2dff;
}
.badge.secondary {
  background-color: #079b0b;
}

.sidebar-toggler {
  position: fixed;
  right: 20px;
  top: 20px;
}

.social-links a {
  margin: 0 10px;
  color: #3f4750;
}

/*Our style start*/

h1{font-size: 36px; font-weight:700;line-height: 42px;color: #000;}
h2{font-size: 30px; font-weight:700;line-height: 36px;color: #000;}
h3{font-size: 24px; font-weight:600;line-height: 30px;color: #000;}
h4{font-size: 20px; font-weight:600;line-height: 26px;color: #000;}
h5{font-size: 18px; font-weight:600;line-height: 24px;color: #000;}
h6{font-size: 16px; font-weight:600;line-height: 20px;color: #000;}

p{font-size: 16px; color: #000;}
.pro-pic {text-align: center;    border-top: 1px #2f2d2d solid;border-bottom: 1px #2f2d2d solid; padding: 20px 0; }
.pro-pic img { height: 80px; width: 80px;  border-radius: 50%;}
.pro-pic p{margin-bottom: 0}
.layout .sidebar .menu ul {padding: 0 10px;}
.layout .sidebar .menu ul li a{text-decoration: none;}
.sidebar-content li.menu-item.active{background: #E80606; border-radius: 6px;}
.sidebar-content li.mainmenu a:hover{background: #E80606; border-radius: 6px;}
.header-top {box-shadow: 0px 2px 3px #ccc; padding: 10px;}
 .searchcbox button.btn.btn-primary { margin-left: -40px;}
.int { background: #ededed; margin: 0 4px; font-size: 17px; border-radius: 50%; height: 40px; width: 40px; line-height: 40px;text-align: center;}
.header-top { padding: 10px 10px 10px 50px;}
.mybox .item1box {background: #fa9d0e; color: #fff;}
.mybox .item2box {background: #EB1E63; color: #fff;}
.mybox .item3box {background: #56AF59; color: #fff;}
.mybox .item4box {background: #14BED9; color: #fff;}
.prtab img { width: 100%;}
.header-outer { position: fixed; width: 100%; background: #fff; z-index: 999; left: 0}

.header-outer h2 { padding-left: 280px;}
.prtab { margin-top: 90px;}
.htop {  margin-top: 80px;}
 #no-more-tables table th {background: #0103AE; color: #fff;}
.button-edit { background: #E80606; padding: 3px 7px;  color: #fff;  font-size: 14px; border-radius: 5px;}
.btsearch{background: #E80606; border: 0}
.edbtcolor{background:#0d6efd;padding: 3px 7px;  color: #fff;  font-size: 14px; border-radius: 5px; margin-right: 10px;}
.box-outer-mx { background: #fff;border-radius: 6px; padding: 20px; box-shadow: 0px 1px 2px #ccc;}
.add-bt { text-align: right;}
.title-bar {   padding-bottom: 10px;   margin-bottom: 20px;   border-bottom: 1px #ccc solid;
}
 .add-search input.form-control.mr-sm-2 { border-radius: 6px 0 0 6px;}
 .add-search button { background: #000; border-radius: 0 6px 6px 0; color: #fff;  border: 0;}
  .add-search button:hover{background: #E80606;}
button#button-addon2 { margin-left: 10px; background: #0d6efd; color: #fff;  border: 0; border-radius:6px;font-size: 14px; }
.cities_popup .modal-footer{display:inherit!important; border: 0;justify-content: start; padding-top: 0; margin-top: -15px;}
.w-60 {width: 72%;}
a.cityare-bt {  background: #000;  padding: 4px;  border-radius: 3px;  font-size: 12px;   margin-left: 6px;   color: #fff; opacity: 0.5;}
.onlyscroolbox .modal-content{overflow-y: scroll; height: 500px}
.stock_popup .modal-footer{display:inherit!important; border: 0;justify-content: center; padding-top: 0; margin-top: -15px;}
.bc-box {background: #f5f5f5;padding: 15px 28px; border-radius: 6px;  margin-bottom: 20px; width: 70%; margin: 0 auto;margin-bottom: 20px;border: 1px #ede5e5 solid;}
.bc-box button{margin-top: 28px;}

.distribution-bx .bc-box{width: 100%; padding: 15px 12px;}
.distribution-bx .bc-box button {margin-top: 28px;font-size: 14px;padding: 6px 7px;}
.distribution-bx select{font-size: 14px ;}
.distribution-bx td{width: 16%;}
.tea-name {font-size: 16px; font-weight: 600; padding-bottom: 15px; margin-top: 30px;  color: #0a408f;}
.tea-name span {display:inline-block;width:12%; margin-bottom: 1%;}
.table-fixed-column-outter {position: relative;}
/* Scrool bar css start */
::-webkit-scrollbar { width: 8px;}
/* Track */
::-webkit-scrollbar-track { background: #f1f1f1;  }
/* Handle */
::-webkit-scrollbar-thumb { background: #b3b2b2;border-radius: 8px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #555;} 

/*mob style*/
.subbt{background: #E80606 !important; padding: 6px 12px; color: #fff; font-size: 14px;}
.subbt:hover{background: #0b0c10;}
    .log-bg { background: url(../images/login-bg.jpg); background-size: cover;background-color: #0b0c10; background-position:50% -70px;}
    .alred-txt { text-align: center;  padding: 10px 0 0 0;}
    .alred-txt a{color: #E80606}
    .lg-tabs li { width: 50%;}
    .lg-tabs button { width: 100%; background: #fff;}
    .lg-loginbox {  border-radius: 10px 10px 0px 0px; background: #fff}
    .lg-tabs {  border-radius: 0 0 10px 10px;}
.lg-loginbox .active {background: #E80606 !important; color: #fff !important;}
.lg-loginbox .nav-link {color: #000}
ul.lg-loginbox-inner { width: 250px;  margin: 0 auto;}

.dtab {
    width: 14%;
    display: inline-block;
    padding: 10px;
    color: #fff;
 
    border-right: 1px #403f3f solid
}
.dtab a {
    background: #e80606;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 13px;
    color: #ffff;
}

.dis-box-data {
    background: #0b0c10;
    border-radius: 4px;
    padding: 12px;
}

    /*mob style*/
/*our styles end*/






 @media only screen and (max-width: 800px) {
	  
/*table styles start*/
	/* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block;
 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
/*		white-space: normal;*/
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
/*		white-space: nowrap;*/
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
	
	 /*table styles ebd*/
	 
	 .sidebar-toggler{z-index: 9999;}
	 .header-outer { position: fixed; width: 100%; background: #fff; z-index: 999;}
	 .header-outer h2 { padding-left: 0px; font-size: 20px;}
	 .header-top { padding: 10px 10px 10px 10px;}
	 .int{height: 30px;width: 30px; line-height: 30px; font-size: 13px;}
	 .notification-box.int { margin-left: 31px;}
	 .prtab { margin-top: 60px;}
	 .layout .content{padding: 12px 12px;}
	 .htop {margin-top: 60px;}
   .add-search { background: #f2f2f2;  padding: 9px;  border: 1px #ccc solid;  border-radius: 6px;  margin-top: 8px; font-size: 14px;}
   .add-search button{margin: 0px !important;}
   .add-search input.form-control.mr-sm-2{font-size: 13px;}
   .edbtcolor{padding: 3px 6px; margin-right: 0; font-size: 12px;}
   .button-edit{padding: 3px 6px; font-size: 12px;}
   section#normal_table{padding: 15px; font-size: 13px;}
	 .w-60 { width: 66%;}
	 button#button-addon2{font-size: 10px;}
	 a.cityare-bt{padding: 3px;font-size: 10px; display: inline-block;}
   .bc-box{width: 100%;padding: 10px;}
   .bc-box button { margin-top: 0;}

.distribution-bx .table-fixed-column-inner { overflow-x: scroll; overflow-y: visible; margin-left: 120px;}
.distribution-bx .table th:first-child { position: absolute; left: 0; width: 120px;}
.distribution-bx .table tr td:first-child{ position: absolute; left: 0; width: 100px;}

.distribution-bx .bc-box button {margin-top: 0; font-size: 14px; padding: 6px 7px; width: 100%;}
.tea-name span {
        display: inline;
        font-size: 12px;
        padding: 0 15px 0 0;
    }

/*moile new styles*/

     #footer-bar:not(.iosTabBar) { bottom: 0px !important;}
#footer-bar { position: fixed;  bottom: 0;  left: 0;   right: 0;   z-index: 98;    backdrop-filter: saturate(180%) blur(10px);   -webkit-backdrop-filter: saturate(180%) blur(10px);
    background: #0B0C10;  box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, .04);    height: 65px;  display: flex;  text-align: center;}
.footer-bar-detached {  border-radius: 10px 10px 0 0; bottom: 5px !important;    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1) !important;  left: 7px !important;  right: 7px !important;}
.footer-clear {   padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;}
#footer-bar a:not(.btn) {  padding-top: 12px; position: relative;  flex: 1 1 auto;  color: #fff;}
#footer-bar a:not(.btn) i {   margin-top: 2px;   display: block;  font-size: 20px;   position: relative;   z-index: 2;  margin-bottom: 8px;}
#footer-bar a:not(.btn) span {  position: relative;   z-index: 2;  display: block;  font-size: 11px;  font-weight: 500;  margin-top: -3px;  opacity: 1;
    font-family: Roboto, sans-serif !important;}
.footer-bar-1 span {    transform: translateY(2px);}
#footer-bar a:hover{background: #E80606;border-radius: 10px 10px 0 0;}
.fot-active{background: #E80606; border-radius: 10px 10px 0 0;}
.subbt{background: #E80606; padding: 6px 12px; color: #fff; font-size: 14px;}
 
    .dtab {
        width: auto;
        padding: 2px 2px;
        color: #fff;
        border-right: 0px #403f3f solid;
        font-size: 13px;
    }
    .dtab a {
    background: #e80606;
    padding: 1px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #ffff;
}
.dis-box-data2 {
    background: #f5f5f5;
    padding: 10px;
    margin-bottom: 20px;
}
.dis-box-data2 table {
    width: 100%;
}
a.ctbt {
    background: #e80606;
    padding: 5px;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    display: inline-block;
}
.pcschool select {
    font-size: 12px;
}
.pcschool input {
    font-size: 12px;
}

}