@font-face {
    font-family: 'droid_sansregular';
    src: url('../fonts/DroidSans-webfont.woff') format('woff'),
         url('../fonts/DroidSans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --sab: env(safe-area-inset-bottom);
    --w-border-radius-xxs: 4px;

    --iti-border-width: 0.5rem;

    --w-font-wg-primary: 400;
    --w-font-wg-md: 500;

    --w-font-p-sm: 18px;
    --w-font-cap-sm: 12px;
    --w-font-body-sm: 14px;
    --w-font-body: 16px;

    --w-radius-border_radius_xxs: 4px;
    --w-radius-border_radius_xs: 6px;

    --w-spacing-xxs: 2px;
    --w-spacing-xs: 4px;
    --w-spacing-sm: 6px;
    --w-spacing-md: 8px;
    --w-spacing-md_2: 10px;
    --w-spacing-lg: 12px;
    --w-spacing-xl: 14px;
    --w-spacing-xxl: 16px;
    --w-spacing-2xl: 20px;
    --w-spacing-4xl: 24px;
    --w-spacing-6xl: 32px;

    --w-text-s-body-sm: 14px;
    --w-text-s-body: 16px;
}

.navbar {
    background-color: #f3f3f3;
    border-bottom: solid 1px #ddd;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-workers {
    background-color: #1B1464;
    border-bottom: solid 1px #ddd;
    flex-wrap: wrap;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.navbar-workers-dashboard {
    background-color: #1B1464;
    flex-wrap: wrap;
    padding: var(--w-spacing-xxl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-shadow: none;
    height: 53.6px;
}

.nav-workers-back {
    flex: 0 0 auto;
    width: 33.333333%;
}

.workers-back-link {
    color: white !important;
}

.w-circle-close-icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-workers-dashboard .nav-workers-dashboard-menu {
    position: absolute;
    left: var(--w-spacing-xxl);
}

.navbar-workers-dashboard .nav-workers-profile {
    position: absolute;
    right: var(--w-spacing-xxl);
}

.navbar-workers-dashboard .nav-workers-logo {
    position: absolute;
    left: calc(50% - 64px);
}

.nav-workers-dashboard-menu {
    display: flex;
    width: 40px;
    height: 40px;
    padding: var(--w-spacing-md, 8px) var(--w-spacing-lg, 12px);
    justify-content: center;
    align-items: center;
    gap: var(--w-spacing-md, 8px);
}

.nav-workers-dashboard-menu-link {
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-workers-dashboard-menu-btn {
    width: 16.5px;
    height: 12.83px;
}

.nav-workers-dashboard-menu-btn:focus, .nav-workers-dashboard-menu-btn:active {
    color: white;
}

.nav-workers-dashboard-logo {
    display: flex;
    width: 128px;
    height: 21.586px;
    padding: 0 2.556px 0 0.095px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 128.00/21.59;
}

.nav-workers-logo {
    flex: 0 0 auto;
    width: 33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-workers-menu {
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    padding-left: 0.5rem;
    flex: 0 0 auto;
    width: 100%;
}

.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #E01017;
    color: #FFFFFF;
    font-family: Lexend;
    font-weight: 400;
    font-size: .5rem;
    line-height: 1rem;
    letter-spacing: 0;
    text-align: center;
    border-radius: 1000px;
    font-size: 0.75rem;
    height: 12px;
    width: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-workers-signout {
    color: #FFFFFF;
}

.nav-workers-title {
    color: #FFFFFF !important;
}

.navbar-nav .nav-item {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.navbar-nav .nav-item.nav-current,
.navbar-nav .nav-item:hover {
    background-color: #ddd;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler-icon-dark {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.alert {
    padding: .7rem;
}

.alert-dismissible .close {
    right: 0px;
}

.alert-danger {
    color:#a94442;
    background-color:#f2dede;
    border-color:#ebccd1
}

.loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.toast, .swal2-container {
    z-index: 9999 !important;
}

.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
}

main {
    margin-top: 0.25rem;
}

@media (min-width: 576px) {
    main {
        margin-top: 1rem;
    }
}

.datagrid .records {
    width: 100%
}

.datagrid .edit-link, .datagrid .delete-link {
    transition: all .2s ease-in-out;
    display: inline-block;
    margin: 0 .2em;
    font-size: 14px;
}

.datagrid .view-link:before {
    content: "\f15c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.datagrid .edit-link:before {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.datagrid .delete-link:before {
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: red;
}

.datagrid .delete-link:hover, .datagrid .edit-link:hover {
    text-decoration: none;
    transform: scale(1.5);
}

.mapboxgl-map {
    font-family: droid_sansregular !important;
}

.footer {
    background-color: #333333;
    color: white;
    font-size: 11pt;
}

.workers-footer {
    background-color: #E8E7EF;
    color: #494383;
    padding: var(--w-spacing-lg) var(--w-spacing-xxl);
    gap: var(--w-spacing-lg);
    display: flex;
    flex-direction: column;
}

.footer a, .footer a:visited {
    color: white;
}
.footer a:hover {
    color: gray;
    text-decoration: underline;
}
.datagrid .footer {
    background-color: white;
    color: black;
}
.datagrid .footer a {
    color: #344767;
}

.btn {
    text-transform: none;
}

.construction-badge {
    display: none;
}

.btn.btn-primary {
    background-color: #E06D50;
}

.btn.btn-primary:active {
    background-color: #b6482d !important;
}

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

.btn.btn-outline-primary:hover {
    color: #b6482d;
}

up-modal-box {
    border-radius: 1em;
}

input[data-type="weblink-input"] {
    background-image: url(/static/images/icon-weblink.svg);
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 0.5em;
    padding-left: 2.25rem
}

.workers-checkbox {
    padding: var(--w-spacing-lg) var(--w-spacing-xxl);
    border-radius: 4px;
}

.workers-checkbox .form-check {
    margin-bottom: 0;
}

.workers-checkbox .form-check .workers-checkbox-label {
    color: #5B616D;
    margin-bottom: 0;
}

.workers-checkbox:has(input:checked) {
    background-color: #E8E7EF;
}

.workers-checkbox .form-check:has(input:checked) .workers-checkbox-label {
    color: #1B1464;
}

.availability-hours .row .col-form-label {
    color: #5B616D;
}

#min_hours_available {
    background-color: #F4F4F6;
}

#max_hours_available {
    background-color: #F4F4F6;
}

.workers-form-input .form-control {
    background-color: #F4F4F6;
}

input.form-control:focus {
    border: 1px solid rgba(118, 114, 162, 1);
    box-shadow: 0 0 0 3px rgba(123, 92, 250, 0.24);
}

.yes-no-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 2.5em;
    width: 150px;
    height: 48px;
    flex: 100%;
}

.yes-no-input .form-check-input {
    width: 20px;
    height: 20px;
}

.yes-no-label {
    margin-bottom: 0;
    padding-top: 2px;
}

.yes-no-input:has(input:checked) {
    background-color: rgba(232, 231, 239, 1);
    border-radius: 4px;
}

.workers-form-text {
    color: #222732;
}

.workers-form-text-sm {
    color: #5B616D;
}

.workers-btn-group {
    padding: 0;
}

.workers-btn-group-item {
    color: #1B1464;
    background-color: #1B14641A;
    padding: 0.5em 0.8em;
}

.workers-btn {
    color: #FFFFFF;
    background-color: #1B1464;
}

.workers-btn:active {
    background-color: #494383 !important;
    color: #ffffff !important;
}

.workers-btn:hover {
    background-color: #494383 !important;
    color: #ffffff !important;
}

.workers-btn:focus-visible {
    background-color: #494383 !important;
    color: #ffffff !important;
}

.btn-check:checked+.workers-btn-group-item {
    color: #FFFFFF;
    background-color: #494383;
}

.workers-input-group {
    display: inline-block;
    position: relative;
}

.workers-input-group-item {
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 4%;
    white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    z-index: 1;
    background-color: #F4F4F6;
}

.workers-input-group-control {
    min-height: 40px;
    background-color: #F4F4F6 !important;
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    position: relative;
    z-index: 0;
    margin: 0 !important;
}

.workers-menu-container {
    border-radius: 0;
    position: fixed;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0 var(--w-spacing-xxl, 16px) !important;
    width: 100vw;
    height: 100vh;
    background-color: #494383;
}

up-drawer-box:has(.workers-menu-container) {
    padding: 0;
}

.workers-menu-container .workers-menu-header {
    height: 53.6px;
}

.workers-menu-header {
    padding: var(--w-spacing-xxl);
    width: 100%;
}

.close-workers-menu-btn:active, .close-workers-menu-btn:focus {
    color: white;
}

.workers-menu-content {
    display: flex;
    flex-direction: column;
    padding-top: 130px;
    padding-bottom: 80px;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.menu-logout-btn {
    min-width: 66px;
    min-height: 22px;
    display: flex;
    align-items: center;
}

.workers-menu-items {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
}

.workers-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--w-header-font-family);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.8px;
}

.workers-menu-item:hover, .workers-menu-item:focus {
    color: #FFFFFF;
}

.workers-menu-footer {
    display: flex;
    flex-direction: column;
}

.workers-menu-divider {
    display: flex;
    padding-top: var(--w-spacing-xxl, 16px);
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-top: 1px solid #D1D0E0;
}

.workers-menu-signout {
    display: flex;
    padding: var(--w-spacing-lg, 12px) var(--w-spacing-xxl, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--w-spacing-md, 8px);
}

.workers-text-muted {
    color: #5B616D;
}

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

.workers-text-white {
    color: #FFFFFF;
}

.workers-text-black {
    color: #000000;
}

.workers-text-gray {
    color: #D1D0E0;
}

.workers-text-input {
    color: #8C929C;
}

.workers-text-dark-gray {
    color: #E8E7EF;
}

.workers-text-title {
    color: #1B1464;
}

.workers-text-title h1 {
    color: #1B1464 !important;
}

.workers-text-subtitle {
    color: #0A0C11;
}

.workers-text-primary-med {
    color: #494383;
}

.workers-text-info {
    color: #025CA1;
}

.workers-text-profile-info {
    color: #6E7377;
}

.workers-text-info-high {
    color: #0373C9;
}

.workers-text-base-em {
    color: #C3C6CC;
}

.w-check {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: 1px solid #1B1464;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.w-check:checked {
    background-color: #1B1464;
    border-color: #1B1464;
}
.w-check:checked::after {
    content: '';
    width: 6px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: relative;
    top: -1px;
}
.w-check:hover {
    background-color: #f0f0f0;
}
.w-check:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(27, 20, 100, 0.3);
}

