#application{
    overflow-x: hidden;
}

.rightpanel-wrapper{
    position:relative;
}
.rightpanel-wrapper.rightpanel-overlay{
    background: rgba(0,0,0,.5);
    z-index: 20;
    width: 100%;
    height: 100%;
    position: absolute;
}

.rightpanel{
    background: rgba(255,255,255,0.6);
    height:calc(100% - 30px);
    display:flex;
    right: -390px;
    top: 30px;
    width: 390px;
    position:absolute;
    z-index:9999999;
}
.rightpanel-wrapper.rightpanel-overlay .rightpanel{
    height:100%!important;
}

.rightpanel-on .rightpanel{
    right:0;
}

.rightpanel-toogle{
    height:30px;
    color: #666;
}

.rightpanel-toogle,
.rightpanel-tabs{
    position:absolute;
    left:-30px;
    width:30px;
    top:26px;
}
.rightpanel-toogle,
.rightpanel-tab{
    background:rgba(255,255,255,0.6);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    text-align:center;
    cursor:pointer;
}

.rightpanel-tabs{
    top: 56px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.rightpanel-toogle{
    font-size:30px;
}
.rightpanel-tabs .rightpanel-tab{
    writing-mode: tb-rl;
    margin-top: 9px;
    padding: 5px 0;
    width: 25px;
    font-size: 18px;
    line-height: 25px;
}
.rightpanel-tab.active{
    text-decoration: underline;
}


.rightpanel-inner{
    overflow-y: scroll;
    padding:0 5px 0 10px;
    display:block;
    width: 100%;
}
.rightpanel-inner.active{
    display:block;
}
.rightpanel-inner-edit.active{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 600px) {
    .rightpanel{
        width:190px;
        right: -190px;
    }
}
@media (max-width: 370px) {
    .rightpanel{
        width:200px;
        right: -200px;
    }
}


.play-mode .rightpanel-tab-icons,
.play-mode .rightpanel-tab-chat {
    display: none;
}

/* Right-panel edit */
.rightpanel-inner .form-group-btn{
    text-align:center;
}

.rightpanel-inner-help .form-group-btn{
    margin-top:15px;
}

/*
.change-layer-opacity .custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
}*/

.form-group-opacity label{
    width:98%;
}

.rightpanel .hiddenTabContent
{
    display: none;
}

.rightpanel .first-modal-recomm
{
    border: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 100% !important;
    padding: 5px;
    background: content-box;
}

.rightpanel .modal-recomm .users-info,
.rightpanel .modal-recomm .buttons .butt
{
    background-color: #809aa9;
}

.rightpanel .messages_box .content .message_item
{
    background: #809aa9;
    color: #ffffff;
}

.rightpanel .chat-wrapp
{
    background-color: #809aa9;
}

.rightpanel .message-info-wrapp p.message-info span
{
    color: #fff !important;
}

.rightpanel .message-info-wrapp p.message-text
{
    color: #fff !important;
}

.rightpanel .friends-list-wrapper ul.main-list li
{
    background-color: #809aa9;
}

.rightpanel .friends-name-wrapp h3.friends-name span
{
    color: #fff;
}

.rightpanel .rec_attachment span
{
    color: #000;
}

.rightpanel  .chat-header
{
    background-color: unset;
}

.rightpanel .chat-header h4
{
    color: #404952;
    font-weight: bold;
}

.rightpanel .messages-wrapp .without-photo-message
{
    background-color: #bfcad0;
    color: #fff;
}

.rightpanel .messages-wrapp .with-photo-message
{
    background-color: #809aa9
}

.rightpanel .type-message-header
{
    background-color: #809aa9;
}

.rightpanel .notices
{
    position: unset;
    top: 0;
    right: 0;
}

.rightpanel .messages_box
{
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    transform: unset;
}

.rightpanel #messages_box_block
{
    left: 0;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative;
    transform: unset;
    padding: 0;
}

.rightpanel #messages_box_dialog_block
{
    position: relative;
    width: 100% !important;
    height: 100%;
    top: 0;
    left: 0;
    max-width: unset;
    overflow: unset;
}

.rightpanel form.type-message
{
    position: relative;
    bottom: 0;
    width: 100%;
    height: 20%;
}

.rightpanel .friends_block
{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rightpanel .friends_block .transparent-block
{
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    position: relative;
}

.rightpanel #new_messages_count_in_tab
{
    display: inline-block;
    background: red;
    margin-top: 3px;
    width: 13px;
    height: 13px;
    line-height: 13px;
    color: #fff;
    border-radius: 6px;
    font-size: 8px;
}

/* LEFT BLOCK */
#infolineLeft
{
    left: -390px;
}

#infolineLeft .rightpanel-tabs
{
    left: 384px;
}

#infolineLeft .rightpanel-tabs .rightpanel-tab
{
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}

#infolineLeft .rightpanel-toogle
{
    left: 390px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

#infolineLeft .main-content
{
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    max-height: unset;
    width: 100%;
    max-width: unset;
    background: unset;
}

#infolineLeft .main-content .left-part{
    width: 100%;
    max-width: unset;
}

#infolineLeft .personal-info h3, #infolineLeft .personal-info span.town,  #infolineLeft .personal-info li, #infolineLeft .personal-info span.number,
#infolineLeft .profile_likes .sum_block, .profile_likes .values_block span
{
    color: #666 !important;
}

#infolineLeft .personal-info span.number
{
    border: 2px solid #666;
}

#infolineLeft #edit_profile_block
{
    position: relative;
    width: 100%;
    border: unset;
    background: unset;
}

#infolineLeft .rightpanel-inner
{
    overflow-y: unset;
}

#infolineLeft .albums_list
{
    position: relative;
    top: 10px;
    width: 100%;
    height: calc(100% - 30px);
    margin: 0;
    padding: 0;
    background: unset;
}

#infolineLeft #groups_list_block
{
    position: relative;
    top: 0;
    left: 0;
    margin-top: 10px;
    width: 100% !important;;
    height: 100%;
    padding: 0;
    border: unset;
    background: unset;
}

#infolineLeft .group-page-wrapp header .group-name h3
{
    color: #809aa9;
}

#infolineLeft form#user_profile
{
    position: relative !important;
    left: unset !important;
    top: 0 !important;
}

#infolineLeft .first-modal-recomm h2.head-modal-recomm
{
    color: rgb(128, 154, 169) !important;
}

.modal-tab-wrapp#map_canvas canvas
{
    position: relative;
}

#tab_content_userProfile
{
    height: 100%;
    overflow-y: scroll !important;
}

.about-company__person
{
    background: #809aa9;
}

#infolineLeft div.links
{
    padding: 1px 0 1px 0;
    background: #809aa9;
}

#infolineLeft div.links ul
{
    margin: 5px;
}

.recommendedProfileInfo
{
    top: 0;
    position: absolute;
    right: 0;
}

.recommendedProfileInfo h4 span
{
    margin-top: 3px;
}

#map_canvas ul.nav
{
    margin-bottom: unset !important;
    height: 34px !important;
}

#map_canvas .ol-viewport
{
    height: calc(100% - 34px) !important;
}

.modal-tab-wrapp
{
    overflow-y: hidden !important;
}

#map_canvas #close_map
{
    top: -25px !important;
    left: calc(100% - 25px) !important;
}

div.rightpanel-toogle.rightBlock[data-state="0"],
div.rightpanel-toogle.leftBlock[data-state="0"]
{
    display: none !important;
}

div.leftBlock.rightpanel-tab{
    transform: rotate(180deg);
}

div.leftBlock .selected-profs
{
    display: block;
    float: right;
    width: 100%;
    margin-top: -10px;
    margin-bottom: 15px;
}

div.leftBlock .selected-profs .selected-prof
{
    display: block;
    float: right;
    background: #9c9c9c;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    padding: 3px 7px 2px 7px;
    margin: 0 0 5px 7px;
    border-radius: 7px;
}

div.leftBlock .selected-profs .selected-prof .prof-remove
{
    cursor: pointer;
    margin-left: 5px;
}