body { background: #f4f6f9; font-family: verdana; height:100%; margin:0; padding:0;  }
    .rating-container { margin: 0 auto; background: white; padding: 10px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    /*.emoji { font-size: 3rem; cursor: pointer; transition: transform 0.2s ease-in-out; }*/
    .emoji:hover { transform: scale(1.3); }
    .selected { transform: scale(1.4); }
    .hidden { display: none; }
	.form-label{
		text-align:left;
		color:#171991;
		font-weight:700;
		font-size: 20px;
	}
	.header-bg{
		padding:6px 8px;
		color:#ec0677;
		border-top:1px solid #ec0677;
		border-bottom:1px solid #ec0677;
	}
	.form-text{
		text-align:left;
		color:red;
		font-size:13px;
		font-weight:500;
	}
	#responseMsg{font-weight:600;}
	.emoji{
	color:#fff;
	display:inline-block;
	width:25px;
	height:25px;margin:0.5px;border-radius:10px;
	line-height:24px;
	font-size: 1rem; cursor: pointer; transition: transform 0.2s ease-in-out;
	}
	.fontspan{
		font-size:18px;
	}
	.submit_button{
		    width: 25% !important;
    margin: auto;
    display: block;
	}
	@media (max-width:767.98px){
		.container-fluid{
			padding-left:0;
			padding-right:0;
		}
		.rating-option{
			font-size:0.75rem;
			padding:6px;
		}
		.fontspan{
			font-size:9px;
		}
		.form-label{
			text-align:left;
			color:#171991;
			font-weight:700;
		}
		#responseBox{
			font-size:12px;
			padding:20px;
		}
	}
	.fullscreen{
		width:90vw;
		margin:0 auto;
		/*display:flex;*/
		align-items:center;
		justify-content:center;
		background:#f8f9fa;
	}
	#responseBox{
		display:none;
		margin: 10px auto;
	    text-align: center;
	    padding: 20px;
	    border-radius: 12px;
	    color: #ec0677;
	    font-size: 20px;
	    font-weight: bold;
	    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
	}
	.response-success{
		background: linear-gradient(135deg, #0f3919, #00e827);
	}
	.response-error{
		background: linear-gradient(135deg, #dc345, #ff6b6b);
	}
	.response-icon{
		font-size:2rem;
		margin-right:10px;
	}