@font-face {
    font-family: 'Proxima Nova';
    src: url("../fonts/ProximaNova-Regular.otf"), url("../fonts/proximanova-regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'Proxima Nova';
    src: url("../fonts/ProximaNova-Bold.otf"), url("../fonts/proximanova-bold-webfont.woff") format("woff");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: 'fontello';
    src: url("../fonts/fontello.eot?47721513");
    src: url("../fonts/fontello.eot?47721513#iefix") format("embedded-opentype"), url("../fonts/fontello.woff2?47721513") format("woff2"), url("../fonts/fontello.woff?47721513") format("woff"), url("../fonts/fontello.ttf?47721513") format("truetype"), url("../fonts/fontello.svg?47721513#fontello") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'Primer';
    src: url("../fonts/primer-bold.ttf");
    font-weight: bold;
    font-style: normal;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}

.btn-primary {
    border: 0 none;
}

.logout-spin {
    margin-left: 15px;
}

.moon-skin .btn-primary {
    background: #48233C;
}

.moon-skin .call-help-desk {
    color: #48233C;
}

.aqua-skin .btn-primary {
    background: #283D3B;
}

.aqua-skin .call-help-desk {
    color: #283D3B;
}

.cherryrot-skin .btn-primary {
    background: #c04848;
}

.cherryrot-skin .call-help-desk {
    color: #c04848;
}

.titanium-skin .btn-primary {
    background: #252525;
}

.titanium-skin .call-help-desk {
    color: #252525;
}

.moss-skin .btn-primary {
    background: #134e5e;
}

.moss-skin .call-help-desk {
    color: #134e5e;
}

.couple-skin .btn-primary {
    background: #3a6186;
}

.couple-skin .call-help-desk {
    color: #3a6186;
}

.lawrencium-skin .btn-primary {
    background: #0f0c29;
}

.lawrencium-skin .call-help-desk {
    color: #0f0c29;
}

.courtain-skin .btn-primary {
    background: #4c0001;
}

.courtain-skin .call-help-desk {
    color: #4c0001;
}

.relay-skin .btn-primary {
    background: #3a1c71;
}

.relay-skin .call-help-desk {
    color: #3a1c71;
}

.forest-skin .btn-primary {
    background: #093028;
}

.forest-skin .call-help-desk {
    color: #093028;
}

.premiumblack-skin .btn-primary {
    background: #434343;
}

.premiumblack-skin .call-help-desk {
    color: #434343;
}

.icon-notification:before {
    content: '\e800'
}

.icon-logout:before {
    content: '\e801'
}

.icon-home:before {
    content: '\e802'
}

.icon-history:before {
    content: '\e803'
}

.icon-help:before {
    content: '\e804'
}

html {
    min-height: 100%;
    position: relative
}

body {
    font-family: 'Proxima Nova';
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    min-height: 100%;
    padding: 0 !important;
    background-image: url('../img/login-bg.jpg');
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.service-pay-modal {
    font-family: 'Proxima Nova';
    color: black;
}

textarea.no-h-resize {
    resize: vertical;
}

.overlay {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.1);
    z-index: -2;
    position: absolute;
    right: 0;
    top: 0;
}

.overlay.login {
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.2);
    z-index: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.underline {
    border-bottom: 1px solid #FFFFFF;
}

.stretch-height {
    height: 140%;
}

body.aqua-skin {
    background-image: url('../img/background/lake-skin.jpg');
}

body.moon-skin {
    background-image: url('../img/background/moon-skin.jpg');
    background-position: bottom center;
}
 
body.cherryrot-skin {
    background-image: url('../img/background/cherryrot-skin.jpg');
}

body.titanium-skin {
    background-image: url('../img/background/titanium-skin.jpg');
}

body.moss-skin {
    background-image: url('../img/background/moss-skin.jpg');
}

body.lawrencium-skin {
    background-image: url('../img/background/lawrencium-skin.jpg');
}

body.courtain-skin {
    background-image: url('../img/background/courtain-skin.jpg');
}

body.couple-skin {
    background-image: url('../img/background/couple-skin.jpg');
}

body.relay-skin {
    background-image: url('../img/background/relay-skin.jpg');
    background-position: bottom center;
}

body.forest-skin {
    background-image: url('../img/background/forest-skin.jpg');
}

body.premiumblack-skin {
    background-image: url('../img/background/pblack-skin.jpg');
}

body.fire-alarm,
body.flood-alarm {
    overflow: hidden !important
}

a {
    /* color: #3bb7f7; */
    color: #FFF;
    text-decoration: none
}

a:hover,
a:focus,
a:active {
    color: #FFF;
    outline: none;
    text-decoration: none
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}

.ph-0 {
    padding-left: 0;
    padding-right: 0;
}

.is-flex {
    display: flex;
}

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

.flex-sa {
    justify-content: space-around;
}

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

.is-pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

#mobile-skin-info {
    display: none;
}

.page-container {
    margin-left: 200px;
    padding: 30px 95px 200px;
    position: relative;
    min-height: 1000px;
    height: 100%;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-0 {
    margin-left: 0;
}

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

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

.ml-20 {
    margin-left: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.login-bgd {
    background: url("../img/login-bg.jpg") center no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.ie-text {
    font-size: 26px;
    margin: 100px 0;
    padding: 0 60px;
    text-align: center;
    color: #fff;
    position: relative
}

.login-container {
    width: 360px;
    margin: 90px auto;
    position: relative;
    z-index: 1;
    padding: 0
}

.login-container .logo {
    text-align: center;
    margin: 0 0 70px
}

.login-container .form-control {
    background: transparent;
    border-radius: 0;
    border: 0 none;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
    height: 50px;
    padding: 6px 18px;
    color: #fff;
    font-size: 16px;
    box-shadow: none;
    transition: border-width .5 ease, font-size .5s ease, border-color .5s ease;
}

.login-container .form-control:focus,
.login-container .form-control:active {
    box-shadow: none;
    border-color: #3cb6f8;
    font-size: 18px;
    border-width: 2px;
    transition: border-width .5s ease, font-size .5s ease, border-color .5s ease;
}

.login-container .form-control.has-error {
    border-color: #f89b98
}

.login-container .error,
.login-container .form-error {
    margin-bottom: 20px;
    color: #f89b98;
    font-size: 13px;
    padding-left: 20px;
    margin-top: -15px
}

.login-container .btn-primary {
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    height: 50px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 35px;
    border: 1px solid #fff;
    transition: border-width .5s ease, background 0.5s ease, color 0.5s ease, box-shadow .5s ease;
}

.login-container .btn-primary:focus {
  outline: 0;
}

.login-container .btn-primary:hover,
.login-container .btn-primary:active {
    background: #3cb6f8;
    border-color: #3cb6f8;
    border-width: 2px;
    box-shadow: 0 0 5px rgba(0,0,0,.1);
    transition: border-width .5s ease, background 0.5s ease, color 0.5s ease, box-shadow .5s ease;
}

.login-container .recover-pass {
    text-align: center
}

.login-container .recover-pass a:hover {
    text-decoration: underline;
    color: #209dde
}

.login-container .android-link {
    width: 240px;
    padding-top: 40px;
    display: block;
    margin: auto
}

.login-container .android-link .android-logo {
    height: auto;
    width: 240px
}

input[placeholder]::-webkit-input-placeholder {
    color: #becad6
}

input[placeholder]::-moz-placeholder {
    color: #becad6
}

@media screen and (max-width: 400px) {
    .login-container {
        width: 100%;
        padding: 0 20px;
        margin: 50px 0 0
    }
    .login-container .logo {
        margin: 0 0 50px
    }
}

header {
    height: 60px;
    background: #3a5068;
    position: relative;
    box-shadow: 1px 1px 2px #000;
}

header .logo {
    margin: 0;
    width: 200px;
    height: 60px
}

header .logo a {
    display: inline-block
}

header .logo img {
    display: inline-block;
    margin: 15px 0 0 45px
}

header .WSConnectionStatus-desktop {
    position: relative;
    width: 25px;
    margin: 20px 40px 0 0;
}

header .flyout-wsStatus {
    position: absolute;
    margin: 20px 0 0 auto;
    background: #001a2a;
    /* background: #3a5068; */
    overflow: hidden;
    z-index: 10000;
    display: none;
    right: 10px;
}
/* header .WSConnectionStatus-desktop:hover + .flyout-wsStatus {
    display: block;
} */

header .profile-info .user-name {
    line-height: 60px;
    margin-right: 40px;
    color: #fff;
}

header .alert-content {
    position: relative;
    margin: 19px 20px 0 0
}

header .alert-content a {
    display: inline-block;
    color: #fff
}

header .alert-content a:hover {
    color: #fff
}

header .icon-notification {
    font-size: 22px
}

header .notification-icon {
    border-radius: 50%;
    border: 2px solid #fff;
    background: #3bb7f7;
    position: absolute;
    right: -5px;
    top: -1px;
    width: 18px;
    height: 18px;
    display: inline-block;
    text-align: center;
    font-size: 9px;
    line-height: 14px
}

.modal.alert-modal {
    padding: 0 !important
}

.modal.alert-modal .modal-body {
    padding: 30px 40px 30px 30px
}

.modal.alert-modal .modal-body p {
    color: #3a5068
}

.modal.alert-modal .modal-body .door-lock-text {
    text-align: center;
    font-weight: 600;
    margin-bottom: 30px
}

.modal.alert-modal .modal-body .door-lock-buttons {
    text-align: center
}

.modal.alert-modal .modal-body .lock-true,
.modal.alert-modal .modal-body .lock-false {
    display: inline-block;
    line-height: 40px;
    padding: 0 30px;
    font-size: 16px;
    border-radius: 20px;
    background: #3bb7f7;
    color: #fff;
    margin: 0 10px
}

.modal.alert-modal .modal-body .lock-false {
    background: #becad6
}

.modal.alert-modal .modal-body .close-btn-wrapper {
    text-align: center;
    margin: 0
}

.modal.alert-modal .modal-body .close-btn-wrapper .close-modal {
    display: inline-block;
    border: 1px solid #3bb7f7;
    border-radius: 6px;
    padding: 0 15px;
    line-height: 30px;
    font-size: 14px
}

.modal.help-desk-modal {
    padding: 0 !important;
    color: #000
}

.modal.help-desk-modal .modal-header .close {
    margin-top: 3px
}

.modal.help-desk-modal .modal-body {
    padding: 30px;
    font-weight: 600
}

.modal.help-desk-modal .modal-body .form-label {
    font-size: 14px;
    font-weight: 400;
}

.logo-responsive {
    display: none !important;
}

.responsive-menu-icon {
    display: none;
    float: left;
    background: url("../img/menu-inactive.png") left top no-repeat;
    background-size: contain;
    width: 24px;
    height: 20px;
    margin: 20px 0 0 20px
}

.call-help-desk {
    margin-top: 12px;
    font-weight: 300
}


@media screen and (max-width: 995px) {
    header {
        opacity: .9;
    }
    header .fa-comment-o {
        color: #fff;
    }
    header .logo {
        border: 0;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        top: 0;
        width: auto
    }
    header .logo .logo-responsive {
        margin-left: 0
    }
    header .logo .logo-responsive,
    .responsive-menu-icon {
        display: block !important;
    }
    header .logo .logo-desktop,
    .profile-info .user-name {
        display: none
    }    
}


.offer-open {
    color: #fff !important;
}

nav {
    width: 200px;
    height: 100%;
    height: calc(100% - 60px);
    position: absolute;
    left: 0;
    top: 60px;
    background: rgba(0,0,0,0.8);
    padding-top: 15px;
    padding-left: 3px;
    padding-right: 3px;
}

nav ul {
    margin: 0;
    padding: 0 20px;
    list-style-type: none;
    width: 200px
}

nav ul li {
    line-height: 50px
}

nav ul li [class^="icon-"]:before {
    width: 22px;
    text-align: left
}

nav a {
    color: #becad6
}

nav a.active,
nav a:hover,
nav a:active,
nav a:focus {
    color: #fff
}

.bg-danger {
    padding: 10px;
    border-radius: 4px;
    font-weight: 400;
    font-size: 13px;
    margin-bottom: 10px;
    color: #bc3232
}

.mobile-nav {
    display: none
}

.mobile-nav .user-name {
    width: 200px;
    padding: 0 20px 15px;
    border-bottom: 1px solid #737f8c
}

a.dashboard-edit,
a.plan-edit {
    display: none;
    font-size: 14px
}

a.dashboard-edit:focus {
    color: #becad6
}

a.dashboard-edit.active {
    color: #ffffff
}

@media screen and (max-width: 995px) {
    .desktop-nav {
        display: none
    }

    .mobile-nav {
        left: -200px;
        top: 0;
        height: 100%;
        border: 0;
        overflow: hidden
    }

    .page-container {
        margin: 0
    }

    .service-description {
        margin-left: 15px;
    }

    .service-button {
        display: block;
        width: calc(100% - 30px);
    }

}

#module-list,
.temperature-slider,
#module-temp-list #invoice-item-list,
#increase-temp,
#decrease-temp {
    display: none
}

.panels-row .panel {
    border-radius: 5px;
    overflow: hidden;
    padding: 0;
    border: 0;
    margin-bottom: 30px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}

.panels-row .panel .panel-header {
    position: relative;
    padding: 20px
}

.panels-row .panel .panel-header h2 {
    font-size: 20px;
    margin: 0
}

.panels-row .panel .panel-header p {
    font-size: 13px;
    margin: 0
}

.panels-row .panel .panel-header .lightbulb {
    width: 52px;
    height: 58px;
    position: absolute;
    top: 12px;
    right: 20px
}

.panels-row .panel .panel-header .scenario {
    width: 52px;
    height: 58px;
    position: absolute;
    top: 12px;
    right: 20px
}

.panels-row .panel .panel-header .scenario.active {
    width: 52px;
    height: 58px;
    position: absolute;
    top: 12px;
    right: 20px
}

.panels-row .panel .panel-header .sensor-icon {
    width: 56px;
    height: 33px;
    position: absolute;
    top: 25px;
    right: 20px
}

.panels-row .panel .panel-header .sensor-icon.active {
    width: 56px;
    height: 33px;
    position: absolute;
    top: 25px;
    right: 20px
}

.panels-row .panel .panel-header .dash-icon.plug-icon {
    width: 56px;
    height: 50px;
    position: absolute;
    top: 19px;
    right: 20px
}

.panels-row .panel .panel-header .plug-icon.active {
    width: 56px;
    height: 50px;
    position: absolute;
    top: 19px;
    right: 20px
}

.panels-row .panel .panel-header .temperature-value {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 42px;
    font-weight: 600;
    line-height: 60px;
    width: 80px
}

.panels-row .panel .panel-header .temperature-value sup {
    color: #3bb7f7;
    font-size: 16px;
    top: auto;
    vertical-align: super;
    margin-left: 5px;
    font-weight: 400
}

.panels-row .panel .panel-header .last-invoice {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 42px;
    font-weight: 600;
    line-height: 60px;
    width: 130px
}

.panels-row .panel .panel-header .last-invoice sup {
    font-size: 16px;
    top: auto;
    vertical-align: super;
    margin-left: 5px;
    font-weight: 400
}

.panels-row .panel .panel-header .last-invoice .currency {
    font-size: 16px;
    color: #3bb7f7;
    font-weight: 400;
    line-height: 20px;
    margin-top: 28px;
    margin-left: 5px
}

.panels-row .panel .panel-body {
    margin: 0 20px;
    padding: 0 0 20px;
    border-top: 1px solid #737f8c
}

.panels-row .panel .panel-body .module-type-light,
.panels-row .panel .panel-body .module-type-scenario,
.panels-row .panel .panel-body .module-type-sensor,
.panels-row .panel .panel-body .module-type-input,
.panels-row .panel .panel-body .module-type-plug,
.panels-row .panel .panel-body .module-type-door {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #737f8c
}

.panels-row .panel .panel-body .module-type-temp {
    padding: 5px 0;
}

.panels-row .panel .panel-body .module-type-light:last-child,
.panels-row .panel .panel-body .module-type-scenario:last-child,
.panels-row .panel .panel-body .module-type-sensor:last-child,
.panels-row .panel .panel-body .module-type-input:last-child,
.panels-row .panel .panel-body .module-type-plug:last-child,
.panels-row .panel .panel-body .module-type-temp:last-child,
.panels-row .panel .panel-body .module-type-door:last-child {
    border: 0;
    padding-bottom: 0
}

.panels-row .panel .panel-body .module-type-light .module-name,
.panels-row .panel .panel-body .module-type-scenario .module-name,
.panels-row .panel .panel-body .module-type-sensor .module-name,
.panels-row .panel .panel-body .module-type-input .module-name,
.panels-row .panel .panel-body .module-type-plug .module-name,
.panels-row .panel .panel-body .module-type-temp .module-name,
.panels-row .panel .panel-body .module-type-door .module-name {
    font-size: 16px;
    color: #becad6;
    float: left;
    width: calc(100% - 40px)
}

.panels-row .panel .panel-body .module-type-light .module-name.active,
.panels-row .panel .panel-body .module-type-scenario .module-name.active,
.panels-row .panel .panel-body .module-type-sensor .module-name.active,
.panels-row .panel .panel-body .module-type-input .module-name.active,
.panels-row .panel .panel-body .module-type-plug .module-name.active,
.panels-row .panel .panel-body .module-type-temp .module-name.active,
.panels-row .panel .panel-body .module-type-door .module-name.active {
    color: #fff
}

.panels-row .panel .panel-body .module-type-light .edit-c,
.panels-row .panel .panel-body .module-type-scenario .edit-c,
.panels-row .panel .panel-body .module-type-sensor .edit-c,
.panels-row .panel .panel-body .module-type-input .edit-c,
.panels-row .panel .panel-body .module-type-plug .edit-c,
.panels-row .panel .panel-body .module-type-temp .edit-c,
.panels-row .panel .panel-body .module-type-door .edit-c {
    display: none;
    margin: -5px 0
}

.panels-row .panel .panel-body .module-type-light .edit-c a.btn,
.panels-row .panel .panel-body .module-type-scenario .edit-c a.btn,
.panels-row .panel .panel-body .module-type-sensor .edit-c a.btn,
.panels-row .panel .panel-body .module-type-input .edit-c a.btn,
.panels-row .panel .panel-body .module-type-plug .edit-c a.btn,
.panels-row .panel .panel-body .module-type-temp .edit-c a.btn,
.panels-row .panel .panel-body .module-type-door .edit-c a.btn {
    display: none;
    float: right;
    width: 15%;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-top: 2px
}

.panels-row .panel .panel-body .module-type-light .edit-c a.btn .fa-spinner,
.panels-row .panel .panel-body .module-type-scenario .edit-c a.btn .fa-spinner,
.panels-row .panel .panel-body .module-type-sensor .edit-c a.btn .fa-spinner,
.panels-row .panel .panel-body .module-type-input .edit-c a.btn .fa-spinner,
.panels-row .panel .panel-body .module-type-plug .edit-c a.btn .fa-spinner,
.panels-row .panel .panel-body .module-type-temp .edit-c a.btn .fa-spinner,
.panels-row .panel .panel-body .module-type-door .edit-c a.btn .fa-spinner {
    display: none;
}

.panels-row .panel .panel-body .module-type-light .edit-c a.btn-success,
.panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success,
.panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success,
.panels-row .panel .panel-body .module-type-input .edit-c a.btn-success,
.panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success,
.panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success,
.panels-row .panel .panel-body .module-type-door .edit-c a.btn-success {
    background-color: #3BB7F7;
    border: 0 none;
}

.panels-row .panel .panel-body .module-type-light .edit-c .handle,
.panels-row .panel .panel-body .module-type-scenario .edit-c .handle,
.panels-row .panel .panel-body .module-type-sensor .edit-c .handle,
.panels-row .panel .panel-body .module-type-input .edit-c .handle,
.panels-row .panel .panel-body .module-type-plug .edit-c .handle,
.panels-row .panel .panel-body .module-type-temp .edit-c .handle,
.panels-row .panel .panel-body .module-type-door .edit-c .handle {
    padding: 4px 2px 1px;
    float: right;
    text-align: right;
    cursor: pointer;
    width: 15%
}

.panels-row .panel .panel-body .module-type-light .edit-c input[type=text],
.panels-row .panel .panel-body .module-type-scenario .edit-c input[type=text],
.panels-row .panel .panel-body .module-type-sensor .edit-c input[type=text],
.panels-row .panel .panel-body .module-type-input .edit-c input[type=text],
.panels-row .panel .panel-body .module-type-plug .edit-c input[type=text],
.panels-row .panel .panel-body .module-type-temp .edit-c input[type=text],
.panels-row .panel .panel-body .module-type-door .edit-c input[type=text],
.editable {
    color: #ffffff;
    padding: 2px;
    background-color: #3A5068;
    border: 0px none;
    border-bottom: 1px solid #ffffff;
    margin: 2px;
    width: 80%;
    font-size: 14px;
    border-radius: 5px;
    text-indent: 5px;
}

.panels-row .panel .panel-body .module-type-light .view-c,
.panels-row .panel .panel-body .module-type-scenario .view-c,
.panels-row .panel .panel-body .module-type-sensor .view-c,
.panels-row .panel .panel-body .module-type-input .view-c,
.panels-row .panel .panel-body .module-type-plug .view-c,
.panels-row .panel .panel-body .module-type-temp .view-c,
.panels-row .panel .panel-body .module-type-door .view-c {
    display: block
}

.panels-row .panel .panel-body .module-type-light.all-lights .handle,
.panels-row .panel .panel-body .module-type-scenario.all-lights .handle,
.panels-row .panel .panel-body .module-type-sensor.all-lights .handle,
.panels-row .panel .panel-body .module-type-input.all-lights .handle,
.panels-row .panel .panel-body .module-type-plug.all-lights .handle,
.panels-row .panel .panel-body .module-type-temp.all-lights .handle,
.panels-row .panel .panel-body .module-type-door.all-lights .handle {
    display: none
}

.panels-row .panel .panel-body .module-type-light.all-lights input[type=text],
.panels-row .panel .panel-body .module-type-scenario.all-lights input[type=text],
.panels-row .panel .panel-body .module-type-sensor.all-lights input[type=text],
.panels-row .panel .panel-body .module-type-input.all-lights input[type=text],
.panels-row .panel .panel-body .module-type-plug.all-lights input[type=text],
.panels-row .panel .panel-body .module-type-temp.all-lights input[type=text],
.panels-row .panel .panel-body .module-type-door.all-lights input[type=text] {
    display: none
}

.panels-row .panel .panel-body .module-type-temp .module-name {
    width: calc(100% - 80px)
}

.panels-row .panel .panel-body .module-type-temp .temp-info {
    text-align: right;
    float: right;
    height: 22px
}

.panels-row .panel .panel-body .module-type-temp:first-child .temp-label {
    width: 330px
}

.panels-row .panel .panel-body .invoice-item {
    padding: 10px 0;
    margin: 0 -15px;
    border-bottom: 1px solid #737f8c
}

.panels-row .panel .panel-body .invoice-item:last-child {
    border: 0;
    margin-bottom: 10px
}

.panels-row .panel .panel-body .invoice-item:nth-child(2) {
    font-weight: 600
}

.panels-row .panel .panel-body .invoice-item:nth-child(2) .invoice-item-name {
    color: #fff
}

.panels-row .panel .panel-body .invoice-item .invoice-item-name {
    color: #becad6;
    padding-left: 0
}

.panels-row .panel .panel-body .invoice-item .invoice-item-quantity {
    font-size: 14px
}

.panels-row .panel .panel-body .invoice-item .invoice-item-amount {
    text-align: right;
    padding-right: 0
}

.panels-row .panel .panel-body .invoices-link {
    text-align: center;
    margin-bottom: 10px
}

.panels-row .panel .panel-body .invoices-link a {
    border-bottom: 1px solid #436e8e
}

.panels-row .panel .panel-body .invoices-link a:hover,
.panels-row .panel .panel-body .invoices-link a:active,
.panels-row .panel .panel-body .invoices-link a:focus,
.panels-row .panel .panel-body .invoices-link a:visited {
    color: #3bb7f7
}

.panels-row .panel .panel-body .invoices-link a:hover {
    border: none
}

.panels-row .panel .panel-body .spinner-container {
    margin: 20px 0;
    text-align: center
}

.panels-row .panel .panel-body .spinner-container .fa-spinner {
    font-size: 30px
}

.panels-row .panel .panel-body .no-resources {
    padding-top: 15px
}

.panels-row .panel.door {
    background: rgba(0,0,0,0.8);
    background-size: cover
}

.panels-row .panel.door .panel-header {
    padding: 30px 90px 30px 20px;
    min-height: 78px
}

.panels-row .panel.door input.door-switch {
    display: none
}

.panels-row .panel.door .door-switch.lock {
    position: absolute;
    right: 20px;
    top: 16px;
    height: 48px;
    width: 48px;
    background: url("../img/locked-lock.png") center no-repeat;
    cursor: pointer
}

.panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url("../img/door-switch-unlocked.png") center no-repeat
}

.panels-row .panel.door .panel-body.no-resources {
    padding-top: 15px
}

.panels-row .panel.lights {
   background: rgba(0,0,0,0.8);
   background-size: cover
}

.panels-row .panel.scenarios {
    background: rgba(0,0,0,0.8);
    background-size: cover
}

.panels-row .panel.scenarios .panel-header {
    padding: 30px 20px;
}

.panels-row .panel.lights .panel-header {
    padding-right: 60px
}

.panels-row .panel.sensors {
    background: rgba(0,0,0,0.8);
}

.panels-row .panel.sensors .panel-header {
    padding-right: 60px
}

.panels-row .panel.temperature {
   background: rgba(0,0,0,0.8);
   background-size: cover
}

.panels-row .panel.temperature .panel-header {
    padding-right: 80px
}

.panels-row .panel.skins {
    background: rgba(0,0,0,0.8); 
}

.panels-row .panel.plugs {
    background: rgba(0,0,0,0.8);
    background-size: cover
}

.panels-row .panel.plugs .panel-header {
    padding-right: 60px
}

.panels-row .panel.multimedia {
    background: rgba(0,0,0,0.8);
}

.panels-row .panel.help-desk {
    background: rgba(0,0,0,0.8);
    background-size: cover
}

.panels-row .panel.help-desk a {
    display: block;
    color: #fff
}

.panels-row .panel.rosy {
    background: url("../img/temperature-panel-bgd.jpg") center no-repeat;
    background-size: cover
}

.panels-row .panel.rosy a {
    display: block;
    color: #fff
}

.panels-row .panel.rosy .rosy-logo {
    background: url("../img/logo-rosy.png") left top no-repeat;
    background-size: 100px auto;
    width: 130px;
    height: 38px
}

.panels-row .panel.invoices {
    background: rgba(0,0,0,0.8);
    background-size: cover
}

.panels-row .panel.invoices .panel-header {
    padding-right: 130px
}

.panels-row .panel.invoices .panel-body {
    padding: 0 15px 20px
}

.panels-row .second-column {
    padding: 0 !important
}

.panels-row .first-column .panel.help-desk,
.panels-row .first-column .panel.rosy {
    display: none
}

.panels-row .second-column .panel.help-desk,
.panels-row .second-column .panel.rosy {
    display: block
}

.slider-container,
.percentage-value-slider-container,
.tado-temp-slider-container {
    position: relative
}

.slider-container a,
.percentage-value-slider-container a,
.tado-temp-slider-container a {
    position: absolute;
    font-size: 26px;
    font-weight: 600;
    color: #becad6;
    line-height: 26px;
    z-index: 99;
    display: inline-block;
    padding: 0 12px
}

.slider-container .decrease-temp , 
.percentage-value-slider-container .decrease-percentage,
.tado-temp-slider-container .decrease-tado-temp {
    left: 0;
    top: 5px
}

.slider-container .increase-temp, 
.percentage-value-slider-container .increase-percentage,
.tado-temp-slider-container .increase-tado-temp {
    right: 0;
    top: 8px
}

.temperature-slider,
.volume-slider,
.tado-temp-slider,
.percentage-slider {
    border: 2px solid #becad6;
    border-radius: 20px;
    height: 40px;
    background: none;
    box-shadow: none;
    padding: 0 40px;
}

.temperature-slider .noUi-handle,
.percentage-slider .noUi-handle,
.volume-slider .noUi-handle,
.tado-temp-slider .noUi-handle {
    width: 26px;
    height: 26px;
    background: #3bb7f7;
    border-radius: 100%;
    border: none;
    box-shadow: none;
    top: 4px;
    cursor: pointer
}

.temperature-slider .noUi-handle:before,
.temperature-slider .noUi-handle:after,
.percentage-slider .noUi-handle:before,
.percentage-slider .noUi-handle:after,
.volume-slider .noUi-handle:before,
.volume-slider .noUi-handle:after,
.tado-temp-slider .noUi-handle:before,
.tado-temp-slider .noUi-handle:after {
    display: none
}

#invoice-details {
    margin: 0 -15px
}

