@-ms-viewport { width: device-width; }
/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* General Styles */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 2vh;
  font-size: 100%;
  font-family: 'Raleway', sans-serif;
  color: #333; 
  background-color: #f5f5f5; 
}

#login, #create {
  padding: 1vh;
  width: 100%;
  border: none;
  border-radius: 1vw;
  background-color: #fff; 
  box-shadow: 0 2vw 4vw rgba(0, 0, 0, 0.1); 
}

#login, #create {
  background-color: #0094B3;
  color: #fff;
  transition: background-color 0.2s ease;
}

#login:hover, #create:hover {
  background-color: #0056b3;
}

#federated {
  background-color: #0094B3;
  color: #fff;
  width: 95%;
  transition: background-color 0.2s ease;
  padding: 1.5vh 3vh;
  border-radius: 1vw;
}

#federated:hover {
  background-color: #0056b3;
}

#mobilelogon {
  background-color: #0094B3;
  color: #fff;
  width: 95%;
  transition: background-color 0.2s ease;
  padding: 1.5vh 3vh;
  border-radius: 1vw;
}

#mobilelogon:hover {
  background-color: #0056b3;
}

#username, #uName, #Username, #uPass, #uGroup, #uRole, #bcaddress, #bokey, #boval {
  padding: 1vh;
  width: 100%;
  border: 0.1vw solid #ddd;
  border-radius: 1vw;
}

#Username, #uPass {
  border: 0.1vw solid #ddd;
  border-radius: 1vw;
  background-color: #E8F0FE;
}

.buttoncheck {
  padding: 1vh 2vh;
  border: none;
  border-radius: 1vw;
  background-color: #007BFF;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.buttoncheck:hover {
  background-color: #0056b3;
}

@media (min-width: 600px) {
  #federated, #mobilelogon {
    width: 50%;
  }
}

@media (min-width: 900px) {
  #federated, #mobilelogon {
    width: 25%;
  }
}