Просмотр архива CMS-Social v3

/**
* Theme Name: Just Web
* Version: 1.0.0
* Status: beta
* Author:
alex-borisi
* Author URI: https://andryushkin.ru
* Description:
Адаптивный шаблон WEB / Tablet / Mobile, с
поддержкой Ajax технологий CMS-Social v3,
создано специально для релизов
системы.
*/

html, body {
    height: 100%; 
}

body {
    margin:
0; 
    padding: 0; 
    font-family: 'Roboto', sans-serif;
    font-size:
14px; 
    width: 100%; 
    background-color: #f5f6f8; 
    padding-top:
60px;
    display: flex;
    flex-direction: column;
}

* {
    box-sizing:
border-box;
}

p {
    margin: 0; 
}

img {
    vertical-align:
middle;
}

a {
    text-decoration: none; 
    color: #42a4dd;

}

#ds_alerts {
    position: fixed;
    right: 20px;
    top: 60px;
   
margin: 0 auto;
    height: 1px;
    display: flex;
    flex-direction:
column;
    justify-content: flex-start;
}

.alert {
    padding: 10px
15px;
    background-color: #eeeeee;
    color: black;
    border-radius:
3px;
    margin: 4px 0;
}

.alert-success {
    background-color: #70b570;

    color: white; 
}
.alert-error {
    background-color: red; 
    color:
white; 
}

.form-group {
    margin: 10px 0; 
    padding: 0 10px;

}

.form-group input, 
.form-group textarea {
    margin: 0;

}

.form-group:first-child {
    /* margin-top: 0px;
*/
}
.form-group:last-child {
    margin-bottom: 0px; 
}

.input-group
input[type="radio"] {
    margin: 0; 
}

label {
    display:
inline-block;
    margin: 5px 0;
    cursor: pointer;
}

select, 
button {

   vertical-align: sub;
}

input[type=checkbox] {
    box-sizing:
border-box;
    border: 1px solid #e6e6e6;
    margin-right: 4px;
   
vertical-align: middle;
}

input[type=radio] {
    margin: 8px 0;
   
box-sizing: border-box;
    border: 1px solid #e6e6e6;
    margin-right:
4px;
    vertical-align:
sub;
}

input[type=tel],
input[type=email],
input[type=password],
input[type=text]
{
    width: 100%;
    max-width: 100%; 
    padding: 8px;
    margin: 8px
0;
    box-sizing: border-box;
    border: 1px solid #e6e6e6;
   
border-radius: 3px;
    display: block;
}

input:focus { outline:none;
}

textarea, 
select {
    border-radius: 3px;
    padding: 4px;
   
margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid
#e6e6e6;
}

textarea {
    height: 80px; 
    width: 100%; 
}

code {
   
padding: 0 !important;
    overflow-x: auto;
    display: block;
   
background: #f1f4f5 !important;
}

pre {
    padding: 15px;
    background:
#f1f4f5 !important;
    font-size: 12px;
        white-space:
pre-wrap;
}

body .fa {
    font-size: 20px;
    vertical-align:
middle;
}

textarea::-webkit-scrollbar {
    width: 0;

}
div::-webkit-scrollbar {
  width: 4px;
}
 
div::-webkit-scrollbar-track
{
  
}
 
textarea::-webkit-scrollbar-thumb, 
div::-webkit-scrollbar-thumb
{
  background-color: rgba(162, 193, 212,
0);
}
textarea:hover::-webkit-scrollbar-thumb,
div:hover::-webkit-scrollbar-thumb
{
  background-color: rgba(162, 193, 212, .4);
}

.container {
   
max-width: 1170px;
    margin: 0 auto;
    width: 100%; 
}


.block__flex,

.header, 
.wrap_content {
    position: relative;
    display:
flex;
}

.wrap_content {
    flex: 1;
}

.page_content {
    flex: 1;
   
order: 2;
}

.header-logo, 
.page_sidebar {
    width: 250px;
    order:
1;
}

.header-search {
    flex: 1;
    order: 2;
}

.header-nav {
   
order: 3;
}

.block__flex-content {
    order: 1; 
    flex:
1;
}
.block__flex-action {
    order: 2; 
    width: 200px; 
}

.d-block {

   display: block; 
}

.text-center {
    text-align:
center;
}

.counter[data-count="0"] {
    display: none
!important;
}

.wrap_header,
.wrap_sidebar,
.wrap_content {
   
background-color: #fff; 
}

.wrap_header {
    border-bottom: 1px solid
#efefef;
    background-color: #fff;
    position: fixed;
    top: 0px;
   
width: 100%;
    z-index: 10;
    height: 60px;
}

.header-logo a {
   
display: inline-block;
    line-height: 60px;
    font-size: 24px;
   
font-family: serif;
    font-weight: bold;
    padding: 0px
20px;
}

.header-logo a span {
    vertical-align: super;
    line-height:
24px;
    font-size: 16px;
    color: lightgray;
}

.header-nav {
   
display: flex;
    justify-content: flex-end;
    width: 250px;
   
align-items: center;
}

.header-nav a {
    display: inline-block;
   
padding: 10px;
    position: relative;

}

.header-nav i::before {
   
font-size: 28px;
    margin: 0;
    color: #8acbf1;
}

.header-nav .counter
{
    display: inline-block;
    font-size: 10px;
    line-height: 11px;
  
 color: #fff;
    background-color: #fa3e3e;
    padding: 2px 5px;
   
border-radius: 3px;
    position: absolute;
    top: 0px;
    right:
-5px;
}

.header-search {
    display: flex;
    justify-content:
space-between;
    align-items: center;
}