.invoice-details-container {
    margin-bottom: 15px;
    font-size: 14px
}

#template-invoice-details {
    margin-top: 15px
}

#template-invoice-details .invoice-details-link {
    font-size: 14px;
    margin-bottom: 5px
}

.welcome-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #3a5068 url("../img/login-bg.jpg") left top no-repeat; 
    background-size: cover;
    z-index: 999
}

.welcome-modal .welcome-text {
    font-size: 46px;
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    padding: 0 30px;
    transform: translate(0, -50%)
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 50px 0 50px 200px;
    text-align: center;
    font-size: 13px;
    color: #becad6
}

footer p {
    margin: 0;
    color: #FFF;
}

.alert {
    color: white;
    font-size: 16px;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
    border: none;
    font-weight: 400;
    max-width: 450px
}

.alert-danger {
    background-color: #f27e7a
}

.alert-info {
    background-color: #3bb7f7
}

.alert button.close {
    background: url("../img/close-alert.png") left top no-repeat;
    width: 10px;
    height: 10px;
    opacity: 1;
    position: absolute;
    top: 50%;
    right: 6px;
    font-size: 0;
    margin-top: -5px
}

span[data-notify="icon"] {
    padding-left: 3px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 18px;
    padding-right: 18px
}

span[data-notify="message"] {
    padding-left: 45px;
    float: left
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .panels-row .panel .panel-header .helpdesk-icon {
        background: url("../img/helpdesk-icon-2x.png") left top no-repeat;
        background-size: 56px 53px
    }
    header .responsive-menu-icon {
        background: url("../img/menu-inactive.png") left top no-repeat;
        background-size: 24px 20px
    }
    header .responsive-menu-icon.active,
    header .responsive-menu-icon.menu-active {
        background: url("../img/menu-icon-white.png") left top no-repeat;
        background-size: 24px 20px
    }
}

@media screen and (max-width: 1300px) {
    .page-container {
        padding: 30px 30px 200px
    }
}

@media screen and (max-width: 1024px) {
    .page-container {
        padding: 15px 15px 200px
    }
}

@media screen and (max-width: 995px) {
    .panels-row .first-column .panel.help-desk,
    .panels-row .first-column .panel.rosy {
        display: block
    }
    .panels-row .second-column .panel.help-desk,
    .panels-row .second-column .panel.rosy {
        display: none
    }
    .page-container {
        padding: 15px
    }
    footer {
        position: relative;
        padding: 50px 0
    }
}

@media screen and (max-width: 767px) {
    .panels-row .panel .panel-body {
        display: none
    }
    .panels-row .panel .panel-header {
        cursor: pointer
    }
    .panels-row .first-column .panel.help-desk,
    .panels-row .first-column .panel.rosy {
        display: none
    }
    .panels-row .second-column .panel.help-desk,
    .panels-row .second-column .panel.rosy {
        display: block
    }
    .service-categories-container {
        padding: 0;
        margin-bottom: 10px;
    }
    .service-order-from-container {
        padding: 0;
        margin-bottom: 10px;
    }
    .service-search-container {
        padding: 0;
    }
}

.invoices-container {
   background: rgba(0,0,0,0.8);
   background-size: cover;
   border-radius: 6px;
   padding: 30px 40px;
   width: 770px;
   margin: 0 auto;
   position: relative;
   min-height: 350px
}

.invoices-container h1 {
    text-align: center;
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400
}

.invoices-container .panel-group .panel {
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0
}

.invoices-container .panel-group .panel-heading {
    background: none;
    border-top: 1px solid #737f8c;
    color: #fff;
    border-radius: 0;
    padding: 0
}

.invoices-container .panel-group .panel-heading h4 {
    font-size: 13px;
    line-height: 20px;
    padding: 10px 0;
    margin: 0
}

.invoices-container .panel-group .panel-heading .invoice-period {
    font-size: 16px;
    color: #becad6
}

.invoices-container .panel-group .panel-heading a {
    margin-left: 45px;
    color: #3bb7f7;
    border-bottom: 1px solid #4c7999;
    line-height: 14px;
    margin-top: 3px
}

.invoices-container .panel-group .panel-heading a:hover,
.invoices-container .panel-group .panel-heading a:active,
.invoices-container .panel-group .panel-heading a:focus {
    color: #209dde;
    border-color: transparent
}

.invoices-container .panel-group .panel-heading.active h4 {
    font-weight: 600
}

.invoices-container .panel-group .panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top: 1px solid #737f8c
}

.invoices-container .panel-group .panel-body {
    padding: 0 0 0 25px
}

.invoices-container .invoice-item {
    padding: 10px 0;
    border-bottom: 1px solid #737f8c;
    font-size: 13px
}

.invoices-container .invoice-item:last-child {
    border: 0
}

.invoices-container .invoice-item .invoice-item-name {
    color: #becad6;
    padding-left: 0
}

.invoices-container .invoice-item .invoice-item-amount {
    text-align: right;
    padding-right: 0
}

.invoices-container .no-invoices {
    color: #becad6;
    font-size: 20px;
    text-align: center;
    margin: 150px 0
}

.invoices-container .navigation {
    width: 50px;
    margin: 0 auto
}

.invoices-container .navigation .nav-prev,
.invoices-container .navigation .nav-next {
    background: url("../img/arrow-left.png") left top no-repeat;
    display: block;
    width: 11px;
    height: 20px;
    float: left
}

.invoices-container .navigation .nav-next {
    background: url("../img/arrow-right.png") left top no-repeat;
    float: right;
    margin-left: 28px
}

.invoices-container .spinner-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #3a5068;
    opacity: 0.8;
    z-index: 9
}

.invoices-container .spinner-container .fa {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    font-size: 30px
}

.invoices-container.list-invoices {
    padding-bottom: 50px
}

.invoices-container.list-invoices .navigation {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -25px
}

@media screen and (max-width: 790px) {
    .invoices-container {
        width: 100%
    }
    .skin-preview {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .service-details .service-title {
        width: 100%;
        margin: 0;
        margin-top: 30px;
        display: block;
    }

    .service-details .service-image {
        width: 100px;
    }

    .service-price {
        margin-left: 15px;
    }
}

@media screen and (max-width: 480px) {
    .invoices-container {
        padding: 30px 15px
    }
    .invoices-container .panel-group .panel-heading .invoice-period {
        font-size: 14px
    }
}

.profile-container {
   background: rgba(0,0,0,0.8);
   background-size: cover;
   border-radius: 6px;
   padding: 30px 40px;
   width: 770px;
   margin: 0 auto
}

.profile-container h1 {
    text-align: center;
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400
}

.profile-container h3 {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7)
}

.profile-container .form-label {
    font-size: 14px;
    font-weight: 400
}

.profile-container .btn-primary {
    background: #3bb7f7;
    height: 40px;
    font-size: 16px
}

.profile-container select.form-control {
    width: 50%
}

.profile-container .help-block {
    color: #afafaf;
    font-size: 14px
}

@media screen and (max-width: 790px) {
    .profile-container {
        width: 100%;
    }

    .skin-preview {
        width: 100%;
    }

}

@media screen and (max-width: 480px) {
    .profile-container {
        padding: 30px 15px
    }
}

.announcements-container {
    background: rgba(0,0,0,0.8);
    background-size: cover;
    border-radius: 6px;
    padding: 30px 40px;
    width: 770px;
    margin: 0 auto;
    position: relative;
    min-height: 350px
}

.announcements-container h1 {
    text-align: center;
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400
}

.announcements-container .panel-group .panel {
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0
}

.announcements-container .panel-group .panel-heading {
    background: none;
    border-top: 1px solid #737f8c;
    color: #fff;
    border-radius: 0;
    padding: 0
}

.announcements-container .panel-group .panel-heading h4 {
    font-size: 13px;
    line-height: 20px;
    padding: 10px 0;
    margin: 0
}

.announcements-container .panel-group .panel-heading .letter {
    padding: 2px 5px
}

.announcements-container .panel-group .panel-heading .announcement-title {
    font-size: 16px;
    color: #becad6
}

.announcements-container .panel-group .panel-heading a {
    margin-left: 45px;
    color: #3bb7f7;
    border-bottom: 1px solid #4c7999;
    line-height: 14px;
    margin-top: 3px
}

.announcements-container .panel-group .panel-heading a:hover,
.announcements-container .panel-group .panel-heading a:active,
.announcements-container .panel-group .panel-heading a:focus {
    color: #209dde;
    border-color: transparent
}

.announcements-container .panel-group .panel-heading.active h4 {
    font-weight: 600
}

.announcements-container .panel-group .panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top: 1px solid #737f8c
}

.announcements-container .panel-group .panel-body {
    padding: 0 0 0 25px
}

.announcements-container .panel-group .panel-body .announcement-details-container {
    font-size: 85%;
    padding: 15px 0 5px 0
}

.announcements-container .announcement-item {
    padding: 10px 0;
    border-bottom: 1px solid #737f8c;
    font-size: 13px
}

.announcements-container .announcement-item:last-child {
    border: 0
}

.announcements-container .announcement-item .announcement-item-name {
    color: #becad6;
    padding-left: 0
}

.announcements-container .announcement-item .announcement-item-amount {
    text-align: right;
    padding-right: 0
}

.announcements-container .no-announcements {
    color: #becad6;
    font-size: 20px;
    text-align: center;
    margin: 150px 0
}

.announcements-container .navigation {
    width: 50px;
    margin: 0 auto
}

.announcements-container .navigation .nav-prev,
.announcements-container .navigation .nav-next {
    background: url("../img/arrow-left.png") left top no-repeat;
    display: block;
    width: 11px;
    height: 20px;
    float: left
}

.announcements-container .navigation .nav-next {
    background: url("../img/arrow-right.png") left top no-repeat;
    float: right;
    margin-left: 28px
}

.announcements-container .spinner-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #3a5068;
    opacity: 0.8;
    z-index: 9
}

.announcements-container .spinner-container .fa {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    font-size: 30px
}

.announcements-container.list-announcements {
    padding-bottom: 50px
}

.announcements-container.list-announcements .navigation {
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -25px
}

@media screen and (max-width: 790px) {
    .announcements-container {
        width: 100%
    }
}

@media screen and (max-width: 480px) {
    .announcements-container {
        padding: 30px 15px
    }
    .announcements-container .panel-group .panel-heading .announcement-title {
        font-size: 14px
    }
}

.services-container,
.service-container,
.cards-container {
    background: rgba(0,0,0,0.8);
    background-size: cover;
    border-radius: 6px; 
    padding: 30px 40px;
    width: 770px;
    margin: 0 auto;
    position: relative;
    min-height: 350px
}

.cards-container h1 {
    text-align: center;
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400
}

.cards-container h2 {
    margin: 20px 0 20px;
    font-size: 18px;
    font-weight: 400
}

.cards-container .spinner-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #3a5068;
    opacity: 0.8;
    z-index: 9
}

.cards-container .spinner-container .fa {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    font-size: 30px
}

.cards-container .cards-list ul {
    list-style-type: none;
    margin: 0 0 20px;
    padding: 0
}

.cards-container .card-item {
    padding: 10px 0;
    border-top: 1px solid #737f8c;
    line-height: 34px
}

.cards-container .card-item:last-child {
    border-bottom: 1px solid #737f8c
}

.cards-container .btn-primary {
    background: #3bb7f7;
    border-color: #3bb7f7
}

.cards-container .btn-primary:hover {
    background: #209dde;
    border-color: #209dde
}

.cards-container .link-btn {
    font-size: 13px;
    border-bottom: 1px solid #3bb7f7
}

.cards-container .link-btn .fa {
    font-size: 13px
}

.cards-container .link-btn:hover {
    color: #3bb7f7;
    border-bottom: 1px solid transparent
}

.cards-container .delete-card {
    margin-left: 10px;
    color: #ef7070;
    border-bottom: 1px solid #ef7070
}

.cards-container .delete-card:hover {
    color: #ef7070
}

.cards-container .card-form {
    width: 100%;
    margin: 0 -15px
}

.cards-container .card-form .form-label {
    font-size: 14px;
    font-weight: 400
}

.cards-container .card-form h3 {
    font-size: 16px;
    padding: 0 15px
}

.cards-container .card-form h2 {
    font-size: 18px;
    padding: 0 15px
}

.cards-container .add-new-card .card-item {
    border-top: 0
}

.cards-container .no-cards {
    color: #becad6;
    font-size: 20px;
    text-align: center;
    margin: 150px 0
}

@keyframes blink {
    0% {
        opacity: .2
    }
    20% {
        opacity: 1
    }
    100% {
        opacity: .2
    }
}

.waiting {
    margin-bottom: 20px
}

.waiting span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    background: #3bb7f7;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px
}

.waiting span:nth-child(2) {
    animation-delay: .2s
}

.waiting span:nth-child(3) {
    animation-delay: .4s
}

.waiting span:nth-child(4) {
    animation-delay: .6s
}

.waiting span:nth-child(5) {
    animation-delay: .8s
}

@media screen and (max-width: 790px) {
    .cards-container {
        width: 100%
    }
}

@media screen and (max-width: 480px) {
    .cards-container {
        padding: 30px 15px
    }
}

.temp-icon {
    position: absolute;
    right: 20px;
    top: 12px;
    height: 60px;
    width: 48px;
}

.temp-icon.inactive {
    background: url("../img/temp_off.png") center no-repeat;
}

.temp-icon.active {
    background: url("../img/temp_on.png") center no-repeat;
}

.temp-slider.general-temp {
    padding-bottom: 5px; 
    border-bottom: 1px solid #737f8c;
}

.temp-slider.general-temp .slider-container .temperature-slider .percentage-slider {
    border: 2px solid #becad6;
    margin-bottom: 5px;
}

.temp-slider.general-temp .slider-container a.decrease-temp,
.temp-slider.general-temp .slider-container a.increase-temp,
.percentage-value-slider-container a.decrease-percentage,
.percentage-value-slider-container a.increase-percentage {
    color: #becad6;
}

.temp-slider.general-temp .slider-container .percentage-value-slider-container .noUi-handle.noUi-handle-lower {
    background-color: #fff;
}

.module-type-temp .module-name {
    width: calc(100% - 80px);
}

.dimmer-slider {
    border-radius: 20px;
    height: 34px;
    background-color: #3cb6f8;
    box-shadow: none;
    padding: 0 40px;
}

.dimmer-slider .noUi-handle {
    width: 22px;
    height: 22px;
    background: #50b1e4;
    border-radius: 100%;
    border: none;
    box-shadow: none;
    top: 6px;
    cursor: pointer
}

.dimmer-slider .noUi-handle:before,
.dimmer-slider .noUi-handle:after {
    display: none
}

.dimmer-slider.noUi-target {
    /* border: none !important; */
}

.dimmer-container {
    position: relative
}

.dimmer-container a {
    position: absolute;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    line-height: 26px;
    z-index: 99;
    display: inline-block;
    padding: 0 12px
}

.dimmer-slider.active {
    background-color: transparent;
    /* background-color: #3bb7f7; */
}

.dimmer-slider {
    background-color: transparent;
    /* background-color: rgb(190, 202, 214); */
}

.dimmer-container .decrease-dim {
    left: 0;
    top: 2px
}

.dimmer-container .increase-dim {
    right: 0;
    top: 5px
}

.module-type-dim {
    overflow: auto;
    margin-bottom: 5px;    
}

.vertical_line {
    border:2px solid;
    color: lightgray;
    height:20px;
    position:absolute;
    left: 25px;
}

.dim_vertical_line {
    border:2px solid;
    color: lightgray;
    height:20px;
    position:absolute;
    right: -9px;
    bottom: 18px;
}

.temp_vertical_line {
    border:2px solid;
    color: lightgray;
    height:20px;
    position:absolute;
    right: 25px;
    margin-top: 13px;
}

.blind_vertical_line {
    border:2px solid;
    color: lightgray;
    height:20px;
    position:absolute;
    right: 25px;
}

/* Extra style */
.static-bg {
    min-width: 100%;
    position: absolute;
    bottom: 0;
    min-height: 100%;

}

body::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: 2px 2px 3px #000; 
    -webkit-border-radius: 8px;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #3cb6f8; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); 
}

body::-webkit-scrollbar-thumb:window-inactive,
.custom-scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #3399cc; 
}

body.moon-skin::-webkit-scrollbar-thumb,
.moon-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #81456d;
}

body.aqua-skin::-webkit-scrollbar-thumb,
.aqua-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #385855;
}

body.cherryrot-skin::-webkit-scrollbar-thumb,
.cherryrot-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #c04848;
}

body.titanium-skin::-webkit-scrollbar-thumb,
.titanium-skin .custom-scroll::-webkit-scrollbar-thumb {
    background:#777575;
}

body.moss-skin::-webkit-scrollbar-thumb,
.moss-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #70b080;
}

body.couple-skin::-webkit-scrollbar-thumb,
.couple-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #88263e;
}

body.lawrencium-skin::-webkit-scrollbar-thumb,
.lawrencium-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #423e85;
}

body.courtain-skin::-webkit-scrollbar-thumb,
.courtain-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #6b0202;
}

body.relay-skin::-webkit-scrollbar-thumb,
.relay-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #3a1c71;
}

body.forest-skin::-webkit-scrollbar-thumb,
.forest-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #093029;
}

body.premiumblack-skin::-webkit-scrollbar-thumb,
.premiumblack-skin .custom-scroll::-webkit-scrollbar-thumb {
    background: #434343;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;   
}

.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('../img/mobile-snap.png');
        background-position: center;
    }
    
    .fullscreen-bg__video {
        display:none;
    }
}
/* Extra */

/* Skin Selection Input */
#skin-select-label {
    font-weight: 300;
    color: #fff;
    margin-top: 10px;
}

#moon-skin-slt {
    cursor: pointer;
    margin-right: 5px;
}

#default-skin-slt {
    cursor: pointer;
}

#autumn-skin-slt {
    cursor: pointer;
}

#aqua-skin-slt {
    cursor: pointer;
}

#cherryrot-skin-slt {
    cursor: pointer;
}

#titanium-skin-slt {
    cursor: pointer;
}

#moss-skin-slt {
    cursor: pointer;
}

#pinky-skin-slt {
    cursor: pointer;
}

#couple-skin-slt {
    cursor: pointer;
}

#lawrencium-skin-slt {
    cursor: pointer;
}

#courtain-skin-slt {
    cursor: pointer;
}

#relay-skin-slt {
    cursor: pointer;
}

#forest-skin-slt{
    cursor: pointer;
}

#nightfade-skin-slt {
    cursor: pointer;
}

#burningspring-skin-slt{
    cursor: pointer;
}

#premiumblack-skin-slt {
    cursor: pointer;
}

#spaceshift-skin-slt {
    cursor: pointer;
}

.skins a {
    color: #fff;
}

.skins a:hover {
    color: #000;
}

/* Default sprite */

.panels-row .panel .dash-icon {
    background-image: url('../img/skins/sprites/inactive.png');
    height: 50px;
    width: 50px;
}

/* Active Sprite Default */

.panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/default.png');
    height: 50px;
    width: 50px;
}

/* Moon Sprite */

.moon-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/moon.png');
    height: 50px;
    width: 50px;
}

/* Aqua Sprite */

.aqua-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/lake.png');
    height: 50px;
    width: 50px;
}

/* Cherryrot Sprite */

.cherryrot-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/cherryrot.png');
    height: 50px;
    width: 50px;
}

/* Titanium Sprite */

.titanium-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/titanium.png');
    height: 50px;
    width: 50px;
}

/* Moss Sprite */

.moss-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/moss.png');
    height: 50px;
    width: 50px;
}

/* Couple Sprite */

.couple-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/couple.png');
    height: 50px;
    width: 50px;
}

/* Lawrencium Sprite */

.lawrencium-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/lawrencium.png');
    height: 50px;
    width: 50px;
}

/* Courtain Sprite */

.courtain-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/courtain.png');
    height: 50px;
    width: 50px;
}

/* Relay Sprite */

.relay-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/relay.png');
    height: 50px;
    width: 50px;
}

/* Forest Sprite */

.forest-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/forest.png');
    height: 50px;
    width: 50px;
}

/* PremiumBlack Sprite */

.premiumblack-skin .panels-row .panel .dash-icon.active {
    background-image: url('../img/skins/sprites/premium-black.png');
    height: 50px;
    width: 50px;
}

/* Skin Sprites */

.panels-row .panel .panel-header .dash-icon.lightbulb {
    background-position: -126px -6px;
}
.panels-row .panel .panel-header .dash-icon.scenario {
    background-position: -5px -2px;
    height: 52px;
}

.dash-icon.temp-icon {
    background-position: -183px -66px;
}

.panels-row .panel .panel-header .plug-icon {
    background-position: -65px -8px;
    width: 56px;
    height: 57px;
}

.panels-row .panel .panel-header .dash-icon.sensor-icon {
    background-position: -127px -69px;
    height: 56px;
    width: 57px;
}

.panel.blinds .panel-header .dash-icon.blinds-icon {
    background-position: -4px -60px;
    height: 60px;
    width: 57px;
}

