/* 
	Custom Stylesheet

	Last Updated : 22/02/12

	(C) PEOPLUS Studio, All rights reserved.
	https://peoplus.studio/
*/

	/**
	 * Common Designs
	 *
	 * Common Elements for Layout
	 */
	div.move-to-back {
		cursor: pointer;
	}

	/**
	 * Index
     *
	 * References
	 * - https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius
	 */
	article.context-login {
		position: relative;
		min-height: 400px;
		z-index: 0;
	}

	article.context-login::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 1px;
		border-radius: inherit;
		background: #D1D8E4;
		mask: linear-gradient(#fff 0 0);
		-webkit-mask: 
			linear-gradient(#fff 0 0) content-box, 
			linear-gradient(#fff 0 0);
		-webkit-mask-composite: destination-out;
		mask-composite: exclude;
	}

	article.context-login .main-icons .main-icons-img {
		width: 100%;
		height: 57px;
		background-image: url('../images/icons/peoplus_main_icons_img.png');
		background-size: 173px 57px;
		background-repeat: no-repeat;
		background-position: center;
	}

	article.context-login .main-icons .exclamation {
		position: relative;
		width: 100%;
		height: 100px;
	}

	article.context-login .main-icons .exclamation::before {
		content: "\f071";
		position: absolute;
		top: 50%;
		left: 50%;
		
		color: #2952A1;
		font-family: "Font Awesome";
        font-size: 5rem;
        line-height: 1.75rem;
		font-weight: 500;
		text-align: center;

		transform: translate(-50%, -50%);
	}
	article.context-login .main-icons .exclamation.red::before {
		color: #D03A3A;
	}
	article.context-login .main-icons .exclamation.yellow::before {
		color: #E4CC00;
	}

	article.context-login .elements .user-id-box,
	article.context-login .elements .user-password-box {
		display: inline-block;
	}

	article.context-login .elements .user-id-box::before,
	article.context-login .elements .user-password-box::before {
		position: absolute;
		margin: 0;
		padding: 0 0.35rem 0;
		font-family: "Font Awesome";
		font-weight: 500;
		color: #1A1E27;
	}

	article.context-login .elements .user-id-box::before {
		content: "\f2bb";
	}

	article.context-login .elements .user-password-box::before {
		content: "\f084";
	}

	article.context-login .elements .user-id-box:hover::before,
	article.context-login .elements .user-id-box:focus::before,
	article.context-login .elements .user-password-box:hover::before,
	article.context-login .elements .user-password-box:focus::before,
	article.context-login .elements .user-id-box:focus-within::before,
	article.context-login .elements .user-password-box:focus-within::before {
		color: #2952A1;
	}

	article.context-login .elements .textfield {
		width: 300px;
		height: 33px;
		padding-left: 1.75rem;
	}

	article.context-login .elements .login-button {
		width: 300px;
		height: 37px;
	}

	article.context-login div.timer::before {
		content: '\f017';
		margin: 0;
		padding: 0 0.35rem 0;
		font-family: "Font Awesome";
		font-weight: 500;
		color: inherit;
	}

	article.context-login div.refresh > *{
		cursor: pointer;
	}

	article.context-login div.refresh::before {
		content: '\f2f1';
		margin: 0;
		padding: 0 0.35rem 0;
		font-family: "Font Awesome";
		font-weight: 500;
		color: inherit;
	}
	
	@media (max-width: 640px) {
		article.context-login::before {
			content: "";
			position: absolute;
			padding: 1px 0 1px 0;
		}
	}

	/*
	 * PMS Designs
	 */
	article.article-common div.articles div.devices-wrapper {
		align-items: flex-start;
		flex-direction: row;
	}

	article.article-common div.articles div.devices-wrapper div.device-item {
		margin-right: 1rem;
	}

	article.article-common div.articles div.devices-wrapper div.device-item:last-child {
		margin-right: 0;
	}

	@media (max-width: 640px) {
		article.article-common div.articles div.devices-wrapper {
			flex-direction: column;
		}
	
		article.article-common div.articles div.devices-wrapper div.device-item {
			width: 100%;
			margin-bottom: 1rem;
			margin-right: 0;
		}
	}

	/*
	 * Guide Designs
	 */
	article.context-guide {
		position: relative;
		min-height: 400px;
		z-index: 0;
	}

	article.context-guide .elements .how-to-login {
		width: 100%;
		height: 500px;

		background-image: url('../images/descriptions/peoplus_instant_main_img.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	@media (max-width: 640px) {
		article.context-guide .elements .how-to-login {
			width: 100%;
			height: 300px;
	
			background-image: url('../images/descriptions/peoplus_instant_main_img.png');
			background-position: top center;
			background-size: 350px;
			background-repeat: no-repeat;
		}
	}

	/*
	 * Banner Designs
	 */
	div.banner-middle.universe::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1rem;
		background: linear-gradient(to right, #588FF9, #2952A1, #D03A3A, #7CC623, #E4CC00);
		display: inline-block;
	}

	@media (max-width: 767px) { /* 1024px */
		article.banner-main.system-series-5::before,
		article.banner-large.belief-in-quality::after {
			content: "";
			display: none;

			opacity: 0.0;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		article.banner-large.belief-in-quality {
			background-image: url('../images/banners/peoplus_belief_for_quality_bg_img.png');
			background-size: 105%;
			background-repeat: no-repeat;
			background-position: center;
		}

		article.banner-large.belief-in-quality::before {
			background-image: url('../images/banners/peoplus_belief_for_quality_hand_img.png');
			background-size: 20rem;
			background-repeat: no-repeat;
			background-position: -8rem 8rem;

			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
	}

	/**
	 * Mission and Slogan
	 */
	article.mission::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1rem;
		background: linear-gradient(to right, #588FF9, #2952A1, #D03A3A, #7CC623, #E4CC00);
		display: inline-block;
	}

	article.mission div.special-text {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}

	@media (max-width: 767px) { /* 1024px */
		article.mission div.special-text {
			font-size: 1rem;
			line-height: 1.5rem;
		}
	}

	/**
	 * Account part
	 */

	article.article-common div.articles div.profile-img-wrap {
		position: relative;
		width: 150px;
		height: 150px;

		border-radius: inherit;

		cursor: pointer;
	}

	article.article-common div.articles div.profile-img-wrap::before {
		content: '\f00d';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: calc(100% / 2.75);

		color: rgba(255, 255, 255, 0.0);
		font-family: "Font Awesome";
        font-size: 2.5rem;
		font-weight: normal;
		line-height: 1.0;
		text-align: center;
		border-radius: inherit;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	article.article-common div.articles div.profile-img-wrap div.profile-img {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	article.article-common div.articles div.profile-img-wrap:hover::before {
		content: '\f00d';
		position: absolute;

		color: rgba(255, 255, 255, 1.0);
		background-color: rgb(26, 30, 39, 0.8);

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	article.article-common div.articles div.profile-img-wrap:hover div.profile-img {
		background-size: auto 110%;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	
	@media (max-width: 767px) { /* 1024px */
		article.article-common div.articles div.profile-img-wrap {
			width: 125px;
			height: 125px;
		}
	}