.divider {
    border-top: 1px solid #C3C6CC;
}

.spacing-p-xxl {
    padding: var(--w-spacing-xxl);
}

.spacing-pt-xxl {
    padding-top: var(--w-spacing-xxl);
}

.spacing-pb-xxl {
    padding-bottom: var(--w-spacing-xxl);
}

.spacing-pl-xxl {
    padding-left: var(--w-spacing-xxl);
}

.spacing-pr-xxl {
    padding-right: var(--w-spacing-xl);
}

.spacing-pt-xl {
    padding-top: var(--w-spacing-xl);
}

.spacing-pt-lg {
    padding-top: var(--w-spacing-lg);
}

.spacing-pb-xl {
    padding-bottom: var(--w-spacing-xl);
}

.spacing-mb-lg {
    margin-bottom: var(--w-spacing-lg);
}

.spacing-pb-md {
    padding-bottom: var(--w-spacing-md);
}

.spacing-pl-xl {
    padding-left: var(--w-spacing-xl);
}

.spacing-pr-xl {
    padding-right: var(--w-spacing-xl);
}

.spacing-pt-2xl {
    padding-top: var(--w-spacing-2xl);
}

.spacing-pb-2xl {
    padding-bottom: var(--w-spacing-2xl);
}

.spacing-pb-6xl {
    padding-bottom: var(--w-spacing-6xl);
}

