/* Shelly Cloud App */

winput:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    -webkit-transition: color 9999999999s ease-out, background-color 9999999999s ease-out, background-image 0s ease-out;
}

.half_width {
    width: 50%;
    float: left;
}

.dev_ver {
    display: none;
    position: absolute;
    color: white;
    right: 41%;
    top: 35px;
    text-transform: uppercase;
}

@font-face {
    font-family: Roboto;
    src: url(../font/RobotoCondensed-Regular.ttf);
}

@font-face {
    font-family: Roboto_light;
    src: url(../font/Roboto-Light.ttf);
}

html {
    background-color: #272C2F;
}

body,
body * {
    padding: 0;
    margin: 0;
    font-family: Roboto;
    text-transform: uppercase;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.temp_schedules .loading_state.control_icon:after,
.loading_state .control_icon:after,
#alarms .loading_state .icon:after,
h2.loading_state:after,
h1.loading_state:after,
#device_page.roller_control .control_holder.loading_state:after,
#upload_picture_btn.loading_state .icon:after,
li.temp_sched_item .scene_contr_arrows.loading_state .arrow_main_class:after,
#checkIfOn .loading_state.on_icon .turn_on_icon:after,
.favorite_button.loading_state:after,
#device_page .settings_layout.locked:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: url(../img/loading_anim.png) no-repeat;
    background-size: contain;
    background-position: 50%;
    -webkit-animation: spin 2s linear infinite;
}

.favorite_button.loading_state:after {
    height: 30px;
    width: 30px;
    top: 3px;
}

#alarms .loading_state .icon:after {
    position: relative;
}

.temp_schedules .loading_state.control_icon:after,
#device_page.roller_control .control_holder.loading_state:after {
    background-size: 73%;
}

#checkIfOn .loading_state.on_icon .turn_on_icon:after {
    left: 0;
    width: 80px;
    height: 80px;
    margin-left: -7px;
}

#upload_picture_btn.loading_state .icon {
    background-image: none;
}

h1.loading_state:after,
h2.loading_state:after {
    height: 22px;
    width: 22px;
    right: 46px;
    bottom: 1px;
    margin: auto;
    left: auto;
    background-size: 85%;
}

h1.loading_state,
h2.loading_state {
    position: relative;
}

.control_holder.loading_state {
    background-image: none !important;
}

.ui_block,
.ui_block *,
.has_msg .page * {
    pointer-events: none;
}

body {
    background: url(../img/dark_background.png) repeat;
    height: 100%;
}

input[type="file"] {
    visibility: hidden;
    position: absolute;
    top: -200px;
}

input[type="password"],
input.password,
input.lock_pin {
    background-image: url(../img/pass_icon.png);
    padding-right: 35px;
}

input.user{
    background-image: url(../img/user_icon.png);
}

[type="submit"] .icon,
#image_galery .icon,
#set_sntp .icon,
#wifi_batch_update .icon,
#b_s_on_url_b .icon,
#b_s_off_url_b .icon,
#o_s_on_url_b .icon,
#o_s_off_url_b .icon,
#refresh_log .icon,
#duration_button .icon,
#dimmer_calibrate .icon,
#dimmer_calibrate_top .icon,
.actions_holder button .icon,
.settings_holder button .icon,
.self_test_holder button .icon,
.sensor_mute_holder button .icon
{
    background-image: url(../img/check_icon.png);
    background-size: 24px !important;
}

.image_preloader {
    display: none;
}

#dimmer_calibrate.calibrated .icon {
    background-image: url(../img/disabled.png);
}

#refresh_log .icon {
    background-image: url(../img/check_update_icon.png);
}

.page_content {
    width: 100%;
}

.v_password {
    position: relative;
}

.v_password {
    content: '';
    display: block;
    background: url(../img/see_pass_icon.png) no-repeat;
    height: 30px;
    width: 30px;
    position: absolute;
    background-size: contain;
    top: 0;
    bottom: -60px;
    transition: all .2s;
    right: 10px;
    margin: auto;
}

.v_password.show_it {
    bottom: 0;
}

.not_mobile .v_password:hover,
.v_password.shown {
    background: url(../img/see_pass_active_icon.png) no-repeat;
    background-size: contain;
}

.v_password.contained {
    right: -192px;
    left: 0;
}

.clear {
    clear: both;
    display: block;
}

.hidden {
    display: none !important;
}

.flexer {
    display: flex !important;
}

ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

a {
    color: #fff;
    text-decoration: none;
}

body:not(.mobile) .wifi_msg {
    display: none;
}

body:not(.test_usr) #sidebar .test_feature {
    display: none;
}

.force_full_width {
    width: 100% !important;
    max-width: none !important;
}

.settings_holder .text {
    color: #fff;
    text-transform: none;
    font-size: 16px;
}

.images_manager p,
label:not(#upload_picture_btn) span.text {
    color: #fff;
    text-transform: none;
    font-size: 16px;
    cursor: pointer;
    display: block;
    float: left;
    margin-left: -45px;
    padding-left: 45px;
    width: 100%;
    box-sizing: border-box;
}

.images_manager p,
label.del_acc span,
label.get_auth_key span {
    padding-bottom: 15px;
}

label.th_label span.text {
    padding-left: 35px;
}

label span.text * {
    text-transform: none;
}

.text_input,
.full_width_btn {
    background-color: transparent;
    border: none;
    height: 40px;
    width: 235px;
    margin: auto;
    display: block;
    text-transform: none;
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    padding-left: 42px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 40px;
}

select.text_input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label.full_width_btn {
    text-align: center;
    line-height: 40px;
}

.settings_holder .full_width_btn .text {
    text-transform: uppercase;
}

body.mobile .date_input {
    padding-top: 10px;
}

.auto_settings .text_input,
.max_power_settings .text_input,
.working_time .text_input {
    text-align: center;
    padding-left: 0;
}

.full_width_btn {
    position: relative;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-bottom: 15px;
    padding-top: 1px;
}

#includer .icon,
.full_width_btn .icon {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #27516c;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

.for_text_input {
    margin-bottom: 20px;
}

input:focus,
button:focus,
select:focus {
    outline: none;
}

.input_holder {
    width: 100%;
    padding: 0 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.scene_screen .input_holder {
    display: inline-block;
}

.scene_screen .input_holder:last-child,
.scene_screen .input_holder.small {
    margin-bottom: 20px;
}

input.radio_btn,
input.checkbox {
    display: none;
}

.fake_checkbox {
    display: block;
    height: 20px;
    width: 20px;
    float: left;
    box-shadow: 1px 1px 1.5px -0.5px rgba(255, 255, 255, 0.1), 0.5px 1px 4px 0px rgba(0, 0, 0, 0.7) inset;
    margin-right: 20px;
}

input.radio_btn:checked+label span.fake_checkbox,
input.checkbox:checked+label span.fake_checkbox {
    background: url(../img/checkbox_bg.png) no-repeat 50%;
    background-size: contain;
}

input.checkbox+label.th_label span.fake_checkbox {
    background: none;
}

input.checkbox+label.th_label span.fake_checkbox {
    box-shadow: none;
}

input.radio_btn:not(:checked)+label span.fake_checkbox,
input.checkbox:not(:checked)+label span.fake_checkbox {
    background-image: none;
}

input.checkbox+label.th_label span.fake_checkbox:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #2171a8;
    position: relative;
    top: 0;
    left: 0;
}

input.checkbox:checked+label.th_label span.fake_checkbox:before {
    background-color: #2886c7;
}

input.range,
input.temp_range {
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    height: 10px;
    box-shadow: 1px 1px 1.5px -0.5px rgba(255, 255, 255, 0.1), 0.5px 1px 4px 0px rgba(0, 0, 0, 0.7) inset;
    float: left;
}

input.temp_range {
    background-image: linear-gradient(to right, #fac864, #f0f6ff);
}

input.range::-webkit-slider-thumb,
input.temp_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 30px;
    background: #27516c;
    box-shadow: 0.5px 1px 4px 0px rgba(0, 0, 0, 0.7) inset;
    border: none;
    transform: translateY(-5px);
}

input.temp_range::-webkit-slider-thumb {
    transform: translateY(0px);
}

input.range:active::-webkit-slider-thumb,
input.temp_range:active::-webkit-slider-thumb {
    background: rgba(58, 209, 255, 1);
}

input.range::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #3AD1FF, #3AD1FF) 0 100% no-repeat border-box;
    box-shadow: 1px 1px 1.5px -0.5px rgba(255, 255, 255, 0.1), 0.5px 1px 4px 0px rgba(0, 0, 0, 0.7) inset;
    height: 10px;
}

input#duration,
input#threshold {
    text-align: center;
}

.range_holder {
    width: 100%;
    /* margin-top: 20px;
    height: 20px; */
    margin: auto;
}

.blue {
    color: #2886c7;
    text-transform: capitalize;
}

.full_width {
    width: 100%!important;
}

.info {
    color: #fff;
    text-transform: none;
    margin-bottom: 20px;
    font-size: 16px;
}

.hollow_bg {
    box-shadow: 1px 1px 1.5px -0.5px rgba(255, 255, 255, 0.1), 0.5px 1px 4px 0px rgba(0, 0, 0, 0.7) inset;
    position: relative;
    overflow: hidden;
}

.closed {
    display: none;
    cursor: pointer;
}

.opened {
    cursor: pointer;
    display: block;
}

.refresh_box {
    position: absolute;
    top: 0;
    width: 100%;
    height: 0px;
    background: url(../img/sidebar_white_background.png) repeat;
    overflow: hidden;
    transition: all 1s;
    max-height: 100px;
    z-index: 12;
}

.refresh_box.box_moving {
    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.8);
    transition: all 0s ease 0s;
}

.refresh_box span {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 10px;
}

.mw_1440 {
    max-width: 1440px;
    position: relative;
    min-height: 100%;
    margin: auto;
}

.mw_400 {
    max-width: 400px;
}

.mw_360 {
    max-width: 360px;
}

.toast_msg {
    position: fixed;
    width: 80%;
    display: block;
    height: 40px;
    background: rgba(0, 0, 0, 0.7);
    left: 0;
    right: 0;
    bottom: 50px;
    margin: auto;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50px;
    padding-top: 11px;
    display: none;
}

.toast_msg span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    text-align: center;
    height: 15px;
}


/* ----------- HEADER ------------ */

#connection_status {
    position: absolute;
    margin: auto;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    height: 100%;
    left: 15px;
}

#connection_status {
    width: 32px;
    background-image: url(../img/cloud_online.png);
}

.connection_status #connection_status {
    width: 32px;
    /*TODO: UNCOMENT!!*/
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABLCAYAAACP84LNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDlEQkIzQUMyQzdGMTFFNjkzRjlCQzFFRDhDMkQ2RjUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDlEQkIzQUQyQzdGMTFFNjkzRjlCQzFFRDhDMkQ2RjUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowOURCQjNBQTJDN0YxMUU2OTNGOUJDMUVEOEMyRDZGNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowOURCQjNBQjJDN0YxMUU2OTNGOUJDMUVEOEMyRDZGNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiGbNnIAAAfVSURBVHja7FwJbFVFFJ2WsknZtECkLkHZF9e0irIIKCpGAoqgRASXBDXgghHQEOISA2riBiRuKIGgLFZFBKKG1QqiVIQoQgsYV0A0IBQIKHzP8d1nvg3/z7z/1v/7bnKSpn/eLPfMm3fvnTuTl0gkVMSlCdADuAjoCrQBWgPNgIbACeAQUA38DOwEvgM+B9YDB6M8uLyIEnAWMBS4ASgF6mRYz3FgLfAusBD4JSYgvfQH7geuAfI9rptkLAamA8tjAv4vfYEpMtuDkM+AR4E1tZ2AYmAaMDik9rksjQX21EYCRojym4Y8CfcB9wDzw2g8P4Q26wOvAbMjoHxKc2CefBvq5fobwMEuAnpG1CpcIcvhgVwkoIUMsGsGzx6SZ9cBG4Hvgd3AYY4BKASKgPZAF6C3kFyYQVtfA1cBv+cSAZz5q4FuDp6hg7UMmAksBY5msNQNBEYB1wpRplIhlpn/bwIJ8Bn1gTUJZzIf6ORhH7oBCx32YSVQ4Ld+giDgdQeDrgJ6+9iXfkClg/68mO0EjHAw2NlAowAmRCEw10G/hmYrAWcA+w0GeAIYH4Dia2KiIQF7gZbZSMAiQ+WPDkH5NkYbkjAv2wjoZziwCSEq38Yjhn3t7kf7XpmhxWK2XQJ0kth9M80zc4DbIuKAzQWGa8qU++FAuiGghShwuCjciWwHLhAHKwpSKA5eW025nkJEqH5AMTADOJzIXPpGYOmpiSsN+l0W5hLEQNUEQSMXnJcBQyIaCyqTXbh0mzrFXoavTaOhnZW1v/qES+WT7ckquvK49DGVcGv0xqDD0YwOfilrtlv5GNgSYQI2Ax9pytwUJAFj5LU8xaP2XlXRl1ma37sDDYKwgu4FZng4sENiOR2JOAENJBSdbqntA6zyk4BBykrlcBLCZf7NhxK336Ss/Bz+75jKPuEy1D/N79yL2ApUAV8AK4EdXpmhnYGDDkzKbcDtQMMImpZ+e8fJshkYBzR1E4qoC3xl2CD9gIeCiJmHgIEufBxO3sck6uqYgEmGjTCm3iUHFW+jY8K9/AD0d+KInS5rms7Op8t+NbBX5a4UeTQ+Kvcp8X0SOjN0koHyq2qB8m2DwhMjR/T6FlCQzgo6FfhJY+8zA4Gpg9+q2iFeZyswC29YzXrtN2CkgbM1uRYp3w+hB/10qjdgvUqfGFuprHybv2M9/huULBJ9cA/kFuBsB88zVWZxMgE87KDLm78DeDPWfcpwzjCZ3WcalP8N6ADstx/urXmAyUnzYj2nFCaQva2siLGJnlomR4TzJbiUTpZkQfwmClIty9ELBmUZZ2tlE9BRU3hFrFtHMg5YoCnDtMkxNgHnaApvinXq2Hy9S1kHBtMJz0fkkYDTNAV3xjrNyJGbqClDy6kk38D7PRjrMyPhB/lHTZk++bGefBNu4OuOPZXmG8zwJrEuMxadAdOOBOzTFGoT6zFj+Ubze2sSoNtKOz/WY8aiixo3JgFbNYX6xXr0Txij5qUW96Upc52yIqWHQ+9tjwvDa7t8YyZPtdD8foBvwErdayIudizORXcidBcJYIrFBk1BOhV1s2jg3InqpawIZbmM8ahgt/zvGSmT52M/dMv3NtsPmKMpyLTtB7JA8RwPQ+fcv+Cx2PHA5coKfNUTtJL/PSxlKuUZr30i5pEO05TZYDc612CNZ+Jqtwgrv418z2YqfZ5/zck1U5710uTmuQnd/sBym4A/lHV/Qzrh7VTvKSueHTW5QlkZaiUu6iiROnp50B86r1M0ZRimqEh+7bgm6k6snKusDOcokcAUQqYSFnlQF+v4RFmZH26+P3yjijXluOwnkgn4FXjSoAE6ZrwG7LwIKJ9be+8ob285qSd1dshQ+dyQ0R1AoTEwQ53kw/OcMov/801YLx+5sKyjOjKLGvtQd6HUXcfhsrNA41PZwjT9XScj4C9lXZZXbVBJAzHzeEMhNyAaBUzASJdrvsk3YZThRODmyhZldvSKm/L/7QmnSk8fLK+hE9OMpPFWk+T09D+V81tOTDzhPDEf2/pMMk9z8gqcRJInXF883K5i5w9TZtkQtpCkMh0BlNHAyxH62C4GAQPlb2ZyrArQwlotBHwAXO+irmk1l6h0M/wV4G5lpV1EQZLP5w4IsN0BKfrgVEjegyfzHJWGBJ4KjMK25Nqkvy8LsN3ktJ11LpR/s7J2yRwRQHkfuFhZV3mFKVVJf7cLsN32SX9XZrjs8OzxkVSxE9PBl4rZGdb1Ask7d80DbLd5ij6YWDtDZM0/nqqQEyuHJuqzMvueV1HYH4im0Op7SRy5Ml3hTCKAdCCY/cULtsdK/CQR4ZkY1JvH2A5PwzCgx/uv95tUXuCiYwzgTRcwNsSzs5cK83xLmol36FWYgHXuSVoSWwVEQGWN7wGP3R6QibhNWXspvAy8IpOJWOBRJ7nezVfBXf9La6RHgG3Z8qk4Yp5JtiZmLQmwraV+Vp6tBKyRMIHfsl1mfUxADeFaOzWAdqb6HQnI5tzQWUqfTOBGKpT+5pRaTQCdG4aBq32om3Xems6BigmwhFl9Q5W3N7Ickzq3BjGAXEhP5w3rgzx6E6qlrmVBdT5XzgdQYSWybrtZ80uCVH4uEWAvRwwY3qmcXZ60Q54pDWrZ8cMTjorQZHxDrBd6yty94t4BkwjsOM4+UTr3F3hivVyFuOn0jwADANQ9srhmgvVcAAAAAElFTkSuQmCC);
}

/* ----------- DASHBOARD ------------ */

#dashboard_page {
    display: contents;
}

h1,
.hollow_bg h2,
.hollow_bg li h3,
#device_page h2,
#scenes_page .range_wrapper h2,
#scenes_page .settings_layout h2,
#add_scene #brightness_selector h2,
.ext_temp_title,
.ext_hum_title {
    font-size: 18px;
    width: 100%;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 93.5% 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ext_hum_title,
.ext_temp_title {
    width: 100%;
    float: left;
}
.ext_hum_title .ext_hum_index,
.ext_temp_title .ext_temp_index {
    color: lightslategray;;
    font-size: 13px;
    float: left;
    width: 100%;
}

#relay_usage.hollow_bg h2,
#consumption_calc.hollow_bg h2 {
    margin-bottom: 20px;
}

#relay_usage .input_holder {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.hollow_bg h2,
.hollow_bg li h3 {
    font-size: 16px;
}

h1.page_title {
    text-align: center;
    margin-bottom: 20px;
}

h1.page_title .blue {
    text-transform: uppercase;
}

.colapse.opened,
.scene_colapsed.opened {
    background-image: url(../img/arrow_up.png);
}

.colapse.closed,
.scene_colapsed.closed {
    background-image: url(../img/arrow_down.png);
    display: block;
    /* margin-bottom:2px; */
}

.edit_btns {
    height: 120px;
    position: absolute;
    right: 0;
    width: 60px;
    display: none;
    z-index: 3;
}

#rooms ul li .action {
    height: 120px;
    cursor: pointer;
}

#rooms ul li img{
    align-self: center;
    display: flex;
    width: 100%;
    height: 100%;
}

#rooms ul li .action.edit_btn {
    height: 60px;
}

.edit .edit_btns {
    display: block;
}

.edit_btns button {
    display: block;
    width: 60px;
    height: 60px;
    background-size: 50%;
    background-position: 50%;
    background-repeat: no-repeat;
    border: 0;
}


/* #devices .edit_btns, */

#action_devices .edit_btns {
    height: 65px;
    width: 130px;
}

.edit_btns .edit_btn {
    background-image: url(../img/edit_icon_small.png);
    background-color: #ffcc00;
}

.edit_btns .delete_btn {
    background-image: url(../img/delete_icon.png);
    background-color: #d23830;
}

.discovered_SHEM-1 .control_icon,
.discovered_SHSEN-1 .control_icon,
.discovered_SHHT-1 .control_icon,
.discovered_SHSM-01 .control_icon,
.discovered_SMK1NB .control_icon,
.discovered_SHWT-1 .control_icon,
.discovered_SHDW-1 .control_icon,
.discovered_SHBTN-1 .control_icon,
.discovered_SHBTN-2 .control_icon,
.discovered_SHIX3-1 .control_icon,
.discovered_SHMOS-01 .control_icon {
    display: none !important;
}


/* ----------- SORTABLE ------------ */

.sortable li {
    transform: translateY(0) !important;
}

.sortable li.sortable-fallback {
    visibility: hidden;
}

.drag_overlay {
    display: none;
}

.sortable .drag_overlay {
    width: 33.33333%;
    height: 120px;
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}


/* #group_devices .drag_overlay, */

#room_page .sortable .drag_overlay {
    width: 50%;
    height: 65px;
    right: 0;
    left: auto;
}

.reordering .sortable .drag_overlay {
    display: block;
}

.reordering .sortable .sortable-chosen .drag_overlay {
    background: rgba(255, 255, 255, 0.8);
}

.sortable .drag_overlay p {
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 77px;
    font-size: 16px;
    height: 47px;
    text-align: center;
}

#room_page .sortable .drag_overlay p {
    width: 120px;
    font-size: 16px;
    height: 38px;
}

.sortable .drag_overlay p.drag_text {
    color: #272e30;
}

.cancel_select {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}


/* .ios.reordering {
    position: static;
    overflow: auto;
}

.ios.reordering.start_drag {
    position: fixed;
    width: 100%;
    overflow: scroll;
} */

.reordering .cancel_select {
    display: block;
}

.sortable li:not(.sortable-chosen) .drag_overlay p.drag_text,
.sortable .sortable-chosen .drag_overlay p.hold_text {
    display: none;
}


/* ----------- sortable ------------ */



/* #groups ul li, */


/* #alarms ul li, */
#shared_devices,
#disc_devices,
#rooms ul li,
#scenes ul li {
    width: 100%;
    height: 120px;
    /* background-image: url(../img/default_room_bg.png); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    border-bottom: 2px solid #2886c7;
    position: relative;
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.7) inset;
    cursor: pointer;
}

#shared_devices {
    display: none;
    background-image: url(../img/shared_devices_room.png);
    background-position: center;
    background-size: contain;
}

#disc_devices {
    display: none;
    background-image: url(../img/disc_devices_bg_2.png);
}

/* @media screen and (min-width: 499px) and (max-width: 699px) {
    #disc_devices {
        background-image: url(../img/disc_devices_bg.png);
    }
} */

#disc_devices .action {
    height: 120px;
}


/* #alarms ul li .image_holder h2 */


/* #groups ul li .image_holder h2,  */

#disc_devices h2,
#shared_devices h2,
#rooms ul li h2 {
    width: 33.333333%;
    height: 72px;
    background: rgba(39, 46, 48, 0.8);
    font-size: 18px;
    color: #fff;
    position: relative;
    margin: auto;
    overflow: hidden;
}


/* #groups ul li .image_holder h2 span,
#alarms ul li .image_holder h2 span, */
#shared_devices h2 span,
#disc_devices h2 span,
#rooms ul li h2 span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 5px;
    max-height: 66px;
    overflow: hidden;
}

#shared_devices h2 span div {
    height: auto;
    position: relative;
    color: lightcoral
}


/* #groups ul li div.action,
#alarms ul li div.action {
    height: 100%;
} */

.consumption.big_resolution {
    height: 28px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 33.333333%;
    background: rgba(39, 46, 48, 0.8);
}

.consumption .icon {
    height: 28px;
    width: 28px;
    background: rgba(40, 134, 199, 0.2) url(../img/consumption_icon.png) no-repeat 50%;
    background-size: 10px;
    float: left;
}

.device_offline .device_offline_text,
.consumption .con_text,
.temp_value .temp_text,
.temp_value .temp_unit,
.humidity .hum_text,
.lux .lux_text,
.motion .motion_text,
.tilt .tilt_text,
.vibration .vibration_text,
.shared_count .count_text {
    display: block;
    width: 100%;
    height: 28px;
    margin-left: -28px;
    padding-left: 28px;
    padding-top: 4.5px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
}

.device_offline_text {
    padding-right: 2px;
}

.temp_value .temp_hold {
    text-align: center;
    width: calc(100% - 28px);
    float: left;
}

.temp_value .temp_text,
.temp_value .temp_unit {
    display: inline;
    width: auto;
    margin-left: 0;
    padding-left: 0;
    float: none;
    line-height: 28px;
}

.temp_value .temp_text {
    text-align: right;
}

.temp_value .temp_unit {
    text-align: left;
}

body.mobile #room_inner_page .swipe_controllers h1,
body.mobile #dashboard_page h1 {
    display: none;
}

.room.devices_disc_room .consumption {
    display: none;
}

#controls .consumption {
    padding-top: 45px;
}

#controls .current_cons_title {
    color: #3dcdff;
    display: block;
    text-align: center;
}

#controls .con_text {
    font-size: 30px;
    margin: 0;
    padding-left: 0;
    height: auto;
}

/*
#scenes ul li .image_holder:after,
#action_devices ul li .icon:after,
#devices ul li .icon:after {
    content:'';
    position:absolute;
    top:0;
    right:-3px;
    height:65px;
    width:3px;
    background:url(../img/hollow_border.png) repeat-y;
}*/

#scenes ul li .image_holder h2 span {
    float: left;
    display: block;
}

#scenes ul li .action {
    height: 100%;
}

#scenes ul li .edit_btns .edit_btn {
    height: 50%;
}

#scenes ul li .icon {
    width: 28px;
    height: 28px;
    display: block;
    cursor: pointer;
}

#scenes ul li .image_holder .status_holder {
    position: absolute;
    top: 0;
    left: 0;
}

#scenes ul li .image_holder .status_holder .icon {
    float: left
}

#scenes ul li .image_holder .icon.running.true {
    background: rgba(255, 204, 0, 1) url(../img/running_icon.png) no-repeat 50%;
    background-size: 70%;
}

#scenes ul li .image_holder .icon.enabled.true {
    background: rgba(152, 203, 74, 0.77) url(../img/check_icon.png) no-repeat 50%;
    background-size: 70%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#scenes ul li .image_holder .icon.enabled.false {
    background: rgba(255, 59, 48, 0.77) url(../img/block_icon.png) no-repeat 50%;
    background-size: 70%;
    position: absolute;
    bottom: 0;
    left: 0;
}

#scenes ul li .image_holder h2 {
    width: 33.333333%;
    height: 72px;
    background: rgba(39, 46, 48, 0.8);
    font-size: 18px;
    color: #fff;
    position: relative;
    margin: auto;
    overflow: hidden;
}

#scenes ul li .image_holder h2 .scene_name {
    width: 33.333333%;
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 5px;
    max-height: 66px;
    overflow: hidden;
    overflow-wrap: break-word;
}

#scenes ul li .scene_execute {
    width: 30%;
    height: 120px;
    float: right;
    margin-top: 3px;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0;
    right: 0;
}

#scenes ul li .scene_execute .icon {
    height: 120px;
    float: left;
    background: #27516c url(../img/execute_icon.png) no-repeat 50%;
    background-size: 70%;
}

#scenes ul li .scene_execute .ex_text {
    display: block;
    width: 100%;
    height: 22px;
    margin: auto;
    margin-left: -28px;
    padding-left: 28px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

#room_head .consumption {
    top: 0;
    left: 0;
    width: 100px;
}

#room_inner_page .consumption {
    height: 28px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(39, 46, 48, 0.8);
}

#rooms .shared_count_holder,
#rooms .extras_holder {
    display: flex;
    position: absolute;
    width: 100%;
    height: 28px;
    bottom: 0;
}

#rooms .shared_count_holder>div,
#rooms .extras_holder>div {
    position: static;
    float: left;
    min-width: 20%;
    height: 28px;
    background: rgba(39, 46, 48, 0.8);
}

#rooms .extras_holder>div.consumption {
    width: auto;
    max-width: 20%;
}

#rooms .shared_count_holder>div .icon,
#rooms .extras_holder>div .icon {
    height: 28px;
    width: 28px;
    background: rgba(40, 134, 199, 0.2) url(../img/consumption_icon.png) no-repeat 50%;
    background-size: 10px;
    float: left;
}

#rooms .extras_holder .temp_value .icon {
    background-image: url(../img/temp_icon.png);
}

#rooms .extras_holder .humidity .icon {
    background-image: url(../img/humidity_icon.png);
}

#rooms .extras_holder .lux .icon {
    background-image: url(../img/lux_icon.png);
    background-size: 13px;
}

#rooms .extras_holder .tilt .icon,
#device_page.single_control #tilt_value {
    background-image: url(../img/tilt_icon.png);
    background-size: 13px;
}

#rooms .extras_holder .vibration .icon {
    background-image: url(../img/vibration_icon.png);
    background-size: 13px;
}

#rooms .extras_holder .motion .icon {
    background-image: url(../img/motion_icon.png);
    background-size: 13px;
}

#rooms .shared_count_holder .shared_count .icon {
    background-image: url(../img/shared.svg);
    background-size: 15px;
}

#rooms .extras_holder.type_SHDW-1 .temp_value,
#rooms .extras_holder.type_SHDW-1 .humidity,
#rooms .extras_holder.type_SHDW-1 .motion {
    display: none;
}


#scenes .dev_status_holder,
.container_title .dev_status_holder {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    max-width: 492px;
    text-align: center;
    overflow: hidden;
    z-index: 4;
    background-color: rgba(39, 46, 48, 0.8);
}

#scenes .dev_status_holder div.scene_control,
.container_title .dev_status_holder div.scene_control,
.container_title .dev_status_holder div.scene_control_clock {
    width: 28px;
    height: 28px;
    float: left;
    border-left: 1px solid #505050;
}

#scenes ul li div.group_control div.text {
    text-align: center;
    color: #ECECEC;
    text-transform: capitalize;
    font-size: 12px;
    padding-top: 5px;
}

#scenes ul li div.scene_control div div.icon {
    background-image: url(../img/redpower_off.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 64%;
    width: 100%;
    height: 62px;
}

#scenes .dev_status_holder div.on div.enable_disable,
.container_title .dev_status_holder div.on div.enable_disable {
    background: rgba(40, 134, 199, 0.2) url(../img/check.png) no-repeat 50%;
    height: 100%;
    background-size: 70%;
}

#scenes .dev_status_holder div.on div.set_time,
.container_title .dev_status_holder div.on div.set_time {
    background: rgba(40, 134, 199, 0.2) url(../img/clock.png) no-repeat 50%;
    height: 100%;
    background-size: 70%;
}

#scenes .dev_status_holder div.off div.enable_disable,
#add_scene .dev_status_holder div.off div.enable_disable {
    background: #656565 url(../img/disabled.png) no-repeat 50%;
    height: 100%;
    background-size: 70%;
}

#scenes .dev_status_holder div.removed_item.off,
#add_scene .dev_status_holder div.removed_item.off {
    display: none;
}

#scenes .dev_status_holder div.removed_item.on div.rem_dev,
.container_title .dev_status_holder div.removed_item.on div.rem_dev {
    background: #656565 url(../img/missing.png) no-repeat 50%;
    height: 100%;
    background-size: 70%;
}

#scenes .dev_status_holder div.scene_control_clock.off,
#add_scene .dev_status_holder div.scene_control_clock.off {
    display: none;
}

#scenes .dev_status_holder span {
    color: #fff;
    font-size: 16px;
}

.equalize_columns {
    display: flex;
    flex: 1;
    justify-content: center;
}


#room_nav-devices .room_nav_button_icon {
    background-image: url(../img/room_view/devices_icon.svg);
}

#room_nav-devices.active_tab span.room_nav_button_icon,
.locked #room_nav-devices span.room_nav_button_icon {
    background-image: url(../img/room_view/devices_icon_active.svg);
}

#room_nav-groups .room_nav_button_icon {
    background-image: url(../img/room_view/group_icon.svg);
}

#room_nav-groups.active_tab span.room_nav_button_icon,
.locked #room_nav-groups span.room_nav_button_icon {
    background-image: url(../img/room_view/group_icon_active.svg);
}

