@font-face {
    font-family: 'Montserrat Regular';
    src: url('fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
        url('fonts/montserrat/Montserrat-Regular.woff') format('woff'),
        url('fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat Light';
    src: url('fonts/montserrat/Montserrat-Light.woff2') format('woff2'),
        url('fonts/montserrat/Montserrat-Light.woff') format('woff'),
        url('fonts/montserrat/Montserrat-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat Medium';
    src: url('fonts/montserrat/Montserrat-Medium.woff2') format('woff2'),
        url('fonts/montserrat/Montserrat-Medium.woff') format('woff'),
        url('fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat Bold';
    src: url('fonts/montserrat/Montserrat-Bold.woff2') format('woff2'),
        url('fonts/montserrat/Montserrat-Bold.woff') format('woff'),
        url('fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
}
/* Sticky footer styles
        -------------------------------------------------- */
@media(max-width: 767px) {
    html {
        background-color: #003f78;
    }

    .responsive-h2{
        font-size: 1.5rem;
    }
}

@media(min-width: 768px) {
    html {
        position: relative;
        min-height: 100%;
    }

    body {
        margin-bottom: 60px; /* Margin bottom by footer height */
        min-height: 100%;
    }

    footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px; /* Set the fixed height of the footer here */
    }
    .responsive-h2{
        font-size: 2rem;
    }
}


/* Theme styles
        -------------------------------------------------- */
.searchBarDropDownLength {
    width: 8rem !important;
}

.top-nav {
    background: linear-gradient(to right, #ddf8fc 40%,#d3f4f9 60%);
    padding-bottom: .75rem;
    color: #555;
}

.top-nav-NONPROD {
    background: linear-gradient(to right, #e97452 40%, #d65d42 60%);
    padding-bottom: .75rem;
    color: #555;
}

.top-hav .navbar-brand > img {
    height: 100%;
}

.top-nav .main-nav {
    text-transform: uppercase;
}

    .top-nav .main-nav ul {
        justify-content: space-between;
        width: 100%;
    }

.top-nav hr {
    border-top-color: #CDCDCD;
    border-top-width: .15rem;
    margin: 0;
}

.secondary-nav {
    background: linear-gradient(to right, #55B7D5 50%,#2A709A 50%);
    background-image: url('images/header2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.secondary-nav .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.secondary-nav ul {
    justify-content: space-between;
    width: 100%;
}

.tertiary-nav {
    background: linear-gradient(to right, #28628E 20%, #3991B8 80%);
}

.tertiary-nav ul {
    justify-content: space-around;
    width: 100%;
}

main {
    background-color: #fff;
    padding-top: 2rem;
}

main .form-width {
    max-width: 50rem;
    margin: auto;
}

footer {
    background-color: #003f78;
    color: #fff;
}

#dealerWelcome, 
#WelcomeNav {
    padding-top: .5em;
    padding-bottom: .5em;
}

div.scroll-box{
    height: 55vh;
    overflow-y: scroll;
}

div[data-toggle]{
    cursor: pointer;
}

.Indent {
    text-indent: 1.5em;
}

/* Valve Info
        -------------------------------------------------- */
.secondary-nav .valve-info {
    
    box-sizing: border-box;
    background-color: #CCC;
}

@media(max-width: 767px) {
    .secondary-nav .valve-info-wrapper {
        background-color: #CCC;
    }
}

@media(min-width: 768px) {
    .secondary-nav .valve-info-wrapper {
        position: absolute;
        z-index: 100;
        width: 100%;
    }
    .secondary-nav .valve-info {
        width: 40em;
        padding: 2em 5em 2em 5em;
        box-shadow: rgba(0, 0, 0, 0.4) -5px 5px 10px;
    }
}
/* Slider control
    -------------------------------------------------- */
/* Source: https://www.w3schools.com/howto/howto_css_switch.asp*/
/* The switch - the box around the slider */

.form-control-switch {
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: .1rem;
    color: #9d9d9d;
}

.switch {
    position: relative;
    display: inline-block;
    width: 5rem;
    height: 2rem;
    
    vertical-align: middle;
    margin-bottom: .25rem;
}

    /* Hide default HTML checkbox. Use opacity to allow tab focus (which skips display: none and visibility: hidden) */
    .switch input {
        opacity: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;

}

    .slider:before {
        position: absolute;
        content: "";
        height: 1.5rem;
        width: 1.5rem;
        left: .25rem;
        bottom: .25rem;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider:before {
    background-color: #003F78;
}

input:focus + .slider {
    outline: 0.15rem solid #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 133, 255, .35);
}

    input:focus + .slider:before {
        box-shadow: 0 0 1px #003F78;
    }

input + .slider:before {
    -webkit-transform: translateX(3.0rem);
    -ms-transform: translateX(3.0rem);
    transform: translateX(3.0rem);
}

input:checked + .slider:before {
    -webkit-transform: inherit;
    -ms-transform: inherit;
    transform: inherit;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Typography
    -------------------------------------------------- */
body {
    font-family: 'Montserrat Regular', Arial, sans-serif;
    color: #555;
    /* Base body font size is equivalent to 15pt*/
}

#theMainNav > .active .nav-link {
    color: #003f78;
    font-weight: bold;
}

#inturi-WRNav > .active .nav-link {
    color: #003f78;
    font-weight: bold;
}

label {
    color: #003F78;
    font-weight: bold;
}

.form-control {
    color: #003F78;
    border-radius: inherit;
    border: .15rem solid #003F78;
}

.selectize-input, .selectize-input.dropdown-active {
    border-radius: inherit;
    -webkit-border-radius: inherit;
    border: .15rem solid #003F78;
    color: #003F78;
}

.form-group {
    border-bottom: .1rem solid #CADEF7;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}

.sub-row label {
    color: #9d9d9d;
}

    @media(min-width: 768px) {
        .sub-row label {
            padding-left: 2.5rem;
        }
    }

.sub-sub-row label {
    color: #9d9d9d;
}

    @media(min-width: 768px) {
        .sub-sub-row label {
            padding-left: 4rem;
        }
    }

label.cycle-label {
    color: #003F78;
}

.form-control-plaintext {
    color: #9d9d9d;
    background-color: white;
}

.increment-help {
    font-size: 0.8rem;
    list-style-type: none;
    padding-left: 0;
}

    .increment-help em {
        display: block;
    }

    .increment-help li {
        margin-bottom: .5rem;
    }

    .increment-help li:last-child {
        margin-bottom: 0;
    }

.btn {
    font-family: 'Montserrat Bold', Arial, sans-serif;
    /*font-size: 1.07rem;*/
    letter-spacing: .1rem;
    border-radius: inherit;
    border: .15rem solid #9d9d9d;
    color: #9d9d9d;
    text-transform: uppercase;
    background: inherit;
    cursor: pointer;

    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.welcome-bar {
    font-size: .93rem;
}

    .welcome-bar a {
        color: #555;
        text-decoration: underline;
        text-transform: uppercase;
    }

.top-nav {
    font-family: 'Montserrat Light', Arial, sans-serif;
    font-size: 1.07rem;
    color: #555;
}

.selection-info {
    font-family: 'Montserrat Light', Arial, sans-serif;
    font-size: 1.07rem;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    line-height: 2em;
}

.secondary-nav {
    font-family: 'Montserrat Light', Arial, sans-serif;
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .025em;
}

    .secondary-nav .btn {
        background: none;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        vertical-align: inherit;
        text-transform: uppercase;
        border: none;
        margin: 0;
        padding: 0;
    }

    .secondary-nav .valve-info {
        font-family: 'Montserrat Regular', Arial, sans-serif;
        font-size: 1rem;
        text-transform: none;
        color: #555;
    }

        .secondary-nav .valve-info p {
            margin-bottom: .5em;
        }

        .secondary-nav .valve-info h1 {
            font-size: 1em;
            font-weight: bold;
        }

    .secondary-nav .navbar {
        letter-spacing: .1em;
    }

    .secondary-nav .navbar-nav .nav-link {
        color: #fff;
        opacity: .5;
    }

        .secondary-nav .navbar-nav .nav-link:hover {
            opacity: .75;
            color: inherit;
        }

    .secondary-nav .navbar-nav .active > .nav-link {
        font-family: 'Montserrat Medium', Arial, sans-serif;
        color: #fff;
        opacity: 1;
    }

.tertiary-nav {
    font-family: 'Montserrat Light', Arial, sans-serif;
    font-size: 1.07rem;
    color: #fff;
}

    .tertiary-nav .navbar-nav .nav-link {
        color: #fff;
        padding-bottom: .1rem;
    }

        .tertiary-nav .navbar-nav .nav-link:hover {
            color: inherit;
        }

    .tertiary-nav .navbar-nav .active > .nav-link {
        font-family: 'Montserrat Medium', Arial, sans-serif;
        color: #fff;
        border-bottom: .1rem white solid;
    }

footer, footer a, footer a:hover {
    font-family: 'Montserrat Light', Arial, sans-serif;
    font-size: .93rem;
    color: #fff;
}


.wr-nav {
    font-family: 'Montserrat Regular', Arial, sans-serif;
    font-size:.80rem;
    color: #fff !important;
    background-color: #9D9D9D !important;
    border-bottom: .1rem white solid;    
    text-transform:uppercase;
}

.wr-navbar-light a {
    color: #fff !important;
}

.wr-nav ul {
    justify-content: space-between;
    width: 80%;
}

.wr-nav hr {
    border-top-color: #CDCDCD;
    border-top-width: .15rem;
    margin: 0;
}

.dotOnline {
    height: .93rem;
    width: .93rem;
    border: 2px solid #003f78;
    background-color: #003f78;
    border-radius: 50%;
    display: inline-block;    
}

.dotOffline {
    height: .93rem;
    width: .93rem;
    border: 2px solid #003f78;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
}




/* Login Page */
#loginBody {
    background: radial-gradient(circle at 40% -7%, rgba(206, 206, 206, 0.5) 0%, rgba(110, 194, 221, 0.5), rgba(3, 171, 216, 0.59), transparent 90%), 
        linear-gradient(rgba(140, 214, 209, 0.42), transparent 58%), 
        linear-gradient(290deg, #275c8e, rgb(55,157,197) 53%, transparent 0% ), 
        linear-gradient(113deg, transparent 44.5%, rgb(71,167,204) 44.5%), 
        linear-gradient(111deg, transparent 41.5%, rgb(90,189,220) 41.5%), 
        linear-gradient(49deg, rgba(74, 171, 206, 1), rgb(112,198,225) 14%, transparent 69%)
}

#loginBody .form-group {
    border: none;
}

#loginBox {
    width: 970px;
    margin: 0 auto 0 auto;
}
#loginCredentialsBox {
    background-color: #D3F4F9;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 95px;
    margin-bottom: 50px;
}

    #loginCredentialsBox,
    #loginCredentialsBox a {
        color: #003F78;
        font-size: 10pt;
        font-family: 'Montserrat Light';
    }

        #loginCredentialsBox input[type='text'],
        #loginCredentialsBox input[type='password'],
        #loginCredentialsBox input[type='email'] {
            border: 2px solid #003B75;
            color: #003B75;
            background-color: #D3F4F9;
            font-weight: bold;
            font-size: 13px;
            font-family: 'Montserrat Medium';
            margin: 0;
        }

            #loginCredentialsBox input[type='text']::-webkit-input-placeholder,
            #loginCredentialsBox input[type='password']::-webkit-input-placeholder,
            #loginCredentialsBox input[type='email']::-webkit-input-placeholder {
                color: #003B75;
                background-color: #D3F4F9;
                font-weight: bold;
                font-size: 13px;
                font-family: 'Montserrat Medium';
            }
            
            #loginCredentialsBox .btn {
                background-color: #013F78;
                color: #ffffff;
                border: none;
                padding-left: 15px;
                text-align: left;
                font-weight: normal;
                text-transform: none;
            }
        #loginCredentialsBox input[type='text'],
        #loginCredentialsBox input[type='password'],
        #loginCredentialsBox input[type='email'],
        #loginCredentialsBox .btn {
            height: 50px;
        }
        #loginCredentialsBox h1 {
            color: #5F5F5F;
            font-size: 22pt;
            font-family: 'Montserrat Medium';
        }

#loginAnnouncementsBox {
    background-color: #013F78;
    color: #ffffff;
    font-size: 10pt;
    font-family: 'Montserrat Light';
    padding-top: 150px;
    padding-bottom: 50px;
}

