.pretty * {
  box-sizing: border-box;
}

.pretty input:not([type=checkbox]):not([type=radio]) {
  display: none;
}

.pretty {
  position: relative;
  display: inline-block;
  margin-right: 1em;
  white-space: nowrap;
  line-height: 1;
}

.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.pretty .state label {
  position: initial;
  display: inline-block;
  font-weight: 400;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}

.pretty .state label:after, .pretty .state label:before {
  content: "";
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: calc(0% - (100% - 1em) - 8%);
  background-color: transparent;
}

.pretty .state label:before {
  border-color: #bdc3c7;
}

.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {
  display: none;
}

@-webkit-keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
}
@-webkit-keyframes tada {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    transform: scale(7);
  }
  38% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
    transform: scale(1);
  }
  55% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: scale(1.5);
  }
  72% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  81% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: scale(1.24);
  }
  89% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  95% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: scale(1.04);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: scale(1);
  }
}
@keyframes tada {
  0% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
    transform: scale(7);
  }
  38% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
    transform: scale(1);
  }
  55% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: scale(1.5);
  }
  72% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  81% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: scale(1.24);
  }
  89% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  95% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    transform: scale(1.04);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    transform: scale(1);
  }
}
@-webkit-keyframes jelly {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jelly {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes rotate {
  0% {
    opacity: 0;
    transform: translateZ(-200px) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotate(0);
  }
}
@keyframes rotate {
  0% {
    opacity: 0;
    transform: translateZ(-200px) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotate(0);
  }
}
@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #bdc3c7;
  }
  100% {
    box-shadow: 0 0 0 1.5em rgba(189, 195, 199, 0);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #bdc3c7;
  }
  100% {
    box-shadow: 0 0 0 1.5em rgba(189, 195, 199, 0);
  }
}
.pretty.p-default.p-fill .state label:after {
  transform: scale(1);
}

.pretty.p-default .state label:after {
  transform: scale(0.6);
}

.pretty.p-default input:checked ~ .state label:after {
  background-color: #bdc3c7 !important;
}

.pretty.p-default.p-thick .state label:after, .pretty.p-default.p-thick .state label:before {
  border-width: 0.1428571429em;
}

.pretty.p-default.p-thick .state label:after {
  transform: scale(0.4) !important;
}

.pretty.p-icon .state .icon {
  position: absolute;
  font-size: 1em;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  left: 0;
  z-index: 1;
  text-align: center;
  line-height: normal;
  top: calc(0% - (100% - 1em) - 8%);
  border: 1px solid transparent;
  opacity: 0;
}