#room_nav-scenes .room_nav_button_icon {
    background-image: url(../img/room_view/scene_icon.svg);
}

#room_nav-scenes.active_tab span.room_nav_button_icon,
.locked #room_nav-scenes span.room_nav_button_icon {
    background-image: url(../img/room_view/scene_icon_active.svg);
}

body.devices_disc_room #room_head {
    background-image: url(../img/disc_devices_in_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
}



.room_expanded>.section_holder,
.equalize_columns>.section_holder {
    /* display: none; */
}

.C #room_head,
.discovered_cameras #room_head {
    background-image: url(../img/disc_devices_in_bg.png);
}

#room_head h1 {
    background: none;
    text-align: center;
    padding: 0;
}

#room_head h1 span {
    background: rgba(39, 46, 48, 0.8);
    min-width: 33.3333%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 15px;
    display: inline-block;
    box-sizing: border-box;
}

.wraper_control_devices li,

/* #devices ul li, */


/* #group_devices ul li, */

#action_devices ul li,
#devices .wrapper_devices_scene ul li,
.temp_schedule_device_list ul li {
    width: 100%;
    height: 65px;
    border-bottom: 2px solid #2886c7;
    position: relative;
    cursor: pointer;
}

#action_devices ul li div,

/* #devices ul li div, */


/* #group_devices ul li div, */

.temp_schedule_device_list ul li div {
    float: left;
}

.wraper_control_devices li .icon,
#action_devices ul li .icon,
#devices .wrapper_devices_scene ul li .icon,

/* #devices ul li .icon, */


/* #group_devices ul li .icon, */

/* #event_log_list .icon, */
.temp_schedule_device_list ul li .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 65px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.5) inset;
}

#devices ul li.SHWC-1-camera_control.no_image_true .icon,
#group_devices ul li.SHWC-1-camera_control.no_image_true .icon {
    background-image: url(../img/camera_white_icon.png) !important;
}


/* #devices ul li .control_icon, */


/* #devices ul li .settings_icon, */


/* #group_devices ul li .control_icon, */

.temp_schedules .room_devices_list li .control_icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
    height: 65px;
    background-size: 55px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-image: url(../img/big_off_icon.png);
    transition: background .2s;
    z-index: 1;
}

#devices li.SHSW-21-roller_control .control_icon,
#devices li.SHSW-25-roller_control .control_icon {
    background-image: url(../img/2xbig_up_off_icon.png);
}

#devices li.down_dir .control_icon {
    background-image: url(../img/2xbig_down_off_icon.png);
}

#devices li.stop_dir .control_icon {
    background-image: url(../img/2xbig_pause_on_icon.png);
}

#devices ul li .settings_icon {
    background-image: url(../img/2xbig_settings_icon.png);
}

#devices ul li .settings_icon:hover {
    background-image: url(../img/2xbig_settings_hover_icon.png);
}

#devices ul li .camera_play_icon {
    background-image: url(../img/big_play_icon.png);
}

#devices ul .action_locked.locked_true .control_icon {
    pointer-events: none;
}

#devices ul .action_locked.locked_true {
    position: relative;
    z-index: 2;
}

#devices li.device_on_true .control_icon {
    background-image: url(../img/big_on_icon.png);
}

.wraper_control_devices li.no_image_false .icon,

/* #devices ul li.no_image_false .icon, */

#action_devices ul li.no_image_false .icon,
#action_devices ul li[data-user_image="false"] .icon,
#group_devices ul li.no_image_false .icon,
.temp_schedule_device_list ul li.no_image_false .icon,
/* #event_log_list .icon, */
#add_group_page #choose_group_devices ul li.no_image_false .icon,
#action_devices ul li.choosen_device .icon.no_image_true {
    background-size: 45%;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5) inset;
    cursor: pointer;
}

#devices ul li .icon .fake_checkbox {
    margin: 5px;
}

.wraper_control_devices li .percent_holder,
#action_devices ul li .percent_holder,
#devices ul li .percent_holder,
.devices_to_choose ul li .percent_holder,
#group_devices ul.room_devices_ac_list li .percent_holder {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    padding: 0 65px;
    cursor: pointer;
}

.add_scenes #devices ul li .percent_holder {
    padding: 0 0 0 65px;
}

#add_group_page #choose_group_devices ul li .icon {
    width: 60px;
    height: 60px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 50%;
}

#choose_group_devices .devices_to_choose ul li .percent_holder,
#add_ir_remote_page #devices ul li .percent_holder,
#add_alarm_zone_page .devices_to_choose ul li .percent_holder,
#wifi_batch_update_page .devices_to_choose ul li .percent_holder {
    padding-right: 15px;
}

#add_alarm_zone_page .devices_to_choose ul li.control_holder {
    display: flex;
    position: relative;
}

#add_alarm_zone_page .devices_to_choose ul li.control_holder .icon{
    width: 60px;
    display: flex;
    position: absolute;
    height: 100%;
}

#add_alarm_zone_page .devices_to_choose ul li.control_holder .percent_holder{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-left: 60px;
    display: flex;
    justify-content: space-between;;
    cursor: pointer;
    align-items: center;
}

#add_alarm_zone_page .devices_to_choose ul li.control_holder .percent_holder h2 {
    width: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 7px;
}

#disc_cameras_page #devices ul li .percent_holder {
    padding-right: 0;
}

.wraper_control_devices li .percent_holder,
#action_devices.devices_to_choose ul li .percent_holder,
#type_sensor .devices_to_choose ul li .percent_holder {
    padding: 0 15px 0 65px !important;
}


/* #devices ul li .icon_headline_holder, */


/* #group_devices ul li .icon_headline_holder {
    box-sizing: border-box;
    width: 50%;
    height: 65px;
    padding-left: 75px;
} */

#action_devices ul li h2,

/* #devices ul li h2, */


/* #group_devices ul li h2  */

.devices_to_choose ul li h2 {
    float: left;
    height: 65px;
    width: 100%;
    color: #fff;
    font-size: 16px;
    padding: 0 7px;
    box-sizing: border-box;
    position: relative;
    word-wrap: break-word;
    overflow: hidden;
}

.friendly_device_type {
    font-size: 15px;
    color: #2886c7;
    font-weight: lighter;
    padding-top: 4px;
    display: inline-block;
    width: 100%;
}

#action_devices ul li h2 span {
    margin: auto;
    top: 0;
    bottom: 0;
    width: 90%;
    overflow: hidden;
}

#devices ul li .prop_holder_single {
    background-color: #27516c;
    padding-left: 15px;
}

@media screen and (max-width: 700px) {
    #devices ul li .prop_holder_single {
        background-color: #27516c;
        padding: 15px 0 15px 10px;
    }
}

.light_preview_holder {
    width: 100%;
    height: 100%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

#devices ul.not_added {
    padding-bottom: 70px;
}

#devices ul.not_added li .prop_holder div {
    background-color: transparent;
    padding-left: 0;
    height: 57px;
}

#devices ul li .action_locked .device_control,
#group_devices ul li .action_locked .device_control {
    height: 65px;
    margin-top: 14px;
    text-align: center;
}

#devices .action_locked .prop_holder div .opt_text,
#group_devices .action_locked .prop_holder div .opt_text {
    width: 100%;
    text-align: center;
    margin: auto;
    top: 0;
    bottom: 0;
}

#devices ul li .action_locked.locked_true .to_add,
#devices ul li .action_locked.locked_false .to_unlock,
#devices ul li .action_locked.ota_false .to_ota,
#devices ul li .action_locked.ota_true .to_add
{
    display: none;
}

.devices_to_choose ul li .prop_holder div .prop_icon {
    height: 31px;
    width: 31px;
    display: block;
    float: left;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 35%;
    position: absolute;
    left: 0;
}

#devices ul li .prop_holder div.device_consumption .prop_icon,
#devices ul li .prop_holder div.cons_light_combo .prop_icon {
    background-image: url(../img/consumption_icon.png);
}

#devices ul li .prop_holder div.light_perc .prop_icon {
    background-image: url(../img/bulb_rev.png);
    background-color: rgb(0, 0, 0);
    margin-bottom: 3px;
}


#devices ul li .prop_holder div.voltage_data .prop_icon {
    background-image: url(../img/volts_icon.png);
}


#devices ul li .prop_holder div.device_battery .prop_icon {
    background-image: url(../img/100_battery_icon_ver.png);
}

#devices ul li .prop_holder.door_bat_holder .device_door .prop_icon {
    background-image: url(../img/small_door.png);
}

#devices ul li .prop_holder.door_bat_holder .device_door .prop_icon.closed {
    background-image: url(../img/small_door_closed.png);
}

#devices ul li .prop_holder.gas_alarm_holder .gas_alarm .prop_icon {
    background-image: url(../img/ringer_icon.png);
}

#devices ul li .prop_holder div.device_battery.battery_level_75 .prop_icon {
    background-image: url(../img/75_battery_icon_ver.png);
}

#devices ul li .prop_holder div.device_battery.battery_level_50 .prop_icon {
    background-image: url(../img/50_battery_icon_ver.png);
}

#devices ul li .prop_holder div.device_battery.battery_level_25 .prop_icon {
    background-image: url(../img/25_battery_icon_ver.png);
}

#devices ul li .prop_holder div.device_battery.battery_level_0 .prop_icon {
    background-image: url(../img/0_battery_icon_red_ver.png);
}

#devices ul li .prop_holder div.device_control .prop_icon{
    background-image: url(../img/local_control_icon.png);
}

#devices ul li.cloud_control .prop_holder div.device_control .prop_icon {
    background-image: url(../img/cloud_control_icon.png);
}

#devices ul li .prop_holder div.device_temperature .prop_icon {
    background-image: url(../img/temp_icon.png);
}

#devices ul li .prop_holder div.device_lux .prop_icon {
    background-image: url(../img/lux_icon.png);
}

#devices ul li .prop_holder div.device_humidity .prop_icon {
    background-image: url(../img/humidity_icon.png);
}

#devices ul li .prop_holder div.device_motion .prop_icon {
    background-image: url(../img/motion_icon.png);
}

#devices ul li .prop_holder.sensor_motion_holder div.motion_alarm .prop_icon,
#devices ul li .prop_holder.sensor_motion_main_holder div.motion_alarm .prop_icon {
    background-image: url(../img/motion_icon.png);
}

#devices ul li .prop_holder div.device_light .prop_icon {
    background-image: url(../img/light_icon.png);
}

#devices ul li .prop_holder div.device_position .prop_icon {
    background-image: url(../img/curtain_icon_off.png);
    margin-bottom: 3px;
}

#group_devices .SHSK-1-relay_control .device_consumption {
    display: none;
}

#group_devices ul li .roller_control {
    background-image: url(../img/2xbig_up_off_icon.png);
}

#devices ul li .prop_holder div.device_light span div {
    margin: 0 auto;
    width: 60%;
    height: 16px;
    background-color: #fff;
    display: table;
    border-radius: 5px;
}

#devices ul li .prop_holder div.cons_light_combo div.device_light span div {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 0px;
}

#group_devices ul li .prop_holder div.device_light span div {
    width: 50%;
    height: 40%;
    border-radius: 5px;
    background-color: #fff;
    display: table;
    margin: auto;
}

#devices ul li .offline_overlay,
#group_devices ul li .offline_overlay,
#group_devices ul li .offline_roller,
#devices ul li .prepare_overlay,
#devices ul li .cloud_overlay,
#devices ul li .prepare_failed_overlay,
#add_ir_remote_page #devices ul li .offline_overlay,
#devices ul li .updating_overlay,
#devices ul li .calibrating_overlay,
#groups ul li .calibrating_overlay {
    display: none;
}

#add_ir_remote_page #devices ul li.offline_control .offline_overlay,
.group_roller #group_devices ul#devices li.SHSW-21-relay_control .offline_relay,
.group_relay #group_devices ul#devices li.SHSW-21-roller_control .offline_roller,
.group_roller #group_devices ul#devices li.SHSW-25-relay_control .offline_relay,
.group_relay #group_devices ul#devices li.SHSW-25-roller_control .offline_roller {
    display: block;
    background: rgba(0, 0, 0, 0.9);
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 50%;
    height: 65px;
}

#devices ul li.updating .updating_overlay,
#devices ul li.updating .calibrating_overlay {
    z-index: 3;
}

.group_roller #group_devices ul#devices li.SHSW-21-relay_control .offline_relay span,
.group_relay #group_devices ul#devices li.SHSW-21-roller_control .offline_roller span,
.group_roller #group_devices ul#devices li.SHSW-25-relay_control .offline_relay span,
.group_relay #group_devices ul#devices li.SHSW-25-roller_control .offline_roller span,
#devices li.offline_control .offline_overlay span,
#devices li.forced_offline_control .offline_overlay span,
#devices ul li.not_prepared .prepare_overlay div.preparing_text,
#devices ul li.not_prepared .prepare_overlay span,
#devices ul li.prepare_failed .prepare_failed_overlay span,
#devices ul li .status_overlay span,
#devices ul li .cloud_overlay span,
#devices ul li.updating .updating_overlay span,
#devices ul li.calibrating .calibrating_overlay span {
    display: block;
    font-size: 15px;
    color: #fff;
    text-align: center;
    height: 18px;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

#devices ul li.updating .offline_overlay,
#devices ul li.offline_control .status_overlay,
#devices ul li.status_prepared .status_overlay {
    display: none;
}

#devices li .prop_holder.temp_lux_holder div.device_temperature .temp_unit,
#devices li .prop_holder.temp_bat_holder div.device_temperature .tmp_unit {
    text-align: left;
}

#devices li .prop_holder div .smoke_value {
    font-weight: bold;
    margin-top: 25px;
    margin-left: 8px;
    text-transform: none;
}

#devices ul li .prop_holder div .opt_text {
    margin-top: 8px;
}

#devices ul li:not(.cloud_control) .prop_holder div .opt_text.cloud_text,
#devices ul li:not(.local_control) .prop_holder div .opt_text.local_text,
#devices ul li:not(.n3g_control) .prop_holder div .opt_text.n3g_text {
    display: none;
}


/* ----------- ROOM END------------ */


/* ----------- EMPTY SCREEN ------------ */

.for_empty_screen,
.for_empty_room,
.for_empty_group,
.for_empty_scene,
.for_empty_alarm {
    font-size: 20px;
    text-transform: none;
    color: #fff;
    text-align: center;
    width: 100%;
    float: left;
    display: none;
    box-sizing: border-box;
    padding: 50px 20px 0 20px;
}

.info_text {
    font-size: 20px;
    text-transform: none;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
}

.for_empty_screen span:not(.text),
.for_empty_room span:not(.text),
.for_empty_group span:not(.text),
.for_empty_scene span:not(.text),
.for_empty_alarm span:not(.text) {
    text-transform: none;
}

.for_empty_screen #dashboard_page,
.for_empty_screen.room #devices,
body:not(.empty_screen) .for_empty_screen,
body:not(.devices_disc_room) .no_devices_text,
body.devices_disc_room .empty_room_text,
body.devices_disc_room .empty_room_text,
body:not(.after_including) .after_including_text,
body:not(.devices_disc_room) .after_including_text,
body.after_including .no_devices_text {
    display: none;
}

.empty_screen.dashboard .page_content,
.empty_screen.room #room_page,
.empty_screen.discovered_cameras #disc_cameras_page,
#groups.empty_group,
#scenes.empty_scene,
#alarms.empty_alarm {
    box-sizing: border-box;
}

.for_empty_screen #add_room_device_btn,
.for_empty_screen .retry_add_camera,
.for_empty_room #add_room_device_btn,
.for_empty_group #add_group_btn,
.for_empty_scene #add_scene_btn,
.for_empty_alarm #add_alarm_btn {
    width: 100%;
    max-width: 360px;
    margin-top: 20px;
}

.for_empty_screen .big_icon,
.for_empty_room .big_icon,
.for_empty_group .big_icon,
.for_empty_scene .big_icon,
.for_empty_alarm .big_icon {
    width: 100%;
    height: 105px;
    background: url(../img/2xroom_icon.png) no-repeat;
    background-position: 50%;
    background-size: 65px;
    margin: auto;
}

.room.empty_screen .big_icon,
.for_empty_group .big_icon,
.for_empty_scene .big_icon,
.for_empty_alarm .big_icon {
    max-width: 360px;
    background: none;
}

div.condition_scene .big_icon {
    max-width: 620px;
    background: none;
}

.room.empty_screen .big_icon div,
#groups.empty_group .big_icon div,
div.condition_scene .big_icon div,
#scenes.empty_scene .big_icon div,
#alarms.empty_alarm .big_icon div {
    height: 105px;
    float: left;
    width: 33.33333%;
    background-repeat: no-repeat;
    background-size: 65px;
    background-position: 50%;
}

.room.empty_screen.devices_disc_room .big_icon div {
    display: none;
}

.room.empty_screen.devices_disc_room .big_icon {
    background: url(../img/2xinclude_icon.png) no-repeat;
    background-position: 50%;
    background-size: 75px;
}

.room.empty_screen .big_icon div:first-child,
#groups.empty_group .big_icon div:first-child,
#scenes.empty_scene .big_icon div:first-child,
#alarms.empty_alarm .big_icon div:first-child,
.condition_scene .big_icon div:first-child {
    background-image: url(../img/2xrelay_icon.png);
}

#scenes.empty_scene .big_icon div:nth-child(2) {
    background-image: url(../img/2xsocket_icon.png);
}

.room.empty_screen .big_icon div:nth-child(2),
#groups.empty_group .big_icon div:nth-child(2),
#alarms.empty_alarm .big_icon div:nth-child(2),
.condition_scene .big_icon div:nth-child(2) {
    background-image: url(../img/2xsocket_icon.png);
}

#scenes.empty_scene .big_icon div:nth-child(3) {
    background-image: url(../img/2xlight_icon.png);
}

.room.empty_screen .big_icon div:nth-child(3),
#groups.empty_group .big_icon div:nth-child(3),
#alarms.empty_alarm .big_icon div:nth-child(3),
.condition_scene .big_icon div:nth-child(3) {
    background-image: url(../img/2xlight_icon.png);
}

#includer .icon,
#toggle_temp_schedule_popup .icon,
.for_empty_screen #add_room_device_btn .icon,
#advanced_sched_holder .action .icon,
.sched_config_option .icon,
#add_new_temp_schedule_config .icon,
.for_empty_room #add_room_device_btn .icon,
.for_empty_group #add_group_btn .icon,
.for_empty_alarm #add_alarm_btn .icon,
.for_empty_scene #add_scene_btn .icon,
#choose_sched_placeholder button .icon,
#add_by_ip button .icon {
    background-image: url(../img/plus_icon.png);
}


/* ----------- empty screen END ------------ */



/* ----------- DEVICE AND GROUP PAGE START ------------ */

#info_and_controls .iac {
    width: 50%;
    height: 150px;
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

#device_page #info,
#group_page #info {
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.2);
}

#device_page #info.no_image_true .overlay_shadow,
#group_page #info.no_image_true .overlay_shadow {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5) inset;
    width: 100%;
    height: 150px;
    position: absolute;
    z-index: 1;
    top: 0;
}

#device_page #info .shared_device,
#device_page #info .device_control {
    height: 28px;
    width: 28px;
    background: rgba(39, 46, 48, 0.8);
    position: absolute;
    top: 0;
    left: 0;
}

#device_page #info .shared_device {
    left: 29px;
}

#device_page #info .shared_device .icon,
#device_page #info .device_control .icon {
    height: 28px;
    width: 28px;
    background-color: rgba(40, 134, 199, 0.2);
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: 50%;
}

#device_page #info .device_control .icon {
    background-image: url(../img/local_control_icon.png);
}

#device_page #info .shared_device .icon {
    background-image: url(../img/shared.svg);
    /* background-size: 50%; */
}

#device_page #info .device_control.cloud_control .icon {
    background-image: url(../img/cloud_control_icon.png);
}


#device_page #info .consumption.big_resolution {
    top: 0;
    right: 0;
    width: auto;
    max-width: 100%;
}

#device_page #info.no_image_true .consumption {
    background: rgba(0, 0, 0, 0.4);
}

#device_page #info.no_image_true .consumption .icon {
    background: #27516c url(../img/consumption_icon.png) no-repeat 50%;
    background-size: 10px;
}

#device_page #info .consumption .con_text {
    padding-left: 38px;
    padding-right: 10px;
    color: #fff
}

#device_page #info:after,
#group_page #info:after {
    height: 150px;
}

#device_page #info h1,
#group_page #info h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px 15px;
}

#device_page.single_control #controls div.control_icon,
#device_page.single_control #controls div.custom_control_icon {
    height: 80px;
    width: 80px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../img/2xbig_off_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transition: background 0.2s;
    cursor: pointer;
}

#device_page.single_control #controls .timer_preview {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    transition: 1;
    padding: 6px 0;
    color: #fff;
}

#device_page.single_control #controls .timer_preview.sensor {
    width: 40%;
    position: absolute;
    top: 0;
    text-align: right;
    float: right;
    right: 0%;
    transition: 1;
    padding: 15px 15px 0 0;
    color: #fff;
}

#button_without_cloud {
    margin: 0 10px 10px 10px;
    padding: 2px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#device_page .total_work {
    margin: 0 10px 10px 10px;
    background: rgba(255, 255, 255, 0.2) url(../img/clock.png) no-repeat 10px;
    height: 40px;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 40px;
}

#groups div.for_empty_group,
#scenes div.for_empty_scene,
#alarms div.for_empty_alarm {
    display: none;
}

#groups.empty_group div.for_empty_group,
#scenes.empty_scene div.for_empty_scene,
#alarms.empty_alarm div.for_empty_alarm {
    display: block;
}

.quatro_butt {
    width: 100%;
    height: 100%;
}

.quatro_butt td {
    width: 50%;
    text-align: center;
    vertical-align: bottom;
}

#device_stats {
    display: flex;
    width: 50%;
    border-radius: 5px;
    padding-right: 5px;
    align-self: flex-start;
    align-items: flex-start;
    margin: 5px;
    position: absolute;
    right: 0;
}
#device_stats #powered {
    color: #fff;
}

/* sensor */

td.sensor2x2 {
    vertical-align: middle;
    padding: 3px;
    width: 50%;
}

#device_page.single_control #tmp_value,
#device_page.single_control #hum_value,
#device_page.single_control #lux_value,
#device_page.single_control #motion_value,
#device_page.single_control #bat_value,
#device_page.single_control #powered,
#device_page.single_control #smoke_value,
#device_page.single_control #flood_value,
#device_page.single_control #charge_status,
#device_page.single_control #sens_name,
#device_page.single_control #last_motion,
#device_page.single_control #door_value,
#device_page.single_control #tilt_value,
#device_page.single_control #vibration_value,
#device_page.single_control #alarm_value,
#device_page.single_control #sensor_active

{
    width: auto;
    height: 30px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: auto 25px;
    padding-left: 30px;
    text-align: left;
    color: #fff;
    margin: 0 auto;
    padding-top: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
}

#device_page.single_control #last_motion.slm {
    height: 42px;
}


/* #device_page.single_control #bat_value, */

#device_page.single_control #powered {
    display: none;
}

#device_page.single_control #tmp_value,
#device_page.single_control #tmp_unit,
#device_page.single_control #temp_unit {
    float: left;
}

#device_page.single_control #tmp_unit,
#device_page.single_control #temp_unit {
    padding-top: 12px;
    color: #fff;
}

#device_page.single_control .main_feature {
    text-align: center;
    padding: 30px 0;
    box-sizing: border-box;
    height: 90px;
}

#device_page.single_control .main_feature span {
    height: auto;
    padding: 0;
    font-weight: bold;
    font-size: 30px;
    color: #fff;
}

#device_page.single_control .main_feature span#tmp_value {
    background: none;
    padding: 0;
    width: 50%;
    text-align: right;
}

#device_page.single_control .main_feature span#tmp_unit {
    font-size: 20px;
}

#device_page.single_control #last_motion {
    background: none;
    padding: 0px 4px;
    font-size: 12px;
    text-align: center;
    text-transform: none;
    width: 100%;
    overflow: visible;
}

#device_page.single_control #last_motion span.lm_text {
    text-transform: none;
}

#controls table.quatro_butt td.sensor2x2.motions .hollow_bg {
    height: 90px;
    padding-right: 0;
}

.sleep_mode_notification {
    display: none;
}

@media(min-width: 415px) and (max-width: 1024px) {
    #device_page.single_control td.sensor2x2 #motion_value {
        margin-bottom: 0px !important;
    }
    #device_page.single_control #last_motion span.lm_text {
        display: none;
    }
    #device_page.single_control #last_motion {
        font-size: 10px;
    }
    #controls table.quatro_butt td.sensor2x2.motions .hollow_bg {
        height: 90px;
    }
}

@media(max-width: 415px) {
    #controls table.quatro_butt td.sensor2x2 .hollow_bg div {
        /* padding-left: 25px; */
    }
    body.device_SHSEN-1-sensor table.quatro_butt td.sensor2x2 .hollow_bg #temp_unit {
        padding-left: 0;
    }
    body.device_SHSEN-1-sensor table.quatro_butt td.sensor2x2 .hollow_bg #tmp_value {
        padding-left: 28px !important;
    }
    #device_page.single_control td.sensor2x2 #motion_value {
        margin-bottom: 0px !important;
    }
    /*    #device_page.single_control td.sensor2x2 #motion_value {
            margin-bottom: 14px;
        }*/
    #device_page.single_control #last_motion {
        font-size: 11px;
        padding: 0 1px;
    }
    #device_page.single_control #sens_name {
        font-size: 11px;
        display: table-cell !important;
        vertical-align: middle !important;
        padding: 0;
        /*position: absolute;*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 38px;
    }
    #device_page.single_control .sens_name_bg {
        height: 42px;
        position: relative;
    }
}

@media(max-width:320px) {
    td.sensor2x2 div.hollow_bg div {
        padding-left: 27px !important;
        font-size: 14px;
    }
    #device_page.single_control #last_motion {
        padding-left: 3px !important;
    }
    td.sensor2x2 div.hollow_bg div#sens_name {
        padding-left: 0 !important;
    }
    #device_page.single_control #last_motion span.lm_text {
        display: none;
    }
}

td.sensor2x2 div.hollow_bg {
    border-radius: 5px;
    padding-right: 5px;
}

#device_page.single_control #charge_status {
    background-image: none;
}

#device_page.single_control #smoke_value {
    background-image: url(../img/fire_icon_white.png);
    background-size: auto 50px;
    background-position: center;
    height: 90px;
    box-sizing: border-box;
    padding: 68px 0 0 0;
    text-align: center;
    text-transform: none;
}

#device_page.single_control #flood_value {
    background-image: url(../img/humidity_icon.png);
    background-size: auto 24px;
    text-transform: none;
}

.device_SHWT-1-sensor #device_page.single_control #flood_value {
    background-image: url(../img/flood_icon.png);
    background-size: 40px;
    background-position: center 10px;
    height: 90px;
    padding: 60px 0 0 0;
    box-sizing: border-box;
    text-align: center;
}

.device_SHWT-1-sensor #device_page.single_control #flood_value.rain_mode {
    background-image: url(../img/humidity_icon.png);
}

.device_SHWT-1-sensor #device_page.single_control #flood_value.flood_detected {
    background-image: url('../img/flood_icon_color.png');
}

.device_SHWT-1-sensor #device_page.single_control #flood_value.rain_mode.flood_detected {
    background-image: url('../img/humidity_icon_blue.png');
}

@keyframes flash-fire-background {
    0% {
        background-image: url(../img/fire_icon_white.png);
    }
    49% {
        background-image: url(../img/fire_icon_white.png);
    }
    50% {
        background-image: url(../img/fire_icon.png);
    }
    99% {
        background-image: url(../img/fire_icon.png);
    }
    100% {
        background-image: url(../img/fire_icon_white.png);
    }
}

#device_page.single_control #smoke_value.fire_detected,
#devices ul li.fire_detected .prop_holder.smoke_prop_holder div {
    -webkit-animation: flash-fire-background 1s infinite;
    -moz-animation: flash-fire-background 1s infinite;
    animation: flash-fire-background 1s infinite;
}

#device_page.single_control #hum_value {
    background-image: url(../img/humidity_icon.png);
    background-size: auto 17px;
}

#device_page.single_control #lux_value {
    background-image: url(../img/lux_icon.png);
    background-size: auto 20px;
    background-position-x: 5px;
}

#device_page.single_control #tmp_value {
    background-image: url(../img/temp_icon.png);
}

#device_page.single_control #motion_value {
    background-image: url(../img/motion_icon.png);
    background-size: auto 20px;
    background-position-x: 5px;
}

#device_page.single_control span#motion_value,
#device_page.single_control span#sensor_active {
    background-image: none;
    padding: 0;
}

#device_page.single_control .motion_display #motion_value {
    background-image: url(../img/no_motion.svg);
    background-size: 40px;
    background-position: center 10px;
    height: 90px;
    padding: 60px 0 0 0;
    box-sizing: border-box;
    text-align: center;
    text-transform: capitalize;
}

#device_page.single_control .motion_display #motion_value.motion {
    background-image: url(../img/motion.png);
    background-size: 50px;
}

#device_page.single_control .motion_display #motion_value.active_false {
    background-image: url(../img/motion_disabled.svg);
}

#device_page.single_control div.sensor2x2 span {
    height: 100%;
    display: inline-block;
}

#device_page.single_control div.sensor2x2 #motion_value {
    /*align-items: center;*/
    /*justify-content: center;*/    
}

#device_page.single_control div.sensor2x2 {
    width: 96%;
    height: 42px;
    align-items: center;
    justify-content: center;
    /*display: flex;*/
}

#device_page.single_control #powered {
    background-image: url(../img/usb_charge.svg);
    background-position: 4px 50%;
    padding-left: 32px;
}

#device_page.single_control #tilt_value {
    background-image: url(../img/tilt_icon.png);
    background-size: 20px;
    background-position: 5px;
}

#device_page.single_control #vibration_value {
    background-image: url(../img/vibration_icon.png);
    background-size: 18px;
    background-position-x: 8px;
}

#device_page.single_control .motion_display {
    position: relative;
}

#device_page.single_control .motion_display #vibration_value {
    position: absolute;
}

#device_page.single_control #alarm_value {
    background-image: url(../img/ringer_icon.png);
    background-size: 18px;
    background-position-x: 8px;
    text-align: center;
}

#device_page.single_control #tilt_value {
    background-image: url(../img/tilt_icon.png);
    background-size: 18px;
    background-position-x: 8px;
}

#device_page.single_control #alarm_value.none {
    color: green;
}



#device_page.single_control #alarm_value.mild {
    color: yellow;
}



#device_page.single_control #alarm_value.heavy {
    color: red;
}


#device_page.single_control #bat_value {
    background-image: url(../img/100_battery_icon_ver.png);
}

#device_page.single_control #bat_value.bat_75 {
    background-image: url(../img/75_battery_icon_ver.png);
}

#device_page.single_control #bat_value.bat_50 {
    background-image: url(../img/50_battery_icon_ver.png);
}

#device_page.single_control #bat_value.bat_25 {
    background-image: url(../img/25_battery_icon_ver.png);
}

#device_page.single_control #bat_value.bat_0 {
    background-image: url(../img/0_battery_icon_red_ver.png);
}

#device_page.single_control #bat_value.bat_charging {
    background-image: url(../img/0_battery_icon_charge_ver.png);
}

#device_page.single_control #door_value {
    /* background-image: url(../img/small_door.png); */
    height: 42px;
    background-size: 36px;
    background-position: center;
    padding: 0;
    display: block;
    width: 100%;
}

#device_page.single_control #controls > .hollow_bg {
    width: 47%;
    border-radius: 5px;
}

