#screen_division_move_left {
    position: absolute;
    width: 24px;
    height: 192px;
    margin-left: 0px;
    margin-top: 0px;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/buttons/backward_b.png");
    background-position: center;
    display: block;
    opacity: 0;
    z-index: 1;
}

#screen_division_move_left:hover {
    opacity: 1;
}

#screen_division_move_right {
    position: absolute;
    width: 24px;
    height: 192px;
    margin-left: 0px;
    margin-top: 0px;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/buttons/forward_b.png");
    background-position: center;
    display: block;
    opacity: 0;
    z-index: 1;
}
#screen_division_move_right:hover {
    opacity: 1;
}

#connect_b {
    position: relative;
    margin-top: 10px;
    background-color: #3c3c3c;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/server_avlbl.svg");
    display: inline-block;
}
#connect_b:hover {
    background-size: 28px;
    background-color: #4a4a4a;
}

#calendar_b {
    position: inherit;
    margin-top: 10px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/calendar_b.svg");
    display: none;
}
#calendar_b:hover {
    border: none;
    background-size: contain;
    background-color: #4a4a4a;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/calendar_b.svg");
}

/*
    Изменил .close_b
*/

.close_b {
  width: 14px;
  height: 14px;
  position: inherit;
  border: none;
  background: url("../img/buttons/close_new.svg"), transparent;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-top: 6px;
}

.close_b:hover {
    background-image: url("../img/buttons/close_new-hover.svg");
}

.close_b:active {
    background-image: url("../img/buttons/close_new-hover.svg");
}

#manage_b {
    position: relative;
    margin-top: 0px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/manage_b.svg");
    display: inline-block;
}

#manage_b:hover {
    border: none;
    background-size: contain;
    background-color: #4a4a4a;
    background-repeat: no-repeat;
    background-image: url("../img/manage_b.svg");
}

.maximize_b {
    width: 14px;
    height: 14px;
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/minimize_b.svg");
    background-color: transparent;
    cursor: pointer;
    margin: 6px 3px 0 auto;
}
#left_panel_top .maximize_b {
  margin: 14px 3px 0 auto;
  position: relative;
  right: 6px;
}
.maximize_b:hover {
    border: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/minimize_b_hover.svg");
    background-color: transparent;
}

.minimize_b {
  width: 14px;
  height: 14px;
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/buttons/minimize_b.svg");
  background-color: transparent;
  cursor: pointer;
  margin: 6px 3px 0 auto;
}

.minimize_b:active {
  border: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/buttons/minimize_b_hover.svg");
  background-color: transparent;
}

.modal_bottom_but {
    color: #fff;
    cursor: pointer;
    background: #386958;
    border: 1px solid #386958 !important;
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    padding: 7px 15px;
}
.modal_bottom_but:first-child {
  margin: 0 10px 0 0;
}
/* .modal_bottom_but:hover {
    background: linear-gradient(180deg, rgba(79, 124, 134, 1) 0%, rgba(124, 165, 172, 1) 100%);
} */

.modal_bottom_but:active {
    background: rgba(79, 124, 134, 1);
}

#playback_b {
    margin-left: 10px;
    margin-top: 10px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/playback_b.svg");
    display: inline-block;
}

#playback_b:hover {
    border: none;
    background-size: contain;
    background-color: #4a4a4a;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/playback_b.svg");
}

.playback_backward {
    width: 20px;
    height: 20px;
    margin-left: 0px;
    margin-top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/backward_b.svg");
    margin: 0 30px 10px 10px;
}

.playback_backward_selected {
    width: 20px;
    height: 20px;
    margin-left: 0px;
    margin-top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/backward_b_selected.svg");
    margin: 0 30px 10px 10px;
}

.playback_pause {
    width: 20px;
    height: 20px;
    margin-left: 0px;
    margin-top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/pause_b.svg");
    margin: 0 30px 10px 10px;
}

.playback_pause_selected {
    width: 20px;
    height: 20px;
    margin-left: 0px;
    margin-top: 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/pause_b_selected.svg");
    margin: 0 30px 10px 10px;
}

.playback_forward {
  width: 20px;
  height: 20px;
  margin-left: 0px;
  margin-top: 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/buttons/nextward_b.svg");
  margin: 0 33px 10px 10px;
}

.playback_forward_selected {
  width: 20px;
  height: 20px;
  margin-left: 0px;
  margin-top: 0px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/buttons/nextward_b_selected.svg");
  margin: 0 33px 10px 10px;
}

.playback_follow_cursor,
.playback_follow_cursor_selected {
    width: 20px;
    height: 20px;
    margin: 5px 5px 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 3px;
}

