/* 
------------------------------------------------------------------------------------------------------------------------------
   Mobile App 
   Globals / General
------------------------------------------------------------------------------------------------------------------------------
*/


:root {
   --main-dark-color: #003F59;
   --accent-1: #13688C;
   --accent-2: #4d9bd5;
   --accent-2-highlight: #1988C6;
   --accent-3: #8BC3E2;
   --accent-alt-dark: #70BB44;
   --accent-alt-light: #b4dd37;
   --warning-color-light: #ffffe0;
   --warning-color-dark: #EDD01C;
   --error-color: #A00000;
   --green-color: #017201;
   --bg-white: #ffffff;
   --bg-light-1: #efefef;
   --bg-light-1-2: #eaeaea;
   --bg-light-2: #cfcfcf;
   --bg-light-3: #afafaf;
   --bg-read-only-color: #cfcfcf;
   --bg-disabled: #c0c0c0;
   --bg-black: #000000;
   --bg-dark-1: #1E1E1E;
   --bg-dark-2: #2E2E2E;
   --bg-dark-3: #3E3E3E;
   --text-disabled-color: #7b7b7b;
   --text-light-color-1: #e0e0e0;
   --text-light-color-2: #d0d0d0;
   --text-light-color-3: #c0c0c0;
   --text-dark-color-1: #202020;
   --text-dark-color-2: #282828;
   --text-dark-color-3: #303030;
   --add-10-white: rgba(255, 255, 255, .1);
   --add-25-white: rgba(255, 255, 255, .25);
   --add-50-white: rgba(255, 255, 255, .50);
   --add-75-white: rgba(255, 255, 255, .75);
   --add-90-white: rgba(255, 255, 255, .90);
   --add-10-black: rgba(0, 0, 0, .1);
   --add-25-black: rgba(0, 0, 0, .25);
   --add-50-black: rgba(0, 0, 0, .50);
   --add-75-black: rgba(0, 0, 0, .75);
   --add-90-black: rgba(0, 0, 0, .90);
   --add-10-gray: rgba(128, 128, 128, .1);
   --add-25-gray: rgba(128, 128, 128, .25);
   --add-50-gray: rgba(128, 128, 128, .50);
   --add-75-gray: rgba(128, 128, 128, .75);
   --add-90-gray: rgba(128, 128, 128, .90);
   --corner-radius: .35rem;
   --header-height: 3rem;
   --tab-bar-height: 3.8rem;
   --main-height: calc(100vh - calc(var(--header-height) + var(--tab-bar-height))); /*this should be the sum of --header-height and --tab-bar-height */
   --main-height-no-tabs: calc(100vh - var(--header-height));
}

@supports(height: 100dvh) {
   :root {
      --main-height: calc(100dvh - calc(var(--header-height) + var(--tab-bar-height))); /*this should be the sum of --header-height and --tab-bar-height */
      --main-height-no-tabs: calc(100dvh - var(--header-height));
   }
}

/*Radzen Color Palette*/
:root {
   --rz-primary: var(--main-dark-color);
   --rz-primary-light: var(--accent-3);
   --rz-primary-lighter: rgba(139, 195, 226, 0.12);
   --rz-primary-dark: var(--accent-2);
   --rz-primary-darker: var(--accent-1);
   --rz-secondary: var(--accent-alt-dark);
   --rz-secondary-light: var(--accent-alt-light);
   --rz-secondary-lighter: rgba(180, 221, 55, 0.12);
   --rz-secondary-dark: #5A9336;
   --rz-secondary-darker: #426B27;
}

html, body {
   font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   background: var(--bg-light-1);
   color: var(--text-dark-color-1);
   -webkit-text-size-adjust: 100%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   margin: 0;
   padding: 0;
   overflow: hidden;
   height: 100vh;
   width: 100vw;
   overscroll-behavior-x: none;
}

@media (prefers-reduced-motion: no-preference) {
   :root {
      scroll-behavior: smooth;
   }
}

input[type="password"] {
   letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   margin-top: 0;
   margin-bottom: 0.5rem;
   line-height: 1.2;
}

h1 {
   font-size: 1.9rem;
}

h2 {
   font-size: 1.7rem;
}

h3 {
   font-size: 1.5rem;
}

h4 {
   font-size: 1.3rem;
}

h5 {
   margin: .5rem 0;
   border-bottom: 1px solid var(--accent-1);
   max-width: calc(100vw - 2rem);
   font-size: 1.2rem;
}

h6 {
   font-size: 1.1rem;
}

hr {
   margin: 0.5rem 0;
   color: var(--main-dark-color);
   opacity: 0.5;
}

iframe {
   border: 0;
}

p {
   margin-top: 0;
   margin-bottom: 1rem;
}

a {
   color: var(--accent-1);
   text-decoration: none;
}

   a:hover {
      color: var(--accent-2);
      text-decoration: none;
   }

img, svg {
   vertical-align: middle;
}

div, a {
   margin: 0;
   padding: 0;
}

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

.no-margin {
   margin: 0 !important;
}

.no-lr-margin {
   margin-left: 0 !important;
   margin-right: 0 !important;
}

.no-tb-margin {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}

.margin-tb {
   margin-top: .35rem !important;
   margin-bottom: .35rem !important;
}

.margin-tb-large {
   margin-top: .75rem !important;
   margin-bottom: .75rem !important;
}

.margin-lr {
   margin-left: .35rem !important;
   margin-right: .35rem !important;
}

.margin-lr-large {
   margin-left: .75rem !important;
   margin-right: .75rem !important;
}

.margin-left {
   margin-left: .35rem !important;
}

.margin-left-large {
   margin-left: .75rem !important;
}

