@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Open+Sans&family=Yeseva+One&display=swap');
/*font-family: 'century gothic', serif;
font-family: 'century gothic', cursive;
font-family: 'century gothic', sans-serif;
*/

/*upd*/

 [class="left-menu__user-notification left-menu__unread-message"] img.flag {
  height: 18px!important;
    width: 12px!important;
}
.m2 {
    font-size: 0;
}


/*--------------------*/

div#app {
padding-top:2%;
}

body.bodybg {
 background:  url(https://avatars.mds.yandex.net/i?id=e8d00e8af585c921021542310c2ce3f5_l-5235538-images-thumbs&n=13)  repeat-x   fixed;
background-size: contain;
}


div#footer, .footer__infolinks.p-1, div#app+div+[style="text-align: center"], div#page__rendertime.p-1 {
font-size:0;
}

a, div, td {
color:#d8d9dc;
text-decoration: none;  
transition: .3s;
}

a:hover {
color:#ffffff50;
text-decoration: none;  
transition: .3s;
}
span[data-target="#deleteconfirmmodal"] {
    text-decoration: none!important;
    color: #eae8eb!important; 
    transition: .3s;
}
span[data-target="#deleteconfirmmodal"]:hover {
    text-decoration: none!important;
    color: #fff!important; 
    transition: .3s;
}

 .fa, .fas {
    color: #eae8eb;
}
 
.blog_total_counter {
display:none;
}

#app > div:nth-child(4) {
display:none;
}
 
body > div:nth-child(19) {
font-size:0;
}

.crumbs:before {
    display: block;
    width: 86.8%;
    height: 350px;
    content: '';
    background: url(https://psv4.userapi.com/s/v1/d2/g9IP5X4_I9um-YQhEjPouPvPFjsa0AfLUxu0XRii8ujQCZPN-w-4W9-LJ7nORabwZqRDfxVOWy1ia6WMRIMoaI75E4NnNOoJ4gpTNIqZ8eRgsjAQp3_YALFjJrbh1wpfj9qLNXjaJKKK/shapka.png) top center no-repeat;
    background-size: cover;
    margin-left: 7%;
    box-shadow: 0px -9px 0px 5px #070707;
    border-bottom: 6px double #070707;
}

main.py-4 {
  background:  #201e21;
 width: 85%;
margin-left:8%;
margin-top:-0.5%;
outline: 1px solid #d8d8d650;
    outline-offset: -5px;
 background: url(https://i.ibb.co/cF8xdx9/blackorchid.png) repeat fixed;
}


.left-menu {
   background:  #070707;
 margin-left:1%;
margin-top: 0.6%;
margin-right: 0.5%;
 border: unset !important;
font-size:10px;
font-family: 'Open Sans', sans-serif;
}

 div.left-menu {
border-top: 1px solid #d8d8d650!important;
border-bottom: 1px solid #d8d8d650!important;
}

#app > main > div.left-menu > div.left-menu__user-notification.left-menu__unread-message > p:nth-child(3) {
   margin-bottom: -15px;
    height: 50px;
}

[class="left-menu__user-notification left-menu__unread-message"] img {
    width:20%!important;
}

h3.left-menu-text {
   font-family: 'century gothic', cursive;
   font-size: 12px;
    text-align: center;
border-bottom: 1px solid #07070750!important;
    background-color: transparent!important;
    text-transform: lowercase;
width: fit-content;
margin: auto!important;
}

.left-menu__unread-message p{
   height: 30px;
   overflow-y: clip;
   padding: 1px;
}

.left-menu__friends, 
.blog__iread,
.blog__tags, 
 .community__members, 
.blog__read-me,
.blog__gifts { 
	display:none;
}

.blog__about h3.left-menu-text {
    display: none;
}

 .blog__about{
padding-top: 100px;
height: 1000px;
background:  url(https://psv4.userapi.com/s/v1/d2/iofyKREHQs8l8GxDsKlcWobNjNOcPDNAURlU_wZak-ndipWq-XuGbnmWagVW7wVakMsHLak81ofHexDOI0F2CEQyOA5g48qJo4yFZ5LOo9T8nIVsYpWj1XHViw-JLukVL02miJFkOUnO/3.png)  top no-repeat;
background-size: cover;
font-size:15px;
text-align: left;
font-family: 'century gothic', sans-serif;
}

.blog__about  p {
margin-top: 0;
margin-bottom: 0;
}







a.navbar-brand {
   color: #eae8ebbf!important;
   margin-left:-20px;
    font-size: 20px;
    font-family: 'century gothic', cursive;
}

a.navbar-brand:hover {
  color: #eae8eb50!important;
} 

.container {
max-width: 100%;
}

.shadow-sm {
    box-shadow: none!important;
}

.bg-white {
    background-color: transparent;
}

.pc-menu {
    display: none;
}


.menu__box {
   position: absolute;
    z-index: 2;
    display: block;
    overflow: hidden;
    top: 39px;
    right: 0;
    left: 25px;
    height: 0px;
    padding: 10px;
    margin-left: -160px !important;
    width: 250px !important;
    background: #eae8eb;
}



.hamburger-menu {
    display: block;
    margin-top: 6px;
    position: absolute;
    right: 5%;
}
.menu__item {
    font-family: 'century gothic', cursive;
    text-align: center;
    font-size:11px;
    color:#070707;
}

#menu__toggle:checked ~ .menu__box {
    visibility: visible;
    height: 550px;
}

.menu__btn > span::before, .menu__btn > span::after {
    background: #000;
    height: 2px;
    box-shadow: 0 0 2px #ffffff50;
}


/*дизайн сохранен*/
.alert-success {
font-family: 'century gothic', cursive;
  font-size: 15px;
text-align:center;
    color: #201e21;
    background-color: #eae8eb50;
    border-color: #201e21;
}


.post-title-user {
font-family: 'century gothic', cursive;
  font-size: 13px;
color: #d8d9dc;
transition: .5s;
}

.post-title-user:hover {
color: #eae8eb50!important;
    transition: 0.3s;
}

.post-title-date {
font-family: 'century gothic', serif;
    padding-left: 0;
}

h5 {
color: #858585;
    font-size: 100%;
}

h1, h2 {
   background: #eae8eb5e;
    text-align: center;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    font-family: 'century gothic', cursive;
 
}  

.post-title {
display:block;
margin-top: -9px;
text-align: right;
    border-bottom: 1px solid #eae8eb3d;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    font-family: 'century gothic', cursive;
    transition: .3s;
}   
 
.post-title:hover {
    color: #eae8eb50!important;
    transition: 0.3s;
}

.post-content, .comment-content {
    background: #070707;
    padding: 1%;
margin: 10px 10px 20px!important;
font-family: 'century gothic', sans-serif;
}

.post-content {
min-height: 200px;
}

.post-text, .comment-text {
    font-size:13px;
    padding: 3px;
}

div.post-text, div.comment-text, i.fas.fa-heart, div.post-opt {
color:#eae8eb!important;
}

.post-content a, .comment-content a {
color:#eae8eb!important;
}

.row.w-100 div {
    color: #eae8eb!important;
}


.comment-text+div, .row.w-100 {
    position: sticky;
    top: 100%;
font-family: 'century gothic', cursive;
}


.comment-box__message-partial.comment-content {
display:none;
}

.post-content [href$="#"] {
font-family: 'century gothic', cursive;
  font-size: 10px;
}

a.post-subscribe {
font-family: 'century gothic', cursive;
  font-size: 10px;
}

.post-content [href$="/unsubscribe"] {
font-family: 'century gothic', cursive;
  font-size: 10px;
}

.blog__last-comments,
[src="//beon.fun/i/offline.png"],
[src="/i/blog.png"],
.postsiblings {
display:none;
}


.quotation {
    background-color: #eae8eb50;
    width: fit-content;
    border-left: 3px solid #eae8ebad;
    color: #d8d8d6;
    padding-top: 0;
    padding-right: 5px;
}

/*----*/

.crumb-item {
font-family: 'century gothic', cursive;
    font-weight: bold;
    margin-left: 140px;
    font-size: 15px;
color:#201e21;
 }

#app > div:nth-child(2) > a > span  {
font-family: 'century gothic', cursive;
    font-weight: bold;
    margin-left: 140px;
    font-size: 15px;
   color:#201e21;
}

 .pagination a  {
   color:#eae8eb!important;
} 

