.hidden {
    overflow-y: hidden;
    max-height: 0;

    transition: max-height 0.15s linear;
}

#loadingContainer img {
    
    height: 5vh;
}

.btn-scouts{
    color: white;
    background-color: #7413dc;
    border: none;
}

.btn{
    max-height: 100%;
    border-radius: 10px;
}
.circle{
    aspect-ratio: 1/1;
    border-radius: 100%;
    min-width: 50px;
    min-height: 50px;
}

.square{
    aspect-ratio: 1/1;
    border-radius: 10px;
    min-width: 50px;
    min-height: 50px;
}

.arrow-btn {
    img {
        filter: invert(100%);
        transition: transform 0.2s linear;
    }
}

.arrow-btn.flip {

    img {
        transform: rotateZ(180deg);
    }
}

.btn-scouts:hover {
    background-color: #8a30f0 !important;;
    color: white !important;;
}

.btn-scouts:focus{
    background-color: #5e0fb5 !important;
    color: white !important;;
}   

.btn-scouts:active {
    background-color: #4e0d8f !important;
    color: white !important;;

}

.cat-container{
    border-radius: 10px;
    background-color: #f2e6ff;
    
}

#alert-container{
    z-index: 1000;
    position: fixed;
}

.alert{
    overflow-y: hidden;
    max-height: 0px;
    margin-top: 0px;
    margin-bottom: 0px;

    transition: max-height 0.2s linear, margin-bottom 0.2s linear ;
}

.alert.show{
    margin-top: 2px;
    margin-bottom: 2px;
    max-height: 100px;
}

.alert.danger{
    background-color: darkred;
    color: white;
}

.alert.success{
    background-color: lightgreen;
    
}