/* Custom css starts from here */

/* Material Symbols - Using CDN (self-hosted was incomplete) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Style guide css */

:root {
/* Primary colors */
--primary-color: #328678;
--secondary-color: #009fff;
--light-dark-blue:rgba(177, 200, 255, 0.47);
--Primary-Dark-Mud: #403E3E;
--Secondary-Menu-Text:#403E3E;
--dark-gray-font: #666666;
--secondary-light-primary-color-10:rgb(177 200 255 / 10%);
--light-blue: rgb(177, 200, 255);
--bs-light-blue: #B1C8FF77;
--bs-mid-blue: #3776EC;
--bs-purple: #AF92FF;
--bs-peach: #FFB1A0;
--bs-magenta: #B22873;
--bs-pink: #FF5BAA;
--bs-yellow: #FFCF4B;
--bs-green: #58B848;
--bs-white: #FFFFFF;
--bs-black: #000000;
--bs-cloud: #F8F9FA;

/* Secondary colors */

--gradient-magenta: linear-gradient(0deg, rgba(236, 89, 52, 0.30) 0%, rgba(236, 89, 52, 0.30) 100%), rgba(63, 32, 185, 0.30);
--gradient-blue: linear-gradient(0deg, #B1C8FF 0%, #B1C8FF 100%);
--gradient-purple: linear-gradient(0deg, #AF92FF 0%, #AF92FF 100%);
--gradient-light-purple: linear-gradient(0deg, rgba(175, 146, 255, 0.50) 0%, rgba(175, 146, 255, 0.50) 100%);
--gradient-orange: linear-gradient(0deg, #FFB1A0 0%, #FFB1A0 100%);

/* Background colors */

--bs-gray: #6c757d;
--bs-background: #F0F2F5;
--bs-snow: #E9EAED;
--bs-medium-grey: #DEE2E8;
--bs-dark-snow: #C7CCD0;
--bs-dark-mud: #4F4F52;
--bs-dark-black: #191919;
--Menu-Back-Ground: #EBECEC;
--Page-Background:#FEF8F9;

/* Button and status color */

--bs-primary: #e91e63;
--bs-secondary: #7b809a;
--bs-success: #4CAF50;
--bs-info: #1A73E8;
--bs-warning: #fb8c00;
--bs-danger: #F44335;
--bs-light: #f0f2f5;
--bs-dark: #344767;
--bs-white: #fff;
--bs-primary-rgb: 233, 30, 99;
--bs-secondary-rgb: 123, 128, 154;
--bs-success-rgb: 76, 175, 80;
--bs-info-rgb: 26, 115, 232;
--bs-warning-rgb: 251, 140, 0;
--bs-danger-rgb: 244, 67, 53;
--bs-light-rgb: 240, 242, 245;
--bs-dark-rgb: 52, 71, 103;
--bs-white-rgb: 255, 255, 255;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-rgb: 123, 128, 154;
--bs-font-sans-serif: "Roboto", Arial, sans-serif;
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

/* Body default styles */

--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #7b809a;
--bs-body-bg: #fff; }

h1, h2, h3, h4, h5, h6{font-family: "Montserrat", Arial, sans-serif;font-weight: 700;font-style: normal;line-height: normal;}
h1{font-size: 32px;}
h2{font-size: 24px;}
h3{font-size: 20px;}
h4{font-size: 18px;}
h5{font-size: 16px;}
body {overflow-x: hidden;background: var(--Page-Background)!important;}
p, p.body-text, .body-text, p span {font-family: "Roboto", Arial, sans-serif;font-size: 14px;font-style: normal;font-weight: 400;line-height: 1.5;color: var(--Primary-Dark-Mud) !important;}
p.body-text-small, .body-text-small {font-family: "Roboto", Arial, sans-serif;font-size: 12px;font-style: normal;font-weight: 400;line-height: 1.5;}
a{color: var(--primary-color)}
ol{padding-left: 16px;}
td, .table-text {font-family: "Roboto", Arial, sans-serif;font-size: 10px;font-style: normal;font-weight: 400;line-height: 1.5;}
.table-text-small {font-family: "Roboto", Arial, sans-serif;font-size: 8px;font-style: normal;font-weight: 400;line-height: 1.5;}
button, .button-text{font-family: "Roboto", Arial, sans-serif;font-size: 12px;font-style: normal;font-weight: 400;line-height: normal;text-transform: uppercase;}
button.delete-button {padding: 0.37rem 1rem;}
select:focus, input:focus, textarea:focus {border: none;outline: none;box-shadow: unset!important;}
.font-body{font-size: 14px;}

/* BG */
.linear-background{
  background: linear-gradient(90deg, #328678 0%, #009FFF 100%);}
.background-bg, .background-body{
  background: var(--Page-Background)!important;
  background-color: var(--Page-Background)!important;}
.menu-bg{
  background: var(--Menu-Back-Ground) !important;
  background-color: var(--Menu-Back-Ground) !important;}

/* Component styles */
.modal-title.text-primary-orange{
  font-size: 20px !important;}
.card-header .page-title{
  font-size: 36px !important;}
.text-primary-lg, .text-primary-blue-lg {
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 24px !important;font-weight: 400 !important;text-transform: none !important; }
.text-primary-lgs, .text-primary-blue-lgs {
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 20px !important;font-weight: 400 !important;text-transform: none !important; }
.text-primary-ll, .text-primary-blue-ll {
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 18px !important;font-weight: 400 !important;text-transform: none !important; }
.text-primary, .text-primary-blue {
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 16px !important;font-weight: 400 !important;text-transform: none !important; }
.text-primary-sl, .text-primary-blue-sl{
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 15px !important;font-weight: 400 !important;text-transform: none !important;}
.text-primary-ss, .text-primary-blue-ss{
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 14px !important;font-weight: 400 !important;text-transform: none !important;}
.text-primary-sm, .text-primary-blue-sm {
  color: var(--primary-color) !important;opacity: 1 !important;font-size: 12px !important;font-weight: 400 !important;text-transform: none !important; }
.text-secondary-lg, .text-primary-orange-lg {
  color: var(--secondary-color) !important;opacity: 1 !important;font-size: 32px !important;font-weight: 400 !important;text-transform: none !important; }
.text-secondary, .text-primary-orange {
  color: var(--secondary-color) !important;opacity: 1 !important;font-size: 16px !important;font-weight: 400 !important;text-transform: none !important; }
.text-secondary-sm, .text-primary-orange-sm {
  color: var(--secondary-color) !important;opacity: 1 !important;font-size: 12px !important;font-weight: 400;text-transform: none !important; }
.text-dark-lg, .text-primary-dark-mud-lg {  
  color: var(--bs-dark-mud) !important;opacity: 1 !important;font-size: 24px !important;font-weight: 400 !important; }
.text-dark, .text-primary-dark-mud {  
  color: var(--bs-dark-mud) !important;opacity: 1 !important;font-size: 14px !important;font-weight: 400 !important; }
.primary-text-dark{
  color: var(--bs-dark-mud) !important;opacity: 1 !important;font-size: 14px !important;}
.text-dark-sm, .text-primary-dark-mud-sm {
  color: var(--bs-dark-mud) !important;opacity: 1 !important;font-size: 10px !important;font-weight: 400 !important;}
.text-dark-mud{
  color: var(--bs-dark-mud) !important;opacity: 1 !important;font-size: 16px !important;font-weight: 400 !important;}
.text-dark-mud-ss{
  color: var(--bs-black) !important;opacity: 1 !important;font-size: 15px !important;font-weight: 400 !important;}
.text-dark-mud-sm{
  color: var(--bs-dark-mud) !important;opacity: 1 !important;font-size: 12px !important;font-weight: 400;}
.text-dark-snow, .text-primary-dark-snow {  
  color: var(--bs-dark-snow) !important;opacity: 1 !important;font-size: 14px !important;font-weight: 400 !important; }
.text-light {
  color: var(--bs-body-bg);opacity: 1 !important;font-size: 16px !important;font-weight: 400 !important; }
.text-gradient-blue {
  color: var(--gradient-light-purple) !important;opacity: 1 !important;font-size: 16px !important;font-weight: 400 !important; }

/* Button styles */
.btn-primary, .btn-primary-blue{
  background: var(--primary-color);
  color: var(--bs-body-bg);
  transition: 0.5s;color: #ffffff;
  background-color: var(--primary-color);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  line-height: 1;
  padding: 11px 15px;}
.btn-secondary, .btn-primary-orange{
  background: var(--secondary-color);
  color: var(--bs-body-bg);
  transition: 0.5s;color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  border: none;
  line-height: 1;
  padding: 11px 15px;}
.btn-secondary:hover, .btn-primary-orange:hover, .btn-secondary:active, .btn-primary-orange:active, .btn-secondary:focus, .btn-primary-orange:focus{
  background: var(--primary-color);
  color: var(--bs-body-bg);}
.btn-secondary-blue, .swal2-styled.swal2-confirm, .swal2-confirm{
  background: var(--bs-white);
  color: var(--primary-color);
  transition: 0.5s;
  background-color: var(--bs-white);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid var(--secondary-color);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
  line-height: 1;
  padding: 9px 15px;
  border-radius: 8px;}
.btn-secondary-blue:hover, .swal2-actions:not(.swal2-loading) .swal2-confirm:hover, .swal2-confirm:hover{
  color: var(--bs-white) !important;
  background: var(--primary-color);
  background-color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;}
.btn-secondary-white, .swal2-styled.swal2-cancel{
  background: var(--bs-white);
  color: var(--primary-color);
  background-color: var(--bs-white);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  line-height: 1;
  padding: 11px 15px;}
.btn-secondary-white:hover, .swal2-actions:not(.swal2-loading) .swal2-cancel:hover{
  color: var(--bs-white);
  background: var(--primary-color);
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-image: none !important;}
.button-row {
  justify-content: flex-end;
  column-gap: 10px;}
.btn-select-blue{
  background: linear-gradient(0deg, rgba(175, 146, 255, 0.50) 0%, rgba(175, 146, 255, 0.50) 100%) !important;
  padding: 12px 17px 12px 18px;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  border: unset;
}
.btn-select-white{
  border: 1px solid var(--gradient-light-purple);
  padding: 12px 15px 11px 19px;
  border-radius: 4px;
  color: var(--Primary-Dark-Mud);
  font-size: 12px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  border: unset;
}

.exp-black{
  background: var(--bs-black) !important;
  color: var(--bs-white) !important;
  background-color: var(--bs-black) !important;
  border: 1px solid var(--bs-black) !important;
}

.exp-custom{
  background: var(--secondary-color) !important;
  color: var(--bs-white) !important;
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;
}



/* datatable buttons */
button.dt-button {
  background: white !important;
  background-color: white !important;
  border: 1px solid var(--bs-dark-snow) !important;
  max-height: 34px;
  border-radius: 4px !important;
  padding: 7px 13px 7px 8px !important;
  font-size: 14px !important;
  color: #7b809a !important;
  text-transform: capitalize;
}
div.dt-button-collection .dt-button{
  border: none !important;
}

/* click dropdown */
.click-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: 150%;
  right: 0;
  z-index: 1000;}
.click-dropdown:focus-within .dropdown-menu,
.click-dropdown:active .dropdown-menu {
  display: block;}
.click-dropdown .dropdown-menu {
  min-width: 200px;}
button.btn.btn-primary-orange.plus-icon {
  border-radius: 4px !important;}
.button-row .btn-group ul.dropdown-menu.show{right: 50px !important;}
.dropdown .dropdown-menu:before{content: none!important;}

/* sweet alert */
.swal2-popup{
  padding: 0 0 2.25em !important;}
.swal2-confirm.swal2-styled:focus {
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25) !important;}
.swal2-icon.swal2-warning{
  border-color: var(--secondary-color) !important;
  color: var(--secondary-color) !important;}
.swal2-actions:not(.swal2-loading) .swal2-cancel:hover{
  background-image: var(--gradient-purple);}
/* #swal2-html-container {
    text-align: left;
    width: 80%;
    margin: 0 auto;} */

/* Button icons */
.btn-primary-orange.plus-icon, .btn-secondary.plus-icon{
  padding: 4px 5px;
  border-radius: 4px;}

/* icon button styles */
.icon-primary, .icon-primary-blue{
  color: var(--primary-color);
  margin-right: 20px;
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;}
.icon-primary:hover, .icon-primary-blue:hover{
  color: var(--secondary-color);}
.icon-secondary, .icon-primary-orange{
  color: var(--secondary-color);
  margin-right: 20px;
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;}
.icon-primary-orange a i{
  color: var(--secondary-color);
  /* margin-right: 20px; */
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;}
.icon-secondary:hover, .icon-primary-orange:hover{
  color: var(--primary-color);}
.dropdown-item:focus, .dropdown-item:hover{
  background-color: var(--bs-dark-snow); }
hr{
  margin: 0.5rem 0 !important;}
span.eye-icon{width: 35px!important;
  height: 44px;
  background: transparent;
  z-index: 999999;}

/* Table styles */
.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
  border-collapse: collapse;}
table#dynamicIngredients thead th.text-primary-orange, table#dtRecordsView thead th.text-primary-orange, table#nutrition-list thead th.text-primary-orange, table.search_table thead th.text-primary-orange, table#dtRecordsView-user thead th.text-primary-orange{
  color: var(--primary-color) !important;
  vertical-align: bottom;
  text-align: left;}
.table th{
  padding: 5px;
  vertical-align: bottom;
  background-color: transparent;}
.table td {
  padding: 5px;
  vertical-align: middle;
  background-color: transparent;}
.table td, .table-sm tbody th {
  font-size: 12px;
  color: var(--Primary-Dark-Mud);}
.table thead th {
  vertical-align: bottom;
  font-weight: bold;}
.table-bordered {
  border: 1px solid #dee2e6;}
table.units-price input[type="text"]{
  text-align: right;
}
.table-sm th,
.table-sm td {
  padding: 0.3rem;}
.table-sm th{
  font-size: 12px;}
tbody, td, tfoot, th, thead, tr{
  border-style: none;}
td, th, tr{
  border-bottom: 1px solid var(--bs-dark-snow);}
.th-top-align, .dataTable-table thead th {
  vertical-align: top !important;}
select.dataTable-selector {
  border-color: #f0f2f5;
  border-radius: 0.375rem;}
.dataTables_wrapper .dataTables_filter input{
  border: 1px solid var(--bs-dark-snow);}
table.dataTable thead th{
  text-align: left;}
table#dtRecordsView1, table.dataTable {
  width: 100% !important;
  max-width: 100%;
  /* min-width: 1200px; */
  table-layout: auto;
}
.dataTable th, .dataTable td {
  white-space: nowrap !important;
}
.table-responsiveness{
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 215px;

}
.table-scroll{
  min-height: calc(100vh);
}
/* .overflow-container{
  overflow-x: auto;
  overflow-y: hidden;
} */
table.table.search_table .search_table_row td,
table.table.search_table .search_table_row th {
  overflow: visible !important;
}
/* table.table.search_table .dropdown-menu {
  position: fixed !important;
  transform: none !important;
  z-index: 2147483647 !important;
  inset: unset !important;
  right: 50px !important;
} */
table.custom-wrap td{
  white-space: wrap !important;
}
.dropdown ul.dropdown-menu.prod{
  right: 0;
}
table.no-border tbody tr td, table.no-border tbody tr{border-bottom: none!important;}
/* .table-responsiveness::-webkit-scrollbar {
  display: none;}
.table-responsiveness {
  -ms-overflow-style: none;
  scrollbar-width: none;} */

/* Tooltip styles */
.custom-tooltip .tooltip-inner {
  background-color: var(--bs-cloud);
  color: var(--primary-color);
  border: 2px solid var(--secondary-color);
  white-space: normal;
}
.custom-tooltip .tooltip-arrow {
  background-color: var(--bs-cloud);
}
.custom-tooltip.admin-preference.tooltip{
  min-width: 500px;
}
.custom-tooltip.admin-preference.tooltip .tooltip-inner {
  max-width: 100%;
  text-align: left;
}

/* Form Styles */
label {
  margin-bottom: 0;}
.form-group {
  margin-bottom: 10px;}
input:not([readonly]), .quill-editor-wrapper .ql-toolbar, .quill-editor-wrapper .quill-editor, .ql-toolbar, #editor, select, textarea{background-color: var(--bs-body-bg) !important;}
input[readonly]{background: transparent !important;background-color: transparent !important;}
textarea[readonly]{background: transparent !important;background-color: transparent !important;}
input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="number"]{
  background-image: none;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-dark-snow);
  border-radius: 4px;
  color: var(--Primary-Dark-Mud);}