.margin-right {
   margin-right: .35rem !important;
}

.margin-right-large {
   margin-right: .75rem !important;
}

.margin-top {
   margin-top: .35rem !important;
}

.margin-top-large {
   margin-top: .75rem !important;
}

.margin-bottom {
   margin-bottom: .35rem !important;
}

.margin-bottom-large {
   margin-bottom: .75rem !important;
}

.margin-all {
   margin: .35rem !important;
}

.margin-all-large {
   margin: .75rem !important;
}

.auto-margin {
   margin: auto !important;
}

.no-padding {
   padding: 0 !important;
}

.padding-all {
   padding: .35rem !important;
}

.padding-tb {
   padding-top: .35rem !important;
   padding-bottom: .35rem !important;
}

.padding-lr {
   padding-left: .35rem !important;
   padding-right: .35rem !important;
}

.padding-all-large {
   padding: .75rem !important;
}

.padding-tb-large {
   padding-top: .75rem !important;
   padding-bottom: .75rem !important;
}

.padding-lr-large {
   padding-left: .75rem !important;
   padding-right: .75rem !important;
}

.visible {
   visibility: visible;
   display: initial;
}

.hidden {
   visibility: hidden;
   display: none;
}

.disable-controls {
   pointer-events: none;
   cursor: wait;
}

   .disable-controls input, .disable-controls span[role="listbox"], .disable-controls button {
      border-color: transparent;
      filter: grayscale(0.1);
      opacity: .6;
   }

.vertical-stack {
   display: flex;
   flex-direction: column;
}

.horizontal-stack {
   display: flex;
   flex-direction: row;
}

.stack-fill {
   flex-grow: 1;
}

.vert-center {
   display: flex;
   align-items: center;
}

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

.center-all {
   display: flex;
   justify-content: center;
   align-items: center;
}

.center-text {
   text-align: center;
}

.no-thead thead, .no-thead thead tr, .no-thead thead tr th {
   visibility: collapse;
   height: 0;
   display: none;
}

.bold {
   font-weight: 900;
}

.error-color {
   color: var(--error-color);
}

.font-regular {
   font-size: 1rem;
}

.font-s {
   font-size: .85rem;
}

.font-xs {
   font-size: .75rem;
}

.font-xxs {
   font-size: .65rem;
}

.font-l {
   font-size: 1.15rem;
}

.font-xl {
   font-size: 1.25rem;
}

.font-xxl {
   font-size: 1.35rem;
}

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

.pointer {
   cursor: pointer;
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    blazor error
------------------------------------------------------------------------------------------------------------------------------
*/

.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;
   }

.blazor-error-boundary {
   background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
   padding: 1rem 1rem 1rem 3.7rem;
   color: white;
}

   .blazor-error-boundary::after {
      content: "An error has occurred."
   }

.status-bar-safe-area {
   display: none;
}

@supports (-webkit-touch-callout: none) {
   .status-bar-safe-area {
      display: flex;
      position: sticky;
      top: 0;
      height: env(safe-area-inset-top);
      background-color: #f7f7f7;
      width: 100%;
      z-index: 1;
   }

   .flex-column, .navbar-brand {
      padding-left: env(safe-area-inset-left);
   }
}


/* 
------------------------------------------------------------------------------------------------------------------------------
    login
------------------------------------------------------------------------------------------------------------------------------
*/

.login-panel {
   background-color: var(--bg-light-1);
   box-shadow: 3px 3px 5px var(--add-50-black);
   display: flex;
   flex-direction: column;
   min-height: 24rem;
   border-radius: var(--corner-radius);
   width: 90vw;
   max-width: 20rem;
   font-size: .9rem;
}

   .login-panel img {
      width: 14rem;
      align-self: center;
      margin: .5rem 0 1.5rem 0;
   }

   .login-panel .login-input {
      width: 90%;
      margin: .35rem;
      align-self: center;
   }

   .login-panel .tos-checkbox {
      display: flex;
      flex-direction: row;
      align-self: center;
      margin: 1rem;
      width: 90%;
   }

      .login-panel .tos-checkbox div {
         align-self: center;
         margin: 0 1rem;
      }

      .login-panel .tos-checkbox label {
         margin-top: .25rem;
         word-wrap: break-word;
      }

   .login-panel .login-button {
      width: 5rem;
      align-self: center;
      margin-bottom: 1.75rem;
   }

   .login-panel .send-code-button {
      width: 8rem;
      align-self: center;
      margin: .35rem;
   }

   .login-panel .verify-code-button {
      width: 9rem;
      align-self: center;
      margin: .35rem;
   }

   .login-panel .send-code-button {
      width: 9rem;
      align-self: center;
      margin: .35rem;
   }

   .login-panel .reset-password-button {
      width: 9rem;
      align-self: center;
      margin: .35rem;
   }

.login-input {
   margin: 0 0 .5rem 0;
}

.login-links {
   grid-column-start: addl-options;
   grid-column-end: 4;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 20rem;
   margin: .5rem;
   align-self: center;
}

   .login-links a {
      width: 9rem;
      height: 5rem;
      background-color: var(--main-dark-color);
      margin: .5rem;
      box-shadow: 3px 3px 5px var(--add-50-gray);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: var(--text-light-color-1);
      border-radius: var(--corner-radius);
   }

      .login-links a:hover {
         background-color: var(--accent-2-highlight);
         box-shadow: 3px 3px 5px var(--add-75-black);
         text-decoration: none;
      }

      .login-links a:active {
         box-shadow: 0 0 0 white;
      }

      .login-links a div {
         word-wrap: break-word;
         height: auto;
         align-items: center;
         font-size: .85rem;
         text-align: center;
         font-weight: 500;
         margin: 0 1rem;
      }

