#mainMenuContainer {
  display: flex;
  flex-direction: column;
  width: 326px;
  background: white;
  border: 2px solid #e4c86a;
  border-left: none;
  border-top: none; }
  #mainMenuContainer #mainMenu {
    width: 300px;
    float: left;
    border: none; }
  #mainMenuContainer #headerImg {
    display: block; }
  #mainMenuContainer #mainMenu * {
    border: none !important;
    background: white; }
  #mainMenuContainer .k-state-selected {
    color: black !important; }
  #mainMenuContainer #downloadAppBox {
    margin-top: 49px;
    padding-left: 15px;
    margin-bottom: 17px; }
  #mainMenuContainer #googleAndAppleButtons img:hover {
    cursor: pointer;
    opacity: 0.5; }
  #mainMenuContainer #mainMenu span:hover {
    font-weight: bold; }
  #mainMenuContainer #downloadAppLabel {
    cursor: default; }
  #mainMenuContainer li ul li span {
    padding-left: 30px; }
  #mainMenuContainer #mainMenu li span {
    box-shadow: none !important; }
  #mainMenuContainer #mainMenu .k-state-selected {
    font-weight: bold; }

#dashboardMenu .dashboardMenuIcon {
  /*todo: read it locally*/
  background-image: url("https://image.ibb.co/gmau0f/open-Menu-Icon.png"); }

#dashboardMenu .k-link, #reportMenu .k-link {
  background-color: transparent !important; }

#dashboardMenu .k-link :hover, #reportMenu .k-link :hover {
  background-color: transparent !important; }

#dashboardMenu .dashboardMenuIcon :hover {
  background-color: transparent !important; }

#dashboardMenu .dashboardMenuIcon {
  margin: 0 !important;
  border: none !important;
  height: 30px;
  width: 30px; }

#dashboardMenu .k-first, #reportMenu .k-first {
  border: none !important; }

#dashboardMenu, #reportMenu {
  margin-top: -3px;
  margin-left: 3px;
  border: none !important; }

#dashboardMenu .k-link, #reportMenu .k-link {
  padding: 0; }

#dashboardMenu .k-menu-expand-arrow {
  display: none; }

.reportWindowTitle {
  top: 10px;
  margin-left: 30px;
  margin-right: 30px; }

.stationReportIcon {
  /*todo: read it locally*/
  background-image: url("//image.ibb.co/gmau0f/open-Menu-Icon.png");
  width: 25px;
  height: 25px;
  background-size: cover;
  background-position: 0 0;
  margin-left: 6px; }

.dashboardMenuItem {
  width: 25px;
  height: 25px;
  background-size: cover;
  background-position: 0 0; }

#dashboardMenu .k-item {
  font-size: 16px; }

#dashboardMenu .k-first {
  padding: 0; }

#dashboardMenu .k-animation-container .k-link {
  padding: 8px !important; }

#stationFilter_stationDetails {
  display: none; }

#backToDashboardIcon {
  position: absolute;
  right: 31px; }

.dashboardWindowTitle_desktop {
  margin-left: 1.44em !important; }

.dashboardWindowTitle_non_desktop {
  margin-top: 5px;
  margin-left: 2.44em !important;
  font-size: 12px; }

/************ Sections Default style ******************/
/**********  SECTIONS ************/
#sectionsContainerBody .sectionTitleWrapper {
  text-align: center;
  height: 20%;
  padding-top: 20px;
  box-sizing: border-box; }

#sectionsContainerBody .section {
  background-color: white; }

#sectionsContainerBody .sectionTitle {
  border-radius: 10px;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 4px;
  color: white;
  line-height: normal;
  font-size: 19.6px;
  display: inline-block;
  /* to allow set height and width */
  background-color: #00569f; }

#sectionsContainerBody .sectionContent {
  height: 80%; }

/********** STATION INFO ************/
#stationInfoContainer #imgStation {
  display: block;
  border-color: #00569f;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  width: 150px; }

#stationInfoContainer #imgStationWrapper {
  height: 30%;
  width: 100%; }

#stationInfoContainer #stationTitle {
  color: gray;
  font-size: 25px;
  display: block;
  text-align: center;
  clear: both;
  margin-top: 10px;
  margin-bottom: 5px;
  line-height: 20px; }

#stationInfoContainer .keyField {
  background-color: #ededed; }

#stationInfoContainer .valueField {
  background-color: #f6f6f6; }

#stationInfoContainer .actionIconBox {
  width: 25%;
  height: 8%;
  margin-top: 25px;
  float: left;
  text-align: center; }

#stationInfoContainer .actionIcon {
  height: 100%;
  width: 80%; }

#stationInfoContainer .actionIconTitle {
  font-size: 13px;
  display: inline-block; }

#stationInfoContainer .colorShared {
  color: #159741; }

#stationInfoContainer #stationInfoBox > * {
  margin-top: 15px; }

#stationInfoContainer #actualStationInfoTable {
  margin-top: 25px;
  margin-bottom: 15px;
  height: 100%; }

#stationInfoContainer #stationInfoTableWrapper {
  width: 98%;
  /*overflow: auto;*/
  margin-top: 25px;
  margin-bottom: 25px;
  margin-left: auto;
  margin-right: auto;
  position: relative; }