.spacing-pb-4xl {
    padding-bottom: var(--w-spacing-4xl);
}
.spacing-pt-4xl {
    padding-top: var(--w-spacing-4xl);
}

.spacing-p-md {
    padding: var(--w-spacing-md);
}

.spacing-pb-md {
    padding-bottom: var(--w-spacing-md);
}

.spacing-pt-6xl {
    padding-top: var(--w-spacing-6xl);
}

.spacing-mb-md {
    margin-bottom: var(--w-spacing-md);
}

.spacing-mt-md {
    margin-top: var(--w-spacing-xxl);
}

.spacing-gap-md {
    gap: var(--w-spacing-md);
}

.spacing-gap-lg {
    gap: var(--w-spacing-lg);
}

.spacing-gap-xxl {
    gap: var(--w-spacing-xxl);
}

.spacing-gap-6xl {
    gap: var(--w-spacing-6xl);
}

.w-font-body-sm {
    font-size: var(--w-font-body-sm);
}

.w-font-p-sm {
    font-size: var(--w-font-p-sm);
}

.w-font-cap-sm {
    font-size: var(--w-font-cap-sm);
}

.w-font-body {
    font-size: var(--w-font-body);
}

.w-font-wg {
    font-weight: var(--w-font-wg-primary);
}

.w-font-wg-md {
    font-weight: var(--w-font-wg-md);
}

