.modal-body {
  font-size: 1.2em;
  color: #111;
}

.searchBarMenu {
  width: auto;
  margin: 10px;
  background-color: lightgrey;
}

.sidebar-search {
  margin-top: 10px;
  margin-bottom: 10px;
}

.forced-black {
  color: #000 !important;
}

.table-click {
  cursor: pointer;
}

.table-click:hover {
  background-color: rgb(200, 200, 200) !important;
}

.captitalize-text {
  text-transform: capitalize;
}

.card-shadow {
  position: relative;
  -webkit-box-shadow: 0px 5px 12px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 12px -3px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 121.31 122.876' enable-background='new 0 0 121.31 122.876' xml:space='preserve'%3E%3Cg%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.914 5.296c6.927-7.034 18.188-7.065 25.154-0.068 c6.961 6.995 6.991 18.369 0.068 25.397L85.743 61.452l30.425 30.855c6.866 6.978 6.773 18.28-0.208 25.247 c-6.983 6.964-18.21 6.946-25.074-0.031L60.669 86.881L30.395 117.58c-6.927 7.034-18.188 7.065-25.154 0.068 c-6.961-6.995-6.992-18.369-0.068-25.397l30.393-30.827L5.142 30.568c-6.867-6.978-6.773-18.28 0.208-25.247 c6.983-6.963 18.21-6.946 25.074 0.031l30.217 30.643L90.914 5.296L90.914 5.296z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;

  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover {
  background-color: #f0f0f0;
}

.agenda-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.modal-body img {
  display: block;
  margin: 15px;
}

.agenda-modal-footer {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
}

.agenda-bootstrap-table {
  table-layout: fixed;
}

.divModalEditCheck {
  display: flex;
  justify-content: space-around;
  width: 500px;
}

.divModalEditCheck .labelCheck {
  width: 178px;
}

.helpText {
  color: #4f4f4f;
}

#sidebar .activeTab a {
  font-weight: bold;
  border-left: solid 5px rgb(60, 141, 188);
  background-color: rgb(54, 69, 75);
}

.modal-dialog {
  max-width: 80%;
}

.modalInventaires > .modal-dialog > .modal-content {
  height: 90vh;
  overflow-y: auto;
}

.modalInventaires #returnBoxModalProductsContainer {
  max-height: 53vh;
  overflow-y: auto;
}

.version {
  float: right;
  color: white;
  padding: 10px;
}

/* LOGIN */

.loginContainer {
  text-align: center;
  padding-top: 50px;
  min-height: calc(100vh - 162px);
}

.loginBlock {
  border-radius: 3px;
  border: 1px solid #e6e6e6;
  padding: 30px 30px 30px 30px;
  background-color: #fff;
  margin: auto;
  width: 360px;
  text-align: left;
}

.labelContainer {
  width: 100%;
  padding-bottom: 10px;
}

.whiteSpaceNoWrap,
.turnoverTable td,
.fundsTable td {
  white-space: nowrap;
}

.flex {
  display: flex;
  align-items: flex-start;
}

.flex1 {
  flex: 1;
}

.flex2 {
  flex: 2;
}

.flexEnd {
  display: flex;
  align-items: flex-end;
}

.flexAlignCenter {
  display: flex;
  align-items: center;
}

.flexColumn {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

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

.h38px {
  height: 38px;
}

.w100p {
  width: 100%;
}

.w70p {
  width: 70%;
}

.w30p {
  width: 30%;
}

.w80pCenter {
  width: 80%;
  margin: 0% 10%;
}

.mh40p {
  min-height: 40px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mr20 {
  margin-right: 20px;
}

.mr30 {
  margin-right: 30px;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

.ml30 {
  margin-left: 30px;
}

.mt30 {
  margin-top: 30px;
}

.mv10 {
  margin: 10px 0px;
}

.mb10 {
  margin-bottom: 10px;
}

.p10 {
  padding: 10px;
}

.keepAtBottom {
  margin-top: auto;
}

.textCenter {
  text-align: center;
}

.textRight {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

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

.flexRow {
  display: flex;
  flex-direction: row;
}

.flexSpaceBetween {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.flexSpaceAround {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

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

.downloadSickLeave {
  cursor: pointer;
  color: #2f6fff !important;
}

.downloadSickLeave:hover {
  color: #9fbdff !important;
}

.marginTop10 {
  margin-top: 10px;
}

.storeLabel {
  padding: 0px 20px;
}

.acceptPaidLeave,
.handleSickLeave {
  margin-left: 10px;
}

li a .badge {
  margin-left: 5px;
}

.productLine {
  cursor: pointer;
}

.productLine.firstLevel,
.inventoryLine.firstLevel {
  font-weight: 500;
  background-color: #e8e4e4;
  border-bottom: 1px solid lightgrey;
}

.inventoryLine.secondLevel,
.inventoryLine.thirdLevel {
  display: none;
}

.inventoryLine[data-unfold="1"] .chevron {
  transform: rotate(90deg);
}

.inventoryLine.thirdLevel[data-unfold="0"] .rackLoader,
.inventoryLine.thirdLevel[data-unfold="1"] .rackLoader {
  display: none;
}

.inventoryLine.thirdLevel[data-unfold="2"] .chevron {
  display: none;
}

.secondLevel {
  padding-left: 20px;
}

.thirdLevel {
  padding-left: 50px;
}

.categoryProductLine {
  padding: 0px;
  cursor: auto;
  display: none;
}

.changePageButton {
  box-sizing: border-box;
  padding: 7px 22px;
  background: linear-gradient(to bottom, #fff, #e6e6e6);
  border-radius: 4px;
  border: 1px solid #ddd;
  margin-right: 5px;
  display: inline-block;
  font-weight: bold;
  cursor: pointer;
}

.changePageButton:hover {
  background: linear-gradient(to bottom, #f6f6f6, #d6d6d6);
}

.changePageButton:active {
  background: linear-gradient(to bottom, #eee, #ddd);
}

.agendaWeekTable th {
  padding: 10px 0px;
}

#waitingForResponse {
  margin-left: 10px;
  display: none;
}

#waitingForRegistration i {
  display: inline-block;
}

.waitingMessage {
  display: inline-block;
  margin-left: 10px;
}

/* CONTENT */

@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Roboto");
html,
body {
  width: 100vw;
  max-width: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  background: #fafafa;
}

p {
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.7em;
  color: #999;
}

#content {
  width: 100%;
  /*padding: 30px;*/
  transition: all 0.3s;
}

#right-container {
  width: calc(100% - 250px);
  min-height: 100vh;
  transition: all 0.3s;
}

.user-info {
  display: flex;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 100px;
  top: 2px;
  margin: 10px;
}

.user-name-container {
  max-width: 200px;
  padding: 5px;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 0.9em;
  margin: 0px;
}

nav {
  height: 50px;
  /* background: #2F3130; */
  z-index: 2;
  width: 100%;
  background-color: #222d32 !important;
  padding-left: 20px;
  box-sizing: border-box;
  display: none;
}

.calendarRemoveButton {
  color: black;
  position: absolute;
  top: 4px;
  right: 10px;
  width: 17px;
  height: 17px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  z-index: 10;
  padding-top: 2.5px;
  box-sizing: border-box !important;
}

.calendarRemoveButton:hover {
  background: red;
  color: white;
}

.calendarCheckbox {
  position: absolute;
  z-index: 10;
  top: 4px;
  right: 54px;
  width: 18px;
  height: 18px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  box-sizing: border-box !important;
  padding-top: 2px;
  border-radius: 2px;
}

.calendarEye,
.editCheck {
  color: black;
  position: absolute;
  top: 4px;
  right: 32px;
  width: 17px;
  height: 17px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  background-color: #fff;
  z-index: 10;
  padding-top: 2.5px;
  box-sizing: border-box !important;
}

.calendarContainer {
  padding-bottom: 20px;
  padding-top: 20px;
}

.calendarContainer:last-child {
  margin-bottom: 40px;
}

nav .btn {
  margin-top: 10px;
}

.btn-primary {
  background-color: #3c8dbc;
  border-color: #367fa9;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background: #367fa9;
}

.btn-outline-primary {
  color: #3c8dbc;
  border-color: #3c8dbc;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.open > .dropdown-toggle.btn-outline-primary {
  color: white;
  background: #3c8dbc;
}

.btn-secondary {
  background-color: #bdbdbd;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.open > .dropdown-toggle.btn-secondary {
  background: #a4a4a4;
}

.btn-outline-secondary {
  color: #848484;
  border-color: #bdbdbd;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.open > .dropdown-toggle.btn-outline-secondary {
  color: white;
  background: #bdbdbd;
  border-color: #a4a4a4;
}

.invoice-link {
  color: rgba(0, 111, 119, 0.671);
  font-weight: 600;
}

.invoice-link:hover {
  color: rgb(0, 0, 0);
  text-decoration: underline;
}

.card-body {
  flex: 0 1 auto;
}

.card-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.validate-btn {
  float: right;
}

.productImage {
  width: 100px;
  height: 135px;
}

.stockProductImage {
  width: 50px;
  height: 67px;
}

.productDetails {
  display: inline-block;
  vertical-align: top;
  padding-left: 10px;
}

#logout {
  font-size: 0.7em;
  opacity: 0.5;
}

#orderError {
  display: inline;
  margin-left: 4px;
}

.tooltipIcon {
  font-size: 15px;
  margin-left: 4px;
}

.red-triangle {
  color: red;
}

.badge-info {
  background-color: #00c0ef;
}

.badge-primary {
  background-color: #3c8dbc;
}

.badge-danger {
  background-color: #dc3545;
}

.date-picker {
  display: inline-block;
}

.date-picker-input {
  width: 175px;
  margin: 5px;
}

#salesLogFormContainer {
  display: flex;
  align-items: center;
}

#salesLogFormContainer button,
#salesLogFormContainer .ms-parent {
  margin: 5px;
}

#salesLogFormContainer > .ms-parent > .ms-choice > span {
  position: initial;
}

