html, body{
    height: 100%;
}

#main, #modules{
    height: 100%;
}

#login,
#channels{
    width: 300px;
    height: 300px;
    border: 1px solid #CCC;
}

#events{
    width: 100%;
    height: 100%;
}

#main #connectionStatus{
    font-size: 2rem;
}

#main #connectionStatus .connection-online{
    color: green;
}

#main #connectionStatus .connection-offline{
    color: #000;
}

#main #connectionStatus .connection-reconnect{
    color: orange;
}

#events .event .accordion-header .name{

}

#events .event .accordion-header .createAt{

}

#events .event .accordion-body .addItem{    
    border-style: dotted;
    --bs-btn-hover-color: #6c757d;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-hover-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

#events .event .accordion-body .addItem:hover{
    border-style: solid;
}

#events .event .accordion-body .addItem .icon{
    display: flex;
    align-items: center;
    justify-content: center;
}