/* Menu mobile */
#menu-mobile{
    background: #fff;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    bottom: 0;
    left: -50%;
    padding: 20px;
    position: fixed;
    top: 50px;
    transition: all .5s ease;
    width: 50%;
    z-index: 1; 
}

#menu-mobile-switch:checked~#menu-mobile{
    left: 0;
}

#menu-mobile-switch:checked~#menu-mobile{
    left: 0;
}

#menu-mobile-switch:checked~.sticky #header .bi-list{
    display: none;
}

#menu-mobile-switch:checked~.sticky #header .bi-x{
    display: block;
}

.bi-x{
    display: none;
}


/* Menu tablet/desktop */
#menu{
    display: none;
}

#menu-switch:checked~.sticky #menu{
    display: flex !important;
}

#menu-switch:checked~.sticky #header .bi-list{
    display: none;
}

#menu-switch:checked~.sticky #header .bi-x{
    display: block;
}

/* Elements */
a{
    text-decoration: none;
}

span{
    font-size: .7em
}

i.bi{
    font-size: .8em;
    margin-right: 5px;
}

.row:hover{
    background: #eee;
}

.row div[class^="col-"]{
    border: 1px solid #ddd;
}

.status-online, .status-offline{
    border-radius: 30px;
    float: left;
    margin: 5px 5px 0 0;
    height: 15px;
    width: 15px;
}

.status-online{
    background: #00ff00;
}

.status-offline{
    background: #ff0000;
}

.logo{
    margin-top: 15px;
    max-width: 100px;
}

/* Filter labels */
label{
    cursor: pointer;
}

#menu-mobile label{
    margin-left: 10px;
}

#sales-rep-maciek:checked~.menu label[for="sales-rep-maciek"],
#sales-rep-magda:checked~.menu label[for="sales-rep-magda"],
#sales-rep-tomek:checked~.menu label[for="sales-rep-tomek"],
#sales-rep-zdenek:checked~.menu label[for="sales-rep-zdenek"],
#sales-rep-all:checked~.menu label[for="sales-rep-all"],
#sales-rep-maciek:checked~.sticky .menu label[for="sales-rep-maciek"],
#sales-rep-magda:checked~.sticky .menu label[for="sales-rep-magda"],
#sales-rep-tomek:checked~.sticky .menu label[for="sales-rep-tomek"],
#sales-rep-zdenek:checked~.sticky .menu label[for="sales-rep-zdenek"],
#sales-rep-all:checked~.sticky .menu label[for="sales-rep-all"]{
    font-weight: bold;
}

#status-online:checked~.menu label[for="status-online"],
#status-offline:checked~.menu label[for="status-offline"],
#status-all:checked~.menu label[for="status-all"],
#status-online:checked~.sticky .menu label[for="status-online"],
#status-offline:checked~.sticky .menu label[for="status-offline"],
#status-all:checked~.sticky .menu label[for="status-all"]{
    font-weight: bold;
}

/* Header */
.sticky{
    background: #000;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.sticky .row:hover{
    background: initial;
}

.sticky .list-inline{
    margin-bottom: 0;
}

#header{
    background: #fff;
    color: initial;
    height: 50px;
}

#header i{
    font-size: 2em;
}

#header div[class^="col-"]{
    border: 0;
}