.custom-modal {
    --modal-border: #ebebeb;
    --modal-background: #fafafa;
    --content-background: #ffffff;
    --title-color: #2b2b2b;
    --icon-color: #767676;
    --hover-color: #f5f5f5;
    --default-color: #007bc4;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 8vh;
    left: 40vh;
    min-width: 263px;
    padding: 8px;
    z-index: 99999999999999999999;
    background-color: var(--modal-background);
    border: 1px solid var(--modal-border);
    resize: both;
    overflow: hidden;
    width: 500px;
    height: 600px;
}

.custom-modal[minimize="true"] {
    min-height: 38px !important;
    max-height: 38px !important;
    resize: unset;
}

.custom-modal.preview {
    height: unset;
}

.custom-modal .custom-modal-header {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
}

.custom-modal .custom-modal-header .custom-modal-title {
    user-select: none;
    flex-grow: 1;
    font-family: "Xunta Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: var(--title-color);
}

.custom-modal .custom-modal-header .custom-modal-buttons {
    color: var(--icon-color);
    display: flex;
    flex-wrap: nowrap;
    cursor: pointer;
}

.custom-modal .custom-modal-header .custom-modal-buttons div:after {
    font-family: "Material Symbols Rounded";
    font-size: 16px;
    font-weight: 400;
    color: var(--icon-color);
}

.custom-modal .custom-modal-header .custom-modal-buttons div:hover {
    background-color: var(--hover-color);
}

.custom-modal .custom-modal-header .custom-modal-buttons .custom-modal-minimize:after {
    content: "\e15b";
}

.custom-modal .custom-modal-header .custom-modal-buttons .custom-modal-pin:after {
    content: "\f10d";
}

.custom-modal .custom-modal-header .custom-modal-buttons .custom-modal-close:after {
    content: "\e5cd";
}

.custom-modal[minimize="true"] .custom-modal-header .custom-modal-buttons .custom-modal-minimize:after {
    color: var(--default-color);
}

.custom-modal[unpin="false"] .custom-modal-header .custom-modal-buttons .custom-modal-pin:after {
    color: var(--default-color);
}

.custom-modal .custom-modal-body {
    position: relative;
    height: calc(100% - 26px);
}

.custom-modal .custom-modal-body .custom-modal-content {
    position: relative;
    background-color: var(--content-background);
    border: 1px solid var(--modal-border);
    border-radius: unset;
    height: 100%;
}

.custom-modal.preview .custom-modal-body .custom-modal-content {
    overflow: scroll;
}

.custom-modal .custom-modal-body .custom-modal-content .custom-modal-info {
    height: 100%;
}

.custom-modal .custom-modal-body .custom-modal-content .custom-modal-info .tab-content {
    width: 100%;
    height: 100%;
    user-select: text;
}

.custom-modal .custom-modal-body .custom-modal-content .custom-modal-info .tab-content .tab-pane.active {
    overflow-y: scroll;
    height: calc(100% - 40px);
    width: 100%;
}

/* resize */
/*
    .custom-modal .modal-resize .resize-top {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 101%;
        height: 6px;
        cursor: n-resize;
    }

    .custom-modal .modal-resize .resize-bottom {
        position: absolute;
        bottom: -1px;
        left: -1px;
        width: 101%;
        height: 6px;
        cursor: s-resize;
    }

    .custom-modal .modal-resize .resize-left {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 6px;
        height: 101%;
        cursor: w-resize;
    }

    .custom-modal .modal-resize .resize-right {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 6px;
        height: 101%;
        cursor: e-resize;
    }
*/

/* defaul table */
.custom-modal .default-table tr th {
    font-size: 14px;
    font-weight: 700;
}

.custom-modal .default-table tr td {
    font-size: 12px;
    font-weight: 400;
}

.custom-modal .default-table tr th,
.custom-modal .default-table tr td {
    border-top: 1px solid var(--default-color);
    border-left: 1px solid var(--default-color);
    padding: 3px 10px;
}

.custom-modal .default-table tr th:last-child,
.custom-modal .default-table tr td:last-child {
    border-right: 1px solid var(--default-color);
}

.custom-modal .default-table tr:last-child td {
    border-bottom: 1px solid var(--default-color);
}

.custom-modal .custom-modal-info select.custom-modal-selector {
    outline: unset;
    padding: 6px;
    border-radius: 3px;
}

.custom-modal .custom-modal-info .tab-content {
    margin-top: 6px;
}

.custom-modal .custom-modal-info .tab-content .card-header {
    padding: 0;
}

.custom-modal .custom-modal-info .tab-content .card-header button {
    width: 100%;
    height: 100%;
    text-align: left;
    padding: 8px 16px;
    text-decoration: unset;
    color: unset;
}

.custom-modal .custom-modal-info .tab-content .card {
    margin-top: 3px;
}

.custom-modal .custom-modal-info .tab-content .card table {
    margin: 0 auto;
}

.custom-modal .custom-modal-info .tab-content .card table tr td {
    width: 50%;
}

.custom-modal .custom-modal-info .tab-content .card table tr td:first-child {
    text-align: right;
    font-weight: bold;
    padding-right: 12px;
}

.custom-modal .custom-modal-info .tab-content .card table tr td:last-child {
    text-align: left;
    padding-left: 12px;
}

.custom-modal.preview img {
    margin: 0 auto;
}

.custom-modal.preview img.range {
    width: 100%;
    height: 50px;
    order: 2;
}

.custom-modal.preview .custom-modal-body .custom-modal-content {
    flex-direction: initial;
}

.custom-modal.preview .custom-modal-body .custom-modal-content span:nth-child(2) {
    order: 1;
}

.custom-modal.preview .custom-modal-body .custom-modal-content span:nth-child(3) {
    order: 3;
}

.custom-modal.preview .custom-modal-body .custom-modal-content img.range~span {
    padding: 0px 8px;
    display: inline-flex;
    align-items: center;
}

body #app .leaflet-popup-content-wrapper {
    border-radius: unset;
}

.custom-modal img {
    max-width: 200px;
    max-height: 200px;
}