@media (min-width:1051px) {

    .popup_iframe {
        z-index: 9999;
        width: 60vw;
        height: 70vh;
        border: 0px;
        position: absolute;
        top: 4vh;
        max-height: 81vh;
        width: 80vw;
        min-height: 80vh;
        display: none;
        overflow-x: hidden;
    }

    .iframe_close {
        z-index: 99999;
        position: absolute;
        top: 4vh;
        font-size: 2.5em;
        right: 3vw;
        display: none;
        color: #f36e21;
    }

    .iframe_background {
        z-index: 9998;
        min-width: 94vw;
        position: absolute;
        min-height: 99vh;
        background-color: rgba(0, 0, 0, 0.89);
    }

    .index_page_container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: flex-start;
        min-height: 100vh;

    }

    .header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        column-gap: 1em;
        border-bottom: 5.5px solid #17479e;
        min-width: 100vw;
        min-height: 10vh;
        background-color: black;
        align-items: center;
        justify-content: flex-start;
    }

    .index_body_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: center;
        justify-content: center;
        min-width: 100vw;
        min-height: 88.9vh;
    }

    .index_body {
        display: flex;
        /* min-width: 100vw; */
        width: 100%;
        border: 0;
        min-height: 89vh;
    }

    .logo_container {
        display: flex;
        left: 0px;
        top: 0px;
        background-color: black;
        width: fit-content;
        padding-left: 2em;
        padding-right: 1em;
        height: 10vh;
        border-radius: 20%;
        align-content: center;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    button {
        background-color: #f36f21;
        color: white;
        width: 100px;
        height: 50px;
        border-radius: 0.3em;
        border: 0px;
        /* margin-left: 0.5em; */
        /* margin-right: 0.5em; */
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #17479e;
    }

    .app_body_container {
        display: flex;
        flex-direction: row;
        min-width: 100vw;
        min-height: 100vh;
        flex-wrap: nowrap;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .app_quick_bar {
        display: flex;
        min-width: 5vw;
        border-left: 3px solid #f36f21;
        max-width: 7vw;
        background-color: black;
        min-height: 100vh;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }

    .app {
        display: flex;
        padding: 0.3em;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        min-width: 94vw;
        overflow: auto;
        min-height: 98vh;
        max-height: 98vh;
    }

    .quick_bar_buttons {
        width: 90%;
        height: auto;
        margin-top: 1em;
        font-size: 0.75em;
        background-color: #17479e;
        padding: 0.5em;
        color: white;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
    }

    .quick_bar_buttons:hover {
        background-color: #f36f21;
    }

    input {
        font-size: 1.25em;
        background-color: white;
        border: 0px;
        border-radius: 0.1em;
    }

    select {
        font-size: 1.25em;
        background-color: white;
        border: 0px;
        margin-bottom: 0.5em;
        border-radius: 0.3em;
    }

    label {
        color: white;
        font-size: 1.5em;
        text-align: center;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 98%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .login-box {
        text-align: center;
        background: #fff;
        padding: 2rem;
        border-radius: 10px;
        width: 90%;
        max-width: 350px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        animation: fadeIn 0.4s ease;
    }

    .login-box h2 {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .login-box input {
        width: 100%;
        padding: 10px;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1rem;
    }

    .login-box button {
        width: 100%;
        padding: 10px;
        background: #f36f21;
        border: none;
        color: #fff;
        font-size: 1rem;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .login-box button:hover {
        background: #17479e;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        font-size: 1em;
        border-radius: 1em;
        font-family: Arial, sans-serif;
    }

    th,
    td {
        padding: 10px;
        background-color: #fff;
        border-bottom: 2px solid #ccc;
    }

    th {
        text-align: left;
        background-color: #f36e21;
        color: white;

    }

    tr:nth-child(even) {
        background-color: white;
    }

    tr:hover {
        border: 2.1px solid #17469e;

    }

    th,
    td {
        transition: background-color 0.3s ease-in-out;
    }
}