.container-fluid {
        width: 150vh !important;
    }

    #loads {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute
    }

    .loader {
        width: 50px;
        --b: 8px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: #514b82;
        -webkit-mask: repeating-conic-gradient(#0000 0deg, #000 1deg 70deg, #0000 71deg 90deg), radial-gradient(farthest-side, #0000 calc(100% - var(--b) - 1px), #000 calc(100% - var(--b)));
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
        animation: l5 1s infinite;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        z-index: 9999
    }

    @keyframes l5 {
        to {
            transform: rotate(.5turn)
        }
    }

    #alert {
        height: 6vh;
        bottom: 3vh;
        margin: auto;
        position: absolute;
        width: 90vw;
        left: 0;
        right: 0
    }

    @media print {
        @page {
            margin: 0;
        }

        body {
            margin: 1.6cm;
        }
    }

    html {
        font-family: DFKai-sb;
    }

    table {
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        margin: auto;
        position: absolute
    }

    table,
    td,
    th {
        border: 1px solid #595959;
        border-collapse: collapse;
        font-size: 0.95rem
    }

    td,
    th {
        padding: 2px;
        width: 30px;
        height: 2vh;
        text-align: center
    }

    th {
        background: #f0e6cc;
    }

    .ttl {
        font-weight: bolder
    }

    .lg1 {
        font-size: 1.5rem
    }

    .lg2 {
        font-size: 1.2rem
    }

    .tbipt {
        border: none;
        width: 95%;
        height: 92%;
        font-size: 1rem
    }

    .checkbox {
        left: 0;
        right: 0;
        margin: auto;
        width: 15px;
        height: 15px;
        border: 1px solid darkgrey;
    }

    /* This is what simulates a checkmark icon */

    .checkbox.checked:after {
        content: '';
        display: block;
        width: 4px;
        height: 7px;
        /* "Center" the checkmark */
        position: relative;
        top: 3px;
        left: 5px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    body {
        font-family: Arial, Helvetica, sans-serif;
    }

    /* The Modal (background) */

    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 150px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.6);
        /* Black w/ opacity */
    }

    /* Modal Content */

    .modal-content {
        background-color: rgba(255, 250, 250, 0.95);
        margin: auto;
        border: 1px solid #888;
        max-width: 35vw;
        border-radius: 2rem;
    }

    /* The Close Button */

    .close {
        color: #aaaaaa;
        float: right;
        font-weight: bold;
        font-size: 48px;
        width: 15%;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    input[type=radio] {
        --s: 1em;
        /* control the size */
        --c: #009688;
        /* the active color */
        height: var(--s);
        aspect-ratio: 1;
        border: calc(var(--s)/8) solid #939393;
        padding: calc(var(--s)/8);
        background: radial-gradient(farthest-side, var(--c) 94%, #0000) 50%/0 0 no-repeat content-box;
        border-radius: 50%;
        outline-offset: calc(var(--s)/10);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        font-size: inherit;
        transition: .3s;
    }

    input[type=radio]:checked {
        border-color: var(--c);
        background-size: 100% 100%;
    }

    input[type=radio]:disabled {
        background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
        opacity: .5;
        cursor: not-allowed;
    }

    #dtselect {
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        display: none;
    }

    .dtcontent {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        height: 60px;
        width: 250px;
        background-color: white;
        border-radius: 1.5rem;

    }
.pretty-inpt{
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position:absolute;
    width: 80%;
    height: 100%;
    padding: 5%;
    background-color: transparent;
    border:none;
    font-weight: bolder
}


    @media print {
        input[type=radio] {
            -webkit-appearance: auto;
            -moz-appearance: auto;
            appearance: auto;
            background: none;
        }
    }

    label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 5px 0;
        cursor: pointer;
    }

    body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-content: center;
        font-family: system-ui, sans-serif;
        font-size: 40px;
    }