html, body {
    width: 100%;
    font-size: 14px;
}

.body-content {
    height: 100%;
    width: 100%;
    overflow: auto;
}

.link-btn-under-title {
    cursor: pointer;
    margin-bottom: 5px;
}

    .link-btn-under-title a {
        color: white;
    }

        .link-btn-under-title a:hover {
            color: white;
            text-decoration: none;
            color: white;
        }

.btn {
    cursor: pointer;
}


@media {
    div {
        clear: both;
    }
}

/* Set width on the form input elements since they're 100% wide by default */
input[type="text"],
input[type="password"],
input[type="datetime"] {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
    font-weight: 600;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

select.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

/*pointer*/
.map_adding_point {
    cursor: crosshair;
}


.Visible {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    min-height: 100%;
    background-color: #c5c5c5;
    background-color: rgba(192,192,192,0.9);
    overflow: hidden;
    top: 0px;
    display: table-cell
}

.Invisible {
    display: none;
}

.hidden {
    display: none;
}

.NoHeight {
    height: 1px;
}

.DialogBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
    background-color: #ffffff;
    background-color: rgba(255,255,255,255);
    filter: alpha(opacity=100);
    opacity: 1;
}

    .DialogBackground:before {
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        content: '';
    }

.DialogBox {
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
    padding-top: 30vh;
}

.myspecialclass {
    background-color: darkorchid;
    border-width: 4px;
    border-color: black;
}

.valueChanged {
    background-color: lightyellow !important;
}

p.vertical {
    float: left;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: left top 0;
    -moz-transform-origin: left top 0;
    -ms-transform-origin: left top 0;
    -o-transform-origin: left top 0;
    transform-origin: left top 0;
}

input.ContainerCount {
    width: 36px;
}

.ServiceControl {
    width: 150px;
}

.DayInSchedule {
    background-color: #ffaaaa;
}

.NoBackgroundMark {
    background-color: rgba(255, 255, 255, 0);
    color: black;
    font-weight: bolder;
}

.RouteAreaCell {
    padding-left: 4px;
    padding-right: 4px;
}

.HighlitedRouteTableLine {
    background-color: lightblue;
}

.RouteStatsHr {
    margin-top: 4px;
    margin-bottom: 4px;
}

.table-compact > thead > tr > td,
.table-compact > thead > tr > th,
.table-compact > tr > td,
.table-compact > tbody > tr > td,
.table-compact > tbody > tr > th {
    padding: 0px;
}

.table-compact {
    margin-bottom: 0px;
}

.table-almost-compact > thead > tr > td,
.table-almost-compact > thead > tr > th,
.table-almost-compact > tr > td,
.table-almost-compact > tbody > tr > td,
.table-almost-compact > tbody > tr > th {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 4px;
    padding-right: 4px;
}

table.table-placer > tbody > tr > td {
    padding-right: 4px;
    padding-left: 4px;
    vertical-align: top;
}

td.placer-label {
    text-align: right;
}

hr.hr-compact {
    margin-top: 4px;
    margin-bottom: 4px;
}

.top-aligned > thead > tr > td,
.top-aligned > thead > tr > th,
.top-aligned > tr > td,
.top-aligned > tbody > tr > td,
.top-aligned > tbody > tr > th {
    vertical-align: top;
}

.person-editor-required {
}

.firm-editor-required {
}

.myTestClass {
    color: cadetblue
}

.text-edit-long {
    width: 480px;
}

.text-edit-middle {
    width: 280px;
}

.text-edit-tiny {
    width: 50px;
}

.date-edit {
    width: 190px;
}

.ContragentEditorLabel {
    width: 200px;
    text-align: right;
    overflow: hidden;
    padding-right: 4px;
}

.percents {
    font-size: x-small;
    color: darkblue;
}

.AreaCircle {
    width: 16px; /* задаете свои размеры */
    height: 16px;
    overflow: hidden;
    /*    padding: 5px; */ /* создание отступов */
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 2px solid;
    vert-align: middle;
    vertical-align: middle;
    horiz-align: center;
    text-align: center;
}

    .AreaCircle DIV {
        width: 17px;
        width: 17px;
        background-color: white;
        opacity: 0.6;
    }

