HTML {
    font-family: "Helvetica Neue", Helvetica, Arial;
    line-height: 1.42857143;
    font-size: 13px;
    width: 100%;
    height: 100%;
}

BODY {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
}

IMG {
    border: none;
    vertical-align: middle;
}

A {
    color: #000;
    text-underline-offset: 5px;
}

UL,
LI {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.wrapper {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
}

.left-menu .user {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url("/template/img/user.svg");
    background-position: left 8px center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 36px;
    margin-bottom: 30px;
    white-space: nowrap;
}

.left-menu .logout {
    width: 20px;
    height: 20px;
    background-image: url("/template/img/logout.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: 20px;
    cursor: pointer;
}

.left-menu,
.content {
    padding: 15px;
    margin: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.left-menu a {
    text-decoration: none;
}

.content {
    margin-left: 0px;
    flex-grow: 1;
}

.left-menu li {
    display: flex;
    white-space: nowrap;
    margin: 15px 10px;
}

.left-menu li.selected {
    font-weight: bold;
}

.left-menu li img {
    width: 20px;
}

.left-menu li span {
    padding-left: 8px;
}

/* Ui */

.price {
    white-space: nowrap;
}

.divider {
    border-bottom: 1px solid #ccc;
    font-size: 1.2em;
    padding-bottom: 5px;
    font-weight: bold;
    margin: 20px 0px;
}

.ai {
    position: relative;
    margin: 5px 0px;
    width: 24px;
    height: 24px;
    background-image: url("/template/img/ai.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.ai.loading {
    background-image: url("/template/img/loading.gif");
}

/* Tabs */

.tabs {
    display: flex;
    margin-bottom: 10px;
}

.tabs li {
    padding: 10px 20px 10px 0px;
}

.tabs .selected {
    font-weight: bold;
}

.tabs .selected a {
    border-bottom: 2px solid #000;
}

.tabs a:hover {
    text-decoration: underline;
}

.tabs .selected a:hover {
    text-decoration: none;
}

/* Form */

.button {
    border: none;
    cursor: pointer;
    display: inline-flex;
    border-radius: 8px;
    padding: 7px 14px 8px 14px;
    background-color: #1fb14f;
    background: linear-gradient(to left, #1fb14f, #189c44);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    color: #fff;
    font-size: 1em;
}

.button:hover {
    background: linear-gradient(to right, #1fb14f, #1fb14f);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.add-button::before {
    content: "+ Добавить";
}

form label,
.form label {
    display: flex;
    font-weight: 500;
    margin: 10px 0px 8px 0px;
}

form label.checkbox,
.form label.checkbox {
    font-weight: normal;
}

form label.checkbox input,
.form label.checkbox input {
    margin-left: 0px;
}

form label.checkbox::after,
.form label.checkbox::after {
    content: "";
}

form hr,
.form hr {
    margin: 20px 0px 10px 0px;
    border: none;
    height: 2px;
    background-color: #eee;
}

form input[type=text],
.form input[type=text],
form input[type=password],
.form input[type=password],
form input[type=number],
.form input[type=number],
form textarea,
.form textarea {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    background-color: #fff;
}

form textarea,
.form textarea {
    min-height: 100px;
}

form input[type=checkbox],
.form input[type=checkbox] {
    margin-right: 5px;
}

form button,
.form button {
    margin: 10px 0px 10px 0px;
}

form button.disabled,
.form button.disabled {
    display: none;
}

form .error,
.form .error {
    background-color: crimson;
    color: #fff;
    padding: 5px;
    margin-top: 10px;
    border-radius: 8px;
    display: none;
}

form .title,
.form .title {
    font-weight: bold;
    font-size: 1.2em;
}

.form-section {
    display: grid;
    column-gap: 20px;
    align-items: flex-end;
    grid-template-columns: repeat(3, 1fr);
    margin: 10px 0px;
}

.address-form {
    display: grid;
    column-gap: 20px;
    margin: 10px 0px;
    grid-template-columns: repeat(4, 1fr);
}

.address-form>div:first-child,
.address-form>div:nth-child(2) {
    grid-column: span 2;
}

.image-uploader,
.images-uploader {
    display: flex;
    align-items: center;
    position: relative;
}

.images-uploader {
    flex-direction: column;
    align-items: flex-start;
}

.image-uploader input[type=file],
.images-uploader input[type=file] {
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

.image-uploader span,
.images-uploader span {
    display: inline-flex;
    align-items: center;
    padding: 8px 10px 8px 36px;
    border-radius: 8px;
    color: #fff;
    background-color: #1fb14f;
    background-image: url("/template/img/image.svg");
    background-position: left 8px center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
}

.image-uploader span::after {
    content: "Загрузить изображение";
}

.images-uploader span::after {
    content: "Загрузить изображения";
}

.images-uploader .image-list {
    display: flex;
    flex-wrap: wrap;
}

.image-uploader>div,
.images-uploader .image-list>div {
    position: relative;
    width: 128px;
    height: 128px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 20px;
    display: none;
}

.images-uploader>div {
    margin: 0px 10px 10px 0px;
}

.image-uploader div .remove,
.images-uploader div .remove {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url("/template/img/remove.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

/* Modal */

.modal {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    z-index: 5;
}

.modal>div {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 16px;
    min-width: 200px;
    min-height: 50px;
    max-width: calc(100% - 30px);
    max-width: 600px;
    max-height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}

.modal>div>div:last-child {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.modal>div>div:last-child::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.modal>div>.close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #000;
    cursor: pointer;
}

.modal>div>.close:after {
    content: "X";
    color: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Block */

.block {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
}

/* List Table */

.table {
    width: 100%;
    background-color: #fff;
    position: relative;
    display: table;
    border-collapse: collapse;
    margin: 10px 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.table a {
    text-decoration: none;
}

.table>.title,
.table>.thead {
    white-space: nowrap;
    display: table-header-group;
    font-weight: bold;
    background-color: #f7f7f7;
}

.table>.content,
.table>.tbody {
    display: table-row-group;
}

.table>div>div,
.table>div>.tr {
    display: table-row;
    transition: background-color 0.2s ease;
}

.table>div>div:nth-child(2n),
.table>div>.tr:nth-child(2n),
.table>tbody>tr.gray {
    background-color: #f7f7f7;
}

.table>div>div>div,
.table>div>.tr>div,
.table>tbody>tr>td,
.table>thead>tr>th {
    display: table-cell;
    padding: 10px;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    vertical-align: middle;
}

.table>div>div:hover,
.table>div>.tr:hover {
    background-color: #eee;
}

.table .edit,
.table .delete {
    width: 28px;
    min-width: 28px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
    display: table-cell;
}

.table .edit {
    background-image: url("/template/img/edit.svg");
}

.table .delete {
    background-image: url("/template/img/remove.svg");
    background-size: 16px;
}

.sort {
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url("/template/img/sort.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.sort.on {
    background-image: url("/template/img/sort.on.svg");
}

/* Header / Search / Filter */

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .search {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.search div {
    position: relative;
}

.search div::before {
    content: "";
    display: block;
    position: absolute;
    left: 10px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background-image: url("/template/img/search.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.search input[type=text] {
    padding-left: 30px;
}

.filter {
    display: flex;
    white-space: nowrap;
}

.filter>div {
    display: flex;
    align-items: center;
    padding: 10px;
}

.filter>div label {
    margin-right: 5px;
}

.filter>div label::after {
    content: ":";
}

/* Building Groups Quarters */


/* Categories */

.categories-wrapper {
    position: relative;
    margin: 20px 0px;
}

.categories-wrapper .show-all,
.services-wrapper .show-all,
.categories-wrapper .hide-all,
.services-wrapper .hide-all,
.categories-wrapper .sort,
.services-wrapper .sort {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 4px;
}

.categories-wrapper .show-all,
.services-wrapper .show-all {
    background-image: url("/template/img/show-all.svg");
}

.categories-wrapper .hide-all,
.services-wrapper .hide-all {
    background-image: url("/template/img/hide-all.svg");
}

.categories {
    position: relative;
    border-bottom: 1px solid #eee;
}

.categories,
.categories ul {
    padding: 0px;
    margin: 0px;
}

.categories ul {
    display: none;
    margin-left: 20px;
}

.categories li {
    list-style: none;
}

.categories li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 0px;
    border-bottom: 1px dotted #ddd;
}

.categories li.has-children,
.table .has-children {
    padding-left: 14px;
    background-image: url("/template/img/has-children.svg");
    background-position: left top 14px;
    background-repeat: no-repeat;
    background-size: 8px;
}

.categories li.has-children.opened,
.table .has-children.opened {
    background-image: url("/template/img/opened.svg");
}

.categories li>div {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.categories li>div>div:first-child {
    flex-grow: 1;
}

.categories li>div:hover {
    text-decoration: underline;
    cursor: pointer;
}

.categories li.selected>div:first-child {
    font-weight: bold;
}

.categories li.selected>div>.check-icon {
    background-image: url("/template/img/check-on.svg");
}

.categories .icon {
    width: 20px;
    height: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.categories .delete-icon {
    background-image: url("/template/img/remove.svg");
}

/* Entity */

.entitys img {
    width: 100%;
    max-width: 64px;
    max-height: 64px;
}

.entitys>div>div>div:first-child {
    display: none;
}

/* Dictionary */

.dictionary-add {
    margin-bottom: 10px;
}

.dictionarys>div>div>div:first-child {
    display: none;
}

/* User */

.users img {
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
}

.permissions>div>div:first-child {
    margin-top: 10px;
}

.permissions>div>div:last-child {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #ddd;
    margin-bottom: 10px;
}

/* Room */

.add-room,
.add-client {
    display: none;
}

.room-form,
.client-form,
.building-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}

.room-form .room-clients {
    margin-top: 5px;
}

.room-form .room-clients>div {
    padding: 5px 0px;
}

.room-form .lss .tbody>div>div:first-child,
.room-form .lss .thead>div>div:first-child {
    display: none;
}

.room-form .lss .status {
    position: relative;
    font-size: 0px;
}

.room-form .lss .status::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #189c44;
}

.room-form .lss .status:empty::before {
    background-color: #f00;
}

.room-form .lss .debt,
.room-form .lss .debt_kr {
    color: #f00;
    text-align: center;
    font-weight: bold;
}

.rooms>div>div>div:first-child,
.rooms>div>a>div:first-child,
.clients>div>div>div:first-child,
.clients>div>a>div:first-child,
.buildings>div>div>div:first-child,
.buildings>div>a>div:first-child {
    display: none;
}

.rooms .clients a {
    display: block;
    text-decoration: underline;
}

.rooms .clients a+a {
    margin-top: 3px;
}

.rooms .lss>div,
.clients .lss>div,
.client-rooms .lss>div {
    white-space: nowrap;
    display: grid;
    justify-content: flex-start;
    gap: 3px 5px;
    grid-template-columns: repeat(3, auto);
}

.rooms .lss .price,
.clients .lss .price,
.client-rooms .lss .price {
    color: #f00;
    padding: 0px 5px;
}

.rooms .lss .price:empty,
.clients .lss .price:empty,
.client-rooms .lss .price:empty {
    display: none;
}

.rooms .lss .price.green,
.clients .lss .price.green {
    color: #189c44;
}

.rooms-header .count::before,
.clients-header .count::before {
    content: "Помещений: ";
}

/* Clients */

.clients-view:empty::before {
    content: "Ничего не найдено";
    display: block;
    padding: 10px 0px;
}

.clients img {
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
}

.clients .rooms a {
    display: block;
}

.client-rooms>div {
    padding: 5px 0px;
}

/* Service */

.service-categories {
    margin: 10px 0px;
}

.services-wrapper {
    margin: 20px 0px;
}

.services ul>li {
    background-color: #eee;
}

.services .category-services li {
    background-color: #fff;
    padding: 0px 10px;
}

/* Request */

.requests>div>div {
    cursor: pointer;
}

.requests .status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    color: #fff;
}

.requests .type {
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.requests .type>div {
    margin: 0 auto;
}

.requests .type.paid {
    background-image: url("/template/img/paid.svg");
}

.requests .type.emergency {
    background-image: url("/template/img/emergency.svg");
}

.requests .object>div {
    display: grid;
    align-items: center;
    grid-template-columns: 24px auto;
    gap: 5px 10px;
}

.requests .object .address {
    grid-column: span 2;
    padding-left: 34px;
    background-position: left 5px center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url("/template/img/location.svg");
}

.requests .object img {
    width: 24px;
    height: 24px;
}

.requests .client .phone {
    margin-top: 5px;
    opacity: 0.5;
}

.client-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.client-option>div:last-child {
    font-size: 0.9em;
    opacity: 0.6;
}

.request {
    display: grid;
    gap: 20px;
    grid-template-columns: auto auto;
}

.request .images {
    display: flex;
    flex-wrap: wrap;
}

.request .images a {
    width: 64px;
    height: 64px;
    overflow: hidden;
    display: block;
    position: relative;
    margin: 10px 10px 10px 0px;
    border-radius: 8px;
}

.request .images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.request .info-wrapper {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.request .info {
    display: grid;
    align-items: center;
    justify-content: flex-start;
    gap: 10px 20px;
    grid-template-columns: auto auto;
}

.request label {
    opacity: 0.5;
}

.request label::after {
    content: ":";
}

.request .info div:empty::before {
    content: "-";
}

.request .text {
    grid-column: span 2;
}

.request .text label+div {
    margin-top: 5px;
}

.request .services {
    display: flex;
    flex-direction: column;
}

.request .services .services-list {
    display: grid;
    grid-template-columns: repeat(3, auto);
}

.request .services .services-list .row {
    display: contents;
}

.request .services .services-list .row>div:nth-child(2),
.request .services .services-list .row>div:nth-child(3) {
    text-align: center;
}

.request .services .services-list .row>div {
    padding: 10px 10px 10px 0px;
    border-bottom: 1px solid #ddd;
}

.request .services .sum {
    border-bottom: none;
    font-weight: bold;
    margin-top: 10px;
}

.request .services .sum:empty {
    display: none;
}

.request .services>div.sum::before {
    content: "Сумма: ";
}

.request .add-status {
    display: none;
}

.request .statuses-list {
    display: grid;
    margin: 20px 0px;
    column-gap: 20px;
    row-gap: 10px;
    grid-template-columns: repeat(3, auto);
    align-items: center;
}

.request .statuses-list>div {
    display: contents;
}

.request .statuses-list .status {
    padding: 5px 10px;
    border-radius: 8px;
    color: #fff;
}

.request .statuses-list .status-comment {
    grid-column: span 3;
    padding: 10px;
    background-color: #f8f8f8;
    margin-bottom: 10px;
}

.request .statuses-list .status-comment:empty {
    display: none;
}

.request .statuses-list .status-user {
    font-weight: bold;
}

.request-select-status {
    display: flex;
    align-items: center;
}

.request-select-status>span {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #f00;
}

.request-select-status .new,
.status.new {
    background-color: gray;
}

.request-select-status .at-work,
.status.at-work {
    background-color: yellowgreen;
}

.request-select-status .ready,
.status.ready {
    background-color: green;
}

.request-select-status .wait,
.status.wait {
    background-color: yellow;
}

.request-select-status .pause,
.status.pause {
    background-color: blueviolet
}

.request-select-status .restart,
.status.restart {
    background-color: brown
}

.request-select-status .cancel,
.request-select-status .user-cancel,
.status.cancel,
.status.user-cancel {
    background-color: red
}

.request .users-list {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
}

.request .users-list>div {
    display: contents;
}

.request .users-list>div>div {
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
}

.request .users-list>div>div:first-child {
    padding-right: 20px;
    font-weight: bold;
}

.request .users-list>div>div:last-child {
    font-size: 0.9em;
    opacity: 0.5;
    text-align: right;
}

/* Messager */

.messager {
    display: flex;
    border: 1px solid #ddd;
    height: calc(100vh - 100px);
    /* max-height: calc(100vh - 50px); */
    /* min-height: calc(100vh - 50px); */
}

.messager .left {
    position: relative;
    width: 300px;
    min-width: 300px;
    overflow-y: scroll;
    border-right: 1px solid #ddd;
}

.messager .left.loading:before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("/template/img/loading.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.messager .left .chats {
    display: flex;
    flex-direction: column;
}

.messager .left .chats>div {
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    border: 2px solid #fff;
    border-bottom: 1px solid #eee;
}

.messager .left .chats>div.selected {
    border: 2px solid #3c98db;
}

.messager .left .chats>div:hover {
    background-color: #f7f7f7;
    cursor: pointer;
}

.messager .left .chats .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    white-space: nowrap;
}

.messager .left .chats .header>a {
    text-decoration: none;
    font-weight: bold;
}

.messager .left .chats .header>a:hover {
    text-decoration: underline;
}

.messager .left .chats .header .datetime {
    opacity: 0.5;
}

.messager .left .chats .name {
    overflow: hidden;
    margin-right: 10px;
}

.messager .left .chats .not-admin:before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #E57C4C;
}

.messager .left .chats .text {
    height: 40px;
    overflow-y: hidden;
}

.messager .right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.messager .right .messages {
    position: relative;
    padding: 0px;
    margin: 0px;
    flex-grow: 1;
    overflow-y: scroll;
}

.messager .right .messages.loading:before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url("/template/img/loading.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.messager .right .messages>div {
    display: flex;
    justify-content: flex-start;
    padding-right: 100px;
    box-sizing: border-box;
}

.messager .right .messages>div>div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #f8f8f8;
    border-radius: 6px;
    padding: 8px;
    margin: 10px;
}

.messager .right .messages>div.user {
    padding-right: 0px;
    padding-left: 100px;
    justify-content: flex-end;
}

.messager .right .messages>div.user>div {
    background: linear-gradient(to left, #1fb14f, #189c44);
    color: #fff;
}

.messager .right .messages>div.user .text {
    text-align: left;
}

.messager .right .messages>div>div a {
    padding: 10px 0px 10px 6px;
}

.messager .right .messages>div>div img {
    max-width: 300px;
    max-height: 300px;
    border-radius: 6px;
}

.messager .right .messages>div .author {
    font-size: 0.9em;
    opacity: 0.5;
}

.messager .right .messages>div>div .text {
    padding: 5px 0px;
    text-align: right;
}

.messager .right .messages>div>div .datetime {
    opacity: 0.5;
    font-size: 0.8em;
    line-height: 20px;
    white-space: nowrap;
    text-align: right;
}

.messager .message-form {
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    padding-left: 52px;
}

.messager .message-form.hidden {
    display: none;
}

.messager .message-form .attach {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-image: url("/template/img/attach.svg");
    background-size: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.messager .message-form .attach>input {
    width: 32px;
    height: 32px;
    opacity: 0;
    cursor: pointer;
    overflow: hidden;
}

.messager .message-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 36px 6px 6px;
    resize: none;
    overflow: hidden;
    height: 30px;
    max-height: 500px;
    margin: 0px;
}

.messager .message-form button {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
    background-image: url("/template/img/send.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
}

/* Pagination */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0px;
}

.pagination:empty {
    display: none;
}

.pagination>a,
.pagination>div {
    cursor: pointer;
    padding: 5px 5px 3px 5px;
    text-decoration: none;
}

.pagination>a:hover,
.pagination>div:hover {
    text-decoration: underline;
}

.pagination .current {
    font-weight: bold;
    border-bottom: 2px solid #000;
}

.pagination .hidden {
    display: none;
}

/* Login */

.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login>form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.login>form label {
    opacity: 0.5;
    justify-content: center;
}

/* Types */

.kv::before {
    content: "кв.";
}

.mm::before {
    content: "мм.";
}

/* Animations */

@keyframes flashGreen {
    0% {
        background-color: #d4edda;
    }

    100% {
        background-color: transparent;
    }
}

.flash-green {
    animation: flashGreen 1s ease-out;
}