@charset "UTF-8";
:root{
	--bgPrimary:#08136f;
	--lightbgPrimary:#b30000;
	--bgSecondary:#5062f8;
	--lightbgSecondary:#edf8fa;
	--darkbg:#08136f;
	--light: #f5f5f5;
	--accentCol:#08136f ;
	--white: #fff;
	--black: #222;
	--grey: #999;
	--lightgrey: #ccc;
	--gradient: linear-gradient(to right, #08136f, #00dbf7, #08136f,#00dbf7);
	--gradient2: linear-gradient(to right top, #e1fcff, #f0f1fb, #f4fcff, #fbfdff, #ffffff, #fbfdff, #f4fcff, #f0f1fb, #e1fcff);
	--shadow:2px 2px 4px 0 rgba(0, 0, 0, 0.6);
	--lightshadow:2px 2px 4px 0 rgba(0, 0, 0, 0.1);
}
*{margin:0; padding:0; box-sizing:border-box; text-decoration:none;list-style:none;}
html{font-size:10px;}
body{font-family: 'Poppins', sans-serif; font-size:1.4rem; color:var(--black);  padding-bottom:8rem;}
img{width:100%;border:none; height:auto; display:block;}
button, input, select, textarea{font-family: 'Poppins', sans-serif; width:100%; resize:none; font-size:1.4rem;border:none;}
input:focus, select:focus, textarea{outline:none}
::placeholder{color:var(--darkbg)}
select:invalid{color:var(--darkbg)}
input[type=button], input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; -moz-appearance:none;appearance:none;}
a, a:link, a:active{text-decoration:none;}
.clearfix:before, .clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom: 1;}
sup{color:red; margin:0 0.2rem; font-size:1.6rem; position:absolute;}

header{box-shadow:var(--shadow)}


.header_top_row_content{display:flex; flex-direction:column; gap:0.5rem}
.htrc_right{display:flex; justify-content:space-between;background:var(--bgPrimary); padding:0.8rem 2rem; color:var(--white); align-items:center;}
.h_divider{display:none;}
#unv_name{display:flex; flex-direction:column;}
.center_name{color:var(--white)}
.sign_out{font-size:2rem; cursor:pointer}
.sign_out a{color:var(--white);}
.brand{display:flex; padding:0.5rem 2rem 1rem;}
.brand img{width:25rem; height:auto}

main{padding:0; padding-top:12rem; background:var(--lightbgPrimary);}

ol{margin:0 0 2rem 2rem;  list-style-type:decimal;}
ol li{margin-bottom:0.5rem; list-style-type:decimal; padding-left:1rem}
ol ::marker{color:var(--darkbg); font-weight:500; font-size:1.4rem}

.error_msg{position:absolute; width:fit-content; top:1rem; left:50%; transform:translateX(-50%); background:#ff5353; color:var(--white); padding:0.2rem 2rem;}
.input_field{position:relative;}
.inp_err_msg{position:absolute; top:calc(100% + 0.5rem); right:0;color:#ff5353;}
.inp_succ_msg{position:absolute; top:calc(100% + 0.5rem); right:0; color:green;}

/* ul{margin:0 0 3rem;}
ul li{margin-bottom:1.5rem; padding-left:3rem; position:relative;}
ul li:before{position:absolute; top:0.1rem; left:0; content:'➤'; font-size:1.3rem; font-weight:600; color:var(--accentCol)} */

#hupaging{font-size:1.2rem; margin:0 0 2rem; background:var(--light); border:1px solid var(--bgPrimary); padding:1rem;}
#hupaging ul{display:flex; gap:0.5rem; line-height:3rem; justify-content:center; align-items:center}
#hupaging ul li b{display:flex; height:3rem; border:1px solid var(--lightgrey); padding:0 1.5rem; color:#000; background:var(--lightbgPrimary); text-decoration:none;}
#hupaging ul li span, #hupaging ul li a{display:flex; height:3rem; border:1px solid var(--accentCol); padding:0 1.5rem; color:#000; background:var(--lightbgPrimary); text-decoration:none;}
#hupaging ul li span:hover, #hupaging ul li a:hover{background:var(--bgSecondary); color:#fff; border:1px solid var(--accentCol);}
.pselected:hover{background:var(--bgSecondary); color:#fff;}


footer{background:var(--darkbg); color:#fff; position:fixed; bottom:0; width:100%; height:4rem; display:flex; justify-content:center; align-items:center; color:var(--white);}

@media only screen and (min-width:768px)
	{
		.header_top_row_content{flex-direction:row; justify-content:space-between; gap:0; align-items:center; padding:0.5rem 2rem;}
		.htrc_right{order:2; background:transparent; color:var(--darkbg); flex:1; justify-content:end; gap:1rem; padding:0; align-items:flex-start}
		.h_divider{display:inline-block;}
		#unv_name{font-size:1.8rem; gap:0.5rem; font-weight:600}
		#unv_name span{background:var(--accentCol); color:var(--white); display:flex; padding:0.5rem 1rem;}
		#unv_name span.center_name{background:none; font-weight:bold; color:var(--darkbg);}
		.sign_out a{color:var(--darkbg);}
		.brand{order:1; padding:0.5rem 0}
		.header_bottom_row, .header_bottom_row_left{background:var(--darkbg); height:5rem;}
	}
@media only screen and (min-width:1024px)
	{	
		.header_bottom_row{height:4rem; padding:0 2rem;}
		
	}
@media only screen and (min-width:1280px)
	{	
		html{font-size:9.5px}
		.pageContainer{width:120rem;  max-width:120rem;  margin:0 auto}	
		#leftAlign .pageContainer{width:120rem;  max-width:120rem; margin:0}
		header{border-top:0.3rem solid var(--darkbg); background:var(--gradient2); position:fixed; top:0; width:100%; z-index:2}		
		.header_top_row_content, .header_bottom_row{padding:0;}
		#leftAlign  .header_top_row, #leftAlign .header_bottom_row{padding:0 2rem;}
		.brand{padding:1rem 0}
		
		#unv_name{text-transform:uppercase; font-weight:400; font-size:1.4rem}		

		main{padding:0; padding-top:12rem; background:var(--lightbgPrimary);}
		#leftAlign main{padding:13rem 2rem 0;  position:relative;}
		#leftAlign footer{justify-content:start; padding:0 2rem;}
	}

@media only screen and (min-width:1600px)
	{
		.pageContainer{width:140rem;  max-width:140rem;}	
	}

@media only screen and (min-width:2000px)
	{
		html{font-size:15px}
		.pageContainer{width:180rem; max-width:180rem;}	
	}

@media only screen and (min-width:2500px)
	{
		html{font-size:20px}
		.pageContainer{width:220rem; max-width:220rem;}	
	}