﻿/* Company Home Achievements */
.dashboardHeading {
    font-size: 17px !important;
}
#divCompanyHomeLatestAchievement {
    border-right: solid 1px #CCC;
    box-sizing: border-box;
    color: #000;
    float: left;
    font-size: 16px;
    line-height: 24px;
    padding: 20px 10px;
    height: 170px;
    text-align: center;
    width: 7vw;
}
#divCompanyHomeLatestAchievement img {
    width: 5vw;
    max-height: 90px;
}
#divCompanyHomeAchievements,
#divCompanyHomeProfileProgress {
    border: solid 0px red;
    box-sizing: border-box;
    /*
    height: 170px;  
    padding: 12px 0 12px 48px;
    width: 50%;
    */
}
#divCompanyHomeAchievementsProgress {
    display: flex;
    align-items: center;
    justify-content: center;
}
#divCompanyHomeAchievements #Title {
    border: solid 0px red;
    color: #00A69C;
    display: flex;
    font-size: 1.1vw;
    font-weight: bold;
    margin: 0 2px -8px 0 ;
    width: 100%;
}
#divAchievementsCurrentStatusNextLevel,
#divProfileProgressCurrentStatusNextLevel { 
    display: none; 
}
#divAchievementBadges {
    border:solid 0px blue;
    display: flex;
    padding: 8px 0 10px 0;
}
.achievementBadge {
    border: solid 0px red;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    margin-right: 2px;
    padding-top: 10px;
    text-align: center;
    width: 13%;
    height: 34px;
}
#divClaimedPageBadge img {height: 30px; padding-top: 4px;}
#divAddPictureBadge img {height: 30px; padding-top: 4px;}
#divAboutMeBadge img {height: 30px; padding-top: 4px;}
#divShared1stBadge img {height: 32px; padding-top: 3px;}
#divShared10Badge img {height: 34px; padding-top: 2px;}
#divShared25Badge img {height: 36px; padding-top: 1px;}
#divShared100Badge img {height: 38px;}
#divAchievements,
#divAchievementsDesc {
    border: solid 0px red;
    display: flex;
}
.achievementMeter {
    border: solid 0px red;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    margin-right: 2px;
    text-align: center;
    width: 13%;
}
.achievementProgressBar {
    border: solid 0px red;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    text-align: center;
    width: 100%;
    height: 20px;   
}
.achievementMeterComplete {
    background-color: #00A69C;    
}
.achievementMeterNext {
    background-color: #FCC200;
}
.achievementMeterIncomplete {
    background-color: #FFDEC4;
}
.fa-check {
    background-color: #FFF;
    border: solid 2px #00A69C;
    border-radius: 50%;
    color: #00A69C;
    font-size: 1vw;
    padding: 3px;
}
.fa-flag-checkered {
    font-size: 32px;
    margin-top: 3px;
}
#divAchievementBadges #divGoalBadge,
#divCompanyHomeAchievements #divGoal,
#divAchievementsDesc #divGoalDesc {
    border: solid 0px red;
    width: 34px;
}
.goalIncomplete {
    color: #00A69C;
}
.goalComplete {
    color: #000;
}
.achievementMeterDesc {
    border: solid 0px red;
    color: #393C40;
    flex: 1;
    font-size: 0.7vw;
    font-weight: normal;
    padding: 0;
    text-align: center;
}
/* Company Admin Profile Progress  */
#divCompanyHomeProfileProgress {
    border: solid 0px red;
    box-sizing: border-box;
    /*
    float: left;
    height: 170px;  
    padding: 12px 0 12px 48px;
    width: 50%;
    */
}
#divProfileProgress,
#divProfileProgressDesc {
    border: solid 0px red;
    display: flex;
}
#divCompanyHomeProfileProgress #Title {
    border: solid 0px red;
    color: #00A69C;
    display: flex;
    font-size: 1.1vw;
    font-weight: bold;
    margin: 0 2px 20px 0;
    width: 100%;
}
.profileProgressMeter {
    border: solid 0px red;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    margin-right: 2px;
    text-align: center;
    width: 13%;
}
.profileProgressBar {
    border: solid 0px red;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 1;
    text-align: center;
    width: 100%;
    height: 20px;  
}
.profileProgressMeterComplete {
    background-color: #00A69C;    
}
.profileProgressMeterNext {
    background-color: #C9F3BA;
}
.profileProgressMeterIncomplete {
    background-color: #FFDA80;
}
#divProfileProgress #divGoal,
#divProfileProgressDesc #divGoalDesc {
    border: solid 0px red;
    width: 34px;
}
.goalIncomplete {
    color: #00A69C;
}
.goalComplete {
    color: #000;
}
.profileProgressMeterDesc {
    border: solid 0px red;
    color: #393C40;
    flex: 1;
    font-size: 0.8vw;
    font-weight: normal;
    padding: 0;
    text-align: center;
}
 .profileProgressMeterDesc {
    border: solid 0px red;
    color: #393C40;
    flex: 1;
    font-size: 0.8vw;
    font-weight: normal;
    padding: 0;
    text-align: center;
}
.noDataFound {
    font-size: 14px;
    font-weight: normal;
    color: #055D53;
}
/* Sharing Metrics */
#CompanyHomeSharingMetrics {
    margin-right: 32px;
    height: 240px;
}
#divTotalSharesContainer {
    display: flex;
    box-sizing: border-box;
    width: 100%;
}
#divTotalShares {
    border: solid 0px red;
    flex: 1;
    text-align: center;
}
#TotalSharesLabel {
    border: solid 0px red;
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
}
#divTotalSharesDonut {
    border: solid 0px red;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto ;
    width: 130px;
    height: 130px;
}
#TotalSharesCount {
    color: #171725;
    font-family: Lato;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin: 0 auto;
    position: absolute;
}
.sharingCount { font-size: 50px; }
.sharingCount1000 { font-size: 38px; }
.sharingCount10000 { font-size: 30px; }
#divSharingMetricsTable {
    border: solid 0px red;
    margin: 0 10%;
    width: 360px;
}
#SharingMetricsTable {
    border-collapse: collapse;
    margin-top:5px;
    width: 360px;
}
#divSharingMetricsTable th {
    border: none;
    text-align: center;
    width: 80px;
}
#divSharingMetricsTable tr td:nth-child(1) {
    border: none;
    padding-right: 10px;
    text-align: right;
    width: 120px;
}
#divSharingMetricsTable td {
    border: solid 1px #CECECF;
    padding: 5px;
    text-align: center;
    width: 80px;
}
.sharingMetricIcon {
    width: 40px;
    height: 40px;
}
#SharingTotalFacebook {
    background-color: #FFDA80;
    font-weight: 600;
}
#SharingTotalLinkedIn {
    background-color: #47E5B5;
    font-weight: 600;
}
#SharingTotalXcom {
    background-color: #68AAFF;
    font-weight: 600;
}
/* Top Level Metrics */
.divTopLevelMetrics {
    background-color: #FFF;
    border-radius: 4px;
    box-sizing: border-box;
    flex: 1;
}
.divTopLevelMetrics h2 {
    color: #00A69C;
    font-size: 18px;
    font-weight: 700;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    padding: 0px 0px 15px 15px;
}
.topLevelMetric {
    background-color: #E9E3E0;
    border: solid 1px #CFC4C5;
    color: #393C40;
    flex-basis: 100%;
    font-size: 11px;
    padding: 10px 0px;
    text-align: center;
}
.topLevelMetric p {
    margin: 0 0 5px 0;
}
.topLevelMetricValue {
    font-size: 18px;
}
#TopLevelMetricsContainer {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    column-gap: 4px;
    margin-top: 20px;
    padding-left: 15px;
}
#TopLevelMetricsDateRange {
    display: flex;
    align-content: center;
    align-items: center;
    flex-basis: 100%;
}
#TopLevelMetricsDateRange div:first-of-type {
    flex: 1;
}
#TopLevelMetricsDateRange h2 {
    padding-bottom: 0px;
}
#DateRangePicker {
    border: solid 1px #00A69C;
    border-radius: 4px;
    color: #055D53;
    cursor: pointer; 
    flex-shrink: 0;
    font-size: 14px;
    font-weight: normal;
    padding: 5px 0 0 10px;
    max-width: 330px;
    height: 30px;
}
#DateRangePicker .fas fa-calendar-alt {
    color: #055D53;
    font-size: 20px;
    padding-right: 5px;
}
#DateRangePicker .fa-caret-up,
#DateRangePicker .fa-caret-down {
    color: #055D53;
    cursor: pointer;
    font-size: 20px;
    padding: 5px 10px 5px 5px;
}
/* Between 1366px and 1599px for Tablets */
@media screen and (min-width:1366px) and (max-width:1599px) {
    .dashboardHeading {
        font-size: 16px !important;
    }
}
/* Between 1024px and 1365px for Tablets and Small Laptop */
@media screen and (min-width:1024px) and (max-width:1599px) {
    .dashboardHeading {
        font-size: 15px !important;
    }
    .topLevelMetric {
        font-size: 10px;
    }
    .topLevelMetricValue {
        font-size: 16px;
    }
}

