/*Layout css start*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');
body {
	font-family: 'Nunito', sans-serif;
	background-color: var(--light);
    color: var(--body-text-color);
	font-size:15px;
	font-weight:500;
    padding-top: 60px;
	letter-spacing:0;
	line-height:1.5;
}
.user-name {
    text-transform: capitalize;
}
.cust-section.row, .cust-section .row {
    margin-right: -5px;
    margin-left: -5px;
}
.cust-section .col-sm-3, .cust-section .col-sm-4, .cust-section .col-sm-8 {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--body-text-color);
}
.highcharts-credits {
	display: none;
}
.pad-left-0 {
    padding-left: 0;
}
.pad-right-0 {
    padding-right: 0;
}
::selection {
    color: var(--inverse-text-color);
    background-color: var(--brand-color);
}
a, a:hover {
	color: #333;
}
.select2-container--krajee .select2-selection--multiple {
    height: 34px;
}
.input-group-addon {
	background-color: #fff;
}
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
	color: var(--inverse-text-color);
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.datepicker {
	padding:5px;
}
span.input-group-addon.kv-date-remove {
    display: none;
}
.alert {
    position: fixed;
    bottom: 50px;
    right: 15px;
}
.alert button.close {
    color: #000;
    opacity: .5;
    position: absolute;
    top: -22px;
    right: 0px;
}
.filter {
    margin-bottom: 20px;
}
img {
	max-width:100%;
}
.btn {
	font-size:14px;
}
.btn.btn-cust {
	padding:6px 30px;
}
.top-header {
    margin-right: -40px;
    margin-bottom: 20px;
    margin-left: -40px;
    min-height: 60px;
    padding: 12px 40px;
    background-color: var(--top-header-bg);
    box-shadow: 0px -2px 18px 1px #cccccc82;
}
body.admin_login {
    padding-top: 100px;
}
.brand-image .powered-by {
    margin-top: 22px;
}
.login-card h1.cd-title {
    margin: 0;
    font-size: 33px;
    font-weight: 900;
    color: #f30;
}
.powered-by span {
    display: inline-block;
    vertical-align: middle;
}
.brand-image .powered-by img {
    width: 100px;
    margin-left: 10px;
}
.footer {
    text-align: center;
    padding: 20px 0;
}
.powered-by span {
	font-size:14px;
    display: inline-block;
    vertical-align: middle;
}
.sidebar .powered-by {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 15px;
	border-top: 1px solid var(--menu-border-color);
	background-color: var(--brand-color);
}
.sidebar .powered-by img {
    width: 90px;
    margin-left: 10px;
}

.sidebar .powered-by span {
	color: var(--inverse-text-color);
}
.pagination {
	margin:0;
}
.summary {
    padding: 10px 0;
}
/*Custom Scroll Start*/
.sidebar::-webkit-scrollbar-track{
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
	border-radius:10px;
	background-color:var(--brand-color);
}
.sidebar::-webkit-scrollbar{
	width:7px;
	background-color:var(--brand-color);
}
.sidebar::-webkit-scrollbar-thumb{
	border-radius:5px;
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
	background-color:var(--light);
}

