.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
.tippy-box[data-theme~=light-border]{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,8,16,.15);color:#333;box-shadow:0 4px 14px -2px rgba(0,8,16,.08)}.tippy-box[data-theme~=light-border]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light-border]>.tippy-arrow:after,.tippy-box[data-theme~=light-border]>.tippy-svg-arrow:after{content:"";position:absolute;z-index:-1}.tippy-box[data-theme~=light-border]>.tippy-arrow:after{border-color:transparent;border-style:solid}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:after{border-top-color:rgba(0,8,16,.2);border-width:7px 7px 0;top:17px;left:1px}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-svg-arrow>svg{top:16px}.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-svg-arrow:after{top:17px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff;bottom:16px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:rgba(0,8,16,.2);border-width:0 7px 7px;bottom:17px;left:1px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-svg-arrow:after{bottom:17px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:after{border-left-color:rgba(0,8,16,.2);border-width:7px 0 7px 7px;left:17px;top:1px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-svg-arrow>svg{left:11px}.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-svg-arrow:after{left:12px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff;right:16px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:after{border-width:7px 7px 7px 0;right:17px;top:1px;border-right-color:rgba(0,8,16,.2)}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-svg-arrow>svg{right:11px}.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-svg-arrow:after{right:12px}.tippy-box[data-theme~=light-border]>.tippy-svg-arrow{fill:#fff}.tippy-box[data-theme~=light-border]>.tippy-svg-arrow:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);background-size:16px 6px;width:16px;height:6px}
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-target {
  position: relative;
}
.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Wrapper for all connect elements.
 */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}
.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
/* Offset direction
 */
.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}
/* Give origins 0 height/width so they don't interfere with clicking the
 * connect elements.
 */
.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}
.noUi-horizontal .noUi-origin {
  height: 0;
}
.noUi-handle {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
.noUi-touch-area {
  height: 100%;
  width: 100%;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
.noUi-state-drag * {
  cursor: inherit !important;
}
/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 18px;
}
.noUi-horizontal .noUi-handle {
  width: 34px;
  height: 28px;
  right: -17px;
  top: -6px;
}
.noUi-vertical {
  width: 18px;
}
.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  right: -6px;
  bottom: -17px;
}
.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
  left: -17px;
  right: auto;
}
/* Styling;
 * Giving the connect element a border radius causes issues with using transform: scale
 */
.noUi-target {
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #D3D3D3;
  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connects {
  border-radius: 3px;
}
.noUi-connect {
  background: #3FB8AF;
}
/* Handles and cursors;
 */
.noUi-draggable {
  cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}
.noUi-handle {
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #FFF;
  cursor: default;
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
 */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 14px;
  width: 1px;
  background: #E8E7E6;
  left: 14px;
  top: 6px;
}
.noUi-handle:after {
  left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}
.noUi-vertical .noUi-handle:after {
  top: 17px;
}
/* Disabled state;
 */
[disabled] .noUi-connect {
  background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}
/* Base;
 *
 */
.noUi-pips,
.noUi-pips * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.noUi-pips {
  position: absolute;
  color: #999;
}
/* Values;
 *
 */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}
.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}
/* Markings;
 *
 */
.noUi-marker {
  position: absolute;
  background: #CCC;
}
.noUi-marker-sub {
  background: #AAA;
}
.noUi-marker-large {
  background: #AAA;
}
/* Horizontal layout;
 *
 */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}
.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}
/* Vertical layout;
 *
 */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}