.workers-text-body-sm {
    font-size: var(--w-text-s-body-sm);
}

.workers-text-body {
    font-size: var(--w-text-s-body);
}

#next-button, .next-button {
    position: sticky;
    bottom: 10px;
    z-index: 1030;
    text-transform: uppercase;
    background-color: #1B1464;
    color: white;
    width: 100px;
    align-self: center;
    border-radius: 6px;
    margin-bottom: 1rem !important;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}

#next-button:hover, .next-button:hover {
    background-color: #494383 !important;
    color: white !important;
}

#next-button:active, .next-button:active {
    background-color: #494383 !important;
    color: white !important;
}

#next-button:focus-visible, .next-button:focus-visible {
    background-color: #494383 !important;
    color: white !important;
}

.workers-chip-text {
    color: #161050;
}

.ws-pre-line {
    white-space: pre-line;
}

@supports (-webkit-touch-callout: none) {

    .svg-wrapper {
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: transform;
    }

    .badge-mini-image {
      backface-visibility: hidden;
      transform: translate3d(0, 0, 0);
    }

    #signup-phone-input-container {
        margin-bottom: 1rem;
    }

    #next-button, .next-button {
        position: sticky;
        bottom: 10px;
        z-index: 1030;
        max-width: 85vw;
        margin-bottom: 1rem !important;
    }

    .job-qualities-container, .job-benefits-container, .transportation-commute-container {
        padding-bottom: 80px;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    @media screen and (max-height: 660px) {
        #badge-wrapper, .additional-info-wrapper {
            padding-bottom: 80px;
        }
    }

}

.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl {
    --bs-gutter-x: 1rem;
}

#wage-type-selects .btn{
    box-shadow: none;
}

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

@media (max-width: 600px) {
    .next-button, #next-button {
        width: 100% !important;
    }
}

.cb-uf-check {
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: 1px solid #1B1464;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
}
.cb-uf-check:checked {
    background-color: #1B1464;
    border-color: #1B1464;
}
.cb-uf-check:checked::after {
    content: '';
    width: 6px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: relative;
    top: -1px;
}
.cb-uf-check:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(27, 20, 100, 0.3);
}
.cb-uf-text {
    text-align: start;
}
.cb-uf-container {
    display: flex;
    align-items: flex-start;
    gap: var(--w-spacing-md);
}