body {
    margin: 0;
    padding: 0;
}

html,
body,
#map-container {
    height: 100%;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
}

.maplibregl-popup-content {
    width: 300px;
    padding: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.info-popup .maplibregl-popup-content {
    background-color: rgba(255, 255, 255, 1);
    color: white;
    border-radius: 5%;
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: rgba(255, 255, 255, 1) !important;
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: rgba(255, 255, 255, 1) !important;
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: rgba(255, 255, 255, 1) !important;
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: rgba(255, 255, 255, 1);
}

.flex-center {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-center.left {
    left: 0px;
}

.flex-center.right {
    right: 0px;
}

#sources {
    max-height: calc(100vh - 210px);
}

.sidebar-content {
    position: absolute;
    width: 95%;
}

.sidebar-toggle {
    position: absolute;
    width: 1.3em;
    height: 1.3em;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-toggle.left {
    right: -1.4rem;
}

.sidebar-toggle.right {
    left: -1.4rem;
}

.sidebar-toggle:hover {
    color: #0aa1cf;
    cursor: pointer;
}

.sidebar {
    transition: transform 1s;
    z-index: 1;
    width: 500px;
}

.left.collapsed {
    transform: translateX(-495px);
}

.right.collapsed {
    transform: translateX(495px);
}

@media (max-width: 768px) {
    .sidebar {
        width: 340px;
    }

    .left.collapsed {
        transform: translateX(-335px);
    }

    .right.collapsed {
        transform: translateX(335px);
    }

    #sources {
        max-height: calc(100vh - 300px);
    }
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 1s ease;
}

.rotate-0 {
    transform: rotate(0deg);
    transition: transform 1s ease;
}

.dark\:bg-gray-900\/80 {
    background-color: rgb(17 24 39 / 0) !important;
}


@keyframes fadeOut {
    from {
        background-color: rgba(17 24 39 / 0)
    }

    to {
        background-color: rgba(17 24 39 / 0.4)
    }
}

#server-modal:not(:target) {
    animation: fadeOut 1s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 3s ease-in-out forwards;
}

.driver-popover.driverjs-theme {
    background-color: #ffffff;
    color: #000;
}

.driver-popover.driverjs-theme .driver-popover-title {
    font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
    color: #6b7280;
    font-weight: 300;
}

.driver-popover.driverjs-theme button {
    flex: 1;
    text-align: center;
    background-color: #3b82f6;
    color: #ffffff;
    text-shadow: none;
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 6px;
}

.driver-popover.driverjs-theme button:hover {
    background-color: #1A56DB;
    color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
    justify-content: space-between;
    gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
    color: #9b9b9b;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
    color: #1A56DB;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: #ffffff;
}