:root {
    --mud-palette-primary: #5FC1FF;
}

body{
    font-family: 'Karla', sans-serif;
}

/* Default position for small screens */
.faux-nav-overlay {
    position: absolute;
    top: 380px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.e-dropdownbase .e-list-item.e-active {
    color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-surface) !important;
}

.e-popup .dropdown-header {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.e-dropdownbase .e-list-item {
    
    color: var(--mud-palette-text-primary) !important;
    background-color: var(--mud-palette-surface) !important;
}

.e-dropdownbase .e-list-item:hover {
    opacity: 0.8;
}

.test {
    background-color: rebeccapurple;
}

.mud-surface {
    background-color: var(--mud-palette-surface) !important;
}

.mud-main-content
{
    /*To remove the vertical scrollbar on all mud-main content*/
    max-height: 95vh;
}
.filters
{
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 5px !important;
}

.mud-input-border-mimic
{
    border-radius: var(--mud-default-borderradius);
    border-color: var(--mud-palette-lines-inputs);
}
.mud-input-border-mimic:hover
{
    border-color: var(--mud-palette-action-default);
}

/*.mud-input-error-mimic
{
    border-color: red !important;
}*/


.gm-style-iw-d { /* Styles applied to the "container" element if it has a child element with class "item" */

    overflow: hidden !important;
    padding-bottom: 10px !important;
    padding-right: 10px !important;

}



@media (max-width: 650px) {
    .Data-Grid-Column {
        height: 50vh;
    }
}


/* General Layout */
.Map-And-Grid-Cluster {
    display: flex;
    flex-wrap: wrap;
}

/* Google Map Column */
.Map-And-Grid-Cluster .Map-Column {
    min-width: 300px;
    max-height: 80vh;
    min-height: 30vh;
}

/* Data Grid Column */
.Map-And-Grid-Cluster .Data-Grid-Column {
    max-height: 80vh;
    min-height: 30vh;
    overflow: auto;
}

/* Accessing the ExpandBoxes in the cluster generically*/
.Data-Grid-Column > * > * > *{
    width: 100%;
    min-height: 250px;
    overflow: auto;
}

@media print {
    body {
        display: none;
    }
}


.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    z-index: -1; /* Ensure it's above the Word Processor */
}