/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

@media (min-width: 310.5px) {
    .img-logo {
        max-height: 4.5rem;
        max-width: 12rem;
    }
}

@media (max-width: 310.5px) {
    .img-logo {
        max-height: 5rem;
        max-width: 15rem;
    }

    header nav .navbar-brand {
        -ms-flex-order: 0;
        order: 0;
        width: 100%;
    }

    header nav .navbar-toggler {
        -ms-flex-order: 1;
        order: 1;
    }

    header nav .navbar-expand {
        -ms-flex-order: 2;
        order: 2;
    }

    header nav .navbar-collapse {
        -ms-flex-order: 3;
        order: 3;
    }
}

.img-login {
    height: 3.25rem;
    width 100%;
}

.add-btn {
    position: fixed;
    bottom: 1px;
    right: 1px;
}

.btn-forward {
    transition: all 0.5s;
    cursor: pointer;
}

.btn-forward span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-forward span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn-forward:hover span {
  padding-right: 25px;
}

.btn-forward:hover span:after {
  opacity: 1;
  right: 0;
}

.btn-backwards {
    transition: all 0.5s;
    cursor: pointer;
}

.btn-backwards span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn-backwards span:after {
  content: '\00ab';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0px;
  transition: 0.5s;
}

.btn-backwards:hover span {
  padding-left: 25px;
}

.btn-backwards:hover span:after {
  opacity: 1;
  left: 0;
}

.background .btn-dashboard-home {
    background: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
    width: 100%;
    white-space: nowrap;
    background-color: rgba(90, 98, 104, .5);
    color: #fff !important;
    padding-top: 14px;
    padding-bottom: 14px;
}

.Landing-Background {
    float: left;
    min-height: 828px;
    width: 100%;
    background: hsla(0, 0%, 0%, 0) url("../images/BlazeLandingBackground.png") no-repeat scroll center center/cover;
}

