body {
    font-family: "Source Sans Pro", sans-serif !important;
}

.sm-m-top {
    margin-top: 1em;
}

.m-m-top {
    margin-top: 3em;
}

.lg-m-top {
    margin-top: 5em;
}

#receiveAlerts {
    margin-left: 0;
    margin-left: 20px;
    width: 25px;
    top: 3px;
    height: 20px;
}

.dropdownLabel {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    font-size: 15px;
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}

.content-wrapper {
    background-color: #000;
}

#filterDropdown.ui.dropdown {
    font: 14px 'Source Sans Pro', sans-serif;
    height: 30px;
    width: 150px;
    padding-top: 3px;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    color: #000;
    z-index: 9999;
    margin-left: 15px;
}

button#loginBtn.btn.btn-primary.pull-right {
    margin-right: 17px !important;
}

legend.mdi-action-account-box {
    padding-left: 10px;
    padding-right: 10px;
}

span#closeX {
    color: #2F4F4F;
    padding-top: 2px;
    font-size: 22px;
    font-weight: 100;
    float: right;
    cursor: pointer;
}

    span#closeX:hover {
        color: #FFFFFF;
    }

div.deviceBox {
    min-width: 9.5%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 15px;
    margin-right: 12px;
    text-align: center;
}

#devices.small-box {
    background-color: #3C8DBC;
}

#devices div.small-box-footer {
    background-color: rgb(19, 126, 153);
    height: 25px;
}

a.dropdown-toggle {
    height: 50px;
}

ul.dropdown-menu {
    border-radius: 0;
    margin-top: 0px;
}

.user-footer div.content {
    min-height: 45px;
    padding: 2px;
}

.content a.btn.btn-flat {
    border-radius: 2px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 35px;
}

ol.notificationsList {
    list-style-type: decimal;
    font: 20px Calibri;
}

    ol.notificationsList li {
        font-family: 'Source Sans Pro', sans-serif;
        line-height: 1.5em;
    }

#addClientButtons button {
    font-family: 'Source Sans Pro', sans-serif;
    margin-right: 5px;
}

.col-sm-4.button-custom {
    margin-left: 28px;
}

.box-body.client-form, .box-body.signup-form {
    padding: 30px;
}

.box-footer.client-form, .box-footer.signup-form {
    padding-right: 30px;
}

.ui.fluid.dropdown.client-select {
    min-height: 50px;
    max-height: 200px;
}

.help-block {
    color: red;
}

.ui.basic.button.addDevice {
    padding: 5px;
    margin-left: 8px;
    background: #ddd !important;
}

.special-alignment {
    padding-top: 1px;
    margin: 0 !important;
    color: #67676b;
}

div.breadcrumb {
    font-size: 14px !important;
}

.main-sidebar.sidebar-collapse.blackmenu {
    z-index: 1000;
    height: 100%;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/**************** LOGIN FORM STYLES START HERE ******************/
.well.bs-component {
    margin: auto;
}

.registerfail {
    display: none;
}

/*.login-wrapper {
    margin-left: -240px;
}*/

fieldset {
    border: none;
}

.well.bs-component {
    padding-top: 40px;
    width: 100%;
}
/**************** LOGIN FORM STYLES END HERE   ******************/

.main-footer {
    Bottom: 0;
    position: absolute;
    width: 100%;
    margin: 0;
    padding: 6px;
    background-color: black;
    border-top: none;
}

a.sidebar-toggle {
    display: none;
}

.skin-black .wrapper {
    background-color: black !important;
}

.loginError {
    color: red;
    float: left;
}

.canvasChart {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 140px;
}

    .canvasChart > div {
        height: 150px;
    }

.toaster {
    margin-top: 0;
    opacity: 1 !important;
}


#toast-container > div {
    width: 240px;
    padding: 15px 2px 15px 35px;
}

    #toast-container > div > div.ng-binding.toast-title {
        text-align: center;
    }

.canvasjs-chart-credit {
    display: none;
}

ul.custom-menu.mobile {
    display: none;
}

/* =============
   MAP STYLES
================*/
i.redMarker {
    z-index: 9999;
    color: red;
}

i.greenMarker {
    color: green;
}

.map .container {
    position: relative;
}

#map-canvas {
    height: 89vh;
}

.gm-style-iw {
    width: 160px !important;
    top: 15px !important;
    left: 15px !important;
    height: 103px;
    background-color: #fff;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 5px 5px;
}