.dash-icon.arrow-up {
    background-position: -308px -3px;
}


.panel.fans .panel-header .dash-icon.fan-icon {
    background-position: -248px -67px;
}

/* Icons */
.moon-skin .dash-icon {
    background-image: url('../img/skins/sprites/moon.png');
    width: 50px;
    height: 50px;
}

/* Moon Skin */
.moon-skin header {
    background: #48233C;
}

.moon-skin nav {
    background: rgba(64, 55, 110, 0.83);
}

.moon-skin .alert-info {
    background: rgb(64, 55, 110);
}

.moon-skin .invoices-container,
.moon-skin .cards-container,
.moon-skin .announcements-container,
.moon-skin .services-container,
.moon-skin .service-container,
.moon-skin #no-scada-container,
.moon-skin .history-container,
.moon-skin .consumption-container,
.moon-skin .history-chart-container,
.moon-skin .history-active-time-container,
.moon-skin .consumption-time-container,
.moon-skin .panels-row .panel.door,
.moon-skin .panels-row .panel.scenarios,
.moon-skin .panels-row .panel.lights,
.moon-skin .panels-row .panel.temperature,
.moon-skin .panels-row .panel.plugs,
.moon-skin .panels-row .panel.sensors,
.moon-skin .panels-row .panel.help-desk,
.moon-skin .panels-row .panel.invoices,
.moon-skin .panels-row .panel.skins,
.moon-skin .panels-row .panel.multimedia,
.moon-skin .profile-container,
.moon-skin .page-container .panel.skin-preview,
.moon-skin .panel.blinds,
.moon-skin .panel.fans {
    background: rgba(64, 55, 110, 0.83);   
}

.moon-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/sprites/moon.png) no-repeat;
    background-position: -250px -5px;
    width: 50px;
    height: 50px;
}

.moon-skin .modal.alert-modal .modal-body .lock-true {
    background: #48233C;
}

.moon-skin .temperature-slider .noUi-handle,
.moon-skin .percentage-slider .noUi-handle,
.moon-skin .volume-slider .noUi-handle,
.moon-skin .tado-temp-slider .noUi-handle {
    background: #48233C;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.moon-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.moon-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #48233c;
}

.moon-skin .dimmer-slider.active {
    background: #48233C !important;
}

.moon-skin .profile-container .btn-primary {
    background: #48233C;
}
/* End Moon Skin */

/* Aqua Skin */
.aqua-skin header {
    background: #283D3B;
}

.aqua-skin nav,
.aqua-skin .panels-row .panel.door,
.aqua-skin .panels-row .panel.scenarios,
.aqua-skin .panels-row .panel.lights,
.aqua-skin .panels-row .panel.temperature,
.aqua-skin .panels-row .panel.plugs,
.aqua-skin .panels-row .panel.sensors,
.aqua-skin .panels-row .panel.help-desk,
.aqua-skin .panels-row .panel.invoices,
.aqua-skin .panels-row .panel.skins,
.aqua-skin .panels-row .panel.multimedia,
.aqua-skin .profile-container,
.aqua-skin .page-container .panel.skin-preview,
.aqua-skin .invoices-container,
.aqua-skin .cards-container,
.aqua-skin .announcements-container,
.aqua-skin .services-container,
.aqua-skin .service-container,
.aqua-skin #no-scada-container,
.aqua-skin .history-container,
.aqua-skin .consumption-container,
.aqua-skin .history-chart-container,
.aqua-skin .history-active-time-container,
.aqua-skin .consumption-time-container,
.aqua-skin .panel.fans,
.aqua-skin .panel.blinds {
    background: rgba(25, 114, 120, 0.7);
}

.aqua-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url('../img/skins/Lake/Lake-Skin-door-switch-unlocked.png') no-repeat;
    width: 54px;
    height: 58px;
}

.aqua-skin .modal.alert-modal .modal-body .lock-true {
    background: #283D3B;
}

.aqua-skin .alert-info {
    background: rgb(25, 114, 120);
}

.aqua-skin .temperature-slider .noUi-handle,
.aqua-skin .percentage-slider .noUi-handle,
.aqua-skin .volume-slider .noUi-handle,
.aqua-skin .tado-temp-slider .noUi-handle {
    background: #283D3B;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}


.aqua-skin .temp-slider.general-temp .slider-container a.decrease-temp, 
.aqua-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #293d3b;
}

.aqua-skin .dimmer-slider.active {
    background: #283D3B !important;
}


.aqua-skin .profile-container .btn-primary {
    background: #283D3B;
}
/* End Aqua Skin */

/* CherryRot Skin */
.cherryrot-skin header {
    background: linear-gradient(to right, #c04848 0%,#480048 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */;
}

.cherryrot-skin nav,
.cherryrot-skin .panels-row .panel.door,
.cherryrot-skin .panels-row .panel.scenarios,
.cherryrot-skin .panels-row .panel.lights,
.cherryrot-skin .panels-row .panel.temperature,
.cherryrot-skin .panels-row .panel.plugs,
.cherryrot-skin .panels-row .panel.sensors,
.cherryrot-skin .panels-row .panel.help-desk,
.cherryrot-skin .panels-row .panel.invoices,
.cherryrot-skin .panels-row .panel.skins,
.cherryrot-skin .panels-row .panel.multimedia,
.cherryrot-skin .profile-container,
.cherryrot-skin .page-container .panel.skin-preview,
.cherryrot-skin .invoices-container,
.cherryrot-skin .cards-container,
.cherryrot-skin .announcements-container,
.cherryrot-skin .services-container,
.cherryrot-skin .service-container,
.cherryrot-skin #no-scada-container,
.cherryrot-skin .history-container,
.cherryrot-skin .consumption-container,
.cherryrot-skin .history-chart-container,
.cherryrot-skin .history-active-time-container,
.cherryrot-skin .consumption-time-container,
.cherryrot-skin .panel.fans,
.cherryrot-skin .panel.blinds {
    background: linear-gradient(to bottom, rgba(192,72,72,.8) 0%,rgba(72,0,72,.8) 100%);
    background: #c04848;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(192, 72, 72, 0.7) 0%, rgba(72, 0, 72, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(192, 72, 72, 0.7) 0%, rgba(72, 0, 72, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c04848', endColorstr='#480048', GradientType=0);
    /* IE6-9 */
}

.cherryrot-skin .alert-info,
.cherryrot-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(192, 72, 72);
}

.cherryrot-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Cherryrot/Cherryrot-Skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.cherryrot-skin .temperature-slider .noUi-handle,
.cherryrot-skin .percentage-slider .noUi-handle,
.cherryrot-skin .volume-slider .noUi-handle,
.cherryrot-skin .tado-temp-slider .noUi-handle {
    background: #C04848;
    box-shadow: 0 0 5px #fff;
    top: 6px;
}

.cherryrot-skin .temperature-slider,
.cherryrot-skin .percentage-slider,
.cherryrot-skin .volume-slider,
.cherryrot-skin .tado-temp-slider {
    background: linear-gradient(to right, #c04848 0%,#480048 100%);
    border: 0 none;
}

.cherryrot-skin .temp-slider.general-temp .slider-container .temperature-slider .percentage-slider .noUi-handle {
    top: 4px;
}

.cherryrot-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.cherryrot-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #fff;
}

.cherryrot-skin .dimmer-slider.active {
    background: linear-gradient(to right, #c04848 0%,#480048 100%);
}

/* End Cherryrot Skin */

/* Titanium Skin */
.titanium-skin header {
    background: linear-gradient(to right, rgba(40,48,72,1) 0%,rgba(133,147,152,1) 100%);
}

.titanium-skin nav,
.titanium-skin .panels-row .panel.door,
.titanium-skin .panels-row .panel.scenarios,
.titanium-skin .panels-row .panel.lights,
.titanium-skin .panels-row .panel.temperature,
.titanium-skin .panels-row .panel.plugs,
.titanium-skin .panels-row .panel.sensors,
.titanium-skin .panels-row .panel.help-desk,
.titanium-skin .panels-row .panel.invoices,
.titanium-skin .panels-row .panel.skins,
.titanium-skin .panels-row .panel.multimedia,
.titanium-skin .profile-container,
.titanium-skin .page-container .panel.skin-preview,
.titanium-skin .invoices-container,
.titanium-skin .cards-container,
.titanium-skin .announcements-container,
.titanium-skin .services-container,
.titanium-skin .service-container,
.titanium-skin #no-scada-container,
.titanium-skin .history-container,
.titanium-skin .consumption-container,
.titanium-skin .history-chart-container,
.titanium-skin .history-active-time-container,
.titanium-skin .consumption-time-container,
.titanium-skin .panel.fans,
.titanium-skin .panel.blinds {
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(40,48,72,.7) 0%,rgba(133,147,152,.7) 100%);
    background: #283048;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(40, 48, 72, 0.7) 0%, rgba(133, 147, 152, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(40, 48, 72, 0.7) 0%, rgba(133, 147, 152, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283048', endColorstr='#859398', GradientType=0);
    /* IE6-9 */
}

.titanium-skin .alert-info,
.titanium-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(40, 48, 72);
}

.titanium-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Titanium/Titanium-Skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.titanium-skin .temperature-slider .noUi-handle,
.titanium-skin .percentage-slider .noUi-handle,
.titanium-skin .volume-slider .noUi-handle,
.titanium-skin .tado-temp-slider .noUi-handle {
    background: #283048;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.titanium-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(40,48,72,1) 0%,rgba(133,147,152,1) 100%);
}


.titanium-skin .profile-container .btn-primary {
    background: #252525;
}

.titanium-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.titanium-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #283048;
}

/* End Titanium Skin */

/* Moss Skin */
.moss-skin header {
    background: linear-gradient(to right, rgba(19,78,94,1) 0%,rgba(113,178,128,1) 100%);
}

.moss-skin nav,
.moss-skin .panels-row .panel.door,
.moss-skin .panels-row .panel.scenarios,
.moss-skin .panels-row .panel.lights,
.moss-skin .panels-row .panel.temperature,
.moss-skin .panels-row .panel.plugs,
.moss-skin .panels-row .panel.sensors,
.moss-skin .panels-row .panel.help-desk,
.moss-skin .panels-row .panel.invoices,
.moss-skin .panels-row .panel.skins,
.moss-skin .panels-row .panel.multimedia,
.moss-skin .profile-container,
.moss-skin .page-container .panel.skin-preview,
.moss-skin .invoices-container,
.moss-skin .cards-container,
.moss-skin .announcements-container,
.moss-skin .services-container,
.moss-skin .service-container,
.moss-skin #no-scada-container,
.moss-skin .history-container,
.moss-skin .consumption-container,
.moss-skin .history-chart-container,
.moss-skin .history-active-time-container,
.moss-skin .consumption-time-container,
.moss-skin .panel.fans,
.moss-skin .panel.blinds {
    background: #134e5e;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(19, 78, 94, 0.7) 0%, rgba(113, 178, 128, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(19, 78, 94, 0.7) 0%, rgba(113, 178, 128, 0.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(19, 78, 94, 0.7) 0%, rgba(113, 178, 128, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134e5e', endColorstr='#71b280', GradientType=0);
    /* IE6-9 */
}

.moss-skin .alert-info,
.moss-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(19, 78, 94);
}
.moss-skin .temperature-slider .noUi-handle,
.moss-skin .percentage-slider .noUi-handle,
.moss-skin .volume-slider .noUi-handle,
.moss-skin .tado-temp-slider .noUi-handle {
    background: #134E5E;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.moss-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(19,78,94,1) 0%,rgba(113,178,128,1) 100%);
}

.moss-skin .profile-container .btn-primary {
    background: rgba(19,78,94,1);
}

.moss-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.moss-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #134e5d;
}

/* End Moss Skin */

/* Couple Skin */
.couple-skin header {
    background: linear-gradient(to right, rgba(58,97,134,1) 0%,rgba(137,37,62,1) 100%);
}

.couple-skin nav,
.couple-skin .panels-row .panel.door,
.couple-skin .panels-row .panel.scenarios,
.couple-skin .panels-row .panel.lights,
.couple-skin .panels-row .panel.temperature,
.couple-skin .panels-row .panel.plugs,
.couple-skin .panels-row .panel.sensors,
.couple-skin .panels-row .panel.help-desk,
.couple-skin .panels-row .panel.invoices,
.couple-skin .panels-row .panel.skins,
.couple-skin .panels-row .panel.multimedia,
.couple-skin .profile-container,
.couple-skin .page-container .panel.skin-preview,
.couple-skin .invoices-container,
.couple-skin .cards-container,
.couple-skin .announcements-container,
.couple-skin .panel.fans,
.couple-skin .services-container,
.couple-skin .service-container,
.couple-skin #no-scada-container,
.couple-skin .history-container,
.couple-skin .consumption-container,
.couple-skin .history-chart-container,
.couple-skin .history-active-time-container,
.couple-skin .consumption-time-container,
.couple-skin .panel.blinds {
    background: #3a6186;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(58, 97, 134, 0.7) 0%, rgba(137, 37, 62, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(58, 97, 134, 0.7) 0%, rgba(137, 37, 62, 0.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(58, 97, 134, 0.7) 0%, rgba(137, 37, 62, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a6186', endColorstr='#89253e', GradientType=0);
    /* IE6-9 */
}

.couple-skin .alert-info,
.couple-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(58, 97, 134);
}

.couple-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Couple/Couple-Skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.couple-skin .temperature-slider .noUi-handle,
.couple-skin .percentage-slider .noUi-handle,
.couple-skin .volume-slider .noUi-handle,
.couple-skin .tado-temp-slider .noUi-handle {
    background: #3a6186;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.couple-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(58,97,134,1) 0%,rgba(137,37,62,1) 100%);
}

/* End Couple Skin */

/* Lawrencium Skin */
.lawrencium-skin header {
    background: linear-gradient(to right, rgba(15,12,41,1) 1%,rgba(48,43,99,1) 48%,rgba(36,36,62,1) 100%);
}

.lawrencium-skin nav,
.lawrencium-skin .panels-row .panel.door,
.lawrencium-skin .panels-row .panel.scenarios,
.lawrencium-skin .panels-row .panel.lights,
.lawrencium-skin .panels-row .panel.temperature,
.lawrencium-skin .panels-row .panel.plugs,
.lawrencium-skin .panels-row .panel.sensors,
.lawrencium-skin .panels-row .panel.help-desk,
.lawrencium-skin .panels-row .panel.invoices,
.lawrencium-skin .profile-container,
.lawrencium-skin .page-container .panel.skin-preview,
.lawrencium-skin .panels-row .panel.skins,
.lawrencium-skin .panels-row .panel.multimedia,
.lawrencium-skin .invoices-container,
.lawrencium-skin .cards-container,
.lawrencium-skin .announcements-container,
.lawrencium-skin .services-container,
.lawrencium-skin .service-container,
.lawrencium-skin #no-scada-container,
.lawrencium-skin .history-container,
.lawrencium-skin .consumption-container,
.lawrencium-skin .history-chart-container,
.lawrencium-skin .history-active-time-container,
.lawrencium-skin .consumption-time-container,
.lawrencium-skin .panel.fans,
.lawrencium-skin .panel.blinds {
    background: #0f0c29;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(15, 12, 41, 0.7) 0%, rgba(48, 43, 99, 0.7) 50%, rgba(36, 36, 62, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(15, 12, 41, 0.7) 0%, rgba(48, 43, 99, 0.7) 50%, rgba(36, 36, 62, 0.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(15, 12, 41, 0.7) 0%, rgba(48, 43, 99, 0.7) 50%, rgba(36, 36, 62, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0c29', endColorstr='#24243e', GradientType=0);
    /* IE6-9 */
}

.lawrencium-skin .alert-info,
.lawrencium-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(15, 12, 41);
}

.lawrencium-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Lawrencium/Lawrencium-Skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.lawrencium-skin .temperature-slider .noUi-handle,
.lawrencium-skin .percentage-slider .noUi-handle,
.lawrencium-skin .volume-slider .noUi-handle,
.lawrencium-skin .tado-temp-slider .noUi-handle {
    background: #0f0c29;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.lawrencium-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(15,12,41,1) 1%,rgba(48,43,99,1) 48%,rgba(36,36,62,1) 100%);
}

.lawrencium-skin .profile-container .btn-primary {
    background: rgba(15,12,41,1);
}

.lawrencium-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.lawrencium-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #0f0c29;
    text-shadow: none;
}
/* End Laurencium Skin */

/* Courtain Skin */
.courtain-skin header {
    background: linear-gradient(to right, rgba(7,0,0,1) 0%,rgba(76,0,1,1) 48%,rgba(7,0,0,1) 100%);
}

.courtain-skin nav,
.courtain-skin .panels-row .panel.door,
.courtain-skin .panels-row .panel.scenarios,
.courtain-skin .panels-row .panel.lights,
.courtain-skin .panels-row .panel.temperature,
.courtain-skin .panels-row .panel.plugs,
.courtain-skin .panels-row .panel.sensors,
.courtain-skin .panels-row .panel.help-desk,
.courtain-skin .panels-row .panel.invoices,
.courtain-skin .profile-container,
.courtain-skin .panels-row .panel.skins,
.courtain-skin .panels-row .panel.multimedia,
.courtain-skin .page-container .panel.skin-preview,
.courtain-skin .invoices-container,
.courtain-skin .cards-container,
.courtain-skin .announcements-container,
.courtain-skin .services-container,
.courtain-skin .service-container,
.courtain-skin #no-scada-container,
.courtain-skin .history-container,
.courtain-skin .consumption-container,
.courtain-skin .history-chart-container,
.courtain-skin .history-active-time-container,
.courtain-skin .consumption-time-container,
.courtain-skin .panel.fans,
.courtain-skin .panel.blinds {
    background: #070000;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(7, 0, 0, 0.7) 0%, rgba(76, 0, 1, 0.7) 50%, rgba(7, 0, 0, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(7, 0, 0, 0.7) 0%, rgba(76, 0, 1, 0.7) 50%, rgba(7, 0, 0, 0.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(7, 0, 0, 0.7) 0%, rgba(76, 0, 1, 0.7) 50%, rgba(7, 0, 0, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#070000', endColorstr='#070000', GradientType=0);
    /* IE6-9 */
}

.courtain-skin .alert-info,
.courtain-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(76, 0, 1);
}

.courtain-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Courtain/courtain-skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.courtain-skin .temperature-slider .noUi-handle,
.courtain-skin .percentage-slider .noUi-handle,
.courtain-skin .volume-slider .noUi-handle,
.courtain-skin .tado-temp-slider .noUi-handle {
    background: #070000;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.courtain-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(7,0,0,1) 0%,rgba(76,0,1,1) 48%,rgba(7,0,0,1) 100%);   
}

.courtain-skin .profile-container .btn-primary {
    background: rgba(76,0,1,1);
}

.courtain-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.courtain-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #5f0521;
    text-shadow: none;
}

/* End Courtain Skin */

/* Relay Skin */
.relay-skin header {
    background: linear-gradient(to right, rgba(58,28,113,1) 0%,rgba(215,109,119,1) 50%,rgba(255,175,123,1) 100%);
}

.relay-skin nav,
.relay-skin .panels-row .panel.door,
.relay-skin .panels-row .panel.scenarios,
.relay-skin .panels-row .panel.lights,
.relay-skin .panels-row .panel.temperature,
.relay-skin .panels-row .panel.plugs,
.relay-skin .panels-row .panel.sensors,
.relay-skin .panels-row .panel.help-desk,
.relay-skin .panels-row .panel.invoices,
.relay-skin .profile-container,
.relay-skin .page-container .panel.skin-preview,
.relay-skin .panels-row .panel.skins,
.relay-skin .panels-row .panel.multimedia,
.relay-skin .invoices-container,
.relay-skin .cards-container,
.relay-skin .announcements-container,
.relay-skin .services-container,
.relay-skin .service-container,
.relay-skin #no-scada-container,
.relay-skin .history-container,
.relay-skin .consumption-container,
.relay-skin .history-chart-container,
.relay-skin .history-active-time-container,
.relay-skin .consumption-time-container,
.relay-skin .panel.fans,
.relay-skin .panel.blinds {
    background: #3a1c71;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(58, 28, 113, 0.7) 0%, rgba(215, 109, 119, 0.7) 50%, rgba(255, 175, 123, 0.7) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(58, 28, 113, 0.7) 0%, rgba(215, 109, 119, 0.7) 50%, rgba(255, 175, 123, 0.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(58, 28, 113, 0.7) 0%, rgba(215, 109, 119, 0.7) 50%, rgba(255, 175, 123, 0.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a1c71', endColorstr='#ffaf7b', GradientType=0);
    /* IE6-9 */
}

.relay-skin .alert-info,
.relay-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(58, 28, 113);
}

.relay-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Relay/Relay-Skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.relay-skin .temperature-slider .noUi-handle,
.relay-skin .percentage-slider .noUi-handle,
.relay-skin .volume-slider .noUi-handle,
.relay-skin .tado-temp-slider .noUi-handle {
    background: #3A1C71;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.relay-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(58,28,113,1) 0%,rgba(215,109,119,1) 50%,rgba(255,175,123,1) 100%);
}

.relay-skin .profile-container .btn-primary {
    background: rgba(58,28,113,1);
}

.relay-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.relay-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #3a1c71;
    text-shadow: none;
}

/* End Relay Skin */

/* Forest Skin */
.forest-skin header {
    background: linear-gradient(to right, rgba(9,48,40,1) 0%,rgba(35,122,87,1) 100%);
}

.forest-skin nav,
.forest-skin .panels-row .panel.door,
.forest-skin .panels-row .panel.scenarios,
.forest-skin .panels-row .panel.lights,
.forest-skin .panels-row .panel.temperature,
.forest-skin .panels-row .panel.plugs,
.forest-skin .panels-row .panel.sensors,
.forest-skin .panels-row .panel.help-desk,
.forest-skin .panels-row .panel.invoices,
.forest-skin .profile-container,
.forest-skin .page-container .panel.skin-preview,
.forest-skin .panels-row .panel.skins,
.forest-skin .panels-row .panel.multimedia,
.forest-skin .invoices-container,
.forest-skin .cards-container,
.forest-skin .announcements-container,
.forest-skin .services-container,
.forest-skin .service-container,
.forest-skin #no-scada-container,
.forest-skin .history-container,
.forest-skin .consumption-container,
.forest-skin .history-chart-container,
.forest-skin .history-active-time-container,
.forest-skin .consumption-time-container,
.forest-skin .panel.fans,
.forest-skin .panel.blinds {
    background: rgba(9,48,40,.7);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(9,48,40,.7) 0%, rgba(35,122,87,.7) 100%);
    /* FF3.6-15 */
    background: linear-gradient(to bottom, rgba(9,48,40,.7) 0%,rgba(35,122,87,.7) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: -webkit-linear-gradient(top, rgba(9,48,40,.7) 0%, rgba(35,122,87,.7) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a3f37', endColorstr='#2c7744', GradientType=0);
    /* IE6-9 */  
}

.forest-skin .alert-info,
.forest-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(9, 48, 40);
}

.forest-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Forest/Forest-Skin-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.forest-skin .temperature-slider .noUi-handle,
.forest-skin .percentage-slider .noUi-handle,
.forest-skin .volume-slider .noUi-handle,
.forest-skin .tado-temp-slider .noUi-handle {
    background: #093028;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.forest-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(9,48,40,1) 0%,rgba(35,122,87,1) 100%);
}

.forest-skin .profile-container .btn-primary {
    background: rgba(9,48,40,1);
}

.forest-skin .temp-slider.general-temp .slider-container a.decrease-temp,
.forest-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #0f3631;
    text-shadow: none;
}

/* End Forest Skin */

/* Premium-Black Skin */
.premiumblack-skin header {
    background: linear-gradient(to right, rgba(67,67,67,1) 0%,rgba(0,0,0,1) 25%);
}

.premiumblack-skin nav,
.premiumblack-skin .panels-row .panel.door,
.premiumblack-skin .panels-row .panel.scenarios,
.premiumblack-skin .panels-row .panel.lights,
.premiumblack-skin .panels-row .panel.temperature,
.premiumblack-skin .panels-row .panel.plugs,
.premiumblack-skin .panels-row .panel.sensors,
.premiumblack-skin .panels-row .panel.help-desk,
.premiumblack-skin .panels-row .panel.invoices,
.premiumblack-skin .profile-container,
.premiumblack-skin .page-container .panel.skin-preview,
.premiumblack-skin .panels-row .panel.skins,
.premiumblack-skin .panels-row .panel.multimedia,
.premiumblack-skin .invoices-container,
.premiumblack-skin .cards-container,
.premiumblack-skin .announcements-container,
.premiumblack-skin .services-container,
.premiumblack-skin .service-container,
.premiumblack-skin #no-scada-container,
.premiumblack-skin .history-container,
.premiumblack-skin .consumption-container,
.premiumblack-skin .history-chart-container,
.premiumblack-skin .history-active-time-container,
.premiumblack-skin .consumption-time-container,
.premiumblack-skin .panel.fans,
.premiumblack-skin .panel.blinds {
    background: #434343;
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(67, 67, 67, 0.7) 0%, rgba(0, 0, 0, 0.7) 25%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(67, 67, 67, 0.7) 0%, rgba(0, 0, 0, 0.7) 25%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(67, 67, 67, 0.7) 0%, rgba(0, 0, 0, 0.7) 25%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#000000', GradientType=0);
    /* IE6-9 */  
}

