/* CSS to control images on the main menu */

.menu-image {
    width: 100%;
    padding-right: 6px;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.menu-image-hover {
    width: 100%;
    padding-right: 6px;
    background-position: center;
    background-repeat: no-repeat;
}

.lauxaversary-background {
    position: relative;
    height: 160px;
    opacity: .7;
}
.lauxaversary-avatar {
    position: relative;
    height: 145px;
    margin-top: -160px;
    margin-left: -10px;
}
.lauxaversary-name {
    position: relative;
    font-size: 28px;
    font-weight: 600;
    margin-top: -130px;
    margin-left: 127px;
    color: #fff;
    width: 225px;
    text-align: right;
    line-height: 23px;
}
.lauxaversary-year {
    position: relative;
    font-size: 42px;
    font-weight: 600;
    margin-top: 30px;
    margin-left: 147px;
    color: #fff;
    text-align: right;
    width: 205px;
}

.border-bottom-style {
    border-bottom: solid;
    border-bottom-width: 3px;
    height: 28px;
    margin-right: 5px;
}

.menu-tag-line {
    float: left;
    font-size: 22px;
    font-family: Poppins;
    font-weight: 600;
    margin: 4px 0px 0px 16px;
}

.menu-heart-button {
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 12px;
    left: 6px;
}

.menu-heart-button-not-ticked {
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 12px;
    left: 6px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.menu-heart-button-text {
    position: absolute;
    bottom: 16px;
    left: 32px;
    color: black;
    font-size: 11px;
    font-weight: 600;
}

.menu-heart {
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 12px;
    right: 6px;
}

.menu-heart-text {
    width: 22px;
    position: absolute;
    bottom: 16px;
    right: 32px;
    text-align: right;
}

.menu-history-heart {
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 0px;
    left: 16px;
}

.menu-history-heart-text {
    position: absolute;
    bottom: 4px;
    height: 16px;
    left: 42px;
    color: black;
    font-size: 11px;
    font-weight: 600;
}

#menu-dashboard {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-dashboards.jpg) no-repeat;
}
    #menu-dashboard:hover {
        background: url(/images/menu/menu-dashboards-hover.jpg) no-repeat;
    }

#menu-dreamteam {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-dreamteam.jpg) no-repeat;
}
    #menu-dreamteam:hover {
        background: url(/images/menu/menu-dreamteam-hover.jpg) no-repeat;
    }

#menu-limitless {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-limitless.jpg) no-repeat;
}

    #menu-limitless:hover {
        background: url(/images/menu/menu-limitless-hover.jpg) no-repeat;
    }

#menu-visitors {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-visitors.jpg) no-repeat;
}
    #menu-visitors:hover {
        background: url(/images/menu/menu-visitors-hover.jpg) no-repeat;
    }

#menu-inventory {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-inventory.jpg) no-repeat;
}
    #menu-inventory:hover {
        background: url(/images/menu/menu-inventory-hover.jpg) no-repeat;
    }

#menu-suppliers {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-suppliers.jpg) no-repeat;
}
    #menu-suppliers:hover {
        background: url(/images/menu/menu-suppliers-hover.jpg) no-repeat;
    }

#menu-purchase-orders {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-purchase-orders.jpg) no-repeat;
}
    #menu-purchase-orders:hover {
        background: url(/images/menu/menu-purchase-orders-hover.jpg) no-repeat;
    }

#menu-activities {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-activity.jpg) no-repeat;
}
    #menu-activities:hover {
        background: url(/images/menu/menu-activity-hover.jpg) no-repeat;
    }

#menu-socials {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-socials.jpg) no-repeat;
}
    #menu-socials:hover {
        background: url(/images/menu/menu-socials-hover.jpg) no-repeat;
    }

#menu-workshop {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-workshop.jpg) no-repeat;
}
    #menu-workshop:hover {
        background: url(/images/menu/menu-workshop-hover.jpg) no-repeat;
    }

#menu-run-tracker {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-run-tracker.jpg) no-repeat;
}
    #menu-run-tracker:hover {
        background: url(/images/menu/menu-run-tracker-hover.jpg) no-repeat;
    }

