@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#login.custom:has(.log-in) #login-tg span:before {
	color: #ccc;
}

#login.custom:has(.log-out) #login-tg span:before {
	color: rgb(var(--theme-color));
}

#login.custom {

	#login-tg {
		margin-top: 5px;
		padding: 0 15px;

		span {
			padding: 2px 12px 2px 5px;
			background-color: #000;
			font-size: 12px;
			color: #fff;
			clip-path: polygon(
				0 0,
				100% 0,
				calc(100% - 10px) 100%,
				0 100%
			);
		}

		span:hover {
			cursor: pointer;
		}
	}

	#login-fm {
		display: none;

		.log-in {
			padding: 5px;
			border: none;
			border-radius: 5px;
			background: rgba(255,255,255,0.5);

			dl {
				padding: 10px;
				border: none;
				border-radius: 5px;
				background: rgba(255,255,255,0.7); 
			}

			dt {
				border: none;
				border-radius: 7px;
				color: #FFF;
				background: rgb(var(--theme-color));
			}

			dt:hover a {
				border-radius: 7px;
			}

			dt,
			input,
			button {
				height: 26px;
			}

			div.error {
				border: none;
				background: #000;
				color: #cc0000;
				border-radius: 5px;
			}
		}

		.log-out {
			padding: 5px;
			border: none;
			border-radius: 5px;
			background: rgba(255,255,255,0.5);

			dl {
				padding: 10px;
				border: none;
				border-radius: 5px;
				background: rgba(255,255,255,0.7); 
			}

			dt {
				width: 100%;
				border: none;
				border-radius: 7px;
				color: #FFF;
				background: rgb(var(--theme-color));
			}
		}
	}
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 768px) {
/************************************************************************************************************************/

#login.custom .login-body {
	padding: 0 15px;
}

/************************************************************************************************************************/
}

@media screen and (min-width: 769px) {
/************************************************************************************************************************/

#login.custom {
	margin: 0 auto;
	width: calc(var(--step) * 1);
	min-width: 550px;

	#login-tg {
		padding: 0;
	}
}

/************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/