@charset "UTF-8";
*{margin:0; padding:0; box-sizing:border-box; text-decoration:none;list-style:none;}
html{font-size:10px; height: 100%; background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%); background-size: cover; background-attachment: fixed;}
body{font-family: 'Poppins', sans-serif; font-size:1.4rem; height:100%;}
img{width:100%;border:none; height:auto; display:block;}
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:#777}
input[type=button]{-webkit-appearance:none; -moz-appearance:none;appearance:none;}
a, a:link, a:active{text-decoration:none;}

ul{margin:0 0 3rem;}
ul li{margin-bottom:1rem; padding-left:3rem; position:relative;}
ul li:before{position:absolute; top:1px; left:0; content:'➤'; font-size:1.3rem; font-weight:600; color:#ef6422}

ol{margin:0 0 3rem 3rem;  list-style-type:decimal;}
ol li{margin-bottom:2rem; list-style-type:decimal; padding:0.5rem 1rem;background:#f7f7f7; line-height:3rem;}
ol li span{display:flex;}
ol ::marker{color:#ef6422; font-weight:500; font-size:1.6rem}

header{background:#fff;}
.logo{display:flex; justify-content:center;}
.logo img{margin:auto; width:15rem;}
.header_txt{background:#12669c; color:#f7f7f7; font-size:2rem; text-align:center; padding:0.8rem 0}

main{padding:2rem}

/* Buttons Row */
.buttons_row{padding-top:5rem}
.buttons_row, .buttons_row a{display:flex; flex-direction:column; gap:2rem; font-size:1.8rem;}
.buttons_row a{gap:0.5rem; background:#fff; color:#12669c;  padding:1rem; text-align:center; border-radius:1rem; border:1px solid #12669c;}
.buttons_row a:last-child{border:1px solid #ef6422; color:#ef6422;}

/* Instruction Page */
.instructions{padding-bottom:6rem;}
.instructions h1{background:#ef6422; color:#f7f7f7; font-size:2rem; font-weight:500; border-radius:1rem 1rem 0 0; padding:1rem 2rem}
.instruction_list{background:#fff; border:1px solid #ef6422;padding:0.5rem 2rem 2rem; border-radius:0 0 1rem 1rem}
.instruction_list h2{font-size:1.6rem; font-weight:500; margin-bottom:1rem;}
.instruction_list h2 small{color:#ef6422;}
.agree_form{display:flex; flex-direction:column; gap:1rem; line-height:3rem;}
.agree_txt span{display:flex; }
.action_butt{display:flex; justify-content:center; gap:2rem; margin-top:2rem;}
.submit_butt{width:max-content;background:#12669c; color:#f7f7f7; font-size:1.6rem; font-weight:400; padding:0.5rem 2rem; border-radius:1rem;}

/* Registration Form - 1 */
.registration_form, .grievance_form, .grievance_status{padding-bottom:6rem;}
.registration_form h1, .grievance_form h1, .grievance_status h1{color:#ef6422; border-bottom:1px solid #ef6422; font-size:2rem; font-weight:400; margin-bottom:2rem;}
.registration_form h2, .grievance_form h2{color:#12669c;; font-size:1.8rem; font-weight:400;margin-bottom:2rem; text-align:center;}
.rf_container, .rf_col, .rf_col_2, .gf_container, .gf_col{display:flex; flex-direction:column; gap:1rem;}
.rf_col_3{display:flex; justify-content:center}
sup{color:red;}
.inpbox, .largeinpbox{padding:1rem; background:#fff; border:1px solid #ef6422;}
.largeinpbox{height:10rem}

/* Verfiy Mobile & Email */
.vf_container{margin-bottom:3rem; display:flex; flex-direction:column; gap:1rem;}
.vf_instruction_box{background:#eee; border:1px solid #ddd; padding:2rem}
.vf_instruction_box ul{margin:0}
.vf_instruction_box li span{display:flex;}

.status_form{margin-bottom:3rem; display:flex; flex-direction:column; gap:1rem; font-size:1.6rem;}
.sf_row{display:flex; gap:2rem; align-items:center;}
.app_details{padding-bottom:6rem; line-height:2.7rem;}
.app_details span{font-size:1.6rem; font-weight:500; border-bottom:1px solid #000}
.app_details p{margin-bottom:1rem;}
.app_details table{background:#fff; border-collapse:collapse; width:100%;}
.app_details table td{border-collapse:collapse; border:1px solid #12669c; padding:1rem;}
.app_details table td:first-child{font-weight:500}
.app_details table td a, .app_details table td b{color:#ef6422;}
.app_details table td b{font-weight:500}

footer{background:#12669c; color:#f7f7f7;  text-align:center; height:5rem; line-height:2rem; position:fixed; width:100%; bottom:0; left:0; padding:0.5rem 2rem;}

@media only screen and (min-width:360px)
	{
	}
@media only screen and (min-width:480px)
	{
	}
@media only screen and (min-width:600px)
	{
		.rf_container, .vf_container{width:70%; margin:auto}
		.gf_col{flex-direction:row; gap:2rem}
		.gf_col > .label{width:18rem;}
		.gf_col > .input_field{flex:1}
	}
@media only screen and (min-width:768px)
	{
		.header_txt{font-size:2.5rem; font-weight:500}
		.buttons_row{flex-direction:row; gap:5rem; justify-content:center; align-items:center; padding-top:8rem;}
		.buttons_row a{flex:1}

		.rf_container, .vf_container{width:100%; flex-direction:row; justify-content:space-between;}
		.rf_col_3, .vf_col_3, .vf_col_4{align-self:flex-end;}
		.rf_col_3 > input.submit_butt{padding:0.7rem 2rem;}
		.vf_col_3 > input.submit_butt, .vf_col_4 > input.submit_butt{padding:0.9rem 2rem; cursor:pointer; font-weight:400; font-size:1.6rem}
		.vf_col_4 > input.submit_butt{background:#ef6422}

		.grievance_form h2{text-align:left}
		.gf_container{gap:3rem; width:70%}

		footer{padding:0; height:4rem; line-height:4rem;}
	}
@media only screen and (min-width:1024px)
	{	
		header{border-bottom:0.3rem ridge #12669c; border-top:0.3rem ridge #ef6422; padding:0}
		.pageContainer{width:980px; max-width:980px; margin:0 auto}	
		.header{display:flex; align-items:center; gap:5rem; padding:0;}
		.logo img{margin:0; width:10rem;}
		.header_txt{background:transparent; color:#111; font-size:3.5rem; font-weight:600}
		main{padding:2rem 0; display: flex; flex-direction: column; min-height:50vh;}
		.main{padding:2rem 4rem; background:#f7f7f7; flex-grow:1; border-radius:1rem}
		.buttons_row{padding-top:20rem;}
		.buttons_row a{transition:background 0.5s ease; font-size:2rem;}
		.buttons_row a:hover{background:#12669c; color:#f7f7f7;}
		.buttons_row a:last-child:hover{background:#f06522;}

		.instructions h1{font-size:2.5rem;}

		ol li{margin-bottom:1rem; font-size:1.5rem; padding:0.5rem 1rem;background:#fef7f3; line-height:3rem;}

		.agree_form{flex-direction:row; align-items:center; gap:3rem; padding:0 2rem;}
		.chk_box_style{width:3rem; height:3rem;}


		/* Registration Form - 1 */
		.registration_form h1, .grievance_form h1, .grievance_status h1{font-size:2.5rem; font-weight:500; margin-bottom:4rem;}
		.registration_form h2, .grievance_form h2{font-size:2rem; font-weight:500;text-align:left;}
		.rf_container, .vf_container{width:70%; justify-content:start; margin:0}
		.vf_container{width:60%;margin:0 0 3rem}
		.rf_col{width:20rem;}
		.rf_col_2{flex:1}
		.inpbox{background:#fff; border:1px solid #ef6422;}

		label, .gf_col > .label{font-size:1.6rem; font-weight:500; width:22rem;}
		label{width:auto;}
		.largeinpbox{height:15rem}
		.gf_container input.submit_butt{font-weight:400; font-size:1.6rem;}
		.gf_container .btn2 > input.submit_butt{background:#ef6422;}

		.app_details{font-size:1.6rem; line-height:3rem; width:70%}
		.app_details span{font-size:2rem; font-weight:400; color:#12669c; border-bottom:1px solid #12669c;}
	}