#stationInfoContainer #actualStationInfoTable {
  width: 90%;
  margin-top: -15px;
  margin-bottom: 0px;
  /*overflow: auto;
        display: inline-block;
        max-width: 100%*/
  /*white-space: nowrap;*/ }

#stationInfoContainer #infoAboutStationTitleWrapper {
  text-align: center; }

#stationInfoContainer #infoAboutStationTitle {
  margin-top: 5px;
  margin-bottom: 5px; }

#stationInfoContainer #actualStationInfoTable td {
  padding: 0 !important; }

#stationInfoContainer #stationImagesGallery {
  display: none; }

#stationInfoContainer .arrowIcon {
  height: 20px;
  width: 20px;
  position: absolute;
  top: calc(50% - 10px);
  cursor: pointer !important;
  display: none; }

#stationInfoContainer #rightArrowIcon {
  right: 0 !important; }

#stationInfoContainer #leftArrowIcon {
  left: 0 !important; }

#stationInfoContainer #imgStation {
  background-size: cover;
  position: relative; }

#stationInfoContainer #stationNameRow {
  display: none; }

#monitorsContainer {
  height: 100%; }
  #monitorsContainer #monitors {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; }
  #monitorsContainer #monitors > * {
    margin-right: 15px; }
  #monitorsContainer .monitorInfoBox {
    border: 2px #00569f solid;
    border-radius: 10px;
    color: white;
    height: 100%;
    text-align: center;
    min-width: 100px;
    display: inline-block;
    box-sizing: border-box; }
  #monitorsContainer .monitorNameAndUnitBox {
    height: 60%;
    border-radius: inherit;
    border: inherit;
    margin-top: -2px;
    width: 100%;
    box-sizing: border-box;
    background-color: #00569f; }
  #monitorsContainer .horizontalLineSeparator {
    border-top: 1px solid white;
    width: 100%;
    height: 10%; }
  #monitorsContainer .labelWrapper, #monitorsContainer .monitorValueWrapper {
    height: 40%;
    width: 100%; }
  #monitorsContainer .parentOfCenterElem {
    display: table;
    width: 100%;
    text-align: center; }
  #monitorsContainer .verticalCenter {
    display: table-cell;
    vertical-align: middle; }
  #monitorsContainer .monitorValue {
    color: black; }

#temperatureContainer {
  height: 90%; }
  #temperatureContainer #temperatureGauge {
    height: 100%;
    color: #f19200; }
  #temperatureContainer #tempValue {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    color: #f19200;
    line-height: 18px; }
  #temperatureContainer #tempUnitLabel {
    color: #f19200; }
  #temperatureContainer .sectionContent {
    display: flex;
    justify-content: center;
    padding-top: 15px; }
  #temperatureContainer #tempDescription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%; }

#windSpeedMeterContainer {
  height: 100%; }
  #windSpeedMeterContainer #windSpeedGauge {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto; }
  #windSpeedMeterContainer #windSpeedValueLabel {
    text-align: center;
    width: 100%; }

#windDirMeterContainer {
  height: 100%; }
  #windDirMeterContainer #windDirGauge {
    height: 100%;
    width: 100%;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto; }

#indexLevelContainer {
  height: 100%;
  width: 100%;
  line-height: 1.1;
  margin-left: auto;
  margin-right: auto;
  /* ensure gauge surface will be always in center.*/ }
  #indexLevelContainer #indexName {
    display: block;
    text-align: center; }
  #indexLevelContainer #indexLevelGaugeWrapper {
    height: 80%;
    /*width: 100%;*/ }
  #indexLevelContainer #indexLevelGauge {
    height: 100%;
    /*width: 100%;*/
    margin: 0 auto; }
  #indexLevelContainer #gauge [data-role=surface] {
    margin: 0 auto;
    display: block; }
  #indexLevelContainer #IndexLevelDateTimeBox {
    text-align: center; }

#mapContainer {
  height: 100%;
  width: 100%; }
  #mapContainer #_map {
    height: 100%;
    width: 100%; }
  #mapContainer .esriSimpleSlider, #mapContainer .esriControlsBR {
    z-index: auto !important; }

#graphGroupContainer {
  height: 100%;
  width: 100%;
  /* this plaster remove over space inside datepicker between textbox which contains the date to
            bottom edge of datepicker.
        */ }
  #graphGroupContainer .k-tooltip {
    background: white !important; }
  #graphGroupContainer .monitorGraph {
    float: left;
    box-sizing: border-box;
    width: 100%; }
  #graphGroupContainer .k-picker-wrap {
    height: 31px; }
  #graphGroupContainer .sectionContent {
    width: 97%;
    /*height: 88%;*/
    padding-top: 10px !important;
    box-sizing: border-box;
    margin: 0 auto;
    direction: ltr; }
  #graphGroupContainer #sectionHeader {
    height: 20%;
    height: auto;
    width: 100%; }
  #graphGroupContainer .sectionTitleWrapper {
    width: 100%; }
  #graphGroupContainer #datepickerWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    direction: ltr;
    margin-top: 10px; }
  #graphGroupContainer .datePickerArrowIcon {
    height: 20px; }
  #graphGroupContainer .datePickerArrowIcon {
    cursor: pointer; }
  #graphGroupContainer .disabledElement {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.5 !important; }
  #graphGroupContainer .datePickerArrowIcon, #graphGroupContainer #datepickerWrapper .k-select {
    pointer-events: default;
    cursor: pointer;
    opacity: 1; }
  #graphGroupContainer #datepicker {
    height: 100%; }
  #graphGroupContainer .graphDatePicker {
    padding: 0 !important; }
  #graphGroupContainer .k-datepicker {
    width: 150px;
    margin-left: 3px;
    margin-right: 3px; }
  #graphGroupContainer #addGraphIcon {
    position: absolute;
    top: 5px;
    right: 5px;
    left: 5px;
    cursor: pointer;
    display: none; }
  #graphGroupContainer #addGraphIcon:hover {
    opacity: 0.6; }

