/*NORMALIZE*/
a:hover {
    color: var(--primary-cherry);
}

html {
    height: 100%;
    font-size:16px;
    font-family: "ALS Hauss-Regular";
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

input {
    font-family: "ALS Hauss-Regular" !important;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

body {
    height: 100%;
    color: var(--black) !important;
    background: var(--white);
}

.active_button{
    cursor: pointer;
}

thead {
    z-index: 130;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/*BORDERS*/
.top-bottom-border-1 {
    border-top: 1px solid var(--primary-grey);
    border-bottom: 1px solid var(--primary-grey);
}

.border-1 {
    border: 1px solid var(--primary-grey)!important;
}

.border-1-lightGrey{
    border: 1px solid var(--light-grey)!important;
}
.border-dashed-1 {
    border: 1px dashed var(--primary-grey)!important;
}

.border-adding-card{
    border: 1px dashed var(--primary-grey);
    /*height: 117px;*/
    width: 100%;
    border-radius: 8px;
    display: none;
}

.border-radius-8 {
    border-radius: 8px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-20 {
    border-radius: 20px;
}

.border-radius-30 {
    border-radius: 30px;
}

.border-top-3{
    border-top: 3px solid var(--extra-cherry);
}

.border-red {
    border: 1px solid var(--dark-cherry) !important;
}

.border-green {
    border: 1px solid var(--dark-green) !important;
}



/*OTHER*/
.cursor-pointer{
    cursor: pointer;
}

.text-correction {
    margin-top: 3px;
}


.container:nth-child(3) {
    height: calc(100% - 100px) !important;
}

.container:nth-child(3) > .row {
    height: 100% !important;
}

.main-content-wrapper {
    height: 100% !important;
}

.content {
    height: 100%;
    background: var(--white);
    overflow: auto;
    padding: 0 20px;
}

.content::-webkit-scrollbar {
    display: none;
}

.scroll-section::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.scroll-section.thin::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scroll-section::-webkit-scrollbar-track {
    /*     box-shadow: inset 0 0 5px #cccccc;
     */
    border-radius: 10px;
    background-color: var(--light-grey);
    margin-top: 10px;
}

.scroll-section::-webkit-scrollbar-thumb {
    background: var(--dark-cherry);
    border-radius: 10px;
}

.scroll-section::-webkit-scrollbar-thumb:hover {
    background: #b30000;
}

.scroll-section {
    scrollbar-color: var(--dark-cherry) var(--light-grey);
    scrollbar-width: thin;
}

.header {
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 8px;
}

.top-menu-wrap {
    margin-left: -26px;
    margin-top: 1px;
}

.user-account {
    line-height: normal;
    margin-top: 4px;
    gap: 19px;
}

.ellipse {
    background-color: white;
    border: 1px none;
    border-radius: 13px;
    height: 26px;
    left: 17px;
    position: absolute;
    top: 12px;
    width: 26px;
}

.user-account-log__svg {
    height: 22px;
    left: 6px;
    position: absolute;
    top: 38px;
    width: 48px;
}

.user-account-logo-wrap {
    background-color: var(--dark-cherry);
    border-radius: 30px;
    height: 60px;
    min-width: 60px;
    position: relative;
}

.user-account-logo {
    margin-top: -3px;
    padding-right: 1px;
}

.top-menu-wrap_active {
    margin-top: -1px;
}

.header__logo {
    visibility: hidden;
}

.navbar {
    margin-left: 8px;
    line-height: 16px;
    margin-top: -5px;
}

.sidebar__li {
    position: relative;
    padding: 20px 0;
}


/* Nikita */

.dropdown-item.active, .dropdown-item:active {
    color: var(--primary-cherry);
    background-color: var(--white);
}

.dropdown-item:hover {
    color: var(--primary-cherry);
    background-color: var(--white);
}

.border-error {
    border-color: var(--primary-cherry);
}

.dataTableFooter {
    margin-top: auto !important;
}

.scrollbar-disable::-webkit-scrollbar {
    display: none;
}

.scroll-top-border::-webkit-scrollbar-track {
    margin-top: 35px;
}



/*noinspection CssOverwrittenProperties*/
.form-check-input {
    border-color: var(--light-grey) !important;
    /*noinspection CssOverwrittenProperties*/
    border-radius: 5px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    font-weight: 400;
    border: 1px solid var(--light-grey) !important;
}

.form-check-input:hover {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #ffffff;
    border-color: var(--light-grey) !important;
}

.form-check-input:checked[type=checkbox] {
    background-size: 15px;
    background-image: url("../img/checkbox_input_red.svg") !important;
    background-color: #ffffff;
}

.form-check-input:checked[type=checkbox].half {
    background-image: url("../img/checkbox_input_triangle_red.svg") !important;
    background-color: #ffffff;
    background-size: 15px;
    background-position: 2px 2px;
}

.form-check-input:focus {
    box-shadow: none !important;
    border-color: var(--light-grey) !important;
}

.form-control,
.form-select {
    border-radius: 10px;
    height: 46px;
}

.main-input {
    box-shadow: none;
    background-color: #fff;
    border-color: var(--light-grey);
}

input::-webkit-search-cancel-button {
    position: relative;
    appearance: none;
    height: 10px;
    width: 10px;
    background-image: url("../img/cross-grey.svg") !important;
    background-repeat: no-repeat;
    background-position: center;
}

progress {
    height: 14px;
    border-radius: 5px;
}

progress::-webkit-progress-bar {
    background-color: rgba(163, 2, 54, 0.1);
    border-radius: 5px;
}

progress::-webkit-progress-value {
    border-radius: 5px;
    background: var(--dark-cherry);
}


.global-box {
    background-color: white;
    gap: 40px;
    padding: 20px 20px;
    width: 1177px;
    height: 736px;
    margin: auto;
}

.thumb {
    align-self: stretch;
    background-color: var(--dark-grey);
    border-top: 1px solid var(--light-grey);
    border-left: 1px solid var(--light-grey);
    border-bottom: 1px solid var(--light-grey);
    border-radius: 8px 0 0 8px;
    height: 58px;
    min-width: 10px;
}

.thumb-card {
    background-color: var(--white);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: var(--light-grey);
    border-radius: 0 8px 8px 0;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-style: solid;
    border-top-width: 1px;
    flex-direction: column;
    padding: 0 10px;
    width: 121px;
    height: 58px;
}


/*Eleazar*/

.search {
    height: 38px;
    width: 340px;
    border-radius: 10px;
    border: 1px solid var(--light-grey);
    padding-left: 15px;
}

.search:focus-visible {
    outline: none;
}

.search:focus-visible {
    outline: none;
}

/*noinspection CssOverwrittenProperties*/
.card-list-left-block {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 16px !important;
    /*noinspection CssOverwrittenProperties*/
    height: 100%;
}

.card-list-left-block.red {
    background-color: #A30236;
}

.card-list-left-block.light-blue {
    background-color: #C6E6FF !important;
}

.card-list-left-block.gray {
    background-color: #a0a0a0 !important;
}

.card-list-left-block.empty {
    background-color: #f7f7f7 !important;
}


.nav a.active {
    color: var(--dark-cherry) !important;
}

.nav a {
    color: var(--dark-grey);
}


.catalog-block-card {
    border-radius: 10px;
    border: 1px solid var(--light-grey);
    min-width: 210px;
}


.widget {
    border-radius: 10px;
    background: white;
    /*width: 400px;*/
    width: 100%;
    height: 100%;
    min-height: 300px;
    height: 400px;
    max-height: 500px;

}

.widget-body {
    gap: 15px;
    height: 100%;
    overflow: auto;

}

.widget-body::-webkit-scrollbar {
    width: 0;
}

.day {
    border-radius: 30px;
    gap: 0px;
    padding: 8px 10px 0 10px;
}

.day:hover {
    outline: 1px solid var(--light-cherry);
    cursor: pointer;
}


.task-container {
    border: 1px solid #AEAEAE;
    border-radius: 10px;
    padding: 5px 10px;
}


.tag-button {
    padding: 6px 10px 3px;
    border-radius: 8px;
    color: white;
    max-width: 150px;
    max-height: 28px;
}

.flex-1 {
    flex: 1;
}

.size-10 {
    height: 10px!important;
    width: 10px!important;
    min-width: 10px!important;
    min-height: 10px!important;
}
.tab-button{
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;

}

.tab-button[disabled] + .btn, .tab-button:disabled + .btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65;
}


.tab-button:focus-visible + .btn {
    outline: 0;
    box-shadow: none;
}

.tab-button:checked + .btn, :not(.tab-button) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color: var(--primary-cherry);
    background-color: var(--white);
    border: 1px solid var(--light-grey);
    border-radius: 8px;
}

.tab-button:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
    box-shadow: none;
}

.tab-btn-group{
    height: 35px;
    border-radius: 8px;
    color: var(--dark-grey) !important;
    background: var(--grey);
}

.tab-btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.tab-btn-group > .btn.dropdown-toggle-split:first-child,
.tab-btn-group > .tab-btn-group:not(:last-child) > .btn {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.schedule-card {
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    text-decoration: none;
    background: white;
}

.timetable-widget{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 10px 10px 5px;
    gap: 10px;
    border: 1px solid var(--light-grey);
    border-radius: 10px;
}

/*progress*/
@property --p{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.pie {
    --p:20;
    --b:8px;
    --c:darkred;
    --w:60px;
    --bc:var(--white);

    width:var(--w);
    height:var(--w);
    aspect-ratio:1;
    position:relative;
    display:inline-grid;
    margin:5px;
    place-content:center;
    font-size:14px;
    font-weight:bold;
    font-family:sans-serif;
}
.pie:before,
.pie:after {
    content:"";
    position:absolute;
    border-radius:50%;
}
.pie:before {
    inset:0;
    background:
            radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
            conic-gradient(var(--c) calc(var(--p)*1%),var(--bc) 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
    inset:calc(50% - var(--b)/2);
    background:var(--c);
    transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
    animation:p 1s .5s both;
}
.no-round:before {
    background-size:0 0,auto;
}
.no-round:after {
    content:none;
}
@keyframes p {
    from{--p:0}
}


.fill-available{
    height: -webkit-fill-available;
}

.health-limitations-block {
    max-height: 92px;
    overflow: auto;
}


/*other*/
.txt-20{
    font-size: 20px;
}

.btn-check:checked + .btn{
    color: white;
    background: var(--primary-cherry);
}

.fit-content{
    width: fit-content;
}

/*custom buttons*/
.button{
    text-decoration: none; /* убирать подчёркивание у ссылок */
    user-select: none; /* убирать выделение текста */
    outline: none; /* убирать контур в Mozilla */
    width: fit-content;
    font-family: var(--font-family-als_hauss-medium);
    border-radius: 10px;
    border: none;
}

.sm{
    height: 28px;
    padding: 4px 12px 8px 12px;
    font-size: 12px;
}

.md{
    height: 35px;
    padding: 6px 16px 10px 16px;
    font-size: 14px;
}

.lg{
    height: 48px;
    padding: 12px 30px 15px 30px;
    font-size: 16px;
}

.white-button{
    color: var(--primary-cherry);
    background: #fff;
    border: 1px solid var(--light-grey);
}

.white-button:disabled{
    color: var(--primary-grey);
    background: var(--grey);
    cursor: not-allowed;
    border: 1px solid transparent;
}

.white-button:not(:disabled):hover {
    color: var(--dark-cherry);
}


.red-button{
    color: #fff;
    background: var(--primary-cherry);
}

.red-button:hover {
    background: var(--dark-cherry);
}

/*import*/

.import-container{
    display: flex;
    gap: 10px;
    align-items: center;
    height: 56px;
    width: fit-content;
    padding: 0px 10px 0px 10px;
    background: #fff;
    border: 1px dashed #AEAEAE;
    border-radius: 7px;
}


.no-scroll-bar::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.collapse{
    transition: none!important;
}

.collapsing{
    transition: none!important;
}

.collapse-horizontal{
    transition: none!important;
}

.py-12{
    padding-top: 12px;
    padding-bottom: 12px;
}

.form-control-plaintext {
    width: 100%;
    color: #252525;
    /* border: 1px solid transparent; */
    border: none;
    padding: 0;
    margin-bottom: 20px;
}

.catalog-link{
    color: #C30341;
    text-decoration: none;
}
.catalog-link:hover{
    color: #930331;
}

/*input:invalid:required{*/
/*    border: 1px solid var(--dark-cherry);*/
/*}*/

/*input:invalid{*/
/*    border: 1px solid var(--dark-cherry);*/
/*}*/

/*select:invalid:required{*/
/*    border: 1px solid var(--dark-cherry);*/
/*}*/

/*select:required{*/
/*    border: 1px solid var(--dark-cherry);*/
/*}*/
.pagination .page-item {
    min-width: 34px;
    text-align: center;
}

.pagination .page-item:first-child{
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.pagination .page-item:last-child{
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination {
    -webkit-touch-callout: none;    /* iOS Safari */
    -webkit-user-select: none;      /* Safari */
    -khtml-user-select: none;       /* Konqueror HTML */
    -moz-user-select: none;         /* Old versions of Firefox */
    -ms-user-select: none;          /* Internet Explorer/Edge */
    user-select: none;              /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.td-table-hov:hover{
    background: var(--cherry);
}

.location-matrix-input:focus + .universal-access {
    background-image: url("/static/img/universal-access-red.svg");
 }

.location-matrix-input:focus + .bus-front {
    background-image: url("/static/img/bus-front-red.svg");
 }

.location-matrix-input:focus + .car-front {
    background-image: url("/static/img/car-front-fill-red.svg");
 }



table.sticky-tbody-th tbody tr:first-child th {
    position: sticky;
    top: 0;
    background: var(--white);
}

table.sticky-tbody-th tbody tr:not(:first-child) th {
    position: sticky;
    left: 0;
    background: var(--white);
}

table.min-td-width-150 tr td{
    min-width: 150px;
}

table.min-td-height-70 tr td{
    min-height: 70px;
    height: 70px;
}

table.th-bg-grey th {
    background: var(--grey)!important;
}


.accordion-item-my {

    background-color: transparent;
    border: 1px solid var(--light-grey);
    border-radius: 20px;
}
.accordion-item-my:first-of-type {
    border: 1px solid var(--light-grey);
    border-radius: 20px;
}
.accordion-item-my:first-of-type .accordion-button-my {
    border: 0
}
.accordion-item-my:last-of-type {
    border: 1px solid var(--light-grey);
    border-radius: 20px;
}
.accordion-item-my:last-of-type .accordion-button-my.collapsed-my {
    border: 0
}
.accordion-item-my:last-of-type .accordion-collapse-my {
    border: 0
}

/* 
.accordion-body-my {
}
*/

.accordion-flush-my .accordion-collapse-my {
    border-width: 0;
}
.accordion-flush-my .accordion-item-my {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}
.accordion-flush-my .accordion-item-my:first-child {
    border-top: 0;
}
.accordion-flush-my .accordion-item-my:last-child {
    border-bottom: 0;
}
.accordion-flush-my .accordion-item-my .accordion-button-my, .accordion-flush-my .accordion-item-my .accordion-button-my.collapsed {
    border-radius: 0;
}

.accordion-button-my {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 24px;
    color: black;
    text-align: left;
    background-color: white;
    border: 0;
    border-radius: 20px;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
    .accordion-button-my {
        transition: none;
    }
}
.accordion-button-my:not(.collapsed) {
    color: var(--dark-cherry);
    background-color: var(--cherry);
    /*box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);*/
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.accordion-button-my:not(.collapsed)::after {
    /* background-image: var(--bs-accordion-btn-active-icon); */
    transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button-my::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
    .accordion-button-my::after {
        transition: none;
    }
}
.accordion-button-my:hover {
    z-index: 2;
}

.accordion-header-my {
    margin-bottom: 0;
}

.custom-scroll-bar::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

.custom-scroll-bar::-webkit-scrollbar-track {
    background-color: var(--grey);
}

.custom-scroll-bar::-webkit-scrollbar-thumb {
    background-color: var(--light-grey);
    border-radius: 10px;
}






.dialog-ovelay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999999
}
.dialog-ovelay .dialog {
    width: 400px;
    margin: 50px auto 0;
    background-color: #fff;
    border-radius: 10px;
    /*overflow: hidden;*/
    border: 1px solid var(--grey);

}
.dialog-ovelay .dialog header {
    padding: 10px 8px;
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 10px 10px 0 0;
}
.dialog-ovelay .dialog header h3 {
    font-size: 14px;
    margin: 0;
    color: #555;
    display: inline-block
}
.dialog-ovelay .dialog header .fa-close {
    float: right;
    color: #c4c5c7;
    cursor: pointer;
    transition: all .5s ease;
    padding: 0 2px;
    border-radius: 1px
}
.dialog-ovelay .dialog header .fa-close:hover {
    color: #b9b9b9
}
.dialog-ovelay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #673AB7;
    color: #a2a2a2
}
.dialog-ovelay .dialog .dialog-msg {
    padding: 12px 10px
}
.dialog-ovelay .dialog .dialog-msg p{
    margin: 0;
    font-size: 15px;
    color: #333
}
.dialog-ovelay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 8px 10px
}
.dialog-ovelay .dialog footer .controls {
    direction: rtl
}


/*Eleazar deaw*/
#container{
    padding:0px;
    margin:0px;
}

#canvas {
    padding:0px;
    margin:0px;
}

#navigation{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 30px;
    background: var(--cherry);
    padding: 20px;
}


/******************************************************************
 * Einstellungen der PropertyViews im Editmodus der "Form".
 ******************************************************************/
#propertypane {
    padding:0px;
    margin:0px;
    width:150px;
    background-color:#7D7D7D;
    border-top:0px;
}

/*container of a single property entry*/
.property_container {
    padding:5px;
    padding-bottom:15px;
}

.toolbar_delimiter {
    margin-left:40px;
}




.palette_node_element{
    color: var(--primary-cherry);
    background-color: #ffffff;
    border: 1px solid #D9D9D9;
    width: fit-content;
    padding: 10px 19px;
    font-size: 14px;
    border-radius: 10px;
    cursor: move;
}

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

.circle{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
}

.context-menu-parent{
    display: none;

}

.context-menu{
    width: fit-content;
    border-radius: 10px;
    border: 1px solid #D7D7D7;
}

.context-header{
    padding-bottom: 4px;
    border-bottom: 1px solid #F5F5F5;
}
.enterPoint-property:hover{
    color: #A30236;
}

.context-menu-parent.active {
    display: inline-block;
}

#maxHoursNotification{
    width: 300px;
    height: 60px;
    border: 1px solid #b0b0b0;
    border-radius: 10px;
    background: white;
    position: absolute;
    right: 62px;
    top: 100px;
    padding: 4px;
    color: #A30236;
    font-weight: bold;
    display: none;
}