.marker-cluster-stop-icon {
    background-clip: padding-box;
    border-radius: 10px;
    background-color: #b40000;
    background-color: rgba(180, 0, 0, 1);
}

    .marker-cluster-stop-icon div {
        background-color: #ff3f3f;
        background-color: rgba(255, 63, 63, 1);
        width: 16px;
        height: 16px;
        margin-left: 2px;
        margin-top: 2px;
        text-align: center;
        vertical-align: bottom;
        border-radius: 8px;
        font: 7px "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

.marker-cluster-wastedump-icon {
    background-clip: padding-box;
    border-radius: 10px;
    background-color: #6f6f30;
}

    .marker-cluster-wastedump-icon div {
        background-color: #9f9f40;
        width: 16px;
        height: 16px;
        margin-left: 2px;
        margin-top: 2px;
        text-align: center;
        vertical-align: bottom;
        border-radius: 8px;
        font: 7px "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

.marker-cluster-garage-icon {
    background-clip: padding-box;
    border-radius: 10px;
    background-color: #006000;
}

    .marker-cluster-garage-icon div {
        background-color: #30bf30;
        width: 16px;
        height: 16px;
        margin-left: 2px;
        margin-top: 2px;
        text-align: center;
        vertical-align: bottom;
        border-radius: 8px;
        font: 7px "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

.with-reduced-font {
    font-size: 12px;
}

.checkselect-over {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

.checkselect-popup {
    display: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    max-height: 200px;
    position: absolute;
    top: 100%;
    left: 0px;
    border: 1px solid #dadada;
    border-top: none;
    background: #fff;
    z-index: 9999;
    overflow: auto;
    user-select: none;
    padding-left: 15px;
}

.checkselect label {
    position: relative;
    display: block;
    margin: 0;
    padding: 4px 6px 4px 25px;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.1;
    cursor: pointer;
}

.checkselect-popup input {
    position: absolute;
    top: 5px;
    left: -4px;
    margin: 0 !important;
    padding: 0;
}

.checkselect-popup label:hover {
    background: #45454526;
    color: #000;
}

.checkselect-popup fieldset {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

    .checkselect-popup fieldset input {
        left: 15px;
    }

    .checkselect-popup fieldset label {
        padding-left: 32px;
    }

.checkselect-popup legend {
    display: block;
    margin: 0;
    padding: 5px 8px;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.1;
}

.checkselect-popup {
    width: 300px;
    left: 15px;
}

.date-range {
    padding: 0.375rem 0.75rem;
    text-align: center;
    border: 1px solid #ced4da;
    width: 100%;
}

.date-range-left {
    border-right: 0 !important;
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.date-range-right {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.dropdown-item.active, .dropdown-item:active {
    color: #24262a;
    text-decoration: none;
    background-color: #e7e7e7;
}

.navbar-light li:hover {
    color: rgba(0,0,0,.7);
    background: whitesmoke;
}

.navbar-vertical-content {
    padding: 0rem;
    padding-right: 15px;
    min-width: 80px;
    padding-left: 15px;
}

    .navbar-vertical-content i {
        font-size: 18px;
        vertical-align: text-bottom;
    }

    .navbar-vertical-content .nav-link {
        padding-left: 1rem;
    }

    .navbar-vertical-content ul {
        list-style: none;
    }

    .navbar-vertical-content .navbar-nav > li {
        padding: 0.5rem;
    }

.h-full-screen {
    min-height: calc(100vh - 70px);
}

.nav-ul-title {
    display: none;
    font-weight: 700;
    padding: .5rem;
}

@media (min-width: 992px) {
    .hide-left-menu span li:hover {
        display: inline-block;
    }

    .hide-left-menu span {
        display: none;
    }

    .hide-left-menu ul {
        display: none;
    }

    .hide-left-menu li {
        position: relative;
    }

    .hide-left-menu ul > li:hover > ul > .nav-ul-title {
        display: block;
    }

    .hide-left-menu .navbar-nav {
        text-align: center;
    }

    .hide-left-menu .nav-link {
        padding-left: 0;
    }

    .hide-left-menu ul > li:hover > ul {
        display: block;
        z-index: 999;
        position: absolute;
        width: 190px;
        text-align: left;
        background: #f5f5f5;
        padding: 0 1rem 0rem 1rem;
        overflow: auto;
        left: 100%;
        top: 0;
    }

    .hide-left-menu li {
        position: relative;
    }

    .hide-left-menu [data-toggle].nav-link {
        pointer-events: none;
        cursor: default;
    }

    .hide-scroll {
        height: 300px;
        overflow: auto
    }
}

/* Далее идет перенос стилей пред. для стилей,цветов - временно*/

.btn-primary {
    background-color: #458bc4 !important;
    border-color: #458bc4 !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
    .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover,
    .open > .dropdown-toggle.btn-primary {
        background-color: #3a7eb6 !important;
        border-color: #3a7eb6 !important;
    }

.btn-success {
    background-color: #4fc55b !important;
    border-color: #4fc55b !important;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success {
        background-color: #3ebc4b !important;
        border-color: #3ebc4b !important;
    }

.btn-info {
    background-color: #3db9dc !important;
    border-color: #3db9dc !important;
}

    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.focus, .btn-info:active, .btn-info:focus, .btn-info:hover, .open > .dropdown-toggle.btn-info {
        background-color: #27b1d8 !important;
        border-color: #27b1d8 !important;
    }

.btn-warning {
    color: #ffffff !important;
    background-color: #e2ab3b !important;
    border-color: #e2ab3b !important;
}

    .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.focus, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open > .dropdown-toggle.btn-warning {
        color: #ffffff !important;
        background-color: #dfa125 !important;
        border-color: #dfa125 !important;
    }

.btn-danger {
    background-color: #d57171 !important;
    border-color: #d57171 !important;
}

    .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .btn-danger.active, .btn-danger.focus, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open > .dropdown-toggle.btn-danger {
        background-color: #cf5d5d !important;
        border-color: #cf5d5d !important;
    }

.btn-dark {
    background-color: #626773 !important;
    border-color: #626773 !important;
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .btn-dark.focus, .btn-dark:active, .btn-dark:focus, .btn-dark:hover, .open > .dropdown-toggle.btn-dark {
        background-color: #565b65 !important;
        border-color: #565b65 !important;
    }

input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: relative;
    border: none;
    margin-bottom: -4px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    input[type="checkbox"]:focus,
    .checkbox input[type="checkbox"]:focus,
    .checkbox-inline input[type="checkbox"]:focus {
        outline: none;
    }

    input[type="checkbox"]:after,
    .checkbox input[type="checkbox"]:after,
    .checkbox-inline input[type="checkbox"]:after {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -2px;
        border: 1px solid #969aa5;
        border-radius: 2px;
        -webkit-transition: 240ms;
        -o-transition: 240ms;
        transition: 240ms;
    }

    input[type="checkbox"]:checked:before,
    .checkbox input[type="checkbox"]:checked:before,
    .checkbox-inline input[type="checkbox"]:checked:before {
        content: "";
        position: absolute;
        top: 0;
        left: 6px;
        display: table;
        width: 6px;
        height: 12px;
        border: 2px solid #ffffff;
        border-top-width: 0;
        border-left-width: 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    input[type="checkbox"]:checked:after,
    .checkbox input[type="checkbox"]:checked:after,
    .checkbox-inline input[type="checkbox"]:checked:after {
        background-color: #23b195;
        border-color: #23b195;
    }

    input[type="checkbox"]:disabled {
        opacity: 0.5;
    }

        input[type="checkbox"]:disabled:after,
        .checkbox input[type="checkbox"]:disabled:after,
        .checkbox-inline input[type="checkbox"]:disabled:after {
            border-color: #626773;
        }

        input[type="checkbox"]:disabled:checked:after,
        .checkbox input[type="checkbox"]:disabled:checked:after,
        .checkbox-inline input[type="checkbox"]:disabled:checked:after {
            background-color: #626773;
            border-color: transparent;
        }

.checkbox.checkbox-circle input[type="checkbox"]:after, .checkbox-inline.checkbox-circle input[type="checkbox"]:after {
    border-radius: 50%;
}

.checkbox.checkbox-circle input[type="checkbox"]:checked:before, .checkbox-inline.checkbox-circle input[type="checkbox"]:checked:before {
    top: 2px;
    left: 7px;
    width: 4px;
    height: 8px;
}

.checkbox.checkbox-custom input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-custom input[type="checkbox"]:checked:after {
    background-color: #ffffff;
    border-color: #626773;
}

.checkbox.checkbox-custom input[type="checkbox"]:checked:before,
.checkbox-inline.checkbox-custom input[type="checkbox"]:checked:before {
    border-color: #626773;
}

.checkbox.checkbox-primary input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-primary input[type="checkbox"]:checked:after {
    background-color: #458bc4;
    border-color: #458bc4;
}

.checkbox.checkbox-success input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-success input[type="checkbox"]:checked:after {
    background-color: #4fc55b;
    border-color: #4fc55b;
}

.checkbox.checkbox-info input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-info input[type="checkbox"]:checked:after {
    background-color: #3db9dc;
    border-color: #3db9dc;
}

.checkbox.checkbox-warning input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-warning input[type="checkbox"]:checked:after {
    background-color: #e2ab3b;
    border-color: #e2ab3b;
}

.checkbox.checkbox-danger input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-danger input[type="checkbox"]:checked:after {
    background-color: #d57171;
    border-color: #d57171;
}

.checkbox.checkbox-dark input[type="checkbox"]:checked:after,
.checkbox-inline.checkbox-dark input[type="checkbox"]:checked:after {
    background-color: #626773;
    border-color: #626773;
}

.mails .checkbox {
    margin-bottom: 0;
    margin-top: 0;
    vertical-align: middle;
    display: inline-block;
}

.collapsing {
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease;
}

.menu-icon {
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
}

a svg.menu-icon path {
    fill: #626773;
    fill-opacity: 0.8;
}

a.active svg.menu-icon path {
    fill: #23b195;
    fill-opacity: 1;
}

a.active:hover svg.menu-icon path {
    fill: #626773;
    fill-opacity: 1;
}

a:hover svg.menu-icon path {
    fill: #626773;
    fill-opacity: 1;
}

/* Конец переноса */

.table {
    max-width: 100%;
    width: 100% !important;
}

.bootstrap-select > .dropdown-menu > .popover-header > button.close {
    display: none;
}

[v-cloak] {
    display: none !important;
}

.bootstrap-select > .dropdown-toggle {
    transition: all .15s linear;
}

#loader {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(255,255,255,0.8);
}


.lds-ring {
    display: inline-block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
}

    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 51px;
        height: 51px;
        margin: 6px;
        border: 6px solid #000;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #000 transparent transparent transparent;
    }

        .lds-ring div:nth-child(1) {
            animation-delay: -0.45s;
        }

        .lds-ring div:nth-child(2) {
            animation-delay: -0.3s;
        }

        .lds-ring div:nth-child(3) {
            animation-delay: -0.15s;
        }

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.enter-wrapper {
    cursor: help;
    background-color: #4fc55b;
    padding: 0.375rem 0.75rem;
}

.info-text-enter {
    position: absolute;
    top: -30px;
    left: 37px;
    transform: translate(0, -50%);
    width: 200px;
    word-break: break-word;
    background-color: #868e96;
    color: white;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

.dataTables_processing {
    z-index: 1001;
    background-color: rgba(0,0,0,.25);
    position: absolute;
    align-items: center;
    justify-content: center;
    transition-duration: .2s;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none;
    margin: 0 !important;
}

div.dataTables_processing > div:last-child {
    margin: 10em auto !important;
}

    div.dataTables_processing > div:last-child > div:nth-child(1) {
        background: rgb(43 149 255);
    }

    div.dataTables_processing > div:last-child > div:nth-child(2) {
        background: rgb(43,242,255);
    }

    div.dataTables_processing > div:last-child > div:nth-child(3) {
        background: rgb(130 247 255);
    }

    div.dataTables_processing > div:last-child > div:nth-child(4) {
        background: rgb(130 247 255);
    }

.filter-select {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    height: 100%;
}


#ui-datepicker-div {
    z-index: 1051 !important;
}


.wrapper-loading {
    background: rgb(255 255 255 / 80%);
    top: 0;
    left: 0;
    z-index: 999;
    position: absolute;
    width: 100%;
    height: 100%;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 500px;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        max-height: 500px;
    }

    to {
        max-height: 0;
        opacity: 0;
    }
}

.slide-enter-active {
    animation: slideDown 0.5s ease-out forwards;
}

.slide-leave-active {
    animation: slideUp 0.5s ease-out forwards;
}

.coordinates-latitude {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: center;
}

.coordinates-longitude {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none;
    text-align: center;
}

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

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ {
    opacity: 0;
}

/* vue-select стили сделаные для Logistic*/
.vs__dropdown-toggle {
    padding: .375rem .75rem;
    min-height: calc(1.5em + .75rem + 2px);
}

.vs__search, .vs__search:focus {
    padding: 0;
    margin: 0;
}

.vs__selected-options {
    padding: 0;
    margin: 0;
}

.vs__deselect {
    fill: #dc3545b5 !important;
}

.vs__selected {
    margin: 0px 2px 0px 0px;
    border: 1px solid #c0c3c6 !important;
    background-color: #f8f9fa !important;
}

.vs--single .vs__selected {
    background-color: transparent !important;
    border-color: transparent !important;
}
/* vue-select стили сделаные для Logistic*/
.input-hover-primery input.form-control:hover {
    border-color: #2196F3;
}

.auto-complete {
    height: calc(1.5em + .75rem + 2px);
}

.input-group > .auto-complete {
    flex: 1 1 auto;
    width: 1%;
}

    .input-group > .auto-complete input {
        max-width: 100% !important;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 1%;
        flex: 1 1 auto;
    }

.p-autocomplete-item:hover {
    background: #f8f9fa !important;
}

.p-autocomplete-item {
    white-space: normal !important;
}

.p-autocomplete-panel {
    max-width: 100%;
}

    .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
        padding: 0.25rem 0.5rem !important;
    }

.ind-one-hundred {
    z-index: 1000 !important;
}

.p-inputtext {
    font-size: 1rem;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

.child-map-div {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    display: flex;
    gap: 10px;
    opacity: 0;
    transform-origin: center center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.child-map-btn {
    font-size: 0.90rem;
    width: 75px;
    padding: 0.25rem;
    border-color: #17a2b8 !important;
    border: 1px solid #dee2e6 !important;
}


.parent-map-card {
    padding-left: 0.7rem !IMPORTANT;
    padding-right: 0.7rem !IMPORTANT;
}

#mapdiv .leaflet-control-layers {
    display: none;
}

.expandable-window {
    position: absolute;
    top: -55px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.action-btn {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    background-color: #f8f9fa;
    border: 1px solid #17a2b8;
    border-radius: 4px;
    cursor: pointer;
}

.window-tail {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
    z-index: 90;
}

.active {
    background-color: #d6d6d6;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.cancel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}

.tooltip-custom {
    top: -1.6rem;
    font-size: 0.75rem;
    background-color: #333;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.transition-all {
    transition: 0.5s all;
}

.p-float-label > label {
    font-size: 14px !important;
}

.btn-hold {
    box-shadow: inset 0px 0px 5px 0px #0000006e;
}

.sr-badge {
    border-radius: 3px;
    padding: .25em .5rem;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .3px;
}

    .sr-badge.status-not-attached {
        background-color: #e0e0e0;
        color: #616161;
    }

    .sr-badge.status-new {
        background-color: #b3e5fc;
        color: #23547b;
    }

    .sr-badge.status-in-process {
        background-color: #ffecb3;
        color: #8a6d3b;
    }

    .sr-badge.status-completed {
        background-color: #c8e6c9;
        color: #256029;
    }

    .sr-badge.status-not-activated {
        background-color: #d1c4e9;
        color: #4527a0;
    }

    .sr-badge.status-expired {
        background-color: #ffcdd2;
        color: #c63737;
    }

    .sr-badge.status-not-export {
        background-color: #ffccbc;
        color: #b71c1c;
    }

    .sr-badge.status-cancel {
        background-color: #f8bbd0;
        color: #880e4f;
    }

    .sr-badge.status-closed {
        background-color: #cfd8dc;
        color: #37474f;
    }

    .sr-badge.status-not-processed {
        background-color: #ffecb3;
        color: #8a5340;
    }

    .sr-badge.status-raw-cancel {
        background-color: #e0e0e0;
        color: #757575;
    }

.p-button-success {
    background-color: #4fc55b;
    border-color: #4fc55b;
}

.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
    background-color: #d57171;
    border-color: #d57171;
}

    .p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover {
        background-color: #cf5d5d;
        border-color: #cf5d5d;
    }

.p-button.p-button-light, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #212529;
}

input.p-inputtext {
    width: 100%;
}

span.p-inputnumber {
    width: 100%;
}

.font-size-sm {
    font-size: 0.9rem;
}

.no-select {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.vl-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    height: 95%;
    width: 3px;
    background-color: var(--bs-primary, #0d6efd);
    pointer-events: none;
    user-select: none;
    border-radius: 0.25rem;
}

.w-1r {
    width: 1rem !important;
}

.w-2r {
    width: 2rem !important;
}

.w-4r {
    width: 4rem !important;
}

.w-8r {
    width: 8rem !important;
}

.h-1r {
    height: 1rem !important;
}

.h-2r {
    height: 2rem !important;
}

.h-4r {
    height: 4rem !important;
}

.h-8r {
    height: 8rem !important;
}

.va-none,
.va-none::before,
.va-none.bi::before {
    vertical-align: 0 !important;
}

.bi-sm::before {
    font-size: 0.875rem;
    vertical-align: -0.2em;
}

.bi-lg::before {
    font-size: 1.25rem;
    vertical-align: -0.225em;
}

.bi-xl::before {
    font-size: 1.5rem;
    vertical-align: -0.25em;
}

.p-dropdown.p-dropdown-sm .p-dropdown-label {
    font-size: 0.875rem;
    padding: 0.4375rem 0.4375rem;
}

.map-settings-panel {
    position: absolute;
    left: -300px;
    width: 255px;
    z-index: 501;
    background: white;
    border: 1px solid #28a745;
    transition: left 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    max-height: 400px;
    padding: 1rem;
}

    .map-settings-panel.open {
        left: 0px;
    }

.overlay-card {
    z-index: 1000;
    top: -14rem;
    left: 0;
    margin-top: 0;
    position: absolute;
    background: #fff;
    color: #495057;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
    transition: all 0.4s ease;
}

    .overlay-card.overlay-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        animation: fadeInOverlay 0.5s ease forwards;
    }

    .overlay-card.overlay-fullscreen-exit {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        animation: fadeOutOverlay 0.3s ease forwards;
    }

.overlay-content {
    padding: 1rem;
}

.slide-right-enter-active,
.slide-right-leave-active {
    transition: transform 0.7s ease-in-out;
}

.slide-right-enter {
    transform: translateX(100%);
}

.slide-right-leave-to {
    transform: translateX(100%);
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
        transform: translateX(25rem) translateY(2rem) scale(0.45);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1)
    }
}

@keyframes fadeOutOverlay {
    from {
        opacity: 1;
        transform: translateX(0) scale(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transition: all var(--day-content-transition-time);
    display: inline-block;
}

    .dot.dot-gray {
        background-color: var(--gray-600);
    }

    .dot.dot-red {
        background-color: var(--red-600);
    }

    .dot.dot-orange {
        background-color: var(--orange-600);
    }

    .dot.dot-yellow {
        background-color: var(--yellow-600);
    }

    .dot.dot-green {
        background-color: var(--green-600);
    }

    .dot.dot-teal {
        background-color: var(--teal-600);
    }

    .dot.dot-blue {
        background-color: var(--blue-600);
    }

    .dot.dot-indigo {
        background-color: var(--indigo-600);
    }

    .dot.dot-purple {
        background-color: var(--purple-600);
    }

    .dot.dot-pink {
        background-color: var(--pink-600);
    }

    .dot.dot-black {
        background-color: black;
    }

.dot-fade-enter-active,
.dot-fade-leave-active {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.dot-fade-enter-from,
.dot-fade-leave-to {
    transform: scale(0);
    opacity: 0;
}

.dot-fade-enter-to,
.dot-fade-leave-from {
    transform: scale(1);
    opacity: 1;
}

.none-gap-label > label {
    margin-bottom: 0;
}

.picker-wrapper {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

    .picker-wrapper.picker-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }


.areas-draggable {
    position: absolute;
    z-index: 1000;
    width: 320px;
    max-height: 60vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
}

.d-grid {
    display: grid !important;
}