input[type="url"],
input[type="date"],
textarea{
  background-image: none !important;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-dark-snow) !important;
  border-radius: 4px !important;
  color: var(--Primary-Dark-Mud) !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus,input[type="date"]:focus,input[type="url"]:focus,textarea:focus {border-color: var(--bs-dark-snow);outline: none; color: var(--Primary-Dark-Mud) !important;} 
input[type="file"], input[type="file"]{
  width: fit-content;
  border: 1px solid var(--bs-dark-snow);
  padding: 10px 16px;}
input.form-control::file-selector-button{
  border: 2px solid var(--bs-dark-snow);
  padding: 0.3em 0.4em;
  border-radius: 0.2em;
  background-color: var(--bs-body-bg);
  transition: 1s;
  margin-right: 10px;
  color: var(--bs-dark-snow);}

input[type="checkbox"]{
  appearance: none;
  width: 20px;
  height: 25px;
  border: 2px solid var(--bs-dark-snow);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  margin: 0;}
input[type="checkbox"]:checked {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color);}

span.select2.select2-container{background: var(--bs-body-bg);}
select + .select2.select2-container{
  border: 1px solid var(--bs-dark-snow);
  border-radius: 4px !important;
  width: 100% !important;}
select#role_id + .select2.select2-container{
  padding: .35rem .25rem;
  height: 39px;}
