@media print {
    * {
        background-color: white;
        color: black;
    }

    .bgdarker,
    .bgdark {
        background-color: white;
        color: black;
    }

    #main-nav,
    #view-buttons,
    #action-buttons,
    #planning-buttons,
    td:has(#submit-application-button),
    #content:has(+ #modal) {
        display: none;
    }

    table {
        break-inside: avoid-page;
    }

    div:has(+ table) {
        break-after: avoid-page;
    }
}

@media screen {
    .bgdarker {
        background-color: #1E1F21;
    }
    
    .bgdark {
        background-color: #2E2E30;
    }
    
    .bgdark,
    .bgdarker {
        color: white;
    }
    
    .bg-soft-red {
        background-color: #f95555;
        color: black;
    }
    
    .bg-soft-white {
        background-color: #ddd;
        color: black;
    }
}

.shadow-inset-right {
    box-shadow: inset -15px 0 10px -5px rgba(0,0,0,0.3);
}

.c-light {
    color: #ddd;
}

.white {
    color: white;
}

.red {
    color: red;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

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

.nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.noresize {
    resize: none;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.top0 {
    top: 0;
}

.top14 {
    top: 3.5rem;
}

.top18 {
    top: 4.5rem;
}

.right4 {
    right: 1rem;
}

.gap1 {
    gap: 0.25rem;
}

.gap2 {
    gap: 0.5rem;
}

.gap4 {
    gap: 1rem;
}

.p0 {
    padding: 0;
}

.p05 {
    padding: 0.125rem;
}

.p1 {
    padding: 0.25rem;
}

.p2 {
    padding: 0.5rem;
}

.p3 {
    padding: 0.75rem
}

.p4 {
    padding: 1rem
}

.p10 {
    padding: 2.5rem
}

.ph1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
}

.ph2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.ph4 {
    padding-right: 1rem;
    padding-left: 1rem;
}

.pv05 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.pv1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.pv2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.pv5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.pt8 {
    padding-top: 2rem;
}

.pt18 {
    padding-top: 4.5rem;
}

.pl2 {
    padding-left: 0.5rem;
}

.pl4 {
    padding-left: 1rem;
}

.pl5 {
    padding-left: 1.25rem;
}

.pl7 {
    padding-left: 1.75rem;
}

.pl10 {
    padding-left: 2.5rem;
}

.m-auto {
    margin: auto;
}

.m0 {
    margin: 0;
}

.m1 {
    margin: 0.25rem;
}

.m2 {
    margin: 0.5rem;
}

.ml5 {
    margin-left: 1.25rem;
}

.mt4 {
    margin-top: 1rem;
}

.mt10 {
    margin-top: 2.5rem;
}

.mv1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.ml1 {
    margin-left: 0.25rem;
}

.mh4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.h4 {
    height: 1rem
}

.h4_5 {
    height: 1.125rem
}

.h6 {
    height: 1.5rem;
}

.h7 {
    height: 1.75rem;
}

.h8 {
    height: 2rem;
}

.h9 {
    height: 2.25rem;
}

.h12 {
    height: 3rem;
}

.h50 {
    height: 12.5rem;
}

.h100 {
    height: 25rem;
}

.w4 {
    width: 1rem;
}

.w4_5 {
    width: 1.125rem
}

.w6 {
    width: 1.5rem;
}

.w8 {
    width: 2rem;
}

.w10 {
    width: 2.5rem;
}

.w11 {
    width: 2.75rem;
}

.w16 {
    width: 4rem;
}

.w20 {
    width: 5rem;
}

.w25 {
    width: 6.25rem;
}

.w30 {
    width: 7.5rem;
}

.w32 {
    width: 8rem;
}

.w40 {
    width: 10rem;
}

.w50 {
    width: 12.5rem;
}

.w60 {
    width: 15rem;
}

.w100 {
    width: 25rem;
}

.w120 {
    width: 30rem;
}

.w140 {
    width: 35rem;
}

.w154 {
    width: 39rem;
}

.w180 {
    width: 45rem;
}

.w220 {
    width: 55rem;
}

.min-w200 {
    min-width: min(95vw, 50rem)
}

.max-w60 {
    max-width: 15rem;
}

.w-max-content {
    width: max-content;
}

.w-inherit {
    width: inherit;
}

.b-light {
    border: 1px solid #444;
}

.b-lighter {
    border: 1px solid #ddd;
}

.b-soft-red {
    border: 1px solid #f95555;
}

.b-none {
    border: none;
}

.active-b-none:focus-visible,
.active-b-none:active {
    border: none;
}

.br1 {
    border-radius: 0.25rem;
}

.br2 {
    border-radius: 0.5rem;
}

.br4 {
    border-radius: 1rem;
}

.br6 {
    border-radius: 2.5rem;
}

.br10 {
    border-radius: 2.5rem;
}

.brt3 {
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.brt5 {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.brt8 {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.brt10 {
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
}

.brt12 {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
}

.bw2 {
    border-width: 2px;
}

.sans {
    font-family: sans-serif;
}

.bold {
    font-weight: bold;
}

.text10 {
    font-size: 1rem;
}

.text12 {
    font-size: 1.125rem;
}

.text16 {
    font-size: 1.375rem;
}

.text20 {
    font-size: 1.625rem;
}

.text-a-end {
    text-align: end;
}

.center {
    align-self: center;
    justify-self: center;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.as-center {
    align-self: center;
}

.as-end {
    align-self: end;
}

.ac-center {
    align-content: center;
}

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

.js-center {
    justify-self: center;
}

.align-last {
    margin-left: auto;
}

.clickable {
    transition: all 0.25s;
}

.clickable:hover {
    background-color: #444;
    cursor: pointer;
}

.clickable-subtle {
    transition: all 0.25s;
    border: 2px solid #ffffff00;
}

.clickable-subtle:hover {
    cursor: pointer;
    border: 2px solid #ffffffaa;
}

.text-subtle {
    color: #757575
}

.application-table {
    border-collapse: collapse
}

.table-cell {
    align-content: center;
    box-sizing: border-box;
    border: 1px solid #444;
}

.scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
}

.selected {
    background-color: #ddd;
    color: black;
    font-weight: bold;
}

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

#modal,
#modal-underlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

#modal-underlay {
    background-color: #00000077;
    z-index: 1;
}

#modal-content {
    box-sizing: border-box;
    width: 50rem;
    max-height: calc(100vh - 2rem);
    background-color: #2E2E30;
    z-index: 2;
    margin: 1rem;
    border-radius: 2rem;
    overflow-y: scroll;
    scrollbar-width: none;
}

#bullshit-container {
    display: flex;
    justify-content: center;
    overflow-x: scroll;
    scrollbar-width: none;
}

#split-display {
    height: fit-content;
    z-index: 2;
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    margin-top: 5rem;
}


