/* ===========================================================
   Basics
 * =========================================================== */

body, td, th {
    font-size: 12px;
    color: #000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* Login */

#content {
    display: none;
}

#content_extra {
    z-index: 99;
    text-align: center;
    position: absolute;
    line-height: 35px;
    height: auto;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#loading_start {
    font-size: 20px;
    font-weight: bold;
    z-index: 99;
    letter-spacing: 2px;
    text-align: center !important;
    position: absolute;
    height: auto;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

#bg {
    display: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../img/bg.jpg');
    height: 100vh;
}

a:link, a:visited {
    font-weight: bold;
    color: #000000;
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: none;
    color: #ccc;
}

label {
    display: block;
    padding-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    color: #999;
}
label.inline {
    display: inline-block;
    padding: 3px;
}

.bold {
    font-weight: bold;
}

.center {
    text-align: center;
}

.camelcase {
    text-transform: capitalize;
}

.headline {
    font-size: 20px;
}

.btn_basic {
    box-sizing: content-box;
    text-align: center;
    padding: 1px 10px 1px 10px;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
    border: transparent solid 1px;
}

a.btn_basic:hover {
    opacity: 0.4;
    background-color: #000 !important;
}

a.btn_trans, .btn_trans {
    color: #333;
    border: #999 solid 1px;
}

a.btn_red, .btn_red {
    color: #fff;
    background-color: #ff0000;
}

a.btn_green, .btn_green {
    color: #fff;
    background-color: #04ad00;
    vertical-align: middle;
}

a.btn_grey, .btn_grey {
    color: #fff;
    background-color: #ccc;
}

a.btn_black, .btn_black {
    color: #fff;
    background-color: #000;
}

#nav_editwindow {
    z-index: 100;
    float: left;
}

#nav_editwindow_right {
    z-index: 100;
    float: right;
}

#msg {
    text-align: center;
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    color: #fff;
    background-color: #ff0089;
    padding: 20px 0px;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
    z-index: 600;
}

.clear {
    clear: both;
}

.std_empty {
    opacity: 0.1;
}

.hidden {
    display: none;
}

.icon_edit, .icon_delete {
    width: 12px;
    height: 12px;
    padding-left: 2px;
    padding-right: 2px;
}

.icon_row {
  height: 30px;
  width: auto;
  cursor: pointer;
}

.icon_edit:hover {
    fill: #ccc;
}

.icon_delete:hover {
    fill: #ff0000;
}

.edit_row_highlight {
    background-color: #fff;
}

.hellouser_container {
    z-index: 8;
    text-align: center;
    position: absolute;
    height: auto;
    width: 99%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.hellouser_group {
    -moz-transform: rotate(-7deg) skew(-20deg);
    -ms-transform: rotate(-7deg) skew(-20deg);
    -o-transform: rotate(-7deg) skew(-20deg);
    -webkit-transform: rotate(-7deg) skew(-15deg);
}

.hellouser {
    color: #000;
    font-size: 50px;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 5px solid #000;
    -webkit-text-stroke: 1px black;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0px 0px 0 #000;
}

.maintenance {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ff0089;
    color: #fff;
    padding: 5px 20px;
    margin-left: 50px;
    font-weight: bold;
}


/* https://css-tricks.com/rotated-table-column-headers/ */

th.rotate-45 {
    text-align: left;
    /* Something you can count on */
    height: 80px;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: bold;
    padding-bottom: 100px;
}

th.rotate-45>div {
    /* Magic Numbers */
    transform: translate3d(25px, 51px, 0) rotate(-45deg);
    width: 30px;
}

.table_col_icons {
    width: 70px;
}


/* ===========================================================
   Forms
 * =========================================================== */

input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select {
    font-weight: bold;
    line-height: 1;
    padding: 5px 10px;
    border: 2px solid #f1f1f1;
    background: transparent;
    color: #444444;
    font-size: 14px;
    text-align: left;
    cursor: default;
    outline: 0;
    outline-offset: -2px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input, textarea {
    padding: 4px 10px;
}

input[type="button"], input[type="submit"] {
    text-align: center;
    width: auto;
}

input:hover, textarea:hover, select:hover {
    border-color: #222;
}

input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, textarea:focus, textarea:focus, select:focus {
    color: #000;
    border-color: #222;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type="submit"] {
    font-size: 14px;
    padding: 8px 15px;
    color: #fff;
    background-color: #cd006e;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0px;
}


/* ===========================================================
  Forms Placeholder
  * =========================================================== */

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    opacity: 0.4;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    opacity: 0.4;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 0.4;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    opacity: 0.4;
}


/* ===========================================================
 Login
 * =========================================================== */

.alert {
    display: inline-block;
    padding: 5px 20px;
    margin-bottom: 40px;
    color: #ff0089;
    font-weight: bold;
    font-size: 20px;
    text-transform: uppercase;
}

.login_input {
    box-sizing: content-box;
    text-align: center !important;
    width: 175px !important;
    margin: 10px;
    border-color: #000000;
    background-color: #fff !important;
}

.login_btn {
    box-sizing: content-box;
    text-align: center;
    margin: 10px;
    width: 172px !important;
    background-color: #000;
}


/* ===========================================================
 Header
 * =========================================================== */

.loading:before {
    z-index: 99;
    position: absolute;
    background-color: #fff;
    content: "Loading";
    color: #ff0089;
}

#header_left {
    float: left;
}

