.agenda             { }
.agenda main        { text-align:center; height:auto; min-height:auto; margin-bottom:4em; padding-top:0.1em; }
.agenda main > h1   { font-family:fed-gara; font-size:6em; font-weight:normal; margin-bottom:0em; }
.agenda main > p    { font-size:1.8em; padding:1em 0em 1em 0em; }

.agenda .anprobe-vis             { display:none; }
.body--roommode .anprobe-vis     { display:block; }
.body--roommode .standard-vis    { display:none; }

.existing           { }
.existing__intro    { }
.existing__anlass   { font-size:1.6em;  }
.existing__datetime { }
.existing__addition { color:orangered; }
.existing__cancel   { display:inline-block; margin-top:1em; clear:both; margin-right:1rem; }
.existing__intro--warning { color:#d43b4e; }

/* Boxen */
.agenda .box                { width:100%; margin:0em 0em 1em 0em; padding:3em; text-align:center; background-color:#F9FAFC; clear:both; display:none; }
.agenda .box.active         { display:block; }

.agenda .box .inner         { max-width:55em; margin:0em auto 0em auto; text-align:center; }
.agenda .box h2             { font-size:3.5em; color:#4486A8; font-weight:normal;  }
.agenda .box .button-2      { margin-top:2em; display:block; clear:both; max-width:15em; }
.agenda .box select         { width:100%; }
.agenda .box .message       { display:none; color:red;  padding:1em; }
.agenda .box .message-2     { display:none; color:red;  padding:1em; }

/* Box Terminart */
.agenda .ddgroups               { margin-bottom:2em; }
.agenda .type .terminart        { display:none; padding:2em 2em 2em 4em; margin-bottom:2em; border-bottom:dotted 1px #C4C4C4; cursor:pointer; text-align:left; background-image:url(/images/agenda-check-off.jpg); background-repeat:no-repeat; background-position:left 1em top 2em; }
.agenda .type .terminart.active { padding:2em 2em 2em 4em; background-color:#ddeef6; border-bottom:solid 1px transparent; background-image:url(/images/agenda-check-on.jpg);  }
.agenda .type .terminart > h3   { float:left; font-size:1.6em; margin:0em; }
.agenda .type .terminart > b    { float:right; font-size:1.6em; }
.agenda .type .terminart > p    { width:100%; clear:both; text-align:left; padding:0.5em 0em 0em 0em;  }
.agenda .type .terminart.hide       { display:none; }
.agenda .type .terminart.hide.active { display:block; }
.agenda .type .showall          { display:none; font-size:1.4em; }

    /* Box Tagesdatum */
.agenda .day input      { vertical-align:middle; margin:0em 0.2em 0em 0.2em; width:100%; max-width:10em; position:relative; top:-1em; left:0em; cursor:pointer; background-size:1.6em; background-repeat:no-repeat; background-position:center right 0.4em; background-image:url(/images/kalender@2x.png); }
.agenda .day a          { width:3.7em; height:3.7em; display:inline-block; text-align:center; padding:1em 0em 0em 0em; cursor:pointer; background-image:url(/images/pfeil-links@2x.png);  background-size:1em; background-position:center center; background-repeat:no-repeat; background-color:#ddeef6; }
.agenda .day a.nextday  { background-image:url(/images/pfeil-rechts@2x.png); }

.agenda .day.box           { min-height:21.5em; }
.agenda .day.is_stuck      { background-color:red; padding:1.5em 0em 0em 0em; z-index:999; margin-top:8em; border-top:solid 1px #C4C4C4; left:0em; min-width:100%; width:100%; -webkit-box-shadow: 0px 2px 10px 0px rgba(171,171,171,1);-moz-box-shadow: 0px 2px 10px 0px rgba(171,171,171,1); box-shadow: 0px 2px 10px 0px rgba(171,171,171,1);}
.agenda .day.is_stuck h2   { display:none; }

.agenda .stickybox--stuck      { background-color:#F9FAFC; clear:both; position:fixed; top:8em; left:0rem; width:100vw; padding:1.5em 0em 0em 0em; z-index:999; border-top:solid 1px #C4C4C4; left:0em; min-width:100%; width:100%; -webkit-box-shadow: 0px 2px 10px 0px rgba(171,171,171,1);-moz-box-shadow: 0px 2px 10px 0px rgba(171,171,171,1); box-shadow: 0px 2px 10px 0px rgba(171,171,171,1);}
.agenda .stickybox--stuck h2   { display:none; }

/* Box Mitarbeiter */

.display           { width:100%; min-height:50em; margin-top:3em; }
.display.loading   { background-image:url(/images/facebook.gif); background-position:center center; background-repeat:no-repeat; } 
.display .outer    { visibility:visible; }

.body--roommode .display { min-height:25em; }

@media screen and (max-width:767px) 
{
    .display { min-height: 70em; }
    .body--roommode .display { min-height:30em; }

    .agenda .day.box            { min-height:16.5em; }
}

    /* Box Personalien */
.form                                   { width:100%;  text-align:left; margin-top:3em; }
.form .field                            { padding:0.3em 0.3em 0.3em 0.3em; }
.form .field > label                    { width:40%; font-size:1.6em; display:block; float:left; }
.form .field.textbox > input            { width:60%; padding:0.4em 0.6em 0.4em 0.6em; font-size:1.6em; color:inherit; border:solid 1px #C4C4C4; background-color:white; }
.form .field.textarea > textarea        { width:60%; padding:0.4em 0.6em 0.4em 0.6em; font-size:1.6em; color:inherit; border:solid 1px #C4C4C4; background-color:white; min-height:8em; }
.form .field input.error                { border-color:#e5300f; }
.form .field textarea.error             { border-color:#e5300f; }
.form .field.select                     { display:none; }
.form .field.select > select            { width:60%; padding:0.4em 0.6em 0.4em 0.6em; font-size:1.6em; color:inherit; border:solid 1px #C4C4C4; background-color:white; }

.form .field.field--birthday { display:none; }

.page--isguest .form .field.field--birthday { display:block; }
.page--isguest .form .field.select      { display:block; }

.data .datainfousr                      { display:none; }

/* Box Final */
.agenda .box.final h2 { margin-bottom:0em; }
.final h3 { font-size:3em; margin:0em; font-weight:normal; }
.final h4 { font-size:1.8em; margin:0em 0em 1em 0em; font-weight:normal; }
.final .noteuser      { display:none; }
.final .for           { padding-bottom:2em; }

/* states */
.box[data-finished="1"] { display:block; }

.box[data-error="1"] .message { display:block; }
.box[data-error="0"] .message { display:none;  }
.box[data-error="2"] .message-2 { display:block; }
.box[data-error="0"] .message-2 { display:none;  }
.box[data-ready="1"] .message { display:none;  }

.box[data-finished="1"] .button-2   { opacity:1; }

.box[data-ready="1"] .button-2 { opacity:1; }
.box[data-ready="0"] .button-2 { opacity:0.5; }
.box[data-ready="1"][data-finished="0"] .button-2   { display:block; }
.box[data-ready="1"][data-finished="1"] .button-2   { display:block; }

.box.finished           { min-height:10em; }
.box.finished.error     { color:red; }
.box.finished.success   { color:green; }

.loggedin .box.data[data-ready="0"] .button-2 { display:block; }

.loggedin .final .noteuser              { display:block; margin-top:3em; }
.loggedin .final .noteuser .toggled     { display:none; }
.loggedin .final .noteuser p            { padding-bottom:0.5em; }
.loggedin .final .noteuser textarea     { width:100%; min-height:8em; }

.loggedin .data                  { display:none; }
.loggedin .data .datainfovis     { display:none; }
.loggedin .data .datainfousr     { display:block; }
.loggedin .data .notevis         { display:none; }

@media screen and (max-width:600px)
{
    .agenda .type .terminart > h3   { float:none; font-size:1.6em; width:100%; margin:0em; }
    .agenda .type .terminart > b    { float:none; font-size:1.6em; width:100%; margin-top:0.3em; display:block; }

    .form .field > label                { width:100%; margin:0.5em 0em 0.2em 0em; }
    .form .field.textbox > input        { width:100%; }
    .form .field.textarea > textarea    { width:100%; }

    .agenda .box h2 { font-size:2.8em; }
}

.display .outer.fadeIn         { transition: 2.5s; opacity:1; }
.display .outer.fadeOut        { transition: 0.5s; opacity:0; }













 /* DISPLAY */

.state                          { width:100%; border-bottom:solid 1px #E5E5E5; padding:0em 0em 0.5em 0em; }

.state > .date                  { float:left; font-size:1.8em; font-weight:bold; }
.state > .ul                    { float:right; position:relative; top:0.5em;  } 

.state li                       { float:right; padding-left:2em; list-style-type:none; }
.state li > span:first-child    { display:inline-block; width:1.5em; height:1.5em; margin-right:0.8em;  }
.state li > span:last-child     { position:relative; top:-0.2em; left:0em; font-size:1.4em;  }

.free > span:first-child { background-color:#b9dff2; } 
.take > span:first-child { background-color:#B5B3B3; }
.resd > span:first-child { background-color:#f38d4f; }

.bars                   { padding-top:1em; clear:both; }

.employee               { width:100%; clear:both; margin-top:3em; min-height:6em;   }
.employee .header       { width:14em; float:left; padding:0em 1em 0em 0em; text-align:left; }
.employee .blocks       { width: calc(100% - 14em); float:left;  margin-top:2em; }

.employee .header h2    { float:left; font-size:1.8em; margin:0em 0em 0.1em 0em; font-weight:normal; }
.employee .header img   { clear:both; width:100%; max-width:13em; margin-bottom:0.5em; }

.body--roommode .employee .header       { display:none; }
.body--roommode .employee .blocks       { width:100%; }

.blocks .hour           { float:left; width:20%; height:6em; margin:0em 0em 2em 0em; min-height:inherit; padding:0em 0.3em 0em 0em; position:relative; top:0em; left:0em; text-align:left; }
.blocks .hour > label   { width:100%; clear:both;  display:block; font-weight:normal; position:absolute; top:-1.4em; font-size:1.5em; font-weight:bold; }
.blocks .hour > div     { float:left; width:25%; height:3em;  border-right:solid 1px white;  position:relative; top:0em; left:0em; }
.blocks .hour > div:last-child { border-right:solid 0px #F26522; } 
.blocks .hour > div:hover { opacity:0.7; }

.blocks .hour > div.free        { background-color:#b9dff2; cursor:pointer; }
.blocks .hour > div.closed      { background-color:#B5B3B3; }
.blocks .hour > div.blocked     { background-color:#B5B3B3; }
.blocks .hour > div.requested   { background-color:#f38d4f; cursor:pointer; }
.blocks .hour > div.reserved    { background-color:#F26522; text-align:center; }

.blocks .hour > div.requested:hover { opacity:1; }

.blocks .hour > div.requested span  { width:2em; height:2em; background-image:url(/images/icon_agenda_loeschen_x.png); background-repeat:no-repeat; background-size:100%; position:absolute; top:-1em; right:-1em; display:block; z-index:9999; }
.blocks .hour > div.reserved span   { width:100%; height:2em; background-image:url(/images/icon_haken_weiss.png); background-repeat:no-repeat; background-size:100%; max-width:2em; margin:2em auto 0em auto; display:block; }

.legend-emp                          { display:none; }
.legend-emp li                       { list-style-type:none; float:left; }
.legend-emp li  + li                 { padding-left:2em; }
.legend-emp li > span:first-child    { display:inline-block; width:1.5em; height:1.5em; margin-right:0.8em;  }
.legend-emp li > span:last-child     { font-weight:normal; font-size:1.4em; position:relative; top:-0.2em; }

@media screen and (max-width:550px)
{
    .agenda main { margin-bottom:8em; }
    .agenda .box { padding: 1.5em; }

    .employee .header { width: 10em; }
    .employee .blocks { width: calc(100% - 10em); }
        
      
    .blocks .hour           { height:4em; margin-bottom:1em; }
    .blocks .hour > label   { font-size: 1.2em; }
    .blocks .hour > div     { height: 2em; }

    .final h3 { font-size:2.2em; }
    .final h4 { font-size:1.6em; }

    .loggedin .final .noteuser > textarea { min-height:5em; }
}

@media screen and (max-width:475px) 
{
    .state > .date                  { width:100%; text-align:left; clear:both; padding-bottom:0.6em; }
    .state > .ul                    { width:100%; text-align:left; clear:both; } 
    .state li                       { float:right; width:33%; text-align:left; padding-left:0em; }
    .state li:first-child           { padding-left:0em; }

    .employee           { margin-top: 1em; }
    .employee .header   { width: 100%; clear:both; text-align:left; }
    .employee .blocks   { width: 100% ; clear:both; }

    .employee .header h2    { float:left; font-size:2.5em; margin:0em 0em 0.1em 0em; font-weight:normal; }
    .employee .header img   { float:left; clear:both; width:100%; max-width:8em; margin:0em 1em 1em 0em; }
     
    .legend-emp       { display:block; }

    .blocks .hour           { height:6em; margin-bottom:2em; width:25%; }
    .blocks .hour > label   { font-size: 1.4em; }
    .blocks .hour > div     { height: 3em; }
}

@media screen and (max-width:425px) {

    .legend-emp li { float:none; font-size:0.8em; }
    .legend-emp li  + li                 { padding-left:0em; }
    .legend-emp li > span:last-child     { font-weight:normal; font-size:1.4em; top:0em; }
}

@media screen and (max-height:480px) 
{
    .final h3                       { font-size:1.8em; }
    .loggedin .final .noteuser      { margin-top:1em; padding-bottom:0em; }
    .agenda .box.final .button-2    { margin-top:1em; }
}