:root {
    --index-ratio: 1;
    --header-height: 70px;
    --footer-height: 50px;
    --info-header-base: 90px;
    --info-header-base-offset: 0px;
    --eval-table-header-offset: 0px;
    --eval-table-padding: 25px;
    --scrollbar-width: 0px;
    --cell-width: calc(5vw - ((var(--eval-table-padding) * 2) / 20) - 1px);
}

html {
    font-size: 14px;
    scroll-behavior: smooth !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
        scroll-behavior: smooth !important;
    }
}

@font-face {
    font-family: 'SF-Pro';
    src: url('/fonts/SF-Pro.ttf') format('truetype');
}

@font-face {
    font-family: 'CocoGothic';
    src: url('/fonts/CocoGothic_trial.ttf') format('truetype');
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth !important;
}

body {
    height: 100vh;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: none;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Universal */

.blue-font {
    color: #0052CC !important;
}

.new-font {
    font-family: 'Lucida Bright';
    font-size: 16pt;
}

.blue-btn {
    --bs-btn-bg: #3256fc !important;
}

.hide-section {
    display: none !important;
}

.show-section {
    display: block;
}

.info-text {
    font-size: 14pt;
}

.title-font {
    font-family: 'SF-Pro', sans-serif;
}

/* Landing Page */

@media (orientation: landscape) {
    @media (min-width: 1024px) and (min-height: 768px) {
        :root {
            --index-ratio: 1;
        }
    }

    @media (min-width: 1600px) and (min-height: 1200px) {
        :root {
            --index-ratio: 1.1;
        }
    }

    @media (min-width: 1920px) and (min-height: 1080px) {
        :root {
            --index-ratio: 1.2;
        }
    }

    @media (min-width: 2560px) and (min-height: 1440px) {
        :root {
            --index-ratio: 1.3;
        }
    }

    @media (min-width: 3440px) and (min-height: 1440px) {
        :root {
            --index-ratio: 1.4;
        }
    }
}

@media (orientation: portrait) {
    @media (min-width: 768px) and (min-height: 1024px) {
        :root {
            --index-ratio: 1;
        }
    }

    @media (min-width: 1080px) and (min-height: 1920px) {
        :root {
            --index-ratio: 1.3;
        }
    }

    @media (min-width: 1200px) and (min-height: 1600px) {
        :root {
            --index-ratio: 1.2;
        }
    }

    @media (min-width: 1440px) and (min-height: 2560px) {
        :root {
            --index-ratio: 1.3;
        }
    }

    @media (min-width: 1440px) and (min-height: 3440px) {
        :root {
            --index-ratio: 1.4;
        }
    }
}

.landing-bg {
    background-image: linear-gradient(to top, #47BCFF, #3256FC);
}

.white-font {
    color: white;
}

.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.background-layer-img {
    position: absolute;
    aspect-ratio: 1 / 1 !important;
    width: min(50vw, 50vh * 1502/1035);
    height: min(50vw * 1035/1502,50vh);
    opacity: 0.42;
}

.corner-tl {
    top: 0;
    left: 0;
}

.corner-tr {
    top: 0;
    right: 0;
}

.corner-bl {
    bottom: 0;
    left: 0;
}

.corner-br {
    bottom: 0;
    right: 0;
}

.center-content {
    border-radius: 16px;
    padding: 2.5rem 3rem;
    text-align: center;
    width: 100%;
}

.login-logo {
    height: calc(45px * var(--index-ratio));
    width: calc(290px * var(--index-ratio));
}

.title-text-1 {
    font-size: calc(32pt * var(--index-ratio));
}

.title-text-2 {
    font-size: calc(24pt * var(--index-ratio));
}

.login-btn {
    height: calc(42px * var(--index-ratio));
    width: calc(180px * var(--index-ratio));
    font-size: calc(12pt * var(--index-ratio));
    border-radius: calc(25px * var(--index-ratio));
    margin-left: calc(5px * var(--index-ratio));
    margin-right: calc(5px * var(--index-ratio));
    border: solid white calc(1px * var(--index-ratio));
}

/* Login Page */

.grey-font {
    color: #929497 !important;
}

.login-line-break {
    margin: 10px;
}

.login-header {
    font-size: calc(36px * var(--index-ratio));
}

.login-container {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-fields-container {
    width: 100%;
    height: 100%;
}

.login-field {
    font-size: calc(12pt * var(--index-ratio));
    border-radius: calc(25px * var(--index-ratio));
    padding-bottom: 5px;
    height: calc(40px * var(--index-ratio));
    width: calc(250px * var(--index-ratio)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.field-validation-error {
    width: calc(200px * var(--index-ratio)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.login-input-label {
    font-size: calc(18px * var(--index-ratio));
}

.login-input-font {
    font-size: calc(18px * var(--index-ratio));
}

.login-hide-elements {
    display: block;
}

/* Navbar */

.header-container {
    display: flex;
    align-items: center;
    height: calc(var(--header-height) * var(--index-ratio));
    padding-left: 25px;
}

.navbar-brand {
    margin-left: 25px !important;
}

.header-logo {
    height: calc(44px * var(--index-ratio));
    width: calc(287px * var(--index-ratio));
}

.footer-container {
    height: calc(var(--footer-height) * var(--index-ratio));
    padding-left: calc(30px);
    padding-right: calc(30px);
    bottom: unset !important;
}

.main-container {
    margin: 0 auto;
    width: 100%;
}

.blue-footer-btn {
    background-color: #3256fc !important;
    color: white !important;
}

.navbar-font {
    font-size: calc(16px * var(--index-ratio));
}

.navbar-brand {
    padding-top: unset !important;
    padding-bottom: unset !important;
    margin-right: unset !important;
}

.navbar {
    display: flex;
    justify-content: space-between;
    width: 100vw;
}

.navbar-nav {
    padding-right: 25px;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(24px * var(--index-ratio));
}

.footer-text {
    font-size: calc(11pt * var(--index-ratio));
    padding-left: calc(25px);
    padding-right: calc(25px);
}

/* Scenario Page */

.scenario-main {
    overflow-y: scroll;
}

.scenario-container {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
}

.scenario-sub-container {
    display: flex;
    flex-direction: row;
}

.scenario-left-container {
    flex: 1;
    min-width: 0;
    padding-left: 25px;
    padding-top: 10px;
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0.1) 100%);
}

.scenario-right-container {
    align-self: flex-start;
    max-height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
}

.scenario-header {
    font-size: calc(32px * var(--index-ratio));
}

.scenario-header-container {
    padding-top: calc(35px);
    padding-left: calc(25px);
}

.scenario-link-text {
    font-size: calc(20px * var(--index-ratio));
    margin-bottom: 20px;
}

.scenario-medline-logo {
    height: calc(100px * var(--index-ratio));
    width: calc(100px * var(--index-ratio));
}

.scenario-main-image {
    max-width: min(50vw);
    max-height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
    flex-shrink: 0;
    aspect-ratio: 20 / 15;
}

.scenario-sub-text {
    font-size: calc(12pt * var(--index-ratio));
}

/* Evaluations Page */
.eval-main {

}

.eval-container {
    padding: var(--eval-table-padding);
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
    position: relative;
}

.eval-table-header {
    position: sticky;
    width: 100%;
    height: var(--eval-table-header);
    top: 0;
    padding-right: var(--eval-table-header-offset);
}

.eval-table-body {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px - var(--eval-table-header-offset) - (var(--eval-table-padding) * 7));
    overflow-y: scroll;
    width: 100%;
}

.eval-table-header,
.eval-table-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.eval-header-cell {
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid grey 1px;
}

.eval-header-cell,
.eval-table-cell {
    text-align: center;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eval-table-loading,
.eval-table-error,
.eval-table-row {
    font-size: 14px;
}

.eval-table-error {
    color: red;
}

.eval-table-loading,
.eval-table-error {
    display: grid;
}

.eval-header-font {
    font-size: calc(18px * var(--index-ratio));
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eval-header-btn {
    margin-left: auto;
    padding: 0px !important;
    height: calc(32px * var(--index-ratio)) !important;
    width: calc(32px * var(--index-ratio)) !important;
}

.eval-btn-container {
    display: flex;
    align-items: center;
}

.eval-pager-container {
    height: var(--eval-table-header);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}

.eval-pager-btn {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
    height: calc(32px * var(--index-ratio));
    width: calc(32px * var(--index-ratio));
}

.eval-export-container {
    height: var(--eval-table-header);
    display: flex;
    justify-content: right;
    align-items: center;
}

.eval-export-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eval-header-stacked {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.eval-stacked-content {
    display: flex;
    align-items: center;
    text-align: center;
}

.eval-subheader-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.usage-table-header {
    position: sticky;
    width: 100%;
    height: var(--eval-table-header);
    top: 0;
    padding-right: var(--eval-table-header-offset);
    display: grid;
    grid-template-columns: var(--cell-width) var(--cell-width) var(--cell-width) var(--cell-width) var(--cell-width) calc(var(--cell-width) * 7) calc(var(--cell-width) * 3) calc(var(--cell-width) * 4) var(--cell-width);
}

.usage-table-body {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px - (var(--eval-table-header-offset) * 5) - (var(--eval-table-padding) * 7));
    overflow-y: scroll;
    width: 100%;
}

.usage-table-row {
    display: grid;
    grid-template-columns: repeat(20, var(--cell-width));
}

.usage-header-cell {
    background-color: #f5f5f5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: solid grey 1px;
}

    .usage-header-cell.model,
    .usage-header-cell.token {
        border-bottom: unset !important;
    }

.usage-header-cell,
.usage-table-cell {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usage-table-cell {
    border-bottom: 1px solid grey;
}

.usage-header-font {
    font-size: calc(12px * var(--index-ratio));
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usage-realtime-header {
    display: grid;
}

.usage-realtime-subheader-1 {
    display: grid;
    grid-template-columns: var(--cell-width) calc(var(--cell-width) * 3) calc(var(--cell-width) * 3);
}

.usage-realtime-subheader-2 {
    display: grid;
    grid-template-columns: repeat(7, var(--cell-width));
}

.usage-trans-header {
    display: grid;
}

.usage-trans-subheader {
    display: grid;
    grid-template-columns: repeat(3, var(--cell-width));
}

.usage-feedback-header {
    display: grid;
}

.usage-feedback-subheader {
    display: grid;
    grid-template-columns: repeat(4, var(--cell-width));
}

.user-filter {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.usage-table-font {
    font-size: calc(10px * var(--index-ratio));
}

.filter-btn {
    padding: 0.4rem 0.8rem;
    background: #fff;
    border: 0;
    border-right: 1px solid #ccc;
    cursor: pointer;
}

    .filter-btn:last-child {
        border-right: 0;
    }

    .filter-btn.active {
        background: #007acc;
        color: white;
    }

    .filter-btn:hover:not(.active) {
        background: #f1f1f1;
    }

.usage-api-table-header {
    height: var(--eval-table-header);
}

.usage-api-table-header,
.usage-api-table-body,
.usage-api-table-row {
    width: 100%;
}

.usage-api-table-header,
.usage-api-table-row {
    display: grid;
    grid-template-columns: repeat(7, calc((50vw / 7) - 1rem));
}

.usage-modal-title,
.usage-api-totals {
    display: flex;
    align-items: center;
}

.usage-modal-title {
    
}

.usage-modal-size {
    height: 50vh !important;
    min-height: 265px !important;
    width: 50vw !important;
}

.usage-modal-center {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2);
}

/* Module Page */
.body-container {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
    margin-left: 30px;
    margin-right: 30px;
}

.module-btn-base {
    height: calc(var(--header-height) * var(--index-ratio));
}

.module-btn-container {
    padding-top: calc((var(--header-height) / 4) * var(--index-ratio));
    padding-bottom: calc((var(--header-height) / 4) * var(--index-ratio));
}

.module-btn {
    height: calc((var(--header-height) / 2) * var(--index-ratio));
    font-size: calc(14px * var(--index-ratio));
    border-radius: calc(35px * var(--index-ratio));
    margin-left: calc(5px * var(--index-ratio));
    padding-left: calc(20px * var(--index-ratio));
    padding-right: calc(20px * var(--index-ratio));
    display: flex;
    align-items: center;
}

    .module-btn.mute {
        border-radius: calc(10px * var(--index-ratio)) !important;
    }

.info-header-base {
    min-height: calc(var(--info-header-base) * var(--index-ratio));
}

.info-header-container {
    display: flex;
    align-items: center;
    padding-left: calc(25px);
    padding-right: calc(25px);
}

.info-header-logo {
    height: calc(50px * var(--index-ratio));
    width: calc(50px * var(--index-ratio));
}

.info-header {
    font-size: calc(32px * var(--index-ratio));
    margin-bottom: unset !important;
    margin-top: unset !important;
    text-align: center;
}

.info-header-title {
    margin-left: calc(10px);
    margin-right: calc(10px);
}

.info-btn-container {
    display: flex;
    align-items: center;
    margin-left: calc(10px);
    margin-right: calc(10px);
}

.info-btn {
    font-size: calc(16px * var(--index-ratio));
}

.notes-div {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - (var(--header-height) * var(--index-ratio)) - (var(--info-header-base-offset)) - 1px);
    overflow-y: auto;
    padding-top: calc(25px);
    padding-left: calc(25px);
    padding-right: calc(25px);
    padding-bottom: calc(25px);
}

.notes-header {
}

.notes-sub-header {
}

.notes-text {
    padding-top: calc(10px);
}

.chat-div {
    height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - (var(--header-height) * var(--index-ratio)) - 1px);
    overflow-y: auto;
}

.modal-settings {
    min-width: 600px !important;
    max-width: 600px !important;
}

.w-33 {
    width: 33% !important;
}

.h-mobile {
    height: 48px !important;
}

.modal-no-border {
    border: none !important;
}

.organization-img {
    width: 200px;
    height: 200px;
}

.accordion-border-new {
    border: none !important;
    box-shadow: none !important;
}

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    visibility: hidden;
    pointer-events: none;
}

    .custom-modal.is-active {
        visibility: visible !important;
        pointer-events: auto;
    }

.module-content-list {
    padding-left: 25px;
}

.section-subheading {
    margin-top: 20px;
}

.eval-sub-text {
    margin-bottom: 12px;
}
/* Mobile */
@media (pointer: coarse) and (hover: none) and (max-width: 1000px) and (max-height: 1000px) {
    :root {
        --index-ratio: 1;
        --mobile-btn: 48px;
        --mobile-navbar-tabs: 48px;
    }

    @media (Orientation: landscape) {
        /* Landing Page */

        .login-btn {
            height: 40px;
            width: 160px;
            font-size: 12pt;
            border-radius: 25px;
            margin-left: 5px;
            margin-right: 5px;
            border: solid white 1px;
        }

        .login-logo {
            height: 45px;
            width: 290px;
        }

        .title-text-1 {
            font-size: 48px;
        }

        .title-text-2 {
            font-size: 32px;
        }
        /* Login Page */

        .grey-font {
            color: #929497 !important;
        }

        .login-line-break {
            margin: 1px !important;
        }

        .login-header {
            font-size: calc(24px * var(--index-ratio));
            margin-bottom: unset !important;
        }

        .login-container {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .login-fields-container {
            width: 100% !important;
            height: 100% !important;
        }

        .login-field {
            font-size: calc(12pt * var(--index-ratio));
            border-radius: calc(25px * var(--index-ratio));
            padding-bottom: 5px;
            height: calc(40px * var(--index-ratio));
        }

        .login-input {
            margin: auto !important;
            width: 80% !important;
            padding-bottom: 5px !important;
        }

        .login-input-label {
            font-size: calc(16px * var(--index-ratio)) !important;
        }

        .login-input-font {
            font-size: calc(16px * var(--index-ratio)) !important;
        }

        .login-hide-elements {
            display: none !important;
        }
        /* Navbar */

        .header-container {
            display: flex;
            align-items: center;
            height: calc(var(--header-height) * var(--index-ratio));
            padding-left: 10px;
        }

        .header-logo {
            height: calc(44px * var(--index-ratio));
            width: calc(287px * var(--index-ratio));
        }

        .footer-container {
            height: calc(var(--footer-height) * var(--index-ratio));
            bottom: unset !important;
        }

        .main-container {
            margin: 0 auto;
            width: 100%;
        }

        .blue-footer-btn {
            background-color: #3256fc !important;
            color: white !important;
        }

        .navbar-font {
            font-size: calc(12px * var(--index-ratio) * 1.5) !important;
        }

        .navbar-brand {
            padding-top: unset !important;
            padding-bottom: unset !important;
            margin-right: unset !important;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            width: 100vw;
        }

        .navbar-nav {
            padding-right: 10px !important;
        }

        .nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(24px * var(--index-ratio));
        }

        .nav-user {
            display: none !important;
        }

        .footer-text {
            font-size: calc(11pt * var(--index-ratio));
        }
        /* Scenario Page */

        .scenario-main {
            overflow-y: scroll;
        }

        .scenario-container {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
        }

        .scenario-sub-container {
            display: unset !important;
            flex-direction: unset !important;
        }

        .scenario-left-container {
            flex: unset !important;
            min-width: unset !important;
            padding-left: 25px !important;
            padding-top: 10px !important;
        }

        .scenario-right-container {
            align-self: unset !important;
            max-height: unset !important;
        }

        .scenario-header {
            font-size: calc(32px * var(--index-ratio));
        }

        .scenario-link-text {
            font-size: calc(20px * var(--index-ratio));
            margin-bottom: 25px;
        }

        .scenario-main-image {
            display: none !important;
            width: unset !important;
            max-height: unset !important;
            flex-shrink: unset !important;
            aspect-ratio: unset !important;
        }
        /* Module Page */

        .body-container {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
            margin-left: unset !important;
            margin-right: unset !important;
        }

        .module-btn-base {
            height: calc(var(--header-height) * var(--index-ratio));
        }

        .module-btn-container {
            display: flex;
            padding-top: 10px !important;
            padding-left: 10px !important;
            align-items: center !important;
            justify-content: start !important;
            gap: 5px !important;
        }

        .module-btn {
            height: unset !important;
            font-size: unset !important;
            border-radius: unset !important;
            margin-left: unset !important;
            padding-left: unset !important;
            padding-right: unset !important;
            display: none !important;
            align-items: unset !important;
        }

        .mobile-btn {
            width: var(--mobile-btn) !important;
            height: var(--mobile-btn) !important;
        }

        .info-header-base {
            min-height: calc(var(--info-header-base) * var(--index-ratio));
            width: 100vw !important;
        }

        .info-header-container {
            display: flex;
            align-items: center;
            margin-left: unset !important;
            padding: calc(10px) !important;
        }

        .info-header-logo {
            height: calc(50px * var(--index-ratio));
            width: calc(50px * var(--index-ratio));
        }

        .info-header-title {
            width: calc(100vw - var(--mobile-btn));
            overflow-wrap: anywhere;
        }

        .info-header {
            font-size: calc(32px * var(--index-ratio));
            margin-bottom: unset !important;
            margin-top: unset !important;
            text-align: center;
        }

        .info-btn-container {
            display: flex;
            align-items: center;
            margin-left: calc(10px);
            margin-right: calc(10px);
        }

        .info-btn {
            font-size: calc(16px * var(--index-ratio));
        }

        .mobile-info-btn {
            display: flex;
            justify-content: end !important;
        }

        .mobile-nav-tabs {
            height: var(--mobile-navbar-tabs);
        }

        .notes-div {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--header-height) * var(--index-ratio)) - (var(--info-header-base-offset)) - (var(--mobile-navbar-tabs)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
            overflow-y: auto;
            padding: calc(10px);
        }

        .chat-div {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--header-height) * var(--index-ratio)) - (var(--mobile-navbar-tabs)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
            overflow-y: auto;
        }

        .modal-settings {
            min-width: 600px !important;
            max-width: 600px !important;
        }

        .w-33 {
            width: 33% !important;
        }

        .h-mobile {
            height: 48px !important;
        }

        .modal-no-border {
            border: none !important;
        }

        .organization-img {
            width: 200px;
            height: 200px;
        }

        .accordion-border-new {
            border: none !important;
            box-shadow: none !important;
        }

        .info-text {
            font-size: 12pt;
        }

        .custom-modal {
            position: fixed;
            top: calc(25% / 2);
            left: calc(25% / 2);
            width: 75%;
            height: 75%;
            display: grid;
            place-items: center;
            visibility: hidden;
            pointer-events: none;
        }

            .custom-modal.is-active {
                visibility: visible;
            }
    }

    @media (Orientation: portrait) {
        /* Landing Page */

        .login-btn {
            height: 40px;
            width: 160px;
            font-size: 12pt;
            border-radius: 25px;
            margin-left: 5px;
            margin-right: 5px;
            border: solid white 1px;
        }

        .login-logo {
            height: 45px;
            width: 290px;
        }

        .title-text-1 {
            font-size: 48px;
        }

        .title-text-2 {
            font-size: 32px;
        }
        /* Login Page */

        .grey-font {
            color: #929497 !important;
        }

        .login-line-break {
            margin: 5px !important;
        }

        .login-header {
            font-size: calc(32px * var(--index-ratio));
            margin-bottom: 5px !important;
        }

        .login-container {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .login-fields-container {
            width: 100% !important;
            height: 100% !important;
        }

        .login-field {
            font-size: calc(12pt * var(--index-ratio));
            border-radius: calc(25px * var(--index-ratio));
            padding-bottom: 5px;
            height: calc(40px * var(--index-ratio));
        }

        .login-input {
            margin: auto !important;
            width: 80% !important;
            padding-bottom: 5px !important;
        }

        .login-input-label {
            font-size: calc(16px * var(--index-ratio)) !important;
        }

        .login-input-font {
            font-size: calc(16px * var(--index-ratio)) !important;
        }

        .login-hide-elements {
            display: block !important;
        }
        /* Navbar */

        .navbar-brand {
            margin-left: 0px !important;
        }

        .header-container {
            display: flex;
            align-items: center;
            height: calc(var(--header-height) * var(--index-ratio));
            padding-left: 10px;
        }

        .header-logo {
            height: calc(44px * var(--index-ratio));
            width: calc(287px * var(--index-ratio));
        }

        .footer-container {
            height: calc(var(--footer-height) * var(--index-ratio));
            bottom: unset !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .footer-text {
            font-size: calc(11pt * var(--index-ratio));
            padding-left: unset !important;
            padding-right: unset !important;
        }

        .main-container {
            margin: 0 auto;
            width: 100%;
        }

        .blue-footer-btn {
            background-color: #3256fc !important;
            color: white !important;
        }

        .navbar-font {
            font-size: calc(12px * var(--index-ratio) * 1.5) !important;
        }

        .navbar-brand {
            padding-top: unset !important;
            padding-bottom: unset !important;
            margin-right: unset !important;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            width: 100vw;
        }

        .navbar-nav {
            padding-right: 10px !important;
        }

        .nav-link {
            display: flex;
            align-items: center;
            justify-content: center;
            height: calc(24px * var(--index-ratio));
        }

        .nav-user {
            display: none !important;
        }
        /* Scenario Page */

        .scenario-main {
            overflow-y: scroll;
        }

        .scenario-container {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
        }

        .scenario-sub-container {
            display: flex !important;
            flex-direction: row !important;
        }

        .scenario-left-container {
            flex: unset !important;
            min-width: unset !important;
            padding-left: 25px !important;
            padding-top: 10px !important;
        }

        .scenario-right-container {
            align-self: unset !important;
            max-height: unset !important;
        }

        .scenario-header {
            font-size: calc(32px * var(--index-ratio));
        }

        .scenario-link-text {
            font-size: calc(20px * var(--index-ratio));
            margin-bottom: 25px;
        }

        .scenario-main-image {
            display: none !important;
            width: unset !important;
            max-height: unset !important;
            flex-shrink: unset !important;
            aspect-ratio: unset !important;
        }
        /* Module Page */

        .body-container {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--footer-height) * var(--index-ratio)) - 1px);
            margin-left: unset !important;
            margin-right: unset !important;
        }

        .module-btn-base {
            height: calc(var(--header-height) * var(--index-ratio));
        }

        .module-btn-container {
            display: flex;
            padding-top: 10px !important;
            padding-left: 10px !important;
            align-items: center !important;
            justify-content: start !important;
            gap: 5px !important;
        }

        .module-btn {
            height: unset !important;
            font-size: unset !important;
            border-radius: unset !important;
            margin-left: unset !important;
            padding-left: unset !important;
            padding-right: unset !important;
            display: none !important;
            align-items: unset !important;
        }

        .mobile-btn {
            width: var(--mobile-btn) !important;
            height: var(--mobile-btn) !important;
        }

        .info-header-base {
            min-height: calc(var(--info-header-base) * var(--index-ratio));
            width: 100vw !important;
        }

        .info-header-container {
            display: flex;
            align-items: center;
            margin-left: unset !important;
            padding: calc(10px) !important;
        }

        .info-header-logo {
            height: calc(50px * var(--index-ratio));
            width: calc(50px * var(--index-ratio));
        }

        .info-header-title {
            width: calc(100vw - var(--mobile-btn));
            overflow-wrap: anywhere;
        }

        .info-header {
            font-size: calc(32px * var(--index-ratio));
            margin-bottom: unset !important;
            margin-top: unset !important;
            text-align: center;
        }

        .info-btn-container {
            display: flex;
            align-items: center;
            margin-left: calc(10px);
            margin-right: calc(10px);
        }

        .info-btn {
            font-size: calc(16px * var(--index-ratio));
        }

        .mobile-info-btn {
            display: flex;
            justify-content: end !important;
        }

        .mobile-nav-tabs {
            height: var(--mobile-navbar-tabs);
        }

        .notes-div {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--header-height) * var(--index-ratio)) - (var(--info-header-base-offset)) - (var(--mobile-navbar-tabs)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
            overflow-y: auto;
            padding: calc(10px);
        }

        .chat-div {
            height: calc(100vh - (var(--header-height) * var(--index-ratio)) - (var(--header-height) * var(--index-ratio)) - (var(--mobile-navbar-tabs)) - (var(--footer-height) * var(--index-ratio)) - 1px) !important;
            overflow-y: auto;
        }

        .modal-settings {
            min-width: 600px !important;
            max-width: 600px !important;
        }

        .w-33 {
            width: 33% !important;
        }

        .h-mobile {
            height: 48px !important;
        }

        .modal-no-border {
            border: none !important;
        }

        .organization-img {
            width: 200px;
            height: 200px;
        }

        .accordion-border-new {
            border: none !important;
            box-shadow: none !important;
        }

        .info-text {
            font-size: 12pt;
        }

        .custom-modal {
            position: fixed;
            top: calc(25% / 2);
            left: calc(25% / 2);
            width: 75%;
            height: 75%;
            display: grid;
            place-items: center;
            visibility: hidden;
            pointer-events: none;
        }

            .custom-modal.is-active {
                visibility: visible;
            }
    }
}