/* 
------------------------------------------------------------------------------------------------------------------------------
   Desktop Web App 
   Globals / General
------------------------------------------------------------------------------------------------------------------------------
*/

:root {
    --main-dark-color: #003F59;
    --secondary-dark-blue: #0D2633;
    --accent-1: #13688C;
    --accent-2: #4d9bd5;
    --accent-2-highlight: #1988C6;
    --accent-3: #8BC3E2;
    --accent-4: #B8D2E0;
    --accent-5: #D2D9DD;
    --accent-alt-dark: #70BB44;
    --accent-alt-light: #b4dd37;
    --accent-alt-light-50: rgba(180, 221, 55, .5);
    --warning-color-light: #ffffe0;
    --warning-color-dark: #EDD01C;
    --error-color: #A00000;
    --green-color: #017201;
    --bg-light-0: #ffffff;
    --bg-light-0-5: #f9f9f9;
    --bg-light-1: #efefef;
    --bg-light-2: #cfcfcf;
    --bg-light-3: #afafaf;
    --bg-read-only-color: #cfcfcf;
    --bg-disabled: #c0c0c0;
    --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;
    --text-gray-color-1: #575757;
    --text-black-colo-1: #121212;
    --add-10-white: rgba(255, 255, 255, .1);
    --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;
    --chart-color-1: #2D86A7;
    --chart-color-2: #F79D51;
    --chart-color-3: #6C4F7D;
    --chart-color-4: #A4D761;
    --chart-color-5: #C1432B;
    --tile-color-default: #13688C; /*Accent 1*/
    --tile-color-chat: #4d233d; /*Pickled Beet*/
    --tile-color-status: #3b2820; /*Tree House*/
    --tile-color-reporting: #262b2f; /*Blue Charcoal*/
    --tile-color-people: #c14a09; /*Brick Orange*/
    --tile-color-designer: #0f3b57; /*Blue Opal*/
    --tile-color-website: #1b1811; /*Black Chocolate*/
    --tile-color-settings: #220a0a; /*Red Ink*/
    --tile-color-billing: #062e03; /*Very Dark Green*/
    --color-calm-grey-100: #F5F5F8;
}

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

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

*::-webkit-scrollbar {
   width: .5rem;
   height: .5rem;
}

*::-webkit-scrollbar-track {
   background: var(--add-25-black);
}

