:root {
    --font: normal 400 14px/1.5 -apple-system, BlinkMacSystemFont, Oxygen, Ubuntu, Cantarell, Consolas, 'Open Sans', 'Helvetica Neue', sans-serif;
    --background: #f0f0f0;
    --background-vice: #ececec;
    --color: #262223;
    --color-vice: #212121;

    --theme-color: #404040;
    --theme-color-vice: #313131;
    --theme-color-active: #469af5;
    --theme-color-reverse: #fff;
    --theme-color-hover: #e3e3e3;

    --gap: 12px;
    --padding: 5px 12px;
    
    --radius: 3px;
    --transition-duration: 240ms;
    --transition: var(--transition-duration) ease;
    --shadow: 0 4px 12px rgba(0,0,0,.15);
    --scrollbar: #dadada;

    --input: #e3e3e3;
    --input-hover: #dcdcdc;

    --black: #1a1a1a;
    --black-vice: #000;

    --white: #fff;
    --white-vice: #fafafa;

    --blue: #258de6;
    --blue-vice: #1b96ff;

    --yellow: #ffd832;
    --yellow-vice: #f7ce1a;

    --green: #19be6b;
    --green-vice: #37c574;

    --red: #fd5174;
    --red-vice: #f14164;
}

.masiv-dark {
    --background: #2a2a2a;
    --background-vice: #313131;
    --color: #f3f3f3;
    --color-vice: #6a6a6a;

    --theme-color: #ffd832;
    --theme-color-vice: #fcea4d;
    --theme-color-active: #e7d535;
    --theme-color-reverse: #212121;
    --theme-color-hover: #3a3a3a;
    --shadow: 0 0 16px rgba(0,0,0,.4);

    --input: #393939;
    --input-hover: #414141;
    --scrollbar: #5a5a5a;
}

article,aside,dialog,footer,header,section,footer,nav,figure,menu,img,video,audio{ display: block; }
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dialog,dl,dt,dd,ul,ol,li,iframe,pre,form,figure,fieldset,legend,button,input,textarea,th,td{ margin: 0; padding: 0; border: 0; }
a{ color: inherit; text-decoration: none; cursor: pointer; transition: var(--transition); }
b,strong{ font-weight: 700; }
html{ position: relative; height: 100%; overflow-x: hidden; color: var(--color); font: var(--font); scroll-behavior: smooth; background: var(--background); }
input, button, textarea, select{ font: inherit; }
input:-webkit-autofill{ background-color: initial; }
ul,li,ol{ list-style: none; }
img,video,audio,iframe{ margin: auto; max-height: 100%; max-width: 100%; transition: var(--transition); }
kbd, code{ margin: 0 .2em; padding: .12em .4em .1em; font-family: monospace; border-radius: 4px; }
code{ background-color: rgba(0,0,0,.1); }
kbd{ background-color: var(--white); color: var(--black); border-right: 2px solid var(--theme-color-hover); border-bottom: 3px solid var(--theme-color-hover); }
kbd.black { background: var(--black); color: var(--white); }
blockquote{ padding: var(--padding); border-radius: var(--radius); border-left: 2px dashed rgba(var(--color), .25); background-color: rgba(var(--color), .05); }

::selection{ background-color: #ffd57b !important; color: #2a2a2a !important; }
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{ display: none; }
::-webkit-scrollbar-track{ background-color: inherit; }
::-webkit-scrollbar-thumb{ background-color: var(--scrollbar); border: 1px solid transparent; cursor: pointer; }

.iconfont{ font-size: 1em; font-weight: 400 !important; }

@media (max-width: 750px) {
    ::-webkit-scrollbar{ width: 2px; height: 2px; }
    ::-webkit-scrollbar-thumb{ border-radius: 0; }
}

.room{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}
.header{
    position: relative; z-index: 50;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--background);
}
.navs{
    display: flex;
    align-items: center;
}
.nav{
    padding: var(--padding);
    user-select: none;
}
.main,
.article{
    margin: 0 auto;
    padding: var(--padding);
    box-sizing: border-box;
	max-width: 100%;
}
.main{ width: 1200px; }
.article{ width: 780px; }
.content{ padding: var(--padding); }
.section{ margin: 80px 0; }

.sidebar{
	position: relative;
	box-sizing: border-box;
	max-height: 100%;
	width: 240px;
	transition: var(--transition);
	overflow: auto;
}
.iframe{
    width: 100%; height: 100%;
}