.pretty.p-icon .state .icon:before {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.pretty.p-icon input:checked ~ .state .icon {
  opacity: 1;
}

.pretty.p-icon input:checked ~ .state label:before {
  border-color: #5a656b;
}

.pretty.p-svg .state .svg {
  position: absolute;
  font-size: 1em;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  left: 0;
  z-index: 1;
  text-align: center;
  line-height: normal;
  top: calc(0% - (100% - 1em) - 8%);
  border: 1px solid transparent;
  opacity: 0;
}

.pretty.p-svg .state svg {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

.pretty.p-svg input:checked ~ .state .svg {
  opacity: 1;
}

.pretty.p-image .state img {
  opacity: 0;
  position: absolute;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  top: 0;
  top: calc(0% - (100% - 1em) - 8%);
  left: 0;
  z-index: 0;
  text-align: center;
  line-height: normal;
  transform: scale(0.8);
}

.pretty.p-image input:checked ~ .state img {
  opacity: 1;
}

.pretty.p-switch input {
  min-width: 2em;
}

.pretty.p-switch .state {
  position: relative;
}

.pretty.p-switch .state:before {
  content: "";
  border: 1px solid #bdc3c7;
  border-radius: 60px;
  width: 2em;
  box-sizing: unset;
  height: calc(1em + 2px);
  position: absolute;
  top: 0;
  top: calc(0% - (100% - 1em) - 16%);
  z-index: 0;
  transition: all 0.5s ease;
}

.pretty.p-switch .state label {
  text-indent: 2.5em;
}

.pretty.p-switch .state label:after, .pretty.p-switch .state label:before {
  transition: all 0.5s ease;
  border-radius: 100%;
  left: 0;
  border-color: transparent;
  transform: scale(0.8);
}

.pretty.p-switch .state label:after {
  background-color: #bdc3c7 !important;
}

.pretty.p-switch input:checked ~ .state:before {
  border-color: #5a656b;
}

.pretty.p-switch input:checked ~ .state label:before {
  opacity: 0;
}

.pretty.p-switch input:checked ~ .state label:after {
  background-color: #5a656b !important;
  left: 1em;
}

.pretty.p-switch.p-fill input:checked ~ .state:before {
  border-color: #5a656b;
  background-color: #5a656b !important;
}

.pretty.p-switch.p-fill input:checked ~ .state label:before {
  opacity: 0;
}

.pretty.p-switch.p-fill input:checked ~ .state label:after {
  background-color: #fff !important;
  left: 1em;
}

.pretty.p-switch.p-slim .state:before {
  height: 0.1em;
  background: #bdc3c7 !important;
  top: calc(50% - 0.1em);
}

.pretty.p-switch.p-slim input:checked ~ .state:before {
  border-color: #5a656b;
  background-color: #5a656b !important;
}

.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {
  display: none;
}

.pretty.p-has-hover input:hover ~ .state.p-is-hover {
  display: block;
}

.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {
  display: block;
}

.pretty.p-has-focus input:focus ~ .state label:before {
  box-shadow: 0 0 3px 0 #bdc3c7;
}

.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state:not(.p-is-indeterminate) {
  display: none;
}

.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate {
  display: block;
}

.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate .icon {
  display: block;
  opacity: 1;
}

.pretty.p-toggle .state.p-on {
  opacity: 0;
  display: none;
}

.pretty.p-toggle .state .icon, .pretty.p-toggle .state .svg, .pretty.p-toggle .state img, .pretty.p-toggle .state.p-off {
  opacity: 1;
  display: inherit;
}

.pretty.p-toggle .state.p-off .icon {
  color: #bdc3c7;
}

.pretty.p-toggle input:checked ~ .state.p-on {
  opacity: 1;
  display: inherit;
}

.pretty.p-toggle input:checked ~ .state.p-off {
  opacity: 0;
  display: none;
}

.pretty.p-plain input:checked ~ .state label:before, .pretty.p-plain.p-toggle .state label:before {
  content: none;
}

.pretty.p-plain.p-plain .icon {
  transform: scale(1.1);
}

.pretty.p-round .state label:after, .pretty.p-round .state label:before {
  border-radius: 100%;
}

.pretty.p-round.p-icon .state .icon {
  border-radius: 100%;
  overflow: hidden;
}

.pretty.p-round.p-icon .state .icon:before {
  transform: scale(0.8);
}

.pretty.p-curve .state label:after, .pretty.p-curve .state label:before {
  border-radius: 20%;
}

.pretty.p-smooth .icon, .pretty.p-smooth .svg, .pretty.p-smooth label:after, .pretty.p-smooth label:before {
  transition: all 0.5s ease;
}

.pretty.p-smooth input:checked + .state label:after {
  transition: all 0.3s ease;
}

.pretty.p-smooth input:checked + .state .icon, .pretty.p-smooth input:checked + .state .svg, .pretty.p-smooth input:checked + .state img {
  -webkit-animation: zoom 0.2s ease;
  animation: zoom 0.2s ease;
}

.pretty.p-smooth.p-default input:checked + .state label:after {
  -webkit-animation: zoom 0.2s ease;
  animation: zoom 0.2s ease;
}

.pretty.p-smooth.p-plain input:checked + .state label:before {
  content: "";
  transform: scale(0);
  transition: all 0.5s ease;
}

.pretty.p-tada:not(.p-default) input:checked + .state .icon, .pretty.p-tada:not(.p-default) input:checked + .state .svg, .pretty.p-tada:not(.p-default) input:checked + .state img, .pretty.p-tada:not(.p-default) input:checked + .state label:after, .pretty.p-tada:not(.p-default) input:checked + .state label:before {
  -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  opacity: 1;
}

.pretty.p-jelly:not(.p-default) input:checked + .state .icon, .pretty.p-jelly:not(.p-default) input:checked + .state .svg, .pretty.p-jelly:not(.p-default) input:checked + .state img, .pretty.p-jelly:not(.p-default) input:checked + .state label:after, .pretty.p-jelly:not(.p-default) input:checked + .state label:before {
  -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

.pretty.p-jelly:not(.p-default) input:checked + .state label:before {
  border-color: transparent;
}

.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon, .pretty.p-rotate:not(.p-default) input:checked ~ .state .svg, .pretty.p-rotate:not(.p-default) input:checked ~ .state img, .pretty.p-rotate:not(.p-default) input:checked ~ .state label:after, .pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {
  -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}

.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {
  border-color: transparent;
}

.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
}

.pretty input[disabled] {
  cursor: not-allowed;
  display: none;
}

.pretty input[disabled] ~ * {
  opacity: 0.5;
}

.pretty.p-locked input {
  display: none;
  cursor: not-allowed;
}

.pretty input:checked ~ .state.p-primary label:after, .pretty.p-toggle .state.p-primary label:after {
  background-color: #428bca !important;
}

.pretty input:checked ~ .state.p-primary .icon, .pretty input:checked ~ .state.p-primary .svg, .pretty.p-toggle .state.p-primary .icon, .pretty.p-toggle .state.p-primary .svg {
  color: #fff;
  stroke: #fff;
}

.pretty input:checked ~ .state.p-primary-o label:before, .pretty.p-toggle .state.p-primary-o label:before {
  border-color: #428bca;
}

.pretty input:checked ~ .state.p-primary-o label:after, .pretty.p-toggle .state.p-primary-o label:after {
  background-color: transparent;
}

.pretty input:checked ~ .state.p-primary-o .icon, .pretty input:checked ~ .state.p-primary-o .svg, .pretty input:checked ~ .state.p-primary-o svg, .pretty.p-toggle .state.p-primary-o .icon, .pretty.p-toggle .state.p-primary-o .svg, .pretty.p-toggle .state.p-primary-o svg {
  color: #428bca;
  stroke: #428bca;
}

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {
  background-color: #428bca !important;
}

.pretty.p-switch input:checked ~ .state.p-primary:before {
  border-color: #428bca;
}

.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {
  background-color: #428bca !important;
}

.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {
  border-color: #245682;
  background-color: #245682 !important;
}

.pretty input:checked ~ .state.p-info label:after, .pretty.p-toggle .state.p-info label:after {
  background-color: #5bc0de !important;
}

.pretty input:checked ~ .state.p-info .icon, .pretty input:checked ~ .state.p-info .svg, .pretty.p-toggle .state.p-info .icon, .pretty.p-toggle .state.p-info .svg {
  color: #fff;
  stroke: #fff;
}

.pretty input:checked ~ .state.p-info-o label:before, .pretty.p-toggle .state.p-info-o label:before {
  border-color: #5bc0de;
}

.pretty input:checked ~ .state.p-info-o label:after, .pretty.p-toggle .state.p-info-o label:after {
  background-color: transparent;
}

.pretty input:checked ~ .state.p-info-o .icon, .pretty input:checked ~ .state.p-info-o .svg, .pretty input:checked ~ .state.p-info-o svg, .pretty.p-toggle .state.p-info-o .icon, .pretty.p-toggle .state.p-info-o .svg, .pretty.p-toggle .state.p-info-o svg {
  color: #5bc0de;
  stroke: #5bc0de;
}

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {
  background-color: #5bc0de !important;
}

.pretty.p-switch input:checked ~ .state.p-info:before {
  border-color: #5bc0de;
}

.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {
  background-color: #5bc0de !important;
}

.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {
  border-color: #2390b0;
  background-color: #2390b0 !important;
}

.pretty input:checked ~ .state.p-success label:after, .pretty.p-toggle .state.p-success label:after {
  background-color: #5cb85c !important;
}

.pretty input:checked ~ .state.p-success .icon, .pretty input:checked ~ .state.p-success .svg, .pretty.p-toggle .state.p-success .icon, .pretty.p-toggle .state.p-success .svg {
  color: #fff;
  stroke: #fff;
}

.pretty input:checked ~ .state.p-success-o label:before, .pretty.p-toggle .state.p-success-o label:before {
  border-color: #5cb85c;
}

.pretty input:checked ~ .state.p-success-o label:after, .pretty.p-toggle .state.p-success-o label:after {
  background-color: transparent;
}

.pretty input:checked ~ .state.p-success-o .icon, .pretty input:checked ~ .state.p-success-o .svg, .pretty input:checked ~ .state.p-success-o svg, .pretty.p-toggle .state.p-success-o .icon, .pretty.p-toggle .state.p-success-o .svg, .pretty.p-toggle .state.p-success-o svg {
  color: #5cb85c;
  stroke: #5cb85c;
}

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {
  background-color: #5cb85c !important;
}

.pretty.p-switch input:checked ~ .state.p-success:before {
  border-color: #5cb85c;
}

.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {
  background-color: #5cb85c !important;
}

.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {
  border-color: #357935;
  background-color: #357935 !important;
}

.pretty input:checked ~ .state.p-warning label:after, .pretty.p-toggle .state.p-warning label:after {
  background-color: #f0ad4e !important;
}

.pretty input:checked ~ .state.p-warning .icon, .pretty input:checked ~ .state.p-warning .svg, .pretty.p-toggle .state.p-warning .icon, .pretty.p-toggle .state.p-warning .svg {
  color: #fff;
  stroke: #fff;
}

.pretty input:checked ~ .state.p-warning-o label:before, .pretty.p-toggle .state.p-warning-o label:before {
  border-color: #f0ad4e;
}

.pretty input:checked ~ .state.p-warning-o label:after, .pretty.p-toggle .state.p-warning-o label:after {
  background-color: transparent;
}

.pretty input:checked ~ .state.p-warning-o .icon, .pretty input:checked ~ .state.p-warning-o .svg, .pretty input:checked ~ .state.p-warning-o svg, .pretty.p-toggle .state.p-warning-o .icon, .pretty.p-toggle .state.p-warning-o .svg, .pretty.p-toggle .state.p-warning-o svg {
  color: #f0ad4e;
  stroke: #f0ad4e;
}

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {
  background-color: #f0ad4e !important;
}

.pretty.p-switch input:checked ~ .state.p-warning:before {
  border-color: #f0ad4e;
}

.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {
  background-color: #f0ad4e !important;
}

.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {
  border-color: #c77c11;
  background-color: #c77c11 !important;
}

.pretty input:checked ~ .state.p-danger label:after, .pretty.p-toggle .state.p-danger label:after {
  background-color: #d9534f !important;
}

.pretty input:checked ~ .state.p-danger .icon, .pretty input:checked ~ .state.p-danger .svg, .pretty.p-toggle .state.p-danger .icon, .pretty.p-toggle .state.p-danger .svg {
  color: #fff;
  stroke: #fff;
}

.pretty input:checked ~ .state.p-danger-o label:before, .pretty.p-toggle .state.p-danger-o label:before {
  border-color: #d9534f;
}

.pretty input:checked ~ .state.p-danger-o label:after, .pretty.p-toggle .state.p-danger-o label:after {
  background-color: transparent;
}

.pretty input:checked ~ .state.p-danger-o .icon, .pretty input:checked ~ .state.p-danger-o .svg, .pretty input:checked ~ .state.p-danger-o svg, .pretty.p-toggle .state.p-danger-o .icon, .pretty.p-toggle .state.p-danger-o .svg, .pretty.p-toggle .state.p-danger-o svg {
  color: #d9534f;
  stroke: #d9534f;
}

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {
  background-color: #d9534f !important;
}

.pretty.p-switch input:checked ~ .state.p-danger:before {
  border-color: #d9534f;
}

.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {
  background-color: #d9534f !important;
}

.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {
  border-color: #a02622;
  background-color: #a02622 !important;
}

.pretty.p-bigger .icon, .pretty.p-bigger .img, .pretty.p-bigger .svg, .pretty.p-bigger label:after, .pretty.p-bigger label:before {
  font-size: 1.2em !important;
  top: calc(0% - (100% - 1em) - 35%) !important;
}

.pretty.p-bigger label {
  text-indent: 1.7em;
}

@media print {
  .pretty .state .icon, .pretty .state label:after, .pretty .state label:before, .pretty .state:before {
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
:root {
  --gutter: 1rem;
}

/* row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
  box-sizing: border-box;
}

/* column base */
[class*=col-] {
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);
  box-sizing: border-box;
}

/* 12-column widths */
.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

/* fluid / auto */
.col {
  flex: 1 1 0%;
}

/* simple responsive example: stack on small screens, desktop from 768px */
@media (max-width: 767.98px) {
  [class*=col-] {
    width: 100% !important;
  }
}
.position-relative {
  position: relative;
}

@font-face {
  font-family: HelveticaNeue;
  src: url(../fonts/HelveticaNeueMedium.eot);
  src: url(../fonts/HelveticaNeueMedium.eot?#iefix) format("embedded-opentype"), url(../fonts/HelveticaNeueMedium.woff2) format("woff2"), url(../fonts/HelveticaNeueMedium.woff) format("woff"), url(../fonts/HelveticaNeueMedium.ttf) format("truetype"), url(../fonts/HelveticaNeueMedium.svg#HelveticaNeueMedium) format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
html {
  font-size: 62.5%;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust: none;
  height: 100%;
  font-family: "DM Sans", sans-serif;
  font-size: 1.4rem;
  color: #707070;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.author-box {
  background-color: #008d36;
  border-radius: 0.5rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  padding: 1rem 1.5rem;
  margin: 0 2rem 0 0;
}

.page-content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-content .cell {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}
.page-content .cell .row {
  float: none;
  display: inline-block;
  width: auto;
}
.page-content .cell .row.logo-wrap {
  margin: 0 0 4rem;
}
.page-content .cell .row.form-wrap {
  border: 0.1rem solid #efefef;
  padding: 2.75rem;
  background-color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.05);
  width: 45rem;
  max-width: calc(100vw - 4rem);
}
@media (min-width: 768px) {
  .page-content .cell .row.form-wrap {
    max-width: 100%;
  }
}
.page-content .cell .row.form-wrap input[type=password], .page-content .cell .row.form-wrap input[type=text] {
  padding: 1.3rem;
  width: 100%;
  margin: 0 0 2rem;
  border-radius: 0.75rem;
  border: 0.1rem solid #efefef;
  -webkit-appearance: none;
}
.page-content .cell .row.form-wrap input[type=submit] {
  background-color: #000;
  color: #fff;
  cursor: pointer;
  border-radius: 0.75rem;
  border: 0;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media (min-width: 768px) {
  .page-content .cell .row.form-wrap input[type=submit] {
    width: auto;
    float: right;
  }
}
.page-content .cell .row.form-wrap .login-options {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
}
.page-content .cell .row.form-wrap .login-options a {
  color: #000;
}
.page-content .cell .row.form-wrap .login-options a:hover {
  color: #008d36;
}

.logo {
  width: 15rem;
  margin: 2rem 0;
}
@media (min-width: 768px) {
  .logo {
    margin: 0;
    width: 16rem;
  }
}

.row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.inside {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}

.files-data {
  display: none;
}

.marg {
  margin: 0 -2rem;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

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

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

.marg .quart {
  width: 25%;
  padding: 0 2rem;
  float: left;
}

.marg .third {
  width: 33.333333333%;
  padding: 0 2rem;
  float: left;
}

.marg .half {
  width: 50%;
  padding: 0 2rem;
  float: left;
  margin: 0 0 2rem;
}

.marg .half img {
  width: 100%;
  height: auto;
}

.marg .fourty {
  width: 40%;
  padding: 0 2rem;
}

.marg .twenty {
  width: 20%;
  padding: 0 2rem;
  float: left;
}

.marg .thirty {
  width: 30%;
  padding: 0 2rem;
  float: left;
}

.marg .sixty {
  width: 60%;
  padding: 2rem 2rem 0;
  float: left;
}

.marg .seventy {
  width: 70%;
  padding: 0 2rem;
  float: left;
}

.main-wrap {
  display: flex;
  width: 100%;
  height: 100%;
}
.main-wrap .page-left {
  background-color: #efefef;
  width: 100%;
}
@media (min-width: 768px) {
  .main-wrap .page-left {
    width: 8rem;
    height: 100%;
    position: fixed;
  }
}
.main-wrap .page-left ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
@media (min-width: 768px) {
  .main-wrap .page-left ul {
    flex-direction: column;
  }
}
.main-wrap .page-left ul li {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.main-wrap .page-left ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  text-align: center;
  color: #707070;
  font-size: 2.2rem;
  width: 100%;
}
.main-wrap .page-left ul li a.current, .main-wrap .page-left ul li a:hover {
  color: #e6005b;
}
.main-wrap .page-right {
  flex: 1;
  padding: 0 2rem 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  .main-wrap .page-right {
    padding: 4rem;
    margin-left: 8rem;
    max-width: calc(100% - 8rem);
  }
}
.main-wrap .page-right {
  min-height: 100%;
  position: relative;
}
.main-wrap .page-right .buttons-wrap {
  width: 100%;
  margin: 0;
  display: flex;
  gap: 0.75rem;
  flex-direction: row;
  align-items: center;
}
.main-wrap .page-right .buttons-wrap > a {
  display: block;
  text-align: center;
  margin: 0 0 1rem !important;
  width: 50%;
}
@media (min-width: 576px) {
  .main-wrap .page-right .buttons-wrap {
    width: auto;
    position: absolute;
    right: 4rem;
    top: 4rem;
    margin-bottom: 0;
  }
  .main-wrap .page-right .buttons-wrap > a {
    margin-bottom: 0;
    width: auto;
  }
}

a {
  text-decoration: none;
}

h1 {
  color: #000;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 2rem;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  h1 {
    margin: 0 0 5rem;
  }
}

h2 {
  font-size: 2rem;
  color: #000;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.8rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 768px) {
  h3 {
    margin: 0 0 2.5rem;
  }
}

.main-content {
  margin: 2rem 0 0;
}
@media (min-width: 768px) {
  .main-content {
    margin: 5rem 0 0;
  }
}

.order-payment .order-status-box,
.order-payment .paid-status-box,
.order-status .order-status-box,
.order-status .paid-status-box {
  margin: 0;
}

.order-status-box, .paid-status-box {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  margin: 0 0 0 0.5rem;
}
@media (min-width: 768px) {
  .order-status-box, .paid-status-box {
    padding: 0.25rem 1rem;
    font-size: 1.4rem;
    margin: 0 0 0 1rem;
  }
}

.order-status-box.collected, .paid-status-box.collected {
  background-color: #008d36;
}

.order-status-box.ready, .paid-status-box.ready {
  background-color: #790483;
}

.order-status-box.complete, .paid-status-box.complete {
  background-color: #009fe3;
}

.order-status-box.open, .paid-status-box.open {
  background-color: #ffb100;
}

.order-status-box.materials, .order-status-box.needsmaterials, .paid-status-box.materials, .paid-status-box.needsmaterials {
  background-color: red;
}

.order-status-box.ordered, .paid-status-box.ordered {
  background-color: #8b8b8b;
}

.order-status-box.paid, .paid-status-box.paid {
  background-color: #008d36;
}

.order-status-box.collection, .paid-status-box.collection {
  background-color: #ffb100;
}

.order-status-box.free, .paid-status-box.free {
  background-color: #009fe3;
}

.order-status-box.void, .paid-status-box.void {
  background-color: #000;
}

.order-status-box.gallery, .paid-status-box.gallery {
  background-color: #1dc8aa;
}

.order-created {
  text-align: center;
  justify-content: center;
  transition-delay: 0.5s !important;
}

.order-created i {
  color: #e6005b;
  font-size: 30rem;
}

.order-created .black-button {
  width: 100%;
  margin: 3rem 0 0;
}

.order-created, .order-status-set, .order-status-sets, .paid-status-set {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(100%);
  transition: all 0.3s ease-in;
}

.order-created h3, .order-status-set h3, .order-status-sets h3, .paid-status-set h3 {
  color: #000;
}

.order-created.open, .order-status-set.open, .order-status-sets.open, .paid-status-set.open {
  transform: none;
}

.order-created .order-status-set-inner, .order-status-set .order-status-set-inner, .order-status-sets .order-status-set-inner, .paid-status-set .order-status-set-inner {
  border: 0.1rem solid #efefef;
  padding: 2.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.05);
  width: 45rem;
  max-width: 100%;
  position: relative;
  background-color: #fff;
}

.order-created .order-status-set-inner .order-created-close, .order-created .order-status-set-inner .order-status-set-close, .order-created .order-status-set-inner .order-status-sets-close, .order-created .order-status-set-inner .paid-status-set-close, .order-status-set .order-status-set-inner .order-created-close, .order-status-set .order-status-set-inner .order-status-set-close, .order-status-set .order-status-set-inner .order-status-sets-close, .order-status-set .order-status-set-inner .paid-status-set-close, .order-status-sets .order-status-set-inner .order-created-close, .order-status-sets .order-status-set-inner .order-status-set-close, .order-status-sets .order-status-set-inner .order-status-sets-close, .order-status-sets .order-status-set-inner .paid-status-set-close, .paid-status-set .order-status-set-inner .order-created-close, .paid-status-set .order-status-set-inner .order-status-set-close, .paid-status-set .order-status-set-inner .order-status-sets-close, .paid-status-set .order-status-set-inner .paid-status-set-close {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  font-weight: 500;
  cursor: pointer;
  color: red;
}

.order-created .order-status-set-inner .status-selecters, .order-status-set .order-status-set-inner .status-selecters, .order-status-sets .order-status-set-inner .status-selecters, .paid-status-set .order-status-set-inner .status-selecters {
  margin: 2rem 0 0;
}

.order-created .order-status-set-inner .status-selecters .paid-select, .order-created .order-status-set-inner .status-selecters .status-select, .order-created .order-status-set-inner .status-selecters .status-selects, .order-status-set .order-status-set-inner .status-selecters .paid-select, .order-status-set .order-status-set-inner .status-selecters .status-select, .order-status-set .order-status-set-inner .status-selecters .status-selects, .order-status-sets .order-status-set-inner .status-selecters .paid-select, .order-status-sets .order-status-set-inner .status-selecters .status-select, .order-status-sets .order-status-set-inner .status-selecters .status-selects, .paid-status-set .order-status-set-inner .status-selecters .paid-select, .paid-status-set .order-status-set-inner .status-selecters .status-select, .paid-status-set .order-status-set-inner .status-selecters .status-selects {
  width: 100%;
  float: left;
  margin: 0 0 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: center;
  color: #fff;
  padding: 2rem 0.5rem;
}

.order-created .order-status-set-inner .status-selecters .paid-select.collected, .order-created .order-status-set-inner .status-selecters .status-select.collected, .order-created .order-status-set-inner .status-selecters .status-selects.collected, .order-status-set .order-status-set-inner .status-selecters .paid-select.collected, .order-status-set .order-status-set-inner .status-selecters .status-select.collected, .order-status-set .order-status-set-inner .status-selecters .status-selects.collected, .order-status-sets .order-status-set-inner .status-selecters .paid-select.collected, .order-status-sets .order-status-set-inner .status-selecters .status-select.collected, .order-status-sets .order-status-set-inner .status-selecters .status-selects.collected, .paid-status-set .order-status-set-inner .status-selecters .paid-select.collected, .paid-status-set .order-status-set-inner .status-selecters .status-select.collected, .paid-status-set .order-status-set-inner .status-selecters .status-selects.collected {
  background-color: #008d36;
}

.order-created .order-status-set-inner .status-selecters .paid-select.ready, .order-created .order-status-set-inner .status-selecters .status-select.ready, .order-created .order-status-set-inner .status-selecters .status-selects.ready, .order-status-set .order-status-set-inner .status-selecters .paid-select.ready, .order-status-set .order-status-set-inner .status-selecters .status-select.ready, .order-status-set .order-status-set-inner .status-selecters .status-selects.ready, .order-status-sets .order-status-set-inner .status-selecters .paid-select.ready, .order-status-sets .order-status-set-inner .status-selecters .status-select.ready, .order-status-sets .order-status-set-inner .status-selecters .status-selects.ready, .paid-status-set .order-status-set-inner .status-selecters .paid-select.ready, .paid-status-set .order-status-set-inner .status-selecters .status-select.ready, .paid-status-set .order-status-set-inner .status-selecters .status-selects.ready {
  background-color: #790483;
}

.order-created .order-status-set-inner .status-selecters .paid-select.complete, .order-created .order-status-set-inner .status-selecters .status-select.complete, .order-created .order-status-set-inner .status-selecters .status-selects.complete, .order-status-set .order-status-set-inner .status-selecters .paid-select.complete, .order-status-set .order-status-set-inner .status-selecters .status-select.complete, .order-status-set .order-status-set-inner .status-selecters .status-selects.complete, .order-status-sets .order-status-set-inner .status-selecters .paid-select.complete, .order-status-sets .order-status-set-inner .status-selecters .status-select.complete, .order-status-sets .order-status-set-inner .status-selecters .status-selects.complete, .paid-status-set .order-status-set-inner .status-selecters .paid-select.complete, .paid-status-set .order-status-set-inner .status-selecters .status-select.complete, .paid-status-set .order-status-set-inner .status-selecters .status-selects.complete {
  background-color: #009fe3;
}

.order-created .order-status-set-inner .status-selecters .paid-select.open, .order-created .order-status-set-inner .status-selecters .status-select.open, .order-created .order-status-set-inner .status-selecters .status-selects.open, .order-status-set .order-status-set-inner .status-selecters .paid-select.open, .order-status-set .order-status-set-inner .status-selecters .status-select.open, .order-status-set .order-status-set-inner .status-selecters .status-selects.open, .order-status-sets .order-status-set-inner .status-selecters .paid-select.open, .order-status-sets .order-status-set-inner .status-selecters .status-select.open, .order-status-sets .order-status-set-inner .status-selecters .status-selects.open, .paid-status-set .order-status-set-inner .status-selecters .paid-select.open, .paid-status-set .order-status-set-inner .status-selecters .status-select.open, .paid-status-set .order-status-set-inner .status-selecters .status-selects.open {
  background-color: #ffb100;
}

.order-created .order-status-set-inner .status-selecters .paid-select.needsmaterials, .order-created .order-status-set-inner .status-selecters .status-select.needsmaterials, .order-created .order-status-set-inner .status-selecters .status-selects.needsmaterials, .order-status-set .order-status-set-inner .status-selecters .paid-select.needsmaterials, .order-status-set .order-status-set-inner .status-selecters .status-select.needsmaterials, .order-status-set .order-status-set-inner .status-selecters .status-selects.needsmaterials, .order-status-sets .order-status-set-inner .status-selecters .paid-select.needsmaterials, .order-status-sets .order-status-set-inner .status-selecters .status-select.needsmaterials, .order-status-sets .order-status-set-inner .status-selecters .status-selects.needsmaterials, .paid-status-set .order-status-set-inner .status-selecters .paid-select.needsmaterials, .paid-status-set .order-status-set-inner .status-selecters .status-select.needsmaterials, .paid-status-set .order-status-set-inner .status-selecters .status-selects.needsmaterials {
  background-color: red;
}

.order-created .order-status-set-inner .status-selecters .paid-select.materialsorders, .order-created .order-status-set-inner .status-selecters .status-select.materialsorders, .order-created .order-status-set-inner .status-selecters .status-selects.materialsorders, .order-status-set .order-status-set-inner .status-selecters .paid-select.materialsorders, .order-status-set .order-status-set-inner .status-selecters .status-select.materialsorders, .order-status-set .order-status-set-inner .status-selecters .status-selects.materialsorders, .order-status-sets .order-status-set-inner .status-selecters .paid-select.materialsorders, .order-status-sets .order-status-set-inner .status-selecters .status-select.materialsorders, .order-status-sets .order-status-set-inner .status-selecters .status-selects.materialsorders, .paid-status-set .order-status-set-inner .status-selecters .paid-select.materialsorders, .paid-status-set .order-status-set-inner .status-selecters .status-select.materialsorders, .paid-status-set .order-status-set-inner .status-selecters .status-selects.materialsorders {
  background-color: #8b8b8b;
}

.order-created .order-status-set-inner .status-selecters .paid-select.paid, .order-created .order-status-set-inner .status-selecters .status-select.paid, .order-created .order-status-set-inner .status-selecters .status-selects.paid, .order-status-set .order-status-set-inner .status-selecters .paid-select.paid, .order-status-set .order-status-set-inner .status-selecters .status-select.paid, .order-status-set .order-status-set-inner .status-selecters .status-selects.paid, .order-status-sets .order-status-set-inner .status-selecters .paid-select.paid, .order-status-sets .order-status-set-inner .status-selecters .status-select.paid, .order-status-sets .order-status-set-inner .status-selecters .status-selects.paid, .paid-status-set .order-status-set-inner .status-selecters .paid-select.paid, .paid-status-set .order-status-set-inner .status-selecters .status-select.paid, .paid-status-set .order-status-set-inner .status-selecters .status-selects.paid {
  background-color: #008d36;
}

.order-created .order-status-set-inner .status-selecters .paid-select.collection, .order-created .order-status-set-inner .status-selecters .status-select.collection, .order-created .order-status-set-inner .status-selecters .status-selects.collection, .order-status-set .order-status-set-inner .status-selecters .paid-select.collection, .order-status-set .order-status-set-inner .status-selecters .status-select.collection, .order-status-set .order-status-set-inner .status-selecters .status-selects.collection, .order-status-sets .order-status-set-inner .status-selecters .paid-select.collection, .order-status-sets .order-status-set-inner .status-selecters .status-select.collection, .order-status-sets .order-status-set-inner .status-selecters .status-selects.collection, .paid-status-set .order-status-set-inner .status-selecters .paid-select.collection, .paid-status-set .order-status-set-inner .status-selecters .status-select.collection, .paid-status-set .order-status-set-inner .status-selecters .status-selects.collection {
  background-color: #ffb100;
}

.order-created .order-status-set-inner .status-selecters .paid-select.free, .order-created .order-status-set-inner .status-selecters .status-select.free, .order-created .order-status-set-inner .status-selecters .status-selects.free, .order-status-set .order-status-set-inner .status-selecters .paid-select.free, .order-status-set .order-status-set-inner .status-selecters .status-select.free, .order-status-set .order-status-set-inner .status-selecters .status-selects.free, .order-status-sets .order-status-set-inner .status-selecters .paid-select.free, .order-status-sets .order-status-set-inner .status-selecters .status-select.free, .order-status-sets .order-status-set-inner .status-selecters .status-selects.free, .paid-status-set .order-status-set-inner .status-selecters .paid-select.free, .paid-status-set .order-status-set-inner .status-selecters .status-select.free, .paid-status-set .order-status-set-inner .status-selecters .status-selects.free {
  background-color: #009fe3;
}

.order-created .order-status-set-inner .status-selecters .paid-select.void, .order-created .order-status-set-inner .status-selecters .status-select.void, .order-created .order-status-set-inner .status-selecters .status-selects.void, .order-status-set .order-status-set-inner .status-selecters .paid-select.void, .order-status-set .order-status-set-inner .status-selecters .status-select.void, .order-status-set .order-status-set-inner .status-selecters .status-selects.void, .order-status-sets .order-status-set-inner .status-selecters .paid-select.void, .order-status-sets .order-status-set-inner .status-selecters .status-select.void, .order-status-sets .order-status-set-inner .status-selecters .status-selects.void, .paid-status-set .order-status-set-inner .status-selecters .paid-select.void, .paid-status-set .order-status-set-inner .status-selecters .status-select.void, .paid-status-set .order-status-set-inner .status-selecters .status-selects.void {
  background-color: #000;
}

.order-created .order-status-set-inner .status-selecters .paid-select.gallery, .order-created .order-status-set-inner .status-selecters .status-select.gallery, .order-created .order-status-set-inner .status-selecters .status-selects.gallery, .order-status-set .order-status-set-inner .status-selecters .paid-select.gallery, .order-status-set .order-status-set-inner .status-selecters .status-select.gallery, .order-status-set .order-status-set-inner .status-selecters .status-selects.gallery, .order-status-sets .order-status-set-inner .status-selecters .paid-select.gallery, .order-status-sets .order-status-set-inner .status-selecters .status-select.gallery, .order-status-sets .order-status-set-inner .status-selecters .status-selects.gallery, .paid-status-set .order-status-set-inner .status-selecters .paid-select.gallery, .paid-status-set .order-status-set-inner .status-selecters .status-select.gallery, .paid-status-set .order-status-set-inner .status-selecters .status-selects.gallery {
  background-color: #1dc8aa;
}

.order-created .filter-actions, .order-status-set .filter-actions, .order-status-sets .filter-actions, .paid-status-set .filter-actions {
  border-top: 0.1rem solid #d9d9d9;
  padding: 2rem 2.75rem 0;
  margin: 2rem -2.75rem 0;
  width: calc(100% + 5.5rem);
}

.order-created .filter-actions .half, .order-status-set .filter-actions .half, .order-status-sets .filter-actions .half, .paid-status-set .filter-actions .half {
  margin: 0;
}

.order-created .filter-actions .half:last-of-type, .order-status-set .filter-actions .half:last-of-type, .order-status-sets .filter-actions .half:last-of-type, .paid-status-set .filter-actions .half:last-of-type {
  text-align: right;
}

.order-created .filter-actions .half:last-of-type .blue-button, .order-status-set .filter-actions .half:last-of-type .blue-button, .order-status-sets .filter-actions .half:last-of-type .blue-button, .paid-status-set .filter-actions .half:last-of-type .blue-button {
  width: 100%;
  text-align: center;
}

.order-created .filter-actions .half .clear-filters, .order-status-set .filter-actions .half .clear-filters, .order-status-sets .filter-actions .half .clear-filters, .paid-status-set .filter-actions .half .clear-filters {
  color: #000;
  display: inline-block;
  cursor: pointer;
  font-weight: 700;
  padding: 1rem 0;
}

.status-selects i, .status-selects span {
  vertical-align: middle;
  display: inline-block;
}

.status-selects i {
  margin: 0 1rem;
  font-size: 2.5rem;
  display: none;
}

.status-selects.go i {
  display: inline-block;
}

.form-row {
  width: 43rem;
  margin: 0 0 4rem;
  font-weight: 500;
}

.form-row .half {
  float: left;
  width: 50%;
  padding: 0 2rem;
}

.form-row .half input {
  float: left;
  width: 100%;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1.5rem;
  outline: 0;
}

.form-row .half label {
  width: 100%;
  float: left;
  margin: 0 0 0.75rem;
  font-weight: 500;
}

.form-row textarea {
  float: left;
  width: 100%;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1.5rem;
}

.form-row textarea {
  resize: vertical;
  height: 10rem;
  outline: 0;
}

.form-row .marg {
  margin: 0 -2rem;
  width: 100%;
}

.form-row .pretty.p-default input:checked ~ .state label:after {
  background-color: #e6005b !important;
}

.form-row .pretty .state label:after, .form-row .pretty .state label:before {
  width: 3rem;
  height: 3rem;
}

.form-row .pretty .state label {
  text-indent: 4.5rem !important;
  padding-top: 0.32rem !important;
}

.form-row .pretty {
  margin-right: 2rem !important;
  min-height: 4rem;
  line-height: 4rem;
}

.form-row .pretty .state label:after, .form-row .pretty .state label:before {
  top: 1rem;
}

.frame-select {
  margin: 3rem 0 0;
}

.frame-select input {
  float: left;
  width: 100%;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1.5rem 3rem 1.5rem 1.5rem;
  outline: 0;
}

.frame-select label {
  width: 100%;
  float: left;
  margin: 0 0 0.75rem;
}

.frame-select .wrap-frame-select {
  position: relative;
}

.frame-select .wrap-frame-select .frame-select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  z-index: 100;
  width: 100%;
  max-height: 25rem;
  overflow: auto;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
}

.frame-select .wrap-frame-select .frame-select-dropdown .select-cat-item {
  float: left;
  width: 100%;
  padding: 0.75rem;
  cursor: pointer;
}

.frame-select .wrap-frame-select .frame-select-dropdown .select-cat-item:hover {
  background-color: #d9d9d9;
}

.frame-select .wrap-frame-select svg {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.frame-select.hidden {
  display: none;
}

.customer-select {
  position: relative;
}

.customer-select .populate-customers {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  z-index: 100;
  width: 100%;
  max-height: 25rem;
  overflow: auto;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
}

.customer-select .populate-customers .select-cat-items {
  float: left;
  width: 100%;
  padding: 0.75rem;
  cursor: pointer;
}

.customer-select .populate-customers .select-cat-items:hover {
  background-color: #d9d9d9;
}

.total-area .total-price.less {
  bottom: 2rem;
}

.total-area textarea {
  float: left;
  width: 20rem;
  margin: 2rem 0 0;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1.5rem;
  outline: 0;
}

.total-area input[type=text] {
  float: left;
  margin: 2rem 0 0;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1.5rem;
  outline: 0;
}

.search-and-new {
  margin: 0 0 2rem;
}
@media (min-width: 768px) {
  .search-and-new {
    margin: 0 0 4rem;
  }
}

.search-and-new .search-left {
  float: left;
  position: relative;
  width: 50rem;
}

.search-and-new .search-left input {
  float: left;
  width: 100%;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1rem 1.5rem;
  outline: 0;
}

.search-and-new .search-left button {
  position: absolute;
  right: 1rem;
  top: 1.15rem;
  cursor: pointer;
  z-index: 10;
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  outline: 0;
  color: #707070;
}

.search-and-new .new-order {
  float: right;
}

.black-button {
  background-color: #000;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.black-button:hover {
  background-color: #e6005b;
}

.grey-button {
  background-color: #707070;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  border: 0;
  outline: 0;
  cursor: pointer;
  margin: 0 1rem 0 0;
}

.grey-button:hover {
  background-color: #000;
}

.wrap-button {
  display: inline-block;
  position: relative;
}

.wrap-button img {
  position: absolute;
  left: 100%;
  margin-left: 1rem;
  width: 2.5rem;
  top: 0.7rem;
  display: none;
}

.cancel-link {
  background-color: #fff;
  color: red;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
}

.cancel-link:hover {
  color: #000;
}

.cancel-link.no-padd {
  padding-right: 0;
}

.button-red {
  background-color: red;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
}

.button-red:hover {
  background-color: #e6005b;
}

.blue-button {
  background-color: #007fff;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
}

.blue-button:hover {
  background-color: #000;
}

.blue-button.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.green-button {
  background-color: #00bfa5;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  outline: 0;
}

.green-button:hover {
  background-color: #00897b;
}

.purple-button {
  background-color: #9c27b0;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  outline: 0;
}

.purple-button:hover {
  background-color: #7b1fa2;
}

.pager {
  text-align: center;
  margin: 4rem 0 0;
}

.pager a {
  color: #707070;
  font-weight: 700;
  display: inline-block;
  margin: 0 1rem;
  width: 2.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
}

.pager a:hover, .pager span {
  background-color: #000;
  color: #fff;
  font-weight: 700;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  line-height: 2.5rem;
  border-radius: 50%;
  display: inline-block;
}

.complete-quote {
  margin: 3rem 0 0;
  text-align: right;
}

.complete-quote .error {
  color: red;
  font-weight: 500;
}

.pretty input[disabled] ~ * {
  opacity: 1 !important;
}

.add-to-new input, .add-to-new label {
  width: 100%;
  float: left;
}

.add-to-new label {
  font-weight: 500;
}

.add-to-new button {
  border: 0;
  width: 100%;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
}

.add-to-new input[type=email], .add-to-new input[type=text] {
  padding: 1rem 1.3rem;
  float: left;
  width: 100%;
  border-radius: 0.75rem;
  border: 0.1rem solid #efefef;
  -webkit-appearance: none;
  margin: 0.75rem 0 1.5rem;
  font-family: "DM Sans", sans-serif;
  outline: 0;
}

.error-inline {
  color: red;
  font-weight: 500;
  margin: -1rem 0 1.25rem;
}

.add-to-existing-wrap {
  margin: 2.75rem -2.75rem 0;
  width: calc(100% + 5.5rem);
  padding: 2.75rem 2.75rem 0;
  border-top: 0.1rem solid #efefef;
}

.add-to-existing-wrap input, .add-to-existing-wrap label {
  width: 100%;
  float: left;
}

.add-to-existing-wrap label {
  font-weight: 500;
}

.add-to-existing-wrap button {
  border: 0;
  width: 100%;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
}

.add-to-existing-wrap input[type=email], .add-to-existing-wrap input[type=text] {
  padding: 1rem 1.3rem;
  float: left;
  width: 100%;
  border-radius: 0.75rem;
  border: 0.1rem solid #efefef;
  -webkit-appearance: none;
  margin: 0.75rem 0 1.5rem;
  font-family: "DM Sans", sans-serif;
  outline: 0;
}

.mount-area {
  flex-direction: column;
}

.mount-measurements {
  max-width: 300px;
}
.mount-measurements input {
  float: left;
  width: 100%;
  border-radius: 0.5rem;
  border: 0.1rem solid #d9d9d9;
  -webkit-appearance: none;
  padding: 1.5rem 3rem 1.5rem 1.5rem;
  outline: 0;
  margin: 0 0 1.5rem;
}
.mount-measurements label {
  width: 100%;
  float: left;
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.mount-measurements .double-mount, .mount-measurements .single-mount {
  display: none;
}
.mount-measurements .double-mount.visible, .mount-measurements .single-mount.visible {
  display: block;
}
@media (max-width: 900px) {
  .mount-measurements .inside {
    padding: 0 2rem;
  }
}

.radio-toggle {
  display: flex;
  background: #f0f0f0;
  border-radius: 0.5rem;
  padding: 0.3rem;
  width: 100%;
  margin-top: 1rem;
}

.radio-toggle-container {
  margin-bottom: 1rem;
}

.radio-toggle .tier-option {
  flex: 1;
  text-align: center;
  padding: 1.2rem 0.5rem;
  cursor: pointer;
  border-radius: 0.4rem;
  transition: all 0.2s ease;
  font-size: 1.4rem;
  font-weight: 500;
  color: #707070;
}

.radio-toggle .tier-option:hover {
  background: #e0e0e0;
}

.radio-toggle .tier-option.active {
  background: #fff;
  color: #000;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

.radio-toggle.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.radio-toggle-description {
  margin-top: 1rem;
  font-size: 1.5rem;
  color: #888;
  font-style: italic;
  min-height: 1.5em;
}

.radio-toggle-description .tier-desc {
  display: none;
}

.radio-toggle-description .tier-desc.active {
  display: inline-block;
}

#floating-circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1; /* Behind the login box */
}

.circle {
  position: absolute;
  border-radius: 50%;
  background-color: rgb(230, 0, 91);
  animation: float infinite alternate; /* Infinite floating animation */
}

@keyframes float {
  0% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
  50% {
    transform: translate(50vw, 50vh);
    opacity: 0.2;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
}
.form-wrap form#login {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
.form-wrap form#login h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  color: #333;
}
.form-wrap form#login .status-message {
  display: none;
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  animation: slideDown 0.3s ease-out;
}
.form-wrap form#login .status-message i {
  margin-right: 8px;
}
.form-wrap form#login .status-message.error {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
}
.form-wrap form#login .status-message.success {
  background-color: #efe;
  border: 1px solid #cfc;
  color: #3c3;
}
.form-wrap form#login .status-message.info, .form-wrap form#login .status-message.loading {
  background-color: #eef;
  border: 1px solid #ccf;
  color: #33c;
}
.form-wrap form#login .form-group {
  margin-bottom: 20px;
  position: relative;
}
.form-wrap form#login .form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #555;
  font-size: 14px;
}
.form-wrap form#login .form-group label.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.form-wrap form#login .form-group input[type=text],
.form-wrap form#login .form-group input[type=password] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  transition: all 0.2s ease;
  background-color: #fff;
}
.form-wrap form#login .form-group input[type=text]:focus,
.form-wrap form#login .form-group input[type=password]:focus {
  outline: none;
  border-color: #e6005b;
  box-shadow: 0 0 0 3px rgba(230, 0, 91, 0.1);
}
.form-wrap form#login .form-group input[type=text]::placeholder,
.form-wrap form#login .form-group input[type=password]::placeholder {
  color: #999;
}
.form-wrap form#login .form-group input[type=text]:disabled,
.form-wrap form#login .form-group input[type=password]:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}
.form-wrap form#login .form-group.has-error input[type=text],
.form-wrap form#login .form-group.has-error input[type=password] {
  border-color: #c33;
  background-color: #fff5f5;
}
.form-wrap form#login .form-group.has-error input[type=text]:focus,
.form-wrap form#login .form-group.has-error input[type=password]:focus {
  border-color: #c33;
  box-shadow: 0 0 0 3px rgba(204, 51, 51, 0.1);
}
.form-wrap form#login .form-group .error-message {
  display: none;
  color: #c33;
  font-size: 13px;
  margin-top: 6px;
  animation: slideDown 0.2s ease-out;
}
.form-wrap form#login .form-group .password-wrapper {
  position: relative;
}
.form-wrap form#login .form-group .password-wrapper input[type=password],
.form-wrap form#login .form-group .password-wrapper input[type=text] {
  padding-right: 48px;
  margin-bottom: 0;
}
.form-wrap form#login .form-group .password-wrapper .toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease;
  border-radius: 4px;
}
.form-wrap form#login .form-group .password-wrapper .toggle-password:hover {
  color: #e6005b;
  background-color: rgba(230, 0, 91, 0.05);
}
.form-wrap form#login .form-group .password-wrapper .toggle-password:focus {
  outline: 2px solid #e6005b;
  outline-offset: 2px;
}
.form-wrap form#login .form-group .password-wrapper .toggle-password i {
  font-size: 16px;
}
.form-wrap form#login .form-group.checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.form-wrap form#login .form-group.checkbox-group label input[type=checkbox] {
  margin-right: 8px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}
