:root { /* default theme dark */
    --areabg-color: #001e38; /* darkblue              ohsm_area, webkit-scrollbar-track, e-input-group.e-control-wrapper.ohsm_area.e-ddl */
    --bodybg1-color: #216ba5; /* midblue1        ohsm_body*/
    --bodybg2-color: #00427c; /* midblue2        ohsm_body */
    --txt-normal-color: #bfbfbf; /* lightgrey           menuitem, area(text), e-input-group.e-control-wrapper.ohsm_area.e-ddl */
    --txt-focus-color: #00a5fd; /* lightblue      menuitem_selected, a:link, a:visited, a:hover, webkit-scrollbar-thumb, -webkit-scrollbar-thumb:hover */
    --txt-disabled-color: #737373; /* darkgrey   menuitem_disabled */
    --txt-input-color: #ffffff; /* white     menuitem:hover */
    --txt-input-bg-disabled: #3d466c;
    --tooltip-fill-color: #d9d9d9; /* dataplot*/
    --tooltip-txt-color: black; /* dataplot*/

    --menu-bgcolor: #001e38; /* darkblue */
    --menu-fgcolor: #CCCCCC;
    --menu-selected-bgcolor: #001e38; /* darkblue */
    --menu-selected-fgcolor: #00a5fd; /* medium blue*/
    --menu--highlight-fgcolor: #00a5fd; /* lightblue */

    --ohsm-filterselected-bgcolor: #00a5fd; /*#001e38; /* darkblue*/
    --ohsm-scrollbar-bordercolor: #001e38; /* darkblue*/
    --ohsm-scrollbar-thumbcolor: #00a5fd; /* lightblue */

    --ohsm-text-disabledbgcolor: #001e38; /* darkblue */
    --ohsm-text-disabledcolor: #bfbfbf; /* lightgray */
    --ohsm-text-enabledbgcolor: white;
    --ohsm-text-enabledcolor: black;
    --ohsm-text-secondarycolor: #00a5fd; /* lightblue */
    --ohsm-field-bgcolor: #001e38; /* darkblue */
    --ohsm-label-bgcolor: #001e38; /* darkblue */
    --ohsm-label-fgcolor: #bfbfbf; /* lightgray */
    --ohsm-label-fgcolor-stark: white;
    --header-bgcolor: #00427c; /*#001e38; /* darkblue */
    --footer-bgcolor: #216ba5; /*#001e38; /* darkblue */

    --ohsm-datarow-fgcolor: #bfbfbf;
    --ohsm_datarow_even_bgcolor: #0B2856; /*#103D82; /*#216ba5; /* medium blue*/
    --ohsm_datarow_odd_bgcolor: #001e38; /* darkblue */

    --FarmStateAlarm: #FF3300;
    --FarmStateOK: #77AD1C;
    --FarmStateWarning: #FFD300;
    --ohsm-orange: #ffa500;
    --FarmStateInactive: #CCCCCC;
    --FarmStateNotStarted: #ffffb3; /*#f2f2f2; /* F2F5F7;*/

    --StatusUndefined: #999999;
    --StatusFarmer: #80A5EC;
    --StatusYield: #6639A6;
    --StatusSampler: #CA9E67;
    --StatusIdSystem: #A34989;
    --StatusSampleFlow: #FAF45E;
    --StatusAnalyser: #08E1C4;
    --StatusChemical: #883300;
    --CategoryPercent: #CCCCCC;
    --CategoryQuarantine: #6a85ba;
    --CategoryOffline: #bf76b3;
    --CategoryCleaning: #ee7c3d;
    --CategoryUnitState: #5cbd81;
    --CategoryFarmer: #80a5ec;
    --CategoryMilkingPoint: #d9add1;
    --CategoryCriticalEvent: #ffab7d;
    --CategoryClimate: #85e58a;
    --InfoIconColor: #bfbfbf;
    --ohsm-border-radius: 0.5rem;
}

