/*!
 *For Responsive Custom CSS for Student Portal
 
 */

/* Grid */

hr{
	border-top: 3px solid #f2f2f2;
	margin-top:10px !important;
	margin-bottom:10px !important;
}

.z-Index_0{
	z-index: 0 !important;
}

.z-BorderStyle{
	border:solid 1px #ccc;
}
.z-CustomHorizontalPanel{
	    display: initial !important;
}

.overflow-x-hidden{
	overflow-x:hidden !important;
}	

.container.z-FlowHorizontalPanel{
	all: revert !important;
	display:inline-block;
}

.horizontalpanel-inline.z-FlowHorizontalPanel{

}


.d-block.z-FlowHorizontalPanel{
	display:inline-block;
}

.CheckboxCustom .z-CheckBox{
	width:inherit;
}

.z-MarginBottom10LG{
	margin-bottom:10px;
}
	
.z-BoxStyle{
		background:#00587e;
		padding:10px;
		text-align:center;
		margin:10px;
		min-height:80px;
		justify-content: center;
		color:white;
}

.z-Padding5px{
	padding:5px;
}

.ListBoxStyle{
	background:#f3f3f3;
}

.ListBoxStyle select{
	background:none;
	padding:10px;
    background-image: none;
    overflow: hidden;
    border: none !important;
    min-height: 350px !important;
}
	
.ListBoxStyle option{
	background: none;
    border-bottom: solid 1px #ccc;
    padding: 15px;
    font-weight: bold;
}
.ListBoxStyle option:checked{
	color:white;
}
		

.SpaceAround{
	
}

.z-AppLogo{
	width:130px;
}
	
.z-ESELogo{
	width:60px;	
}
	
.z-MOELogo{
	width:45px;	
}

.z-AppLogoContainer{
	justify-content: flex-start;	
}

.z-PortalUserUtilsInfoPanel{
	justify-content: center;
	display: flex;
	flex-direction: row !important;
	
}

.z-PortalUserUtilsInfo{
	font-size:normal !important;
}

.z-SpaceBitween{
	justify-content: space-between;
}	


.z-ColorWhite{
	color:white !important;
}

.z-LineHeight25{
	line-height:25px;
}

.z-Gutter15{
	gap: 15px;
}

.z-Gutter5{
	gap: 5px;
}


.grid1{
	flex:1;
}

.grid2{
	flex:2;
}

.grid3{
	flex:3;
}

.grid4{
	flex:4;
}


.flex1{
	flex:1;
}

.flex2{
	flex:2;
}

.flex3{
	flex:3;
}

.flex4{
	flex:4;
}

.shadow{
    box-shadow: 0px 0px 5px 0px rgb(32 33 36 / 14%);
    border-color: rgb(223 225 229 / 48%);
}

.card{
    padding:30px;
    border-radius: 10px;
}

.mt10{
	margin-top:10px;
}


.mt20{
	margin-top:20px;
}

.pt10{
	padding-top:10px !important;
}

.btnsm{
	font-size: 12px !important;
    height: 25px !important;
    width: inherit !important;
    background: white !IMPORTANT;
    color: #00587e !IMPORTANT;
}

.btnsm:hover{
    background: #00587e !IMPORTANT;
    color: #fff !IMPORTANT;
}

.fontLarge{
	font-size:35px !important;	
}


.BorderBottom{
	border-bottom:solid 1px #ccc;	
}

.dot_green{
 	height: 15px;
    width: 15px;
    background-color: #24CA6D;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
}

.dot_red{
 	height: 15px;
    width: 15px;
    background-color: #E81919;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-top: 10px;
}

.coursebox{
    padding: 5px;
    text-align:center;
    inline-size: 130px;
    height:50px;
    overflow-wrap: break-word;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-grow:1;
}

.color1{
	border-left: solid 2px #FF7777;
	background: #FDF7F7;
}

.color2{
	border-left: solid 2px #27CEA7;
    background: #E4FEF8;
}

.color3{
	border-left: solid 2px #F6D34A;
    background: #FDF5D6;
}

.color4{
	border-left: solid 2px #5454DF;
    background: #F4F4FF;
}

.color5{
	border-left: solid 2px #F63286;
    background: #FFDEEC;
}

.color6{
	border-left: solid 2px #0091E2;
    background: #E5F5FE;
}


