/* 登录页 */

.login-left {
    width: calc(100% - 860px);
    height: 100vh;
    object-fit: fill;
}

.login-box {
    position: fixed;
    top: 0;
    right: 0;
    width: 860px;
    height: 100%;
    padding: 110px;
    background: #fff;
    box-sizing: border-box;
}

.layui-form {
    display: flex;
    flex-direction: column;
}

.login-logo {
    position: relative;
    display: flex;
    align-items: center;
    height: 130px;
}

.logo-round {
    position: absolute;
    left: -175px;
    width: 130px;
    height: 130px;
}

.user-login {
    padding: 46px 0;
    font-size: 36px;
    color: #999;
}

    .user-login span {
        margin-right: 15px;
        color: #FF6F1E;
        font-weight: bold;
    }

.login-input label {
    font-size: 16px;
    color: #333;
}

.login-input input {
    width: 374px;
    height: 50px;
    margin: 20px 0;
    font-size: 16px;
}

.login-box .layui-btn {
    width: 374px;
    height: 50px;
    margin-top: 30px;
    font-size: 20px;
    line-height: 50px;
}

/* 通用按钮颜色 */
.layui-btn {
    background: #FF6F1E;
}

/* 白色按钮 */
.layui-btn-primary {
    background: #fff;
}

    .layui-btn-primary:hover {
        border-color: #FF6F1E;
    }

.layui-form .layui-btn + .layui-btn {
    margin-left: 2px;
}

/* 蓝色按钮 */
.layui-btn-normal {
    background: #00a0fd;
}

/* 左侧导航栏 */
.layui-layout-admin .layui-side {
    top: 50px;
    width: 150px;
}

.layui-side-scroll {
    width: 150px;
}

.layui-layout-admin .layui-logo {
    width: 150px;
    box-shadow: none;
}

    .layui-layout-admin .layui-logo img {
        width: 130px;
    }

.layui-nav-tree {
    width: 150px;
}

.layui-layout-admin .layui-layout-left,
.layadmin-pagetabs,
.layui-layout-admin .layui-body,
.layui-layout-admin .layui-footer {
    left: 150px
}

/* 导航背景色 */
.layui-bg-black {
    background: #F7F8FC !important;
}

/* 导航一级背景色 */
.layui-nav {
    background: #F7F8FC;
}

    /* 导航文字颜色 */
    .layui-nav .layui-nav-item a {
        color: #333;
    }

        /* 导航移入文字颜色 */
        .layui-nav .layui-nav-item a:hover {
            font-size: 16px;
            color: #FF6F1E;
        }

/* 导航移入文字颜色 */
.layui-nav-itemed > a,
.layui-nav-tree .layui-nav-title a,
.layui-nav-tree .layui-nav-title a:hover {
    color: #222 !important;
}

/* 展开二级导航背景色 */
.layui-nav-itemed > .layui-nav-child {
    background: #eaebf0 !important;
}

/* 展开二级导航移入侧边线条颜色 */
.layui-nav-tree .layui-nav-bar {
    background: #FF6F1E;
}

/* 导航选中背景色 */
.layui-nav-tree .layui-nav-child dd.layui-this,
.layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-nav-tree .layui-this,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this > a:hover {
    color: #fff;
    background: #FF6F1E;
}

/* 顶部通栏背景色 */
.layui-layout-admin .layui-header {
    background: #F7F8FC;
}

.layui-nav .layui-nav-item:hover {
    color: #222;
}

.layui-nav-tree .layui-nav-item i {
    margin-right: 10px;
}

/* 中间内容 */
.layui-layout-admin .layui-body {
    border-radius: 8px;
}

/* 简洁风格的tab */
.layui-tab-brief > .layui-tab-title .layui-this {
    color: #FF6F1E;
}