.header-search form {
    flex:
1;
    background-color: inherit;
    border: 0;
}
.header-search
input[type="search"] {
    width: 100%;
    padding: 10px 0;
   
border: 0;
    border-bottom: 1px solid #efefef;
}

.header-people {
   
padding: 8px 30px;
    text-align: center;
    width:
250px;
}

.header-people a {
    text-align: center;
    font-family:
sans-serif;
    display: inline-block;
}

.header-people strong {
   
font-size: 20px;
    display: block;
}

.header-people span {
   
font-size: 14px; 
    color: gray;
}



.header-music {
    width: 48px;
  
 height: 48px;
    position: relative;
    margin: 0
20px;
}

.header-player-toggle {
    border: 1px solid #43a4dd;
    color:
#43a4dd;
    display: inline-flex;
    align-items: center;
   
justify-content: center;
    height: 100%;
    width: 100%;
   
border-radius: 6px;
    margin: 0;
}

.header-player-toggle i::before {
   
font-size: 28px;
}

.header-music .dpl {
    display: inline-block;
   
width: auto;
    position: absolute;
    right: -20px;
    top: 12px;
   
display: none;
}

.header-music .dpl-toggle {
    width: 24px;
    height:
24px;
    line-height: 23px;
    color: #eaf3ff;
    background-color:
#43a4dd;
}

.header-player {
    position: absolute;
    top: 60px;
   
right: 0px;
    width: calc(100% - 250px);
    flex-direction: column;
   
max-height: 70vh; 
    box-shadow: 0px 12px 17px #e4e4e4;
   
border-radius: 0 0 3px 3px;
    overflow: hidden;
}

.header-player,

#header-player-toggle {
    display:
none;
}

#header-player-toggle:checked ~ .header-player {
    display:
flex;
}

.dpl.dpl-header {
    background-color: #f8fdff;
    padding:
10px;
    justify-content: flex-start;
    border-bottom: 1px solid
#efefef;
}

.dpl-header .dpl-progress {
    width: 100%;
}

.dpl-header
.dpl-time {
    display: inline-block;
} 
.dpl-header .dpl-title {
   
position: relative;
    display: inline-block;
    width: calc(100% -
54px);
    left: 0;
}

.dpl-header .dpl-volume, 
.dpl-header .dpl-progress
{
    height: 4px; 
}

.dpl-header .dpl-toggle {
    width: 42px;
   
height: 42px;
    line-height: 40px;
    font-size: 16px;
}

.dpl-header
.dpl-group {
    width: 400px;
    margin: 0 10px;
    flex:
1;
}

.music_playlist {
    overflow: auto;
    background-color: #fff;
   
padding: 8px;
    flex: 1; 
}

.music_playlist .dpl {
    justify-content:
flex-start;
    padding: 4px
}

.music_playlist .dpl.ds-playing,

.music_playlist .dpl:hover {
    background-color: #f0f4f9; 
   
border-radius: 3px;
}
.music_playlist .dpl-title {
    width: 300px;
   
position: relative;
    left: unset;
    top: unset;
    margin-left:
10px;
}
.music_playlist .dpl-title:hover {
    text-decoration:
underline;
}

.justweb-player-title {
    position: absolute;
    top: 3px;

    left: 50px;
}

.page_sidebar {
    padding: 20px;
    box-shadow: 1px
0px 4px -1px #d0d0d0;
    z-index: 2;
}

.sidebar_profile .nickname {
   
font-size: 17px;
}

.sidebar_profile .avatar {
    border-radius:
50%;
}


.sidebar_nav {
    margin: 15px 0; 
}

.sidebar_nav a {
   
display: block;
    margin: 5px 0;
    padding: 5px 10px;
}
.sidebar_nav
a:hover {
    background-color: #e9f3ff; 
    border-radius: 3px;
   
transition: .5s;
}

.sidebar_nav .counter {
    display: inline-block;
   
font-size: 14px;
    line-height: 17px;
    color: #fff;
   
background-color: #42a4dd;
    padding: 2px 8px;
    border-radius: 12px;
 
  vertical-align: middle;
    float: right;
    margin-top:
5px;
}

.sidebar_nav .link_title {
    display: inline-block;
   
margin-left: 15px;
    font-size: 14px;
    vertical-align:
middle;
}

.sidebar_nav i::before {
    margin-left: 0;
    font-size:
28px;
    vertical-align: middle;
}
.sidebar_nav-mail i::before {
   
color: #347bcb; 
}
.sidebar_nav-files i::before {
    color: #ff6204;

}
.sidebar_nav-photos i::before {
    color: #199c7f;

}
.sidebar_nav-music i::before {
    color: #7f9c19; 
}

.block__flex {
  
 height: 100%;
}
.block__flex-action {
    border-left: 1px solid
#efefef;
}



.ds-select {
    padding: 0 15px;
    background-color:
#ebf9ff;
}

.ds-select-item {
    display: inline-block;
    padding: 15px
10px; 
    margin-right: 10px;
}
.ds-select-item:hover {
    box-shadow:
0px -2px 0px inset lightgray;
}
.ds-select-item.active {
    box-shadow:
0px -2px 0px inset #42a4dd;
}

.ds-select-counter {
    color: #9c9c9c;
   
display: inline-block;
    margin-left: 2px;
}

.menu-nav_friends {
   
display: block;
    margin: 10px 0;
    padding: 0
15px;
}

.menu-nav_friends li {
    display: inline-block;
   
vertical-align: middle;
    margin-right: 5px;
    position: relative;
   
background-color: #fff;
}

.menu-nav_friends > li {
   
background-color: #f3f3f3;
    border-radius: 3px;
    box-shadow: 1px 2px
2px -1px #bfbfbf;
}

