html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #F9FAFB !important;
}

.wind-arrow {
    transform-origin: center;
    transition: transform 0.5s ease;
}

#divLoader {
    position: fixed;
    top: 40%;
    left: 45%;
    z-index: 1234;
    display: none;
    background-color: transparent;
    width: 250px; /* adjust to desired width */
    height: 250px; /* adjust to desired height */
    border-radius: 10% 25% 15% 20%;
    overflow: hidden; /* hide overflowing content */
}
.green-eye {
    color: green;
}
.min-average-input {
    width: 3ch; /* ch units represent the width of the '0' character of the current font */
}
.alert-circle {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.maintenance-icon {
    color: red;
}



.s-site-mobile .s-type:before {
    content: "M";
}

.s-site-stationary .s-type:before {
    content: "S";
}

.s-grid.k-grid {
    background-color: #FFF !important;
    padding: 1rem !important;
    font-family: Poppins, Helvetica, "sans-serif";
}

    .s-grid.k-grid .k-table-td:not(.k-hierarchy-cell):empty:before {
        content: "-";
    }

    .s-grid.k-grid .k-grid-header,
    .s-grid.k-grid .k-toolbar {
        background-color: transparent !important;
    }
    .s-grid.k-grid th, .k-grid td {
        border: none;
    }

    .s-grid.k-grid .k-column-title {
        font-weight: 600;
        color: #B5B5C3 !important;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.1rem;
    }

    .s-grid.k-grid a {
        color: #3699FF;
        text-decoration: inherit;
        font-weight: 600;
    }

    .s-grid.k-grid .k-table-thead,
    .s-grid.k-grid .k-table-header,
    .s-grid.k-grid .k-table-group-sticky-header {
        background-color: transparent !important;
    }
    .s-grid.k-grid .k-grid-header th {
        font-weight: 600;
        color: rgb(181, 181, 195) !important;
        text-transform: uppercase;
        border-bottom: 1px solid rgb(222, 226, 230);
    }

    .s-grid.k-grid .k-table-th,
    .s-grid.k-grid td,
    .s-grid.k-grid .k-table-td {
        border-inline-start-width: 0;
    }

    .s-grid.k-grid .k-filter-menu-container .k-filter-and {
        display: none;
    }

    .s-grid.k-grid .k-grid-toolbar {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

        .s-grid.k-grid .k-grid-toolbar .k-grid-excel {
            margin-left: auto;
        }

.aside-fixed .aside {
    z-index: 1000 !important
}

/*.timezone {
    color: red;
}*/

/* Fix for padding within grid filters */
.k-filter-menu-container > span.k-input > span.k-input.k-input-inner {
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

.dashboard-wrapper {
    background-color: #FFF !important;
}

    .dashboard-wrapper .k-tilelayout {
        background-color: #FFF !important;
    }

    .dashboard-wrapper .k-listview {
        border: 0 !important;
        overflow: hidden;
    }
    .dashboard-wrapper .k-listview-content {
        margin-left: 1rem;
        overflow-x:scroll;
        border: 0 !important;
    }
    .dashboard-wrapper .k-listview-item {
        margin-right: .5rem;
    }
    .dashboard-wrapper .subheader .subheader-separator.subheader-separator-ver {
        width: 1px;
        height: 22px;
    }

    .dashboard-wrapper .subheader .subheader-separator {
        display: block;
        width: 12px;
        height: 4px;
        border-radius: 2px;
    }
    .dashboard-wrapper .k-tilelayout .k-card-body {
        margin: 0 !important;
        padding: 0 !important;
    }
    .dashboard-wrapper .k-tilelayout .k-chart g {
        width: 100% !important;
        height: 100% !important;
    }

.header-container {
    min-height: 100px;
}

#mapDiv {
    border-radius: 15px;
    overflow: hidden;
}


.sensorColumns {
    column-gap: 5rem;
    columns: 30rem auto;
}

/* Expand/Collapse component */
.as-button--expandToggler {
    display: inline-flex !important; /* to over-ride bootstrap's btn style */
    flex-direction: row;
    align-items: center;
    color: white;
    &::before {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font: var(--fa-font-solid);
        content: '\f105';
        transition: rotate 0.3s ease-out;
    }
    &.as--open::before {
        rotate: 90deg;
    }
    > * {
        padding-left: 0px;
        margin-top: 0px;
        margin-left: 1rem;
        font-weight: normal;
        color: white;
        font-size: var(--bs-btn-font-size);
    }
} 
.as-expandable {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .75s ease-in-out;
    .as-expandable-contentwrapper {
        overflow: hidden;
    }
}

.as-expandable.as--open {
    grid-template-rows: 1fr;

}
.hover-highlight:hover {
    background-color: #f5f5f5; /* Light gray background on hover */
    cursor: pointer; /* Change the cursor to a pointer */
}

/* darrel's utilities */
.k-bootstrap-sizing {
    /* Kendo components don't match bootstrap size-wise. This class will make
       child kendo components closer to Bootstrap when grouped together */
    input.k-input-inner {
        padding: .775rem 3rem .775rem 1rem;
    }
}
/* /END darrel's utilities */

/* styles kendo grid column headers with param and site names */
.grid-header-paramname,
.grid-header-sitename {
    display: block;
    font-size: 80%;
    color: #999;
}

.k-listview {
    overflow-x: auto !important;
    border: none !important;
}

.globalLoader {
    padding-top: 10%;
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    background: rgba(0, 0, 100, .4);
    z-index: 1000;
    opacity: .75;
    &.fullScreen
    {
        position: fixed;
    }

}