/* Datanow - App */


/* Fonts */
@font-face {
    font-family: 'Neutrif Studio';
    src: url('../../fonts/NeutrifStudio-Bold.woff2') format('woff2'), url('../../fonts/NeutrifStudio-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neutrif Studio';
    src: url('../../fonts/NeutrifStudio-Regular.woff2') format('woff2'), url('../../fonts/NeutrifStudio-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neutrif Studio';
    src: url('../../fonts/NeutrifStudio-Medium.woff2') format('woff2'), url('../../fonts/NeutrifStudio-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neutrif Studio';
    src: url('../../fonts/NeutrifStudio-SemiBold.woff2') format('woff2'), url('../../fonts/NeutrifStudio-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neutrif Studio';
    src: url('../../fonts/NeutrifStudio-ExtraBold.woff2') format('woff2'), url('../../fonts/NeutrifStudio-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}



/* General / global */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0px;
    padding: 0;
    font-size: 14px;
}

html {
    background: #f2f2fa;
    font-family: 'Neutrif Studio', sans-serif;
}

body {
    margin: 0;
    overflow-x: hidden;
    min-width: 1024px;
}

a {
    color: #008dff;
    text-decoration: none;
    cursor: pointer;
}

    a:hover {
        text-decoration: none;
    }

iframe {
    width: 100%;
}

.grow {
    flex-grow: 1;
    display: block;
}

.center {
    text-align: center;
}

.lockup {
    display: flex;
    align-items: center;
}

    .lockup p {
        margin: 0;
    }

.space-between {
    justify-content: space-between;
}

img {
    max-width: 100%
}

hr {
    border: 0;
    border-top: 1px solid #e8e8f6;
    margin: 40px 0px;
}

/* Typography */
h1, h2, h3, h4, h5 {
    color: #013765;
    margin-bottom: 0.4em;
    line-height: 1.4em;
}

    h2 a, h3 a {
        text-decoration: none;
        color: #013765;
    }

.dark h2 a, .dark h3 a {
    color: white;
}

h2 a:hover, h3 a:hover {
    text-decoration: none;
}

h1 {
    font-weight: 400;
    font-size: 2em;
    margin: 0 0 0.4em;
    line-height: 1.2em;
}

h2 {
    font-weight: 700;
    font-size: 26px;
}

h3 {
    font-weight: 400;
    font-size: 1.68em;
}

    h3:first-child {
        margin-top: 0px;
    }

h4 {
    font-weight: 400;
    font-size: 1.2em;
}

h5 {
}

p, li {
    line-height: 1.66em;
    color: #747895;
}

ol li {
    margin-bottom: 0.6em;
    padding-left: 10px;
}


/* Tables */
table {
    border-collapse: collapse !important;
    margin: 26px 0px;
    width: 100% !important;
}

    table tr {
    }

    table th,
    table td {
        padding: 7px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding-right: 15px;
    }

    table tr:last-child td {
        border-bottom: 0px;
    }

    table th {
        text-align: left;
        color: #4a5568;
        white-space: nowrap;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    table td {
        color: #747895;
        white-space: nowrap;
    }

    table.outline {
        border-radius: 6px;
        border-collapse: separate !important;
    }

        table.outline tr {
        }

        table.outline td {
            padding: 10px 11px;
        }

            table.outline td p {
                margin: 0;
                font-size: 1em;
            }

@media screen and (max-width:600px) {
    table {
        font-size: 13px;
    }

        table th,
        table td {
            padding: 5px 10px 5px 0;
        }

        table th {
            white-space: normal;
            line-height: 14px;
        }
}




/* Form */
form {
}

    form fieldset {
        border: 0px;
        padding: 0;
        margin: 0 0 20px 0;
    }

    form label {
        display: block;
        color: #013765;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    form input[type="text"],
    form input[type="email"],
    form select {
        background: #f9f9fd;
        width: 100%;
        border: none;
        padding: 10px 17px;
        border: 2px solid #e8e8f1;
        border-radius: 6px;
        color: #013765;
        font-size: 15px;
        font-family: 'Neutrif Studio', sans-serif;
    }

    form select {
        width: auto !important;
    }

    form ul.checklist {
        margin: 0 0 15px 0;
        padding: 0;
        list-style: none;
    }

        form ul.checklist li {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

            form ul.checklist li label {
                margin-bottom: 0;
                font-size: 14px;
                font-weight: 400;
            }

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    background: transparent;
    height: 18px;
    width: 18px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    cursor: pointer;
    margin: 0px 9px 0px 0;
    outline: none;
    transition: 0.2s ease all;
    padding: 0;
}

    input[type="radio"]:hover {
        border-color: #008dff;
    }

    input[type="radio"]:checked {
        border: 6px solid #008dff;
    }

        input[type="radio"]:checked::before {
        }

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    position: relative;
    background: transparent;
    height: 20px !important;
    width: 20px !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important;
    cursor: pointer;
    margin: 0px 9px 0px 0;
    outline: none;
    transition: 0.2s ease all;
    border-radius: 4px;
    padding: 0 !important;
}

    input[type="checkbox"]:hover {
        border-color: #008dff;
    }

    input[type="checkbox"]:checked {
        border-color: #008dff !important;
        background: #008dff;
    }

        input[type="checkbox"]:checked::before {
            content: "\F12C";
            display: block;
            position: absolute;
            font-family: 'Material Design Icons';
            top: -2px;
            right: -2px;
            font-size: 17px;
            width: 20px;
            height: 20px;
            color: white;
            transition: 0.2s ease all;
            text-align: center;
            line-height: 19px;
        }

input[type="checkbox"] {
    height: 20px !important;
    width: 20px !important;
    max-width: 20px;
}

@media screen and (max-width:1024px) {
    form .col-2.tight .col {
        margin-bottom: 0 !important;
    }
}


/* Buttons */
.button-group {
    margin: 20px 0 0px;
}

.button {
    background: #F0F0FA;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    padding: 6px 17px;
    display: inline-block;
    color: #747895;
    border: 0px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

    .button:hover {
        background: #a8abc2;
        color: white;
    }

.button-group .button {
    margin: 0px 0px;
    margin-right: 10px;
}

    .button-group .button:last-child {
        margin-right: 0px;
    }

.button.green {
    color: #25c56c;
    background: rgba(45, 202, 115, 0.15);
}

    .button.green:hover {
        background: #25c56c;
        color: white;
    }

.button.blue {
    color: #008DFF;
    background: rgba(0, 141, 255, 0.15);
}

    .button.blue:hover {
        background: #008DFF;
        color: white;
    }

.button i {
    font-size: 16px;
    transform: translateY(2px);
    margin-right: 8px;
    margin-left: -3px;
}

.button.trend-button {
    background: white;
    padding: 3px 14px;
    font-size: 13px;
    margin: 0px 5px 5px 0px;
}

    .button.trend-button:hover {
        color: #013765;
    }

    .button.trend-button i {
        color: #2dca73;
    }

@media screen and (max-width:500px) {
    .button:not(.small) {
        width: 100%;
        text-align: center;
        margin-right: 0px;
    }
}


/* Login */
#login {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 76px;
    margin: 0;
    position: relative;
    min-height: 100vh;
    width: 550px;
    max-width: 100vw;
}

    #login > a {
        font-size: 0px;
        line-height: 0px;
        color: transparent;
        display: block;
        width: 120px;
        height: 18px;
        background-image: url(../img/datanow_colour.svg);
        background-repeat: no-repeat;
        margin: 0 0 50px 0;
        position: absolute;
        top: 90px;
        z-index: 1;
    }

    #login::after {
        content: ' ';
        background-image: url(../../Images/circles.svg);
        display: block;
        background-color: #013765;
        height: 100vh;
        position: absolute;
        width: calc(100vw - 550px);
        left: 550px;
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: auto 100%;
        top: 0;
    }

    #login > a img {
        display: none;
    }

.login {
    padding: 70px 0 0 0;
    position: relative;
}

    .login::before {
        content: 'Login';
        font-weight: 400;
        font-size: 3em;
        margin: 0 0 0.4em;
        line-height: 1.2em;
        color: #013765;
    }

    .login button#loginbutton {
        background: #F0F0FA;
        text-decoration: none;
        font-weight: bold;
        border-radius: 3px;
        padding: 11px 17px !important;
        display: block;
        color: #747895;
        border: 0px;
        font-size: 14px;
        align-items: center;
        margin: 0 !important;
        text-transform: capitalize;
        width: 100%;
        color: #008DFF;
        background: rgba(0, 141, 255, 0.15);
    }

        .login button#loginbutton:hover {
            background: #008DFF;
            color: white;
        }

    .login button#cancelbutton {
        display: none;
    }