.FontXL{
	font-size:40px !important;
}

.primarycolor{
	color: #00587e !important;
}

.height100{
		    height: 100%;
}

/* Large desktops and laptops */
@media (min-width: 1200px) {
	.height100{
		    height: 100%;
	}
	
	.grid1{
	flex:1;
	}
	
	.grid2{
		flex:2;
	}
	
	.grid3{
		flex:3;
	}
	
	.grid4{
		flex:4;
	}
	
	.z-Status-Success{
		margin:0px 0px 10px 0px !important;
	}

    .z-FlexGrowBig{
    	flex-grow:1 !important;
    }
    
    .z-FlexGrowBigNone{
    	flex-grow: initial !important;
    }
   
        
	
	.z-grid-1{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 3px;}.z-grid-2{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3px;}.z-grid-3{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3px;}.z-grid-4{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3px;}.z-grid-5{display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 3px;}.z-grid-6{display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 3px;}.z-grid-7{display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 3px;}.z-grid-8{display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 3px;}.z-grid-9{display: grid; grid-template-columns: repeat(9, 1fr); grid-gap: 3px;}.z-grid-10{display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 3px;}.z-grid-11{display: grid; grid-template-columns: repeat(11, 1fr); grid-gap: 3px;}.z-grid-12{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}

	.zPortalCustomHeader{
		align-items: center;
	}
	
	.z-PortalUserUtilsInfoPanel{
		justify-content: center;
	    display: flex;
	    flex-direction: row !important;
	}
	
	.z-AppLogoContainer{
		justify-content: flex-start;
	}	
	
	.z-FlexGrowSM{
		flex-grow:initial;
	}

	
}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	
	.height100{
		    height: 100%;
	}
	
	.grid1{
		flex:1;
	}
	
	.grid2{
		flex:2;
	}
	
	.grid3{
		flex:3;
	}
	
	.grid4{
		flex:4;
	}
	
	.z-Status-Success{
		margin:0px 10px !important;
	}

	 .z-FlexGrowBig{
    	flex-grow:1 !important;
    }
    
    .z-FlexGrowBigNone{
    	flex-grow: initial !important;
    }

	
	.z-grid-1{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 3px;}.z-grid-2{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3px;}.z-grid-3{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3px;}.z-grid-4{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 3px;}.z-grid-5{display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 3px;}.z-grid-6{display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 3px;}.z-grid-7{display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 3px;}.z-grid-8{display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 3px;}.z-grid-9{display: grid; grid-template-columns: repeat(9, 1fr); grid-gap: 3px;}.z-grid-10{display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 3px;}.z-grid-11{display: grid; grid-template-columns: repeat(11, 1fr); grid-gap: 3px;}.z-grid-12{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}
	
	.zPortalCustomHeader{
		align-items: center;
	}
	
	.z-PortalUserUtilsInfoPanel{
		justify-content: center;
	    display: flex;
	    flex-direction: row !important;
	}
	
	.z-HeaderConent{
	padding:10px !important;
	}
	
	.z-AppLogoContainer{
		justify-content: initial;
	}
	
	.z-FlexGrowSM{
		flex-grow:initial;
	}	
	
	.z-PortalUserUtilsInfo{
	font-size:normal !important;
}
	
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
	
	.z-MenuArea{
		padding-top: 165px !important;
	}
	
	.height100{
		    height: initial;
	}
	
	.grid1{
		flex:100%;
	}
	
	.grid2{
		flex:100%;
	}
	
	.grid3{
		flex:100%;
	}
	
	.grid4{
		flex:100%;
	}
	
	.z-LoginBox{
		box-shadow: none !important;
	}
	
	.z-Status-Success{
		margin:0px 0px !important;
	}
	
    .z-FlexGrowNone{
    	flex-grow: initial;
    }
	
	.z-LogoAlign {
	margin-right:20px !important;
}

.z-MenuPanel{
	padding: 0px 0 !important;
}
.z-BoldFontBig{
	
}