/* 
------------------------------------------------------------------------------------------------------------------------------
    Root Layout
------------------------------------------------------------------------------------------------------------------------------
*/
   .root {
      display: grid;
      grid-template-rows: [header] var(--header-height) [main] 1fr [tab-bar] var(--tab-bar-height);
      position: fixed;
      height: 100%;
      width: 100vw;
      overflow: hidden;
   }

   .root header {
      grid-row-start: header;
      background-color: var(--main-dark-color);
      color: var(--text-light-color-1);
      height: var(--header-height);
      display: flex;
      flex-direction: row;
      align-items: center;
   }

      .root header h1 {
         font-size: 1.25rem;
         margin: 0 .5rem 0 1rem;
         cursor: pointer;
         color: var(--text-light-color-1);
      }

   .root main {
      grid-row-start: main;
      /*height: var(--main-height);*/
      overflow: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
   }

   .root .tab-bar {
      grid-row-start: tab-bar;
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
      align-self: center;
      background-color: var(--bg-light-1-2);
      height: var(--tab-bar-height);
   }

      .root .tab-bar li {
         margin: auto;
      }

         .root .tab-bar li a {
            width: 25vw;
            margin: 0;
            height: var(--tab-bar-height);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-dark-color-1);
         }

            .root .tab-bar li a.selected {
               color: var(--accent-1);
               font-weight: bold;
               background-color: var(--add-10-black);
            }

         .root .tab-bar li:hover {
            color: var(--text-dark-color-2);
            background-color: var(--add-25-black);
         }

         .root .tab-bar li.selected:hover {
            color: var(--accent-2);
         }

         .root .tab-bar li i {
            margin: .15rem 0;
            font-size: 1.35rem;
         }

         .root .tab-bar li div {
            font-size: .75rem;
         }

.dialog-root {
   height: 100vh;
   width: 100vw;
   left: 0;
   top: 0;
   position: absolute;
}

main .flex-main {
   display: flex;
   flex-direction: column;
   height: var(--main-height);
   overflow-y: hidden;
}

   main .flex-main .flex-main-body {
      flex-grow: 1;
      overflow-y: auto;
   }

/* 
------------------------------------------------------------------------------------------------------------------------------
    Button Menu
------------------------------------------------------------------------------------------------------------------------------
*/

#button-menu {
   display: block;
   text-transform: uppercase;
   cursor: pointer;
   color: var(--text-dark-color-1);
   background-color: var(--bg-light-2);
   height: var(--tab-bar-height);
}

   #button-menu ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      padding: 0;
      margin: 0;
      justify-content: space-evenly;
   }

   #button-menu li {
      width: calc(100vw / 5);
      height: var(--tab-bar-height);
      display: flex;
      flex-direction: column;
   }

      #button-menu li.selected {
         color: var(--accent-1);
      }

      #button-menu li:hover {
         background: var(--add-10-white);
      }

      #button-menu li i {
         text-align: center;
         font-size: 1.3rem;
         margin: .5rem 0 .3rem 0;
      }

      #button-menu li span {
         text-align: center;
         margin: auto .2rem;
         font-size: .5rem;
         font-weight: bold;
      }

/* 
------------------------------------------------------------------------------------------------------------------------------
    Chat Texts
------------------------------------------------------------------------------------------------------------------------------
*/

.chat-wrap {
   display: grid;
   grid-template-rows: [chats-row] 1fr [message-row] auto;
   height: var(--main-height);
}

#chat-texts {
   overflow-y: scroll;
   overflow-x: hidden;
   grid-row-start: chats-row;
}

   #chat-texts ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }

      #chat-texts ul li {
         margin: .75rem;
         padding: 0 1rem;
         border: 1px solid transparent;
         color: white;
         width: 75vw;
         box-shadow: 3px 3px 5px var(--add-50-black);
         border-radius: 10px;
      }

         #chat-texts ul li audio {
            width: calc(75vw - 2rem);
            margin: .5rem 0;
         }

   #chat-texts li.local {
      margin-left: calc(15vw - 1rem);
   }

   #chat-texts li.user {
      background: #2B7D9B;
   }

   #chat-texts li.channel {
      background: #395990;
   }

   #chat-texts li.remote {
      margin-right: 20%;
   }

   #chat-texts li.contact {
      background: #274854;
   }

   #chat-texts .name {
      font-weight: bold;
      font-size: .7rem;
      color: var(--add-75-white);
   }

   #chat-texts .date {
      font-size: .7rem;
      color: var(--add-50-white);
   }

   #chat-texts .message {
      font-size: .9rem;
      display: block;
      margin: .25rem .5rem .5rem 0;
      overflow-wrap: anywhere;
   }

      #chat-texts .message a {
         color: var(--accent-alt-light);
      }

         #chat-texts .message a:hover {
            color: var(--accent-alt-dark);
         }

#text-message-editor, #text-message-editor:active {
   outline: none;
   border-radius: var(--corner-radius);
}

#chat-text-footer {
   grid-row-start: message-row;
   display: grid;
   grid-template-columns: [editor-col] 1fr [actions-col] auto;
   grid-template-rows: [tools-row] auto [message-row] auto [attachment-row] auto;
   height: auto;
   background-color: var(--main-dark-color);
   padding: .5rem;
}

   #chat-text-footer .tools {
      grid-column-start: editor-col span 2;
      grid-row-start: tools-row;
      margin-bottom: .25rem;
   }

      #chat-text-footer .tools i {
         font-size: 1.25rem;
         color: var(--text-light-color-1);
         cursor: pointer;
         padding: .5rem;
         border-radius: var(--corner-radius);
      }

         #chat-text-footer .tools i:hover {
            color: var(--text-light-color-3);
            background-color: var(--accent-1);
         }

   #chat-text-footer .editor {
      grid-row-start: message-row;
      grid-column-start: editor-col;
      margin: 0 .5rem 0 .25rem;
   }