.menu-nav_friends li a {
    display: inline-block;
  
 padding: 5px 10px;
    color: black;
}

.menu-nav_friends li.has-children
> a {
    padding-right: 5px;
}

.menu-nav_friends
li.has-children::after {
    display: inline-block;
    width: 27px;
   
height: 27px;
    text-align: center;
    font: normal normal normal 14px/1
FontAwesome;
    content: "\f0dd";
    cursor: pointer;
   
vertical-align: top;
    line-height: 23px;
}

.menu-nav_friends .submenu
{
    display: none;
    margin: 0px;
    padding:
0px;
}

.menu-nav_friends > li > .submenu {
    border: 1px solid
gray;
    position: absolute;
    top: 100%; 
    left: 0px;
    width:
100%;
}

.menu-nav_friends .submenu li {
    display:
block;
}

.menu-nav_friends .submenu li a {

}

.menu-nav_friends
li.has-children:hover > .submenu {
    display:
block;
}





.ds-checkbox {
    position: relative;
    vertical-align:
middle;
}

.ds-checkbox input[type="checkbox"] {
    display:
none;
}

.ds-checkbox span {
    font: normal normal normal 14px/1
FontAwesome;
    height: 24px;
    width: 24px;
    background-color:
#fdfdfd;
    border-radius: 50%;
    display: inline-block;
   
line-height: 22px;
    text-align: center;
    border: 1px solid
#d0d0d0;
}

.ds-checkbox span::after {
    content: "\f00c";
   
color: #eaeaea;
}
.ds-checkbox:hover span {
    opacity: .9;

}
.ds-checkbox input[type="checkbox"]:checked + span {
   
background-color: #edf8ff;
    border-color: #3996cc;
}
.ds-checkbox
input[type="checkbox"]:checked + span::after {
    color:
#3996cc;
}

.ds-checkbox-image {
    width: 48px; 
    height: 48px;
   
border-radius: 3px;
    background-color: #edf8ff;
    background-position:
center;
    background-size: cover;
}

.ds-checkbox-image span {
   
position: absolute;
    top: 2px;
    right: 2px;
    font-size: 8px;
   
border-radius: 2px;
    height: 16px;
    width: 16px;
    line-height:
14px;
    opacity: 0; 
}
.ds-checkbox-image
input[type="checkbox"]:checked + span {
    opacity:
1;
}

.wrap-page-mail {
    display: flex;
    flex-direction: column;
   
height: 100%;
    position: relative;
    justify-content:
flex-end;
}

body.ds-page-mail {
    overflow: hidden;
    padding-top:
0;
}


body.ds-page-mail .wrap_header {
    position:
relative;
}

body.ds-page-mail .footer {
    display:
none;
}
body.ds-page-mail .comments-form { 
    order: 2;
    padding:
10px; 
}

.mail_Pagination-helper {
}

.wrap-messages {
    order: 1;
   
overflow-y: auto;
}

.ds-messages {
    padding: 10px;
    display: flex;
 
  flex-direction: column;
}

.ds-messages-post {
    padding: 10px;
   
display: inline-flex;
}

.no-read .ds-messages-post {
    background-color:
#f0f6fd;
    border-radius: 6px;
}

.ds-message-photo {
    margin-right:
15px;
}

.ds-message-photo .avatar-thumbnail {
    width: 34px; 
   
height: 34px; 
    object-fit: cover; 
    border-radius: 50%; 
   
font-size: 20px;
}

.ds-message-text {
    margin-top: 10px;
   
word-break: break-word;
}

.ds-messages-post .dpl {
    margin: 5px 0;
   
min-width: 250px;
}

.ds-messages-post .dpl-toggle {
    height: 24px;
   
width: 24px;
    line-height: 24px;
    border: 0;
}

.ds-messages-post
.dpl-time {
    font-size: 11px;
    width: auto;
}

.ds-messages-post
.dpl-title {
    top: 5px; 
    font-size: 10px; 
    line-height: 10px; 
 
  left: 31px;
    width: calc(100% - 60px);
}

.ds-messages-post .dpl-title
+ .dpl-progress {
    margin-top: 11px;
}

.ds-messages-post .dpl-progress
{
    width: calc(100% - 60px);
    height: 5px;
}

.ds-messages-post
.dpl-volume {
    display: none;
}


.ds-contact-text {
    height: 22px;
 
  white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
 
  max-width: 200px;
    padding: 2px 5px;
}

.ds-contact-text.no-read {
   
background-color: #f0f6fd;
    border-radius:
5px;
}




.ds-messages-attachments {
    margin-top: 10px;
    max-width:
640px;
    overflow: hidden;
}

.attachments:not(:empty) {
    margin-top:
20px; 
    padding: 0 20px; 
    text-align: center;
    margin-bottom:
-10px;
}


.ds-auth-form {
    padding: 50px;
}

.ds-auth-input-password
label,
.ds-auth-input-login label {
    width: 200px;
    display:
inline-block;
    text-align: right;
}

.ds-auth-input-remember
input[type=checkbox] {
    margin: 10px
0;
}

.ds-auth-input-remember::before, 
.ds-auth-submit::before {
   
display: inline-block;
    width: 200px; 
    content:
"";
}


.msg, 
.err {
    padding: 7px 0;
    background-color:
#ef7373;
    color: #fff;
    text-shadow: 1px 1px 1px #4a4a4a;
   
text-align: center;
}
.msg {
    background-color: #4dbf9a;
}

.header
.err,
.header .msg {
    border-left: 1px solid #e8e8e8;
    border-right:
1px solid #e8e8e8;
}

.ds-profile-avatar, 
.ds-profile-title, 
.empty,