*::-webkit-scrollbar-thumb {
   background-color: var(--add-25-white);
   border: 1px solid var(--add-25-black);
   border-radius: var(--corner-radius);
}

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 {
   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 {
   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-tb-small {
   margin-top: .15rem !important;
   margin-bottom: .15rem !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-small {
   margin-top: .25rem !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;
}

.margin-all-small {
   margin: .25rem !important;
}

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

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

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

.padding-all-small {
   padding: .25rem !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;
}

.width-100-percent {
   width: 100% !important;
}

.btn.btn-link {
    color: var(--accent-1) !important;
    text-decoration: none !important;
}

    .btn.btn-link:hover {
        color: var(--accent-2) !important;
        text-decoration: none !important;
    }

.w-fit-content {
    width: fit-content;
}

.text-gray-1 {
    color: var(--text-gray-color-1);
}

.text-black-1 {
    color: var(--text-black-color-1);
}

.text-sm {
    font-size: 12px;
}

.visible {
   visibility: visible !important;
   /*display: initial !important;*/
}

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

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

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

.disabled-toolbar-button {
   pointer-events: none;
   color: var(--add-25-white);
}

   .disabled-toolbar-button i {
      color: var(--add-25-white) !important;
   }

   .disabled-toolbar-button label {
      color: var(--add-25-white) !important;
   }

input:read-only, textarea:read-only {
   background-color: var(--bg-read-only-color);
   /*border: 1px solid var(--text-dark-color-3);*/
}

.k-numerictextbox.k-input.k-disabled {
   background-color: var(--bg-read-only-color);
}

.border-1px {
   border: 1px solid var(--accent-2);
   border-radius: 5px;
   padding: 5px;
}

.font-bold {
   font-weight: bold;
}

.font-normal {
   font-weight: normal;
}

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

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

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

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

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

.a-button {
   background-color: white;
   padding: 0.43rem;
   border: 1px solid var(--accent-1);
   border-radius: var(--corner-radius);
   color: var(--text-dark-color-1);
}

   .a-button:hover {
      background-color: #ebebeb;
      color: var(--text-dark-color-1);
   }

/* 
------------------------------------------------------------------------------------------------------------------------------
    login
------------------------------------------------------------------------------------------------------------------------------
*/
   .login {
      background: var(--bg-light-1);
      height: 100vh;
      width: 100vw;
      color: var(--text-dark-color-1);
      font-size: .85rem;
   }

.login-panels {
   display: grid;
   grid-template-columns: [margin-left] 1fr [addl-options] 400px [login-panel] 400px [margin-right] 1fr;
   margin-top: 5rem;
}

.login-addl-options-panel {
   grid-column-start: addl-options;
   background-image: url("/img/AoCLoginAddlOptions.webp");
   background-size: cover;
   width: 400px;
   box-shadow: 3px 3px 5px var(--add-50-black);
   color: white;
   border-radius: var(--corner-radius) 0 0 var(--corner-radius);
}

   .login-addl-options-panel h2 {
      text-align: center;
      margin: 2rem 0;
   }

   .login-addl-options-panel li {
      margin: 2rem 0;
      font-size: 1.1rem;
      width: 350px;
      font-weight: lighter;
   }

   .login-addl-options-panel a {
      color: var(--text-light-color-2);
   }

      .login-addl-options-panel a:hover {
         color: var(--text-light-color-3);
      }

.login-panel {
   grid-column-start: login-panel;
   background-color: white;
   box-shadow: 3px 3px 5px var(--add-50-black);
   display: flex;
   flex-direction: column;
   min-height: 400px;
   border-radius: 0 var(--corner-radius) var(--corner-radius) 0;
}

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

   .login-panel input {
      width: 300px;
      align-self: center;
      padding: .5rem 0;
   }

   .login-panel span {
      width: 300px;
      align-self: center;
      /*margin: .5rem 0;*/
   }

   .login-panel label {
      width: 300px;
      align-self: center;
      margin: .5rem 0;
   }

.login-button {
   display: grid;
   grid-template-columns: 1fr 175px 175px 1fr;
   margin: 1rem 0;
}

   .login-button a {
      grid-column-start: 2;
      margin: 0.35rem 0;
      font-size: .9rem;
      font-weight: bold;
   }

   .login-button button {
      grid-column-start: 3;
      width: 7rem;
      place-self: end;
   }

.login-error {
   flex: 1;
   color: var(--error-color);
   font-weight: bold;
   align-self: center;
   margin: 1rem;
   max-width: 300px;
}

.tos-checkbox {
   display: flex;
   flex-direction: row;
   align-self: center;
   margin: 1rem 0 0 0;
   width: 300px;
}

   .tos-checkbox a {
      margin: 0;
   }

   .tos-checkbox #tos-checkbox {
      width: 18px;
      margin: 0 13px 0 0;
      height: 18px;
   }

.login-links {
   grid-column-start: addl-options;
   grid-column-end: 4;
   display: flex;
   flex-direction: row;
   margin: 2rem 0;
}

   .login-links a {
      width: 200px;
      height: 67px;
      background-color: var(--accent-2);
      margin: 0 34px;
      box-shadow: 3px 3px 5px var(--add-50-black);
      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: 1rem;
         text-align: center;
         font-weight: 500;
         margin: 0 1rem;
      }

.login-logo-end {
   grid-column-start: addl-options;
   grid-column-end: 4;
   margin: 3rem auto;
}

   .login-logo-end img {
      width: 200px;
      width: 100%;
   }

.login-panel h5 {
   align-self: center;
}

@media (max-width: 801px) {
   .login-panels {
      grid-template-columns: [margin-left] 1fr [addl-options] 0 [login-panel] 400px [margin-right] 1fr;
   }

   .login-addl-options-panel {
      display: none;
   }

   .login-links a {
      margin: 0 5px;
   }
}


/* 
------------------------------------------------------------------------------------------------------------------------------
    main / menus
------------------------------------------------------------------------------------------------------------------------------
*/

.main {
   display: grid;
   grid-template-rows: [header-row] auto [content-row] 1fr;
   /*   background-color: var(--bg-light-1);
   color: var(--text-dark-color-1);*/
}

    .main .header {
        grid-row-start: header-row;
        display: grid;
        grid-template-columns: [nav-col] 3rem [logo-col] auto [profile-col] 1fr [tools-col] auto [avatar-col] auto;
        background: var(--secondary-dark-blue);
        color: var(--text-light-color-1);
        height: 3rem;
        padding: 0 0.5rem 0 0;
    }

   .main .content {
      grid-row-start: content-row;
      overflow-y: auto;
   }

.header .navmenu {
   grid-column-start: nav-col;
}

.header .logo {
   grid-column-start: logo-col;
}

.header .profile {
   grid-column-start: profile-col;
   align-self: center;
   margin-left: 1rem;
   line-height: normal;
}

.logo img {
   margin-left: .5rem;
   margin-top: .5rem;
   height: 32px;
}

.header .tools {
   grid-column-start: tools-col;
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.header .tools .tools-separator {
    width: 1px;
}
    .header .tools .tool-button {
      display: flex;
   }

    .header .tools .tool-button.knowledge-base {
        cursor: pointer;
        gap: 8px;
    }
    .header .tools .tool-button .icon-button {
        min-width: 2.5rem;
        padding: .35rem .15rem;
        text-align: center;
        border-radius: var(--corner-radius);
        align-self: center;
    }

   .header .tools .tool-button-has-notifications {
      background-color: var(--accent-alt-light);
      color: var(--text-dark-color-1);
   }

      .header .tools .tool-button-has-notifications:hover {
         background-color: var(--accent-alt-dark);
      }


.header .avatar {
    grid-column-start: avatar-col;
    align-self: center;
    justify-content: center;
}

    .header .avatar .profile-dropdown .telerik-avatar-wrapper {
        background-color: #2E90CC;
        cursor: pointer;
    }

        .header .avatar .profile-dropdown .telerik-progressbar-wrapper.k-progressbar {
            background-color: #EBEBEB !important; 
        }

    .header .avatar .profile-dropdown .telerik-progressbar-wrapper.k-progressbar .k-selected{
        border-radius: 10px;
    }

    .header .avatar .profile-dropdown .profile-box {
        z-index: 999 !important;
        font-size: 12px;
        font-family: 'Rethink Sans', sans-serif;
        position: absolute;
        right: 1.5rem;
        top: 3rem;
        min-height: 20.25rem;
        width: 20.625rem;
        background: var(--color-calm-grey-100);
    }
        .header .avatar .profile-dropdown .profile-box .account-overview {
            gap: 0.25rem
        }

        .header .avatar .profile-dropdown .profile-box .subscription {
            gap: 0.35rem
        }

            .header .avatar .profile-dropdown .profile-box .subscription .telerik-progressbar-wrapper {
                height: 8px;
            }

.header .avatar .profile-dropdown .profile-box .title {
    letter-spacing: 2px;
    font-weight: bold;
    font-family: var(--kendo-font-family);
}


    .logout span {
        margin: 0 .2rem;
        font-size: .8rem;
    }

@keyframes nav-slide-in {
   from {
      left: -20rem;
   }

   to {
      left: 0;
   }
}

.navmenu .navitems {
   background-color: #303030;
   background-color: rgba(48,48,48,0.8);
   position: fixed;
   width: calc(100vw + 20rem);
   height: calc(100vh - 3rem);
   z-index: 99 !important;
   margin-top: .2rem;
   animation: nav-slide-in .5s ease-in-out;
}

.navitems .nav {
    background-color: #202020;
    background-color: rgba(32,32,32,0.9);
    width: 20rem;
    height: calc(100vh - 3rem);
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #404040 #202020;
}

.nav li {
    padding-left: 1rem;
    padding-right: 1rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.nav-item .nav-link {
   margin: .4rem 0;
   color: var(--text-light-color-1);
   padding: 0.5rem 1rem;
   display: block;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

   .nav-item .nav-link:hover {
      background: #252525;
      background: var(--add-10-white);
      border-radius: var(--corner-radius);
   }

   .nav-item .nav-link span {
      margin-right: 1rem;
      font-size: 1rem;
      width: 1em;
   }

.navmenu .collapse {
   display: none;
}

.navmenu .navbutton {
   font-size: 1.5rem;
   position: relative;
   text-align: center;
   padding: .5rem 0;
   cursor: pointer;
   font-weight: bold;
}

.nc-main-wrap {
   display: block;
   position: fixed;
   z-index: 99 !important;
   left: 0;
   top: 3rem;
   width: 100vw;
   height: calc(100vh - 3rem);
   overflow: hidden;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.4);
   color: var(--text-light-color-1);
}

@keyframes nc-slide-in {
   from {
      width: 0;
   }

   to {
      width: 25rem;
   }
}

.nc-main-wrap .nc-left {
   width: calc(100vw - 25rem);
   height: calc(100vh - 3rem);
   position: absolute;
}

.nc-main-wrap a {
   color: var(--accent-alt-light);
}

   .nc-main-wrap a:hover {
      color: var(--accent-alt-dark);
   }

.nc-main-wrap .nc-main {
   display: grid;
   grid-template-rows: auto 1fr auto;
   height: calc(100vh - 3rem);
   float: right;
   background-color: #202020;
   background-color: rgba(32,32,32,.9);
   width: 25rem;
   animation: nc-slide-in 1.5s ease-in-out;
}

.nc-main .nc-header {
   background-color: var(--accent-1);
   grid-row-start: 1;
   margin-bottom: .5rem;
}

.nc-header h4 {
   margin: .5rem 0 .5rem 1rem;
   padding: .25rem 0;
}

.nc-main .nc-items, .nc-main .nc-features {
   grid-row-start: 2;
   width: 25rem;
   overflow: auto;
}

.nc-main .nc-features {
   margin-left: 1rem;
   padding-right: 1rem;
   width: 23rem;
   line-height: 1.2rem;
}

.nc-items ul {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   width: 24.5rem;
   align-items: center;
   margin: 0;
   padding: 0;
}

.nc-items li {
   margin: .5rem 0;
   padding: 1rem;
   width: 22rem;
   box-shadow: 3px 3px 12px black;
   cursor: pointer;
}

   .nc-items li:hover {
      background: var(--add-10-white);
   }

.nc-item-title {
   display: grid;
   grid-template-columns: 1fr auto;
}

.nc-features .nc-item-title {
   border-bottom: 1px solid var(--accent-2);
   margin-bottom: 1rem;
}

.nc-features .nc-item-date {
   margin-top: .25rem;
}

.nc-item-title h5 {
   /* border-bottom: 1px solid; */
   grid-column-start: 1;
}

.nc-item-title i {
   grid-column-start: 2;
   padding: .5rem .75rem 0 .75rem;
   margin: -.3rem -.75rem 0 0;
}

   .nc-item-title i:hover {
      background-color: var(--text-dark-color-3);
   }


.nc-item-body {
   font-size: .9rem;
}

.nc-item-date {
   font-size: .8rem;
   font-style: italic;
   text-align: right;
}

.nc-main .nc-buttons {
   border-top: 1px solid var(--accent-1);
   grid-row-start: 3;
   display: flex;
   flex-direction: row;
   justify-content: center;
   padding: 1rem;
   background: var(--bg-dark-2);
}

.nc-buttons button {
   margin: 0 .5rem;
   color: var(--text-light-color-1);
   background-color: var(--bg-dark-1);
   background-image: none;
   border-color: var(--add-10-white);
   padding: .5rem 1rem;
}

.start-chat-button {
   width: 5rem;
   margin: .25rem 7.5rem;
}

.help-has-kb {
   font-weight: bold;
   color: var(--accent-alt-light);
}

   .help-has-kb:hover {
      color: var(--accent-alt-dark) !important;
   }

   /* 
------------------------------------------------------------------------------------------------------------------------------
    cols/grids
------------------------------------------------------------------------------------------------------------------------------
*/
   .left-col-list {
      width: 20rem;
      background: var(--bg-dark-1) !important;
   }

.left-col-list-light {
   background: var(--bg-light-1) !important;
   border: none;
   border-right: 1px solid var(--bg-dark-1);
}

.middle-col-list {
   width: 20rem;
   background: var(--bg-dark-2) !important;
}

.left-col-list-item {
   min-height: 1rem;
   display: grid;
   grid-template-columns: [left-col] 2fr [right-col] 1fr;
   grid-template-rows: [top-row] auto [bottom-row] auto;
   margin: 0;
   color: var(--text-light-color-1);
   padding: .5rem;
   cursor: pointer;
   border-bottom: 1px solid var(--add-50-gray);
}

.left-col-list-item-light {
   color: var(--text-light-dark-1);
}

.left-col-list-item-selected {
   background: var(--add-10-white);
}

.left-col-list-item .top-left {
   grid-column-start: left-col;
   grid-row-start: top-row;
   font-weight: bold;
   font-size: .9rem;
}

.left-col-list-item .top-right {
   grid-column-start: right-col;
   grid-row-start: top-row;
   text-align: right;
   padding-right: .5rem;
   font-size: .7rem;
}

.left-col-list-item .bottom {
   grid-column-start: left-col;
   grid-column-end: 3;
   grid-row-start: bottom-row;
   font-size: .8rem;
   /* overflow: hidden; */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.left-col-list-item .bottom-left {
   grid-column-start: left-col;
   grid-row-start: bottom-row;
   font-size: .8rem;
}

.left-col-list-item .right {
   grid-column-start: right-col;
   grid-row-start: top-row;
   grid-row-end: 3;
   padding-right: .5rem;
   font-size: .7rem;
   text-align: right;
   margin: auto 0;
}

.content .grid-2cols {
   display: grid;
   grid-template-columns: [left-col] 20rem [right-col] minmax(27.5rem, 1fr);
}

.content .grid-2cols-narrow {
   display: grid;
   grid-template-columns: [left-col] 15rem [right-col] minmax(27.5rem, 1fr);
}

.content .grid-3cols {
   display: grid;
   grid-template-columns: [left-col] 20rem [middle-col] 20rem [right-col] minmax(27.5rem, 1fr);
}

/*.content .grid-2cols-selected {
    display: grid;
    grid-template-columns: [left-col] 20rem [right-col] 1fr;
}*/

.content .grid-2cols-narrow-auto {
   display: grid;
   grid-template-columns: [auto-left-col] auto [right-col] minmax(27.5rem, 1fr);
}

.embedded-content .grid-2cols-narrow-auto {
   grid-template-columns: [auto-left-col] 0 [right-col] minmax(27.5rem, 1fr);
}

.left-col {
   grid-column-start: left-col;
}

.grid-2cols-narrow-auto .auto-left-col {
   grid-column-start: auto-left-col;
   width: 3rem;
   overflow: hidden;
   transition: .75s ease 1s;
}

   .grid-2cols-narrow-auto .auto-left-col:hover {
      width: 15rem;
      transition: .75s ease 1s;
   }


.middle-col {
   grid-column-start: middle-col;
   background: var(--bg-dark-2);
}

.right-col {
   grid-column-start: right-col;
}

.content .grid-2rows {
   display: grid;
   grid-template-rows: [header-row] 3rem [content-row] calc(100vh - 6rem);
}

.embedded-content .grid-2rows {
   grid-template-rows: [header-row] 3rem [content-row] calc(100vh - 3rem) !important;
}

.grid-2rows .header-row {
   grid-row-start: header-row;
   background: var(--bg-dark-1);
   text-align: center;
   color: var(--text-light-color-1);
   border-bottom: 1px solid var(--accent-2);
}

.header-row h3 {
   margin-top: .15rem;
}

.grid-2rows .toolbar-row {
   background: var(--bg-dark-3) !important;
}

.grid-2rows .content-row {
   background: var(--bg-dark-1);
   grid-row-start: content-row;
   overflow-y: auto;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
}

   .grid-2rows .content-row h4 {
      margin: 1rem 1.25rem .5rem 1.25rem;
      width: 17.5rem;
      border-bottom: 1px solid var(--accent-2);
      color: var(--text-light-color-1);
   }

.grid-2rows .content-row-light {
   background: var(--bg-light-1);
   grid-row-start: content-row;
   overflow-y: auto;
}

.grid-3rows {
   display: grid;
   grid-template-rows: [header-row] 3rem [content-row] calc(100vh - 12rem) [footer-row] 5rem;
   background: var(--bg-dark-3);
}

.no-header {
   grid-template-rows: [header-row] 0 [content-row] calc(100vh - 12rem) [footer-row] 5rem !important;
}

.grid-3rows .header-row {
   grid-row-start: header-row;
   color: var(--text-light-color-1);
   font-size: .8rem;
}

.grid-3rows .no-header {
   display: none;
}

.grid-3rows .content-row {
   grid-row-start: content-row;
   background: var(--bg-light-1);
   color: white;
   overflow-y: auto;
}

.grid-3rows .footer-row {
   grid-row-start: footer-row;
   background: var(--bg-dark-3);
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    simple-list
------------------------------------------------------------------------------------------------------------------------------
*/

.simple-list-item {
   margin: .25rem;
   padding: .5rem;
   cursor: default;
}

.simple-list-item-selected {
   background: var(--add-25-black);
}

.simple-list-item:hover {
   background: var(--add-10-black);
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    text chat
------------------------------------------------------------------------------------------------------------------------------
*/

#chat-texts {
   overflow-y: scroll;
   overflow-x: hidden;
}

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

      #chat-texts ul li {
         display: flex;
         flex-direction: row;
         margin: .75rem;
      }

         #chat-texts ul li .chat-body {
            padding: 0 1rem;
            border: 1px solid transparent;
            color: white;
            width: 75%;
            box-shadow: 3px 3px 5px var(--add-50-black);
            border-radius: 10px;
            min-height: 3rem;
            display: flex;
            flex-direction: column;
         }

            #chat-texts ul li .chat-body .chat-body-header {
               display: grid;
               grid-template-columns: auto auto 1fr auto;
               margin: .35rem 0 0 0;
            }

         #chat-texts ul li.local {
            flex-direction: row-reverse;
         }

            #chat-texts ul li.local .chat-head {
               margin-right: 0;
               margin-left: .5rem;
            }

         #chat-texts ul li audio {
            width: calc(100% - 1rem);
            height: 2.5rem;
            margin: .5rem;
         }

   #chat-texts .local {
      margin-left: 15%;
   }

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

   #chat-texts .chat-head {
      background-color: var(--bg-dark-3);
      font-size: .85rem;
      font-weight: bold;
      border-radius: 50%;
      box-shadow: 3px 3px 5px var(--add-50-black);
      height: 2.25rem;
      width: 2.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: .5rem .5rem .5rem 0;
   }

      #chat-texts .chat-head i {
         font-weight: normal;
         font-size: 1rem;
      }

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

   #chat-texts .remote .chat-body {
      margin-right: 15%;
   }

   #chat-texts .contact .chat-body {
      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);
      margin: 0 .35rem;
   }

   #chat-texts .chat-body-header .icons {
      font-size: .85rem;
   }

   #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);
         }