#loginform {
    color: #747895;
    font-weight: 400;
    font-size: 14px;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 12px;
}

    #loginform input {
        border: 1px solid #e5eaef;
        background: #fff;
        color: #747895;
        margin: 2px 0;
        max-width: 100%;
        font-size: 15px;
        padding: 7px 10px !important;
        border-radius: 4px;
        font-family: 'Neutrif Studio', sans-serif;
        width: 100%;
        margin-bottom: 20px;
    }

        #loginform input:hover {
            border-color: #0091ff;
        }

        #loginform input:focus {
            outline: none;
            border: 1px solid #0091ff;
        }

.support-button {
    padding: 0;
    cursor: pointer;
    height: 16px;
    margin: 25px 0 0;
    color: #008dff;
    font-size: 14px;
    background: transparent;
}

    .support-button:hover {
        text-decoration: underline;
    }

@media screen and (max-width:500px) {
    #login {
        padding: 76px 40px;
    }
}



/* https://www.datanow.co.nz/assets/img/circles.svg */

/* Header */
.main-header {
    background: white;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 27px;
    border-bottom: 1px solid #F2F2FA;
    max-height: 76px;
}

    .main-header a.logo {
        font-size: 0px;
        line-height: 0px;
        color: transparent;
        display: block;
        width: 138px;
        height: 20px;
        background-image: url('../img/datanow_colour.svg');
        background-repeat: no-repeat;
    }

    .main-header nav {
        margin-left: auto;
        max-height: 76px;
    }

        .main-header nav > ul {
            margin: 0;
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: flex-end;
        }

            .main-header nav > ul > li {
                font-size: 15px;
                margin: 0; /* position: relative; */
            }

                .main-header nav > ul > li.active {
                }

                    .main-header nav > ul > li.active > a {
                        color: #013765;
                        font-weight: 700;
                        box-shadow: inset 0px -2px 0px #008dff;
                    }

                        .main-header nav > ul > li.active > a::before {
                        }

                .main-header nav > ul > li.megamenu-parent > a::after {
                    content: '+';
                    margin-left: 5px;
                }

                .main-header nav > ul > li.megamenu-parent:hover > a::after {
                    content: '-';
                }

                .main-header nav > ul > li > a {
                    text-decoration: none;
                    display: inline-block;
                    line-height: 75px;
                    color: #747895;
                    font-weight: 200;
                    padding: 0 27px;
                    position: relative;
                }

                    .main-header nav > ul > li > a:hover {
                        color: #013765;
                        text-decoration: none;
                    }

    .main-header li.nav-notifications {
        font-size: 22px;
        cursor: pointer;
        color: rgba(116, 120, 163, 0.8);
        position: relative;
    }

        .main-header li.nav-notifications i {
            line-height: 72px;
            display: block;
            padding: 0 30px 0 10px;
        }

            .main-header li.nav-notifications i:hover {
                color: #013765;
            }

        .main-header li.nav-notifications span.alert {
            width: 6px;
            height: 6px;
            background: #ff015b;
            border-radius: 20px;
            display: block;
            position: absolute;
            top: 21px;
            left: 26px;
            opacity: 0;
        }

        .main-header li.nav-notifications.new-notifications span.alert {
            opacity: 1;
        }

    /* Header - User & Dropdown */
    .main-header nav > ul > li.user-dropdown_wrap {
        display: flex;
        line-height: 74px;
        border-left: 1px solid #EDEDF5;
        padding-left: 36px;
        margin-right: 0;
        position: relative;
    }

        .main-header nav > ul > li.user-dropdown_wrap::before {
            display: none;
        }

