section.my-availability
{ background: #f6f8fa;
  padding: 30px 0;
}
section#big-view {
    background: #ffffff;
    padding: 15px;
    margin: 0 -15px;
    border-radius: 7px;
}
.appointment-filter .btn-group>.btn:active, 
.appointment-filter .btn-group>.btn:focus, 
.appointment-filter .btn-group>.btn:hover
{
   border-color:  #3bb54a;
    background: #3bb54a;
}
.appointment-filter span.input-group-btn button.btn.btn-primary:hover
{
    border-color: #3bb54a;
    background: #3bb54a;
}
table.table.availability-table .btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-shadow: 0 .1875rem .1875rem 0 rgba(0,0,0,.1)!important;
}
.calendar-date .btn {
    border-radius: 0;
}
.calendar-hours {
    text-align: right;
}

.calendar-hours .btn.btn-primary {
    cursor: pointer;
}
.appointment-filter {
    margin-bottom: 20px;
}
table.table.availability-table, .availability-list {
    
    border-collapse: collapse;
    width: 100%;
}
.table.table.availability-table tr {
        vertical-align: middle;
    transition: background-color ease-in .15s;
}
.availability-table.table tbody tr:hover, .availability-list ul li:hover {
    background-color: #f5f9fc;
}
.availability-table .info-wr {
    width: 7px;
    padding: 0 50px;
background: #efefef;
}
.availability-table td, .availability-table th, .availability-list ul li {
    border-top: 1px solid #cccccc;
    padding: .5rem .75rem;
    vertical-align: middle;
}
.availability-table .day-wr {
    border-left: 1px solid var(--grey);
    text-align: center;
}
.availability-table .day-wr {
    border-left: 1px solid  #cccccc;
    text-align: center;
}
.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}
table.table.availability-table .btn, .availability-list .btn{
    display: block;
    width: 100%;
    color: #fff;
    border: solid 1px #3bb54a;
    background: #3bb54a;
    padding: 6px 6px;
    margin: 6px 0;
}
.availability-list .btn {
    width: auto !important;
    padding: 6px 12px;
}
table.table.availability-table .btn:hover .availability-list .btn:hover {
 
    background-color: #20497f;
    border: 1px solid #20497f;
    padding: 12px 6px;
}
ul.service-list {
    padding: 0;
}
ul.service-list li.item 
{
    list-style-type: none;
}
ul.service-list li {
    list-style: none;
}

ul.service-list li span {
    display: block;
}

ul.service-list li span.list-test {
    margin-bottom: 6px;
}
.availability-table .popover .col-md-12 {
    padding: 0;
}
.availability-table .popover .btn-group {
    width: 100%;
}
.availability-table .popover .btn-group .btn {
    width: auto !important;
    padding: 6px 12px !important;
}
.availability-table .popover .btn.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.table-scroll {
    position:relative;
    max-width:100%;
    margin:auto;
    overflow:hidden;
    background: #ffffff;
    border: solid 1px #cccccc;
}
.table-wrap {
    width:100%;
    overflow:auto;
}
.table-scroll table {
    width:100%;
    margin:auto;
    border-collapse:separate;
    border-spacing:0;
}
.table-scroll th, .table-scroll td {
   
    background:#fff;
    white-space:nowrap;
    vertical-align:middle !important;
}
.table-scroll thead, .table-scroll tfoot {
    background:#f9f9f9;
}
.clone {
    position:absolute;
    top:0;
    left:0;
    pointer-events:none;
}
.clone th, .clone td {
    visibility:hidden
}
.clone td, .clone th {
    border-color:transparent
}
.clone tbody th {
    visibility:visible;
    color:red;
}
.clone .info-wr {
     background: #efefef;
    visibility:visible;
}
.clone thead, .clone tfoot{background:transparent;}

/* width */
.table-wrap::-webkit-scrollbar {
  width: 7px;
  height: 10px;
  border-radius: 50px;
}

/* Track */
.table-wrap::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
.table-wrap::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: #555;
}
div#timeSlotEdit .modal-footer .btn-group button {
    padding: 6px 20px;
}
@media (min-width: 1024px)
{
section#big-view
{
display: block;
}
section#small-view
{
display:none;
}

}
@media (max-width: 1024px)
{
section#big-view
{
  display:none;
}
section#small-view
{
    display: block;
    background: #ffffff;
    padding: 15px;
    margin: 0 -15px;
    border-radius: 7px;
}
table.table.availability-table .btn, .availability-list .btn {
    display: inline-block;
    margin: 6px 6px 6px 0;
    padding: 6px 12px;
    width: 13% !important;
}
section#small-view .container {
    width: 100%;
}
}
@media (max-width:768px)
{
table.table.availability-table .btn, .availability-list .btn {
    display: inline-block;
    margin: 6px 6px 0px 0;
    padding: 6px 12px;
    width: 16% !important;
}
}
@media (max-width: 700px)
{
form#formaccess .input-group.ip-inline.mb-3 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
form#formaccess .input-group-append {
    width: 100%;
}
}
@media (max-width: 620px)
{
table.table.availability-table .btn, .availability-list .btn {
    width: 20% !important;
}
section#small-view {

    padding: 15px 0px;
  
}
}
@media (max-width: 520px)
{
table.table.availability-table .btn, .availability-list .btn {
    padding: 6px 6px;
   width: 32.3333% !important;
   margin: 0.5% !important;

}
}
@media (max-width: 330px)
{
table.table.availability-table .btn, .availability-list .btn {
    font-size: 12px;
    display: inline-block;
    margin: 0.5%;
    padding: 6px 6px;
    width: 32.3333% !important;
}
}