.date_filter_selector{
    display: flex;
}

.daterangeselect,.customdaterangeselect{
    position: relative;
    background: #eff6fc;
    padding: 0.65em 1em;
    border-radius: 2em;
    border: none;
    outline: none;
}

.selectcustomdate{
    width: 120px;
    text-align: left;
    border: none;
    outline: none;
    background: #eff6fc;
}
.selectcustomdate i{
    float:right;
}

.formwithlabel{
    display: flex;
    flex-direction: column;
}
.formwithlabel label{
    font-size: 12px;
    color: #999999;
    margin: 0 0 0.2em 1.3em;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.customdaterangeselect{
   margin-left: 0.2em;
}

.customdaterangeselect .daterangediv{
   display: flex;
   flex: row;
   justify-content: space-between;
   align-items: center;
}

.customdaterangeselect .daterangediv input{
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 0;
    outline: 0;
    width: 100%;
    text-align: center;
}

.statusstrip{
    display: flex;
    flex-direction: row;
    padding: 0%;
    list-style: none;
    width: 100%;
    margin-bottom: 0px;
}

.statusstrip li{
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    margin:0;
    padding: 0.5% 0.5% 0.2% 1.5%;
    border-radius: 5px;
    width: 100%;
    color:#fff;
    position: relative;
    transition: .3s linear all;
  }
  
  .statusstrip li i{
    position: absolute;
    right: 8%;
    top: 25%;
    visibility: hidden;
  }
  
  .statusstrip li.statusactive i{
    visibility: visible;
    opacity: 0.7;
  }
  
  .statusstrip li .counterbadge{
    display: flex;
    flex-direction: column;
  }
  
  .count-name{
    font-size: 70%;
    font-weight: 500;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .statusstrip li:nth-child(1){
      background: linear-gradient(135deg, #666666 2.88%, #8B26C0 98.14%);
  }
  /* .statusstrip li:nth-child(2){ */
      /* background: linear-gradient(95.13deg, #F158B4 -1.11%, #EF4F4F 99.58%); */
  /* } */
  /* .statusstrip li:nth-child(3){ */
      /* background: linear-gradient(95.13deg, #FEBC3F -1.11%, #FF5E5E 99.58%); */
  /* } */
  /* .statusstrip li:nth-child(4){ */
      /* background: linear-gradient(98.79deg, #84C1FF 0.59%, #1A87F5 98.59%); */
  /* } */
  /* .statusstrip li:nth-child(5){ */
      /* background: linear-gradient(95.13deg, #43CCA1 -1.11%, #0B8D64 99.58%); */
  /* } */


  
.tabattendednotattended{
    display: flex;
    width: 100%;
    padding: 0.2em 0;
    margin-bottom: 0em;
    list-style: none;
}
.tabattendednotattended li{
 display: inline-block;
 width:100%;
 margin:0% 0.8%;
 text-align: left;
 position:relative;
}

.tabattendednotattended li button{
    border: 0;
    text-align: left;
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.15);
    padding: 1.5% 3%;
    box-sizing: border-box;
    border-radius:6px;
    width: 100%;
    color: #0f9349;
    background:linear-gradient(102.05deg, #FFFFFF 1.38%, #7dd994 112.76%);
    display: inline-block;
    position: relative;
    transition: .3s linear all;
}

.tabattendednotattended li button .titletab{
    font-size: 90%;
    letter-spacing: 0.1px;
    font-weight: 600;
}

.tabattendednotattended li button.show{
    background: linear-gradient(159.48deg, #0f9349 15.21%, #0f9349 87.98%);
    color:#fff;
}

.tabattendednotattended li button .c_footer{
    display: flex;
    flex-direction: column;
}

.tabattendednotattended li button .c_footer .countfooter{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.progress-container {
  box-shadow: 0 4px 5px rgb(0, 0, 0, 0.1)
}

.progress-container, .progress {
  background-color:#50bc75;
  border-radius: 5px;
  position: relative;
  height: 7px;
  width: 100%;
}

.progress {
  background: #68B3FF;
  width: 0;
  transition: width 0.4s linear;
}
.badgecountnum2{
	display: inline-block;
    justify-content: center;
    align-content: center;
    -webkit-box-align: center;
    align-items: center;
	font-weight: 400;
    font-size: 12px;
    width: 22px;
    height: 22px;
    padding-left: 0.3em;
    padding-top: 0.1em;
    border-radius: 50%;
    background: #f58220;
    color: #fff;
}
.badgecountnum[data-count]:after{
    content: attr(data-count);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: -10px;
    right: -5px;
    font-weight: 400;
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f58220;
    color: #fff;
    z-index: 1;
}

.archivedownload_counter{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}

.archivedownload_counter button{
    position: relative;
    background: #eff6fc;
    padding: 0.5em 0.8em;
    border-radius: 2em;
    border: none;
    outline: none;
    font-weight: 800;
}

.archivedownload_counter #counter{
    color:#999999;
    font-size:14px;
}