.user-dropdown_name {
    cursor: default;
}

.user-dropdown_toggle {
    padding: 0 0 0 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgba(116, 120, 149, 0.4);
}

    .user-dropdown_toggle:hover {
        color: #013765;
    }

    .user-dropdown_toggle i {
        transition: 0.26s cubic-bezier(0.52, -0.21, 0.41, 1.17) all;
    }

        .user-dropdown_toggle i.mdi-account-circle {
            font-size: 24px;
        }

        .user-dropdown_toggle i.mdi-chevron-down {
            color: #013765;
            font-size: 18px;
        }

.active .user-dropdown_toggle i.mdi-chevron-down {
    transform: rotate(180deg) translateY(3px);
}

.user-dropdown_wrap ul {
    position: absolute;
    top: 65px;
    padding: 0;
    background: white;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
    pointer-events: none;
    transition: 0.26s cubic-bezier(0.51, -0.17, 0.5, 1.18) all;
    opacity: 0;
    transform: translateY(-10px);
    right: -10px;
}

.user-dropdown_wrap.active ul {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0px);
    z-index: 10;
}

.user-dropdown_wrap ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: block;
    width: 100%;
    font-size: 14px;
}

    .user-dropdown_wrap ul li a {
        display: block;
        text-align: left;
        width: 100%;
        min-width: 130px;
        padding: 10px 10px 10px 16px;
        color: #747895;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .user-dropdown_wrap ul li a:hover {
            color: #013765;
            text-decoration: underline;
        }

        .user-dropdown_wrap ul li a i.mdi {
            margin-left: 10px;
            font-size: 16px;
            color: rgba(116, 120, 149, 0.4);
        }

.user-dropdown_close {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    left: 0;
    z-index: 9;
    pointer-events: none;
}

.active .user-dropdown_close {
    pointer-events: all;
}

/* Header - Mega menu */
.megamenu {
    position: absolute;
    width: 100vw;
    display: flex;
    top: 75px; /* background: white; */
    z-index: 99;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    left: 0;
    flex-wrap: wrap;
    justify-content: stretch;
    transition: 0.26s ease all;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

li:hover > .megamenu {
    opacity: 1;
    transform: translateY(0px);
    background: white;
    pointer-events: all;
    border-top: 1px solid #F2F2FA;
}

.megamenu-col {
    padding: 30px 30px 30px;
    border-right: 1px solid #F2F2FA;
    flex-grow: 1;
    border-bottom: 1px solid #F2F2FA;
}

    .megamenu-col h4 {
        font-weight: bold;
        font-size: 17px;
        line-height: 20px;
        display: flex;
        align-items: center;
        color: #013765;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .megamenu-col .plants-list {
        margin-bottom: 5px;
    }

        .megamenu-col .plants-list li {
            border: 0;
            background: transparent;
        }

            .megamenu-col .plants-list li:hover {
                background: transparent;
            }

            .megamenu-col .plants-list li a {
                font-size: 14px;
                line-height: 18px;
                display: flex;
                align-items: center;
                color: #013765;
                padding: 6px 0 6px 21px;
            }

                .megamenu-col .plants-list li a:hover { /* color: #013765; */
                    text-decoration: underline;
                }

                .megamenu-col .plants-list li a span {
                }

            .megamenu-col .plants-list li::before {
                content: '\FBAF';
                display: inline-block;
                font: normal normal normal 24px/1 "Material Design Icons";
                font-size: inherit;
                text-rendering: auto;
                line-height: inherit;
                font-size: 16px;
                color: #008dff;
                margin-right: 6px;
                text-decoration: none !important;
                position: absolute;
                margin-left: -3px;
                transform: translateY(2px);
            }

            .megamenu-col .plants-list li:hover a::before {
                text-decoration: none;
            }

    .megamenu-col .trend-list {
        list-style: none;
        padding-left: 0;
    }

        .megamenu-col .trend-list li {
        }

            .megamenu-col .trend-list li a {
                padding: 0px 0;
                margin: 0;
                width: 100%;
                color: #013765;
                font-weight: 400;
                font-size: 14px;
                background: transparent;
            }

                .megamenu-col .trend-list li a:hover {
                    color: #013765;
                    text-decoration: underline;
                }

                .megamenu-col .trend-list li a i {
                }


/* Page body */
.page-body {
}

/* Page header */
.page-header {
    display: flex;
    background: white;
    padding: 12px 27px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #F2F2FA;
}

    .page-header h1 {
        font-size: 22px;
        margin: 0;
    }

    .page-header .button-group {
        margin: 0;
        display: flex;
    }

/* Page content */
.page-content {
    padding: 36px;
}

/* Sites */
.site-grid {
    margin-bottom: -36px;
}

.site-tile_gridsizer, .site-tile {
    width: calc(33.33% - 30px);
}

.site-tile {
    margin-bottom: 40px;
}

.site-tile_guttersizer {
    width: 40px;
}

.site-tile_header {
}

    .site-tile_header h2 {
        margin: 0px 0 12px;
    }

.plants-list {
    margin: 0;
    padding: 0;
}

    .plants-list li {
        background: #FFFFFF;
        list-style: none;
        border-bottom: 1px solid #F2F2FA;
        margin: 0;
    }

        .plants-list li:hover {
            background: #f9f9fd;
        }

        .plants-list li a {
            display: flex;
            align-items: center;
            padding: 17px 17px;
        }

        .plants-list li:first-child {
            border-radius: 6px 6px 0px 0px;
        }

        .plants-list li:last-child {
            border: none;
        }

    .plants-list .indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: rgb(231, 231, 239);
        border-radius: 6px;
        margin-right: 13px;
        position: absolute;
        right: 3px;
    }

        .plants-list .indicator.online,
        .plants-list .indicator[style="background: rgb(132, 221, 90);"] {
            background: #2DCA73 !important;
        }

        .plants-list .indicator.offline {
            background: #FF015B;
        }


