#login {position:relative;width:100%;height:100%;top:0px;left:0px;background-color:#101010;}
#login {user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;}
#login_label {float:left;color:#5599FF;}
#slash_label {float:left;color:#333333;}
#register_label {float:left;color:#333333;}

#login_username {clear:both;float:left;background-color:#222222;border:1px solid #5599FF66;color:#E5E5E5;font-size:1.1rem;text-align:center;width:70%;margin-left:15%;margin-top:5%;border-radius:4px;margin-bottom:10px;}

#login_password_grid {

    width: 70%; /* Adjust size relative to middle column */
    aspect-ratio: 1 / 1; /* Ensures square shape (width = height) */
    background-color: #222222; /* Red for visibility */
    display: flex;
    align-items: center; /* Center content inside square */
    justify-content: center; /* Center content inside square */
	margin-left:15%;
	border-radius:4px;
	border:1px solid #5599FF66;


	  flex-flow: row wrap;
  position: relative;
}

.login_password_grid_cell {width:20%;height:20%;float:left;box-shadow:0 0 1px #5599FF66;flex: 1;flex-basis: 20%;display:flex;justify-content:center;align-items:center;}
.login_password_grid_cell_text {font-size:1.5rem;}



#login_button_container {position:absolute;width:10%;height:70%;top:calc(7% + 58px);right:0px;background-color:transparent;display:flex;justify-content:center;align-items:center;}
#login_button {border:0px;background-color:transparent;position:absolute;right:0px;;box-shadow:0 0 1px #5599FF;width:100%;padding-bottom:100%;background-color:transparent;display:flex;justify-content:center;}
#login_button_icon {position:absolute;width:100%;height:100%;top:0px;left:0px;}
#login_button_icon_top {position:absolute;top:28%;width:60%;left:24%;height:5%;transform:rotate(45deg);background-color:#5599FF;border-radius:4px;}
#login_button_icon_bottom {position:absolute;bottom:28%;width:60%;left:24%;height:5%;transform:rotate(-45deg);background-color:#5599FF;border-radius:4px;}



/*
#login_button {border:0px;background-color:transparent;position:absolute;right:10px;top:calc(50% - 20px);box-shadow:0 0 1px #5599FF;width:40px;height:40px;background-color:#333333;}
#login_button_text {font-size:2em;color:#5599FF;}
@media (max-aspect-ratio: 1/1) {
	#login_button {border:0px;background-color:transparent;position:absolute;right:10px;top:calc(50% + 20px);box-shadow:0 0 1px #5599FF;width:20px;height:20px;background-color:#333333;}
	#login_button_text {font-size:1em;color:#5599FF;}
}
*/
#symbol_keyboard {position:relative;width:50%;height:100%;top:0px;left:0px;background-color:transparent;border-radius:4px;display:none;}

@media (max-aspect-ratio: 1/1) {
	#symbol_keyboard {position:relative;width:100%;height:100%;top:0px;left:0px;background-color:transparent;}
}

#symbol_keyboard_options {width:100%;height:40px;background-color:transparent;display:flex;justify-content:space-around;}
#symbol_keyboard_catagory {width:100%;height:40px;background-color:#555555;display:flex;justify-content:space-around;background-color:transparent;box-shadow:0 0 1px #5599FF66;border-top-right-radius:4px;border-top-left-radius:4px;}
.symbol_keyboard_list {width:100%;height:110px;background-color:#222222;display:flex;justify-content:space-around;flex-flow:row wrap;border-bottom-right-radius:4px;border-bottom-left-radius:4px;box-shadow:0 0 1px #5599FF66;}
.symbol_keyboard_options_button {background-color:transparent;border:0px;color:#5599FF;font-size:1.1rem;width:100px;}
.symbol_keyboard_catagory_button {background-color:transparent;border:0px;color:#5599FF;font-size:1.1rem;}
.symbol_keyboard_catagory_button_text {filter:grayscale(0.9);opacity:0.5;}



#symbol_keyboard_list1 {display:none;}
#symbol_keyboard_list2 {display:none;}
#symbol_keyboard_list3 {display:none;}
#symbol_keyboard_list4 {display:none;}
#symbol_keyboard_list5 {display:none;}
#symbol_keyboard_list6 {display:none;}
#symbol_keyboard_list7 {display:none;}

.symbol_keyboard_list_button {background:transparent;border:0px;flex:1;flex-basis:14%;border-radius:4px;box-shadow:0 0 1px #5599FF66;}
.symbol_keyboard_list_button_text {font-size:1.1rem;}

#login_console {position:relative;top:0px;left:0px;width:60%;height:100%;background-color:transparent;box-shadow:0 0 0px #5599FF;overflow-y:hidden;resize:none;scrollbar-width: none;}
#login_console_text {width:80%;height:80%;margin-left:0%;margin-top:10%;background-color:#101010;color:#555555;border:0px;font-size:0.8rem;}
@media (max-aspect-ratio: 1/1) {
	#login_console {position:relative;top:0px;left:0px;width:100%;height:100%;background-color:transparent;}
	#login_console_text {width:100%;height:80%;margin-left:0%;margin-top:10%;background-color:#101010;color:#555555;border:0px;font-size:0.8rem;}

/*
	user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-o-user-select: none;
	border: none;
    outline: none;
	font-family:hack;
	*/
}