.IMonitorGraphContainer .monitorGraph {
  float: left;
  box-sizing: border-box;
  height: 100%;
  width: 100%; }

.IMonitorGraphContainer .k-picker-wrap {
  height: 31px; }

.IMonitorGraphContainer .k-tooltip {
  background: white !important; }

.IMonitorGraphContainer .graphDatePicker {
  height: 100% !important; }

/************ Sections Default style ******************/
/**********  SECTIONS ************/
#menuSection .section {
  visibility: hidden;
  overflow-y: auto;
  background-color: white;
  z-index: 2;
  border: 1px solid #cdd0d6;
  border-radius: 5px; }

#pageSectionsContainer {
  width: 100%;
  /*#sectionsContainerBody * {
        cursor: default;
    }*/
  /* Allows to change the position of an element  (start, center, end)*/
  /* no-gutters Class Rules */ }
  #pageSectionsContainer .section {
    visibility: hidden;
    overflow-y: auto;
    background-color: white;
    z-index: 2;
    border: 1px solid #cdd0d6;
    border-radius: 5px; }
  #pageSectionsContainer #collapsableIconsContainer {
    display: flex;
    flex-direction: column; }
  #pageSectionsContainer #collapsableIconsContainer > * {
    margin-top: 5px; }
  #pageSectionsContainer .openCloseSectionIcon {
    height: 30px;
    width: 30px;
    cursor: pointer !important;
    z-index: 10; }
  #pageSectionsContainer .openCloseSectionIcon:hover {
    opacity: 0.5; }
  #pageSectionsContainer .partialViewContainer {
    padding: 0px !important;
    /* override bootstrap config*/
    background-color: inherit; }
  #pageSectionsContainer .IFlexBox {
    position: relative; }
  #pageSectionsContainer #sectionsContainerBody {
    position: relative;
    /*TODO: ADD DOCS HERE*/ }
  #pageSectionsContainer #sectionsContainerHeader button {
    float: left; }
  #pageSectionsContainer .partialViewGaugeContainer {
    display: flex;
    justify-content: center; }
  #pageSectionsContainer .sectionAjaxLoader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform: translate3d(-50%, -50%, 0); }
  #pageSectionsContainer .partialViewBody {
    width: 100%; }
  #pageSectionsContainer .sectionTitleWrapper {
    text-align: center;
    height: 20%;
    padding-top: 20px;
    box-sizing: border-box; }
  #pageSectionsContainer .sectionTitle {
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 4px;
    color: white;
    line-height: normal;
    font-size: 19.6px;
    display: inline-block;
    /* to allow set height and width */
    background-color: #00569f; }
  #pageSectionsContainer .sectionContent {
    height: 80%; }
  #pageSectionsContainer .container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important; }
  #pageSectionsContainer .row {
    margin-right: 0;
    margin-left: 0; }
  #pageSectionsContainer [class^="col-"],
  #pageSectionsContainer [class*=" col-"], #pageSectionsContainer .col {
    padding-right: 0;
    padding-left: 0; }
  #pageSectionsContainer #innerSectionsContainer {
    position: absolute;
    top: 0;
    width: 100%; }

#sectionsContainerBody #section_stationsFilterInMap {
  overflow: visible;
  background: transparent;
  border: none;
  width: 100%;
  z-index: 3;
  min-width: 180px; }

#sectionsContainerBody #section_legend {
  background: transparent;
  border: none; }

#sectionsContainerBody #section_legendWrapper {
  max-width: 90%; }

#sectionsContainerBody #section_IndexGauge {
  min-width: 270px; }

#sectionsContainerBody #section_stations {
  padding: 20px;
  min-width: 270px; }

#sectionsContainerBody #section_info {
  min-width: 400px; }

#sectionsContainerBody #section_news {
  min-width: 270px; }

#sectionsContainerBody #section_messages {
  overflow-y: hidden;
  min-width: 270px; }

#sectionsContainerBody #section_map #streetMapView:hover, #sectionsContainerBody #section_map #sateliteMapView:hover {
  font-size: 20px !important;
  cursor: pointer; }

#sectionsContainerBody #section_map #showProvincesOptionBox {
  flex-direction: row-reverse;
  justify-content: flex-end; }

#sectionsContainerBody #section_map #mapViewTitle {
  font-size: 17px;
  margin-top: 4px; }

