.dash-component {
    position: absolute;
    border: dotted 1px #666;
    cursor: move;
    z-index: 100;
}

    .dash-component:hover {
    }

    .dash-component .preview {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        display: block;
        opacity: .5;
    }

.dash-component-container-icon {
    display: flex;
    background: #fff;
    opacity: .5;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 4em;
    overflow: hidden;
}

.dash-component-menu-icon {
}

.dash-page {
    position: relative;
}

    .dash-page svg.xgrid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #FFFFCC;
        z-index: 1;
    }

.dash-selected {
    border: dotted 2px #333;
}

.dash-component-menu {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;
    z-index: 9999;
}

/*--------------------------------------------------------*/
.userfilter-xmoney-textbox, .userfilter-xdate-textbox {
    background-color: #595959;
    color: #fff;
}

/*--------------------------------------------------------*/
.XDump {
    font-size: 1em;
    background-color: #fff;
}

    .XDump .table {
        border-collapse: collapse;
        border-radius: var(--component-border-radius);
    }

    .XDump .table td {
        padding: 4px;
        white-space: nowrap;
        /*background-color: var(--color-component-bg);*/
        color: var(--color-component-text);
    }

        .XDump .table th {
            position: sticky;
            top: -1px;
            padding: 8px 10px;
            border: none;
            white-space: nowrap;
            background-color: var(--color-component-header-bg);
            color: var(--color-component-header-text);
        }


/*--------------------------------------------------------*/
.XGauge {
    background-color: #fff;
}

/*--------------------------------------------------------*/
.XImage {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .XImage img {
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        object-position: left top;
    }

/*--------------------------------------------------------*/
.XMapRegion {
}
    .XMapRegion .leaflet-container * {
        font-family: Montserrat, Verdana, Verdana, Geneva, Tahoma, sans-serif !important;
        /*background-color: var(--color-component-bg);*/
    }

    .XMapRegion .map-title {
        color: #333;
        font-weight: bolder;
        border-bottom: solid 1px #333;
    }

    .XMapRegion .info {
        font-family: var(--font-family);
        border: var(--component-border);
        border-radius: var(--component-border-radius);
        background-color: var(--color-component-bg);
        color: var(--color-component-text);
        padding: var(--component-padding);
    }

    .XMapRegion .legend {
        font-family: var(--font-family);
        border: var(--component-border);
        border-radius: var(--component-border-radius);
        background-color: var(--color-component-bg);
        color: var(--color-component-text);
        padding: var(--component-padding);
    }

/*--------------------------------------------------------*/
.XMetric {
    padding: var(--component-padding);

}

    .XMetric .xmetric-container {
        position: relative;
        height: 100%;
        overflow: auto;
    }

        .XMetric .xmetric-container .label {
            font-size: 1.5em;
            font-weight: bolder;
            padding: 4px;
            position: absolute;
            top: 0px;
            left: 0px;
            border-bottom: solid 1px #ccc;
        }

        .XMetric .xmetric-container .value {
            font-size: 2em;
            font-weight: bolder;
            text-align: right;
            padding: 4px;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }

/*--------------------------------------------------------*/
.XPie {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*--------------------------------------------------------*/
.XText {
    background-color: var(--color-component-bg) !important;
    color: var(--color-component-text) !important;
}

    .XText .xcontent-data {
        padding: 10px;
        overflow-y: auto;
    }


/*--------------------------------------------------------*/
.XInfo {
    background-color: var(--color-component-bg) !important;
    color: var(--color-component-text) !important;
    font-size: .8em;
    border: none;
}

    .XInfo .xcontent-data {
        padding: 10px;
        overflow-y: auto;
    }

    .XInfo .border-bottom {
        border-bottom: dotted 1px var(--color-component-text) !important;
    }

        .XInfo .xcontent-data table {
            background-color: transparent !important;
        }

        .XInfo .xcontent-data tr {
            background-color: transparent !important;
        }

        .XInfo .xcontent-data td {
            background-color: transparent !important;
            color: var(--color-component-text);
        }