@font-face {
  font-family: 'VAG Rounded';
  src: url('../Files/FONTS/VAGRounded.otf?v=<?php echo time(); ?') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   
  align-items: center;
  padding-top: 60px;             
  color: #FFA500;
  background-color: #808080;
  font-family: 'VAG Rounded', Arial, sans-serif;
  background-image: url('../Files/IMG/fond_new.jpg?v=<?php echo time(); ?');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center ;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="text"],
input[type="password"]
{
      text-align: center;
      font-family: 'VAG Rounded',Arial, sans-serif;
}

.cloud {
  background: rgba(255,255,255,0.18);      
  border-radius: 24px;                    
  box-shadow: 0 8px 32px rgba(31,38,135,0.12); 
  backdrop-filter: blur(8px);              
  -webkit-backdrop-filter: blur(8px);      
  border: 1px solid rgba(255,255,255,0.25);
  padding: 1px 40px;                     
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
}

.green {
  display: inline-block;
  text-align:center;
  padding: 10px 14px;
  border-radius: 40px;
  background: #232729;
  color: #50C878;      
  font-size: 1em;
  border: 2px solid #65e06d; 
  box-shadow: 0 0 8px #27ff8a30;
  margin-top: 10px;
}

.orange {
  border: 2px solid #FFA500;
  border-radius: 5px;
  background: #232729;
  color: #FFA500;
  padding: 8px;
  font-size: 1.1em;
  outline: none;
  margin-bottom: 20px;
}

.white {
  font-family: 'VAG Rounded', Arial, sans-serif;
  display: inline-block;
  text-align: center;
  padding: 6px 20px;         
  border-radius: 40px;
  background: #232729;
  color: #fff;           
  font-size: 1em;
  border: 2px solid #fff; 
  box-shadow: 0 0 6px #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  margin-bottom: 10px;
}

.white:hover {
  background: #fff;
  color: #232729;
  border-color: #fff;
}

.red {
  margin:15px;
  display: inline-block;
  text-align:center;
  padding: 10px 14px;
  border-radius: 40px;
  background: #232729;
  color: #FF0000;      
  font-size: 1em;
  border: 2px solid #FF0000;
  box-shadow: 0 0 6p #FF00004c;
  margin-top: 10px;
}

.redimension {
  width: 140px;
  height: auto;
  margin-bottom: 15px;
}

.alert {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alert .orange {
  margin-top: 10px;
  margin-bottom: 0px;
}

.alert .red {
  margin-top:0px;
  margin-bottom: 0px;
}
.alert .white{
  margin-top:0px;
}

.password-container {
  position: relative;
  width: fit-content;
  display: inline-block;
}

.password-container input {
  padding-right: 40px;
  padding-left: 40px;
}

.eye {
  color:#FFA500;
  position: absolute;
  right: 12px;
  top: 35%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0;
  line-height: 1;
}

.cross {
  color:#FFA500;
  position: absolute;
  left: 12px;
  top: 35%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0;
  line-height: 1;
}