.btn,
.page{
    position: relative;
	display: inline-flex;
	align-items: center;
    box-sizing: border-box;
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
    user-select: none;
    cursor: pointer;
    align-self: center;
    vertical-align: middle;
	white-space: nowrap;
}
.btn{
	background-color: var(--theme-color);
	color: var(--theme-color-reverse);
	padding: 4px 12px;
    border: 1px solid transparent;
    outline: none;
}
.btn.plain {
    border-color: transparent !important;
    background-color: transparent;
    color: var(--color);
}
.btn:hover {
    background-color: var(--theme-color-vice);
    border-color: transparent;
    z-index: 1;
}
.btn:active,
.page:active {
    box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}
.btn.is-loading,
.page.is-loading{
	color: transparent !important;
    pointer-events: none;
}
.btn.is-loading:after,
.page.is-loading:after {
    content: '\20';
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%;
    margin: -10px 0 0 -10px;
    width: 20px; height: 20px;
    border: 2px solid var(--background);
    border-top-color: transparent !important;
    border-radius: 50%;
    animation: btn-loading .5s infinite linear;
}
.page.is-loading:after {
    border: 2px solid var(--color);
}
.collapsed > .btn:not(:last-child),
.collapsed > .btns:not(:last-child){
	margin-right: -1px;
}

