@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Teko&display=swap');
@import url("https://use.typekit.net/wrl7bvp.css");


:root {
    /*Color Variables*/
    /*primaries*/
    --color-primary-100: #f4f3d4;
    --color-primary-200: #e9e6aa;
    --color-primary-300: #ddda7f;
    --color-primary-400: #d2cd54;
    --color-primary-500: #beb932;
    --color-primary-600: #b1ad2f;
    --color-primary-700: #a5a02b;
    --color-primary-800: #989428;
    --color-primary-900: #7f7b21;
    --color-primary: var(--color-primary-500);
    /*secondaries*/

    --color-secondary-100: #c0c0f2;
    --color-secondary-500: #171782;
    --color-secondary: #4676ff;
    /*neutrals*/
    --color-neutral-100: #fcfaff;
    --color-neutral-200: #f6f3fa;
    --color-neutral-300: #ece9f0;
    --color-neutral-400: #d3ced9;
    --color-neutral-500: #b7b2bf;
    --color-neutral-600: #928d99;
    --color-neutral-700: #6c6673;
    --color-neutral-800: #47434d;
    --color-neutral-850: #343138;
    --color-neutral-900: #232026;
    --color-neutral-950: #1C1A1F;
    /*status colors*/
    --color-status-success: #17ef77;
    --color-status-success_lt: #86f7b98;
    --color-status-success_dk: #37a668;
    --color-status-success_dk-1: #0ace61;
    --color-status-success_bg: #17ef7755;
    --color-status-success_bg-1: #17ef7788;
    --color-status-warn: #ffd800;
    --color-status-warn_bg: #ffd80055;
    --color-status-warn_bg-1: #ffd80088;
    --color-status-error: #f53a23;
    --color-status-error_bg: #f53a2333;
    --color-status-error_bg-1: #f53a2366;
    --color-status-disconnected: #0091ff;
    --color-status-disconnected_bg: #0091ff44;
    --color-status-disconnected_bg-1: #0091ff77;
    --color-status-info: #0091ff;
    /*alert colors*/
    /*gray*/
    --color-alert-gray: var(--color-neutral-300);
    --color-alert-gray-hover: var(--color-neutral-200);
    --color-alert-gray-selected: var(--color-neutral-400);
    /*green*/
    --color-alert-green: #17ef77;
    --color-alert-green-hover: #57f39c;
    --color-alert-green-selected: #0ec55f;
    /*yellow*/
    --color-alert-yellow: #ffd800;
    --color-alert-yellow-hover: #ffe244;
    --color-alert-yellow-selected: #db0;
    /*yellow-orange*/
    --color-alert-yelloworange: #FFB300;
    --color-alert-yelloworange-hover: #FFC233;
    --color-alert-yelloworange-selected: #DD9B00;
    /*orange*/
    --color-alert-orange: #FF7700;
    --color-alert-orange-hover: #FF8922;
    --color-alert-orange-selected: #DD6700;
    /*red*/
    --color-alert-red: #f53a23;
    --color-alert-red-hover: #f65744;
    --color-alert-red-selected: #eb230b;
    /* Connection Colors*/
    --color-connection-fiber: #cc00cc;
    --color-connection-fiber--selected: #ff55ff;
    --color-connection-ghost: rgba(255,255,255, 0.5);
    /*light theme (default colors)*/
    /* content */
    --content_background-color: var(--color-neutral-100);
    --content_foreground-color: var(--color-neutral-900);
    /*scrollbar*/
    --scrollbar-thumb-color: rgba(35,32,38, .4);
    --scrollbar-thumb-color-hover: rgba(35,32,38, .7);
    --sidebar-thumb-color: rgba(71, 67, 77, .4);
    --sidebar-thumb-color-hover: rgba(71, 67, 77, .7);
    /* panel */
    --panel_background-color: var(--color-neutral-700);
    --panel_foreground-color: var(--color-neutral-100);
    --panel_border-light: var(--color-neutral-400);
    --panel_border-dark: var(--color-neutral-900);
    --panel_button-border-color: var(--color-neutral-300);
    /* popup */
    --popup_background-color: var(--color-neutral-600);
    --popup_foreground-color: var(--color-neutral-100);
    /* button */
    --button_background-color: var(--color-primary);
    --button_foreground-color: var(--color-neutral-900);
    --button_border-color: var(--color-primary);
    --button_hover-background-color: var(--color-primary-700);
    --button_hover-foreground-color: var(--color-neutral-100);
    --button_active-background-color: var(--color-primary-700);
    --button_active-foreground-color: var(--color-neutral-100);
    --button_disabled-background-color: var(--color-neutral-900);
    --button_disabled-background-color: var(--color-neutral-600);
    /* tab */
    --tab_header_active-background-color: var(--color-primary);
    --tab_header_active-foreground-color: var(--color-neutral-900);
    --tab_header_inactive-background-color: var(--color-neutral-100);
    --tab_header_inactive-foreground-color: var(--color-neutral-900);
    --tab_header_border-color: var(--color-neutral-200);
    --tab_header_hover-background-color: var(--color-primary-400);
    /* link */
    --highlight: var(--color-primary-500);
    --link: var(--color-neutral-900);
    --admin-nav-link: var(--color-neutral-100);
    --link-dark: var(--color-neutral-900);
    /*page layout sizes*/
    --page_height: 1000px;
    --top-row_height: 60px;
    --side-bar_width: 172px;
    --side-bar_height: 1000px;
    --tab-header-rotate-90-height: 2rem;
    --tab-header-rotate-90-dock-right_width: 940px; /* (page_height - top-row_height) */
    --tab-header-rotate-90-dock-right_right_position: -890px; /* -(tab-header-rotate-90-dock-right_width - top-row_height) */
    --tab-header-rotate-90-dock-right_top_position: 10px;
    /*diagram layout*/
    --canvas_top: 0px;
    --canvas_left: 32px;
    --canvas_width: 1400px;
    --canvas_height: 900px;
    /*topbar*/
    --topbar_logo-color: var(--color-primary);
    --topbar_logo-hover-color: var(--color-neutral-900);
    --topbar_background-color: var(--color-neutral-300);
    --topbar_background-color-2: var(--color-neutral-400);
    --topbar_text-color: var(--color-neutral-800);
    --topbar_text-hover-color: var(--color-neutral-900);
    --topbar_theme-select-gradient-color1: rgba(0, 0, 0, 0.2);
    --topbar_theme-select-gradient-color2: rgba(0, 0, 0, 0.1);
    --topbar_border-color: var(--color-neutral-400);
    --topbar_dropdown-border-color: var(--color-neutral-600);
    --main-layout_bg-gradient: linear-gradient(to bottom, rgba(108, 102, 115, .7),rgba(108, 102, 115, .7));
    --main-layout_bg-gradient-alt: linear-gradient(to bottom,rgba(49,96,147, .9), rgba(85,47,94, .9));
    /*curved sidebar*/
    --curved-sidebar_color1: var(--color-neutral-300);
    --curved-sidebar_color2: var(--color-neutral-400);
    --curved-sidebar_topbar-color: var(--color-neutral-200);
    --plogo-status_base-color1: var(--color-neutral-700);
    --plogo-status_base-color2: var(--color-neutral-600);
    /*sidebar*/
    --sidebar_width: 15.5rem;
    --sidebar-nav_width: 16.66667dvh;
    --sidebar-overlay_width: 15.5rem;
    --sidebar_background-color: linear-gradient(to bottom,rgba(255,255,255, .92), rgba(255,255,255, .92));
}