.stay-title {
    width: 80px;
    height: 30px;
    line-height: 0;
    border-radius: 4px;
    border: 1px solid #eee;
    box-sizing: border-box;
    overflow: hidden;
}

    .stay-title li {
        min-width: 40px;
        width: 40px;
        height: 30px;
        padding: 0;
        margin: 0;
        line-height: 30px;
    }

    .stay-title .layui-this {
        color: #fff;
        background: #FF6F1E;
    }

.data-summary {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
}

    .data-summary > div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 25%;
        height: 130px;
        font-size: 32px;
        color: #666;
        background: #fff;
    }

        .data-summary > div span {
            margin-top: 10px;
            font-size: 14px;
            color: #999;
        }

/* 分页选中颜色 */
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: #FF6F1E;
}

.layui-anniu .layui-btn {
    background: #fff;
}

    .layui-anniu .layui-btn:hover {
        border: 1px solid #FF6F1E;
    }

.layui-anniu .layui-layer-btn0 {
    color: #fff !important;
    background: #FF6F1E !important;
    border-color: #FF6F1E !important;
}

.layui-anniu .layui-layer-btn1 {
    color: #333 !important;
}

.layui-anniu-list {
    overflow-y: scroll;
}

.layui-anniu .layui-layer-btn {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.stay-quanxuan a {
    border: 0 !important;
}

/* 下拉多选 */
.layui-navselect {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 38px;
    padding: 0;
    margin: 0;
    background: none;
}

    .layui-navselect .layui-nav-item {
        line-height: 38px;
    }

    .layui-navselect .layui-nav-child {
        z-index: 1000;
        top: 40px;
    }

        .layui-navselect .layui-nav-child dd {
            padding-left: 10px;
            line-height: 29px;
        }

.test-table-reload-btn > div,
.test-table-reload-btn > button,
.test-table-reload-btn > a,
.test-table-reload-btn > ul {
    margin-bottom: 10px;
}

    .test-table-reload-btn > div > div,
    .test-table-reload-btn > div > button,
    .test-table-reload-btn > div > a,
    .test-table-reload-btn > div > ul {
        margin-bottom: 10px;
    }

/*  */
.layui-internal {
    display: flex;
    flex-wrap: wrap;
    min-height: 38px;
    padding: 4px 4px 0;
    border: 1px solid #eee;
    border-radius: 2px;
    box-sizing: border-box;
}

.internal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 24px;
    padding: 2px 4px;
    margin: 0 0 6px 6px;
    font-size: 12px;
    color: #666;
    background: #f7f7f7;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
}

    .internal:hover {
        background: #eee;
    }

    .internal i {
        color: #ccc;
    }

/* 房态图 */
.homestay-status-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 0;
}

    .homestay-status-icon > div {
        display: flex;
    }

        .homestay-status-icon > div > div {
            margin-right: 30px;
            font-size: 12px;
            color: #333;
            text-align: center;
        }

.status-span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 auto 5px;
    border-radius: 2px;
    font-size: 12px;
    color: #fff;
}

.s-reserve {
    background: #FF6F1E;
}

.s-checkin {
    background: #00a0fd;
}

.s-quit {
    background: #999;
}

.s-repair {
    background: #ff1e1e;
}

.s-stop {
    background: #999;
}

.s-retain {
    background: #00a0fd;
}

.s-package {
    background: #13ca8d;
}

.s-dirty {
    font-size: 14px;
    color: #666;
    background: #fff;
}

.custom-table {
    width: 100%;
    height: 675px;
    font-size: 12px;
    color: #333;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.custom-top {
    display: flex;
    width: 100%;
    height: 70px;
    overflow-x: scroll;
}

    .custom-top::-webkit-scrollbar {
        height: 0;
    }

.custom-date {
    display: flex;
}

.custom-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 70px;
    background: #fff;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.custom-relative {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
}

    .custom-relative:hover {
        background: #f0f0f0;
    }

.custom-top > div:nth-last-of-type(1) {
    margin-right: 16px;
}

