
.UIWeekCalendar {
    background: #f7f7f624 none repeat scroll 0 0;
    margin: 20px 0;
    padding: 20px;
    box-shadow: var(--box-category);
}
.UIWeekCalendar * {
    font-family: 'Inter';
    font-size: 14px;
}
.UIWeekCalendar .WeekLable{
    display: inline-block;
    position: relative;
    line-height: 30px;
    width: 80%;
}
.UIWeekCalendar .WeekLable,.UIWeekCalendar .WeekLable *:not(.Durable *){
    font-size: 22px;
    /* line-height: 35px; */
    font-family: 'Noto Serif';
}
.UIWeekCalendar .WeekLable .Durable *{
    color: #DA251C;
}
.UIWeekCalendar .WeekLable .label-title{
    display: none;
}
.UIWeekCalendar .WeekLable .Durable{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.UIWeekCalendar .Member {
    color: #444;
    font: bold 15px 'Noto Serif';
}
.UIWeekCalendar .CalendarTitle > span {
    color: #182312;
    font: 600 19px Roboto;
    text-transform: uppercase;
}
.UIWeekCalendar .CalendarTitle {
    /* margin-bottom: 20px; */
    text-align: center;
}
.UIWeekCalendar .TBLCaption {
    color: #333;
    font: italic 12px 'Noto Serif';
    margin: 0 auto 20px;
    width: 60% !important;
}
.UIWeekCalendar .CellCaption {
    text-align: center;
    font-weight: bold;
}
.UIWeekCalendar .CellPrevious a,.UIWeekCalendar .CellNext a {
    background: #9c9c9c none repeat scroll 0 0;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
}
.UIWeekCalendar .CellNext {
    text-align: right;
}
.UIWeekCalendar .CellNext a{
    background: var(--color-primary);
} 
.UIWeekCalendar .PreButton,.UIWeekCalendar .NextButton {
    color: #fff;
    font: 500 14px Roboto;
    white-space: nowrap;
}
.UIWeekCalendar .CalendarTable {
    border: 1px solid #999 !important;
    margin-top: 20px;
}
.UIWeekCalendar .CalendarTable th{
    font-weight:bold;
}
.UIWeekCalendar .CellSelection{
    padding-top:20px;
}
.UIWeekCalendar .CellSelection select{
    padding: 10px 6px; 
    border-radius: 8px;
    border: 1px solid #bebebe;
}
.UIWeekCalendar .CalendarTable th:nth-child(1),
        .UIWeekCalendar .CalendarTable td:nth-child(1) {
            width: 10%;
        }

        
       .UIWeekCalendar .CalendarTable th:nth-child(3),
        .UIWeekCalendar .CalendarTable td:nth-child(3) {
            width: 30%;
        }
.UIWeekCalendar .CalendarTable th:nth-child(2),
        .UIWeekCalendar .CalendarTable td:nth-child(2) {
            width: 10%;
        }
.UIWeekCalendar .CalendarTable th:nth-child(4),
        .UIWeekCalendar .CalendarTable td:nth-child(4) {
            width: 15%;
        }
.UIWeekCalendar .CalendarTable th:nth-child(5),
        .UIWeekCalendar .CalendarTable td:nth-child(5){
			width: 15%;
		} 
.UIWeekCalendar .CalendarTable th:nth-child(6),
        .UIWeekCalendar .CalendarTable td:nth-child(6){
			vertical-align: middle;
		} 
.UIWeekCalendar .CalendarTable th {
    border: 1px solid #999;
    padding: 5px;
    text-align: center;
}
.UIWeekCalendar .CalendarTable td{
     border: 1px solid #999;
     padding: 10px;
}
.UIWeekCalendar .Col1, .Col2, .Col3, .Col4, .Col5, .Col6 {
    background: #eee none repeat scroll 0 0;
    color: #444;
    font: bold 13px arial;
    height: 35px;
    text-align: center;
}
.UIWeekCalendar .CDay {
    background: #eee none repeat scroll 0 0;
    color: #444;
    font: 14px 'Inter';
    height: 45px;
    padding-left: 10px;
    text-align: justify;
}
.UIWeekCalendar .DateName {
    font: bold 14px Roboto;
}
.UIWeekCalendar .attachment-list{
	padding-left: 0;
	list-style: none;
	margin: 0;
}
.UIWeekCalendar .attachment-list>li>a{
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 200px;
	white-space: nowrap;
	display: inline-block;
}
.UIWeekCalendar .attachment-list>li>a:before{
	font-family: 'Font Awesome 5 Pro';
	content: '\f15b';
	padding-right: 5px;
	color: var(--color-primary);
}
.UIWeekCalendar .calendar-eachday>thead>tr>th{
	text-align: center;
	padding: 8px;
	border: 1px solid #555;
}
.UIWeekCalendar .calendar-eachday>thead>tr>.nested-col:nth-child(2),
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td:first-child{
	width: 80px;
}
.UIWeekCalendar .calendar-eachday>thead>tr>.nested-col:nth-child(3),
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td:nth-child(2){
	width: 250px;
}
.UIWeekCalendar .calendar-eachday>thead>tr>.nested-col:nth-child(4),
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td:nth-child(3){
	width: 120px;
}
.UIWeekCalendar .calendar-eachday>thead>tr>.nested-col:nth-child(5),
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td:nth-child(4){
	width: 120px;
}
.UIWeekCalendar .calendar-eachday>tbody>tr>td:first-child{
	border: 1px solid #555;
	white-space: nowrap;
	padding: 8px;
	width: 150px;
}
.UIWeekCalendar .calendar-eachday>tbody>tr>td[colspan='5']{
	border-bottom: 1px solid #555;
}
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td{
	border: 1px solid #555;
	border-top: 0;
	padding: 8px;
	border-bottom: 0;
	text-align: left;
}
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td:first-child{
	border-left: 0;
	/* padding: 8px; */
}
.UIWeekCalendar .calendar-eachday>tbody>tr>td>table.sub-table>tbody>tr>td:last-child{
	border-right: 0;
}
@media only screen and (max-width: 768px){
    .UIWeekCalendar{
        padding: var(--padding-res);
        max-width: 100vw;
    }
    .UIWeekCalendar .CalendarTitle+table>tbody>tr{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 16px;
    }
    .UIWeekCalendar .CalendarTitle+table>tbody>tr>.CellCaption{
        order: -1;
        width: 100%;
    }
    .UIWeekCalendar .WeekLable{
        width: 100%;
    }
    	.UIWeekCalendar .CalendarTable,.UIWeekCalendar .CalendarTable thead,.UIWeekCalendar .CalendarTable tbody,
    .UIWeekCalendar .CalendarTable th, 
    .UIWeekCalendar .CalendarTable td, 
    .UIWeekCalendar .CalendarTable tr {
		display: block;
		border: 0;
	}
	.UIWeekCalendar .CalendarTable{
		border: 0 !important;
	}
	.UIWeekCalendar .CalendarTable>tbody>tr:first-child{
		display: none;
	}
	.UIWeekCalendar .CalendarTable th{
		display: none;
	}
	.UIWeekCalendar .CalendarTable >thead >tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.UIWeekCalendar .CalendarTable >tbody>tr {
		border: 1px solid #ccc;
		/* border: 0; */
		margin-bottom: 10px;
		padding: 10px;
		box-shadow: var(--box-category);
	}
	.UIWeekCalendar .CalendarTable >tbody>tr> td:not(.td-month) { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding: 20px 0;
		padding-left: 30%;
		text-align: left;
		/* padding: 5px 10px; */
		/* border-top: 0; */
		width: 100%;
	}
	.UIWeekCalendar .CDay br{
		display: none;
	}
	.UIWeekCalendar .DateName{
		/* display: flex; */
		/* align-items: center; */
		display: inline-block;
		margin-right: 6px;
		/* font-size: 14px; */
	}
	.UIWeekCalendar .CDay{
		background: transparent;
		/* display: flex !important; */
		/* align-items: flex-end; */
		/* justify-content: center; */
	}
	.UIWeekCalendar .CalendarTable >tbody>tr>td:before {
		position: absolute;
		top: 20px;
		left: 5px;
		width: 30%;
		/* padding-right: 10px; */
		white-space: normal;
		font-weight: 600;
	}
	
	.UIWeekCalendar .CalendarTable>tbody>tr>td:nth-of-type(1):before { content: "Thứ ngày"; }
	.UIWeekCalendar .CalendarTable >tbody>tr> td:nth-of-type(2):before { content: "Thời gian"; }
	.UIWeekCalendar .CalendarTable >tbody>tr> td:nth-of-type(3):before { content: "Nội dung"; }
	.UIWeekCalendar .CalendarTable >tbody>tr> td:nth-of-type(4):before { content: "Địa điểm"; }
}