#sectionsContainerBody #section_map #mapViewTitle, #sectionsContainerBody #section_map #streetMapView, #sectionsContainerBody #section_map #sateliteMapView {
  padding-left: 5px;
  color: #037e57;
  font-size: 15px; }

#sectionsContainerBody #section_map #showProvinceLabel {
  margin-right: 6px;
  margin-bottom: 0px; }

#legendContainer.horizontal #legendItems {
  display: flex;
  flex-direction: row; }

#legendContainer.horizontal .legendItem {
  height: 100%; }

#legendContainer.vertical #informationBox {
  display: none; }

#legendContainer.vertical #legendItems {
  display: flex;
  flex-direction: column;
  width: 100%; }

#legendContainer.vertical .legendItem {
  height: 100%;
  width: 100%; }

#legendContainer {
  height: 100%;
  /*width: 100%;*/
  width: max-content;
  background: transparent;
  display: flex; }
  #legendContainer #legendTitle {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 0px; }
  #legendContainer #legendItemsBox {
    display: flex;
    flex-direction: column;
    background: white; }
  #legendContainer #informationBox {
    border-bottom-right-radius: 200%;
    border-top-right-radius: 200%;
    width: 40px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center; }
  #legendContainer #legendInfoIcon {
    height: 19px;
    width: 19px;
    cursor: pointer; }
  #legendContainer #legendInfoIcon:hover {
    opacity: 0.5; }
  #legendContainer #legendItems {
    /*display: flex;*/
    padding: 5px;
    padding-bottom: 0px; }
  #legendContainer .legendItem {
    padding-right: 2px;
    padding-left: 2px;
    padding-top: 1px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
  #legendContainer .legendItemText {
    padding-left: 4px;
    padding-right: 4px;
    /*height:auto;*/
    height: max-content;
    width: 100%;
    margin-top: 2px;
    border-radius: 5px;
    margin-bottom: 0px;
    text-align: center; }
  #legendContainer .meteorologylegendItem {
    padding-right: 25px;
    padding-left: 25px; }
  #legendContainer .legendItemValue {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 0px;
    text-align: center; }
  #legendContainer .legendItemValueBox {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #cccccc;
    width: 100%;
    border-radius: 3px;
    height: 13px; }

#pollutantsMenuContainer {
  display: flex;
  flex-direction: column;
  background: unset; }
  #pollutantsMenuContainer #stationsFilterContainer {
    margin-left: 7px !important;
    display: flex; }
  #pollutantsMenuContainer #DateVal {
    font-size: 20px;
    position: absolute;
    left: 50%;
    right: unset;
    transform: translatex(-50%);
    z-index: 2; }
  #pollutantsMenuContainer #headerMap {
    background: rgba(255, 255, 255, 0.48) !important;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    /*background: rgba(255,255,255,0.5);*/ }
  #pollutantsMenuContainer #pollutantsMenuIcon {
    cursor: pointer;
    z-index: 11; }
  #pollutantsMenuContainer #pollutantsMenuIcon:hover {
    opacity: 0.7; }
  #pollutantsMenuContainer #pollutantsMenu {
    background: rgba(255, 255, 255, 0.5);
    width: fit-content; }
  #pollutantsMenuContainer #pollutantsMenu li {
    list-style: unset !important;
    background: black;
    color: white;
    padding: unset !important;
    z-index: 1; }
  #pollutantsMenuContainer .pollutantsMenu_vertical {
    display: flex !important;
    flex-direction: column;
    width: fit-content; }
  #pollutantsMenuContainer #pollutantsMenu .k-menu-expand-arrow {
    margin-right: 0;
    margin-left: 0; }
  #pollutantsMenuContainer .k-menu-link {
    font-size: 14px !important; }
  #pollutantsMenuContainer #stationsFilterType {
    float: left; }
  #pollutantsMenuContainer #stationsFilterContainer * {
    font-size: 19px; }
  #pollutantsMenuContainer #pollutantsMenuBox {
    display: flex;
    visibility: hidden;
    background: transparent !important; }

#stationsFilterTypeContainer {
  display: flex;
  flex-direction: column;
  align-items: center; }
  #stationsFilterTypeContainer #stationFilterTypesComboboxContainer {
    width: fit-content; }

#stationsPageContainer {
  height: 100%; }
  #stationsPageContainer #stationsList {
    display: flex;
    flex-direction: column;
    border: 1px #e5e6e7 solid; }
  #stationsPageContainer .stationNameAndIndexValueBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*padding-top: 10px;
        padding-bottom: 10px;*/
    padding-right: 5px;
    padding-left: 5px;
    border-bottom: 1px #e5e6e7 solid; }
  #stationsPageContainer #stationsList::-webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5; }
  #stationsPageContainer #stationsList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555; }
  #stationsPageContainer #stationsList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5; }
  #stationsPageContainer .indexValueItem {
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 14px;
    min-width: 30px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    direction: ltr; }
  #stationsPageContainer #sortButtons button {
    width: 48%;
    height: 24px;
    background: #374048;
    color: white;
    border: none; }
  #stationsPageContainer #sortButtons {
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-around; }
  #stationsPageContainer #stationsPageContainer * {
    box-sizing: border-box; }
  #stationsPageContainer #stationsList {
    /*height:200px;*/
    overflow: auto; }
  #stationsPageContainer #searchStationInput {
    background-color: #FFFFFF;
    border: 1px solid #e5e6e7;
    border-radius: 1px;
    color: inherit;
    display: block;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    font-size: 14px; }
  #stationsPageContainer #stationsPageTitle {
    font-size: 20px;
    background: #339571;
    text-indent: 5px;
    text-align: center;
    line-height: 32px;
    padding: 0px 5px; }

