.ui-panel-content{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0px 10px !important;
}

.body-container{
	height: 100%;
	display: flex;
}

.btn-container-wrapper{
	display:flex;
	/* margin: 10px 0px; */
	flex-direction: row;
	justify-content: space-between;
}

.search-input-wrapper input {
    width: 400px !important;
    text-align: left;
}

.custom-dropdown-panel {
    position: absolute !important;
    right: 5% !important; 
    width: 40% !important; 
    max-height: 80% !important; /* Maximum height set to 80% of the viewport height */

    z-index: 1000 !important; /* Ensure it appears above other elements */
    overflow-x: hidden !important; /* Disable horizontal scroll */
    overflow-y: auto !important; /* Allow vertical scroll if needed */
    white-space: normal !important; /* Allow text wrapping */
    word-wrap: break-word !important; /* Ensure long words are wrapped */
}

.btn-container {
	padding: 0.75em 0.5em 2.2em 0.5em;
	display:flex;
	flex-direction:row;	
}

.btn-left {
	min-width: 100px;
	color: black !important;
	margin: 0em 0.5em !important;
	min-height: 31.5px;
	max-height: 31.5px;
	font-size: 18.8px !important;
}

.btn-right {
	min-width: 130px;
    color: black !important;
    margin: 0em 0.5em !important;
    min-height: 31.5px;
    max-height: 31.5px;
	font-size: 18.8px !important;
}

.panel {
	margin: 0 auto;
}

.ui-button.btn-right, .ui-button.btn-left, span.ui-button-text.ui-c{
	white-space: pre-wrap;
	color: black;
	font-weight: normal !important;
	text-align: center;
	overflow: hidden;
}

/* PrimeFaces icon reset */
.ui-widget .ui-icon.fa, .ui-icon.fa {
    background-image: none;
    text-indent: 0px;
    background-repeat: no-repeat;
    display: block;
    overflow: visible;
    text-indent: 0px;
}

.enrollmentListTable {
	display: flex;
	flex-direction: column;
}
.ui-datatable table.ui-datatable-fs {
    width: 100% !important;
    height: 100% !important;
}

/* Set default scaling */
.ui-datatable-frozenlayout-left{
    width: 80% !important;
}

.ui-datatable-frozenlayout-right{
    width: 10% !important;
}

.enrollmentListTable {
	text-align:center;
}

.enrollmentListTable tr td {
	font-size: 16px;
    height: 35px;
    width: 200px;
}

.enrollmentListTable tr td input{
    color: black !important;
}

.enrollmentListTable tr th {
    width: 220px;
    height: 66px;
}

.enrollmentListTable tr th input{
    color: black !important;
}

.selectCB {
	width: 20px !important;
	text-align: center !important;
}

.ui-selectonemenu-items tbody tr td {
    height: 20px;
    font-size: 15px;
    color: black;
}

.ui-selectonemenu-items li {
	font-size: 15px;
}

.ui-selectonemenu label {
	font-size: 15px;
	color: black !important;
}

.selectCheckboxHighLight {
	width: 18px; 
	height: 18px; 
	margin-left: auto; 
	margin-right: auto;
}

.ui-menubutton .ui-button {
    height: 100%;
    width: 100%;
}

.ellipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:180px;
}

.ellipsis-section {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:140px;
}

.ellipsis-comment {
	overflow: hidden;
	text-align: left !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:180px;
}

.ellipsis-assessment {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 210px;
}

table tr td textarea{
	text-align: left !important;
}

.saveAllBtn {
    margin: 10px 10px;
}

.assessmentColumn {
    min-width: 300px;
    width: 300px;
    text-align: center;
    height: 35px;	
}

.assessmentTitle {
	color: #377abd;
	font-size: 14px;
	white-space: pre-wrap;
}

.assessmentSubTitle {
    font-size: 12px;
    color: black;
}

.ui-inputfield {
	text-align: center;
	box-shadow: inset 0 1px 1px #8f8f8f !important;
}

.ui-inputfield:focus{
  box-shadow: inset 0 1px 5px #35a5e5 !important;
  border: 0.5px solid #35a5e5;
}

.ui-selectonemenu .ui-selectonemenu-label{
	text-align: center !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item{
    overflow: hidden;
    white-space: nowrap;
    width: 420px;
}

#moderationForm\:enrollmentList\:moderatedSelectOneMenu_panel.ui-selectonemenu-panel .ui-selectonemenu-list-item {
    width: 80px;
}

textarea {
	resize: none;
}

.section-fixedColumn {
    min-width: 140px !important; 
    width: 140px !important; 
}

.studentId-fixedColumn {
    min-width: 110px !important; 
    width: 110px !important; 
}