#device_page.single_control #door_value.closed {
    /* background-image: url(../img/small_door_closed.png); */
}

.door-window_open {
    background-image: url(../img/door-window_open.png);
}
.door-window_tilted {
    background-image: url(../img/door-window_tilted.png);
}
.door-window_close {
    background-image: url(../img/door-window_closed.png);
}

#device_page.single_control #sens_name {
    background-image: none;
    padding-left: 0;
    width: 100%;
    text-align: center;
}

#device_page.single_control #controls.device_on_true .control_icon {
    background-image: url(../img/2xbig_on_icon.png);
}

body.ir_remote_control #device_page.single_control.offline_device .ac_inactive_overlay {
    display: block !important;
}

#device_page.roller_control #controls,
#group_page.roller_control #controls {
    background-image: url(../img/roller_control_none.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 50%;
    transition: background 0.3s;
}

#device_page.roller_control #controls.move_up,
#group_page #controls.move_up {
    background-image: url(../img/roller_control_up.png);
}

#device_page.roller_control #controls.move_down,
#group_page #controls.move_down {
    background-image: url(../img/roller_control_down.png);
}

#device_page.roller_control #controls.move_stop,
#group_page #controls.move_stop {
    background-image: url(../img/roller_control_pause.png);
}

#device_page.roller_control.offline_device #controls {
    background-image: none;
}

#device_page.roller_control.offline_device #percentage_controlls {
    display: none;
}

#device_page.roller_control #controls .btn_move,
#group_page #controls .btn_move {
    position: absolute;
    left: 0;
    height: 20px;
    width: 100%;
    cursor: pointer;
}

#device_page.roller_control #controls .btn_move .icon,
#group_page #controls .btn_move .icon {
    float: left;
    width: 45%;
}

#device_page.roller_control #controls .btn_move .text,
#group_page #controls .btn_move .text {
    float: right;
    color: #fff;
    width: 45%;
    text-align: center;
}

#device_page.roller_control #controls .btn_move.up_move,
#group_page #controls .btn_move.up_move {
    top: 10px;
}

#device_page.roller_control #controls .btn_move.stop_move,
#group_page #controls .btn_move.stop_move {
    top: 65px;
}

#device_page.roller_control #controls .btn_move.down_move,
#group_page #controls .btn_move.down_move {
    bottom: 10px;
}

#device_page.roller_control #controls .btn_move .icon,
#group_page #controls .btn_move .icon {
    height: 20px;
}

#device_page.roller_control #controls .btn_move.up_move .icon,
#group_page #controls .btn_move.up_move .icon {
    background: url(../img/arrow_up.png) no-repeat 50%;
    background-size: 20px;
}

#device_page.roller_control #controls .btn_move.stop_move .icon,
#group_page #controls .btn_move.stop_move .icon {
    background: url(../img/pause_icon.png) no-repeat 50%;
    background-size: 20px;
}

#device_page.roller_control #controls .btn_move.down_move .icon,
#group_page #controls .btn_move.down_move .icon {
    background: url(../img/arrow_down.png) no-repeat 50%;
    background-size: 20px;
}

.device_actions {
    margin: auto;
    width: 100%;
}

#group_page .device_actions {
    padding: 10px 10px 0 10px;
    width: calc(100% - 20px);
}

#device_page .device_actions ul {
    width: 90%;
    margin: auto;
}

#device_page .device_actions ul li {
    float: left;
    width: 100%;
    margin-right: 3.5%;
    height: 34px;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: 20px;
}

#device_page .device_actions ul li div {
    float: left;
}

#device_page #sensor_names_settings .title{
    font-size: 20px;
    text-transform: capitalize;
}

.device_actions .icon,
.update_icon {
    height: 34px;
    width: 34px;
    background-repeat: no-repeat;
    background-size: 23px;
    background-position: 50%;
}

.device_actions button {
    height: 34px;
    font-size: 15px;
    padding-left: 34px;
    width: 100%;
}

.delete_btn .icon {
    background-image: url('../img/delete_icon.png');
    background-color: #d23830;
}

.edit_btn .icon {
    background-image: url('../img/edit_icon_small.png');
    background-color: #ffcc00;
    background-size: 28px;
}


/* .update_icon, */

.check_update .icon,
button#bulk_update .icon {
    background-image: url('../img/check_update_icon.png');
    background-color: #FF6600;
    background-size: 74%;
}

.roller_calibration .icon {
    background-image: url(../img/calibrate.png);
    background-size: 80%;
}

.open_device_settings .icon {
    background-image: url(../img/settings_icon.png);
}

.settings_section {
    margin: 0 10px;
    overflow: hidden;
}

.settings_section .settings_section_holder {
    transform: translate(-100%, 0px);
    -webkit-transform: translate(-100%, 0px);
    transition: all 0.8s;
}

.device_settings_visible .settings_section .settings_section_holder {
    transform: translate(0%, 0px);
    -webkit-transform: translate(0%, 0px);
}

#device_page:not(.device_settings_visible) {
    max-height: calc(100vh - 116px);
}

body.device_SHCL-255-light #device_page:not(.device_settings_visible) {
    max-height: 120vh;
}

body.ir_remote_control #device_page:not(.device_settings_visible) {
    max-height: 140vh;
}

.link_icon {
    height: 20px;
    width: 20px;
    background-image: url(../img/room_view/lincked_icon.svg);
}

.favorite_btn .icon {
    background-image: url('../img/favorites_icon.png');
    background-color: #27516c;
    background-position: 50% 43% !important;
}

#device_page .device_actions ul li .text {
    color: #fff;
    font-size: 15px;
    box-sizing: border-box;
    width: 100%;
    margin-left: -34px;
    padding-left: 34px;
    text-align: center;
    margin-top: 11px;
}

#device_page .device_actions ul li:first-child {
    margin-top: 0;
}

#light_favorites h2,
#device_page h2,
#group_page h2,
.group_light #brightness_selector h2,
#scenes_page .range_wrapper h2,
#scenes_page .settings_layout h2,
#add_scene #brightness_selector h2 {
    font-size: 18px;
    background-color: transparent;
    text-align: left;
    color: #fff;
    box-sizing: border-box;
    background-position: calc(100% - 13px) 50%;
}

.range_wrapper h2 {
    padding: 10px 5px;
}

.group_light #brightness_selector h2 {
    padding: 10px 15px;
}

#device_page h2.with_icon {
    padding-left: 50px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-position: 12px 49%;
    background-size: 27px;
}

#device_page h2.cloud_icon {
    background-image: url(../img/cloud_icon.png);
}

#device_page .settings_holder {
    color: #fff;
}

#device_page .settings_holder ul li {
    margin-bottom: 10px;
}

#device_page .settings_holder .setting_titles_wrapper {
    box-sizing: border-box;
    /* background-position: calc(100% - 13px) 50%; */
    /* background-repeat: no-repeat; */
    /* background-size: 18px; */
    /* background-color: #43484B; */
    height: 60px;
    width: 95%;
    padding: 3px 5px;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    justify-content: space-around;
    font-size: 20px;
}

#device_page .settings_holder .setting_titles_wrapper * {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    text-transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#device_page .settings_holder .setting_titles_wrapper span {
    font-size: 13px;
    color: lightslategray;
}

#device_page .settings_holder .unnamed.setting_titles_wrapper h4 {
    display: none;
}

#device_page .settings_holder .unnamed.setting_titles_wrapper span {
    font-size: inherit;
    color: #fff;
}

#device_page .input_holder label {
    display: block;
    min-height: 20px;
}

#device_page .input_holder.disabled label.option_enable {
    margin-bottom: 20px;
}

#device_page .login_settings h2 {
    margin-top: 0px;
}

#device_page .shsen1_login h2 {
    margin-top: 20px;
}

#device_page form .hollow_bg {
    width: 240px;
    margin: auto;
}

#device_page button {
    width: 240px;
    margin-top: 15px;
}

/* shared accounts menu in settings / app /  */
#device_page #shared_accounts li {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 65px;
}

#device_apge #shared_accounts .hollow_bg {
    width: 240px;
    height: 40px;
    margin-top: 0;
}

#device_page #shared_accounts li button.delete_btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-position: center;
    background-size: 65%;
    background-repeat: no-repeat;
    margin-top: 0;
    background-image: url(../img/delete_icon.png);
    background-color: #d23830;
}

#device_page #sched_add_popup_back button,
#night_mode_popup button {
    margin-top: 0;
    width: 235px;
}

#device_page .text_input {
    width: 100%;
}

.success.icon {
    background-color: #98cb4a;
    background-size: 30px;
}

#cloud_enable .icon {
    background-color: #98cb4a;
    background-image: url(../img/cloud_icon.png);
    background-size: 30px;
}

#cloud_disable .icon {
    background-color: #ff3b30;
    background-image: url(../img/disable_cloud_icon.png);
}

#device_reboot .icon,
#factory_reset .icon {
    background-image: url(../img/reset_icon.png);
    background-size: 30px;
}

#connect_wifista .icon,
#wifi_sta_ssid,
#wifi_sta1_ssid,
.wifi_name {
    background-image: url(../img/wifi_icon.png);
    background-size: 30px;
}

#wifi_sta_ssid,
#wifi_sta1_ssid,
#wifi_ap_ssid,
.wifi_name {
    background-position: 6px 49%;
    background-size: 28px;
}

#connect_wifiap .icon,
#wifi_ap_ssid {
    background-image: url(../img/ap_icon.png);
    background-size: 30px;
}

#wifi_sta_settings #set_ip,
#wifi_sta1_settings #set_sta1_ip {
    padding-top: 21px;
}

#wifi_sta_settings #set_ip div.hollow_bg,
#wifi_sta1_settings #set_sta1_ip div.hollow_bg {
    margin-bottom: 10px;
}

.detect_location_button .icon {
    background-color: #ffcc00;
    background-image: url(../img/detect_location.png);
    background-size: 30px;
}

#device_page .login_settings button .icon {
    background-image: url(../img/login_icon.png);
    background-color: #98cb4a;
}

#device_page .text_input#username {
    background-image: url(../img/user_icon.png);
}

#device_page .text_input#password {
    background-image: url(../img/pass_icon.png);
}

#device_page.offline_device .col-1,
#device_page.updating .col-1 {
    display: block !important;
}

#device_page.offline_device .col-2,
#device_page.updating .col-2 {
    display: block !important;
}

#device_page .shsen1_offline {
    background-image: url(../img/dark_background.png) !important;
}

#device_page.offline_device .offline_text,
#device_page .offline_text.preparing,
#device_page .updating_text,
#device_page .calibration_text {
    display: block;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 19px;
    background: none !important;
}

/* .shix_wrapper {
    display: none !important;
} */

#device_page.offline_device .control_icon,
#device_page.offline_device .up_move,
#device_page.offline_device .down_move,
#device_page.offline_device .stop_move,
#device_page.offline_device .shix_wrapper,
#device_page.offline_device .settings_section,
#device_page.offline_device #update_section,
/* #device_page.offline_device .device_control, */
#device_page.offline_device .quatro_butt,
#device_page.offline_device .ext_data,
#device_page.offline_device .consumption_display,
#device_page.offline_device #roller_favorites,
#device_page.offline_device #calibrate_holder_top,
#device_page.offline_device #brightness_selector,
#device_page.offline_device #temp_selector,
#device_page.offline_device #color_pickers,
#device_page.offline_device #light_effects_wrapper,
/* #device_page.offline_device .updating_text, */
#device_page.offline_device #controls .consumption
#device_page.offline_device #favorites_selector,
#device_apge.offline_device .ext_switch {
    display: none !important;
}

#device_page.updating .control_icon,
#device_page.updating .up_move,
#device_page.updating .down_move,
#device_page.updating .stop_move,
#device_page.updating .shix_wrapper,
#device_page.updating .settings_section,
#device_page.updating #update_section,
#device_page.updating .quatro_butt,
#device_page.updating .ext_data,
#device_page.updating .consumption_display,
#device_page.updating #roller_favorites,
#device_page.updating #calibrate_holder_top,
#device_page.updating #brightness_selector,
#device_page.updating #temp_selector,
#device_page.updating #color_pickers,
#device_page.updating #light_effects_wrapper,
#device_page.updating .offline_text,
#device_page.updating .sleep_mode_notification,
#device_page.updating #favorites_selector,
#device_page.updating .ext_switch {
    display: none !important;
}

#device_page.updating #controls {
    background-image: none !important; 
}

#device_page.calibrating .control_icon,
#device_page.calibrating .shix_wrapper,
#device_page.calibrating #update_section,
#device_page.calibrating .settings_section,
#device_page.calibrating table.quatro_butt,
#device_page.calibrating #brightness_selector,
#device_page.calibrating #color_pickers,
#device_page.calibrating #light_effects_wrapper,
#device_page.calibrating .offline_text,
#device_page.calibrating .sleep_mode_notification,
#device_page.calibrating .btn_move,
#device_page.calibrating #favorites_selector,
#device_apge.calibrating .ext_switch,
#device_page.calibrating #top_calibration_section
{
    display: none !important;
}

#device_page:not(.offline_device) .offline_text {
    display: none !important;
}

#device_page.update_pending #update_section,
#device_page.update_pending .device_bulk_status {
    display: none !important;
}

#device_page .updating_text,
#device_page .calibration_text {
    display: none;
}

#device_page.updating .updating_text,
#device_page.calibrating .calibration_text {
    display: block;
}

#device_page.offline_device .offline_text.not_in_cloud {
    height: 50px;
}

#device_page .offline_text.not_in_cloud span.secondary_text {
    font-size: 14px;
    display: block;
    width: 100px;
    position: relative;
    padding-top: 8px;
    padding-left: 40px;
    margin: auto;
    margin-top: 10px;
    text-align: left;
    color: #fff;
}

#device_page .offline_text.not_in_cloud span.secondary_text:before {
    content: '';
    height: 28px;
    width: 28px;
    display: inline-block;
    background: url(../img/warrning_icon.png) no-repeat;
    background-size: contain;
    background-position: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

#device_page .device_actions.big_rez {
    display: none;
}

#group_page .range_wrapper,
#device_page .range_wrapper,
#scenes_page .range_wrapper,
#device_page #brightness_selector,
#group_page #brightness_selector,
#add_scene #brightness_selector,
#device_page #temp_selector {
    margin: 0 20px 20px 20px;
}

#device_page.offline_device #brightness_selector {
    display: none;
}


div.col_6 {
    width: 50%;
    float: left;
    text-align: center;
}

div.col_3 {
    width: 33%;
    float: left;
}

#obstacle_detection_settings .col_6,
#safety_switch_settings .col_6,
#safety_switch_settings .col_3 {
    padding-top: 10px;
    padding-bottom: 20px;
}

#obstacle_detection_settings .col_6 label,
#safety_switch_settings .col_6 label {
    text-align: left;
}

#roller_safety_switch .input_holder:nth-child(2) div:first-child,
#roller_btn_type_settings .input_holder:nth-child(2) div:first-child {
    display: none;
}

#roller_safety_switch span.warn_message,
#roller_btn_type_settings .input_holder:nth-child(2) div:first-child span.warn_message {
    color: red;
}

.reverse_toggle label span.lang {
    text-transform: capitalize;
}

#percentage_controlls {
    width: 100%;
    text-align: center;
}

#perc_info {
    width: 100%;
    margin: 10px auto 0px;
}

#perc_info tr td {
    width: 33.3%;
    color: #fff;
}

.piclosed {
    text-align: left;
}

.piopened {
    text-align: right;
}

#perc_value {
    text-align: center;
}

.roller_control .range_holder {
    display: table;
    margin: 20px auto 10px;
}

.disable_overlay.active {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    max-height: inherit;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    margin-top: -20px;
    padding-bottom: 40px;
}

.schedule_settings form .hollow_bg {
    width: auto !important;
    margin-top: 0px !important;
    line-height: normal;
    display: inline-block;
}

.schedule_settings_row {
    vertical-align: top;
    width: 100%;
}

.schedule_settings_span {
    line-height: normal;
    text-align: center;
    padding: 10px 0;
    display: inline-block;
    width: 100%;
}

.schedule_header {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    height: 40px;
}

#schedule_button {
    margin-top: 60px;
}

#advanced_sched_holder .sched_holder,
#night_mode_preview {
    height: 80px;
    border-bottom: 1px solid gray;
    padding: 0;
    position: relative;
    margin-top: 5px;
}

#advanced_sched_holder .sched_days div,
#advanced_sched_holder .left_holder,
#advanced_sched_holder .right_holder,
#advanced_sched_holder .sched_time,
#advanced_sched_holder .sched_time_end,
#advanced_sched_holder .sched_comm {
    display: inline-block;
    vertical-align: top;
}

#advanced_sched_holder .sched_comm {
    max-width: 65%;
    overflow: hidden;
    height: 60px;
    position: relative;
}

.sched_holder:not(.ac_container) .sched_comm {
    padding-top: 15px;
}

.sched_holder.ac_container .sched_comm {
    width: 65%;
}

.sched_holder table.sched_params {
    height: 100%;
    margin-top: 5px;
}

td.sched_power {
    font-size: 30px;
    vertical-align: top;
    padding-top: 3px;
}

td.sched_mode {
    width: 30px;
    background-image: url(../img/device_remote/cold_fan_mode_icon.png);
    background-size: 25px;
    background-position: 50% 5px;
    background-repeat: no-repeat;
}

td.sched_mode.cool {
    background-size: 20px;
}

td.sched_mode.heat {
    background-image: url(../img/device_remote/warm_fan_icon.png);
}

td.sched_mode.auto {
    font-size: 25px;
    vertical-align: top;
    background-image: none;
    padding-top: 5px;
    text-align: center;
}

td.sched_mode.auto::after {
    content: 'A';
}

td.sched_mode.fan {
    background-image: url(../img/fan_icon.png);
}

td.sched_mode.dry {
    background-image: url(../img/device_remote/dry_icon.png);
}

td.sched_fan {
    background-image: url(../img/schedule_fan_icon.png);
    width: 45px;
    background-size: 25px;
    background-position: 50% 5px;
    background-repeat: no-repeat;
    text-align: center;
    vertical-align: top;
    padding-top: 7px;
}

td.sched_temp {
    vertical-align: top;
    font-size: 25px;
    padding: 3px 0 0 0;
}

#advanced_sched_holder .sched_days div.active,
#sched_configs .sched_days div.active {
    color: #2886c7;
}

#sched_configs .left_holder,
#advanced_sched_holder .left_holder,
#night_mode_preview .left_holder {
    width: 75%;
}

#sched_configs .right_holder,
#advanced_sched_holder .right_holder,
#night_mode_preview .right_holder {
    width: 25%;
    min-width: 90px;
    position: absolute;
    right: 0%;
}

#sched_configs .left_holder,
#advanced_sched_holder .left_holder,
#night_mode_preview .left_holder {
    float: left;
    height: 100%;
    position: relative;
}

.sched_actions .edit_icon,
#advanced_sched_holder .right_holder .edit_icon,
#night_mode_preview .right_holder .edit_icon {
    background-image: url(../img/edit_icon_small.png);
    background-color: #ffcc00;
}

.sched_actions .delete_icon,
#advanced_sched_holder .right_holder .delete_icon {
    background-image: url(../img/delete_icon.png);
    background-color: #d23830;
    margin-left: 7px;
}

.sched_actions .edit_icon,
.sched_actions .delete_icon,
#advanced_sched_holder .edit_icon,
#advanced_sched_holder .delete_icon,
#night_mode_preview .right_holder .edit_icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 3px;
    cursor: pointer;
    border: none;
}

#sched_configs .sched_days,
#advanced_sched_holder .sched_days {
    width: 100%;
    max-width: 300px;
    position: absolute;
    bottom: 0%;
    padding-bottom: 10px;
}

#sched_configs .sched_time,
#sched_configs .sched_time_end,
#advanced_sched_holder .sched_time,
#advanced_sched_holder .sched_time_end {
    font-size: 30px;
    height: 60px;
    position: relative;
    margin: 10px 10px 0px 5px;
}

#advanced_sched_holder .sched_time.sunrise_set {
    background: url('../img/sunrise_small_1.png') no-repeat 0px 0px;
    min-width: 30px;
    padding-left: 40px;
}

#advanced_sched_holder .sched_time.sunset_set {
    background: url('../img/sunset_small.png') no-repeat 0px 0px;
    min-width: 30px;
    padding-left: 40px;
}

#sched_configs .sched_days div,
#advanced_sched_holder .sched_days div {
    width: 12%;
    text-align: center;
    position: relative;
    display: inline-block;
    color: #D6D6D6;
}

#advanced_sched_holder .sched_buttons_holder {
    position: relative;
    width: 100%;
    margin: 20px auto auto;
    text-align: center;
    display: table;
}

#night_mode_preview .right_holder .edit_icon {
    float: right;
    margin-top: 30px;
}

#advanced_sched_holder #add_advanced_sched .icon {
    background-image: url(../img/plus_icon.png);
}

#save_advanced_sched .icon,
#save_temp_sched .icon,
#night_mode_popup button#set_night_mode .icon {
    background-image: url(../img/check_icon.png);
    background-color: #98cb4a;
    background-size: 26px;
}

.existing_sched_configs_cancel .icon,
#cancel_advanced_sched .icon,
#cancel_temp_sched .icon,
#night_mode_popup button#cancel_night_mode .icon {
    background-color: #ff3b30;
    background-image: url(../img/block_icon.png);
    background-size: 65%;
}

#set_days_sched {
    box-sizing: border-box;
    height: 100px;
    width: 100%;
    text-align: center;
}

#set_days_sched .sched_weekdays_settings {
    display: inline-block;
    position: relative;
    width: 12%;
    height: 40px;
    margin-top: 30px;
}

.sched_weekdays_settings label {
    padding-bottom: 20px;
    position: relative;
}

.sched_weekdays_settings input.days.checkbox:checked~label {
    color: #2886c7;
}

#set_active_time.full_width_btn.time_btn {
    margin: 10px auto 20px auto;
}

#set_schedule .sched_weekdays_settings.first_day {
    margin-left: 1%;
}

#set_schedule .sched_weekdays_settings label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    font-size: 20px;
}

#set_schedule .sched_weekdays_settings input {
    padding: 0px;
    margin: 0px;
    visibility: hidden;
    position: relative;
    top: 7px;
    right: 8px;
}

input.set_start_time.left {
    text-align: right;
}

div.sched_weekdays_settings .fake_checkbox {
    position: absolute;
    top: 20px;
    left: 40%;
    margin: 0;
}

#filter_images {
    padding: 0 0 0 10px;
}

#sched_select_holder select,
.mobile #filter_images {
    text-transform: uppercase;
    padding: 0 0 0 10px;
    text-align: center;
    width: 100%;
}

#sched_select_holder select:disabled {
    color: gray;
}

#sched_select_holder .hollow_bg {
    border-radius: 5px;
    margin-top: 3px;
}

#sched_select_holder select#set_schedule_comm:not(.duo_light) {
    width: 90%;
    max-width: 350px;
}

#sched_select_holder.advanced_select_schedule .hollow_bg {
    margin-top: 20px;
}

#sched_add_popup select option,
#threshold option,
#scene_options_command select option,
#filter_images option,
#current_wifi_ssid option,
#fade_rate_input option,
#dimmer_pulse_mode option {
    color: #000;
}

#sched_add_popup #set_schedule_base {
    margin-top: 15px;
}

#scene_options_command select {
    text-align: left;
}

#sched_select_holder div.select_holder {
    display: inline-block;
    width: 24%;
    text-align: center;
    padding-top: 5px;
}

#sched_select_holder span.text {
    margin: 3px auto;
}

#sched_select_holder select option {
    text-align: center;
}

div.sched_weekdays_settings .days:checked+span.fake_checkbox,
div.sched_weekdays_trigger .gen_cond_days:checked+span.fake_checkbox {
    background: url(../img/checkbox_bg.png) no-repeat 50%;
    background-size: contain;
}

@media (max-width: 950px) and (min-width: 765px) {
    #advanced_sched_holder .sched_days {
        padding-bottom: 5px;
    }
    #advanced_sched_holder .edit_icon,
    #advanced_sched_holder .delete_icon {
        width: 35px;
        height: 35px;
    }
    #add_new_temp_schedule #advanced_sched_holder .edit_icon,
    #add_new_temp_schedule #advanced_sched_holder .delete_icon {
        width: 40px;
        height: 40px;
    }
    #advanced_sched_holder .sched_time,
    #advanced_sched_holder .sched_time_end {
        font-size: 25px;
        margin: 6px 5px 0px 0px;
        max-height: 30px;
    }
    #add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time,
    #add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time_end {
        margin: 10px 10px 0px 5px;
        font-size: 30px;
        max-height: none;
    }
    #advanced_sched_holder .sched_buttons_holder {
        margin-top: 13px;
    }
    .sched_comm {
        max-height: 30px;
        font-size: 12px;
    }
    #advanced_sched_holder .sched_holder {
        height: 65px;
    }
    #advanced_sched_holder .sched_buttons_holder {
        margin-top: 13px !important;
    }
    #add_new_temp_schedule #advanced_sched_holder .sched_buttons_holder {
        margin-top: 20px !important;
    }
    table.sched_params {
        margin-top: 6px;
    }
    td.sched_power {
        font-size: 25px;
        padding-top: 0;
        line-height: 24px;
    }
    td.sched_mode {
        min-width: 26px;
        background-size: 22px;
        background-position: 50% 1px;
    }
    td.sched_mode.auto {
        font-size: 22px;
        padding-top: 1px;
    }
    td.sched_fan {
        min-width: 26px;
        background-size: 22px;
        background-position: 50% 3px;
        padding-top: 7px;
    }
    td.sched_temp {
        font-size: 26px;
        line-height: 24px;
        padding: 0;
    }
}

@media(max-width: 600px) {
    #advanced_sched_holder .sched_days {
        padding-bottom: 5px;
    }
    #sched_select_holder div.select_holder {
        display: inline-block;
        width: 49%;
    }
    #sched_add_popup #start_active_time,
    #night_mode_popup .start_active_time {
        margin-bottom: 0;
    }
    #sched_add_popup .sched_weekdays_settings {
        margin-top: 0px;
        padding: 5px 0 10px 0;
    }
    #sched_add_popup #set_days_sched {
        height: auto;
    }
    #advanced_sched_holder .sched_time,
    #advanced_sched_holder .sched_time_end {
        font-size: 25px;
        margin: 0px 5px 0px 0px;
        max-height: 30px;
        padding-top: 8px;
    }
    #add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time,
    #add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time_end {
        font-size: 30px;
        max-height: 60px;
        position: relative;
        padding-top: 0;
        margin: 10px 10px 0px 5px;
    }
    .sched_comm {
        max-height: 30px;
        font-size: 12px;
    }
    .sched_holder:not(.ac_container) .sched_comm {
        padding-top: 10px;
    }
    #advanced_sched_holder .sched_holder.ac_container .sched_comm {
        height: auto;
        min-height: 38px;
        overflow: auto;
    }
    #advanced_sched_holder .sched_holder {
        height: 65px;
    }
    #advanced_sched_holder .sched_buttons_holder {
        margin-top: 13px;
    }
    div.sched_weekdays_settings label {
        margin-left: 20%;
    }
    .sched_holder table.sched_params {
        margin-top: 8px;
        min-height: 32px;
    }
    /*table.sched_params td {
        min-height: 30px;
    }*/
    td.sched_power {
        font-size: 26px;
        padding-top: 0;
        line-height: 24px;
    }
    td.sched_mode {
        min-width: 26px;
        background-size: 22px;
        background-position: 50% 1px;
    }
    td.sched_mode.cool {
        background-size: 18px;
    }
    td.sched_mode.auto {
        font-size: 22px;
        padding-top: 1px;
    }
    td.sched_fan {
        min-width: 26px;
        background-size: 22px;
        background-position: 50% 3px;
        padding-top: 7px;
    }
    td.sched_temp {
        font-size: 26px;
        line-height: 24px;
        padding: 0;
    }
}

@media(max-width:375px) {
    #advanced_sched_holder .sched_days {
        padding-bottom: 6px;
    }
    #advanced_sched_holder .sched_time {
        font-size: 20px;
        margin: 0px 5px 0px 0px;
    }
    #advanced_sched_holder .sched_days div {
        font-size: 12px;
        display: inline;
        padding: 0 4px;
    }
    #advanced_sched_holder .edit_icon,
    #advanced_sched_holder .delete_icon {
        width: 35px;
        height: 35px;
    }
    #advanced_sched_holder .sched_comm {
        max-width: 60%;
    }
    #sched_add_popup,
    #night_mode_popup {
        margin-top: 5px !important;
    }
    td.sched_power {
        font-size: 20px;
        line-height: 20px;
    }
    td.sched_mode {
        min-width: 20px;
        background-size: 18px;
        background-position: 50% 1px;
    }
    td.sched_mode.auto {
        font-size: 18px;
        line-height: 18px;
        padding-top: 2px;
    }
    td.sched_fan {
        min-width: 20px;
        background-size: 20px;
        background-position: 50% 1px;
        padding-top: 3px;
    }
    td.sched_temp {
        font-size: 20px;
        line-height: 20px;
    }
}

@media (max-width: 320px) {
    #sched_select_holder.input_holder:not(.advanced_select_schedule) {
        margin-bottom: 5px;
    }
    #advanced_sched_holder .sched_holder.ac_container .sched_time {
        margin-right: 0px;
    }
    td.sched_temp {
        text-align: right;
        padding-left: 2px;
    }
    #sched_add_popup,
    #night_mode_popup {
        margin-top: 0px !important;
    }
}

input.data_activation_scene {
    background-image: url(../img/calendar_small.png);
    background-size: 26px;
    background-position-x: 10px;
}

input.mobile_time {
    margin: 20px 0;
}

#sched_add_popup input[type="number"]::-webkit-outer-spin-button,
#sched_add_popup input[type="number"]::-webkit-inner-spin-button,
#night_mode_popup input[type="number"]::-webkit-outer-spin-button,
#night_mode_popup input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#sched_add_popup input[type="number"],
#night_mode_popup input[type="number"] {
    -moz-appearance: textfield;
}

#sched_add_popup input[type='number']::selection,
#night_mode_popup input[type='number']::selection {
    color: rgb(19, 133, 196);
}

.colon {
    font-size: 35px;
}

.sun_settings_popup_back,
.popup_back,
#sched_add_popup_back {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    overflow: auto;
    z-index: 999;
}

.sun_settings_popup_back .img_opt,
.popup_back .img_opt,
#sched_add_popup_back .img_opt {
    width: 100%;
    height: 100vh;
    display: table;
    table-layout: fixed;
}

.sun_settings_popup_front,
.popup_front,
#sched_add_popup,
#night_mode_popup,
#sched_use_popup {
    margin: 50px auto;
    width: 80%;
    max-width: 400px;
    background: url(../img/light_background.png) repeat;
    color: #fff;
    padding: 10px 10px 20px;
    border-radius: 3px;
    position: relative;
}

#sched_add_popup,
#night_mode_popup,
#sched_use_popup {
    max-width: 650px;
}

.sched_sun input.set_start_time {
    max-width: 45px;
}

.sun_settings_popup_front label span {
    margin-bottom: 5px;
}

.sun_settings_popup_front .text,
.popup_front .text {
    text-transform: none;
}

.sun_settings_title,
.popup_title {
    width: 100%;
    text-align: center;
}

#advanced_sched_holder .sched_time.sunrise_set {
    background: url('../img/sunrise_small_1.png') no-repeat 0px 0px;
    min-width: 30px;
    padding-left: 40px;
}

#advanced_sched_holder .sched_time.sunset_set {
    background: url('../img/sunset_small.png') no-repeat 0px 0px;
    min-width: 30px;
    padding-left: 40px;
}