#salesLogFormContainer > .ms-parent > .ms-choice > div {
  top: 5;
}

#salesLogLoader {
  font-size: 150px;
  margin-top: 100px;
  text-align: center;
}

.turnover-label,
.funds-label {
  /*width: 150px;*/
  display: inline-block;
  margin-right: 10px;
}

.turnover-label.store_picker,
.turnover-label.designation_picker,
.funds-label.store-picker {
  vertical-align: top;
  margin-right: 10px;
}

.ms-choice {
  border-color: rgb(206, 212, 218);
}

.ms-drop input[type="checkbox"] {
  margin-right: 4px;
}

.ms-parent {
  font-size: 14px;
}

.seeBtn {
  margin-top: 12px;
}

#seeTurnoverBtn {
  margin-top: 10px;
}

#turnoverResults {
  margin-top: 30px;
  margin-bottom: 10px;
}

.bold {
  font-weight: bold;
}

.packingListBtn {
  margin-left: 30px;
}

.detailledQuantities {
  display: inline-block;
  margin-right: 5px;
}

.printTitle,
.printTable {
  font-size: 18px;
}

/* MODALS */

.dismissModal {
  width: 40%;
  margin-left: 30%;
  margin-right: 30%;
}

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

.dismissErrorModal {
  width: 200px;
  height: 62px;
  white-space: normal;
}

.red {
  margin: 10px;
  color: red;
  font-size: 12px;
}

/* PAGINATION */

.pagination-right {
  float: right;
}

.page-item,
.page-link {
  color: #3c8dbc;
}

.page-item.active .page-link {
  background-color: #3c8dbc;
  border-color: #3c8dbc;
}

/* AUTOCOMPLETE */

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items-2 {
  background-color: white;
  z-index: 999;
  position: absolute;
  width: inherit;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-items-2 div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items-2 div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.smallIcon {
  display: inline-block;
  margin-right: 7px;
  opacity: 0.5;
}

.badge-secondary {
  background: #a4a4a4;
}

/* SIDEBAR */

.disabled {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  opacity: 0.2;
}

.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebarCollapse {
  display: none;
}

#sidebarCollapse.active {
  position: fixed;
}

#sidebar {
  width: 250px;
  min-height: 100vh;
}

@media screen and (max-width: 1024px) {
  nav {
    position: fixed;
    display: block;
  }
  #sidebarCollapse {
    display: block;
    position: absolute;
    top: -5px;
    left: 10px;
  }
  #sidebar {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
  }
  #sidebar.active {
    margin-left: -100%;
  }
  #right-container {
    width: 100%;
    min-height: 100vh;
  }
  .card-title {
    flex-wrap: wrap;
  }
  .card-body {
    margin-top: 50px;
  }
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/*
    ADDITIONAL DEMO STYLE, NOT IMPORTANT TO MAKE THINGS WORK BUT TO MAKE IT A BIT NICER :)
*/

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

#sidebar {
  background: #222d32;
  color: #fff;
  transition: all 0.3s;
}

#sidebar .sidebar-header {
  padding: 10px;
  text-align: center;
  /* background: #2F3130; */
  background-color: #1a2226 !important;
  /* line-height: 34px; */
}

#sidebar ul p {
  color: #fff;
  padding: 10px;
}

#sidebar ul li a {
  padding: 7px;
  font-size: 12px;
  display: block;
  color: #f2f2f2;
}

#sidebar ul li a:hover {
  /* background: #353636; */
  background: #1e282c;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
  color: #fff;
  background: #1a2226;
  color: rgba(255, 255, 255, 0.7);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #222d32;
}
#drafts-list {
  text-align: center;
}
#orders-list tbody tr,
#drafts-list tbody tr {
  cursor: pointer;
}

#orders-list td,
#orders-list th,
#drafts-list td,
#drafts-list th {
  font-size: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.card-title {
  margin-bottom: 20px;
}

.orderTitle {
  flex: 1;
}

.filterBtn,
.printOrdersBtn,
.printOrderBtn,
.modifyOrderBtn,
.preparationRateBtn,
.helpBtn {
  margin: 0px;
  margin-right: 10px;
}

.filterOptions {
  width: 100%;
  background-color: #e6e6e6;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
}

.filterOption:hover,
.filterOption.active {
  background-color: #3c8dbc;
  color: white;
}

.filterTitle {
  display: inline-block;
  font-weight: bold;
  font-size: 15px;
  width: 90px;
}

.filterOption {
  background-color: white;
  border-radius: 5px;
  border-style: solid;
  color: grey;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}

.statusFilter {
  background-color: white;
  border-radius: 5px;
  border-style: solid;
  color: grey;
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}

.statusFilter:hover,
.statusFilter.active {
  background-color: #3c8dbc;
  color: white;
}

.detail-card {
  margin-top: 15px;
}

.order-title {
  font-weight: 500;
  line-height: 1.2;
  display: inline-block;
  width: 25%;
  margin: 20px 0px;
}

#store-label,
#order-reference-label {
  margin-top: 10px;
}

#store,
#order-reference,
#designation,
#printNb,
#storeSelect {
  width: 200px;
  margin: 5px;
  display: inline-block;
}

#printNb {
  width: 60px;
}

.refLabel,
.emplacementLabel {
  display: inline-block;
  color: grey;
  font-size: 14px;
  width: 200px;
  margin: 5px;
  margin-left: 0px;
  margin-bottom: 0px;
}

.colLabel {
  display: inline-block;
  color: grey;
  font-size: 14px;
  width: 105px;
  margin: 5px;
  margin-bottom: 0px;
}

.packsLabel,
.discountLabel {
  display: inline-block;
  color: grey;
  font-size: 14px;
  width: 105px;
  margin: 5px;
  margin-bottom: 0px;
}

.sizeLabel {
  display: inline-block;
  color: grey;
  font-size: 14px;
  width: 105px;
  margin: 5px;
  margin-bottom: 0px;
}

.quantityLabel {
  display: inline-block;
  color: grey;
  font-size: 14px;
  width: 75px;
  margin: 5px;
  margin-bottom: 0px;
}

.find-product-form {
  display: flex;
  justify-content: flex-start;
}

.refkeyboard,
#emplacementSearch {
  width: 150px;
  margin: 5px;
  margin-top: 1px;
  margin-left: 0px;
}

.colkeyboard {
  width: 105px;
  margin: 5px;
  margin-top: 1px;
}

#nbpacks,
#discount,
#discountEuros,
.discountInput,
.discountEurosInput {
  width: 105px;
  margin: 5px;
  margin-top: 1px;
}

.discountInput,
.discountEurosInput {
  display: inline-block !important;
}

.sizekeyboard {
  width: 105px;
  margin: 5px;
  margin-top: 1px;
}

.refcolsizekeyboard,
#emplacementSearchBtn,
#eanSearchBtn,
#eanLocationSearchBtn {
  width: 100px;
  height: 38px;
  margin: 5px;
  margin-top: 1px;
}

.qtykeyboard {
  width: 75px;
  height: 38px;
  margin: 5px;
  margin-top: 1px;
}

.add-products,
.must-have {
  margin-bottom: 5px;
  border-top: 1px solid #d9d9d9;
  margin-top: 20px;
  padding-top: 20px;
}

#total-to-pay {
  width: 60px;
  text-align: right;
}

.logoTitle {
  font-weight: 500;
  font-size: 20px;
}

.total-items {
  width: 120px;
  text-align: right;
}

#totalTurnover {
  font-size: 20px;
  font-weight: bold;
}

/* Turn off number input spinners */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#challenge_month,
#challenge_year {
  height: calc(2.25rem + 2px);
  width: auto;
  display: inline-block;
  margin-left: 5px;
}

.challengeForm,
.employeeForm {
  padding-top: 5px;
  padding-bottom: 5px;
}

.challengeForm input,
.employeeForm input {
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 5px;
}