/* Activity Metrics */
#CompanyHomeActivityMetrics {
    height: 240px;
}
#ActivityMetricsContainer {
    box-sizing: border-box;
    display: flex;
}
#DaysSinceLastLoginLabel,
#LoginsLast30DaysLabel,
#TotalLoginsLabel,
#TotalPageViewsLabel {
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
}
#divDaysSinceLastLogin,
#divLoginsLast30Days,
#divTotalLogins,
#divTotalPageViews {
    border: solid 0px red;
    box-sizing: border-box;
    flex: 1;
    padding-right: 20px;
    text-align: center;
}
#divDaysSinceLastLoginDonut,
#divLoginsLast30DaysDonut,
#divTotalLoginsDonut,
#divTotalPageViewsDonut {
    border: solid 0px red;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0 auto;
    width: 100px;
    height: 100px;
}
#DaysSinceLastLoginCount,
#LoginsLast30DaysCount,
#TotalLoginsCount,
#TotalPageViewsCount {
    border-radius: 50%;
    padding: 20px;
    color: #171725;
    font-family: Lato;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin: 0 auto;
    position: absolute;
}
.activityCount { font-size: 38px; }
.activityCount1000 { font-size: 30px; }
.activityCount10000 { font-size: 22px; }
.TenDaysSinceLastLogin {
    background-color: #FFE8E8;
}
.TwentyDaysSinceLastLogin {
    background-color: #EB8A8A;
}
.ThirtyDaysSinceLastLogin {
    /*
    background-color: #DB2C2C;
    */
    background-color: #CD5C5C;    
    color: #FFF !important;
    /*
    cursor: pointer;
    text-decoration: underline;
    */
}
#Popup30DaysSinceLastLogin_PW-1 {
    width: 600px !important;
    height: 160px !important;
}
/* Review Ratings */
#CompanyHomeReviewRatings {
    margin-right: 32px;
    height: 440px;
}
#divReviewRatingContainer {
    box-sizing: border-box;
    width: 100%;
}
#divReviewRatingContainer h2,
#divNPSContainer h2 {
    padding: 0px 0px 15px 0px;
}
.divCompanyHomeReviewRating {
    border: solid 0px red;
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-top:10px;
    text-align: right;
    text-align: left;
    width: 70%;
}
.divReviewRatingContainer .divCompanyHomeReviewRating {
    width: 90%;
}
.divCompanyHomeReviewRating .fa-star {
    display: block;
    float: left;
    margin-top: 5px;
}
.divCompanyHomeReviewRating .ratingDesc {
    font-size: 16px;
}
.divCompanyHomeReviewRating .ratingCount {
    font-weight: normal;
}
.divCompanyHomeReviewRatingCount {
    border: solid 0px blue;
    cursor: pointer;
    float: right;
    font-size: 16px;
    font-weight: bold;
    margin-top:10px;
    text-align: right;
    width: 30%;
}
.divReviewRatingContainer .divCompanyHomeReviewRatingCount {
    width: 10%;
}
.divCompanyHomeReviewRatingCount a {
    color: #000;
}
.divCompanyHomeReviewRatingBar {
    background-color: #EAEAEA;
    border-radius: 5px;
    margin: 8px 0 26px 0;
    width: 100%;
    height: 5px;
}
.divCompanyHomeReviewRatingBarPct {
    background-color: #EEA64B;
    border-radius: 5px;
    margin-top: 8px;
    width: 80%;
    height: 5px;
}
/* Review Ratings NPS */
#CompanyHomeReviewRatingsNPS {
    margin-right: 32px;
    height: 440px;
}
.divCompanyHomeReviewRatingsNPSContent {
    border: solid 0px red;
    box-sizing: border-box;
    display: flex;
    padding: 0px 15px;
}
#divNPSContainer {
    box-sizing: border-box;
    padding-left: 10px;
    width: 100%;
}
#divNPSSplits {
    display: flex;
    column-gap: 4px;
    justify-content: space-between;
}
.divNPSSplit {
    flex-basis: calc(100% / 3);
    flex-grow: 1;
    font-size: 12px;
    padding: 10px 2px 5px 2px;
    text-align: center;
}
.divNPSSplit img {
    width: 60px;
    height: auto;
}
.divNPSSplit p {
    margin: 5px 0;
}
.divNPSSplit p.npsHeading {
    font-size: 13px;
    font-weight: bold;
}
.divNPSSplit p.npsPercent {
    font-size: 16px;
    font-weight: bold;
}
.divNPSSplit p.npsReviews {
    font-size: 13px;
}
#NPSLabel {
    display: block;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
}
#divNPS {
    border: solid 0px red;
    box-sizing: border-box;
    flex: 1;
    margin: 0 auto;
    text-align: center;
    width: auto;
}
#divNPSDonut {
    border: solid 0px red;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto 0 auto;
    width: 100px;
    height: 100px;
}
#NPSCount {
    border-radius: 50%;
    padding: 20px;
    color: #171725;
    font-family: Lato;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    margin: 0 auto;
    position: absolute;
}
/* Between 1024px and 1279px for Tablets */
@media screen and (min-width:1024px) and (max-width:1279px) {
    #CompanyHomeReviewRatingsNPS {
        margin-right: 16px;
        height: 440px;
    }
}