h1.popup_title {
    margin-bottom: 20px;
    position: relative;
}

#scene_options_command .select_holder span {
    color: #fff;
}

.ss_header {
    min-height: 45px;
    margin-top: 15px;
}

#sun_on_cancel_button .icon {
    background-color: #ff3b30;
    background-image: url(../img/block_icon.png);
    background-size: 65%;
}

#sun_add_time {
    padding: 1px;
    text-align: center;
    max-width: 200px;
}

.hr_ss_value {
    border-radius: 6px;
    height: 45px;
    color: gray;
    display: table;
    vertical-align: middle;
    margin-bottom: 15px;
    width: 90% !important;
    margin-left: auto;
    margin-right: auto;
}

.hr_ss_value div {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    padding: 0 4px;
}

.ss_not_saved,
.sch_not_saved {
    color: #F3CB74;
}

.copy_sun,
.copy_sched {
    max-width: 90%;
    padding-left: 1px;
    text-transform: uppercase;
}

.copy_sched {
    margin-top: 10px;
}

@media(max-width: 700px) {
    .sun_settings_popup_front.pop_mob {
        margin: 10px auto;
    }
}


/* ----------- ADD PAGEs ------------ */

.add_page .mw_360 {
    box-sizing: border-box;
    margin: auto;
}

#step_1 {
    padding: 0 20px;
}

.add_page .text_input {
    width: 100%;
}

#room_name {
    background-image: url(../img/room_icon.png);
    background-size: 24px;
    background-position: 9px 50%;
}

#upload_picture_btn .icon {
    background-image: url(../img/photo_icon.png);
    background-size: 26px;
}

#save_room .icon,
#save_device .icon,
#save_camera .icon,
.icon.save,
#add_ir_remote_page .icon.next,
span.icon.enabled,
#start_scaning .icon {
    background-image: url(../img/check_icon.png);
    background-color: #98cb4a;
    background-size: 26px;
}

.icon.next {
    background-image: url(../img/next_icon.png);
    background-size: 17px!important;
}

.icon.prev {
    background-image: url(../img/prev_icon.png);
    background-size: 17px!important;
}

.add_page .hollow_bg {
    margin-bottom: 20px;
}

#add_scene.add_page .hollow_bg {
    margin-bottom: 0;
}

.slider_holder {
    width: 84%;
    box-sizing: border-box;
    margin: auto;
    margin-top: 20px;
    position: relative;
}

.slider_holder .lSAction {
    position: absolute;
    width: 100%;
    height: 20px;
    top: -10px;
    bottom: 0;
    margin: auto;
    z-index: -1;
}

.slider_pic {
    margin-bottom: 20px !important;
}

.slider_holder a.custom_lSPrev,
.slider_holder a.custom_lSNext {
    background: url(../img/arrow_up.png) no-repeat;
    background-size: contain;
    background-position: 50%;
    width: 20px;
    height: 30px;
    display: block;
    position: absolute;
    top: -15px;
    bottom: 0;
    margin: auto;
}

.lSNext,
.lSPrev {
    display: none !important;
}

.slider_holder a.custom_lSPrev {
    -webkit-transform: rotate(270deg);
    cursor: pointer;
    transform: rotate(270deg);
    left: -24px;
}

.slider_holder a.custom_lSNext {
    -webkit-transform: rotate(90deg);
    cursor: pointer;
    transform: rotate(90deg);
    right: -24px;
}

.slider_pic li {
    float: left;
    width: 126px;
    height: 126px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px;
    margin-right: 17.5px;
    box-sizing: border-box;
    padding: 3px;
}

.slider_pic li.selected {
    box-shadow: 0px 0px 0px 3px #fff inset;
}

.slider_pic li.disabled {
    opacity: .5;
}

#choose_temp_schedule_type li.lslide,
#choose_temp_schedule_device_type li.lslide,
#add_ir_remote_form #choose_type_remote li.lslide {
    background-size: 55%;
    background-position-y: 87%;
    background-color: rgba(0, 0, 0, 0.2);
}

#add_device #choose_pic li.predefined,
#add_ir_remote_page #choose_picDevice li.predefined {
    background-size: 60%;
}

.wifi_settings_holder {
    height: 0;
    overflow: hidden;
    transition: all .4s;
}

.wifi_settings_holder.open {
    height: 121px;
}

#add_by_ip_page div.settings_holder span.text {
    line-height: 45px;
}


/* ----------- add pages ------------ */

#settings_lang,
#timezone_input {
    background-image: url(../img/language.png);
    background-size: 22px;
    background-position-x: 10px;
}

#timezone_input {
    background-image: url(../img/time_zone.png);
}

#timezone_list_holder {
    overflow: visible;
}


/*Hide mobile elements and show desktop elements and efects*/

.not_mobile #sidebar .top_options .rotate,
.not_mobile #sidebar .top_options .refresh {
    display: none;
}

.not_mobile #sidebar .sidebar_inner_holder {
    opacity: 1;
}

.not_mobile #sidebar .top_options a {
    width: 50%;
    background-size: 20% !important;
    background-position: 10% 50%;
    box-sizing: border-box;
    padding-left: 33px;
}

.not_mobile #sidebar .top_options a span {
    display: block;
    color: #272e30;
    display: block;
    height: 19px;
    line-height: 42px;
    width: 100%;
    text-align: center;
    margin-top: 11px;
}

.not_mobile #sidebar ul li:hover,
.not_mobile #sidebar .top_options a:hover {
    box-shadow: -3px 0px 0px 0px #27516c inset;
    cursor: pointer;
}

.not_mobile #scenes ul li .scene_execute:hover {
    background-color: #fff;
}

.not_mobile #scenes ul li .scene_execute:hover .ex_text {
    color: #272e30;
}

.not_mobile #scenes ul li .image_holder .icon {
    z-index: 1;
    cursor: pointer;
}

.not_mobile #rooms ul li .action:not(.edit_btn):hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 2;
}

.not_mobile #scenes ul li .action:not(.edit_btn):hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 2;
}

.not_mobile #groups ul li .action:not(.edit_btn):hover:before,
.not_mobile #alarms ul li .action:not(.edit_btn):hover:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    z-index: 2;
}

.not_mobile .full_width_btn,
#device_page .device_actions ul li {
    transition: all .2s;
}

.not_mobile .full_width_btn:hover,
#device_page .device_actions ul li:hover {
    background: #fff;
    color: #272e30;
}

.not_mobile .full_width_btn:hover span,
#device_page .device_actions ul li:hover span,
#device_page .device_actions ul li:hover .text {
    color: #272e30;
}

.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.awesomplete {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: auto;
}

.add_page .awesomplete {
    margin-bottom: 20px;
}

.awesomplete>input {
    display: block;
    margin-bottom: 0!important;
}

.awesomplete>ul {
    position: absolute;
    left: 0;
    z-index: 1000;
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #fff;
    background-color: #000;
    height: 320px;
}

.awesomplete>ul::-webkit-scrollbar {
    display: none;
}

.awesomplete>ul:empty {
    display: none;
}

@supports (transform: scale(0)) {
    .awesomplete>ul {
        transition: .2s ease;
    }
}


/* Pointer */

.awesomplete>ul:before {
    content: "";
    position: absolute;
    z-index: 9999999;
    top: -.43em;
    left: 1em;
    width: 0;
    height: 0;
    padding: .4em;
    background-color: #fff;
    border: inherit;
    border-right: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.awesomplete>ul>li {
    position: relative;
    padding: .2em .5em;
    cursor: pointer;
    width: 100%;
}

.awesomplete>ul>li:hover {
    background: hsl(200, 40%, 80%);
    color: black;
}

.awesomplete>ul>li[aria-selected="true"] {
    background: hsl(205, 40%, 40%);
    color: white;
}

.awesomplete li[aria-selected="true"] mark {
    background: hsl(86, 100%, 21%);
    background: transparent;
}

.awesomplete ul {
    border-top: 1px solid gray;
    border-radius: 1px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 400px;
}

.awesomplete ul>li {
    padding-left: 10px;
    line-height: 2;
}

.awesomplete ul>li>mark {
    background-color: transparent;
    color: #2886c7;
}

.overflow_visible {
    overflow: visible;
}

.pos_rel {
    position: relative;
    z-index: 2;
}

#device_page td.sensor2x2 {
    vertical-align: top;
}

#device_page td.sensor2x2.wide {
    width: auto;
}

#device_page .quatro_butt {
    height: auto;
}

#device_page .sleep_mode_notification div {
    text-transform: none;
    padding: 10px;
    padding-bottom: 0;
    font-size: 14px;
    color: #bbbbbb;
}

#device_page .single_control.offline_device .sleep_mode_notification {
    display: none;
}

#status_container_holder {
    position: relative;
    margin: 0 10px 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

#status_container {
    background-color: #5B5C5D;
    color: #fff;
    padding: 5px 0 5px 10px;
}

#status_container span {
    text-transform: none;
    font-size: 14px;
}

#status_container #last_motion{
    font-size: 14px !important;
}

#quick_actions_button {
    margin: 10px;
    padding: 10px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    text-align: center;
    display: flex;
    border: 1px solid gray;
    box-sizing: border-box;
    flex-direction: column;
}

#quick_actions_button .qab_image  {
    width: 100%;
    height: 120px;
    display: inherit;
}

#quick_actions_button .qab_image span {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-flex;
    margin: 0 1%;
}

#quick_actions_button .qab_image span:nth-of-type(1) {
    flex: 0 1 23%;
    background-image: url('../img/complex_images/shellymotion_150x200.png');
}
#quick_actions_button .qab_image span:nth-of-type(2) {
    flex: 0 2 48%;
    background-image: url('../img/complex_images/movement_303x200.png');
}
#quick_actions_button .qab_image span:nth-of-type(3) {
    flex: 0 1 23%;
    background-image: url('../img/complex_images/bulb_159x200.png');
}

#quick_actions_button .qab_text {
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

#quick_actions_button  .qab_buttons {
    width: 100%;
    height: 50px;
    display: inherit;
}


#quick_actions_button_small {
    display: none;
    margin: 0 auto 20px auto;
    padding: 20px 10px;
    border: 1px solid gray;
    box-sizing: border-box;
    height: 50px;
    width: 80%;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-image: url(../img/complex_images/movement_303x200.png);
    background-repeat: no-repeat;
    background-position: 2%;
    background-size: 9%;

}

#quick_actions_button_small:hover{
    background-color: white;
    color: #000;
}



/* 
@media (max-width: 1100px) and (min-width: 700px),
(max-width: 550px) {
    #status_container span,
    #status_container span,
    #status_container span {
        display: block;
    }
    #last_flood_alarm #last_smoke_alarm {
        padding-top: 5px;
    }
} */

body {
    min-height: calc(100vh - 60px);
}
/* remove logo and small menu height */

.page,
.page_content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    min-height: inherit;
}

.page_holder {
    display: flex;
    flex-direction: column;
    min-height: inherit;
}

.col-1:before,
.col-2:before,
.col-3:before,
.col-1:after,
.col-2:after {
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

.col-2:before,
.col-3:before {
    left: -2px;
}

.col-1:after,
.col-2:after {
    right: 0;
}

#group_page .col-2:after,
#alarms_inner_page .col-2:after {
    display: none;
}


@media screen and (max-width: 460px) {
    .schedule_settings_row {
        max-width: 150px;
    }
}

@media screen and (max-width: 700px) {
    .section_holder {
        box-sizing: border-box;
        width: 100%;
        /* float: left; */
        position: relative;
        margin-bottom: 10px;
    }

    .col-1:before,
    .col-2:before,
    .col-3:before,
    .col-1:after,
    .col-2:after {
        display: none;
    }

    #alarms_inner_page.mw_360 {
        max-width: none;
    }
}

@media screen and (min-width: 700px) {
    #device_page td.sensor2x2 {
        vertical-align: top;
    }

    #device_page td.sensor2x2.wide {
        width: auto;
    }

    #device_page .quatro_butt {
        height: auto;
    }

    #device_page .sleep_mode_notification div {
        text-transform: none;
        padding: 10px;
        padding-bottom: 0;
        font-size: 14px;
        color: #bbbbbb;
    }
    
    .section_holder {
        box-sizing: border-box;
        width: 33%;
        float: left;
        position: relative;
    } 

    .shared_devices .section_holder.col-1 {
        /* max-width: 600px; */
        width: 100%;
        margin: 0 auto;
    }

    .shared_devices .section_holder.col-1:before {
        width: 2px;
        right: auto;
    }
    /* #room_inner_page.shared_devices .section_holder.col-1:after {
        width: 0;
    } */

    #device_page .section_holder {
        width: 50%;
    }

    #group_page .section_holder {
        width: 33%;
        box-sizing: border-box;
        float: left;
        position: relative;
    }
    .section_holder.col-3 {
        box-sizing: border-box;
        /* width: 50%; */
        width: 33%;
        float: right;
    }

    #group_page .section_holder {
        width: 50%;
        box-sizing: border-box;
        float: left;
        position: relative;
        /* min-height: calc(100vh - 120px); */
    }
    #device_page .col-2 h2:first-child {
        margin-top: 0;
    }
    #devices ul:not(.not_added) li .prop_holder .device_consumption {
        margin-right: 1%;
    }
    #device_page .device_actions.little_rez {
        display: none;
    }
    #device_page .device_actions.big_rez {
        display: block;
        margin-bottom: 20px;
    }
    .schedule_settings form .hollow_bg {
        line-height: normal;
        display: inline-block;
    }
    .schedule_settings_span {
        line-height: normal;
        vertical-align: middle;
        height: 40px;
        padding: 10px 20px 20px 30px;
        display: inline-block;
        width: 100%;
        max-width: 100px;
    }
    .schedule_header {
        padding: 10px 0;
    }
    #devices .loading_state .control_icon:after {
        background-size: 25%;
    }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
    .col-3:before {
        content: '';
        width: 2px;
        height: 100%;
        position: absolute;
        left: -2px;
        top: 0;
        background-color: #fff;
        z-index: 1;
        display: block;
    }
    .col-2:after {
        display: none;
    }
}

@media screen and (min-width: 700px) {
    #device_page #info_and_controls {
        margin: 10px
    }

    .page_content {
        box-sizing: border-box;
        position: relative;
        max-width: 1440px;
        margin: auto;
    }

    #alarms_inner_page.mw_360 {
        max-width: 330px;
    }

    #alarms_inner_page .section_holder.col-2 {
        width: 100%;
    }

    #alarms_inner_page .col-2:before,
    #alarms_inner_page .col-2:after {
        display: none;
    }
}

@media screen and (min-width: 900px) {
    .section_holder.col-1,
    .section_holder.col-2,
    .section_holder.col-3 {
        width: 33.333%;
        /* float: left; */
        position: relative;
    }

    .empty_screen .section_holder.col-1 {
        width: 100%;
    }

    #alarms_inner_page .col-2 {
        width: 60%;
        max-width: 365px;
    }
    #device_page .section_holder {
        width: 50%;
        float: left;
    }
    #group_page .section_holder {
        width: 50%;
        box-sizing: border-box;
        float: left;
        position: relative;
        /* min-height: calc(100vh - 120px); */
    }

    #device_page .col-2:after,
    #alarms_inner_page .col-2:before,
    #alarms_inner_page .col-2:after {
        display: none;
    }
    #device_page .col-2 h2:first-child {
        margin-top: 0;
    }

    #devices ul:not(.not_added) li .prop_holder .device_consumption {
        margin-right: 1%;
    }

    #device_page .device_actions.little_rez {
        display: none;
    }
    #device_page .device_actions.big_rez {
        display: block;
        height: 142px;
        margin-bottom: 20px;
    }
    .schedule_settings form .hollow_bg {
        line-height: normal;
        display: inline-block;
    }
    .schedule_settings_span {
        line-height: normal;
        vertical-align: middle;
        height: 40px;
        padding: 10px 20px 20px 30px;
        display: inline-block;
        width: 100%;
        max-width: 100px;
    }
    .schedule_header {
        padding: 10px 0;
    }

    #devices .loading_state .control_icon:after {
        background-size: 25%;
    }

   
    #room_inner_page.hidden_devices #db_c1 {
        width: 100%;
    }

}

@media screen and (min-width: 1223px) {
    .page_content {
        box-sizing: border-box;
        position: relative;
        max-width: 1440px;
        margin: auto;
    }

    #room_inner_page.hidden_devices.page_content {
        max-width: 675px;
    }

    #alarms_inner_page.mw_360 {
        max-width: 660px;
    }

    .page_content.with_sidebar {
        padding-right: 296px;
    }

    #sidebar {
        /* background: #fff url(../img/sidebar_white_background.png) repeat; */
        transform: translate(0%, 0px);
        -webkit-transform: translate(0%, 0px);
        position: absolute;
        transition: 0s;
        min-height: calc(100vh - 60px);
        height: 100%;
    }

    #sidebar.open {
        box-shadow: none;
        border-left: 2px solid #fff;
    }

    #sidebar .top_options,
    #sidebar .top_options a {
        height: 40px;
    }

    /* .not_mobile #sidebar .top_options a span {
        line-height: 20px;
    } */

    #sidebar .top_options a {
        background-size: 40% !important;
    }

    #sidebar .sidebar_inner_holder {
        opacity: 1;
    }

    .room #list_menu:not(.done_btn),
    .dashboard #list_menu:not(.done_btn),
    .temp_schedules #list_menu:not(.done_btn),
    .alarms #list_menu:not(.done_btn) {
        display: none;
    }

}

@media screen and (min-width: 1439px) {
    .page_content {
        box-shadow: 0px -3px 5px 0px rgba(255, 255, 255, 0.1);
        min-height: calc(100vh - 60px);
    }
}

#room_inner_page.shared_devices .section_holder.col-2,
#room_inner_page.shared_devices .section_holder.col-3,
#room_inner_page.shared_devices #db_c2,
#room_inner_page.shared_devices #db_c3,
#room_inner_page.shared_devices #add_room_device_btn_2,
#room_inner_page.shared_devices #add_room_device_btn,
#room_inner_page.hidden_devices #db_c2,
#room_inner_page.hidden_devices #db_c3,
/* #room_inner_page.hidden_devices #add_room_device_btn, */
#room_inner_page.hidden_devices #add_room_device_btn_2
{
    display: none;
}


/*---------------MESSI------------*/

.messi {
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    text-transform: none;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    /* background-color: rgba(0, 0, 0, 0.5); */
}

.messi * {
    text-transform: none;
    color: #272e30;
}

.messi .messi-box {
    margin: auto !important;
    padding: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
}

.messi-wrapper {
    border-radius: 0;
}

.messi-titlebox {
    background-color: transparent !important;
    text-shadow: none;
    text-align: center;
}

.messi-content {
    text-align: center;
    font-size: 16px;
    padding: 12px !important;
}

.messi-actions {
    display: flex;
    max-width: 100%;
    padding-top: 0;
    margin: auto;
    border: 0;
}

.messi-box:after {
    content: '';
    display: block;
    width: 30px;
    height: 47px;
    margin: auto;
    position: absolute;
    bottom: -47px;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
}

.messi-titlebox.success {
    border-bottom: 2px solid #98cb4a;
}

.messi-box.success {
    border-bottom: 47px solid #98cb4a;
}

.messi-box.success:after {
    background-image: url(../img/check_icon.png);
}

.messi-titlebox.warning {
    border-bottom: 2px solid #ffcc00;
}

.messi-box.warning {
    border-bottom: 47px solid #ffcc00;
}

.messi-box.warning:after {
    background-image: url(../img/warning_icon.png);
    width: 35px;
}

.messi-titlebox.error {
    border-bottom: 2px solid #ff3b30;
}

.messi-box.error {
    border-bottom: 47px solid #ff3b30;
}

.messi-box.error:after {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAQAAABIkb+zAAAC9UlEQVR4Ae3bTUsbaxTA8TELk5jo5hrjptUqUun3UINphdYWlFrwC4hItIT2c7QBR9RFK4jbFhSDbgoW90KkJga9QXzF3DTiQvl3fzfPM5m303b+Zz/wg5lkc44R5FxBQUFBQXSSJssS2xQ455Z77rnlnAJbLJIlTRLDyXHqQXFGWaCETgeYvCAmBRBimDVusFqdVVKE/AW0kaGMnQ6ZodUfQIz3XOFEl2Rp8RowQQUnO2bcO8Aj8rjROl1eACap4VZVXrsLiLCM25mE3QIk2cWLdki4AeijjFcV6XEa8IQTvKxCv5OAPk7wugq9TgGSlPGjIgknABF28asdwvYBy/iZaRcwid9N2AH0UMPvqnQ1DsgjofVGARNIaawRQIwKdvr/8+x0RNQ64B2IAcCcVUAbV6IAF8StATIgCgDTVgAhyuIAJUL6gGEQB4BBfcCaSMCKLiDOjUhAjageYBREAmBED2CKBeT0AEWxgH0dQCeIBUBCDUiLBqTUgKxowJwasCQaYKoB26IBeTWgIBqwpwaciwacqgG3ogF1NeBeNODuLwDIf4X+9I/4t/8Z3UJym2rAIpKbVwOySG5WDUgjuSE1IInk2tUAgwOkVsDQAcwjtQ96gOdI7akeIEZd5B/Zf0T0AAarIgGfMHQBKZGAAX1AiENxgCJN+gCDGXGAKQwrgFYuRQHOiFkDGGRFATIYVgEtHIsBlIlYBxiMI6WXja4abCChLxiNArqo4nfXPFADJO9LjNldeDLxsxyGXUCYHfzqG832AQYdFPGjH/zj1NplLxW87l+6nVx87feYcMxjp1ePeyl5+PJ0u7H83cF3jz7ddrfW78Ms4HY5mt09gHhDFbe6ZsyLE5RuNnCjrzz07ghonCOcrMwrr8+worzlAic6I0PEn0O4ONOUsFORKWJ+nyIOssJPrFbjMwM0STkGjTJCjn10KvCRZ0R8OgZVTIIUc5jk2eOUOnfcUeeUPTaZZ5YhEjLPca1PAAgAASAABAAJ8wt6yUq+MSlBIQAAAABJRU5ErkJggg==);
    width: 35px;
}

.messi-titlebox.info {
    border-bottom: 2px solid #27516c;
}

.messi-box.info:after {
    display: none;
}

.messi .hollow_bg {
    width: 235px;
    margin: auto;
    background: url(../img/dark_background.png) repeat;
}

#wifi_ssid {
    background-image: url(../img/wifi_icon.png);
    background-size: 23px;
    background-position: 11px 50%;
}

#wifi_pass {
    background-image: url(../img/pass_icon.png);
    background-size: 32px;
    background-position: 6px 50%;
}

#rem_ssid {
    margin: auto 10px;
}

#rem_ssid_holder {
    /*width: 100%;*/
    padding: 15px 0;
    text-align: left;
    width: 235px;
    margin: auto;
}

.messi .text_input {
    color: #fff;
    background-color: transparent;
}

.messi .first_input {
    margin-top: 20px;
}

.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.messi-actions .messi-btnbox {
    height: 55px;
}

.messi .btn {
    background: none;
    border: 0;
    border-radius: 0;
    min-width: 80px;
    box-shadow: none;
    height: 55px;
    font-size: 16px;
    width: 100%;
}

.messi .btn:focus {
    outline: none;
}

.messi-actions .messi-btnbox:nth-child(2) {
    margin-left: -1px;
}

.info .messi-footbox {
    border-top: 1px solid #27516c;
}

.info .messi-actions .messi-btnbox:nth-child(2) {
    border-left: 1px solid #27516c;
}

.warning .messi-footbox {
    border-top: 1px solid #ffcc00;
}

.warning .messi-actions .messi-btnbox:nth-child(2) {
    border-left: 1px solid #ffcc00;
}

.error .messi-footbox {
    border-top: 1px solid #ff3b30;
}

.error .messi-actions .messi-btnbox:nth-child(2) {
    border-left: 1px solid #ff3b30;
}

.success .messi-footbox {
    border-top: 1px solid #98cb4a;
}

.success .messi-actions .messi-btnbox:nth-child(2) {
    border-left: 1px solid #98cb4a;
}


/*---------------messi------------*/


/* color picker */

.scale.w {
    overflow: hidden;
    height: 20px;
    position: absolute;
    top: 210px;
    left: 0px;
    right: 0px;
    background: #000000;
    /* Old browsers */
    background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #000000 0%, #ffffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #000000 0%, #ffffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1);
    /* IE6-9 */
}

.thumb_circle {
    width: 16px;
    height: 16px;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #fff;
}

.bottom_clearence {
    width: 100%;
    height: 30px;
}

.light_color_preview {
    width: 100%;
    height: 160px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 80px;
    background-color: transparent;
    z-index: -10;
}

.light_color_preview_white {
    z-index: -9;
    opacity: 0;
    background-color: #EEFFFE;
    width: 100%;
    height: 160px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 80px;
}

.light_color_preview_image {
    width: 100%;
    height: 160px;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../img/light_icon_border.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: -8;
}

#light_controll_tab,
.tab_buttons,
#alarms_controll_tab {
    width: 100%;
    text-align: center;
    margin: 20px auto;
}

#alarms_controll_tab {
    border-bottom: 2px solid #A60800;
    margin: 0px;
    padding: 20px 0 23px;
    ;
}

@keyframes move_blinker {
    50% {
        opacity: 0;
    }
}

#alarms ul li div.triggered {
    position: absolute;
    bottom: 0;
    left: 0;
    /*width: 40px;*/
    height: 40px;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

#alarms ul li div.triggered_icon {
    position: relative;
    float: left;
    width: 40px;
    height: 100%;
    background: transparent url(../img/motion_icon_red.png) no-repeat 50% 50%;
    /*background: transparent url(../img/door_icon_red.png) no-repeat 50% 50%;*/
    background-size: 50%;
    animation: move_blinker 1s linear infinite;
}

#alarms ul li div.triggered_time {
    color: white;
    padding: 0 10px;
    float: left;
    line-height: 40px;
}

#alarms ul li.alarm_triggered div.triggered {
    display: block;
}

#light_controll_tab input,
.tab_buttons input,
#warn_sens .input_holder input[type="button"],
#warn_sound input[type="button"],
#effects_container button,
#alarms_controll_tab input,
#wifi_batch_update_page .tab_buttons button {
    width: 100px;
    height: 40px;
    margin: 0 10px;
    color: white;
    border-radius: 5px;
    background: url(../img/dark_background.png) repeat;
    background: rgb(37, 42, 45);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(37, 42, 45, 1) 0%, rgba(55, 60, 63, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(37, 42, 45, 1) 0%, rgba(55, 60, 63, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(37, 42, 45, 1) 0%, rgba(55, 60, 63, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#252a2d', endColorstr='#373c3f', GradientType=0);
    /* IE6-9 */
    font-size: 16px;
    border: none;
    border-top: 1px solid rgb(55, 60, 63);
    -webkit-box-shadow: 0px 0px 1px 5px rgba(38, 43, 46, 1);
    -moz-box-shadow: 0px 0px 1px 5px rgba(38, 43, 46, 1);
    box-shadow: 0px 0px 1px 5px rgba(38, 43, 46, 1);
    cursor: pointer;
}

#wifi_batch_update_page .tab_buttons button {
    width: 43%;
    float: left;
}

#effects_container button {
    width: 100%;
    margin: 5px auto;
}

.tab_buttons input.medium {
    width: 80px;
    height: 35px;
}

.tab_container {
    display: none;
}

.tab_container.active_container {
    display: block;
}

.tab_buttons input.active_tab,
#light_controll_tab input.active_tab,
.bulb_on_config #light_controll_tab input.active_tab,
#warn_sens .input_holder #warn_sens_0.active,
#warn_sens .input_holder #warn_sens_1.active,
#warn_sens .input_holder #warn_sens_2.active,
#warn_sound .input_holder input[type='button'].active,
#effects_container button.active {
    border: none;
    -webkit-box-shadow: 0px 0px 4px 3px rgba(58, 209, 255, 1);
    -moz-box-shadow: 0px 0px 4px 3px rgba(58, 209, 255, 1);
    box-shadow: 0px 0px 4px 3px rgba(58, 209, 255, 1);
}

#alarms_controll_tab input.active {
    border: none;
    -webkit-box-shadow: 0px 0px 4px 3px rgba(179, 0, 0, 1);
    -moz-box-shadow: 0px 0px 4px 3px rgba(179, 0, 0, 1);
    box-shadow: 0px 0px 4px 3px rgba(179, 0, 0, 1);
}

#color_picker_rgb,
#white_picker_rgbw2,
#color_picker_white {
    width: 200px;
    height: 200px;
    text-align: center;
    display: table;
    margin: 10px auto;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

#current_color1,
#current_color2 {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 3;
    border-radius: 3px;
}

/* #rgb_controls .range_holder,
#rgb_color_controls .range_holder,
#white_controls .range_holder,
#rgbw2_white_controls .range_holder {
    width: 84%;
    margin: 30px auto;
} */

#scenes_page #rgb_controls .range_holder,
#scenes_page #white_controls .range_holder {
    margin-bottom: 0
}

#rgb_color_controls .range_holder h3 {
    margin: 20px 0px;
    color: #fff;
    text-align: center;
}

#save_favorite {
    margin: 20px 0 0 0;
    width: 50px;
    height: 50px;
    position: relative;
    font-size: 16px;
    -webkit-appearance: none;
    position: relative;
    background-image: url(../img/dark_background.png);
    border-radius: 8px;
    border: 5px solid #fff;
}

#save_favorite:after {
    op: 0;
    left: 0;
    content: "+";
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 42px;
    font-family: initial;
    display: flex;
    align-items: center;
    justify-content: center;
}

#effects_selector h2,
#favorites_selector h2 {
    font-size: 18px;
    width: 90%;
    padding: 10px 15px;
    color: #fff;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#light_effects_wrapper {
    margin-bottom: 10px;
}

#scenes_page .settings_layout {
    width: 95%;
    margin: auto;
    margin-top: 20px;
    border-top: 1px solid #63686a;
}

#favorites_container {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#favorites_container>.favorites_button,
#favorites_container>i {
    margin: 20px 0 0 0;
    width: 60px !important;
    height: 60px;
    border-radius: 8px;
}

#favorites_container>.placeholder_color {
    animation: colorchange 5s infinite;
    webkit-animation: colorchange 1s infinite;
    background-color: #43484b;
}

#light_effects {
    width: 80%;
    margin: auto;
}

@keyframes colorchange {
    0% {
        background: #43484b;
        transform: scale(1);
    }
    50% {
        background: #505050;
        transform: scale(.9);
    }
    100% {
        background: #43484b;
        transform: scale(1);
    }
}

@-webkit-keyframes colorchange
/* Safari and Chrome - necessary duplicate */

{
    0% {
        background: #43484b;
        transform: scale(1);
    }
    50% {
        background: #505050;
        transform: scale(.9);
    }
    100% {
        background: #43484b;
        transform: scale(1);
    }
}

#favorites_container>.favorites_button {
    margin: 20px 0 0 0;
    border: none;
    font-size: 16px;
    -webkit-appearance: none;
    position: relative;
}

.removeable:after {
    top: 0;
    left: 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../img/x_mark.png);
    background-position: center;
    background-repeat: no-repeat;
}

.inverse:after {
    -webkit-filter: invert(1);
    filter: invert(1);
}

.transition_out {}

#rgb_prdef_buttons,
#white_predef_buttons {
    display: table;
    margin: 20px auto;
    text-align: center;
}

