/* style for sub menu drop down */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 3px;
    top: 40%;
}

.dropdown-submenu:hover .dropdown-menu,
.dropdown-submenu:focus .dropdown-menu {
    display: flex;
    flex-direction: column;
    position: absolute !important;
    margin-top: -30px;
    left: 100%;
}

@media (max-width: 992px) {
    .dropdown-menu {
        width: 50%;
    }

    .dropdown-menu .dropdown-submenu {
        width: auto;
    }
}

/* resize chips */
.chips {
    margin-bottom: 5px;
    padding-bottom: 0px;
    min-height: 30px;
}

.chip {
    margin-bottom: 3px; 
    height: 28px;
    line-height: 28px;
}

.chip .close {
    line-height: 28px;
}

.break-word {
    word-wrap:break-word;
}

/* add for log type drop down appears on top */
.dropdown-menu {
    z-index:2000;
}

.search-trigger {
    color: #e40b00;
}

.search-action {
    color: #00af1e;
}

.search-empty {
    color: rgba(66,66,66,.44);
}

/* this stops flickering of tooltips */
.tooltip {
    pointer-events: none;
}

.child_controls_last_change {
    font-size: 13px;
}

.device_panel_outter_div {
    padding: 3px;
}

.device_panel {
    background-color: #ffffff;
    height: 100%;
}

.device_panel_border {
    border: 1px solid #999999 !important;
}

.device_panel_name_text {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
}

.device_panel_feature_name_text {
    font-size: 14px;
    font-weight: bold;
    color: #004069;
}

.device_mic_icon {
    font-size: 14px;
}

.feature_row_border {
    border: 2px solid #999999 !important;    
}

.device_list_name_text {
    font-size: 1.3em;
    font-weight: bold;
}

.device_list_status_text_child {
    font-size: 16px; 
}

.device_list_name_text_child {
    font-size: 16px;
    font-weight: bold;
    color: #329de4;
}

.devices_date_time {
    font-size: 14px;
}

.devices_children_icon {
    font-size: 12px;
    //overflow-x: auto;
    overflow: hidden;
    white-space: nowrap;
}

.device_panel_location_text {
    font-size: 14px;
}

.device_panel_last_change_text {
    font-size: 14px;
    position: absolute;
    bottom: 4%;
    width: 100%;
}

.device_panel_last_change_text_list {
    font-size: 12px;
}

.btn {
    padding-top: .40rem;
    padding-right: .60rem;
    padding-bottom: 0.40rem;
    padding-left: .60rem;
    border-radius: 0.25rem;
}

.md-form {
    margin-top: 1.0rem;
    margin-bottom: .1rem;
}

.md-form-tight {
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.md-form.md-outline {
    margin-top: .7rem;
    margin-bottom: 0rem;
}

.select-wrapper+label {
    top: 1.5rem;
}

.select-wrapper+label.active {
    transform: translateY(-20px);
}

.select-wrapper, .mdb-select, .md-form .mdb-select {
    width: 100% !important;
    min-width: 0;
}

.modal-footer-wide {
    display: -ms-flexbox;
    /* display: flex; */
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    /* justify-content: flex-end; */
    padding: 1rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

/* font buttons */
.btn-default-clear {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #2B90D1;
}

.btn-cancel {
    background-color:rgba(66,66,66,.66);
    color:#fff;    
}

.btn-cancel:hover {
    color: #fff;
    background-color: rgba(66,66,66,.66);
}

.therm_current_temp {
    font-size: 2em;
}

.therm_current_heatsetpoint {
    font-size: 1.5em;
    color: red;
}

.therm_current_coolsetpoint {
    font-size: 1.5em;
    color: blue;
}

.fa-op {
    opacity: 0.3;
    cursor: pointer;
}

.fa-point {
    cursor: pointer;
}

.fa-move {
    cursor: move;
}

.fa-grabbing {
    cursor: grabbing;
}

.fa-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.fa-blank {
    visibility: hidden;
}

.tab-content {
    padding: 0rem 1rem 1rem;
}

#swatch {
    width: 80px;
    height: 80px;
    background-image: none;
}

#swatchc {
    width: 80px;
    height: 80px;
    background-image: none;
}