.plants-list_title {
    color: #013765;
    margin-right: auto;
    display: block;
    font-size: 17px; /* font-weight: 700; */
}

    .plants-list_title::after {
        content: "\F142";
        display: inline-block;
        font-family: 'Material Design Icons';
        margin-right: 11px;
        text-decoration: none !important;
        margin-left: 5px;
    }

    .plants-list_title::before {
        content: '\FBAF';
        display: inline-block;
        font: normal normal normal 24px/1 "Material Design Icons";
        font-size: inherit;
        text-rendering: auto;
        line-height: inherit;
        font-size: 16px;
        color: #008dff;
        margin-right: 11px;
        text-decoration: none !important;
        margin-left: -3px;
    }

.plants-list li a:hover .plants-list_title::before {
    color: #008dff;
}

.plants-list i.mdi {
    color: #d2d4e1;
    font-size: 22px;
    display: none;
}

.plants-list a:hover i.mdi {
    color: #013765;
}

.site-tile .button-group {
    background: hsl(240, 33%, 92%);
    margin: 0;
    padding: 11px 14px 7px;
    border-radius: 0px 0px 6px 6px;
    display: flex;
    flex-wrap: wrap;
}

/* Ratios */
#ratios {
    padding: 5px 40px 40px;
    border-left: 1px solid #eeeef8;
    flex-grow: 1;
    max-width: calc(100% - 364px);
}

.stat-group {
    border-bottom: 1px solid #eeeef8;
    padding: 35px 0px 14px 0;
}

    .stat-group:last-child {
        border-bottom: 0px;
    }

    .stat-group > h2 {
        color: #747895;
        font-size: 15px;
        margin: 0 0 18px 0;
        position: relative;
        z-index: 2;
    }

.stat-grid {
    display: flex;
    flex-wrap: wrap;
}

.stat {
    display: flex;
    flex-direction: column-reverse;
    width: 33.33%;
    color: #013765;
    margin: 0 0 22px 0;
}

@media screen and (max-width:1300px) {
    .stat {
        width: 50%;
    }
}

@media screen and (min-width:1760px) {
    .stat {
        width: 25%;
    }
}

.stat-label {
    display: block;
    color: #747895;
    font-weight: 400;
    font-size: 14px;
}

.stat-value {
    display: flex;
    font-size: 34px;
    font-weight: 200;
    align-items: baseline;
}

    .stat-value sub {
        font-size: 26px;
        margin: 0 7px 0 0;
    }

.stat-group #reasonChart {
    margin: -30px 0 0 -30px !important;
    z-index: 1;
}

/* info window - Shift monitor */
.infowindowcontent table {
    margin: 0;
}

.infowindowcontent hr {
    margin: 20px 0;
}

/* Footer */
footer {
    padding: 23px 27px;
    border-top: 1px solid #E8E8F6;
    margin-top: 30px;
}

    footer a.footer-logo {
        font-size: 0px;
        line-height: 0px;
        color: transparent;
        display: block;
        width: 96px;
        height: 14px;
        background-image: url('../img/datanow_colour.svg');
        background-repeat: no-repeat;
    }


/* Ratios and Calendar width media queries */
@media screen and (min-width:1440px) {

    #ratios {
        max-width: calc(100% - 520px);
    }

    .calendar {
        width: 520px;
    }

        .calendar .event {
            width: 257px;
        }

        .calendar .eventtype5,
        .calendar .eventtype6,
        .calendar .eventtype9 {
            margin-left: 313px;
            width: 197px;
        }

        .calendar .eventtype6 {
            width: 197px;
        }

    .calendarZoom {
        left: 330px;
        border-right: 0px;
    }
}


/* Trends / Charts */
.chart {
    margin: 20px 0px 20px;
    width: 100%;
    padding: 0px 20px 40px 20px;
    border-bottom: 2px solid #f2f2fa;
    position: relative;
}