.toggleChallenges {
  background-color: rgb(237, 237, 237);
}

.buttonSave {
  box-sizing: border-box;
  margin-top: 10px;
}

form {
  margin-bottom: 0px;
}

.bar {
  box-sizing: border-box;
  width: 70%;
  height: 20px;
  background: lightgrey;
  border-radius: 5px;
  /*display: inline-block;*/
  display: block;
  margin: auto;
  overflow: hidden;
}

.progressBar {
  box-sizing: border-box;
  padding-top: 1px;
  height: 100%;
  text-align: center;
  color: white;
}

.progressBar.inProgress {
  background-color: rgb(186, 72, 72);
}

.progressBar.achieved {
  background-color: #4caf50;
}

.progressValue {
  box-sizing: border-box;
  /*display: inline-block;*/
  display: block;
  margin: auto;
  /*margin-left: 10px;*/
  width: calc(30% - 10px);
}

#turnoverStore {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 30vw;
  height: 100vh;
  background-color: rgb(240, 240, 240);
  padding-top: 0px;
  font-size: 0.9em;
  box-shadow: 1px 1px 5px 0px #bbbbbb;
  z-index: 1;
}

.click:hover {
  cursor: pointer;
  background-color: lightgrey !important;
}

.productDetailLine.click:hover {
  background-color: #e4e4ff;
}

.productDetailReference {
  display: inline-block;
  padding: 10px;
  color: grey;
}

.challengeCA {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(25vh);
}

.challengeWrapper {
  box-sizing: border-box;
  width: 35%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  border: 2px solid lightgrey;
  border-radius: 5px;
}

.challengeText,
.challengeValue {
  font-weight: bold;
  font-size: 20px;
}

.challengeWrapper.days {
  flex-direction: row;
  height: calc(10vh);
  margin-left: 7.5%;
}

.challengeWrapper.days .challengeText,
.challengeWrapper.days .challengeValue {
  display: inline-block;
}

/*.challengeWrapper.days {*/

/*	flex-direction: row;;*/

/*	height: calc(10vh);*/

/*	margin-left: 7.5%;*/

/*}*/

.progressWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: calc(10vh);
}

.remainingDays {
  box-sizing: border-box;
  margin-top: 10px;
}

.sizeInputContainer {
  display: inline-block;
  white-space: nowrap;
  margin-right: 8px;
  margin-bottom: 8px;
}

.sizeQty {
  display: inline-block !important;
}

#payroll-month,
#payroll-year {
  display: inline-block;
  vertical-align: middle;
}

#payroll-year {
  margin-left: 10px;
  width: 20%;
}

#payroll-month {
  width: 30%;
}

.errorMessage {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  font-weight: bold;
  font-size: 20px;
}

#calendar_week h1 {
  box-sizing: border-box;
  font-weight: bold;
  font-size: 25px;
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  margin-bottom: 30px;
}

#calendar_week table {
  box-sizing: border-box;
  border-collapse: collapse;
  width: 100%;
  height: 20%;
  margin: auto;
}

#calendar_week table,
#calendar_week th,
#calendar_week td {
  border: 1px solid black;
}

#calendar_week th,
#calendar_week td {
  text-align: center;
  vertical-align: middle;
  width: 9%;
}

#calendar_week .greyColored {
  background-color: rgba(158, 158, 158, 0.25);
  -webkit-print-color-adjust: exact;
}

#calendar_week .greenColored {
  background-color: rgba(175, 201, 175, 0.5);
  -webkit-print-color-adjust: exact;
}

#calendar_week .redColored {
  background-color: rgba(201, 175, 175, 0.5);
  -webkit-print-color-adjust: exact;
}

/*.wantedCA {*/

/*	box-sizing: border-box;*/

/*	display: flex;*/

/*	justify-content: space-between;*/

/*}*/

#challenge_details table {
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
}

#challenge_details tr {
  display: table-row;
}

#challenge_details th {
  box-sizing: border_box;
  text-align: center;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
}

#challenge_details td {
  box-sizing: border_box;
  text-align: center;
  vertical-align: middle;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

#challenge_details th:nth-child(1),
#challenge_details td:nth-child(1) {
  width: 20%;
}

#challenge_details th:nth-child(2),
#challenge_details td:nth-child(2) {
  width: 15%;
}

#challenge_details th:nth-child(3),
#challenge_details td:nth-child(3) {
  width: 15%;
}

#challenge_details th:nth-child(4),
#challenge_details td:nth-child(4) {
  width: 50%;
}

.euroSign {
  box-sizing: border-box;
  padding-top: 9px;
  display: inline-block;
}

#challenge_details input {
  box-sizing: border-box;
  width: 100px;
  display: inline-block;
}

#challenge_list_store tbody tr,
#challenge_list tbody tr {
  cursor: pointer;
}

#challenge_list_store th,
#challenge_list_store td,
#challenge_list th,
#challenge_list td {
  text-align: center;
  vertical-align: middle;
}

.storeChallenges {
  background-color: rgb(228, 228, 228);
}

#comments {
  width: 50%;
}

#paidLeave-list input,
#paidLeave-list label {
  box-sizing: border-box;
  padding: 8px;
}

#paidLeave-list {
  box-sizing: border-box;
  margin-top: 20px;
}

#paidLeave-list th,
#paidLeave-list td {
  text-align: center;
  vertical-align: middle;
}

.paidLeaveStatus,
.sickLeaveStatus {
  box-sizing: border-box;
  border-radius: 3px;
  color: white;
  display: inline-block;
  padding: 1px 5px;
}

.paidLeaveStatus[data-status="ACCEPTED"] {
  border: 1px solid rgb(0, 166, 80);
  background-color: rgb(0, 166, 80);
}

.paidLeaveStatus[data-status="REFUSED"] {
  border: 1px solid rgb(255, 58, 73);
  background-color: rgb(255, 58, 73);
}

.paidLeaveStatus[data-status="ASKED"] {
  border: 1px solid rgb(58, 145, 255);
  background-color: rgb(58, 145, 255);
}

.sickLeaveStatus[data-status="SUBMITTED"] {
  border: 1px solid rgb(230, 171, 71);
  background-color: rgb(230, 171, 71);
}

.sickLeaveStatus[data-status="HANDLED"] {
  border: 1px solid rgb(0, 166, 80);
  background-color: rgb(0, 166, 80);
}

.dayDetailSubtitle {
  margin-bottom: 10px;
  color: #666;
}

.toggleDayDetailItems {
  cursor: pointer;
}

.dayDetailItem {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0px;
}

.dayDetailItem img {
  height: 50px;
}

.dayDetailLoader {
  font-size: 24px;
  text-align: center;
  color: #666;
  padding: 15px 0px;
}

.chevronUp {
  display: none;
}

.unrollable {
  display: none;
  padding: 0px;
}

.metrics {
  text-align: center;
}

.metricsItem {
  display: inline-block;
  width: 250px;
  margin: 10px 0px;
  vertical-align: top;
}

.metricsValue {
  font-size: 32px;
}

.metricsLabel {
  color: #666;
}

#turnoverResults {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exportButton {
  box-sizing: border-box;
  margin-right: 50px;
  width: 100px;
  height: 30;
  line-height: 20px;
  padding-top: 5px;
  padding-left: 18;
  background-color: lightgrey;
  border: 1px solid lightgrey;
  border-radius: 5px;
}

.exportButton:hover,
.exportButton:focus,
.exportButton:active {
  background: #367fa9;
  color: white;
}

.bestsWorstsWrapper {
  box-sizing: border-box;
  /*display: flex;*/
  /*align-items: center;*/
}

.bestsWorstsText {
  box-sizing: border-box;
  margin: 10px 0px;
}

#bestsWrapper,
#worstsWrapper {
  box-sizing: border-box;
  min-width: calc(50% - 10px);
  overflow: auto;
  padding: 0 5px;
  font-size: 0.9em;
}

.storeChallenge {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.monthChallengeCA {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
}

.monthChallengeWrapper {
  box-sizing: border-box;
  width: 25%;
  height: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  border: 2px solid lightgrey;
  border-radius: 5px;
}

.monthChallengeText {
  font-weight: bold;
}

.challengeDetailTitle {
  box-sizing: border-box;
  display: inline-block;
  /*color: white;*/
  /*background-color: blue;*/
  /*border: 1px solid blue;*/
  /*border-radius: 5px;*/
}

.challengeDetail .chevronUp,
.challengeDetail .chevronDown {
  box-sizing: border-box;
  display: inline-block;
  margin-left: 20px;
}

.daily {
  margin-bottom: 50px;
}

.challengeDetail h6 {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0px;
}

.rollableChallenge {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

#employees_list {
  box-sizing: border-box;
  margin-top: 20px;
}

#employees_list td,
#employees_list th {
  font-size: 14px;
  padding: 10px 0px;
}