#rgb_prdef_buttons input,
#white_predef_buttons input {
    width: 70px;
    height: 30px;
    background-color: gray;
    border-radius: 3px;
    color: white;
    margin: 0 5px;
    border: none;
    border-top: 1px solid rgb(55, 60, 63);
    -webkit-box-shadow: 0px 0px 1px 5px rgba(38, 43, 46, 1);
    -moz-box-shadow: 0px 0px 1px 5px rgba(38, 43, 46, 1);
    box-shadow: 0px 0px 1px 5px rgba(38, 43, 46, 1);
    font-size: 16px;
    -webkit-appearance: none;
}

.bulb_on_config #light_controll_tab input {
    box-shadow: none;
}

.rgbw2_on_config #rgb_prdef_buttons input,
.bulb_on_config #rgb_prdef_buttons input,
.bulb_on_config #white_predef_buttons input {
    box-shadow: none;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 60px;
}

#white_predef_buttons input {
    margin: 0 10px;
}

#white_predef_buttons input {
    color: black;
}

#rgb_prdef_buttons #rgb_red {
    background-color: #CB4A4A;
}

#rgb_prdef_buttons #rgb_blue {
    background-color: #2886C7;
}

#rgb_prdef_buttons #rgb_green {
    background-color: #98CB4A;
}

#rgb_prdef_buttons #rgb_yellow {
    background-color: #EEE84E;
}

#white_predef_buttons #w_warm {
    background-color: rgb(255, 171, 94);
}

#white_predef_buttons #w_white {
    background-color: rgb(255, 255, 255);
}

#white_predef_buttons #w_cold {
    background-color: rgb(202, 218, 255);
}

#device_page div#info_and_controls div.control_icon.camera_play_icon {
    background-image: url(../img/big_play_icon.png);
}

#info.camera.no_image_true {
    background-image: url(../img/camera_white_icon.png);
}

#device_page #warn_time .text_input.col_6 {
    max-width: 110px;
    margin: 5px auto;
    text-align: center;
    padding: 10px 0 0 0;
}

#device_page #warn_time .hollow_bg {
    display: inline-block;
    width: 100%;
    max-width: 110px;
    text-align: center;
}

#warn_time_tab {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#warn_time_tab td.left_col {
    text-align: left;
    padding-left: 5px;
}

#warn_time_tab td.right_col {
    text-align: right;
}

.warn_time_text {
    width: 50%;
    display: inline-block;
}

#warn_time_week {
    width: 95%;
    margin: 10px auto 0;
}

#warn_time_week td {
    text-align: center;
}

#warn_time_week td .fake_checkbox {
    margin: 10px auto;
    float: none;
}

#warn_sens .input_holder input[type="button"],
#warn_sound input[type="button"] {
    width: 80px;
}

#warn_sound .warn_sound_buttons {
    margin: 20px auto;
}

.for_clone {
    display: none;
}

.devices_to_choose .room_list_container {
    border: 0 solid rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid #696E71;
}

.devices_to_choose ul li h2 {
    width: 85%;
    padding-right: 0;
}

#devices.devices_to_choose ul li h2,
#group_devices.devices_to_choose ul.room_devices_ac_list li h2 {
    width: 85%;
    padding-right: 0;
    position: absolute;
}

.devices_to_choose .device_choose_label {
    display: block;
    padding-top: 23px;
    height: 42px;
}

.devices_to_choose .fake_checkbox {
    float: right;
    margin-right: 0;
}

#timelapse_settings {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#timelapse_settings td.left_col {
    width: 70%;
    text-transform: capitalize;
    text-align: left;
}

#timelapse_settings .right_col {
    text-align: center;
}

#device_page .warn_disabled input[type="button"].active {
    -webkit-box-shadow: 0px 0px 2px 1px rgba(58, 209, 255, 1) !important;
    -moz-box-shadow: 0px 0px 2px 1px rgba(58, 209, 255, 1) !important;
    box-shadow: 0px 0px 2px 1px rgba(58, 209, 255, 1) !important;
}

#device_page .warn_disabled input[type="button"],
#device_page .warn_disabled span.text,
#device_page .warn_disabled table,
#device_page .warn_disabled input[type="time"] {
    color: gray !important;
}

.show_pictures .icon {
    background-image: url(../img/motion_icon.png);
}

.play_video .icon {
    background-image: url(../img/video-play.png);
}

.clearence {
    width: 100%;
    height: 10px;
}

#db_top_tab {
    display: none;
}

body.mobile #db_c2 {
    display: none;
}

body.mobile #db_top_tab {
    display: block;
}

#db_top_tab table {
    width: 95%;
    margin: 0 auto;
}

td.db_top_tab {
    width: 33%;
    height: 50px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
}

td.db_top_tab.active {
    color: rgb(58, 209, 255);
}

body.devices_disc_room #db_top_tab {
    /* display: none; */
}

.group_page_clearence {
    width: 100%;
    height: 25px;
}


/*ir remote tv*/

.choose_remote_controls {
    height: 280px;
}

#ir_remote_slider {
    margin-top: 0px;
}

#remote_core,
#remote_tv_core {
    margin-top: 12px;
}

#ir_remote_device_btn {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    width: 260px;
    height: 280px;
}

#left_ok_right {
    height: 80px;
    width: 260px;
}

.remote_contr_arrows {
    background-image: url(../img/device_remote/blue_button.png);
}

.remote_contr_arrows.active {
    background-image: url(../img/device_remote/blue_button_glow.png);
}

.remote_contr_info_btns {
    background-image: url(../img/device_remote/button_empty.png);
}

.remote_contr_info_btns.active {
    background-image: url(../img/device_remote/button_empty_glow.png);
}

.empty_wrapper_btn {
    height: 80px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transition: background 0.2s;
}

.arrow_main_class {
    display: inline-block;
    background-position: 50%;
    transition: background 0.2s;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
}

.left_right_arr_rem {
    background-size: 20%;
}

.remote_up_down_arrows {
    margin: 15px 0 10px 0;
}

div#left_arrow.remote_contr_arrows {
    float: left;
    width: 80px;
    margin-right: 5px;
}

.left_arrow_icon {
    background-image: url(../img/device_remote/arrow_left.png);
}

div#right_arrow.remote_contr_arrows {
    float: left;
    width: 80px;
    position: relative;
    margin-left: 5px;
}

.right_arrow_icon {
    background-image: url(../img/device_remote/arrow_right.png);
}

div#ok_icon.remote_contr_arrows {
    float: left;
    width: 80px;
    margin: 0 5px;
}

.text_icon_remote,
.text_icon_remote_ac {
    display: block;
    background-repeat: no-repeat;
    color: white;
    font-size: 25px;
    line-height: 80px;
    text-align: center;
}

.up_arrow_icon {
    background-image: url(../img/device_remote/arrow_up.png);
    background-size: 80%;
}

.down_arrow_icon {
    background-image: url(../img/device_remote/arrow_down.png);
    background-size: 80%;
}

.remote_contr_info_btns {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transition: background 0.2s;
    float: left;
}

#ir_remote_device_addBtns {
    margin: auto;
    max-width: 360px;
}

#ir_remote_ac_device_addBtns {
    margin: auto;
    max-width: 410px;
}

.ac_inactive_overlay,
.ac_blocker {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 997;
    top: 0;
    left: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
}

.ac_blocker {
    background-color: transparent;
}

.ac_blocker .ac_loader {
    position: absolute;
    top: 185px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url('../img/loading_anim_thiner.png');
    background-position: 50% 50%;
    background-size: 170px;
    background-repeat: no-repeat;
    width: 170px;
    height: 170px;
    -webkit-animation: spin 2s linear infinite;
}

.ac_inactive_overlay #prepare_main {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding-top: 15px;
    margin: auto;
    text-align: center;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 18px;
}

#prepare_sec {
    position: relative;
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 15px;
    height: auto;
    line-height: 20px;
    min-height: 40px;
}

#prepare_error {
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    display: none;
}

#prepare_error span.text {
    padding: 10px 0 0 0;
}

#device_page button.retry {
    margin: 15px auto;
    max-width: 350px;
    width: 95%;
}

#device_page button.retry:hover {
    background-color: #fff;
    color: #000;
}

#device_page button.retry span.icon {
    background-color: green;
    background: green url(../img/reset_icon.png) 50% 50% no-repeat;
    background-size: 60%;
}

#device_page #prepare_error span.warn {
    width: 22px;
    height: 22px;
    background: transparent url(../img/warrning_icon.png) 50% 50% no-repeat;
    background-size: 100%;
    margin: 10px 5px 0;
    display: inline-block;
}

.infoBtn_icon {
    background-image: url(../img/device_remote/icon_info.png);
}

.settingsBtn {
    background-image: url(../img/device_remote/icon_settings.png);
}

.back_btn_icon {
    background-image: url(../img/device_remote/icon_back.png);
}

div.info_btn,
div.settings_btn,
div.src_btn {
    margin-right: 10px;
}

#power_mute_mode_btns {
    width: 100%;
    margin: auto;
    max-width: 360px;
}

.pow_mute_icon {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transition: background 0.2s;
}

div#powerBtn.pow_mute_icon {
    background-image: url(../img/big_off_icon.png);
    float: left;
}

#power_mute_mode_btns,
#power_and_mute_btns {
    width: 100%;
    margin: auto;
    max-width: 360px;
}

.ir_rem_type span.prop_icon.mode_0 {
    text-align: center;
}

.ir_rem_type span.prop_icon.mode_0::after {
    content: 'A';
    line-height: 31px;
    color: #fff;
    font-size: 16px;
    float: none;
}

.ir_rem_type span.prop_icon.mode_1 {
    background-image: url(../img/device_remote/cold_fan_mode_icon.png);
    background-size: 50% !important;
}

.ir_rem_type span.prop_icon.mode_2 {
    background-image: url(../img/device_remote/warm_fan_icon.png);
    background-size: 50% !important;
}

.ir_rem_type span.prop_icon.mode_4 {
    background-image: url(../img/fan_icon.png);
    background-size: 50% !important;
}

.ir_rem_type span.prop_icon.mode_3 {
    background-image: url(../img/device_remote/dry_icon.png);
    background-size: 50% !important;
}

.pow_mute_ac_icon {
    width: 80px;
    height: 80px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transition: background 0.2s;
}

div#powerBtn.pow_mute_ac_icon {
    background-image: url(../img/big_off_icon.png);
    float: left;
}

#ir_remote_device_addBtns div,
#ir_remote_ac_device_addBtns div {
    position: relative;
    z-index: 900;
}

div#powerBtn.active {
    background-image: url(../img/big_on_icon.png);
}

div#muteBtn.pow_mute_icon {
    background-image: url(../img/device_remote/mute_button_circle.png);
    float: right;
}

div#muteBtn.pow_mute_icon {
    background-image: url(../img/device_remote/mute_button_circle.png);
    float: right;
}

div#muteBtn.active {
    background-image: url(../img/device_remote/mute_button_circle_glow.png);
}

@media (max-width: 410px) {
    #ir_remote_device_addBtns {
        max-width: 270px;
    }
    #ir_remote_ac_device_addBtns {
        max-width: 310px;
    }
    #power_and_mute_btns,
    #power_mute_mode_btns {
        max-width: 270px;
    }
    .remote_contr_info_btns,
    .remote_contr_info_btns_ac {
        width: 60px;
        height: 60px;
    }
    .info_symbowls {
        height: 60px;
        width: 60px;
    }
    .small_width {
        line-height: 60px;
    }
    span.text_icon_remote_ac {
        line-height: 60px;
    }
}

@media (max-width: 800px) and (min-width: 700px) {
    #ir_remote_ac_device_addBtns {
        max-width: 310px;
    }
    #ir_remote_ac_device_addBtns .remote_contr_info_btns {
        width: 60px;
        height: 60px;
    }
    span.text_icon_remote_ac {
        line-height: 60px;
    }
    .info_symbowls {
        height: 60px;
        width: 60px;
    }
}


/*second page ir_remote_tv*/

#vol_ch_btns {
    width: 180px;
    margin: 10px auto;
    max-width: 360px;
    height: 280px;
}

.arrows_symbowls {
    background-size: 40%;
}

#volume_btn {
    float: left;
    margin-top: 20px;
}

#channel_btn {
    float: right;
    margin-top: 20px;
}

.tall_btn_top {
    background-image: url(../img/device_remote/tall_button_top.png);
}

.tall_btn_middle {
    background-image: url(../img/device_remote/tall_button_middle.png);
}

.tall_btn_bottom {
    background-image: url(../img/device_remote/tall_button_bottom.png);
}

#volume_btn.active .tall_btn_top,
#channel_btn.active .tall_btn_top {
    background-image: url(../img/device_remote/tall_button_top_glow.png);
}

#volume_btn.active .tall_btn_middle,
#channel_btn.active .tall_btn_middle {
    background-image: url(../img/device_remote/tall_button_middle_glow.png);
}

#volume_btn.active .tall_btn_bottom,
#channel_btn.active .tall_btn_bottom {
    background-image: url(../img/device_remote/tall_button_bottom_glow.png);
}

.plus_icon {
    background-image: url(../img/device_remote/plus.png);
}

.minus_icon {
    background-image: url(../img/device_remote/minus.png);
}

.info_symbowls {
    background-size: 80%;
}

div.pow_mute_ac_icon.active {
    background-image: url(../img/tv_remote/mute_button_circle_glow.png);
}


/* ------------------  HiFi ----------------------- */

span.next_icon {
    background-image: url(../img/device_remote/next_icon.png);
}

span.prev_icon {
    background-image: url(../img/device_remote/prev_icon.png);
}

span.prev_next_icon {
    background-size: 50%;
}

span.play_pause_icon {
    background-image: url(../img/device_remote/play_pause.png)
}


/* ------------------  Choose Type ----------------------- */

div#tv_type {
    background-image: url(../img/ic_tv_white.png);
}

div#hifi_type {
    background-image: url(../img/hifi.png);
}

div#ac_type {
    background-image: url(../img/ac_type.png);
}

div#stb_type {
    background-image: url(../img/set_top_box.png);
}

div#tv_type,
div#hifi_type,
div#ac_type,
div#stb_type {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 125px;
    display: inline-block;
    height: 90px;
}

#choose_type_remote {
    max-height: 400px;
    display: inline-block;
}

.type_remote_text {
    text-align: center;
}

#brand_input::placeholder {
    color: #fff;
    font-style: italic;
}

#search_brand {
    overflow: visible;
}

.on_icon {
    height: 80px;
    width: 269px;
}

#scrollable_holder.hollow_bg {
    height: 75vh;
    margin-bottom: 15px;
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
}

#scrollable_holder::-webkit-scrollbar {
    display: none;
}

#lang_list {
    position: relative;
    top: 45%;
    padding-bottom: 50%;
    width: 180px;
    height: auto;
    margin: 0 auto;
    color: white;
    font-size: 23px;
}

#lang_list li {
    margin: 20px;
    padding-left: 30px;
    cursor: pointer;
}

#lang_list li:hover {
    background: url(../img/arrow_right.png) no-repeat left;
    background-size: 7%;
}

#lang_list li.active {
    color: #2886c7;
    background: url(../img/arrow_right_blue.png) no-repeat left;
    background-size: 7%;
}

#save_language {
    margin-top: 10px;
}

.spanText {
    padding-top: 10px;
}

.turn_on_icon {
    background-image: url(../img/big_off_icon.png);
    height: 80px;
    width: 21%;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    float: left;
    margin-left: 2%;
}

.turn_on_icon.active {
    background-image: url(../img/big_on_icon.png);
}

.turn_on_text,
.buttons_choice {
    font-size: 16px;
}

.wrapper_paragraph {
    width: 75%;
    float: right;
    padding-top: 5px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    padding-left: 20px;
}

.slider_holder a.turn_on_icon_slider {
    position: absolute;
    bottom: 0px;
    top: -22px;
}

.inner_text_turn_on {
    background-color: transparent;
    padding-left: 0px;
}


/* ------------- ir ac remote ---------------*/

div#device_page.ac_single_contol:not(.device_settings_visible) {
    max-height: calc(190vh - 60px);
}

div#acBtn.pow_mute_ac_icon {
    background-image: url(../img/device_remote/circle_button_off.png);
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.floatRight>p,
.floatLeft>p {
    text-align: center;
    color: #fff;
}

div#acBtn.pow_mute_ac_icon.active {
    background-image: url(../img/device_remote/circle_button_on.png);
}

div.cold_btn_icon,
div.mode_btn_icon,
div.warm_btn_icon {
    margin-right: 10px;
}

.eco_btn_icon {
    background-image: url(../img/fan_icon.png);
}

.dry_btn_icon {
    background-image: url(../img/device_remote/dry_icon.png);
}

.cold_fan_mode {
    background-image: url(../img/device_remote/cold_fan_mode_icon.png);
}

.warm_fan_mode {
    background-image: url(../img/device_remote/warm_fan_icon.png);
}

.eco_btn_icon,
.cold_fan_mode,
.warm_fan_mode,
.dry_btn_icon {
    background-size: 50%;
}

.text_icon_remote_ac {
    font-size: 35px;
}

.temp_container {
    position: relative;
    border-radius: 125px;
    cursor: default;
    width: 300px;
    height: 300px;
    background-size: contain;
    background-image: url(../img/device_remote/gradient_temp.png);
    margin: 20px auto;
}

.container_background {
    position: absolute;
    width: 280px;
    top: 10px;
    left: 10px;
    height: 280px;
    border-radius: 140px;
    background-color: #0095ef;
}

.container_background.active {
    background-color: #fa433e;
}

.temp_numb {
    position: absolute;
    top: 115px;
    width: 100%;
    font-size: 65px;
    color: #FFF;
    text-align: center;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    z-index: 2;
}

div.ac {
    margin-top: 15px;
}

.container_background.blocked {
    background-color: #808080;
}

.fanMode {
    text-align: center;
    font-size: 25px;
    line-height: 80px;
    color: #fff;
}

.wrapper_ac {
    position: absolute;
    width: 350px;
    height: 340px;
    z-index: 998;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.rotate_div {
    position: absolute;
    width: 348px;
    height: 348px;
    z-index: 400;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/device_remote/rotate.slider.png);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 0%;
}

.rotate_div_wrapper {
    position: absolute;
    width: 348px;
    height: 348px;
    z-index: 500;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 360px) {
    .temp_container {
        width: 260px;
        height: 260px;
    }
    .container_background {
        width: 240px;
        top: 10px;
        left: 10px;
        height: 240px;
    }
    .wrapper_ac {
        width: 310px;
        height: 300px;
    }
    .rotate_div {
        width: 308px;
        height: 308px;
    }
    .rotate_div_wrapper {
        width: 308px;
        height: 308px;
    }
    .temp_numb {
        top: 95px;
    }
    .ac_blocker .ac_loader {
        top: 162px;
    }
}

div.device_stats .chart_period_buttons,
div.device_stats .chart_period_buttons {
    width: 100%;
    display: table;
}

.condition_scene_when,
.condition_scene,
.active_time_scene,
.active_time_scene_edit {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    background-color: #393E40;
    border-bottom: 2px solid #2886c7;
}

.condition_scene_do {
    width: 100%;
    margin-bottom: 20px;
    background-color: #393E40;
    border-bottom: 2px solid #2886c7;
}

#add_scene #action_devices {
    margin-top: 10px;
}

.condition_scene_when:nth-child(3),
.condition_scene_do:nth-child(3) {
    border-top: 0px;
}

.active_time_scene h2,
.active_time_scene_edit h2 {
    height: 60px;
    color: #fff;
    position: relative;
    font-size: 24px;
    margin: auto;
}

.condition_scene_when h2,
.condition_scene_do h2 {
    width: 40%;
    height: 60px;
    color: #fff;
    position: relative;
    font-size: 30px;
    margin: auto;
}

div.layout_chart {
    width: 100%;
    position: absolute;
    height: 50px;
    z-index: 2;
}

#consumption_panel_page div.device_stats div.canvas_frame span.total {
    padding-right: 20px;
}

div.custom_period {
    margin: 20px 0px 0px 0px;
    position: relative;
    font-size: 30px;
    margin: auto;
}

.condition_scene_when h2.cond,
.condition_scene_do h2.act {
    line-height: 75px;
}

.condition_scene_when h2.cond span,
.condition_scene_do h2.act span,
.active_time_scene h2.time_scene span,
.active_time_scene_edit h2.time_scene span {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 5px;
    max-height: 60px;
}

.condition_scene_when h2 span,
.condition_scene_do h2 span {
    display: block;
    width: 100%;
    text-align: center;
    bottom: 5px;
    max-height: 64px;
}

.icon.plus {
    background-image: url(../img/plus_icon.png);
    background-size: contain;
    position: absolute;
    background-position: 50%;
    background-repeat: no-repeat;
}

.icon.clock {
    background-image: url(../img/clock.png);
    position: absolute;
    background-repeat: no-repeat;
    background-size: 50%;
    background-color: #1385c4;
}

.icon.check {
    background-image: url(../img/check_icon.png);
    background-size: 70%;
    position: absolute;
    background-position: 50%;
    background-repeat: no-repeat;
}


/*.choose_device span {
    height: 20px;
}*/

.icon.plus span {
    font-size: 20px;
}

.plus_btn .icon {
    background-color: #1385c4;
}

.full_width_btn .icon.plus {
    width: 40px;
    height: 40px;
}

.full_width_btn.plus_btn {
    height: 40px;
    width: 60%;
    margin: 15px auto 10px auto;
}

#skip.full_width_btn,
#begin.full_width_btn {
    height: 40px;
    margin-top: 0;
    margin-bottom: 0;
}

/* Chart styles */

#temperature_chart .highcharts-background,
#humidity_chart .highcharts-background {
    fill: transparent;
}

.device_stats.big_resolution .highcharts-background {
    fill: #43484b;
}

.device_stats.mobile_resolution .highcharts-background {
    fill: linear-gradient(0deg, #333, #4D4D4D);
}

div.chart_holder *,
.highcharts-yaxis-labels tspan {
    text-transform: none;
}

.highcharts-point {
    cursor: pointer;
}

#condition_do.full_width_btn.plus_btn {
    margin: 20px auto;
}

div.condition_scene .scene_rooms_span {
    color: #fff;
    font-size: 20px;
    text-align: center;
    display: block;
    padding: 10px;
}

div#second_page_scenes .mw_360,
div#third_page_scenes .mw_360 {
    box-sizing: border-box;
    margin: 20px auto;
    padding: 0 20px;
}

.choosen_element,
.wraper_conditions {
    display: block;
    list-style: none;
}

.choosen_element li {
    width: 100%;
    height: 65px;
    border-bottom: 2px solid #2886c7;
    position: relative;
}

.scene_device {
    border: 0 solid rgba(0, 0, 0, 0.4);
    border-left-width: 0px;
    border-right-width: 0px;
    background-color: #4B4F52;
}

.hold_off_holder {
    padding-top: 20px;
    width: 100%;
    position: relative;
}

.hold_off_holder label {
    color: #fff;
    text-transform: none;
    padding-bottom: 20px;
    display: block;
}

.hold_off_holder span.text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-transform: none;
    color: #fff;
    z-index: 1;
}

.container_third_page {
    width: 100%;
    height: 40px;
}

.container_third_page span {
    display: block;
    font-size: 24px;
    color: #fff;
    text-align: center;
}

.scene_device ul li h2 span {
    text-align: center;
}

input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=time] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.auto_on_off,
.consuption,
.schedule {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
}

.options_scenes_schedule {
    color: #fff;
    text-transform: none;
    font-size: 16px;
}

.auto_on_off input[type=time] {
    background-color: transparent;
    width: 100%;
    height: 80px;
    text-align: center;
    font-size: 50px;
    color: #fff;
    border: none;
}

div.refinement_buttons_holder {
    width: 90%;
}

div.options_scenes_time {
    margin-top: 30px;
}

div.options_scenes_time,
div.options_scene_consuption,
div.options_scenes_schedule {
    margin-bottom: 30px;
}

div.options_scene_mode {
    margin-bottom: 10px;
}

div.options_scenes_time .colapse.closed,
div.options_scene_consuption .colapse.closed,
div.options_scenes_schedule .colapse.closed,
div.options_scene_mode .colapse.closed,
.scene_colapsed.closed {
    margin-bottom: 0;
}

div.options_scene_mode .dis_mes {
    display: none;
    color: #fff;
    margin: 0 20px 20px 20px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

div.options_scene_mode.disabled .scene_colapsed {
    background-color: #454545;
}

div.options_scene_mode.disabled .scene_colapsed h1 {
    background-color: #454545;
}

div.options_scene_mode.disabled .dis_mes {
    display: flex;
}

.temperature_chart_wrapper div.refinement_buttons_holder {
    margin-bottom: 0px;
}

button#save_scene,
button#remove_btn,
button#edit_btn,
button#back_btn_scene,
button#back_btn_edit,
button#store_scene,
button#save_edited_scene,
button#delete_btn,
button#add_condition_action,
button#back_scene_btn,
button#condition_do,
button.or_button.full_width_btn.plus_btn,
button#condition_when {
    width: 100%;
}

button.or_button.full_width_btn.plus_btn {
    background: #fff;
    color: #272e30;
}

button.or_button.full_width_btn.plus_btn:hover {
    background: rgba(0, 0, 0, .4);
}

button.or_button.full_width_btn.plus_btn:hover span.lang {
    color: #fff;
}

.condition_scene .scene_device .percent_holder {
    padding-right: 0;
}

.condition_scene .scene_device {
    margin-top: 10px;
}

#action_devices .condition_scene_when .devices_to_choose ul li {
    border: none
}

#action_devices ul li.choosen_device.disable h2,
#action_devices ul li.disable h2,
#action_devices ul li.condition_when_blocked h2,
#action_devices ul li.condition_do_blocked h2 {
    float: left;
    width: 85%;
    font-size: 17px;
    cursor: auto;
}

#action_devices ul li.condition_do_blocked h2 {
    padding-right: 0;
}

#action_devices ul li.choosen_device.disable h2 span.device_name,
#action_devices ul li.disable h2 span.device_name,
#action_devices ul li.condition_when_blocked h2 span.device_name,
#action_devices ul li.condition_do_blocked h2 span.device_name {
    height: 30px;
    line-height: 40px;
    text-align: left;
}

#action_devices ul li.choosen_device.disable h2 span.value_cond,
#action_devices ul li.disable h2 span.value_cond,
#action_devices ul li.condition_when_blocked h2 span.value_cond,
#action_devices ul li.condition_do_blocked h2 span.value_cond {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: none;
    text-align: left;
    width: 100%;
    overflow: visible;
    /*padding-top: 5px;*/
}

/* @media screen and (min-width: 414px) {
    #action_devices ul li.choosen_device.disable h2 span.value_cond,
    #action_devices ul li.disable h2 span.value_cond,
    #action_devices ul li.condition_when_blocked h2 span.value_cond,
    #action_devices ul li.condition_do_blocked h2 span.value_cond {
        padding-top: 5px;
    }
} */

#action_devices ul li h2 span.delayed_info {
    display: none;
}

#action_devices ul li.delayed h2 span.delayed_info {
    display: inline-block;
    background-color: orange;
    border-radius: 3px;
    color: #fff;
    float: left;
    text-transform: none;
    width: auto;
    height: auto;
    text-align: left;
    padding: 2px 4px;
    margin: 0 3px 0 0;
    line-height: normal;
}

#action_devices ul li h2 span {
    margin: 0;
}

#action li.delayed h2 span.delayed_info:before {
    width: 14px;
    height: 14px;
    content: '';
    float: left;
    display: block;
    background: url(../img/delay_tiny.png) no-repeat 0px 0px;
    background-size: 100%;
    margin-right: 4px;
}

#action li h2 span.action_description_text {
    display: inline-block;
    text-transform: none;
    width: auto;
    float: left;
    line-height: 20px;
    height: 20px;
}

#action li h2 span.action_description_text:first-letter {
    text-transform: capitalize;
}

.scene_device span.add_condition {
    width: 15%;
    max-width: 50px;
    height: 42px;
    float: right;
    color: #fff;
    font-size: 15px;
    text-align: center;
    padding-top: 23px;
}

#action .edit_action {
    display: block;
    width: 15%;
    max-width: 50px;
    height: 100% !important;
    float: right;
    background-image: url(../img/edit_icon_small.png);
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
}

#action .condition_do_blocked[data-type=deleted_device] .edit_action {
    background-image: url(../img/delete_icon.png);
    display: block;
    width: 50px;
    height: 100% !important;
    float: right;
    background-position: 50%;
    background-size: 50%;
    background-repeat: no-repeat;
}

.full_width_btn .icon.edit {
    background-image: url(../img/check_icon.png);
    background-color: #98cb4a;
    background-size: 26px;
}

.full_width_btn .icon.delete {
    background-image: url(../img/delete_icon.png);
    background-color: #f00;
    background-size: 26px
}

.condition_when_blocked span.edit_action_condition.hover,
.condition_do_blocked span.edit_action.hover {
    background-color: #ffcc00;
}

.condition_when_blocked span.edit_action_condition[data-info=deleted].hover,
.condition_do_blocked span.edit_action[data-info=deleted].hover {
    background-color: #f00;
}

.wraper_control_devices li .percent_holder,
.condition_when_blocked .percent_holder,
.condition_do_blocked .percent_holder {
    padding: 0 0 0 65px !important;
}

.wraper_conditions_do_delay {
    padding-left: 20px;
}

#back_button_scene {
    background: url(../img/back_icon.png) no-repeat;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-position: 50%;
    position: absolute;
    right: 10px;
    top: 10px;
}

.tab_buttons .small {
    font-size: 14px;
    width: 55px;
    padding: 2px;
}

.scene_options_wrapper {
    background-color: #393E40;
    padding: 20px 0 10px 0;
}

.scene_options_wrapper span.units {
    text-transform: none;
}

.scene_options_wrapper .threshold_text {
    padding: 20px;
    padding-top: 0;
    color: #fff;
    font-size: 16px;
    text-transform: none;
}

.scene_options_wrapper .th_label {
    float: left;
    width: 33%;
}

.scene_options_wrapper .notification_type {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.scene_options_wrapper .notification_type label:first-child {
    flex: 0 0 100%;
    margin-bottom: 20px;
}

@media screen and (max-width: 900px) {
    .scene_options_wrapper .th_label {
        width: 100%;
        padding: 10px 0;
    }
}

.option_container h1 {
    background-color: #1E2223;
}

button#save_scene.disable,
button#edit_btn.disable {
    cursor: wait;
    pointer-events: none;
}

.option_container input[type=number].disabled {
    pointer-events: none;
}

li.choosen_device h2 span.device_name,
.room_devices_list li span.vertical_align.device_name {
    line-height: 65px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

#action_devices ul li.condition_when_blocked.edit_when h2,
#action_devices ul li.condition_do_blocked.edit_do h2 {
    width: 100%;
}

#action_devices ul li.condition_when_blocked.edit_when h2 span.device_name,
#action_devices ul li.condition_do_blocked.edit_do h2 span.device_name {
    display: block;
    line-height: 60px;
    height: 60px;
    text-align: center;
}

#scenes_page button#store_scene,
#scenes_page button#cancel_scene,
#scenes_page button#save_eddited_scene {
    margin: 15px auto 10px auto;
}

.store_back_btns.mw_360 {
    margin-top: 10px;
    margin-bottom: 20px;
}

span.metric_unit.lux {
    text-transform: lowercase;
}

.store_back_btns span.icon.prev,
button#back_set_time span.icon.prev {
    background-color: #ffcc00;
}

body.ir_remote_control #device_page div.inactive {
    opacity: 0.6;
}

body.ir_remote_control #device_page span.inactive {
    opacity: 0.4;
}


/*scene width spec*/

.mw_620 {
    max-width: 620px;
    box-sizing: border-box;
    /* padding:0 20px; */
    margin: auto;
}