.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding-left: 25px;
}
.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}
.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}
.noUi-horizontal .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(50%, 0);
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}
.noUi-vertical .noUi-origin > .noUi-tooltip {
  -webkit-transform: translate(0, -18px);
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}
.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:6px 8px 3px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{display:inline-block;vertical-align:baseline}.ts-wrapper.multi .ts-control>div{background:#f2f2f2;border:0 solid #d0d0d0;color:#303030;cursor:pointer;margin:0 3px 3px 0;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#e8e8e8;border:0 solid #cacaca;color:#303030}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#fff;border:0 solid #fff;color:#7d7d7d}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(#fff,#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:none;display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #d0d0d0;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#cacaca}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #d0d0d0;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#cacaca}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}:root{--ts-pr-clear-button:0;--ts-pr-caret:0;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{clip:rect(0 0 0 0)!important;border:0!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
/*# sourceMappingURL=tom-select.min.css.map */
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
          box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #569ff7;
          box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
          box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
          box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
.cropper-crop-box, .cropper-view-box {
	border-radius: 50%;
}

.cropper-view-box {
	box-shadow: 0 0 0 1px #39f;
	outline: 0;
}

.cropper-face {
	background-color:inherit !important;
}

.cropper-dashed, .cropper-line {
	display:none !important;
}

.cropper-view-box {
	outline:inherit !important;
}

.circular-crop .cropper-point.point-se {
	top: calc(85% + 1px);
	right: 14%;
}

.circular-crop .cropper-point.point-sw {
	top: calc(85% + 1px);
	left: 14%;
}

.circular-crop .cropper-point.point-nw {
	top: calc(15% - 5px);
	left: 14%;
}

.circular-crop .cropper-point.point-ne {
	top: calc(15% - 5px);
	right: 14%;
}

.img {
	display: block;
	max-width: 100%;
}

.cropper-modal {
	background-color: transparent;
}
.noUi-target {
  background: #d9d9d9;
  border: none;
  box-shadow: none;
  margin-bottom: 0px;
}

.noUi-handle:before,
.noUi-handle:after {
  display: none;
}

.noUi-tooltip {
  color: #fff;
  background: #d9d9d9;
  border: none;
  margin-bottom: 4px;
}

.noUi-connect {
  background: #fe8c5a;
}

.noUi-handle {
  height: 16px !important;
  width: 16px !important;
  top: -5px !important;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border: 1px solid white;
  background: #fe8c5a;
}

.noUi-horizontal {
  height: 8px;
}

.noUi-horizontal .noUi-handle {
  right: -10px;
}
.tippy-box[data-theme="custom"] {
  background: transparent;
  color: inherit; /* otherwise it defaults to white */
}

.tippy-box[data-theme="custom"] .tippy-arrow {
  color: white;
}

.tippy-box[data-theme="custom"] .tippy-content {
  padding: 0;
}

form[data-controller="worker-list"] [data-tippy-root] {
  @media (max-width: 639px) {
    width: calc(100% - 20px);
    padding-right: 10px;
  }
}

.tippy-box[data-theme="light-border"] {
  box-shadow: rgba(0, 8, 16, 0.6) 0px 4px 14px -2px;
}
.quick-search {
  .ts-control {
    background: #343434 !important;
    border: none !important;
    border-radius: 0px !important;
  }

  .ts-control > input {
      color: white !important;
  }

  .ts-control > input::placeholder {
      color: #B2B2B2;
  }

  .ts-control .item {
    border-radius: 4px;
  }

  .ts-control .clear-button {
    color: white !important;
    font-size: 24px;
    padding-bottom: 10px !important;
  }

  .ts-wrapper {
    width: 100% !important;
    position: static !important; /* this lets us position the dropdown relative to our own wrapper, rather than the built-in one */
  }

  .ts-wrapper .ts-dropdown {
    background: #343434 !important;
    color: #b9b9b9;
    border: none !important;
    padding: 3px;
    z-index: 20;
  }

  .ts-dropdown {
    border-radius: 12px !important;
    padding: 12px !important;
  }

  .optgroup-header {
    background: #434343 !important;
    color: white !important;
    font-weight: 600;
  }

  .ts-dropdown-content {
    max-height: 340px !important;
  }

  .ts-dropdown-content .optgroup {
    margin-bottom: 16px;
  }

  .ts-dropdown .active {
    background-color: #ccc !important;
    color: black !important;
  }

  .option span.highlight {
    color: #ff6e31 !important;
    background: none !important;
  }
}

.multiselect {
  .ts-wrapper {
    width: 100% !important;
    position: static !important;
  }

  .ts-control {
    border-radius: 0.5rem;
    max-height: 192px !important;
    overflow-y: auto !important;
  }

  .ts-dropdown .active {
    color: white !important;
    background: #fe8c5a !important;
  }

  .ts-control .item {
    border-radius: 4px;
    background: #fe6f31 !important;
    color: white !important;
    padding: 8px !important;
  }

  .ts-control .clear-button {
    display: none;
  }
}

/* Large multiselect for onboarding - equivalent to tailwind text-base sizing */
.multiselect.large {
  .ts-control {
    font-size: 1rem;
    line-height: 1.5rem;

    input {
      font-size: 1rem;
      line-height: 1.5rem;
    }
  }

  .ts-control .item {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .option {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/* The view_as banner (app/components/view_as/banner_component.html.erb) renders as
   body's first child, sticky, only during an active view_as session. Its height is
   fixed (h-12) so the viewport-pinned layout shells below it
   (Layout::WithHeaderAndSidebar, Layout::ThreeColumn) can read --page-offset and
   start their top edge exactly below it — no JS measurement.

   Keeping this a single offset on the shell's top edge (rather than shrinking each
   pane individually) is what keeps the document exactly one viewport tall whether or
   not the banner renders. Give any pane its own 100dvh height instead and the
   document becomes viewport + header height, which shows up as a second, outer
   scrollbar that scrolls by precisely the header's height. */
:root {
  --page-offset: 0px;
}

body:has(> .view-as-banner) {
  --page-offset: 3rem;
}

/* The `html, body, main { h-full }` chain further down this file means main is a
   full viewport tall on its own. Add the banner as a flow sibling and the body's
   content becomes viewport + banner, so the document gains a scrollbar that
   travels exactly the banner's height. Shrink main by the same offset. */
body:has(> .view-as-banner) > main {
  height: calc(100% - var(--page-offset));
}

/* Layout shells are pinned, so the document has nothing left to scroll — but the
   scrollport still rubber-bands on macOS, which drags the sticky banner down and
   exposes the white page behind it. Suppress the bounce for the duration of the
   session. Scoped to the root because overscroll-behavior only propagates to the
   viewport from the root element, and scoped to :has() so ordinary scrolling
   pages keep their native bounce whenever no banner is rendering. */
html:has(> body > .view-as-banner) {
  overscroll-behavior-y: none;
}

mark {
  @apply bg-brand text-white;
  --tw-bg-opacity: 1;
  padding: 0px 3px;
}

/* TODO: migrate this to separate pagy.css file */
.pagy {
  @apply isolate inline-flex -space-x-px mb-12 mt-6;

  .page {
    a {
      @apply block px-4 py-1 text-base text-black font-semibold bg-white border border-neutral-300;
      @apply hover:bg-neutral-50;
    }

    &.active a {
      @apply text-white cursor-default bg-brand;
      @apply hover:text-white hover:bg-brand;
    }

    &.disabled a {
      @apply text-neutral-500 cursor-default;
      @apply hover:text-neutral-400 hover:bg-neutral-600;
    }

    &:first-child a {
      @apply rounded-l-lg;
    }

    &:last-child a {
      @apply rounded-r-lg;
    }
  }
}
/* TODO: migrate this to separate pagy.css file */

.field_with_attribute_errors input {
  @apply ring ring-red-300 leading-[0];
}

.field_with_errors {
  @apply ring ring-red-300 leading-[0];
}

.search-3-saved-search-wrapper {
  @apply pb-4 px-4;

  .title {
    @apply mb-1 rounded py-2 break-words flex justify-between hover:text-brand;
  }
}

.search-results-wide-grid {
  @apply md:grid-cols-[4fr,3fr,minmax(112px,1fr),3fr];
}

.search-results-wide-grid[data-show-pay-range="true"] {
  @apply md:grid-cols-[4fr,2fr,minmax(112px,1fr),minmax(86px,3fr),2fr];
}

.search-results-wide-grid[data-show-interview-status="true"] {
  @apply md:grid-cols-[3fr,2fr,minmax(112px,1.5fr),minmax(86px,2fr),2fr];
}

.submit-button {
  @apply text-white cursor-pointer bg-brand hover:bg-brand-400 disabled:cursor-not-allowed disabled:bg-neutral-300 disabled:hover:bg-neutral-300 disabled:text-neutral-700;
}

[data-form-submit-target="submit"],
[data-submit-activator-target="submit"] {
  @apply submit-button;
}

[data-read-more-target="content"] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--read-more-line-clamp, 8);
}

.brand-checkbox {
  @apply checked:!bg-brand !rounded text-lg !p-[10px] cursor-pointer;
}

/* use checkbox to style as button */
.check-button:checked + .check-button-label {
  @apply bg-brand text-white;
}

.check-button:checked + * .check-button-label {
  @apply bg-brand text-white;
}

.check-destroy:checked + .container {
  @apply hidden;
}

/* fix tailwind base class */
.break-words {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* StandardFormBuilder classes */

.standard-form {
  @apply flex flex-col w-full gap-4;
}

.standard-form input[type=text],
.standard-form input[type=email],
.standard-form input[type=password],
.standard-form input[type=tel],
.standard-form input[type=number],
.standard-form textarea,
.standard-form select {
  @apply w-full text-[#333333] placeholder-[#A7A7A7] rounded-md;
}

.standard-form input[disabled],
.standard-form textarea[disabled],
.standard-form select[disabled] {
  @apply text-neutral-500 border-neutral-300 bg-neutral-100 cursor-not-allowed;
}

.standard-form input[type=checkbox] {
  @apply checked:!bg-brand rounded text-lg p-[10px] cursor-pointer;
}

.standard-form input[type=submit],
#next-button.submit-button {
  @apply bg-brand hover:bg-brand-400 cursor-pointer text-white w-full uppercase text-center p-3 rounded-md;
}

/* Hover direction only — everything else is shared above. The onboarding Next button
   darkens; .standard-form submits keep lightening, as does .submit-button on its own
   (see the rule near the top of this file). Because this selector carries an id it also
   out-specifies any hover: utility on the element itself, which is why the combined
   step's own hover:bg-brand-600 never applied. Keep the :disabled rule below this one —
   the two have equal specificity, so source order is what keeps a disabled button grey. */
#next-button.submit-button {
  @apply hover:bg-brand-600;
}

.standard-form input[type=submit]:disabled,
#next-button.submit-button.disabled {
  @apply bg-disabled-button text-disabled-button-text cursor-not-allowed;
}

.standard-form section:not(:first-of-type) {
  @apply border-t pt-6 mt-6;
}

html, body, main {
  @apply h-full; /* many of our layouts wants to fill the page even if their contents aren't tall enough to do it naturally, so we need this unbroken chain of h-full to reach them */
}

/* message bubble styles have some non-tailwindy inheritance */

.message-bubble {
  @apply rounded-lg p-4 @lg:p-6 @lg:mt-0 text-sm;
}

.message-blue {
  @apply bg-main-blue text-white
}

.message-gray {
  @apply bg-neutral-100
}

.gray-timeline .message-gray {
  @apply bg-neutral-200
}

.conversation-tabs-bg {
  @apply bg-gradient-to-b from-white via-white to-transparent sticky top-0 z-20 pt-5 pb-[80px] -mx-8 px-8 text-sm;
}

.gray-timeline .conversation-tabs-bg {
  @apply bg-gradient-to-b from-orange-tint via-orange-tint to-transparent sticky top-0 z-20 pt-5 pb-[80px] -mx-8 px-8 text-sm;
}


.message-white {
 @apply bg-white border border-[#737373]
}

.message-bubble.center {
  @apply w-full
}

.message-bubble.left {
  @apply w-fit
}

.message-bubble.right {
 @apply w-fit ml-auto
}

.message-bubble p {
  @apply m-0;
}

.message-bubble p + p {
  @apply mt-2;
}

.message-blue a {
  @apply underline text-white/90 hover:text-white;
}

.message-gray a {
  @apply underline text-brand;
}

/* TributeJS styles with Tailwind */
.tribute-container {
  @apply absolute max-h-[300px] max-w-[500px] overflow-hidden z-50 mt-3 rounded-lg;
}

.tribute-container ul {
  @apply m-0 p-0 list-none bg-white rounded-card shadow-bottom border border-light-200 max-h-[300px] overflow-auto;
}

.tribute-container ul::-webkit-scrollbar {
  @apply w-2;
}

.tribute-container ul::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.tribute-container ul::-webkit-scrollbar-thumb {
  @apply bg-neutral-300 rounded-full;
}

.tribute-container ul::-webkit-scrollbar-thumb:hover {
  @apply bg-neutral-400;
}

.tribute-container li {
  @apply py-1.5 px-3 cursor-pointer text-sm text-dark-500 hover:bg-brand-50 hover:text-brand transition-colors duration-150;
}

.tribute-container li.highlight,
.tribute-container li:hover {
  @apply bg-brand-50 text-brand;
}

.tribute-container li span {
  @apply font-medium;
}

/* Google Places Autocomplete dropdown (.pac-*) with Tailwind.
   Google injects its stylesheet at the top of <head>, so equal-specificity rules here win the cascade. */
.pac-container {
  @apply mt-1.5 overflow-hidden rounded-card border border-light-200 bg-white shadow-bottom;
  font-family: "Poppins", sans-serif;
}

.pac-container.modal-specific {
  position: fixed !important;
}

/* items-baseline: the 14px query and 12px secondary text are separate flex items —
   centering would align their midpoints, leaving the smaller text riding high */
.pac-item {
  @apply flex cursor-pointer items-baseline gap-x-1.5 border-0 px-3 py-2 text-xs leading-snug text-main-grey transition-colors duration-150;
}

.pac-item:hover,
.pac-item-selected {
  @apply bg-brand-50;
}

.pac-item-query {
  @apply pr-0 text-sm text-dark-500;
}

.pac-matched {
  @apply font-normal text-brand;
}

/* Swap Google's gray sprite pin for the same heroicon map-pin the location inputs use.
   Scoped under .pac-container to outrank Google's retina rule (.hdpi .pac-icon).
   self-center: the empty masked box has no text baseline, so it re-centers in the row. */
.pac-container .pac-icon {
  @apply h-4 w-4 flex-none self-center bg-brand-200;
  margin: 0;
  background-image: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pac-item:hover .pac-icon,
.pac-item-selected .pac-icon {
  @apply bg-brand;
}

/* Keep the "powered by Google" attribution row hidden */
.pac-logo::after {
  content: none;
}

.tribute-container li.no-match {
  @apply cursor-default text-main-grey italic;
}

.tribute-container .tribute-no-match {
  @apply w-full border-t border-neutral-100 bg-neutral-50;
}

.tribute-container .menu-highlighted {
  @apply font-bold;
}

.tribute-container .tribute-item {
  @apply flex items-center gap-2;
}

/* Planner cell save flash */
@keyframes planner-saved-flash {
  0% { background-color: rgb(240 253 244); }
  100% { background-color: transparent; }
}

.planner-saved-flash {
  animation: planner-saved-flash 1s ease-out;
}

/* Turbo frame loading states — show spinner, hide content while fetching */
turbo-frame[aria-busy="true"] .frame-loading { display: block; }
turbo-frame[aria-busy="true"] .frame-content { display: none; }
/*
 * Avo admin customizations

 */

/* Limit sidebar has_many field heights */
[data-component-name="avo/resource_sidebar_component"] turbo-frame {
  max-height: 300px;
  overflow-y: auto;
  display: block;
}
/* Coverage Map Styles */

/* Hide raw selects until tom-select initializes to prevent FOUC */
[data-controller="tom-select"]:not(:has(.ts-wrapper)) {
  opacity: 0;
}

/* Popup styling - light theme */
.coverage-popup .mapboxgl-popup-content {
  padding: 0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
}
.coverage-popup .mapboxgl-popup-tip {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.coverage-popup .mapboxgl-popup-close-button {
  padding: 8px 10px 4px 4px;
  font-size: 18px;
  color: #6b7280;
}
.coverage-popup .mapboxgl-popup-close-button:hover {
  color: #111827;
  background: transparent;
}
.coverage-popup-content {
  color: #374151;
}
.coverage-popup-content h3 {
  color: #111827;
}
.coverage-popup-content table tbody tr:hover {
  background: rgba(0,0,0,0.03);
}
.coverage-stat-box {
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.coverage-stat-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.coverage-stat-box:active {
  transform: translateY(0);
}
.coverage-worker-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.coverage-workers-list {
  font-size: 12px;
}
.coverage-workers-list::-webkit-scrollbar {
  width: 4px;
}
.coverage-workers-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.coverage-workers-list::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 2px;
}
.table-sort-selected {
  background-color: #E5ECF5;
}
details.toggle[open] summary {
  display: none;
}
details.toggle > summary {
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }
}
.experience-chart__chart-container {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 0.06fr;
}

.experience-chart__chart-container::after {
  position: absolute;
  content: "";
  width: 100%;
  border-top: 1px solid #d7d7d7;
  bottom: 32px;
}

.experience-chart__chart {
  position: relative;
  display: grid;
  padding-top: 24px;
}

.experience-chart__chart-row, .experience-chart__chart-row-unmatched {
  height: 30px;
  margin-bottom: 1px;
  align-items: center;
  display: flex;
}

.experience-chart__chart-row {
  background-color: rgba(225, 225, 225, 0.6);
  position: relative;
}


.experience-chart__chart-row-text {
  padding-left: 6px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  position: absolute;
  z-index: 2;
}

.experience-chart__chart-axis-columns {
  position: absolute;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.experience-chart__chart-axis-columns > div {
  border-left: 1px solid #d7d7d7;
}

.experience-chart__chart-axis-columns > div:last-child {
  border-right: 1px solid #d7d7d7;
}

.experience-chart__chart-axis-labels {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  justify-items: end;
  width: 100%;
  position: sticky;
  bottom: 0px;
  background: #fff;
  border-top: solid 1px #ddd;
}

.experience-chart__chart-axis-labels > div {
  height: 32px;
  padding-right: 4px;
  padding-top: 8px;
  font-size: 8px;
  letter-spacing: 0.2px;
  color: #8c8c8c;
  width: max-content;
  font-size: 10px;
}

.experience-chart__chart-axis-labels_short > div {
  padding-right: 0;
  text-align: center;
  width: 100%;
}
/* 60-degree folded corner */
.folded-paper {
  position: relative;
  background: linear-gradient(-150deg, transparent 1.5em, #FFF2B8 0);
  border-radius: .5em;
}

.folded-paper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.1) 0, rgba(0,0,0,.2)) no-repeat 100% 0;
  width: 1.73em;
  height: 3em;
  transform: translateY(-1.3em) rotate(-30deg);
  transform-origin: bottom right;
  border-bottom-left-radius: inherit;
  box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.1);
}
/* when viewing conversations as employer, move and hide the intercom
 * widget as needed to prevent it covering the send button */
@media (max-width: 1024px) {
  .conversations_controller .intercom-lightweight-app-launcher, .conversations_controller #intercom-container {
    display: none;
  }
}

