* {
  margin: 0;
  padding: 0;
  font-family: "Roboto";
}

@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-Thin.woff2") format("woff2"),
    url("fonts/Inter-Thin.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-ThinItalic.woff2") format("woff2"),
    url("fonts/Inter-ThinItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLight.woff2") format("woff2"),
    url("fonts/Inter-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLightItalic.woff2") format("woff2"),
    url("fonts/Inter-ExtraLightItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-Light.woff2") format("woff2"),
    url("fonts/Inter-Light.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-LightItalic.woff2") format("woff2"),
    url("fonts/Inter-LightItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2"),
    url("fonts/Inter-Regular.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Italic.woff2") format("woff2"),
    url("fonts/Inter-Italic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-Medium.woff2") format("woff2"),
    url("fonts/Inter-Medium.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-MediumItalic.woff2") format("woff2"),
    url("fonts/Inter-MediumItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2"),
    url("fonts/Inter-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
    url("fonts/Inter-SemiBoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-Bold.woff2") format("woff2"),
    url("fonts/Inter-Bold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-BoldItalic.woff2") format("woff2"),
    url("fonts/Inter-BoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBold.woff2") format("woff2"),
    url("fonts/Inter-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
    url("fonts/Inter-ExtraBoldItalic.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-Black.woff2") format("woff2"),
    url("fonts/Inter-Black.woff") format("woff");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-BlackItalic.woff2") format("woff2"),
    url("fonts/Inter-BlackItalic.woff") format("woff");
}

.navbar ul li a{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px !important;
}

.navbar ul li{
  line-height: 70px !important
}

body {
  overflow-x: hidden;
  /* overflow-y: hidden; */
}

input[type="submit"],
button {
  cursor: pointer;
}

.login-mainPage {
  background: #3a2305;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
}

.login-portal {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* margin-bottom: 6em; */
}

.login-portal form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.login-portal form input[type="text"],
.login-portal form input[type="password"] {
  height: 47px;
  width: 328px;
  border-radius: 6px;
  box-sizing: border-box;
  border: none;
  text-align: center;
}

.login-portal form input[type="submit"] {
  height: 47px;
  border-radius: 6px;
  border: none;
  background: #fbae4b;
}

.login-portal img {
  margin-bottom: 1em;
}

/* Dashboard page */
.pre-nav {
  background: #061a2a;
  height: 93px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preNavImage {
  margin-left: 4em;
}

.prevNavUserPanel {
  margin-right: 4em;
}

.prevNavUserPanel p {
  color: #e0e0e0;
  font-size: 16px;
}

.navbar {
   background: #fbae4b;
  height: 67px; 
  display: flex;
  /* background: #fbae4b;
  height: 67px;
  width: 97%;
  border-radius: 185px;
  display: flex;
  margin: 0 auto;
  margin-top: 2em;
  justify-content: center;
  position: fixed;
  z-index: 99999999; */
}

.logoutSession {
  /* position: absolute; */
  /* top: .3em; */
  cursor: pointer;
  position: relative;
  top:3px;
}

.storePolicyContainer .infoField{
  width: 100%;  
  max-width: 100%;
}

.storePolicyContainer .infoField textarea{
  background: #27438f;
  outline: 1px solid #5671b9;
  color: #ffffff;
  border: none;
  text-indent: 8px;
  height: 100px !important;
  resize: none !important;
  text-indent: 0 !important;
  padding: 0.5em;
}

.store_policy_container{
  display: none;
}

.store_policy_container h5{
  font-size: 13px;
  color: #9da9d7;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
}

.store_policy_container p{
  font-size: 13px;
  margin-top: 0.5em;
  color: #cfcfcf;
  line-height: 15px;
}

.invalidLoginAttempt{
  color: red !important;
  font-size: 21px !important;
  display: none;
}

.premiumBtn{
  /* display: none; */
}

/* Mobile */

@media only screen and (min-width: 650px){
  .logoutSession {
    position: absolute;
    top: 1.3em;
    right: 1em;
    cursor: pointer;
  }
}

.navbar ul {
  margin-left: 3em;
  /* margin-left: 0; */
}

.navbar ul li {
  display: inline-block;
  line-height: 67px;
}

.navbar ul li a {
  list-style: none;
  text-decoration: none;
  margin: 0 .5em;
  font-size: 16px;
  color: #000000;
  cursor: pointer;
}

.navbarActivePage {
  /* font-weight: bold; */
  border-bottom: 3px solid #061a2a;
}

.globalSideBar {
  display: flex;
  flex-direction: column;
  gap: 4em;
  margin-left: 4em;
}

.findOrdersSearch h3 {
  color: #122e44;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.findOrdersSearch form input[type="text"] {
  height: 50px;
  border-radius: 7px;
  border: none;
  width: 250px;
  background: #f5f4f7;
  text-indent: 20px;
}

.findOrdersSearch form input[type="submit"] {
  background: #061a2a;
  color: #ffffff;
  border: 1px solid #061a2a;
  font-size: 16px;
  width: 47px;
  height: 38px;
  font-weight: bold;
  border-radius: 5px;
  position: relative;
  left: -3.7em;
}

.totalOrdersPanel {
  display: flex;
  flex-direction: column;
  gap: 2em;
  justify-items: space-between;
}

.ordersInfoSubSection {
  display: flex;
  gap: 2em;
  align-items: center;
}

.ordersInfoSubSection .dataInfoCount h1 {
  font-size: 35px;
  color: #122e44;
}

.ordersInfoSubSection .dataInfoCount span {
  font-size: 16px;
  color: #122e44;
}

.dailyNumbers {
  width: 300px;
  height: 116px;
  display: flex;
  background: #f5f4f7;
  justify-content: center;
  align-items: center;
  gap: 2em;
  border-radius: 13px;
  margin-bottom: 3em;
}

.dailyOrders span,
.dailyOverdue span {
  font-size: 14px;
  color: #061a2a;
  font-weight: bold;
}

.dailyNumbers h1 {
  font-size: 35px;
  color: #061a2a;
  font-weight: bold;
}

.mainPage {
  display: flex;
  margin-top: 2.3em;
}

.mainPageData {
  width: 70%;
  margin-left: 2em;
  margin-bottom: 5em;
}

.reportsMainPage{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

}

.newestOrder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1em;
}

.mostRecentOrder h1 {
  color: #122e44;
  font-size: 20px;
  font-weight: bold;
}

.newestOrderEntryField {
  display: flex;
  justify-content: space-around;
  border: 1px solid #d7d7d7;
  border-radius: 13px;
  box-sizing: border-box;
  padding: 0.7em;
  align-items: center;
}

.newItemEntryBtn img {
  cursor: pointer;
}

.newestOrderEntryField .entryBtns {
  display: flex;
  gap: 0.8em;
}

.newestOrderEntryField .entryBtns button {
  width: 73px;
  height: 37px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  border: none;
  outline: none;
  cursor: pointer;
}

.newestOrderEntryField .entryBtns button:first-child {
  background: #061a2a;
}

.newestOrderEntryField .entryBtns button:last-child {
  background: #005aa1;
}

.newestOrderEntryField .entryColumn {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.newestOrderEntryField .entryColumn p:first-child {
  color: #122e44;
  font-weight: bold;
}

.newestOrderEntryField .entryColumn p:last-child {
  color: #a5a5a5;
  font-weight: 500;
  font-size: 14px;
}

.glowingStatus {
  display: flex;
  gap: 1em;
  align-items: center;
  margin-top: 2em;
  margin-bottom: 2em;
}

.glowingStatus .glowCircle {
  background: #2e83d6;
  width: 14px;
  height: 14px;
  border-radius: 20px;
}

.glowingStatus span {
  color: #2e83d6;
  font-size: 16px;
  font-weight: bold;
}

.pendingOrders {
}

.ordersListPreview {
  gap: 3em;
  display: flex;
}

.ordersListPreview .entryFields {
  gap: 1em;
  display: flex;
  flex-direction: column;
}

.orderSkuEntry {
  display: flex;
  margin-top: 1em;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 400px;
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 1em;
}

.orderSkuEntry .orderLeft {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.orderSkuEntry .orderLeft h1 {
  font-size: 22px;
  color: #122e44;
}

.orderSkuEntry .orderLeft span {
  font-size: 15px;
  color: #888888;
}

.orderSkuEntry .orderRight {
  position: relative;
  left: 4.1em;
  top: 1em;
}

.orderSkuEntry .orderRight button {
  height: 35px;
  color: #ffffff;
  border: none;
  outline: none;
  font-weight: bold;
  width: 120px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  cursor: pointer;
}

.orderSkuEntry .orderRight button:first-child {
  background: #061a2a;
  padding-right: 4em;
}

.orderSkuEntry .orderRight button:last-child {
  background: #005aa1;
  width: 75px;
  border-top-left-radius: 67px;
  position: relative;
  right: 5em;
}

.ordersListPreview {
  margin-bottom: 2em;
  flex-wrap: wrap;
}

.viewAllOrders {
  text-decoration: none;
  color: #061a2a;
}

.ordersSearchSection button {
  display: flex;
  justify-content: space-around;
  background: #061a2a;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  height: 42px;
  width: 104px;
  border-radius: 4px;
  align-items: center;
}

.ordersSearchSection .searchField {
  display: flex;
  /* gap: 1em; */
  position: relative;
}

.ordersSearchSection .searchField input[type="text"] {
  width: 100%;
  text-indent: 3.8em;
  height: 42px;
}

.searchField input[type="text"] {
  outline: none;
}

.searchIco {
  position: absolute;
  left: 1em;
  top: 0.7em;
}

.ordersSearchSection .searchField input::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #8d8d8d;
  opacity: 1; /* Firefox */
}

.ordersPageTable {
  border-collapse: collapse;
  width: 100%;
  margin-top: 0em;
}

.ordersPageTable th,
.ordersPageTable td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.ordersPageTable th {
  font-size: 22px;
  font-weight: bold;
  color: #122e44;
}

.ordersPageTable td {
  font-size: 22px;
  font-weight: bold;
  color: #122e44;
  padding: 2em 0;
  padding-left: 0.5em;
  position: relative;
}

.ordersPageTable td span {
  top: 5.8em;
  left: 0.8em;
  position: absolute;
  color: #888888;
  font-size: 13px;
  font-weight: 500;
}

input[type="checkbox"] {
  zoom: 1.4;
}

.printBatchBtn {
  background: #061a2a;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 1em;
  border-radius: 5px;
  gap: 1.3em;
  cursor: pointer;
}

.viewPrintOrder {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

td button {
  height: 35px;
  padding: 0 1.3em;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
}

td button:first-child {
  background: #061a2a;
}

td button:last-child {
  background: #005aa1;
}

.paginationOrdersPage {
  margin-top: 2em;
  display: flex;
  gap: 2em;
  justify-content: center;
}

.paginationOrdersPage a {
  border: none;
  outline: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.paginationOrdersPage a,
a:visited,
.paginationOrdersPage a:hover,
.paginationOrdersPage a:active {
  color: inherit;
}

.paginationBtnInactive {
  color: #9b9b9b !important;
}

.customersTableView {
  border-collapse: collapse;
  width: 100%;
}

.customersTableView th,
.customersTableView td {
  text-align: left;
  padding: 8px;
}

.customersTableView th {
  background-color: #061a2a;
  color: white;
  font-weight: 500;
}

.customersTableView td {
  font-size: 16px;
}

.customersTableView .customerName {
  color: #122e44;
  font-weight: bold;
}

.ExportCustomersBtn {
  background: #061a2a;
  height: 40px;
  padding: 0 1.5em;
  color: #c0c0c0;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
}

.customerViewBtn {
  background: #061a2a !important;
}

.customerEmailCol {
  color: #122e4491;
  font-weight: 400;
}

.customerPinCol {
  color: #122e44;
  font-weight: 500;
}

.customerCreatedAtCol {
  font-weight: bold;
  color: #122e44;
}

/* Code Section */
.codeTableView {
  border-collapse: collapse;
  width: 100%;
}

.codeTableView th,
.codeTableView td {
  text-align: left;
  padding: 8px;
}

.codeTableView th {
  background-color: #061a2a;
  color: white;
  font-weight: 500;
}

.codeTableView td {
  font-size: 16px;
}

.codeTableView .customerName {
  color: #122e44;
  font-weight: bold;
}

.codeEditBtn {
  background: #061a2a !important;
}

.codeID {
  color: #122e44;
  font-weight: bold;
}

.codeStatusCol p {
  width: 105px;
  height: 36px;
  border-radius: 5px;
  text-align: center;
  line-height: 36px;
  font-weight: bold;
  color: #ffffff;
}

.codeUnused {
  background: #58a832;
  font-weight: 400;
}

.codeUsed {
  background: #a83232;
  font-weight: 400;
}

.codeCreatedAt {
  color: #122e44;
  font-weight: bold;
}

.codeRedeemedAt {
  font-weight: bold;
  color: #122e44;
}

/* Server */
.serverErrorMessage {
  color: red !important;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
}

/* Mini Profile */
.orderViewMiniProfile {
  position: fixed;
  left: 0;
  right: 0;
  margin-top: -9em;
  margin-left: auto;
  margin-right: auto;
  width: 416px;
  height: 515px auto;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  z-index: 99;
  display: none;
  padding-bottom: 3em;
}

.topHalf {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
  gap: 2em;
}

.orderSkuInfo {
  display: flex;
  flex-direction: column;
}

.orderSkuInfo span:first-child {
  font-size: 13px;
  color: #afafaf;
}

.orderSkuInfo .skuNumber {
  font-size: 18px;
  font-weight: bold;
  color: #122e44;
  margin-top: 0.2em;
  margin-bottom: 0.7em;
}

.orderSkuInfo button {
  background: #005aa1;
  color: #ffffff;
  height: 32px;
  padding: 0 1em;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}

.bottomHalf {
  display: flex;
  flex-direction: column;
  margin-top: 2em;
  gap: 1em;
}

.btmRow {
  display: flex;
  justify-content: space-between;
  margin: 0 2em;
  gap: 1em;
}

.rowEntry {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  width: 100%;
}

.rowEntry span:first-child {
  color: #afafaf;
  font-size: 13px;
  font-weight: 500;
}

.rowEntry span:nth-child(2) {
  color: #122e44;
  font-size: 18px;
  font-weight: bold;
}

.directionalArrow {
  position: relative;
  top: 0.7em;
  /* left: 0.2em; */
  left: -21px;
}

.lastRow {
  align-items: center;
  margin-top: 1em;
}

.lastRow .rowEntry button {
  background: #bbfabb;
  color: #5e9e4e;
  width: 100px;
  height: 37px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
}

/* The container must be positioned relative: */
.lastRow .profileCustomSelect {
  position: relative;
  font-family: Arial;
}

.lastRow .profileCustomSelect select {
  display: none; /*hide original SELECT element: */
}

.lastRow .select-selected {
  background-color: #061a2a;
  border-radius: 7px;
  width: 150px;
}

/* Style the arrow inside the select element: */
.lastRow .select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 32px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.lastRow .select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.lastRow .select-items div,
.lastRow .select-selected {
  color: #ffffff;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Style items (options): */
.lastRow .select-items {
  position: absolute;
  background-color: #061a2a;
  border-radius: 7px;
  width: 184px;
  top: 100%;
  top: 2.6em;
  left: 0;
  right: 0;
  z-index: 99;
  padding-bottom: 0.5em;
}

/* Hide the items when the select box is closed: */
.lastRow .select-hide {
  display: none;
}

.lastRow .select-items div:hover,
.lastRow .same-as-selected {
  background-color: rgba(255, 255, 255, 0.1);
}

.close-section {
  position: absolute;
  right: 0.6em;
  font-size: 29px;
  cursor: pointer;
  top: 0.2em;
}

.confirmationModule {
  transition: 0.3s ease-in-out;
  position: absolute;
  left: 55em;
  right: 0;
  top: -8em;
  /* top: 1.7em; */
  margin-left: auto;
  margin-right: auto;
  width: 250px;
  height: 45px;
  background: #133d5f;
  border: 1px solid transparent;
  border-radius: 5px;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 13px;
  gap: 1em;
}

#closeNotificationMsg {
  right: 1em;
  cursor: pointer;
}

.printView {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -14em;
  margin-left: auto;
  margin-right: auto;
  width: 346px;
  height: 615px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  z-index: 500;
  display: none;
}

.entryPoint {
  display: flex;
  gap: 1.3em;
}

.printView {
  padding: 2em;
}

.printView .entryInfo h1 {
  font-size: 23px;
  color: #122e44;
}

.printView .entryInfo span {
  font-size: 18px;
  color: #122e44;
  font-weight: bold;
}

.printShipmentBtns {
  margin-top: 2em;
  margin-bottom: 2em;
}

.shipBtnsMenu {
  display: flex;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  height: 60px;
  gap: 0.5em;
  background: #f9f9f9;
  border-radius: 10px;
}

.shipBtnsMenu button {
  padding: 1em 4em;
  border: none;
  outline: none;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
}

.shipBtnInactive {
  background: #f9f9f9;
  font-weight: bold;
}

.shipBtnActive {
  background: #ffffff;
  box-shadow: 0px 13px 13px rgba(153, 153, 153, 0.164);
}

.shipTruckIcon {
  background-color: #fed295;
  border-radius: 60px;
  padding: 0.7em;
}

.columnPrint {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin: 1em;
}

.columnPrint span,
.columnPrintText {
  font-size: 14px;
}

.columnPrint input {
  height: 40px;
  border: 1px solid #eeecec;
  border-radius: 9px;
  text-indent: 1em;
  width: 70%;
}

#closePrintView {
  font-size: 35px;
  font-weight: 400;
  color: #9092ad;
  position: absolute;
  right: 1em;
  margin-top: -0.3em;
  cursor: pointer;
}

.createLabelBtn {
  background: #061a2a;
  color: #ffffff;
  width: 120px !important;
  text-indent: 0 !important;
  height: 45px !important;
  font-weight: 500;
  border-radius: 6px !important;
  cursor: pointer;
}

.scanInstructionTextInitial {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.barCodeScan {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 2.5em;
}

.barCodeScan p {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
}

.barCodeScan button {
  background: #061a2a;
  color: #ffffff;
  width: 150px !important;
  text-indent: 0 !important;
  height: 45px !important;
  font-weight: 500;
  border-radius: 6px !important;
  cursor: pointer;
  margin-top: 6em;
}

.printStageThree {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2em;
}

.printStageThree p {
  font-size: 14px;
}

.printStageThree button {
  font-size: 14px;
  background: #061a2a;
  color: #ffffff;
  width: 150px !important;
  text-indent: 0 !important;
  height: 45px !important;
  font-weight: 500;
  border-radius: 6px !important;
  cursor: pointer;
}

.printView {
  /* display: block; */
}
.printStageThree,
.printStageTwo {
  display: none;
}

.swapImageView {
  position: relative;
  top: -7em;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.swapImageView:hover {
  opacity: 0.8;
  transition: 0.2s ease-in-out;
}

/* Order Module */
.newOrderModule {
  position: absolute;
  right: -500px;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  height: 100vh auto;
  background: #fff;
  z-index: 100;
  box-shadow: -5px 0px 50px rgba(24, 24, 24, 0.171);
  box-sizing: border-box;
  padding: 1em 2em;
  display: none;
}

.newOrderModule .title {
  display: flex;
}

.newOrderModule .title h1 {
  display: flex;
  gap: 0.5em;
  font-size: 30px;
  font-weight: 700;
  position: relative;
  width: 100%;
}

.newOrderModule .title h1 .deleteOrderBtn {
  position: absolute;
  right: 0;
  font-weight: 300;
  font-size: 40px;
  top: -0.25em;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.newOrderModule .column:first-child {
  margin-top: 1em;
}

.newOrderModule .column:not(:first-child) {
  margin: 2em 0;
}

.newOrderModule .column .columnCategory {
  background: #f7f7f8;
  padding: 1em 1em;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
}

.newOrderModule .column .columnData {
  padding: 2em 1em;
  padding-bottom: 0em;
  font-size: 14px;
  font-weight: bold;
}

.pinFieldLayout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: center;
}

.newOrderModule .column .pinKeyGenerate {
  border: none;
  outline: none;
  background: none;
}

.newOrderModule .column .pinFieldLayout button {
  background: #f7f7f8;
  padding: 0.7em 2em;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  position: relative;
  top: 1em;
}

.newOrderModule .column .dataIntake[type="text"] {
  padding: 0.5em 1em;
  border: none;
  border-radius: 5px;
  background: #ebebeb;
  margin-top: 1.5em;
}
.newOrderModule .column .dataIntake[type="number"] {
  padding: 0.5em 1em;
  border: none;
  border-radius: 5px;
  background: #ebebeb;
  margin-top: 1.5em;
}

.newOrderModule .column .dataIntake[type="text"]::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(70, 70, 70);
  opacity: 1; /* Firefox */
}

.newOrderModule .column .dataIntake[type="number"]::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(70, 70, 70);
  opacity: 1; /* Firefox */
}

.orderDataIntakeForm {
  display: flex;
  flex-direction: column;
}

.formChildren {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.generateUniqueCustomerID {
  position: relative;
}

.createNewCustomerID {
  position: absolute;
  top: 1.55em;
  right: 0.7em;
  cursor: pointer;
}

.dataIntake[type="submit"] {
  background: #000;
  height: 40px;
  width: 130px;
  margin-top: 1.5em;
  border-radius: 5px;
  position: relative;
  top: 1em;
  color: #ffffff;
  font-weight: 500;
}

.closeNewOrderMenu {
  cursor: pointer;
}

/* T-Shirt Selector Module */
.tShirtSelectorGUI {
  width: 700px;
  height: 500px;
  background: #ffffff;
  box-shadow: -5px 0px 50px rgba(24, 24, 24, 0.171);
  position: absolute;
  z-index: 9999;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  padding: 0 5em;
  padding-top: 2em;
  border-radius: 10px;
  display: none;
  flex-direction: column;
  justify-content: center;
}

.tShirtSelectorGUI h1 {
  font-size: 24px;
}

.tShirtSelectorGUI p {
  font-size: 14px;
  margin-top: 1em;
  line-height: 20px;
  color: #4d4d4d;
}

.tShirtSelectorGUI .tShirtBox {
  background: #f2f2f2;
  padding: 1em;
  border-radius: 10px;
  display: flex;
  margin-top: 2em;
  flex-direction: column;
  transition: box-shadow 0.2s ease-in-out;
  cursor: pointer;
}

.tShirtSelectorGUI .selectorContainer {
  display: flex;
  justify-content: space-around;
}

.tshirtcolorconfig ul {
  display: flex;
  text-decoration: none;
  list-style: none;
}

.tshirtcolorconfig ul {
  gap: 1em;
  justify-content: center;
  margin-top: 1em;
}

.tshirtcolorconfig ul li {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  cursor: pointer;
}

.tshirtcolorconfig ul .tshirtBlack {
  background: #000;
}

.tshirtcolorconfig ul .tshirtBlue {
  background: #0066c8;
}

.tshirtcolorconfig ul .tshirtWhite {
  background: #fff;
}

.tShirtFrontActive {
  outline: 1px solid rgb(127, 182, 127);
  box-shadow: 0px 0px 15px rgba(24, 24, 24, 0.144);
  transition: box-shadow 0.2s ease-in-out;
}

.closeTShirtConfigurator {
  position: absolute;
  right: 3em;
  cursor: pointer;
}

.tshirtconfigBtn {
  background: #bbfabb;
  color: #5e9e4e;
  width: 100px;
  height: 37px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  align-self: center;
  margin-top: 2em;
  margin-bottom: 2em;
}

.backShirtSideChoice {
  background: #f2f2f2;
  width: 50px;
  border-radius: 5px;
}

.tShirtBackChoiceContainer ul {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 0.5em;
}

.tShirtBackChoiceContainer ul li {
  padding: 0.3em 0.2em;
}

.tShirtBackActiveChoice {
  outline: 1px solid rgb(127, 182, 127);
  box-shadow: 0px 0px 15px rgba(24, 24, 24, 0.144);
  padding: 0.3em 0.2em;
}

.dataIntake {
  transition: 0.2s ease-in-out;
}

.fillGreenTemp {
  background: rgb(191, 236, 191) !important;
  transition: 0.2s ease-in-out;
}

.printWindowGUI {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 1322px;
  height: 800px;
  background: #1f2125;
  z-index: 999999;
  border-radius: 10px;
  box-shadow: 0px 4px 15px 10px rgba(0, 0, 0, 0.25);
  /* display: none; */
  visibility: hidden;
}

.printWindowGUI {
}

.barCodeItem {
  position: relative;
}

.printHeader {
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-direction: column;
  height: 100%;
}

.printHeader button {
  width: 105px;
  height: 33px;
  border-radius: 5px;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  outline: none;
  border: none;
  box-shadow: 0px 4px 15px 6px rgba(15, 15, 15, 0.212);
  line-height: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-weight: 500;
}

.printReady span {
  color: #fff;
  font-size: 33px;
  font-weight: 400;
  padding-left: 1em;
  padding-right: 2em;
  cursor: pointer;
}

.printReady span:hover {
  color: rgb(180, 70, 70);
}

.printReady {
  display: flex;
  vertical-align: center;
  gap: 1em;
  align-items: center;
}

.printPreviewBtn {
  background: #5b5f64;
}

.printPrintBtn {
  background: #3e7ce9;
}

.printZoom p {
  width: 120px;
  height: 33px;
  border-radius: 5px;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  outline: none;
  border: none;
  box-shadow: 0px 4px 15px 6px rgba(15, 15, 15, 0.212);
  background: #2d2f31;
  text-align: center;
  line-height: 33px;
  font-size: 13px;
  position: relative;
  left: 5em;
}

.printExportPDF button {
  width: 120px;
  height: 33px;
  border-radius: 5px;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  outline: none;
  border: none;
  box-shadow: 0px 4px 15px 6px rgba(15, 15, 15, 0.212);
  background: #348220;
  text-align: center;
  margin-left: 6em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.pdfBtnDownloadInactive {
  background: rgb(116 116 116) !important;
  transition: 0.2s ease-in-out;
}

.printTop {
  display: flex;
  gap: 21em;
  justify-content: space-around;
  background: #404040;
  width: 100%;
  height: 64px;
  align-items: center;
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.printPanelSettings {
  background: #2d2f31;
  width: 268px;
  height: 100%;
  /* position: absolute; */
  top: 0;
  display: flex;
}

.printPanelSettings {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3em;
  box-sizing: border-box;
  color: #ffffff;
}

.printPanelSettings h1 {
  letter-spacing: 0.5px;
  font-size: 24px;
}

.printPanelSettings .configuration {
  display: flex;
  margin-top: 4em;
  flex-direction: column;
  gap: 1em;
}

.printPanelSettings .configuration input[type="text"] {
  background: #1d1d1f;
  height: 44px;
  width: 215px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
  text-indent: 2em;
}

.printDataView {
  position: absolute;
  left: 20em;
  top: 7em;
  width: 956px;
  height: 636px;
  border-radius: 10px;
  background: #404040;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pdf_preview {
  position: absolute;
  top: 0;
  left: 0;
}

.barCodeItem {
  position: relative;
  z-index: -3;
}

.printDataView {
  border-radius: 10px !important;
}

.printDataView::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 50px;
  background: inherit;
  border-top-left-radius: 60px;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.lds-roller {
  margin-left: -15em;
}

.configuration button {
  background: rgb(30, 62, 131);
  box-shadow: none;
  color: #dbdbdb;
  background: none;
  margin: 0 auto;
  justify-self: center;
  margin-top: 0.5em;
  cursor: pointer;
}

.configuration {
  justify-content: center;
  align-items: center;
  width: 100%;
}

.totalSetPages {
  color: #ffffff !important;
}

.printDataView {
  overflow: hidden;
}

.printLoading {
  width: 150px;
  height: 120px;
  background: rgb(31, 31, 31);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  position: absolute;
  z-index: 9999999;
  left: 14em;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 34em;
  bottom: 0;
  display: none;
  transition: 0.2s ease-in-out;
}

.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%,
  100% {
    top: 24px;
    height: 32px;
  }
}

.filters {
  /* outline: 1px solid red; */
  /* height: 70px; */
  position: relative;
  padding: 1.7em 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
}

.listOfFiltersAdded {
  margin: 1.2em 0;
}

.filterList {
  display: none;
}

.listOfFiltersAdded .addNew {
  font-size: 14px;
  font-weight: bold;
  color: #122e44;
  margin-left: 1em;
  margin-top: 0.6em;
  cursor: pointer;
}

.filterFrom {
  font-size: 12px;
  color: #b6b6b6;
  position: relative;
  top: 0.3px;
  font-weight: 500;
}

.filterResult,
.filterFrom,
.deleteFilterAppended {
  opacity: 0;
}

.filterResult {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  top: -0px;
  left: 1px;
  white-space: pre;
}

.listFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.filterAppended {
  background: #061a2a;
  height: 31px;
  width: 0;
  padding: 0em 1em;
  padding-right: 2em;
  display: flex;
  align-items: center;
  border-radius: 4px;
  gap: 0.5em;
  transition: 0.5s ease-in-out;
  min-width: 0;
}

.autoExpandSmooth {
  width: 43px !important;
  min-width: 50px !important;
}

.autoExpandSmoothExtended {
  width: auto !important;
}

.filterAppended:not(:first-child) {
  /* margin-left: 0.5em; */
}

.deleteFilterAppended {
  font-size: 22px;
  position: absolute;
  right: -1em;
  top: -0.26em;
  font-weight: 400;
  cursor: pointer;
}

.addNewFilter {
  position: relative;
}

.listOfFiltersAdded {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.filterList {
  height: 205px;
  width: 208px;
  background: #061a2a;
  position: absolute;
  z-index: 100;
  border-radius: 4px;
  top: 2.7em;
  left: -5em;
}

.filterList ul {
  list-style: none;
  border-radius: 4px;
}

.filterList ul li {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  padding: 1em 2em;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  background: #061a2a;
  border-radius: 4px;
}

.filterList ul li:hover {
  background: #1e3b52;
  transition: 0.2s ease-in-out;
}

.filterList ul li .subMenu {
  width: 280px;
  right: -285px;
  background: #061a2a;
  box-shadow: 0px 0px 15px rgb(65 46 46 / 30%);
  height: 200px auto;
  position: absolute;
  top: 0;
  padding: 2em 1em;
  padding-left: 1.5em;
  padding-top: 1.5em;
  box-sizing: border-box;
  display: none;
}

.filterList ul li {
  position: relative;
}

.filterList ul li::before {
  position: absolute;
  content: "";
  right: -10px;
  width: 100px;
  background: transparent;
  top: 0;
  height: 100px;
}

/* .filterList ul li::before .subMenu:first-child {
  display: block;
  transition: 0.2s ease-in-out;
}

.filterList ul li:hover .subMenu:first-child {
  display: block;
  transition: 0.2s ease-in-out;
}

.subMenu:first-child:hover {
  display: block;
  transition: 0.2s ease-in-out;
} */

.colorPallete {
  display: flex;
  align-items: center;
  border: 1px solid #061a2a;
  box-shadow: -5px 0px 50px rgba(24, 24, 24, 0.527);
  border-radius: 100px;
  width: 100px;
  justify-content: center;
  gap: 0.7em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  border: 1px solid #143855;
}

.colorPallete .colorChoice {
  width: 20px;
  height: 20px;
  border-radius: 100px;
}

.colorPallete .colorChoice p {
  font-weight: 600;
}

.subCateColors {
  font-size: 20px;
  margin-bottom: 1em;
  color: #ffffff;
}

.colorList {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.colorFilterActive {
  background: #143855;
}

.colorRoyale {
  background: royalblue;
}

.colorBlack {
  background: black;
  outline: 1px solid rgb(43, 43, 43);
}

.colorWhite {
  background: #fff;
  outline: 1px solid rgb(65, 65, 65);
}

.filterBtns {
  padding: 0.8em 1.5em;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 2em;
}

.cancelFilterChoice {
  background: #242424;
  color: #ffffff;
  box-shadow: inset 0em 0em 2px rgb(97, 97, 97);
}

.applyFilterChoice {
  background: #11314b;
  color: #ffffff;
  box-shadow: inset 0em 0em 2px rgb(48, 89, 175);
}

.filterBtnsPanel {
  display: flex;
  gap: 0.7em;
  justify-content: center;
  margin-left: -0.5em;
}

.styleChoices .styleRow:not(:first-child) {
  margin-top: 1em;
}

.styleChoices .styleRow button {
  margin-top: 1em;
  height: 40px;
  width: 95%;
  outline: none;
  border: 1px solid #061a2a;
  background: #0d3858;
  text-indent: 15px;
  text-align: left;
  border-radius: 4px;
  color: #d6d6d6;
  position: relative;
}

.viewLargerImage {
  position: absolute;
  right: 1.1em;
  top: 0.95em;
}

.subsubMenu .imagePreviewContainer {
  display: flex;
  justify-content: center;
}

.imgHolderPreview {
  display: none;
}

.subsubMenu {
  display: none;
}

.dropDownOptionsContainer {
  position: absolute;
  background: #02111d;
  width: 228px;
  z-index: 120;
  max-height: 191px;
  overflow-y: scroll;
}

.dropDownShirtOptions {
  width: 95%;
  outline: none;
  text-indent: 15px;
  text-align: left;
  font-size: 13px;
  border-radius: 4px;
  color: #d6d6d6;
  transition: 0.2s ease-in-out;
  width: 100%;
  padding: 1em 0;
}

.dropDownShirtOptions:hover {
  background: #1f1f1f;
  transition: 0.2s ease-in-out;
}

.shirtOptionsHidden {
  display: none;
}

.dateFilterContainer {
  display: flex;
  flex-direction: column;
}

.dateFilterContainer .dateOptionType:not(:first-child) {
  margin-top: 1em;
}

.dateFilterContainer #reportrange {
  margin-top: 1em;
  background: #0d3858 !important;
  padding: 0.7em 0em !important;
  width: 235px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
  color: #d6d6d6;
  text-align: center;
}

/* DropDown GLOBAL */
/* The container must be positioned relative: */
.subMenu .category-select {
  position: relative;
  font-family: Arial;
}

.subMenu .category-select select {
  display: none; /*hide original SELECT element: */
}

.subMenu .select-selected {
  background-color: #061a2a;
  border-radius: 7px;
  margin-top: 1em;
  background: #0d3858 !important;
  padding: 0.7em 0em !important;
  width: 235px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  outline: none;
  color: #d6d6d6;
  text-align: left;
  text-indent: 17px;
}

/* Style the arrow inside the select element: */
.subMenu .select-selected:after {
  position: absolute;
  content: "";
  top: 16px;
  right: -19px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.subMenu .select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.subMenu .select-items div,
.subMenu .select-selected {
  color: #ffffff;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

/* Style items (options): */
.subMenu .select-items {
  position: absolute;
  background-color: #061a2a;
  border-radius: 7px;
  width: 235px !important;
  top: 100%;
  top: 2.6em;
  left: 0;
  right: 0;
  z-index: 99;
  padding-bottom: 0.5em;
}

/* Hide the items when the select box is closed: */
.subMenu .select-hide {
  display: none;
}

.subMenu .select-items div:hover,
.subMenu .same-as-selected {
  background-color: rgba(255, 255, 255, 0.1);
}

.locationContainer:not(:first-child) {
  margin-top: 1em !important;
}

.listFilters .addNew {
  position: relative;
}

.totalSearchResultsAmount {
  position: absolute;
  right: -150px;
  color: rgb(83, 83, 83);
  font-weight: 500;
  cursor: default;
  /* display: none; */
}

.printProgressBar {
  position: absolute;
  top: -3em;
  left: 0.5em;
  color: #fff;
}

.currentPrintPage {
  margin-left: 6px;
}

.appendFilterChoice {
  font-size: 27px;
  position: absolute;
  right: 1em;
  top: 0.7em;
  transition: 0.2s ease-in-out;
}

.appendFilterChoice:hover {
  transition: 0.2s ease-in-out;
  color: rgb(74, 160, 63);
}

.applyAllFilters {
  background: #bbfabb;
  color: #438533;
  width: 165px;
  height: 37px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  margin-top: 1em;
  margin-left: 1.5em;
  border: 1px solid #438533;
  display: none;
}


.reportsTableView {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 2em;
}

.reportsTableView th,
.reportsTableView td {
  text-align: left;
  padding: 18px;
}

.reportsTableView td {
  border-top: 1px solid rgb(202, 160, 160);
  border-bottom: 1px solid rgba(202, 160, 160, 0.623);
  /* border: 1px solid rgb(202, 160, 160); */
}

.reportsTableView td:hover{
  cursor: pointer;
  background: #f2e9f3 !important;
}
.reportsTableView th {
  background-color: #061a2a;
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.reportsTableView td {
  font-size: 13px;
  background-color: #f2e9f3;
  font-weight: 500;
}

.reportsTableView .customerName {
  color: #122e44;
  font-weight: bold;
}

.focusedTotal{
  background: #dfd1ff !important;
}

.focusedTotalComplete{
  background: #d6ffd1 !important;
}

.focusedDates{
  background: #c9daf8 !important;
}

.entryInventoryDataRow{
  display: flex;
  margin-bottom: 1.5em;
  gap: 1.5em;
}

.inventoryRow{
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.062);
}

.inventoryField {
  display: flex;
  justify-content: space-around;
  border: 1px solid #d7d7d7;
  border-radius: 13px;
  box-sizing: border-box;
  padding: 0.7em;
  align-items: center;
  height: 80px;
  gap: 1em;
  margin-right: 2em;
  padding-left: 1em;
  max-width: 570px;
}

.inventoryRow{
  display: flex;
  justify-content: space-around;
  border: 1px solid #d7d7d7;
  border-radius: 13px;
  box-sizing: border-box;
  padding: 0.7em;
  align-items: center;
  height: 80px;
  width: 570px;
}

.customerIDSearchForm{
  position: relative;
}

.globalSearchCustomerID{
  position: absolute !important;
  left: 12.2em !important; 
  top: .4em;
}

.rowDivided{
  width:245px;
}

.entryColumn{
  position: relative;
}

.inventoryField .entryColumn{
  margin: 0 1.3em;
  position: relative;
}

.inventoryField .entryColumn p:first-child{
  color: #606060;
  font-weight: 400;
  margin-bottom: .2em;
}

.inventoryField .entryColumn p:last-child{
  color: #122E44;
  font-weight: 700;
  margin-bottom: .2em;
}

.inventoryRow .entryImage{
  display: flex;
  gap: 2em;
  align-items: center;
}

.inventoryRow .entryColumn p:first-child{
  color: #606060;
  font-weight: 400;
  margin-bottom: .2em;
}

.inventoryRow .entryColumn p:last-child{
  color: #122E44;
  font-weight: 700;
  margin-bottom: .2em;
}

.inventorySelector{
  display: flex;
  gap: .5em;
  cursor: pointer;
}

.dataFieldRow{
  cursor: pointer;
  font-weight: 500;
  color: #122E44;
}

.stockIndicator{
  /* color: green; */
}

.designText{
  color: #122E44;
  margin-bottom: 1em;
  margin-top: 1em;
}

.entryFieldOptionsDisplay{
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.123);
  width: 100px;
  height: 85px auto;
  padding-bottom: 15px;
  position: absolute;
  top: 4.5em;
  left: -.3em;
  background: #FFFFFF;
  border-radius: 13px;
  border: 1px solid #d7d7d7;
  display: none;
}

.entryFieldOptionsDisplay ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  padding-top: 1em;
  gap: .5em;
}

.entryFieldOptionsDisplay ul li{
  color: #122E44;
  font-weight: 500;
  cursor: pointer;
}

.entryFieldOptionsDisplay ul li:hover{
  color: rgb(167, 67, 67);
}

.entryImage img{
  object-fit: cover;
  width: 50px;
  height: 50px;
}

/* Inventory Design Start */

td.editable:hover {
  background: #d6ffd1 !important;
}

.stockLevelAlertIcon{
  display: none;
}

/* Inventory Design End */

.pre-nav{
  display: none;
}

.orderShirt img{
  max-height: 136px;
}

/* Custom Homepage For 'My Shop' */
/* Store Design */

.bakeryFrame{
  width: 100%;
  height: 1500px;
  background: rgb(21,26,34);
  background: linear-gradient(180deg, rgba(21,26,34,1) 0%, rgba(6,26,42,1) 100%);
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  padding-top: 13em;
}

.bakeryFrameClient{
  padding-top: 8em;
}

/* store editing modules */
.storeEditModule{
  width: 400px;
  height: 700px;
  outline: 1px solid #375597;
  border-radius: 15px;
  box-shadow: 0px 0px 35px 6px rgba(0, 0, 0, 0.212);
  color: #ffffff;
  background: rgb(21,65,130);
  background: linear-gradient(180deg, rgb(14, 52, 108) 0%, rgb(6, 24, 52) 100%);
}

.bakeryFrame h1{
  margin-bottom:1em;
  margin-top: -3.5em;
  color: #ffffff;
  text-shadow:0px 0px 5px 1px rgba(0, 0, 0, 0.212);
}

.storeFrontContainer{
  width: 400px;
  height: 600px;
  padding-bottom: 7em;
  /* height: auto; */
  outline: 1px solid #375597;
  border-radius: 15px;
  box-shadow: 0px 0px 35px 6px rgba(0, 0, 0, 0.212);
  color: #ffffff;
  position: relative;
  overflow-y: hidden;
}

.storeFeedMainHeader{
  font-weight: 500;
  font-family: 'Noto Sans', sans-serif;
  font-size: 22px;
}

.userStoreAlerts{
  outline: 1px solid #375597;
  border-radius: 60%;
  height: 34px;
  width: 34px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.userStoreSettings{
  border-radius: 60%;
  height: 25px;
  width: 25px;
  display: flex;
  font-size: 20px;
  justify-content: center;
  gap: .15em;
  font-weight: bolder;
  cursor: pointer;
}

.storeNavigation{
  background: rgb(21,65,130);
  background: linear-gradient(180deg, rgb(14, 52, 108) 0%, rgb(6, 24, 52) 100%);
  padding: 2em;
  padding-top: 1.5em;
  box-sizing: border-box;
  border-radius: 15px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  height: 100%;
  position: relative;
}

.storeContainerHeader{
  background: #14171a;
  height: 100px;
  padding-top: .8em;
  display: flex;
  position: relative;
}

.special-tabs{
  margin-bottom: 1em;
}

.special-tabs ul{
  display: flex;
  gap: .6em;
  list-style: none;
}

.special-tabs ul li{
  outline: rgb(55 151 151) solid 1px;
  padding: .2em;
  padding-left: .7em;
  padding-right: .7em;
  padding-bottom: .5em;
  padding-top: .4em;
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
  border-bottom: 1px solid #379797;
  white-space: nowrap;
}

/* .create-new-tab{
  outline: #375597 solid 1px !important;
  border-bottom: 1px solid #375597 !important;
  color: #6f8cc6 !important;
  font-weight: bold;
} */

.special-tabs ul li:hover{
  background: #0a3e6b;
}

.special-tabs {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  overflow-x: auto;
  white-space: nowrap;
  padding: .5em;
  padding-left: .2em;
}

.special-tabs::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

.special-tabs ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.special-tabs li {
  display: inline-block; /* Display list items inline-block for horizontal layout */
  /* Additional styling here for padding, background, colors, etc. */
}

/* Optional: Styling for the 'create-new-tab' button */
.create-new-tab {
  cursor: pointer; /* Changes cursor to pointer to indicate it's clickable */
  /* Additional styling here */
}

.newTabDecsription{
  resize: none;
  padding-top: .5em;
  text-indent: 0 !important;
  padding-left: 1em;
  padding-right: 1em;
  height: 100px !important;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: -.5em;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  transform: scale(0.8);
}

.toggle-switch-container{
  margin-top: .2em;
}

.tabDescExplanation{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  font-size: 12px !important;
  color: rgb(207, 207, 207);
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(33px);
  -ms-transform: translateX(33px);
  transform: translateX(33px);
}

.newTabSubmissionButton{
  display: flex;
  justify-content: center;
  margin-top: 1em;
  gap: 1em;
}

.create-new-tab-sub{
  cursor: pointer;
  background: #fbae4b;
  color: #000;
  font-weight: 500;
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.cancel-new-tab{
  background: transparent !important;
  color: #ffffff;
  outline: none !important;
  border: none !important;
}

/* Products pulled from db */
.tabProductListEntry{
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 13px;
  margin-top: 1em;
}

.existing-tab-products{
  margin-top: 1em !important;
}

.productDropdown {
  width: 100%;
  padding: 5px;
  margin-top: 15px;
  border-radius: 4px;
  border: 1px solid #3f4f63;
  background-color: #091a28;
  outline: none;
  font-size: 14px;
  color: #ffffff;
}

.selectedProductsList {
  margin-top: 10px;
}

.selectedProductEntry {
  padding: 5px;
  max-width: 100%;
  margin: 0px 0.2em;
  margin-top: 5px;
  border: 1px solid #fbae4b;
  border-radius: 5px;
  display: inline-block;
  font-size: 12px;
}

.removeProductBtn {
  cursor: pointer;
  background-color: #f44336; /* Red */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 3px 6px;
  margin-left: 10px;
}

.addProductBtn{
  margin-top: .5em;
  background: #fbae4b;
  color: #000000;
  border-radius: 2px;
  outline: none;
  border: none;
  font-weight: 500;
  padding: .5em;
  font-size: 12px;
}

.editTabBtn {
  margin-left: 10px; /* Spacing between tab name and edit button */
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent;
  /* Add more styles as needed */
}

.special-tabs ul li{
  display: flex;
  align-items: center;
  vertical-align: center;
  justify-content: center;
}

.formTabControlGroup{
  display: flex;
  justify-content: space-between;
}

.deleteTabGroup{
  font-size: 12px;
  color: #ffffff;
  background: #692727;
  color: #ffffff;
  padding: 0.2em 0.4em;
  position: relative;
  top: .7em;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  border: none;
  display: none;
}

.newTabContainer{
  display: none;
}

.sample-tab-name{
  opacity: 0;
}

.colorCustomizationContainer {
  margin-bottom: 20px;
}

.colorPickerGroup{
  display: flex;
  gap: 1em;
}

.colorPickerGroup label {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  font-size: 12px;
  margin-top: 1.2em;
  justify-content: center;
  align-items: center;
}

.colorPickerGroup input[type="color"] {
  width: 25px;
  margin-top: .5em; 
}


/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.expandStoreInfoContainer{
  filter: brightness(0) invert(1);
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 48%;
  right: 0;
  bottom: .8em;
  z-index: 10;
  cursor: pointer;
}

.expandContainerInformationIcon {
  transition: transform 0.5s ease;
}

.flipped {
  transform: rotate(180deg);
}


.expandedStoreInfo{
  opacity: 0;
}

.storeNavContent{
  display: flex;
  /* justify-content: space-between; */
  flex-direction: column;
  padding: 1.6em 2em;
}

.storeNavRight{
  position: absolute;
  margin-top: 1.5em;
  /* margin-left:5.3em; */
  right: 2em;
}

.noteToStoreOwnerAboutInfo{
  display: none;
  font-size: 12px;
  position: relative;
  margin-top: 1em;
  line-height: 15px;
  color: #c1c1c1;
}

.storePublicAddress{
  margin-top: .3em;
  margin-bottom: -.7em;
  font-size: 12px;
  color: #d28c30;
  position: relative;
  display: flex;
  align-items: center;
}

.storePublicAddress img{
  position: relative;
}

.specialRequestsTitleTag{
  font-size: 13px !important;
}

.storeFeedMainHeader{
  font-family: "Inter", sans-serif !important;
  font-size: 20px;
}

.textAreaSpecialRequests{
  height: 100px !important;
  text-indent: 0 !important;
  padding-top: .2em !important;
  padding-left: .5em !important;
  padding-right: .5em !important;
  padding-bottom: .5em !important; /* Add bottom padding if necessary */
}

.storeNavRight{
  display: flex;
  gap: 1em;
}

.storeFeedSubHeader{
  font-size: 13px;
  color: #9da9d7;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  /* margin-top: 2.5em; */
}

.storeFormatting{
  display: flex;
  justify-content: start;
  gap: .9em;
}

.product-list{
  display: flex;
  flex-wrap: wrap;
}

.product-tab-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
  justify-content: start;
}

.store-product{
  width: 100px;
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.313);
  align-items: center;
}

.store-product img{
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.store-product{
  margin-top: 1.3em;
  outline: 1px solid #375597;
  border-radius: 2px;
  padding-bottom: .7em;
  cursor: pointer;
  position: relative;
  transition: all .2s ease-in-out;
  top: 0;
}

.store-product:hover{
  top: -.3em;
  transition: all .2s ease-in-out;
}

.store-product p{
  margin-top: .7em;
  margin-bottom: .2em;
}

.store-product p, .store-product span{
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}

.store-product span{
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: .3px;
}

.addNewProduct{
  min-height: 77px;
  display: flex;
  justify-content: center;
  cursor: pointer;

}

.addNewProduct p{
  font-size: 40px;
  font-weight: bold;
  color: #6f91d8;
  margin-top: 0.3em;
  cursor: pointer;
}

.storeFeedSubHeader{
  position: relative;
}

.storeViewAll{
  position: absolute;
  right: 0;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

.storeEditModule h1 {
  font-family: 'Inter', sans-serif !important;
  cursor: pointer;
}

.category-list{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
  margin-top: 1.3em;
}

.store-category{
  width: auto;
  height: auto;
  line-height: 40px;
  outline: 1px solid #375597;
  text-align: center;
  padding: 0em .9em;
  border-radius: 3px;
  background: #0d2c5c;
  cursor: pointer;
  position: relative;
  top: 0;
  transition: all .2s ease-in-out;
}

.store-category:hover{
  top: -.3em;
  transition: all .2s ease-in-out;
}

.store-category span{
  text-transform: uppercase;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px;
  font-weight: bold;
}

.addNewCategory{
  background: transparent;
  cursor: pointer;
}

/* -- Pink Theme Start -- */
/* .storeFrontContainer{
  outline: 1px solid #88468fc5;
}

.bakeryFrame{
  background: rgb(78,30,73);
  background: linear-gradient(180deg, rgba(78,30,73,1) 0%, rgba(24,26,39,1) 100%);
}

.storeNavigation{
  background: rgb(78,30,73);
  background: linear-gradient(180deg, rgba(78,30,73,1) 0%, rgba(24,26,39,1) 100%);
}

.userStoreAlerts{
  outline: 1px solid #602666;
}

.storeFeedSubHeader{
  color: #ffffff;
}

.store-product{
  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.313);
  outline: 1px solid #66286d;
}

.store-category{
  outline: 1px solid #66286d;
  background: rgb(74 10 81);
} */

.bakeryStorySettings {
  background: #0a1a28;
  height: 500px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0em;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

.pointerEvents{
  pointer-events: auto;
}

.closeBakerySettings{
  width: 45px;
  height: 4px;
  border-radius: 70px;
  background: #4a515e;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 1em;
}

.popupSettings{
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
}

.notificationFeed{
  /* max-height: 338px; */
  /* overflow: hidden; */
}

.settingsList ul{
  list-style: none;
}

.settingsList ul li:first-child{
  margin-top: .8em;
}

.settingsList ul li{
  text-align: center;
  font-size: 50px;
  text-transform: uppercase;
  font-family: "bebas neue", sans-serif;
  margin-bottom: .3em;
  cursor: pointer;
  transition: .2s ease-in-out;
}

.settingsList ul li:hover{
  color: #fbae4b;
}

.hoverArrow{
  display: none;
}

.settingsList ul li:hover .hoverArrow{
  display: inline-block;
}

.popupSettings h3{
  font-family: "Inter", sans-serif;
  font-family: 500;
  text-align: left;
  align-self: start;
  font-size: 18px;
}

.notificationsNav h3{
  position: relative;
  display: flex;
  width: 100%;
  justify-content: start;
  align-items: center;
  gap: .7em;
  margin-left: 2.42em;
}

.notificationsNav h3 span{
  font-size: 14px;
  color: #197ad5;
  position: relative;
  top: .1em;
  cursor: pointer;
}

.dayDivider{
  align-self: start;
  text-indent: 3.1em;
  line-height: 50px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  background: #0e225b;
  height: 50px;
  width: 100%;
  font-size: 14px;
  margin-top: 1em;
}

.storeOwnerName{
  margin-top: .3em;
  font-weight: 500;
  font-family: "Inter";
  font-size: 13px;
}

.recentStoreChanges{
  margin-top: .6em;
  font-weight: 500;
  font-family: "Inter";
  color: #92aad6cc;
  font-size: 13px;
  max-width: 90%;
  line-height: 18px;
}

.spaceFiller{
  width: 100px;
  height: 100px;
  outline: 1px solid red;
}

.bakeryNotificationContainer{
  background: #0a1a28; 
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  padding: 0 2.8em;
  padding-bottom: 1em;
  padding-top: 0.5em;
  border-bottom: 1px solid #17316a;
  position: relative;
}

.bakeryNotificationContainer:hover{
  background: #0c1f30;
}

.bakeryNotificationContainer::before{
  content: "";
  width: 100%;
  height: 1px;
  background: rgb(0, 0, 0);
  left: 0;
  bottom: 0;
  position: absolute;
}

.notificationsText{
  margin-top: 1em;
  margin-bottom: .5em;
}

.notificationTimestamp{
  font-size: 12px;
  position: absolute;
  right: 2em;
  top: 1em;
  color: #969696d3;
  font-family: "Inter", sans-serif;
}

.itemModified{
  color: #197acf;
}

.settingsNav, .notificationsNav{
  display: none;
}

.productPageNav{
  margin-top: 0em;
  /* margin-bottom: 1.5em; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subHeaderCategoriesH{
  margin-top: 2em;
}

.deleteSingleProductOwnerView{
  font-size: 14px;
  color: #ffffff;
  background: #692727;
  padding: .5em .7em;
  border-radius: 2px;
  cursor: pointer;
}

.editActiveProduct{
  font-size: 14px;
  color: #ffffff;
  background: #296927;
  padding: .5em .7em;
  border-radius: 2px;
  cursor: pointer;
  margin-left: 5em;
}

.previousPage, .exitTabGroup, .returnToHomeScreen{
  outline: 1px solid #375597;
  border-radius: 60%;
  height: 34px;
  width: 34px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-family: "Inter";
  line-height: 33.5px;
  transform: scale(1.1);
  margin-top: .5em;
  cursor: pointer;
}

.exitTabGroup{
  display: none;
  margin-bottom: 1em;
}

/* Refreshed Products Design */
.storeFeedSubHeader{
  margin-bottom:1.5em;
}

.store-product{
  margin-top: 0em;
  outline: none !important;
  box-shadow: none !important;
}

.store-product img{
  border-radius: 12px;
  height: 100px;
  width: 100px;
}

.addNewProduct{
  outline: rgb(55, 85, 151) solid 1px !important;
    height: 100px;
    width: 100px;
    border-radius: 12px;
    padding-bottom: 0px !important;
}

.storeFormatting{
  gap: .9em;
}

/* Refresh Products Design End */

.returnToHomeScreen{
  margin-bottom: 1em;
}

input[type='datetime-local']::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
  margin-left: -20px; /* Adjust as needed */
  width: 20px; /* Adjust as needed */
  height: 20px; /* Adjust as needed */
}

input[type='datetime-local']::-webkit-inner-spin-button,
input[type='datetime-local']::-webkit-clear-button {
  display: none;
}

input[type='datetime-local'] {
  background-color: transparent; /* Make input background transparent */
  color: white; /* Set text color to white */
  /* Additional styling to ensure the input text and icons are visible on a dark background */
}

.getCurrentDate{
  padding-right: 1em;
}

.tabGroupDescription{
  font-size: 12px;
  margin-top: .7em;
  color: #cfcfcf;
  line-height: 15px;
}

.categoryTypeTab, .tabProductPrice{
  display: none !important;
}

.productPageImageView{
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.productPageImageView h4{
  font-weight: bold;
  font-size: 23px;
  margin-top: 1.5em;
  font-family: "Inter", sans-serif;

}

.productPageImageView img{
  border-radius: 10px;
  min-height: 230px;
  max-height: 230px;
  object-fit: cover;
  /* object-position: top center; */
}

.productPagePrice{
  font-weight: 500;
  font-family: "Inter", sans-serif;
  margin-top: .5em;
}

.productDeliveryStatus{
  margin-top: 1em;
  font-size: 14px;
  display: flex;
  justify-content: start;
  gap: 1em;
}

.productDescriptionView{
  margin-top: 1em;
  font-size: 14px;
  line-height:20px;
}

.productCustomizeDesc{
  margin-top: 1em;
  font-size: 14px;
  line-height:20px;
}

.productCheckoutOptions button{
  background: #fbae4b;
  width: 135px;
  height:40px;
  border: none;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  border-radius: 2px;
  border: none;
  /* border: 1px solid #b2cfe3; */
}

/* .productCheckoutOptions button::before {
  border-radius: 2px;
  content: "";
  position: absolute;
  left: .3em;
  top: .3em;
  width: 100%;
  height: 100%;
  border: 1px solid #ffffff;
  transition: .2s ease-in-out;
} */

.productCheckoutOptions button:hover::before {
  left: 0em;
  top: 0em;
}

.productCheckoutOptions{
  display: flex;
  justify-content: center;
  margin-top: 2.5em;
}

.productFilterList ul{
  margin-top: 1em;
  list-style: none;
}

.productFilterList ul li{
  width: 100%;
  height: 40px;
  text-indent: 15px;
  background: #091a28;
  font-size: 14px;
  color: #d8d8d8;
  margin-bottom: .4em;
  line-height: 40px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: .2s ease-in-out;
}

.productFilterList ul li:not(.productFilterMenuBtn):hover{
  background: #1b405f;
  transition: .2s ease-in-out;
}

.productFilterList ul li svg{
  transform: scale(1.4);
  position: absolute;
  right: 1em;
  top: 1em;
  padding-left: .3em;
  border-left: 1px solid #d8d8d842;
}

.productFilterOption{
  display: none;
  opacity: 0;
}

.productFilterHeader{
  margin-top: 2em;
  font-size: 14px;
  margin-bottom: -.5em;
}

.customMessageCake{
  margin-top: 1.5em;
  width: 100%;
  height: 35px;
  text-indent: 15px;
  background: #091a28;
  border: none;
  border-radius: 2px;
  outline: 1px solid #3f4f63;
  color: #d8d8d8;
}

.customMessageCake::placeholder{
  color: #d8d8d8;
}

.customerFormStyle, .customerFormStyles{
  margin-top: 1.5em;
  width: 100%;
  height: 35px;
  text-indent: 15px;
  background: #081825;
  border: none;
  border-radius: 6px;
  outline: 1px solid #3f4f63;
  color: #d8d8d8;
}

.customerFormStyle::placeholder, .customerFormStyle::placeholder{
  color: #dedede72;
}

.customProductView{
  max-height: 1000px;
}

.storeNavigation{
  overflow: auto;
}

/* Apply the custom scrollbar style to all scrollable elements */
::-webkit-scrollbar {
  width: 6px; /* Adjust the width as desired */
}

::-webkit-scrollbar-track {
  background-color: #0d1925; /* Set the background color */
}

::-webkit-scrollbar-thumb {
  background-color: #183b70; /* Set the thumb color */
  border-radius: 3px; /* Adjust the border radius as desired */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #0d47a1; /* Set the thumb color on hover */
}

.customerInformationView .productFilterHeader{
  margin-bottom: -.5em;
}

.customerInformationView input{
  margin-bottom: -1em;
}

.customerOrderReview {
  /* padding: 20px; */
  /* background-color: #252d3a; */
  color: #fff;
}

.productPageNav {
  margin-bottom: 20px;
}

.productCustomizeDesc {
  font-size: 16px;
  margin-bottom: 20px;
}

.productCheckoutOptions {
  text-align: right;
}

.orderDetails {
  margin-bottom: 40px;
  border: 1px solid #ccc;
  padding: 20px;
  background-color: #1a2231;
}

.orderDetails h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #fff;
}

.orderDetails ul {
  list-style-type: none;
  padding: 0;
}

.orderDetails ul li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #cdd4e0;
}

.orderDetails ul li strong {
  font-weight: bold;
  color: #fff;
}

.customerInformation {
  margin-top: 20px;
}

.customerInformation h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ffffff;
}

.customerInformation ul {
  list-style-type: none;
  padding: 0;
}

.customerInformation ul li {
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.customerInformation ul li strong {
  font-weight: bold;
  color: #fff;
  margin-right: .5em;
}

.customerInformation ul li span {
  color: #c2c2c2;
}

.orderPlacedAnimation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: white;
  margin-top: 10em;
}

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

.circle {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  margin: 5px;
  animation: pulseAnimation 1s infinite ease-in-out;
}

.circle-1 {
  animation-delay: 0s;
}

.circle-2 {
  animation-delay: 0.2s;
}

.circle-3 {
  animation-delay: 0.4s;
}

@keyframes pulseAnimation {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}

.progressBar {
  width: 80%;
  height: 10px;
  background-color: white;
  border-radius: 15px; /* Add this line to set the border radius */
  margin-top: 1em;
  margin-bottom: .5em;
}

.progress {
  border-radius: 15px;
  width: 0;
  height: 100%;
  background-color: #007bff;
  animation: progressBarAnimation 3s ease-in-out;
}

@keyframes progressBarAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.loadingText {
  margin-top: 10px;
  font-weight: bold;
}

.returnHomeBtn{
  opacity: 0;
  font-size: 20px;
  margin-top: 7em;
}

.newAddInstruc{
  font-size: 14px;
  text-align: left;
  color: #e1e1e1;
}

.subPageForms{
  /* margin-top: 1.5em; */
}

.subPageTitleHeaders{
  margin-top: 1em;
  font-size: 14px;
  margin-bottom: -.5em;
}

.ownerAddNewView{
  position: relative;
  z-index: 10000;
  /* display: block !important; */
}

.ownerAddNewView h3{
  margin-top: 1em;
}

.category-dropdown {
  margin-top: 10px;
}

.add-category-input {
  margin-top: 5px;
}

.category-dropdown, .ingredient-dropdown {
  background-color: transparent;
  width: 100%;
  margin-top: 1.5em;
  height: 35px;
  padding: 0 11px;
  border-radius: 2px;
  outline: none;
  border: 1px solid #3f4f63;
  color: #d8d8d8;
}

.category-dropdown option, .ingredient-dropdown option {
  background-color: #fff; /* Specify the background color of the options */
  color: #333; /* Specify the text color of the options */
}

.add-ingredient-input{
  margin-top: 5px;
}

.option-container {
  margin-bottom: 20px;
}
.option-input {
  margin-bottom: 10px;
}
.add-option-button {
  margin-top: 10px !important;
  margin-right: 6px !important;
}

.noPadding{
  margin-top: 10px;
  margin-bottom: 0;
}

.optionTitleText{
  margin-top: 1em;
  font-size: 14px;
  margin-bottom: .5em;
}

.customQuestionDesc{
  font-size: 14px;
  margin-top: 1em;
}

.customQuestionBtn, .duplicatePreviousEntries{
  background: transparent;
  color: #d8d8d8;
  font-size: 14px;
  border: none;
  width: 160px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #3f4f63;
  margin-top: -0em;
  margin-bottom: 0;
}

.addNewVariantBtn, .duplicatePreviousEntries{
  position: relative;
  top: .8em !important;
}

#previewImage{
  display: flex;
  margin: 0 auto;
  margin-top: 1em;
}

#tooltip {
  position: absolute;
  display: none;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-top: -230px;
}

.announcementFAQ{
  font-size: 12px;
  color: #d8d8d8d8;
  line-height: 16px;
}

.store-product .productClickedDescription{
  display: none !important;
}

#productList .productViewCategoryType, #allProductsList .productViewCategoryType{
  display: none !important;
}

.customerAllProductsView .addNewProduct{
  display: none !important;
}

.productViewAddonsAvailable, .productViewCategoryType{
  background: rgb(53 67 109);
  padding: 0.5em 1em;
  border-radius: 2px;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 12px;
}

.productFiltersTextStyling{
  background: rgb(53 67 109);
  padding: 0.5em .9em;
  border-radius: 2px;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 12px;
}

.customerAllProductsView .store-product{
  display: inline-block;
  text-align: center;
  margin-right: 0.6em;
}

.storeMiniHeaderDesc{
  font-size: 14px;
  color: #9da9d7;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  margin-top: 2.5em;
}

.subPageSettingsOptions h3{
  margin-top: 2em;
  margin-bottom: -1.5em;
}

.basicInformationField{
  display: flex;
  justify-content: space-between;
}

.infoField{
  display: flex;
  flex-direction: column;
  max-width: 50%;
  gap: .5em;
  margin-top: 1em;
}

.storeDescriptionContainer .infoField{
  width: 100%;  
  max-width: 100%;
}

.storeDescriptionContainer .infoField textarea{
  height: 50px;
  background: #27438f;
  outline: 1px solid #5671b9;
  color: #ffffff;
  border: none;
  text-indent: 8px;
  padding: 7px 0px;
}

.infoField span{
  font-size: 14px;
  color: #e0e6f3;
}

.infoField input{
  border: none;
  /* height: 30px; */
  background: #27438f;
  outline: 1px solid #5671b9;
  color: #ffffff;
  text-indent: 8px;
  padding: 7px 0px;
}

.storeConfigurationBtns{
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

.storeConfigurationBtns button{
  width: 100px;
  height: 40px;
  border: none;
  background: #333;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.storeConfigurationBtns button:first-child{
  background: transparent;
  color: #ffffff;
}

.storeConfigurationBtns button:last-child{
  background: #fbae4b;
  color: #000;
  font-weight: 500;
}

.highlighted {
  color: red; /* Change the color to make it noticeable */
}

select {
  appearance: none;
  background-color: #2C3E50;
  border: none;
  color: #FFFFFF;
  padding: 5px;
  font-size: 16px;
  width: 200px;
  border-radius: 4px;
  text-indent: 5px;
  position: relative;
  cursor: pointer;
  background-image: url('../images/down-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
}

select option {
  background-color: #34495E;
  color: #FFFFFF;
}

.settingsDropDownContainer{
  margin-top: 2em;
}

.storeSettingsInfoFields .infoField{
  max-width: 100%;
}

.storeSettingsInfoFields .basicInformationField{
  display: inline;
}

.settingsExplanationText{
  color: #b0b0b0 !important;
  font-size: 12px !important;
}

.storeSettingsInfoFields input::placeholder{
  /* color: #a2a9b4 !important; */
}

.publicButton{
  background: #1b7e7e;
  color: #b2fcfc;
  font-weight: bold;
  width: 100px;
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  margin-right: 1em;
}

.pageButtonInactive{
  background: #2c2c2c !important;
  color: #989898 !important;
  font-weight: bold;
  width: 100px;
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  margin-right: 1em;
}

.storeOnline{
  background: #1b7e7e;
  color: #b2fcfc;
  font-weight: bold;
  width: 100px;
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 3px;
  margin-right: 1em;
}

.storeOffline{
  background: #7e1b56;
  color: rgb(74, 21, 61);
  font-weight: bold;
  width: 100px;
  height: 40px;
  font-size: 16px;
  border: none;
  border-radius: 3px;
}

.storeWebsiteURL {
  color: #999;
  width: 100%;
  text-indent: 87px !important;

}

.storeWebsiteURL:focus {
  /* color: #000; */
}

.inputContainer {
  position: relative;
  display: inline-block;
}

.staticText {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: #545454;
  pointer-events: none;
}

.storeWebsiteURL {
  padding-left: 120px;
}

.LookupPastOrders, .cancelCurrentOrder, .returnBackToHomeMainPage{
  height: 40px;
  margin: 0 auto;
  text-align: center;
  align-self: center;
  justify-self: center;
  margin-top: 2em;
  background: transparent;
  color: #ffffff;
  border: none;
  border-radius: 2px;
  font-family: "Inter";
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
}

.pastOrdersContainer{
  display: flex;
  flex-direction: column;
  text-align: center;
}

.orderTemplateContainer{
  outline: rgb(55, 85, 151) solid 1px;
  border-radius: 4px;
  margin-top: 1em;
  padding: 1em;
  cursor: pointer;
  transition: .1s ease-in-out;
}

.orderTemplateContainer:hover{
  transition: .1s ease-in-out;
  outline: #fbae4b solid 1px;
}

.orderProgressStatus{
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 14px;
}

.orderProgressTextUpdate{
  display: flex;
  flex-direction: column;
  gap: .2em;
}

.statusLargeText{
  font-size: 16px;
}

.viewFullPastOrder{
  margin-left: auto;
}

.quickOrderTab{
  display: flex;
  gap: .3em;
}

.orderQuickInfoTab{
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  font-size: 14px;
}

.orderProgressTextUpdate span:first-child{
  color: #ccccccd0;
}

.orderProgressTextUpdate span:not(:first-child){
  color: #f0f0f0;
}

.orderIconStatus img:not(.timerDateEst){
  filter: brightness(0) invert(1);
}

.order-summary {
  background-color: #2b498fa3;
  outline: 1px solid #375597;
  padding: 20px;
  margin-bottom: 20px;
  margin-top: 2em;
}

.order-summary h2 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #d7d7d7;
}

.order-summary table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.order-summary th,
.order-summary td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #1e1e1e;
  color: #d7d7d7;
}

.order-summary th {
  font-weight: bold;
}

.order-summary td:last-child {
  text-align: right;
}

.order-summary .timestamp {
  font-style: italic;
  color: #9e9e9e;
}

.deleteProductConfirmationBox{
  width: 320px;
  height: 90px;
  padding: 1em;
  border-radius: 2px;
  background: #212121;
  color: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1em;
  position: absolute;
  top: 20em;
  display: none;
}

.deleteConfirmOptions{
  display: flex;
  justify-content: center;
}

.deleteConfirmOptions button{
  width: 80px;
  height: 30px;
  margin-right: 1em;
  border: none;
  outline: none;
  color: #ffffff;
}

.deleteConfirmOptions button:first-child{
  background: rgb(128, 0, 64);
}

.deleteConfirmOptions button:last-child{
  background: green;
}

    /* Styles for the custom options */
    .btmRow .customOptions {
      display: flex;
      flex-direction: column;
      margin-top: 10px;
  }

  .btmRow .customOptions .option {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-size: 12px;
  }

  .btmRow .customOptions .question {
      font-weight: bold;
      margin-right: 10px;
  }

  .btmRow .customOptions .option span {
      color: #555;
  }

/* -- Store Design End -- */
/* .pageView, .subPage{
  display: none;
}

.pageView:not(.storeHomeContent){
  display: none;
} */

/* .subPage:not(.ownerAddNewView){
  display: none;
} */

.subPage, .pageView:not(.storeHomeContent){
  display: none;
}

/* Styles for the popup */
.unique-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 99999999999;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* Style for buttons */
#unique-print-summary, #unique-print-barcode {
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
}

/* Unique IDs for buttons */
#unique-print-summary {
    background-color: #007bff; /* Blue button color */
    color: white;
    border: none;
    cursor: pointer;
}

#unique-print-barcode {
    background-color: #28a745; /* Green button color */
    color: white;
    border: none;
    cursor: pointer;
}

.hideBarCodePrint{
  opacity: 0;
}

#printOrderDetailsSummary{
  position: relative;
  top: -.2em;
  background: #005aa1;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 3px;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
}