#indexGaugePageContainer {
  /*height:100%;*/
  /* ensure gauge surface will be always in center.*/ }
  #indexGaugePageContainer #maxIndexTitle {
    background: #374048;
    color: white;
    text-align: center;
    margin-bottom: 0px;
    font-size: 17px;
    padding: 5px 0px; }
  #indexGaugePageContainer #indexGaugeBody {
    /*padding: 15px;*/
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    opacity: 0.7;
    display: flex;
    flex-direction: column; }
  #indexGaugePageContainer .Gaugecontent {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    width: 100%;
    /*height: 100%;*/
    margin-bottom: 0; }
  #indexGaugePageContainer .GaugeTitleText {
    margin-bottom: 20px; }
  #indexGaugePageContainer .MaxStationIndex {
    text-align: center;
    font-weight: bold;
    box-shadow: 0px 0px 2px black;
    padding: 12px;
    border-radius: 26px; }
  #indexGaugePageContainer .MaxStationIndex span {
    font-weight: bold; }
  #indexGaugePageContainer .GaugeDiv {
    position: relative; }
  #indexGaugePageContainer #gauge {
    width: 200px;
    height: 200px; }
  #indexGaugePageContainer #gauge [data-role=surface] {
    margin: 0 auto;
    display: block; }
  #indexGaugePageContainer .IndexText {
    text-align: center;
    width: 100%;
    margin-top: 0 !important;
    font-size: 30px; }
  #indexGaugePageContainer .GaugeText {
    font-size: 14px;
    position: relative; }
  #indexGaugePageContainer #ildPageLinkGauge ul li a {
    position: relative; }
  #indexGaugePageContainer #maxIndexvValue {
    /*visibility:hidden;*/
    align-self: center;
    font-size: 20px;
    color: #20305b;
    margin-top: 9px;
    z-index: 2; }
  #indexGaugePageContainer #stationName {
    text-align: center;
    font-weight: bold;
    align-self: center;
    font-size: 20px;
    color: #20305b; }
  #indexGaugePageContainer #aqiScalePageContentWrapper {
    padding-left: 5px;
    padding-right: 5px; }
  #indexGaugePageContainer #scaleItems {
    display: flex;
    flex-direction: column; }
  #indexGaugePageContainer .scaleItem span {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    margin-left: 4px; }
  #indexGaugePageContainer .scaleItem {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-left: 12px; }
  #indexGaugePageContainer .scaleItem label {
    color: slategrey;
    margin-bottom: 0; }
  #indexGaugePageContainer .labelBelowGaugeCap {
    margin-bottom: 0px; }

#mapContainer {
  position: relative;
  z-index: 1;
  /*#showProvincesOptionBox {
        position: absolute;
        background: white;
        right: 62px;
        bottom: 23px;
        padding: 10px;
        border-radius: 38px;
        border: 1px solid black;
        font-size: 16px;
        display:flex;
        visibility:hidden;
    }*/ }
  #mapContainer #showProvincesOptionBox {
    display: flex;
    align-items: center; }

#messagesPageContainer #messagesBody {
  height: 100%;
  padding-left: 5px;
  padding-right: 5px;
  /*overflow: auto;*/ }

#messagesPageContainer #messages {
  padding: 11px;
  box-sizing: border-box;
  overflow: auto;
  padding-left: 5px; }

#messagesPageContainer #messagesContainerTitle {
  text-align: center;
  color: #20305b;
  font-size: 22px;
  padding-top: 12px;
  margin-bottom: 15px; }

#messagesPageContainer .messageItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding-top: 7px;
  padding-right: 7px;
  padding-left: 7px;
  box-sizing: border-box;
  height: auto; }

#messagesPageContainer .messageHeader {
  display: flex;
  justify-content: space-between;
  height: auto;
  width: 100%; }

#messagesPageContainer .messageHeader * {
  font-size: 16px;
  font-weight: bold; }

#messagesPageContainer .messageDate {
  float: left; }

#messagesPageContainer .messageTitle, #messagesPageContainer .messageAuthor, #messagesPageContainer .titleAndAuthorSeparator {
  float: right;
  color: #49817d; }

#messagesPageContainer .messageBody {
  font-size: 14px;
  font-weight: normal;
  padding-top: 5px; }

#messagesPageContainer #messages::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5; }

#messagesPageContainer #messages::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555; }

#messagesPageContainer #messages::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5; }

#newsPageContainer #newsBody {
  /*height:100%;*/
  /*overflow: auto;*/ }

#newsPageContainer #news {
  padding: 11px;
  box-sizing: border-box;
  overflow-y: auto; }

