.nav {
    width: 80px;
    height: calc(100vh - 80px);
    position: fixed;
    top: 80px;
    left: 0;
    border-right: 1px solid #f1f1f1;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 0 4px 0 0;
    z-index: 1;
}
.nav a {
    color: #fff;
    text-decoration: none;
}
.nav-fill {
    height: 100%;
    background-color: rgb(40, 42, 43);
}
.nav-option {
    width: 80px;
    height: 80px;
    border-bottom: 1px solid #3d4041;
    box-sizing: border-box;
    background-color: rgb(81, 81, 81);
    background-position: 50% 33%;
    background-repeat: no-repeat;
    z-index: 1;
}
.nav-option:hover {
    background-color: rgb(81, 81, 81, 0.8);
}
.text {
    padding-top: 45px;
}
.home {
    background-image: url("/images/icons/icon-home.png");
    border-radius: 0 4px 0 0;
}
.admin {
    background-image: url("/images/icon-admin.png");
}
.business {
    background-image: url("/images/icon-business.png");
}
.people {
    background-image: url("/images/icon-people.png");
}
.payroll {
    background-image: url("/images/icon-payroll.png");
}
.recruitment {
    background-image: url("/images/icon-recruitment.png");
}
.timesheets {
    background-image: url("/images/icon-timesheets.png");
}
.rostering {
    background-image: url("/images/icon-rostering.png");
}
.leave {
    background-image: url("/images/icon-leave.png");
}
.integrations {
    background-image: url("/images/icon-integrations.png");
}
.settings {
    background-image: url("/images/icon-settings.png");
}

.admin-nav, .business-nav, .people-nav, .recruitment-nav, .leave-nav {
    position: relative;
    top: -1px;
    left: 80px;
    width: 200px;
    background-color: #f3f3f3;
    border: 1px solid #e3e3e3;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 0;
    z-index: 1;
    height: 100%;
}
.admin-nav .option, .business-nav .option, .people-nav .option, .recruitment-nav .option, .leave-nav .option {
    padding: 5px 20px;
    cursor: pointer;
}
.admin-nav .option:hover, .business-nav .option:hover, .people-nav .option:hover, .recruitment-nav .option:hover, .leave-nav .option:hover {
    background-color: #e3e3e3;
}
.admin-nav .title, .business-nav .title, .people-nav .title, .recruitment-nav .title, .leave-nav .title {
    height: 20px;
    color: #2585b4;
    font-weight: 600;
    padding: 10px 20px;
    border-bottom: 1px dashed #e3e3e3;
}