.loginDesktopView { display: none; }

.loginDesktopViewlogo {
  display: block;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto; 
  width: 500px;
  text-align: center;
  box-sizing: border-box; 
  overflow: hidden; 
}

.logoDesktopViewImage { width: 100%; margin: auto; }

.loginDesktopViewTable {
  display: block;
  position: relative;
  width: auto;
  height: auto;
  margin-top: 10px;
  overflow: hidden;
  padding-bottom: 10px;
}

.loginDesktopViewRow {
  display: block;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  height: auto;
  width: auto;
  overflow: hidden;  
}

.loginDesktopViewRowHidden {
  display: none;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 10px;
  height: auto;
  width: auto;
  overflow: hidden;  
}

.loginDesktopViewLabel {
  font-family: Arial;
  border: solid 0px rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
  color: rgba(255,255,255,1);
  font-size: 20px;
  width: 120px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: right;
  text-shadow: 2px 2px 1px rgba(0,0,0,1);
  border-radius: 20px; 
  pointer-events: none;
  user-select: none;
  cursor: pointer;  
}

.loginDesktopViewTextbox {
  font-family: Arial;
  border: solid 1px rgba(40,40,40,0.6);
  background-color: rgb(255,255,255);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: border, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  padding: 10px;
  box-sizing: border-box; 
  direction: ltr;
}

.loginDesktopViewTextbox:hover { border: solid 2px rgba(40,40,40,1); }
.loginDesktopViewTextbox:focus { background-color: rgb(255,255,153); }

.loginDesktopViewTextboxError {
  font-family: Arial;
  border: Solid 2px rgba(255,102,102,1);
  background-color: rgba(255,204,204,1);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: border, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  padding: 10px;
  box-sizing: border-box; 
  direction: ltr;
}

.loginDesktopViewTextboxDisabled {
  font-family: Arial;
  border: Solid 2px rgba(160,160,160,1);
  background-color: rgba(200,200,200,1);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: border, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  padding: 10px;
  box-sizing: border-box; 
  direction: ltr;
  pointer-events: none;  
}

.loginDesktopViewSelectbox {
  font-family: Arial;
  border: solid 1px rgba(40,40,40,0.6);
  background-color: rgb(255,255,255);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  box-sizing: border-box; 
}

.loginDesktopViewSelectbox:hover { border: solid 2px rgba(40,40,40,1); }
.loginDesktopViewSelectbox:focus { background-color: rgb(255,255,153); }

.loginDesktopViewSelectboxError {
  font-family: Arial;
  border: Solid 2px rgba(255,102,102,1);
  background-color: rgba(255,204,204,1);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  box-sizing: border-box; 
}

.loginDesktopViewSelectboxDisabled {
  font-family: Arial;
  border: Solid 2px rgba(160,160,160,1);
  background-color: rgba(200,200,200,1);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  box-sizing: border-box; 
}

.loginDesktopViewButton {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to bottom left, rgb(120,120,120), rgb(80,80,80));  
  height: 40px;
  width: 150px;
  overflow: hidden;
  font-family: Arial;
  color: rgba(220,220,220,1);
  font-size: 24px;	
  text-shadow: 0px 0px 1px rgba(0,0,0,1);  
  border-radius: 20px;
  float: left;
  user-select: none;
  cursor: pointer;  
}

.loginDesktopViewButton:hover { background-image: linear-gradient(to bottom left, rgb(80,80,80), rgb(40,40,40)); }
.loginDesktopViewButton:active { background-image: linear-gradient(to bottom left, rgb(160,160,160), rgb(120,120,120)); }

.loginMobileView { display: none; }

.loginMobileViewlogo {
  display: block;
  position: relative;
  padding-top: 0px;
  padding-bottom: 10px;
  height: auto; 
  width: 300px;
  text-align: center;
  box-sizing: border-box; 
  overflow: hidden; 
}

.logoMobileViewImage { width: 100%; margin: auto; }

.loginMobileViewTable {
  display: block;
  position: relative;
  width: 300px;
  height: auto;
  margin-top: 10px;
  overflow: hidden;
  padding-bottom: 10px;
}

.loginMobileViewRow {
  display: block;
  position: relative;
  margin-top: 5px;
  height: auto;
  width: 300px;
  text-align: center;
  overflow: hidden;  
}