#newsPageContainer #newsContainerTitle {
  text-align: center;
  color: #20305b;
  font-size: 22px;
  padding-top: 12px;
  margin-bottom: 15px;
  text-align: center;
  color: #20305b;
  font-size: 22px;
  padding-top: 12px; }

#newsPageContainer .newItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding-top: 7px;
  padding-right: 7px;
  padding-left: 7px;
  box-sizing: border-box;
  height: auto;
  float: right;
  box-sizing: border-box; }

#newsPageContainer .newBody {
  margin-bottom: 0px !important;
  font-size: 14px;
  font-weight: normal;
  padding-top: 5px; }

#newsPageContainer #newsPageContainer, #newsPageContainer #newsBody {
  height: 100%; }

#newsPageContainer .newHeader {
  display: flex;
  justify-content: space-between; }

#newsPageContainer .newHeader * {
  font-size: 16px;
  font-weight: bold; }

#newsPageContainer .newDate {
  float: left; }

#newsPageContainer .newTitle, #newsPageContainer .newAuthor, #newsPageContainer .titleAndAuthorSeparator {
  float: right;
  color: #49817d; }

#newsPageContainer .newsReadMore {
  cursor: pointer;
  color: #339571; }

#newsPageContainer .newsReadMore:hover {
  font-weight: bold !important; }

#datePageContainer #lastDateTimeOfDataLabel {
  text-align: center; }

#currentStationsFilterContainer #currentStationsFilterLabel {
  text-align: center; }

/*tmp*/
#section_currentStationsFilter, #section_date {
  min-width: 220px; }

#newsPopupContainer #LeftArea {
  width: 100% !important; }

#newsPopupContainer #RightArea {
  display: none !important; }

#section_stations {
  /*padding:20px;*/
  min-width: 230px;
  max-height: 640px;
  overflow-y: hidden !important;
  padding-bottom: 10px; }

#section_legend {
  height: fit-content;
  width: auto !important; }

#section_stationsFilterInMap {
  height: auto;
  width: auto; }

#feedbackProvinceFormContainer {
  padding: 10px 19px;
  padding-top: 0px; }
  #feedbackProvinceFormContainer #feedBackForm {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px; }
  #feedbackProvinceFormContainer #feedBackForm > * {
    margin-bottom: 15px;
    width: 300px; }
  #feedbackProvinceFormContainer #feedbackProvinceFormContainer .error {
    color: red; }
  #feedbackProvinceFormContainer #submitFeedbackFormBtn {
    background: #49817d;
    color: white;
    border: medium none;
    padding: 4px 27px;
    width: auto;
    margin: 0 auto; }
  #feedbackProvinceFormContainer #Message {
    width: 293px; }

#feedbackFormContainer .FeedBackDiv {
  display: flex;
  align-items: center;
  margin-bottom: 10px; }

#feedbackFormContainer .FeedBackDiv .editor-label {
  float: left;
  margin: 0;
  width: 31%; }

#feedbackFormContainer .FeedBackDiv .editor-field {
  float: right;
  width: 59%; }

#feedbackFormContainer .FeedBackDiv .editor-field .text-box.single-line {
  max-width: 80%; }

#feedbackFormContainer .FeedBackDiv #Message {
  width: 61%;
  margin-left: 29px; }

#feedbackFormContainer #sendFeedbackButton {
  margin: 0 auto;
  display: block;
  margin-top: 30px; }

#feedbackFormContainer form {
  margin-bottom: 0px; }

#feedbackFormContainer .FeedBackDiv {
  width: 380px; }

#feedbackFormContainer legend, #feedbackFormContainer fieldset {
  border: none;
  margin: 0; }

#editBlockFormContainer {
  float: left;
  position: relative;
  width: 100%; }
  #editBlockFormContainer .section {
    border-radius: 4px;
    box-shadow: 0px 0px 1px 0px darkblue;
    padding: 4px;
    margin: 5px; }
  #editBlockFormContainer #editBlockForm {
    position: absolute;
    z-index: 2;
    width: 565px;
    background-color: #D8EBFA;
    padding-left: 5px;
    padding-right: 5px;
    padding: 5px; }
  #editBlockFormContainer #stationAndMonitorSection {
    float: left;
    width: 200px; }
  #editBlockFormContainer #stationAndMonitorSection > div {
    margin-bottom: 7px; }
  #editBlockFormContainer #dateTimePickersSection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: right;
    height: 155px;
    width: 322px; }
  #editBlockFormContainer #filterSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    float: right;
    width: 322px; }
  #editBlockFormContainer #filterSection #useFilterBox, #editBlockFormContainer #filterSection #filterTypeAndValBox {
    display: flex;
    align-items: center;
    justify-content: center; }
  #editBlockFormContainer #filterValInput {
    width: 60px; }
  #editBlockFormContainer #editTypeSection {
    float: right;
    width: 322px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 140px; }
  #editBlockFormContainer .pickerWrapper {
    display: flex;
    justify-content: space-between; }
  #editBlockFormContainer .editTypeOptionBox {
    display: flex;
    justify-content: space-between; }
  #editBlockFormContainer .valueInput {
    width: 50px; }
  #editBlockFormContainer #stationTimeBaseSection {
    width: 322px;
    float: right;
    display: flex;
    justify-content: space-between; }
  #editBlockFormContainer #editBlockForm label, #editBlockFormContainer #editBlockForm input {
    margin: 0 !important; }
  #editBlockFormContainer .optionWithLabel {
    display: flex;
    align-items: center; }
  #editBlockFormContainer #calcValueInputs {
    display: flex;
    direction: ltr; }
  #editBlockFormContainer #filterTypeBox {
    margin-right: 5px; }
  #editBlockFormContainer #monitorsBox .k-listbox {
    height: 276px; }
  #editBlockFormContainer #descriptionTextArea {
    width: 323px;
    height: 85px;
    margin-left: 5px;
    margin-right: 5px;
    resize: none; }
  #editBlockFormContainer #saveButton {
    width: 70px; }
  #editBlockFormContainer #saveButtonBox {
    display: flex;
    justify-content: center; }
  #editBlockFormContainer #fixedValueInput {
    width: 195px; }
  #editBlockFormContainer .disableDiv {
    pointer-events: none;
    opacity: 0.4; }
  #editBlockFormContainer .headerPage {
    position: relative; }
  #editBlockFormContainer .headerPage h2 {
    padding-left: 41px; }
  #editBlockFormContainer .icon-bar {
    background-color: black !important; }
  #editBlockFormContainer #menuIcon {
    left: 8px; }

