@import url("comboselect.css");
@import url("projects.css");

:root {
  --font-size: 16px;
    
  --color-primary: #d0ecfd;
  --color-secondary: #246fbf;
  
  --color-danger: rgb(216, 67, 67);
  --color-success: rgb(94, 194, 40);
  
  --color-active: var(--color-secondary);
}

[data-progress] {
  --progress-0: var(--color-danger);
  --progress-10: rgb(202, 81, 64);
  --progress-20: rgb(189, 95, 61);
  --progress-30: rgb(175, 109, 58);
  --progress-40: rgb(162, 123, 55);
  --progress-50: rgb(148, 138, 52);
  --progress-60: rgb(135, 152, 49);
  --progress-70: rgb(148, 138, 52);
  --progress-80: rgb(121, 166, 46);
  --progress-90: rgb(108, 180, 43);
  --progress-100: var(--color-success);
}

html, body {
  margin:0;
  padding:0;
  font-family:Arial;
  font-size: var(--font-size);
}

* { box-sizing:border-box }

body { 
  width:100%; 
  margin:0;
  scrollbar-width: none;
  background-image: url(/Assets/Images/logo-paul-wuestenhoefer-small.png);
  background-repeat: no-repeat;
  background-position-x: calc(100% - 16px);
  background-position-y: 50px;
}