.formSection {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.sectionHeader {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.employeeForm .smallIcon,
.inputContainer {
  box-sizing: border-box;
  display: inline-block;
  margin-right: 20px;
}

.employeePassword {
  font-weight: bold;
  padding-right: 10px;
  font-size: 20px;
}

.inline {
  width: initial !important;
  display: initial !important;
  margin-left: 10px;
}

.loader {
  box-sizing: border-box;
  margin-right: 40px;
}

.loader2 {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: 64px;
  align-self: center;
  margin: 50px auto;
}

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

.prepared-packages {
  padding: 0px 10px;
}

input.prepared-packages {
  max-width: 70px;
}

.resolveDeliveryProblem {
  padding: 10px;
}

.automaticOrderTitle {
  border-top: 1px solid #d9d9d9;
  margin: 30px 0px 0px 0px;
  padding: 20px 0px 0px 0px;
}

.dateInput {
  width: 160px;
  margin: 0px 10px;
}

#automaticOrderBtn {
  margin-top: 10px;
}

#packagesDifferences {
  margin: 10px;
}

.automaticOrderText {
  color: grey;
  font-size: 14px;
}

.storeSelect,
.storeSelectMultiple {
  margin-top: 10px;
}

.orderStoreSelect {
  margin-bottom: 10px;
}

.modalSection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: solid 1px #e6e6e6;
}

.modalSubSection {
  margin-top: 20px;
}

.duplicateBtn {
  margin-top: 10px;
}

#searchByReference {
  height: 39px;
  margin-right: 10px;
}

#waitingForAddingProductToDatabase,
#waitingForAddingVracProductToDatabase {
  height: 40px;
  padding: 7px;
  margin-bottom: 0px;
}

#deliveryProblemsModal .modal-dialog {
  max-width: 700px;
}

.arbitratedQuantity {
  width: 60px;
}

#waitingForQuantitiesRegistration {
  position: fixed;
  bottom: -17px;
  right: 0;
}

.packingTypeBadge {
  margin-right: 10px;
}

.floatTitle {
  font-weight: bold;
  font-size: 21px;
  margin-bottom: 20px;
}

.errorTitle {
  font-weight: bold;
  font-size: 18px;
}

.floatToPrintBody {
  font-family: sans-serif;
  color: rgb(62, 66, 71);
  font-size: 14px;
  margin: 5%;
}

.floatInfo {
  padding: 10px;
  font-size: 16px;
  display: flex;
}

.cashFloatDetailTitle {
  border-top: solid #e4e4e4 1px;
  border-bottom: solid #e4e4e4 1px;
  display: flex;
  justify-content: space-between;
}

.cashDisbursementJustification {
  font-style: italic;
  line-height: 10px;
}

.floatTitle {
  border-top: solid #e4e4e4 1px;
  border-bottom: solid #e4e4e4 1px;
}

.floatImportantInfo {
  padding: 10px;
  font-size: 16px;
  display: flex;
  margin-bottom: 0px;
  margin-top: 20px;
}

.floatSubInfo {
  padding: 0px 10px;
  font-size: 16px;
  display: flex;
  white-space: pre-line;
}

.floatInfo i,
.floatSubInfo i,
.floatImportantInfo i,
.cashIcon {
  font-size: 18px;
  width: 30px;
}

.floatTable {
  text-align: center;
}

.redTr {
  color: red;
}

.importantTr {
  font-weight: bold;
}

.floatData {
  text-align: right;
}

.inventairesLink {
  text-decoration: underline;
}

.newBadge {
  text-transform: uppercase;
  margin: 0px 10px;
}

.newInventaire {
  animation: colorchange 1s;
  -webkit-animation: colorchange 1s;
  /* Chrome and Safari */
  background: rgba(0, 151, 19, 0.1);
}

@keyframes colorchange {
  0% {
    background: none;
  }
  100% {
    background: rgba(0, 151, 19, 0.1);
  }
}

@-webkit-keyframes colorchange {
  /* Safari and Chrome - necessary duplicate */
  0% {
    background: none;
  }
  100% {
    background: rgba(0, 151, 19, 0.1);
  }
}

.cashDetailContainer {
  display: flex;
  font-size: 12px;
}

.coinsContainer {
  display: flex;
}

.cashAccounting {
  width: 45%;
  margin: 5px 15px;
  padding-right: 20px;
  border-right: solid 1px #e6e6e6;
}

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

.coinLabel {
  width: 120px;
}

.x {
  width: 20px;
}

.equals {
  width: 10px;
  margin-left: 10px;
}

.totalCoinAmount {
  text-align: right;
  width: 90px;
  font-weight: bold;
}

.banknotesContainer {
  margin: 5px 15px;
}

#compareStockBtn {
  margin-bottom: 15px;
}

#waitingForStockUpdate {
  margin-top: 10px;
}

#decrementStoreSelect,
#incrementStoreSelect {
  margin-bottom: 10px;
}

@media (max-width: 1500px) {
  .order-title {
    width: 50%;
  }
}

@media print {
  #sidebar {
    display: none;
  }
  #right-container {
    width: 100%;
  }
  @page {
    margin-top: 30px;
  }
  table {
    break-inside: avoid;
  }
  .hideOnPrint {
    display: none;
  }
}

.chartsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 55px;
}

.statInput {
  margin: 0px 5px;
}

.productLine,
.discountLine {
  border-top: solid 1px #e3e3e3;
  padding: 10px 0px;
  align-items: center;
  text-align: center;
}

.discountLine .badge {
  font-size: 15px;
}

.inventoryLine {
  border-top: solid 1px #e3e3e3;
  padding: 10px 15px;
  align-items: center;
  width: 100%;
}

.productDetailLine {
  background: #f3f3fa;
  border-bottom: solid 2px white;
  display: flex;
  align-items: center;
}

.hide {
  display: none;
}

.productDetailColumn {
  display: flex;
  align-items: center;
  color: grey;
}

.newOpModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 250px;
}

/* Rounded sliders IN /op */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

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

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

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

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

.slider.round {
  border-radius: 34px;
}

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

/* Rounded sliders IN /op */

#decimalQtyAlert {
  position: fixed;
  top: 90vh;
  left: 70vw;
}

.anticipateTJMAXStocksCheckbox {
  margin-left: 80px;
}

.arrivalLine {
  margin: 0 20px;
}

.arrivalInfos {
  padding-top: 20px;
}

.arrivalInfos p {
  color: #111;
}

.arrivalInfos:hover {
  cursor: pointer;
  background: #ddd;
}

.fa-plane {
  transition: all 0.5s ease-in-out;
}

.productLocationInput {
  max-height: 36px;
  max-width: 100px;
  margin: 0 10px 0 0;
}

.sizeProductLocationWrapper,
.productLocationWrapper {
  display: flex;
  align-items: center;
}

.productLocationWrapper {
  min-width: fit-content;
  margin-bottom: 4px;
}

.sizeProductLocationWrapper {
  flex-wrap: wrap;
}

.productLocationWrapper,
.addLocationBtn {
  margin-left: 10px;
}

.sizeProductLocationWrapper label {
  margin-right: 10px;
}

.removeLocationBtn {
  color: red;
}

#wrongBrowserAlert {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #d9534f;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2px;
  width: 100vw;
}

#wrongBrowserAlert p {
  color: #efefef;
  font-size: 20px;
}

#wrongBrowserAlert button {
  width: 56px;
  height: 36px;
}

/*SCAN INVENTAIRE */

#current-inventory-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20px 0;
}

#past-inventories-wrapper {
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.inventory-card {
  width: 32%;
  height: 280px;
  background: rgb(250, 250, 250);
  box-shadow: 0 0 2px #aaa;
  border-radius: 4px;
  font-size: 1.2em;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  padding: 0;
  /*
	justify-content: space-around;
	align-items: center;
	*/
}

.inventory-card div span {
  margin: 0 5px;
}

.inventory-card button {
  white-space: normal;
}

.inventory-card.plus {
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
}

.inventory-card.plus:hover {
  background-color: #ddd;
}

.inventory-card-title {
  display: flex;
  position: relative;
  width: 100%;
  justify-content: center;
  /*space-between;*/
  flex: 1;
}

.inventory-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 2;
}

.inventory-card-body .btn {
  margin: 4px;
}

.inventory-card-zone-name {
  font-weight: 500;
  font-size: 20px;
  /*max-width: 75%;*/
}

.delete-inventory-zone {
  position: absolute;
  right: -10px;
  top: 0;
}

.delete-inventory-zone i {
  color: #818181;
}

#createNewZone {
  white-space: normal;
}

.past-inventory {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

#past-inventories-wrapper .past-inventory:nth-child(odd) {
  background: #eee;
}

.space-between-btn,
#confirmInventoryClosingBtnsWrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#refColSizeControlRef #refkeyboard {
  width: 140px !important;
  margin: 0 10px;
}

#refColSizeControlRef #colkeyboard,
#refColSizeControlRef #sizekeyboard {
  margin: 0 10px !important;
}

#scan-fixedTop {
  position: fixed;
  width: 100%;
}

