.very-small-font {
    font-size: xx-small;
}

.smaller-font {
    font-size: .85em;
}

.small-font {
    font-size: small;
}

.specific-small-font {
    font-size: 11px;
}

.larger-font {
    font-size: 1.1em;
}

.much-larger-font {
    font-size: 1.5em;
}

.darker-white-background {
    background-color: #f3f3f3;
    border-radius: 25px 25px 5px 5px;
}

.light-gray-background {
    background-color: #F5F5F5;
    border-radius: 25px 25px 5px 5px;
}

.medium-gray-background {
    background-color: #D3D3D3;
    border-radius: 25px 25px 5px 5px;
}

.dark-gray-background {
    background-color: whitesmoke;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
}

.dark-gray-page-background {
    background-color: #DCDCDC;
}

.truncate-text {
    max-width: 250px; /* Adjust the width as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Change the color of the checkbox itself */
.collapse_expand_checkbox:checked {
    background-color: black;
    border-color: black;
    color: black;
}

/* Change the color of the checkmark inside the checkbox */
.collapse_expand_checkbox:checked::before {
    background-color: black; /* Change interior color here */
    border-color: black;
    color: black;
}

/* Change the color of the checkmark itself */
.collapse_expand_checkbox:checked::after {
    color: black; /* Change checkmark color here */
}

a {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Inherits color from parent */
}

a:hover {
    text-decoration: none; /* Removes underline */
}

.underlineAnchor a {
    text-decoration: underline;
    color: black;
}

.underlineAnchor a:hover {
    text-decoration: none;
    color: white;
}

#login-policy a {
    text-decoration: none;
    color: black;
}

#login-policy a:hover {
    text-decoration: underline;
    color: white;
}

.form-check-input:checked {
    background-color: #000000;
    border-color: #6b6f73;
}

.form-check-input:focus {
    border-color: #6b6f73;
    box-shadow: 0 0 0 0.25rem rgba(107, 111, 115, 0.25);
}

/* CSS to slow the collapse and expand functionality on the page  */
.collapsible {
    transition: max-height 0.5s ease, opacity 0.5s ease;
    max-height: 1000px; /* A large value to ensure the div is fully visible */
    opacity: 1;
}

.collapsible.collapsed {
    max-height: 0px;
    opacity: 0;
    overflow: hidden;
}

.instructions-outer-border {
    overflow: hidden;
    border: 2px solid black;
    padding: 1px;
}
.instructions-middle-border {
    border: 2px solid white;
    padding: 1px;
}
.instructions-inner-border {
    border: 5px solid black;
    padding: 10px;
}

li .indented-bullet {
    padding-left: 15px;
}

/* ~ ~ ~ */

.tk-no-wrap {
    white-space: nowrap!important;
}

/* ~ ~ ~ */

@media print {
    /* Force landscape orientation and minimal margins */
    /* Landscape only for pages with this class */
    .print-landscape {
        @page {
            size: A4 landscape;
            margin: 0.5cm;
        }
    }

    body {
        font-size: 12pt;
        color: #000;
        width: 100%;
        margin: 0;
        padding: 10px;
    }

    nav, .no-print, .chatgpt-controls {
        display: none !important;
    }

    /* Force page break before elements with this class */
    .page-break-before {
        page-break-before: always;
        break-before: page; /* Modern syntax */
    }

    /* Force page break after elements with this class */
    .page-break-after {
        page-break-after: always;
        break-after: page; /* Modern syntax */
    }

    /* Prevent page breaks inside elements with this class */
    .keep-together {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .keep-together > div {
        page-break-inside: avoid !important; /* Prevent individual columns from breaking */
    }

    textarea {
        border: none;
        resize: none;
    }

    /* Expand scrollable sections */
    .scrollable-div {
        overflow: visible;
        height: auto;
    }

    /* Force Bootstrap containers to full width */
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }

    /* Handle wide tables */
    table {
        width: 100% !important;
        font-size: 10pt;
    }

    /* Prevent awkward breaks */
    table, figure, img {
        page-break-inside: avoid;
    }

    /* Scale down if needed - adjust 0.95 as needed (0.8-1.0) */
    .main-content, #content, main {
        transform: scale(0.95);
        transform-origin: top left;
        width: 105.26%; /* Compensates for 0.95 scale: 100/0.95 */
    }

    /* Ensure Highcharts render properly */
    .highcharts-container {
        width: 100% !important;
        height: auto !important;
    }

    .highcharts-container svg {
        width: 100% !important;
        height: auto !important;
    }
}