/* Custom */
.seat {
        height: 15px;
    }
    
.legends {
  font-family: Arial;
  font-size: 12px;
  margin: 10px 0;
  color: #666;
}

.methods{
    margin: 10px 0;
}

.row .seat .bg{
    background: #ff6a00;
}

.seat_table { display:none; } /* to hide the checkbox itself */
.seat_single { display:none; } /* to hide the checkbox itself */

.seat_row {
    height: 70px;
}

.seat_table + label:before {
    font-family: FontAwesome;
    font-size: 60px;
    display: inline-block;
    margin: 5px 5px;
    line-height: 17px;
    margin-bottom: 0px;
}

.seat_table + label:before {
    /* content: "\f0c8"; */
    color: #ddd;
    cursor: pointer;
    /* width: 60px; */
    margin-bottom: 0px;
}


.seat_table:checked + label:before {
/*  content: "\f0c8"; */
/*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
  margin-bottom: 0px;

}

.seat_table:disabled[data-status=booked] + label:before {
  /* content: "\f0c8"; */
/*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
    margin-bottom: 0px;
}

.seat_table:disabled[data-status=notAvaliable] + label:before {
 /* content: "\f0c8"; */
/*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
    margin-bottom: 0px;
}


.seat_single + label:before {
    font-family: FontAwesome;
    font-size: 10px;
    display: inline-block;
    margin: 0px 0px;
    line-height: 10px;
    margin-bottom: 0px;
}

.new_number {
  position: relative;
  top: 20px;
  font-weight: 700;
}

.new_number_chair {
  position: relative;
  font-weight: 700;
  font-size:12px; top:20px;
}

.new_number_cid {
  position: relative;
  font-weight: 700;
  font-size:8px; 
  top:15px;
  color: white;
}

.new_number_ciu {
  position: relative;
  font-weight: 700;
  font-size:8px; 
  top:15px;
  color: white;
}

#seats_stage {
}

#seats_bottom {

}

.table4 {
        font-family: FontAwesome;
        font-size: 10px;
        display: inline-block;
        margin: 0px 0px;
        line-height: 10px;
        margin-bottom: 0px;
        margin-left: 1px; 
        margin-right: 1px; 
        background-image: url(https://grafcarlos.com/assets/images/mesa5.png);        
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
        position: relative;
    }

.table4c {
    font-family: FontAwesome;
    font-size: 10px;
    display: inline-block;
    margin: 0px 0px;
    line-height: 10px;
    margin-bottom: 0px;
    margin-right: 10px; 
    background-image: url(https://grafcarlos.com/assets/images/mesa5.png);
    width: 50px;
    height: 50px;
    position: relative;
}

.tableci {
    font-family: FontAwesome;
    font-size: 10px;
    display: inline-block;
    margin: 0px 0px;
    line-height: 10px;
    margin-bottom: 0px;
    margin-right: 0px; 
    background-image: url(https://grafcarlos.com/assets/images/cadeira.png);
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
    position: relative;
}


    .table4c + label:before {
        content: '';
        color: #ddd;
    }

    .table4c:checked + label:before {
      color: #07e87b;
      content: '';
      background: #07e87b;
      margin-bottom: 0px;
    }

    .table4c:disabled[data-status=booked] + label:before {
      color: #ae2727;
      content: '';
      background: #ae2727;
      margin-bottom: 0px;
    }

    .table4c:disabled[data-status=notAvaliable] + label:before {
      content: '';
      color: #ae2727;
      background: #ae2727; /* The color you want the icon to change to */
      margin-bottom: 0px;
    }
    
.seat_table + label:before {
}
    
.chair {
    width: 12px;
    height: 14px;
    position: absolute;
    cursor: pointer;
}


#chair1 { top: 0px; left: 3px; transform: rotate(45deg)}
#chair2 { top: 2px; right: 0px;  transform: rotate(135deg) }
#chair3 { bottom:2px; left: 5px; transform: rotate(135deg)}
#chair4 { bottom: 4px; right: 3px; transform: rotate(45deg)}


.table4:has(input[type="checkbox"]:checked) {
    background-color: yellow;
}

.table4:has(input[type="checkbox"]:disabled[data-status=booked]) {
    background-color: red;
}

.table4:has(input[type="checkbox"]:disabled[data-status=notAvaliable]) {
    background-color: red;
}

.tableci:has(input[type="checkbox"]:checked) {
    background-color: yellow;
}

.tableci:has(input[type="checkbox"]:disabled[data-status=booked]) {
    background-color: red;
}