#chat-text-footer {
   display: grid;
   grid-template-columns: [options-col] auto [attachment-col] auto [editor-col] 1fr [actions-col] auto;
   grid-gap: .25rem;
   height: 5rem;
   padding: .5rem;
}

   #chat-text-footer .options {
      grid-column-start: options-col;
      color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      width: 4rem;
   }

   #chat-text-footer .attachment {
      grid-column-start: attachment-col;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--add-90-black);
      border-radius: var(--corner-radius);
   }

      #chat-text-footer .attachment img {
         max-height: 4rem;
         max-width: 4rem;
         height: auto;
         width: auto;
      }

      #chat-text-footer .attachment i {
         color: white;
         align-self: baseline;
         margin-left: -1rem;
         background-color: var(--bg-dark-3);
         border-radius: 2rem;
         border: 2px solid var(--bg-dark-3);
         padding: 0;
      }

   #chat-text-footer .editor {
      grid-column-start: editor-col;
   }

      #chat-text-footer .editor textarea {
         height: 4.85rem;
         width: calc(100% - 1rem);
         border-radius: var(--corner-radius);
         border: none;
         overflow: auto;
         outline: none;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
         resize: none;
      }

         #chat-text-footer .editor textarea:hover {
            outline: none;
         }

   #chat-text-footer .actions {
      grid-column-start: actions-col;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin: .25rem;
   }

.chat-grid {
   display: grid;
   grid-template-columns: 1fr 26.5rem;
   overflow: hidden;
   transition: .25s ease;
}

   .chat-grid .chat-quick-view {
      background-color: var(--bg-light-2);
      display: flex;
      flex-direction: column;
   }

.chat-quick-view .quick-view-header {
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid var(--accent-2);
   background-color: var(--bg-dark-2);
   padding: .5rem 0 0 .25rem;
   margin: 0;
   cursor: pointer;
}

   .chat-quick-view .quick-view-header h4 {
      margin-top: .35rem;
   }

   .chat-quick-view .quick-view-header i {
      height: 1rem;
      padding: .25rem;
   }

.chat-quick-view .quick-view-header-collapsed {
   background-color: var(--bg-dark-2);
}

   .chat-quick-view .quick-view-header-collapsed i {
      width: 1.25rem;
      height: 1.5rem;
      padding-top: .65rem;
      font-size: 1.25rem;
   }

.chat-quick-view .chat-contact {
   color: var(--text-dark-color-1);
   width: 100%;
   display: flex;
   flex-direction: row;
   overflow: hidden;
   overflow-y: auto;
   margin: 0;
   padding: .5rem 0;
   height: calc(100vh - 15.65rem);
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    toolbar
------------------------------------------------------------------------------------------------------------------------------
*/

.inline-toolbar {
   display: flex;
   flex-direction: row;
   cursor: pointer;
   background-color: white;
}

.header-toolbar {
   color: var(--text-light-color-1);
   display: flex;
   flex-direction: row;
   margin: .5rem 0 0 .5rem;
   cursor: pointer;
}

   .header-toolbar label {
      margin: .4rem;
      font-size: .7rem;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--text-light-color-1);
   }

   .header-toolbar .large-label {
      font-size: .75rem;
   }

   .header-toolbar .fill {
      flex-grow: 1;
   }

.tb-button {
   margin: -.2rem .2rem .2rem .2rem;
   cursor: pointer;
   display: flex;
   flex-direction: row;
   padding: .25rem;
}

.inline-toolbar .tb-button {
   margin: .2rem;
}

.tb-button:hover {
   color: var(--text-light-color-3);
   background: var(--add-10-white);
   border-radius: var(--corner-radius);
}

.tb-button:active {
   background: var(--add-25-white);
}

.tb-button i {
   font-size: 1.25rem;
   color: var(--text-light-color-1);
   margin: .25rem;
   font-weight: lighter;
   text-align: center;
}

.inline-toolbar .tb-button i {
   font-size: 1rem;
}

.inline-toolbar .tb-button label {
   font-size: .7rem;
}

.tb-button.light-button {
   color: var(--text-light-color-1);
}

.tb-button.dark-button:hover {
   background-color: var(--bg-light-2);
}

.tb-button.dark-button i {
   color: var(--text-dark-color-1);
}

.tb-button.dark-button label {
   color: var(--text-dark-color-1);
}

.tb-button.toolbar-button-selected {
   background-color: var(--add-50-black);
   border-radius: var(--corner-radius);
   border: 1px solid var(--accent-1);
}

.tb-button label {
   cursor: pointer;
   text-transform: uppercase;
   margin: auto .25rem;
}

.wide-icon i {
   width: 1.75rem;
}

.tb-file-button {
   margin: .375rem 0 0 .25rem;
   float: right;
}

.grid-tb-button {
   color: var(--text-dark-color-1) !important;
   margin: 0 .2rem !important;
}

.grid-tb-button-disabled {
   color: var(--text-disabled-color) !important;
   margin: 0 .2rem !important;
}

.message-box {
   display: flex;
   flex-direction: column;
}

   .message-box .message {
      margin: 0 0 1rem 0;
   }

   .message-box .actions {
      text-align: center;
      display: flex;
      justify-content: center;
      gap: .5rem;
   }

      .message-box .actions button {
         min-width: 4rem;
      }


.grid-toolbar-content {
   display: grid;
   grid-template-rows: [toolbar-row] 3rem [content-row] calc(100vh - 6rem);
   background: var(--bg-dark-3);
}

   .grid-toolbar-content .toolbar {
      grid-row-start: toolbar-row;
      background: var(--bg-dark-3);
   }

   .grid-toolbar-content .content {
      background: var(--bg-light-1);
      grid-row-start: content-row;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 1em;
   }

#search-box {
   position: absolute;
   width: 17rem;
   background: var(--bg-light-1);
   color: var(--text-dark-color-1);
   padding: .25rem;
   margin: 0;
   border: none;
   z-index: 90;
}

#search-reset-button {
   color: var(--text-dark-color-3);
   z-index: 95;
   font-size: 1rem;
   margin: .4rem 0 0 0;
   cursor: pointer;
}


.load-more-button {
   display: block;
   width: 6.5rem;
   height: 2.5rem;
   margin: 0.5rem auto;
}

#button-menu {
   display: block;
   width: 20rem;
   height: 5rem;
   text-transform: uppercase;
   cursor: pointer;
   color: var(--text-light-color-1);
}

   #button-menu ul {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      padding: 0;
   }

   #button-menu li {
      background: var(--add-25-white);
      margin: .1rem;
      width: 3.8rem;
      height: 3.8rem;
      display: flex;
      flex-direction: column;
   }

      #button-menu li.selected {
         background: var(--add-25-black);
      }

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

/* 
------------------------------------------------------------------------------------------------------------------------------
    video chat
------------------------------------------------------------------------------------------------------------------------------
*/

.video-chat-grid {
   display: grid;
   grid-template-columns: [video-view-col] calc(100vw - 40rem) [text-chat-col] 20rem;
   grid-template-rows: [toolbar-row] 3rem [content-row] calc(100vh - 6rem);
   background: var(--gray-dark);
}

   .video-chat-grid .toolbar {
      grid-row-start: toolbar-row;
      grid-column-start: video-view-col;
      grid-column-end: 3;
   }

   .video-chat-grid .video {
      grid-row-start: content-row;
      grid-column-start: video-view-col;
      background: black;
      display: grid;
      grid-template-columns: 1fr 20vw;
      grid-template-rows: 1fr 25vh;
   }

.video .remote {
   grid-row-start: 1;
   grid-row-end: 3;
   grid-column-start: 1;
   grid-column-end: 3;
   background: transparent;
   margin: 1rem;
}

   .video .remote video {
      width: calc(100vw - 42rem);
      height: calc(100vh - 8rem);
      object-fit: contain;
      object-position: center;
   }

.video .local {
   z-index: 98 !important;
   grid-row-start: 2;
   grid-column-start: 2;
   background: transparent;
   margin: 0 2rem 2rem 0;
}

   .video .local video {
      object-fit: contain;
      width: calc(20vw - 2rem);
      height: calc(20vw - 2rem);
      object-position: right bottom;
   }

.video-chat-grid .chat {
   grid-row-start: content-row;
   grid-column-start: text-chat-col;
   background: red;
}

#video-join {
   grid-template-columns: [video-view-col] 2fr [text-chat-col] 0;
   grid-template-rows: [toolbar-row] 3rem [content-row] calc(100vh - 3rem);
}

   #video-join .video {
      grid-template-columns: 1fr 40vw;
      grid-template-rows: 1fr 35vh;
   }

      #video-join .video .local video {
         width: calc(40vw - 2rem);
         height: calc(35vh - 2rem);
      }

      #video-join .video .remote video {
         width: calc(100vw - 2rem);
         height: calc(100vh - 5rem);
         object-fit: contain;
         object-position: center;
      }


#waiting-room-list ul {
   list-style-type: none;
   padding: 0;
   margin: 1rem;
}