/* when viewing conversations as a worker, just hide the intercom launcher completely */
.conversations_controller.worker_user_type .intercom-lightweight-app-launcher, .conversations_controller.worker_user_type #intercom-container {
  display: none;
}
html[data-bridge-platform] {
  user-select: none;
}

html[data-bridge-platform] .profiler-results {
  display: none;
}

[data-bridge-components~="button"] [data-controller~="bridge--button"] {
  display: none;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
  text-align: left;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
  display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
  display: block;
  -webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
  display: block;
  -webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
  position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  -ms-transition: -ms-transform .5s;
  -o-transition: -o-transform .5s;
  transition: transform .5s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  -ms-transition: -ms-transform .5s;
  -o-transition: -o-transform .5s;
  transition: transform .5s;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  font-family: "Helvetica Neue", sans-serif; /* leave this font as is, our font (Poppins) doesn't work well with the odometer */
  line-height: 1.1em;
}
.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
  text-align: center;
}

/* Skillit modifications below this line */

.odometer-inside {
  display: flex;
}
/*
 * Skillit BDS onboarding foundation.
 * Canonical source: skillit-bds@1c8fa81 (tokens/tokens.json5, components/*.md, approved SVG assets).
 */
:root {
  --color-background: #FAF7F3;
  --color-surface: #FFFFFF;
  --color-foreground: #232F36;
  --color-primary: #EF6F1A;
  --color-warning: #FEB11C;
  --color-error: #C8102E;
  --color-success: #33663D;
  --color-link: #007CA6;

  --color-background-hover: #EAE6DE;
  --color-surface-hover: #EFEDE9;
  --color-foreground-hover: #212C31;
  --color-primary-hover: #E06718;
  --color-warning-hover: #EEA51A;
  --color-error-hover: #BB0F2A;
  --color-success-hover: #305F38;
  --color-link-hover: #007398;

  --space-1: 0.25rem;
  --space-1\.5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-128: clamp(48px, 10vw, 128px);
  --space-256: clamp(96px, 18vw, 256px);

  --font-primary: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-8x: 8rem;
  --text-6x: 6rem;
  --text-4x: 4rem;
  --text-3x: 3rem;
  --text-2x: 2rem;
  --text-2x-sm: clamp(1.5rem, 1.2928rem + 0.884vw, 2rem);
  --text-1\.5x: 1.5rem;
  --text-1\.5x-sm: clamp(1.125rem, 0.9696rem + 0.663vw, 1.5rem);
  --text-1x: 1rem;
  --text-0\.75x: 0.75rem;
  /* Local aliases. BDS retired the functional UI scale in favour of the numbered
   * tiers; these keep older rules readable and resolve to those tiers. */
  --text-ui: var(--text-1x);
  --text-ui-lg: 1.125rem;
  --text-mono: 0.875rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --radius-sharp: 16px;
  --radius-pill: 9999px;
  --max-width-content: 1168px;
  --column-min-width: 326px;
  --max-width-app: 480px;
  --max-width-text: 70ch;
  --field-max-width: 18ch;
  --touch-target-min: 40px;
  --nav-height: 64px;
  --logo-mark-min: 21px;
  --wordmark-min: 16px;
  --logo-height: 24px;
}