div.pagination  {
font-family: 'century gothic', cursive;
    font-weight: bold;
   color:#eae8eb!important;
margin-right: 120px;
}
 .pagination-goto {
font-family: 'century gothic', cursive;
    font-weight: bold;
   color:#eae8eb;
}

.datebg {
font-family: 'century gothic', cursive;
 font-size: 10px;
 text-align:right;

}
.avatar-select-list {
    background: transparent;
    text-align: center;
    height: 255px;
    width: 130px;
    overflow-y: scroll;
}

.avatar-select-label {
border-radius: 15px;
margin:2px;
width: 80px;
border: 2px solid #201e21;
filter:opacity(0.6);
 transition: 0.2s;
}

.avatar-select-label-selected {
border-radius: 0px;
width: 100px;
border: 5px solid #eae8eb;
filter:opacity(1);
 transition: 0.2s;
}



.tag_bar {
 margin-left: 11px!important;
 
}
.tag_bar span{ 
color:#eae8eb!important;
font-size: 12px;
}

.tag_bar > span {
    font-size: 12px;
}

textarea {
margin-left: 10px;
background:  #eae8eb;
 color:#201e21;
}



 form.messageform p, form.messageform div {
    font-size: 12px;
   margin-bottom: 0px;
}

form.messageform p, form.messageform div {
    font-size: 12px;
    margin-bottom: 0px;
}


.textareabg {
    background: #070707;
    border: 1px solid #222;
    margin: 10px 10px 20px;
    padding: 18px !important;
}
textarea {
    background: #121212;
    color: #afafaf;
    border: 1px solid #323232;
}

 .mt-5, .my-5 {
    margin-top: 1rem!important;
}

 

 select,
