@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

body {
background: #ffffff url(/css/images/head.svg);
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #4e4e4e;
margin: auto;
}

.content {
width: 900px;
margin: auto;
}

@media screen and (max-width: 900px) { .content { width: auto; margin: 0 15px; } }

a { 
color: #4e4e4e; 
text-decoration: none;
}

a:hover { 
color: #5f5f5f;
}

img {
vertical-align: middle;
}

textarea {
width: 90%;
height: 15%;
}

input, select, textarea {
background: #fff;
padding: 10px;
border: 1px solid #dde0e3;
margin: 0 0 15px 0;
border-radius: 8px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}

input[type="submit"]{
background: #88b557;
width: 100px;
padding: 10px;
border: 1px solid #88b557;
color: white;
margin: 0 0 15px 0;
border-radius: 8px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}

button.btn.btn-success {
background: #88b557;
min-width: 100px;
padding: 10px;
border: 1px solid #88b557;
color: white;
border-radius: 8px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}

.block-placement, .block-placement-center, .block-placement-start {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}

.block-placement-center {
align-items: center;
}

.block-placement-start {
align-items: start;
}

.head {
padding: 15px 0;
color: #ffffff;
}

.logo {
width: 70px;
}

.menu-head {
width: calc(100% - 70px);
text-align: right;
}

.menu-head a {
padding: 7px 12px;
background: #418ae5;
border-radius: 8px;
color: #ffffff;
}

.menu-head a:last-child {
margin: 0 0 0 10px;
border-right: 0;
color: #ffffff;
}

a.menu-head-ava {
padding: 7px 0;
background: none;
}

.site-content-left {
width: calc(100% - 315px);
margin: 0 15px 0 0;
}

.site-content-right {
width: 300px;
}
@media screen and (max-width: 900px){ .site-content-left { width: calc(100% - 35% - 15px); } .site-content-right { width: 35%; } }
@media screen and (max-width: 750px){ .site-content-left { width: calc(100% - 265px); } .site-content-right { width: 250px; } }
@media screen and (max-width: 650px){ .site-content-left { width: 100%; margin: 0 0 15px 0; } .site-content-right { width: 100%; } body { background-size: 250%; } }

.site-content-left {
background: #ffffff;
border-radius: 14px;
-webkit-box-shadow: 0px 0px 42px -11px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 42px -11px rgba(0,0,0,0.15);
box-shadow: 0px 0px 42px -11px rgba(0,0,0,0.15);
padding: 25px;
box-sizing: border-box;
overflow: hidden;
}

.content-right-back-down, .content-right-back, .content-right-back-not {
margin-bottom: 15px;
background: #ffffff;
border-radius: 14px;
-webkit-box-shadow: 0px 0px 42px -11px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 42px -11px rgba(0,0,0,0.15);
box-shadow: 0px 0px 42px -11px rgba(0,0,0,0.15);
padding: 0 25px;
box-sizing: border-box;
overflow: hidden;
}

.content-right-back {
padding: 25px 25px 0 25px;
}

.content-right-back-not {
padding: 25px 25px 0 25px;
margin: 0;
}

.site-content-right {
border-radius: 14px;
box-sizing: border-box;
}

.title, .title-small {
font-size: 21px;
font-weight: 600;
margin: 0 0 25px 0;
}

.title > span, .title-small > span {
font-size: 14px;
font-weight: 500;
padding: 5px 9px;
background: #edf0f3;
border-radius: 6px;
}

.title-small {
margin: 0 0 15px 0;
}

.post-hr {
margin: 20px -25px;
border-bottom: 1px solid #f3f3f3;
}

.user-avatar {
width: 65px;
}

.user-head-avatar {
width: 34px;
height: 34px;
object-fit: cover;
box-sizing: content-box;
border-radius: 100%;
border: solid #afccec;
margin: 0 0 0 5px;
}

.user-avatar img {
width: 50px;
height: 50px;
border-radius: 100%;
object-fit: cover;
}

.post-information {
width: calc(100% - 65px);
}

.post-information-title {
font-weight: 500;
}

.content-right-post > span, .menu a > span, .menu-aa a > span, .menu-ss a > span, .aa {
padding: 3px 7px;
font-size: 14.8px;
background: #edf0f3;
border-radius: 6px;
float: right;
font-weight: normal;
}

.content-left-post {
width: calc(100% - 50px);
}

.content-right-post {
width: 35px;
margin: 0 0 0 15px;
}

.last-post {
font-size: 14px;
margin-top: 5px;
}

.last-post a {
color: #3397d1;
font-weight: 500;
}

.clear {
margin: 0 0 -25px 0;
}

.news-title {
font-size: 17px;
font-weight: 500;
margin: 0 0 10px 0;
}

.news-text {
color: #666666;
font-size: 15px;
margin: 0 0 10px 0;
}

.news-information {
color: #919ba6;
font-size: 11px;
font-weight: 500;
}

.news-content {
background: #f2f8ff;
margin: 0 -25px;
padding: 15px 25px;
}

.menu a {
display: block;
padding: 15px 25px;
background: white;
color: #3397d1;
border-bottom: 1px solid #f0f7ff;
margin: 0 -25px;
}

