.carousel-control.left:hover,
.carousel-control.right:hover {
    background: none;
    transform: scale(1.1);
    transition: all .5s ease;
}

.carousel-control.left:active,
.carousel-control.right:active {
    background: none;
    transform: scale(1.5);
    transition: all .1s ease;
}

svg {
    vertical-align: -5px;
    width: 21px;
    padding-left: 2px;
}

#info-evento > div > i {
    width: 20px;
    padding-left: 5px;
}

.widget-advanced:hover {
    box-shadow: 0px 0px 15px 10px #AFAFAF;
    transition: all .5s ease;
}

#p-info {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(1.6px);
    -webkit-backdrop-filter: blur(1.6px);
    font-size: 15px;
    padding: 0px 0px 0px 0px;
}

#p-info > p {
    margin: 5px 0px 5px;
}

.widget-advanced .widget-image-container:hover {
    box-shadow: 0px 0px 10px 2px #AFAFAF;
    transition: all 1s ease;
}

#label-info-detalhe > dt > p {
    margin-bottom: 0px !important;
}

#label-info-detalhe > dd > p {
    margin-bottom: 0px !important;
}

@media (min-width: 1489px) {
    .widget-advanced .widget-main {
        max-height: 173px !important;
        min-height: 173px !important;
    }
}

@media (max-width: 1488px) {
    .widget-advanced .widget-main {
        min-height: 250px !important;
        max-height: 250px !important;
    }
}

@media (min-width: 992px) and (max-width: 2000px) {
    .widget-main > .widget-content.text-center > span {
        font-size: 1.9rem;
    }

    .widget-header {
        height: calc(25vw) !important;
        width: 100% !important;
    }
}

@media (max-width: 991px) {
    .widget-main > .widget-content.text-center > span {
        font-size: 1.9rem;
    }

    .widget-advanced .widget-main {
        min-height: 250px !important;
        max-height: 250px !important;
    }

    .widget-header {
        height: calc(40vw) !important;
        width: 100% !important;
    }
}

@media (min-width: 2001px) {
    .widget-header {
        height: calc(25vw) !important;
        width: 100% !important;
    }
}