#header_right {
    float: right;
    margin-right: 0;
    text-align: right;
    /*margin-right:270px;*/
}

.nav_modules {
    font-weight: bold;
    font-size: 16px;
}

#nav_active {
    color: #ff0089;
}

#nav_sub {
    display: none;
}

#nav_sub a:hover {
    text-decoration: none;
    color: #ff0089;
}


/* ===========================================================
 Data Table Allgemein
 * =========================================================== */

.group {
    background-color: #ffffff;
    border-top: 50px solid #ffffff !important;
    border-bottom: 3px solid #ff0089;
    color: #ec008c;
    font-weight: bold;
    text-transform: uppercase;
}

.dataTables_filter {
    opacity: 0.5;
    margin-top: -100px;
    margin-right: 225px;
    font-size: 14px;
}

.dataTables_filter input {
    line-height: 1;
    padding: 5px 10px;
    border: 2px solid #ccc;
    background: #ffffff;
    color: #444444;
    font-size: 14px;
    text-align: left;
    outline: 0;
    outline-offset: -2px;
    /* Opera */
    cursor: default;
}

.dataTables_filter input:hover {
    border-color: #ff0089;
}

.dataTables_filter input:focus {
    border-color: #ff0089;
}

.row {
    cursor: pointer;
}

td.rowtrenner {
    height: 30px;
    border-top: 1px solid #fff !important;
    background-color: #fff !important;
}


/* ===========================================================
 Table All
 * =========================================================== */

#table {
    border-collapse: collapse;
}

#table thead {
    text-align: left;
    font-size: 9px;
}


/* ===========================================================
 Data Table Kunden
 * =========================================================== */

.tab_kunden th, .tab_kunden td {
    text-align: center;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.tab_kunden th:nth-child(1), .tab_kunden td:nth-child(1), .tab_kunden th:nth-child(2), .tab_kunden td:nth-child(2) {
    white-space: nowrap;
    text-align: left;
}

.tab_kunden td:last-child {
    white-space: nowrap;
}

.tab_kunden tbody tr:first-child td {
    border-top: 20px solid #ffffff !important;
    border-bottom: 50px solid #ffffff !important;
}


/* ===========================================================
  Data Table Ausgaben
  * =========================================================== */

#table_ausgaben {
    border-collapse: collapse
}

#table_ausgaben thead th, #table_ausgaben thead td {
    padding: 8px 10px;
}

#table_ausgaben tbody th, #table_ausgaben tbody td {
    padding: 8px 10px
}

#table_ausgaben tbody tr:nth-child(odd) {
    background-color: #fff;
}

#table_ausgaben tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

#table_ausgaben thead th {
    border-bottom: 1px solid #222;
}

#table_ausgaben tr:not(:first-child):hover td {
    background-color: #ffebf6;
}

#table_ausgaben thead {
    text-align: left;
    text-transform: uppercase;
    font-size: 9px;
}

#table_ausgaben tbody tr:first-child td {
    border-top: 20px solid #ffffff !important;
}

#table_ausgaben tr:nth-child(1) td {
    border-bottom: 20px solid #ffffff !important;
}

#X_table_ausgaben th {
    padding: 10px 0px 5px 10px;
    vertical-align: top;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
    color: #333;
}

.weekGroup {
    border-bottom: 2px solid #ff0089;
}

.weekGroup th {
    color: #ff0089;
    padding: 30px 0px 10px 2px;
}


