header{
    background-color: var(--secondary_color);
    color: var(--primary_color);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 5px;
}

#title{
    text-align: center;
    flex-grow: 1;
    padding: 5px 0px;
}

#title_text{
    font-size: min(7vi, 2em);
    display: inline;
    text-align: center;
}
#version{
    color: var(--aux_color);
    font-size: 1em;
    font-weight: bold;
}

#cds_status{
    width: 200px;
    height: 40px;
    /* background-color: rgb(50, 50, 50); */
    text-align: center;
    position: relative;
}

#cds_status_icon{
    height: 25px;
    width: 25px;
    border: 2px solid var(--aux_color);
    border-radius: 50%;
    transform: translateY(6px);
    display: inline-block;
    overflow: visible;
}

#cds_status_label{
    display: inline-block;
}

#cds_status.unknown_status{
    visibility: hidden;
}
#cds_status.online{
    cursor: help;
}
#cds_status.online #cds_status_icon{
    background-color: rgb(68, 173, 82);
}
#cds_status.online #cds_status_label::after{
    content: "CDS ONLINE";
}
#cds_status.standby{
    cursor: progress;
}
#cds_status.standby #cds_status_icon{
    background-color: rgba(255, 183, 0, 0.823);
}
#cds_status.standby #cds_status_label::after{
    content: "CONECTANDO";
}
#cds_status.offline{
    cursor: pointer;
}
#cds_status.offline #cds_status_icon{
    background-color: rgb(255, 0, 0);
}
#cds_status.offline #cds_status_label{
    animation: offline_accent 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite alternate;
}
#cds_status.offline #cds_status_label::after{
    content: "CDS OFFLINE";
}
#cds_status.undefined{
    cursor: help;
}
#cds_status.undefined #cds_status_icon{
    background-color: var(--secondary_color);
}
#cds_status.undefined #cds_status_label::after{
    content: "CDS NO DEFINIDO";
}

#cds_status_tooltip{
    animation: none;
    position: absolute;
    background-color: var(--aux_color);
    border: 2px solid var(--secondary_color);
    border-radius: 5px;
    padding: 5px;
    min-width: 100%;
    width: calc(100% + 140px);
    left: -70px;
    top: 100px;
    display: none;
    box-shadow: 0px 0px 5px 1px var(--aux_color);
    z-index: 1000;
}

#cds_status:hover #cds_status_tooltip{
    display: block;
}

.cds_status_tooltip_extra{
    background-color: var(--primary_color);
    border-radius: 5px;
    color: var(--secondary_color);
    margin: 5px 10px;
    padding: 3px;
}
#logout{
    height: 40px;
    width: 40px;
    margin: 0px 15px;
    overflow: visible;
}

#logout_icon{
    cursor: pointer;
    height: 40px;
    width: 40px;
    transform: scale(0.8);
}

#logout:hover #logout_icon{
    filter: invert();
}