/* ROOT */
:root,
[data-bs-theme="light"] {
    --site-logo:url(/hub/static/custom/images/NSF-OOI-RGB.png);
    --bs-body-bg:#fff;
    --bs-tertiary-bg-rgb:231,241,248;
    --video-overlay:rgba(34,123,183,0.4);
    --login-container-bg:#fff;
    --spawn-card-border:0,81,136;
    --spawn-card-bg-hover:#e7f1f8;
    --spawn-card-bg-active:#227ab7;
    --spawn-card-text-active:#fff;
    --spawn-card-specs-bg:rgba(34,123,183,0.2);
    --spawn-card-specs-text:#000
}
[data-bs-theme="dark"] {
    --site-logo:url(/hub/static/custom/images/NSF-OOI-RGB-dark.png);
    --bs-body-bg:#102535;
    --bs-tertiary-bg-rgb:5,61,106;
    --video-overlay:rgba(7,55,85,0.4);
    --login-container-bg:#052236;
    --spawn-card-border:168,183,191;
    --spawn-card-bg-hover:#0b2d44;
    --spawn-card-bg-active:#227ab7;
    --spawn-card-text: #ddd;
    --spawn-card-specs-bg:rgba(0,80,136,0.4);
    --spawn-card-specs-text:#ddd
}

/* Login > Video */

.background,
.overlay {
    width:100vw;
    height:100vh;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}
.overlay {
    background:var(--video-overlay);
    z-index:0;
}
video {
    min-width:100%;
    min-height:100%;
}

/* Login Container */ 
.login-container {
    background:var(--login-container-bg);
}
.ooi-use {
    text-align:left;
    font-size:90%;
    opacity:0.8;
    font-style:italic;
    border-top:1px solid var(--spawn-card-specs-bg)
}

/* OOI Buttons */

.btn-ooi {
    border-radius:0;
    font-size:120%;
    padding:0.5em 3em;
    align-self: end;
    --bs-btn-color: #fff;
    --bs-btn-bg: #227ab7;
    --bs-btn-border-color: #227ab7;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f96de;
    --bs-btn-hover-border-color: rgb(47,151,222);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #002b49;
    --bs-btn-active-border-color: #2f96de;
    --bs-btn-active-shadow: inset 0 3px 5px #2f96de
    --bs-btn-disabled-color: #666;
    --bs-btn-disabled-bg: rgba(34,123,183,0.52);
    --bs-btn-disabled-border-color: rgba(34,123,183,0.52);      
}

/* OOI Button Focus */
.btn-ooi:focus {
    outline:4px solid #d73f09;
}

/* Main Navigation */
#site-logo {
    line-height:0;
}
#site-logo .site-logo {
    display:inline-block;
    width:275px;
    height:72px;
    background:var(--site-logo) center center /contain no-repeat;
}
.navbar-nav .nav-link:hover, 
.navbar-nav .nav-link:focus {
    background-color:
}

/* SPAWN CARDS*/
#kubespawner-profiles-list {
    display:flex;
    flex-wrap:wrap;
}
#kubespawner-profiles-list .profile {
    display:flex;
    flex-direction:column;
    text-align:center;
    padding:1em;
    margin:-1px -1px 0 0 ;
    border:1px solid rgb(var(--spawn-card-border));
    cursor: pointer;
    width:100%;
    @media (min-width:500px) {
        width:50%;
    }
    @media (min-width:768px) {
        width:33.33333%;
    }
    @media (min-width:992px) {
        width:25%;
    }
}
#kubespawner-profiles-list .profile .radio {
    opacity:0;
    padding:0;
    line-height:0;
}
#kubespawner-profiles-list .profile:hover {
    background:var(--spawn-card-bg-hover);
}
#kubespawner-profiles-list .profile:has(input:focus-visible) {
    outline:4px solid #d73f09;
}
#kubespawner-profiles-list .profile:has(input[type="radio"]:checked) {
    background:var(--spawn-card-bg-active);
    color:var(--spawn-card-text-active);
}
#kubespawner-profiles-list .profile h2 {
    font-size:1.8rem;
}
#kubespawner-profiles-list .profile .profile-description {
    margin-bottom:1.5rem;
}
#kubespawner-profiles-list .profile .profile-hw-specs {
    margin:auto auto 0 auto;
    padding:1.5rem 0.25rem 0.25rem 0.25rem;
    border-top:1px solid rgba(var(--spawn-card-border),0.4);
    display:flex;
    justify-content:center;
}
#kubespawner-profiles-list .profile .profile-hw-specs p {
    margin:0;
    padding:0 0.5em;
    color:var(--spawn-card-specs-text);
}
#kubespawner-profiles-list .profile .profile-hw-specs p[class$="label"] {
    font-size:0.75rem;
    font-weight:bold;
    letter-spacing:0.05rem;
}
#kubespawner-profiles-list .profile .profile-hw-specs p[class$="max"] {
    font-family:courier new, courier,monotype;
}