/*

   .eintragen { width: 120px; }

   .beschreibung {
   	width: 90%;
   }
  */






  /* ===========================================================
    Data Table Ausgaben
    * =========================================================== */

  #table_computer {
      border-collapse: collapse
  }

  #table_computer thead th, #table_computer thead td {
      padding: 8px 10px;
  }

  #table_computer tbody th, #table_computer tbody td {
      padding: 8px 10px
  }

  #table_computer tbody tr:nth-child(odd) {
      background-color: #fff;
  }

  #table_computer tbody tr:nth-child(even) {
      background-color: #f7f7f7;
  }

  #table_computer thead th {
      border-bottom: 1px solid #222;
  }

  #table_computer tr:not(:first-child):hover td {
      background-color: #ffebf6;
  }

  #table_computer thead {
      text-align: left;
      text-transform: uppercase;
      font-size: 9px;
  }

  #table_computer tbody tr:first-child td {
      border-top: 20px solid #ffffff !important;
  }

  #xtable_computer tr:nth-child(1) td {
      border-bottom: 20px solid #ffffff !important;
  }

  #X_table_ausgaben th {
      padding: 10px 0px 5px 10px;
      vertical-align: top;
      white-space: nowrap;
      text-transform: uppercase;
      text-align: left;
      font-size: 10px;
      font-weight: bold;
      color: #333;
  }




/* ===========================================================
 Popup
 * =========================================================== */

.button {
    display: inline-block;
    padding: 0 20px;
    margin: 0.5em;
    font: bold 1em/2em Helvetica;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
    background-color: #cd006e;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0px;
}

.button.disabled {
    opacity: 0.25;
}

.grau {
    background-color: #888;
}

.button:link, .button:visited {
    color: #fff;
}

.button:hover {
    color: #ff74b2;
}

#summary .button:hover {
    background: #ff0089 !important;
    color: white !important;
}

.button:before {
    float: left;
    text-align: center;
    pointer-events: none;
    font-size: 20px;
    margin-left: -7px;
    margin-right: 10px;
}


/* http://www.paulund.co.uk/css-buttons-with-icons-but-no-images */


/*Forms*/

.clone:before {
    content: "\260d";
}

.reload:before {
    content: "\2630";
}

.add:before {
    content: "\271A";
}

.editieren:before {
    content: "\270E";
}


/*


.delete:before {
	content: "\2718";
}
.save:before {
	content: "\2714";
}
.email:before {
	content: "\2709";
}
*/

.cross:before {
    content: "\2716";
}

.close:before {
    content: "\2613";
}


/* ===========================================================
 Projekte Editieren: Basics
 * =========================================================== */

.inputwrapper-parent {
	display: flex;
	align-content: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}
.inputwrapper {
    display: block;
	margin-top: 10px;
    /* margin-right: 20px; */
}

.inputwrapper-parent .inputwrapper input, .inputwrapper-parent .inputwrapper select {
	width: 100%;
}

.inputwrapper textarea {
    width: 98%;
}

.inputwrapper.half {
	display: inline-block;
    width: calc(50% - 10px);
	margin-right: 10px;
}

.inputwrapper.full {
	display: inline-block;
    width: 100%;
    margin-right: 0;
}

.inputwrapper.half.right {
    margin-right: 0;
}

.inputwrapper.half textarea {
    box-sizing: border-box;
    width: 100%;
}

.inputwrapper_right {
    /* float: right; */
}

#name {
    font-size: 30px;
    font-weight: bold;
}

.input_head {
    font-size: 30px;
    width: 800px;
}

.input_small {
    width: 20px;
}

.input_mini {
    width: 75px !important;
}

.input_middle {
    width: 120px !important;
}

.input_big, input.input_big:not([type=checkbox]):not([type=radio]):not([type=submit]) {
    width: 200px;
}

.input_bigger {
    width: 300px;
}

.input_auto {
    width: auto;
}

.input_max {
    width: 88%;
}

.input_textarea {
    width: 800px;
    height: 200px;
}

.kommentar {
    margin-right: 10px;
    margin-top: 2px;
    width: 200px;
    height: 17px;
}


/* ===========================================================
 Projekte Editieren: Stunden Tabelle
 * =========================================================== */

#stunden {
    width: 100%;
    border-collapse: collapse;
}

#stunden th {
    text-transform: uppercase;
    text-align: right;
    padding: 2px;
    font-size: 12px;
    font-weight: bold;
    color: #222;
    vertical-align: top;
}

#stunden td {
    color: #222;
    font-size: 12px;
    text-align: center;
    padding: 7px 0px;
    border-bottom: 3px solid #dddddd;
}

#stunden tr:nth-child(1n+3):hover {
    background-color: #fff;
}

