/* Disable pulldown refresh */
html {
    overscroll-behavior: none;
}

body {
    overscroll-behavior: contain;
}

/* Main Styling */
:root {
    --mud-palette-background: #000000 !important;
    /*    --mud-palette-background: var(--theme-palette-color-first) !important;*/
    --mud-palette-primary: #FFFFFF !important;
    --mud-palette-secondary: #FFFFFF !important;
    --mud-palette-tertiary: #D5BF7B !important;
    --mud-palette-appbar-background: #000000 !important;
    --mud-palette-drawer-background: var(--theme-palette-color-second) !important;
    --mud-palette-text-primary: #FFFFFF !important;
    --mud-palette-drawer-text: var(--theme-font-color-second) !important;
    --mud-palette-drawer-icon: #FFFFFF !important;
    --mud-palette-primary-hover: #000000 !important;
}

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

.mud-button-filled.mud-button-filled-primary {
    color: #000000 !important;
    --mud-ripple-color: var(--mud-palette-primary-text);
    background-color: #FFFFFF !important;
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: black !important;
    color: white !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    color: #FFFFFF !important;
    --mud-ripple-color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    , var(--mud-palette-border-opacity));
}

.mud-button-outlined.mud-button-outlined-secondary {
    color: #FFFFFF !important;
    --mud-ripple-color: #000000 !important;
    border: 1px solid #FFFFFF !important;
    , var(--mud-palette-border-opacity));
}

.blur-background {
    backdrop-filter: blur(10px);
}

.fullWidth {
    width: -webkit-fill-available !important;
}

    .fullWidth form {
        width: -webkit-fill-available !important;
    }

.displayNone {
    display: none;
}

.awaitingConfirmation {
    margin: 0 auto;
    width: 98%;
}

.page_Settings td {
    border-right: none !important;
}

.mud-checkbox .mud-icon-root.mud-svg-icon {
    fill: #FFFFFF !important;
}

.page_Settings .mud-input {
    width: 100%;
}

/* Firefox Specific issue styling */
@supports (-moz-appearance:none) {
    .mud-main-content, .mud-container, #dashboard-container {
        height: 100%;
    }
}

/* ERROR/ALERTS MODAL */
.mud-dialog {
    background: var(--theme-palette-color-second) !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

/*.mud-dialog button {
    background-color: var(--theme-palette-color-third) !important;
}*/

.mud-dialog button span {
    color: #000000 !important;
}

.mud-dialog button span:hover {
    color: var(----mud-palette-primary-hover);
}

/* BUTTONS */
.cancelBtn {
    background: var(--mud-palette-error) !important;
}

    .cancelBtn span {
        color: #fff !important;
    }

/* DARK CONTENT WRAPPER */
.page_Wrapper {
    background: var(--theme-palette-color-second);
    border-radius: 5px;
    box-shadow: var(--mud-elevation-1);
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    padding: 0px 5px 5px 5px !important;
}

.mud-table {
    box-shadow: none !important;
}

/* PROGRESS BAR */
.mud-progress-linear.mud-progress-linear-color-info:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background: var(--theme-palette-color-third) !important;
}

.mud-progress-linear .mud-progress-linear-bars {
    background: var(--theme-palette-color-second) !important;
}

/* APP BAR*/
.mud-nav-group:nth-of-type(1) {
    box-shadow: var(--mud-elevation-3);
    background: var(--theme-palette-color-first);
}

.mud-appbar {
    border-bottom: 1px solid #2f2f3c;
}

    .mud-appbar a {
        color: #fff;
    }

        .mud-appbar a:hover {
            opacity: 0.7;
        }
/* SIDE NAVBAR */
.mud-drawer {
    border-right: 2px solid var(--theme-palette-color-fourth);
}

    .mud-drawer a:hover {
        color: var(--theme-palette-color-third) !important;
    }

.active {
    background: #FFFFFF !important;
}

    .active span {
        color: #000000 !important;
    }