.addChart {
    position: absolute;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3px;
    padding: 6px 17px;
    border: 0px;
    font-size: 14px;
    align-items: center;
    background: #25c56c;
    color: white;
    top: -48px;
    right: 0;
    cursor: pointer;
}

    .addChart:hover {
        opacity: 0.7;
    }

.chartFrame {
    position: absolute;
    right: 0;
    padding-right: 20px;
    display: none;
}

    .chartFrame:first-child {
        display: block;
    }

    .chartFrame > div, .penEdit::before {
        background: #F0F0FA;
        text-decoration: none;
        font-weight: bold;
        border-radius: 3px;
        padding: 6px 17px;
        display: inline-block;
        color: #747895;
        border: 0px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        margin-left: 14px;
        cursor: pointer;
    }

        .chartFrame > div:nth-child(1) {
        }

            .chartFrame > div:nth-child(1):hover {
                background: #a8abc2;
                color: white;
            }

        .chartFrame > div:nth-child(2) { /* color: #25c56c; */ /* background: rgba(45, 202, 115, 0.15); */
        }

            .chartFrame > div:nth-child(2):hover, .penEdit:hover {
                background: #a8abc2;
                color: white;
            }

        .chartFrame > div img {
            display: none;
        }

        .chartFrame > div span {
        }

.graphheader {
}

.graphtitle {
    font-size: 22px;
    margin-bottom: 5px;
}

.graphdesc {
    color: #747895;
    font-size: 14px;
}

.graphlabels {
    position: absolute;
    width: 360px;
    padding: 7px 0;
    color: #747895;
    right: 20px;
    margin-top: 13px;
    display: flex;
    font-weight: 600;
    border-bottom: 1px solid #f2f2fa;
}

    .graphlabels .name { /* position: absolute; */
        width: 140px; /* white-space: nowrap; */ /* overflow: hidden; */
    }

    .graphlabels .options {
        margin-left: auto;
    }

    .graphlabels .livedata { /* margin-left: 150px */
    }

    .graphlabels .name,
    .linelegend .name {
        width: 190px;
    }

linelegend .reading {
}

.chart .line {
    padding-top: 30px;
    display: flex;
}

.graph {
    cursor: default;
    width: calc(100% - 398px) !important;
    margin-left: -30px;
    margin-right: 30px;
}

    .graph > div {
    }

        .graph > div > div {
            color: #888 !important;
        }

            .graph > div > div[title] {
                cursor: pointer;
                width: 20px !important;
                height: 20px !important;
            }

                .graph > div > div[title] img {
                    display: none;
                }

                .graph > div > div[title]::before {
                    content: '\F369';
                    font-family: "Material Design Icons";
                    font-weight: 400;
                    text-align: center;
                    display: block;
                    width: 100%;
                    font-size: 20px;
                    position: absolute;
                    left: 0px;
                    top: 0;
                    line-height: 20px;
                    color: #008DFF;
                }

.linelegend {
    flex-grow: 1;
    margin-left: 38px;
    padding-top: 23px;
    margin-bottom: 30px;
}

    .linelegend .pen {
        line-height: 1em;
        display: flex;
        border-bottom: 1px solid #f2f2fa;
        padding: 10px 0px;
        align-items: center;
    }

        .linelegend .pen:last-child {
            border-bottom: 0px;
        }

    .linelegend .showtrue { /* padding: 3px */
    }

    .linelegend .name {
    }

    .linelegend .reading {
    }

    .linelegend .options {
        margin-left: auto;
        display: flex;
        flex-direction: row-reverse;
    }

        .linelegend .options > span {
            text-align: center;
            line-height: 20px;
            color: rgba(116, 120, 163, 0.8);
            cursor: pointer;
        }

            .linelegend .options > span:nth-child(1):hover {
                color: #ff015b;
            }

            .linelegend .options > span:nth-child(2):hover {
                color: #008DFF;
            }

.delicon {
    display: inline-block;
    background-image: none !important;
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.visicon {
    display: inline-block;
    background-image: none !important;
}

    .delicon::before, .visicon::before {
        content: ' ';
        display: inline-block;
        font: normal normal normal 24px/1 "Material Design Icons";
        font-size: inherit;
        text-rendering: auto;
        line-height: inherit;
        font-size: 16px;
    }

.delicon::before {
    content: '\F9E6';
}

.visicon::before {
    content: '\F6CF';
}

.visicon.showtrue::before {
    content: '\F6D0';
}

.querycontrols {
    display: flex;
    align-items: center; /* flex-wrap: wrap; */
}

.daterange {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 1;
}

    .daterange b {
        width: 100%;
        margin-bottom: 5px;
    }

    .daterange br {
        display: none;
    }

    .daterange input {
        flex-grow: 1;
        margin: 0 10px;
        max-width: 155px;
    }

    .daterange button {
        margin-left: 6px;
    }

        .daterange button + img:before {
        }

.penEdit {
    margin: 22px 30px 0px 20px;
    border-radius: 4px;
}

    .penEdit::before {
        content: 'Add TimeSeries';
        color: #25c56c;
        background: rgba(45, 202, 115, 0.15);
        margin: 0;
        border-radius: 3px;
    }

    .penEdit:hover::before {
        color: white;
        background: #25c56c;
    }

.smoothing {
    flex-grow: 1;
    align-content: baseline;
    max-width: 199px;
}

.vertcontrol {
    margin: 7px 0;
    background: #E8E8F6;
    width: 100%;
    margin-left: 6px;
    width: calc(100% - 7px);
}

.ui-selected, .ui-selecting {
    font-weight: 700
}

    .ui-selected::before, .ui-selecting::before {
        content: '\F43E';
        font-family: "Material Design Icons";
        font-weight: 400;
        text-align: center;
        display: block;
        font-size: 21px;
        position: absolute;
        right: 9px;
        color: #25c56c;
    }

#penList {
    
    margin-bottom: 31px;
    border-radius: 7px;
}