.premiumblack-skin .alert-info,
.premiumblack-skin .modal.alert-modal .modal-body .lock-true {
    background: rgb(67, 67, 67);
}

.premiumblack-skin .panels-row .panel.door .door-switch:checked+.door-switch.lock {
    background: url(../img/skins/Premium-Black/Premium-Black-door-switch-unlocked.png) no-repeat;
    width: 54px;
    height: 58px;
}

.premiumblack-skin .temperature-slider .noUi-handle,
.premiumblack-skin .percentage-slider .noUi-handle,
.premiumblack-skin .volume-slider .noUi-handle,
.premiumblack-skin .tado-temp-slider .noUi-handle {
    background: #434343;
    box-shadow: 0 0 5px #fff;
    top: 4px;
}

.premiumblack-skin .dimmer-slider.active {
    background: linear-gradient(to right, rgba(67,67,67,1) 0%,rgba(0,0,0,1) 25%);
}

.premiumblack-skin .profile-container .btn-primary {
    background: rgba(67,67,67,1);
}

.premiumblack-skin .temp-slider.general-temp .slider-container a.decrease-temp, 
.premiumblack-skin .temp-slider.general-temp .slider-container a.increase-temp {
    color: #000;
    text-shadow: none;
}

/* End Premium-Black Skin */

.temperature-slider,
.percentage-slider,
.tado-temp-slider {
    height: 34px;
}

.temperature-slider .noUi-handle,
.percentage-slider .noUi-handle,
.tado-temp-slider .noUi-handle {
    width: 22px;
    height: 22px;
    top: 4px;
}

.slider-container .increase-temp,
.percentage-value-slider-container .increase-percentage,
.tado-temp-slider-container .increase-tado-temp {
    top: 5px;
}

.slider-container .decrease-temp,
.percentage-value-slider-container .decrease-percentage,
.tado-temp-slider-container .decrease-tado-temp {
    top: 4px;
}

.page-container .panel.skin-preview {
   background: rgba(0,0,0,0.8);
   background-size: cover;
   border-radius: 6px;
   padding: 30px 40px;
   max-width: 770px;
   margin: 0 auto;
   margin-top: 15px;
   position: relative;

}

.skins-group {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: 10px;
    margin-bottom: 20px;
}

.skins-group:hover {
    background: rgba(0,0,0,.4);
}

.skins-group p {
    color: #fff;
    font-size: 1em;
    display: inline-block;
    float: left;
    width: 20%;
    cursor: default;
}

.color-circle {
    display: inline-block;
    float: left;
    background: #fff;
    height: 30px;
    width: 30px;
    border-radius: 100px;
    margin-right: 15px;
    border: 2px solid #fff;
}

.color-circle:hover {
    width: 72%;
    transition: height ease-out .8s, width ease-in-out .8s;
}

.clear {
    clear: both;
}

.skins-group:last-child {
    border-bottom: 0 none;
    margin-bottom: 8px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.no-extend:hover {
    height: 30px;
    width: 30px;
}

.profile-container .btn-primary {
    outline: 0;
    border: 0 none;
}

.skin-icon {
    position: absolute;
    right: 20px;
    top: 35px;
    height: 48px;
    width: 48px;
    background: url(../img/skins-icon.png) center no-repeat;
    cursor: pointer;
}

.badge {
    background: firebrick;
    box-shadow: 1px 1px 3px #000;
    font-size: .8em;
    margin-right: 5px;
    border-radius: 5px;
}

/* Blinds Control */
.panel.blinds {
    background: rgba(0,0,0,0.8);
}
 
.panel.blinds .blinds-icon {
    width: 58px;
    height: 54px;
    position: absolute;
    right: 20px;
    top: 15px;
}
 

.blinds-group {
    padding: 6px 0;
}

.blinds-group:not(:last-child) {
    border-bottom: 1px solid #737f8c;
}

.arrow-up {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('../img/arrow-up.png');
    background-repeat: no-repeat;
    background-position: 0 21px;
    background-size: 30px;
}
 
.arrow-up.is-animated {
    animation-name: arrowup_anim;
    animation-timing-function: linear;
    animation-duration: 1.5s; 
    animation-iteration-count: infinite;
}
 
.arrow-down {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-right: 30px;
    background-image: url('../img/arrow-down.png');
    background-repeat: no-repeat;
    background-position: 0 21px;
    background-size: 30px;
}

.arrow-down.is-animated {
    animation-name: arrowdown_anim;
    animation-timing-function: linear;
    animation-duration: 1.5s; 
    animation-iteration-count: infinite;
}

.btn-blinds {
    color: #3cb6f8;
}

.moon-skin .btn-blinds {
    color: #48233C;
    text-shadow: 0 0 3px #fff;
}
 
.aqua-skin .btn-blinds {
    color: #283D3B;
    text-shadow: 0 0 3px #fff;
}
 
.cherryrot-skin .btn-blinds {
    color: #480048;
    text-shadow: 0 0 3px #fff;
}
 
.titanium-skin .btn-blinds {
    color: #283048;
    text-shadow: 0 0 3px #fff;
}
 
.moss-skin .btn-blinds {
    color: #134e5e;
    text-shadow: 0 0 3px #fff;  
}
 
.couple-skin .btn-blinds {
    color: #89253e;
    text-shadow: 0 0 3px #fff;
}
 
.lawrencium-skin .btn-blinds {
    color: #070425;
    text-shadow: 0 0 3px #fff;
}
 
.courtain-skin .btn-blinds {
    color: #4c0001;
    text-shadow: 0 0 3px #fff;  
}
 
.relay-skin .btn-blinds {
    color: #3a1c71;
    text-shadow: 0 0 3px #fff;
}
 
.forest-skin .btn-blinds {
    color: #434343;
    text-shadow: 0 0 3px #fff;  
}
 
.premiumblack-skin .btn-blinds {
    color: #434343;
    text-shadow: 0 0 2px #fff;
}

.panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c {
    display: none;
    margin: -5px 0
}

.panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn {
    display: none;
    float: right;
    width: 15%;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-top: 2px
}

.panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn .fa-spinner {
    display: none;
}

.panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success {
    background-color: #3BB7F7;
    border-color: #3A5068
}

.panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c .handle {
    padding: 4px 2px 1px;
    float: right;
    text-align: right;
    cursor: pointer;
    width: 15%
}

.panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c input[type=text] {
    color: #ffffff;
    padding: 2px;
    background-color: #3A5068;
    border: 0px none;
    border-bottom: 1px solid #ffffff;
    margin: 2px;
    width: 80%;
    font-size: 14px
}
 
@keyframes arrowup_anim {
    0% {
        background-position-y: 21px;
    }
    50% {
        background-position-y: 12px;
    }
    100% {
        background-position-y: 21px;
    }
}
 
@keyframes arrowdown_anim {
    0% {
        background-position-y: 21px;
    }
    50% {
        background-position-y: 30px;
    }
    100% {
        background-position-y: 21px;
    }
}
/* End Blinds Control */

/* Temperature group */
.temperature-group {
    position: relative;
    padding: 5px 0;
}

.temperature-group:not(:last-child) {
    border-bottom: 1px solid #737f8c;
}

.temperature-group-values {
    padding: 2px 0;
}

.temperature-group-name span {
    border-bottom: 1px solid #fff;
}

.temperature-group-info {
    padding: 0 3px;
    background: rgba(0,0,0,.1);
}

.panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c {
    display: none;
    margin: -5px 0
}

.panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn {
    display: none;
    float: right;
    width: 15%;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-top: 2px
}

.panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn .fa-spinner {
    display: none;
}

.panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success {
    background-color: #3BB7F7;
    border-color: #3A5068
}

.panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c .handle {
    padding: 4px 2px 1px;
    float: right;
    text-align: right;
    cursor: pointer;
    width: 15%
}

.panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c input[type=text] {
    color: #ffffff;
    padding: 2px;
    background-color: #3A5068;
    border: 0px none;
    border-bottom: 1px solid #ffffff;
    margin: 2px;
    width: 80%;
    font-size: 14px
}
/* End Temperature group */

/* Control VCV */
.panel.fans {
    background: rgba(0, 0, 0, 0.8);
}

.fan-group:not(:last-child) {
    border-bottom: 1px solid #737f8c;
}

.fan-icon {
    width: 58px;
    height: 54px;
    position: absolute;
    top: 15px;
    right: 20px;
}


#fans-list {
    padding-top: 5px;
}

.fan-mode input[type=checkbox] {
    display: none;
}

.fan-temperature-values {
    padding: 2px 0;
}

.fan-temperature-group-info {
    padding: 0 3px;
    background: rgba(0,0,0,.1);
}

.power-percentage-value {
    padding: 5px 0;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.percentage-values {
    padding: 2px 0;
}

.percentage-value-group-info {
    padding: 0 10px;
    background: rgba(0,0,0,.1);
}

.percentage-value-description {
    padding-left: 7px;
}

.fan-intensity-container {
    width: 16px;
    margin: 0 auto;
}

.fan-intensity {
    padding-top: 2px;
}

.fan-intensity-label {
    border-bottom: 1px solid #fff;
}

.fan-intensity label input[type=radio] {
    position: absolute;
    opacity: 0;
}

.fan-intensity-modes label input[type=radio] {
    position: absolute;
    opacity: 0;
}

.intensity {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.intensity img {
    margin-left: 5px;
}

.checkmark {
    position: relative;
    display: inline-block;
    height: 16px;
    width: 16px;
    background-color: #becad6;
    border-radius: 50%;
}

.intensity input:checked~.checkmark:after {
    display: block;
}

.intensity:hover input~.checkmark {
    background-color: #ccc;
}

.intensity input:checked~.checkmark {
    background-color: #3cb6f8;
}

.moon-skin .intensity input:checked~.checkmark {
    background-color: #48233C;
}

.aqua-skin .intensity input:checked~.checkmark {
    background-color: #283D3B;
}

.cherryrot-skin .intensity input:checked~.checkmark {
    background-color: #C04848;
}

.titanium-skin .intensity input:checked~.checkmark {
    background-color: #283048;
}

.moss-skin .intensity input:checked~.checkmark {
    background-color: #134E5E;
}

.couple-skin .intensity input:checked~.checkmark {
    background-color: #3a6186;
}

.lawrencium-skin .intensity input:checked~.checkmark {
    background-color: #070425;
}

.courtain-skin .intensity input:checked~.checkmark {
    background-color: #070000;
}

.relay-skin .intensity input:checked~.checkmark {
    background-color: #3A1C71;
}

.forest-skin .intensity input:checked~.checkmark {
    background-color: #093028;
}

.premiumblack-skin .intensity input:checked~.checkmark {
    background-color: #434343;
}

.intensity .checkmark:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.panels-row .panel .panel-body .fan-group:not(.hide) .edit-c {
    display: none;
    margin: -5px 0
}

.panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn {
    display: none;
    float: right;
    width: 15%;
    padding-top: 2px;
    padding-bottom: 1px;
    margin-top: 2px
}

.panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn .fa-spinner {
    display: none;
}

.panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background-color: #3BB7F7;
    border-color: #3A5068
}

.panels-row .panel .panel-body .fan-group:not(.hide) .edit-c .handle {
    padding: 4px 2px 1px;
    float: right;
    text-align: right;
    cursor: pointer;
    width: 15%
}

.panels-row .panel .panel-body .fan-group:not(.hide) .edit-c input[type=text] {
    color: #ffffff;
    padding: 2px;
    background-color: #3A5068;
    border: 0px none;
    border-bottom: 1px solid #ffffff;
    margin: 2px;
    width: 80%;
    font-size: 14px
}
/* End Control VCV */

/* All Lights Group */
.all-lights-group {
    padding: 5px 0;
}

.all-lights-container span {
    font-size: 14px;
}

.all-lights-on {
    margin-right: 10px;
}
 
.btn-resources {
    width:  20px;
    height: 20px;
    background: #becad6;
    border-radius: 50%;
    cursor: pointer;
    border: 0 none;
    border: 1px solid #fff;
    outline: 0;
    font-size: 0;
}

.btn-resources.active {
    background: rgb(60,182,248); /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(60,182,248,1) 0%, rgba(255,255,255,1) 86%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(60,182,248,1) 0%,rgba(255,255,255,1) 86%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(60,182,248,1) 0%,rgba(255,255,255,1) 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cb6f8', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
    border: 2px solid #fff;
}
 
.moon-skin .btn-resources.active {
    background: #48233c; /* Old browsers */
    background: -moz-linear-gradient(45deg, #48233c 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #48233c 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #48233c 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48233c', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.aqua-skin .btn-resources.active {
    background: #283d3b; /* Old browsers */
    background: -moz-linear-gradient(45deg, #283d3b 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #283d3b 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #283d3b 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283d3b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.cherryrot-skin .btn-resources.active {
    background: #480048; /* Old browsers */
    background: -moz-linear-gradient(45deg, #480048 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #480048 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #480048 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#480048', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.titanium-skin .btn-resources.active {
    background: #252525; /* Old browsers */
    background: -moz-linear-gradient(45deg, #252525 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #252525 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #252525 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.moss-skin .btn-resources.active {
    background: #134e0e; /* Old browsers */
    background: -moz-linear-gradient(45deg, #134e0e 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #134e0e 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #134e0e 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134e0e', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.couple-skin .btn-resources.active {
    background: #134e5e; /* Old browsers */
    background: -moz-linear-gradient(45deg, #134e5e 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #134e5e 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #134e5e 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134e5e', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.lawrencium-skin .btn-resources.active {
    background: #0f0c29; /* Old browsers */
    background: -moz-linear-gradient(45deg, #0f0c29 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #0f0c29 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #0f0c29 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0c29', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.courtain-skin .btn-resources.active {
    background: #4c0001; /* Old browsers */
    background: -moz-linear-gradient(45deg, #4c0001 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #4c0001 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #4c0001 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c0001', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.relay-skin .btn-resources.active {
    background: #3a1c71; /* Old browsers */
    background: -moz-linear-gradient(45deg, #3a1c71 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #3a1c71 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #3a1c71 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a1c71', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.forest-skin .btn-resources.active {
    background: #093028; /* Old browsers */
    background: -moz-linear-gradient(45deg, #093028 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #093028 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #093028 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#093028', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal       gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
 
.premiumblack-skin .btn-resources.active {
    background: #434343; /* Old browsers */
    background: -moz-linear-gradient(45deg, #434343 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #434343 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #434343 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
/* END All Lights Group */

/* Success button skins */
.moon-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.moon-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.moon-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.moon-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.moon-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.moon-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.moon-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.moon-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.moon-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.moon-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background-color: #48233C;
    border-color: #3A5068;
}


.aqua-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.aqua-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.aqua-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.aqua-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.aqua-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.aqua-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.aqua-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.aqua-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.aqua-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.aqua-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background-color: #283D3B;
    border-color: #3A5068;
}

.cherryrot-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.cherryrot-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.cherryrot-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.cherryrot-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.cherryrot-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.cherryrot-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.cherryrot-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.cherryrot-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.cherryrot-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.cherryrot-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #c04848;
}

.titanium-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.titanium-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.titanium-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.titanium-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.titanium-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.titanium-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.titanium-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.titanium-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.titanium-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.titanium-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #252525;
}

.moss-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.moss-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.moss-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.moss-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.moss-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.moss-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.moss-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.moss-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.moss-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.moss-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success  {
    background: #134e5e;
}

.couple-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.couple-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.couple-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.couple-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.couple-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.couple-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.couple-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.couple-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.couple-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.couple-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #3a6186;
    border: 1px solid #fff;
}

.lawrencium-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.lawrencium-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.lawrencium-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.lawrencium-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.lawrencium-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.lawrencium-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.lawrencium-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.lawrencium-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.lawrencium-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.lawrencium-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #0f0c29;
}

.courtain-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.courtain-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.courtain-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.courtain-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.courtain-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.courtain-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.courtain-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.courtain-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.courtain-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.courtain-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #4c0001;
    border: 1px solid #fff;
}

.relay-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.relay-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.relay-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.relay-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.relay-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.relay-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.relay-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.relay-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.relay-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.relay-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #3a1c71;
}

.forest-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.forest-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.forest-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.forest-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.forest-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.forest-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.forest-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.forest-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.forest-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.forest-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #093028;
}

.premiumblack-skin .panels-row .panel .panel-body .module-type-light .edit-c a.btn-success, 
.premiumblack-skin .panels-row .panel .panel-body .module-type-scenario .edit-c a.btn-success, 
.premiumblack-skin .panels-row .panel .panel-body .module-type-sensor .edit-c a.btn-success, 
.premiumblack-skin .panels-row .panel .panel-body .module-type-input .edit-c a.btn-success, 
.premiumblack-skin .panels-row .panel .panel-body .module-type-plug .edit-c a.btn-success, 
.premiumblack-skin .panels-row .panel .panel-body .module-type-temp .edit-c a.btn-success, 
.premiumblack-skin .panels-row .panel .panel-body .module-type-door .edit-c a.btn-success,
.premiumblack-skin .panels-row .panel .panel-body .blinds-group:not(.hide) .edit-c a.btn-success,
.premiumblack-skin .panels-row .panel .panel-body .temperature-group:not(.hide) .edit-c a.btn-success,
.premiumblack-skin .panels-row .panel .panel-body .fan-group:not(.hide) .edit-c a.btn-success {
    background: #434343;
}
/* END Success button skins */

.panel.service {
    background: none;
    border: 0 none;
    border-radius: 0;
    border-top: 1px solid #fff;
    /* border-bottom: 1px solid #fff; */
}

.panel-default>.panel-heading {
    background: transparent;
    border: 0 none;
    color: #fff;
}

.service-thumb {
    width: 120px;
}

.service-thumb i {
    margin-left: 36px;
    margin-top: 15px;
}

.service-thumb img {
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;
    height: 120px;
    width: 120px;
    border-radius: 10px;
}

.service-title {
    margin-left: 130px;
    text-indent: 10px;
    border-bottom: 1px solid #fff;
    background: rgba(0,0,0,0.3);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.service-categories-container {
    padding-left: 0;
}

.service-order-from-container {
    padding-left: 0;
}

.service-search-container {
    padding-right: 0;
}

.service-category {
    margin-left: 140px;
}

.service-name {
    margin-left: 140px;
}

.service-approved {
    margin-left: 140px;
}

.service-price {
    margin-top: 25px;
    background: rgba(0,0,0,0.5);
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.service-details {
    padding-top: 15px;
    border-radius: 5px;
}

.service-details .service-image {
    max-width: 350px;
    float: left;
    margin-right: 35px;
    margin-left: 15px;
    border-radius: 5px;
}

.service-details .service-button {
    margin: 30px 0px;
}

.service-phone {
    display: none;
}

.modal-title {
    color: #000;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 10px;
}

.your-message {
    color: #000;
}

.general-temp {
    margin-bottom: 5px;
}
   
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

.switch {
    position: relative;
    display: inline-block;
    width:  20px;
    height: 20px;
    margin-left: 20px;
    margin-bottom: 0;
}

.switch:not(.sensor-switch) { cursor: pointer; }
  
.switch input {display:none;}
  
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    left: 5px;
    bottom: 5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
  
.in-wait {
    background: rgb(60,182,248); /* Old browsers */
    background: -moz-linear-gradient(45deg, rgba(60,182,248,1) 0%, rgba(255,255,255,1) 86%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(60,182,248,1) 0%,rgba(255,255,255,1) 86%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(60,182,248,1) 0%,rgba(255,255,255,1) 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cb6f8', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

input:checked + .slider {
    background-color: #2196F3;
}
  
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
  
@-webkit-keyframes loading_anim {
    to {transform: rotate(360deg)}
}
@-moz-keyframes loading_anim {
    to {transform: rotate(360deg)}
}
@-ms-keyframes loading_anim {
    to {transform: rotate(360deg)}
}
@keyframes loading_anim {
    to {transform: rotate(360deg)}
}

.moon-skin input:checked + .slider {
    background-color: #48233c;
    box-shadow: 0 0 1px #fff;
}

.moon-skin .in-wait {
    background: #48233c; /* Old browsers */
    background: -moz-linear-gradient(45deg, #48233c 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #48233c 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #48233c 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48233c', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}
.aqua-skin input:checked + .slider {
    background-color: #283d3b;
    box-shadow: 0 0 1px #fff;
  }

.aqua-skin .in-wait {
    background: #283d3b; /* Old browsers */
    background: -moz-linear-gradient(45deg, #283d3b 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #283d3b 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #283d3b 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283d3b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.cherryrot-skin input:checked + .slider {
    background-color: #480048;
    box-shadow: 0 0 1px #fff;
}

.cherryrot-skin .in-wait {
    background: #480048; /* Old browsers */
    background: -moz-linear-gradient(45deg, #480048 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #480048 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #480048 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#480048', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.titanium-skin input:checked + .slider {
    background-color: #252525;
    box-shadow: 0 0 1px #fff;
}

.titanium-skin .in-wait {
    background: #252525; /* Old browsers */
    background: -moz-linear-gradient(45deg, #252525 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #252525 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #252525 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252525', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.moss-skin input:checked + .slider {
    background-color: #134e0e;
    box-shadow: 0 0 1px #fff;
}

.moss-skin .in-wait {
    background: #134e0e; /* Old browsers */
    background: -moz-linear-gradient(45deg, #134e0e 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #134e0e 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #134e0e 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134e0e', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.couple-skin input:checked + .slider {
    background-color: #134e5e;
    box-shadow: 0 0 1px #fff;
}

.couple-skin .in-wait {
    background: #134e5e; /* Old browsers */
    background: -moz-linear-gradient(45deg, #134e5e 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #134e5e 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #134e5e 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#134e5e', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.lawrencium-skin input:checked + .slider {
    background-color: #0f0c29;
    box-shadow: 0 0 1px #fff;
}

.lawrencium-skin .in-wait {
    background: #0f0c29; /* Old browsers */
    background: -moz-linear-gradient(45deg, #0f0c29 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #0f0c29 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #0f0c29 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0c29', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.relay-skin input:checked + .slider {
    background-color: #3a1c71;
    box-shadow: 0 0 1px #fff;
}

.relay-skin .in-wait {
    background: #3a1c71; /* Old browsers */
    background: -moz-linear-gradient(45deg, #3a1c71 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #3a1c71 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #3a1c71 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a1c71', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.forest-skin input:checked + .slider {
    background-color: #093028;
    box-shadow: 0 0 1px #fff;
}

.forest-skin .in-wait {
    background: #093028; /* Old browsers */
    background: -moz-linear-gradient(45deg, #093028 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #093028 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #093028 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#093028', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal       gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.courtain-skin input:checked + .slider {
    background-color: #4c0001;
    box-shadow: 0 0 1px #fff;
}

.courtain-skin .in-wait {
    background: #4c0001; /* Old browsers */
    background: -moz-linear-gradient(45deg, #4c0001 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #4c0001 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #4c0001 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c0001', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.premiumblack-skin input:checked + .slider {
    background-color: #434343;
    box-shadow: 0 0 1px #fff;
}

.premiumblack-skin .in-wait {
    background: #434343; /* Old browsers */
    background: -moz-linear-gradient(45deg, #434343 0%, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #434343 0%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #434343 0%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#434343', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
    -webkit-animation: loading_anim .5s infinite; 
    -moz-animation: loading_anim .5s infinite; 
    -ms-animation: loading_anim .5s infinite;  
    animation: loading_anim .5s infinite; 
}

.moon-skin a.btn-success {
    background-color: #48233C;
    border-color: #3A5068;
}

.aqua-skin a.btn-success{
    background-color: #283D3B;
    border-color: #3A5068;
}

.cherryrot-skin a.btn-success {
    background: #c04848;
}

.titanium-skin a.btn-success {
    background: #252525;
}

.moss-skin a.btn-success  {
    background: #134e5e;
}

.couple-skin a.btn-success{
    background: #3a6186;
    border: 1px solid #fff;
}

.lawrencium-skin a.btn-success{
    background: #0f0c29;
}

.courtain-skin a.btn-success {
    background: #4c0001;
    border: 1px solid #fff;
}

.relay-skin a.btn-success {
    background: #3a1c71;
}

.forest-skin a.btn-success {
    background: #093028;
}

.premiumblack-skin a.btn-success {
    background: #434343;
}

/* VCV */
.fan-settings {
    padding: 5px 0;
    border-bottom: 1px solid #fff;
}

.fan-settings-label {
    border-bottom: 1px solid #fff;
}

.fan-settings-container {
    width: 16px;
    margin: 0 auto;
}

.fan-settings {
    padding-top: 2px;
}

.fan-settings-label {
    border-bottom: 1px solid #fff;
}

.fan-settings label input[type=radio] {
    position: absolute;
    opacity: 0;
}

.settings {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.settings img {
    margin-left: 5px;
}
.settings input:checked~.checkmark:after {
    display: block;
}

.settings:hover input~.checkmark {
    background-color: #ccc;
}

.settings input:checked~.checkmark {
    background-color: #3cb6f8;
}

.moon-skin .settings input:checked~.checkmark {
    background-color: #48233C;
}

.aqua-skin .settings input:checked~.checkmark {
    background-color: #283D3B;
}

.cherryrot-skin .settings input:checked~.checkmark {
    background-color: #C04848;
}

.titanium-skin .settings input:checked~.checkmark {
    background-color: #283048;
}

.moss-skin .settings input:checked~.checkmark {
    background-color: #134E5E;
}

.couple-skin .settings input:checked~.checkmark {
    background-color: #3a6186;
}

.lawrencium-skin .settings input:checked~.checkmark {
    background-color: #070425;
}

.courtain-skin .settings input:checked~.checkmark {
    background-color: #070000;
}

.relay-skin .settings input:checked~.checkmark {
    background-color: #3A1C71;
}

.forest-skin .settings input:checked~.checkmark {
    background-color: #093028;
}

.premiumblack-skin .settings input:checked~.checkmark {
    background-color: #434343;
}

.settings .checkmark:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.fan-group:not(:last-child) {
    margin-bottom: 5px;
    padding-bottom: 10px;
    border-bottom: 3px solid #737f8c;
}

.fan-name.group-name {
    font-size: 19px;
}

.all-lights-group {
    padding-bottom: 5px;
    border-bottom: 1px solid #737f8c;
}

.module-type-scenario .switch {
    margin-bottom: 0;
}

.status_valve {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
    margin-top: 10px;
}

.switch_vcv {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
    margin-top: 10px;
}

.switch_vcv input {
    display: none;
}

.switch-mask {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 25px;
}

.switch-mask:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.valve-status-img {
    position: absolute;
    height: 40px;
    width: 35px;
    bottom: -5px;
	left: 5px;
}

input:checked + .switch-mask {
    background-color: #2196F3;
}

input:focus + .switch-mask {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .switch-mask:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}

.fan-group.group-type {
    margin-bottom: 5px;
    padding-bottom: 10px;
    background: rgba(0,0,0,.5);
    border-radius: 5px;
    padding: 10px 6px;
    box-shadow: 0 0 15px #373737;
    border: 0 none;
    margin-bottom: 10px;
}

.fan-switch {
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.valve-status {
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.fan-on-off {
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.fan-settings {
    padding: 0 5px 10px 5px;
    border: 1px solid #fff;
    margin-top: 10px;
    border-radius: 5px;
}

.fan-intensity {
    padding: 0 5px 10px 5px;
    border: 1px solid #fff;
    margin-top: 10px;
    border-radius: 5px;
}

.fan-intensity-modes {
    padding: 0 5px 10px 5px;
    border: 1px solid #fff;
    margin-top: 10px;
    border-radius: 5px;
}

.moon-skin input:checked + .switch-mask {
    background-color: #48233C;
    box-shadow: 0 0 5px #fff;
}

.moon-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #48233C;
}

.aqua-skin input:checked + .switch-mask {
    background-color: #283D3B;
    box-shadow: 0 0 5px #fff;
}

.aqua-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #283D3B;
}

.cherryrot-skin input:checked + .switch-mask {
    background-color: #C04848;
    box-shadow: 0 0 5px #fff;
}

.cheryrrot-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #C04848;
}

.titanium-skin input:checked + .switch-mask {
    background-color: #283048;
    box-shadow: 0 0 5px #fff;
}

.titanium-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #283048;
}

.moss-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #134e5e;
}

.moss-skin input:checked + .switch-mask {
    background-color: #134e5e;
    box-shadow: 0 0 5px #fff;
}

.couple-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #3a6186;
}

.couple-skin input:checked + .switch-mask {
    background-color: #3a6186;
    box-shadow: 0 0 5px #fff;
}

.lawrencium-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #0f0c29;
}

.lawrencium-skin input:checked + .switch-mask {
    background-color: #0f0c29;
    box-shadow: 0 0 5px #fff;
}

.courtain-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #070000;
}

.courtain-skin input:checked + .switch-mask {
    background-color: #070000;
    box-shadow: 0 0 5px #fff;
}

.relay-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #3A1C71;
}

.relay-skin input:checked + .switch-mask {
  background-color: #3A1C71;
  box-shadow: 0 0 5px #fff;
}

.forest-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #093028;
}

.forest-skin input:checked + .switch-mask {
    background-color: #093028;
    box-shadow: 0 0 5px #fff;
}

.premiumblack-skin input:focus + .switch-mask {
    box-shadow: 0 0 1px #434343;
}

.premiumblack-skin input:checked + .switch-mask {
    background-color: #434343;
    box-shadow: 0 0 5px #fff;
}

.moon-skin .checkmark,
.aqua-skin .checkmark,
.cherryrot-skin .checkmark,
.titanium-skin .checkmark,
.moss-skin .checkmark,
.couple-skin .checkmark,
.lawrencium-skin .checkmark,
.courtain-skin .checkmark,
.relay-skin .checkmark,
.forest-skin .checkmark,
.premiumblack-skin .checkmark {
    box-shadow: 0 0 5px #fff;
}

/* SCADA */
#scada-menu-button,
#scada-fullscreen-button {
    font-size: 30px;
    position: absolute;
    cursor: pointer;
    color: #3bb7f7;
    z-index: 1;
}

#scada-menu-button {
    top: 10px;
    left: 30px;
}

#scada-fullscreen-button {
    top: 10px;
    right: 30px;
}

#scada-menu-button i,
#scada-fullscreen-button i {
    text-shadow: 0 0 10px rgba(0,0,0,.6);
    font-size: 30px;
}

.moon-skin #scada-menu-button,
.moon-skin #scada-fullscreen-button,
.moon-skin #scada-fullscreen-button-mobile {
    color: #48233C;
}

.aqua-skin #scada-menu-button,
.aqua-skin #scada-fullscreen-button,
.aqua-skin #scada-fullscreen-button-mobile {
    color: #283D3B;
}

.cherryrot-skin #scada-menu-button,
.cherryrot-skin #scada-fullscreen-button,
.cherryrot-skin #scada-fullscreen-button-mobile {
    color: #c04848;
}

.titanium-skin #scada-menu-button,
.titanium-skin #scada-fullscreen-button,
.titanium-skin #scada-fullscreen-button-mobile {
    color: #252525;
}

.moss-skin #scada-menu-button,
.moss-skin #scada-fullscreen-button,
.moss-skin #scada-fullscreen-button-mobile {
    color: #134e5e;
}

.couple-skin #scada-menu-button,
.couple-skin #scada-fullscreen-button,
.couple-skin #scada-fullscreen-button-mobile {
    color: #3a6186;
}

.lawrencium-skin #scada-menu-button,
.lawrencium-skin #scada-fullscreen-button,
.lawrencium-skin #scada-fullscreen-button-mobile {
    color: #0f0c29;
}

.courtain-skin #scada-menu-button,
.courtain-skin #scada-fullscreen-button,
.courtain-skin #scada-fullscreen-button-mobile {
    color: #4c0001;
}

.relay-skin #scada-menu-button,
.relay-skin #scada-fullscreen-button,
.relay-skin #scada-fullscreen-button-mobile {
    color: #3a1c71;
}

.forest-skin #scada-menu-button,
.forest-skin #scada-fullscreen-button,
.forest-skin #scada-fullscreen-button-mobile {
    color: #093028;
}

.premiumblack-skin #scada-menu-button,
.premiumblack-skin #scada-fullscreen-button,
.premiumblack-skin #scada-fullscreen-button-mobile {
    color: #434343;
}