.login-portal h1{
  font-size: 50px;
  color: #f2f2f2;
}

.login-portal p{
  font-size: 15px;
  color: #e5e5e5;
  max-width: 700px;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 3em;
}

.url-container {
  position: relative;
}

.url-prefix {
  position: absolute;
  pointer-events: none;
}

.hidden {
  display: none;
}

#error-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f4f4f4;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 100;
}

.phoneShotsSideBySide{
  display: flex;
  flex-direction: column;
}

.phoneShotsSideBySide img:first-child{
  position: relative;
  z-index: 10;
}

.phoneShotsSideBySide img:last-child{
  position: absolute;
  margin-left: 10em;
  margin-top: 5em;
}

@media only screen and (max-width: 650px){
  .bakeryFrame{
    padding-top: 0em;
    height: 100vh;
  }
  .storeFrontContainer, .storeNavigation{
    width: 100vw !important;
    border-radius: 0px;
    height: 100%;
  }
}

.customizeSelectedProduct{
  color: #000 !important
}

.homepageAuthBtns{
  color: #f9f9f9;
}

.subscribeForMore{
  background: rgb(41, 121, 27);
  color: #ffffff;
  padding: 1em 0;
  text-indent: 3.65em;
  /* display: none; */
}

.subscribePage{
  text-decoration: underline;
  cursor: pointer;
}