.loginMobileViewRowHidden {
  display: none;
  position: relative;
  margin-top: 5px;
  height: auto;
  width: 300px;
  text-align: center;
  overflow: hidden;  
}

.loginMobileViewLabel {
  font-family: Arial;
  border: solid 0px rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
  color: rgba(255,255,255,1);
  font-size: 20px;
  width: 300px;
  height: 30px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  text-shadow: 2px 2px 1px rgba(0,0,0,1);
  border-radius: 20px;
  pointer-events: none;
  user-select: none;
  cursor: pointer;  
}

.loginMobileViewTextbox {
  font-family: Arial;
  border: solid 1px rgba(40,40,40,0.6);
  background-color: rgb(255,255,255);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 300px;
  height: 40px;
  outline: 5px solid transparent;
  transition: border, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  padding: 10px;
  box-sizing: border-box; 
  direction: ltr;
}

.loginMobileViewTextbox:hover { border: solid 2px rgba(40,40,40,1); }
.loginMobileViewTextbox:focus { background-color: rgb(255,255,153); }

.loginMobileViewTextboxError {
  font-family: Arial;
  border: Solid 2px rgba(255,102,102,1);
  background-color: rgba(255,204,204,1);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 380px;
  margin-right: 10px;
  height: 40px;
  outline: 5px solid transparent;
  transition: border, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  padding: 10px;
  box-sizing: border-box; 
  direction: ltr;
}

.loginMobileViewTextboxDisabled {
  font-family: Arial;
  border: solid 1px rgba(160,160,160,0.6);
  background-color: rgb(200,200,200);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 300px;
  height: 40px;
  outline: 5px solid transparent;
  transition: border, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  padding: 10px;
  box-sizing: border-box; 
  direction: ltr;
  pointer-events: none;
}

.loginMobileViewSelectbox {
  font-family: Arial;
  border: solid 1px rgba(40,40,40,0.6);
  background-color: rgb(255,255,255);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 300px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  box-sizing: border-box; 
}

.loginMobileViewSelectbox:hover { border: solid 2px rgba(40,40,40,1); }
.loginMobileViewSelectbox:focus { background-color: rgb(255,255,153); }

.loginMobileViewSelectboxError {
  font-family: Arial;
  border: Solid 2px rgba(255,102,102,1);
  background-color: rgba(255,204,204,1);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 300px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  box-sizing: border-box; 
}


.loginMobileViewSelectboxDisabled {
  font-family: Arial;
  border: solid 1px rgba(160,160,160,0.6);
  background-color: rgb(200,200,200);
  color: rgba(0,0,0,1);
  font-size: 20px;
  width: 300px;
  height: 40px;
  outline: 5px solid transparent;
  transition: outline, background-color  0.5s;
  text-align: center;
  border-radius: 20px; 
  box-sizing: border-box; 
}


.loginMobileViewButton {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin-right: 75px;
  margin-top: 10px;
  background-image: linear-gradient(to bottom left, rgb(120,120,120), rgb(80,80,80));  
  height: 40px;
  width: 150px;
  overflow: hidden;
  font-family: Arial;
  color: rgba(220,220,220,1);
  font-size: 24px;	
  text-shadow: 0px 0px 1px rgba(0,0,0,1);  
  border-radius: 20px;
  user-select: none;
  cursor: pointer;  
}

.loginMobileViewButton:active { background-image: linear-gradient(to bottom left, rgb(80,80,80), rgb(40,40,40)); }

.revealPassowrd {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 5px;
  top: 5px;
  background-color: rgba(0,0,0,0);
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 20px;	 
  text-shadow: 0px 0px 1px rgba(0,0,0,1);  
  border-radius: 15px;
  user-select: none;
  cursor: pointer;  	
}
.revealPassowrd:hover { background-color: rgba(220,220,220,1); }
.revealPassowrd:active { background-color: rgba(180,180,180,1); }

.revealMobilePassowrd {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 5px;
  top: 35px;
  background-color: rgba(0,0,0,0);
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 20px;	 
  text-shadow: 0px 0px 1px rgba(0,0,0,1);  
  border-radius: 15px;
  user-select: none;
  cursor: pointer;  	
}
.revealMobilePassowrd:hover { background-color: rgba(220,220,220,1); }
.revealMobilePassowrd:active { background-color: rgba(180,180,180,1); }