/*To alternate the row color in the grid*/
.alt-item-rowgrid > td {
    background-color: rgba(0, 0, 255, 0.05);
}

/*To hide the HeaderRow (it is used in the grid) */
.hiddenHeader {
    display: none;
}

/*To avoid that a word from being truncated (it is used in the grid) */
.removeWrapping {
    overflow-wrap: break-word !important;
}

/* To show elements on the same row*/
.inlineItemOnSingleRow {
    display: inline-flex;
}


/* The chart Tooltip window*/
.chartTooltip {
    background-color: white;
    color: black;
    text-align: left;
}

/* The chart Tooltip header (with time)*/
.chartTooltipHeader {
    background-color: #9b17e2; /*violet*/
    color: white;
    font-weight: bold;
}

table.tooltipTable tbody td {
    /* background-color: white;*/
    /* color: black; */
    padding-left: 4px;
    padding-right: 1px;
    border-color: lightgray;
    border-width: 1px;
    border-style: dotted;
}

/*table.tooltipTable tr:nth-child(even) {
    background-color: lightgray;
}*/

/*Spinner for waiting response*/
.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


#coloredLedBox {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
}

/*Images in documentation*/
.docImage {
    border: 2px solid #9c63ff;
    padding: 15px;
}

.dx-resizable-handle {
    background-color: #9c63ff;
    height: 5px;
}

/*.dx-resizable-handle::after {
    background-color: red;
}*/

/* Hide the Footer's Today Button
    https://github.com/DevExpress-Examples/blazor-style-migration
*/
.dxbl-calendar-footer > button:first-child {
    display: none;
}

.dxbl-calendar-footer {
    display: none;
}

/* a little padding in devExpress modal window*/
.dxbl-modal-content > dxbl-form-layout {
    padding: 5px;
}

/* a little white border for QR code*/
.qrcontainer {
    display: inline-block;
    border: 5px solid white;
}