#stunden tr:nth-last-child(2) td {
    background-color: #e0e0e0;
    font-size: 16px;
    font-weight: bold;
    color: #222;
    border: 0px;
}

#stunden tr:nth-last-child(1) td {
    border-bottom: 3px solid transparent;
}

#stunden tr.gesamt td {
    font-weight: bold;
    border-bottom: none;
    padding: 10px;
}

.std_gesamt {
    border-bottom: 2px solid #333;
}

.spalte_kommentar {
    white-space: normal !important;
    text-align: left !important;
    padding-left: 10px !important;
    padding-right: 5px !important;
}

input.input_stunden:not([type=checkbox]):not([type=radio]):not([type=submit]) {
    background-color: transparent;
    border-color: #bbb;
    width: 50%;
    text-align: center;
}

.input_text {
    color: #222;
    background-color: transparent;
    border-color: #bbb;
}

.extra {
    color: #999;
    font-weight: normal;
    font-size: 12px;
}

.extra2 {
    color: #aaa;
    font-weight: bold;
    font-size: 13px;
}

#stdtotal {
    font-size: 12px;
    margin-top: 30px;
    width: auto;
}


/* ===========================================================
   Meine Stunden
 * =========================================================== */

#stundenreport {
    width: 100%;
    border-collapse: collapse;
}

#stundenreport th {
    text-transform: uppercase;
    text-align: left;
    padding: 2px;
    font-size: 12px;
    font-weight: bold;
    color: #222;
    vertical-align: top;
}

#stundenreport tr:not(:last-child):hover td {
    background-color: #ffebf6;
}

#stundenreport td {
    font-size: 12px;
    text-align: left;
    padding: 7px 2px;
    border-bottom: 1px solid #ccc;
}

.open_row {
    background-color: #eee;
    border-top: 2px solid #fff;
}

.close_row {
    display: none;
}

.gesamt {
    border-bottom: 2px solid #fff;
}

.mainentryclosed, .mainentryopened {
    cursor: pointer;
}

tr.mainentryopened td {
    padding-top: 30px !important;
    font-weight: bold;
    font-size: 16px !important;
    border-bottom: 3px solid #000000 !important;
}

#stundenreport .container {
    padding-right: 20px;
    white-space: nowrap;
    text-align: right;
}


/* ===========================================================
   Extras  // Ausgaben
 * =========================================================== */


/*

 .eintragen { width: 120px; }


 #table_ausgaben th {
 	padding: 10px 0px 5px 10px;
 	vertical-align: top;
   white-space: nowrap;
   text-transform: uppercase;
   text-align: left;
   font-size: 10px;
   font-weight: bold;
   color: #333;
 }

 #table_ausgaben tr:nth-child(1) td {
   border-bottom: 20px solid #ffffff !important;
 }

 #table_ausgaben tr:nth-child(1) {
   background-color: #fff;
 }
 .beschreibung {
 	width: 90%;
 }
*/


/* ===========================================================
   Report
 * =========================================================== */

#tabstunden td {
    font-size: 12px;
    padding: 5px;
}

#qty_item_1, #qty_item_2, #qty_item_3, #qty_item_3, #qty_item_4, #qty_item_5, #qty_item_6, #qty_item_7, #qty_item_8, #qty_item_9, #qty_item_10, #qty_item_11, #qty_item_12, #qty_item_13, #qty_item_14, #qty_item_15, #qty_item_16, #qty_item_17, #qty_item_A14, #tabstunden input[type="text"] {
    min-width: 20px;
    width: 50px !important;
    padding: 1px 5px;
    margin: 0px;
}


/* ===========================================================
   X-editable
 * =========================================================== */

.edit {}

a.textempty {
    color: #ccc;
}

a.textempty_std {
    color: #eee;
    background-color: #ccc;
}

.editableform {
    margin-bottom: 0;
    /* overwrites bootstrap margin */
}

.editableform .control-group {
    margin-bottom: 0;
    /* overwrites bootstrap margin */
    white-space: nowrap;
    /* prevent wrapping buttons on new line */
    /*line-height: 20px;  overwriting bootstrap line-height. See #133 */
}


/*
BS3 width:1005 for inputs breaks editable form in popup
See: https://github.com/vitalets/x-editable/issues/393
*/

.editableform .form-control {
    width: auto;
}

.editable-buttons {
    display: inline-block;
    /* should be inline to take effect of parent's white-space: nowrap */
    vertical-align: top;
    margin-left: 7px;
    /* inline-block emulation for IE7*/
    zoom: 1;
    *display: inline;
}