body, .modal {
    padding-right: 0px !important;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        /* When you mouse over the navigation links, change their color */
        .sidenav a:hover {
            color: #f1f1f1;
        }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

.background tr td {
    padding: .7rem .7rem .7rem .7rem;
}

.cardImage {
    max-width:100%;
}

.cardScrollableBody {
    overflow-y: auto;
    height: 17em;
}

.commitments > h5 {
    color: #d8782c;
}

.cardArea {
    width:100%;
    text-align:center;
    margin-top:25px
}

.card-columns .card {
    transition: all 0.5s ease-in-out;
}

@media (min-width: 576px) {
    .card-columns {
        column-count: 1;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}

.profilePic-Nav {
    max-width: 4em;
    max-height: 4em;
}

.profilePic-Contribution {
    width: 44px;
    height: 44px;
}

.profilePic-TeamActions {
    width: 36px;
    height: 36px;
}

.profilePic-TeamActions img, .profilePic-Contribution img {
    max-width: 100%;
    height: 100%;
}

.user-container {
    min-width: 200px;
}

.profilePic-table {
    min-width: 50px;
    min-height: 50px;
    max-width: 75px;
    max-height: 70px;
}

.profilePic-UserBanner {
    max-width: 90px;
    max-height: 85px;
}

.profilePic-leaderboard {
    min-width: 24px;
    min-height: 24px;
    max-width: 32px;
    max-height: 32px;
}

.profilePic-MyTeam {
    min-width: 40px;
    min-height: 40px;
    max-width: 70px;
    max-height: 60px;
}

.profilePic-UserListing {
    max-width: 70px;
    max-height: 60px;
}

.profilePic-AccountManagement {
    max-width: 150px;
    max-height: 120px;
}

.actionImage-Thumbnail {
    min-width: 40px;
    min-height: 40px;
    max-width: 55px;
    max-height: 55px;
}

.coachCorner-Author {
    max-height: 250px;
    max-width: 100%;
}

.coachCorner-AuthorPreview {
    max-width: 150px;
    max-height: 150px;
}

.inspirationalImage-Preview, .howItWorksPreview {
    max-width: 150px;
}

.actionDescription, .commitmentDescription {
    min-width: 20em;
}

.highFiveCommentCol {
    min-width: 7em;
}

.link-lock {
    height: 20px;
}

.commitmentChecklist {
    height: 250px;
}

.cardButton {
    margin-bottom: 10px;
}

.seeAll {
    float:right;
    font-size: 12px;
    margin-right:3px;
    margin-left:3px;
}

.HoverLink:hover, img.selected {
    opacity: .5;
}

.VideoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.VideoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

video {
    width: 100% !important;
    height: auto !important;
}

.videoPreview {
    width: 14em;
}

.DailyImgPage {
    width: 24%;
}

.VidCol {
    width: 28em;
}

header nav {
    background-image: linear-gradient(#878787, #BFBFBF, #FEFEFE, #FFFFFF);
}

.background {
    font-family: 'Prompt', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #1E1D24;
    margin-bottom: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.background:not(.org-set) {
    background-color: #EFF1FC;
}

@media (min-width: 933px) and (max-width: 991.98px) {
    .container {
        max-width: 90%;
    }
}

@media (min-width: 885px) and (max-width: 932.98px) {
    .container {
        max-width: 95%;
    }
}

@media (min-width: 857px) and (max-width: 884.98px) {
    .container {
        max-width: 97%;
    }
}

@media (min-width: 849px) and (max-width: 856.98px) {
    .container {
        max-width: 99%;
    }
}

.background .card-header.goal-header {
    background-color: #EFF1FC;
    border-top: 1px solid #C4D1FF !important;
    border-bottom: 1px solid #C4D1FF !important;
    border-left: 1px solid #C4D1FF !important;
    border-right: 1px solid #C4D1FF !important;
    margin-bottom: 0px !important;
}

.background .card, .background .card-header {
    border-radius: 8px !important;
}

.card-radius-16 .card, .card-radius-16 .card-header {
    border-radius: 16px !important;
}

.background #GoalsAccordin .card {
    border: none !important;
}

.background #GoalsAccordin button.btn-link span {
    display: inline-block;
    text-decoration: none !important;
}

.background .goals-green,
.background .goals-yellow,
.background .goals-red,
.action-count {
    border-radius: 4px;
    padding: 2px 8px;
}

.background .goals-green,
.background .goals-yellow,
.background .goals-red {
    color: #000000;
    border-radius: 4px;
    padding: 2px 8px;
}

.background .goals-green {
    background-color: #CFE6B2
}

.background .goals-yellow {
    background-color: #FFEC99;
}

.background .goals-red {
    background-color: #F2B0B6;
}

.action-count, .hub-item {
    background-color: #EFF1FC;
}

.action-border {
    border: 1px solid #E5E8FA;
    border-radius: 12px;
}

.hub-item {
    border-radius: 1px;
    padding: 2px 8px;
}

.background .card-header {
    background-color: #fff;
}

.background h1 {
    font-size: 30px;
    line-height: 40px;
}

.background h2 {
    font-size: 24px;
    line-height: 32px;
}

.background h3 {
    font-size: 20px;
    line-height: 28px;
}

.background h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.background .subheading {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}

.background .body-bold {
    font-weight: 600;
}

.background .caption-14 {
    font-size: 14px;
    line-height: 20px;
}

.text-bold-600 {
    font-weight: 600;
}

.text-bold-700 {
    font-weight: 700;
}

.background .btn {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.background .btn-primary {
    color: #EFF1FC !important;
    background-color: #003BFF;
    border-color: #003BFF;
}

.background .btn-primary:hover {
    color: #fff !important;
    background-color: #002FCC;
    border-color: #002FCC;
}

.background .btn-primary:focus {
    color: #fff !important;
    background-color: #002FCC;
    border-color: #002FCC;
}

.background .btn-primary:active {
    color: #fff !important;
    background-color: #002FCC !important;
    border-color: #002FCC !important;
}

.background .btn-secondary {
    color: #EFF1FC !important;
}

.background .btn-primary-clear {
    background-color: rgba(0, 0, 0, 0);
}

.background .btn-primary-clear:hover {
    background-color: rgba(0, 0, 0, .1);
}

.background .btn-primary-clear:focus {
    background-color: rgba(0, 0, 0, .1);
}

.background .btn-primary-clear:active {
    color: #fff;
    background-color: rgba(0, 0, 0, .1);
}

.background .caption-12 {
    font-size: 12px;
    line-height: 16px;
}

.background .text-bold-500 {
    font-weight: 500;
}

.background nav {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.background .nav-bold {
    font-weight: 600;
}

.background:not(.org-set) .nav:not(.header) {
    background-color: #EFF1FC;
    border-radius: 12px;
}

.background .nav-link {
    font-family: 'Prompt', sans-serif;
    color: #003BFF;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.background .nav-link.active {
    color: #EFF1FC !important;
    background: #003BFF !important;
    border-radius: 8px !important;
}

.background .bg-success {
    background-color: #84BC3C !important;
    color: #fff !important;
}

.background .bg-warning {
    background-color: #F9CC00 !important;
}

.background .bg-orange {
    background-color: #F5983A !important;
    color: #fff !important;
}

.background .bg-danger {
    background-color: #BE202E !important;
    color: #fff !important;
}

.bg-points {
    background-color: #FDF7DB;
}

#PointsEarnedContainer {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1200;
}

#PointsEarnedContainer canvas {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

#PointsEarned {
    position: fixed;
    bottom: 0;
    z-index: 1300;
}

#PointsEarned:not(.hide) {
    animation: slide-in 1000ms ease;
    -webkit-animation-name: slide-in;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-timing-function: ease;
}

#PointsEarned.hide {
    margin-bottom: -100%;
    animation: slide-out 1000ms ease;
    -webkit-animation-name: slide-out;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-timing-function: ease;
}

@keyframes slide-in {
    0% { margin-bottom: -100%; }
    100% { margin-bottom: 0%; }
}

@-webkit-keyframes slide-in {
    0% { margin-bottom: -100%; }
    100% { margin-bottom: 0%; }
}

@keyframes slide-out {
    0% { margin-bottom: 0%; }
    100% { margin-bottom: -100%; }
}

@-webkit-keyframes slide-out {
    0% { margin-bottom: 0%; }
    100% { margin-bottom: -100%; }
}

#PointsEarned .card-body.bg-points {
    pointer-events: auto;
}

#ContributionCarousel .carousel-control-next,
#ContributionCarousel .carousel-control-prev,
#GoalsCarousel .carousel-control-next,
#GoalsCarousel .carousel-control-prev {
    top: 14% !important;
    bottom: .5% !important;
}

#ContributionCarousel .carousel-control-prev,
#ContributionCarousel .carousel-control-next,
#MediaCarousel .carousel-control-prev,
#MediaCarousel .carousel-control-next,
#GoalsCarousel .carousel-control-prev,
#GoalsCarousel .carousel-control-next {
    width: 5% !important;
}