.markResultFixedColumn {
    min-width: 70px !important; 
    width: 70px !important;
}

.moderatedColumn {
    min-width: 110px !important; 
    width: 110px !important;
}

.nameColumn {
    min-width: 130px !important; 
    width: 180px !important;
}

.table-row-unmoderated {
	background: rgba(255,0,0,0.3);
}
 
 td.selectionDisabled .ui-chkbox{
    display: none;
    min-width: 120px !important; 
    width: 120px;
}

.selectAllCheckbox {
	margin: 0em 0em -66px 3px;
	z-index: 1000;
	position: relative;
	display:flex;
	width:40px;
    flex-direction: column;
    align-content: center;
    text-align: center;
    color:black;
    font-weight: bold; 
    font-size: 10px;
}

#courseData{
	height: 100%;
}

.ui-menubutton {
	margin: 0em 0.3em;
}

.ui-menubutton .ui-button {	
	color: black;
}

.ui-menu .ui-menuitem-text {
    float: left;
    font-size: 15px;
    margin: 0em 0.4em;
}

.ui-menuitem-icon {
	width: 20px;
}

.hyperlink{
    color: #0358ad !important;
    text-decoration: none;
}

.hyperlink:hover{
    text-decoration: underline !important;
    color: #333333 !important;
}

/* ====== Report Styling ======*/
.report-container-body{
	display: flex;
	flex: 1 1 auto;
	justify-content:center;
	width: 100%;
	height: auto;
}

.report-body{
	display:flex;
	width:80%;
	flex-direction:column;
	text-align: left;

}

.report-chart-table-container {
	padding: 30px 0px;
	display: flex;
	flex-direction: row;
	color: green;
	justify-content: space-around;
	height: 280px;
}

#report-chart, #report-chart-previous{
	padding-top: 10px;
	margin: 20px 20px;
	width: 40%;
	height: 250px;
}

#report-table, #report-table-previous {
	margin: 20px 20px;
	width: 35%;
}

#report-table, #report-table-previous table tr th {
    width: 33%;
    height: 20px;
    text-align:center;
    font-size: 12px;
}

#report-table, #report-table-previous table tr td {
    width: 33%;
    font-size: 12px;
}

#moderationForm\:enrollmentList_paginator_top{
	display:none;
}

@media (min-width: 786px){
	.ui-datatable-frozenlayout-left{
		width: 90% !important;
	}
	
	.ui-datatable-frozenlayout-right{
		width: 5% !important;
	}
	
	.selectAllCheckbox {
		margin: 0px 0px -66px 4px;
	}
}

@media (min-width: 992px){
	.ui-datatable-frozenlayout-left{
		width: 70% !important;
	}
	
	.ui-datatable-frozenlayout-right{
		width: 15% !important;	
	}
	
	.selectAllCheckbox {
		margin: 0px 0px -66px 4px;
	}
}

@media (min-width: 1200px){
	.ui-datatable-frozenlayout-left{
		width: 60% !important;
	}
	
	.ui-datatable-frozenlayout-right{
		width: 20% !important;
	}
	
	.selectAllCheckbox {
		margin: 0px 0px -66px 4px;
	}
}

@media (min-width: 1400px){
	.ui-datatable-frozenlayout-left{
		width: 50% !important;
	}
	
	.ui-datatable-frozenlayout-right{
		width: 25% !important;
	}
	
	.selectAllCheckbox {
		margin: 0px 0px -66px 3px;
	}
}

/* normal ipad 10.5*/
@media screen 
and (min-width : 768px) 
and (max-width : 1024px)  { 
    .ui-datatable-frozenlayout-left{
        width: 70% !important;
    }
    
    .ui-datatable-frozenlayout-right{
        width: 10% !important;
    }
    
    .selectAllCheckbox {
        margin: 0px 0px -66px 3px;
    }
    
    .moderatedColumn {
	    min-width: 90px !important; 
	    width: 90px !important;
	}
	.markResultFixedColumn {
	    min-width: 70px !important; 
	    width: 70px !important;
	}
}

/* ipad pro*/
@media screen 
  and (min-width: 1024px) 
  and (max-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .ui-datatable-frozenlayout-left{
        width: 70% !important;
    }
    
    .ui-datatable-frozenlayout-right{
        width: 15% !important;
    }
    
    .selectAllCheckbox {
        margin: 0px 0px -66px 3px;
    }
    
    .moderatedColumn {
	    min-width: 90px !important; 
	    width: 90px !important;
	}
	
	.markResultFixedColumn {
	    min-width: 70px !important; 
	    width: 70px !important;
	}
}

/* no line space between paragraph */
p.noLineSpace {
	margin: 0;
}