.checkbox-display {
    transition: all 0.5s;
}

.checkbox-display:has(input:checked) {
    background-color: #ddd;
    color: black;
    font-weight: bold;

    &::before {
        content: "✓ "
    }
}

.checkbox-display::before {
    content: "✗ "
}

input[type="date"]::-webkit-calendar-picker-indicator {
      mask-image:  url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2225%22%20height=%2225%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22WindowText%22%20d=%22M20%203h-1V1h-2v2H7V1H5v2H4c-1.1%200-2%20.9-2%202v16c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V5c0-1.1-.9-2-2-2zm0%2018H4V8h16v13z%22/%3E%3Cpath%20fill=%22none%22%20d=%22M0%200h24v24H0z%22/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-image: none;
      background-color: currentColor;
      mask-type: match-source;
    }

.hidden,
.hidden:focus,
.hidden:focus-within,
.hidden:focus-visible {
    width: 1px;
    height: 1px;
    border: none;
    padding: 0;
    margin: 0;
    background-color: inherit
}

.service-display:has(#service_b-roll:checked),
.stage-display:has(#stage_graphics:checked),
.importance-display:has(#importance_launch:checked) {
    background-color: #b6d7a8;
}

.service-display:has(#service_preview:checked),
.stage-display:has(#stage_shoot:checked),
.importance-display:has(#importance_exclusive-price:checked) {
    background-color: #ed8bbc;
}

.service-display:has(#service_spinny:checked),
.importance-display:has(#importance_private-label:checked) {
    background-color: #f95555;
}

.service-display:has(#service_2d:checked) {
    background-color: #46b779;
}

.service-display:has(#service_bar:checked) {
    background-color: #d29ef7;
}

.service-display:has(#service_ai:checked) {
    background-color: #f6b26b;
}

.service-display:has(#service_animation:checked) {
    background-color: #ffd966;
}

.service-display:has(#service_plashka:checked) {
    background-color: #b4c6e7;
}

.service-display:has(#service_plasma:checked) {
    background-color: #8ea9db;
}

.service-display:has(#service_montage:checked),
.stage-display:has(#stage_montage:checked) {
    background-color: #d29ef7;
}