.pages{
    margin: -4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.page-dots{ cursor: default; }
.page,
.page-dots{
	padding: 4px 12px;
	margin: 4px;
}
.page:hover {
    background: var(--theme-color-hover);
}
.page.active {
    background-color: var(--color);
    color: var(--background);
    pointer-events: none;
    font-weight: 600;
}

.link{
	color: var(--blue);
	border-bottom: 1px dashed var(--blue);
}
.link:hover {
    color: var(--blue-vice);
    border-color: var(--blue-vice);
}

.tag{
	position: relative;
	display: inline-flex;
	margin: 4px;
	padding: 4px 12px 4px 24px;
	border-radius: 2em .4em .4em 2em / 2.2em .4em .4em 2.2em;
	background-color: var(--color); color: var(--background);
	transition: var(--transition);
}
.tag:before {
    content: '\20';
    position: absolute;
    top: 50%; left: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background-color: var(--background);
    box-shadow: 0 -1px 1px 0 rgba(var(--background),.3);
    transform: translate(0, -50%);
}

.list ul,
.list ol {
    position: relative;
    padding-left: 1.5em;
}
.li{
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: 6px 16px;
    transition: var(--transition);
    border-radius: var(--radius);
}
.li:hover {
    background: var(--theme-color-hover);
}

.badge{
	margin-left: .5em;
	padding: .1em .5em .08em;
	border-radius: var(--radius);
	box-shadow: inset var(--shadow);
	font-size: .8em;
	background-color: var(--background); color: var(--color);
}
.badge:empty,
.tag:empty,
.btn:empty,
.swipe-navs:empty { display: none; }

.caret{
	display: inline-block;
	margin-left: .5em;
	border: .36em solid transparent;
	border-top-color: rgba(var(--color), .8);
	border-radius: 2px;
	transform: translate(0, 20%);
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
    background-color: transparent !important;
}

.card,
.dialog{
    position: relative;
    margin-bottom: var(--gap);
    border-radius: var(--radius);
	box-shadow: var(--shadow);
	box-sizing: border-box;
}
.card > header,
.dialog > header,
.card > footer,
.dialog > footer {
    box-sizing: border-box;
    width: 100%;
    padding: var(--padding);
    display: flex;
    align-items: center;
    background-color: var(--background);
}
.card:last-child{ margin-bottom: 0; }

.table-container{
	max-width: 100%;
	overflow: auto;
}
.table{
	width: 100%;
	border-radius: var(--radius);
	border-collapse: collapse;
}
.table thead,
.table tfoot,
.table th {
    font-weight: 600;
    background-color: var(--theme-color-hover);
    text-align: initial;
}
.table tr {
    transition: var(--transition);
}
.table tr:hover {
    background: var(--theme-color-hover);
}
.table th,
.table td {
    padding: var(--padding);
    border: 1px solid transparent;
}

.progress{
	position: relative;
	display: flex;
	background-color: var(--theme-color-hover);
	border-radius: var(--radius);
}
.bar{
	position: relative;
    display: flex;
    justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 2px;
	min-height: 2px;
	border-radius: inherit;
	overflow: hidden;
	transition: all .15s linear;
}
.bar:hover { opacity: 0.94; }
.bar.active:before {
    content: '\20';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background-color: rgba(255,255,255,.15);
    animation: bar 3s ease infinite;
}

.field{
	display: flex;
	align-items: center;
	margin: 0 calc(var(--gap)/2 * -1);
	clear: both;
}
.field > .label {
    align-self: baseline;
    padding: calc(var(--gap) / 2);
}
.field.btns {
    margin: var(--gap) 0;
}
.label{
	display: block;
	padding: 0 var(--gap) var(--gap) 0;
	border-radius: var(--radius);
	font-weight: 600;
	white-space: nowrap;
}
.label-input,
.label-inline{
	position: relative;
	margin: calc(var(--gap) / 2);
	flex: 1 1 100%;
	box-sizing: border-box;
}
.label-inline{
	display: flex;
	align-items: baseline;
}
.label-inline .label {
    padding-bottom: 0;
}
.group {
    flex: 1 1 auto;
    display: flex;
    border-radius: var(--radius);
}
.group > .group-item,
.group > .btn {
    border-radius: inherit;
}
.group > .group-item:not(:first-child),
.group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.group > .group-item:not(:last-child),
.group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input,
.textarea,
.checkbox,
.radio,
.editor{
	border-radius: var(--radius);
	background-color: var(--input);
	color: var(--color);
	transition: var(--transition);
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance:none;
	appearance: none;
}
.input:hover,
.textarea:hover,
.checkbox:hover,
.radio:hover {
    background: var(--input-hover);
}
.input:active,
.textarea:active,
.checkbox:active,
.radio:active {
    box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}
.error {
    background-color: rgba(255, 176, 176, 0.15);
}
.error::-webkit-input-placeholder,
.error:-moz-placeholder {
    color: var(--red);
}
.input,
.textarea,
.editor{
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 4px 12px;
	border: 1px solid transparent;
}
.textarea{
	resize: none;
	transition: var(--transition), height 0s ease;
}
.label-radio,
.label-checkbox{
	margin: calc(var(--gap) / 2);
	display: flex;
	align-items: center;
	cursor: pointer;
}
.radio,
.checkbox{
	position: relative;
	margin-right: .5em;
	padding: 0 !important;
	height: 1.2em; width: 1.2em;
	flex-shrink: 0;
	overflow: hidden;
	cursor: inherit;
}
.radio:checked,
.checkbox:checked {
    background: var(--theme-color-active);
}
.radio:after,
.checkbox:after {
    content: '\20';
    position: absolute;
    transition: transform var(--transition-duration) ease;
}
.radio{
	border-radius: 100%;
}
.radio:after {
    left: 3px; top: 3px; right: 3px; bottom: 3px;
    background-color: var(--background);
    border-radius: inherit;
    transform: scale(0);
}
.radio:checked:after {
    transform: scale(1);
}
.checkbox:after {
    left: 34%; top: 15%;
    height: 50%; width: 20%;
    border-left: 2px solid var(--background);
    border-top: 2px solid var(--background);
    transform: rotate(200deg) scale(0);
}
.checkbox:checked:after{ transform: rotate(220deg) scale(1); }

.select{
	width: 100%;
}
.select > .input {
    cursor: pointer;
    padding-right: 2em;
}
.select > .dropmenu {
    max-height: 32vh;
    overflow: auto;
}
.select.active > .dropmenu {
    overflow: auto !important;
}
.select > .caret {
    position: absolute;
    right: .75em; top: .8em;
    pointer-events: none;
}

.loading{
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    padding: var(--padding);
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 99;
	background-color: var(--background);
    transition: var(--transition);
}
.loading:empty:before,
.loading:empty:after {
    content: '\20';
    margin: auto -4px;
    height: 1.2em; width: 1.2em;
    border-radius: 1.2em;
    transform: scale(0);
}
.loading:empty:before {
    margin-left: auto;
    animation: loading 1s linear infinite;
    background-color: var(--color);
    opacity: 0.6;
}
.loading:empty:after {
    margin-right: auto;
    animation: loading 1s linear .15s infinite;
    background-color: var(--color);
}

.dropmenu{
	position: absolute; z-index: 1;
	top: 100%;
	box-sizing: border-box;
	min-width: 100%;
	background-color: var(--background);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	white-space: nowrap;
	transition: var(--transition);
    opacity: 0;
    transform: translate(4px, 0);
    pointer-events: none;
}
.dropmenu.upward { top: auto; bottom: 100%; }
.dropmenu.leftward{ right: 100%; top: 0; bottom: auto; }
.dropmenu.rightward{ left: 100%; top: 0; bottom: auto; }
[masiv-dropmenu],
[masiv-dropdown]{
	position: relative;
	display: inline-flex;
	border-radius: var(--radius);
}
[masiv-dropmenu] > .btn {
    border-radius: inherit;
}
[masiv-dropmenu].active > .dropmenu,
[masiv-dropdown]:hover > .dropmenu {
    pointer-events: unset;
    transform: none;
    opacity: 1;
}
.static > .dropmenu{ left: 0; right: 0; }

.tip{
	position: absolute; z-index: 100;
	padding: var(--padding);
	border-radius: var(--radius);
    background-color: var(--color);
    color: var(--background);
	box-shadow: var(--shadow);
	transition: var(--transition);
	opacity: 0;
}
.tip-diamond{
	position: absolute;
	height: 12px; width: 12px;
	background-color: inherit;
    transform: translate(-50%,-50%) rotate(45deg);
    border-radius: 2px;
}

[masiv-tabnavs]{
	position: relative;
	white-space: nowrap;
	border-radius: var(--radius);
    text-align: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: auto;
    background-color: var(--theme-color-hover);
}
[masiv-tabnavs]::-webkit-scrollbar { display: none; }
[masiv-tab] {
    flex: 1 0 auto;
    padding: 8px;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0.6;
}
[masiv-tab].active {
    flex-shrink: 0;
    font-weight: 600;
    opacity: 1;
}
.tab{
	display: none;
    padding: 0;
    opacity: 1;
}
.tab.active {
    display: block;
}

.question{
	display: flex;
	padding: var(--gap);
	opacity: 0.6;
	transition: var(--transition);
}
.question:not(:first-child) {
    border-top: 1px solid var(--theme-color-hover);
}
.question.active,
.question:hover {
    opacity: 1;
}
.answer{
    padding: 0 var(--gap);
	height: 0;
	overflow: hidden;
	transition: var(--transition);
}
.active + .answer {
	padding: 4px var(--gap) var(--gap);
	height: unset;
}

[masiv-dragging]{
	user-select: none !important;
	cursor: move !important;
	transition: none !important;
}

.backdrop{
	position: fixed; z-index: 100;
    left: 0; right: 0; top: 0; bottom: 0;
    display: flex;
	padding: var(--gap);
	background-color: transparent;
    transition: var(--transition);
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0,0,0, .4);
}
.backdrop > .dialog {
    position: relative;
    max-height: 100%;
}
.dialog{
	flex-direction: column;
    position: absolute; z-index: 50;
    top: 0; left: 0;
	max-width: calc(100% - 12px);
	margin: auto;
	background-color: var(--background);
	transition: var(--transition);
    opacity: 0;
    pointer-events: none;
	transform: translate(0, 4px);
}
.dialog > .content {
    flex: 1 1 auto;
    overflow: auto;
}
.dialog.active,
.active > .dialog {
    pointer-events: unset;
    opacity: 1;
    transform: none;
}
.backdrop.active {
    opacity: 1;
    pointer-events: unset;
}

