.number #number_of_page{ margin:10px 0px 10px 10px !important; }
.number #number_total_page{ margin:10px 5px 10px !important; }
.number #number_of_record { background: #ccc; padding: 0px 10px; border-radius: 3px;}

table tr.add_room{ background:#ccc; }
#page_navigator{ background:#fff; padding:25px; border:0px solid #fff;  }
#page_navigator td{ padding:10px 25px !important; }

#page_navigator #print_approval_history,#page_navigator .page_control{ display:table-cell; padding:0px 15px; }
#page_navigator .page_control div { margin: 10px; display: inline-block;}
#page_navigator .number_of_page{ padding:0px 15px; background:#f6f6f6; font-size:14px; border-radius:3px; }

.tabel.admin input.btn { padding: 1px 5px 1px; background: #ccc; font-size: 10px;}
.tabel.admin input.btn:hover {  background: #666;  }
.td_hp { font-size: 12px; font-style: italic; color: #666; }

#container.page .header{ background:#f4f4f4; margin-bottom: 2px; }
#container.page #print_room,#container.page #print_user,#container.page #print_waiting_approval, #container.page #print_waiting_approval_history{ padding:0px; }
#container.page .body table{ margin-bottom:15px; }
@media(max-width:768px){ 
h2{font-size:14px; padding:8px 0px !important;}}
h2{ font-weight:bold; margin: 0px; padding: 10px 0px 10px 10px; display: table; font-size:14px; }
.selected.meeting-room ul.list_room li.room.lockDisplay{ background:#106db6; }
.selected.meeting-room ul.list_room li.room h4 {  position: unset; }
.selected.meeting-room ul.list_room li.room.lockDisplay h4 { font-weight:bold; font-size:22px; }
.gembokJadwal{ text-align:right; display:table; width:100%; padding:5px 10px; cursor:pointer; }
.openGembokJadwal { text-align: right; display: table; width: 100%; padding: 25px; cursor: pointer; display: none; position: fixed; bottom: 10px; right: 15px; display:none; }
.lockDisplay{ position: fixed !important; width: 100% !important; height: 100% !important; top:0px; bottom:0px; left:0px; right:0px; z-index: 1 !important; display: block;}
.lockDisplay .gembokJadwal{ display:none !Important;}
.lockDisplay .openGembokJadwal{ display:table !Important;}
.lockDisplay .go_to_page_meeting_room{ display:none !Important;}
.lockDisplay ul.hours_meeting { margin-top:75px; }
.box_info_content div:first-child { padding:10px 15px 0px; }
.box_info_content div { padding: 0px 15px; text-align: left;}
.title_meeting_pemesan { text-transform: capitalize; font-weight: bold; text-align: left; padding:10px 15px 0px;}
.box .box_info { position: absolute; display: table-cell; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 1; background: #333; border-radius: 5px; display:none; color:#f1f1f1;}
.close_box_info { color: #fff; display: table; float: right; padding: 10px; cursor:pointer; }
.info_icon{ position:absolute; right:7px; top:7px; display:table;     display: none; cursor:pointer; }
#container .home h2{ padding:10px 10px 5px 0px ; font-size:30px; margin:0px 0px 15px; }
.meeting-room ul.list_room li.room {	position:relative;}
.btn.booking-seharian { background: #555 !important; margin-left: 5px !important; width: auto !important;}
.booking-seharian{ padding:10px; position:absolute; top:0px; left:0px;  }
.go_to_page_meeting_room { color: #fff; display: table-cell; float: right; margin-right:5px; font-size: 22px;}
.go_to_page_meeting_room span{ transform: rotate(-45deg); }
.approval table td.cell-button { text-align: right; }
.button.red{ background:/*#c7251c*/ rgba(199,37,28,.9); color:rgba(255,255,255,.75); }
.button.yellow{ background:#fff200; opacity: .95; color: #666;}
.button.green{ background:/*#008000*/ rgba(0,128,0,.9); opacity: .95; color:rgba(255,255,255,.75); }
.button.red:hover{ background:rgba(199,37,28,.7);  }
.button.yellow:hover{ background:rgba(255,255,0,.7);  }
.button.green:hover{ background:rgba(0,128,0,.7);  }
button.yellow_ptpr{background:rgba(172,196,55,.9) ;}
button.yellow_ptpr:hover{background:rgba(172,196,55,.7) ; color:#555;}
.meeting-room ul.list_room li.room button {
    /*background: #28A745;*/ /*#acc437*/
    color: #f1f1f1;
    text-transform: capitalize;
    margin: 0px auto;
    width: 100%; font-size:22px;
}
.meeting-room table .meta-data{ display:none;}
.approval table td{ text-align:left; padding: 8px 6px; vertical-align: middle; }
/*table td{ text-align:left; padding: 5px 10px;} */
@media(min-width:768px)
{
	.meeting-room ul.list_room li.room
	{
    width: 100%;
    min-width: 100%;
	}
}	
.approval table button, html input[type=button], input[type=reset], input[type=submit] {    margin-left: 5px;}



 .btn.disabled, .btn[disabled], fieldset[disabled]  {    background: #ccc !important; color:rgba(1,1,1,.75); }
.meeting-room ul.list_room li.room li.room{ width:100%; max-width:100%;min-width:100%;     position: unset;}
.layar_modal{ display:none; position:fixed; top:0px; bottom:0px; left:0px; right:0px; background:rgba(1,1,1,.875); z-index:9999999;}
.layar_modal .child { display: table; width: 325px; height: 100%; vertical-align: middle; margin: 0px auto;}
.layar_modal .child .contain { display: table-cell; margin: 0px auto; color: #fff; vertical-align: middle;}
.layar_modal .child .contain .box{ display: table; width:100%; max-width:100%; padding:0px; margin: 0px auto;}
button, input, select, textarea { color:#555;}
.layar_modal .child .contain .box .title_bar { display: table; width: 100%; background: #c7251c; color: #f1f1f1; padding: 10px; line-height: 24px; border-radius: 5px 5px 0px 0px;}
.layar_modal .child .contain .box .title_bar span.close{ float: right; color: #fff; font-size: 16px; padding: 5px; opacity:.7;}
.layar_modal .child .contain .box .body{ background:#fff; padding:10px;}
.layar_modal .child .contain .box .body label {    color: #555;}

.room_date_meta{ display:table; width:100%; padding:10px 0px; color:#555;}
.room_date_meta .room{ display:table; width:100%; text-align:left; }

.room_date_meta .starting_time { padding:15px 0px 0px; }
.room_date_meta .starting_time .label{ display: table-cell; width: 40%; text-align: left; color: #555; padding: 0px;}
.room_date_meta .starting_time .date{ display:table-cell; width:40%; text-align:right; }
.room_date_meta .starting_time .jam{ display:table-cell; width:10%; text-align:right; }

.room_date_meta .ending_time { padding:0px 0px 15px; }
.room_date_meta .ending_time .label{ display: table-cell; width: 40%; text-align: left; color: #555; padding: 0px;}
.room_date_meta .ending_time .date{ display:table-cell; width:40%; text-align:right; }
.room_date_meta .ending_time .jam{ display:table-cell; width:10%; text-align:right; }

.meeting-room ul.list_room li.room button.red{ background:#c7251c !important; color:#f1f1f1 !important; opacity: .95; color:rgba(1,1,1,.1); }
.meeting-room ul.list_room li.room button.yellow{ background:#fff200; opacity: .95; color: #666; color:rgba(1,1,1,.1); }
.meeting-room ul.list_room li.room button.green{ background:#008000; opacity: .95; color:rgba(1,1,1,.1); color:#f1f1f1;}
 button.green.disabled, button.green[disabled]{    background: #008000 !important; color:rgba(1,1,1,.75); }
.info_kapasitas{ color:#666; font-style:italic; font-size:10px; }
.info_kapasitas .number{ display:inline-table;}

/*
li.time_slot {
    display: inline-table;
    width: 31%;
	max-width:30%;
    margin: 5px;
}

@media(max-width:768px)
{
	li.time_slot {
    display: inline-table;
    width: 30% !important;
    margin: 5px;
}
	.lockDisplay ul.hours_meeting { margin-top:25px; }

}

@media(max-width:512px)
{
	li.time_slot {
    display: inline-table;
    width: 46% !important;
    max-width: 46% !important;
    margin: 5px;
}
}
*/