.mud-nav-link .mud-nav-link-text, .logout-button span {
    font-size: 15px !important;
    font-weight: normal !important;
    color: #FFFFFF !important;
}

.active .mud-nav-link-text {
    font-weight: bold !important;
    color: #000000 !important;
    font-size: 15px !important;
}

.logout-button {
    padding: 8px 16px 8px 11px;
    color: var(--theme-font-color-second) !important;
}

    .logout-button i {
        font-size: 1.5rem !important;
    }

    .logout-button span {
        padding-left: 12px;
    }

        .logout-button span:hover {
            color: var(--theme-palette-color-third) !important;
        }
.mud-navmenu .mud-divider {
    width: 80%;
    margin: 0 auto;
    opacity: 0.1;
    margin-top: 20px;
    margin-bottom: 20px;
}

.mud-navmenu .packageVersion {
    opacity: 0.2;
}

.mud-table {
    border-radius: 0 !important;
}

/* Extension Panels */
.mud-expand-panel {
    background: var(--theme-palette-color-second) !important;
}

/* MAIN */

/* Down arrow on Report schedular arrows */
.mud-input-adornment .mud-svg-icon {
    fill: #FFFFFF !important;
}

.mud-paper {
    background: var(--theme-palette-color-second) !important;
    border: 1px solid var(--theme-palette-color-first) !important;
}

.close-button {
    float: right;
    background: var(--theme-palette-color-third) !important;
}

    .close-button span {
        color: var(--theme-palette-color-second) !important;
    }

.chartName {
    color: var(--theme-font-color-third) !important;
}

.popup-modal {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    background: var(--theme-palette-color-fourth) !important;
    padding: 20px;
    border: 2px solid #ebebeb;
    box-shadow: var(--mud-elevation-3);
}

    .popup-modal .mud-grid-item {
        padding: 10px !important;
    }

    .popup-modal .mud-card-content {
        padding: 0 !important;
    }

    .popup-modal input, .popup-modal label {
        color: var(--theme-font-color-first) !important;
    }

    .popup-modal .mud-elevation-1 {
        box-shadow: none;
    }

.mud-container {
    width: 100%;
    max-width: 100% !important;
}

.mud-container {
    width: 100%;
    max-width: 100% !important;
}

.mud-input-slot {
    color: var(--theme-font-color-third);
}

.mud-grid-item .mud-grid-item.mud-popover {
    box-shadow: none !important;
    width: -webkit-fill-available !important;
    height: -webkit-fill-available !important;
}

#page_Reports .mud-grid-item .mud-menu, .mud-grid-item .mud-menu button {
    width: -webkit-fill-available !important;
    background: var(--theme-palette-color-second);
    padding: 10px 0;
    border: none !important;
    border-radius: 5px;
}

    #page_Reports .mud-grid-item .mud-menu, .mud-grid-item .mud-menu button span {
        color: var(--theme-font-color-first);
    }

    #page_Reports .mud-grid-item .mud-menu, .mud-grid-item .mud-menu button .mud-icon-root {
        color: var(--theme-palette-color-third) !important;
    }

/*.mud-popover a {
    color: green !important;
}*/

    .mud-popover a:hover {
        color: var(--theme-palette-color-third) !important;
        text-decoration: none !important;
    }

.mud-list-item-text a {
    color: var(--theme-font-color-first) !important;
}

.page_Wrapper {
    padding: 15px 5px;
}

.page_title {
    font-size: 2rem !important;
    font-weight: lighter;
    color: var(--theme-font-color-third) !important;
}

.mud-grid-item {
    padding: 8px 8px 0 8px !important;
}

.mud-input-control {
    margin-bottom: 20px !important;
}

.mud-table {
    background: var(--theme-palette-color-second) !important;
    border-radius: 5px !important;
}

.primaryBtn {
    background-color: #FFFFFF !important;
}

    .primaryBtn span {
        color: #FFFFFF !important;
    }

        .primaryBtn span:hover {
            color: var(----mud-palette-primary-hover);
        }
        .primaryBtn:disabled {
            visibility: hidden;
        }

