* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
}

.fullscreen * {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: 5px;
        scrollbar-color: #448BE2 #fff;
    }
}

/* для Chrome/Edge/Safari */
*::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: #F6F8F9;
}

*::-webkit-scrollbar-thumb {
    background: #448BE2;
    border-radius: 22px;
}

a {
    /*    color: #3F51B5;*/
    text-decoration: none;
    /*    display: inline;*/
    /*    border-bottom: 1px dashed #3F51B5;*/
}

/*a:hover {*/
/*    color: #3F51B5;*/
/*    border-bottom-style: solid;*/
/*}*/

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.justify {
    text-align: justify;
}

html, body {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    background-color: #fff;
    /*overflow: auto;*/
    font-family: "Gilroy";
    min-height: inherit;
    color: #1C1C1C;
}

hr {
    color: #EFEFEF;
    opacity: 1;
}

html.fullscreen,
html.fullscreen body {
    overflow: hidden;
}

html.fullscreen .container,
html.html-library .container {
    max-width: none !important;
}

header {
    position: sticky;
    height: 54px;
    left: 0;
    top: 0;
    z-index: 12;
    color: #333;
    padding: 0 10px;
    border-bottom: 1px solid #E2E2E2;
    width: 100%;
    background: #F5F5F7;
}

header.header-board {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: transparent;
    border: 0;
    height: 50px;
    padding: 0 10px 0 15px;
    position: fixed;
    pointer-events: none;
}

.header-ul {
    display: flex;
    list-style: none;
    gap: 1em;
    margin: 0;
    padding: 0;
}

.header-ul a {
    color: #1C1C1C;
    font-size: 15px;
    line-height: 15px;
    border: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    white-space: nowrap;
    transition: color ease .3s;
    position: relative;
}

.header-ul a span {
    line-height: 48px;
}

.header-ul a small {
    background: #8C8C8C1F;
    border-radius: 4px;
    padding: 0 5px;
    color: #8C8C8C;
    font-size: 12px;
    line-height: 22px;
    min-width: 22px;
    text-align: center;
}

.header-ul a small:empty {
    display: none;
}

.header-ul a small.new:before {
    content: "+";
}

.header-ul a:hover {
    color: #448BE2;
}

.header-ul li.active a {
    color: #448BE2;
    border-bottom-color: #448BE2;
}

.header-ul li.active a small {
    background: rgba(46, 140, 255, 0.12);
    color: #2E8CFF;
}

.header-ul li a small.new {
    background: #f9545b;
    color: #fff;
    padding: 1px 2px;
    position: absolute;
    right: -3px;
    top: 2px;
    line-height: normal;
    font-size: 10px;
    border: 2px #F5F5F7 solid;
    border-radius: 5px;
}

.btn {
    background-color: #448BE2;
    color: #fff;
    --bs-btn-disabled-color: #fff;
    padding: 0 14px;
    border-radius: 6px;
    line-height: 38px;
    white-space: nowrap;
    --bs-btn-disabled-bg: #448BE2;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    gap: 10px;
}

.btn-icon {
    width: 38px;
    min-width: 38px;
    padding: 0;
    min-height: 38px;
}

.btn-icon.btn-sm {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
}

.btn-icon i {
    line-height: 38px;
}

.btn-icon svg {
    stroke: #fff;
    max-width: 22px;
}

.btn-icon--small svg {
    max-width: 18px;
}

.btn-icon.btn-sm svg {
    max-width: 16px;
}

.btn-icon.btn-sm i {
    line-height: 32px;
}

.btn.btn-danger {
    background-color: #C56E6E20;
    --bs-btn-disabled-bg: #C56E6E20;
    color: #C56E6E;
    --bs-btn-disabled-color: #C56E6E;
    outline: 1px solid #C56E6E60;
    line-height: 36px;
}

.btn.btn-danger svg {
    stroke: #C56E6E;
}

.btn:hover,
.btn:active,
.btn:focus,
.btn:first-child:hover,
.btn:first-child:active,
.btn:first-child:focus,
.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    color: #fff;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #448BE2;
    border-color: transparent;
}

.btn.btn-danger:hover,
.btn.btn-danger:active,
.btn.btn-danger:focus,
.btn.btn-danger:first-child:hover,
.btn.btn-danger:first-child:active,
.btn.btn-danger:first-child:focus,
.btn-check:checked + .btn.btn-danger,
:not(.btn-check) + .btn.btn-danger:active,
.btn.btn-danger:first-child:active,
.btn.btn-danger.active,
.btn.btn-danger.show {
    color: #C56E6E;
    background: #C56E6E40;
}

.btn:disabled {
    border: 0;
}

.btn.btn-sm {
    line-height: 32px;
    font-size: 12px;
    max-height: 32px;
}

.btn.btn-light {
    background: #448BE21F;
    color: #2E8CFF;
}

.btn.btn-light:hover,
.btn.btn-light:active,
.btn.btn-light.active,
.btn.btn-light:focus {
    background: #448BE22E;
    color: #2E8CFF;
}

.btn.btn-white {
    border: 1px solid #E1E1E1;
    background: #fff;
    color: #373530;
}

.btn.btn-white.btn-icon svg {
    stroke: #1c1c1c;
}

.btn.btn-white.btn-icon.active {
    border-color: #0073FF;
}

.btn.btn-white.btn-icon.active svg {
    stroke: #0073FF;
}

.btn.btn-white:hover {
    border: 1px solid #C3C3C3;
    background: #fff;
    color: #373530;
}

.btn.btn-white:active,
.btn.btn-white:focus {
    background: #fff;
    border-color: #E1E1E1;
    color: #373530;
}

.btn.wait,
.btn.wait:hover,
.btn.wait:active,
.btn.wait:focus,
.btn.wait:first-child:hover,
.btn.wait:first-child:active,
.btn.wait:first-child:focus,
.btn-check:checked + .btn.wait,
:not(.btn-check) + .btn.wait:active,
.btn.wait:first-child:active,
.btn.wait.active,
.btn.wait.show {
    color: transparent;
    background-image: url("../img/wait-hover.svg");
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: 50%;
}

.btn.wait svg {
    visibility: hidden;
}

.btn.new:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: #fff;
    top: -4px;
    right: -4px;
    border-radius: 100%;
    border: 3px solid #52C4E8;
}

.filter-input {
    background-image: url("../img/search.svg");
    background-repeat: no-repeat;
    background-position: 15px 50%;
    padding: 0 15px 0 40px;
    border: 0;
    border-radius: 6px;
    width: 350px;
    line-height: 38px;
    font-size: 14px;
}

.filter-label {
    font-size: 13px;
    color: #8C8C8C;
}

.filter-select {
    display: none;
}

.filter-select ~ .select2-container--default {
    width: auto !important;
}

.filter-select ~ .select2-container--default .select2-selection--single {
    border: 0;
    background: transparent;
    color: #111;
    font-weight: 500;
    font-size: 14px;
    padding-left: 22px;
    position: relative;
}

.filter-select ~ .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111;
    padding-left: 0;
    transition: color ease .3s;
}

.filter-select ~ .select2-container--default .select2-selection--single:before {
    content: '';
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    background-repeat: no-repeat;
    transition: background-image ease .3s;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMS4zMzMzIDIuNjY2NjZWMTMuMzMzM00xMS4zMzMzIDEzLjMzMzNMOC42NjY2NyAxMC42NjY3TTExLjMzMzMgMTMuMzMzM0wxNCAxMC42NjY3TTQuNjY2NjcgMTMuMzMzM1YyLjY2NjY2TTQuNjY2NjcgMi42NjY2NkwyIDUuMzMzMzJNNC42NjY2NyAyLjY2NjY2TDcuMzMzMzMgNS4zMzMzMiIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZT0iIzExMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
}

.status-bar--sort:hover .select2-selection--single:before,
.select2-container--default:hover .select2-selection--single:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMS4zMzMzIDIuNjY2NjZWMTMuMzMzM00xMS4zMzMzIDEzLjMzMzNMOC42NjY2NyAxMC42NjY3TTExLjMzMzMgMTMuMzMzM0wxNCAxMC42NjY3TTQuNjY2NjcgMTMuMzMzM1YyLjY2NjY2TTQuNjY2NjcgMi42NjY2NkwyIDUuMzMzMzJNNC42NjY2NyAyLjY2NjY2TDcuMzMzMzMgNS4zMzMzMiIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZT0iIzJFOENGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #111 transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #111 transparent;
}

.filter-select ~ .select2-container--open + .select2-container--open {
    position: absolute;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
}

.filter-select ~ .select2-container--open .select2-dropdown--below {
    width: auto !important;
    left: auto;
    right: 0;
    border: 0;
    background: transparent;
}

.filter-select ~ .select2-container--default .select2-results > .select2-results__options {
    background: #fff;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .05);
    overflow: hidden;
    border: 0;
}

.filter-select ~ .select2-container--default .select2-results > .select2-results__options li {
    white-space: nowrap;
    padding: 10px 15px;
    color: #1C1C1C;
    font-size: 14px;
    font-weight: 500;
    transition: background-color ease .3s, color ease .3s;
}


.filter-select ~ .select2-container--default .select2-results__option--selected,
.filter-select ~ .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(0, 0, 0, .025);
    color: #1C1C1C;
}

.logo {
    color: #333;
    text-decoration: none;
    margin: 0 7px 0 0;
    font-size: 26px;
    font-weight: 100;
    border: 0;
    display: flex;
}

.logo img {
    width: 100%;
    height: 28px;
}

.logo img + img {
    display: none;
}

.logo:hover {
    color: #333;
}

.logo span {
    color: #3F51B5;
}

.board-name-input {
    color: #000;
    background-color: transparent;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    opacity: .75;
    pointer-events: all;
    line-height: 26px;
}

body.dark .board-name-input {
    color: #fff;
}

.board-name-input br {
    display: none;
}

.board-name-input * {
    display: inline;
    white-space: nowrap;
}

.board-name-icon {
    position: relative;
    top: 1px;
    pointer-events: all;
}

.board-name-icon svg {
    stroke: #3E79C1;
}

body.dark .board-name-icon svg {
    stroke: #fff;
}

.board-name-input::placeholder {
    color: rgba(0, 0, 0, .5);
}

footer {
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 10;
    color: #fff;
    background: #fff;
    padding: 10px;
    white-space: nowrap;
    overflow: auto hidden;
    display: flex;
    align-items: center;
    gap: 4rem;
    border-top: 1px solid #E2E2E2;
    margin-top: auto;
}

