html {
   font-size: 14px;
}

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

html {
   position: relative;
   min-height: 100%;
}

body {
   font-size: 11pt;
   /*margin-bottom: 60px;*/
}

.bi {
   vertical-align: -0.125em;
   pointer-events: none;
   fill: currentColor;
}

a.navbar-brand {
   white-space: normal;
   text-align: center;
   word-break: break-all;
}


[data-letters]:before {
   content: attr(data-letters);
   display: inline-block;
   font-size: 1em;
   width: 2.5em;
   height: 2.5em;
   line-height: 2.5em;
   text-align: center;
   border-radius: 50%;
   background: #d8b330;
   vertical-align: middle;
   margin-right: 1em;
   color: #fff;
}

#userMenu {
   border: 0;
   background-color: transparent;
}

   #userMenu.dropdown-toggle::after {
      display: none;
   }

   #userMenu:focus {
      outline: none;
   }

a {
   color: #00a37c;
}

.menucol {
   background-image: linear-gradient(135deg, #040f49 25%, #474787 60%);
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
}

   .menucol.test {
      background-image: linear-gradient(135deg, #351c0f 25%, #8e4c05 60%);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
   }

   .menucol.invalid {
      background-image: linear-gradient(135deg, #350f0f 25%, #8e0505 60%);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
   }

.btn-primary {
   color: #fff;
   background-color: #00a37c;
   border-color: #00a37c;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active, .btn:hover {
   color: #fff;
   background-color: #1dfcc7;
   border-color: #1dfcc7;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
   background-color: #759797 !important;
   border-color: #759797 !important;
}

#menu.nav {
   display: block !important;
   width: 100% !important;
}


#menu .nav-link {
   color: #fff;
}

   #menu .nav-link:hover, #menu .nav-link:focus {
      color: #b1b1b1;
   }

#menu.nav-pills .nav-link.active, #menu.nav-pills .show > .nav-link {
   color: #fff;
   background-color: #00a37c;
   border-color: #00a37c;
}


.border-top {
   border-top: 1px solid #e5e5e5;
}

.border-bottom {
   border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
   font-size: 1rem;
   line-height: inherit;
}

.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   white-space: nowrap;
   line-height: 40px;
}

input[type=number] {
   max-width: 100px;
   text-align: right;
}

.form-checkboxlist {
   border: var(--bs-border-width) solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
}

   .form-checkboxlist label {
      display: block;
      margin-bottom: 3px;
   }

#theme-switcher-container {
   padding: 0 20px;
}

.switch {
   position: relative;
   display: inline-block;
   width: 44px;
   height: 24px;
}

   .switch input {
      opacity: 0;
      width: 0;
      height: 0;
   }

      .switch input:checked + .slider {
         background-color: #476173;
      }

         .switch input:checked + .slider:before {
            transform: translateX(20px);
         }

   .switch .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #7bb9f5;
      transition: 0.4s;
      border-radius: 20px;
   }

      .switch .slider:before {
         position: absolute;
         content: "";
         height: 16px;
         width: 16px;
         left: 4px;
         bottom: 4px;
         transition: 0.4s;
         border-radius: 50%;
         text-align: center;
         line-height: 16px;
      }

#theme-switcher-container .switch input:checked + .slider:before {
   background-color: transparent;
   border-radius: 50%;
   border-top-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
   box-shadow: inset -5px -3px 0 #d8e9ef;
}

#theme-switcher-container .switch .slider:before {
   background-color: yellow;
}

table {
   border-collapse: collapse;
   position: relative;
}

thead {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}

   thead th {
      border: none;
      border-width: 0;
   }

th, td {
   vertical-align: middle;
}

main > table > thead {
   top: -16px;
}

.fill-scroll {
   height: 100%;
}

   .fill-scroll .flex-fill {
      height: 200px; /* flex will re-calc height but will fail without a value set, this is now like min-height*/
   }

      .fill-scroll .flex-fill > div {
         overflow-y: auto;
         height: 100%;
      }


.json-wrapper {
   background-color: #fff;
   color: #000;
   padding: 0.5rem 1rem;
}

   .json-wrapper ul {
      list-style-type: none;
   }

#dataImages img {
   display: block;
   padding: 0.5rem;
   max-width: 100%;
}

#filterFormResults tr {
   cursor: pointer;
}

#clearSelection {
   text-decoration: none;
}

.noBottomBorder td {
   border-bottom-width: 0;
   padding-bottom: 0;
}

.noTopPadding th {
   padding-top: 0;
}

.noBottomPadding th {
   padding-bottom: 0;
}

#userDetails th {
   font-weight: normal;
}

.icoBtn {
   padding: 0.1rem 0.4rem !important;
}

.modal {
   --bs-modal-width: 550px;
}