[theme="light"] {
    --areabg-color: white;
    --bodybg1-color: #f0f0f0;
    --bodybg2-color: #f0f0f0;
    --txt-normal-color: black;
    --txt-focus-color: #00a5fd; /* lightblue      menuitem_selected, a:link, a:visited, a:hover, webkit-scrollbar-thumb, -webkit-scrollbar-thumb:hover */
    --txt-disabled-color: #737373; /* darkgrey   menuitem_disabled */

    --txt-input-color: white; /* white     menuitem:hover */
    --txt-input-bg-disabled: lightGrey;
    --tooltip-fill-color: #2f3a4a; /* dataplot*/
    --tooltip-txt-color: white;
    --menu-bgcolor: #103D82;
    --menu-fgcolor: #CCCCCC;
    --menu-selected-bgcolor: #0B2856;
    --menu-selected-fgcolor: #CCCCCC;
    --ohsm-filterselected-bgcolor: #00a5fd; /*#999999; /* delaval gray*/
    --ohsm-scrollbar-bordercolor: white;
    --ohsm-scrollbar-thumbcolor: #999999; /* lightblue */

    --ohsm-text-disabledbgcolor: #bfbfbf; /* lightgray */
    --ohsm-text-disabledcolor: #black;
    --ohsm-field-bgcolor: white;
    --ohsm-label-bgcolor: #bfbfbf; /* lightgray */
    --ohsm-label-fgcolor: #black;
    --ohsm-label-fgcolor-stark: black;
    --header-bgcolor: #f0f0f0;
    --footer-bgcolor: #f0f0f0;
    --InfoIconColor: #737373;
    --ohsm-datarow-fgcolor: black;
    --ohsm_datarow_even_bgcolor: white;
    --ohsm_datarow_odd_bgcolor: #E6E6E6; /* medium gray 2*/

    --ohsm-text-enabledbgcolor: white;
    --ohsm-text-enabledcolor: black;
    --ohsm-text-secondarycolor: #737373; /* darkgrey */
    --ohsm-border-radius: 0rem;
}

