@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap);
.carousel .control-arrow,.carousel.carousel-slider .control-arrow{
  transition:all .25s ease-in;
  opacity:.4;
  filter:alpha(opacity=40);
  position:absolute;
  z-index:2;
  top:20px;
  background:none;
  border:0;
  font-size:32px;
  cursor:pointer
}

.carousel .control-arrow:hover{
  opacity:1;
  filter:alpha(opacity=100)
}

.carousel .control-arrow:before,.carousel.carousel-slider .control-arrow:before{
  margin:0 5px;
  display:inline-block;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  content:''
}

.carousel .control-disabled.control-arrow{
  opacity:0;
  filter:alpha(opacity=0);
  cursor:inherit;
  display:none
}

.carousel .control-prev.control-arrow{
  left:0
}

.carousel .control-prev.control-arrow:before{
  border-right:8px solid #fff
}

.carousel .control-next.control-arrow{
  right:0
}

.carousel .control-next.control-arrow:before{
  border-left:8px solid #fff
}

.carousel-root{
  outline:none
}

.carousel{
  position:relative;
  width:100%
}

.carousel *{
  box-sizing:border-box
}

.carousel img{
  width:100%;
  display:inline-block;
  pointer-events:none
}

.carousel .carousel{
  position:relative
}

.carousel .control-arrow{
  outline:0;
  border:0;
  background:none;
  top:50%;
  margin-top:-13px;
  font-size:18px
}

.carousel .thumbs-wrapper{
  margin:20px;
  overflow:hidden
}

.carousel .thumbs{
  transition:all .15s ease-in;
  transform:translate3d(0, 0, 0);
  position:relative;
  list-style:none;
  white-space:nowrap
}

.carousel .thumb{
  transition:border .15s ease-in;
  display:inline-block;
  margin-right:6px;
  white-space:nowrap;
  overflow:hidden;
  border:3px solid #fff;
  padding:2px
}

.carousel .thumb:focus{
  border:3px solid #ccc;
  outline:none
}

.carousel .thumb.selected,.carousel .thumb:hover{
  border:3px solid #333
}

.carousel .thumb img{
  vertical-align:top
}

.carousel.carousel-slider{
  position:relative;
  margin:0;
  overflow:hidden
}

.carousel.carousel-slider .control-arrow{
  top:0;
  color:#fff;
  font-size:26px;
  bottom:0;
  margin-top:0;
  padding:5px
}

.carousel.carousel-slider .control-arrow:hover{
  background:rgba(0,0,0,0.2)
}

.carousel .slider-wrapper{
  overflow:hidden;
  margin:auto;
  width:100%;
  transition:height .15s ease-in
}

.carousel .slider-wrapper.axis-horizontal .slider{
  -ms-box-orient:horizontal;
  display:-moz-flex;
  display:flex
}

.carousel .slider-wrapper.axis-horizontal .slider .slide{
  flex-direction:column;
  flex-flow:column
}

.carousel .slider-wrapper.axis-vertical{
  -ms-box-orient:horizontal;
  display:-moz-flex;
  display:flex
}

.carousel .slider-wrapper.axis-vertical .slider{
  flex-direction:column
}

.carousel .slider{
  margin:0;
  padding:0;
  position:relative;
  list-style:none;
  width:100%
}

.carousel .slider.animated{
  transition:all .35s ease-in-out
}

.carousel .slide{
  min-width:100%;
  margin:0;
  position:relative;
  text-align:center;
  background:#000
}

.carousel .slide img{
  width:100%;
  vertical-align:top;
  border:0
}

.carousel .slide iframe{
  display:inline-block;
  width:calc(100% - 80px);
  margin:0 40px 40px;
  border:0
}

.carousel .slide .legend{
  transition:all .5s ease-in-out;
  position:absolute;
  bottom:40px;
  left:50%;
  margin-left:-45%;
  width:90%;
  border-radius:10px;
  background:#000;
  color:#fff;
  padding:10px;
  font-size:12px;
  text-align:center;
  opacity:0.25;
  transition:opacity .35s ease-in-out
}

.carousel .control-dots{
  position:absolute;
  bottom:0;
  margin:10px 0;
  padding:0;
  text-align:center;
  width:100%
}

@media (min-width: 960px){
  .carousel .control-dots{
    bottom:0
  }
}

.carousel .control-dots .dot{
  transition:opacity .25s ease-in;
  opacity:.3;
  filter:alpha(opacity=30);
  box-shadow:1px 1px 2px rgba(0,0,0,0.9);
  background:#fff;
  border-radius:50%;
  width:8px;
  height:8px;
  cursor:pointer;
  display:inline-block;
  margin:0 8px
}

.carousel .control-dots .dot.selected,.carousel .control-dots .dot:hover{
  opacity:1;
  filter:alpha(opacity=100)
}

.carousel .carousel-status{
  position:absolute;
  top:0;
  right:0;
  padding:5px;
  font-size:10px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.9);
  color:#fff
}

.carousel:hover .slide .legend{
  opacity:1
}

:root{
  --primary: #0067e2;
  --text: #000126;
  --text-light: #333340;
  --gray: #676773;
  --gray-dark: #b7b7c2;
  --blue-two: #f6f7f9;
  --blue-voilet: #6E6CB2;
  --gray-light: #ccc;
  --gray-light-2: #f2f2f2;
  --gray-light-3: #93939f;
  --gray-light-5: #e5e5e5;
  --gray-light-6: #f5f5f5;
  --gray-light-7: #ddd;
  --white: #fff;
  --green: #27ae60;
  --primaryGreen: #27AE60;
  --lightGreen: #EDFEF4;
  --green-bg: #edfef4;
  --green-bg-2: #e7fff1;
  --green-bg-3: #6fcf97;
  --primary-green: #C6F8DB;
  --red: #eb5757;
  --red-bg: #fffaf5;
  --red-bg-2: #fff9f9;
  --red-bg-3: #fff5eb;
  --orange: #f2994a;
  --orange-dark: #dd750e;
  --orange-light: #fff5ed;
  --secondary-bg: #f2f8ff;
  --yellow: #f2c94c;
  --yellow-dull: #ffd687;
  --yellow-bg: #fffee6;
  --yellow-bg-2: #fffee5;
  --purple: #a6a5c6;
  --purple-dark: #bb6bd9;
  --purple-dark-1: #6f4ce5;
  --purple-dark-2: #9b51e0;
  --purple-secondary-dark: #8180b0;
  --purple-light: #e1e1ea;
  --purple-light-opacity-33: #e1e1ea33;
  --purple-light-opacity: rgba(225, 225, 234, 0.2);
  --purple-bg: #fdf6ff;
  --violet: #3944b4;
  --teal: #ebfdff;
  --blue-2: #2d9cdb;
  --blue-light: #cee4ff;
  --placeholder: #93939f;
  --bg: #f9faff;
  --bg-2: #f2f4f7;
  --bg-3: #f7faff;
  --border: #d4d4d4;
  --border-light: #f1f1f1;
  --gray-light-8: #c4c4c4;
  --primary-shadow: rgba(0, 103, 226, 0.12);
  --solid-black: #000;
  --neutralV1: #6E6CB2;
  --certifiedPurple: #6B68CF;
  --primary-purple: #F9E6FF;
  --primary-voilet: #9896D9;
  --gray2:  #626870;
  --gray3: #303C4A;
  --primary-teal-1: #008B9D;
  --primary-teal-4: #F2FEFF;
  --gray-light-9: #92979c
}

.red{
  color:var(--red)
}

.bg-red{
  background-color:var(--red)
}

.green{
  color:var(--green)
}

.bg-green{
  background-color:var(--green)
}

.bg-transparent{
  background-color:transparent
}

.blue-two{
  color:var(--blue-two)
}

.bg-blue-two{
  background-color:var(--blue-two) !important
}

body{
  color:var(--text);
  font-family:'Nunito Sans', sans-serif;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
  background-color:var(--gray-light-2)
}

*{
  box-sizing:border-box;
  font-size:14px;
  line-height:20px
}

.buttonPrimary{
  color:var(--white);
  height:48px !important
}

.buttonPrimary:disabled{
  opacity:0.5
}

button.linkBlue,div.linkBlue{
  color:var(--primary);
  font-size:14px;
  font-weight:700
}

.eyeButton{
  margin-top:8px
}

.eyeButton:focus{
  outline:none
}

.backButton{
  align-items:center;
  border-radius:50%;
  display:flex;
  height:56px;
  justify-content:center;
  width:56px
}

.backButton .arrow{
  height:16px;
  width:16px
}

.backButton:focus{
  outline:none
}

.formButton{
  height:40px !important
}

button.containedButton{
  background:rgba(225,225,234,0.2);
  border-radius:16px;
  color:var(--gray);
  padding:4px 12px
}

.formLabel{
  color:var(--gray);
  font-size:12px !important;
  font-weight:600 !important;
  margin-bottom:6px
}

.formError{
  color:var(--red);
  font-size:12px;
  font-weight:600;
  margin-top:8px
}

.formWrapperFooter.fixed{
  background:var(--white);
  bottom:0;
  display:flex;
  left:0;
  padding:8px 24px;
  position:fixed;
  width:100%;
  z-index:2
}

.formWrapperFooter.fixed button{
  margin-top:0 !important
}

.formWrapperFooter.fixed .formButtonNext{
  flex:none;
  height:40px;
  width:112px
}

@media (min-width: 1024px){
  .formWrapperFooter.fixed{
    max-width:40%;
    left:30%
  }
}

input::-moz-placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif
}

input:-ms-input-placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif
}

input::placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif
}

input.input{
  background-color:var(--white);
  border-color:var(--border);
  border-radius:8px;
  box-shadow:none !important;
  font-size:14px !important;
  height:48px !important
}

input.input::-moz-placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif;
  font-size:14px
}

input.input:-ms-input-placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif;
  font-size:14px
}

input.input::placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif;
  font-size:14px
}

textarea.textarea{
  border-color:var(--border);
  box-shadow:none !important;
  font-size:14px !important;
  resize:none !important
}

textarea.textarea::-moz-placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif;
  font-size:14px
}

textarea.textarea:-ms-input-placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif;
  font-size:14px
}

textarea.textarea::placeholder{
  color:var(--placeholder);
  font-family:'Nunito Sans', sans-serif;
  font-size:14px
}

.dHidden{
  display:none
}

input.inputButton{
  border-color:var(--border);
  color:var(--placeholder);
  font-size:14px;
  font-weight:normal;
  justify-content:flex-start
}

input.inputButton::-moz-placeholder{
  color:var(--placeholder)
}

input.inputButton:-ms-input-placeholder{
  color:var(--placeholder)
}

input.inputButton::placeholder{
  color:var(--placeholder)
}

.formLabel{
  font-weight:normal
}

.requiredLabel{
  font-size: 12px;
  background:rgba(255,250,245,0.5);
  border-radius:8px;
  color:var(--orange);
  margin-right:16px;
  padding:2px 4px
}

.chakra-input__group input{
  border-radius:8px;
  color:var(--text)
}

.chakra-input__group .chakra-input__right-addon{
  background:var(--gray-light-2);
  border-color:var(--border);
  color:var(--gray);
  height:48px;
  padding-right:16px;
  border-left-width:0
}

.chakra-input__group.withRightAddon input:focus{
  border:1px solid var(--primary);
  border-radius:4px;
  border-bottom-right-radius:0;
  border-right:transparent;
  border-top-right-radius:0
}

.chakra-input__group.withRightAddon input:focus+div{
  border:1px solid var(--primary);
  border-left:transparent
}

.chakra-input__group.withRightAddon input:focus .chakra-input__right-addon{
  border:0
}

.chakra-input__group.withRightAddon input{
  border-bottom-right-radius:0;
  border-right:0;
  border-top-right-radius:0
}

.chakra-input__group.withRightAddon .chakra-input__right-addon{
  border-left:0
}

.chakra-input__group.withRightElement .element{
  color:var(--placeholder);
  height:48px
}

label.label{
  color:var(--gray);
  font-size:12px;
  font-weight:normal
}

.inactiveInput{
  cursor:not-allowed;
  opacity:0.5;
  pointer-events:none
}

.checkboxContainer__checkbox{
  border-radius:2px;
  height:18px;
  margin:0;
  margin-right:14px;
  width:18px
}

.checkboxContainer input[type='checkbox']:disabled+span::after{
  left:-12px;
  opacity:0.6
}

.checkboxContainer input[type='checkbox']:disabled+span::before{
  border:0
}

.checkboxContainer input[type='checkbox']:not(:checked),.checkboxContainer input[type='checkbox']:checked{
  left:-9999px;
  position:absolute
}

.checkboxContainer [type='checkbox']:not(:checked)+span,.checkboxContainer [type='checkbox']:checked+span{
  padding-left:34px;
  position:relative
}

.checkboxContainer [type='checkbox']:checked+span{
  color:var(--primary);
  font-weight:600
}

.checkboxContainer [type='checkbox']:not(:checked)+span::before,.checkboxContainer [type='checkbox']:checked+span::before{
  background:var(--white);
  border:1px solid var(--gray-light-3);
  border-radius:2px;
  content:'';
  height:18px;
  left:0;
  position:absolute;
  top:0;
  width:18px
}

.checkboxContainer [type='checkbox']:not(:checked)+span::after,.checkboxContainer [type='checkbox']:checked+span::after{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTcgMTRMMiA5LjE5MjMxTDMuNCA3Ljg0NjE1TDcgMTEuMzA3N0wxNC42IDRMMTYgNS4zNDYxNUw3IDE0WiIgZmlsbD0iIzAwNjdFMiIvPgo8L3N2Zz4K);
  font-size:1.3em;
  height:18px;
  left:0;
  line-height:0.8;
  position:absolute;
  top:0;
  transition:all 0.2s;
  width:18px
}

.checkboxContainer [type='checkbox']:not(:checked)+span::after{
  opacity:0
}

.react-datepicker{
  background-color:var(--white);
  border:0 !important;
  font-family:'Nunito Sans', sans-serif !important;
  margin-top:6px;
  width:100%
}

.react-datepicker .react-datepicker__day--today{
  background-color:var(--blue-light) !important;
  color:var(--primary) !important;
  font-weight:normal !important
}

.react-datepicker .react-datepicker__navigation--previous{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjIzNSAzLjIzMmEuOC44IDAgMDEwIDEuMTNMNi41OTcgOGwzLjYzOCAzLjYzN2EuOC44IDAgMDEtMS4xMzEgMS4xMzFMNC4zMzYgOGw0Ljc2OC00Ljc2OGEuOC44IDAgMDExLjEzIDB6IiBmaWxsPSIjMDAwMTI2Ii8+PC9zdmc+);
  border:0;
  filter:brightness(0) saturate(100%) invert(41%) sepia(1%) saturate(3332%) hue-rotate(202deg) brightness(97%) contrast(94%);
  height:16px;
  left:24px;
  top:18px;
  width:16px
}

.react-datepicker .react-datepicker__navigation--next{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjIzNSAzLjIzMmEuOC44IDAgMDEwIDEuMTNMNi41OTcgOGwzLjYzOCAzLjYzN2EuOC44IDAgMDEtMS4xMzEgMS4xMzFMNC4zMzYgOGw0Ljc2OC00Ljc2OGEuOC44IDAgMDExLjEzIDB6IiBmaWxsPSIjMDAwMTI2Ii8+PC9zdmc+);
  border:0;
  filter:brightness(0) saturate(100%) invert(41%) sepia(1%) saturate(3332%) hue-rotate(202deg) brightness(97%) contrast(94%);
  height:16px;
  left:164px;
  right:unset;
  top:18px;
  transform:rotate(180deg);
  width:16px
}

.react-datepicker .react-datepicker__month-container{
  float:none
}

.react-datepicker .react-datepicker__month-container .react-datepicker__header{
  background-color:transparent;
  border-bottom:0;
  padding-top:16px
}

.react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__current-month{
  color:var(--text);
  font-size:14px;
  font-weight:600;
  margin-bottom:14px;
  margin-left:56px;
  text-align:left
}

.react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__day-names{
  display:flex;
  justify-content:space-around;
  margin-bottom:8px;
  padding:4px 0
}

.react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__day-names .react-datepicker__day-name{
  color:var(--gray);
  font-size:12px;
  margin:0;
  width:40px
}

.react-datepicker .react-datepicker__month-container .react-datepicker__month{
  font-size:14px;
  margin:0
}

.react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week{
  display:flex;
  justify-content:space-around;
  padding-bottom:6px;
  padding-top:6px
}

.react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day{
  align-items:center;
  border-radius:50%;
  color:var(--text);
  display:inline-flex;
  height:40px;
  justify-content:center;
  margin:0;
  width:40px
}

.react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day:focus{
  outline:none
}

.react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--outside-month{
  opacity:0.4
}

.react-datepicker .react-datepicker__month-container .react-datepicker__day--selected{
  background-color:var(--primary) !important;
  color:var(--white) !important
}

.react-datepicker .react-datepicker__month-container .react-datepicker__day--keyboard-selected{
  background-color:unset
}

.react-datepicker .react-datepicker__month-container .react-datepicker__day--outside-month{
  color:var(--text) !important;
  opacity:1 !important
}

.react-datepicker .react-datepicker__month-container .react-datepicker__day--disabled{
  color:var(--gray-light) !important
}

.smallStyleDatePicker{
  height:auto;
  width:288px !important
}

.smallStyleDatePicker .react-datepicker{
  margin-top:0
}

.smallStyleDatePicker .react-datepicker .react-datepicker__month-container .react-datepicker__header .react-datepicker__day-names{
  margin:0;
  padding:0
}

.smallStyleDatePicker .react-datepicker .react-datepicker__month-container .react-datepicker__month{
  font-size:12px;
  padding-top:8px
}

.smallStyleDatePicker .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week{
  padding:8px 0
}

.smallStyleDatePicker .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day{
  font-size:12px;
  height:26px;
  position:relative;
  width:26px
}

.smallStyleDatePicker .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--highlighted{
  background-color:var(--white);
  border:1px solid var(--purple);
  border-radius:50%;
  height:28px;
  width:28px
}

.smallStyleDatePicker .react-datepicker .react-datepicker__month-container .react-datepicker__month .react-datepicker__week .react-datepicker__day--highlighted::after{
  background:var(--white);
  color:var(--purple);
  content:'TAT';
  font-size:10px;
  line-height:1;
  position:absolute;
  top:-4px
}

.fillPathWhite path{
  fill:var(--white)
}

.fillPathPrimary path{
  fill:var(--primary)
}

.fillPathGray1 path{
  fill:var(--text-light)
}

.fillPathGray2 path{
  fill:var(--gray)
}

.fillPathViolet path{
  fill:var(--neutralV1)
}

.fillPathBlack path{
  fill:var(--text)
}

.scaleDown24{
  transform:scale(0.67)
}

.scaleUp16{
  transform:scale(1.5)
}

.validateIcon{
  margin-top:2px;
  transform:scale(1.22)
}

.validateIcon.isValid rect{
  fill:var(--green)
}

.validateIcon.isValidPrimary rect{
  fill:var(--primary)
}

.toastStyles{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:100% !important
}

.toastStyles .Toastify__toast--default{
  align-items:center;
  background:var(--text);
  border-radius:4px;
  color:var(--white);
  display:inline-flex;
  margin:0 auto 4px;
  max-width:90%;
  min-height:40px;
  padding:8px 16px;
  top:72px
}

@media (min-width: 1024px){
  .toastStyles .Toastify__toast--default{
    max-width:35%
  }
}

.toastStyles .Toastify__toast-body{
  font-family:'Nunito Sans', sans-serif;
  font-size:16px;
  margin:0
}

.toastStyles .Toastify__close-button{
  align-self:center;
  height:100%;
  opacity:0.9;
  padding-left:8px
}

.toastStyles .Toastify__close-button svg{
  fill:var(--white)
}

.snackBar{
  background:var(--text-light) !important;
  font-size:16px;
  padding:16px !important
}

.snackBar.customSnackBarPosition{
  bottom:0;
  top:auto !important
}

.snackBar.noSupplierSnackBarPosition{
  bottom:16px;
  top:auto !important
}

.snackBar.bottom-center{
  bottom:120px;
  top:auto !important
}

.snackBar.bottom-center.above-fab{
  bottom:84px
}

.snackBar .Toastify__toast-body .grid{
  align-items:center;
  font-size:16px;
  grid-column-gap:12px;
  grid-template-columns:1fr 40px
}

.snackBar .Toastify__toast-body button{
  color:#56ccf2;
  font-size:16px
}

.snackBar .Toastify__close-button{
  display:none
}

.tabList{
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  margin-bottom:0
}

.tabList button{
  border-color:var(--white);
  color:var(--gray-light-3);
  font-weight:600;
  padding-bottom:16px;
  padding-top:16px
}

.tabList button[aria-selected='true']{
  border-color:var(--primary);
  color:var(--primary)
}

.chakra-tabs__tab-panel{
  padding:0 !important
}

.chakra-tabs__tablist{
  border-left:0 !important
}

.chakra-modal__content{
  border-radius:var(--chakra-radii-3xl) !important
}

.chakra-popover__content.dark{
  background-color:var(--text-light);
  border-radius:8px;
  box-shadow:none !important;
  display:inline-block
}

.chakra-popover__content.dark .chakra-popover__arrow{
  background:var(--text-light) !important;
  box-shadow:none !important
}

.chakra-popover__content.dark .chakra-popover__body{
  color:var(--white);
  padding:4px 8px
}

label.chakra-form__label{
  margin-bottom:0
}

label.chakra-form__label.greyLight{
  color:var(--gray)
}

label.chakra-form__label.weightNormal{
  font-weight:normal
}

.withPopover{
  max-width:105px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background-color:rgba(225,225,234,0.2);
  border-radius:4px;
  padding:4px 8px
}

.withPopover+div{
  width:auto
}

.withPopover-bg-none{
  max-width:105px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-radius:4px;
  padding:4px 8px
}

.withPopover-bg-none+div{
  width:auto
}

.background-white{
  background:var(--white) !important
}

body{
  background-color:var(--gray-light-2) !important
}

.w-full{
  width:100%
}

.w-full-imp{
  width:100%
}

.w-50-imp{
  width:50%
}

.h-full{
  height:100%
}

.border-red{
  border-color:#eb5757 !important
}

.footer-box-shadow{
  box-shadow:none !important
}

.h-screen{
  height:100vh
}

.p-0{
  padding:0
}

.pb-100{
  padding-bottom:100px
}

.b-gray{
  border-color:var(--gray-light-2)
}

.bg-gray-3{
  background-color:var(--gray-light-3)
}

.tagPill{
  border-radius:16px;
  font-size:12px;
  font-weight:600;
  line-height:14px
}

.tagPill.orange{
  background:var(--orange-light);
  color:var(--orange);
  display:inline-block;
  padding:2px 8px
}

.tagPill.blue{
  background:var(--secondary-bg);
  color:var(--primary);
  padding:2px 5px
}

.tagPill.counter{
  min-height:20px;
  min-width:20px
}

button.outline{
  font-weight:normal
}

button:focus{
  box-shadow:none !important;
  outline:none !important
}

.iconWithOverlay{
  bottom:16px;
  display:flex;
  height:24px;
  justify-content:center;
  position:absolute;
  width:100%
}

.iconWithOverlay .icon{
  align-items:center;
  background:rgba(255,255,255,0.8);
  border-radius:50%;
  display:flex;
  height:24px;
  justify-content:center;
  width:24px
}

.iconWithOverlay .icon:not(:first-child){
  margin-left:16px
}

.iconWithOverlay .icon.edit{
  right:80px
}

.iconWithOverlay .icon.edit svg{
  transform:scale(0.66)
}

.iconWithOverlay .icon.delete{
  right:32px
}

.w-50{
  width:50%
}

.formWrapperHeading{
  font-size:14px;
  font-weight:600;
  line-height:20px
}

.formWrapperFooter{
  display:flex
}

.formWrapperFooter>button{
  flex:1
}

.formWrapperFooter>button+button{
  margin-left:8px
}

.navHeaders{
  background:var(--white);
  height:60px;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  transition-duration:300ms;
  z-index:900
}

.navHeaders h2{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.navHeaders .fabricPhoto{
  border-radius:50%;
  height:32px;
  margin-right:16px;
  -o-object-fit:cover;
     object-fit:cover;
  width:32px
}

.navHeaders .noFilters circle{
  opacity:0
}

.navHeaders.image-open{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  height:288px
}

.with-ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.quote{
  align-items:center;
  display:flex;
  position:relative
}

.quote svg{
  margin-left:4px
}

.quote.red{
  color:var(--red)
}

.quote.red svg{
  transform:rotate(180deg)
}

.quote.red svg path{
  fill:var(--red)
}

.quote.green{
  color:var(--green)
}

.quote.green svg path{
  fill:var(--green)
}

.position-fixed{
  position:fixed !important
}

.numberCircle{
  border-radius:50%;
  display:inline-block;
  font-size:12px;
  line-height:16px
}

.numberCircle::before,.numberCircle::after{
  content:'\200B';
  display:inline-block;
  line-height:0px;
  padding-bottom:50%;
  padding-top:50%
}

.numberCircle::before{
  padding-left:4px
}

.numberCircle::after{
  padding-right:4px
}

.dot{
  background:var(--border);
  border-radius:50%;
  height:4px;
  width:4px
}

.overflown-lg-divider{
  width:calc(100% + 48px) !important
}

.multiPills{
  align-items:flex-end;
  display:flex;
  flex-direction:column
}

.multiPills :first-of-type{
  margin-top:0
}

.pt-4{
  padding-top:4px
}

.pr-4{
  padding-right:4px
}

.note{
  background-color:var(--yellow-bg-2)
}

.orderSortingBottomSheet .sorterBody .filterLabel{
  align-items:center;
  color:var(--text-light);
  display:flex;
  height:48px;
  line-height:21px
}

.orderSortingBottomSheet .sorterBody .filterLabel .preTitle{
  font-weight:bold
}

.orderSortingBottomSheet .sorterBody .filterLabel.checkbox{
  border-top:1px solid var(--gray-light-2)
}

.orderSortingBottomSheet .sorterBody .filterLabel.subFilter{
  border-top:0;
  padding-left:40px
}

.orderSortingBottomSheet .sorterBody .filterLabel.filterDisabled{
  opacity:0.5
}

.orderSortingBottomSheet .sorterBody .filterLabel input[type='radio']{
  visibility:hidden;
  width:0
}

.orderSortingBottomSheet .sorterBody .filterLabel input[type='radio']:disabled{
  opacity:0.5
}

.orderSortingBottomSheet .sorterBody .filterLabel input[type='radio'] ~ .input-custom{
  border:2px solid var(--gray-light-3);
  border-radius:20px;
  height:16px;
  margin-right:8px;
  width:16px
}

.orderSortingBottomSheet .sorterBody .filterLabel input[type='radio']:checked ~ .input-custom{
  border-color:var(--primary);
  position:relative
}

.orderSortingBottomSheet .sorterBody .filterLabel input[type='radio']:checked ~ .input-custom::before{
  background-color:var(--primary);
  border-radius:50%;
  content:'';
  height:8px;
  left:2px;
  position:absolute;
  top:2px;
  width:8px
}

.orderSortingBottomSheet .sorterBody .filterLabel.allNotSelected input[type='radio']:checked ~ .input-custom::before{
  border-radius:6px;
  height:3.33px;
  top:4px;
  width:8px
}

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

.bottomSheetOrderDelivered .modalButton{
  background-color:var(--primary);
  border-radius:70px;
  border-width:1px;
  bottom:50px;
  box-shadow:0 0 9.6px rgba(0,0,0,0.12);
  font-size:larger;
  font-weight:700;
  height:48px;
  margin:0;
  min-width:187px;
  min-width:-webkit-min-content;
  min-width:-moz-min-content;
  min-width:min-content;
  padding:0 20px;
  position:absolute;
  right:17px;
  width:auto;
  z-index:1000;
  display: flex;
  align-items: center;
  justify-content: center
}

.orderApplyButton{
  margin-left:12px;
  margin-right:12px;
  padding:12px 34px !important
}

.blur-3{
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px)
}

.w-full-important{
  width:100% !important
}

.mb-40{
  margin-bottom:160px
}

.text-start{
  text-align:start;
  text-decoration:none
}

.decoration-none{
  text-decoration:none
}

.app_container{
  min-width:365px;
  width:100%;
  background-color:var(--white)
}

.app_next{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  background-color:var(--gray-light-2)
}

.footerBanner{
  width:100%;
  min-width:365px
}

.auto-width{
  width:100%;
  min-width:365px
}

.auto-sides{
  left:0
}

.autoWidthPosition{
  width:100%;
  min-width:365px;
  left:0
}

@media (min-width: 1024px){
  .app_container{
    max-width:40%
  }

  .footerBanner{
    max-width:40%
  }

  .auto-width{
    width:40%
  }

  .auto-sides{
    left:30%
  }

  .autoWidthPosition{
    width:40%;
    min-width:365px;
    left:30%
  }
}

.dashboard_page .app_container{
  max-width:100% !important;
  width:100% !important;
  left:0 !important
}

.dashboard_page .footerBanner{
  max-width:100% !important
}

.dashboard_page .auto-width{
  width:100% !important
}

.dashboard_page .auto-sides{
  left:0 !important
}

.dashboard_page .autoWidthPosition{
  width:100% !important;
  min-width:365px;
  left:0 !important
}

@media (min-width: 1024px){
  .dashboard_page .app_container{
    max-width:100%
  }

  .dashboard_page .footerBanner{
    max-width:100%
  }

  .dashboard_page .auto-width{
    width:100%
  }

  .dashboard_page .auto-sides{
    left:0
  }

  .dashboard_page .autoWidthPosition{
    width:100%;
    min-width:365px;
    left:0
  }
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
 * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

button {
  background-color: transparent;
  background-image: none;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

html {
  font-family: Nunito Sans; /* 1 */
  line-height: 1.5; /* 2 */
}

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #f2f2f2; /* 2 */
}

/*
 * Ensure horizontal rules are visible by default
 */

hr {
  border-top-width: 1px;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

img {
  border-style: solid;
}

textarea {
  resize: vertical;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #a0aec0;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a0aec0;
}

input::placeholder,
textarea::placeholder {
  color: #a0aec0;
}

button,
[role="button"] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset links to optimize for opt-in styling instead of
 * opt-out.
 */

a {
  color: inherit;
  text-decoration: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

button,
input,
optgroup,
select,
textarea {
  padding: 0;
  line-height: inherit;
  color: inherit;
}

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

pre,
code,
kbd,
samp {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time. Inspired by
 * CSS Remedy, with `svg` added as well.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their instrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

img,
video {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
}

@media (min-width: 150px) {
  .container {
    max-width: 150px;
  }
}

@media (min-width: 300px) {
  .container {
    max-width: 300px;
  }
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.space-y-1 > :not(template) ~ :not(template) {
  --space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--space-y-reverse));
}

.space-y-3 > :not(template) ~ :not(template) {
  --space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--space-y-reverse));
}

.space-y-4 > :not(template) ~ :not(template) {
  --space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--space-y-reverse)));
  margin-bottom: calc(1rem * var(--space-y-reverse));
}

.bg-black {
  --bg-opacity: 1;
  background-color: #000;
  background-color: rgba(0, 0, 0, var(--bg-opacity));
}

.bg-white {
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.bg-gray {
  background-color: rgba(225, 225, 234, 0.2);
}

.bg-red {
  --bg-opacity: 1;
  background-color: #eb5757;
  background-color: rgba(235, 87, 87, var(--bg-opacity));
}

.bg-blue {
  --bg-opacity: 1;
  background-color: #F6F7F9;
  background-color: rgba(246, 247, 249, var(--bg-opacity));
}

.bg-purpleLight {
  background-color: rgba(225, 225, 234, 0.2);
}

.bg-blackWithOpacity {
  background-color: #00000033;
}

.bg-purpleWithOpacity {
  background-color: #00012633;
}

.bg-neutralGray3 {
  --bg-opacity: 1;
  background-color: #92979C;
  background-color: rgba(146, 151, 156, var(--bg-opacity));
}

.bg-primary {
  --bg-opacity: 1;
  background-color: #0067E2;
  background-color: rgba(0, 103, 226, var(--bg-opacity));
}

.bg-primaryBlue2 {
  --bg-opacity: 1;
  background-color: #F2F8FF;
  background-color: rgba(242, 248, 255, var(--bg-opacity));
}

.bg-primaryViolet3 {
  --bg-opacity: 1;
  background-color: #F9FAFF;
  background-color: rgba(249, 250, 255, var(--bg-opacity));
}

.bg-primaryblue {
  --bg-opacity: 1;
  background-color: #CEE4FF;
  background-color: rgba(206, 228, 255, var(--bg-opacity));
}

.bg-primaryRed2 {
  --bg-opacity: 1;
  background-color: #FFF5EB;
  background-color: rgba(255, 245, 235, var(--bg-opacity));
}

.bg-blueSecondary {
  --bg-opacity: 1;
  background-color: #f2f8ff;
  background-color: rgba(242, 248, 255, var(--bg-opacity));
}

.bg-yellowWarning {
  --bg-opacity: 1;
  background-color: #FFFEE5;
  background-color: rgba(255, 254, 229, var(--bg-opacity));
}

.bg-orangePill {
  --bg-opacity: 1;
  background-color: #FFFAF5;
  background-color: rgba(255, 250, 245, var(--bg-opacity));
}

.bg-greenSecondary {
  --bg-opacity: 1;
  background-color: #EDFEF4;
  background-color: rgba(237, 254, 244, var(--bg-opacity));
}

.bg-primaryTeal3 {
  --bg-opacity: 1;
  background-color: #EBFDFF;
  background-color: rgba(235, 253, 255, var(--bg-opacity));
}

.bg-neutralGray6 {
  --bg-opacity: 1;
  background-color: #F2F2F2;
  background-color: rgba(242, 242, 242, var(--bg-opacity));
}

.bg-gray-light {
  --bg-opacity: 1;
  background-color: #E5E5E5;
  background-color: rgba(229, 229, 229, var(--bg-opacity));
}

.hover\:bg-primaryblue:hover {
  --bg-opacity: 1;
  background-color: #CEE4FF;
  background-color: rgba(206, 228, 255, var(--bg-opacity));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--gradient-color-stops));
}

.from-secondaryBlue {
  --gradient-from-color: #CEE4FF;
  --gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(206, 228, 255, 0));
}

.to-white {
  --gradient-to-color: #fff;
}

.to-secondaryBlue {
  --gradient-to-color: #CEE4FF;
}

.bg-opacity-20 {
  --bg-opacity: .2;
}

.border-transparent {
  border-color: transparent;
}

.border-gray {
  --border-opacity: 1;
  border-color: #D4D4D4;
  border-color: rgba(212, 212, 212, var(--border-opacity));
}

.border-red {
  --border-opacity: 1;
  border-color: #eb5757;
  border-color: rgba(235, 87, 87, var(--border-opacity));
}

.border-orange {
  --border-opacity: 1;
  border-color: #f2994a;
  border-color: rgba(242, 153, 74, var(--border-opacity));
}

.border-green-600 {
  --border-opacity: 1;
  border-color: #38a169;
  border-color: rgba(56, 161, 105, var(--border-opacity));
}

.border-blue {
  --border-opacity: 1;
  border-color: #CEE4FF;
  border-color: rgba(206, 228, 255, var(--border-opacity));
}

.border-indigo-600 {
  --border-opacity: 1;
  border-color: #5a67d8;
  border-color: rgba(90, 103, 216, var(--border-opacity));
}

.border-primaryViolet {
  --border-opacity: 1;
  border-color: #9896D9;
  border-color: rgba(152, 150, 217, var(--border-opacity));
}

.border-secondaryBlue {
  --border-opacity: 1;
  border-color: #CEE4FF;
  border-color: rgba(206, 228, 255, var(--border-opacity));
}

.border-gray-light {
  --border-opacity: 1;
  border-color: #E5E5E5;
  border-color: rgba(229, 229, 229, var(--border-opacity));
}

.border-primaryRed1 {
  --border-opacity: 1;
  border-color: #FF7262;
  border-color: rgba(255, 114, 98, var(--border-opacity));
}

.border-primary {
  --border-opacity: 1;
  border-color: #0067E2;
  border-color: rgba(0, 103, 226, var(--border-opacity));
}

.border-primaryYellow {
  --border-opacity: 1;
  border-color: #FFF1CC;
  border-color: rgba(255, 241, 204, var(--border-opacity));
}

.hover\:border-blue:hover {
  --border-opacity: 1;
  border-color: #CEE4FF;
  border-color: rgba(206, 228, 255, var(--border-opacity));
}

.border-opacity-100 {
  --border-opacity: 1;
}

.rounded-12 {
  border-radius: 12px;
}

.rounded-sm {
  border-radius: 4px;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-md {
  border-radius: 8px;
}

.rounded-lg {
  border-radius: 16px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-xl {
  border-radius: 24px;
}

.rounded-xxl {
  border-radius: 32px;
}

.rounded-xxxl {
  border-radius: 64px;
}

.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-t-md {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.rounded-r-md {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.rounded-b-md {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-t-lg {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.rounded-tr-none {
  border-top-right-radius: 0;
}

.rounded-tl-md {
  border-top-left-radius: 8px;
}

.rounded-tr-md {
  border-top-right-radius: 8px;
}

.rounded-br-md {
  border-bottom-right-radius: 8px;
}

.rounded-bl-md {
  border-bottom-left-radius: 8px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-0 {
  border-width: 0;
}

.border-1 {
  border-width: 1px;
}

.border-0\.5 {
  border-width: 0.5px;
}

.border-r-0 {
  border-right-width: 0;
}

.border-b-0 {
  border-bottom-width: 0;
}

.border-l-0 {
  border-left-width: 0;
}

.border-t-1 {
  border-top-width: 1px;
}

.border-r-1 {
  border-right-width: 1px;
}

.border-b-1 {
  border-bottom-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-0\.5 {
  border-bottom-width: 0.5px;
}

.border-l-0\.5 {
  border-left-width: 0.5px;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.block {
  display: block;
}

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

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

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

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

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

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

.items-center {
  align-items: center;
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

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

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

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.font-sans {
  font-family: Nunito Sans;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.h-1 {
  height: 0.25rem;
}

.h-2 {
  height: 0.5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 28px;
}

.h-8 {
  height: 2rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 24px;
}

.h-32 {
  height: 8rem;
}

.h-40 {
  height: 40px;
}

.h-48 {
  height: 48px;
}

.h-52 {
  height: 52px;
}

.h-56 {
  height: 56px;
}

.h-64 {
  height: 64px;
}

.h-112 {
  height: 112px;
}

.h-144 {
  height: 144px;
}

.h-276 {
  height: 276px;
}

.h-560 {
  height: 560px;
}

.h-x4l {
  height: 56px;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.text-10 {
  font-size: 10px;
}

.text-12 {
  font-size: 12px;
}

.text-14 {
  font-size: 14px;
}

.text-16 {
  font-size: 16px;
}

.text-18 {
  font-size: 18px;
}

.text-20 {
  font-size: 20px;
}

.leading-3 {
  line-height: .75rem;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-14 {
  line-height: 14px;
}

.leading-20 {
  line-height: 20px;
}

.leading-24 {
  line-height: 24px;
}

.leading-none {
  line-height: 1;
}

.m-0 {
  margin: 0px;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.m-24 {
  margin: 6rem;
}

.m-auto {
  margin: auto;
}

.m-lg {
  margin: 24px;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-7 {
  margin-left: 28px;
  margin-right: 28px;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.mx-10 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-16 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-1\.5 {
  margin-left: 6px;
  margin-right: 6px;
}

.mx-2\.5 {
  margin-left: 10px;
  margin-right: 10px;
}

.my-sm {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mx-sm {
  margin-left: 8px;
  margin-right: 8px;
}

.mx-sm12 {
  margin-left: 12px;
  margin-right: 12px;
}

.my-md {
  margin-top: 16px;
  margin-bottom: 16px;
}

.mx-md {
  margin-left: 16px;
  margin-right: 16px;
}

.my-lg {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mx-lg {
  margin-left: 24px;
  margin-right: 24px;
}

.my-xxl {
  margin-top: 40px;
  margin-bottom: 40px;
}

.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.-mx-8 {
  margin-left: -2rem;
  margin-right: -2rem;
}

.-mx-lg24 {
  margin-left: -24px;
  margin-right: -24px;
}

.mt-0 {
  margin-top: 0px;
}

.mr-0 {
  margin-right: 0px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mr-5 {
  margin-right: 1.25rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.ml-5 {
  margin-left: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mr-6 {
  margin-right: 1.5rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mt-7 {
  margin-top: 28px;
}

.mb-7 {
  margin-bottom: 28px;
}

.mt-8 {
  margin-top: 2rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-8 {
  margin-left: 2rem;
}

.mt-9 {
  margin-top: 36px;
}

.mb-9 {
  margin-bottom: 36px;
}

.ml-9 {
  margin-left: 36px;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mr-10 {
  margin-right: 2.5rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.ml-12 {
  margin-left: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mr-20 {
  margin-right: 5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-32 {
  margin-bottom: 8rem;
}

.mb-40 {
  margin-bottom: 10rem;
}

.mt-auto {
  margin-top: auto;
}

.ml-auto {
  margin-left: auto;
}

.mt-px {
  margin-top: 1px;
}

.mt-1\.5 {
  margin-top: 6px;
}

.mr-1\.5 {
  margin-right: 6px;
}

.ml-1\.5 {
  margin-left: 6px;
}

.mt-2\.25 {
  margin-top: 9px;
}

.mb-2\.25 {
  margin-bottom: 9px;
}

.ml-2\.25 {
  margin-left: 9px;
}

.mt-2\.5 {
  margin-top: 10px;
}

.mb-2\.5 {
  margin-bottom: 10px;
}

.mt-xxs {
  margin-top: 2px;
}

.mr-xxs {
  margin-right: 2px;
}

.mt-xs {
  margin-top: 4px;
}

.mr-xs {
  margin-right: 4px;
}

.mb-xs {
  margin-bottom: 4px;
}

.ml-xs {
  margin-left: 4px;
}

.mt-sm {
  margin-top: 8px;
}

.mr-sm {
  margin-right: 8px;
}

.mb-sm {
  margin-bottom: 8px;
}

.ml-sm {
  margin-left: 8px;
}

.mt-sm12 {
  margin-top: 12px;
}

.mr-sm12 {
  margin-right: 12px;
}

.mb-sm12 {
  margin-bottom: 12px;
}

.ml-sm12 {
  margin-left: 12px;
}

.mb-3\.5 {
  margin-bottom: 14px;
}

.mt-md {
  margin-top: 16px;
}

.mr-md {
  margin-right: 16px;
}

.mb-md {
  margin-bottom: 16px;
}

.ml-md {
  margin-left: 16px;
}

.mr-md18 {
  margin-right: 18px;
}

.mb-md18 {
  margin-bottom: 18px;
}

.mt-lg {
  margin-top: 24px;
}

.mr-lg {
  margin-right: 24px;
}

.mb-lg {
  margin-bottom: 24px;
}

.ml-lg {
  margin-left: 24px;
}

.mb-lg30 {
  margin-bottom: 30px;
}

.mt-xl {
  margin-top: 32px;
}

.mb-xl {
  margin-bottom: 32px;
}

.mt-xxl {
  margin-top: 40px;
}

.mr-xxl {
  margin-right: 40px;
}

.mb-xxl {
  margin-bottom: 40px;
}

.mt-xxxl {
  margin-top: 48px;
}

.mb-xxxl {
  margin-bottom: 48px;
}

.mr-x5l {
  margin-right: 64px;
}

.mb-x5l {
  margin-bottom: 64px;
}

.-mb-0 {
  margin-bottom: 0px;
}

.-mt-1 {
  margin-top: -0.25rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.-ml-1 {
  margin-left: -0.25rem;
}

.-mt-2 {
  margin-top: -0.5rem;
}

.-mb-2 {
  margin-bottom: -0.5rem;
}

.-mt-3 {
  margin-top: -0.75rem;
}

.-mt-4 {
  margin-top: -1rem;
}

.-mt-5 {
  margin-top: -1.25rem;
}

.-mt-6 {
  margin-top: -1.5rem;
}

.-mb-6 {
  margin-bottom: -1.5rem;
}

.-mt-7 {
  margin-top: -28px;
}

.-mt-10 {
  margin-top: -2.5rem;
}

.-ml-24 {
  margin-left: -6rem;
}

.-mt-px {
  margin-top: -1px;
}

.-mt-1\.5 {
  margin-top: -6px;
}

.-mt-xxs {
  margin-top: -2px;
}

.-ml-sm {
  margin-left: -8px;
}

.-mr-sm12 {
  margin-right: -12px;
}

.-ml-24\.5 {
  margin-left: -24.5px;
}

.max-w-screen-sm {
  max-width: 640px;
}

.min-h-56 {
  min-height: 56px;
}

.min-h-160 {
  min-height: 160px;
}

.min-h-screen {
  min-height: 100vh;
}

.min-w-60 {
  min-width: 60px;
}

.min-w-65 {
  min-width: 65px;
}

.min-w-110 {
  min-width: 110px;
}

.min-w-full {
  min-width: 100%;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.opacity-0 {
  opacity: 0;
}

.opacity-20 {
  opacity: .2;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.outline-none {
  outline: 0;
}

.focus\:outline-none:focus {
  outline: 0;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-1\.5 {
  padding: 6px;
}

.p-2\.5 {
  padding: 10px;
}

.p-xxs {
  padding: 2px;
}

.p-sm {
  padding: 8px;
}

.p-sm12 {
  padding: 12px;
}

.p-md {
  padding: 16px;
}

.p-lg {
  padding: 24px;
}

.p-xl {
  padding: 32px;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-9 {
  padding-top: 36px;
  padding-bottom: 36px;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}

.py-1\.5 {
  padding-top: 6px;
  padding-bottom: 6px;
}

.px-1\.5 {
  padding-left: 6px;
  padding-right: 6px;
}

.py-2\.5 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-xxs {
  padding-top: 2px;
  padding-bottom: 2px;
}

.py-xs {
  padding-top: 4px;
  padding-bottom: 4px;
}

.px-xs {
  padding-left: 4px;
  padding-right: 4px;
}

.py-sm {
  padding-top: 8px;
  padding-bottom: 8px;
}

.px-sm {
  padding-left: 8px;
  padding-right: 8px;
}

.py-sm12 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.px-sm12 {
  padding-left: 12px;
  padding-right: 12px;
}

.py-md {
  padding-top: 16px;
  padding-bottom: 16px;
}

.px-md {
  padding-left: 16px;
  padding-right: 16px;
}

.py-md18 {
  padding-top: 18px;
  padding-bottom: 18px;
}

.px-md18 {
  padding-left: 18px;
  padding-right: 18px;
}

.py-md20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py-lg {
  padding-top: 24px;
  padding-bottom: 24px;
}

.px-lg {
  padding-left: 24px;
  padding-right: 24px;
}

.px-lg24 {
  padding-left: 24px;
  padding-right: 24px;
}

.py-xl {
  padding-top: 32px;
  padding-bottom: 32px;
}

.px-xl {
  padding-left: 32px;
  padding-right: 32px;
}

.px-xxl {
  padding-left: 40px;
  padding-right: 40px;
}

.px-xxxl {
  padding-left: 48px;
  padding-right: 48px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pt-7 {
  padding-top: 28px;
}

.pt-8 {
  padding-top: 2rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-8 {
  padding-left: 2rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-40 {
  padding-bottom: 10rem;
}

.pb-48 {
  padding-bottom: 12rem;
}

.pt-px {
  padding-top: 1px;
}

.pt-1\.5 {
  padding-top: 6px;
}

.pl-1\.5 {
  padding-left: 6px;
}

.pt-2\.25 {
  padding-top: 9px;
}

.pt-2\.5 {
  padding-top: 10px;
}

.pt-5\.75 {
  padding-top: 23px;
}

.pt-xxs {
  padding-top: 2px;
}

.pt-xs {
  padding-top: 4px;
}

.pr-xs {
  padding-right: 4px;
}

.pb-xs {
  padding-bottom: 4px;
}

.pl-xs {
  padding-left: 4px;
}

.pt-sm {
  padding-top: 8px;
}

.pr-sm {
  padding-right: 8px;
}

.pb-sm {
  padding-bottom: 8px;
}

.pl-sm {
  padding-left: 8px;
}

.pt-sm12 {
  padding-top: 12px;
}

.pb-sm12 {
  padding-bottom: 12px;
}

.pt-md {
  padding-top: 16px;
}

.pr-md {
  padding-right: 16px;
}

.pb-md {
  padding-bottom: 16px;
}

.pl-md {
  padding-left: 16px;
}

.pt-md18 {
  padding-top: 18px;
}

.pb-md18 {
  padding-bottom: 18px;
}

.pt-lg {
  padding-top: 24px;
}

.pr-lg {
  padding-right: 24px;
}

.pb-lg {
  padding-bottom: 24px;
}

.pl-lg {
  padding-left: 24px;
}

.pt-xl {
  padding-top: 32px;
}

.pb-xl {
  padding-bottom: 32px;
}

.pl-xl {
  padding-left: 32px;
}

.pt-xxl {
  padding-top: 40px;
}

.pr-xxl {
  padding-right: 40px;
}

.pb-xxl {
  padding-bottom: 40px;
}

.pl-xxl {
  padding-left: 40px;
}

.pb-xxxl {
  padding-bottom: 48px;
}

.pb-x4l {
  padding-bottom: 56px;
}

.pt-x5l {
  padding-top: 64px;
}

.pt-x6l {
  padding-top: 72px;
}

.placeholder-neutralGray3::-moz-placeholder {
  --placeholder-opacity: 1;
  color: #92979C;
  color: rgba(146, 151, 156, var(--placeholder-opacity));
}

.placeholder-neutralGray3:-ms-input-placeholder {
  --placeholder-opacity: 1;
  color: #92979C;
  color: rgba(146, 151, 156, var(--placeholder-opacity));
}

.placeholder-neutralGray3::placeholder {
  --placeholder-opacity: 1;
  color: #92979C;
  color: rgba(146, 151, 156, var(--placeholder-opacity));
}

.pointer-events-none {
  pointer-events: none;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-x-0 {
  right: 0;
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-1 {
  right: 4px;
}

.left-auto {
  left: auto;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.shadow-regular {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
}

.shadow-top {
  box-shadow: 0px -1px 4px 0px #0000001a;
}

.shadow-card {
  box-shadow: 0px 0px 3px rgba(0, 103, 226, 0.12);
}

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

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

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

.text-black {
  --text-opacity: 1;
  color: #000126;
  color: rgba(0, 1, 38, var(--text-opacity));
}

.text-white {
  --text-opacity: 1;
  color: #FFF;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.text-gray {
  --text-opacity: 1;
  color: #D4D4D4;
  color: rgba(212, 212, 212, var(--text-opacity));
}

.text-red {
  --text-opacity: 1;
  color: #eb5757;
  color: rgba(235, 87, 87, var(--text-opacity));
}

.text-orange {
  --text-opacity: 1;
  color: #F2994A;
  color: rgba(242, 153, 74, var(--text-opacity));
}

.text-blue-600 {
  --text-opacity: 1;
  color: #3182ce;
  color: rgba(49, 130, 206, var(--text-opacity));
}

.text-primaryViolet {
  --text-opacity: 1;
  color: #9896D9;
  color: rgba(152, 150, 217, var(--text-opacity));
}

.text-neutralBlack {
  --text-opacity: 1;
  color: #00142D;
  color: rgba(0, 20, 45, var(--text-opacity));
}

.text-violet {
  --text-opacity: 1;
  color: #3944b4;
  color: rgba(57, 68, 180, var(--text-opacity));
}

.text-neutralGray3 {
  --text-opacity: 1;
  color: #92979C;
  color: rgba(146, 151, 156, var(--text-opacity));
}

.text-neutralGray {
  --text-opacity: 1;
  color: #626870;
  color: rgba(98, 104, 112, var(--text-opacity));
}

.text-primaryGreen {
  --text-opacity: 1;
  color: #27AE60;
  color: rgba(39, 174, 96, var(--text-opacity));
}

.text-neutralGray1 {
  --text-opacity: 1;
  color: #303C4A;
  color: rgba(48, 60, 74, var(--text-opacity));
}

.text-primaryRed1 {
  --text-opacity: 1;
  color: #EB5757;
  color: rgba(235, 87, 87, var(--text-opacity));
}

.text-graytext {
  --text-opacity: 1;
  color: #93939F;
  color: rgba(147, 147, 159, var(--text-opacity));
}

.text-graytextLight {
  --text-opacity: 1;
  color: #676773;
  color: rgba(103, 103, 115, var(--text-opacity));
}

.text-grayTextDark {
  --text-opacity: 1;
  color: #333340;
  color: rgba(51, 51, 64, var(--text-opacity));
}

.text-primary {
  --text-opacity: 1;
  color: #0067E2;
  color: rgba(0, 103, 226, var(--text-opacity));
}

.text-primaryOrange {
  --text-opacity: 1;
  color: #DD750E;
  color: rgba(221, 117, 14, var(--text-opacity));
}

.text-darkPurple {
  --text-opacity: 1;
  color: #8180B0;
  color: rgba(129, 128, 176, var(--text-opacity));
}

.text-closedStatus {
  --text-opacity: 1;
  color: #EB5757;
  color: rgba(235, 87, 87, var(--text-opacity));
}

.text-neutralVoilet {
  --text-opacity: 1;
  color: #6E6CB2;
  color: rgba(110, 108, 178, var(--text-opacity));
}

.text-blueVoilet {
  --text-opacity: 1;
  color: #6E6CB2;
  color: rgba(110, 108, 178, var(--text-opacity));
}

.text-opacity-75 {
  --text-opacity: 0.75;
}

.italic {
  font-style: italic;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.subpixel-antialiased {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.align-middle {
  vertical-align: middle;
}

.visible {
  visibility: visible;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-all {
  word-break: break-all;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-1 {
  width: 0.25rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 28px;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 36px;
}

.w-10 {
  width: 2.5rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 24px;
}

.w-32 {
  width: 8rem;
}

.w-48 {
  width: 12rem;
}

.w-56 {
  width: 56px;
}

.w-64 {
  width: 64px;
}

.w-68 {
  width: 68px;
}

.w-112 {
  width: 112px;
}

.w-119 {
  width: 119px;
}

.w-139 {
  width: 139px;
}

.w-144 {
  width: 144px;
}

.w-px {
  width: 1px;
}

.w-lg30 {
  width: 30px;
}

.w-xxl {
  width: 40px;
}

.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-3\/4 {
  width: 75%;
}

.w-2\/5 {
  width: 40%;
}

.w-4\/5 {
  width: 80%;
}

.w-2\/12 {
  width: 16.666667%;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-full {
  width: 100%;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.gap-1 {
  grid-gap: 0.25rem;
  gap: 0.25rem;
}

.gap-2 {
  grid-gap: 0.5rem;
  gap: 0.5rem;
}

.gap-3 {
  grid-gap: 0.75rem;
  gap: 0.75rem;
}

.gap-4 {
  grid-gap: 1rem;
  gap: 1rem;
}

.gap-5 {
  grid-gap: 1.25rem;
  gap: 1.25rem;
}

.gap-6 {
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.gap-8 {
  grid-gap: 2rem;
  gap: 2rem;
}

.gap-1\.5 {
  grid-gap: 6px;
  gap: 6px;
}

.gap-2\.5 {
  grid-gap: 10px;
  gap: 10px;
}

.gap-x-4 {
  grid-column-gap: 1rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  grid-column-gap: 1.25rem;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6 {
  grid-column-gap: 1.5rem;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.transform {
  --transform-translate-x: 0;
  --transform-translate-y: 0;
  --transform-rotate: 0;
  --transform-skew-x: 0;
  --transform-skew-y: 0;
  --transform-scale-x: 1;
  --transform-scale-y: 1;
  transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
}

.scale-0 {
  --transform-scale-x: 0;
  --transform-scale-y: 0;
}

.scale-75 {
  --transform-scale-x: .75;
  --transform-scale-y: .75;
}

.scale-90 {
  --transform-scale-x: .9;
  --transform-scale-y: .9;
}

.scale-110 {
  --transform-scale-x: 1.1;
  --transform-scale-y: 1.1;
}

.transition-all {
  transition-property: all;
}

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}

@-webkit-keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@-webkit-keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-spin {
  -webkit-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
}

@media (min-width: 1024px) {
  .phone\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .phone\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .phone\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .phone\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .phone\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .phone\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .phone\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .phone\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 640px) {
  .sm\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .sm\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .sm\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .sm\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .sm\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .sm\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .sm\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .sm\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 768px) {
  .md\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .md\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .md\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .md\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .md\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .md\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .md\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .md\:container {
      max-width: 1536px;
    }
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }
}

@media (min-width: 1024px) {
  .lg\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .lg\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .lg\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .lg\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .lg\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .lg\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .lg\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .lg\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 1280px) {
  .xl\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .xl\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .xl\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .xl\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .xl\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .xl\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .xl\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .xl\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .responsive\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .responsive\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .responsive\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .responsive\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .responsive\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .responsive\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .responsive\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .responsive\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 300px) and (max-width: 460px) {
  .mobile\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .mobile\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .mobile\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .mobile\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .mobile\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .mobile\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .mobile\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .mobile\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 1536px) {
  .\32xl\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .\32xl\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .\32xl\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .\32xl\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .\32xl\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .\32xl\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .\32xl\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .\32xl\:container {
      max-width: 1536px;
    }
  }
}

@media (min-width: 150px) {
  .logo\:container {
    width: 100%;
  }

  @media (min-width: 150px) {
    .logo\:container {
      max-width: 150px;
    }
  }

  @media (min-width: 300px) {
    .logo\:container {
      max-width: 300px;
    }
  }

  @media (min-width: 640px) {
    .logo\:container {
      max-width: 640px;
    }
  }

  @media (min-width: 768px) {
    .logo\:container {
      max-width: 768px;
    }
  }

  @media (min-width: 1024px) {
    .logo\:container {
      max-width: 1024px;
    }
  }

  @media (min-width: 1280px) {
    .logo\:container {
      max-width: 1280px;
    }
  }

  @media (min-width: 1536px) {
    .logo\:container {
      max-width: 1536px;
    }
  }
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem;
}

.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem;
}

.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}

.react-datepicker-popper {
  z-index: 1;
}

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px;
}

.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px;
}

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative;
}

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem;
}

.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 80px;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__month-container {
  float: left;
}

.react-datepicker__year {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__year-wrapper {
  display: flex;
  flex-wrap: wrap;
  max-width: 180px;
}

.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center;
}

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px;
}

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}

.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: 85px;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  -moz-appearance: textfield;
}

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}

.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}

.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
  box-sizing: content-box;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem;
}

.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}

.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
  cursor: pointer;
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
}

.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}

.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}

.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}

.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff;
}

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}

.react-datepicker__day--in-selecting-range ,
.react-datepicker__month-text--in-selecting-range ,
.react-datepicker__quarter-text--in-selecting-range ,
.react-datepicker__year-text--in-selecting-range {
  background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
.react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
.react-datepicker__quarter-text--in-range , .react-datepicker__month--selecting-range
.react-datepicker__year-text--in-range {
  background-color: #f0f0f0;
  color: #000;
}

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}

.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}

.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}

.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0px 6px 0px 0px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "\D7";
}

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647;
}

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem;
}

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}

.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem;
}

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.formStepsHeader{
  margin:0 !important;
  max-width:100% !important
}

.formStepsHeader .step{
  color:var(--text-light);
  margin-bottom:16px
}

.formStepsHeader .step:last-child{
  margin-bottom:0
}

.formStepsHeader .blueText{
  color:var(--primary)
}

.formStepsHeader .footer{
  color:var(--gray)
}

.formStepsHeader .footer svg{
  transform:scale(0.6)
}

.profileImage{
  margin-left:auto;
  margin-right:auto;
  position:relative
}

.profileImage img,.profileImage .placholderImg{
  box-shadow:0 0 0 1px var(--gray-light-2)
}

.profileImage .placholderImg{
  background:rgba(225,225,234,0.2);
  height:144px;
  width:144px
}

.profileImage .placholderImg svg{
  margin-left:auto;
  margin-right:auto;
  margin-top:48px;
  transform:scale(2.7)
}

.profileImage.withPlaceholder .icon{
  background:rgba(225,225,234,0.8)
}

.formStepsHeader{
  margin:0 !important;
  max-width:100% !important
}

.formStepsHeader .step{
  color:var(--text-light);
  margin-bottom:16px
}

.formStepsHeader .step:last-child{
  margin-bottom:0
}

.formStepsHeader .blueText{
  color:var(--primary)
}

.formStepsHeader .footer{
  color:var(--gray)
}

.formStepsHeader .footer svg{
  transform:scale(0.6)
}

.orderCard{
  border-radius:8px !important;
  box-shadow:0 0 2px var(--primary-shadow);
  padding:8px 6px 16px 12px
}

.orderCard .ordersUser{
  display:flex;
  justify-content:space-between;
  padding-right:6px
}

.orderCard .ordersUser .userName{
  align-items:center;
  color:var(--purple-secondary-dark);
  display:flex;
  text-overflow:ellipsis
}

.orderCard .ordersUser .userName .mt2px{
  margin-top:2px
}

.orderCard .ordersUser .userName .ml2px{
  margin-left:2px
}

.orderCard .fabricName{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  justify-content:space-between;
  margin-left:2px;
  padding-right:6px
}

.orderCard .fabricName .febricNameAndQut{
  display:flex;
  max-width:75%
}

.orderCard .fabricName .febricNameAndQut .productName{
  text-overflow:ellipsis
}

.orderCard .orderCardChildren{
  display:flex;
  justify-content:space-between;
  padding-right:6px
}

.orderCard .orderCardChildren .timeline{
  color:var(--gray);
  font-size:20px;
  position:relative
}

.orderCard .orderCardChildren .timeline .order-timeline{
  height:16px
}

.orderCard .orderCardChildren .timeline .attribute1::after{
  background-color:var(--border);
  content:'';
  height:29%;
  left:0.392rem;
  position:absolute;
  top:15px !important;
  width:1px
}

.orderCard .orderCardChildren .timeline .dot{
  align-items:center;
  background-color:var(--chakra-colors-gray-100);
  border-radius:50%;
  display:flex;
  height:12px;
  justify-content:space-around;
  margin-left:0 !important;
  margin-right:6px;
  width:12px
}

.orderCard .orderCardChildren .timeline .dot-green{
  background-color:var(--green);
  border-color:var(--green)
}

.orderCard .orderCardChildren .timeline .dot-red{
  background-color:var(--red);
  border-color:var(--red)
}

.orderCard .orderCardChildren .timeline .pill{
  border-radius:16px;
  font-size:10px;
  font-weight:600;
  height:16px;
  line-height:16px;
  margin-left:8px;
  padding:0 4px
}

.orderCard .orderCardChildren .timeline .pill-green{
  background:var(--green-bg);
  color:var(--green)
}

.orderCard .orderCardChildren .timeline .pill-red{
  background:var(--red-bg-3);
  color:var(--red)
}

.orderCard .orderCardChildren .providerImage{
  margin-top:-20px
}

.orderCard .orderCardFooter{
  margin-left:2px
}

.orderCard .fabricId{
  line-height:14px
}

.orderCard.highlighted{
  -webkit-animation:shadowComplete 2s ease-out;
          animation:shadowComplete 2s ease-out
}

.orderCard .assigned-sm,.orderCard .unassigned-sm{
  border-radius:10px;
  font-size:10px;
  line-height:12px;
  margin-left:8px;
  padding:1px 6px
}

.orderCard .assigned-sm{
  background-color:var(--teal);
  color:var(--violet)
}

.orderCard .unassigned-sm{
  background-color:rgba(225,225,234,0.2);
  color:var(--gray)
}

.orderCard .tat-icon{
  margin-right:4px
}

.orderCard .newBadge{
  background:var(--yellow);
  border-radius:2px;
  color:var(--white);
  font-size:10px;
  font-weight:600;
  height:30px;
  line-height:12px;
  margin-left:8px;
  padding:0 4px
}

.orderCard .quoteStatus,.orderCard .fabricStatus{
  border-radius:4px;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  line-height:14px;
  min-width:64px;
  padding:4px 8px;
  text-align:center
}

.orderCard .quoteStatus.review{
  background:var(--secondary-bg) !important;
  color:var(--blue-2) !important
}

.orderCard .quoteStatus.approved{
  background:var(--green-bg);
  color:var(--green)
}

.orderCard .quoteStatus.pending,.orderCard .quoteStatus.requested{
  background:var(--yellow-bg);
  color:var(--orange)
}

.orderCard .quoteStatus.rejected,.orderCard .quoteStatus.closed{
  background:var(--red-bg-3);
  color:var(--red)
}

.orderCard .quoteStatus.submitted,.orderCard .quoteStatus.received{
  background:var(--secondary-bg);
  color:var(--blue-2)
}

.orderCard .fabricStatus.delivered{
  background:var(--green-bg);
  color:var(--green)
}

.orderCard .fabricStatus.dispatched,.orderCard .fabricStatus.warehouse{
  background:var(--secondary-bg);
  color:var(--blue-2)
}

.orderCard .fabricStatus.planned{
  background:var(--yellow-bg-2);
  color:var(--orange)
}

.orderCard .fabricStatus.cancelled,.orderCard .fabricStatus.closed,.orderCard .fabricStatus.unserviceable,.orderCard .fabricStatus.ready{
  background:var(--red-bg-3);
  color:var(--red)
}

@-webkit-keyframes shadowComplete{
  from{
    box-shadow:0 0 16px #f2c94c
  }

  to{
    box-shadow:0 0 0 #f2c94c
  }
}

@keyframes shadowComplete{
  from{
    box-shadow:0 0 16px #f2c94c
  }

  to{
    box-shadow:0 0 0 #f2c94c
  }
}

.orderCard .pb-10{
  padding-bottom:10px
}

.orderCard .pl-6{
  padding-left:6px
}

.customer-return-label{
  color:#eb5758;
  background:#fff6eb;
  padding:1px 6px;
  border-radius:10px;
  margin:0 6px
}

.sample-dispatch-label{
  color:#008B9D;
  background:#F2FEFF;
  padding:1px 6px;
  border-radius:10px;
  margin:0 6px
}

.fabricCard{
  box-shadow:0 0 2px var(--primary-shadow);
  padding-bottom:12px;
  padding-top:12px
}

.fabricCard .fabricImageWrapper{
  border-radius:8px;
  max-height:106px;
  overflow:hidden;
  position:relative
}

.fabricCard .fabricImageWrapper img{
  height:112px;
  -o-object-fit:cover;
     object-fit:cover;
  width:88px
}

.fabricCard .fabricImageWrapper img.placeholder{
  transform:scale(1.4)
}

.fabricCard .fabricImageWrapper img.placeholder.withName{
  transform:scale(1.4) translateY(-6px)
}

.fabricCard .fabricImageWrapper .orgName{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:var(--text);
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  color:var(--white);
  line-height:14px;
  opacity:0.8;
  padding:4px 8px;
  text-transform:capitalize
}

.fabricCard .fabricName{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.fabricCard .fabricId{
  line-height:14px
}

.fabricCard.highlighted{
  -webkit-animation:shadowComplete 2s ease-out;
          animation:shadowComplete 2s ease-out
}

.fabricCard .assigned-sm,.fabricCard .unassigned-sm{
  border-radius:10px;
  font-size:10px;
  line-height:12px;
  margin-left:8px;
  padding:1px 6px
}

.fabricCard .assigned-sm{
  background-color:var(--teal);
  color:var(--violet)
}

.fabricCard .unassigned-sm{
  background-color:rgba(225,225,234,0.2);
  color:var(--gray)
}

.fabricCard .dot{
  background:var(--gray);
  border-radius:50%;
  height:2px;
  margin:0 8px;
  width:2px
}

.fabricCard .tat-icon{
  margin-right:4px
}

.fabricCard .newBadge{
  background:var(--yellow);
  border-radius:2px;
  color:var(--white);
  font-size:10px;
  font-weight:600;
  height:30px;
  line-height:12px;
  margin-left:8px;
  padding:0 4px
}

.fabricCard .quoteStatus,.fabricCard .fabricStatus{
  border-radius:4px 0 0 4px;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  line-height:14px;
  min-width:64px;
  padding:4px 8px;
  text-align:center
}

.fabricCard .quoteStatus.review{
  background:var(--secondary-bg) !important;
  color:var(--blue-2) !important
}

.fabricCard .quoteStatus.approved{
  background:var(--green-bg);
  color:var(--green)
}

.fabricCard .quoteStatus.pending,.fabricCard .quoteStatus.requested{
  background:var(--yellow-bg);
  color:var(--orange)
}

.fabricCard .quoteStatus.rejected,.fabricCard .quoteStatus.closed{
  background:var(--red-bg-3);
  color:var(--red)
}

.fabricCard .quoteStatus.submitted,.fabricCard .quoteStatus.received{
  background:var(--secondary-bg);
  color:var(--blue-2)
}

.fabricCard .fabricStatus.shipped{
  background:var(--yellow-bg-2);
  color:var(--orange)
}

.fabricCard .fabricStatus.delivered{
  background:var(--green-bg);
  color:var(--green)
}

.fabricCard .fabricStatus.dispatched{
  background:var(--secondary-bg);
  color:var(--blue-2)
}

.fabricCard .fabricStatus.production{
  background:var(--purple-bg);
  color:var(--purple-dark)
}

.fabricCard .fabricStatus.quote{
  background:var(--red-bg);
  color:var(--orange-dark)
}

.fabricCard .fabricStatus.cancelled,.fabricCard .fabricStatus.closed,.fabricCard .fabricStatus.unserviceable{
  background:var(--red-bg-3);
  color:var(--red)
}

@-webkit-keyframes shadowComplete{
  from{
    box-shadow:0 0 16px #f2c94c
  }

  to{
    box-shadow:0 0 0 #f2c94c
  }
}

@keyframes shadowComplete{
  from{
    box-shadow:0 0 16px #f2c94c
  }

  to{
    box-shadow:0 0 0 #f2c94c
  }
}

.fabricCard .pb-10{
  padding-bottom:10px
}

.fabricCard .pl-6{
  padding-left:6px
}

.fabricHeaders{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative
}

.fabricHeaders.am-fabric-header{
  justify-content:space-between
}

.fabricHeaders.am-fabric-header .filterIcon{
  position:relative;
  top:4px
}

.fabricHeaders .requestTabs{
  display:flex;
  align-items:center;
  background:var(--white);
  border-radius:16px
}

.fabricHeaders .factoryFilter{
  margin-top:8px
}

.fabricHeaders .filterIcon{
  position:absolute;
  right:16px;
  top:0
}

.fabricHeaders .sortIcon{
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  background-color:var(--white);
  border-color:var(--bg-2);
  border-radius:16px;
  border-width:1px;
  right:16px;
  top:0
}

.fabricHeaders .requestTabs button{
  padding-left:16px;
  padding-right:16px;
  padding-top:8px;
  padding-bottom:8px;
  border-radius:16px;
  color:var(--gray)
}

.fabricHeaders .requestTabs button:first-child{
  margin-right:2px
}

.fabricHeaders .requestTabs button.active,.fabricHeaders .requestTabs button.active:focus{
  font-weight:600;
  background:var(--secondary-bg);
  box-shadow:0 0 2px rgba(0,0,0,0.12) !important;
  color:var(--primary)
}

.fabricHeaders .filterList{
  background-color:var(--white);
  border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-width:144px;
  right:15px;
  top:0;
  z-index:5
}

.fabricHeaders .filterOverlay{
  background-color:rgba(0,1,38,0.2) !important;
  color:transparent;
  height:100%;
  z-index:4
}

.fabricHeaders .filterKey{
  min-width:135px;
  padding-bottom:14px;
  padding-top:14px
}

.fabricHeaders .filterKey.active{
  background:var(--gray-light-2)
}

.fabricHeaders .filterLabel{
  align-items:center;
  color:var(--text-light);
  display:flex;
  height:48px;
  line-height:21px;
  padding:0 16px
}

.fabricHeaders .filterLabel.checkbox{
  border-top:1px solid var(--gray-light-2)
}

.fabricHeaders .filterLabel.subFilter{
  border-top:0;
  padding-left:40px
}

.fabricHeaders .filterLabel.filterDisabled{
  opacity:0.5
}

.fabricHeaders .filterLabel input[type='radio'],.fabricHeaders .filterLabel input[type='checkbox']{
  visibility:hidden;
  width:0
}

.fabricHeaders .filterLabel input[type='radio']:disabled,.fabricHeaders .filterLabel input[type='checkbox']:disabled{
  opacity:0.5
}

.fabricHeaders .filterLabel input[type='radio'] ~ .input-custom{
  border:2px solid var(--gray-light-3);
  border-radius:20px;
  height:16px;
  margin-right:8px;
  width:16px
}

.fabricHeaders .filterLabel input[type='radio']:checked ~ .input-custom{
  border-color:var(--primary);
  position:relative
}

.fabricHeaders .filterLabel input[type='radio']:checked ~ .input-custom::before{
  background-color:var(--primary);
  border-radius:50%;
  content:'';
  height:8px;
  left:2px;
  position:absolute;
  top:2px;
  width:8px
}

.fabricHeaders .filterLabel.allNotSelected input[type='radio']:checked ~ .input-custom::before{
  border-radius:6px;
  height:3.33px;
  top:4px;
  width:8px
}

.fabricHeaders .filterLabel input[type='checkbox'] ~ .input-custom{
  border:2px solid var(--gray-light-3);
  border-radius:2px;
  height:15px;
  margin-right:8px;
  width:15px
}

.fabricHeaders .filterLabel input[type='checkbox']:checked ~ .input-custom{
  background-color:var(--primary);
  border-color:var(--primary);
  position:relative
}

.fabricHeaders .filterLabel input[type='checkbox']:checked ~ .input-custom::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjMzMzI5IDkuMTY2NjVMMC4xNjY2MjYgNS4xNjAyNEwxLjMzMzI5IDQuMDM4NDRMNC4zMzMyOSA2LjkyMzA2TDEwLjY2NjYgMC44MzMzMTNMMTEuODMzMyAxLjk1NTExTDQuMzMzMjkgOS4xNjY2NVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  content:'';
  height:9px;
  left:0;
  position:absolute;
  top:1px;
  width:11px
}

.fabricHeaders .requestOngoingFilter{
  min-width:144px
}

.fabricHeaders .factoryFilterBtn{
  left:16px;
  position:absolute !important;
  top:0
}

.fabricHeaders .factoryFilterBtn.disabled{
  opacity:0.4
}

.date-filter-bottomsheet .css-joz5u0:focus,.date-filter-bottomsheet .css-joz5u0[data-focus]{
  box-shadow:none
}

.date-filter-bottomsheet .filter-section{
  border-bottom:1px solid var(--gray-light-2);
  padding:16px 0
}

.date-filter-bottomsheet .filter-header{
  color:var(--text-light);
  font-size:14px;
  font-weight:600;
  margin:8px auto
}

.date-filter-bottomsheet .date-filter-btn{
  border-radius:24px;
  color:var(---text-light);
  font-weight:400;
  height:40px;
  padding:10px 12px
}

.date-filter-bottomsheet .checkbox{
  border-color:var(--gray-light-3)
}

.date-filter-bottomsheet .active-filter-btn{
  background:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary)
}

.date-filter-bottomsheet .clear-btn{
  font-size:16px;
  height:40px;
  width:112px
}

.date-filter-bottomsheet .apply-btn{
  font-size:16px;
  height:40px;
  width:112px
}

.editOrderDetails .radioButton input[type='radio'],.editOrderDetails .radioButton input[type='checkbox'],.editOrderDetails .checkboxButton input[type='radio'],.editOrderDetails .checkboxButton input[type='checkbox']{
  display:none
}

.editOrderDetails .radioButton input[type='radio']+span,.editOrderDetails .radioButton input[type='checkbox']+span,.editOrderDetails .checkboxButton input[type='radio']+span,.editOrderDetails .checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.editOrderDetails .radioButton input[type='radio'].selected+span,.editOrderDetails .radioButton input[type='checkbox'].selected+span,.editOrderDetails .checkboxButton input[type='radio'].selected+span,.editOrderDetails .checkboxButton input[type='checkbox'].selected+span{
  border:1px solid rgba(0,103,226,0.5)
}

.editOrderDetails .radioButton input[type='radio']:checked+span,.editOrderDetails .radioButton input[type='checkbox']:checked+span,.editOrderDetails .checkboxButton input[type='radio']:checked+span,.editOrderDetails .checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.editOrderDetails .radioButton input[type='radio']:checked+span::before,.editOrderDetails .radioButton input[type='checkbox']:checked+span::before,.editOrderDetails .checkboxButton input[type='radio']:checked+span::before,.editOrderDetails .checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.editOrderDetails .radioButton input[type='radio']:disabled+span,.editOrderDetails .radioButton input[type='checkbox']:disabled+span,.editOrderDetails .checkboxButton input[type='radio']:disabled+span,.editOrderDetails .checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.inputWithCurrency .inputLeft-content{
  left:16px;
  margin-top:1px;
  text-align:end;
  width:auto
}

.inputWithCurrency .input{
  padding-left:34px
}

.sliderContainer{
  height:80px;
  width:90%
}

.sliderContainer .handle{
  margin-top:25px;
  z-index:2
}

.sliderContainer .handle .handleThumb{
  background:var(--white);
  border-radius:50%;
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  height:24px;
  width:24px
}

.sliderContainer .handle .handleValue{
  background:var(--secondary-bg);
  border-radius:4px;
  color:var(--primary);
  left:calc((100% - 24px)/ -2);
  margin-top:-30px;
  padding:4px 2px;
  position:relative;
  top:-28px
}

.sliderContainer .handle .handleValue .suffix{
  padding-left:2px
}

.sliderContainer .handle .handleValue .prefix{
  padding-right:2px
}

.sliderContainer .handle .handleValue::after{
  border:4px solid transparent;
  border-top-color:var(--secondary-bg);
  bottom:-8px;
  content:'';
  left:0;
  margin:0 auto;
  position:absolute;
  right:0;
  width:4px
}

.sliderContainer .slider-tracks :first-child{
  background-color:var(--border)
}

.sliderContainer .track{
  background-color:var(--primary);
  border-radius:5px;
  height:4px;
  margin-top:35px;
  z-index:1
}

.sliderContainer .rail{
  background-color:var(--border);
  border-radius:8px;
  height:4px;
  margin-top:35px;
  position:absolute;
  width:100%
}

.filtersPage{
  height:100vh
}

.filtersPage .header{
  position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  height:56px;
  padding:0 24px;
  z-index:2
}

.filtersPage .header .clear-all-btn{
  color:var(--primary);
  font-size:16px;
  font-weight:600
}

.filtersPage .filterTabs{
  display:flex;
  height:calc(100vh - 56px - 56px);
  overflow:hidden
}

.filtersPage .filterTabs .tabList{
  background:var(--bg);
  border-bottom:0;
  box-shadow:none;
  flex-shrink:0;
  width:128px
}

.filtersPage .filterTabs .tabList button{
  border:0;
  color:var(--text-light);
  display:grid;
  font-weight:normal;
  grid-template-columns:1fr 20px;
  justify-content:space-between;
  padding:14px 12px;
  text-align:left;
  text-transform:capitalize
}

.filtersPage .filterTabs .tabList button:disabled{
  display:none
}

.filtersPage .filterTabs .tabList button .count{
  border-radius:50%;
  color:var(--text-light);
  font-size:12px;
  font-weight:normal;
  height:20px;
  text-align:center;
  width:20px
}

.filtersPage .filterTabs .tabList button[aria-selected='true']{
  background-color:var(--white);
  font-weight:600
}

.filtersPage .filterTabs .tabList button[aria-selected='true'] .count{
  background-color:var(--gray-light-2)
}

.filtersPage .filterTabs .tabPanels{
  overflow:scroll;
  padding:0 16px;
  width:100%
}

.filtersPage .filterTabs [type='checkbox']:not(:checked),.filtersPage .filterTabs [type='checkbox']:checked{
  left:-9999px;
  position:absolute
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span,.filtersPage .filterTabs [type='checkbox']:checked+span{
  padding-left:2em;
  position:relative
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span::before,.filtersPage .filterTabs [type='checkbox']:checked+span::before{
  background:var(--white);
  border:1px solid var(--gray-light-3);
  border-radius:2px;
  content:'';
  height:18px;
  left:0;
  position:absolute;
  top:0;
  width:18px
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span::after,.filtersPage .filterTabs [type='checkbox']:checked+span::after{
  color:#09ad7e;
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTcgMTRMMiA5LjE5MjMxTDMuNCA3Ljg0NjE1TDcgMTEuMzA3N0wxNC42IDRMMTYgNS4zNDYxNUw3IDE0WiIgZmlsbD0iIzAwNjdFMiIvPgo8L3N2Zz4K);
  font-size:1.3em;
  height:18px;
  left:0;
  line-height:0.8;
  position:absolute;
  top:0;
  transition:all 0.2s;
  width:18px
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span::after{
  opacity:0
}

.filtersPage .filterTabs .label-text{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.filtersPage .filterTabs .checkbox-label{
  color:var(--text-light);
  display:flex;
  height:48px;
  padding:12px 6px
}

.filtersPage .filterTabs .checkbox-label input{
  border-radius:4px;
  height:18px;
  margin-right:14px;
  width:18px
}

.filtersPage .filterTabs .checkbox-label input:checked ~ .label-text{
  font-weight:600
}

.filtersPage .filterTabs .label{
  font-size:12px;
  --text-opacity:1;
  color:#676773;
  color:rgba(103, 103, 115, var(--text-opacity));
  margin-bottom:16px;
  display:inline-block
}

.filtersPage .filterTabs .input{
  border:1px solid #d4d4d4;
  border-radius:4px;
  height:48px;
  padding:0 8px;
  width:80px
}

.filtersPage .filterTabs .sm-filter{
  position:relative
}

.filtersPage .filterTabs .sm-filter::after{
  background-color:var(--gray-light-2);
  bottom:0;
  content:'';
  height:1px;
  left:0;
  margin:auto;
  position:absolute;
  right:0;
  width:70%
}

.filtersPage .filterTabs .sm-assigned-filter.partial [type='checkbox']:not(:checked)+span::after,.filtersPage .filterTabs .sm-assigned-filter.partial [type='checkbox']:checked+span::after{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDLjkgMCAwIC45IDAgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjJjMC0xLjEtLjktMi0yLTJ6bS0yIDkuMTUyYzAgLjgyNy0uNjcgMS40OTgtMS40OTggMS40OThINS40OThhMS40OTggMS40OTggMCAxMTAtMi45OTZoNy4wMDRjLjgyNyAwIDEuNDk4LjY3IDEuNDk4IDEuNDk4eiIgZmlsbD0iIzAwNjdFMiIvPjwvc3ZnPgo=)
}

.filtersPage .filterTabs .filter-selected-icon{
  transform:scale(1.5)
}

.filtersPage .filterTabs .filter-selected-icon rect{
  fill:var(--gray-light-2)
}

.filtersPage .filterTabs .filter-selected-icon path{
  stroke:var(--text-light)
}

.filtersPage .footer-filter{
  background:var(--white);
  height:56px;
  padding:8px 24px
}

.filtersPage .footer-filter .footer-button{
  border-radius:4px;
  font-size:16px;
  font-weight:700;
  width:48%
}

.filtersPage .footer-filter .footer-button.primary-button{
  background-color:var(--primary);
  color:var(--white)
}

.filtersPage .footer-filter .footer-button.secondary-button{
  color:var(--primary)
}

.filterSearchInput{
  outline:none;
  padding-left:40px !important
}

.clearSearch path{
  fill:var(--gray)
}

.searchEntity{
  min-height:100vh
}

.searchEntity .searchInput{
  border:0;
  font-size:15px;
  height:24px;
  padding:0;
  box-shadow:none;
  outline:none;
  min-width:200px;
  height:32px
}

.searchEntity .searchInput:focus{
  border:0;
  box-shadow:0 0 0
}

.searchEntity .entityPlaceholder{
  background-color:rgba(225,225,234,0.2);
  border-radius:100%;
  min-height:48px;
  min-width:48px
}

.searchEntity .entityPlaceholder svg{
  transform:scale(1.1)
}

.searchEntity .navigateToFabric{
  margin-top:-26px
}

.searchPage{
  min-height:100vh
}

.searchPage .emptyState{
  background:var(--bg-2);
  height:calc(100vh - 56px);
  padding-top:80px;
  display:flex;
  flex-direction:column;
  align-items:center
}

.searchPage .searchInput{
  border:0;
  font-size:16px;
  height:24px;
  padding:0
}

.searchPage .searchInput:focus{
  border:0;
  box-shadow:0 0 0
}

.searchPage .crossButton{
  min-width:0
}

.searchPage .fabricGrid{
  -moz-column-gap:10px;
       column-gap:10px;
  row-gap:16px
}

.searchPage .suggestion{
  margin-bottom:8px;
  padding:10px 0
}

.searchPage .suggestion p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:calc(100vw - 118px)
}

.searchPage .coverPlaceholder{
  margin-right:16px
}

.searchPage .filledState{
  background:var(--bg-2);
  min-height:calc(100vh - 56px)
}

.searchPage .suggestionsWrapper{
  padding-left:8px
}

.forgotPasswordThanksPage{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding:0 40px;
  padding-top:24px
}

@media (max-width: 767px){
  .forgotPasswordThanksPage{
    align-items:unset;
    padding:0 28px;
    padding-top:24px
  }
}

.forgotPasswordThanksPage .borderWrapper{
  border:1px solid var(--border);
  border-radius:8px;
  margin:0 auto;
  width:412px
}

@media (max-width: 767px){
  .forgotPasswordThanksPage .borderWrapper{
    border:0;
    width:100%
  }
}

.forgotPasswordThanksPage .borderWrapper .contentWrapper{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
  text-align:center
}

@media (max-width: 767px){
  .forgotPasswordThanksPage .backButton{
    height:32px;
    width:32px
  }
}

.forgotPasswordThanksPage .logo{
  height:28px;
  margin:0 auto;
  margin-top:28px
}

@media (max-width: 767px){
  .forgotPasswordThanksPage .logo{
    margin-top:28px
  }
}

.forgotPasswordThanksPage .illustration{
  height:144px;
  margin-top:88px;
  width:144px
}

.forgotPasswordThanksPage .heading{
  color:var(--text);
  font-size:20px;
  font-weight:bold;
  margin-top:32px
}

.forgotPasswordThanksPage .subtext{
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  margin:0 auto;
  margin-bottom:24px;
  margin-top:16px;
  max-width:293px
}

.forgotPasswordThanksPage .buttonPrimary{
  font-size:14px;
  font-weight:bold;
  height:24px;
  width:248px
}

.forgotPasswordThanksPage .buttonPrimary:focus{
  box-shadow:none
}

.forgotPasswordPage{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding:0 40px;
  padding-top:24px
}

@media (max-width: 767px){
  .forgotPasswordPage{
    align-items:unset;
    padding:0 28px;
    padding-top:24px
  }
}

.forgotPasswordPage .borderWrapper{
  border:1px solid var(--border);
  border-radius:8px;
  width:412px
}

@media (max-width: 767px){
  .forgotPasswordPage .borderWrapper{
    border:0;
    width:100%
  }
}

.forgotPasswordPage .borderWrapper .backButtonWrapper{
  border-bottom:1px solid var(--border)
}

@media (max-width: 767px){
  .forgotPasswordPage .borderWrapper .backButtonWrapper{
    border:0
  }
}

.forgotPasswordPage .borderWrapper .contentWrapper{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
  padding:0 32px;
  text-align:center
}

@media (max-width: 767px){
  .forgotPasswordPage .borderWrapper .contentWrapper{
    padding:0
  }
}

@media (max-width: 767px){
  .forgotPasswordPage .backButton{
    height:32px;
    width:32px
  }
}

.forgotPasswordPage .formWrapper{
  width:100%
}

.forgotPasswordPage .logo{
  height:28px;
  margin:0 auto;
  margin-top:28px
}

@media (max-width: 767px){
  .forgotPasswordPage .logo{
    margin-top:28px
  }
}

.forgotPasswordPage .heading{
  color:var(--text);
  font-size:20px;
  font-weight:bold;
  margin-top:48px
}

.forgotPasswordPage .subtext{
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  margin:0 auto;
  margin-top:16px;
  max-width:92%
}

@media (max-width: 767px){
  .forgotPasswordPage .subtext{
    max-width:100%
  }
}

.forgotPasswordPage .buttonPrimary{
  font-size:14px
}

.forgotPasswordPage .formWrapper{
  margin-top:40px;
  text-align:left
}

.loginConfirmationPage{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding:0 40px;
  padding-top:24px
}

@media (max-width: 767px){
  .loginConfirmationPage{
    align-items:unset;
    padding:0 28px;
    padding-top:24px
  }
}

.loginConfirmationPage .borderWrapper{
  border:1px solid var(--border);
  border-radius:8px;
  width:412px
}

@media (max-width: 767px){
  .loginConfirmationPage .borderWrapper{
    border:0;
    width:100%
  }
}

.loginConfirmationPage .borderWrapper .contentWrapper{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
  padding:0 32px;
  text-align:center
}

@media (max-width: 767px){
  .loginConfirmationPage .borderWrapper .contentWrapper{
    padding:0
  }
}

.loginConfirmationPage .borderWrapper .contentWrapper__userIcon{
  margin-top:144px
}

.loginConfirmationPage .borderWrapper .contentWrapper__heading{
  font-size:20px;
  margin-top:40px
}

.loginConfirmationPage .borderWrapper .contentWrapper__btn{
  border-radius:4px;
  font-weight:700 !important;
  height:48px;
  padding:12px 24px;
  width:296px
}

.loginConfirmationPage .borderWrapper .contentWrapper__btn--ghost{
  font-weight:700 !important
}

.loginConfirmationPage .logo{
  height:28px;
  margin:0 auto;
  margin-top:28px
}

@media (max-width: 767px){
  .loginConfirmationPage .logo{
    margin-top:28px
  }
}

.loginPage{
  display:flex;
  height:100vh;
  justify-content:center;
  background-color:var(--gray-light-2)
}

.loginPage .loginFormContainer{
  border:1px solid var(--border);
  border-radius:8px;
  padding:24px 32px;
  text-align:center;
  width:412px;
  background-color:var(--white)
}

@media (max-width: 767px){
  .loginPage .loginFormContainer{
    border:0;
    width:100%
  }
}

.loginPage .loginFormContainer .loginFormWrapper{
  text-align:left
}

.loginPage .loginFormContainer .logo{
  height:28px;
  margin:0 auto
}

.loginPage .loginFormContainer .headingWrapper{
  margin-bottom:40px;
  margin-top:48px;
  position:relative
}

.loginPage .loginFormContainer .heading{
  color:var(--text);
  font-size:20px;
  font-weight:bold
}

.loginPage .loginFormContainer .linkWrapper{
  margin-top:16px;
  text-align:right
}

.loginPage .loginFormContainer .buttonPrimary{
  font-size:14px
}

.loginPage .loginFormContainer .inputMobile{
  padding-left:105px
}

.loginPage .loginFormContainer .inputLeftElement{
  border-bottom-left-radius:4px;
  border-top-left-radius:4px;
  height:46px;
  margin:1px;
  width:67px
}

.loginPage .loginFormContainer .inputLeftElement2{
  margin-left:75px;
  width:22px
}

.loginPage .loginFormContainer .inputLeftElement2 div{
  color:var(--gray);
  font-size:12px
}

.loginPage .loginFormContainer .blockedText{
  color:var(--red)
}

.loginPage .loginFormContainer .otpSent{
  color:var(--gray);
  font-weight:600;
  height:40px
}

.loginPage .loginFormContainer .otpSent span{
  font-weight:700;
  margin-left:2px
}

.loginPage .loginFormContainer .otpSent svg{
  margin-left:8px
}

.loginPage .loginFormContainer .otpInput input{
  border-color:var(--border);
  border-radius:4px;
  border-width:1px;
  color:var(--text-light);
  font-weight:600;
  height:48px;
  outline:none;
  width:56px !important
}

.loginPage .loginFormContainer .otpInput input:focus{
  border-color:var(--primary)
}

.loginPage .loginFormContainer .actionButtonsContainer{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  width:100%
}

.loginPage .loginFormContainer .actionButtonSlash{
  color:var(--gray-light-3);
  font-size:14;
  font-weight:600
}

.loginPage .loginFormContainer .actionButton{
  background:none;
  color:var(--primary);
  padding:8px
}

.loginPage .loginFormContainer .actionButton:hover{
  background:none
}

.loginPage .loginFormContainer .actionButtonResend{
  padding-left:0;
  padding-right:6px
}

.loginPage .loginFormContainer .actionButtonCall{
  padding-left:12px;
  padding-right:0
}

.loginPage .loginFormContainer .countdownBackground{
  background-color:var(--primary);
  border-radius:36px;
  bottom:0;
  left:0;
  opacity:0.05;
  position:absolute;
  right:0;
  top:0
}

.loginPage .loginFormContainer .countdownTime{
  color:var(--primary);
  font-size:12px;
  font-weight:700
}

.loginPage .loginFormContainer .error{
  color:var(--red)
}

.loginPage .loginFormContainer .topError{
  font-size:14px;
  margin-top:40px;
  text-align:center
}

.loginPage .loginFormContainer .toastContainerSuccess{
  background-color:var(--text-light);
  border-radius:4px;
  height:40px;
  width:100%
}

.loginPage .loginFormContainer .toastContainerError{
  background-color:var(--red);
  border-radius:4px;
  height:40px;
  width:100%
}

.loginPage .loginFormContainer .toast{
  align-items:center;
  display:flex;
  justify-content:space-between;
  padding:8px 16px;
  padding-right:21px
}

.loginPage .loginFormContainer .toastText{
  color:var(--white);
  font-size:16px;
  font-weight:600
}

.loginPage .loginFormContainer .toastClose{
  height:16;
  margin-left:10;
  padding:1;
  width:16
}

.noEntryPage{
  display:flex;
  height:100vh;
  justify-content:center
}

@media (max-width: 767px){
  .noEntryPage{
    padding:72px 32px 0
  }
}

.noEntryPage .noEntryContainer{
  border:1px solid var(--border);
  border-radius:8px;
  padding:24px 32px;
  text-align:center;
  width:412px
}

@media (max-width: 767px){
  .noEntryPage .noEntryContainer{
    border:0;
    padding:0;
    width:100%
  }
}

.noEntryPage .noEntryContainer .logo{
  height:28px;
  margin:0 auto
}

.noEntryPage .noEntryContainer .noEntryIcon{
  margin:0 auto;
  margin-top:80px
}

.noEntryPage .noEntryContainer .title{
  color:var(--text-light);
  font-size:16px;
  font-weight:700;
  margin-top:24px;
  text-align:center
}

.noEntryPage .noEntryContainer .description{
  color:var(--gray);
  margin-top:16px;
  text-align:center
}

.noEntryPage .noEntryContainer .questions{
  margin-top:72px
}

.noEntryPage .noEntryContainer .question{
  color:var(--text-light);
  font-weight:600;
  margin-top:24px;
  text-align:left
}

.noEntryPage .noEntryContainer .answer{
  color:var(--gray);
  text-align:left
}

.notRegisteredPage{
  display:flex;
  height:100vh;
  justify-content:center
}

@media (max-width: 767px){
  .notRegisteredPage{
    padding:72px 32px 0
  }
}

.notRegisteredPage .notRegisteredContainer{
  border:1px solid var(--border);
  border-radius:8px;
  padding:24px 32px;
  text-align:center;
  width:412px
}

@media (max-width: 767px){
  .notRegisteredPage .notRegisteredContainer{
    border:0;
    padding:0;
    width:100%
  }
}

.notRegisteredPage .notRegisteredContainer .logo{
  height:28px;
  margin:0 auto
}

.notRegisteredPage .notRegisteredContainer .notRegisteredIcon{
  margin:0 auto;
  margin-top:80px
}

.notRegisteredPage .notRegisteredContainer .title{
  color:var(--text-light);
  font-size:16px;
  font-weight:700;
  margin-top:24px;
  text-align:center
}

.notRegisteredPage .notRegisteredContainer .description{
  color:var(--gray);
  margin-top:16px;
  text-align:center
}

.notRegisteredPage .notRegisteredContainer .title2{
  color:var(--text-light);
  font-size:14px;
  font-weight:600;
  margin-top:72px;
  text-align:center
}

.notRegisteredPage .notRegisteredContainer .description2{
  color:var(--gray);
  text-align:center
}

.filtersPage{
  height:100vh
}

.filtersPage .header{
  position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  height:56px;
  padding:0 24px;
  z-index:2
}

.filtersPage .header .clear-all-btn{
  color:var(--primary);
  font-size:16px;
  font-weight:600
}

.filtersPage .filterTabs{
  display:flex;
  height:calc(100vh - 56px - 56px);
  overflow:hidden
}

.filtersPage .filterTabs .orderTabList{
  background:var(--bg);
  border-bottom:0;
  box-shadow:none;
  flex-shrink:0;
  width:128px
}

.filtersPage .filterTabs .orderTabList button{
  border:0;
  color:var(--text-light);
  display:grid;
  font-weight:normal;
  grid-template-columns:1fr 20px;
  justify-content:space-between;
  padding:14px 12px;
  text-align:left;
  text-transform:capitalize
}

.filtersPage .filterTabs .orderTabList button:disabled{
  display:none
}

.filtersPage .filterTabs .orderTabList button .count{
  border-radius:50%;
  color:var(--text-light);
  font-size:12px;
  font-weight:normal;
  height:20px;
  text-align:center;
  width:20px
}

.filtersPage .filterTabs .orderTabList button[aria-selected='true']{
  background-color:var(--white);
  font-weight:600
}

.filtersPage .filterTabs .orderTabList button[aria-selected='true'] .count{
  background-color:var(--gray-light-2)
}

.filtersPage .filterTabs .tabPanels{
  overflow:scroll;
  padding:0 16px;
  width:100%
}

.filtersPage .filterTabs [type='checkbox']:not(:checked),.filtersPage .filterTabs [type='checkbox']:checked{
  left:-9999px;
  position:absolute
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span,.filtersPage .filterTabs [type='checkbox']:checked+span{
  padding-left:2em;
  position:relative
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span::before,.filtersPage .filterTabs [type='checkbox']:checked+span::before{
  background:var(--white);
  border:1px solid var(--gray-light-3);
  border-radius:2px;
  content:'';
  height:18px;
  left:0;
  position:absolute;
  top:0;
  width:18px
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span::after,.filtersPage .filterTabs [type='checkbox']:checked+span::after{
  color:#09ad7e;
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTcgMTRMMiA5LjE5MjMxTDMuNCA3Ljg0NjE1TDcgMTEuMzA3N0wxNC42IDRMMTYgNS4zNDYxNUw3IDE0WiIgZmlsbD0iIzAwNjdFMiIvPgo8L3N2Zz4K);
  font-size:1.3em;
  height:18px;
  left:0;
  line-height:0.8;
  position:absolute;
  top:0;
  transition:all 0.2s;
  width:18px
}

.filtersPage .filterTabs [type='checkbox']:not(:checked)+span::after{
  opacity:0
}

.filtersPage .filterTabs .label-text{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.filtersPage .filterTabs .checkbox-label{
  color:var(--text-light);
  display:flex;
  height:48px;
  padding:12px 6px
}

.filtersPage .filterTabs .checkbox-label input{
  border-radius:4px;
  height:18px;
  margin-right:14px;
  width:18px
}

.filtersPage .filterTabs .checkbox-label input:checked ~ .label-text{
  font-weight:600
}

.filtersPage .filterTabs .label{
  font-size:12px;
  --text-opacity:1;
  color:#676773;
  color:rgba(103, 103, 115, var(--text-opacity));
  margin-bottom:16px;
  display:inline-block
}

.filtersPage .filterTabs .input{
  border:1px solid #d4d4d4;
  border-radius:4px;
  height:48px;
  padding:0 8px;
  width:80px
}

.filtersPage .filterTabs .sm-filter{
  position:relative
}

.filtersPage .filterTabs .sm-filter::after{
  background-color:var(--gray-light-2);
  bottom:0;
  content:'';
  height:1px;
  left:0;
  margin:auto;
  position:absolute;
  right:0;
  width:70%
}

.filtersPage .filterTabs .sm-assigned-filter.partial [type='checkbox']:not(:checked)+span::after,.filtersPage .filterTabs .sm-assigned-filter.partial [type='checkbox']:checked+span::after{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDLjkgMCAwIC45IDAgMnYxNGMwIDEuMS45IDIgMiAyaDE0YzEuMSAwIDItLjkgMi0yVjJjMC0xLjEtLjktMi0yLTJ6bS0yIDkuMTUyYzAgLjgyNy0uNjcgMS40OTgtMS40OTggMS40OThINS40OThhMS40OTggMS40OTggMCAxMTAtMi45OTZoNy4wMDRjLjgyNyAwIDEuNDk4LjY3IDEuNDk4IDEuNDk4eiIgZmlsbD0iIzAwNjdFMiIvPjwvc3ZnPgo=)
}

.filtersPage .filterTabs .filter-selected-icon{
  transform:scale(1.5)
}

.filtersPage .filterTabs .filter-selected-icon rect{
  fill:var(--gray-light-2)
}

.filtersPage .filterTabs .filter-selected-icon path{
  stroke:var(--text-light)
}

.filtersPage .footer{
  background:var(--white);
  height:56px;
  padding:8px 24px
}

.filtersPage .footer .footer-button{
  border-radius:4px;
  font-size:16px;
  font-weight:700;
  width:48%
}

.filtersPage .footer .footer-button.primary-button{
  background-color:var(--primary);
  color:var(--white)
}

.filtersPage .footer .footer-button.secondary-button{
  color:var(--primary)
}

.searchPage{
  min-height:100vh
}

.searchPage .emptyState{
  background:var(--bg-2);
  height:calc(100vh - 56px);
  padding-top:80px;
  display:flex;
  flex-direction:column;
  align-items:center
}

.searchPage .searchInput{
  border:0;
  font-size:16px;
  height:24px;
  padding:0
}

.searchPage .searchInput:focus{
  border:0;
  box-shadow:0 0 0
}

.searchPage .crossButton{
  min-width:0
}

.searchPage .fabricGrid{
  -moz-column-gap:10px;
       column-gap:10px;
  row-gap:16px
}

.searchPage .suggestion{
  margin-bottom:8px;
  padding:10px 0
}

.searchPage .suggestion p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:calc(100vw - 118px)
}

.searchPage .coverPlaceholder{
  margin-right:16px
}

.searchPage .filledState{
  background:var(--bg-2);
  min-height:calc(100vh - 56px)
}

.searchPage .suggestionsWrapper{
  padding-left:8px
}

@-webkit-keyframes fadeIn{
  from{
    opacity:0
  }

  to{
    opacity:1
  }
}

@keyframes fadeIn{
  from{
    opacity:0
  }

  to{
    opacity:1
  }
}

.passwordResetModal{
  -webkit-animation:fadeIn 0.25s ease;
          animation:fadeIn 0.25s ease;
  border-radius:16px;
  width:224px !important
}

.passwordResetModal .passwordResetModalClose svg path{
  fill:var(--placeholder)
}

.passwordResetModal .passwordResetModalBody{
  padding-bottom:24px;
  padding-top:40px;
  text-align:center
}

.passwordResetModal .passwordResetModalBody .checkIcon{
  height:56px;
  margin:0 auto;
  width:56px
}

.passwordResetModal .passwordResetModalBody .title{
  color:var(--text);
  font-weight:bold;
  margin-top:24px
}

.passwordResetModal .passwordResetModalBody .text{
  color:var(--gray);
  font-size:14px;
  margin-top:4px
}

.passwordResetModalOverlay{
  background-color:rgba(0,1,38,0.3) !important
}

.resetPasswordPage{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding-top:24px
}

@media (max-width: 767px){
  .resetPasswordPage{
    align-items:unset;
    padding:0 32px;
    padding-top:24px
  }
}

.resetPasswordPage .borderWrapper{
  border:1px solid var(--border);
  border-radius:8px;
  width:412px
}

@media (max-width: 767px){
  .resetPasswordPage .borderWrapper{
    border:0;
    width:100%
  }
}

.resetPasswordPage .borderWrapper .backButtonWrapper{
  border-bottom:1px solid var(--border)
}

@media (max-width: 767px){
  .resetPasswordPage .borderWrapper .backButtonWrapper{
    border:0
  }
}

.resetPasswordPage .borderWrapper .contentWrapper{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
  padding:0 32px;
  text-align:center
}

@media (max-width: 767px){
  .resetPasswordPage .borderWrapper .contentWrapper{
    padding:0
  }
}

@media (max-width: 767px){
  .resetPasswordPage .backButton{
    height:32px;
    width:32px
  }
}

.resetPasswordPage .formWrapper{
  margin-top:38px;
  text-align:left;
  width:100%
}

.resetPasswordPage .formWrapper input[type='password']{
  height:48px
}

.resetPasswordPage .formWrapper .inputRightAddon{
  height:48px
}

.resetPasswordPage .logo{
  height:28px;
  margin:0 auto;
  margin-top:28px
}

@media (max-width: 767px){
  .resetPasswordPage .logo{
    margin-top:16px
  }
}

.resetPasswordPage .passwordTipWrapper{
  background:var(--bg);
  border-radius:8px;
  margin-top:32px;
  padding:10px 16px;
  width:296px
}

@media (max-width: 767px){
  .resetPasswordPage .passwordTipWrapper{
    width:100%
  }
}

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

.resetPasswordPage .passwordTip:not(:last-child){
  margin-bottom:8px
}

.resetPasswordPage .passwordTip.greenCheck svg rect{
  fill:var(--green)
}

.resetPasswordPage .passwordTip .passwordTipText{
  color:var(--gray);
  font-size:12px;
  font-weight:600
}

.resetPasswordPage .eyeButton{
  margin-right:16px;
  margin-top:0
}

.resetPasswordPage .eyeButton .eyeIcon{
  height:24px;
  width:24px
}

.resetPasswordPage .buttonPrimary{
  font-size:14px
}

.tokenExpiredPage{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding:0 40px;
  padding-top:24px
}

@media (max-width: 767px){
  .tokenExpiredPage{
    align-items:unset;
    padding:0 28px;
    padding-top:24px
  }
}

.tokenExpiredPage .borderWrapper{
  border:1px solid var(--border);
  border-radius:8px;
  width:412px
}

@media (max-width: 767px){
  .tokenExpiredPage .borderWrapper{
    border:0;
    width:100%
  }
}

.tokenExpiredPage .borderWrapper .backButtonWrapper{
  border-bottom:1px solid var(--border)
}

@media (max-width: 767px){
  .tokenExpiredPage .borderWrapper .backButtonWrapper{
    border:0
  }
}

.tokenExpiredPage .borderWrapper .contentWrapper{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
  padding:0 32px;
  padding-top:135px;
  text-align:center
}

.tokenExpiredPage .borderWrapper .contentWrapper__heading{
  font-size:20px;
  margin-top:30px
}

.tokenExpiredPage .borderWrapper .contentWrapper__resendBtn{
  font-weight:700 !important;
  margin-top:66px
}

@media (max-width: 767px){
  .tokenExpiredPage .backButton{
    height:32px;
    width:32px
  }
}

.tokenExpiredPage .logo{
  height:28px;
  margin:0 auto;
  margin-top:28px
}

@media (max-width: 767px){
  .tokenExpiredPage .logo{
    margin-top:28px
  }
}

.fileinput{
  border:1px dashed var(--gray-light);
  padding-block:14px;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center
}

.fileinput input{
  display:none
}

.fileinput label{
  cursor:pointer;
  color:var(--primary);
  font-weight:600;
  font-size:14px;
  margin-left:9px
}

.fileinput .datepick{
  font-weight:600;
  color:var(--neutralGray2);
  font-size:14px
}

.bottom-sheet-container{
  max-height:90vh;
  overflow:hidden;
  position:relative
}

.scrollable-content{
  max-height:70vh;
  overflow-y:auto;
  padding-right:2px
}

.scrollable-content::-webkit-scrollbar{
  width:0;
  background:transparent
}

.scrollable-content{
  scrollbar-width:none
}

.scrollable-content{
  -ms-overflow-style:none
}

.searchEntity{
  min-height:100vh
}

.searchEntity .searchInput{
  border:0;
  font-size:15px;
  height:24px;
  padding:0;
  box-shadow:none;
  outline:none;
  min-width:200px;
  height:32px
}

.searchEntity .searchInput:focus{
  border:0;
  box-shadow:0 0 0
}

.searchEntity .entityPlaceholder{
  background-color:rgba(225,225,234,0.2);
  border-radius:100%;
  min-height:48px;
  min-width:48px
}

.searchEntity .entityPlaceholder svg{
  transform:scale(1.1)
}

.searchEntity .navigateToFabric{
  margin-top:-26px
}

.activeTab.fabrics svg rect{
  fill:var(--primary)
}

.activeTab.account svg path,.activeTab.quotes svg path{
  fill:var(--primary)
}

.activeTab .title{
  color:var(--primary)
}

.bottomBar{
  box-shadow:0 -1px 2px rgba(0,0,0,0.1)
}

.blue-footer{
  background:var(--blue-two);
  box-shadow:none
}

.navbar-main{
  height:36px;
  align-items:center
}

.title-main{
  color:#00142d;
  font-weight:700;
  cursor:pointer;
  min-width:102px;
  font-size:20px;
  display:flex;
  align-items:center;
  height:27px
}

.filter-text{
  color:var(--gray-light-9)
}

.card-container{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:32px;
  flex-wrap:wrap;
  margin-top:32px;
  margin-left:45px;
  margin-bottom:80px
}

.radio-group-dashboard{
  display:flex;
  align-items:center;
  height:27px
}

.radio-item-dashboard{
  margin-right:16px;
  cursor:pointer;
  display:flex;
  color:var(--gray2);
  align-items:center;
  height:100%
}

.radio-item-dashboard .radio-input-dashboard{
  cursor:pointer;
  margin-top:0;
  margin-right:8px
}

.radio-item-dashboard .radio-label-dashboard{
  cursor:pointer;
  transition:color 0.2s ease;
  line-height:27px;
  font-weight:400;
  display:flex;
  align-items:center
}

.radio-item-dashboard .selected-radio-label-dashboard{
  color:var(--primary);
  font-weight:600
}

.card-dashboard{
  display:flex;
  justify-content:center;
  min-width:280px;
  min-height:169px;
  box-shadow:0px 0px 3px 0px rgba(0,103,226,0.12);
  border-radius:12px;
  flex-shrink:0
}

.card-dashboard.bg-white-custom{
  background:var(--white)
}

.card-dashboard.bg-orange-custom{
  background:var(--red-bg-3)
}

.inner-card{
  display:flex;
  justify-content:space-between;
  width:100%
}

.left-container{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-left:20px;
  padding-top:20px
}

.right-container{
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.card-title{
  color:#00142d;
  font-weight:700;
  max-width:156px;
  font-size:18px
}

.arrow-container{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  height:32px;
  min-width:32px;
  cursor:pointer
}

.count-container{
  color:var(--blue-voilet);
  font-weight:600;
  font-size:32px
}

.order-text{
  color:var(--gray2);
  font-weight:400;
  font-size:14px;
  margin-left:6px;
  word-wrap:break-word;
  overflow-wrap:break-word;
  display:inline-block
}

.info-icon-container{
  margin-top:2px
}

.tight-line{
  margin:0;
  line-height:1.1
}

.crossIcon{
  cursor:pointer
}

.custom-modal{
  max-height:661px;
  overflow:hidden
}

.custom-modal-body{
  max-height:600px;
  overflow-y:auto;
  scrollbar-width:none
}

.custom-modal-body::-webkit-scrollbar{
  display:none
}

.modal-card{
  box-shadow:0px 0px 3px 0px rgba(0,103,226,0.12)
}

.date-container{
  background-color:#f2f8ff;
  border-radius:16px
}

.date-text-custom{
  color:#3944b4
}

.request-btn{
  background-color:#f2f8ff;
  border-radius:16px;
  height:32px;
  border:1px solid #cee4ff
}

.btn-text{
  color:#0067e2;
  font-weight:700;
  font-size:12px;
  padding-left:8px
}

.role-text{
  color:#626870;
  font-weight:600;
  font-size:12px
}

.img-container-dashboard{
  display:flex;
  align-items:center;
  margin-top:2px
}

.data-box-dashboard{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:8px;
  align-items:center;
  width:100%
}

.product-img-dashboard{
  width:48px;
  height:40px;
  border-radius:8px;
  -o-object-fit:cover;
     object-fit:cover
}

.data-box-label-dashboard{
  position:absolute;
  bottom:0;
  left:0;
  color:#00142d;
  font-size:12px;
  font-weight:600;
  text-align:center;
  width:100%;
  background:rgba(255,255,255,0.6);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-left:2px
}

.custom-title{
  color:#00142d;
  font-weight:700;
  font-size:20px
}

.custom-title-length{
  color:#6e6cb2;
  font-size:20px;
  font-weight:400
}

.custom-name{
  max-width:150px
}

.emptyStateContainer{
  background:var(--bg-2);
  padding-top:120px;
  text-align:center
}

.emptyStateContainer .title{
  font-size:20px
}

.emptyStateContainer .ctaAction{
  align-items:center;
  display:flex
}

.shimmerContainer{
  padding:8px
}

.shimmerContainer .column{
  flex:1;
  flex-direction:column
}

.shimmerContainer .fabric-card-shimmer{
  background-color:var(--white);
  border-radius:8px;
  display:flex;
  height:160px;
  padding:8px
}

.shimmerContainer .fabric-card-shimmer:not(:first-child){
  margin-top:8px
}

.shimmerContainer .fabric-card-shimmer .image{
  background-color:var(--gray-light-2);
  border-radius:4px;
  height:50px;
  margin-right:16px;
  width:60px
}

.shimmerContainer .fabric-card-shimmer .justifySpaceBetween{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px
}

.shimmerContainer .fabric-card-shimmer .location{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin-left:10px
}

.shimmerContainer .fabric-card-shimmer .text{
  background:var(--gray-light-2);
  border-radius:0
}

.shimmerContainer .fabric-card-shimmer .text.id{
  height:14px;
  width:46px
}

.shimmerContainer .fabric-card-shimmer .text.name{
  height:18px;
  margin-top:4px;
  width:100%
}

.shimmerContainer .fabric-card-shimmer .text.detail{
  height:16px;
  margin-top:8px
}

.shimmerContainer .fabric-card-shimmer .text.long-detail{
  width:196px
}

.shimmerContainer .fabric-card-shimmer .text.m-0{
  margin:0
}

.shimmerContainer .fabric-card-shimmer .text.w-40px{
  width:40px
}

.shimmerContainer .fabric-card-shimmer .text.w-56px{
  width:56px
}

.shimmerContainer .fabric-card-shimmer .text.w-80px{
  width:80px
}

.shimmerContainer .fabric-card-shimmer .text.h-18px{
  height:18px
}

.shimmerContainer .fabric-card-shimmer .shine{
  -webkit-animation-duration:1s;
          animation-duration:1s;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  -webkit-animation-name:placeholderShimmer;
          animation-name:placeholderShimmer;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  background:#f6f7f8;
  background-image:linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat:no-repeat;
  background-size:800px 200px;
  display:inline-block;
  position:relative
}

@-webkit-keyframes placeholderShimmer{
  0%{
    background-position:-468px 0
  }

  100%{
    background-position:468px 0
  }
}

@keyframes placeholderShimmer{
  0%{
    background-position:-468px 0
  }

  100%{
    background-position:468px 0
  }
}

.supplierCardsteppers{
  display:flex;
  flex-direction:column;
  height:46px;
  justify-content:space-between;
  position:relative
}

.supplierCardsteppers.no-line::after{
  content:'';
  display:none
}

.supplierCardsteppers::after{
  background:var(--border);
  content:'';
  height:14px;
  left:3px;
  position:absolute;
  top:calc(50% - 8px);
  width:2px
}

.supplierCardsteppers .step-container{
  align-items:center;
  display:flex;
  position:relative
}

.supplierCardsteppers .step-circle{
  background:var(--white);
  border-radius:50%;
  height:100%;
  position:absolute;
  width:100%
}

.supplierCardsteppers .step-circle.red{
  background:var(--red)
}

.supplierCardsteppers .step-circle.green{
  background:var(--green)
}

.supplierCardsteppers .step-circle.active{
  background:var(--green)
}

.supplierCardsteppers .step-circle.inactive{
  background:var(--white);
  border:1px solid var(--placeholder)
}

.supplierCardsteppers .step-circle-container{
  height:8px;
  width:8px
}

.supplierCardsteppers .step-label{
  color:var(--gray);
  font-size:12px;
  margin-left:10px
}

.supplierCardsteppers .date{
  background:var(--yellow-bg);
  border-radius:16px;
  color:var(--orange);
  font-size:12px;
  font-weight:600;
  margin-left:8px;
  padding:4px 8px
}

.supplierCardsteppers .date.purple{
  background:var(--purple-light-opacity);
  color:var(--purple-secondary-dark)
}

.supplierCardsteppers .pill{
  border-radius:16px;
  font-size:12px;
  font-weight:600;
  margin-left:8px;
  padding:4px 8px
}

.supplierCardsteppers .pill.green{
  background:var(--green-bg);
  color:var(--green)
}

.supplierCardsteppers .pill.red{
  background:var(--red-bg-3);
  color:var(--red)
}

.supplierCardsteppers .cancelled-steppers{
  height:54px !important
}

.supplier-card-header .product-name{
  max-width:64%
}

.supplier-card-header .data-box{
  position:relative
}

.supplier-card-header .img-container{
  display:flex;
  justify-content:flex-end;
  max-width:80px;
  text-align:right
}

.supplier-card-header .data-box-label{
  position:absolute;
  bottom:7px;
  display:flex;
  background:rgba(255,255,255,0.8);
  border-radius:4px;
  width:100%;
  color:#00142D;
  padding-left:4px;
  padding-right:4px
}

.supplier-card-header.order-card-header{
  min-height:40px
}

.supplier-card-header .content-container{
  padding-right:16px
}

.supplier-card-header .product-img{
  height:40px;
  -o-object-fit:cover;
     object-fit:cover;
  width:48px
}

.supplier-card-header .product-info-item{
  color:var(--gray)
}

.supplier-card-header .product-info-item:not(:first-child)::before{
  color:var(--text);
  content:' \2022';
  font-size:10px;
  margin:0 4px
}

.supplier-card-header .badge{
  background:var(--green);
  border-radius:12px;
  color:var(--white);
  font-size:10px;
  font-weight:600;
  height:18px;
  margin-left:8px;
  padding:0 4px
}

.supplier-card-header .pipe{
  color:var(--border);
  margin:0 8px
}

.supplier-card-header .dot{
  background:var(--text) !important;
  font-size:12px;
  margin:0 4px
}

.supplier-card-header .req-type{
  color:#00142D
}

@-webkit-keyframes fadeIn{
  from{
    opacity:0
  }

  to{
    opacity:1
  }
}

@keyframes fadeIn{
  from{
    opacity:0
  }

  to{
    opacity:1
  }
}

.attachmentChoiceModal .button{
  color:var(--text-light);
  justify-content:space-between;
  text-decoration:none !important;
  width:100%
}

.attachmentChoiceModal .button:focus{
  box-shadow:none
}

.attachmentChoiceModal .button:not(:last-child){
  margin-bottom:24px
}

.attachmentChoiceModal .button .buttonLeft{
  align-items:center;
  display:flex
}

.attachmentChoiceModal .iconWrapper{
  align-items:center;
  background:var(--bg);
  border-radius:50%;
  display:flex;
  height:32px;
  justify-content:center;
  margin-right:8px;
  width:32px
}

.overlay{
  background-color:rgba(0,1,38,0.3) !important
}

.attachmentChoiceModalStyles .addPicturesButton{
  background-color:var(--white) !important;
  border-radius:2px;
  color:var(--primary) !important;
  font-size:24px !important;
  font-weight:600 !important;
  height:40px !important;
  min-width:unset;
  width:36px !important
}

.attachmentChoiceModalStyles .addPicturesButton:focus{
  box-shadow:none !important
}

.attachmentChoiceModalStyles .attachFileButton{
  color:var(--primary);
  font-size:14px;
  font-weight:600;
  padding:12px 0;
  width:100%
}

.attachmentChoiceModalStyles .attachFileButton .attachment{
  margin-right:8px
}

.attachmentChoiceModalStyles .attachFileButton:focus{
  box-shadow:none;
  text-decoration:none
}

.cameraModalContent{
  margin:0 !important
}

.cameraModalContent>div{
  padding:0
}

.cameraCanvas video{
  background:var(--border);
  height:100vh;
  -o-object-fit:fill;
     object-fit:fill;
  width:100%
}

.cameraCanvas .camera{
  position:relative
}

.cameraCanvas .camera:not(.visible) video{
  height:0
}

.cameraCanvas .cameraActions{
  bottom:40px;
  display:grid;
  grid-template-columns:80px 1fr 80px;
  position:absolute;
  width:100%
}

.cameraCanvas .cameraActions button{
  outline:0
}

.cameraCanvas .output{
  align-items:center;
  background:var(--border);
  display:flex;
  height:100vh;
  position:relative;
  width:100%
}

.cameraCanvas .output:not(.visible){
  display:none
}

.cameraCanvas canvas{
  height:100%;
  width:100%
}

.cameraCanvas .previewActions{
  bottom:40px;
  display:flex;
  justify-content:space-around;
  position:absolute;
  width:100%
}

.cameraCanvas .previewActions span{
  color:var(--white);
  font-size:14px;
  font-weight:bold;
  text-shadow:1px 1px 3px var(--text)
}

#closeButton{
  padding-left:40px
}

#captureButton{
  display:flex;
  justify-content:center
}

.fileinput{
  border:1px dashed var(--gray-light);
  padding-block:14px;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center
}

.fileinput input{
  display:none
}

.fileinput label{
  cursor:pointer;
  color:var(--primary);
  font-weight:600;
  font-size:14px;
  margin-left:9px
}

.fileinput .datepick{
  font-weight:600;
  color:var(--neutralGray2);
  font-size:14px
}

.filePill{
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:4px 8px;
  gap:8px;
  height:28px;
  background:#f2f8ff;
  border:1px solid #cee4ff;
  border-radius:24px
}

.footerBackButton{
  opacity:0.5;
  border:1px solid #f2f2f2;
  border-radius:26.6667px
}

.footerShadow{
  box-shadow:inset 0px 1px 0px rgba(0,1,38,0.1)
}

.labelValueContainer{
  height:72px;
  margin-bottom:24px
}

.lastRow{
  margin-bottom:0
}

.message{
  margin-bottom:36px
}

.separator{
  border-top:1px solid var(--gray-light-2);
  margin-bottom:24px
}

.cancelAttachmentsModal{
  border-radius:16px
}

.cancelAttachmentsModal>div{
  padding:24px
}

.cancelAttachmentsModal .cancelModalButton{
  font-weight:700;
  height:40px;
  padding:0 28px
}

.markReceivedBtn{
  background:var(--primary) !important;
  border-radius:24px;
  color:var(--white);
  font-size:16px;
  font-weight:700;
  height:40px;
  padding:0 12px
}

.markReceivedBtn:disabled{
  cursor:not-allowed;
  opacity:0.5
}

.calender-header{
  background-color:#e1e1ea33;
  border-radius:14px 14px 0 0 !important;
  display:flex;
  gap:8px;
  margin:-8px 0;
  padding:24px 24px 16px;
  position:relative
}

.calender-header .title,.calender-header .date{
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  line-height:20px
}

.calender-header .title{
  color:var(--gray);
  font-weight:normal
}

.calender-header .date{
  color:var(--text-light);
  font-weight:600
}

.commentsModal{
  max-height:80%;
  min-height:280px;
  overflow:scroll;
  width:280px !important
}

.commentsModal .closeButton{
  height:40px;
  padding:0 28px
}

.commentsModal .modalBody{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  justify-content:space-between
}

.dateAddedToast.Toastify__toast--default{
  font-size:16px;
  border-radius:9999px;
  background:var(--green);
  padding:4px 22px
}

.dateAddedToast.Toastify__toast--default .Toastify__toast-body{
  font-weight:600
}

button.bottomSheetOption{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  height:auto;
  margin-right:16px;
  padding:10px 22px
}

button.bottomSheetOption.active{
  border:1px solid var(--primary);
  color:var(--primary)
}

.viewHistoryContainer{
  max-height:80vh;
  overflow:auto
}

.attachFileModal{
  width:100%
}

.attachFileModal .attachFileHeader{
  background-color:#f9faff;
  border-radius:14px 14px 0 0 !important;
  height:72px;
  margin:0;
  padding:24px 8px 24px 24px
}

.attachFileModal .attachFileContainer{
  border:1px solid var(--border);
  border-radius:10px;
  margin-top:8px
}

.attachFileModal .attachFileButton{
  background-color:var(--gray-light-2);
  border:0 !important;
  border-radius:4px;
  height:40px;
  margin:24px;
  text-align:center;
  width:36px !important
}

.markCompleteBottomSheetContainer{
  position:fixed !important
}

.errorMessage{
  height:16px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  display:flex;
  align-items:center;
  color:#eb5757
}

.productionAttachmentsMarkReady{
  border:1px dashed var(--border);
  height:40px;
  margin-bottom:12px
}

.productionAttachmentsMarkReady>:first-child{
  border-right:1px dashed var(--border)
}

.productionAttachmentsMarkReady .attachedFileWrapper,.productionAttachmentsMarkReady .attachFileButton{
  flex-grow:1;
  width:50%
}

.productionAttachmentsMarkReady .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:40px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.inputBoxRadius{
  border-top-right-radius:0px !important;
  border-bottom-right-radius:0px !important
}

input[type=number]:disabled{
  opacity:1
}

.inputGroup.withRightAddon input{
  border-right-width:0
}

.inputGroup.withRightAddon .addon{
  font-weight:600;
  padding-left:24px;
  padding-right:24px
}

.markReadyBottomSheetBody{
  padding:0px 2px
}

.extraTnaGroup .rightBodyText{
  color:var(--gray) !important
}

.hideScrollbar::-webkit-scrollbar{
  display:none
}

.hideScrollbar{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.add-image-button{
  width:36px;
  height:40px;
  background:rgba(225,225,234,0.4);
  border-radius:8px
}

.imageHeight{
  height:40px
}

.upload-image-box{
  box-sizing:border-box;
  width:100%;
  height:162px;
  border:1px solid #e5e5e5;
  border-radius:8px
}

.upload-image-box .upload-image-box-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0px;
  height:72px;
  margin-left:20px;
  margin-top:16px
}

.upload-image-box .upload-image-box-body .upload-image-box-body-text{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  margin-top:16px;
  color:#6e6cb2;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  padding:0px;
  gap:4px;
  height:16px
}

.upload-image-box .upload-image-box-body .upload-image-box-image{
  height:40px;
  border-radius:8px
}

.upload-image-box .upload-image-box-header{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:16px 16px 8px;
  gap:8px;
  height:58px;
  left:0px;
  top:0px;
  background:rgba(225,225,234,0.2);
  border-radius:12px 12px 0px 0px
}

.upload-image-box .upload-image-box-header .header-content{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px 16px 0px 0px;
  gap:8px;
  height:34px
}

.upload-image-box .upload-image-box-header .header-icon{
  width:32px;
  height:32px
}

.upload-image-box .upload-image-box-header .header-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0px;
  gap:2px;
  height:34px
}

.upload-image-box .upload-image-box-header .header-text .name{
  height:16px;
  margin-top:6px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  display:flex;
  align-items:center;
  color:#626870
}

.upload-image-box .upload-image-box-header .header-text .value{
  height:16px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-size:12px;
  line-height:16px;
  display:flex;
  align-items:center;
  color:#303c4a
}

.markCompleteBottomSheetImages{
  align-items:center;
  border:0 !important;
  display:flex;
  margin:0;
  padding:16px 0
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages{
    -moz-column-gap:18px;
         column-gap:18px
  }
}

.markCompleteBottomSheetImages .attachment{
  margin:0
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages .attachment{
    margin:0
  }

  .markCompleteBottomSheetImages .attachment:not(:last-child){
    margin-right:0
  }
}

.markCompleteBottomSheetImages .attachment .pic{
  margin:0;
  -o-object-fit:cover;
     object-fit:cover
}

.markCompleteBottomSheetImages .attachMoreFilesButton{
  margin:0 0 0 0px
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages .attachMoreFilesButton{
    margin:0
  }
}

.supplier-attachments{
  padding:16px
}

@media (max-width: 767px){
  .supplier{
    -moz-column-gap:10px;
         column-gap:10px;
    display:grid !important;
    grid-template-columns:repeat(5, 0fr)
  }
}

.crossButton{
  left:8px
}

.addressText{
  color:#303c4a;
  font-size:14px
}

.deliveryTypeBg{
  background:rgba(225,225,234,0.2);
  border-radius:16px;
  color:#00142d
}

.add-address{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#f2f8ff;
  border-radius:8px;
  width:171px;
  height:44px;
  margin-top:24px
}

.changeAddress.changeAddress[data-focus]{
  box-shadow:none
}

.changeAddress.changeAddress[data-checked]{
  background:none;
  border-color:none;
  color:none
}

F .selected-item-border-color{
  border:1px solid #0067e2;
  box-sizing:border-box;
  border-radius:12px;
  margin:0px 16px
}

.requiredLabel{
  font-size:12px;
  background:rgba(255,250,245,0.5);
  border-radius:8px;
  color:#f2994a;
  margin-right:16px;
  padding:2px 4px
}

.addressBottomSheet_footer{
  bottom:0;
  height:40px;
  left:0;
  padding:8px 24px;
  width:70%
}

@media (max-width: 767px){
  .addressBottomSheet_footer{
    width:70%
  }
}

@media (max-width: 700px){
  .addressBottomSheet_footer{
    width:100%
  }
}

.edit-button{
  background:#f2f8ff;
  border-radius:8px;
  background:#f2f8ff;
  border-radius:8px
}

.bgColor{
  background:rgba(225,225,234,0.2)
}

.policybtn{
  border:1px solid #0067e2
}

.policyModal{
  max-height:90vh;
  overflow-y:scroll
}

.policyModal::-webkit-scrollbar{
  display:none
}

.paymentTermslable{
  background:#fff1cc;
  border-radius:4px;
  padding:2px 4px;
  width:96px;
  height:24px
}

.payment-container{
  background:#ffffff;
  box-shadow:0px 0px 2px rgba(0,103,226,0.12);
  border-radius:12px
}

.customerProgresscontainer{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:white;
  box-shadow:inset 0px -1px 0px rgba(0,1,38,0.1)
}

.pointContainers{
  height:16px;
  width:16px;
  border-radius:40px;
  display:flex;
  justify-content:center;
  align-items:center
}

.pointTxt{
  font-size:10px;
  color:#0067e2
}

.pointLink{
  height:2px;
  width:32px
}

.orderSummary{
  position:absolute;
  min-width:100%;
  background-color:white;
  z-index:50;
  left:0;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px
}

.grid-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:26px;
  margin-bottom:24px;
  margin-left:24px;
  margin-right:24px;
  border-radius:8px 8px 0px 0px
}

.grid-item{
  padding:16px;
  font-size:14px
}

.item1{
  grid-column:1 / span 2;
  border:1px solid #f2f2f2
}

.border-bottom{
  border-bottom:1px solid #f2f2f2
}

.border-top{
  border-top:1px solid #f2f2f2
}

.border-left{
  border-left:1px solid #f2f2f2
}

.border-right{
  border-right:1px solid #f2f2f2
}

.default-address{
  display:inline-flex;
  background-color:#fffaf5;
  width:57px;
  height:24px;
  color:#f2994a;
  border-radius:24px;
  align-items:center;
  justify-content:center
}

.spin-center{
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:50%
}

.selection{
  background-color:white
}

.selection .selectionDot{
  background:white;
  border:1px solid #d4d4d4;
  border-radius:50%;
  height:13.1px;
  width:13.1px
}

.selection svg{
  transform:scale(1.1)
}

.selection svg{
  transform:scale(1.1)
}

.modalBody{
  max-height:60vh;
  overflow-y:scroll
}

.modalBody::-webkit-scrollbar{
  display:none
}

.orderTrackingBtn{
  align-items:center;
  padding:12px;
  gap:4px;
  height:40px;
  background:#ffffff;
  border:1px solid #f2f2f2;
  border-radius:8px
}

.chooseAddressBtmSheet{
  max-height:52vh;
  overflow-y:scroll
}

.chooseAddressBtmSheet::-webkit-scrollbar{
  display:none
}

.disabledInputBox{
  background:rgba(225,225,234,0.2)
}

.carouselStyles .carousel{
  height:100%
}

.carouselStyles .carousel .slide{
  background-color:var(--white);
  border-radius:24px
}

.carouselStyles .carouselImg{
  height:328px
}

.carouselStyles .carouselFile{
  height:328px;
  transform:scale(2) translateX(45%) translateY(42%);
  width:100%
}

.carouselStyles .control-dots{
  bottom:unset;
  margin:0;
  top:294px
}

.carouselStyles .control-dots .dot{
  box-shadow:0 0 2px rgba(0,0,0,0.12);
  margin:0 2px;
  opacity:0.5
}

.carouselStyles .control-dots .dot.selected{
  background:var(--primary);
  box-shadow:0 0 2px rgba(0,103,236,0.12)
}

.carouselStyles .infoGrid{
  background-color:var(--white);
  color:var(--text-light);
  display:grid;
  font-weight:600;
  grid-column-gap:16px;
  grid-row-gap:24px;
  grid-template-columns:1fr 1.3fr;
  pointer-events:none;
  text-align:left
}

.carouselStyles .infoGrid .detail,.carouselStyles .infoGrid .label{
  line-height:24px
}

.carouselStyles .infoGrid .label{
  color:var(--gray);
  font-size:12px
}

.carouselStyles .infoGrid .fileName{
  max-width:122px
}

.viewFabricModal{
  border-radius:16px;
  width:336px !important
}

.viewFabricModal .modalBody{
  padding:0
}

.viewFabricModal .close{
  background:rgba(255,255,255,0.5);
  border-radius:50%;
  height:32px;
  width:32px;
  z-index:1
}

.viewFabricModal .footerButtons .button{
  border-radius:24px;
  box-shadow:0 0 4px rgba(0,0,0,0.12);
  color:var(--primary);
  flex-grow:1;
  font-size:12px;
  font-weight:600;
  height:40px;
  max-width:130px
}

.viewFabricModal .footerButtons .button:focus{
  box-shadow:0 0 4px rgba(0,0,0,0.12) !important
}

.viewFabricModal .footerButtons .button svg path{
  fill:var(--primary)
}

.viewFabricModal .confirmDeleteView{
  background:var(--red-bg-2);
  border-radius:0 0 16px 16px;
  padding:20px 24px
}

.viewFabricModal .confirmDeleteView .button{
  border-radius:4px;
  flex-grow:1;
  font-weight:700;
  height:40px
}

.viewFabricModal .confirmDeleteView .button.cancelButton{
  background-color:var(--white);
  color:var(--primary)
}

.viewFabricModal .confirmDeleteView .button.deleteButton{
  background-color:var(--primary);
  color:var(--white)
}

.carouselWrapper{
  width:336px
}

.carouselWrapper .carousel-root{
  height:100%
}

.carouselWrapper .carousel-root .carousel{
  border-radius:16px 16px 0 0
}

.attachments{
  border:0 !important;
  display:grid;
  gap:0.5rem;
  grid-template-columns:repeat(4, 1fr);
  margin-top:1rem
}

.attachments.noBorder{
  border:0
}

.attachments .attachment{
  border-radius:8px;
  height:40px;
  overflow:hidden;
  width:36px
}

.attachments .attachment .pic{
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  width:100%
}

.attachments .attachment-overlay{
  width:36px;
  position:relative
}

.attachments .attachment-overlay .delete-attachment{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%)
}

.attachments .attachMoreFilesButton{
  border-radius:8px;
  height:40px;
  width:36px
}

.attachments .attachMoreFilesButton{
  align-items:center;
  background-color:var(--gray-light-2);
  border:0;
  display:flex;
  justify-content:center
}

.attachments .attachMoreFilesButton svg{
  transform:scale(0.8)
}

.attachments .threeDotsWrapper{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:8px;
  display:flex;
  height:56px;
  justify-content:center;
  width:48px
}

.attachments .threeDotsWrapper .dot{
  background-color:var(--primary);
  border-radius:50%;
  height:4px;
  width:4px
}

.attachments .threeDotsWrapper .dot.dot2{
  margin:0 4px
}

.filePill{
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:4px 8px;
  gap:8px;
  height:28px;
  background:#f2f8ff;
  border:1px solid #cee4ff;
  border-radius:24px
}

.footerBackButton{
  opacity:0.5;
  border:1px solid #f2f2f2;
  border-radius:26.6667px
}

.footerShadow{
  box-shadow:inset 0px 1px 0px rgba(0,1,38,0.1)
}

.labelValueContainer{
  height:72px;
  margin-bottom:24px
}

.lastRow{
  margin-bottom:0
}

.message{
  margin-bottom:36px
}

.separator{
  border-top:1px solid var(--gray-light-2);
  margin-bottom:24px
}

.cancelAttachmentsModal{
  border-radius:16px
}

.cancelAttachmentsModal>div{
  padding:24px
}

.cancelAttachmentsModal .cancelModalButton{
  font-weight:700;
  height:40px;
  padding:0 28px
}

.markReceivedBtn{
  background:var(--primary) !important;
  border-radius:24px;
  color:var(--white);
  font-size:16px;
  font-weight:700;
  height:40px;
  padding:0 12px
}

.markReceivedBtn:disabled{
  cursor:not-allowed;
  opacity:0.5
}

.calender-header{
  background-color:#e1e1ea33;
  border-radius:14px 14px 0 0 !important;
  display:flex;
  gap:8px;
  margin:-8px 0;
  padding:24px 24px 16px;
  position:relative
}

.calender-header .title,.calender-header .date{
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  line-height:20px
}

.calender-header .title{
  color:var(--gray);
  font-weight:normal
}

.calender-header .date{
  color:var(--text-light);
  font-weight:600
}

.commentsModal{
  max-height:80%;
  min-height:280px;
  overflow:scroll;
  width:280px !important
}

.commentsModal .closeButton{
  height:40px;
  padding:0 28px
}

.commentsModal .modalBody{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  justify-content:space-between
}

.dateAddedToast.Toastify__toast--default{
  font-size:16px;
  border-radius:9999px;
  background:var(--green);
  padding:4px 22px
}

.dateAddedToast.Toastify__toast--default .Toastify__toast-body{
  font-weight:600
}

button.bottomSheetOption{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  height:auto;
  margin-right:16px;
  padding:10px 22px
}

button.bottomSheetOption.active{
  border:1px solid var(--primary);
  color:var(--primary)
}

.viewHistoryContainer{
  max-height:80vh;
  overflow:auto
}

.attachFileModal{
  width:100%
}

.attachFileModal .attachFileHeader{
  background-color:#f9faff;
  border-radius:14px 14px 0 0 !important;
  height:72px;
  margin:0;
  padding:24px 8px 24px 24px
}

.attachFileModal .attachFileContainer{
  border:1px solid var(--border);
  border-radius:10px;
  margin-top:8px
}

.attachFileModal .attachFileButton{
  background-color:var(--gray-light-2);
  border:0 !important;
  border-radius:4px;
  height:40px;
  margin:24px;
  text-align:center;
  width:36px !important
}

.markCompleteBottomSheetContainer{
  position:fixed !important
}

.errorMessage{
  height:16px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  display:flex;
  align-items:center;
  color:#eb5757
}

.productionAttachmentsMarkReady{
  border:1px dashed var(--border);
  height:40px;
  margin-bottom:12px
}

.productionAttachmentsMarkReady>:first-child{
  border-right:1px dashed var(--border)
}

.productionAttachmentsMarkReady .attachedFileWrapper,.productionAttachmentsMarkReady .attachFileButton{
  flex-grow:1;
  width:50%
}

.productionAttachmentsMarkReady .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:40px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.inputBoxRadius{
  border-top-right-radius:0px !important;
  border-bottom-right-radius:0px !important
}

input[type=number]:disabled{
  opacity:1
}

.inputGroup.withRightAddon input{
  border-right-width:0
}

.inputGroup.withRightAddon .addon{
  font-weight:600;
  padding-left:24px;
  padding-right:24px
}

.markReadyBottomSheetBody{
  padding:0px 2px
}

.extraTnaGroup .rightBodyText{
  color:var(--gray) !important
}

.hideScrollbar::-webkit-scrollbar{
  display:none
}

.hideScrollbar{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.add-image-button{
  width:36px;
  height:40px;
  background:rgba(225,225,234,0.4);
  border-radius:8px
}

.imageHeight{
  height:40px
}

.upload-image-box{
  box-sizing:border-box;
  width:100%;
  height:162px;
  border:1px solid #e5e5e5;
  border-radius:8px
}

.upload-image-box .upload-image-box-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0px;
  height:72px;
  margin-left:20px;
  margin-top:16px
}

.upload-image-box .upload-image-box-body .upload-image-box-body-text{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  margin-top:16px;
  color:#6e6cb2;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  padding:0px;
  gap:4px;
  height:16px
}

.upload-image-box .upload-image-box-body .upload-image-box-image{
  height:40px;
  border-radius:8px
}

.upload-image-box .upload-image-box-header{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:16px 16px 8px;
  gap:8px;
  height:58px;
  left:0px;
  top:0px;
  background:rgba(225,225,234,0.2);
  border-radius:12px 12px 0px 0px
}

.upload-image-box .upload-image-box-header .header-content{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px 16px 0px 0px;
  gap:8px;
  height:34px
}

.upload-image-box .upload-image-box-header .header-icon{
  width:32px;
  height:32px
}

.upload-image-box .upload-image-box-header .header-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:0px;
  gap:2px;
  height:34px
}

.upload-image-box .upload-image-box-header .header-text .name{
  height:16px;
  margin-top:6px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-size:12px;
  line-height:16px;
  display:flex;
  align-items:center;
  color:#626870
}

.upload-image-box .upload-image-box-header .header-text .value{
  height:16px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-size:12px;
  line-height:16px;
  display:flex;
  align-items:center;
  color:#303c4a
}

.markCompleteBottomSheetImages{
  align-items:center;
  border:0 !important;
  display:flex;
  margin:0;
  padding:16px 0
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages{
    -moz-column-gap:18px;
         column-gap:18px
  }
}

.markCompleteBottomSheetImages .attachment{
  margin:0
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages .attachment{
    margin:0
  }

  .markCompleteBottomSheetImages .attachment:not(:last-child){
    margin-right:0
  }
}

.markCompleteBottomSheetImages .attachment .pic{
  margin:0;
  -o-object-fit:cover;
     object-fit:cover
}

.markCompleteBottomSheetImages .attachMoreFilesButton{
  margin:0 0 0 0px
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages .attachMoreFilesButton{
    margin:0
  }
}

.scroll-container{
  max-height:82vh;
  overflow-y:auto
}

.scroll-container::-webkit-scrollbar{
  background:transparent;
  width:0
}

.supplier-attachments{
  padding:16px
}

@media (max-width: 767px){
  .supplier{
    -moz-column-gap:10px;
         column-gap:10px;
    display:grid !important;
    grid-template-columns:repeat(5, 0fr)
  }
}

.crossButton{
  left:8px
}

.addressText{
  color:#303c4a;
  font-size:14px
}

.deliveryTypeBg{
  background:rgba(225,225,234,0.2);
  border-radius:16px;
  color:#00142d
}

.add-address{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#f2f8ff;
  border-radius:8px;
  width:171px;
  height:44px;
  margin-top:24px
}

.changeAddress.changeAddress[data-focus]{
  box-shadow:none
}

.changeAddress.changeAddress[data-checked]{
  background:none;
  border-color:none;
  color:none
}

F .selected-item-border-color{
  border:1px solid #0067e2;
  box-sizing:border-box;
  border-radius:12px;
  margin:0px 16px
}

.requiredLabel{
  font-size:12px;
  background:rgba(255,250,245,0.5);
  border-radius:8px;
  color:#f2994a;
  margin-right:16px;
  padding:2px 4px
}

.addressBottomSheet_footer{
  bottom:0;
  height:40px;
  left:0;
  padding:8px 24px;
  width:70%
}

@media (max-width: 767px){
  .addressBottomSheet_footer{
    width:70%
  }
}

@media (max-width: 700px){
  .addressBottomSheet_footer{
    width:100%
  }
}

.edit-button{
  background:#f2f8ff;
  border-radius:8px;
  background:#f2f8ff;
  border-radius:8px
}

.bgColor{
  background:rgba(225,225,234,0.2)
}

.policybtn{
  border:1px solid #0067e2
}

.policyModal{
  max-height:90vh;
  overflow-y:scroll
}

.policyModal::-webkit-scrollbar{
  display:none
}

.paymentTermslable{
  background:#fff1cc;
  border-radius:4px;
  padding:2px 4px;
  width:96px;
  height:24px
}

.payment-container{
  background:#ffffff;
  box-shadow:0px 0px 2px rgba(0,103,226,0.12);
  border-radius:12px
}

.customerProgresscontainer{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:white;
  box-shadow:inset 0px -1px 0px rgba(0,1,38,0.1)
}

.pointContainers{
  height:16px;
  width:16px;
  border-radius:40px;
  display:flex;
  justify-content:center;
  align-items:center
}

.pointTxt{
  font-size:10px;
  color:#0067e2
}

.pointLink{
  height:2px;
  width:32px
}

.orderSummary{
  position:absolute;
  min-width:100%;
  background-color:white;
  z-index:50;
  left:0;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px
}

.grid-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:26px;
  margin-bottom:24px;
  margin-left:24px;
  margin-right:24px;
  border-radius:8px 8px 0px 0px
}

.grid-item{
  padding:16px;
  font-size:14px
}

.item1{
  grid-column:1 / span 2;
  border:1px solid #f2f2f2
}

.border-bottom{
  border-bottom:1px solid #f2f2f2
}

.border-top{
  border-top:1px solid #f2f2f2
}

.border-left{
  border-left:1px solid #f2f2f2
}

.border-right{
  border-right:1px solid #f2f2f2
}

.default-address{
  display:inline-flex;
  background-color:#fffaf5;
  width:57px;
  height:24px;
  color:#f2994a;
  border-radius:24px;
  align-items:center;
  justify-content:center
}

.spin-center{
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:50%
}

.selection{
  background-color:white
}

.selection .selectionDot{
  background:white;
  border:1px solid #d4d4d4;
  border-radius:50%;
  height:13.1px;
  width:13.1px
}

.selection svg{
  transform:scale(1.1)
}

.selection svg{
  transform:scale(1.1)
}

.modalBody{
  max-height:60vh;
  overflow-y:scroll
}

.modalBody::-webkit-scrollbar{
  display:none
}

.orderTrackingBtn{
  align-items:center;
  padding:12px;
  gap:4px;
  height:40px;
  background:#ffffff;
  border:1px solid #f2f2f2;
  border-radius:8px
}

.chooseAddressBtmSheet{
  max-height:52vh;
  overflow-y:scroll
}

.chooseAddressBtmSheet::-webkit-scrollbar{
  display:none
}

.disabledInputBox{
  background:rgba(225,225,234,0.2)
}

input[type='number']:disabled{
  opacity:1
}

button.radio{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  font-size:14px;
  font-weight:400;
  height:auto;
  height:40px;
  line-height:20px;
  margin-right:16px;
  padding:10px 16px
}

button.radio.active{
  background:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary)
}

.formikRadioField--whiteBg span{
  background-color:var(--white)
}

.formikRadioField input[type='radio']{
  display:none
}

.formikRadioField input[type='radio']+span{
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:none;
  display:block;
  font-size:14px;
  margin-right:8px;
  padding:10px 12px
}

.formikRadioField input[type='radio']:checked+span{
  background:var(--secondary-bg);
  border:none;
  color:var(--primary);
  font-weight:600;
  padding-left:28px;
  position:relative
}

.formikRadioField input[type='radio']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.formikRadioField input[type='radio']:disabled+span{
  opacity:0.6
}

.formikRadioField .optionsList{
  display:flex;
  flex-wrap:wrap;
  margin-top:-8px
}

.formikRadioField .optionsList>*{
  margin-top:8px
}

.fullHeight{
  max-height:100vh
}

.hideScrollbar::-webkit-scrollbar{
  display:none
}

.hideScrollbar{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.defaultHeight{
  max-height:80vh
}

.bottomSheetContent{
  border-radius:14px 14px 0 0 !important;
  bottom:0;
  margin:0 !important;
  padding:16px 24px 0;
  position:absolute !important;
  top:auto !important;
  width:100%;
  min-width:365px;
  max-width:100%
}

.bottomSheetContent .footerActions{
  margin-right:-16px;
  padding-bottom:8px;
  padding-right:0
}

.bottomSheetContent .footerActions button{
  height:40px
}

.withHandle::after{
  background:var(--gray-light-5);
  border-radius:4px;
  content:'';
  height:4px;
  left:50%;
  position:absolute;
  top:12px;
  transform:translateX(-50%);
  width:40px
}

.withOutHandle::after{
  display:none
}

@media (min-width: 1024px){
  .bottomSheetContent{
    max-width:40% !important
  }
}

.mobileGrid{
  align-items:center;
  display:grid;
  grid-gap:8px;
  grid-template-columns:1fr 16px
}

.plainButton{
  font-size:14px !important;
  font-weight:normal !important
}

.formWrapper .formLabel{
  padding-bottom:2px
}

.formWrapper .mobileAddon{
  color:var(--gray-light-3);
  font-size:14px;
  height:48px;
  margin:0 12px
}

.formWrapper #newMobileNumber{
  padding-left:48px
}

.profileImage img{
  box-shadow:none
}

.iconWithOverlay .icon{
  height:32px;
  width:32px
}

.changePasswordForm .formLabel{
  font-weight:400 !important
}

.changePasswordForm .footerActions button{
  padding:0 24px
}

.sortEntitySheet__content{
  margin-top:10px;
  min-height:280px
}

.sortEntitySheet .radioBtn input[type='radio']{
  display:block
}

.sortEntitySheet .clearSortBtn{
  bottom:16px;
  position:absolute;
  right:16px
}

.supplierActionBtns{
  display:flex;
  padding-right:16px
}

.supplierActionBtns__btn{
  position:relative
}

.supplierActionBtns__btn--filterApplied::before{
  background-color:var(--red);
  border-radius:100%;
  content:'';
  height:8px;
  left:16px;
  position:absolute;
  top:8px;
  width:8px
}

.supplierActionBtns__btn .scaleDown{
  transform:scale(0.7)
}

.supplierActionBtns__btn .sortIcon{
  margin-right:5px
}

.supplierActionBtns__btn--inSearch{
  margin-top:-6px
}

.supplierActionBtns__btn:hover{
  background-color:transparent
}

.customerList .emptyStateContainer{
  background-color:var(--white)
}

.customerList .entityPlaceholder{
  position:relative
}

.customerList .dot{
  margin:6px 8px
}

.customerList .statusDot{
  position:absolute;
  right:0;
  border-radius:9999px;
  box-sizing:content-box;
  border:2px solid var(--white);
  height:8px;
  top:4px;
  width:8px
}

.customerList .statusDot.online{
  background-color:var(--green)
}

.customerList .statusDot.offline{
  background-color:var(--red)
}

.supplierActionBtns{
  display:flex;
  padding-right:16px
}

.supplierActionBtns__btn{
  position:relative
}

.supplierActionBtns__btn--filterApplied::before{
  background-color:var(--red);
  border-radius:100%;
  content:'';
  height:8px;
  left:16px;
  position:absolute;
  top:8px;
  width:8px
}

.supplierActionBtns__btn .scaleDown{
  transform:scale(0.7)
}

.supplierActionBtns__btn .sortIcon{
  margin-right:5px
}

.supplierActionBtns__btn--inSearch{
  margin-top:-6px !important
}

.supplierActionBtns__btn:hover{
  background-color:transparent !important
}

.suppliersList .emptyStateContainer{
  background-color:var(--white)
}

.suppliersList .entityPlaceholder{
  position:relative
}

.suppliersList .dot{
  margin:6px 8px
}

.suppliersList .statusDot{
  position:absolute;
  right:0;
  border-radius:9999px;
  box-sizing:content-box;
  border:2px solid var(--white);
  height:8px;
  top:4px;
  width:8px
}

.suppliersList .statusDot.online{
  background-color:var(--green)
}

.suppliersList .statusDot.offline{
  background-color:var(--red)
}

.dot{
  background-color:var(--gray-light-8);
  border-radius:100%;
  height:4px;
  margin:8px;
  width:4px
}

.entityPlaceholder{
  background-color:rgba(225, 225, 234, 0.2);
  border-radius:100%;
  min-height:48px;
  min-width:48px
}

.certifiedPill{
  background:var(--bg);
  border-radius:8px;
  width:63px;
  height:22px;
  margin:0 8px;
  color:var(--certifiedPurple);
  font-weight:400;
  font-size:10px
}

.sm-listing{
  padding-top:12px
}

.sm-listing .sm-assigned-list-item{
  border-bottom:1px solid rgba(var(--gray-light-2), 1);
  padding-bottom:12px;
  padding-top:12px
}

.sm-listing .sm-assigned-list-item:last-of-type{
  border-bottom:0
}

.sm-listing .sm-assigned-list-item .categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.sm-listing .sm-assigned-list-item .categories .category{
  background-color:var(--purple-light-opacity);
  border-radius:4px;
  color:var(--purple-secondary-dark);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  padding:2px 4px
}

.sm-listing .sm-assigned-list-item .supplier-name{
  align-items:center;
  color:var(--gray);
  display:flex;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  gap:4px;
  line-height:16px;
  margin-top:10px
}

.sm-listing.pt-0{
  padding-top:0 !important
}

.crossInCalendar{
  position:absolute;
  right:16px;
  top:30px;
  z-index:4
}

.companyCard{
  margin-bottom:8px;
  outline:none;
  padding:10px 8px 12px 4px
}

.companyCard.selected{
  background:var(--secondary-bg);
  border-radius:4px;
  padding-bottom:16px;
  padding-top:16px
}

.companyCard.selected .companyCard__tickIcon svg rect{
  fill:var(--primary)
}

.companyCard.selected .companyCard__lastRequest{
  border:1px solid var(--blue-light)
}

.companyCard.notAllowed{
  opacity:0.6
}

.companyCard__tickIcon{
  height:20px;
  width:20px
}

.companyCard__tickIcon svg{
  transform:scale(1.54);
  transform-origin:left top
}

.companyCard__lastRequest{
  border:1px solid var(--gray-light-5);
  border-radius:4px
}

.companyCard__badge{
  padding:2px 8px
}

.companyCard .pb-xs{
  padding-bottom:4px
}

.duplicateCustomersSheet__content{
  max-height:70vh;
  overflow:auto
}

.duplicateCustomersSheet .footerActions{
  padding-right:24px
}

.duplicateCustomersSheet .footerActions .primaryAction.small{
  width:112px
}

.duplicateCustomersSheet .footerActions .primaryAction.large{
  width:144px
}

.heightFull{
  height:100% !important
}

.optionsSheet{
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content
}

.optionsSheet input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.optionsContainer{
  max-height:280px;
  overflow:auto
}

.optionsContainer .listItem{
  display:flex;
  align-items:center;
  margin-bottom:16px;
  padding-left:8px;
  height:40px
}

.optionsContainer .listItem.active{
  font-weight:600;
  background:var(--secondary-bg);
  color:var(--primary)
}

.emptyResults{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  font-weight:600;
  text-align:center;
  color:var(--gray);
  height:256px
}

.screen-height{
  height:60vh
}

.quoteFormUpdate{
  overflow-y:auto;
  padding-bottom:4rem
}

.quoteFormUpdate::-webkit-scrollbar{
  display:none
}

.yarnTypeBottomSheet{
  height:30vh;
  overflow-y:auto;
  padding-bottom:4rem
}

.yarnTypeBottomSheet::-webkit-scrollbar{
  display:none
}

.quoteForm div.costAddon,.quoteFormUpdate div.costAddon{
  --text-opacity:1;
  color:#93939F;
  color:rgba(147, 147, 159, var(--text-opacity));
  height:48px;
  width:42px
}

.quoteForm div.costAddon+input,.quoteFormUpdate div.costAddon+input{
  padding-left:36px
}

.quoteForm .updateButton,.quoteFormUpdate .updateButton{
  background:var(--white);
  border-radius:8px;
  flex-direction:row-reverse;
  left:0;
  padding-bottom:4px;
  padding-right:24px
}

.quoteForm .time-label .label,.quoteFormUpdate .time-label .label{
  margin-bottom:0
}

.quoteForm .selectedOption,.quoteFormUpdate .selectedOption{
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  font-size:14px;
  min-height:48px;
  padding:12px 16px
}

.quoteForm input.inputField,.quoteFormUpdate input.inputField{
  border-color:var(--border)
}

.quoteForm .advancePaymentCheckbox .chakra-checkbox__control,.quoteFormUpdate .advancePaymentCheckbox .chakra-checkbox__control{
  border:1px solid #93939f;
  height:18px;
  width:18px
}

.quoteForm .advancePaymentCheckbox .chakra-checkbox__control[data-checked][data-hover] [data-focus],.quoteFormUpdate .advancePaymentCheckbox .chakra-checkbox__control[data-checked][data-hover] [data-focus]{
  background:var(--primary);
  border:0 !important;
  box-shadow:none !important;
  height:18px;
  width:18px
}

.quoteForm .advancePaymentCheckbox .chakra-checkbox__control[data-checked],.quoteForm .advancePaymentCheckbox .chakra-checkbox__control[data-focus],.quoteFormUpdate .advancePaymentCheckbox .chakra-checkbox__control[data-checked],.quoteFormUpdate .advancePaymentCheckbox .chakra-checkbox__control[data-focus]{
  box-shadow:none
}

.quoteForm .advancePaymentCheckbox input[type='checkbox']:hover,.quoteFormUpdate .advancePaymentCheckbox input[type='checkbox']:hover{
  border:2px solid var(--red);
  height:18px;
  width:18px
}

.quoteForm .advancePaymentCheckbox .chakra-checkbox__label,.quoteFormUpdate .advancePaymentCheckbox .chakra-checkbox__label{
  color:var(--text-light);
  font-size:14px;
  font-weight:normal;
  line-height:20px;
  width:111px
}

.quoteForm .radioButton input[type='radio'],.quoteForm .radioButton input[type='checkbox'],.quoteForm .checkboxButton input[type='radio'],.quoteForm .checkboxButton input[type='checkbox'],.quoteFormUpdate .radioButton input[type='radio'],.quoteFormUpdate .radioButton input[type='checkbox'],.quoteFormUpdate .checkboxButton input[type='radio'],.quoteFormUpdate .checkboxButton input[type='checkbox']{
  display:none
}

.quoteForm .radioButton input[type='radio']+span,.quoteForm .radioButton input[type='checkbox']+span,.quoteForm .checkboxButton input[type='radio']+span,.quoteForm .checkboxButton input[type='checkbox']+span,.quoteFormUpdate .radioButton input[type='radio']+span,.quoteFormUpdate .radioButton input[type='checkbox']+span,.quoteFormUpdate .checkboxButton input[type='radio']+span,.quoteFormUpdate .checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  line-height:20px;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.quoteForm .radioButton input[type='radio'].selected+span,.quoteForm .radioButton input[type='checkbox'].selected+span,.quoteForm .checkboxButton input[type='radio'].selected+span,.quoteForm .checkboxButton input[type='checkbox'].selected+span,.quoteFormUpdate .radioButton input[type='radio'].selected+span,.quoteFormUpdate .radioButton input[type='checkbox'].selected+span,.quoteFormUpdate .checkboxButton input[type='radio'].selected+span,.quoteFormUpdate .checkboxButton input[type='checkbox'].selected+span{
  border:1px solid rgba(0,103,226,0.5)
}

.quoteForm .radioButton input[type='radio']:checked+span,.quoteForm .radioButton input[type='checkbox']:checked+span,.quoteForm .checkboxButton input[type='radio']:checked+span,.quoteForm .checkboxButton input[type='checkbox']:checked+span,.quoteFormUpdate .radioButton input[type='radio']:checked+span,.quoteFormUpdate .radioButton input[type='checkbox']:checked+span,.quoteFormUpdate .checkboxButton input[type='radio']:checked+span,.quoteFormUpdate .checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.quoteForm .radioButton input[type='radio']:checked+span::before,.quoteForm .radioButton input[type='checkbox']:checked+span::before,.quoteForm .checkboxButton input[type='radio']:checked+span::before,.quoteForm .checkboxButton input[type='checkbox']:checked+span::before,.quoteFormUpdate .radioButton input[type='radio']:checked+span::before,.quoteFormUpdate .radioButton input[type='checkbox']:checked+span::before,.quoteFormUpdate .checkboxButton input[type='radio']:checked+span::before,.quoteFormUpdate .checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.quoteForm .radioButton input[type='radio']:checked+span.twentyPercentPill::before,.quoteForm .radioButton input[type='checkbox']:checked+span.twentyPercentPill::before,.quoteForm .checkboxButton input[type='radio']:checked+span.twentyPercentPill::before,.quoteForm .checkboxButton input[type='checkbox']:checked+span.twentyPercentPill::before,.quoteFormUpdate .radioButton input[type='radio']:checked+span.twentyPercentPill::before,.quoteFormUpdate .radioButton input[type='checkbox']:checked+span.twentyPercentPill::before,.quoteFormUpdate .checkboxButton input[type='radio']:checked+span.twentyPercentPill::before,.quoteFormUpdate .checkboxButton input[type='checkbox']:checked+span.twentyPercentPill::before{
  left:16px;
  top:10px
}

.quoteForm .radioButton input[type='radio']:disabled+span,.quoteForm .radioButton input[type='checkbox']:disabled+span,.quoteForm .checkboxButton input[type='radio']:disabled+span,.quoteForm .checkboxButton input[type='checkbox']:disabled+span,.quoteFormUpdate .radioButton input[type='radio']:disabled+span,.quoteFormUpdate .radioButton input[type='checkbox']:disabled+span,.quoteFormUpdate .checkboxButton input[type='radio']:disabled+span,.quoteFormUpdate .checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.quoteForm .pillCreditWidth,.quoteFormUpdate .pillCreditWidth{
  min-width:40px;
  text-align:center
}

.quoteForm .mostAskedLabel,.quoteFormUpdate .mostAskedLabel{
  align-items:center;
  bottom:0.4rem;
  color:var(--orange);
  display:flex;
  font-size:10px;
  font-weight:600;
  height:14px;
  line-height:14px;
  margin-top:1px;
  padding-top:5px;
  position:relative;
  right:0.1rem;
  text-align:center;
  width:52px
}

.quoteForm .label,.quoteFormUpdate .label{
  font-size:12px;
  --text-opacity:1;
  color:#676773;
  color:rgba(103, 103, 115, var(--text-opacity));
  margin-bottom:8px
}

.quoteForm .comment,.quoteFormUpdate .comment{
  margin-top:10px
}

.quoteForm .fobCheckbox label,.quoteFormUpdate .fobCheckbox label{
  font-weight:600
}

.quoteForm .fobCheckbox input[type='checkbox'],.quoteFormUpdate .fobCheckbox input[type='checkbox']{
  left:32px;
  opacity:0;
  position:relative;
  width:34px
}

.quoteForm .fobCheckbox span,.quoteFormUpdate .fobCheckbox span{
  background:var(--gray-light-5);
  border-radius:100px;
  cursor:pointer;
  display:block;
  height:14px;
  pointer-events:none;
  position:relative;
  text-indent:-9999px;
  width:34px
}

.quoteForm .fobCheckbox span::after,.quoteFormUpdate .fobCheckbox span::after{
  background:#fff;
  border-radius:90px;
  box-shadow:0 0 2px rgba(0,1,38,0.14);
  content:'';
  height:20px;
  left:0;
  position:absolute;
  top:-3px;
  transition:0.3s;
  width:20px
}

.quoteForm .fobCheckbox input:checked+span,.quoteFormUpdate .fobCheckbox input:checked+span{
  background:var(--blue-light)
}

.quoteForm .fobCheckbox input:checked+span::after,.quoteFormUpdate .fobCheckbox input:checked+span::after{
  background:var(--primary)
}

.quoteForm .fobCheckbox input:checked+span::after,.quoteFormUpdate .fobCheckbox input:checked+span::after{
  transform:translateX(86%)
}

.quoteForm .fobCheckbox span:active::after,.quoteFormUpdate .fobCheckbox span:active::after{
  width:130px
}

.quoteForm .divider,.quoteFormUpdate .divider{
  border-top:1px dashed var(--border);
  margin-left:-24px;
  width:100%
}

.quoteForm .dividerFull,.quoteFormUpdate .dividerFull{
  border-top:1px solid var(--border);
  margin-left:-24px;
  width:100%
}

.quoteForm .crossIcon,.quoteFormUpdate .crossIcon{
  transform:scale(0.7)
}

.quoteForm .splitField,.quoteFormUpdate .splitField{
  margin:0;
  width:120px
}

.quoteForm .splitField input,.quoteFormUpdate .splitField input{
  border-radius:8px
}

.quoteForm .stickyNote,.quoteFormUpdate .stickyNote{
  box-shadow:none;
  padding:4px 8px;
  position:static
}

.quoteForm .infoNote,.quoteFormUpdate .infoNote{
  color:var(--orange-dark)
}

.quoteForm .margin-info-note,.quoteFormUpdate .margin-info-note{
  color:var(--purple-secondary-dark)
}

.quoteForm .toggleLocofastMargin,.quoteForm .advanceRequired,.quoteFormUpdate .toggleLocofastMargin,.quoteFormUpdate .advanceRequired{
  color:var(--primary)
}

.quoteForm .toggleLocofastMargin,.quoteForm .chakra-checkbox__control:focus,.quoteForm .chakra-checkbox__control[data-focus],.quoteFormUpdate .toggleLocofastMargin,.quoteFormUpdate .chakra-checkbox__control:focus,.quoteFormUpdate .chakra-checkbox__control[data-focus]{
  box-shadow:none
}

.quoteForm .selected-quoteValidity,.quoteFormUpdate .selected-quoteValidity{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  margin-bottom:44px;
  margin-top:12px
}

.quoteForm .last-quoteValidity,.quoteFormUpdate .last-quoteValidity{
  align-items:center;
  color:var(--orange-dark);
  display:flex;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  gap:4px;
  line-height:16px;
  margin-top:12px
}

.quoteForm .your-quote-text,.quoteFormUpdate .your-quote-text{
  font-weight:600;
  font-size:14px;
  color:#303C4A
}

.quoteForm .tatInput,.quoteFormUpdate .tatInput{
  border-top:1px dashed var(--border);
  padding-top:24px
}

.quoteForm .helperText,.quoteFormUpdate .helperText{
  margin-top:8px;
  font-size:12px;
  color:var(--gray-light-3)
}

.quoteForm .optionalInput,.quoteFormUpdate .optionalInput{
  margin-bottom:25px
}

.quoteForm .quoteTotalCost,.quoteFormUpdate .quoteTotalCost{
  margin-bottom:25px
}

.quoteForm .quoteOptions,.quoteFormUpdate .quoteOptions{
  padding:32px 24px 0
}

.quoteForm .quoteOptions__checklist,.quoteFormUpdate .quoteOptions__checklist{
  margin:10px 0
}

.quoteForm .quoteOptions .label:not(:last-child),.quoteFormUpdate .quoteOptions .label:not(:last-child){
  margin-right:8px
}

.quoteForm .quoteOptions input,.quoteFormUpdate .quoteOptions input{
  visibility:hidden;
  width:0
}

.quoteForm .quoteOptions span,.quoteFormUpdate .quoteOptions span{
  align-items:center;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  display:inline-flex;
  height:40px;
  justify-content:center;
  padding:0 16px;
  position:relative
}

.quoteForm .quoteOptions input:checked ~ span,.quoteFormUpdate .quoteOptions input:checked ~ span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:36px
}

.quoteForm .quoteOptions input:checked ~ span::before,.quoteFormUpdate .quoteOptions input:checked ~ span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:16px;
  position:absolute;
  top:13px;
  width:12px
}

.quoteForm .multiUnitDropdown,.quoteFormUpdate .multiUnitDropdown{
  background-color:var(--gray-light-2);
  border-bottom-right-radius:8px;
  border-left:0;
  border-top-right-radius:8px;
  height:46px;
  min-width:100px;
  position:absolute;
  right:1px;
  top:1px
}

.quoteForm .multiUnitDropdown svg,.quoteFormUpdate .multiUnitDropdown svg{
  margin-left:10px
}

.quoteForm .multiUnitDropdown__menu,.quoteFormUpdate .multiUnitDropdown__menu{
  background-color:var(--white);
  border-radius:8px;
  border-bottom-right-radius:0.25rem;
  border-top-right-radius:0.25rem;
  box-shadow:0 0 10px rgba(0,0,0,0.12);
  min-width:114px;
  right:0;
  top:0
}

.quoteForm .multiUnitDropdown__menu_unit,.quoteFormUpdate .multiUnitDropdown__menu_unit{
  padding:14px 16px;
  width:100%
}

.quoteForm .multiUnitDropdown__menu_unit--active,.quoteFormUpdate .multiUnitDropdown__menu_unit--active{
  background-color:var(--gray-light-2)
}

.quoteForm .unitSuffix,.quoteFormUpdate .unitSuffix{
  background-color:var(--gray-light-2);
  border-bottom-right-radius:8px;
  border-left:0;
  border-top-right-radius:8px;
  height:46px;
  min-width:70px;
  position:absolute;
  right:1px;
  top:1px
}

.quoteForm .productionPerLoom,.quoteFormUpdate .productionPerLoom{
  background-color:var(--gray-light-2);
  border-bottom-right-radius:6px;
  border-left:0;
  border-top-right-radius:6px;
  height:46px;
  min-width:105px;
  position:absolute;
  right:1px;
  top:1px
}

.quoteForm .packaging-quote-btn,.quoteFormUpdate .packaging-quote-btn{
  align-items:center;
  color:var(--gray);
  display:flex;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px
}

.quoteForm .quote-section,.quoteForm .fabric-quality-section,.quoteForm .other-details-section,.quoteForm .locofast-margine-section,.quoteForm .comment-section,.quoteFormUpdate .quote-section,.quoteFormUpdate .fabric-quality-section,.quoteFormUpdate .other-details-section,.quoteFormUpdate .locofast-margine-section,.quoteFormUpdate .comment-section{
  color:var(--gray2);
  font-family:Nunito Sans;
  font-size:16px;
  font-weight:800;
  line-height:24px
}

.quoteForm .quoteFormStickyBanner,.quoteFormUpdate .quoteFormStickyBanner{
  background-color:var(--yellow-bg);
  color:var(--text-light);
  padding:8px 24px;
  top:60px;
  z-index:3
}

.quoteForm .other-details-lable,.quoteFormUpdate .other-details-lable{
  border-bottom:8px solid var(--gray-light-6);
  min-width:100%;
  padding:24px 0;
  position:relative
}

.quoteForm .locofast-margine-lable,.quoteFormUpdate .locofast-margine-lable{
  border-top:8px solid var(--gray-light-6);
  min-width:100%;
  padding:24px;
  position:relative
}

.quoteForm .quoteSummary,.quoteFormUpdate .quoteSummary{
  min-width:100%;
  background-color:white;
  left:0;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px
}

.quoteForm .grid-container,.quoteFormUpdate .grid-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:26px;
  margin-bottom:24px;
  margin-left:24px;
  margin-right:24px;
  border-radius:8px 8px 0px 0px
}

.quoteForm .grid-item,.quoteFormUpdate .grid-item{
  padding-top:16px;
  padding-left:16px;
  padding-bottom:10px
}

.quoteForm .item1,.quoteFormUpdate .item1{
  grid-column:1 / span 2;
  border:1px solid #f2f2f2
}

.quoteForm .border-bottom,.quoteFormUpdate .border-bottom{
  border-bottom:1px solid #f2f2f2
}

.quoteForm .border-top,.quoteFormUpdate .border-top{
  border-top:1px solid #f2f2f2
}

.quoteForm .border-left,.quoteFormUpdate .border-left{
  border-left:1px solid #f2f2f2
}

.quoteForm .border-right,.quoteFormUpdate .border-right{
  border-right:1px solid #f2f2f2
}

.quoteForm .border-bottom-left-radius,.quoteFormUpdate .border-bottom-left-radius{
  border-bottom-left-radius:16px
}

.quoteForm .border-bottom-right-radius,.quoteFormUpdate .border-bottom-right-radius{
  border-bottom-right-radius:16px
}

.quoteForm .border-top-left-radius,.quoteFormUpdate .border-top-left-radius{
  border-top-left-radius:16px
}

.quoteForm .border-top-right-radius,.quoteFormUpdate .border-top-right-radius{
  border-top-right-radius:16px
}

.quoteForm .itemFinishedSpecs,.quoteFormUpdate .itemFinishedSpecs{
  border-bottom:8px solid var(--gray-light-6);
  border-top:8px solid var(--gray-light-6);
  min-width:100%;
  padding:24px 0px;
  position:relative
}

.quoteForm .itemFinishedSpecs .item,.quoteFormUpdate .itemFinishedSpecs .item{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:block;
  float:left;
  text-align:center
}

.quoteForm .itemFinishedSpecs .item.item p,.quoteFormUpdate .itemFinishedSpecs .item.item p{
  padding:10px
}

.quoteForm .quote-lable,.quoteFormUpdate .quote-lable{
  min-width:100%;
  padding-top:16px;
  position:relative
}

.quoteForm .quote-lable .item,.quoteFormUpdate .quote-lable .item{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:block;
  float:left;
  margin:2px;
  text-align:center
}

.quoteForm .quote-lable .item.item p,.quoteFormUpdate .quote-lable .item.item p{
  padding:10px
}

.quoteForm .productTypeDivider,.quoteFormUpdate .productTypeDivider{
  border-top:8px solid var(--gray-light-6);
  min-width:100%;
  padding:24px 0px 24px 0px;
  position:relative
}

.quoteForm .productTypeDivider .item,.quoteFormUpdate .productTypeDivider .item{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:block;
  float:left;
  margin:2px;
  text-align:center
}

.quoteForm .productTypeDivider .item.item p,.quoteFormUpdate .productTypeDivider .item.item p{
  padding:10px
}

.quoteForm .yarn-lable,.quoteFormUpdate .yarn-lable{
  border-bottom:8px solid var(--gray-light-6);
  min-width:100%;
  padding:24px;
  position:relative
}

.quoteForm .yarn-lable .item,.quoteFormUpdate .yarn-lable .item{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:block;
  float:left;
  margin:2px;
  text-align:center
}

.quoteForm .yarn-lable .item.item p,.quoteFormUpdate .yarn-lable .item.item p{
  padding:10px
}

.quoteForm .yarnTypeField,.quoteFormUpdate .yarnTypeField{
  width:148px;
  border:1px solid #E5E5E5;
  border-radius:8px;
  padding:14px;
  height:48px
}

.yarn_breakup_warning{
  position:fixed;
  padding:12px;
  bottom:70px
}

.compositionIcon{
  display:flex;
  background:rgba(225,225,234,0.2);
  justify-content:center;
  padding-top:4px;
  padding-bottom:4px;
  height:40px
}

.multiSelect{
  overflow-y:auto;
  height:auto
}

.multiSelect .addIcon{
  margin-right:4px;
  transform:scale(0.7)
}

.optionsSheet{
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content
}

.optionsSheet input{
  padding-left:44px
}

.optionsSheet .optionsContainer{
  max-height:280px;
  overflow-x:hidden;
  overflow-y:auto
}

.optionsSheet .optionsContainer .listItem{
  align-items:center;
  display:flex;
  height:40px;
  margin-bottom:8px;
  margin-top:0;
  padding-left:8px
}

.optionsSheet .optionsContainer .listItem.active{
  background:var(--secondary-bg);
  color:var(--primary);
  font-weight:600
}

.optionsSheet .optionPill .crossButton{
  min-width:0;
  padding-left:8px
}

.optionsSheet .skipAndAddButton{
  align-items:center;
  display:flex;
  justify-content:center;
  padding:12px 0;
  width:100%
}

.optionsSheet.multiSelect{
  overflow-y:auto;
  height:auto
}

.optionsSheet.multiSelect .addIcon{
  margin-right:4px;
  transform:scale(0.7)
}

.optionsSheet .multiSelect__blend{
  grid-column-gap:24px;
  grid-template-columns:1fr 72px
}

.optionsSheet .multiSelect__blend input[type='number']{
  border-radius:8px;
  padding:0 16px
}

.optionsSheet .multiSelect__blend-category{
  flex:1;
  height:48px
}

.optionsSheet .multiSelect__blend-category .select__control{
  border:1px solid var(--border);
  min-height:48px;
  border-radius:8px
}

.optionsSheet .multiSelect__blend-category .select__control--is-focused{
  border-color:var(--primary);
  box-shadow:none
}

.optionsSheet .multiSelect__blend-category .select__menu{
  border:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

.optionsSheet .multiSelect__blend-category .select__option{
  border-bottom:1px solid var(--gray-light-5);
  color:var(--text-light);
  height:48px;
  padding:14px 16px
}

.optionsSheet .multiSelect__blend-category .select__option--is-selected{
  background-color:var(--secondary-bg)
}

.optionsSheet .multiSelect__blend-category .select__option--is-focused{
  background-color:var(--white)
}

.optionsSheet .multiSelect__blend-category .select__indicators{
  display:none
}

.optionsSheet.customerOptionsSheet{
  height:auto;
  overflow:auto;
  padding:0 24px
}

.optionsSheet.customerOptionsSheet .sheetTitle{
  background:var(--white);
  height:44px;
  left:16px;
  margin-top:16px;
  position:absolute;
  top:0;
  width:calc(100% - 40px);
  z-index:7
}

.optionsSheet.customerOptionsSheet .customerForm .formContent{
  max-height:52vh;
  padding-bottom:40px
}

.optionsSheet.customerOptionsSheet .customerForm .formContent .loading{
  margin:8px
}

.optionsSheet.customerOptionsSheet .customerForm .formContent .loading::after{
  border-width:3px;
  height:24px;
  width:24px
}

.optionsSheet.customerOptionsSheet .listItem{
  height:100%
}

.optionsSheet.customerOptionsSheet .listItem>div{
  flex:1
}

.optionsSheet.customerOptionsSheet .companyCard{
  padding-left:0
}

.optionsSheet.customerOptionsSheet .quickAddCustomerFooter{
  background-color:var(--white);
  bottom:0;
  position:fixed;
  width:calc(100% - 32px)
}

.optionsSheet.customerOptionsSheet .footerActions{
  margin-right:0
}

.optionsSheet.customerOptionsSheet .stickyBanner{
  background-color:var(--yellow-bg);
  color:var(--text-light);
  margin-left:-24px;
  padding:8px 24px;
  position:-webkit-sticky;
  position:sticky;
  top:28px;
  width:calc(100% + 48px);
  z-index:8
}

.optionsSheet.customerOptionsSheet .footer{
  background-color:var(--white);
  bottom:0;
  position:fixed;
  width:calc(100% - 32px)
}

.optionsSheet.customerOptionsSheet .enter-missing-banner{
  background:var(--yellow-bg-2);
  color:var(--text-light);
  left:0;
  padding:8px 24px;
  position:absolute;
  top:60px;
  width:100%
}

.optionsSheet .customerForm input{
  border-radius:4px;
  padding-left:1rem
}

.compositionBox .name{
  font-size:12px
}

.compositionBox .box{
  border:1px solid #E5E5E5;
  border-radius:8px;
  padding:12px 16px;
  border-radius:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.productionAttachmentsMarkReady{
  border:1px dashed var(--border);
  height:40px;
  margin-bottom:12px;
  margin-top:12px;
  border-radius:8px;
  height:56px
}

.productionAttachmentsMarkReady>:first-child{
  border-right:1px dashed var(--border)
}

.productionAttachmentsMarkReady .attachedFileWrapper,.productionAttachmentsMarkReady .attachFileButton{
  flex-grow:1;
  width:50%
}

.productionAttachmentsMarkReady .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border)
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.sku-item-selected{
  color:#0067E2
}

.seperator-div{
  color:#D4D4D4
}

.sku-box{
  box-shadow:0px 0px 3px #0067E21F;
  background-color:transparent
}

.sku-box.selected{
  background-color:#F2F8FF
}

.sku-list-container{
  max-height:calc(3 * 105px)
}

.order-fresh-text{
  font-weight:100
}

.productTypeDivider-balanceGreige{
  border-top:8px solid var(--gray-light-6);
  width:100%;
  padding:5;
  margin:5;
  position:relative
}

.productTypeDivider-balanceGreige .item{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:inline-block;
  margin:0;
  text-align:center;
  width:100%
}

.productTypeDivider-balanceGreige .item.item p{
  padding:10px;
  margin:5
}

.exact-match-div{
  background-color:#EDFEF4;
  color:#27AE60
}

.search-option{
  display:flex;
  flex-direction:column;
  overflow-y:scroll;
  max-height:150px;
  width:100%;
  background-color:white;
  margin-left:1px;
  padding:24px 0px;
  gap:10px;
  min-width:312px;
  box-shadow:0px 2px 4px rgba(0,0,0,0.12);
  border-radius:0px 0px 8px 8px
}

.search-card{
  cursor:pointer;
  padding:0.5rem 1rem;
  transition:background-color 0.2s
}

.search-card:hover{
  background-color:#f0f0f0
}

.locofast-info-banner{
  display:flex;
  align-items:center;
  background-color:#f4f9ff;
  border-radius:16px;
  padding:12px 16px
}

.locofast-info-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#0070f3;
  color:white;
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:12px;
  font-weight:bold;
  margin-right:8px;
  font-family:'Nunito Sans', sans-serif
}

.locofast-info-text{
  color:#303c4a;
  font-size:14px;
  font-family:'Nunito Sans', sans-serif
}

.block-bottom{
  border-bottom:8px solid var(--gray-light-6);
  position:relative
}

.heightFull{
  height:100% !important
}

input.inputField{
  border-color:var(--border)
}

.optionsSheet{
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content
}

.optionsSheet input{
  padding-left:44px
}

.optionsSheet .optionsContainer{
  max-height:280px;
  overflow-x:hidden;
  overflow-y:auto
}

.optionsSheet .optionsContainer .listItem{
  align-items:center;
  display:flex;
  height:40px;
  margin-bottom:8px;
  margin-top:0;
  padding-left:8px
}

.optionsSheet .optionsContainer .listItem.active{
  background:var(--secondary-bg);
  color:var(--primary);
  font-weight:600
}

.optionsSheet .optionPill .crossButton{
  min-width:0;
  padding-left:8px
}

.optionsSheet .skipAndAddButton{
  align-items:center;
  display:flex;
  justify-content:center;
  padding:12px 0;
  width:100%
}

.optionsSheet.multiSelect{
  overflow-y:auto;
  height:auto
}

.optionsSheet.multiSelect .addIcon{
  margin-right:4px;
  transform:scale(0.7)
}

.optionsSheet .multiSelect__blend{
  grid-column-gap:24px;
  grid-template-columns:1fr 72px
}

.optionsSheet .multiSelect__blend input[type='number']{
  border-radius:8px;
  padding:0 16px
}

.optionsSheet .multiSelect__blend-category{
  flex:1;
  height:48px
}

.optionsSheet .multiSelect__blend-category .select__control{
  border:1px solid var(--border);
  min-height:48px;
  border-radius:8px
}

.optionsSheet .multiSelect__blend-category .select__control--is-focused{
  border-color:var(--primary);
  box-shadow:none
}

.optionsSheet .multiSelect__blend-category .select__menu{
  border:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

.optionsSheet .multiSelect__blend-category .select__option{
  border-bottom:1px solid var(--gray-light-5);
  color:var(--text-light);
  height:48px;
  padding:14px 16px
}

.optionsSheet .multiSelect__blend-category .select__option--is-selected{
  background-color:var(--secondary-bg)
}

.optionsSheet .multiSelect__blend-category .select__option--is-focused{
  background-color:var(--white)
}

.optionsSheet .multiSelect__blend-category .select__indicators{
  display:none
}

.optionsSheet.customerOptionsSheet{
  height:auto;
  overflow:auto;
  padding:0 24px
}

.optionsSheet.customerOptionsSheet .sheetTitle{
  background:var(--white);
  height:44px;
  left:16px;
  margin-top:16px;
  position:absolute;
  top:0;
  width:calc(100% - 40px);
  z-index:7
}

.optionsSheet.customerOptionsSheet .customerForm .formContent{
  max-height:52vh;
  padding-bottom:40px
}

.optionsSheet.customerOptionsSheet .customerForm .formContent .loading{
  margin:8px
}

.optionsSheet.customerOptionsSheet .customerForm .formContent .loading::after{
  border-width:3px;
  height:24px;
  width:24px
}

.optionsSheet.customerOptionsSheet .listItem{
  height:100%
}

.optionsSheet.customerOptionsSheet .listItem>div{
  flex:1
}

.optionsSheet.customerOptionsSheet .companyCard{
  padding-left:0
}

.optionsSheet.customerOptionsSheet .quickAddCustomerFooter{
  background-color:var(--white);
  bottom:0;
  position:fixed;
  width:calc(100% - 32px)
}

@media (min-width: 1024px){
  .optionsSheet.customerOptionsSheet .quickAddCustomerFooter{
    max-width:38%
  }
}

.optionsSheet.customerOptionsSheet .footerActions{
  margin-right:0
}

.optionsSheet.customerOptionsSheet .stickyBanner{
  background-color:var(--yellow-bg);
  color:var(--text-light);
  margin-left:-24px;
  padding:8px 24px;
  position:-webkit-sticky;
  position:sticky;
  top:28px;
  width:calc(100% + 48px);
  z-index:8
}

.optionsSheet.customerOptionsSheet .footer{
  background-color:var(--white);
  bottom:0;
  position:fixed;
  width:calc(100% - 32px)
}

.optionsSheet.customerOptionsSheet .enter-missing-banner{
  background:var(--yellow-bg-2);
  color:var(--text-light);
  left:0;
  padding:8px 24px;
  position:absolute;
  top:60px;
  width:100%
}

.optionsSheet .customerForm input{
  border-radius:4px;
  padding-left:1rem
}

.emptyResults{
  align-items:center;
  color:var(--gray);
  display:flex;
  flex-direction:column;
  font-size:14px;
  font-weight:600;
  height:256px;
  justify-content:center;
  text-align:center
}

.emptyResults .customAddButton{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:24px;
  color:var(--primary);
  display:flex;
  height:auto;
  padding:6px 8px
}

.emptyResults .customAddButton svg{
  margin-right:8px
}

.emptyResults .customAddButton span{
  white-space:normal;
  width:100%
}

.colorDot{
  height:20px;
  width:20px
}

.datePickerStyles{
  padding:0 0 8px
}

.datePickerStyles .react-datepicker{
  margin-top:16px
}

.gstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:3px;
  border-top-right-radius:3px;
  color:var(--blue-light);
  height:47px !important;
  min-width:70px
}

.validGstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
  color:#0067E2;
  height:46px !important;
  min-width:70px;
  margin:1px
}

.customerLegalName{
  background-color:var(--purple-light-opacity);
  border-radius:8px;
  margin-top:20px
}

.customerLegalName .label{
  color:var(--gray);
  font-weight:400
}

.customerLegalName .legalName{
  color:var(--text-light);
  font-weight:600
}

.paymenttermbottomsheet{
  height:70vh;
  overflow-y:scroll
}

.paymenttermbottomsheet::-webkit-scrollbar{
  display:none
}

.compositionField::-webkit-scrollbar{
  display:none
}

.multiSelect::-webkit-scrollbar{
  display:none
}

.compositionField,.multiSelect{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.compositionField .coachMark{
  top:-78px;
  left:0px;
  background-color:#FFFEE5;
  border-radius:8px
}

.compositionField .coachMark ::after{
  content:'';
  position:absolute;
  display:inline-block;
  width:20px;
  height:20px;
  background-color:#FFFEE5;
  bottom:-10px;
  left:20px;
  transform:rotate(45deg);
  border-radius:2px
}

.right-alignment{
  width:22px !important;
  right:4px !important
}

.productionAttachments{
  height:56px;
  margin-bottom:12px
}

.productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.productionAttachments .attachedFileWrapper,.productionAttachments .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.productionAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  height:56px
}

.productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.attachmentCertificate{
  border:0
}

.attachmentCertificate .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px
}

.errorMessage{
  color:red
}

.unit_suffix{
  background:rgba(225,225,234,0.2);
  border-left:0;
  border-top-right-radius:6px;
  height:46px;
  min-width:50px;
  position:absolute;
  right:1px;
  top:1px;
  border-bottom-right-radius:8px
}

.confirmModal img{
  border-radius:4px;
  height:64px;
  -o-object-fit:cover;
     object-fit:cover;
  width:64px
}

.confirmModal .modalContent{
  background:var(--bg);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  padding:16px
}

.confirmModal .list-style{
  display:flex;
  flex-wrap:wrap;
  list-style-type:disc;
  list-style-position:inside
}

.confirmModal .list-style li{
  font-size:12px
}

.confirmModal .list-style li{
  margin-right:15px
}

.confirmModal .list-style li:first-child{
  list-style-type:none
}

.confirmModal .modalContentMargin{
  background:rgba(225,225,234,0.2);
  height:48px;
  padding:16px 32px;
  width:336px
}

.confirmModal .locofastMarginText{
  font-size:14px;
  font-style:normal;
  line-height:20px
}

.confirmModal .details>div:not(:first-child){
  padding-top:14px
}

.confirmModal .details>div:not(:last-child){
  border-bottom:1px dashed var(--gray-light-5);
  padding-bottom:14px
}

.confirmModal .details>div:last-child{
  padding-bottom:14px
}

.confirmModal .modalFooter{
  padding-top:8px;
  padding-bottom:8px;
  display:flex;
  justify-content:center
}

.confirmModal .modalFooter button{
  width:128px
}

.confirmModal .modalFooter button:nth-child(2){
  margin-left:16px
}

.confirmQuoteModal{
  border-radius:16px;
  max-width:390px !important
}

.confirmQuoteModal .modalHeader{
  font-weight:700;
  background:var(--bg);
  border-radius:16px;
  font-size:16px;
  padding:0 16px;
  padding-top:24px
}

.word{
  word-break:break-word
}

.word-2{
  --webkit-box-orient: vertical;
  display:box;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow:ellipsis
}

.modalContainer{
  border-radius:16px;
  margin:0 24px;
  padding-bottom:8px !important
}

.modalContainer .modalHeaderContainer{
  align-items:center;
  display:flex;
  height:32px;
  justify-content:space-between;
  margin:16px 24px
}

.modalContainer .modalHeaderContainer .modalHeader{
  color:var(--text-light);
  flex:1;
  font-size:16px !important;
  font-weight:bold;
  padding:0 !important
}

.modalContainer .modalBody{
  padding-top:0
}

.modalContainer .modalFooter button{
  width:112px
}

.multiplDispatch:before{
  content:' ';
  display:block;
  height:1px;
  width:100%;
  position:absolute;
  top:50%;
  left:100%;
  background:#E5E5E5
}

.multiplDispatch{
  position:relative;
  width:30%;
  text-align:center
}

.multiplDispatch:after{
  content:' ';
  height:1px;
  width:100%;
  background:#E5E5E5;
  display:block;
  position:absolute;
  top:50%;
  right:100%
}

.multiplDispatch:before{
  content:' ';
  display:block;
  height:1px;
  width:100%;
  position:absolute;
  top:50%;
  left:100%;
  background:#E5E5E5
}

.multiplDispatch{
  position:relative;
  width:30%;
  text-align:center
}

.multiplDispatch:after{
  content:' ';
  height:1px;
  width:100%;
  background:#E5E5E5;
  display:block;
  position:absolute;
  top:50%;
  right:100%
}

.labelValueContainer{
  height:72px;
  margin-bottom:24px
}

.lastRow{
  margin-bottom:0
}

.message{
  margin-bottom:36px
}

.uploadBaleBottomSheet{
  max-height:552px;
  min-height:100px
}

.disabledInput{
  background-color:#E1E1EA33;
  border-color:var(--border);
  border-radius:8px;
  box-shadow:none !important;
  font-size:14px !important;
  height:48px !important
}

.separator{
  border-top:1px solid var(--gray-light-2);
  margin-bottom:24px
}

.addIcon{
  margin-right:4px;
  transform:scale(0.7)
}

.am-fabric-header{
  justify-content:space-between
}

.am-fabric-header .filterIcon{
  position:relative;
  top:4px
}

.slidable{
  border:1px solid var(--border)
}

.requestTabs{
  display:inline-flex;
  align-items:center;
  background:var(--white);
  border-radius:20px
}

.requestTabs .pill{
  padding:6px;
  background:white;
  font-size:12px;
  font-weight:600
}

.requestTabs .activePill{
  background-color:var(--secondary-bg);
  color:var(--primary);
  border:1px solid var(--primary)
}

.requestTabs button{
  padding-left:16px;
  padding-right:16px;
  padding-top:8px;
  padding-bottom:8px;
  border:1px solid transparent;
  border-radius:20px;
  color:var(--gray)
}

.requestTabs button:first-child{
  margin-right:2px
}

.requestTabs button.active,.requestTabs button.active:focus{
  font-weight:600;
  background:var(--secondary-bg);
  border-color:var(--primary);
  box-shadow:0 0 2px rgba(0,0,0,0.12);
  color:var(--primary)
}

.cancelAttachmentsModal{
  border-radius:16px
}

.cancelAttachmentsModal>div{
  padding:24px
}

.cancelAttachmentsModal .cancelModalButton{
  font-weight:700;
  height:40px;
  padding:0 28px
}

.markReceivedBtn{
  background:var(--primary) !important;
  border-radius:24px;
  color:var(--white);
  font-size:16px;
  font-weight:700;
  height:40px;
  padding:0 12px
}

.markReceivedBtn:disabled{
  cursor:not-allowed;
  opacity:0.5
}

.calender-header{
  background-color:#e1e1ea33;
  border-radius:14px 14px 0 0 !important;
  display:flex;
  gap:8px;
  margin:-8px 0;
  padding:24px 24px 16px;
  position:relative
}

.calender-header .title,.calender-header .date{
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  line-height:20px
}

.calender-header .title{
  color:var(--gray);
  font-weight:normal
}

.calender-header .date{
  color:var(--text-light);
  font-weight:600
}

.commentsModal{
  max-height:80%;
  min-height:280px;
  overflow:scroll;
  width:280px !important
}

.commentsModal .closeButton{
  height:40px;
  padding:0 28px
}

.commentsModal .modalBody{
  display:flex;
  flex-direction:column;
  flex-grow:1;
  justify-content:space-between
}

.dateAddedToast.Toastify__toast--default{
  font-size:16px;
  border-radius:9999px;
  background:var(--green);
  padding:4px 22px
}

.dateAddedToast.Toastify__toast--default .Toastify__toast-body{
  font-weight:600
}

button.bottomSheetOption{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  height:auto;
  margin-right:16px;
  padding:10px 22px
}

button.bottomSheetOption.active{
  border:1px solid var(--primary);
  color:var(--primary)
}

.viewHistoryContainer{
  max-height:80vh;
  overflow:auto
}

.attachFileModal .attachFileHeader{
  background-color:#f9faff;
  border-radius:14px 14px 0 0 !important;
  height:72px;
  margin:0;
  padding:24px 8px 24px 24px
}

.attachFileModal .attachFileContainer{
  border:1px solid var(--border);
  border-radius:10px;
  margin-top:8px
}

.attachFileModal .attachFileButton{
  background-color:var(--gray-light-2);
  border:0 !important;
  border-radius:4px;
  height:40px;
  margin:24px;
  text-align:center;
  width:36px !important
}

.markCompleteBottomSheetContainer{
  position:fixed !important
}

.productionAttachmentsMarkReady{
  border:1px dashed var(--border);
  height:56px;
  margin-bottom:12px
}

.productionAttachmentsMarkReady>:first-child{
  border-right:1px dashed var(--border)
}

.productionAttachmentsMarkReady .attachedFileWrapper,.productionAttachmentsMarkReady .attachFileButton{
  flex-grow:1;
  width:50%
}

.productionAttachmentsMarkReady .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:56px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.markReadyBottomSheetBody{
  padding:0px 2px
}

.extraTnaGroup .rightBodyText{
  color:var(--gray) !important
}

.markCompleteBottomSheetImages{
  align-items:center;
  border:0 !important;
  display:flex;
  margin:0;
  padding:16px 0
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages{
    -moz-column-gap:18px;
         column-gap:18px
  }
}

.markCompleteBottomSheetImages .attachment{
  margin:0
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages .attachment{
    margin:0
  }

  .markCompleteBottomSheetImages .attachment:not(:last-child){
    margin-right:0
  }
}

.markCompleteBottomSheetImages .attachment .pic{
  margin:0;
  -o-object-fit:cover;
     object-fit:cover
}

.markCompleteBottomSheetImages .attachMoreFilesButton{
  margin:0 0 0 12px
}

@media (max-width: 767px){
  .markCompleteBottomSheetImages .attachMoreFilesButton{
    margin:0
  }
}

.scroll-container{
  max-height:82vh;
  overflow-y:auto
}

.scroll-container::-webkit-scrollbar{
  background:transparent;
  width:0
}

.supplier-attachments{
  padding:16px
}

@media (max-width: 767px){
  .supplier{
    -moz-column-gap:10px;
         column-gap:10px;
    display:grid !important;
    grid-template-columns:repeat(5, 0fr)
  }
}

.crossButton{
  left:8px
}

.bale-bottomsheet .scroll-container{
  max-height:82vh;
  overflow-y:auto
}

.bale-bottomsheet .scroll-container::-webkit-scrollbar{
  background:transparent;
  width:0
}

.menu{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-width:104px;
  padding-bottom:12px;
  padding-top:12px;
  position:absolute;
  right:15px;
  top:15px;
  z-index:5
}

.blue-header{
  background:var(--blue-two);
  border:0;
  box-shadow:none
}

.overlay{
  background:rgba(0,0,0,0.15);
  bottom:0;
  color:transparent;
  height:100%;
  left:0;
  position:fixed;
  right:0;
  top:0;
  width:100%;
  z-index:4
}

.left-1\/2{
  left:50%
}

.-translateX-1\/2{
  transform:translateX(-50%)
}

.updateStatusBottomSheet__content{
  min-height:140px
}

.updateStatusBottomSheet__content_footer{
  width:100vw
}

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

.updateStatusBottomSheet__content .supplierUserStatusOptions .label:not(:last-child){
  margin-right:8px
}

.updateStatusBottomSheet__content .supplierUserStatusOptions .label input{
  visibility:hidden;
  width:0
}

.updateStatusBottomSheet__content .supplierUserStatusOptions .label span{
  align-items:center;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  display:inline-flex;
  height:40px;
  justify-content:center;
  padding:0 16px;
  position:relative
}

.updateStatusBottomSheet__content .supplierUserStatusOptions .label input:checked ~ span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:36px
}

.updateStatusBottomSheet__content .supplierUserStatusOptions .label input:checked ~ span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:16px;
  position:absolute;
  top:13px;
  width:12px
}

.supplierUserStatusChip{
  border-radius:16px;
  padding:2px 4px
}

.supplierUserStatusChip--invited{
  background-color:var(--secondary-bg);
  color:var(--blue-2)
}

.supplierUserStatusChip--active{
  background-color:var(--green-bg);
  color:var(--green)
}

.supplierUserStatusChip--inactive{
  background-color:var(--yellow-bg-2);
  color:var(--orange)
}


.roundedButton{
  background-color:var(--primary);
  border-radius:50%;
  bottom:72px;
  box-shadow:0 0 9.6px rgba(0,0,0,0.12);
  height:48px;
  position:fixed;
  right:17px;
  width:48px;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center
}

.roundedButton svg path{
  fill:var(--white)
}

.towardsBotton{
  bottom:32px
}

@media (min-width: 1024px){
  .roundedButton{
    right:calc(30% + 15px)
  }
}

.loading{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:2rem
}

.loading::after{
  -webkit-animation:spin 0.8s 0.1s ease-in-out infinite both;
          animation:spin 0.8s 0.1s ease-in-out infinite both;
  border:6px solid var(--gray-light-2);
  border-radius:50%;
  border-top-color:var(--primary);
  content:'';
  height:36px;
  width:36px
}

@-webkit-keyframes spin{
  from{
    transform:rotate(0)
  }

  to{
    transform:rotate(360deg)
  }
}

@keyframes spin{
  from{
    transform:rotate(0)
  }

  to{
    transform:rotate(360deg)
  }
}

.dispatch-datepicker .react-datepicker .react-datepicker__header{
  padding-top:0
}

.dispatch-datepicker .react-datepicker .react-datepicker__navigation--next,.dispatch-datepicker .react-datepicker .react-datepicker__navigation--previous{
  top:2px
}

.dispatch-datepicker .react-datepicker .react-datepicker__day--highlighted{
  background:transparent;
  position:relative
}

.dispatch-datepicker .react-datepicker .react-datepicker__day--highlighted::after{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC42NiAyLjExNWw0LjQwMSAyLjIwMWExLjEgMS4xIDAgMDEuNjExLjk4NXY1LjI0NGMwIC40MTgtLjIzNy44LS42MS45ODVsLTQuNDAzIDIuMjAxYTEuMSAxLjEgMCAwMS0uOTg1IDBsLTQuNDAyLTIuMmExLjEgMS4xIDAgMDEtLjYwNS0uOTkxVjUuM2MwLS40MTguMjM2LS44LjYxLS45ODVMNy42OCAyLjExNWExLjEgMS4xIDAgMDEuOTggMHoiIHN0cm9rZT0iIzY3Njc3MyIgc3Ryb2tlLXdpZHRoPSIuNjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMi44NDMgNC43MDdMOC4xNjkgNy4zN2w1LjMyNy0yLjY2M004LjE3IDEzLjg0MXYtNi40N001LjQxOCAzLjI0M2w1LjUwMyAyLjc1MiIgc3Ryb2tlPSIjNjc2NzczIiBzdHJva2Utd2lkdGg9Ii42NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPgo=) no-repeat;
  background-position:center -1px;
  content:'';
  height:16px;
  position:absolute;
  top:-4px;
  width:16px
}

.dispatch-datepicker .react-datepicker .react-datepicker__day--selected::after{
  width:0
}

.dispatch-datepicker .react-datepicker .react-datepicker__day--today{
  background-color:var(--white) !important;
  color:var(--text) !important
}

.fabricsMenu{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-width:104px;
  position:absolute;
  right:15px;
  top:15px;
  z-index:5
}

.fabricsMenu svg path{
  fill:var(--gray)
}

.fabricsMenu .menuItem{
  margin-left:8px;
  margin-right:16px;
  padding:10px 0
}

.fabricsMenu .-ml-8px{
  margin-left:-8px
}

.fabricsMenu .menuActor{
  display:grid;
  grid-column-gap:8px;
  grid-template-columns:24px 1fr
}

.fabricsMenu--inaction .menuActor{
  display:none
}

.fabricsMenu .deleteFabricButton{
  justify-content:flex-start
}

.fabricsMenu .deleteFabricButton svg{
  transform:translateX(4px) scale(1.5)
}

.fabricsMenu .deleteFabricButton:hover{
  text-decoration:none
}

.fabricDetailsThumb{
  height:24.445vh;
  min-height:172px
}

.fabricDetailsThumb__image_wrapper{
  height:100%;
  width:104px
}

.fabricDetailsThumb__image_wrapper .fabricImage{
  border-radius:4px;
  height:100%;
  width:100%
}

.fabricDetailsThumb__content_wrapper{
  height:100%;
  padding-left:40px;
  width:calc(100% - 104px)
}

.inviteSuppliersWrapper .emptyStateContainer{
  justify-content:flex-start;
  padding-top:110px
}

.inviteSuppliersWrapper .emptyStateContainer .title{
  color:var(--gray);
  font-size:14px;
  font-weight:400;
  margin-top:16px
}

.inviteSuppliersWrapper .emptyStateContainer button{
  background-color:transparent;
  color:var(--primary);
  font-weight:bold
}

.inviteSuppliersWrapper .emptyStateContainer button span{
  margin-left:6px
}

.bold-font span{
  font-weight:600
}

.allocate-btn{
  margin-right:16px;
  padding:6px auto 6px 2px;
  width:88px !important
}

.allocate-btn span{
  margin-left:2px
}

.supplier-bottomsheet-details .detail-item{
  border:1px solid var(--gray-light-5)
}

.icon-style{
  border:1px solid #F2F2F2;
  box-sizing:border-box;
  border-radius:16px;
  padding:5px 5px 5px 5px
}

.confirmSuppliersModal{
  border-radius:16px;
  max-width:336px !important
}

.confirmSuppliersModal img{
  border-radius:4px;
  height:64px;
  width:64px
}

.confirmSuppliersModal .modalHeader{
  font-weight:700;
  background:var(--bg);
  border-radius:16px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  font-size:16px;
  padding:24px 32px
}

.confirmSuppliersModal .modalContent{
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  padding:24px 32px
}

.confirmSuppliersModal__closeIcon{
  transform:scale(0.9, 0.9)
}

.confirmSuppliersModal .modalFooter{
  padding-top:8px;
  padding-bottom:8px;
  display:flex;
  justify-content:center
}

.confirmSuppliersModal .modalFooter .formButton{
  width:224px
}

.confirmSuppliersModal .modalFooter .formButton__chevron{
  transform:scale(0.8, 0.8)
}

.confirmSuppliersModal .modalFooter .formButton__chevron path{
  fill:var(--primary)
}

.formSubmitWrapper{
  background:var(--white);
  bottom:0;
  display:flex;
  padding:8px 0;
  position:fixed;
  width:88%;
  z-index:2
}

.suppliersListContainer .optionsContainer .listItem{
  height:76px !important;
  margin-bottom:0 !important
}

.mapSupplierForm .selectedOption{
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-light);
  font-size:14px;
  height:48px;
  padding:12px 16px
}

.mapSupplierTypeWrapper{
  padding-left:42px
}

.mapSupplierTypeWrapper .mapSupplierType{
  border-radius:24px;
  color:var(--gray);
  padding:4px 8px
}

.mapSupplierTypeWrapper .mapSupplierType--violet{
  background-color:var(--purple-bg)
}

.mapSupplierTypeWrapper .mapSupplierType--orange{
  background-color:var(--red-bg-3)
}

.mapSupplierTypeWrapper .mapSupplierType:not(:first-child){
  margin-left:8px
}

@-webkit-keyframes fadeIn{
  from{
    opacity:0
  }

  to{
    opacity:1
  }
}

@keyframes fadeIn{
  from{
    opacity:0
  }

  to{
    opacity:1
  }
}

.setupAccountModal{
  -webkit-animation:fadeIn 0.25s ease;
          animation:fadeIn 0.25s ease;
  border-radius:16px;
  width:224px !important
}

.setupAccountModal .setupAccountModalClose svg path{
  fill:var(--placeholder)
}

.setupAccountModal .setupAccountModalBody{
  padding-bottom:24px;
  text-align:center
}

.setupAccountModal .setupAccountModalBody .checkIcon{
  height:56px;
  margin:0 auto;
  width:56px
}

.setupAccountModal .setupAccountModalBody .title{
  color:var(--text);
  font-weight:bold;
  margin-top:24px
}

.setupAccountModal .setupAccountModalBody .text{
  color:var(--gray);
  font-size:14px;
  margin-top:4px
}

.setupAccountModalOverlay{
  background-color:rgba(0,1,38,0.3) !important
}

.resetPasswordPage{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding-top:24px
}

@media (max-width: 767px){
  .resetPasswordPage{
    align-items:unset;
    padding:0 32px;
    padding-top:24px
  }
}

.resetPasswordPage .borderWrapper{
  border:1px solid var(--border);
  border-radius:8px;
  width:412px
}

@media (max-width: 767px){
  .resetPasswordPage .borderWrapper{
    border:0;
    width:100%
  }
}

.resetPasswordPage .borderWrapper .backButtonWrapper{
  border-bottom:1px solid var(--border)
}

@media (max-width: 767px){
  .resetPasswordPage .borderWrapper .backButtonWrapper{
    border:0
  }
}

.resetPasswordPage .borderWrapper .contentWrapper{
  align-items:center;
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
  padding:0 32px;
  text-align:center
}

@media (max-width: 767px){
  .resetPasswordPage .borderWrapper .contentWrapper{
    padding:0
  }
}

@media (max-width: 767px){
  .resetPasswordPage .backButton{
    height:32px;
    width:32px
  }
}

.resetPasswordPage .formWrapper{
  margin-top:38px;
  text-align:left;
  width:100%
}

.resetPasswordPage .formWrapper input[type='password']{
  height:48px
}

.resetPasswordPage .formWrapper .inputRightAddon{
  height:48px
}

.resetPasswordPage .logo{
  height:28px;
  margin:0 auto;
  margin-top:28px
}

@media (max-width: 767px){
  .resetPasswordPage .logo{
    margin-top:16px
  }
}

.resetPasswordPage .passwordTipWrapper{
  background:var(--bg);
  border-radius:8px;
  margin-top:32px;
  padding:10px 16px;
  width:296px
}

@media (max-width: 767px){
  .resetPasswordPage .passwordTipWrapper{
    width:100%
  }
}

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

.resetPasswordPage .passwordTip:not(:last-child){
  margin-bottom:8px
}

.resetPasswordPage .passwordTip.greenCheck svg rect{
  fill:var(--green)
}

.resetPasswordPage .passwordTip .passwordTipText{
  color:var(--gray);
  font-size:12px;
  font-weight:600
}

.resetPasswordPage .eyeButton{
  margin-right:16px;
  margin-top:0
}

.resetPasswordPage .eyeButton .eyeIcon{
  height:24px;
  width:24px
}

.resetPasswordPage .buttonPrimary{
  font-size:14px
}

.custom-option{
  padding:8px 12px;
  background-color:var(--white);
  cursor:pointer;
  border-bottom:1px solid var(--gray-light-5);
  font-weight:normal
}

.custom-option.focused{
  background-color:#f9f9f9
}

.custom-option.selected{
  font-weight:bold
}

.custom-option.last{
  border-bottom:none
}

.custom-clear-icon{
  padding-right:8px;
  cursor:pointer;
  display:flex;
  align-items:center
}

.custom-select__control{
  min-width:224px;
  height:36px;
  background-color:white;
  border:1px solid var(--gray-light);
  box-shadow:none;
  opacity:1;
  display:flex;
  align-items:center;
  cursor:pointer
}

.custom-select__control--is-disabled{
  opacity:0.6;
  cursor:not-allowed
}

.custom-select__placeholder{
  color:var(--gray-light-9)
}

.custom-select__value-container{
  height:36px;
  padding:0 8px;
  display:flex;
  align-items:center;
  border:0
}

.custom-select__indicators{
  height:36px;
  display:flex;
  align-items:center
}

.notification_wrapper_loader{
  margin-top:50%
}

.notification_wrapper .header{
  align-items:center;
  color:#000126;
  box-shadow:0 1px 2px rgba(0,1,38,0.1);
  display:flex;
  padding:16px 24px
}

.notification_wrapper .header .header_title{
  font-family:'Nunito Sans';
  font-size:16px;
  font-style:normal;
  font-weight:600;
  line-height:1.5;
  margin-left:20px
}

.notification_wrapper .notification_list{
  padding:0 24px
}

.notification_wrapper .notification_list .unread{
  align-items:center;
  color:#333340;
  display:flex;
  font-family:'Nunito Sans';
  font-size:12px;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  margin:24px 0
}

.notification_wrapper .notification_item{
  border-bottom:2px solid #f2f2f2;
  margin:15px 0;
  padding-bottom:16px
}

.notification_wrapper .notification_item .icon{
  align-items:center;
  background:#edfef4;
  border-radius:50%;
  display:flex;
  height:32px;
  justify-content:center;
  margin-right:8px;
  width:60px
}

.notification_wrapper .notification_item .content_wrapper{
  color:#333340;
  font-family:'Nunito Sans';
  font-style:normal;
  line-height:20px
}

.notification_wrapper .notification_item .content_wrapper .title{
  align-self:stretch;
  flex:none;
  flex-grow:0;
  font-size:14px;
  font-weight:600;
  margin:4px 0;
  order:0
}

.notification_wrapper .notification_item .content_wrapper .subTitle{
  font-size:14px;
  font-weight:400
}

.notification_wrapper .notification_item .arrival_time{
  font-family:'Nunito Sans';
  font-size:12px !important;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  text-align:right;
  margin-left:14px
}

.notification_wrapper .notification_item .isViewedTextColor{
  color:#676773;
  font-weight:400
}

.notification_placeHolder{
  display:grid;
  place-items:center;
  margin-top:50%
}

.notification_placeHolder .not_found_text{
  color:#333340;
  margin-top:37px;
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:700;
  font-size:16px;
  line-height:20px
}

@media (min-width: 524px){
  .notification_wrapper{
    margin:0 auto;
    width:512px
  }
}

.bottomSheetContent{
  border-top-left-radius:14px;
  border-top-right-radius:14px;
  bottom:0;
  margin:0 !important;
  padding:32px 24px 0;
  padding-top:16px;
  position:absolute !important;
  top:auto !important;
  width:100%;
  min-width:365px;
  max-width:100%
}

.bottomSheetContent::after{
  background:var(--gray-light-5);
  border-radius:4px;
  content:'';
  height:4px;
  left:50%;
  position:absolute;
  top:12px;
  transform:translateX(-50%);
  width:40px
}

.bottomSheetContent .footerActions{
  margin-right:-16px;
  padding-bottom:8px;
  padding-right:0
}

.bottomSheetContent .footerActions button{
  height:40px
}

.bottomSheetContent.bottomSheetContainer{
  padding:8px 8px 0 !important
}

.bottomSheetOverlay{
  background-color:rgba(0,1,38,0.3) !important;
  z-index:1000 !important
}

@media (min-width: 1024px){
  .bottomSheetContent{
    max-width:40% !important
  }
}

.trackingInputWrapper{
  border-top:1px dashed var(--border)
}

.countdownBackground{
  background-color:var(--primary);
  border-radius:36px;
  bottom:0;
  left:0;
  opacity:0.05;
  position:absolute;
  right:0;
  top:0
}

.countdownTime{
  color:var(--primary);
  font-size:12px;
  font-weight:700
}

.fieldsContainer{
  padding:24px;
  width:100%
}

.fieldsContainer .header{
  color:var(--gray2);
  font-family:Nunito Sans;
  font-size:16px;
  font-weight:400;
  line-height:24px
}

.bottomSeparator{
  border-bottom:8px solid var(--gray-light-6)
}

.topSeparator{
  border-top:8px solid var(--gray-light-6)
}

.subContentContainer{
  padding:16px 24px;
  margin:24px;
  background:var(--blue-two);
  border-radius:12px;
  margin-top:0
}

.subContentContainer .radioButton span{
  margin:8px 0px
}

.fabricDetails .eyeButton{
  top:-12px
}

.fabDetailsEditBtn{
  border:1px solid var(--primary);
  margin:15px 0;
  max-width:475px;
  padding:8px 60px;
  width:100%
}

.fabDetailsEditBtn:hover{
  color:var(--primary)
}

.confirmDispatchModal__content{
  border-radius:16px;
  max-width:336px !important
}

.confirmDispatchModal__contentBody{
  padding:0 !important
}

.confirmDispatchModal__header{
  font-weight:700;
  background:var(--bg);
  border-radius:16px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  font-size:16px
}

.confirmDispatchModal__headerText{
  color:var(--text-light)
}

.confirmDispatchModal__headerText--title{
  font-size:18px;
  font-weight:bold;
  line-height:24px
}

.confirmDispatchModal__headerText--info{
  font-size:12px;
  font-weight:normal;
  line-height:24px
}

.confirmDispatchModal__headerText--statusGreen{
  align-items:center;
  background-color:var(--green-bg);
  border-radius:16px;
  color:var(--green);
  display:flex;
  font-size:14px;
  font-weight:600;
  justify-content:center;
  line-height:24px;
  margin-top:8px;
  padding:2px 8px
}

.confirmDispatchModal__headerText--statusRed{
  align-items:center;
  background-color:var(--red-bg-3);
  border-radius:16px;
  color:var(--red);
  display:flex;
  font-size:14px;
  font-weight:600;
  justify-content:center;
  line-height:24px;
  margin-top:8px;
  padding:2px 8px
}

.confirmDispatchModal__bodyText{
  font-size:12px;
  line-height:24px
}

.confirmDispatchModal__bodyText--light{
  color:var(--gray)
}

.confirmDispatchModal__bodyText--dark{
  color:var(--text-light);
  font-weight:600;
  margin-top:10px
}

.confirmDispatchModal__bodyImages{
  margin-top:32px
}

.confirmDispatchModal__bodyImages img{
  border-radius:2px;
  height:40px;
  width:36px
}

.confirmDispatchModal__bodyImages img:not(:last-child){
  margin-right:12px
}

.confirmDispatchModal__footer{
  padding:0 24px 8px !important
}

.dispatchCompleteModal__content{
  border-radius:16px;
  height:256px;
  max-width:288px !important;
  position:relative
}

.dispatchCompleteModal__contentBody{
  padding:44px 0 !important
}

.dispatchCompleteModal__text--heading{
  color:var(--green);
  font-size:20px;
  font-weight:bold;
  line-height:24px
}

.dispatchCompleteModal__text--info{
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  line-height:20px;
  margin-left:30px;
  margin-right:30px;
  text-align:center
}

.dispatchCompleteModal__closeIcon{
  position:absolute;
  right:21px;
  top:21px
}

.dispatchCompleteModal__closeIcon path{
  fill:var(--gray-light-3)
}

.commentInput{
  border:1px solid var(--border);
  border-radius:4px;
  height:56px;
  padding:0 16px;
  width:100%
}

.commentInput::-moz-placeholder{
  color:var(--gray-light-3)
}

.commentInput:-ms-input-placeholder{
  color:var(--gray-light-3)
}

.commentInput::placeholder{
  color:var(--gray-light-3)
}

.amUpdateStatusBottomSheet{
  padding:16px 0 0
}

.amUpdateStatusBottomSheet .attachFileButton{
  border-bottom:1px dashed var(--border);
  color:var(--primary);
  height:48px;
  margin:0 auto;
  width:100%
}

.amUpdateStatusBottomSheet .responseButton{
  align-items:center;
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:flex;
  height:40px;
  padding:0 20px
}

.amUpdateStatusBottomSheet .responseButton:not(:last-child){
  margin-bottom:16px
}

.amUpdateStatusBottomSheet .responseButton svg{
  margin-right:4px
}

.amUpdateStatusBottomSheet .responseButton.approveButton svg path{
  fill:var(--text-light);
  stroke:var(--text-light)
}

.amUpdateStatusBottomSheet .responseButton.cancelButton{
  color:var(--red)
}

.amUpdateStatusBottomSheet .footerButtons{
  padding:8px
}

.amUpdateStatusBottomSheet .footerButtons .button{
  font-weight:700;
  height:40px;
  padding:0 30px
}

.amUpdateStatusBottomSheet .changeStatusButton{
  border-bottom:1px dashed var(--border);
  height:48px;
  width:100%
}

.amUpdateStatusBottomSheet .changeStatusButton .cancelStatusButtonText{
  color:var(--red)
}

.amUpdateStatusBottomSheet .ratingContainer{
  border-bottom:1px dashed var(--border)
}

.amUpdateStatusBottomSheet .ratingWrapper button{
  align-items:center;
  display:flex;
  height:32px;
  justify-content:center;
  margin-right:8px;
  width:32px
}

.amUpdateStatusBottomSheet .ratingWrapper svg{
  transform:scale(2)
}

.amUpdateStatusBottomSheet .commentInput{
  border:1px solid var(--border);
  border-radius:4px;
  height:56px;
  padding:0 16px;
  width:100%
}

.amUpdateStatusBottomSheet .commentInput::-moz-placeholder{
  color:var(--gray-light-3)
}

.amUpdateStatusBottomSheet .commentInput:-ms-input-placeholder{
  color:var(--gray-light-3)
}

.amUpdateStatusBottomSheet .commentInput::placeholder{
  color:var(--gray-light-3)
}

.amUpdateStatusBottomSheet .cancelMessage{
  background-color:var(--yellow-bg-2)
}

.amUpdateStatusBottomSheet .separator{
  border-bottom:1px dashed var(--border);
  display:block;
  height:1px
}

.amUpdateStatusBottomSheet .resubmitCommentButton{
  color:var(--gray);
  height:48px;
  opacity:0.5;
  width:100%
}

.amUpdateStatusBottomSheet .resubmitDateButton{
  height:72px
}

.amUpdateStatusBottomSheet .footerActions{
  margin-right:0;
  padding-left:0;
  padding-right:8px
}

.amUpdateStatusBottomSheet .approval-code-mx{
  margin-left:-24px;
  margin-right:-24px
}

.card{
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  padding-bottom:16px
}

.card:not(:last-child){
  margin-bottom:8px
}

.card .toggleButton{
  color:var(--primary);
  padding:8px 8px 0
}

.card .toggleButton .chevron{
  transition:all 0.1s ease-in-out
}

.card .toggleButton .chevron path{
  fill:var(--primary)
}

.card .toggleButton .chevron.chevronRotated{
  transform:rotate(180deg)
}

.card .toggleButton .icon{
  margin-right:4px
}

.card .collapseComment{
  background:var(--yellow-bg-2);
  color:var(--text-light);
  padding:16px
}

.card .collapseTracking .infoGrid{
  display:grid;
  grid-template-columns:1fr 2fr;
  height:28px
}

.auto-width-bar{
  width:100%;
  min-width:365px;
  left:0
}

@media (min-width: 1024px){
  .auto-width-bar{
    width:40%;
    left:30%
  }
}

.hideScrollbar::-webkit-scrollbar{
  display:none
}

.hideScrollbar{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.imageAttachments{
  height:40px;
  width:36px
}

.infoContainerPill{
  display:flex;
  align-items:center;
  border-radius:8px;
  border:0.5px solid var(--primary-voilet);
  background-color:var(--bg);
  padding:8px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  cursor:pointer
}

.infoContainerPill .frontIcon{
  margin-right:2px
}

.infoContainerPill.warning{
  border-color:var(--orange);
  background-color:var(--red-bg)
}

.customDivider{
  background-color:var(--gray-light-2);
  height:1px;
  margin-bottom:20px;
  margin-top:-60px;
  position:relative;
  width:100%
}

.customDivider .frontData{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  display:grid;
  height:32px;
  left:3%;
  place-items:center;
  position:absolute;
  transform:translateY(-50%);
  width:32px
}

.customDivider .backData{
  display:grid;
  height:32px;
  right:3%;
  place-items:center;
  position:absolute;
  transform:translateY(-50%)
}

.note-text{
  color:var(--blue-voilet);
  font-size:12px;
  font-weight:400
}

.responseButton{
  align-items:center;
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:flex;
  height:40px;
  padding:0 20px
}

.responseButton:not(:last-child){
  margin-bottom:16px
}

.responseButton svg{
  margin-right:4px
}

.responseButton.approveButton svg path{
  fill:var(--text-light);
  stroke:var(--text-light)
}

.responseButton.cancelButton{
  color:var(--red)
}

.attachmentContainer{
  display:flex;
  margin-top:12px;
  padding-left:22px
}

.ratingWrapper button{
  transform:scale(2);
  align-items:center;
  display:flex;
  height:32px;
  justify-content:center;
  margin-right:8px;
  width:32px
}

.separator{
  border-bottom:1px dashed var(--border);
  display:block;
  height:1px;
  margin:8px 0px 6px
}

.stepper-container{
  background-color:var(--white)
}

.steppers{
  margin:16px 24px 0;
  height:100%
}

.steppers .tna-step{
  align-items:flex-start;
  display:flex;
  min-height:72px;
  position:relative
}

.steppers .dataBox .title{
  color:var(--text-light);
  font-size:14px;
  font-weight:600;
  margin-left:16px;
  margin-top:-2px;
  margin-bottom:0
}

.steppers .circle{
  background:var(--green);
  border:2.5px solid var(--blue-two);
  border-radius:100%;
  height:16px;
  text-align:center;
  width:16px;
  z-index:20
}

.steppers .circle.inactive{
  background:var(--border)
}

.steppers .circle.progress{
  background:var(--white);
  border:3.5px solid var(--green-bg-3)
}

.steppers .circle.cancelled{
  background:var(--red)
}

.steppers .circle.provisional{
  background:var(--orange)
}

.steppers .line::after{
  background:var(--border);
  content:'';
  height:100%;
  left:6px;
  position:absolute;
  width:4px;
  z-index:0
}

.steppers .line.complete::after{
  background:var(--green-bg-3)
}

.steppers .step:last-child .line::after{
  display:none
}

.steppers .order-date-stepper{
  color:var(--text-light);
  font-size:12px;
  padding:0;
  margin-left:16px;
  font-weight:400
}

.steppers .dispatch-date{
  color:var(--gray);
  font-size:12px
}

.stickyNoteSampleApproval{
  background:var(--yellow-bg-2);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  display:flex;
  justify-content:center;
  padding:5px 24px;
  position:fixed;
  z-index:24
}

.markReadyBottomSheetBody{
  margin-top:64px
}

.markReadyBottomSheetBody .bottomsheet-header{
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  background-color:var(--white);
  padding:24px;
  height:64px
}

.markReadyBottomSheetBody .bottomsheet-body{
  margin-bottom:4rem
}

.markReadyBottomSheetBody .bottomsheet-footer{
  position:absolute;
  bottom:0;
  width:100%;
  padding:8px 24px;
  left:0;
  background-color:var(--white)
}

.markReadyBottomSheetBody .bottomsheet-footer .footerButton{
  width:112px
}

.tnaSubmittedModal{
  -webkit-animation:fadeIn 0.25s ease;
          animation:fadeIn 0.25s ease;
  border-radius:16px;
  width:224px !important
}

.tnaSubmittedModal .passwordResetModalBody{
  padding-bottom:24px;
  padding-top:40px;
  text-align:center
}

.tnaSubmittedModal .passwordResetModalBody .checkIcon{
  height:56px;
  margin:0 auto;
  width:56px
}

.tnaSubmittedModal .passwordResetModalBody .title{
  color:var(--text);
  font-size:16px;
  font-weight:bold;
  margin-top:16px
}

.tnaSubmittedModal .passwordResetModalBody .text{
  margin-top:4px
}

.tnaSubmittedModal .passwordResetModalBody .closeButton{
  color:var(--primary);
  font-weight:bold;
  height:24px
}

.stickBanner{
  box-shadow:0 -1px 2px rgba(0,0,0,0.1);
  color:var(--purple-secondary-dark);
  z-index:99
}

.stickyMessageBanner{
  width:100%;
  padding:8px 24px;
  display:flex;
  padding-top:10px;
  font-weight:400;
  color:var(--gray3)
}

.stickyMessageBanner .superior-like{
  margin-left:8px;
  margin-top:1px
}

.primary{
  background:var(--primary-green)
}

.secondary{
  background-color:var(--primary-purple)
}

.divider{
  background-color:var(--gray-light-2);
  height:1px;
  margin-bottom:20px;
  margin-top:-60px;
  position:relative;
  width:100%
}

.divider .arrow-container{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  display:grid;
  height:32px;
  left:3%;
  place-items:center;
  position:absolute;
  transform:translateY(-50%);
  width:32px
}

.stageHeader{
  padding:24px 24px 18px;
  display:flex;
  justify-content:space-between
}

.stageHeader .stage-title{
  font-weight:700;
  font-size:16px;
  color:var(--gray3)
}

.smMultiAllocation__panel-btn{
  background-color:var(--secondary-bg);
  border:1px solid var(--blue-light);
  padding:6px 8px
}

.smMultiAllocation__panel-edit-btn svg{
  transform:scale(0.85)
}

.smMultiAllocation__panel-btn svg{
  transform:scale(0.7)
}

.smMultiAllocation__panel-btn svg path{
  fill:var(--primary)
}

.querySMAllocation{
  height:72vh;
  overflow-y:auto
}

.querySMAllocation input{
  border-color:var(--gray-light-5);
  border-radius:8px
}

.querySMAllocation__btns{
  height:64px
}

.querySMAllocation__btns button{
  width:112px
}

.querySMAllocation .managerOptions{
  max-height:392px;
  overflow:auto;
  width:100%
}

.querySMAllocation .managerOptions .listItem{
  display:flex;
  align-items:center;
  margin-bottom:16px;
  padding-left:8px;
  height:56px;
  margin:0
}

.querySMAllocation .managerOptions .listItem.active{
  font-weight:600;
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:8px;
  color:var(--primary) !important;
  margin-bottom:2px
}

.querySMAllocation .emptyResults{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  font-weight:600;
  text-align:center;
  color:var(--gray);
  height:256px
}

.profileAvatarContainer{
  border-radius:50%
}

.profileAvatarContainer .textInitials{
  align-items:center;
  background:rgba(225,225,234,0.2);
  border-radius:50%;
  color:var(--purple);
  display:flex;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  text-transform:uppercase;
  text-transform:uppercase
}

.profileAvatarContainer .textInitials--small{
  height:24px;
  width:24px
}

.profileAvatarContainer .textInitials--big{
  background-color:var(--purple-dark-1);
  color:var(--white);
  height:32px;
  width:32px
}

.profileAvatarContainer .avatarImg{
  border-radius:50%
}

.profileAvatarContainer .avatarImg--small{
  height:24px;
  width:24px
}

.profileAvatarContainer .avatarImg--big{
  height:32px;
  width:32px
}

.closeRequestBsContent{
  max-height:600px
}

.closeRequestBsContent__form{
  padding-bottom:60px
}

.closeRequestBsContent__form .optionsList label{
  position:relative;
  padding:14px 0
}

.closeRequestBsContent__form .optionsList label input[type='radio']{
  display:none
}

.closeRequestBsContent__form .optionsList label input[type='radio']+span{
  color:var(--text-light);
  height:auto;
  padding:10px 18px;
  position:relative
}

.closeRequestBsContent__form .optionsList label input[type='radio']+span::before{
  border:2px solid var(--gray-light-3);
  border-radius:50%;
  content:'';
  height:20px;
  left:-20px;
  position:absolute;
  width:20px
}

.closeRequestBsContent__form .optionsList label input[type='radio']+span::after{
  border-radius:50%;
  content:'';
  height:10px;
  left:-15px;
  position:absolute;
  top:15px;
  width:10px
}

.closeRequestBsContent__form .optionsList label input[type='radio']:checked+span{
  --text-opacity:1;
  color:#0067E2;
  color:rgba(0, 103, 226, var(--text-opacity));
  font-weight:600
}

.closeRequestBsContent__form .optionsList label input[type='radio']:checked+span::before{
  border:2px solid var(--primary)
}

.closeRequestBsContent__form .optionsList label input[type='radio']:checked+span::after{
  background-color:var(--primary)
}

.closeRequestBsContent__form textarea{
  border-radius:4px
}

.closeRequestBsContent__form textarea::-moz-placeholder{
  color:var(--gray-light-3);
  font-size:14px
}

.closeRequestBsContent__form textarea:-ms-input-placeholder{
  color:var(--gray-light-3);
  font-size:14px
}

.closeRequestBsContent__form textarea::placeholder{
  color:var(--gray-light-3);
  font-size:14px
}

.closeRequestBsContent__form .note{
  margin-left:-24px;
  margin-right:-24px;
  padding:8px 24px
}

.closeRequestBsContent .closeRequestActionBtn{
  flex:1;
  height:40px !important;
  min-width:unset !important;
  width:112px
}

.nudge{
  bottom:16px;
  right:16px;
  z-index:2
}

.nudge .nudgeCTA{
  display:flex
}

.nudge .inactiveNudge *{
  color:rgba(0,103,226,0.5)
}

.nudge .inactiveNudge svg path{
  fill:rgba(0,103,226,0.5)
}

.nudge__scrolled{
  background-color:var(--primary);
  height:48px;
  outline:none;
  width:48px
}

.nudge__scrolled--disabled{
  opacity:0.5
}

.nudge__expanded{
  background-color:var(--primary);
  border-radius:28.8px;
  color:var(--white);
  height:48px;
  outline:none;
  width:95px
}

.nudge__expanded svg{
  margin-right:10px
}

.nudge__expanded--disabled{
  opacity:0.5
}

.nudge__expanded--disabled svg{
  margin-right:5px
}

.nudgeBottomSheet__content{
  min-height:400px
}

.nudgeBottomSheet__content .fabricImage{
  border-radius:4px;
  height:64px;
  -o-object-fit:cover;
     object-fit:cover;
  width:64px
}

.nudgeBottomSheet__content .nudgeComment{
  min-height:56px
}

.nudgeToast{
  align-items:center;
  background-color:var(--text-light);
  border-radius:16px;
  bottom:20px;
  color:var(--white);
  display:flex;
  font-size:12px !important;
  font-weight:600;
  height:32px;
  left:36%;
  padding:0 12px;
  position:fixed
}

.inviteSuppliersOptionsSheet{
  height:96vh
}

.inviteSuppliersOptionsSheet__mappedRequestDetails{
  margin-top:22px;
  white-space:nowrap
}

.inviteSuppliersOptionsSheet__mappedRequestDetails .detailPill{
  background-color:rgba(225,225,234,0.2);
  border-radius:16px;
  margin-left:5px;
  padding:2px 8px
}

.inviteSuppliersOptionsSheet input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.inviteSuppliersOptionsSheet .optionsContainer{
  left:0;
  max-height:calc(100vh - 240px);
  position:absolute;
  width:100vw
}

.inviteSuppliersOptionsSheet .optionsContainer .listItem{
  height:86px;
  margin:0;
  margin-bottom:2px;
  padding:0 24px
}

.inviteSuppliersOptionsSheet .optionsContainer .listItem--active{
  background-color:var(--secondary-bg)
}

.inviteSuppliersOptionsSheet__btns{
  bottom:0;
  height:64px;
  left:0;
  position:absolute;
  width:100%
}

.inviteSuppliersOptionsSheet__btns Button{
  height:40px;
  width:112px
}

.confirmInviteSuppliers{
  height:96vh
}

.confirmInviteSuppliers input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.confirmInviteSuppliers .optionsContainer{
  max-height:calc(100vh - 450px);
  width:100%
}

.confirmInviteSuppliers .optionsContainer .listItem{
  height:56px;
  margin:0;
  padding:0
}

.confirmInviteSuppliers .optionsContainer .listItem--active{
  background-color:var(--secondary-bg)
}

.confirmInviteSuppliers__count{
  background-color:var(--gray-light-2)
}

.confirmInviteSuppliers__btns{
  background:var(--white);
  bottom:0;
  height:56px;
  left:0;
  position:absolute;
  width:100%
}

.confirmInviteSuppliers__btns Button{
  height:40px;
  width:112px
}

.confirmInviteSuppliers .confirmedOptions .optionsContainer{
  padding-bottom:56px
}

.confirmInviteSuppliers .requestSnippet{
  background-color:rgba(225,225,234,0.2);
  left:0;
  margin-left:-24px;
  margin-right:-24px;
  padding:20px
}

.supplierTemplate{
  padding-bottom:16px;
  padding-top:16px;
  width:100%
}

.supplierTemplate__checkbox{
  border-radius:2px;
  height:18px;
  margin:0;
  margin-right:14px;
  width:18px
}

.supplierTemplate input[type='checkbox']:disabled+span::after{
  left:-12px;
  opacity:0.6
}

.supplierTemplate input[type='checkbox']:disabled+span::before{
  border:0
}

.supplierTemplate input[type='checkbox']:not(:checked),.supplierTemplate input[type='checkbox']:checked{
  left:-9999px;
  position:absolute
}

.supplierTemplate [type='checkbox']:not(:checked)+span,.supplierTemplate [type='checkbox']:checked+span{
  padding-left:36px;
  position:relative
}

.supplierTemplate [type='checkbox']:not(:checked)+span::before,.supplierTemplate [type='checkbox']:checked+span::before{
  background:var(--white);
  border:1px solid var(--gray-light-3);
  border-radius:2px;
  content:'';
  height:18px;
  left:0;
  position:absolute;
  top:0;
  width:18px
}

.supplierTemplate [type='checkbox']:not(:checked)+span::after,.supplierTemplate [type='checkbox']:checked+span::after{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTcgMTRMMiA5LjE5MjMxTDMuNCA3Ljg0NjE1TDcgMTEuMzA3N0wxNC42IDRMMTYgNS4zNDYxNUw3IDE0WiIgZmlsbD0iIzAwNjdFMiIvPgo8L3N2Zz4K);
  font-size:1.3em;
  height:18px;
  left:0;
  line-height:0.8;
  position:absolute;
  top:0;
  transition:all 0.2s;
  width:18px
}

.supplierTemplate [type='checkbox']:not(:checked)+span::after{
  opacity:0
}

.supplierTemplate .circleTickIcon{
  margin:0 10px;
  transform:scale(2.4)
}

.supplierTemplate .circleTickIcon rect{
  fill:var(--primary)
}

.inviteSupplierTypeWrapper{
  margin-top:5px;
  padding-left:32px
}

.inviteSupplierTypeWrapper .inviteSupplierType{
  border-radius:24px;
  color:var(--gray);
  margin-top:2px;
  padding:4px 8px
}

.inviteSupplierTypeWrapper .inviteSupplierType--violet{
  background-color:var(--purple-bg)
}

.inviteSupplierTypeWrapper .inviteSupplierType--orange{
  background-color:var(--red-bg-3)
}

.inviteSupplierTypeWrapper .inviteSupplierType:not(:first-child){
  margin-left:8px
}

.inviteSuppliersSheet{
  overflow:hidden
}

.Toastify__toast-container {
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 9999px);
  position: fixed;
  padding: 4px;
  width: 320px;
  box-sizing: border-box;
  color: #fff;
}

.Toastify__toast-container--top-left {
  top: 1em;
  left: 1em;
}

.Toastify__toast-container--top-center {
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
}

.Toastify__toast-container--top-right {
  top: 1em;
  right: 1em;
}

.Toastify__toast-container--bottom-left {
  bottom: 1em;
  left: 1em;
}

.Toastify__toast-container--bottom-center {
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
}

.Toastify__toast-container--bottom-right {
  bottom: 1em;
  right: 1em;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: 0;
    margin: 0;
  }

  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: 0;
    transform: translateX(0);
  }

  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: 0;
    transform: translateX(0);
  }

  .Toastify__toast-container--rtl {
    right: 0;
    left: initial;
  }
}

.Toastify__toast {
  position: relative;
  min-height: 64px;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: 1px;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  max-height: 800px;
  overflow: hidden;
  font-family: sans-serif;
  cursor: pointer;
  direction: ltr;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--dark {
  background: #121212;
  color: #fff;
}

.Toastify__toast--default {
  background: #fff;
  color: #aaa;
}

.Toastify__toast--info {
  background: #3498db;
}

.Toastify__toast--success {
  background: #07bc0c;
}

.Toastify__toast--warning {
  background: #f1c40f;
}

.Toastify__toast--error {
  background: #e74c3c;
}

.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
  }
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
}

.Toastify__close-button--default {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@-webkit-keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 9999;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.7);
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  -webkit-animation: Toastify__trackProgress linear 1 forwards;
          animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
}

.Toastify__progress-bar--default {
  background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}

.Toastify__progress-bar--dark {
  background: #bb86fc;
}

@-webkit-keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

@-webkit-keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

@-webkit-keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

@-webkit-keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

@-webkit-keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@-webkit-keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

@-webkit-keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  -webkit-animation-name: Toastify__bounceInLeft;
          animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  -webkit-animation-name: Toastify__bounceInRight;
          animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  -webkit-animation-name: Toastify__bounceInDown;
          animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  -webkit-animation-name: Toastify__bounceInUp;
          animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  -webkit-animation-name: Toastify__bounceOutLeft;
          animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  -webkit-animation-name: Toastify__bounceOutRight;
          animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  -webkit-animation-name: Toastify__bounceOutUp;
          animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  -webkit-animation-name: Toastify__bounceOutDown;
          animation-name: Toastify__bounceOutDown;
}

@-webkit-keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  -webkit-animation-name: Toastify__zoomIn;
          animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  -webkit-animation-name: Toastify__zoomOut;
          animation-name: Toastify__zoomOut;
}

@-webkit-keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

@-webkit-keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  -webkit-animation-name: Toastify__flipIn;
          animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  -webkit-animation-name: Toastify__flipOut;
          animation-name: Toastify__flipOut;
}

@-webkit-keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(110%, 0, 0);
  }
}

@-webkit-keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-110%, 0, 0);
  }
}

@-webkit-keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@-webkit-keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  -webkit-animation-name: Toastify__slideInLeft;
          animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  -webkit-animation-name: Toastify__slideInRight;
          animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  -webkit-animation-name: Toastify__slideInDown;
          animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  -webkit-animation-name: Toastify__slideInUp;
          animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  -webkit-animation-name: Toastify__slideOutLeft;
          animation-name: Toastify__slideOutLeft;
}

.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  -webkit-animation-name: Toastify__slideOutRight;
          animation-name: Toastify__slideOutRight;
}

.Toastify__slide-exit--top-center {
  -webkit-animation-name: Toastify__slideOutUp;
          animation-name: Toastify__slideOutUp;
}

.Toastify__slide-exit--bottom-center {
  -webkit-animation-name: Toastify__slideOutDown;
          animation-name: Toastify__slideOutDown;
}
.screenContainer{
  position:absolute;
  z-index:1100;
  min-height:100vh;
  height:100%;
  width:100%;
  display:flex;
  background-color:rgba(0,20,45,0.3);
  flex-direction:column;
  justify-content:space-around
}

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

.updateBox{
  height:288px;
  width:288px;
  border-radius:16px;
  position:fixed;
  top:25%;
  z-index:1500;
  background-color:white
}

.popUpContainer{
  position:absolute;
  z-index:1100;
  min-height:100vh;
  height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-around
}

.userName{
  align-items:center;
  color:var(--purple-secondary-dark);
  display:flex;
  text-overflow:ellipsis
}

.userName .mt2px{
  margin-top:2px
}

.userName .ml2px{
  margin-left:2px
}

.supplier-card-header .product-name{
  max-width:64%
}

.supplier-card-header .img-container{
  display:flex;
  justify-content:flex-end;
  max-width:80px;
  text-align:right
}

.supplier-card-header.order-card-header{
  min-height:40px
}

.supplier-card-header .content-container{
  padding-right:0px !important
}

.supplier-card-header .product-img{
  height:40px;
  -o-object-fit:cover;
     object-fit:cover;
  width:48px
}

.supplier-card-header .product-info-item{
  color:var(--gray)
}

.supplier-card-header .product-info-item:not(:first-child)::before{
  color:var(--text);
  content:' \2022';
  font-size:10px;
  margin:0 4px
}

.supplier-card-header .badge{
  background:var(--green);
  border-radius:12px;
  color:var(--white);
  font-size:10px;
  font-weight:600;
  height:18px;
  margin-left:8px;
  padding:0 4px
}

.supplier-card-header .pipe{
  color:var(--border);
  margin:0 8px
}

.supplier-card-header .dot{
  background:var(--text) !important;
  font-size:12px;
  margin:0 4px
}

.supplier-card-header .req-type{
  color:#00142D;
  text-align:right
}

.validateIcon{
  position:relative;
  top:0px;
  transform:scale(1.3)
}

.validateIcon.isValid rect{
  fill:var(--green)
}

.textBreak{
  text-align:center;
  word-break:break-all
}

.optionPickerLabel{
  font-size:12px !important
}

.supplierActionBtns{
  display:flex;
  padding-right:16px
}

.supplierActionBtns__btn{
  position:relative
}

.supplierActionBtns__btn--filterApplied::before{
  background-color:var(--red);
  border-radius:100%;
  content:'';
  height:8px;
  left:16px;
  position:absolute;
  top:8px;
  width:8px
}

.supplierActionBtns__btn .scaleDown{
  transform:scale(0.7)
}

.supplierActionBtns__btn .sortIcon{
  margin-right:5px
}

.supplierActionBtns__btn--inSearch{
  margin-top:-6px !important
}

.supplierActionBtns__btn:hover{
  background-color:transparent !important
}

.timestampMeridiem{
  background-color:var(--chakra-colors-gray-100);
  border-radius:10px;
  display:flex;
  height:48px;
  justify-content:center;
  margin-left:5px;
  text-align:center
}

.timestampMeridiem .timestampMeridiemButton{
  border-radius:10px;
  height:100%;
  text-align:center;
  width:56px
}

.timestampTime{
  align-items:center;
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  margin-right:20px
}

.timestampTime .timestampInput{
  background-color:var(--white);
  border:1px solid;
  border-color:var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:14px;
  font-weight:400;
  height:48px;
  padding:0;
  text-align:center;
  width:48px
}

.form-scrolling{
  max-height:78vh;
  overflow-y:auto;
  scrollbar-width:none
}

.meridiemButton{
  height:100%
}

.meridiemButton.active{
  background-color:var(--secondary-bg);
  color:var(--primary)
}

.heightFull{
  height:100% !important
}

.smOptionsSheet{
  height:72vh;
  overflow-y:auto;
  position:relative
}

.smOptionsSheet::-webkit-scrollbar{
  display:none
}

.smOptionsSheet--replaceSheet{
  height:234px
}

.smOptionsSheet input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.smOptionsSheet__btns{
  bottom:0;
  height:64px;
  left:0;
  position:absolute;
  width:100%
}

.smOptionsSheet__btns Button{
  height:40px;
  width:84px
}

.smOptionsSheet__btns .cancelBtn{
  background-color:var(--white)
}

.smOptionsSheet__btns .assignBtn{
  margin-left:10px
}

.smOptionsSheet__replaceContentWrapper{
  height:122px
}

.smOptionsSheet__replaceContentWrapper .forwardIcon{
  margin:15px 20px 0
}

.smOptionsSheet__replaceContentWrapper .forwardIcon path{
  fill:var(--text-light)
}

.smOptionsContainer{
  left:0;
  max-height:392px;
  overflow:auto;
  position:absolute;
  width:100%
}

.smOptionsContainer::-webkit-scrollbar{
  display:none
}

.smOptionsContainer__selected{
  max-height:296px
}

.smOptionsContainer .listItem{
  display:flex;
  align-items:center;
  margin-bottom:16px;
  padding-left:8px;
  height:56px;
  margin:0;
  padding-left:24px
}

.smOptionsContainer .listItem.active{
  font-weight:600;
  background:var(--secondary-bg);
  color:var(--primary) !important
}

.emptyResults{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  font-weight:600;
  text-align:center;
  color:var(--gray);
  height:256px
}

.smThumb{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%
}

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

.smThumb__content .profileAvatarContainer .textInitials,.smThumb__content .profileAvatarContainer .avatarImg{
  margin-right:16px
}

.smThumb__assignedChip{
  background-color:rgba(225,225,234,0.2);
  border-radius:16px;
  line-height:16px;
  padding:6px 8px
}

.smUserThumbDetail--old{
  opacity:0.6
}

.smUserThumbDetail .profileAvatarContainer .textInitials,.smUserThumbDetail .profileAvatarContainer .avatarImg{
  font-size:15px;
  height:48px;
  margin-bottom:8px;
  width:48px
}

.smUserThumbDetail__statusChip--New{
  background-color:var(--yellow-dull);
  border-radius:16px;
  line-height:14px;
  margin-left:8px;
  margin-top:-3px;
  padding:3px 4px;
  position:relative;
  top:3px;
  width:42px
}

.fab-trigger{
  background:#0067e2;
  border-radius:50%;
  bottom:16px;
  box-shadow:0 0 3px rgba(0,0,0,0.5),3px 3px 3px rgba(0,0,0,0.25);
  color:#fff;
  cursor:default;
  display:inline-block;
  outline:none;
  position:fixed;
  right:16px;
  text-align:center;
  width:auto;
  z-index:1000
}

.fab-trigger svg{
  transform:scale(1.2)
}

.fab-trigger svg path{
  fill:var(--white)
}

.fab-trigger--active{
  border-radius:100%;
  height:48px !important;
  padding:0 !important;
  width:48px !important
}

.fab-trigger--scrolled{
  border-radius:100%;
  height:48px !important;
  padding:0 !important;
  width:48px !important
}

.fab-trigger__text{
  margin-left:8px
}

@-moz-document url-prefix(){
  .fab-trigger{
    bottom:48px
  }
}

.child{
  bottom:0;
  display:none;
  opacity:0;
  outline:none;
  position:fixed;
  right:16px;
  transition:all 0.6s;
  z-index:1000
}

.fabItems .child:nth-child(1){
  bottom:88px
}

.fabItems .child:nth-child(2){
  bottom:152px
}

.fabItems .child:nth-child(3){
  bottom:216px
}

@-moz-document url-prefix(){
  .fabItems .child:nth-child(1){
    bottom:120px
  }

  .fabItems .child:nth-child(2){
    bottom:184px
  }

  .fabItems .child:nth-child(3){
    bottom:248px
  }
}

.revealingFab.active .child{
  display:flex;
  opacity:1
}

.revealingFab.active .backdrop{
  display:block
}

.fab-trigger{
  align-items:center;
  border-radius:24px;
  display:flex;
  justify-content:center;
  padding:16px;
  position:fixed;
  transition:width 0.2s;
  z-index:1000
}

.backdrop{
  background:var(--text);
  display:none;
  height:100%;
  left:0;
  opacity:0.4;
  position:fixed;
  top:0;
  width:100%;
  z-index:999
}

@media (min-width: 1024px){
  .fab-trigger{
    right:calc(30% + 16px)
  }

  .revealingFab.active .child{
    right:calc(30% + 16px)
  }
}

.gst-bottomsheet .productionAttachments{
  border:1px dashed var(--border);
  border:0;
  height:56px;
  margin-bottom:12px
}

.gst-bottomsheet .productionAttachments>:first-child{
  border-right:1px dashed var(--border)
}

.gst-bottomsheet .productionAttachments .attachedFileWrapper,.gst-bottomsheet .productionAttachments .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.gst-bottomsheet .productionAttachments .attachedFileWrapper{
  background:var(--secondary-bg);
  height:56px
}

.gst-bottomsheet .productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.gst-bottomsheet .productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.gst-bottomsheet .heading-row{
  padding:24px 0;
  padding-top:6px
}

.gst-bottomsheet .heading{
  color:var(--text-light);
  font-weight:700
}

.gst-bottomsheet .button-container{
  margin-top:28px;
  padding:8px 0
}

.gst-bottomsheet .button-container button{
  height:40px
}

.gst-bottomsheet .exist-error-msg{
  color:var(--red)
}

.gst-bottomsheet .input{
  padding-left:15px
}

.gst-bottomsheet .button-container>button{
  font-size:16px;
  font-weight:bold
}

.quoteCard .locationIcon{
  transform:translateX(-4px) scale(0.75)
}

.quoteCard .tagCta{
  background:var(--secondary-bg);
  padding:8px;
  color:var(--primary);
  width:100%;
  border-radius:8px
}

.quoteCard .tagCta .rightChevron{
  margin-top:1px
}

.quoteCard .type{
  font-size:12px;
  background-color:var(--purple-light-opacity);
  border-radius:8px;
  color:var(--gray);
  padding:0 4px;
  display:flex;
  align-items:center
}

.quoteCard .city{
  margin-left:-4px
}

.quoteCard .footer{
  padding-bottom:12px;
  padding-top:12px
}

.quoteCard .menuIcon{
  transform:scale(0.8) rotate(90deg)
}

.quoteCard .menuIcon path{
  fill:var(--gray)
}

.quoteCard .collapeIcon{
  left:-20px;
  position:absolute;
  transform:rotate(-90deg)
}

.quoteCard .collapeIcon.isOpen{
  transform:rotate(0) !important
}

.quoteCard .collapeIcon path{
  fill:var(--primary)
}

.quoteCard .collapeIconCompareView{
  position:absolute;
  top:50%;
  transform:rotate(-90deg)
}

.quoteCard .collapeIconCompareView.isOpen{
  transform:rotate(0) !important
}

.quoteCard .collapeIconCompareView path{
  fill:var(--primary)
}

.quoteCard .accordion{
  transform:rotate(-90deg)
}

.quoteCard .accordion path{
  fill:var(--gray)
}

.quoteCard .inProgressIcon path{
  fill:var(--orange)
}

.quoteCard .approvedIcon{
  transform:scale(0.8)
}

.quoteCard .divider{
  background:var(--gray-light-2);
  height:1px;
  width:calc(100% + 32px)
}

.quoteCard .menuList{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-width:104px;
  position:absolute;
  right:0;
  top:0;
  width:-webkit-max-content;
  width:-moz-max-content;
  width:max-content;
  z-index:1001
}

.quoteCard .menuList .menuItem{
  background-color:var(--white);
  height:44px
}

.quoteCard .menuList .menuItem:first-child{
  border-bottom:1px solid var(--border)
}

.quoteCard .menuList .editIcon,.quoteCard .menuList .discountIcon{
  transform:scale(0.9)
}

.quoteCard .menuList .deleteIcon{
  margin-left:6px;
  transform:scale(1.1)
}

.quoteCard .menuOverlay{
  color:transparent;
  height:100%;
  z-index:4
}

.quoteCard .mr-4{
  margin-right:4px
}

.quoteCard .pl-2{
  padding-left:2px
}

.quoteCard .pt-4{
  padding-top:4px
}

.quoteCard .comment{
  background-color:var(--secondary-bg);
  border-radius:4px;
  color:var(--gray);
  margin-top:16px;
  padding:8px
}

.quoteCard .lable{
  align-items:center;
  background:var(--purple-light-opacity);
  border-radius:4px;
  display:flex;
  flex-direction:row;
  padding:4px;
  position:static
}

.quoteCard .costItem{
  padding-top:16px;
  padding-bottom:16px;
  font-size:12px;
  padding-left:0.4rem
}

.quoteCard .costItem:not(:first-of-type){
  border-top:1px dashed var(--border)
}

.quoteCard .no-border{
  border:none !important
}

.quoteCard .point-contact{
  padding-top:16px;
  padding-bottom:16px;
  font-size:12px;
  padding-left:0.4rem
}

.quoteCard .journeyItem{
  position:relative
}

.quoteCard .journeyItem.multiple:not(:last-child)::after{
  background:var(--gray-light-2);
  content:'';
  height:calc(100% - 12px);
  left:4px;
  position:absolute;
  top:32px;
  width:1px
}

.quoteCard .journeyItem .action{
  margin-bottom:4px;
  position:relative
}

.quoteCard .journeyItem .action::before{
  border:1px solid var(--gray);
  border-radius:50%;
  content:'';
  height:8px;
  left:-16px;
  position:absolute;
  top:6px;
  width:8px
}

.quoteCard .journeyItem .action.red::before{
  background:var(--red)
}

.quoteCard .journeyItem .action.green::before{
  background:var(--green)
}

.quoteCard .statusTag{
  background:var(--secondary-bg);
  border-radius:4px;
  color:var(--blue-2);
  padding:4px 8px
}

.quoteCard .statusTag.rejected{
  background:var(--red-bg-3);
  color:var(--red)
}

.quoteCard .statusTag.submitted,.quoteCard .statusTag.received{
  background:var(--secondary-bg);
  color:var(--blue-2)
}

.quoteCard .statusTag.approved{
  background:var(--green-bg);
  color:var(--green)
}

.quoteCard .confirmedTag{
  display:flex;
  align-items:center;
  font-weight:600;
  background-color:var(--green);
  border-radius:16px;
  color:var(--white);
  font-size:10px;
  min-width:70px;
  padding:1px 4px
}

.quoteCard .confirmedTag svg{
  margin-right:2px
}

.quoteCard .confirmedTag svg circle{
  fill:var(--white)
}

.quoteCard .confirmedTag svg path{
  stroke:var(--green)
}

.quoteCard.minimal{
  box-shadow:0 0 2px rgba(0,103,226,0.12)
}

.quoteCard.minimal .selection{
  background-color:var(--secondary-bg);
  left:-20px;
  position:absolute;
  top:3px
}

.quoteCard.minimal .selection .selectionDot{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:50%;
  height:13.1px;
  width:13.1px
}

.quoteCard.minimal .selection svg{
  transform:scale(1.1)
}

.quoteCard.minimal.selected{
  background-color:var(--secondary-bg)
}

.quoteCard .sample-menu{
  background:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-height:51px;
  padding:16px 8px;
  right:0;
  top:0;
  z-index:100
}

.quoteCard .sample-menu-label{
  color:var(--text-light);
  font-weight:normal;
  margin-left:8px;
  white-space:nowrap
}

.quoteCard .sample-snack-bar{
  height:40px;
  padding:0;
  width:312px
}

.quoteCard .sample-status-menu{
  padding:10px 8px
}

.quoteCard .sample-status-label{
  padding:12px 8px
}

.quoteCard .sample-status{
  padding-bottom:16px
}

.quoteCard .sample-status .label{
  color:var(--orange);
  font-size:12px;
  font-style:italic;
  margin-left:6px
}

.quoteCard .sample-status .label.shared{
  color:var(--green)
}

.quoteCard .sample-status .label.rejected{
  color:var(--red)
}

.quoteCard .sample-overlay{
  height:100%;
  left:0;
  position:fixed;
  top:0;
  width:100%
}

.quoteCard .expires{
  align-items:center;
  background:var(--red-bg);
  border:1px solid var(--red);
  border-radius:16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  gap:4px;
  padding:2px 4px
}

.quoteCard .expires p{
  color:var(--red);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  text-align:center
}

.quoteCard .expired{
  align-items:center;
  background:var(--text-light);
  border:1px solid var(--text-light);
  border-radius:16px;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  gap:4px;
  padding:2px 6px 2px 4px
}

.quoteCard .expired p{
  color:var(--white);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  text-align:center
}

.gidge,.bundled,.jobWork{
  align-items:center;
  border-radius:16px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:2px 4px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
}

.gidge p,.bundled p,.jobWork p{
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  text-align:center
}

.gidge{
  background:var(--red-bg)
}

.gidge p{
  color:var(--orange-dark)
}

.bundled{
  background-color:var(--purple-bg)
}

.bundled p{
  color:var(--purple-dark-2)
}

.jobWork{
  background-color:var(--secondary-bg)
}

.jobWork p{
  color:var(--violet)
}

.quote-supplier{
  align-self:flex-end;
  background-color:rgba(225,225,234,0.2);
  border-radius:8px;
  display:flex;
  align-items:space-between;
  overflow:hidden;
  padding:4px 8px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
}

.quote-supplier h3{
  --webkit-box-orient: vertical;
  color:var(--text-light);
  display:box;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap
}

.quote-supplier .rating-wrapper{
  align-items:center;
  display:flex;
  gap:6px;
  justify-content:space-between;
  margin-top:10px
}

.quote-supplier .rating-wrapper h4{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  max-width:35px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.quote-supplier .rating-wrapper .rating{
  align-items:center;
  display:flex;
  gap:5px
}

.limit-text{
  color:var(--placeholder)
}

.quoteCommentModal{
  height:288px;
  max-width:280px !important;
  overflow:auto
}

.quoteCommentModal .modalContent{
  padding-left:3px
}

.quoteSupplierName{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background-color:var(--purple-light-opacity);
  border-radius:4px;
  line-height:14px;
  max-width:104px;
  padding:4px 8px;
  text-align:right
}

.quoteJourney{
  position:relative
}

.quoteJourney::before{
  border-top:1px solid var(--gray-light-2);
  content:'';
  left:0;
  position:absolute;
  width:calc(100vw - 32px)
}

.daysCount{
  color:var(--text-light);
  margin-left:4px;
  margin-top:1.4px
}

.request-sample-bottomsheet{
  padding-bottom:8px
}

.request-sample-bottomsheet .heading-row{
  padding:24px 0;
  padding-top:6px
}

.request-sample-bottomsheet .heading{
  color:var(--text-light);
  font-weight:700
}

.request-sample-bottomsheet .subtitle{
  color:var(--gray)
}

.request-sample-bottomsheet .button-container{
  margin-top:28px
}

.request-sample-bottomsheet .button-container button{
  height:40px
}

.request-sample-bottomsheet .nowrap{
  white-space:nowrap
}

.confirmOrderButton{
  display:flex;
  flex-direction:row-reverse
}

.title-quoteDetails{
  color:var(--text);
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px
}

.best-tag{
  background-color:var(--orange)
}

.best-tag p{
  color:var(--white)
}

.best-tag{
  align-items:center;
  border-radius:16px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:2px 8px 2px 4px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
}

.best-tag p{
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  padding-left:5px;
  text-align:center
}

.star-icon{
  padding:0 0 1px 1px
}

.bid-green{
  background-color:var(--green-bg)
}

.bid-red{
  background-color:var(--red-bg-3)
}

.quality-guarantee{
  align-items:center;
  border-radius:16px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:4px 8px 4px 4px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  background-color:var(--primary-purple)
}

.quality-guarantee .superior-like{
  margin-right:4px
}

.quality-guarantee p{
  font-weight:600;
  font-size:12px;
  line-height:16px;
  color:var(--violet)
}

.bid-pill{
  align-items:center;
  border-radius:16px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:2px 8px 2px 6px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
}

.bid-pill p{
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px;
  padding-left:5px;
  text-align:center;
  color:var(--blue-voilet)
}

.rupee-icon{
  border-radius:50%
}

.yellow-border{
  border-color:var(--yellow-dull) !important
}

.yellow-border svg{
  background:var(--red-bg)
}

.quoteform-pills{
  align-items:center;
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:flex;
  flex-direction:row;
  justify-content:center;
  padding:0 8px 0 0;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  overflow:hidden
}

.quoteform-pills p{
  color:var(--blue-voilet);
  font-family:Nunito Sans;
  font-weight:600;
  font-size:12px;
  font-style:normal;
  line-height:16px;
  padding:0 6px 0 6px;
  text-align:center
}

.quoteOptionsSheet{
  height:55vh;
  overflow-y:auto
}

.quoteOptionsSheet::-webkit-scrollbar{
  display:none
}

.inner-border-quote-card{
  border:1px solid var(--blue-light);
  border-radius:12px;
  box-sizing:border-box
}

.menu-item{
  font-family:Nunito Sans;
  line-height:16px;
  padding-top:32px
}

.edit-margin-input{
  background-color:var(--purple-light-opacity-33);
  border-radius:8px;
  display:block;
  margin-left:-9px;
  margin-right:-10px;
  margin-top:26px;
  padding:18px 16px 0;
  position:relative
}

.discountBottomSheet{
  height:80vh;
  overflow-y:auto
}

.discountBottomSheet::-webkit-scrollbar{
  display:none
}

.discountBottomSheet .unitSuffix{
  background-color:var(--gray-light-2);
  border-bottom-right-radius:0.25rem;
  border-left:0;
  border-top-right-radius:0.25rem;
  height:46px;
  min-width:70px;
  position:absolute;
  right:1px;
  top:1px
}

.discount-warning{
  color:var(--red);
  font-weight:400
}

.supplierPhoneBottomsheet{
  height:50vh;
  overflow-y:scroll;
  left:-24px;
  position:relative;
  margin-right:-48px
}

.supplierPhoneBottomsheet::-webkit-scrollbar{
  display:none
}

.supplier-price-bg{
  background-color:#F2F8FF
}

.scale-icon{
  transform:scale(1.2)
}

.mb-2px{
  margin-bottom:2px
}

.supplierWithRating{
  align-self:flex-end;
  background-color:var(--purple-light-opacity-33);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:4px 2px 4px 8px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  align-items:flex-end
}

.supplierWithRating .quote-supplier{
  background-color:var(--bg);
  padding:4px
}

.supplierWithRating .quote-supplier h3{
  color:var(--neutralV1)
}

.mt-4px{
  margin-top:4px
}

.yarnCost-info{
  position:relative;
  display:flex
}

.info-icon1{
  margin-right:8px;
  margin-bottom:2px;
  cursor:pointer;
  position:relative
}

.exact-match{
  background:var(--lightGreen);
  color:var(--primaryGreen);
  position:absolute;
  width:100%;
  right:0;
  padding:6px 16px
}

.exact-match-label{
  margin-left:2px
}

.exactMatchBox{
  margin-top:42px
}

.supplier-name-tooltip{
  align-self:flex-end;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  max-width:104px;
  overflow:hidden;
  padding:4px 8px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  margin-left:-6px
}

.supplier-name-tooltip h3{
  --webkit-box-orient: vertical;
  display:box;
  font-family:Nunito Sans;
  font-style:normal;
  line-height:16px;
  overflow:hidden;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap
}

.h-47px{
  height:47px
}

.visualComposition{
  background:rgba(225,225,234,0.2);
  border-radius:8px 0px 0px 8px;
  padding:2px 4px
}

.borderline{
  border-width:0.5px;
  min-width:-webkit-fit-content;
  min-width:-moz-fit-content;
  min-width:fit-content;
  margin-bottom:8px
}

.strtch-width{
  min-width:-webkit-fit-content;
  min-width:-moz-fit-content;
  min-width:fit-content
}

.compositionpadding{
  padding:2px 6px !important
}

.composition-pills{
  align-items:center;
  display:flex;
  flex-direction:row;
  justify-content:start;
  padding:0 8px 0 0;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content;
  overflow:hidden;
  flex-wrap:wrap
}

.composition-pills p{
  color:var(--blue-voilet);
  font-family:Nunito Sans;
  font-weight:600;
  font-size:12px;
  font-style:normal;
  line-height:16px;
  padding:0 6px 0 6px;
  text-align:center
}

.btn{
  background:#F2F8FF;
  padding:3px 10px 3px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  line-height:20px;
  color:#0067E2;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px
}

.bottomSheetContent{
  border-radius:14px 14px 0 0 !important;
  bottom:0;
  margin:0 !important;
  padding:16px 24px 0;
  position:fixed !important;
  top:auto !important;
  width:100% !important;
  min-width:365px !important;
  max-width:100% !important
}

.bottomSheetContent .footerActions{
  margin-right:-16px;
  padding-bottom:8px;
  padding-right:0
}

.bottomSheetContent .footerActions button{
  height:40px
}

.withHandle::after{
  background:var(--gray-light-5);
  border-radius:4px;
  content:'';
  height:4px;
  left:50%;
  position:absolute;
  top:12px;
  transform:translateX(-50%);
  width:40px
}

.withOutHandle::after{
  display:none
}

@media (min-width: 1024px){
  .bottomSheetContent{
    max-width:40% !important
  }
}

.shimmerContainer{
  padding:8px
}

.shimmerContainer .fabric-card-shimmer{
  background-color:var(--white);
  border-radius:8px;
  display:flex;
  height:160px;
  padding:8px
}

.shimmerContainer .fabric-card-shimmer:not(:first-child){
  margin-top:8px
}

.shimmerContainer .fabric-card-shimmer .image{
  background-color:var(--gray-light-2);
  border-radius:4px;
  height:50px;
  margin-right:16px;
  width:60px
}

.shimmerContainer .fabric-card-shimmer .justifySpaceBetween{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px
}

.shimmerContainer .fabric-card-shimmer .location{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin-left:10px
}

.shimmerContainer .fabric-card-shimmer .text{
  background:var(--gray-light-2);
  border-radius:4px
}

.shimmerContainer .fabric-card-shimmer .text.id{
  height:14px;
  width:46px
}

.shimmerContainer .fabric-card-shimmer .text.name{
  height:18px;
  margin-top:4px;
  width:100%
}

.shimmerContainer .fabric-card-shimmer .text.detail{
  height:14px;
  margin-top:8px;
  width:88px
}

.shimmerContainer .fabric-card-shimmer .shine{
  -webkit-animation-duration:1s;
          animation-duration:1s;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  -webkit-animation-name:placeholderShimmer;
          animation-name:placeholderShimmer;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  background:#f6f7f8;
  background-image:linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat:no-repeat;
  background-size:800px 200px;
  display:inline-block;
  position:relative
}

@-webkit-keyframes placeholderShimmer{
  0%{
    background-position:-468px 0
  }

  100%{
    background-position:468px 0
  }
}

@keyframes placeholderShimmer{
  0%{
    background-position:-468px 0
  }

  100%{
    background-position:468px 0
  }
}

.orderHeaders{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative
}

.orderHeaders .orderTabs{
  display:flex;
  align-items:center;
  background:var(--white);
  border-radius:16px
}

.orderHeaders .filterIcon,.orderHeaders .orderTabs{
  margin-top:8px
}

.orderHeaders .filterIcon{
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  background-color:var(--white);
  border-color:var(--gray0 0.2);
  border-radius:16px;
  border-width:1px;
  right:16px;
  top:0
}

.orderHeaders .orderTabs button{
  padding-left:16px;
  padding-right:16px;
  padding-top:8px;
  padding-bottom:8px;
  border-radius:16px;
  color:var(--gray)
}

.orderHeaders .orderTabs button:first-child{
  margin-right:2px
}

.orderHeaders .orderTabs button.active,.orderHeaders .orderTabs button.active:focus{
  font-weight:600;
  background:var(--secondary-bg);
  box-shadow:0 0 2px rgba(0,0,0,0.12) !important;
  color:var(--primary)
}

.orderHeaders .requestOngoingFilter{
  min-width:144px
}

.supplier-card{
  border-radius:12px;
  padding:16px;
  padding-bottom:14px
}

.supplier-card .dot{
  margin:0 8px
}

.supplier-card .value{
  color:var(--gray);
  font-size:12px
}

.supplier-card .profit{
  color:var(--green);
  margin-left:10px
}

.supplier-card .submitted-content{
  background-color:var(--purple-light-opacity);
  border-radius:16px;
  padding-right:8px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
}

.supplier-card-body{
  align-items:center;
  display:flex;
  height:66px
}

.supplier-card-body.with-content{
  height:98px
}

.supplier-card-body.cancelled-card-body{
  height:0;
  margin-bottom:25px;
  margin-top:50px
}

.supplier-card .badge{
  background:var(--green);
  border-radius:12px;
  color:var(--white);
  font-size:10px;
  font-weight:600;
  height:18px;
  padding:0 4px
}

.supplier-card .-mt-8px{
  margin-top:-8px
}

.supplier-card .customer-name{
  color:var(--purple-secondary-dark);
  font-size:12px;
  margin-left:2px;
  margin-right:8px;
  max-width:10rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.supplier-card .hot-request-label{
  color:var(--red);
  font-size:12px;
  margin-left:4px
}

.supplier-card .online-order-label{
  color:var(--primary-teal-1);
  font-size:12px;
  margin-left:4px
}

.hot-request-banner{
  background-color:var(--red-bg);
  left:0;
  min-height:28px;
  padding:4px 16px;
  position:absolute;
  top:0;
  width:100%;
  margin-bottom:4rem
}

.hot-request-banner .right-16px{
  right:16px
}

.online-order-banner{
  background-color:var(--primary-teal-4);
  left:0;
  min-height:28px;
  padding:4px 16px;
  position:absolute;
  top:0;
  width:100%;
  margin-bottom:4rem
}

.online-order-banner .right-16px{
  right:16px
}

.my-12px{
  margin:12px 0
}

.item-num{
  font-size:12px
}

.item-num-container{
  border-radius:8px;
  padding:0 4px
}

.item-num-container-success{
  background:var(--green-bg);
  color:var(--green)
}

.item-num-container-danger{
  background:var(--red-bg-3);
  color:var(--red)
}

.item-num-container-warning{
  background:var(--yellow-bg);
  color:var(--orange)
}

.status-label{
  color:var(--gray);
  font-size:12px
}

.ml-16px{
  margin-left:16px
}

.allocatedText{
  background:var(--yellow-bg);
  border-radius:12px;
  color:var(--orange);
  font-weight:bold;
  margin-bottom:10px;
  padding:2px 10px;
  width:-webkit-fit-content;
  width:-moz-fit-content;
  width:fit-content
}

.supplier-card-footer .product-id{
  color:var(--certifiedPurple);
  font-size:12px
}

.supplier-card-footer .date{
  color:var(--purple-secondary-dark);
  font-size:12px
}

.supplier-card-footer .product-status{
  border-radius:4px;
  margin-left:12px;
  padding:2px 8px
}

.supplier-card-footer .product-status.closed{
  background:var(--red-bg-3);
  color:var(--red)
}

.supplier-card-footer .product-status.submitted{
  background:var(--secondary-bg);
  color:var(--blue-2)
}

.supplier-card-footer .card-btn{
  border-radius:16px;
  color:var(--certifiedPurple);
  font-size:12px;
  font-weight:bold;
  height:28px
}

.supplier-card-footer .card-btn span{
  margin-right:2px
}

.supplier-card-footer .pick-btn{
  padding:6px 8px 6px 2px
}

.supplier-card-footer .submit-btn{
  padding:0 8px
}

.supplier-card-footer .green-pick{
  background:var(--green);
  color:var(--white)
}

.supplier-card-footer .red-pill{
  background:var(--red-bg-3);
  color:var(--red)
}

.supplier-card-footer .green-pill{
  background:var(--green-bg);
  color:var(--green)
}

.supplier-card-footer .yellow-pill{
  background:var(--yellow-bg-2);
  color:var(--orange)
}

.status-footer-pill{
  background:var(--orange);
  border-radius:4px;
  height:20px;
  margin-left:8px;
  padding:4px
}

.status-text{
  color:var(--white);
  font-size:10px;
  font-weight:600;
  margin-left:4px
}

.exact-match-card{
  padding-top:42px
}

.exact-match-card .exact-match{
  background:var(--lightGreen);
  color:var(--primaryGreen);
  position:absolute;
  width:100%;
  right:0;
  top:0;
  padding:6px 16px
}

.exact-match-card .exact-match-label{
  margin-left:2px
}

.factoryFilterBtn{
  left:16px;
  position:absolute !important;
  top:13px
}

.list-bottomsheet{
  padding:22px 0 0 !important
}

.list-bottomsheet-container{
  padding-top:42px
}

.list-bottomsheet-container .bottomSheetContainer{
  max-width:-webkit-max-content;
  max-width:-moz-max-content;
  max-width:max-content
}

.factory-radio-btn{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--gray);
  font-size:14px;
  font-weight:600;
  height:auto;
  padding:10px 22px
}

.factory-radio-btn.active{
  background-color:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary)
}

.factory-filter-header{
  height:46px
}

.filtered-list-container{
  background:var(--secondary-bg);
  height:100vh;
  overflow-y:auto;
  padding:14px 8px 0
}

.factory-filter-bottomsheet{
  max-height:82vh;
  overflow-y:auto
}

.factory-filter-bottomsheet .factory-radio{
  align-items:center;
  display:flex;
  margin:36px 0
}

.factory-filter-bottomsheet .factory-radio:first-child{
  margin-top:16px
}

.factory-filter-bottomsheet .factory-radio-label{
  margin-left:10px
}

.factory-filter-bottomsheet .p-lg{
  margin-top:32px;
  padding:0
}

.factory-filter-bottomsheet .title{
  font-size:14px;
  font-weight:700
}

.scroll-hide::-webkit-scrollbar{
  background:transparent;
  width:0
}

.factory-filter-header{
  background:var(--white);
  height:64px;
  left:0;
  padding:0 24px;
  position:absolute;
  top:0;
  width:100%
}

.scroll-container{
  max-height:82vh;
  overflow-y:auto
}

.scroll-container::-webkit-scrollbar{
  background:transparent;
  width:0
}

.list-scroll-container{
  overflow-y:auto;
  padding-top:36px
}

.list-scroll-container::-webkit-scrollbar{
  background:transparent;
  width:0
}

.filter-list-header{
  background:var(--secondary-bg);
  height:48px;
  left:0;
  padding:0 24px;
  padding-top:4px;
  position:absolute;
  top:20px;
  width:100%
}

.shimmerContainer{
  padding:0 16px
}

.shimmerContainer .fabric-card-shimmer{
  background-color:var(--white);
  border-radius:8px;
  display:flex;
  height:136px;
  padding:12px 8px;
  padding-right:16px
}

.shimmerContainer .fabric-card-shimmer:not(:first-child){
  margin-top:8px
}

.shimmerContainer .fabric-card-shimmer .image{
  background-color:var(--gray-light-2);
  border-radius:4px;
  height:100%;
  margin-right:16px;
  width:88px
}

.shimmerContainer .fabric-card-shimmer .text{
  background:var(--gray-light-2);
  border-radius:4px
}

.shimmerContainer .fabric-card-shimmer .text.id{
  height:14px;
  width:46px
}

.shimmerContainer .fabric-card-shimmer .text.name{
  height:18px;
  margin-top:4px;
  width:100%
}

.shimmerContainer .fabric-card-shimmer .text.detail{
  height:14px;
  margin-top:8px;
  width:88px
}

.shimmerContainer .fabric-card-shimmer .shine{
  -webkit-animation-duration:1s;
          animation-duration:1s;
  -webkit-animation-fill-mode:forwards;
          animation-fill-mode:forwards;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  -webkit-animation-name:placeholderShimmer;
          animation-name:placeholderShimmer;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  background:#f6f7f8;
  background-image:linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat:no-repeat;
  background-size:800px 200px;
  display:inline-block;
  position:relative
}

@-webkit-keyframes placeholderShimmer{
  0%{
    background-position:-468px 0
  }

  100%{
    background-position:468px 0
  }
}

@keyframes placeholderShimmer{
  0%{
    background-position:-468px 0
  }

  100%{
    background-position:468px 0
  }
}

.directInvoiceInfo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:16px 24px;
  gap:8px;
  background:#fffee5
}

.directInvoiceInfo .directInvoiceInfoBody{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px;
  gap:4px
}

.directInvoiceInfo .directInvoiceInfoBody .directInvoiceInfoBodyText{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:20px;
  display:flex;
  align-items:center;
  color:#303c4a
}

.fabricDetailPage .fabricImage{
  max-height:200px;
  -o-object-fit:cover;
     object-fit:cover
}

.fabricDetailPage .quote-placeholder .warning-icon{
  margin-right:8px
}

.fabricDetailPage .quote-placeholder .title{
  margin-bottom:0
}

.fabricDetailPage .title{
  margin-bottom:20px
}

.fabricDetailPage .requestStatus{
  position:absolute;
  font-weight:700;
  background:rgba(0,1,38,0.4);
  border-radius:16px;
  bottom:16px;
  color:var(--white);
  left:24px;
  max-width:calc(100% - 48px);
  padding:4px 8px
}

.fabricDetailPage .preview{
  position:absolute;
  bottom:12px;
  right:35%
}

.fabricDetailPage .color-dot{
  background-color:#03054e;
  height:20px;
  margin-right:8px;
  width:20px
}

.fabricDetailPage .fabricsTab button[aria-selected='true'] svg circle,.fabricDetailPage .fabricsTab button[aria-selected='true'] .details-pending_svg__pending path{
  fill:var(--primary)
}

.fabricDetailPage .fabricsTab .collapeIcon{
  transition:all 0.2s
}

.fabricDetailPage .fabricsTab .collapeIcon.isOpen{
  transform:rotate(180deg)
}

.fabricDetailPage .fabricsTab .tabList{
  background-color:var(--secondary-bg);
  border:0;
  border-radius:24px;
  box-shadow:none;
  height:40px;
  justify-content:space-evenly;
  margin:4px 16px
}

.fabricDetailPage .fabricsTab .tabList button{
  border:0;
  flex:unset;
  padding:12px 8px
}

.fabricDetailPage .fabricsTab .tabList svg{
  margin-right:6px;
  transform:scale(0.75)
}

.fabricDetailPage .fabricsTab .quotesList .quoteCard{
  margin-top:8px
}

.fabricDetailPage .fabricsTab .smGuideTip{
  display:flex;
  justify-content:center
}

.fabricDetailPage .fabricsTab .smGuideTip .text{
  background-color:var(--white);
  border-radius:8px;
  color:var(--purple-secondary-dark);
  padding:8px 4px;
  text-align:center;
  width:100%;
  width:312px
}

.fabricDetailPage .accordion{
  border:0
}

.fabricDetailPage .accordion>button{
  background-color:var(--white);
  border-radius:16px;
  padding:0;
  width:100%
}

.fabricDetailPage .accordion>button svg{
  margin-right:0;
  transform:scale(1.3)
}

.fabricDetailPage .accordion>button svg path{
  fill:var(--text-light)
}

.fabricDetailPage .accordion span{
  padding-right:4px
}

.fabricDetailPage .accordion button[aria-expanded='true'] svg{
  transform:scale(1.3) rotate(180deg)
}

.fabricDetailPage .accordion .accordionPanel{
  padding:0;
  padding-top:24px
}

.fabricDetailPage .quotesPanel{
  background:var(--blue-two);
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 60px - 40px)
}

.fabricDetailPage .quotesPanel .stickyNote{
  position:fixed;
  bottom:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:8px;
  padding-bottom:8px;
  background-color:var(--white)
}

.fabricDetailPage .quotesPanel .stickyNote svg{
  transform:scale(1.67)
}

.fabricDetailPage .createButton,.fabricDetailPage .moveToProductionButton{
  font-weight:700;
  position:fixed;
  margin-left:24px;
  margin-right:24px;
  bottom:8px;
  height:40px;
  width:calc(100% - 48px)
}

.fabricDetailPage .coachMark{
  padding-left:16px;
  padding-right:16px;
  border-radius:8px;
  right:-48px;
  top:52px;
  width:212px;
  z-index:2
}

.fabricDetailPage .coachMark svg{
  width:24px
}

.fabricDetailPage .coachMark::before{
  border:8px solid var(--primary);
  border-left-color:transparent;
  border-right-color:transparent;
  border-top-color:transparent;
  content:'';
  left:50%;
  position:absolute;
  top:-16px
}

.fabricDetailPage .productionPanel{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 60px - 40px)
}

.fabricDetailPage .productionPanel .emptyStateContainer{
  background-color:var(--bg-2)
}

.fabricDetailPage .productionPanel .metadataAccordionButton{
  display:flex;
  font-weight:600;
  justify-content:space-between;
  padding:22px 32px
}

.fabricDetailPage .productionPanel .metadataAccordionButton:hover{
  background-color:var(--white)
}

.fabricDetailPage .productionPanel .metadataAccordionButton+div{
  padding-left:32px;
  padding-right:32px
}

.fabricDetailPage .productionPanel .withBorder{
  border-top:1px solid var(--gray-light-2)
}

.fabricDetailPage .productionPanel .smGuideTip{
  background:var(--bg-2)
}

.fabricDetailPage .productionPanel .smGuideTip .text{
  position:absolute;
  bottom:24px
}

.fabricDetailPage .productionPanel .attachedPo{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding-left:12px;
  padding-right:6px
}

.fabricDetailPage .productionPanel .attachedPo span{
  max-width:122px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:96px
}

.fabricDetailPage .productionPanel .tna-pending{
  align-items:center;
  background:var(--bg-2);
  display:flex;
  flex-direction:column;
  flex-grow:1;
  justify-content:center;
  padding:0 56px
}

.fabricDetailPage .productionPanel .tna-pending .addIcon{
  transform:scale(0.6)
}

.fabricDetailPage .productionPanel .tna-pending .addIcon path{
  fill:var(--white)
}

.fabricDetailPage .productionPanel .tnaSavedMessage{
  background:var(--yellow-bg-2);
  flex-shrink:0;
  height:40px
}

.fabricDetailPage .productionPanel .tnaSavedMessage circle+path+path{
  fill:var(--yellow-bg)
}

.fabricDetailPage .productionPanel .dispatchDelayMessage{
  background:var(--yellow-bg-2);
  flex-shrink:0;
  padding:8px 16px
}

.fabricDetailPage .productionPanel .dispatchDelayMessage .warningIcon path{
  fill:var(--orange)
}

.fabricDetailPage .productionPanel .timelineContainer{
  padding-bottom:80px !important;
  background-color:var(--white)
}

.fabricDetailPage .productionPanel .timelineContainer .separator{
  background-color:var(--gray-light-5);
  height:1px;
  left:-8px;
  position:relative;
  width:100vw
}

.fabricDetailPage .productionPanel .timelineContainer .markReceivedButton{
  background:var(--secondary-bg);
  border-radius:24px;
  box-shadow:0 0 4px 2px rgba(0,103,226,0.1);
  color:var(--primary);
  font-size:14px;
  font-weight:600;
  height:36px;
  padding:0 16px
}

.fabricDetailPage .productionPanel .timelineContainer .markReceivedButton:disabled{
  opacity:0.5
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper{
  padding-bottom:28px;
  position:relative
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper .stage{
  background:var(--red-bg);
  border-radius:4px;
  color:var(--orange-dark);
  display:inline-block;
  margin-left:26px;
  padding:0 4px
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper:not(:first-child){
  padding-top:40px
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper:not(:first-child)::after{
  background-color:var(--gray-light-5);
  content:'';
  height:100%;
  left:5px;
  position:absolute;
  top:30px;
  width:1px
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-creation-ongoing:not(:first-child)::after,.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-creation-complete:not(:first-child)::after{
  background-color:var(--yellow-dull)
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-tnasubmitted:not(:first-child)::after{
  top:18px
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-tnasubmitted.stageWrapper-ongoing:not(:first-child)::after{
  height:105%
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-requestCancelled::after{
  background-color:var(--gray-light-5) !important
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-amView:not(:first-child)::after{
  top:20px
}

.fabricDetailPage .productionPanel .timelineContainer .stageWrapper-sampling:not(:first-child)::after{
  height:0% !important
}

.fabricDetailPage .productionPanel .timelineContainer .step{
  align-items:flex-start;
  display:flex;
  justify-content:space-between;
  margin-bottom:4px;
  padding:12px 16px;
  position:relative;
  margin-bottom:26px
}

.fabricDetailPage .productionPanel .timelineContainer .step:not(:last-child)::after{
  background-color:var(--gray-light-5);
  content:'';
  height:calc(100% + 4px);
  left:20px;
  position:absolute;
  top:30px;
  width:4px
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepHighlighted{
  background-color:var(--white);
  border-radius:40px;
  z-index:1001
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepHighlighted::after{
  background-color:#9a9ea3;
  opacity:0.7
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepHighlighted .circle{
  background-color:var(--orange);
  box-shadow:0 0 0 4px rgba(242,153,74,0.4)
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepHighlighted .step-title{
  color:var(--text);
  font-weight:700
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepSkippable{
  align-items:flex-start
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepSkippable .step-left{
  margin-top:10px
}

.fabricDetailPage .productionPanel .timelineContainer .step.step-tnasubmitted::after{
  top:30px
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepWithAttachments .step-right,.fabricDetailPage .productionPanel .timelineContainer .step.stepWithAttachmentsAndHistory .step-right{
  align-self:flex-start;
  margin-top:16px
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepResubmit .step-right{
  align-self:flex-start;
  margin-top:10px
}

.fabricDetailPage .productionPanel .timelineContainer .step.step-creation-ongoing-am .step-title{
  color:var(--text-light)
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepGreigeInward::after{
  height:0%
}

.fabricDetailPage .productionPanel .timelineContainer .step.stepDelivered::after{
  height:0%
}

.fabricDetailPage .productionPanel .timelineContainer .step .pl-30{
  padding-left:30px
}

.fabricDetailPage .productionPanel .timelineContainer .step .circle{
  background-color:var(--gray-light-5);
  border-radius:50%;
  display:inline-block;
  height:12px;
  margin-right:16px;
  width:12px
}

.fabricDetailPage .productionPanel .timelineContainer .step-title{
  color:var(--gray)
}

.fabricDetailPage .productionPanel .timelineContainer .step-duedate{
  margin-left:30px;
  margin-top:8px
}

.fabricDetailPage .productionPanel .timelineContainer .step-creation-complete .circle{
  background-color:var(--yellow-dull)
}

.fabricDetailPage .productionPanel .timelineContainer .step-creation-complete:not(:last-child)::after{
  background-color:var(--yellow-dull)
}

.fabricDetailPage .productionPanel .timelineContainer .step-creation-ongoing .circle{
  background-color:var(--yellow-dull)
}

.fabricDetailPage .productionPanel .timelineContainer .step-complete .circle{
  background-color:var(--green)
}

.fabricDetailPage .productionPanel .timelineContainer .step-complete:not(:last-child)::after{
  background-color:var(--green)
}

.fabricDetailPage .productionPanel .timelineContainer .step-complete .step-title{
  color:var(--text-light)
}

.fabricDetailPage .productionPanel .timelineContainer .step-ongoing .circle{
  background-color:var(--green);
  box-shadow:0 0 0 4px rgba(39,174,96,0.4);
  position:relative;
  z-index:1
}

.fabricDetailPage .productionPanel .timelineContainer .step-ongoing .step-title{
  color:var(--text);
  font-weight:700
}

.fabricDetailPage .productionPanel .timelineContainer .step-terminated .circle{
  background-color:var(--red);
  position:relative;
  z-index:1
}

.fabricDetailPage .productionPanel .timelineContainer .step-terminated .step-title{
  color:var(--text)
}

.fabricDetailPage .productionPanel .timelineContainer .step.isRequestCancelled::after{
  background-color:var(--gray-light-5)
}

.fabricDetailPage .productionPanel .timelineContainer .step.isRequestCancelled .circle{
  position:relative;
  z-index:1
}

.fabricDetailPage .productionPanel .timelineContainer .step.isRequestCancelled.step-ongoing .circle{
  background-color:var(--red);
  box-shadow:none
}

.fabricDetailPage .productionPanel .timelineContainer .step.isRequestCancelled.step-ongoing .step-title{
  font-weight:600
}

.fabricDetailPage .productionPanel .timelineContainer .step .selectDateButton{
  align-items:center;
  border:1px solid var(--primary);
  border-radius:4px;
  color:var(--primary);
  display:flex;
  font-weight:600;
  height:40px;
  justify-content:center;
  width:128px
}

.fabricDetailPage .productionPanel .timelineContainer .step .editDateButton{
  align-items:center;
  border:1px solid var(--gray-light-2);
  border-radius:4px;
  color:var(--text-light);
  display:flex;
  height:40px;
  justify-content:center;
  width:128px
}

.fabricDetailPage .productionPanel .timelineContainer .step .editDateButton svg{
  margin-left:4px
}

.fabricDetailPage .productionPanel .timelineContainer .step .skippedTag{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--gray-light-2);
  border-radius:4px;
  color:var(--orange);
  height:40px;
  justify-content:center;
  width:128px
}

.fabricDetailPage .productionPanel .timelineContainer .step .selectedDate{
  background:var(--secondary-bg);
  color:var(--primary);
  padding:0 4px
}

.fabricDetailPage .productionPanel .timelineContainer .step .dispatchDelayNotifier{
  align-items:center;
  background:var(--yellow-bg-2);
  border-radius:50%;
  box-shadow:0 0 2px rgba(0,0,0,0.12);
  display:inline-flex;
  height:20px;
  justify-content:center;
  width:20px
}

.fabricDetailPage .productionPanel .timelineContainer .step .step-ontime{
  color:var(--green);
  font-weight:600
}

.fabricDetailPage .productionPanel .timelineContainer .step .step-delayed{
  color:var(--red);
  font-weight:600
}

.fabricDetailPage .productionPanel .timelineContainer .step .step-awaited{
  color:var(--orange);
  font-weight:600
}

.fabricDetailPage .productionPanel .timelineContainer .step .markCompleteButton{
  font-size:12px;
  font-weight:700;
  height:32px;
  padding:0 8px
}

.fabricDetailPage .productionPanel .timelineContainer .step .stepAdditionalInfo{
  margin-left:30px
}

.fabricDetailPage .productionPanel .timelineContainer .step .rating{
  margin-left:28px;
  margin-top:4px
}

.fabricDetailPage .productionPanel .timelineContainer .step .rating .star:not(:last-child){
  margin-right:4px
}

.fabricDetailPage .productionPanel .timelineContainer .step .attachments{
  margin-bottom:22px;
  margin-top:10px
}

.fabricDetailPage .productionPanel .timelineContainer .step .resubmit-flow{
  margin-left:30px
}

.fabricDetailPage .productionPanel .timelineContainer .step .commentPreview{
  align-items:center;
  background:var(--yellow-bg-2);
  border-radius:4px;
  box-shadow:0 0 1px rgba(0,0,0,0.12);
  color:var(--gray);
  display:inline-flex;
  font-size:12px;
  margin-top:6px;
  padding:6px 4px
}

.fabricDetailPage .productionPanel .timelineContainer .step .commentPreview div{
  max-width:200px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.fabricDetailPage .productionPanel .timelineContainer .viewHistoryButton{
  font-size:12px;
  font-weight:600;
  height:32px;
  margin-top:2px;
  padding:0
}

.fabricDetailPage .productionPanel .timelineContainer .viewHistoryButton svg{
  margin-left:8px
}

.fabricDetailPage .productionPanel .timelineContainer .viewHistoryButton svg path{
  fill:var(--primary)
}

.fabricDetailPage .productionPanel .timelineContainer .requestCancelledWrapper{
  margin-left:26px
}

.fabricDetailPage .productionPanel .footerButton{
  flex-grow:1;
  font-weight:700;
  height:40px
}

.fabricDetailPage .productionPanel .footerButton:first-child{
  margin-right:4px
}

.fabricDetailPage .productionPanel .footerButton:last-child{
  margin-left:4px
}

.fabricDetailPage.blue-bg{
  background:var(--blue-two);
  min-height:100vh
}

.fabricDetailPage .hot-req-bar{
  background:var(--red-bg)
}

.stickyNote{
  align-items:center;
  background:var(--yellow-bg-2);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  display:flex;
  justify-content:center;
  padding:5px 24px;
  position:fixed;
  z-index:24
}

.gst-form .gst-bottomsheet .chakra-input{
  padding-left:16px
}

.gst-form .gst-bottomsheet .optionsSheet input{
  padding-left:16px
}

.gst-banner{
  background:var(--yellow-bg-2)
}

.gst-banner .text{
  color:var(--text-light);
  margin-left:10px
}

.gst-banner .chevron{
  margin-top:4px
}

.separator-border{
  border-bottom:1px solid;
  border-collapse:collapse;
  border-color:var(--blue-two);
  content:''
}

.tnaChooseDateBottomSheet .sampleOptions{
  align-items:center;
  border-bottom:1px dashed var(--border);
  display:flex;
  justify-content:center;
  margin:24px 16px 0;
  padding-bottom:16px
}

.tnaChooseDateBottomSheet .sampleOptions .label:not(:last-child){
  margin-right:8px
}

.tnaChooseDateBottomSheet .sampleOptions .label input{
  visibility:hidden;
  width:0
}

.tnaChooseDateBottomSheet .sampleOptions .label span{
  align-items:center;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  display:inline-flex;
  height:40px;
  justify-content:center;
  padding:0 16px;
  position:relative
}

.tnaChooseDateBottomSheet .sampleOptions .label input:checked ~ span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:36px
}

.tnaChooseDateBottomSheet .sampleOptions .label input:checked ~ span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:16px;
  position:absolute;
  top:13px;
  width:12px
}

.tnaChooseDateBottomSheet .openDatePickerButton{
  align-items:center;
  display:flex;
  font-weight:600;
  height:72px;
  padding:0 16px
}

.tnaChooseDateBottomSheet .openDatePickerButton svg{
  margin-left:8px;
  transform:rotate(180deg)
}

.tnaChooseDateBottomSheet .closeButton{
  position:absolute;
  right:16px;
  top:26px;
  z-index:1
}

.tnaChooseDateBottomSheet .closeButton.closeButtonOptionsVisible{
  top:10px
}

.tnaChooseDateBottomSheet .footerButton{
  font-weight:700;
  height:40px;
  width:112px
}

.tnaChooseDateBottomSheet .footerButton:disabled{
  opacity:0.5
}

.tnaChooseDateBottomSheet .attachFileButton{
  border-bottom:1px dashed var(--border);
  color:var(--primary);
  font-weight:600;
  height:48px;
  margin:8px 16px 0;
  width:calc(100% - 32px)
}

.tnaChooseDateBottomSheet .attachments{
  display:flex;
  padding:16px 0
}

.submitTnaModalContainer .modalButton{
  font-weight:700;
  height:40px;
  padding:0 26px
}

.submitTnaModalContainer .modalBody{
  padding-bottom:0;
  padding-top:0
}

.step-footer{
  align-items:center;
  background-color:var(--white);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  display:flex;
  flex-direction:row;
  height:56px;
  padding:8px 24px;
  position:fixed;
  width:100%;
  z-index:100
}

.step-footer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px;
  width:42px
}

.step-footer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

.step-footer .previousStepButton .disabled{
  opacity:0.5
}

.step-footer .previousStepButton svg{
  transform:scale(1.5)
}

.step-footer .step{
  border:1px solid var(--gray-dark);
  border-radius:50%;
  height:8px;
  width:8px
}

.step-footer .step-completed{
  background-color:var(--primary);
  border:1px solid var(--primary);
  border-radius:50%;
  height:8px;
  width:8px
}

.step-footer .step-completed-active{
  border:2px solid var(--primary);
  border-radius:50%;
  height:12px;
  width:12px
}

.step-footer .step-active{
  border:2px solid var(--primary);
  border-radius:50%;
  height:12px;
  width:12px
}

.step-footer .next-button{
  align-items:center;
  background-color:var(--primary);
  border:1px solid var(--primary);
  border-radius:4px;
  color:var(--white);
  cursor:pointer;
  display:flex;
  font-size:16px;
  font-weight:700;
  height:40px;
  justify-content:center;
  padding:12px
}

@media (min-width: 1024px){
  .step-footer{
    width:40%
  }
}

.attachedPo{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding-left:12px;
  padding-right:6px
}

.attachedPo span{
  max-width:122px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.fileAttachments{
  margin-bottom:12px
}

.fileAttachments>:first-child{
  border-right:2px solid var(--white)
}

.fileAttachments .attachedFileWrapper,.fileAttachments .attachFileButton{
  flex-grow:1;
  width:100%
}

.fileAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  height:56px
}

.fileAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px;
  font-size:12px
}

.fileAttachments .attachedFileWrapper .attachedFile div{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.fileAttachments .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px;
  width:100%;
  font-size:12px
}

.fileAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%;
  border:1px dashed var(--border)
}

.line-clamp-2{
  --max-lines: 2;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-height:calc(1.45rem * var(--max-lines));
  overflow:hidden;
  position:relative;
  width:100%
}

.chevron-btn{
  bottom:14px;
  position:absolute;
  right:18px
}

.chevron-btn.up{
  transform:rotate(180deg)
}

.quoteFormStickyBanner{
  background-color:var(--yellow-bg);
  color:var(--text-light);
  padding:12px 24px 16px 24px;
  top:60px;
  z-index:3;
  height:auto
}

.quoteFormStickyBannerNewQuote{
  background-color:var(--blue-two);
  color:var(--text-light);
  padding:8px 24px;
  top:60px;
  z-index:3
}

.bottomSheetDeliverySelection .radioButton input[type='radio'],.bottomSheetDeliverySelection .radioButton input[type='checkbox'],.bottomSheetDeliverySelection .checkboxButton input[type='radio'],.bottomSheetDeliverySelection .checkboxButton input[type='checkbox']{
  display:none
}

.bottomSheetDeliverySelection .radioButton input[type='radio']+span,.bottomSheetDeliverySelection .radioButton input[type='checkbox']+span,.bottomSheetDeliverySelection .checkboxButton input[type='radio']+span,.bottomSheetDeliverySelection .checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.bottomSheetDeliverySelection .radioButton input[type='radio'].selected+span,.bottomSheetDeliverySelection .radioButton input[type='checkbox'].selected+span,.bottomSheetDeliverySelection .checkboxButton input[type='radio'].selected+span,.bottomSheetDeliverySelection .checkboxButton input[type='checkbox'].selected+span{
  border:1px solid rgba(0,103,226,0.5)
}

.bottomSheetDeliverySelection .radioButton input[type='radio']:checked+span,.bottomSheetDeliverySelection .radioButton input[type='checkbox']:checked+span,.bottomSheetDeliverySelection .checkboxButton input[type='radio']:checked+span,.bottomSheetDeliverySelection .checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.bottomSheetDeliverySelection .radioButton input[type='radio']:checked+span::before,.bottomSheetDeliverySelection .radioButton input[type='checkbox']:checked+span::before,.bottomSheetDeliverySelection .checkboxButton input[type='radio']:checked+span::before,.bottomSheetDeliverySelection .checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.bottomSheetDeliverySelection .radioButton input[type='radio']:disabled+span,.bottomSheetDeliverySelection .radioButton input[type='checkbox']:disabled+span,.bottomSheetDeliverySelection .checkboxButton input[type='radio']:disabled+span,.bottomSheetDeliverySelection .checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.warning{
  background-color:#fffee5;
  padding:8px 0 8px 8px
}

.warning .icon{
  flex-shrink:0;
  margin-right:10px
}

.edit-order-coachMark .coachMark{
  padding-left:16px;
  padding-right:16px;
  border-radius:8px;
  right:-4px;
  top:-86px;
  width:212px;
  z-index:2;
  background-color:var(--yellow-bg-2)
}

.edit-order-coachMark .coachMark svg{
  width:24px
}

.edit-order-coachMark .coachMark::before{
  border-bottom:8px solid var(--yellow-bg-2);
  content:'';
  left:50%;
  position:absolute;
  bottom:-16px;
  transform:rotate(180deg)
}

.edit-order-coachMark .coachMark .info-table{
  display:grid;
  grid-template-columns:2.3fr 1fr
}

.edit-order-coachMark .coachMark .info-table tr{
  display:contents
}

.edit-order-coachMark .coachMark .info-table tr:last-of-type td{
  border-bottom:0
}

.edit-order-coachMark .coachMark .info-table td{
  align-items:center;
  border-bottom:dotted 1px var(--border);
  color:var(--gray);
  display:flex;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  gap:4px;
  line-height:14px;
  padding:4px 0;
  text-align:left
}

.edit-order-coachMark .coachMark .info-table td:last-of-type{
  justify-content:right;
  text-align:right
}

.edit-order-coachMark .coachMark .w-unset{
  width:unset !important
}

.edit-modal-container{
  border-radius:16px;
  margin:0 24px;
  padding-bottom:8px
}

.edit-modal-container .modalHeaderContainer{
  align-items:center;
  display:flex;
  height:32px;
  justify-content:space-between;
  margin:16px 24px
}

.edit-modal-container .modalHeaderContainer .modalHeader{
  color:var(--text-light);
  flex:1;
  font-size:16px;
  font-weight:bold;
  padding:0
}

.edit-modal-container .modalBody{
  padding-top:0
}

.edit-modal-container .modalFooter button{
  width:112px
}

.supplierTab{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:400;
  line-height:16px;
  padding:7px 16px;
  text-align:center;
  padding-left:1px
}

.bottom-line{
  border-bottom:1px solid var(--gray-light-5);
  left:-24px;
  min-width:100vw;
  position:absolute;
  right:-24px
}

.type{
  font-size:12px;
  background-color:var(--purple-light-opacity);
  border-radius:4px;
  color:var(--gray);
  padding:0px 4px;
  height:24px;
  gap:2px
}

.select-supplier{
  background-color:var(--secondary-bg);
  color:var(--primary);
  border:1px solid var(--blue-light);
  box-sizing:border-box;
  border-radius:8px;
  margin-left:-4px
}

.select-supplier-height{
  height:40px
}

.supplierTab-active{
  border-bottom:2px solid var(--primary);
  color:var(--primary);
  font-weight:700
}

.rounded-supplier{
  background:var(--white);
  border:1px solid var(gray-light-2);
  box-sizing:border-box;
  border-radius:40px
}

.select-supplier-icon{
  margin-left:8px;
  margin-top:4px
}

.select-supplier-p{
  padding-bottom:4px;
  padding-top:8px
}

.select-supplier-type{
  background-color:var(--white);
  margin-bottom:6px;
  padding:0px 4px;
  height:24px;
  gap:2px
}

.empty-container{
  text-align:center;
  margin-top:6rem
}

.supplier_not_found_container{
  background:var(--blue-two);
  height:60vh;
  margin-left:-30px;
  margin-right:-30px;
  margin-top:-30px;
  display:flex;
  align-items:center;
  justify-content:center
}

.child_no_supplier{
  width:100px;
  height:100px
}

.text-supplier{
  width:182px;
  margin-left:-30px
}

.certified_tag_mt{
  margin-top:5px
}

.assured-text{
  color:var(--primary);
  margin-left:4px;
  font-weight:600
}

.sampleApprovalContainer{
  width:100%;
  display:flex;
  align-items:start;
  flex-direction:column;
  margin-top:-8px;
  color:var(--gray3)
}

.sampleApprovalContainer .heading{
  font-size:16px;
  font-weight:700
}

.sampleApprovalContainer .subContainer{
  width:100%;
  display:flex;
  justify-content:space-between;
  margin-top:20px
}

.sampleApprovalContainer .subContainer .title{
  display:flex;
  align-items:center;
  margin:0;
  font-weight:600;
  font-size:14px
}

.sampleApprovalContainer .subContainer .button{
  display:flex;
  align-items:center;
  background:var(--secondary-bg);
  padding:6px 8px 6px 12px;
  border-radius:16px;
  border:1px solid var(--blue-light);
  font-weight:600;
  color:var(--primary);
  font-size:12px
}

.detailsContainer{
  position:relative
}

.detailsContainer .fabricName{
  margin-top:16px
}

.detailsContainer .exact-match{
  background:var(--lightGreen);
  color:var(--primaryGreen);
  position:absolute;
  width:100%;
  right:0;
  top:-54px;
  padding:6px 16px
}

.detailsContainer .exact-match-label{
  margin-left:2px
}

input.inputField{
  border-color:var(--border)
}

.optionsSheet{
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content
}

.optionsSheet input{
  padding-left:44px
}

.optionsSheet .optionsContainer{
  max-height:280px;
  overflow-x:hidden;
  overflow-y:auto
}

.optionsSheet .optionsContainer .listItem{
  align-items:center;
  display:flex;
  height:40px;
  margin-bottom:8px;
  margin-top:0;
  padding-left:8px
}

.optionsSheet .optionsContainer .listItem.active{
  background:var(--secondary-bg);
  color:var(--primary);
  font-weight:600
}

.optionsSheet.multiSelect{
  overflow-y:auto;
  height:auto
}

.optionsSheet.multiSelect .addIcon{
  margin-right:4px;
  transform:scale(0.7)
}

.optionsSheet .multiSelect__blend{
  grid-column-gap:24px;
  grid-template-columns:1fr 72px
}

.optionsSheet .multiSelect__blend input[type='number']{
  border-radius:8px;
  padding:0 16px
}

.optionsSheet .multiSelect__blend-category{
  flex:1;
  height:48px
}

.optionsSheet .multiSelect__blend-category .select__control{
  border:1px solid var(--border);
  min-height:48px;
  border-radius:8px
}

.optionsSheet .multiSelect__blend-category .select__control--is-focused{
  border-color:var(--primary);
  box-shadow:none
}

.optionsSheet .multiSelect__blend-category .select__menu{
  border:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  z-index:3
}

.optionsSheet .multiSelect__blend-category .select__option{
  border-bottom:1px solid var(--gray-light-5);
  color:var(--text-light);
  height:48px;
  padding:14px 16px
}

.optionsSheet .multiSelect__blend-category .select__option--is-selected{
  background-color:var(--secondary-bg)
}

.optionsSheet .multiSelect__blend-category .select__option--is-focused{
  background-color:var(--white)
}

.optionsSheet .multiSelect__blend-category .select__indicators{
  display:none
}

.colorDot{
  height:20px;
  width:20px
}

.compositionField::-webkit-scrollbar{
  display:none
}

.multiSelect::-webkit-scrollbar{
  display:none
}

.compositionField,.multiSelect{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.compositionField .coachMark{
  top:-78px;
  left:0px;
  background-color:#FFFEE5;
  border-radius:8px;
  z-index:-2
}

.compositionField .coachMark ::after{
  content:'';
  position:absolute;
  display:inline-block;
  width:20px;
  height:20px;
  background-color:#FFFEE5;
  bottom:-10px;
  left:20px;
  transform:rotate(45deg);
  border-radius:2px
}

.right-alignment{
  width:22px !important;
  right:4px !important
}

.errorMessage{
  color:red
}

/* CSS variables. */

:root {
  --PhoneInput-color--focus: #03b2cb;
  --PhoneInputInternationalIconPhone-opacity: 0.8;
  --PhoneInputInternationalIconGlobe-opacity: 0.65;
  --PhoneInputCountrySelect-marginRight: 0.35em;
  --PhoneInputCountrySelectArrow-width: 0.3em;
  --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
  --PhoneInputCountrySelectArrow-borderWidth: 1px;
  --PhoneInputCountrySelectArrow-opacity: 0.45;
  --PhoneInputCountrySelectArrow-color: inherit;
  --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
  --PhoneInputCountrySelectArrow-transform: rotate(45deg);
  --PhoneInputCountryFlag-aspectRatio: 1.5;
  --PhoneInputCountryFlag-height: 1em;
  --PhoneInputCountryFlag-borderWidth: 1px;
  --PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
  --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
  --PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
  /* This is done to stretch the contents of this component. */
  display: flex;
  align-items: center;
}

.PhoneInputInput {
  /* The phone number input stretches to fill all empty space */
  flex: 1;
  /* The phone number input should shrink
	   to make room for the extension input */
  min-width: 0;
}

.PhoneInputCountryIcon {
  width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
  height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
  width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
  /* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
  background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
  /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
  /* Fixes weird vertical space above the flag icon. */
  /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
  display: block;
  /* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
  width: 100%;
  height: 100%;
}

.PhoneInputInternationalIconPhone {
  opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
  opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.PhoneInputCountrySelect[disabled] {
  cursor: default;
}

.PhoneInputCountrySelectArrow {
  display: block;
  content: '';
  width: var(--PhoneInputCountrySelectArrow-width);
  height: var(--PhoneInputCountrySelectArrow-width);
  margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
  border-style: solid;
  border-color: var(--PhoneInputCountrySelectArrow-color);
  border-top-width: 0;
  border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  border-left-width: 0;
  border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  transform: var(--PhoneInputCountrySelectArrow-transform);
  opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneField .inputGroup{
  flex-direction:row-reverse
}

.PhoneField .leftAddon{
  align-items:center;
  background-color:var(--gray-light-2);
  border-color:var(--border);
  border-right:0;
  height:48px;
  padding:0;
  position:relative
}

.PhoneField .leftAddon .countrySelect{
  color:var(--gray);
  padding:0 8px;
  text-transform:capitalize
}

.PhoneField .leftAddon .countrySelect .menuButton{
  align-items:center;
  display:flex;
  justify-content:space-between;
  width:100%
}

.PhoneField .leftAddon .countrySelect img{
  height:24px;
  margin-right:8px;
  width:34px
}

.PhoneField .leftAddon .countryCode{
  background-color:var(--white);
  color:var(--gray);
  font-size:12px;
  height:100%;
  line-height:48px;
  padding-left:8px
}

.PhoneField .phoneNumberField{
  border-bottom-left-radius:0 !important;
  border-left:0;
  border-top-left-radius:0 !important
}

.PhoneField .phoneNumberField:focus{
  box-shadow:none
}

.PhoneField .phoneNumberField:focus+div.leftAddon{
  border-color:var(--primary)
}

.PhoneField .phoneNumberField[aria-invalid=true]+div.leftAddon{
  border-color:var(--red)
}

.PhoneField .countryList{
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  left:-2px !important;
  padding-top:0;
  position:absolute;
  top:-5px !important;
  transform:scale(1.02) !important;
  width:calc(100vw - 50px);
  z-index:3
}

.PhoneField .countryList .country{
  background-color:var(--white);
  border-bottom:1px solid var(--gray-light-5);
  display:flex;
  padding:12px 16px
}

.PhoneField .countryList .h-full{
  height:100% !important
}

.PhoneField .countryList .inputField{
  border:1px solid var(--gray-light-5);
  padding-left:48px;
  width:100%
}

.subForm .coachMark{
  background-color:var(--yellow-bg-2);
  border-radius:8px;
  bottom:34px;
  padding:12px 12px 16px;
  right:63px;
  z-index:2
}

.subForm .coachMark svg{
  width:24px
}

.subForm .coachMark div{
  color:var(--text-light);
  padding-left:12px
}

.subForm .coachMark::after{
  border:8px solid var(--yellow-bg-2);
  border-left-color:transparent;
  border-right-color:transparent;
  border-top-color:transparent;
  bottom:-15px;
  content:'';
  position:absolute;
  right:24px;
  transform:rotateZ(180deg)
}

.courier-patner-name input:disabled{
  opacity:0.8
}

.fabric-quality{
  background-color:var(--blue-two);
  margin-bottom:12px;
  margin-left:-24px;
  margin-right:-24px;
  padding:24px 24px 12px;
  position:relative
}

.fabric-quality .chakra-badge{
  background-color:var(--white)
}

.fabric-quality .mb-lg:last-of-type{
  margin-bottom:0
}

.fabric-quality-heading{
  color:var(--text-light);
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  line-height:20px;
  margin-bottom:24px
}

.edit-margin-input{
  display:none
}

.edit-margin.active{
  background-color:#e1e1ea33;
  margin-left:-25px;
  margin-right:-25px;
  padding:24px 25px 0;
  position:relative
}

.edit-margin.active .edit-margin-input{
  display:block
}

.edit-margin.active .locofast-margin-text .cta{
  display:none
}

.edit-margin .locofast-margin-text{
  align-items:center;
  display:flex;
  justify-content:space-between;
  position:relative;
  top:-20px
}

.edit-margin .locofast-margin-text .description{
  color:#93939f;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px
}

.edit-margin .locofast-margin-text .cta{
  color:#0067e2;
  cursor:pointer;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  line-height:16px;
  text-transform:capitalize
}

.fabric-warning{
  background-color:var(--yellow-bg-2);
  color:var(--text-light);
  display:flex;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  gap:8px;
  line-height:20px;
  margin:-24px;
  margin-bottom:24px;
  padding:10px 24px
}

.info-table{
  display:grid;
  grid-template-columns:2.3fr 1fr
}

.info-table tr{
  display:contents
}

.info-table tr:last-of-type td{
  border-bottom:0
}

.info-table td{
  align-items:center;
  border-bottom:dotted 1px #d4d4d4;
  color:#676773;
  display:flex;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  gap:4px;
  line-height:14px;
  padding:4px 0;
  text-align:left
}

.info-table td:last-of-type{
  justify-content:right;
  text-align:right
}

.w-unset{
  width:unset !important
}

.fabric-cost-label{
  margin-bottom:0
}

.fabric-cost-description{
  color:#93939f;
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  line-height:16px
}

.advance-paid{
  border-radius:8px
}

.locofast-margin-text{
  align-items:center;
  display:flex;
  justify-content:space-between;
  position:relative;
  top:-20px
}

.top{
  top:-4rem
}

.text-color{
  color:var(--primary)
}

.scroll-bar{
  max-height:70vh;
  overflow-y:auto
}

.scroll-bar::-webkit-scrollbar{
  display:none
}

.chevron-down{
  color:var(--primary)
}

.fillPathPrimary path{
  fill:var(--primary);
  width:45px
}

.payment-terms-container{
  border:1px dashed var(--border);
  border-radius:4px;
  display:grid;
  grid-template-columns:50% 50%;
  margin-bottom:24px
}

.payment-terms-container .item{
  border-right:1px dashed var(--border);
  font-size:14px;
  padding:15px;
  text-align:center
}

.payment-terms-container .item:last-child{
  border-right:0
}

.credit-nature-nil{
  border:1px dashed var(--border);
  border-radius:4px;
  display:flex;
  justify-content:center;
  margin-bottom:24px;
  padding:15px
}

.fabric-details{
  background:var(--white);
  border:1px solid var(--gray-light-5);
  border-radius:8px;
  box-shadow:0 0 4px rgba(0,0,0,0.12);
  display:block;
  flex:0.5;
  height:auto;
  width:100%
}

.pills{
  background:var(--purple-light-opacity);
  border-radius:16px;
  padding:2px 8px
}

.grey-color{
  color:var(--gray)
}

.warning-container{
  background-color:var(--yellow-bg-2);
  bottom:0;
  font-family:'Nunito Sans';
  font-size:14px;
  font-style:normal;
  font-weight:400;
  left:0;
  line-height:20px;
  padding:10px 15px 16px 20px
}

.description{
  align-items:flex-start;
  color:var(--text-light);
  display:flex;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  gap:8px;
  line-height:20px
}

.heading{
  color:var(--primary);
  font-family:'Nunito Sans';
  font-size:14px;
  font-style:normal;
  font-weight:700;
  line-height:16px
}

.supplier-card-header .product-name{
  max-width:64%
}

.supplier-card-header .img-container{
  display:flex;
  justify-content:flex-end;
  max-width:80px;
  text-align:right
}

.supplier-card-header.order-card-header{
  min-height:40px
}

.supplier-card-header .content-container{
  padding-right:16px
}

.supplier-card-header .product-img{
  height:40px;
  -o-object-fit:cover;
     object-fit:cover;
  width:48px
}

.supplier-card-header .product-info-item{
  color:var(--gray)
}

.supplier-card-header .product-info-item:not(:first-child)::before{
  color:var(--text);
  content:' \2022';
  font-size:10px;
  margin:0 4px
}

.supplier-card-header .badge{
  background:var(--green);
  border-radius:12px;
  color:var(--white);
  font-size:10px;
  font-weight:600;
  height:18px;
  margin-left:8px;
  padding:0 4px
}

.supplier-card-header .pipe{
  color:var(--border);
  margin:0 8px
}

.supplier-card-header .dot{
  background:var(--text) !important;
  font-size:12px;
  margin:0 4px
}

.supplier-card-header .req-type{
  color:#00142D;
  text-align:right
}

.Greige,.Bundled,.JobWork{
  color:var(--gray)
}

.heightFull{
  height:100% !important
}

input.inputField{
  border-color:var(--border)
}

.optionsSheet{
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content
}

.optionsSheet input{
  padding-left:44px
}

.optionsSheet .optionsContainer{
  max-height:280px;
  overflow-x:hidden;
  overflow-y:auto
}

.optionsSheet .optionsContainer .listItem{
  align-items:center;
  display:flex;
  height:40px;
  margin-bottom:8px;
  margin-top:0;
  padding-left:8px
}

.optionsSheet .optionsContainer .listItem.active{
  background:var(--secondary-bg);
  color:var(--primary);
  font-weight:600
}

.optionsSheet .optionPill .crossButton{
  min-width:0;
  padding-left:8px
}

.optionsSheet .skipAndAddButton{
  align-items:center;
  display:flex;
  justify-content:center;
  padding:12px 0;
  width:100%
}

.optionsSheet.multiSelect{
  overflow:auto
}

.optionsSheet.multiSelect .addIcon{
  margin-right:4px;
  transform:scale(0.7)
}

.optionsSheet .multiSelect__blend{
  grid-column-gap:24px;
  grid-template-columns:1fr 48px
}

.optionsSheet .multiSelect__blend input[type='number']{
  border-radius:4px;
  padding:0 8px
}

.optionsSheet .multiSelect__blend-category{
  flex:1;
  height:48px
}

.optionsSheet .multiSelect__blend-category .select__control{
  border:1px solid var(--border);
  min-height:48px
}

.optionsSheet .multiSelect__blend-category .select__control--is-focused{
  border-color:var(--primary);
  box-shadow:none
}

.optionsSheet .multiSelect__blend-category .select__menu{
  border:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

.optionsSheet .multiSelect__blend-category .select__option{
  border-bottom:1px solid var(--gray-light-5);
  color:var(--text-light);
  height:48px;
  padding:14px 16px
}

.optionsSheet .multiSelect__blend-category .select__option--is-selected{
  background-color:var(--secondary-bg)
}

.optionsSheet .multiSelect__blend-category .select__option--is-focused{
  background-color:var(--white)
}

.optionsSheet .multiSelect__blend-category .select__indicators{
  display:none
}

.optionsSheet.customerOptionsSheet{
  height:auto;
  overflow:auto;
  padding:0 24px
}

.optionsSheet.customerOptionsSheet .sheetTitle{
  background:var(--white);
  height:44px;
  left:16px;
  margin-top:16px;
  position:absolute;
  top:0;
  width:calc(100% - 40px);
  z-index:7
}

.optionsSheet.customerOptionsSheet .customerForm .formContent{
  max-height:52vh;
  padding-bottom:40px
}

.optionsSheet.customerOptionsSheet .listItem{
  height:100%
}

.optionsSheet.customerOptionsSheet .listItem>div{
  flex:1
}

.optionsSheet.customerOptionsSheet .companyCard{
  padding-left:0
}

.optionsSheet.customerOptionsSheet .footerActions{
  margin-right:0
}

.optionsSheet.customerOptionsSheet .stickyBanner{
  background-color:var(--yellow-bg);
  color:var(--text-light);
  margin-left:-24px;
  padding:8px 24px;
  position:-webkit-sticky;
  position:sticky;
  top:28px;
  width:calc(100% + 48px);
  z-index:8
}

.optionsSheet.customerOptionsSheet .footer{
  background-color:var(--white);
  bottom:0;
  position:fixed;
  width:calc(100% - 32px)
}

.optionsSheet.customerOptionsSheet .enter-missing-banner{
  background:var(--yellow-bg-2);
  color:var(--text-light);
  left:0;
  padding:8px 24px;
  position:absolute;
  top:60px;
  width:100%
}

.optionsSheet .customerForm input{
  border-radius:4px;
  padding-left:1rem
}

.emptyResults{
  align-items:center;
  color:var(--gray);
  display:flex;
  flex-direction:column;
  font-size:14px;
  font-weight:600;
  height:256px;
  justify-content:center;
  text-align:center
}

.emptyResults .customAddButton{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:24px;
  color:var(--primary);
  display:flex;
  height:auto;
  padding:6px 8px
}

.emptyResults .customAddButton svg{
  margin-right:8px
}

.emptyResults .customAddButton span{
  white-space:normal;
  width:100%
}

.colorDot{
  height:20px;
  width:20px
}

.datePickerStyles{
  padding:0 0 8px
}

.datePickerStyles .react-datepicker{
  margin-top:16px
}

.verifyDetails footer .iconSize{
  margin-right:10px;
  transform:scale(1.5)
}

.verifyDetails .tabList{
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  margin-bottom:0
}

.verifyDetails .tabList button{
  border-color:var(--white);
  color:var(--gray-light-3);
  font-weight:600;
  line-height:1;
  padding-bottom:16px;
  padding-top:16px
}

.verifyDetails .tabList button[aria-selected='true']{
  border-color:var(--primary);
  color:var(--primary)
}

.verifyDetails .orderDetailsHeader{
  display:flex;
  justify-content:space-between;
  margin-bottom:25px
}

.verifyDetails .attachments{
  border:1px solid #cee4ff
}

.verifyDetails .transformIcon{
  transform:scale(0.7)
}

.verifyDetails .editOrderCTA{
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  line-height:16px
}

.verifyDetails .tabList{
  background:var(--white);
  margin-top:-2px;
  position:fixed;
  z-index:10
}

.verifyDetails .tabList+.chakra-tabs__tab-panels .chakra-tabs__tab-panel{
  padding-top:48px !important
}

.timestampMeridiem{
  background-color:var(--chakra-colors-gray-100);
  border-radius:10px;
  display:flex;
  height:48px;
  justify-content:center;
  margin-left:5px;
  text-align:center
}

.timestampMeridiem .timestampMeridiemButton{
  border-radius:10px;
  height:100%;
  text-align:center;
  width:56px
}

.timestampTime{
  align-items:center;
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  margin-right:20px
}

.timestampTime .timestampInput{
  background-color:var(--white);
  border:1px solid;
  border-color:var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:14px;
  font-weight:400;
  height:48px;
  padding:0;
  text-align:center;
  width:48px
}

.errorText{
  color:var(--red)
}

.crossButton{
  left:8px
}

.btnOrderMarkDispatch{
  border-radius:70px !important;
  bottom:30px;
  font-size:larger !important;
  padding-left:20px;
  padding-right:20px;
  width:auto !important
}

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

.wrapper-for-markinternational .btn-div{
  padding-inline:24px;
  padding-block:8px;
  box-shadow:0px -1px 2px rgba(0,1,38,0.1)
}

.internationalMarkwarehouse::\--webkit-scrollbar{
  display:none
}

#datePick{
  display:none;
  box-shadow:5px 10px #888888
}

#deliveryDate{
  display:none
}

.datepick{
  color:var(--neutralGray2)
}

.internationalMarkwarehouse{
  align-self:center
}

.internationalMarkwarehouse .mb-80px{
  margin-bottom:20px !important
}

.internationalMarkwarehouse .btn-div{
  box-shadow:0px -1px 2px rgba(0,1,38,0.1)
}

.internationalMarkwarehouse ::-webkit-scrollbar{
  display:none
}

.internationalMarkwarehouse .form-div{
  margin-bottom:50px
}

.internationalMarkwarehouse .form-div label{
  font-weight:400;
  font-size:12px;
  color:var(--neutralGray2);
  color:#626870
}

.internationalMarkwarehouse .form-div .fileinput{
  border:2px dashed var(--gray-light);
  padding-block:14px;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center
}

.internationalMarkwarehouse .form-div .fileinput input{
  display:none
}

.internationalMarkwarehouse .form-div .fileinput label{
  cursor:pointer;
  color:var(--primary);
  font-weight:600;
  font-size:14px;
  margin-left:9px
}

.internationalMarkwarehouse .form-div .fileinput .datepick{
  font-weight:600;
  color:var(--neutralGray2);
  font-size:14px
}

.attachFileModal{
  width:100%
}

.attachFileModal .attachFileHeader{
  background-color:#f9faff;
  border-radius:14px 14px 0 0 !important;
  height:72px;
  margin:0;
  padding:24px 8px 24px 24px
}

.attachFileModal .attachFileContainer{
  border:1px solid var(--border);
  border-radius:10px;
  margin-top:8px
}

.attachFileModal .attachFileButton{
  border:0 !important;
  border-radius:8px;
  height:40px;
  text-align:center;
  width:36px !important
}

.return-productionAttachmentsMarkReady{
  border:1px dashed var(--border);
  height:40px;
  margin-bottom:12px
}

.return-productionAttachmentsMarkReady>:first-child{
  border-right:1px dashed var(--border)
}

.return-productionAttachmentsMarkReady .attachedFileWrapper,.return-productionAttachmentsMarkReady .attachFileButton{
  flex-grow:1;
  width:50%;
  margin:0;
  background-color:#ffffff
}

.return-productionAttachmentsMarkReady .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:40px
}

.return-productionAttachmentsMarkReady .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.return-productionAttachmentsMarkReady .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.return-productionAttachmentsMarkReady .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.order-delivery{
  border:1px dashed var(--border);
  border-radius:4px;
  display:grid;
  margin-bottom:24px
}

.order-delivery-item{
  border-right:1px dashed var(--border);
  padding:8px 20px;
  position:relative
}

.order-delivery-item p{
  font-family:Nunito Sans;
  font-style:normal;
  text-align:right;
  padding-top:5px;
  display:flex
}

.order-delivery-item .name{
  color:var(--text-light);
  font-size:12px;
  font-weight:400;
  line-height:16px;
  display:flex
}

.order-delivery-item .items{
  color:var(--gray);
  font-size:12px;
  font-weight:600;
  line-height:16px;
  color:var(--text-light)
}

.courierPartners{
  display:flex;
  flex-flow:wrap
}

.radioButton input[type='radio'],.radioButton input[type='checkbox'],.checkboxButton input[type='radio'],.checkboxButton input[type='checkbox']{
  display:none
}

.radioButton input[type='radio']+span,.radioButton input[type='checkbox']+span,.checkboxButton input[type='radio']+span,.checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.radioButton input[type='radio'].selected+span,.radioButton input[type='checkbox'].selected+span,.checkboxButton input[type='radio'].selected+span,.checkboxButton input[type='checkbox'].selected+span{
  border:1px solid rgba(0,103,226,0.5)
}

.radioButton input[type='radio']:checked+span,.radioButton input[type='checkbox']:checked+span,.checkboxButton input[type='radio']:checked+span,.checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.radioButton input[type='radio']:checked+span::before,.radioButton input[type='checkbox']:checked+span::before,.checkboxButton input[type='radio']:checked+span::before,.checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.radioButton input[type='radio']:disabled+span,.radioButton input[type='checkbox']:disabled+span,.checkboxButton input[type='radio']:disabled+span,.checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.supplierFormContainer .headerContainer{
  box-shadow:0 1px 2px rgba(0,0,0,0.1)
}

.supplierFormContainer .formHeader{
  border:1px solid var(--gray-light-5);
  border-radius:8px;
  padding:8px;
  padding-left:12px
}

.supplierFormContainer footer{
  background:var(--white);
  box-shadow:0 -1px 2px rgba(0,0,0,0.1)
}

.supplierFormContainer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px
}

.supplierFormContainer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

.supplierFormContainer .previousStepButton svg{
  transform:scale(1.5)
}

.supplierFormContainer .nextStepButton svg{
  padding-left:4px
}

.supplierFormContainer .nextStepButton svg path{
  fill:var(--white)
}

.supplierFormContainer .stepsStatus{
  color:var(--gray-light-3);
  font-size:12px;
  line-height:16px;
  padding-bottom:6px
}

.supplierFormContainer .stepsStatus span{
  color:var(--gray)
}

.supplierFormContainer .stepsProgress{
  border-radius:8px 0 0 8px;
  display:flex
}

.supplierFormContainer .stepsProgress div{
  background:var(--gray-light-2);
  height:6px;
  width:12px
}

.supplierFormContainer .stepsProgress div:first-child{
  border-bottom-left-radius:8px;
  border-top-left-radius:8px
}

.supplierFormContainer .stepsProgress div:last-child{
  border-bottom-right-radius:8px;
  border-top-right-radius:8px
}

.supplierFormContainer .stepsProgress div.filled{
  background:var(--primary)
}

.supplierFormContainer .errorMessage{
  color:var(--red);
  font-size:12px
}

.supplierFormContainer .helperText{
  color:var(--gray-light-3);
  font-size:12px
}

.supplierForm label{
  color:var(--gray);
  font-size:12px;
  line-height:16px;
  margin-bottom:12px
}

.supplierForm .validateIcon{
  position:relative;
  top:-6px;
  transform:scale(1.1)
}

.supplierForm .validateIcon.isValid rect{
  fill:var(--green)
}

.supplierForm .validateIcon.isValidPrimary rect{
  fill:var(--primary)
}

.supplierForm .addressContainer input:focus+div{
  display:none
}

.supplierForm .inputField{
  margin-bottom:16px
}

.supplierForm .inputField input{
  border-color:var(--border)
}

.supplierForm .inputField input:focus{
  border-color:var(--primary)
}

.supplierForm .inputField .leftElement{
  align-items:center;
  display:flex;
  height:48px;
  justify-content:space-around;
  padding:0 8px;
  width:40px
}

.supplierForm .inputField .leftElement svg{
  transform:scale(0.9)
}

.supplierForm .inputField .rightElement{
  height:48px;
  width:auto
}

.supplierForm .checkboxField input[type='checkbox']{
  display:none
}

.supplierForm .checkboxField input[type='checkbox']+span{
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:none;
  display:block;
  font-size:14px;
  margin-right:8px;
  padding:10px 16px
}

.supplierForm .checkboxField input[type='checkbox']:checked+span{
  background:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:36px;
  position:relative
}

.supplierForm .checkboxField input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:16px;
  position:absolute;
  top:14px;
  width:12px
}

.supplierForm .checkboxField .optionsList{
  display:flex;
  flex-wrap:wrap
}

.supplierForm .facilityImageButton{
  background:var(--secondary-bg);
  border-radius:8px;
  width:100%
}

.supplierForm .facilityImageButton span{
  line-height:24px
}

.supplierForm .facilityImageButton svg{
  transform:scale(0.5)
}

.supplierForm .facilityImages img{
  border-radius:2px;
  height:40px;
  margin-right:12px;
  width:36px
}

.supplierForm .facilityImages button{
  border:1px dashed var(--primary);
  width:36px
}

.supplierForm .withAddon input{
  border-bottom-right-radius:0;
  border-right-width:0;
  border-top-right-radius:0
}

.supplierForm .sliderField{
  position:relative
}

.supplierForm .sliderField .sliderThumb{
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  height:24px;
  width:24px
}

.supplierForm .sliderField .sliderThumb:focus{
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  outline:none
}

.supplierForm .sliderField .indicators{
  display:flex;
  justify-content:space-between;
  margin-left:2px
}

.supplierForm .sliderField .indicators div{
  border-left:1px solid var(--gray-light-3);
  border-radius:4px;
  height:8px;
  width:1px
}

.supplierForm .sliderField .withEndPointers{
  position:relative
}

.supplierForm .sliderField .withEndPointers::before{
  color:var(--gray-light-3);
  content:'0%';
  position:absolute;
  top:-32px
}

.supplierForm .sliderField .withEndPointers::after{
  color:var(--gray-light-3);
  content:'100%';
  position:absolute;
  right:0;
  top:-32px
}

.supplierForm .sliderField .thumbPercentage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:4px;
  color:var(--primary);
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  left:-16px;
  line-height:16px;
  padding-left:3px;
  position:absolute;
  top:0
}

.supplierForm .sliderField .thumbPercentage svg{
  margin-left:-8px;
  transform:scale(0.5)
}

.supplierForm .sliderField .thumbPercentage svg path{
  fill:var(--primary)
}

.supplierForm .sliderField .left-auto{
  left:auto !important
}

.supplierForm .sliderField .left-0{
  left:0 !important
}

.supplierForm .multiSelectField .multiSelect__control{
  border-color:var(--border);
  box-shadow:none;
  min-height:48px
}

.supplierForm .multiSelectField .multiSelect__indicator{
  display:none
}

.supplierForm .multiSelectField .multiSelect__multi-value{
  background:var(--secondary-bg);
  border-radius:16px
}

.supplierForm .multiSelectField .multiSelect__multi-value__label{
  font-size:14px;
  padding:2px;
  padding-left:8px;
  padding-right:0
}

.supplierForm .multiSelectField .multiSelect__multi-value__remove{
  background-color:var(--secondary-bg);
  border-radius:16px;
  color:var(--gray);
  padding-right:8px
}

.supplierForm .multiSelectField .multiSelect__multi-value__remove svg{
  transform:scale(0.72)
}

.supplierForm .multiSelectField .multiSelect__multi-value__remove svg path{
  d:path("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z") !important;
  fill:var(--gray)
}

.supplierForm .gst-attachment{
  border:1px dashed var(--border);
  border:0;
  height:56px;
  margin-bottom:12px
}

.supplierForm .gst-attachment>:first-child{
  border-right:1px dashed var(--border)
}

.supplierForm .gst-attachment .attachedFileWrapper,.supplierForm .gst-attachment .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.supplierForm .gst-attachment .attachedFileWrapper{
  background:var(--secondary-bg);
  height:56px
}

.supplierForm .gst-attachment .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.supplierForm .gst-attachment .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.supplierFormCapacity{
  margin-bottom:16px
}

.supplierFormCapacity .listItem{
  padding:12px 0;
  z-index:5
}

.supplierFormCapacity .listItem:nth-child(2){
  position:relative
}

.supplierFormCapacity .listItem:nth-child(2)::after{
  bottom:0;
  content:'';
  height:1px;
  left:-24px;
  position:absolute;
  width:100vw
}

.supplierFormCapacity .listItem.active{
  color:var(--primary);
  position:relative;
  z-index:7
}

.supplierFormCapacity .listItem.active::before{
  background:var(--secondary-bg);
  content:'';
  height:100%;
  left:-24px;
  position:absolute;
  top:0;
  width:100vw;
  z-index:-1
}

.supplierFormSlider .footer{
  margin-right:-8px
}

.searchDropdown__selectedOption{
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--placeholder);
  height:48px
}

.searchDropdown__selectedOption_text{
  color:var(--text)
}

.searchDropdown__selectedOption--freezed{
  background-color:var(--gray-light-6)
}

.searchDropdown__optionsList{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  max-height:300px;
  z-index:999
}

.searchDropdown__optionsList .inputField{
  margin:8px auto;
  width:95%
}

.searchDropdown__optionsList .inputField .leftElement{
  height:100%
}

.searchDropdown__options{
  border:1px solid var(--gray-light-5);
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  overflow-y:scroll
}

.moveToProductionSheet{
  padding-left:0 !important;
  padding-right:0 !important
}

.moveToProductionSheet .warning-container{
  background-color:var(--yellow-bg-2);
  bottom:0;
  left:0;
  padding:10px 15px 16px 20px;
  position:fixed;
  right:0;
  z-index:100
}

.moveToProductionSheet .warning-container .description{
  align-items:flex-start;
  color:var(--text-light);
  display:flex;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  gap:8px;
  line-height:20px
}

.moveToProductionSheet .warning-container .cta{
  display:flex;
  gap:1rem;
  justify-content:flex-end;
  margin-top:8px
}

.moveToProductionSheet .warning-container .cta .proceed,.moveToProductionSheet .warning-container .cta .dismiss{
  align-items:center;
  border:1px solid var(--gray);
  border-radius:24px;
  cursor:pointer;
  display:flex;
  gap:8px;
  padding:6px 12px
}

.moveToProductionSheet .orderConfirmation{
  max-height:576px;
  overflow:auto;
  padding:0 24px
}

.moveToProductionSheet .orderConfirmation .warning{
  padding-left:8px;
  padding-top:8px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--border);
  position:relative
}

.moveToProductionSheet .orderConfirmation .productionAttachments{
  border:1px dashed var(--border);
  height:56px;
  margin-bottom:12px
}

.moveToProductionSheet .orderConfirmation .productionAttachments>:first-child{
  border-right:1px dashed var(--border)
}

.moveToProductionSheet .orderConfirmation .productionAttachments .attachedFileWrapper,.moveToProductionSheet .orderConfirmation .productionAttachments .attachFileButton{
  flex-grow:1;
  width:50%
}

.moveToProductionSheet .orderConfirmation .productionAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:56px
}

.moveToProductionSheet .orderConfirmation .productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.moveToProductionSheet .orderConfirmation .productionAttachments .attachedFileWrapper .attachedFile div{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.moveToProductionSheet .orderConfirmation .productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.moveToProductionSheet .customerForm{
  max-height:65vh;
  overflow-y:auto;
  padding:0 24px
}

.moveToProductionSheet .customerForm label{
  color:var(--text-light);
  font-size:12px
}

.moveToProductionSheet .customerForm .countryTemplate{
  height:48px;
  padding:14px 8px 14px 16px
}

.moveToProductionSheet .customerForm .countryTemplate:not(:first-of-type){
  border-top:1px solid var(--gray-light-5)
}

.moveToProductionSheet .customerForm .formGroup{
  margin-bottom:16px;
  margin-top:16px
}

.moveToProductionSheet .customerForm+footer button[type='submit']{
  width:112px
}

.moveToProductionSheet .warning{
  background:var(--yellow-bg-2)
}

.moveToProductionSheet .warning svg{
  margin-right:4px
}

.moveToProductionSheet .warning>*{
  color:var(--text-light)
}

.moveToProductionSheet .footerActions{
  margin:0 !important;
  padding:8px 24px !important
}

.confirmOrderFab{
  transform:scale(1.67)
}

.confirmOrderFab circle{
  fill:var(--primary)
}

.type-heading{
  background-color:var(--white);
  color:var(--gray);
  display:grid;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  padding:0.5rem;
  place-items:center;
  text-transform:capitalize
}

.two-columns{
  display:grid;
  grid-template-columns:repeat(2, 1fr)
}

.heading{
  color:#676773;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:600;
  line-height:16px;
  padding-top:10px;
  text-align:center
}

.emptyState{
  display:grid;
  padding:1.5rem 0;
  place-items:center
}

.confirm-order-bottom-sheet .wrapper-conatiner-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr)
}

.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row{
  display:contents
}

.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row .name,.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row .value{
  padding:12px 0
}

.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row .name{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  line-height:20px
}

.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row .value{
  align-items:center;
  color:var(--text-light);
  display:flex;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:600;
  justify-content:flex-end;
  line-height:20px;
  text-align:right
}

.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row .value .info{
  cursor:pointer;
  margin-right:8px
}

.confirm-order-bottom-sheet .wrapper-conatiner-row .conatiner-row .value span{
  color:var(--gray-light-3);
  font-weight:normal;
  line-height:19px;
  text-transform:lowercase
}

.confirm-order-bottom-sheet .warning-container{
  background-color:var(--yellow-bg-2);
  bottom:0;
  left:0;
  padding:10px 15px 16px 20px;
  position:fixed;
  right:0;
  z-index:100
}

.confirm-order-bottom-sheet .warning-container .description{
  align-items:flex-start;
  color:var(--text-light);
  display:flex;
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:normal;
  gap:8px;
  line-height:20px
}

.confirm-order-bottom-sheet .warning-container .cta{
  display:flex;
  gap:1rem;
  justify-content:flex-end;
  margin-top:8px
}

.confirm-order-bottom-sheet .warning-container .cta .proceed,.confirm-order-bottom-sheet .warning-container .cta .dismiss{
  align-items:center;
  border:1px solid var(--gray);
  border-radius:24px;
  cursor:pointer;
  display:flex;
  gap:8px;
  padding:6px 12px
}

.confirm-order-bottom-sheet .time-container-wrapper{
  position:relative
}

.confirm-order-bottom-sheet .time-container-wrapper .top-arrow{
  border-bottom:12px solid var(--purple-light-opacity-33);
  border-left:14.5px solid transparent;
  border-right:14.5px solid transparent;
  height:0;
  position:absolute;
  right:54px;
  top:1px;
  width:0
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container{
  align-items:flex-start;
  -webkit-animation:visible 500ms forwards;
          animation:visible 500ms forwards;
  background-color:var(--purple-light-opacity);
  border-radius:8px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  justify-items:center;
  margin-top:12px;
  opacity:0;
  padding:16px
}

@-webkit-keyframes visible{
  0%{
    opacity:0
  }

  100%{
    opacity:1
  }
}

@keyframes visible{
  0%{
    opacity:0
  }

  100%{
    opacity:1
  }
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row{
  display:contents
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-heading{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:normal;
  justify-self:center;
  line-height:16px;
  margin:8px 0;
  text-align:center
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-heading:first-of-type{
  justify-self:flex-start
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-heading:last-of-type{
  justify-self:flex-end
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-value{
  color:var(--text-light);
  font-family:Nunito Sans;
  font-size:14px;
  font-style:normal;
  font-weight:600;
  justify-self:center;
  line-height:19px;
  text-align:center;
  text-align:center
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-value:first-of-type{
  justify-self:flex-start
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-value:last-of-type{
  justify-self:flex-end
}

.confirm-order-bottom-sheet .time-container-wrapper .time-container-row-value span{
  color:var(--gray-light-3);
  font-size:14px;
  font-weight:normal;
  line-height:16px;
  text-transform:lowercase
}

.orderNotPlacefooter{
  box-shadow:inset 0px 1px 0px rgba(0,1,38,0.1)
}

.customToast{
  background-color:var(--text-light);
  height:40px;
  left:50%;
  top:60px;
  transform:translateX(-50%);
  width:312px;
  z-index:200
}

.customToast .toast-content{
  padding:0 16px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%
}

.dot-separated-info{
  display:flex;
  align-items:center;
  gap:4px
}

.dot-separated-info .info-text{
  color:#626870;
  font-weight:400;
  font-size:12px
}

.dot-separated-info .dot{
  background-color:#00142D;
  width:3px;
  height:3px;
  border-radius:50%;
  margin-left:4px;
  margin-right:4px
}

.subtext{
  color:#626870
}

.sku-list-container{
  max-height:calc(3 * 105px)
}

.sku-item-selected{
  color:#0067E2
}

.warehouse-popover.scrollable{
  max-height:300px;
  overflow-y:auto
}

.sku-box{
  box-shadow:0px 0px 3px #0067E21F;
  background-color:transparent
}

.sku-box.selected{
  background-color:#F2F8FF
}

.seperator-div{
  color:#D4D4D4
}

.price-number{
  color:#00142D
}

.custom-box{
  display:flex;
  margin-top:2rem;
  font-weight:600;
  background-color:#303C4A;
  padding:12px;
  color:#FFFFFF;
  border-radius:12px;
  box-shadow:0px 0px 3px rgba(0,186,226,0.12)
}

.filePreview{
  position:relative
}

.filePreview header{
  position:absolute
}

.filePreview img{
  height:100vh;
  width:100vw
}

section.filePreviewModalContent{
  border-radius:0;
  margin:0 !important;
  max-width:100%;
  padding-bottom:0;
  width:100vw
}

section.filePreviewModalContent .modalHeaderContainer{
  height:0;
  margin:0
}

section.filePreviewModalContent .modalHeaderContainer+div{
  padding:0
}

section.filePreviewModalContent header{
  align-items:center;
  background:rgba(255,255,255,0.5);
  display:flex;
  padding:18px 24px;
  width:100%
}

section.filePreviewModalContent header span{
  font-size:16px
}

section.filePreviewModalContent .deleteButton{
  align-items:center;
  background:var(--secondary-bg);
  border-color:transparent;
  border-radius:24px;
  bottom:24px;
  display:flex;
  height:40px;
  padding:8px 16px;
  position:absolute;
  z-index:999
}

section.filePreviewModalContent .deleteButton svg{
  margin-right:4px
}

section.filePreviewModalContent .closeButton{
  align-items:center;
  background:var(--secondary-bg);
  border-color:transparent;
  border-radius:24px;
  bottom:24px;
  display:flex;
  height:40px;
  padding:8px 16px;
  position:absolute
}

section.filePreviewModalContent .closeButton svg{
  transform:scale(0.75)
}

section.filePreviewModalContent .closeButton svg path{
  fill:var(--gray)
}

.supplierUsersWrappper .emptyStateContainer .title{
  display:none
}

.supplierUsersWrappper .emptyStateContainer p:nth-of-type(2){
  margin-bottom:16px
}

.supplierUsersWrappper .emptyStateContainer button{
  height:40px;
  width:109px
}

.supplierUsersWrappper .emptyStateContainer svg{
  margin-bottom:1.5px;
  margin-right:8px
}

.supplierUsersWrappper__emptySupplierUsers{
  align-items:center;
  background-color:rgba(225,225,234,0.2);
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  min-height:calc(100vh - 114px)
}

.supplierUsersWrappper__card{
  border-bottom:1px solid var(--gray-light-2);
  padding-bottom:17.5px;
  padding-top:17.5px
}

.supplierUsersWrappper__card .supplierUserName{
  margin-bottom:6px
}

.supplierUsersWrappper__card .profileAvatarContainer .textInitials,.supplierUsersWrappper__card .profileAvatarContainer img{
  font-size:20px;
  height:56px;
  margin-right:16px;
  width:56px
}

.supplierUsersWrappper__card .icon{
  margin-right:8px
}

.supplierUsersWrappper__card .icon path{
  fill:var(--gray)
}

.supplierUsersWrappper .addSupplierUserIcon{
  background-color:var(--primary);
  border-radius:100%;
  bottom:32px;
  height:48px;
  right:16px;
  width:48px;
  z-index:2
}

.supplierUsersWrappper .addSupplierUserIcon svg{
  transform:scale(1.4)
}

.supplierCategoryDetail__category:not(:first-child){
  border-top:1px dashed var(--border);
  padding-top:18px
}

.supplierCategoryDetail__category .categoryWidths__widthChip{
  background-color:rgba(225,225,234,0.2);
  border-radius:4px;
  padding:2px 8px
}

.supplierCategoryDetail__category .subCategories__subCategoryChip{
  background-color:var(--secondary-bg);
  border-radius:16px;
  padding:4px 8px
}

.inputLeftElement{
  border-bottom-left-radius:4px;
  border-top-left-radius:4px;
  margin:1px;
  width:67px !important;
  height:45px !important
}

.inputLeftElement2{
  margin-left:75px;
  width:22px
}

.inputLeftElement2 div{
  color:var(--gray);
  font-size:12px
}

.inputMobile{
  padding-left:125px !important;
  width:100% !important;
  border-color:var(--border);
  border-radius:4px;
  border-width:1px;
  color:var(--text-light)
}

.actionButtonsContainer{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  width:100%
}

.actionButtonSlash{
  color:var(--gray-light-3);
  font-size:14;
  font-weight:600
}

.actionButton{
  background:none !important;
  color:var(--primary) !important;
  padding:8px
}

.actionButton:hover{
  background:none
}

.actionButtonResend{
  padding-left:0;
  padding-right:6px
}

.otpInput input{
  border-color:var(--border);
  border-radius:4px;
  border-width:1px;
  color:var(--text-light);
  font-weight:600;
  height:48px;
  outline:none;
  width:56px !important
}

.otpInput input:focus{
  border-color:var(--primary)
}

.actionButtonsContainer{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  width:100%
}

.toastContainerSuccess{
  background-color:var(--text-light);
  border-radius:4px;
  height:40px;
  width:100%
}

.toastContainerError{
  background-color:var(--red);
  border-radius:4px;
  height:40px;
  width:100%
}

.creditPeriodDetails{
  overflow-y:auto
}

.creditPeriodDetails--replaceSheet{
  height:100px
}

.creditPeriodDetails input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.creditPeriodDetails__btns{
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  height:64px;
  position:fixed
}

.creditPeriodDetails__btns .cancelBtn{
  font-weight:700
}

.creditPeriodDetails__btns .assignBtn{
  margin-left:24px
}

.creditPeriodDetails__replaceContentWrapper{
  height:122px
}

.creditPeriodDetails__replaceContentWrapper .forwardIcon{
  margin:15px 20px 0
}

.creditPeriodDetails__replaceContentWrapper .forwardIcon path{
  fill:var(--text-light)
}

.creditPeriodDetails .fabricPill{
  border-color:var(--blue-light);
  padding:8px;
  width:74px
}

.description{
  align-items:flex-start;
  background-color:var(--yellow-bg-2);
  color:var(--text-light);
  display:flex;
  line-height:20px
}

.radioButton input[type='radio'],.radioButton input[type='checkbox'],.checkboxButton input[type='radio'],.checkboxButton input[type='checkbox']{
  display:none
}

.radioButton input[type='radio']+span,.radioButton input[type='checkbox']+span,.checkboxButton input[type='radio']+span,.checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  line-height:20px;
  margin-right:8px;
  padding:10px 24px 10px 23px;
  white-space:nowrap
}

.radioButton input[type='radio']:checked+span,.radioButton input[type='checkbox']:checked+span,.checkboxButton input[type='radio']:checked+span,.checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border:0;
  color:var(--primary);
  font-weight:600;
  height:40px;
  position:relative;
  align-items:center
}

.radioButton input[type='radio']:checked+span::before,.radioButton input[type='checkbox']:checked+span::before,.checkboxButton input[type='radio']:checked+span::before,.checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:6px;
  position:absolute;
  top:14px;
  width:12px
}

.radioButton input[type='radio']:checked+span.twentyPercentPill::before,.radioButton input[type='checkbox']:checked+span.twentyPercentPill::before,.checkboxButton input[type='radio']:checked+span.twentyPercentPill::before,.checkboxButton input[type='checkbox']:checked+span.twentyPercentPill::before{
  left:16px;
  top:10px
}

.radioButton input[type='radio']:disabled+span,.radioButton input[type='checkbox']:disabled+span,.checkboxButton input[type='radio']:disabled+span,.checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.pillCreditWidth{
  min-width:40px;
  text-align:center
}

.quotesWrapper__supplierWrapper{
  background-color:var(--white);
  position:relative
}

.quotesWrapper__supplierWrapper .expiredTitle{
  font-size:12px;
  --text-opacity:1;
  color:#676773;
  color:rgba(103, 103, 115, var(--text-opacity));
  padding-top:12px;
  padding-bottom:12px;
  padding-left:8px;
  padding-right:8px;
  text-align:center;
  background-color:var(--blue-two)
}

.quotesWrapper__supplierWrapper--awaited .linkBlue{
  font-size:12px
}

.quotesWrapper__supplierWrapper.gst-wrapper{
  padding:0 !important
}

.quotesWrapper .invitedSuppliersAccordion{
  padding:0 16px
}

.quotesWrapper .invitedSuppliersAccordion__item{
  border:0;
  box-shadow:0 0 2px rgba(0,103,226,0.12);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:8px
}

.quotesWrapper .invitedSuppliersAccordion__header{
  padding:0;
  width:auto
}

.quotesWrapper .invitedSuppliersAccordion__header:hover{
  background:transparent
}

.quotesWrapper .invitedSuppliersAccordion__header:focus{
  box-shadow:none
}

.quotesWrapper .invitedSuppliersAccordion__header:disabled{
  margin-left:-8px;
  opacity:1 !important
}

.quotesWrapper .invitedSuppliersAccordion__header[aria-expanded='true'] .collapseIcon{
  transform:rotate(0)
}

.quotesWrapper .invitedSuppliersAccordion__header .collapseIcon{
  left:-20px;
  position:absolute;
  transform:rotate(-90deg)
}

.quotesWrapper .invitedSuppliersAccordion__header .collapseIcon.isOpen{
  transform:rotate(0) !important
}

.quotesWrapper .invitedSuppliersAccordion__header .collapseIcon path{
  fill:var(--primary)
}

.quotesWrapper .invitedSuppliersAccordion__panel button{
  border-radius:32px;
  height:32px;
  padding:0 12px 0 4px
}

.quotesWrapper .invitedSuppliersAccordion__panel svg{
  margin-right:2px;
  transform:scale(0.8)
}

.quotesWrapper .invitedSuppliersAccordion__panel span{
  line-height:20px
}

.quotesWrapper__counts .count{
  background:var(--white);
  border-radius:100%;
  box-shadow:0 0 2px rgba(0,0,0,0.08);
  height:32px;
  width:32px
}

.quotesWrapper .deadlineText{
  color:var(--gray);
  margin-bottom:0;
  margin-right:8px
}

.quotesWrapper .editDeadlineIcon{
  margin-left:2px;
  margin-right:-16px;
  transform:scale(0.7)
}

.quotesWrapper .editDeadlineIcon path{
  fill:var(--primary)
}

.quotesWrapper div.coachMark{
  background-color:var(--yellow-bg-2);
  left:0;
  right:auto;
  top:-32px
}

.quotesWrapper div.coachMark::before{
  border-bottom-color:transparent;
  border-top-color:var(--yellow-bg-2);
  bottom:-16px;
  left:32px;
  top:auto
}

.quotesWrapper div.coachMark svg path:nth-child(1){
  fill:var(--yellow-dull)
}

.quotesWrapper div.coachMark svg path:nth-child(2){
  fill:#ffeedf
}

.quotesWrapper div.coachMark svg path:nth-child(3){
  fill:var(--white)
}

.quotesWrapper .h-40px{
  height:40px !important
}

.quotesWrapper .quote-primary-button{
  background-color:var(--primary);
  color:var(--white);
  height:40px
}

.labelText.rejected{
  color:var(--red)
}

.labelText.approved{
  color:var(--green)
}

.generalCtaWrapper{
  bottom:16px;
  position:fixed;
  width:100% !important;
  min-width:365px !important;
  max-width:100% !important
}

.quoteCtaWrapper{
  background:var(--white);
  bottom:0;
  gap:14px;
  position:absolute;
  width:100% !important;
  min-width:365px !important;
  max-width:100% !important
}

.quoteCtaWrapper:empty{
  display:none
}

.quoteCtaWrapper.blue-bg{
  background:var(--blue-two)
}

.quoteCtaWrapper .h-40px{
  height:40px
}

@media (min-width: 1024px){
  .quoteCtaWrapper,.generalCtaWrapper{
    max-width:40% !important
  }
}

.inviteSuppliersCTA{
  background-color:#0067e2
}

.inviteSuppliersCTA>div{
  border:0;
  bottom:12px !important;
  width:200px
}

.inviteSuppliersCTA>div .chakra-popover__arrow{
  box-shadow:none !important
}

.inviteSuppliersCTA>div .chakra-popover__body{
  color:var(--white);
  padding:4px 8px
}

.infoWrapper{
  position:relative
}

.infoWrapper__icon:hover+.infoWrapper__text{
  display:block
}

.infoWrapper__text{
  background-color:var(--yellow-bg-2);
  border-radius:8px;
  display:none;
  padding:12px 16px;
  position:absolute;
  right:36px;
  top:-28px;
  width:265px
}

.infoWrapper__text::before{
  border:10px solid transparent;
  border-left:10px solid var(--yellow-bg-2);
  content:'';
  height:0;
  position:absolute;
  right:-20px;
  top:30px;
  width:0
}

.label-count{
  background-color:var(--white);
  border-radius:100%;
  box-shadow:0 0 2px rgba(0,0,0,0.08);
  height:24px;
  width:24px
}

.quote-placeholder__subTitle{
  color:var(--purple-secondary-dark);
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  max-width:85%
}

.quote-placeholder .removeSMButton{
  display:flex;
  align-items:center;
  margin-top:8px
}

.quote-fab{
  background:#0067e2;
  border-radius:24px;
  bottom:16px;
  box-shadow:0 0 3px rgba(0,0,0,0.5),3px 3px 3px rgba(0,0,0,0.25);
  color:#fff;
  cursor:default;
  height:48px;
  outline:none;
  position:fixed;
  right:16px;
  text-align:center;
  width:145px;
  z-index:1000
}

.quote-fab svg path{
  fill:var(--white)
}

.quote-fab__text{
  margin-left:8px
}

.nudgeDetails{
  bottom:-16px;
  margin-bottom:80px;
  z-index:1
}

.managerTabs .chakra-tabs__tablist{
  overflow-x:auto;
  overflow-y:hidden
}

.managerTabs .chakra-tabs__tablist::-webkit-scrollbar{
  display:none
}

.managerTabs .chakra-tabs__tab{
  border:1px solid transparent;
  color:var(--gray);
  font-size:12px;
  font-weight:normal;
  margin-bottom:16px;
  white-space:nowrap
}

.managerTabs .chakra-tabs__tab[aria-selected='true']{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  color:var(--primary);
  position:relative
}

.managerTabs .chakra-tabs__tab[aria-selected='true'] svg path{
  fill:var(--primary)
}

.managerTabs .chakra-tabs__tab[aria-selected='true']::after{
  border:14px solid transparent;
  border-bottom-color:var(--blue-two);
  border-left-color:transparent;
  border-right-color:transparent;
  border-top:0;
  bottom:-20px;
  content:'';
  position:absolute;
  width:30px
}

.managerTabs .chakra-tabs__tab:not(:last-child){
  margin-right:8px
}

.fabButton{
  background-color:var(--white);
  border-radius:8px;
  box-shadow:none;
  height:38px;
  outline:none
}

.fabButton--blue{
  color:var(--primary)
}

.fabButton--red{
  color:var(--red)
}

.fabButton__icon{
  background-color:var(--white);
  border-radius:100%;
  height:40px;
  width:40px
}

.fabButton__icon--blue svg path{
  fill:var(--primary)
}

.fabButton__icon--red svg path{
  fill:var(--red)
}

.fabButton--solid-blue{
  background-color:var(--primary);
  border-radius:24px;
  bottom:16px;
  color:var(--white);
  height:48px;
  right:16px
}

.fabButton--solid-blue:disabled{
  opacity:0.5
}

.fabButton--solid-blue svg path{
  fill:var(--white)
}

.fabButton.disabled{
  opacity:0.5
}

.accountTab{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:12px;
  font-style:normal;
  font-weight:400;
  line-height:16px;
  padding:7px 16px;
  text-align:center
}

.accountTab-active{
  background:var(--white);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary)
}

.box-shadow .css-62fem4:focus{
  box-shadow:none !important
}

.currencyBottomSheet--replaceSheet{
  height:100px
}

.currencyBottomSheet input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.currencyBottomSheet__btns{
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  height:64px;
  left:0;
  position:fixed;
  width:100%
}

.currencyBottomSheet__btns .cancelBtn{
  font-weight:700
}

.currencyBottomSheet__btns .assignBtn{
  margin-left:24px
}

.currencyBottomSheet__replaceContentWrapper{
  height:122px
}

.currencyBottomSheet__replaceContentWrapper .forwardIcon{
  margin:15px 20px 0
}

.currencyBottomSheet__replaceContentWrapper .forwardIcon path{
  fill:var(--text-light)
}

.currencyBottomSheet .fabricPill{
  border-color:var(--blue-light);
  padding:8px;
  width:74px
}

.currencyBottomSheet .warning-note{
  left:-24px
}

.radioButton input[type='radio'],.radioButton input[type='checkbox'],.checkboxButton input[type='radio'],.checkboxButton input[type='checkbox']{
  display:none
}

.radioButton input[type='radio']+span,.radioButton input[type='checkbox']+span,.checkboxButton input[type='radio']+span,.checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  line-height:20px;
  margin-right:8px;
  padding:10px 24px 10px 23px;
  white-space:nowrap
}

.radioButton input[type='radio']:checked+span,.radioButton input[type='checkbox']:checked+span,.checkboxButton input[type='radio']:checked+span,.checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border:0;
  color:var(--primary);
  font-weight:600;
  height:40px;
  position:relative;
  align-items:center
}

.radioButton input[type='radio']:checked+span::before,.radioButton input[type='checkbox']:checked+span::before,.checkboxButton input[type='radio']:checked+span::before,.checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:6px;
  position:absolute;
  top:14px;
  width:12px
}

.radioButton input[type='radio']:disabled+span,.radioButton input[type='checkbox']:disabled+span,.checkboxButton input[type='radio']:disabled+span,.checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.pillCreditWidth{
  min-width:40px;
  text-align:center
}

.heightFull{
  height:100% !important
}

.amOptionsSheet{
  height:72vh;
  overflow-y:auto
}

.amOptionsSheet--replaceSheet{
  height:234px
}

.amOptionsSheet input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.amOptionsSheet__btns{
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  height:64px;
  left:0;
  position:fixed;
  width:100%
}

.amOptionsSheet__btns Button{
  height:40px;
  width:84px
}

.amOptionsSheet__btns .cancelBtn{
  background-color:var(--white)
}

.amOptionsSheet__btns .assignBtn{
  margin-left:10px
}

.amOptionsSheet__replaceContentWrapper{
  height:122px
}

.amOptionsSheet__replaceContentWrapper .forwardIcon{
  margin:15px 20px 0
}

.amOptionsSheet__replaceContentWrapper .forwardIcon path{
  fill:var(--text-light)
}

.amOptionsSheet .fabricPill{
  border-color:var(--blue-light);
  padding:8px;
  width:74px
}

.amOptionsContainer{
  left:0;
  max-height:392px;
  overflow:auto;
  position:absolute;
  width:100%
}

.amOptionsContainer__selected{
  max-height:296px
}

.amOptionsContainer .listItem{
  display:flex;
  align-items:center;
  margin-bottom:16px;
  padding-left:8px;
  height:56px;
  margin:0;
  padding-left:24px;
  padding-right:24px
}

.amOptionsContainer .listItem.active{
  font-weight:600;
  background:var(--secondary-bg);
  color:var(--primary) !important
}

.emptyResults{
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  font-weight:600;
  text-align:center;
  color:var(--gray);
  height:256px
}

.amThumb{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%
}

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

.amThumb__content .profileAvatarContainer .textInitials,.amThumb__content .profileAvatarContainer .avatarImg{
  margin-right:16px
}

.amThumb__assignedChip{
  background-color:rgba(225,225,234,0.2);
  border-radius:16px;
  line-height:16px;
  padding:6px 8px
}

.amUserThumbDetail--old{
  opacity:0.6
}

.amUserThumbDetail .profileAvatarContainer .textInitials,.amUserThumbDetail .profileAvatarContainer .avatarImg{
  font-size:15px;
  height:48px;
  margin-bottom:8px;
  width:48px
}

.amUserThumbDetail__statusChip--New{
  background-color:var(--yellow-dull);
  border-radius:16px;
  line-height:14px;
  margin-left:8px;
  margin-top:-3px;
  padding:3px 4px;
  position:relative;
  top:3px;
  width:42px
}

.additionalDetails{
  height:60vh;
  overflow-y:auto
}

.additionalDetails--replaceSheet{
  height:234px
}

.additionalDetails input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.additionalDetails__btns{
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  height:64px;
  position:fixed
}

.additionalDetails__btns Button{
  height:40px;
  width:84px
}

.additionalDetails__btns .cancelBtn{
  font-weight:700
}

.additionalDetails__btns .assignBtn{
  margin-left:24px
}

.additionalDetails__replaceContentWrapper{
  height:122px
}

.additionalDetails__replaceContentWrapper .forwardIcon{
  margin:15px 20px 0
}

.additionalDetails__replaceContentWrapper .forwardIcon path{
  fill:var(--text-light)
}

.additionalDetails .fabricPill{
  border-color:var(--blue-light);
  padding:8px;
  width:74px
}

.queryEditBtn{
  border:1px solid var(--primary);
  margin:15px 0;
  max-width:475px;
  padding:8px 60px;
  width:100%
}

.queryEditBtn:hover{
  color:var(--primary)
}

.add-pill{
  padding:6px 8px 6px 12px;
  border-radius:16px;
  width:67px;
  height:32px;
  background:var(--secondary-bg);
  color:var(--primary)
}

.add-pill .blue-chevron path{
  fill:var(--primary)
}

.add-pill .rotate-right{
  transform:rotate(-90deg);
  margin-bottom:2px;
  margin-left:4px
}

.info-table td{
  width:7rem
}

.info-table td:first-of-type{
  text-align:left
}

.download{
  border:1px solid var(--blue-light)
}

.invoiceAmountPopOver{
  padding:9px 5.5px
}

.bottomSheetContent .popoverStyles{
  border-radius:12px;
  box-shadow:none !important;
  background:var(--yellow-bg-2)
}

.bottomSheetContent .popoverStyles .popover-arrow{
  background:var(--yellow-bg-2)
}

.popover-body{
  margin-left:185px
}

.rotate{
  transform:rotate(180deg)
}

.infoIcon{
  transform:scale(0.8)
}

.supplier-bottomsheet-details .content{
  min-height:86vh;
  padding:22px 16px 36px
}

.supplier-bottomsheet-details .heading{
  font-size:16px;
  font-weight:700
}

.supplier-bottomsheet-details .details-row{
  gap:8px;
  margin-top:14px
}

.supplier-bottomsheet-details .chevron-icon{
  margin-left:8px
}

.supplier-bottomsheet-details .detail-item{
  background:var(--white);
  border-radius:12px;
  box-shadow:0 0 2px rgba(0,103,226,0.12);
  display:block;
  flex:0.5;
  height:auto;
  padding:12px 16px;
  width:100%
}

.supplier-bottomsheet-details .detail-item-label{
  font-size:12px;
  line-height:16.37px
}

.supplier-bottomsheet-details .detail-item-value{
  color:var(--gray);
  font-size:12px;
  font-weight:normal;
  line-height:16.37px
}

.supplier-bottomsheet-details .detail-item-value::first-letter{
  text-transform:uppercase
}

.supplier-bottomsheet-details .detail-item .mt-4px{
  margin-top:4px
}

.supplier-bottomsheet-details .detail-item .dot{
  color:var(--border);
  margin:0 8px
}

.supplier-bottomsheet-details .quote-requested{
  align-items:center;
  display:flex;
  height:47vh;
  justify-content:center;
  margin-top:18px
}

.supplier-bottomsheet-details .quote-requested-title{
  font-size:16px;
  font-weight:700;
  text-align:center
}

.supplier-bottomsheet-details .quote-requested-subtitle{
  color:var(--gray);
  font-size:14px;
  margin-top:14px
}

.supplier-bottomsheet-details .bottomSheetContainer{
  flex:1;
  max-width:420px
}

.supplier-bottomsheet-details .bottomSheetContent{
  padding:0
}

.fabric-details-bottomsheet{
  padding-top:6px;
  position:relative
}

.fabric-details-bottomsheet .title{
  font-size:14px;
  font-weight:700
}

.fabric-details-bottomsheet .bottomsheet-header{
  background:var(--white);
  height:64px;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:10
}

.fabric-details-bottomsheet .scroll-container{
  max-height:82vh;
  overflow-y:auto
}

.fabric-details-bottomsheet .scroll-container::-webkit-scrollbar{
  background:transparent;
  width:0
}

.btns-container{
  background:var(--white);
  bottom:20px;
  gap:24px;
  left:50%;
  position:absolute;
  transform:translateX(-50%);
  width:96%
}

.btns-container button{
  flex:1
}

.taxes-extra{
  color:var(--gray);
  font-size:12px;
  margin-left:16px
}

.mt-10px{
  margin-top:10px
}

.query-details-bottomsheet{
  height:488px
}

.fabric-details-bottomsheet-container{
  padding-left:0;
  padding-right:0
}

.fabric-details-bottomsheet-container .bottomsheet-header{
  padding-left:24px;
  padding-right:24px
}

footer{
  background-color:var(--white);
  box-shadow:0 -1px 2px rgba(0,0,0,0.1)
}

footer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px
}

footer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

footer .previousStepButton svg{
  transform:scale(1.5)
}

footer .nextStepButton svg{
  padding-left:4px
}

footer .nextStepButton svg path{
  fill:var(--white)
}

footer .stepsStatus{
  color:var(--gray-light-3);
  font-size:12px;
  line-height:16px;
  padding-bottom:6px
}

footer .stepsStatus span{
  color:var(--gray)
}

footer .stepsProgress{
  border-radius:8px 0 0 8px;
  display:flex
}

footer .stepsProgress div{
  background:var(--gray-light-2);
  height:6px;
  width:25px
}

footer .stepsProgress div:first-child{
  border-bottom-left-radius:8px;
  border-top-left-radius:8px
}

footer .stepsProgress div:last-child{
  border-bottom-right-radius:8px;
  border-top-right-radius:8px
}

footer .stepsProgress div.filled{
  background:var(--primary)
}

.supplier-header{
  background:var(--white)
}

.supplier-header .image-container{
  border-radius:50%;
  height:32px;
  margin-left:16px;
  overflow:hidden;
  position:relative;
  width:32px
}

.supplier-header .image{
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  position:absolute;
  width:100%
}

.supplier-header .info{
  margin-left:16px
}

.supplier-header .name{
  font-size:14px;
  font-weight:600
}

.supplier-header .id{
  color:var(--gray);
  font-size:12px
}

.supplier-header.image-open{
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  height:288px
}

.supplier-order-detail{
  background:var(--blue-two);
  min-height:100vh
}

.directInvoiceInfo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:16px 24px;
  gap:8px;
  background:#fffee5
}

.directInvoiceInfo .directInvoiceInfoBody{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0px;
  gap:4px
}

.directInvoiceInfo .directInvoiceInfoBody .directInvoiceInfoBodyText{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-size:14px;
  line-height:20px;
  display:flex;
  align-items:center;
  color:#303c4a
}

.supplier-steppers .step{
  align-items:flex-start;
  display:flex;
  min-height:72px;
  position:relative
}

.supplier-steppers .title{
  color:var(--text-light);
  font-size:14px;
  font-weight:600;
  margin-left:16px;
  margin-top:-2px
}

.supplier-steppers .circle{
  background:var(--green);
  border:2.5px solid var(--blue-two);
  border-radius:100%;
  height:16px;
  text-align:center;
  width:16px;
  z-index:20
}

.supplier-steppers .circle.inactive{
  background:var(--border)
}

.supplier-steppers .circle.progress{
  background:var(--white);
  border:3.5px solid var(--green-bg-3)
}

.supplier-steppers .circle.cancelled{
  background:var(--red)
}

.supplier-steppers .line::after{
  background:var(--border);
  content:'';
  height:100%;
  left:6px;
  position:absolute;
  width:4px;
  z-index:0
}

.supplier-steppers .line.complete::after{
  background:var(--green-bg-3)
}

.supplier-steppers .step:last-child .line::after{
  display:none
}

.supplier-steppers .order-date{
  color:var(--text-light);
  font-size:12px;
  padding:0;
  margin-left:16px
}

.supplier-steppers .dispatch-date{
  color:var(--gray);
  font-size:12px
}

.sticky-cancelled-note{
  background:var(--white);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  left:0;
  margin:0 auto;
  padding:8px 16px;
  position:fixed;
  text-align:center;
  width:100%
}

.sticky-cancelled-note p{
  color:var(--purple-secondary-dark)
}

.sticky-cancelled-note .reason{
  font-weight:700;
  margin-left:4px
}

.address__wrapper .chakra-form-control{
  margin:0 0 2px
}

.address__wrapper .radioField--whiteBg span{
  background-color:var(--white)
}

.address__wrapper .radioField input[type='radio']{
  display:none
}

.address__wrapper .radioField input[type='radio']+span{
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:none;
  display:block;
  font-size:14px;
  margin-right:16px;
  padding:10px 16px
}

.address__wrapper .radioField input[type='radio']:checked+span{
  background:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary);
  padding-left:36px;
  position:relative
}

.address__wrapper .radioField input[type='radio']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:16px;
  position:absolute;
  top:14px;
  width:12px
}

.address__wrapper .radioField .optionsList{
  display:flex;
  flex-wrap:wrap
}

.address__wrapper .searchDropdown__selectedOption{
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--placeholder);
  height:48px
}

.address__wrapper .searchDropdown__selectedOption_text{
  color:var(--text)
}

.address__wrapper .searchDropdown__selectedOption--freezed{
  background-color:var(--gray-light-6)
}

.address__wrapper .searchDropdown__optionsList{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  max-height:300px;
  z-index:999
}

.address__wrapper .searchDropdown__optionsList .inputField{
  margin:8px auto;
  width:95%
}

.address__wrapper .searchDropdown__optionsList .inputField .leftElement{
  height:100%
}

.address__wrapper .searchDropdown__options{
  border:1px solid var(--gray-light-5);
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
  overflow-y:scroll
}

.address__wrapper .searchDropdown .requiredText{
  background:rgba(255,250,245,0.5);
  border-radius:8px;
  color:var(--orange);
  margin-right:10px;
  padding:2px 4px
}

.add-address{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--secondary-bg);
  border-radius:24px;
  width:148px;
  height:44px;
  margin-top:24px
}

.default-address{
  display:inline-flex;
  background-color:var(--red-bg);
  width:57px;
  height:24px;
  color:var(--orange);
  border-radius:24px;
  align-items:center;
  justify-content:center
}

.changeAddress{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOS45OTk4NCIgY3k9IjkuOTk5OTkiIHI9IjguMzMzMzMiIGZpbGw9IiMwMDY3RTIiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC4wODk2IDcuMDc3NDFDMTQuNDE1IDcuNDAyODUgMTQuNDE1IDcuOTMwNDkgMTQuMDg5NiA4LjI1NTkyTDkuNDIyOTEgMTIuOTIyNkM5LjA5NzQ4IDEzLjI0OCA4LjU2OTg0IDEzLjI0OCA4LjI0NDQgMTIuOTIyNkw1LjkxMTA3IDEwLjU4OTNDNS41ODU2MyAxMC4yNjM4IDUuNTg1NjMgOS43MzYxOCA1LjkxMTA3IDkuNDEwNzVDNi4yMzY1MSA5LjA4NTMxIDYuNzY0MTQgOS4wODUzMSA3LjA4OTU4IDkuNDEwNzVMOC44MzM2NiAxMS4xNTQ4TDEyLjkxMTEgNy4wNzc0MUMxMy4yMzY1IDYuNzUxOTggMTMuNzY0MSA2Ljc1MTk4IDE0LjA4OTYgNy4wNzc0MVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=)
}

.changeAddress.changeAddress[data-focus]{
  box-shadow:none
}

.changeAddress.changeAddress[data-checked]{
  background:none;
  border-color:none;
  color:none
}

.unchecked-icon{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04Ljk5OTg0IDAuNjY2NjcyQzQuNDE2NSAwLjY2NjY3MiAwLjY2NjUwNCA0LjQxNjY3IDAuNjY2NTA0IDlDMC42NjY1MDQgMTMuNTgzMyA0LjQxNjUgMTcuMzMzMyA4Ljk5OTg0IDE3LjMzMzNDMTMuNTgzMiAxNy4zMzMzIDE3LjMzMzIgMTMuNTgzMyAxNy4zMzMyIDlDMTcuMzMzMiA0LjQxNjY3IDEzLjU4MzIgMC42NjY2NzIgOC45OTk4NCAwLjY2NjY3MlpNOC45OTk4NCAxNS42NjY3QzUuMzMzMTcgMTUuNjY2NyAyLjMzMzE3IDEyLjY2NjcgMi4zMzMxNyA5QzIuMzMzMTcgNS4zMzMzNCA1LjMzMzE3IDIuMzMzMzQgOC45OTk4NCAyLjMzMzM0QzEyLjY2NjUgMi4zMzMzNCAxNS42NjY1IDUuMzMzMzQgMTUuNjY2NSA5QzE1LjY2NjUgMTIuNjY2NyAxMi42NjY1IDE1LjY2NjcgOC45OTk4NCAxNS42NjY3WiIgZmlsbD0iIzkzOTM5RiIvPgo8L3N2Zz4K)
}

.selected-item-border-color{
  border:1px solid var(--primary);
  box-sizing:border-box;
  border-radius:12px
}

.chakra-radio__label{
  width:95%
}

.bmSheetAddressContent{
  height:60vh !important;
  overflow-y:auto
}

.bmSheetAddressContent::-webkit-scrollbar{
  display:none
}

.bmSheetAddressContent .bmSheetHeader{
  background:var(--white);
  height:40px;
  width:calc(100% - 48px);
  z-index:10
}

.bmSheetAddressContent .bmSheetBody{
  margin:56px 0
}


.supplierDetails .tabList{
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  margin-bottom:0
}

.supplierDetails .tabList button{
  border-color:var(--white);
  color:var(--gray-light-3);
  font-weight:600;
  padding:16px 0
}

.supplierDetails .tabList button:nth-child(1){
  width:33%
}

.supplierDetails .tabList button:nth-child(2){
  width:33%
}

.supplierDetails .tabList button:nth-child(3){
  width:33%
}

.supplierDetails .tabList button[aria-selected='true']{
  border-color:var(--primary);
  color:var(--primary)
}

.supplierDetails .rowChildren{
  max-width:200px
}

.supplierDetails .accordionItem{
  border-color:var(--gray-light-2)
}

.supplierDetails .accordionItem button[aria-expanded='true'] svg{
  transform:scale(1.5) rotate(180deg)
}

.supplierDetails .accordionButton{
  color:var(--gray);
  font-weight:600;
  padding:24px
}

.supplierDetails .accordionButton svg{
  transform:scale(1.5)
}

.supplierDetails .accordionButton svg path{
  fill:var(--text-light)
}

.supplierDetails .accordionButton:hover{
  background:var(--white)
}

.supplierDetails .accordionPanel{
  padding-left:24px;
  padding-right:24px
}

.supplierDetails .facilityImage{
  border-radius:4px;
  height:40px;
  margin-right:8px;
  width:36px
}

.supplierDetails .pill{
  background:var(--secondary-bg);
  border-radius:16px;
  color:var(--text-light);
  margin-bottom:8px;
  padding:4px 8px;
  text-align:center;
  font-weight:600
}

.supplierDetails .pill-2{
  background:var(--purple-light-opacity);
  border-radius:16px;
  color:var(--text-light);
  margin-bottom:8px;
  padding:4px 8px;
  text-align:center;
  font-weight:600
}

.supplierDetails .bottom-border{
  border-color:var(--gray-light-2);
  border-style:solid;
  border-top-width:1px
}

.smAllocationSheet{
  bottom:0;
  height:56px;
  left:0;
  width:100%
}

.smAllocationSheet .bottomSheetContainer{
  text-align:end;
  width:100%
}

.smAllocationSheet Button{
  height:40px;
  width:112px
}

.attachedPo{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding-left:12px;
  padding-right:6px
}

.attachedPo span{
  max-width:122px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mb-0{
  margin-bottom:0 !important
}

.switchButton .chakra-switch__track{
  background:var(--blue-light)
}

.switchButton .chakra-switch__track[data-checked]{
  background:var(--primary)
}

.switchButton .chakra-switch__track[data-focus]{
  box-shadow:none
}

.chakra-form-control .statusText{
  color:var(--gray);
  font-size:12px !important;
  font-weight:600
}

.transformIcon{
  transform:scale(0.8)
}

.dividerWidth{
  border-color:var(--gray-light-7) !important;
  margin:0 auto;
  max-width:100%
}

.heightFull{
  height:100% !important
}

.rpSheet--replaceSheet{
  height:234px
}

.rpSheet .radioButton input[type='radio']{
  display:none
}

.rpSheet .radioButton input[type='radio']+span{
  background-color:var(--blue-two);
  border-radius:24px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:auto;
  margin-right:8px;
  padding:10px 16px;
  white-space:nowrap
}

.rpSheet .radioButton input[type='radio']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:28px;
  position:relative
}

.rpSheet .radioButton input[type='radio']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.rpSheet .radioButton input[type='radio']:disabled+span,.rpSheet .radioButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.rpSheet .radioButton.withoutTick input[type='radio']:checked+span,.rpSheet .radioButton.withoutTick input[type='checkbox']:checked+span{
  padding-left:12px
}

.rpSheet .radioButton.withoutTick input[type='radio']:checked+span::before,.rpSheet .radioButton.withoutTick input[type='checkbox']:checked+span::before{
  content:'';
  height:0;
  width:0
}

.rpSheet .productionAttachment{
  border:1px dashed var(--border);
  height:56px;
  margin-bottom:12px
}

.rpSheet .productionAttachment .attachedFileWrapper,.rpSheet .productionAttachment .attachFileButton{
  flex-grow:1;
  width:50%
}

.rpSheet .productionAttachment .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:56px
}

.rpSheet .productionAttachment .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.rpSheet .productionAttachment .attachedFileWrapper .attachedFile div{
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.rpSheet .productionAttachment .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.rpSheet input{
  border-color:var(--gray-light-5);
  border-radius:8px;
  padding-left:44px
}

.rpSheet__btns{
  bottom:0;
  height:64px;
  left:0;
  position:fixed;
  width:100%
}

.rpSheet__btns Button{
  height:40px;
  width:84px
}

.rpSheet__btns .cancelBtn{
  background-color:var(--white);
  width:140px
}

.rpSheet__btns .assignBtn{
  width:140px
}

.rpSheet__replaceContentWrapper{
  height:122px
}

.rpSheet__replaceContentWrapper .forwardIcon{
  margin:15px 20px 0
}

.rpSheet__replaceContentWrapper .forwardIcon path{
  fill:var(--text-light)
}

.rpSheet .fabricPill{
  border-color:var(--blue-light);
  padding:8px;
  width:74px
}

.rpSheet .supplier input[type='radio']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  margin-right:0
}

.rpSheet .supplier input[type='radio']:checked+span{
  background-color:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary);
  padding-left:28px;
  position:relative
}

.rpSheet .supplier input[type='radio']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.padding-left-16{
  padding-left:1rem !important
}

.form-scrolling{
  max-height:80vh;
  overflow-y:auto
}

.form-scrolling::-webkit-scrollbar{
  display:none
}

.attachedPo{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding-left:12px;
  padding-right:6px
}

.fabricsMenu{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-width:104px;
  position:absolute;
  right:15px;
  top:15px;
  z-index:5
}

.fabricsMenu svg path{
  fill:var(--gray)
}

.fabricsMenu .menuItem{
  margin-left:8px;
  margin-right:16px;
  padding:10px 0
}

.fabricsMenu .menuActor{
  display:grid;
  grid-column-gap:8px;
  grid-template-columns:24px 1fr
}

.fabricsMenu--inaction .menuActor{
  display:none
}

.production-attachments{
  border:1px dashed var(--border);
  height:56px;
  margin-bottom:12px
}

.production-attachments>:first-child{
  border-right:1px dashed var(--border)
}

.production-attachments .attached-file-wrapper,.production-attachments .attach-file-button{
  flex-grow:1;
  width:50%
}

.production-attachments .attached-file-wrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:56px
}

.production-attachments .attached-file-wrapper .attached-file-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.production-attachments .attach-file-button{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.certified-tick{
  transform:scale(1.25);
  margin-bottom:8px;
  display:flex;
  align-items:flex-end
}

.fileinput{
  border:2px dashed var(--gray-light);
  padding-block:14px;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center
}

.fileinput input{
  display:none
}

.fileinput label{
  cursor:pointer;
  color:var(--primary);
  font-weight:600;
  font-size:14px;
  margin-left:9px
}

.radioButtonDel input[type='radio'],.radioButtonDel input[type='checkbox']{
  display:none
}

.radioButtonDel input[type='radio']+span,.radioButtonDel input[type='checkbox']+span{
  width:100%;
  margin-right:0;
  max-width:400px;
  border:1px solid #E5E5E5;
  border-radius:8px;
  padding:12px;
  display:flex
}

.radioButtonDel input[type='radio']:checked+span,.radioButtonDel input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border:0;
  color:var(--primary);
  padding:12px;
  font-weight:600;
  position:relative;
  width:100%;
  max-width:400px
}

.radioButtonDel input[type='radio']:checked+span::before,.radioButtonDel input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  position:relative;
  content:'';
  height:12px;
  top:4px;
  width:12px;
  right:5px
}

.radioButtonDel input[type='radio']:disabled+span,.radioButtonDel input[type='checkbox']:disabled+span{
  opacity:0.5
}

.radioButtonDel.withoutTick input[type='radio']:checked+span,.radioButtonDel.withoutTick input[type='checkbox']:checked+span{
  padding-left:12px
}

.radioButtonDel.withoutTick input[type='radio']:checked+span::before,.radioButtonDel.withoutTick input[type='checkbox']:checked+span::before{
  content:'';
  height:0;
  width:0
}

.courierPartners{
  display:flex;
  flex-flow:wrap
}

.checkboxButtonDel input[type='radio'],.checkboxButtonDel input[type='checkbox']{
  display:none
}

.checkboxButtonDel input[type='radio']+span,.checkboxButtonDel input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.checkboxButtonDel input[type='radio'].selected+span,.checkboxButtonDel input[type='checkbox'].selected+span{
  border:1px solid rgba(0,103,226,0.5)
}

.checkboxButtonDel input[type='radio']:checked+span,.checkboxButtonDel input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.checkboxButtonDel input[type='radio']:checked+span::before,.checkboxButtonDel input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.checkboxButtonDel input[type='radio']:disabled+span,.checkboxButtonDel input[type='checkbox']:disabled+span{
  opacity:0.5
}

.customer-return-label{
  color:#eb5758;
  background:#fff6eb;
  padding:1px 6px;
  border-radius:10px;
  margin:0 6px
}

.sample-dispatch-label{
  color:#008B9D;
  background:#F2FEFF;
  padding:1px 6px;
  border-radius:10px;
  margin:0 6px
}

.heading{
  font-size:18px;
  font-weight:700;
  margin:10px 0;
  color:#303b4a
}

.text{
  font-size:14px;
  font-weight:600;
  margin:20px 0
}

.otpInput input{
  border-color:var(--border);
  border-radius:4px;
  border-width:1px;
  color:var(--text-light);
  font-weight:600;
  height:48px;
  outline:none;
  width:56px !important
}

.otpInput input:focus{
  border-color:var(--primary)
}

.actionButtonsContainer{
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-top:16px;
  width:100%
}

.actionButtonSlash{
  color:var(--gray-light-3);
  font-size:14;
  font-weight:600
}

.actionButton{
  background:none;
  color:var(--primary);
  padding:8px
}

.actionButton:hover{
  background:none
}

.actionButtonResend{
  padding-left:0;
  padding-right:6px
}

.actionButtonCall{
  padding-left:12px;
  padding-right:0
}

.countdownBackground{
  background-color:var(--primary);
  border-radius:36px;
  bottom:0;
  left:0;
  opacity:0.05;
  position:absolute;
  right:0;
  top:0
}

.countdownTime{
  color:var(--primary);
  font-size:12px;
  font-weight:700
}

.cancelOrderBsContent{
  max-height:600px
}

.cancelOrderBsContent__form{
  padding-bottom:60px
}

.cancelOrderBsContent__form .optionsList label{
  position:relative;
  padding:14px 18px
}

.cancelOrderBsContent__form .optionsList label input[type='radio']{
  display:none
}

.cancelOrderBsContent__form .optionsList label input[type='radio']+span{
  color:var(--text-light);
  height:auto
}

.cancelOrderBsContent__form .optionsList label input[type='radio']+span::before{
  border:2px solid var(--gray-light-3);
  border-radius:50%;
  content:'';
  height:20px;
  left:-20px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:20px
}

.cancelOrderBsContent__form .optionsList label input[type='radio']+span::after{
  border-radius:50%;
  content:'';
  height:10px;
  left:-15px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:10px
}

.cancelOrderBsContent__form .optionsList label input[type='radio']:checked+span{
  --text-opacity:1;
  color:#0067E2;
  color:rgba(0, 103, 226, var(--text-opacity));
  font-weight:600
}

.cancelOrderBsContent__form .optionsList label input[type='radio']:checked+span::before{
  border:2px solid var(--primary)
}

.cancelOrderBsContent__form .optionsList label input[type='radio']:checked+span::after{
  background-color:var(--primary)
}

.cancelOrderBsContent__form textarea{
  border-radius:4px
}

.cancelOrderBsContent__form textarea::-moz-placeholder{
  color:var(--gray-light-3);
  font-size:14px
}

.cancelOrderBsContent__form textarea:-ms-input-placeholder{
  color:var(--gray-light-3);
  font-size:14px
}

.cancelOrderBsContent__form textarea::placeholder{
  color:var(--gray-light-3);
  font-size:14px
}

.cancelOrderBsContent__form .note{
  margin-left:-24px;
  margin-right:-24px;
  padding:8px 24px
}

.cancelOrderBsContent .cancelOrderActionBtn{
  flex:1;
  height:40px !important;
  min-width:unset !important;
  width:112px
}

.editOrderBsContent{
  max-height:600px
}

.editOrderBsContent .cancelOrderActionBtn{
  flex:1;
  height:40px !important;
  min-width:unset !important;
  width:112px
}

.editOrderBsContent .selected{
  background-color:var(--blue-light);
  color:var(--primary)
}

.dispatchScheduleBsContent{
  max-height:600px
}

.add{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--secondary-bg);
  border-radius:8px;
  width:148px;
  height:44px;
  margin-bottom:80px
}

.edit-button{
  background:#f2f8ff;
  border-radius:8px;
  background:#f2f8ff;
  padding:8px
}

.verifyDetails footer .iconSize{
  margin-right:10px;
  transform:scale(1.5)
}

.verifyDetails .tabList{
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  margin-bottom:0
}

.verifyDetails .tabList button{
  border-color:var(--white);
  color:var(--gray-light-3);
  font-weight:600;
  line-height:1;
  padding-bottom:16px;
  padding-top:16px
}

.verifyDetails .tabList button[aria-selected='true']{
  border-color:var(--primary);
  color:var(--primary)
}

.verifyDetails .orderDetailsHeader{
  display:flex;
  justify-content:space-between;
  margin-bottom:25px
}

.verifyDetails .attachments{
  border:1px solid #cee4ff
}

.verifyDetails .transformIcon{
  transform:scale(0.7)
}

.verifyDetails .editOrderCTA{
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  line-height:16px
}

.verifyDetails .tabList{
  background:var(--white);
  margin-top:-2px;
  position:fixed;
  z-index:10
}

.verifyDetails .tabList+.chakra-tabs__tab-panels .chakra-tabs__tab-panel{
  padding-top:48px !important
}

.timestampMeridiem{
  background-color:var(--chakra-colors-gray-100);
  border-radius:10px;
  display:flex;
  height:48px;
  justify-content:center;
  margin-left:5px;
  text-align:center
}

.timestampMeridiem .timestampMeridiemButton{
  border-radius:10px;
  height:100%;
  text-align:center;
  width:56px
}

.timestampTime{
  align-items:center;
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  margin-right:20px
}

.timestampTime .timestampInput{
  background-color:var(--white);
  border:1px solid;
  border-color:var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:14px;
  font-weight:400;
  height:48px;
  padding:0;
  text-align:center;
  width:48px
}

.errorText{
  color:var(--red)
}

.crossButton{
  left:8px
}

.btnOrderMarkDispatch{
  border-radius:70px !important;
  bottom:30px;
  font-size:larger !important;
  padding-left:20px;
  padding-right:20px;
  width:auto !important
}

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

.yesButton{
  min-width:120px !important;
  padding-right:12px !important
}


.fileAttachments{
  margin-bottom:12px
}

.fileAttachments>:first-child{
  border-right:2px solid var(--white)
}

.fileAttachments .attachedFileWrapper,.fileAttachments .attachFileButton{
  flex-grow:1;
  width:100%;
  min-height:56px
}

.fileAttachments .attachedFileWrapper{
  height:56px;
  border:1px dashed var(--border);
  border-radius:8px
}

.fileAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  padding:0 12px;
  font-size:12px
}

.fileAttachments .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  margin:0 16px;
  padding:0 12px;
  font-size:12px
}

.fileAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%;
  border:1px dashed var(--border);
  border-radius:8px
}

.radio-label{
  display:flex;
  align-items:center;
  margin:10px 0;
  font-size:16px;
  cursor:pointer
}

.radio-input{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  width:20px;
  height:20px;
  border:2px solid #92979c;
  border-radius:50%;
  outline:none;
  cursor:pointer;
  position:relative
}

.radio-input:checked{
  background-color:white;
  padding:4px;
  border:2px solid #0067e2
}

.radio-input:checked::after{
  content:'';
  display:block;
  width:10px;
  height:10px;
  background:#0067e2;
  border-radius:50%;
  position:absolute;
  border:2px solid #0067e2;
  top:3px;
  left:3px
}

.form{
  background-color:#fff;
  border:1px solid #ddd;
  border-radius:5px;
  padding:20px;
  max-width:400px;
  margin:0 auto;
  box-shadow:0 2px 4px rgba(0,0,0,0.1)
}

.form h2{
  font-size:1.2em;
  margin-bottom:20px
}

.form .option{
  margin-bottom:10px
}

.form .option label{
  display:flex;
  align-items:center
}

.form .option label input{
  margin-right:10px
}

.form .buttons{
  display:flex;
  justify-content:space-between;
  margin-top:20px
}

.form .buttons .close,.form .buttons .submit{
  background-color:#0070f3;
  color:white;
  border:none;
  padding:10px 20px;
  border-radius:5px;
  cursor:pointer
}

.form .buttons .close:hover,.form .buttons .submit:hover{
  background-color:#005bb5
}

.form .buttons .close{
  background-color:#ddd
}

.form .buttons .close:hover{
  background-color:#bbb
}

.radio-label{
  display:flex;
  align-items:center;
  margin:10px 0;
  font-size:16px;
  cursor:pointer
}

.radio-input{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  width:20px;
  height:20px;
  border:2px solid #92979c;
  border-radius:50%;
  outline:none;
  cursor:pointer;
  position:relative
}

.radio-input:checked{
  background-color:white;
  padding:4px;
  border:2px solid #0067e2
}

.radio-input:checked::after{
  content:'';
  display:block;
  width:10px;
  height:10px;
  background:#0067e2;
  border-radius:50%;
  position:absolute;
  border:2px solid #0067e2;
  top:3px;
  left:3px
}

.phoneNumberModal_wrapper{
  border-radius:16px
}

.phoneNumberModal_wrapper .phoneNumberModal .chakra-modal__header{
  font-size:18px;
  font-weight:700;
  margin:24px 16px;
  padding:8px
}

.phoneNumberModal_wrapper .phoneNumberModal .chakra-modal__close-btn{
  top:25px
}

.phoneNumberModal_wrapper .phoneNumberModal .chakra-modal__body{
  padding:0
}

.callModal .callIcon{
  background:var(--purple-light-opacity);
  border-radius:16px;
  min-height:32px;
  min-width:32px
}

.callModal .callModalText{
  font-size:16px
}

.actionButtonProfile{
  border-radius:16px;
  border:1px solid #F2F2F2;
  box-sizing:border-box;
  flex-grow:0;
  height:32px;
  order:1
}

.supplierAccountIconWrapper{
  background:var(--purple-light-opacity);
  border-radius:16px;
  box-sizing:border-box;
  height:32px;
  width:32px
}

.accountWrapper{
  height:calc(100vh - 64px - 20px);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between
}

.accountWrapper button.logoutButton{
  border-radius:32px !important;
  color:var(--text);
  display:inline-flex !important;
  height:40px !important;
  justify-content:center;
  margin:0 auto;
  background:#FFFFFF;
  min-height:40px;
  border:none;
  align-items:center;
  flex-direction:row;
  padding:8px;
  width:40px
}

.accountWrapper .userAvatar{
  background:#FFFFFF;
  color:#6B68CF;
  font-size:12px
}

.accountWrapper .userImage{
  border-radius:24px
}

.supplierUserMenu{
  background-color:var(--white);
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,0.25);
  min-width:144px;
  position:absolute;
  right:15px;
  top:15px;
  z-index:5;
  padding:0
}

.dataTable{
  border:1px solid var(--gray-light-2);
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  margin:0 24px 70px 24px;
  overflow:hidden
}

.dataTable .fixed-height-dropdown{
  height:83px
}

.dataTable .large-box-1{
  width:100%;
  padding:16px;
  border:1px solid var(--gray-light-2);
  position:relative
}

.dataTable .large-box-1 .search-option{
  display:flex;
  flex-direction:column;
  overflow-y:scroll;
  max-height:150px;
  width:100%;
  background-color:white;
  margin-left:1px;
  padding:24px 0px;
  gap:10px;
  min-width:312px;
  box-shadow:0px 2px 4px rgba(0,0,0,0.12);
  border-radius:0px 0px 8px 8px
}

.dataTable .large-box-1 .search-option .search-card{
  cursor:pointer
}

.dataTable .large-box-1 .search-option::-webkit-scrollbar{
  display:none
}

.dataTable .large-box-1 .search-option{
  -ms-overflow-style:none;
  scrollbar-width:none
}

.dataTable .large-box-1 .label{
  font-size:12px;
  font-weight:400;
  color:var(--gray2)
}

.dataTable .large-box-1 .value{
  color:var(--gray3);
  font-size:14px;
  font-weight:600
}

.dataTable .large-box-1 .grid-container-generate-po{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px
}

.dataTable .large-box{
  width:100%;
  padding:16px;
  border:1px solid var(--gray-light-2);
  display:flex;
  justify-content:space-between;
  align-items:center
}

.dataTable .large-box .label{
  font-size:12px;
  font-weight:400;
  color:var(--gray2)
}

.dataTable .large-box .value{
  color:var(--gray3);
  font-size:14px;
  font-weight:600
}

.dataTable .box{
  width:50%;
  padding:16px;
  border:1px solid var(--gray-light-2);
  display:flex;
  justify-content:space-between;
  align-items:center
}

.dataTable .box .label{
  font-size:12px;
  font-weight:400;
  color:var(--gray2)
}

.dataTable .box .value{
  color:var(--gray3);
  font-size:14px;
  font-weight:600
}

.large-box-borderless{
  width:100%;
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.large-box-borderless .label{
  font-size:12px;
  font-weight:400;
  color:var(--gray2)
}

.large-box-borderless .value{
  color:var(--gray3);
  font-size:14px;
  font-weight:600
}

.large-box-2{
  width:100%;
  border:1px solid var(--gray-light-2);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center
}

.custom-info-bar{
  background-color:#F2F8FF;
  width:95%;
  height:32px;
  gap:8px;
  border-radius:8px;
  padding:8px
}

.calendarCross{
  position:absolute;
  right:24px;
  top:36px;
  z-index:4
}

.editQuoteRequestForm .label{
  color:var(--text-light);
  padding-bottom:8px
}

.editQuoteRequestForm .inputGroup.withRightAddon input{
  border-right-width:0
}

.editQuoteRequestForm .inputGroup.withRightAddon .addon{
  font-weight:600;
  padding-left:24px;
  padding-right:24px
}

.datePickerStyles{
  padding:0 0 8px;
  border-color:var(--border)
}

.datePickerStyles .react-datepicker{
  margin-top:16px
}

.requestFormContainer .headerContainer{
  box-shadow:0 1px 2px rgba(0,0,0,0.1)
}

.requestFormContainer .formHeader{
  border:1px solid var(--gray-light-5);
  border-radius:8px;
  padding:8px;
  padding-left:12px
}

.requestFormContainer footer{
  background:var(--white);
  box-shadow:0 -1px 2px rgba(0,0,0,0.1)
}

.requestFormContainer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px
}

.requestFormContainer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

.requestFormContainer .previousStepButton svg{
  transform:scale(1.5)
}

.requestFormContainer .nextStepButton svg{
  padding-left:4px
}

.requestFormContainer .nextStepButton svg path{
  fill:var(--white)
}

.requestFormContainer .stepsStatus{
  color:var(--gray-light-3);
  font-size:12px;
  line-height:16px;
  padding-bottom:6px
}

.requestFormContainer .stepsStatus span{
  color:var(--gray)
}

.requestFormContainer .stepsProgress{
  border-radius:8px 0 0 8px;
  display:flex
}

.requestFormContainer .stepsProgress div{
  background:var(--gray-light-2);
  height:6px;
  width:12px
}

.requestFormContainer .stepsProgress div:first-child{
  border-bottom-left-radius:8px;
  border-top-left-radius:8px
}

.requestFormContainer .stepsProgress div:last-child{
  border-bottom-right-radius:8px;
  border-top-right-radius:8px
}

.requestFormContainer .stepsProgress div.filled{
  background:var(--primary)
}

.requestFormContainer .errorMessage{
  color:var(--red);
  font-size:12px
}

.requestFormContainer .helperText{
  color:var(--gray-light-3);
  font-size:12px
}

.requestForm label{
  color:var(--gray);
  font-size:12px;
  line-height:16px;
  margin-bottom:12px
}

.requestForm .request-form-label{
  color:var(--gray2);
  font-weight:800;
  font-size:16px;
  line-height:24px
}

.requestForm .delete-svg-icon{
  border-radius:9999px;
  height:32px;
  width:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:white;
  box-shadow:0 1px 3px rgba(0,0,0,0.2)
}

.requestForm .productionAttachments{
  height:56px;
  margin-bottom:24px;
  margin-top:24px
}

.requestForm .productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:14px;
  font-weight:600;
  height:100%
}

.requestForm .productionAttachments .attachedFileWrapper,.requestForm .productionAttachments .attachFileButton{
  background:#f2f8ff;
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.requestForm .productionAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  height:56px
}

.requestForm .productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.requestForm .attachmentCertificate{
  border:0
}

.requestForm .attachmentCertificate .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px
}

.requestForm .validateIcon{
  position:relative;
  top:-6px;
  transform:scale(1.1)
}

.requestForm .validateIcon.isValid rect{
  fill:var(--green)
}

.requestForm .validateIcon.isValidPrimary rect{
  fill:var(--primary)
}

.requestForm .addressContainer input:focus+div{
  display:none
}

.requestForm .inputField{
  margin-bottom:16px
}

.requestForm .inputField input{
  border-color:var(--border)
}

.requestForm .inputField input:focus{
  border-color:var(--primary)
}

.requestForm .inputField .leftElement{
  align-items:center;
  display:flex;
  height:48px;
  justify-content:space-around;
  padding:0 8px;
  width:40px
}

.requestForm .inputField .leftElement svg{
  transform:scale(0.9)
}

.requestForm .inputField .rightElement{
  height:48px;
  width:auto
}

.requestForm .checkboxField input[type='checkbox']{
  display:none
}

.requestForm .checkboxField input[type='checkbox']+span{
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:none;
  display:block;
  font-size:14px;
  margin-right:8px;
  padding:10px 16px
}

.requestForm .checkboxField input[type='checkbox']:checked+span{
  background:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:36px;
  position:relative
}

.requestForm .checkboxField input[type='checkbox']:checked+span::before{
  content:'';
  height:12px;
  left:16px;
  position:absolute;
  top:14px;
  width:12px
}

.requestForm .checkboxField .optionsList{
  display:flex;
  flex-wrap:wrap
}

.requestForm .facilityImageButtonRequest{
  background:var(--secondary-bg);
  border-radius:8px;
  width:100%;
  height:152px
}

.requestForm .attach-pic{
  border:1px solid #0067e2;
  border-radius:40px;
  line-height:24px
}

.requestForm .request-images{
  width:100%;
  height:152px;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:8px
}

.requestForm .attachedFabricImageCustom{
  width:100%
}

.requestForm .attachedFabricImageCustom .attachedFile{
  position:relative;
  width:100%
}

.requestForm .attachedFabricImageCustom img{
  border-radius:8px;
  height:152px;
  -o-object-fit:cover;
     object-fit:cover;
  width:100%;
  display:block
}

.requestForm .attachedFabricImageCustom .iconWithOverlayCustom{
  position:absolute;
  top:12px;
  right:12px;
  left:auto;
  z-index:10;
  cursor:pointer;
  background-color:white;
  width:32px;
  height:32px;
  border-radius:24px
}

.requestForm .second-time-user{
  background-color:#f9faff
}

.requestForm .second-time-header{
  color:#00142d;
  font-size:14px;
  font-weight:600;
  line-height:20px
}

.requestForm .edit-second-time{
  color:#0067e2;
  font-size:14px;
  font-weight:700;
  line-height:14px;
  text-decoration:underline
}

.requestForm .full-line-wrapper{
  padding-left:1rem;
  padding-right:1rem
}

.requestForm .full-line{
  width:100%;
  height:1px;
  background-color:#e5e5e5
}

.requestForm .form-key-custom{
  font-weight:400;
  font-size:12px;
  color:#626870
}

.requestForm .form-value-custom{
  font-weight:600;
  font-size:12px;
  color:#303c4a
}

.requestForm .custom-customer-name{
  font-weight:600;
  font-size:14px;
  color:#303c4a
}

.requestForm .custom-gst-name{
  font-weight:400;
  font-size:14px;
  color:#626870
}

.requestForm .gstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
  color:var(--blue-light);
  height:46px !important;
  min-width:70px;
  margin:1px
}

.requestForm .validGstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
  color:#0067e2;
  height:46px !important;
  min-width:70px;
  margin:1px
}

.requestForm .editBottomSheet{
  background-color:#f2f8ff;
  width:69px;
  height:32px;
  border-radius:8px;
  color:#0067e2;
  font-weight:600
}

.requestForm .addAddress{
  background-color:#f2f8ff;
  width:121px;
  height:32px;
  border-radius:8px;
  color:#0067e2;
  font-weight:600
}

.requestForm .phone-field-wrapper{
  position:relative;
  width:100%
}

.requestForm .phone-field-wrapper .PhoneField .formLabel{
  margin-bottom:1px !important
}

.requestForm .phone-field-wrapper .PhoneField .countryList{
  width:inherit !important;
  min-width:530px;
  left:0 !important;
  right:0 !important;
  transform:none !important
}

.requestForm .fieldWrapper .inputField .mb-2{
  margin-bottom:2px !important
}

.requestForm .unit_suffix-sample{
  background:rgba(225,225,234,0.2);
  border-left:0;
  border-top-right-radius:6px;
  height:46px;
  min-width:50px;
  position:absolute;
  right:1px;
  top:1px;
  border-bottom-right-radius:8px
}

.requestForm .radioFieldWrapper .formikRadioField .mb-2{
  margin-bottom:2px !important
}

.requestForm .request-images{
  width:100%;
  height:152px;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:8px
}

.requestForm .facilityImages img{
  border-radius:2px;
  height:40px;
  margin-right:12px;
  width:36px
}

.requestForm .facilityImages button{
  border:1px dashed var(--primary);
  width:36px
}

.requestForm .withAddon input{
  border-bottom-right-radius:0;
  border-right-width:0;
  border-top-right-radius:0
}

.requestForm .sliderField{
  position:relative
}

.requestForm .sliderField .sliderThumb{
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  height:24px;
  width:24px
}

.requestForm .sliderField .sliderThumb:focus{
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  outline:none
}

.requestForm .sliderField .indicators{
  display:flex;
  justify-content:space-between;
  margin-left:2px
}

.requestForm .sliderField .indicators div{
  border-left:1px solid var(--gray-light-3);
  border-radius:4px;
  height:8px;
  width:1px
}

.requestForm .sliderField .withEndPointers{
  position:relative
}

.requestForm .sliderField .withEndPointers::before{
  color:var(--gray-light-3);
  content:'0%';
  position:absolute;
  top:-32px
}

.requestForm .sliderField .withEndPointers::after{
  color:var(--gray-light-3);
  content:'100%';
  position:absolute;
  right:0;
  top:-32px
}

.requestForm .sliderField .thumbPercentage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:4px;
  color:var(--primary);
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  left:-16px;
  line-height:16px;
  padding-left:3px;
  position:absolute;
  top:0
}

.requestForm .sliderField .thumbPercentage svg{
  margin-left:-8px;
  transform:scale(0.5)
}

.requestForm .sliderField .thumbPercentage svg path{
  fill:var(--primary)
}

.requestForm .sliderField .left-auto{
  left:auto !important
}

.requestForm .sliderField .left-0{
  left:0 !important
}

.requestForm .multiSelectField .multiSelect__control{
  border-color:var(--border);
  box-shadow:none;
  min-height:48px
}

.requestForm .multiSelectField .multiSelect__indicator{
  display:none
}

.requestForm .multiSelectField .multiSelect__multi-value{
  background:var(--secondary-bg);
  border-radius:16px
}

.requestForm .multiSelectField .multiSelect__multi-value__label{
  font-size:14px;
  padding:2px;
  padding-left:8px;
  padding-right:0
}

.requestForm .multiSelectField .multiSelect__multi-value__remove{
  background-color:var(--secondary-bg);
  border-radius:16px;
  color:var(--gray);
  padding-right:8px
}

.requestForm .multiSelectField .multiSelect__multi-value__remove svg{
  transform:scale(0.72)
}

.requestForm .multiSelectField .multiSelect__multi-value__remove svg path{
  d:path("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z") !important;
  fill:var(--gray)
}

.requestForm .gst-attachment{
  border:1px dashed var(--border);
  border:0;
  height:56px;
  margin-bottom:12px
}

.requestForm .gst-attachment>:first-child{
  border-right:1px dashed var(--border)
}

.requestForm .gst-attachment .attachedFileWrapper,.requestForm .gst-attachment .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.requestForm .gst-attachment .attachedFileWrapper{
  background:var(--secondary-bg);
  height:56px
}

.requestForm .gst-attachment .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.requestForm .gst-attachment .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.supplierFormCapacity{
  margin-bottom:16px
}

.supplierFormCapacity .listItem{
  padding:12px 0;
  z-index:5
}

.supplierFormCapacity .listItem:nth-child(2){
  position:relative
}

.supplierFormCapacity .listItem:nth-child(2)::after{
  bottom:0;
  content:'';
  height:1px;
  left:-24px;
  position:absolute;
  width:100vw
}

.supplierFormCapacity .listItem.active{
  color:var(--primary);
  position:relative;
  z-index:7
}

.supplierFormCapacity .listItem.active::before{
  background:var(--secondary-bg);
  content:'';
  height:100%;
  left:-24px;
  position:absolute;
  top:0;
  width:100vw;
  z-index:-1
}

.supplierFormSlider .footer{
  margin-right:-8px
}

.fileinput{
  border:2px dashed var(--gray-light);
  padding:8px;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center
}

.fileinput input{
  display:none
}

.fileinput label{
  cursor:pointer;
  color:var(--primary);
  font-weight:600;
  font-size:14px;
  margin-left:9px;
  margin-top:10px
}

.attachFabricImage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  margin:24px;
  padding:48px 0 56px
}

.attachFabricImage button{
  margin-top:8px
}

.notification_bell_icon{
  margin-right:10px
}

.fabricsPage{
  background:var(--bg-2);
  margin-bottom:60px;
  min-height:100vh;
  position:relative
}

.fabricsPage.page-fixed-header{
  padding-top:52px
}

.fabricsPage .emptyState{
  background-color:var(--bg-2);
  height:calc(100vh - 60px - 44px)
}

.fabricsPage .buttonPrimary{
  background-color:var(--primary);
  border-radius:4px;
  color:var(--white);
  height:40px !important;
  width:172px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700
}

.fabricsPage .header{
  top:-60px;
  transition:all 0.8s ease-out
}

.fabricsPage .sub-header-visible{
  top:52px !important;
  transition:all 0.8s ease-in-out
}

.fabricsPage .header-show{
  left:0;
  top:0;
  transition:all 0.8s ease-in-out;
  width:100%
}

.fabricsPage .requestsOngoingAccordion{
  margin-top:8px
}

.fabricsPage .requestsOngoingAccordion .header:focus,.fabricsPage .requestsOngoingAccordion .header:hover{
  background-color:transparent
}

.fabricsPage .requestsOngoingAccordion .header .toggle{
  align-items:center;
  background:var(--white);
  border-radius:16px;
  display:flex;
  height:28px;
  padding:0 8px
}

.fabricsPage .requestsOngoingAccordion .panel{
  padding:0
}

.fabricsPage .stickyNote{
  position:fixed;
  background:var(--yellow-bg-2);
  bottom:56px;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  z-index:24
}

.fabricsPage .stickyNote .chakra-accordion__icon path{
  fill:var(--gray)
}

.fabricsPage .stickyNote .chakra-accordion__button{
  padding-left:18px;
  padding-right:16px
}

.fabricsPage .stickyNote .chakra-accordion__button div{
  display:flex;
  align-items:center
}

.fabricsPage .stickyNote .chakra-accordion__button div svg{
  margin-right:8px
}

.fabricsPage .stickyNote .chakra-accordion__button:hover{
  background:transparent
}

.fabricsPage .stickyNote .chakra-accordion__item{
  border-color:transparent
}

.fabricsPage .stickyNote .chakra-accordion__panel{
  padding:0 40px 8px 48px
}

.fabricsPage .stickyWhatsAppNote{
  position:-webkit-sticky;
  position:sticky;
  background:var(--yellow-bg-2);
  bottom:56px;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  z-index:24;
  min-height:42px;
  padding-left:16px;
  padding-top:12px;
  padding-right:18px;
  padding-bottom:12px
}

.fabricsPage .showing-text{
  color:var(--gray);
  margin-bottom:12px;
  margin-left:16px;
  margin-top:20px
}

.fabricsPage .showing-text .text-black{
  color:var(--text)
}

.fabricsPage .loadingMore{
  margin-top:-8px
}

.fabricsPage.blue-two-bg{
  background-color:var(--blue-two);
  padding:44px 8px 0
}

.fabricsPage .navHeaders{
  position:fixed;
  transition:all 0.8s ease-in-out
}

.fabricsPage .fixed-header{
  margin-top:0
}

.fabricsPage .supplier-card:first-child{
  margin-top:0
}

.fabricsPage .requestTabs{
  margin-top:0
}

.filter-btn{
  background:var(--white);
  border-radius:16px;
  color:var(--gray);
  font-size:12px;
  font-weight:400;
  height:32px;
  min-width:72px;
  text-align:center
}

.filter-btn-active{
  color:var(--primary);
  font-weight:600
}

.filter-btn:not(:first-of-type){
  margin-left:4px
}

.filter-float-btn button{
  background:var(--primary);
  border-radius:50%;
  bottom:72px;
  height:48px;
  position:fixed;
  right:16px;
  width:48px
}

.filter-float-btn-active{
  color:var(--primary)
}

.supplier-filter-pills-container{
  background:var(--blue-two);
  left:16px;
  padding:4px 0;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  z-index:99
}

.fabric-fixed-header{
  background:var(--blue-two);
  left:0;
  margin-top:8px;
  padding:8px 0;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  z-index:99
}

@media (min-width: 1024px){
  .fabricsPage .navHeaders{
    max-width:40%;
    left:30%
  }

  .fabricsPage .header-show{
    left:30%
  }

  .stickyNote{
    width:40%;
    left:30%
  }
}

.attachFabricImage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  margin:24px;
  padding:48px 0 56px
}

.attachFabricImage button{
  margin-top:8px
}

.ordersPage{
  background:var(--bg-2);
  margin-bottom:60px;
  min-height:100vh
}

.ordersPage.empty-page{
  margin-bottom:0;
  min-height:unset
}

.ordersPage .emptyState{
  background-color:var(--bg-2);
  height:calc(100vh - 60px - 44px)
}

.ordersPage .emptyState .buttonPrimary{
  background-color:var(--primary);
  border-radius:4px;
  color:var(--white);
  height:40px !important;
  width:172px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700
}

.ordersPage .requestsOngoingAccordion{
  margin-top:8px
}

.ordersPage .requestsOngoingAccordion .header:focus,.ordersPage .requestsOngoingAccordion .header:hover{
  background-color:transparent
}

.ordersPage .requestsOngoingAccordion .header .toggle{
  align-items:center;
  background:var(--white);
  border-radius:16px;
  display:flex;
  height:28px;
  padding:0 8px
}

.ordersPage .requestsOngoingAccordion .panel{
  padding:0
}

.ordersPage .stickyNote{
  position:fixed;
  width:100%;
  background:var(--yellow-bg-2);
  bottom:56px;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  z-index:24
}

.ordersPage .stickyNote .chakra-accordion__icon path{
  fill:var(--gray)
}

.ordersPage .stickyNote .chakra-accordion__button{
  padding-left:18px;
  padding-right:16px
}

.ordersPage .stickyNote .chakra-accordion__button div{
  display:flex;
  align-items:center
}

.ordersPage .stickyNote .chakra-accordion__button div svg{
  margin-right:8px
}

.ordersPage .stickyNote .chakra-accordion__button:hover{
  background:transparent
}

.ordersPage .stickyNote .chakra-accordion__item{
  border-color:transparent
}

.ordersPage .stickyNote .chakra-accordion__panel{
  padding:0 40px 8px 48px
}

.ordersPage .showing-text{
  color:var(--gray);
  margin:20px 0 12px 16px
}

.ordersPage .showing-text .text-black{
  color:var(--text)
}

.ordersPage .loadingMore{
  margin-top:-8px
}

.productionPage{
  background:var(--bg-2);
  margin-bottom:60px;
  min-height:calc(100vh - 60px)
}

.productionPage .timeline{
  color:var(--gray);
  font-size:14px;
  margin-left:-8px;
  margin-top:24px;
  position:relative
}

.productionPage .timeline span{
  line-height:16px
}

.productionPage .timeline .attribute1::after{
  background-color:var(--border);
  content:'';
  height:32%;
  left:11px;
  position:absolute;
  top:14px;
  width:2px
}

.productionPage .timeline .dot{
  background-color:var(--white);
  border:1px solid var(--gray-light-3);
  height:8px;
  width:8px;
  z-index:1
}

.productionPage .timeline .dot-green{
  background-color:var(--green);
  border-color:var(--green)
}

.productionPage .timeline .dot-red{
  background-color:var(--red);
  border-color:var(--red)
}

.productionPage .timeline .pill{
  border-radius:16px;
  font-size:10px;
  font-weight:600;
  height:16px;
  line-height:16px;
  margin-left:8px;
  padding:0 4px
}

.productionPage .timeline .pill-green{
  background:var(--green-bg);
  color:var(--green)
}

.productionPage .timeline .pill-red{
  background:var(--red-bg-3);
  color:var(--red)
}

.productionPage .timeline .pill-yellow{
  background:var(--yellow-bg-2);
  color:var(--orange)
}

.productionPage .header{
  top:-60px;
  transition:all 0.7s ease-out
}

.productionPage .header-show{
  left:0;
  top:0;
  transition:all 0.7s ease-in-out;
  width:100%
}

.productionPage .fabric-fixed-header{
  background:var(--blue-two);
  left:0;
  margin-top:8px;
  padding:8px 0;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  z-index:99
}

.productionPage .sub-header-visible{
  top:58px;
  transition:all 0.7s ease-in-out
}

.product-id{
  color:var(--purple-secondary-dark);
  font-size:12px
}

.order-status-label{
  color:var(--gray);
  font-size:12px;
  margin-left:8px
}

.order-date{
  background:var(--purple-light-opacity);
  border-radius:16px;
  color:var(--purple-secondary-dark);
  font-size:12px;
  font-weight:600;
  margin-left:8px;
  padding:0 4px
}

.quotesPage{
  background:var(--bg-2);
  margin-bottom:60px;
  min-height:calc(100vh - 120px)
}

.quotesPage .loadingMore{
  margin-top:-8px
}

.supplier-orders{
  background:var(--blue-two);
  min-height:100vh;
  padding-bottom:56px
}

.supplier-orders.page-fixed-header{
  padding-top:52px
}

.supplier-orders .navHeaders{
  position:fixed;
  top:0
}

.supplier-orders .attribute1::after{
  background:var(--border);
  content:'';
  height:17px;
  left:27px;
  position:absolute;
  top:calc(55% - 7px);
  width:2px
}

.supplier-orders .fixed-header{
  margin-top:0
}

.supplier-orders .header{
  top:-60px;
  transition:all 1s ease-out
}

.supplier-orders .header-visible{
  top:52px !important;
  transition:all 1s ease-in-out
}

.supplier-orders .header-show{
  left:0;
  top:0;
  transition:all 1s ease-in-out;
  width:100%
}

.supplier-orders .supplier-card:first-child{
  margin-top:0
}

.supplier-orders .supplier-filter-pills-container{
  background:var(--blue-two);
  left:16px;
  padding:4px 0;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  z-index:99
}

.supplier-orders .dot{
  background-color:var(--white);
  border:1px solid var(--gray-light-3);
  height:8px;
  width:8px;
  z-index:1
}

.supplier-orders .dot-green{
  background-color:var(--green);
  border-color:var(--green)
}

.supplier-orders .dot-red{
  background-color:var(--red);
  border-color:var(--red)
}

.supplier-orders .pill{
  border-radius:16px;
  font-size:10px;
  font-weight:600;
  height:16px;
  line-height:16px;
  margin-left:8px;
  padding:0 4px
}

.supplier-orders .pill-green{
  background:var(--green-bg);
  color:var(--green)
}

.supplier-orders .pill-red{
  background:var(--red-bg-3);
  color:var(--red)
}

.supplier-orders .pill-yellow{
  background:var(--yellow-bg-2);
  color:var(--orange)
}

.supplier-orders .orders-fixed-header{
  background:var(--blue-two);
  left:0;
  padding:8px 0;
  position:-webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  z-index:99
}

.supplier-orders .filter-btn{
  background:var(--white);
  border-radius:16px;
  box-shadow:0 0 2px rgba(0,103,226,0.12);
  color:var(--gray);
  font-size:12px;
  font-weight:400;
  height:32px;
  min-width:92px;
  text-align:center
}

.supplier-orders .filter-btn-active{
  color:var(--primary);
  font-weight:600
}

.supplier-orders .filter-btn:not(:first-of-type){
  margin-left:4px
}

.supplier-orders .product-id{
  color:var(--purple-secondary-dark);
  font-size:12px
}

.supplier-orders .new-orders-container{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:12px;
  transition:height 0.3s
}

.supplier-orders .new-orders-container.show{
  height:56px
}

.supplier-orders .new-orders-container.hide{
  border:0;
  height:0;
  overflow:hidden
}

.supplier-orders .new-orders{
  color:var(--text)
}

.supplier-orders .clear-btn{
  color:var(--primary)
}

.supplier-orders .px-16px{
  padding:0 16px
}

.supplier-orders .mx-16px{
  margin:0 16px
}

@media (min-width: 1024px){
  .fabricsPage .navHeaders{
    max-width:40%;
    left:30%
  }

  .fabricsPage .header-show{
    left:30%
  }

  .stickyNote{
    width:40%;
    left:30%
  }
}

.customerDetails .tabList{
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  margin-bottom:0
}

.customerDetails .tabList button{
  border-color:var(--white);
  color:var(--gray-light-3);
  font-weight:600;
  padding:16px 0
}

.customerDetails .tabList button:nth-child(1){
  width:50%
}

.customerDetails .tabList button:nth-child(2){
  width:50%
}

.customerDetails .tabList button[aria-selected='true']{
  border-color:var(--primary);
  color:var(--primary)
}

.customerDetails .rowChildren{
  max-width:200px
}

.customerDetails .accordionItem{
  border-color:var(--gray-light-2)
}

.customerDetails .accordionItem button[aria-expanded='true'] svg{
  transform:scale(1.5) rotate(180deg)
}

.customerDetails .accordionButton{
  color:var(--gray);
  font-weight:600;
  padding:24px
}

.customerDetails .accordionButton svg{
  transform:scale(1.5)
}

.customerDetails .accordionButton svg path{
  fill:var(--text-light)
}

.customerDetails .accordionButton:hover{
  background:var(--white)
}

.customerDetails .accordionPanel{
  padding-left:24px;
  padding-right:24px;
  margin-left:-14px;
  margin-right:-14px
}

.customerDetails .facilityImage{
  border-radius:4px;
  height:40px;
  margin-right:8px;
  width:36px
}

.customerDetails .pill{
  background:var(--secondary-bg);
  border-radius:16px;
  color:var(--text-light);
  margin-bottom:8px;
  padding:4px 8px;
  text-align:center;
  font-weight:600
}

.customerDetails .pill-2{
  background:var(--purple-light-opacity);
  border-radius:16px;
  color:var(--text-light);
  margin-bottom:8px;
  padding:4px 8px;
  text-align:center;
  font-weight:600
}

.customerDetails .attachedPo{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding-left:12px;
  padding-right:6px
}

.customerDetails .attachedPo{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding-left:12px;
  padding-right:6px
}

.customerDetails .defaultButton{
  background-color:var(--red-bg);
  border-radius:24px;
  color:var(--orange);
  height:24px;
  margin-bottom:9px;
  margin-left:18px;
  padding:4px 8px;
  width:63px
}

.supplierActionBtns{
  display:flex;
  padding-right:16px
}

.supplierActionBtns__btn{
  position:relative
}

.supplierActionBtns__btn--filterApplied::before{
  background-color:var(--red);
  border-radius:100%;
  content:'';
  height:8px;
  left:16px;
  position:absolute;
  top:8px;
  width:8px
}

.supplierActionBtns__btn .scaleDown{
  transform:scale(0.7)
}

.supplierActionBtns__btn .sortIcon{
  margin-right:5px
}

.supplierActionBtns__btn--inSearch{
  margin-top:-6px !important
}

.supplierActionBtns__btn:hover{
  background-color:transparent !important
}

.timestampMeridiem{
  background-color:var(--chakra-colors-gray-100);
  border-radius:10px;
  display:flex;
  height:48px;
  justify-content:center;
  margin-left:5px;
  text-align:center
}

.timestampMeridiem .timestampMeridiemButton{
  border-radius:10px;
  height:100%;
  text-align:center;
  width:56px
}

.timestampTime{
  align-items:center;
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  margin-right:20px
}

.timestampTime .timestampInput{
  background-color:var(--white);
  border:1px solid;
  border-color:var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:14px;
  font-weight:400;
  height:48px;
  padding:0;
  text-align:center;
  width:48px
}

.form-scrolling{
  max-height:78vh;
  overflow-y:auto;
  scrollbar-width:none
}

.meridiemButton{
  height:100%
}

.meridiemButton.active{
  background-color:var(--secondary-bg);
  color:var(--primary)
}

@-moz-document $chevron:  url-prefix('../../../assets/supplier-form/slider-border.svg');

.supplierFormContainer .headerContainer{
  box-shadow:0 1px 2px rgba(0,0,0,0.1)
}

.supplierFormContainer .formHeader{
  border:1px solid var(--gray-light-5);
  border-radius:8px;
  padding:8px;
  padding-left:12px
}

.supplierFormContainer footer{
  background:var(--white);
  box-shadow:0 -1px 2px rgba(0,0,0,0.1)
}

.supplierFormContainer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px
}

.supplierFormContainer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

.supplierFormContainer .previousStepButton svg{
  transform:scale(1.5)
}

.supplierFormContainer .nextStepButton svg{
  padding-left:4px
}

.supplierFormContainer .nextStepButton svg path{
  fill:var(--white)
}

.supplierFormContainer .stepsStatus{
  color:var(--gray-light-3);
  font-size:12px;
  line-height:16px;
  padding-bottom:6px
}

.supplierFormContainer .stepsStatus span{
  color:var(--gray)
}

.supplierFormContainer .stepsProgress{
  border-radius:8px 0 0 8px;
  display:flex
}

.supplierFormContainer .stepsProgress div{
  background:var(--gray-light-2);
  height:6px;
  width:12px
}

.supplierFormContainer .stepsProgress div:first-child{
  border-bottom-left-radius:8px;
  border-top-left-radius:8px
}

.supplierFormContainer .stepsProgress div:last-child{
  border-bottom-right-radius:8px;
  border-top-right-radius:8px
}

.supplierFormContainer .stepsProgress div.filled{
  background:var(--primary)
}

.supplierFormContainer .errorMessage{
  margin-top:10px;
  color:var(--red);
  font-size:12px
}

.supplierForm label{
  color:var(--gray);
  font-size:12px;
  line-height:16px;
  margin-bottom:12px
}

.supplierForm .validateIcon{
  position:relative;
  top:-6px;
  transform:scale(1.1)
}

.supplierForm .validateIcon.isValid rect{
  fill:var(--green)
}

.supplierForm .validateIcon.isValidPrimary rect{
  fill:var(--primary)
}

.supplierForm .addressContainer input:focus+div{
  display:none
}

.supplierForm .inputField{
  margin-bottom:16px
}

.supplierForm .inputField input{
  border-color:var(--border)
}

.supplierForm .inputField input:focus{
  border-color:var(--primary)
}

.supplierForm .inputField .leftElement{
  align-items:center;
  display:flex;
  height:48px;
  justify-content:space-around;
  padding:0 8px;
  width:40px
}

.supplierForm .inputField .leftElement svg{
  transform:scale(0.9)
}

.supplierForm .inputField .rightElement{
  height:48px;
  width:auto
}

.supplierForm .facilityImageButton{
  background:var(--secondary-bg);
  border-radius:8px;
  width:100%
}

.supplierForm .facilityImageButton span{
  line-height:24px
}

.supplierForm .facilityImageButton svg{
  transform:scale(0.5)
}

.supplierForm .facilityImages img{
  border-radius:2px;
  height:40px;
  margin-right:12px;
  width:36px
}

.supplierForm .facilityImages button{
  border:1px dashed var(--primary);
  width:36px
}

.supplierForm .withAddon input{
  border-bottom-right-radius:0;
  border-right-width:0;
  border-top-right-radius:0
}

.supplierForm .sliderField{
  position:relative
}

.supplierForm .sliderField .sliderThumb{
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  height:24px;
  width:24px
}

.supplierForm .sliderField .sliderThumb:focus{
  box-shadow:0 0 4px 2px rgba(0,103,226,0.2);
  outline:none
}

.supplierForm .sliderField .indicators{
  display:flex;
  justify-content:space-between;
  margin-left:2px
}

.supplierForm .sliderField .indicators div{
  border-left:1px solid var(--gray-light-3);
  border-radius:4px;
  height:8px;
  width:1px
}

.supplierForm .sliderField .withEndPointers{
  position:relative
}

.supplierForm .sliderField .withEndPointers::before{
  color:var(--gray-light-3);
  content:'0%';
  position:absolute;
  top:-32px
}

.supplierForm .sliderField .withEndPointers::after{
  color:var(--gray-light-3);
  content:'100%';
  position:absolute;
  right:0;
  top:-32px
}

.supplierForm .sliderField .thumbPercentage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:4px;
  color:var(--primary);
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  left:-16px;
  line-height:16px;
  padding-left:3px;
  position:absolute;
  top:0
}

.supplierForm .sliderField .thumbPercentage svg{
  margin-left:-8px;
  transform:scale(0.5)
}

.supplierForm .sliderField .thumbPercentage svg path{
  fill:var(--primary)
}

.supplierForm .sliderField .left-auto{
  left:auto !important
}

.supplierForm .sliderField .left-0{
  left:0 !important
}

.supplierFormCapacity{
  margin-bottom:16px
}

.supplierFormCapacity .listItem{
  padding:12px 0;
  z-index:5
}

.supplierFormCapacity .listItem:nth-child(2){
  position:relative
}

.supplierFormCapacity .listItem:nth-child(2)::after{
  border-bottom:1px dashed var(--gray-light-5);
  bottom:0;
  content:'';
  height:1px;
  left:-24px;
  position:absolute;
  width:100vw
}

.supplierFormCapacity .listItem.active{
  color:var(--primary);
  position:relative;
  z-index:7
}

.supplierFormCapacity .listItem.active::before{
  background:var(--secondary-bg);
  content:'';
  height:100%;
  left:-24px;
  position:absolute;
  top:0;
  width:100vw;
  z-index:-1
}

.supplierFormSlider .footer{
  margin-right:-8px
}

.container{
  max-width:100vw
}

.customerAddForm .countryTemplate{
  height:48px;
  padding:14px 8px 14px 16px
}

.customerAddForm .countryTemplate:not(:first-of-type){
  border-top:1px solid var(--gray-light-5)
}

.customerAddForm .formLabel{
  font-weight:normal !important;
  --text-opacity:1;
  color:#333340;
  color:rgba(51, 51, 64, var(--text-opacity))
}

.customerAddForm .labelWithTick .formLabel{
  margin-bottom:0
}

.customerAddForm .productionAttachments{
  height:56px;
  margin-bottom:12px
}

.customerAddForm .productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.customerAddForm .productionAttachments .attachedFileWrapper,.customerAddForm .productionAttachments .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.customerAddForm .productionAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  height:56px
}

.customerAddForm .productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.customerAddForm .attachmentCertificate{
  border:0
}

.customerAddForm .attachmentCertificate .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px
}

.gstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
  color:var(--blue-light);
  height:46px !important;
  min-width:70px;
  margin:1px
}

.validGstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
  color:#0067E2;
  height:46px !important;
  min-width:70px;
  margin:1px
}

.customerLegalName{
  background-color:var(--purple-light-opacity);
  border-radius:8px;
  margin-top:20px
}

.customerLegalName .label{
  color:var(--gray);
  font-weight:400
}

.customerLegalName .legalName{
  color:var(--text-light);
  font-weight:600
}

.countryTemplate{
  height:48px;
  padding:14px 8px 14px 16px
}

.countryTemplate:not(:first-of-type){
  border-top:1px solid var(--gray-light-5)
}

.productionAttachments{
  height:56px;
  margin-bottom:24px;
  margin-top:24px
}

.productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:14px;
  font-weight:600;
  height:100%
}

.productionAttachments .attachedFileWrapper,.productionAttachments .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px;
  flex-grow:1;
  width:50%
}

.productionAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  height:56px
}

.productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.attachmentCertificate{
  border:0
}

.attachmentCertificate .attachFileButton{
  background:var(--secondary-bg);
  border:0;
  border-radius:4px
}

.first-line{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin-bottom:36px
}

.add-address{
  align-items:center;
  background-color:#f2f8ff;
  border-radius:24px;
  display:flex;
  height:44px;
  justify-content:center;
  width:148px
}

.addressOptionsBottomSheet,.bmSheetAddressContent{
  max-height:80vh;
  overflow-y:scroll
}

.addressOptionsBottomSheet::-webkit-scrollbar,.bmSheetAddressContent::-webkit-scrollbar{
  display:none
}

.addressOptionsBottomSheet .bmSheetHeader,.bmSheetAddressContent .bmSheetHeader{
  background:var(--white);
  position:-webkit-sticky;
  position:sticky;
  top:0;
  height:40px;
  width:100%;
  z-index:10
}

.addressLines{
  color:var(--text-light)
}

.defaultButton{
  background-color:var(--red-bg);
  border-radius:24px;
  color:var(--orange);
  height:24px;
  margin-bottom:9px;
  margin-left:18px;
  padding:4px 8px;
  width:63px
}

.PhoneField .inputGroup{
  flex-direction:row-reverse
}

.PhoneField .leftAddon{
  align-items:center;
  background-color:var(--gray-light-2);
  border-color:var(--border);
  border-right:0;
  height:48px;
  padding:0;
  position:relative
}

.PhoneField .leftAddon .countrySelect{
  color:var(--gray);
  padding:0 8px;
  text-transform:capitalize
}

.PhoneField .leftAddon .countrySelect .menuButton{
  align-items:center;
  display:flex;
  justify-content:space-between;
  width:100%
}

.PhoneField .leftAddon .countrySelect img{
  height:24px;
  margin-right:8px;
  width:34px
}

.PhoneField .leftAddon .countryCode{
  background-color:var(--white);
  color:var(--gray);
  font-size:12px;
  height:100%;
  line-height:48px;
  padding-left:8px
}

.PhoneField .phoneNumberField{
  border-bottom-left-radius:0 !important;
  border-left:0;
  border-top-left-radius:0 !important
}

.PhoneField .phoneNumberField:focus{
  box-shadow:none
}

.PhoneField .phoneNumberField:focus+div.leftAddon{
  border-color:var(--primary)
}

.PhoneField .phoneNumberField[aria-invalid=true]+div.leftAddon{
  border-color:var(--red)
}

.PhoneField .countryList{
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  left:-2px !important;
  padding-top:0;
  position:absolute;
  top:-5px !important;
  transform:scale(1.02) !important;
  width:calc(100vw - 50px);
  z-index:3
}

.PhoneField .countryList .country{
  background-color:var(--white);
  border-bottom:1px solid var(--gray-light-5);
  display:flex;
  padding:12px 16px
}

.PhoneField .countryList .h-full{
  height:100% !important
}

.PhoneField .countryList .inputField{
  border:1px solid var(--gray-light-5);
  padding-left:48px;
  width:100%
}

.gstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:3px;
  border-top-right-radius:3px;
  color:var(--blue-light);
  margin-top:1px;
  height:45px !important;
  min-width:70px
}

.validGstRightElement{
  background-color:var(--secondary-bg);
  border-bottom-right-radius:9px;
  border-top-right-radius:9px;
  color:#0067E2;
  height:46px !important;
  min-width:70px;
  margin:1px
}

.selectedOption{
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-light);
  font-size:14px;
  padding:12px 16px
}

.selectedOption .optionPill{
  align-items:center;
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--text-light);
  display:flex;
  height:32px;
  margin-bottom:4px;
  margin-right:8px;
  padding:4px 8px;
  text-align:center
}

.addonInput{
  background-color:var(--gray-light-2);
  border-color:var(--border);
  border-left:0;
  color:var(--gray);
  display:flex;
  height:48px;
  justify-content:center;
  text-transform:capitalize;
  width:70px
}

.addonInput.lowercase{
  text-transform:lowercase
}

.input-advance-required{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important
}

.wrappable{
  margin-top:-8px
}

.wrappable .checkboxButton{
  margin-top:8px
}

.checkboxButton input[type='radio'],.checkboxButton input[type='checkbox']{
  display:none
}

.checkboxButton input[type='radio']+span,.checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:auto;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.checkboxButton input[type='radio']:checked+span,.checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border:0;
  color:var(--primary);
  font-weight:600;
  padding-left:28px;
  position:relative
}

.checkboxButton input[type='radio']:checked+span::before,.checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.checkboxButton input[type='radio']:disabled+span,.checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.checkboxButton.withoutTick input[type='radio']:checked+span,.checkboxButton.withoutTick input[type='checkbox']:checked+span{
  padding-left:12px
}

.checkboxButton.withoutTick input[type='radio']:checked+span::before,.checkboxButton.withoutTick input[type='checkbox']:checked+span::before{
  content:'';
  height:0;
  width:0
}

.pageCustomerAdd form{
  padding:32px 24px;
  overflow-y:scroll
}

.pageCustomerAdd form::-webkit-scrollbar{
  display:none
}

.pageCustomerAdd .separator100{
  background:#eee;
  height:1px;
  margin-bottom:20px
}

.pageCustomerAdd .formControl{
  margin-bottom:20px
}

.pageCustomerAdd .addon{
  height:100%
}

.pageCustomerAdd .addon.tickIcon svg{
  transform:scale(1.2)
}

.pageCustomerAdd .addon.tickIcon svg path{
  fill:var(--green)
}

.pageCustomerAdd .loading{
  margin:8px
}

.pageCustomerAdd .loading::after{
  border-width:3px;
  height:24px;
  width:24px
}

.pageCustomerAdd input:focus{
  border-color:var(--primary)
}

.pageCustomerAdd input[aria-invalid='true']:focus{
  border-color:var(--red)
}

.modalCancelCustomer .modalFooter{
  display:flex;
  margin-top:16px
}

.modalCancelCustomer .modalFooter button+button{
  margin-left:8px
}

.attachCustomerImage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  margin:24px 0;
  padding:48px 0 56px;
  position:relative
}

.attachCustomerImage button{
  margin-top:8px
}

.attachCustomerImage .attachmentNotes{
  bottom:8px;
  color:#676773;
  font-size:10px;
  line-height:14px;
  position:absolute
}

.attachedCustomerImage{
  margin:24px
}

.attachedCustomerImage img{
  border-radius:8px;
  height:200px;
  -o-object-fit:contain;
     object-fit:contain;
  width:100%
}

.countryTemplate{
  height:48px;
  padding:14px 8px 14px 16px
}

.countryTemplate:not(:first-of-type){
  border-top:1px solid var(--gray-light-5)
}

.first-line{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  margin-bottom:36px
}

.subCategorySearch{
  position:relative
}

.subCategorySearch .h-full{
  height:100% !important
}

.subCategorySearch .validateIcon{
  position:absolute;
  right:0;
  top:-34px
}

.subCategorySearch__inputField{
  border-radius:8px !important;
  padding-left:45px !important
}

.subCategorySearch__inputField__cross{
  margin-right:8px
}

.subCategorySearch__inputField__cross svg{
  transform:scale(0.7)
}

.subCategorySearch__inputField__cross svg path{
  fill:var(--gray)
}

.subCategorySearch__empty_options{
  color:var(--gray);
  display:block;
  text-align:center
}

.subCategorySearch__checkbox{
  border-radius:2px;
  height:18px;
  margin:0;
  margin-right:14px;
  width:18px
}

.subCategorySearch input[type='checkbox']:disabled+span::after{
  left:-12px;
  opacity:0.6
}

.subCategorySearch input[type='checkbox']:disabled+span::before{
  border:0
}

.subCategorySearch input[type='checkbox']:not(:checked),.subCategorySearch input[type='checkbox']:checked{
  left:-9999px;
  position:absolute
}

.subCategorySearch [type='checkbox']:not(:checked)+span,.subCategorySearch [type='checkbox']:checked+span{
  padding-left:34px;
  position:relative
}

.subCategorySearch [type='checkbox']:checked+span{
  color:var(--primary);
  font-weight:600
}

.subCategorySearch [type='checkbox']:not(:checked)+span::before,.subCategorySearch [type='checkbox']:checked+span::before{
  background:var(--white);
  border:1px solid var(--gray-light-3);
  border-radius:2px;
  content:'';
  height:18px;
  left:0;
  position:absolute;
  top:0;
  width:18px
}

.subCategorySearch [type='checkbox']:not(:checked)+span::after,.subCategorySearch [type='checkbox']:checked+span::after{
  content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTcgMTRMMiA5LjE5MjMxTDMuNCA3Ljg0NjE1TDcgMTEuMzA3N0wxNC42IDRMMTYgNS4zNDYxNUw3IDE0WiIgZmlsbD0iIzAwNjdFMiIvPgo8L3N2Zz4K);
  font-size:1.3em;
  height:18px;
  left:0;
  line-height:0.8;
  position:absolute;
  top:0;
  transition:all 0.2s;
  width:18px
}

.subCategorySearch [type='checkbox']:not(:checked)+span::after{
  opacity:0
}

.subCategorySearch__optionsContainer .listItem{
  margin-bottom:24px !important
}

.subCategorySearch__optionsContainer .divider{
  border-top:1px dotted var(--gray);
  height:1px;
  margin-bottom:20px;
  width:100%
}

.widthHeaderWrapper .validateIcon{
  top:0
}

.widthsWrapper{
  flex-wrap:wrap
}

.widthsWrapper__width{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  outline:none;
  padding:10px 16px
}

.widthsWrapper__width--active{
  background-color:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:32px;
  position:relative
}

.widthsWrapper__width--active::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:12px;
  position:absolute;
  top:14px;
  width:12px
}

.addWidthSheet__btns{
  bottom:0;
  height:64px;
  left:0;
  width:100%
}

.addWidthSheet__btns Button{
  height:40px;
  width:112px
}

.addWidthSheet__btns .cancelBtn{
  background-color:var(--white)
}

.categoryForm .categoryTickPosition{
  top:0 !important
}

.categoryForm__categories{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:scroll;
  overflow-y:hidden
}

.categoryForm__categories .category{
  border:1px solid var(--border);
  border-radius:16px;
  height:64px;
  min-width:64px;
  opacity:0.7;
  outline:none !important;
  position:relative;
  transition:all 0.2s cubic-bezier(0.51, 0.47, 0.58, 1)
}

.categoryForm__categories .category:first-child{
  margin-left:24px
}

.categoryForm__categories .category:last-child{
  display:flex;
  margin-right:24px;
  position:relative
}

.categoryForm__categories .category:last-child::after{
  content:'';
  height:100%;
  position:absolute;
  right:-24px;
  width:24px
}

.categoryForm__categories .category--filled{
  background-color:var(--secondary-bg) !important;
  border:1px solid var(--primary) !important;
  color:var(--primary) !important;
  font-weight:600 !important;
  line-height:16px;
  padding-top:10px !important
}

.categoryForm__categories .category--filled::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:11px;
  left:40%;
  position:absolute;
  top:14px;
  width:12px
}

.categoryForm__categories .category--active{
  background-color:var(--gray-light-2);
  border:1px solid var(--gray-light-3);
  line-height:16px;
  min-height:72px;
  min-width:72px;
  opacity:1
}

.categoryForm__categories .category--active::after{
  border:12px solid transparent;
  border-bottom:12px solid var(--gray-light-6);
  bottom:-20px;
  content:'';
  height:12px;
  left:30%;
  position:absolute;
  width:12px
}

.categoryForm__categories .category .polyester-font{
  font-size:13px !important;
  line-height:16px;
  padding:0
}

.categoryForm__categories--collapsed .category{
  opacity:1
}

.validateIcon{
  position:relative;
  top:-4px;
  transform:scale(1.2)
}

.validateIcon.isValid rect{
  fill:var(--green)
}

.textBreak{
  text-align:center;
  word-break:break-all
}

.fabricCategorySheet{
  background-color:var(--gray-light-6);
  margin-top:-14px;
  padding:40px 24px;
  padding-bottom:100px;
  position:absolute
}

.fabricCategorySheet__subCategory__count{
  border-radius:50%;
  line-height:16px
}

.supplierForm .step3{
  padding-left:0;
  padding-right:0
}

.certificationsWrapper{
  flex-wrap:wrap
}

.certificationsWrapper__width{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  outline:none;
  padding:10px 16px
}

.certificationsWrapper__width--active{
  background-color:var(--secondary-bg);
  border:1px solid var(--primary);
  color:var(--primary);
  font-weight:600;
  padding-left:32px;
  position:relative
}

.certificationsWrapper__width--active::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:12px;
  position:absolute;
  top:14px;
  width:12px
}

.selectedOption{
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-light);
  font-size:14px;
  padding:12px 16px
}

.selectedOption .optionPill{
  align-items:center;
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--text-light);
  display:flex;
  height:32px;
  margin-bottom:4px;
  margin-right:8px;
  padding:4px 8px;
  text-align:center
}

.disabled{
  pointer-events:none
}

.enabled{
  pointer-events:auto
}

.supplierLegalName{
  background-color:var(--purple-light-opacity);
  border-radius:8px;
  margin-top:20px
}

.supplierLegalName .label{
  color:var(--gray);
  font-weight:400
}

.supplierLegalName .legalName{
  color:var(--text-light);
  font-weight:600
}

.productionAttachmentsMarkReady{
  border:1px dashed var(--border);
  height:58px;
  margin-bottom:12px;
  border-radius:12px
}

.productionAttachmentsMarkReady>:first-child{
  border-right:1px dashed var(--border)
}

.productionAttachmentsMarkReady .attachedFileWrapper,.productionAttachmentsMarkReady .attachFileButton{
  flex-grow:1;
  width:50%
}

.productionAttachmentsMarkReady .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:58px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.productionAttachmentsMarkReady .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%
}

.locofast-info-banner{
  display:flex;
  align-items:center;
  background-color:#f4f9ff;
  border-radius:16px;
  padding:12px 16px;
  margin-top:24px
}

.locofast-info-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#0070f3;
  color:white;
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:12px;
  font-weight:bold;
  margin-right:8px;
  font-family:'Nunito Sans', sans-serif
}

.locofast-info-text{
  color:#303c4a;
  font-size:14px;
  font-family:'Nunito Sans', sans-serif
}

.fabricForm form .subForm{
  padding-bottom:84px
}

.fabricForm form .subForm .mainLabel{
  font-size:16px;
  font-weight:800;
  line-height:24px;
  color:var(--gray2)
}

.fabricForm .requestTabs{
  display:inline-flex;
  align-items:center;
  background:var(--white);
  border-radius:20px
}

.fabricForm .requestTabs .pill{
  padding:6px 16px;
  background:white;
  font-size:12px;
  font-weight:600
}

.fabricForm .requestTabs .activePill{
  background-color:var(--secondary-bg);
  color:var(--primary);
  border:1px solid var(--primary)
}

.fabricForm .requestTabs button{
  padding-left:16px;
  padding-right:16px;
  padding-top:8px;
  padding-bottom:8px;
  border:1px solid transparent;
  border-radius:20px;
  color:var(--gray)
}

.fabricForm .requestTabs button:first-child{
  margin-right:2px
}

.fabricForm .requestTabs button.active,.fabricForm .requestTabs button.active:focus{
  font-weight:600;
  background:var(--secondary-bg);
  border-color:var(--primary);
  box-shadow:0 0 2px rgba(0,0,0,0.12);
  color:var(--primary)
}

.fabricForm .slidable{
  border:1px solid var(--border)
}

.fabricForm .label{
  line-height:16px;
  margin-bottom:0;
  font-weight:400
}

.fabricForm .small-width{
  width:25%
}

.fabricForm .headingLabel{
  color:var(--gray2);
  font-weight:800;
  font-size:16px;
  line-height:24px
}

.fabricForm .crossIcon{
  transform:scale(0.7)
}

.fabricForm input{
  color:var(--text-light);
  height:48px
}

.fabricForm input[aria-invalid='true']{
  box-shadow:none
}

.fabricForm input[aria-invalid='true']+div.addon{
  border-color:var(--red)
}

.fabricForm input:focus{
  box-shadow:none
}

.fabricForm input:focus+div.addon{
  border-color:var(--primary)
}

.fabricForm .inactive{
  cursor:not-allowed;
  pointer-events:none
}

.fabricForm .inactive input{
  opacity:1
}

.fabricForm .wrappable{
  margin-top:-8px
}

.fabricForm .wrappable .radioButton,.fabricForm .wrappable .checkboxButton{
  margin-top:8px
}

.fabricForm .wrappable .radioButton.withTriangle,.fabricForm .wrappable .checkboxButton.withTriangle{
  position:relative
}

.fabricForm .wrappable .radioButton.withTriangle::after,.fabricForm .wrappable .checkboxButton.withTriangle::after{
  border:20px solid transparent;
  border-bottom-color:var(--blue-two);
  border-left-color:transparent;
  border-right-color:transparent;
  border-top:0;
  bottom:-33px;
  content:'';
  position:absolute;
  width:40px;
  transform:translateX(-50%);
  left:50%
}

.fabricForm .radioButton input[type='radio'],.fabricForm .radioButton input[type='checkbox'],.fabricForm .checkboxButton input[type='radio'],.fabricForm .checkboxButton input[type='checkbox']{
  display:none
}

.fabricForm .radioButton input[type='radio']+div,.fabricForm .checkboxButton input[type='radio']+div{
  margin-block:5px;
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:auto;
  margin-right:8px;
  white-space:nowrap;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px
}

.fabricForm .radioButton input[type='radio']:checked+div,.fabricForm .checkboxButton input[type='radio']:checked+div{
  margin-block:5px;
  background-color:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:8px;
  color:var(--primary);
  display:block;
  font-size:14px;
  font-weight:600;
  height:auto;
  margin-right:8px;
  white-space:nowrap;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:6px
}

.fabricForm .radioButton input[type='radio']:checked+div span:first-child,.fabricForm .checkboxButton input[type='radio']:checked+div span:first-child{
  width:12px;
  height:14px;
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=)
}

.fabricForm .radioButton input[type='radio']+span,.fabricForm .radioButton input[type='checkbox']+span,.fabricForm .checkboxButton input[type='radio']+span,.fabricForm .checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:auto;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.fabricForm .radioButton input[type='radio']:checked+span,.fabricForm .radioButton input[type='checkbox']:checked+span,.fabricForm .checkboxButton input[type='radio']:checked+span,.fabricForm .checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border:0;
  color:var(--primary);
  font-weight:600;
  padding-left:10px;
  position:relative;
  padding-left:26px
}

.fabricForm .radioButton input[type='radio']:checked+span::before,.fabricForm .radioButton input[type='checkbox']:checked+span::before,.fabricForm .checkboxButton input[type='radio']:checked+span::before,.fabricForm .checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  top:14px;
  width:12px;
  position:absolute;
  left:8px
}

.fabricForm .radioButton input[type='radio']:disabled+span,.fabricForm .radioButton input[type='checkbox']:disabled+span,.fabricForm .checkboxButton input[type='radio']:disabled+span,.fabricForm .checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.fabricForm .radioButton.withoutTick input[type='radio']:checked+span,.fabricForm .radioButton.withoutTick input[type='checkbox']:checked+span,.fabricForm .checkboxButton.withoutTick input[type='radio']:checked+span,.fabricForm .checkboxButton.withoutTick input[type='checkbox']:checked+span{
  padding-left:12px
}

.fabricForm .radioButton.withoutTick input[type='radio']:checked+span::before,.fabricForm .radioButton.withoutTick input[type='checkbox']:checked+span::before,.fabricForm .checkboxButton.withoutTick input[type='radio']:checked+span::before,.fabricForm .checkboxButton.withoutTick input[type='checkbox']:checked+span::before{
  content:'';
  height:0;
  width:0
}

.fabricForm .finishedType input[type='radio']:checked+span,.fabricForm .finishedType input[type='checkbox']:checked+span{
  border:0px solid var(--blue-light)
}

.fabricForm .checkboxContainer .checkbox-label{
  position:relative;
  top:14px
}

.fabricForm .checkboxContainer [type='checkbox']:checked+span{
  color:var(--black);
  font-weight:normal
}

.fabricForm .formGroup input{
  border-bottom-left-radius:4px;
  border-bottom-right-radius:0;
  border-top-left-radius:4px;
  height:48px
}

.fabricForm .formGroup input.border-r-0{
  border-right-width:0
}

.fabricForm .formGroup input.rounded-tr-none{
  border-top-right-radius:0
}

.fabricForm .formGroup .addon{
  background-color:var(--gray-light-2);
  border-color:var(--border);
  border-left:0;
  color:var(--gray);
  display:flex;
  height:48px;
  justify-content:center;
  text-transform:capitalize;
  width:70px
}

.fabricForm .formGroup .addon.lowercase{
  text-transform:lowercase
}

.fabricForm .formGroup .unitAddon{
  padding:0;
  width:auto
}

.fabricForm .formGroup .unitAddon .chakra-menu__menu-button{
  background-color:transparent
}

.fabricForm .formGroup .unitAddon .chakra-menu__menu-button>span{
  display:flex;
  align-items:center
}

.fabricForm .formGroup .unitAddon .chakra-menu__menu-button>span svg{
  margin-left:10px
}

.fabricForm .formGroup .unitAddon .chakra-menu__menu-list{
  box-shadow:0 0 4px rgba(0,1,38,0.1);
  min-width:auto;
  border-width:0;
  padding:0px
}

.fabricForm .formGroup .unitAddon .chakra-menu__menuitem{
  color:var(--gray);
  font-weight:600;
  padding-bottom:14px;
  padding-left:16px;
  padding-top:14px;
  width:104px
}

.fabricForm .formGroup .unitAddon .chakra-menu__menuitem:focus,.fabricForm .formGroup .unitAddon .chakra-menu__menuitem:active{
  background-color:inherit
}

.fabricForm .formGroup .unitAddon .chakra-menu__menuitem.selected{
  background:var(--gray-light-2)
}

.fabricForm .formGroup .staticUnitAddon{
  width:auto
}

.fabricForm .formGroup .element{
  color:var(--placeholder);
  height:48px
}

.fabricForm textarea{
  border-color:var(--border);
  border-radius:4px;
  font-size:14px
}

.fabricForm textarea::-moz-placeholder{
  color:var(--placeholder)
}

.fabricForm textarea:-ms-input-placeholder{
  color:var(--placeholder)
}

.fabricForm textarea::placeholder{
  color:var(--placeholder)
}

.fabricForm .splitField{
  margin:0;
  width:120px
}

.fabricForm .splitField input{
  border-radius:8px
}

.fabricForm .suggestionsLabel{
  color:var(--gray);
  font-size:12px;
  padding-bottom:8px;
  padding-top:10px
}

.fabricForm .suggestionsItem{
  background-color:var(--blue-two);
  border-radius:24px;
  color:var(--text-light);
  margin-right:8px;
  padding:6px 16px
}

.fabricForm .suggestionsItem.selected{
  background-color:var(--blue-light);
  color:var(--primary)
}

.fabricForm .selectedOptionError{
  border:1px solid var(--red);
  border-radius:4px;
  color:var(--text-light);
  font-size:14px;
  padding:12px 16px
}

.fabricForm .selectedOption{
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--text-light);
  font-size:14px;
  padding:12px 16px;
  font-weight:600
}

.fabricForm .selectedOption .optionPill{
  align-items:center;
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--text-light);
  display:flex;
  height:32px;
  margin-bottom:4px;
  margin-right:8px;
  padding:4px 8px;
  text-align:center
}

.fabricForm .compositionPill{
  background:var(--secondary-bg);
  border-radius:8px;
  color:var(--primary);
  display:inline-block;
  line-height:16px;
  margin-bottom:4px;
  margin-right:8px;
  padding:4px 8px;
  padding:12px 8px;
  text-align:center
}

.fabricForm .placeholder{
  color:var(--placeholder);
  display:block;
  line-height:32px;
  padding-left:8px
}

.fabricForm .attachFabricImage{
  align-items:center;
  background:var(--secondary-bg);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  height:200px;
  margin:0;
  padding:48px 0 56px;
  width:144px
}

.fabricForm .attachFabricImage button{
  font-size:12px;
  line-height:24px;
  margin-top:8px;
  padding:4px 8px
}

.fabricForm .attachedFabricImage img{
  border-radius:8px;
  height:200px;
  -o-object-fit:cover;
     object-fit:cover;
  width:144px
}

.fabricForm .attachedFabricImage .iconWithOverlay{
  width:144px
}

.fabricForm .formActionButtons{
  height:40px !important
}

.fabricForm .inputWithSelect .addon{
  height:48px;
  padding-right:16px;
  width:40px
}

.fabricForm .compositionInput .selectedOption{
  padding:4px
}

.fabricForm .compositionInput .selectedOption .compositionPill{
  margin-bottom:0
}

.fabricForm .helperText{
  margin-top:8px;
  font-size:12px;
  color:var(--gray-light-3)
}

.fabricForm footer{
  background-color:var(--white);
  box-shadow:0 -1px 2px rgba(0,0,0,0.1);
  min-width:365px;
  width:100%
}

.fabricForm footer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px
}

.fabricForm footer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

.fabricForm footer .previousStepButton svg{
  transform:scale(1.5)
}

.fabricForm footer .nextStepButton svg{
  padding-left:4px
}

.fabricForm footer .nextStepButton svg path{
  fill:var(--white)
}

.fabricForm footer .stepsStatus{
  color:var(--gray-light-3);
  font-size:12px;
  line-height:16px;
  padding-bottom:6px
}

.fabricForm footer .stepsStatus span{
  color:var(--gray)
}

.fabricForm footer .stepsProgress{
  border-radius:8px 0 0 8px;
  display:flex
}

.fabricForm footer .stepsProgress div{
  background:var(--gray-light-2);
  height:6px;
  width:25px
}

.fabricForm footer .stepsProgress div:first-child{
  border-bottom-left-radius:8px;
  border-top-left-radius:8px
}

.fabricForm footer .stepsProgress div:last-child{
  border-bottom-right-radius:8px;
  border-top-right-radius:8px
}

.fabricForm footer .stepsProgress div.filled{
  background:var(--primary)
}

.fabricForm .customerDetails{
  background-color:rgba(225,225,234,0.2);
  border-radius:4px;
  margin-bottom:24px;
  margin-left:-12px;
  padding:14px 12px;
  text-align:center;
  width:calc(100% + 24px)
}

.fabricForm .customerDetails .item{
  padding-bottom:14px;
  padding-top:14px
}

.fabricForm .customerDetails .item:first-of-type{
  padding-top:0
}

.fabricForm .customerDetails .item:last-of-type{
  padding-bottom:0
}

.fabricForm .customerDetails .editButton{
  background-color:var(--white);
  border:0;
  height:40px;
  margin-top:24px;
  width:112px
}

.fabricForm .hot-request-red .chakra-switch__track{
  background-color:var(--red-bg-3)
}

.gst-container{
  background:var(--purple-light-opacity)
}

.gst-container-label{
  color:var(--gray)
}

.gst-container .header{
  display:flex;
  justify-content:center
}

.gst-container .edit-btn{
  background:var(--white);
  color:var(--primary);
  height:40px;
  width:112px
}

.crossInCalendar{
  position:absolute;
  right:16px;
  top:30px;
  z-index:4
}

.multiSelect{
  height:auto
}

.multiSelect .compositionField{
  max-height:440px;
  overflow-y:auto
}

.multiSelect .coachMark{
  background-color:var(--yellow-bg-2);
  border-radius:8px;
  box-shadow:0 0 4px rgba(0,103,226,0.12);
  padding-left:10px;
  padding-right:26px;
  top:-60px;
  z-index:4
}

.multiSelect .coachMark div{
  line-height:14px
}

.multiSelect .coachMark::before{
  border:8px solid var(--yellow-bg-2);
  border-bottom-color:transparent;
  border-left-color:transparent;
  border-right-color:transparent;
  bottom:-16px;
  content:'';
  left:18px;
  position:absolute
}

.violetText{
  color:var(--neutralV1) !important
}

.fabriceMetaNote{
  background-color:var(--yellow-bg);
  border-radius:4px;
  color:var(--text-light);
  padding:8px 12px
}

.bottomSheetContent.customerFieldSheet{
  padding:16px 0;
  padding-bottom:56px
}

.newBorderRadius{
  border-radius:8px
}

.footer{
  align-items:center;
  background-color:var(--white);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  display:flex;
  gap:24px;
  justify-content:flex-end;
  left:0;
  padding:8px 24px;
  position:fixed;
  width:100%
}

.footer .clear,.footer .confirm{
  font-size:1rem;
  font-weight:700;
  padding:12px 26px;
  text-transform:capitalize
}

.footer .clear{
  color:var(--primary)
}

.confirmButton{
  background-color:var(--primary) !important;
  color:var(--white)
}

.itemFinished{
  border-bottom:8px solid var(--gray-light-6);
  position:relative
}

.itemFinished .item{
  background-color:var(--white);
  border:1px solid var(--gray-light-2);
  border-radius:8px;
  display:block;
  float:left;
  margin:2px;
  text-align:center
}

.itemFinished .item.item p{
  padding:10px
}

.containerWrapper{
  margin:24px 0
}

.fabricCategory{
  display:grid;
  grid-template-columns:auto auto;
  gap:8px
}

.fabricCategory .radioButton input[type='radio'],.fabricCategory .radioButton input[type='checkbox']{
  display:none
}

.fabricCategory .radioButton input[type='radio']+span,.fabricCategory .radioButton input[type='checkbox']+span{
  width:100%;
  min-width:152px;
  margin-right:0;
  max-width:400px
}

.fabricCategory .radioButton input[type='radio']:checked+span,.fabricCategory .radioButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border:0;
  color:var(--primary);
  font-weight:600;
  padding-left:28px;
  position:relative;
  width:100%;
  min-width:152px;
  margin-right:0;
  max-width:400px
}

.fabricCategory .radioButton input[type='radio']:checked+span::before,.fabricCategory .radioButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  top:14px;
  width:12px
}

.fabricCategory .radioButton input[type='radio']:disabled+span,.fabricCategory .radioButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.fabricCategory .radioButton.withoutTick input[type='radio']:checked+span,.fabricCategory .radioButton.withoutTick input[type='checkbox']:checked+span{
  padding-left:12px
}

.fabricCategory .radioButton.withoutTick input[type='radio']:checked+span::before,.fabricCategory .radioButton.withoutTick input[type='checkbox']:checked+span::before{
  content:'';
  height:0;
  width:0
}

.errorMessage{
  color:red;
  margin-top:8px
}

.subForm .fabricCategory{
  margin-top:12px
}

.subForm .fabricCategory .radioButton{
  margin-top:0
}

.subForm .fabricCategory .radioButton.withTriangle[aria-selected='true']{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  color:var(--primary);
  position:relative
}

.subForm .fabricCategory .radioButton.withTriangle[aria-selected='true'] svg path{
  fill:var(--primary)
}

.subForm .fabricCategory .radioButton.withTriangle[aria-selected='true']::after{
  border:20px solid transparent;
  border-bottom-color:var(--blue-two);
  border-left-color:transparent;
  border-right-color:transparent;
  border-top:0;
  bottom:-33px;
  content:'';
  position:absolute;
  width:40px;
  transform:translateX(-50%);
  left:50%
}

.subForm .fabricCategory{
  margin-top:12px
}

.subForm .fabricCategory .radioButton{
  margin-top:0
}

.subForm .fabricCategory .radioButton.withTriangle[aria-selected='true']{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  color:var(--primary);
  position:relative
}

.subForm .fabricCategory .radioButton.withTriangle[aria-selected='true'] svg path{
  fill:var(--primary)
}

.subForm .fabricCategory .radioButton.withTriangle[aria-selected='true']::after{
  border:20px solid transparent;
  border-bottom-color:var(--blue-two);
  border-left-color:transparent;
  border-right-color:transparent;
  border-top:0;
  bottom:-33px;
  content:'';
  position:absolute;
  width:40px;
  transform:translateX(-50%);
  left:50%
}

@media (min-width: 1024px){
  .fabricCategory{
    margin-top:-8px
  }

  .fabricCategory .radioButton,.fabricCategory .checkboxButton{
    margin-top:8px
  }

  .fabricCategory .radioButton[aria-selected='true'],.fabricCategory .checkboxButton[aria-selected='true']{
    background:var(--secondary-bg);
    border:1px solid var(--blue-light);
    color:var(--primary);
    position:relative
  }

  .fabricCategory .radioButton[aria-selected='true'] svg path,.fabricCategory .checkboxButton[aria-selected='true'] svg path{
    fill:var(--primary)
  }

  .fabricCategory .radioButton[aria-selected='true']::after,.fabricCategory .checkboxButton[aria-selected='true']::after{
    border:14px solid transparent;
    border-bottom-color:var(--blue-two);
    border-left-color:transparent;
    border-right-color:transparent;
    border-top:0;
    bottom:-20px;
    content:'';
    position:absolute;
    width:30px
  }

  .fabricForm footer{
    max-width:40%
  }
}

.toggle .chakra-switch__track{
  background-color:var(--blue-light);
  height:24px;
  width:40px
}

.toggle .chakra-switch__thumb{
  margin-top:2px;
  width:20px;
  height:20px
}

@media (min-width: 1024px){
  .error-icon{
    width:30px
  }
}

@media (max-width: 768px){
  .error-icon{
    width:24px
  }
}

@media (max-width: 576px){
  .error-icon{
    width:34px
  }
}

.confrimOrderForm form .subForm,.dispatchOrderFlow form .subForm{
  padding-left:24px;
  padding-right:24px;
  padding-bottom:84px;
  padding-top:24px
}

.confrimOrderForm form .noPaddingTop,.dispatchOrderFlow form .noPaddingTop{
  padding-top:0
}

.confrimOrderForm form .noMarginBottom,.dispatchOrderFlow form .noMarginBottom{
  margin-bottom:0
}

.confrimOrderForm form .advancePaymentCheckbox .chakra-checkbox__control,.dispatchOrderFlow form .advancePaymentCheckbox .chakra-checkbox__control{
  border:1px solid #93939f;
  height:18px;
  width:18px
}

.confrimOrderForm form .advancePaymentCheckbox .chakra-checkbox__control[data-checked][data-hover] [data-focus],.dispatchOrderFlow form .advancePaymentCheckbox .chakra-checkbox__control[data-checked][data-hover] [data-focus]{
  background:var(--primary);
  border:0 !important;
  box-shadow:none !important;
  height:18px;
  width:18px
}

.confrimOrderForm form .advancePaymentCheckbox .chakra-checkbox__control[data-focus][data-hover],.dispatchOrderFlow form .advancePaymentCheckbox .chakra-checkbox__control[data-focus][data-hover]{
  border:0
}

.confrimOrderForm form .advancePaymentCheckbox input[type='checkbox']:hover,.dispatchOrderFlow form .advancePaymentCheckbox input[type='checkbox']:hover{
  border:2px solid var(--red);
  height:18px;
  width:18px
}

.confrimOrderForm form .advancePaymentCheckbox .chakra-checkbox__label,.dispatchOrderFlow form .advancePaymentCheckbox .chakra-checkbox__label{
  color:var(--text-light);
  font-size:12px
}

.confrimOrderForm form .productionAttachments,.dispatchOrderFlow form .productionAttachments{
  height:56px;
  margin-bottom:12px
}

.confrimOrderForm form .productionAttachments .attachedFileWrapper,.confrimOrderForm form .productionAttachments .attachFileButton,.dispatchOrderFlow form .productionAttachments .attachedFileWrapper,.dispatchOrderFlow form .productionAttachments .attachFileButton{
  flex-grow:1;
  width:50%
}

.confrimOrderForm form .productionAttachments .attachedFileWrapper,.dispatchOrderFlow form .productionAttachments .attachedFileWrapper{
  background:rgba(225,225,234,0.2);
  border-right:1px dashed var(--border);
  height:56px
}

.confrimOrderForm form .productionAttachments .attachedFileWrapper .attachedFile,.dispatchOrderFlow form .productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.confrimOrderForm form .productionAttachments .attachedFileWrapper .attachedFile-2,.dispatchOrderFlow form .productionAttachments .attachedFileWrapper .attachedFile-2{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  margin:0 16px;
  padding:0 12px
}

.confrimOrderForm form .productionAttachments .attachFileButton,.dispatchOrderFlow form .productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%;
  background:var(--purple-light-opacity);
  border-radius:4px
}

.confrimOrderForm .chakra-form__label,.dispatchOrderFlow .chakra-form__label{
  font-size:12px;
  line-height:16px
}

.confrimOrderForm input,.dispatchOrderFlow input{
  color:var(--text-light);
  height:48px
}

.confrimOrderForm input:focus,.dispatchOrderFlow input:focus{
  box-shadow:none
}

.confrimOrderForm input:focus+div.addon,.dispatchOrderFlow input:focus+div.addon{
  border-color:var(--primary)
}

.confrimOrderForm input[aria-invalid='true'],.dispatchOrderFlow input[aria-invalid='true']{
  box-shadow:none
}

.confrimOrderForm input[aria-invalid='true']+div.addon,.dispatchOrderFlow input[aria-invalid='true']+div.addon{
  border-color:var(--red)
}

.confrimOrderForm .pill_wrapper .pill,.dispatchOrderFlow .pill_wrapper .pill{
  background:var(--blue-two) !important;
  border:0 !important;
  height:32px !important;
  min-width:41px !important;
  padding:6px 16px !important
}

.confrimOrderForm .pill_wrapper input[type='radio']:checked+span,.dispatchOrderFlow .pill_wrapper input[type='radio']:checked+span{
  background-color:var(--secondary-bg) !important;
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.confrimOrderForm .pill_wrapper input[type='radio']:checked+span::before,.dispatchOrderFlow .pill_wrapper input[type='radio']:checked+span::before{
  background:none !important;
  content:'' !important
}

.confrimOrderForm .radioButton input[type='radio'],.confrimOrderForm .radioButton input[type='checkbox'],.confrimOrderForm .checkboxButton input[type='radio'],.confrimOrderForm .checkboxButton input[type='checkbox'],.dispatchOrderFlow .radioButton input[type='radio'],.dispatchOrderFlow .radioButton input[type='checkbox'],.dispatchOrderFlow .checkboxButton input[type='radio'],.dispatchOrderFlow .checkboxButton input[type='checkbox']{
  display:none
}

.confrimOrderForm .radioButton input[type='radio']+span,.confrimOrderForm .radioButton input[type='checkbox']+span,.confrimOrderForm .checkboxButton input[type='radio']+span,.confrimOrderForm .checkboxButton input[type='checkbox']+span,.dispatchOrderFlow .radioButton input[type='radio']+span,.dispatchOrderFlow .radioButton input[type='checkbox']+span,.dispatchOrderFlow .checkboxButton input[type='radio']+span,.dispatchOrderFlow .checkboxButton input[type='checkbox']+span{
  background-color:var(--white);
  border:1px solid var(--border);
  border-radius:24px;
  color:var(--text-light);
  display:block;
  font-size:14px;
  font-weight:normal;
  height:40px;
  margin-right:8px;
  padding:10px 12px;
  white-space:nowrap
}

.confrimOrderForm .radioButton input[type='radio'].selected+span,.confrimOrderForm .radioButton input[type='checkbox'].selected+span,.confrimOrderForm .checkboxButton input[type='radio'].selected+span,.confrimOrderForm .checkboxButton input[type='checkbox'].selected+span,.dispatchOrderFlow .radioButton input[type='radio'].selected+span,.dispatchOrderFlow .radioButton input[type='checkbox'].selected+span,.dispatchOrderFlow .checkboxButton input[type='radio'].selected+span,.dispatchOrderFlow .checkboxButton input[type='checkbox'].selected+span{
  border:1px solid rgba(0,103,226,0.5)
}

.confrimOrderForm .radioButton input[type='radio']:checked+span,.confrimOrderForm .radioButton input[type='checkbox']:checked+span,.confrimOrderForm .checkboxButton input[type='radio']:checked+span,.confrimOrderForm .checkboxButton input[type='checkbox']:checked+span,.dispatchOrderFlow .radioButton input[type='radio']:checked+span,.dispatchOrderFlow .radioButton input[type='checkbox']:checked+span,.dispatchOrderFlow .checkboxButton input[type='radio']:checked+span,.dispatchOrderFlow .checkboxButton input[type='checkbox']:checked+span{
  background-color:var(--secondary-bg);
  border-color:var(--primary);
  color:var(--primary);
  font-weight:600;
  height:40px;
  padding-left:28px;
  position:relative
}

.confrimOrderForm .radioButton input[type='radio']:checked+span::before,.confrimOrderForm .radioButton input[type='checkbox']:checked+span::before,.confrimOrderForm .checkboxButton input[type='radio']:checked+span::before,.confrimOrderForm .checkboxButton input[type='checkbox']:checked+span::before,.dispatchOrderFlow .radioButton input[type='radio']:checked+span::before,.dispatchOrderFlow .radioButton input[type='checkbox']:checked+span::before,.dispatchOrderFlow .checkboxButton input[type='radio']:checked+span::before,.dispatchOrderFlow .checkboxButton input[type='checkbox']:checked+span::before{
  background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00Ljk1NSA4Ljc0OEwxLjg1NCA1LjY0NmEuNS41IDAgMDAtLjcwOC43MDhsMy41IDMuNWEuNS41IDAgMDAuNzQ3LS4wNDVsNS41LTdhLjUuNSAwIDAwLS43ODYtLjYxOEw0Ljk1NSA4Ljc0OHoiIGZpbGw9IiMwMDY3RTIiIHN0cm9rZT0iIzAwNjdFMiIgc3Ryb2tlLXdpZHRoPSIuNCIvPjwvc3ZnPgo=);
  content:'';
  height:12px;
  left:10px;
  position:absolute;
  top:14px;
  width:12px
}

.confrimOrderForm .radioButton input[type='radio']:disabled+span,.confrimOrderForm .radioButton input[type='checkbox']:disabled+span,.confrimOrderForm .checkboxButton input[type='radio']:disabled+span,.confrimOrderForm .checkboxButton input[type='checkbox']:disabled+span,.dispatchOrderFlow .radioButton input[type='radio']:disabled+span,.dispatchOrderFlow .radioButton input[type='checkbox']:disabled+span,.dispatchOrderFlow .checkboxButton input[type='radio']:disabled+span,.dispatchOrderFlow .checkboxButton input[type='checkbox']:disabled+span{
  opacity:0.5
}

.confrimOrderForm .formGroup input,.dispatchOrderFlow .formGroup input{
  border-bottom-left-radius:4px;
  border-bottom-right-radius:0;
  border-top-left-radius:4px;
  height:48px
}

.confrimOrderForm .formGroup input.border-r-0,.dispatchOrderFlow .formGroup input.border-r-0{
  border-right-width:0
}

.confrimOrderForm .formGroup input.rounded-tr-none,.dispatchOrderFlow .formGroup input.rounded-tr-none{
  border-top-right-radius:0
}

.confrimOrderForm .formGroup .addon,.dispatchOrderFlow .formGroup .addon{
  background-color:var(--gray-light-2);
  border-color:var(--border);
  border-left:0;
  color:var(--gray);
  display:flex;
  height:48px;
  justify-content:center;
  text-transform:capitalize;
  width:70px
}

.confrimOrderForm .formGroup .addon.lowercase,.dispatchOrderFlow .formGroup .addon.lowercase{
  text-transform:lowercase
}

.confrimOrderForm .formGroup .element,.dispatchOrderFlow .formGroup .element{
  color:var(--placeholder);
  height:48px
}

.confrimOrderForm .placeholder,.dispatchOrderFlow .placeholder{
  color:var(--placeholder);
  display:block;
  line-height:32px;
  padding-left:8px
}

.confrimOrderForm footer,.dispatchOrderFlow footer{
  box-shadow:0 -1px 2px rgba(0,0,0,0.1)
}

.confrimOrderForm footer .twoBtnFooter .backStepButton,.dispatchOrderFlow footer .twoBtnFooter .backStepButton{
  background:var(--white)
}

.confrimOrderForm footer .twoBtnFooter button,.dispatchOrderFlow footer .twoBtnFooter button{
  font-size:16px;
  font-weight:bold
}

.confrimOrderForm footer .previousStepButton,.dispatchOrderFlow footer .previousStepButton{
  border:1px solid var(--gray-light-2);
  border-radius:50px;
  padding:12px
}

.confrimOrderForm footer .previousStepButton:disabled svg path,.dispatchOrderFlow footer .previousStepButton:disabled svg path{
  fill:var(--gray-light-3)
}

.confrimOrderForm footer .previousStepButton svg,.dispatchOrderFlow footer .previousStepButton svg{
  transform:scale(1.5)
}

.confrimOrderForm footer .nextStepButton svg,.dispatchOrderFlow footer .nextStepButton svg{
  padding-left:4px
}

.confrimOrderForm footer .nextStepButton svg path,.dispatchOrderFlow footer .nextStepButton svg path{
  fill:var(--white)
}

.confrimOrderForm footer .stepsWrapper .parent .filled,.dispatchOrderFlow footer .stepsWrapper .parent .filled{
  background:var(--primary);
  border:1px solid var(--primary);
  border-radius:50%;
  height:8px;
  width:8px
}

.confrimOrderForm footer .stepsWrapper .parent .notFilled,.dispatchOrderFlow footer .stepsWrapper .parent .notFilled{
  border:1px solid var(--gray);
  border-radius:50%;
  height:8px;
  width:8px
}

.confrimOrderForm footer .stepsWrapper .parent .active,.dispatchOrderFlow footer .stepsWrapper .parent .active{
  border:2px solid var(--primary);
  border-radius:50%;
  height:12px;
  width:12px
}

.confrimOrderForm .chakra-input__group,.dispatchOrderFlow .chakra-input__group{
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden
}

.confrimOrderForm .chakra-input__group:focus-within,.dispatchOrderFlow .chakra-input__group:focus-within{
  border-color:var(--primary)
}

.confrimOrderForm .chakra-input__group .chakra-input,.dispatchOrderFlow .chakra-input__group .chakra-input{
  border:0;
  border-bottom-right-radius:0;
  border-top-right-radius:0
}

.confrimOrderForm .chakra-input__group .chakra-input__right-addon,.dispatchOrderFlow .chakra-input__group .chakra-input__right-addon{
  border:0
}

.confrimOrderForm .stickyNote{
  bottom:58px;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  position:fixed;
  z-index:12;
  padding-top:8px;
  padding-bottom:8px;
  text-align:center;
  --bg-opacity:1;
  background-color:#fff;
  background-color:rgba(255, 255, 255, var(--bg-opacity));
  font-weight:600;
  width:100%
}

.confrimOrderForm .confirmFabricDetails .editOrderCTA{
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  height:16px;
  line-height:16px;
  min-width:36px
}

.addressBottomSheet_footer{
  bottom:0;
  height:56px;
  left:0;
  padding:8px 24px;
  width:100%
}

.addressBottomSheet_footer .chakra-button{
  font-size:16px;
  font-weight:700;
  height:40px;
  width:112px
}

.addressBottomSheet_footer .chakra-button:nth-child(1){
  background:var(--white);
  color:var(--primary)
}

.datePickerIcon,.transformIcon{
  transform:scale(0.7)
}

.selectDate{
  margin-top:0
}

.text-white{
  color:var(--white) !important
}

.bmSheetAddressContent{
  height:80vh !important;
  overflow-y:scroll
}

.bmSheetAddressContent .bmSheetHeader{
  background:var(--white);
  height:40px;
  width:calc(100% - 48px);
  z-index:10
}

.bmSheetAddressContent .bmSheetBody{
  margin:56px 0
}

.pillCreditWidth{
  min-width:40px;
  text-align:center
}

.inputWithCurrency .inputLeft-content{
  left:16px;
  margin-top:1px;
  text-align:end;
  width:auto
}

.inputWithCurrency .input{
  border-radius:4px 0 0 4px;
  border-right:0;
  padding-left:34px
}

.inputWithoutRightBorder .input{
  border-radius:4px 0 0 4px;
  border-right:0;
  padding-left:34px
}

.inputWithRightAddon{
  align-items:center !important;
  min-width:68px !important;
  text-align:center
}

.stickyNote{
  position:fixed;
  width:100%;
  background:var(--yellow-bg-2);
  bottom:56px;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  display:flex;
  justify-content:space-between;
  padding:5px 24px;
  z-index:24
}

.stickyNoteOrder{
  position:fixed;
  width:100%;
  background:var(--yellow-bg-2);
  bottom:56px;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  color:var(--text-light);
  display:flex;
  justify-content:space-between;
  padding:5px 24px;
  z-index:24
}

.courierPartners{
  display:flex;
  flex-flow:wrap
}

.attachments{
  border:1px solid #cee4ff
}

.verifyDetails footer .iconSize{
  margin-right:10px;
  transform:scale(1.5)
}

.verifyDetails .tabList{
  box-shadow:0 2px 4px rgba(0,0,0,0.04);
  margin-bottom:0
}

.verifyDetails .tabList button{
  border-color:var(--white);
  color:var(--gray-light-3);
  font-weight:600;
  line-height:1;
  padding-bottom:16px;
  padding-top:16px
}

.verifyDetails .tabList button[aria-selected='true']{
  border-color:var(--primary);
  color:var(--primary)
}

.verifyDetails .orderDetailsHeader{
  display:flex;
  justify-content:space-between;
  margin-bottom:25px
}

.verifyDetails .attachments{
  border:1px solid #cee4ff
}

.verifyDetails .transformIcon{
  transform:scale(0.7)
}

.verifyDetails .editOrderCTA{
  font-size:14px;
  font-style:normal;
  font-weight:bold;
  line-height:16px
}

.verifyDetails .tabList{
  background:var(--white);
  margin-top:-2px;
  position:fixed;
  z-index:10
}

.verifyDetails .tabList+.chakra-tabs__tab-panels .chakra-tabs__tab-panel{
  padding-top:48px !important
}

.timestampMeridiem{
  background-color:var(--chakra-colors-gray-100);
  border-radius:10px;
  display:flex;
  height:48px;
  justify-content:center;
  margin-left:5px;
  text-align:center
}

.timestampMeridiem .timestampMeridiemButton{
  border-radius:10px;
  height:100%;
  text-align:center;
  width:56px
}

.timestampTime{
  align-items:center;
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  margin-right:20px
}

.timestampTime .timestampInput{
  background-color:var(--white);
  border:1px solid;
  border-color:var(--border);
  border-radius:10px;
  color:var(--text);
  font-size:14px;
  font-weight:400;
  height:48px;
  padding:0;
  text-align:center;
  width:48px
}

.errorText{
  color:var(--red)
}

.crossButton{
  left:8px
}

.btnOrderMarkDispatch{
  border-radius:70px !important;
  bottom:30px;
  font-size:larger !important;
  padding-left:20px;
  padding-right:20px;
  width:auto !important
}

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

.pdc-container{
  display:grid;
  gap:8px;
  margin-bottom:60px;
  position:relative
}

.pdc-container .margin-top-0{
  margin-top:0 !important
}

.pdc-container .section{
  background-color:var(--white);
  padding:24px;
  padding-bottom:48px
}

.pdc-container .section .heading{
  color:var(--gray);
  font-family:Nunito Sans;
  font-size:1rem;
  font-weight:800;
  text-align:left
}

.pdc-container .section .form-control{
  display:grid;
  gap:2rem;
  margin-top:1.5rem
}

.pdc-container .section .form-control .productionAttachments{
  border:1px dashed var(--border);
  height:56px
}

.pdc-container .section .form-control .productionAttachments .attachFileButton{
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  height:100%;
  width:100%
}

.pdc-container .section .form-control .productionAttachments .attachedFileWrapper{
  background:var(--purple-light-opacity);
  border-right:1px dashed var(--border);
  height:56px;
  width:100%
}

.pdc-container .section .form-control .productionAttachments .attachedFileWrapper .attachedFile{
  background:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:16px;
  color:var(--primary);
  height:28px;
  padding:0 12px
}

.pdc-container .section .form-control .box-shadow-none{
  box-shadow:none
}

.pdc-container .section .form-control .box-shadow-none span:focus{
  box-shadow:none
}

.pdc-container .section .form-control .box-shadow-none span[data-focus]{
  box-shadow:none
}

.pdc-container .section .form-control .visible-order-list{
  background-color:var(--secondary-bg);
  border:1px solid var(--blue-light);
  border-radius:0.5rem;
  margin-top:0.5rem;
  padding:0 1rem
}

.pdc-container .section .form-control .visible-order-list .list-item{
  align-items:center;
  border-bottom:1px solid var(--blue-light);
  display:flex;
  justify-content:space-between;
  padding:1rem 0
}

.pdc-container .section .form-control .visible-order-list .list-item:last-of-type{
  border-bottom:0
}

.pdc-container .footer{
  align-items:center;
  background-color:var(--white);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  display:flex;
  gap:24px;
  justify-content:flex-end;
  left:0;
  padding:8px 24px;
  position:fixed;
  width:100%
}

.pdc-container .footer .clear,.pdc-container .footer .confirm{
  font-size:1rem;
  font-weight:700;
  padding:12px 26px;
  text-transform:capitalize
}

.pdc-container .footer .clear{
  color:var(--primary)
}

.pdc-container .footer .confirm{
  background-color:var(--primary);
  color:var(--white)
}

.pdc-container .footer .confirm:disabled:hover{
  background-color:var(--primary)
}

.customerFieldSheet{
  position:relative
}

.customerFieldSheet .orders-container{
  display:grid;
  gap:0.25rem;
  margin-bottom:65px;
  margin-top:1rem;
  max-height:60vh;
  overflow-y:auto
}

.customerFieldSheet .orders-container .order{
  align-items:center;
  border:1px solid transparent;
  border-radius:0.5rem;
  color:var(--gray);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  padding:14px 12px;
  transition-duration:250ms
}

.customerFieldSheet .orders-container .order .fabric_name,.customerFieldSheet .orders-container .order .fabric_id{
  font-size:14px
}

.customerFieldSheet .orders-container .order.selected{
  background-color:var(--secondary-bg);
  border-color:var(--blue-light);
  color:var(--primary)
}

.customerFieldSheet .orders-container .order.selected .fabric_name{
  font-weight:600
}

.customerFieldSheet .css-yk16xz-control{
  min-height:50px !important
}

.customerFieldSheet .footer{
  align-items:center;
  background-color:var(--white);
  bottom:0;
  box-shadow:0 -1px 2px rgba(0,1,38,0.1);
  display:flex;
  gap:24px;
  justify-content:flex-end;
  left:0;
  padding:8px 24px;
  position:fixed;
  width:100%
}

.customerFieldSheet .footer .clear,.customerFieldSheet .footer .confirm{
  font-size:1rem;
  font-weight:700;
  padding:12px 26px;
  text-transform:capitalize
}

.customerFieldSheet .footer .clear{
  color:var(--primary)
}

.customerFieldSheet .footer .confirm{
  background-color:var(--primary);
  color:var(--white)
}

.customerFieldSheet .footer .confirm:disabled:hover{
  background-color:var(--primary)
}

.customer-bottomsheet{
  padding:0 !important
}