body { 
        background-color: #eaf6ff; font-family: sans-serif; text-align: center; 
    }
    #login-title {
      color: #007bff;
      font-weight: bold;
      font-size: x-large;
    }
    #reader { 
        width: 100%; height: 85%; max-width: 640px; margin: auto auto; 
    }
    input, button {
      font-size: 1.1em; margin: 10px auto; padding: 10px;
      border: 2px solid #007bff; border-radius: 5px; width: 93%;
    }
    #capture-btn {
      margin-bottom: -7px;
      height: 2.8em;
      width: 98%;
    }
    .hidden { 
        display: none !important; 
    }
    button { 
        background-color: #007bff; 
        color: white; 
        cursor: pointer; 
    }
    button:hover { 
        background-color: #0056b3; 
    }
    #scanner { 
        display: none; 
    }
    #requestCameraPermissionBtn {   
        background-color: #bf0d2e; 
        border-width: medium; 
        border-color: #000000; 
        margin-top: -4px;   
    }
    #nextBtn {  
        margin-top: 12px; 
        position: relative; 
        width: 99%; 
    }
    #nextBtn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    #result {   
        margin: 7px 0px -9px 0px;   
    }
    #choosetype {   
        font-size: 1.1em; 
        margin: 7px -10px -10px -10px; 
        padding: 10px; border: 2px solid #007bff; 
        border-radius: 5px; width: 94%; 
    }
    #logout-btn {
      flex-direction: column-reverse;
      align-content: center;
      background-color: #efad8a; 
      color: #000000; 
      font-weight: bolder; 
      border: 2px solid #be3208;
      width: 70%; 
      height: 40px; 
      margin: 34px -28px -3px 4px;
    }
    #delete-session {
      flex-direction: column-reverse;
      background-color: #7f1210ff;
      color: #ffffffff;
      font-weight: bolder;
      border: 2px solid #ff1299;
      width: 70%;
      height: 40px;
      margin: -5px -28px -31px 4px;
    }
    #delete-session:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    #flash-toggle { 
        min-height: 2em; max-height: 2em;
    }
    #flash-toggle:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    #switch-camera {    
        min-height: 2em; max-height: 2em;
    }
    #switch-camera:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
    #qr-shaded-region { 
        border-radius: 8px;
    }
    #reader video {
      width: 100%;
      height: 100%;
      aspect-ratio: 16 /9;
      object-fit: cover;
      background-color: black;
      display: block;
      border-radius: 8px;
    }
    .search-container {
      position: relative;
      width: 100%;
    }
    .suggestions {
      position: absolute;
      width: 95%;
      background: white;
      border: 0px solid #dcdcdc;
      border-top: none;
      max-height: 300px;
      height:auto;
      overflow-y: auto;
      margin: -10px auto;
      text-align: left;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 999;
    }
    .suggestion-item {
      padding: 10px 20px;
      cursor: pointer;
    }
    .suggestion-item:hover {
      background-color: #f1f1f1;
    }
    #title {
        height: 2.75em;
        width: 16.7em;
        font-weight: bold;
        font-size: 0.9em;
        background-color: #eaf6ff;
        text-align: center;
        color: mediumvioletred;
        cursor: pointer;
        border: 2px solid mediumvioletred;
        border-radius: 5px;
        margin: -5px -45px 0px 0px;
        z-index: 100;
    }
    .toastify-center-screen {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        z-index: 999999 !important;
        animation: dropFromTop 1.4s cubic-bezier(.22,.61,.36,1) forwards;
    }
    @keyframes dropFromTop {
      0%   { transform: translate(-50%, calc(-50% - 100vh)); opacity: 0; }
      60%  { opacity: 0.7; }
      100% { transform: translate(-50%, -50%); opacity: 1; }
    }
    @supports (height: 100svh) {
      @keyframes dropFromTop {
        0%   { transform: translate(-50%, calc(-50% - 100svh)); opacity: 0; }
        60%  { opacity: 0.7; }
        100% { transform: translate(-50%, -50%); opacity: 1; }
      }
    }