.admin_menu,
.mess, 
.foot, 
.main, 
.main2, 
.main_menu, 
.nav2, 
.nav1
{
    position: relative;
    padding: 10px;
    margin: 10px;
   
box-shadow: 0px 2px 3px #d6d6d6;
    clear: both;
    word-break:
break-all;
}

.ds-profile-menu {
    display: block;
    border-bottom: 1px
solid #e8e8e8;
    padding: 5px; 
}

.ds-profile-menu a {
    display:
block;
    padding: 10px;
    font-size: 14px;
}

.ds-profile-group a {
   
display: inline-block;
}

.ds-profile-menu a:hover {
   
/*background-color: #fdfdfd;*/
}
.ds-profile-menu a:last-child {
   
/*border-bottom: 0;*/
}

.ds-profile-menu a .counter {
    color:
#000;
}

form .main {
    padding-left: 0; 
    padding-right: 0;

}

.ds-profile-menu:nth-of-type(odd), 
.ds-profile-title, 
.nav1 {
   
background-color: #f4fdff; 
}

.main_menu {
    background-color:
#f9f9f9;
}

.foot {
    background-color: beige;
}

.nav1 .icon, 
.nav2
.icon {
    vertical-align: text-top;
}

.nav1 .image-avatar::before,
.nav2
.image-avatar::before {
    content: ""; 
}

img.avatar {
   
object-fit: cover;
    border-radius: 4px;
    border: 1px solid #afafaf;
 
  margin-right: 6px;
    margin-bottom: 4px;
}

span.avatar {
    display:
inline-flex;
    vertical-align: middle;
    font-size: 28px;
   
align-items: center;
    justify-content: center;
    color: #fff;
   
margin-right: 5px;
    border-radius: 50%;
    text-transform: uppercase;
 
  font-family: serif;
    text-shadow: 1px 1px 1px
#3c3c3c;
}

img.avatar-thumbnail,
.avatar-thumbnail {
    width: 50px; 
   
height: 50px; 
    border-radius: 50%;
}

.avatar-medium {
    width:
220px; 
}

span.avatar-medium {
    height: 128px;
    width: 128px;
   
border-radius: 3px;
    background-color: #def6fb !important;
    border:
1px solid #accee2;
    font-size: 40px;
    flex-direction:
column;
}
span.avatar-medium::after {
    font-family: Flaticon;
   
content: "\f183";
    font-size: 18px;
}

.nav1 div.right,
.nav2
div.right {
    position: absolute;
    right: 0px; 
    top: 0px;
}

.nav1
div.right a,
.nav2 div.right a {
    display: inline-block;
    padding:
4px 6px;
}

.tpanel, 
.menus {
    display: flex;
    padding: 5px;
   
flex-wrap: wrap;
}

.tpanel .tmenu, 
.menus .webmenu {
    display:
inline-block;
}

.tpanel .tmenu a, 
.menus .webmenu a {
    padding: 5px
10px;
    display: block;
    background-color: #42a4dd;
    color:
#ffffff;
    margin: 5px;
    border-radius: 2px;
}

.tpanel .tmenu
a.activ, 
.menus .webmenu a.activ {
    background-color: #e5f5ff;
   
color: #42a4dd;
    cursor: text;
}

form .tpanel {
    padding: 0;

}

.copyright {
    background-color: #42a4dd;
    padding: 10px 0;
   
text-align: center;
    color: #fff;
}

.copyright a {
    color:
#fff;
}

.header-title {
    position: relative;
    padding: 0; 
   
width: 100%; 
    background-color: #666666;
    color: #fff;
   
border-right: 1px solid #e8e8e8; 
    border-left: 1px solid #e8e8e8;

}

.header-title .title {
    text-align: center;
    width: calc(100% -
100px); 
    height: 34px; 
    line-height: 34px;
    margin: 0 auto;
   
padding: 0;
}

.header-title .link-home {
    position: absolute;
    top:
0; 
    left: 0; 
    display: inline-block;
    height: 34px;
    width:
34px;
    padding: 9px
}

.header-user-panel {
    display: flex;
   
width: 100%;
}

.header-user-panel > div {
    display: inline-block;
  
 flex-basis: 100%;
    text-align: center;
    border-right: 1px solid
#e8e8e8;
}

.header-user-panel > div a {
    display: block;
   
padding: 5px 0 5px 0;
    background-color: #42a4dd;
}

.header-user-panel
> div a:hover {
    background-color: #59b5eb;
}

.header-user-panel
> div:last-child {
    border-right: 0;
}

.header-user-panel .counter
{
    color: #f9f9f9; 
    display: inline-block;
    margin-left:
2px;
}

.c2, 
.nav {
    padding: 10px; 
    margin: 0; 
}

.c2 .page,

.nav li {
    display: inline-block;
    text-align: center;
   
margin-right: 5px;
}

.c2 .page a, 
.nav li.nav-number, 
.nav li a {
   
display: inline-block;
    padding: 5px 10px;
    color: #42a4dd;
   
background-color: #e9f3ff;
    border-radius: 2px;
}

.nav li.nav-number {

   color: #fff;
    background: rgb(60, 60, 60);
    border-color:
#313131;
}
.nav li.nav-dots {
    padding: 5px;
}

.yashare-auto-init {
   
display: inline-block;
    vertical-align: middle;
}

.b-share__handle {
  
 float: none !important;
    height: auto !important;
    padding: 5px 3px
5px 2px !important;
    cursor: pointer !important;
    text-align: left
!important;
    text-decoration: none!important;
    display: inline-block
!important;
}

