:root {
    --color-primary: #2799cc; /* Deep blue for strong brand presence */
    --color-primary-light: #00B4D8; /* Bright cyan for highlights and accents */
    --color-primary-lighter: #28bdd9; /* Soft blue 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-family-main: "Open Sans", Helvetica, Arial, Verdana, sans-serif; /* Main font family for the application */
}

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

body {
    font-family: var(--font-family-main);
    /*padding-top: 50px;*/
    /*padding-bottom: 20px;*/
}

/*.mud-appbar-dense~.mud-main-content {*/
/*    padding-top:0;*/
/*}*/

/*!* 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: 800;
    /*line-height: 1.5rem;*/
    background-color: var(--color-primary);
    font-family: var(--font-family-main);
}

/*.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);
}

.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);
}

/* Fix for MudButton Size.Small with text-nowrap class - prevent text wrapping */
.mud-button.text-nowrap .mud-button-label {
    white-space: nowrap !important;
    width: stretch;
}