.checkbox-for-table{
    width:15px !important;
    height:15px !important;
    background-size:95%
}

.input-for-table{
    max-width: 100px;
    max-height: 30px !important;
}

.bg-deleted-block {
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--gentle-red) 0px, #ffffff00 12px), linear-gradient(to bottom, #fff, #fff);
}

.bg-add-block {
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--gentle-green) 0px, #ffffff00 12px), linear-gradient(to bottom, #fff, #fff);
}

.myModal-size{
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.myItem-size-for-modal{
    min-width: 350px;
}

.myModal-size{
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
}

.myItem-size-for-modal{
    min-width: 350px;
}

.flex-important{
    display: flex !important;
}

.popup-fade {
    display: none;
}
.popup-fade:before {
    content: '';
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    z-index: 9999;
}
.popup {
    position: absolute;
    top: 13%;
    left: 20%;
    overflow: hidden;
    width: 60%;
    height: 74%;
    margin: 0;
    background: #fff;
    border: 1px solid orange;
    border-radius: 4px;
    z-index: 99999;
    opacity: 1;
}

.popup-content{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.popup-header{
    position: relative;
    background: white;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 15px;

}

.popup-body{
    height: calc(100% - 40px);
    overflow: auto;
    margin-top: 4px;
    padding: 15px;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.line-mode-button:hover::after{
    background: white;
    color: black;
    position: relative;
    text-wrap: nowrap;
    left: 17px;
    padding: 10px;
    top: -39px;
    content: 'Режим соединения точек';
    border: 1px solid var(--light-grey);
    border-radius: 10px;
}

.moving-mode-button:hover::after{
    background: white;
    color: black;
    position: relative;
    text-wrap: nowrap;
    left: 17px;
    padding: 10px;
    top: -39px;
    content: 'Режим перетаскивания точек';
    border: 1px solid var(--light-grey);
    border-radius: 10px;
}

.delete-button:hover::after{
    background: white;
    color: black;
    position: relative;
    text-wrap: nowrap;
    left: 17px;
    padding: 10px;
    top: -39px;
    content: 'Функция удаления точек';
    border: 1px solid var(--light-grey);
    border-radius: 10px;
}

.customSelectedRooms{
    max-height: 170px;
    overflow: auto;
}

.hover-extra-red:hover {
    background: var(--gentle-yellow);
}