.menu > li a i{font-size: 16px; font-weight: 300;}
.main-body{padding: 20px 0px;}
.main-body .container{display:none; grid-template-columns: 1fr 300px; grid-gap: 20px;}
.main-body .container:not(:has(.right-content)){grid-template-columns: 1fr;}
.report{position:relative; top: 0px; left: 0px; width: 100%; height: auto; display:grid; grid-auto-flow:row; grid-auto-rows:max-content; grid-gap: 20px;}
.report .report-body{border: 1px solid var(--border-color); border-radius: 5px; overflow:hidden;}
.report .report-body .calendar-view > div[data-room]:not([data-room='']){cursor: pointer;}
.report .report-body .calendar-view > div[data-room]:not([data-room='']):hover{background-color: rgba(0,55,43, 0.15);}
.report .report-body .calendar-view > div[data-room]:not([data-room='']):after{content: "\f00c"; position:absolute; top: auto; left: 50%; right:auto; bottom: 10px; transform: translateX(-50%); color: var(--success); font-size: 18px; font-weight: 400; font-family: "Font Awesome 5 Pro";}

.report.overview{grid-gap: 0px; border-radius: 5px; border: 1px solid var(--border-color); overflow:hidden;}
.report.overview:not(:last-child){margin-bottom: 20px;}
.report.overview .report-header{background-color: var(--grid-grid-header-table-tr-th-bg-color) !important; font-weight: 400; padding: 10px;}
.report.overview .report-body{aspect-ratio: 1; border:0px; border-radius: 0px;}
.report.overview .report-unit{padding: 10px; text-align: right; font-size: 13px;}

.simple-info .check-in-info{grid-template-columns: 1fr;}

.report.revenue .report-header{display: grid; grid-template-columns: max-content max-content; grid-gap: 15px;}
.report.revenue .report-header select[data-field='villatype']{height: 37px;}
.report.revenue .report-body{border: 0px;}

.report-income .grid-header tr th:not(:first-child){min-width: 110px;}
.report-income .grid-header tr th[data-field='cat']{min-width: 300px; max-width: 300px; width: 300px;}
.report-income .grid-content tr td:not(:first-child):not([data-field='cat']){text-align: right;}
.report-income .grid-content tr td input{text-align: right;}

.report-income:not(.card) .grid-content tr td.sticky{background-color: inherit;}
.report-income:not(.card) .grid-header tr th.sticky[data-field='stt' i],
.report-income:not(.card) .grid-content tr td.sticky[data-field='stt' i]{left: 0px;}
.report-income:not(.card) .grid-header tr th.sticky[data-field='cat' i],
.report-income:not(.card) .grid-content tr td.sticky[data-field='cat' i]{left: 40px; border-right: 1px solid var(--border-color);}