footer ul {
    display: flex;
    list-style: none;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

footer p {
    font-size: 16px;
    line-height: 40px;
}

footer a {
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    color: #1C1C1C;
}

footer a:hover {
    color: #448BE2;
}

.content {
    position: relative;
    min-height: inherit;
    background: #F3F3F3;
    display: flex;
    flex-direction: column;
}

.fullscreen .content {
    padding: 0;
}

.page-login {
    width: 100%;
    padding: 50px 0 0;
    min-height: inherit;
}

.background-grid {
    background-size: 20px 20px;
    background-repeat: repeat;
    background-image: linear-gradient(to right, rgba(63, 81, 181, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(63, 81, 181, 0.1) 1px, transparent 1px);
    background-attachment: fixed;
}

.page-login > div {
    text-align: center;
}

.page-login p {
    font-size: 18px;
}

.bg-primary {
    background-color: #448BE2 !important;
    color: #fff;
}

.primary-block {
    background-color: #3F51B5;
    color: #fff;
    position: relative;
}

.primary-block.primary-block-top:before {
    top: -19px;
    content: "";
}

.primary-block.primary-block-bottom:after {
    content: "";
    bottom: -19px;
}

.to-top {
    position: relative;
    z-index: 1;
}

.primary-block:before,
.primary-block:after {
    background-color: #3F51B5;
    width: 100%;
    height: 20px;
    left: 0;
    position: absolute;
    z-index: 1;
}

.primary-block:before {
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.primary-block:after {
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.primary-block.primary-block-left:before {
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.primary-block.primary-block-left:after {
    clip-path: polygon(0 100%, 0 0, 100% 0);
}

.primary-block.primary-block-right:before {
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.primary-block.primary-block-right:after {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.air {
    padding: 3em 1em;
}

.page-login .logo {
    font-size: 6em;
    line-height: .5em;
    font-family: "Veles";
    margin: 0 0 40px;
    display: inline-block;
    font-weight: bold;
    border: 0;
    text-align: right;
}

.page-login .logo small {
    font-size: 14px;
    display: inline-block;
    text-align: right;
    font-family: "calibri";
    background: #3F51B5;
    color: #fff;
    line-height: 1em;
    padding: .5em;
    border-radius: 6px;
}

.page-login a.logo:hover {
    color: #333;
    text-decoration: none;
}

.page-login h1,
.page-login h2,
.page-login h3,
.page-login h4 {
    font-weight: 100;
}

.page-login h1 {
    font-size: 38px;
    margin-bottom: 40px;
    padding: 0 20px;
}

.page-login h2 {
    font-size: 26px;
    padding: 0 20px;
}

.page-login h3 {
    font-size: 32px;
    margin-bottom: 40px;
}

.page-login h4 {
    font-size: 22px;
}

.page-login label {
    display: block;
}

.bottom-tools {
    position: absolute;
    z-index: 11;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    transition: bottom ease .25s;
}

.bottom-tools.hidden {
    bottom: -80px;
    visibility: visible;
}

.tools {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.bottom-tools:hover {
    pointer-events: all;
}

.tool-line {
    display: flex;
    align-items: center;
    pointer-events: all;
    border: 1px solid #00000014;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    /*overflow: hidden;*/
    box-shadow: 0px -2px 28px 0px #00000012, 0px -1px 2px 0px #00000005;
}

.tool-line-left,
.tool-line-right {
    display: flex;
    flex-direction: column;
}

.tool-line-left {
    border-right: 1px solid #EBEBEB;
}

.tool-line-left .btn-tool.btn-tool-icon.btn-tool-icon-small:first-of-type {
    border-top-left-radius: 20px;
}

.tool-line-right .btn-tool.btn-tool-icon.btn-tool-icon-small:first-of-type {
    border-top-right-radius: 20px;
}

.tool-line-center {
    display: flex;
    padding: 15px 25px;
    gap: 10px;
    border-right: 1px solid #EBEBEB;
}

.tool-line-right {
    position: relative;
}

.canvas-box {
    width: 100%;
    height: 100%;
    min-height: inherit;
    position: relative;
}

.canvas-box canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    min-height: inherit;
    touch-action: none;
    -ms-touch-action: none;
    -webkit-touch-callout: none; /* iOS Safari */
}

.canvas-box canvas#preview {
    min-height: auto;
    position: fixed;
}

canvas.pointer,
canvas[data-tool='handle'] {
    cursor: pointer;
}

canvas.grab {
    cursor: grab;
}

canvas.text {
    cursor: text;
}

canvas[data-tool='eraser'] {
    cursor: none;
}

canvas[data-tool='pen'] {
    cursor: default;
}

canvas.wait {
    cursor: wait;
}

canvas.resize {
    cursor: nwse-resize;
}


@keyframes loader-animate {
    from {
        left: -340px
    }
    50% {
        left: 100%
    }
    to {
        left: -340px;
    }
}

.canvas-box.wait:after {
    content: '';
    display: inline-block;
    width: 26%;
    min-width: 340px;
    height: 5px;
    background: #448BE2;
    background: linear-gradient(90deg, transparent 0%, #448BE2 50%, transparent 100%);
    position: fixed;
    z-index: 10000;
    overflow: hidden;
    animation: loader-animate 3s infinite linear;
}

.canvas-box canvas:first-child {
    position: relative;
}

.canvas-box canvas:last-child {
    z-index: 2;
}

canvas#export {
    opacity: 0;
    z-index: 0;
}

textarea {
    z-index: 4;
    background: transparent;
    color: #fff;
    outline: none;
    resize: horizontal;
    border-radius: 4px;
    border: 2px solid #0073FF4D;
    padding: 10px;
    min-width: 300px;
    overflow: hidden;
    box-sizing: content-box;
}

.text-tool--textarea-container {
    outline: 2px solid #0073FF4D;
    border: 0;
    border-radius: 4px;
}

.text-tool--textarea {
    padding: 0;
    resize: both;
    overflow: hidden;
    font-family: "Consolas";
}

textarea.form-control {
    resize: none;
}

.tool-panel {
    transition: transform ease .3s .5s;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /*transform: translateY(100%);*/
}

.tool-panel > div > div > div.tool-panel--preset {
    position: absolute;
    transform: translateX(-333px);
    background: #fff;
    height: 50px;
    border: 1px solid #F4F4F4;
    border-radius: 6px 6px 0 0;
    display: flex;
    flex-direction: row;
    padding: 0 12px;
    gap: 10px;
}

.tool-panel--preset > div {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.tool-panel--preset > div > div {
    position: relative;
}

.tool-panel--preset button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background-color: #F1F1F1;
    border: 2px solid rgba(0, 0, 0, 15%);
    outline: 1px solid;
    border-radius: 100%;
    font-size: 12px;
}

.tool-panel--preset button:focus {
    outline: 1px solid;
}

.tool-panel--preset > div:last-of-type button {
    border-width: 1px;
    outline: none;
    width: 26px;
    height: 26px;
}

.tool-panel--preset button svg {
    stroke: rgba(0, 0, 0, 40%)
}

.tool-panel--preset button + button {
    position: absolute;
    width: 11px;
    height: 11px;
    top: -3px;
    right: -4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border: 0;
    outline: none;
}

.tool-panel--preset button + button:before,
.tool-panel--preset button + button:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 1px;
    display: block;
    background-color: #A9A9A9;
    transform: rotate(45deg);
}

.tool-panel--preset button + button:after {
    transform: rotate(-45deg);
}

.bottom-tools:hover .tool-panel {
    transform: translateY(0);
    transition: transform ease .3s;
}

.tool-panel > div {
    pointer-events: all;
    border-radius: 10px 10px 0 0;
    border: 1px solid #00000014;
    border-bottom: 0;
    background: #fff;
    box-shadow: 0px -2px 28px 0px #00000012, 0px -1px 2px 0px #00000005;
}

.tool-panel > div > div {
    display: flex;
}

.tool-panel > div > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #ddd;
    justify-content: center;
}

.tool-panel > div > div > div .btn-svg {
    height: 100%;
}

.tool-panel > div > div > div .btn-svg svg {
    stroke: #1C1C1C;
    width: 40px;
    height: 16px;
}

.tool-panel > div > div > div .btn-svg:hover svg {
    stroke: #0073FF;
}

.tool-panel > div > div > div .btn-svg:active {
    background-color: rgba(0, 115, 255, 0.05);
}

.tool-panel > div > div > div:last-of-type {
    border-right: 0;
}

.tool-panel > div > div > div:first-of-type .svg-checkbox span {
    border-top-left-radius: 10px;
    overflow: hidden;
}

.tool-panel > div > div > div:last-of-type .svg-checkbox span {
    border-top-right-radius: 10px;
    overflow: hidden;
}

.tool-panel > div > div > div p {
    max-width: 240px;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

.tool-panel > div > div > div input[type=checkbox],
.tool-panel > div > div > div input[type=file] {
    width: auto;
}

input.color-input,
.tool-panel > div > div > div input.color-input {
    width: 18px;
    height: 18px;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    border-radius: 100%;
    position: relative;
    border: 1px solid #c0c0c0;
    box-sizing: content-box;
    background-clip: content-box;
    padding: 5px;
}

.js-hidden {
    display: none !important;
}

.btn-tool {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: none;
    padding: 0 15px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 38px;
    color: #3F51B5;
    text-decoration: none;
    border: 1px solid #EBEBEB;
    background: #fff;
    min-width: 90px;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
}

.btn-tool svg {
    stroke: #1C1C1C;
    pointer-events: none;
}

.btn-tool.btn-tool-fill svg {
    fill: #1C1C1C;
}

.btn-tool.active,
.btn-tool:active,
.btn-tool:hover:not(:disabled) {
    border-color: #0073FF;
}

.btn-tool.active,
.btn-tool:active {
    background-color: rgba(0, 115, 255, 0.05);
}

.btn-tool.active svg,
.btn-tool:active svg,
.btn-tool:hover:not(:disabled) svg {
    stroke: #0073FF;
}

.btn-tool.btn-tool-fill.active svg,
.btn-tool.btn-tool-fill:active svg,
.btn-tool.btn-tool-fill:hover:not(:disabled) svg {
    fill: #0073FF;
}

.btn.off:after {
    content: "";
    width: 2px;
    height: 80%;
    background: #fff;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    top: 10%;
    margin-left: -1px;
    border-radius: 4px;
}

.btn-tool.off:hover:after {
    background: #fff;
}

.btn-tool.accent {
    box-shadow: 0 0 3px #E64A19;
    color: #E64A19;
}

.btn-tool:not(.btn-tool-icon) i {
    vertical-align: text-bottom;
}

.btn-tool:hover {
    text-decoration: none;
}

.btn-tool.accent:hover:not(:disabled) {
    background-color: #E64A19;
}

.btn-tool:disabled {
    opacity: .2;
}

.btn-tool.wait {
    cursor: wait;
    background-image: url("../img/wait.svg");
}

.btn-tool.wait * {
    opacity: 0;
}

.btn-tool.wait:hover {
    background-image: url("../img/wait-hover.svg");
}

.btn-tool.btn-tool-icon {
    min-width: 50px;
    width: 50px;
    height: 50px;
    background-size: 28px;
    background-position: 50%;
    background-repeat: no-repeat;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    box-shadow: none;
}

.btn-tool.btn-tool-icon.btn-tool-icon-small {
    border: 0;
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 0;
}

.btn-tool.btn-tool-icon i {
    pointer-events: none;
}

.page {
    margin: 20px auto 0;
}

main {
    display: flex;
    background: #fff;
    flex: 1
}

.new-modal main {
    overflow: hidden;
}

main.wait {
    pointer-events: none;
    opacity: .5;
}

main > aside {
    width: 308px;
    min-width: 308px;
    max-width: 308px;
    border-right: 1px solid #E2E2E2;
    padding: 10px;
    position: sticky;
    top: 54px;
    max-height: calc(100vh - 54px);
    overflow: hidden auto;
    background-color: #FBFBFD;
}

.new-modal main > aside {
    top: 0;
    max-height: 100vh;
}

main > aside ul {
    list-style: none;
    width: 100%;
    padding: 0;
    user-select: none;
}

main > aside ul ul {
    padding-left: 20px;
}

main > aside ul li {
    position: relative;
}

main > aside ul li > a.droppable,
main > aside ul li.active > a,
main > aside ul li.active > span,
main > aside ul li > a:hover {
    background: rgba(46, 140, 255, 0.1);
    color: #2E8CFF !important;
}

main > aside ul li.droppable > a small,
main > aside ul li.active > a small,
main > aside ul li.active > span small,
main > aside ul li > a:hover small {
    color: #2E8CFF
}

@keyframes aside-item-pulse {

    0% {
        background: #fff;
    }

    25% {
        background: rgba(46, 140, 255, 0.1);
    }

    50% {
        background: #fff;
    }

    75% {
        background: rgba(46, 140, 255, 0.1);
    }

}

main > aside ul li > a.droppable {
    /*animation: aside-item-pulse 2s 1 ease-in-out;*/
}

main > aside ul li > ul {
    display: none;
}

main > aside ul li.opened > ul {
    display: block;
}

main > aside ul li.droppable > a > svg,
main > aside ul li.active > a > svg,
main > aside ul li > a:hover > svg {
    stroke: #2E8CFF;
}

main > aside ul li a,
main > aside ul li > span {
    color: #111;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    padding: 12px 12px 12px 28px;
    display: flex;
    gap: 10px;
    align-items: start;
    border-radius: 10px;
    transition: background-color ease .3s, color ease .3s;
}

main > aside ul li a {
    cursor: pointer;
}

main > aside ul li > span span {
    cursor: pointer;
}

main > aside ul li a span,
main > aside ul li > span span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    word-break: break-word;
    gap: 10px;
    line-height: normal;
}

main > aside ul li a span .is-beta {
    max-width: 14px;
    margin-right: auto;
    margin-left: 0;
}

main > aside ul li > span span small,
main > aside ul li a span small {
    color: #B5B5B5;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

main > aside ul li a span small.new {
    background-color: #F9545B;
    color: #fff;
    border-radius: 10px;
    padding: 0 5px;
    height: 18px;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
}

main > aside ul li.has-child:before {
    position: absolute;
    left: 9px;
    top: 15px;
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgNC41TDYgNy41TDkgNC41IiBzdHJva2U9IiNBNEE0QTQiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
    transition: transform ease .3s;
    transform: rotate(-90deg);
}

main > aside ul li.has-child.opened:before {
    transform: rotate(0);
}

main > aside ul li a svg,
main > aside ul li > span svg {
    stroke: #111111;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    transition: stroke ease .3s;
}

main > section {
    width: 100%;
}

main > section .breadcrumb {
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin: 0;
    user-select: none;
}

main > section .breadcrumb li {
    display: flex;
    gap: 0 10px;
    align-items: center;
}

main > section .breadcrumb li:after {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI0I1QjVCNSIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
}

main > section .breadcrumb li:last-of-type:after {
    content: none;
}

main > section .breadcrumb li a,
main > section .breadcrumb li > span {
    display: flex;
    color: #111;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    transition: color .3s;
}

main > section .breadcrumb li a svg,
main > section .breadcrumb li > span svg {
    transition: stroke .3s;
    stroke: #111;
    width: 16px;
    height: 16px;
}

main > section .breadcrumb li > span span,
main > section .breadcrumb li a span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

main > section .breadcrumb li span > span {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

main > section .breadcrumb li a:hover {
    color: #2E8CFF;
}

main > section .breadcrumb li a:hover svg {
    stroke: #2E8CFF;
}

main > section.students-section {
    display: grid;
    grid-template-columns: 345px auto;
    position: relative;
}

main > section.students-section > div:first-of-type {
    border-right: 1px solid #E2E2E2;
}

main > section.students-section > div:first-of-type .status-bar + div {
    padding: 0 10px;
    overflow: hidden auto;
    max-height: calc(100vh - 107px);
}

main > section.library-section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.new-modal main > section.library-section {
    overflow: hidden auto;
}

.library-body {
    display: flex;
    padding: 0;
    flex: 1;
    position: relative;
}

.library-body > div:first-of-type {
    width: 100%;
}

body.library-preview .library-body > div:first-of-type {
    max-width: 230px;
}

.library-body > div:last-of-type {
    display: none;
    padding: 10px;
    flex: 1;
    min-width: 300px;
}

body.library-preview .library-body > div:last-of-type {
    display: flex;
}

.library-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid #e2e2e2;
    background: #fff;
    z-index: 2;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 3px 10px;
    line-height: normal;
}

.library-footer .progress {
    width: 100%;
    max-width: 260px;
}

.gallery-preview {
    background-color: #F5F5F7;
    border-radius: 10px;
    flex: 1;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    bottom: 10px;
    user-select: none;
    overflow: hidden;
}

.gallery-preview.wait:before {
    content: '';
    width: 30%;
    height: 3px;
    background: #448BE2;
    background: linear-gradient(90deg, transparent 0%, #448BE2 50%, transparent 100%);
    position: absolute;
    top: 0;
    z-index: 1;
    overflow: hidden;
    animation: loader-animate 2s infinite linear;
}

.gallery-preview > div:not(:first-of-type):not(:last-of-type) {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 10px;
    align-items: center;
    justify-content: center;
}

.gallery-preview.svg > div:not(:first-of-type):not(:last-of-type) > div {
    width: 100%;
}

.gallery-preview > div:first-of-type,
.gallery-preview > div:last-of-type {
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    padding: 10px;
}

.student-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: background-color ease .3s, color ease .3s;
    background-color: #fff;
}

.student-item:hover,
.student-item.active {
    background-color: rgba(46, 140, 255, 0.1);
    color: #2E8CFF;
}

.student-item > div:first-of-type {
    border-radius: 8px;
    overflow: hidden;
    width: 22px;
    min-width: 22px;
    max-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #52C4E8;
    color: #fff;
    font-size: 12px;
}

.student-item > div:first-of-type img {
    width: 22px;
    min-width: 22px;
    max-width: 22px;
}

.student-item > div:last-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-card {
    display: none;
}

.student-card > .pjax-loading:not(.loaded) {
    position: absolute;
    left: 345px;
    right: 0;
    top: 0;
    bottom: 0;
}

.student-card.visible {
    display: block;
}

main > section.students-section .status-bar + div.student-card--content {
    padding: 10px;
}

.student-card--content--main > div:first-of-type {
    width: 98px;
    height: 98px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #52C4E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
}

.student-card--content--main > div:first-of-type img {
    width: 98px;
    height: 98px;
}

.student-card--content h2 {
    font-size: 28px;
    font-weight: 600;
    color: #111;
    margin-bottom: 20px;
}

.student-card--content h3 {
    font-size: 26px;
    font-weight: 500;
    color: #111;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-card--content h3 span {

    padding: 5px 7px;

    background: rgba(140, 140, 140, 0.1);
    border-radius: 4px;

    font-size: 13px;
    line-height: 13px;
    color: #8C8C8C;
    min-width: 21px;
    text-align: center;

}

.student-card--table-header a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2E8CFF;
    font-size: 14px;
    font-weight: 500;
}

.student-card--table-header a svg {
    stroke: #2E8CFF;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    width: 16px;
    min-width: 16px;
}

.student-card--content p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    margin-bottom: 30px;
}

.student-card--content p.accent {
    font-size: 16px;
}

.student-card--content p svg {
    stroke: #2E8CFF;
    width: 18px;
}

.student-card--table {
    max-width: 740px;
}

.student-card--table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.table-row .table-row {
    justify-content: start;
    margin-bottom: 0;
    align-items: start;
}

.table-row p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    line-height: normal;
}

.table-row select {
    min-width: 185px;
}

.table-row p span {
    display: block;
}

.table-row p small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #8C8C8C;
}

.table-row--icon {

    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 60px;
    max-width: 60px;
    width: 60px;
    height: 60px;

    background: #F2F8FF;
    border-radius: 14px;

}

.items-list {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 190px);
    gap: 10px 0;
    padding: 10px 0;
    user-select: none;
    overflow-x: hidden;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    position: sticky;
    top: 54px;
    background: #fff;
    z-index: 11;
    border-bottom: 1px solid #e2e2e2;
    gap: 10px;
    user-select: none;
}

.new-modal .status-bar {
    top: 0;
}

.status-bar--buttons {
    display: flex;
    gap: 0 20px;
    flex-wrap: nowrap;
    align-items: center;
}

.status-bar--sort {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.status-bar--sort:hover .filter-select ~ .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2E8CFF;
}

.status-bar--sort:hover .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #2E8CFF transparent transparent;
}

.status-bar--sort:hover .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #2E8CFF;
}

.status-bar--sort svg {
    stroke: #111
}

.status-bar--sort:hover svg {
    stroke: #2E8CFF;
}

.status-bar--buttons a,
.status-bar--buttons button:not(.btn) {
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    height: 32px;
    font-weight: 500;
    color: #111;
    display: flex;
    gap: 5px;
    align-items: center;
    white-space: nowrap;
    transition: color ease .3s;
}

.status-bar--buttons svg {
    stroke: #111;
    width: 14px;
    transition: stroke ease .3s;
}

.status-bar--buttons a:hover,
.status-bar--buttons button:not(.btn):not(:disabled):hover {
    color: #2E8CFF;
}

.status-bar--buttons a:hover svg,
.status-bar--buttons button:not(.btn):not(:disabled):hover svg {
    stroke: #2E8CFF;
}

.status-bar--buttons a.text-danger,
.status-bar--buttons button:not(.btn).text-danger {
    color: #C56E6E;
}

.status-bar--buttons a.text-danger svg,
.status-bar--buttons button:not(.btn).text-danger svg {
    stroke: #C56E6E;
}

.status-bar--buttons button:not(.btn):disabled {
    opacity: .5;
}

.status-bar--buttons .dropdown {
    display: none;
}

.status-bar--buttons .dropdown-menu {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.03), 0px 4px 28px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 10px 16px;
}

.status-bar--buttons .dropdown-menu a {
    line-height: 32px;
    gap: 10px;
}

.status-bar--buttons .dropdown-menu a span {
    display: flex;
    gap: 5px;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    flex: 1;
}

.status-bar--buttons .dropdown-menu a span small.new {
    background-color: #F9545B;
    color: #fff;
    display: inline-flex;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 7px;
}

.folder-title {
    display: flex;
    gap: 20px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 500;
    color: #111;
    padding: 15px 10px 10px 15px;
    align-items: center;
}

.library-preview .folder-title {
    flex-wrap: wrap;
}

.folder-title > div {
    display: flex;
    gap: 10px;
    align-items: center;
    word-break: break-word;
}

.folder-title > div svg {
    stroke: #9D9D9D;
    width: 20px;
    height: 20px;
}

.board-list-item {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    position: relative;
    cursor: pointer;
}

.board-list-item.moving a {
    pointer-events: none;
}

.board-list-item.droppable .board-list-item-content,
.board-list-item:hover .board-list-item-content {
    background-color: #FCF7EC;
}

@keyframes board-list-item-pulse {

    0% {
        background-color: #fff;
    }

    25% {
        background-color: #FCF7EC;
    }

    50% {
        background-color: #fff;
    }

    75% {
        background-color: #FCF7EC;
    }

}

.board-list-item.droppable .board-list-item-content {
    /*animation: board-list-item-pulse 2s 1 ease-in-out;*/
}

.board-list-item-content {
    padding: 10px;
    border-radius: 18px;
    text-align: center;
    transition: background-color ease .3s;
}

.board-list-item--svg {
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FCF7EC;
    border-radius: 14px;
    margin-bottom: 16px;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    transition: width ease 1s, height ease 1s;
    position: relative;
    position: relative;
}

.board-list-item--members {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.board-list-item--members > a {
    border-radius: 100%;
    width: 20px;
    height: 20px;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #52C4E8;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.board-list-item--members > a.has-photo {
    color: transparent;
}

.board-list-item--members > a.plus {
    color: #52C4E8;
    background-color: transparent;
}

.board-list-item--svg.wait {
    background-image: url("../img/wait.svg");
    background-size: 40px;
}

.board-list-item--svg svg {
    stroke: #E5B243;
}

.board-list-item--board:hover .board-list-item-content,
.board-list-item--item:hover .board-list-item-content {
    background-color: #F2F8FF;
}

.board-list-item--board .board-list-item--svg {
    background-color: #F2F8FF;
}

.board-list-item--item:hover .board-list-item--svg {
    background-color: #F2F8FF;
}

.board-list-item--category .board-list-item--svg,
.board-list-item--category:hover .board-list-item--svg,
.board-list-item--category:hover .board-list-item-content {
    background-color: #E4F2E4;
}

.board-list-item--category .board-list-item--svg svg {
    stroke: #388E3C;
}

.board-list-item--item .board-list-item--svg {
    background-color: transparent;
}

.board-list-item--item .board-list-item--svg svg {
    display: none;
}

.board-list-item.has-preview .board-list-item--svg {
    padding: 10px;
    overflow: hidden;
}

.board-list-item.has-preview .board-list-item--svg svg {
    display: none;
}

.board-list-item.has-preview .board-list-item--svg > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 100%;
}

.board-list-item.has-preview .board-list-item--svg > div > div {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e2e2;
}

.board-list-item.has-preview .board-list-item--svg.portrait > div {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: 1fr 1fr;
}