.custom-box {
    display: flex;
    width: 100%;
    height: calc(100vh - 290px);
    overflow-x: scroll;
}

.custom-sticky {
    z-index: 2;
    position: sticky;
    left: 0;
}

    .custom-sticky .custom-cell {
        flex-direction: column;
        width: 140px;
    }

.custom-top .custom-cell {
    justify-content: space-between;
    flex-direction: column;
}

.custom-top .custom-sticky .custom-cell {
    justify-content: center;
}

.custom-top .custom-cell > div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 43px;
}

.custom-top .custom-sticky .custom-cell > div {
    margin-top: 0;
}

.custom-top .custom-cell > div span:nth-of-type(1) {
    font-weight: bold;
    margin-right: 4px;
}

.date-today,
.date-festivals,
.date-rest,
.date-class {
    padding: 2px 4px;
    font-size: 12px;
    color: #fff;
    background: #00a0fd;
    border-radius: 3px;
}

.date-rest {
    color: #FF6F1E;
    background: #fff2e6;
}

.date-class {
    color: #666;
    background: #eee;
}

.custom-top .custom-cell > span {
    width: 100%;
    padding: 4px 0;
    font-size: 12px;
    text-align: center;
    background: #f0f0f0;
}

.date-festivals {
    background: #FF6F1E;
}

.custom-sticky .custom-cell .layui-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    margin-bottom: 2px;
}

.custom-sticky .custom-cell .layui-input {
    width: 85px;
    height: 24px;
    border: 0;
    line-height: 24px;
}

.custom-sticky .layui-btn {
    height: 24px;
    line-height: 24px;
    border: 0;
}

.custom-first {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
}

.custom-dirty {
    background: #f0f0f0;
}

    .custom-dirty i {
        position: absolute;
        top: 4px;
        right: 4px;
    }

.custom-reserve,
.custom-checkin,
.custom-quit {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding-left: 16px;
    font-size: 12px;
    color: #fff;
    background: #FF6F1E;
    box-sizing: border-box;
}

.custom-checkin {
    background: #00a0fd;
}

.custom-quit {
    background: #999;
}

.owe {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    color: #fff;
    line-height: 14px;
    text-align: center;
    background: #ff1e1e;
    border-radius: 2px;
}

.custom-stop,
.custom-repair,
.custom-leave {
    align-items: center;
    padding-left: 0;
    font-size: 16px;
}

.custom-repair {
    background: #ff1e1e;
}

.custom-leave {
    background: #00a0fd;
}

.custom-package {
    position: absolute;
    top: 0;
    right: 0;
}

    .custom-package em {
        position: absolute;
        right: 2px;
        top: 2px;
        font-style: normal
    }

    .custom-package span {
        display: inline-block;
        width: 0;
        height: 0;
        border-bottom: 30px solid transparent;
        border-left: 30px solid transparent;
        border-right: 30px solid #13ca8d;
    }

.checkin-border {
    border-color: #00a0fd;
}

.td-ok {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 70px;
    background: #fff;
    border: 1px solid #00a0fd;
    box-sizing: border-box;
}

    .td-ok i {
        font-size: 40px;
        font-weight: bold;
        color: #00a0fd;
    }

.fangtai-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px !important;
    padding: 10px;
    box-sizing: border-box
}

    .fangtai-footer button {
        height: 50px;
    }

/* 预订移入浮窗 */
.reserve-float-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    color: #222;
}

    .reserve-float-name > div span {
        margin-left: 10px;
    }

    .reserve-float-name span.status-span {
        margin: 0;
    }

.reserve-float-text {
    margin-top: 4px;
}

.reserve-float .layui-btn {
    width: 60px;
    height: 26px;
    padding: 0;
    margin-top: 10px;
    line-height: 24px;
}

/* 房态图结束 */