.sidebar .nav-sidebar::-webkit-scrollbar-track{
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
	border-radius:10px;
	background-color:var(--brand-color);
}
.sidebar .nav-sidebar::-webkit-scrollbar{
	width:7px;
	background-color:var(--brand-color);
}
.sidebar .nav-sidebar::-webkit-scrollbar-thumb{
	border-radius:5px;
	-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ffffff50;
}
/*Custom Scroll End*/
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active:focus, .btn-primary:active:hover {
	outline:none;
	color: var(--inverse-text-color);
	border-color: transparent;
	background-color: var(--brand-color);
}
.selected-dates label {
    font-weight: 600;
    color: #666;
}
.selected-dates p.date-group {
    font-weight: 600;
}
#theme .form-control {
    border-left: 0;
    padding-left: 0;
}
#theme .form-control:focus {
    border-color: #ccc;
    box-shadow: none;
}
#theme #color1 {
    background-color: #fff !important;
    color: #000 !important;
}
.mbot-10 {
    margin-bottom: 10px;
}
.mbot-30 {
    margin-bottom: 30px;
}
.highcharts-grid-line{
  display: none;
}
.highcharts-axis-line{
  display: none;
}
.highcharts-plot-border{
  height: 270px;
}
.highcharts-figure, .highcharts-data-table table {
    max-width: 100%;/*  margin: 1em auto;
*/}
.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
.highcharts-axis-title {
    font-weight: bold;
}
.card {
    background-color: #fff;
    border: 1px solid var(--light);
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 0.1);
    margin-bottom: 30px;
}
.card-shadow {
    box-shadow: 1px 2px 21px -1px rgba(58,59,69,.15)!important;
}
.panel {
    border-color: var(--panal-title-bg);
}
.panel-default>.panel-heading {
    padding: 15px 15px;
	color: var(--brand-color);
    border-color: var(--panal-title-bg);
    background-color: var(--panal-title-bg);
}
/*.leaderboard {
    border: 5px solid var(--brand-color);
    border-left: 0;
     margin-bottom: 30px; 
    height: 310px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
}*/
.leaderboard {
     margin-bottom: 30px;
}
.side-tab-panel .nav-tabs {
    border: 5px solid var(--brand-color);
    border-right: 0;
    background-color: var(--brand-color);
    height: 310px;
}
.side-tab-panel .nav-tabs li {
    width: 100%;
}
.side-tab-panel .nav-tabs li a {
    color: var(--inverse-text-color);
    border: 0;
    border-radius: 0;
    margin-right: 0;
    font-size: 18px;
    padding: 25px 15px;
}
.side-tab-panel .nav>li>a:focus, .side-tab-panel .nav>li>a:hover {
    text-decoration: none;
    background-color: var(--brand-color);
    color:  var(--inverse-text-color);
}
.side-tab-panel .nav-tabs>li.active>a, .side-tab-panel .nav-tabs>li.active>a:focus, .side-tab-panel .nav-tabs>li.active>a:hover {
    color: var(--brand-color);
    background-color: #fff;
    border: 0;
}
.no-pad-right {
    padding-right: 0;
}
.no-pad-left {
    padding-left: 0;
}
.leaderboard .leaderboard-head {
    color: #8c8c8c;
}
.leaderboard-unit {
    text-transform: capitalize;
}
.leaderboard .leaderboard-unit {
	display:block;
    padding: 10px 0;
    border-bottom: 1px solid #e8e8e8;
}
.leaderboard-unit .fa-eye {
    color: #8c8c8c;
}
.leaderboard .leaderboard-unit:last-child {
	padding-bottom:0;
    border-bottom: 0;
}
.leaderboard .leaderboard-unit .count {
    color: var(--brand-color);
    font-weight: 700;
    font-size: 15px;
}
.login-card .form-group {
	padding:0;
	margin:0;	
}
.login-card h1 {
	font-weight: 600;
	font-size: 21px;	
}
.brand-image {
    text-align: center;
    padding: 30px 0;
    border-bottom: 1px solid var(--brand-color);
}
.brand-image img {
    width: 300px;
}
.sidebar {
	background-color: var(--brand-color);
	overflow:hidden;
}
.corporate-logo {
    padding: 10px;
    height: 65px;
    margin: 0 -15px;
    background-color: var(--logo-bg);
}
.sidebar .nav > li {
    border-bottom: 1px solid var(--menu-border-color);
}
.sidebar .nav > li:last-child {
    border-bottom: 0;
}
.nav-sidebar > li > a {
    padding: 15px 10px;
	color: var(--menu-text-color);	
	font-weight: 500;
}
.nav-sidebar>li>ul>li>a {
	color: var(--menu-text-color);
    font-size: 14px;
    padding: 10px 10px 10px 20px;
}
.nav-sidebar.nav > li > a:hover, .nav-sidebar.nav > li > a:focus {
	background-color: var(--brand-color);
	color: var(--menu-text-color-hover);	
}
.nav>li>a .fa.fa-angle-down.floatRight {
    position: absolute;
    right: 3px;
    top: 19px;
}
.nav-sidebar.nav > li > a > i.fa-angle-down {
    transform: rotate(180deg);
    transition: all .2s;
}
.nav-sidebar.nav > li > a.collapsed > i.fa-angle-down {
    transform: rotate(0deg);
}
.nav-sidebar {
    margin-right: -13px;
    margin-bottom: 0;
    margin-left: 0;
    padding-bottom: 70px;
	padding-right: 13px;
    height: 87vh;
	overflow-y: auto;
}
.nav-sidebar ul {
	padding:0;
}
.main {
    padding: 0;
    margin-top: 20px;
}
.top-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: -15px;
    height: 65px;
    padding: 0 20px;
    background-color: var(--top-header-bg);
    box-shadow: 0px -2px 18px 1px #cccccc82;
    z-index: 999;
}
.btn-profile, .btn-profile:active, .btn-profile:focus:active {
	padding:0;
    font-weight: 400;
	outline:none;
	box-shadow: none;
	background-color:transparent;
}
span.avatar {
	color:var(--inverse-text-color);
    font-size: 19px;
    font-weight: 600;
    padding: 5px;
    margin-left: 10px;
    display: inline-block;
    width: 35px;
    height: 35px;
    vertical-align: middle;
    border-radius: 50%;
    background-color: var(--brand-color);
}
.user {
    display:inline-block;
}
.user .dropdown-menu {
    left: auto;
    right: 0;
}
form.search-form, .user {
    padding: 10px;
}
form.search-form {
    padding-left: 0;
}
.edit-pro-form .logo {
    display: inline-block;
    padding: 20px;
    margin: 10px auto;
    position: relative;
    border: 1px solid var(--brand-color);
    border-radius: 6px;
}
.edit-pro-form .logo i {
    position: absolute;
    top: -10px;
    right: -10px;
    height: 20px;
    width: 20px;
    text-align: center;
    color: var(--inverse-text-color);
    padding: 2px;
    border-radius: 50%;
    background-color: var(--brand-color);
	cursor: pointer;
}
img.mg-logo {
    padding: 15px 0;
    max-height: 65px;
}
.user {
    padding-right: 0;
}
h1.page-title {
    display: inline-block;
    font-size: 26px;
    margin-top: 6px;
}
p.page-short-intro {
    font-size: 15px;
    /*color: var(--page-info-color);*/
    margin-bottom: 20px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.pagination>li>a, .pagination>li>span {
	color: var(--brand-color);
}
strong.listhead-label {
    color: var(--page-info-color);
    display: block;
}
span.com-act-code {
    margin-right: 10px;
}
.list-card {
    background-color: #fff;
    padding: 15px;
    border: 1px solid #e4e4e4;
    margin-bottom: 3px;
    border-radius: 4px;
	transition:all .2s;
}
.list-card:hover {
    background-color: #fbfbfb;
	transition:all .2s;
}
.list-card p {
    margin: 0;
    padding: 3px 0;
}
.emp-name span.status {
    height: 10px;
    width: 10px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 50%;
    background-color: #f2f2f2;
}
.emp-name span.status.active {
    background-color: #2ecc71;
}
.emp-name span.status.deactive {
    background-color: #e53a29;
}
p.emp-status {
    display: inline-block;
    padding: 3px 20px;
    border-radius: 4px;
	cursor: pointer;
}
p.emp-status.active {
    color: var(--success-color);
    background-color: var(--success-color-br);
}
/*p.emp-status.inactive {
    color: #9e6701;
    background-color: #f1c40f7d;
}*/
p.emp-status.inactive {
    color: var(--danger-color);
    background-color: var(--danger-color-bg);
}
.emp-pro-card {
    background-color: #fff;
    padding: 15px;
}
.progress-track {
    height: 40px;
}
.active-progress, .inactive-progress {
    display: inline-block;
    height: 40px;
    float: left;
}
.active-progress {
    background-color: #00d441;
}
.inactive-progress {
    background-color: #ff0000;
}
/*Layout css end*/
/*corp-profile css start*/
.corp-info label {
    font-size: 15px;
    font-weight: 500;
}
.corp-info .field {
    font-size: 20px;
    font-weight: 600;
    min-height: 30px;
    margin-bottom: 20px;
}
.corp-logo img {
	width: 200px;
}
.employee-list-head {
    padding: 15px;
    margin-top: 20px;
}
.employee-list-index .btn-group {
    margin-bottom: 10px;
}
/*corp-profile css end*/
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
	color: var(--inverse-text-color);
	background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.pagination>li>a, .pagination>li>span {
	color: var(--brand-color);
}
strong.listhead-label {
    color: var(--page-info-color);
    display: block;
}
.list-card {
    background-color: #fff;
    padding: 15px;
    border: 1px solid #e4e4e4;
    margin-bottom: 3px;
    border-radius: 4px;
	transition:all .2s;
}
.list-card:hover {
    background-color: #fbfbfb;
	transition:all .2s;
}
.list-card p {
    margin: 0;
    padding: 3px 0;
}
.emp-name span.status {
    height: 10px;
    width: 10px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 50%;
    background-color: #f2f2f2;
}
.emp-name span.status.active {
    background-color: #2ecc71;
}
.emp-name span.status.deactive {
    background-color: #e53a29;
}
p.emp-status {
    display: inline-block;
    padding: 3px 20px;
    border-radius: 4px;
	cursor: pointer;
}
/*p.emp-status.inactive {
    color: #9e6701;
    background-color: #f1c40f7d;
}*/
.emp-pro-card {
    background-color: #fff;
    padding: 15px;
}
.pro-pic-block {
    width: 150px;
    height: 150px;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
	color: #fff;
    text-align: center;
	background-color: var(--brand-color);
    border: 4px solid var(--brand-color);
}
.pro-pic-block span {
    font-size: 60px;
    font-weight: 700;
    padding: 43px;
    line-height: 1;
    display: inline-block;
}
.emp-details {
	margin-bottom:30px;
}
.emp-details h2.empl-name {
    font-weight: 800;
    font-size: 26px;
    margin-top: 0;
}
h2.empl-name + .status {
    display: inline-block;
    position: relative;
    font-weight: 500;
    padding: 5px 0 5px 30px;
    margin-bottom: 10px;
}
.emp-details p {
    font-size: 16px;
}
h2.empl-name + .status:before {
    content: '';
    position: absolute;
    height: 26px;
    width: 26px;
    top: 0;
    left: 0;
    border-radius: 50%;
}
h2.empl-name + .status:after {
    content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    top: 8px;
    left: 8px;
    border-radius: 50%;
}

h2.empl-name + .status.active:before {
    background-color: #2ecc717d;
}
h2.empl-name + .status.active:after {
    background-color: #16964d;
}
h2.empl-name + .status.inactive:before {
    background-color: #e644347d;
}
h2.empl-name + .status.inactive:after {
    background-color: #e64434;
}
.emp-details h3 {
    font-size: 20px;
    margin-top: 10px;
}
.emp-btn-group {
    text-align: center;
    margin-top: 75px;
}
.emp-btn-group a:first-child {
    margin-right: 10px;
}
.tenure {
    text-align: left;
    margin-top: 15px;
}
.tenure #progressbar {
    height: 7px;
    background-color: #f2f2f2;
    border-radius: 20px;
    overflow: hidden;
}
.tenure #progressbar div {
    height: 7px;
    background-color: var(--brand-color);
}
.tenure span.days-left {
    margin-bottom: 5px;
    display: inline-block;
}
.tenure span.end-date {
    margin-bottom: 5px;
    display: inline-block;
    float: right;
}
.emp-rew-graph p {
    display: inline-block;
    width: 32%;
    text-align:center;
}
.emp-rew-graph p span.dot {
    background-color: #000;
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
}
.emp-rew-graph p.long-term {
    color: #dc30b2;
}
.emp-rew-graph p.long-term span.dot {
    background-color: #dc30b2;
}
.emp-rew-graph p.mid-term {
    color: #89bf95;
}
.emp-rew-graph p.mid-term span.dot {
    background-color: #89bf95;
}
.emp-rew-graph p.short-term {
    color: #8e9fcc;
}
.emp-rew-graph p.short-term span.dot {
    background-color: #8e9fcc;
}
.card.act-rew-card {
    padding: 15px;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 0.1);
    min-height: 233px;
}
.card.act-rew-card p.old-rew-status {
    font-size: 11.5px;
    margin-top: 15px;
    margin-bottom: 0;
    min-height: 25px;
}
.card.act-rew-card .rew-status-line {
    padding: 0 10px;
}
p.old-rew-status {
    font-size: 12px;
}
p.old-rew-status .status-tag{
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 15px;
    padding: 2px 6px;
    margin-right: 5px;
}
.card.act-rew-card .col-xs-3,
.card.act-rew-card .col-xs-9 {
    padding: 0 10px;
}
.card.act-rew-card .col-xs-3 {
    padding-right: 5px;
}
.card.act-rew-card .col-xs-9 {
    padding-left: 5px;
}
.act-rew-card img.rp-img {
    height: 45px;
    width: 45px;
    margin-bottom: 10px;
    padding: 5px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 50%;
}
.act-rew-card .reward-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 15px;
    min-height: 45px;
    overflow: hidden;
}
.act-rew-card .reward-shortinfo {
    font-size: 13px;
    margin-top: 7px;
    font-weight: 600;
}
.act-rew-card p.start-end-date {
    font-size: 12px;
    margin-top: 3px;
}
.act-rew-card span.term-tag {
    padding: 3px 4px;
    font-size: 12px;
    border-radius: 20px;
    background-color: #ffffff40;
    display: block;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}