.button, 
input[type="submit"] {
    display:
inline-block;
    font-family: arial,sans-serif;
    font-size: 12px;
   
color: rgb(255 255 255);
    text-decoration: none;
    user-select: none;

   line-height: 2em;
    padding: 3px 8px;
    outline: none;
   
border-radius: 3px;
    background-color: #42a4dd;
    border: 0;
   
margin: 8px 0;
    cursor: pointer;
}

.button:hover,

input[type="submit"]:hover {
    background-color:
#40a7de;
}

.button:focus:not(:active),
input[type="submit"]:focus:not(:active)
{
    box-shadow: inset 0 1px 3px rgba(7, 62, 117, 0.5), 0 1px rgb(179,
211, 241), 0 0 1px rgb(72, 138, 206);
    pointer-events:
none;
}

.button:focus:not(:active),
input[type="submit"]:active
{
    box-shadow: inset 0 1px 3px rgba(4, 53, 103, 0.5), 0 1px rgb(75, 116,
152), 0 0 1px rgb(41, 91, 142);
}

.ds-uploader,

form[name="message"] {
    padding: 10px;
}
/*
.comments-form {

   border-top: 1px solid #ececec;
    background-color: #fbfdff;
   
padding-bottom: 20px;
} 
*/

.ds-comments {
    margin-top:
20px;
}

.form-plugins-upload form {
    padding: 20px;
    text-align:
center;
}

.ds-link-delete {
    color: red; 
}

.breadcrumb {
   
background-color: #e9f3ff; 
    padding: 10px;
}

.breadcrumb .fa {
   
color: #42a4dd;
}

 
.list {
    background-color: #fff;
    box-sizing:
border-box;
}

.list .list-item {
    margin: 10px;
    box-shadow: 1px 1px
4px #e6e6e6;
}

.list .list-item a {
    background-color: #ffffff;

}

.list .list-item a:hover {
    background-color: #f7f7f7;

}

.list.list-terms a .fa {
    font-size: 20px;
}

.list.list-files
.list-item-title {
    vertical-align: top; 
}

.list-item-link {
   
display: block;
    padding: 10px; 
}

.list-item-link .fa {
    font-size:
16px;
    color: #42a4dd;
    margin-right: 5px;
}

.list-item-counter {
  
 background-color: #9c9c9c;
    color: #fff;
    border-radius: 8px;
   
display: inline-block;
    padding: 0 8px;
    vertical-align: middle;
   
line-height: 16px;
    font-size: 13px;
    margin-left: 3px;
    float:
right;
}


.list-empty {
    margin: 10px;
    padding: 10px; 
   
background-color: #fff;
    box-sizing: border-box;
    -webkit-box-shadow:
0px 3px 5px rgba(93,109,157,0.3);
    -moz-box-shadow: 0px 3px 5px
rgba(93,109,157,0.3);
    box-shadow: 0px 3px 5px
rgba(93,109,157,0.3);
}

.list-item-player {
    padding:
10px;
}

.ds-editor {
    margin-bottom: 10px;
}

.ds-editor-panel {
   
margin-bottom: 3px;
}

.ds-editor-textarea {
    display: block
!important;
    height: 115px;
    width: 100%; 
    border-color:
#e6e6e6;
    outline: none;
}

.textarea-panel {
    position: absolute;
  
 bottom: 10px;
    right: 18px;
}

.textarea-panel span {
    padding:
5px;
    color: #79a7b6;
    cursor: pointer;
    opacity:
.8;
}
.textarea-panel span:hover {
    opacity:
1;
}

.ds-comment-form-textarea
.ds-editor-smiles,
.ds-comment-form-textarea .ds-editor-panel {
   
display: none;
}

.ds-comment-form[data-panel="bbpanel"]
.ds-comment-form-textarea .ds-editor-panel  {
    display:
block;
}
.ds-comment-form[data-panel="smiles"]
.ds-comment-form-textarea .ds-editor-smiles  {
    display:
block;
}
.ds-comment-form[data-panel="smiles"]
.smile-panel-toggle,
.ds-comment-form[data-panel="bbpanel"]
.bb-panel-toggle {
    opacity: .4;
}

.ds-comment-form-attach {
   
position: absolute;
    z-index: 1;
    left: 10px;
}

.ds-editor-panel a
{
    display: inline-flex;
    height: 28px;
    width: 28px;
   
justify-content: center;
    align-items: center;
    background-color:
white;
    vertical-align: middle;
    border-radius: 3px;
    border: 1px
solid #c3cdd4;
}


.ds-colorpicker-toggle {
    padding: 6px 10px;
   
background-color: #79a6b5;
    border-radius: 3px;
    display:
inline-block;
    color: #fff;
    float: right;
    cursor:
pointer;
}
.ds-colorpicker-toggle:hover {
    background-color: #72a1b1;

}

.ds-copyright {
    text-align: center;
}

.ds-copyright a {
    color:
gray; 
    font-size: 11px;
}



.ds-uploader-file {
    border: 2px dashed
#dedede;
    width: 100%; 
    margin-bottom: 10px;
    text-align:
center;
    padding: 20px 0;
}


.ds-uploader-file::before {
    display:
block;
    width: 100%;
    font-size: 24px; 
    color: #dedede; 
   
content: "Drag & Drop"; 
    line-height:
40px;
}

.ds-uploader-file.is-dragover {
    border: 2px dashed #42a4dd;
  
 background-color: #fff;
}

.ds-uploader-file.is-dragover::before {
   
color: #42a4dd;
}

.ds-uploader-info {
    display: block;
    color:
gray;
}

.ds-uploader-file input[type="file"] {
    position:
absolute;
    margin-left: -9999px;
}

