@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans');
@import url('https://fonts.googleapis.com/css2?family=Cormorant');

html,
body {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

body {
  background-color: #f1f5f9;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40vh;
  width: 300px;
  padding: 50px 100px;
  background-color: rgb(255 255 255 / 80%);
  border-radius: 32px;
}

.form-signin {
  margin: auto;
  width: 100%;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin h1 {
  font-weight: normal;
  text-align: center;
  font-size: 22px;
  margin-top: 60px;
  margin-bottom: 30px;
}

.password-link {
  font-size: 14px;
  color: #9B0508;
  float: right;
}

.form-signin label {
  font-size: 14px;
  padding-bottom: 8px;
  display: block;
}

.form-signin input {
  font-family: 'Open Sans';
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-signin input::placeholder {
  font-family: 'Open Sans';
  font-weight: normal;
  text-align: left;
  letter-spacing: 0px;
  color: #1A1A1A;
  opacity: 0.5;
}

.form-signin input[name="username"], .form-signin input[name="password"] {
  padding-left: 40px;
}

.form-signin .login-icon-container {
  position: absolute;
}

.form-signin .login-icon-container i {
      position: relative;
      top: 10px;
      left: 8px;
      scale: 0.8;
      color: #797A7A !important;
}

.form-signin .accedi-button {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  font-weight: normal;
  color: #F7F8F8;
  background-color: #9B0608;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  letter-spacing: 0px;
  font-family: 'Open Sans';
}

.form-signin .oidc-button {
	margin-top: 0;
	padding: 0;
}

.oidc-button a {
	color: #FFFFFF;
	display: block;
	padding: 10px;
	text-decoration: none;
	text-transform: capitalize;
}

.accedi-link {
  display: block;	
}

.error-message {
    color: red;
    font-size: 14px;
}

.alert {
	margin-top: 16px;
    border-radius: 6px;
    padding: 14px 16px 10px;
    box-sizing: border-box;
}

.alert .alert-title {
    vertical-align: top;
}

.alert.warn {
    border: 1px solid #f87171;
    background: #fef2f2;
}

.alert.warn .alert-title {
	color: #7f1d1d;
}

.alert.success {
    border: 1px solid #4ade80;
    background: #f0fdf4;
}

.alert.success .alert-title {
	color: #14532d;
}

/****** LOGIN MICROSOFT ******/

.microsoft-logo {
  width: 26px;
  height: 26px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  gap: 1px;
}

.square {
  width: 13px;
  height: 13px;
}

.red {
  background-color: #f25022;
  grid-column: 1;
  grid-row: 1;
}

.green {
  background-color: #7fba00;
  grid-column: 2;
  grid-row: 1;
}

.blue {
  background-color: #00a4ef;
  grid-column: 1;
  grid-row: 2;
}

.yellow {
  background-color: #ffb900;
  grid-column: 2;
  grid-row: 2;
}

.logo1 {
  text-align: left;
  font: normal normal 600 32px/39px Cormorant;
  letter-spacing: 0px;
  color: #9B0608;
  margin-right: 10px;
}

.logo2{
  text-align: left;
  font: normal normal 100 32px/39px Cormorant;
  letter-spacing: 0px;
  color: #9B0608;
}

.alignCenter{
  /*justify-content: center;
  display: flex;*/
  text-align: center;
}

.testo1{
  font: normal normal normal 20px/20px Open Sans;
  margin-top: 80px;
}

.testo2{
  font: normal normal normal 14px/14px Open Sans;
  margin-top: 16px;
}

.micosoftLogin a {
	color: #1A1A1A;
	padding: 10px;
	text-decoration: none;
  display: flex;
  border: 1px solid #707070;
  width: 210px;
  padding: 10px;
}

.microsoft{
  padding-left: 50px;
  padding-right: 50px;
  width: 400px;
  /*height: 400px;*/
}

.microsoft-button{
  margin-top: 80px;
  justify-content: center;
  display: flex;
}