@media (min-width: 769px) {
    #Dashboard-modal .carousel-control-next,
    #Dashboard-modal .carousel-control-prev {
        width: 3% !important;
    }
}

@media (max-width: 768px) {
    #Dashboard-modal .carousel-control-next,
    #Dashboard-modal .carousel-control-prev {
        width: 5% !important;
    }
}

#ContributionCarousel .carousel-control-prev,
#MediaCarousel .carousel-control-prev,
#GoalsCarousel .carousel-control-prev {
    justify-content: start !important;
}

.background .carousel-control-prev .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23BABABA' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/></svg>") !important;
}

#ContributionCarousel .carousel-control-next, #MediaCarousel .carousel-control-next {
    justify-content: end !important;
}

.background .carousel-control-next .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23BABABA' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/></svg>") !important;
}

@media (min-width: 849px) {
    #CarouselRow {
        display: none;
    }
}

@media (max-width: 848.98px) {
    #ColumnRow {
        display: none;
    }
}

.shadow-success {
    box-shadow: 0px 0px 1px #84BC3C, -10px 0px 15px rgba(132, 188, 60, 0.15), 10px 12px 15px rgba(132, 188, 60, 0.15);
}

.shadow-warning {
    box-shadow: 0px 0px 1px #F9CC00, -10px 0px 15px rgba(249, 204, 0, 0.15), 10px 12px 15px rgba(249, 204, 0, 0.15);
}

.shadow-danger {
    box-shadow: 0px 0px 1px #BE202E, -10px 0px 15px rgba(190, 32, 46, 0.15), 10px 12px 15px rgba(190, 32, 46, 0.15);
}

.contribution-header {
    border-radius: 12px;
}

.ranking-container {
    height: 55px;
    width: 55px;
    position: absolute;
    right: 1%;
    top: 1%;
}

.ranking-container a {
    text-decoration: none;
}

.ranking-container a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
}

.commitment-progress, .dailyLearning-progress, .dailyActions-progress {
    height: 12em;
}

.thermometer {
    position: absolute;
    width: 2.5em;
    height: 100%;
}

.progress-meter {
    display: none;
}

.progress-meter canvas {
    display: inline-block;
    position: relative;
    background-size: 24px 24px !important;
}

.commitment-progress > .progress-meter canvas {
    background: url("../images/Commitment_THIN.png") no-repeat center center;
}

.dailyLearning-progress > .progress-meter canvas {
    background: url("../images/BookBookmark.png") no-repeat center center;
}

.dailyActions-progress > .progress-meter canvas {
    background: url("../images/Trophy.png") no-repeat center center;
}

@media (max-width: 991.98px) {
    .progress-meter {
        display: block;
    }

    .thermometer {
        display: none;
    }

    .commitment-progress, .dailyLearning-progress, .dailyActions-progress {
        height: auto;
    }
}

.progress-bar-vertical {
    position: absolute;
    width: 40%;
    min-height: 70%;
    display: flex;
    align-items: flex-end;
    margin-left: 30%;
    border-top-left-radius: 2.5em;
    border-top-right-radius: 2.5em;
    float: left;
    bottom: 18%;
}

.progress-bar-vertical .progress-bar {
    width: 100% !important;
    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;
}

.background .progress-bar {
    border-radius: .25rem;
}

.progress-icon {
    width: 100%;
    height: 2.5rem;
    position: absolute;
    bottom: 0;
}

.color-point {
    height: 1rem;
    width: 1rem;
}

.col.personal-sentiment,
.survey-average {
    height: 24px;
}

.contribution-icon-row {
    border-top: 1px solid black;
}

.contribution-icon {
    height: 25px;
}

.background .contribution-line {
    border-bottom: .3em dashed #E8E8E8;
}

.background .dashboard-line {
    border-bottom: .3em dashed #C1D0FF;
}

@media (max-width: 768px) {
    .background .dashboard-line {
        display: none;
    }
}

.background:not(.org-set) .select2-selection {
    color: #003BFF;
}

.background.org-set .select2-selection {
    color: #153870;
}

.background:not(.org-set) .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: #003BFF transparent transparent !important;
}

.background.org-set .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: #153870 transparent transparent !important;
}

.modal.show [id^="ActionsForm"], 
.modal.show [id^="DailyTasksSelect"] {
    min-height: 24rem;
}

[id*="ActionsForm"] textarea {
    height: 16rem;
}

[id*="ActionsTabContent"] [id*="ActionsForm"] textarea {
    height: 13rem !important;
}

[id*="ActionsTabContent"] [id*="DailyTasksSelect"] .daily-tasks {
    height: 18rem;
    overflow: auto;
}

.modal.show [id*="ActionsTabContent"] [id*="DailyTasksSelect"] .daily-tasks {
    height: 20.35rem;
    overflow: auto;
}

#TeamActionsTabContainer,
#TeamActionsTabContainer-modal {
    flex: 0 1 auto !important;
}

.TeamActions-Empty {
    height: 15.5em;
}

#TeamActionsTabContent.tab-content,
#TeamActionsTabContent-modal.tab-content {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

#TeamActionsTabContent.tab-content > .tab-pane,
#TeamActionsTabContent-modal.tab-content > .tab-pane {
    -ms-flex-preferred-size: 0 !important;
    flex-basis: 0 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
    max-width: 100% !important;
    position: relative;
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