.dark-mode {
    /*dark theme (selectable colors) applied to Page tag in MainLayout.razor*/
    /* content */
    --content_background-color: var(--color-neutral-900);
    --content_foreground-color: var(--color-neutral-400);
    /*scrollbar*/
    --scrollbar-thumb-color: rgba(255,255,255,.4);
    --scrollbar-thumb-color-hover: rgba(255,255,255,.8);
    --sidebar-thumb-color: rgba(255,255,255,.4);
    --sidebar-thumb-color-hover: rgba(255,255,255,.8);

    /* panel */
    --panel_background-color: #292419;
    --panel_foreground-color: #fbf5da;
    --panel_border-light: #5a5858;
    --panel_button-border-color: #e4eded;
    /* button */
    --button_background-color: var(--color-primary);
    --button_foreground-color: var(--color-neutral-900);
    --button_border-color: var(--color-primary);
    --button_hover-background-color: var(--color-primary-700);
    --button_hover-foreground-color: var(--color-neutral-100);
    --button_active-background-color: var(--color-primary-700);
    --button_active-foreground-color: var(--color-neutral-100);
    --button_disabled-background-color: #334b64;
    --button_disabled-background-color: gray;
    /* tab */
    --tab_header_active-background-color: var(--color-primary);
    --tab_header_active-foreground-color: var(--color-neutral-900);
    --tab_header_inactive-background-color: var(--color-neutral-300);
    --tab_header_inactive-foreground-color: var(--color-neutral-700);
    /* link */
    --highlight: var(--color-primary-500);
    --link: var(--color-neutral-100);
    /*topbar*/
    --topbar_logo-color: var(--color-primary);
    --topbar_logo-hover-color: var(--color-neutral-950);
    --topbar_background-color: var(--color-neutral-950);
    --topbar_text-color: var(--color-neutral-500);
    --topbar_text-hover-color: var(--color-neutral-900);
    --topbar_theme-select-gradient-color1: rgba(255, 255, 255, 0.25);
    --topbar_theme-select-gradient-color2: rgba(255, 255, 255, 0.15);
    --topbar_border-color: var(--color-neutral-700);
    --topbar_dropdown-border-color: var(--color-neutral-500);
    --main-layout_bg-gradient: linear-gradient(to bottom,rgba(71,67,77, .7), rgba(71,67,77, .7));
    /*curved sidebar*/
    --curved-sidebar_color1: var(--color-neutral-900);
    --curved-sidebar_color2: var(--color-neutral-950);
    --curved-sidebar_topbar-color: var(--color-neutral-900);
    --plogo-status_base-color1: var(--color-neutral-600);
    --plogo-status_base-color2: var(--color-neutral-500);
    /*sidebar*/
    --sidebar_background-color: linear-gradient(to bottom,rgba(35,32,38, .95), rgba(35,32,38, .95));
}


