@media (max-width: 600px) {
	
	
		.logo-r {
			margin-right: -0.8rem !important;
		}
	
	
}



		
		@font-face {
			font-family: 'Questrial';
			src: url('../fonts/Questrial-Regular.ttf') format('truetype'), 
			url('../fonts/Questrial-Regular.woff2') format('woff2'),
			url('../fonts/Questrial-Regular.woff') format('woff');
		}

		@font-face {
			font-family: 'Kanit';
			src: url('../fonts/Kanit-Black.ttf') format('truetype'), 
			url('../fonts/Kanit-Black.woff2') format('woff2'),
			url('../fonts/Kanit-Black.woff') format('woff');
		}

		body {
            font-family: 'Questrial', sans-serif;
            background: #f7f7f7;
            color: #123;
            max-width: 620px;
            margin: 60px auto;
            padding: 0 24px;
			overflow: visible !important; 
			height: auto !important;
        }
		
		 h1 a {
            font-family: 'Kanit', sans-serif;
            font-size: 2.4rem;
            margin-bottom: 6px;
            color: #123;
			text-decoration: none;
        }

        .tagline {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 32px;
        }

        .section-title {
            font-family: 'Kanit', sans-serif;
            font-size: 1.3rem;
            margin: 36px 0 12px 0;
            color: #123;
        }

        input[type="text"],
        input[type="email"],
        textarea,
		select,
        input[type="file"] {
			font-family: 'Questrial', sans-serif;
            width: 100%;
            padding: 12px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            box-sizing: border-box;
            background: #fff;
            margin-bottom: 14px;
        }

        input[type="file"] {
            background: #fafafa;
            cursor: pointer;
        }

        textarea { resize: vertical; }
		
		.topic-choices {
			font-family: Questrial, sans-serif; 
			color: #777; 
			padding: 12px 16px 12px 8px
		}

        button {
            padding: 12px 20px;
            background: #123456;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: 0.2s;
            font-family: 'Kanit', sans-serif;
        }

        button:hover { background: #123; }
		
		.copyBtn {
			background: #f7f7f7;
			color: #123;
			border: none;
			font-family: Questrial, sans-serif;
			height: 24px;
			margin: -10px 0 -10px 0;
			padding: 0 6px;
		}
		
		.copyBtn:hover {
			background: #f7f7f7;
			color: blue;
			border: none;
			font-family: Questrial, sans-serif;
			height: 24px;
			margin: -10px 0 -10px 0;
			padding: 0 6px;
		}

        .info-btn {
            background: #dc0d0d;
            margin-bottom: 20px;
        }

        .info-btn:hover { background: #a00; }

        .modal {
			position: fixed;
			display: none;
			inset: 0;
			background: rgba(0,0,0,0.6);
			justify-content: center;
			align-items: flex-start;
			padding: 20px 0;
			overflow: hidden;
			z-index: 999;
		}

		.modal-content {
			background: #fff;
			width: 90%;
			max-width: 600px;
			max-height: 90vh;
			overflow-y: auto;
			padding: 20px;
			border-radius: 6px;
			min-height: 0;
			flex-shrink: 1;
		}
		
        .close {
            float: right;
            cursor: pointer;
            font-size: 22px;
            color: #555;
        }

        .close:hover { color: #000; }

        small {
            display: block;
            margin-top: -8px;
            margin-bottom: 14px;
            color: #777;
            font-size: 0.85rem;
        }
		
		.required-field {
			position: relative;
			display: inline-block;
			width:100%;
		}

		.required-field::after {
			content: "*";
			color: #c00;
			position: absolute;
			left: -10px;
			top: 42%;
			transform: translateY(-50%);
			font-size: 1rem;
		}
		
		.also_required-field {
			position: relative;
			display: inline-block;
			width:100%;
		}

		.also_required-field::after {
			content: "*";
			color: #00c;
			position: absolute;
			left: -10px;
			top: 14%;
			transform: translateY(-50%);
			font-size: 1rem;
		}

		.warning-box {
			display: none; 
			color: red; 
			margin: 10px 0 32px 0; 
			font-weight: bold;
		}
		
		.upload-row {
			display: inline-block;
			align-items: center;
			gap: 6px;
			font-family: Questrial, sans-serif !important;
		}

		.clear-file {
			height: 25px;
			padding: 2px 9px 0 6px;
			font-size: 16px;
			line-height: 1;
			color: #000;
			border: 1px solid #777;
			background: #e9e9e9;
			cursor: pointer;
			font-family: Questrial, sans-serif;
			border-radius: 3px;
			display: none;
		}
		
		.clear-file:hover { background: #f7f7f7; }
		
		.form_place { margin-bottom: 156px; }
		
		.scales {
			display: block;
			margin: 64px 0 40px 28px;
		}
		
		a.report-server_link {
			font-weight: bold;
			text-decoration: none;
			color: #000;
		}
		
		.more-space {
			font-size: .8rem; 
			font-style: italic; 
			margin-top: 256px; 
			display: block;
			padding: 0.8rem 1rem;
			background: #f7f7f7;
			border-left: 3px solid #123;
			line-height: 1.6;
			border-radius: 6px;
		}