#text-message-editor {
   height: 3rem;
   width: 100%;
   font-size: .9rem;
   padding: .35rem;
}

#chat-text-footer .actions {
   grid-row-start: message-row;
   grid-column-start: actions-col;
}

.actions .send {
   font-size: 1.5em;
   color: var(--text-light-color-1);
   cursor: pointer;
   padding: .5rem;
   margin: .5rem .25rem .25rem .25rem;
   border-radius: var(--corner-radius);
}

   .actions .send:hover {
      color: var(--text-light-color-3);
      background-color: var(--accent-1);
   }

#chat-text-footer .attachment {
   grid-column-start: editor-col span 2;
   grid-row-start: attachment-row;
   display: flex;
   flex-direction: row;
   color: var(--text-light-color-1);
}

.attachment .file-name {
   width: 100%;
   margin: .25rem 1rem 0 1rem;
}

#chat-text-footer .attachment i {
   margin: auto 0;
   font-size: 1.25rem;
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    Tile Button
------------------------------------------------------------------------------------------------------------------------------
*/
.tile-buttons {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   list-style: none;
   cursor: pointer;
}

.tile-button {
   width: 5rem;
   height: 5rem;
   box-shadow: 3px 3px 5px var(--add-50-black);
   border-radius: var(--corner-radius);
   background-color: var(--accent-1);
   color: var(--text-light-color-1);
   display: flex;
   flex-direction: column;
   margin: .25rem;
}

   .tile-button i {
      font-size: 1.5rem;
      align-self: center;
      margin: .5rem .25rem .25rem .25rem;
   }

   .tile-button span {
      text-align: center;
      font-size: .75rem;
      margin: auto .25rem;
   }

