body {  padding: 0px; margin: 0px; font-family: Roboto; background: white; overflow: hidden; }
a { color: black; text-decoration: none; }
input { outline: none; padding-left: 4px; padding-right: 4px; }
select { outline: none; }

div.inline { display: inline-block; vertical-align: top; }
div.inline-right { display: inline-block; vertical-align: top; float: right; text-align: right; }

div.pageBackground { position: fixed; width: 100%; height: calc(100% - 41px); top: 41px; left: 0px; z-index: 0; background-image: url('../images/mobileBKG.jpg'); background-size: cover; background-repeat: no-repeat; backround-position: center center; opacity: 0.2; }
div.contentContainer { position: relative; width: calc(100% -2px); height: fit-content; border: 1px solid black; border-radius: 0px; overflow: hidden; box-shadow: 0px 2px 2px #888888; }
div.contentBackground { position: absolute; top: 0px; left: 0px; z-index: 3; width: 100%; height: 100%; background: white; opacity: 0.5; }
div.contentForeground { padding: 5px; position: relative; top: 0px; left: 0px; z-index: 4; width: calc(100% - 10px); height: auto; }

div.primaryGradient { background: rgb(17,27,68); background: linear-gradient(180deg, rgba(17,27,68,1) 0%, rgba(25,39,96,1) 50%, rgba(17,27,68,1) 100%); }
div.secondaryGradient { background: rgb(25,25,36); background: linear-gradient(180deg, rgba(25,25,36,1) 0%, rgba(45,45,45,1) 50%, rgba(25,25,36,1) 100%); }
div.disabledGradient { color: #efefef; background: rgb(97,97,97); background: linear-gradient(180deg, rgba(97,97,97,1) 0%, rgba(109,109,110,1) 50%, rgba(107,107,107,1) 100%); }
div.errorGradient { color: white; background: rgb(111,29,29); background: linear-gradient(180deg, rgba(111,29,29,1) 0%, rgba(177,0,0,1) 50%, rgba(111,29,29,1) 100%); }
div.row1 { background: white; }
div.row2 { background: #f2f8ff; }

div.loginBox { text-align: center; margin-top: 75px; }
div.loginHeaderIcon { font-size: 240px; line-height: 200px; color: #555555; text-shadow: 2px 2px 2px white; margin-top: 20px; }
div.loginHeaderText { font-size: 48px; text-shadow: 2px 2px 2px white; font-family: Roboto-CondensedBold; margin-bottom: -2px; }
div.loginHeaderSubText { font-size: 34px; text-shadow: 2px 2px 2px white; font-family: Roboto-CondensedBold; margin-bottom: 17px; color:  #666666; }

div.loginUsernameContainer { margin-top: 10px; text-align: center; }
div.loginPasswordContainer { margin-top: 10px; text-align: center; }
div.loginInputContainer { position: relative; }

div.loginInputIcon { position: absolute; top: 2px; left: 7px; font-size: 36px; color: #666666; }
input.loginInput { padding-left: 50px; font-size: 20px; width: 300px; height: 40px; border: 1px solid black; border-radius: 5px; overflow: hidden; background: white; box-shadow: 0px 2px 2px #999999; }
div.loginButtonsContainer { margin-top: 10px; text-align: center; }
div.loginButton { text-shadow: 1px 1px 1px black; color: white; margin-left: 5px; font-size: 22px; font-family: Roboto-CondensedBold; text-align: center; width: 164px; height: 40px; line-height: 42px; overflow: hidden; border: 1px solid black; border-radius: 5px; overflow: hidden; box-shadow: 0px 2px 2px #999999; }
div.registerButton  { text-shadow: 1px 1px 1px black; font-size: 22px; font-family: Roboto-CondensedBold; text-align: center; width: 130px; height: 40px; line-height: 42px; overflow: hidden; border: 1px solid black; border-radius: 5px; overflow: hidden; box-shadow: 0px 2px 2px #999999; }

div.loginRecoveryLink { margin-top: 12px; }
a.loginRecoveryLink { font-size: 16px; font-family: Roboto-Condensed; color: #666666; text-shadow: 1px 1px 1px white; }

div.topBar { position: absolute; top: 0px; left: 0px; z-index: 2; height: 40px; width: 100%; border-bottom: 1px solid #444444; box-shadow: 0px 2px 2px #888888; }
div.mainContent { padding: 5px; width: calc(100% - 10px); height: calc(100% - 76px); position: absolute; left: 0px; top: 66px; z-index: 1; overflow-x: hidden; overflow-y: scroll; }
div.logoutButton { margin-right: 5px; margin-top: 7px; width: 90px; height: 25px; line-height: 26px; overflow: hidden; border-radius: 5px; border: 1px solid black; text-align: center; font-family: Roboto-Bold; text-shadow: 1px 1px 1px black; }

div.buttonContainer { position: relative; width: calc((100% /3) - 5px); height: fit-content; border: 1px solid black; border-radius: 5px; overflow: hidden; box-shadow: 0px 2px 2px #888888; }
div.buttonContainerMiddle { position: relative; width: calc((100% /3) - 5px); height: fit-content; border: 1px solid black; margin-left: 5px; margin-right: 5px; border-radius: 5px; overflow: hidden; box-shadow: 0px 2px 2px #888888; }
div.dashboardButtonIcon { font-size: 65px; line-height: 70px; }
div.dashboardButtonText { font-family: Roboto-CondensedBold; font-size: 18px; }