html {
    top: 0;
    left: 0;
    box-sizing: border-box;
    background-color: #303030 !important;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    height: 100%;
    scrollbar-width: auto;
    scrollbar-color: #111111 rgba(184, 182, 182, 1);
    font-size: 1em !important;
    background-color: #303030 !important;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: rgba(184, 182, 182, 1);
}

*::-webkit-scrollbar-thumb {
    background-color: #111111;
    border-radius: 20px;
    border: 3px solid rgba(184, 182, 182, 1);
}

/*cstm videos slider css start */
.left_slider_arrow {
    width: 50px;
    height: 50px;
    top: 40%;
    background-color: rgb(0 0 0 / 77%);
    position: absolute;
    margin: 0px auto;
    text-align: center;
    border-radius: 50%;
    line-height: 4;
    cursor: pointer;
    display: flex;
    margin-left: -10px;
}

.right_slider_arrow {
    cursor: pointer;
    width: 50px;
    height: 50px;
    top: 40%;
    background-color: rgb(0 0 0 / 77%);
    position: absolute;
    margin: 0px auto;
    text-align: center;
    border-radius: 50%;
    line-height: 4;
    right: 0px;
    display: flex;
    margin-right: 21px;

}

.right_slider_arrow img {
    align-self: center;
    display: block;
    margin: 0px auto;
    width: 18px;
}

.left_slider_arrow img {
    align-self: center;
    display: block;
    margin: 0px auto;
    width: 18px;
}

.inner_cstm_slider {
    background-color: rgb(0 0 0 / 14%);
    padding: 20px 30px;
    border-radius: 5px;
    position: relative;
}

#film {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.thumbnail_loop ul {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}

.progress_bar_tp {
    position: relative;
    width: 100%;
}

.data_tp_thumb {
    background-color: #3255a2;
    border: none;
    color: white;
    height: 90px;
    width: 125px;
    opacity: 0;
    transition-duration: 2s;
    /* display: none; */
    position: absolute;
    bottom: 30px;
    left: 0;
    border-radius: 5px;
    padding: 7px 0px;

}

.progress_bar_tp:hover>.data_tp_thumb {
    opacity: 1;
}

/*     .progress_bar_tp:hover + .progress_bar_tp::after {
    opacity: 1
}
  */
.data_tp_thumb:after {
    content: " ";
    position: absolute;
    left: 55px;
    bottom: -11px;
    border-top: 11px solid #3255a2;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    border-bottom: none;
    /*  opacity: 0;*/
}

.data_tp_thumb img {
    max-width: 60px;
    width: 100%;
    margin: 0px auto;
    display: block;
}

.data_tp_thumb p {
    font-size: 1em;
    margin: 0px;
    text-align: center;
    width: 50%;
    margin: 0px auto;
    display: block;

}

.thumbnail_loop img {
    /*	max-width: 25px;*/
    width: 100%;
    cursor: pointer;
    border: 1px solid #000;
    border-radius: 1px;
}

.thumbnail_loop {
    display: none;
}

.pgress_bar {
    width: 100%;
}

.audio-progress {
    height: .5rem;
    width: 100%;
    background-color: #C0C0C0;
}

.audio-progress .bar {
    height: 100%;
    background-color: #3255a2;
}

#audio-progress-handle {
    display: block;
    position: absolute;
    z-index: 1;
    margin-top: -7px;
    /* margin-left: -10px; */
    width: 13px;
    height: 13px;
    border: 4px solid #D3D5DF;
    border-top-color: #D3D5DF;
    border-right-color: #D3D5DF;
    transform: rotate(45deg);
    border-radius: 100%;
    background-color: #fff;
    box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
    cursor: pointer;
}

.draggable {
    float: left;
    margin: 0 10px 10px 0;
}

.time_stamp {
    clear: both;
}

.time_stamp {
    position: relative;
}

.time_stamp p {
    padding: 0px;
    margin: 0px;
    text-align: left;
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    right: 0px;
}

.frame_speed input {
    width: 60px;
    background-color: #ffffff8a;
    border: white;
    border-radius: 5px;
    height: 33px;
}

.frame_speed input:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

.frame_speed {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.speed_block {
    display: flex;
}

.speed_block p {
    margin: 0px;
    margin-right: 10px;
    line-height: 33px;
}

.jmp_frame {
    display: flex;
}

.jmp_frame p {
    margin: 0px;
    margin-right: 10px;
    line-height: 33px;
}

.jmp_frame button {
    background-color: #3255a2;
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 5px;
    line-height: 25px;
    margin-left: 5px;
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
    transition: all 0.3s ease 0s;
}

.cnrtl_pl button {
    background-color: #3255a2;
    color: #fff;
    border: none;
    padding: 5px 30px;
    border-radius: 5px;
    line-height: 25px;
    box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
    transition: all 0.3s ease 0s;
}

.cnrtl_pl button:hover {
    background-color: #284583;
    box-shadow: 0px 15px 20px rgb(46 229 157 / 40%);
    color: #fff;
    transform: translateY(-1px);
}

/*cstm videos slider css end */
.btn-check:checked+.btn-danger:focus,
.btn-check:active+.btn-danger:focus,
.btn-danger:active:focus,
.btn-danger.active:focus,
.show>.btn-danger.dropdown-toggle:focus {

    box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 0%) !important;
}

.btn-warning:focus {
    box-shadow: 0 0 0 0.25rem rgb(225 83 97 / 0%) !important;
}

.progress-wrapper {
    width: 400px;
    height: 42px;
    background-color: #f7f7f7;
    outline: 1px solid gainsboro;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.grid_btn .btn-warning {
    background-color: #000;
    color: #fff;
}

.grid_btn .btn-danger {
    background-color: #3255a2;
    color: #fff;
}

.test123333 {
    background-color: #000;
}

.datepickerbutton1 p {
    text-align: center;
    font-weight: bold;
    color: #3255a2;
    font-size: 1em;
}

.grid_btn button {
    border: none;
    background-color: #3255a2;
    color: #fff;
    color: #e6e6e6;
    font-size: 1em;
    padding: 11px 10px;
    margin: 0px;
    line-height: 7px;

    margin-right: 0px;
    text-align: center;

}

.grid_btn .btnTopBarOff {
    width: auto !important;
    float: none !important;
}

.grid_btn .btnTopBar {
    width: auto !important;
    float: none !important;
}

.grid_btn button:hover {
    background-color: #000;
}

button.togglebtn.blackbg {
    background-color: black;
    color: white;
}

.progress-wrapper .progress {
    width: 50%;
    height: 42px;
    background-color: royalblue;
    transition: width 0.3s cubic-bezier(0, 0.96, 0, 0.96);
}

.pointerIcon {
    cursor: pointer;
}

.sydneyWt_logo {
    max-width: 100px;
    width: 100%;
}

/* .cstm_hd
{
	display: none;
	position: absolute;
	z-index: 999;
	width: 100%!important;
}
.cstm_hd .chartsTree {
    background-color: rgb(255 255 255 / 98%)!important;
} */
/*.cstm_hd
{
	display: none;
}
*/
/*.loginHeader .img_tg_tp{
display: none;
}*/
#imageTree .img_tg_tp {
    display: block;
}

.pointer:hover {
    cursor: pointer;
}

.margin-standard {
    margin: 0.5em
}

.containerMain {
    height: 100vh;
    width: 100vw;
    overflow-y: auto !important;
}

/*header .img_tg_tp{
	display: none;
}*/
.no_data_fnd {


    height: 350px;
    position: relative;
}

.no_data_fnd p {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 1em;
    font-weight: bold;
}

.loginHeader .img_tg_tp {
    display: none;
}

.withtree1 .loginHeader {
    display: block;
}

/* Utility styles */
.flexBoxCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.transparent {
    opacity: 0.4;
}

/* styles for login.html */
.loginHeader {
    position: relative;
    width: 100vw;
    height: 10.8vh;
    background-color: white;
    border-bottom: 4px solid #3255A2;
    padding-left: 10px;
}

.pub-logo {
    position: absolute;
    left: 50px;
    top: 10px;
    bottom: 10px !important;
    height: 60%;
}

.meterTracLogo {
    position: absolute;
    top: 10px;
    right: 20px;
    height: 60%;
}

.loginMain {
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    height: 84.2vh;
}

.loginInner {
    width: 30%;
    padding: 2.5rem;
    background-color: #dddddd;
    border-radius: 1em;
}

.loginInput {
    width: 100%;
}

.formMarginBottom {
    margin-bottom: 1.0rem;
}

.errorMessage {
    color: #cc1520;
}

.inputNoMarginBottom {
    height: 35px;
    color: #fff;
    background-color: #3255A2;
    border: 1px solid #3255A2;
    border-radius: 5px;
    margin-bottom: 0rem;
}

.inputNoMarginBottom:hover {
    background-color: #000000;
    border: 1px solid #000000;
}

.marginBot {
    margin-bottom: 1.0rem;
}

.marginLeft {
    margin-left: 1.0rem;
}

.loginFooter {
    height: 5vh;
    width: 100vw;
    background-color: #ffffff;
    border-top: 1px solid;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 0.8em;
}

.footerCol0 {
    height: 100%;
    width: 47%;
    float: left;
    display: flex;
    align-items: center;
}

.footerCol1 {
    height: 100%;
    width: 13%;
    float: right;
}

.footerCol2 {
    height: 100%;
    width: 13%;
    float: right;
}

.footerCol3 {
    height: 100%;
    width: 17%;
    float: right;
}

img#footerBrandingOz {
    height: 100%;
    padding: 0.2%;
}

/* styles for main.html */
.mainMain {
    min-height: 84.2vh;
    width: 100vw;
}

.mainTemplate {
    min-height: 84.2vh;
    width: 100vw;
}

.mainTreeMeters {
    height: 55%;
    width: 100%;
}

.mainTreeMeasurements {
    height: 40%;
    width: 100%;
    background: #fff;
    border-top: 2px solid #343536;
    border-bottom: 2px solid #343536;
    overflow-y: auto;
    color: #000;
}

.noStyle {
    list-style: none;
    font-size: 2vmin;
}

.chartsTree {
    background-color: #FFF;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.navButtons {
    bottom: 0px;
    left: 220px;
    position: absolute;
}

