/******************************/
/**COLORS**/
/******************************/
:root {
  --black: #282829;
  --blue: #2aace2;
  --orange: #f68b20;
  --green: #d7df26;
  --red: #eb1d42;
}
/******************************/
/**FONTS**/
/******************************/
@font-face {
  font-family: "Poppins";
  src: url(../fonts/Poppins-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: "Poppins";
  src: url(../fonts/Poppins-Medium.ttf);
  font-weight: 500;
}
@font-face {
  font-family: "Poppins";
  src: url(../fonts/Poppins-SemiBold.ttf);
  font-weight: 600;
}
@font-face {
  font-family: "Poppins";
  src: url(../fonts/Poppins-Bold.ttf);
  font-weight: 700;
}
/******************************/
/**BODY**/
/******************************/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  width: -webkit-fill-available;
  line-height: 1;
  font-family: "Poppins";
  font-weight: 400;
  color: #000;
  mix-blend-mode: normal;
  /* animation: body-animation 15s ease-in-out infinite; */
}
/******************************/
/**HEADER**/
/******************************/
.menu-bar{
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  justify-content: space-between;
  background: #fff;
  width: -webkit-fill-available;
  box-shadow: 0px 1px 20px 4px #b1b1b1;
  height: 80px;
}
.menuWelcome{
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 15px;
  font-size: 2.3rem;
  font-weight: 600;
}
.menuWelcome span{color: #8d8d8d;}
.btn_msg{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background:transparent;
  font-weight:600;
  font-size: 1.5rem;
}
.counterMsg{
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: red;
  border: 1px solid red;
  padding: 5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.messages_live{
  width: max-content!important;
  min-width: 15rem;
}
.messages_live a{
  display: flex;
  flex-direction: column;
  text-decoration: none!important;
}
.top-mess-inb{
  display: flex;
  justify-content: space-between;
}
.messages_live a strong{color:#000;}
.messages_live a small{color:#333;}
.messages_live a sup{color:#757575;}
.messages_live li{
  cursor: pointer;
  font-size: 1.3rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding: 5px;
}
.messages_live li:last-child{border-bottom: none;}
/******************************/
/**AUTH FORM**/
/******************************/
.auth-form{
  min-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;  
}
.auth-form h5{font-size: 2.5rem;}
.auth-form h5{font-size: 1.6rem;}
.grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 75px;
  align-items: center;
}
.recovery{font-size: 1.6rem;}
/******************************/
/**SIDEBAR**/
/******************************/
.container-fluid{display: flex;}
.sideBar{
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  padding: 24px;
  position: relative;
  transition: all 0.3s;
  height: -webkit-fill-available;
}
.sideBar .head-section{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #f6f6f6;
}
.company-name{
  position: relative;
 margin-right: 8px;  
}
.user-details .title{
  font-size: 1rem;
  font-weight: 500;
  color: #757575;
  text-transform: uppercase;
}
.user-details .name{
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: capitalize;
}
.user-details p{
  margin: 0;
  padding: 0;
}
.nav-section{flex: 1;}
.menu .title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #757575;
  text-transform: uppercase;
}
.menu ul{padding-left: 10px;}
.menu ul li {
  position: relative;
  list-style: none;
  margin: 0;
  margin-bottom: 5px;
  line-height: 2;
}
.menu ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 600;
  color: #757575!important;
  text-decoration: none;
  padding: 12px 8px;
  border-radius: 8px;
  transition: all 0.3s;
}
.menu ul li > a:hover,
.menu ul li.active > a {
  color: #000!important;
  background-color: #f6f6f6;
}
.menu ul li i {font-size: 20px;}
.menu ul li .text {
  flex: 1;
  padding-left: 10px;
}
.menu ul li .accordion_arrow {transition: all 0.3s;}
.menu ul li.accordion-active .accordion_arrow {transform: rotate(180deg);}
.menu .sub-menu {
  display: none;
  margin-left: 10px;
  padding-left: 10px;
  padding-top: 5px;
  border-left: 1px solid #f6f6f6;
}
.menu .sub-menu li a {
  padding: 10px 8px;
  font-size: 13px;
}
.menu:not(:last-child) {
  padding-bottom: 10px;
  margin-bottom: 30px;
  margin-top: 30px;
  border-bottom: 2px solid #f6f6f6;
}
/******************************/
/**MAIN SECTION**/
/******************************/
.main-container{
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: relative;
}
.main-section{
  margin-top: 4rem;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 5rem;
}
/******************************/
/**BOTTOM**/
/******************************/
.bottom-container{
  width: 100%;
  position: absolute;
  bottom: 0;
  color: #9c9fa6;
}
.bottom-container p{font-size: 1.6rem;}
/******************************/
/**TABLE**/
/******************************/
.standard_table thead th{border-bottom: 1px solid #dee2e6;}
.standard_table th,
.standard_table td{font-size: 1.3rem;}
/******************************/
/**BADGE**/
/******************************/
.bel-badge{
  display: inline-block;
  padding: 0.50em;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 5px;
}
.badge-Cash,
.bage-cash{
  border: 1px solid #34b15c;
  color: #fff;
background-color: #34b15c;
}
.badge-Online{
  border: 1px solid #fffb00;
  color: #000;
  background-color: #fffb00;
}
.badge-Check,
.bage-check{
  border: 1px solid #2196f3;
  color: #fff;
  background: #2196f3;
}
.badge-Card,
.bage-card{
  border: 1px solid #f35d21;
  color: #fff;
  background: #f35d21;
}
.badge-inverse-success,
.badge-admin,
.badge-manager,
.badge-processed{
  color: #34b15c;
  background-color: rgba(52, 177, 92, 0.2);
  border-color: rgba(52, 177, 92, 0);  
}
.badge-inverse-warning,
.badge-graphic {
  color: #ffaf00;
  background-color: rgba(255, 175, 0, 0.2);
  border-color: rgba(255, 175, 0, 0);
}
.badge-inverse-info,
.badge-sales,
.badge-green{
  color: #34B1AA;
  background-color: rgba(52, 177, 170, 0.2);
  border-color: rgba(52, 177, 170, 0);
}
.badge-inverse-danger,
.badge-production,
.badge-quality,
.badge-void,
.badge-incomplete,
.badge-red{
  color: #F95F53;
  background-color: rgba(249, 95, 83, 0.2);
  border-color: rgba(249, 95, 83, 0);
}
/******************************/
/**PAGINATION**/
/******************************/
.page-link{font-size: 1.3rem;}
/******************************/
/**SEARCH**/
/******************************/
.flex-top-conatiner{
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.system-btn {
  font-weight: 600;
  background-color: #d7df26;
}
.searchOrder{
  display:flex;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 0.50em 0.45em;
  max-width: 50%;
  width: 100%;
  margin-top: 2rem;
  font-size: 1.3rem;
  color: #495057;
  margin-bottom: 2rem;
}
.searchOrder input{
  border: none;
  outline: none!important;
  width: 98%;
  color: #495057;
}
.searchOrder button{
  border: none;
  background-color: transparent;
  outline: none!important;
  color: #495057;
}
.select-dropdown select{
  width: 230px;
  text-align: center;
}
.btn{font-size: 1.3rem;}
/******************************/
/**TABS**/
/******************************/
.bel-tab-wrapper{
  text-align: center;
  display: block;
  margin: auto;
}
.bel-tabs{
  margin: 0;
  padding: 0;
  display: flex;
}
.bel-tabs a{text-decoration: none;}
.bel-tab-links{
  margin: 0 1%;
  list-style: none;
  padding: 10px 40px;
  width: 100%;
  color: #aaa;
  cursor: pointer;
  font-weight: 700;
  transition: all ease 0.5s;
  border-bottom: solid 3px rgba(255,255,255,0.0);
  letter-spacing: 1px;
  font-size: 1.3rem;
}
.bel-tab-links:hover{
  color: #999;
  border-color: #999;
}
.bel-tab-links.bel-active{
  color: #333;
  border-color: #333;
}
.bel-tab-links:nth-of-type(1).bel-active{
  color: #EE6534;
  border-color: #EE6534;
}
.bel-tab-links:nth-of-type(2).bel-active{
  color: #1790D2;
  border-color: #1790D2;
}
.bel-tab-links:nth-of-type(3).bel-active{
  color: #EEC63B;
  border-color: #EEC63B;
}
.bel-tab-content{
  display: none;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeIn 0.5s ease 1 forwards;
}
.bel-active{
  display: block;
  opacity: 1;
}
.secondary-tabs{
  flex-wrap : wrap ;
  display : flex ;
  column-gap : 0.125rem ;
}
.secondary-tabs a{text-decoration: none;}
.secondary-tab-links{
  margin: 0 1%;
  list-style: none;
  padding: 10px 40px;
  width: 100%;
  color: #aaa;
  cursor: pointer;
  font-weight: 700;
  transition: all ease 0.5s;
  border-bottom: solid 3px rgba(255,255,255,0.0);
  letter-spacing: 1px;
  font-size: 1.2rem;
}
.tab-active{
  background : var(--blue) ;
  border-radius: 8px 8px 0 0;
  color: var(--black);
}

.tab-modal-active{
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #51a14c 0%, #10c33e 100%);
  box-shadow: 0px 0px 8px 0px #2fbb0c9e;
  color: #fff;
}
/******************************/
/**MODAL**/
/******************************/
.bel-modal {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.bel-overlay {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 40%);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}
.bel-modal-wrapper {
  position: absolute;
  padding: 10px;
  z-index: 9999;
  top: 14em;
  left: 46%;
  width: 54em;
  margin-left: -16em;
  background-color: #fff;
  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
  border-radius: 20px;
  height: 900px;
  overflow-y: auto;
}
.modal-transition {
  transition: all 0.3s 0.12s;
  transform: translateY(-10%);
  opacity: 0;
}
.bel-modal.is-open {
  visibility: visible;
}
.bel-modal.is-open .bel-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.bel-modal.is-open .modal-transition {
  transform: translateY(0);
  opacity: 1;
}
.close-bel-modal{
  background-color: transparent;
  border: none!important;
  outline: none!important;
}
.close-bel-modal i {
  font-size: 2em;
  color: red;
}
/******************************/
/**NOTICE**/
/******************************/
.notice-card {
  width: 300px;
  padding-right: 10px;
  height: fit-content;
  padding-bottom: 12px;
  background: lightgrey;
  border-left-style: solid;
  border-left-color: lightblue;
  border-left-width: 5px;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background: linear-gradient(to right, #add8e66e, #add8e64e 50%, #add8e63e);
}
.notice-card svg {
  height: 40px;
  width: 8rem;
  padding-left: 10px;
  padding-top: 12px;
  fill: lightblue;
  float: left;
}
.notice-card p {
  float: left;
  padding-top: 13px;
  padding-left: 10px;
  color: #000;
  font-size: 15px;
}
.notice-card span {
  display: flex;
  align-items: left;
}
/******************************/
/*********POS MODAL***********/
/******************************/
.details-display h1{
  font-weight: 700;
}