.messages{
	position: fixed; z-index: 101;
	left: 0; bottom: 0; right: 0;
	display: flex;
	flex-direction: column;
}
.message{
	padding: var(--padding);
	background-color: var(--background);
	transition: var(--transition);
	opacity: 0;
    transform: translate(var(--gap), 0);
}
.message.active {
    opacity: 1;
    transform: none;
}


.black{ background-color: var(--black); color: var(--white); }
.white{ background-color: var(--white); color: var(--black); }
.blue{ background-color: var(--blue); color: var(--white); }
.red{ background-color: var(--red); color: var(--white); }
.yellow{ background-color: var(--yellow); color: var(--black); }
.green{ background-color: var(--green); color: var(--white); }

.black.reverse{ color: var(--black); background-color: transparent; border-color: var(--black); }
.white.reverse{ color: var(--white); background-color: transparent; border-color: var(--white); }
.red.reverse{ color: var(--red); background-color: transparent; border-color: var(--red); }
.blue.reverse{ color: var(--blue); background-color: transparent; border-color: var(--blue); }
.yellow.reverse{ color: var(--yellow); background-color: transparent; border-color: var(--yellow); }
.green.reverse{ color: var(--green); background-color: transparent; border-color: var(--green); }

.btn.black:hover{ background-color: var(--black-vice); color: var(--white); }
.btn.white:hover { background-color: var(--white-vice); color: var(--black); }
.btn.red:hover{ background-color: var(--red-vice); color: var(--white); }
.btn.blue:hover{ background-color: var(--blue-vice); color: var(--white); }
.btn.yellow:hover{ background-color: var(--yellow-vice); color: var(--black); }
.btn.green:hover{ background-color: var(--green-vice); color: var(--white); }