#waiting-room-list li {
   display: grid;
   grid-template-columns: 10rem 1fr 8rem 5rem;
   gap: 1rem;
}

   #waiting-room-list li span {
      padding: .25rem 0;
      font-size: .9rem;
   }

/* 
------------------------------------------------------------------------------------------------------------------------------
    form layout
------------------------------------------------------------------------------------------------------------------------------
*/

.form {
   display: flex;
   flex-direction: column;
   margin: 1rem;
   font-size: .8rem;
}

   .form label {
      margin-bottom: 0;
   }

.dialog-form {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
}

.form-dark-bg {
   color: var(--text-light-color-1);
}

.validating-pair {
   display: grid;
   grid-template-columns: [label-col] 8rem [input-col] auto [help-col] auto [filler] 1fr;
   grid-template-rows: [content-row] auto;
   align-items: center;
   align-content: center;
   margin: .25rem;
}

.validating-trio {
   grid-template-columns: [label-col] 8rem [input-col] auto [open-col] auto [filler] 1fr;
}

   .validating-trio .trio-open-link {
      grid-column-start: open-col;
      margin-left: .25rem;
   }

.validating-pair-no-label {
   grid-template-columns: [label-col] 0 [input-col] auto !important;
}

.validating-pair label, .vertical .validating-pair label, .validating-pair .validating-label {
   grid-column-start: label-col;
   grid-row-start: content-row;
   /* grid-row-end: validation-row; */
   margin-bottom: 0;
   /* margin-top: .25rem; */
}

.validating-pair input, .vertical .validating-pair input, .validating-pair .validating-value {
   grid-column-start: input-col;
   /* grid-row-start: content-row; */
   /* border-radius: var(--corner-radius); */
}

.validating-pair div[class="validation-message"], .vertical .validating-pair div[class="validation-message"] {
   /* grid-column-start: input-col; */
   /* grid-row-start: validation-row; */
}

.validating-pair .info-icon {
   grid-column-start: help-col;
}

.checkbox-label {
   grid-template-columns: [input-col] auto [label-col] 1fr;
}

   .checkbox-label label {
      margin: 0.25rem 0 0 0.25rem !important;
   }

.vert-validating-pair {
   display: flex;
   flex-direction: column;
   margin: .25rem;
}

   .vert-validating-pair label {
      margin: .1rem 0 .25rem 0;
   }

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

.form p {
   margin: .25rem;
}

.pair .small {
   width: 6rem;
}

.form .pair label, .form .vertical .pair label {
   width: 8rem;
   margin: auto 0;
   vertical-align: middle;
}

.form .horizontal {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   align-items: start;
}

.form .horizontal-centered {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
   align-items: center;
}

.form .fill {
   flex-basis: 100%;
   width: 0px;
   height: 0px;
   overflow: hidden;
   display: inline-block;
}

.form .vertical {
   display: flex;
   flex-direction: column;
   margin: 0 .35rem;
   padding: 0;
}

   .form .vertical label {
      width: auto;
   }

.form input {
   width: 17rem;
   padding: .2rem .5rem;
   height: 2rem;
}

.form .k-input-inner {
   width: calc(var(--input-width) - 1.8rem);
}

   .form input[type=checkbox] {
      width: 1.2rem;
      height: 1.2rem;
      margin: .25rem .35rem 0 0;
      border: 1px solid var(--accent-2);
   }

      .form input[type=checkbox]:hover, .form input[type=radio]:hover {
         border: 1px solid var(--accent-2-highlight);
         background-color: #B1C5D3;
      }

   .form input[type=radio] {
      width: 1.1rem;
      height: 1.1rem;
      margin: 0 .35rem 0 0;
      border: 1px solid var(--accent-2);
   }

   .form input[placeholder=city] {
      width: 9.6rem;
      margin: 0 .2rem 0 0;
   }

   .form input[placeholder=state] {
      width: 3rem;
      margin: 0 .2rem 0 0;
   }

   .form input[placeholder=zip] {
      width: 4rem;
      margin: 0;
   }

.form h4 {
   margin: .5rem 0;
   border-bottom: 1px solid var(--accent-1);
   max-width: 90vw;
}

.form .vert-break {
   margin: .25rem 0;
   flex-grow: 1;
}

.centered-button {
   margin: .5rem auto;
   padding: .4rem;
}

.yes-no-check-list {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin: 0;
   width: 20rem;
}

   .yes-no-check-list li {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 1.4rem;
   }

      .yes-no-check-list li i {
         font-size: 1.2rem;
         margin-right: .5rem;
         width: 1rem;
         /* display: block; */
      }

      .yes-no-check-list li span {
         /* margin: 6px 0 6.75rem 0; */
         margin-top: .25rem;
      }

      .yes-no-check-list li .red {
         color: var(--error-color);
      }

      .yes-no-check-list li .green, .green-color {
         color: var(--green-color);
      }

/*.dialog-form {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: [content-row] 1fr [button-row] 1fr;
    height: 100%;
    width: 100%;
}*/
.form .dialog-buttons {
   display: flex;
   flex-direction: row;
   margin: .5rem 0 0 0;
}

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

   .dialog-buttons button span {
      margin: .25rem;
      text-align: center;
   }

   .dialog-buttons button i {
      margin: 0 .25rem;
   }

   .dialog-buttons button:first-child {
      margin-left: auto;
   }

   .dialog-buttons button:last-child {
      margin-right: 0;
   }

.form .item-notes {
   width: 25rem;
   margin: .25rem;
   height: 10rem;
}

.form .appointment-list {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   width: 25rem;
   margin: 0;
   padding: 0;
}

   .form .appointment-list li {
      display: flex;
      flex-direction: row;
      width: 25rem;
      padding: .25rem 0;
      align-items: flex-start;
      height: 2rem;
      align-items: center;
   }

      .form .appointment-list li div {
         margin: 0 .5rem;
         width: 11rem;
      }

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

   .form .appointment-list li:nth-child(even) {
      background-color: var(--add-10-gray);
   }

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

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

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

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

      .form .results-list li div {
         margin: 0 .5rem;
         width: 7rem;
         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;
   }

.form .custom-filter {
   display: grid;
   grid-template-columns: [label-col] 8rem [filter-col] 15rem [op-col] auto [input-col] 15rem [filler] 1fr;
   align-items: center;
   margin: .25rem;
}

.custom-filter .custom-filter-op {
   margin: .25rem;
   grid-column-start: op-col;
}

   .custom-filter .custom-filter-op .k-input-value-text {
      text-align: center;
   }

.form .vert-custom-filter {
   display: flex;
   flex-direction: column;
   align-items: baseline;
}

.form .group-list {
   list-style-type: none;
   display: flex;
   flex-direction: column;
   width: 25rem;
   margin: 0;
   padding: 0;
}

   .form .group-list li {
      width: 25rem;
      padding: 0 0.5rem;
      align-items: center;
      height: 2.25rem;
   }

      .form .group-list li:nth-child(even) {
         background-color: var(--add-10-gray);
      }

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

.checkered-background {
   --grid-color-1: var(--bg-light-2);
   --grid-color-2: var(--bg-light-1);
   background-image: linear-gradient(45deg, var(--grid-color-1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--grid-color-1) 75%), linear-gradient(45deg, transparent 75%, var(--grid-color-1) 75%), linear-gradient(45deg, var(--grid-color-1) 25%, var(--grid-color-2) 25%);
   background-size: 40px 40px;
   background-position: 0 0, 0 0, -20px -20px, 20px 20px;
}

.chart-with-tabs {
   border-top: 1px solid var(--accent-2);
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    schedule/calendar
------------------------------------------------------------------------------------------------------------------------------
*/
.content-row .k-calendar {
   margin: 0 1rem;
   background-color: var(--add-90-white);
}

.cal-header {
   text-align: center;
   margin: 1rem 0;
   color: var(--text-light-color-1);
}

.content-row .k-calendar table.k-content {
   background-color: transparent;
}

/*
------------------------------------------------------------------------------------------------------------------------------
    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);
   }
}

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

.invalid {
   outline: 1px dotted var(--error-color);
   padding-left: 1rem !important;
}

.validation-message {
   color: var(--error-color);
   grid-column-start: input-col;
   font-weight: 700;
   font-size: .75rem;
   position: relative;
   margin: -2rem 0 0 .1rem;
   width: 1rem;
}

#blazor-error-ui {
   background: lightyellow;
   bottom: 0;
   box-shadow: 0 -1px 2px var(--add-25-black);
   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: default;
      position: absolute;
      right: 0.75rem;
      top: 0.5rem;
   }


/* 
------------------------------------------------------------------------------------------------------------------------------
    settings
------------------------------------------------------------------------------------------------------------------------------
*/

#settings-menu {
   display: block;
   /* width: 3rem; */
   color: white;
   cursor: pointer;
}

   #settings-menu ul {
      list-style-type: none;
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: .2rem 0;
   }

   #settings-menu li {
      background: var(--add-10-white);
      margin: .2rem 0 .2rem .4rem;
      width: 19.6rem;
      height: 3rem;
      display: flex;
      flex-direction: row;
      border-radius: var(--corner-radius);
   }

      #settings-menu li.selected {
         background: var(--add-90-white);
         color: var(--text-dark-color-1);
      }

      #settings-menu li:hover {
         background: var(--add-10-black);
      }

      #settings-menu li.selected:hover {
         background: var(--add-75-white);
         color: var(--text-dark-color-1);
      }

      #settings-menu li i {
         text-align: center;
         font-size: 1.2rem;
         margin: auto .5rem;
         width: 1.5rem;
      }

      #settings-menu li span {
         text-align: center;
         margin: auto .2rem;
         font-size: .9rem;
      }

.settings-grid {
   height: calc(100vh - 6rem);
}

.settings-list-col {
   background-color: var(--bg-dark-2);
   overflow-y: auto;
   overflow-x: hidden;
}

.settings-list {
   width: 15.1rem; /*purposely overflow to create a clean tab edge*/
   background-color: var(--bg-dark-2);
}

   .settings-list .item-selected {
      background-color: var(--add-90-white);
      color: var(--text-dark-color-1);
   }

   .settings-list .item-disabled {
      color: var(--text-disabled-color);
   }

.settings-list-2rows {
   display: grid;
   grid-template-rows: [header-row] auto [content-row] 1fr;
}

.settings-list-header {
   grid-row-start: header-row;
   min-height: 3rem;
   border-bottom: 1px solid var(--accent-2);
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
   padding: .5rem 0 0 0;
}

.settings-list-content {
   grid-row-start: content-row;
   overflow-y: auto;
   overflow-x: hidden;
}

.settings-list-item {
   margin: .5rem 0;
   color: var(--text-light-color-1);
   padding: .5rem;
   cursor: pointer;
   border-radius: var(--corner-radius) 0 0 var(--corner-radius);
}