.form-wrap form#login .form-group.checkbox-group label input[type=checkbox]:focus {
  outline: 2px solid #e6005b;
  outline-offset: 2px;
}
.form-wrap form#login .form-group.checkbox-group label span {
  font-size: 14px;
  color: #555;
}
.form-wrap form#login .login-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
}
.form-wrap form#login .login-options button[type=submit] {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.form-wrap form#login .login-options button[type=submit]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.form-wrap form#login .login-options button[type=submit].loading {
  pointer-events: none;
}
.form-wrap form#login .login-options button[type=submit] .button-loader i {
  margin-right: 8px;
}
.form-wrap form#login .login-options button[type=submit]:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.form-wrap form#login .login-options button[type=submit]:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.form-wrap form#login .login-options button[type=submit]:focus {
  outline: 2px solid #e6005b;
  outline-offset: 2px;
}
.form-wrap form#login .login-options .forgot-password {
  text-align: center;
  color: #666;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.form-wrap form#login .login-options .forgot-password:hover {
  color: #e6005b;
  text-decoration: underline;
}
.form-wrap form#login .login-options .forgot-password:focus {
  outline: 2px solid #e6005b;
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .form-wrap {
    padding: 0 20px;
  }
  .form-wrap form#login h3 {
    font-size: 1.5rem;
  }
  .form-wrap form#login .form-group input[type=text],
  .form-wrap form#login .form-group input[type=password] {
    font-size: 16px;
  }
  .form-wrap form#login .login-options button[type=submit] {
    padding: 12px 20px;
    font-size: 15px;
  }
}
@media (prefers-contrast: high) {
  .form-wrap form#login .form-group input[type=text],
  .form-wrap form#login .form-group input[type=password] {
    border-width: 3px;
  }
  .form-wrap form#login .status-message {
    border-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .form-wrap form#login .status-message,
  .form-wrap form#login .error-message {
    animation: none;
  }
  .form-wrap form#login .login-options button[type=submit]:hover {
    transform: none;
  }
}
.table-container {
  overflow-x: auto; /* Enable horizontal scrolling */
  overflow-y: hidden; /* Prevent vertical scrolling */
  -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS devices */
  max-width: 100%; /* Prevents the container from exceeding the width of the parent */
  padding: 0; /* Optional: Add padding if needed */
  margin: 1rem 0; /* Optional: Add margin if needed */
}
@media (min-width: 768px) {
  .table-container {
    overoverflow-y: auto;
    width: 100%;
  }
}

