.profile-menu i{margin-left:8px;color:#2c9efa}.navbar-dark{background: #222222!important;}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{/* border-bottom:2px solid #2c9efa; *//* font-weight:500; */}.navbar{padding:0 0 0 10px;border-bottom: 1px solid #343434;position:fixed;width:100%;top:0;z-index: 1000;height: 51px;}.nav-link{padding:15px;font-size:12px;border-bottom:2px solid rgba(44,158,250,0);text-transform: uppercase;}.brand-logo-img{width: 40px;height: 40px;background:url(../../assets/img/geniux-logo-cropped.png) rgba(0,0,0,.43);background-position:center;background-size:70%;background-repeat:no-repeat;border-radius:50px;margin-right:5px;justify-content: center;display: flex;align-items: center;background-color: #dadde1;}.navbar-dark .navbar-brand{display:flex;align-items:center;font-size: 16px;font-weight: 600;color: #fff;font-family: 'Oswald';}body{background: #dadde1;background: url(../img/skin-cloth.jpg);/* background-size: cover; */}.breadcrumb{background: #ffffff;margin-top:15px;color:#fff;font-size: 15px;text-transform: uppercase;box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.14);padding: 14px;border-radius: 0;}.breadcrumb-item a{color: #fff;font-weight:500;}.kpi_0{background: linear-gradient(to right,#2a2a2a,#0000008f) padding-box,linear-gradient(to right,#000000,#3a3a3a) border-box;width:85px;height:85px;min-height:85px;min-width:85px;border: 4px solid #2b2b3800;border-radius:50px;color: #ffffff;display:flex;justify-content:center;margin:0 10px 0 0;font-weight:600;align-items:center;}.kpi_0 span{font-size: 20px;font-family: sans-serif;}.kpi-details .title{color: #fff;margin-bottom:5px;display:block;border-bottom: 3px solid #484848;font-size:12px;padding-bottom:3px;font-weight:500;text-transform:uppercase;}.kpi-contain{display:flex;align-items:center;justify-content:center;background: rgba(0,0,0,0.5);padding: 10px 15px;margin-bottom: 10px;}.kpi-details{display:block;width:100%}.kpi-details button{width:100%!important;font-size:13px;font-weight:600;max-width:100px}.kpi-contain button{width:100%!important;/* opacity: 0.7; */}.filter-cont{display:flex;width:100%;/* background:#1e252f; */border-radius:3px;margin-bottom:10px;}.filters{width:100%;justify-content: center;padding:5px;text-transform:uppercase;font-size:13px;border-radius:0;margin-right: 5px;display: flex;align-items: center;COLOR: #ffffffde;transition:.3s;border:0;background: #484848;position:relative;}.filter-cont .active{background: #2a2929;color: #ffffff;font-weight:600;}.card-2{background: #222222;padding: 0;/* border: 1px solid #a2a5aa; */border-left: 0;margin-right: 15px;}.post-card{background:rgba(17,21,33,.25);padding:7px 5px;border-bottom:1px solid #2a303e;display:flex;justify-content:space-between;align-items:center;border-radius:0;transition:.2s;position:relative;border-right:3px;margin-bottom:5px}.post-img{height:45px;background-size:contain;background-repeat:no-repeat;min-width:45px;max-width:45px;border-radius:55px;position:relative;text-align:center;justify-content:space-between;align-items:center;background-color:#298bea;box-shadow:0 1px 2px 1px rgba(0,0,0,.13)}.post-data{font-size:14px;font-weight:600;width:100%;padding-top:0;min-width:152px;position:relative;padding-left:10px;line-height:15px}.post-data span{display:inline-block;width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:sans-serif;font-weight:200;color:#fff;line-height:12PX}.post-menu{color:#fff;min-width:90px!important;border-radius:3px;border-left:1px solid #2a303e;text-decoration:none;text-align:center;max-width:131px;display:block;width:100%;min-width:70px;max-width:40px;font-family:sans-serif;font-size:11px;text-transform:uppercase;position:absolute;right:0}.post-menu .btn{font-size:10px;border-radius:0;text-transform:uppercase;position:relative;right:10px}.btn{border-radius:0;font-weight: 500;text-transform: uppercase;font-size: 14px;}.post-data>span:nth-child(2){font-size:11px}.post-card-badge{width:20px;height:20px;display:flex;position:absolute;background:#ef5350;border-radius:60px;right:7%!important;color:#fff;font-size:11px;font-weight:600;justify-content:center;align-items:center;left:64%}.post-card .post-card-badge{box-shadow:inset 1px -2px 2px 2px rgba(255,249,249,.08),-1px 2px 1px 1px rgba(0,0,0,.22);position:absolute;top:6px;left:0}.kpi-details .title i{margin-left:5px;opacity:.9}.modal-box{height:100vh;width:100%;position:fixed;z-index:99999;background:#11171f;display:none}.modal-box-header{width:100%;height:50px;border-bottom:1px solid #1e252f;font-size:18px}.modal-box-menu{color:#fff;width:100%;display:flex;align-items:center}.modal-box-menu .close-btn{margin:10px;font-size:30px}.modal-box-title{font-size:16px;font-weight:500}.modal-nav .link-lists{position:relative;cursor:pointer;color:#fff;padding:5px 0;font-size:13px;width:100%;transition:.2s}.modal-nav{padding-top:10px;border:1px solid #1e252f;height:85vh}.graph-container,.modal-box-container{padding:20px}.modal-nav ul{display:block;width:100%;list-style:none;flex:1}.modal-container{padding:10px}.table thead th{color:#fff;border:1px solid #1e252f;background:#2a303e}.table td,.table th{font-size:13px;padding:7px;vertical-align:top;border-top:0;color:#fff;border:1px solid #1e252f}.search-box{max-width:300px;width:100%;display:flex;margin-bottom:10px;justify-content:space-between;align-items:center;margin-top:1px;font-family:'Noto Sans',sans-serif;font-size:13px}.search-input{width:100%;border:0;border-bottom:2px solid #222323;background:#143b5400;padding:3px 10px;color:#ffff}.src-icon{float:right;position:relative;top:0;width:35px;height:35px;background:#222323;border-radius:50px;text-align:center;color:#fff;min-width:35px;margin:0 0 0 10px;transition:.2s;display:flex;align-items:center;justify-content:center}.search-input:focus{border-bottom:2px solid #2a8ceb}.header-modal{align-items:center;display:flex;color:#fff;display:flex;justify-content:space-between;/* background: white; */margin: 10px 0px;/* box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.14); */border-radius: 5px;padding: 7px 8px 7px 10px;}.header-modal h1{font-size:17px}.header-modal h1 i{margin-left:5px}.modal-nav .link-lists .active{background:rgba(0,0,0,.21);border-left:2px solid #2a8ceb;padding-left:5px}.modal-nav .link-lists:hover{background:rgba(13,18,24,.26);padding-left:5px}.link-lists a{color:#fff}.menu-nav .active{background:rgba(0,0,0,.35);border-left:2px solid #2c9efa;padding-left:5px}.link-lists a:hover{text-decoration:none}.nameth{max-width:300px;width:300px}.poststh{max-width:70px;width:70px}.interetstd{max-width:150px;width:150px}.link-lists a span{position:absolute;right:10px;background:#404552;min-width:25px;height:20px;border-radius:50px;text-align:center;line-height:20px;font-size:11px;font-weight:500}table .btn{font-size:12px}.actionsth{max-width:95px;width:95px}.menu-nav{padding:0 10px 10px}.line-divider{width:100%;margin:10px 0;border-bottom:1px solid #2a303e}.dateth{width:150px}.profile-menu{/* background: rgb(30 37 47); */}.container-fluid{padding:0}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
outline: none !important;
}