#loginAnnouncementsBox h1 {
    font-size: 42pt;
    font-family: 'Montserrat Medium';
}

@media(max-width: 991px) and (min-width: 576px){
    #loginAnnouncementsBox h1 {
        font-size: 36pt;
    }
}
@media(max-width: 767px ) and (min-width: 576px) {
    #loginAnnouncementsBox h1 {
        font-size: 28pt;
    }
}

    #loginAnnouncementsBox h2 {
        font-size: 29pt;
        font-family: 'Montserrat Light';
    }

    #loginAnnouncementsBox .btn {
        background-color: #013F78;
        color: #ffffff;
        border: 2px solid #ffffff;
        height: 30px;
        font-size: 12px;
        padding: 0;
        text-align: center;
    }


.card {
    height: 15.33rem;
    color: #ffffff;
    font-family: 'Montserrat Light';
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0 0;
    border: none;
}

.card-body {
    padding: 1.25rem 0 0 0;
}

.card-title {
    font-family: 'Montserrat Bold';
    font-size: 3.06rem;
    position: absolute;
    bottom: 2.4rem;
    left: 0;
    width: 100%;
}

.card-text {
    margin: 0;
    height: 3.8em;
    vertical-align: middle;
}

.card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.33rem;
    background-color: rgba(0, 0, 0, 0.25);
}