.playback_follow_cursor {
    background-image: url("../img/aut_pass.svg");
    margin-left: auto;
}

.playback_follow_cursor_selected {
    background-image: url("../img/buttons/lock_b.png");
}

/* Изменил стили кнопок */

#plbck_zoom_out,
#plbck_zoom_in {
    width: 24px;
    height: 24px;
    margin-top: 10px;
    border: none;
    background-size: contain;
    background-color: #484848;
    background-repeat: no-repeat;
    display: inline-block;
}

#plbck_zoom_out {
    background-image: url("../img/buttons/zoom_out_b.png");
}

#plbck_zoom_out:hover {
    background-color: #3a3a3a;
}

#plbck_zoom_in {
    background-image: url("../img/buttons/zoom_in_b.png");
}

#plbck_zoom_in:hover {
    background-color: #3a3a3a;
}

#selected_screen_division_cell {
    position: absolute;
    z-index: 1000;
    display: none;
}

#zoom_b {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/zoom.png");
    background-size: 20px 20px;
    background-position: 3px 3px;
    display: inline-block;
}

#picture_settings_b {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/picture_settings.png");
    background-size: 20px 20px;
    background-position: 1px 3px;
    display: inline-block;
}

.ptz_b {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/ptz.png");
    background-size: 24px 24px;
    background-position: 1px 2px;
    display: inline-block;
}

.audio_off_b {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/audio-volume-muted.png");
    display: inline-block;
    z-index: 100;
}

.audio_on_b {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/audio-volume-max.png");
    display: inline-block;
    z-index: 100;
}

.audio_on_icon {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/audio-volume-max.png");
    display: inline-block;
    z-index: 100;
    right: 5px;
}

.export_b {
  position: relative;
  width: 24px;
  height: 24px;
  border: none;
  background-repeat: no-repeat;
  background-image: url("../img/arhiv_b.svg") !important;
  background-size: 20px !important;
  background-position: 1px 2px;
  display: inline-block;
  margin-left: 2px;
}
.export_b:hover, .ptz_b:hover {
    background-color: grey;
    border-radius: 5px;
}

.audio_on_b:hover,
.audio_off_b:hover,
#ptz_b:hover,
#zoom_b:hover,
#picture_settings_b:hover {
    background-color: grey;
    border-radius: 5px;
}

#screen_div_b {
    position: inherit;
    margin-top: 10px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/screendiv_b.svg");
    display: inline-block;
}

#screen_div_b:hover {
    border: none;
    background-size: contain;
    background-color: #4a4a4a;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/screendiv_b.svg");
}

#server_search_b {
  width: 16px;
  height: 15px;
  border: none;
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url("../img/buttons/search_b.svg");
  margin-right: 5px;
  margin-top: 6px;
  cursor: pointer;
}

#server_search_b:hover {
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/buttons/search_b_active.svg");
}

#surveillance_b {
    position: inherit;
    margin-top: 10px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/buttons/surveillance_b.svg");
    display: none;
}

#surveillance_b:hover {
    border: none;
    background-size: contain;
    background-color: #4a4a4a;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/buttons/surveillance_b.svg");
}

#users_b {
    position: inherit;
    margin-top: 10px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/users_b.svg");
    display: inline-block;
}

#users_b:hover {
    border: none;
    background-size: contain;
    background-color: #4a4a4a;
    background-repeat: no-repeat;
    border-radius: 3px;
    background-image: url("../img/users_b.svg");
}

@media only screen and (max-width: 870px) {
    #top_panel_left div {
        height: 25px;
        width: 100px;
        background-position: 50%;
        margin-top: 8px;
        padding: 3px 0px 3px 0px;
    }
    #top_panel_left div span {
        display: none;
    }
}

.icon_jpeg{
    text-align: right;
    display: inline-block;
    height: 30px;
    width: 27px;
    background-image: url("../img/buttons/jpeg.png");
}

.icon_main{
    text-align: right;
    display: inline-block;
    height: 30px;
    width: 27px;
    background-image: url("../img/buttons/main.png");
}

.icon_sub{
    text-align: right;
    display: inline-block;
    height: 30px;
    width: 27px;
    background-image: url("../img/buttons/sub.png");
}




/* Style's from figma */


#arhiv_b {
    position: inherit;
    margin-top: 10px;
    border: none;
    color: #ffffff;
    text-align: right;
    background-size: contain;
    background-color: #3c3c3c;
    background-repeat: no-repeat;
    background-image: url("../img/arhiv_b.svg");
        display: none !important;
}