html, body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

html {
    /*font-size: 14px;*/
}

@media screen and (min-width:450px) {
    html {
        font-size: 14px;
    }
}

@media screen and (min-width:1300px) {
    html {
        font-size: 16px;
    }
}

@media screen and (min-width:2000px) {
    html {
        font-size: 17px;
    }
}

h1, h2, h3, h4, .welcome__text {
    font-family: 'Teko','Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
    font-size: 4rem;
}

small {
    font-size: .55rem;
}

imgfill {
    width: 100%;
    height: 100%
}


.progress {
    height: 1.5em;
    width: 100%;
    background-color: #c9c9c9;
    position: relative;
}

.progress:before {
    content: attr(data-label);
    font-size: 0.6rem;
    position: absolute;
    text-align: center;
    top: 2px;
    left: 0;
    right: 0;
}

.progress .value {
    background-color: var(--color-status-success);
    display: inline-block;
    height: 100%;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

a, .btn-link, .nav-link {
    color: var(--link);
}

.admin-nav-link {
    color:var(--admin-nav-link);
}

a.color-dark, .btn-link.color-dark, .nav-link.color-dark {
    color: var(--link-dark);
}

a:hover, .btn-link:hover, .nav-link:hover, .nav-link:active, .active, a.color-dark:hover, .btn-link.color-dark:hover, .nav-link.color-dark:hover, .nav-link.text-color:active, .active.color-dark {
    color: var(--highlight);
}

.nav-link {
    font-size: 1.2rem;
}

.nav-item.admin-nav-item:hover a.nav-link.admin-nav-link, .admin-nav-item a.nav-link.admin-nav-link.active {
    color: var(--color-neutral-900);
}


/* Since :has() psudo selector is not supported in Firefox, update only the text color for admin nav links */
@-moz-document url-prefix() {
    .nav-item.admin-nav-item:hover a.nav-link.admin-nav-link, .admin-nav-item a.nav-link.admin-nav-link.active {
        color: var(--color-primary);
    }
}


/*logout links in admin section (ignore light/dark mode link styles)*/
.admin__topbar a, .welcome__split-container-above a {
    color: var(--color-neutral-100);
    transition: color .2s ease-in-out;
}

.admin__topbar a:hover, .welcome__split-container-above a:hover {
    color: var(--highlight);
    text-decoration:none;
}

.btn-primary {
    color: var(--button_foreground-color);
    background-color: var(--button_background-color);
    border: .3rem solid;
    border-color: var(--button_border-color);
    min-width: 10rem;
    cursor: pointer;
    /*display: inherit;*/
    font-size: 1.25rem;
    padding: .5rem 1.5rem;
    transition:all .2s ease-in-out;
}

.btn-primary-small {
    min-width: 5rem;
    padding: .25rem .75rem;
    font-size: 0.825rem;
}

.btn-primary:disabled, .btn-primary:disabled:hover {
    background-color: var(--color-primary-300);
}


.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--button_active-background-color);
    color: var(--button_active-foreground-color);
}

.btn-primary.btn-outline {
    color: var(--button_foreground-color);
    background-color: var(--color-neutral-100);
    transition:all .2s ease-in-out;

}

.btn-primary:hover {
    background-color: var(--button_hover-background-color);
    border-color: var(--button_hover-background-color);
    color: var(--button_hover-foreground-color);
}

a.btn-text--lg, a.btn-text--lg:active, a.btn-text--lg:visited {
    text-align:center;
    font-size: 1.4rem;
    color: var(--color-neutral-600);
}

a.btn-text--lg:hover {
    color: var(--color-neutral-700);
}