.table {
  border-collapse: collapse; /* Collapse borders */
  border-spacing: 0; /* Remove spacing between borders */
  width: 100%; /* Set table width to 100% */
  min-width: 600px; /* Ensure the table can exceed the container width */
}
.table th, .table td {
  padding: 1rem 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  text-align: left; /* Set default text alignment */
  vertical-align: center; /* Align content to the top */
}
.table caption {
  padding: 0.5em; /* Add some padding around the caption */
  text-align: center; /* Center align caption text */
}
.table th, .table td {
  border-bottom: 1px solid #efefef;
}

.page-template-Homepage .main-content > h1,
.page-template-Order .main-content > h1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 1rem;
  margin-bottom: 2rem;
  background: #f2f2f2;
  border-radius: 1rem;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .page-template-Homepage .main-content > h1,
  .page-template-Order .main-content > h1 {
    flex-direction: row;
  }
}
.page-template-Homepage .main-content > h1 .customer-name,
.page-template-Homepage .main-content > h1 .customer-info,
.page-template-Order .main-content > h1 .customer-name,
.page-template-Order .main-content > h1 .customer-info {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
}
.page-template-Homepage .main-content > h1 .customer-name .statuses,
.page-template-Homepage .main-content > h1 .customer-info .statuses,
.page-template-Order .main-content > h1 .customer-name .statuses,
.page-template-Order .main-content > h1 .customer-info .statuses {
  display: block;
}
.page-template-Homepage .main-content > h1 .customer-info,
.page-template-Order .main-content > h1 .customer-info {
  flex-direction: column;
}