.ds-uploader-select {
    padding:
10px;
    background-color: #ffffff;
    border-radius: 4px;
    display:
inline-block;
    border: 1px solid #42a4dd;
    color: #42a4dd;
   
margin: 10px 0;

}

.ds-files-list {
    border: 1px solid
#e4e4e4;
}


.ds-files-list:empty {
    display: none;
}

.ds-thumbnail {
 
  height: 50px;
    width: 50px;
    object-fit: cover;
    border-radius:
3px;
    background-color: #f9f9f9;
}

.attachment {
    padding: 10px;
   
/* margin: 10px 0; */
    background-color: #fbfdff;
    border-bottom: 1px
solid #e4e4e4;
    position: relative;
    display: flex;
    flex-wrap:
wrap;
}

.attachment-title {
    display: inline-block;
    width:
calc(100% - 54px);
}

.attachment-error .attachment-title {
   
text-decoration: line-through;
    color: gray; 
}

.attachment-image {
   
display: inline-block; 
    margin-right: 10px;
    height: 44px;
   
width: 44px;
}

.attachment-image img {
    height: 100%; 
    width: 100%;

    object-fit: cover;
    border-radius: 3px;
}

.progress {
   
position: relative;
    width: 100%;
    height: 8px;
    border: 0px solid
#dee6f1;
    background-color: #e9eff7;
    border-radius: 3px;
   
overflow: hidden;
    margin-top: 5px;
    box-shadow: 0 0 4px inset
#d2e3f7;
}

.progress-bar {
    width: 0%;
    background-color: #42a4dd;
 
  height: 8px;
}

.attachment-error .progress {
    display: none;

}

@keyframes progress_animation {
  0% {
    background-position: 0 0;
 
}
  100% {
    background-position: 40px 0;
 
}
}

[data-status="wait"] .progress-bar:after
{
 
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15)
25%,transparent 25%,transparent 50%,rgba(255,255,255,.15)
50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
 
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15)
25%,transparent 25%,transparent 50%,rgba(255,255,255,.15)
50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
 
background-image: linear-gradient(45deg,rgba(255,255,255,.15)
25%,transparent 25%,transparent 50%,rgba(255,255,255,.15)
50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
 
-webkit-background-size: 40px 40px;
  background-size: 40px 40px;
 
position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
 
height: 100%;
  animation: progress_animation 0.8s linear
infinite;
}

[data-status="uploaded"] .progress-bar {
   
background-color: #61a961;
}
[data-status="error"] .progress-bar
{
    background-color: #afafaf;
}

.attachment-error-message {
    color:
red; 
    padding: 3px 0;
}

.ds-icon {
    height: 44px;
    width: 44px;

   display: inline-block;
    background-image:
url(images/paper-clip.png);
    background-position: center;
   
background-repeat: no-repeat;
    background-color: #f7f7f7;
   
border-radius: 4px;
}

.ds-actions {
    display: block;
    padding: 0
10px;
    margin: 10px 0;
}


.ds-actions a {
    display: inline-block;
  
 padding: 10px 10px;
    color: #42a4dd;
    background-color: #e9f3ff;
   
border-radius: 3px;
    margin-right: 10px;
}

.ds-actions a:hover {
   
background-color: #deedff; 
}

.ds-actions .fa {
    margin-right: 5px;
   
font-size: 10px;
    color: #2f85b7;
    width: 22px;
    height: 22px;
   
display: inline-flex;
    text-align: center;
    border: 1px solid;
   
align-items: center;
    justify-content: center;
    border-radius:
50%;
}


/** 
* Box Group 
*/ 

.box-group-wrap {
    padding:
10px;
}

.box-group {
    background-color: #fff; 
    box-sizing:
border-box;
    -webkit-box-shadow: 0px 3px 5px rgba(93,109,157,0.3);
   
-moz-box-shadow: 0px 3px 5px rgba(93,109,157,0.3);
    box-shadow: 0px 3px
5px rgba(93,109,157,0.3); 
    margin-bottom: 10px;

}

.box-group:last-child {
    margin-bottom: 0;
}

.box-group-form form
{
    padding: 10px; 
}

.box-group-title {
    padding: 10px;
   
background-color: #d9f4ff;
}

.box-group-title .fa {
    color: #42a4dd;
  
 font-size: 18px;
    margin-right: 5px;
}

.box-group-links {
    display:
flex;
}

.box-group-links .box-link {
    display: block;
    padding:
10px;
    flex-grow: 1;
}

.box-group-links .box-link .fa {
    width:
22px;
}

.box-group-links .box-link.disabled {
    color: #c7c7c7; 
   
cursor: text; 
}

.box-group-center .box-link {
    text-align:
center;
}

.box-group-links .box-link + .box-link {
    border-left: 1px
solid #e8e8e8;
}

.box-group-links .box-link:active {
    background-color:
#f0f9ff;
    box-shadow: inset 0px 3px 5px #a9cddc;
}

.box-group-links
.box-link.disabled:active {
    box-shadow: initial; 
    background-color:
initial;
}

.box-group-links .box-link .fa-trash {
    color:
#ff6363;
}

.box-link-text {
    display: inline-block;
    vertical-align:
middle;
}

.box-group-block {
    display: block;
    padding:
10px;
}
.box-group-block > img {
    max-width: 100%; 
    max-height:
500px;
    display: block;
    margin: 0 auto;
}

.box-meta {
    margin:
5px 0;
    padding: 0 10px; 
}

.box-meta-key {
    display: inline-block;

   min-width: 120px;
    color: #969696;
}

.ds-profile-box .box-meta-key
{
    min-width: 200px;
}

.box-group-description {
    padding:
10px;
}