#add_scene span.enable_lbl {
    font-size: 12px;
    color: white;
    display: inline-block;
}

button#enable_disable_scene span.disabled {
    background-image: url(../img/disabled.png);
    background-size: 25px!important;
    background-color: #f00;
}


/* Device statistics block */

#device_page div.device_stats {
    text-align: center;
    position: relative;
    margin: 0 10px 10px 10px;
}

/* 
@media screen and (min-width: 700px){
    div.device_stats {
        margin-right: 2px;
    }
} */

#device_page div.device_stats .chart_period_buttons,
#consumption_panel_page div.device_stats .chart_period_buttons {
    width: 100%;
}

#device_page div.device_stats button.full_width_btn[type="button"],
#consumption_panel_page div.device_stats button.full_width_btn[type="button"] {
    position: static;
    width: auto;
    padding: 5px;
    margin: 0;
    width: 100%;
    font-size: 14px;
    background-color: #505151;
    border-bottom: 4px solid #696d6f;
}

@media only screen and (max-width: 328px) {
    #device_page div.device_stats button.full_width_btn[type="button"],
    #consumption_panel_page div.device_stats button.full_width_btn[type="button"] {
        padding: 5px;
        font-size: 12px;
    }
}

div.device_stats button.full_width_btn[type="button"]:hover {
    color: #e6e6e6;
}

div.device_stats button.full_width_btn[type="button"]:focus,
div.device_stats button.full_width_btn[type="button"]::-moz-focus-inner {
    outline: none;
    border: 0;
}

#device_page div.device_stats button.active.full_width_btn[type="button"],
#consumption_panel_page div.device_stats button.active.full_width_btn[type="button"] {
    background-color: #696d6f;
    color: #ffffff;
    border-bottom: 4px solid #3dcdff;
    pointer-events: none;
}

div.device_stats div.canvas_frame {
    position: relative;
    padding-top: 15px;
    background-color: #43484b;
}

div.device_stats div.canvas_frame.humidity_chart_wrapper {
    padding-top: 0;
    margin-top: 10px;
}

#consumption_panel_page div.device_stats div.canvas_frame span.total {
    padding-right: 20px;
}

div.device_stats div.canvas_frame.temperature_chart_wrapper span.total {
    top: 53px;
}

div.custom_period {
    margin: 20px 0px 0px 0px;
    position: relative;
    min-height: 90px;
    margin-bottom: 10px;
}

div.custom_period .col_6 {
    text-align: center;
}

div.custom_period span,
span.no_cloud_message {
    display: inline;
    color: #ffffff;
    width: 100%;
    text-transform: none;
    text-align: center;
}

span.no_cloud_message {
    padding-bottom: 10px;
    display: inline-block;
}

#device_page div.custom_period div.hollow_bg,
#consumption_panel_page div.custom_period div.hollow_bg {
    margin: 10px;
    text-align: left;
}

#device_page div.custom_period input.text_input,
#consumption_panel_page div.custom_period input.text_input {
    display: inline;
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url(../img/calendar.png);
    background-size: 20px;
    background-position-x: 10px;
    padding-left: 45px;
}

body.not_mobile #device_page div.custom_period input::-webkit-datetime-edit,
body.not_mobile #consumption_panel_page div.custom_period input::-webkit-datetime-edit {
    color: transparent;
}


/* Chart styles */

div.chart_holder {
    height: 200px;
    text-transform: none;
    width: 100%;
}

div.chart_holder *,
.highcharts-yaxis-labels tspan {
    text-transform: none;
}

@media (max-width: 320px) {
    #temperature_chart .highcharts-legend-item text {
        font-size: 10px !important;
    }
}

.highcharts-point {
    cursor: pointer;
}

div.refinement_buttons_holder table {
    width: 100%;
}

div.refinement_buttons_holder {
    width: 100%;
    height: 2px;
    display: inline-block;
    background-color: #7c7c7c;
    margin: 20px 0px 10px 0px;
}

.temperature_chart_wrapper div.refinement_buttons_holder {
    margin-bottom: 0px;
}

div.refinement_buttons_holder.custom_view {
    background-color: transparent;
}

div.refinement_buttons_holder table {
    position: relative;
    top: -40px;
}

#consumption_panel_page div.refinement_buttons_holder table {
    left: 10px;
}

#device_page div.refinement_buttons_holder button,
#consumption_panel_page div.refinement_buttons_holder button {
    border: none;
    background-color: transparent;
    width: auto;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    font-family: Roboto;
    text-transform: none;
    cursor: pointer;
    outline: none;
    margin-top: 20px;
}

div.refinement_buttons_holder button:after {
    content: '\00B7';
    display: block;
    font-size: 81px;
    line-height: 17px;
    overflow: hidden;
    font-family: Roboto;
    font-weight: normal;
}

#device_page div.refinement_buttons_holder button.selected,
#consumption_panel_page div.refinement_buttons_holder button.selected {
    color: #3dcdff;
}

.chart_time_zone,
.chart_units {
    text-transform: none;
    color: #bbbbbb;
    font-size: 12px;
    display: block;
    text-align: right;
    padding: 0px 20px 10px 0px;
    margin-top: -25px;
}

#device_page .consumption_chart_wrapper .chart_time_zone {
    margin-top: 0;
}

#device_page .canvas_frame .consumption_chart_wrapper {
    margin-bottom: 10px;
}

#consumption_panel_page .chart_time_zone {
    margin-top: 0;
}

.humidity_chart_wrapper .chart_time_zone {
    margin-top: 0;
}

.chart_units {
    text-align: left;
    padding: 0px 20px 10px 20px;
    margin-top: 0px;
}

/* #sensor_chart_stats .chart_overlay,
#sensor_chart_stats .chart_partial_overlay {
    left: 10px; 
    top: 10px;
} */

#sensor_chart_stats .chart_overlay.chart_cover,
#sensor_chart_stats .chart_partial_overlay {
    top: 50px;
    height: 465px;
    left: 0;
    margin-left: 0;
}

.chart_overlay.chart_cover {
    top: 82px;
    left: 0;
    margin-left: 10px;
}

/* .big_resolution .chart_partial_overlay {
    height: 314px;
    left: 0;
} */

.chart_partial_overlay {
    margin-left: 0px;
}

#sensor_chart_stats .chart_overlay span,
#sensor_chart_stats .chart_partial_overlay span {
    padding: 80px 40px 0 40px;
}

#acc_cons_panel .chart_overlay span {
    padding: 80px 40px 0 40px;
}

.chart_overlay span,
.chart_partial_overlay span {
    color: #fff;
    text-transform: none;
    display: block;
    text-align: center;
    padding: 133px 40px 0 40px;
}

.consump_ch.big_resolution .chart_overlay span,
.consump_ch.big_resolution .chart_partial_overlay span {
    padding: 67px 40px 0 40px;
}

.smoke_sens .chart_overlay span,
.smoke_sens .chart_partial_overlay span {
    padding: 64px 40px 0 40px
}

.consump_ch.mobile_resolution .chart_overlay span,
.consump_ch.mobile_resolution .chart_partial_overlay span {
    padding: 10px 10px 0 10px;
}

@media screen and (max-width:700px) {
    .consump_ch.mobile_resolution .chart_overlay span,
    .consump_ch.mobile_resolution .chart_partial_overlay span {
        padding: 5px 10px 0 10px;
        font-size: 14px;
    }
}

.big_resolution .chart_partial_overlay span.empty_data {
    padding-top: 80px;
}

#acc_cons_panel.big_resolution .chart_partial_overlay span.empty_data {
    padding-top: 100px;
}

.mobile_resolution .chart_partial_overlay span.empty_data {
    padding-top: 10px;
    font-size: 14px;
}

.chart_preloader_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart_overlay .chart_preloader_text {
    color: #fff;
    position: absolute;
    font-size: 10px;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
}

.chart_overlay .chart_preloader {
    width: 50px;
    height: 50px;
    background: url(../img/loading_anim.png) no-repeat 0px 0px;
    background-size: contain;
    -webkit-animation: spin 2s linear infinite;
}

.device_stats.big_resolution .chart_overlay .chart_preloader {
    width: 66px;
    height: 66px;
}


/* Datepicker styles */

.pickmeup {
    background: #000;
    z-index: 4;
    border-radius: .4em;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    display: inline-block;
    position: absolute;
    touch-action: manipulation
}

.pickmeup * {
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.pickmeup.pmu-flat {
    position: relative
}

.pickmeup.pmu-hidden {
    display: none
}

.pickmeup .pmu-instance {
    display: inline-block;
    height: 13.8em;
    padding: .5em;
    text-align: center;
    width: 15em
}

.pickmeup .pmu-instance .pmu-button {
    color: #eee;
    cursor: pointer;
    outline: none;
    text-decoration: none
}

.pickmeup .pmu-instance .pmu-today {
    background: #17384d;
    color: #88c5eb
}

.pickmeup .pmu-instance .pmu-button:hover {
    background: transparent;
    color: #88c5eb
}

.pickmeup .pmu-instance .pmu-not-in-month {
    color: #666
}

.pickmeup .pmu-instance .pmu-disabled,
.pickmeup .pmu-instance .pmu-disabled:hover {
    color: #333;
    cursor: default
}

.pickmeup .pmu-instance .pmu-selected {
    background: #136a9f;
    color: #eee
}

.pickmeup .pmu-instance .pmu-not-in-month.pmu-selected {
    background: #17384d
}

.pickmeup .pmu-instance nav {
    color: #eee;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    line-height: 2em
}

.pickmeup .pmu-instance nav *:first-child :hover {
    color: #88c5eb
}

.pickmeup .pmu-instance nav .pmu-prev,
.pickmeup .pmu-instance nav .pmu-next {
    display: none;
    height: 2em;
    width: 1em
}

.pickmeup .pmu-instance nav .pmu-month {
    width: 14em
}

.pickmeup .pmu-instance .pmu-years *,
.pickmeup .pmu-instance .pmu-months * {
    display: inline-block;
    line-height: 3.6em;
    width: 3.5em
}

.pickmeup .pmu-instance .pmu-day-of-week {
    color: #999;
    cursor: default
}

.pickmeup .pmu-instance .pmu-day-of-week *,
.pickmeup .pmu-instance .pmu-days * {
    display: inline-block;
    line-height: 1.5em;
    width: 2em
}

.pickmeup .pmu-instance .pmu-day-of-week * {
    line-height: 1.8em
}

.pickmeup .pmu-instance:first-child .pmu-prev,
.pickmeup .pmu-instance:last-child .pmu-next {
    display: block
}

.pickmeup .pmu-instance:first-child .pmu-month,
.pickmeup .pmu-instance:last-child .pmu-month {
    width: 13em
}

.pickmeup .pmu-instance:first-child:last-child .pmu-month {
    width: 12em
}

.pickmeup:not(.pmu-view-days) .pmu-days,
.pickmeup:not(.pmu-view-days) .pmu-day-of-week,
.pickmeup:not(.pmu-view-months) .pmu-months,
.pickmeup:not(.pmu-view-years) .pmu-years {
    display: none
}


/* End of datepicker styles */

.ios_include_screen1 {
    font-size: 18px;
    color: #fff;
    margin-top: 50px;
    width: 100%;
}

.ios_include_screen1 .text {
    padding: 15px;
    font-size: 16px;
}

.ios_include_screen1 * {
    text-transform: none;
}

.circle_bullet {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #A3C767;
    border-radius: 20px;
    line-height: 40px;
    margin: 0 15px 15px 0;
    float: left;
    text-align: center;
}

.help_img {
    display: block;
    margin: 15px 0 40px;
    width: 100%;
}

.ios #ios_include_page.wifi_auth .ios_include_screen1 {
    display: none;
}

.ios #dl_temp {
    display: none;
}

h1.add_scene {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100%;
}

span.title_scene {
    position: relative;
    top: 35%;
    left: 0;
    z-index: 11;
    float: left;
    width: calc(100% - 43px);
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 21px;
}

.container_title {
    width: 100%;
    height: 65px;
    position: relative;
    margin-bottom: 30px;
    border-bottom: 2px solid #2886c7;
}

.black_label {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
}

.black_label button#manual_scene_run {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 12.5px;
    top: 12.5px;
    border: 0;
    background: url('../img/video-play.png') no-repeat 0px 0px;
    background-size: cover;
}

.scene_screen {
    padding: 0 10px;
}

#action_devices ul.wrapper_conditions {
    margin-top: 20px;
}

.scene_screen #devices ul.room_devices_list li,
.scene_screen #custom_condition ul li {
    border-bottom: 2px solid #2B3334;
    background: #454A4C;
}

#action_devices ul.wrapper_conditions li.scene_device {
    border: 0 solid rgba(0, 0, 0, 0.4);
    border-left-width: 0px;
    border-right-width: 0px;
    background-color: #2886c7;
    margin-bottom: 10px;
}

#action_devices ul.wrapper_conditions li.scene_device:last-child {
    margin-bottom: 0;
}

.scene_screen #devices ul li.choosen_item {
    display: flex;
    margin-bottom: 10px;
}

.scene_screen #devices ul li.choosen_item .percent_holder{
    display: flex;
    height: 100%;
    padding: 0;
}

.scene_screen #devices ul li.choosen_item h2{
    position: relative;
    display: flex;
    height: 100%;
    padding: 0;
    flex: 1;
    justify-content: center;
    align-items: center;
}
/* .scene_screen #action_devices ul.wrapper_conditions, */

.scene_screen #custom_condition ul {
    margin: 10px 0px 10px 40px;
}

.condition_group_wrapper {
    position: relative;
}

.condition_group_wrapper span.or_label {
    background-color: #fff;
    padding: 10px;
    position: absolute;
    display: inline-block;
    left: 50%;
    bottom: -30px;
    border-radius: 2em;
    z-index: 9;
}

.scene_screen #action_devices .condition_scene_do ul {
    margin: 20px 0;
}

.scene_screen #action_devices h1,
.scene_screen #devices h1 {
    background-color: #262E30;
}

#back_scene_btn,
#close_scene {
    background: url(../img/back_icon.png) no-repeat;
    width: 39px;
    height: 29px;
    background-size: contain;
    background-position: 50%;
    position: absolute;
    margin: auto;
    right: 8px;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

#second_page_scenes .room_list_container:empty {
    display: none;
}

ul.choosen_element li.choosen_item {
    background-color: #1E2223;
}

@media screen and (min-width:900px) {
    #scene_main_page_wrapper {
        display: inline-block;
        box-sizing: border-box;
        width: 860px;
    }
    .mw_620 {
        max-width: 900px;
    }
    #scene_main_page_wrapper div.condition_action_wrapper,
    #scene_main_page_wrapper div.active_time_buttons_wrapper {
        display: inline-block;
        width: 405px;
        box-sizing: border-box;
        float: left;
    }
    #scene_main_page_wrapper div.active_time_buttons_wrapper {
        float: right;
    }
    .room_info.scene_colapsed,
    .relay_info.scene_colapsed,
    .sensor_info.scene_colapsed,
    .hold_off_info.scene_colapsed,
    .roller_info.scene_colapsed {
        background-position: 96.5% 50% !important;
    }
}

#set_schedule h2,
#scene_one_time_condition h2 {
    font-size: 18px;
    width: 100%;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.4);
    color: #fff;
    box-sizing: border-box;
    background-position: calc(100% - 13px) 50%;
    background-repeat: no-repeat;
    background-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

#set_schedule .start_active_time,
#set_schedule .end_active_time,
#set_schedule .set_weekdays_scene,
#scene_one_time_condition .start_time {
    background-color: #393E40;
    color: #fff;
    margin-bottom: 20px;
}

#set_schedule .input_holder {
    text-align: center;
}

#set_schedule .start_active_time span.lang,
#set_schedule .end_active_time span.lang,
#set_schedule .set_weekdays_scene span.lang,
#scene_one_time_condition .start_time span.lang {
    display: block;
    margin-top: 10px;
}

#set_schedule .set_weekdays_scene .scene_weekdays_trigger span.lang,
#set_schedule .set_weekdays_scene .scene_weekdays_settings span.lang {
    margin-top: 0;
}

#set_schedule .start_active_time span.icon,
#set_schedule .set_weekdays_scene span.icon_week,
#set_schedule .end_active_time span.icon,
#scene_one_time_condition .start_time span.icon,
#date_trigger_scene span.icon_week {
    display: inline-block;
    width: 30px;
    height: 20px;
    display: block;
    float: left;
    margin-top: 10px;
}

.set_scene_schedule_buttons {
    margin-top: 5.5em;
}

#set_schedule h2 span.icon,
#set_schedule h2 span.icon_week,
#scene_one_time_condition .start_time h2 span.icon,
#date_trigger_scene h2 span.icon_week {
    background-repeat: no-repeat;
    background-size: 20px;
    margin-left: 10px;
}

#set_schedule h2 span.icon,
#scene_one_time_condition .start_time h2 span.icon {
    background-image: url(../img/clock.png);
}

.chart_time_zone,
.chart_units {
    display: none;
}

#consumption_chart {
    height: 200px;
    border-bottom: none;
}

.chart_time_zone,
.chart_units {
    text-transform: none;
    color: #bbbbbb;
    font-size: 12px;
    display: block;
    text-align: right;
    padding: 0px 20px 10px 0px;
    margin-top: -25px;
}

#temperature_chart_params {
    width: 100%;
}

#temperature_chart_params .temp_units {
    text-align: left;
}

#temperature_chart_params .chart_time_zone {
    text-align: right;
}

#temperature_chart_params .chart_time_zone,
#temperature_chart_params .temp_units {
    margin: 0px;
    /*padding-bottom: 0;*/
}

.consump_ch .chart_time_zone,
.consump_ch .chart_units {
    padding: 38px 20px 0px 0px;
}

.device_SHEM-emeter .chart_time_zone,
.device_SHEM-emeter .chart_units {
    padding: 0 20px 20px 0;
}

.device_SHEM-emeter .voltage_chart_wrapper .chart_time_zone {
    padding: 30px 20px 20px 0;
}

.humidity_chart_wrapper .chart_time_zone {
    margin-top: 0;
}

.chart_units {
    text-align: left;
    padding: 0 20px 10px 20px;
    margin-top: 0;
    margin-bottom: 0;
}

.chart_overlay,
.chart_partial_overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(102, 102, 102, 0.7);
    text-align: center;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

#set_schedule h2 span.icon_week {
    background-image: url(../img/calendar.png);
}

#date_trigger_scene h2 span.icon_week {
    background-image: url(../img/calendar.png);
}

#set_schedule h2 span.lang,
#scene_one_time_condition h2 span.lang {
    font-size: 17px;
}

#set_schedule input[type=time],
input.mobile_time[type=time] {
    background-color: transparent;
    color: #fff;
    border: none;
    min-width: 150px;
    max-width: 100%;
    height: 50px;
    font-size: 50px;
    text-align: center;
    display: inline;
    margin: 20px 0;
}

#set_schedule input[type=time]::-webkit-datetime-edit-ampm-field {
    display: none;
}

#set_schedule input[type=time]::-webkit-clear-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.condition_scene_when ul#condition li[data-category=deleted_device] div.icon,
#action_devices ul.wraper_conditions_do li[data-category=deleted_device] div.icon,
#devices ul.wraper_conditions_do li[data-category=deleted_device] div.icon {
    background-size: 50%;
}

div.icon.room_icon {
    display: inline-block;
    width: 75px;
    height: 65px;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
}

div.room_info h1.room_name {
    display: inline-block;
    float: left;
    width: 55%;
}

.room_info,
.relay_info,
.sensor_info,
.roller_info {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.scene_screen .room_info.scene_colapsed,
.relay_info.scene_colapsed,
.sensor_info.scene_colapsed,
.hold_off_info.scene_colapsed,
.roller_info.scene_colapsed {
    margin-bottom: 0;
    display: block;
    font-size: 18px;
    color: #fff;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 93.5% 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room_info.scene_colapsed {
    line-height: 45px;
}

div.relay_info,
div.sensor_info,
div.hold_off_info,
div.roller_info {
    background-color: #1E2223;
}

div.hold_off_info {
    background-color: #27516c;
}

div.hold_off_info,
.option_container div.hold_off_info h1,
#scene_options_delay div.relay_info,
.option_container #scene_options_delay h1 {
    background-color: #27516c;
}

div#scene_options_delay.options_scene_mode {
    margin-top: 20px;
}

div.relay_info h1,
div.sensor_info h1,
div.hold_off_info h1,
div.roller_info h1 {
    float: left;
    width: 70%;
    display: inline-block;
}

div.relay_info div.icon_is_on,
div.relay_info div.icon_bulb,
div.relay_info .icon_temp,
div.roller_info div.icon_is_on,
div.roller_info div.icon_roller,
div.relay_info div.icon_consumption,
div.hold_off_info div.icon_timer,
div.sensor_info .icon_temp,
div.sensor_info .icon_bat,
div.sensor_info .icon_illum,
div.sensor_info .icon_hum,
div.sensor_info .icon_motion,
div.sensor_info .icon_smoke,
div.sensor_info .icon_flood,
div.sensor_info .icon_door,
div.sensor_info .icon_tilt,
div.sensor_info .icon_vibration,
.icon_delay,
.icon_timer {
    float: left;
    width: 40px;
    height: 40px;
}

div.icon_roller {
    background-image: url(../img/curtain_icon_off.png);
    background-size: 70%;
}

div.icon_is_on {
    background-image: url(../img/power_on_off.png);
}

div.icon_bulb {
    background-image: url(../img/bulb_icon_small.png);
}

div.icon_consumption {
    background-image: url(../img/consumption_icon.png);
}

div.icon_bat {
    background-image: url(../img/0_battery_icon_charge_ver.png);
}

div.icon_temp {
    background-image: url(../img/temp_icon.png);
}

div.icon_illum {
    background-image: url(../img/lux_icon.png);
}

div.icon_hum {
    background-image: url(../img/humidity_icon.png);
}

div.icon_motion {
    background-image: url(../img/motion_icon.png);
}

div.icon_smoke {
    background-image: url(../img/fire_icon_white.png);
}

div.icon_flood {
    background-image: url(../img/flood_icon.png);
}

div.icon_door {
    background-image: url(../img/small_door.png);
}

div.icon_tilt {
    background-image: url(../img/tilt_icon.png);
}

div.icon_vibration {
    background-image: url(../img/vibration_icon.png);
}

div.icon_delay {
    background-image: url(../img/delay_icon.png);
}

div.icon_timer {
    background-image: url(../img/timer_small_cond.png);
}

div.icon_bat,
div.icon_temp,
div.icon_consumption,
div.icon_is_on,
div.icon_roller,
div.icon_bulb,
div.icon_illum,
div.icon_hum,
div.icon_motion,
div.icon_smoke,
div.icon_flood,
div.icon_door,
div.icon_delay,
div.icon_tilt,
div.icon_vibration,
.icon_timer {
    background-position: 50%;
    background-repeat: no-repeat;
}

div.icon_consumption,
div.icon_bat {
    background-size: 30%;
}

div.icon_temp,
div.icon_is_on,
div.icon_bulb,
div.icon_illum,
div.icon_hum,
div.icon_motion,
div.icon_smoke,
div.icon_flood,
div.icon_door,
div.icon_delay,
.icon_timer {
    background-size: 40%
}

.active_time_buttons_wrapper .store_back_btns button {
    margin-bottom: 10px;
}

.add_scene_page .scene_device ul li h2 {
    text-align: center;
}

.not_mobile_arrow_scene_active_time,
.not_mobile_arrows_wrap {
    display: inline-block;
    width: 120px;
    height: 40px
}

.not_mobile_arrow_scene_active_time .scene_contr_arrows,
.not_mobile_arrows_wrap .sched_contr_arrows {
    margin-left: 3px;
    margin-right: 3px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transition: background 0.2s;
    display: inline-block;
    position: relative;
}

div#start_active_time,
div#end_active_time,
div#set_scene_days,
div#set_scene_days_triggered,
div#set_triggered_time,
div#set_start_time {
    text-align: center;
}

div#start_active_time,
div#end_active_time,
div#set_triggered_time {
    text-align: center;
    margin-bottom: 20px;
}

div#start_active_time div.input_holder,
div#end_active_time div.input_holder,
div#set_triggered_time div.input_holder {
    margin-bottom: 0;
}

.not_mobile_arrow_scene_active_time .scene_contr_arrows span,
.not_mobile_arrows_wrap .sched_contr_arrows span {
    height: 40px;
    width: 40px;
    left: 0;
    position: absolute;
}

#set_days_schedule {
    box-sizing: border-box;
    height: 100px;
    width: 100%;
}

#set_schedule .scene_weekdays_settings,
#set_schedule .scene_weekdays_trigger {
    display: inline-block;
    position: relative;
    float: left;
    width: 14%;
    height: 53px;
    margin-top: 30px;
}

#set_schedule .scene_weekdays_settings *:hover,
#set_schedule .scene_weekdays_trigger *:hover {
    cursor: pointer;
}

#set_active_time.full_width_btn.time_btn {
    margin: 10px auto 20px auto;
}

#set_schedule .scene_weekdays_settings.first_day,
#set_schedule .scene_weekdays_trigger.first_day {
    margin-left: 1%;
}

#set_schedule .scene_weekdays_settings label,
#set_schedule .scene_weekdays_trigger label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    font-size: 20px;
}

#set_schedule .scene_weekdays_settings label.checked {
    color: rgb(19, 133, 196);
}

#set_schedule .scene_weekdays_settings input,
#set_schedule .scene_weekdays_trigger input {
    padding: 0px;
    margin: 0px;
    visibility: hidden;
    position: relative;
    top: 7px;
    right: 8px;
}

div.week_day_panel {
    text-align: center;
    margin-top: 10px;
}

div.week_day_panel span {
    color: #C0C0C0;
}

div.time_zone_display {
    color: #fff;
    width: 100%;
    text-align: center;
    font-size: 10px;
    margin: 10px 0;
    text-transform: none;
}

input.set_start_time,
input.set_temp_sched {
    background-color: transparent;
    border: none;
    height: 40px;
    display: inline-block;
    text-transform: none;
    font-size: 35px;
    color: #fff;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 40px;
}

input.set_start_time {
    max-width: 40px;
}

.sched_sun input.set_start_time {
    max-width: 45px;
}

#sched_base_temp {
    max-width: 60px;
}

.add_temp_schedule_time input.set_start_time {
    max-width: 35px;
}

.colon {
    font-size: 35px;
}

div.scene_weekdays_settings .fake_checkbox,
div.scene_weekdays_trigger .fake_checkbox {
    position: absolute;
    top: 30px;
    left: 40%;
    margin: 0;
    background: transparent;
}

@media screen and (max-width:450px) {
    div.scene_weekdays_settings .fake_checkbox,
    div.scene_weekdays_trigger .fake_checkbox {
        left: 25%;
    }
}

@media screen and (max-width:830px) {
    div.scene_weekdays_settings .fake_checkbox,
    div.scene_weekdays_trigger .fake_checkbox {
        left: 35%;
    }
}

div.scene_weekdays_settings label.checked+span.fake_checkbox,
div.scene_weekdays_trigger label.checked+span.fake_checkbox {
    background: url(../img/checkbox_bg.png) no-repeat 50%;
    background-size: contain;
}

.active_time_scene div.week_day_panel span.choosen_day {
    color: rgb(19, 133, 196);
}

#set_schedule input[type=number]::selection,
.add_temp_schedule_time input[type=number]::selection {
    color: rgb(19, 133, 196);
}

div#generic_condition div.generic_condition_container {
    border-bottom: 1px solid #696E71;
}

div.generic_condition_info {
    margin-bottom: 0;
    display: block;
    font-size: 18px;
    color: #fff;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 96.5% 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

div.generic_condition_info h1 {
    display: inline-block;
    float: left;
    width: 55%
}

div#generic_condition h1 {
    background-color: #262E30;
}

div.generic_condition_info.scene_colapsed {
    line-height: 45px;
}

div.generic_condition_info .icon {
    background-image: url(../img/gen_cond.png);
    display: inline-block;
    width: 75px;
    height: 65px;
    background-size: cover;
    background-repeat: no-repeat;
    float: left;
}

div#generic_condition ul {
    margin: 20px 5px;
}

div#generic_condition ul li {
    width: 100%;
    height: 65px;
    position: relative;
    cursor: pointer;
    border-bottom: 2px solid #2B3334;
    background: #454A4C;
}

div#generic_condition ul li.icon {
    width: 75px;
    height: 65px;
    position: relative;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.5) inset;
    position: absolute;
    top: 0;
    left: 0;
}

div#generic_condition ul li div {
    float: left;
}

div#generic_condition ul li .percent_holder {
    box-sizing: border-box;
    width: 100%;
    height: 65px;
    padding: 0 75px;
    cursor: pointer;
}

div#generic_condition ul li h2 {
    float: left;
    height: 65px;
    width: 100%;
    color: #fff;
    font-size: 16px;
    padding: 0 7px;
    box-sizing: border-box;
    position: relative;
    word-wrap: break-word;
    overflow: hidden;
}

div#generic_condition ul li h2 span {
    margin: auto;
    top: 0;
    bottom: 0;
    width: 90%;
    overflow: hidden;
    line-height: 65px;
    height: 20px;
}

#scene_timer_condition div.icon_timer,
#scene_one_time_condition div.icon_timer {
    background-image: url(../img/clock.png);
}

.generic_condition_container ul li.timer div.icon {
    background-image: url(../img/timer.png);
}

.generic_condition_container ul li.one-time div.icon {
    background-image: url(../img/one_time.png);
}

.generic_condition_container ul li.daily div.icon {
    background-image: url(../img/daily.png);
}

.generic_condition_container ul li.timer div.icon,
.generic_condition_container ul li.daily div.icon,
.generic_condition_container ul li.one-time div.icon {
    width: 75px;
    height: 65px;
    position: relative;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.5) inset;
    position: absolute;
    top: 0;
    left: 0;
}

.user_message {
    padding: 10px;
    margin: 10px 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.user_message span {
    font-size: 18px;
}

#set_scene_days_triggered .scene_weekdays_trigger label.checked {
    color: rgb(19, 133, 196);
}

#date_trigger_scene {
    margin-bottom: 20px;
}

#date_trigger_scene h2 span.lang {
    display: block;
    margin-top: 10px;
}

#set_start_time .input_holder {
    margin: 0;
}

#set_triggered_data .user_message {
    text-align: center;
    color: white;
}


/* new features popup */

.normalcase {
    text-transform: none;
}

#new_features_content .slider_holder {
    margin-top: 0;
    width: 100%;
}

#new_features_slider {
    min-width: 200%;
}

#new_features_slider li {
    float: left;
}

#new_features_content .slider_holder a.custom_lSPrev,
#new_features_content .slider_holder a.custom_lSNext {
    background-color: rgba(0, 0, 0, 0.4);
    background-size: 80%;
    width: 40px;
    height: 40px;
    left: -10px;
}

#new_features_content .slider_holder a.custom_lSNext {
    right: -10px;
    left: initial;
}

.popup_front .full_width_btn {
    margin: 20px auto 0;
}

#new_features_content h2 {
    padding-bottom: 5px;
    font-size: 18px;
    color: #2886c7;
}

#new_features_content .input_holder {
    max-height: 140px;
    overflow: hidden;
}

#new_features_content .image_holder {
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
}

#new_features_content img {
    z-index: -1;
    position: relative;
    max-width: 100%;
    display: block;
}

#fw_update_popup .popup_title {
    padding-left: 40px;
}

#fw_update_popup .popup_title .update_icon {
    display: block;
    top: 7px;
    left: 7px;
}

.stop-scrolling {
    position: fixed;
    overflow: hidden;
    width: 100%;
}


/*-----------add nb device-------------------*/