h1 .customer-info {
  font-weight: 400;
}
@media (min-width: 768px) {
  h1 .customer-info {
    text-align: right;
  }
}

h1 .customer-info a {
  color: #000;
}

h1 .customer-info a:hover {
  color: #51b9a4;
}

.frame-area {
  position: relative;
  margin: 0 0 1rem;
}
.frame-area .form-row .row:first-child {
  flex-direction: column;
}
.frame-area .form-row .row:first-child .form-row .row:first-child {
  flex-direction: row;
}

.frame-area .frame-price {
  font-family: HelveticaNeue;
  line-height: 1;
  color: #007fff;
  display: flex;
  font-size: 3rem;
  opacity: 0.5;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .frame-area .frame-price {
    position: absolute;
    right: 0;
    bottom: 3.5rem;
    font-size: 4rem;
    margin: 0;
  }
}

.mount-area {
  position: relative;
  margin: 0 0 1rem;
}
.mount-area .form-row {
  flex-direction: column;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .mount-area .form-row {
    flex-direction: row;
    margin: 0 0 4rem;
  }
}
.mount-area .mount-price {
  font-family: HelveticaNeue;
  line-height: 1;
  color: #007fff;
  display: flex;
  /* Added display: flex */
  font-size: 3rem;
  /* Default font size */
  opacity: 0.5;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .mount-area .mount-price {
    position: absolute;
    /* Apply position in the media query */
    right: 0;
    bottom: 5.5rem;
    /* Adjusted to original value */
    font-size: 4rem;
    /* Updated font size */
    margin: 0;
    /* Reset margin */
  }
}