input ,
.textareabg input[type="submit"],
.left-menu-text input[type="text"],
.left-menu-text input[type="submit"], 
button.btn.btn-secondary, 
button.btn.btn-primary,
input.w-100.input-tags, input.w-100.input-mood,
input.w-100.input-music,
input.w-100.input-want {
font-family: 'century gothic', cursive;
font-size:11px;
background-color: #eae8eb;
color:#201e21;
 border: 2px solid transparent;
margin-top: 2px;
transition: 0.5s;
}

 select:hover,
input:hover,
.textareabg input[type="submit"]:hover,
.left-menu-text input[type="text"]:hover,
.left-menu-text input[type="submit"]:hover, 
button.btn.btn-secondary:hover, 
button.btn.btn-primary:hover,
input.w-100.input-tags:hover, input.w-100.input-mood:hover,
input.w-100.input-music:hover,
input.w-100.input-want:hover {
background-color: #d8d8d6;
color:#eae8eb;
transition: 0.5s;
}

.textareabg input[type="submit"] {
margin: 10px!important;
}

.post-content [type=submit]   {
    margin-left: 10px;
}

 select {
    margin-left: 5px;
}

 label {
   font-family: 'century gothic', cursive;
    color:#eae8eb;
}

.sign {
   color:#eae8eb;
}


.modal-body {
    color: #d8d8d6;
    position: relative;
}

.modal-content {
 background-size: 300px;
background-position-x: 200px;
background-color:#eae8eb!important;
border:#d8d8d6 solid 4px;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}



[onclick="window.scroll({top: 0,behavior: 'smooth'})"] {
    font-size: 0px;
    text-shadow: unset !important;
}

[onclick="window.scroll({top: 0,behavior: 'smooth'})"]:before { 
    content: 'ВВЕРХ';
    font-size: 20px!important;
    font-family: 'century gothic', serif;
    font-weight: bold;
    color: #eae8ebbf;
    margin-right: 15px;
}
[onclick="window.scroll({top: 0,behavior: 'smooth'})"]:hover:before { 
 color: #eae8eb50!important;
}

[href="#footer"] { 
    font-size: 0px;
}

[href="#footer"]:before { 
content: 'ВНИЗ';
font-weight: bold;
margin-right: -10px;
font-size:17px!important;
font-family: 'century gothic', serif;
color: #eae8ebbf;
}
[href="#footer"]:hover:before { 
color: #eae8eb50!important;
}




::-webkit-scrollbar {
width: 4px;
    border-left: 1px solid #d8d8d6;
    border-right: 1px solid #d8d8d6;
    background-color: #eae8eb;
}

::-webkit-scrollbar-thumb {
border-left: 4px solid #eae8eb;
    border-right: 4px solid #eae8eb;
background-color: #eae8eb;
 border-radius:30px!important;
}


 div#beon-fnplayer {
padding-top: 5px;
padding-bottom: 5px;
background: #eae8eb;
}

 #fnplayer-slider > span {
font-size:0px!important;
}


#fnplayer-slider {
height: 3px!important;
width: 80%;
background-color: #d8d8d6!important;
}

#fnplayer-slider-inner {
height: 8px!important;
 background-color: transparent!important;
    border-right: 4px solid #a90c0cba;
    margin-top: -3px;
}

#fnplayer-volume {
height: 3px!important; 
width: 30px;
flex-direction: row;
background-color: #d8d8d6!important;
}
#fnplayer-volume-mask {
border:none!important;
}


#fnplayer-volume-inner {
width: 100%;
height:3px!important; 
background-color: #a90c0cba!important;
}

 #fnplayer-stop {
    border: 0;
    background:  #a90c0cba!important;
margin-bottom: 1px;
}

#fnplayer-play {
    border-color: transparent transparent transparent #a90c0cba!important;
margin-bottom: 1px;
}




@media (max-width: 700px) {


div#app {
    width: 100%!important;
   padding: 0 0%!important; 
   border-left:  unset!important;
    border-right:  unset!important;
    background-color: transparent!important;
}

main.py-4 {
    width: 100%!important;
    margin-left: 0%!important;
}

div.left-menu {
padding: 10px!important;
}

.left-menu > div.mobile_open_menu > h3 {
    font-size: 13px;
}

.left-menu .fas {
    color: #f5f5f5;
font-size: 15px;
}

.crumbs:before {
     width: 100%!important;
    margin-left: 0%!important;
}


#app > div:nth-child(2) > a > span {
    margin-left:0px!important;
}

div.pagination {
    margin-right: 0px!important;
}

.crumb-item {
    margin-left: 0px!important;
}

 .post-title {
    margin-top:0px!important;
}

.post-avatar img {
  width:80px!important;
}

.fas, .far, .tag_bar > * {
    font-size: 0.8rem!important;
}

.avatar-select-list {
    width:100%!important;
}
.menu__box {
    left: -45px!important;
}

[href="#footer"]:before {
    margin-right: 50px!important;
}

a.navbar-brand {
   margin-left: 0px!important;
}

}