.hint.success {
  background: rgba(88, 217, 113, 0.0784313725);
}

.hint.alert {
  background: rgba(253, 208, 68, 0.0784313725);
}

.hint.error {
  background: rgba(255, 0, 0, 0.0784313725);
}

.hint-container {
  padding: 20px;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.hint-icon {
  height: 20px;
  padding-right: 10px;
  flex: 0.01;
  font: normal normal normal 15px/25px Noto Sans Regular;
}

.hint-close {
  flex: 0.01;
}

.hint.mobile .hint-icon {
  display: none;
}

.hint-title {
  font: normal normal 600 12px/20px Noto Sans Bold;
}

.hint-text {
  font: normal normal normal 12px/20px Noto Sans Regular;
}

@media screen and (min-width: 968px) {
  .hint {
    display: block;
  }
  .hint.mobile .hint-icon {
    display: block;
  }
  .hint-title {
    font: normal normal 600 15px/20px Noto Sans Bold;
  }
  .hint-text {
    font: normal normal normal 15px/20px Noto Sans Regular;
  }
}

.title-icon {
  height: 20px;
  font: normal normal normal 16px/22px Noto Sans Bold;
  color: #434343;
  display: inline-block;
}

.title-icon-container {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.title-icon-container .title-icon > svg {
  height: 20px;
  font-size: 17px;
  padding-Right: 5px;
}

.sub-text {
  font: normal normal normal 12px/14px Noto Sans Regular;
  color: #434343;
  padding-bottom: 20px;
  padding-top: 7px;
}

@media screen and (min-width: 968px) {
  .title-icon {
    font: normal normal normal 18px/24px Noto Sans Bold;
  }
  .title-icon-container .title-icon > svg {
    height: 20px;
    font-size: 20px;
    padding-Right: 10px;
  }
  .title-icon-container .title-icon.rotate > svg {
    font-size: 20px;
    transform: rotate(179deg);
    padding-left: 10px;
    padding-right: 0px;
  }
  .sub-text {
    font: normal normal normal 15px/21px Noto Sans Regular;
    color: #434343;
    padding-bottom: 20px;
    padding-top: 7px;
  }
}

.upload-component {
  display: flex;
  flex-direction: column;
  row-gap: 28px;
}

.upload-component-area {
  display: flex;
  background-color: #E5F1F9;
  border-radius: 4px;
  height: 90px;
  border: 1px dashed;
  border-color: #0072C6;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.upload-component-area.highlight {
  border: 2px dashed;
  border-color: #58D971;
}

.upload-component-area.disabled {
  background-color: #DEDEDE;
  border-color: #C8C8C8;
}
.upload-component-area.disabled div {
  color: #C8C8C8;
}

.photos-container.upload {
  display: flex;
  flex: 1;
  column-gap: 20px;
  row-gap: 20px;
  flex-wrap: wrap;
}

input[type=file] {
  display: none;
}

.photos-container.upload > div {
  flex: 1;
  width: 90px;
  height: 90px;
  max-width: 90px;
  max-height: 90px;
  min-width: 90px;
  min-height: 90px;
  position: relative;
}

.img-container.upload {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 89, 125, 0.2);
  position: absolute;
  top: 0px;
  left: 0px;
}

.img-container.upload > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.img-container.loading {
  width: 81px;
}

.img-dialog .MuiPaper-root.MuiDialog-paper {
  width: 100%;
  height: 100%;
}
.img-dialog .MuiPaper-root.MuiDialog-paper .MuiDialogContent-root.img-container-dialog-content {
  display: flex;
  flex: 1;
  padding: 0px;
  padding-top: 0px !important;
}
.img-dialog .MuiPaper-root.MuiDialog-paper .MuiDialogContent-root.img-container-dialog-content .img-container-dialog {
  display: flex;
  flex: 1;
  padding: 30px;
  padding-top: 0px;
}
.img-dialog .MuiPaper-root.MuiDialog-paper .MuiDialogContent-root.img-container-dialog-content .img-container-dialog .img-container.large {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  justify-items: center;
  position: unset;
  top: unset;
  left: unset;
}
.img-dialog .MuiPaper-root.MuiDialog-paper .MuiDialogContent-root.img-container-dialog-content .img-container-dialog .img-container.large img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.MuiIconButton-root.trash-button {
  width: 25px;
  height: 25px;
  background-color: #F4573B;
  border-radius: 100px;
  border: 1px solid #FAFAFA;
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  display: flex;
}

.MuiIconButton-root.trash-button:hover {
  background-color: #DD4D33;
}

.MuiIconButton-root.trash-button svg {
  width: 13px;
  height: 15px;
}

.photo-title-container {
  display: block;
}

.MuiBox-root .upload-component-subTitle {
  font: normal normal normal 13px/15px Noto Sans Regular;
}

@media screen and (min-width: 968px) {
  .upload-component-area {
    height: 150px;
  }
  .MuiBox-root .upload-component-subTitle {
    font: normal normal normal 15px/20px Noto Sans Regular;
    color: #929292;
    display: block;
  }
}

.MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1 {
  font: normal normal normal 14px/19px Noto Sans Regular;
  color: #434343;
}

.option-text {
  font: normal normal normal 14px/19px Noto Sans Regular;
  color: #929292;
}

.option-text.disabled {
  font: normal normal normal 14px/19px Noto Sans Regular;
  color: #929292;
}

.option-text-container {
  display: none;
}

p.option-text {
  margin: 0;
}

.link {
  font: normal normal normal 13px/20px Noto Sans Regular;
  text-decoration: underline;
  color: #00A3E4;
  cursor: pointer;
}

.option-text.itallics {
  font: normal normal normal 12px/17px Noto Sans Italic;
  padding-left: 3px;
  color: #929292;
}

.terms-conditions-container {
  background-color: rgba(0, 114, 198, 0.031372549);
  border-radius: 5px;
  padding: 30px;
}

.terms-conditions-title {
  font: normal normal 600 15px/20px Noto Sans Bold;
  flex: 1;
  align-self: center;
}

.MuiButtonBase-root.MuiCheckbox-root.MuiCheckbox-colorPrimary.Mui-checked {
  color: #0072C6;
}

.MuiButtonBase-root.MuiRadio-root.MuiRadio-colorPrimary.Mui-checked {
  color: #0072C6;
}

.MuiIconButton-label {
  width: 24px;
  height: 24px;
}

.MuiFormControlLabel-root .option-text {
  display: none;
}

.MuiFormGroup-root[role=radiogroup] {
  display: flex;
  flex-direction: column;
}

.option-text-mobile {
  display: unset;
  font-size: initial;
}

.option-text.itallic {
  font: normal normal normal 14px/19px Noto Sans italic;
}

.text-desktop {
  display: none;
}

.MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1.Mui-disabled {
  color: #C8C8C8;
}
.MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1.Mui-disabled .option-text {
  color: #C8C8C8;
}

.owner-risk-value-dialog {
  flex: 1;
  background-color: rgba(88, 217, 113, 0.0784313725);
  margin-top: 20px;
  padding: 10px 10px 10px 10px;
  border-radius: 10px;
}
.owner-risk-value-dialog .slider-container {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
}
.owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked {
  color: #0072C6;
  height: 10px;
  flex: 0.8;
  margin-right: 30px;
}
.owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-rail {
  height: 8px;
}
.owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-track {
  height: 8px;
}
.owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-mark {
  height: 8px;
}
.owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-thumb {
  height: 16px;
  width: 16px;
  border: 5px solid #0072C6;
}
.owner-risk-value-dialog .slider-container svg {
  margin-right: 10px;
  display: flex;
  align-self: center;
  justify-content: flex-end;
}
.owner-risk-value-dialog .slider-container svg path {
  flex: 1;
}
.owner-risk-value-dialog .slider-container .MuiInputBase-root {
  flex: 0.2;
  background-color: white;
}
.owner-risk-value-dialog .calculation-cover {
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
  margin-bottom: 20px;
  font: normal normal normal 13px/15px Noto Sans Regular;
}
.owner-risk-value-dialog .calculation-cover span {
  padding-left: 10px;
  font: normal normal normal 13px/15px Noto Sans bold;
}
.owner-risk-value-dialog .flavor-text {
  font: normal normal normal 13px/15px Noto Sans Regular;
}
.owner-risk-value-dialog .accept-cover {
  display: flex;
}
.owner-risk-value-dialog .accept-cover div {
  align-self: center;
  font: normal normal normal 13px/15px Noto Sans bold;
}

@media screen and (min-width: 968px) {
  .MuiFormGroup-root[role=radiogroup] {
    flex-direction: row;
  }
  .terms-conditions-container {
    background-color: rgba(0, 114, 198, 0.031372549);
    border-radius: 5px;
    padding: 30px;
  }
  .option-text-container {
    padding-left: 2%;
    display: block;
  }
  .MuiFormControlLabel-root .option-text {
    display: unset;
  }
  .MuiFormGroup-root[role=radiogroup] {
    display: flex;
    flex-direction: column;
  }
  .link {
    font: normal normal normal 15px/20px Noto Sans Regular;
  }
  .option-text-mobile {
    display: none;
  }
  .option-text-mobile {
    display: none;
  }
  .MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1 {
    font: normal normal normal 15px/25px Noto Sans Regular;
    color: #434343;
  }
  .text-desktop {
    display: unset;
  }
  .terms-conditions-title {
    font: normal normal 600 20px/27px Noto Sans Bold;
  }
  .owner-risk-value-dialog {
    margin-top: 20px;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
  }
  .owner-risk-value-dialog .slider-container {
    flex-direction: row;
    padding-left: unset;
    padding-right: unset;
  }
  .owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked {
    color: #0072C6;
    height: 10px;
    flex: 0.8;
    margin-right: 30px;
  }
  .owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-rail {
    height: 8px;
  }
  .owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-track {
    height: 8px;
  }
  .owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-mark {
    height: 8px;
  }
  .owner-risk-value-dialog .slider-container .MuiSlider-root.MuiSlider-colorPrimary.MuiSlider-marked .MuiSlider-thumb {
    height: 16px;
    width: 16px;
    border: 5px solid #0072C6;
  }
  .owner-risk-value-dialog .slider-container svg {
    margin-right: 10px;
    display: flex;
    align-self: center;
    justify-content: flex-end;
  }
  .owner-risk-value-dialog .slider-container svg path {
    flex: 1;
  }
  .owner-risk-value-dialog .slider-container .MuiInputBase-root {
    flex: 0.2;
    background-color: white;
  }
  .owner-risk-value-dialog .calculation-cover {
    display: flex;
    justify-content: flex-end;
    padding-top: 10px;
    font: normal normal normal 20px/20px Noto Sans Regular;
  }
  .owner-risk-value-dialog .calculation-cover span {
    padding-left: 10px;
    font: normal normal normal 20px/20px Noto Sans bold;
  }
  .owner-risk-value-dialog .flavor-text {
    font: normal normal normal 13px/15px Noto Sans Regular;
  }
  .owner-risk-value-dialog .accept-cover {
    display: flex;
  }
  .owner-risk-value-dialog .accept-cover div {
    align-self: center;
    font: normal normal normal 15px/20px Noto Sans bold;
  }
}

.input-error {
  font-size: 13px;
}

.input-error.strict {
  color: #F44336;
}

.input-error.nonStrict {
  color: black;
}

.autocomplete-container {
  border: 1px solid #E0E0E0;
  padding: 1px;
}
.autocomplete-container:hover {
  border: 1px solid #0474C7;
}
.autocomplete-container input {
  border: 0px;
  outline: none;
}

.autocomplete-container.focused {
  border: 2px solid #0474C7;
  margin: -2px 0px;
}

.depot-list {
  overflow: auto;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

.custom-data-list-title {
  font: normal normal normal 14px/19px Noto Sans Bold;
  color: #7b7c7f;
  padding: 10px;
}

.depot-container {
  display: flex;
  flex-direction: column;
  font-size: 0.5em;
  cursor: pointer;
}
.depot-container .depot-container-title {
  font-weight: 800;
  display: flex;
  align-items: center;
}
.depot-container .depot-container-title .depot-name {
  cursor: inherit;
  font: normal normal normal 14px/19px Noto Sans Bold;
}
.depot-container .depot-container-title .depot-distance {
  color: #7b7c7f;
}

@media screen and (min-width: 768px) {
  .depot-name {
    cursor: inherit;
    font: normal normal normal 15px/20px Noto Sans Bold;
  }
}

.map-container {
  padding-Bottom: 30px;
}

.googleMap {
  margin-top: 20px;
  width: 100%;
  height: 200px;
  border-Radius: 5px;
}

.gm-svpc {
  display: none;
}

.gm-style-mtc {
  display: none;
}

.gm-fullscreen-control {
  display: block;
}

.gmnoprint {
  display: none;
}

@media screen and (min-width: 968px) {
  .map-container {
    padding-Bottom: 50px;
  }
  .gm-fullscreen-control {
    display: none;
  }
  .gmnoprint {
    display: block;
  }
  .googleMap {
    margin-top: 30px;
    width: 100%;
    height: 400px;
    border-Radius: 10px;
  }
}

.cube-container .cube .back-cube, .cube-container .cube .right-cube, .cube-container .cube .front-cube, .cube-container .cube .left-cube {
  border-width: 1px;
}
.cube-container .cube .front-cube {
  background-color: #b3b4b8;
}
.cube-container .cube .left-cube {
  background-color: #dbdcdd;
}

.dimension-UI-container {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
}

.dimension-container {
  width: 500px;
  height: 307px;
  margin: auto;
  margin-top: 5%;
  display: flex;
}
.dimension-container #man-container img {
  max-width: 100%;
}

.cube {
  margin-top: 0;
  position: absolute;
  max-width: 246px;
  max-height: 307px;
  bottom: 0px;
}

.cube-container {
  margin-top: 0 !important;
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
  flex: 0.6;
  bottom: 0px;
}

.back-cube {
  margin-top: 0 !important;
  border-top: 2px solid black;
  float: left;
}

.right-cube {
  margin-top: 0 !important;
  border-top: 2px solid black;
  float: left;
  top: 0;
}

.front-cube {
  margin-top: 0 !important;
  border: 2px solid black;
  float: left;
}

.left-cube {
  margin-top: 0 !important;
  border: 2px solid black;
  border-right: 0;
  float: left;
}

.face {
  margin-top: 0 !important;
  position: absolute;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.up {
  margin-top: 0 !important;
  -moz-transform: rotate(-20deg) skewX(-20deg) skewY(0);
  -ms-transform: rotate(-20deg) skewX(-20deg) skewY(0);
  -o-transform: rotate(-20deg) skewX(-20deg) skewY(0);
  -webkit-transform: rotate(-20deg) skewX(-20deg) skewY(0);
  transform: rotate(-20deg) skewX(-20deg) skewY(0);
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.down {
  margin-top: 0 !important;
  -moz-transform: rotate(20deg) skewX(20deg) skewY(0);
  -ms-transform: rotate(20deg) skewX(20deg) skewY(0);
  -o-transform: rotate(20deg) skewX(20deg) skewY(0);
  -webkit-transform: rotate(20deg) skewX(20deg) skewY(0);
  transform: rotate(20deg) skewX(20deg) skewY(0);
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.man-container {
  margin-top: 0 !important;
  float: left;
  height: 100%;
  width: 86px;
  position: relative;
  margin-right: 15px;
  flex: 0.4;
  justify-content: flex-end;
}

.mainfreight-man {
  position: absolute;
  bottom: -5px;
  right: 0px;
}

@media screen and (min-width: 968px) {
  .dimension-UI-container {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
  }
}

.category-grid {
  display: none;
}

.category-btn {
  font: normal normal normal 18px/24px Roboto Medium;
  text-align: center;
  padding-top: 20px;
  margin: 0px;
  color: #434343;
}

.category-selector {
  display: block;
}

.category-btn-container-icon {
  width: 120px;
  height: 120px;
  border-radius: 8px !important;
  box-shadow: 0px 3px 6px rgba(0, 89, 125, 0.2);
}
.category-btn-container-icon svg {
  height: 45px;
}

.material-icons {
  color: #0072C6;
}

@media screen and (min-width: 968px) {
  .category-grid {
    margin-Top: 10px;
    margin-Bottom: 10px;
    display: flex;
    flex-Wrap: wrap;
    column-gap: 53px;
    row-gap: 30px;
  }
  .category-btn-container {
    max-width: 123.8px;
  }
  .category-selector {
    display: none;
  }
}

.button-container {
  flex: 1;
  display: flex;
  align-items: unset;
  justify-content: flex-end;
}

.MuiDataGrid-cell .button-container svg {
  height: 23px;
}

.MuiButtonBase-root.MuiIconButton-root.edit, .MuiButtonBase-root.MuiIconButton-root.trash {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  padding: 0px;
}

.MuiButtonBase-root.MuiIconButton-root.edit {
  background-color: white;
}

.MuiButtonBase-root.MuiIconButton-root.trash {
  background-color: #DEDEDE;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.add-item-btn.full {
  padding-top: 13px;
  padding-bottom: 12px;
  width: 100%;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.add-item-btn.full.Mui-disabled.Mui-disabled {
  background-color: #E5E5E5;
}

.total-container {
  display: flex;
}

.total-container > div {
  flex: 1;
  width: 50%;
  padding-top: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 9px;
}

.total-container-counter {
  background-color: #0072C6;
  color: white;
  font: normal normal normal 12px/14px Noto Sans Regular;
  display: flex;
  flex-direction: row;
}

.total-container-counter > div {
  flex: 1;
  display: flex;
}

.MuiInputBase-root.MuiOutlinedInput-root.white.Mui-disabled {
  background-color: white;
  color: #434343;
  font: normal normal normal 15px/20px Noto Sans Regular;
}

.quote-summary-container {
  padding-top: 0px;
  padding-Right: 20px;
  padding-Left: 20px;
  padding-bottom: 0px;
}
.quote-summary-container .reference-container {
  display: flex;
  justify-content: flex-start;
  color: #C8C8C8;
  font: normal normal normal 10px/25px Noto Sans Regular;
}

.estimate-details-title {
  display: flex;
  flex: 1;
}

.reference-container {
  display: flex;
  justify-content: flex-start;
  color: #C8C8C8;
  font: normal normal normal 10px/25px Noto Sans Regular;
}

.photos-container.estimate {
  display: flex;
  flex: 1;
  column-gap: 10px;
  row-gap: 10px;
  flex-wrap: wrap;
}

.photos-container.estimate > div {
  flex: 1;
  position: relative;
  max-width: 65px;
  max-height: 65px;
  min-width: 65px;
  min-height: 65px;
}

.img-container.estimate {
  width: 65px;
  height: 65px;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 89, 125, 0.2);
  position: unset;
}

.img-container.estimate > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.shipment-estimate-details {
  background-color: #EDF3F7;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 20px;
  border-radius: 0px;
  position: relative;
  left: 0px;
  right: 0px;
}

.item-list-container-mobile {
  margin-top: 20px;
}
.item-list-container-mobile .item-container-mobile:first-child {
  border-radius: 4px 4px 0px 0px;
}
.item-list-container-mobile .item-container-mobile {
  background-color: white;
  padding: 10px;
  flex: 1;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DEDEDE;
  display: flex;
  flex-direction: column;
}

.item-mobile {
  display: flex;
  flex-direction: row;
}

.item-text-container {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.item-photo-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.item-category-text {
  color: #C8C8C8 !important;
  font: normal normal normal 13px/28px Noto Sans Regular;
  padding: 0px;
  margin: 0px;
}

.date-picker-error .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #F4573B;
}

@media screen and (min-width: 968px) {
  .MuiButtonBase-root.MuiIconButton-root.edit, .MuiButtonBase-root.MuiIconButton-root.trash {
    width: 46px;
    height: 46px;
    padding: 15px;
  }
  .shipment-estimate-details {
    padding: 30px;
    border-radius: 4px 4px 0px 4px;
    position: unset;
  }
  .reference-container {
    display: flex;
    justify-content: flex-end;
    color: #0072C6;
    font: normal normal normal 15px/20px Noto Sans Bold;
    padding-top: 10px;
  }
  .total-container > div:first-child {
    flex: 1;
    width: 50%;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 11px;
  }
  .total-container > div:last-child {
    flex: 0.5;
    width: 50%;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 11px;
  }
  .total-container-counter {
    background-color: #0072C6;
    color: white;
    font: normal normal normal 20px/27px Noto Sans Regular;
    display: flex;
    flex-direction: row;
  }
  .photos-container {
    display: flex;
    flex: 1;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
  }
  .photos-container > div {
    max-width: 57px;
    max-height: 57px;
    min-width: 57px;
    min-height: 57px;
  }
  .img-container {
    width: 57px;
    height: 57px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .button-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .MuiButtonBase-root.MuiIconButton-root.edit {
    background-color: #0072C6;
    margin-right: 10px;
  }
  .quote-summary-container {
    padding-top: 0px;
    padding-Right: unset;
    padding-Left: unset;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .quote-summary-container .reference-container {
    display: flex;
    justify-content: flex-start;
    color: #C8C8C8;
    font: normal normal normal 10px/25px Noto Sans Regular;
  }
  .quote-summary-container .quote-table-container {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
  }
  .quote-summary-container .quote-table-container div {
    flex: 1;
  }
  .custom-table-container {
    display: flex;
    height: 100%;
    flex: 1;
  }
  .custom-table-container.fill {
    display: flex;
  }
  .custom-table-container.fill div {
    flex: 1;
  }
  .custom-table-container.fill .empty-space {
    display: none;
  }
}

/* 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: currentColor;
	--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],
.PhoneInputCountrySelect[readonly] {
	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);
}
.MuiFormGroup-root.row[role=radiogroup] {
  display: flex;
  flex-direction: row;
}

.table-container {
  border-radius: 0px;
  margin-bottom: 10px;
  box-shadow: none;
  border: 1px solid #C8C8C8;
}

.table-bottom-row {
  background-color: #0072C6;
}
.table-bottom-row .MuiTableCell-root.MuiTableCell-body {
  font: normal normal normal 14px/14px Noto Sans Bold !important;
  color: white !important;
}
.table-bottom-row .MuiTableCell-root.MuiTableCell-body.MuiTableCell-alignRight {
  font: normal normal normal 20px/14px Noto Sans Bold !important;
}

.MuiTableCell-root.MuiTableCell-body {
  font: normal normal normal 12px/14px Noto Sans Bold;
  vertical-align: top;
  padding: 10px;
}

.MuiTableCell-root.MuiTableCell-body.large {
  font: normal normal normal 14px/14px Noto Sans Bold;
}

.MuiTableCell-root.MuiTableCell-body.MuiTableCell-alignRight {
  font: normal normal normal 12px/14px Noto Sans Regular;
}

.MuiTableCell-root.MuiTableCell-body.MuiTableCell-alignRight.large {
  font: normal normal normal 14px/14px Noto Sans Regular;
}

.MuiTableRow-root.grey {
  background-color: #F9F9F9;
}

.grey-text {
  color: #C8C8C8;
  font: normal normal normal 12px/14px Noto Sans Regular;
}

.photos-container.quote {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  column-gap: 5px;
  row-gap: 5px;
  flex-wrap: wrap;
}

.photos-container.quote > div {
  flex: 1;
  position: relative;
  max-width: 45px;
  max-height: 45px;
  min-width: 45px;
  min-height: 45px;
}

.img-container.quote {
  width: 45px;
  height: 45px;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 89, 125, 0.2);
  position: unset;
}

.img-container.quote > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.MuiFormControlLabel-root.term-conditions-checkbox {
  margin-left: 0px;
  margin-right: 0px;
}

.MuiDialogActions-root .MuiButton-container {
  flex-Direction: column;
  display: flex;
  width: 100%;
  row-gap: 10px;
  column-gap: unset;
  flex: 1;
}
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-text {
  background-color: #0072C6;
  color: white;
  text-transform: unset;
  font: normal normal normal 15px/20px Noto Sans Bold;
  flex: 1;
}
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-outlined {
  text-transform: unset;
  font: normal normal normal 15px/20px Noto Sans Regular;
  flex: 1;
}
.MuiDialogActions-root .link {
  flex: 1;
  width: 100%;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 9px;
}

.MuiDialogActions-spacing > :not(:first-child) {
  margin-left: 0px !important;
}

.term-conditions-checkbox .MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1 {
  font: normal normal normal 13px/18px Noto Sans Regular;
}

.term-conditions-checkbox {
  flex: 1;
  padding-top: 17px;
  padding-bottom: 10px;
  width: 100%;
}
.term-conditions-checkbox .MuiCheckbox-colorPrimary {
  width: 18px;
  height: 24px;
}

.MuiDialog-paperFullWidth {
  padding: 23px;
  max-height: 700px !important;
  max-width: 700px !important;
}

.MuiDialogContent-root.MuiDialogContent-dividers {
  border: none;
  font: normal normal normal 13px/16px Noto Sans Regular;
  padding-right: 0px;
  padding-left: 0px;
}
.MuiDialogContent-root.MuiDialogContent-dividers div {
  display: flex;
  padding-bottom: 15px;
}
.MuiDialogContent-root.MuiDialogContent-dividers div div:first-child {
  flex: 0.1;
  font-size: 10px;
}
.MuiDialogContent-root.MuiDialogContent-dividers div div:last-child {
  flex: 0.9;
}
.MuiDialogContent-root.MuiDialogContent-dividers div.bold {
  font: normal normal normal 13px/16px Noto Sans bold;
}
.MuiDialogContent-root.MuiDialogContent-dividers span.bold {
  font: normal normal normal 13px/16px Noto Sans bold;
}
.MuiDialogContent-root.MuiDialogContent-dividers div:last-child {
  padding-bottom: 0px;
}

.MuiDialogContent-root.MuiDialogContent-dividers::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  border-radius: 50px;
  background-color: #E5E5E5;
}

.MuiDialogContent-root.MuiDialogContent-dividers::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background: #0072C6;
}

.MuiTypography-root.MuiTypography-h6.MuiDialogTitle-root {
  align-self: center;
  font: normal normal normal 18px/24px Noto Sans Bold;
  color: #434343;
  font-family: unset;
  font-weight: unset;
  font-size: unset;
  line-height: unset;
}

.MuiDialogActions-root.MuiDialogActions-spacing {
  padding-left: 0px;
  padding-right: 0px;
}

.mobile .link {
  padding-left: 3px;
  padding-right: 3px;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.Mui-disabled.Mui-disabled {
  background-color: #E5E5E5;
}

@media screen and (min-width: 968px) {
  .MuiDialogContent-root.MuiDialogContent-dividers {
    padding-left: unset;
    padding-right: unset;
    padding-bottom: 0px;
  }
  .MuiDialogContent-root.MuiDialogContent-dividers div div:first-child {
    flex: 0.03;
    font-size: unset;
  }
  .MuiDialogContent-root.MuiDialogContent-dividers div div:last-child {
    flex: 0.97;
  }
  .MuiDialog-paperFullWidth {
    padding: 50px;
  }
  .MuiTypography-root.MuiTypography-h6.MuiDialogTitle-root {
    align-self: unset;
    font: normal normal normal 30px/41px Noto Sans Bold;
    color: #00446A;
  }
  .term-conditions-checkbox {
    flex: 1;
    padding-bottom: 40px;
    padding-top: 20px;
    width: 100%;
  }
  .MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background-color: #0072C6;
    color: white;
    text-transform: unset;
    font: normal normal normal 15px/20px Noto Sans Bold;
    width: unset;
    padding: 9px 20px 9px 20px;
    align-self: flex-start;
  }
  .MuiDialogActions-root .MuiButton-container {
    flex-Direction: row-reverse;
    column-gap: 10px;
    row-gap: unset;
  }
  .MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-text {
    flex: unset;
  }
  .MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-outlined {
    flex: unset;
  }
  .term-conditions-checkbox .MuiTypography-root.MuiFormControlLabel-label.MuiTypography-body1 {
    font: normal normal normal 15px/25px Noto Sans Regular;
  }
  .MuiDialogActions-root.MuiDialogActions-spacing {
    padding-left: unset;
    padding-right: unset;
  }
}

.navbar-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #034383;
  padding: 10px;
}

.navbar-menu {
  position: absolute;
  width: 100%;
  top: 39px;
  left: -100%;
  text-align: center;
  transition: all 0.5s ease;
}
.navbar-menu.active {
  color: white;
  background: #034383;
  transition: all 0.5s ease;
  left: 0;
  z-index: 9;
}

.navbar-links {
  padding: 1rem 0;
  text-decoration: none;
  padding: 1rem;
}

.navbar-logo {
  padding: 0 1rem;
  height: 20px;
}

.navbar-divider {
  display: none;
}

.navbar-menu-item {
  display: flex;
  align-items: center;
  justify-content: start;
}
.navbar-menu-item.hover {
  color: #0072C6;
}

.navbar-menu-icon {
  width: 15px;
  height: 15px;
}

.navbar-button {
  box-shadow: none;
  text-transform: none !important;
  font-size: 13 !important;
}
.navbar-button:hover {
  color: #0072C6;
  box-shadow: none !important;
  background: none !important;
}
.navbar-button:focus {
  color: #0072C6;
  background: none !important;
}

.navbar-search {
  flex: 0.9;
}

.navbar-top {
  display: none;
}

@media screen and (min-width: 968px) {
  .header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 100%;
  }
  .navbar-items {
    display: flex;
    background-color: white;
    justify-content: start;
    box-shadow: 0 5px 10px -5px rgba(8, 8, 8, 0.4), 0 10px 20px -10px rgba(8, 8, 8, 0.15);
    padding: 2rem;
  }
  .navbar-top {
    display: flex;
    flex: 1;
    height: 2rem;
    max-height: 2rem;
    background-color: #005eb8;
    font: normal normal normal 13px/17px Noto Sans Bold;
    color: white;
  }
  .navbar-top span {
    flex: 1;
    align-self: center;
    margin-left: 1rem;
    padding-left: 32px;
  }
  .navbar {
    display: flex;
    flex: 1;
  }
  .navbar .logo {
    flex: 1;
  }
  .navbar .logo img {
    height: 50px;
    max-width: 375px;
    transition: all 0.1s;
  }
  .navbar.shrink .logo img {
    height: 40px;
  }
  .navbar-logo-container {
    flex: 0.1;
  }
  .navbar-search {
    flex: 0.3;
  }
  .menu-icon {
    display: none;
  }
  .navbar-menu {
    background: white;
    transition: none;
    display: flex;
    flex-direction: row;
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    flex: 0.7;
  }
  .navbar-links {
    padding: 0 0.5rem;
    text-decoration: none;
    color: black;
  }
  .navbar-links:hover {
    color: #0072C6;
  }
  .navbar-menu-item {
    background-color: white;
  }
  .stepper {
    padding-left: 35% !important;
    padding-right: 35% !important;
    position: fixed;
    top: 0.7rem;
    right: -8.5rem;
    z-index: 999;
    width: 50%;
    height: 23px;
  }
  .stepper .MuiStepLabel-label.MuiStepLabel-alternativeLabel {
    transition: all 0.1s;
  }
  .stepper.shrink .MuiStepLabel-label.MuiStepLabel-alternativeLabel {
    margin-top: 8px;
  }
  .stepper-float {
    padding-left: 35% !important;
    padding-right: 35% !important;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: 50%;
    height: 23px;
  }
  .MuiPaper-root.MuiStepper-root.MuiStepper-horizontal.stepper {
    background-color: transparent;
  }
  .header-bottom {
    background-color: #034383;
    height: 2rem;
    transition: all 0.1s;
    z-index: -1;
    background-image: linear-gradient(130deg, #005eb8 0%, #005eb8 70%, #034383 0%);
  }
  .header-bottom.shrink {
    position: relative;
    transform: translateY(-100%);
    z-index: -1;
  }
}

.splash-screen-container {
  display: flex;
  flex-Direction: column;
  align-Items: center;
  align-Content: center;
  justify-Content: center;
  height: 90vh;
}
.splash-screen-container .splash-screen-text {
  text-align: center;
  max-width: 300px;
  padding-top: 5px;
  font: normal normal normal 13px/17px Noto Sans Regular;
}
.splash-screen-container .loading-bar {
  min-Width: 250px;
  width: 250px;
}

.footer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.footer {
  display: flex;
  flex-direction: column;
  padding-top: 42px;
  width: 95%;
  margin: 0 auto;
  flex: 1;
}
.footer .logo {
  display: flex;
  flex: 1;
  margin-bottom: 2rem;
  padding-left: 10px;
  max-width: 284px;
}
.footer .logo img {
  max-width: 100%;
  align-self: center;
  height: 40px;
  padding: 0;
}
.footer .footer-social {
  flex: 1;
}

.footer-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #DBDCDD;
}
.footer-left .footer-inner {
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
}

.footer-inner {
  flex: 1;
  width: 90%;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.footer-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #0072C6;
}
.footer-right .footer-inner {
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
}

.footer-social {
  flex: 0.3;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  padding-left: 10px;
}
.footer-social .footer-btn-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.footer-social .footer-btn-container .footer-btns {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 2rem;
}
.footer-social .footer-btn-container .footer-text {
  font: normal normal normal 13px/17px Noto Sans Regular;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a2001f;
  margin-bottom: 1rem;
}
.footer-social .footer-img-container {
  flex: 1;
  position: relative;
  min-width: unset;
}
.footer-social .footer-img-container img {
  position: absolute;
  width: 70%;
  height: auto;
  right: 0px;
}

.footer-price {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 15px;
  padding-bottom: 20px;
  color: white;
}
.footer-price .bold {
  font: normal normal normal 15px/20px Noto Sans Bold;
}
.footer-price .title {
  font: normal normal normal 45px/50px Noto Sans Bold;
}
.footer-price .regular {
  font: normal normal normal 13px/18px Noto Sans Regular;
}

.footer-link {
  flex: 0.1;
}

.footer-link.left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.footer-link.left .MuiButtonBase-root {
  height: 25px;
}
.footer-link.left .MuiButton-label {
  text-transform: none;
  font: normal normal normal 13px/18px Noto Sans Regular;
  color: #434343;
}

.footer-link.right {
  border-top: 1px solid white;
  display: flex;
}
.footer-link.right .mainfreight-text {
  display: flex;
  height: 40px;
  align-items: center;
}

.social-btn-container {
  display: flex;
  column-gap: 5px;
  padding-top: 10px;
}
.social-btn-container .social-btn {
  background-color: #FAFAFA;
  border: 1px solid #d9d9d9;
  border-radius: 20%;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  max-width: 15px;
  max-height: 15px;
  padding: 8px;
  transition: background-color 0.1s;
}
.social-btn-container .social-btn img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: brightness(30%);
}
.social-btn-container .social-btn:hover {
  background-color: #C8C8C8;
}
.social-btn-container .download-btn {
  width: 100px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}
.social-btn-container .download-btn img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.social-btn-container .download-btn.apple {
  width: 100px;
}

.mainfreight-text {
  font: normal normal normal 13px/18px Noto Sans Regular;
  color: white;
  padding-left: 15px;
}
.mainfreight-text .bold {
  font: normal normal normal 13px/18px Noto Sans Bold;
}

.copyright {
  padding-bottom: 30px;
  padding-top: 23px;
  padding-left: 3rem;
  padding-right: 3rem;
  background-color: #DBDCDD;
}
.copyright .copyright-container {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  margin: auto;
}
.copyright .copyright-container div {
  flex: 1;
  font: normal normal normal 13px/18px Noto Sans Regular;
  color: #5b5b5d;
}
.copyright .copyright-container div:first-child {
  flex: 0.7;
  border-top: 1px solid #a2a2a2;
  padding: 1rem 1rem 0 1rem;
  margin-top: 1rem;
}
.copyright .copyright-container .footer-link {
  flex: 0.1;
}
.copyright .copyright-container .footer-link.left {
  display: flex;
  flex-direction: column;
  row-gap: 7px;
}
.copyright .copyright-container .footer-link.left a {
  flex: 1;
  text-transform: none;
  font: normal normal normal 13px/18px Noto Sans Regular;
  color: #434343;
  text-decoration: none;
}
.copyright .copyright-container .footer-link.left a:hover {
  text-decoration: underline;
  color: #0072C6;
}

@media screen and (min-width: 968px) {
  .footer {
    flex-direction: row;
    padding-bottom: 42px;
  }
  .footer .logo {
    justify-content: unset;
    padding-left: 0px;
  }
  .footer .logo img {
    flex: unset;
    align-self: center;
  }
  .footer-inner {
    width: 85%;
  }
  .footer-left {
    flex: 0.58;
    margin-left: auto;
    margin-right: 0;
  }
  .footer-left .footer-inner {
    margin-left: auto;
    margin-right: 0px;
    padding-right: 0px;
  }
  .footer-link.left .MuiBsuttonBase-root {
    height: 40px;
  }
  .footer-link.left .MuiButton-label {
    text-transform: none;
    font: normal normal normal 13px/18px Noto Sans Regular;
    color: #5b5b5d;
  }
  .footer-right {
    flex: 0.42;
    margin-left: 0;
    margin-right: auto;
  }
  .footer-right .footer-inner {
    margin-right: auto;
    margin-left: 0px;
    padding-left: 0px;
  }
  .footer-social {
    display: flex;
    flex: 1;
    flex-direction: row;
    padding-left: 0px;
  }
  .footer-social .footer-img-container {
    flex: 1;
  }
  .footer-social .footer-img-container img {
    right: 50px;
    width: 50%;
    height: auto;
  }
  .footer-social .footer-btn-container {
    flex-direction: row;
  }
  .footer-social .footer-btn-container .footer-btns {
    justify-content: flex-end;
    font: normal normal normal 13px/15px Noto Sans Regular;
    color: #a2001f;
  }
  .social-btn-container {
    display: flex;
    column-gap: 10px;
    padding-top: 5px;
  }
  .social-btn-container .social-btn {
    border-radius: 20%;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    max-width: 12px;
    max-height: 12px;
    padding: 8px;
  }
  .social-btn-container .download-btn {
    width: 100px;
    height: 30px;
  }
  .social-btn-container .download-btn.apple {
    width: 108px;
  }
  .mainfreight-text {
    font: normal normal normal 15px/20px Noto Sans Regular;
    color: white;
    padding-left: 15px;
  }
  .mainfreight-text .bold {
    font: normal normal normal 15px/20px Noto Sans Bold;
  }
  .footer-price {
    flex: 1;
    height: 179px;
    max-height: 179px;
    min-height: 179px;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-bottom: 20px;
    color: white;
  }
  .footer-price .bold {
    font: normal normal normal 18px/23px Noto Sans Bold;
  }
  .footer-price .title {
    font: normal normal normal 50px/55px Noto Sans Bold;
  }
  .footer-price .regular {
    font: normal normal normal 15px/20px Noto Sans Regular;
  }
  .copyright .copyright-container {
    flex-direction: row;
    width: 95%;
  }
  .copyright .copyright-container div {
    margin-left: auto;
  }
  .copyright .copyright-container div:first-child {
    flex: 0.7;
    border-top: none;
    padding: 0 0 0 0;
    padding-top: 4px;
    margin-top: unset;
  }
  .copyright .copyright-container .footer-link {
    height: 72px;
  }
  .copyright .copyright-container .footer-link.left {
    flex: 1;
    flex-direction: row;
    justify-content: center;
  }
  .copyright .copyright-container .footer-link.left a {
    text-align: center;
  }
}

@font-face {
  font-family: "Noto Sans Regular";
  src: local("Noto Sans"), url(/book/fa11626fafb16c629d2c.ttf) format("truetype");
}
@font-face {
  font-family: "Noto Sans Bold";
  src: local("Noto Sans"), url(/book/66ab29744a551a59e9f5.ttf) format("truetype");
}
@font-face {
  font-family: "Noto Sans Italic";
  src: local("Noto Sans"), url(/book/4e7f010ed503309dbc2b.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto Medium";
  src: local("Roboto"), url(/book/7429a63c09f79a1760b0.ttf) format("truetype");
}
body {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans Regular";
}

.background-image {
  background-image: none;
}

.page-container {
  padding: 0px;
  padding-bottom: 15px;
  width: 100%;
  background-color: #FAFAFA;
}

.page-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: #034383;
  margin-bottom: 5px;
}

.page-title.desktop {
  font: normal normal normal 50px/68px Noto Sans Bold;
}

.page-description {
  font-weight: 300;
  display: none;
}

.page-description.mobile {
  font: normal normal 500 15px/20px Noto Sans Regular;
  padding-top: 10px;
  padding-bottom: 20px;
}

.page-header {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.MuiBreadcrumbs-root {
  font: normal normal bold 13px/18px Noto Sans Regular !important;
  padding-bottom: 40px;
  padding-top: 10px;
}
.MuiBreadcrumbs-root .MuiTypography-colorPrimary {
  color: #0072C6;
}
.MuiBreadcrumbs-root .MuiBreadcrumbs-separator {
  color: #0072C6;
}

.MuiInputAdornment-root.MuiInputAdornment-positionEnd {
  font: normal normal normal 12px/17px Noto Sans Bold;
  color: #0072C6;
}

.MuiInputAdornment-root.MuiInputAdornment-positionEnd .MuiTypography-colorTextSecondary {
  font: normal normal normal 12px/17px Noto Sans Bold;
  color: #0072C6;
}

.MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: #DEDEDE;
}

.MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline {
  border-color: #DEDEDE;
}

.MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0072C6;
  border-width: 2px;
}

.MuiInputBase-root.MuiOutlinedInput-root.Mui-disabled {
  background-color: #DEDEDE;
}

.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline:before {
  border-bottom: none;
}

.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline:after {
  border-bottom: none;
}

.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline {
  border-radius: 5px;
  background-color: white;
  border: 1px solid #DEDEDE;
  font: normal normal normal 15px/20px Noto Sans Regular;
}
.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline .MuiInputBase-input {
  padding-top: 10px;
}

.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.Mui-error.Mui-error {
  border: 1px solid #F4573B;
}

.MuiInputBase-root.MuiFilledInput-root.MuiFilledInput-underline.Mui-disabled.Mui-disabled {
  background-color: #DEDEDE;
}

.MuiInputBase-input.MuiOutlinedInput-input {
  font: normal normal normal 12px/17px Noto Sans Regular;
}

.MuiBox-root {
  color: #434343;
}

.volume-display {
  display: none;
}

.shipment-container.mobile {
  padding-top: 0px;
  padding-Right: 20px;
  padding-Left: 20px;
  padding-bottom: 0px;
}

.shipment-details-fields.row > div {
  margin-right: 5%;
}

.shipment-details-fields.row > div:last-child {
  margin-right: 0%;
}

.MuiSelect-icon.MuiSelect-iconFilled {
  color: #0072C6;
  margin-right: 10px;
}

.MuiButtonBase-root.MuiIconButton-root.select {
  background-color: #0072C6;
}
.MuiButtonBase-root.MuiIconButton-root.select svg {
  color: white;
}

.select-title {
  padding-left: 2%;
  padding-bottom: 5px;
  font: normal 600 18px/24px Noto Sans Bold;
  color: #929292;
}

.MuiStepLabel-label.MuiStepLabel-alternativeLabel {
  font: normal 600 18px/24px Noto Sans Regular !important;
  color: #929292;
}

.MuiTypography-root.MuiStepLabel-label.MuiStepLabel-alternativeLabel.MuiStepLabel-completed {
  color: #929292;
}

.MuiStepLabel-label.MuiStepLabel-alternativeLabel.MuiStepLabel-active {
  color: #434343;
}

.MuiStepLabel-label.MuiStepLabel-alternativeLabel.MuiStepLabel-active.MuiStepLabel-completed {
  color: #434343;
}

.MuiStepConnector-line.MuiStepConnector-lineHorizontal {
  border: 2px solid #DEDEDE;
  background-color: #DEDEDE;
  margin-top: 9px;
}

.MuiStepConnector-root.MuiStepConnector-horizontal.MuiStepConnector-alternativeLabel {
  top: 6px;
  left: calc(-50% + 9px);
  right: calc(50% + 9px);
  position: absolute;
}

.MuiStep-root.MuiStep-horizontal.MuiStep-alternativeLabel.completed-step + .MuiStep-root.MuiStep-horizontal.MuiStep-alternativeLabel .MuiStepConnector-line.MuiStepConnector-lineHorizontal {
  border: 2.5px solid #0072C6;
  background-color: #0072C6;
  margin-top: 9px;
}

.MuiStepConnector-root.Mui-active.MuiStepConnector-line {
  border: 4px solid #0072C6;
}

.MuiSvgIcon-root.MuiStepIcon-root.MuiStepIcon-active {
  color: #58D971;
  z-index: 1;
  width: 22px;
  height: 22px;
}

.MuiSvgIcon-root.MuiStepIcon-root.MuiStepIcon-non.Complete {
  color: #0072C6;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.MuiSvgIcon-root.MuiStepIcon-root.MuiStepIcon-non {
  color: #DEDEDE;
  width: 20px;
  height: 20px;
}

.MuiStepLabel-label .MuiTypography-root.MuiTypography-body1 {
  font: normal normal normal 12px/17px Noto Sans Regular;
  letter-spacing: 0px;
  color: #929292;
  margin-top: 10px;
}

.stepper {
  padding-top: 40px !important;
  padding-left: 83px !important;
  padding-right: 83px !important;
}

.stepper-float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 23px;
}

.stepper-btn {
  position: relative;
}

.stepper-text {
  position: absolute;
  margin-top: 0px !important;
  top: 0;
  left: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  color: unset;
}

.MuiStepLabel-label.MuiStepLabel-active .stepper-text {
  color: black;
}

.stepper-title {
  display: none;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained {
  text-transform: unset;
  font: normal normal normal 12px/18px Noto Sans Bold;
  height: 50px;
  background-color: white;
  color: #434343;
  box-shadow: unset;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary {
  background-color: #0072C6;
  text-transform: unset;
  font: normal normal normal 12px/18px Noto Sans Bold;
  height: 50px;
  color: white;
}

.mobile .MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary {
  background-color: #0072C6;
  text-transform: unset;
  font: normal normal normal 12px/18px Noto Sans Bold;
  height: 50px;
  color: white;
}

.mobile .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary {
  border: 2px solid #0072C6;
  color: #0072C6 !important;
  text-transform: unset;
  font: normal normal normal 12px/18px Noto Sans Bold;
  height: 50px;
  color: white;
}

.bottom-button-container {
  display: none;
  flex-direction: column-reverse;
  row-gap: 5px;
  margin-top: 30px;
  margin-left: 20px;
  margin-right: 20px;
}

.bottom-button-container.row {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  margin: 0px;
}

.bottom-button-container.details, .bottom-button-container.estimate, .bottom-button-container.payment {
  display: flex;
}

.g-recaptcha {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}

.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 0px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

.MuiDialogActions-root .g-recaptcha {
  margin: 10px;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.share-btn {
  height: unset;
  background-color: #DEDEDE;
  color: #00A3E4;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.share-btn {
  display: block;
}

.save-draft-text {
  display: none;
}

.save-draft-text-alt {
  display: unset;
}

.get-estimate-text {
  display: unset;
}

.continue-text {
  display: unset;
}

.limit-text {
  font: normal normal bold 15px/20px Noto Sans Regular;
  color: #929292;
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  padding-bottom: 12px;
}

.item-buttons-container {
  flex: 1;
  display: flex;
  column-gap: 10px;
}
.item-buttons-container button {
  padding-top: 9px;
  padding-right: 20px;
  padding-bottom: 8px;
  padding-left: 20px;
  border-radius: 5px;
  font: normal normal normal 14px/19px Noto Sans Bold;
  text-transform: none;
  flex: 1;
}
.item-buttons-container button:only-child {
  padding-top: 9px;
  padding-right: 20px;
  padding-bottom: 8px;
  padding-left: 20px;
  border-radius: 5px;
  font: normal normal normal 14px/19px Noto Sans Bold;
  text-transform: none;
  flex: 0.3;
}
.item-buttons-container .MuiButtonBase-root.MuiButton-root.MuiButton-contained.add-item-btn {
  background-color: #0072C6;
  color: white;
}
.item-buttons-container .MuiButtonBase-root.MuiButton-root.MuiButton-contained.add-item-btn.Mui-disabled.Mui-disabled {
  background-color: #E5E5E5;
}
.item-buttons-container .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.item-cancel-btn {
  border: 2px solid #0072C6;
  color: #0072C6 !important;
  font: normal normal normal 12px/18px Noto Sans Bold;
  text-transform: unset;
  color: white;
}
.item-buttons-container .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.item-cancel-btn svg {
  height: 20px;
}
.item-buttons-container .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.item-cancel-btn.Mui-disabled {
  background-color: #E5E5E5;
  border: 2px solid #E5E5E5;
  color: white !important;
}
.item-buttons-container .MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.item-delete-btn {
  border: 2px solid #F4573B;
  color: #F4573B !important;
  font: normal normal normal 12px/18px Noto Sans Bold;
  text-transform: unset;
  color: white;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.Mui-disabled.Mui-disabled {
  background-color: #E5E5E5;
}

.summary-data-grid {
  width: 100%;
  min-width: 1px;
  overflow-x: auto;
  padding: 20px 0px 20px 0px;
}
.summary-data-grid .MuiDataGrid-root {
  background-color: white;
  min-width: 600px;
}
.summary-data-grid .MuiDataGrid-root .MuiDataGrid-cell:focus-within {
  outline: none !important;
}
.summary-data-grid .MuiDataGrid-root .MuiDataGrid-cell:focus {
  outline: none !important;
}
.summary-data-grid .MuiDataGrid-virtualScroller {
  width: 100%;
}
.summary-data-grid .summary-data-grid--false {
  background-color: rgba(255, 0, 0, 0.0784313725);
}
.summary-data-grid .summary-data-grid--false:hover {
  background-color: #DD4D33;
}

.autocomplete {
  position: relative;
  border-radius: 4px;
  display: flex;
}
.autocomplete input {
  padding: 18.5px 14px;
  flex: 1;
}

.autocomplete.Mui-error {
  border-color: #F4573B;
}

.phone-container {
  position: relative;
}
.phone-container input {
  height: 1.1876em;
}
.phone-container .place-holder {
  position: absolute;
  top: 7px;
  left: 50px;
  font: normal normal normal 12px/17px Noto Sans Regular;
  color: hsl(0, 0%, 75%);
}

.PhoneInputInput {
  flex: 1 1;
  min-width: 0;
}

.PhoneInputCountry {
  display: none;
}

.PhoneInputCountry .PhoneInputCountrySelectArrow {
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid;
  background: transparent !important;
  align-self: center;
  transform: none;
  -webkit-transform: none;
}

.PhoneInput {
  border: 1px solid;
  border-radius: 4px;
  border-color: rgba(0, 0, 0, 0.1);
  padding: 18.5px 14px;
}
.PhoneInput input {
  border: none;
  outline: none !important;
  font: normal normal normal 12px/17px Noto Sans Regular;
}

.PhoneInput.PhoneInput--focus {
  border: 2px solid;
  border-color: #0072C6 !important;
}

.MuiPhoneNumber-flagButton {
  max-width: 10px !important;
}

.img-container {
  font: normal normal normal 12px/17px Noto Sans Regular;
}
.img-container p {
  position: absolute;
  top: 0px;
  left: 0px;
  font: normal normal normal 12px/17px Noto Sans Regular;
}

.img-uploading {
  opacity: 0.4;
}

.background-image {
  display: none;
}

.MuiDialogContent-root.validation-content-container.MuiDialogContent-dividers {
  padding: 20px;
}
.MuiDialogContent-root.validation-content-container.MuiDialogContent-dividers .validation-content {
  display: flex;
  flex-direction: column;
}
.MuiDialogContent-root.validation-content-container.MuiDialogContent-dividers .validation-content .validation-content-input {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.shipment-container {
  padding-Right: 20px;
  padding-Left: 20px;
  padding-Top: 50px;
  padding-Bottom: 50px;
}

.mobile-flex {
  display: flex !important;
}

.mobile {
  display: block !important;
}

.desktop {
  display: none !important;
}

.hide {
  display: none !important;
}

li {
  list-style-type: none;
}

.dialog-choice-dividers {
  display: flex;
  flex-Direction: column;
  flex: 1;
  background-Color: #F9F9F9;
  margin-bottom: 10px;
  border-radius: 20px 20px 20px 20px;
  padding: 10px;
}
.dialog-choice-dividers .checkbox {
  flex: 1;
  width: 100%;
}

.MuiDialogActions-root.dialog-action-validation {
  justify-content: center;
}
.MuiDialogActions-root.dialog-action-validation .MuiButtonBase-root.MuiButton-root.MuiButton-text.dialog-action-button {
  background: #0072C6 !important;
  text-transform: unset;
  font: normal normal normal 12px/18px Noto Sans Bold;
  color: white !important;
  flex: 0.1;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.MuiButton-Secondary {
  color: black;
  border: 1px Solid lightgray;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedPrimary.MuiButton-Secondary:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.04);
}

@media screen and (min-width: 968px) {
  .item-buttons-container {
    flex: 1;
    display: flex;
    column-gap: 10px;
  }
  .item-buttons-container button {
    padding: 6px 16px 6px 16px;
    font: normal normal normal 14px/19px Noto Sans Bold;
    text-transform: none;
    flex: unset;
  }
  .item-buttons-container button:only-child {
    font: normal normal normal 14px/19px Noto Sans Bold;
    text-transform: none;
    flex: unset;
  }
  .shipment-container {
    padding-left: unset;
    padding-right: unset;
  }
  .PhoneInput input {
    font: normal normal normal 15px/20px Noto Sans Regular;
  }
  .background-image {
    display: unset;
    height: 300px;
    width: 100%;
    object-fit: cover;
    opacity: 0.542;
    position: absolute;
  }
  .page-container {
    margin: 0 auto;
    width: 90%;
    margin-top: 200px;
    margin-bottom: 20px;
    border-radius: 5px 5px 5px 5px;
    background-color: #FFFFFF;
    padding: 20px;
    position: relative;
  }
  .page-description {
    border-bottom: 1px solid #C8C8C8;
    padding-bottom: 1rem;
    display: block;
  }
  .what-are-you-shipping {
    display: flex;
    flex-direction: column;
    min-height: 400px;
  }
  .shipment-container {
    padding-left: unset;
    padding-right: unset;
    padding-Top: 50px;
    padding-Bottom: 50px;
  }
  .shipment-details-fields {
    padding-Top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    line-height: 5px;
  }
  .shipment-details-fields.column.select {
    padding-Top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: fit-content;
  }
  .shipment-details-fields.column.select .item-list {
    flex: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .shipment-details-fields > div {
    margin-right: 5%;
  }
  .shipment-details-fields.select > div {
    margin-right: 0%;
  }
  .shipment-details-fields.row > div:last-child {
    margin-right: 5%;
  }
  .shipment-details-fields.column .item-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
  }
  .shipment-details-fields.column .item-list svg {
    height: 20px;
  }
  .shipment-details-fields.column > div:last-child {
    margin-right: 0%;
  }
  .shipment-details-container {
    padding-Right: 5%;
    padding-Left: 5%;
    padding-Top: 0px;
    padding-Bottom: 50px;
  }
  .volume-display {
    display: block;
    flex: 1;
  }
  .volume-display > .MuiPaper-root {
    width: 100%;
    height: 100%;
  }
  .MuiInputAdornment-root.MuiInputAdornment-positionEnd .MuiTypography-colorTextSecondary {
    font: normal normal normal 15px/20px Noto Sans Bold;
    color: #0072C6;
  }
  .MuiInputBase-input.MuiOutlinedInput-input {
    font: normal normal normal 15px/20px Noto Sans Regular;
  }
  .MuiStepLabel-label .MuiTypography-root.MuiTypography-body1.stepper-title {
    font: normal normal normal 18px/24px Noto Sans Bold;
  }
  .MuiStepLabel-label.MuiStepLabel-active .MuiTypography-root.MuiTypography-body1.stepper-title {
    font: normal normal normal 18px/24px Noto Sans Bold;
    color: black;
  }
  .MuiStepConnector-line.MuiStepConnector-lineHorizontal {
    margin-top: 2px;
  }
  .MuiStep-root.MuiStep-horizontal.MuiStep-alternativeLabel.completed-step + .MuiStep-root.MuiStep-horizontal.MuiStep-alternativeLabel .MuiStepConnector-line.MuiStepConnector-lineHorizontal {
    margin-top: 2px;
  }
  .stepper-title {
    display: unset;
  }
  .stepper-text {
    position: unset;
  }
  .bottom-button-container {
    display: none;
    flex-direction: row;
    justify-content: flex-end;
    column-gap: 20px;
    margin-top: 30px;
  }
  .bottom-button-container.details, .bottom-button-container.estimate, .bottom-button-container.payment {
    display: flex;
  }
  .MuiButtonBase-root.MuiButton-root.MuiButton-contained.share-btn {
    display: unset;
  }
  .MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary {
    height: unset;
  }
  .MuiButtonBase-root.MuiButton-root.MuiButton-contained {
    height: unset;
    background-color: #DEDEDE;
    color: #00A3E4;
  }
  .save-draft-text {
    display: unset;
  }
  .save-draft-text-alt {
    display: none;
  }
  .get-estimate-text {
    display: unset;
  }
  .continue-text {
    display: none;
  }
  .page-container {
    padding: 30px 40px 30px 40px;
  }
  .mobile {
    display: none !important;
  }
  .mobile-flex {
    display: none !important;
  }
  .desktop {
    display: block !important;
  }
  .dialog-choice-dividers {
    margin-bottom: 20px;
    padding: 20px;
  }
  .phone-container .place-holder {
    top: 4px;
    font: normal normal normal 15px/20px Noto Sans Regular;
  }
}