.bar {
	background-color: #ddd;
	border: 0;
	position: relative;
	margin: 0 auto 0 0;
	height: 4px;
	width: calc(100% + 1px);
	width: -webkit-calc(100% + 1px);
}

.day {
	position: relative;
	margin: 20px auto 0 0;
	height: 10px;
	box-sizing: border-box;
}

.day .hour {
	position: absolute;
	border-left: 1px solid #aaa;
	height: 10px;
	width: calc(1 / 24 * 100%);
}

.day .halfhour {
	position: absolute;
	border-left: 1px solid #aaa;
	height: 7px;
	width: 50%;
	top: 4px;
}

.day .hour:after {
	position: absolute;
	top: -15px;
	font: 11px/1 sans-serif;
}

.day .hour:nth-of-type(1) {
	left: 0%;
}

.day .hour:after {
	text-indent: -0.5em;
}

.day .halfhour {
	left: 50%;
}

.weekday {
	position: relative;
	overflow: hidden;
	padding-right: 10px;
    margin-bottom:10px;
}

.weekday>div:nth-child(1) {
	width: 50px;
	position: relative;
	top: 12px;
	text-align: center;
	user-select: none;
	float: left;
	font-size:12px;
}

.weekday>div:nth-child(2) {
	/*margin-left: 80px;*/
    /*margin-left:0;*/
    margin-left:60px;
}

.bar div {
	display: inline-block;
}

.weekday .item {
    position: absolute;
    top: 0;
    /*width: 10px;*/
    /*width:calc(1 / 24 * 4 * 100%);*/
    height: 100%;
    background-color: #3F8CFF;
    /*overflow: hidden;*/
}

.bright {
	width: 10px;
	height: 100%;
	/*cursor: e-resize;*/
	background: transparent;
	position: absolute;
	right:-5px ;
	top: 0;
	z-index: 1;
}

.bleft {
	width: 10px;
	height: 100%;
	/*cursor: e-resize;*/
	background: transparent;
	position: absolute;
	left:-5px ;
	top: 0;
	z-index: 1;
}
.day .hour.hourtxt0:after{content: "";}
.day .hour.hourtxt1:after{content: "01";}
.day .hour.hourtxt2:after{content: "02";}
.day .hour.hourtxt3:after{content: "03";}
.day .hour.hourtxt4:after{content: "04";}
.day .hour.hourtxt5:after{content: "05";}
.day .hour.hourtxt6:after{content: "06";}
.day .hour.hourtxt7:after{content: "07";}
.day .hour.hourtxt8:after{content: "08";}
.day .hour.hourtxt9:after{content: "09";}
.day .hour.hourtxt10:after{content: "10";}
.day .hour.hourtxt11:after{content: "11";}
.day .hour.hourtxt12:after{content: "12";}
.day .hour.hourtxt13:after{content: "13";}
.day .hour.hourtxt14:after{content: "14";}
.day .hour.hourtxt15:after{content: "15";}
.day .hour.hourtxt16:after{content: "16";}
.day .hour.hourtxt17:after{content: "17";}
.day .hour.hourtxt18:after{content: "18";}
.day .hour.hourtxt19:after{content: "19";}
.day .hour.hourtxt20:after{content: "20";}
.day .hour.hourtxt21:after{content: "21";}
.day .hour.hourtxt22:after{content: "22";}
.day .hour.hourtxt23:after{content: "23";}
.day .hour.hourtxt24:after{content: "24";}

.roombox{width:calc(100% - 20px); display:grid;grid-template-columns:50% 50%;grid-row-gap:20px;grid-column-gap:20px;}
.roombox .room {
     background-color: #fff;
     border-bottom: 1px solid #ccc;
     padding:10px 5px;
     border-radius:6px;
     box-shadow: rgb(204, 204, 204) 2px 2px 10px;
 }
.roombox .room>div{display: flex;width:100%;height:100%;}
.roombox .room .leftdiv{width: 120px;margin:auto;text-align:center;}
.roombox .room .leftdiv>img{width: 110px; height: auto; border:1px dotted #ccc;border-radius:4px;}
.roombox .room .rightdiv{flex: 1;padding-left:10px;border-left:1px solid rgb(204,204,204);}
.roombox .room .header{padding:5px;display:flex;}
.roombox .room .header .title{font-size: 16px; font-weight: bold;line-height:40px;}
.roombox .room .header .littlelabel{font-size:14px;line-height:30px;color:#333;}
.roombox .room .header .littlelabel>span{margin-right:10px;}
.roombox .room .room-tag{font-size:12px;font-weight:400;height:20px;line-height:20px;border-radius:6px;padding:3px 8px;margin-right:10px;}
.kongxian{background-color:#4FA800;color:#fff;}
.zhanyong{background-color:#C00000;color:#fff;}
.room .room-btn{font-size:13px;background-color:#6955db;color:#fff; padding:5px 10px;border-radius:4px;cursor:pointer;}