.ld-ring {
  width: 1em;
  height: 1em;
  position: relative;
  color: inherit;
  display: inline-block;
/* 
  &:before
    content: "â—Ž"
    display: block
    visibility: hidden
  */
}
.ld-ring:after{
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: " ";
  display: inline-block;
  background: center center no-repeat;
  background-size: cover;
}

.ld-ring:after {
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  /* border-width: 0.15em; */
  -webkit-background-clip: padding-box;
  border-color: currentColor currentColor currentColor transparent;
  box-sizing: border-box;
}


@keyframes ld-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes ld-spin {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.ld.ld-spin {
  -webkit-animation: ld-spin 1s infinite;
  animation: ld-spin 1s infinite;
}


.applyScroll::-webkit-scrollbar-track
{
	border-radius: 0px;
}

.applyScroll::-webkit-scrollbar
{
	width: 4px;
	height: 2px;
}

.applyScroll::-webkit-scrollbar-thumb
{
	border-radius: 50px;
}
.applyScroll:hover::-webkit-scrollbar-thumb
{
	border-radius: 50px;
	background-color: #ffffff36;
}
.kpi-contain-2{

padding: 10px;

display: flex;

/* justify-content: space-between; */

align-items: center;

transition: 0.2s;

margin-bottom: 10px;
}
.kpi-contain-2 div{

}
.kpi-contain-2 .icon{

width: 65px;

height: 65px;

min-height: 65px;

min-width: 65px;

background: #00000052;

border-radius: 50px;

display: flex;

justify-content: center;

align-items: center;

color: #fff;

font-size: 20px;

margin-right: 10px;
}   
.kpi-contain-2 div:nth-child(2){line-height: 16px;} 
    .kpi-contain-2 div:nth-child(2) span{

color: #fff;

font-size: 12px;

display: block;

line-height: 17px;

text-transform: uppercase;

margin-top: 9px;
}
.kpi-contain-2 div:nth-child(2) span:nth-child(1){

font-size: 21px;

font-weight: 600;

margin-top: 0;
}
.kpi-contain-2 .icon i{
    
}
.sidebar{
z-index: 9;
position: fixed;

height: 100vh;

background: #2A2A2A;

top: 51px;

width: 210px;

border-right: 1px solid #3c3c3c;

overflow: hidden;
}
.sidebar-menu{

display: block;

width: 100%;
}

.sidebar-menu > a {display: block;padding: 10px 20px;color: #9b9b9b;font-weight: 500;font-size: 12px;text-transform: uppercase;margin: 10px 0px;text-decoration: unset!important;}
.sidebar-menu:nth-child(1) a:nth-child(1){
margin-top: 0px;
}
.sidebar-menu{

}
.sidebar-menu .submenu > a{

display: flex;

align-items: center;

color: #b1b1b1;

font-weight: 600;

padding: 6px 9px;

overflow: hidden;

font-size: 12px;

/* font-family: sans-serif; */

text-transform: uppercase;

border-bottom: 1px solid #373737;

text-decoration: none;

position: relative;
}
.sidebar-menu .submenu > a{
    
}
.sidebar-menu .submenu > a span{

position: absolute;

width: 2px;

height: 46px;

background: #393939;

margin-left: 12px;
}
.sidebar-menu .submenu > a:hover, .sidebar-menu .submenu ul li:hover{
    background: #222222;
}
.sidebar-menu .submenu > a i{

/* color: #fff; */

width: 26px;

font-size: 13px;

height: 26px;

display: flex;

justify-content: center;

align-items: center;

background: #222222;

border-radius: 50px;

margin-right: 10px;

z-index: 1;

border: 2px solid #393939;
}
.sidebar-menu .active > a i{
    background: #00a651;
}
.sidebar-menu .active ul {
    height: auto!important;
    display: block;
    overflow-y: unset!important;
}
.sidebar-menu .active ul .active{
  background: #222222;
}
.sidebar-menu .submenu ul {

padding: 0;

height: 0px;

display: block;

overflow-y: hidden;

margin: 0;
}
.sidebar-menu .submenu ul li div{
    
width: 13px;
    
height: 13px;
    
background: #393939;
    
position: absolute;
    
border-radius: 50px;
    
left: 10px;
    
margin: 6px;
}
.sidebar-menu .submenu ul li div span:nth-child(1){

height: 70px;

display: block;

width: 2px;

background: #393939;

position: absolute;

top: -20px;

left: 5px;
}
.sidebar-menu .submenu ul li div span:nth-child(2){

height: 2px;

display: block;

width: 23px;

background: #393939;

position: absolute;

left: 0px;

margin-top: 6px;
}
.sidebar-menu .submenu ul li{

list-style: none;

padding: 3px 10px 3px 50px;

/* min-height: 8px; */

cursor: pointer;

display: flex;

text-transform: uppercase;

position: relative;

overflow-y: hidden;

align-items: center;

background: #2a2a2a;

border-bottom: 1px solid #393939;
}
.sidebar-menu .submenu ul li a{

text-decoration: none;

min-height: 26px;

display: flex;

color: #9a9a9a;

align-items: center;

line-height: 18px;

font-size: 12px;

font-weight: 500;

text-transform: capitalize;
}

.sidebar-menu .active > a{
    color: #fff!important;
}
.side-footer{
    border-top: 1px solid #3c3c3c;
    position: absolute;
    bottom: 76px;
    box-shadow: -2px -9px 8px 0px rgb(42 42 42);
    background: #222222;
    z-index: 9;
}
.side-footer a{

padding: 0px 20px;

}
.sidebar-menu .active {
    background: #1f1f20;
}
.sidebar{

}
.sidebar .banner{

display: flex;

align-items: center;

border-bottom: 1px solid #303030;

padding: 8px 7px;

background: #222;

cursor: pointer;
}
.sidebar .banner div{

/* display: flex; */
}
.sidebar .banner .img{

background-image: url(../img/speedometer.png);

width: 55px;

height: 55px;

background-size: cover;

margin-right: 9px;

border-radius: 50px;

border: 2px solid #00a651;
}
.sidebar .banner .img span{width: 13px;animation: opacity-badge 0.8s infinite;-webkit-animation: opacity-badge 0.8s infinite;height: 13px;background: #F44336;border-radius: 50px;/* border: 2px solid #484848; */position: relative;top: -3px;left: -3px;}
@keyframes opacity-badge {
0% {
    transform: scale(0.5);
}
50% {
    transform: scale(1);
}
100% {
    transform: scale(0.5);
}
}
.sidebar .banner div span{

display: block;

line-height: 18px;

color: #fff;

font-size: 13px;

font-weight: 600;
}
.sidebar .banner div span:nth-child(2){

font-weight: 600;

font-size: 14px;
}

span {
}
.container {
padding-left: 130px;
}
.main-container{padding-top: 31px;margin-left: 226px;margin-right: 20px;position: relative;}
#graphContain {width: 100%;position: relative;}
.graph-title {color: #ffffff;text-transform: uppercase;font-size: 16px;font-weight: 600;padding-left: 15px;display: flex;justify-content: space-between;align-items: center;}
.filter-btn {
float: right;
width: 30px;
height: 30px;
border-radius: 50px;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
transition: 0.2s;
cursor: pointer;

}
.menuu {
    display: none;
    background: #fff;
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 0px;
    box-shadow: 0 0 3px 2px rgba(41, 42, 44, 0.61);
    transition: 0.2s;
    z-index: 9999999;
  }
  .menuu > ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .menuu > ul > li {
    padding: 13px 20px;
    text-decoration: none;
    font-size: 15px;
  }
  .menuu > ul > li a{
    text-decoration: none;
    width: 143px;
    display: block;
    text-align: center;
    font-weight: 600;
    color: #11171f;
    text-transform: none;
}
.bordB{
    border-bottom: 1px solid #e5e6e8;
}
.menuu > ul > li:active {
    background: #e8e8e8;
  }
.filters {
cursor: pointer;
}
.breadcrumb {
position: relative;
}
.breadcrumb .orderBTN{

}
.filters:hover{background: #3d3d3d;/* opacity: 0.7; */}
.orderbtn{
position: absolute;
right: 10px;
padding: 7px;
font-size: 11px;
font-weight: 600;
top: 9px;
margin: 0px;
border-radius: 3px;
line-height: 13px;
width: 100px;
}
.postcard{

margin-bottom: 10px;

background: #ffffff;

box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.14);

transition: 0.5s cubic-bezier(0.4, 1.03, 0.45, 0.94);

border-radius: 5px;

z-index: 1;
}
.postcard-head{

width: 100%;

border-bottom: 1px solid #dadde1;

/* padding: 5px; */

display: flex;

justify-content: space-between;

padding-bottom: 5px;

align-items: center;

padding: 8PX 0PX;
}
.postcard-head .card-pp{

display: flex;

justify-content: center;

align-items: center;
}
.postcard-head .card-details{

display: block;
}
.postcard-head .card-details span{

display: block;

line-height: 16px;

font-size: 14px;

font-family: sans-serif;

font-weight: 600;
}
.postcard-head .card-details span:nth-child(2){

font-weight: 400;

font-size: 12px;
}
.postcard-head .card-menu{

position: relative;
}
.postcard-head .card-menu > span{
padding: 12px;
opacity: 1;
font-size: 20px;
transition: 0.2s;
cursor: pointer;
}
.postcard-head .card-menu span:hover{
opacity: 0.7;
}
.postcard-body{
}
.postcard-foot{

display: flex;

justify-content: space-between;

align-items: center;

border-top: 1px solid #dadde1;

/* padding: 0px 5px; */

height: 65px;
}

.header-modal h1 {
font-size: 17px;
}
.header-modal h1 {
font-size: 13px;
color: #000;
margin-bottom: 0px;
text-transform: uppercase;
}

.mask{
  
position: fixed;
  
height: 100vh;
  
background: #000000;
  
width: 100%;
  
top: 0;
  
z-index: 2;
  
opacity: 0.4;
}
#loginForm, .myform {color: #000;width: 100%;max-width: 430px;margin: 0 auto;/* border: 1px solid #c1c1c1; */padding: 0;background: #000000b0;position: relative;z-index: 9;}
#loginForm label, .myform label {text-transform: uppercase;font-size: 12px;color: #fff;}

#errorMsg, .errorMsg {
text-align: center;
}
#errorMsg span, .errorMsg span {
font-weight: 500;
font-size: 14px;
}
#errorMsg .ld-spin, .errorMsg .ld-spin{

position: relative;

top: 2px;
}
.input-group-text {
font-size: 13px;
color: #343a40;
background-color: #dadde1;
border: 1px solid #c1c1c1;
border-radius: 0;
}
.form-control {
height: calc(1.5em + .75rem + 8px);
font-size: 13px;
border: 1px solid #c1c1c1;
border-radius: 0;
}
textarea {/* height: 15vh!important; */}
.transparentbg{
    background: rgba(0,0,0,0.5)!important;
}
.modal-header {padding: 8px 3px 8px 15px;border-radius: 0px;align-items: center;background: #2f2f2f;border-bottom: 1px solid #2f2f2f;}
.modal-header .modal-title{

font-size: 16px;

text-transform: uppercase;

color: #fff;
}
.modal-header .close {margin: 0px;padding: 0px;/* background: #000000; */width: 35px;height: 35px;color: #fff;border-radius: 50px;justify-content: center;display: flex;align-items: center;}
.modal-header .close span {
line-height: 0px;
margin-top: -7px;
text-shadow: none;
}
.modal-header .close:hover {
background: #00000078;
}
.modal-content {border-radius: 3px;background: #232323;border: 3px solid #2f2f2f;}
.preloader{

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

position: fixed;

z-index: 99999999;

background: #222222;

width: 100%;

color: #fff;
}
.preloader .ld-spin{
    
font-size: 35px;
}
.weather-card{

}
.weather-card > div:nth-child(1){

height: 194px;

width: 100%;

background: url(../img/building.jpg);

background-size: cover;

color: #fff;

padding: 15px 20px;
}
.weather-card > div:nth-child(1) span{display: block;line-height: 33px;}
.weather-card > div:nth-child(2){

display: flex;

justify-content: center;

background: #1a1b1c9e;

margin-top: -65px;

border-bottom: 2px solid #e1e1e11a;
}
.weather-card > div:nth-child(1) i{
                        
position: absolute;
                        
right: 10%;
                        
top: 48px;
                        
animation: moveclound 0.8s infinite;
                        
-webkit-animation: moveclound 5s infinite;
                        
font-size: 35px;
                        
animation: moveclound 5s infinite;
}
@keyframes moveclound {
  0% {
      transform: scale(1);
      /* top: 50px; */
      /* right: 12%; */
  }
  50% {
      /* transform: scale(1); */
      /* top: 48px; */
      /* right: 10%; */
      transform: scale(1.2);
  }
  100% {
      transform: scale(1);
      /* top: 50px; */
      /* right: 12%; */
  }
}
.rotatesun{
  animation: rotatesun 8s infinite;
                        
-webkit-animation: rotatesun 8s infinite;
}
@keyframes rotatesun {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.weather-card > div:nth-child(1) .city{
    
font-weight: 700;
    
font-size: 17px;
    
text-shadow: 0 2px 9px black;
}
.weather-card > div:nth-child(1) .temp{
    
font-size: 38px;
    
font-weight: 700;
    
text-shadow: 0 0 4px black;
}
.weather-card > div:nth-child(1) .date{
    
display: block;
    
text-shadow: 0 2px 3px black;
    
font-size: 14px;
    
font-weight: 500;
}
.weather-card div:nth-child(2) div{

width: 100%;

padding: 3px 10px;

text-align: center;

border-right: 2px solid #e1e1e114;
}
.weather-card div:nth-child(2) div:nth-child(3){

border-right: 0;

}
.weather-card div:nth-child(2) div span{

display: block;

color: #fff;

font-size: 17px;

font-weight: 700;

line-height: 17px;
}
.weather-card div:nth-child(2) div .temp{
    margin-bottom: 2px;
}
.weather-card div:nth-child(2) div .date{

font-size: 11px;

font-weight: 300;

font-family: sans-serif;
}
.weather-card div:nth-child(2) div .icon{max-height: 22px;margin-bottom: 5px;}
.weather-card div:nth-child(2) div .icon{

}




.single-chart {

justify-content: space-around;

display: flex;

}
  
  .circular-chart {
    display: block;
    max-width: 90px;
    height: 100%;
    width: 90px;
  }
  
  .circle-bg {
    fill: none;
    stroke: #171717;
    stroke-width: 3px;
  }
  
  .circle {
    fill: none;
    stroke-width: 4px;
    stroke-linecap: butt;
    animation: progress 1s ease-out forwards;
  }
  
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
 
  
  .circular-chart.blue .circle {
    stroke: #e1e1e1;
  }
  
  .percentage {
    font-family: sans-serif;
    fill: #fff;
    font-size: 6px;
    text-anchor: middle;
    font-weight: 700;
    transition: all .2s ease-in-out;
    cursor: pointer;
  }
.piecontainer{

display: flex;
}
.piecontainer h5{

/* background: beige; */

/* border: 1px solid #38393b; */

color: #fff;

text-align: center;

padding: 10px 10px;

background: #171717;

margin-top: 10px;

font-size: 13px;
}
.piecontainer h5 i{
    
font-size: 20px;
}
.piecontainer .piebox{

width: 100%;

text-align: center;

justify-content: center;

padding: 26px 10px;
}
.progress-container{

margin-bottom: 15px;
}
.progress-container .title{

color: #e4e4e4;

display: flex;

justify-content: space-between;

font-size: 13px;
}
.progress-container .title span{
    
}
.progress-container .progress{
border-radius: 0px;
}
#graphContain .row{
    margin: 0px;
}
.progress {
    background-color: #ffffff1c;
}
.loading-div{

width: 100%;

display: flex;

justify-content: center;

align-items: center;

height: 307px;
}
.loading-div .ld-spin{
    
color: #fff;
    
font-size: 35px;
}
.donut-container{
    padding: 15px
}
.kpi-contain-2:hover{
    opacity: 0.8;
    cursor: pointer;
}
.square-cards{

display: flex;

justify-content: space-between;

align-items: center;
}
.square-cards > div{

display: flex;

justify-content: center;

align-items: center;

margin: 10px;

width: 100%;

height: 300px;

border: 1px solid #fff0;

background: #efefef;
}
.square-cards > div div{
  width: 100%;
  padding: 10px;
}

.square-cards > div div span{

text-align: center;

display: block;
}
.square-cards > div div span:nth-child(1){
    
font-size: 17px;
    
/* color: #fff; */
    
text-transform: uppercase;
}
.square-cards > div div span:nth-child(2){
    
color: #1b1c1d;
    
font-size: 44px;
}
.square-cards > div div .btn{

}
.mini-stat{
    
background: #efefef;
    
padding: 15px;
}
.mini-stat div{

text-align: center;
}
.mini-stat div h1{

border-bottom: 1px solid #cbcbcc;

padding-bottom: 10px;

font-size: 25px;

text-transform: uppercase;
}
.mini-stat div p{
    
color: #7b7b7b;
}
#loginForm{

}
#loginForm .banner{

height: 94px;

display: flex;

justify-content: center;

align-items: center;

border-bottom: 10px solid #0060c7;
}
#loginForm .banner h4{

display: flex;

justify-content: center;

align-items: center;

position: relative;

width: 100%;

text-align: center;
}
#loginForm .banner h4 span{

width: 85%;

border-bottom: 1px solid #0000001a;

position: absolute;

z-index: 1;
}
#loginForm .banner h4 div{