.settings-list-item-multi-line {
   padding: .25rem .5rem;
}

.settings-list-item:hover {
   background-color: var(--add-10-white);
}

.settings-list div.item-selected:hover {
   background-color: var(--add-75-white);
}

.settings-list-item div {
   width: 14rem;
}

   .settings-list-item div:nth-child(1) {
      font-weight: bold;
   }

   .settings-list-item div:not(:nth-child(1)) {
      margin: .25rem 0 0 0;
   }

.settings-form {
   /*width: calc(100vw - 18rem);
   height: calc(100vh - 6rem);*/
   overflow: auto;
   margin: 0;
   padding: 1rem;
}

.settings-tree {
   margin: 1rem 0 0 .25rem;
   overflow-y: auto;
   height: calc(100vh - 10.75rem);
}

   .settings-tree .k-treeview-leaf, .settings-tree .k-icon {
      color: var(--text-light-color-1);
      cursor: pointer;
   }

   .settings-tree .k-treeview-leaf {
      min-width: 100%;
   }

      .settings-tree .k-treeview-leaf .k-treeview-leaf-text {
         margin: .25rem 0;
      }

         .settings-tree .k-treeview-leaf .k-treeview-leaf-text .fal {
            margin-right: .25rem;
         }

      .settings-tree .k-treeview-leaf.k-selected {
         background-color: var(--bg-light-1);
         color: var(--text-dark-color-1);
      }

      .settings-tree .k-treeview-leaf:hover {
         background-color: var(--bg-dark-3);
      }

      .settings-tree .k-treeview-leaf.k-selected:hover {
         background-color: var(--bg-light-2);
      }

.select-link-tree {
   grid-column-start: input-col;
   background-color: white;
   height: 25.5rem;
   width: 17rem;
   border: 1px solid var(--bg-light-2);
   border-radius: var(--corner-radius);
}

.select-link-list {
   grid-column-start: input-col;
   display: flex;
   flex-direction: row;
}

   .select-link-list ul {
      height: 25.4rem;
      width: 16.9rem;
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--bg-light-2);
      border-radius: var(--corner-radius);
      background-color: var(--bg-light-0);
      overflow-y: auto;
   }

      .select-link-list ul li {
         margin: .25rem;
         padding: .35rem .5rem;
         cursor: pointer;
         border-radius: var(--corner-radius);
      }

         .select-link-list ul li:hover {
            background-color: var(--bg-light-1);
         }

         .select-link-list ul li.selected {
            background-color: var(--bg-dark-3);
            color: var(--text-light-color-1);
         }

/* 
------------------------------------------------------------------------------------------------------------------------------
    Misc
------------------------------------------------------------------------------------------------------------------------------
*/

.button-green, .button-red, .button-blue {
   margin: .35rem;
   width: 7rem;
   color: var(--text-light-color-1) !important;
   font-weight: bold;
}

.button-green {
   background-color: var(--green-color) !important;
}

.button-blue {
   background-color: var(--accent-1) !important;
}

.button-red {
   background-color: var(--error-color) !important;
}

.cursor-pointer {
   cursor: pointer;
}

.no-col-body {
   background-color: var(--bg-light-1);
   padding: 1rem;
   height: calc(100vh - 5rem);
}

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

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

.stack-wrap {
   flex-wrap: wrap;
}

.generate-code-button {
   margin: .25rem 0 0 .2rem;
}

.pdfobject-container {
   height: calc(100vh - 7rem);
}

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

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

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

.error-message {
   font-weight: bolder;
   color: var(--error-color);
   font-size: .75rem;
}

.overflow-y-only {
   overflow-x: hidden;
   overflow-y: auto;
}

.overflow-all-auto {
   overflow: auto;
}

.flex-filler {
   flex-grow: 1;
}

.simple-list {
   margin: .25rem .5rem;
   height: 20rem;
   width: 30rem;
   overflow-y: auto;
   border: 1px solid var(--bg-dark-3);
   padding: .35rem;
   background-color: var(--bg-light-0);
}


/* 
------------------------------------------------------------------------------------------------------------------------------
    dashboard 
------------------------------------------------------------------------------------------------------------------------------
*/

.dashboard {
   background-color: var(--bg-light-1);
   /* padding: 1rem; */
   height: calc(100vh - 5rem);
   width: calc(100vw - 3rem);
}

   .dashboard img:first-child {
      margin: .5rem 0;
      height: 50px;
   }

.dashboard-rows {
   display: flex;
   flex-direction: column;
   width: calc(100vw - 2rem);
}

.dashboard-row {
   display: flex;
   flex-direction: row;
   width: calc(100vw - 2rem);
   overflow: auto
}

   .dashboard-row .dashboard-row-header {
      width: 1.5rem;
      height: 8rem;
   }

.dashboard-row-header h5 {
   position: relative;
   top: 8rem;
   left: 0;
   transform-origin: 0 0;
   transform: rotate(-90deg);
   width: 8rem;
   font-size: .65rem;
   font-weight: bold;
   color: var(--text-light-color-1);
   background-color: var(--bg-dark-1);
   margin: .4rem 0 0 .4rem;
   padding: 4px 0 4px 0;
   text-align: center;
   text-transform: uppercase;
}

.dashboard-tile {
   width: 8rem;
   height: 8rem;
   min-width: 8rem;
   background-color: var(--accent-1);
   margin: .4rem;
   box-shadow: 3px 3px 5px var(--add-50-black);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   color: var(--text-light-color-1);
   font-size: .85rem;
   border-radius: var(--corner-radius);
}

   .dashboard-tile:hover {
      background-color: var(--accent-2-highlight);
      box-shadow: 3px 3px 5px var(--add-75-black);
   }

   .dashboard-tile span {
      font-size: 2rem;
      margin: 0 0 .75rem 0;
   }

   .dashboard-tile:active {
      box-shadow: 0 0 0 white;
   }

   .dashboard-tile div {
      word-wrap: break-word;
      max-width: 7rem;
      text-align: center;
      height: 2.75rem;
      display: flex;
      align-items: center;
   }


/* 
------------------------------------------------------------------------------------------------------------------------------
Badge
------------------------------------------------------------------------------------------------------------------------------
*/

.badge-icon, .tiny-badge-icon, .badge-dot {
   position: relative;
}

   .badge-icon[data-badge]::after, .tiny-badge-icon[data-badge]::after, .badge-dot::after {
      content: attr(data-badge);
      position: absolute;
      top: -.25rem;
      right: -.25rem;
      font-size: .7rem;
      font-weight: bold;
      background: var(--accent-alt-light);
      color: var(--text-dark-color-1);
      width: 2rem;
      height: 2rem;
      text-align: center;
      line-height: 2rem;
      border-radius: 50%;
      box-shadow: 3px 3px 5px var(--add-50-black);
      cursor: pointer;
   }


   .tiny-badge-icon[data-badge]::after {
      top: 0;
      right: 0;
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      border-radius: 50%;
   }


   .badge-dot::after {
      top: -1px;
      right: -4px;
      width: 4px;
      height: 4px;
      line-height: 4px;
      border-radius: 50%;
   }

/* 
------------------------------------------------------------------------------------------------------------------------------
    Info Tile
------------------------------------------------------------------------------------------------------------------------------
*/

.info-tile {
   display: grid;
   grid-template-rows: [info-row] 1fr [label-row] auto;
   height: 6rem;
   background-color: var(--bg-light-2);
   color: var(--main-dark-color);
   align-items: center;
   border: 1px solid var(--accent-1);
   width: 7rem;
   margin: .25rem;
   box-shadow: 3px 3px 5px var(--add-50-black);
   cursor: pointer;
   border-radius: var(--corner-radius);
}

   .info-tile:hover {
      background-color: var(--bg-light-3);
      box-shadow: 3px 3px 5px var(--add-75-black);
   }

   .info-tile:active {
      box-shadow: 0 0 0 white;
   }

   .info-tile .info-text {
      grid-row-start: info-row;
      text-align: center;
      margin: auto .25rem;
   }

   .info-tile .info-label {
      grid-row-start: label-row;
      background-color: var(--accent-1);
      padding: .25rem;
      text-align: center;
      color: white;
      text-transform: uppercase;
      font-size: .6rem;
      font-weight: 700;
      border-radius: 0 0 0.25rem .25rem;
   }


/* 
------------------------------------------------------------------------------------------------------------------------------
    Notification / toast
------------------------------------------------------------------------------------------------------------------------------
*/

.notification {
   z-index: 654321;
   margin: .5rem;
}

   .notification .k-notification {
      display: flex;
      flex-direction: row;
      font-size: .9rem;
      gap: .25rem;
   }

   .notification .k-notification-wrap {
      margin: .5rem;
   }

   .notification .k-notification-content {
      margin: auto;
      max-width: 40vw;
      cursor: pointer;
   }

   .notification .k-icon {
      margin: auto .5rem auto 0;
   }

   .notification .k-i-close {
      margin: 0 0 0 .5rem;
   }

.notification-title {
   font-size: 1.1rem;
   border-bottom: 1px solid var(--accent-alt-dark);
}

.notification-body {
   margin-top: .1rem;
}

#video-local {
   max-width: 100%;
   width: 320px;
}

#video-remote {
   max-width: 100%;
   width: 320px;
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    grids
------------------------------------------------------------------------------------------------------------------------------
*/

