@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&family=Bebas+Neue&display=swap');

:root, body, html {
    font-family: "Atkinson Hyperlegible Mono", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
}

.custom-header {
    font-family: "Bebas Neue", sans-serif;
    font-size: 3rem;
    text-decoration: none;
    color: rgb(33, 37, 41) !important;
}
.custom-header:hover {
    color: rgb(33, 37, 41) !important;
}

legend {
    font-weight: bold;
}

legend.required:after,
label.required:after {
    content: "*";
    color: red;
}
.casting-row {
    padding: 50px;
    background-color: #fff;
    transition: background-color 0.25s ease-out;
    display: block;
}
.casting-row:hover {
    background-color: #f6f6f6;
}

.casting-row a {
    text-decoration: none !important;
    color: black !important;
}

.hover-underline-animation {
    display: inline-block;
    position: relative;
}

.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #000;
    transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
    transform: scaleX(1);
}

.hover-underline-animation.left::after {
    transform-origin: bottom right;
}

.hover-underline-animation.left:hover::after {
    transform-origin: bottom left;
}

.help-text {
    font-size: 0.8rem !important;
    color: #666 !important;
}

.color-black {
    color: #000 !important;
}

.hover-row .row:hover {
    background-color: #f6f6f6 !important;
}

.modal-full .modal-dialog {
    max-width: 100%;
    height: 95%;
}

.modal-full .modal-content {
    height: 95%;
}

.modal-full .modal-dialog {
    width: 100vw !important;
    height: 98vh !important;
}

.modal-full .modal-content {
    height: 93vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.modal-full .modal-body {
    flex-grow: 1 !important;
    overflow-y: auto !important;
}

.custom-choice input[type="checkbox"] {
    display: none;
}

.custom-choice input[type="checkbox"] + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

.custom-choice input[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #495057;
    border-radius: 3px;
    background-color: #fff;
}

.custom-choice input[type="checkbox"]:checked + label::before {
    background-color: #495057;
    border-color: #495057;
}

.custom-choice input[type="checkbox"]:checked + label::after {
    content: '\2713';
    position: absolute;
    left: 6px;
    top: -2px;
    color: white;
    font-size: 16px;
}

.custom-radio .form-check,
.custom-choice .form-check {
    margin-bottom: 5px;
    padding-left: 0;
}

.custom-radio input[type="radio"] {
    display: none;
}

.custom-radio input[type="radio"] + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

.custom-radio input[type="radio"] + label::after {
    content: '';
}

.custom-radio input[type="radio"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    background-color: #fff;
}

.custom-radio input[type="radio"]:checked + label::before {
    background-color: #495057;
    border-color: #495057;
}

.custom-radio input[type="radio"]:checked + label::after {
    content: '\25CF';
    position: absolute;
    left: 7px;
    top: 3px;
    color: white;
    font-size: 10px;
}

.img-thumb {
    max-width: 100px;
    max-height: 100px;
}

.btn-status, .btn-status:hover, .btn-status:focus {
    color: white;
}

.btn-status-null {
    background-color: #E0E0E0;
}

.btn-status-liked {
    background-color: #81C784;
}

.btn-status-removed {
    background-color: #EF9A9A;
}