@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  --primary-color: #085858;
  --secondary-color: #303030;
  --black: #000000;
  --latte-color: #8b1f0a;
  --Subheading-font3: 'Arvo', serif;
  --Subheading-font: 'Roboto Condensed', sans-serif;
  --Subheading-font2: 'Roboto Mono', monospace;
  --Head-Text: 'Open Sans', sans-serif;
  --Qoutes: 'Libre Baskerville', serif;
  --type-writer: 'Space Mono', monospace;
}

/* LOGIN PAGE */
.login-bg {
  background: linear-gradient(to right, #f8f1f1, #e0d9d9, #e0d9d9) !important;
  /*border-radius: 200px;*/
  box-shadow: 0px 5px 5px 0px #939596;
}

.login-font-color {
  color: #000;
}

/* Productpage */
.container-fluid{
    .container-product{
  /* background-color: #076d15; */
  background: 
  -webkit-linear-gradient(#ffffff, #ffffff 80%),
  -webkit-linear-gradient(-45deg, #ffffff 25%, #ffffff 75%);
}
  }




/* BUTTONS */
.log-btn {
  display: flex;
  justify-content: end;
}

.btn-outline-success {
  border-radius: 10px;
  width: 80px;
  height: 30px;
  background-color: #085858;
  color: white;
}

.btn-outline-success:hover{
  background-color: #32a5a5;
  box-shadow: 0 0 5px #32a5a5,
0 0 25px #32a5a5, 0 0 50px #32a5a5,
0 0 500px #32a5a5, 0 0 100px #32a5a5;
}

/* ----------------LOGIN INPUTS----------------- */

.password-toggle{
  position: absolute;
  top: 10%;
  right: 5%;
  border-radius: 50%
}
.form_input {
width: 320px;
min-height: 38px;
color: #000000;
outline: none;
transition: 0.35s;
padding: 0px 7px;
background-color: #ffffff;
border-radius: 6px;
border: 2px solid #ffffff;
box-shadow: 6px 6px 10px rgba(0,0,0,1),
1px 1px 10px rgb(255, 255, 255);
}

.form_input::placeholder {
color: #999;
}

.form_input:focus.form_input::placeholder {
transition: 0.3s;
opacity: 0;
}

.form_input:focus {
transform: scale(1.05);
box-shadow: 3px 3px 5px rgba(0,0,0,1),
1px 1px 10px rgb(255, 255, 255),
inset 1px 1px 5px rgba(0,0,0,1),
inset -1px -1px 5px rgb(255, 255, 255);
}
/* ---------LOGIN TYPE WRITER ----------- */
.loginBtn {
  background-color: #085858;
  padding: 5px 10px;
  border: 3px solid transparent;
  border-radius: 5px;
  transition: 0.2s;
  font-family: var(--Subheading-font2);
}

.loginBtn:hover {
  background-color: transparent;
  border: 3px solid #085858;
  box-shadow: 0px 0px 10px 3px #085858;
}

.LOGINBTN {
  color: #fff;
  font-size: 15px;
  overflow: hidden;
  border-right: 4px solid transparent;
  white-space: nowrap;
  margin: 0 auto;
}

.loginBtn:hover .LOGINBTN {
  border-right: 2px solid #085858;
  animation: letters 1s steps(7, end),
    cursor .4s step-end infinite;
}

@keyframes letters {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes cursor {
  from {
    border-color: transparent
  }

  50% {
    border-color: #085858;
  }
}
/* .btn-login {
  border-radius: 10px;
  width: 100px;
  height: 40px;
  background-color: #085858;
  color: white;
}

.btn-login:hover{
  background-color: #32a5a5;
  box-shadow: 0 0 3px #32a5a5,
0 0 10px #32a5a5, 0 0 0px #32a5a5,
0 0 30px #32a5a5, 0 0 20px #32a5a5;
} */

.login-btn {
  background: linear-gradient(to right, #161616, #7c7f85, #afb0b3) !important;
  color: #fff;
  border: none;
}

.login-btn:hover {
  background: linear-gradient(to right, #afb0b3, #7c7f85, #161616) !important;
  color: #fff;
  border: none;
}

/* PRODUCT PAGE */
#sidPacking{
  border-radius: 8%;
}
.stocklvl .card-product{
  border-radius: 2%;
}

.card-product{
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 3%;
  background: rgba(224, 224, 224, 0.37);
  border-top: 1px solid rgba(107, 106, 106, 0.5);
  border-left: 1px solid rgba(107, 106, 106, 0.5);
}

.card-product:hover{
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
  transform: scale(1.06);
}

.stcklvl:hover{
  /* box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); */
  transform: scale(1.01);
}

.productTableView{
  width: 233.7px;
  min-height: 225px;
}

.productTableView{
  .card-product{
    animation: slideInLefts 0.8s ease-in;
  }
}
@media (max-width: 1369px) {
  .productTableView {
    width: 190px;
    min-height: 200px;
  }
}


@keyframes slideInLefts {
  /* from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  } */
  0% {
		opacity: 0;
		transform: rotateX(-100deg);
		transform-origin: top;
	}

	100% {
		opacity: 1;
		transform: rotateX(0deg);
		transform-origin: top;
	}
}

.image-product{
  padding: 1px;
  border-radius: 10%;
  /* background-color:#000 ; */
}

.prod-nav{
  padding-top: 5px;
  padding-bottom: 3px;
}

.nav-link {
  position: relative;
  text-decoration: none;
}

.nav.nav-tabs a{
  border-bottom: none;
  color: white;
}
.nav.nav-tabs {
  border-bottom: none;
}

.tabs-prod ul{
  padding-bottom: 2px;
}

.tabs-prod .nav-tabs{
  .nav-item:nth-child(2){
  animation: pop-up 0.5s ease-in-out;
  }
  .nav-item:nth-child(3){
    animation: pop-up 0.6s ease-in-out;
  }
  .nav-item:nth-child(4){
    animation: pop-up 0.7s ease-in-out;
  }
  .nav-item:nth-child(5){
    animation: pop-up 0.8s ease-in-out;
  }
  .nav-item:nth-child(6){
    animation: pop-up 0.9s ease-in-out;
  }
  .nav-item:nth-child(7){
    animation: pop-up 1s ease-in-out;
  }
  .nav-item:nth-child(8){
    animation: pop-up 1.1s ease-in-out;
  }
  .nav-item:nth-child(9){
    animation: pop-up 1.2s ease-in-out;
  }
}

@keyframes pop-up {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(0);
  }
}

.text-padding-right {
  padding-right: 10px; 
}

/* Product Gallery */
.close {
  font-size: 1.5rem;
}

.col-12 img {
  opacity: 0.7;
  cursor: pointer;
  margin: 0rem;
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
  width: 100%;
}

.col-12 img:hover {
  opacity: 1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.l-bg-blue-button-view {
  /*background: linear-gradient(to right, #000, #a5aab4) !important;*/
  background: #000 !important;
  text-decoration: none;
}

.l-bg-blue-button-view:hover {
  /*background: linear-gradient(to right, #a5aab4, #000) !important;*/
  background: #a5aab4 !important;
  text-decoration: none;
}

.l-bg-yo-button-update {
  /*background: linear-gradient(135deg, #fd7e14, #ffc107) !important;*/
  background: #fd7e14 !important;
  text-decoration: none;
}

.l-bg-yo-button-update:hover {
  /*background: linear-gradient(135deg, #ffc107, #fd7e14) !important;*/
  background: #ffc107 !important;
  text-decoration: none;
}

.l-bg-red-button-delete {
  /*background: linear-gradient(135deg, #c71d1d, #e6594f) !important;*/
  background: #c71d1d !important;
  text-decoration: none;
}

.l-bg-red-button-delete:hover {
  /*background: linear-gradient(135deg, #e6594f, #c71d1d) !important;*/
  background: #e6594f !important;
  text-decoration: none;
}

.l-bg-green-button-add {
  background: #076d15 !important;
  text-decoration: none;
  border-radius: 5px 5px 5px 5px;
}

.l-bg-green-button-add:hover {
  background: #1eb432 !important;
  text-decoration: none;
}

.l-bg-red-button-add {
  /*background: linear-gradient(135deg, #076d15, #1eb432) !important;*/
  background: #d32525 !important;
  text-decoration: none;
  border-radius: 5px 5px 5px 5px;
}

.l-bg-red-button-add:hover {
  /*background: linear-gradient(135deg, #1eb432, #076d15) !important;*/
  background: #df3e3e !important;
  text-decoration: none;
}

.productInfo{
  .ProductInfoHeader{
    font-weight: 600;
    color: #000000;
  }
  .addProductForm{
    background-color: #ffffff;
    padding: 2px;
  }
}

.product-button-font {
  font-size: 13px;
  font-weight: 500;
}
.productModalName{
  input{
    background-color: #000000;
  }
}

.product-button-font-color {
  color: #faf8f5
}

.product-tab-font {
  font-size: 13px;
  font-weight: 600
}

.product-tab-font-color:active {
  color: #000000;
}

.nav-item2 .product-update {
  background-color: #000000;
}
.nav-item2 .product-update {
  background-color: #000000;
}

.nav-item2 .product-update:hover {
  background-color: #c0bebe;
}

.data-table-bg {
  background: #f5f5f5 !important;
  color: #000 !important;
  border-radius: 1%;
  /* box-shadow: -20px 15px 15px 0px #d6d6d6; */
  -webkit-box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.18);
-moz-box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.18);
box-shadow: -5px 5px 5px 0px rgba(0,0,0,0.18);
}

.data-table-2-bg {
  /*background: linear-gradient(to right, #fff, #f1f0f0, #dad6d6) !important;*/
  background: linear-gradient(to right, #f1f0f0, #f1f0f0, #f1f0f0) !important;
  color: #000 !important;
  border-radius: 5px;
  box-shadow: 0px 5px 5px 0px #939596; 
}

.data-table-3-bg {
  /*background: linear-gradient(to right, #fff, #f1f0f0, #dad6d6) !important;*/
  background: linear-gradient(to right, #dad6d6, #dad6d6, #dad6d6) !important;
  color: #000 !important;
  border-radius: 5px;
  box-shadow: 0px 5px 5px 0px #939596; 
}

.cards {
  padding: 8px;
  min-height: 210px;
}


.cards:hover {
  /* box-shadow: 0px 0px 4px 4px #e9eaef; */
  transform: scale(1.01);
}

.product-tags-table-header {
  /* background: linear-gradient(to right, #000000, #2b2b2c, #616263) !important; */
  color: #000000;
  background-color: #ffffff;
  border-radius: 1rem;
  background: rgba(255 255 255 / 0.2);
  backdrop-filter: blur(30px);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 20px 20px 50px solid rgba(0, 0, 0, 0.5);
}

/* .displayProductSupplier, .displayProductCategory
,.displayProductGenericName, .displayProductClassification{
  background: rgb(223, 218, 218);
  backdrop-filter: blur(30px);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 20px 20px 50px solid rgba(0, 0, 0, 0.5);
} */
.displaysSupplier{
  max-width: 20px;
}

.displaysSupplier:hover{
    background-color: #979797;
  }



.pagination > li > a
{
  background-color: white;
  color: #000;
  height: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.pagination > li > a:hover
{
  background: #a5aab4;
  color: #fff;
}

.pagination > li > a:focus
{
  background: #a5aab4;
  color: #fff;
  height: 30px;
  display: flex;
  align-items: center;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #000;
  border-color: #000;
  height: 30px;
  display: flex;
  align-items: center;
}

.page-item.disabled .page-link {
  height: 30px;
  display: flex;
  align-items: center;
}

.div-prod-unit-table {
  max-height: 90px
}


.prod-unit-table {
  border: 1px solid;
  border-color: #c9c2c2;
}

.prod-unit-table-th {
  min-width: 49px;
  font-size: 10px;
  text-align: center;
  border: 1px solid;
  border-color: #c9c2c2;
}

.prod-unit-table-td {
  font-size: 10px;
  border: 1px solid;
  border-color: #c9c2c2;
}
@media (max-width: 1369px) {
  .prod-unit-table-th {
    min-width: 28px;
    font-size: 8px;
    text-align: center;
    border: 1px solid;
    border-color: #c9c2c2;
  }
  .prod-unit-table-td {
    font-size: 8px;
    border: 1px solid;
    border-color: #c9c2c2;
  }
  .div-prod-unit-table {
    max-height: 70px;
    margin-left: 5px;
  }
}

.page-header-font {
  font-size: 20px;
  font-weight: 600; 
 
}

.page-header-font-color {
  color: white;
  /* font-size: 40px; */
}

.tabs-prod li{
  padding-left: 2px;
}

.tabs-prod{
  .nav-tabs{
    border: none;
  }
}

.nav-item .tab-status-header {
  padding-top: 2px;
  font-size: 12px;
  font-weight: 500;
  height: 26px;
  background: #085858;
  color: #000000;
  transition: transform 0.3s ease;
  transition: all 0.5s ease-out;
  margin-right: 2px;
  border-radius: 5px 5px 5px 5px;
}


/* .nav-item .tab-status-header:hover {
  background: #c7c7c7;
  color: #000000;
  transform: translateY(-3px);
} */
.nav-item .tab-status-header:hover{
  transform: translateY(-2px);
}
.nav-item .tab-status-header:hover,
.nav-item .tab-status-header:focus {
  background: #ffffff;
  color: #000000;
  border: 1px solid #085858;
}

.nav-tabs .nav-item .nav-link.active {
  border-color: rgb(0, 0, 0);
  border-bottom: 1px solid #000000;
}

.table-header-font-size{
  font-size: 12px;
  font-weight: 500
}

.table-content-font-size{
  font-size: 15px;
  font-weight: 350;
  .approve_po_id, .disapprove_po_id, 
  .modify_pending_po_id, .cancel_po_id,
  .pending_po_id {
    border-radius: 15%;
    transition: transform .2s;
  }
  .approve_po_id:hover,
  .disapprove_po_id:hover,
  .modify_pending_po_id:hover,
  .cancel_po_id:hover,
  .pending_po_id:hover{
    transform: scale(1.2);
  }
}


.btn-sml {
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 8px;
}

.btn-sml-2 {
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
}

/* END BUTTONS */

.prpoTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.prpoiTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.prprstinreceivingTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.prTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.priTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.poTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.poiTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rsalesinventoryTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rsalesreceivingTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.siTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.sidTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rsalespackingTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rsalespackingdetailTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.sitoshipTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.sidtoshipTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rsalessidpackingtoshipTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.rsalessidtoshipTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.prstinreceivingTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.prstinreceivingitemTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.storeTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.stockLevelTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.appUserContactTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.storeContactTable .table-content-td {
  padding-top: 3px;
  padding-bottom: 3px;
}

.accordion-style {
  max-height: 40px;
}

.accordion-style-product {
  max-height: 20px;
}
.accordion-item{
  width: 100%;
}
.table-client-data{
  .accordion-item{
    width: 100%;
  }
  .accordion-button:focus {
    z-index: 3;
    border-color: none;
    outline: none; 
    box-shadow: none;
  }
}
.accordion-button:focus {
  border-color: none;
  outline: none; 
  box-shadow: none;
}

.accordion-item{
  background-color: transparent;
  border: none;
  .accordion-headerProd{
    width: 50%;
  }
}

.tab-con-city{
  .accordion-button{
    /* background-color: #1eb432; */
    height: 40px;
    border-color: 2px #000000;
    border: 1px solid rgb(0, 0, 0);

  }
}

/* Add Product Image */
.addImageForm{
  .form-group{
    .form-control:disabled{
      background-color: #4e4e4e;
      color: #d4d4d4;
    }
  }
}

/* .formToAddImage{
  .add_pi_onchange_photo{
    width: 94px;
    height: fit-content;
  }
} */

.addImageForm{
  margin-left: 30px;
}

.viewImage{
  animation: slideInLeft 0.2s ease-out;
}
@keyframes slideInLeft {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.lightbox{
  .modal-header{
    background-color: #727272;
    height: 40px;
  }
}

.modal-dialog{
  .modal-content{
  background-color: #e9e9e9;
}
}

.update-unit{
  .update-product-unit{
    background-color: #000000;
  }
}

.input-group input[type="date"]:focus {
  outline: none !important;
  border: none !important;
}

@media (min-width: 1920px) {
  .upperButtons{
    margin-left: 13px;
  }
}
@media (min-width: 1920px) {
  .stcklvlDate .input-group{
    width: 70%;
    /* background-color: #076d15; */
  }
}
.prodInfo{
  .form-control:disabled{
    background-color: #ffffff;
    border: 1px solid black;
    color: #000000;
  }
}


.update-unit{
  .form-control{
    width: 20%;
    height: 35px;
  }
  .update-unit{
    .btn-success{
      background-color: #2d8f32;
      font-weight: bold;
    }
  }
  .update-unit{
    .btn-success:hover{
      background-color: #27df64;
      color: #000000;
      box-shadow: 0 0 10px #47d647,
      0 0 10px #47d647, 0 5px 10px #47d647;
    }
  }

  .btn{
    font-size: small;
    margin-left: 10px;
  }
}

tr.row_selected td{
  background-color:rgb(0, 0, 0) !important;
  /*background: linear-gradient(to right, #000000, #2b2b2c, #616263) !important;*/
  color: #fff;
  /*border: none !important;*/
  /*
  font-size: 1.1em;
  font-weight: 400;
  */
}

.table-striped tr.row_selected td{
  background-color:rgb(0, 0, 0) !important;
  /*background: linear-gradient(to right, #000000, #2b2b2c, #616263) !important;*/
  color: #fff;
  /*
  font-size: 1.1em;
  font-weight: 400;
  */
}

/*
div:focus {
  background-color:rgb(207, 188, 188);
}
*/

div.card_selected {
  /*background-color:rgb(207, 188, 188);*/
  background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
 background-blend-mode: screen;
  color: #fff;
  border-radius: 10px;
  color: #000000;
}

.card_selected_color {
  /* background-color:rgb(207, 188, 188); */
  background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
  background-blend-mode: screen;
  color: #fff;
  border-radius: 10px;
  color: #000000;
}


.div-packing-table {
  max-height: 90px;
}


.packing-content-table td{
  border:none !important;
  font-size: 0.7em;
  font-weight: 400;
}

.div-packing-table-2 {
  max-height: 90px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.packing-content-table-2 td{
  border:none !important;
  /*
  font-size: 0.6em;
  font-weight: 700;
  */
}

.table-input {
  font-size: 0.9em;
  font-weight: 400;
  max-width:150px

}


.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  /*background-image: url("http://placehold.it/100x100/09f/fff.png");*/
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.7;
}

.text-right {
  text-align: right;
}

.show_add_product{
  width: 60%;
}
.updateProdBundle{
  .form-group{
    label{
      color: black;
    }
  }
}

.add_product_unit{
  width: 4rem;
  left: auto;
}

  .badgeStyle{
    background-color: #11cc39;
    position: absolute;
    color: #000000;
    font-size: 10px;
    border-radius: 50%;
    left: 0;
    top: 0;
  }

  .badgeStyle2{
    display: flex;
    justify-content: center;
    background-color: #11cc39;
    position: absolute;
    color: #000000;
    font-size: 10px;
    border-radius: 50%;
    font-weight: bold;
    width: 18px;
    height: 17px;
    line-height: 1.8;
    left: 0;
    top: 0;
  }

  /* START TOGGLE SWITCH FOR SEARCH AND BARCODE */
  .containers {
    margin-right: 10px;
    position:relative;
    padding:2px;
    border-radius:12px 12px 12px 12px;
    background:#000000;
    height: 31px;
  }
  .containers input {
    display:none;
  }
  .containers label {
    position:relative;
    display:inline-block;
    width:50px;
    height:25px;
    line-height:60px;
    text-align:center;
    border:2px solid #ddd;
    border-radius:10px;
    color:#888;
    cursor:pointer;
    transition:all 300ms ease-in-out;
  }

  .containers label .dot {
    padding-left: 0;
    font-weight:10;
  }
  .containers .dot {
    position:absolute;
    top:40%;
    left:15px;
    transform:translateY(-50%);
    width:10px;
    height:10px;
    /* background:#ccc; */
    border-radius:50%;
    transition:all 300ms ease-in-out;
  }

  /* SEARCH INPUT */

  .input-group{
    .search, .search_barcode{
      border-radius: 5px;
      /* transition: border-color 0.3s; */
    }
  }

  /* input[type="search"].search_barcode:focus {
    outline: 2px solid blue;
  } */
  

  /* .search_barcode:hover{
    border: 2px solid #085858;
  } */

  /* Generate Modals of Product */

#generateSIModal{
  .displayGenerateSI td{
    color: #000000;
  }
}

/*----------- STOCK LEVEL MODAL -----------*/

.stcklvlname{
  font-weight: bold;
  background-color: white;
  font-size: 1.2em;
}

.stcklvl .modal-header{
  background-color: #cccccc;
}

table .stcklvlthead{
  background-color: #cccccc;
}

.card-body{
  .loader{
    position: absolute;
    left: 43%;
    top: 30%;
    height: 250px;
    width: 250px;
    z-index: 100;
  }
}
.loader{
  position: absolute;
  left: 43%;
  top: 30%;
  height: 250px;
  width: 250px;
  z-index: 100;
  background: transparent;
}
.dark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity as needed */
  z-index: 9999;
}

.productName:disabled{
    color: #000000;
  }
  .productName{
    width: 100%;
  }
div.POR-update{
  .btn{
    background-color: #e2d406;
    max-height: 30px !important;
    border: 1px solid black;
  }
}

.input-group{
  .si_store_prod{
    width: 100px
  }
}

.flex-subcontainer2 {
  display: flex;    
  }
  
  .flex-subcontainer2 > div{
  border-radius: 5px;
  }
  
  .styled-select2 select {
     /* background: rgb(248, 248, 248); */
     /* border: none; */
     border-radius: 5px;
     border: 1px solid black;
     font-size: 17px;
     height: 30px;
     /* padding: 5px; */
     width: 170px;
  }
  
  .styled-select2 {
    margin-right: 15px;
     height: 36px;
     overflow: hidden;
     width: 180px;
  }

  /* -------- Print button ------------- */
  .printOption-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 1);
    /* padding: 0.625rem 1.5rem; */
    padding: 3px 8px 3px 5px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    outline: 0;
    transition: all  .2s ease;
    text-decoration: none;
  }
  
  .printOption-button:hover {
    background-color: transparent;
    color: rgba(0, 0, 0, 1);
    .icon{
      stroke: black;
    }
  }
  
  .icon {
    height: 1.2rem;
    width: 1.2rem;
  }
  
  ._texts {
    margin-left: 0.60rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }
  
  ._text-1 {
    /* margin-bottom: 0.25rem; */
    font-size: 0.80rem;
    line-height: 1rem;
  }
  
  ._text-2 {
    font-weight: 600;
  }
/* 
  .flex-subcontainer {
    display: flex;    
    }
    
    .flex-subcontainer > div{
    border-radius: 5px;
    }
    
    .styled-select select {
       background: rgb(255, 255, 255);

       border-radius: 15px;
       font-size: 14px;
       height: 26px;

       width: 180px;
    }
    
    .styled-select {
      margin-left: 5px;
       height: 29px;
       overflow: hidden;
       width: 180px;
    } */

    /* DATATABLE PAGINATE */

    .dataTables_length{
      font-size: small;
    }
    .dataTables_length select{
      height: 25px;
    }
    .dataTables_filter{
      font-size: small;
    }
    .dataTables_filter input[type="search"] {
      height: 25px;
  }
  
    .dataTables_paginate a {
      padding: 6px 9px !important;
      font-size: small;
  }
  .dataTables_info{
    font-size: small;
  }
  /* .dataTables_paginate a:hover {
      padding: 6px 9px !important;
      background: #979797 !important;
      border-color: #979797 !important;
  } */
  
  
  /* .dataTables_paginate{
      background-color: #000000;
  } */
  .active-status {
    color: green;
}

.inactive-status {
    color: red;
}

  .layoutSi{
    display: flex;
    gap: 5px;
    justify-content: space-between;
    .input-group-text{
      background-color: transparent;
      border: 1px solid black;
      text-shadow: 0 0 0 #000;
    }
    .si_store_prod{
      border: 1px solid black;
      text-shadow: 0 0 0 #000;
      background-color: transparent;
      width: 70%;
      border-radius: 0 5px 5px 0 ;
    }
  }

  .data-table-bg321{
    border: 1px solid black;
    border-radius: 5px;
  }

.generatesi_store_address_div, .generatesi_store_tier_div h6{
  font-family: var(--type-writer);
}


/* UPLOAD BUTTON STYLE FOR CLIENT UPDATE USER PHOTO AND VALID PHOTO */

.imageFormDisplay2{
  [type="file"] {
height: 0;
overflow: hidden;
width: 0;
}
}

.imageFormDisplay2{
[type="file"] + label {
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: 'Rubik', sans-serif;
font-size: inherit;
font-weight: 200;
outline: none;
padding: .5rem 20px;
position: relative;
transition: all 0.3s;
vertical-align: middle;
/* left: 10%; */
}
}

/* .imageFormDisplay2{
[type="file"] + label:hover {
background-color: #f15d22;
}
} */

.imageFormDisplay2{
[type="file"] + label.btn-2 {
/* background-color: #209710; */
background-color: transparent;
border: 1px solid black;
color: black;
font-weight:600;
border-radius: 50px;
overflow: hidden;
padding-left: 15%
}
}

.imageFormDisplay2{
[type="file"] + label.btn-2::before {
color: #fff;
content: "\f093";
font-family: "FontAwesome";
font-size: 100%;
height: 100%;
right: 130%;
line-height: 3.3;
position: absolute;
bottom: 6px;
transition: all 0.3s;
}
}

.imageFormDisplay2{
[type="file"] + label.btn-2:hover {
background-color: #488540;
color: white;
}
}

.imageFormDisplay2{
[type="file"] + label.btn-2:hover::before {
right: 70%;
}
}

.form-group .up_valid_id_no:hover,
.up_valid_id_exp_date:hover,
.valid_id_type_dropdown:hover,
.up_user_birthdate:hover,
.up_user_gender:hover,
.up_user_email:hover,
.store_tier_dropdown:hover,
.up_user_verification_status:hover,
.up_store_reg_status_dd:hover,
.up_store_reg_exp_date:hover,
.up_credit_limit:hover,
.up_tax_rate:hover,
.up_terms:hover,
.up_email:hover,
.up_ecomlink:hover,
.up_contact_person:hover,
.up_reason_for_decline:hover,
.profession_dropdown:hover{
  background-color: #dfdfdf !important;
}

.form-group .up_valid_id_no,
.up_valid_id_exp_date,
.valid_id_type_dropdown,
.up_user_birthdate,
.up_user_gender,
.up_user_email,
.up_user_verification_status,
.profession_dropdown,
.up_store_reg_status_dd,
.up_store_reg_exp_date,
.up_credit_limit,
.up_tax_rate,
.up_terms,
.up_email,
.up_ecomlink,
.up_contact_person,
.up_reason_for_decline,
.store_tier_dropdown
{
  background-color: transparent !important;
  border: 1px solid black !important;
}
.input-group-append span{
  background-color: transparent !important;
  border: 1px solid black !important;
}

.form-group .add_store_reg_store_names, .up_photo_store_name, .up_photo_store_status:disabled{
  border: 1px solid black !important;
}

  /* form starting stylings client user add modal------------------------------- */
  .groups 			  { 
    position:relative; 
    margin-bottom:30px; 
  }
  .groups input 				{
    font-size:18px;
    padding:0px 0px 0px 5px;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #757575;
    /* background-color: aliceblue; */
    background-color: transparent;
  }
  .groups select{
    font-size:18px;
    padding:0px 0px 0px 5px;
    display:block;
    width:100%;
    border:none;
    border-bottom:1px solid #757575;
    background-color: transparent;
  }
  .groups input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  .groups label 				 {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    /* left:5px; */
    top:5px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  
  /* active state */
  
  /* .groups input:focus ~ label, .groups input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#5264AE;
  } */
  
  .groups input:focus ~ label, .groups input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#085858;
  }
  
  .groups input:focus ~ label, .groups .noEf ~ label 		{
    top:-20px;
    font-size:14px;
    color:#838383;
  }
  
  .groups select:focus ~ label, .groups select ~ label 		{
    top:-20px;
    font-size:14px;
    color:#838383;
  }
  .groups select:focus ~ label, .groups select:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#085858;
  }
  
  /* BOTTOM BARS ================================= */
  .bars 	{ position:relative; display:block; width:auto; }
  .bars:before, .bars:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#085858;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bars:before {
    left:50%;
  }
  .bars:after {
    right:50%; 
  }
  
  /* active state */
  .groups input:focus ~ .bars:before, .groups input:focus ~ .bars:after {
    width:50%;
  }
  
  .groups select:focus ~ .bars:before, .groups select:focus ~ .bars:after {
    width:50%;
  }
  
  .add_user_network_provider {
    width: 100%;
    background-color: transparent;
    border: 1px solid black;
    outline: #e70611;
  }
  
      .add_user_network_provider:focus {
        outline: none;
      }
  
  /* HIGHLIGHTER ================================== */
  .highlights {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  /* active state */
  .groups input:focus ~ .highlights {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  
  .user_city_dropdown, .store_services_dropdown, .user_province_dropdown, .store_owner_dropdown, .add_user_gender, .store_province_dropdown, .store_city_dropdown, .add_store_network_provider {
        border: none
    }
    .user_city_dropdown, .store_services_dropdown, .store_province_dropdown, .store_owner_dropdown, .store_city_dropdown, .add_store_network_provider, .add_user_gender, .user_province_dropdown:focus {
        outline: none;
        border: none;
    }
  
  /* ANIMATIONS ================ */
  /* @-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  } */


  .data-tableqq{
    border: 1px solid black;
    border-radius: 4px;
  }
  
  .layoutChild {
    width: 80%;
  margin-top: 2%;
  display: flex;
  gap: 5px;
  
  justify-content: center;
    align-items: flex-start;
  }
  
  .grow12 { flex-grow: 1; }
  
    .layoutEst {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: space-around;
    align-items: flex-start;
    /* border: 1px solid black;
    border-radius: 4px; */
  }
  
  .growEst { flex-grow: 1; }
  
  .snip1362 {
    font-family: 'Quattrocento', Arial, sans-serif;
    position: relative;
    overflow: hidden;
    margin: 10px;
    /* min-width: 230px;
    max-width: 315px;*/
    width: 95%; 
    color: #141414;
    text-align: left;
    line-height: 1.4em;
    font-size: 16px;
  }
  .snip1362 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
  }
  .snip1362 img {
    /* max-width: 100%; */
    vertical-align: top;
    height: 150px;
    width: 95%;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
  }
  .snip1362:hover img {
   transform: scale(1.1)
  }
  
  .snip1362 figcaption {
    position: absolute;
    top: calc(100%);
    width: 100%;
    background-color: #ffffff;
    padding: 10px 15px 65px;
  }
  .snip1362 figcaption:before {
    position: absolute;
    content: '';
    z-index: 2;
    bottom: 100%;
    left: 0;
    width: 95%;
    /* height: 10px; */
    background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
    background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  }
  .snip1362 h3,
  .snip1362 p {
    margin: 0 0 20%;
  }
  .snip1362 h3 {
    font-weight: 300;
    font-size: 1em;
    line-height: 1.2em;
    font-family: 'Oswald', Arial, sans-serif;
    text-transform: uppercase;
  }
  .snip1362 p {
    font-size: 0.9em;
    letter-spacing: 1px;
    opacity: 0.9;
  }
  .snip1362 a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
  .snip1362:hover figcaption,
  .snip1362.hover figcaption {
    top: 100px;
    backdrop-filter: blur(3px);
    background-color: #ffffffad;
  }
  
  /* ---------------------------------------------------- */
  
  .group 			  { 
    position:relative; 
    margin-bottom:20px;
    /* padding-left: 10%; */
  }
  .group input 				{
    font-size:18px;
    padding:5px 5px 5px 5px;
    display:block;
    width:100%;
    border:none;
    /* border-bottom:1px solid #757575; */
  }
  .group input { 
    outline:none;
    color: #000000;
    font-size:medium;
    font-weight: 400;
    background-color: transparent
  }
  
  /* LABEL ======================================= */
  .group label 				 {
    /* color:#999;  */
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    /* left:5px; */
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    /* padding-left: 10%; */
  }
  
  /* active state */
  .group input ~ label, .group input:valid ~ label 		{
    top:-10px;
    font-size:14px;
    color:#999;
  }
  
  /* BOTTOM BARS ================================= */
  .bar 	{ 
    position:relative; 
    display:block; 
    width:100%; 
  }
  
  .bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#085858;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%; 
  }
  
  /* active state */
  .group input ~ .bar:before, .group input ~ .bar:after {
    width:50%;
  }
  
  /* HIGHLIGHTER ================================== */
  /* .highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  } */
  
  /* active state */
  .group input ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }

  @media (min-width: 1920px) {
    .stockLvlBody {
      overflow: hidden;
    }
  }
  
  /* Styling for medium screens (768px width and larger) */
  @media (max-width: 1369px) {
    .stockLvlBody {
      overflow: visible;
    }
  }
  @media (min-width: 1920px) {
    .receivingBody {
      overflow: hidden;
    }
  }
  
  @media (max-width: 1369px) {
    .receivingBody {
      overflow: visible;
    }
  }
  h5{
    font-size: small;
  }


  /* STOCK LEVEL */
  .stockLevelTable th:first-child{
    width: 100px;
  }
  .stockLevelTable td:first-child{
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stcklvl h5{
    font-size: medium !important;
  }

  @media (max-width: 1366px) {
    .stockLevelTable th{
      font-size:x-small;
    }
    .stockLevelTable th:first-child{
      width: 85px;
    }
    .stockLevelTable td:first-child{
      max-width: 85px;
    }
    .stockLevelTable td{
      font-size: small;
    }
    .stcklvl h5{
      font-size: medium !important;
    }
  }