.box-group-nav {
    color: gray;
    border-top: 1px solid red;

    border-top: 1px solid #e8e8e8;
    background: #fff;
    background:
-webkit-gradient(linear,left top,right top,from(#fff),to(#eff3f6));
   
background: -webkit-linear-gradient(top,#fff,#eff3f6);
    background:
-moz-linear-gradient(top,#fff,#eff3f6);
    background:
-o-linear-gradient(top,#fff,#eff3f6);
    background:
-ms-linear-gradient(top,#fff,#eff3f6);
    background:
linear-gradient(top,#fff,#eff3f6);
}

.box-group-nav .box-link {
    color:
#424242; 
    cursor: pointer;
}

.box-group-nav {
    background-color:
black;
}

.box-group-nav .fa {
    font-size: 16px;
    line-height: 19px;

   width: 22px;
}


[data-href] {
    cursor: pointer;
}

.post {
   
margin: 10px; 
    -webkit-box-shadow: 0px 3px 5px rgba(93,109,157,0.3);
  
 -moz-box-shadow: 0px 3px 5px rgba(93,109,157,0.3);
    box-shadow: 0px 3px
5px rgba(93,109,157,0.3); 
}

.post-header {
    display: flex;
   
padding: 10px 10px 0 10px; 
}

.mail-contacts .post-header {
    padding:
10px; 
}

.mail-contacts .post-header img.avatar {
    margin-bottom: 0;

}

.post-header-content {
    flex: 1;
}

.post-header-action {
   
position: relative;
    height: 30px;
    cursor:
pointer;
}

.post-action-toggle {
    display: inline-block;
    width:
24px;
    height: 24px;
    text-align: center;
    line-height:
24px;
}

.post-action-toggle i::before {
    color: #a5a5a5;
    font-size:
14px;
    font-weight: normal;
}

.post-action-nav {
    display: none;
   
position: absolute;
    right: -4px;
    top: 30px;
    padding: 4px 0;
   
background-color: white;
    border-radius: 3px;
    border: 1px solid
lightgray;
    width: 200px;
}

.post-action-nav::after,

.post-action-nav::before {
    position: absolute;
    pointer-events:
none;
    border: solid transparent;
    content: '';
    height: 0;
   
width: 0;
    bottom: 100%;
    top: -13px;
    right: 15px;
   
border-width: 6px;
    margin: 0 -6px;
    border-bottom-color:
#d3d3d3;
}

.post-action-nav::after {
    border-bottom-color: white;
   
top: -11px;
}

.post-header-action:hover::after {
    display: block;
   
position: absolute;
    top: 7px;
    content: " ";
    right:
-20px;
    width: 150px;
    height: 100%;
}

.post-header-action:hover
.post-action-nav {
    display: block;
    animation: HoverPostAction 200ms
ease-out;
}

.post-panel {
    border-top: 1px solid #eaecf2;
    padding:
10px;
    background-color: #f5f6f8
}



@keyframes HoverPostAction {
   
from { top: 36px; opacity: .3;  }
    to { top: 30px; opacity: 1;
}
}

.post-action-nav a {
    display: block;
    padding: 10px;
   
padding: 5px 10px;
    color: #3680ab;
}

.post-action-nav a:hover {
   
background-color: #f3f3f3; 
}

.post-content {
    padding:
10px;
}

.post_title {
    padding: 4px 0;
}
.post_date {
    color:
#929292;
}

.ds-output-images, 
.ds-grid {
    max-width: 600px;
   
display: grid;
    grid-gap: 15px;
    grid-auto-rows: 75px;
   
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
   
grid-auto-flow: dense;
    width: 100%;

}

div.output-image-vertical,
div.aligment-vertical {
    grid-row: span
2;
}

div.output-image-horisontal,
div.aligment-horisontal {
   
grid-column: span 2;
    grid-row: span 2;
}

.ds-output-images
div:nth-of-type(1),
.ds-grid-item:nth-of-type(1) {
    grid-column: span
3;
    grid-row: span 6;
}

.ds-output-images img,
.ds-grid-item img {
   
height: 100%;
    width: 100%;
    object-fit: cover;
}

.ds-output-files
div {
    margin: 5px 0;  
}

.ds-comment-form {
    display: flex;
   
justify-content: space-between;
    align-items: flex-end;
    position:
relative;
}

.ds-comment-form-textarea {
    flex: 1;
    position:
relative;
}

.ds-comment-form-textarea .ds-editor-panel {
    padding: 0
10px 10px 10px;
}

.ds-comment-form-textarea .ds-editor {
    padding: 0; 

   margin: 0;
}

.ds-comment-form-send button.button:focus:not(:active),

.ds-comment-form-send button.button:focus, 
.ds-comment-form-send
button.button:hover, 
.ds-comment-form-send button.button {
    margin: 0;

   padding: 0;
    background-color: inherit; 
    line-height: unset;
   
height: 40px;
    box-shadow: unset; 
}

.icon-comment-send {
    display:
inline-block;
    height: 40px; 
    width: 40px; 
    background-image:
url(images/comment-send.png); 
    background-position: center;
   
background-repeat: no-repeat;
}

.ds-editor-helper,

.ds-comment-form-textarea .ds-editor-textarea {
    height: 40px;
   
min-height: 40px; 
    max-height: 200px;
    border-radius: 20px;
   
margin: 0;
    padding: 10px 15px;
    font-size: 14px; 
    line-height:
18px;
    font-family: Arial, serif;
}

.ds-comment-form-textarea
.ds-editor-textarea {
    padding-left: 50px;
    padding-right:
80px;
}

.ds-editor-helper {
    height: auto;
    overflow-y: auto;
   
position: absolute;
    top: -10000px;
    left:
-10000px;
}

.ds-comment-form-attach .choose {
    height: 34px;
}



/**
*
Likes 
*/ 
.ds-like {
    display: inline-block;
    cursor: pointer;

}

.ds-like .counter {
    display: inline-block;
    vertical-align:
middle;
    font-size: 14px;
    color: #969696;
    padding: 0px
5px;
}

.icon-like {
    display: inline-block;
    width:
26px;
}

.icon-like::before {
    font: normal normal normal 24px/1
FontAwesome;
    content: "\f08a";
    display: inline-block;
   
vertical-align: middle;
}
.ds-i-liked .icon-like::before {
    content:
"\f004";
}

form.ds-reg-form {
    background-color: #fff;
   
border: 1px solid #f1f1f1;
    border-radius: 3px;
}

.ds-reg-submit,

.ds-reg-input, 
.form-group {
    margin: 15px 0;
    padding: 0px
15px;
}
.ds-reg-submit,
.form-group:last-child {
    border-top: 1px solid
#e2e2e2;
    padding-top: 15px;
    padding-bottom: 15px;
   
background-color: #f9f9f9;
    margin-bottom: 0;
}

.ds-reg-input label,

.form-group label {
    color: gray; 
    display: inline-block;
   
margin-bottom: 5px;
    vertical-align: middle;
    cursor:
pointer;
}

.form-group label.d-block {
    display:
block;
}

.ds-messages-comments .glr-cnt-4 .glr-col-3 a {
    max-height:
calc(180px / 3);
}
.ds-messages-comments .glr img {
    max-height:
180px;
}

.ds-messages-comments .glr {
    max-width:
200px;
}

.ds-messages-comments .glr-row + .glr-row img {
    max-height:
60px; 
}

.ds-messages-comments .glr-row, 
.ds-messages-comments .glr-row
a:first-child img {
    min-height: 60px; 
}

.ds-comments
{

}

.ds-comment {
    background-color: gray; 
    border-radius:
6px;
}

.ds-messages-item {
    position: relative;
}
.ds-messages-item
.post-action-nav {
    z-index: 1;
}

.ds-messages-item .post-header-action
{
    position: absolute;
    right: 5px; 
    top:
5px;
}

.mobile-sidebar-toggle {
    display: none; 
}


@media (max-width:
767px) {
    body {
        padding-top: 48px;
    }

    .wrap_header {
  
     height: 48px; 
        background-color: #42a4dd;
        overflow:
hidden;
        border-bottom: 0px;
    }

    .header-logo a {
       
line-height: 48px;
        width: 100%;
        color: #fff; 
    }

   
.header-nav {
        border-left: 1px solid #4599ca;
    }

   
.header-nav a {
        height: 48px;
        text-align: center;
    }

  
 .header-nav i::before {
        font-size: 24px;
        color: #fff;
   
}

    .mobile-sidebar-toggle {
        display: inline-block;
       
padding: 10px;
        order: 2;
        width: 60px;
        text-align:
center;
        color: #fff; 
    }

    body.sidebar-active
.mobile-sidebar-toggle::before {
        background-color: rgba(0,0,0,.5);

        display: block;
        width: calc(100vw - 270px);
       
height: 100vh; 
        position: fixed; 
        right: 0px; 
        top:
0px; 
        content: "";  
    }

    .mobile-sidebar-toggle
.fa {
        font-size: 24px;
    }

    body.sidebar-active
.header-logo,
    body.sidebar-active .page_sidebar {
        display:
block;
    }

    body.sidebar-active .wrap_content {
        overflow-x:
hidden;
    }

    body.sidebar-active .footer {
        display: none;
   
}
    body.sidebar-active .footer > div {
        width: 100vw; 
    }


   body.sidebar-active .page_content {
        margin-right: -270px;
   
}

    body.sidebar-active .header-logo,
    body.sidebar-active
.page_sidebar {
        width: 270px;
    }

    body.sidebar-active
.header-nav {
        display: none;
    }

    .header-nav, 
   
.header-nav a {
        flex: auto; 
    }

    .ds-editor-panel {

    }


   .ds-messages-post {
        padding: 5px;
        margin: 5px -5px;
   
}
    .ds-message-photo {
        margin-right: 3px;
    }

   
.wrap-page-mail {
        height: 100%;
    }

    .header-logo, 
   
.page_sidebar,
    .header-search, 
    .header-people {
        display:
none;
    }

    .ds-page-mail .wrap_content {
        position: fixed;
   
    height: 100%;
        width: 100%;
        padding-top: 48px;
    }

  
 .ds-page-mail .comments-form {
        width: 100vw;
       
background-color: #fff;
        z-index: 100;
    }


    #ds_alerts {
    
   right: 20px;
        left: 20px;
        top: unset;
        bottom:
20px; 
        justify-content: flex-end;
    }


   
body.mobile-player-active .header-player {
        position: fixed;
       
top: 0;
        right: 0;
        width: 80vw;
        display: flex;
     
  flex-direction: column;
        height: 100%;
        max-height: 100%;
 
      box-shadow: 0px 0px 0 20vw rgba(0,0,0,.5);
    }

    .dpl.dpl-header
{
        order: 2;
        border-top: 2px solid #9ecadc;
    }

   
.header-player .dpl-toggle {
        width: 40px;
    }

    .dpl-header
.dpl-toggle {
        width: 34px;
        height: 34px;
       
line-height: 32px;
        font-size: 16px;
    }

    .dpl-header
.dpl-title {
        font-size: 11px; 
    }

    .dpl-header .dpl-time {
 
      height: 26px;
        font-size: 11px;
    }
}


@media (min-width:
768px) {
    body.ds-page-mail .page_content {
        height: calc(100vh -
60px);
    }
}