#side-menu > li.active {
    background-color: var(--brand-color) !important;
    border-left: 4px solid #19aa8d;
}
#side-menu > a:hover {
    background-color: var(--brand-color) !important;
}
#side-menu > li a:hover {
    background-color: var(--brand-color) !important;
    color: #fff !important;
}
.side-menu, .sidebar-collapse > li a:active {
    background-color: var(--brand-color) !important;
}
#side-menu > li.active a {
    color: #ffffff !important;
}
#side-menu {
    width: 220px; max-width: 220px
}
#side-menu > li > a {
    color: #a7b1c2 !important;
}


#top-menu > li > a {
    padding: 15px 20px;
}

#refreshButton {
    width: 50px !important;
}

button {
    width: 100px !important;
}

.sweet-alert button {
    width: auto !important;
    white-space: nowrap;
}

#deleteText {
    display: none !important;
}

.desktopTable {
    display: block !important;
}

.desktopView {
    display: block !important;
}

.phoneView {
    display: none !important;
}

.inputFields {
    display: none !important;
}

#downloadReport {
    width: auto !important;
}

.cancel {
    width: auto !important;
}

#top-menu > li.active a {
    color: #19aa8d !important;
}
#emptyLogout > li a:hover {
    background-color: #293846 !important;
}

#iboxcontent {
    height: 600px;
    overflow: auto;
    width: 100%;
}

.show-on-small {
    display: none;
}


/*Mobile friendly stuff*/
#phoneEditButton, #addButtonPhone, #closeModalPhone, #addAffiliationsPhone {
    display: none;
    float: right;
    width: 42px !important;
}
#phoneSaveButton {
    display: none;
    width: 42px !important;
}
#phoneCancelButton {
    display: none;
    width: 42px !important;
}
#phone-top-menu {
    display: none;
}
#logoutButton, #addAffiliations {
    float: right;
}
@media (max-width: 768px) {
    .desktopView {
        display: none !important;
    }
    #deleteText {
        display: block !important;
    }
    .phoneView {
        display: flex !important;
    }
    .inputFields {
        display: block !important;
    }
    .side-menu {
        display: none;
        background-color: #676a6c;
    }
    .phoneList {
        display: block !important;
    }
    .desktopTable {
        display: none !important;
    }
    #iboxcontent {
        height: 75vh !important;
        overflow: auto;
        flex: 1;
        width: 110% !important;
        margin: -5px -15px -10px !important;
    }
    #top-menu {
        display: none;
    }
    #phone-top-menu, #phoneEditButton, #addAffiliationsPhone, #addButtonPhone, #closeModalPhone {
        display: flex;
    }
    #cancelButton, #saveButton, #editButton, #logoutButton, #logoutDesktop {
        display: none;
    }
}

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .hide-on-small {
        display: none;
    }

    .show-on-small {
        display: contents;
    }

    .another-smaller-on-small {
        max-width: 40px !important;
    }

    #side-menu {
        max-width: 150px !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }

    #side-menu > li > a {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        display: block !important;
    }

    .smaller-on-small {
        max-width: 50px;
    }

    .slightly-smaller-on-small {
        max-width: 55px;
    }
}