.reward-progress.sessions-progress {
    margin-bottom: 10px;
}
.reward-progress label {
    font-size: 14px !important;
    margin-bottom: 5px;
}
.reward-progress .status-value {
    font-size: 14px;
}
.reward-progress .progress-tarck {
    height: 5px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #ffffff50;
}
.reward-progress .progress-tarck div {
    height: 5px;
    background-color: #ffffff;
}
.act-rew-card .reward-img {
    margin-top: 10px;
}
.reward-slider .owl-nav {
    position: absolute;
    outline: none;
    top: -43px;
    right: 0;
}
.owl-carousel .owl-nav button.disabled {
    opacity: 0.2;
}
.reward-slider .owl-nav button span {
    font-family: FontAwesome;
    font-size: 32px;
    color: #f30;
    display: inline-block;
    height: 40px;
    width: 40px;
}
.reward-slider .owl-nav button.owl-prev span:after {
    content: "\f104";
}
.reward-slider .owl-nav button.owl-next span:after {
    content: "\f105";
}
.card.stat-cards {
    position: relative;
    padding: 8px;
    margin-bottom: 10px;
    /*border-left: 2px solid var(--brand-color);*/
  	/*box-shadow: 1px 1.732px 18px 0px rgba(4, 4, 4, 0.082);*/
}
.card.stat-cards label {
    font-weight: 600;
    font-size: 14px;
    min-height: 66px;
    color: #5a5a5a;
}
.card.stat-cards .count {
    font-size: 35px;
    margin-top: 10px;
    line-height: 1;
    font-weight: 700;
    text-align: left;
    margin-bottom: 20px
}
.card.stat-cards span.change {
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    bottom: 6px;
    left: 9px;
}
.card.stat-cards span.change.up {
    color: #00d441;
}
.card.stat-cards span.change.down {
    color: #ff0000;
}
.combo-count {
    z-index: 9;
}
.semi-circle>div {
    margin-top: -50px;
    margin-bottom: -27px;
    z-index: -3;
}
.card.top-activity {
    padding: 10px;
}
.card.act-inact, .card.reward-status, .card.top-activity, .top-cards {
    min-height: 495px;
    padding: 10px;
}
.emp-stats {
    position: relative;
}
.start-on label, .last-activity-on label {
    font-size: 16px !important;
}
.start-on p, .last-activity-on p {
    margin: 0;
}
.emp-top-cards {
    min-height: 225px;
    padding: 10px;
}
.card.analytics-large-card {
    min-height: 510px;
}
.reward-stats .combo-count label {
    font-size: 13px;
}
.card.top-activity .nav-tabs>li>a {
    border: 0;
    border-top: 3px solid #fff;
    border-radius: 0;
    margin: 0;
}
.card.top-activity .nav>li>a:focus, .card.top-activity .nav>li>a:hover {
    background-color: #fff;
}
.card.top-activity .nav-tabs>li.active>a, 
.card.top-activity .nav-tabs>li.active>a:focus, 
.card.top-activity .nav-tabs>li.active>a:hover {
    border: 0;
    border-top: 3px solid var(--brand-color);
}
.card.top-activity .nav-tabs {
    border: 0;
    border-radius: 0;
    margin: -10px -10px 0 -10px;
}
.leaderboard-container {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.leaderboard-container::-webkit-scrollbar-track{
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
    border-radius:10px;
    background-color: #ffffff;
}
.leaderboard-container::-webkit-scrollbar{
    width:7px;
    background-color: #ffffff;
}
.leaderboard-container::-webkit-scrollbar-thumb{
    border-radius:5px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
    background-color: #ffffff50;
}
.leaderboard .leaderboard-head {
    color: #8c8c8c;
}
.analytics .card {
  	box-shadow: 1px 1.732px 18px 0px rgba(4, 4, 4, 0.082);
}
.graph-tab-panel ul.nav.nav-tabs {
    margin: -20px -20px 0 -20px;
    border: 0;
}
.graph-tab-panel ul.nav.nav-tabs li {
    width: 33%;
}
.graph-tab-panel.grp-and-status ul.nav.nav-tabs li {
    width: 25%;
}
.graph-tab-panel.grp-and-status ul.nav.nav-tabs li a {
    padding: 10px 15px;
}
.graph-tab-panel .nav-tabs>li>a {
    padding: 10px 30px;
    text-align: center;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-top: 3px solid #fff;
}
.graph-tab-panel ul.nav.nav-tabs.level-2 {
    text-align: center;
}
.graph-tab-panel.grp-and-status ul.nav.nav-tabs.level-2 li {
    width: auto;
    float: none;
    display: inline-block;
}
.graph-tab-panel.grp-and-status ul.nav.nav-tabs.level-2 li.active a {
    border-color: var(--brand-color);
    background-color: var(--brand-color);
    color: #fff;
}
.graph-tab-panel.grp-and-status ul.nav.nav-tabs.level-2 li a {
    padding: 3px 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin: 5px 10px 10px 0;
}
.graph-tab-panel ul.nav.nav-tabs li {
    width: 25%;
}
.graph-tab-panel ul.nav.nav-tabs li a {
    padding: 10px 15px;
}
.nav>li>a:focus, .nav>li>a:hover {
    background-color: #fff;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: 0;
    border-top: 3px solid var(--brand-color);
}
.card label {
    font-weight: 500;
    font-size: 17px;
}
label.card-lab {
    font-weight: 500;
    font-size: 17px;
}
label.progress-leb {
    font-size: 14px;
    font-weight: 600;
}
.col-sm-6.combo-count {
    text-align: center;
}
.combo-count label {
    text-align: center;
    margin-bottom: 5px;
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #7d7d7d;
}
.combo-count .count {
    font-size: 35px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
}
.emp-stats .combo-count .count {
    margin-bottom: 30px;
}
.emp-stats .combo-count .count.mbot-0{
    margin-bottom: 0;
}
.r-progrss-unit {
    margin-bottom: 25px;
}
.lab-progress label {
    font-size: 16px;
    font-weight: 600;
    margin-right: 5px;
}
.reward-progress-bars .progress-bar-track {
    border-radius: 5px;
    height: 6px;
    background-color: #f2f2f2;
    overflow: hidden;
}
.lab-progress, .progress-value {
    display: inline-block;
}
.lab-progress {
    width: 75%;
}
.progress-value {
    text-align: right;
    width: 23%;
    font-size: 29px;
    font-weight: 700;
}
.reward-progress-bars .progress-bar-track .progress-lenth {
    height: 6px;
    background-color: var(--brand-color);
}
.reward-status .combo-count .count, .reward-status .combo-count span.change.up {
    /*display: inline-block;
    margin: 0;*/
}
.card.reward-status {
    position: relative;
    min-height: auto;
}
a.overview-button {
    position: absolute;
    top: 0;
    right: 15px;
    color: var(--brand-color);
    font-weight: 600;
}
.combo-count span.change {
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}
.combo-count span.change.up {
    color: #00d441;
}
.combo-count span.change.down {
    color: #ff0000;
}
.combo-count.reverse-color span.change.up {
    color: #ff0000;
}
.combo-count.reverse-color span.change.down {
    color: #00d441;
}
.reward-progress-bars {
    margin-top: 15px;
}
.reward-progress-bars span.change {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}
.reward-progress-bars span.change.up {
    color: #00d441;
}
.reward-progress-bars span.change.down {
    color: #ff0000;
}
.download-codes {
	margin-top:30px;
}
.download-codes h3 {
	margin-top:0;
}
ul.download-options {
    padding: 0;
    list-style-type: none;
    margin: 0 -15px;
}
ul.download-options li {
    display: inline-block;
    padding: 15px;
    text-align: center;
    width: 20%;
    font-weight: 700;
}
ul.download-options li i {
    display: block;
    font-size: 70px;
    margin-bottom: 10px;
}
ul.download-options li a {
    display: block;
    padding: 20px;
    border: 1px solid var(--brand-color);
    border-radius: 5px;
    text-decoration: none;
}
.frame-bg {
    height: 160px;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 16.5% 6% 0;
}
.ios .frame-bg {
    padding: 14.5% 7% 0;
}
#expanded .frame-bg {
    height: 270px;
}
.display-box {
    border: 1px solid #bfbfbf;
    padding: 30px 20px 20px 20px;
    margin-top: 30px;
    position: relative;
}
.display-box h2 {
    color: #545454;
    font-size: 15px;
    margin: 0;
    padding: 0 10px;
    display: inline-block;
    top: -8px;
    position: absolute;
    background-color: #fff;
    font-weight: 700;
}
.noti-card {
    background-color: #fff;
    padding: 8px;
}
.ios .noti-card {
    border-radius: 8px;
}
.noti-card .noti-content {
    float: left;
    overflow: hidden;
    width: 270px;
}
.ios .noti-card .noti-content {
    width: 265px;
}
.noti-card .noti-content p {
    color: #000;
    font-size: 10px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
}
.noti-card .noti-content p.noti-title {
    font-weight: 600;
}
.noti-card .noti-content p.noti-text {
    font-weight: normal;
}
.noti-card .noti-img {
    float: right;
}
.noti-card .noti-img img {
    height: 40px;
}
#expanded .noti-card .noti-img img {
    height: auto;
    max-width: 100%;
    margin: 8px 0 0 0;
}
#expanded .ios .noti-card .noti-img img {
    height: auto;
    max-width: 100%;
    margin: 0 0 8px 0;
}