#scada-nav {
    width: 250px;
    position: absolute;
    left: 30px;
    top: 50px;
    z-index: 1;
}

#scada-container {
    min-height: 100px;
    position: relative;
    margin-top: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

#scada-container img {
    width: 100%;
    max-height: 720px;
}

#scada-container.fullscreen {
    margin: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
}

#scada-list {
    list-style-type: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 1);
    padding: 0;
    border-radius: 5px;
}

#scada-list li {
    padding: 5px 10px;
    cursor: pointer;
}

#scada-list li:not(:last-child) {
    border-bottom: 1px solid;
}

#scada-list li.active:not(:last-child) {
    color: #fff;
    font-weight: 900;
    border-bottom: 2px solid #fff;
}

#scada-list li.active:last-child {
    border-top: 1px solid #fff;
    font-weight: 900;
}


.scada-resource {
    position: absolute;
    background-color: #becad6;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 6px 15px rgba(0,0,0,.25);
}

.scada-resource.active {
    position: absolute;
    background: rgb(60,182,248); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(60,182,248,1) 0%, rgba(94,170,229,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(60,182,248,1) 0%,rgba(94,170,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(60,182,248,1) 0%,rgba(94,170,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cb6f8', endColorstr='#5eaae5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 6px 15px rgba(0,0,0,.25);
}

#scada-list .btn {
    padding: 2px 8px;
}

#no-scada-container {
    background: rgba(0,0,0,0.8);
    background-size: cover;
    border-radius: 6px;
    padding: 30px 40px;
    width: 770px;
    margin: 0 auto;
    position: relative;
    min-height: 350px
}

#no-scada-container h1 {
    text-align: center;
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400;
}

#no-scada-container p.no-scada {
    color: #becad6;
    font-size: 20px;
    text-align: center;
    margin: 150px 0;
}

#no-scada-container .spinner-container {
    font-size: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

#scada-container .scada-resource {
    width: 50px;
}

.scada-resource.dimmer .scada-icon,
.scada-resource.door_lock .scada-icon,
.scada-resource.door_sensor .scada-icon,
.scada-resource.presence_sensor .scada-icon,
.scada-resource.flood_sensor .scada-icon,
.scada-resource.com\.fibaro\.FGFS101 .scada-icon,
.scada-resource.heat_counter .scada-icon,
.scada-resource.meter .scada-icon {
    margin-left: 5.5px;
}

/* Hover SCADA */
.scada-resource.dimmer .resource-name {
    width: 100%;
}

.scada-resource.heat_counter .resource-name,
.scada-resource.meter .resource-name {
    margin-left: 5px;
}

.scada-resource.dimmer,
.scada-resource.door_lock,
.scada-resource.door_sensor,
.scada-resource.presence_sensor,
.scada-resource.flood_sensor,
.scada-resource.com\.fibaro\.FGFS101,
.scada-resource.modbus_vcv,
.scada-resource.heat_counter,
.scada-resource.meter {
    transition: width .6s ease-in-out;
}

.scada-resource.dimmer:hover,
.scada-resource.door_lock:hover,
.scada-resource.door_sensor:hover,
.scada-resource.presence_sensor:hover,
.scada-resource.flood_sensor:hover,
.scada-resource.com\.fibaro\.FGFS101:hover,
.scada-resource.modbus_vcv:hover,
.scada-resource.modbus_vcv_10_res:hover,
.scada-resource.modbus_vcv_11_res:hover,
.scada-resource.modbus_temp:hover,
.scada-resource.temperature:hover,
.scada-resource.wmc:hover,
.scada-resource.com\.fibaro\.temperatureSensor:hover,
.scada-resource.heat_counter:hover,
.scada-resource.meter:hover,
.scada-resource.status_machine:hover,
.scada-resource.lights_scenario_all:hover,
.scada-resource.scenario:hover,
.scada-resource.gate:hover {
    width: auto !important;
}

#scada-container .scada-resource.gate .scada-icon {
    background-image: url('../img/scada/confort/gate_off.png')
}

.scada-resource.temperature:hover .resource-value,
.scada-resource.com\.fibaro\.temperatureSensor:hover .resource-value {
    width: 100% !important;
}

#scada-container .scenario .scada-icon {
    background-image: url('../img/scada/confort/scenario.png');
} 

#scada-container .lights_scenario_all .scada-icon,
#scada-container .lights_scenario_all .scada-icon.active {
    background-image: url('../img/scada/confort/light_on.png')
}


#scada-container .scada-resource.group.temperature,
#scada-container .scada-resource.group.wmc,
#scada-container .scada-resource.group.modbus_temp,
#scada-container .scada-resource.group.knx_temp,
#scada-container .scada-resource.group.vcv,
#scada-container .scada-resource.group.modbus_vcv,
#scada-container .scada-resource.group.modbus_vcv_10_res,
#scada-container .scada-resource.group.modbus_vcv_11_res,
#scada-container .scada-resource.group.vending_machine {
    height: auto;
}

#scada-container .scada-resource.group.temperature .scada-group-values > div:not(.humidity-value),
#scada-container .scada-resource.group.wmc .scada-group-values > div:not(.temperature-value),
#scada-container .scada-resource.group.modbus_temp .scada-group-values > div:not(.temperature-value),
#scada-container .scada-resource.group.knx_temp .scada-group-values > div:not(.temperature-value) {
    margin-right: 10px;
}

#scada-container .scada-resource.group.temperature .scada-group-values,
#scada-container .scada-resource.group.wmc .scada-group-values,
#scada-container .scada-resource.group.modbus_temp .scada-group-values,
#scada-container .scada-resource.group.knx_temp .scada-group-values,
#scada-container .scada-resource.group.vending_machine .scada-group-values,
#scada-container .scada-resource.group.vcv .scada-group-values,
#scada-container .scada-resource.group.vcv .mode-container,
#scada-container .scada-resource.group.vcv .intensity-container,
#scada-container .scada-resource.group.vcv .settings-container,
#scada-container .scada-resource.group.modbus_vcv .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv .mode-container,
#scada-container .scada-resource.group.modbus_vcv .intensity-container,
#scada-container .scada-resource.group.modbus_vcv .settings-container,
#scada-container .scada-resource.group.modbus_vcv_10_res .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv_10_res .mode-container,
#scada-container .scada-resource.group.modbus_vcv_10_res .intensity-container,
#scada-container .scada-resource.group.modbus_vcv_10_res .settings-container,
#scada-container .scada-resource.group.modbus_vcv_11_res .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv_11_res .mode-container,
#scada-container .scada-resource.group.modbus_vcv_11_res .intensity-container,
#scada-container .scada-resource.group.modbus_vcv_11_res .settings-container {
    display: none;
}

#scada-container .scada-resource.group.vcv .mode-container,
#scada-container .scada-resource.group.vcv .settings-container,
#scada-container .scada-resource.group.vcv .intensity-container,
#scada-container .scada-resource.group.modbus_vcv .mode-container,
#scada-container .scada-resource.group.modbus_vcv .settings-container,
#scada-container .scada-resource.group.modbus_vcv .intensity-container,
#scada-container .scada-resource.group.modbus_vcv_10_res .mode-container,
#scada-container .scada-resource.group.modbus_vcv_10_res .settings-container,
#scada-container .scada-resource.group.modbus_vcv_10_res .intensity-container,
#scada-container .scada-resource.group.modbus_vcv_11_res .mode-container,
#scada-container .scada-resource.group.modbus_vcv_11_res .settings-container,
#scada-container .scada-resource.group.modbus_vcv_11_res .intensity-container {
    margin-top: 10px;
    margin-left: 10px;
    padding: 3px;
    border: 1px solid #fff;
    border-radius: 5px; 
}

#scada-container .scada-resource.group.vcv input[type=checkbox],
#scada-container .scada-resource.group.modbus_vcv input[type=checkbox],
#scada-container .scada-resource.group.modbus_vcv_10_res input[type=checkbox],
#scada-container .scada-resource.group.modbus_vcv_11_res input[type=checkbox] {
    display: block;
    margin: 5px auto;
    height: 15px;
    width: 15px;
}

.label.vcv_mode {
    margin-right: 10px;
}

#scada-container .scada-resource.group.vcv input[type=radio],
#scada-container .scada-resource.group.modbus_vcv input[type=radio],
#scada-container .scada-resource.group.modbus_vcv_10_res input[type=radio],
#scada-container .scada-resource.group.modbus_vcv_11_res input[type=radio] {
    display: block;
    margin: 0 auto;
}

#scada-container .scada-resource.group.temperature:hover .scada-group-values,
#scada-container .scada-resource.group.wmc:hover .scada-group-values,
#scada-container .scada-resource.group.modbus_temp:hover .scada-group-values,
#scada-container .scada-resource.group.knx_temp:hover .scada-group-values,
#scada-container .scada-resource.group.vcv:hover .scada-group-values,
#scada-container .scada-resource.group.vcv:hover .mode-container,
#scada-container .scada-resource.group.vcv:hover .intensity-container,
#scada-container .scada-resource.group.vcv:hover .settings-container,
#scada-container .scada-resource.group.modbus_vcv:hover .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv:hover .mode-container,
#scada-container .scada-resource.group.modbus_vcv:hover .intensity-container,
#scada-container .scada-resource.group.modbus_vcv:hover .settings-container,
#scada-container .scada-resource.group.modbus_vcv_10_res:hover .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv_10_res:hover .mode-container,
#scada-container .scada-resource.group.modbus_vcv_10_res:hover .intensity-container,
#scada-container .scada-resource.group.modbus_vcv_10_res:hover .settings-container,
#scada-container .scada-resource.group.vending_machine:hover .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv_11_res:hover .scada-group-values,
#scada-container .scada-resource.group.modbus_vcv_11_res:hover .mode-container,
#scada-container .scada-resource.group.modbus_vcv_11_res:hover .intensity-container,
#scada-container .scada-resource.group.modbus_vcv_11_res:hover .settings-container {
    display: flex;
    margin-left: 10px;
}

#scada-container .scada-resource.group.temperature:hover .resource-name,
#scada-container .scada-resource.group.wmc:hover .resource-name,
#scada-container .scada-resource.group.modbus_temp:hover .resource-name,
#scada-container .scada-resource.group.knx_temp:hover .resource-name,
#scada-container .scada-resource.group.vcv:hover .resource-name,
#scada-container .scada-resource.group.modbus_vcv:hover .resource-name,
#scada-container .scada-resource.group.modbus_vcv_10_res:hover .resource-name,
#scada-container .scada-resource.group.modbus_vcv_11_res:hover .resource-name {
    margin-left: 10px;
}

.scada-resource:hover {
    z-index: 1;
}

#scada-container .scada-icon {
    padding: 15px;
    background-size: 26px 26px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 0 auto;
}

#scada-container .scada-icon.centered {
    padding: 21px;
}

.scada-screen {
    width: 100%;
    height: 100%;
}

#scada-container .resource-name {
    display: none;
    text-align: center;
    margin-left: 5px;
}

#scada-container .light .resource-name,
#scada-container .com\.fibaro\.binarySwitch .resource-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
}

#scada-container .scada-resource:not(.group) .resource-value {
    position: absolute;
    background-color: #3cb6f8 !important;
    top: 40px;
    left: 12.5px;
    min-width: 26px;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#scada-container .scada-resource.heat_counter .resource-value,
#scada-container .scada-resource.meter .resource-value {
    left: 0;
    width: 100%;
}

#scada-container .temperature:not(.group),
#scada-container .com\.fibaro\.temperatureSensor {
    width: auto;
}

#scada-container .temperature:not(.group) .resource-value,
#scada-container .com\.fibaro\.temperatureSensor .resource-value {
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 70px !important;
}

#scada-container .humidity:not(.group) .resource-value {
    width: 80px;
    left: -27px;
}

@media screen and (max-width: 1024px) {
    #scada-container {
        margin-top: 50px;
    }
}

/* Confort icons */
#scada-container .light.confort .scada-icon,
#scada-container .dimmer.confort .scada-icon,
#scada-container .scenario_lights_on.confort .scada-icon,
#scada-container .scenario_lights_off.confort .scada-icon,
#scada-container .lights_memory.confort .scada-icon,
#scada-container .lights_input.confort .scada-icon,
#scada-container .com\.fibaro\.binarySwitch.confort .scada-icon {
    background-image: url('../img/scada/confort/light_off.png');
}

#scada-container .light.confort .scada-icon.active,
#scada-container .dimmer.confort .scada-icon.active,
#scada-container .scenario_lights_on.confort .scada-icon.active,
#scada-container .scenario_lights_off.confort .scada-icon.active,
#scada-container .lights_memory.confort .scada-icon.active,
#scada-container .lights_input.confort .scada-icon.active,
#scada-container .com\.fibaro\.binarySwitch.confort .scada-icon.active {
    background-image: url('../img/scada/confort/light_on.png');
}

#scada-container .heater.confort .scada-icon,
#scada-container .temperature.confort .scada-icon,
#scada-container .wmc.confort .scada-icon,
#scada-container .instruction.confort .scada-icon,
#scada-container .knx_temp.confort .scada-icon,
#scada-container .modbus_temp.confort .scada-icon,
#scada-container .com\.fibaro\.temperatureSensor.confort .scada-icon {
    background-image: url('../img/scada/confort/temperature.png');
}

#scada-container .temperature.confort .scada-icon.cold,
#scada-container .wmc.confort .scada-icon.cold,
#scada-container .knx_temp.confort .scada-icon.cold,
#scada-container .modbus_temp.confort .scada-icon.cold,
#scada-container .com\.fibaro\.temperatureSensor.confort .scada-icon.cold {
    background-image: url('../img/scada/confort/temperature_cold.png');
}

#scada-container .temperature.confort .scada-icon.medium,
#scada-container .wmc.confort .scada-icon.medium,
#scada-container .knx_temp.confort .scada-icon.medium,
#scada-container .modbus_temp.confort .scada-icon.medium,
#scada-container .com\.fibaro\.temperatureSensor.confort .scada-icon.medium {
    background-image: url('../img/scada/confort/temperature_medium.png');
}

#scada-container .temperature.confort .scada-icon.hot,
#scada-container .wmc.confort .scada-icon.hot,
#scada-container .knx_temp.confort .scada-icon.hot,
#scada-container .modbus_temp.confort .scada-icon.hot,
#scada-container .com\.fibaro\.temperatureSensor.confort .scada-icon.hot {
    background-image: url('../img/scada/confort/temperature_hot.png');
}

#scada-container .humidity.confort .scada-icon {
    background-image: url('../img/scada/confort/humidity.png');
}

#scada-container .blinds_status_up.confort .scada-icon,
#scada-container .blinds_status_down.confort .scada-icon,
#scada-container .blinds_up.confort .scada-icon,
#scada-container .blinds_down.confort .scada-icon,
#scada-container .blinds_2_buttons_input.confort .scada-icon,
#scada-container .blinds_2_buttons_memory.confort .scada-icon,
#scada-container .blinds_1_button_input.confort .scada-icon,
#scada-container .blinds_1_button_memory.confort .scada-icon {
    background-image: url('../img/scada/confort/blinds_off.png');
}

#scada-container .blinds_status_up.confort .scada-icon.active,
#scada-container .blinds_status_down.confort .scada-icon.active,
#scada-container .blinds_up.confort .scada-icon.active,
#scada-container .blinds_down.confort .scada-icon.active,
#scada-container .blinds_2_buttons_input.confort .scada-icon.active,
#scada-container .blinds_2_buttons_memory.confort .scada-icon.active,
#scada-container .blinds_1_button_input.confort .scada-icon.active,
#scada-container .blinds_1_button_memory.confort .scada-icon.active {
    background-image: url('../img/scada/confort/blinds_on.png');
}

#scada-container .vcv_mode.confort .scada-icon,
#scada-container .vcv_auto.confort .scada-icon,
#scada-container .vcv_low.confort .scada-icon,
#scada-container .vcv_medium.confort .scada-icon,
#scada-container .vcv_high.confort .scada-icon,
#scada-container .ventilation_min.confort .scada-icon,
#scada-container .ventilation_med.confort .scada-icon,
#scada-container .on_off.confort .scada-icon,
#scada-container .fan_speed.confort .scada-icon,
#scada-container .settings.confort .scada-icon,
#scada-container .fan_speed_auto.confort .scada-icon,
#scada-container .fan_speed_low.confort .scada-icon,
#scada-container .fan_speed_medium.confort .scada-icon,
#scada-container .fan_speed_high.confort .scada-icon,
#scada-container .settings_heating.confort .scada-icon,
#scada-container .settings_cooling.confort .scada-icon,
#scada-container .settings_ventilation.confort .scada-icon,
#scada-container .vcv.confort .scada-icon,
#scada-container .modbus_vcv.confort .scada-icon,
#scada-container .modbus_vcv_10_res.confort .scada-icon,
#scada-container .modbus_vcv_11_res.confort .scada-icon {
    background-image: url('../img/scada/confort/fan_on.png');
}