.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    background-color: #fff; /* Cor de fundo do card */
    margin-bottom: 20px; /* Espaçamento entre os cards */
}
.header {
    position: relative;
    text-align: center;
    border-bottom: 5px solid #148e81; /* Linha separadora verde */
}
.header img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px 10px 0 0; /* Arredonda apenas a parte superior */
}
.widget-title {
    height: 4em; /* Altura suficiente para duas linhas */
    margin-top: 1em;
    /*margin-bottom: 2em;*/
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona reticências (...) se o texto for cortado */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.widget-main {
    position: absolute;
    bottom: -30px; /* Posição inferior em relação ao header */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #148e81; /* Borda verde */
    box-shadow: 0 0 0 5px #fff; /* Sombra para destacar */
    z-index: 1; /* Para garantir que fique sobre a imagem */
}
.widget-main img {
    max-height: 40px;
    max-width: 40px;
}
.content {
    padding: 10px; /* Espaçamento interno */
    position: relative; /* Para posicionamento do botão */
}
.tags {
    display: flex;
    flex-wrap: wrap; /* Permite que as tags quebrem linha em telas menores */
    justify-content: center; /* Centraliza as tags horizontalmente */
    margin-top: 10px; /* Espaçamento superior das tags */
}
.tag {
    padding: 5px 4px; /* Ajuste o padding para controlar o tamanho da tag */
    border-radius: 5px;
    font-size: 0.9em; /* Use em para tamanho relativo */
    margin-bottom: 5px;
    margin-right: 5px; /* Espaçamento entre as tags */
}

/* Ajustes para diferentes tamanhos de tela */
@media (max-width: 1200px) {
    .tag {
        font-size: 0.9em; /* Um pouco menor para telas grandes */
    }
}

@media (max-width: 992px) {
    .tag {
        font-size: 0.8em; /* Menor para telas médias */
    }
}

@media (max-width: 768px) {
    .tag {
        font-size: 0.7em; /* Menor ainda para telas pequenas */
    }
}

@media (max-width: 576px) {
    .tag {
        font-size: 0.7em; /* Menor para telas muito pequenas */
    }
}

.status-aguarde, .status-presencial, .status-esgotadas, .status-aberta, .status-encerrada, .status-fechada, .status-online {
    color: #fff;
    min-width: 180px;
    display: inline-block;
    text-align: center;
    padding: 4px;
    margin: 5px;
    border-radius: 5px;
    border: 1.5px solid; /* Adiciona uma borda */
    background-color: transparent; /* Remove o fundo */
}

.status-aguarde {
    border-color: #f39c12;
    color: #f39c12; /* Ajusta a cor do texto para combinar com a borda */
}
.status-presencial {
    border-color: #1ec1b8;
    color: #1ec1b8;
}
.status-esgotadas {
    border-color: #dc3545;
    color: #dc3545;
}
.status-aberta {
    border-color: #148e81;
    color: #148e81;
}
.status-encerrada {
    border-color: #e74c3c;
    color: #e74c3c;
}
.status-fechada {
    border-color: #ffc107;
    color: #ffc107;
}
.status-online {
    border-color: #d8334a;
    color: #d8334a;
}

.details i {
    margin-right: 5px;
}

.event-page {
    color: #fff !important;
    background-color: #d9416c;
    border-color: #d9416c;
}
.event-page:hover {
    background-color: #b23257;
    border-color: #b23257;
    color: #fff !important;;
}
.event-page:active,
.event-page.active {
    background-color: #b23257;
    border-color: #b23257;
    color: #fff !important;;
}

.register {
    color: #fff !important;
    background-color: #34c38f;
    border-color: #34c38f;
}
.register:hover {
    background-color: #2ea27d;
    border-color: #2ea27d;
    color: #fff !important;;
}
.register:active,
.register.active {
    background-color: #2ea27d;
    border-color: #2ea27d;
    color: #fff !important;;
}

.follow {
    color: #fff !important;
    background-color: #50a5f1;
    border-color: #50a5f1;
}
.follow:hover {
    background-color: #1c7ed6;
    border-color: #1c7ed6;
    color: #fff !important;;
}
.follow:active,
.follow.active {
    background-color: #1c7ed6;
    border-color: #1c7ed6;
    color: #fff !important;;
}

.payment-method {
    font-size: 0.95em;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.payment-method i {
    margin-right: 4px;
}

/* Resolução de até 480px (celulares menores) */
@media (max-width: 480px) {
    .payment-method {
        font-size: 0.95em;
    }
}

/* Resolução entre 481px e 768px (celulares maiores e tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    .payment-method {
        font-size: 0.95em;
    }
}

/* Resolução entre 769px e 1024px (tablets e pequenos desktops) */
@media (min-width: 769px) and (max-width: 1024px) {
    .payment-method {
        font-size: 0.95em;
    }
}

/* Resolução entre 1025px e 1366px (laptops comuns) */
@media (min-width: 1025px) and (max-width: 1366px) {
    .payment-method {
        font-size: 0.95em;
    }
}

/* Resolução entre 1367px e 1440px (desktops médios) */
@media (min-width: 1367px) and (max-width: 1440px) {
    .payment-method {
        font-size: 1em;
    }
}

/* Resolução acima de 1440px (grandes desktops e monitores) */
@media (min-width: 1441px) {
    .payment-method {
        font-size: 1.05em;
    }
}

/* Full screen mode */
@media all and (display-mode: fullscreen) {
    .payment-method {
        font-size: 1.1em;
    }
}

.progress-bar {
    transition: width 0.3s ease-in-out;
}

.active {
    width: 100%;
    opacity: 1;
}

.inactive {
    width: 0%;
    opacity: 0;
    pointer-events: none;
}