#menu-crm {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-crm.jpg) no-repeat;
}
    #menu-crm:hover {
        background: url(/images/menu/menu-crm-hover.jpg) no-repeat;
    }

#menu-settings {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-settings.jpg) no-repeat;
}
    #menu-settings:hover {
        background: url(/images/menu/menu-settings-hover.jpg) no-repeat;
    }


/*SETTING MENU*/
#menu-user-maintenance {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-user-manager.jpg) no-repeat;
}
    #menu-user-maintenance:hover {
        background: url(/images/menu/menu-user-manager-hover.jpg) no-repeat;
    }

#menu-access-types {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-access-types.jpg) no-repeat;
}
    #menu-access-types:hover {
        background: url(/images/menu/menu-access-types-hover.jpg) no-repeat;
    }

#menu-target-maintenance {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-targets.jpg) no-repeat;
}
    #menu-target-maintenance:hover {
        background: url(/images/menu/menu-targets-hover.jpg) no-repeat;
    }

#menu-tag-maintenance {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-tags.jpg) no-repeat;
}
    #menu-tag-maintenance:hover {
        background: url(/images/menu/menu-tags-hover.jpg) no-repeat;
    }

#menu-call-outcomes {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-call-outcomes.jpg) no-repeat;
}

    #menu-call-outcomes:hover {
        background: url(/images/menu/menu-call-outcomes-hover.jpg) no-repeat;
    }

#menu-system-settings {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-system-settings.jpg) no-repeat;
}
    #menu-system-settings:hover {
        background: url(/images/menu/menu-system-settings-hover.jpg) no-repeat;
    }

/*DASHBOARDS MENU*/
#menu-area-manager {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-area-manager.jpg) no-repeat;
}
    #menu-area-manager:hover {
        background: url(/images/menu/menu-area-manager-hover.jpg) no-repeat;
    }

#menu-scoreboard {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-scoreboard.jpg) no-repeat;
}
    #menu-scoreboard:hover {
        background: url(/images/menu/menu-scoreboard-hover.jpg) no-repeat;
    }

#menu-results-entry {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-results-entry.jpg) no-repeat;
}
    #menu-results-entry:hover {
        background: url(/images/menu/menu-results-entry-hover.jpg) no-repeat;
    }

#menu-warehouse {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-warehouse.jpg) no-repeat;
}
    #menu-warehouse:hover {
        background: url(/images/menu/menu-warehouse-hover.jpg) no-repeat;
    }

#menu-timesheets {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-timesheets.jpg) no-repeat;
}
    #menu-timesheets:hover {
        background: url(/images/menu/menu-timesheets-hover.jpg) no-repeat;
    }

#menu-reception {
    width: 256px;
    height: 160px;
    background: url(/images/menu/menu-reception.jpg) no-repeat;
}
    #menu-reception:hover {
        background: url(/images/menu/menu-reception-hover.jpg) no-repeat;
    }

/* CSS for Team Member Says */
.says-background {
    background-color: #A4DE27;
    border-radius: 36px;
    height: 120px;
    width: 350px;
    margin-top: 24px;
}

.says-avatar {
    position: absolute;
    height: 82px;
    margin-top: -40px;
    margin-left: 10px;
    z-index: 1;
}

.says-border {
    border-color: #58BB10;
    height: 126px;
    width: 358px;
    position: relative;
    margin-top: -150px;
    margin-left: -14px;
    border-style: solid;
    border-radius: 36px;
}

.says-heading {
    text-align: right;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-top: -100px;
    padding-right: 22px;
}