@media screen and (min-width: 768px) {
    #Dashboard-Goals,
    #Dashboard-TeamActions,
    #Dashboard-TeamActions-modal {
        display: flex;
        flex-direction: column;
    }

    #Dashboard-Goals,
    #Dashboard-TeamActions,
    #Actions-Col > .card .card-body{
        min-height: 28rem;
    }

    #Dashboard-TeamActions-modal {
        min-height: 26rem;
    }

    #Goals,
    .TeamActions,
    #TeamActionsTabContent,
    #TeamActionsTabContent-modal {
        position: relative !important;
        display: flex !important;
        flex: 1;
    }

    #TeamActions:not(.active),
    #TeamActions-modal:not(.active),
    #OrganizationActions:not(.active),
    #OrganizationActions-modal:not(.active) {
        display: none !important;
    }

    #GoalsAccordin, .TeamActions-Scrollable {
        position: absolute !important;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
    }
}

@media only screen and (max-width: 767.98px) {
    [id^="GoalsAccordin"], .TeamActions-Scrollable {
        min-height: 60vh;
        max-height: 85vh;
        overflow-y: auto;
    }
}

#Dashboard-Goals .card-header {
    border-bottom: none;
}

.background:not(.org-set) .text-blue {
    color: #003BFF !important;
}

.background.org-set .text-blue {
    color: #153870 !important;
}

.background .text-dark {
    color: #1E1D24 !important;
}

.background .text-grey {
    color: #626262 !important;
}

.btn-dashboard-select, .btn-admin-select {
    background-color: #ffffff !important;
    border-radius: 16px !important;
}

.background:not(.org-set) .btn-dashboard-select .card {
    border: 1px solid #EFF1FC;
}

.background.org-set .btn-dashboard-select .card {
    border: none;
}

.peer-support table thead {
    display: none;
}

.background.org-set .peer-support tr.child:hover > * {
    box-shadow: inset 0 0 0 9999px white;
}

.background.org-set .peer-support .dataTables_wrapper .dataTables_paginate .paginate_button.text-white:not(.current) {
    color: #fff !important;
}

.background.org-set .peer-support .dataTables_wrapper .dataTables_paginate .paginate_button.text-dark:not(.current) {
    color: #1E1D24 !important;
}

.background.org-set .peer-support .dataTables_wrapper .dataTables_paginate .paginate_button.text-dark:not(.current, .disabled):hover {
    color: #1E1D24 !important;
}

