body {
    font-family: 'Monster', sans-serif;
    text-align: center;
    user-select: none;
}

h1 {
    color: #333;
}

.container {
    padding: calc(25px / var(--base-size) * 1em);}

.form {
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 8;
    width: 100vw;
    height: 100vh;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
}

.main-content {
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 8;
    width: 80vw;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
}
.formRegist{
    background-color: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    z-index: 8;
    width: 80vw;
    height: 100vh;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    justify-content: center;
}
.logoImage {
    width: 40%;
}

.form>div {
    margin-bottom:  2.625em;
}

.form>img {
    margin-bottom: 1.875em;
}

.formRegist>div {
    margin-bottom:  2.625em;
}

.formRegist>img {
    margin-bottom: 1.875em;
}
.form-detail{
    width:15.575em;
    position:relative;
}

.form-detail-alt{
    width:100%;
    position:relative;
}
.inputCustom{
    width: 100%;
    border:none;
    height: 22px;
    text-align: center;
}
.error-message{
    font-size: 0.5em;
    color:red;
}

.input-group{
    display: flex;
    position: relative;
}
.add4emMargin{
    margin-top:4em;
}

il{
        height: 1.5px;
        width: 100%;
        display: block;
        background: #e30079;
}
.form-line{
    margin-bottom: 1.685em;
}
.texting{
font-size:0.8em;
width:26em;
}
.center{
    text-align: center;
}

.left{
    text-align: left;
}
.left-panel{
    position:fixed;
    z-index:9;
    top:1.5625em;
    left:1.5625em;
}

.right-panel{
    position:fixed;
    z-index:9;
    top:1.5625em;
    right:1.5625em;
    color:#e30079;
    font-size: 1.25em;
    font-weight: bold;
}
.fixed-right{
    height:1.5em;
}



/* toast */
/* style.css
* { 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
} 

body { 
	min-height: 97vh; 
	background: #d4d2a5; 
	background-image: linear-gradient( 
		to right, 
		#f1bebe 0%, 
		#f3d87f 100%
	); 
	padding: 3em 0; 
	font-family: Arial, sans-serif; 
}  */

h3 { 
	text-align: center; 
} 

.toast-buttons { 
	max-width: 700px; 
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	gap: 15px; 
	margin: 2em auto; 
} 

.toast-row { 
	display: flex; 
	justify-content: center; 
	margin: 1em 0; 
	padding: 1rem; 
	flex-wrap: wrap; 
} 

button.custom-toast { 
	padding: 0.5rem 1rem; 
	border: none; 
	color: #fff; 
	font-weight: 500; 
	border-radius: 5px; 
	box-shadow: 2px 2px 10px
		rgba(0, 0, 0, 0.785); 
	cursor: pointer; 
	width: 150px; 
	margin: 0.5em; 
	transition: filter 0.2s ease-in-out, 
		transform 0.3s ease-in-out; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-size: 1rem; 
	background-color: transparent; 
	outline: none; 
	background: #3498db; 
	color: #fff; 
} 

button.custom-toast:hover { 
	filter: brightness(0.9); 
} 

button.success-toast { 
	background-color: #2ecc71; 
} 

button.danger-toast { 
	background-color: #e74c3c; 
} 

button.info-toast { 
	background-color: #3498db; 
} 

button.warning-toast { 
	background-color: #f1c40f; 
} 

h1 { 
	color: green; 
} 

.toast { 
	position: fixed; 
	top: 25px; 
	right: 25px; 
	max-width: 300px; 
	background: #fff; 
	padding: 0.5rem; 
	border-radius: 4px; 
	box-shadow: -1px 1px 10px
		rgba(0, 0, 0, 0.3); 
	z-index: 1023; 
	animation: slideInRight 0.3s 
			ease-in-out forwards, 
		fadeOut 0.5s ease-in-out 
			forwards 3s; 
	transform: translateX(110%); 
} 

.toast.closing { 
	animation: slideOutRight 0.5s 
		ease-in-out forwards; 
} 

.toast-progress { 
	position: absolute; 
	display: block; 
	bottom: 0; 
	left: 0; 
	height: 4px; 
	width: 100%; 
	background: #b7b7b7; 
	animation: toastProgress 3s 
		ease-in-out forwards; 
} 

.toast-content-wrapper { 
	display: flex; 
    flex-direction: column;
	justify-content: space-between; 
	align-items: center; 
} 

.toast-icon { 
	padding: 0.35rem 0.5rem; 
	font-size: 1.5rem; 
} 

.toast-message { 
	flex: 1; 
	font-size: 0.9rem; 
	color: #000000; 
	padding: 0.5rem; 
} 

.toast.toast-success { 
	background: #95eab8; 
} 

.toast.toast-success .toast-progress { 
	background-color: #2ecc71; 
} 

.toast.toast-danger { 
	background: #efaca5; 
} 

.toast.toast-danger .toast-progress { 
	background-color: #e74c3c; 
} 

.toast.toast-info { 
	background: #bddaed; 
} 

.toast.toast-info .toast-progress { 
	background-color: #3498db; 
} 

.toast.toast-warning { 
	background: #ead994; 
} 

.toast.toast-warning .toast-progress { 
	background-color: #f1c40f; 
} 

@keyframes slideInRight { 
	0% { 
		transform: translateX(110%); 
	} 

	75% { 
		transform: translateX(-10%); 
	} 

	100% { 
		transform: translateX(0%); 
	} 
} 

@keyframes slideOutRight { 
	0% { 
		transform: translateX(0%); 
	} 

	25% { 
		transform: translateX(-10%); 
	} 

	100% { 
		transform: translateX(110%); 
	} 
} 

@keyframes fadeOut { 
	0% { 
		opacity: 1; 
	} 

	100% { 
		opacity: 0; 
	} 
} 

@keyframes toastProgress { 
	0% { 
		width: 100%; 
	} 

	100% { 
		width: 0%; 
	} 
}
.logout{
		margin-top: 9em;
		font-size: 16px;
		padding: 0.5em;
		width: 2em;
		height: 2em;
		display: flex;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		opacity: 0.8;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: #e30079;
		border-radius: 50%;
	position:fixed;
	bottom: 1.5625em;
	left: 1.5625em;
}