.myarea-calendar-wrap table { border-collapse: collapse; }
.myarea-calendar-wrap tr { display: block; float: left; }
.myarea-calendar-wrap th, .myarea-calendar-wrap td { display: block; border: 1px solid #ddd; }


/* Checbox */

.myarea-calendar-wrap td{
    min-height: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 28px;
}
.myarea-calendar-wrap table{
    width: 100%;
}

.myarea-calendar-wrap tr{
    min-width: 13%;
}

.myarea-calendar-wrap td{
    position: relative;
}

/*Check Boxes*/
.myarea-calendar-wrap input[type="checkbox"] + label {
    color: #969696;
    background: #eef1f2;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 30px;
    font-size:13px;
    text-align: center;
}
.myarea-calendar-wrap label:hover {
    background-color: #333 !important;
    transition: color .2s ease,border-color .2s ease,opacity .6s ease,box-shadow .2s ease;
     color: #ffffff;
     cursor: pointer;
 }
.myarea-calendar-wrap input[type=checkbox]:checked + label {
    color: #fff;
    font-style: normal;
    background: #000;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 30px;
    font-size:13px;
    text-align: center;
}
.myarea-calendar-wrap input[type='checkbox'] {
    display: block;
    height: 0;
    width: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
/*Check Boxes*/

.myarea-calendar-wrap tr:first-child {
    display: none;
}

/* Responsive */

@media (max-width: 680px) {
  .myarea-calendar-wrap table{
      max-width: 100%!important
  }
  .myarea-calendar-wrap td:before {
    display: none;
  }
}
@media (max-width: 680px) {
 .myarea-calendar-wrap th,
 .myarea-calendar-wrap td {
    display: table-cell;
    min-width: 60px;
  }
.myarea-calendar-wrap th:first-child,
.myarea-calendar-wrap td:first-child {
    padding-left: 0;
  }
.myarea-calendar-wrap th:last-child,
.myarea-calendar-wrap td:last-child {
    padding-right: 0;
  }
  .myarea-calendar-wrap table {
    border-collapse: collapse; 
    overflow-x: scroll;
    display: block;
}
.myarea-calendar-wrap thead {
    background-color: #EFEFEF;
}
.myarea-calendar-wrap thead, .myarea-calendar-wrap tbody {
    display: block;
}
.myarea-calendar-wrap tbody {
    overflow-x: scroll;
    overflow-y: hidden;
}
.myarea-calendar-wrap td, .myarea-calendar-wrap th {
    min-width: 100px;
    height: 40px;
    overflow:hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    line-height: 40px;
}
.myarea-calendar-wrap input[type="checkbox"] + label, .myarea-calendar-wrap input[type="checkbox"]:checked + label{
    line-height: 45px;
}
.myarea-calendar-wrap td:first-child{
    /*position: fixed;*/
    z-index: 99;
    background: white;
    left:5px;
}

.myarea-calendar-wrap table{
    <!-- margin-left:100px; -->
}

}





/* Book VIewing Calendar 2 */




.myarea-calendar-wrap-book td{
    min-height: 100px;
    font-weight: 700;
    text-align: center;
    line-height: 28px;
}
.myarea-calendar-wrap-book table{
    width: 100%;
}

.myarea-calendar-wrap-book tr{
    min-width: 13%;
    background: #eef1f2!important;
}

.myarea-calendar-wrap-book td{
    position: relative;
}


.myarea-calendar-wrap-book td span{
    width: 100%!important;
    height: 100%!important;
    background: #fafafa!important;
    color: #ddd!important;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    padding: 0px;
    margin: 0px;
    cursor: not-allowed!important;
}



/* Responsive */