.formError {
    color: var(--mud-palette-error);
}

.formSuccess {
    color: var(--mud-palette-success);
}

.mud-table-empty-row, .mud-table-cell {
    background-color: var(--theme-palette-color-second) !important;
}

.mud-table-sort-label:hover {
    color: var(--theme-palette-color-third) !important;
}

.mud-table-cell .mud-svg-icon {
    fill: var(--theme-palette-color-third) !important;
}

.mud-table-container {
    border-radius: 5px;
}

label, .mud-select-input, .mud-list-item-text, .mud-input {
    color: #FFFFFF !important;
}

label {
    opacity: 0.7;
}

.mud-table-pagination-actions .mud-button-root {
    color: var(--theme-font-color-first) !important;
}

    .mud-table-pagination-actions .mud-button-root:disabled {
        color: var(--theme-font-color-first) !important;
        opacity: 0.5;
    }

    .mud-table-pagination-actions .mud-button-root:hover {
        color: var(--theme-palette-color-third) !important;
        background: none !important;
    }

/*table button {
    background: var(--theme-palette-color-third) !important;
}*/

/*    table button span {
        color: var(--theme-font-color-fourth) !important;
    }*/

/* Device Monitor Information Selection */
.mud-tabs-toolbar {
    background: var(--theme-palette-color-second) !important;
    width: fit-content;
    margin: 0 auto;
}

.mud-tabs-tabbar {
    background-color: #393e45 !important;
}

.mud-tabs-toolbar-inner {
}

.device_GT {
    width: auto !important;
    max-width: 100% !important;
}

    .device_GT .device {
        background-image: url("../images/cabinet.png");
    }

.device_Kiosk .device {
    background-image: url("../images/kiosk.png");
}

.device_GT, .device_Kiosk {
    padding: 0;
    margin: 10px 5px auto;
    display: inline-flex;
    width: fit-content;
    max-width: 100% !important;
}

.device {
    background-color: #fff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 132px;
    width: 132px;
    word-wrap: break-word;
    border: 2px solid #fff;
    position: relative;
    border-radius: 5px;
    box-shadow: var(--mud-elevation-2);
    border: 2px solid var(--theme-palette-color-second);
    margin: 0 auto;
}

    .device .status {
        position: absolute;
        right: 3px;
        top: 3px;
        width: 20%;
        height: 20%;
        border-radius: 5px;
        border: 2px solid var(--theme-palette-color-second);
        box-shadow: var(--mud-elevation-1);
    }

    .location .status {

        right: 3px;
        top: 3px;
        width: 10%;
        height: 100%;
        border-radius: 5px;
        border: 2px solid var(--theme-palette-color-second);
        box-shadow: var(--mud-elevation-1);
    }

.arrow-flash {
    animation: flashFade 1.5s ease-out forwards;
    font-size: 24px;
}

@keyframes flashFade {
    0% {
        opacity: 0;
        transform: translateY(0px) scale(1);
    }

    20% {
        opacity: 1;
        transform: translateY(-3px) scale(1.1);
    }

    80% {
        opacity: 1;
        transform: translateY(-3px) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translateY(0px) scale(1);
    }
}


 .status-online {
    background: var(--mud-palette-success);
}

.status-offline {
    background: var(--mud-palette-error);
}

 .status-issue {
    background: var(--mud-palette-warning);
}

.status-unknown {
    background: #4184d7;
}

    .device .status-online {
        background: var(--mud-palette-success);
    }

    .device .status-offline {
        background: var(--mud-palette-error);
    }

    .device .status-issue {
        background: var(--mud-palette-warning);
    }

    .device .status-unknown {
        background: #4184d7;
    }

.device_GT .name, .device_Kiosk .name {
    word-wrap: normal;
    width: 100%;
    text-align: center;
    word-wrap: break-word;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--theme-palette-color-second);
    opacity: 0.9;
    color: #fff;
    text-shadow: 1px 1px 2px var(--theme-palette-color-second);
    padding: 2px 4px;
}