/*last login page*/
#logonContainer .LogInfield {
  display: flex;
  align-items: center; }

#logonContainer #submitButton {
  width: 120px !important;
  margin: 0 auto;
  display: block;
  margin-top: 30px; }

#logonContainer .LogInfield {
  width: 100% !important; }

#logonContainer .LogInfield input {
  margin-left: 10px;
  margin-right: 10px; }

#logonContainer #encryptingLabel {
  display: none; }

#logonContainer #captchaContainer {
  margin-top: 100px; }

#logonContainer .LeftLogIn {
  width: 570px; }

#logonContainer #reloadCapchaIcon {
  cursor: pointer;
  height: 30px;
  width: 30px; }

#logonContainer #captchaContainer a {
  visibility: hidden; }

/*new login page*/
#loginPageInPopupContainer {
  background-repeat: round;
  background-size: cover;
  width: 335px;
  /*min-height: 428px;*/ }
  #loginPageInPopupContainer #loginLogo {
    width: 187px; }
  #loginPageInPopupContainer #loginLogoBox {
    display: flex;
    justify-content: center;
    padding-top: 9px; }
  #loginPageInPopupContainer #encryptingLabel {
    display: none !important; }
  #loginPageInPopupContainer #passwordInput {
    margin-left: 13px !important;
    margin-right: 13px !important; }
  #loginPageInPopupContainer #loginErrorMessage {
    color: red;
    text-align: center;
    margin-top: 10px; }
  #loginPageInPopupContainer #CaptchaInputText {
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    width: 190px !important; }
  #loginPageInPopupContainer fieldset {
    padding: 0px; }
  #loginPageInPopupContainer #captchaContainer {
    display: flex;
    flex-direction: column;
    align-items: center; }
  #loginPageInPopupContainer #loginform {
    margin-bottom: 0px; }
  #loginPageInPopupContainer #submitButtonBox {
    display: flex;
    justify-content: center; }
  #loginPageInPopupContainer #submitButton {
    padding: 1px;
    margin-top: 0px !important;
    color: white;
    width: 130px;
    margin: 0 auto;
    height: 23px;
    border: none;
    border-radius: 5px; }
  #loginPageInPopupContainer #submitButton:hover {
    opacity: 0.5; }
  #loginPageInPopupContainer #passwordInput, #loginPageInPopupContainer #UserName {
    width: 193px !important; }
  #loginPageInPopupContainer #UserName, #loginPageInPopupContainer #passwordInput {
    border-bottom-color: #cccccc !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: #cccccc !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-right-color: #cccccc !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-top-color: #cccccc !important;
    border-top-left-radius: 4px !important;
    border-top-right-radius: 4px !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset !important;
    height: 33px;
    text-align: start; }
  #loginPageInPopupContainer .loginField {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative; }
  #loginPageInPopupContainer .loginField input {
    padding-left: 30px; }
  #loginPageInPopupContainer .loginField i {
    position: absolute;
    left: 47px;
    top: 6px;
    padding: 9px 8px;
    color: #aaa;
    transition: 0.3s; }
  #loginPageInPopupContainer #reloadCapchaIcon:hover {
    opacity: 0.5;
    cursor: pointer; }
  #loginPageInPopupContainer #captchaContainer a {
    visibility: hidden; }

#stationsPageContainer #stationsBox {
  float: left;
  overflow: auto; }

#stationsPageContainer #stationsBox .k-listbox {
  height: 500px;
  width: 300px; }

#stationsPageContainer #stationInfoBox {
  float: right;
  width: calc(100% - 300px); }

#stationsPageContainer #stationInfoBox ul li {
  padding: 0; }

#stationsPageContainer #stationsBox ul li {
  display: list-item;
  position: static;
  width: auto;
  text-align: left; }

#stationsPageContainer #headingPage {
  margin-bottom: 7px !important; }

#dynamicTabularsPageContainer .dynamicTablesGridHeader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