#dynamicIngredients select + .select2.select2-container{
  border: unset;}
.select2-container--default .select2-selection--single {
  background-color: transparent !important;
  border: unset !important;}
.select2-container--default .select2-selection--multiple{
  background: var(--bs-white);
  border: unset !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  margin-top: 1px!important;}
select#custom_pricing {
  background: transparent;
  border: 1px solid var(--bs-dark-snow);
  border-radius: 4px;}
select#client_list, select#ws_list {
  margin: 10px 11px;
  background-color: transparent !important;
  border: 2px solid var(--bs-white) !important;}
.g-sidenav-hidden .navbar-vertical select#client_list, .g-sidenav-hidden .navbar-vertical select#ws_list{
  margin: 10px 4px;
  background-color: transparent;
  border: 2px solid var(--bs-white) !important;}
.g-sidenav-hidden .navbar-vertical:hover select#client_list, .g-sidenav-hidden .navbar-vertical:hover select#ws_list{
  margin: 10px 11px;
  background-color: transparent;
  border: 2px solid var(--bs-white) !important;}
.form-select:disabled {
  background-color: unset !important;}
select#ing_supplier{width: 100%;}
  
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;}
input[type="number"] {
    -moz-appearance: textfield;
  text-align: right;}
input#uploadimage {
  padding: 5px;
  border-radius: 4px;
  cursor:pointer;
  width: 100%;}
.product-import input[type="file"], #uploadForm input[type="file"]{
  width: fit-content;
  border: 2px solid var(--bs-dark-snow);
  padding: 10px 16px;}
.form-select-menu{font-size: 14px;
  border-radius: 4px !important;
  color: var(--Primary-Dark-Mud);}

/* custom select style */
#form_step_1 select + .select2.select2-container{
  border-radius: 4px 0 0 4px !important;}
#form_step_1 button#add-tag-btn {
  border-radius: 0 4px 4px 0 !important;}
select{
  border: 1px solid var(--bs-dark-snow) !important;}
.list-group.form-check{display: none;}

/* Card styles */
.card {
  border-radius: 0.5rem;
  background-color: var(--bs-white);
  margin-bottom: 1rem;
  border: none;}
.card-header {
  color: var(--secondary-color);
  padding: 2rem 2rem 1rem 2rem;
  background-color: transparent;
  border-bottom: unset;
  font-weight: 400;}
.card-body {
  padding: 1rem 2rem 2rem 2rem;}
.card-footer {
  padding: 0.75rem 1rem;
  background-color: var(--bs-body-bg);
  border-top: unset;
  text-align: right;}
.card-img-top {
  width: 100%;}
.card-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;}
.card-text {
  margin-bottom: 1rem;
  color: #6c757d;}
.card-horizontal {
  display: flex;
  flex-direction: row;
  border-radius: 0.25rem;}
.card-horizontal .card-img-left {
  flex: 1;
  width: auto;
  border-right: 1px solid #dee2e6;}
.card-horizontal .card-body {
  flex: 2;}
.card.grid-view{
  display: flex;
  align-items: center;
  min-height: 450px;
  padding-top: 7px;
  box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.15);}
img.card-img-top.product-thumbnail.grid{
  width: 110px;}
.box-shadow{
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);}
.grid-detail-view{
  display: flex;
  align-items: center;
  padding-top: 7px;
  box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.15);
  padding-bottom: 20px;
}
.card-body.right{
  padding: 1rem 1rem 2rem 1rem;
  width: 100%;
}
.card-body.right .product_description{
  padding-top: 10px;
}

