:root {
    --main-color: #cc071e;
    --secondary-color: #b7061a;
    --background-color: #efefef;
    --primary-card-color: white;
    --button-green: #46A371;
    --primary: #0A5980;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Spinner */
.spinner-bg {
    position: absolute;
    background-color: #ffffff44;
    width: 100%;
    height: 100%;
}

.spinner {
    border: 12px solid silver;
    border-top: 12px solid #337AB7;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1000ms linear infinite;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    position: relative;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.localization-header:hover {
    opacity: 0.65;
    cursor: copy;
}

.dropdown-menu {
    max-height: 380px;
    overflow-y: auto;
}

.dropdown-scroll-area {
    max-height: 75vh;
    overflow-y: auto;
}

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

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

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

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

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

.h-5 {
    height: 5% !important;
}

.h-10 {
    height: 10% !important;
}

.ml-05 {
    margin-left: 2px !important;
}

.bg-background {
    background-color: var(--background-color);
}

.bg-red {
    background-color: var(--main-color);
}

.bg-dark-red {
    background-color: var(--secondary-color);
}

.center-button-text {
    margin: auto;
}

.side-summary {
    background-color: rgba(0,0,0,0.03);
    padding: 3px;
    border-radius: 3px;
}

.shadow-right {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
}

.hide-overflow {
    overflow: hidden;
    width: 95% !important;
}

.info-container {
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
}

.remove-summary-arrow {
    list-style: none;
}


.mytooltip {
    position: relative;
    opacity: unset !important;
}

.tooltiparea {
    visibility: hidden;
    width: 240px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    display: block !important;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -120px;
}

.mytooltip:hover .tooltiparea {
    visibility: visible;
    opacity: 1;
}

.blazored-toast {
    overflow: auto;
    height: 25vh;
    white-space: break-spaces;
}

.blazored-toast-container {
    z-index: 9999 !important;
}

.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Top Status Bar */
.top-training-container-info-div {
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
}

/* Content Container */
.training-container-content-div {
    flex: 1; /* Take up remaining space */
    display: flex;
    width: 100%;
    height: calc(100vh - 200px);
    margin-top: 20px;
    /*background-color: pink;*/
}

/* VNC Viewer Div */
.vnc-container-outer-div {
    flex: 1; /* Take up the remaining horizontal space */
    /*background-color: blue;*/
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: start; /* Center horizontally */
    min-width: 512px;
    min-height: 300px;
    overflow: hidden;
    margin-right: 20px;
}

/* Inner Wrapper for Height Restriction */
.vnc-container-inner-div {
    height: 100%; /* Take full height */
    max-height: 100%; /* Do not exceed parent height */
    aspect-ratio: 1024 / 600; /* Maintain aspect ratio */
    max-width: 100%;
    min-width: 512px;
    min-height: 300px;
    /*background-color: yellow;*/
    display: flex;
    align-items: start;
    justify-content: center;
}

/* Actual VNC Viewer Container */
.vnc-client-host-div {
    background-color: #ff000077;
    color: white;
    aspect-ratio: 1024 / 600; /* Maintain aspect ratio */
    width: 100%; /* Scale horizontally */
    max-width: 100%;
    min-width: 512px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading spinner inside VNC client div */
.vnc-client-loading-spinner {
    position: absolute;
    width: 50%;
    max-width: 350px;
}

/* Files Container */
.file-browser-div {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 33%; /* Default width */
    height: 100%;
    min-height: 300px;
    min-width: 300px;
    transition: width 0.3s ease; /* Smooth transition for collapse */
}

/* Collapsed Files Div */
.file-browser-collapsed {
    width: 40px; /* Only show the toggle button */
    overflow: hidden; /* Hide content */
    min-height: 300px;
}

/* Version in footer */
.version {
    position: fixed;
    bottom: 5px;
    right: 10px;
    color: #9E9E9E;
}