.for_sidebar {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 4;
}

#sidebar {
    width: 296px;
    right: 0;
    background: url(../img/sidebar_white_background.png) repeat;
    max-width: 100%;
    overflow-y: no-display;
    overflow-x: hidden;
    transition: all 0.3s;
    transform: translate(100%, 0px);
    -webkit-transform: translate(100%, 0px);
}

#sidebar a {
    color: black;
}

#behind_sidebar {
    display: none;
    cursor: pointer;
}

#sidebar.open {
    box-shadow: -13px 0px 13px 0px rgba(0, 0, 0, 0.75);
    transition: all 0.3s;
    transform: translate(0%, 0px);
    -webkit-transform: translate(0%, 0px);
}

#sidebar .sidebar_inner_holder {
    opacity: 0;
    transition: all 0.7s;
}

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

#sidebar .top_options {
    height: 58px;
    border-bottom: 2px solid #272e30;
}

#sidebar ul li.disabled_item div.settings_name {
    color: gray;
}

@media screen and (max-width: 700px) {
    #sidebar .top_options {
        height: 58px;
    }
    #sidebar .top_options a {
        height: 100%;
    }
}

#sidebar .top_options a {
    height: 58px;
    width: 25%;
    display: block;
    float: right;
}

#sidebar .top_options a span {
    display: none;
}

#sidebar .top_options .refresh {
    background: url(../img/refresh_icon.png) no-repeat 50%;
    background-size: 50%;
}

#sidebar .top_options .rotate {
    background: url(../img/rotate_icon.png) no-repeat 50%;
    background-size: 50%;
}

#sidebar .top_options .reorder {
    background: url(../img/reorder_icon.png) no-repeat 50%;
    background-size: 50%;
}

#sidebar .top_options .edit {
    background: url(../img/edit_icon.png) no-repeat 50%;
    background-size: 50%;
}

#sidebar #favorites {
    background: url(../img/dark_background.png) repeat;
}

#sidebar #favorites h1 {
    background-color: #27516c;
    background-image: url(../img/favorites_icon.png);
    background-size: 22px;
}

#sidebar #favorites #favorites_holder {
    height: 300px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    border-bottom: 2px solid #2886c7;
}

#sidebar #favorites #favorites_holder h2 {
    font-size: 17px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    height: 42px;
}

#sidebar #favorites #favorites_holder h2 span {
    display: block;
    float: left;
}

#sidebar #favorites #favorites_holder h2 .icon {
    height: 42px;
    width: 42px;
    background: #1a313f url(../img/room_icon.png) no-repeat 50%;
    background-size: 65%;
}

#sidebar #favorites #favorites_holder h2 .room_name {
    width: 95%;
    margin-left: -42px;
    padding-left: 50px;
    padding-top: 11px;
    padding-right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

#sidebar ul {
    box-sizing: border-box;
    padding: 12px;
}

#sidebar ul li {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    font-size: 17px;
    cursor: pointer;
    position: relative;
}

#sidebar #favorites #favorites_holder .room ul li:last-child {
    margin-bottom: 0;
}

#sidebar #favorites #favorites_holder .room ul li div,
#sidebar #settings .settings_name,
#sidebar #settings .settings_name span,
#sidebar .account_opt_name {
    float: left;
    text-transform: capitalize;
}

#sidebar #settings .settings_name span {
    float: none;
}

#sidebar .icon {
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: 50%;
}

#devices ul li .action_locked .icon {
    background-size: 45%;
}

#devices ul li.auth_true .action_locked.locked_true .icon {
    background-image: url(../img/pass_icon.png);
    background-size: 70%;
}

#sidebar #favorites #favorites_holder .room ul li.relay .icon,
#devices ul li.relay.no_image_true .icon,
#device_page #info.no_image_true.relay,
.action_locked.locked_false .icon {
    background-image: url(../predefined_images/device/relay.png);
}

#device_page #info.no_image_true.relay,
#device_page #info.no_image_true.light,
#device_page #info.no_image_true.sensor,
#device_page #info.no_image_true.remote,
#device_page #info.no_image_true.roller,
#device_page #info.no_image_true.emeter,
#device_page #info.no_image_true.inputs_reader {
    background-size: 35%;
}

#sidebar #favorites #favorites_holder .room ul li.socket .icon,
#devices ul li.socket.no_image_true .icon,
#device_page #info.no_image_true.socket,
#devices .socket .action_locked.locked_false .icon {
    background-image: url(../predefined_images/device/socket.png);
}

#sidebar #favorites #favorites_holder .room ul li.light .icon,
#devices ul li.light.no_image_true .icon,
#device_page #info.no_image_true.light,
.devices_to_choose .light .action_locked.locked_false .icon,
#devices .light .action_locked.locked_false .icon,
.light_icon {
    background-image: url(../predefined_images/device/light.png);
}