/* Subscription card styles */
.subscription-card {
  width: 300px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #fff;}
.subscription-card:nth-child(odd){
  border-top: 5px solid var(--secondary-color);}
.subscription-card:nth-child(even){
  border-top: 5px solid var(--primary-color);}
.subscription-card-header {
  padding: 16px 10px 0;
  text-align: left;}
.subscription-name {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #333;}
.plan-code {
  font-size: 14px;
  color: #777;}
.subscription-card-body {
  padding: 16px 10px 0;
  text-align: left;}
.cost {
  font-size: 16px;
  margin: 8px 0;
  color: #555;}
.cost sup{
  top: -1em;}
.subscription-card-footer {
  padding: 0px 10px 10px;}
.subscription-card-footer .btn {
  font-size: 14px;}

/* Square Component styles */
.square-input-readonly {
  background: var(--light-blue);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  align-items: center;
  border-radius: 12px;
  justify-content: center;}
.square-input-readonly label, .square-input-readonly input{
  color: var(--bs-white);
  padding-left: 0;
  width: 100% !important;
  text-align: center;
  border: none;}
.square-input-active {
  background: var(--primary-white);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
  align-items: center;
  border-radius: 12px;
  justify-content: center;}
.square-input-active input, .square-input-active label{
  width: 100% !important;
  width: 100% !important;
  text-align: center;
  border: none;}
.square-input-large {
  min-height: 300px;
  padding: 25px 15px 25px 15px;}
.square-input-medium {
  min-height: 155px;
  padding: 25px 15px 25px 15px;}
.square-input-small {
  min-height: 100px;
  padding: 15px;}
.square-input-large input, .square-input-large select, .square-input-medium input, .square-input-medium select, .square-input-small input, .square-input-small select{
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
  background-image: none;}
.square-input-select{
  color: var(--secondary-color);
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: menulist !important;
  cursor: pointer;
  width: auto;
  margin: 0 auto !important;
  padding-right: 0;}

/* Table input styles */
.table-active-input{
  border: 1px solid var(--bs-dark-snow);
  border-radius: 4px;}
.table-active-input input{
  color: var(--bs-black);
  border: none !important;
  border-radius: unset;}
.table-active-input input:focus{
  color: var(--bs-black);}
.table-input-readonly{
  background: transparent;
}
table input[readonly] {
  border: none !important;
  padding: 0 1px !important;}
.table-active-readonly input[readonly]{
  background: lightgrey !important;
  padding: 11px 6px !important;
}
.readonly input[readonly]{
  background: lightgrey !important;
}
.table-input-readonly input{
  color: var(--bs-black);
  cursor: not-allowed;
  border: none !important;}
.table-input-readonly input:focus{
  color: var(--bs-black);}
table.border-none tr{
  border: none;
  padding: 2px;}
table.border-none tr:last-child td{
  border-width: 0 !important;}
table select + .select2.select2-container{padding: .375rem 1.5rem .375rem .75rem !important;font-size: 14px;color: var(--Primary-Dark-Mud);}
.form-select{padding: .6rem 2.5rem .6rem 0.75rem !important;font-size: 14px;border-radius: 4px;color: var(--Primary-Dark-Mud);}
.form-control{font-size: 14px;border-radius: 4px;color: var(--Primary-Dark-Mud);}
select.form-control-select {padding: .5rem 2.5rem .5rem 0.4rem !important;font-size: 14px;border-radius: 4px!important;color: var(--Primary-Dark-Mud);}
table input{padding: .6rem .75rem !important;color: var(--Primary-Dark-Mud);}
table.tb-cost .input-group.input-group-dynamic .form-control{padding-left: 0 !important;}

/* menu right */
ul.dropdown-menu.dropdown-menu-end {
  width: 300px;
  padding: 14px 0 !important;
  border-right: 4px solid var(--secondary-color);}
.dropdown-item.active, .dropdown-item:active, .dropdown-item.account.active, .dropdown-item.account:active{
  background-color: var(--bs-snow);}
.transform-none{
  transform: none !important;
  perspective: none !important;}

/* List and grid view styles */
img.product-thumbnail.list {
  width: 50px;
  height: 50px;
  object-fit: contain;}
img.product-thumbnail.image-lib{
  width: 60px;
  height: 60px;
  object-fit: contain;}
/* .grid-view .product_name{
  min-height: 70px;}
.grid-view .product_sku{
  min-height: 47px;}
.grid-view .product_des{
  min-height: 75px;} */
.view-toggle button i {
  transition: color 0.3s ease, transform 0.3s ease;}
.view-toggle button.active{
  background: var(--secondary-color);
  color: #fff;}
.view-toggle button#listViewBtn.active a i, .view-toggle button#gridViewBtn.active a i{
  color: #fff;}
.view-toggle button#listViewBtn.active{
  border-radius: 30px 0 0 30px;}
.view-toggle button#gridViewBtn.active{
  border-radius: 0 30px 30px 0;}
.view-toggle button#gridViewBtn{
  padding-left: 12px;}
.view-toggle {
  border: 2px solid var(--secondary-color);
  border-radius: 30px 30px 30px 30px;
  display: flex;}
.product-image-wrap {
  width: 100%;
  min-height: 180px;
  max-height: 180px;
  display: flex;
  padding: 3px 10px;}
img.card-img-top.product-thumbnail.grid {
  width: 100%;
  margin: 0 auto;
  object-fit: contain;}

/* Image Page */
img.rounded-circle {
  object-fit: cover;}
a.hover:hover {
  text-decoration: underline !important;}
img.profile-picture{
  width: 200px;
  height: auto;
  max-height: 200px;
  object-fit: contain;}
img.company-profile-picture{
  width: 200px;
  height: auto;
  max-height: 200px;
}
.edit-icon-container{display: flex;align-items: center;}
a#removePictureBtn::before, a#removeLogoBtn::before {
  content: "";
  border-left: 2px solid;
  padding-left: 6px;}
.image_details_wrapper p{
  margin: 0;}
.product_image_section {
  width: 200px;
  height: 205px;
  border: 1px solid var(--bs-dark-snow);
  border-radius: 8px;}
img.product_image{
  width: 100%;
  /* height: 200px; */
  max-height: 175px;
  object-fit: contain;}
.image-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;}
.detail-image {
  overflow: hidden;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;}

#file-input{display:none;}
.form-control-color{width: 100% !important;}

.bottom-footer {bottom: -3%}
.inputerror{font-size: 0.75rem;margin-top: 0.30rem;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
 -webkit-text-fill-color: black;
 transition: background-color 5000s ease-in-out 0s;
}
.hidden{display: none;}
.dropdown-toggle::after, .dropdown .dropdown-toggle:after{content: none;}
.dropdown.dropdown-hover:hover > .dropdown-menu, .dropdown .dropdown-menu.three-dot.show{transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 37px, 5px) !important;}
#foot_note{font-size: 19px; color: #403e3e7d !important;padding-left: 8px;}


