@font-face {
    font-family: "DM Sans";
    src: url("/fonts/dm-sans.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --mud-palette-primary: #b74d01;
    --color-primary: #b74d01; /* Deep darkorange for strong brand presence */
    --color-primary-light: #ff6a00; /* Bright coral for highlights and accents */
    --color-primary-lighter: #fba24c; /* Soft orange for backgrounds or subtle elements */
    --color-white: #FFFFFF; /* Clean white for contrast and clarity */
    --color-black: #75797b; /* Solid black for text or deep contrast */
    --color-text: #2a2d35; /* Dark gray for readable body text */
    --color-gray: #616161; /* Neutral gray for borders, muted text */ 

    --color-palette-primary: #b74d01;
    --color-palette-primary-hover: #9c562426;
    --color-button-hover: #ff6a00;
}


body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.swal2-container {
    z-index: 1060 !important;
}

.mud-appbar {
    background-color: var(--color-white);
    border-bottom: 4px solid var(--color-primary-light); /* Adjust the thickness and color as needed */
    color: var(--color-black);
}

.mud-toolbar {
    width: 100% !important
}

.mud-table-root .mud-table-head .mud-table-cell {
    color: var(--mud-palette-primary) !important;
    font-weight: 400 !important;
    background-color: var(--mud-palette-primary-hover) !important;
    font-weight: 800 !important;
    line-height: 1.5rem !important;
}

.dialog-background-title {
    background: rgb(from var(--mud-palette-info-lighten) r g b / 50%);
    color: var(--mud-palette-white);
}

.mud-tab {
    cursor: pointer;
}
/* Disable the slider. It doesn't position itself correctly. */
.mud-tab-slider.mud-tab-slider-horizontal {
    height: 0 !important;
}

.mud-tab.mud-tab-active {
    background-color: var(--color-palette-primary-hover);
    color: var(--color-palette-primary);
    border-radius: 0px;
    border-style: solid;
    border-width: 0 0 4px 0;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-disabled {
    color: var(--color-primary-light);
}

.mud-input.mud-input-outlined.mud-disabled .mud-input-outlined-border {
    border-color: var(--color-primary-light);
}

.mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    color: var(--color-text);
    font-size: 12px;
    font-weight: 400;
}

.mud-primary-text {
    color: var(--color-primary-lighter) !important;
    --mud-ripple-color: var(--color-palette-primary) !important;
}

.mud-secondary-text {
    color: var(--color-primary-lighter) !important;
    --mud-ripple-color: var(--color-palette-primary) !important;
}

h5 {
    color: var(--color-gray);
}

h6 {
    color: var(--color-gray);
}

.mud-tabs-tabbar-primary {
    background-color: var(--color-primary);
    color: var(--mud-palette-primary-text);
}

.mud-button-filled.mud-button-filled-primary {
    color: var(--mud-palette-primary-text);
    --mud-ripple-color: var(--mud-palette-primary-text);
    background-color: var(--color-primary);
}

    .mud-button-filled.mud-button-filled-primary:hover {
        color: var(--mud-palette-primary-text);
        --mud-ripple-color: var(--mud-palette-primary-text);
        background-color: var(--color-button-hover);
    }
.mud-main-content {
    padding-top: 0px !important;
}
.tabActiveheader {
    background-color: var(--color-primary-light) !important;
}

.center-app-meta {
    color: var(--color-primary-light) !important;
}

.mud-drawer.mud-drawer-responsive.mud-drawer-pos-right.mud-drawer--closed, .mud-drawer.mud-drawer-persistent.mud-drawer-pos-right.mud-drawer--closed {
    box-shadow: none;
    right: -800;
}

.fab-xs {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
}

    .fab-xs .mud-icon-root {
        font-size: 12px !important;
        line-height: 20px !important;
    }