body {
    margin: 0px;
    overflow-x: auto;
    /*    padding-top: 10px;
    padding-bottom: 10px;*/
    /*    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
    /*    padding-left: 15px;
    padding-right: 15px;*/
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select {
    max-width: 280px;
}

.ohsm_menu {
    background-color: var(--menu-bgcolor);
    Color: var(--menu-fgcolor);
}

.e-ddl.ohsm_menu.e-input-group input.e-input::placeholder {
    color: var(--menu-fgcolor);
}

.e-ddl.ohsm_menu.e-input-group .e-input-group-icon, .e-ddl.e-input-group.e-control-wrapper .e-input-group-icon:hover {
    color: var(--menu-fgcolor);
}

.ohsm_menuitem_selected {
    background-color: var(--menu-selected-bgcolor);
    Color: var(--menu-selected-fgcolor);
}

.ohsm_menuitem {
    Color: var(--menu-fgcolor);
}

.menu-highlight {
    Color: var(--menu--highlight-fgcolor);
}

.ohsm_filteritem {
    Color: var(--txt-normal-color);
}

.ohsm-text-secondary {
    Color: var(--ohsm-text-secondarycolor);
}

label.syncfusion-ohsm_label {
    Color: var(--ohsm-label-fgcolor-stark) !important;
    font-size: 0.9rem !important;
}

.ohsm_label {
    background-color: var(--ohsm-label-bgcolor);
    Color: var(--ohsm-label-fgcolor);
}

input.syncfusion-ohsm_field {
    Color: var(--txt-normal-color) !important;
}

ohsm_field {
    background-color: var(--ohsm-field-bgcolor);
    Color: var(--txt-normal-color);
}

.ohsm_pagedata {
    padding-left: 15px;
    padding-right: 5px;
    padding-bottom: 10px;
}

.ohsm_banner {
    background-color: var(--ohsm_datarow_even_bgcolor);
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
}

.ohsm_datarow_odd {
    background-color: var(--ohsm_datarow_odd_bgcolor);
    color: var(--ohsm-datarow-fgcolor)
}

.ohsm_datarow_even {
    background-color: var(--ohsm_datarow_even_bgcolor);
    color: var(--ohsm-datarow-fgcolor)
}

.ohsm_divider {
    border-right: 2px solid var(--ohsm-datarow-fgcolor);
    width: 2px;
    margin: auto;
}

.ohsm_menuitem_disabled {
    Color: var(--txt-disabled-color);
}

.ohsm_menuitem:hover {
    Color: var(--txt-input-color );
}

.ohsm_area {
    background-color: var(--areabg-color);
    Color: var(--txt-normal-color);
}

.ohsm_header {
    background-color: var(--header-bgcolor);
    Color: var(--txt-normal-color);
}

.ohsm_footer {
    background-color: var(--footer-bgcolor);
    Color: var(--txt-normal-color);
}

.ohsm_area_selected {
    background-color: var(--areabg-color);
    Color: var(--txt-focus-color);
}

.ohsm_body {
    background-color: var(--bodybg2-color);
    background-image: linear-gradient(to bottom right, var(--bodybg2-color), var(--bodybg1-color));
}

.ohsm_corner {
    border-radius: var(--ohsm-border-radius); /* 0.5rem;*/
    border: 1px solid;
    border-color: var(--areabg-color);
}

.ohsm_badge {
    border-radius: 5rem; /*// 50%;  /* 0.5rem;*/
    border: 1px solid;
    border-color: var(--areabg-color);
}

.ohsm_databadge_even {
    border-radius: 5rem; /*// 50%;  /* 0.5rem;*/
    border: 1px solid;
    border-color: var(--ohsm_datarow_even_bgcolor);
}

.ohsm_databadge_odd {
    border-radius: 5rem; /*// 50%;  /* 0.5rem;*/
    border: 1px solid;
    border-color: var(--ohsm_datarow_odd_bgcolor);
}

.ohsm_shadow {
    box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.ohsm-filter-selected {
    background-color: var(--ohsm-filterselected-bgcolor);
}

a:link, a:visited {
    color: var(--txt-focus-color);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: var(--txt-focus-color);
    background-color: transparent;
    text-decoration: underline;
}

/*.ohsm_bottomborder {
    border-bottom: 2px solid #bfbfbf;
}*/

.ohsm_pointer {
    cursor: pointer;
}

.ohsm_cursordefault {
    cursor: default;
}

.ohsm_fullpage {
    display: flex;
    min-height: 90vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: stretch;
}

.ohsm_flexcolfixed {
    flex-grow: 0;
    flex-shrink: 0;
}

.ohsm_word_wrap {
    word-wrap: break-word
}

.ohsm_flexcolgrow {
    flex-grow: 1;
    flex-shrink: 1;
}

.ohsm_flex_nowrap {
    display: flex;
}

.ohsm_flex_wrap {
    display: flex;
    flex-wrap: wrap;
}

.ohsm_flex_items_center {
    align-items: center;
}

.ohsm_flex_items_start {
    align-items: flex-start;
}

.ohsm_flex_items_stretch {
    align-items: stretch;
}

.ohsm_flex_items_end {
    align-items: flex-end;
}

.ohsm_flex_content_start {
    align-content: flex-start;
}

.ohsm_flex_content_spaceevenly {
    justify-content: space-evenly;
}

.ohsm_flex_content_spacearound {
    justify-content: space-around
}

.ohsm_flex_content_end {
    justify-content: flex-end;
}

.ohsm_Scroll {
    overflow-y: auto;
    padding-right: 10px;
}

.error {
    color: red;
}

.orientationcss .e-headertext {
    writing-mode: vertical-lr;
    -webkit-transform: rotate(180deg);
    /*padding: 0 10px 10px;*/
}

.orientationcss .e-headercelldiv {
    display: contents;
}

.e-grid .e-gridheader tr th:first-child {
    padding-left: 0px
}

.e-grid .e-altrow {
    background-color: #fafafa;
}

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    border-style: solid;
    border-width: 2px;
    font-size: 10px;
    font-weight: 500;
    height: 42px;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
}

.e-headercell {
    padding: 0 10px 0;
}

.e-dialog .e-dlg-header-content + .e-dlg-content {
    font-size: 20px;
}

.e-spinner-pane .e-spinner-inner .e-spin-material {
    stroke: rgb(0, 165, 253);
    /*  var(--menu-bgcolor);*/
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--areabg-color);
    border-radius: 0.5rem;
    border: 1px solid;
    border-color: var(--ohsm-scrollbar-bordercolor);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--ohsm-scrollbar-thumbcolor);
    border-radius: 0.5rem;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--ohsm-scrollbar-thumbcolor);
    }

.e-spinner-pane {
    left: 100px !important;
}
/*.e-input-group.e-control-wrapper.e-ddl {
    background-color: pink;*/ /* var(--areabg-color);*/
/*color: var(--txt-normal-color);
}
.span.e-input::placeholder {
    color: orange !important;
}*/

.page-header {
    text-align: center;
    font-size: 2rem;
    margin: 1rem 0;
    color: #333;
}

@media (max-width: 768px) {
    .page-header {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .page-header {
        font-size: 1.2rem;
    }
}

.e-grid .e-headercell {
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .e-grid .e-headercell {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .e-grid .e-headercell {
        font-size: 0.8rem;
    }
}