.glass-area {
  position: relative;
  margin: 0 0 1rem;
}
.glass-area .form-row {
  flex-direction: column;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .glass-area .form-row {
    flex-direction: row;
    margin: 0 0 4rem;
  }
}
.glass-area .glass-price {
  font-family: HelveticaNeue;
  line-height: 1;
  color: #007fff;
  display: flex;
  /* Added display: flex */
  font-size: 3rem;
  /* Default font size */
  opacity: 0.5;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .glass-area .glass-price {
    position: absolute;
    /* Apply position in the media query */
    right: 0;
    bottom: 3.5rem;
    /* Adjusted to original value */
    font-size: 4rem;
    /* Updated font size */
    margin: 0;
    /* Reset margin */
  }
}

.print-area {
  position: relative;
  margin: 0 0 1rem;
}
.print-area .form-row {
  flex-direction: column;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .print-area .form-row {
    flex-direction: row;
    margin: 0 0 4rem;
  }
}
.print-area .print-price {
  font-family: HelveticaNeue;
  line-height: 1;
  color: #007fff;
  display: flex;
  /* Added display: flex */
  font-size: 3rem;
  /* Default font size */
  opacity: 0.5;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .print-area .print-price {
    position: absolute;
    /* Apply position in the media query */
    right: 0;
    bottom: 3.5rem;
    /* Adjusted to original value */
    font-size: 4rem;
    /* Updated font size */
    margin: 0;
    /* Reset margin */
  }
}