.card-footer .btn {
    font-family: 'Montserrat Bold';
    font-size: 1.06rem;
    color: #ffffff;
    border: 2px solid #ffffff;
    background-color: transparent;
    padding: 0 1rem 0 1rem;
    opacity: 1;
}

#cardBackground-AssignedOnline {
    background-color: #80B192;
}
#cardBackground-AssignedOffline {
    background-color: #DA506D;
}
#cardBackground-AssignedInActive {
    background-color: #2AA7CA;
}
#cardBackground-Unassigned {
    background-color: #838383;
}
#cardBackground-Dealers {
    background-color: #235280;
}
#cardBackground-Users {
    background-color: #5593B3;
}
#cardBackground-Roles {
    background-color: #377B88;
}
#cardBackground-ListenerStatus {
    background-color: #598C6B;
}

.table thead {
    background-color: #9D9D9D;
    color: #003f78;
    font-family: 'Montserrat Medium';
    font-size: 0.93rem;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.centerCell {
    text-align:center;
}

.noWrap {
    white-space:nowrap;
}

.table {
    border-collapse: separate !important;        
}

.search {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.gridFooter a {
    border: none;
    text-decoration: underline;
    color: #5f5f5f;
    font-family: 'Montserrat Regular';
}

.gridFooter a:hover {
    border: none;
    text-decoration: underline;
    color: #5f5f5f;
    font-family: 'Montserrat Regular';
}

.toolbar {
    display:inline-flex;
    width:50%;
    justify-content:space-around;
}

.toolboxOnline {
    padding-right: 1rem;
}

.toolboxAssigned {
    padding-left: 1rem;
}

.table tbody {
    color: #5f5f5f;
    font-family: 'Montserrat Regular';
    font-size: 0.93rem;
}

.table a {
    color: #5f5f5f;
    font-family: 'Montserrat Regular';
    font-size: 0.93rem;
    text-decoration:underline;
    font-weight:bold;
}

.table tbody tr:nth-child(even) {
    background-color: #CCCCCC;
}

.table tbody tr:nth-child(odd) {
    background-color: #E1E1E1;
}

#WelcomeNav {
    font-family: 'Montserrat Light';
    text-transform: none;
}

#WelcomeNav > #welcomeText{
    font-family: 'Montserrat Medium';
}