#add_nb_device_page #scan_qr_preview,
#preview_PLG1NB .add_nb_2_preview,
#preview_SMK1NB .add_nb_2_preview,
#preview_DS1NB .add_nb_2_preview,
#preview_MS1NB .add_nb_2_preview,
#preview_HT1NB .add_nb_2_preview,
#preview_WS1NB .add_nb_2_preview {
    width: 100%;
    height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-bottom: 20px;
}

#add_nb_device_page #scan_qr_preview {
    background-image: url('../img/qr_scan.png');
}

.preview_PLG1NB .add_nb_2_preview {
    background-image: url(../img/plug_outline.png);
}

.preview_SMK1NB .add_nb_2_preview {
    background-image: url(../img/smoke_outline_500x313.png);
}

#preview_DS1NB .add_nb_2_preview {
    background-image: url(../img/door_outline.png);
}

#preview_MS1NB .add_nb_2_preview {
    background-image: url(../img/motion_outline.png);
}

#preview_HT1NB .add_nb_2_preview {
    background-image: url(../img/ht-outlines.png);
}

#preview_WS1NB .add_nb_2_preview {
    background-image: url(../img/SH_water_outline.png);
}

#scan_qr_help_text .text,
.add_nb_2_text .text {
    color: #fff;
    text-transform: none;
}

#preview_PLG1NB,
#preview_SMK1NB,
#preview_DS1NB,
#preview_MS1NB,
#preview_HT1NB,
#preview_WS1NB {
    display: none;
}

#add_nb_device_page_2.preview_PLG1NB #preview_PLG1NB,
#add_nb_device_page_2.preview_SMK1NB #preview_SMK1NB,
#add_nb_device_page_2.preview_DS1NB #preview_DS1NB,
#add_nb_device_page_2.preview_MS1NB #preview_MS1NB,
#add_nb_device_page_2.preview_HT1NB #preview_HT1NB,
#add_nb_device_page_2.preview_WS1NB #preview_WS1NB {
    display: block;
}


/* --------- device page redisign ---------- */

#info_and_controls div#controls {
    background-color: #43484B;
}

#device_page .col-2 {
    text-align: center;
    box-sizing: border-box;
    /* padding: 0.4em 0.5em 0 0.5em; */
    
}

/* @media screen and (max-width:700px) {
    #device_page .col-2 {
        padding-top: 10px;
    }
} */

@media screen and (min-width:700px) {
    #device_page .col-2 {
        margin: 10px 0;
    }
}

#device_page .col-2 .device_settings {
    display: inline-block;
    float: left;
    position: relative;
    height: 31.5vw;
    background-color: #43484B;
    box-sizing: border-box;
    text-align: center;
    border: 0.1em solid #272E30;
}

/* ----------- device_settings media quaries ------------ */

@media screen and (min-width:700px) {
    #device_page .col-2 .device_settings {
        height: 15.75vw;
    }
}

@media screen and (min-width:900px) {
    #device_page .col-2 .device_settings {
        height: 16vw;
    }
}

@media screen and (max-width:960px) {
    #device_page .col-2 .device_settings {
        width: 33.33%;
    }
    #device_page .col-2 .device_settings span.setting_title {
        font-size: 14px;
    }
}

@media screen and (min-width:960px) {
    #device_page .col-2 .device_settings {
        width: 16.66%;
        height: 8.1vw;
    }
    #device_page .col-2 .device_settings span.setting_title {
        font-size: 10px;
    }
}

@media screen and (min-width:1200px),
(max-width:375px) {
    #device_page .col-2 .device_settings span.setting_title {
        font-size: 12px;
    }
}

@media screen and (min-width:1400px) {
    #device_page .col-2 .device_settings span.setting_title {
        font-size: 14px;
    }
}

@media screen and (min-width:1500px) {
    #device_page .col-2 .device_settings {
        height: 7.6vw;
    }
}

@media screen and (min-width:1600px) {
    #device_page .col-2 .device_settings {
        height: 7.4vw;
    }
}

@media screen and (min-width:1600px) {
    #device_page .col-2 .device_settings {
        height: 7.2vw;
    }
}

@media screen and (min-width:1700px) {
    #device_page .col-2 .device_settings {
        height: 6.8vw;
    }
}

@media screen and (min-width:1800px) {
    #device_page .col-2 .device_settings {
        height: 6.5vw;
    }
}

/* @media screen and (max-width:900px) {
    #device_page .col-2 .device_settings {
        width: 33.33%;
        height: 16vw;
    }
    #device_page .col-2 .device_settings span.setting_title {
        font-size: 12px;
    }
    #device_page .col-2 .device_settings img.icon_dev {
        height: 50%;
    }
}

@media screen and (min-width:900px) {
    #device_page .col-2 .device_settings {
        width: 16.66%;
        height: 8.1vw;
    }
    #device_page .col-2 .device_settings span.setting_title {
        font-size: 10px;
    }
    #device_page .col-2 .device_settings img.icon_dev {
        height: 33%;
    }
} */

/* ----------- device_settings media quaries END------------ */

#device_page .col-2 .device_settings.is_enable .icon_dev {
    opacity: 0.7;
}

#device_page .col-2 .device_settings.is_enable.on {
    opacity: 1;
}

#device_page .device_settings.is_enable.on .icon_dev {
    opacity: 1;
}

#device_page .col-2 .device_settings img.icon_dev {
    display: inline-block;
    padding-top: 15%;
    height: 50%;
}

#device_page .col-2 .device_settings.disabled {
    opacity: 0.5;
}

#device_page .col-2 .device_settings span.setting_title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-transform: capitalize;
    width: 90%;
    height: 25%;
    margin: auto;
}

#device_page .col-2 .device_actions {
    display: none;
    width: 100%;
}

#device_page .col-2 .device_actions.settings_loaded {
    display: inline-block;
}

#device_page .col-2 .device_actions div {
    cursor: pointer;
}

#device_page .col-2 .device_actions .device_status {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    width: 6%;
    position: absolute;
    height: 6%;
    top: 6%;
    right: 6%;
    display: inline-block;
}

#device_page .col-2 .device_actions .device_bulk_status {
    width: 12%;
    background-image: url(../img/update.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    height: 13%;
    top: 6%;
    right: 6%;
    display: none;
}

#device_page .col-2 .device_actions .device_status.blue_color {
    border: 1px solid #3dcdff;
    background-color: #3dcdff;
}

#device_page #info_and_controls {
    margin: 10px;
}

#device_set_wrapper div.icon_headline_holder {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

#device_set_wrapper div.icon_headline_holder .icon_dev_set,
#device_set_wrapper div.icon_headline_holder .iac_info {
    float: left;
}

#device_set_wrapper div.icon_headline_holder .icon_dev_set {
    width: 20%;
    height: 60px;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: 50%;
}

#device_set_wrapper div.icon_headline_holder .icon_dev_set.no_image_true {
    background-size: 30%;
}

#device_set_wrapper div.icon_headline_holder .iac_info {
    width: 80%;
    height: 60px;
    background-color: #43484B
}

#device_set_wrapper div.icon_headline_holder .iac_info h2.dev_name {
    float: left;
    width: 80%;
    background-color: transparent;
    line-height: 40px;
    text-align: center;
    margin: 0;
}

#device_set_wrapper div.icon_headline_holder .iac_info h2.dev_name span {
    text-transform: capitalize;
}

#device_set_wrapper div.icon_headline_holder .iac_info .settings_icon {
    height: 60px;
    background-repeat: no-repeat;
    float: right;
    width: 20%;
    background-position: 50%;
}

#timer_template #auto_settings {
    margin-top: 20px;
}

#timer_template div.icon_headline_holder .iac_info .settings_icon {
    background-image: url(../img/timer_small.png);
}

#weekly_ss_template div.icon_headline_holder .iac_info .settings_icon {
    background-image: url(../img/calendar_small.png);
}

#night_mode_template div.icon_headline_holder .iac_info .settings_icon {
    background-image: url(../img/night_mode_small.png);
}

.settings_holder .settings_icon {
    /* background-image: url(../img/timer_big.png); */
    background-image: url(../img/general_big.png);
}
.actions_holder .settings_icon {
    background-image: url(../img/actions_big.png);
}

#internet_security_template .settings_icon {
    background-image: url(../img/internet_small.png);
}

#night_mode_template .settings_icon {
    background-image: url(../img/night_mode_small.png);
}

#weekly_ss_template .settings_icon {
    background-image: url(../img/calendar_small.png);
}

#sunr_suns .settings_icon {
    background-image: url(../img/sunrise_small.png);
}

#sensor_settings_template .settings_icon {
    background-image: url(../img/sensor_settings_small.png);
}

#sensor_alarms_set .settings_icon {
    background-image: url(../img/sensor_alarms_small.png);
}

#sunr_suns div.icon_headline_holder .iac_info .settings_icon {
    background-image: url(../img/sunrise_small.png);
}

#internet_set .settings_icon {
    background-image: url(../img/internet_small.png);
}

#safety_set .settings_icon {
    background-image: url(../img/safety_small.png);
}

#info_device .settings_icon {
    background-image: url(../img/info_small.png);
}

#timer_template .roller_default_settings .settings_icon,
#timer_template .working_time .settings_icon {
    background-image: url(../img/timer_big.png);
}

#device_page .settings_layout,
#group_page .settings_layout {
    width: 90%;
    margin: auto;
    border-top: 1px solid #63686a;
}

#device_page .settings_layout.locked,
#group_page .settings_layout.locked {
    pointer-events: none;
    position: relative;
}

#device_page .settings_layout.locked:after {
    width: 40px;
    right: 2px;
    top: -1px;
    left: auto;
}


#scenes_page .settings_layout div.settings_icon,
#device_page .settings_layout div.settings_icon,
#group_page .settings_layout div.settings_icon,
#temp_selector div.settings_icon,
#brightness_selector .settings_icon {
    /* width: 10%; */
    float: left;
    background-repeat: no-repeat;
    height: 45px;
    background-size: 25px;
    background-position: 50%;
    box-sizing: border-box;
}

#scenes_page .settings_layout h2,
#device_page .settings_layout h2,
#group_page .settings_layout h2 {
    width: 100%;
    line-height: 25px;
    color: #fff;

}

.range_wrapper h2,
#temp_selector h2,
.range_wrapper h2 {
    width: 90% !important;
    float: left;
}

#scenes_page .settings_layout div.range_value_holder,
#device_page .settings_layout div.range_value_holder,
.range_wrapper div.range_value_holder,
#temp_selector div.range_value_holder,
#group_page .settings_layout div.range_value_holder {
    float: left;
    width: 10%;
    line-height: 25px;
    color: #fff;
    padding: 10px 0px;
    display: flex;
    justify-content: flex-end;
}

#add_scene #brightness_selector h2 {
    width: 90%;
}

@media (max-width:375px) and (min-width: 768px),
(max-width: 900px) {
    #scenes_page .settings_layout h2,
    #device_page .settings_layout h2 {
        padding: 10px 40px 10px 7px;
    }
}

#back_set_btn {
    background: url(../img/back_icon.png) no-repeat;
    width: 60px;
    height: 60px;
    background-size: 39px;
    background-position: 90% 50%;
    background-repeat: no-repeat;
    position: absolute;
    margin: auto;
    right: 8px;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

#device_set_wrapper .input_holder {
    text-align: initial;
    padding: 5px 30px;
    /* margin-top: 20px; */
}

#device_set_wrapper .input_holder.separate_reverse {
    border-top: 1px solid #63686a;
    /*margin-bottom: 0;*/
    padding-top: 20px;
    margin-top: 10px;
}

#device_set_wrapper .input_holder.sub_input {
    margin-left: 20px;
    padding-top: 0;
    margin-top: -10px;
}

#device_set_wrapper .input_holder label[for="roller_maxtime_close"] {
    margin-top: 20px;
}

#device_set_wrapper #sched_add_popup_back .input_holder,
#device_set_wrapper #night_mode_popup_back .input_holder {
    padding: 0 20px;
}

#device_set_wrapper #sched_add_popup_back h1,
#device_set_wrapper #night_mode_popup_back h1 {
    text-align: left;
}

#device_set_wrapper #sched_add_popup_back #set_schedule_base {
    width: 235px;
}

div#device_set_wrapper div.dev_temp div.settings_holder div.opened {
    margin: auto;
    width: 95%;
}

#default_settings.type_edge label[for=def_switch] .text,
#type_settings.def_switch label[for=edge] .text,
.disabled_types .text {
    pointer-events: none;
    color: #63686a !important;
}

#device_set_wrapper .input_holder.dimmer_swap_inp_holder label {
    border-top: 1px solid #63686a;
    padding-top: 20px;
}

@media (max-width:700px) {
    #remote_tv_core,
    #remote_core {
        border-bottom: 2px solid #2886c7;
        overflow: hidden;
        padding-bottom: 10px;
    }
}

.device_stats.mobile_resolution table {
    display: none;
}

.device_stats.mobile_resolution .refinement_buttons_holder,
.device_stats.mobile_resolution .chart_time_zone,
.device_stats.mobile_resolution span.total.big_resolution,
.device_stats.mobile_resolution div.wrapper_total_cons {
    display: none;
}

.device_stats.mobile_resolution #consumption_chart {
    height: 100px;
    background: linear-gradient(0deg, #333, #4D4D4D);
}

.device_stats.mobile_resolution #em_consumption_chart {
    background: linear-gradient(0deg, #333, #4D4D4D);
}

.device_stats.mobile_resolution .consumption_chart_wrapper {
    padding-top: 0;
}

.device_stats.mobile_resolution .text_chart_units,
.device_stats.mobile_resolution span.blue-col {
    position: absolute;
    top: 30px;
    font-size: 9px;
}

.device_stats.mobile_resolution .text_chart_units {
    left: 23%;
    color: #fff;
}

.device_stats.mobile_resolution span.blue-col {
    right: 19%;
    color: rgb(61, 205, 255);
}

.device_stats.mobile_resolution img.down_arrow {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 3;
    width: 16px;
    height: 10px;
}

.device_stats.mobile_resolution .consumption_chart_wrapper {
    border-bottom: 2px solid rgb(61, 205, 255);
}

.device_stats.mobile_resolution div.layerup {
    width: 100%;
    height: 51px;
    position: absolute;
    bottom: 0;
    z-index: 2;
}

.device_stats.big_resolution div.wrapper_total_cons {
    float: left;
    display: inline-block;
    color: #fff;
    width: 100%;
    text-align: right;
    box-sizing: border-box;
}

.device_stats.big_resolution .consumption {
    display: none;
}

#info_device button {
    width: 100%;
}

#info_device button.edit_btn {
    width: 90%;
}

.wrapper_total_cons_w {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    height: 50px;
    width: 100%;
    left: 0;
    padding-top: 7px;
}

.wrapper_total_cons div,
.wrapper_total_cons_w div {
    width: 50%;
    float: left;
    display: inline-block;
}

.wrapper_total_cons div span,
.wrapper_total_cons_w div span.total {
    float: left;
    display: inline-block;
    color: #fff;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-size: 20px;
}

.device_stats.big_resolution .wrapper_total_cons div span.con_text,
.device_stats .wrapper_total_cons_w div span.con_text {
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-size: 20px;
}

.device_stats .wrapper_total_cons_w div span.con_text.mobile_resolution {
    font-size: 20px;
}

.device_stats.big_resolution .wrapper_total_cons div span.blue-color,
.device_stats.big_resolution .wrapper_total_cons div span.total_text {
    font-size: 12px;
    font-weight: bold;
}

.device_stats .wrapper_total_cons_w div span.blue-color,
.device_stats .wrapper_total_cons_w div span.total_text {
    font-size: 10px;
    color: #fff;
}

.device_stats.big_resolution .wrapper_total_cons div span.blue-color,
.device_stats .wrapper_total_cons_w div span.blue-color {
    color: #3dcdff;
    font-weight: bold;
}

.device_stats.big_resolution .wrapper_total_cons div span.total,
.device_stats.big_resolution .wrapper_total_cons div span.rev_total,
.device_stats_w .wrapper_total_cons div span.total {
    text-align: center;
    text-transform: none;
}

.device_SHEM-emeter .device_stats .wrapper_total_cons div span.rev_total,
.device_SHEM-emeter .device_stats .wrapper_total_cons div span.total {
    text-transform: none;
}

div#device_set_wrapper div.dev_temp h2.dev_name.loading_state:after {
    background-size: 100%;
    top: 0;
    bottom: 0;
    right: 12.5px;
    height: 40px;
    width: 40px;
}

div#device_set_wrapper div.dev_temp .hollow_bg {
    margin-top: 10px;
}

div#device_set_wrapper div.dev_temp .hollow_bg.dark {
    margin-bottom: 20px;
}

div.dev_temp {
    display: none;
}

.no_cloud_message.mobile {
    background-color: #333333;
    padding-top: 10px;
}

.cloud_disabled:not(li) {
    padding: 10px;
    text-align: left;
}

.cloud_disabled {
    display: none;
}

/* .device_stats.big_resolution .chart_overlay { */
    /* top: 106px; */
/* } */

.device_stats.big_resolution .chart_overlay.custom_dates,
#sensor_chart_stats .chart_overlay.custom_dates {
    top: 169px;
}

#acc_cons_panel.device_stats.big_resolution .chart_overlay {
    top: 62PX;
    left: 0;
}

#acc_cons_panel.device_stats.big_resolution .chart_partial_overlay {
    top: 0;
    height: 286PX;
    left: 0;
}

/* .device_stats.mobile_resolution .chart_overlay {
    top: 59px;
} */

.device_stats.cons_panel span.total {
    position: absolute;
    top: 7px;
    right: 0;
    z-index: 1;
    text-align: right;
    color: #fff;
    font-family: Roboto;
    text-transform: none;
    padding-right: 10px;
    font-size: 17px;
    font-weight: bold
}

#delay_action_wrapper h3 {
    color: #ffffff;
    text-align: center;
}

.delay_form_fields_holder {
    float: left;
}

.delay_form_fields_holder.large {
    width: 60%;
    margin-right: 3%;
}

.delay_form_fields_holder.small {
    width: 37%;
}

.delay_form_fields_holder.small select {
    padding-left: 10px;
}

.delay_form_fields_holder.small select option {
    color: #000;
    text-transform: none;
}

.delay_form_fields_holder.small select:focus {
    outline: none;
}

#header {
    height: 58px;
    border-bottom: 1px solid white;
    background-color: #272C2F;
    position: relative;
}

#main_back_button,
#back_set_btn {
    float: left;
    width: 20%;
    background-image: url('../img/back_button.png');
    background-size: initial;
    position: absolute;
    margin: auto;
    background-position: 50%;
    background-repeat: no-repeat;
}

#to_home {
    background-image: url('../img/logo_cloud_green.png');
    height: 60px;
    width: 107px;
    margin: auto;
    display: block;
}

.offline #to_home {
    background-image: url('../img/logo_cloud_red.png');
}

#list_menu {
    position: absolute;
    margin: auto;
    background-image: url('../img/settings.png');
    background-repeat: no-repeat;
    background-position: 50%;
    right: 0;
    top: 0;
}

#bell {
    position: absolute;
    background-image: url('../img/bell.png');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 40%;
    right: 0;
    top: 0;
    z-index: 1;
    width: 50px;
    height: 100%;
    cursor: pointer;
    background-size: 38%;
}

#bell.has_new::after {
    content: '';
    width: 7.7px;
    height: 7.7px;
    border-radius: 10px;
    background-color: #ff3b30;
    position: absolute;
    top: 17px;
    z-index: 2;
    right: 10px;
    border: 2px solid #272C2F;
}

body.event_log #bell {
    display: none;
    pointer-events: none;
}

.group_relay #bell,
.group_light #bell,
.group_roller #bell,
.dashboard #bell,
.room #bell,
.alarms #bell,
.temp_schedules #bell,
#bell.move_left {
    display: block;
    right: 58px;
}

.login #bell,
.choose_lang #bell,
.shared #bell,
.shared_devices #bell {
    display: none;
}

#choose_lang {
    height: 100%;
}

@media screen and (min-width: 1223px) {
    .dashboard #bell,
    .alarms #bell,
    .temp_schedules #bell,
    .devices_disc_room #bell,
    .room #bell {
        right: 0;
    }
    #bell.move_left {
        right: 58px;
    }
}

#list_menu.done_btn {
    background-image: url(../img/check_icon.png);
    background-size: 60%;
}

#main_back_button,
#list_menu,
#back_set_btn {
    width: 50px;
    cursor: pointer;
    height: 100%;
}

#main_back_button #img_back_btn,
#list_menu #list_menu_img,
#to_home,
#back_set_btn {
    background-position: 50%;
    background-repeat: no-repeat;
}

#to_home {
    background-size: contain;
}


/* --------------- dashboard header status ----------------------- */

#status_wraper {
    background-color: #383D40;
    width: 100%;
    display: flex;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

#status_wraper div {
    padding: 0 5px;
    margin: auto;
    height: 40px;
    box-sizing: border-box;
}

#status_wraper div.dash_info_status {
    display: inline-block;
    width: 47%;
    float: left;
    box-sizing: border-box;
}

#status_wraper div.dash_info_status .info_icons {
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    width: 30%;
    margin: 13px 0;
    height: 13px;
    float: left;
}

#status_wraper div.dash_info_status .info_icons#weather_icon {
    background-image: url('../img/weather_icon.png');
}

#status_wraper div.dash_info_status .info_icons#consumption_icon {
    background-image: url('../img/consumption_icon_tmp.png');
}

#status_wraper div.dash_info_status .info_icons#shield_icon {
    background-image: url('../img/shield.png');
}

#status_wraper div.dash_info_status .info_icons.part_armed#shield_icon {
    background-image: url('../img/shield_half.png');
}

#status_wraper div.dash_info_status .info_icons.not_armed#shield_icon,
body.offline #status_wraper div.dash_info_status .info_icons#shield_icon {
    background-image: url('../img/shield_empty.png');
}

#status_wraper div.dash_info_status .info_icons.triggered#shield_icon {
    background-image: url('../img/motion_icon_red.png');
    animation: move_blinker 1s linear infinite;
}

#status_wraper div#is_armed #armed_text.red_alert {
    color: #CF1801;
}

#is_armed,
#consumation_info {
    cursor: pointer;
}

#status_wraper div.dash_info_status .info_icons#time_icon {
    background-image: url('../img/time_icon.png');
}

#status_wraper div.dash_info_status div {
    display: inline-block;
    width: 70%;
    color: #fff;
    float: left;
    box-sizing: border-box;
}

#status_wraper div.dash_info_status div:last-child {
    padding: 10px 5px;
    line-height: 20px;
    font-size: 12px;
}

@media screen and (min-width: 700px) {
    #status_wraper div.dash_info_status div:last-child {
        font-size: 17px;
        padding: 11px 5px;
    }
    #status_wraper div.dash_info_status .info_icons {
        height: 17px;
        margin: 12px 0;
    }
}

#list_menu.opacity {
    opacity: 1;
    display: none;
}

#list_menu {
    opacity: 0;
    transition: visability 1s, opacity 0.5s linear;
}

.group_relay #list_menu,
.group_light #list_menu,
.group_roller #list_menu,
.dashboard #list_menu,
.room #list_menu,
/* .shared_devices #list_menu, */
.temp_schedules #list_menu,
.alarms #list_menu {
    right: 8px;
    visibility: visible;
    opacity: 1;
    display: block;
}

.login #header {
    display: none;
}

.for_empty_scene {
    padding-top: 50px;
}

.for_empty_screen,
.for_empty_room,
.for_empty_scene,
.for_empty_group,
.for_empty_alarm {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4) inset;
}

.dynamic_overlay {
    position: absolute;
    z-index: 101;
    background-color: #000;
}

.dynamic_overlay .preloader_inner {
    background-image: url(../img/loading_anim.png);
    width: 113px;
    height: 113px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -63px 0px 0px -56px;
    -webkit-animation: spin 2s linear infinite;
}

.dynamic_overlay span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-transform: none;
    text-align: center;
    display: block;
    width: 100%;
    position: relative;
    top: 50%;
    left: 0;
    margin-top: -7px;
}

body.devices_disc_room #list_menu {
    display: none;
}

#action .light_preview_action {
    display: none;
    width: 35px;
    height: 16px;
    margin: 3px 0px 0px 5px;
    float: left;
    border-radius: 5px;
}

#action .light_preview_action.color_is_selected {
    display: inline-block;
}



#pending {
    margin: 0 10px 10px 10px;
}

#pending #pending_cmds,
#pending #pending_cmds_failed {
    color: #fff;
    background-image: url(../img/warrning_icon.png);
    background-repeat: no-repeat;
    background-position: 20px 50%;
    background-size: 40px;
    min-height: 38px;
    padding: 8px 10px 6px 80px;
    text-transform: none;
}

#pending #pending_cmds span,
#pending #pending_cmds_failed span {
    text-transform: none;
}

#warnings {
    margin: 0 10px 10px 10px;
}

#warnings .warning_message {
    color: #fff;
    text-transform: none;
    vertical-align: middle;
    text-align: left;
    display: flex;
    width: 100%;
    min-height: 60px;
    background-image: url(../img/warrning_icon.png);
    background-repeat: no-repeat;
    background-position: 20px 50%;
    background-size: 40px;
    padding: 8px 10px 6px 80px;
    text-transform: none;
    align-items: center;
    box-sizing: border-box;
}

#warnings .warning_message.red{
    background-image: url(../img/warning_message_icon_red.png);
    background-position: 15px 50%;
    background-size: 50px;
}

.mobile #warnings .warning_message {
    padding-right: 10px;
}

#warnings .warning_icon {
    /* width: 40px;
    background-image: url(../img/warning_message_icon.png);
    background-repeat: no-repeat;
    background-position-y: 4px;
    background-position-x: -2px;
    background-size: 43px;
    min-height: 48px;
    margin: 10px 20px;
    float: left;
    display: table-cell; */
}

#warnings .warning_icon.red {
    background-image: url(../img/warning_message_icon_red.png);
}

#warnings .hollow_bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

/* .mobile #warnings .hollow_bg {
    margin: 16px 10px 16px 10px;
} */

#warnings .hollow_bg.dragging {
    opacity: .3;
}

#warnings .hollow_bg .swipe_info {
    display: none;
}

.mobile #warnings .hollow_bg .swipe_info {
    color: #1385c4;
    font-size: 12px;
    text-transform: none;
    display: block;
    width: 100%;
    position: absolute;
    bottom: 2px;
    right: 4px;
    text-align: right;
}

#warnings .close_warning {
    position: absolute;
    width: 10px;
    height: 10px;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    text-transform: none;
    font-weight: bold;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

.mobile #warnings .close_warning {
    display: none;
}

.hidden_overflow {
    height: 100%;
    overflow: hidden;
}

.prepare_loader,
#device_preparing_progress {
    position: absolute;
    height: 100%;
    width: 0%;
    background-color: #27516c;
}

#device_percentage_holder {
    width: 100%;
    position: relative;
}

#device_percentage_loader {
    position: relative;
    display: table;
    margin: 0 auto;
    width: 200px;
    height: 30px;
    border: 1px gray solid;
    border-radius: 3px;
}

#device_preparing_status {
    display: block;
    font-size: 15px;
    color: #fff;
    text-align: center;
    height: 18px;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.margin-top-20 {
    margin-top: 20px;
}

.hollow_bg.roller_position_holder {
    position: static;
    float: left;
    width: 80%;
    margin-bottom: 0;
}

.percents_display {
    color: #fff;
    float: left;
    padding-left: 20px;
    line-height: 40px;
    font-size: 16px;
}

.max-width-100 {
    max-width: 100%;
}

#alarms.empty_alarm #alarms_controll_tab {
    display: none;
}

#alarms_inner_page div.equalize_columns {
    max-width: 1143px;
}

#alarms_inner_page .section_holder {
    width: 100%;
    display: block;
}


/* Temperature schedules */

#choose_temp_schedule_type ul li.lslide[data-type="cool"] {
    background-image: url('../img/cooling.png');
}

#choose_temp_schedule_type ul li.lslide[data-type="heat"] {
    background-image: url('../img/heating.png');
}

#choose_temp_schedule_device_type li.temp_meter_ac {
    background-image: url('../img/ac.png');
}

#choose_temp_schedule_device_type li.temp_meter_relay {
    background-image: url('../img/relay_icon.png');
}

.temp_schedule_device_list .mw_620 {
    padding: 0;
}

#sched_add_popup .opened,
#night_mode_popup .opened,
#night_mode_popup .opened .input_holder,
#sched_use_popup .opened,
#device_set_wrapper #sched_add_popup .opened .input_holder {
    text-align: center;
}

#device_set_wrapper #sched_add_popup .opened .input_holder,
#night_mode_popup .opened .input_holder {
    margin-top: 0px;
}

#add_new_temp_schedule .mw_360 {
    padding-bottom: 20px;
}

#sched_add_popup .opened .input_holder,
#night_mode_popup .opened .input_holder,
h1.page_title.choose_sched_device_title {
    margin-bottom: 0;
}

#sched_add_popup .sched_weekdays_settings span,
#sched_add_popup .sched_weekdays_settings label {
    cursor: pointer;
}

#sched_add_popup .temp_units {
    float: left;
    font-size: 35px;
    font-family: Roboto_light;
    margin-top: 46px;
}

.time_config h3 {
    float: left;
    width: 100%;
    text-align: center;
}

.sched_time_wrap {
    display: inline-block;
}

.sched_time_wrap .text,
.sched_time_wrap .controls {
    float: left
}

.sched_time_wrap .controls .not_mobile_arrow_scene_active_time {
    width: 46px;
}

.sched_time_wrap .controls .input_holder {
    padding: 0;
}

.sched_time_wrap .controls .input_holder input {
    text-align: center;
}

.sched_time_wrap .text {
    margin-top: 25%;
}

.sched_time_text {
    color: #fff;
    padding: 20px;
    float: left;
}

button#add_temp_schedule {
    margin-top: 20px;
}

.sched_previews {
    float: left;
    width: 100%;
}

.overlap {
    color: #FF3B30 !important;
}

.sched_notification {
    display: inline-block;
    background-color: #fff;
    height: 60px;
    color: #000;
    font-size: 16px;
    padding: 5px;
}

.sched_time_wrapper {
    float: left;
    width: 50%;
    padding: 20px 0px;
}

@media screen and (max-width: 354px) {
    .sched_time_wrapper {
        width: 100%;
    }
}

.base_sched_temp.condition_scene_when {
    position: static;
    float: left;
    margin-bottom: 20px;
}

#add_new_temp_schedule #advanced_sched_holder .sched_days {
    width: 100%;
    max-width: 300px;
    float: left;
    padding-bottom: 12px;
}

.temp_schedules .room_devices_list li .control_icon {
    position: relative;
    float: left;
    display: inline-block;
    min-width: 65px;
    width: 10%;
    margin-top: 34px;
    cursor: pointer;
}

.temp_schedules .room_devices_list li .control_icon.active {
    background-image: url(../img/big_on_icon.png);
}

.temp_sched_config_item {
    float: left;
    display: inline-block;
    width: 90%;
    max-width: calc(100% - 65px);
}

.temp_schedules #temp_schedules_page>h1 {
    margin-bottom: 20px;
}

.temp_schedules #advanced_sched_holder .right_holder,
#add_new_temp_schedule #advanced_sched_holder .right_holder {
    position: static;
    float: right;
    width: auto;
}

.temp_schedules #room_list_holder {
    position: relative;
}

.temp_schedules .edit_btns {
    height: 176px;
    width: 80px;
}

.temp_schedules .edit_btns button {
    height: 87px;
    width: 80px;
}

.temp_schedules .edit_btns button.edit_btn {
    margin-top: 2px;
}

