:root {
  --state-active: #85A11A;
  --state-important: #B9442A;
  --state-normal: #CAC038;
  --state-fix: #404040;
  --state-off: #9d9d9d;
  --state-interact: #1A89A1;
  
  --height-header: 190px;
  --height-actions: 120px;
}

.Active-filter {
  color: var(--state-active);
}

html,body {
  min-height: 100vh;
}

body > * {
  background-color:white;
}

details summary { cursor:pointer }

.Ui { 
  padding-top: var(--height-header);
  min-height: 100vh;
}

.Header-wrap {
  z-index:999;
  top:0px;
  left:0px;
}
.Header-wrap .Avatar {
  margin-top:7px;
}

.Header {
  
  
}
.Header-userIcon { 
  font-size:24pt;
  padding-top: 7px;
  margin-right: 16px;
}
.Header-userName {
  font-weight:bold;
  font-size:15pt;  
}
.Header-userQualification {
  font-weight:light;
  font-size:8pt;  
}
.Header-userQualification span::after { 
  display:inline-block;
  content:',';
  margin-right:2px;
}
.Header-userQualification span:last-child::after { content:'' }

.Header-settingsIcon {
  font-size:24pt;
  padding-top:7px;
}

.Header-menu {
  top:0px;
  left:0px;
  z-index: 1000;
  background-color: rgba(80,80,80,.7);
  backdrop-filter:blur(4px);
}
.Header-menu nav {
  background-color: #fff;
  box-shadow: 0px 0px 8px #eee;
  
}
.Header-menu a {
  font-size:12pt;
  margin-bottom:2pt;
  align-items:center;
}

.Separator-wrap {
  z-index:999;
  background-color:#fff;
  padding: 0px 0px;
}
.Separator {
  width: calc(100% - var(--space-medium) - var(--space-medium));
  height: 1px;
  background-color: #000;
  border:0px;
}

.Hotbar {
  background-color: #fff;
  margin:0;
  z-index:998;
  box-shadow: 0px 4px 4px rgba(0,0,0,.4);
}
.Hotbar a {
  align-items:center;
}

.Hotbar .material-icons {
  font-size: 24pt;
  text-align:center;
  margin-bottom: 8px;
}
.Hotbar span {
  font-size:10pt;
  text-align:center;
}

.Job-preview { 
  border: 1px solid rgba(0,0,0,.75);
  border-radius: 3pt;
  color: #fff;
  padding: 4px;
  overflow:hidden;
}

.Job-preview[data-state="hot"] { background-color: var(--state-important); }
.Job-preview[data-state="urgent"] { background-color: var(--state-normal); }
.Job-preview[data-state="ok"] { background-color: var(--state-active); }
.Job-preview[data-state="interact"] { background-color: var(--state-interact); }
.Job-preview[data-state="off"] { background-color: var(--state-off); }
.Job-preview[data-state="own"] { background-color: var(--state-active); }
.Job-preview[data-state="backup"] { background-color: var(--state-off); }
.Job-preview[data-state="searching"] { background-color: var(--state-normal); }

.Job-preview .material-icons { width:10pt; }
.Job-preview .material-icons.big { width:100%; }

.Job-previewIcon { align-items:center; }

.Job-previewFooter .material-icons { padding-top:2px; font-size:9pt; width:9pt; }

.Job-position { font-size:10pt; font-weight:bold; }
.Job-date { font-size:9pt; }
.Job-dow { font-size:9pt; }
.Job-time { font-size:9pt; }
.Job-duration { font-size:9pt; }
.Job-backup { font-size:9pt; }
.Job-backupAmount { font-size:9pt; margin-left:4px }
.Job-userName { font-weight:bold; }
.Job-list {}
.Job-cell { padding:2px; }

.Job-details { 
  height: calc( 100vh - var(--height-header) - var(--height-actions) );
  overflow-y:auto;
  padding: 5vh 10vw 5vh 10vw; 
}
.Job-details.noActions { 
  height: calc( 100vh - var(--height-header) );
}
.Job-details .material-icons.big { margin-right: 5vw; }

.Job-details[data-state="own"] { background-color: var(--state-active); }
.Job-details[data-state="backup"] { background-color: var(--state-off); }
.Job-details[data-state="searching"] {}
.Job-details[data-state="interact"] { background-color: var(--state-interact); }

.Job-details [itemprop="backup"] a span {
  text-decoration:underline;
}

.Actions { 
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding: 5vw 10vw;
  background-color: white;
  border: 1px solid black;
  box-shadow: 0px -4px 8px #aaa;
  z-index:999;
}

.Job-details [itemprop="comment"] { height:3.5em; }

.Jobs-day { font-size:13pt; font-weight:500; }
.Jobs-date { font-size:15pt; font-weight:500; }
.Jobs-relative { font-size:13pt; font-weight:400; }

.Contact-list {}
.Contact-list .Contact { padding:2vw 5vw; }
.Contact-user { font-size:14pt }
.Contact .material-icons { margin-top:5px; }
.Contact .Avatar { margin-top:5px; }

.Contact[data-state="available"] [itemprop="status"] { color: var(--state-active); }
.Contact[data-state="unavailable"] [itemprop="status"] { color: var(--state-important); }
.Contact[data-state="job"] [itemprop="status"] { color: var(--state-important); }
.Contact[data-state="backup"] [itemprop="status"] { color: var(--state-normal); }

.Profile {
  height: calc( 100vh - var(--height-header) - var(--height-actions) );
}

.Profile-form input[type="text"],
.Profile-form input[type="email"],
.Profile-form input[type="password"] {
  border:0px;
  padding:4px;
}

.Profile-form input[type="file"] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.Profile-form input[type="file"] + label {
  display: inline-block;
}

.Profile-form input[type="file"]:focus + label,
.Profile-form input[type="file"] + label:hover {
    
}

.Profile-form input:focus {
  outline: none;
  background-color: #eee;
}

[type="checkbox"] {
  position: relative;
  left: 30px;
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-family: sans-serif;
  font-size: 12pt;
  line-height: 1.3;
  padding-left:70px;
  position: relative;
  margin-top: -30px;
}
[type="checkbox"] + label:before {
  width: 40px;
  height: 20px;
  border-radius: 25%;
  border: 2px solid #ddd;
  background-color: #EEE;
  content: "";
  margin-right: 15px;
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[type="checkbox"] + label:after {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px #aaa;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: var(--state-active);
}
[type="checkbox"]:checked + label:after {
  margin: 0 0 0 30px;
}