#penList li {
    border: 1px solid #e5eaef;
    padding: 8px 16px 8px 42px;
    margin: 0;
    position: relative;
    cursor: pointer;
    margin-top:-1px;
}

.joblisttitle {
    margin: 10px 0;
    display: block;
}
/*
#penList li:last-child {
    border: 0px;
}*/

        #penList li::before {
            font-family: "Material Design Icons";
            font-weight: 400;
            text-align: center;
            display: block;
            font-size: 21px;
            position: absolute;
            left: 11px;
            color: rgba(116, 120, 149, 0.5);
            width: 20px;
            content: '\F43D';
        }

        #penList li.ui-selected::before, #penList li.ui-selecting::before {
            content: '\F43E';
            color: #008DFF;
        }

        #penList li:hover {
            font-weight: 700;
        }

            #penList li:hover::before {
                content: '\F43E';
            }

#annotationView {
}

#eventlog {
    margin-bottom: 50px;
}

#notificationpanel1 #eventlog div {
    clear: both;
}

#eventlog li {
    display: flex;
    flex-wrap: wrap;
    margin: -1px 0 0 0;
}

    #eventlog li:last-child {
        border: none;
        padding: 15px 20px;
        border: 1px solid #e5eaef;
        display: block;
        border-radius: 5px;
        margin-top: 20px;
    }

        #eventlog li:last-child input {
            width: calc(100% - 76px) !important;
            margin: 10px 10px 10px 0px;
        }

        #eventlog li:last-child button {
        }

    #eventlog li::after {
        content: ' ';
        display: block;
        clear: both;
    }

    #eventlog li span {
        color: #aaa
    }

    #eventlog li > span:first-child {
        color: #013765;
        font-size: 16px;
        font-weight: 700;
        width: calc(100% - 160px);
        margin-bottom: 20px;
    }

    #eventlog li > span:nth-child(2) {
        color: #747895;
        font-size: 13px;
        width: 160px;
        text-align: right;
    }

    #eventlog li .messageText {
        font-size: 20px;
        padding: 0;
        margin-bottom: 29px;
        width: calc(100% - 148px);
    }

    #eventlog li button {
        height: 33px;
    }

    #eventlog li .messageText + button {
        color: #25c56c;
        background: rgba(45, 202, 115, 0.15);
    }

        #eventlog li .messageText + button:hover {
            background-color: #25c56c;
            color: white;
        }

        #eventlog li .messageText + button + button {
            color: #ff015b;
            background: rgba(255, 1, 91, 0.1);
            margin-left: 10px;
        }

            #eventlog li .messageText + button + button:hover {
                background-color: #ff015b;
                color: white;
            }

form#chart {
}

    form#chart span,
    form#instrument span,
    form#limit span,
    .alertHeader span {
        font-weight: 700;
        color: #013765;
        display: block;
        margin-bottom: 5px;
    }

.alertHeader span {
    width: 116px !important;
}

form#chart input[type="text"], form#instrument input[type="text"], form#limit input[type="text"] {
    margin-bottom: 26px;
    min-width: 100%;
}

#limitvalue {
    width: calc(100% - 60px) !important;
    min-width: 0 !important;
}

form#chart + .dialogTools,
form#instrument + .dialogTools,
#limitEdit + .dialogTools,
#alertwrap + .dialogTools {
    flex-direction: row-reverse;
}

#alertwrap + .dialogTools {
    margin-top: 0px;
}

    form#chart + .dialogTools #chartSave,
    form#instrument + .dialogTools #instrumentupdate,
    #limitEdit + .dialogTools #limitSave,
    #alertwrap + .dialogTools #alertupdate {
        color: #008DFF;
        background: rgba(0, 141, 255, 0.15);
    }

        form#chart + .dialogTools #chartSave:hover,
        form#instrument + .dialogTools #instrumentupdate:hover,
        #limitEdit + .dialogTools #limitSave:hover,
        #alertwrap + .dialogTools #alertupdate:hover {
            background-color: #008DFF;
            color: white;
        }

/* Datapoints */

#panel2 > div[style*="height: 20px;"] {
    display: flex;
    height: auto !important;
    padding-bottom: 14px;
}

.instrumentHeader {
    width: 17% !important;
    padding: 0;
    color: #013765;
    font-weight: 700;
}

    .instrumentHeader:first-child {
        padding-left: 20px;
    }

/*    .instrumentHeader:last-child {  text-align:right; 
        padding-right: 20px;
    }*/

    .instrumentHeader.compact {
        width: 3%!important;
    }

/*.instrumentHeader:nth-child(4){position: relative;left: -91px;}
.instrumentHeader:nth-child(5) { position: relative;left: -150px;}*/
.sources#parts {
}

, couraces#parts .seriesId {
}

.sources#parts .partItem {
    padding: 14px 0;
}

.sources#parts .partItem > h3 {
    width: 17% !important;
    margin: 0;
    font-size: 18px;
}
.sources#parts .partItem > h3.compact {
    width: 3% !important;
    margin: 0;
    font-size: 18px;
}

        .sources#parts .partItem > h3:first-child {
            padding-left: 20px;
        }