.says-text {
    text-align: left;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.says-quotes {
    position: relative;
    margin-top: 70px;
    margin-left: 308px;
    width: 64px;
    height: 64px;
    z-index: 1;
}

.happy-birthday-background {
    position: relative;
    height: 160px;
}

.happy-birthday-avatar {
    position: relative;
    left: -10px;
    height: 145px;
    margin-top: -150px;
}

.happy-birthday-first-name {
    position: relative;
    font-family: Poppins;
    font-size: 36px;
    font-weight: 600;
    margin-top: -80px;
    margin-left: 90px;
    color: #fff;
}

.happy-birthday-last-name {
    position: relative;
    font-family: Poppins;
    font-size: 25px;
    font-weight: 500;
    margin-top: 10px;
    margin-left: 90px;
    color: #fff;
}

.goal-reminder-background {
    position: relative;
    height: 160px;
}

.goal-reminder-avatar {
    position: relative;
    left: -10px;
    height: 145px;
    margin-top: -150px;
}

.goal-reminder-name {
    position: relative;
    font-family: Poppins;
    font-size: 28px;
    font-weight: 600;
    margin-top: -60px;
    margin-left: 100px;
    color: #fff;
}

.goal-reminder-reminder {
    position: relative;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 12px;
    margin-top: 6px;
    margin-left: 100px;
    color: #fff;
}

.status-tile-last-started-heading {
    position: absolute;
    top: 3px;
    color: #eee;
    left: 20px;
    font-size: 10px;
    font-weight: 200;
}

.status-tile-last-started {
    position: absolute;
    top: 3px;
    color: #eee;
    left: 73px;
    font-size: 10px;
    font-weight: 400;
}

.status-tile-last-checked-heading {
    position: absolute;
    top: 15px;
    color: #eee;
    left: 20px;
    font-size: 10px;
    font-weight: 200;
}
.status-tile-last-checked {
    position: absolute;
    top: 15px;
    color: #eee;
    left: 73px;
    font-size: 10px;
    font-weight: 400;
}

.status-tile-list {
    top: 36px;
    left: 20px;
    margin-top: 12px;
}
.status-tile-list-label {
    color: #eee;
    font-size: 11px;
    font-weight: 200;
    line-height: 12px;
}
.status-tile-list-text {
    color: #eee;
    font-size: 12px;
    font-weight: 400;
    line-height: 9px;
    margin-bottom: 6px;
}

.menu-reports-title {
    position: absolute;
    top: 3px;
    color: #000000;
    left: 20px;
    font-family: Poppins;
    font-size: 22px;
    font-weight: 600;
}

.menu-reports-subtitle {
    position: absolute;
    top: 28px;
    color: #000;
    left: 20px;
    font-size: 18px;
    font-weight: 400;
}

/* Icon Tool Tip Related CSS */
.menu-tooltip {
    position: relative;
    display: inline-block;
}

    /* Icon Tooltip text */
    .menu-tooltip .menu-tooltiptext {
        visibility: hidden;
        width: 240px;
        top: 128%;
        left: 3px;
        margin-left: -10px;
        background-color: white;
        color: black;
        font-size: 11px;
        font-weight: 600;
        text-align: left;
        padding: 5px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        opacity: 1;
        z-index: 1;
    }

        .menu-tooltip .menu-tooltiptext::after {
            content: " ";
            position: absolute;
            bottom: 100%; /* At the top of the tooltip */
            left: 16px;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent white transparent;
        }

    /* Show the tooltip text when you mouse over the tooltip container */
    .menu-tooltip:hover .menu-tooltiptext {
        visibility: visible;
    }

.menu-reminder-balloon {
    width: 100%;
}
.menu-reminder-text-left {
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    transform: rotate(-1deg);
    padding: 22px 22px 22px 22px;
    margin-top: -70%;
}
.menu-reminder-text-right {
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    transform: rotate(1deg);
    padding: 22px 22px 22px 22px;
}

.menu-reminder-avatar {
    margin-top: 80px;
    width:80%;
}

.scheduled-calls-image {
    margin: -4px 3px 0px 0px;
    width: 20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.scheduled-calls-image-alert {
    margin: -4px 3px 0px 0px;
    width: 20px;
}

.is-not-signed-in-image {
    margin: -4px 3px 0px 0px;
    width: 20px;
}

.is-signed-in-image {
    -webkit-filter: invert(60%) sepia(69%) saturate(523%) hue-rotate(71deg) brightness(93%) contrast(96%);
    filter: invert(60%) sepia(69%) saturate(523%) hue-rotate(71deg) brightness(93%) contrast(96%);
    margin: -4px 3px 0px 0px;
    width: 20px;
}