.main-body .grid{position:relative; top: 0px; left: 0px; right: auto; bottom: auto; width: 100%; height:auto;}
.main-body .grid .grid-header{position:relative; top: 0px !important; left: 0px; width: 100%; height:auto!important; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.main-body .grid .grid-content{position:relative; top: 0px !important; left: 0px; right: auto; bottom: auto !important; width: 100%; height:auto; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.main-body .grid .grid-content > table{min-width: 100%;}

.revenue-list .grid-header th{min-width: 100px;}
.revenue-list .grid-header th[data-field='AreaName'],
.revenue-list .grid-header th[data-field='VillaName'],
.revenue-list .grid-header th[data-field='RoomName']{width: 100px; min-width: 100px; max-width: 100px;}
.revenue-list .grid-header th[data-field='VillaTypeName']{width: 150px; min-width: 150px; max-width: 150px;}

.revenue-list:not(.card) .grid-content tr td{text-align: right;}
.revenue-list:not(.card) .grid-content tr td[data-field='areaname' i],
.revenue-list:not(.card) .grid-content tr td[data-field='villaname' i],
.revenue-list:not(.card) .grid-content tr td[data-field='villatypename' i],
.revenue-list:not(.card) .grid-content tr td[data-field='roomname' i]{text-align:left;}
.revenue-list:not(.card) .grid-content tr td[data-field='stt' i],
.revenue-list:not(.card) .grid-content tr td[data-field='thangnam' i],
.revenue-list:not(.card) .grid-content tr td[data-field='detail' i]{text-align: center;}
.revenue-list .grid-content tr td[data-field='total' i],
.revenue-list .grid-content tr td[data-field='revenuetotal' i]{font-weight: bold;}
.revenue-list .grid-content tr.no-data td{text-align: center;}

.revenue-detail .revenue-list > div{border: 0px;}
.revenue-detail .revenue-list .grid-content tr[data-key][data-is-owner='1']{color: var(--success);}

.cost-list:not(.card) .grid-content tr td[data-field='thangnam' i],
.cost-list:not(.card) .grid-content tr td[data-field='detail' i]{text-align: center;}
.cost-list:not(.card) .grid-content tr td[data-field='cost' i]{text-align: right;}

.cost-detail{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; display:grid; grid-template-rows: max-content 1fr; grid-template-columns: 1fr; grid-gap: 0px; background-color: #fff; min-height: 100%;}
.cost-detail .row:first-child{background-color: rgb(220,220,220); margin-bottom: 0px; border-bottom: 1px solid var(--border-color); padding: 5px;}
.cost-detail .row:first-child div[data-field]{font-weight: 400;}
.cost-detail .data-list > .grid > div{border: 0px;}
.cost-detail .data-list > .grid .grid-header tr th[data-field='CostValue']{width: 120px; min-width: 120px; max-width: 120px;}
.cost-detail .data-list > .grid .grid-content tr td[data-field='CostValue']{text-align: right;}

.main-body .note{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.main-body .note > div:first-child{font-weight: 500; font-style: italic;}
.main-body .note > div{display:grid; grid-template-columns: max-content 1fr; grid-gap: 10px;}
.main-body .note > div > span:first-child{font-weight: 400;}

.profit-list .grid-header th{min-width: 100px;}
.profit-list .grid-header th[data-field='AreaName'],
.profit-list .grid-header th[data-field='VillaName'],
.profit-list .grid-header th[data-field='RoomName']{width: 100px; min-width: 100px; max-width: 100px;}
.profit-list .grid-header th[data-field='VillaTypeName']{width: 150px; min-width: 150px; max-width: 150px;}

.profit-list:not(.card) .grid-content tr td{text-align: right;}
.profit-list:not(.card) .grid-content tr td[data-field='areaname' i],
.profit-list:not(.card) .grid-content tr td[data-field='villaname' i],
.profit-list:not(.card) .grid-content tr td[data-field='villatypename' i],
.profit-list:not(.card) .grid-content tr td[data-field='roomname' i]{text-align:left;}
.profit-list:not(.card) .grid-content tr td[data-field='stt' i],
.profit-list:not(.card) .grid-content tr td[data-field='thangnam' i],
.profit-list:not(.card) .grid-content tr td[data-field='detail' i]{text-align: center;}
.profit-list .grid-content tr td[data-field='profit' i]{font-weight: bold;}
.profit-list .grid-content tr.no-data td{text-align: center;}

@media (max-width: 768px) {
    .main-body .grid .grid-header{display:none;}
    .main-body .container{grid-template-columns: 1fr;}
    .report .report-body .calendar-view > div[data-room]:not([data-room='']):after{bottom: 0px; font-size: 14px;} 
    .revenue-detail .revenue-list .grid-content{padding: 10px;}
    .cost-detail .data-list .grid .grid-content{padding: 10px;}
    .cost-detail .row:first-child { grid-template-columns: max-content 1fr max-content; grid-gap: 20px;}
    .cost-detail .row:first-child > div{grid-column: unset;}
}