#iw-container {
    margin-bottom: 10px;
}

    #iw-container p {
        color: #000;
        margin-left: 5px;
        font-family: "Source Sans Pro", sans-serif;
        width: 153px;
    }

/*=================
    MAP STYLES END
==================*/

.confirmDelete {
    padding-left: 6px;
}

.modal-content2 {
    border-radius: 5px;
    background-color: blue;
}

.ui.breadcrumb.icon.divider {
    color: red;
}


.padding-50 {
    padding: 100px;
    background-color: #bfbfbf;
    margin-right: -9px;
}

.content {
    min-height: 0 !important;
}

.float-right {
    float: right;
}

.motheraccodion > .content {
    padding-bottom: 5px !important;
}

.text-center {
    text-align: center !important;
}

.client-heading i {
    margin: 0 !important;
}

.client-heading button {
    margin-left: 50px !important;
}

.adminusers, .client, .adminunits, .changepassword {
    max-width: 900px;
    margin: auto !important;
    font-size: 1.2em !important;
    background-color: #b5b5b5 !important;
    border-radius: 10px;
}

    .adminusers .popup ul, .adminunits .popup ul {
        padding-left: 0;
    }

    .adminusers .popup li, .adminunits .popup li {
        list-style: none;
        padding-top: 10px;
    }

    .adminusers a, .adminunits a, .ui.form .field > label {
        color: #67676b;
        font-size: 1.1em;
    }

.content.black, .main-sidebar.blackmenu, .content-header.black, .navbar.navbar-static-top.blackheader,
.skin-black .sidebar-menu > li.header, .skin-black .main-header .navbar, .content-header.text-center.black {
    background-color: black !important;
}

h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: Black;
}

.content-header > h1.title {
    color: #bfbfbf;
}

.box.box-info.lightgrey, .box.box-group.lightgrey {
    background: #67676b;
}

.box-header.black, #login {
    color: black;
}

.right.chevron.icon.divider.greybreadcrumb {
    color: #999;
}

.well.bs-component.lightgrey {
    background-color: #ddd;
}

div .user.user-menu:hover {
    background-color: #67676b;
}

.dropdown-menu.newStyling {
    background-color: #000;
    border-color: #67676b;
    padding-right: 25px;
}

.dropdown-menu > li > a {
    padding: 2px 35px;
    text-align: center;
}

.nav > li > a {
    padding: 15px;
}

.addunit select {
    width: 100%;
}

.uniterrormessage {
    display: none;
}

.padding-bottom-20 {
    padding-bottom: 20px;
}

.ui.modal {
    height: auto;
}

.changepassword {
    max-width: 600px;
}

    .changepassword .negative.message, .changepassword .positive.message {
        display: none;
    }

    .changepassword .field {
        height: auto;
    }

        .changepassword .field > div {
            margin-bottom: 25px;
            padding-right: 0;
        }

    .changepassword .submitbuttons {
        padding-bottom: 50px;
    }

.btn.btn-primary.float-right.wait {
    margin-right: 5px;
}

#pwstrength {
    list-style-type: none;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    #pwstrength li {
        float: left;
        margin: 10px 10px 0 0;
        width: 35px !important;
        height: 5px;
    }

.client .indicators i {
    display: none;
}

.margin-left-10 {
    margin-left: 5px;
}

.register-user-button-custom {
    margin-right: 20px;
}

a {
    color: #b8c7ce;
}


.sidebar-menu.custom-menu a,
.navbar-custom-menu a {
    color: #bfbfbf !important;
}

div.navbar-custom-menu > li {
    z-index: 9999;
}

    .sidebar-menu.custom-menu a.menu-links:hover, .sidebar-menu.custom-menu a.menu-links:focus,
    nav.blackheader > div.navbar-custom-menu a:hover,
    nav.blackheader > div.navbar-custom-menu a:focus,
    nav.blackheader > div.navbar-custom-menu a:active,
    nav.blackheader > div.navbar-custom-menu .open > a,
    nav.blackheader > div.navbar-custom-menu .open > a:hover,
    nav.blackheader > div.navbar-custom-menu .open > a:focus {
        color: #000 !important;
        background-color: #bfbfbf;
        
    }


.logo img {
    vertical-align: initial;
}

.select2-search__field {
    border: none !important;
}

.select2-selection__choice {
    color: #000000 !important;
    font-size: 1.15em !important;
}