/* 价格日历 */
.calendar-table {
    font-size: 14px;
}

    .calendar-table .custom-top,
    .calendar-table .custom-cell {
        height: 48px;
    }

        .calendar-table .custom-top .custom-sticky .custom-cell {
            width: 248px;
        }

    .calendar-table .custom-box .custom-sticky .custom-cell {
        width: 150px;
    }

    .calendar-table .custom-box .custom-sticky .custom-first {
        flex-direction: row;
        justify-content: flex-start;
        padding: 0 10px;
        box-sizing: border-box;
    }

.custom-sticky-two {
    z-index: 2;
    position: sticky;
    left: 150px;
}

    .custom-sticky-two .custom-cell {
        width: 98px;
    }

        .custom-sticky-two .custom-cell .custom-relative {
            cursor: pointer;
        }

            .custom-sticky-two .custom-cell .custom-relative:hover {
                background: #f0f0f0;
            }

.custom-rooms {
    padding: 2px 8px;
    border-radius: 12px;
    color: #00796b;
    background: rgba(0, 172, 153, .1);
    margin-right: 4px;
}

.calendar-table .custom-relative {
    cursor: auto;
}

    .calendar-table .custom-relative:hover {
        background: #fff;
    }

.custom-gray {
    color: #aaa;
    background: #f7f7f7;
}

.calendar-table .custom-gray:hover {
    background: #f7f7f7;
}

.custom-orange {
    color: #FF6F1E;
    background: #fff2e6;
}

.calendar-table .custom-orange:hover {
    background: #fff2e6;
}

.border-right .custom-cell {
    border-right: 1px solid #ffd194;
}

.border-left .custom-cell {
    border-left: 1px solid #ffd194;
}

/* 价格日历结束 */

/* 推送与通知表格 */

.setting-table .layui-form-item {
    margin-bottom: 0;
}

.setting-table .layui-form-checkbox[lay-skin=primary] i {
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 20px;
}

.setting-table .layui-form-checkbox[lay-skin=primary] span {
    font-size: 14px;
    line-height: 22px;
}

/* 推送与通知表格结束 */


@media screen and (max-width: 1440px) {
    .login-left {
        width: calc(100% - 645px);
    }

    .login-box {
        width: 645px
    }
}

/* 直连模块 */
.channel-box {
    display: flex;
    padding: 16px;
}

.channel-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 300px;
    height: 170px;
    margin: 0 16px 16px 0;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

    .channel-list > img {
        width: 72px;
        height: 72px;
        border: 1px solid #eee;
        border-radius: 4px;
    }

    .channel-list > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.channel-title {
    margin-bottom: 8px;
    font-size: 20px;
    color: #333;
    font-weight: bold;
}

.channel-join {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-size: 14px;
    color: #999;
}

    .channel-join::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 6px;
        background: #999;
        border-radius: 99px;
    }

.channel-connecting {
    color: #00A0FD;
}

    .channel-connecting::before {
        background: #00A0FD;
    }

.channel-order {
    position: absolute;
    top: 10px;
    right: -30px;
    width: 100px;
    height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 20px;
    background: #00A0FD;
    transform: rotate(45deg);
}

.channel-text span {
    font-size: 12px;
    color: #666;
}

.channel-list .layui-btn {
    height: 32px;
    line-height: 32px;
}

/* 新增弹窗部分 */
.modal-tab {
    margin: 0;
    padding: 0 24px;
}

.modal-box {
    display: flex;
    height: 100%;
}

.modal-left {
    flex: 1;
    width: 100%;
}

.modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34px;
}

    .modal-title b {
        position: relative;
        font-size: 14px;
        color: #333;
        font-weight: bolder;
    }

        .modal-title b::before {
            content: "";
            display: inline-block;
            width: 2px;
            height: 8px;
            margin-right: 8px;
            background: #FF6F1E;
            border-radius: 99px;
        }