.bds,
.bds *,
.bds *::before,
.bds *::after {
  box-sizing: border-box;
}

.bds {
  color: var(--color-foreground);
  background: var(--color-background);
  font-family: var(--font-primary);
  font-size: var(--text-1x);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.bds :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

.bds :where(img, svg) {
  max-width: 100%;
}

.bds :where(a, button, input, select, textarea):focus-visible,
.peer:focus-visible + .bds-choice,
.check-button:focus-visible + .bds-choice {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* position: relative makes the shell the containing block for its absolutely
 * positioned descendants (sr-only legends and labels among them). Without it they
 * resolve against the viewport, and the document gains a second scroll range the
 * height of the page below the shell's own scroll container. */
.bds-shell {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
}

.bds-skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 50;
  display: inline-flex;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-background);
  background: var(--color-foreground);
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-100% - var(--space-4)));
}

.bds-skip-link:focus {
  transform: translateY(0);
}

.bds-shell__header {
  min-height: var(--nav-height);
  flex: 0 0 auto;
  background: var(--color-surface);
}

/* One content block for header, step indicator, body, and footer. Mobile keeps the
 * hand-width gutter; desktop trades the phone-width column for a 128px gutter and
 * left-aligned content (Chiyo, Sep 9). The block caps at the BDS content width plus
 * its gutters, so ultra-wide screens center a 1200px column instead of stretching. */