.tableci:has(input[type="checkbox"]:disabled[data-status=notAvaliable]) {
    background-color: red;
}



    .seat_single + label:before {
        font-family: FontAwesome;
        font-size: 10px;
        display: inline-block;
        margin: 0px 0px;
        
        margin-bottom: 0px;
    }

    .seat_single + label:before {
        /* content: "\f0c8"; */
        content: '';
        color: #ddd;
        cursor: pointer;
        /* width: 60px; */
        margin-bottom: 0px;
    }


    .seat_single:checked + label:before {
    /*  content: "\f0c8"; */
      content: '';
    /*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
      margin-bottom: 0px;

    }

    .seat_single:disabled[data-status=booked] + label:before {
      /* content: "\f0c8"; */
      content: '';
    /*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
        margin-bottom: 0px;
    }

    .seat_single:disabled[data-status=notAvaliable] + label:before {
     /* content: "\f0c8"; */
      content: '';
    /*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
        margin-bottom: 0px;
    }
    
    
@media (max-width: 600px) {
    .seat {
        height: 5px;
    }
    
    .new_number {
        top: -1px;
        font-size: 4px;
        color: white;
    }
    
    
    .new_number_chair {
        top: 12px;
        font-size: 4px;
        color: white;
    }

    .seat_table + label:before {
        font-family: FontAwesome;
        font-size: 3px;                
        display: inline-block;
        margin: 0px 0px;
        line-height: 17px;
        margin-right: 0px;
        margin-left: 0px;
    }
    
    .seat_table + label:before {
        content: '';
    }
    
    .seat_single + label:before {
        content: '';
    }
    
    .seat_single + label:before {
        font-family: FontAwesome;
        font-size: 3px;
        display: inline-block;
        margin: 0px 0px;
        line-height: 5px;
        margin-bottom: 0px;
    }

    .seat_row {
        height: 30px;
    }
    
    .seat_single + label:before {
        font-family: FontAwesome;
        font-size: 10px;
        display: inline-block;
        margin: 0px 0px;
        
        margin-bottom: 0px;
    }

    .seat_single + label:before {
        /* content: "\f0c8"; */
        content: '';
        color: #ddd;
        cursor: pointer;
        /* width: 60px; */
        margin-bottom: 0px;
    }


    .seat_single:checked + label:before {
    /*  content: "\f0c8"; */
      content: '';
    /*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
      margin-bottom: 0px;

    }

    .seat_single:disabled[data-status=booked] + label:before {
      /* content: "\f0c8"; */
      content: '';
    /*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
        margin-bottom: 0px;
    }

    .seat_single:disabled[data-status=notAvaliable] + label:before {
     /* content: "\f0c8"; */
      content: '';      
    /*  mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
        margin-bottom: 0px;
    }
    
    
    
    .table4c {
        font-family: FontAwesome;
        font-size: 3px;
        display: inline-block;
        margin: 0px 0px;
        line-height: 10px;
        margin-bottom: 0px;
        margin-right: 3px; 
        background-image: url(https://grafcarlos.com/assets/images/mesa5.png);        
        background-size: 13px 13px;        
        width: 13px;
        height: 13px;
        position: relative;
        
    }

    .chair {
        width: 2px;
        height: 2px;
        position: absolute;
        cursor: pointer;
    }


    #chair1 { top: 0px; left: 3px; transform: rotate(45deg)}
    #chair2 { top: 2px; right: 0px;  transform: rotate(135deg) }
    #chair3 { bottom: 0px; left: 4px; transform: rotate(135deg)}
    #chair4 { bottom: 4px; right: 0px; transform: rotate(45deg)}

    .table4 {
        font-family: FontAwesome;
        font-size: 3px;
        display: inline-block;
        margin: 0px 0px;
        line-height: 10px;
        margin-bottom: 0px;
        margin-left: 1px; 
        margin-right: 1px; 
        background-image: url(https://grafcarlos.com/assets/images/mesa5.png);        
        background-size: 12px 12px;        
        width: 12px;
        height: 12px;
        position: relative;
        
    }
    
    .tableci {
        font-family: FontAwesome;
        font-size: 10px;
        display: inline-block;
        margin: 0px 0px;
        line-height: 10px;
        margin-bottom: 0px;
        margin-right: 0px; 
        background-image: url(https://grafcarlos.com/assets/images/cadeira.png);
        background-size: 10px 10px;
        width: 10px;
        height: 10px;
        position: relative;
    }
    
    .new_number_cid {
      position: relative;
      font-weight: 700;
      font-size:3px; 
      top:-18px;
      color: white;
    }

    .new_number_ciu {
      position: relative;
      font-weight: 700;
      font-size:3px; 
      top:-3px;
      color: white;
    }


}


@media (min-width: 800px) and (max-width: 1024px) {
    input[type=checkbox] + label:before {
        font-family: FontAwesome;
        font-size: 50px;
        display: inline-block;
        margin: 5px 5px;
        line-height: 17px;
    }
}