.disable-controls .tile-button {
   background-color: var(--bg-disabled);
   color: var(--text-disabled-color);
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    Form
------------------------------------------------------------------------------------------------------------------------------
*/

.form {
   padding: .25rem 2.5vw;
   display: flex;
   flex-direction: column;
   font-size: .85rem;
   width: 100%;
   overflow-y: auto;
}

   .form .pair {
      margin: .25rem 0;
      display: flex;
      flex-direction: row;
   }

      .form .pair > :first-child {
         width: 6rem;
         align-self: center;
      }

      .form .pair > :nth-child(2) {
         flex-grow: 1;
         max-width: calc(100vw - 8rem);
         font-size: .85rem;
      }

   .form .trio {
      margin: .25rem 0;
      display: flex;
      flex-direction: row;
      justify-items: center;
      align-items: center;
   }

      .form .trio > :first-child {
         width: 6rem;
         align-self: center;
      }

      .form .trio > :nth-child(2) {
         flex-grow: 1;
         width: calc(100vw - 9.5rem);
         font-size: .85rem;
      }

      .form .trio > :nth-child(3) {
         width: 1.5rem;
         margin: auto .25rem;
      }

   .form .results-list {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
   }

      .form .results-list li {
         display: flex;
         flex-direction: row;
         width: 100%;
         padding: .25rem 0;
         align-items: flex-start;
         align-items: center;
      }

         .form .results-list li div {
            margin: 0 .5rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
         }

      .form .results-list .delete-button {
         width: 2rem;
      }

      .form .results-list li:nth-child(even) {
         background-color: var(--add-50-white);
      }

      .form .results-list li:nth-child(odd) {
         background-color: var(--add-10-black);
      }

      .form .results-list li div:last-child {
         text-align: right;
      }

.dialog-form {
   height: calc(100vh - var(--header-height));
}

.ease-in {
   animation: fade-in .25s ease;
}

@keyframes fade-in {
   from {
      width: 0;
   }

   to {
      width: 5rem;
   }
}

@keyframes move-left {
   from {
      left: 0;
   }

   to {
      left: -6rem;
   }
}

@keyframes move-right {
   from {
      left: 0;
   }

   to {
      left: 6rem;
   }
}

.schedule-header {
   display: grid;
   grid-template-columns: auto 1fr auto;
   background-color: var(--bg-light-2);
   align-items: center;
   height: 2.5rem;
}

.schedule-header i {
   margin: 0 .25rem;
}

   .schedule-header h6 {
      margin: auto;
      padding: 0;
   }

   .appt-header {
      display: flex;
      flex-direction: row;
      background-color: var(--accent-3);
      margin: .15rem 0;
   }

.appt-list {
   display: flex;
   flex-direction: column;
   margin: .35rem;
   list-style: none;
   padding: 0;
   font-size: .85rem;
}

   .appt-list li {
      display: flex;
      flex-direction: row;
      margin: .25rem 0;
   }

      .appt-list li:nth-child(odd) {
         background-color: var(--add-10-black);
      }

   .appt-list .appt-time {
      width: 20%;
      align-self: center;
      text-align: center;
      font-weight: bold;
   }

   .appt-list .appt-name-loc, .appt-result-provider {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      width: 40%;
      align-self: center;
   }
     

      .appt-list .appt-name-loc div, .appt-result-provider div {
         margin: .1rem;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
      }

      .appt-list .appt-name-loc :first-child, .appt-result-provider :first-child {
         border-bottom: 1px solid var(--accent-alt-dark);
      }

   .appt-list .appt-result-provider div, .appt-list .appt-name-loc div{
      min-height: 1.3rem;
   }


.rz-data-row td {
   padding: .2rem;
}

.report-archive {
   display: grid;
   grid-template-rows: 1.5rem 1.5rem;
   grid-template-columns: 1fr 1fr;
   min-width: calc(100vw - 4.5rem);
}

   .report-archive .subject {
      grid-row: 1;
      grid-column: 1 / span 2;
      font-weight: bold;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
   }

   .report-archive .name {
      grid-row: 2;
      grid-column: 1;
      font-size: .75rem;
   }

   .report-archive .date {
      grid-row: 2;
      grid-column: 2;
      font-size: .75rem;
      text-align: right;
   }



/*
------------------------------------------------------------------------------------------------------------------------------
    dialogs
------------------------------------------------------------------------------------------------------------------------------
*/


.lookup-values {
   height: 20rem;
}

   .lookup-values .name {
      font-weight: bold;
      min-width: 40vw;
   }

   .lookup-values .description {
      font-weight: bold;
      min-width: 40vw;
   }

.dialog-button {
   width: 6rem;
   margin: .25rem;
}

.sippets {
   list-style: none;
   margin: 0;
   padding: 0;
}

.sippets li {
   padding: .35rem;
   display: flex;
   flex-direction: column;
   cursor: pointer;
}

   .sippets li:nth-child(even) {
      background-color: var(--bg-light-1-2);
   }

   .sippets li:hover {
      background-color: var(--bg-dark-3);
      color: var(--text-light-color-1);
   }

   .snippet-wrap {
      overflow-y: scroll;
      scrollbar-width: thin;
      padding: .25rem 2.5vw;
      height: 100%;
   }

.sippets .snippet-title {
   font-weight: bold;
   font-size: 1.1rem;
}
.sippets .snippet-description {
   font-size: .9rem;
}

.snippet-image {
   background-color: var(--bg-dark-3);
   border-radius: var(--corner-radius);
   padding: .35rem;
   margin: .35rem;
   margin-right: auto;
}

   .snippet-image img {
      max-width: 20vw;
      border-radius: var(--corner-radius);
   }

.message-editor {
   min-height: 7rem;
   width: calc(100vw - 2rem);
}

.message-preview {
   height: calc(100vh - 9rem);
}

.preview-footer {
   flex-grow: 1;
   margin: 0 1rem;
   align-self: center;
   font-size: .85rem;
}

   /*
------------------------------------------------------------------------------------------------------------------------------
    loading indicator
------------------------------------------------------------------------------------------------------------------------------
*/
   .loading {
      background: var(--bg-light-1);
      width: 100vw;
      height: 100vh;
      padding: calc(30vh - 2rem) 0 0 calc(50vw - 2rem);
      cursor: wait;
   }

   .loading img {
      margin-left: -1rem;
      padding: 1.5rem 0;
      width: 6rem;
   }

   .loading .sk-chase-dot:before {
      background-color: var(--accent-1) !important;
   }

.loading-inline {
   display: block;
   width: 4rem;
   height: 4rem;
   margin: 0.5rem auto;
}

.sk-chase {
   width: 4rem;
   height: 4rem;
   position: relative;
   animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

   .sk-chase-dot:before {
      content: '';
      display: block;
      width: 25%;
      height: 25%;
      background-color: #fff;
      border-radius: 100%;
      animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
   }

   .sk-chase-dot:nth-child(1) {
      animation-delay: -1.1s;
   }

   .sk-chase-dot:nth-child(2) {
      animation-delay: -1.0s;
   }

   .sk-chase-dot:nth-child(3) {
      animation-delay: -0.9s;
   }

   .sk-chase-dot:nth-child(4) {
      animation-delay: -0.8s;
   }

   .sk-chase-dot:nth-child(5) {
      animation-delay: -0.7s;
   }

   .sk-chase-dot:nth-child(6) {
      animation-delay: -0.6s;
   }

   .sk-chase-dot:nth-child(1):before {
      animation-delay: -1.1s;
   }

   .sk-chase-dot:nth-child(2):before {
      animation-delay: -1.0s;
   }

   .sk-chase-dot:nth-child(3):before {
      animation-delay: -0.9s;
   }

   .sk-chase-dot:nth-child(4):before {
      animation-delay: -0.8s;
   }

   .sk-chase-dot:nth-child(5):before {
      animation-delay: -0.7s;
   }

   .sk-chase-dot:nth-child(6):before {
      animation-delay: -0.6s;
   }

@keyframes sk-chase {
   100% {
      transform: rotate(360deg);
   }
}

@keyframes sk-chase-dot {
   80%, 100% {
      transform: rotate(360deg);
   }
}

@keyframes sk-chase-dot-before {
   50% {
      transform: scale(0.4);
   }

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

/*
------------------------------------------------------------------------------------------------------------------------------
    dark mode!
------------------------------------------------------------------------------------------------------------------------------
*/

.dark-mode {
   --bg-light-1: #1E1E1E;
   --bg-light-1-2: #232323;
   --bg-light-2: #2E2E2E;
   --bg-light-3: #3E3E3E;
   --text-dark-color-1: #e0e0e0;
   --text-dark-color-2: #d0d0d0;
   --text-dark-color-3: #c0c0c0;
   --accent-1: #8BC3E2;
   --accent-2: #1988C6;
   --accent-2-highlight: #4d9bd5;
   --accent-3: #13688C;
   --accent-alt-dark: #21280A;
   --accent-alt-light: #233A15;
   --rz-primary: var(--main-dark-color);
   --rz-primary-light: var(--accent-3);
   --rz-primary-lighter: rgba(139, 195, 226, 0.12);
   --rz-primary-dark: var(--accent-2);
   --rz-primary-darker: var(--accent-1);
   --rz-secondary: var(--accent-alt-dark);
   --rz-secondary-light: var(--accent-alt-light);
   --rz-secondary-lighter: rgba(180, 221, 55, 0.12);
   --rz-secondary-dark: #426B27;
   --rz-secondary-darker: #5A9336;
   --rz-splitter-bar-color: var(--rz-text-color);
   --rz-splitter-bar-color-active: var(--rz-text-contrast-color);
   --rz-splitter-bar-background-color: var(--rz-base-200);
   --rz-splitter-bar-background-color-active: var(--rz-primary);
   --rz-text-title-color: var(--rz-base-50);
   --rz-text-color: var(--rz-base-50);
   --rz-text-secondary-color: var(--rz-base-100);
   --rz-text-tertiary-color: var(--rz-base-200);
   --rz-text-disabled-color: var(--rz-base-300);
   --rz-text-contrast-color: var(--rz-white);
   --rz-link-color: var(--rz-secondary);
   --rz-link-hover-color: var(--rz-secondary-dark);
   --rz-base-background-color: var(--rz-base-800);
   --rz-border-white: var(--rz-border-width) solid var(--rz-white);
   --rz-border-black: var(--rz-border-width) solid var(--rz-black);
   --rz-border-base-50: var(--rz-border-width) solid var(--rz-base-50);
   --rz-border-base-100: var(--rz-border-width) solid var(--rz-base-100);
   --rz-border-base-200: var(--rz-border-width) solid var(--rz-base-200);
   --rz-border-base-300: var(--rz-border-width) solid var(--rz-base-300);
   --rz-border-base-400: var(--rz-border-width) solid var(--rz-base-400);
   --rz-border-base-500: var(--rz-border-width) solid var(--rz-base-500);
   --rz-border-base-600: var(--rz-border-width) solid var(--rz-base-600);
   --rz-border-base-700: var(--rz-border-width) solid var(--rz-base-700);
   --rz-border-base-800: var(--rz-border-width) solid var(--rz-base-800);
   --rz-border-base-900: var(--rz-border-width) solid var(--rz-base-900);
   --rz-border-primary: var(--rz-border-width) solid var(--rz-primary);
   --rz-border-primary-light: var(--rz-border-width) solid var(--rz-primary-light);
   --rz-border-primary-lighter: var(--rz-border-width) solid var(--rz-primary-lighter);
   --rz-border-primary-dark: var(--rz-border-width) solid var(--rz-primary-dark);
   --rz-border-primary-darker: var(--rz-border-width) solid var(--rz-primary-darker);
   --rz-border-secondary: var(--rz-border-width) solid var(--rz-secondary);
   --rz-border-secondary-light: var(--rz-border-width) solid var(--rz-secondary-light);
   --rz-border-secondary-lighter: var(--rz-border-width) solid var(--rz-secondary-lighter);
   --rz-border-secondary-dark: var(--rz-border-width) solid var(--rz-secondary-dark);
   --rz-border-secondary-darker: var(--rz-border-width) solid var(--rz-secondary-darker);
   --rz-border-info: var(--rz-border-width) solid var(--rz-info);
   --rz-border-info-light: var(--rz-border-width) solid var(--rz-info-light);
   --rz-border-info-lighter: var(--rz-border-width) solid var(--rz-info-lighter);
   --rz-border-info-dark: var(--rz-border-width) solid var(--rz-info-dark);
   --rz-border-info-darker: var(--rz-border-width) solid var(--rz-info-darker);
   --rz-border-success: var(--rz-border-width) solid var(--rz-success);
   --rz-border-success-light: var(--rz-border-width) solid var(--rz-success-light);
   --rz-border-success-lighter: var(--rz-border-width) solid var(--rz-success-lighter);
   --rz-border-success-dark: var(--rz-border-width) solid var(--rz-success-dark);
   --rz-border-success-darker: var(--rz-border-width) solid var(--rz-success-darker);
   --rz-border-warning: var(--rz-border-width) solid var(--rz-warning);
   --rz-border-warning-light: var(--rz-border-width) solid var(--rz-warning-light);
   --rz-border-warning-lighter: var(--rz-border-width) solid var(--rz-warning-lighter);
   --rz-border-warning-dark: var(--rz-border-width) solid var(--rz-warning-dark);
   --rz-border-warning-darker: var(--rz-border-width) solid var(--rz-warning-darker);
   --rz-border-danger: var(--rz-border-width) solid var(--rz-danger);
   --rz-border-danger-light: var(--rz-border-width) solid var(--rz-danger-light);
   --rz-border-danger-lighter: var(--rz-border-width) solid var(--rz-danger-lighter);
   --rz-border-danger-dark: var(--rz-border-width) solid var(--rz-danger-dark);
   --rz-border-danger-darker: var(--rz-border-width) solid var(--rz-danger-darker);
   --rz-border-series-1: var(--rz-border-width) solid var(--rz-series-1);
   --rz-border-series-2: var(--rz-border-width) solid var(--rz-series-2);
   --rz-border-series-3: var(--rz-border-width) solid var(--rz-series-3);
   --rz-border-series-4: var(--rz-border-width) solid var(--rz-series-4);
   --rz-border-series-5: var(--rz-border-width) solid var(--rz-series-5);
   --rz-border-series-6: var(--rz-border-width) solid var(--rz-series-6);
   --rz-border-series-7: var(--rz-border-width) solid var(--rz-series-7);
   --rz-border-series-8: var(--rz-border-width) solid var(--rz-series-8);
   --rz-border-normal: var(--rz-border-width) solid var(--rz-base-300);
   --rz-border-hover: var(--rz-border-width) solid var(--rz-base-100);
   --rz-border-focus: var(--rz-border-width) solid var(--rz-primary);
   --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-500);
   --rz-shadow-1: 0px 1px 1px rgba(0,0,0,0.14),0px 2px 1px rgba(0,0,0,0.12),0px 1px 3px rgba(0,0,0,0.14);
   --rz-shadow-2: 0px 2px 2px rgba(0,0,0,0.14),0px 3px 1px rgba(0,0,0,0.12),0px 1px 5px rgba(0,0,0,0.14);
   --rz-shadow-3: 0px 3px 4px rgba(0,0,0,0.14),0px 3px 3px rgba(0,0,0,0.12),0px 1px 8px rgba(0,0,0,0.14);
   --rz-shadow-4: 0px 4px 5px rgba(0,0,0,0.14),0px 1px 10px rgba(0,0,0,0.12),0px 2px 4px rgba(0,0,0,0.14);
   --rz-shadow-5: 0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12),0px 3px 5px rgba(0,0,0,0.14);
   --rz-shadow-6: 0px 8px 10px rgba(0,0,0,0.14),0px 3px 14px rgba(0,0,0,0.12),0px 5px 5px rgba(0,0,0,0.14);
   --rz-shadow-7: 0px 9px 12px rgba(0,0,0,0.14),0px 3px 16px rgba(0,0,0,0.12),0px 5px 6px rgba(0,0,0,0.14);
   --rz-shadow-8: 0px 12px 17px rgba(0,0,0,0.14),0px 5px 22px rgba(0,0,0,0.12),0px 7px 8px rgba(0,0,0,0.14);
   --rz-shadow-9: 0px 16px 24px rgba(0,0,0,0.14),0px 6px 30px rgba(0,0,0,0.12),0px 8px 10px rgba(0,0,0,0.14);
   --rz-shadow-10: 0px 24px 38px rgba(0,0,0,0.14),0px 9px 46px rgba(0,0,0,0.12),0px 11px 15px rgba(0,0,0,0.14);
   --rz-text-display-h1-color: var(--rz-text-title-color);
   --rz-text-display-h2-color: var(--rz-text-title-color);
   --rz-text-display-h3-color: var(--rz-text-title-color);
   --rz-text-display-h4-color: var(--rz-text-title-color);
   --rz-text-display-h5-color: var(--rz-text-title-color);
   --rz-text-display-h6-color: var(--rz-text-title-color);
   --rz-text-h1-color: var(--rz-text-title-color);
   --rz-text-h2-color: var(--rz-text-title-color);
   --rz-text-h3-color: var(--rz-text-title-color);
   --rz-text-h4-color: var(--rz-text-title-color);
   --rz-text-h5-color: var(--rz-text-title-color);
   --rz-text-h6-color: var(--rz-text-title-color);
   --rz-text-subtitle1-color: var(--rz-text-title-color);
   --rz-text-subtitle2-color: var(--rz-text-title-color);
   --rz-text-body1-color: var(--rz-text-title-color);
   --rz-text-body2-color: var(--rz-text-title-color);
   --rz-text-button-color: var(--rz-text-title-color);
   --rz-text-caption-color: var(--rz-text-title-color);
   --rz-text-overline-color: var(--rz-text-title-color);
   --rz-button-base-background-color: var(--rz-primary);
   --rz-button-base-color: var(--rz-text-contrast-color);
   --rz-button-hover-shadow: var(--rz-shadow-3);
   --rz-button-active-shadow: var(--rz-shadow-6);
   --rz-button-border-radius: var(--rz-border-radius);
   --rz-button-shadow: var(--rz-shadow-1);
   --rz-button-transition: var(--rz-transition-all);
   --rz-grid-cell-border: var(--rz-border-base-600);
   --rz-grid-bottom-cell-border: var(--rz-border-base-600);
   --rz-grid-cell-color: var(--rz-text-color);
   --rz-grid-cell-line-height: var(--rz-body-line-height);
   --rz-grid-hover-background-color: var(--rz-base-600);
   --rz-grid-hover-color: var(--rz-white);
   --rz-grid-selected-background-color: var(--rz-primary-lighter);
   --rz-grid-selected-color: var(--rz-primary);
   --rz-grid-stripe-background-color: var(--rz-base-900);
   --rz-grid-toolbar-background-color: var(--rz-base-background-color);
   --rz-grid-header-cell-border-bottom: var(--rz-border-base-600);
   --rz-grid-header-background-color: var(--rz-base-background-color);
   --rz-grid-header-color: var(--rz-text-title-color);
   --rz-grid-header-sorted-background-color: var(--rz-base-600);
   --rz-grid-foot-cell-color: var(--rz-text-color);
   --rz-grid-foot-background-color: var(--rz-base-600);
   --rz-grid-filter-background-color: var(--rz-base-background-color);
   --rz-grid-filter-icon-width: var(--rz-icon-size);
   --rz-grid-filter-icon-height: var(--rz-icon-size);
   --rz-grid-filter-color: var(--rz-text-disabled-color);
   --rz-grid-filter-focus-color: var(--rz-secondary);
   --rz-grid-filter-buttons-background-color: var(--rz-base-background-color);
   --rz-grid-clear-filter-button-background-color: var(--rz-base-background-color);
   --rz-grid-clear-filter-button-color: var(--rz-text-color);
   --rz-grid-apply-filter-button-background-color: var(--rz-base-background-color);
   --rz-grid-apply-filter-button-color: var(--rz-primary);
   --rz-grid-header-filter-icon-hover-color: var(--rz-text-title-color);
   --rz-grid-header-filter-icon-active-color: var(--rz-primary);
   --rz-grid-border: var(--rz-border-base-600);
   --rz-grid-sort-icon-color: var(--rz-text-disabled-color);
   --rz-grid-background-color: var(--rz-base-background-color);
   --rz-grid-column-resizer-helper-background-color: var(--rz-secondary);
   --rz-grid-detail-template-background-color: var(--rz-base-900);
   --rz-grid-loading-indicator-background-color: rgba(var(--rz-base-600), 0.5);
   --rz-grid-frozen-cell-border: var(--rz-border-base-600);
   --rz-grid-frozen-cell-background-color: var(--rz-base-background-color);
   --rz-grid-state-transition: var(--rz-transition-all);
   --rz-grid-group-header-item-background-color: var(--rz-base-600);
   --rz-grid-group-header-item-border: var(--rz-border-base-600);
   --rz-column-drag-handle-color: var(--rz-text-disabled-color);
   --rz-column-drag-handle-hover-color: var(--rz-text-title-color);
   --rz-column-draggable-shadow: var(--rz-shadow-4);
   --rz-dropdown-trigger-icon-width: var(--rz-icon-size);
   --rz-dropdown-trigger-icon-height: var(--rz-icon-size);
   --rz-dropdown-item-font-size: var(--rz-input-font-size);
   --rz-dropdown-item-hover-background-color: var(--rz-base-400);
   --rz-dropdown-item-selected-background-color: var(--rz-primary-lighter);
   --rz-dropdown-item-hover-color: var(--rz-white);
   --rz-dropdown-item-selected-color: var(--rz-primary);
   --rz-dropdown-item-selected-hover-background-color: var(--rz-primary-lighter);
   --rz-dropdown-item-selected-hover-color: var(--rz-primary);
   --rz-dropdown-open-background-color: var(--rz-base-600);
   --rz-dropdown-open-border: 2px solid var(--rz-primary);
   --rz-dropdown-panel-shadow: var(--rz-shadow-4);
   --rz-datepicker-trigger-icon-width: var(--rz-icon-size);
   --rz-datepicker-trigger-icon-height: var(--rz-icon-size);
   --rz-datepicker-trigger-icon-color: var(--rz-text-secondary-color);
   --rz-datepicker-trigger-icon-hover-color: var(--rz-text-title-color);
   --rz-datepicker-panel-background-color: var(--rz-base-background-color);
   --rz-datepicker-panel-shadow: var(--rz-shadow-4);
   --rz-datepicker-header-background-color: var(--rz-base-background-color);
   --rz-datepicker-header-color: var(--rz-text-secondary-color);
   --rz-datepicker-calendar-header-color: var(--rz-text-tertiary-color);
   --rz-datepicker-calendar-color: var(--rz-text-color);
   --rz-datepicker-calendar-hover-color: var(--rz-white);
   --rz-datepicker-calendar-hover-background-color: var(--rz-base-600);
   --rz-datepicker-calendar-selected-color: var(--rz-text-contrast-color);
   --rz-datepicker-calendar-selected-background-color: var(--rz-secondary);
   --rz-datepicker-calendar-selected-hover-color: var(--rz-text-contrast-color);
   --rz-datepicker-calendar-selected-hover-background-color: var(--rz-secondary-dark);
   --rz-timepicker-background-color: var(--rz-base-background-color);
   --rz-timepicker-color: var(--rz-text-color);
   --rz-timepicker-separator-color: var(--rz-text-color);
   --rz-timepicker-button-background-color: var(--rz-base-700);
   --rz-timepicker-button-color: var(--rz-text-color);
   --rz-timepicker-border: var(--rz-border-base-600);
   --rz-input-disabled-background-color: transparent;
   --rz-base-background-color: var(--bg-light-1);
}

.dark-mode textarea {
   background-color: var(--bg-light-1-2);
   color: var(--text-light-color-1);
}

.dark-mode .tile-button {
   background-color: var(--accent-3);
}

   .dark-mode #chat-texts .message a {
      color: #b4dd37;
   }

   .dark-mode .form .results-list li:nth-child(even) {
      background-color: var(--bg-light-1-2);
   }

   .dark-mode span.rz-calendar input,
   .dark-mode .rz-textbox,
   .dark-mode .rz-dropdown,
   .dark-mode .rz-data-grid-data {
      background-color: var(--bg-light-2);
      color: var(--text-light-color-1);
   }

      .dark-mode .rz-textbox.rz-state-disabled {
         background-color: var(--bg-light-3);
         color: var(--text-light-color-2);
      }

   .dark-mode .rz-datatable {
      border: none;
   }

   .dark-mode .rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(even) > td {
      background-color: var(--bg-light-1-2);
      border: none;
   }

   .dark-mode .rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td {
      background-color: var(--bg-light-1);
      border: none;
   }

   .dark-mode .rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(even) > td:hover {
      background-color: var(--bg-light-2);
   }

   .dark-mode .rz-grid-table-striped tbody tr:not(.rz-expanded-row-content):nth-child(odd) > td:hover {
      background-color: var(--bg-light-1-2);
   }

   .dark-mode .rz-switch.rz-switch-checked .rz-switch-circle {
      background-color: var(--text-light-color-1);
   }

      .dark-mode .rz-switch.rz-switch-checked .rz-switch-circle::before {
         background-color: var(--accent-2);
      }

   .dark-mode .rz-dialog {
      background-color: var(--bg-light-1);
   }

   .dark-mode .rz-button.rz-light {
      background-color: var(--bg-dark-3);
   }

   .dark-mode .form .trio > :nth-child(2) {
      background-color: transparent;
   }