.black.plain,
.black.plain:hover{ color: var(--black); border-color: transparent !important; }
.white.plain,
.white.plain:hover{ color: var(--white); border-color: transparent !important; }
.red.plain,
.red.plain:hover{ color: var(--red); border-color: transparent !important; }
.blue.plain,
.blue.plain:hover{ color: var(--blue); border-color: transparent !important; }
.yellow.plain,
.yellow.plain:hover{ color: var(--yellow); border-color: transparent !important; }
.green.plain,
.green.plain:hover{ color: var(--green); border-color: transparent !important; }

.btn.plain:hover { background: var(--theme-color-hover); }

/* plugins */
.tree{
    user-select: none;
}
.tree .li {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
}
.tree [node-name] {
    flex: 1 1 auto;
    margin: 0 .4em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree [node-name]:first-child {
    margin-left: 0;
}
.tree [node-checked]{
    margin-right: 0.4em;
    color: var(--blue);
}
.tree [node-checked] + span {
    margin-left: 0;
}
.tree ul {
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-left: 0;
    transition: var(--transition);
}
.tree .opened + ul {
    height: unset;
    padding-left: 1em;
}

.player{
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	user-select: none;
	background-color: #000;
}
.fullscreen > .player-controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    opacity: 0;
}
.fullscreen > .player-controls:hover {
    transition: none;
    opacity: 1;
}
.player-title{
	position: absolute; z-index: 1;
	left: 0; top: 0;
	padding: 4px 12px;
	margin: 8px;
	box-sizing: border-box;
	max-width: calc(100% - 24px);
    background-color: rgba(255,255,255,.4);
    backdrop-filter: blur(24px);
	font-weight: 700;
	border-radius: var(--radius);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: var(--transition);
	opacity: 0;
}
.player-title:hover {
    transition: none;
    opacity: 1;
}
.player-controls{
	position: relative;
	padding-top: 4px;
	display: flex;
	align-items: center;
	background-color: var(--background);
	transition: var(--transition);
}
.player-controls .progress {
    border-radius: 0;
    cursor: pointer;
}
.player-controls .bar {
    min-height: unset;
    padding: 0;
    transition: none;
}
.player-progress{
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 4px;
}
.player-act{
	padding: 4px 8px;
}
.player-act:hover {
    background: rgba(0,0,0,.05);
}
.player-time{
	padding: 0 8px;
	margin-right: auto;
}
.player-widget{
	position: relative;
	display: flex;
}
.player-widget:hover .player-popup {
    padding: 8px;
    height: unset;
}
.player-popup{
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	position: absolute; z-index: 2;
	bottom: 100%; right: 0;
	min-width: 100%;
	padding: 0 8px;
	height: 0;
	overflow: hidden;
	background-color: var(--background);
	border-radius:2px 2px 0 0;
	transition: var(--transition);
}
.player-volume{
	height: 80px; width: 4px;
	transform: rotate(180deg);
}
.player-volume .bar { width: 100%; }
.player-tip{
	position: absolute; z-index: 1;
	right: 8px; top: 8px;
	padding: 4px 12px;
	display: flex;
	align-items: center;
	border-radius: var(--radius);
	background-color: rgba(255,255,255,.6);
	pointer-events: none;
	transition: var(--transition);
	opacity: 0;
}
.player-tip.active {
    opacity: 1;
    transition: none;
}