/* Activity/Achievements */
#divActivityAchievements {
    display: flex;
}
#divCompanyHomeAchievementsProgress {
    border: solid 0px red;
    box-sizing: border-box;
    /*
    height: 170px;  
    padding: 12px 0 12px 48px;
    */
}
#divCompanyHomeAchievements #Title {
    border: solid 0px red;
    color: #00A69C;
    display: flex;
    font-size: 1.1vw;
    font-weight: bold;
    margin: 0 2px -8px 0 ;
    width: 100%;
}
#ActivityAchievementsTestimonialsReceivedContainer {
    box-sizing: border-box;
    height: 120px;
    width: 100% !important;
}
#ActivityAchievementsTestimonialsReceivedLast30Days,
#ActivityAchievementsTestimonialsReceivedYTD,
#ActivityAchievementsTestimonialsReceivedAllTime {
    width: 100% !important;
    height: 120px;
}
/* Key Survey Metrics */
#divKeySurveyMetricsContainer {
    height: 236px;
    overflow: auto;
}
#CompanyHomeKeySurveyMetrics {
    margin-right: 32px;
    height: 360px;
}
#tblKeySurveyMetrics {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
#tblKeySurveyMetrics tr:nth-child(odd) {
    background-color: #F2F2F3;
}
#tblKeySurveyMetrics th {
    color :#FFF;
}
#tblKeySurveyMetrics th,
#tblKeySurveyMetrics td {
    border: solid 1px #818589;
    padding: 2px;
    font-size: 10px;
    text-align: center;
}
#tblKeySurveyMetrics th:nth-of-type(1) {
    width: 20%;
}
#tblKeySurveyMetrics th:nth-of-type(4),
#tblKeySurveyMetrics th:nth-of-type(5),
#tblKeySurveyMetrics th:nth-of-type(6),
#tblKeySurveyMetrics th:nth-of-type(7) {
    background-color: #5BC4BF;
    width: 7%;
}
#tblKeySurveyMetrics th:nth-of-type(3) {
    background-color: #5BC4BF;
    width: 5%;
}
#tblKeySurveyMetrics th:nth-of-type(2),
#tblKeySurveyMetrics th:nth-of-type(8),
#tblKeySurveyMetrics th:nth-of-type(9),
#tblKeySurveyMetrics th:nth-of-type(11),
#tblKeySurveyMetrics th:nth-of-type(12) {
    background-color: #00A79D;
    width: 7%;
}
#tblKeySurveyMetrics th:nth-of-type(10),
#tblKeySurveyMetrics th:nth-of-type(13) {
    background-color: #00A79D;
    width: 5%;
}
#tblKeySurveyMetrics td:nth-of-type(1) {
    padding-left: 5px;
    text-align: left;
    width: 20%;
}
#tblKeySurveyMetrics td:nth-of-type(2),
#tblKeySurveyMetrics td:nth-of-type(4),
#tblKeySurveyMetrics td:nth-of-type(5),
#tblKeySurveyMetrics td:nth-of-type(6),
#tblKeySurveyMetrics td:nth-of-type(7),
#tblKeySurveyMetrics td:nth-of-type(8),
#tblKeySurveyMetrics td:nth-of-type(9),
#tblKeySurveyMetrics td:nth-of-type(11),
#tblKeySurveyMetrics td:nth-of-type(12) {
    width: 7%;
}
#tblKeySurveyMetrics td:nth-of-type(3),
#tblKeySurveyMetrics td:nth-of-type(10),
#tblKeySurveyMetrics td:nth-of-type(13) {
    width: 5%;
}
#RollUpScore,
#RollUpScore td {
    background-color: #5BC4BF;
    color: #FFF;
}
/* Between 1024px and 1279px for Tablets */
@media screen and (min-width:1024px) and (max-width:1279px) {
    #CompanyHomeKeySurveyMetrics {
        margin-right: 16px;
        height: 360px;
    }
}
/* 7 Commandments*/
#div7CommandmentsContainer {
    height: 236px;
    overflow: auto;
}
#CompanyHome7Commandments {
    height: 360px;
}
#tbl7Commandments {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
#tbl7Commandments th {
    color: #FFF;
}
#tbl7Commandments th,
#tbl7Commandments td {
    border: solid 1px #818589;
    font-size: 10px;
    padding: 2px;
    text-align: center;
}
#tbl7Commandments th:nth-of-type(1) {
    color: #393C40;
    padding-left: 5px;
    text-align: left;
    width: 28%;
}
#tbl7Commandments th:nth-of-type(2),
#tbl7Commandments th:nth-of-type(3),
#tbl7Commandments th:nth-of-type(4),
#tbl7Commandments th:nth-of-type(5),
#tbl7Commandments th:nth-of-type(6),
#tbl7Commandments th:nth-of-type(7) {
    background-color: #00A79D;
    width: 10%;
}
#tbl7Commandments th:nth-of-type(8) {
    background-color: #00A79D;
    width: 12%;
}
#tbl7Commandments td:nth-of-type(1) {
    padding-left: 5px;
    text-align: left;
    width: 28%;
}
#tbl7Commandments td:nth-of-type(2),
#tbl7Commandments td:nth-of-type(3),
#tbl7Commandments td:nth-of-type(4),
#tbl7Commandments td:nth-of-type(5),
#tbl7Commandments td:nth-of-type(6),
#tbl7Commandments td:nth-of-type(7) {
    width: 10%;
}
#tbl7Commandments td:nth-of-type(8) {
    width: 12%;
}
.trCommandmentsComplete {
    background-color: #AFE1AF;
}
.trCommandmentsIncomplete {
    background-color: #F2F2F3;
}
.redDot {
  height: 10px;
  width: 10px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}
