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;
}