#scan-fixedTop.hasSideBar {
  width: calc(100% - 250px);
}

@media only screen and (max-width: 1024px) {
  #scan-fixedTop.hasSideBar {
    width: 100%;
    top: 50px;
  }
}

.noBorder {
  border: none;
}

#scan-header {
  width: 100%;
  height: 110px;
  background-color: #222d32;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #efefef;
}

#scan-header div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: scale(0.9);
}

.middle-scan-header-div {
  text-align: center;
}

.middle-scan-header-div h5 {
  font-size: 2em;
}

#scan-inputs-group {
  padding: 20px;
  height: 144px;
  background-color: #fff;
  border-bottom: 2px solid #000;
}

#scan-inputs-group #eanInputWrapper label {
  font-size: 1.3em;
}

#scan-inputs-group #eanInputWrapper label,
#scan-inputs-group #eanInputWrapper input,
#scan-inputs-group #eanInputWrapper button {
  margin: 0 10px;
}

#scan-inputs-group .barcode {
  width: 100%;
  padding: 7px;
}

#scan-inputs-group .barcode .form-inline {
  justify-content: flex-end;
}

#scan-inputs-group .barcode input,
.barcode select {
  margin: 0 15px;
}

#scan-inputs-group .barcode #refcolsizekeyboard,
#scan-inputs-group .barcode #keyboard {
  max-width: 50px;
}

#scan-inputs-group .keyboard {
  display: inline-block;
  vertical-align: middle;
}

#scan-inputs-group #eankeyboard {
  width: auto;
}

#scan-inputs-group #refkeyboard {
  width: 100%;
  background-color: white !important;
}

#scan-inputs-group #colkeyboard {
  width: 79px;
  margin-left: 40px;
}

#scan-inputs-group #sizekeyboard {
  width: 75px;
}

#scan-inputs-group #refcolsizekeyboard {
  width: 50px;
}

#noProductsScannedMessageWrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  padding-top: 150px;
}

#scan-products-list {
  margin-top: 250px;
  overflow-y: auto;
  height: calc(100vh - 264px);
}

.scanProductLine {
  display: flex;
  padding: 10px;
}

.scanProductLine:nth-child(odd) {
  background-color: #ededed;
}

.scanProductLine:not(:last-of-type) {
  border-bottom: 1px solid #ddd;
}

.scanPhotoWrapper img {
  max-height: 150px;
}

.scanDetailsWrapper {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
  color: #111;
}

.scanDetailsWrapper p {
  color: #111;
  margin: 5px;
}

/*Circle btn css : https://bootsnipp.com/snippets/dKB */

.btn-circle {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle-small {
  width: 25px;
  height: 25px;
  padding: 0px;
  font-size: 18px;
  border-radius: 50%;
  margin: 0px 5px;
}

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

.scanQtyWrapper span {
  font-size: 5em;
  margin: 0 20px;
}

#scanProductModalBody {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#scanProductModalBody p {
  color: #111;
  margin: 5px;
  line-height: 1em;
}

#scanProductModalRefColSize {
  font-weight: bold;
}

#scanProductModalQtyScanned {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px !important;
}

#productsNotRegisteredMessage {
  height: 10vh;
  position: fixed;
  top: 90vh;
  width: 100%;
  display: none;
  border-top: 1px solid #111;
  background-color: #dcdcdc;
  font-size: 1.4em;
}

@media screen and (max-width: 670px) {
  .inventory-card {
    width: 48%;
  }
  .scanDetailsName {
    display: none;
  }
  .scanQtyWrapper span {
    font-size: 2.5em;
    margin: 0 5px;
  }
  .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
  }
}

@media screen and (max-width: 470px) {
  .autocomplete-items {
    background-color: #fff;
  }
  #scan-products-list {
    margin-top: 300px;
  }
  .flexEnd {
    align-items: flex-start !important;
  }
  .inventory-card {
    width: 98%;
  }
  #scan-header div {
    transform: scale(0.85);
  }
  #barcodeBtnWrapper div {
    margin-top: 10px;
  }
  #eankeyboard,
  #refkeyboard {
    width: 170px !important;
  }
  #scan-inputs-group div {
    transform: scale(0.8);
  }
  #scan-inputs-group {
    position: relative;
    top: 0;
    padding: 0;
  }
  #barcodeRefColSizeWrapper {
    position: relative;
    left: -40px;
    width: 400px !important;
  }
  #barcodeBtnWrapper {
    position: relative;
    left: -40px;
  }
  #colkeyboard {
    margin-left: 0 !important;
  }
  #refColSizeWrapper {
    justify-content: flex-start !important;
  }
  .barcode select {
    margin: 0 5px 0 0;
    width: 70px !important;
  }
  #scan-inputs-group .barcode input {
    margin: 0 5px;
  }
  .scanPhotoWrapper img {
    max-height: 100px;
  }
  .scanDetailsWrapper {
    padding-left: 5px;
  }
  .scanDetailsWrapper p {
    font-size: 0.9em;
  }
  #scan-products-list {
    height: calc(100vh - 200px);
  }
  #productsNotRegisteredMessage {
    font-size: 0.9em;
  }
  .controlScanHeader h5 {
    font-size: 1.2em !important;
  }
  #compareMiddleHeaderDiv h5 {
    font-size: 1.5em;
  }
  #compareTopTitle {
    font-size: 1.05em !important;
  }
  #differentQtyTable th {
    font-size: 0.7em !important;
  }
  #differentQtyTable td {
    font-size: 0.9em !important;
  }
  .compareProductDetail img {
    max-width: 60px;
  }
  .middle-scan-header-div {
    width: 120%;
  }
  .middle-scan-header-div h5 {
    font-size: 1.2em;
  }
  #reportWrongProductWrapper {
    margin-top: 0px !important;
  }
  #scanProductModalBody img {
    height: 150px;
  }
  #reportWrongProductInput {
    width: 200px;
  }
  #scanProductModalControlsWrapper {
    padding-bottom: 5px;
  }
  #scanProductModalQtyScanned {
    font-size: 1.5em;
  }
  .past-inventory {
    padding: 10px 0;
  }
  .pastInventoryBtn {
    font-size: 12px;
  }
  .inventory-card-zone-name {
    font-size: 16px;
  }
  .scanModeReturnBtnWrapper {
    flex-direction: column;
    justify-content: center;
  }
  .zonesTypeWrapper {
    flex-direction: column;
    align-items: center;
  }
}

#reportWrongProductWrapper {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
}

#eanErrorLabel,
#eanErrorPicture {
  margin-left: 10px;
}

#eanErrorPicture {
  margin-bottom: 10px;
}

#compareControlMainWrapper {
  height: calc(100vh - 50px);
  overflow-y: auto;
}

#compareTopTitle {
  text-align: center;
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 1.5em;
}

#barcodeBtnWrapper {
  justify-content: flex-end !important;
}

#createSizeModalBodyRefWrapper {
  display: flex;
}

#createSizeModalBodyRefWrapper label {
  margin: 7px 10px 0 0;
}

#createSizeModalBodyRefWrapper input {
  max-width: 150px;
  margin-right: 10px;
}

.createSizeModalBodyElementWrapper {
  margin-top: 20px;
}

#createSizeColorSelectLabel {
  margin-right: 28px;
}

#createSizeSelectLabel {
  margin-right: 46px;
}

#createSizeEANLabel {
  margin-right: 52px;
}

#createSizeColorSelect,
#createSizeSelect {
  min-width: 150px;
  margin-right: 20px;
}

#addEanWrapper {
  display: none;
  padding: 10px;
  margin: 10px 0;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #ddd;
}

#addEanWrapper input {
  margin: 10px 0;
}

#createSizeWaiter,
#controlRefSearchWaiter,
#controlZoneListWaiter {
  display: none;
}

#controlRefResult {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#controlRefQty {
  margin: 15px !important;
  width: 120px;
}

.control-ref {
  max-width: 80px !important;
  width: 80px !important;
  margin-right: 10px;
}

#controlRefResult img {
  max-height: 100px;
}

#controlRefResult input {
  width: 40px;
  margin-left: 20px;
}

#controlRefResult .table td {
  vertical-align: middle;
  text-align: center;
}

#scanProductModalControlsWrapper {
  display: flex;
  justify-content: center;
  padding-bottom: 15px;
  width: 100%;
}

#scanProductModalControlsWrapper button {
  margin: 0 10px;
}

.controlLineWrapper {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#controlZoneListWrapper .controlLineWrapper:first-of-type {
  border-top: none;
}

.controlScanHeader {
  background-color: #eb3b30 !important;
}

.controlScanHeader h5 {
  color: #222d32 !important;
  font-size: 1.8em;
}

#compare-control-wrapper {
  padding-top: 40px;
}

#differentQtyTable {
  margin-bottom: 40px;
}

#differentQtyTable th {
  text-align: center;
}

