[x-cloak] {
  display: none !important;
}

.tui-datepicker-input {
  border-radius: 3px !important;
}

.tui-calendar {
  width: 202px !important;
}

.tui-datepicker-type-date {
  width: 202px !important;
}

.tui-datepicker-body .tui-timepicker,
.tui-datepicker-footer .tui-timepicker {
  width: 202px !important;
}

.tui-calendar .tui-calendar-title-today {
  height: 20px !important;
  font-size: 10px !important;
  line-height: 24px !important;
}

.tui-calendar .tui-calendar-title {
  font-size: 12px !important;
}

.tui-calendar th,
.tui-calendar td {
  height: 20px !important;
}

.scrollbar-thin {
  scrollbar-width: thin;
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
}

.htmx-request .spinner {
  display: inline;
}

.htmx-request.spinner {
  display: inline;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

.icons-not-filled {
  font-variation-settings: 
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

.dark-header {
  background-color: #1a202c;
  color: #ffffff;
}

.dark-sidebar {
  background-color: #2d3748;
  color: #e2e8f0;
}

.dark-sidebar a {
  color: #e2e8f0;
}

.dark-sidebar a:hover {
  background-color: #4a5568;
}

.sidebar {
  width: 80px;
  transition: width 0.2s ease;
}

.hidden {
  display: none;
}

.force-hidden {
  display: none !important;
}

.inline{
  display: inline;
}

.sidebar:hover {
  width: 230px ;
  transition: width 0.5s ease;
}

.sidebar:hover .hidden {
  display: inline;
}

.tmeic-logo {
  display: none;
}

.tmeic-logo-sm {
  display: inline;
}

@media (max-width :1024px) {
  .tmeic-logo-sm {
    display: none;
  }

  .tmeic-logo {
    display: none;
  }
}

.content{
  width: calc(100%-80px);
}

.sidebar:hover .content{
  width: calc(100%-240px);
}

.global-spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: none;
}

/* Show spinner when parent has htmx-request class */
#global-spinner.htmx-request .global-spinner {
  display: block;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sidebar:hover .inline {
  display: inline;
}

.form-group {
  margin-bottom: 10px;
}

.has-danger .form-control {
  border-bottom: 2px solid #dc1d34;
}

.indented {
  margin-left: 25px; 
}

.sidebar:hover .vertical-line {
  border-left: 5px solid rgb(250, 250, 252);
  height: 40px;
}

.sidebar:hover .vertical-linebefore{
  border-left: 5px solid rgb(89, 89, 94);
  height: 40px;
}

@media (max-width: 1023px) {
  
  .vertical-line {
    border-left: 5px solid rgb(250, 250, 252);
    height: 40px;
  }
  
  .vertical-linebefore{
    border-left: 5px solid rgb(89, 89, 94);
    height: 40px;
  }
  
}

.tui-timepicker {
  padding: 10px 5px !important;
  border: none !important;
  width: 80% !important;
  background-color: transparent !important;
}

.tui-timepicker-row {
  width: 70% !important;
}
.tui-timepicker-btn-area .tui-timepicker-spinbox-input {
  width: 90% !important;
}

.tui-datepicker {
  position: absolute !important;
  z-index: 60;
}


/* Border colors */
.border-level-1 { border-color: #581C1C; } 
.border-level-2 { border-color: #7F1D1D; } 
.border-level-3 { border-color: #991B1B; } 
.border-level-4 { border-color: #B91C1C; }
.border-level-5 { border-color: #DC2626; } 
.border-level-6 { border-color: #EF4444; }
.border-level-7 { border-color: #F87171; } 
.border-level-8 { border-color: #FCA5A5; }


/* Background colors matching border-levels */
.bg-level-1 {background-color: #3B0A0A;}
.bg-level-2 { background-color: #581C1C; } 
.bg-level-3 { background-color: #7F1D1D; } 
.bg-level-4 { background-color: #991B1B; } 
.bg-level-5 { background-color: #B91C1C; } 
.bg-level-6 { background-color: #DC2626; } 
.bg-level-7 { background-color: #EF4444; } 
.bg-level-8 { background-color: #F87171; } 
.bg-level-9 { background-color: #FCA5A5; }

/* Prevents pull-to-refresh on tabs and mobile browsers (not iOS Safari) */
html, body {
  overscroll-behavior-y: contain;
}