#scada-container .vcv_mode.confort .scada-icon.active,
#scada-container .vcv_auto.confort .scada-icon.active,
#scada-container .vcv_low.confort .scada-icon.active,
#scada-container .vcv_medium.confort .scada-icon.active,
#scada-container .vcv_high.confort .scada-icon.active,
#scada-container .ventilation_min.confort .scada-icon.active,
#scada-container .ventilation_med.confort .scada-icon.active,
#scada-container .on_off.confort .scada-icon.active,
#scada-container .fan_speed.confort .scada-icon.active,
#scada-container .settings.confort .scada-icon.active,
#scada-container .fan_speed_auto.confort .scada-icon.active,
#scada-container .fan_speed_low.confort .scada-icon.active,
#scada-container .fan_speed_medium.confort .scada-icon.active,
#scada-container .fan_speed_high.confort .scada-icon.active,
#scada-container .settings_heating.confort .scada-icon.active,
#scada-container .settings_cooling.confort .scada-icon.active,
#scada-container .settings_ventilation.confort .scada-icon.active,
#scada-container .vcv.confort .scada-icon.active,
#scada-container .modbus_vcv.confort .scada-icon.active,
#scada-container .modbus_vcv_10_res.confort .scada-icon.active,
#scada-container .modbus_vcv_11_res.confort .scada-icon.active {
    background-image: url('../img/scada/confort/fan_on.png');
}

#scada-container .plug.confort .scada-icon,
#scada-container .com\.fibaro\.FGWP101.confort .scada-icon,
#scada-container .com\.fibaro\.FGWP102.confort .scada-icon {
    background-image: url('../img/scada/confort/plug_off.png');
}

#scada-container .plug.confort .scada-icon.active,
#scada-container .com\.fibaro\.FGWP101.confort .scada-icon.active,
#scada-container .com\.fibaro\.FGWP102.confort .scada-icon.active {
    background-image: url('../img/scada/confort/plug_on.png');
}

#scada-container .flood_sensor.confort .scada-icon,
#scada-container .com\.fibaro\.FGFS101.confort .scada-icon {
    background-image: url('../img/scada/confort/flood.png');
}

#scada-container .flood_sensor.confort .scada-icon.active,
#scada-container .com\.fibaro\.FGFS101.confort .scada-icon.active {
    background-image: url('../img/scada/confort/flood.png');
}

#scada-container .smoke_sensor.confort .scada-icon {
    background-image: url('../img/scada/confort/smoke_off.png');
}

#scada-container .smoke_sensor.confort .scada-icon.active {
    background-image: url('../img/scada/confort/smoke_on.png');
}

#scada-container .presence_sensor.confort .scada-icon {
    background-image: url('../img/scada/confort/motion_activated.png');
}

#scada-container .presence_sensor.confort .scada-icon.active {
    background-image: url('../img/scada/confort/motion.png');
}

#scada-container .door_sensor.confort .scada-icon,
#scada-container .door_lock.confort .scada-icon {
    background-image: url('../img/scada/confort/door-off.png');
}

#scada-container .door_sensor.confort .scada-icon.active,
#scada-container .door_lock.confort .scada-icon.active {
    background-image: url('../img/scada/confort/door-on.png');
}

#scada-container .window_sensor.confort .scada-icon {
    background-image: url('../img/scada/confort/window_off.png');
}

#scada-container .window_sensor.confort .scada-icon.active {
    background-image: url('../img/scada/confort/window_on.png');
}

#scada-container .heat_counter .scada-icon,
#scada-container .meter .scada-icon {
    background-image: url('../img/scada/confort/counter.png');
}

/* Energy */
#scada-container .light.energy .scada-icon,
#scada-container .dimmer.energy .scada-icon,
#scada-container .scenario_lights_on.energy .scada-icon,
#scada-container .scenario_lights_off.energy .scada-icon,
#scada-container .lights_memory.energy .scada-icon,
#scada-container .lights_input.energy .scada-icon,
#scada-container .com\.fibaro\.binarySwitch.energy .scada-icon {
    background-image: url('../img/scada/energy/light_off.png');
}

#scada-container .light.energy .scada-icon.active,
#scada-container .dimmer.energy .scada-icon.active,
#scada-container .scenario_lights_on.energy .scada-icon.active,
#scada-container .scenario_lights_off.energy .scada-icon.active,
#scada-container .lights_memory.energy .scada-icon.active,
#scada-container .lights_input.energy .scada-icon.active,
#scada-container .com\.fibaro\.binarySwitch.energy .scada-icon.active {
    background-image: url('../img/scada/energy/light_on.png');
}

#scada-container .heater.energy .scada-icon,
#scada-container .temperature.energy .scada-icon,
#scada-container .wmc.energy .scada-icon,
#scada-container .instruction.energy .scada-icon,
#scada-container .knx_temp.energy .scada-icon,
#scada-container .modbus_temp.energy .scada-icon,
#scada-container .com\.fibaro\.temperatureSensor.energy .scada-icon {
    background-image: url('../img/scada/energy/temperature.png');
}

#scada-container .temperature.energy .scada-icon.cold {
    background-image: url('../img/scada/energy/temperature_cold.png');
}

#scada-container .temperature.energy .scada-icon.medium {
    background-image: url('../img/scada/energy/temperature_medium.png');
}

#scada-container .temperature.energy .scada-icon.hot {
    background-image: url('../img/scada/energy/temperature_hot.png');
}

#scada-container .humidity.energy .scada-icon {
    background-image: url('../img/scada/energy/humidity.png');
}

#scada-container .blinds_status_up.energy .scada-icon,
#scada-container .blinds_status_down.energy .scada-icon,
#scada-container .blinds_up.energy .scada-icon,
#scada-container .blinds_down.energy .scada-icon,
#scada-container .blinds_2_buttons_input.energy .scada-icon,
#scada-container .blinds_2_buttons_memory.energy .scada-icon,
#scada-container .blinds_1_button_input.energy .scada-icon,
#scada-container .blinds_1_button_memory.energy .scada-icon {
    background-image: url('../img/scada/energy/blinds_off.png');
}

#scada-container .blinds_status_up.energy .scada-icon.active,
#scada-container .blinds_status_down.energy .scada-icon.active,
#scada-container .blinds_up.energy .scada-icon.active,
#scada-container .blinds_down.energy .scada-icon.active,
#scada-container .blinds_2_buttons_input.energy .scada-icon.active,
#scada-container .blinds_2_buttons_memory.energy .scada-icon.active,
#scada-container .blinds_1_button_input.energy .scada-icon.active,
#scada-container .blinds_1_button_memory.energy .scada-icon.active {
    background-image: url('../img/scada/energy/blinds_on.png');
}

#scada-container .vcv_mode.energy .scada-icon,
#scada-container .vcv_auto.energy .scada-icon,
#scada-container .vcv_low.energy .scada-icon,
#scada-container .vcv_medium.energy .scada-icon,
#scada-container .vcv_high.energy .scada-icon,
#scada-container .ventilation_min.energy .scada-icon,
#scada-container .ventilation_med.energy .scada-icon,
#scada-container .on_off.energy .scada-icon,
#scada-container .fan_speed.energy .scada-icon,
#scada-container .settings.energy .scada-icon,
#scada-container .fan_speed_auto.energy .scada-icon,
#scada-container .fan_speed_low.energy .scada-icon,
#scada-container .fan_speed_medium.energy .scada-icon,
#scada-container .fan_speed_high.energy .scada-icon,
#scada-container .settings_heating.energy .scada-icon,
#scada-container .settings_cooling.energy .scada-icon,
#scada-container .settings_ventilation.energy .scada-icon,
#scada-container .vcv.energy .scada-icon,
#scada-container .modbus_vcv.energy .scada-icon,
#scada-container .modbus_vcv_10_res.energy .scada-icon,
#scada-container .modbus_vcv_11_res.energy .scada-icon {
    background-image: url('../img/scada/energy/fan_on.png');
}

#scada-container .vcv_mode.energy .scada-icon.active,
#scada-container .vcv_auto.energy .scada-icon.active,
#scada-container .vcv_low.energy .scada-icon.active,
#scada-container .vcv_medium.energy .scada-icon.active,
#scada-container .vcv_high.energy .scada-icon.active,
#scada-container .ventilation_min.energy .scada-icon.active,
#scada-container .ventilation_med.energy .scada-icon.active,
#scada-container .on_off.energy .scada-icon.active,
#scada-container .fan_speed.energy .scada-icon.active,
#scada-container .settings.energy .scada-icon.active,
#scada-container .fan_speed_auto.energy .scada-icon.active,
#scada-container .fan_speed_low.energy .scada-icon.active,
#scada-container .fan_speed_medium.energy .scada-icon.active,
#scada-container .fan_speed_high.energy .scada-icon.active,
#scada-container .settings_heating.energy .scada-icon.active,
#scada-container .settings_cooling.energy .scada-icon.active,
#scada-container .settings_ventilation.energy .scada-icon.active,
#scada-container .vcv.energy .scada-icon.active,
#scada-container .modbus_vcv.energy .scada-icon.active,
#scada-container .modbus_vcv_10_res.energy .scada-icon.active,
#scada-container .modbus_vcv_11_res.energy .scada-icon.active {
    background-image: url('../img/scada/energy/fan_on.png');
}

#scada-container .plug.energy .scada-icon,
#scada-container .com\.fibaro\.FGWP101.energy .scada-icon,
#scada-container .com\.fibaro\.FGWP102.energy .scada-icon {
    background-image: url('../img/scada/energy/plug_off.png');
}

#scada-container .plug.energy .scada-icon.active,
#scada-container .com\.fibaro\.FGWP101.energy .scada-icon.active,
#scada-container .com\.fibaro\.FGWP102.energy .scada-icon.active {
    background-image: url('../img/scada/energy/plug_on.png');
}

#scada-container .flood_sensor.energy .scada-icon,
#scada-container .com\.fibaro\.FGFS101.energy .scada-icon {
    background-image: url('../img/scada/energy/flood_off.png');
}

#scada-container .flood_sensor.energy .scada-icon.active,
#scada-container .com\.fibaro\.FGFS101.energy .scada-icon.active {
    background-image: url('../img/scada/energy/flood_on.png');
}

#scada-container .smoke_sensor.energy .scada-icon {
    background-image: url('../img/scada/energy/smoke_off.png');
}

#scada-container .smoke_sensor.energy .scada-icon.active {
    background-image: url('../img/scada/energy/smoke_on.png');
}

#scada-container .presence_sensor.energy .scada-icon {
    background-image: url('../img/scada/energy/motion.png');
}

#scada-container .presence_sensor.energy .scada-icon.active {
    background-image: url('../img/scada/energy/motion_activated.png');
}

#scada-container .door_sensor.energy .scada-icon,
#scada-container .door_lock.energy .scada-icon {
    background-image: url('../img/scada/energy/door_off.png');
}

#scada-container .door_sensor.energy .scada-icon.active,
#scada-container .door_lock.energy .scada-icon.active {
    background-image: url('../img/scada/energy/door_on.png');
}

#scada-container .window_sensor.energy .scada-icon {
    background-image: url('../img/scada/energy/window_off.png');
}

#scada-container .window_sensor.energy .scada-icon.active {
    background-image: url('../img/scada/energy/window_on.png');
}

/* Hospital */
#scada-container .light.hospital .scada-icon,
#scada-container .dimmer.hospital .scada-icon,
#scada-container .scenario_lights_on.hospital .scada-icon,
#scada-container .scenario_lights_off.hospital .scada-icon,
#scada-container .lights_memory.hospital .scada-icon,
#scada-container .lights_input.hospital .scada-icon,
#scada-container .com\.fibaro\.binarySwitch.hospital .scada-icon {
    background-image: url('../img/scada/hospital/light_off.png');
}

#scada-container .light.hospital .scada-icon.active,
#scada-container .dimmer.hospital .scada-icon.active,
#scada-container .scenario_lights_on.hospital .scada-icon.active,
#scada-container .scenario_lights_off.hospital .scada-icon.active,
#scada-container .lights_memory.hospital .scada-icon.active,
#scada-container .lights_input.hospital .scada-icon.active,
#scada-container .com\.fibaro\.binarySwitch.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/light_on.png');
}

#scada-container .heater.hospital .scada-icon,
#scada-container .temperature.hospital .scada-icon,
#scada-container .wmc.hospital .scada-icon,
#scada-container .instruction.hospital .scada-icon,
#scada-container .knx_temp.hospital .scada-icon,
#scada-container .modbus_temp.hospital .scada-icon,
#scada-container .com\.fibaro\.temperatureSensor.hospital .scada-icon {
    background-image: url('../img/scada/hospital/temperature.png');
}

#scada-container .temperature.hospital .scada-icon.cold {
    background-image: url('../img/scada/hospital/temperature_cold.png');
}

#scada-container .temperature.hospital .scada-icon.medium {
    background-image: url('../img/scada/hospital/temperature_medium.png');
}

#scada-container .temperature.hospital .scada-icon.hot {
    background-image: url('../img/scada/hospital/temperature_hot.png');
}

#scada-container .humidity.hospital .scada-icon {
    background-image: url('../img/scada/hospital/humidity.png');
}

#scada-container .blinds_status_up.hospital .scada-icon,
#scada-container .blinds_status_down.hospital .scada-icon,
#scada-container .blinds_up.hospital .scada-icon,
#scada-container .blinds_down.hospital .scada-icon,
#scada-container .blinds_2_buttons_input.hospital .scada-icon,
#scada-container .blinds_2_buttons_memory.hospital .scada-icon,
#scada-container .blinds_1_button_input.hospital .scada-icon,
#scada-container .blinds_1_button_memory.hospital .scada-icon {
    background-image: url('../img/scada/hospital/blinds_off.png');
}

#scada-container .blinds_status_up.hospital .scada-icon.active,
#scada-container .blinds_status_down.hospital .scada-icon.active,
#scada-container .blinds_up.hospital .scada-icon.active,
#scada-container .blinds_down.hospital .scada-icon.active,
#scada-container .blinds_2_buttons_input.hospital .scada-icon.active,
#scada-container .blinds_2_buttons_memory.hospital .scada-icon.active,
#scada-container .blinds_1_button_input.hospital .scada-icon.active,
#scada-container .blinds_1_button_memory.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/blinds_on.png');
}

#scada-container .vcv_mode.hospital .scada-icon,
#scada-container .vcv_auto.hospital .scada-icon,
#scada-container .vcv_low.hospital .scada-icon,
#scada-container .vcv_medium.hospital .scada-icon,
#scada-container .vcv_high.hospital .scada-icon,
#scada-container .ventilation_min.hospital .scada-icon,
#scada-container .ventilation_med.hospital .scada-icon,
#scada-container .on_off.hospital .scada-icon,
#scada-container .fan_speed.hospital .scada-icon,
#scada-container .settings.hospital .scada-icon,
#scada-container .fan_speed_auto.hospital .scada-icon,
#scada-container .fan_speed_low.hospital .scada-icon,
#scada-container .fan_speed_medium.hospital .scada-icon,
#scada-container .fan_speed_high.hospital .scada-icon,
#scada-container .settings_heating.hospital .scada-icon,
#scada-container .settings_cooling.hospital .scada-icon,
#scada-container .settings_ventilation.hospital .scada-icon,
#scada-container .vcv.hospital .scada-icon,
#scada-container .modbus_vcv.hospital .scada-icon,
#scada-container .modbus_vcv_10_res.hospital .scada-icon,
#scada-container .modbus_vcv_11_res.energy .scada-icon.active {
    background-image: url('../img/scada/hospital/fan_on.png');
}

#scada-container .vcv_mode.hospital .scada-icon.active,
#scada-container .vcv_auto.hospital .scada-icon.active,
#scada-container .vcv_low.hospital .scada-icon.active,
#scada-container .vcv_medium.hospital .scada-icon.active,
#scada-container .vcv_high.hospital .scada-icon.active,
#scada-container .ventilation_min.hospital .scada-icon.active,
#scada-container .ventilation_med.hospital .scada-icon.active,
#scada-container .on_off.hospital .scada-icon.active,
#scada-container .fan_speed.hospital .scada-icon.active,
#scada-container .settings.hospital .scada-icon.active,
#scada-container .fan_speed_auto.hospital .scada-icon.active,
#scada-container .fan_speed_low.hospital .scada-icon.active,
#scada-container .fan_speed_medium.hospital .scada-icon.active,
#scada-container .fan_speed_high.hospital .scada-icon.active,
#scada-container .settings_heating.hospital .scada-icon.active,
#scada-container .settings_cooling.hospital .scada-icon.active,
#scada-container .settings_ventilation.hospital .scada-icon.active,
#scada-container .vcv.hospital .scada-icon.active,
#scada-container .modbus_vcv.hospital .scada-icon.active,
#scada-container .modbus_vcv_10_res.hospital .scada-icon.active,
#scada-container .modbus_vcv_11_res.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/fan_on.png');
}

#scada-container .plug.hospital .scada-icon,
#scada-container .com\.fibaro\.FGWP101.hospital .scada-icon,
#scada-container .com\.fibaro\.FGWP102.hospital .scada-icon {
    background-image: url('../img/scada/hospital/plug_off.png');
}

#scada-container .plug.hospital .scada-icon.active,
#scada-container .com\.fibaro\.FGWP101.hospital .scada-icon.active,
#scada-container .com\.fibaro\.FGWP102.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/plug_on.png');
}

#scada-container .flood_sensor.hospital .scada-icon,
#scada-container .com\.fibaro\.FGFS101.hospital .scada-icon {
    background-image: url('../img/scada/hospital/flood_off.png');
}

#scada-container .flood_sensor.hospital .scada-icon.active,
#scada-container .com\.fibaro\.FGFS101.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/flood_on.png');
}

#scada-container .smoke_sensor.hospital .scada-icon {
    background-image: url('../img/scada/hospital/smoke_off.png');
}

#scada-container .smoke_sensor.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/smoke_on.png');
}

#scada-container .presence_sensor.hospital .scada-icon {
    background-image: url('../img/scada/hospital/motion.png');
}

#scada-container .presence_sensor.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/motion_activated.png');
}

#scada-container .door_sensor.hospital .scada-icon,
#scada-container .door_lock.hospital .scada-icon {
    background-image: url('../img/scada/hospital/door_off.png');
}

#scada-container .door_sensor.hospital .scada-icon.active,
#scada-container .door_lock.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/door_on.png');
}

#scada-container .window_sensor.hospital .scada-icon {
    background-image: url('../img/scada/hospital/window_off.png');
}

#scada-container .window_sensor.hospital .scada-icon.active {
    background-image: url('../img/scada/hospital/window_on.png');
}

/* Industrial */
#scada-container .light.industrial .scada-icon,
#scada-container .dimmer.industrial .scada-icon,
#scada-container .scenario_lights_on.industrial .scada-icon,
#scada-container .scenario_lights_off.industrial .scada-icon,
#scada-container .lights_memory.industrial .scada-icon,
#scada-container .lights_input.industrial .scada-icon,
#scada-container .com\.fibaro\.binarySwitch.industrial .scada-icon {
    background-image: url('../img/scada/industrial/light_off.png');
}

#scada-container .light.industrial .scada-icon.active,
#scada-container .dimmer.industrial .scada-icon.active,
#scada-container .scenario_lights_on.industrial .scada-icon.active,
#scada-container .scenario_lights_off.industrial .scada-icon.active,
#scada-container .lights_memory.industrial .scada-icon.active,
#scada-container .lights_input.industrial .scada-icon.active,
#scada-container .com\.fibaro\.binarySwitch.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/light_on.png');
}

#scada-container .heater.industrial .scada-icon,
#scada-container .temperature.industrial .scada-icon,
#scada-container .wmc.industrial .scada-icon,
#scada-container .instruction.industrial .scada-icon,
#scada-container .knx_temp.industrial .scada-icon,
#scada-container .modbus_temp.industrial .scada-icon,
#scada-container .com\.fibaro\.temperatureSensor.industrial .scada-icon {
    background-image: url('../img/scada/industrial/temperature.png');
}

#scada-container .temperature.industrial .scada-icon.cold {
    background-image: url('../img/scada/industrial/temperature_cold.png');
}

#scada-container .temperature.industrial .scada-icon.medium {
    background-image: url('../img/scada/industrial/temperature_medium.png');
}

#scada-container .temperature.industrial .scada-icon.hot {
    background-image: url('../img/scada/industrial/temperature_hot.png');
}

#scada-container .humidity.industrial .scada-icon {
    background-image: url('../img/scada/industrial/humidity.png');
}

#scada-container .pressure.industrial .scada-icon {
    background-image: url('../img/scada/industrial/pressure_off.png');
}

#scada-container .pressure.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/pressure_normal.png');
}

#scada-container .pressure.industrial .scada-icon.alert {
    background-image: url('../img/scada/industrial/pressure_high.png');
}

#scada-container .blinds_status_up.industrial .scada-icon,
#scada-container .blinds_status_down.industrial .scada-icon,
#scada-container .blinds_up.industrial .scada-icon,
#scada-container .blinds_down.industrial .scada-icon,
#scada-container .blinds_2_buttons_input.industrial .scada-icon,
#scada-container .blinds_2_buttons_memory.industrial .scada-icon,
#scada-container .blinds_1_button_input.industrial .scada-icon,
#scada-container .blinds_1_button_memory.industrial .scada-icon {
    background-image: url('../img/scada/industrial/blinds_off.png');
}

#scada-container .blinds_status_up.industrial .scada-icon.active,
#scada-container .blinds_status_down.industrial .scada-icon.active,
#scada-container .blinds_up.industrial .scada-icon.active,
#scada-container .blinds_down.industrial .scada-icon.active,
#scada-container .blinds_2_buttons_input.industrial .scada-icon.active,
#scada-container .blinds_2_buttons_memory.industrial .scada-icon.active,
#scada-container .blinds_1_button_input.industrial .scada-icon.active,
#scada-container .blinds_1_button_memory.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/blinds_on.png');
}

#scada-container .vcv_mode.industrial .scada-icon,
#scada-container .vcv_auto.industrial .scada-icon,
#scada-container .vcv_low.industrial .scada-icon,
#scada-container .vcv_medium.industrial .scada-icon,
#scada-container .vcv_high.industrial .scada-icon,
#scada-container .ventilation_min.industrial .scada-icon,
#scada-container .ventilation_med.industrial .scada-icon,
#scada-container .on_off.industrial .scada-icon,
#scada-container .fan_speed.industrial .scada-icon,
#scada-container .settings.industrial .scada-icon,
#scada-container .fan_speed_auto.industrial .scada-icon,
#scada-container .fan_speed_low.industrial .scada-icon,
#scada-container .fan_speed_medium.industrial .scada-icon,
#scada-container .fan_speed_high.industrial .scada-icon,
#scada-container .settings_heating.industrial .scada-icon,
#scada-container .settings_cooling.industrial .scada-icon,
#scada-container .settings_ventilation.industrial .scada-icon,
#scada-container .vcv.industrial .scada-icon,
#scada-container .modbus_vcv.industrial .scada-icon,
#scada-container .modbus_vcv_10_res.industrial .scada-icon,
#scada-container .modbus_vcv_11_res.industrial .scada-icon {
    background-image: url('../img/scada/industrial/fan_on.png');
}

#scada-container .vcv_mode.industrial .scada-icon.active,
#scada-container .vcv_auto.industrial .scada-icon.active,
#scada-container .vcv_low.industrial .scada-icon.active,
#scada-container .vcv_medium.industrial .scada-icon.active,
#scada-container .vcv_high.industrial .scada-icon.active,
#scada-container .ventilation_min.industrial .scada-icon.active,
#scada-container .ventilation_med.industrial .scada-icon.active,
#scada-container .on_off.industrial .scada-icon.active,
#scada-container .fan_speed.industrial .scada-icon.active,
#scada-container .settings.industrial .scada-icon.active,
#scada-container .fan_speed_auto.industrial .scada-icon.active,
#scada-container .fan_speed_low.industrial .scada-icon.active,
#scada-container .fan_speed_medium.industrial .scada-icon.active,
#scada-container .fan_speed_high.industrial .scada-icon.active,
#scada-container .settings_heating.industrial .scada-icon.active,
#scada-container .settings_cooling.industrial .scada-icon.active,
#scada-container .settings_ventilation.industrial .scada-icon.active,
#scada-container .vcv.industrial .scada-icon.active,
#scada-container .modbus_vcv.industrial .scada-icon.active,
#scada-container .modbus_vcv_10_res.industrial .scada-icon.active,
#scada-container .modbus_vcv_11_res.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/fan_on.png');
}

#scada-container .plug.industrial .scada-icon,
#scada-container .com\.fibaro\.FGWP101.industrial .scada-icon,
#scada-container .com\.fibaro\.FGWP102.industrial .scada-icon {
    background-image: url('../img/scada/industrial/plug_off.png');
}

#scada-container .plug.industrial .scada-icon.active,
#scada-container .com\.fibaro\.FGWP101.industrial .scada-icon.active,
#scada-container .com\.fibaro\.FGWP102.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/plug_on.png');
}

#scada-container .flood_sensor.industrial .scada-icon,
#scada-container .com\.fibaro\.FGFS101.industrial .scada-icon {
    background-image: url('../img/scada/industrial/flood_off.png');
}

#scada-container .flood_sensor.industrial .scada-icon.active,
#scada-container .com\.fibaro\.FGFS101.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/flood_on.png');
}