.editable-buttons.editable-buttons-bottom {
    display: block;
    margin-top: 7px;
    margin-left: 0;
}

.editable-input {
    vertical-align: top;
    display: inline-block;
    /* should be inline to take effect of parent's white-space: nowrap */
    width: auto;
    /* bootstrap-responsive has width: 100% that breakes layout */
    white-space: normal;
    /* reset white-space decalred in parent*/
    /* display-inline emulation for IE7*/
    zoom: 1;
    *display: inline;
}

.editable-buttons .editable-cancel {
    margin-left: 7px;
}


/*for jquery-ui buttons need set height to look more pretty*/

.editable-buttons button.ui-button-icon-only {
    height: 24px;
    width: 30px;
}

.editableform-loading {
    background: url('../img/loading.gif') center center no-repeat;
    height: 25px;
    width: auto;
    min-width: 25px;
}

.editable-inline .editableform-loading {
    background-position: left 5px;
}

.editable-error-block {
    max-width: 300px;
    margin: 5px 0 0 0;
    width: auto;
    white-space: normal;
}


/*add padding for jquery ui*/

.editable-error-block.ui-state-error {
    padding: 3px;
}

.editable-error {
    color: red;
}


/* ---- For specific types ---- */

.editableform .editable-date {
    padding: 0;
    margin: 0;
    float: left;
}


/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */

.editable-inline .add-on .icon-th {
    margin-top: 3px;
    margin-left: 1px;
}


/* checklist vertical alignment */

.editable-checklist label input[type="checkbox"], .editable-checklist label span {
    vertical-align: middle;
    margin: 0;
}

.editable-checklist label {
    white-space: nowrap;
}


/* set exact width of textarea to fit buttons toolbar */

.editable-wysihtml5 {
    width: 566px;
    height: 250px;
}


/* clear button shown as link in date inputs */

.editable-clear {
    clear: both;
    font-size: 0.9em;
    text-decoration: none;
    text-align: right;
}


/* IOS-style clear button for text inputs */

.editable-clear-x {
    background: url('../img/clear.png') center center no-repeat;
    display: block;
    width: 13px;
    height: 13px;
    position: absolute;
    opacity: 0.6;
    z-index: 100;
    top: 50%;
    right: 6px;
    margin-top: -6px;
}

.editable-clear-x:hover {
    opacity: 1;
}

.editable-pre-wrapped {
    white-space: pre-wrap;
}

.editable-container.editable-popup {
    max-width: none !important;
    /* without this rule poshytip/tooltip does not stretch */
}

.editable-container.popover {
    width: auto;
    /* without this rule popover does not stretch */
}

.editable-container.editable-inline {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    /* inline-block emulation for IE7*/
    zoom: 1;
    *display: inline;
}

.editable-container.ui-widget {
    font-size: inherit;
    /* jqueryui widget font 1.1em too big, overwrite it */
    z-index: 9990;
    /* should be less than select2 dropdown z-index to close dropdown first when click */
}

.editable-click, a.editable-click, a.editable-click:hover {
    /* font-size: 14px; */
    text-decoration: none;
    /* border-bottom: dashed 1px #cccccc; */
}

.editable-click.editable-disabled, a.editable-click.editable-disabled, a.editable-click.editable-disabled:hover {
    color: #585858;
    cursor: default;
    border-bottom: none;
}

.editable-empty, .editable-empty:hover, .editable-empty:focus {
    font-style: italic;
    color: #DD1144;
    /* border-bottom: none; */
    text-decoration: none;
}

.editable-unsaved {
    font-weight: bold;
}

.editable-unsaved:after {
    /*    content: '*'*/
}

.editable-bg-transition {
    -webkit-transition: background-color 1400ms ease-out;
    -moz-transition: background-color 1400ms ease-out;
    -o-transition: background-color 1400ms ease-out;
    -ms-transition: background-color 1400ms ease-out;
    transition: background-color 1400ms ease-out;
}


/*see https://github.com/vitalets/x-editable/issues/139 */

.form-horizontal .editable {
    padding-top: 5px;
    display: inline-block;
}

.editable-submit {
    font-size: 12px;
    padding: 7px 12px;
    color: #fff;
    background-color: #999;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    border: 0px;
}

.editable-cancel {
    display: none;
}


/* ===========================================================
   Ajax Project Selector
 * =========================================================== */

#scrollable-dropdown-menu .tt-dropdown-menu {
    max-height: 350px;
    overflow-y: auto;
}

.typeahead:focus {
    color: #fff;
    background-color: #ff0089;
    border-color: #ff0089;
}