a.btn-text--white, a.btn-text--white:active, a.btn-text--white:visited {
    color: var(--color-neutral-100);
}

a.btn-text--white:hover {
    color: var(--highlight);
}

.btn-circle.btn-xl {
    width: 120px;
    height: 120px;
    padding: 15px 0px;
    border-radius: 60px 60px 60px 60px;
    border: 8px solid var(--panel_button-border-color);
    font-size: 16px;
    text-align: center;
}

.btn-circle.btn-xl:focus {
    border-color: none;
    outline: none;
}

.btn-circle.btn-xl.active {
    border-color: var(--panel_button-border-color) !important;
    outline: none;
}

.btn--gray {
    background-color: var(--color-neutral-700);
    border-color: var(--color-neutral-700);
}

.btn--gray:hover {
    background-color: var(--color-neutral-800);
    border-color: var(--color-neutral-800);
}

.btn-text--gray {
    color: var(--color-neutral-800);
}

.btn-text--gray:hover {
    color: var(--color-neutral-700);
    text-decoration:underline;
}

label {
    font-weight: 700;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.username-input-container {
    position:relative;
}

    .username-input-container::after {
        position:absolute;
        top: 50%;
        transform:translateY(-50%);
        right: 0.5rem;
        content: "Max: 16 characters"; 
        font-size: 10px;
        color: gray;
        z-index: 100;
    }


input[autocomplete="off"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}


.sidebar_top-row {
    height: 5rem;
    display: flex;
}

.top-row {
    height: 5rem;
    background-color: var(--panel_background-color);
    /*background-image: linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 70%);*/
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    padding: 0 3rem;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.main {
    flex: 1;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: left;
}

.main .top-row > a, .main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 0rem;
}

.scrollable-container {
    width: 100%;
    overflow-y: auto;
    height: calc(100dvh - 4rem);
}

.scrollable-container::-webkit-scrollbar {
    width: 0.75em;
    height: 0.75em;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.4);
    border-radius: 20px;
    border: 4px transparent solid;
    background-clip: padding-box;
}

    .scrollable-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,.8);
        border: 4px transparent solid;
        background-clip: padding-box;
    }

.scrollable-container::-webkit-scrollbar-corner {
    background: transparent;
}

.split-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid var(--color-neutral-700);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.split-container__left, .split-container__right {
    flex: 1;
    display: flex;
    flex-direction: column
}

.split-container__left {
    background-color: var(--color-neutral-900);
    color: var(--color-neutral-100);
    text-align: center;
    align-items: center;
    gap: .75rem;
    justify-content: space-between;
}