.btn-highFive {
    background-image: url(/images/HandsClapping_Thin.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: left;
    padding-left: 1.7em;
    display: inline-block;
    content: "" !important;
}

.btn-highFived {
    background-image: url(/images/HandsClapping_Thin_Blue.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: left;
    padding-left: 1.7em;
    display: inline-block;
    content: "" !important;
    color: #003BFF !important;
}

.btn-comment {
    background-image: url(/images/Commment_thin.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: left;
    padding-left: 1.7em;
    display: inline-block;
    content: "" !important;
}

.btn-edit {
    background-image: url(/images/Pencil_Blue.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 1.5em;
    height: 2em;
    display: inline-block;
    content: "" !important;
}

.btn-mail {
    background-image: url(/images/Envelope.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 1.5em;
    height: 2em;
    display: inline-block;
    content: "" !important;
}

@media (min-width: 300px) {
    .col-xs-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .pr-xs-2 {
        padding-right: 0.5rem !important;
    }
}

.commitment-card {
    border-top: 1px solid #EFF1FC !important;
}

.arrow-collapse.collapsed, .btn.collapsed .arrow-collapse {
    background-image: url(/images/arrow_down.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 1.5em;
    height: 2em;
    display: inline-block;
    content: "" !important;
}

.arrow-collapse:not(.collapsed), .btn-link:not(.collapsed) .arrow-collapse {
    background-image: url(/images/arrow_up.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 1.5em;
    height: 2em;
    display: inline-block;
    content: "" !important;
}

.arrow-collapse-blue.collapsed, .btn.collapsed .arrow-collapse-blue {
    background-image: url(/images/arrow_down_blue.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 1.5em;
    height: 2em;
    display: inline-block;
    content: "" !important;
}

.arrow-collapse-blue:not(.collapsed), .btn-link:not(.collapsed) .arrow-collapse-blue {
    background-image: url(/images/arrow_up_blue.png);
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 1.5em;
    height: 2em;
    display: inline-block;
    content: "" !important;
}

.see-more-section.collapse:not(.show) {
    display: block;
    height: 48px;
    overflow: hidden;
}

.see-more-section.collapsing {
    height: 48px;
}

.background .goals-action {
    font-weight: 500;
    font-size: 10px;
    /*line-height: 15px;*/
    color: #003BFF;
    background-color: #E5E8FA;
    padding: 5px 7px;
    border-radius: 1px;
}

.see-more a.collapsed:after {
    content: '+ Show More';
    text-align: right;
    float: right;
}

.see-more a:not(.collapsed):after {
    content: '- Show Less';
    text-align: right;
    float: right;
}

.carousel-inner .card-body {
    margin: auto;
}

.background:not(.org-set) .carousel-indicators li {
    background-color: #003BFF !important;
}

.background.org-set .carousel-indicators li {
    background-color: #153870 !important;
}

.carousel-footer {
    height: 30px;
    bottom: 0;
}

.carousel-hidden {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.progress-semi-circle {
    position: relative;
    float: left;
    text-align: center;
    width: 100%;
}

.progress-semi-circle > .overflow {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: -1.25rem;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50%;
}

.progress-semi-circle > .overflow > .bar {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 200%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.2rem solid #EFF1FC;
    border-bottom-color: #0bf;
    transform: rotate(45deg);
}

.progress-semi-circle > .overflow > .bar:before {
    content: "";
    position: inherit;
    bottom: calc((50% - .625rem) - (50% * 0.7071067811865) - .4rem);
    left: calc((50% - .625rem) - (50% * 0.7071067811865) - .4rem);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #ffffff;
}

.progress-semi-circle > .overflow > [class*="semi-circle-"] {
    position: absolute;
    background-color: #000000;
    bottom: 0;
    width: 1.3rem;
    height: .625rem;
    z-index: 10;
    background: radial-gradient(circle at 50% 0, transparent 70%, white 70%);
}

.progress-semi-circle > .overflow > .semi-circle-left {
    left: -.025rem;
}

.progress-semi-circle > .overflow > .semi-circle-right {
    right: -.025rem;
}

.progress-semi-circle > .overflow > [class*="semi-circle-"] > .cutout {
    display:block;
    width: 1.25rem;
    height: .625rem;
    top:-.625rem;
    left:0;
    /*overflow:hidden;/**/
    position:absolute;
}

.progress-semi-circle > .overflow > [class*="semi-circle-"] > .cutout:after {
    content:'';
    width: 1.25rem;
    height: 1.25rem;
    -moz-border-radius: 1.25rem;
    -webkit-border-radius: 1.25rem;
    border-radius: 1.25rem;
    background:rgba(0,0,0,0);
    position:absolute;
    top: -1.25rem;
    left: -0.5rem;
    border: 0.5rem solid rgba(0, 0, 0, 1);
}

.sticky-top {
    top: -1px !important;
}

nav .tab-select .nav {
    background: none;
}

main .background:not(.org-set) #DashboardDropDown,
main #DropDown.dropdown-menu {
    background-color: #EFF1FC;
}

main #DashboardDropDown a {
    color: #000000;
}

#DashboardTab .nav-link,
nav .tab-select .nav-link,
#Tabs .nav-link {
    color: #BABABA;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 40px;
}

#DashboardTab .nav-link.active, 
.nav-link.tab-dropdown, 
.nav-link.tab-dropdown.active,  
nav .tab-select .nav-link.active,
#Tabs .nav-link.active  {
    color: #000000 !important;
    background: none !important;
}

.nav-link.tab-dropdown, nav .tab-select .nav-link.tab-dropdown {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.background:not(.org-set) #DashboardTabContent, #TabContent {
    border-top: 1px solid #C3D1FF;
}

.background.org-set #DashboardTabContent, #TabContent {
    border-top: 1px solid #DFDFDF;
}

#DashboardTabContent .filter-col, #LeaderboardFilters .filter-col {
    border-radius: 6px;
}

.background:not(.org-set) #DashboardTabContent .filter-col,
.background:not(.org-set) #LeaderboardFilters .filter-col {
    border: 1px solid #C3D1FF;
}

.background.org-set #DashboardTabContent .filter-col,
.background.org-set #LeaderboardFilters .filter-col {
    border: 1px solid #DFDFDF;
}

#DashboardTabContent .filter span, #LeaderboardFilters .filter span {
    color: #000000 !important;
}

.background:not(.org-set) #DashboardTabContent .filter span,
.background:not(.org-set) #LeaderboardFilters .filter span {
    background-color: #EFF1FC !important;
}

#DashboardTabContent .filter span.select2-selection, #LeaderboardFilters .filter span.select2-selection {
    border: none;
}

#DashboardTabContent .filter span > span > b, #LeaderboardFilters .filter span > span > b  {
    border-color: #000000 transparent transparent !important;
}

@media (min-width: 768px) {
    #DashboardTabContent .filters-form.collapse, #LeaderboardFilters .filters-form.collapse {
        display: flex !important;
    }

    #DashboardTabContent .filters-button, #LeaderboardFilters .filters-button {
        display: none !important;
    }
}

#DashboardTabContent .btn-link:not(.collapsed) .show-filters, #DashboardTabContent .btn.collapsed .hide-filters,
#LeaderboardFilters .btn-link:not(.collapsed) .show-filters, #LeaderboardFilters .btn.collapsed .hide-filters {
    display: none;
}

#DashboardTabContent .border-line {
    border-bottom: 1px solid #C3D1FF;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
}

#DashboardTabContent .accordion .btn-link {
    color: #000000;
    display: inline-block;
    text-decoration: none !important;
}

#EngagementTab #Participation .progress-circle canvas {
    background: url("../images/participation.png") no-repeat center center;
}

#EngagementTab .survey-average .progress-bar.green {
    background-color: #91C24D;
    color: #ffffff;
}

#EngagementTab .survey-average .progress-bar.yellow {
    background-color: #F8D124;
    color: #ffffff;
}

#EngagementTab .survey-average .progress-bar.orange {
    background-color: #F49331;
    color: #ffffff !important;
}

#EngagementTab .survey-average .progress-bar.red {
    background-color: #C23038;
    color: #ffffff;
}

.overall-engagement, .team-satisfaction {
    height: 3.25rem;
}

.col-feedback-bar {
    width: 3rem;
}

.feedback-bar {
    width: 2.5rem;
    height: .5rem;
    border-radius: .25rem;
}

#LeaderboardTab .activity {
    height: 1rem;
}

#LeaderboardTab .activity .progress {
    border-radius: .5rem;
}

#LeaderboardTab .activity .progress .progress-bar {
    border-radius: .5rem;
}

