@CHARSET "ISO-8859-1";

/* Roboto font, from Google */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);

/* Material Design icons, from Google */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined);

@import url("theme.css");

/* Main elements */
html, body {
   background: var(--background-color);
   font-family: var(--main-font);
   color: var(--text-color-dark);
}

html, body {
   margin: 0;
}

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

body.hide-until-loaded {
   display:none;
}

.main {
   width: 100%;
   height: 100%;
}

.hidden {
   display: none;
}

.clickable {
   cursor: pointer;
}

/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Header */

.header {
   height: 75px;
   background: var(--accent-color-1);
   padding-left: 50px;
}

.footer {
   height: 90px;
   bottom: 0;
   left: 0;
   width: 100%;
   position: fixed;
   background: var(--gray-2);
}

.login-div {
   width: 300px;
}

.login-div .title {
   font-size: 1.5em;
   font-weight: bold;
   color: var(--text-color-dark);
   margin-bottom: 30px;
   text-align: center;
}

.action-button  {
   background: var(--accent-color-2);
   color: var(--text-color-light);
   font-size: .95em;
   border: none;
   height: 43px;
   width: 300px;
   border-radius: 25px;
   box-shadow: 0 3px 5px rgb(0 0 0 / 0.3);
}

.action-button:hover {
   background: var(--accent-color-3);
}

.action-button.gray {
   background: var(--gray-4);
}

.action-button.gray:hover {
   background: var(--gray-3);
}

.login-div .subscript {
   font-size: .80em;
   margin-top: 10px;
   float: right;
}

.login.div .subscript a {
   color: var(--accent-color-1);
}

/* Input */

.input-group {
   position: relative; 
   margin-bottom: 20px;
}

/* Input styling */
input[type="text"], 
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select {
   color: var(--text-color-dark);
   font-size: 16px;
   padding: 10px 10px 10px 15px;
   width: 300px;
   border: solid 1px var(--gray-2);
   border-radius: 5px;
   height: 60px;
}

/* Border on focus */
input[type="text"]:focus, 
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
   outline: solid 2px var(--accent-color-1);
}

/* Input label */
input[type="text"] ~ label,
input[type="password"] ~ label,
input[type="email"] ~ label,
input[type="number"] ~ label,
textarea ~ label,
select ~ label {
   color: var(--gray-3); 
   font-size:16px;
   font-weight:normal;
   position:absolute;
   pointer-events:none;
   left:15px;
   top:20px;
   transition:0.2s ease all; 
   -moz-transition:0.2s ease all; 
   -webkit-transition:0.2s ease all;
}

/* Minimize label on focus */
input:focus ~ label,
select:focus ~ label,
/* And when non-empty */
input:not(:placeholder-shown) ~ label,
select:has(option:checked[value]) ~ label,
select:has(option:checked[value=""]) ~ label {
   color: var(--accent-color-1);
   top:5px;
   font-size:12px;
}

/* Checkbox */
input[type='checkbox'] {
   accent-color: var(--accent-color-1);
   transform: scale(1.25);
}

/* Color border on invalid */
form.show-invalid input:invalid,
form.show-invalid select:invalid
{
   outline: solid 2px red;
}

select.small {
   font-size: 14px;
   width: 120px;
   height: 40px;
   padding: 0px 0px 0px 10px;
}

.main.splash {
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}

.main.splash:before {
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('/images/hallway.jpg');
    opacity:0.4;
}