.menu-no-link {
display: block;
padding: 15px 25px;
background: white;
color: #3397d1;
border-bottom: 1px solid #f0f7ff;
margin: 0 -25px;
}

.menu a > span {
background: #ecf6ff;  
}

.menu a:last-child {
display: block;
padding: 15px 25px;
background: white;
color: #3397d1;
border-bottom: 0;
}

.clear-menu {
border-top: 1px solid #f5f9ff;
margin: 20px -25px -20px -25px;
padding: 0 20px;
}

.clear-menu-in {
border-top: 1px solid #f5f9ff;
margin: 0 -25px -25px -25px;
padding: 0 20px;
}

.information {
background: #f0f0ff;
color: #656594;
padding: 25px;
margin: 0 -25px 20px -25px;
}

.information a {
text-decoration: underline;
}

.avatar-user-anketa {
text-align: center;
}

.avatar-user-anketa img {
border-radius: 100%;
width: 230px;
height: 230px;
}

.delete {
margin: 20px 0 20px 0;
}

.delete a {
background: #dc4c4c;
color: white;
padding: 7px 10px;
border-radius: 8px;
}

.title-small > .right-float {
background: none;
float: right;
padding: 0;
}

.title-small > .right-float a {
color: #c9c9c9;
}

footer.foot {
color: #9c9c9c;
padding: 25px 0;
}

footer.foot a {
color: #84b0c9;
}

.foot-left, .foot-right {
width: 50%;
}

.foot-right {
text-align: end;
}

.error {
background: #ff8e8e;
color: #ffe5e5;
padding: 15px;
margin: 0 -25px 15px -25px;
}

.post-error {
margin: 25px -25px 15px -25px;
}

.q {
background: #ffefe9;
padding: 15px;
border: 1px solid #ffb599;
border-left: 5px solid #ffa482;
color: #ff946d;
border-radius: 4px;
}

.good {
background: #7fc397;
color: #f6fff9;
padding: 15px;
margin: 0 -25px 15px -25px;
}

.good a, .error a {
text-decoration: underline;
}

.user-info, .add-post-div {
background: #fff9f2;
padding: 15px 25px;
margin: 0 -25px;
}

.add-post-div {
background: none;
border-top: 1px solid #f5f9ff;
margin: 20px -25px 0 -25px;
}

.author {
background: #dbe4d7;
color: #5b8449;
font-size: 14px;
padding: 2px 5px;
margin: 0 0 0 5px;
border-radius: 6px;
}

.time-post {
font-size: 12px;
color: #b3bec6;
margin: 0;
}

.post-inter {
background: #edeff6;
padding: 3px 9px;
font-size: 14px;
margin: 15px 5px 0 0;
border-radius: 8px;
display: inline-block;
}

ul.pagination {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}

ul.pagination > li.active {
display: inline-block;
background: #fff0e8;
padding: 5px 10px;
border-radius: 8px;
margin: 20px 10px 0 0;
}

ul.pagination > li {
display: inline-block;
background: #edeff6;
padding: 5px 10px;
border-radius: 8px;
margin: 20px 10px 0 0;
}

.menu-aa a {
display: block;
padding: 15px 25px;
margin: 0 -25px;
background: #ffeee6;
color: #c17c5c;
border-bottom: 0;
}

.menu-ss a {
display: block;
padding: 15px 25px 15px 50px;
background: white;
color: #3397d1;
border-bottom: 1px solid #f0f7ff;
margin: 0 -25px;
}

span.aa {
background: #f9dcce;
}

span.assa {
background: #ecf6ff;  
}

.clear-up {
margin: 20px 0 0 0;
}

.site-content-left.not-bot {
padding-bottom: 0;
}

.medals-div {
background: #fffaed;
padding: 25px;
margin: 0 -25px;
}

.table-medals-div {
width: 100%;
}

.users-medals, .name-medals {
width: 50%;
}

span.aa-time {
background: #ffeec1;
padding: 3px 10px;
display: block;
border-radius: 8px;
margin: 5px 0 0 0;
font-size: 13px;
width: max-content;
}

.btn-default {
padding: 10px 15px;
border-radius: 9px;
background: #7cbbff;
width: max-content;
color: white;
font-family: 'Roboto', sans-serif;
margin: 0 0 15px 0;
}

@media screen and (max-width: 375px){ body { font-size: small; } .content { margin: 0 10px; } .title, .title-small { font-size: 17px; margin: 0 0 15px 0; } .content-right-post > span, .menu a > span { font-size: 12.8px; } .last-post { font-size: 12px; margin: 0;} .title > span, .title-small > span { font-size: 12px; padding: 3px 8px; } .news-title { font-size: 14px; } .news-text { font-size: small; } .post-information-title { font-size: 14px; } .site-content-left { padding: 20px; } .user-avatar img { width: 36px; height: 36px; } .user-avatar { width: 51px; } .post-information { width: calc(100% - 51px); } .user-head-avatar { width: 25px; height: 25px; } .post-hr { margin: 15px -20px; } span.right-float { background: none; float: right; padding: 0; } .clear-menu { margin: 20px -25px -18px -25px;} }