.hideSubOptions{
  display: none !important;
}

.store-closed{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 99;
  color: #FFFFFF;
  /* display: none; */
}

.store-closed h1{
  position: absolute;
  top: 5em;
  left: 2.5em;
  color: #fff;
  z-index: 99999999999;
  margin-top: 0em;
  margin-bottom: 0;
}

.productCheckoutOptions{
  padding-bottom: 10em;
}

.msfguk{
  display: none !important;
}

.customerPastOrdersBtn{
  /* margin-top: .7em; */
}

.dataInfoCount h1{
  margin-bottom: 0px !important;
}

.addProductInstructions{
  font-size: 13.5px;
  margin-top: 0.4em;
  line-height: 18px;
  color: #cccccc;
}

.dropdownNewInstruc{
  margin-top: 3em;
  font-size: 14px;
}

/* .customProductView{
  display: block !important;
} */

.deliveryTitleOptional{
  background: #0c4925;
  padding: 1em 2em;
  margin-top: 3em;
  margin-bottom: -1em;
  text-align: center;
  font-size: 14px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    width: 30px;  /* Adjust width */
    height: 30px; /* Adjust height */
    background-size: contain;
}

/* Change color of date picker icon */
/* Change color of date and time picker icons to white */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(100%);
}

.setDeliveryDate{
  display: none;
}

