h1 {
    font-size: 1.5rem  !important;
    font-weight: 400 !important;
}
h2 {
    font-size: 1.2rem  !important;
}
h3 {
    font-size: 1rem  !important;
}
.mud-typography-subtitle1{
    font-size: 0.8rem  !important;
}
.sc-card-header-secondary {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
}
.sc-card-header-warning {
    background-color: rgb(255, 214, 176) !important;
    color: var(--mud-palette-text-primary);
}
.sc-card-header-success-lighten {
    background-color: rgb(223, 255, 199) !important;
    color: var(--mud-palette-text-primary);
}
.sc-text-custom-line-height-1 {
    line-height: 1.5;
}
/* HTML: <div class="loader"></div> */
.loader {
    width: 40px;
    height: 20px;
    background: orange;
    position: relative;
    animation: l9-0 1.5s infinite linear;
}
.loader:before,
.loader:after {
    content:"";
    position: absolute;
    background: inherit;
    bottom: 100%;
    width: 50%;
    height: 100%;
    animation: inherit;
    animation-name: l9-1;
}
.loader:before {
    left: 0;
    transform-origin: bottom left;
    --s:-1;
}
.loader:after {
    right: 0;
    transform-origin: bottom right;
}
@keyframes l9-0 {
    0%,10%   {transform:translateY(0%)    scaleY(1)}
    49.99%   {transform:translateY(-50%)  scaleY(1)}
    50%      {transform:translateY(-50%)  scaleY(-1)}
    90%,100% {transform:translateY(-100%) scaleY(-1)}
}
@keyframes l9-1 {
    10%,90% {transform: rotate(0deg)}
    50%     {transform: rotate(calc(var(--s,1)*180deg))}
}