html.app {overflow-y:scroll; line-height:1.2; background:white}
html.dlg {background:white}
body {position:relative; height:100%; color:var(--base); font-family:Open Sans}
.v-application {display:block; font-family:inherit}
#body-loader {position:fixed; left:45vw; top:45vh; width:10vw; height:10vh; z-index:50000}
.container {padding:0}
.bgimage {background-color:#ececec; background-repeat:no-repeat;  background-size:cover; background-position:center}

header {box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}
a {color:var(--corp); text-decoration:none}
.hover-steel:hover {background-color:rgb(240, 240, 240)}
div[onclick], span[onclick] {color:var(--corp); cursor:pointer}
hr {height:1px; margin:15px 0; border-width:0; background:var(--silver1); color:var(--silver1)}
h1 {font-size:32px; margin:0 0 20px 0; font-weight:normal}
h2 {font-size:24px; margin:0 0 16px 0; font-weight:normal}
div, ul, ol, input, select, table, td, textarea, video, iframe {box-sizing:border-box}
input, select, textarea, button {outline:none; font-family:inherit; font-size:inherit; border:0}
select {-moz-appearance:auto; -webkit-appearance:auto}
textarea {resize:vertical}
p, form {margin:0; padding:0}
button, .button {text-align:center; cursor:pointer; font-weight:normal; border-radius:4px}
iframe {border:none}
blockquote {margin:8px 20px}

input[type=radio] {margin:0 5px}

.m-1 {margin:4px} .m-2 {margin:8px} .m-3 {margin:12px} .m-4 {margin:16px} .m-5 {margin:20px} .m-6 {margin:24px}
.p-1 {padding:4px} .p-2 {padding:8px} .p-3 {padding:12px} .p-4 {padding:16px} .p-5 {padding:20px} .p-6 {padding:24px}

.lh150 {line-height:1.5}
.all {text-align:left} .alc {text-align:center} .alr {text-align:right}
.fll {float:left} .flr {float:right}
.post-text {line-height:150%; max-width:100%; text-align:justify; overflow-wrap:break-word; hyphens:auto; overflow-x:hidden}
.post-text p, .post-text li {margin:8px 0}
.nowrap {overflow-x:hidden; white-space:nowrap; text-overflow:ellipsis}
.hyphens {hyphens:auto}
.textbreak {max-width:100%; word-wrap: break-word; overflow-wrap:break-word; word-break:break-all; hyphens:auto; overflow-x:hidden}
.textjustify {text-align:justify}

/* Text-color */
.textbase {color:var(--base)}   
.textcorp {color:var(--corp)}  
.textblack {color:black !important}     
.textgray {color:gray}
.textlgreen {color:var(--lgreen)} 
.textblue {color:var(--blue)}
.textgreen {color:green !important}     
.textorange {color:var(--orange) !important}
.textred {color:red !important}         
.textsilver {color:var(--silver)}
.textswamp {color:#f3fdf5}   
.textwhite {color:white !important}

/* Background-color */
.bgcorp {background-color:var(--corp)}     .bgcorp1 {background-color:var(--corp1)}
.bgrose {background-color:var(--rose)}
.bgblack{background-color:#000000}       .bgblue {background-color:#0f9bc9}
.bgdarkgray {background-color:#404040}   .bggray {background-color:gray}
.bggreen {background-color:green}        .bglightgreen {background-color:var(--lgreen)}
.bglrose {background-color:var(--lrose)}
.bgorange {background-color:var(--orange)} .bgred {background-color:red}
.bgsilver {background-color:#f0f0f0}     .bgsky {background-color:var(--sky)}
.bgsteel {background-color:var(--steel)}
.bgswamp {background-color:#f3fdf5}      .bgwhite {background-color:white}
.bgyellow {background-color:#ffffec}
.shadow-silver {box-shadow: 0 6px 12px rgba(0,0,0,0.175)}
.shadow-menu {border-radius:4px; box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}
.shadow-drop {border-top-left-radius:0 !important; border-top-right-radius:0 !important}

/* Font */
.f80p {font-size:80%} .f90p {font-size:90%} .f110p {font-size:110%} .f120p {font-size:120%} .f150p {font-size:150%} .f200p {font-size:200%}
.bold {font-weight:bold} .under {text-decoration:underline !important}

table {border-collapse:collapse}
table.zero > tbody > tr > td {padding:0}
table.bordersilver, table.bordersilver > tbody > tr > td {border:1px solid var(--silver)}
table.bordergray, table.bordergray > tbody > tr > td {border:1px solid gray}
table.vtop > tbody > tr, tr.vtop {vertical-align:top}
td {padding:7px}
@media (max-width:980px) {
 td {padding:12px 7px}
}

/* Controls */
.inputtext, .inputselect {border:1px solid var(--silver1); background:white; padding:12px; min-width:70px}
.inputtext:focus {background:#edeff6}
.inputfile {left:0; width:1px; height:1px; visibility:hidden}
.button {padding:12px 15px}
.minibutton {padding:5px 12px; border-radius:5px}
.controls {right:0; z-index:10; box-shadow: 0 6px 12px rgba(0,0,0,0.175); font-size:var(--fontbase)}

.inputimage {display:flex; flex-wrap:wrap}
.inputimage a {padding:10px; text-align:center}
.img-wrp {margin:0 1px; position:relative; background:var(--silver)}
.img-wrp > img {display:block; width:100%; height:100%; object-fit:contain; background:gray}
.img-wrp > a {position:absolute; right:0; bottom:0; display:block; padding:5px; background:rgb(0,0,0,0.5); color:white; z-index:1; font-size:90%}
.a-attach-img {flex:0 0 70px; width:70px; height:70px}
.a-attach-img > img {display:block; object-fit:cover; width:70px; height:70px}
@media (max-width:980px) {
    .a-attach-img {flex:0 0 50px; width:50px; height:50px}
    .a-attach-img > img {width:50px; height:50px}
}

.error-panel {padding:20px 50px; border-bottom:1px solid #d81e00; background:#ffefed}
.messerror {margin:20px; border:1px solid #d81e00; border-left:10px solid #d81e00; background:#ffefed; padding:20px}
.messinfo {margin:20px; border:1px solid #089017; border-left:10px solid #089017; background:#d9eedb; padding:20px}
.messempty {margin:20px; padding:40px; border-left:10px solid gray; background:#ececec; color:gray; text-align:center; font-size:120%}

/* Аутоинтефикация */
#authentwrapper {width:500px; margin:30px auto}
@media (max-width:980px) {
    #authentwrapper {width:100%}
}

/* Поиск */
#search-wrapper {flex:1 1 auto; padding:10px}
#searchblock {border:1px solid rgba(0,0,0,0.3); background:white}
#search-result {padding:10px}
@media (max-width:980px) {
    #search-wrapper {border:0}
}

/* Шаблон */
#pagetitle {display:flex}
#mainwrapper {position:relative; margin-top:var(--hh); padding-bottom:100px; background:var(--steel)}

#mainleft {background:inherit; z-index:10; position:relative}
#maincontent {flex:0 0 955px; background:white; min-height:800px; padding-bottom:200px}
.section-1 {width:955px; margin:0 auto}
#scrollToTop {display:none; z-index:999; background:transparent; position:fixed; top:var(--hh); right:0; bottom:0; font-size:22px;
    width:50px; color:#939393; line-height:16px; padding-top:20px; text-align:center; cursor:pointer}
@media (max-width:980px) {
    #mainleft {display:none}
    #mainleft {position:absolute; width:100%; background:var(--corp)}
    #mainleft a {color:white}
    #maincontent {flex:0 0 100%; min-height:400px}
    .section-1 {max-width:100%; width:100%; padding:0 15px}
}

/* Левое вертикальное меню страницы */
.pageleftmenu {display:flex; flex-direction:column; align-items:flex-end; position:sticky; top:var(--hh); padding:20px 20px 0 0}
.pageleftmenuinner > a {display:block; box-sizing:border-box; line-height:2.2; font-size:105%; white-space:nowrap}
.pageleftmenuinner > a.selected {text-decoration:underline}
.pageleftmenuinner a > i {width:36px; text-align:center; color:gray}
@media (max-width:980px) {
    .pageleftmenu {align-items:flex-start; position:relative; top:0}
    .pageleftmenuinner a > i {color:#ffe}
}

/* Верхнее горизонтальное меню страницы */
.pagetopmenu {display:flex}
.pagetopmenu .title {}
@media (max-width:980px) {
    .pagetopmenu > .title {flex:1 1 auto}
}

/* Адаптивная форма */
.form20, .form30, .form50  {width:100%}
.fl {display:flex; align-items:center; margin:15px}
.flt {align-items:normal}
.fl > :first-child {margin-right:20px; text-align:right}
.form20 .fl > :first-child {flex:0 0 20%}
.form30 .fl > :first-child {flex:0 0 30%}
.form50 .fl > :first-child {flex:0 0 50%}
.vl {display:block; box-sizing:border-box; padding:10px 15px 10px 15px}
.vl > :first-child {margin:0 0 8px 0}
@media (max-width:980px) {
    .fl {display:block}
    .fl > :first-child {margin:0 0 5px 0; text-align:left}
    .fl > :nth-child(2) {width:100%}
}

/* Ajax */
.ajaxdrop {position:absolute; width:100%; overflow-y:auto; z-index:999; border:1px solid var(--silver1); background:white}
.ajaxdrop > a {display:block; padding:5px; color:black; min-height:36px}
.ajaxdrop > a + a {border-top:1px solid var(--silver1)}
.ajaxdrop > a:hover {background:#ececec}

/* Events */
.event {padding:10px 10px}
.eventlinked {border-left:2px solid var(--lgreen)}

/* Posts #dce1e6 box-shadow:0 1px 0 0 var(--silver), 0 0 0 1px var(--silver) */
#addpostmenu {z-index:10; box-shadow: 0 6px 12px rgba(0,0,0,0.175);}
#main-content-left {flex:0 0 580px; margin:20px 0; border:1px solid var(--silver) }
#main-content-right {flex:0 0 355px; margin:20px 0 20px 20px}
.post-band-title {display:flex; justify-content:space-between; margin:20px 10px}
.post-band-title .a-band {margin:0 10px; padding:0 0 7px; font-size:20px}
.post-band-menu > .selected {border-bottom:2px solid var(--rose); color:black}

#news-cats {flex-wrap:wrap}
#news-cats > div, .post-cat {display:inline-block !important; border-radius:15px; padding:5px 10px; font-size:14px; border:1px solid var(--rose)}
#news-cats > div.selected, .post-cat-selected {background:var(--rose); color:white}

.post-wrapper {padding:20px}
.post-a-wrapper {display:block; flex:0 0 120px; height:120px; margin-right:20px}
.post-a-wrapper > img {display:block; object-fit:cover; width:120px; height:120px}
.post-p-wrapper {display:block; flex:0 0 250px; height:250px; margin-right:20px}
.post-p-wrapper > img {display:block; object-fit:cover; width:250px; height:250px}
.post-name {font-size:20px}
.post-edition {font-size:14px; color:gray}
.post-banner {font-size:28px; padding:60px}
@media (max-width:980px) {
  #main-content-left {flex:0 0 100%; margin:0}
  #main-content-right {display:none}
  .post-band-title {margin:20px 10px 30px}
  .post-a-wrapper {width:200px; height:200px; margin:20px auto}
  .post-a-wrapper > img {width:200px; height:200px}
  .post-p-wrapper {flex:0 0 150px; height:150px}
  .post-p-wrapper > img {display:block; object-fit:cover; width:150px; height:150px}
  .post-banner {font-size:20px; padding:30px}
}

/* reviews */
.reviews {max-height:700px; overflow:auto; padding:0 20px}

/* Viewer */

#viewer {position:fixed; left:0; top:0; right:0; bottom:0; z-index:999; background:rgb(0,0,0,0.8); overflow-y:hidden}
#v-close {position:absolute; right:0; top:0; padding:10px 18px; font-size:30px; color:white; z-index:50500; cursor:pointer}
#v-flex {display:flex; height:100vh}
#v-left {flex:1 1 auto; display:flex; justify-content:center; align-items:center; position:relative; max-width:100%}
#v-wrapper {max-width:95%; max-height:95vh}
#v-wrapper > img {display:block; min-width:150px; min-height:150px; max-width:100%; max-height:95vh}
.v-nav {display:flex; align-items:center; position:absolute; top:0; bottom:0; width:35%; padding:30px; cursor:pointer}
.v-nav > i {color:transparent; padding:15px; width:30px; height:30px; border-radius:50%; text-align:center; font-size:150%}
#v-left:hover .v-nav > i {color:white; background:rgb(0,0,0,0.5); border:1px solid gray}
#v-nav-l {left:0; justify-content:flex-start}
#v-nav-r {right:0; justify-content:flex-end}
#v-right {flex:0 0 500px; display:flex; flex-direction:column; padding:10px; background:white}
@media (max-width:980px) {
    #viewer {overflow-y:scroll}
    #v-flex {flex-direction:column; min-height:100vh; height:auto}
    #v-left {flex:0 0 auto}
    #v-wrapper {max-width:100%}
    #v-right {flex:2 2 auto; padding-bottom:150px}
    #v-right .commentwrapper {position:static}
    #v-right .comment-band {max-height:none}
}

/* Dlg */

#dlg {position:fixed; left:0; top:0; right:0; bottom:0; z-index:999; background:rgb(0,0,0,0.6); overflow-y:hidden; visibility:hidden}
#d-scroller {height:100vh; overflow-y:auto}
#d-flex {display:flex; justify-content:center; align-items:center; min-height:100vh; padding:30px 0}
#d-frame {flex:0 0 981px; border-radius:3px}
@media (max-width:980px) {
    #dlg {overflow-y:scroll}
    #d-scroller {height:auto; overflow-y:auto; max-width:100%}
    #d-flex {display:block; padding:0 0 150px; max-width:100%}
    #d-frame {width:100%; border:0; border-radius:0}
}    

.formwrapper {margin:0 auto; width:60%}
.formwrapper > form > div {margin-bottom:30px}

.settings-banner-container{display:flex; flex-flow:wrap}
.settings-banner{display:flex; flex-direction:column; align-items:center; margin:25px}
.settings-banner-image{display:block; width:250px; height:250px; background-size:cover; background-position:center center}
.settings-banner-name{display:block; width:100%; text-align:center}

.admin-links-utm-wrapper{display:flex; margin-top:25px}
.admin-links-utm-header{margin:25px 0 10px 30px}
.admin-links-utm-block{display:flex; margin:0 25px; border:1px solid; border-color:rgba(0,0,0,.15); border-radius:5px; width:400px}
.admin-links-utm-name{display:flex; justify-content:space-between; align-items:center; width:250px; background-color:#e9ecef}
.admin-links-utm-name > a{display:inline-block; margin:0 5px 0 15px; padding:4px 8px; border-radius:5px; font-size:10px; font-weight:600; background-color:#868e96; color:white}
.admin-links-block-fullref{width:850px}
.admin-links-name-fullref{width:80px}
.admin-links-fullref-create{display:inline-block; margin:50px 0 0 20px}
.admin-links-fullreftable{margin-top:50px}
.admin-links-real-url{font-size:12px}
.admin-links-slpd{width:500px}
.admin-links-fullref-container{width:900px; text-align:center}
.admin-links-center{text-align:center}

@media (max-width:980px) {
 .admin-links-utm-wrapper{display:block; margin-top:0}
 .admin-links-utm-header{margin:25px 0 10px 0}
 .utm-subheader{margin-top:25px}
 .admin-links-utm-block{display:block; margin:0; width:100%}
 .admin-links-utm-name{width:100%}
 .admin-links-input{padding:10px 0 !important}
 .admin-links-block-fullref{width:100%}
 .admin-links-fullref-create{display:block; margin:50px 20px; text-align:center}
 .admin-links-slpd{width:380px}
 .admin-links-fullref-container{width:100%}
 .admin-links-slpd{width:100%}
 
 .admin-links-fullreftable{display:block; width:100%}
 .admin-links-fullreftable > tbody{display:block; width:100%}
 .admin-links-fullreftable > tbody > tr{display:block; width:100%}
 .admin-links-fullreftable > tbody > tr > td{display:block; width:100%}
 .admin-links-fullreftable > tbody > tr > td > div{display:block; width:100%}
 .admin-links-fullreftable > tbody > tr > td > div > a{display:block; width:100%; word-wrap:break-word}
 
 .admin-links-fullreftable > tbody > tr > td{display:block; width:100%; text-align:left}
 .admin-links-center{text-align:left}
}

.role {cursor:pointer}
.role:hover {background:#f3fdf5}

.admin-helpwidget{position:relative; margin:25px 0; padding:25px; border: 1px solid; border-color:#dddddd; border-radius:25px}
.admin-helpwidget-item{padding:25px 0}
.admin-helpwidget-item:last-of-type{border-top:1px solid; border-color:#dddddd}

.admin-helpwidget-user{display:flex; align-items:center; margin-bottom:25px}
.admin-helpwidget-user > a{display:block; margin:0 25px 0 0}
.admin-helpwidget-user > div > a, div{display:block}
.admin-helpwidget-user > div > div:last-of-type{color:gray; font-size:14px}

.admin-helpwidget-buttons{position:absolute; top:10px; right:10px}

.content-image{display:block; margin:50px auto; width:100%}
.content-image > img{display:block; width:100%}

.content-with-menu{display:flex}
.content-with-menu > div:first-of-type{width:25%}
.content-with-menu > div:last-of-type{width:75%}

.bot-messenger-icon{margin:1px 5px 0 5px; width:20px; height:20px}
.bot-webhook-icon{margin:1px 5px 0 5px; width:20px; height:25px}