@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: 100px;
	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;
}

/* Sidebar */

.side-bar {
   background: var(--background-color);
   width: 205px;
   height: 100%;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.side-bar .menu-header {
	height: 130px;
}

.side-bar .site-selection {
	background: var(--accent-color-3);
	height: 30px;
	color: var(--text-color-light);
	padding-left: 15px;
	padding-right: 15px;
	font-weight: bold;
	justify-content: space-between;
}

.side-bar .site-selection:hover {
   background: var(--accent-color-1);
}

.side-bar .current-site {
   background: var(--accent-color-2);
   height: 55px;
   color: var(--text-color-light);
}

.side-bar .arrow-right {
  width: 0; 
  height: 0; 
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 20px solid var(--accent-color-2);
  position: absolute;
  top:-55px;
  left:180px;
}

.side-bar .menu-item {
	width: 100%;
	height: 50px;
}

.side-bar .menu-item .menu-icon {
	color: var(--accent-color-3);
   margin-left: 15px;
   margin-right: 10px;
}

.side-bar .menu-item:hover {
   background: var(--gray-2);
}

.side-bar .menu-item.selected .label {
   font-weight: bold;
}

#site-menu-container {
	z-index: 10;
}

.site-menu {
	color: var(--accent-color-1);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	position: absolute;
	top: 130px;
   border-radius: 0px 20px 20px 0px;
}

.site-menu .site-menu-item {
   height: 56px;
   white-space: nowrap;
   padding-right: 50px;
}

.site-menu .site-menu-item:hover {
   background: var(--gray-2);
}

.site-menu .selected-icon-container {
   width: 30px;
}

.site-menu .selected-icon {
   width: 7px;
   height: 7px;
   border-radius: 5px;
   background-color: var(--accent-color-2);
   margin-right: 10px;
   margin-left: 10px;
}

.site-menu .site-menu-item:not(.selected) .selected-icon {
   visibility: hidden;
}

.site-menu .site-menu-item.selected .label {
   font-weight: bold;
}

/* Page Header */

.page-header {
	min-height: 100px;
	width: 1000px;
	justify-content: space-between;
	color: var(--text-color-dark);
	margin-bottom: 75px;
}

.page-header .page-title {
   font-size: 1.7em;
   font-weight: bold;
}

.page-header .account-div {
	height: 50px;
	padding-left : 10px;
	padding-right : 10px;
	border-radius: 50px;
	position: relative;
}

.page-header .account-div:hover {
   background: var(--gray-2);
}

.page-header .user-initials {
	color: var(--text-color-light);
   background: var(--accent-color-3);
   font-weight: bold;
   width: 35px;
   height: 35px;
   border-radius: 35px;
   margin-right: 10px;
}

.page-header .account-menu {
	width: 200px;
	height: 125px;
	border-radius: 20px;
	justify-content: center;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   position: absolute;
   top:50px;
   left:-47px;
}

.page-header .account-menu .menu-item {
	height: 43px;
	display: flex;
	padding-left: 20px;
}

.page-header .account-menu .menu-item:hover {
   background: var(--gray-2);
}

.panel {
	border-radius: 20px;
	border: solid 2px var(--gray-6);
	padding: 20px;
	margin-right: 25px;
	margin-bottom: 25px;
}

.shaddow-panel {
   border-radius: 20px;
   border: solid 1px var(--gray-6);
   padding: 20px;
   box-shadow: rgba(0, 0, 0, 0.20) 0px 0px 10px;
}

/* Submenu */

.submenu {
   width: 100%;
   min-height: 90px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
   margin-bottom: 30px;
}

.submenu-items {
   width: 1200px;
}

.submenu-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding-right: 30px;
   padding-left: 30px;
}

.submenu-item:hover {
   background: var(--gray-2);
}

.submenu-item.selected {
   font-weight: bold;
   border-bottom: 4px solid var(--accent-color-1);
}

/* Required because hidden is defined above .submenu-item */
.submenu-item.hidden {
   display: none;
}

.submenu-panel {
   width: 1200px;
}

.panel-header {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   height: 60px;
   font-size: 1.55em;
   font-weight: bold;
   border-bottom: 3px solid var(--gray-2);
   margin-bottom: 20px;
}

.highlighted {
	color: var(--accent-color-3);
	font-weight: bold;
}