/* Testimonials Received */
#CompanyHomeTestimonials {
    height: 440px;
}
#divTestimonialsReceivedOptionContainer,
#divTestimonialsReceivedLabelContainer {
    border: solid 0px red;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}
.testimonialsReceivedOption {
    background-color: #515151;
    border: solid 0px red;
    border-radius: 24px;
    color: #FFF;
    cursor: pointer;
    font-family: Lato;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    padding: 5px;
    margin: 0 5px;
    text-align: center;
    text-decoration: none;
    width: 90px;
}
.testimonialsReceivedOption.selected {
    background-color: #00A69C;
}
.testimonialsReceivedOptionLabel {
    color: #000;
    font-family: Lato;
    font-size: 12px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    padding: 5px;
    margin: 0 5px;
    text-align: center;
    text-decoration: none;
    width: 90px;
}
#TestimonialsReceivedContainer {
    box-sizing: border-box;
    height: 300px;
    width: 100% !important;
}
#TestimonialsReceivedLast30Days,
#TestimonialsReceivedYTD,
#TestimonialsReceivedAllTime {
    width: 100% !important;
    height: 300px;
}
/* Between 1366px and 1599px for Laptops */
@media screen and (min-width:1366px) and (max-width:1599px) {
    #divCompanyHomeLatestAchievement {
        display: none;
    }
    #divCompanyHomeAchievements,
    #divCompanyHomeProfileProgress {
        padding: 12px 0 12px 24px;
        /*width: 50%;*/
    }
    /* Sharing Metrics */
    #divTotalSharesDonut {
        width: 100px !important;
    }
    .sharingCount { font-size: 50px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 24px; }
    #divSharingMetricsTable {
        font-size: 1vw;
        margin: 0 0 0 5%;
        width: 100%;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 70px;
    }
    /* Activity Metrics */
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0;
        width: 80px !important;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    #divTotalPageViews {
        padding: 0 10px;
    }
    #TotalPageViewsLabel {
        font-size: 12px;
    }
}
/* Between 1280px and 1365px for Tablets */
@media screen and (min-width:1280px) and (max-width:1365px) {
    #divCompanyHomeLatestAchievement {
        display: none;
    }
    #divCompanyHomeAchievements,
    #divCompanyHomeProfileProgress {
        padding: 12px 0 12px 16px;
        /*width: 50%;*/
        height: 150px;
    }
    /* Sharing Metrics */
    #divTotalSharesDonut {
        width: 100px !important;
    }
    .sharingCount { font-size: 50px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 24px; }
    #divSharingMetricsTable {
        font-size: 1vw;
        margin: 0 0 0 5%;
        width: 100%;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 70px;
    }
    /* Activity Metrics */
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0;
        width: 80px !important;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    #TotalPageViewsLabel {
        font-size: 12px;
    }
}
/* Between 1024px and 1280px for Tablets */
@media screen and (min-width:1024px) and (max-width:1279px) { 
    #divCompanyHomeLatestAchievement,
    #divAchievementBadges,
    #divAchievements,
    #divAchievementsDesc,
    #divProfileProgress,
    #divProfileProgressDesc
    {
        display: none;
    }
    #divCompanyHomeAchievements,
    #divCompanyHomeProfileProgress {
        border: solid 0px red;
        height: 130px;  
        padding: 12px 0 12px 20px;
        /*width: 40%;*/
    }
    #divCompanyHomeAchievements #Title,
    #divCompanyHomeProfileProgress #Title {
        font-size: 1.5vw;
    }
    #divAchievementsCurrentStatusNextLevel,
    #divProfileProgressCurrentStatusNextLevel { 
        border: solid 0px red;
        display: flex;
        margin-top: 15px;
    }
    #CurrentStatusBadge,
    #NextLevelBadge {
        border: solid 0px blue;
        padding-top: 4px;
        width: 30px;
    }
    #divCurrentStatusDesc,
    #divNextLevelDesc {
        border: solid 0px blue;
        box-sizing: border-box;
        color: #393C40;
        flex: 1;
        font-size: 1vw;
        font-weight: normal;
        padding: 0 10px 0 10px;
    }
    #YourStatus,
    #NextLevel {
        color: #00A69C;
        font-size: 1.2vw;
        font-weight: 600;
    }
    #divNextLevelBadge {
        color: #00A69C;
    }
    #divCurrentStatusCheck {
        border:solid 0px red;
        color: #00A69C;
        float: left;

    }
    #divCurrentStatusCheck .fa-check {
        background-color: #FFF;
        border: solid 2px #00A69C;
        border-radius: 50%;
        color: #00A69C;
        float: left;
        font-size: 1vw;
        padding: 3px;
    }
    #divNextLevelCheck {
        border:solid 0px red;
        color: #CECECF;
        float:left;
    }
    #divNextLevelCheck .fa-check {
        background-color: #FFF;
        border: solid 2px #CECECF;
        border-radius: 50%;
        color: #CECECF;
        float: left;
        font-size: 1vw;
        padding: 3px;
    }
    /* Sharing Metrics */
    #CompanyHomeSharingMetrics {
        margin-right: 0;
        margin-bottom: 16px;
    }
    #divTotalSharesDonut {
        width: 120px !important;
    }
    #divTotalShares {
        border: solid 0px red;
        box-sizing: border-box;
        padding: 0 0 0 60px;
    }
    .sharingCount { font-size: 42px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 26px; }
    #divSharingMetricsTable {
        border: solid 0px blue;
        font-size: 1.4vw;
        margin: 0;
        padding-right: 60px;
        width: 100%;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #divSharingMetricsTable tr td:nth-child(1) {
        width: 70px;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 70px;
    }
    .sharingMetricIcon {
        width: 32px;
        height: 32px;
    }   
    /* Activity Metrics */
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0;
        width: 100px !important;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    .ThirtyDaysSinceLastLogin.activityCount {
        font-size: 38px;
    }
    #Popup30DaysSinceLastLogin_PW-1 {
        width: 400px !important;
        height: 160px !important;
    } 
    #divTotalPageViews,
    #divCompanyHomeAchievementsProgress {
        flex-basis: 100%;
        align-content: center;
        justify-content: center;
        padding: 0;
    }
    #divAchievementsCurrentStatusNextLevel {
        flex-flow: row;
    }
    #divAchievementsCurrentStatusNextLevel,
    #divProfileProgressCurrentStatusNextLevel {
        display: flex;
        flex-direction: row;
        column-gap: 10px;
    }
    .currentStatus,
    .nextLevel {
        display: flex;
        flex-direction: row;
        flex-basis: 100%;
        margin-bottom: 10px;
    }  
    #divCurrentStatusDesc,
    #divNextLevelDesc {
        display: flex;
        flex-direction: column;
        padding: 6px 10px 0 10px;
    }
    #divActivityAchievements {
        margin-bottom: 30px;
    }
    /* Review Ratings */
    #CompanyHomeReviewRatings {
        margin-right: 0;
        margin-bottom: 16px;
    }
}
/* For all Mobile */
@media screen and (max-width:1023px) {
    #divCompanyHomeLatestAchievement,
    #divAchievementBadges,
    #divAchievements,
    #divAchievementsDesc,
    #divProfileProgress,
    #divProfileProgressDesc {
        display: none;
    }
    #divCompanyHomeAchievements,
    #divCompanyHomeProfileProgress {
        border: solid 0px red;
        height: 130px;
        padding: 12px 0 12px 20px;    
        /*width: 40%;*/
    }
    #divCompanyHomeLatestAchievement {
        display: none;
    }
    #divAchievementsCurrentStatusNextLevel,
    #divProfileProgressCurrentStatusNextLevel {
        border: solid 0px red;
        display: flex;
        flex-direction: column;
        flex-flow: column;
        margin-top: 15px;
    }
    .currentStatus,
    .nextLevel {
        flex-basis: 100%;
    }  
    #CurrentStatusBadge,
    #NextLevelBadge {
        border: solid 0px blue;
        width: 40px;
    }
    #divCurrentStatusDesc,
    #divNextLevelDesc {
        border: solid 0px blue;
        box-sizing: border-box;
        color: #393C40;
        flex: 1;
        font-size: 12px;
        font-weight: normal;
        padding: 0 10px 0 10px;
    }
    #YourStatus,
    #NextLevel {
        color: #00A69C;
        font-size: 13px;
        font-weight: 600;
    }
    #divNextLevelBadge {
        color: #00A69C;
    }
    #divCurrentStatusCheck {
        border:solid 0px red;
        color: #00A69C;
        float: left;
        width: 30px;
        height: 40px;
    }
    #divCurrentStatusCheck .fa-check {
        background-color: #FFF;
        border: solid 2px #00A69C;
        border-radius: 50%;
        color: #00A69C;
        float: left;
        font-size: 14px;
        padding: 3px;
    }
    #divNextLevelCheck {
        border:solid 0px red;
        color: #CECECF;
        float:left;
        width: 30px;
        height: 40px;
    }
    #divNextLevelCheck .fa-check {
        background-color: #FFF;
        border: solid 2px #CECECF;
        border-radius: 50%;
        color: #CECECF;
        float: left;
        font-size: 14px;
        padding: 3px;
    }
    /* Sharing Metrics */
    #CompanyHomeSharingMetrics {
        margin-right: 0;
        margin-bottom: 16px;
    }
    #divTotalSharesDonut {
        width: 120px !important;
    }
    #divTotalShares {
        border: solid 0px red;
        box-sizing: border-box;
        padding: 0 0 0 60px;
    }
    .sharingCount { font-size: 42px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 24px; }
    #divSharingMetricsTable {
        border: solid 0px blue;
        padding-right: 60px;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #divSharingMetricsTable tr td:nth-child(1) {
        width: 70px;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 70px;
    }
    .sharingMetricIcon {
        width: 32px;
        height: 32px;
    }   
    /* Activity Metrics */
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0;
        width: 100px;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    .ThirtyDaysSinceLastLogin.activityCount {
        font-size: 38px;
    }
    #divActivityAchievements {
        margin-bottom: 30px;
    }
    /* Review Ratings */
    #CompanyHomeReviewRatings {
        height: 400px;
        margin-right: 0;
        margin-bottom: 16px;
    }
    .divCompanyHomeReviewRatingBar {
        margin: 8px 0 16px 0;
    }
    /* Testimonials Received */
    #CompanyHomeTestimonials {
        height: 380px;
    }
    #TestimonialsReceivedContainer {
        height: 240px;
    }
}
/* Between 768px and 1023px for Tablets */
@media screen and (min-width:768px) and (max-width:1023px) {
    #TopLevelMetricsDateRange {
        flex-direction: column;
        flex-flow: column-reverse;
    }
    #TopLevelMetricsDateRange {
        flex: 1;
        flex-basis: 100%;
        padding-left: 15px;
    }
    #DateRangePicker {
        margin: 0 auto;
    }
    #TopLevelMetricsContainer {
        margin-top: 0;
    }
    .topLevelMetric {
        font-size: 9px;
    }
    .topLevelMetricValue {
        font-size: 12px;
    }
    /* Review Ratings/NPS */
    #CompanyHomeReviewRatingsNPS {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* Sharing Metrics */
    #divTotalSharesDonut {
        padding: 0 10px;
        width: 100px !important;
    }
    .sharingCount { font-size: 42px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 24px; }
    #divSharingMetricsTable {
        margin: 0 0 0 5%;
        width: 100%;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 70px;
    }
    /* Activity Metrics */
    #CompanyHomeActivityMetrics {
        height: 230px;
    }
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0px;
        width: 90px !important;
    }
    #divTotalPageViews,
    #divCompanyHomeAchievements,
    #divCompanyHomeAchievementsProgress {
        flex-basis: 100%;
        padding: 0;
    }
    #divAchievementsCurrentStatusNextLevel {
        flex-flow: row;
    }
    #divAchievementsCurrentStatusNextLevel,
    #divProfileProgressCurrentStatusNextLevel {
        display: flex;
        flex-direction: row;
        column-gap: 10px;
    }
    .currentStatus,
    .nextLevel {
        display: flex;
        flex-direction: row;
        flex-basis: 100%;
        margin-bottom: 10px;
    }  
    #divCurrentStatusDesc,
    #divNextLevelDesc {
        display: flex;
        flex-direction: column;
        padding: 6px 10px 0 10px;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    #Popup30DaysSinceLastLogin_PW-1 {
        width: 400px !important;
        height: 160px !important;
    }  
    #CompanyHomeTestimonials {
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* Key Survey Metrics */
    #CompanyHomeKeySurveyMetrics {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* 7 Commandments */
    #CompanyHome7Commandments {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
}
/* Between 441px and 767px for Large Phones/Small Tablets */
@media screen and (min-width:441px) and (max-width:767px)  {
    #divCompanyHomeAchievements,
    #divCompanyHomeProfileProgress {
        border: solid 0px red;
        /*
        height: 90px;
        margin: -10px 0 0 140px;
        */
        padding: 0;
        /*width: 240px;*/
    }
    #divCompanyHomeAchievements #Title,
    #divCompanyHomeProfileProgress #Title {
        font-size: 16px;
        margin: 0 2px 0 0;
    }
    #divAchievementsCurrentStatusNextLevel,
    #divProfileProgressCurrentStatusNextLevel {
        display: flex;
        flex-direction: column;
        flex-flow: column;
        column-gap: 10px;
    }
    .currentStatus,
    .nextLevel {
        flex-basis: 100%;
        margin-bottom: 10px;
    }  
    #CurrentStatusBadge,
    #NextLevelBadge {
        float:left;
        width: 30px;
    }
    #divCurrentStatusBadge,
    #divNextLevelBadge {
        border: solid 0px red;
        float: left;
        height: 50px;
        margin-right: 10px;
    }
    #divCurrentStatusDesc,
    #divNextLevelDesc {
        border: solid 0px red;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex-flow: column;
        padding-top: 2px;
    }
    #DateRangePicker {
        margin: 0 auto;
    }
    #CompanyHomeTopLevelMetrics {
        margin-top: 10px;
    }
    #TopLevelMetricsContainer {
        margin-top: 0;
    }
    .topLevelMetric {
        font-size: 9px;
    }
    .topLevelMetricValue {
        font-size: 12px;
    }
    /* Review Ratings/NPS */
    .divCompanyHomeReviewRatingsNPSContent {
        flex-direction: column;
        flex-flow: column;
    }
    #CompanyHomeReviewRatingsNPS {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    #divReviewRatingContainer,
    divNPSContainer {
        flex: 1;
        flex-basis: 100%;
    }
    /* Sharing Metrics */
    #divTotalShares {
        border: solid 0px red;
        padding: 0;
    }
    #divTotalSharesDonut {
        width: 100px !important;
    }
    .sharingCount { font-size: 50px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 24px; }
    #divSharingMetricsTable {
        border: solid 0px red;
        font-size: 12px;
        margin: 0;
        padding-right: 10px;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 70px;
    }
    /* Activity Metrics */
    #CompanyHomeActivityMetrics {
        height: 330px;
    }
    #ActivityMetricsContainer {
        display: block;
    }
    #ActivityMetricsContainer br {
        display: none;
    }
    #ActivityMetricsContainer br:after {
        content: "&nbsp;";
    }
    #divDaysSinceLastLogin,
    #divLoginsLast30Days,
    #divTotalLogins {
        float: left;
        width: 50%;
    }
    #divTotalPageViews,
    #divCompanyHomeAchievementsProgress {
        flex-basis: 100%;
    }
    #divCompanyHomeAchievementsProgress {
        padding: 0;
        align-content: center;
        align-items: center;
    }
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0px;
        width: 90px !important;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    #Popup30DaysSinceLastLogin_PW-1 {
        width: 400px !important;
        height: 160px !important;
    } 
    #TopLevelMetricsContainer {
        margin-top: 0;
        padding-left: 0;
    }
    .divTopLevelMetrics h2 {
        padding: 0;
    }
    #divActivityAchievements {
        margin-bottom: 30px;
    }
    #CompanyHomeTestimonials {
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* Key Survey Metrics */
    #CompanyHomeKeySurveyMetrics {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* 7 Commandments */
    #CompanyHome7Commandments {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
}
/* Up to 440pxfor Phones */
@media screen and (max-width:440px) {
    #divCompanyHomeAchievements,
    #divCompanyHomeProfileProgress {
        border: solid 0px red;
        /*
        height: 90px;
        margin: -10px 0 0 100px;
        */
        padding: 0;
        /*
        width: 210px;
        */
    }
    #divCompanyHomeAchievementsProgress {
        padding: 0;
    }
    #divCompanyHomeAchievements #Title,
    #divCompanyHomeProfileProgress #Title {
        font-size: 14px;
        margin: 0 2px 0 0;
    }
    #divAchievementsCurrentStatusNextLevel,
    #divProfileProgressCurrentStatusNextLevel {
        display: flex;
        flex-direction: column;
        flex-flow: column;
    }
    .currentStatus,
    .nextLevel {
        flex-basis: 100%;
        align-content: center;
        align-items: center;
        justify-content: center;
    }    
    #CurrentStatusBadge,
    #NextLevelBadge {
        border: solid 0px blue;
        box-sizing: border-box;
        width: 30px;
        height: 50px;
    }
    #divCurrentStatusBadge,
    #divNextLevelBadge {
        border: solid 0px red;
        float: left;
        height: 50px;
        margin-right: 5px;
    }
    #divCurrentStatusDesc,
    #divNextLevelDesc {
        border: solid 0px red;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex-flow: column;
        padding-top: 7px;
    }
    #CompanyHomeTestimonials {
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    #DateRangePicker {
        margin: 0 auto;
    }
    #CompanyHomeTopLevelMetrics {
        margin-top: 10px;
    }
    #TopLevelMetricsContainer {
        margin-top: 0;
        padding-left: 0;
    }
    .divTopLevelMetrics h2 {
        padding: 0;
    }
    #TopLevelMetricsDateRange {
        flex-direction: column;
        flex-flow: column-reverse;
    }
    .topLevelMetric {
        font-size: 9px;
    }
    .topLevelMetricValue {
        font-size: 12px;
    }
    /* Review Ratings/NPS */
    .divCompanyHomeReviewRatingsNPSContent {
        flex-direction: column;
        flex-flow: column;
    }
    #CompanyHomeReviewRatingsNPS {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    #divReviewRatingContainer,
    divNPSContainer {
        flex: 1;
        flex-basis: 100%;
    }
    /* Sharing Metrics */
    #CompanyHomeSharingMetrics {
        height: 360px;
    }
    #divTotalSharesContainer {
        display: block;
    }
    #divTotalShares {
        border: solid 0px red;
        padding: 0;
        width: 100%;
    }
    #divTotalSharesDonut {
        border: solid 0px red;
        width: 100px !important;
        height: 100px !important;
    }
    .sharingCount { font-size: 40px; }
    .sharingCount1000 { font-size: 28px; }
    .sharingCount10000 { font-size: 24px; }
    #divSharingMetricsTable {
        border: solid 0px red;
        font-size: 12px;
        margin: 20px 0 0 0;
        padding: 0;
        width: 100%;
    }
    #SharingMetricsTable {
        width: 100%;
    }
    #SharingMetricsTable th, 
    #SharingMetricsTable td {
        width: 20%;
    }
    #divSharingMetricsTable tr td:nth-child(1) {
        border: none;
        padding-right: 10px;
        text-align: right;
    }
    /* Activity Metrics */
    #CompanyHomeActivityMetrics {
        height: 330px;
    }
    #ActivityMetricsContainer {
        display: block;
    }
    #ActivityMetricsContainer br {
        display: none;
    }
    #ActivityMetricsContainer br:after {
        content: "&nbsp;";
    }
    #divDaysSinceLastLogin,
    #divLoginsLast30Days,
    #divTotalLogins {
        float: left;
        width: 50%;
    }
    #divTotalPageViews,
    #divCompanyHomeAchievementsProgress {
        flex-basis: 100%;
    }
    #divDaysSinceLastLoginDonut,
    #divLoginsLast30DaysDonut,
    #divTotalLoginsDonut,
    #divTotalPageViewsDonut {
        margin-top: 0px;
        width: 90px !important;
    }
    .activityCount { font-size: 30px; }
    .activityCount1000 { font-size: 24px; }
    .activityCount10000 { font-size: 20px; }
    #Popup30DaysSinceLastLogin_PW-1 {
        width: 300px !important;
        height: 160px !important;
    } 
    #TotalPageViewsLabel {
        font-size: 12px;
    }
    /* Review Ratings */
    .divCompanyHomeReviewRatingBar {
        margin: 8px 0;
    }
    #TopLevelMetricsContainer {
        margin-top: 0;
        padding-left: 0;
    }
    .divTopLevelMetrics h2 {
        padding: 0;
    }
    #CompanyHomeTestimonials {
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* Key Survey Metrics */
    #CompanyHomeKeySurveyMetrics {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
    /* 7 Commandments */
    #CompanyHome7Commandments {
        margin-right: 0px;
        margin-bottom: 16px;
        padding-bottom: 20px;
        height: auto;
    }
}