.bds-shell__header-inner,
.bds-shell__progress-inner,
.bds-shell__main,
.bds-shell__footer-inner {
  width: 100%;
  min-width: 0;
  max-width: calc(var(--max-width-content) + 2 * var(--space-128));
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .bds-shell__header-inner,
  .bds-shell__progress-inner,
  .bds-shell__main,
  .bds-shell__footer-inner {
    padding-inline: var(--space-128);
  }
}

.bds-shell__header-inner {
  display: flex;
  min-height: var(--nav-height);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
}

.bds-shell__brand {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-foreground);
}

.bds-shell__account-nav {
  display: flex;
  max-width: 100%;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-3);
  margin-left: auto;
}

.bds-nav-link {
  display: inline-flex;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-1);
  color: var(--color-foreground);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-decoration: none;
}

.bds-nav-link:hover {
  color: var(--color-foreground-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Header logo is 24px tall whichever asset shows (BDS logo tokens, Sep 2026). */
.bds-shell__lockup {
  display: block;
  width: auto;
  height: var(--logo-height);
}

.bds-shell__mark {
  display: none;
  width: auto;
  height: var(--logo-height);
  color: var(--color-foreground);
}

.bds-shell__main {
  flex: 1 0 auto;
  padding-block: var(--space-8);
}

/* Step indicator: the thin horizontal bar (Chiyo, Sep 11, in place of the dot row).
 * Iron fill on the Canvas hover tone, directly beneath the header. Non-interactive,
 * so it stays off the accent color. Shown contextually: not on the signup screen. */
.bds-shell__progress {
  flex: 0 0 auto;
}

.bds-shell__progress-inner {
  padding-block: var(--space-3);
}

.bds-shell__progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-background-hover);
}