.img_tg_tp img {
    width: 35px;
    cursor: pointer;
    position: absolute;
    bottom: 0px;
    left: -50px;
    background-color: #3255a2;
    height: 34px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.wd_fll {
    width: 100% !important;
    transition: 1.2s;

}

.monitoringTab {
    font-weight: normal;
}

.navMenuButton {
    background-color: #3255A2;
    border: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #fff;
    max-height: 5rem;
    padding-left: 0.5em;
    padding-right: 0.5em;
    transition: all 0.3s ease 0s;
    margin-right: 0.2em;
    font-size: 1em;
    padding-top: 0.4em;
    padding-bottom: 0.3em;
}

.navMenuButton-checked {
    background-color: #000000;
    font-weight: bolder;
}

.navMenuButton-disabled {
    background-color: #e6e6e6;
    color: #000;
}

.navTabButton-disabled:hover {
    cursor: not-allowed;
}

.navTabButton {
    background-color: #266c8e;
    border: 0px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    color: #e6e6e6;
    height: 5.5vmin;
    margin-left: 2px;
}

.navTabButton-checked {
    background-color: #000000;
    height: 80%;
    font-weight: bold;
}

.navTabButton-checked:hover {
    background-color: #4690b5;
}

.navTabButton-checked:focus {
    background-color: #4690b5;
}

button.navTabButton:hover {
    background-color: #4690b5;
}

.navTabButton:focus {
    background-color: #4690b5;
}

.rightMargin {
    margin-right: 0.3rem;
}

/*  Styles for home.html */

.meterTree {
    height: 100%;
    width: 20%;
    float: left;
    /* font-size: 1em; */
}

.withtree {
    height: 100%;
    width: 80%;
    float: left;
    /* box-sizing: border-box; */
    padding: 1em;
    padding-right: 0;
}

.withtree1 {
    background-color: #000;
    height: 100%;
    width: 80%;
    float: left;
    /* box-sizing: border-box; */
    padding: 0.5em;
}

.treeInner {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.treeInner1 {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.treeInnerchart {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.treeInnerLower {
    position: relative;
    height: 45%;
    width: 100%;
    background: #fff;
    border-top: 2px solid #343536;
    border-bottom: 2px solid #343536;
}

.treeInnerLowerStack {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.treeInnerLowerOverlay {
    position: absolute;
    z-index: 777;
    background: rgba(0, 0, 0, 0.7);
    color: #FFF;
    height: 100%;
    width: 100%;
}

.meterTreeTitle {
    text-align: center;
    justify-content: center;
    width: 100%;
    height: 8%;
    font-weight: 900;
    padding-top: 5px;
}

div.homepage {
    height: 84.2vh;
    width: 100%;
    color: black;
}

div.homemaparea {
    position: relative;
    width: 100%;
    height: 100%;
}

div.homeleft {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
}

div.homeright {
    position: absolute;
    top: 10%;
    height: 75%;
    width: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
    right: 0px;
}

div.panelBig {
    width: 25%;
}

div.panelSmall {
    width: 2%;
}

div.homerightControl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 10%;
    height: 100%;
}

div.panelSmallC {
    width: 100%;
}

div.sliderBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 40%;
    width: 100%;
    background-color: #fff;
    transition: all 0.3s ease 0s;
    border-bottom: 2px solid #111;
}

div.sliderBtn:hover {
    cursor: pointer;
    background-color: #afd8ed;
}

/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-left: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-right: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

div.homerightTitle {
    background-color: #c1c1c1;
    height: 6%;
    width: 100%;
    text-align: center;
    /* font-size: 1.8vmin; */
    padding-top: 3px;
    padding-bottom: 5px;
    border-top-left-radius: 5px;
    font-weight: bold;
}

.homerightContent {
    //
    display: flex;
    //
    align-items: center;
    //
    justify-content: flex-start;
    //
    flex-direction: column;
    width: 100%;
    height: 94%;
    //
    overflow-y: scroll;
    border-bottom-left-radius: 5px;
    border-bottom: 8px solid #FFF;
    padding-right: 6px;
    padding-left: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 5px;
}

div.homerightGroupTitle {
    font-size: 1.8vmin;
    width: 100%;
    text-align: center;
    /*padding-top: 3px;*/
    padding-bottom: 4px;
}

input[type='checkbox'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 5px;
    border: 2px solid #555;
}

input[type='checkbox']:checked {
    background: #333;
}

div.homerightGroupItem {
    height: 26%;
    width: 100%;
    padding-bottom: 5px;
}

div.homerightGroupItemInner {
    height: 100%;
    width: 100%;
    border: 3px solid #fbb726;
    overflow: auto;
}

div.homerightGroupItemInner_targetcriteria {
    height: 100%;
    width: 100%;
    border: 3px solid #fbbc05;
    overflow: auto;
}

div.homerightGroupItemInner_criticallimit {
    height: 100%;
    width: 100%;
    border: 3px solid #ea4335;
    overflow: auto;
}

div.homerightGroupItemLeft {
    height: 100%;
    float: left;
    /*padding: 1px;*/
    width: 18%;
    background: #fbb726;
}

div.homerightGroupItemLeft_targetcriteria {
    height: 100%;
    float: left;
    /*padding: 1px;*/
    width: 18%;
    background: #fbbc05;
}

div.homerightGroupItemLeft_criticallimit {
    height: 100%;
    float: left;
    /*padding: 1px;*/
    width: 18%;
    background: #ea4335;
}


/*div.homerightGroupItemRight{height:100%;float: left;border-left: 2px solid #fbb726;width: 82%;font-size: 1em;}*/
div.homerightGroupItemRight {
    height: 100%;
    float: left;
    width: 82%;
    font-size: 1em;
}

.infoPanelTable {
    width: 100%;
    height: 100%;
    text-align: center;
}

.trtitle {
    font-weight: bold;
}

.locationcell {
    width: 50%;
}

.homerightGroupItemImg {
    width: 100%;
}

.settingsalarmtable {
    margin: auto;
    width: 80%;
    border-collapse: collapse;
}

.settingsalarmtable td {
    border: 1px solid white;
    padding: 3px;
}

.buttontablecell {
    text-align: center;
}


div.setting2title {
    width: 100%;
    height: 5%;
    text-align: center;
    font-size: 2vmin;
    font-weight: bold;
}

div.settings2buttons {
    width: 100%;
    height: 10%;
    padding-top: 4px;
    text-align: center;
}

div.settings3rowlabel {
    width: 100%;
    height: 20%;
    font-size: 3vmin;
    font-weight: bold;
}

div.settings3rowlabel1 {
    width: 100%;
    height: 12%;
    font-size: 3vmin;
    font-weight: bold;
}

div.settings3rowcontent {
    width: 100%;
    height: 80%;
}

div.settings3titlelable {
    width: 100%;
    height: 20%;
    background-color: #ececec;
    text-align: center;
    font-weight: bold;
    font-size: 2vmin;
    padding-top: 1%;
    border-bottom: 2px solid #ddd;
}

div.settings3parametermeasurementlist {
    width: 100%;
    height: 80%;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
}

.settings3parametermeasurementlistul {
    width: 100%;
    height: 100%;
    list-style-type: none;
    font-size: 1.8vmin;
    margin-bottom: 0px;
}

.settings3parametermeasurementlistul li:hover {
    background-color: #b3d7eb;
}

div.settings3argument {
    width: 30%;
    height: 100%;
    float: left;
    background-color: white;
    color: black;
}

div.settings3threshold {
    width: 30%;
    height: 100%;
    float: left;
    padding-left: 10px;
}

div.settings3argumentInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
}

div.settings3hysteresis {
    width: 20%;
    height: 100%;
    float: left;
    padding-left: 10px;
}

div.settings3notificationsesInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    overflow: auto;
}

div.settings3notificationses {
    width: 30%;
    height: 100%;
    padding-right: 10px;
    float: left;
}

div.settings3notificationsschedule {
    width: 25%;
    height: 100%;
    padding-right: 10px;
    float: left;
}

div.settings2schedule1 {
    width: 100%;
    height: 25%;
    text-align: center;
    font-weight: bold;
}

div.settings2schedule2 {
    width: 100%;
    height: 20%;
    text-align: center;
    font-weight: bold;
}

div.settings2schedule1Inner {
    width: 80%;
    height: 100%;
    margin: auto;
}

.settings3scheduleinput {
    width: 100%;
    height: 100%;
    padding: 6px;
    text-align: center;
}

div.settings3scheduledropdowndivleft {
    width: 50%;
    height: 100%;
    float: left;
}

div.settings3scheduledropdowndiv {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
}

.setting3scheduleinputbtn {
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    border: 1px solid black;
}

.settings3scheduledropdownlist {
    min-width: 80px;
    font-size: inherit;
}

div.settings3schedulemaxrepeatdropdowndiv {
    width: 40%;
    height: 100%;
    margin: auto;
}

.settings3aggregateeventlistul {
    width: 100%;
    height: 100%;
    list-style-type: none;
    font-size: 1.8vmin;
    margin-bottom: 0px;
    text-align: center;
}

.settings3aggregateeventlistul li:hover {
    background-color: #b3d7eb;
}

div.settings3rowcontentchart {
    width: 100%;
    height: 88%;
    background-color: white;
}

div.settings3buttonsdiv {
    width: 100%;
    height: 9%;
    padding-top: 1%;
    text-align: center;
}

div.sortHeader {
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    background-color: #ffffff;
    height: 1.8em;
}

div.leftSort {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
    border: 1px solid;
}

div.sortText {
    text-align: center;
    text-align: center;
    font-weight: bold;
    /* padding: 4px; */
    /* border: 1px solid; */
    background: #fff;
    width: 90%;
    float: left;
}

div.sortIcon1 {
    /* position: absolute; */
    padding: 1px;
    /* top: 0px; */
    /* right: 0px; */
    cursor: pointer;
    color: black;
    text-align: center;
    float: right;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 10%;
}

div.rightSort {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
    border: 1px solid;
}

div.alarmTypeFilter {
    width: 100%;
    display: flex;
    flex-direction: column;
}

div.titleSection {
    width: 100%;
    background-color: #fff;
    /* margin-bottom: 2px; */
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
}

div.titleSectionACA {
    width: 100%;
    background-color: white;
    text-align: center;
    box-sizing: border-box;
    padding: 4px;
}

div.titleSectionACABtn {
    width: 34%;
    float: left;
    border-right: 1px solid #bbb;
    padding: 3px;
    cursor: pointer;
}

div.titleSectionACABtn:hover {
    background-color: #b6d0e2;
}

div.titleSectionACABtnSelected {
    width: 34%;
    float: left;
    padding: 4px;
    cursor: pointer;
    background-color: #b6d0e2;
    border: 1px solid;
}

div.titleSectionACABtn1 {
    width: 33%;
    float: left;
    border: 1px solid;
    padding: 4px;
    cursor: pointer;
}

div.titleSectionACABtn1:hover {
    background-color: #b6d0e2;
}

div.titleSectionACABtn1Selected {
    width: 33%;
    float: left;
    border-right: 1px solid #bbb;
    padding: 3px;
    cursor: pointer;
    background-color: #b6d0e2;
}

div.atfContents {
    width: 100%;
}

div.alarmType {
    width: 100%;
    background-color: white;
    border: 1px solid #bbb;
    box-sizing: border-box;
    padding: 3px;
    display: flex;
    cursor: pointer;
}

div.alarmType:hover {
    background-color: #dfecf5;

}

div.colourIcon {
    float: left;
    width: 1em;
    height: 1em;
    background-color: #ff7f0e;
    border: 3px solid #ff7f0e;
    box-sizing: border-box;
    border-radius: 2em;
    margin-left: 6px;
}

div.alarmnameText {
    width: 94%;
    float: left;
    height: 100%;
    box-sizing: border-box;
    margin-left: 10px;
}

div.alarmTypeSelected {
    width: 100%;
    background-color: #b6d0e2;
    border: 1px solid #bbb;
    box-sizing: border-box;
    padding: 3px;
    display: flex;
    cursor: pointer;
}

div.colourIcon2 {
    float: left;
    background-color: #ea4335;
    border: 3px solid #ea4335;
    box-sizing: border-box;
    border-radius: 0.2em;
    width: 1em;
    height: 1em;
    margin-left: 6px;
}

div.alarmList {
    width: 100%;
    flex-grow: 1;
}

div.atfContents {
    width: 100%;
}

/*  Styles for kisoks.html */

.sensorTitle {
    user-select: none;
    padding-left: 5px;
    display: flex;
    justify-content: center;
    color: #f2f3f4;
    background-color: #3255A2;
    height: 100%;
    width: 15%;
}

.sensorChart {
    height: 99%;
    width: 83%;
}

.kioskContainer {
    width: 100%;
    height: 84.2vh;
}

.kioskChartsContainer {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    display: flex;
}

.space-around {
    justify-content: space-around;
    align-items: center;
}

.gasTitle {
    height: 5%;
    width: 100%;
}

.gasChart {
    height: 89%;
    width: 100%;
}

.sewerLeft {
    width: 75%;
    height: 100%;
    border-right: 4px solid #3255A2;
    display: flex;
    flex-direction: column;
}

.sewerLeftUpper {
    height: 73.75%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.sewerLeftUpperTitle {
    padding: 0px 25px;
    height: 10%;
    width: 100%;
}

.sewerLeftUpperChart {
    height: 90%;
    width: 100%;
}

.sewerLeftLower {
    height: 26.25%;
    width: 100%;
}

.sewerLeftLowerItem {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 100%;
}

.sewerLeftLowerItemTitle {
    padding: 4px;
    text-align: center;
    height: 10%;
    width: 100%;
}

.sewerLeftLowerItemCircle {
    height: 90%;
    width: 100%;
}

.circle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    border: 8px solid #000000;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.chart {
    height: 100%;
    width: 100%;
}

.sewerRight {
    width: 25%;
    height: 100%;
}

.full {
    height: 100%;
    width: 100%;
}

.sewerageTitle {
    height: 5%;
    width: 100%;
}

.sensorChartBox {
    border: 3px solid #3255A2;
    display: flex;
    width: 98%;
    height: 28.5%;
}

.halfWidth {
    width: 50%;
    height: 100%;
}

.greenInfo {
    color: #1AA260;
}

.redInfo {
    color: #DE5246;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5.0vmin;
    z-index: 99999;
    position: absolute;
    height: 100%;
    width: 100%;
    color: #000;
    background-color: #FFF;
}

/*  Styles for summary.html */
.summaryContainer {
    position: relative;
    height: 84.2vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.summaryLayerLow {
    /* position: absolute; */
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.summaryContainerLoading {
    font-size: 4em;
    font-weight: bold;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
    z-index: 9999;
}

.summaryTreeContainer {
    height: 100%;
    width: 25%;
}

.summaryControl {
    /* height: 6%; */
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}

.summaryLargeChart {
    height: 86%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.summaryLegendItemVisible {
    background-color: #FFFFFF;
    height: 10%;
    margin-left: 1em;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 90%;
    border: 1px solid #000000;
    opacity: 1.0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.summaryLegendItemVisible:hover {
    cursor: pointer;
    transform: scale(1.05);
}

.summaryLegendItemHidden {
    background-color: #FFFFFF;
    height: 10%;
    margin-left: 1em;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 90%;
    border: 1px solid #000000;
    opacity: 0.3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.summaryLegendItemHidden:hover {
    cursor: pointer;
    transform: scale(1.05);
}


.summaryLegendItemTop {
    height: 25%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.summaryLegendItemBottom {
    color: #000000;
    height: 75%;
    width: 100%;
    /* font-size: 0.8em; */
    /* font-weight: bold; */
    display: flex;
    justify-content: center;
    align-items: center;
}


.chartContainerOne {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.chartContainerTwo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    height: 100%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartContainerThree {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.333333333%;
    height: 100%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartContainerFourToSix {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.333333333%;
    height: 50%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartContainerSevenToNine {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.333333333%;
    height: 33.333333333%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartTitle {
    font-weight: bold;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    width: 100%;
}

.chartTitle2 {
    font-weight: bold;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    width: 100%;
}

.chartTitle2:hover {
    cursor: pointer;
}

.datepickerbuttonInner {
    width: 100%;
    height: 100%;
    //
    background-color: #dddddd;
    border: 1px solid #000000;
    /* font-weight: bold; */
}

.datepickerbuttonInner td {
    border: 1px solid #000000;
    vertical-align: middle;
    text-align: center;
}

.datepickerbuttonleft {
    width: 14%;
    height: 100%;
    font-size: 1em;
    padding-top: 1%;
}

.datepickerbuttonmiddle {
    width: 72%;
    height: 100%;
}

.datepickerbuttonright {
    width: 14%;
    height: 100%;
    font-size: 1em;
    padding-top: 1%;
}

.intervalContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
    height: 100%;
    width: 10%;
}

.summaryInterval {
    /* height: 85%; */
    width: 100%;
}

.intervalMessageContainer {
    padding-left: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15px;
    height: 100%;
    flex: 1;
}

.chart {
    background-color: #FFFFFF;
    height: 90%;
    width: 100%;
}

/*
 * ==========================================================
 * download.html styles
 * ==========================================================
 */
.downloadpage {
    height: 84.2vh;
    width: 100%;
    display: flex;
}

.btn-download {
    height: 1.8em !important;
    width: 250px;
}

.bg-white {
    background-color: #FFF !important;
    align-items: center;
    justify-content: center;
}

.download-sensor-container {
    margin-top: 10px;
    position: relative;
    height: 40%;
    width: 60%;
    border: 3px solid #343536;
}

.download-control-container {
    margin-top: 10px;
    width: 60%;
    height: 10%;
    border: 3px solid #343536;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


/*
 * ==========================================================
 * home.html styles
 * ==========================================================
 */

div.hometitlebar {
    width: 100%;
    height: 6%;
    background-color: #ececec;
    -webkit-box-shadow: 0px 3px 3px #343434;
    -moz-box-shadow: 0px 3px 3px #343434;
    box-shadow: 0px 3px 3px #343434;
}

div.hometitlebuttondivFirst {
    width: 12%;
    height: 100%;
    float: left;
    padding: 4px;
}

div.hometitlebuttondiv {
    width: 12%;
    height: 100%;
    float: left;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    transition: all 0.3s ease 0s;
}

.hometitlebutton-active {
    width: 100%;
    height: 100%;
    background-color: #afd8ed;
    padding: 0px;
    font-weight: bold;
}

.hometitlebutton-active:hover {
    background-color: #d3f0ff;
}

.hometitlebutton-active:focus {
    background-color: #afd8ed;
}

.hometitlebutton {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    padding: 0px;
    font-weight: bold;
    transition: all 0.3s ease 0s;
}

.hometitlebutton:hover {
    background-color: #d3f0ff;
}

.hometitlebutton:focus {
    background-color: #afd8ed;
}

div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-right: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-left: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

div.homerightTitle_02 {
    background-color: #c1c1c1;
    height: 5%;
    width: 100%;
    text-align: center;
    font-size: 1em;
    padding-top: 3px;
    padding-bottom: 5px;
    border-top-left-radius: 5px;
}

.homerightContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 94%;
    overflow-y: scroll;
    border-bottom-left-radius: 5px;
    border-bottom: 8px solid #FFF;
    padding-right: 6px;
    padding-left: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.9em;
    line-height: 1.1em;
}

.meterColor1 {
    height: 100%;
    width: 100%;
    background-color: #1f77b4;
}

.meterColor2 {
    height: 100%;
    width: 100%;
    background-color: #ff7f0e;
}

.meterColor3 {
    height: 100%;
    width: 100%;
    background-color: #2ca02c;
}

.meterColor4 {
    height: 100%;
    width: 100%;
    background-color: #d62728;
}

.meterColor5 {
    height: 100%;
    width: 100%;
    background-color: #9467bd;
}

.meterColor6 {
    height: 100%;
    width: 100%;
    background-color: #8c564b;
}

.meterColor7 {
    height: 100%;
    width: 100%;
    background-color: #e377c2;
}

.meterColor8 {
    height: 100%;
    width: 100%;
    background-color: #7f7f7f;
}

.meterColor9 {
    height: 100%;
    width: 100%;
    background-color: #bcbd22;
}

.meterColor10 {
    height: 100%;
    width: 100%;
    background-color: #000000;
}

div.intervalbuttondiv {
    width: 14%;
    height: 100%;
    float: left;
    padding: 4px;
    position: relative;
}

/*
 * ==========================================================
 * Chart page styles
 * ==========================================================
 */

div.historypage {
    width: 100%;
    height: 84.2vh;
}

div.historypageInner {
    width: 100%;
    height: 100%;
}

div.measurementTab {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

div.chartsMainControls {
    width: 100%;
    /* height: 5.5vmin; */
    color: black;

    background-color: #ececec;
    background-color: white;
    top: 0px;
    left: 0px;
    padding-left: 5px;
}

.datepickerbuttonInner {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    border: 1px solid #000000;
}

.datepickerbuttonInner:hover {
    background-color: #b3d7eb;
}

.datepickerbuttonInner td {
    border: 1px solid #000000;
    vertical-align: middle;
    text-align: center;
    /* font-weight: bold; */
    font-size: 1em;
}

.datepickerbuttonleft {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.datepickerbuttonmiddle {
    width: 72%;
    height: 100%;
}

.datepickerbuttonright {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

div.intervalbuttondiv {
    width: 13%;
    height: 100%;
    float: left;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    position: relative;
}

.titlebutton-actived {
    width: 100%;
    height: 100%;
    background-color: #afd8ed;
    padding: 0px;
    font-weight: bold;
}

.titlebutton-actived:hover {
    background-color: #d3f0ff;
}

.titlebutton-actived:focus {
    background-color: #d3f0ff;
}

.overviewdropdownmenu {
    right: 0;
    min-width: 115px;
}

.overviewdropdownmenu li {
    padding-left: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.overviewdropdownmenu li:hover {
    background-color: #dddddd;
}


.kpibuttonOff {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    border: 1px solid black;
    padding: 0px;
    /* font-weight: bold; */
    border-radius: 0px;
    font-size: 1em;
}

.kpibuttonOff1 {
    width: 100%;
    height: 100%;
    padding: 0px;
}

.kpibuttonOff:hover {
    background-color: #d3f0ff;
}

.chartsArea {
    width: 100%;
    height: auto;
}

.chart_img {
    height: 100%;
    display: block;
}

.dt_nt_fnd {
    position: relative;
    height: 350px;
}

.dt_nt_fnd h2 {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    position: absolute;
}

.img_slider_carsel .owl-carousel .owl-nav.disabled {

    display: block !important;
}

/*.owl-carousel.owl-drag .owl-item{
	max-width: 100%!important;
}
*/
div.chartsAreaInner {
    width: 100%;
    height: 100%;
    /* padding-top: 10px; */
    background: #fff;
}

div.chartsStatsContainer {
    width: 100%;
    height: 43%;
    /* padding-left: 10px; */
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}


.statTitleSpan {
    width: 80%;
    margin: auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;

    /*width: 86%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    float: left;
    margin: auto;*/
}

.chartsStatsTable {
    width: 100%;
    height: 100%;
}

.chartsStatsTable tr {
    height: 50%;
    box-sizing: border-box;
    /* margin-bottom: 0.3em; */
}

.chartsStatsTable td {
    padding-left: 4px;
    padding-left: 2px;
    padding-right: 2px;
    width: 25%;
    box-sizing: border-box;
}

.chartsStatsTable td:first-child {
    padding-right: 4px;
}

.chartsStatsTable td:last-child {
    padding-left: 2px;
}

div.chartsStatsColInner {
    width: 100%;
    height: 96%;
    padding-bottom: 2px;
    border: 4px solid #fff;
}

div.charts_m_stats_row_cell1 {
    /* //width:25%; */
    width: 100%;
    height: 96%;

}

div.charts_m_stats_row_cell_title1 {
    width: 100%;
    height: 20%;
    display: flex;
    position: relative;
}

div.charts_m_stats_row_cell_measurement1 {
    width: 100%;
    height: 25%;
    position: relative;
}

div.charts_m_stats_row_cell_unit1 {
    width: 100%;
    height: 25%;
    display: flex;
    position: relative;
}

div.charts_m_stats_row_cell_unit_column1 {
    width: 50%;
    height: 100%;
    margin: auto;
    text-align: center;
}

div.charts_m_stats_row_cell_stats_11 {
    width: 100%;
    display: flex;
    position: relative;
}

div.charts_m_stats_row_cell_stats_21 {
    width: 50%;
    margin: auto;
    text-align: center;
}

.w3-container1 {
    padding: 0.01em 16px;
}

.w3-border1 {
    /* //border: 1px solid #ccc!important; */
    border: 1px solid #ccc;
}

.w3-round-xlarge1 {
    border-radius: 16px !important;
}


div.chartsStatsRow {
    width: 100%;
    display: flex;
    font-weight: bold;
    box-sizing: border-box;
    padding: 1px;
}

div.numberdiv {
    width: 8%;
    margin: auto;
    text-align: center;
}

div.closediv {
    height: 100%;
    padding: 3px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    color: black;
    border-left: 2px solid #666;
}

div.closediv1 {
    /* height: 100%; */
    /* padding: 1px; */
    position: relative;
    /* top: 0px; */
    /* right: 0px; */
    cursor: pointer;
    /* align-items: center; */
    width: 12%;
    color: black;
    /* border-left: 2px solid #666; */
    margin: auto;
    text-align: center;
}

div.chartsStatsContent {
    width: 100%;
    height: 79%;
    /*padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	background-color: white;
	font-weight: bold;*/
}

div.chartsStatsContentInner {
    width: 100%;
    height: 100%;
}

.itemhidden {
    visibility: hidden;
}

div.chartsStatsRowLower {
    width: 100%;
    height: 20%;
    text-align: center;
}

div.dropdownloacalRegion {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.dropdownbuttonRegion {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 100%;
    padding-top: 0px;
}

.dropdownmenuPoint {
    width: 100%;
    overflow: auto;
    height: 80px;
    border: 1px solid #666;
    font-size: 1.5vmin;
    cursor: pointer;
}

.dropdownmenuPoint li:hover {
    cursor: pointer;
    background-color: #afd8ed;
}

.dropdownmenuUnit {
    width: 100%;
    border: 1px solid #666;
    font-size: 1.5vmin;
    cursor: pointer;
}

.dropdownmenuUnit li:hover {
    cursor: pointer;
    background-color: #666;
}

div.chartsStatsRowLeft {
    width: 50%;
    height: 100%;
    padding-right: 2px;
    float: left;
}

div.chartsRowLeftLeft {
    width: 50%;
    height: 100%;
    text-align: right;
    padding-right: 4px;
    float: left;
}

div.chartsRowLeftRight {
    width: 50%;
    height: 100%;
    padding-left: 4px;
    float: left;
}

div.chartsStatsRowRight {
    width: 50%;
    height: 100%;
    padding-left: 2px;
    float: left;
}


div.timeComaprsionTab {
    height: 100%;
    width: 100%;
    position: relative;
}

div.datapickerLabel {
    /* width: 8%; */
    height: 100%;
    float: left;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
}

.series0_color {
    color: #ea4335;
}

.series1_color {
    color: #4285f4;
}

.chartsArea1 {
    width: 100%;
    height: 75%;
    padding-top: 6vmin;
    /* padding-left: 10px; */
}

div.chartsStatsContainer1 {
    width: 100%;
    height: 25%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}

div.chartsStatsCol {
    width: 25%;
    height: 100%;
    float: left;
    padding-right: 4px;
    /* //font-size: 1vmin; */
}

div.chartsStatsColInnertc {
    width: 100%;
    padding-bottom: 2px;
    border: 1px solid #666;
    /* font-size: 0.8em; */
    overflow: auto;
    background: #fff;
    border-radius: 0.5em;
}

div.chartsStatsButtonsDiv {
    width: 6%;
    height: 100%;
    float: left;
    padding-right: 4px;
}

button.btnstatsright:hover {
    background-color: #afd8ed;
}

button.btnstatsright:focus {
    background-color: white;
}

button.btnstatsright:active {
    background-color: white;
}

div.measureTable {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: white;
    color: black;
    z-index: 99;
}

div.measureTableLeft {
    width: 93%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

div.oneTableDiv {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-left: 10px;
}

div.sidebarbuttondiv {
    height: 7.5vmin;
    width: 100%;
}

.avgcolour {
    color: #017bb8;
}

.maxcolour {
    color: #ff002a;
}

.mincolour {
    color: #25a71e;
}

.charts_m_stats_area {
    width: 100%;
}

div.charts_m_stats_row {
    width: 96%;
    float: right;
    display: flex;
    position: relative;
    background-color: white;
    padding: 4px;
}

div.charts_m_stats_row_cell_wider {
    width: 45%;
    margin: 1px;
}

div.charts_m_stats_row_cell {
    width: 25%;
    margin: 1px;
}

div.charts_m_stats_row_cell_title {
    width: 100%;
    display: flex;
    position: relative;
}

div.charts_m_stats_row_cell_measurement {
    width: 100%;
    position: relative;
}

div.charts_m_stats_row_cell_unit {
    width: 100%;
    display: flex;
    position: relative;
}

div.charts_m_stats_row_cell_unit_column {
    width: 50%;
    margin: auto;
    text-align: center;
}

div.charts_m_stats_row_cell_stats_1 {
    width: 100%;
    display: flex;
    position: relative;
}

div.charts_m_stats_row_cell_stats_2 {
    width: 50%;
    margin: auto;
    text-align: center;
}


.w3-container {
    padding: 0.01em 16px;
}

.w3-border {
    border: 1px solid #ccc;
}

.w3-round-xlarge {
    border-radius: 16px !important;
}

/*
  * ==========================================================
  * Overview page styles
  * ==========================================================
  */

div.overviewTabBar {
    height: 5%;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 3px solid #40A2D3;
}

div.overviewtitlebar {
    /* width: 100%; */
    /* height: 5.5vmin; */
    /* padding-left: 10px; */
    /* color: black; */
    /* background-color: #ececec; */
    /* -webkit-box-shadow:0px 3px 3px #343434; */
    -moz-box-shadow: 0px 3px 3px #343434;
    /* box-shadow:0px 3px 3px #343434; */
    /* border-bottom: 1px solid #666; */
    /* position:absolute; */
    /* top: 0px; */
    /* left:0px; */
}

div.overviewChartContainerInner {
    width: 100%;
    /* height: 100%; */
    padding-top: 6px;
    overflow-y: auto;
    padding-right: 10px;
}

div.oneChartContainer {
    width: 100%;
    height: 150px;
    padding-bottom: 10px;
}

div.oneChartContainerInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    /* font-weight: bold; */
    border: 2px solid #666;
}

.oneChartLeft {
    width: 13%;
    height: 100%;
    float: left;
}

.oneChartLeftTable {
    width: 100%;
    height: 100%;
}

.oneChartLeftTable td {
    vertical-align: middle;
    text-align: center;
    font-style: inherit;
}

div.oneChartRightActual {
    width: 87%;
    height: 100%;
    float: left;
}

.chartClassOverview {
    width: 98%;
    height: 99%;
}

div.oneChartRight {
    width: 82%;
    height: 100%;
    float: left;
}

div.overviewequiplabel {
    width: 60%;
    height: 100%;
    float: right;
    padding-right: 10px;
    text-align: right;
    /* font-size: 2vmin; */
    /* font-weight: bold; */
    padding-top: 0.8%;
}

.overviewfoldbuttonOn {
    background-color: #3ca0d2;
    padding: 0px;
    font-weight: bold;
    height: 33.3%;
    width: 100%;
    color: white;
    /* border: 2px solid white; */
}

.overviewfoldbuttonOn:hover {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOn:focus {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOn:active {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOff {
    background-color: #266c8e;
    padding: 0px;

    font-weight: bold;
    height: 33.3%;
    width: 100%;
    color: white;
    /* border: 2px solid white; */
}

.overviewfoldbuttonOff:hover {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOff:focus {
    background-color: #4694b9;
    border: 2px solid black;
    color: white;
}

.overviewfoldbuttonOff:active {
    background-color: #4694b9;
    border: 2px solid black;
    color: white;
}

/*
* ==========================================================
* Maintenance page styles
* ==========================================================
*/
div.maintenancepage {
    width: 100%;
    height: 85vh;
    position: relative;
}

div.onelabel {
    width: 100%;
    height: 6.2vmin;
    padding: 6px;
}

div.maintenancespanleft {
    width: 22%;
    line-height: 4.5vmin;
    float: left;
    font-weight: bold;
}

div.maintenancespanright {
    width: 20%;
    background-color: white;
    border: 2px solid #000000;
    line-height: 4.2vmin;
    float: left;
    padding-left: 6px;
}

div.maintenancedatepickerbutton {
    width: 24%;
    height: 100%;
    float: left;
    background-color: white;
}

.maintenancedatepickerbuttonInner {
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
}

.maintenancedatepickerbuttonInner td {
    border: 1px solid #000000;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

.datepickerbuttonleft {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.datepickerbuttonmiddle {
    width: 72%;
    height: 100%;
}

.datepickerbuttonright {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.innerTableHeader,
.innerTableRow {
    background-color: white !important;
}

.innerTableFont {
    font-size: 0.9em;
}

div.errorUnitDiv1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.75;
}

div.errorUnitDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.maintenanceoneChartContainer {
    width: 100%;
    height: 22%;
    padding-top: 4px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

div.oneChartContainerInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    font-weight: bold;
    border: 2px solid #666;
}

div.mainoneChartLeft {
    width: 10%;
    height: 100%;
    float: left;
}

.mainoneChartLeftTable {
    width: 100%;
    height: 100%;
}

.mainoneChartLeftTable td {
    vertical-align: middle;
    text-align: center;
}

div.mainoneChartRight {
    width: 76%;
    height: 100%;
    float: left;
    padding: 5px;
}

#flowchart,
#doorchart,
#sstrengthchart,
#batterychart {
    width: 100%;
    height: 100%;
}

div.mainoneChartRightRight {
    width: 14%;
    height: 100%;
    float: left;
    border-left: 2px solid #000000;
}

div.configTab {
    height: 100%;
    width: 100%;
    color: black;
    /* background-color: #dddddd; */
    font-size: 1em;
    line-height: 24px;
}

div.configTabContentUpper {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.configTabContentLower {
    /* width: 100%; */
    /* height: 10%; */
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    /* font-size: 3vmin; */
    /* font-weight: bold; */
    color: #fff;
}


div.configTabContentNonConf {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
}

div.configTabButtonsDiv {
    width: 100%;
    height: 10%;
    text-align: center;
}

div.configtableft {
    height: 100%;
    width: 50%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    background: #fff;
}

div.configtabright {
    height: 100%;
    width: 50%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    border-left: 2px solid #40A2D3;
    background: #fff;
}

div.oneconfigline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 15%;
    background: #fff;
    /* margin-bottom: 1em; */
}

div.configlineInner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    width: 90%;
    background: #fff;
}

div.configlineInnerItem {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* width: 50%; */
    /* font-size: 0.6em; */
    line-height: 24px;
    padding-left: 24px;
    font-weight: bold;
}

div.configlineInnerItemRight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 75%;
}

div.oneconfiglineleft {
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.oneconfiglinecenter {
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.oneconfiglinemiddle {
    width: 5%;
    height: 100%;
    float: left;
    text-align: center;
    color: red;
    font-weight: bold;
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.oneconfiglinesave {
    width: 20%;
    height: 100%;
    float: left;
}

div.oneconfiglineright {
    width: 35%;
    height: 100%;
    float: left;
}

.infoTextContainer {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.oneconfiglineright label {
    padding-right: 4px;
}

.configshortterinput {
    width: 50%;
    float: left;
}

.configshortterbuttons {
    width: 40%;
    float: left;
}

.timeunitbtn {
    color: black;
    background-color: white;
    border-color: #46b8da;
}

.timeunitbtnactive {
    color: white;
    background-color: #46b8da;
    border-color: #46b8da;
}

.configbiggerfontsize {
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.configtabrightupper {
    width: 100%;
    height: 85%;

    font-weight: bold;
    font-size: 2.5vmin;
}

div.configtabrightlower {
    width: 100%;
    height: 15%;
}

div.batterylifediv {
    width: 80%;
    height: 100%;
    border-radius: 10px;
    /* //border: 1px solid #292929; */
    border: 5px double black;
    margin: auto;
    padding-bottom: 6px;
}

div.batterylifedivupper {
    width: 100%;
    height: 70%;
    font-size: 3vmin;
}

div.batterylifedivlower {
    width: 100%;
    height: 30%;
}

div.batterylifedivlowerleft {
    width: 10%;
    height: 100%;
    float: left;
    font-weight: bold;
}

div.batterylifedivlowermiddle {
    width: 80%;
    height: 100%;
    float: left;
}

/*
 * ==========================================================
 * Alarm page styles
 * ==========================================================
 */
div.alarmpage {
    width: 100%;
    height: 85vh;
    color: black;
}

div.homeMapAlarm {
    width: 100%;
    height: 100%;
}

div.leftmapdiv {
    width: 75%;
    height: 100%;
    float: left;
}

div.rightalarmdiv {
    width: 25%;
    height: 100%;
    float: left;
    padding-left: 10px;
}

div.rightalarmdivInner {
    width: 100%;
    height: 100%;
    background-color: white;
}

div.alarmTitle {
    width: 100%;
    /* height: 5%; */
    position: relative;
}

div.sortIcon {
    height: 100%;
    width: 3vmin;
    padding: 1px;
    padding-top: 3%;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    color: black;
    text-align: center;
    font-weight: bold;
    border-left: 2px solid #666;
}

div.statusfilterbuttondiv {
    /* width: 100%; */
    /* height: 5%; */
    /* position: relative; */
}

.titlebutton1 {
    width: 100%;
    height: 100%;
    background-color: #ececec;
    padding: 0px;
    font-weight: bold;
    /* font-size: 1.8vmin; */

    /* */
    border-radius: 0px;
    */
    /* border: 1px solid black; */
}

div.alarmList {
    width: 100%;
    height: 90%;
    padding: 6px;
    overflow: auto;
}

div.onealarmItem {
    width: 100%;
    height: 13vmin;
    padding-top: 3px;
    padding-bottom: 3px;
}

div.onealarmItemInner {
    width: 100%;
    height: 100%;
    border: 2px solid #666;
}

div.onealarmItemLeft {
    width: 5%;
    height: 100%;
    float: left;
}

.clearcolour {
    background-color: green;
}

.targetcriteriacolour {
    background-color: #FFC200;
}

.criticallimitcolour {
    background-color: red;
}

div.onealarmItemRight {
    width: 95%;
    height: 100%;
    float: left;
    font-size: 1.5vmin;
    text-align: center;
    font-weight: bold;
    padding-top: 2%
}

.homemaptable {
    text-align: center;
    width: 100%;
    height: 20px;
    font-size: 1.8vmin;
}

.homemaptablefont_size {
    font-size: 1.8vmin;
}

.homemaptdclassleft {
    background-color: #ececec;
    color: black;
}

.infowindow_td {
    background-color: #ececec;
    color: black;
    padding: 2px 0 2px 0;
}

.homemaptdclassright {
    background-color: white;
    color: black;
}

div.historyleftalarmlist {
    width: 30%;
    height: 90.9%;
    float: left;
    overflow: auto;
    background: #fff;
    margin-top: 4.35em;
}

div.maphistoryrightcharts {
    width: 100%;
}

div.maphistoryrightchartsInner {
    width: 100%;
    /* height: 100%; */
    overflow: auto;
}

div.maphistoryOneAlarmItemSet {
    width: 100%;
    /* border-bottom: 4px double black; */
    background-color: #fff;
    margin-bottom: 1em;
    margin-right: 1.5em;
}

div.maphistoryOneAlarmItemSetTitle {
    width: 100%;
    /* height: 5.5vmin; */
    text-align: center;
    /*font-size: 2vmin;*/
    padding-top: 1%;
}

div.maphistoryOneAlarmItemOneSite {
    width: 100%;
    height: 20vmin;
    padding-top: 5px;
    /* padding-bottom: 5px; */
    /*background-color: white;*/
}

div.maphistoryOneAlarmItemOneSiteInner {
    width: 100%;
    height: 100%;
}

.chartClass {
    width: 100%;
    height: 100%;
}

div.settingsTabdiv {
    width: 100%;
    height: 100%;
    /*background-color: black;*/
    color: white;
    overflow: auto;
    padding-top: 10px;
    font-size: 1.6vmin;
    padding-left: 10px;
    padding-right: 10px;
}

div.settings1tablelable {
    width: 100%;
    height: 5vmin;
    display: inline-flex;
    flex-direction: row;
}

div.settings1tableonerow {
    width: 100%;
    height: 20vmin;
    display: inline-flex;
    flex-direction: row;
}

div.settings1table1col {
    width: 15%;
    height: 100%;
    background-color: #266c8e;
    color: white;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 1.8vmin;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

div.settings1table1col {
    width: 15%;
    height: 100%;
    background-color: #266c8e;
    color: white;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 1.8vmin;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

div.settings1table1col1 {
    width: 15%;
    height: 100%;
    /*background-color: #40a2d3;*/
    color: white;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 1.8vmin;
    border-bottom: 2px solid black;
}

div.settings1tableright {
    width: 80%;
    height: 100%;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

div.settings1tablerightInner {
    width: 100%;
    height: 25%;
    line-height: 5vmin;
    white-space: nowrap;
    /* //display: inline-flex; */
    flex-direction: row;
}

div.settings1tablerightInner_onboard {
    width: 100%;
    height: 50%;
    line-height: 5vmin;
    white-space: nowrap;
    /* //display: inline-flex; */
    flex-direction: row;
}

div.settings1tablerightInner1 {
    width: 100%;
    height: 100%;
    line-height: 5vmin;
    white-space: nowrap;
    /*display: inline-flex;*/
    flex-direction: row;
}

div.settings1table2col {
    width: 20vmin;
    height: 100%;
    border-right: 2px solid black;
    border-bottom: 2px solid #eee;
    display: inline-block;
    text-align: center;
    background-color: white;
    color: black;
}

div.settings1table2col1 {
    width: 20vmin;
    height: 100%;
    //border-right: 2px solid black;
    //border-bottom: 2px solid #eee;
    display: inline-block;
    text-align: center;
    //background-color: white;
    //color: black;
}

div.settings1tablerightright {
    height: 100%;
    //white-space: nowrap;
    display: inline-flex;
    flex-direction: row;
}

div.settings1tablerightrightInner {
    width: 20vmin;
    height: 100%;
    border-right: 2px solid black;

    text-align: center;
    background-color: white;
    color: black;
    cursor: pointer;
}

div.settings1tablerightrightInner:hover {
    background-color: #b3d7eb;
}

div.settings1tablerightrightInner1 {
    width: 20vmin;
    height: 100%;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    text-align: center;
    background-color: #266c8e;
    color: white;
}

div.settings1measuresline {
    width: 100%;
    height: 25%;
    padding-left: 10px;
    padding-bottom: 10px;
}

div.settings1onemeasurement {
    width: 25%;
    height: 100%;
    float: left;
    padding-right: 10px;
}

div.settings1onemeasurementInner {
    width: 100%;
    height: 100%;
    border: 2px solid white;
}

div.settingsonemeasurementtitle {
    width: 100%;
    height: 18%;
    background-color: white;
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vmin;
}

div.settingsonemeasurementcontent {
    width: 100%;
    height: 82%;
    padding-top: 6px;
    padding-bottom: 6px;
}

.settings1onemeasurementlist {
    width: 100%;
    height: 100%;
    list-style: none;
}

.settings1onemeasurementlist li {
    width: 100%;
    height: 25%;
    cursor: pointer;
}

.settings1onemeasurementlist li:hover {
    background-color: #666;
}

div.settingssecondpage {
    width: 100%;
    height: 84%;
    display: none;
}

div.settings2left {
    width: 50%;
    height: 100%;
    float: left;
    padding-right: 5px;
    padding-top: 10px;
}

div.settings2leftInner {
    width: 100%;
    height: 100%;
    font-size: 1.8vmin;
    color: black;
}

div.settings2right {
    width: 50%;
    height: 100%;
    float: left;
    padding-top: 10px;
    padding-left: 5px;
}

div.settings2leftTitle {
    width: 100%;
    height: 6%;
    background-color: #eee;
    text-align: center;
    padding-top: 0.5%;
    font-weight: bold;
}

div.settings2list {
    width: 100%;
    height: 94%;
    background-color: white;
    overflow: auto;
    padding-top: 10px;
}

.settingsequiplist {
    //cursor: pointer;
    list-style-type: none;
}

div.settingsthirdpage {
    width: 100%;
    height: 84%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
    overflow: auto;
}

div.settings3firstrow {
    width: 100%;
    height: 20%;
    padding-bottom: 10px;
}

div.settings3secondrow {
    width: 100%;
    height: 50%;
    padding-bottom: 10px;
}

div.settings3firstrowcol1 {
    width: 33%;
    height: 100%;
    float: left;
    padding-right: 10px;
}

div.settings3firstrowcol1chk {
    width: 33%;
    height: 35%;
    float: left;
    padding-right: 10px;
}

div.settings3firstrowcol2 {
    width: 33%;
    height: 100%;
    float: left;
}

div.settings3firstrowcol1Inner {
    width: 100%;
    height: 100%;
    color: black;
}

div.settings3firstrowcol1Inner1 {
    width: 100%;
    height: 100%;
    overflow: auto;
    color: black;
}

div.settings3coltitle {
    width: 100%;
    height: 30%;
    font-size: 1.8vmin;
    background-color: #eee;
    text-align: center;
    padding-top: 1%;
    font-weight: bold;
}

div.setting3colcontent {
    width: 100%;
    height: 70%;
    background-color: white;
    padding-top: 2%;
}

div.settings3dropdowndiv {
    width: 80%;
    height: 80%;
    position: relative;
    margin: auto;
}

.setting3dropdownbtn {
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
}

.settings3dropdownlist {
    min-width: 80px;
    font-size: inherit;
    padding-left: 4px;
}

.settings3dropdownlist li:hover {
    background-color: #b3d7eb;
}

.settings3parametermeasurementlisttable {
    width: 80%;
    height: 80%;
    margin: auto;
}

.settings3parametermeasurementlisttable td {
    vertical-align: middle;
}

.settings3argumentinput {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0px;
    border: 1px solid #ccc;
}

div.setting3colcontentInner {
    width: 80%;
    height: 80%;
    margin: auto;
}

div.settings3hysteresisconleft {
    width: 70%;
    height: 100%;
    float: left;
    padding-right: 2px;
}

div.settings3hysteresisconright {
    width: 30%;
    height: 100%;
    float: left;
    padding-left: 2px;
    position: relative;
}

.settings3notificationaddress {
    width: 100%;
    height: 100%;
    /* //font-size: 1.8vmin; */
}

.settings3notificationaddress th {
    height: 30%;
    background-color: #eee;
    text-align: center;
    /* //font-weight: bold;
    //font-size: 1.8vmin; */
    padding-top: 1%;
}

.settings3notificationaddress td {
    background-color: white;
    text-align: center;
    font-size: 1.8vmin;
}

.settings3natcol1 {
    width: 46%;
    padding-left: 6px;
}

.settings3natcol2 {
    width: 18%;
    text-align: center;
}

div.settings3lastrow {
    width: 100%;
    height: 20%;
}

div.settings3rowcontentchartcontrolpanel {
    width: 100%;
    height: 20%;
    background-color: #ccc;
    padding-left: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: black;
}

div.datepickerbutton_settingshistory {
    width: 25%;
    height: 100%;
    float: left;
}

div.settings3rowcontentchartContent {
    width: 100%;
    height: 80%;
    background-color: white;
}

#settingshistoryChart {
    height: 100%;
    width: 100%;
}

div.settings3buttonsdivleft {
    width: 40%;
    height: 100%;
    float: left;
    font-size: 3vmin;
    display: inline;
    color: white;
}

.rightbtn {
    float: right;
}

/*
* ==========================================================
* Report page styles
* ==========================================================
*/

div.reportpage {
    width: 100%;
    height: 85vh;
}

div.reportcontrolpanel {
    -moz-box-shadow: 0px 3px 3px #343434;
}

div.reportdropdowndiv {
    width: 15%;
    height: 100%;
    float: left;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    position: relative;
}

.dailyprofiledropdownmenu {
    right: 0;
    //left: -60px;
    //width: 100px;
    width: 2vw;
    color: black;
}

.dailyprofiledropdownmenu li {
    padding-left: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.dailyprofiledropdownmenu li:hover {
    background-color: #afd8ed;
}


.weekdaybutton {
    background-color: #dddddd;
    padding: 0px;
    /* font-weight: bold; */
    height: 100%;
    /* width: 4.4vmin; */
}

.weekdaybutton:hover {
    background-color: #ccedfd;
}

.weekdaybutton:focus {
    background-color: #dddddd;
}

.weekdaybutton-active:hover {
    background-color: #ccedfd;
}


.weekdaybutton-active:focus {
    background-color: #ccedfd;
}

/*
			Settings Page + Sub Pages  START
#############################################################################################################
#############################################################################################################
*/

.settingsView {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #343434;
}

.userChangeContainer {
    height: 85vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.userSettingsContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70%;
    width: 30%;
    color: #000000;
    background-color: #FFFFFF;
}

.passwordContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30%;
    height: 25%;
    color: #000000;
    background-color: #FFFFFF;
}

.passwordContainerOpAd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 30%;
    color: #000000;
    background-color: #FFFFFF;
}

.formPWD {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.settingsInputRow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9%;
    width: 90%;
}

.pwdRow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16%;
    width: 90%;
}

.pwdBtnPos {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20;
    width: 90%;
    padding-bottom: 5px;
}

.userBtnPos {
    display: flex;
    justify-content: flex-end;
    ;
    align-items: center;
    height: 10%;
    width: 90%;
}

.boxlabel {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boxinput {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    height: 100%;
}

.userSetSel {
    height: 90%;
    width: 100%;
}

.userSetInput {
    height: 90%;
    width: 100%;
}

.settingsBtn {
    height: 60%;
    width: 25%;
}

.operatorSettingsContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: #000000;
    padding: 15px;
}

.detailChangeContainer2 {
    height: 95%;
    width: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.detailedChangeHight {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    background-color: #FFFFFF;
    margin-bottom: 15px;
}

.operatorViewLeftSide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 15px;
    height: 82vh;
    width: 75%;
}

.operatorViewUserContainer {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
}

.adminKPIContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 0vh;
    width: 100%;
    background-color: #FFFFFF;
}

.kpiTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    width: 100%;
}

.kpiRow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45%;
    width: 100%;
}

.kpiInputCont {
    width: 33.333333333%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.formclass {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.kpiInputBtn {
    width: 33.333333333%;
    height: 80%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.placeholderkpi {
    width: 5%;
}

.kpiInput {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 33.333333333%;
}

.kpiIn {
    margin-left: 10px;
    margin-right: 10px;
    height: 80%;
    width: 125px;
}

.kpiSelect {
    height: 80%;
    margin-left: 10px;
}

.checkbox {
    height: 20px;
    width: 20px;
}

.operatorpaneltable {
    overflow-y: auto;
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

hr {
    width: 80%;
    border: 1px solid #000000;
}

.userCreateContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    color: #000000;
    background-color: #FFFFFF;
}

.greyBackground {
    background-color: #e5e5e5;
}

.invalidInput {
    border: 1px solid red;
    height: 90%;
    width: 100%;
}

.error {
    color: red;
}


.userCreateForm {
    height: 65%;
    width: 100%;
}

.deleteBtn {
    height: 25px;
    width: 25px;
}

.deleteBtn:hover {
    cursor: pointer;
}

td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tdCenter {
    text-align: center;
}

th {
    text-align: center;
}


/* image pages css */
.chart_bx_wd {
    background-color: #3255a2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
}

.chart_bx_wd img {
    width: 30px;
    /* display: flex; */
    justify-content: center;
    align-self: center;
    margin: 0px auto;
}

.slider_bx_wd {
    background-color: #3255a2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
}

.slider_bx_wd img {
    width: 30px;
    /* display: flex; */
    justify-content: center;
    align-self: center;
    margin: 0px auto;
}

.flex_bx_gird {
    display: flex;
    display: flex;
    justify-content: space-between;
    padding: 5px 18px;

}

.flx_bx_main {
    display: flex;
    justify-content: space-between;
}

.img_slider_dt {
    max-width: 50%;
    width: 100%;
    transition: 0.5s;
    overflow: hidden;
}

.test_st {

    max-width: 100%;
}

.chart_bx {
    max-width: 49%;
    width: 100%;
    transition: 0.5s;
}

.test_st {

    max-width: 100%;
}

.image-page {
    width: 100%;
    display: inline-block;
    /* max-height: 230px; */
    border-bottom: 5px solid #3255A2;
    background-color: #fff;
}

.image_main_div {
    /*max-width: 900px;*/
    width: 100%;
    margin: 0px auto;
    display: block;
}

.select_data select {
    height: 100%;
    background-color: #fff;
    border: 1px solid black;
    height: 28px;
    margin-right: 22px;
}


.image_slider {
    /* width: 49%; */
}

.image_main_div .top_bar {
    display: flex;
}

.image_main_div .content_div {
    /* display: flex;
	justify-content: space-between; */
    margin-top: 10px;
}

.img_slider_carsel {
    position: relative;
    display: block !important;
}

.img_slider_carsel .owl-prev {
    top: 42%;
    position: absolute;
    left: 20px;
}

.img_slider_carsel .owl-next {
    top: 42%;
    position: absolute;
    right: 20px;
}

.img_slider_carsel .owl-next img {
    padding-right: 25px;
}

.image_main_div .graph img {
    width: 100%;
}

.image_slider .owl-item img {
    display: block;
    width: 100%;

    height: 450px;
    object-fit: cover;
}

.image_slider .owl-item {
    width: 100%;
}

.graph {
    width: 50%;
    position: relative;
    height: 510px;
    /* box-shadow: (0px 3px 3.5px rgba(0,0,0,0.35));*/

    /* box-shadow: 0px 3px 3.5px 1px rgb(0 0 0 / 35%);*/
    box-shadow: 0 3px 3.5px rgb(0 0 0 / 35%), 0 0px 3.5px rgb(0 0 0 / 35%);
}

.graph_bg {

    position: absolute;
    top: 49%;
    /*left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);*/
    z-index: 99;

}

.bg_color_br {
    margin-top: 10px;
    background-color: #3255a2;
    height: 50px;
    display: block;
    justify-content: start;
    padding: 0px 19px;
}

.date_time_stamp p {
    margin: 0px;
    color: #fff;
    padding: 17px 0px;
}

.date_time_stamp p {
    margin: 0px;
    color: #fff;
    /* font-size: 14px; */
}

.date_time_stamp span {
    margin-left: 10px;
}

.cstm_img_ofl {
    overflow: auto;
    /* width: 100%; */
}

.control_panel ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: inline-flex;
    margin-top: 7px;
    z-index: 99;
    background-color: #3255a2;
}

.control_panel li {
    margin-right: 6px;
    cursor: pointer;
}

.control_panel li img {
    width: 32px;
}

/* fetch date time*/
.control_panel {
    margin-left: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.owl-item img {
    margin-bottom: 25px;
}

.owl-item .datetime {
    color: #fff;
    display: block;
    padding-left: 15px;
}

.date_slide_cntrl {
    margin-top: -45px;
}

/* fetch date time end*/

/* image page end */

/* MEDIA QUERIES*/

/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    div.chartsMainControls {
        width: 100%;
        height: 5.5vmin;
        color: black;
        background-color: #ececec;
        top: 0px;
        left: 0px;
        overflow-x: hidden;
        padding-left: 5px;
    }

    body {
        font-size: 1.3em;
        line-height: 1em;
    }

}

@media screen and (min-width: 990px) {
    .loginHeader {
        justify-content: space-between;
    }
}

@media screen and (max-width: 570px) {

    .frame_speed {
        display: block;
    }

    .jmp_frame {
        margin: 15px 0px;
    }

    .time_stamp p {

        position: inherit;

        margin: 10px 0px;
    }
}

@media screen and (max-width: 992px) {
    .image_main_div .content_div {
        display: block;
    }

    .graph {
        width: 100%;
    }

    .image_slider {
        width: 100%;
    }

    .img_slider_carsel .owl-item {
        width: 100%;
        margin-top: 20px;
    }

    .img_slider_carsel .owl-prev {
        top: 50%;
    }

    .img_slider_carsel .owl-next {
        top: 50%;
    }
}

@media screen and (max-width: 1440px) {

    div.chartsStatsColInner {
        width: 100%;
        height: 100%;
        padding-bottom: 2px;
        border: 1px solid #666;
        /* font-size: 0.8em; */
        overflow: auto;
    }

}

@media screen and (max-height: 750px) {
    .pub-logo {
        height: 50%;
    }
}

div.activedata_alarmlist_history_box {
    width: 30%;
    height: 100%;
    /*90.9%;*/
    float: left;
    overflow: auto;
    background: #fff;
    /*margin-top: 4.35em;*/
}

div.activedata_alarmlist_history_box_row {

    width: 100%;
    /*height: 4em; */
    position: relative;
    display: flex;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
}

div.activedata_alarmlist_history_box_cell_checkbox {
    width: 11%;
    margin: auto;
    text-align: center;
}

div.activedata_alarmlist_history_box_cell_text {
    width: 89%;
    margin: auto;
    text-align: left;
}


div.activedata_status_alarmlist_box {

    width: 100%;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;

}

div.activedata_status_alarmlist_box_targetcriteria {

    width: 100%;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
    background-color: #ffa500;

}

div.activedata_status_alarmlist_box_criticallimit {
    width: 100%;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
    background-color: ;
}

div.activedata_status_alarmlist_box_row {

    margin: 0px 5% 0px 5%;
    background-color: white;

}

div.activedata_status_alarmlist_box_row_bold {

    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;

}

div.activedata_status_alarmlist_box_row_bold_targetcriteria {

    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;
    color: #fbbc05;

}

div.activedata_status_alarmlist_box_row_bold_criticallimit {

    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;
    color: #ea4335;

}

div.activedata_status_alarmlist_box_row_bold_clear {
    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;
    color: #34a853;
}

/* Utility styles */
.paddingTopBot {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.paddingAll {
    padding: 0.8em;
}

.icon-color {
    color: #000000;
}

.transparent {
    opacity: 0.4;
}

.loginInner {
    width: 30%;
    padding: 2.5rem;
    background-color: #dddddd;
    border-radius: 1em;
}

.loginInput {
    width: 100%;
}

.formMarginBottom {
    margin-bottom: 1.0rem;
}

.errorMessage {
    color: #cc1520;
}

.marginBot {
    margin-bottom: 1.0rem;
}

.marginTop {
    margin-top: 1.0rem;
}

.marginLeft {
    margin-left: 1.0rem;
}

.mainTreeMeasurements {
    height: 40%;
    width: 100%;
    /*
  padding-left: 4.0rem;
  padding-top: 2.0rem;
  */
    background: #fff;
    border-top: 2px solid #343536;
    border-bottom: 2px solid #343536;
    overflow-y: auto;
    color: #000;
}

.noStyle {
    list-style: none;
    font-size: 2vmin;
}

table.navButtons {
    /* height: 100%; */
    width: 100%;
    margin-bottom: 0px;
    padding-bottom: 0px;
    float: right;
}

.monitoringTab {
    font-weight: normal;
}

.rightMargin {
    margin-right: 0.3rem;
}

/*  Styles for home.html */

div.viewtemplateInner {
    width: 100%;
    height: 100%;
    position: relative;
}


.meterTree {
    height: 100%;
    width: 20%;
    float: left;
    /* font-size: 1em; */
}

.meterTree2 {
    border-bottom: 2px solid #343536;
    height: 100%;
    width: 20%;
    float: left;
    display: block;
}

.withtree {
    height: 100%;
    width: 80%;
    float: left;
    /* box-sizing: border-box; */
    padding: 0.5em;
}

.treeInner {
    height: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.treeInner1 {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.meterTreeTitle {
    text-align: center;
    justify-content: center;
    width: 100%;
    height: 8%;
    font-weight: 900;
    padding-top: 5px;
}

div.homemaparea {
    position: relative;
    width: 100%;
    height: 100%;
}

div.homeleft {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
}

div.homeright {
    position: absolute;
    top: 10%;
    height: 75%;
    width: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
    right: 0px;
}

div.panelBig {
    width: 25%;
}

div.panelSmall {
    width: 2%;
}

div.homerightControl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 10%;
    height: 100%;
}

div.panelSmallC {
    width: 100%;
}

div.sliderBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    height: 40%;
    width: 100%;
    background-color: #fff;
    transition: all 0.3s ease 0s;
    border-bottom: 2px solid #111;
}

div.sliderBtn:hover {
    cursor: pointer;
    background-color: #afd8ed;
}

/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-left: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-right: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

div.homerightContentPanel {
    //display: flex;
    //align-items: center;
    //justify-content: center;
    //flex-direction: column;background-color: #FFFFFF;height: 100%;width: 90%;/* overflow-y: auto; *//* overflow-x: hidden; */border-top-left-radius: 5px;border-bottom-left-radius: 5px;border-bottom: 2px solid #111;
}

div.homerightTitle {
    background-color: #c1c1c1;
    height: 6%;
    width: 100%;
    text-align: center;
    /* font-size: 1.8vmin; */
    padding-top: 3px;
    padding-bottom: 5px;
    border-top-left-radius: 5px;
    font-weight: bold;
}

.homerightContent {
    //
    display: flex;
    //
    align-items: center;
    //
    justify-content: flex-start;
    //
    flex-direction: column;
    width: 100%;
    height: 94%;
    //
    overflow-y: scroll;
    border-bottom-left-radius: 5px;
    border-bottom: 8px solid #FFF;
    padding-right: 6px;
    padding-left: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 5px;
}

div.homerightGroupTitle {
    font-size: 1.8vmin;
    width: 100%;
    text-align: center;
    /*padding-top: 3px;*/
    padding-bottom: 4px;
}

div.homerightGroupItem {
    height: 26%;
    width: 100%;
    padding-bottom: 5px;
}

div.homerightGroupItemInner {
    height: 100%;
    width: 100%;
    border: 3px solid #fbb726;
    overflow: auto;
}

div.homerightGroupItemInner_targetcriteria {
    height: 100%;
    width: 100%;
    border: 3px solid #fbbc05;
    overflow: auto;
}

div.homerightGroupItemInner_criticallimit {
    height: 100%;
    width: 100%;
    border: 3px solid #ea4335;
    overflow: auto;
}

div.homerightGroupItemLeft {
    height: 100%;
    float: left;
    /*padding: 1px;*/
    width: 18%;
    background: #fbb726;
}

div.homerightGroupItemLeft_targetcriteria {
    height: 100%;
    float: left;
    /*padding: 1px;*/
    width: 18%;
    background: #fbbc05;
}

div.homerightGroupItemLeft_criticallimit {
    height: 100%;
    float: left;
    /*padding: 1px;*/
    width: 18%;
    background: #ea4335;
}


/*div.homerightGroupItemRight{height:100%;float: left;border-left: 2px solid #fbb726;width: 82%;font-size: 1em;}*/
div.homerightGroupItemRight {
    height: 100%;
    float: left;
    width: 82%;
    font-size: 1em;
}

.infoPanelTable {
    width: 100%;
    height: 100%;
    text-align: center;
}

.trtitle {
    font-weight: bold;
}

.locationcell {
    width: 50%;
}

.homerightGroupItemImg {
    width: 100%;
}

.settingsalarmtable {
    margin: auto;
    width: 80%;
    border-collapse: collapse;
}

.settingsalarmtable td {
    border: 1px solid white;
    padding: 3px;
}

.buttontablecell {
    text-align: center;
}


div.setting2title {
    width: 100%;
    height: 5%;
    text-align: center;
    font-size: 2vmin;
    font-weight: bold;
}

div.settings2buttons {
    width: 100%;
    height: 10%;
    padding-top: 4px;
    text-align: center;
}

div.settings3rowlabel {
    width: 100%;
    height: 20%;
    font-size: 3vmin;
    font-weight: bold;
}

div.settings3rowlabel1 {
    width: 100%;
    height: 12%;
    font-size: 3vmin;
    font-weight: bold;
}

div.settings3rowcontent {
    width: 100%;
    height: 80%;
}

div.settings3titlelable {
    width: 100%;
    height: 20%;
    background-color: #ececec;
    text-align: center;
    font-weight: bold;
    font-size: 2vmin;
    padding-top: 1%;
    border-bottom: 2px solid #ddd;
}

div.settings3parametermeasurementlist {
    width: 100%;
    height: 80%;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
}

.settings3parametermeasurementlistul {
    width: 100%;
    height: 100%;
    list-style-type: none;
    font-size: 1.8vmin;
    margin-bottom: 0px;
}

.settings3parametermeasurementlistul li:hover {
    background-color: #b3d7eb;
}

div.settings3argument {
    width: 30%;
    height: 100%;
    float: left;
    background-color: white;
    color: black;
}

div.settings3threshold {
    width: 30%;
    height: 100%;
    float: left;
    padding-left: 10px;
}

div.settings3argumentInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
}

div.settings3hysteresis {
    width: 20%;
    height: 100%;
    float: left;
    padding-left: 10px;
}

div.settings3notificationsesInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    overflow: auto;
}

div.settings3notificationses {
    width: 30%;
    height: 100%;
    padding-right: 10px;
    float: left;
}

div.settings3notificationsschedule {
    width: 25%;
    height: 100%;
    padding-right: 10px;
    float: left;
}

div.settings2schedule1 {
    width: 100%;
    height: 25%;
    text-align: center;
    font-weight: bold;
}

div.settings2schedule2 {
    width: 100%;
    height: 20%;
    text-align: center;
    font-weight: bold;
}

div.settings2schedule1Inner {
    width: 80%;
    height: 100%;
    margin: auto;
}

.settings3scheduleinput {
    width: 100%;
    height: 100%;
    padding: 6px;
    text-align: center;
}

div.settings3scheduledropdowndivleft {
    width: 50%;
    height: 100%;
    float: left;
}

div.settings3scheduledropdowndiv {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
}

.setting3scheduleinputbtn {
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    border: 1px solid black;
}

.settings3scheduledropdownlist {
    min-width: 80px;
    font-size: inherit;
}

div.settings3schedulemaxrepeatdropdowndiv {
    width: 40%;
    height: 100%;
    margin: auto;
}

.settings3aggregateeventlistul {
    width: 100%;
    height: 100%;
    list-style-type: none;
    font-size: 1.8vmin;
    margin-bottom: 0px;
    text-align: center;
}

.settings3aggregateeventlistul li:hover {
    background-color: #b3d7eb;
}

div.settings3rowcontentchart {
    width: 100%;
    height: 88%;
    background-color: white;
}

div.settings3buttonsdiv {
    width: 100%;
    height: 9%;
    padding-top: 1%;
    text-align: center;
}


.summaryContainerLoading {
    font-size: 4em;
    font-weight: bold;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;
    z-index: 9999;
}

.summaryTreeContainer {
    height: 100%;
    width: 25%;
}

.summaryChartContainer {
    height: 100%;
    width: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-left: 1em;
    margin-right: 1em;
    position: relative;
    /* overflow-x: scroll; */
    /* margin-top: 55px; */
}

.summaryControl {
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 4px;
}

.summaryControl2 {
    height: calc(1em * 2);
    width: 100%;
    display: flex;
    align-items: flex-end;
    float: left;
    padding: 4px;
    border-bottom: 3px solid #40a2d3;
    padding-bottom: 0;
}

.legendControl {
    height: 100%;
    width: 15%;
    overflow-y: auto;
    overflow-x: hidden;
}

.summaryInfo {
    height: 82vh;
    width: 100%;
    display: flex;
    color: #000;
}

.summaryChart {
    height: 100%;
    width: 85%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.summaryLargeChart {
    height: 86%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.chartContainerOne {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 95%;
    flex-grow: 1;
}

.scatterPlot .tptitlebar {
    display: flex;
    justify-content: space-between;
}

.scatterPlot .chartContainerOne {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
}

.scatterPlot .chartContainerOne.addScrollY {
    overflow-y: auto;
}

.hiddenScrollXY {
    overflow: hidden;
}

.chartContainerTwo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    height: 95%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartContainerThree {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.333333333%;
    height: 95%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartContainerFourToSix {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.333333333%;
    height: 48%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.chartContainerSevenToNine {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.333333333%;
    height: 31.333333333%;
    padding-left: 0.4em;
    padding-right: 0.4em;
}


.chartTitle2:hover {
    cursor: pointer;
}

.datepickerbuttonInner {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    border: 1px solid #000000;
    /* font-weight: bold; */
}

.datepickerbuttonInner td {
    border: 1px solid #000000;
    vertical-align: middle;
    text-align: center;
}

.datepickerbuttonleft {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.datepickerbuttonmiddle {
    width: 72%;
    height: 100%;
}

.datepickerbuttonright {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.intervalContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px;
    height: 100%;
    width: 10%;
}

.summaryInterval {
    height: 100%;
    width: 100%;
    border: 1px solid;
}


/*
 * ==========================================================
 * home.html styles
 * ==========================================================
 */

div.historytabbar {
    height: 5%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    float: left;
    padding: 4px;
    border-bottom: 3px solid #3255A2;
    background-color: #343434;
    padding-bottom: 0;
}

div.hometitlebar {
    width: 100%;
    height: 6%;
    background-color: #ececec;
    -webkit-box-shadow: 0px 3px 3px #343434;
    -moz-box-shadow: 0px 3px 3px #343434;
    box-shadow: 0px 3px 3px #343434;
}

div.hometitlebuttondivFirst {
    width: 12%;
    height: 100%;
    float: left;
    padding: 4px;
}

div.hometitlebuttondiv {
    width: 12%;
    height: 100%;
    float: left;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    transition: all 0.3s ease 0s;
}

.hometitlebutton-active {
    width: 100%;
    height: 100%;
    background-color: #afd8ed;
    padding: 0px;
    font-weight: bold;
}

.hometitlebutton-active:hover {
    background-color: #d3f0ff;
}

.hometitlebutton-active:focus {
    background-color: #afd8ed;
}

.hometitlebutton {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    padding: 0px;
    font-weight: bold;
    transition: all 0.3s ease 0s;
}

.hometitlebutton:hover {
    background-color: #d3f0ff;
}

.hometitlebutton:focus {
    background-color: #afd8ed;
}

div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-right: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 10px solid transparent;
    /* left arrow slant */
    border-top: 10px solid transparent;
    /* right arrow slant */
    border-left: 10px solid #2f2f2f;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

div.homerightTitle_02 {
    background-color: #c1c1c1;
    height: 5%;
    width: 100%;
    text-align: center;
    font-size: 1em;
    padding-top: 3px;
    padding-bottom: 5px;
    border-top-left-radius: 5px;
}

.homerightContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 94%;
    overflow-y: scroll;
    border-bottom-left-radius: 5px;
    border-bottom: 8px solid #FFF;
    padding-right: 6px;
    padding-left: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.9em;
    line-height: 1.1em;
}

div.intervalbuttondiv {
    width: 14%;
    height: 100%;
    float: left;
    padding: 4px;
    position: relative;
}

/*  Styles for kisoks.html */

.kisokChart {
    position: absolute;
    height: 100%;
    width: 100%;
}

.kioskChartsContainer {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    display: flex;
}

.kioskChartsLeft {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kioskChartsLeftUpper {
    margin: 4px;
    border: 5px solid lightgray;
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.kioskChartsLeftUpperTitle {
    font-size: 1.6em;
    height: 7%;
    width: 100%;
}

.kioskChartsLeftUpperSubTitle {
    font-size: 1.2em;
    height: 5%;
    width: 100%;
}

.kioskChartsLeftUpperChart {
    position: relative;
    height: 88%;
    width: 100%;
}

.kioskFull {
    height: 100%;
    width: 100%;
    position: relative;
}

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    z-index: 99999;
    position: absolute;
    height: 100%;
    width: 100%;
    color: #000;
    background-color: #FFF;
}

.kioskChartsLeftLower {
    margin: 4px;
    border: 5px solid lightgray;
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.kioskChartsLeftLowerTitle {
    font-size: 1.6em;
    height: 15%;
    width: 100%;
}

.kioskChartsLeftLowerChartContainer {
    height: 85%;
    width: 100%;
    display: flex;
}

.kioskChartsLeftLowerChartItem {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 33.3333333333%;
}

.kioskLowerTitle {
    height: 15%;
}

.kioskChartsRight {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 12px;
    margin-right: 4px;
    border: 5px solid lightgray;
    width: 20%;
    height: 99%;
    display: flex;
    flex-direction: column;
}

.kioskChartsRightTitle {
    padding: 0.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 1.6em;
    width: 100%;
    height: 10%;
}

.kioskChartsRightItem {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 30%;
}


/*
 * ==========================================================
 * Chart page styles
 * ==========================================================
 */


div.historypageInner {
    width: 100%;
    height: 100%;
}

.chartsTabContent {
    height: 100%;
    width: 100%;
    display: flex;
    flex-grow: 1;
    background-color: #fff;
}

div.historypageTabContent {
    height: 92%;
    width: 100%;
    display: flex;
    flex-grow: 1;
}

div.chartsMainControls {
    width: 100%;
    /* height: 6%; */
    color: black;
    background-color: #fff;
    padding: 4px;
}

div.datepickerbutton {
    /* width: 24%; */
    height: 100%;
    float: left;
    /* padding-right: 4px; */
    /* padding-top: 4px; */
    /* padding-bottom: 4px; */
    */ padding: 0px;
}

.datepickerbuttonInner {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    border: 1px solid #000000;
}

.datepickerbuttonInner:hover {
    background-color: #b3d7eb;
}

.datepickerbuttonInner td {
    border: 1px solid #000000;
    vertical-align: middle;
    text-align: center;
    /* font-weight: bold; */
    font-size: 0.9em;
}

.datepickerbuttonleft {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.datepickerbuttonmiddle {
    width: 72%;
    height: 100%;
}

.datepickerbuttonright {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

div.intervalbuttondiv {
    width: 13%;
    height: 100%;
    float: left;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
    position: relative;
}

.titlebutton {
    height: 100%;
    background-color: #fff;
    border: 1px solid black;

    height: 28px;
}

.titlebutton:hover {
    background-color: #d3f0ff;
}

.titlebutton:focus {
    background-color: #d3f0ff;
}

.titlebutton-actived {
    width: 100%;
    height: 100%;
    background-color: #afd8ed;
    padding: 0px;
    font-weight: bold;
}

.titlebutton-actived:hover {
    background-color: #d3f0ff;
}

.titlebutton-actived:focus {
    background-color: #d3f0ff;
}

.overviewdropdownmenu {
    right: 0;
    //left: -60px;
    min-width: 115px;
}

.overviewdropdownmenu li {
    padding-left: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.overviewdropdownmenu li:hover {
    background-color: #dddddd;
}

div.charttitlebuttondivLeft {
    height: 1.8em;
    float: left;
}

.kpibuttonOff {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    border: 1px solid black;
    padding: 0px;
    /* font-weight: bold; */
    border-radius: 0px;
    font-size: 1em;
}

.kpibuttonOff:hover {
    background-color: #d3f0ff;
}

.btnTopBar {
    /*width: 3.5vmin;*/
    height: 100%;
    float: left;
    background-color: #000;
    color: #e6e6e6;
    border: none;
    margin-right: 4px;
    padding: 14.5px 10px;
    /*    font-size: 16px;*/
    line-height: 1px;
}

.btnTopBarOff {
    /*width: 3.5vmin;*/
    height: 100%;
    float: left;
    background-color: #3255A2;
    color: #e6e6e6;
    border: none;
    margin-right: 4px;
    padding: 14.5px 10px;
    /*font-size: 16px;*/
    line-height: 1px;
}

.btn-oz {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    height: 100%;
    float: left;
    background-color: #3255A2;
    color: #e6e6e6;
    border: 1px solid #3255A2;
}

.btn-oz:hover {
    background-color: #284481;
    transform: scale(1.05);
}

.btn-oz-disabled {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    height: 100%;
    float: left;
    background-color: #acacac;
    color: #e6e6e6;
    border: 1px solid #acacac;
}

.btn-oz-disabled:hover {
    background-color: #acacac;
    cursor: not-allowed;
    transform: scale(1.0);
}

.btnReset {
    padding: 1px 1rem;
    height: 100%;
    float: left;
    background-color: #3255A2;
    color: #e6e6e6;
    border: none;
    height: 29px;
    /*	font-size: 16px;*/
}

.btnReset:hover {
    background-color: #000;
}

.btnTopBarOff:hover {
    background-color: #000;
}

div.chartsArea {
    flex-grow: 1;
    margin-top: 30px;

}

div.chartsAreaInner {
    width: 100%;
    background: #fff;
    height: 100%;
    flex-grow: 1;
}

div.chartsStatsContainer {
    width: 100%;
    padding-top: 6px;
    /* display: flex; */
}

.statTitleSpan {
    width: 86%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: bold;
}

/*
.statTitleSpan{
	height: 100%;
	width: 90%;
}
*/
.chartsStatsTable {
    width: 100%;
    height: inherit;
}

.chartsStatsTable tr {
    height: 50%;
    box-sizing: border-box;
    margin-bottom: 0.3em;
}

.chartsStatsTable td {
    padding-left: 4px;
    padding-left: 2px;
    padding-right: 2px;
    width: 25%;
    box-sizing: border-box;
}

.chartsStatsTable td:first-child {
    padding-right: 4px;
}

.chartsStatsTable td:last-child {
    padding-left: 2px;
}

div.chartsStatsColInner {
    width: 25%;
    /* height: 96%; */
    /* padding-bottom: 2px; */
    border: 3px solid #fff;
    float: left;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0.5em;
}

div.chartsStatsRow {
    width: 100%;
    display: flex;
    font-weight: bold;
    box-sizing: border-box;
    padding: 1px;
}

div.numberdiv {
    width: 8%;
    text-align: center;
    font-weight: bold;
    float: left;
}

div.closediv {
    height: 100%;
    padding: 3px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    color: black;
    border-left: 2px solid #666;
}

.title-span {
    display: flex;
    justify-content: space-between;
    padding: 0.5em;
    width: 94%;
}

div.closediv1 {
    padding: 0.5em;
    width: 6%;
    top: 0px;
    right: 0px;
    cursor: pointer;
    color: black;
    text-align: center;
    float: right;
    margin: auto;
}

/*
div.closediv1{
	height: 100%;
	padding: 1px;
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	color:  black;
	border-left: 2px solid #666;
}
*/


div.chartsStatsContent {
    width: 100%;
    padding-left: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    font-weight: bold;
    float: left;
}

div.chartsStatsContentInner {
    width: 100%;
}

.itemhidden {
    visibility: hidden;
}

div.chartsStatsRowLower {
    width: 100%;
    text-align: center;
    float: left;
}

div.dropdownloacalRegion {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

button.dropdownbuttonRegion {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 100%;
    padding-top: 0px;
}

.dropdownmenuPoint {
    width: 100%;
    overflow: auto;
    height: 80px;
    border: 1px solid #666;
    font-size: 1.5vmin;
    cursor: pointer;
}

.dropdownmenuPoint li:hover {
    cursor: pointer;
    background-color: #afd8ed;
}

.dropdownmenuUnit {
    width: 100%;
    border: 1px solid #666;
    font-size: 1.5vmin;
    cursor: pointer;
}

.dropdownmenuUnit li:hover {
    cursor: pointer;
    background-color: #666;
}

div.chartsStatsRowLeft {
    width: 50%;
    /* height: 100%; */
    padding-right: 2px;
    float: left;
}

div.chartsRowLeftLeft {
    width: 50%;
    /* height: 100%; */
    text-align: right;
    padding-right: 4px;
    float: left;
}

div.chartsRowLeftRight {
    width: 50%;
    /* height: 100%; */
    padding-left: 4px;
    float: left;
}

div.chartsStatsRowRight {
    width: 50%;
    /* height: 100%; */
    padding-left: 2px;
    float: left;
}


div.timeComaprsionTab {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

div.datapickerLabel {
    width: 8%;
    height: 100%;
    float: left;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: center;
    font-size: 0.9em;
}

.series0_color {
    color: #ea4335;
}

.series1_color {
    color: #4285f4;
}

div.datepickerbutton1 {
    /* width: 23%; */
    /* height: 100%; */
    float: left;
    /* padding-right: 4px; */
    /* padding-top: 4px; */
    /* padding-bottom: 4px; */
}

div.chartsArea1 {
    width: 100%;
    /* padding-left: 10px; */
    flex-grow: 1;
    height: 1px;
}

div.chartsStatsContainer1 {
    width: 100%;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: row;
    background: #fff;
    padding-left: 2px;
}

div.chartsStatsCol {
    width: 25%;
    height: 100%;
    float: left;
    padding-right: 4px;
    font-size: 1em;
}

div.chartsStatsButtonsDiv {
    width: 6%;
    /* height: 100%; */
    /* float: left; */
    /* padding-right: 4px; */
    /* margin: auto; */
    /* vertical-align: -webkit-baseline-middle; */
    /* flex-grow: 1; */
}

button.btnstatsright {}

button.btnstatsright:hover {
    background-color: #afd8ed;
}

button.btnstatsright:focus {
    background-color: white;
}

button.btnstatsright:active {
    background-color: white;
}

div.measureTable {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: white;
    color: black;
    z-index: 99;
}

div.measureTableLeft {
    width: 93%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

div.oneTableDiv {
    height: 100%;
    width: 100%;
    display: flex;
}

.fullWidth {
    width: 100% !important;
}

div.tableDivC {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-left: 10px;
}

div.measureTableRight {
    height: 100%;
    padding: 0.5em;
}

.btnSideBar {
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: calc( 0.5em * 5 );*/
    height: calc(0.5em * 5);
    margin: auto;
    background-color: #3255A2;
    color: #e6e6e6;
    border: none;
}

.btnSideBar:hover {
    transform: scale(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    margin: auto;
}

.btnSideBar:active {
    transform: scale(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3255A2;
}

.avgcolour {
    color: #017bb8;
}

.maxcolour {
    color: #ff002a;
}

.mincolour {
    color: #25a71e;
}

/*
  * ==========================================================
  * Overview page styles
  * ==========================================================
  */
div.overviewpage {
    width: 100%;
    height: 84.2vh;
}

div.overviewTabBar {
    height: 5%;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 3px solid #40A2D3;
}

.tpPage {
    width: 100%;
    height: 100%;
}

div.overviewcontents {
    width: 100%;
    height: calc(100% - 2.2em);
}

div.overviewcontentsInner {
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    position: relative;
    display: flex;
    flex-direction: column;
}

div.overviewtitlebar {
    background-color: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    float: left;
}

div.overviewChartContainer {
    display: flex;
    overflow: auto;
    height: 100%;
}

div.overviewChartContainerInner {
    width: 100%;
    /* height: 100%; */
    padding-top: 6px;
    overflow-y: auto;
    padding-right: 10px;
    padding-left: 10px;
}

div.oneChartContainer {
    width: 100%;
    height: 9em;
    padding-bottom: 10px;
}

div.oneChartContainerInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    /* font-weight: bold; */
    border: 2px solid #666;
}

.oneChartLeftTable {
    width: 100%;
    height: 100%;
}

.oneChartLeftTable td {
    vertical-align: middle;
    text-align: center;
    font-style: inherit;
}

.chartClassOverview {
    width: 98%;
    height: 100%;
}

div.oneChartRightRight {
    width: 5%;
    height: 100%;
    float: left;
    border-left: 2px solid #666;
}

.inneroneChartRightRight {
    height: 100%;
    width: 100%;
}

div.overviewequiplabel {
    width: 60%;
    height: 100%;
    float: right;
    padding-right: 10px;
    text-align: right;
    /* font-size: 2vmin; */
    /* font-weight: bold; */
    padding-top: 0.8%;
}

.overviewfoldbuttonOn {
    background-color: #3ca0d2;
    padding: 0px;
    font-weight: bold;
    height: 33.3%;
    width: 100%;
    color: white;
    /* border: 2px solid white; */
}

.overviewfoldbuttonOn:hover {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOn:focus {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOn:active {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOff {
    background-color: #266c8e;
    padding: 0px;
    //
    font-weight: bold;
    height: 33.3%;
    width: 100%;
    color: white;
    /* border: 2px solid white; */
}

.overviewfoldbuttonOff:hover {
    background-color: #4694b9;
    /* border: 2px solid white; */
    color: white;
}

.overviewfoldbuttonOff:focus {
    background-color: #4694b9;
    border: 2px solid black;
    color: white;
}

.overviewfoldbuttonOff:active {
    background-color: #4694b9;
    border: 2px solid black;
    color: white;
}

/*
* ==========================================================
* Maintenance page styles
* ==========================================================
*/
div.maintenancepage {
    width: 100%;
    height: 89vh;
    position: relative;
}

div.maintenancetabbar {
    height: 2.2em;
    width: 100%;
    display: flex;
    align-items: flex-end;
    float: left;
    padding: 4px;
    border-bottom: 3px solid #3255A2;
    padding-bottom: 0;
}

div.maintenanceTabContent {
    width: 100%;
    display: flex;
    height: 100%;
}

div.montioringTab {
    height: 100%;
    width: 100%;
    color: black;
    background-color: #dddddd;
    display: flex;
    flex-direction: column;
}

div.onelabel {
    width: 100%;
    height: 6.2vmin;
    padding: 6px;
}

div.maintenancespanleft {
    width: 22%;
    line-height: 4.5vmin;
    float: left;
    font-weight: bold;
}

div.maintenancespanright {
    width: 20%;
    background-color: white;
    border: 2px solid #000000;
    line-height: 4.2vmin;
    float: left;
    padding-left: 6px;
}

div.maintenancedatepickerbutton {
    width: 24%;
    height: 100%;
    float: left;
    background-color: white;
}

.maintenancedatepickerbuttonInner {
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
}

.maintenancedatepickerbuttonInner td {
    border: 1px solid #000000;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}

.datepickerbuttonleft {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}

.datepickerbuttonmiddle {
    width: 72%;
    height: 100%;
}

.datepickerbuttonright {
    width: 14%;
    height: 100%;
    font-size: 1.6vmin;
    padding-top: 1%;
}


.fsedittitle {
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    height: 5%;
}

.fseditcontent {
    width: 100%;
    height: 90%;
    padding-top: 3px;
    display: flex;
    flex-direction: column;
}

.fseditbottom {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.fseditmodule {
    height: 25%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.green-border {
    border: 2px solid #5cb85c;
    border-radius: 10px;
}

.fseditsubmodule {
    height: 100%;
    border: 2px solid #5cb85c;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 3px;
}

.fseditsubmodulestatus {
    height: 100%;
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 3px;
}

.daysoftheweekdiv {
    height: 15%;
    border: 2px solid #5cb85c;
    border-radius: 10px;
    padding: 10px;
}

.samplingscheduleradiogroup {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.editscheduloptions_raido {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    border: 4px solid #888;
    margin-top: 0px !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.editscheduloptions_raido_selected {
    background: #5cb85c;
}

.editscheduloptions_raido_unselected {
    background: #c9302c;
}

.raidogrouplabel {
    margin-bottom: 0px;
    font-weight: normal;
}

.timespan {
    color: white;
    background-color: #888;
    border: 2px solid black;
    padding: 6px;
    font-size: 1.4em;
    font-weight: bold;
    float: left;
    text-align: center;
}

.tswidth1 {
    width: 7vw;
    margin-right: 3px;
}

.tswidth2 {
    width: 4vw;
}

.tswidth3 {
    width: 6vw;
    margin-right: 3px;
}

.tswidth4 {
    width: 5vw;
}

.statusvalue {
    font-weight: bold;
    text-align: center;
}

.statussubtitle {
    text-align: center;
    font-size: 0.8em;
}

.schedutypeshowdiv {
    height: 65%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.custom-dropdown-menu {
    min-width: 100px;
    padding-left: 5px;
    font-weight: bold;
}

.fveditli {
    cursor: pointer;
}

.fveditli:hover {
    background-color: #ddd;
}

.alertdiv {
    color: red;
    font-size: 0.8em;
}

.montioringTabS {
    height: 100%;
    width: 80%;
    color: black;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 6px;
}

div.errorUnitDiv1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #7b7b7b;
    opacity: 0.75;
}

div.errorUnitDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.errorUnitDivInner {
    background-color: white;
    /* width: 50vmin; */
    /* height: 20vmin; */
    text-align: center;
    border: 1px solid #666666;
    /* padding: 10px; */
    color: black;
    padding: 2em;
    padding-top: 0.5em;
}

div.maintenanceoneChartContainer {
    width: 100%;
    height: 22%;
    padding-top: 4px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

div.oneChartContainerInner {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    font-weight: bold;
    border: 2px solid #666;
}

.mainoneChartLeftTable {
    width: 100%;
    height: 100%;
}

.mainoneChartLeftTable td {
    vertical-align: middle;
    text-align: center;
}

div.mainoneChartRight {
    width: 76%;
    height: 100%;
    float: left;
    padding: 5px;
}

#flowchart,
#doorchart,
#sstrengthchart {
    width: 100%;
    height: 100%;
}

div.mainoneChartRightRight {
    width: 14%;
    height: 100%;
    float: left;
    border-left: 2px solid #000000;
}

div.configTab {
    height: 100%;
    width: 100%;
    color: black;
    /* background-color: #dddddd; */
    font-size: 1em;
    line-height: 24px;
}

div.configTabContent {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    /* padding-right: 10px; */
    line-height: 24px;
    position: relative;
}

div.configwarningDiv {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #676767;
    opacity: 0.75;
}

div.configwarningDivInner1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;

}

div.configwarningDivInner {
    //
    background-color: white;
    background-color: rgba(255, 255, 255, 1);
    width: 25em;
    /* height: 25vmin; */
    text-align: center;
    border: 1px solid #666666;
    //
    box-shadow: 6px 6px 6px 6px #888888;
    color: black;
}

div.configwarningDivTitle {
    width: 100%;
    height: 4vmin;
    background-color: black;
    color: white;
    font-weight: bold;
    line-height: 4vmin;
}

div.configwarningDivContent {
    width: 100%;
    /* height: 14.5vmin; */
    background-color: white;
    padding: 10px;
}

div.configwarningDivBottom {
    width: 100%;
    height: 6vmin;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.configwarningDivContentLeft {
    width: 20%;
    height: 100%;
    float: left;
}

div.configwarningDivContentRight {
    width: 80%;
    height: 100%;
    float: left;
    text-align: left;
}

div.configTabContentUpper {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

div.configTabContentLower {
    width: 100%;
    /* height: 10%; */
    display: flex;
    justify-content: center;
    /* align-items: center; */
    /* font-size: 3vmin; */
    /* font-weight: bold; */
    color: #fff;
}


div.configTabContentNonConf {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
}

div.configTabButtonsDiv {
    width: 100%;
    height: 10%;
    text-align: center;
}

div.configtableft {
    height: 100%;
    width: 50%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    background: #fff;
}

div.configtabright {
    height: 100%;
    width: 50%;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    border-left: 2px solid #40A2D3;
    background: #fff;
}

div.oneconfigline {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 15%;
    background: #fff;
    /* margin-bottom: 1em; */
}

div.configlineInner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80%;
    width: 90%;
    background: #fff;
}

div.configlineInnerItem {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* width: 50%; */
    /* font-size: 0.6em; */
    line-height: 24px;
    padding-left: 24px;
    font-weight: bold;
}

div.configlineInnerItemRight {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 75%;
}

div.oneconfiglineleft {
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.oneconfiglinecenter {
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.oneconfiglinemiddle {
    width: 5%;
    height: 100%;
    float: left;
    text-align: center;
    color: red;
    font-weight: bold;
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.oneconfiglinesave {
    width: 20%;
    height: 100%;
    float: left;
}

div.oneconfiglineright {
    width: 35%;
    height: 100%;
    float: left;
}

.infoTextContainer {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.oneconfiglineright label {
    padding-right: 4px;
}

.configshortterinput {
    width: 50%;
    float: left;
}

.configshortterbuttons {
    width: 40%;
    float: left;
}

.timeunitbtn {
    color: black;
    background-color: white;
    border-color: #46b8da;
}

.timeunitbtnactive {
    color: white;
    background-color: #46b8da;
    border-color: #46b8da;
}

.configbiggerfontsize {
    font-size: 1.8vmin;
    padding-top: 1%;
}

div.configtabrightupper {
    width: 100%;
    height: 85%;

    font-weight: bold;
    font-size: 2.5vmin;
}

div.configtabrightlower {
    width: 100%;
    height: 15%;
}

div.batterylifediv {
    width: 80%;
    height: 100%;
    border-radius: 10px;
    /* //border: 1px solid #292929; */
    border: 5px double black;
    margin: auto;
    padding-bottom: 6px;
}

div.batterylifedivupper {
    width: 100%;
    height: 70%;
    font-size: 3vmin;
}

div.batterylifedivlower {
    width: 100%;
    height: 30%;
}

div.batterylifedivlowerleft {
    width: 10%;
    height: 100%;
    float: left;
    font-weight: bold;
}

div.batterylifedivlowermiddle {
    width: 80%;
    height: 100%;
    float: left;
}

/*
 * ==========================================================
 * Alarm page styles
 * ==========================================================
 */
div.alarmpage {
    width: 100%;
    height: 89vh;
    color: black;
}

div.alarmaparea {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

div.alarmContent {
    width: 100%;
    height: 95%;
    display: flex;
}

div.alarmContent2 {
    width: 100%;
    height: 100%;
}

div.homeMapAlarm {
    width: 100%;
    height: 100%;
}

div.leftmapdiv {
    width: 75%;
    height: 100%;
    float: left;
}

div.rightalarmdiv {
    width: 25%;
    height: 100%;
    float: left;
    padding-left: 10px;
}

div.rightalarmdivInner {
    width: 100%;
    height: 100%;
    background-color: white;
}

div.alarmTitle {
    width: 100%;
    /* height: 5%; */
    /* position: relative; */
}

div.alarmTitleLabel {
    width: 100%;
    font-weight: bold;
    background-color: #fff;
    text-align: center;
    padding: 4px;
}

div.sortIcon {
    height: 100%;
    width: 3vmin;
    padding: 1px;
    padding-top: 3%;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    color: black;
    text-align: center;
    font-weight: bold;
    border-left: 2px solid #666;
}

div.statusfilterbuttondiv {
    /* width: 100%; */
    /* height: 5%; */
    position: relative;
    margin-left: 4px;
    margin-right: 4px;
}

.titlebutton1 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 4px;
    font-weight: bold;
    box-sizing: border-box;
}

.titlebuttonmaintenance {
    width: 60%;
    height: 60%;
    background-color: #fff;
    padding: 4px;
    font-weight: bold;
    box-sizing: border-box;
}

div.alarmList {
    width: 100%;
    height: 90%;
    padding: 6px;
    overflow: auto;
}

div.onealarmItem {
    width: 100%;
    height: 13vmin;
    padding-top: 3px;
    padding-bottom: 3px;
}

div.onealarmItemInner {
    width: 100%;
    height: 100%;
    border: 2px solid #666;
}

div.onealarmItemLeft {
    width: 5%;
    height: 100%;
    float: left;
}

.clearcolour {
    background-color: green;
}

.targetcriteriacolour {
    background-color: #FFC200;
}

.criticallimitcolour {
    background-color: red;
}

div.onealarmItemRight {
    width: 95%;
    height: 100%;
    float: left;
    font-size: 1.5vmin;
    text-align: center;
    font-weight: bold;
    padding-top: 2%
}

.homemaptable {
    text-align: center;
    width: 100%;
    height: 20px;
    font-size: 1rem;
}

.homemaptdclassleft {
    background-color: #ececec;
    color: black;
}

.infowindow_td {
    background-color: #ececec;
    color: black;
    padding: 2px 0 2px 0;
}

.homemaptdclassright {
    background-color: white;
    color: black;
}

div.historyleftalarmlist {
    width: 30%;
    height: 90.9%;
    float: left;
    overflow: auto;
    background: #fff;
    margin-top: 4.35em;
}

div.historyrightcharts {
    width: 69%;
    height: 100%;
    float: left;
    /* position: relative; */
    padding-right: 6px;
    display: flex;
    flex-direction: column;
}

div.datepickerbutton_maphistory {
    width: 30%;
    /* height: 100%; */
    float: left;
    /* padding-right: 4px; */
    /* padding-top: 4px; */
    /* padding-bottom: 4px; */
}

div.maphistoryrightcharts {
    width: 100%;
    height: 94%;
    padding-top: 0.5em;
    /*
 	padding-left: 10px;
 	padding-right: 10px;
 	background-color: #ececec;*/
    flex-grow: 1;
    overflow-y: auto;
}

div.maphistoryrightchartsInner {
    width: 100%;
    height: 100%;
    overflow: auto;
}

div.maphistoryOneAlarmItemSet {
    width: 100%;
    /* border-bottom: 4px double black; */
    background-color: #fff;
    margin-bottom: 0.5em;
    /* margin-right: 1.5em; */
    display: flex;
    flex-direction: column;
}

div.maphistoryOneAlarmItemSetTitle {
    width: 100%;
    height: 2em;
    text-align: center;
    /*font-size: 2vmin;*/
    padding-top: 1%;
}

div.maphistoryOneAlarmItemOneSite {
    width: 100%;
    height: 20vmin;
    padding-top: 5px;
    /* padding-bottom: 5px; */
    /*background-color: white;*/
    flex-grow: 1;
}

div.maphistoryOneAlarmItemOneSiteInner {
    width: 100%;
    height: 100%;
}

.chartClass {
    width: 100%;
    height: 100%;
}

div.settingsTabdiv {
    width: 100%;
    height: 100%;
    /*background-color: black;*/
    color: white;
    overflow: auto;
    padding-top: 10px;
    font-size: 1.6vmin;
    padding-left: 10px;
    padding-right: 10px;
}

div.settings1titlediv {
    height: 4%;
    width: 100%;
    background-color: white;
    color: black;
    text-align: center;
    padding-top: 6px;
    font-weight: bold;
    padding: 4px;
}

div.settingsfirstpage {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    height: 88%;
}

div.settings1tabeldiv {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-top: 10px;
}

div.setting1footdiv {
    background-color: white;
    width: 100%;
    height: 6%;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

div.settings1tablelable {
    width: 100%;
    height: 5vmin;
    display: inline-flex;
    flex-direction: row;
}

div.settings1tableonerow {
    width: 100%;
    height: 20vmin;
    display: inline-flex;
    flex-direction: row;
}

div.settings1tableonerow_onboard {
    width: 100%;
    height: 10vmin;
    display: inline-flex;
    flex-direction: row;
}


div.settings1table1col {
    width: 15%;
    height: 100%;
    background-color: #266c8e;
    color: white;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 1.8vmin;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

div.settings1table1col1 {
    width: 15%;
    height: 100%;
    /*background-color: #40a2d3;*/
    color: white;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 1.8vmin;
    border-bottom: 2px solid black;
}

div.settings1tableright {
    width: 80%;
    height: 100%;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

div.settings1tablerightInner {
    width: 100%;
    height: 25%;
    line-height: 5vmin;
    white-space: nowrap;
    /* //display: inline-flex; */
    flex-direction: row;
}

div.settings1tablerightInner1 {
    width: 100%;
    height: 100%;
    line-height: 5vmin;
    white-space: nowrap;
    /* //display: inline-flex; */
    flex-direction: row;
}

div.settings1table2col {
    width: 20vmin;
    height: 100%;
    border-right: 2px solid black;
    border-bottom: 2px solid #eee;
    display: inline-block;
    text-align: center;
    background-color: white;
    color: black;
}

div.settings1table2col1 {
    width: 20vmin;
    height: 100%;
    /* //border-right: 2px solid black;
    //border-bottom: 2px solid #eee; */
    display: inline-block;
    text-align: center;
    /* //background-color: white;
    //color: black; */
}

div.settings1tablerightright {
    height: 100%;
    /* //white-space: nowrap; */
    display: inline-flex;
    flex-direction: row;
}

div.settings1tablerightrightInner {
    width: 20vmin;
    height: 100%;
    border-right: 2px solid black;

    text-align: center;
    background-color: white;
    color: black;
    cursor: pointer;
}

div.settings1tablerightrightInner:hover {
    background-color: #b3d7eb;
}

div.settings1tablerightrightInner1 {
    width: 20vmin;
    height: 100%;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    text-align: center;
    background-color: #266c8e;
    color: white;
}

div.settings1measuresline {
    width: 100%;
    height: 25%;
    padding-left: 10px;
    padding-bottom: 10px;
}

div.settings1onemeasurement {
    width: 25%;
    height: 100%;
    float: left;
    padding-right: 10px;
}

div.settings1onemeasurementInner {
    width: 100%;
    height: 100%;
    border: 2px solid white;
}

div.settingsonemeasurementtitle {
    width: 100%;
    height: 18%;
    background-color: white;
    color: black;
    text-align: center;
    font-weight: bold;
    font-size: 1.8vmin;
}

div.settingsonemeasurementcontent {
    width: 100%;
    height: 82%;
    padding-top: 6px;
    padding-bottom: 6px;
}

.settings1onemeasurementlist {
    width: 100%;
    height: 100%;
    list-style: none;
}

.settings1onemeasurementlist li {
    width: 100%;
    height: 25%;
    cursor: pointer;
}

.settings1onemeasurementlist li:hover {
    background-color: #666;
}

div.settingssecondpage {
    width: 100%;
    height: 84%;
    display: none;
}

div.settings2left {
    width: 50%;
    height: 100%;
    float: left;
    padding-right: 5px;
    padding-top: 10px;
}

div.settings2leftInner {
    width: 100%;
    height: 100%;
    font-size: 1.8vmin;
    color: black;
}

div.settings2right {
    width: 50%;
    height: 100%;
    float: left;
    padding-top: 10px;
    padding-left: 5px;
}

div.settings2leftTitle {
    width: 100%;
    height: 6%;
    background-color: #eee;
    text-align: center;
    padding-top: 0.5%;
    font-weight: bold;
}

div.settings2list {
    width: 100%;
    height: 94%;
    background-color: white;
    overflow: auto;
    padding-top: 10px;
}

.settingsequiplist {
    /* //cursor: pointer; */
    list-style-type: none;
}

div.settingsthirdpage {
    width: 100%;
    height: 84%;
    padding-top: 10px;
    padding-bottom: 10px;
    display: none;
    overflow: auto;
}

div.settings3firstrow {
    width: 100%;
    height: 20%;
    padding-bottom: 10px;
}

div.settings3secondrow {
    width: 100%;
    height: 50%;
    padding-bottom: 10px;
}

div.settings3firstrowcol1 {
    width: 33%;
    height: 100%;
    float: left;
    padding-right: 10px;
}

div.settings3firstrowcol2 {
    width: 33%;
    height: 100%;
    float: left;
}

div.settings3firstrowcol1Inner {
    width: 100%;
    height: 100%;
    color: black;
}

div.settings3firstrowcol1Inner1 {
    width: 100%;
    height: 100%;
    overflow: auto;
    color: black;
}

div.settings3coltitle {
    width: 100%;
    height: 30%;
    font-size: 1.8vmin;
    background-color: #eee;
    text-align: center;
    padding-top: 1%;
    font-weight: bold;
}

div.setting3colcontent {
    width: 100%;
    height: 70%;
    background-color: white;
    padding-top: 2%;
}

div.setting3colcontentchk {
    width: 100%;
    height: 70%;
    background-color: white;
    padding-top: 2%;
    padding-left: 10px;
    text-align: center;
}

div.settings3dropdowndiv {
    width: 80%;
    height: 80%;
    position: relative;
    margin: auto;
}

.setting3dropdownbtn {
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: default;
}

.settings3dropdownlist {
    min-width: 80px;
    font-size: inherit;
    padding-left: 4px;
}

.settings3dropdownlist li:hover {
    background-color: #b3d7eb;
}

.settings3parametermeasurementlisttable {
    width: 80%;
    height: 80%;
    margin: auto;
}

.settings3parametermeasurementlisttable td {
    vertical-align: middle;
}

.settings3argumentinput {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0px;
    border: 1px solid #ccc;
}

div.setting3colcontentInner {
    width: 80%;
    height: 80%;
    margin: auto;
}

div.settings3hysteresisconleft {
    width: 70%;
    height: 100%;
    float: left;
    padding-right: 2px;
}

div.settings3hysteresisconright {
    width: 30%;
    height: 100%;
    float: left;
    padding-left: 2px;
    position: relative;
}

.settings3notificationaddress {
    width: 100%;
    height: 100%;
    /* //font-size: 1.8vmin; */
}

.settings3notificationaddress th {
    height: 30%;
    background-color: #eee;
    text-align: center;
    /* //font-weight: bold;
    //font-size: 1.8vmin; */
    padding-top: 1%;
}

.settings3notificationaddress td {
    background-color: white;
    text-align: center;
    font-size: 1.8vmin;
}

.settings3natcol1 {
    width: 46%;
    padding-left: 6px;
}

.settings3natcol2 {
    width: 18%;
    text-align: center;
}

div.settings3lastrow {
    width: 100%;
    height: 20%;
}

div.settings3rowcontentchartcontrolpanel {
    width: 100%;
    height: 20%;
    background-color: #ccc;
    padding-left: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: black;
}

div.datepickerbutton_settingshistory {
    width: 25%;
    height: 100%;
    float: left;
}

div.settings3rowcontentchartContent {
    width: 100%;
    height: 80%;
    background-color: white;
}

#settingshistoryChart {
    height: 100%;
    width: 100%;
}

div.settings3buttonsdivleft {
    width: 40%;
    height: 100%;
    float: left;
    font-size: 3vmin;
    display: inline;
    color: white;
}

.rightbtn {
    float: right;
}

/*
* ==========================================================
* Report page styles
* ==========================================================
*/

div.reportpage {
    width: 100%;
    height: 89vh;
}

div.reportcontrolpanel {
    /* width: 100%; */
    /* height: 5.5vmin; */
    /* padding-left: 10px; */
    /* color: black; */
    /* background-color: #ececec; */
    /* -webkit-box-shadow:0px 3px 3px #343434; */
    -moz-box-shadow: 0px 3px 3px #343434;
    /* box-shadow:0px 3px 3px #343434; */
    /* position:absolute; */
    /* top: 0px; */
    /* left:0px; */
    width: 100%;
    background: #fff;
    float: left;
    padding: 4px;
    flex-grow: 0;
}

div.reportdropdowndiv {
    width: 15%;
    height: 100%;
    float: left;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    position: relative;
}

.dailyprofiletitlebutton {
    /* width: 100%; */
    height: 100%;
    /* background-color: #dddddd; */
    /* padding: 0px; */
    /* font-weight: bold; */
    border: 0;
}

.dailyprofiledropdownmenu {
    right: 0;
    //left: -60px;
    //width: 100px;
    width: 2vw;
    color: black;
}

.dailyprofiledropdownmenu li {
    padding-left: 15px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.dailyprofiledropdownmenu li:hover {
    background-color: #afd8ed;
}

.weekdaygroup {
    px;
    */ padding-bottom: 6px;
    height: 1.8em;
}

.weekdaybutton {
    background-color: #fff;
    padding: 4px;
    height: 100%;
    border-radius: 0;
    border: 1px solid #000;

}

.weekdaybutton:hover {
    background-color: #ccedfd;
}

.weekdaybutton:focus {
    background-color: #fff;
}

.weekdaybutton-active {
    background-color: #afd8ed;
    height: 100%;
    padding: 4px;
    border-radius: 0;
    border: 1px solid #000;
}

.weekdaybutton-active:hover {
    background-color: #ccedfd;
}


.weekdaybutton-active:focus {
    background-color: #ccedfd;
}

div.reportchart {
    width: 100%;
    /* height: 100%; */
    padding-top: 0.5em;
    /* padding-right: 10px; */
    flex-grow: 1;
    display: flex;
}

#dailyprofileschart {
    width: 100%;
    /* height: 100%; */
    /* flex-grow: 1; */
    display: flex;
}

/*
			Settings Page + Sub Pages  START
#############################################################################################################
#############################################################################################################
*/

.settingsView {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #343434;
}

.userChangeContainer {
    height: 85vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.userSettingsContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 70%;
    width: 30%;
    color: #000000;
    background-color: #FFFFFF;
}

.passwordContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30%;
    height: 25%;
    color: #000000;
    background-color: #FFFFFF;
}

.passwordContainerOpAd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 35%;
    color: #000000;
    background-color: #FFFFFF;
}

.formPWD {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.settingsInputRow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 9%;
    width: 90%;
}

.settingsInputRowFull {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 10%; */
    width: 100%;
    font-weight: bold;
    padding: 4px;
}

.pwdRow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16%;
    width: 90%;
}

.pwdRowFull {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 19%; */
    width: 100%;
    font-weight: bold;
    padding: 4px;
}

.pwdBtnPos {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 20;
    width: 90%;
    padding-bottom: 5px;
}

.userBtnPos {
    display: flex;
    justify-content: flex-end;
    ;
    align-items: center;
    height: 10%;
    width: 90%;
}

.boxlabel {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boxinput {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65%;
    height: 100%;
}

.userSetSel {
    height: 90%;
    width: 100%;
}

.userSetInput {
    height: 90%;
    width: 100%;
}

.settingsBtn {
    height: 60%;
    width: 25%;
}

.operatorSettingsContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: #000000;
    padding: 0.5em;
}

.detailChangeContainer {
    height: 100%;
    width: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.detailChangeContainer2 {
    height: 95%;
    width: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.detailedChangeHight {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    background-color: #FFFFFF;
    margin-bottom: 15px;
}

.operatorViewLeftSide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 0.5em;
    height: 100%;
    width: 75%;
}

.operatorViewUserContainer {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

.adminKPIContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 0vh;
    width: 100%;
    background-color: #FFFFFF;
}

.kpiTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10%;
    width: 100%;
}

.kpiRow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45%;
    width: 100%;
}

.kpiInputCont {
    width: 33.333333333%;
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.formclass {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.kpiInputBtn {
    width: 33.333333333%;
    height: 80%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.placeholderkpi {
    width: 5%;
}

.kpiInput {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 33.333333333%;
}

.kpiIn {
    margin-left: 10px;
    margin-right: 10px;
    height: 80%;
    width: 125px;
}

.kpiSelect {
    height: 80%;
    margin-left: 10px;
}

.checkbox {
    height: 20px;
    width: 20px;
}

.operatorpaneltitel {
    /* height: 10%; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding: 4px;
}

.operatorpaneltable {
    overflow-y: auto;
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
}

.usertable {
    /* width: 80%; */
    height: 100%;
}

hr {
    width: 80%;
    border: 1px solid #000000;
}

.newUserContainer {
    border-top: 1px solid #000000;
    height: 3em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.userCreateContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    color: #000000;
    background-color: #FFFFFF;
}

.greyBackground {
    background-color: #e5e5e5;
}

.invalidInput {
    border: 1px solid red;
    height: 90%;
    width: 100%;
}

.error {
    color: red;
}

.isDisabled {
    opacity: 80%;
}

.isDisabled:hover {
    cursor: not-allowed;
}

.userCreateForm {
    height: 65%;
    width: 100%;
    padding-bottom: 0.5em;
}

.deleteBtn {
    height: 25px;
    width: 25px;
}

.deleteBtn:hover {
    cursor: pointer;
}

td img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tdCenter {
    text-align: center;
}

th {
    text-align: center;
}

/* MEDIA QUERIES*/

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}

/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}

/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
    /* insert styles here */
}

/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
    /* insert styles here */
}

/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* insert styles here */
}

/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}

/* (720x1280) Galaxy Nexus, Landscape */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
    /* insert styles here */
}

/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    div.chartsMainControls {
        width: 100%;
        height: 5.5vmin;
        color: black;
        background-color: #ececec;
        position: absolute;
        top: 0px;
        left: 0px;
        overflow-x: hidden;
        padding-left: 5px;
    }

    body {
        font-family: @font-family-base;
        font-size: 1em;
        line-height: 1em;
        color: @text-color;
        background-color: @body-bg;
    }
}

/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* insert styles here */
}

/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* insert styles here */
}

/* (2048x1536) iPad 3 */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
    /* insert styles here */
}

/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}

/* (1366x768) WXGA Display */
@media screen and (max-width: 1366px) {


    .cstm_img_ofl {
        overflow-y: scroll;
    }

    /* insert styles here */
}

/* (1280x1024) SXGA Display */
@media screen and (max-width: 1280px) {
    /* insert styles here */
}

/* (1440x900) WXGA+ Display */
@media screen and (max-width: 1440px) {

    div.chartsStatsColInner {
        width: 100%;
        height: 100%;
        padding-bottom: 2px;
        border: 1px solid #666;
        /* font-size: 0.8em; */
        overflow: auto;
    }

}

div.activedata_alarmlist_history_box {
    width: 31%;
    height: 100%;
    /*90.9%;*/
    float: left;
    overflow: auto;
    background: #fff;
    /*margin-top: 4.35em;*/
}

div.activedata_alarmlist_history_box_row {

    width: 100%;
    /*height: 4em; */
    position: relative;
    display: flex;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
}

div.activedata_alarmlist_history_box_cell_checkbox {
    width: 11%;
    margin: auto;
    text-align: center;
}

div.activedata_alarmlist_history_box_cell_text {
    width: 89%;
    margin: auto;
    text-align: left;
}

div.activedata_status_alarmlist_box {
    width: 100%;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
}

div.activedata_status_alarmlist_box_targetcriteria {
    width: 100%;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
    background-color: #ffa500;
}

div.activedata_status_alarmlist_box_criticallimit {
    width: 100%;
    padding: 8px 3px 8px 0;
    margin: 4px 0 4px 0;
}


div.activedata_status_alarmlist_box_row {
    margin: 0px 5% 0px 5%;
    background-color: white;
}

div.activedata_status_alarmlist_box_row_bold {
    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;

}

div.activedata_status_alarmlist_box_row_bold_targetcriteria {
    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;
    color: #fbbc05;

}

div.activedata_status_alarmlist_box_row_bold_criticallimit {
    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;
    color: #ea4335;

}

div.activedata_status_alarmlist_box_row_bold_clear {
    margin: 0px 5% 0px 5%;
    background-color: white;
    font-weight: bold;
    color: #34a853;

}

.chartInnerContainer {
    width: 100%;
}

.oneItemOneLine {
    width: 100%;
    box-sizing: border-box;
}

.chartAndLegend {
    height: 94%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #fff;
}

.chartsStatsRowLower2 {
    width: 50%;
    float: left;
    text-align: center;
}

div.chartsStatsColInnertc {
    width: 100%;
    padding-bottom: 2px;
    border: 1px solid #666;
    /* font-size: 0.8em; */
    overflow: auto;
    background: #fff;
    border-radius: 0.5em;
}

.charts_m_stats_dropdownbutton {
    background-color: transparent;
    border: none;
    height: 100%;
    padding-top: 0px;
}

.charts_m_ctrl_dropdown_interval {
    height: 100%;
    float: left;
    position: relative;
    height: 1.8em;
}

/*
 * ==========================================================
 * NEW CLASSES
 * ==========================================================
 */

div.datepickerbuttonC {
    float: left;
}

.navButtonsSub {
    /* bottom: 0; */
    /* float: left; */
    /* vertical-align: bottom; */
    position: absolute;
    /* bottom: 0; */
    vertical-align: bottom;
    box-sizing: border-box;
}

div.datepickerbuttonInnerC {
    float: left;
    border: 1px solid #000;
}

div.datepickerbuttonleftC {
    padding: 4px;
    float: left;
    border-right: 1px solid;
    background: #fff;
    height: 27px;
}

div.datepickerbuttonrightC {
    padding: 4px;
    float: left;
    border-left: 1px solid;
    height: 27px;
}

div.datepickerbuttonmiddleC {
    padding: 4px;
    float: left;
    line-height: 18px;
}

#summaryDateRangeC {
    padding: 4px;
    float: left;
}

.summaryControlC {
    background-color: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    float: left;
}

div.intervalContainerC {
    height: 1.8em;
    float: left;
}

.elspace {
    margin-left: 0.25em;
}

.chartsMainControlsC {
    width: 100%;
    background: #fff;
    float: left;
    padding: 4px;
}

div.overviewtitlebarC {
    width: 100%;
    float: left;
    padding: 4px;
    background: #fff;
}

div.intervalbuttondivC {
    float: left;
    height: 1.8em;
    float: left;
}

div.charttitlebuttondivLeftC {
    float: left;
    box-sizing: border-box;
}

div.chartTopButtons {
    float: none;
    /* height: 1.8em; */
}

.btnTopBarC {
    height: 1.9em;
    width: 1.9em;
    background: #266c8e;
    border: 0px;
    float: left;
}

.btnTopBarCOff {
    height: 1.9em;
    width: 1.9em;
    background: #266c8e;
    border: 0px;
    float: left;
}

.btnTopBarC:hover {
    height: 1.9em;
    width: 1.9em;
    background: #0490d0;
    border: 0px;
    float: left;
}

.kpibuttonOff1C {
    float: left;
    line-height: inherit;
    background: #266c8e;
    border-radius: 0px;
}

.reportcontrolpanelC {
    float: left;
    background: #fff;
    padding: 4px;
}

.dailyprofiletitlebuttonC {
    float: left;
    padding: 4px;
}

.reportdropdowndivC {
    float: left;
    height: 1.8em;
    background: #fff;
    border: 1px solid;
}

.maintenancedatepickerbuttonC {
    background: #fff;
    float: left;
    border: 1px solid;
}

.onelabelC {
    width: 100%;
    float: left;
    flex-grow: 0;
    padding: 4px;
}

.maintenanceoneChartContainerC {
    width: 100%;
    height: 33.3333%;
    /* background: #fff; */
    /* border: 1px solid; */
    padding: 4px;
    box-sizing: border-box;
}

.maintenanceoneChartContainerC--small {
    height: 20%;
}

.maintenanceoneChartContainerC--big {
    height: 30%;
}

.mainoneChartLeftC {
    float: left;
    flex-grow: 0;
    width: 8%;
}

.mainoneChartRightC {
    float: left;
    flex-grow: 1;
    width: 82%;
}

.mainoneChartRightRightC {
    float: left;
    /* flex-grow: 0; */
    width: 10%;
}

.oneChartContainerInnerC {
    width: 100%;
    float: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid;
    height: 100%;
}

div.containerTopMaintenance {
    float: left;
    height: 12%;
}

div.containerBotMaintenance {
    float: left;
    /* padding: 4px; */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.topnavbuttons {
    display: flex;
}

.flex-column-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-start {
    padding-left: 1rem;
    align-items: start;
}

.mt-small {
    margin-top: 0.5rem;
}

.mtb-small {
    margin: 0.5rem;
}

.mr-small {
    margin-right: 0.5rem !important;
}

.no_checkbox>i.jstree-checkbox {
    display: none !important;
}


.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #000;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

.absolutePos {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}

.progress-bar {
    background-color: white !important;
    position: relative;
    border-radius: 10px;
    width: 300px;
    height: 35px;
}

.progress-indicator {
    position: absolute;
    border-radius: 10px;
    height: 100%;
    background-color: forestgreen;
}

.progText {
    color: black;
    font-size: 1.3rem;
}

/*
	
	transient.html styles

*/

.trendlinesTrogged {
    background: #d5ecf7;
}

.tpcharts {
    width: 100%;
    height: 48%;
}

div.chartTitleRow {
    height: 10%;
    width: 100%;
    background: #e6e6e6;
    border: 1px solid;
    border-bottom: none;
}

.tpfirstpagechart {
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;
    border: 1px solid;
}


.dailyBar,
.transientP {
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90%;
    border: 1px solid;
    box-sizing: border-box;
}

div.hisbarlegend {
    user-select: none;
    width: 100%;
    height: 10%;
    background-color: #e6e6e6;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    padding-top: 3px;
    padding-bottom: 3px;
    display: flex;
    justify-content: center;
}

div.oneLegendHis {
    width: auto;
    height: 100%;
    padding-left: 5px;
    color: black;
    float: left;
}

div.oneLegendInnerHis {
    width: 100%;
    height: 100%;
    background-color: white;
    justify-content: center;
    flex-direction: row;
    display: flex;
    border: 1px solid #666;
    padding-left: 10px;
}

div.oneLegendLeft1 {
    height: 10%;
    width: 20px;
    margin: auto;
    border-bottom: 4px solid #B0E0E6;
}

div.oneLegendLeft2 {
    height: 10%;
    width: 20px;
    margin: auto;
    border-bottom: 4px solid #4169E1;
}

div.oneLegendLeft3 {
    height: 10%;
    width: 20px;
    margin: auto;
    border-bottom: 4px solid blue;
}

div.oneLegendLeft4 {
    height: 10%;
    width: 20px;
    margin: auto;
    padding-right: 5px;
    border-bottom: 4px solid #00008B;
}

div.oneLegendRight {
    height: 100%;
    width: auto;
    text-align: center;
    font-size: 1rem;
    padding: 0 5px;
}

div.twoLegendHis {
    width: auto;
    height: 100%;
    padding-left: 5px;
    color: black;
    float: left;
}

div.twoLegendInnerHis {
    width: 100%;
    height: 100%;
    background-color: white;
    justify-content: center;
    flex-direction: row;
    display: flex;
    border: 1px solid #666;
    padding-left: 10px;
}

div.twoLegendLeft1 {
    height: 10%;
    width: 20px;
    margin: auto;
    border-bottom: 4px solid red;
}

div.twoLegendLeft2 {
    height: 10%;
    width: 20px;
    margin: auto;
    border-bottom: 4px solid green;
}

div.twoLegendLeft3 {
    height: 10%;
    width: 20px;
    margin: auto;
    border-bottom: 4px solid blue;
}

div.twoLegendRight {
    height: 100%;
    width: auto;
    text-align: center;
    font-size: 1rem;
    padding: 0 7px;
}


.tpchartContainer {
    display: flex;
    height: 100%;
}

div.tpChartContainerInner {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}

div.tptitlebar {
    background-color: #FFFFFF;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    float: left;
    border: 1px solid;
    border-top: none;
    position: relative;
}

div.backicondiv {
    position: absolute;
    top: 0px;
    right: 6px;
    height: 100%;
    width: 2em;
    display: flex;
    align-items: center;
    font-size: 1rem;
}

/*
	settings.html STYLES
*/
.outerContainer {
    background-color: #ffffff;
    height: calc(100% - calc(1em * 3));
    width: 100%;
    position: relative;
    overflow-y: auto;
}

.innerContainer {
    margin: 1em;
    position: absolute;
    display: flex;
    flex-direction: column;
    width: calc(100% - 2em);
}

.dropDownLabels {
    padding: 0px 0.5em;
    color: #FFFFFF;
    background-color: #696969;
}

.status-item {
    display: flex;
    margin: 0.5em;
}

.flex-padding {
    display: flex;
    padding: 0 0.5em;
}

.button-box-padding {}

.status-item-name {
    border: 2px solid #696969;
    padding: 0.5em;
    background-color: #696969;
    color: #ffffff;
}

.status-item-name-special {
    padding: 0.5em;
    color: #ffffff;
}

.status-item-red {
    border: 2px solid #DC4438;
    background-color: #DC4438;
}

.red {
    border: 3px solid #DC4438;
    background-color: #DC4438;
}

.green {
    border: 3px solid #0F9D58;
    background-color: #0F9D58;

}

.status-item-green {
    border: 2px solid #0F9D58;
    background-color: #0F9D58;
}

.status-item-value {
    color: #000;
    border: 2px solid #696969;
    padding: 0.5em;
}

.status-item-value-column {
    display: flex;
    flex-direction: column;
}

.clearBackground {
    background-color: #FFFFFF;
}

.status-item-name-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.status-inner-padding {
    padding-top: 0.7em;
}

.montioringTabF {
    height: 100%;
    width: 100%;
    color: black;
    display: flex;
    flex-direction: column;
    background-color: white;

}

.flushvtable {
    border-collapse: separate;
    border-spacing: 6px;
    text-align: center;
}

.flushvtable td {
    padding: 3px;
    border: 1px solid black;
}

.flushvtablefirstrow {
    width: 100%;
    height: 12.5%;
}

.flushvtablerows {
    width: 100%;
    height: 12%;
}

.fvtdaycell {
    width: 12%;
    background-color: #696969;
    color: white;
}

.fvtschedulecell {
    width: 20%;
    font-size: 0.8em;
}

.fvtstatecell {
    width: 40%;
    font-size: 0.8em;
}

.fvtbuttoncell {
    width: 10%;
}

.extra-padding {
    padding: 0.5em;
}

.relative-div {
    position: relative;
}

.invalid-tooltip {
    font-size: inherit !important;
}

.centered-button {
    display: block;
    margin: 0px auto !important;
    margin-bottom: 10px !important;
}

/*
custom selcted
*/

.custom-select select {
    /* Hide default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0 0.5em;
    border: none;
}

.custom-select select option {
    color: #000000;
    background-color: #FFFFFF;
}

.custom-select {
    position: relative;
    min-width: 450px;
    max-width: 600px;
    border: 2px solid #000000;
}

.custom-select select,
.custom-select::after {
    padding: 0.5em !important;
}

.custom-select::after {
    font-family: "Font Awesome 5 Free";
    content: "\f022";
    /* Reposition */
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 10px;
    height: 100%;
    /* Vertical center text */
}

.right-drop select {
    /* More left padding to make space for arrow */
    padding: 0 0 0 0.5em;
}

.right-drop::after {
    border-left: 2px solid #000000;
    font-family: "Font Awesome 5 Free";
    content: "\f022";
    color: #000000;
    left: auto;
    right: 0;
}


/*
installations.html STYLES
*/

.standart-padding {
    padding: 0.5em;
}

.locations-page {
    position: relative;
    height: 84.2vh;
    width: 100%;
    background-color: #FFF;
}

.locations-content {
    overflow-y: auto;
    padding: 20px;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.locations-install-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.link-style-text {
    text-decoration: underline;
    color: #0000EE;
}

.link-style-text-red {
    color: #dc3545;
    font-weight: bold;
}

.mtb-10 {
    margin: 10px 0px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.link-style-text:hover {
    cursor: pointer;
}

.mr-20 {
    margin-right: 20px;
}

.mr-40 {
    margin-right: 40px;
}

.light-grey-border {
    border-radius: 10px;
    padding: 0.5em;
    border: 2px solid lightgrey;
}

.locations-install-section {
    display: flex;
    flex-direction: column;
}

.locations-install-period-section {
    margin-bottom: 10px;
    margin-left: 20px;
}

.locations-install-product-section {
    margin-left: 20px;
}

.btn-bar {
    display: flex;
}

.btn-installation {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0.4rem 0.5rem;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #696969;
    background-color: #1AA260;
    border: 2px solid #1AA260;
    color: #FFF;
}

.btn-installation-disabled {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0.4rem 0.5rem;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #696969;
    background-color: #e4e4e4;
    border-color: #e4e4e4;
    color: #000;
    opacity: 0.8;
}

.btn-installation-disabled:hover,
.btn-installation-disabled-blue:hover {
    cursor: not-allowed;
}

.btn-installation-blue {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0.4rem 0.5rem;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #696969;
    background-color: #3255A2;
    color: #FFF;
    border: 2px solid #3255A2;
}

.btn-installation-disabled-blue {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 0.4rem 0.5rem;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #696969;
    background-color: #e4e4e4;
    border-color: #e4e4e4;
    color: #000;
    opacity: 0.8;
}

.btn-installation-gray {
    background-color: #6c757d;
    border: 2px solid #6c757d;
}

.installation-search {
    margin: 10px 0px;
    width: 500px;
}

.location-search {
    width: 500px;
}

.installation-product-list {
    display: flex;
    flex-direction: column;
    height: 300px;
    width: 500px;
    border: 1px solid #dadada;
    overflow-y: auto;
}

.installation-product-list-item {
    margin: 5px;
    padding-left: 15px;
}

.installation-product-list-item:hover {
    cursor: pointer;
}

.item-selected {
    background-color: #1aa260;
}

.sensor-input {
    border: 1px solid #e6e6e6;
    margin-left: 20px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.split-map {
    display: flex;
}

.conflictColorGreen {
    color: #1aa260;
}

.conflictColorRed {
    color: #dc3545;
}

.conflixtExistingColor {
    color: #273be2;
}

.conflixtNewColor {
    color: #df73ff;
}

.date-range-chart {
    height: 250px;
    width: 100%;
}

.conflict-header {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.toast {
    position: absolute !important;
    font-size: 1.6rem;
}

.conflict-description {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 2rem;
}

.normal-view {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
}

.conflict-overlay {
    padding: 20px;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
}

.overlay {
    border-radius: 10px;
    border: 3px solid #000;
    background-color: #f7f7f7;
    opacity: 1;
    color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translateX(-50%);
    min-height: 5vh;
    min-width: 30vw;
}

.utc-timezone-font {
    font-size: 1.4rem;
}

.error-msg {
    color: #fff;
    background-color: rgba(220, 53, 69, 0.9);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

.location-selection {
    margin-left: 20px;
    margin-right: 20px;
    min-height: 850px;
    width: calc(50% - 40px);
}

.map-box-small {
    border: 1px solid #000;
    width: 100%;
    height: 430px;
}

.map-box-large {
    border: 1px solid #000;
    width: 100%;
    height: 850px;
}

.location-form {
    min-height: 850px;
    margin-left: 20px;
    margin-right: 20px;
    width: calc(50% - 40px);
}

.location-details {
    min-height: 850px;
    margin-left: 20px;
}

.sensor-field {
    margin: 5px 15px;
}

.myRow {
    display: flex;
    align-items: center;
}

.radio-flex {
    font-size: 1.8rem;
    display: flex;
    justify-content: start;
}

.day-item {
    padding: 0.6em;
    font-weight: bold;
}

.form-label {
    margin-right: 10px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.form-input {
    padding: 5px;
    font-size: 1.6rem;
}

.form-input-text {
    width: 400px;
}

.form-input-text-short {
    width: 380px;
}

.auto-w {
    width: auto !important;
}

.sensor-input-title {
    background-color: #e6e6e6;
}

.m10 {
    margin: 5px 15px !important;
}

.flex-row-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

label {
    margin-bottom: 0px !important;
}

.table-outer {
    overflow-y: auto;
    width: 100%;
    max-height: 350px;
}

.tblLocationRow {
    cursor: pointer;
    user-select: none;
}

.tblLocationRowSelected {
    color: #FFFFFF;
    background-color: #1aa260;
}

.location-selected {
    color: #FFFFFF;
    background-color: #1aa260;
}

table.data-table {
    font-size: 1.6rem;
    height: 100%;
    width: 100%;
}

table.data-table tbody,
tr {
    height: 35px;
    border-left: 0;
    border-right: 0;
}

table.data-table td {
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border-bottom: solid 1px #D9D9D9;
    border-top: solid 1px #D9D9D9;
}

table.data-table th {
    height: 30px;
    border-bottom: solid 2px #D9D9D9;
    font-weight: bold;
    color: #000000;
    text-align: center;
    vertical-align: middle;
}

table.data-table th {
    background-color: #D9D9D9;
    position: sticky;
    top: 0;
}

input[type=number].form-control.is-valid {
    padding-right: 5px !important;
    background-position: center right calc(1.575em + 0.1875rem) !important;
}

input[type=number].form-control.is-invalid {
    padding-right: 5px !important;
    background-position: center right calc(1.575em + 0.1875rem) !important;
}

.status-select {
    max-width: 300px;
}

fieldset.location-border {
    border: 1px groove #ddd !important;
    padding-top: 15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 5px !important;
    -webkit-box-shadow: 0px 0px 0px 0px #000;
    box-shadow: 0px 0px 0px 0px #000;
}

legend.location-border {
    float: none;
    font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px;
    border-bottom: none;
}

.box-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    align-items: center;
}

.filter-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.filter-item {
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid red;
    width: 30%;
}


/* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */
.combobox {
    /* Border slightly darker than Chrome's <select>, slightly lighter than FireFox's */
    border: 1px solid #999;
    border-radius: 5px;
    padding-right: 1.25em;
    /* leave room for ▾ */
}

.dropdown,
.combobox {
    /* "relative" and "inline-block" (or just "block") are needed
       here so that "absolute" works correctly in children */
    position: relative;
    display: inline-block;
}

.combobox>.downarrow,
.dropdown>.downarrow {
    /* ▾ Outside normal flow, relative to container */
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1.25em;

    cursor: default;
    nav-index: -1;
    /* nonfunctional in most browsers */

    border-width: 0px;
    /* disable by default */
    border-style: inherit;
    /* copy parent border */
    border-color: inherit;
    /* copy parent border */
}

/* Add a divider before the ▾ down arrow in non-dropdown comboboxes */
.combobox:not(.dropdown)>.downarrow {
    border-left-width: 1px;
}

/* Auto-down-arrow if one is not provided */
.downarrow:empty::before {
    content: '▾';
}

.downarrow::before,
.downarrow>*:only-child {
    text-align: center;

    /* vertical centering trick */
    position: relative;
    top: 50%;
    display: block;
    /* transform requires block/inline-block */
    transform: translateY(-50%);
}

.combobox>input {
    border: 0
}

.dropdown>*:last-child,
.combobox>*:last-child {
    /* Using `display:block` here has two desirable effects:
       (1) Accessibility: it lets input widgets in the dropdown to
           be selected with the tab key when the dropdown is closed. 
       (2) It lets the opacity transition work.
       But it also makes the contents visible, which is undesirable 
       before the list drops down. To compensate, use `opacity: 0`
       and disable mouse pointer events. Another side effect is that
       the user can select and copy the contents of the hidden list,
       but don't worry, the selected content is invisible. */
    display: block;
    opacity: 0;
    pointer-events: none;

    transition: 0.4s;
    /* fade out */
    position: absolute;
    left: 0;
    top: 100%;
    border: 1px solid #888;
    background-color: #fff;
    box-shadow: 1px 2px 4px 1px #666;
    box-shadow: 1px 2px 4px 1px #4448;
    z-index: 9999;
    min-width: 100%;
    box-sizing: border-box;
}

/* List of situations in which to show the dropdown list.
     - Focus dropdown or non-last child of it => show last-child
     - Focus .downarrow of combobox => show last-child
     - Stay open for focus in last child, unless .less-sticky
     - .sticky last child stays open on hover
     - .less-sticky stays open on hover, ignores focus in last-child */
.dropdown:focus>*:last-child,
.dropdown>*:focus~*:last-child,
.combobox>.downarrow:focus~*:last-child,
.combobox>.sticky:last-child:hover,
.dropdown>.sticky:last-child:hover,
.combobox>.less-sticky:last-child:hover,
.dropdown>.less-sticky:last-child:hover,
.combobox>*:last-child:focus:not(.less-sticky),
.dropdown>*:last-child:focus:not(.less-sticky) {
    display: block;
    opacity: 1;
    transition: 0.15s;
    pointer-events: auto;
}

/* focus-within not supported by Edge/IE. Unsupported selectors cause 
     the entire block to be ignored, so we must repeat all styles for 
     focus-within separately. */
.combobox>*:last-child:focus-within:not(.less-sticky),
.dropdown>*:last-child:focus-within:not(.less-sticky) {
    display: block;
    opacity: 1;
    transition: 0.15s;
    pointer-events: auto;
}

/* detect Edge/IE and behave if though less-sticky is on for all
     dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
    .dropdown>*:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .dropdown>*:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

.dropdown:not(.sticky)>*:not(:last-child):focus,
.downarrow:focus,
.dropdown:focus {
    pointer-events: none;
    /* Causes second click to close */
}

.downarrow:focus {
    outline: 2px solid #8BF;
    /* Edge/IE can't do outline transparency */
    outline: 2px solid #48F8;
}

/* ------------------------------------------ */
/* ----- Optional extra styling for combobox / dropdown */
/* ------------------------------------------ */
*,
*:before,
*:after {
    /* See https://css-tricks.com/international-box-sizing-awareness-day/ */
    box-sizing: border-box;
}

.combobox>*:first-child {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    /* so 100% includes border & padding */
}

/* `.combobox:focus-within { outline:...}` doesn't work properly 
     in Firefox because the focus box is expanded to include the 
     (possibly hidden) drop list. As a workaround, put focus box on 
     the focused child. It is barely-visible so that it doesn't look
     TOO ugly if the child isn't the same size as the parent. It
     may be uglier if the first child is not styled as width:100% 
  .combobox > *:not(:last-child):focus {
    outline: 2px solid #48F8;
  }*/
.combobox {
    margin: 5px;
}

/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */
input {
    font: inherit;
    padding: 3px;
}

.formrow {
    display: flex;
    align-items: center;
}

.formrow>span:first-child,
.formrow>label>span:first-child {
    display: inline-block;
    width: calc(4em + 8%);
}

.combobox .color {
    width: 60px;
    height: 40px;
    display: inline-block;
}

.color:hover {
    outline: 2px solid #888;
    /* Edge/IE can't do outline transparency */
    outline: 3px solid #4448;
}

.colorlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.cb-item {
    display: block;
    margin: 0px;
    padding: 2px;
    color: #000;
}

.cb-item:hover,
.cb-item:hover>a:visited {
    color: #fff;
    background-color: #88f;
}

/* ------------------------------------------ */
/* ----- Collapsable Documentation            */
/* ------------------------------------------ */
.collapsable>input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.collapsable>input[type=checkbox]~* {
    max-height: 1000em;
    transition: 0.6s cubic-bezier(1, 0, 1, 0);
    overflow: hidden;
}

.collapsable>input[type=checkbox]:not(:checked)~* {
    max-height: 0;
    transition: 0.6s cubic-bezier(0, 1, 0, 1);
}

.collapsable label>span {
    text-decoration: underline dotted gray;
}


.invalid-combox {
    border: 1px solid #dc3545;
}

.invalid-combox:focus {
    border-color: 1px solid#dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}


/* Customize the label (the container) */
.checkbox-container {
    position: relative;
    padding-left: 25px;
    padding-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}

.checkbox-text {
    position: relative;
    top: 7px;
    padding-left: 12px;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* On mouse-over, add a grey background color */
/* .checkbox-container:hover input ~ .checkmark {
    background-color: rgb(192, 192, 192);
  } */

/* Create a custom checkbox */
/* .checkmark {
		
		position: absolute;
		top: 0;
		left: 0;
		height: 30px;
		width: 30px;
	} */


/* Create the checkmark/indicator (hidden when not checked) */
/* .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  } */

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 5px;
    top: -5px;
    width: 15px;
    height: 25px;
    border: solid rgb(80, 80, 80);
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* Create a custom checkbox */
.checkmark2 {
    border: 4px solid #6c757d;
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked~.checkmark2:after {
    display: block;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input~.checkmark2 {
    background-color: rgb(192, 192, 192);
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark2:after {
    left: 5px;
    top: -5px;
    width: 15px;
    height: 25px;
    border: solid #0F9D58;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* (1680x1050) WSXGA+ Display */
@media screen and (max-width: 1680px) {
    /* insert styles here */
}

@media screen and (min-width: 1600px) {
    body {
        font-size: 1.7rem;
    }

    .overviewfoldbuttonOn {
        font-size: 1.7rem;
    }

    .overviewfoldbuttonOff {
        font-size: 1.7rem;
    }

    div.datepickerbuttonrightC {
        padding: 0px 4px;
    }

    div.datepickerbuttonleftC {
        padding: 0px 4px;
    }

    .highcharts-series-group text {
        font-size: 1.7rem !important;
    }

    .daterangepicker .ranges li {
        font-size: 17px;
        padding: 8px 8px;
        cursor: pointer;
        line-height: 30px;
    }

    .utc-timezone-font {
        font-size: 1.6rem;
    }

    .jstree-default .jstree-node {
        min-height: 24px;
        line-height: 31px;
    }

    .btnReset {

        height: 31px;
    }

    .page-list button {
        font-size: 1.7rem;
    }

    .highcharts-axis-labels text {
        font-size: 1.5rem !important;
    }
}

/* (1920x1080) Full HD Display */
@media screen and (min-width: 1920px) {
    body {
        font-size: 1.7rem;
    }

    .utc-timezone-font {
        font-size: 1.6rem;
    }

    .jstree-default .jstree-node {
        min-height: 24px;
        line-height: 31px;
    }
}

/* (1600x900) HD+ Display */
@media screen and (max-width: 1600px) {}

/* (2560 x 1440)HD */
@media only screen and (min-width: 2560px) {

    body {
        font-size: 1.7rem;
    }

    .utc-timezone-font {
        font-size: 1.6rem;
    }

    .jstree-default .jstree-node {
        min-height: 24px;
        line-height: 31px;
    }

}

@media screen and (max-width:990px) {
    .flx_bx_main {
        display: block;
    }

    .data_tp_thumb {
        display: none;
    }

    .chart_bx {
        max-width: 100%;
    }

    .img_slider_dt {
        max-width: 100%;
    }

    .grid_btn button {

        font-size: 11px;
        padding: 11px 4px;

    }

    .btnTopBarOff {
        padding: 14.5px 5px;
        /*    font-size:12px;*/
    }

    .btnTopBar {
        /*  font-size:12px;*/
        padding: 14.5px 5px;
    }

    .btnReset {
        /*	font-size: 11px;*/
        padding: 11px 4px;
    }
}


@media screen and (max-width:1250px) {
    .data_tp_thumb {
        display: none;
    }
}

/* @media screen and (min-width:1080px){
	.btnTopBarOff {
   
    margin-left: 60px;
}
/* .btnTopBar{

    font-size: 10px;
}
.btnReset{
 font-size: 10px;	
}*/
/*button.btnTopBarOff.blackbg{
	background-color: black;
	color: white;
}

*/

/* ------------------------------------------ */
/* ----- Loader Documentation            */
/* ------------------------------------------ */

.se-pre-con {
    position: fixed;
    margin: auto;
    right: 0;
    bottom: 0;
    left: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    z-index: 99999;

}

.cssload-container {
    position: relative;
}

.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #3255a2;
    border-left-color: #ffffff;
    border-radius: 1124px;
    -o-border-radius: 1124px;
    -ms-border-radius: 1124px;
    -webkit-border-radius: 1124px;
    -moz-border-radius: 1124px;
}

.cssload-whirlpool {
    margin: -28px 0 0 -28px;
    height: 56px;
    width: 56px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
    content: "";
    margin: -26px 0 0 -26px;
    height: 50px;
    width: 50px;
    animation: cssload-rotate 1150ms linear infinite;
    -o-animation: cssload-rotate 1150ms linear infinite;
    -ms-animation: cssload-rotate 1150ms linear infinite;
    -webkit-animation: cssload-rotate 1150ms linear infinite;
    -moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
    content: "";
    margin: -33px 0 0 -33px;
    height: 63px;
    width: 63px;
    animation: cssload-rotate 2300ms linear infinite;
    -o-animation: cssload-rotate 2300ms linear infinite;
    -ms-animation: cssload-rotate 2300ms linear infinite;
    -webkit-animation: cssload-rotate 2300ms linear infinite;
    -moz-animation: cssload-rotate 2300ms linear infinite;
}


@keyframes cssload-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-rotate {
    100% {
        -o-transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-rotate {
    100% {
        -ms-transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}

/**** Background *****/
.bg-overlay {
    position: fixed;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgb(255 255 255 / 60%);
}

.filter-label input {
    /* opacity: 0; */
    visibility: visible;
    cursor: pointer;
    /* position: absolute; */
    left: 0;
}

.filter-label input {
    visibility: visible;
    cursor: pointer;
    left: 0;
}

.filter-label {
    font-weight: 600;
    /* font-size: 14px; */
    line-height: 140%;
    text-transform: uppercase;
    color: #707070;
    display: block;
}

.elegent-menu {
    width: 3%;

    position: absolute;
    /* float: right; */
    background-color: white;
    padding: 4px;
}

.wrap_prop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 75px;
}

div.week_days {
    position: absolute;
    left: 0px;
    top: 37px;

}

@media screen and (max-width: 1370px) {


    .flexBoxCenter {
        overflow-y: scroll;
    }

    .loginFooter .flexBoxCenter {
        overflow-y: unset;
    }

    /* insert styles here */
}

/* ak 24-03 */
.withtree.map-50,
.withtree.map-50.map-100 {
    width: calc(100% - 500px);
    position: relative;
    transition: all 0.3s ease-in;
}

.withtree.map-100 {
    width: 100%;
    position: relative;
    transition: all 0.3s ease-in;
}

.legend-button {
    position: absolute;
    top: 8px;
    left: 13px;
    color: #ffffff;
    z-index: 9;
    min-height: 45px;
    width: 98px;
    display: flex;
    padding: 5px;
    align-items: center;
}

/* 04-09-2023 changes */
.tracnt-tab-legend-button {
    position: absolute;
    top: 50px;
    right: 305px;
    color: #ffffff;
    margin-right: 10px;
    z-index: 9;
    min-height: 45px;
    right: 0;
    width: 98px;
    display: flex;
    padding: 5px;
    align-items: center;
}

.btn-group-vertica {
    top: 0;
    position: relative;
    height: 100%;

}

.map_block_middle {
    overflow: hidden;
    padding-bottom: 29px;
    position: relative;
}

/* 04-09-2023 changes end */

.view-style {
    position: absolute;
    top: 8px;
    right: 8px;
    color: blue;
    z-index: 9;
    min-height: 45px;
    background: grey;
    width: 300px;
    display: flex;
    padding: 5px;
    align-items: center;
}

.view-style select {
    width: 200px;
    height: 35px;
}

.cale-ico {
    width: 50px;
    text-align: center;
}

.cale-ico img {
    max-width: 35px;
    width: 100%;
    height: 30px;
    object-fit: contain
}

.withtree.map-100.map-50+.side-det {
    width: 700px;
    display: block;
}

.green {
    color: green;
}

.side-det {
    width: 0%;
    background: #fff;
    height: 84.2vh;
    float: right;
    padding: 0.5em;
    overflow-y: scroll;
    transition: all 0.3s ease-in;
    display: none;
}

table.elem {
    border: 1.5px solid #000;
    width: 98.5%;
}

table.elem th,
table.elem td {
    border: 1px solid #171818;
    padding: 5px 15px 5px 15px;
    max-width: 152px;
    word-wrap: break-word;
}

table.elem td {
    /*color: #474747;*/
}

/* ak 27-03 */
/*play video popup */
.homepage.ng-scope .trigger {
    text-align: center;
    padding: 7px 13px;
    background: #3e3e3e;
    color: #fff;
    font-size: 1em;
    outline: none;
    border: none;
    border-radius: 5px;
    font-family: cursive;
}

.homepage.ng-scope .modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.homepage.ng-scope .modal-content {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, 0%);
    background-color: #FFF2DD !important;
    padding: 0;
    overflow: hidden;
    min-height: 300px;
}

.homepage.ng-scope .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}


.homepage.ng-scope .show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.homepage.ng-scope .popup-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    gap: 10px;
    padding: 15px 20px;
    padding-top: 35px;
}

.homepage.ng-scope button.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 30px;

}

.homepage.ng-scope button.close-button span {
    color: #fff;
}

.homepage.ng-scope button.remove-button {
    color: #000;
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 30px;
}

.homepage.ng-scope #popupModalCenter .modal-dialog {
    max-width: 600px;
}

.homepage.ng-scope #popupModalCenter form {
    width: 100%;
    border: none;
}

.homepage.ng-scope #popupModalCenter form input {
    width: 100%;
    border-radius: 10;
    text-align: right;
    margin-bottom: 0px;
    padding: 0px 5px;
}

.homepage.ng-scope #popupModalCenter form .btn--flex input:hover {
    color: #fff;
}

.homepage.ng-scope #popupModalCenter .modal-content {
    background-color: #3255A2 !important;
    /* color: #fff; */
}

.homepage.ng-scope #popupModalCenter h2 {
    font-size: 32px;
    color: #fdfdfd;
}


/* 29-03-2023 shuaib */
.tdAngleDistanceAlarmTriggeredColor {
    background-color: #ff00009e;
    /*red color*/
    color: #ffffff;
    /*white color*/
}

.tdAllClear {
    background-color: #00ff00a6;
    /*green color*/
}

.btn--flex {
    display: flex;
    gap: 20px;
    padding-top: 10px;
}

#popupModalCenter form .btn--flex input {
    padding: 10px;
}

#popupModalCenter form .btn--flex input:hover {
    background: #333;
    color: #fff;
}

#popupModalCenter form input:disabled {
    background: rgb(225 228 236 / 85%);
}

.alarmColor {
    background-color: #ff0000a1;
    /*red color*/
}

.alertColor {
    background-color: #ffb836e8;
}


.changeMouse {
    cursor: pointer;
}

.reset_btn {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.min-440,
.chartmdl .modal-body.min-440 {
    min-height: 440px;
    height: auto;
}

.min-440,
.chartmdl .modal-body.min-440 {
    min-height: 440px;
    height: auto;
}


.changeMouse {
    cursor: pointer;
}

.reset_btn {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.updated-btn-wrp {
    display: inline;
    width: 19px;
    margin: 5px;
}

.min-440,
.chartmdl .modal-body.min-440 {
    min-height: 440px;
    height: auto;
}

.min-440,
.chartmdl .modal-body.min-440 {
    min-height: 440px;
    height: auto;
}

.chkbx-wrp {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.chkbx-wrp input#enableDistanceAlarm {
    margin-bottom: -5px !important;
    margin-right: 5px;
}

.chkbx-wrp #enableDistanceAlarm {
    max-width: 20px;
    height: 20px;
    background: #fff;
}

.chkbx-wrp input#enableDistanceAlarm.checked-me {
    background-image: url(https://cdn-icons-png.flaticon.com/512/33/33281.png);
    background-size: 20px;
}

form#userFrm {
    display: flex;
    gap: 15px;
    max-width: 50vw;
    width: 100%;
    margin: 0 auto;
    padding: 15px 10px;
    flex-wrap: wrap;
}

form#userFrm .user-frm-wrp {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

form#userFrm input.submit__btn,
input.cancel__btn {
    max-width: 100px;
    width: 100px;
    display: inline-block;
    background: #3255A2;
    border: 1px solid #182f0f;
    color: #fff;
    border-radius: 3px;
    height: 46px;
}

input.cancel__btn {
    background: #625d5d;
    border: 1px solid #454242;
}

form#userFrm .user-frm-wrp input {
    height: 50px;
    padding: 10px 15px;
}

.side-det::-webkit-scrollbar {
    width: 20px;
}

.side-det::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 0px;
}

.side-det::-webkit-scrollbar-thumb {
    background: #3255a2;
    border-radius: 0px;
}

.side-det::-webkit-scrollbar-thumb:hover {
    background: #3255a2;
}

.outer-block-3.last_block_3 {
    height: calc(100% - 477px);
}

.alert_changed ul {
    max-height: calc(100vh - 685px) !important;
    min-height: 67px;
}

.sp-mng {
    position: relative;
}

.sp-mng h5 {
    position: absolute;
    top: 15px;
    left: calc(100% - 70px);
}

.tooltipvalue {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltipvalue .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -22px;
    left: -185%;
}

.tooltipvalue:hover .tooltiptext {
    visibility: visible;
}

@media(max-width: 1750px) {
    .sp-mng h5 {
        position: absolute;
        top: 15px;
        left: unset;
        right: 10px;
    }
}

.outer-block-3 .distance p {
    border-bottom: none;
}

.alert_changed ul li {
    border-top: 1px solid #ffffff !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.alert_changed ul .distance {
    border-color: inherit !important;
    border: none;
    margin-bottom: 1px;
    padding-bottom: 0;
    margin-top: 1.4px;
}

.alert_changed ul .distance.danger {
    border-left: 15px solid red !important;
}

.alert_changed ul .distance.warn {
    border-left: 15px solid orange !important;
}

.alert_changed ul .distance.ok {
    border-left: 15px solid green !important;
}

/* 05-07 btn update */
.w-100 {
    max-width: 100%;
    width: 10%;
}

.test_btn {
    margin-left: auto;
    max-width: 100px;
    width: 100px;
    display: inline-block;
    background: #3255A2;
    border: 1px solid #182f0f;
    color: #fff;
    border-radius: 3px;
    height: 46px;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

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

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

/* CSS styles for the modal container */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CSS styles for the modal content */
.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
}

/* Additional styles to center the modal */
/* .modal {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  
  .mhole{
    background-color: #000;
  } */

.mhole-mobile {
    max-width: 100%;
    width: 100%;
    margin: 0% auto;
    padding: 22px 0px;
    position: relative;
    background-color: #fff;
}

.mhole-mobile h4 {
    font-size: 1em;
    text-align: center;
    padding-bottom: 0px;
}

.mhole-mobile .mhole-image {
    width: 100%;
}

.mhole-mobile .mhole-image img {
    display: block;
    margin: 0 auto;
}

.mhole-mobile .mhole-content {
    position: absolute;
    top: 52px;
    right: 17%;
    z-index: 1;
    width: 100%;
    padding: 0 55px 0 30px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.mhole-mobile .mhole-content .mhole-alert {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 84px;
    position: relative;
    margin-bottom: 61px;
}

.mhole-mobile .mhole-content .mhole-alert:nth-last-of-type(1) {
    margin-bottom: 0px;
}

.mhole-mobile .mhole-content .mhole-alert::before {
    position: absolute;
    content: "";
    border: 1.7px solid red;
    width: 89px;
    left: 40%;
}

.mhole-mobile .mhole-content .mhole-alert label,
.mhole-mobile .mhole-content .mhole-alert input,
.mhole-mobile .mhole-content .mhole-alert button {
    border: 3px solid orange;
    padding: 1px;
    background: #fff;
    z-index: 1;
}

.mhole-mobile .mhole-content .mhole-alert input {
    outline: none;
    max-width: 90px;
    position: relative;
}

.mhole-mobile .mhole-content .mhole-alert .cross-btn {
    position: absolute;
    top: -15px;
    right: -8px;
    border: none;
    outline: none;
    background: none;
    z-index: 1;
    font-size: 18px;
}

.mhole-mobile .mhole-content .traingles {
    position: absolute !important;
    top: 115px;
}

.mhole-mobile .mhole-content .squares {
    position: absolute;
    top: 225px;
}

.mhole-mobile .mhole-content .circles {
    position: absolute;
    top: 332px;
    /* width: 250px; */
}

.mhole-mobile .mhole-content .boundaryTwo {
    position: absolute;
    top: 440px;
}

.mhole-mobile .mhole-content .traingles label,
.mhole-mobile .mhole-content .squares label,
.mhole-mobile .mhole-content .circles label,
.mhole-mobile .mhole-content .traingles input,
.mhole-mobile .mhole-content .squares input,
.mhole-mobile .mhole-content .circles input {
    border: 3px solid orange;
}


.mhole-mobile .mhole-content .traingles::after,
.mhole-mobile .mhole-content .squares::after,
.mhole-mobile .mhole-content .circles::after {
    position: absolute;
    margin: 20% 22.5% 0% 0%;
    content: "";
    background: url(../../img/triangle.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.mhole-mobile .mhole-content .squares::after {
    background: url(../../img/square.svg);
    background-repeat: no-repeat;
}

.mhole-mobile .mhole-content .circles::after {
    background: url(../../img/circle.svg);
    background-repeat: no-repeat;
}

.mhole-mobile .mhole-content .mhole-text {
    max-width: 215px;
    width: 100%;
    display: flex;
    justify-content: end;
}

.mhole-mobile .mhole-content .mhole-text p {
    background: #fff;
    z-index: 1;
    margin-left: 138px;
}

.mhole-mobile .mhole-content .mhole-text p::before {
    position: absolute;
    content: "";
    border: 1px solid red;
    width: 20%;
    top: 28px;
    margin-left: -110px;
}

.mhole-mobile .alert-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    gap: 15px;
}

.mhole-mobile .alert-input input {
    max-width: 35px;
    width: 100%;
    border: 2px solid orange;
    /* border-radius: 4px; */
    text-align: center;
    padding: 5px 0;
}

.mhole-mobile .alert-input p {
    margin-bottom: 0px;
    padding: 4px 12px;
    border: 2px solid orange;
    margin-left: 2px;
}


.mhole-mobile .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    /* flex-direction: column; */
    gap: 10px;
}

.mhole-mobile .save-btn {
    outline: none;
    border: 1px solid #000;
    background: rgb(91 180 91);
    color: #fff;
    font-size: 1em;
    border-radius: 6px;
    padding: 3px 47px !important;
    text-align: center !important;
}

.mhole-mobile .cancel-btn {
    outline: none;
    border: none;
    background: #b40505;
    color: #fff;
    font-size: 1em;
    border-radius: 6px;
    padding: 3px 47px !important;
    text-align: center !important;
}

.mhole-mobile .edit-btn {
    color: white;
    position: absolute;
    top: 28px;
    border: 1px solid white;
    border-radius: 9px;
    background: blue;
    padding: 3px;
    font-size: 1em;
    right: 15px;
    left: unset;
    text-decoration: none;
    z-index: 9999999;
}

.error-msg {
    color: #f9cb00;
    font-size: 12px;
}

/* 08 update */
#homeMap .homemaptable {
    background: #fff;
    /* font-size: 12px; */
    padding: 0 5px;
    color: #000;
}

#homeMap table.homemaptable tbody {
    background: #fff;
    /* font-size: 12px; */
    padding: 0 5px;
    color: #000;
}

#homeMap table.homemaptable tbody tr {
    background: #ececec;
}

table.homemaptable td {
    padding: 0 15px;
}

table.homemaptable .bottom-cl td:first-child {
    width: 70%;
    padding: 0;
}

table.homemaptable .bottom-cl td:last-child {
    width: 30%;
    padding: 0;
}

.bottom-cl td label {
    background: #3255a2;
    color: #fff;
    text-align: left;
    padding: 5px 10px;
    width: calc(100% - 15px);
    margin-left: 15px;
}

.bottom-cl td .ng-binding {
    background: #fff;
    color: #000;
    text-align: left;
    padding: 5px 10px;
    width: calc(100% - 25px);
    margin-right: 15px;
    font-weight: bold;
}


.mhole-mobile .buttons {
    padding: 0 55px;
}

.alartNo {
    display: none;
}

.boundaryOne {
    width: 62% !important;
}

.boundaryTwo {
    width: 52% !important;
}

.mhole-mobile .mhole-content .mhole-alert.boundaryOne label,
.mhole-mobile .mhole-content .mhole-alert.boundaryTwo label {
    border: 3px solid red;
}

.mhole-mobile .mhole-content .mhole-alert.boundaryOne input#fullValue,
.mhole-mobile .mhole-content .mhole-alert.boundaryTwo input#emptyValue {
    border: 3px solid red;
    border-radius: 0;
}

.mhole-mobile .alert-input button.addbtn {
    background: orange;
    border-radius: 5px;
    border: none;
    color: #fff;
    padding: 10px 15px;
    max-width: 150px;
    width: 100%;
    margin-top: 15px;
    border: 3px solid transparent;
    font-weight: bold;
    margin-left: 20px;
    font-size: 20px;
}

.mhole-mobile .alert-input button.delbtn {
    background: red;
    border-radius: 5px;
    border: none;
    color: #fff;
    padding: 10px 15px;
    max-width: 150px;
    width: 100%;
    margin-top: 15px;
    border: 3px solid transparent;
    font-weight: bold;
    margin-right: 20px;
    font-size: 20px;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    /* padding-top: 100px; */
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */

div#myModal2 {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 400px;
    width: 300px;
    background: white;
    margin: auto;
    right: 0;
    bottom: 0;
    border: 1.5px solid orange;
    border-radius: 10px 10px 30px 30px;
    box-shadow: 3rem 3rem 10rem 10rem rgba(0, 0, 0, .175);
    overflow: hidden;
    display: none;
}

.sec-head {
    padding: 20px 10px;
    background: orange;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.sec-head h3 {
    font-size: 25px;
    font-weight: 600;
}

.modal2-content-wrp label {
    font-size: 22px;
    font-weight: 600;
}

.modal2-content-wrp input {
    padding: 10px;
    margin-bottom: 15px;
}

.modal2-content-wrp {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 15px;
    margin-top: 20px;
}

.modal-submit {
    background: rgb(91 180 91);
    color: #fff;
    font-size: 20px;
    border-radius: 6px;
    padding: 4px 30px;
    border: 3px solid #2f782f;
}

.modal-close {
    background: #b40505;
    color: #fff;
    font-size: 20px;
    border-radius: 6px;
    padding: 4px 22px;
    border: 3px solid #970d0d;
}

.mhole-mobile .mhole-content .mhole-alert label {
    position: relative !important;
}

.mhole-mobile .mhole-content .mhole-alert label:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
}

/* .alertLight INPUT, .mhole-mobile .mhole-content .mhole-alert label:after, .alertLight .classmm, .alertLight .mhole-mobile .mhole-content .mhole-alert::before, .alertLight .mhole-mobile .mhole-content .squares::after {
    opacity: 0.5;
} */
.alertLight {
    opacity: 0.5;
}


#confirmBox {
    display: none;
    background-color: #eee;
    border-radius: 14px;
    border: 1px solid #aaa;
    position: fixed;
    width: 430px;
    left: 897px;
    top: 40%;
    margin-left: -82px;
    padding: 50px 26px 49px;
    box-sizing: border-box;
    text-align: center;
    z-index: 99999;
}

#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 12px;
    border: 0px solid #aaa;
    padding: 20px;
    text-align: center;
    width: 150px;
    cursor: pointer;
}

#confirmBox .button:hover {
    background-color: #ddd;
}

#confirmBox .message {
    text-align: center;
    margin-bottom: 8px;
}

.alert-show {
    color: red;
    position: absolute;
    top: 60px !important;
    right: -4.5rem !important;
    letter-spacing: -1px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 163px !important;
    justify-content: flex-start !important;
}

.disTrigger {
    position: absolute;
    top: 31px !important;
}

.mhole-alert .classmm {
    position: absolute;
    top: 5px !important;
    right: -2rem !important;
}

.mhole-alert .alt-status {
    position: absolute;
    top: 31px !important;
    right: 14rem !important;
    color: red;
}

.disabledprop {
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* 30-08-2023 */
.tablewrapper {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
}

.tablewrapper h2 {
    text-align: center;
}

.openbtn {
    color: white;
    border: none;
    margin-left: auto;
    font-size: 1em;
    border-radius: 5px;
    padding: 8px 22px;
    background-color: #008000;
    display: block;
}

.tablewrapper table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
}

/* Zebra striping */
.tablewrapper tr {
    background: #efe6e7;
}

.tablewrapper th {
    background: #3155a1;
    color: white;
    font-weight: bold;
}

.tablewrapper td,
.tablewrapper th {
    padding: 10px;
    border: 1px solid #000;
    text-align: center;
    font-size: 18px;
    width: 110px;
    /* font-weight: bold; */
    height: 50px;
}

.tablewrapper .edit {
    background-color: blue;
    border: 1px solid blue;
}

.tablewrapper .delete {
    background-color: red;
    border: 1px solid red;
}

.tablewrapper .fa {
    font-size: 24px !important;
    padding: 4px 2px;
    color: white;
}


/* POP UP CSS */

.tablewrapper .form-popup {
    border: 8px solid #3155a1;
    border-top: 30px solid #3155a1;
    z-index: 9;
    display: none;
    position: fixed;
    padding: 10px;
    left: 0;
    top: 10px;
    background: #FFF;
    right: 0;
    margin: 0 auto;
    max-width: 400px;
}

.tablewrapper .form-container {
    width: 300px;
    padding: 20px;
    background: #fff;
    display: block;
    margin: 0 auto;
    position: relative;
}

button.test {
    position: absolute;
    right: 0;
}

.tablewrapper .form-conatianer input[type=text],
.tablewrapper input[type=password] {

    padding: 12px;
    margin: 5px 0 25px;
}

.tablewrapper .close {
    right: -32px;
    top: -42px;
    position: absolute;
    border-radius: 50%;
    color: #fff;
    font-size: 25px;
    font-weight: 600;
    cursor: pointer;
}

button {
    cursor: pointer;
}

.tablewrapper input {
    max-width: 100%;
    width: 100%;
    padding: 10px 5px;
}

.tablewrapper textarea {
    margin-top: 5px
}

.tablewrapper label {
    display: block;
    margin-bottom: 6px;
}

.tablewrapper .elemDiv {
    margin: 15px 0;
}

.tablewrapper .intl-tel-input,
.tablewrapper .iti {
    width: 100%;
}

.tablewrapper .radio {
    display: flex;
    gap: 30px;
}

.tablewrapper #mobilecode {
    padding-left: 0;
}

.tablewrapper .form-row {
    display: grid;
    grid-template-columns: 140px 1fr;
}

.tablewrapper .update {
    padding: 5px 12px;
    background-color: #008000;
    color: #FFF;
    border: none;
    border-radius: 5px;
}

.tablewrapper .test {
    background-color: #3155a1;
    border-radius: 5px;
    color: #fff;
}

.tablewrapper .reset {
    padding: 5px 12px;
    background-color: #FF0000;
    color: #FFF;
    border: none;
    border-radius: 5px;
}

/* 09-04-2023 changes */

.tablewrapper {
    padding-top: 20px;
}

/* .tablewrapper h2 {
    display: inline-block;
    margin-left: 425px;
} */
.openbtn {
    color: white;
    border: none;
    margin-left: auto;
    font-size: 1em;
    border-radius: 5px;
    padding: 8px 22px;
    margin-left: 410px;
    background-color: #008000;
    display: inline-block;
}

.tablewrapper table {
    max-width: 1300px;
    width: 100%;
    border-collapse: collapse;
    margin: 20px;
}

.tablewrapper {
    position: relative;
    margin-top: 100px;
    max-width: 1350px;
    border: 3px solid black;
}


.openbtn {
    position: absolute;
    top: 20px;
    right: 25px;
    display: block;
}

/* 09-04-2023 changes end*/


.btn-group-vertical {
    width: 100%;
}

.btn-group-vertical button.btn.btn-primary {
    display: flex;
    background: #d6d6d6;
    padding: 0;
    ;
    border-color: #000;
    align-items: center;
    width: 100%;
}

.icoBg {
    padding: 5px 7px;
    min-width: 35px;
    max-width: fit-content;
    position: relative;
    text-align: left;
    min-height: 30px;
    color: #000;
    font-weight: 600;
    /* font-size: 9px; */
}

.icoBg img {
    height: 20px;
}

.btn-group-vertical button.btn.btn-primary .icoBg:nth-child(2):after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 0.5px;
    background: #000;
}


.icoBg-tracnet {
    padding: 5px 4px;
    min-width: 55px;
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #000;
    line-height: 12px;
    font-weight: 600;
    /* font-size: 9px; */
    margin: 0 auto;
    min-height: 34px;
}

.btn-group-vertical button.btn.btn-primary .icoBg-tracnet:nth-child(2):after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 0.5px;
    background: #000;
}

.btn-group-vertical button.btn.btn-primary .icoBg-tracnet:nth-child(2) {
    min-width: 32px;
}

/* 04-09-2023 */
.mhole-mobile .mhole-image {
    width: 100%;
    margin-top: 20px;
}

.mhole-mobile .mhole-content {
    position: absolute;
    top: 67px;
    right: 17%;
    z-index: 1;
    padding-top: 20px;
    /* margin-top: 20px; */
    width: 100%;
    padding: 0 55px 0 30px;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.mhole .mhole-mobile span {
    font-size: 12px;
    line-height: 16px;
    display: flex;
    margin: 0px auto;
    justify-content: center;
}

.mhole-mobile .mhole-content .mhole-alert:nth-last-of-type(1) {
    margin-bottom: 0px;
    margin-top: 100px !important;
}

.mhole-mobile .mhole-content .circles {
    position: absolute;
    top: 332px;
    /* width: 250px; */
    margin-top: 80px;
}

.mhole-mobile .mhole-content .squares {
    position: absolute;
    top: 225px;
    margin-top: 50px;
}

.mhole-mobile .mhole-content .traingles {
    position: absolute !important;
    top: 115px;
    margin-top: 20px;
}

.mhole-mobile .mhole-image img {
    display: block;
    object-fit: cover;
    height: 570px;
    margin: 0 auto;
    width: 60px;
}

/* 04-09-2023 */

.tablewrapper .test {
    background-color: #3155a1;
    border-radius: 5px;
    color: #fff;
    border: 0;
    padding: 11px 12px;
}

.tablewrapper .iti {
    width: 100%;
    max-width: 215px;
}

.chart-btn-wrp {
    max-width: 140px;
    width: 100%;
    margin-left: auto;
    display: flex;
    gap: 2px;
}

.chart-btn-wrp button {
    background: #3255a2;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 2px 10px 5px;
}

.elemDiv .test-div {
    display: flex;
}

.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
    display: none;
}

.chart-btn-wrp button {
    background: #3255a2;
    color: #fff;
    border: 0;
    font-size: 13px;
    border-radius: 3px;
    padding: 2px 10px 5px;
}

.elemDiv .test-div {
    display: flex;
}

.chart #relativedistance div#highcharts-nc9z3os-12.highcharts-container {
    height: 215px !important;
}

/* .last_block_third .ul_li {
    height: 47%;
} */

.outer-block-4 {
    margin-top: -4px !important;
}



/* ------------------------------------ */





.withtree .homemaparea .infoBox b {
    font-size: 1em;
    float: left;
    font-weight: 400;
    padding-left: 5px;
    font-style: normal;
    line-height: normal;
    font-family: "Roboto", sans-serif;
}

.withtree .homemaparea .infoBox .homemaptable {
    font-size: 1em;
    font-weight: 400;
    text-align: left;
    font-style: normal;
    line-height: normal;
    font-family: "Roboto", sans-serif;
}

.withtree .homemaparea .infoBox .homemaptable tr {
    height: 25px;
}

.withtree .homemaparea .infoBox .homemaptable tr td {
    padding-left: 8px;
    width: 60%;
    padding-bottom: 8px;
}

.homemaptable2 .infotabel td {
    padding-bottom: 8px;
}

.withtree .homemaparea .infoBox .homemaptable tr td:nth-child(2) {
    background-color: #fff;
}

a.jstree-anchor {
    font-size: 1em;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    font-family: "Roboto", sans-serif;
}

.intervalContainerC.elspace {
    height: unset;
}

/* .intervalContainerC .summaryInterval {
          padding: 3px 0;
        } */

/* .titlebutton {
          padding: 3px 0 3.5px;
        } */

.treeInnerLower {
    height: 45%;
    border-bottom: 0px solid #343536;
}

.oneChartLeftTable td {
    text-align: left;
    padding-left: 12px;
}

/* .intervalbuttondivC.elspace .titlebutton {
          padding: 3px 0 3.2px;
        } */

.dropdownbuttonRegion {
    border: 1px solid;
    margin-bottom: 1px;
    outline-color: inherit;
}

select.charts_m_stats_dropdownbutton {
    border: 1px solid;
}

/* .timeComaprsionTab .dropdownbuttonRegion{
            border: unset;
            margin-bottom:unset;
        } */

div.charts_m_stats_row_cell_measurement {
    width: 85%;
}

.timeComaprsionTab div.charts_m_stats_row_cell_measurement,
.timeComaprsionTab .charts_m_stats_row_cell_unit {
    width: 50%;
}

div.charts_m_stats_row_cell_unit_column:nth-child(2) {
    width: 50%;
    margin-left: 0;
    /* margin-right: 40px; */
}

.timeComaprsionTab div.charts_m_stats_row_cell_unit_column:nth-child(2) {
    width: 100%;
    margin-left: unset;
    margin-right: unset;
}

body .datapickerLabel table tr {
    height: unset;
}

.settings3secondrow table.settings3notificationaddress tr:first-child {
    height: 10px;
}

.settings3secondrow table.settings3notificationaddress tr:first-child>th {
    height: unset;
    width: 100%;
    padding-bottom: 5px;
}

.infoBox b {
    float: left;
    font-size: 1em;
    font-weight: 400;
    padding-left: 5px;
    font-style: normal;
    line-height: normal;
    font-family: "Roboto", sans-serif;
}

.infoBox .homemaptable2 {
    font-size: 1em;
    font-weight: 400;
    text-align: left;
    font-style: normal;
    line-height: normal;
    font-family: "Roboto", sans-serif;
}

.infoBox .homemaptable2 tr {
    height: 25px;
}

.infoBox .homemaptable2 tr td {
    padding-left: 8px;
}

.navMenuButton span {
    font-family: "Roboto", sans-serif;
    font-size: 1em;
    font-weight: 700;
}

.withtree1 {
    font-family: "Roboto", sans-serif;
}

main.ng-scope {
    font-family: "Roboto", sans-serif;
}

.flexBoxCenter {
    font-size: 1em;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

.chartsMainControlsC .datapickerLabel tr td {
    font-size: 1em;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

.newUserContainer .btn-primary {
    font-size: 1em;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
}

.overviewChartContainerInner .btn,
.setting1footdiv .btn {
    font-size: 1em;
    font-style: normal;
    line-height: normal;
}

.settings1tabeldiv .ng-binding,
.settings1tabeldiv .ng-scope {
    font-size: 1em;
    font-style: normal;
}

/* 15-12-23 */

.modal .modal-body {
    height: 100%;
}

.modal .modal-body .userCreateContainer {
    row-gap: 10px;
}

.modal .modal-header .close {
    order: 1;
}

.modal .modal-header .modal-title {
    order: -1;
}

.download-control-container {
    justify-content: center;
    gap: 12px;
}


.summaryContainer button.formMarginBottom {
    padding: 6px 12px;
    outline: none;
    border: 1px solid;
    font-size: 1em;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: 2px 4px 4px #ccc;
}

.overviewequiplabel.ng-binding {
    padding-top: 0;
}

.statTitleSpan span.tooltipspan {
    visibility: hidden;
    width: fit-content;
    background-color: #f3f3f3;
    color: inherit;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute;
    z-index: 1;
    top: -32px;
    left: -10px;
}

.statTitleSpan:hover span.tooltipspan {
    visibility: visible;
}

.summaryChart {
    overflow: auto;
}

.chartContainerSevenToNine {
    margin-bottom: 12px;
}

.homepage.ng-scope {
    display: flex;
}

.homepage.ng-scope .meterTree.noprint {
    width: fit-content;
    padding-right: 24px;
    background-color: #fff;
}

.homepage.ng-scope .withtree {
    width: 100%;
}

/* 19-12-23 */

.summaryLayerLow .summaryChartContainer {
    width: 100%;
}

.alarmpage .meterTree.noprint {
    width: fit-content;
}

.alarmpage .meterTree.noprint .treeInner {
    padding-right: 24px;
}

.alarmpage .withtree {
    width: 100%;
}

#download-Btn {
    padding: 4px 12px;
    outline: none;
    border: 1px solid #000;
    font-size: 1em;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: 2px 4px 4px #ccc;
    color: #000;
    height: 28px;
}

.clear-activedata {
    padding: 6px 12px;
    outline: none;
    border: 1px solid;
    font-size: 1em;
    font-weight: 400;
    font-family: "Roboto", sans-serif;
    margin-left: 10px;
    margin-top: 10px;
    box-shadow: 2px 4px 4px #ccc;
}

.download-disabled {
    background-color: #000;
    cursor: not-allowed !important;
    height: 28px !important;
}

.download-disabled:hover {
    background-color: #ccc;
    color: #000;
}

.alarmpage .withtree {
    width: 100%;
}

/* 21-12-23 */

.summaryChartContainer .summaryInfo {
    height: calc(100% - 9vh);
}

svg text {
    font-family: "Roboto", sans-serif;
}

.titlebutton:focus,
.titlebutton:hover {
    background-color: unset;
}

div.charts_m_stats_row_cell_wider {
    width: 32%;
}

div.charts_m_stats_row {
    justify-content: center;
}

select.charts_m_stats_dropdownbutton {
    width: 100%;
}

.summaryControl2 {
    padding-top: 14px;
    padding-left: 0;
}

.summaryControl2 .navButtonsSub {
    position: unset;
}

.userCreateForm .boxlabel {
    justify-content: start;
}

div.charts_m_stats_row_cell_unit {
    width: 85%;
}

/* Modal styles (you may want to customize this) */
#popupModal {
    display: none;
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    z-index: 1000;
    width: 40%;
    height: 30%;
    text-align: center;
    border-radius: 15px;
}

#popupModal,
p {
    /* margin: 80px 0 10px; */
    /* font-size: 30px; */
}

#popupModal #countdown {
    margin-top: 80px;
}

/* 26-12-2023  me */

.modal-content {
    font-family: "Roboto", sans-serif;
    font-size: 1em;
}

.modal-header {
    background-color: #f5f5f5;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.modal-body {
    padding: 15px;
}

.modal-footer {
    border-top: 1px solid #e5e5e5;
    padding: 10px;
}

input.userSetInput,
select.userSetSel {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid;
    border-radius: 4px;
    box-sizing: border-box;
}

input.userSetInput.ng-invalid,
select.userSetSel.ng-invalid {
    border: 1px solid red;
}

.error {
    color: red;
    font-size: 1em;
    margin-top: 5px;
}

.btn-primary {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* 28-12-23 */

.treeInnerLowerStack>div:first-child,
.treeInnerLower>div:first-child {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 119;
}

div.charts_m_stats_row_cell_title .title-span {
    padding-left: 0;
}

div.charts_m_stats_row_cell_title .title-span div.numberdiv {
    margin-left: 0;
}

/* div.charts_m_stats_row_cell_unit_column {
    text-align: left;
} */

.custome-form {
    height: 100%;
}

.custome-form .settings3firstrowcol1 {
    width: 33%;
}

.settings3firstrow+.settings3secondrow table.settings3notificationaddress tr:first-child {
    height: 100%;
}

.settingsTabdiv .settings3notificationaddress {
    height: unset;
}

.settingsTabdiv .settings3notificationaddress tr:nth-child(2) {
    padding-top: 8.25px;
}

div#checkboxContainer .settings3firstrowcol1 {
    width: 45%;
}

.btn-primary {
    background-color: #3255a2;
}

div.alarmpage {
    height: 84vh;
}

.downloadpage div.datepickerbuttonInnerC {
    height: 28px;
}

.btn {
    font-size: 1em;
}

/* 10-1-24 */

.treeInnerLower .mt-small>.flexBoxCenter {
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 10px;
}

.treeInnerLower .mt-small>.flexBoxCenter>span {
    font-size: 1em;
    line-height: 28px;
    font-weight: 600;
}

.treeInnerLower .mt-small>.flexBoxCenter .flex-wrap {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: nowrap !important;
}

.summaryTreeContainer .mainTreeMeters {
    background-color: #fff;
}

footer {
    position: fixed;
    bottom: 0;
}

@media screen and (min-width: 1920px) {
    .mainMain {
        min-height: 89.2vh;
    }

    .mainTemplate {
        min-height: 89.2vh;
    }

    .navMenuButton span,
    .navButtonsSub button.navMenuButton {
        font-size: 1em;
    }

    .modal.in .modal-dialog {
        transform: translate(0, 15%);
    }
}

div.homepage {
    min-height: calc(95vh - 73px) !important;
}

.kioskContainer,
.summaryContainer,
div.overviewpage,
div.historypage,
div.alarmpage,
.locations-page,
.downloadpage {
    height: calc(95vh - 73px) !important;
}

.kioskChartsLeftUpperChart svg .highcharts-label.highcharts-no-data text,
.kioskChartsLeftLowerChartItem svg .highcharts-label.highcharts-no-data text,
.chartsArea svg .highcharts-label.highcharts-no-data text,
.highcharts-container svg .highcharts-label.highcharts-no-data text,
.highcharts-container svg .highcharts-axis.highcharts-xaxis text {
    font-size: 1em !important;
    font-weight: 400 !important;
}

.kioskChartsRightTitle {
    font-size: 1em;
}

.overviewpage.ng-scope .withtree {
    padding-top: 0;
}

.legend-button {
    width: 180px;
}

.tracnt-tab-legend-button {
    width: 180px;
}

.legend-button .icoBg>span,
.tracnt-tab-legend-button .icoBg-tracnet>span {
    font-size: 1em;
    font-weight: 500;
}

.tracnt-tab-legend-button .icoBg-tracnet:nth-child(1) {
    text-align: left;
    padding: 7px 7px;
}

.tracnt-tab-legend-button .icoBg-tracnet:nth-child(2) {
    max-width: 30px !important;
    width: 30px !important;
}

.tracnt-tab-legend-button .icoBg-tracnet>img {
    width: 20px !important;
    height: 20px;
}

.main-block .block-1 .ng-binding,
.main-block h5,
.main-block h3,
.main-block p,
.main-block svg text,
.main-block .gmnoprint button,
.main-block #homeMapZoom,
.main-block #homeMapReset,
.main-block .block-3 .openhis,
.main-block .block-3 .history_block span,
.tracknet-map .gm-style-iw h2,
.tracknet-map .infoWindowContent,
.block-3 .chart-btn-wrp button,
.tablewrapper h2,
.tablewrapper button,
.tablewrapper table tr th,
.tablewrapper table tr td,
#homeMap .infoBox b,
#homeMap .infoBox table.homemaptable tr td,
#homeMap .infoBox table.homemaptable tr td div>p,
#homeMap .infoBox table.homemaptable tr.bottom-cl td,
.chartsArea .highcharts-container svg text {
    font-size: 1em !important;
    font-family: "Roboto", sans-serif !important;
}

#homeMap .infoBox table.homemaptable tr td div>p {
    padding: 10px !important;
}

#homeMap .infoBox table.homemaptable tr td div>img {
    height: 30px;
    width: 30px;
    /* margin-left: 75px; */
}

#homeMap .infoBox table.homemaptable tr td div>p {
    margin-left: 30px !important;
    width: 60% !important;
}

#homeMap .infoBox {
    width: 400px !important;
}

#homeMap .infoBox b,
#homeMap .infoBox table.homemaptable tr td,
#homeMap .infoBox table.homemaptable tr td div>p,
#homeMap .infoBox table.homemaptable tr.bottom-cl td {
    text-align: center;
}

#homeMap .infoBox table.homemaptable tr td {
    padding-bottom: 15px;
}

#homeMap .infoBox table.homemaptable tr.bottom-cl td {
    padding-bottom: 10px;
}

#homeMap .infoBox b {
    float: unset;
}

#homeMap .infoBox table.homemaptable tr td,
#homeMap .infoBox table.homemaptable tr td div>p,
#homeMap .infoBox table.homemaptable tr.bottom-cl td {
    background-color: #ececec;
}

.mhole-mobile .mhole-content .mhole-alert.boundaryOne {
    margin-top: 10px !important;
}

.mhole-text p {
    font-size: 1em !important;
}

.block-1 .ts-c,
.block-3 .ts-c {
    overflow-y: auto;
}

.block-2 .datepickerbuttonInnerC {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.block-2 .pointerIcon {
    display: flex;
    align-items: center;
}

@media screen and (min-width: 2000px) and (max-width: 2400px) {
    .last_block_third .btn_clps+.ul_li {
        height: 50%;
    }
}

@media screen and (max-width: 1500px) {
    .outer-block-4 {
        margin-top: 20px !important;
    }

    /* .last_block_third .btn_clps+.ul_li {
        height: 50%;
    } */
}

@media screen and (min-width: 1600px) {
    .outer-block-4 {
        margin-top: 20px !important;
    }
}

.outer-block-4 p {
    margin-bottom: 15px !important;
}


@media screen and (min-width: 1920px) {
    body {
        font-size: 1.1em !important;
    }

    .mhole-mobile .mhole-content .mhole-alert::before {
        left: 43%;
    }

    .mhole-mobile .mhole-content .mhole-alert.boundaryOne::before,
    .mhole-mobile .mhole-content .mhole-alert.boundaryTwo::before {
        left: 40%;
    }

    .legend-button .btn,
    .tracnt-tab-legend-button .btn{
        font-size: unset !important;
    }

    .tracnt-tab-legend-button {
        width: 200px;
    }

    .legend-button {
        width: 200px;
    }
}

@media screen and (min-width: 2560px) {
    body {
        font-size: 1.2em !important;
    }
}

.gm-style-iw .gm-ui-hover-effect {
    top: -6px !important;
    right: -6px !important;
    outline: none !important;
}


.box-block-21 .morebtn_block p {
    text-align: center;
}

.side-det table.elem tr td {
    max-width: 100%;
}

.gm-style {
    font: unset !important;
}

.gm-style .gm-style-iw {
    font-size: unset !important;
}

.infoBox>img {
    width: 20px;
    height: 20px;
}

.gm-style-iw.gm-style-iw-c button[title="Close"]>span {
    width: 20px !important;
    height: 20px !important;
}

.gm-style-iw.gm-style-iw-c button[title="Close"] {
    right: 15px !important;
    top: 10px !important;
}

#homeMap .gm-style-iw.gm-style-iw-c button[title="Close"] {
    right: 0px !important;
    top: 0px !important;
}

.tablewrapper h2 {
    font-weight: 700;
}

.unicClass {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-bottom: 10px;
}

.unicClass>p {
    padding: 0px !important;
    height: auto !important;
    text-align: center !important;
    width: unset !important;
}

#homeMap table.homemaptable tbody tr:first-child td {
    padding-top: 15px !important;
}

.gm-style-iw.gm-style-iw-c {
    padding: 0px !important;
}

.gm-style-iw-d>div {
    padding: 20px;
}

table.homemaptable tr td {
    font-weight: 400;
}

table.homemaptable tr.bottom-cl td {
    padding-bottom: 10px !important;
}

.alert_changed,
.highcharts-root {
    font-size: unset !important;
}

.tracnet-modal .modal-header {
    padding: 0 !important;
    border-bottom: unset !important;
    background-color: unset !important;
}

@media screen and (min-width: 1300px) and (max-width: 1599px) {
    body {
        font-size: 0.8em !important;
    }

    .legend-button .icoBg>span,
    .tracnt-tab-legend-button .icoBg-tracnet>span {
        font-size: 0.8em;
    }

    #homeMap .infoBox b
    {
        font-size: 1em !important;
    }

    .unicClass>p {
        font-size: 1em !important;
    }

    #homeMap table.homemaptable tbody tr:first-child td {
        padding-top: 10px !important;
    }

    #homeMap .infoBox table.homemaptable tr td {
        padding-bottom: 10px;
    }

    #homeMap .gm-style-iw.gm-style-iw-c button[title="Close"] {
        top: -9px !important;
    }

    .gm-style-iw.gm-style-iw-c button[title="Close"] {
        top: 5px !important;
    }

    .gm-style-iw-d>div {
        padding: 15px;
    }


    /* .gm-style-iw-d>div b{
        font-size: 0.8em;
    }
     */

    /* #homeMap .gm-style-iw-d>div b {
        font-size: 0.8em;
    } */

    .kioskContainer,
    .summaryContainer,
    div.overviewpage,
    div.historypage,
    div.alarmpage,
    .locations-page,
    .downloadpage {
        height: calc(95vh - 83px) !important;
    }

    div.homepage {
        height: calc(95vh - 83px) !important;
        min-height: 100% !important;
    }

    .loginFooter {
        font-size: 0.9em;
    }

    .footerCol0 {
        width: 55%;
    }

    .history_block {
        margin-bottom: 0 !important;
    }

    #homeMap .infoBox {
        left: -150px !important;
    }

    .mhole-mobile .mhole-content .mhole-alert::before {
        width: 85px;
        left: 36%;
    }

    .mhole-mobile .mhole-content .mhole-alert.boundaryOne::before,
    .mhole-mobile .mhole-content .mhole-alert.boundaryTwo::before {
        width: 98px;
    }

    .mhole-mobile .mhole-content .mhole-alert:nth-last-of-type(1) {
        margin-top: 97px !important;
    }

    .mhole-mobile .mhole-content .mhole-text p::before {
        top: 15px;
    }

    .mhole-alert .alt-status {
        right: 13rem !important;
    }

    .block-1,
    .block-3 {
        max-width: 20% !important;
        /* width: 100% !important; */
    }

    .block-1 .ul_li,
    .block-3 .ul_li {
        padding: 5px !important;
    }

    #homeMap .gm-style-iw.gm-style-iw-c button[title="Close"] {
        top: -4px !important;
    }

    .block-3 {
        margin-right: 0 !important;
    }

    #homeMap .infoBox {
        width: 320px !important;
    }

    .icoBg-tracnet{
        min-height: 24px;
    }

    .gm-style-iw-d .homemaptable{
        font-size:unset;
    }
}

.alert_changed li {
    font-size: unset !important;
}

.gmnoprint .gm-style-mtc ul li {
    font-size: unset !important;
}

.gm-style-iw-d .homemaptable tbody tr {
    height: 25px !important;
}

@media screen and (min-width: 1800px) {
    .homepage.ng-scope .modal-content {
        top: 20px;
    }
}

.sydneyWt_logo {
    max-width: 170px;
}

.meterTracLogo {
    height: 80%;
}

.gm-style-iw-d .unicClass div img {
    max-width: 30px;
    width: 100%;
}

.tablewrapper .elemDiv:not(:first-child) {
    margin-top: 0;
}

.tablewrapper #settingForm .elemDiv:not(:first-child) {
    margin-top: 15px;
}

.gm-style-iw-d td.infowindow_td {
    padding-bottom: 15px !important;
}

.gm-style-iw-d .homemaptable tr:first-child td {
    padding-bottom: 15px !important;
}

.gm-style-iw-d .unicClass {
    margin-top: 10px !important;
}


button.reset_btn {
    padding: 6px 11px !important;
}

#errorname,
#errorn {
    right: 17px !important;
}

.loginInner {
    padding: 1.5rem !important;
}

div:where(.swal2-container) h2:where(.swal2-title),
div:where(.swal2-container) .swal2-html-container,
div:where(.swal2-container) div:where(.swal2-popup){
    font-size: 1em !important;
}

.tracnet-modal#myModal .modal-body {
    padding: 0;
    padding-top: 10px;
}

.tracnet-modal#myModal .modal-body h3{
    font-size:1em !important;
}

#settingForm .elemDiv span.text-danger{
    display: block;
}

.block-1.block-xpnd .ts-c, .block-3.block-xpnd-2 .ts-c{
    overflow-y: unset;
}