.split-container__right {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

.split-container-above {
    color: var(--color-neutral-100);
    gap: 1.5rem;
}

.welcome__nav {
    align-self: stretch;
}

.welcome.split-container,.welcome__split-container-above {
    max-width: 1400px;
    margin: 0 auto;
}

.welcome .split-container__left {
    max-width: 300px;
}

.welcome .split-container__right {
   
}

.welcome__text {
    font-size: 1.8rem;
}

.welcome__cw-logo {
    width: 90%;
}

.sidebar {
}

.sidebar .top-row {
    background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-item a {
    color: #d7d7d7;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.sidebar .nav-item a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.sidebar .nav-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.sidebar-left {
    margin-left: calc(-1 * var(--sidebar_width));
    transition: all .5s ease-in-out;
    position: relative;
    z-index: 100;
}

.sidebar-nav-left {
    margin-left: calc(-1 * var(--sidebar-nav_width));
}

.sidebar-left--expanded {
    margin-left:0;
}


/*RP Icon Styles*/
.icon_rp {
    fill: var(--content_foreground-color);
}

.round-button .icon_rp--wrapper {
    width: 2.75dvh;
    transform: scale(1.25) translateX(-1px);
}

.round-button .icon_rp {
    fill: var(--color-neutral-900);
    transition: all .2s ease-in-out;
}

a.active:has(.round-button) .icon_rp, .round-button:hover .icon_rp{
    fill: var(--color-primary);
}

.topnav-item .icon_rp--wrapper {
    width: 1rem;
    transform: scale(1.25);
}

.topnav-item .icon_rp {
    fill: var(--content_foreground-color);
    transition: all .2s ease-in-out;
}

a.active:has(.topnav-item) .icon_rp, .topnav-item:hover .icon_rp {
    fill: var(--color-neutral-900);
}

.sidebar-device-list .icon_cu--wrapper,
.sidebar-device-list .icon_hub--wrapper,
.sidebar-device-list .icon_rt--wrapper,
.sidebar-device-list .icon_rp--wrapper {
    width: 1.25rem;
    margin-left: -0.35rem;
    margin-right: 0.35rem;
}

.sidebar-device-list .icon_cu,
.sidebar-device-list .icon_hub,
.sidebar-device-list .icon_rt,
.sidebar-device-list .icon_rp {
    fill: var(--content_background-color);
}

/* end RP Icon Styles*/


.sidebar-menu-btn {
    position: absolute;
    left: 100%;
    top: .75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    justify-content: flex-start;
    padding: .65rem .5rem .5rem .5rem;
    margin-left: .75rem;
    border-radius: 50rem;
    width: 3rem;
    height: 3rem;
    background-color: var(--topbar_background-color);
    color: var(--content_foreground-color);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all .1s ease-in-out;
    z-index: 500;
} 

.menu-selector-btn {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 150;
} 

.menu-selector-btn button {
    border-radius: 0 0 12px 0;
    background-color: var(--color-neutral-600);
    font-size: .6rem;
    width: calc(4.5rem + 1px);
    border-bottom: 1px solid var(--curved-sidebar_color1);
    border-right: 1px solid var(--curved-sidebar_color1);
} 

.menu-selector-btn button:hover {
    background-color: var(--color-neutral-700);
    border-bottom: 1px solid var(--curved-sidebar_color1);
    border-right: 1px solid var(--curved-sidebar_color1);
} 

.menu-selector-btn button.btn:focus {
    box-shadow: none;
} 

.sidebar-menu-btn p {
    font-size: .6rem;
    margin: 0;
} 

.sidebar-menu-btn, .sidebar-menu-btn span, .sidebar-menu-btn p {
    transition: all .2s ease-in-out;
} 

.sidebar-menu-btn:hover, .sidebar-menu-btn--collapse:hover {
    background-color: var(--color-primary);
} 

.sidebar-menu-btn:hover > span, .sidebar-menu-btn:hover > p {
    color: var(--color-neutral-900);
} 

.sidebar-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    max-width: var(--sidebar-overlay_width);
    min-width: var(--sidebar-overlay_width);
    background: var(--sidebar_background-color);
    overflow-y:auto;
    z-index: 5000;
} 

.sidebar-overlay::-webkit-scrollbar {
    width: 0.75em;
    height: 0.75em;
}

.sidebar-overlay::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 20px;
    border: 4px transparent solid;
    background-clip: padding-box;
} 

.sidebar-overlay::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-color-hover);
    border: 4px transparent solid;
    background-clip: padding-box;
} 

.sidebar-overlay::-webkit-scrollbar-corner {
    background: transparent;
} 

.sidebar-overlay__left {
    left: 0;
    right: unset;
} 

.sidebar-overlay__right {
    left: unset;
    right: 0;
    animation-name: sidebar-overlay__right--expanded;
    animation-duration: .5s;
} 

.sidebar-overlay__right .oi-x:hover{
    color: var(--color-primary);
} 

@keyframes sidebar-overlay__right--expanded {
    from {
        right: calc(-1 * var(--sidebar-overlay_width));
    }
    to {
       right:0;
    }
} 

.sidebar-form {
    font-size: 0.8rem;
    color: var(--content_foreground-color);
} 

.sidebar-form .form-group {
    margin-bottom: .75rem;
} 

.sidebar-form label{
    margin-bottom: .25rem;
}

    .sidebar-form input, .sidebar-form select, .sidebar-form .select, .sidebar-form option {
        font-size: 0.8rem;
        background-color: var(--content_background-color);
        color: var(--content_foreground-color);
    }

    .dark-mode .sidebar-form input, .dark-mode .sidebar-form select, .sidebar-form .select, .dark-mode .sidebar-form option {
        background-color: transparent;
    } 

.dark-mode .sidebar-form option {
    color: var(--color-neutral-800);
} 

.sidebar-form .form-control {
    border-color: var(--color-neutral-600);
} 

.sidebar-form .form-control:disabled {
    opacity: .5;
}

.sidebar-form input:focus, .sidebar-form select:focus, .sidebar-form .select:focus {
    background-color: var(--topbar_theme-select-gradient-color2);
    color: var(--content_foreground-color);
} 

.sidebar-form .btn-primary {
    font-size: .9rem;
    padding: 0.5rem 1rem;
    min-width: 6rem;
} 

.sidebar-form .btn-link {
    font-size: .9rem;
    color:var(--content_foreground-color);
} 

.sidebar-form .btn-link:hover {
    color: var(--highlight);
} 

.sidebar-form hr {
    border-color: var(--color-neutral-600);
} 

.content {
    padding-top: 1.1rem;
} 

.column {
    float: left;
} 

.center {
    text-align: center;
} 

.flex_row {
    display: flex;
    justify-content: center;
} 