.readonly-input {
  color: #8b8b8b;
  background-color: #2c2c2c;
  cursor: not-allowed;
}

.websiteServerStatus{
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: -.7em; */
  gap: .5em;
  /* margin-bottom: .7em; */
  top: .7em !important;
  z-index: 15;
}

.websiteServerStatusIcon{
  width: 12px;
  height: 12px;
  background: rgb(99 195 99);
  border-radius: 60px;
}

.storeURLAddress{
  color: #999999;
  font-size: 13px;
  cursor: pointer;
  margin-top: -.07em;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  /* display: flex;
  justify-content: center; */
}

.accountStatusType{
  text-transform: uppercase;
  font-size: 10px;
  background: #0f1f29;
  color: #0099ff;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  padding: .3em .5em;
  cursor: pointer;
}

/* Mobile view friendly order management */
@media only screen and (max-width: 650px){
  .mainPage{
    flex-direction: column;
  }
  .navbar{
    min-height: 67px;
    height: auto;
    flex-wrap: wrap;
  }
  .hideOnMobile{
    display: none !important;
  }
  .totalOrdersPanel{
    flex-direction: row;
    /* width: 150px; */
  }
  .globalSideBar {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-left: 1em;
}

.ordersInfoSubSection {
  display: flex;
  gap: 0em;
  align-items: center;
}

.dataInfoImage{
  transform: scale(0.8);
  position: relative;
  left: -.5em;
  /* display: none !important; */
}

.totalOrdersPanel{
  gap: 0.5em;
  margin-top: -1em;
}

.findOrdersSearch{
  display: none !important;
  align-items: baseline;
  gap: 0.5em;
  justify-content: center;
}

.dailyNumbers{
  /* margin-left: 1em; */
  margin: 0 auto;
  margin-right: 2.5em;
  box-sizing: border-box;
  /* padding-top: 1.7em; */
  margin-bottom: 1.5em;
  height: 105px;
}

.dailyOrders, .dailyOverdue{
  text-align: center;
}

.mainPageData{
  width: 83%;
}

.ordersPageTable tbody{
  display: flex;
  flex-direction: column;
}

.ordersPageTable td{
  padding: 1em 0;
  padding-left: .5em;
  font-size: 16px;
}

.ordersPageTable td{
  border-bottom: none;
}

.ordersPageTable td span{
  top: 3.1em;
}

.printBatchBtn{
  display: none !important;
}

.viewPrintOrder{
  margin-left: 1.6em;
  margin-top: 1em;
}

.newOrderModule{
  width: 100%;
}

.deleteOrderBtn{
  display: none;
}

.orderViewMiniProfile {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin-top: 0em;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 9px;
  z-index: 99;
  display: none;
  padding-bottom: 3em;
}

.printBtn{
  display: none !important;
}

.ordersSearchSection{
  padding: .3em 0;
}
}