#WelcomeNav > img {
    object-fit:scale-down;
}

.pgcontent {
    text-align: center;
    padding: 5px 5px 5px 5px;
}

.mAuto {
    margin:auto;
}
/****** Customize Dealer table *******************/
/*Removes title element to Align Edit Deletelinks as well as the "Dealer Home" link when the screen width forces it to be a child */
#dealerlist tbody > tr > td > ul > li:last-child > span.dtr-title,
#dealerlist tbody > tr > td > ul > li:nth-last-child(2) > span.dtr-title {
    display: none !important;
}

#dealerlist tbody > tr > td > ul > li:last-child > span.dtr-data > a {
    padding-right: 1em;
}

/*Override bootstrap default expanded parent icon color*/
#dealerlist_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
#dealerlist_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before {
    background-color: #205079 !important;
}

/********** Customize User Table *************/
#userlist > tbody > tr > td:last-of-type > a:first-of-type {
    padding-right: 1em;
}

/********** Performance and Historical Data Styles *************/

.collapsible-valve-box {
    font-family: 'Montserrat Light', Arial, sans-serif;
    font-size: 1rem;
    color: #fff;
}

.collapsible-valve-box .font-weight-bold,
.collapsible-valve-box strong {
    font-family: 'Montserrat Regular', Arial, sans-serif;
}

.collapsible-valve-box .btn{
    color: #fff;
    border-color: #fff;
}
.collapsible-valve-box p {
    margin-bottom: 0;
}

.collapsible-valve-box span.oi-warning {
    font-size: 2.25em;
    transform: scale(1.2, 1);
}

.collapsible-valve-box.status-error .valve-info > p:not(.font-weight-bold) {
    padding-left: .75em;
}

.collapsible-valve-box > div.container > div {
    min-height: 4.25em;
    padding-top: .5em;
    padding-bottom: .5em;
}

.collapsible-valve-box .valve-info-wrapper {
    padding-top: .5em;
    padding-bottom: .5em;
}

.collapsible-valve-box.info > div.container {
    background-color: #488e8e;
}

.collapsible-valve-box.info .valve-info-wrapper {
    background-color: #5cb6b6;
}