.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}

.tt-suggestion {
    line-height: 24px;
    padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
    background-color: #ff0089;
    color: #fff;
}

.tt-suggestion p {
    margin: 0;
}


/* ===========================================================
   pikaday Custom
 * =========================================================== */

.is-today .pika-button {
    color: #ff0089;
}

.is-selected .pika-button {
    background: #ff0089;
    box-shadow: inset 0 1px 3px #ff0089;
}

.is-endrange .pika-button {
    background: #ff0089;
}

.pika-button:hover {
    background: #ff0089;
}


/* ===========================================================
   magnific Custom
 * =========================================================== */

button.mfp-close {
    display: none;
}

.mfp-iframe-holder .mfp-content {
    width: 90vw;
    height: 90vh;
    max-width: 100vw;
    max-height: 100vh;
}

.mfp-container {
    padding: 0;
}

.mfp-iframe-holder {
    padding: 0;
}

.mfp-iframe-scaler iframe {
    box-shadow: none;
    background-color: #fff;
}


/* ===========================================================
   dataTables Custom
 * =========================================================== */

table.dataTable thead th, table.dataTable thead td {
    border-bottom: none;
    padding: 8px 10px;
}

table.dataTable tfoot th, table.dataTable tfoot td {
    border-top: 1px solid #eee
}

table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px solid transparent
}

table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
    background-color: #fff;
}

table.dataTable tbody tr.dtrg-level-0 {
	background: #fff;
	border-bottom: 2px solid #ec008c;
}

table.dataTable tr.dtrg-group.dtrg-level-1 td {
	padding: 8px 10px;
}

table.dataTable tbody tr.dtrg-level-0 td {
	color: #ec008c;
	background: transparent;
}

table.dataTable tbody tr.odd.group-child, table.dataTable tbody tr.even.group-child {
	/* background: green; */
}

table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
    background-color: #eeeeee;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #eee
}


/* ===========================================================
   Custom
 * =========================================================== */

.cat_aufschlag, .cat_8, .cat_9, .cat_10, .cat_11, .cat_12, .cat_13, .cat_14, .cat_15, .btn_tweak, .btn_clone, #project_ausgaben {
    /* display: none; */
}


/* Autocomplete

.easy-autocomplete-container {
    margin: 0;
    padding: 0;
    position: absolute;
} */

.easy-autocomplete {
    min-width: 300px;
    display: inline-block;
    vertical-align: top;
}

.dataTables_filter {
    opacity: 0.9;
}

.easy-autocomplete-container ul {
    /* background: transparent;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -100px;
    max-width: 300px;
    list-style:none; */
    /* height: 0;
    overflow: visible; */
    border: 1px solid gray;
}

.easy-autocomplete-container ul:empty {
    border: none;
}


/*
.easy-autocomplete-container ul:empty {
    border: none;
} */

.easy-autocomplete-container ul li {
    background: white;
    padding: 5px;
    margin: 0;
    opacity: 1.0;
}

#report_left {
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
    float: left;
}

.smalltitle {
    color: gray;
    font-size: 9pt;
    text-transform: uppercase;
}

#report_left #filter div#title {
    border-bottom: 2px solid #EEEEEE;
}

#report_left #filter div#title label.left {
    display: inline-block;
}

#report_left #filter div#title label.right {
    width: 200px;
    display: inline-block;
    float: right;
}

#report_left #filter input[type="text"] {
    width: 190px;
    padding: 5px;
    border: 1px solid #EEEEEE;
}

#report_left #filter a {
    margin-right: 20px;
}

#report_left #filter div {
    padding: 5px;
}

#report_right {
    width: 60%;
    float: right;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

#filter_head a.clientListItem {
    margin: 5px 10px;
}

#report_left #filter {
    margin-bottom: 30px;
}

#statistics table {
    background: #EEEEEE;
    width: 100%;
    padding: 20px;
}

#statistics thead th {
    color: gray;
    text-align: right;
}

#statistics tbody td {
    text-align: right;
}

.configSection {
    padding: 20px;
}

.configSection div {
    vertical-align: top;
}

label.radioLabel {
    display: inline-block;
    margin: 3px;
    color: #444444;
}

#nav_sub a.nav_icon {
    margin: 15px;
    padding: 0;
    width: 30px;
}
.nav_icon svg {
    height: 20px;
    width: 20px;
    fill: gray;
    vertical-align: middle;
}

.nav_icon svg:hover {
    fill: #434343;
}