.bds-shell__progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-foreground);
  transition: width 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .bds-shell__progress-fill {
    transition: none;
  }
}

/* Back and forward buttons (Chiyo, Sep 11): two 40px filled circles, not a bar.
 * Iron arrows on a Canvas circle (Back) and a Traffic Cone circle (Next). The
 * footer itself is transparent at every width; on phones it stays pinned to the
 * bottom so the buttons are always within thumb reach, from tablet up it is static. */
.bds-shell__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex: 0 0 auto;
  background: transparent;
}

.bds-shell__footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.bds-shell__nav-button {
  display: inline-flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  box-shadow: none;
  cursor: pointer;
}

.bds-shell__nav-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.bds-shell__back {
  background: var(--color-background);
}

.bds-shell__back:hover {
  background: var(--color-background-hover);
}

.bds-shell__next {
  margin-left: auto;
  background: var(--color-primary);
}

.bds-shell__next:hover {
  background: var(--color-primary-hover);
}

/* A Next that cannot go anywhere yet reads disabled at 50% opacity (the BDS disabled
 * rule) rather than hiding, so a first step never shows an empty footer. */
.bds-shell__next:disabled,
.bds-shell__next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bds-shell__next:disabled:hover,
.bds-shell__next.disabled:hover {
  background: var(--color-primary);
}

@media (min-width: 768px) {
  .bds-shell__footer {
    position: static;
  }
}

.bds-heading,
.bds-question {
  max-width: var(--max-width-text);
  color: var(--color-foreground);
  text-align: left;
}