.total-area {
  position: relative;
  margin: 0 0 1rem;
}
.total-area .total-price {
  font-family: HelveticaNeue;
  line-height: 1;
  color: #ffb100;
  display: flex;
  /* Added display: flex */
  font-size: 3rem;
  /* Default font size */
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .total-area .total-price {
    position: absolute;
    /* Apply position in the media query */
    right: 0;
    bottom: 5rem;
    /* Adjusted to original value */
    font-size: 4rem;
    /* Updated font size */
    margin: 0;
    /* Reset margin */
  }
}

.extra-item input,
.extra-item textarea {
  width: 100%;
}
@media (min-width: 768px) {
  .extra-item {
    display: flex;
    margin: 0 0 2rem;
  }
  .extra-item .extra-desc {
    flex: 1;
    margin: 2rem 2rem 0 0 !important;
  }
  .extra-item .extra-cost {
    width: 7.5rem;
  }
}
.extra-item .extra-who {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 3rem;
  font-size: 2rem;
}
@media (min-width: 768px) {
  .extra-item .extra-who {
    height: 4.75rem;
    width: 4.75rem;
    margin: 2rem 2rem 0 0;
    font-size: 2rem;
  }
}
.extra-item .extra-who {
  background-color: #00ef12;
  border-radius: 0.5rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
}