#dynamicTabularsPageContainer .dynamicTablesHeader label {
  text-align: center;
  margin-bottom: 0;
  font-weight: bold; }

#dynamicTabularsPageContainer #dynamicTabularsGrid th[role="columnheader"] {
  position: relative;
  padding: 0; }

#dynamicTabularsPageContainer #tabularsHeader {
  display: flex;
  /*justify-content:space-between;*/
  margin-bottom: 15px;
  justify-content: space-between; }

#dynamicTabularsPageContainer #tabularsComboboxContainer .k-combobox .k-dropdown-wrap {
  height: 30px; }

#dynamicTabularsPageContainer #tabularsComboboxContainer .k-combobox .k-dropdown-wrap input {
  height: 100%; }

#dynamicTabularsPageContainer #excelIcon:hover {
  cursor: pointer;
  opacity: 0.5; }

#dynamicTabularsPageContainer #noTabularsLabel {
  display: none;
  font-size: 26px;
  margin: 30px; }

#dynamicTabularsPageContainer .nonMonitorHeaderColLabel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

#contactInformationPageContainer .k-dropdown {
  min-width: 200px; }

#contactInformationPageContainer #municipalitiesBox, #contactInformationPageContainer #Districtbox {
  margin-left: 30px; }

#contactInformationPageContainer #fieldlist {
  margin: 0;
  padding: 0; }

#contactInformationPageContainer ul#fieldlist li {
  list-style: none;
  padding-bottom: 1.5em;
  text-align: left; }

#contactInformationPageContainer #fieldlist label {
  display: block;
  padding-bottom: .3em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  float: left;
  padding: 11px 13px 11px 0px; }

#contactInformationPageContainer #fieldlist::after {
  display: block;
  clear: both;
  content: ""; }

#dynamicTabularPopupInnerHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 33px; }

/*general*/
.floatingMenu {
  position: fixed !important;
  top: 350px !important;
  z-index: 9000 !important;
  right: 5px; }

* {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none; }

#accessibilityIcon {
  width: 40px;
  height: 40px;
  cursor: pointer !important;
  z-index: 10; }

#accessContainerWrapper {
  display: flex;
  position: absolute; }

#accessContainer {
  width: 430px;
  min-height: 685px;
  background-color: white;
  border: 2px solid lightgray;
  /*display:none;*/
  /*.accessFeature:hover {
        background-color: lightgray;
    }*/
  /*#bigWhiteCursorFeature img{
        height: 43px;
        width: 32px;
        margin-top:13px;
        margin-bottom:14px;
    }

      #bigBlackCursorFeature img{
        height: 47px;
        width: 32px;
        margin-top:13px;
        margin-bottom:11px;
    }*/ }
  #accessContainer * {
    box-sizing: border-box; }
  #accessContainer #accessContainerHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding-left: 5px;
    padding-right: 5px; }
  #accessContainer #accessContainerHeader label {
    font-size: 19px;
    margin-top: 5px;
    font-weight: bold;
    color: #2d3053; }
  #accessContainer #accessFeatures {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px; }
  #accessContainer .menuRow {
    padding: 3px 0;
    display: flex;
    justify-content: space-between; }
  #accessContainer .accessFeature {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer; }
  #accessContainer .accessFeature {
    width: 135px;
    min-height: 127px;
    padding-top: 15px; }
  #accessContainer .accessFeature, #accessContainer .footerFeature {
    background-color: #ebebeb; }
  #accessContainer .accessFeature:hover, #accessContainer .footerFeature:hover {
    background-color: lightgray; }
  #accessContainer .accessFeature label {
    color: #929292; }
  #accessContainer .accessFeature img {
    height: 70px;
    width: 70px; }
  #accessContainer .activeFeature {
    opacity: 0.3; }
  #accessContainer #menuNavigationLabel, #accessContainer .footerFeature label {
    color: #1b61a7; }
  #accessContainer .accessFeature label, #accessContainer .footerFeature label, #accessContainer #menuNavigationLabel {
    text-align: center;
    margin-top: 5px; }
  #accessContainer #menuNavigationLabel {
    font-size: 16px; }
  #accessContainer .accessFeature label {
    font-size: 17px; }
  #accessContainer #accessContainerFooter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 9px;
    margin-bottom: 10px;
    color: #1b61a7; }
  #accessContainer .footerFeature {
    height: 30px;
    margin-left: 3px;
    margin-right: 3px; }
  #accessContainer .footerFeature:hover {
    opacity: 0.7; }
  #accessContainer .footerFeature label {
    padding-left: 23px;
    padding-right: 23px; }
  #accessContainer .k-list-scroller {
    position: relative;
    overflow: auto; }
  #accessContainer .k-i-close {
    background-position: initial !important;
    background-size: initial !important; }
  #accessContainer #pageNavigationMenuBox {
    display: flex;
    flex-direction: column;
    align-items: center; }
  #accessContainer #pageNavigationMenuBox .k-dropdown-wrap {
    height: 33px; }
  #accessContainer #pageNavigationMenuBox .k-input {
    height: 100%; }
  #accessContainer #accessStatement p {
    margin-bottom: 0; }
  #accessContainer #accessContainerHeader label {
    display: block;
    margin: 0 auto;
    color: #17386d; }