/* .favorites_icon {
    background-image: url(../img/favorites_icon.png);
} */

.devices_to_choose .sensor .action_locked.locked_false .icon,
#devices .sensor .action_locked.locked_false .icon {
    background-image: url(../predefined_images/device/sensor.png);
}

.devices_to_choose .sensor.discovered_SHSM-01 .action_locked.locked_false .icon,
#devices .sensor.discovered_SHSM-01 .action_locked.locked_false .icon,
.devices_to_choose .sensor.discovered_SMK1NB .action_locked.locked_false .icon,
#devices .sensor.discovered_SMK1NB .action_locked.locked_false .icon {
    background-image: url(../predefined_images/device/smoke_sensor.png);
}

#sidebar #favorites #favorites_holder .room ul li .device_name,
#sidebar #settings .settings_name,
#sidebar .account_opt_name {
    font-size: 16px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 50px;
    height: 16px;
}

#sidebar #favorites #favorites_holder .room ul li .icon.control_icon {
    background-image: url(../img/small_off_icon.png);
    background-size: 80%;
    float: right;
    transition: background .2s;
}

#sidebar #favorites #favorites_holder .room ul li.device_on_true .icon.control_icon {
    background-image: url(../img/small_on_icon.png);
}

#sidebar #settings h1 {
    background-color: #27516c;
    background-image: url(../img/settings_icon.png);
    background-size: 22px;
}

#sidebar #settings .icon {
    float: left;
}

#sidebar #settings #main_set .icon {
    background-image: url(../img/black_settings_icon.png);
}

#sidebar #settings #cloud_set .icon {
    background-image: url(../img/black_cloud_set_icon.png);
}

#sidebar #settings #add_room .icon {
    background-image: url(../img/black_room_icon.png);
}

#sidebar #settings #add_scene .icon {
    background-image: url(../img/black_scene_icon.png);
}

#sidebar #settings #add_device .icon {
    background-image: url(../img/black_device_icon.png);
}

#sidebar #settings #add_narrowband_device .icon {
    background-image: url(../img/icon_add_nb.png);
}

#sidebar #settings #add_scene .icon {
    background-image: url(../img/scene.png);
}

#sidebar #settings #add_camera .icon {
    background-image: url(../img/camera_icon.png);
}

#sidebar #settings #add_group .icon {
    background-image: url(../img/groups_icon.png);
}

#sidebar #settings #add_ir_remote .icon {
    background-image: url(../img/ir_control_icon.png);
}

#sidebar #settings #add_by_ip .icon {
    background-image: url(../img/add_by_ip.png);
}

#sidebar #settings #temp_sched .icon {
    background-image: url(../img/temp_sched_icon.png);
}

#sidebar #settings #add_alarm .icon,
#sidebar #account_set #show_alarms .icon {
    background-image: url(../img/shield_empty_black.png);
    background-size: 50%;
}

#sidebar #account_set h1 {
    background-color: #27516c;
    background-image: url(../img/accout_icon.png);
    background-size: 22px;
}

#sidebar #bulk_update .icon {
    background-image: url(../img/check_update_icon_black.png);
}

#sidebar #hidden_devices .icon {
    background-image: url(../img/hidden.png);
}

/* #sidebar #shared_devices .icon {
    background-image: url(../img/shared.svg);
} */

#sidebar #all_devices .icon {
    background-image: url(../img/all.svg);
}

#sidebar #account_set .icon {
    float: left;
}

#sidebar #account_set #log_out .icon {
    background-image: url(../img/log_out_icon.png);
}

#sidebar #account_set #user_settings .icon {
    background-image: url(../img/user_settings_icon.png);
}

#sidebar #account_set #consumption_panel .icon {
    background-image: url(../img/consumption_icon_black.png);
}

#sidebar #account_set #e_shop_browser .icon {
    background-image: url(../img/e_shop.png);
}

#account_set h1 {
    padding-right: 50px;
}

#account_set h1 .acc_name {
    text-transform: none;
}

#sidebar #info_set h1 {
    background-image: url(../img/info_small.png);
    background-size: 22px;
}

#sidebar #sidebar_footer {
    padding: 20px;
}

#sidebar #sidebar_footer img {
    width: 100%;
}

#gh_banner,
#e_shop_banner {
    width: 100%;
    height: 60px;
    background-color: grey;
    cursor: pointer;
}

.bf_2020 {
    background-image: url('../img/bf_banner.jpg');
}

.gh_2021 {
    background-image: url('../img/banners/gh-banner.jpg');
}

#list_menu:not(.done_btn):after {
    /* content: ''; */
    width: 7.7px;
    height: 7.7px;
    border-radius: 10px;
    background-color: #2886c7;
    position: absolute;
    top: 16px;
    z-index: 2;
    right: 6px;
    border: 2px solid #272C2F;
}

/* ----------- sidebar ------------ */