.tgrid-full {
   height: calc(100vh - 10.3rem);
   width: calc(100vw - 2rem);
}

   .tgrid-full tr {
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .tgrid-full td {
      padding: 0 8px;
   }

.tgrid-with-status {
   height: calc(100vh - 12.3rem);
}

.tgrid-settings {
   height: calc(100vh - 12.1rem);
   width: calc(100vw - 7rem);
}

.tgrid-side-bar {
   height: calc(100vh - 6rem);
   width: calc(100vw - 20rem);
}

.tb-search input[type=text] {
   width: 12rem;
   background: var(--bg-light-1);
   color: var(--text-dark-color-1);
   padding: .25rem;
   margin: 0;
   border: none;
   z-index: 90;
   height: 1.8rem;
   border-radius: 4px;
}

.tb-search div {
   color: var(--text-dark-color-3);
   z-index: 95;
   font-size: 1rem;
   cursor: pointer;
   margin-left: -1.75rem;
}

.lookup-search-button {
   margin: .2rem 0 0 0;
}

   .lookup-search-button i {
      color: var(--text-dark-color-1);
   }

   .lookup-search-button:hover {
      background-color: var(--bg-light-2);
   }
/* 
------------------------------------------------------------------------------------------------------------------------------
    simple list
------------------------------------------------------------------------------------------------------------------------------
*/

.simple-list-editor {
   list-style: none;
   margin: .35rem 0;
   padding: .35rem 0;
   border-top: 1px solid var(--add-10-black);
   border-bottom: 1px solid var(--add-10-black);
}

   .simple-list-editor li {
      padding: .5rem .25rem .5rem .5rem;
      min-width: 20rem;
      display: grid;
      grid-template-columns: 1fr auto auto auto;
   }

      .simple-list-editor li:nth-child(even) {
         background-color: var(--add-10-gray);
      }

      .simple-list-editor li i {
         padding: .25rem;
      }

         .simple-list-editor li i:hover {
            cursor: pointer;
            background-color: var(--accent-2);
         }

         .simple-list-editor li i.disable-controls {
            color: transparent;
         }

/* 
------------------------------------------------------------------------------------------------------------------------------
    wizard
------------------------------------------------------------------------------------------------------------------------------
*/
.wizard-radio {
    margin: .5rem; 
}

  /* .wizard-radio input[type="radio"] {
      width: 1rem;
      height: 1rem;
      display: none;
   }

   .wizard-radio li label {
      border: 1px solid var(--add-25-black);
      border-radius: var(--corner-radius);
      padding: .5rem;
      display: block;
      width: 35rem;
      background-color: white;
   }

      .wizard-radio li label:hover {
         background-color: var(--accent-3);
         border: 1px solid var(--add-50-black);
      }

   .wizard-radio input[type="radio"]:checked + label {
      border: 1px solid var(--accent-1);
   }

   .wizard-radio input[type="radio"] + label {
      width: 100%;
   }

.wizard-radio input[type="radio"]:checked + label::after {
   border: 1px solid var(--green-color);
   color: white;
   content: "\2713";
   font-size: 1.2rem;
   font-weight: bold;
   float: right;
   align-self: end;
   height: 2rem;
   width: 2rem;
   line-height: 2rem;
   text-align: center;
   border-radius: 50%;
   margin: -1rem -1rem 0 0;
   background: var(--accent-alt-dark);
   box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.25);
}*/

.bundles {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 0;
   padding: 0;
   flex-wrap: wrap;
}

.bundle-item ul {
   width: 10rem;
   height: 14rem;
   list-style-type: none;
   display: flex;
   flex-direction: column;
   margin: .35rem;
   padding: .5rem 0;
   box-shadow: 3px 3px 5px var(--add-50-black);
   background-color: var(--bg-dark-2);
   color: var(--text-light-color-1);
   cursor: pointer;
   border-radius: var(--corner-radius);
   /* align-content: center; */
   align-items: center;
}

.bundle-item h5 {
   border-bottom: 1px solid var(--accent-alt-light);
   width: 10rem;
   text-align: center;
   padding-bottom: .35rem;
   font-size: 1.05rem;
}

.bundle-item h6 {
   padding-bottom: .35rem;
   font-weight: 200;
   font-size: 1rem;
}

.bundle-item li {
   margin: .1rem 0;
}

.bundle-item ul:hover {
   background-color: var(--bg-dark-3);
   box-shadow: 3px 3px 5px var(--add-75-black);
   transition: .5s ease;
}

.bundle-item ul:active {
   box-shadow: 0 0 0 white;
   transition: .5s ease;
}


.bundle-item ul.selected {
   background-color: var(--main-dark-color);
   cursor: pointer;
}

   .bundle-item ul.selected:hover {
      background-color: var(--accent-1);
   }


.invoicing-terms {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

   .invoicing-terms li {
      display: flex;
      align-items: center;
      margin: 0;
      margin: .5rem 0;
   }

      .invoicing-terms li:before {
         content: "\2022";
         margin: 0 .35rem;
         font-size: 1.5rem;
      }

      .invoicing-terms li span {
         width: 26.3rem;
         margin: 0 .35rem;
      }

.summary-list li {
   line-height: 1.35rem;
}

.width-5 {
   width: 5rem;
}

.min-width-25 {
   min-width: 25rem;
}

.min-width-55 {
   min-width: 55rem;
}

.fixed-width-55 {
   width: 55rem;
}

.tooltip-underline {
   border-bottom: 1px dashed var(--accent-alt-dark);
}

.horizontal-radios {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-items: center;
   width: 17rem;
   font-size: .8rem;
}

   .horizontal-radios li {
      margin-top: 0 !important;
      margin: .35rem !important;
   }

   .horizontal-radios input[type="radio"] {
      height: 18px;
      width: 8px;
   }

.height-1rem {
   height: 1rem;
}

.height-2rem {
   height: 2rem;
}

.height-3rem {
   height: 3rem;
}

.height-4rem {
   height: 4rem;
}

.select-file-message {
   margin: 0 .5rem .5rem .5rem;
   font-size: .9rem;
}

.provider-image {
   height: 180px;
   width: 180px;
   background-color: white;
   border: 4px solid #333333;
   border-radius: 5px;
   box-shadow: .35rem .35rem .35rem 0 #888888;
   margin: 1rem;
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    widgets
------------------------------------------------------------------------------------------------------------------------------
*/

.widgets-container {
   display: flex;
   justify-content: space-around;
}

.widget-separator {
   display: flex;
   flex-direction: column;
   list-style: none;
   align-items: center;
}

   .widget-separator i {
      margin: -1px;
      padding: 0;
      font-size: 20px;
      font-style: normal;
   }

   .widget-separator .widget-add {
      border: 2px solid var(--accent-1);
      padding: .75rem 2rem;
      cursor: pointer;
      border-radius: 10px;
      margin: 0;
      box-shadow: 3px 3px 5px var(--add-50-black);
   }

      .widget-separator .widget-add:hover {
         background-color: var(--accent-3);
      }

      .widget-separator .widget-add:active {
         box-shadow: 0 0 0 white;
      }

.widgets-container .first-last-widget {
   margin: 0 12.5rem;
   width: 10rem;
   font-size: 15px;
   text-transform: uppercase;
}

.widgets-container .first-last-widget-wide {
   margin: 0 22.5rem;
}

.widget-common {
   padding: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   list-style: none;
   background-color: #ffffff;
   border: 2px solid var(--accent-1);
   border-radius: 10px;
}

.widgets-container .no-drop {
   border: 2px solid var(--error-color);
}

.widgets-container .can-drop {
   border: 2px solid var(--accent-alt-light);
}

.widget-editor {
   /* margin-bottom: 10px; */
   background: var(--bg-dark-3);
   color: var(--text-light-color-1);
   border: 2px solid var(--accent-1);
   border-radius: 0;
   width: 35rem;
   display: grid;
   padding: 0;
   grid-template-rows: [header-row] auto [content-row] auto;
}

   .widget-editor:active {
      cursor: grabbing;
   }

.widget-narrow {
   margin: 0 7.5rem;
   width: 20rem;
}

.widget-wide {
   width: 55rem;
}

.dragging {
   cursor: grabbing;
}

.widget-editor .widget-title {
   cursor: grab;
   display: flex;
   flex-direction: row;
   font-size: 15px;
   grid-row-start: header-row;
   background-color: var(--accent-1);
   margin: 0;
   padding: .25rem;
}

.widget-title p {
   flex-grow: 1;
}

.widget-title i {
   align-self: center;
   padding: .25rem;
   cursor: pointer;
}

   .widget-title i:hover {
      background-color: var(--add-10-black);
      color: var(--text-light-color-2);
   }

.widget-editor .widget-body {
   background-color: transparent;
   margin: .5rem;
   display: flex;
   flex-direction: column;
}

.widget-body .validating-pair {
   margin: .5rem .25rem;
}

.indent-left {
   margin-left: 1rem;
}

.widget-body hr {
   color: var(--accent-alt-light);
   margin: .25rem 0;
}

.widget-body .digit-wrap {
   height: 20rem;
   display: grid;
   grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr;
   grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr;
   gap: .5rem;
   color: var(--text-light-color-1);
}

   .widget-body .digit-wrap .digit {
      background-color: var(--bg-dark-3);
      display: grid;
      grid-template-columns: [title] 1.5rem [body] 1fr;
      box-shadow: 3px 3px 5px var(--add-50-black);
      border-radius: 10px;
      cursor: pointer;
   }

      .widget-body .digit-wrap .digit:hover {
         background-color: var(--bg-dark-2);
      }

      .widget-body .digit-wrap .digit:active {
         box-shadow: 0 0 0 white;
      }

   .widget-body .digit-wrap .digit-1 {
      grid-column-start: col1;
      grid-row-start: row1;
   }

   .widget-body .digit-wrap .digit-2 {
      grid-column-start: col2;
      grid-row-start: row1;
   }

   .widget-body .digit-wrap .digit-3 {
      grid-column-start: col3;
      grid-row-start: row1;
   }

   .widget-body .digit-wrap .digit-4 {
      grid-column-start: col1;
      grid-row-start: row2;
   }

   .widget-body .digit-wrap .digit-5 {
      grid-column-start: col2;
      grid-row-start: row2;
   }

   .widget-body .digit-wrap .digit-6 {
      grid-column-start: col3;
      grid-row-start: row2;
   }

   .widget-body .digit-wrap .digit-7 {
      grid-column-start: col1;
      grid-row-start: row3;
   }

   .widget-body .digit-wrap .digit-8 {
      grid-column-start: col2;
      grid-row-start: row3;
   }

   .widget-body .digit-wrap .digit-9 {
      grid-column-start: col3;
      grid-row-start: row3;
   }

   .widget-body .digit-wrap .digit-0 {
      grid-column-start: col2;
      grid-row-start: row4;
   }

.digit .digit-title {
   grid-column-start: title;
   font-weight: 900;
   font-size: 20px;
   margin: auto 0 auto .6rem;
}

.digit .digit-body {
   font-size: 12px;
   grid-column-start: body;
   margin: auto .25rem;
}


.icon-button {
   cursor: pointer;
   padding: .25rem;
}

   .icon-button:hover {
      color: var(--text-light-color-3);
      background: var(--add-10-white);
   }

.read-only-textbox {
   background-color: var(--bg-light-2);
   /*border: 1px solid var(--bg-light-2);*/
   color: var(--text-dark-color-1);
   height: 1.65rem;
   padding: .25rem .5rem;
   border-radius: .15rem;
   display: flex;
   align-items: center;
   border-radius: 4px;
}

.k-numerictextbox {
   background-color: white;
   color: var(--text-dark-color-1);
}

   .k-numerictextbox .k-spinner-increase {
      background-color: white;
   }

   .k-numerictextbox .k-spinner-decrease {
      background-color: white;
   }

.code-editor {
   font-family: 'Cascadia Code', Consolas, 'Courier New', Courier, monospace;
   font-size: 13px;
   background-color: var(--bg-dark-1);
   color: var(--accent-alt-light);
   resize: none;
   overflow-y: auto;
   white-space: nowrap;
}

.text-editor {
   font-family: 'Cascadia Code', Consolas, 'Courier New', Courier, monospace;
   overflow-y: auto;
   resize: none;
}

.form-text-area {
   overflow-y: auto;
   resize: none;
}

.email-editor-toolbar {
   /*width: 850px;*/
}

.email-editor {
}

.toolbar-test-contact-box {
   height: 1.85rem;
   margin-top: 3px;
}

.toolbar-search-box {
   height: 1.85rem;
   margin-top: 1px;
}

.dark-email-designer {
   background-color: var(--bg-dark-1);
   color: var(--text-light-color-1);
}

   .dark-email-designer .mail-item {
      background-color: var(--bg-dark-2);
   }

   .dark-email-designer textarea {
      background-color: var(--bg-dark-2);
   }

   .dark-email-designer .k-editor-content {
      background-color: var(--bg-dark-2);
   }

   .dark-email-designer .k-editor-toolbar {
      background-color: var(--bg-dark-3);
   }

   .dark-email-designer .k-editor {
      border-color: black;
   }

.select-template-dialog {
}

   .select-template-dialog ul {
      background-color: white;
      border: 1px solid var(--add-25-black);
      height: 100%;
      overflow-y: scroll;
      list-style-type: none;
      margin: 0;
      padding: .25rem;
      display: flex;
      flex-direction: column;
   }

      .select-template-dialog ul li {
         padding: .5rem;
         display: flex;
         flex-direction: column;
         cursor: pointer;
         border-radius: var(--corner-radius);
      }

         .select-template-dialog ul li:hover {
            background-color: var(--add-50-black);
            color: white;
         }

   .select-template-dialog .template-selected {
      background-color: var(--add-25-black);
   }

   .select-template-dialog .template-title {
      font-weight: bold;
      font-size: 14px;
   }

   .select-template-dialog .template-body {
   }

.iframe-loading {
   background: url("/img/Loading.gif") center center no-repeat;
}

.conversions-list {
   display: flex;
   flex-direction: column;
   background-color: var(--bg-light-2);
   align-items: center;
   align-content: center;
   list-style-type: none;
   padding: 0;
   width: 55rem;
}

   .conversions-list li:nth-child(odd) {
      background-color: var(--bg-light-1);
   }

   .conversions-list li {
      display: flex;
      flex-direction: row;
      list-style-type: none;
      padding: .5rem;
      width: 54.75rem;
   }

      .conversions-list li i {
         align-self: center;
         margin: 0 .5rem;
         font-size: 16px;
      }

.schedule-grid {
   display: grid;
   grid-template-columns: [day-label] 6rem [time-0] 2rem [time-1] 2rem [time-2] 2rem [time-3] 2rem [time-4] 2rem [time-5] 2rem [time-6] 2rem [time-7] 2rem [time-8] 2rem [time-9] 2rem [time-10] 2rem [time-11] 2rem [time-12] 2rem [time-13] 2rem [time-14] 2rem [time-15] 2rem [time-16] 2rem [time-17] 2rem [time-18] 2rem [time-19] 2rem [time-20] 2rem [time-21] 2rem [time-22] 2rem [time-23] 2rem;
   grid-template-rows: [hour-label] 3.5rem [day-sunday] 2rem [day-monday] 2rem [day-tuesday] 2rem [day-wednesday] 2rem [day-thursday] 2rem [day-friday] 2rem [day-saturday] 2rem [key] 3rem;
}

   .schedule-grid .hour-title-text {
      grid-row-start: hour-label;
      transform: rotate(-90deg);
      margin: .3rem;
      width: 3rem;
      cursor: pointer;
      color: var(--main-dark-color);
   }

      .schedule-grid .hour-title-text:hover {
         font-weight: bold;
         color: var(--accent-1);
      }

   .schedule-grid .day-title-text {
      grid-column-start: day-label;
      text-align: right;
      align-self: center;
      margin-right: .25rem;
      cursor: pointer;
      color: var(--main-dark-color);
   }

      .schedule-grid .day-title-text:hover {
         font-weight: bold;
         color: var(--accent-1);
      }

   .schedule-grid .hour-box {
      grid-column-start: day-label;
      background-color: var(--text-disabled-color);
      margin: .1rem;
      cursor: pointer;
      box-shadow: 2px 2px 3px var(--add-50-black);
      border-radius: 3px;
   }

      .schedule-grid .hour-box:active {
         box-shadow: 0 0 0 white;
      }

      .schedule-grid .hour-box:hover {
         background-color: #005a00;
      }

   .schedule-grid .hour-box-selected {
      background-color: #003c00;
   }

   .schedule-grid .hour-box.hour-box-late:hover {
      background-color: #ffdf00;
   }

   .schedule-grid .hour-box-selected.hour-box-late {
      background-color: #eaa221;
   }

   .schedule-grid .schedule-disabled {
      cursor: default;
      box-shadow: 0 0 0 white;
   }

   .schedule-grid .hour-title-text.schedule-disabled {
      color: var(--text-dark-color-1);
   }

      .schedule-grid .hour-title-text.schedule-disabled:hover {
         color: var(--text-dark-color-1);
         font-weight: normal;
      }

   .schedule-grid .day-title-text.schedule-disabled {
      color: var(--text-dark-color-1);
   }

      .schedule-grid .day-title-text.schedule-disabled:hover {
         color: var(--text-dark-color-1);
         font-weight: normal;
      }

   .schedule-grid .hour-box.schedule-disabled:hover {
      background-color: var(--text-disabled-color);
   }

   .schedule-grid .hour-box.hour-box-selected.schedule-disabled:hover {
      background-color: #003c00;
   }

   .schedule-grid .hour-box.hour-box-late.schedule-disabled:hover {
      background-color: var(--text-disabled-color);
   }

   .schedule-grid .hour-box-late.hour-box-selected.schedule-disabled:hover {
      background-color: #eaa221;
   }


.custom-calling-schedule {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--accent-alt-light);
   padding: 1rem;
   width: 55rem;
   margin: .5rem 0;
}

.form .custom-calling-schedule label {
   width: 15rem;
}

.form .custom-calling-schedule h6 {
   font-size: 13px;
}

.form .text-card-field {
   position: absolute;
   background-color: transparent;
   border: solid 1px var(--accent-alt-light);
   border-radius: 3px;
   display: flex;
   align-items: center;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 400;
}

   .form .text-card-field.bold {
      font-weight: 600;
   }

.form .text-card-field-inner {
   resize: none;
   background-color: var(--add-10-black);
   border: none;
   color: var(--text-dark-color-1);
}

   .form .text-card-field-inner.dark {
      background-color: var(--add-10-white);
      color: var(--text-light-color-1);
   }

   .form .text-card-field-inner.align-center {
      text-align: center;
   }


.no-wrap-text {
   overflow: hidden;
   max-height: 60px;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.form .k-tabstrip > .k-content {
   background-color: var(--bg-light-1);
}

.form li.k-tabstrip-item.k-item.k-state-default {
   color: var(--main-dark-color);
}

.form .bg-dark-1 {
   background-color: var(--bg-dark-1);
}

.form .bg-dark-2 {
   background-color: var(--bg-dark-2);
}

.z-index-top {
   z-index: 11000;
}

.selectable-grid td {
   cursor: pointer;
}

.question-option {
   display: grid;
   grid-template-columns: [label-col] 8rem [option-col] 20rem [text-col] 25rem;
   grid-template-rows: [content-row] auto;
   align-items: center;
   align-content: center;
   margin: .25rem;
}

   .question-option span.k-textbox {
      height: 2.15rem;
      margin: 0 .25rem;
      border-radius: .25rem;
   }

.no-padding-dialog > div.k-window-content {
   padding: 0;
}

.video-backgound {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 1;
   object-fit: cover;
}

.k-scheduler-layout-flex .k-scheduler-cell.k-slot-cell.schedule-view-now {
   border-left: 5px solid var(--accent-2-highlight);
   background-color: var(--accent-5);
}

.section-code-editor {
   height: calc(100vh - 20rem);
   width: calc(100vw - 22rem);
}

.blurb-code-editor {
   height: calc(90vh - 13.8rem);
   width: calc(90vw - 2.1rem);
   margin-bottom: 1rem;
}

.inline-code-editor {
   height: calc(100vh - 23.5rem);
   width: calc(100vw - 20rem);
   min-height: 50rem;
}

.full-page-code-editor, .full-page-code-editor-with-nav {
   height: calc(100vh - 6rem);
   width: calc(100vw - 3rem);
}

.full-page-code-editor-with-nav {
   width: calc(100vw - 18rem);
}

.full-page-code-editor-with-nav-toolbar {
   height: calc(100vh - 8.43rem);
   width: calc(100vw - 18rem);
}

.email-code-editor {
   min-height: 60rem;
   width: calc(100vw - 22rem);
}

.inline-toolbar-telerik {
   background-color: var(--bg-light-1);
}

.full-width-toolbar {
   width: calc(100vw - 23rem);
}

.help-frame {
   width: 100vw;
   height: calc(100vh - 3.3rem);
   margin: 0;
   padding: 0;
}

.tiny-button {
   margin: 0 .2rem;
   padding: .2rem;
   cursor: pointer;
   border-radius: .35rem;
}

   .tiny-button:hover {
      background-color: var(--add-25-gray);
      font-weight: bold;
   }

/* 
------------------------------------------------------------------------------------------------------------------------------
    telerik overrides
------------------------------------------------------------------------------------------------------------------------------
*/

.k-loader-container, .k-loader-container-overlay {
   z-index: 199999;
}

.k-loader-top .k-loader-container-inner {
   z-index: 299999;
}

.k-window-titlebar {
   background-color: var(--accent-1);
   color: var(--text-light-color-1);
   font-weight: bold;
}

.happy-dialog .k-textarea {
   border-color: var(--accent-1);
}

.k-window-title {
   font-size: 1.1em;
}

.k-tabstrip-items .k-state-default {
   background-color: var(--bg-light-2);
}

   .k-tabstrip-items .k-state-default:hover {
      background-color: var(--bg-light-1);
   }

.k-tabstrip-items .k-state-active {
   color: var(--text-dark-color-1);
}

   .k-tabstrip-items .k-state-active:hover {
      background-color: var(--bg-light-1);
   }

.k-widget ul {
   background-color: var(--bg-light-1);
   border-color: transparent;
}

.k-dateinput {
   width: 100%;
}

.k-datepicker, .k-timepicker, .k-datetimepicker {
   background-color: white;
   padding: 0;
   color: var(--text-dark-color-1);
}

th.k-header {
   background-color: var(--accent-2);
   color: white;
   font-weight: bold;
}

.k-window {
   border-radius: var(--corner-radius);
}

.k-window-titlebar {
   border-radius: .25rem .25rem 0 0;
}

div.k-content, div.k-window-content {
   background-color: var(--bg-light-1);
   border-radius: 0 0 .25rem .25rem;
   overflow: hidden;
}

span.k-dropdown, button.k-button, span.k-dropdown span.k-dropdown-wrap span.k-input {
   font-size: .8rem;
   height: 2rem;
   line-height: 2rem;
   border-radius: var(--corner-radius);
   border-color: transparent;
}

.k-textbox {
   font-size: .8rem;
   line-height: 2rem;
   width: 100%;
}

.k-datetimepicker .k-icon-button.k-button-md {
   border-color: transparent;
   background-color: white;
}

.k-button-solid-base:hover, .k-button-solid-base.k-hover {
   background-color: #ebebeb;
}

button.k-button {
   background-color: white;
   border-color: var(--accent-1);
   color: var(--text-dark-color-1);
}

button.k-button-solid-primary {
   background-color: var(--accent-1);
   color: var(--text-light-color-1);
}

button.k-spinner-increase.k-button.k-icon-button.k-button-solid.k-button-solid-base,
button.k-spinner-decrease.k-button.k-icon-button.k-button-solid.k-button-solid-base {
   border-color: transparent;
}

.k-notification-warning {
   border-color: var(--warning-color-dark);
   color: var(--text-dark-color-1);
   background-color: var(--warning-color-light);
}

.k-picker-solid {
   background-color: white;
   font-size: .8rem;
}

.k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
   color: white;
}

.no-dialog-margin .k-dialog-content {
   margin: 0;
   padding: 0;
}

.dark-calendar {
   background-color: var(--bg-dark-2);
   margin: .5rem;
   border-radius: var(--corner-radius);
   color: var(--text-light-color-2);
}

   .dark-calendar button.k-button {
      color: var(--text-light-color-1);
   }

   .dark-calendar .k-other-month {
      color: var(--text-disabled-color);
   }

   .dark-calendar .k-calendar-th {
      color: var(--accent-3);
   }

.schedule-color {
   height: 1.65rem;
}

   .schedule-color .k-color-preview, .schedule-color .k-input-inner {
      border: none;
      border-radius: 0;
   }

   .schedule-color .k-i-caret-alt-down {
      color: var(--text-light-color-1);
      top: -4px;
   }

.k-scheduler-body .k-scheduler-row .k-heading-cell {
   word-wrap: break-word;
   width: 8rem;
   white-space: pre-wrap;
   hyphens: auto;
}

.k-scheduler-footer.k-toolbar.k-toolbar-md {
   display: none;
}

.no-margin-or-padding-dialog .k-window-content {
   margin: 0;
   padding: 0;
}

.k-progressbar {
   background-color: var(--accent-1) !important;
   color: var(--text-light-color-1);
}

.pb-width {
   background-color: white;
   padding: .25rem;
   border-radius: var(--corner-radius);
   width: 20rem;
}

   .pb-width .k-progressbar {
      width: var(--pb-width) !important;
   }

.white-tab-strip, .white-tab-strip .k-tabstrip-content {
   background-color: white !important;
}

#main-app > div.k-dialog-wrapper > div.k-window.telerik-blazor.k-editor-window {
   height: 333px;
}

div.k-grid-header > div > table > thead > tr > th.k-header.k-touch-action-none.k-table-th.k-sorted {
   background-color: rgba(77, 155, 213, .8);
}

.k-input input::placeholder {
   font-style: italic;
   color: var(--text-disabled-color);
}

.k-combobox button.k-button {
   border-color: transparent;
}

.k-combobox {
   font-size: .8rem;
}

.k-svg-i-reorder svg {
   height: 1.25rem;
   width: 1.25rem;
}

.toolbar-dropdown {
   background-color: transparent;
   border-color: var(--add-25-white);
   color: var(--text-light-color-1);
}

   .toolbar-dropdown:hover {
      background-color: var(--add-10-white);
   }

.sc-mail-editor div.k-editor-content div.k-content {
   font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.sc-mail-editor {
   margin: .35rem 0 0 0;
   border-radius: var(--corner-radius);
}

.grid-row-click .k-table-row {
   cursor: pointer;
}

.grid-row-click tbody tr.k-table-row:hover {
   text-decoration: underline;
}

.telerik-dialog-no-padding .k-window-content {
   padding-block: 0;
   padding-inline: 0;
   padding: 0;
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    Dark mode
------------------------------------------------------------------------------------------------------------------------------
*/
.dark-mode {
   --bg-light-1: #1E1E1E;
   --bg-light-2: #2E2E2E;
   --bg-light-3: #3E3E3E;
   --text-dark-color-1: #e0e0e0;
   --text-dark-color-2: #d0d0d0;
   --text-dark-color-3: #c0c0c0;
}

   .dark-mode .nc-button-has-notifications {
      background-color: var(--accent-alt-dark);
   }

   .dark-mode .grid-2rows .content-row {
      background: var(--bg-dark-1);
   }

   .dark-mode button.k-button {
      background-color: var(--bg-dark-2);
   }

   .dark-mode #settings-menu li.selected {
      background-color: var(--bg-dark-3);
      color: var(--text-dark-color-1);
      border: 1px solid var(--accent-1);
   }

.dark-mode {
   color: var(--text-light-color-1);
}

   .dark-mode .k-picker-solid {
      background-color: var(--bg-dark-1);
      color: var(--text-light-color-1);
   }

      .dark-mode .k-picker-solid button:hover {
         background-color: var(--bg-dark-1);
      }

   .dark-mode .k-dropdownlist-popup, .dark-mode .k-list {
      border-color: var(--add-25-white);
      background-color: var(--bg-dark-2);
      color: var(--text-light-color-1);
   }

      .dark-mode .k-dropdownlist-popup .k-list-item:hover {
         background-color: var(--bg-dark-1);
         color: var(--text-light-color-3);
      }

      .dark-mode .k-dropdownlist-popup .k-list-item.k-selected:hover {
         background-color: var(--main-dark-color);
      }

   .dark-mode .k-colorpicker button.k-button {
      height: 1.3rem;
      width: 1.3rem;
      margin-top: .1rem;
   }

      .dark-mode .k-colorpicker button.k-button:hover {
         background-color: var(--add-10-white);
      }

   .dark-mode .k-colorpicker .k-i-caret-alt-down {
      margin-top: .5rem;
   }

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

   .dark-mode .k-grid-content, .dark-mode .k-table, .dark-mode .k-data-table {
      background-color: var(--bg-dark-2);
      color: var(--text-light-color-1);
   }

   .dark-mode .k-toolbar {
      background-color: var(--bg-dark-1);
   }

   .dark-mode .message {
      color: var(--text-light-color-1) !important;
   }

   .dark-mode .k-pager {
      background-color: var(--bg-dark-1);
   }

   .dark-mode .item-selected {
      background-color: var(--bg-dark-1);
   }

   .dark-mode .widget-common {
      background-color: var(--bg-dark-1);
   }

   .dark-mode .text-card-field-inner {
      color: black;
   }

   .dark-mode .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
   .dark-mode .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
      background-color: var(--bg-dark-3);
   }

   .dark-mode .form li.k-tabstrip-item.k-item.k-state-default {
      color: var(--accent-2-highlight);
   }

   .dark-mode .header-toolbar {
      background-color: var(--bg-dark-3);
   }

   .dark-mode .form label {
      color: white;
   }

   .dark-mode .info-tile .info-text {
      color: var(--accent-2-highlight);
   }

   .dark-mode #lookup-search-box {
      background-color: var(--bg-dark-1) !important;
   }

   .dark-mode .notification .k-notification {
      color: black !important;
      text-shadow: 1px 1px 2px white, 0 0 25px white, 0 0 5px white;
   }

   .dark-mode .grid-2rows .header-row {
      background-color: var(--bg-dark-3);
   }

   .dark-mode .message-editor {
      background-color: var(--bg-dark-3) !important;
      color: var(--text-light-color-1);
   }

   .dark-mode .k-menu-group, .k-menu.k-context-menu {
      background-color: var(--bg-dark-1);
      color: var(--text-light-color-1);
   }

      .dark-mode .k-menu-group > .k-separator, .k-menu.k-context-menu > .k-separator, .dark-mode .k-menu-group > .k-separator, .k-menu.k-context-menu > .k-separator {
         border-color: var(--accent-1);
      }

   .dark-mode .dialog-form {
      color: var(--text-light-color-1);
   }

   .dark-mode .k-upload .k-dropzone, .dark-mode .k-upload .k-upload-dropzone, .dark-mode .k-upload {
      background-color: var(--bg-dark-1);
      color: var(--text-light-color-1);
      border-color: var(--accent-1);
   }

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

   .dark-mode th.k-header {
      background-color: var(--main-dark-color);
   }

   .dark-mode .k-grid-header, .dark-mode .k-grouping-header, .dark-mode .k-grid-add-row, .dark-mode .k-grid-footer {
      background-color: var(--main-dark-color);
   }

   .dark-mode .form .k-input-inner {
      background-color: var(--bg-dark-2);
   }

   .dark-mode .k-scheduler-layout-flex .k-scheduler-head, .dark-mode .k-scheduler-layout-flex .k-sticky-cell, .dark-mode .k-scheduler-layout-flex .k-scheduler-body {
      background-color: var(--bg-dark-2);
      color: var(--text-light-color-1);
   }

   .dark-mode .k-scheduler-layout-flex .k-scheduler-cell.k-side-cell, .dark-mode .k-scheduler-layout-flex .k-scheduler-cell.k-heading-cell, .dark-mode .k-scheduler-layout-flex .k-scheduler-cell {
      border-color: var(--add-50-white);
   }

   .dark-mode .k-scheduler-toolbar .k-nav-current {
      color: var(--text-light-color-1);
   }

   .dark-mode .k-scheduler table, .dark-mode .k-scheduler thead, .dark-mode .k-scheduler tfoot, .dark-mode .k-scheduler tbody, .dark-mode .k-scheduler tr, .dark-mode .k-scheduler th, .dark-mode .k-scheduler td, .dark-mode .k-scheduler div, .dark-mode .k-scheduler .k-scheduler-edit-dialog, .dark-mode .k-scheduler > * {
      background-color: var(--bg-dark-2);
   }

   .dark-mode .select-template-dialog ul {
      background-color: var(--bg-dark-2);
   }

   .dark-mode .k-loader-container-inner {
      background-color: var(--add-90-black);
   }

   .dark-mode .settings-list div.item-selected:hover {
      background-color: black;
   }

   .dark-mode .login-panel {
      background-color: var(--bg-dark-1);
   }

   .dark-mode .tos-checkbox #tos-checkbox {
      border-color: white;
   }

   .dark-mode .login-panel .tos-checkbox a, .dark-mode .login-button a {
      color: var(--accent-4);
   }

      .dark-mode .login-panel .tos-checkbox a:hover, .dark-mode .login-button a:hover{
         color: var(--accent-3);
      }

   .dark-mode .create-edit {
      background-color: var(--bg-dark-1) !important;
   }