html, body {
    /* font-family: Interstate, Roboto, "Helvetica Neue" !important; */
    font-size: 0.9rem;
}


:root {
    --bg-clr-selection: #0d6efd;
    --bg-clr-selection-hover: #0257d5;
    --clr-window-dialog-title: #fff;
    --overall-font-size: 0.9rem;
}


/* Telerik Editor custom font only for EditMode "DIV" https://docs.telerik.com/blazor-ui/components/editor/edit-modes/div */
/*.customEditorFont div.k-editor-content div.k-content {
    font-family: Interstate, Roboto, "Helvetica Neue" !important;
}*/


/* Used in 'AlarmEvent' to put different color on top of the highlighted events */
.k-state-selected .incomplete {
    background-color: var(--bg-clr-selection);
    margin-left: -13px;
    margin-right: -13px;
    margin-top: -1px;
    margin-bottom: -1px;
    padding-left: 13px;
    padding-right: 13px;
    border-radius: 0.25rem;
}

    .k-state-selected .incomplete:hover {
        background-color: var(--bg-clr-selection-hover);
        margin-left: -13px;
        margin-right: -13px;
        margin-top: -1px;
        margin-bottom: -1px;
        padding-left: 13px;
        padding-right: 13px;
        border-radius: 0.25rem;
    }


/* Adjustment to provide CERTAS color for a small switch control */
/* Bootstrap custom switches https://getbootstrap.com/docs/4.4/components/forms/#switches */
/* https://www.geeksforgeeks.org/how-to-change-the-checked-background-color-of-toggle-switch-in-bootstrap-4/ */
.custom-control-input:focus ~
.custom-control-label::before {
    /* when the button is toggled off 
  it is still in focus and a violet border will appear */
    border-color: var(--bg-clr-selection) !important;
    /* box shadow is blue by default
  but we do not want any shadow hence we have set 
  all the values as 0 */
    box-shadow: 0 0 0 0rem rgba(0, 0, 0, 0) !important;
}

/*sets the background color of switch to violet when it is checked*/
.custom-control-input:checked ~
.custom-control-label::before {
    border-color: var(--bg-clr-selection) !important;
    background-color: var(--bg-clr-selection) !important;
}

/*sets the background color of
          switch to violet when it is active*/
.custom-control-input:active ~
.custom-control-label::before {
    background-color: var(--bg-clr-selection) !important;
    border-color: var(--bg-clr-selection) !important;
}

/*sets the border color of switch to orange when it is not checked*/
.custom-control-input:focus:
not(:checked) ~ .custom-control-label::before {
    border-color: var(--bg-clr-selection) !important;
}

/* Colors for navigation drawer selection and hover */
.drawer-selection .k-drawer-item.k-state-selected {
    color: #ffffff;
    background-color: var(--bg-clr-selection);
}

    .drawer-selection .k-drawer-item.k-state-selected:hover {
        color: #ffffff;
        background-color: var(--bg-clr-selection-hover);
    }