.ui.dropdown.custom-dropdown {
    padding: 2px 14px;
    height: 48.1875px;
}

.ui.popup li > a:hover {
    border-bottom: 1px solid #bfbfbf;
    border-bottom-width: medium;
}

/*==========================
    BOOTSRAP MODAL OVERRIDES
============================*/

.modal {
    text-align: center;
    padding: 0 !important;
}

    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: '';
        height: 100%;
        margin-right: -4px; /* Adjusts for spacing, prevents jump to bottom */
    }

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    margin: 0 auto;
}

/*Add scroll bar when modal too big*/
.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

/*=======================
 SEMANTIC MODAL OVERRIDES
========================*/
.modal.deleteconfirm {
    position: relative;
    margin-top: -250px !important;
}

    .modal.deleteconfirm p {
        font-size: 18px;
    }

.ui.modal .actions.btn-centered {
    text-align: center !important;
}

/*====================
    TOASTER OVERRIDES
======================*/

.toast-close-button {
    right: 0 !important;
}

div.toast-message {
    text-align: center;
}

#toast-container > .toast-error {
    opacity: 1;
}

.unitHeader {
    color: #BFBFBF;
    z-index: 1030;
    float: right;
    position: absolute;
    top: -1%;
    left: 410px;
    font-size: 15px;
    font-weight: bold;
}


/*===============
    MEDIA QUERIES
================= */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {

    .login-wrapper {
        margin: auto;
    }

    .well.bs-component {
        max-width: 600px;
    }
}

@media only screen and (min-width : 1824px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 30%;
        float: right;
        margin-right: 41px;
    }

    .login-wrapper {
        margin: auto;
    }
}

@media only screen and (min-width : 1365px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 30%;
        float: right;
        margin-right: 41px;
    }

    .login-wrapper {
        margin-left: -230px;
    }

    .well.bs-component {
        padding-top: 40px;
        width: 95%;
    }
}

@media only screen and (min-width : 1225px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 30%;
        float: right;
        margin-right: 0px;
    }

    .well.bs-component {
        padding-top: 40px;
        width: 95%;
    }
}

@media only screen and (min-width : 1025px) and (max-width : 1224px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 30%;
        float: right;
        margin-right: 0px;
    }

    .login-wrapper {
        margin-left: -230px;
    }

    .well.bs-component {
        padding-top: 40px;
        width: 92%;
    }
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 30%;
        float: right;
        margin-right: 0px;
    }
    .login-wrapper {
         margin-left: -230px;
    }

}

@media only screen and (max-width: 767px) {
    ul.custom-menu.desktop-view {
        display: none;
    }

    ul.custom-menu.mobile {
        display: block;
    }

    #filterDropdown.ui.dropdown {
        position: relative;
        margin-left: 15px;
        margin-bottom: 10px;
        width: 119px;
    }

    .unitHeader {
        display: inline;
        position: relative;
        bottom: -10px;
        left: 0;
        float: none;
        z-index: 1000;
    }
}

#loginBtn {
    padding: 5px 15px;
    width: 50%;
    height: 30px;
    margin: 0 auto;
}

.well.bs-component {
    width: 95%;
}

a.sidebar-toggle {
    display: block;
    color: #b8c7ce;
}

/*.login-wrapper {
    margin-left: -230px;
}*/

.main-header .navbar-custom-menu {
    position: absolute;
    right: 0;
    color: #B8C7CE !important;
    min-width: 150px;
    display: block !important;
}

@media only screen and (min-width: 501px) and (max-width: 767px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 30%;
        float: right;
        margin-right: 0px;
    }
}

@media only screen and (min-width: 460px) and (max-width: 500px) {
    #loginBtn {
        padding: 8px 15px;
        margin-bottom: -8px;
        width: 90%;
        float: right;
        margin-right: 38px;
    }
}

@media only screen and (min-width: 374px) and (max-width: 459px) {
    #loginBtn {
        padding: 5px 15px;
        width: 99%;
        height: 30px;
        margin-right: 0px;
    }
}

@media only screen and (min-width: 321px) and (max-width: 374px) {
    #loginBtn {
        padding: 5px 15px;
        margin-bottom: -8px;
        width: 99%;
        height: 30px;
        float: right;
        margin-right: 0px;
    }
}

@media only screen and (max-width: 320px) {
    #loginBtn {
        width: 100%;
    }
}