#red .ui-slider-range {
    background: #ef2929;
}

#red .ui-slider-handle {
    border-color: #ef2929;
}

#green .ui-slider-range {
    background: #8ae234;
}

#green .ui-slider-handle {
    border-color: #8ae234;
}

#blue .ui-slider-range {
    background: #729fcf;
}

#blue .ui-slider-handle {
    border-color: #729fcf;
}

.hs-toggle-checkbox {
    display: flex;
    margin-right: 0px;
    justify-content: left;
}

.hs-toggle-checkbox-label {
    margin-left: 8px;
    vertical-align: middle;
}

.hs-toggle-text {
    display: table-cell;
    text-align: left;
    font-size: 1rem;
}

.hs-toggle-control {
    display: table-cell;
    vertical-align: middle;
}

.hs-toggle {
    /*display: flex;*/
    justify-content: flex-end;
    align-items: center;
}

.hs-simple-footer {
    display: flex;
    justify-content: flex-end;
}

.top_bar {
    padding-bottom: 0.5rem !important;
    padding-top: 0.5rem !important;
}

.top_bar_text {
    color: white;
}

.header_title {
    color: white;
}

.log_text {
    font-size: 10pt;
    font-family: 'B612 Mono', monospace;
    line-height:normal;
}

.plugin-beta-text {
    font-size: 8pt;
    font-weight: bold;
}

.plugitems_featured {
    display: -webkit-box;
    overflow-x: auto;
    overflow-y: hidden;
    border-color: black;
    /*background-color: #f8f4f4;*/
}

.plugitem {
    min-width: 240px;
}

.plugitem_title {
    font-weight: bold;
    color: rgba(0,64,105,.88);
}

.plugitem_disabled {
    color: red;
}

.hs_pagenation {
    /*overflow:auto;*/
}

#loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

#loading2 {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

.hs_spinner_overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 99;
    text-align: center;
}

.hs_spinner {
    left: 50%;
    top: 50%;
    height: 100%;
}

.camcol {
    width: 400px;
    height: 400px;
}

.plug_enabled {
    color: green;
}

.plug_disabled {
    color: red;
}

.plug_details {
    color: #737373;
    font-weight: 700;
}

.featured_text {
    color: #737373;
    font-weight: bold;
}

.plug_row_disabled {
    opacity: .5;
}

.plug-short-desc {
    font-size:.8125em;
}

.plug-ver {
    font-size: .8125em;
    font-weight: bold;
}

.plug-name {
    font-size: .875em;
    font-weight: bold;
}

.info-icon {
    color: #888888;
}

.first-modal {
    z-index: 2000;
}

.second-modal {
    z-index: 2020;
}

.event-list-name {
    font-size: 1rem;
}

.event-list-trigger {
    font-size: .75rem;
}

.event_row_if_if {
    background-color: white;
}

.event_header {
    font-weight: bold;
    font-size: 14pt;
}

/*remove bottom line on and-or select*/
.select_and_or input.select-dropdown {
    border-bottom:0px;
}

.trigger-list {
    min-width: 16rem;
}

.number-input {
    max-width: 30px;
}

@media (max-width: 767px) {
    .hide_mobile {
        display: none;
    }
}



.card-body {
    padding:0rem;
}




.errormessage {
    color: red;
}

.fixedbutton {
    position: fixed;
    bottom: 0px;
    right: 0px;
}

.hs-fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;    
}