.flex_column {
    flex: 50%;
    padding: 10px;
} 

.flex_wrappanel {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
} 

.template_item {
    display: flex;
    flex-direction:column;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: white;
    border-style: solid;
    border-width: 1px;
    border-color: #5F5F62;
    margin: 5px;
    font-size: 9px;
    min-width:0;
} 

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
} 

.nav-tab {
    padding: 0.3rem 1.8rem;
    display: inline-block;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-size: 0.9rem;
    position: relative;
    text-transform: uppercase;
    transition: 0.2s ease-out;
    width: 9rem;
} 

.nav-tab:hover {
    color: deepskyblue;
    text-decoration: none;
    background-color: rgba(255,255,255,0.3);
} 

.nav-tab.active {
    background-color: rgba(255,255,255,0.2);
    color: red;
}

.nav-tab.active:after {
    content: "";
    position: absolute;
    bottom: -1rem;
    z-index: 1;
    width: 0px;
    height: 0px;
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
    border-top: 1rem solid rgb(92,45,145);
} 

.user-info {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
} 

.user-info img {
    margin-right: 0.7rem;
    width: 2.6rem;
} 

.user-info .username {
    display: block;
    font-weight: 700;
    line-height: 0.7rem;
    margin-top: 0.5rem;
    color: white;
    font-size: 1rem;
} 

.user-info a {
    color: #fff2cc;
    font-size: 0.8rem;
} 

.user-info button.sign-out {
    color: #fff2cc;
    font-size: 0.8rem;
    padding: 0;
} 

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
} 

.invalid {
    outline: 1px solid red;
} 

.validation-message {
    color: red;
}

#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;
} 
                              
.session-page__wrapper {
    display: flex;
    gap: 1rem;
    padding: 1.1rem;
    width: 100%;
    max-width: 87.5rem;
    margin: 0 auto;
} 

.session-page__wrapper h1 {
    font-size: 3rem;
    color: var(--color-neutral-100);
    text-align: center;
}


.inferno-table-container {
    width: 100%;
    background-color: var(--color-neutral-100);
    padding: 1.5rem;
    border-radius: .25rem;
}

/*    .inferno-table-container summary {
        color: var(--color-neutral-100);
    }*/

@media screen and (min-width: 900px) {
    .session-page__wrapper {
        padding: 2rem;
    }

    .session-page__wrapper h1 {
        font-size: 4rem;
    }
} 


@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
} 

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
} 

.dialog-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999999;
    display: flex;
    animation: dialog-container-entry 0.5s;
}

@keyframes dialog-container-entry {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 

.dialog {
    background-color: var(--color-neutral-100);
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    z-index: 2000;
    align-self: center;
    margin: auto;
    padding: 2rem;
    width: 800px;
    max-height: calc(100% - 3rem);
    animation: dialog-entry 0.8s;
    animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
} 

@keyframes dialog-entry {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateX(0px) scale(1.0);
    }
} 

h3.dialog-title {
    color: var(--color-primary);
    font-size: 3.0rem;
    margin-bottom: 1rem;
} 

.dialog-body {
    flex-grow: 1;
    padding: 0 0.5rem;
} 

.dialog-button-bar {
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background-color: #5F5F62;
    padding: 0 1rem;
} 

.pagebutton {
    border: solid;
    border-width: 1px;
    border-color: #bbb;
    border-radius: 5px;
    color:white;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
} 

.pagebutton:hover {
    text-decoration: underline;
    border-color: #97ACFE;
    box-shadow: 0px 0px 5px #97ACFE;
} 

.link-button {
    border: none;
    color: white;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
} 

.link-button:hover {
    text-decoration: underline;
} 