/*dark mode css*/
body.dark {
    color: #f2f2f2;
    background-color: #070e15;
}
body.dark .top-header,
body.dark .powered-by,
body.dark .sidebar,
body.dark .corporate-logo {
    background-color: #070e15;
}
body.dark .top-header{
    box-shadow: 0px -2px 18px 1px #00000082;
}
body.dark .form-control {
    background-color: #0b141c;
    border: 1px solid #0b121a;
}
body.dark .sidebar .powered-by span {
    color: #f2f2f2;
}
body.dark .panel {
    border-color: #131c2a;
    background-color: #131c2a;
}
body.dark .sidebar {
    border-right: 1px solid #0b131c;
}
body.dark .sidebar .nav > li {
    border-bottom: 1px solid #0b131c;
}
body.dark .nav-sidebar.nav > li > a:hover, 
body.dark .nav-sidebar.nav > li > a:focus {
    background-color: var(--panal-title-bg);
}
body.dark .sidebar .powered-by {
    border-top: 1px solid #0b131c;
}
body.dark .display-box {
    border: 1px solid #273a4a;
}
body.dark .display-box h2 {
    color: #ffffff;
    background-color: #131c2a;
}
/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 

@media (min-width: 767px) {
.mcollapse {
    display: block;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body.admin_login {
    padding-top: 60px;
}
.login-card h1.cd-title {
    font-size: 28px;
}
.brand-image {
    padding: 20px 0;
}
.brand-image .powered-by {
    margin-top: 10px;
}
.user span.name {
    display: none;
}
.top-header {
    margin-left: 0;
    padding: 0 15px;
}
img.mg-logo {
    padding: 18px 0;
    width: 180px;
}
.corporate-logo {
    display: inline-block;
    overflow: hidden;
    height: 60px;
}
.logo-menu-btn a.visible-xs {
    display: inline-block !important;
    float: right;
    font-size: 30px;
    padding: 10px 0px 10px 10px;
    color: var(--brand-color);
}
.sidebar .powered-by {
    position: static;
}
.nav-sidebar {
    height: auto;
    padding-bottom: 0;
}
.logo-menu-btn {
    background-color: var(--logo-bg);
    margin: 0 -15px;
    padding: 0 15px;
}
.corporate-logo img {
    max-width: 100%;
    max-height: 100%;
}
.table-responsive {
    border: 0;
}
.employee-list-index .card {
    margin-top: 20px;
}
ul.download-options li{
    width: 50%;
}
.graph-tab-panel.grp-and-status ul.nav.nav-tabs li, 
.graph-tab-panel ul.nav.nav-tabs li {
    width: auto;
}
}
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }