* {
    margin: 0;
    padding: 0;
}


body {
    font-family: 'Lato', serif;
    font-size: 1.2em;
    color: gray;
    background: #fff;
}

.clr {
  clear: both;
  float: none;
  display: block;
  width: 100%;
  height: 0px;
  line-height: 0px;
  font-size: 0px;
}
/*
.mm-sidebar-expanded-size,
.mm-menu.mm-menu_offcanvas.mm-menu_sidebar-collapsed.mm-menu_sidebar-expanded.mm-menu_opened,
.mm-wrapper_sidebar-expanded .mm-menu_sidebar-expanded {
  max-width: 25% !important;
  width: 25% !important;
}

.mm-wrapper_sidebar-expanded:not(.mm-wrapper_sidebar-closed) .mm-menu_sidebar-expanded.mm-menu_opened ~ .mm-slideout {
  max-width: 75% !important;
  width: 75% !important;
  transform: translate3d(360px,0,0) !important;
}
*/
.mm-menu,
.mm-panels,
.mm-panel,
.mm-iconbar,
.mm-navbars_top,
.mm-navbar__title,
.mm-searchfield__input {
    background: #32699c !important;
    color: #fff !important;
}

.mm-iconbar__top > * {
  padding: 15px 0 8.5px 0;
}
.mm-listitem__text {
  padding-left: 0;
}
.mm-listitem::after {
  left: 0;
}

.mm-menu_iconpanel .mm-panels > .mm-panel {
  left: 2%;
}
.mm-panel_iconpanel-1, .mm-panel_iconpanel-2, .mm-panel_iconpanel-3 {
  width: auto;
}

.mm-searchfield input, .mm-searchfield input:focus, .mm-searchfield input:hover {
    background: #fff;
    color: #32699c;
}

.mm-counter,
.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited {
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

.mm-btn::after,
.mm-btn::before,
.mm-listitem,
.mm-listitem__btn {
    border-color: #808080;
}
.mm-divider {
    background: #808080;
    font-size: 1.2em;
    font-weight: 500;
}

.header {
    font-size: 38px;
    text-align: center;
    color: #32699c;
    padding-bottom: 20px;
    border-bottom: 1px solid #808080;
}
#pageContent {
    padding: 2% 1% 1%;
}
#page {

  position: relative;
}

a {
  color: #32699c;
  transition: all ease 0.5s;
}
a:hover {
  color: gray;
}

.wpform2 {
  display:none;
}
.wpform form {
  width: 96%;
  margin: 0 2%;
}
.wpform.wpform-shown {
  display: block;
  /*position: fixed;*/
  background: #fff;
  top: 0;
  left: 0;
/*  width: 100%;
  height: 100vh;
  padding: 5% 15% 0 15%;*/
}
.wp_insert {
  font-size: 40pt;
}
.wpform.wpform_insert {
  display: block;
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 2% 15% 0 15%;
}

i.fas.hide,
i.far.hide {
    display: none !important;
}
i.fas,
i.far {
    display: inline-block !important;
}


/*####### login #######*/
.login {
  width: 100%;
  text-align: center;
}



/*####### offene positionen #######*/
.contentblock .date,
.contentblock .desc,
.contentblock .time,
.contentblock .summe,
.contentblock .user,
.contentblock .gstunden,
.contentblock .gsumme {
    float: left;
    width: 13%;
    padding: 0 1%;
}
.contentblock .desc {
    width: 38%;
}
.contentblock .gstunden {
    margin-left: 55%;
}
.contentblock .gstunden,
.contentblock .gsumme {
  background: #808080;
  padding: 10px;
  color: #fff;
}
.contentblock .gstunden.endsumme,
.contentblock .gsumme.endsumme {
  color: #32699c;
}


.contentblock {
    display: none;
    transition: all ease 0.5s;
    padding: 10px 0;
}

.contentblock.opened {
    display: inline-block;
    width: 100%;
    height: auto;
}

.content .op-button {
    cursor: pointer;
    margin: 0 0 5px 0;
}

form.arbeitszeiten {
  display: inline;
}
form.arbeitszeiten #azbutton {
  background: none !important;
  border: none;
  color: #32699c;
  font-size: 30px;
}
form.arbeitszeiten button .fa-stopwatch {
  display: inline-block;
}
form.arbeitszeiten button .fa-stopwatch-20 {
  display: none;
}

/*########### user accordion ############# */
 /* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 1.2em;
  margin: 0 0 5px 0;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordion.active, .accordion:hover {
  background-color: #ccc;
}

.panel form .editbox,
.panel form .save_user,
.panel form .pwd_repeatbox {
  display: none;
}
.panel form .valuebox {
  display: inline-block;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 20px 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel.open {
  display: block;
  padding: 25px 18px;
}

/*######### wochenplanung ############*/

.wochenplanung {
  margin: 20px 0 0 0;
}
.headline {
  height: 45px;
  background: url('../img/whiteboard_top.png');
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.planungsbox {
  padding: 5px 10px;
}
.planungsbox.planungsbox_bg_gray {
  background: #f6f6f6;
}
.planung_kw {
  padding: 0px 30px 15px 32px;
  margin: 0 0 0px 0;
  background: url('../img/whiteboard_middle.png');
  background-position: bottom;
  background-size: 100% auto;
  background-repeat: repeat-y;
  border-width: 0px;
  border-color: #000;
  border-style: outset;
  x-border-radius: 10px 10px 10px 10px;
}

.planung_kw h3 {
  background: #efefef;
  margin: 0 0 15px 0;
  padding: 5px;
}
.planung_kw.red h3 {
  color: red;
}

.planung_kw h3 span.big {
  font-size: 28pt;
}
.planung_kw h3 span.right {
  float: right;
}

.prio.prio_0 {
  color: blue;
}
.prio.prio_1 {
  color: red;
}
.prio.prio_2 {
  color: orange;
}
.prio.prio_3 {
  color: green;
}








.range-wrap, .range-wrap-kw, .range-wrap-prio {
  position: relative;
  margin: 0 auto 3rem;
  float: left;
}
.range {
  width: 100%;
  margin: 0;
}
.range-wrap-prio2, .prio_op, .kw {
  background: #32699c;
  color: white;
  padding: 4px 12px;
  /*position: absolute;*/
  border-radius: 4px;
  left: 53%;
  top: 35px;
  transform: translateX(-50%);
}
.range-wrap-prio2, .prio_op::after, .kw::after {
  content: "";
  /*position: absolute;*/
  width: 10px;
  height: 10px;
  background: #32699c;
  top: -3px;
  left: 40%;
  transform: rotate(-45deg);
}








.bottomline {
  height: 51px;
  background: url('../img/whiteboard_bottom.png');
  background-position: top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.datumsblock {
  float: right;
  width: 220px;
}

.datumsblock .tag {
  font-size: 35pt;
  float: left;
  padding: 0 5px 0 0;
  display: block;
}
.box_kunde, .box_todo, .box_va, .box_actions {
  float: left;
}
.box_kunde {
  width: 25%;
  color: blue;
  text-decoration: underline;
  font-weight: 700;
}
.box_todo {
  width: 50%;
}
.box_va {
  width: 15%;
  color: green;
  font-style: italic;
}
.box_actions {
  width: 10%;
}


/*######### todoliste ############*/

.content .todos {
    display: none;
}
.content .insert_task {
    float: right;
}
.content .todo_list .prio {
    /*float: right;*/
}
.content .todo_list label {
    font-weight: 700;
}

.content .todo_list h3 {
    cursor: pointer;
}

.content .todo_list h3 span.icon {
    float: right;
}
.content .todo_list h3.hide .fa-angle-double-up {
    display: none;
}

.content .todo_list h3.show .fa-angle-double-down {
    display: none;
}


.content form.todo {
    display: none;
    transition: all ease 0.5s;
    cursor: pointer;
}
.content form.todo.show {
    display: inline-block;
}



/*######### form elemente ########*/
form button, .button {
	margin: 0 0 0 0;
	padding: .5em 1em;
	background: #32699c;
	color: white;
	cursor: pointer;
	transition: all ease 1s;
    font-size: 20px;
    text-transform: uppercase;
    border: 1px solid #32699c;
}
form button:hover, form button:active, .button:hover {
	background: white;
	color: #32699c;
}
form label {
    display: block;
    width: 36%;
    float: left;
}
form label.checkall {
  float: none;
  clear: both;
  cursor: pointer;
  margin: 15px 0 0 0;
}
form select {
    font-size: 14px;
}
form input, form textarea,
input[type="date"], input[type="time"] {
    padding: 3px 5px;
    margin: 5px 0;
    font-size: 14px;
    font-family: 'Lato', serif;
}

form input#token-input-kunde {
    width: 33% !important;
}

form ul.token-input-list + .token-input-list {
    display: none;
}
form ul.token-input-list {
  float: none;
  clear: none;
}

form#wpform label.va {
  display: inline;
  width: auto;
  float: none;
  cursor: pointer;
}
/*
div.token-input-dropdown {
    left: 36% !important;
    width: 50% !important;
}*/
div.token-input-dropdown {
    left: 25% !important;
    width: 50% !important;
}

.form-save {
   -moz-animation-delay: 3.5s;
   -webkit-animation-delay: 3.5s;
   -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
    display: none;
}

form.hidden {
display: inline;
}

form button.unstyled {
  background: none;
  display: inline-inline-block;
  border: none;
  padding: 0;
  color: #32699c;
}


.form_save i.fa-circle-notch { animation: turner 4s infinite linear }

@keyframes turner{
    from{  transform: rotate(0deg)   }
    to  {  transform: rotate(360deg) }
}


button.button_counter, button#a2, button#a3, button#a4, button#a5 {
     width: 49%;
     margin: 0 1% 10px 0;
     float: left;
}
button.counter_save {
     width: 100%;
     margin: 0;
}


.overlaybox  {
    display: none;
    width: 97%;
    height: 97%;
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 999999;
    overflow: scroll;
    padding: 1.5%;
}


/*############## zitat des tages #################*/
.zitat-des-tages {
  margin: 0 0 20px 0;
  padding: 0 20px 20px 20px;
  text-align: center;
}
.zitat-des-tages h3 {
  margin: 0 0 15px 0;
}
#zitatdestageslink {
  font-size: 11px;
}


/*############### cms systeme ####################*/
table.cmssys {
     border-spacing: 0;
    border-collapse: collapse;
    font-size: 14px;
    width: 100%;
}
table.cmssys th,
table.cmssys td {
     text-align: center;
     padding: 5px 5px 10px 5px;
}

table.cmssys td {
     vertical-align: bottom;
     border-right: 0px solid gray;
     position: relative;
}
table.cmssys td .toolbox {
     position: absolute;
     right: 50px;
     top: -15px;
     background: #fff;
     box-shadow: 0px 0px 5px #000;
     padding: 7px;
     border-radius: 4px;
     border: 1px solid #efefef;
     z-index: 9999;
     width: 295px;
     text-align: right;
}
table.cmssys td .toolbox.show {
     display: inline-block !important;
}

table.cmssys td.b3,
table.cmssys td.b4,
table.cmssys td.b5 {
     width: 110px;
}
table.cmssys td.b6,
table.cmssys td.b7 {
     width: 135px;
}

table.cmssys tr {
     border-bottom: 1px solid gray;
}
table.cmssys tr.line_2 {
     background: #efefef;
}
table.cmssys td:first-child {
     text-align: left;
}

table.cmssys td i.fas,
table.cmssys td i.far,
table.cmssys td i.fab,
table.cmssys td svg:not(:root).svg-inline--fa {
     color: gray;
     font-size: 14px;
     margin: 2px 0px;
}
table.cmssys td a i.fas,
table.cmssys td a i.far,
table.cmssys td a i.fab,
table.cmssys td a svg:not(:root).svg-inline--fa {
     color: #F78181;
}
table.cmssys td svg:not(:root).svg-inline--fa.fa-sync {
     font-size: 13px;
}
table.cmssys td.b9 {
     width: 40px;
}
table.cmssys td.b9 i {
     font-size: 18px;
}



/*############### kundendetails #################*/


.kundeninfos label {
  width: 30%;
}

