/* inter-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/inter-v12-latin-200.eot'); /* IE9 Compat Modes */
    src: url('../fonts/inter-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/inter-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/inter-v12-latin-200.woff') format('woff'), /* Modern Browsers */
         url('../fonts/inter-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/inter-v12-latin-200.svg#Inter') format('svg'); /* Legacy iOS */
  }
  
  /* inter-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/inter-v12-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/inter-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/inter-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/inter-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/inter-v12-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
  }
  
  /* inter-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/inter-v12-latin-500.eot'); /* IE9 Compat Modes */
    src: url('../fonts/inter-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/inter-v12-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/inter-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/inter-v12-latin-500.svg#Inter') format('svg'); /* Legacy iOS */
  }
  
  /* inter-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/inter-v12-latin-700.eot'); /* IE9 Compat Modes */
    src: url('../fonts/inter-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/inter-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/inter-v12-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/inter-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/inter-v12-latin-700.svg#Inter') format('svg'); /* Legacy iOS */
  }
  
  
  body {
      font-family: Inter, Arial, Helvetica, sans-serif;
      font-size: 16px;
      background-color: #424b57;
      color: #fff;
      fill: #fff;
      /*background-color: #f8f8fa;
      color: #5e6772;*/
  }
  
  .container {
      width: 1500px;
      max-width: 100%
  }
  
  span[onclick] {
      cursor: pointer;
  }
  
  .custom-link {
      font-size: 14px;
      color: #4cae04;
  }
  
  .panel-default {
      border-color: #303844;
      background-color: #303844;
  }
  
  .panel-default > .panel-heading {
      color: #fff;
      background-color: #303844;
      border-color: #424b57;
  }

	.accordion {
	  background-color: #5e6772;
	  color: #fff;
	  cursor: pointer;
	  width: 100%;
	  text-align: left;
      margin-bottom: 6px;
	}

	.accordion.active, .accordion:hover {
	  background-color: #282e35;
	}

	.accordion:after {
	  content: '\002B';
	  color: #fff;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
	}

	.accordion.active:after {
	  content: "\2212";
	}

	.accordion-panel {
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	}
  
  .navbar-default {
      background-color: #282e35;
      border-color: #282e35;
  }
  .navbar-default .navbar-nav > li > a, 
  .navbar-default .navbar-text,
  .navbar-default .navbar-brand{
      color: #c1c1c1;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-text:hover,
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus{
      color: #fff;
  }
  .navbar-default .navbar-nav > .open > a, 
  .navbar-default .navbar-nav > .open > a:focus, 
  .navbar-default .navbar-nav > .open > a:hover,
  .dropdown-menu{
      background-color: #303844;
      color: #fff;
  }
  .dropdown-menu > li > a {
      color: #fff;
  }
  .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
      color: #fff;
      background-color: #434a57;
  }
  
  dialog {
      width:  600px;
      padding: 0;
  }
  
  .handler {
      padding: 12px;
  }
  
  .handler > label {
      margin-bottom: 4px;
  }
  
  .handler > button {
      margin-top: 5px;
  }
  
  .neuezeit {
      margin: 0 2%;
      display: flex;
  }
  
  .neuezeit > textarea {
      width: 65%;
      height: 100px;
      display: block;
      margin: auto 0 auto auto;
      resize: none;
  }
  
  .neuezeit > label {
      height: 25px;
      font-weight: normal;
  }
  
  .neuezeit > input,
  .neuezeit > select {
      width: 65%;
      height: 29px;
      display: block;
      margin: auto 0 auto auto;
  }
  
  table.bg-grey {
      background-color: #373f4a;
      /*background-color: #edeef0;*/
      padding: 2px;
      margin-bottom: 6px;
  }
  
  table.bg-grey tr:nth-child(even) {
      background: #303844;
  }
  
  table.bg-grey td {
      padding: 5px 8px !important;
      /* width: 33.33%; */
      line-height: 1;
  }
  
  table.bg-grey td:nth-child(2),
  table.bg-grey td:nth-child(3){
      text-align: right;
  }
  
  table {
      margin-bottom: 30px;
      /*table-layout: fixed;
      overflow: hidden;
      white-space: nowrap;*/
  }
  
  tr:nth-child(even) {
      background: #495260;
      /*background: #edeef0;*/
  }
  
  thead > tr {
      background: #282e35;
      /*background: #5e6772;*/
      color: white;
  }
  
  th:not(:last-child) {
      border-right: 2px solid #424b57;
      /*border-right: 2px solid white;*/
  }
  
  th, td {
      padding: 5px 8px;
      /*text-overflow: ellipsis;*/
      overflow: hidden;
      user-select: none;
  }
  
  td > input {
      margin: auto !important;
      display: block;
  }
  
  table.projekte-table {
      width: 100%;
      font-size: 11pt;
  }
  table.projekte-table a {
      color: #4cae04;
  }
  .projekte-headline {
      padding: 20px 8px;
  }

	.highlighted-table {
		background: #551F58;
	}
	.highlighted-table tr:nth-child(2n) {
		background: #632666;
	}
  
  @media screen and (max-width: 740px) {
      .projekte-headline {
          color: #1da800;
          padding: 20px 8px 30px 8px;
      }
      .projekte-headline:not(:first-of-type) {
          border-top: 1px solid #fff;
      }
      table.projekte-table tr th{
          display: none;
      }
      table.projekte-table tr td {
          display: block;
          display: grid;
          grid-template-columns: 200px auto;
      }
      table.projekte-table tr td::before {
          content: attr(aria-label);
          font-weight: 700;
      }
  }
  @media screen and (min-width: 741px) and (max-width: 940px) {
      table.projekte-table{
          font-size: 8pt;
      }
  }
  
  .table-btn {
      cursor: pointer;
  }
  
  .table-btn:hover {
      background-color: rgb(255, 255, 255);
      fill: #282e36;
  }
  
  button, input[type="submit"] {
      background: #4cae04;
      color: white;
      border: none;
      border-radius: 0;
      padding: 8px 12px;
      font-size: 15px;
      font-weight: bold;
      transition: .15s ease-in-out;
      width: 100%;
      user-select: none;
  }
  .btn-primary {
      background: #4cae04;
      border-color: #4cae04;
  }
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:focus,
  .btn-primary:active:hover,
  .btn-primary:active:focus {
      background: #4d8336;
      border-color: #4d8336;
  }
  .btn-link {
      color: #4cae04;
  }
  .btn-link:hover,
  .btn-link:active,
  .btn-link:focus,
  .btn-link:active:hover,
  .btn-link:active:focus {
      color: #4d8336;
  }
  
  .form-control {
      background-color: #424b57;
      border: 1px solid #424b57;
      color: #ccc;
  }
  
  select, input {
      outline: none;
      width: 100%;
      border: 2px solid #5e6772;
      height: 32px;
      background: #5e6772;
  }
  
  input[type=checkbox] {
      width: 32px;
  }
  
  .selects {
      display: flex;
      margin-bottom: 8px;
  }
  
  .auswahl {
      width: 100%;
  }
  
  @media screen and (min-width: 800px) {
      button:hover, input[type="submit"]:hover {
          background: #5e6772;
      }
  }
  
  button:active {
      background: #5e6772;
  }
  
  button:not(:last-child):not(#btnneuezeit),
  .auswahl:not(:last-child),
  input[type="submit"]:not(:last-child) {
      margin-right: .6%;
  }
  
  .wochenzeit,
  .zeit {
      font-weight: bold;
      font-size: 15px;
  }
  
  .wochenzeiten,
  .zeiten {
      display: flex;
      margin-bottom: 10px;
      background-color: rgb(220, 220, 220);
      padding: 8px 12px;
  }
  
  .buttons {
      margin-bottom: 6px;
      display: flex;
  }
  
  tr.selected:nth-child(even)  {
      background: rgba(95, 222, 0, 0.38) !important;
  }
  
  tr.selected  {
      background: rgba(70, 175, 2, 0.34) !important;
  }
  
  .calendar {
      display: flex;
      margin-bottom: 20px;
  }
  
  .calendar table:not(:last-child) {
      margin-right: 8px;
  }
  
  @media screen and (max-width: 1100px) {
      td.break:nth-of-type(1):before { content: "Datum"; }
      td.break:nth-of-type(2):before { content: "Start"; }
      td.break:nth-of-type(3):before { content: "Ende"; }
      td.break:nth-of-type(4):before { content: "Stunden"; }
      td.break:nth-of-type(5):before { content: "Mitarbeiter"; }
      td.break:nth-of-type(6):before { content: "Kunde"; }
      td.break:nth-of-type(7):before { content: "Beschreibung"; }
      td.break:nth-of-type(8):before { content: "Ticketnummer"; }
      td.break:nth-of-type(9):before { content: "Wartend"; }
  
  /*
      table, thead, tbody, th, td, tr {
          display: block;
      }*/
  
      .break {
          display: block;
      }
  
      thead.break tr.break {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }

      tbody.break {
          width: 100%;
          display: flex;
          flex-direction: column;
      }
  
      tr.break { border: 1px solid #ccc; }
  
      td.break {
          border: none;
          position: relative;
          padding: 1px 0 1px max(30%, 130px);
      }
  
      td.break:before {
          position: absolute;
          top: 1px;
          left: 5px;
          padding-right: 10px;
          white-space: nowrap;
          font-weight: bold;
      }
  
      th.break:not(:last-child) {
          border-right: 1px solid white;
      }
  
      .selects {
          display: block;
      }
  
      #btnneuezeit {
          margin-right: 0;
      }
  
      .buttons {
          margin-bottom: 6px;
      }
  
      .wochenzeiten,
      .zeiten {
          display: block;
          margin-bottom: 8px;
      }
  
      .wochenzeit,
      .zeit {
          text-align: left !important;
          width: 100%;
          margin-bottom: 0;
      }
  
      .neuezeit {
          display: block;
      }
  
      .neuezeit > input,
      .neuezeit > select {
          width: 100%;
          margin-bottom: 4px;
      }
  
      .neuezeit > label {
          margin-bottom: 0;
      }
  
      #handler > button {
          width: 100%;
          margin-top: 4px;
      }
  }
  
  @media screen and (max-width: 1400px){
      .wochenzeiten,
      .zeiten {
          display: block;
      }
  
      .wochenzeit {
          text-align: left !important;
          width: 100%;
      }
  
      .calendar {
          display: grid;
      }
  
      .calendar table:not(:last-child) {
          margin-bottom: 8px;
      }
  
      .calendar table tbody tr td:first-child{
          width: 35%;
      }
  }
  
  @media screen and (max-width: 770px){
      .buttons {
          flex-direction: column;
          row-gap: 4px;
      }
  }
  
  @media screen and (min-width: 1400px){
      /*.container {
          width: 1300px;
      }*/
  
      .wochenzeiten,
      .zeiten {
          display: flex;
      }
  
      .wochenzeit {
          text-align: left;
          width: 25%;
      }
  
      .zeit {
          width: 33.33%;
      }
  
      .wochenzeit:nth-child(2),
      .wochenzeit:nth-child(3),
      .zeit:nth-child(2){
          text-align: center;
      }
  
      .wochenzeit:last-child,
      .zeit:last-child {
          text-align: right;
      }
  
      #handler > label {
          margin-bottom: 14px;
      }
  
      .neuezeit > label {
          margin: 5px 0;
      }
  }
  
  /*@media screen and (min-width: 1900px){
      .container {
          width: 1600px;
      }
  }
  
  @media screen and (min-width: 2400px){
      .container {
          width: 1800px;
      }
  }*/