.board-list-item.has-preview .board-list-item--svg.c-1 > div {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.board-list-item.has-preview .board-list-item--svg.c-2 > div {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

.board-list-item.has-preview .board-list-item--svg.c-2.portrait > div {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.board-list-item.has-preview .board-list-item--svg > div div:nth-child(1) {
    grid-row: 1;
    grid-column: 1 / span 2;
}

.board-list-item.has-preview .board-list-item--svg > div div:nth-child(2) {
    grid-row: 2;
    grid-column: 1;
}

.board-list-item.has-preview .board-list-item--svg > div div:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
}

.board-list-item.has-preview .board-list-item--svg.portrait > div div:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.board-list-item.has-preview .board-list-item--svg.portrait > div div:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.board-list-item.has-preview .board-list-item--svg.portrait > div div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.board-list-item--item.moving .board-list-item--svg {
    background-image: none !important;
}

.board-list-item.moving .board-list-item--svg svg {
    display: block !important;
}

.board-list-item--item .board-list-item--svg svg,
.board-list-item--board .board-list-item--svg svg {
    stroke: #2E8CFF;
}

.board-list-item--name {
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #1C1C1C;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.board-list-item--name > div:first-of-type {
    margin-bottom: 10px;
    line-height: normal;
    word-break: break-word;
}

.board-list-item--name > div:first-of-type[contenteditable=true] {
    white-space: normal;
}

.board-list-item--date {
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #8C8C8C;
    margin-bottom: 10px;
}

.board-list-item--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.board-list-item--tags span {
    font-size: 11px;
    background: #52C4E8;
    padding: 3px 5px;
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    line-height: normal;
}

.board-list-item .btn-svg svg {
    stroke: #8C8C8C;
}

.board-list-item-link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border: 0;
    background: transparent;
    outline: none;
}

.board-list-item-content button,
.board-list-item-content a {
    position: relative;
    z-index: 1;
}

.board-list-item-context {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
}

.board-list-item-context > button {
    background: linear-gradient(0deg, #E5B243, #E5B243), #FFFFFF;
    border-radius: 8px;
    border: 0;
    outline: none;
    width: 22px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.board-list-item--board .board-list-item-context > button,
.board-list-item--item .board-list-item-context > button {
    background: linear-gradient(0deg, #2E8CFF, #2E8CFF), #FFFFFF;
}

.board-list-item-context .context-menu {
    position: absolute;
    top: 25px;
    right: 0;
    left: auto;
    bottom: auto;
    min-width: 150px;
}

.board-list-item-context .context-menu.overflow {
    left: 0;
    right: auto;
}

.board-list-item-context .context-menu svg {
    max-width: 14px;
}

.board-list-item--indicator {
    display: none;
    position: absolute;
    left: 10px;
    top: 5px;
}

.board-list-item--indicator svg {
    width: 16px;
    height: 16px;
}

.is-published .board-list-item--indicator {
    display: block;
}

.board-list-item input {
    width: 100%;
    background: #fff;
    color: #333;
    padding: 10px;
    border: 1px solid #3F51B5;
    border-radius: 6px;
    font-size: 18px;
}

.board-list-item h2 {
    margin: 1em 0;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-list-item p {
    font-size: 18px;
    margin-bottom: 20px;
}

.board-list-item p.date {
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 2em;
    color: #8C8C8C;
}

.board-list-item.moving {
    opacity: .75;
}

.board-list-item.moving .board-list-item--svg {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.board-list-item.moving .board-list-item-content {
    min-height: 262px;
    display: flex;
    align-items: center;
    background-color: transparent;
}

.board-list-item.moving .board-list-item-context,
.board-list-item.moving .board-list-item--date,
.board-list-item.moving .board-list-item--name,
.board-list-item.moving .board-list-item--svg > div,
.board-list-item.moving .board-list-item--tags,
.board-list-item.moving .board-list-item--indicator {
    display: none !important;
}

.message {
    padding: 1rem;
    text-align: center;
    background-color: #3F51B5;
    color: #fff;
    border-radius: 6px;
}

.p20 {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.pv20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.form-line {
    margin-bottom: 20px;
}

.form-line label {
    display: grid;
    grid-template-columns: 200px auto;
    align-items: center;
    font-size: 21px;
}

.plan {
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    border-radius: 15px;
    background-color: #fff;
    text-align: center;
    position: relative;
}

.plan > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1rem;
}

.plan ul {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.plan ul li::before {
    content: "•";
    color: #3F51B5;
    margin-right: 1rem;
}

.plan h2 {
    font-family: "Veles";
    margin-bottom: 1rem;
}

.plan h3 {
    font-family: "Veles";
    color: #3F51B5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1rem;
    font-size: 4rem;
}

.plan h3 s {
    font-size: .8em;
    text-decoration: none;
    position: relative;
}

.plan h3 s:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
    background-color: #3F51B5;
    transform: rotate(-20deg);
}

.plan h3 > span {
    text-align: left;
}

.plan h4 {
    color: #3F51B5;
    margin-bottom: 1rem;
}

.discount {
    text-align: center;
}

.discount span {
    color: #3F51B5;
}

.plan h3 span.rur {
    position: absolute;
    font-size: 32px;
    margin: 0 5px;
    font-family: "Comic Sans MS";
}

.profile {
    padding: 80px 0 60px;
}

.page-error {
    color: #fff;
}

.page-error h1 {
    font-size: 38px;
}

.page-error h2 {
    font-size: 26px;
}

.form-group {
    margin: 0 0 1rem;
}

.form-group-h {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1em;
}

.form-group-h--label {
    min-width: 100px;
}

.form-group > label {
    margin: 0 0 5px;
}

.form-group-h > label {
    margin: 0;
    min-width: 120px;
}

.form-group-h svg {
    min-width: 20px;
}

.chat {
    position: fixed;
    right: -400px;
    top: 0;
    bottom: 0;
    background: #fff;
    width: 400px;
    z-index: 9;
    border-left: 1px solid #52C4E8;
    transition: right ease .5s;
}

.chat.wait,
.chat.wait a,
.chat.wait textarea,
.chat.wait button {
    cursor: wait !important;
}

.chat > div {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chat.visible {
    right: 0;
    z-index: 12;
}

.chat-users {
    position: fixed;
    top: 172px;
    right: 0;
    padding: 0;
    z-index: 9;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.02), 0px -2px 28px rgba(0, 0, 0, 0.07);
    border-radius: 10px 0px 0px 10px;
    border-right: 0;
    background: #fff;
    transition: right ease .5s;
}

.chat.visible ~ .chat-users {
    right: 400px;
}

.chat-users > div {
    overflow: hidden auto;
    max-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    width: 48px;
}

.chat-user {
    width: 32px;
    position: relative;
    cursor: pointer;
}

.chat-user-photo {
    text-align: center;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #52C4E8;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 38px;
    transition: box-shadow ease .25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-user.magnet .chat-user-photo {
    outline: 3px solid #ffb628;
}

.chat-user span {
    font-size: 12px;
    line-height: 12px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333;
}

.chat-user.online:before {
    content: "";
    position: absolute;
    right: 0;
    width: 10px;
    height: 10px;
    background: #44ff44;
    border-radius: 10px;
    border: 2px solid #fff;
}

.chat-messages {
    overflow: hidden auto;
    border-top: 1px solid #52C4E8;
    flex: 1;
    background: linear-gradient(180deg, #E3EFFF 0%, #DAE9FF 100%);
}

.chat-messages > * {
    background-image: url("../img/chat-bg.svg");
    padding: 10px 0 0;
    min-height: 100%;
    background-attachment: fixed;
    background-position: 15px 0;
    background-size: 250px;
}

.chat-new-message-container {
    display: flex;
    align-items: center;
    margin: 0 5px;
}

.chat-new-message {
    border-top: 1px solid #52C4E8;
}

.chat-new-message-file {
    margin: 0;
    padding: 5px;
    font-size: 14px;
    font-weight: 500;
    max-height: 100px;
    overflow: auto;
    border-bottom: 1px solid #EFEFEF;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.chat-new-message-file > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-new-message-file > div img {
    max-width: 40px;
}

.chat-new-message-file > div button {
    margin-left: auto;
}

.chat-new-message-file span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-message--content {
    position: relative;
    display: flex;
}

.self .chat-message--content {
    justify-content: flex-end;
    align-items: center;
    gap: 5px
}

.chat-message--content.chat-message--content--image {
    overflow: hidden;
    box-shadow: 0 0 3px #000;
}

.delete-message-button {
    z-index: 1;
    border: 0;
    background: transparent;
    line-height: normal;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    display: none;
    visibility: hidden;
}

.delete-message-button svg {
    stroke: #1c1c1c;
}

.chat-message.self .delete-message-button {
    display: flex;
}

.chat-message.self:hover .delete-message-button {
    visibility: visible;
}

.chat-new-message textarea {
    resize: none;
    outline: none;
    box-shadow: none;
    z-index: 1;
    border: 0;
    padding: 5px;
    width: 100%;
    color: #333;
    border-radius: 0;
    height: 100%;
    word-break: break-word;
    box-sizing: border-box;
    overflow: hidden auto;
    /*min-height: 92px;*/
    font-size: 14px;
    font-weight: 500;
}

.chat-new-message textarea::placeholder {
    color: rgba(0, 0, 0, .5);
}

.chat-submit {
    display: flex;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.chat-message {
    color: #333;
    margin: 0 5px 5px;
}

.chat-message img {
    max-width: 100%;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #efefef;
}

.chat-message span,
.chat-message strong {
    text-align: left;
    white-space: nowrap;
}

.chat-message.self {
    text-align: right;
}

.chat-message.separated {
    padding-top: 5px;
    margin-top: 5px;
}

.chat-message:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.chat-message strong {
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-message.separated strong {
    display: block;
}

.chat-message--date {
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    padding: 2px 4px;
    border-radius: 6px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    background: #52C4E8;
}

.chat-message--user {
    font-size: 14px;
    font-weight: 600;
}

.chat-message:last-of-type {
    margin-bottom: 5px;
}

.chat-message p {
    background-color: #fff;
    display: inline-block;
    color: #202A35;
    padding: 4px 8px;
    border-radius: 12px;
    word-break: break-word;
    user-select: all;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    border: 1px solid #52C4E8;
    min-width: 36px;
}

.chat-message p {
    border-bottom-left-radius: 0;
}

.chat-message p.deleted {
    font-style: italic;
    font-size: 12px;
    color: #33333350;
}

.chat-message.self p {
    border-radius: 12px;
    border-bottom-right-radius: 0;
}

.chat-message.self p:after {
    left: auto;
    right: -9px;
    border-color: transparent;
    border-left-color: #448BE2;
    border-bottom-color: #448BE2;
}

.chat-message p span {
    display: inline;
    width: 100%;
    user-select: auto;
    white-space: normal;
}

.chat-message p br {
    user-select: auto;
}

.chat-message p a {
    color: #202A35;
    text-decoration: none;
    border-bottom: 1px dashed #202A35;
    display: inline;
    margin: 0 0 5px;
    line-height: 16px;
    user-select: auto;
    word-break: break-all;
}

.chat-message p a:hover {
    border-bottom-style: solid;
}

.chat-button {
    position: fixed;
    right: 0;
    top: 110px;
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.02), 0px -2px 28px rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 0;
    color: #3F51B5;
    background: #fff;
    outline: none;
    cursor: pointer;
    border-radius: 10px 0 0 10px;
    height: 48px;
    width: 48px;
    transition: right ease .5s;
    z-index: 10;
    display: flex;
    padding: 10px;
    gap: 10px;
    align-items: center;
}

.help-content .chat-button {
    position: static;
    display: inline-flex;
    border-radius: 6px;
}

.chat.visible + .chat-button {
    right: 400px;
}

.chat-button:disabled {
    opacity: .5;
}

#chat-new {
    position: absolute;
    right: 40px;
    top: -6px;
    background: #0073FF;
    border-radius: 4px;
    color: #fff;
    font-size: 10px;
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: 0 4px;
}

.advantages {
    margin: 0;
    padding: 0;
    list-style: none;
}

.advantages li {
    padding: 80px 20px 0;
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 22px;
    vertical-align: top;
    text-align: center;
    background-position: 50% 0;
    background-size: 70px;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.lang {
    position: absolute;
    right: 0;
    margin: 1rem;
}

footer select {
    color: #1c1c1c;
    background: transparent;
    border: 0;
    padding: 10px;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

footer select option {
    color: #1c1c1c;
}

html.fullscreen footer {
    display: none;
}

html.fullscreen .page-gallery ~ footer {
    display: block;
}

.text-page {
    background: #fff;
    max-width: 1024px;
    margin: 20px auto;
    padding: 5px 20px;
    font-family: Gilroy;
    font-weight: 500;
    font-size: 14px;
    border-radius: 6px;
}

@media (max-width: 1064px) {
    .text-page {
        margin: 20px;
    }
}

.text-page ul,
.text-page ol {
    padding-left: 40px;
}

.text-page h1,
.text-page h2,
.text-page h3 {
    font-size: 22px;
}

.text-page h1,
.text-page h2,
.text-page h3,
.text-page p {
    margin: 20px 0;
}

.text-page a {
    color: inherit;
}

.tool-panel-left {
    position: fixed;
    left: 0;
    top: 110px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    gap: 1em;
}

.tool-panel-left > div {
    border: 1px solid #EBEBEB;
    box-shadow: 0px -2px 28px 0px #00000012, 0px -1px 2px 0px #00000005;
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: all;
    background: #fff;
}

.tool-panel-left .btn-tool {
    border-radius: 0;
    border: 0;
}

.tool-panel-left .btn-tool:first-of-type {
    border-bottom: 1px solid #EBEBEB;
}

.scroll-container {
    overflow: auto;
}

.admin {
    margin: 80px 0;
}

.help {
    margin: 80px 0;
    color: #333;
}

.help-side {
    position: fixed;
    width: 300px;
    top: 70px;
    bottom: 15px;
    background: #fff;
    border-radius: 14px;
    border-bottom: 1px solid #EFEFEF;
    overflow: hidden;
}

.help-item {
    background: #fafafa;
    border-radius: 14px;
    padding: 1em;
    border: 1px solid #EFEFEF;
    margin: 0 0 1em;
}

.help-side ol {
    list-style: none;
    margin: 0;
    overflow: auto;
    max-height: 100%;
    padding: 1em;
}

.help-side ol li {
    margin-bottom: 10px;
}

.help-side ol li:last-of-type {
    margin-bottom: 0;
}

.help-content {
    padding: 1em;
}

.help-content h1 {
    font-size: 22px;
    color: #1C1C1C;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 1em;
}

.help-content h2 {
    font-size: 18px;
    color: #1C1C1C;
    font-weight: 600;
    line-height: normal;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.help-content h2 ~ p {
    margin: 0 0 .5rem;
    font-size: 14px;
    font-weight: 500;
}

.help-content h2 ~ p:last-child {
    margin-bottom: 0;
}

.graph-function-list {
    padding: 20px;
}

.graph-function-list-input {
    display: flex;
    align-items: center;
    gap: 15px;
}

.graph-function-list-input span {
    white-space: nowrap;
}

.graph-function-list-input input {
    font-size: 18px;
    line-height: 40px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    width: 100%;
}

.graph-function-list-input input.error {
    border-color: rgba(255, 0, 0, 0.7);
}

.graph-function-list-colors {
    display: flex;
    gap: 10px;
    margin: 20px 0;
}

.graph-function-list-colors button {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 14px;
}

.graph-function-list-colors button:hover {
    transform: scale(1.1);
}

.graph-function-list-colors button.active {
    transform: scale(1.2);
}

.graph-function-list-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.parameter {
    display: grid;
    grid-template-columns: 200px auto;
    align-items: center;
    margin: 0 0 20px;
    font-size: 21px;
}

.image-scale-btn {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 0;
    box-shadow: 0 0 5px rgb(0 0 0 / 50%);
    font-size: 28px;
    line-height: 40px;
    padding: 0;
    cursor: pointer;
    color: #3F51B5;
    background-color: #fff;
}

.image-scale-btn i {
    font-size: 18px;
    position: relative;
    top: -2px;
}

.alert-messages {
    position: fixed;
    top: 80px;
    z-index: 10000;
    right: 0;
    width: 480px;
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 100%;
    padding: 0 20px;
}

.fullscreen .alert-messages {
    padding-right: 80px;
}

.alert-messages > div {
    background-color: #fff;
    border: 1px solid #EBEBEB;
    border-left: 5px solid #448BE2;
    box-shadow: 0 -2px 28px 0 #00000030;
    color: #373530;
    font-size: 15px;
    font-weight: 500;
    padding: 1rem;
    border-radius: 6px;
}

.hamburger-button {
    min-width: 38px;
    min-height: 38px;
}

.share-modal-row {
    display: grid;
    grid-template-columns: auto 40px;
    gap: 1rem;
}

.tippy-box {
    background-color: #1E1E1E;
    color: #fff;
    border-radius: 4px;
}

.tippy-box .tippy-content {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
}

.tippy-box .tippy-content .hotkey {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    color: #1E1E1E;
    border-width: 1px;
    border-radius: 2px;
    background: #fff;
    font-family: monospace;
    font-size: 11px;
}

.tippy-arrow {
    color: #1E1E1E;
    display: none !important;
}

code {
    background: #448BE2;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    font-family: monospace;
    min-width: 24px;
    display: inline-block;
    text-align: center;
}

.mb40 {
    margin-bottom: 40px;
}

.auth-clients {
    display: flex;
    justify-content: center;
}

.registration-message {
    padding: 1rem 2rem;
    background-color: #3F51B5;
    color: #fff;
    margin: 0 -1rem 1rem;
    text-align: justify;
    position: relative;
}

.registration-message.registration-message--left {
    margin-right: 0;
}

.registration-message.registration-message--right {
    margin-left: 0;
}

.registration-message.registration-message--left:after,
.registration-message.registration-message--right:before {
    content: "";
    position: absolute;
    top: 50%;
    border: 1rem solid transparent;
    box-sizing: content-box;
    display: block;
    margin-top: -1em;
    bottom: 0;
    width: 0;
    height: 0;
}

.registration-message.registration-message--left:after {
    right: -2rem;
    border-left-color: #3F51B5;
}

.registration-message.registration-message--right:before {
    left: -2rem;
    border-right-color: #3F51B5;
}

.error-page {
    text-align: center;
    position: relative;
    display: flex;
    padding: 1rem;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.error-page span {
    color: #448BE2;
    font-size: 10rem;
    line-height: 10rem;
    font-family: "monospace";
}

.error-page h1 {
    margin: 0 0 1rem;
    font-size: 24px;
    font-weight: 500;
}

.error-page h2 {
    margin: 0 0 2rem;
    font-size: 16px;
    font-weight: 500;
}

/* TYPE RANGE BEGIN */

input[type=range] {
    width: 100%;
    margin: 0;
    background-color: transparent;
    -webkit-appearance: none;
}

input[type=range]:disabled {
    opacity: .5;
}

input[type=range]:focus {
    outline: none;
}

/** RANGE **/

/** TRACK **/

input[type=range]::-webkit-slider-runnable-track {
    background: #ffffff;
    border: 1px solid #c0c0c0;
    border-radius: 15px;
    width: 100%;
    height: 30px;
    cursor: pointer;
    padding: 0 5px;
}

input[type=range]::-moz-range-track {
    background: #ffffff;
    border: 1px solid #c0c0c0;
    border-radius: 15px;
    width: 100%;
    height: 30px;
    cursor: pointer;
    padding: 0 5px;
}

input[type=range]::-ms-track {
    background: #ffffff;
    border: 1px solid #c0c0c0;
    border-radius: 15px;
    width: 100%;
    height: 30px;
    cursor: pointer;
    padding: 0 5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ffffff;
}

/** THUMB **/

input[type=range]::-webkit-slider-thumb {
    margin: 4px 0 0;
    width: 20px;
    height: 20px;
    background: #448BE2;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type=range]::-moz-range-thumb {
    margin: 4px 0 0;
    width: 20px;
    height: 20px;
    background: #3f51b5;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type=range]::-ms-thumb {
    margin: 4px 0 0;
    width: 20px;
    height: 20px;
    background: #3f51b5;
    border: 0;
    border-radius: 100%;
    cursor: pointer;
    -webkit-appearance: none;
}

/** MS ISSUES **/

input[type=range]::-ms-fill-lower {
    background: #fcfcfc;
    border: 0.7px solid #3f51b5;
    border-radius: 12px;
}

input[type=range]::-ms-fill-upper {
    background: #ffffff;
    border: 0.7px solid #3f51b5;
    border-radius: 12px;
}

input[type=range]:focus::-ms-fill-lower {
    background: #ffffff;
}

input[type=range]:focus::-ms-fill-upper {
    background: #ffffff;
}

@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range] {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}

/* TYPE RANGE END */

/* CHECKBOX BEGIN */

.checkbox-list {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
}

.checkbox {
    cursor: pointer;
}

.checkbox > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.checkbox > span {
    display: flex;
    flex-direction: column-reverse;
    user-select: none;
    gap: 10px;
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 20px;
    background: #E4E8EB;
    justify-content: center;
}

.checkbox > span:after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    left: 2px;
    position: relative;
    background: #fff;
    transition: background-color .3s ease, left .3s ease;
    border-radius: 100%;
    box-shadow: 0 1px 4px rgba(55, 67, 75, 0.14);
}

.checkbox > input:checked + span {
    background: #448BE2;
}

.checkbox > input:checked + span::after {
    left: 23px;
}

.checkbox > input:disabled + span {
    opacity: .4;
}

.checkbox.checkbox-inline > span {
    padding-left: 80px;
}

.checkbox.checkbox-inline > span:before {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
}

.checkbox.checkbox-inline > span:after {
    top: 50%;
    bottom: auto;
    margin-top: -10px;
}

.disclaimer {
    position: absolute;
    top: 0;
    left: 20px;
    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
    padding: 8px 10px;
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.disclaimer img {
    height: 12px;
}

.w-75p {
    width: 75px;
}

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

.socials {
    position: fixed;
    top: 0;
    right: 20px;
    background: #fff;
    box-shadow: 0 0 3px rgb(0 0 0 / 50%);
    padding: 10px;
    border-radius: 0 0 6px 6px;
    gap: 10px;
    display: none;
}

.guest .socials {
    display: flex;
}

.socials a {
    color: #3F51B5;
    text-decoration: none;
    border: 0;
    font-size: 22px;
    line-height: 22px;
}

/* CHECKBOX END */

.pagination {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination li a,
.pagination li span {
    border: 1px solid #E9E9E7;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    text-align: center;
    line-height: 36px;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1C1C1C;
    background: #fff;
}

.pagination li.active a {
    background-color: #448BE2;
    color: #fff;
}

.profile-card h2 {
    font-size: 18px;
}

.profile-card h2 small {
    font-size: 14px;
}

.profile-card h2 small.online {
    background-color: #448BE2;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    padding: 5px;
}

.profile-card-board-name {
    color: #3F51B5;
}

.profile-card h3 {
    font-size: 14px;
}

.profile-card-photo {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #52C4E8;
    border: 1px solid #EFEFEF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card-photo span {
    text-align: center;
    font-size: 38px;
    font-weight: 500;
    color: #fff;
    display: block;
}

.password-field {
    position: relative;
}

.password-field i {
    margin-left: .5rem;
    color: #3F51B5;
    cursor: pointer;
}

.gallery.wait {
    pointer-events: none;
    opacity: .5;
}

.audio {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.audio-block {
    padding: .5em;
}

.audio-users {
    padding: 0 5px 0 10px;
    overflow: hidden auto;
    max-height: 65vh;
    flex-basis: auto;
}

.audio-users > div {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 5px;
    margin: 0 0 5px;
}

.chat.visible .audio-users > div {
    grid-template-columns:  auto auto;
}

.chat:not(.visible) .audio-users {
    position: fixed;
    right: 0;
    bottom: 5px;
    width: 320px;
}

.chat:not(.visible) .audio-users > div {
    display: flex;
    flex-wrap: wrap;
}

.chat:not(.visible) .audio-user {
    display: none;
    overflow: hidden;
    height: 100%;
    width: calc(50% - 5px);
}

.chat:not(.visible) .audio-user .audio-user--name,
.chat:not(.visible) .audio-user .audio-user--fader {
    display: none;
}

.chat:not(.visible) .audio-user:nth-child(2n-1):last-child {
    grid-column: 2;
}

.chat:not(.visible) .audio-user.connected.has-video {
    display: flex;
}

.chat:not(.visible) .audio-user:first-of-type:last-of-type video {
    min-width: auto;
}

.chat:not(.visible) .audio-user video {
    min-height: auto;
}

.audio-user {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: auto;
    position: relative;
    padding: 0 5px 0 0;
    background-image: url("../img/wait.svg");
    background-size: 90px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-color: #000;
    width: 100%;
    justify-content: center;
}

.chat.visible .audio-user {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.audio-user.moved {
    position: fixed;
    width: inherit;
}

.audio-user-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 5px;
    bottom: 0;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    z-index: 1;
}

.audio-user.has-video .audio-user-image {
    display: none;
}

.audio-user.disconnected .audio-user-image {
    filter: blur(10px);
}

.audio-user-image i {
    color: #3f51b5;
    font-size: 42px;
    -webkit-text-stroke: 1px #fff;
}

.audio-user video {
    width: 100%;
    background: #000;
    height: auto;
    min-height: 145px;
    max-height: 275px;
    opacity: 0;
}

.audio-user.moved video {
    max-height: none;
}

.audio-user.invert video {
    transform: rotateY(180deg);
}

.audio-user.audio-user--self video {
    min-height: auto;
    max-height: none;
}

.audio-user:first-of-type:last-of-type video {
    min-width: 365px;
}

.audio-user.audio-user--self {
    overflow: visible;
    flex-direction: row;
    background: transparent;
}

.audio-user.audio-user--self video {
    opacity: 1;
}

.audio-user.audio-user--self > div {
    display: flex;
    gap: 5px;
    flex: 1 auto;
}

.audio-user.closed .audio-user-img {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.audio-user.closed video {

}

.audio-user.connected .audio-user-img {
    box-shadow: 0 0 5px rgba(0, 180, 0, .75);
}

.audio-user.connected,
.audio-user.disconnected {
    background-image: none;
}

.audio-user.connected video {
    opacity: 1;
}

.audio-user.connecting .audio-user-img {
    box-shadow: 0 0 5px rgba(0, 0, 180, .75);
}

.audio-user.connecting video {

}

.audio-user.disconnected .audio-user-img {
    box-shadow: 0 0 5px rgba(180, 0, 0, .75);
}

.audio-user.disconnected video {
    opacity: 1;
    filter: blur(10px);
}

.audio-user.failed .audio-user-img {
    box-shadow: 0 0 5px rgba(90, 0, 0, .75);
}

.audio-user.failed video {

}

.audio-user-img {
    border-radius: 100%;
    overflow: hidden;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    text-align: center;
    font-size: 2em;
    color: transparent;
    text-transform: uppercase;
    background-size: cover;
    background-position: 50%;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 1;
}

.audio-user-img.empty {
    color: #3F51B5;
    border: 1px solid #ddd;
}

.audio-user--fader {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 10px;
    bottom: 45px;
    left: 13px;
    opacity: 0;
    visibility: hidden;
    transition: opacity ease .5s;
    z-index: 1;
}

.audio-user:hover .audio-user--fader {
    opacity: 1;
    visibility: visible;
}

.audio-user--self .audio-user--fader {
    position: static;
    opacity: 1;
    visibility: visible;
    height: 100%;
    min-height: 130px;
    z-index: 2;
}

.audio-user.audio-user--student .audio-user--fader {
    display: none;
}

.audio-user--fader-labels {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    padding: 0 1rem 0 0;
}

.level-bar {
    min-width: 5px;
    width: 5px;
    max-width: 5px;
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
}

.level-bar.level-bar--horizontal {
    min-width: auto;
    width: 100%;
    max-width: none;
    min-height: 5px;
    height: 5px;
    max-height: 5px;
    position: relative;
}

.audio-user--self .level-bar {
    position: relative;
}

.audio-user--self .audio-user--buttons {
    position: static;
}

.level-bar :first-of-type {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: gray;
}

.level-bar.level-bar--horizontal :first-of-type {
    right: auto;
    top: 0;
}

.level-bar :not(:first-of-type) {
    mix-blend-mode: overlay;
    height: 100%;
    background-image: linear-gradient(#F44336, #FFEB3B, #4CAF50);
}

.level-bar.level-bar--horizontal :not(:first-of-type) {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #4CAF50, #FFEB3B, #F44336);
}

.audio-user--name {
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    word-break: break-word;
    color: #fff;
    background: #52C4E890;
    border-radius: 6px;
    padding: 4px 8px;
    max-width: 150px;
    z-index: 1;
    opacity: 0;
    transition: opacity ease .2s;
    font-size: 14px;
    font-weight: 500;
}

.audio-user:hover .audio-user--name {
    opacity: 1;
}

.audio-user--name p {
    white-space: nowrap;
    margin: 0;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-user--btn {
    background-color: #52C4E890;
    border: 0;
    color: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    font-size: 12px;
}

.audio-user--btn:not(:disabled):hover,
.audio-user--btn.active {
    background-color: #52C4E8;
}

.audio-user--btn:disabled {
    opacity: .5;
}

.audio-user--right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.audio-user--buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 15px;
    z-index: 1;
    align-items: baseline;
}

.audio-user.audio-user--student .audio-user--buttons > :first-of-type {
    display: none;
}

.audio-user-fullscreen {
    position: absolute;
    right: 8px;
    top: 5px;
    border: 0;
    outline: none;
    background-color: #52C4E890;
    color: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-user-fullscreen:hover {
    background-color: #52C4E8;
}

.audio-user-fullscreen svg {
    stroke: #fff;
}

.gallery-item-image {
    width: 100%;
    padding-bottom: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    position: relative;
    display: flex;
    justify-content: center;
}

.ui-draggable-helper {
    z-index: 10000;
}

/*.ui-draggable-helper .gallery-item {*/
/*    overflow: hidden;*/
/*}*/

/*.ui-draggable-helper .gallery-item img,*/
/*.ui-draggable-helper .gallery-item .gallery-buttons {*/
/*    display: none;*/
/*}*/

.page-gallery {
    /*position: fixed;*/
    /*left: 0;*/
    /*top: 65px;*/
    /*bottom: 45px;*/
    /*right: 0;*/
    /*overflow: hidden auto;*/
}

.page-gallery-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0 0 10px;
    justify-content: space-between;
}

.page-gallery-header > div {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.page-gallery-header h5 {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    margin-right: 1em;
}

math-field {
    border-radius: 4px;
    outline: 2px solid #0073FF4D;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 300px;
    background: transparent;
}

.text-tool--textarea math-field {
    border: 0;
    outline: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    border-radius: 0;
    min-width: auto;
    background-color: transparent;
}

math-field.error {
    border-color: rgb(252, 100, 62);
}

.zoom-tool {
    display: flex;
    flex-direction: column;
}

.zoom-tool span {
    background: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    color: #1C1C1C;
    padding: 6px 0;
    cursor: pointer;
}

.tool-panel-left .zoom-tool .btn-tool:first-of-type {
    border-bottom: 0;
}

.fc-theme-bootstrap5 a:not([href]) {
    border: 0;
}

.calendar-container {
    display: flex;
    flex-direction: column;
    background: #fff;
    flex: 1;
}

.calendar {
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: #fff;
    flex: 1
}

.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    left: 0;
    top: 0;
    right: 0;
}

.calendar-toolbar > div {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
}

.calendar-title {
    font-size: 16px;
    font-weight: 500;
    color: #1c1c1c;
}

.has-error, .has-error * {
    color: #F44336;
    border-color: #F44336;
}

/* Fullcalendar customization */

.fc-theme-bootstrap5 .fc-scrollgrid,
.fc-theme-bootstrap5 .fc-list {
    border: 0;
}

.fc-theme-bootstrap5 .fc-list, .fc-theme-bootstrap5 .fc-scrollgrid, .fc-theme-bootstrap5 td, .fc-theme-bootstrap5 th {
    border-color: #eee;
    font-weight: 500;
}

.fc .fc-timegrid-axis-cushion {
    color: #448BE2;
    font-size: .75em;
}

.fc-timegrid-event {
    border-radius: 3px;
}

.fc-timegrid-event .fc-event-main {
    padding: 3px;
    font-size: 12px;
}

.fc .fc-timegrid-slot {
    height: 65px;
    border-color: #EFEFEF;
}

.fc .fc-timegrid-slot-label-cushion {
    font-size: .75em;
    color: #1c1c1c;
}

.fc .fc-timegrid-divider {
    display: none;
}

.fc-timegrid-event, .fc-timegrid-more-link {
    border-radius: 6px;
}

.fc-col-header-cell {
    color: #1c1c1c;
}

.fc-col-header-cell.fc-day-today {
    font-weight: 700;
}

.fc .fc-timegrid-col.fc-day-today,
.fc .fc-daygrid-day.fc-day-today {
    background-color: inherit;
}

.fc .fc-timegrid-col.holiday,
.fc .fc-daygrid-day.holiday {
    background: #448BE209;
}

.fc-list-event {
    cursor: pointer;
}

.fc .fc-list-empty {
    background-color: #fff;
}

.event-students {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.event-students:empty {
    display: none;
}

.event-student > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.event-student-avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    text-transform: uppercase;
    color: #448BE2;
    border: 1px solid #DFDFDE;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-student h2 {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.event-student p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin: 0;
    font-size: 12px;
}

.event-content > :last-of-type {
    margin: 0;
}

.nav-link {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.nav-link:hover, .nav-link:focus {
    color: #333;
}

.nav-tabs {
    overflow: auto hidden;
    white-space: nowrap;
    flex-wrap: nowrap;
    border: 0;
    display: flex;
    gap: 5px;
    margin-bottom: 1em;
}

.nav-tabs + * .trumbowyg-box,
.nav-tabs + * .trumbowyg-editor {
    border-top: 0;
    border-radius: 0 0 6px 6px;
}

.trumbowyg-button-pane {
    border: 0;
    background-color: #fff;
    padding: 0;
}

.trumbowyg-box svg,
.trumbowyg-modal svg {
    color: #fff;
    fill: #1c1c1c;
}

.trumbowyg-button-pane button:not(.trumbowyg-disable):hover svg,
.trumbowyg-button-pane button.trumbowyg-active:not(.trumbowyg-disable) svg {
    color: #448BE2;
    fill: #448BE2;
}

.trumbowyg-button-pane .trumbowyg-open-dropdown::after {
    border-top-color: #fff;
}

.trumbowyg-button-pane button.trumbowyg-open-dropdown:not(.trumbowyg-disable):hover::after,
.trumbowyg-button-pane button.trumbowyg-open-dropdown.trumbowyg-active:not(.trumbowyg-disable)::after {
    border-top-color: #448BE2;
}

.trumbowyg-dropdown button svg {
    color: #448BE2;
    fill: #448BE2;
}

.trumbowyg-button-pane .trumbowyg-button-group::after {
    content: none;
}

.profile-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    border-radius: 14px;
    border: 1px solid #EFEFEF;
    background: #fff;
    overflow: auto;
    position: -webkit-sticky;
    position: sticky;
    align-self: flex-start;
    top: 70px;
    max-height: calc(100vh - 160px);
}

.profile-tabs button,
.profile-tabs a {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #EFEFEF;
    line-height: 50px;
    text-align: left;
    padding: 0 20px;
    color: #1C1C1C;
    font-size: 16px;
    white-space: nowrap;
    background: transparent;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.profile-tabs button span span {
    background-color: #448BE2;
    font-size: 10px;
    color: #fff;
    border-radius: 4px;
    padding: 3px 5px;
    font-weight: 500;
}

.profile-tabs li:last-child button,
.profile-tabs li:last-child a {
    border: 0;
}

.profile-tabs button:hover,
.profile-tabs a:hover {
    color: #448BE2;
}

.profile-tabs li.active a,
.profile-tabs button.active {
    color: #448BE2;
    background-color: #F5F9FE;
    font-weight: 600;
}

.profile-tab {
    border-radius: 14px;
    border: 1px solid #EFEFEF;
    background: #fff;
    padding: 24px 28px 12px 28px;
}

.profile-tab.profile-tab--payment {
    padding: 1em;
}

.profile-title {
    color: #1C1C1C;
    font-size: 18px;
    font-weight: 600;
    margin: 1rem 0;
}

.profile-text {
    font-size: 15px;
    font-weight: 500;
}

.profile-main {
    display: flex;
    margin-bottom: 1em;
    gap: 1em;
    position: relative;
    align-items: center;
}

.profile-main--name {
    font-size: 22px;
    color: #1C1C1C;
    font-weight: 600;
    line-height: normal;
}

.profile-main--role {
    font-size: 14px;
    font-weight: 500;
}

.profile-photo {
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    background: 50% url("../svg/photo.svg") no-repeat;
    position: relative;
    width: 70px;
    height: 70px;
    background-size: cover;
    min-width: 70px;
}

.profile-photo:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .25);
    background-image: url("../img/photo.svg");
    background-repeat: no-repeat;
    background-position: 50%;
}

.profile-photo:hover:before {
    background-color: rgba(0, 0, 0, .5);
}

.profile-photo-dropdown {
    position: absolute;
    top: 100%;
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
    border-radius: 8px;
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
    display: none;
    opacity: 0;
    z-index: 1;
}

.profile-photo-dropdown.visible {
    display: block;
    opacity: 1;
}

.profile-photo-dropdown li {
    white-space: nowrap;
    color: #1D1D1F;
    font-size: 14px;
    line-height: 14px;
    display: block;
    padding: 1rem;
    cursor: pointer;
}

.profile-photo-dropdown li:hover {
    background-color: rgba(0, 0, 0, .025);
}

.new-modal {

}

.new-modal--gallery .modal-body {
    padding: 0;
}

.new-modal--gallery .gallery {
    padding: 5px;
}

.new-modal .modal-dialog:not(.modal-xl) {
    max-width: 400px;
}

.new-modal .modal-dialog.modal-lg {
    max-width: 600px;
}

.new-modal .modal-dialog.modal-fullscreen {
    max-width: none;
}

.new-modal .modal-header {
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    display: block;
    padding: 0;
    z-index: 1;
}

.new-modal .modal-dialog.modal-fullscreen .modal-header {
    top: 12px;
    right: 2px;
    z-index: 5;
}

.new-modal .modal-header .btn-close {
    background: transparent url("../img/modal-close.svg") no-repeat 50%;
    outline: none;
    width: 12px;
    height: 12px;
    position: relative;
    display: block;
    margin: 0;
    padding: 1rem;
    box-shadow: none;
}

.new-modal-title {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 25px;
}

.new-modal-title.new-modal-title--small {
    font-size: 16px;
}

.new-modal-title svg {
    margin-right: 5px;
}

.new-modal-message {
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
}

@media (max-width: 1199px) {

    .calendar-toolbar {
        top: 60px;
        border: 0;
    }

}

@media (max-width: 1023px) {

    .calendar {
        font-size: 21px;
    }

    .fc-timegrid-event .fc-event-main {
        padding: 5px;
    }

    .calendar-toolbar {
        top: 0;
        gap: 10px;
        margin: 10px 0;
        display: grid;
        grid-template-columns: 135px auto;
        justify-content: start;
    }

    .calendar-toolbar > div {
        font-size: 18px;
    }

    .page-gallery-header {
        right: 90px;
    }

    .status-bar--buttons .dropdown {
        display: block;
    }

}

.gallery-item-image > div {
    opacity: 0;
    z-index: 1;
    position: absolute;
    transition: transform ease 1s;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.gallery-item-image img {
    height: 100%;
    display: none;
}

.gallery-item:hover .gallery-item-image > div,
.gallery-item-image > div:hover {
    opacity: 1;
    z-index: 2;
}

.gallery-item-image.error:before {
    content: "404";
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    text-align: center;
    font-size: 4em;
    color: #3F51B5;
    opacity: .1;
    line-height: 4em;
    margin-top: -2em;
}

.gallery-item-image.wait {
    background-size: 60px;
    background-image: url("../svg/wait.svg");
}

.gallery-folder-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 100%;
    position: relative;
}

.gallery-folder-image svg {
    position: absolute;
    left: 50%;
    top: 50%;
    stroke: #448BE2;
    width: 80px;
    margin-left: -40px;
    margin-top: -40px;
}

.gallery-buttons {
    position: absolute;
    gap: 5px;
    top: 5px;
    left: 5px;
    display: none;
    z-index: 3;
}

.gallery-item-image > div .gallery-buttons,
.gallery-item:hover .gallery-folder-image + .gallery-buttons {
    display: flex;
}

.gallery-rename-button {
    border: 0;
    outline: 0;
    background: transparent;
    margin-top: 7px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-rename-button:first-of-type {
    visibility: hidden;
}

.gallery-rename-button:last-of-type {
    margin-top: 0;
}

.gallery-rename-button svg {
    width: 16px;
    position: relative;
    top: -4px;
}

.gallery-rename-button svg {
    fill: #1c1c1c;
    stroke: none;
}

.gallery-rename-button:first-of-type svg {
    stroke: #1c1c1c;
    fill: none;
}

.gallery-rename-button:last-of-type svg {
    width: 22px;
    height: auto;
    top: -1px;
}

.board-list-item:hover .gallery-rename-button {
    visibility: visible;
}

html.mobile .gallery-rename-button,
html.tablet .gallery-rename-button {
    visibility: visible;
}

[contenteditable] {
    cursor: text;
}

.beta {
    position: relative;
}

.beta:after {
    content: "β";
    background: #52C4E8;
    color: #fff;
    border-radius: 100%;
    font-size: 9px;
    position: absolute;
    bottom: 0;
    left: 100%;
    margin-left: -8px;
    margin-bottom: -4px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}

.beta-disclaimer {
    color: #3F51B5;
    font-size: .8em;
    font-style: italic;
}

.is-beta {
    background: #52C4E8;
    color: #fff;
    border-radius: 100%;
    font-size: 9px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    margin-left: 5px;
}

.profile-menu {
    position: fixed;
    top: 35px;
    right: 10px;
    padding: 15px 0 0;
    text-align: center;
    background: #fff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 0 3px #3f51b5;
    margin: 0;
    overflow: hidden;
    display: none;
    min-width: 178px;
}

#hamburger-button.active + .profile-menu {
    display: block;
}

.profile-menu li {
    display: block;
    margin: 0;
}

.profile-menu li.active {
    background: #fafafa;
}

.profile-menu li a {
    padding: 10px 15px;
    border: 0;
    display: block;
    text-align: left;
}

.profile-menu li a i {
    background-color: #3f51b5;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
}

.profile-menu li a:hover,
.profile-menu li a:active {
    background-color: #fafafa;
}

.profile-menu li:first-child a {
    padding-top: 10px;
}

.profile-menu li:last-child a {
    padding-bottom: 10px;
}

.hamburger {
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 1em;
    pointer-events: all;
}

.button-transparent {
    border: 0;
    outline: none;
    background: transparent;
    display: block;
}

.button-transparent svg {
    display: flex;
    align-items: center;
    justify-content: center;
    stroke: #000;
    opacity: .5;
    transition: opacity ease .3s;
}

.button-transparent:hover svg {
    opacity: 1;
}

body.dark .button-transparent svg {
    stroke: #fff;
}

.profile-button {
    position: relative;
    z-index: 2;
    background: #52C4E8;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid #EBEBEB;
}

.profile-button.is-pro,
.profile-button.is-pro:focus,
.profile-button.is-pro:active {
    border-width: 2px;
    outline: 2px solid #FFB04C;
}

.profile-button i {
    transition: transform .5s ease;
}

.profile-button.active i {
    transform: rotate(180deg);
}

.profile-button-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 28px;
    height: 28px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
}

.button-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.button-dropdown > button.new:after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    outline: 2px solid #fff;
    background-color: #F9545B;
}

.profile-button-dropdown {
    position: absolute;
    top: 35px;
    right: 0;
    background: #fff;
    border-radius: 8px;
    width: 250px;
    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .05);
    overflow: hidden;
    display: none;
    opacity: 1;
}

.profile-button-dropdown.visible {
    display: block;
    opacity: 1;
}

.notices-dropdown {
    position: absolute;
    top: 25px;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .05);
    overflow: hidden;
    display: none;
    opacity: 1;
    padding: .75em 0;
    width: 360px;
}

.notices-dropdown.visible {
    display: block;
    opacity: 1;
}

.notices-list {
    max-height: 200px;
    overflow: hidden auto;
    padding: 0 .75em;
}

.notices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .5em;
    padding: 0 .75em;
}

.notices-header p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.notice-item {
    border-bottom: 1px solid #E2E2E2;
    margin: 0 0 .5em;
    padding: 0 0 .5em;
    font-size: 13px;
}

.notices-list :last-of-type .notice-item {
    border: 0;
    padding: 0;
}

.notice-item a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.notice-item a p {
    margin: 0;
}

.notice-item.viewed a strong {
    font-weight: 500;
}

.notices-footer {
    display: flex;
    font-size: 13px;
    padding: .75em .75em 0;
    border-top: 1px solid #E2E2E2;
    gap: 1em;
    justify-content: space-between;
}

.profile-button-dropdown--name {
    font-size: 16px;
    font-weight: 600;
    padding: 1rem 1rem 0;
}

.profile-button-dropdown--role {
    font-size: 13px;
    font-weight: 500;
    color: #8C8C8C;
    padding: 5px 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.profile-button-dropdown--role > span {
    border-radius: 16px;
    background-color: #FFB04C;
    color: #1c1c1c;
    font-size: 10px;
    padding: 4px 8px;
    font-weight: bold;
}

.profile-button-dropdown ul {
    border-top: 1px solid #EDF1F7;
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-button-dropdown ul a {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #1D1D1F;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    transition: background-color ease .3s;
}

.profile-button-dropdown ul a svg {
    width: 20px;
    stroke: #1D1D1F;
    transition: stroke ease .3s;
}

.profile-button-dropdown ul a:hover {
    background-color: rgba(0, 0, 0, .025);
}

.help-button-dropdown {
    position: absolute;
    right: 0;
    top: 25px;
    background: #fff;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .05);
    margin: 0;
    list-style: none;
    min-width: 200px;
    display: none;
    opacity: 0;
    overflow: hidden;
}

.help-button-dropdown li span {
    font-weight: 600;
    font-size: 14px;
    padding: 10px;
    display: block;
    background-color: #F5F5F7;
}

.help-button-dropdown.visible {
    display: block;
    opacity: 1;
}

.help-button-dropdown a {
    white-space: nowrap;
    color: #1D1D1F;
    font-size: 14px;
    line-height: 14px;
    display: block;
    padding: 10px 24px;
    font-weight: 500;
}

.help-button-dropdown a:hover {
    background-color: rgba(0, 0, 0, .025);
}

.tool-panel > div > div .form-control {
    border-radius: 15px;
    line-height: 18px;
    padding: 5px 0.75rem;
}

.tool-panel > div > div .btn-tool {
    line-height: 30px;
    font-size: 14px;
    padding: 0 10px;
}

#gallery-modal .modal-body {
    overflow-x: hidden;
}

.baseline {
    vertical-align: baseline;
}

.main-mic-button {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 3;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border: 0;
    box-shadow: 0 0 10px #3F51B5;
    color: #3F51B5;
    font-size: 22px;
    transition: right ease .5s;
}

.help-content .main-mic-button {
    position: relative;
    bottom: auto;
    right: auto;
}

.chat.visible ~ .main-mic-button {
    right: 290px;
}

.main-mic-button i {
    pointer-events: none;
}

.main-mic-button:disabled {
    opacity: .5;
}

.main-mic-button:not(:disabled):hover {
    background: #3F51B5;
    color: #fff;
}

.call-panel .nav-tabs {
    margin: 0 0 .5em;
}

.call-panel .nav-tabs .nav-item {
    flex: 1 1 auto;
    min-width: fit-content;
}

.call-panel .nav-tabs .nav-item .nav-link {
    padding: 6px;
    width: 100%;
    text-align: center;
    justify-content: center;
    position: relative;
}

.call-panel .nav-tabs .nav-item .nav-link.is-recording:before {
    content: '';
    margin-right: 8px;
    width: 8px;
    height: 8px;
    background-color: #ff4757;
    border-radius: 50%;
    animation: record-pulse 1.5s infinite;
}

@keyframes record-pulse {
    0% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px rgba(255, 71, 87, 0);
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
    }
}

.call-panel .tab-content > * {
    display: none;
    gap: .5em;
    align-items: center;
    justify-content: center;
}

.call-panel .tab-content > .active {
    display: flex;
}

.audio-timer {
    font-size: 16px;
    font-weight: 500;
    color: #373530;
    margin: 0;
    font-family: monospace;
}

.feedback-stars {
    margin: 2em 0;
}

.feedback-stars > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-stars input {
    visibility: hidden;
    width: 0;
}

.feedback-stars label {
    color: transparent;
    position: relative;
    display: flex;
    width: 50px;
    height: 50px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.feedback-stars svg {
    stroke: #FFC107;
    fill: transparent;
    width: 40px;
    height: 40px;
}

.feedback-stars > div:hover svg,
.feedback-stars > div.active svg {
    fill: #FFC107;
}

.feedback-stars label:hover ~ label svg,
.feedback-stars :checked + label ~ label svg {
    fill: transparent;
}

.form-control,
.form-select {
    border: 1px solid #efefef;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
    min-width: auto;
    padding: 7px 16px;
    border-radius: 6px;
    min-height: 40px;
    position: relative;
}

.form-control.has-error,
.form-select.has-error {
    border-color: #F44336;
}

.form-control.wait {
    background-image: url("../img/wait.svg");
    background-size: 20px;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
}

div.form-select {
    text-align: left;
    background-image: none;
}

.control-label,
.form-label {
    font-size: 13px;
    color: #1C1C1C;
    font-weight: 500;
}

.form-label select {
    margin-top: 5px;
}

.form-label select.form-select {
    overflow: hidden !important;
    text-overflow: ellipsis;
    padding-right: 30px;
}

.control-label-document {
    max-width: 215px;
    min-width: 215px;
}

.form-control:focus,
select.form-select:focus,
.form-control:active,
select.form-select:active {
    border-color: #448BE2;
    box-shadow: none;
    /*background-color: transparent;*/
}

textarea.form-control {
    box-shadow: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    box-shadow: 0 0 3px #dc3545;
}

.form-select.w-100 + .select2-container {
    width: 100% !important;
}

.form-select + .select2-container--default .select2-selection--single {
    border: 1px solid #efefef;
    box-sizing: border-box;
    border-radius: 6px;
    height: 38px;
}

.form-select + .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    font-weight: 500;
    font-size: 14px;
    padding-left: 1em;
}

.form-select + .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px;
}

.justify-content-space-between {
    justify-content: space-between;
}

.question {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: #3f51b5;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    line-height: 16px;
    font-size: 12px;
}

.flex-wrap-nowrap {
    flex-wrap: nowrap;
}

.nav-tabs .nav-link {
    text-align: left;
}

.card-btn {
    background: #448BE21F;
    color: #3E79C1;
    padding: 7px 8px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    border-radius: 6px;
    gap: 5px;
    border: 0;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-btn:hover {
    background: #448BE22E;
}

.card-btn svg {
    position: relative;
    top: -1px;
    margin-right: 2px;
    stroke: #3E79C1;
}

.card-btn.card-btn--danger {
    background: #C56E6E1F;
    color: #C56E6E;
}

.card-btn.card-btn--danger:hover {
    background: #C56E6E40;
}

.card-btn.card-btn--danger svg {
    stroke: #C56E6E;
}

.card-btn:disabled {
    background: #8C8C8C14;
    color: #8C8C8CB2;
}

.card-btn:disabled svg {
    stroke: #8C8C8CB2;
}

.page-title {
    font-size: 24px;
    color: #3F51B5;
    font-weight: normal;
    margin: 0 0 1em;
    border-bottom: 1px solid #ddd;
}

.table.empty {
    margin: 0;
}

.table.empty td {
    border: 0;
}

.hidden-empty:empty {
    display: none !important;
}

.modal.show ~ .modal.show {
    z-index: 1056;
}

.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1055;
}

.align-middle {
    vertical-align: middle;
}

.select2-container .select2-search--inline .select2-search__field {
    box-shadow: none;
    border-radius: 0;
    color: inherit;
}

.no-resize {
    resize: none;
}

.select2-container--krajee-bs5 .select2-selection {
    box-shadow: 0 0 3px #3f51b5;
    border: 0;
    border-radius: 0.375em;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    font-size: 14px;
}

.certificate {
    padding-bottom: 100%;
    margin: 0 0 1em;
    border-radius: 6px;
    overflow: hidden;
    border: 0;
    outline: 0;
    background-color: transparent;
    display: block;
    width: 100%;
    position: relative;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border: 10px solid transparent;
    border-top: 0;
    border-bottom: 0;
}

.certificate:hover {
    box-shadow: 0 0 3px #3F51B5;
}

.certificate-remove {
    font-size: 11px;
    position: absolute;
    right: 5px;
    top: 15px;
    text-decoration: none;
    background: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 0 3px #3f51b5;
    opacity: 0;
}

.certificate:hover .certificate-remove {
    opacity: 1;
}

.certificate-remove.wait {
    background-image: url("../svg/wait.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 20px;
}

.certificate-remove.wait i {
    opacity: 0;
}

.certificate-add {
    box-shadow: 0 0 3px #3F51B5;
}

.certificate-add span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3F51B5;
    font-size: 36px;
}

.certificate-add.wait span {
    background-image: url("../svg/wait.svg");
    background-repeat: no-repeat;
    background-position: 50%;
}

.certificate-add.wait i {
    opacity: 0;
}

.cropper-modal {
    opacity: .25;
}

.library-view-image {
    max-height: calc(100vh - 270px);
    max-width: 100%;
    width: 100%;
    border-radius: 6px;
    cursor: zoom-in;
}

.library-view-image.wait {
    opacity: .5;
}

.btn-collapse {
    text-align: center;
    border: 0;
    margin: 0;
    background: transparent;
    color: inherit;
}

.btn-collapse.collapsed i {
    transform: rotate(90deg);
}

.profile-save {
    height: 60px;
    visibility: hidden;
    position: relative;
    margin-top: -60px;
    margin-bottom: 20px;
}

.profile-save.visible {
    visibility: visible;
    margin-top: 0;
    transition: margin-top .5s ease;
}

.profile-save > div {
    position: fixed;
    height: 60px;
    top: 5px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    z-index: 5;
}

.profile-save.visible > div {
    top: 54px;
    transition: top .5s ease;
}

.profile-save > div:before {
    content: "";
    top: 100%;
    left: 0;
    right: 0;
    position: absolute;
    height: 5px;
    background-image: linear-gradient(rgba(0, 0, 0, .1), transparent);
    z-index: 1;
}

.profile-balance {
    display: flex;
    gap: 1rem;
}

.profile-balance > div:first-child {
    background-color: #F8F8F8;
    padding: 1rem;
    border-radius: 8px;
    min-width: 165px;
}

.profile-balance > div:first-child p {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 1rem;
}

.profile-balance > div:first-child p small {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.profile-balance--plan {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    gap: 1em;
    align-items: center;
    margin: .5rem 0 1rem 0;
}

.profile-balance--plan a {
    font-size: 12px;
    font-weight: 500;
    border-bottom: 1px solid;
}

.profile-balance--plan small {
    background-color: #8C8C8C20;
    color: #8C8C8C;
    padding: 5px 7px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
}

.profile-balance--price {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 1rem;
}

.profile-balance--header {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.profile-balance--status {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.plan-title {
    margin: 0 0 1em;
    font-size: 18px;
    font-weight: 600;
    padding: 0 0 1em;
    border-bottom: 1px solid #EFEFEF;
}

.plan-title small {
    font-size: 14px;
    font-weight: 500;
    display: block;
    color: #8C8C8C;
}

.plan-title svg {
    display: block;
    margin: 0 0 0.5rem;
    height: 30px;
}

.plan-period-title {
    color: #1C1C1C;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px;
}

.plan-period-buttons {
    background-color: #F8F8F8;
    border-radius: 8px;
    padding: 4px;
    display: flex;
    gap: 4px;
    margin: 0 0 1em;
}

.plan-period-buttons button {
    border: 0;
    outline: none;
    background-color: #F1F1F1;
    color: #1C1C1C;
    font-size: 13px;
    line-height: 13px;
    font-weight: 600;
    border-radius: 6px;
    padding: 10px 8px;
    min-width: 35px;
    text-align: center;
    white-space: nowrap;
    flex: 1;
}

.plan-period-buttons button.active {
    background: #fff;
}

.plan-card-price {
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    margin: 1em 0;
}

.plan-card-price small {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.plan-card {
    display: none;
    position: relative;
}

.plan-card .btn {
    white-space: normal;
    line-height: normal;
    padding: 12px;
}

.plan-card svg {
    margin: 0;
    height: auto;
}

.plan-card-discount {
    background: #448BE224;
    color: #448BE2;
    font-weight: 700;
    font-size: 11px;
    padding: 6px;
    border-radius: 6px;
    line-height: normal;
}

.plan-card.visible {
    display: block;
}

.plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.plan-card ul li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: normal;
}

.plan-card ul li svg {
    min-width: 22px;
}

.new-table {
    width: 100%;
    margin-bottom: .75em;
}

.new-table td,
.new-table th {
    border: 0;
    background: transparent;
    padding: 0 5px 1rem;
}

.new-table tr:last-of-type td {
    padding-bottom: 0;
    word-break: break-word;
}

.new-table td .btn-svg svg {
    stroke: #1c1c1c;
}

.new-table--bordered td,
.new-table--bordered th {
    border-bottom: 1px solid #edf1f7;
    padding-top: 1rem;
}

.new-table--bordered tr:last-of-type td {
    border-bottom: 0;
}

.new-table td:first-of-type,
.new-table th:first-of-type {
    padding-left: 0;
}

.new-table td:last-of-type,
.new-table th:last-of-type {
    padding-right: 0;
}

.new-table th,
.new-table th a {
    color: #8C8C8C;
    font-size: 13px;
    font-weight: 600;
}

.new-table td {
    font-size: 14px;
    font-weight: 500;
    color: #1C1C1C;
}

.new-table .filters td {
    vertical-align: top;
}

.new-table .filters td select {
    min-width: 75px;
}

.new-label {
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.new-label--success {
    background-color: rgba(59, 206, 127, 0.12);
    color: #39BB75;
}

.new-label--primary {
    background-color: rgba(167, 167, 167, 0.14);
    color: #7A7A7A;
}

.new-table span small {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #8C8C8C;
}

.alert {
    border-radius: 8px;
    padding: 8px 16px;
    border: 0;
    margin: 0;
    font-size: 14px;
    line-height: 21px;
}

.alert.alert-large {
    border-radius: 12px;
    padding: 1em;
}

.alert.alert-info {
    background: #448BE224;
    color: #448BE2;
    font-weight: 500;
}

.alert.alert-primary {
    background: #F8F8F8;
    color: #1C1C1C;
}

.alert p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.alert .alert-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.alert-warning {
    font-size: 14px;
    font-weight: 500;
    padding: 1em;
}

.alert-warning a {
    color: inherit;
    border-bottom: 1px solid;
}

.alert-warning a:hover {
    color: #3F51B5;
}

.grid-user-avatar {
    width: 36px;
    height: 36px;
    background-color: #52C4E8;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 36px;
    border-radius: 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
}

.settings-title {
    font-size: 16px;
    font-weight: 600;
}

.settings-title small {
    display: block;
    font-size: 14px;
    color: #8C8C8C;
    font-weight: 500;
    margin-top: 5px;
}

.link-sm {
    color: #3E79C1;
    font-size: 13px;
    font-weight: 500;
}

.link-sm:hover {
    color: #448BE2;
}

.btn-svg {
    border: 0;
    background: transparent;
    outline: none;
    display: block;
    padding: 3px 5px;
    line-height: 0;
}

.btn-svg.btn-svg--blue {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #448BE21F;
}

.btn-svg.btn-svg--blue svg {
    stroke: #3E79C1;
}

.btn-svg.btn-svg--blue:hover {
    background: #448BE240;
}

.document-item {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 1.5em;
}

.document-item img,
.document-form img {
    width: 80px;
}

.document-form img {
    cursor: pointer;
}

.document-item-name {
    font-size: 16px;
    font-weight: 600;
}

.document-item-description {
    font-size: 14px;
    font-weight: 500;
}

.document-item-dates {
    font-size: 14px;
    font-weight: 500;
    color: #8C8C8C;
}

.white-space-normal {
    white-space: normal;
}

.document-item-image,
.document-item-upload {
    position: relative;
    overflow: hidden;
    width: 100px;
    border: 1px solid #0000001A;
    border-radius: 6px;
    text-align: center;
    background: #F1F1F1;
}

.document-item-upload {
    cursor: pointer;
}

.document-item-upload:before {
    content: "";
    background: url("../img/photo.svg") no-repeat 50% rgba(0, 0, 0, .5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease .3s;
    pointer-events: none;
}

.document-item-upload:hover:before {
    opacity: 1;
}

.referral-input {
    width: 100%;
    display: flex;
    background: #448BE214;
    border-radius: 6px;
    padding: 8px;
    align-items: center;
    gap: 10px;
}

.referral-input textarea {
    border: 0;
    background: transparent;
    width: 100%;
    padding: 0 8px;
    color: #448BE2;
    resize: none;
    font-size: 14px;
    min-width: auto;
    box-sizing: border-box;
    overflow: auto;
    line-height: 22px;
}

main#gallery aside {
    padding-top: 0;
}

.gallery-search {
    padding-top: 10px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.gallery-modal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    position: sticky;
    top: 0;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    margin: 0;
    z-index: 4;
    background: #fff;
}

.gallery-modal-title h5 {
    font-size: 16px;
    margin-right: 1em;
}

.gallery-modal-title > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 2em;
}

.hidden {
    visibility: hidden;
}

.back-link {
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    opacity: .75;
    pointer-events: all;
    white-space: nowrap;
    min-width: 21px;
    height: 21px;
    justify-content: center;
}

.back-link svg {
    stroke: #000;
}

.back-link span {
    color: #000;
}

.back-link:hover {
    opacity: 1;
}

body.dark .back-link svg {
    stroke: #fff;
}

body.dark .back-link span {
    color: #fff;
}

.help-block {
    font-size: 14px;
    font-weight: 500;
}

.categories-list {
    display: inline-block;
    column-count: 2;
    margin: 0;
    padding: 0 1em;
    column-gap: 2em;
}

.reviews-slider:not(.visible) > :not(:first-of-type) {
    display: none;
}

.slick-arrow {
    border: 0;
    background: transparent;
    outline: none;
    width: auto;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    align-items: center;
    justify-content: center;
    color: #448BE2;
    font-size: 24px;
}

.slick-slide:first-of-type:last-of-type .reviews-slide {
    padding: 0;
}

.reviews-slider > div > div:first-of-type:last-of-type {
    padding: 0;
}

.reviews-slide {
    padding: 0 25px;
    display: flex;
    gap: 1em;
    justify-content: center;
    align-items: center;
}

.slick-arrow.slick-next {
    left: auto;
    right: 0;
}

.noUi-target {
    z-index: 1;
}

.smiles-container {
    position: relative;
}

.smiles-list {
    display: none;
    position: absolute;
    background: #fff;
    padding: 5px;
    border-radius: 6px;
    left: 5px;
    bottom: 36px;
    z-index: 10;
    border: 1px solid #ddd;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
    max-height: 255px;
    overflow: hidden auto;
}

.smiles-container:hover .smiles-list {
    display: grid;
}

.smiles-container button {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 24px;
}

.smiles-list.hidden {
    display: none !important;
}

.tool-checkbox {
    cursor: pointer;
}

.tool-checkbox > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.tool-checkbox > span {
    display: flex;
    user-select: none;
    gap: 10px;
    position: relative;
    color: #1C1C1C;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
}

.tool-checkbox > span::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #EAEDF1;
    background: #fff;
    border-radius: 3px;
}

.tool-checkbox > input:checked + span::before {
    background-color: #448BE2;
    background-image: url("../img/checkbox.svg");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 50%;
}

.range-input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 10px 0 0;
    height: 48px;
}

.range-input--list {
    display: flex;
    position: absolute;
    top: -100%;
    left: 0;
    margin-top: -10px;
    margin-left: 0;
    gap: 5px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #00000014;
    box-shadow: 0px -2px 28px 0px #00000012, 0px -1px 2px 0px #00000005;
    visibility: hidden;
    transition: opacity .1s .1s, visibility .2s 0s;
    opacity: 0;
}

.range-input:hover .range-input--list {
    opacity: 1;
    visibility: visible;
    transition: opacity .1s .1s, visibility 0s 0s;
}

.range-input--thickness .range-input--list button:before {
    content: "";
    transform: rotate(-45deg);
    width: 20px;
    height: 1px;
    background-color: #878787;
    display: block;
}

.range-input--thickness .range-input--list button:nth-child(2):before {
    height: 2px;
}

.range-input--thickness .range-input--list button:nth-child(3):before {
    height: 3px;
}

.range-input--thickness .range-input--list button:nth-child(4):before {
    height: 4px;
}

.range-input--thickness .range-input--list button:hover:before,
.range-input--thickness .range-input--list button.active:before {
    background-color: #0073FF;
}

.range-input--font-size .range-input--list button span {
    font-size: 14px;
    font-weight: 500;
    color: #878787;
}

.range-input--font-size .range-input--list button:hover {
    color: #0073FF;
}

.range-input:hover .range-input--list:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.range-input--controls {
    /*position: absolute;*/
    /*right: 12px;*/
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    order: 2;
}

.range-input--controls button {
    outline: none;
    border: 0;
    display: flex;
    background: transparent;
}

.range-input--list button,
button.range-input--current {
    width: 48px;
    height: 48px;
    outline: none;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding: 14px;
}

.range-input--list button:first-of-type {
    border-radius: 20px 0 0 20px;
}

.range-input--list button:last-of-type {
    border-radius: 0 20px 20px 0;
}

.range-input--list span,
.range-input--current span {
    background: #878787;
    font-size: 0;
    color: transparent;
    display: inline-block;
    border-radius: 100%;
    transition: opacity ease .2s;
    min-width: 1px;
    min-height: 1px;
}

.range-input--eraser .range-input--list span,
.range-input--eraser .range-input--current span {
    border-radius: 0;
}

.range-input--list button.active {
    background: #0073FF0D;
}

.range-input--list button:hover span,
.range-input--list button.active span {
    background: #0073FF;
}

.range-input input {
    border: 0;
    padding: 0 10px 0 0;
    -moz-appearance: textfield;
    max-width: 45px;
    text-align: center;
    min-width: 32px;
}

.range-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.color-input {
    position: relative;
    padding: 0 10px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-input--list {
    display: flex;
    position: absolute;
    top: -100%;
    left: 0;
    margin-top: -10px;
    margin-left: 0;
    gap: 5px;
    background: #fff;
    padding: 8px;
    border-radius: 20px;
    border: 1px solid #00000014;
    box-shadow: 0px -2px 28px 0px #00000012, 0px -1px 2px 0px #00000005;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s .1s, visibility .2s 0s;
}

.color-input:hover .color-input--list {
    opacity: 1;
    visibility: visible;
    transition: opacity .1s .1s, visibility 0s 0s;
}

.color-input--list button,
button.color-input--current {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 3px solid #fff;
    position: relative;
}

.color-input--list button:before,
button.color-input--current:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    border: 2px solid #0000001f;
}

button.color-input--current {
    box-shadow: 0 0 0 2px #0073FF;
}

.color-input--stroke .color-input--list button:after,
.color-input--stroke button.color-input--current:after {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background: #fff;
}

.color-input--list button.active {
    box-shadow: 0 0 0 2px #0073FF;
}

.color-input--list button:hover {
    box-shadow: 0 0 0 2px #0073FF75;
}

.color-input:hover .color-input--list:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.color-input input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 0;
}

.edit-board-name-button {
    pointer-events: all;
}

.edit-board-name-button svg {
    stroke: #000;
    opacity: .75;
}

.edit-board-name-button:hover svg {
    opacity: 1;
}

body.dark .edit-board-name-button svg {
    stroke: #fff;
}

.edit-board-name-button:hover svg {
    stroke: #000;
}

.svg-checkbox {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-checkbox input {
    visibility: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
    display: none;
}

.svg-checkbox svg {
    stroke: #878787;
}

.svg-checkbox--fill svg {
    fill: #878787;
    stroke: none;
    fill-opacity: .2;
}

.svg-checkbox span {
    padding: 10px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    display: none;
}

.svg-checkbox input:checked ~ span {
    background: #0073FF0D;
}

.svg-checkbox input:not(:checked) ~ span:first-of-type {
    display: flex;
}

.svg-checkbox input:disabled ~ span {
    opacity: .5;
}

.svg-checkbox input:checked ~ span:first-of-type {
    display: none;
}

.svg-checkbox input:checked ~ span:last-of-type {
    display: flex;
}

.svg-checkbox input:checked ~ span svg {
    stroke: #0073FF;
}

.svg-checkbox--fill input:checked ~ span svg {
    fill: #0073FF;
    stroke: none;
    fill-opacity: .5;
}

.summary {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 1rem;
}

.board-settings--row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
}

.board-settings--row span {
    font-size: 13px;
    color: #8C8C8C;
    font-weight: 500;
}

.board-settings--row:last-of-type {
    margin-bottom: 0;
}

.board-settings--row svg {
    stroke: #878787;
    width: 20px;
}

.board-settings--row--svg-fill svg {
    stroke: none;
    fill: #878787;
}

.board-settings--row button,
.board-settings--row input[type=number],
.board-settings--row input[type=text],
.board-settings--row .range-input {
    margin-left: auto;
}

.board-settings--row select {
    width: auto;
    min-width: 170px;
    margin-left: auto;
    height: 34px;
    min-height: 34px;
    font-size: 12px;
}

.board-settings--row label {
    margin: 5px 0 5px auto;
}

.board-settings--row .range-input {
    height: 34px;
}

.board-settings--row input[type=text] {
    padding: 6px 12px;
    width: 50% !important;
}

.color-input-inline {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.color-input-inline:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(0, 0, 0, .25);
    border-radius: 100%;
    pointer-events: none;
}

.board-settings--row input[type=color] {
    border: 0;
    outline: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.board-settings--row input[type=color]::-webkit-color-swatch {
    border-color: transparent;
}

.board-settings--row input[type=color]::-moz-color-swatch {
    border-color: transparent;
}

.select2-dropdown {
    font-size: 14px;
    font-weight: 500;
    border-color: #DFDFDE;
    border-radius: 6px;
}

.text-controls {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #00000014;
    box-shadow: 0px 4px 28px 0px #00000014, 0px -1px 2px 0px #00000008;
    display: inline-flex;
    background: #fff;
    z-index: 11;
    position: fixed;
    opacity: .5;
}

.text-controls:hover {
    opacity: 1;
}

.help-item .text-controls {
    position: static;
    opacity: 1;
}

.text-controls.text-controls--column {
    flex-direction: column;
}

.text-controls button svg {
    stroke: #1C1C1C;
}

.text-controls button {
    border: 0;
    outline: none;
    background: transparent;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #A1A1A138;
}

.text-controls button.active,
.text-controls button:hover {
    background: #0073FF0D;
}

.text-controls button.active svg,
.text-controls button:hover svg {
    stroke: #0073FF;
}

.text-controls button:last-of-type {
    border-right: 0;
}

.position {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    color: #1C1C1C;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    z-index: 12;
    display: flex;
    gap: 10px;
    align-items: center;
    opacity: .75;
}

.position svg {
    stroke: #1C1C1C;
    opacity: .75;
}

body.dark .position {
    color: #fff;
}

body.dark .position svg {
    stroke: #fff;
}

.context-menu {
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #00000014;
    box-shadow: 0px 4px 28px 0px #00000014, 0px -1px 2px 0px #00000008;
    padding: 0 12px;
    visibility: hidden;
    pointer-events: none;
    list-style: none;
    min-width: 275px;
}

.context-menu > div button {
    width: 50%;
}

.context-menu > div:not(.selection-scale) button:not(:last-of-type) {
    border-right: 1px solid #A1A1A138;
}

.context-menu.visible {
    visibility: visible;
    pointer-events: all;
}

.context-menu button,
.context-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-bottom: 1px solid #A1A1A138;
    background: transparent;
    outline: none;
    padding: 12px 8px;
    color: #1C1C1C;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
}

.context-menu button svg,
.context-menu a svg {
    stroke: #818181;
    min-width: 16px;
}

.context-menu a.svg-fill svg,
.context-menu button.svg-fill svg {
    stroke: none;
    fill: #818181;
}

.context-menu button:disabled {
    opacity: .5;
}

.selection-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

.selection-scale span {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #A1A1A138;
    border-top: 0;
    border-bottom: 0;
    line-height: 30px;
    margin: 0 12px;
}

.selection-scale button {
    width: 40px;
    height: 40px;
    border: 0;
    outline: none;
    background: transparent;
}

.selection-scale button svg {
    stroke: #1c1c1c;
}

.selection-scale button:disabled {
    opacity: .5;
}

.image-form-group {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.image-form-group .checkbox {
    margin-left: auto;
}

.image-form-group svg {
    min-width: 24px;
    width: 24px;
    stroke: #878787;
    height: 24px;
    min-height: 24px;
}

.image-form-group p,
.image-form-group div.label {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    line-height: 24px;
}

.image-form-group > span {
    color: #8C8C8C;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    display: block;
}

.tool-panel > div > div > div.graph-area {
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    text-align: center;
    padding: 0 1rem;
}

.tool-panel > div > div > div.graph-area > span {
    font-family: "Georgia";
    font-size: 16px;
    font-weight: 400;
}

.tool-panel > div > div > div.graph-area label {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0 12px 0 0;
}

.tool-panel > div > div > div.graph-area label span {
    font-family: "Georgia";
    color: #878787;
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
}

.tool-panel > div > div > div.graph-area .range-input {
    height: auto;
    position: static;
    padding: 0;
}

.tool-panel > div > div > div.graph-area .range-input input {
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    min-width: auto;
    width: 35px;
    max-width: none;
    text-align: center;
    padding: 0;
}

.tool-panel > div > div > div.graph-area .range-input .range-input--controls {
    right: 2px;
    top: 8px;
}

.graph-function-scope {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.graph-function-scope p {
    margin: 0;
}

.graph-function-scope p:last-of-type {
    margin: 0 0 0 10px;
}

.board-settings--row .graph-function-scope .range-input {
    margin: 0 0 0 5px;
}

.board-settings--row .graph-function-scope .range-input input {
    text-align: right;
    max-width: 35px;
}

.board-settings--row .graph-function-scope .range-input .range-input--controls {
    right: 2px;
}

.virtual-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    padding-bottom: 0 !important;
    border-top: 2px solid #0073FF4D;
}

.virtual-keyboard.visible {
    z-index: 10000;
}

.virtual-keyboard > button {
    position: absolute;
    right: calc(50% - 40px);
    bottom: 100%;
    width: 36px;
    height: 32px;
    background: #fff;
    border-radius: 6px 6px 0 0;
    border: 2px solid #0073FF4D;
    border-bottom: 0;
}

.virtual-keyboard > button svg {
    stroke: #1C1C1C;
}

.virtual-keyboard > button:hover svg {
    stroke: #0073FF;
}

.export-preview {
    height: 403px;
    border: 1px solid #ddd;
    margin: 0 0 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    background-position: 50%;
}

.export-preview.wait {
    background-image: url("../img/wait.svg") !important;
    background-position: 50%;
    background-size: 40px;
}

.export-preview button {
    position: absolute;
    top: 50%;
    color: #448BE2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
}

.export-preview button:disabled {
    opacity: .5;
}

.export-preview button:first-of-type {
    left: 0;
}

.export-preview button:last-of-type {
    right: 0;
}

.tools-hide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 100%;
    right: 100%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 0;
    width: 32px;
    height: 26px;
    border-radius: 10px 10px 0 0;
}

.bottom-tools.hidden .tools-hide button {
    transform: rotateX(180deg);
}

.radio-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.radio-list > div {
    white-space: nowrap;
}

.btn-file {
    gap: .5rem;
}

.ticket-uploaded-files {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr 1fr;
}

.file-row {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: .5em;
    font-weight: 500;
    margin: 0 0 1rem;
}

.file-row > span:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto .5em;
    border-radius: 100%;
    background-color: #52C4E8;
    color: #fff;
    font-size: 24px;
}

.file-row > img:first-child {
    width: 100%;
    border-radius: 5px;
}

.file-row > :last-child {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: space-between;
    font-size: 14px;
    line-height: normal;
    width: 100%;
}

.file-row a {
    font-size: 14px;
}

.btn-file {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.select-folder-dropdown .dropdown-menu {
    padding: 1rem;
    max-height: 300px;
    overflow: hidden auto;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border: 0;
}

.select-folder-dropdown .dropdown-menu ul {
    padding-left: 1rem;
}

.select-folder-dropdown .dropdown-menu a {
    font-size: 14px;
    color: #1c1c1c;
    border-bottom: 1px dashed #1c1c1c;
}

.select-folder-dropdown .dropdown-toggle::after {
    position: relative;
    top: 1px;
}

.flex-1 {
    flex: 1;
}

.paste-image-sources {
    padding: 1rem;
    gap: 1rem;
}

fieldset {
    border-radius: 6px;
    border: 1px solid #efefef;
    position: relative;
    padding: 30px 0.5rem 0.5rem;
}

legend {
    float: none;
    width: auto;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    position: absolute;
    top: -18px;
    left: 9px;
    background: #fff;
    padding: 5px 10px;
    border: 1px solid #efefef;
    border-radius: 6px;
}

.keys-table {
    width: 100%;
    margin: 1em 0 0;
}

.keys-table td,
.keys-table th {
    border: 1px solid #ddd;
    text-align: center;
    padding: .5rem;
    width: 50%;
}

.keys-table th {
    font-weight: 500;
}

.keys-table math-field {
    border: 0;
    min-width: auto;
    outline: none;
}

.context-menu > div.context-menu--author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1c1c1c;
    font-size: 12px;
    font-weight: 500;
    background: rgba(161, 161, 161, 0.12);
    border-radius: 8px;
    padding: 6px 6px 6px 10px;
    margin-top: 12px;
    width: 100%;
}

.context-menu--author > span {
    max-width: 50%;
    line-height: 110%;
}

.context-menu--author > div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    align-items: center;
    direction: rtl;
}

.context-menu--author > div > div {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 100%;
    overflow: hidden;
    background-color: #52C4E8;
    color: #fff;
}

.gallery-move {
    display: none;
    gap: 5px;
    padding: 10px;
    width: 100%;
    flex-wrap: wrap;
}

.gallery-move.visible {
    display: flex;
}

.gallery-move .alert {
    flex: 1
}

.radio {
    cursor: pointer;
    display: flex;
}

.radio input {
    width: 1px;
    height: 1px;
    visibility: hidden;
    opacity: 0;
}

.radio input + span {
    background: #F2F2F2;
    color: #555555;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    border: 1px solid #F2F2F2;
    text-align: center;
}

.kv-sort-link.asc:after {
    content: '↓';
}

.kv-sort-link.desc:after {
    content: '↑';
}

.radio input:checked + span {
    background: #EFF4FF;
    border-color: #ADC6FD;
    color: #457FFF;
}

.club-promo {
    background: #fff;
    border-radius: 30px;
    padding: 1em;
    margin: 0 0 1em;
}

.club-promo--title {
    display: block;
    color: #1c1c1c;
    position: relative;
    min-height: 156px;
    background-image: url("../img/teachers-header.svg");
    border-radius: 26px;
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 50% 50%;
    margin: 0 0 30px;
    padding: 40px 0;
}

.club-promo--title > div {
    z-index: 1;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.club-promo--title > div h2 {
    color: #1c1c1c;
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 .5rem;
}

.club-promo--title > div span {
    font-size: 16px;
    font-weight: 500;
}

.radio input:disabled + span {
    opacity: .5;
}

.club-promo--title svg {
    width: 100%;
}

.club-promo ul {
    list-style: none;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0;
    margin: 0 40px 10px;
    gap: 20px
}

.club-promo ul a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.club-promo ul a span {
    color: #1C1C1C;
    font-weight: 500;
    display: inline;
    font-size: 16px;
    line-height: 18px;
    border-bottom: 1px solid #1c1c1c90;
}

.club-promo ul a:hover span {
    color: #448BE2;
    border-color: #448BE290;
}

.categories-list a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid;
}

.pjax-loading .grid-view {
    opacity: .5;
}

.current-device-badge {
    display: none;
}

.current .current-device-badge {
    display: flex;
    align-items: center;
}

.call-modes {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 0 0 1em;
}

.call-modes label {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    align-items: self-start;
}

.call-modes label span {
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: #1C1C1C;
}

.call-modes label span small {
    display: block;
    font-weight: 500;
    font-size: 13px;
    line-height: 130%;
    color: #8C8C8C;
    margin: .5em 0 0;
}

.horizontal-separator {
    display: block;
    width: 1px;
    min-height: 38px;
    border-left: 1px solid #ddd;
}

.btn--ticket-star svg {
    stroke: #FFC107;
}

.new-table tr.highlighted td {
    background-color: #FFC10710;
}

.new-table tr.highlighted td .btn--ticket-star svg {
    fill: #FFC107;
}

.new-table tr.wait td:first-of-type {
    position: relative;
}

.new-table tr.wait td:first-of-type:before {
    content: '';
    position: absolute;
    left: -2em;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #448BE2;
}

.form-control--calendar {
    background-image: url("../img/calendar.svg");
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
    background-size: 14px;
}

.dropdown-item {
    font-size: 14px;
    font-weight: 500;
    color: #1c1c1c;
}

.nav-tabs--task {
    border: 0
}

.nav-tabs .nav-item .nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    background: #F5F5F7;
    border-radius: 6px;
    border: 0;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #1C1C1C;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #2E8CFF;
    background: linear-gradient(0deg, rgba(46, 140, 255, 0.1), rgba(46, 140, 255, 0.1)), #FBFBFD;
}

.fc-direction-ltr .fc-daygrid-event .fc-event-time,
.fc-timegrid-event .fc-event-time {
    font-size: 10px;
}

.fc-daygrid-event {
    align-items: baseline;
    white-space: normal;
    flex-wrap: wrap;
    background-color: rgb(68, 139, 226);
    padding: 5px;
    font-size: 12px;
    color: #fff !important;
    border-radius: 6px;
}

.fc-daygrid-event .fc-event-title {
    width: 100%;
}

.fc-daygrid-dot-event:focus,
.fc-daygrid-dot-event:active,
.fc-daygrid-dot-event:hover {
    background-color: rgb(68, 139, 226);
}

.fc-daygrid-dot-event .fc-event-title {
    font-weight: 500;
}

button.fc-board-link {
    max-width: 100%;
    border: 0;
    outline: none;
    background-color: #fff;
    padding: 0 4px 0 25px;
    border-radius: 3px;
    margin: 3px 0;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 5px 50%;
}

.select2-item--background {
    background-repeat: no-repeat;
    padding: 0 0 0 30px;
    background-size: 16px;
    background-position: 0 50%;
}

.board-background {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3IDIxTDEyIDE3TDcgMjFNNi44IDE3SDE3LjJDMTguODgwMiAxNyAxOS43MjAyIDE3IDIwLjM2MiAxNi42NzNDMjAuOTI2NSAxNi4zODU0IDIxLjM4NTQgMTUuOTI2NSAyMS42NzMgMTUuMzYyQzIyIDE0LjcyMDIgMjIgMTMuODgwMiAyMiAxMi4yVjcuOEMyMiA2LjExOTg0IDIyIDUuMjc5NzYgMjEuNjczIDQuNjM4MDNDMjEuMzg1NCA0LjA3MzU0IDIwLjkyNjUgMy42MTQ2IDIwLjM2MiAzLjMyNjk4QzE5LjcyMDIgMyAxOC44ODAyIDMgMTcuMiAzSDYuOEM1LjExOTg0IDMgNC4yNzk3NiAzIDMuNjM4MDMgMy4zMjY5OEMzLjA3MzU0IDMuNjE0NiAyLjYxNDYgNC4wNzM1NCAyLjMyNjk4IDQuNjM4MDNDMiA1LjI3OTc2IDIgNi4xMTk4NCAyIDcuOFYxMi4yQzIgMTMuODgwMiAyIDE0LjcyMDIgMi4zMjY5OCAxNS4zNjJDMi42MTQ2IDE1LjkyNjUgMy4wNzM1NCAxNi4zODU0IDMuNjM4MDMgMTYuNjczQzQuMjc5NzYgMTcgNS4xMTk4NCAxNyA2LjggMTdaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
}

.fc-list-event-graphic,
.fc-daygrid-event-dot {
    display: none;
}

button.fc-board-link:hover {
    text-decoration: underline;
}

.fc-list-event-title button.fc-board-link {
    background-color: #8C8C8C1F;
    margin: 0 10px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin: 7px 21px 0 0;
}

.search-input {
    background-color: #EFEFF2;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMTAuNUw4LjMyNSA4LjMyNU05LjUgNS41QzkuNSA3LjcwOTE0IDcuNzA5MTQgOS41IDUuNSA5LjVDMy4yOTA4NiA5LjUgMS41IDcuNzA5MTQgMS41IDUuNUMxLjUgMy4yOTA4NiAzLjI5MDg2IDEuNSA1LjUgMS41QzcuNzA5MTQgMS41IDkuNSAzLjI5MDg2IDkuNSA1LjVaIiBzdHJva2U9IiM4MzgzOTQiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
    border: 0;
    outline: none;
    color: #111;
    padding: 0 10px 0 30px;
    height: 40px;
    width: 100%;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.search-input::placeholder {
    color: #838394;
}

.search-input.gallery-folder-search {
    min-width: 215px;
    background-color: #fff;
    border: 1px solid #EFEFF2;
}

.gallery-folder-search--container {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 10px;
    margin-left: auto;
}

.mobile-main-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    background: #fff;
    justify-content: space-around;
    align-items: baseline;
    margin: 0;
    list-style: none;
    padding: 10px 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.06);
    height: 60px;
}

.mobile-main-menu li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-main-menu li a {
    font-size: 11px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: #111;
    align-items: center;
    flex: 1
}

.mobile-main-menu li a span {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

.mobile-main-menu li a span small {
    color: #B5B5B5;
}

.mobile-main-menu li a svg {
    width: 16px;
    stroke: #111;
}

.mobile-main-menu li.active a,
.mobile-main-menu li.active a span small,
.mobile-main-menu li a:hover,
.mobile-main-menu li a:hover span small {
    color: #2E8CFF;
}

.mobile-main-menu li.active a svg,
.mobile-main-menu li a:hover svg {
    stroke: #2E8CFF;
}

.float-left {
    float: left;
}

.ql-snow .ql-tooltip {
    box-shadow: none;
    border-color: #efefef;
    z-index: 1;
}

html[lang=ru] .ql-snow .ql-tooltip::before {
    content: 'Ссылка:'
}

html[lang=ru] .ql-snow .ql-tooltip a.ql-action::after {
    content: 'Изменить'
}

html[lang=ru] .ql-snow .ql-tooltip a.ql-remove::before {
    content: 'Удалить'
}

html[lang=ru] .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: 'Сохранить'
}

.ql-toolbar.ql-snow {
    border-color: #efefef;
    border-top: 0;
}

.ql-container.ql-snow {
    border-color: #efefef;
}

.ql-editor {
    min-height: 100px;
}

.back-button {
    background-color: #fff;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    border: 0;
    outline: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111;
    height: 32px;
    margin: 0 0 15px;
}

.back-button svg {
    stroke: #111;
}

.student-card--content .student-mobile-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.student-card--content .student-mobile-buttons > a,
.student-card--content .student-mobile-buttons > button {
    font-size: 11px;
    color: #111;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    border: 0;
    outline: none;
    height: 54px;
    gap: 5px;
    padding: 0 10px;
    font-weight: 500;
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.student-card--content .student-mobile-buttons > * svg {
    stroke: #2E8CFF;
}

.student-card--content .student-mobile-buttons > *.danger svg {
    stroke: #F9545B;
}

.table-row {
    width: 100%;
}

.table-row > * {
    flex: 1
}

.status-bar--separator {
    width: 1px;
    height: inherit;
    background: #E2E2E2;
    flex: 1;
}

.alert {
    font-weight: 500;
}

.alert a {
    color: inherit;
}

.alert-warning {
    background-color: #FCF7EC;
}

.header-message {
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: center;
}

.header-message svg {
    min-width: 16px;
    width: 16px;
    height: 16px;
    margin-right: .5em;
    margin-bottom: 2px;
}

.header-message a {
    white-space: nowrap;
}

.guest-links {
    font-size: 14px;
    font-weight: 500;
}

.fc .fc-list-day-cushion {
    display: flex;
    align-items: center;
    justify-content: start;
}

.fc-list-day-text:after {
    content: ",\0000a0";
}

.fader-with-text {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 1em;
}

.fader-with-text span {
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #1C1C1C;
}

.fader-with-text .noUi-horizontal {
    height: 2px;
    box-shadow: none;
    border: 0;
    background-color: #E4E8EB;
}

.fader-with-text .noUi-horizontal .noUi-handle {
    width: 16px;
    height: 16px;
    right: 0;
    top: -8px;
    box-shadow: none;
    border: 3px solid #2E8CFF;
    border-radius: 100%;
    cursor: pointer;
}

.fader-with-text .noUi-handle:before,
.fader-with-text .noUi-handle:after {
    content: none;

}

.fader-with-text .noUi-connect {
    background-color: #2E8CFF;
}

.flex-auto {
    flex: auto;
}

.alert-moving {
    flex-wrap: wrap;
}

.form-check-label {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.search-row {
    display: flex;
    gap: 1em;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
    border-bottom: 1px solid #E1E1E1;
    padding: 0 10px 10px;
    cursor: pointer;
    word-break: break-word;
    line-height: 200%;
}

.search-row:hover {
    background-color: #e1e1e1;
}

.search-row > div {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
}

.search-row i {
    background-color: yellow;
    padding: 3px 0;
}

.svg-stroke-primary svg {
    stroke: #448BE2;
}

.tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tree ul {
    display: none;
    margin: 0 0 0 8px;
    padding: 5px 0 0 15px;
    width: 100%;
    border-left: 1px solid #cacaca;
}

.tree li {
    display: flex;
    gap: 5px 10px;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    line-height: 18px;
    margin: 0 0 10px;
    flex-wrap: wrap;
}

.tree li label {
    display: flex;
    gap: 1em;
    cursor: pointer;
}

.tree li label input[type=radio] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.tree li label input[type=radio] + span {
    display: flex;
    gap: 10px;
    position: relative;
    align-items: center;
}

.tree li label input[type=radio] + span:before {
    content: '';
    min-width: 18px;
    height: 18px;
    border-radius: 100%;
    border: 1px solid #878787;
}

.tree li label input[type=radio] + span:after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #448BE2;
    position: absolute;
    top: 4px;
    left: 4px;
    opacity: 0;
}

.tree li label:hover input[type=radio] + span:after {
    opacity: 0.5;
}

.tree li label input[type=radio]:checked + span:after {
    opacity: 1;
}

.tree li.is-folder::before {
    content: url("data:image/svg+xml,\
  <svg width='18' height='16' viewBox='0 0 36 32' fill='none' xmlns='http://www.w3.org/2000/svg'>\
    <path d='M19.5834 8.08333L17.8171 4.55078C17.3087 3.53411 17.0546 3.02574 16.6754 2.65434C16.34 2.32591 15.9359 2.07613 15.4921 1.92307C14.9904 1.75 14.422 1.75 13.2853 1.75H7.23335C5.45985 1.75 4.5731 1.75 3.89572 2.09515C3.29987 2.39875 2.81543 2.88318 2.51183 3.47903C2.16669 4.15642 2.16669 5.04317 2.16669 6.81667V8.08333M2.16669 8.08333H26.2334C28.8936 8.08333 30.2237 8.08333 31.2398 8.60105C32.1336 9.05645 32.8602 9.78311 33.3156 10.6769C33.8334 11.693 33.8334 13.0231 33.8334 15.6833V22.65C33.8334 25.3103 33.8334 26.6404 33.3156 27.6565C32.8602 28.5502 32.1336 29.2769 31.2398 29.7323C30.2237 30.25 28.8936 30.25 26.2334 30.25H9.76669C7.10644 30.25 5.77631 30.25 4.76023 29.7323C3.86646 29.2769 3.1398 28.5502 2.68441 27.6565C2.16669 26.6404 2.16669 25.3102 2.16669 22.65V8.08333Z' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/>\
  </svg>");
    display: inline-block;
}

.tree ul li::before {
    content: none;
}

.tree ul li {
    margin: 0 0 8px;
}

.tree li.active ul {
    display: block;
}

.tags-list {
    font-size: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tags-list label {
    display: flex;
    gap: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.board-map {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    margin: 0 auto;
    border-spacing: 2px;
}

.board-map.board-map--legend {
    table-layout: auto;
}

.board-map td {
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    font-size: 10px;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    width: 50px;
}

.board-map td.wait {
    padding: 374px 0 0 0;
    background-image: url("../img/wait.svg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 30px;
}

.board-map:not(.board-map--legend) td:hover:not(.is-space) {
    border-color: #448BE2 !important;
}

.btn.btn-white.btn-icon.btn-icon-record svg {
    stroke: #F44336;
    fill: #F44336;
    width: 14px;
}

.btn.btn-white.btn-icon.btn-icon-pause svg {
    fill: #F44336;
    stroke: none;
}

.pjax-loading:empty {
    background-image: url("../img/wait.svg");
    min-height: 30px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-bottom: 1em;
}

.mobile .btn-icon-record,
.tablet .btn-icon-record {
    display: none !important;
}

.aside-button,
.status-bar--buttons button.aside-button {
    display: none;
}

.gallery-tags--container button {
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gallery-tags--container button:hover {
    color: #2E8CFF;
}

.gallery-tags--container .dropdown-menu {
    padding: 10px;
}

.pjax-loader {
    background-image: url("../img/wait.svg");
    min-height: 80px;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: 50%;
}

@media (max-width: 1599px) {
    .chat:not(.visible) .audio-users {
        width: 280px;
    }
}

@media (max-width: 1499px) {
    .chat:not(.visible) .audio-users {
        width: 220px;
    }
}

@media (max-width: 1399px) {

    .chat:not(.visible) .audio-users {
        bottom: 90px;
    }

    .plan-title small {
        max-width: 165px;
    }

}

@media (max-width: 1199px) {
    .position {
        bottom: 90px;
    }
}

@media (max-width: 1099px) {

    .btn-tool.btn-tool-icon {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }

    .status-bar {
        flex-direction: column-reverse;
        align-items: start;
        gap: 5px;
    }

    .table-row {
        flex-direction: column;
        align-items: start;
        margin-bottom: 30px;
    }

    .table-row .table-row {
        flex-direction: row;
        align-items: center;
        margin-bottom: 0;
    }

    .status-bar--buttons {
        gap: 5px 10px;
        flex-wrap: wrap;
        width: 100%;
        align-items: center;
    }

    .calendar-container .status-bar--buttons {
        justify-content: center;
    }

    .sort-form {
        margin-left: auto;
    }

    .tool-panel > div > div > div.tool-panel--preset {
        transform: translateX(-264px);
    }

}

@media (max-width: 1023px) {

    .profile-button-name {
        display: none;
    }

    .profile-button.active .profile-button-name {
        display: block;
    }

    .gallery-search input {
        min-width: auto;
    }

    .tool-line-center {
        padding: 8px;
    }

    .control-label-document {
        min-width: auto;
        max-width: none;
    }

    main > aside {
        position: fixed;
        max-width: none;
        z-index: 12;
        left: -100%;
        width: 100%;
        height: 100%;
        transition: left ease-in .15s;
    }

    main > aside.visible {
        left: 0;
    }

    .logo img {
        display: none;
    }

    .logo img + img {
        display: block;
    }

    .header-ul {
        gap: 0;
    }

    .hamburger {
        gap: 20px
    }

    main > section.students-section {
        grid-template-columns: 100%;
    }

    .mobile-fullscreen {
        display: none;
        position: absolute;
        top: 49px;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden auto;
        background: #fff;
    }

    .mobile-fullscreen.visible {
        display: block;
    }

    .mobile-fullscreen .status-bar {
        display: none;
    }

    .student-card {
        padding: 0;
    }

    main > section.students-section .status-bar + div.student-card--content {
        padding: 0;
    }

    main > section.students-section .status-bar + div {
        max-height: none;
    }

    .student-card--content--main {
        background-color: #F5F5F7;
        padding: 10px 20px;
        border-radius: 0 0 20px 20px;
    }

    .student-card--table {
        padding: 20px 20px 0;
    }

    .student-card--content--main > div:first-of-type {
        margin: 0 auto 20px;
    }

    .student-card--content h2 {
        text-align: center;
        font-size: 24px;
    }

    .student-card--content p.accent {
        margin: 0 0 20px;
    }

    .student-card--table-header a {
        background: #F5F5F7;
        border-radius: 10px;
        color: #111;
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .student-card--table-header a:hover {
        background-color: #ECECF2;
    }

    .student-card--table-header a svg {
        stroke: #111;
    }

    .student-card--content h3 {
        font-size: 20px;
    }

    body.library-preview {
        overflow: hidden;
    }

    body.library-preview .library-body > div:last-of-type {
        position: absolute;
        max-width: none;
        background: rgba(0, 0, 0, .5);
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        z-index: 2;
        padding: 0;
    }

    .gallery-preview {
        border-radius: 0;
    }

    .btn-tool.btn-tool-icon,
    .tool-line-left .btn-tool.btn-tool-icon.btn-tool-icon-small:first-of-type,
    .tool-line-right .btn-tool.btn-tool-icon.btn-tool-icon-small:first-of-type {
        border-radius: 0;
    }

    .color-input--list button, button.color-input--current {
        width: 20px;
        height: 20px;
    }

    .color-input--stroke .color-input--list button:after,
    .color-input--stroke button.color-input--current:after {
        width: 10px;
        height: 10px;
    }

    .range-input,
    .color-input {
        height: 38px;
    }

    .range-input--list button, button.range-input--current {
        width: 38px;
        height: 38px;
    }

    .svg-checkbox span {
        width: 38px;
        height: 38px;
        padding: 5px;
    }

    body.library-preview .new-modal main > section.library-section {
        overflow: hidden;
    }

    .library-view-image {
        max-height: calc(100vh - 293px);
    }

    .new-modal .library-view-image {
        max-height: calc(100vh - 225px);
    }

    .tool-panel > div > div > div.tool-panel--preset {
        transform: translateX(-237px);
        height: 40px;
    }

    .aside-button,
    .status-bar--buttons button.aside-button {
        display: block;
    }

}

@media (max-width: 767px) {

    .calendar {
        font-size: 14px;
    }

    .fc-timegrid-event .fc-event-main {
        padding: 2px;
    }

    .registration-message.registration-message--left {
        margin-right: -1rem;
        margin-bottom: 2rem;
    }

    .registration-message.registration-message--right {
        margin-left: -1rem;
    }

    .registration-message.registration-message--left:after,
    .registration-message.registration-message--right:before {
        left: 50%;
        margin-left: -1rem;
        margin-top: 0;
        border-color: transparent;
    }

    .registration-message.registration-message--left:after {
        border-top-color: #3F51B5;
        bottom: 0;
        top: 100%;
    }

    .registration-message.registration-message--right:before {
        border-bottom-color: #3F51B5;
        bottom: 100%;
        top: 0;
        margin-top: -2rem;
    }

    .profile {
        padding-bottom: 0;
    }

    .lang {
        position: relative;
    }

    .page-login {
        padding-bottom: 0;
    }

    .help-side {
        position: static;
        max-height: none;
        columns: 3;
        margin-bottom: 1rem;
        width: 100%;
    }

    .help-content {
        padding: 10px;
    }

    .help-side ol {
        overflow: visible;
    }

    .btn-tool {
        min-width: auto;
        font-size: 16px;
    }

    .chat-button {
        top: 90px;
    }

    .tool-panel {
        width: auto;
        height: auto;
        left: 0;
        right: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .tool-panel > div > div {
        flex-wrap: wrap;
    }

    .tools {
        width: auto;
        overflow: auto hidden;
        height: auto;
        left: 0;
        right: 0;
        border-radius: 0;
    }

    .tool-panel > div > div > div > div label.checkbox {
        white-space: nowrap;
    }

    .chat {
        border: none;
        transition: none;
    }

    .chat-users {
        transition: none;
    }

    .chat.visible + .chat-button {
        right: 0;
        z-index: 12;
    }

    .chat.visible,
    .chat.visible > div,
    .chat-messages > div {
        width: auto;
    }

    .chat.visible {
        margin: 0;
        left: 0;
        z-index: 12;
    }

    .chat.visible .chat-button {
        left: 0;
        right: auto;
        border-radius: 0 6px 6px 0;
        z-index: 12;
        opacity: .5;
    }

    .chat-button {
        top: 125px;
    }

    .chat-users {
        top: 180px;
    }

    .main-mic-button {
        bottom: 90px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 14px;
        transition: none;
    }

    .audio {
        flex-direction: column-reverse;
    }

    .audio-user {
        align-items: center;
    }

    .audio-user.audio-user--self {
        max-width: none;
        flex-direction: column;
    }

    .audio-users {
        grid-template-columns: auto;
    }

    .page-gallery-header {
        left: 15px;
        flex-direction: column;
        align-items: start;
    }

    .page-gallery-header h5 {
        max-width: 145px;
    }

    .page-gallery-header .gallery-search,
    .page-gallery-header .gallery-search input {
        width: 100%;
    }

    .header-ul {
        display: none;
    }

    .profile-balance {
        flex-direction: column;
    }

    .profile-main {
        flex-direction: column;
        align-items: start;
    }

    .gallery-modal-title {
        flex-direction: column;
        align-items: start;
    }

    .gallery-search input {
        background-position-x: 0;
        padding-left: 24px;
    }

    .page-gallery .gallery-search input {
        background-position-x: 12px;
        padding-left: 36px;
    }

    .image-form-group p {
        max-width: 200px;
    }

    .profile-tab {
        padding: 20px 20px 10px;
    }

    .w-sm-100 {
        width: 100%;
    }

    .profile-save {
        height: 136px;
        margin-top: -136px;
    }

    .profile-save > div {
        flex-direction: column;
        height: auto;
        padding: 1rem;
        gap: 1rem;
    }

    .filter-input {
        width: 100%;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        max-width: 190px;
    }

    .document-item {
        flex-direction: column;
    }

    .chat:not(.visible) .audio-users {
        display: none;
    }

    .tool-line {
        overflow: auto;
        border-radius: 0;
    }

    .back-link span {
        display: none;
    }

    .board-name-input {
        max-width: 80px;
        text-overflow: ellipsis;
    }

    table.new-table,
    table.new-table tbody,
    table.new-table tr {
        display: flex;
        flex-direction: column;
    }

    table.new-table:not(.mobile-filters) thead {
        display: none;
    }

    table.new-table thead tr:not(.filters) {
        display: none;
    }

    table.new-table tbody {
        gap: 1em;
    }

    header.header-board {
        padding: 10px;
    }

    .fullscreen .alert-messages {
        padding-right: 20px;
    }

    .plan-card-discount {
        top: -102px;
    }

    .range-input--list-container,
    .color-input--list-container {
        position: fixed;
        left: 0;
        right: 0;
        margin-bottom: 100px;
        display: none;
        justify-content: center;
        z-index: 1;
    }

    .range-input:hover .range-input--list-container,
    .color-input:hover .color-input--list-container {
        display: flex;
    }

    .tool-panel > div > div > div.graph-area {
        order: 1;
        padding: 10px;
        border-top: 1px solid #ddd;
    }

    .tool-panel > div > div > div.graph-area ~ div:last-of-type .svg-checkbox span {
        border-radius: 0;
    }

    .range-input--list,
    .color-input--list {
        position: static;
    }

    .gallery-modal-title h5 {
        max-width: 105px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .notices-dropdown {
        position: fixed;
        left: 50%;
        top: 70px;
        margin-left: -180px;
    }

    .new-table td,
    .new-table th,
    .new-table td:first-of-type,
    .new-table th:first-of-type,
    .new-table td:last-of-type,
    .new-table th:last-of-type {
        padding: 5px 0;
    }

    .hamburger {
        gap: 1rem;
    }

    .club-promo ul {
        margin: 0;
        grid-template-columns: 1fr 1fr;
    }

    .logo img {
        display: block;
    }

    .logo img + img {
        display: none;
    }

    main > section {
        padding: 0;
    }

    main > section .breadcrumb li {
        gap: 0 5px;
    }

    .folder-title {
        gap: 10px;
        flex-wrap: wrap;
    }

    .items-list {
        grid-template-columns: repeat(auto-fill, 160px);
        justify-content: space-evenly;
        padding-top: 0;
    }

    .board-list-item {
        width: 160px;
        min-width: 160px;
        max-width: 160px;
        margin: 0 auto;
    }

    .board-list-item--svg {
        height: 150px;
        width: 140px;
    }

    .status-bar {
        gap: 5px;
        padding: 10px;
    }

    html:not(.fullscreen) .mobile-main-menu {
        display: flex;
    }

    html:not(.fullscreen) .content {
        padding-bottom: 59px;
    }

    .filter-select ~ .select2-container--default {
        min-width: 28px;
    }

    .filter-select ~ .select2-container--default .select2-selection--single:before {
        width: 28px;
        height: 28px;
        background-position: 50%;
        background-color: #F5F5F7;
        border-radius: 10px;
        margin-top: -14px;
    }

    .filter-select ~ .select2-container--default .select2-selection--single .select2-selection__rendered,
    .filter-select ~ .select2-container--default .select2-selection--single .select2-selection__arrow {
        display: none;
    }

    .status-bar--buttons > a,
    .status-bar--buttons > button {
        background-color: #F5F5F7;
        border-radius: 10px;
        font-size: 12px;
        padding: 2px 10px;
    }

    .status-bar--buttons > .minify span {
        display: none;
    }

    .status-bar--buttons > a:hover,
    .status-bar--buttons > button:hover {
        background-color: #ECECF2;
        color: #111;
    }

    .status-bar--buttons > a:hover svg,
    .status-bar--buttons > button:hover svg {
        stroke: #111;
    }

    main > section .breadcrumb li a {
        font-size: 12px;
    }

    main > section .breadcrumb li a > svg {
        width: 14px;
        height: 14px;
    }

    .status-bar--sort svg {
        background-color: #F5F5F7;
        border-radius: 10px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    main > section .breadcrumb {
        display: none;
    }

    .mobile-fullscreen {
        top: 53px;
    }

    .board-list-item-context .context-menu {
        left: -130px;
        right: auto;
        min-width: 180px;
    }

    .header-message {
        flex-direction: column;
        gap: .5em;
        align-items: start;
    }

    .gallery-move .alert {
        width: 100%;
        flex: auto;
    }

    .gallery-move > div:not(:first-of-type) {
        flex: 1;
    }

    .gallery-move > div:not(:first-of-type) button {
        width: 100%;
    }

    .library-section .status-bar--sort {
        margin-left: auto;
    }

    .alert-moving span {
        width: 100%;
    }

    .tool-panel > div > div > div.tool-panel--preset {
        display: none;
    }

    .library-footer {
        padding-bottom: 6px;
    }

    .gallery-folder-search--container {
        margin-left: 0;
        width: 100%;
    }

}

@media (max-width: 479px) {

    .help-side {
        columns: 2;
    }

    .form-group-h {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
    }

    .club-promo ul {
        grid-template-columns: 1fr;
        align-items: center;
    }

}

@media (max-width: 359px) {

    .help-side {
        columns: 1;
        text-align: center;
    }

}