.bds-heading {
  margin: 0;
  font-size: var(--text-2x);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.bds-question {
  margin: 0;
  font-size: var(--text-1\.5x);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.bds-supporting-copy {
  max-width: var(--max-width-text);
  color: var(--color-foreground);
  font-size: var(--text-1x);
  line-height: 1.6;
}

.bds-label {
  display: block;
  color: var(--color-foreground);
  font-size: var(--text-1x);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.bds-meta {
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.4;
}

.bds-card,
.bds-skill-row,
.bds-removable-item {
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-surface);
  box-shadow: none;
}

.bds-card {
  padding: var(--space-16);
}

.bds-skill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
}

.bds-skill-row > .bds-label,
.bds-skill-row > .bds-supporting-copy {
  flex: 1 1 12rem;
}

.bds-skill-row > .bds-stepper {
  flex: 0 0 auto;
}

.bds-removable-item {
  display: flex;
  min-width: 0;
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.bds-button,
.bds-icon-button,
.bds-link {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.bds-button,
.bds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  cursor: pointer;
}

.bds-button {
  gap: var(--space-2);
  padding: 0.5em 1em;
  font-size: var(--text-1x);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

/* BDS secondary: Iron on Plaster, no border, same pill and padding as primary. */
.bds-button--secondary {
  color: var(--color-foreground);
  background: var(--color-surface);
}

.bds-button--secondary:hover {
  background: var(--color-surface-hover);
}

.bds-button--primary {
  color: var(--color-foreground);
  background: var(--color-primary);
}

.bds-button--primary:hover {
  background: var(--color-primary-hover);
}

/* The shared ring is Traffic Cone, which disappears against a Traffic Cone fill. */
.bds-button--primary:focus-visible {
  outline-color: var(--color-foreground);
}

.bds-button:disabled,
.bds-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bds-icon-button {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: 0 0 var(--touch-target-min);
  padding: var(--space-2);
  color: var(--color-foreground);
  background: transparent;
}

.bds-icon-button:hover {
  background: var(--color-surface-hover);
}

.bds-stepper,
.bds [data-controller~="stepper"] {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: var(--touch-target-min) minmax(0, 1fr) var(--touch-target-min);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-surface);
  box-shadow: none;
}

.bds-stepper-button {
  display: inline-flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  background: transparent;
  box-shadow: none;
  font-size: var(--text-ui-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.bds-stepper-button:hover {
  background: var(--color-surface-hover);
}

.bds-stepper-value {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
}

.bds .bds-stepper-input {
  width: 4rem;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sharp);
  color: var(--color-foreground);
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  text-align: center;
  appearance: textfield;
}

.bds .bds-stepper-input::-webkit-inner-spin-button,
.bds .bds-stepper-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.bds-stepper-prefix,
.bds-stepper-unit {
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.4;
}

.bds-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-link);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bds-link:hover {
  color: var(--color-link-hover);
}

/* A link inside a sentence keeps the sentence's line box. The 44px target belongs
 * to standalone action links, not to words in a consent label. */
.bds-link--inline {
  display: inline;
  min-width: 0;
  min-height: 0;
}

/* Inputs are Plaster on Canvas with square corners: 16px is for cards, the pill is
 * for actions, and a field is neither. A lone field caps at ~18ch; stacked text
 * fields sit on the two-column field grid and fill their column (Chiyo, Sep 11),
 * and inside the work-history modal they fill the card. */
.bds-field {
  width: 100%;
  max-width: var(--field-max-width);
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: 0;
  color: var(--color-foreground);
  background: var(--color-surface);
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: var(--text-1x);
  font-weight: var(--weight-regular);
}

textarea.bds-field,
.bds-grid--fields .bds-field,
.bds-grid--fields .bds-select,
.bds-modal .bds-field,
.bds-modal .bds-select {
  max-width: none;
}

.bds-field:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.bds-field::placeholder {
  color: var(--color-foreground-hover);
}

/* Multi-select buttons: Plaster/Iron unselected, Iron/Canvas selected, pill like
 * every other actionable element. Selection is the fill swap alone, no icon. */
.bds-choice {
  display: flex;
  width: 100%;
  min-height: var(--touch-target-min);
  align-items: center;
  padding: 0.5em 1em;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  background: var(--color-surface);
  box-shadow: none;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.bds-choice:hover {
  background: var(--color-surface-hover);
}

.bds-choice-selected,
.peer:checked + .bds-choice,
.check-button:checked + .bds-choice {
  color: var(--color-background);
  background: var(--color-foreground);
}

.bds-choice-selected:hover,
.peer:checked + .bds-choice:hover,
.check-button:checked + .bds-choice:hover {
  background: var(--color-foreground-hover);
}

/* Native select with the BDS chevron drawn over its right padding. The chevron is a
 * state indicator, 1em like the text, and turns up while the select has focus. */
.bds-select {
  position: relative;
  width: 100%;
  max-width: var(--field-max-width);
}

.bds-select > select {
  appearance: none;
  padding-right: calc(var(--space-2) + 1em + var(--space-2));
}

.bds-select__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 1em;
  height: 1em;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--color-foreground);
}

.bds-select:focus-within .bds-select__chevron {
  rotate: 180deg;
}

/* Checkbox: a 16px square status mark (not a container, so no radius). Unchecked is
 * Plaster with a Traffic Cone stroke; checked is Traffic Cone with the forms plugin's
 * white check, which it paints from currentColor. */
.bds .bds-checkbox {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 var(--space-4);
  border: 1.5px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-primary);
  background-color: var(--color-surface);
}

/* This sheet loads after Tailwind, so the Surface fill above would also cover the
 * plugin's checked fill; a checked box then looked unchecked unless focused. */
.bds .bds-checkbox:checked,
.bds .bds-checkbox:checked:hover,
.bds .bds-checkbox:checked:focus {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

/* Multi-column on desktop, one column on mobile. No column narrower than the BDS
 * column minimum, or its content breaks. */
.bds-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-min-width)), 1fr));
}

/* Text fields pair up: the cap admits exactly two columns, so a four-field form reads
 * as two rows rather than three fields and an orphan. Inside the grid the column is
 * the width constraint, so fields fill it instead of stopping at the standalone cap. */
.bds-grid--fields {
  max-width: calc(2 * var(--column-min-width) + var(--space-6));
  gap: var(--space-6);
}

/* A fieldset's default min-width is min-content, which lets a field grid inside it
 * force two columns onto a phone. Let the fieldset shrink with its container. */
.bds fieldset {
  min-width: 0;
}

.bds-alert {
  display: flex;
  max-width: var(--max-width-text);
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-error);
  font-weight: var(--weight-semibold);
}

/* Tailwind's .hidden and .bds-alert share specificity, so the later rule
 * wins by load order. Pin the hidden state so the languages notice can be
 * toggled without depending on stylesheet order. */
.bds-alert.hidden {
  display: none;
}

.bds-alert--warning {
  color: var(--color-foreground);
}

.bds-alert--success {
  color: var(--color-success);
}

.bds-alert--info {
  color: var(--color-foreground);
}

/* The work-history editor is loaded into a Turbo frame, so its BDS scope
 * lives on the modal container rather than on the onboarding page behind it. */
.bds-modal {
  width: 100%;
  max-width: var(--max-width-app);
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-background);
  box-shadow: none;
}

.bds-modal .modal-header {
  min-height: var(--nav-height);
  border: 0;
}