.sources .instrumentCell {
    width: 17%;
    position: relative;
}

.sources#parts .partItem > .tools {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    width: 200px !important;
}

.sources#parts .partItem > div.versions {
    margin: 20px 20px 7px;
    border-radius: 6px;
    flex-direction: column;
    align-items: baseline;
}

    .sources#parts .partItem > div.versions > button:first-child {
        margin-bottom: 10px;
    }

    .sources#parts .partItem > div.versions .operation {
        border-bottom: 1px solid #f2f2fa;
        width: 100%;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .sources#parts .partItem > div.versions .operation:last-child {
            border: none;
        }

        .sources#parts .partItem > div.versions .operation > span:first-child {
            font-size: 15px;
            color: #013765;
        }

        .sources#parts .partItem > div.versions .operation > span.subTools {
            display: flex;
            flex-direction: row-reverse;
        }

            .sources#parts .partItem > div.versions .operation > span.subTools div {
                float: none;
            }

.operation > span.subTools div:nth-child(1)::before {
    content: '\FA79';
}

.operation > span.subTools div:nth-child(2)::before {
    content: '\F3EB';
}

.operation > span.subTools div:nth-child(3)::before {
    content: '\F026';
}

.sources#parts .partItem > div.tools {
}

.sources#parts .partItem > .dot {
    margin: 0;
    width: 16px;
    height: 16px;
    top: 9px;
}
/*
.sources#parts .partItem span.instrumentCell {
    width: 18% !important;
}

.sources#parts .partItem div.instrumentCell {
    width: 18%;
}*/

.ui-dialog .ui-dialog-titlebar + .ui-dialog-content#panel8 {
    overflow-y: scroll !important;
}

.alertHeader {
}

    .alertHeader input:nth-child(2) {
        width: 510px !important;
    }

    .alertHeader br {
        display: block;
        width: 100%;
    }

    .alertHeader #alertdesc {
        width: 642px !important;
    }

form#alert {
}

    form#alert > div[style="float: left;"] {
        border-right: 1px solid #eee;
        width: 326px;
    }

        form#alert > div[style="float: left;"] span {
            margin-right: 10px;
        }

            form#alert > div[style="float: left;"] span:nth-child(4),
            form#alert > div[style="float: left;"] span:nth-child(8),
            form#alert > div[style="float: left;"] span:nth-child(11),
            form#alert > div[style="float: left;"] span:nth-child(14),
            form#alert > div[style="float: left;"] span:nth-child(17) {
                width: 104px;
                display: inline-block;
            }

        form#alert > div[style="float: left;"] select,
        form#alert > div[style="float: left;"] input[type="text"] {
            width: 87px !important;
            margin-right: 13px;
            margin-bottom: 10px;
        }


#alertlist { /* margin-right: 10px; */
    padding-left: 30px; /* margin-left: -200px; */
    overflow: auto;
    list-style: none;
}

.alertitem {
    padding: 5px 5px 5px 0;
    cursor: pointer;
    background: #f2f2fa;
    display: flex;
    padding: 10px 16px;
    border-radius: 4px;
    justify-content: space-between;
}

.newalert {
    cursor: pointer;
    background: #F0F0FA;
    text-decoration: none;
    font-weight: bold;
    border-radius: 3px;
    padding: 6px 17px;
    border: 0px;
    font-size: 14px;
    display: inline-block;
    align-items: center;
    font-family: 'Neutrif Studio', sans-serif;
    outline: none;
    position: absolute;
    right: 23px;
    top: 19px;
    background-color: rgba(0, 141, 255, 0.15);
    color: #008DFF;
}

    .newalert:hover {
        background-color: #008DFF;
        color: white;
    }

.deleteimage {
}

    .deleteimage::before {
        content: '\FA79';
        font-family: "Material Design Icons";
        font-weight: 400;
        text-align: center;
        display: block;
        width: 100%;
        font-size: 18px;
    }

    .deleteimage:hover::before {
        color: #013765;
    }

.usertable {
}

#usertable td:nth-child(1) {
    width: 260px !important;
}

#usertable td:nth-child(2) {
    text-align: right;
}

#usertable input[type="checkbox"] {
    margin-right: 0;
}

#notificationparts {
}

    #notificationparts .partRow {
        border-radius: 0;
    }

    #notificationparts .partItem {
        padding: 18px 0;
        position: relative;
    }

        #notificationparts .partItem .unread {
            box-shadow: 0 1px 0 0 #77A7BB;
            font-weight: 700
        }

        #notificationparts .partItem > span:nth-child(1) {
            display: none;
        }

        #notificationparts .partItem > span:nth-child(2) {
            width: 43% !important;
            color: #013765;
            font-weight: 700;
            font-size: 16px;
            padding-bottom: 0px;
        }

        #notificationparts .partItem > span:nth-child(3) {
            width: 18% !important;
        }

        #notificationparts .partItem > .dot {
            width: 10px;
            height: 10px;
        }

        #notificationparts .partItem > .tolls {
        }

#comment {
}

    #comment textarea {
        width: 100% !important;
        margin-bottom: 10px;
    }

    #comment button {
        margin-right: 10px;
    }