.chart {
    position: relative;
    height: 20em;
}

canvas {
    display: block;
}

.leaderboard-test {
    background: rgba(255, 255, 255, 0);
    border-collapse: collapse;
}

.leaderboard-table td {
    background: rgba(255, 255, 255, 1) !important;
    border-top: 1px solid #EFF1FC;
}

.leaderboard-table, .leaderboard-table th {
    border: none !important;
}

#LeaderboardCard {
    background-color: rgba(255, 255, 255, 0.0);
    border: none;
}

.reload-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -.25rem;
    left: -.25rem;
    right: -.25rem;
    background: rgba(0, 0, 0, .3);
}

.reload-overlay > .row {
    padding-top: 30vh;
}

.dashboard-button {
    background: #d8782c;
    color: #fff;
    border-color: #d8782c;
}

.form-check .custom-control-label {
    color: #2c2b2c;
    font-size: 12px;
    line-height: 2.7;
    padding-left: 15px;
    text-transform: uppercase;
}

.form-check .custom-control-label::after,
.form-check .custom-control-label::before {
}

.form-check .custom-control-label::before {
    background-color: #fff;
    border: 1px solid #2c2b2c;
    border-radius: 50%;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #23467c !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header a,
h1.card-header,
h2.card-header,
h3.card-header,
h4.card-header,
h5.card-header {

}

.dashboard-header {
    background-image: url("../images/dashboard-background-v1.jpg");
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.action-row {
    padding: 10px 0px 5px 0px;
    border-bottom: 1px solid #EFF1FC;
}

.action-row-even {
    padding: 10px 0px 5px 0px;
    background-color: #EFF1FC;
}

.action-row-odd {
    padding: 10px 0px 5px 0px;
}

.text-addComment, .text-edit {
    font-size: 14px;
}

/*
.table .datatable-row-even, .table .table-row-even, .table .odd, .leaderboard-row-even {
    background-color: rgba(35, 70, 124, 0.15);
}
*/

.leaderboard-row {
    border-bottom: 1px solid #EFF1FC;
}

.table .table-row-complete {
    background-color: rgba(0, 167, 112, 0.9);
}

.table .table-row-incomplete {
    background-color: rgba(255, 58, 17, 0.9);
}

.table .table-row-unassigned {
    background-color: rgba(255, 194, 102, 0.9);
}

.table .table-row-complete > td,
.table .table-row-incomplete > td {
    color: #fff;
}

.table .table-row-complete > td,
.table .table-row-incomplete > td, 
.table .table-row-unassigned > td {
    border-top: 1px solid #fff;
}

.background .table td, .background .table th {
    border-top: 1px solid #EFF1FC;
}

.textInput {
    width: 100%;
    height: 5em;
}

.commentsLink {
    font-size: 14px;
    color: lightskyblue;
}

#GroupMetric {
    overflow-x: auto;
    overflow-y: auto;
}

.slotBackground {
    background-image: linear-gradient(#dfe4ec, #ffffff, #dfe4ec);
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: #6c757d;
}

#ProgressMeter canvas {
    display: inline-block;
    position: relative;
    margin-bottom: 1em;
}

#WeeklyPointsProgress {
    display: block;
    position: relative;
    margin-top: -6.7em;
}

#DailyPointsProgress {
    display: block;
    position: relative;
    margin-top: -7.1em;
}

#PointsProgressLabel {
    font-size: .7em;
}

#PointsProgressAmount {
    font-size: .8em;
}

#Trophy, #ThresholdState, .leaderboard-threshold-level {
    display: block;
    position: relative;
    margin-bottom: 2em;
}

#Trophy img, #ThresholdState img, .leaderboard-threshold-level img {
    position: absolute;
    height: 32px;
    top: 1em;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#Leaderboard [class~="leaderboard-row"] {
    -webkit-transition: opacity 300ms ease-in-out;
    -moz-transition: opacity 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}

#Trophy img.transparent, #ThresholdState img.transparent, 
.leaderboard-threshold-level img.transparent, #Leaderboard .row.transparent  {
    opacity: 0;
}

.teamAction-user {
    float: left;
    font-weight: bold
}

.teamAction-date {
    float: left;
    margin-left: 10px;
    font-size: small
}

.teamAction-description {
    clear: both;
}

.notificationTimestamp {
    font-size: .75em;
}

.phoneSetup-iPhoneIcon {
    height: 25px;
}

.phoneSetup-Screenshot {
    width: 175px;
}

#ShareButtons {
    display: flex;
    justify-content: center;
}

.ImgHidden {
    display: none;
}

.ImgVisible {
    display: inline-block;
    width: 16em;
}

.notificationScroll {
    height: 30em;
    overflow-y: scroll;
}

#LoadMoreNotifications {
    height: 5px;
}

#NotificationBell {
    width: 45px;
}

.newNotification {
    animation-name: notificationAnimation;
    animation-duration: 3500ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@keyframes notificationAnimation {
    0% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(360deg);
    }
    60% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#TechSupport-Message {
    height: 8em;
}

.btn-getStarted {
    background-color: orange;
}

.videoUrlCol {
    min-width: 5em;
}

.editable:hover {
    text-decoration: underline;
}

#PDFContainer {
    max-height: 31em;
}

#PDFCurrentPage::-webkit-inner-spin-button,
#PDFCurrentPage::-webkit-outer-spin-button,
#PDFZoom::-webkit-inner-spin-button,
#PDFZoom::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
}

