.marker-content {
    display: none;
}
.marker-content-ready {
    display: block;
	position: absolute;
    z-index: 25;
}

.marker._visible {
    z-index: 30;
}

.center-slider .marker {
    right: 16px;
    bottom: 0;
}

.marker {
    font-family: "Inter";
    color: rgba(23, 25, 35, 0.8);
}
.marker,
.marker * {
    box-sizing: border-box;
}
.marker * {
    font-family: inherit !important;
}
.marker__popup {
    position: absolute;
    width: 300px;
    padding: 16px;
    background: #fff;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.1s;
    transition-property: visibility, opacity;
    box-shadow: 
        0px 9px 28px 8px rgba(0, 0, 0, 0.05),
        0px 3px 6px -4px rgba(0, 0, 0, 0.12),
        0px 6px 16px 0px rgba(0, 0, 0, 0.08);
    z-index: 50;
}
.marker._visible .marker__popup {
    visibility: visible;
    opacity: 1;
}

.marker__popup h3,
.marker__popup h4 {
    margin: 0;
    font-weight: 600;
}
.marker__popup h3 {
    font-size: 16px;
    line-height: 24px;
}
.marker__popup h4 {
    font-size: 14px;
    line-height: 22px;
}
.marker__popup * + h4 {
    margin-top: 8px;
}
.marker__content {
    font-size: 14px;
    line-height: 22px;
}

.marker__popup:before {
    content: "";
    left: 0;
    right: 0;
    height: 14px;
    position: absolute;
}
.marker__popup:after {
    content: "";
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 0;
    height: 0;
}

.marker[data-marker-position*=top] .marker__popup:before {
    bottom: 100%;
    margin-bottom: -1px;
}
.marker[data-marker-position*=top] .marker__popup:after {
    bottom: 100%;
    border-bottom: 9px solid #fff;
    margin-bottom: -1px;
}
.marker[data-marker-position*=bottom] .marker__popup:before {
    top: 100%;
    margin-top: -1px;
}
.marker[data-marker-position*=bottom] .marker__popup:after {
    top: 100%;
    border-top: 9px solid #fff;
    margin-top: -1px;
}
.marker[data-marker-position*=right] .marker__popup:after {
    right: 16px;
}
.marker[data-marker-position*=left] .marker__popup:after {
    left: 16px;
}

.marker[data-marker-position*=top][data-marker-position*=right] .marker__popup {
    top: 100%;
    right: 0px;
    left: initial;
    bottom: initial;
    margin-top: 12px;
    margin-bottom: initial;
}

.marker[data-marker-position*=top][data-marker-position*=left] .marker__popup {
    top: 100%;
    right: initial;
    left: 0px;
    bottom: initial;
    margin-top: 12px;
    margin-bottom: initial;
}

.marker[data-marker-position*=bottom][data-marker-position*=right] .marker__popup {
    top: initial;
	right: 0px;
    left: initial;
    bottom: 100%;
    margin-top: initial;
    margin-bottom: 12px;
}

.marker[data-marker-position*=bottom][data-marker-position*=left] .marker__popup {
    top: initial;
    right: initial;
	left: 0px;
	bottom: 100%;
    margin-top: initial;
    margin-bottom: 12px;
}


.marker__button {
    font-size: 12px;
    line-height: 16px;
    padding: 1px 7px;
    border-radius: 3px;
    user-select: none;
    cursor: pointer;
    border: 1px solid transparent;
    outline: none;
    background: transparent;
    backdrop-filter: blur(7.5px);
    z-index: 25;
}
.marker__button,
[data-marker-theme="light"] .marker__button {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.05);
}
[data-marker-theme="dark"] .marker__button {
    color: rgba(23, 25, 35, 0.25);
    background: rgba(23, 25, 35, 0.02);
}

.marker__button:hover,
[data-marker-theme="light"] .marker__button:hover {
    color: rgba(200, 225, 242, 1);
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
}
/* .marker__button:focus,
[data-marker-theme="light"] .marker__button:focus {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 1);
} */
.marker__button:active,
[data-marker-theme="light"] .marker__button:active {
    color: rgba(203, 213, 224, 1);
    background: rgba(255, 255, 255, 0.05);
    border-color: transparent;
}

[data-marker-theme="dark"] .marker__button:hover {
    color: rgba(33, 96, 141, 1);
    background: rgba(23, 25, 35, 0.02);
    border-color: transparent;
}
/* [data-marker-theme="dark"] .marker__button:focus {
    color: rgba(23, 25, 35, 0.7);
    background: rgba(23, 25, 35, 0.02);
    border-color: rgba(23, 25, 35, 0.7);
} */
[data-marker-theme="dark"] .marker__button:active {
    color: rgba(16, 47, 69, 1); 
    background: rgba(23, 25, 35, 0.02);
    border-color: transparent;
}

.marker__header {
    position: relative;
    margin-bottom: 8px;
    padding-right: 24px;
}
.marker__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: url("./images/Close.svg") center no-repeat;
    background-size: 16px 16px;
    cursor: pointer;
    transition: opacity 0.2s;
    outline: none;
    border-radius: 0;
    border: 0;
}
.marker__close:hover {
    opacity: 0.8;
}

.marker__copy {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 24px;
    height: 24px;
    background: url("./images/CopyOutlined.svg") center no-repeat;
    background-size: 14px 14px;
    background-color: #143B56;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    outline: none;
    border: 0;
}
.marker__copy:hover {
    background-color: #205e8a;
}
.marker__notify {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 22px;
    padding: 6px 8px;
    color: rgba(255, 255, 255, 1);
    background: rgba(23, 25, 35, 0.85);
    border-radius: 6px; 
    cursor: default;
    user-select: none;
}