.modal-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #eee;
    border-radius: 4px;
}

    .modal-list > div {
        width: 50%;
        padding: 6px 12px;
        font-size: 14px;
        color: #999;
        box-sizing: border-box;
    }

    .modal-list span {
        color: #333;
    }

    .modal-list > div.list-all {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .modal-list table {
        width: 100%;
    }

        .modal-list table td {
            padding: 6px 12px;
            font-size: 14px;
            color: #999;
            box-sizing: border-box;
        }

    .modal-list span.reserve {
        color: #FF6F1E;
    }

    .modal-list span.checkin {
        color: #00A0FD;
    }

.modal-grid {
    display: flex;
    justify-content: space-between;
    border: 1px solid #eee;
    border-radius: 4px;
}

    .modal-grid > div {
        width: 100%;
        text-align: center;
        padding: 8px 0;
    }

        .modal-grid > div span {
            font-size: 12px;
            color: #999;
        }

        .modal-grid > div div {
            margin-top: 4px;
            font-size: 14px;
            color: #333;
        }

.modal-right {
    display: flex;
    flex-direction: column;
    width: 150px;
    padding: 0 6px 6px 6px;
    margin-left: 16px;
    background: #FD4343;
    border-radius: 4px;
    box-sizing: border-box;
}

    .modal-right .modal-title b {
        color: #fff;
    }

.order-expense {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
    border-radius: 4px;
}

    .order-expense > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        height: 100%;
        padding-left: 16px;
        box-sizing: border-box;
    }

        .order-expense > div span {
            font-size: 12px;
            color: #999;
        }

        .order-expense > div div {
            font-size: 16px;
            color: #333;
        }

        .order-expense > div:nth-last-of-type(1) {
            background: #FD4343;
            border-top: 1px dashed #fff;
        }

            .order-expense > div:nth-last-of-type(1) span {
                color: #fff;
            }

            .order-expense > div:nth-last-of-type(1) div {
                font-size: 20px;
                color: #fff;
                font-weight: bold;
            }

.modal-footer {
    display: flex;
    justify-content: center;
    padding: 10px 0 !important;
}

.layui-border {
    background: #fff;
    border: 1px solid #ccc;
}

/* 入住客人 */

.consumption-record {
    display: flex;
    flex-wrap: wrap;
}

.consumption-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 167px;
    height: 160px;
    padding: 16px;
    margin: 0 16px 16px 0;
    border: 1px solid #eee;
    border-radius: 4px;
}

    .consumption-list:nth-of-type(4n) {
        margin-right: 0;
    }

    .consumption-list > div {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #999;
    }

        .consumption-list > div span {
            color: #333;
        }

        .consumption-list > div b {
            color: #FD4343;
        }

        .consumption-list > div input,
        .consumption-list > div select {
            flex: 1;
            width: 100%;
            height: 28px;
            padding: 0 8px;
            font-size: 14px;
            color: #333;
            border: 1px solid #eee;
            box-sizing: border-box;
        }

        .consumption-list > div.consumption-red,
        .consumption-list > div.consumption-blue {
            justify-content: center;
            width: 32px;
            height: 19px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 19px;
            background: #FF6F1E;
            border-radius: 2px;
        }

        .consumption-list > div.consumption-blue {
            background: #00A0FD;
        }

        .consumption-list > div.consumption-btn {
            justify-content: space-between;
        }

            .consumption-list > div.consumption-btn button {
                width: 100%;
                height: 30px;
                line-height: 28px;
            }

                .consumption-list > div.consumption-btn button:nth-of-type(2) {
                    margin-left: 12px;
                }

.certificate-list {
    display: flex;
    justify-content: space-between;
    width: 45%;
    padding: 16px;
    margin: 0 16px 16px 0;
    border: 1px solid #eee;
    border-radius: 4px;
}

    .certificate-list:nth-of-type(2n) {
        margin-right: 0;
    }

    .certificate-list > img {
        width: 64px;
        height: 64px;
        margin-right: 16px;
    }

    .certificate-list > div {
        width: 100%;
        font-size: 14px;
        color: #999;
    }

        .certificate-list > div div {
            margin-bottom: 8px;
        }

        .certificate-list > div span {
            color: #333;
        }