.colorgreen { color: #5BBB55; } 
.colorblue { color: #303E65; } 
.colororange { color: #E38304; } 
.colorred { color: #501F1F; } 
.colorblack { color: black; } 
                                                                                                                              
.dialog-body > div {
    display: flex;
    margin-top: 1rem;
    align-items: center;
} 
                                                                                                                                                            
.dialog-body label {
    text-align: right;
    width: 200px;
    margin: 0 1.5rem;
}

.dialog-body input, .dialog-body select, .dialog-body .select {
    flex-grow: 1;
    width: unset;
} 

.dialog-body .size-label {
    min-width: 110px;
    text-align: right;
} 

.resizable_table {
    border: solid;
    border-width: 1px;
    border-color: black;
    border-collapse: collapse;
} 

.resizable_th_sort_link {
    padding: 5px;
    border: solid;
    border-width: 1px;
    border-color: black;
} 

.resizable_th_span_sort_link {
    cursor: pointer;
    text-decoration: underline;
} 

.resizable_th_span_sort_link:hover {
    color: cornflowerblue;
} 

.resizable_th_span_sort_link_right_align {
    cursor: pointer;
    text-decoration: underline;
    text-align: right;
} 

.resizable_th_span_sort_link_right_align:hover {
    color: cornflowerblue;
} 

.resizable_th_sizer {
    float: right;
    color: green;
    cursor: ew-resize;
} 

.resizable_td {
    white-space: nowrap;
    padding: 5px;
    border: solid;
    border-width: 1px;
    border-color: black;
} 

.resizable_td_right_align {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
    border: 1px solid black;
    border: solid;
    border-width: 1px;
    border-color: black;
} 

tr:nth-child(even) {
    background-color: #8f8f8f
} 

.li_link {
    display: inline;
    color: white;
} 

.li_link:hover {
    color: #4cd2ff;
    text-decoration: underline;
} 

.grid_container {
    display: grid;
} 

.grid_cell {
    border: solid;
    border-width: 1px;
    border-radius: calc(.25rem + 1px);
} 

.grid_cell:hover {
    border: solid;
    border-color: #00FF00;
    border-width: 1px;
    color: white;
} 

.grid_cell:focus {
    border: solid;
    border-color: #000000;
    border-width: 2px;
    color: white;
} 

.grid_cell_borderless {
    border: none;
    border-width: 0px;
    color: white;
} 

.grid_cell_borderless:hover {
    border: none;
    border-width: 0px;
    color: white;
} 

.grid_cell_borderless:focus {
    border: none;
    border-width: 0px;
    color: white;
    color: white;
} 

.grid_cell_borderless_selected {
    border: none;
    border-width: 0px;
    color: white;
} 

.grid_cell_glow {
    border: solid;
    border-color: #97ACFE;
    border-width: 1px;
    box-shadow: 0px 0px 4px #97ACFE;
    color: white;
} 

.grid_cell_glow:hover {
    border: solid;
    border-color: #00FF00;
    border-width: 3px;
    box-shadow: 0px 0px 10px #00FF00;
    color: white;
} 

.grid_cell_glow:focus {
    border: solid;
    border-color: #00FF00;
    border-width: 3px;
    box-shadow: 0px 0px 10px #00FF00;
    color: white;
} 

.tooltip-wrap {
    position: relative;
} 

.tooltip-wrap .tooltip-content {
    display: none;
    position: absolute;
    z-index: 99;
    top: 10%;
    left: 15%;
    right: 15%;
    background-color: var(--popup_background-color);
    color: var(--popup_foreground-color);
} 

.tooltip-wrap:hover .tooltip-content {
    display: block;
} 

.popup {
    display: block;
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 20%;
    right: 20%;
    background-color: var(--popup_background-color);
    color: var(--popup_foreground-color);
} 

#bottom {
    position: absolute;
    bottom: 0;
    left: 100px;
}


/* =================================================== */
/* Tables */
/* =================================================== */

/* =================================================== */
/* Table Container Elements */
.table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    width: 100%;
} 

.table-wrapper-btns {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
} 

table {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-neutral-100);
    border: 2px solid var(--color-neutral-600);
    scrollbar-width: thin;
    width: 100%;
    /*  SCROLLABLE TABLE FRAME - Table is currently not scrollable.
        Add the following line to the opening <table> tag in the HTML if scrolling is desired, and adjust height as necessary:
        
        style="overflow-y: auto; height: 22rem;" 
  
    */
}

/* =================================================== */
/* Table Sections Shared Styles*/
tbody tr, thead tr {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 2rem;
}

/* =================================================== */
/* Table Head */
thead {
    position: sticky;
    margin-top: -1px;
    top: -1px;
    z-index: 500;
} 

thead tr {
    background-color: var(--color-neutral-100);
    border-top: 1px solid var(--color-neutral-600);
    border-bottom: 1px solid var(--color-neutral-600);
    font-weight: 700;
} 

thead tr:first-of-type {
    margin-top: -1px;
} 

thead tr th {
    min-height: 3rem;
    border: none;
}

/* =================================================== */
/* Table Body */
.table tbody tr,.data-grid-row-wrapper {
    position: relative;
    cursor: pointer;
    height: 3rem;
} 

.table tbody tr {
    background-color: var(--color-neutral-200);
} 

.table tbody tr:hover {
    background-color: var(--color-neutral-300);
} 

.table tbody .table-row--selected, .table tbody .table-row--selected:hover {
    background-color: var(--color-neutral-500);
} 

.table tbody .table-row--disabled, .table tbody .table-row--disabled:hover {
    background-color: var(--color-neutral-100);
    cursor: default;
    height: 3rem;
}

/* =================================================== */
/* Table Content*/
.table td, .table th, .table thead th {
    border: none;
} 

.table td, .table thead th {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    height: 100%;
    /*width: 100%;*/
    min-height: 3rem;
    line-height: 1.2;
    padding: 0 .25rem;
} 

td p, th p{
    text-align: center;
    margin: 0;
}

/* =================================================== */
/*Left Menu and Right Buttons Shared Styles*/
.table-row__left-menu .btn, .table-row__right-btns .btn {
    display: flex;
    flex-direction: column;
    color: var(--color-neutral-100);
    border-radius: 0;
    box-shadow: none;
    font-size: 0.65rem;
    padding: 0.3rem;
    align-items: center;
    justify-content: center;
    height: 100%;
} 

.table-row__left-menu .btn:hover, .table-row__right-btns .btn:hover {
    box-shadow: none;
    cursor: pointer;
}

/* =================================================== */
/* Left Menu*/
.table-row__left-menu, .table td.table-row__left-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-neutral-100);
    height: 100%;
    z-index: 200;
    min-height: 3rem;
    border: none;
    width: unset;
} 

