:root {
    --color-primary: #5EA73C; /* Deep green for strong brand presence */
    --color-primary-light: #68ad3c; /* Bright green for highlights and accents */
    --color-primary-lighter: #92C83E; /* Soft greenyellow 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 */
}

@font-face {
    font-family: 'Century Gothic';
    src: url('/css/fonts/CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Century Gothic', sans-serif;
    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-dialog-container {
    xxxz-index: 1050 !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-table-root .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-primary);
    font-weight: 400 !important;
    line-height: 1.5rem;
    background-color: var(--color-primary);
    font-family: 'Century Gothic', sans-serif;
}
.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-primary);
    color: var(--mud-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(--mud-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-main-content {
    padding-top: 0px !important;
}

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