nav { 
  background-color: var(--color-primary); 
  background: var(--color-primary); /* Old browsers */
  background: -moz-linear-gradient(left, var(--color-primary) 85%, var(--color-secondary) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, var(--color-primary) 85%, var(--color-secondary) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, var(--color-primary) 85%, var(--color-secondary) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index:9999; 
}

details > nav {
  background: var(--color-primary) !important;
}

nav a { text-decoration:none; }
nav summary { line-height:2em }
details { position:relative }
/*details a { padding: 8px 16px }*/
details nav { 
  left: 0; 
  border: 1px solid #eee;
}

h1, .h1 { margin-block:0; font-size:24px }
h2, .h2 { margin-block:0; font-size:20px }
h3, .h3 { margin-block:0; font-size:18px }
h4, .h4 { margin-block:0; font-size:14px }
h5, .h5 { margin-block:0; font-size:12px }

a { color:#000 }
p { margin:0 0 8px 0; }

form { margin: 16px 0px 16px 0px; }
form input, select, textarea, details { 
  padding: 4px 8px 4px 8px;
  cursor:pointer;
  font-size: var(--font-size);
}
input[type="submit"] { margin-bottom:16px }

fieldset { margin-bottom:16px; padding: 16px 0px 16px 16px }
fieldset > div { margin-bottom:8px }

hr { 
  border:0;
  height: 1px;
  background-color: #ccc;
  margin: 0px 0px 16px 0;
  width: min(400px,40vw); 
}

table { border-collapse:collapse }
table tr {
  page-break-inside:avoid; 
  break-inside: avoid;
  page-break-after:auto;
  break-after: auto;
}
table th { border: 1px solid #aaa; padding:4px 8px 4px 8px }
table td { border: 1px solid #aaa; padding:4px 8px 4px 8px }
table thead tr:first-child th { background-color: #ccc }
table ul { list-style:none }

thead {display: table-header-group;}
tfoot {display: table-footer-group;}
table tr:nth-child(2n) td { background-color:rgba(230,230,230,.5); }

img { object-fit:cover; }

figure, .Figure { padding:8px; margin:4px; border:1px solid black }
figure figcaption, .Figure p {}

ul, ol { margin:8px 0px 8px 0px; }
li { padding: 8px; }

.input-wrap { position: relative }
.input-wrap input,
.input-wrap textarea,
.input-wrap select {
  width: 100%;
}
.input-wrap output {
  background: #ccc;
  color: white;
  padding: 4px 12px;
  position: absolute;
  border-radius: 4px;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
}

.input-row { position:relative }
.input-row > label {
  font-size: 12px;
  position:absolute;
  top:-.65em;
}

.Content {
  width: 100%;
  padding: 64px 16px 16px 16px;
}

#login {
  width: 400px;
  background-color: #eee;
  margin: 100px auto;
  border-radius: 16px;
}

#status { 
  display:flex; 
  flex-direction:column;
  justify-content: center;
  width:72px; 
  background-color: #600; 
  color: #fff;
  text-align:center;
  cursor:pointer;
}
#status.online { background-color: #060; color: #fff; }

.Figure div { 
  bottom:0px; 
  background-color: #eee; 
  width:calc(100% - 16px);
}

.Hotbar { 
  display:flex;
  flex-direction:row;
  margin: 16px 0px 16px 0px 
}
.Hotbar a { 
  color: #333; 
  margin-right:16px;
  background-color: #eee;
  padding: 8px;
  text-decoration:none;
  border-radius:8px;
}
.Hotbar a.active {
  background-color: #666;
  color: #fff;
}

.Hotbar span {
  display:flex;
  height:32px;
  width:50%;
}
.Hotbar input { 
  padding:4px 8px 4px 8px; 
  font-size: var(--font-size);
  width: 90%;
}
.Hotbar button {
  width:32px;
  height:32px;
}

.Button { 
  padding:12px; 
  background-color: #eee; 
  color: #000;
  transition: color .5s;
}
.Button:hover { color: var(--color-active); }
.Active { color: var(--color-active); }
nav .Button { background-color: #0000; }
nav summary { transition: color .5s; }
nav details:hover summary { color: var(--color-active); }

[type="range"][data-value="-10"] + output { display:none }
[type="range"][data-value="0"] + output,
[data-progress="0"] > :first-child { background-color: var(--progress-0) }
[type="range"][data-value="10"] + output,
[data-progress="10"] > :first-child { background-color: var(--progress-10) }
[type="range"][data-value="20"] + output,
[data-progress="20"] > :first-child { background-color: var(--progress-20) }
[type="range"][data-value="30"] + output,
[data-progress="30"] > :first-child { background-color: var(--progress-30) }
[type="range"][data-value="40"] + output,
[data-progress="40"] > :first-child { background-color: var(--progress-40) }
[type="range"][data-value="50"] + output,
[data-progress="50"] > :first-child { background-color: var(--progress-50) }
[type="range"][data-value="60"] + output,
[data-progress="60"] > :first-child { background-color: var(--progress-60) }
[type="range"][data-value="70"] + output,
[data-progress="70"] > :first-child { background-color: var(--progress-70) }
[type="range"][data-value="80"] + output,
[data-progress="80"] > :first-child { background-color: var(--progress-80) }
[type="range"][data-value="90"] + output,
[data-progress="90"] > :first-child { background-color: var(--progress-90) }
[type="range"][data-value="100"] + output,
[data-progress="100"] > :first-child { background-color: var(--progress-100) }

table th.Action { width:64px }
.Icon {
  display:inline-block;
  width:32px;
  height:32px;
  background-size:cover;
  background-position: center center;
  background-repeat:no-repeat;
}
.Icon[data-type="create"] { background-image:url(./Images/create.png); }
.Icon[data-type="edit"] { background-image:url(./Images/edit.png); }
.Icon[data-type="delete"] { background-image:url(./Images/delete.png); }
.Icon[data-type="file"] { background-image:url(./Images/file.png); }
.Icon[data-type="protocol"] { background-image:url(./Images/protocol.png); }
.Icon[data-type="reading"] { background-image:url(./Images/reading.png); }
.Icon[data-type="phone"] { background-image:url(./Images/phone.png); }
.Icon[data-type="mobile"] { background-image:url(./Images/mobile.png); }
.Icon[data-type="fax"] { background-image:url(./Images/fax.png); }
.Icon[data-type="email"] { background-image:url(./Images/email.png); }
.Icon[data-type="print"] { background-image:url(./Images/print.png); }
.Icon[data-type="save"] { background-image:url(./Images/save.png); }

.Icon[type="submit"][data-type] { background-size: 75%; }

[data-layout="print"] { font-size:14px }
[data-layout="print"] header { font-size:16px }
[data-layout="print"] p { margin-top:0; margin-bottom:0px }
[data-layout="print"] p.u-bold { margin-bottom:8px; }
[data-layout="print"] h1 { margin:16px 0px 16px 0px; text-align:center }

.File-wrap,
.Image-wrap,
.Document-wrap,
.Table-wrap,
.Email-wrap,
.Sketch-wrap {
  position:relative;
  border: 1px solid #eee;
  padding: 1rem;
}

.File-preview.Figure { margin:0; }
.File-preview.Image-wrap,
.File-preview.Email-wrap {
  height: 26rem;
}

.File-wrap:before,
.Image-wrap:before,
.Document-wrap:before,
.Table-wrap:before,
.Email-wrap:before,
.Sketch-wrap:before {
  content: '';
  display:block;
  z-index:9999;
  position:absolute;
  right: -1rem;
  top:-1rem;
  width: 3rem;
  height: 3rem;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
  background-image: url(./Images/file.png);
  background-size: 75%;
  background-repeat:no-repeat;
  background-position:center center;
}

.Image-wrap:before { background-image: url(./Images/image.png); }
.Document-wrap:before { background-image: url(./Images/word.png); }
.Table-wrap:before { background-image: url(./Images/excel.png); }
.Email-wrap:before { background-image: url(./Images/outlook.png); }
.Email-preview { height: 15rem; overflow-y: auto; border:0px; }

.Active-reading { border: 1px solid #aaa }

.tableHeader td {
  background-color: #ccc !important;
  font-weight:bold;
  page-break-inside: avoid;
}

@page {
  size: landscape;
  page-orientation: landscape;
}

.Print-table tr td, 
.Print-table tr th {
  page-break-inside: avoid;
  page-break-after: auto;
}

@media print {
  body { width:100% }
  
  input[type="text"], 
  input[type="number"], 
  input[type="email"] { border: 0px; padding: 0px; }
  
  input[type="submit"] { display:none }
  textarea { border:0px; padding:0px; width: 80%; }
  select { 
    border:0px; 
    padding:0px; 
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    width: 80%;
  }
  
  table { page-break-before: auto; }
  table thead { position:relative }
  table tbody { position:relative }
  
  table tr td:before,
  table tr td:after {
      content : "" ;
      height : 4px ;
      display : block ;
  }
  
  tr, tr td, tr th { 
    page-break-inside: avoid !important; 
    white-space:nowrap;
  }
  table h5 { margin:0; padding:8px 0 0 0; color:#000 }
 
  .noPrint { display:none }
  ::-webkit-input-placeholder { /* WebKit browsers */
      color: transparent;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: transparent;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: transparent;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: transparent;
  }
}