.device_GT .device-status-offline {
    animation-name: redBlinking;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background-image: url("../images/error.png"), url("../images/cabinet.png") !important;
}

.device_Kiosk .device-status-offline {
    ../images/cabinet.png animation-name: redBlinking;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    background-image: url("../images/error.png"), url("../images/kiosk.png") !important;
}

.device-status-issue {
    animation-name: yellowBlink;
    animation-duration: 1s;
    animation-iteration-count: 2;
}

.device-status-online {
    animation-name: greenBlink;
    animation-duration: 1s;
    animation-iteration-count: 2;
}

/* Device Monitor Legend */
#deviceMonitorLegend {
    margin-top: 10px;
}

    #deviceMonitorLegend .wrapper {
        display: inline;
        margin-right: 10px;
    }

        #deviceMonitorLegend .wrapper span {
            display: inline-block;
            position: relative;
            height: 12px;
            width: 12px;
            border-radius: 2px;
        }

        #deviceMonitorLegend .wrapper p {
            display: inline;
        }

        #deviceMonitorLegend .wrapper .online {
            background-color: var(--mud-palette-success);
        }

        #deviceMonitorLegend .wrapper .issue {
            background-color: var(--mud-palette-warning);
        }

        #deviceMonitorLegend .wrapper .offline {
            background-color: var(--mud-palette-error);
        }

        #deviceMonitorLegend .wrapper .unknown {
            background-color: #4184d7;
        }

/* DEVICE ANIMATION KEYFRAMES */
@keyframes greenBlink {
    0% {
        border-color: var(--theme-font-color-second);
    }

    50% {
        border-color: var(--mud-palette-success);
    }

    100% {
        border-color: var(--theme-font-color-second);
    }
}

@keyframes redBlinking {
    0% {
        border-color: var(--theme-font-color-second);
    }

    50% {
        border-color: var(--mud-palette-error);
    }

    100% {
        border-color: var(--theme-font-color-second);
    }
}

@keyframes yellowBlink {
    0% {
        border-color: var(--theme-font-color-second) !important;
    }

    50% {
        border-color: var(--mud-palette-warning) !important;
    }

    100% {
        border-color: var(--theme-font-color-second) !important;
    }
}


/* PAGE SPECIFIC RESPONSIVE CSS */
@media(max-width:600px) {
    .page_Settings table button {
        width: 100%;
    }

    .page_Settings .mud-table-cell:before {
        padding-right: 0px !important;
    }

    @media(min-width:600px) {
    }

    @media(min-width:960px) {
    }

    @media(min-width:1280px) {
    }
}

.tooltip {
    position: absolute;
    display: none;
    background-color: #333;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: pre-line !important; /* Ensures that line breaks in the tooltip are respected */
    z-index: 1000;
    pointer-events: none;
}

.state-label {
    font-size: 14px;
    fill: black; /* Color of the text */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-weight: bold;
}

.svg-container {
    width: 100%;  /*Container width will determine SVG width */
    padding-top: 75%;  /*Adjust aspect ratio (e.g., 75% for 4:3 aspect ratio) */
    position: relative;
}

    .svg-container svg {
        position: absolute;
        top: 45px;
        left: 0;
        width: 100%;
        height: 100%;
    }

.pattern-icon {
    background: repeating-linear-gradient( 45deg, #36d862, #36d862 4px, #ecf021 4px, #ecf021 8px );
    -webkit-background-clip: text;
    color: transparent;
    font-size: 48px; /* Adjust the size as needed */
}

.apexcharts-tooltip {
    color: black;
}

.full-width-tabs .mud-tabs-toolbar {
    display: flex;
    justify-content: space-between;
}

    .full-width-tabs .mud-tabs-toolbar .mud-tab {
        flex: 1; /* Make each tab take an equal share of the width */
        text-align: center; /* Center the tab text */
    }