@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root {
	--btn: var(--color-primary);
	;
	--btnhover: #b8680c;
	--iptbdrfoc: #b8680c;
	--black: #000;
	--iptbdr: #c8c8c8;
	--plchldr: #f8b31d;
	;
	--txtlbl: #000;
	--title: #000;
	--pri: #f3de1c;
	--sec: #b8680c;
	--ter: #ce6401;
}

body, html {
	font-family: 'Poppins', sans-serif;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 0;
	margin: 0;
}

body {
	background-color: var(--pri);
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
	align-items: center;
	justify-content: center;
	padding: 0px;
	margin: 0px;

}

.container img {
	width: 60px;
	height: 60px;
	padding: 10;
	border-radius: 50%;
	margin: 0;
	margin-top: 10px;
	border: 3px solid var(--pri);
}

.flogin {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: white;
	height: auto;
	width: 32%;
	text-align: center;
	padding: 10px;
	border-radius: 3px;
	position: relative;
	box-shadow: 0px 0px 10px 0px;
	padding-bottom: 20px;
}

.flogin form {
	width: 100%;

}

.flogin h3 {
	margin-top: 15px;
	margin-bottom: 25px;
	font-size: 22px;
	font-weight: 400;
}

.close {
	color: var(--ter);
	position: absolute;
	border: 2px solid var(--ter);
	width: 26px;
	height: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-family: 'trebuchet MS';
	font-weight: bold;
	background: var(--pri);
	text-decoration: none;
	top: -15px;
	right: -14px;
	border-radius: 50%;
	font-size: 14px;
	transition: background 500ms;
}

.close:hover {
	box-shadow: 0 0 0 2px white, 0 0 0 3px var(--sec);
	cursor: pointer;
	font-weight: 600;
}

.flogin input, select, .msg, .msg1 {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 90%;
	padding: 10px;
	font-size: 13px;
}

.flogin form input, select {
	padding: 12px;
	margin-bottom: 6px;
	border-radius: 3px;
	background-color: transparent;
	border: 1px solid var(--pri);
	outline: none;
}

.flogin form option, select {
	color: var(--plchldr);
}

.flogin form input::placeholder {
	color: var(--plchldr);
	font-size: 13px;
	padding-left: 2px;
}

.flogin form label {
	display: flex;
	text-align: left;
	padding: 2px 2px 2px 0px;
	background: transparent;
	align-items: left;
	margin: 0px;
	margin-left: 5%;
	font-size: 13px;
	font-weight: 400;
	color: var(--ter);

}

.flogin form input:focus {
	outline: none;
	border: 1px solid var(--sec);
	color: var(--sec);
}

.flogin form input[type="submit"] {
	border: none;
	background: var(--pri);
	font-weight: bold;
	color: var(--ter);
	margin: 15px 0 5px 0;
	transition: all .3s ease-in-out;
}

.flogin form input[type="submit"]:hover {
	background: var(--sec);
	color: white;
	transition: all .3s ease-in-out;
}

.msg {
	height: auto;
	border-radius: 4px;
	margin: auto;
	margin-bottom: 10px;
	padding: 10px;
	background: #fb8500;
	color: white;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	text-transform: lowercase;
	transition: all 0.5s ease;
}

.msg1 {
	height: auto;
	border-radius: 4px;
	margin: auto;
	margin-bottom: 10px;
	padding: 10px;
	background: #fb8500;
	color: white;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	text-transform: lowercase;
	transition: all 0.5s ease;
	display: none;
}

h6 {
	border-bottom: 1px solid whitesmoke;
	width: 85%;
	margin: 10px 0px 10px 0px;
	padding: 10px;
}

h6, h6 a {
	color: var(--ter);
}


/* MEDIA QUERY*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	body {
		background-color: var(--pri);
		;
	}

	.flogin h3 {
		color: white;
	}

	.flogin {
		background: var(--pri);
		;
		width: 100%;
		box-shadow: 0px 0px 0px 0px;
	}

	.flogin form input[type="submit"] {
		background: linear-gradient(to right, rgb(86, 86, 255), #74b3fc);
		color: #dcdcdc;
		margin-top: 5px;
	}

	.flogin form label {
		margin-bottom: 5px;
		color: var(--btnhover);
		display: none;
	}

	.flogin form input, select {
		height: 40px;
		border: 1px solid var(--pri);
		;
		margin-bottom: 15px;
		color: white
	}

	.flogin form input::placeholder {
		color: white;
	}

	h6, h6 a {
		font-size: 12px;
		font-weight: normal;
		color: var(--btnhover);
	}

	h6 {
		border-bottom: 1px solid rgb(158, 216, 239);
	}

	.flogin form input, select {
		border-radius: 20px;
	}

	.flogin form input:focus {
		border: 1px solid var(--btnhover);

	}

	.close {
		top: 0x;
		right: 20px;
	}



	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (min-width: 600px) {}

	/* Medium devices (landscape tablets, 768px and up) */
	@media only screen and (min-width: 768px) {
		...
	}

	/* Large devices (laptops/desktops, 992px and up) */
	@media only screen and (min-width: 992px) {
		...
	}

	/* Extra large devices (large laptops and desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) {
		...
	}