[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #060e1d;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(255, 255, 255, 0.8);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}

.method:hover{
    background: rgba(255,255,255,0.1);
    cursor: pointer;
}

.method img{
    max-height: 80px;
}


        body{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal;
            display: flex;
            flex-direction: column;
            /*justify-content: center;*/
            /*align-items: center;*/
            height: 100vh;
            width: 100vw;
            overflow-x: hidden;
        }

        h1{
            font-family: "Red Hat Display", serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal; 
            font-size: calc(1.5rem + .3vw) !important;;
        }

        h1.large{
            font-family: "Red Hat Display", serif;
            font-size: calc(2.5rem + .3vw) !important;;
        }

        h2{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 600;
            font-style: normal; 
            font-size: calc(1.3rem + .3vw) !important;
        }

        img.h2{ height: calc(1.0rem + .3vw); margin-right:1vw; }
        img.h3{ height: calc(0.7rem + .3vw); margin-right:1vw; }

        h3{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 500;
            font-style: normal; 
            font-size: calc(1.1rem + .3vw) !important;
        }

        h3 img{ display:flex; width: auto; height: calc(1.0rem + .3vw) !important; }
        h3 span{
            font-size: calc(1.0rem + .3vw) !important; 
            margin-right:.7vw
        }

        h4{
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 550;
            font-style: normal; 
            font-size: calc(0.9rem + .3vw) !important;
        }

        header nav{
            background: white;
        }

        footer{
            min-height: 7vh;
            display: flex;
        }

        section.insider{
            padding: 5vh 10vw 5vh 10vw;
            margin-top: 7vh;
            min-height: 86vh;
            overflow: auto;
            display: block;
        }

        section.page{
            padding: 1vh 5vw 5vh 5vw;
        }

/*        input:user-valid {
          border: 1px solid green;
        }

        input:user-valid + span::before {
          content: "✓";
          color: green;
        }*/

        .signout{
            max-height: 1.5rem;
            margin-right: 1rem;
        }

        .bd-bg-none{
            border: none;
            background: none;
        }

        .pinpad{
            height: 4.7em;
        }

        .pin{
            width: 15%;
            max-width: 10%;
            margin-left:5%;
            text-align: center;
        }

        .pin.disabled {
            color: transparent;
        }

        .copy-to-clipboard {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-color: var(--bs-border-color);
            background-image: url('/static/svg/clipboard.svg') !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 50% !important;
            width: 38px;
            border-left: none;
            padding-top: 4px;
            padding-bottom: 8px;
            background: inherit;
        }

        .autosave {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-color: var(--bs-border-color);
            background-image: url('/static/svg/save2.svg') !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: 50% !important;
            width: 38px;
            border-left: none;
            padding-top: 4px;
            padding-bottom: 8px;
            background: inherit;
        }

        .check{
            background-image: url('/static/svg/check.svg') !important;
        }

        .box{
            margin-top:5vh;
        }

        .gray{
            background: rgba(0,0,0,0.05);
            padding:2rem 1rem 2rem 1rem;
        }

        .pr3{
            padding-right:10vw;
            font-family: "Red Hat Text", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal; 
            font-size: calc(0.8rem + .3vw) !important;
        }

        .ico{
            width:10%;
        }

        [data-bs-theme="dark"] .invert {
           filter: invert(1) brightness(2);
        }

        [data-bs-theme="dark"] .ico {
           filter: invert(1) brightness(2);
        }

        [data-bs-theme="dark"] h3 img {
           filter: invert(1) brightness(2);
        }

        .mono{
            font-family: "Red Hat Mono", serif;
            font-optical-sizing: auto;
            font-weight: 300;
            font-style: normal;
            font-size: small;
        }

        .black{
            background: black;
        }

        .white{
            color: white;
        }

        .f1{ font-size: small !important; }
        .f2{ font-size: x-small !important; }

        .login-checkboxes{ max-width:25vw; }

        .error__content .mono{
            font-size: calc(.5rem + .25vw) !important;
        }

        .mono b{
            font-weight: 600;
        }

        .w100{
            width: 100%;
        }

        .poster{
            max-width: 90vw;
        }

        .card-body{
            min-width: 30vw;
            max-width: 100%;
        }

        .visible{
            display: block;
            margin: 0.5em 0px 0px 0px;
        }

        .fingerprint{
            max-width: 15vw;
        }

        .container{
            max-width: 90vw;
        }

        .logo{
            max-height: 8vh;
            width: 15vw;    
            margin-bottom:3vh;        
        }

        .navbar .logo{
            max-height: 1.5vh;
            width: 12vw;
            margin-bottom: auto;
        }

        .forbidden img{
            max-height: 3vh;
        }

        .forbidden div div{
            min-height: 3vh;
        }


        @property --t {
          syntax: "<number>";
          initial-value: 180;
          inherits: true;
        }
        /* won't be needed once Chrome supports round() */
        @property --s {
          syntax: "<integer>";
          initial-value: 0;
          inherits: true;
        }
        .countdown {
          /* when Chrome supports round(), this can be simplified */
          /* more on this rounding trick
           * https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/ */
          --s: calc(var(--t)/1);
          display: grid;
          margin: 1em auto;
          width: 10em;
          height: 10em;
          animation: t 180s linear infinite;
        }
        .countdown::after {
          grid-column: 1;
          grid-row: 1;
          place-self: center;
          font: 3em/2 "Red Hat Text", serif, ubuntu mono, consolas, monaco, monospace;
          counter-reset: s var(--s);
          content: "" counter(s, decimal-leading-zero);
        }

        @keyframes t {
          to {
            --t: 0 ;
          }
        }
        svg {
          grid-column: 1;
          grid-row: 1;
        }

        [r] {
          fill: none;
          stroke: silver;
        }
        [r] + [r] {
          --k: calc(var(--t)/180);
          transform: rotate(-90deg);
          stroke-linecap: round;
          stroke: color-mix(in hsl shorter hue, #69ff47 calc(var(--k)*100%), #7ec56e);
          stroke-dasharray: var(--k) 1;
        }


:root {
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 80px;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.nav{
    overflow: hidden;
}

.nav img{
    height: 2em;
    fill: white;
}

nav .head div{
    text-align: left !important;
    padding-left: 10%;
}
nav .logo{
    width: 50% !important;
}

nav.collapsed .logo{
    width: 120% !important;
    margin: 53px 0px 0px 0px;
}

nav a span{
    margin: 3px 0px 0px 10px;
    display: inline-flex;
}

/* this is needed to make the content scrollable on larger screens */
@media (min-width: 576px) {
    .h-sm-100 {
        height: 100%;
    }

    .poster{
        max-width: 35vw;
    }

    .container: ;{
        max-width: 45vw;
    }
}

@media (min-width: 700px) {
    .poster{
        min-width: 256px;
        max-width: 45vw;
    }
}


/* Help Panel Styles */
.help-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1049;
}

.help-panel-overlay.active {
    opacity: 1;
    visibility: visible;
}

.help-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    z-index: 1050;
    overflow: hidden;
    transition: width 0.3s ease;
}

.help-panel.active {
    width: 500px;
}

.help-panel-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 100%;
    background-color: var(--bs-body-bg);
    border-left: 1px solid var(--bs-border-color);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1051;
}

.help-panel.active .help-panel-content {
    transform: translateX(0);
}

.help-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.help-panel-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.help-panel-close {
    background: none;
    border: none;
    color: var(--bs-body-color);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.help-panel-close:hover {
    background-color: var(--bs-secondary-bg);
}

.help-panel-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}