.grid-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 3px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3px;
}
	

	.zPortalCustomHeader{
		align-items: center;
	}
	
	
	
	.z-ListBox{
		width:100% !important;
		margin: 0px !important;
	}
	
	.z-FooterArea{
		min-height:20px;
	}
	
	.z-AddMarginSM{
		margin:10px;
	}
	
	.z-AddMarginRight10{
		margin-right:10px;
	}
	
	.z-FullWidthSM{
		width:100% !important;
	}
	
	.z-BorderBottomSM{
		border-bottom:solid 1px #51899b;
	}
	.z-DisplayNoneSM{
		display:none;
	}
	
	.z-MarginRight0SM{
		margin-right:0px !important;
	}
	
	.z-MarginLeft0SM{
		margin-left:0px !important;
	}
	
	.z-MarginTop10SM{
		margin-top:10px;
	}
	
	.z-MarginBottom10SM{
		margin-bottom:10px !important;
	}
	
	.z-MarginBottom0SM{
		margin-bottom:0px;
	}
	
	.z-ClearMargin0SM{
		margin:0px !important;
	}
	
	.SpaceAround{
	justify-content: space-around;
	}

	.HeaderInfoSmallDevice{
	justify-content: center;
    background: white;
    padding: 0px 15px;
    width:100%;
    border-top: solid 1px #f3f3f3 !important;
	}

	.z-HeaderConent{
		margin: 5px 0 !important;
	}
	
	.z-AppLogo{
		width:40px;
	}
	
	.z-ESELogo{
		width:40px;
	}
	
	.z-MOELogo{
		width:30px;
	}
	.z-AppLogoContainer{
		justify-content: space-between;
		padding:10px 15px;
	}
	
	.z-FlexGrowSM{
		flex-grow:1;
	}
	
	
	
	.z-PortalUserUtilsInfo{
	font-size: 12px !important;
}


	
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
	
	.z-MenuArea{
		padding-top: 165px !important;
	}
	
	.height100{
		    height: initial;
	}
	
	.grid1{
		flex:100%;
	}
	
	.grid2{
		flex:100%;
	}
	
	.grid3{
		flex:100%;
	}
	
	.grid4{
		flex:100%;
	}
	
	.z-LoginBox{
		box-shadow: none !important;
	}
	
	.z-Status-Success{
		margin:0px 10px !important;
	}
	
	.z-LogoAlign {
	margin-right:20px !important;
}
	
.z-MenuPanel{
	padding: 0px 0 !important;
}
	.z-BoldFontBig{
	
	}
	
	.horizontalpanel-inline.z-FlowHorizontalPanel{
		all: revert !important;
		display:inline;
	}
	
	.z-AddMarginRight10{
		margin-right:10px;
	}
	
	.z-AppLogo{
		width:40px;
	}
	
	.z-ESELogo{
		width:40px;
	}
	
	.z-MOELogo{
		width:30px;
	}
	
	.z-AppLogoContainer{
		justify-content: space-between;
		padding:10px 15px;
	}
	
	.z-FlexGrowSM{
		flex-grow:1;
	}
	

	
	
