.column-width-auto
{
   width: 1px;
   white-space: nowrap !important;
}

.table-row-selected
{
   background-color: rgba(33, 150, 243, 0.30);
}

.mud-expansion-panels
{
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.mud-expand-panel-header
{
   background-color: #2196f3;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
}

.loader
{
   font-size: 10px;
   margin: 50px auto;
   text-indent: -9999em;
   width: 11em;
   height: 11em;
   border-radius: 50%;
   background: #ffffff;
   background: -moz-linear-gradient(left, #00C853 10%, rgba(255, 255, 255, 0) 42%);
   background: -webkit-linear-gradient(left, #00C853 10%, rgba(255, 255, 255, 0) 42%);
   background: -o-linear-gradient(left, #00C853 10%, rgba(255, 255, 255, 0) 42%);
   background: -ms-linear-gradient(left, #00C853 10%, rgba(255, 255, 255, 0) 42%);
   background: linear-gradient(to right, #00C853 10%, rgba(255, 255, 255, 0) 42%);
   position: relative;
   -webkit-animation: load3 1.4s infinite linear;
   animation: load3 1.4s infinite linear;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
}

   .loader:before
   {
      width: 50%;
      height: 50%;
      background: #00C853;
      border-radius: 100% 0 0 0;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
   }

   .loader:after
   {
      background: #ffffff;
      width: 75%;
      height: 75%;
      border-radius: 50%;
      content: '';
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
   }

@-webkit-keyframes load3
{
   0%
   {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }

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

@keyframes load3
{
   0%
   {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }

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

/* ── Responsive layout ─────────────────────────────────────────────────────────
   Main content horizontal padding: minimal on mobile, generous on desktop.
   Replaces the fixed MudMainContent px-16 (64 px each side).
───────────────────────────────────────────────────────────────────────────── */
.rts-main-content {
    padding-top: var(--mud-appbar-height);
    padding-left: 8px;
    padding-right: 8px;
}

@media (min-width: 600px) {
    .rts-main-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 960px) {
    .rts-main-content {
        padding-left: 64px;
        padding-right: 64px;
    }
}

/* ── AppBar auto-height ────────────────────────────────────────────────────────
   Allows the AppBar to grow when its content wraps (e.g. long company name).
   ResizeObserver in site.js keeps --mud-appbar-height in sync so the drawer
   clip position and main content top offset both update automatically.
───────────────────────────────────────────────────────────────────────────── */
.mud-appbar {
    height: auto !important;
}

.mud-appbar .mud-toolbar {
    height: auto !important;
    min-height: 64px;
    flex-wrap: wrap;
    padding-block: 8px;
}