/* color: #db4c3f;
    padding-left: 20px;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}
.easy-autocomplete-container ul li:last-child {
    border-bottom: none;
}
.easy-autocomplete-container ul li.selected {
    border-bottom: 1px solid #db4c3f;
} */


/* ********************************** Datepicker Custom */

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
    right: -7px
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect {
    right: 2px
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
    background: #ff0089;
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    background: #ff0089 !important;
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
    background: #bbb;
    box-shadow: none;
    color: #fff;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    background: #bbb;
    color: #fff;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: #666;
    box-shadow: none;
    color: #fff;
}

.svg.adminonly {
    fill: gray;
    margin-left: 5px;
    vertical-align: middle;
}

/** recent activity screen **/

.recent-activity {
    margin-top: 60px;
    font-size: 16px;
    line-height: 14px;
}

.recent-activity p a {
    font-weight: normal;
}



@media print
{

  #header_extra, #header_extra *, #table_filter, #table_filter *
  {
      display: none !important;
  }
  body, #content {
    padding:0px !important;
    margin:0px !important;
  }


}


/*** file upload/list ***/

.files {
    display: flex;
    align-items: center;
    align-content: flex-start;
    margin-top: 10px;
}

.files form {
    width: 250px;
    height: 200px;
    border: 2px dashed #c4c4c4;
}

/*.files form.dz-drag-over {
    border: 2px solid #999;
}

.files form .dz-filename {
    display: none;
}

.files form .dz-preview {
    display: block;
    width: 120px;
    margin: 0 auto;
}*/

.files .file {
    width: 150px;
    height: 120px;
    margin-right: 25px;
    background: #f4f4f4;
    border: none;
    border-radius: 3px;
    transition: .3s transform, .3s box-shadow;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    position: relative;
}

.files .file:hover {
    transform: translate3d(0,-5px,0);
    box-shadow: 0 4px 4px rgba(40,55,60,.25);
}

.files .file span {
    display: block;
    text-align: center;
}

.files .file img {
    margin: 5px;
    width: 30px;
}

.files .file .delete-file {
    position: absolute;
    bottom: 0; right: 0;
    width: 15px;
    margin: 5px;
}

.drop-area {
    background: #f4f4f4;
    border: 2px dashed #aaa;
    border-radius: 5px;
    width: 250px;
    height: 116px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    transition: .5s background;
    position: relative;

}

.drop-area .browse-files {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    z-index: 6000;
}

.drop-area .upload-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .15);
    width: 0%;
    transition: .5s width, .5s opacity;
}

.drop-area p.state-dragging, p.state-uploading {
    display: none;
}

.drop-area p.error {
    color: #f00;
}

.drop-area.active {
    background: #fff;
}

.drop-area.active p.state-dragging {
    display: block;
}

.drop-area.active p.state-default {
    display: none;
}

.drop-area.uploading {
    background: #fff;
}

.drop-area.uploading p.state-uploading {
    display: block;
}

.drop-area.uploading p.state-default, .drop-area.uploading p.state-dragging {
    display: none;
}

tr.no-border {
    border: 0px transparent !important;
}

tr.no-border td, #stunden tr.no-border:nth-last-child(2) td {
    border: 0px transparent !important;
    font-size: inherit;
    font-weight: inherit;
    background: transparent;
    /*padding: 0;*/
    line-height: 1.0;
}

#switch-popup-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: .5s opacity;
    display: flex;
    justify-content: center;
    align-items: center;
}

#switch-popup {
    max-width: 400px;
    margin: 10px;
    background: #fff;
    padding: 20px;
    text-align: center;
    width: 225px;
}

#switch-popup:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    transform:rotate(-90deg);
    position: absolute;
    right: -272px;
    top: 10px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}

#switch-popup.invert:after {
    top: auto;
    bottom: 10px;
}

#switch-popup select {
    width: calc(100% - 10px);
}


.dropdown-menu ul li>a:not(.grey):hover, .dropdown-menu ul li>a:hover {
	background-color: #ff0089;
}


.publicprojects_statusbefore {
color:transparent;
}


/* ===========================================================
   Darkmode
 * =========================================================== */