/* Grid */
.z-grid-1{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-2{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-3{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-4{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-5{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-6{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-7{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-8{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-9{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-10{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-11{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-12{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}


/* Button */	
.btn-block{display: block;width: 100%;}
	
	
	.z-d-hide-sm{
		display:none !important;
	}
	
	.z-align-center{
		justify-content: center;
	}
	
	
	
	.z-AppResizePanel{
		width:100%;
	}

	.z-AppResizePanel{
		width: 100%;
	}
	
	.z-PortalUserUtilsPanel{
		justify-content: center !important;
	    flex-wrap: wrap !important;
	}
	
	.zPortalCustomHeader{
		align-items: center;
    	justify-content: center;
    	background: red;
    	display: flex;
    	flex-direction: column-reverse;
	}
	
	.zPortalCustomProfile{
		text-align: center;
    	justify-content: center;
    	align-items: center;
    	display: flex;
	}
	
	.z-PortalUserUtilsInfoPanel{
		width:initial;
	}
	
	.z-PortalLanguageButton{
		margin: 0px !important;
	}
	
	.z-PortalLogo{
		margin-top:20px;
		margin-bottom:20px;
	}
	
	.z-ListBox{
		width:100% !important;
		margin: 0px !important;
	}
	
	.z-FooterArea{
		min-height:20px;
	}
	
	.z-AddMarginSM{
		margin:10px;
	}
	
	.z-FullWidthSM{
		width:100% !important;
	}
	
	.z-BorderBottomSM{
		border-bottom:solid 1px #51899b;
	}
	.z-DisplayNoneSM{
		display:none;
	}
	
	.z-MarginRight0SM{
		margin-right:0px !important;
	}
	
	.z-MarginLeft0SM{
		margin-left:0px !important;
	}
	
	.z-MarginTop10SM{
		margin-top:10px;
	}
	
	.z-MarginBottom10SM{
		margin-bottom:10px !important;
	}
	
	.z-PaddingTop10SM{
		padding-top:10px;
	}
	
	.z-PaddingBottom10SM{
		padding-bottom:10px !important;
	}
	
	.z-MarginBottom0SM{
		margin-bottom:0px;
	}
	
	.z-ClearMargin0SM{
		margin:0px !important;
	}
	
	.SpaceAround{
	justify-content: space-around;
}

	.HeaderInfoSmallDevice{
	justify-content: center;
    background: white;
    padding: 15px;
    width:100%;
    border-top: solid 1px #f3f3f3 !important;
}

	.z-HeaderConent{
		margin: 5px 0 !important;
	}
	
	.z-AddMarginRight10{
		margin-right:10px;
	}
	
	
.z-PortalUserUtilsInfo{
	font-size:12px !important;
}


.z-BoxStyle{
	margin:0px !important
}

.z-CustomButton{
	min-width:fit-content !important;
	height:32px !important;
	font-size:15px !important;
		
}

.z-FieldLabel, .gwt-Label{
	font-size:0.99em;
}

.dataGridHeader{
	font-size:0.99em;
}		    
	
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
	
	.z-MenuArea{
		padding-top: 165px !important;
	}
	
	.z-LoginBox{
		box-shadow: none !important;
	}
	
	.z-Status-Success{
		margin:0px 10px !important;
	}
	
	.z-FlexGrowSMNone{
    	flex-grow: initial !important;
    }
    
    .z-FlexGrowNone{
    	flex-grow: 1;
    }

.z-LogoAlign {
	margin-right:10px !important;
}

.z-MenuPanel{
	padding: 0px 0 !important;
}
	
.z-BoldFontBig{
	font-size:15px !important;
}	
	
.horizontalpanel-inline.z-FlowHorizontalPanel{
		all: revert !important;
		display:inline;
}





/* Grid */
.z-grid-1{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-2{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-3{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-4{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-5{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-6{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-7{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-8{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-9{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-10{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-11{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}.z-grid-12{display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 3px;}
	
/* Button */	
.btn-block{display: block;width: 100%;}
	
	
	.z-d-hide-sm{
		display:none !important;
	}
	
	.z-align-center{
		justify-content: center;
	}
	
	
	
	.z-AppResizePanel{
		width:100%;
	}

	.z-AppResizePanel{
		width: 100%;
	}


	
	.z-PortalUserUtilsPanel{
		justify-content: center !important;
	    flex-wrap: wrap !important;
	}
	
	.zPortalCustomHeader{
		align-items: center;
    	justify-content: center;
    	background: red;
    	display: flex;
    	flex-direction: column-reverse;
	}
	
	.zPortalCustomProfile{
		text-align: center;
    	justify-content: center;
    	align-items: center;
    	display: flex;
	}
	
	.z-PortalUserUtilsInfoPanel{
		width:100%;
	}
	
	.z-PortalLanguageButton{
		margin: 0px !important;
	}
	
	.z-PortalLogo{
		margin-top:20px;
		margin-bottom:20px;
	}
	
	.z-ListBox{
		width:100% !important;
		margin: 0px !important;
	}
	


.z-AddMarginRight10{
		margin-right:0px;
	}
	
	.z-PortalUserUtilsInfo{
}

.z-ProfileBanner{
	margin-top: 0px !important;
}

.z-Top50{
	top: 38px !important;
}

.z-ClearPaddingSM{
	padding:0px !important;
}

.z-PortalUserUtilsInfo{
	font-size: 12px !important;
    font-weight:normal !important;
}

.z-BoxStyle{
	margin:0px !important
}

.z-CustomButton{
	min-width:fit-content !important;
	height:32px !important;
	font-size:15px !important;	
}

.z-FieldLabel, .gwt-Label{
	font-size:0.99em;
}

.dataGridHeader{
	font-size:0.99em;
}	

}