#scada-container .smoke_sensor.industrial .scada-icon {
    background-image: url('../img/scada/industrial/smoke_off.png');
}

#scada-container .smoke_sensor.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/smoke_on.png');
}

#scada-container .presence_sensor.industrial .scada-icon {
    background-image: url('../img/scada/industrial/motion.png');
}

#scada-container .presence_sensor.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/motion_activated.png');
}

#scada-container .door_sensor.industrial .scada-icon,
#scada-container .door_lock.industrial .scada-icon {
    background-image: url('../img/scada/industrial/door_off.png');
}

#scada-container .door_sensor.industrial .scada-icon.active,
#scada-container .door_lock.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/door_on.png');
}

#scada-container .window_sensor.industrial .scada-icon {
    background-image: url('../img/scada/industrial/window_off.png');
}

#scada-container .window_sensor.industrial .scada-icon.active {
    background-image: url('../img/scada/industrial/window_on.png');
}

/* Production */
#scada-container .light.production .scada-icon,
#scada-container .dimmer.production .scada-icon,
#scada-container .scenario_lights_on.production .scada-icon,
#scada-container .scenario_lights_off.production .scada-icon,
#scada-container .lights_memory.production .scada-icon,
#scada-container .lights_input.production .scada-icon,
#scada-container .com\.fibaro\.binarySwitch.production .scada-icon {
    background-image: url('../img/scada/production/light_off.png');
}

#scada-container .light.production .scada-icon.active,
#scada-container .dimmer.production .scada-icon.active,
#scada-container .scenario_lights_on.production .scada-icon.active,
#scada-container .scenario_lights_off.production .scada-icon.active,
#scada-container .lights_memory.production .scada-icon.active,
#scada-container .lights_input.production .scada-icon.active,
#scada-container .com\.fibaro\.binarySwitch.production .scada-icon.active {
    background-image: url('../img/scada/production/light_on.png');
}

#scada-container .heater.production .scada-icon,
#scada-container .temperature.production .scada-icon,
#scada-container .wmc.production .scada-icon,
#scada-container .instruction.production .scada-icon,
#scada-container .knx_temp.production .scada-icon,
#scada-container .modbus_temp.production .scada-icon,
#scada-container .com\.fibaro\.temperatureSensor.production .scada-icon {
    background-image: url('../img/scada/production/temperature.png');
}

#scada-container .temperature.production .scada-icon.cold {
    background-image: url('../img/scada/production/temperature_cold.png');
}

#scada-container .temperature.production .scada-icon.medium {
    background-image: url('../img/scada/production/temperature_medium.png');
}

#scada-container .temperature.production .scada-icon.hot {
    background-image: url('../img/scada/production/temperature_hot.png');
}

#scada-container .humidity.production .scada-icon {
    background-image: url('../img/scada/production/humidity.png');
}

#scada-container .scada-resource.group.vending_machine:hover {
    width: auto;
}

#scada-container .vending_machine .scada-icon {
    background-image: url('../img/scada/production-management/vending_machine_off.png');
}

#scada-container .vending_machine .scada-icon.active {
    background-image: url('../img/scada/production-management/vending_machine_on.png');
}

#scada-container .vending_machine .sugar-level {
    background-image: url('../img/scada/production-management/sugar.png');
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
}

#scada-container .vending_machine .coffee-ideal {
    background-image: url('../img/scada/production-management/coffee.png');
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
}

#scada-container .vending_machine .water-level {
    background-image: url('../img/scada/production-management/water.png');
    height: 25px;
    width: 25px;
    background-repeat: no-repeat;
}

#scada-container .blinds_status_up.production .scada-icon,
#scada-container .blinds_status_down.production .scada-icon,
#scada-container .blinds_up.production .scada-icon,
#scada-container .blinds_down.production .scada-icon,
#scada-container .blinds_2_buttons_input.production .scada-icon,
#scada-container .blinds_2_buttons_memory.production .scada-icon,
#scada-container .blinds_1_button_input.production .scada-icon,
#scada-container .blinds_1_button_memory.production .scada-icon {
    background-image: url('../img/scada/production/blinds_off.png');
}

#scada-container .blinds_status_up.production .scada-icon.active,
#scada-container .blinds_status_down.production .scada-icon.active,
#scada-container .blinds_up.production .scada-icon.active,
#scada-container .blinds_down.production .scada-icon.active,
#scada-container .blinds_2_buttons_input.production .scada-icon.active,
#scada-container .blinds_2_buttons_memory.production .scada-icon.active,
#scada-container .blinds_1_button_input.production .scada-icon.active,
#scada-container .blinds_1_button_memory.production .scada-icon.active {
    background-image: url('../img/scada/production/blinds_on.png');
}

#scada-container .vcv_mode.production .scada-icon,
#scada-container .vcv_auto.production .scada-icon,
#scada-container .vcv_low.production .scada-icon,
#scada-container .vcv_medium.production .scada-icon,
#scada-container .vcv_high.production .scada-icon,
#scada-container .ventilation_min.production .scada-icon,
#scada-container .ventilation_med.production .scada-icon,
#scada-container .on_off.production .scada-icon,
#scada-container .fan_speed.production .scada-icon,
#scada-container .settings.production .scada-icon,
#scada-container .fan_speed_auto.production .scada-icon,
#scada-container .fan_speed_low.production .scada-icon,
#scada-container .fan_speed_medium.production .scada-icon,
#scada-container .fan_speed_high.production .scada-icon,
#scada-container .settings_heating.production .scada-icon,
#scada-container .settings_cooling.production .scada-icon,
#scada-container .settings_ventilation.production .scada-icon,
#scada-container .vcv.production .scada-icon,
#scada-container .modbus_vcv.production .scada-icon,
#scada-container .modbus_vcv_10_res.production .scada-icon,
#scada-container .modbus_vcv_11_res.production .scada-icon {
    background-image: url('../img/scada/production/fan_on.png');
}

#scada-container .vcv_mode.production .scada-icon.active,
#scada-container .vcv_auto.production .scada-icon.active,
#scada-container .vcv_low.production .scada-icon.active,
#scada-container .vcv_medium.production .scada-icon.active,
#scada-container .vcv_high.production .scada-icon.active,
#scada-container .ventilation_min.production .scada-icon.active,
#scada-container .ventilation_med.production .scada-icon.active,
#scada-container .on_off.production .scada-icon.active,
#scada-container .fan_speed.production .scada-icon.active,
#scada-container .settings.production .scada-icon.active,
#scada-container .fan_speed_auto.production .scada-icon.active,
#scada-container .fan_speed_low.production .scada-icon.active,
#scada-container .fan_speed_medium.production .scada-icon.active,
#scada-container .fan_speed_high.production .scada-icon.active,
#scada-container .settings_heating.production .scada-icon.active,
#scada-container .settings_cooling.production .scada-icon.active,
#scada-container .settings_ventilation.production .scada-icon.active,
#scada-container .vcv.production .scada-icon.active,
#scada-container .modbus_vcv.production .scada-icon.active,
#scada-container .modbus_vcv_10_res.production .scada-icon.active,
#scada-container .modbus_vcv_11_res.production .scada-icon.active {
    background-image: url('../img/scada/production/fan_on.png');
}

#scada-container .plug.production .scada-icon,
#scada-container .com\.fibaro\.FGWP101.production .scada-icon,
#scada-container .com\.fibaro\.FGWP102.production .scada-icon {
    background-image: url('../img/scada/production/plug_off.png');
}

#scada-container .plug.production .scada-icon.active,
#scada-container .com\.fibaro\.FGWP101.production .scada-icon.active,
#scada-container .com\.fibaro\.FGWP102.production .scada-icon.active {
    background-image: url('../img/scada/production/plug_on.png');
}

#scada-container .flood_sensor.production .scada-icon,
#scada-container .com\.fibaro\.FGFS101.production .scada-icon {
    background-image: url('../img/scada/production/flood_off.png');
}

#scada-container .flood_sensor.production .scada-icon.active,
#scada-container .com\.fibaro\.FGFS101.production .scada-icon.active {
    background-image: url('../img/scada/production/flood_on.png');
}

#scada-container .smoke_sensor.production .scada-icon {
    background-image: url('../img/scada/production/smoke_off.png');
}

#scada-container .smoke_sensor.production .scada-icon.active {
    background-image: url('../img/scada/production/smoke_on.png');
}

#scada-container .presence_sensor.production .scada-icon {
    background-image: url('../img/scada/production/motion.png');
}

#scada-container .presence_sensor.production .scada-icon.active {
    background-image: url('../img/scada/production/motion_activated.png');
}

#scada-container .door_sensor.production .scada-icon,
#scada-container .door_lock.production .scada-icon {
    background-image: url('../img/scada/production/door_off.png');
}

#scada-container .door_sensor.production .scada-icon.active,
#scada-container .door_lock.production .scada-icon.active {
    background-image: url('../img/scada/production/door_on.png');
}

#scada-container .window_sensor.production .scada-icon {
    background-image: url('../img/scada/production/window_off.png');
}

#scada-container .window_sensor.production .scada-icon.active {
    background-image: url('../img/scada/production/window_on.png');
}

/* Security */
#scada-container .light.security .scada-icon,
#scada-container .dimmer.security .scada-icon,
#scada-container .scenario_lights_on.security .scada-icon,
#scada-container .scenario_lights_off.security .scada-icon,
#scada-container .lights_memory.security .scada-icon,
#scada-container .lights_input.security .scada-icon,
#scada-container .com\.fibaro\.binarySwitch.security .scada-icon {
    background-image: url('../img/scada/security/light_off.png');
}

#scada-container .light.security .scada-icon.active,
#scada-container .dimmer.security .scada-icon.active,
#scada-container .scenario_lights_on.security .scada-icon.active,
#scada-container .scenario_lights_off.security .scada-icon.active,
#scada-container .lights_memory.security .scada-icon.active,
#scada-container .lights_input.security .scada-icon.active,
#scada-container .com\.fibaro\.binarySwitch.security .scada-icon.active {
    background-image: url('../img/scada/security/light_on.png');
}

#scada-container .heater.security .scada-icon,
#scada-container .temperature.security .scada-icon,
#scada-container .wmc.security .scada-icon,
#scada-container .instruction.security .scada-icon,
#scada-container .knx_temp.security .scada-icon,
#scada-container .modbus_temp.security .scada-icon,
#scada-container .com\.fibaro\.temperatureSensor.security .scada-icon {
    background-image: url('../img/scada/security/temperature.png');
}

#scada-container .temperature.security .scada-icon.cold {
    background-image: url('../img/scada/security/temperature_cold.png');
}

#scada-container .temperature.security .scada-icon.medium {
    background-image: url('../img/scada/security/temperature_medium.png');
}

#scada-container .temperature.security .scada-icon.hot {
    background-image: url('../img/scada/security/temperature_hot.png');
}

#scada-container .humidity.security .scada-icon {
    background-image: url('../img/scada/security/humidity.png');
}

#scada-container .alarm.security .scada-icon {
    background-image: url('../img/scada/security/off.png');
}

#scada-container .alarm.security .scada-icon.active {
    background-image: url('../img/scada/security/on.png');
}

#scada-container .blinds_status_up.security .scada-icon,
#scada-container .blinds_status_down.security .scada-icon,
#scada-container .blinds_up.security .scada-icon,
#scada-container .blinds_down.security .scada-icon,
#scada-container .blinds_2_buttons_input.security .scada-icon,
#scada-container .blinds_2_buttons_memory.security .scada-icon,
#scada-container .blinds_1_button_input.security .scada-icon,
#scada-container .blinds_1_button_memory.security .scada-icon {
    background-image: url('../img/scada/security/blinds_off.png');
}

#scada-container .blinds_status_up.security .scada-icon.active,
#scada-container .blinds_status_down.security .scada-icon.active,
#scada-container .blinds_up.security .scada-icon.active,
#scada-container .blinds_down.security .scada-icon.active,
#scada-container .blinds_2_buttons_input.security .scada-icon.active,
#scada-container .blinds_2_buttons_memory.security .scada-icon.active,
#scada-container .blinds_1_button_input.security .scada-icon.active,
#scada-container .blinds_1_button_memory.security .scada-icon.active {
    background-image: url('../img/scada/security/blinds_on.png');
}

#scada-container .vcv_mode.security .scada-icon,
#scada-container .vcv_auto.security .scada-icon,
#scada-container .vcv_low.security .scada-icon,
#scada-container .vcv_medium.security .scada-icon,
#scada-container .vcv_high.security .scada-icon,
#scada-container .ventilation_min.security .scada-icon,
#scada-container .ventilation_med.security .scada-icon,
#scada-container .on_off.security .scada-icon,
#scada-container .fan_speed.security .scada-icon,
#scada-container .settings.security .scada-icon,
#scada-container .fan_speed_auto.security .scada-icon,
#scada-container .fan_speed_low.security .scada-icon,
#scada-container .fan_speed_medium.security .scada-icon,
#scada-container .fan_speed_high.security .scada-icon,
#scada-container .settings_heating.security .scada-icon,
#scada-container .settings_cooling.security .scada-icon,
#scada-container .settings_ventilation.security .scada-icon,
#scada-container .vcv.security .scada-icon,
#scada-container .modbus_vcv.security .scada-icon,
#scada-container .modbus_vcv_10_res.security .scada-icon {
    background-image: url('../img/scada/security/fan_on.png');
}

#scada-container .vcv_mode.security .scada-icon.active,
#scada-container .vcv_auto.security .scada-icon.active,
#scada-container .vcv_low.security .scada-icon.active,
#scada-container .vcv_medium.security .scada-icon.active,
#scada-container .vcv_high.security .scada-icon.active,
#scada-container .ventilation_min.security .scada-icon.active,
#scada-container .ventilation_med.security .scada-icon.active,
#scada-container .on_off.security .scada-icon.active,
#scada-container .fan_speed.security .scada-icon.active,
#scada-container .settings.security .scada-icon.active,
#scada-container .fan_speed_auto.security .scada-icon.active,
#scada-container .fan_speed_low.security .scada-icon.active,
#scada-container .fan_speed_medium.security .scada-icon.active,
#scada-container .fan_speed_high.security .scada-icon.active,
#scada-container .settings_heating.security .scada-icon.active,
#scada-container .settings_cooling.security .scada-icon.active,
#scada-container .settings_ventilation.security .scada-icon.active,
#scada-container .vcv.security .scada-icon.active,
#scada-container .modbus_vcv.security .scada-icon.active,
#scada-container .modbus_vcv_10_res.security .scada-icon.active {
    background-image: url('../img/scada/security/fan_on.png');
}

#scada-container .plug.security .scada-icon,
#scada-container .com\.fibaro\.FGWP101.security .scada-icon,
#scada-container .com\.fibaro\.FGWP102.security .scada-icon {
    background-image: url('../img/scada/security/plug_off.png');
}

#scada-container .plug.security .scada-icon.active,
#scada-container .com\.fibaro\.FGWP101.security .scada-icon.active,
#scada-container .com\.fibaro\.FGWP102.security .scada-icon.active {
    background-image: url('../img/scada/security/plug_on.png');
}

#scada-container .flood_sensor.security .scada-icon,
#scada-container .com\.fibaro\.FGFS101.security .scada-icon {
    background-image: url('../img/scada/security/flood_off.png');
}

#scada-container .flood_sensor.security .scada-icon.active,
#scada-container .com\.fibaro\.FGFS101.security .scada-icon.active {
    background-image: url('../img/scada/security/flood_on.png');
}

#scada-container .smoke_sensor.security .scada-icon {
    background-image: url('../img/scada/security/smoke_off.png');
}

#scada-container .smoke_sensor.security .scada-icon.active {
    background-image: url('../img/scada/security/smoke_on.png');
}

#scada-container .presence_sensor.security .scada-icon {
    background-image: url('../img/scada/security/motion_activated.png');
}

#scada-container .presence_sensor.security .scada-icon.active {
    background-image: url('../img/scada/security/motion.png');
}

#scada-container .door_sensor.security .scada-icon,
#scada-container .door_lock.security .scada-icon {
    background-image: url('../img/scada/security/door_off.png');
}

#scada-container .door_sensor.security .scada-icon.active,
#scada-container .door_lock.security .scada-icon.active {
    background-image: url('../img/scada/security/door_on.png');
}

#scada-container .window_sensor.security .scada-icon {
    background-image: url('../img/scada/security/window_off.png');
}

#scada-container .window_sensor.security .scada-icon.active {
    background-image: url('../img/scada/security/window_on.png');
}

/* Scada slider */
.slidecontainer {
    display: none;
}

/* The slider itself */
.modbus_vcv .scada-slider {
    margin: 20px 0;
}

.scada-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    height: 5px;
    border-radius: 20px;
    margin: 10px 0;
}

.scada-slider:hover {
    opacity: 1;
}

.scada-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%; 
    background-color: #1e5f82 !important;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,.15);
}

.scada-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%; 
    background-color: #1e5f82;
    cursor: pointer;
}

#scada-container .scada-resource:not(.no-hover):hover .resource-name {
    display: inline-block;
}

#scada-container .scada-resource.opened {
    width: auto;
    display: flex !important;
}

#scada-container .scada-resource.opened .scada-icon-container {
    display: flex;
}

#scada-container .scada-resource.opened .resource-name {
    display: inline-block;
}

#scada-container .scada-resource.no-hover:not(.opened) .scada-group-container {
    display: none;
}

#scada-container .scada-resource.opened .scada-group-container {
    display: block;
    margin-left: 5px;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 0 5px;
}

#scada-container .scada-resource .blinds-action {
    cursor: pointer;
}

#scada-container .scada-resource.opened .scada-group-container i.fas {
    margin: 0;
    font-size: 30px;
}

#scada-container .scada-resource.opened .scada-group-container i.fas.fa-bars {
    font-size: 24px;
}

#scada-container .scada-resource.opened i.fas.active {
    color: #fff;
    -webkit-animation: scada-animation-button 3000ms infinite;
    -moz-animation: scada-animation-button 3000ms infinite;
    -o-animation: scada-animation-button 3000ms infinite;
    animation: scada-animation-button 3000ms infinite;
}

@-webkit-keyframes scada-animation-button {
    0%   {color: white; }
    100% {color: #52ea1f; }
}

@keyframes scada-animation-button {
    0%   {color: white; }
    100% {color: #52ea1f; }
}

#scada-container .scada-resource:not(.group):hover .slidecontainer {
    display: inline-block;
    width: 100%;
}

#scada-container .scada-resource.group:hover .slidecontainer {
    display: block;
    margin-left: 10px;
}

/* Overwrite dimmer slider */
.dimmer-container a {
    position: absolute;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    /* line-height: 35px; */
    z-index: 99;
    display: inline-block;
    /* background: #3cb6f8; */
    border-radius: 50%;
    height: 35px;
    width: 35px;
}

.moon-skin .dimmer-container a {
    background: #48233C;
    box-shadow: 0 0 5px #fff;
}

.aqua-skin .dimmer-container a {
    background: #283D3B;
    box-shadow: 0 0 5px #fff;
}

.cherryrot-skin .dimmer-container a {
    background: #C04848;
    box-shadow: 0 0 5px #fff;
    top: 6px;
}

.titanium-skin .dimmer-container a {
    background: #283048;
    box-shadow: 0 0 5px #fff;
}

.moss-skin .dimmer-container a {
    background: #134E5E;
    box-shadow: 0 0 5px #fff;
}

.couple-skin .dimmer-container a {
    background: #3a6186;
    box-shadow: 0 0 5px #fff;
}

.lawrencium-skin .dimmer-container a {
    background: #0f0c29;
    box-shadow: 0 0 5px #fff;
}

.courtain-skin .dimmer-container a {
    background: #070000;
    box-shadow: 0 0 5px #fff;
}

.relay-skin .dimmer-container a {
    background: #3A1C71;
    box-shadow: 0 0 5px #fff;
}

.forest-skin .dimmer-container a {
    background: #093028;
    box-shadow: 0 0 5px #fff;
}

.premiumblack-skin .dimmer-container a {
    background: #434343;
    box-shadow: 0 0 5px #fff;
}

.dimmer-container {
    height: 35px;
}

/* .dimmer-container .increase-dim {
    right: 0;
    top: 1px;
    padding-left: 12px;
    padding-top: 1px;
}

.dimmer-container .decrease-dim {
    left: 0;
    top: 1px;
    padding-left: 13px;
    padding-top: 0px;
}

.dimmer-slider {
    background: 0 none !important;
    display: none;
}

.dimmer-slider.active {
    background: 0 none !important;
    display: none !important;
}

.dimmer-slider .noUi-handle {
    display: none;
}

.dimmer-container .noUi-base {
    display: none !important;
} */

/* Login */

.login-background {
    padding: 20px;
}

.switch.sensor-switch .slider { 
    cursor: not-allowed; 
    opacity: 0.7;
}

.scada-resource {
    height: auto !important;
}

.plug .resource-name,
.plug .scada-icon,
.light .resource-name,
.light .scada-icon,
.com\.fibaro\.binarySwitch .resource-name,
.com\.fibaro\.binarySwitch .scada-icon,
.com\.fibaro\.FGWP101 .resource-name,
.com\.fibaro\.FGWP101 .scada-icon,
.com\.fibaro\.FGWP102 .resource-name,
.com\.fibaro\.FGWP102 .scada-icon { 
    display: block !important;
}

.plug .resource-name,
.light .resource-name,
.com\.fibaro\.binarySwitch .resource-name,
.com\.fibaro\.FGWP101 .resource-name,
.com\.fibaro\.FGWP102 .resource-name {
    font-size: 10px;
}

.fullscreen-exit {
    display: none;
    border: 0 none;
    padding: 5px;
    background-color: #3cb6f8;
    width: 100px;
    position: absolute;
    top: 5px;
    right: 15px;
}

.max-viewport {
    max-width: 100vw !important;
    height: 100vh !important;
}

#scada-container.max-viewport img {
    max-height: 100% !important;
}

#scada-fullscreen-button-mobile {
    display: none;
    z-index: 9999;
    font-size: 35px;
    position: absolute;
    right: 20px;
    top: 5px;
    color: #3cb6f8;
    text-shadow: 0 0 10px rgba(0,0,0,.6);
}

@media screen and (max-width: 1024px) {
    #scada-fullscreen-button {
        display: none;
    }

    #scada-fullscreen-button-mobile {
        display: block;
    }
}

.scada-spinner {
    -webkit-animation: rotate 2s infinite;
    -moz-animation: rotate 2s infinite;
    -ms-animation: rotate 2s infinite;
    animation: rotate 1s infinite;
}

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
@-moz-keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
@-ms-keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/default.png);
    height: 50px;
    width: 54px;
}

.moon-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/moon.png);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, .5));
}

.aqua-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/lake.png);
}

.cherryrot-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/cherryrot.png);
}

.titanium-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/titanium.png);
}

.moss-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/moss.png);
}

.couple-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/couple.png);
}

.lawrencium-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/lawrencium.png);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, .5));
}

.courtain-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/courtain.png);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, .5));
}

.relay-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/relay.png);
}

.forest-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/forest.png);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, .5));
}

.premiumblack-skin .panel.multimedia .multimedia-icon {
    background-image: url(../img/multimedia/premium-black.png);
}

.module-type-multimedia {
    background-color: rgba(0,0,0,.40);
    width: 100%;
    display: block;
    margin-top: 5px;
    border-radius: 5px;
    padding: 10px;
}

