
:root{
  --_cu-grey100: 240, 241, 243;
}

.wp-menu-image img{
    max-width:25px;
    padding-top:3px !important;
}
#dashboard-company{
    width: 100%;
    padding: 48px;
}

.jqstooltip{
  padding:0px !important;
  border:0px !important;
}

.tooltip-class{
  background-color:black !important;
  display:inline-block !important;
  padding:5px !important;
}

#company_logo img{
    max-width: 300px;
    height: auto;
}

.font-16{
font-size:16px;
}

.company-tab-content {
    padding: 10px;
}

#table-list-team, #table-list-subscriptions, table.dataTable{
    margin: 20px 0 !important;
  }
table.table-list, table.dataTable {
    font-family: inherit;
    border-collapse: collapse;
    width: 100%;
}  
.table-list td, .table-list th, table.dataTable td, table.dataTable th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
.table-list thead tr, .table-list thead tr:hover, table.dataTable thead tr:hover, table.dataTable thead tr:hover{
    background: #f0f0f1 !important;
} 
.table-list tr:nth-child(even), table.dataTable tr:nth-child(even) {
    background-color: #f2f2f2;
}
.table-list tr:hover, table.dataTable tr:hover{ 
  background-color: #ddd; 
}
.card-remaining-tokens{
  background: #f2f2f2;
  padding: 20px;
  text-align: center;
  margin: 15px 30px;
}
.card-remaining-tokens h3{
  font-size: 32px;
  font-weight: bold;
  color: #2c3338;
}

.disabled{
  cursor: not-allowed;
  opacity: 0.65;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.content-placeholder {
  display: inline-block;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
  background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  -webkit-background-size: 800px 104px;
  background-size: 800px 104px;
  height: inherit;
  position: relative;
}

.filter__design-holder input[type="checkbox"], .filter__design-holder span{
  vertical-align: middle;
  }
  
  .date__filter-field{
    border:transparent;
    background-color: white;
    cursor:pointer;
    font-size:13px;
    border: 1px solid #d0d0d0 !important;
    padding: 8px 8px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 10%);
    border-radius: 3px;
  
  }
  
  .lightpick__previous-action, .lightpick__next-action{
  background-color:transparent !important;
  border:0px !important;
  color:#0F3659 !important;
  }
  
  .filter__SearchFieldHolder{
    position:relative;
  }
  
  .filter__SearchFieldHolder input{
    padding-left:35px !important;
  }
  
  .filter__SearchFieldHolder i{
  position:absolute;
  top: calc(50% - (16px/2));
  left:10px;
  color: rgb(0 0 0 / 20%);
  }
  
  .required > span:after{
    content:"*";
    padding-left:1px;
    color:red;
    text-decoration: none;
    font-weight: bolder;
  }
  
.error{
  border-color: red !important;
}

.selectize__tag-company .selectize-input{
border:0px;
background-color:#f7f9fa;
}

.font-20{
  font-size:20px;
}

.dropdown-no-arrow::after{
  display: none;
}

.svg-icon{
  vertical-align: middle;
}

.svg-icon svg{
  width:16px;
}

.disabled .svg-icon svg{
  fill: #6c757d;
}

.user-avatar{
  display: inline-block;
  width: 32px;
  height: 32px;
  border:2px solid white;
  border-radius: 50%;
  background: #ffffff;
  background-position: center center;
  background-repeat:no-repeat;
  background-size:contain
}

.category__holder-scroll{
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.notes__holder a:hover{
  background-color: rgb(var(--_cu-grey100)) !important;
}

.dashboard__companyNotes-menuHolder{
  border-right:2px solid #f5f5f5;
}

.richText-editor ul > li{
  list-style: disc;
}

.openNote{
  border-left:3px solid transparent;
}

.openNote.notes__link-active{
  border-left:3px solid black;
}

.txt-light-grey{
  color:#939393;
}

li span.category__holder-options{
  display:none;
}

li.active-li span.category__holder-options{
  display:inline-block;
}

.cursor-pointer{
  cursor: pointer;
}

.gauge {
  position: relative;
  border-radius: 50%/100% 100% 0 0;
  background-color: var(--color, #a22);
  overflow: hidden;
}
.gauge:before{
    content: "";
  display: block;
  padding-top: 50%;   /* ratio of 2:1*/
}
.gauge .chart {
overflow: hidden;
}
.gauge .mask {
position: absolute;
left: 20%;
right: 20%;
bottom: 0;
top: 40%;

background-color: #fff;
border-radius: 50%/100% 100% 0 0;
}

.bg-light .gauge .mask{
  background-color: #f8f9fa !important
}

.gauge .percentage {
  position:  absolute;
  top: -1px;
  left: -1px;
  bottom: 0;
  right: -1px;
  background-color: var(--background, #aaa);
  transform:rotate(var(--rotation)); 
  transform-origin: bottom center; 
  transition-duration: 600;
}
.gauge:hover {
--rotation: 100deg;
}
.gauge .value {
position:absolute; bottom:0%; left:0;   
width:100%; 
text-align: center;
}

.gauge .min {
position:absolute; 
bottom:0; left:5%;   
}
.gauge .max {
position:absolute; 
bottom:0; right:5%;   
}

.gauge .value img{
  max-width:40px;
}

.subscription-status.status-active {
	background: #c6e1c6;
	color: #5b841b;
}
.subscription-status.status-expired {
	background: #bd94af;
	color: #724663;
}
.subscription-status.status-pending-cancel {
	background: #bfbfbf;
	color: #737373;
}

.subscription-status{
  padding:0.3em;
  word-break: keep-all;
  white-space: nowrap;
  border-radius: 5px;
}