.swipe{
	position: relative;
}
.swipe-area{
	overflow: hidden;
}
.swipe-track{
	display: flex;
	align-items: center;
	will-change: transform;
	transform-style: preserve-3d;
	touch-action: pan-x;
}
.swiper{
	position: relative;
	box-sizing: border-box;
	flex: 1 1 auto;
}
.swipe-active { z-index: 1; }
.swipe-arrow{
	position: absolute; z-index: 5;
	top: 50%;
	padding: 4px 12px;
	transform: translate(0, -50%);
	text-align: center;
	background-color: var(--white); color: var(--black);
	border-radius: var(--radius);
	user-select: none;
}
.swipe-arrow:hover {
    background: var(--white-vice);
}
.swipe-hidden {
    display: none !important;
}
.swipe-prev{ left: var(--gap); }
.swipe-next{ right: var(--gap); }
.swipe-navs{
	margin: var(--gap) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	user-select: none;
}
.swipe-navs > li {
    margin: 2px;
    width: 10px; height: 10px;
    border-radius: var(--radius);
    background-color: rgba(var(--color), .2);
    cursor: pointer;
    transition: var(--transition);
}

[masiv-input="file"] {
    position: relative;
    cursor: pointer;
    background-color: transparent;
    @supports (-moz-transform: scale(1)){ background-color: var(--input); }
}
[masiv-input="file"]:before,
[masiv-input="file"]:after {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    padding: var(--padding);
    border-radius: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
[masiv-input="file"]:before {
    content: attr(data-file);
    left: 0;
    background-color: var(--input);
    transition: var(--transition);
}
[masiv-input="file"]:after {
    content: attr(data-title);
    margin: 4px;
    display: flex;
    align-items: center;
    background-color: var(--color); color: var(--background);
    font-size: .94em;
}
[masiv-input="file"]:hover:before {
    background: var(--input-hover);
}
.calendar{
	position: absolute; z-index: 10;
	padding: 2px 0;
	width: 224px;
	line-height: 28px;
	box-shadow: var(--shadow);
	background-color: var(--background);
	border-radius: var(--radius);
	text-align: center;
	user-select: none;
	overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(5px);
    transition: var(--transition);
}
.calendar.active {
    pointer-events: unset;
    opacity: 1;
    transform: none;
}
.calendar > ul:first-child {
    opacity: 0.4;
}
.calendar li {
    margin: 2px;
    box-sizing: border-box;
    width: 28px;
    border-radius: var(--radius);
}
.calendar li.active {
    background: var(--theme-color-active);
    color: var(--theme-color-reverse);
    box-shadow: inset var(--shadow);
}
.calendar .diffmon {
    font-style: italic;
    opacity: 0.5;
}
.calendar-selector{
	display: flex;
	justify-content: center;
	font-weight: 600;
}
.calendar-selector a {
    flex: 1 1 auto;
    margin: 2px;
    border-radius: var(--radius);
}
.calendar-selector a:hover {
    background: var(--theme-color-hover);
}
.calendar-days,
.calendar-years,
.calendar-months{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.calendar [data-date],
.calendar [data-year],
.calendar [data-month],
.calendar [data-pn] {
    cursor: pointer;
}
.calendar li:not(.active):hover {
    background: var(--theme-color-hover);
}
.calendar-months,
.calendar-years{
	position: absolute; z-index: 1;
	left: 0; top: 0; bottom: 0; right: 0;
	padding: inherit;
	background-color: inherit;
	align-content: center;
	justify-content: center;
	transition: var(--transition);
	transform: translate(-100%, 0);
}
.calendar-months.active,
.calendar-years.active {
    transform: none;
}
.calendar-years li{ margin: 2px 12px; width: 72px; }
.calendar-months li { width: 70px; }


.editor-container{
	display: flex;
	flex-direction: column;
	min-height: 240px;
	border-radius: var(--radius);
}
.editor-container.full {
    position: fixed; z-index: 100;
    left: 0; right: 0; bottom: 0; top: 0;
    transform: translateZ(0);
}
.full > .editor-toolbar {
    position: static;
}
.editor-toolbar{
	display: flex;
	flex-wrap: wrap;
	border-radius: inherit;
	background-color: var(--background);
	user-select: none;
}
.editor-toolbar .group {
    padding: var(--padding);
    min-width: 152px;
    align-items: center;
}
.editor-toolbar .icon-hashtag {
    margin-right: .5em;
    text-shadow: 0 0 4px #808080;
}
.editor-item{
	padding: 4px 8px;
	border-radius: inherit;
}
.editor-item:hover {
    background: var(--theme-color-hover);
}
.editor-item:active {
    box-shadow: 0 0 0 2px rgba(0,0,0,.15);
}
.editor-colors{
	display: flex;
	flex-wrap: wrap;
	padding: var(--padding);
}
.editor-colors > a {
    box-sizing: border-box;
    height: 20px;
    width: 20%;
    border: 4px solid var(--background);
    border-radius: var(--radius);
}
.editor-colors > a:hover {
    border-color: var(--theme-color-hover);
}
.editor{
	flex: 1 1 auto;
	overflow: auto;
}
.editor ul li { list-style: disc inside; }
.editor ol li { list-style: decimal inside; }
.editor a {
    color: var(--blue);
    border-bottom: 1px dashed var(--blue);
}

.cols{
	display: flex;
	flex-wrap: wrap;
}
.rows{
	display: flex;
	flex-direction: column;
}
[class*=col-],
.n{
	position: relative;
	box-sizing: border-box;
	transition: var(--transition);
}
.col-1{ width: 10%; }
.col-2{ width: 20%; }
.col-25{ width: 25%; }
.col-3{ width: 30%; }
.col-33{ width: 33.3333%; }
.col-4{ width: 40%; }
.col-5{ width: 50%; }
.col-6{ width: 60%; }
.col-66{ width: 66.6666%; }
.col-7{ width: 70%; }
.col-75{ width: 75%; }
.col-8{ width: 80%; }
.col-9{ width: 90%; }
.col-x{ width: 100%; }
.n{ flex: 1 1 0; }

.clearfix:after{ content: '\20'; display: block; clear: both; }
.fixed{ position: fixed !important; }
.sticky{ position: sticky !important; z-index: 50; top: -1px; background-color: var(--background); }
.static{ position: static !important; }
.padless{ padding: 0 !important; }
.transless{ transition: none !important; }
.disabled, [disabled]{ opacity: .6 !important; pointer-events: none !important; }
.right{ float: right; margin-left: auto; }
.center{ margin: auto; align-self: center; text-align: center; }
.round{ border-radius: 10000px; }

/* animation */
@keyframes btn-loading { 100%{ transform: rotate(360deg) translateZ(0); } }
@keyframes loading { 50%{ transform: scale(1); } }
@keyframes bar { 60%{ width: 100%; opacity: .2; } 100%{ width: 100%; opacity: 0; } }

@media (max-width: 980px){
	.col-md-1{ width: 10%; }
	.col-md-2{ width: 20%; }
	.col-md-25{ width: 25%; }
	.col-md-3{ width: 30%; }
	.col-md-33{ width: 33.333333333%; }
	.col-md-4{ width: 40%; }
	.col-md-5{ width: 50%; }
    .col-md-x{ width: 100%; }

    .sidebar{
		position: absolute; z-index: 150;
		left: 0; right: 0; top: 0; bottom: 0;
		width: unset;
		overflow: auto;
        background-color: transparent;
        pointer-events: none;
        opacity: 0;
        background-color: rgba(0,0,0,.4);
        backdrop-filter: blur(24px);
    }
    .sidebar.active {
        pointer-events: unset;
        opacity: 1;
    }
    .sidebar.active > .drawer {
        transform: none;
    }
    .sidebar .drawer {
        float: left;
        min-height: 100%;
        min-width: 50%;
        max-width: 100%;
        background-color: var(--background);
        color: var(--color);
        transition: var(--transition);
        transform: translateX(-100%);
    }
}
@media (min-width: 980px){
	[masiv-sidebar]{ display: none !important; }
}

@media (max-width: 750px){
	.field{ flex-wrap: wrap; }
	[class*=col-]{ width: 100%; flex: 0 1 auto; }
	.cols > .n{ flex: 1 1 .1px; }
	.col-sm-1{ width: 10%; }
	.col-sm-2{ width: 20%; }
	.col-sm-25{ width: 25%; }
	.col-sm-3{ width: 30%; }
	.col-sm-33{ width: 33.333333333%; }
	.col-sm-4{ width: 40%; }
	.col-sm-5{ width: 50%; }
}