/* Initially set the opacity to 0 */
.userLoginBtn {
  opacity: 0;
}
.userRegBtn{
  opacity: 0;
}
/* Add a class to change the opacity back to 1 */
.visibleLoginBtn {
  opacity: 1;
}

#imageInput{
  opacity: 0;
}

/* Premium Button */
.premiumBtn{
  background: #249a4b;
  height: 30px;
  padding: 0.1em 0.7em;
  border-radius: 4px;
  line-height: 30px;
  color: #fff !important;
  padding-top: 0.2em;
}
/* Premuim button end */

@media only screen and (max-width: 850px){
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  textarea {
      font-size: 16px;
  }
}

/* Add this CSS for the loader */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none; /* Initially hidden */
  z-index: 99999;
}

.loaders {
  position: absolute;
  left: 49%;
  top: 40%;
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  animation: spin 2s linear infinite;

  /* Center the loader */
  transform: translate(-50%, -50%);
  z-index: 103453534999953500; /* Above the overlay */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.productHuntLaunch{
  background: #4d48df;
  color: #ffffff;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.productHuntLaunch a{
  /* color: #8a50ef; */
}

@media only screen and (min-width: 395px) and (max-width: 650px) {
  .homeFeedStoreList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-right: -1.7em; /* Negative margin to offset the item margins */
  }
  
  .store-product {
    margin-right: .7em; /* Spacing between items */
    left: .25em;
    /* Add other styles for your product */
  }
  
  .store-product img {
    width: 112px;
    height: 112px;
    object-fit: cover;
  }

  .navigation {
    display: flex; /* Make .navigation a flex container */
    flex-wrap: wrap; /* Allow flex items to wrap onto multiple lines */
    align-items: center; /* Center align the flex items vertically */
}

.navigationList {
    display: flex; /* Make the list a flex container to align list items in a row */
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove default padding */
    margin-right: auto; /* Push everything after the list to the right */
}

.logo, .navigationList li, .loginBakeryBtn, .createBakery {
    margin: 5px; /* Add some margin around items for spacing */
}

/* If you want the buttons always to be on the next line regardless of the container width */
.loginBakeryBtn, .createBakery {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
}
.link-container{
  transform: scale(0.5) !important;
}
}

.productPriceOnly{
  display: none;
}

.store-product{
  background: none !important;
}

.special-tabs ul{
  overflow-x: auto !important;
  padding: .5em;
  padding-left: .2em;
}