.compareProductDetail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compareCell {
  text-align: center;
  vertical-align: middle !important;
  font-size: 1.5em;
}

.compareCell input {
  margin: auto;
}

.compareProductDetail img {
  width: 100px;
}

.compareFinalQtyInput {
  width: 50px;
}

#correctQtyWrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px;
  background-color: #efefef;
}

#dropdownIcon {
  transition: all 0.4s;
}

#dropdownIcon.dropdownActive {
  transform: rotate(180deg);
}

#correctQtyTableWrapper {
  display: none;
}

#confirmMessageInventoryUpdate {
  padding: 10px 20px;
}

#usersInventoryHistoryBody {
  display: flex;
  flex-direction: column;
}

.userInventoryLine,
.scanUserHistoryBtnWrapper,
.succursalOpsHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scanUserHistoryBtnWrapper {
  margin-right: 20px;
}

#currentInventoryWaiter {
  display: none;
  min-width: 100%;
  text-align: center;
}

#current-inventory-download-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#eanNotFoundMessageWrapper {
  display: flex;
  margin-bottom: 20px;
}

#eanNotFoundMessageInput,
#reportWrongProductInput,
#confirmControlRefQtyChangeBtn {
  margin-right: 10px;
}

#current-inventory-download-wrapper .downloadCSVBtn {
  text-align: center;
  margin-bottom: 20px;
  display: flex !important;
  justify-content: center;
}

#closing-wrapper {
  display: flex;
}

#closing-wrapper input {
  margin-right: 10px;
}

.left-space {
  margin-left: 10px;
}

.bestWorstImg {
  height: 150px;
}

.zoneNameChangeInput {
  width: 100px !important;
}

.zoneNameWrapper {
  /*width: 80%;*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.scanModeReturnBtnWrapper {
  display: flex;
}

.giftcardLine,
.giftcardLineTop,
.gcHistoryLine {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.giftcardLine,
.giftcardLineTop {
  border-bottom: 1px solid #aaa;
}

.giftcardLine:hover {
  background: #efefef;
  cursor: pointer;
}

.giftcardLine.noHistory:hover {
  background: inherit;
  cursor: inherit;
}

.giftcardLine div,
.giftcardLineTop div {
  flex: 1;
}

.giftCardHistory {
  font-size: 0.95em;
  display: none;
  background: #eee;
}

#flowDateBtn {
  height: 38px;
  margin-top: 6px;
}

.zoneWrapper {
  width: 150px;
  height: 150px;
  background: rgb(250, 250, 250);
  box-shadow: 0 0 2px #aaa;
  border-radius: 4px;
  font-size: 0.9em;
  padding: 10px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.zoneWrapper:hover {
  cursor: pointer;
}

.zonesGlobalWrapper h5 {
  margin-top: 20px;
}

.zonesTypeWrapper {
  display: flex;
}

.zoneGlobalPdfWrapper {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100vw;
}

.zonePDFWrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 140mm;
  width: 50vw;
}

.zonePDFWrapper:nth-child(4n) {
  page-break-after: always; /* Force a page break after every 4 zones */
}

.zonePDFWrapper:nth-child(4n + 1) {
  page-break-before: always; /* Start a new page for the first zone */
}

#recapTable th,
#recapTable td {
  text-align: center;
}

.w40 {
  width: 40%;
}

.w60 {
  width: 60% !important;
}

@media screen and (max-width: 670px) {
  #recapTable th,
  #recapTable td {
    text-align: center;
    padding: 0.25rem;
    font-size: 13px;
  }
  #recapTable thead th {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .w60 {
    width: 95% !important;
  }
  .w40 {
    width: 95% !important;
  }
}

#exportGlobalAnalysis {
  margin-left: 10px;
}

#globalAnalysisResultContainer {
  margin: 20px 10px 0 0;
  min-width: 900px;
}

.sub-form-group {
  margin-bottom: 16px;
}

label {
  margin-bottom: 0px;
}

#modalEanForm label {
  margin-bottom: 5px;
}

.nomargin {
  margin: 0;
}

.zonePDFRow {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.zonePDFRowItem {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  width: 100%;
}

.justify-end {
  justify-content: flex-end;
}

.black-rectangle {
  padding: 16px;
  border: solid 1px black;
}

.w-210px {
  width: 160px;
}

.w-120px {
  width: 100px;
}

.bg-color-green {
  background-color: #1da23b5c;
}

.bg-color-blue {
  background-color: #3c8dbc75;
}

.bg-color-orange {
  background-color: #ffc10785;
}

.bg-color-red {
  background-color: #dc35454d;
}

.hidden {
  display: none;
}

.iconContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.iconContainer i {
  margin-right: 10px;
}

.bigIcon {
  font-size: 1.8em;
}

#mixinConfirmModalButtons {
  display: flex;
}

#mixinConfirmModalButtons button {
  margin: 20px 30px 0 0;
  padding: 10px 20px;
  font-size: 18px;
}

#configureScannerModalHeader {
  display: flex;
  align-items: center;
}

#configureScannerModalHeader a {
  margin-left: 10px;
}

/* Permet de cacher des éléments uniquement destinés aux tablettes et aux smartphones */

@media screen and (min-width: 1024px) {
  .mobile-only {
    display: none;
  }
}

.form-div {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
}

/* GESTIONNAIRE DE MAILS */

.mail {
  margin: 20px 35px;
}

.mail input[type="submit"] {
  margin-top: 10px;
}

.sender {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.contact,
.copy {
  margin-bottom: 10px;
}

.contact label {
  width: 12%;
}

.contact .storeDependant {
  width: 25%;
  margin-left: 20px;
}

.contact .storeIndependant,
.copy input[type="text"] {
  width: 30%;
  margin-left: 20px;
}

.copy .copyLabel {
  width: 12%;
  text-align: center;
}

.copy input[type="checkbox"] {
  margin: 0 20px;
}

.add_copy {
  margin-left: 4%;
  margin-right: 20px;
}

.validation .loader {
  vertical-align: middle;
  margin-top: 10px;
  margin-left: 30px;
}

.validation .message {
  vertical-align: bottom;
  padding: 6px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-left: 30px;
}

/* FIN GESTIONNAIRE DE MAILS */

.buttonSave:disabled {
  background-color: #3c8dbc;
  border-color: #367fa9;
}

#errorAbsence {
  color: red;
  font-size: 0.7em;
  margin-top: 10px;
  font-style: italic;
}

#forbiddenIndication {
  font-size: 0.8em;
  font-style: italic;
  margin-top: -10px;
}

.emplacementFilterTitle {
  width: 362px;
  margin-right: 20px;
}

.permission-label {
  margin-left: 5px;
  margin-right: 40px;
}

.permission-group {
  padding: 15px;
  margin-left: 20px;
  margin-top: 20px;
  border-radius: 5px;
  border: 1px solid #ddd2d2;
  background-color: #fbfbfb;
}

#permissions {
  margin-top: 20px;
}

.error-page {
  width: 600px;
  margin: 20px auto 0 auto;
}

.text-yellow {
  color: #f39c12 !important;
}

#retour-accueil-btn {
  border-radius: 3px;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  background-color: #f4f4f4;
  color: #444;
  border-color: #ddd;
}

.errorRow {
  margin-right: -15px;
  margin-left: -15px;
}

.permissionContainer {
  margin-left: 20px;
  margin-bottom: 5px;
}

/* Administration des caisses des boutiques */

.storeDesks {
  margin-top: 20px;
}

.desk {
  display: inline-block;
  position: relative;
  border: 1px solid #00000052;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  text-align: center;
  background-color: #d3d3d37a;
  margin-right: 20px;
}

.desk p {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: black;
  font-weight: 800;
}

#addDesk {
  cursor: pointer;
}

.deleteDesk {
  position: absolute;
  right: -5px;
  top: -5px;
  cursor: pointer;
  color: red;
  background-color: white;
  border-radius: 15px;
}

#errorDesk {
  color: red;
}

#franchisesGroupError {
  color: red;
}

.indication {
  font-style: italic;
  font-size: 0.8em;
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.labelRow {
  margin-bottom: 8px;
}

.labelRow label {
  margin-right: 10px;
}

.pleaseEnterDatesAlert {
  margin-top: 10px;
}

.headerButton {
  margin-right: 10px;
}

.firstColumn {
  width: 20%;
}

.cancelledProductLine {
  display: none;
}

.itemRow {
  display: none;
  background-color: white !important;
}

.invoiceRow {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.labelCell {
  text-align: left !important;
  padding-left: 10% !important;
  font-weight: 800;
}

#salesLogTable {
  margin-bottom: 40px;
}

#salesLogTable h6 {
  margin-left: 20px;
}

#salesLogTable td,
#salesLogTable th {
  text-align: center;
}

#showSuccursalOps {
  cursor: pointer;
  font-size: 40px;
  margin-right: 20px;
  padding: 5px;
}

.rotated {
  transform: rotate(180deg);
  transition: transform 0.3s linear;
}