@media (prefers-color-scheme: dark) {



        .mfp-iframe-scaler iframe {
            background-color: #222;
        }


        /* ===========================================================
        Login
        * =========================================================== */

        .login_input {
            border-color: #555 !important;
            background-color: #555 !important;
        }

        .login_input:focus {
            border-color: #999 !important;
        }



        #bg {
            background-image: url('../img/bg_dark.jpg');
        }


        ::-webkit-scrollbar {
        width: 12px;
        }

        ::-webkit-scrollbar-track {
        background: #222;
        }

        ::-webkit-scrollbar-thumb {
        background: #444;
        }

        ::-webkit-scrollbar-thumb:hover {
        background: #666;
        }


        .loading:before {
        background-color: #222;
        }


        body {
            color: #eee;
            background: #222;
        }


        a:link, a:visited {
            color: #eee;
        }

        a:hover, a:active {
            color: #fff;
        }

        label {
            color: #999;
        }

        .hellouser {
            color: #eee;
            border-bottom: 5px solid #eee;
            -webkit-text-stroke: 1px #eee;
            text-shadow: 1px 1px 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 0px 0px 0 #eee;
        }




        table,td,th {
            color: #eee;
        }

        table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
            background-color: transparent;
        }

        table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even {
            background-color: #292929;
        }


        table.dataTable.stripe tbody tr.odd:hover, table.dataTable.display tbody tr.odd:hover, table.dataTable.stripe tbody tr.even:hover, table.dataTable.display tbody tr.even:hover {
            background-color: #505050;
        }



        /* ===========================================================
        Forms
        * =========================================================== */

        input:not([type=checkbox]):not([type=radio]):not([type=submit]), textarea, select {
            border: 2px solid #444;
            background: transparent;
            color: #eee;
        }

        input:hover, textarea:hover, select:hover {
            border-color: #eee;
        }

        input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, textarea:focus, textarea:focus, select:focus {
            color: #fff;
            border-color: #222;
        }






        /* ===========================================================
        Data Table Allgemein
        * =========================================================== */


        .edit_row_highlight {
            background-color: #111;
        }



        /* ===========================================================
        Data Table Kunden
        * =========================================================== */

        .tab_kunden tbody tr:first-child td {
            border-top: 20px solid #222 !important;
            border-bottom: 50px solid #222 !important;
        }


        #stundenreport tr:not(:last-child):hover td {
            background-color: #666;
        }

        /* ===========================================================
        dataTables Custom
        * =========================================================== */

        .group {
            background-color: #222;
            border-top: 50px solid #222 !important;
        }


        table.dataTable tr.dtrg-group.dtrg-level-1 td, table.dataTable tr.dtrg-group.dtrg-level-2 td {
        background-color: #353535;
        }

        table.dataTable tfoot th, table.dataTable tfoot td {
            border-top: 1px solid #ff0000;
        }

        table.dataTable tbody tr {
            background: #222;
        }


        table.dataTable tbody tr.dtrg-level-0 {
            background: #222;
        }

        table.dataTable tbody tr.dtrg-level-0 td {
            background: #222;
        }


        table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
        background-color: #666;
        }




        table.dataTable.no-footer {
            border-bottom: 1px solid #666;
        }








        .easy-autocomplete-container ul li {
            background: #ff0;
            padding: 5px;
            margin: 0;
            opacity: 1.0;
        }
        #report_left #filter div#title {
            border-bottom: 2px solid #999;
        }

        #report_left #filter input[type="text"] {
            width: 190px;
            padding: 5px;
            border: 1px solid #999;
        }

        #statistics table {
            background: #333;
            width: 100%;
            padding: 20px;
        }


        .nav_icon svg {
            fill: #999;
        }


        .update_cancel svg {
            fill: #999;
        }



        #stunden th {
            color: #eee;

        }

        #stunden td {
            color: #eee;
            border-bottom: 3px solid #333;
        }

        #stunden tr:nth-child(1n+3):hover {
            background-color: #333;
        }

        #stunden tr:nth-last-child(2) td {
            color:#eee;
            background-color: #333;
        }

        input.input_stunden:not([type=checkbox]):not([type=radio]):not([type=submit]) {
            background-color: transparent;
            border-color:#444;

        }

        .input_text {
            color: #222;
            background-color: transparent;
            border-color: #444;
        }



        .drop-area {
            background: #333;
            border: 2px dashed #666;

        }



        /* ===========================================================
        Meine Stunden
        * =========================================================== */


        #stundenreport th {
            color: #eee;
        }

        #stundenreport td {
            border-bottom: 1px solid #444;
        }

        .open_row {
            background-color: #333;
            border-top: 2px solid #444;
        }



        .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate  {
        color:#666;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #666 !important;
        }


        .gesamt {
            border-bottom: 2px solid #333;
        }



}

/* budget */

.budget-indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
}

.budget-exceeded-indicator {
	background-color: #f00;
	padding: 5px;
	color: #fff;
}