.photos-area .wrap-button {
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .photos-area .wrap-button {
    display: inline-block;
    width: auto;
  }
}
.photos-area .marg .half {
  width: 100%;
}
@media (min-width: 768px) {
  .photos-area .marg .half {
    width: 50%;
  }
}

.upload-response {
  width: 100%;
  background: #f2f2f2;
  padding: 2rem;
  margin: 2rem 0;
}
@media (min-width: 768px) {
  .upload-response {
    margin: 4rem -2rem 2rem !important;
  }
}
.upload-response .half img {
  width: 100%;
  height: auto;
}

.self-adhesive-board-area {
  position: relative;
  margin: 0 0 1rem;
}
.self-adhesive-board-area .form-row {
  flex-direction: column;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .self-adhesive-board-area .form-row {
    flex-direction: row;
    margin: 0 0 4rem;
  }
}
.self-adhesive-board-area .self-adhesive-board-price {
  font-family: HelveticaNeue;
  line-height: 1;
  color: #007fff;
  display: flex;
  /* Added display: flex */
  font-size: 3rem;
  /* Default font size */
  opacity: 0.5;
  margin: 0 0 1rem;
}
@media (min-width: 768px) {
  .self-adhesive-board-area .self-adhesive-board-price {
    position: absolute;
    /* Apply position in the media query */
    right: 0;
    bottom: 5.5rem;
    /* Adjusted to original value */
    font-size: 4rem;
    /* Updated font size */
    margin: 0;
    /* Reset margin */
  }
}

.section-calc-display {
  display: flex;
  width: 100%;
  position: relative;
}
.section-calc-display .section-calc {
  padding: 0.5rem 1rem;
  background-color: #fafafa;
  border-radius: 0.5rem;
  margin: 2rem 0;
}

.quote-calc-panel {
  position: relative;
  margin: 2rem 0 0;
  width: 100vw;
  border-radius: 0;
  z-index: 9999;
  transition: opacity 0.3s ease;
}
@media (min-width: 992px) {
  .quote-calc-panel {
    position: sticky;
    top: 141px;
    z-index: 100;
    width: auto;
    padding: 0 4rem;
  }
}

.calc-hidden .col-4 {
  display: none;
}
.calc-hidden .col-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

.quote-breakdown-details {
  padding: 2rem;
  background: #fafafa;
  border-radius: 4px;
  border: 1px solid #eee;
  font-size: 1.7rem;
}
.quote-breakdown-details h4 {
  font-size: 1.7rem;
  margin: 0 0 0.5rem 0;
  color: #222;
  border-bottom: none;
  padding-bottom: 0;
  font-weight: 600;
}
.quote-breakdown-details .breakdown-dimensions,
.quote-breakdown-details .breakdown-item,
.quote-breakdown-details .breakdown-total {
  background: none;
  border-radius: 0;
  border: none;
  margin: 0.5rem 0;
  padding: 0.5rem 0;
  color: #444;
}
.quote-breakdown-details .breakdown-title {
  color: #222;
  margin-bottom: 0.2rem;
  font-weight: 500;
}
.quote-breakdown-details .breakdown-calc {
  color: #666;
}
.quote-breakdown-details .breakdown-total {
  color: #007fff;
  font-weight: 600;
  margin-top: 1rem;
}

#quote-calc-plain {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 3px;
  font-size: 0.95rem;
  color: #555;
  font-style: italic;
}

.marg {
  margin: 0 -2rem;
  display: flex;
  flex-wrap: wrap;
}
.marg.center {
  align-items: center;
}
.marg.bottom {
  align-items: flex-end;
}
.marg .quart {
  width: 25%;
  padding: 0 2rem;
  float: left;
}
.marg .third {
  width: 33.333333333%;
  padding: 0 2rem;
  float: left;
}
.marg .half {
  width: 50%;
  padding: 0 2rem;
  float: left;
  margin: 0 0 2rem;
}
.marg .half img {
  width: 100%;
  height: auto;
}
.marg .fourty {
  width: 40%;
  padding: 0 2rem;
}
.marg .twenty {
  width: 20%;
  padding: 0 2rem;
  float: left;
}
.marg .thirty {
  width: 30%;
  padding: 0 2rem;
  float: left;
}
.marg .sixty {
  width: 60%;
  padding: 2rem 2rem 0;
  float: left;
}
.marg .seventy {
  width: 70%;
  padding: 0 2rem;
  float: left;
}