.playback-control {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.music-control {
    cursor: pointer;
    font-size: 2.5rem;
}

.device-header {
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.device-header.bordered {
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.switch.device-power,
.switch.mute-status {
    margin-left: 5px;
}

.volume-container,
.mute-container,
.playback-control {
    margin-bottom: 5px;
}

.song-control {
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;
}

.mute-container {
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 5px;
}

a.decrease-vol {
    top: 7px;
}

a.increase-vol {
    right: 0;
    top: 7px;
}

/* Munn */

#munn-main {
    -webkit-animation: munn_float 2s infinite;
    -moz-animation: munn_float 2s infinite;
    -ms-animation: munn_float 2s infinite;
    animation: munn_float 2s infinite;
}

@-webkit-keyframes munn_float {
    0% {
        -webkit-transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(5px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}


@-moz-keyframes munn_float {
    0% {
        -moz-transform: translateY(0);
    }
    50% {
        -moz-transform: translateY(5px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}

@-ms-keyframes munn_float {
    0% {
        -ms-transform: translateY(0);
    }
    50% {
        -ms-transform: translateY(5px);
    }
    100% {
        -ms-transform: translateY(0);
    }
}

@keyframes munn_float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

.st6{
    fill:#33E281;
    -webkit-animation: munnBlink 3s infinite;
    -moz-animation: munnBlink 3s infinite;
    -ms-animation: munnBlink 3s infinite;
    animation: munnBlink 3s infinite;
}

@-webkit-keyframes munnBlink {
    0% {
        opacity: 1;
    }
    98% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes munnBlink {
    0% {
        opacity: 1;
    }
    98% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes munnBlink {
    0% {
        opacity: 1;
    }
    98% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes munnBlink {
    0% {
        opacity: 1;
    }
    98% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.new-tab {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #b22222;
    border-radius: 50%;
    background: rgb(178,34,34); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(178,34,34,1) 0%, rgba(170,43,34,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(178,34,34,1) 0%,rgba(170,43,34,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(178,34,34,1) 0%,rgba(170,43,34,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b22222', endColorstr='#aa2b22',GradientType=1 ); /* IE6-9 fallback on horizontal    gradient */
}

#munn-logo {
    margin-top: -3px;
    margin-left: 5px;
}

.st0 {
    fill:#883EDD;
}

.st1 {
    opacity:0.57;fill:#D3D3D3;
}

.st2 {
    fill:#5C00C6;
}

.st3 {
    fill:#7000DB;
}

.st4 {
    fill:#5400B5;
}

.st5 {
    fill:#6D26C0;
}

.st8 {
    fill:#33E281;
}

/* Munn aqua */
/* 
.aqua-skin .light-item {
    fill: #197278;
}

.aqua-skin .lighter-item {
    fill: #209299;
}

.aqua-skin .dark-item {
    fill: #3c5b5e;
}

.aqua-skin .darker-item {
    fill: #324B4D;
}

.aqua-skin .contrast-item {
    fill: #B3E377;
} */

/* Cherryrot */
/* 
.cherryrot-skin .light-item {
    fill: #AB4369;
}

.cherryrot-skin .lighter-item {
    fill: #b76583;
}

.cherryrot-skin .dark-item {
    fill: #97668e;
}

.cherryrot-skin .darker-item {
    fill: #87497C;
}

.cherryrot-skin .contrast-item {
    fill: #00BDFF;
} */

/* Titanium */
/* 
.titanium-skin .light-item {
    fill: #859398;
}

.titanium-skin .lighter-item {
    fill: #747d81;
}

.titanium-skin .dark-item {
    fill: #47636c;
}

.titanium-skin .darker-item {
    fill: #334A52;
}

.titanium-skin .contrast-item {
    fill: #eeee;
} */

/* Moss */
/* 
.moss-skin .light-item {
    fill: #089886;
}

.moss-skin .lighter-item {
    fill: #0aaa96;
}

.moss-skin .dark-item {
    fill: #196174;
}

.moss-skin .darker-item {
    fill: #134E5E;
}

.moss-skin .contrast-item {
    fill: #A3DD78;
} */

/* Couple */
/* 
.couple-skin .light-item {
    fill: #716CA0;
}

.couple-skin .lighter-item {
    fill: #8d87bf;
}

.couple-skin .dark-item {
    fill: #4a749c;
}

.couple-skin .darker-item {
    fill: #3A6186;
}

.couple-skin .contrast-item {
    fill: #FFE3E9;
} */

/* Lawrencium */
/* 
.lawrencium-skin .light-item {
    fill: #4324aa;
}

.lawrencium-skin .lighter-item {
    fill: #5231bf;
}

.lawrencium-skin .dark-item {
    fill: #4518a2;
}

.lawrencium-skin .darker-item {
    fill: #3e1691;
}

.lawrencium-skin .contrast-item {
    fill: #becad6;
} */

/* Courtain */
/* 
.courtain-skin .light-item {
    fill: #761A39;
}

.courtain-skin .lighter-item {
    fill: #8b3250;
}

.courtain-skin .dark-item {
    fill: #6e2c2d
}

.courtain-skin .darker-item {
    fill: #5c1f20;
}

.courtain-skin .contrast-item {
    fill: #becad6;
} */


/* Relay */
/* 
.relay-skin .light-item {
    fill: #3a1c71;
}

.relay-skin .lighter-item {
    fill: #6440a6;
}

.relay-skin .dark-item {
    fill: #431e87;
}

.relay-skin .darker-item {
    fill: #1e0154;
}

.relay-skin .contrast-item {
    fill: #becad6;
} */


/* Forest */
/* 
.forest-skin .light-item {
    fill: #237A57;
}

.forest-skin .lighter-item {
    fill: #41a079;
}

.forest-skin .dark-item {
    fill: #087979;
}

.forest-skin .darker-item {
    fill: #006868;
}

.forest-skin .contrast-item {
    fill: #feff00;
} */


/* Pblack */
/* 
.premiumblack-skin .light-item {
    fill: #fff;
}

.premiumblack-skin .lighter-item {
    fill: #b2b2b2;
}

.premiumblack-skin .dark-item {
    fill: #dfdddd;
}

.premiumblack-skin .darker-item {
    fill: #e6e3e3;
}

.premiumblack-skin .contrast-item {
    fill: #5a5757;
} */

/* */

.dialogue-box {
    background: #7000dc;
    border-radius: .4em;
    padding: 5px;
    overflow: hidden;
    position: relative;
}
.dialogue-tail {
    width: 25px;
    position: absolute;
    bottom: -20px;
    right: 45px;
}

.dialogue-wrapper {
    position: relative;
}

.tutorial-mode .blurred {
    filter: blur(5px);
}

.tutorial-desc {
    height: 100px;
    width: 210px;
    overflow: scroll;
    overflow-x: hidden;
}

.tutorial-next {
    width: 170px;
    padding: 10px 0;
    align-items: center;
    border-radius: 30px;
    margin: 0 auto;
    padding-left: 33px;
    background: linear-gradient(36deg, #4c0492, #ddbff9);
    background-size: 400% 400%;
    -webkit-animation: gradientAnimate 11s ease infinite;
    -moz-animation: gradientAnimate 11s ease infinite;
    animation: gradientAnimate 11s ease infinite;
    margin-top: -25px;
}


.tutorial-start {
    width: 120px;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 30px;
    margin: 0 auto;
    margin-top: -25px;
    padding-left: 33px;
    background: linear-gradient(36deg, #4c0492, #ddbff9);
    background-size: 400% 400%;
    -webkit-animation: gradientAnimate 11s ease infinite;
    -moz-animation: gradientAnimate 11s ease infinite;
    animation: gradientAnimate 11s ease infinite;
    margin-top: -25px;
}

@-webkit-keyframes gradientAnimate {
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}
@-moz-keyframes gradientAnimate {
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}
@keyframes gradientAnimate { 
    0%{background-position:81% 0%}
    50%{background-position:20% 100%}
    100%{background-position:81% 0%}
}

.tutorial-exit {
    position: absolute;
    width: 105px;
    z-index: 999999;
    right: 1px;
    top: -10px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 10px rgba(0,0,0,.25);
    border-radius: 30px;
    padding-left: 33px;
    background: linear-gradient(36deg, #4c0492, #ddbff9);
    background-size: 400% 400%;
    -webkit-animation: gradientAnimate 11s ease infinite;
    -moz-animation: gradientAnimate 11s ease infinite;
    animation: gradientAnimate 11s ease infinite;
    margin-top: -25px;
}


.invisible {
    visibility: hidden;
}

.tutorial-next,
.tutorial-exit {
    display: none;
}

.petting-anim {
    -webkit-animation: petting_ani .8s linear 1 forwards;
    -moz-animation: petting_ani .8s linear 1 forwards;
    -ms-animation: petting_ani .8s linear 1 forwards;
    animation: petting_ani .8s linear 1 forwards;
}

@-webkit-keyframes petting_ani {
    0%{
        transform: translateY(0);
        transform: scale(1);
    }
    100%{
        transform: translateY(-25px);
    }
}

@-moz-keyframes petting_ani {
    0%{
        transform: translateY(0);
        transform: scale(1);
    }
    100%{
        transform: translateY(-25px);
    }
}

@-ms-keyframes petting_ani {
    0%{
        transform: translateY(0);
        transform: scale(1);
    }
    100%{
        transform: translateY(-25px);
    }
}

@keyframes petting_ani {
    0%{
        transform: translateY(0);
        transform: scale(1);
    }
    100%{
        transform: translateY(-25px);
    }
}

.unpetting {
    -webkit-animation: unpetting .8s linear 1 forwards;
    -moz-animation: unpetting .8s linear 1 forwards;
    -ms-animation: unpetting .8s linear 1 forwards;
    animation: unpetting .8s linear 1 forwards;
}

@-webkit-keyframes unpetting {
    0% {
        transform: translateY(-25px);
    }
    50% {
        transform: translateY(0);
    }
}

@-moz-keyframes unpetting {
    0% {
        transform: translateY(-25px);
    }
    50% {
        transform: translateY(0);
    }
}

@-ms-keyframes unpetting {
    0% {
        transform: translateY(-25px);
    }
    50% {
        transform: translateY(0);
    }
}

@keyframes unpetting {
    0% {
        transform: translateY(-25px);
    }
    50% {
        transform: translateY(0);
    }
}

.highlight-txt  {
    color: #33E281 !important;
}

.offer-open {
    color: #33E281;
    cursor: pointer;
    -moz-user-select: none;
    user-select: none;
}

.offer-modal {
    position: absolute;
    z-index: 999999999;
    height: auto;
    background: #F9F8FE;    
    width: 750px;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-top: 28px;
}

.modal-head,
.modal-bod, 
.modal-foot {
    padding: 15px;
}

.modal-head {
    position: relative;
    height: 180px;
    background-image: url('../img/munn/background-modal.svg');
    background-size: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
}

.modal-bod {
    color: #000;
}
.modal-foot {
    height: 150px;
    background-image: url('../img/munn/footer-background.svg');
    background-size: cover;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.modal-foot .close-modal {
    font-family: 'Primer';
    width: 100%;
    text-align: center;
    margin-top: 45px;
    font-size: 21px;
}

.close-modal_btn {
    width: 250px;
    height: 100px;
    background: #F9F8FE;
    cursor: pointer;
    border-radius: 30px;
    padding: 10px;
    color: #7000DC;
    transition: box-shadow .8s ease;
}

.close-modal_btn:hover {
    box-shadow: 0 6px 15px rgba(0,0,0,.25);
}

.cover-tri {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 111%;
}

.munn-mascot {
    transform: rotate(-15deg);
    width: 320px;
    filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
    position: absolute;
    top: 0;
}


.features {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 120px;
    align-items: center;
    font-size: 12px;
    padding-right: 25px;
    border-radius: 5px;
    padding-left: 15px;
}


.features h3 {
    font-size: 16px;
    margin: 0;
}

.features.active {
    background: rgba(0,0,0,.02);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.25);
}

.feature-icon {
    width: 60px;
    height: 60px;
    border-right: 2px solid rgba(0,0,0,.25);
    padding-right: 15px;
    display: flex;
}

.animation-feature {
    fill: #000;
    -webkit-animation: fingerColor 1.8s linear infinite;
    -moz-animation: fingerColor 1.8s linear infinite;
    -ms-animation: fingerColor 1.8s linear infinite;
    animation: fingerColor 1.8s linear infinite;
}

@keyframes fingerColor {
    0% {
        fill: #000;
    }
    100% {
        fill: #7000Dc;
    }
}

.munn-logo {
    width: 180px;
    position: absolute;
    top: 45px;
    left: 350px;
}

.arrow-down-modal img.active {
    transform: rotate(-180deg);
    transition: .5s;
}

.arrow-down-modal img.inactive {
    transform: rotate(0deg);
    transition: .5s;
}

.feature-text {
    width: 350px;
}

.feature-text h3 {
    margin-bottom: 10px;
}

#introduction h3 {
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    padding: 5px;
}

#introduction p {
    margin-bottom: 25px;
}

.features-list {
    position: relative;
    display: none;
    overflow: hidden;
    height: 250px;
}

.offer-modal {
    display: none;
}

.scroll {
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    position: fixed;
    right: 5px;   
    cursor: pointer;
}

.scroll.up .fa-arrow-down {
    transform: rotate(180deg);
    bottom: 300px;
}

.scroll.up {
    opacity: .4;
    top: 660px;
}

.scroll.up.active {
    opacity: 1;
}

.scroll .fa-arrow-down {
    margin: 0 auto;
}

.scroll.down {
    top: 880px;
}

.scroll.down.inactive {
    opacity: .4;
}

.device.macbook {
    display: block;
    margin: 0 auto;
    background-image: url('../img/munn/devices/munn-interface.jpg');
    background-size: 192px;
    background-repeat: no-repeat;
    background-position: 27px 10px;
}

.features:first-child {
    margin-top: 25px;
}

#munn-mock h3 {
    border-bottom: 1px solid rgba(0, 0, 0, .25);
    padding: 5px;
}

#munn-mock img {
    display: block;
    margin: 25px auto;
    box-shadow: 0 0 10px rgba(0,0,0, .25);
}

.menu-circle {
    width: 10px;
    height: 10px;
    padding: 0 10px;
    border-radius: 50%;
    margin-right: 8px;
    background: rgb(112,0,220);
    background: -moz-radial-gradient(center, ellipse cover, rgba(112,0,220,1) 0%, rgba(132,46,219,1) 100%); 
    background: -webkit-radial-gradient(center, ellipse cover, rgba(112,0,220,1) 0%,rgba(132,46,219,1) 100%);
    background: radial-gradient(ellipse at center, rgba(112,0,220,1) 0%,rgba(132,46,219,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7000dc', endColorstr='#842edb',GradientType=1 ); 
    cursor: pointer;
    margin-left: -1px;
}

.munn-menu {
    padding-top: 3px;
    cursor: pointer;
}


#munn-interface {
    max-width: 550px;
}

@media screen and (min-width: 320px) and (max-width: 992px) {
    .offer-modal {
        width: 97%;
        top: 0;
    }

    #munn-interface {
        max-width: 300px;
    }
    
    .scroll.up {
        top: 777px;
    }

    .scroll.down {
        top: 825px;
    }

    .features {
        flex-direction: column;
        border-bottom: 1px solid rgba(0,0,0,.25);
        justify-content: space-evenly;
        height: 100%;
        border: 0 none;
    }

    .feature-icon {
        border: none;
    }

    .feature-text {
        width: auto;
    }
}

@media screen and (min-width: 992px) {
    .history-right-col label.underline {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 991px) {
    .history-right-col {
        margin-top: 20px;
        padding: 0;
    }

    .history-left-col {
        padding: 0;
    }

    .history-right-col label.underline {
        margin-bottom: 0;
    }
}

#munn-mobile {
    width: 80px;
    display: block;
    margin: 0 auto;
    margin-top: 15px;
}

.munn-animated {
    -webkit-animation: munnShake 1s linear 3;
    -moz-animation: munnShake 1s linear 3;
    -ms-animation: munnShake 1s linear 3;
    animation: munnShake 1s linear 3;
}

@-webkit-keyframes munnShake {
    0% { }
    50% { }
    100% { } 
}

@-moz-keyframes munnShake  {
    0% { }
    50% { }
    100% { }
}

@-o-keyframes munnShake  {
    0% { }    
    50% { }
    100% { }
}

@keyframes munnShake  {
    0% {
        transform: translate(0px, 0px);
    }
       
    50% {
        transform: translate(2px, -1px);
        transform: rotate(2deg);
    }

    100% {
        transform: translate(0px, 0px);
        transform: rotate(-2deg);
    }
}

#outer-right {
    fill:#7000DB;
}

#outer-left {
    fill:#883EDD;
}

#inner-right, 
#inner-left {
    fill:#5400B5;
}

.idk {
    opacity:0.15;
    fill:#FFFFFF;
    enable-background:new;
}

#Eye,
#Eye_1_ {
    fill:#33E281;
    -webkit-animation: munnBlink 3s infinite;
    -moz-animation: munnBlink 3s infinite;
    -ms-animation: munnBlink 3s infinite;
    animation: munnBlink 3s infinite;
}

.x-close {
    position : absolute; 
    right: -8px;
    top: -6px;
    color: #fff;
    z-index: 999999;
    background: #252525;
    border-radius: 50%;
    padding: 0 7px;
    border: 2px solid #7000DC;
    box-shadow: 0 0 10px rgba(0,0,0,.75);
    cursor: pointer;
    -moz-user-select: none;
    user-select: none;
}

#cards-page .tutorial-start,
#announcement-page .tutorial-start,
#invoices-page .tutorial-start,
#profile-page .tutorial-start,
#scada-page .tutorial-start,
#service-page .tutorial-start,
#services-page .tutorial-start {
    display: none !important;
    background: #fff !important;
}

/* TADO */
.tado-temp-module {
    padding-bottom: 10px;
    background: rgba(0,0,0,.5);
    border-radius: 5px;
    padding: 10px 6px;
    box-shadow: 0 0 15px #373737;
    border: 0 none;
    margin-top: 10px;
    position: relative;
}

.tado-temp-temperature-container,
.tado-temp-mode-container,
.tado-weather-container {
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #fff;
}

.tado-temp-title {
    font-size: 17px;
    font-weight: 700;
}

.tado-outside-temp-container {
    font-size: 18px;
}

.tado-temp-mode-container {
    font-size: 40px;
}

.tado-temp-mode {
    height: 44px;
    opacity: .4;
    cursor: pointer;
}

.tado-temp-mode.active {
    opacity: 1;
    background-color: rgba(255, 255, 255, .1);
}

.tado-weather-state {
    font-size: 50px;
}

.switch-tado {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 25px;
}

.switch-tado input {
    display: none;
}

.tado-logo {
    position: absolute;
    bottom: 0px;
    right: -15px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
}
/* END Tado */

.history-container,
.history-chart-container,
.history-active-time-container,
.consumption-time-container {
   background: rgba(0,0,0,0.8);
   background-size: cover;
   border-radius: 6px;
   padding: 30px 40px;
   width: 770px;
   margin: 0 auto;
   position: relative;
   min-height: 350px;
   overflow: auto;
}

#consumption-table {
    position: relative;
    width: 690px;
    overflow: hidden;
    border-collapse: collapse;
}

#consumption-table thead {
    position: relative;
    display: block;
    width: 690px;
    overflow: visible;
}

#consumption-table thead th {
    min-width: 120px;
    height: 32px;
    border: 1px solid #222;
    background-color: #000;
}

#consumption-table thead th span,
#consumption-table tbody tr td:nth-child(1) span {
    white-space: nowrap;
    width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    float: left;
}

#consumption-table thead th span input[type=checkbox],
#consumption-table tbody tr td:nth-child(1) input[type=checkbox] {
    float: right;
}

#consumption-table thead th:nth-child(1) {
    position: relative;
    display: block;
    height: 40px;
    background-color: #28282f;
}

#consumption-table tbody {
    position: relative;
    display: block;
    width: 690px;
    height: 239px;
    overflow: scroll;
}

#consumption-table tbody td {
    min-width: 120px;
    border: 1px solid #222;
    text-align: center;
}

#consumption-table tbody tr td:nth-child(1) {
    position: relative;
    display: block;
    height: 40px;
    background-color: #000;
}

#consumption-table caption {
    color: #fff;
    text-align: center;
}

.history-container .v-caption {
    position: absolute;
    transform: rotate(-90deg);
    left: -40px;
    top: 50%;
    color: #fff;
}

.history-container .no-history {
    color: #becad6;
    font-size: 20px;
    text-align: center;
    margin: 150px 0
}

.history-left-col {
    padding-left: 0;
}

.history-right-col {
    padding-right: 0;
}

.history-container .spinner-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0.8;
    z-index: 9
}

.history-container .spinner-container .fa {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    font-size: 30px
}

.history-resources-table-container {
    max-height: 270px;
    width: 100%;
    overflow-y: scroll;
}

.history-resource-footer {
    margin-top: 20px;
    border-top: 1px solid;
    padding: 15px 0 0 0;
}

.history-chart-container,
.history-active-time-container,
.consumption-time-container {
    margin-top: 50px;
}

.bootstrap-datetimepicker-widget {
    background: #000;
    z-index: 1;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
    background: #333;
}

#addNewServiceModal label {
    color: #333;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.upload-btn {
    width: 100px;
    height: 100px;
    border: 2px dashed gray;
    color: #555;
    background-color: white;
    padding: 10px 23px;
    border-radius: 3px;
    font-size: 60px;
}

.upload-btn:hover {
    cursor: pointer;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.ad-images-container {
    height: 106px;
    overflow: auto;
}

.ad-image {   
    margin-right: 5px;
    vertical-align: top;
    width: 100px;
    height: 100px;
    display: inline-block;
    position: relative;
}

.ad-image .ad-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.ad-image:hover .ad-image-overlay {
    display: block;
    background: rgba(0, 0, 0, .6);
}

.ad-image .remove-ad-image {
    display: none;
    position: absolute;
    top: 2px;
    right: 4px;
}

.ad-image:hover .remove-ad-image {
    display: block;
}

.ad-image,
.ad-image img,
.ad-image .ad-image-overlay {
    border-radius: 3px;
}

.ad-image img {
    width: 100px;
    height: 100px;
}

.tutorial-modal {
    position: absolute;
    background-color: #f9f8fE;
    width: 800px;
    z-index: 9999999999999;
    color: #000;
    border-radius: 5px;
}

.tutorial-description {
    padding: 5px;
    margin-right: 15px;
    max-height: 100px;
    overflow: auto;
    border-bottom: 2px solid rgba(0,0,0,.15);
}

.prof-munn {
    float: left;
}

.tutorial-carousel {
    float: right;
    width: 70%;
}
.slick-prev:before, .slick-next:before {
    color: #7000DC !important;
}

.tutorial-image {
    margin-right: 20px;
    display:block;
    margin: 0 auto;
    border-radius: 5px;
}

#prof-munn {
    margin-left: 65px;
    
}

.tutorial-header {
    display: flex;
    height: 150px;
    align-items: center;
    text-align: center;
}

.slick-slide {
    height: 600px;
}

.slick-slide:active,
.slick-slide:focus {
    outline: #7000DC !important;
}

.tutorial-description::-webkit-scrollbar {
    width: 8px;
}

.tutorial-description::-webkit-scrollbar-track {
    background: #becad6;
    box-shadow: inset 0 0 10px rgba(0,0,0,.25);
    border-radius: 5px;
}

.tutorial-description::-webkit-scrollbar-thumb {
    background: rgba(112, 0, 220, 0.41);
    border-radius: 5px;
    
}

.tutorial-description::-webkit-scrollbar-thumb:hover {
    background: #7000DE;
}

.prof-munn h3 {
    text-align: center;
}

.slick-prev:before, .slick-next:before {
    font-size: 30px;
}

.slick-prev {
    left: 14px !important;
    z-index: 99999;
}

.slick-next {
    right: 23px !important;
}

.show-resource-name {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.hide {
    display: none !important;
}

.scada-resource.modbus_vcv,
.scada-resource.modbus_vcv_10_res,
.scada-resource.modbus_temp,
.scada-resource.temperature,
.scada-resource.wmc,
.scada-resource.com\.fibaro\.temperatureSensor {
    background: rgb(60,182,248); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(60,182,248,1) 0%, rgba(94,170,229,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(60,182,248,1) 0%,rgba(94,170,229,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(60,182,248,1) 0%,rgba(94,170,229,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3cb6f8', endColorstr='#5eaae5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.fas, .far {
    font-size: 16px;
    margin-right: 10px;
    width: 16px;
}

#scada-list .li {
    color: #000;
}

.wrapper-speech {
    position: absolute;
    top: 70px;
    right: 10px;
    width: 230px;
}

.speech-bubble {
	position: relative;
	background: #7000DB;
    border-radius: .4em;
    padding: 5px;
    box-shadow: 0 0 22px 1px rgba(0,0,0,.45);
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	right: 43px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: #7000DB;
	border-top: 0;
	border-right: 0;
	margin-left: -10px;
	margin-top: -19px;
}

.high-zindex {
    z-index: 9999999999;
}

#scada-container h1 {
    display: none;
}

.no-landscape img,
.no-landscape .scada-resource {
    -webkit-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    -moz-user-select: none;
    user-select: none;
}

.no-landscape .scada-resource .scada-icon:hover {
    cursor: default !important;
    width: 50px !important;
}

.no-landscape .scada-resource:hover .resource-name {
    display: none !important;
}

.no-landscape h1 {
    display: block !important;
    position: absolute;
    z-index: 9;
    width: 100%;
    background: #3cb6f8;
    width: auto;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
    box-shadow: 0 0 33px rgba(0,0,0,.25);
}

.no-landscape h1 span {
    display: block;
    padding: 15px;
    border: 1px solid #fff;
    margin: 15px auto 0 auto;
    text-align: center;
}


.scada-resource.status_machine .scada-icon {
    background-image: url('../img/scada/energy/off-btn.png');
    background-size: 24px 26px !important;
}

.scada-resource.status_machine .scada-icon.active {
    background-image: url('../img/scada/energy/on-btn.png');
} 

.temperature-value.preview-state {
    background-color: #3cb6f8;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 2px;
    position: absolute;
    top: 32px;
    left: 3px;
}

.scada-resource.temperature:hover .temperature-value.preview-state,
.scada-resource.wmc:hover .temperature-value.preview-state,
.scada-resource.modbus_temp:hover .temperature-value.preview-state,
.scada-resource.knx_temp:hover .temperature-value.preview-state {
    display: none;
}