* {
	box-sizing: border-box;
}

.container {
	min-height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.image-container {
	display: flex;
	margin-bottom: 40px;
	align-items: center;
	justify-content: center;
}

.logo-container {
	display: flex;
	margin-bottom: 3px;
	margin-top: 5px;
	align-items: center;
	justify-content: center;
	float: left;
	background-color: white;
  margin-top: 50px;
}

input#username, input#password, input#newPasswordA, input#newPasswordB,
	input#email {
	width: 100%;
	height: 22px;
}

label.username-label, label.password-label, label.email-label {
	font-weight: bold;
}

.username-control {
	margin-top: 10px;
	margin-bottom: 15px;
}

.password-control {
	margin-bottom: 15px;
}

.email-control {
	margin-bottom: 15px;
}

.remeber-me {
	margin-bottom: 15px;
}

.container form {
	display: flex;
	flex-direction: column;
}

.login-container {
	padding: 40px;
	background: #ffffff;
	border-radius: 20px;
	width: 430px;
}

body {
	background: #6464643b;
}

.requirements-message {
   width:100%;
   display: flex;
   justify-content: flex-end
}

.requirements-message > div{
	 color: black;
   width:fit-content;
   margin-right: 20px;
   background: #ffffff38;
   padding: 10px;
   border-radius: 10px;
}

.other-login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
}

.other-login-container span {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}

.button {
	width: 100%;
	padding: 8px;
	font-weight: bold;
	background: #5fce708c;
	border: none;
	border-radius: 22px;
}

.button:disabled{
	opacity: 0.5;
  pointer-events: none;
}

.button:hover {
	background: #3097408c;
}

.button.login-SSO {
	width: 100%;
}

:focus-visible {
	outline: #0d54188c auto 1px;
}

.separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 30px 0px 30px 0px;
	font-weight: bold;
}

.separator::before, .separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #545252;
}

.separator:not(:empty)::before {
	margin-right: .25em;
}

.separator:not(:empty)::after {
	margin-left: .25em;
}

 @keyframes shake {
    	0% {
    		transform: translate(1px, 1px) rotate(0deg);
    	}

    	10% {
    		transform: translate(-1px, -2px) rotate(-1deg);
    	}

    	20% {
    		transform: translate(-3px, 0px) rotate(1deg);
    	}

    	30% {
    		transform: translate(3px, 2px) rotate(0deg);
    	}

    	40% {
    		transform: translate(1px, -1px) rotate(1deg);
    	}

    	50% {
    		transform: translate(-1px, 2px) rotate(-1deg);
    	}

    	60% {
    		transform: translate(-3px, 1px) rotate(0deg);
    	}

    	70% {
    		transform: translate(3px, 1px) rotate(-1deg);
    	}

    	80% {
    		transform: translate(-1px, -1px) rotate(1deg);
    	}

    	90% {
    		transform: translate(1px, 2px) rotate(0deg);
    	}

    	100% {
    		transform: translate(1px, -2px) rotate(-1deg);
    	}
    }

.login-container.error {
	animation: shake 0.5s;
}

.reset-password {
	width: 430px;
}

.change-password {
	width: 400px;
}

.invalid {
	border: 1px solid #cc0000;
}

html, body{
	height:100%;
}

body {
	/* Imposta l'immagine di sfondo */
	background-image: url('../../images/login.jpg');
	background-size: cover;
	/* Puoi usare 'contain' per fare in modo che l'immagine sia completamente visibile */
	background-position: center center;
	background-repeat: no-repeat;
	height: 100%;
	margin: 0 !important;
	
}

.input-group {
	position: relative;
}

.input-group input[type="password"] {
	padding-right: 30px; /* Spazio per il pulsante */
}

.input-group button {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	background-color: #ccc;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}


.input-group button.password-toogle {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.input-group button.show-password {
	  background-image: url(../../images/visible.svg);
}

.input-group button.hide-password {
	  background-image: url(../../images/invisible.svg);
}

.message{
		display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ce3a3a;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    margin-bottom: 15px;
}

.ok{
		display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #3ece3b;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    margin-bottom: 15px;
}

.varius{
	  display: flex;
    justify-content: space-between;
}

.expanded{
	flex:1;
	flex-basis: 50px;
}