background: #007bff;

font-size: 17px;

z-index: 99;

padding: 10px 15px;
}
.dropdown-item {
  padding: 13px 5px 15px 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
}
.dropdown-divider {
  border-top: 1px solid #292929;
  margin: 0;
}
.dropdown-menu {
  
background-color: #363535f0;
  
border-radius: 3px;
  
padding: 0;
  
margin: 5px;
  
box-shadow: 0px 1px 7px 3px rgb(0 0 0 / 30%);
  
border: 0;
}
.table-2{

width: 100%;

color: #fff;

background: #2f2f2f;

font-size: 15px;

padding: 10px 40px;

display: block;

min-height: 228px;
}
.table-2 th{

text-transform: uppercase;
}
.table-2 td{

padding: 3px 10px!important;
}
.table-2 td, .table-2 th{

padding: 5px 10px;

/* width: 66%; */
}
.table-2 tr{
    
}
.mytable{

color: #fff;
}
.mytable div{

display: flex;

justify-content: space-between;

padding: 2px 10px;

border-bottom: 1px solid #484848;
}
.mytable div span{

font-size: 13px;
}
.mytable div span b{
    
}
.readmore{

display: flex;

justify-content: center;

align-items: center;

padding: 10px;

background: #2a2a2a;

border-bottom: 1px solid #393939;
}
.readmore button{
  
border: 0;
min-width: 100px;
font-size: 14px;
  
background: #0a904b;
  
color: #fff;
border-radius: 3px;
padding: 5px 11px;
}
.readmore button .ld-spin{
  position: relative;
  top: 2px;
}
footer{

width: 100%;

background: #222222;

border-top: 1px solid #343434;

    bottom: 0px;
    position: fixed;
}
footer div{

padding: 18px;

padding-left: 220px;
}
footer p{
  
margin: 0;
  
color: #fff;
  
font-size: 14px;
}
footer a{
  
font-weight: 600;
}
.navbar-brand span{
  color: #b3b3b3;
  font-weight: 300;
  letter-spacing: 1px;
}
.amchart text{
  fill:#cacaca;
  font-size: 12px;
}
.scroll-container{
  
position: fixed;
  
right: 0;
  
bottom: 0;
  
margin: 30px;
}
.scrollbtn{

border: 0;

color: #fff;

background: #2196f3;

padding: 9px;

border-radius: 40px;

min-width: 150px;

box-shadow: 0px 1px 7px 3px rgb(0 0 0 / 32%);

animation: scrollblink 1s infinite;

-webkit-animation: scrollblink 1s infinite;

font-size: 13px;
}
.highcharts-figure, .highcharts-data-table table {
  min-width: 360px; 
  max-width: 800px;
  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-exporting-group{
  display:none!important;
}
.highcharts-credits{
  display: none;
}
.highcharts-a11y-proxy-button{
  color: #fff;
}
.highcharts-point{
  stroke: #0000!important;
}
.highcharts-xaxis-labels text, .highcharts-yaxis-labels text{
  fill: #a9a9a9!important;
}
.highcharts-tick{
  stroke: #393939!important;
}
.highcharts-axis-line{
  stroke: #393939!important;
  stroke-width: 1!important;
}
.highcharts-grid-line{
  stroke: #292929!important;
  stroke-width: 1!important;
}
#npsgraph  svg > g.highcharts-series-group > g.highcharts-series.highcharts-series-0.highcharts-column-series.highcharts-color-0.highcharts-tracker > rect:nth-child(2){
  fill: #00a651!important;
}
#npsgraph  svg > g.highcharts-series-group > g.highcharts-series.highcharts-series-0.highcharts-column-series.highcharts-color-0.highcharts-tracker > rect:nth-child(3){
  fill: #f44336!important;
}
#npsgraph  svg > g.highcharts-series-group > g.highcharts-series.highcharts-series-0.highcharts-column-series.highcharts-color-0.highcharts-tracker > rect:nth-child(4){
  fill: #00a651!important;
}
#npsgraph  svg > g.highcharts-series-group > g.highcharts-series.highcharts-series-0.highcharts-column-series.highcharts-color-0.highcharts-tracker > rect:nth-child(5){
  fill: #00a651!important;
}
.highcharts-tooltip-box{
  fill: #393939!important;
  STROKE: #393939!important;
}
.highcharts-tooltip text, .highcharts-tooltip tspan{
  font-size: 13px!important;
  fill: #fff!important;
}
.highcharts-tooltip tspan{
  font-size: 14px!important;
  fill: #fff!important;
}
.leftspan{

color: #fff;

font-size: 15px;

position: absolute;

right: 0;

top: 0;

margin: 11px 14px;

text-align: right;
}
.leftspan span{
  font-family: sans-serif;
line-height: 2px;
  
display: block;
  
opacity: 0.5;
  
font-size: 11px;
}
.grdBG {
  background: #1F1F20;
  background: linear-gradient(139deg, rgb(31, 31, 32) 50%, rgb(26, 27, 28) 50%);
  transition: 0.2s;
  cursor: pointer;
}
.digital_text {
  font-family: 'digital-clock-font', sans-serif;
  font-family: 'Oswald';
  font-size: 78px;
  position: relative;
  margin: 0px;
  margin-bottom: -46px;
  /* margin-top: -25PX; */
  text-shadow: 2px 2px 4px #000000;
  padding: 24px;
}
.legendDiv {
  text-align: center;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 35px;
  font-size: 14px;
}
@keyframes scrollblink {
  0% {
     background: #008eff;
  }
  50% {
      background: #0061af;
  }
  100% {
      background: #2196f3;
  }
  }


  .table-3{

    width: 100%;
    
    color: #fff;
    
    background: #222222;
    
    /* display: block; */
    }
    .table-3 tr{
    
    }
    .table-3 th, .table-3 td{
    
    padding: 8px;
    
    font-size: 13px;
    }
    .table-3 th{
    
    background: #222323;
    }
    .table-3 td{
    
    }
    .table-3 tr:nth-child(even) {
      background: #272727;
    }
    .ratings{
    
display: flex;
    
align-items: center;
    }
    .ratings i{
      
    /* opacity: 0.4; */
      
    color: #505050;
    }
    .nav-tabs {
      border-bottom: 1px solid #2f2f2f;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
      background-color: #2f2f2f;
      color: #ffffff;
    }
    .nav-link {
      /* border: 0!important; */
      border-radius: 0!important;
    }
    .nav-tabs .nav-link {
      border: 0;
      background: #2f2f2f54;
      color: #ffffffdb;
    }
    .nav-tabs .btn{
      position: absolute;
      right: 0;
    }
    
    .comment-card{
    
    /* border-bottom: 1px solid #a9a9a9; */
    
    padding: 15px;
    
    }
      .comment-card .c-card{
      
      display: flex;
      
      justify-content: space-between;
      
      position: relative;
      }
      .comment-card div{
      
      display: flex;
      
      justify-content: space-between;
      
      align-items: center;
      }
      .comment-card div .c-image{
      
        width: 45px;

        height: 45px;

        border-radius: 50px;

        background: #2f2f2f;

        color: #fff;

        justify-content: center;

        align-items: center;

        display: flex;

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;
      }
      .comment-card .c-details{
      transition: 0.2s;
      display: block;
      margin-left: 10px;
      }
      .comment-card .c-details:active {
        opacity: 0.5;
      }
      
      .comment-card .c-details span{
      
    color: #;
      
    display: block;
      
    line-height: 15px;
      
    font-size: 14px;
      
    font-family: sans-serif;
      
    color: #fff;
      }
      .comment-card .c-details span:nth-child(2){
      
      font-weight: 600;
      
      opacity: 0.7;
      
      font-size: 13px;
      }
      .comment-card .c-menu{opacity: 0.7;border-radius: 50px;transition: 0.2s;cursor: pointer;color: #2f2f2f;background: #dadde1;padding: 5px 16px;}
      .comment-card .c-menu span{
        
    font-size: 14px;
      }
      .comment-card .c-menu:hover{
        background: #fdfdfe;
        }
      .comment-card .c-comment{
      
    margin-left: 22px;
      
    border-left: 1px dotted #3f3f3f;
      
    /* border-bottom: 1px dotted #a9a9a9; */
      
    padding: 8px 0px 8px 5px;
      
    margin-right: 11px;
      }
      .comment-card .c-comment .para{
      
    font-family: sans-serif;
      
    background: #2f2f2f;
      
    display: block;
      
    min-width: 220px;
      
    padding: 10px;
      
    border-radius: 3px;
      
    position: relative;
      
    margin-right: 0;
      
    color: #fff;
      }
      .comment-card .c-comment .para .attachments{
    
    width: 100%;
    
    height: 125px;
    
    background-size: cover;
    
    background-repeat: no-repeat;
    
    transition: 0.2s;
    cursor: pointer;
    background-position: center;
    
    }
    .comment-card .c-comment .para .attachments:hover{
      opacity: 0.7;
    }
      .comment-card p #par{
        font-family: sans-serif;
      }
      .c-comment .date{
        font-family: sans-serif;
        font-weight: 300;
        margin-bottom: 3px;
        display: flex;
        align-items: center;
        /* font-style: italic; */
        font-size: 11px;
        margin-top: 10px;
        text-transform: uppercase;
      }
    
      .c-comment .date b{
        font-family: sans-serif;
        font-weight: 400;
      }
      .c-comment .date span i:active {
        background: #dadde1;
        }
      .c-comment .date span:nth-child(2){
        font-family: sans-serif;
        position: absolute;
        right: 0;
        bottom: 0px;
        margin: 5px 4px;
      }
      .c-comment .date span:nth-child(1){font-family: sans-serif;}
      .comment-container{
        
    position: absolute;
        
    bottom: 0;
        
    width: 100%;
      }
      .comment-box{
      
    display: flex;
      
    align-items: center;
      
    justify-content: space-between;
      
    background: #fdfdfe;
      
    border-top: 1px solid #232323;
      
    background: #2f2f2f;
      }
      .comment-box textarea{
          
    margin: 10px 0px;
          
    width: 100%;
          
    border: 1px solid #494949;
          
    border-radius: 0;
          
    color: #fff;
          
    background: #232323;
          
    min-height: 70px;
          
    font-family: sans-serif;
          
    transition: 0.3s;
          
    padding: 10px 20px;
          
    /* height: unset!important; */
      }
      .comment-box .icons{
          
      /* position: absolute; */
          
      right: 0;
          
      display: flex;
          
      margin: 10px;
      }
      
      .comment-box .icons i{
          
      display: flex;
      
      font-size: 22px;
         
      width: 50px;
          
      height: 50px;
          
      background: #2196f3;
          
      color: #fff;
          
      align-items: center;
          
      justify-content: center;
          
      transition: 0.2s;
          
      border-radius: 71px;
      }
      .comment-box .icons i:active{
        opacity: 0.7;
      }
      .comment-box  > div{
      
      width: 100%;
      
      text-align: center;
      
      position: relative;
      }
      .comment-box  > div p{
      
      position: absolute;
      
      top: -20px;
      
      width: 100%;
      
      left: -45px;
      
      font-family: sans-serif;
      
      font-weight: 600;
      
      opacity: 0.9;
      
      font-size: 12px;
      }
      .comment-box  > div p span{
        font-family: sans-serif;
      }
      .comment-box > div > div{
      
      display: flex;
      
      width: 100%;
      
      position: relative;
      
      align-items: center;
      
      justify-content: space-between;
      }
      .uuimage {
        margin: 10px;
        width: 45px;
        min-width: 45px;
        height: 45px;
        display: flex!important;
        border-radius: 50px;
        background: #dadde1;
        align-items: center;
        background-size: cover;
        justify-content: space-around;
        background-position: center;
        background-repeat: no-repeat;
    }
    .catego{
    
    }
    .catego div{
    
    display: flex;
    
    align-items: center;
    
    position: relative;
    
    background: #2d2d2d;
    
    padding: 5px;
    
    margin-bottom: 10px;
    
    cursor: pointer;
    
    transition: 0.2s;
    } 
    .catego div:hover{
      opacity: 0.7;
    }
    .catego i{
    
    color: #484848;
    
    margin-right: 10px;
    
    font-size: 17px;
    
    padding: 3px;
    }
    .catego span{
    
    color: #e8e8e8;
    
    font-size: 12px;
    
    text-transform: uppercase;
    
    font-family: sans-serif;
    
    font-weight: 700;
    }
    .catego div span:nth-child(3){
                            
    position: absolute;
                            
    right: 5px;
                            
    font-size: 11px;
                            
    background: #484848;
                            
    width: 20px;
                            
    height: 20px;
                            
    color: #fff;
                            
    display: flex;
                            
    justify-content: center;
                            
    align-items: center;
                            
    border-radius: 50px;
    }
    .tbbuttons .btn{
      
    margin-left: 3px;

    border: 0;
    }
    .ratings span {
      background: #2f2f2f;
      width: 30px;
      height: 30px;
      display: flex;
      border-radius: 50px;
      justify-content: center;
      align-items: center;
      margin-left: 9px;
      font-size: 13px;
  }
  .kpis-containers{

    display: flex;
    
    width: 100%;
    }
    .kpis-containers .kpisboxs{
    
    text-align: center;
    
    margin: 10px;
    
    width: 100%;
    
    padding: 14px;
    
    background: #f3f3f3;
    
    color: #000;
    
    opacity: 0.9;
    }
    .kpis-containers .kpisboxs span{
        
    display: block;
    }
    .kpis-containers .kpisboxs span:nth-child(1){
        
    text-transform: uppercase;
        
    font-weight: 600;
        
    font-size: 14px;
    }
    .kpis-containers .kpisboxs span:nth-child(2){
        
    font-size: 20px;
    }

    .modal label{
        color: #fff;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        display: block;
        margin: 10px 0px 3px 0px;
    }

    .tableform {
        color: #fff;
        font-family: sans-serif;
        font-size: 14px;
    }
    .tableform .trow {
        display: flex;
        margin-bottom: 1px;
    }
    .tableform .trow .headers {
        min-width: 154px;
        font-weight: 600;
        font-size: 13px;
        color: #dcdcdc;
    }
    .tableform .comment{
        margin: 0px;
        padding: 10px 10px 10px 13px;
        background: #2f2f2f;
        position: relative;
    }

    .image-upload-wrap {
        margin-top: 0px;
         border: 1px dotted #285833;
        position: relative;
        transition: 0.3s;
        height: 184px;
        display: flex;
        background-color: #00000014;
    }
    .ticket_attachment {
        width: 100%;
        height: 125px;
        background-size: cover;
        background-repeat: no-repeat;
        transition: 0.2s;
        cursor: pointer;
        background-position: center;
        border: 2px dotted #2858;
    }

    .file-upload-input {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100% !important;
        outline: none;
        opacity: 0;
        cursor: pointer;
        border-radius: 0 !important;
        background: unset !important;
        border: 0 !important;
        color: unset !important;
        font-weight: unset !important;
        font-size: unset !important;
    }

    .drag-text {
         text-align: center;
         display: flex;
         align-items: center;
         width: 100%;
         justify-content: center;
    }

    .drag-text h3 {
        font-weight: 100;
        text-transform: uppercase;
        color: #a4a4a4;
        padding: 72px 30px;
        font-size: 16px;
        text-align: center;
        font-weight: 500;
    }
    .file-upload-content {
        display: none;
        text-align: center;
        position: relative;
        height: 184px;
    }
    .file-upload-image {
        max-height: 160px;
        max-width: 100%;
        margin: auto;
        padding: 0px;
    }
    .image-title-wrap {
         padding: 0 15px 15px 15px;
        color: #fff;
        border: 1px solid #0752a500;
        font-size: 18px;
        width: 100%;
        background: #00000024;
        position: absolute;
        display: flex;
        top: 0;
        height: 100%;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        transition: 0.3s;
    }

    .form2 .form-control {
        border: 1px solid #2f2f2f;
        background: #1a1a1b;
        color: #fff;
    }
    .navbar-brand span {
        color: #b3b3b3;
        font-weight: 300;
        letter-spacing: 1px;
    }

    .panel-default {
        box-shadow: 0px 0px 3px 2px rgb(0 0 0 / 6%);
        padding: 0;
        width: 100%;
        border-radius: 2px;
        margin-bottom: 5px;
        border: 1px solid #1f1f20 !important;
        margin-top: 15px;
        position: relative;
    }
    .panel-heading {
        padding: 10px 15px;
        border-bottom: 2px solid #171717;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
        background-color: #1f1f20;
        color: #fff;
    }
    .panel-body{
        background: rgb(0 0 0 / 33%);
    }
    .percent_span {
        font-size: 36px;
        position: absolute;
        top: 24px;
        font-family: digital-clock-font;
    }
    .greencolor {
        color: #7CB342;
    }

    .redcolor {
        color: #C43025;
    }
    .declarations {
        display: none;
    }
    .declarations {
        display: none;
    }

    .decl:active {
        .declarations {
            display: block;
        }
    }

    .blink {
        background-color: #ef5350;
        animation-name: blinker;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
    }

    @keyframes blinker {
        0% {
            background: #ef5350;
        }
        50% {
            background: rgba(0,0,0,0.5);
        }
        100% {
            background: rgba(0,0,0,0.5);
        }
    }

    .table-title {
        float: right;
    }

    .formpad {
        padding: 25px;
        border: 1px solid #2f2f2f;
        margin: 40px;
    }
@media (min-width: 576px){

    .bordright {
        border-right: 2px solid #2f2f2f;
    }
    .accordion .card {
        background-color: #2f2f2f;
        border-radius: 0px;
        margin-bottom: 5px;
    }
    .accordion .card-header {
        padding: 5px 10px 10px 10px;
    }
    .accordion .card-header .btn {
        padding: 2px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        text-transform: none;
    }

    .accordion .card-header .btn div {
        display: flex;
        align-items: center;
    }
    .divider {
        height: 50px;
    }

    .tbbuttons {
        display: flex;
    }


}