body {

    background-color: #fff;

    font-family: 'Open Sans', sans-serif;

  }



#ffLogo {

    max-width: 10%;

}



#container {

    text-align: center;

    margin-bottom: 3%;

}

#table-hld {



    margin-left: 2%;

    margin-right: 2%;

    width: 96%;

    border: 1px solid black;

}



#table-headers{

    color: black;

    background-color: #4fe3c6;

}

.headers {

    width: 11%;

    display: inline-block;

    text-align: center;

    font-weight: bold;

    padding-top: 8px;

    padding-bottom: 8px;

    height: 40px;

    font-size: 14px;

}



.btn-header{

    display: inline-block;

    width: 18%;

}



.table-data {

    padding-top: 10px;

    padding-bottom: 8px;

    width: 11%;

    display: inline-block;

    text-align: center;

    font-size: 11px;

}



.data-btn{

    display: inline-block;

    width: 18%;

}



.headers:not(:last-child){

    border-right: 1px solid black;

}



.table-data:not(:last-child){

    border-right: 1px solid black;

}



.table-row{

    border-top: 1px solid black;

}



#change-membership-btn{

    margin-top: 2%;

}



#btnSubmit{

    cursor: pointer;

    width: 25%;

    border: 1px solid black;

    background-color: #4fe3c6;

    font-weight: bold;

}



.btnDetails{

    cursor: pointer;

    background-color: #ddd;

    border: 2px solid black;

}





#btnCancel{

    cursor: pointer;

    width: 25%;

    border: 1px solid black;

    background-color: #f44336;

    color: #fff;

    font-weight: bold;

}



#details-hld {

    display: none;

    position: fixed;

    z-index: 3;

    left: 30%;

    top: 24%;

    width: 40%;

    height: 50%;

    overflow: auto;

    background-color: #fbf9f9;

    border: 2px solid black;

    padding: 2%;

    border-radius: 4%;

}



#pagination{

    margin-top: 2%;

}

#pagination a {

    color: black;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

  }



  #pagination a.active {

    background-color: #4fe3c6;

    color: white;

  }



  #pagination a:hover:not(.active) {background-color: #ddd;}



  .span-title{

    display: inline-block;

    font-weight: bold;

    width: 60%;

    float: left;

    text-align: start;

  }



  .span-value{

    display: inline-block;

    width: 40%;

    text-align: end;

  }



.sortPic {

    width: 17px;

    cursor: pointer;

    float: right;

}



.headers > span {

    margin-left:20px;

}



#btnSubmitSearch {

    cursor: pointer;

    width: 8%;

    border: 1px solid black;

    background-color: #4fe3c6;

    font-weight: bold;

    margin-left:3%;

}



#inputHolder{

    margin-top: 3%;

    margin-bottom: 1%;

}



#filterHolder {

    margin-bottom: 3%;

}



#dateHolder {

    margin-bottom: 3%;

}



#table-history-hld {

    display: none;

    position: fixed;

    z-index: 4;

    left: 20%;

    top: 15%;

    width: 60%;

    height: 60%;

    overflow: auto;

    background-color: #fbf9f9;

    border: 2px solid black;

    padding-left:2%;

    padding-right: 2%;

    padding-bottom: 2%;

    border-radius: 4%;

}

#table-headers-mem {

    color: black;

    background-color: #4fe3c6;

}



#membership-history-hld{

    border:1px solid black;

}



.headers-mem {

    width: 24%;

    display: inline-block;

    text-align: center;

    font-weight: bold;

    padding-top: 8px;

    padding-bottom: 8px;

    height: 40px;

}





.table-data-mem {

    padding-top: 10px;

    padding-bottom: 8px;

    width: 24%;

    display: inline-block;

    text-align: center;



}



.headers-mem:not(:last-child) {

    border-right: 1px solid black;

}



.table-data-mem:not(:last-child) {

    border-right: 1px solid black;

}



#shadow {

    display: none;

    background-color: #000;

    opacity: .8;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}



#btnHistory {

    cursor: pointer;

    width: 25%;

    border: 1px solid black;

    background-color: #00BCD4;

    font-weight: bold;

}



#close-btn {

    width: 10px;

    height: 10px;

    float: right;

    cursor:pointer;

}



#close-btn-hld{

    padding-top:5px;

}



#btnSubmitLogin {

    cursor: pointer;

    width: 8%;

    border: 1px solid black;

    background-color: #4fe3c6;

    font-weight: bold;

    margin-left: 6%;

}



#loginTitle {

    margin-bottom: 2%;

}



.text-danger{

    color:red;

}



#accHld{

    margin-bottom:1%;

}



#passwordHld {

    margin-bottom: 1%;

}



.label-login{

    width:6%;

}



#btnSubmitFilter {

    cursor: pointer;

    width: 8%;

    border: 1px solid black;

    background-color: #4fe3c6;

    font-weight: bold;

    margin-left: 3%;

}



#selectLabel{

    width:12%;

}



#inputLabel{

    width:12%;

}



#inputSearch{

    width: 12%;

}



#subsSelectHld{

    width: 12%;

}



#btnSubmitDate {

    cursor: pointer;

    width: 8%;

    border: 1px solid black;

    background-color: #4fe3c6;

    font-weight: bold;

    margin-top:0.5%;

}