.hs-fixed-top-right {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

.hs-savebar-padding {
    padding-bottom: 70px;
}

@media (max-width: 576px) {
    input[type="range"]::-webkit-slider-thumb {
        transform: scale(1.6); /* makes thumb larger */
        box-shadow: 0 0 0 2px var(--lemon-green); /* box shadow works like a border */
        border-radius: 50%; /* makes box shadow/border a perfect circle ins shape */
    }

    input[type="range"]::-moz-range-thumb {
        transform: scale(1.5); /* makes thumb larger */
        box-shadow: 0 0 0 2px var(--lemon-green); /* box shadow works like a border */
        border-radius: 50%; /* makes box shadow/border a perfect circle ins shape */
    }
}
    /* Dashboards */

    

    .device_item_enabled {
        position: relative;
        cursor: pointer;
    }

        .device_item_enabled:after {
            content: '';
            background-image: url('bootstrap/fontawesome/svgs/solid/eye.svg');
            background-repeat: no-repeat;
            position: absolute;
            justify-content: center;
            align-content: center;
            top: 0px;
            left: 50%;
            width: 100%;
            height: 100%;
            opacity: 0.2;
            display: inline-block;
        }

    .device_item_disabled {
        position: relative;
        opacity: .5;
        cursor: pointer;
    }

        .device_item_disabled:after {
            content: '';
            background-image: url('bootstrap/fontawesome/svgs/solid/eye-slash.svg');
            background-repeat: no-repeat;
            position: absolute;
            justify-content: center;
            align-content: center;
            top: 0px;
            left: 50%;
            width: 100%;
            height: 100%;
            opacity: 0.2;
            display: inline-block;
        }


    /* styles from HS3 that are used by HS3 plugins in the UI */
    .event_Txt_Selection {
        color: #000080;
    }

    .event_Txt_Error {
        color: #FF0000;
    }

    .jqDropList {
        display: block !important;
    }

    .poll-text {
        font-size: 12px;
    }

    .hs-text2line {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .fa-stack[data-count]:after {
        position: absolute;
        right: 20%;
        top: 10%;
        content: attr(data-count);
        font-size: 45%;
        padding: .6em;
        border-radius: 50%;
        line-height: .8em;
        color: white;
        background: rgba(255,0,0,.85);
        text-align: center;
        min-width: 1em;
        font-weight: bold;
    }

    /* dashboards */

    .grid {
        margin: 0 auto;
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
        width: 100%;
    }

    .grid-item {
        float: left;
        border: 1px solid;
        border-color: black;
        border-radius: .25rem;
        width: 300px;
        overflow: hidden;
    }

.color-square-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: inline-block;
}
     

@media only screen and (max-width: 600px) {
    .grid-item {
        float: left;
        width: 100%;
        //height: 100%;
        overflow: hidden;
    }

    .grid {
        width: 98% !important;        
    }    
}


    .grid-row-col {
        overflow: hidden; 
        margin-top: 4px;
    }
    
    .grid-row-col-outer {
        padding: 3px;
    }

    .grid-row-col-item {
        border: 1px solid #999999
        border-color: black;
        border-radius: .25rem;
        height: 100%;
    }
         
    .dashboard_card_section_title {
        font-size: 16px;
        font-weight: bold;
    }

    .btn-success.dropdown-toggle {
        background-color: #00af1e !important;
    }



    /* CHANGES BELOW WILL OVERRIDE STYLES ABOVE AND IN OTHER STYLE SHEETS */

    /* Position-Size Style Changes Only */

    /* based on the standard modal header but allows for multiple lines */
    .hs-modal-header {
        display: -ms-flexbox;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 1rem 1rem;
        border-bottom: 1px solid #dee2e6;
        border-top-left-radius: .3rem;
        border-top-right-radius: .3rem;
    }

    .homeseer-skin .dropdown .dropdown-menu a {
        color: #000;
    }
    .homeseer-skin .btn-cancel {
        background-color: #329de4 !important;
        color: #fff;
    }

    .side-nav > ul {
        max-height: 95vh; /* fixes last menu item getting cut off on slide out menu */
    }

    .side-nav .collapsible a {
        color: #fff;
        font-weight: 400;
        font-size: 1rem;
        height: 36px;
        line-height: 36px;
    }

    .fa-1x {
        font-size: 1.4em;
    }


    .no-gutters > .col,
    .no-gutters > [class*="col-"] {
        padding-right: .2em;
        padding-left: .5em;
    }

    .streakhs {
        height: auto;
        padding-left: .5rem;
        margin-top: 1rem;
        margin-bottom: .5rem;
        padding-bottom: .2rem;
        padding-top: .2rem;
        font-size: 16px;
        font-weight: bold;
        color: #636363;
    }

    @media (min-width: 576px) {
        .col-sm {
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
            padding-bottom: .3em;
            padding-top: .3em;
        }

        .device_panel_location_text {
            font-size: 16px;
        }
    }