.cust_projects {
  /*
    display: grid;
  grid-template-rows:100px 3fr 100px;
  grid-template-columns:25% 25% 25% 25%;
  grid-auto-flow: row;
*/

}
.projectbox {
  /*position: relative;*/
  width: 22%;
  float: left;
  margin: 0 2% 40px 0;
  border: 1px solid gray;
  padding: 5px;
  box-shadow: 3px 2px 5px #535353;
}
.projectbox.box_num_2,
.box_auswertung.box_num_2 .box_auswertung_main {
  background: #f6f6f6;
}
.projectbox h3 {
  text-align: center;
  font-size: 18pt;
}
.projectbox label {
  display: inline-block;
  width: 65%;
}

.moneycounter {
  width: 100%;
  border: 1px solid gray;
  border-radius: 10px;
}
.moneycounter .mcprogress {
  display: block;
  border-radius: 10px;
  text-align: center;
  color: #fff;
  font-size: 10pt;
  padding: 3px 0;
}


.projectactions {
  text-align: justify;
}
.projectactionbox {
    display: inline-block;
    margin-top: 30px;
    width: 18%;
    text-align: center;
    font-size: 14pt;
}
.projectactionbox i {
  font-size: 16pt;
}
.projectactionbox.count a {
  color: red;
}
.projectactionbox.openpos a {
  color: orange;
}
.projectactionbox.posbilled a {
  color: green;
}
.projectactionbox.edit a {
  color: blue;
}
.projectactionbox.trash a {
  color: pink;
}

.timecountbox_main {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  /*background: rgba(3, 53, 69, 0.8);
  x-background: rgba(0, 0, 0, 0.9);*/
  background: #e9e9e9;
  border: 1px solid gray;
  box-shadow: 3px 2px 15px #535353;
  color: #000;
  z-index: 99999;
}

.timecountbox_main h2 {
  text-align: center;
  padding: 15px 0;
  background: rgba(3, 53, 69, 0.99);
  color: #fff;
}
.timecountbox_main .timeblock h3 {
  margin: 10px 0 0 0;
}


.box_auswertung {
  display: none;
  padding: 160px 0 0 0;
}
.box_auswertung_main {
     border: 0px solid red;
       border: 1px solid gray;
     width: 100%;
     display: block;
     padding: 20px 5px 5px;
     position: absolute;
     height: 100vh;
     overflow-y: scroll;
     left: 0;
     top: 0;
     background: #fefefe;
}
.close_ol {
    cursor: pointer;
    border: 1px solid red;
    background: #fff;
    font-weight: 700;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    padding: 15px 15px;
    line-height: 10px;
    color: red;
    transition: all ease 0.5s;
}
.close_ol:hover {
  background: red;
  color: #fff;
}
.box_auswertung_main h3 {
  text-align: center;
  width: 100%;
  display: inline-block;
}
.box_auswertung_main .topline,
.uebersicht_offene_positionen .topline {
     margin: 15px 0 0 0;
     font-weight: bold;
}
.box_auswertung_main .checkbox,
.box_auswertung_main .date,
.box_auswertung_main .time,
.box_auswertung_main .summe ,
.Xuebersicht_offene_positionen .date,
.Xuebersicht_offene_positionen .time,
.Xuebersicht_offene_positionen .summe {
     float: left;
     width: 25%;
}
.box_auswertung_main .text {
     margin: 10px 0 0 5%;
}
.box_auswertung_main .money,
.box_auswertung_main .money form,
.box_auswertung_main .money button,
.box_auswertung_main .editbox button {
     width: 100%;
}
.box_auswertung_main button,
.box_auswertung_main .money button,
.box_auswertung_main .editbox button {
     margin: 15px 0 15px 0;
}

.box_auswertung_main .checkbox {
  width: 5%;
}








/*############### tabs ###############*/

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover,
.ui-tabs-tab.ui-corner-top.ui-state-active.ui-tab:hover {
  background: #32699c !important;
  border-color: gray !important;
}
.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab:hover {
  background: rgba(3, 53, 69, 0.6) !important;
  border-color: gray !important;
}
.ui-tabs-tab.ui-corner-top.ui-state-default.ui-tab:hover a {
  color: #fff !important;
}
.ui-widget.ui-widget-content {
  x-border: 0px;
}
.ui-tabs {
  padding: 0;
  position:static;
}
.ui-tabs .ui-tabs-nav {
  padding-left: 0;
}
.ui-tabs .ui-tabs-panel {
    padding: 10px;
}