/* Colors */
:root {
    --primary-color: #aa0031;
    --secondary-color: #002e52;
    --accent-color: #cdccc8;
    --text-light: #ffffff;
    --text-dark: #1a1a1a;
    --success-color: #2ecc71;
    --warning-color: #ffa500;
    --danger-color: #d91e18;
}

.menunav {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.container-fluid {
    max-width: 1400px;
}

.homepage-banner {
    background-image: url(/images/banner.jpg);
    color: var(--text-light);
    padding: 8rem 1rem;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 50%;
}
.mini-banner {
    padding: 5rem 2rem;
}
.homepage-banner > h1 {
    font-size: clamp(2rem, 5vw, 5rem);
}

.hxhide{
	display:none;
}

.btnAct{
	min-width: 6rem;
}

@-webkit-keyframes animate-positive{
    0% { width: 0%; }
}
@keyframes animate-positive{
    0% { width: 0%; }
}
#map {
    height: 20rem;
    width: 100%;
}
#world-map {
    margin: auto;
    width: 80%;
    height: 30vw;
}
#selected-tags, #unselected-tags {
    width: clamp(8rem, 12vw, 15rem);
    height: clamp(6rem, 9vw, 12rem);
}

div.hide {
    -webkit-text-security: disc;
}

.autocomplete-suggestions {
    border: 0.05rem solid #ddd;
    max-height: 12rem;
    overflow-y: auto;
    position: absolute;
    background-color: #fff;
    z-index: 1000;
}
.autocomplete-suggestions div {
    padding: 0.5rem;
    cursor: pointer;
}
.autocomplete-suggestions div:hover {
    background-color: #f0f0f0;
}

.card-calendar {
    max-width: 100%;
}

.card-calendar .calendar {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 992px) {
    .homepage-banner {
        padding: 6rem 1rem;
    }

    #selected-tags, #unselected-tags {
        width: 100%;
        height: 8rem;
    }
}

@media (max-width: 768px) {
    .card-calendar {
        max-width: 100%;
        margin: 0 1rem;
    }

    .homepage-banner > h1 {
        font-size: 3rem;
    }
}

@media (max-width: 576px) {
    .homepage-banner {
        padding: 4rem 0.5rem;
    }

    .homepage-banner > h1 {
        font-size: 2rem;
    }

    .card-calendar {
        margin: 0 0.5rem;
    }

    .card-calendar .card-body {
        padding: 0.5rem !important;
    }
}