/* Dialog modals
    .modal{position: fixed;top: 0;left: 0;right: 0;border: 0px;background: rgba(0, 0, 0, 0.8);margin: 0;width: 100%;height: 100%;display: flex;justify-content: center;pointer-events: none;transition: 0.3s ease all;opacity: 0;display: block;text-align: center;overflow: hidden;z-index: 9;}
    .modal.open{opacity: 1;pointer-events: all;}
    .modal-inner{overflow-y: auto;max-height: 100%;padding: 50px;}
    .modal .close{position: absolute;background: transparent;color: white;font-size: 3em;border: 0;position: fixed;top: 12px;right: 25px;outline: none;cursor: pointer;}
    .modal iframe{width: 100%;min-height: 780px;}

    @media screen and (max-width:1200px){
        .modal{padding: 0;}
        .modal .close{color: black;right: 8px;}
        .modal#contact .close{color: white;background: black;border-radius: 50px;width: 60px;height: 60px;font-size: 29px;}
        .modal-inner{min-width: 100%;}
        .modal#contact .modal-inner{padding: 0;}
        .modal-inner img{min-width:100%;}
    }
    */

/* Current Modals */
[aria-describedby="networkDiag"]:before {
    content: ' ';
    display: block;
    position: fixed;
    background: rgba(28, 47, 61, 0.5);
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 0;
}

.progress {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #eee;
}

.ui-progressbar-value {
    background: #ccc;
    border-radius: 5px;
}


.reasonNames span {
    display: block;
}

.include span, .planned span {
    display: block;
    margin-bottom: 2px;
}

.reasonNames div {
    float: left;
}

.planned div, .include div {
    float: left;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #e5eaef;
    color: #747895;
    padding: 7px 17px;
    cursor: pointer;
}

.include {
    overflow: auto;
    margin: 0px 5px 3px 5px;
    float: left;
}

.planned {
    overflow: auto;
    margin: 0px 5px 3px 5px;
    float: left;
}

    .include .right, .planned .right {
        border-radius: 0 5px 5px 0;
    }

    .include .left, .planned .left {
        border-radius: 5px 0 0 5px;
    }

    .include .selected, .planned .selected {
        border: 1px solid #0091ff;
        color: #0091ff;
    }

.treeMenu .reasonRow {
    position: absolute;
    min-width: 1040px;
}

#nodeValue {
    margin-right: 10px;
}

#nodeDesc {
    flex-grow: 1;
    margin-right: 10px;
}

.reasonUpdate {
    color: #008DFF;
    background: rgba(0, 141, 255, 0.15);
}

    .reasonUpdate:hover {
        background: #008DFF;
        color: white;
    }

.reasonCreate {
    margin-left: 10px;
}

.reasonDelete {
    margin-left: 10px;
    color: #ff015b;
    background: rgba(255, 1, 91, 0.1);
}

    .reasonDelete:hover {
        background: #ff015b;
        color: white;
    }

.buttons {
    position: absolute;
    margin-top: 70px;
}


/* Coding Widget */
.uncodedIssue {
    display: none;
}

.codingWidget {
    background: #FFFFFF;
    box-shadow: 0px 14px 34px rgba(93, 93, 117, 0.19);
    border-radius: 6px;
    position: fixed;
    bottom: 0;
    z-index: 9;
    padding: 12px 11px;
    bottom: 51px;
    right: 14px;
    display: flex;
    height: 48px;
    align-items: center;
    overflow: hidden;
    transition: 0.46s ease all;
    width: 0px;
}

    .codingWidget.positive {
        width: 48px
    }

.codingWidget_icons {
    width: 26px;
    height: 26px;
    position: relative;
    flex-shrink: 0;
}

    .codingWidget_icons .mdi {
        font-size: 26px;
        line-height: 24px;
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.46s ease;
    }

    .codingWidget_icons i.mdi-check-bold {
        color: #2DCA73;
    }

    .codingWidget_icons i.mdi-alert-circle-outline {
        color: #FF015B;
    }

.negative .codingWidget_icons i.mdi-check-bold,
.positive .codingWidget_icons i.mdi-alert-circle-outline {
    opacity: 0;
}
.codingWidget.negative {
    width: 218px;
}
.codingWidget_negative {
    transition: 0.26s ease all;
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.codingWidget_message {
    color: #FF015B;
    font-size: 14px;
    padding: 0 0 0 13px;
    display: inline-block;
    min-width: 115px;
}

.codingWidget_negative button.small {
    font-size: 13px;
    height: 24px;
}

.codingWidget.positive {
    animation: codingWidgetBounce 1s 1 ease;
    animation-delay: 0.46s;
}

@keyframes codingWidgetBounce {
    0% {
        transform: translateY(0px);
    }

    33.33% {
        transform: translateY(-20px);
    }

    66.66% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.modeconfirm .message {
    font-size: 16px;
    color: #33395d;
    text-align: center;
    margin: 0 20px 20px 20px;
}

.modeconfirm .cancel {
    float: right;
    background: #e8eff7;
    padding: 5px 20px;
    margin: 20px 25px;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 600;
}

.modeconfirm .save {
    color: #008DFF;
    cursor: pointer;
    float: left;
    background: rgba(0, 141, 255, 0.15);
    padding: 5px 20px;
    margin: 20px 25px;
    border-radius: 3px;
    font-weight: 100;
}

#deletePartConfirm .message {
    font-size: 16px;
    color: #33395d;
    text-align: center;
    margin: 0 20px 20px 20px;
}

#deletePartConfirm .cancel {
    float: right;
    background: #e8eff7;
    padding: 5px 20px;
    margin: 20px 25px;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 600;
}

#deletePartConfirm .confirm {
    color: #008DFF;
    cursor: pointer;
    float: left;
    background: rgba(0, 141, 255, 0.15);
    padding: 5px 20px;
    margin: 20px 25px;
    border-radius: 3px;
    font-weight: 100;
}