#PDFZoom {
    width: 3.1em;
}

.textView {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    white-space: pre-wrap;
}

#CommentEditor {
    overflow-y: auto;
    resize: vertical;
}

#CommentEditor:empty:before {
    content: 'Add comment';
    color: #555;
}

.blue {
    color: #23467c !important;
}

h2.blue {
    font-size: 2.5em;
    text-shadow: 4px 4px 6px #6c757d;
}

.orange {
    color: #d8782c !important;
}

h4.orange {
    font-size: 1.4em;
    text-shadow: 4px 4px 6px #ff8935;
}

.card, .management, .registration, .backgroundPlain {
    background-color: rgba(255, 255, 255, 1);
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

@media only screen and (max-device-width: 899.98px) {
    #Nav-Logo {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    #SidebarCollapseOpen {
        position: absolute;
        z-index: 10;
        top: 75%
    }
}

@media screen and (max-width: 991.98px) {
    #SidebarCollapseOpen {
        position: relative;
    }
}

.wrapper {
    display: block;
}

#Sidebar {
    background: #f8f9fa;
    position: fixed;
    transition: all 0.6s ease;
    transform-origin: center left;
    overflow-y: auto;
    height: 100%;
    z-index: 9999;
}

#Sidebar.active {
    margin-left: 0;
    transition: all 0.6s ease;
    transform-origin: center left;
}

#Content {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    min-height: 100vh;
}

.overlay {
    display: block;
    position: fixed;
    right: 0;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9990;
    opacity: 0;
    transition: all 600ms ease;
}

.overlay.active {
    width: 100%;
    opacity: 1;
    z-index: 9990;
}

@media screen and (min-width: 1200px) {
    #ReportNetworks, .report-networks {
        min-height: inherit;
        max-height: 100vh;
        overflow: auto;
    }
}

@media screen and (max-width: 1199.98px) {
    #ReportNetworks, .report-networks {
        min-height: inherit;
        max-height: 75vh;
        overflow: auto;
    }
}

@media screen and (min-width: 1200px) {
    #Sidebar {
        margin-left: -21vw;
        min-width: 21vw;
        max-width: 21vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
    #Sidebar {
        margin-left: -35vw;
        min-width: 35vw;
        max-width: 35vw;
    }
}

@media screen and (min-width: 575px) and (max-width: 767.98px) {
    #Sidebar {
        margin-left: -40vw;
        min-width: 40vw;
        max-width: 40vw;
    }
}

@media screen and (min-width: 428px) and (max-width: 574.98px) {
    #Sidebar {
        margin-left: -50vw;
        min-width: 50vw;
        max-width: 50vw;
    }
}

@media screen and (min-width: 375px) and (max-width: 427.98px) {
    #Sidebar {
        margin-left: -70vw;
        min-width: 70vw;
        max-width: 70vw;
    }
}

@media screen and (min-width: 269px) and (max-width: 374.98px) {
    #Sidebar {
        margin-left: -80vw;
        min-width: 80vw;
        max-width: 80vw;
    }
}

@media screen and (max-width: 268.98px) {
    #Sidebar {
        margin-left: -90vw;
        min-width: 90vw;
        max-width: 90vw;
    }
}

table#UserTable span .collapse {
    display: block !important;
}

table#UserTable span .btn-collapse {
    display: none !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 3rem;
    height: 1.5rem;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 400ms;
    transition: 400ms;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: .25rem;
    bottom: .25rem;
    background-color: white;
    -webkit-transition: 400ms;
    transition: 400ms;
}

input:checked + .slider {
    background-color: #003BFF;
}

input:focus + .slider {
    box-shadow: 0 0 1px #003BFF;
}

input:checked + .slider:before {
    -webkit-transform: translateX(1.5rem);
    -ms-transform: translateX(1.5rem);
    transform: translateX(1.5rem);
}

.slider.round {
    border-radius: 1.5rem;
}

.slider.round:before {
    border-radius: 50%;
} 

.background .list-group-item {
    border-top: 1px solid #EFF1FC;
    border-bottom: 1px solid #EFF1FC;
    border-left: none;
    border-right: none;
}

.organizationCol {
    min-height: initial;
    max-height: 25vh;
    overflow: auto;
}

#form-modal-upload {
    perspective: 2000px;
}

#SelectUsers {
    min-height: inherit;
    max-height: 45vh;
    overflow: auto;
}

#ProgressImage:not(.d-none), .progressImage:not(.d-none) {
    margin-left: 5px;
    animation-name: progressImageSpin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes progressImageSpin {
    100% {
        transform: rotate(360deg);
    }
}

input[type=search], select {
    background-color: #ffffff !important;
}

#Notifications span.bg-light {
    background-color: #EFF1FC;
}

#Notification-Link {
    display: inline-block;
    position: relative;
}

#Notification-Link img {
    height: 1.5em;
}

#Notification-Link span {
    position: absolute;
    right: 10%;
    width: .5em;
    height: .5em;
}

@media only screen and (min-width: 992px) {
    #Notification-Link span {
        right: 25%;
    }
}

@media only screen and (min-width: 768px) {
    #Notification-Link .notifications-bubble-text {
        font-size: .4em;
        width: 10em;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 5px 5px 5px;
        position: absolute;
        z-index: 1;
        top: 5px;
        left: 115%;
        opacity: 0;
    }

    #Notification-Link .notifications-bubble-text::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #555 transparent transparent;
    }
}