/* custom Table styles */
table, thead, tbody{background-color: transparent!important;}
.product-search table, .product-search thead, .product-search tbody, .product-search td, .product-search th{background-color: transparent!important;}
.products_details_content table, .products_details_content thead, .products_details_content tbody, .products_details_content th, .products_details_content td{background-color: transparent!important;}
table {table-layout: fixed;width: 100%;}
td, th {word-wrap: break-word;white-space: normal!important;}
#form_step_1 td, #form_step_1 th, #form_step_1 tr{border: none;padding: 2px;}
table tfoot tr:last-child td {padding: 15px 6px;}
table.ingredient_nutri_table tr.table-secondary td {border-bottom: 2px solid #000;}
tr:has(+ tr.table-secondary) td{border-bottom: 2px solid #000;}
table.costing_table tr.labour-row td, table.costing_table tr.contingency-row td, table.table.costing_table tr.last-row td, table.table.costing_table tr.total-row td, table.nutritional-analysis tr.last-row td, table.nutritional-analysis tr.total-row td, table.ingredient_nutri_table tr.total-row td{border-bottom: 1px solid #000;}

/* sidenav menu */
.g-sidenav-show{height: calc(100vh - 66px);}
ul.navbar-nav i.material-symbols-outlined{color: white;}
.title-add i.material-symbols-outlined, #searchForm i.material-symbols-outlined{line-height: unset !important;}
aside#sidenav-main{margin-top: 0px;border-radius: unset;background: var(--Menu-Back-Ground) !important;scrollbar-width: none;overflow: hidden;overflow-y: scroll;}
.g-sidenav-hidden aside#sidenav-main .navbar-brand{height: 100%;padding: 0.5rem;}
.sidenav .navbar-brand {padding: 0.5rem!important;height: 100%;}
ul.dropdown-menu.dropdown-menu-end:before {display: none;}
#sidenav-main::-webkit-scrollbar{display: none;}
.g-sidenav-hidden .navbar-vertical ul.navbar-nav li.nav-item .collapse.show{display: none;}
.g-sidenav-hidden .navbar-vertical:hover ul.navbar-nav li.nav-item .collapse.show{display: block;}
.g-sidenav-hidden .navbar-vertical:hover span.sidenav-normal {font-size: 14px;}
.g-sidenav-hidden .navbar-vertical span.sidenav-normal {font-size: 8px;}
/* .g-sidenav-hidden .navbar-vertical img.main_logo{display: none !important;} */
.g-sidenav-pinned .navbar-vertical img.main_logo{display: block !important;}
.g-sidenav-hidden .navbar-vertical:hover img.main_logo{display: block !important;}
.g-sidenav-hidden .navbar-vertical:hover img.mini_logo{display: none !important;}
.g-sidenav-hidden .navbar-vertical img.mini_logo{display: block !important;height: 80px !important;}
.g-sidenav-pinned .navbar-vertical img.mini_logo{display: none !important;}
.g-sidenav-hidden .navbar-vertical:hover img.main_logo{display: block !important;}
.g-sidenav-pinned .navbar-vertical:hover img.mini_logo{display: none !important;}

/* sidebar footer */
.g-sidenav-hidden .navbar-vertical img.fh_main_logo{display: none !important;}
.g-sidenav-pinned .navbar-vertical img.fh_main_logo{display: block !important;}
.g-sidenav-hidden .navbar-vertical:hover img.fh_main_logo{display: block !important;}
.g-sidenav-hidden .navbar-vertical:hover img.fh_mini_logo{display: none !important;}
.g-sidenav-hidden .navbar-vertical img.fh_mini_logo{display: block !important;height: 80px !important;width: auto !important;}
.g-sidenav-pinned .navbar-vertical img.fh_mini_logo{display: none !important;}
.g-sidenav-hidden .navbar-vertical:hover img.fh_main_logo{display: block !important;}
.g-sidenav-pinned .navbar-vertical:hover img.fh_mini_logo{display: none !important;}

/* default css */
nav.navbar-main{position: fixed !important;width: 100%;}
main.main-content {margin-top: 65px;}
.login_page_container .input-group.input-group-outline.is-focused input.form-control {margin-left: 0;}
.login_page_container label.form-label{margin-left: 0;}
.login_page_container .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){width:100%}
.main-content-area {padding: 20px 0;}
nav.navbar-main {transition: box-shadow 0.25s ease-in, background-color 0.25s ease-in;margin: 0 !important;border-radius: unset;top: 0 !important;padding: 15px 0px !important; }
aside#sidenav-main {top: calc(68px);}
.nav-home {padding-left: 20px;}
i.material-icons.cursor-pointer {color: white;}
i.sidenav-toggler-line{background: #fff!important;}
aside.navbar-vertical .sidenav-header {height: 6.875rem !important;}
a.navbar-brand {height: auto;}
img.navbar-brand-img {width: 100%;height: 100% !important;max-height: 5rem !important;object-fit: contain;}
ul.navbar-nav li.nav-item a.nav-link.text-white{margin: 0!important;}
ul.navbar-nav li.nav-item a.nav-link.text-white i, ul.navbar-nav li.nav-item a.nav-link.text-white span{color: var(--primary-color);}
ul.navbar-nav li.nav-item a.nav-link.text-white span{font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;}
ul li.nav-item a.nav-link.text-white:hover, #dashboardsExamples:hover > a.nav-link.text-white {background: unset !important;}
ul.sub-menu li a.nav-link.text-white:hover{border-radius: unset!important;}
ul.sub-menu li a.nav-link.active span{color: var(--bs-gray)!important;}
ul.nav li.nav-item a.nav-link span.sidenav-normal{color: var(--Secondary-Menu-Text);font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;}
div#sidenav-collapse-main {overflow: hidden;}
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after, .navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]:after{color: #009fff!important;font-family: 'Material Symbols Outlined';content: "expand_more"!important;opacity: 1!important;font-size: 20px;font-weight: 400!important;}
span.sidenav-mini-icon{display:none;}
.table td, .table th{white-space: normal;}
.sidenav .nav .nav-item .nav-link {padding: 8px 0 8px 45px!important;margin: 0!important;font-size: 12px;line-height: 1;height: auto;}
.sidenav .nav .nav-item .nav-link {-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;white-space: nowrap;}
.sidenav .nav.sub-menu .nav-item .nav-link.active {color: var(--dark-gray-font)!important;background: var(--secondary-light-primary-color-10)!important;border-right: 4px solid var(--secondary-color);border-radius: unset;}
ul.dataTable-pagination-list li.active a{background: transparent;background-color: var(--primary-color);box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.09), 0 2px 3px -1px rgba(0, 0, 0, 0.07);color: #fff!important;border: none!important;border-radius: 50% !important;}
ul.dataTable-pagination-list li.active a:hover{background: var(--secondary-color);}
.sidenav-footer{margin-bottom: 40px;}
.sidenav-footer a.nav-link{text-align: center;color: var(--Primary-Dark-Mud) !important;padding: 2px 10px;}
.sidenav-footer-img {text-align: center;padding: 0 5px;}
aside.sidenav .sidenav-footer .sidenav-footer-img img{width: 100%;}
body.g-sidenav-pinned .collapse.show{display:block;}
.dataTable-wrapper .dataTable-bottom .dataTable-pagination .dataTable-pagination-list li.active a:hover {background: var(--secondary-color);cursor: pointer;}
.fsanz_nutrition .dataTable-wrapper table th{padding: 5px 15px 5px 25px;}
.dataTable-search input{border: 1px solid var(--bs-dark-snow) !important;}
.products.form-wizard .input-group.square-input-active select.recipe_oven_temp_unit.form-select{flex: unset;width: 25%;margin: 0 auto!important;padding-right: 0;}

/* Terms of use page */
h2.terms-heading, h2.policy-heading, h2.about-heading, h2.contact-heading {margin-bottom: 40px;}
.privacy-policy ul li{list-style: none;}
.terms, .privacy, .about, .contact {padding: 2px 15px 15px 25px;}
button.bg-gradient-dark {background-color: #dee2e8 !important;background: linear-gradient(0deg, rgba(175, 146, 255, 0.50) 0%, rgba(175, 146, 255, 0.50) 100%);}
.input-group.input-group-dynamic .form-control{padding-left: 10px!important;width: 100%;}

/* Product multistep form page */
.product-search .title-add h1{color: var(--secondary-color);font-size: 32px;font-weight: 400;line-height: normal;}
.product-search .title-add {display: flex;justify-content: space-between;align-items: center;}
.product-search a.btn.btn-primary.plus-icon {padding: 1px 10px;height: fit-content;margin: 0 !important;}
.product-search .input-group.prd-search-btn{flex-direction: row;border: 1px solid var(--bs-dark-snow);border-radius: 4px;padding: 3 10px;}
.product-search .input-group.prd-search-btn button{border: unset;color: var(--bs-dark-snow);width: fit-content;}
/* .product-search form#searchForm {width: 17%;margin-bottom: 25px !important;} */
.product-search form#searchForm button:focus{box-shadow: none;}
.product-search .prd-search-btn button{margin: 0;}
label, .form-label{margin-left:0 !important;}
input#searchInput::placeholder {font-size: 14px;font-style: normal;font-weight: 400;color: var(--bs-dark-snow);}
div#resultsContainer {padding: 10px;}
.product-search div#resultsContainer tbody#resultsBody a.btn-primary{font-size: 10px;font-weight: 400;padding: 12px 17px 12px 18px;background: var(--secondary-color);box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);margin-right: 20px;margin-bottom: 0;border-radius: 4px;}
.product-search div#resultsContainer tbody#resultsBody form button.btn-danger{font-size: 10px;font-weight: 400;color: var(--secondary-color);padding: 12px 17px 12px 18px;background: transparent;border: 1px solid var(--secondary-color);box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);margin-bottom: 0;border-radius: 4px;}
.product-search div#resultsContainer tbody#resultsBody tr.search_table_row td:nth-child(2) {width: 9%;}
.product-search div#resultsContainer tbody#resultsBody tr.search_table_row td:first-child{width: 5%;}
.product-search div#resultsContainer tbody#resultsBody tr.search_table_row{border-bottom: 1px solid var(--bs-dark-snow);}
.products.form-wizard {width: 100%;padding: 40px 30px;margin-top: 60px;margin-bottom: 25px;border-radius: 15px;}
.products.form-wizard .multisteps_form_content {width: 100%;margin: 0 auto;}
.products.form-wizard .multisteps-form__progress {background: #A8C6C1; padding: 30px 20px 30px 20px;border-radius: 12px;margin-top: -75px;box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);}
/* .products.form-wizard .input-group.square-input-active, .products.form-wizard .input-group.square-input-readonly {background: var(--primary-white);box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);align-items: center;border-radius: 12px;} */
.products.form-wizard .input-group.square-input-active input:focus{box-shadow: none;}
.products.form-wizard .input-group.square-input-active input, .products.form-wizard .input-group.square-input-active input::placeholder{color: var(--primary-color);font-size: 24px;}
/* .products.form-wizard .input-group.square-input-medium{min-height: 155px;padding: 15px 15px 25px 15px;} */
/* .products.form-wizard .input-group.square-input-small{min-height: 80px;} */
.invalid-feedback {padding: 5px 10px;}
.products.form-wizard .input-group.square-input-active input, .products.form-wizard .input-group.square-input-active select, .products.form-wizard .input-group.square-input-readonly input, .products.form-wizard .input-group.square-input-readonly select{border: none!important;text-align: center;}
.products.form-wizard .oven_data {margin-top: 25px;}
.products.form-wizard .input-group input.form-control, .products.form-wizard .input-group textarea.form-control{background-image: none;border: 1px solid var(--bs-dark-snow);border-radius: 4px!important;}
.products.form-wizard .input-group label.form-label {position: unset !important;font-size: 16px !important;color: var(--primary-color);}
.products.form-wizard label.form-label{font-size: 16px !important;color: var(--primary-color);}
.products.form-wizard .quill-editor-wrapper{margin-bottom: 1.5rem;}
.products.form-wizard .quill-editor-wrapper .quill-editor {height: 180px;}
.products.form-wizard .quill-editor-wrapper .quill-editor .ql-editor {height: 100% !important;}
.products.form-wizard .oven_time_title {color: var(--primary-color);font-size: 16px;margin-bottom: 10px; text-align: center;}
.products.form-wizard .input-group.square-input-active input, .products.form-wizard .input-group.square-input-readonly input{font-size: 21px;}
.products.form-wizard .input-group input[type="number"]::-webkit-inner-spin-button,
.products.form-wizard .input-group input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
.products.form-wizard .oven_fields .square-input-active input.form-control, .products.form-wizard .weight_price_fields .square-input-active input.form-control{color: var(--primary-color);font-size: 24px;}
.products.form-wizard .weight_price_fields .square-input-readonly input.form-control{color: var(--bs-white);font-size: 24px;}
.products.form-wizard .input-group.square-input-active input{padding-left: 10px;}
.products.form-wizard .input-group.square-input-readonly label, .products.form-wizard .input-group.square-input-readonly input, .products.form-wizard .input-group.square-input-readonly input::placeholder{color: #fff;}
.products.form-wizard .loss_nutrition_area {padding: 0 10px;}
.products.form-wizard ul.select2-results__options li, .products.form-wizard span.select2-selection__rendered {display: flex;}
.products.form-wizard ul.select2-results__options li .ingimagesection img, .products.form-wizard .ingimagesection img{width: 50px;height: 50px;object-fit: contain;}
.products.form-wizard ul.select2-results__options li .ingimagesection{line-height: 24px;}
.products.form-wizard ul.select2-results__options li .ingname, ul#select2-ing_id1-results li .ingrsku, .products.form-wizard .inginfo_section .ingname, .products.form-wizard .inginfo_section .ingrsku {padding-left: 10px;}
.products.form-wizard ul.select2-results__options li .ingname, .products.form-wizard .inginfo_section .ingname{font-size: 14px}
.products.form-wizard ul.select2-results__options li .ingrsku, .products.form-wizard .inginfo_section .ingrsku{font-size: 12px}
table#dynamicIngredients {border-collapse: collapse;table-layout: auto;}
table#dynamicIngredients tr td{vertical-align: middle;}
table#dynamicIngredients tr:last-child td {border-bottom: none;}
.products.form-wizard .table tbody tr:last-child td{border-width: 1px;}
.products.form-wizard .nutrition_area, .products.form-wizard .loss_area {padding: 30px 20px;border-radius: 13px;box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);}
.products.form-wizard .nutrition_display_area tr th {padding-right: 10px;color: var(--secondary-color);font-weight: 400;line-height: 140%;font-size: 18px;border-bottom: 1px solid var(--bs-background);}
.products.form-wizard .nutrition_display_area table tr td{border-bottom: 1px solid var(--bs-background);padding: 5px 5px;}
.products.form-wizard .nutrition_table_section table {table-layout: fixed;}
.products.form-wizard .nutrition_table_section table th{padding: 10px 5px;text-align: left;}
.nutrition_table_section table td {padding: 10px 5px;}
/* .nutrition_table_button {width: fit-content;margin: 0 auto;}
.nutrition_table_button:hover span {color: var(--primary-color);} */
.products.form-wizard #dynamicIngredients tr td span.select2 {min-height: 55px;padding-left: 25px !important;}
.products.form-wizard #dynamicIngredients tr.ingredient-row {position: relative;}
.products.form-wizard .nutrition_table_section .ingredient_nutri_table_image {display: flex;column-gap: 11px;align-items: center;}
.products.form-wizard .nutrition_table_section .ing_name_area {font-size: 14px;color: black;}
.products.form-wizard .nutrition_table_section .ing_sku_area {font-size: 11px;}
.multisteps_form_content .units_weights_title {font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;color: var(--secondary-color);}
.multisteps_form_content form#form_step_3 {width: 100%;margin: 0 auto;}
.multisteps_form_content form#form_step_3 .units_weights_subtitle{font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;color: var(--primary-color);text-align: center;}
.multisteps_form_content button#add_ingredient i.material-icons{font-size: 18px;}
div#errorModal .modal-header {background: var(--secondary-color);}
div#errorModal .modal-header h5{color: #fff;}
div#errorModal .modal-header button#close_errorModal {border: none;border-radius: 20px;width: 30px;height: 30px;}
.products.form-wizard .input-group.square-input-active select.recipe_oven_temp_unit.form-select,
.products.form-wizard .input-group.square-input-readonly select.recipe_oven_temp_unit.form-select {color: var(--secondary-color);background-image: initial !important;-webkit-appearance: menulist !important;-moz-appearance: menulist !important;appearance: menulist !important;cursor: pointer;}
.navbar-vertical .navbar-nav .nav-link.active{box-shadow: unset;}
.products.form-wizard .oven_time_icon {display: flex;justify-content: flex-end;padding-right: 15px;}
.products.form-wizard .remove-ingredient.text-danger i {cursor: pointer;}
:focus-visible {outline: none;box-shadow: none;}
option {background-color: white;color: black;}
input#searchInput {padding-left: 10px;background: transparent;border: none !important;}
.multisteps_form_content .input-group.input-group-dynamic{flex-direction: column;}

/* Product database */
.products_details h2.prod_title{font-size: 24px;font-style: normal;font-weight: 400;line-height: normal;color: var(--Primary-Dark-Mud);}
.products_details p, .products_details strong{color: var(--Primary-Dark-Mud);}
.products_details .ingredient_table_title, .products_details .batch_table_title, .products_details .oven_table_title, .products_details .recipe_details_title, .products_details .recipe_method_title, .products_details .notes_tags_title, .products_details .product_image_title{font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;color: var(--secondary-color);margin-bottom: 15px;text-align: left;}
.products_details .batch_table_wrapper, .products_details .oven_table_wrapper {margin-bottom: 40px;}
.products_details .recipe_details_wrapper {margin-top: 20px;}
.products_details .product_image_section img{padding: 10px 50px;}
.products_details .product_details_footer .button-row, .product_specs .product_details_footer .button-row{text-align: right;}
.products_details .product_details_footer .button-row a, .product_specs .product_details_footer .button-row a{margin-right: 10px;}
.table.nutrition_table td input{font-size: 11px !important;}
.table.ingredient_table tr, table.batch_table tr, table.oven_table tr, table.recipe_details_table tr, table.nutrition_table tr, table.price_table tr, table.price_table tr th, table.nutrition_table tr th, table.nutrition_table tr td, table.recipe_details_table tr th, table.recipe_details_table tr td{border: unset;border-bottom: 2px solid var(--bs-dark-snow);font-weight: 400;}
.table.ingredient_table th, .table.ingredient_table td, .batch_table th, .batch_table td, .oven_table th, .oven_table td{border: none !important;font-weight: 400;}
.table.nutrition_table tbody tr:last-child td{border-width: 1px;}
.table.ingredient_table tr th, table.batch_table tr th, table.nutrition_table tr th, table.price_table tr th, table.oven_table tr th{border-bottom: unset;text-transform: none;font-weight: 400;}
.table.ingredient_table tr th{padding: 10px 6px;}
.table.ingredient_table tbody tr:last-child td{border-width: inherit;}

/* Product single page */
.product_specs .card.prod_name_card, .product_specs .card.prod_desc_card, .product_specs .card.ings_card, .product_specs .card.allergens_card, .product_specs .card.recipe_card, .product_specs .card.weight_card, .product_specs .card.tags_card{box-shadow: unset;background: transparent;}
.product_specs .card.nutrition_card .card-body, .product_specs .card.price_card .card-body{background: transparent;}
.product_specs h5.card-title, .product_specs .product_image_title{font-size: 16px;font-style: normal;font-weight: 400;line-height: normal;color: var(--secondary-color);margin-bottom: 15px;text-align: left;}
.product_specs table.nutrition_table th, .product_specs table.price_table th, table.nutrition_table th, table.ingredient_nutri_table th{color: var(--Primary-Dark-Mud);font-size: 12px;font-style: normal;font-weight: bold;line-height: normal;}
table.nutrition_table th{font-weight: bold !important;}
.fsanz_nutrition .dataTable-wrapper .dataTable-container .table thead tr th { text-transform: none;}
.product_specs .product_details_footer .button-row a {padding: 12px 24px;}
.title_sku_container {padding-right: 10px;}

/* Import page */
#uploadForm .input-group{width: 45%;}
button#previewBtn {width: fit-content;}
form#uploadForm {display: flex;flex-direction: column;row-gap: 20px;margin-top: 30px;}

/* Quill editor styles */
.quill-editor-wrapper .ql-toolbar {border-radius: 4px 4px 0 0;}
#allergens-editor p, #may-be-editor p {font-weight: 700;}
.ql-editor li::marker, .ql-editor li span, .ql-editor li, .comment-body-section ul li, .comment-body-section ol li, .comment-body-section p {color: #000 !important;font-size: 14px !important;}
.ql-editor>*{font-size: 14px !important;color: #000 !important;}

/* Roles style */
table#rolesTable th {color: var(--secondary-color);}
table#rolesTable td{font-size: 14px;color: gray !important;padding: 0.75rem 1.5rem !important;}

/* Modal styles */
.modal-header{justify-content: space-between;}
.modal-header button.close{transition: 0.5s;color: #ffffff;background-color: var(--secondary-color);border-color: var(--primary-color);font-size: 20px;text-transform: uppercase;width: auto;font-weight: 500;border: none;border-radius: 50%;padding: 3px 8px;}
.modal-header button.close:hover{background-color: var(--primary-color);}
.modal-body {padding: 25px 20px;}
button.btn-success{transition: 0.5s;color: #ffffff;background-color: var(--secondary-color);border-color: var(--primary-color);font-size: 15px;text-transform: uppercase;width: auto;font-weight: 500;}
button.btn-success:hover{background-color: var(--primary-color);}
.modal-body .form-control {border: 1px solid var(--bs-dark-snow);}
button#backButton {margin-left: 10px;margin-top: 20px;}
.form-group label.text-primary-orange, .col-form-label {color: var(--primary-color) !important;}

/* material symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    vertical-align: middle;
}
.breadcrumb-item i.material-symbols-outlined{font-size: 20px;}
button#add_ingredient i.material-symbols-outlined{font-size: 16px !important;}
i.material-symbols-outlined{vertical-align: middle;}
.material-symbols-outlined[data-favor="0"] {font-variation-settings: 'FILL' 0;}
.material-symbols-outlined[data-favor="1"]{font-variation-settings: 'FILL' 1;}

/* Breadcrumb styles */
ol.breadcrumb {display: flex;flex-direction: row;align-items: center;}
.breadcrumb-section {display: flex;justify-content: space-between;}
.breadcrumb-section .action-container .updated-action-item span, .breadcrumb-section .action-container .created-action-item span{font-size: 12px;}
.breadcrumb-section .action-container{display: flex;column-gap: 20px;}
.breadcrumb-section li.breadcrumb-item i, .breadcrumb-section li.breadcrumb-item a, .breadcrumb-section li.breadcrumb-item::before{color: var(--secondary-color)!important;opacity: 1!important;font-weight: 500;text-decoration: none;}
.breadcrumb-section li.breadcrumb-item.active{color: var(--primary-color)!important;}

/* filter and pagination */
select#perPage {
  border: 1px solid var(--bs-dark-snow);
  border-radius: 4px;}

/* datatable Pagination Styles */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--bs-dark-snow) !important;
  font-weight: 400;
  border-radius: 50%;
  background-color: var(--bs-white) !important;
  color: var(--Primary-Dark-Mud) !important;
  padding: 7px 1px 6.5px 0 !important;
  width: 40px;
  height: 40px;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--bs-dark-snow) !important;
  background: var(--bs-dark-snow) !important;
  border: 1px solid var(--bs-dark-snow) !important;
  color: var(--bs-dark-mud) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--primary-color) !important;
  color: var(--bs-white) !important;
  font-weight: 400;
  border: 1px solid var(--primary-color) !important;
  border-radius: 50%;
  padding: 7px 1px 6.5px 0 !important;
  width: 40px;
  height: 40px;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  color: var(--bs-white) !important;
  background-color: var(--secondary-color) !important;
  border: 1px solid var(--secondary-color) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: not-allowed;
  opacity: 0.5;}
.dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate .paginate_button.previous{
  padding: 6px 1px 6.5px 0 !important;
  width: 40px;
  height: 40px;}
.dataTables_wrapper .dataTables_paginate span {
  display: flex;
  justify-content: center;
  align-items: center;}
.dataTables_wrapper .dataTables_info{padding-top: 1.75em;}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked, .form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
  border-color: var(--primary-color); }
.form-check:not(.form-switch) .form-check-input[type="radio"]:after{
  background-image: linear-gradient(195deg, var(--primary-color) 0%, var(--primary-color) 100%);}
.form-check:not(.form-switch) .form-check-input[type="radio"]:after{
  width: unset;}


.dropzone { border: 2px dashed #4a90e2; border-radius: 10px !important; padding: 40px; text-align: center; cursor: pointer; color: #6c757d; font-size: 16px; background: var(--Menu-Back-Ground);}
.dropzone.dragover {background: #e9f5ff;border-color: #007bff;}
.dropzone span.upload-icon{font-size: 50px;}
.dropzone p{font-size: 25px;}
.dropzone p span.uploan-span{font-weight: 500; color: var(--secondary-color) !important; font-size: 25px;}
.thumb {width: 60px;height: 60px;object-fit: cover;border-radius: 6px;}
.fake-progress {height: 6px;background-color: #0d6efd;width: 0%;border-radius: 4px;transition: width 0.2s linear;}
.file-list { margin-top: 15px; }
.file-item {padding: 8px 12px;background: #ffffffff;border-radius: 5px;margin-bottom: 6px;display: flex;justify-content: space-between;align-items: center;border: 1px solid var(--Menu-Back-Ground);}
.remove-file { cursor: pointer;}
.days-wrapper {position: relative;}
.days-label {position: absolute;top: 0px;bottom: 0;margin-right: 3px;right: 0px;display: flex;padding-left: 6px;font-size: 0.9rem;color: #555;align-items: center;}
.days-label::before {content: "";position: absolute;left: 0;top: 0; bottom: 0;width: 1px;background-color: #ced4da;}

/* Mobile responsiveness */
@media screen and (max-width: 767px) {
  .product-search .title-add{flex-direction: column;}
  div.dt-buttons{float: left !important;}
  div#dtRecordsView1_length{float: left!important;padding-left: 2px;}
  div#dtRecordsView1_filter {margin-bottom: 5px;}
  .button-row .btn-group ul.dropdown-menu.show{right: 35px !important;}
  .card-header .page-title{font-size: 24px !important;}
  .mobile-res{flex-direction: column;gap: 30px;}
  .overflow-container{
  overflow-x: auto;
}
.dropdown ul.dropdown-menu.prod.show{inset: 15px 0px auto auto !important;}
}
@media screen and (max-width: 400px) {
  .btn-primary-orange.plus-icon, .btn-secondary.plus-icon {
    border-radius: 4px;}
  .material-symbols-outlined{
    font-size: 18px;}
  .title_sku_container{
    padding-right: 0;
    /* width: 60%; */
  }
  main.main-content {
    margin-top: 0;}
  .dataTables_wrapper .dataTables_filter input{
    width: 100%;}
  .profile-picture-container {
    flex-direction: column;}
  img.profile-picture{
    margin: 0 !important;}

  /* menu */
  nav.navbar-main {
    position: sticky !important;}

  /* Multistep form */
  .products.form-wizard{padding: 0px 16px;}
  .quill-editor-wrapper .quill-editor {
    border-radius: unset;}

  .breadcrumb-section{flex-direction: column;row-gap: 15px;}
  .breadcrumb-section .action-container{flex-direction: column;}
  .product-search form#searchForm{width: 55%;}
  #uploadForm .input-group{width: 100%;}

  /* Image styles */
  .product_image_section{width: 100px;height: 100px;}

  /* Card mobile styles */
  .card-header{padding: 1rem;}
  .card-body{padding: 1rem;}

  /* table responsiveness */
  /* .responsiveness {
  display: block;
  width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;} */

  .product-search form#searchForm{margin-bottom: 1rem !important;}
  /* img.product_image{height: auto;} */
  .grid-btn {text-align: right;margin-top: 25px;}
  .mobile-margin {
    margin-bottom: 20px;}
  .mt-sm-0{
    margin-top: 0!important;}
}

@media screen and (min-width: 401px) and (max-width: 768px) {
  .grid-btn {text-align: right;margin-top: 25px;}
  .mobile-margin {
    margin-bottom: 20px;}
  main.main-content {
    margin-top: 25px;}
  .profile-picture-container {
    flex-direction: column;}
  img.profile-picture{
    margin: 0 !important;}
  .mt-sm-0{
    margin-top: 0!important;}
  .dropdown .dropdown-menu{top: 22px !important;}

  /* menu */
  nav.navbar-main {
    position: sticky !important;}

  /* Multistep form */
  .products.form-wizard{padding: 0px 16px;}
  .quill-editor-wrapper .quill-editor {
    border-radius: unset;}

  .breadcrumb-section{flex-direction: column;row-gap: 15px;}
  .breadcrumb-section .action-container{flex-direction: column;}
  .product-search form#searchForm{width: 55%;}
  #uploadForm .input-group{width: 100%;}

  /* Image styles */
  .product_image_section{width: 100px;height: 100px;}

  /* Card mobile styles */
  .card-header{padding: 1rem;}
  .card-body{padding: 1rem;}

  /* table responsiveness */
  /* .responsiveness {
  display: block;
  width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;} */

  .product-search form#searchForm{margin-bottom: 1rem !important;}
  /* img.product_image{height: 100px;} */
}

@media screen and (min-width: 768px) and (max-width: 1091px){
  .quill-editor-wrapper .quill-editor {border-radius: unset;}
  .card-header .page-title{font-size: 30px !important;}
}

@media screen and (max-width:1100px){
  .overflow-container{
    overflow: auto;
  }
}

@media screen and (min-width:1100px){
  .quill-editor-wrapper .quill-editor {border-radius: 0 0 4px 4px;}
  .overflow-container{
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media screen and (max-width:500px){
  .bottom-footer {bottom: -9% !important;}
  .page-header{overflow:scroll !important;}
}
@media screen and (min-width:1360px) and (max-width: 1580px){
  .grid-view .product_name{font-size: 14px !important;}
  .grid-view .product_sku {font-size: 10px !important;}
  .grid-view .product_des{font-size: 13px !important;
    /* min-height: 130px; */
  }
}

@media (min-width: 1200px) and (max-width: 1700px) {
  .grid-btn {gap: 10px;display: grid;grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 1701px){
  .grid-btn {text-align: right;}
}

@media screen and (min-width: 1220px){
  .table-scroll{min-height: calc(100vh);}
}



/* Custom grid */
.grid-view{position: relative;}
.grid-view .product_name{color: black;font-size: 20px;font-weight: 600 !important;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;margin-bottom: 10px;}
.grid-view .product_sku{color: #3d8b7e !important;font-size: 16px !important;margin-bottom: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-bottom: 15px;}
.grid-view .product_des{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.grid-view .prod-des-wrap{min-height: 98px;padding: 15px 15px;background: #d6ecff;color: black !important;border-radius: 10px;font-size: 15px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.cat-tag {flex: 1 1 auto;min-width: 0;}
.cat-tag-line { display: flex;align-items: center;flex-wrap: nowrap;overflow: hidden;text-overflow: ellipsis;gap: 4px;margin-bottom: 2px;min-width: 0;}
.prod-label {font-weight: bold;flex-shrink: 0;}
.prod-status {flex: 1 1 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0;}
.grid-view span.prod-label {color: #000;}
.grid-view span.prod-status{color: var(--primary-color);}
.grid-view .product_status {display: flex;justify-content: space-between;gap: 15px;margin-top: 10px;min-height: 41px;}
.grid-view .product_status .finalised, .grid-view .product_status .ranged {padding: 10px;background: #d8e6e4;border-radius: 10px;font-size: 14px;width: 50%;text-align: center;color: #000;}
.grid-view .grid-footer {display: flex;justify-content: space-between;align-items: flex-start;gap: 8px;padding: 10px 0;}
.grid-view button.heart {position: absolute;top: 30px;right: 13px;}
.grid-view button.heart span{font-size: 32px;}



@media (min-width: 1200px) and (max-width:1580px){
  .grid-view .card-body{padding: 0.5rem 1rem 1rem 1rem;}
  .grid-view{position: relative;}
  .grid-view .product_name{color: black;font-size: 14px;font-weight: 600 !important;}
  .grid-view .product_sku{color: var(--primary-color) !important;font-size: 12px !important;margin-bottom: 10px;}
  /* .grid-view .product_des{padding: 9px 9px;background: #d6ecff;color: black !important;border-radius: 10px;font-size: 12px;} */
  .grid-view .prod-des-wrap{min-height: 88px;}
  .grid-view span.prod-label {color: #000;font-size: 12px;}
  .grid-view span.prod-status{color: var(--primary-color);font-size: 12px;}
  .grid-view .product_status {display: flex;justify-content: space-between;gap: 8px;margin-top: 10px;}
  .grid-view .product_status .finalised, .grid-view .product_status .ranged {padding: 8px;background: #d8e6e4;border-radius: 10px;font-size: 11px;width: 50%;text-align: center;color: #000;display: flex;align-items: center;justify-content: center;}
  .grid-view .grid-footer {display: flex;justify-content: space-between;align-items: center;padding: 0;}
  .grid-view button.heart {position: absolute;top: 30px;right: 13px;}
  .grid-view button.heart span{font-size: 32px;}
}