.buttons-row {
  text-align: right;
  margin-bottom: 10px;
}

.addBarcode,
.removeBarcode {
  padding: 0.375rem 0.5rem !important;
  margin-left: 3px;
  margin-bottom: 3px;
}

#shareDraftUsers {
  overflow-y: scroll;
  height: 200px;
  width: 80%;
  margin: 0 auto;
}

.draftUser {
  cursor: pointer;
}

.draftUserChecked {
  background-color: #d4edda;
}

.referencesBloc {
  height: 400px;
  overflow-y: scroll;
  text-align: center;
}

.referenceLine {
  cursor: pointer;
  margin-bottom: 4px;
}
.referenceLine:hover {
  background-color: lightgrey;
}

.legendColor {
  width: 30px;
  height: 12px;
  border: 1px solid black;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: 6px;
}

.buttonLike {
  height: 38px;
  display: flex;
  align-items: center;
}

.find-product-form .ms-parent,
#store_picker_form .ms-parent {
  height: calc(2.25rem + 2px);
}

#store_picker_form .turnover-label {
  line-height: calc(2.25rem + 2px);
}

#store_picker_form {
  vertical-align: middle;
}

.find-product-form .ms-parent button,
#store_picker_form .ms-parent button {
  height: 100%;
  line-height: calc(2.25rem + 2px);
  text-align: center;
  vertical-align: middle;
}

.storesSelectContainer .ms-parent {
  width: 244px !important;
}

.linearCapacityTitle {
  margin-bottom: 18px;
}

.linearCapacityTable {
  table-layout: fixed;
  width: 100%;
}

.select-dates {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.mailsTitle {
  margin: 20px;
}

.demo-multiple-checkbox {
  height: 38px;
  min-height: 38px;
  font-size: 15px;
}

.racksContainer {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 50px;
}

.rackContainer {
  height: 50px;
  text-align: center;
}

.depot-inventory-zone {
  display: none;
}
.MuiMenuItem-root {
  height: 37px;
}

.MuiFormControl-root {
  width: 200px;
}

@media screen and (max-width: 1024px) {
  .divOnMobile {
    display: flex;
    flex-direction: column;
  }

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

  .modalOnMobile {
    width: 400px;
  }
  .modalBodyOnMobile {
    width: 100%;
  }

  .modal-footer-mobile {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
  }

  .modal-btn {
    margin-bottom: 5px;
  }
}

@media screen and (min-width: 1024px) {
  .divOnMobile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .divOnMobileFlexEnd {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .modalOnMobile {
    width: 1000px;
  }

  .modal-footer-mobile {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
    justify-content: flex-end;
  }

  .modal-btn {
    margin-right: 5px;
  }
}

.divRowColumnOnSmallMedia {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0px;
}

@media screen and (max-width: 1024px) {
  .divRowColumnOnSmallMedia {
    flex-direction: column;
  }
}

.strippedRow tr:nth-child(even) {
  background-color: #f2f2f2;
}

.stepper-wrapper {
  font-family: Arial;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  border: 4px solid #ccc;
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  margin-bottom: 6px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.completed .step-counter {
  background-color: #4bb543;
  border: 4px solid #35852f;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 4px solid #4bb543;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0px 0px 3px #000000;
  width: 100;
  height: 100;
}

.monitoring-title {
  font-size: 32px;
  border-bottom: 2px solid #adadad;
  margin-bottom: 15px;
}

.monitoring-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.monitoring-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 450px;
  border-radius: 10px;
  border: 1px solid rgb(175 175 175);
  padding: 15px;
}

.monitoring-item-title {
  font-size: 20px;
  font-weight: 500;
}

.monitoring-section {
  margin-bottom: 45px;
}

.monitoring-little-text {
  font-size: 16px;
  font-weight: 500;
}

:root {
  --tooltip-text-color: white;
  --tooltip-background-color: black;
  --tooltip-margin: 30px;
  --tooltip-arrow-size: 6px;
}

.Tooltip-Wrapper {
  display: inline-block;
  position: relative;
}

.Tooltip-Tip {
  position: absolute;
  border-radius: 15px;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px;
  color: var(--tooltip-text-color);
  background: var(--tooltip-background-color);
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1;
  z-index: 100;
  white-space: nowrap;
  border: 2px solid #837f7f;
}

.lds-dual-ring-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.lds-dual-ring {
  width: 10%;
  height: auto;
}

.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #000000;
  border-color: #000000 transparent #000000 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.grid-container {
  display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
  overflow: auto;
  max-width: 100%;
}
.grid {
  display: flex;
  flex-wrap: nowrap;
}
.grid-col {
  width: 100px;
  min-width: 100px;
}

.grid-col:nth-child(even) {
  background-color: #f2f2f2;
}

.grid-col:nth-child(odd) {
  background-color: #ffffff;
}

.grid-item--header {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: sticky;
  position: -webkit-sticky;
  background: #3c8dbc;
  color: white;
  top: 0;
  display: flex;
  justify-content: center;
  font-weight: bold;
  height: 120px !important;
}

.grid-item--header-store {
  border: 1px solid white !important;
}
.grid-item--header-search {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border: 1px solid grey !important;
}

.grid-col--fixed-left {
  position: sticky;
  left: 0;
  z-index: 100;
  color: white;
  width: 150px;
  font-weight: bold;
}
.grid-col--fixed-right {
  position: sticky;
  right: 0;
  z-index: 100;
  color: white;
  font-weight: bold;
  width: 120px !important;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.grid-item {
  padding: 10px;
  height: 50px;
  border: 1px solid gray;
}

.grid-item:last-child {
  border-bottom: none;
}

.grid-item-align {
  display: flex;
  align-content: center;
  align-items: center;

  border: none;
}

.grid-item-align-right {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  border: none !important;
}

.left-shadow {
  box-shadow: -5px 0px 15px -3px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: -5px 0px 15px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -5px 0px 15px -3px rgba(0, 0, 0, 0.75);
  border-right: none !important;
}

.right-shadow {
  box-shadow: 5px 0px 15px -3px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 5px 0px 15px -3px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 0px 15px -3px rgba(0, 0, 0, 0.75);
  border-left: none;
}

.grid-bordered {
  border: 1px solid black;
  background: #3c8dbc !important;
}

.grid-action {
  background-color: white;
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 120px;
  color: black;
}

.grid-action-checkboxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
}

.grid-action-checkboxes-item {
  display: flex;
  gap: 5px;
}

.grid-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.page-item {
  margin: 0 5px;
}

.page-link {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ddd;
  color: #337ab7;
}

.page-link:hover {
  background-color: #eee;
}

.page-item.disable .page-link {
  color: #777;
  cursor: default !important;
}

.page-link.active {
  background-color: #337ab7;
  color: #fff !important;
}

.display-comments {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  direction: rtl;
  padding: 15px;
}

.display-comments::-webkit-scrollbar {
  width: 1em;
}

.display-comments::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.display-comments::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.toast {
  position: fixed;
  top: 20px;
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
  min-width: 500px;
  font-size: larger;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid #000000;
  z-index: 1000;
}

.toast--success {
  background-color: #4caf50;
}

.toast--error {
  background-color: #f44336;
}

.toast--warning {
  background-color: #ff9800;
}

.toast--info {
  background-color: #2196f3;
}

.old_price {
  text-decoration: line-through;
  color: red;
}

.new_price {
  color: green;
}
.danger_input {
  border: 1px solid red !important;
}

.cross-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.score-element {
  border-style: double;
  border-width: 5px;
  border-radius: 50%;
  padding: 15px;
  text-align: center;
}

.clientsContainer,
.storesContainer,
.sortOptionsContainer,
.desksContainer {
  display: flex;
  flex-wrap: wrap;
}

.storeButton,
.storeButton:hover,
.clientButton,
.clientButton:hover,
.optionButton,
.optionButton:hover,
.deskButton,
.deskButton:hover {
  cursor: pointer;
  width: calc(100% / 3 - 6px);
  height: 66px;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  margin-bottom: 10px;
  padding: 20px 5px;
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  margin: 3px;
}

/* Change the width of the option button */
.optionButton,
.optionButton:hover {
  width: calc(100% / 2 - 6px);
}

.optionButton:hover {
  background-color: #eee;
}

/* Effet pour mettre un boutton en "sélectionné" */
.optionButton.selected {
  background-color: #111;
  color: #fff;
}

/* The icon of a client/brand */
img.iconClient {
  height: 60px;
  max-height: 60px;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 0px;
}

.clientButton,
.clientButton:hover {
  height: 105px;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

.clientButton span,
.clientButton:hover span {
  line-height: 14px;
  font-size: 14px;
}

#brands_list {
  width: calc(100% - 20px);
  box-sizing: border-box;
  margin-block: 20px;
  margin-inline: 10px;
}

#brands_list th {
  background-color: #ccc;
}

#brands_list td,
#brands_list th {
  font-size: 14px;
  padding: 5px 20px;
}