.collapsible-valve-box.status-warn > div.container {
    background-color: #deb224;
}

.collapsible-valve-box.status-warn .valve-info-wrapper {
        background-color: #b29020;
}

.collapsible-valve-box.status-error > div.container {
    background-color: #7d1d11;
}

.collapsible-valve-box.status-error .valve-info-wrapper {
    background-color: #9a4037;
}

.collapsible-valve-box.status-clear > div.container {
    background-color: #4c785d;
}

.collapsible-valve-box.status-clear .valve-info-wrapper {
    background-color: #629b78;
}

.valve-status-alarms {
    padding-top: 1em;
    padding-bottom: .5em;
}

.collapsible-valve-box .dropdown-toggle h1 {
    padding-bottom: 0;
}

.collapsible-valve-box .valve-info > p:last-of-type {
        margin-bottom: 0;
    }

.collapsible-valve-box .dropdown-toggle::after{
    content: none;
}

.performance-chart-section {
    padding-bottom: 1.5em;
}

.performance-section .general-data-buttons button {
    font-size: .9em;
    padding: .5em;
    letter-spacing: initial;
}

.performance-section .general-data-buttons button.active{
    background-color: #013f78;
    color: #fff;
    border-color: #013f78;
}

.performance-chart {
    background-color: #e1f9fb;
    margin-top: 1.5em;
    max-height: 285px;
}

table.daily-general-data > thead > tr > th {
    color: #fff;
    font-weight: normal;
    text-transform: capitalize;
}

table.daily-general-data > tbody > tr > th,
table.daily-general-data > thead > tr > th:first-child {
    color: #003F78;
}

table.daily-general-data a:after {
    content: none;
}

.hourly-usage-data .sub-row label {
    padding-left: initial;
    margin-bottom: 0;
}
.hourly-usage-data .sub-row label > span {
    color: #5f5f5f;
}

.hourly-usage-data table > tbody > tr:nth-of-type(odd) {
    background-color: #033e78;
}

.hourly-usage-data table > tbody > tr:nth-of-type(odd) > th {
    font-weight: normal;
}

.hourly-usage-data table > tbody > tr:nth-of-type(odd) > th,
.hourly-usage-data table > tbody > tr:nth-of-type(odd) > td {
    color: #fff;
}

.hourly-usage-data table > tbody > tr:nth-of-type(even) {
    background-color: #94c0e7;
}

.hourly-usage-data table > tbody > tr:nth-of-type(even) > th {
    color: #033e78;
}

table.regen-brine > thead > tr > th,
table.regen-brine > thead > tr > td {
    font-weight: normal;
    text-transform: capitalize;
}

table.regen-brine th, table.regen-brine td,
table.daily-general-data th, table.daily-general-data td {
    border-bottom: none;
    border-top: none;
}

table.regen-brine > thead > tr > th,
table.regen-brine > tbody > tr > th {
    color: #033e78;
}
table.regen-brine > thead > tr > td {
    color: #fff;
}

label.performance-wireless-value {
    color: #9d9d9d;
}

.performance-section-buttons {
    padding-top: 1.5em;
}

.dropdown-calendar {
    font-family: 'Montserrat Bold', Arial, sans-serif;
    border-radius: inherit;
    border: .15rem solid #9d9d9d;
    padding-left: .5em;
    color: #9d9d9d;
    text-transform: uppercase;
    background: inherit;
    cursor: pointer;
    text-align: left;
    display: inline-block;
    width: 100%;
    background-image: url('open-iconic/svg/caret-bottom-darkgray.svg');
    background-repeat:no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    background-size: 1em;
}

.mav-drive-value-desc{
    padding-left: 2.5rem;
}
/* Editor-specific styles*/
.editor-loading-shown .loading-overlay-content {
    vertical-align: inherit;
    background-image: url('images/Spinner-1s-200px.gif');
    background-repeat:no-repeat;
    background-position:center top;
    height:175px;
}

#Valvelist_filter > label > input {
    height: calc(1.8125rem + 2px);
}

/*Override bootstrap's default background styling on hover which is Transparent*/
main.body-content table.dataTable > tbody > tr.child:hover{
    background: #CCCCCC !important;
}

/* Overriding bootstrap default card style to fit card footer's link text on one line.*/
#WR_Cards .card-footer {
    padding-left: .25em;
    padding-right: .25em;
}

    #WR_Cards .card-footer a {
        padding-left: .33em;
        padding-right: .33em;
    }


input[type="checkbox"] {
    height: 24px;
    width: 24px;
}

.card-columns {
    column-gap: 0;
    -webkit-column-gap: 0;
}