@media only screen and (max-width: 767.98px) {
    #Notification-Link.mb-new-notification {
        margin-bottom: 2.5rem !important;
    }
}

@media only screen and (max-width: 767.98px) {
    #Notification-Link .notifications-bubble-text {
        font-size: .4em;
        width: 14em;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 5px 5px 5px;
        position: absolute;
        z-index: 1;
        top: 115%;
        left: -203%;
        margin-left: -60px;
        opacity: 0;
    }

    #Notification-Link .notifications-bubble-text::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 88.5%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555 transparent;
    }
}

@media only screen and (max-width: 436px) {
    #Notification-Link .notifications-bubble-text {
        font-size: .4em;
        width: 14em;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 5px 5px 5px;
        position: absolute;
        z-index: 1;
        top: 115%;
        left: -35%;
        margin-left: -60px;
        opacity: 0;
    }

    #Notification-Link .notifications-bubble-text::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555 transparent;
    }
}

@media only screen and (max-width: 381px) {
    #Notification-Link .notifications-bubble-text {
        font-size: .4em;
        width: 14em;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 5px 5px 5px;
        position: absolute;
        z-index: 1;
        top: 115%;
        left: -203%;
        margin-left: -60px;
        opacity: 0;
    }

    #Notification-Link .notifications-bubble-text::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 88.5%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555 transparent;
    }
}

#Notification-Link .notifications-bubble-text {
    animation-name: notification-bubble-animation;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@keyframes notification-bubble-animation {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.notification-tab {
    font-size: 1em;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 5px 5px 5px 5px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

@media only screen and (max-width: 768.98px) {
    .notification-tab {
        width: 100vw;
    }
}

@media only screen and (min-width: 769px) {
    .notification-tab {
        width: 28em;
    }
}

#Close-Notification-Tab {
    position: absolute;
    right: 2%;
    bottom: 20%;
}

.notification-tab.show {
    margin-top: 0px;
}

form#Survey {
    max-height: 100vh;
    overflow-y: auto;
    position: fixed;
    top: 0;
    margin-top: -100%;
    z-index: 1200;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 2s ease;
}

form#Survey.show {
    margin-top: 0px;
}

.camera {
    height: 15px;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    background-image: url(/images/Camera-grey.png);
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: center;
    width: 3em;
    display: inline-block;
    content: "" !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100% !important;
}

#Mass-Email-Networks {
    min-height: inherit;
    max-height: 75vh;
    overflow: auto;
}

#Mass-Email-Message {
    height: 15em;
}

div[id^="GoalRow-"] {
    min-width: 50vw;
}

.progress:not(.progress-bar-vertical) {
    height: 100% !important;
}

#ResourceVideoLink {
    display: block;
    position: relative;
    margin-bottom: 60%;
}

#ResourceVideoLink img, #ResourceVideoLink canvas, #ResourceVideoLink video {
    position: absolute;
    top: 1.25rem;
    left: 50%;
    transform: translate(-50%, -10%);
}

.legend > ul {
    display: flex;
    justify-content: center;
}

.legend li {
    margin: 0px 10px;
    display: flex;
}

.legend li span {
    padding-left: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.row.legend {
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend > div {
    display: flex;
    align-items: center;
}

.legend > div > span {
    padding-left: 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#GroupMetrics tbody tr.table-row-odd {
    background-color: rgba(0, 0, 0, 0);
}

#ReportGraph {
    position: absolute;
    top: -100%;
    width: 1000px;
    z-index: 1;
}

#ReportGraph > div > canvas {
    height: 500px;
}

@media only screen and (min-width: 1200px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 170px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 135px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 90px;
    }
}

@media only screen and (max-width: 767.98px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 260px;
    }
}

@media only screen and (max-width: 550px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 240px;
    }
}

@media only screen and (max-width: 500px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 215px;
    }
}

@media only screen and (max-width: 450px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 180px;
    }
}

@media only screen and (max-width: 400px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 150px;
    }
}

@media only screen and (max-width: 350px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 130px;
    }
}

@media only screen and (min-width: 250px) and (max-width: 300px) {
    #ResourcesVideo, #ResourceVideoLink img {
        min-height: 100px;
    }
}

.cheatSheetText {
    height: 10em !important;
}

.sort-handle {
    cursor: move;
    cursor: -webkit-grabbing;
}

.sort-ghost {
    opacity: 0.5;
}

#LevelItemSelects {
    min-height: 7rem;
    overflow: auto;
}

.sticky-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: -1px;
    z-index: 1080;
}


.heat-map td.success, .heat-map td.warning,
.heat-map td.danger, .heat-map td.empty {
    border: .2rem solid #fff;
}

.heat-map td.success {
    background-color: #E1EEC9;
}

.heat-map td.warning {
    background-color: #FDF1C2;
}

.heat-map td.danger {
    background-color: #FBDDC3;
}

.heat-map td.empty {
    background-color: #F9F9F9;
}

.time-filter:not(:last-child) input[type="checkbox"]:checked,
.time-filter:not(:last-child) input[type="checkbox"]:checked + label {
    pointer-events: none;
}

.text-content {
    white-space: pre-wrap;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.content-preview {
    max-height: 10rem;
    max-width: 10rem;
}

.content-dashboard-preview {
    max-height: 20rem;
    max-width: 20rem;
}

.icon {
    max-width: 60px;
    max-height: 60px;
}

.icon-sm {
    max-width: 30px;
    max-height: 30px;
}

.peersupport-profile {
    max-width: 150px;
    max-height: 150px;
}