.modal-line .layui-timeline {
    position: relative;
}

    .modal-line .layui-timeline::before {
        content: "";
        position: absolute;
        left: 9px;
        width: 2px;
        height: 100%;
        background: #eee;
    }

/* 订单编辑 */
.card-scroll {
    height: 460px;
    padding-bottom: 16px;
    overflow-y: scroll;
}

    .card-scroll::-webkit-scrollbar {
        width: 0;
    }

.modal-input {
    display: flex;
    margin-bottom: 8px;
}

.modal-from > div:nth-last-of-type(1) {
    margin: 0;
}

.modal-input > div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 38px;
    margin-right: 8px;
    padding: 0 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
}

    .modal-input > div span {
        font-size: 14px;
        color: #999;
    }

    .modal-input > div input {
        flex: 1;
        width: 100%;
        height: 100%;
        font-size: 14px;
        color: #333;
        border: 0;
    }

        .modal-input > div input::placeholder {
            color: #ccc;
        }

    .modal-input > div select {
        flex: 1;
        width: 100%;
        font-size: 14px;
        color: #333;
        border: 0;
    }

.modal-add {
    flex: 1;
    position: relative;
    justify-content: center;
    width: 30px;
    margin-right: 0 !important;
    cursor: pointer;
}

    .modal-add::before {
        content: "";
        width: 16px;
        height: 2px;
        background: #FF6F1E;
    }

    .modal-add::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 16px;
        background: #FF6F1E;
    }

.modal-subtract::after {
    content: none;
}

.modal-name > div:nth-of-type(1) {
    width: 130px;
}

.modal-name > div:nth-of-type(2) {
    width: 150px;
}

.modal-name > div:nth-of-type(3) {
    width: 160px;
}

.modal-name > div:nth-of-type(4) {
    width: 230px;
}

.modal-name > div:nth-of-type(5) {
    width: 150px;
}

.modal-form-grid {
    background: #FFF9EA;
}

    .modal-form-grid > div div {
        margin-top: 0;
        line-height: 16px;
    }

    .modal-form-grid > div:nth-last-of-type(1) div {
        color: #FD4343;
        font-weight: bold;
    }

.modal-room {
    display: flex;
    flex-wrap: wrap;
}

.modal-room-list {
    display: flex;
    width: 29%;
    padding: 6px 12px;
    margin: 0 16px 16px 0;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #FFF9EA;
}

    .modal-room-list:nth-of-type(3n) {
        margin-right: 0;
    }

    .modal-room-list input {
        height: 23px;
        margin-right: 8px;
    }

    .modal-room-list > div {
        width: 100%;
        font-size: 14px;
        color: #999;
    }

        .modal-room-list > div span {
            color: #333;
        }

            .modal-room-list > div span.room-list-red {
                color: #FD4343;
                font-weight: bold;
            }

.room-list-name {
    color: #333;
}

.room-list-text {
    display: flex;
    justify-content: space-between;
}

    .room-list-text div {
        width: 100%;
    }

.cash-register {
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

    .cash-register > div {
        display: flex;
        justify-content: space-between;
        padding: 6px 12px;
        font-size: 14px;
        color: #666;
    }

        .cash-register > div span:nth-of-type(2) {
            color: #333;
        }

        .cash-register > div.cash-receivable {
            color: #fff;
            background: #FD4343;
            border-top: 1px dashed #fff;
        }

            .cash-register > div.cash-receivable span:nth-of-type(2) {
                font-size: 20px;
                color: #fff;
                font-weight: bold;
            }

.modal-textarea {
    width: 100%;
    height: 100px;
    padding: 8px;
    font-size: 14px;
    color: #333;
    border: 1px solid #eee;
    border-radius: 4px;
    box-sizing: border-box;
}

    .modal-textarea::placeholder {
        color: #ccc;
    }