.text-right {
    text-align: right !important;
}

.table-td {
    text-transform: none !important;
}


.logo-app {
    max-width: 150px;
}

.carousel-open:checked+.carousel-item {
    position: static;
    opacity: 100;
    display: inherit;
}

.carousel-item {
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

#carousel-1:checked~.control-1,
#carousel-2:checked~.control-2,
#carousel-3:checked~.control-3,
#carousel-4:checked~.control-4,
#carousel-5:checked~.control-5 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

#carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet,
#carousel-4:checked~.control-4~.carousel-indicators li:nth-child(4) .carousel-bullet,
#carousel-5:checked~.control-5~.carousel-indicators li:nth-child(5) .carousel-bullet {
    color: #16BD27;
    /*Set to match the Tailwind colour you want the active one to be */
}

/*Banner open/load animation*/
.alert-banner {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    z-index: 9999;
}

/*Banner close animation*/
.alert-banner input:checked~* {
    -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}




@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0
    }
}

@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity: 0
    }
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }
}

@keyframes slide-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0
    }
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@-webkit-keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }
}

@keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }
}



/* HIDE RADIO */
[type=radio] {

    opacity: 0;
    width: 0;
    height: 0;
}

.radio_visible {
    opacity: inherit;
    width: 1rem;
    height: 1rem;
}

.leaflet-control-layers-selector {
    opacity: 1;
    width: .8rem;
    height: .8rem;
    line-height: 1rem;
    margin-bottom: .4rem;
}

.circle-badge-red {
    background-color: #e74c3c;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: .8rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    width: 1rem;
}


.bg-fondo {
    background-image: url('../img/bg.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

}

.apexcharts-tooltip-text-label {
    display: none !important;
}

.font-sans {
    font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.sidebar-menu .sidebar-submenu>li>a {
    white-space: normal !important;
}

.mobile-logo {
    max-width: 150px !important;
}

@media (min-width: 768px) {
    .md\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .md\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .md\:w-80 {
        width: 20rem/* 320px */;
    }

}