.bds-modal .modal-header p {
  color: var(--color-foreground);
  font-size: var(--text-1\.5x);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.bds-modal .modal-header > span:last-child {
  display: inline-flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

.bds-modal .modal-header > span:last-child:hover {
  background: var(--color-surface-hover);
}

.bds-modal__content {
  padding: var(--space-6);
}

.bds-modal textarea.bds-field {
  min-height: 10rem;
  resize: vertical;
}

.bds-modal .bds-autocomplete-list {
  max-height: 12rem;
  overflow-y: auto;
  border: 0;
  border-radius: var(--radius-sharp);
  box-shadow: none;
}

.bds-modal .bds-checkbox + .bds-label {
  display: flex;
  min-height: var(--touch-target-min);
  align-items: center;
}

.bds-success-indicator {
  color: var(--color-success);
}

@media (max-width: 767px) {
  .bds-shell__lockup {
    display: none;
  }

  .bds-shell__mark {
    display: block;
  }

  .bds-heading {
    font-size: var(--text-2x-sm);
  }

  .bds-question {
    font-size: var(--text-1\.5x-sm);
  }

  .bds-card {
    padding: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bds *,
  .bds *::before,
  .bds *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.form-control:focus {
  box-shadow: none;
}

/* Google Places Autocomplete (.pac-*) styles live in application.tailwind.css */

.text-area:focus {
  border-color: black;
  --tw-ring-color: unset;
  --tw-ring-offset-shadow: unset;
  --tw-ring-shadow: unset;
}

input[type='radio'].additional-radio {
  color: #fe6f31;
  border-color: #fe6f31;
}

input[type='radio'].additional-radio:active {
  outline-color: #fe6f31;
}

input[type='radio'].additional-radio:focus {
  outline-color: #fe6f31;
}

.wider-button {
  padding-left: 2rem;
  padding-right: 2rem;
}

.opaque {
  opacity: 0.5;
}

/* General styles for larger screens */
.map-container {
  width: 100%;
  height: 440px;
  background-color: var(--color-surface-hover, #e0e0e0);
  margin-bottom: 16px;
  overflow: hidden;
}

.slider-container {
  width: 100%;
  margin-bottom: 8px;
}

/* Map container height for screens with height less than 720px */
@media (max-height: 720px) {
  .map-container {
    height: 240px;
  }
}

/* Styles for medium screens */
@media (max-width: 1024px) and (max-height: 768px) {
  .map-container {
    height: 250px;
  }
}

/* Styles for smaller screens */
@media (max-width: 910px) and (max-height: 1024px) {
  .map-container {
    height: 250px;
  }
}

/* Styles for very small screens */
@media (max-width: 640px) {
  .map-container {
    height: 240px;
  }

  .slider-container {
    margin-bottom: 12px;
  }
}

/* Mono is a typeface, not a color: an inline email or phone link stays link blue. */
.bds-link.bds-meta {
  color: var(--color-link);
}

.bds-link.bds-meta:hover {
  color: var(--color-link-hover);
}
.override-autofill input[type="text"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset; /* Autofill background color */
  box-shadow: 0 0 0 30px white inset; /* Autofill background color */
}

.override-autofill input[type="text"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px white inset; /* Autofill background color on focus */
  box-shadow: 0 0 0 30px white inset; /* Autofill background color on focus */
}
.slider-with-arrows {
  --value: 0%;
  --circleHeight: 26px;
}

.slider-with-arrows__slider {
  appearance: none;
  height: 100%;
  width: 100%;
  background: transparent;
  outline: none;
  border-radius: 6px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.slider-with-arrows__slider:hover {
  opacity: 1;
}

.slider-with-arrows__slider::-webkit-slider-thumb {
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: var(--circleHeight);
  height: var(--circleHeight);
  margin-top: calc((6px / 2) - (var(--circleHeight) / 2));
  background: #fe6f31;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.slider-with-arrows__slider::-moz-range-thumb {
  border-radius: 50%;
  width: var(--circleHeight);
  height: var(--circleHeight);
  margin-top: calc((6px / 2) - (var(--circleHeight) / 2));
  background: #fe6f31;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.slider-with-arrows__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(#fe6f31, #fe6f31) 0 / var(--value) 100% no-repeat,
    #d9d9d9;
}

.slider-with-arrows__slider::-moz-range-track {
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(#fe6f31, #fe6f31) 0 / var(--value) 100% no-repeat,
    #d9d9d9;
}

.slider-with-arrows__slider::-ms-track {
  height: 6px;
  border-radius: 6px;
  cursor: pointer;
}

.slider-with-arrows__slider::-ms-fill-lower,
.slider-with-arrows__slider::-ms-fill-upper {
  border-radius: 12px;
  background: linear-gradient(#fe6f31, #fe6f31) 0 / var(--value) 100% no-repeat,
    #d9d9d9;
}

input[data-mobile-slider-target="input"] {
  user-select: none;
  pointer-events: none;
  webkit-appearance: none;
  appearance: none;
  MozAppearance: none;
  msAppearance: none;
}

input[data-mobile-slider-target="input"]::-moz-range-thumb {
  pointer-events: auto;
}

input[data-mobile-slider-target="input"]::-webkit-slider-thumb {
  pointer-events: auto;
}

input[data-mobile-slider-target="input"]::-ms-thumb {
  pointer-events: auto;
}

input[data-mobile-slider-target="input"]::-ms-track {
  pointer-events: none;
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *








 */

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
}

input::placeholder {
  color: #a7a7a7 !important;
}