#brands_form {
  margin-block: 20px;
  margin-inline: 10px;
  display: flex;
  justify-content: space-between;
}

.remove-brand {
  width: 50%;
  margin-left: 50%;
  transform: translateX(-50%);
  border: none;
  background-color: #f34;
  color: #fff;
  border-radius: 3px;
  font-weight: 800;
  font-size: 15px;
  transition: 0.3s;
}

.removed {
  background-color: #c23 !important;
  opacity: 0.5;
  transition: 0.3s;
}

.removed .remove-brand {
  background-color: #3f5;
}

.removed:hover {
  background-color: #2c3 !important;
  opacity: 0.8;
}

.modified-brand {
  background: #ddf3ff !important;
  border-color: #000a !important;
}

.multi-client-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.multi-client-form section label {
  font-weight: 500;
}
.multi-client-form section span {
  font-size: 14px;
  color: #000c;
}

#listMultiClient {
  margin: 20px;
}

#listMultiClient ul {
  padding: 0px;
  display: flex;
  gap: 5px;
  justify-content: left;
  flex-wrap: wrap;
}

#listMultiClient li,
#listMultiClient a {
  display: flex;
  width: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  height: 100px;
  gap: 4px;
}

#listMultiClient img {
  width: 60px;
  border-radius: 5px;
}

#viewMultiClient {
  padding: 1vw;
  display: flex;
  gap: 1vw;
  position: relative;
}

#viewMultiClient aside,
#viewMulticlient main,
#viewMultiClient table {
  max-width: 500px;
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 2px solid #0005;
  border-radius: 5px;
  padding-block: 10px;
}

#viewMultiClient main {
  max-width: 1000000px;
  width: calc(100% - min(30%, 500px) - 3vw);
  position: absolute;
  right: 1vw;
  align-items: start;
  padding: 10px;
  font-size: 20px;
}

#viewMultiClient table {
  position: absolute;
  top: 0px;
  right: 1vw;
  max-width: 1000000px;
  width: calc(100% - min(30%, 500px) - 3vw);
  padding: 10px;
}

#viewMultiClient aside img {
  width: 90%;
  border-radius: 5px;
}

#viewMultiClient aside h5 {
  font-size: min(2.5vw, 50px);
  width: 100%;
  line-height: min(2.5vw, 50px);
  text-align: center;
  margin: 0;
}

#viewMultiClient aside {
  max-width: 500px;
  width: 30%;
}

#viewMultiClient main input {
  height: 25px;
  font-size: 18px;
}

#viewMultiClient main .modify {
  border: none;
  background: none;
  color: #07fe;
  font-size: 16px;
  text-decoration: underline;
  transform: translate(-5px, -5px);
}

#viewMultiClient main .submit {
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-modify {
  display: flex;
  gap: 5px;
}

#selectReception {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#selectReception main {
  width: 90%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

#selectReception main .outer-button-select {
  height: 20%;
  width: 45%;
  border-radius: 5px;
  font-size: 20px;
}

#selectReception main .outer-button-select button {
  width: 100% !important;
  height: 100% !important;
}

#selectReception main .outer-button-select a {
  width: 100% !important;
  height: 100% !important;
}

/* Écran affichant qu'il n'y a pas de produit avec ce code EAN */
.noProductModal .modal,
.noProductModal .modal-content {
  border-radius: 5px;
}

.noProductModal .modal-dialog {
  margin-block: 0;
  margin-top: 50vh;
  transform: translateY(-50%) !important;
}

.noProductModal .modal-header {
  border: none;
  flex-direction: column;
  text-align: center !important;
  width: 100%;
  gap: 10px;
}

.noProductModal .modal-header h5 {
  width: 100%;
  font-size: 24px;
  color: #444;
  font-weight: 700;
  text-align: center;
}

.noProductModal form {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.noProductModal form section {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.noProductModal form section span {
  font-weight: 500;
  display: block;
}

header.header-other-reception {
  display: flex;
  justify-content: space-between;
}

.selectStore {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  height: 100%;
  gap: 10px;
  padding-block: 20px;
  width: 100%;
}

.selectStore h5 {
  text-align: center;
  width: 100%;
}

.selectStore ul {
  padding-inline: 20px;
  display: grid;
  /* width: calc(100% - 40px); */
  width: 100%;
  grid-template-columns: repeat(auto-fill, max(7vw, 75px));
  grid-gap: 3px;
  justify-content: space-between;
  max-height: 300px;
  overflow-y: auto;
}

.selectStore li {
  width: max(7vw, 75px);
  background: #eee;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 5px;
  border: 1px #0004 solid;
  transition: 0.3s;
  cursor: pointer;
  font-size: 14px;
}

.selectStore li.sel {
  order: -1;
  background: #000;
  color: #fff;
}

.selectStore li:hover {
  background: #ddd;
}

.selectStore li.sel:hover {
  order: -1;
  background: #222;
  color: #fff;
}

.selectReception {
  display: flex;
  width: 100%;
  height: 100%;
}

.selectReception a {
  width: 50%;
}

.formReception {
  width: 100%;
  min-height: 100%;
  padding: 10px;
  position: relative;
}
.formReception input[type="submit"] {
  position: absolute;
  right: 10px;
  bottom: 50px;
}
.formReception input[type="radio"] {
  margin-right: 5px;
}
.delete-reception {
  background: #f34;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}

#otherReception {
  /* min-height: 100vh; */
  /* height: auto; */
  position: relative;
}

.buttons-bottom {
  display: flex;
  gap: 5px;
}

/* button.submit-reception { */
/* 	position: absolute; */
/* 	bottom: 0px; */
/* 	left: 50%; */
/* 	transform: translate(-50%, -50%); */
/* } */

.returnItemStockIncrementCheckbox,
#litigeDisableRestockTJMAXCheckbox {
  max-width: 150px;
  font-size: clamp(0.4em, 1vw, 1em);
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.recap {
  background: #cfc;
  border: 2px #0204 solid;
  padding: 5px;
  border-radius: 5px;
  color: #151;
}

.delete-article .modal-content {
  padding: 10px;
}

.delete-article table {
  width: 100%;
}

.delete-article footer {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-not {
  background: #bbba;
  color: #0008;
  cursor: not-allowed !important;
}

.page-switch {
  width: 100%;
  display: flex;
  gap: 3px;
  justify-content: center;
}

.page-switch button {
  color: #fff;
  background: #3c8dbc;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.page-switch button:hover {
  color: #fff;
  background: #2c7dac;
  border: none;
  border-radius: 5px;
}

.page-switch button.selected {
  color: #fff;
  background: #1c6d9c !important;
  border: none;
  border-radius: 5px;
}

.page-switch .number {
  width: 50px;
}

.page-switch .arrow {
  width: 30px;
}

.cancel-reception .outer-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 5px;
}

/* .pop-up-price { */

/* } */

.pop-up-price b {
  font-weight: 500;
}

.pop-up-price .buttons {
  display: flex;
  justify-content: center;
  align-content: center;
  gap: 5px;
}

.database-content-button {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.database-content-button .btn-primary {
  width: 175px;
  height: 40px;
  margin: 0 !important;
}

.title-database.card-title h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
}

@media (max-width: 1515px) {
  .title-database.card-title h5 {
    height: 85px;
  }
}

@media (max-width: 1025px) {
  .title-database.card-title h5 {
    height: auto;
  }
}

.locations-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.mode-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.stockQuantityTooltip {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.2s linear;
}

.stockQuantityTooltipTrigger {
  cursor: pointer;
}

.stockQuantityTooltipTrigger:hover ~ .stockQuantityTooltip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.vertical-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.horizontal-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.badge-container {
  position: relative;
  display: inline-block;
}

.delete-size-button {
  position: absolute;
  bottom: -6px;
  right: -6px;
  border-radius: 5px;
  font-size: 0.8rem;
  cursor: pointer;
}

.delete-size-button:hover {
  border: solid 1px black;
}

.help-tip {
  display: flex;
  align-items: center;
  text-align: center;
}

.help-tip-mark {
  margin-left: 5px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: "center";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid rgb(97, 95, 95);
  color: rgb(97, 95, 95);
  font-size: 10px;
  font-weight: bold;
  line-height: 15px;
  text-align: center;
}

.help-tip h5 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.tooltip-text {
  display: none;
  position: absolute;
  background-color: #f2f4f5;
  color: #b9b3b3;
  padding: 10px;
  box-shadow: 0px 10px 13px -7px #000000;
}

.help-tip-mark:hover + .tooltip-text {
  display: block;
}

.tooltip-text:hover {
  display: block;
}

.fc-scroller-canvas {
  width: 1690px !important;
}

.vr {
  border: 1px solid lightgrey;
  margin-left: 12px;
  margin-right: 12px;
}

.flex {
  display: "flex";
}

@media screen and (max-width: 670px) {
  .flex {
    flex-direction: column;
  }
}

.ignore-margin-top {
  margin-top: 0px !important;
}