.temp_schedules .edit_btns button.delete_btn {
    margin-top: 1px;
}

#add_new_temp_schedule #advanced_sched_holder .sched_buttons_holder .right_holder {
    position: static;
    margin: 10px 0px 0px 0px;
}

#add_new_temp_schedule #advanced_sched_holder .left_holder .sched_val,
#add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time,
#add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time_end {
    color: #fff;
    float: left;
    display: inline;
    position: static;
    margin-top: 6px;
    margin-left: 5px;
    line-height: 1;
}

#add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time_end {
    margin-left: 10px;
    margin-right: 0px;
}

#add_new_temp_schedule #advanced_sched_holder .left_holder .top {
    margin-top: 10px;
    float: left;
}

#add_new_temp_schedule #advanced_sched_holder .left_holder .dash,
.add_temp_schedule_time #sched_configs .left_holder .dash {
    float: left;
    color: #fff;
    font-size: 30px;
    margin-top: 2px;
}

#add_new_temp_schedule #advanced_sched_holder .left_holder .sched_val {
    margin-top: 9px;
    font-size: 25px;
    margin-left: 20px;
}

#add_new_temp_schedule #advanced_sched_holder .item {
    margin-bottom: 20px;
}

.sched_devices_preview .condition_scene_do,
.sched_devices_preview .condition_scene_when,
.base_sched_temp.condition_scene_when {
    border: none;
}

.temp_schedules .page_holder>h1 {
    text-align: center;
    background-color: #272C2F;
    border-bottom: 2px solid #fff;
    padding: 20px 15px;
}

.temp_schedules .button_holder {
    float: left;
    width: 100%;
    margin: 20px 0px;
}

.temp_schedules .room_list_container>h1 {
    background-image: none;
    background-size: 100%;
    background-position: 93.5% 50%;
    text-align: center;
    position: relative;
    height: 65px;
}

.temp_schedules .room_list_container>h1 span {
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
    z-index: 2;
    width: 100%;
    text-align: center;
    display: block;
}

.temp_schedules .room_list_container>h1:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
}

.sched_devices_preview .condition_scene_when h2,
.sched_devices_preview .condition_scene_do h2,
.base_sched_temp h2 {
    width: auto;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
}

.temp_schedules .highcharts-point {
    width: 1px;
}

.temp_schedules ul.room_devices_list>li {
    float: left;
    width: 100%;
    display: block;
}

.temp_schedules ul.room_devices_list>li {
    background-color: #43484B;
}

.temp_schedules ul.room_devices_list>li.cool h2 {
    background-image: url('../img/cooling_icon.png');
}

.temp_schedules ul.room_devices_list>li.heat h2 {
    background-image: url('../img/heating_icon.png');
}

.temp_schedules ul.room_devices_list>li h2 {
    width: 100%;
    height: 48px;
    padding: 15px 70px 0px 86px;
    background-color: #000000;
    background-position: 30px 10px;
    background-size: 28px 28px;
    background-repeat: no-repeat;
    border-top: 2px solid #2886c7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.temp_schedules.mobile ul.room_devices_list>li h2 {
    padding-left: 48px;
    background-position: 10px 10px;
}

.add_temp_schedule_time .fake_checkbox,
.add_temp_schedule .fake_checkbox {
    width: 40px;
    height: 40px;
}

.add_temp_schedule_time .devices_to_choose ul li .percent_holder {
    cursor: default;
}

.add_temp_schedule_time div.sched_weekdays_settings .fake_checkbox {
    left: calc(50% - 20px);
}

.add_temp_schedule_time #set_days_sched .sched_weekdays_settings {
    height: 70px;
    width: 14.28%;
}

.add_temp_schedule_time #set_days_sched .sched_weekdays_settings label {
    padding: 0px 0px 40px 0px;
    width: 40px;
    text-align: center;
    user-select: none;
}

@media screen and (max-width: 365px) {
    #add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time,
    #add_new_temp_schedule #advanced_sched_holder .left_holder .dash,
    #add_new_temp_schedule #advanced_sched_holder .left_holder .sched_time_end {
        font-size: 22px;
    }
}

@media screen and (max-width: 370px) {
    .add_temp_schedule_time #set_days_sched .sched_weekdays_settings label {
        width: 30px;
        padding-bottom: 30px;
        float: left;
    }
    .add_temp_schedule_time .fake_checkbox {
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 600px) {
    .add_temp_schedule_time #set_days_sched .sched_weekdays_settings {
        margin-top: 10px;
        padding: 0;
    }
    .add_temp_schedule_time #set_days_sched .sched_weekdays_settings label {
        margin-left: 0;
    }
    .add_temp_schedule_time #advanced_sched_holder .sched_buttons_holder {
        margin: 20px auto auto;
    }
}

.add_temp_schedule .devices_to_choose .device_choose_label {
    padding-top: 13px;
}

.add_temp_schedule .devices_to_choose ul li h2 {
    width: 82%;
    display: flex;
}

@media screen and (max-width: 356px) {
    .add_temp_schedule .devices_to_choose ul li h2 {
        width: 78%;
        display: flex;
    }
}


/* Temperature schedules on room page */

#devices ul li#choose_sched_placeholder {
    height: auto;
}

#devices ul li#choose_sched_placeholder button {
    width: 90%;
    margin: 5%;
}

#devices ul li#choose_sched_placeholder button .icon {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: none;
    background-color: #27516c;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
}

#devices ul li.temp_sched_item {
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff;
    cursor: default;
    height: 98px;
}

#devices ul li.temp_sched_item .not_mobile_arrow_scene_active_time {
    width: 100%;
    float: right;
}

#devices ul li.temp_sched_item .not_mobile_arrow_scene_active_time .scene_contr_arrows {
    position: absolute;
    top: 0;
    background-position: 0px;
    right: 0;
    width: 25%;
    height: 49px;
}

#devices ul li.temp_sched_item .not_mobile_arrow_scene_active_time #down_arrow {
    top: 50px;
}

#devices ul li.temp_sched_item .not_mobile_arrow_scene_active_time .arrow_main_class {
    width: 100%;
    height: 100%;
    background-size: 20%;
}


/* li.temp_sched_item .temp_val span.current_temp_val {
    width: 40px;
    font-size: 30px;
    text-align: center;
}

li.temp_sched_item .temp_val span.temp_units {
    font-family: Roboto_light;
} */

#devices ul li.temp_sched_item .clickable {
    height: 100%;
    cursor: pointer;
    width: 45%;
}

#devices ul li.temp_sched_item .sched_name {
    margin: 30px 0px 0px 75px;
    width: 100%;
}

#devices ul li.temp_sched_item .sched_name .sched_title {
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#devices ul li.temp_sched_item .sched_name span {
    width: 100%;
    display: block;
    color: #d2d2d2;
    font-size: 14px;
    float: left;
}

#devices ul li.temp_sched_item.cool,
#rooms ul li .sched_item.cool {
    background-image: url('../img/cooling_icon.png');
    background-size: 50px 50px;
    background-position: 15px;
    background-color: #171d1e;
}

#devices ul li.temp_sched_item.heat,
#rooms ul li .sched_item.heat {
    background-image: url('../img/heating_icon.png');
    background-size: 50px 50px;
    background-position: 15px;
    background-color: #171d1e;
}

#devices ul li.temp_sched_item .sched_temp {
    width: 30%;
    float: right;
}

#devices ul li.temp_sched_item .edit_btns {
    bottom: 0;
    height: 98px;
}

#devices ul li.temp_sched_item .edit_btns button {
    height: 98px;
}

#devices ul li.temp_sched_item .temp_val {
    width: 100%;
    margin-top: 33px;
    text-align: center;
}

#devices ul li.temp_sched_item .temp_val .temp_units {
    display: inline;
    font-size: 30px;
}

#rooms ul li .sched_item {
    position: absolute;
    top: 15px;
    right: 10px;
    color: #fff;
    font-size: 40px;
    padding-right: 40px;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 40px;
}

.add_page .full_width_btn.sched_config_option {
    float: left;
    display: inline-block;
}

.add_page #sched_base_temp.text_input {
    float: left;
    width: calc(100% - 42px);
}

.base_sched_temp .input_holder {
    width: 100%;
}

.base_sched_temp .set_start_time {
    float: left;
    text-align: center;
    width: 60px;
    margin-left: calc(50% - 30px);
}

.sched_base_temp_units {
    float: left;
    width: 34px;
    color: #fff;
    font-size: 35px;
    font-family: Roboto_light;
}

.add_temp_schedule_time #sched_use_popup {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.mobile .add_temp_schedule_time #sched_use_popup {
    height: calc(100vh - 100px);
    overflow-y: auto;
    position: absolute;
    left: 8%;
}

.add_temp_schedule_time #sched_configs li {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 2px solid #2886c7;
}

.add_temp_schedule_time #sched_configs li:first-child {
    margin-top: 20px;
}

.add_temp_schedule_time #sched_configs li:last-child {
    margin-bottom: 40px;
}

.add_temp_schedule_time #sched_configs li .item {
    float: left;
    width: 100%;
}

.add_temp_schedule_time #sched_configs li .sched_time,
.add_temp_schedule_time #sched_configs li .sched_time_end,
.add_temp_schedule_time #sched_configs li .sched_val {
    float: left;
    display: inline;
    height: auto;
}

.add_temp_schedule_time #sched_configs li .sched_time,
.add_temp_schedule_time #sched_configs li .sched_time_end,
.add_temp_schedule_time #sched_configs li .left_holder .dash {
    margin-top: 0px;
}

@media screen and (max-width: 361px) {
    .add_temp_schedule_time #sched_configs li .sched_time,
    .add_temp_schedule_time #sched_configs li .sched_time_end,
    .add_temp_schedule_time #sched_configs li .left_holder .dash {
        font-size: 22px;
    }
}

.add_temp_schedule_time #sched_configs .sched_days {
    margin-left: 5px;
    position: static;
    width: 100%;
    float: left;
}

.add_temp_schedule_time #sched_configs .sched_days div {
    float: left;
    text-align: left;
    position: static;
}

.add_temp_schedule_time #sched_configs li .sched_val {
    margin-top: 4px;
}

.add_temp_schedule_time #sched_configs li .left_holder {
    position: static;
}

.add_temp_schedule_time #sched_configs li .right_holder {
    width: 35%;
    position: static;
    float: right;
    min-width: auto;
}

@media screen and (max-width: 361px) {
    .add_temp_schedule_time #sched_configs li .sched_val {
        margin-top: 0;
    }
}

.add_temp_schedule_time #sched_configs li .right_holder label {
    float: right;
    margin-top: 3px;
}

.sched_base_temp_preview {
    color: #fff;
    margin: 0px 20px 20px 20px;
    cursor: pointer;
    text-align: center;
}

.sched_base_temp_preview span {
    text-transform: none;
}

.sched_base_temp_preview .base_temp_value {
    font-size: 30px;
    margin: auto;
}


/* Styles for temp sched mobile only elements */

.add_temp_schedule_time input[type="time"] {
    background: transparent;
    border: none;
    font-size: 30px;
    color: #fff;
    width: 100%;
}

.add_temp_schedule_time input[type="time"]::-webkit-datetime-edit-ampm-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: none;
}

.add_temp_schedule_time input[type="time"]::-webkit-clear-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: none;
}

.mobile.add_temp_schedule_time div.controls,
.mobile.add_temp_schedule_time #sched_add_popup div.temp_units {
    margin: 20px 0px;
}

.mobile.add_temp_schedule_time #sched_base_temp,
.mobile.add_temp_schedule_time .sched_base_temp_units {
    margin-bottom: 20px;
}

.temp_schedules .highcharts-background,
#add_new_temp_schedule .highcharts-background {
    fill: #43484b;
}

#toggle_temp_schedule_popup {
    margin-top: 20px;
    float: left;
}

.sched_chart_wrapper {
    text-align: center;
    float: left;
    width: 100%;
}

.sched_chart_holder {
    height: 100px;
    float: left;
    width: 100%;
}

#add_new_temp_schedule .sched_chart_holder {
    height: 200px;
    width: 320px;
}

.temp_schedules .sched_actions {
    float: right;
}

ul.sched_chart_nav {
    width: 100%;
    float: left;
}

.temp_schedules ul.sched_chart_nav {
    padding-left: 10%;
    width: 85%;
    display: flex;
}

.temp_schedules.mobile ul.sched_chart_nav {
    padding-left: 16px;
}

ul.sched_chart_nav li {
    display: inline;
    float: left;
    padding: 10px 0px;
    color: #fff;
    width: 12.5%;
    cursor: pointer;
    text-align: center;
    background-color: #505151;
    border-bottom: 4px solid #696d6f;
}

@media screen and (max-width: 420px) {
    ul.sched_chart_nav li {
        font-size: 14px;
    }
}

@media screen and (max-width: 360px) {
    ul.sched_chart_nav li {
        font-size: 12px;
    }
    .add_temp_schedule_time ul.sched_chart_nav li {
        font-size: 12px;
    }
    #add_new_temp_schedule .sched_chart_holder {
        width: 100%;
    }
}

.add_temp_schedule_time ul.sched_chart_nav li {
    font-size: 14px;
}

ul.sched_chart_nav li.selected {
    background-color: #696d6f;
    border-bottom: 4px solid #3dcdff;
}

.temp_schedules ul.sched_chart_nav li {
    margin-top: 10px;
    flex-grow: 1;
    float: left;
    padding: 2px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background-color: #696D6F;
    text-transform: none;
    border-bottom: none;
    font-size: 14px;
    border-radius: 7px;
    width: auto;
    margin-right: 12px;
}

.temp_schedules.mobile ul.sched_chart_nav li {
    padding: 2px 6px;
    border-radius: 10px;
}

.temp_schedules ul.sched_chart_nav li.selected {
    background-color: #3DCDFF;
    border-bottom: none;
}

.temp_schedules ul.room_devices_list>li:last-child {
    border-bottom: 2px solid #2886c7;
}


/* End of Temperature schedules */

.validate_input:invalid {
    color: red;
}

.light_loader_small {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-top: -10px;
    margin-left: -10px;
    background-image: url(../img/loading_anim.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: spin 2s linear infinite;
    z-index: 101;
    display: none;
}

.device_SH2CB-1-light .light_icon,
.device_SH2LED-1-light .light_icon,
.device_SHDM-1-light .light_icon,
.device_SHDM-2-light .light_icon,
.device_SHDIMW-1-light .light_icon,
.device_SHVIN-1-light .light_icon,
.device_SHBDUO-1-light .light_icon {
    position: relative;
}

.device_SHBDUO-1-light .light_icon.warm_slider {
    background-image: url(../img/lux_icon.png);
}

.light_loader_small.led_loader {
    width: 100%;
    height: 100%;
    margin: 0;
    background-size: contain;
}

.no_sensor_message {
    float: none !important;
}

#test_acc_indicator {
    position: absolute;
    left: 50%;
    top: 5px;
    color: #fff;
    text-align: left;
    margin-left: -15px;
}

#update_section {
    display: none;
    margin-bottom: 10px;
}

#update_section .input_holder,
#update_section #check_update_head {
    margin-bottom: 0px;
}

#update_section #check_update_head {
    margin-top: 10px;
    /* width: 100%; */
}

#device_page.offline_device #update_section {
    display: none;
}

#calibrate_holder_top.input_holder {
    margin-top: 10px;
    margin-bottom: 10px;
}

#timer_controll_tab {
    display: table;
    margin: 20px auto;
    text-align: center;
}
#timer_controll_tab input {
    width: 80px;
    height: 30px; 
    background-color: #43484B;
    border-radius: 3px;
    color: white;
    margin: 0 5px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#roller_favorites {
    height: auto;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    margin: 0 10px 10px 10px;
}

#roller_favorites span {
    width: 100%;
    color: #fff;
}

#roller_favorites .favorite_button {
    cursor: pointer;
    height: 35px;
    width: 47%;
    margin: 5px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #43484B;
    position: relative;
    background-image: url(../img/favorites_icon.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: 5px;
    padding-left: 30px;
    box-sizing: border-box;
}

#favorites_settings_list {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15px;
}

#favorites_settings_list .get_position {
    /* display: none; */
}

#favorites_settings_list .favorite_name {
    width: 100%;
}

#favorites_settings_list .favorite_pos {
    width: 100%;
}

#favorites_settings_list .title {
    margin-top: 10px;
}
/* ------------------------ group page devices list styles -------------------------*/

.group_roller #group_devices ul#devices li.SHSW-21-roller_control .offline_relay,
.group_relay #group_devices ul#devices li.SHSW-21-relay_control .offline_roller,
.group_roller #group_devices ul#devices li.SHSW-25-roller_control .offline_relay,
.group_relay #group_devices ul#devices li.SHSW-25-relay_control .offline_roller,
.group_relay #group_devices ul#devices li.SHSW-44-relay_control .offline_roller,
.group_relay #group_devices ul#devices li.SHPLG-1-relay_control .offline_roller,
.group_relay #group_devices ul#devices li.SHPLG2-1-relay_control .offline_roller {
    display: none;
}


/* ------------------------ Temporary styles for beta marking -------------------------*/

#sidebar #temp_sched .account_opt_name span {
    text-transform: none;
}

.beta_text {
    color: #A60800;
    display: block;
    text-align: center;
    font-size: 14px;
}

.range_holder.brighthess_holder {
    background-image: url(../img/brightness_slider_icon.png);
}

.cons_light_combo .device_light .consumption_value {
    margin-top: 8px !important;
    background-image: url(../img/consumption_icon.png);
    background-size: 8px;
    padding-left: 8px !important;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    height: 16px !important;
    box-sizing: content-box !important;
    margin-left: 4px !important;
}


/* ------------------------- delete user images screen styles ---------------------------- */

.user_images_text {
    display: block;
    color: #fff;
    text-align: center;
    margin: 20px;
    margin-top: 0;
}

.image_list_wrap {
    float: left;
    width: calc(100% - 40px);
    padding: 20px;
    padding-top: 0px;
}

#images_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    grid-auto-rows: 1fr;
}

.mobile #images_list {
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

#images_list::before {
    content: '';
    width: 0;
    padding-bottom: 100%;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

#images_list>*:first-child {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

#images_list div {
    background-size: cover;
    border: 1px solid #fff;
    margin: 2px;
}

.message_img {
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    margin: 20px auto;
}


/*         SETTINGS HIDE           */

/* .device_SHSW-44-relay #device_set_wrapper .input_holder.separate_reverse, */
.device_SHSM-01-sensor .threshold_hum_settings,
.device_SHSW-21-roller .swap_inputs_settings,
.device_SHPLG-1-relay .switch_mode,
.device_SHSW-1-relay .cons_calc_settings,
.device_SHPLG-1-relay .plug_led_settings,
.device_SHPLG2-1-relay .plug_led_settings,
.device_SHPLG-1-relay #b_s_off_title,
.device_SHPLG2-1-relay #b_s_off_title,
.device_SHPLG-S-relay #b_s_off_title,
.device_SHPLG-UK1-relay #b_s_off_title,
.device_SHPLG-AU1-relay #b_s_off_title,
.device_SHPLG-IT1-relay #b_s_off_title,
.device_SHPLG-U1-relay #b_s_off_title,
.device_SHEM-emeter #b_s_off_title,
.device_SHEM-emeter #b_s_on_title,
.device_SHSW-21-roller .load_settings,
.device_SHSW-25-roller .load_settings {
    display: none;
}

.device_SHHT-1-sensor .ext_power_settings,
.device_SHHT-1-sensor .offset_hum_settings,
.device_SHHT-1-sensor .offset_temp_settings,
.device_SHDW-2-sensor .offset_temp_settings {
    display: block;
}

/* -------------- Wifi Batch update screen styles -------------- */

#wifi_batch_update_page .tab_buttons {
    float: left;
    margin-top: 0;
}

#wifi_added {
    margin: 0 0 20px 0;
}

#current_wifi_ssid option {
    text-transform: none;
}


/* -------------- SHEM device screen styles -------------- */

.consumption_display {
    box-sizing: border-box;
    margin: 10px;
    background-color: #43484B;
    position: relative;
    height: 120px;
    display: none;
}

#emeter_totals.consumption_display {
    height: 70px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

#emeter_totals .sum_power {
    width: 100%;
    padding-left: 0;
    text-align: center;
    line-height: 70px;
    text-transform: none;
}

.phase_title {
    position: absolute;
    color: #fff;
    text-align: left;
    width: 50%;
    padding: 5px 0 0 10px;
    line-height: 25px;
    font-weight: normal;
}

.consumption_display>.half_width:first-child {
    height: 120px;
    line-height: 120px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consumption_display .em_display_value.em_cons {
    font-size: 32px;
    /* padding-left: 12%; */
    box-sizing: border-box;
    text-transform: none;
    
}

.consumption_display .em_display_item {
    font-size: 12px;
    font-weight: bold;
    color: #bbb;
    box-sizing: border-box;
    display: inline-block;
    line-height: 40px;
    padding-left: 5%;
}

.consumption_display .em_display_value {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    line-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .mobile .consumption_display .em_display_item,
.mobile .consumption_display .em_display_value {
    width: 100%;
    text-align: center;
    padding-left: 0;
    line-height: 2;
} */

/* .mobile .consumption_display>.half_width {
    display: table-cell;
    line-height: 9;
    height: auto;
} */

/* .mobile .consumption_display>.half_width:first-child .em_display_value {
    height: 100%;
    line-height: 100%;
} */

/* ------------------ External sensors styles ------------------*/

.ext_data {
    margin: 0 10px 10px 10px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ext_data h3 {
    padding: 10px 10px;
    font-size: 18px;
}

.ext_data ul {
    list-style: none;
    width: 100%;
    padding-bottom: 5px;
}

.ext_data ul li {
    background-color: #43484B;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 auto 5px auto;
    padding: 5px;
    height: 60px;
    width: 96%;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 18px;
    position: relative;
}

.ext_data ul li h4,
.ext_data ul li span.type {
    display: inline-flex;
    align-items: center;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 20%;
    width: 60%;
    white-space: nowrap;
}

.ext_data ul li h4 {
    height: 30px;
    font-weight: bold;
    text-transform: none;
}

.ext_data ul li span.type {
    height: 16px;
    font-size: 13px;
    color: lightslategray;
    text-transform: capitalize;
}

.ext_data ul li span {
    text-transform: none;
}

.ext_data ul li span.status{
    position: absolute;
    top: 0;
    height: 100%;
    display: inline-flex;
    align-items: center;
    text-transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: flex-end;
    font-size: 20px;
}

.ext_data ul li .value_container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    align-self: flex-end;
}

.ext_data ul li span.unit,
.ext_data ul li span.value {
    height: 100%;
    display: inline-flex;
    align-items: center;
    text-transform: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: flex-end;
    font-size: 20px;
}

.ext_data ul li.unnamed {
    justify-content: center;
}

.ext_data ul li.unnamed h4 {
    display: none;
}

.ext_data ul li.unnamed span.type {
    height: 30px;
    font-size: 20px;
    color: inherit
}

.ext_data ul li.selected {
    /* border: 2px solid #2886c7; */
    background-color: #696d6f;
    border-bottom: 4px solid #3dcdff;
    pointer-events: none;
}

.ext_data ul li.selected span.type {
    color: #fff;
}

.ext_data ul li.one_of_a_kind {
    background-color: #43484B;
    border-bottom: none;
    pointer-events: none;
}

.ext_data ul li.one_of_a_kind span.type {
    color: lightslategray
}


/* .ext_data ul li.selected h4,
.ext_data ul li.unnamed.selected span.type,
.ext_data ul li.selected span.unit,
.ext_data ul li.selected span.value {
    color: #2886c7;
} */


/* Night mode styles */

#night_mode_preview {
    height: 60px;
}

#night_mode_preview .preview_item .times {
    font-size: 30px;
}

#night_mode_preview .preview_item .night_brightness_data {
    font-size: 16px;
}

#night_mode_preview .right_holder .edit_icon {
    margin-top: 0;
}

#night_mode_popup button#set_night_mode {
    margin-top: 20px;
}

#night_mode_preview .left_holder {
    width: calc(100% - 40px);
}

#night_mode_preview .right_holder {
    width: 40px;
    min-width: 40px;
}

#group_page .input_state,
#room_page .input_state,
#device_page .input_state {
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
}

#group_page .shix_toggle_wrapper .input_state,
#room_page .shix_toggle_wrapper .input_state,
#device_page .shix_toggle_wrapper .input_state {
    position: absolute;
    align-items: center;
    justify-content: center;
    height: 100%;
    display: none;
}

#device_page .shix_toggle_wrapper.input_on_true .input_state,
#room_page .shix_toggle_wrapper.input_on_true .input_state{
    display: flex;
}

#room_page .control_icon.input_on_true .input_state{
    display: flex;
}

#room_page .input_state .active_input {
    fill:#3dcbff;
}

#device_page .input_state .active_input {
    fill:#3dcbff;
    /* transform: scale(0.6) translate(81px, 83px); */
    transform: scale(1.1)translate(-12px, -10px);
}

#includer {
    background-image: url(../img/dark_background.png);
    background-blend-mode: overlay;
    width: 90%;
    height: 40px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    color: white;
    box-shadow: 5px 5px rgba(0,0,0,0.5);
    z-index: 2;
}

#includer .icon {
    position: relative;
}
#includer .text {
    margin: 0 auto;
}

.share_settings .input_holder {
    padding: 10px !important;
    margin-bottom: 0 !important;
}

.share_settings ul {
    margin-top: 20px;
}

.share_settings ul li .delete_btn {
    margin-top: 0 !important;
    width: 45px !important;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    background-image: url(../img/delete_icon.png);
    background-color: #d23830;
}

.share_settings ul li {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.share_settings ul li .hollow_bg {
    margin-top: 0 !important;
    /* height: 40px; */
}

.share_settings ul li .hollow_bg input {
    width: 235px !important;
    padding-left: 15px;
    overflow:hidden;
    height: 40px;;
}

.shared_from {
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 10px;
}

.shared_from span {
    align-self: center;
    margin-top: 10px;
}

.hidden_devices #room_overview,
.shared_devices #room_overview,
.all_devices #room_overview {
    border-bottom: 4px solid #000;
}

#device_page #adc_addons {
    margin: 0 10px 10px 10px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    box-sizing: border-box;
    padding: 5px 0;
}

#device_page .adc_addon {
    height: 40px;
    background-color: #43484B;
    margin: 0 auto 5px auto;
    width: 96%;
    margin: 5px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;
}

/* mqtt actions form styles start */

#mqtt_actions_enable_form {
    display: none;
    flex-direction: column;
    max-width: 240px;
    margin: auto;
}


/* ext switch styles */
.ext_switch {
    display: flex;
    width: 100px;
    position: absolute;
    right: 5px;
    top: 5px;
    justify-content: flex-end;
}


#devices ul li .prop_holder .ext_switch {
    position: initial;
    height: 100%;
    padding: 5px;
    justify-content: center;
}

#devices ul li .prop_holder .ext_switch.door label,
#devices ul li .prop_holder .ext_switch.garage label{
    display: none;
}

#devices ul li .prop_holder .ext_switch span {
    margin: 0;
    height: 100%;
    width: 35%;
}

#devices ul li .prop_holder .ext_switch.basic span{
    margin: 5px;
    width: 20px;
    height: 20px;
}

.ext_switch label{
    pointer-events: none;
    max-width: 80px;
    display: flex;
    color: #fff;
    font-size: 12px;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ext_switch span {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.ext_switch.basic span {
    min-width: 20px;
    height: 20px;
    background: rgb(184,184,184);
    background: radial-gradient(circle, rgba(184,184,184,1) 0%, rgba(133,133,133,1) 100%);
    border-radius: 50%;
    margin-left: 5px;
}

.ext_switch.basic span.active {
    background: rgba(31,206,255,1);
    background: radial-gradient(circle, rgba(31,206,255,1) 25%, rgba(141,228,255,1) 100%);
}

.ext_switch.door span {
    min-width: 30px;
    height: 30px;
    background-image: url('../img/small_door_closed.png');
}

.ext_switch.door span.active {
    background-image: url('../img/small_door.png');
}

.ext_switch.garage span {
    min-width: 30px;
    height: 30px;
    margin-left: 5px;
    background-image: url('../img/garage_closed.svg');
}

.ext_switch.garage span.active {
    background-image: url('../img/garage_open.svg');
}

.ext_switch_icon{
    padding: 10px;
}

.ext_switch_icon span {
    text-transform: initial;
    margin-bottom: 10px;
    display: flex;
}

.shix_momentary_wrapper,
.shix_toggle_wrapper {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.shix_momentary_wrapper p,
.shix_toggle_wrapper p {
    color: #fff;
    font-size: 14px;
}

.shix_momentary_wrapper p span,
.shix_toggle_wrapper p span{
    color:#3dcdff;
    font-size: 16px;
    margin-left: 5px;
}

.shix_indicator{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.shix_toggle_wrapper .shix_inner{
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/power_on_off.png);
}

.shix_toggle_wrapper .shix_input_holder .shix_inner,
.shix_momentary_wrapper .shix_inner{
    width: 91%;
    height: 91%;
}

.shix_light{
    background-color:#3dcdff;
}

.event_click_holder{
    display: none;
}

.show_event_text{
    display: block;
}

.prop_holder.shix_input_holder {
    align-items: center;
    justify-content: center;
    position: relative;
}

.prop_holder.shix_input_holder .shix_momentary_wrapper,
.prop_holder.shix_input_holder .shix_toggle_wrapper {
    align-items: center;
    justify-content: center !important;
    margin: 0;
    width: 100% !important; 
    height: 100% !important;
}

.prop_holder.shix_input_holder .shix_momentary_wrapper .shix_indicator,
.prop_holder.shix_input_holder .shix_toggle_wrapper .shix_indicator {
    width: 50px !important;
    height: 50px !important;
    margin: 0;
    justify-content: center !important;
    align-items: center !important;
}

.prop_holder.shix_input_holder .shix_toggle_wrapper .shix_inner {
    width: 17px !important;
    height: 17px !important;
    margin: 0;
}

.shix_momentary_wrapper .shix_inner .one,
.shix_momentary_wrapper .shix_inner .two,
.shix_momentary_wrapper .shix_inner .three,
.shix_momentary_wrapper .shix_inner .four,
.shix_momentary_wrapper .shix_inner .five,
.shix_momentary_wrapper .shix_inner .six {
    display: none;
}

.shix_momentary_wrapper .shix_inner circle {
    fill: #3dcdff;
    r: 10.3;
}

.shix_toggle_wrapper .input_state path {
    stroke: #3dcdff;
    stroke-width:3px;
    stroke-linecap:round;
}

.shix_momentary_wrapper .shix_inner path {
    stroke: #3dcdff;
    stroke-width:21px;
    stroke-linecap:round;
}

.shix_momentary_wrapper .shix_inner.momentary_S .one {
    display: flex;
}

.shix_momentary_wrapper .shix_inner.momentary_SS .one,
.shix_momentary_wrapper .shix_inner.momentary_SS .two {
    display: flex;
}

.shix_momentary_wrapper .shix_inner.momentary_SSS .one,
.shix_momentary_wrapper .shix_inner.momentary_SSS .two,
.shix_momentary_wrapper .shix_inner.momentary_SSS .three {
    display: flex;
}

.shix_momentary_wrapper .shix_inner.momentary_L .four {
    display: flex;
}

.shix_momentary_wrapper .shix_inner.momentary_SL .six {
    display: flex;
}

.shix_momentary_wrapper .shix_inner.momentary_LS .five {
    display: flex;
}

.earth_day_popup {
    /* background-image: url('../img/earth_day_popup.jpg'); */
}

/* ------------------------ end of css -------------------------*/