.left-menu--open {
    display: flex;
    background-color: var(--color-neutral-800);
} 

.left-menu--open > .left-menu__btn:hover {
    background-color: var(--color-neutral-900);
} 

.left-menu--open > .left-menu__btn:hover ~ p {
    color: var(--color-primary);
} 

.left-menu--open > .left-menu__btn p {
    margin: 0;
}

.left-menu--open .btn:hover {
    color: var(--color-primary-500);
}

/* =================================================== */
/* Menu Toggle Button / Close Menu Button */
a.left-menu__toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
} 

a.left-menu__toggle-btn span {
    font-size: 1.4rem;
    text-align: center;
} 

.left-menu--closed > a.left-menu__btn {
    display: none;
}

/* =================================================== */
/* Right Buttons */
.table-row__right-btns {
    position: absolute;
    display: none;
    min-height: 3rem;
    border: none;
    width: unset;
} 

.table-row--selected > .table-row__right-btns, .table-row__right-btns--visible {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
} 

.table-row__right-btns .btn {
    background-color: var(--color-neutral-800);
    min-width: 4.25rem;
} 

.table-row__right-btns .btn p {
    color: var(--color-neutral-100);
    padding: 0;
    margin: 0;
} 

.table-row__right-btns .btn:hover {
    background-color: var(--color-neutral-900);
    color: var(--color-primary-500);
} 

.fade-in {
    animation: fadeIn 1s;
} 

.sidebar-fade-in {
    animation: fadeIn 1.5s;
} 

.sidebar-nav-fade-in {
    animation: navfadeIn .75s;
} 

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
} 

@keyframes navfadeIn {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* <select> styles */
select, .select {
    /* Reset */
    appearance: none;
    border: 0;
    outline: 0;
    font: inherit;
    font-weight: normal;
    /* Personalize */
    width: 100%;
    height: 2em;
    padding: 0 2em 0 .5em;
    background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.45em center / 1.2em, linear-gradient(to left, var(--topbar_theme-select-gradient-color1) 2em, var(--topbar_theme-select-gradient-color2) 2em);
    color: var(--topbar_text-color);
    border-radius: 0.25em;
    cursor: pointer;
}

    select:disabled, .select:disabled {
        opacity: 0.5 !important;
        color: var(--color-neutral-800)  !important;
    }

/* <option> colors */
select option, .select option {
    color: var(--color-neutral-200);
    background-color: var(--color-neutral-600);
}

/* Remove focus outline */
select:focus, .select:focus{
    outline: none;
}

/* Remove IE arrow */
    select::-ms-expand, .select::-ms-expand {
        display: none;
    } 

.devices__container, .profiles__container {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: hidden;
    top: 0;
} 

.custom-select-sm {
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
} 

summary::marker {
    font-size: 75%;
    color: var(--color-primary);
}

.loading-text {
    padding: 1rem 2rem;
}

    .loading-text p {
        color: var(--color-neutral-700);
        text-align:center; 
        margin:0;
    }

.expand-collapse-btn {
    color: var(--color-neutral-100); 
    font-size: 0.7rem; 
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
    .expand-collapse-btn:hover {
        color: var(--color-primary); 
    }

/*  Animations  */
.bg-pulse {
    background-color: var(--color-neutral-800);
    animation-name: color-pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes color-pulse {
    0% {
        background-color: var(--color-neutral-800);
    }

    35% {
        background-color: var(--color-primary);
    }

    65% {
        background-color: var(--color-primary);
    }

    100% {
        background-color: var(--color-neutral-800);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media print {
    /* Hide elements not needed in print */
    .no-print {
        display: none !important;
    }
}