div{
|
box-sizing: border-box;
|
}
|
|
.flex {
|
display: flex;
|
}
|
.justify-start {
|
justify-content: flex-start;
|
}
|
|
.justify-end {
|
justify-content: flex-end;
|
}
|
|
.justify-center {
|
justify-content: center;
|
}
|
|
.justify-between {
|
justify-content: space-between;
|
}
|
|
|
.align-start {
|
align-items: flex-start;
|
}
|
|
.align-end {
|
align-items: flex-end;
|
}
|
|
.align-center {
|
align-items: center;
|
}
|
.flex-direction{
|
flex-direction: column;
|
}
|
|
|
.flex1 {
|
flex: 1;
|
}
|
|
.flex2 {
|
flex: 2;
|
}
|
|
.flex3 {
|
flex: 3;
|
}
|
|
|
.solid {
|
border: 1px dashed black
|
}
|
|
.solid-top {
|
border-top: 1px dashed black
|
}
|
.solid-bot {
|
border-bottom: 1px dashed black;
|
}
|
|
.solid-left {
|
border-left: 1px dashed black
|
}
|
|
.solid-right {
|
border-right: 1px dashed black
|
}
|
|
.margin-left-1{
|
margin-left: -1px;
|
}
|
.margin-left-2{
|
margin-left: -2px;
|
}
|
.margin-left-3{
|
margin-left: -3px;
|
}
|
.margin-left-4{
|
margin-left: -4px;
|
}
|
|
.mr1{
|
margin-right: -1px;
|
}
|
.mr2{
|
margin-right: -2px;
|
}
|
.mr3{
|
margin-right: -3px;
|
}
|
.mr4{
|
margin-right: -4px;
|
}
|
|
.margin-bot-1{
|
margin-bottom: -1px;
|
}
|
.margin-bot-2{
|
margin-bottom: -2px;
|
}
|
.margin-bot-3{
|
margin-bottom: -3px;
|
}
|
.margin-bot-4{
|
margin-bottom: -4px;
|
}
|
|
.wm{
|
writing-mode: vertical-rl;
|
}
|
|
|
|
|
.room {
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
overflow: hidden;
|
}
|
|
.room-item {
|
|
.item-left {
|
height: 100%;
|
padding: 0 8px;
|
display: flex;
|
align-items: center;
|
border-right: 1px dashed black;
|
border-bottom: 1px dashed black;
|
}
|
|
.item-right {
|
height: 100%;
|
padding: 0 8px;
|
display: flex;
|
align-items: center;
|
border-left: 1px dashed black;
|
border-bottom: 1px dashed black;
|
}
|
}
|
div{
|
box-sizing: border-box;
|
}
|
|
