/* ====================================================== */
/* atavolo 2 - Online Reservierungsmanager */
/* ------------------------------------------------------ */
/* LAYOUT CSS - Datei */
/* ====================================================== */

@charset "UTF-8";

/* ====================================================== */
/* Body */
/* ====================================================== */
body {
    position:absolute;

    width:100%;
    height:100%;
}

/* ====================================================== */
/* Wrapper */
/* ====================================================== */
div#wrapper {
    position:relative;
}

/* ====================================================== */
/* Overlay & Popups */
/* ====================================================== */
div.popup_container {
    width:100%;
    height:100%;

    position:absolute;

    z-index:999;
}

div.overlay {
    position:fixed;

    left:0;
    right:0;
    bottom:0;
    top:0;

    background-color:rgba(0,0,0,0.8);

    z-index:998;
}

div.popup {
    position:relative;

    width:165px;
    height:165px;

    top:50%;

    margin:-80px auto;

    max-width:95%;
    max-height:95%;
    min-height:165px;

    background-color:rgba(255,255,255,1);

    z-index:999;

    border:2px solid rgba(0,0,0,1);

    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,1);

    overflow:hidden;
}

@media (max-width: 749px) {
    div.popup_container [id="reservierung"] {
        width:380px !important;
        min-width: 380px !important;
    }
}

@media (min-width:750px){
    div.popup_container [id="reservierung"] {
        width:750px !important;
        min-width: 750px !important;
    }
}

/* ====================================================== */
/* Header */
/* ====================================================== */
div#wrapper div#head {
    position:absolute;

    top:0px;
    left:0px;

    width:100%;
    height:46px;

    background-color:#004f7e;

    font-size:12px;
    font-weight:600;
    color:#ffffff;

    border-bottom:1px solid #002b44;
}

/* ====================================================== */
/* Logo */
/* ====================================================== */
div#wrapper div#head div#logo{
    position:relative;

    width:100px;

    margin-left:10px;

    float:left;
}

div#wrapper div#head div#logo > img{
    height:46px;
}

/* ====================================================== */
/* Homebutton */
/* ====================================================== */
div#wrapper div#head div#homescreen {
    position:relative;

    margin-left:10px;

    width:16px;
    height:16px;

    padding:14px 15px 16px;

    float:left;
}

/* ====================================================== */
/* Location Wechsel */
/* ====================================================== */
div#wrapper div#head div#switchlocation {
    position:relative;

    float:left;

    margin-left:10px;

    z-index:899;
}

div#wrapper div#head div#switchlocation ul#locations_list {
    max-height:46px;

    overflow:hidden;

    transition:max-height 0.5s ease-in-out 0s;

    text-align:center;
}

div#wrapper div#head div#switchlocation ul#locations_list li {
    height:17px;

    padding:15px;

    border-bottom:1px solid #002b44;
    border-left:1px solid #002b44;
    border-right:1px solid #002b44;

    background-color:rgba(0,79,126,1);

    cursor:pointer;

    transition:background-color 0.25s ease-in-out 0s;
}

div#wrapper div#head div#switchlocation ul#locations_list li:first-of-type {
    border-bottom:0;

    background-color:#002b44;
}

div#wrapper div#head div#switchlocation ul#locations_list li:first-of-type > span {
    padding-right:10px;
}

.no-touch div#wrapper div#head div#switchlocation ul#locations_list li:hover {
    background-color:#407b9e;
}

.no-touch div#wrapper div#head div#switchlocation ul#locations_list li:hover:first-of-type {
    background-color:#002b44;
}

/* ====================================================== */
/* Oberers Datum und Uhrzeit */
/* ====================================================== */
div#wrapper div#head div.date {
    position:relative;

    float:left;

    margin-left:0px;

    color:#ffffff;
}

div#wrapper div#head div.time {
    position:relative;

    float:left;

    margin-left:0px;

    color:#ffffff;
}

div#wrapper div#head div.calendar {
    position:relative;

    float:left;

    height:16px;
    min-width:12px;

    padding:15px 5px 15px 15px;
}

div#wrapper div#head div.calendar div.label {
    float:left;
}

div#wrapper div#head div.date input#head_datepick {
    position:relative;

    float:left;

    margin-left:5px;
    margin-top:-9px;

    width:90px;
    height:16px;

    font-size:12px;
    font-weight:600;

    border:1px solid #002b44;

    cursor:pointer;
}

div#wrapper div#head input#head_datepick_calendar {
    position:relative;
    top:-9px;
    left:-5px;

    background:none;

    width:16px;

    border:0;

    color:transparent;

    cursor:pointer;
}

div#wrapper div#head div.time input#head_timepick {
    position:relative;

    float:left;

    margin-left:5px;
    margin-top:-9px;

    width:35px;
    height:16px;

    font-size:12px;
    font-weight:600;

    border:1px solid #002b44;

    cursor:pointer;
}

/* ====================================================== */
/* Oberes Suchfeld */
/* ====================================================== */
div#wrapper div#head div.search {
    position:relative;

    float:left;

    margin-left:40px;

    padding:6px 0;

    color:#ffffff;
}

div#wrapper div#head div.search input#head_search {
    position:relative;

    float:left;

    width:150px;
    height:16px;

    font-size:12px;
    font-weight:600;

    padding-right:35px;

    border:1px solid #002b44;

    cursor:pointer;

    background-image:url('../img/icons/search_blue.png');
    background-repeat:no-repeat;
    background-position:160px center;
}

/* ====================================================== */
/* Backend Navigation */
/* ====================================================== */
div#wrapper div#head div#backend {
    position:relative;

    float:right;

    margin-right:10px;

    height:46px;

    color:#ffffff;
}

div#wrapper div#head div#backend div#current_user {
    position:relative;

    float:left;

    text-align:left;
}

div#wrapper div#head div#backend div#current_user div#username {
    position:relative;

    float:left;

    padding-top:6px;

    color:#ffffff;

    text-align:right;
}

div#wrapper div#head div#backend div#current_user div#userpic {
    position:relative;

    float:left;

    margin-left:10px;

    color:#ffffff;
}

div#wrapper div#head div#backend div#current_user div#username span.name {
    display:block;
}

div#wrapper div#head div#backend div#current_user div#username span.group {
    display:block;

    font-weight:400;
}

div#wrapper div#head div#backend div#backend_navigation {
    position:relative;

    float:left;
}
div#wrapper div#head div#backend div#backend_navigation div#languages_box,
div#wrapper div#head div#backend div#backend_navigation div#settings,
div#wrapper div#head div#calendar,
div#wrapper div#head div#walkin,
div#wrapper div#head div#logout,
div#wrapper div#head div#bell,
div#wrapper div#head div#backend div#backend_navigation div#help,
div#wrapper div#head div#backend div#backend_navigation div#menu_button
{
    position:relative;

    margin-left:10px;

    width:16px;
    height:16px;

    padding:14px 15px 16px;

    float:left;
}

div#wrapper div#head div#backend div#backend_navigation div#menu_button{
    display: none;
}

div#wrapper div#head div#backend div#backend_navigation div#menu_button a:hover {
    opacity: 100;
}

/* F�r Mitarbeiter ausblenden */
div#wrapper.ur2 div#head div#backend div#backend_navigation div#settings {
    display:none;
}

div#wrapper div#head div#backend div#backend_navigation div#settings {

}

div#wrapper div#head div#calendar,
div#wrapper div#head div#walkin {
    margin-left:0px;

    padding:15px 5px;
}

div#wrapper div#head div#walkin {
    margin-left:20px;

    width:80px;

    padding:12px 5px;
}

div#wrapper div#head div#bell {
    margin-left:20px;

    width:20px;

    padding:12px 5px;
}

.no-touch div#wrapper div#head div#walkin:hover {
    color:#cdcdcd;
}

.no-touch div#wrapper div#head div#walkin:hover > div.icon_20 {
    background-position:0px -160px;
}

div#wrapper div#head div.icon_dropdown.right div.sub {
    position:absolute;

    top:47px;
    right:0px;

    z-index:999;
}

div#wrapper div#head div.icon_dropdown.right div.sub ul {
    max-height:0px;

    overflow:hidden;

    text-align:center;

    transition:max-height 0.5s ease-in-out 0s;
}

div#wrapper div#head div.icon_dropdown div.sub li {
    background-color: rgba(0, 79, 126, 1);

    border-bottom: 1px solid #002b44;
    border-right: 1px solid #002b44;
    border-left: 1px solid #002b44;

    cursor: pointer;

    height: 17px;
    padding: 15px;

    transition: background-color 0.25s ease-in-out 0s;
}

.no-touch div#wrapper div#head div.icon_dropdown div.sub li:hover {
    background-color: #407b9e;
}

/* ====================================================== */
/* Haupt Navigation */
/* ====================================================== */
div#wrapper div#navigation {
    position:fixed;

    top:46px;
    left:0;

    min-width:100%;
    height:120px;

    overflow:hidden;

    background-color:#002b44;

    -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);

    z-index:3;
}

div#wrapper div#navigation div#navigation_wrapper {
    position:absolute;
    top:35px;

    overflow:visible;

    min-width:100%;
    height:65px;
}

div#wrapper div#navigation div#navigation_wrapper div.button {
    position:relative;

    margin-left:1.167%;

    width:13.0%;
    height:65px;

    float:left;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    -webkit-box-sizing:border-box;

    border:1px solid rgba(255,255,255,0.5);

    transition:border 0.25s ease-in-out 0s;
}

/* F�r Mitarbeiter Marketing ausblenden und restlichten Button neuausrichten */
div#wrapper.ur2 div#navigation div#navigation_wrapper div.button {
    width:18.5%;
}

.no-touch div#wrapper div#navigation div#navigation_wrapper div.button:hover,
div#wrapper div#navigation div#navigation_wrapper div.button.active {
    border:1px solid rgba(255,255,255,1);
}

div#wrapper div#navigation div#navigation_wrapper div.button.dashboard {
    background:transparent;
    background-color:#41a2c2;
}

div#wrapper div#navigation div#navigation_wrapper div.button.tischplan {
    background:transparent;
    background-color:#4ec241;
}

div#wrapper div#navigation div#navigation_wrapper div.button.gaeste {
    background:transparent;
    background-color:#c2af41;
}

div#wrapper div#navigation div#navigation_wrapper div.button.neue_res {
    background:transparent;
    background-color:#c24141;
}

div#wrapper div#navigation div#navigation_wrapper div.button.belegung {
    background:transparent;
    background-color:#2d738a;
}

div#wrapper div#navigation div#navigation_wrapper div.button.marketing {
    background:transparent;
    background-color:#317629;
}

div#wrapper.ur2 div#navigation div#navigation_wrapper div.button.marketing {
    display:none;
}

div#wrapper div#navigation div#navigation_wrapper div.button div.icon {
    position:absolute;

    left:0px;
    top:7px;

    width:100%;
    height:30px;

    background-image:url('../img/icons/navigation_icons2.png');
    background-repeat:no-repeat;
    background-position:10px 0px;

    opacity:0.5;

    transition:opacity 0.25s ease-in-out 0s;
}

div#wrapper div#navigation div#navigation_wrapper div.button.dashboard div.icon {
    background-position:10px 0px;
}

div#wrapper div#navigation div#navigation_wrapper div.button.tischplan div.icon {
    background-position:10px -30px;
}

div#wrapper div#navigation div#navigation_wrapper div.button.gaeste div.icon {
    background-position:10px -60px;
}

div#wrapper div#navigation div#navigation_wrapper div.button.neue_res div.icon {
    background-position:10px -90px;
}

div#wrapper div#navigation div#navigation_wrapper div.button.belegung div.icon {
    background-position:10px -120px;
}

div#wrapper div#navigation div#navigation_wrapper div.button.marketing div.icon {
    background-position:10px -150px;
}


.no-touch div#wrapper div#navigation div#navigation_wrapper div.button:hover div.icon ,
div#wrapper div#navigation div#navigation_wrapper div.button.active div.icon {
    opacity:1;
}

div#wrapper div#navigation div#navigation_wrapper div.button div.label {
    position:absolute;

    bottom:7px;
    left:10px;

    font-size:12px;
    font-weight:600;

    color:#ffffff;
}

/* ====================================================== */
/* Content Container */
/* ====================================================== */
div#wrapper div#content {
    position:fixed;

    top:166px;
    left:0px;
    right:320px;
    bottom:0px;

    background-image:none;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;

    overflow:auto;

    transition:right 0.15s ease-in-out 0s;
}

div#wrapper div#content.full {
    right:10px;
}


/* ====================================================== */
/* Sidebar */
/* ====================================================== */
div#wrapper div#sidebar {
    position:fixed;

    top:166px;
    right:0px;
    bottom:0px;

    width:320px;

    background-color:#002b44;

    transition:right 0.15s ease-in-out 0s;

    -webkit-box-shadow: -3px 0 3px 0 rgba(0,0,0,0.25);
    box-shadow: -3px 0 3px 0 rgba(0,0,0,0.25);

    z-index:2;
}
div#wrapper div#sidebar.hide {
    right:-310px;
}

div#wrapper div#sidebar div#auslastung {
    position:absolute;

    display:none;

    width:100%;
    height:170px;

    background-color:#004f7e;
}

div#wrapper div#sidebar div#liste {
    position:absolute;

    top:0px;
    bottom:0;

    width:100%;

    background-color:#004f7e;
}

div#wrapper div#sidebar div#sidebar_knob {
    position:absolute;

    top:40%;
    left:-25px;

    width:50px;
    height:50px;

    border-radius:50px 0 0 50px;

    background-color:#002b44;

    transition:left 0.15s ease-in-out 0s;

    cursor:pointer;
}

div#wrapper div#sidebar div#sidebar_knob_drag {
    position:absolute;

    top:40%;
    left:-25px;

    margin-top: 55px;

    width:50px;
    height:50px;

    border-radius:50px 0 0 50px;

    background-color:#002b44;

    transition:left 0.15s ease-in-out 0s;

    cursor:ew-resize;
}

div#wrapper div#sidebar.hide div#sidebar_knob_drag {
    display: none;
}

.no-touch div#wrapper div#sidebar div#sidebar_knob:hover,
.no-touch div#wrapper div#sidebar div#sidebar_knob_drag:hover{
    left:-35px;
}

.no-touch div#wrapper div#sidebar div#sidebar_knob:hover > div.arrow,
.no-touch div#wrapper div#sidebar div#sidebar_knob_drag:hover > div.arrow{
    opacity:1;
}

div#wrapper div#sidebar div#sidebar_knob div.arrow,
div#wrapper div#sidebar div#sidebar_knob_drag div.arrow{
    margin-left:5px;
    margin-top:17px;

    opacity:0.8;

    transition:opacity 0.15s ease-in-out 0s;
}

div#wrapper div#sidebar.hide div#sidebar_knob div.arrow {
    transform:rotate(180deg);
}

div#wrapper div#sidebar:not(.expanded) div#sidebar_knob_drag div.arrow {
    transform:rotate(180deg);
}

/* ====================================================== */
/* Auslastungsanzeige */
/* ====================================================== */
div#wrapper div#sidebar div#auslastung div#auslastung_wrapper {
    position:absolute;

    top:35px;

    color:#ffffff;

    font-size:12px;
    font-weight:600;

    width:100%;
}

div#wrapper div#sidebar div#auslastung div#auslastung_wrapper div#auslastung_persons {
    position:absolute;

    display:block;

    padding:0 10px;

    box-sizing:border-box;

    top:0px;
    left:0px;

    width:100%;
}

div#wrapper div#sidebar div#auslastung div#auslastung_wrapper div#auslastung_objects {
    position:absolute;

    display:block;

    top:65px;
    left:0px;

    padding:0 10px;

    box-sizing:border-box;

    width:100%;
}

div#wrapper div#sidebar div#auslastung div#auslastung_wrapper div.bar {
    position:relative;

    width:100%;
    height:24px;

    border:1px solid rgba(255,255,255,0.9);

    background: #ff0004;
    background: -moz-linear-gradient(left,  #ff0004 0%, #f78800 20%, #e4f400 50%, #0bb200 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0004), color-stop(20%,#f78800), color-stop(50%,#e4f400), color-stop(100%,#0bb200));
    background: -webkit-linear-gradient(left,  #ff0004 0%,#f78800 20%,#e4f400 50%,#0bb200 100%);
    background: -o-linear-gradient(left,  #ff0004 0%,#f78800 20%,#e4f400 50%,#0bb200 100%);
    background: -ms-linear-gradient(left,  #ff0004 0%,#f78800 20%,#e4f400 50%,#0bb200 100%);
    background: linear-gradient(to right,  #ff0004 0%,#f78800 20%,#e4f400 50%,#0bb200 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0004', endColorstr='#0bb200',GradientType=1 );

}

div#wrapper div#sidebar div#auslastung div#auslastung_wrapper div.bar div.blocked {
    position:absolute;

    right:0px;

    width:0%;
    height:24px;

    background-color:#002b44;

    transition:width 0.15s ease-in-out 0s;
}

/* ====================================================== */
/* Reservierungsliste */
/* ====================================================== */
div#wrapper div#sidebar div#liste div.liste {
    position:absolute;

    top:110px;
    left:10px;
    right:10px;
    bottom:10px;

    background-color:rgba(255,255,255,1);

    overflow-y:hidden;
}

div#wrapper div#sidebar div#liste div.liste.plans {
    top:148px;
}

div#wrapper div#sidebar div#liste div.filter {
    position: absolute;

    left: 10px;
    right: 10px;
    top: 37px;
}

div#wrapper div#sidebar div#liste div.filter select {
    width:170px;

    float:left;

    cursor:pointer;
}

div#wrapper div#sidebar div#liste div.filter input {
    display:none;

    width:40px;

    margin-left:10px;

    float:left;

    padding:3px 6px;

    height:20px;

    cursor:pointer;
}

div#wrapper div#sidebar div#liste div.status {
    position: absolute;

    left: 10px;
    right: 10px;
    top: 73px;
}

div#wrapper div#sidebar div#liste div.status select {
    width:100%;

    cursor:pointer;
}

div#wrapper div#sidebar div#liste div.plans {
    position: absolute;

    left: 10px;
    right: 10px;
    top: 110px;
}

div#wrapper div#sidebar div#liste div.plans select {
    width:100%;

    cursor:pointer;
}

div#wrapper div#sidebar div#liste div.liste div.container {
    position:absolute;

    top:0px;
    bottom:25px;

    width:100%;

    overflow-x:hidden;
    overflow-y:auto;
}

div#wrapper div#sidebar div#liste div.liste div.summe {
    position:absolute;

    bottom:0px;
    left:0px;

    background-color:#ffffff;

    width:100%;
    height:30px;

    font-weight:600;
}

div#wrapper div#sidebar div#liste div.liste div.summe span {
    padding:5px;

    line-height:2em;
}

div#wrapper div#sidebar div#liste div.liste div.tableheader {
    position: absolute;

    left: 0;
    top: 0;

    font-size:12px;
    font-weight:600;

    height:36px;

    overflow:hidden;

    text-align:center;
}

div#wrapper div#sidebar div#liste div.liste div.tableheader div.cell {
    display:block;

    float:left;

    background-color:#ffffff;
}

div#wrapper div#sidebar div#liste div.liste table {
    width:100%;

    text-align:center;

    font-size:12px;
    font-weight:600;

    border-spacing:0 5px;
}

div#wrapper div#sidebar div#liste div.liste table td,th {
    padding:5px;
}

div#wrapper div#sidebar:not(.expanded) div#liste div.liste table td.show_expanded,
div#wrapper div#sidebar:not(.expanded) div#liste div.liste table th.show_expanded,
div#wrapper div#sidebar:not(.expanded) div#liste div.liste div.tableheader div.cell.show_expanded,
div#wrapper div#sidebar.expanded div#liste div.liste table td.show_not_expanded,
div#wrapper div#sidebar.expanded div#liste div.liste table th.show_not_expanded,
div#wrapper div#sidebar.expanded div#liste div.liste div.tableheader div.cell.show_not_expanded{
    display: none;
}
/*
div#wrapper div#sidebar.expanded div#liste div.liste table td.show_expanded,
div#wrapper div#sidebar.expanded div#liste div.liste table th.show_expanded,
div#wrapper div#sidebar.expanded div#liste div.liste div.tableheader div.cell.show_expanded,
div#wrapper div#sidebar div#liste div.liste table td.show_not_expanded,
div#wrapper div#sidebar div#liste div.liste table th.show_not_expanded,
div#wrapper div#sidebar div#liste div.liste div.tableheader div.cell.show_not_expanded{

}*/

div#wrapper div#sidebar div#liste div.liste table td {
    /*background-color:#c3c4ca;*/
    background-color:#dcdcdc;

    height:32px;
}

div#wrapper div#sidebar div#liste div.liste table td.status {
    color:#ffffff;

    background-color:#c2af41;

    padding:2px;
    width:26px;
    min-width:26px;
}

div#wrapper div#sidebar div#liste div.liste table td.res_info div {
    position:relative;

    margin:0 auto;

    width:20px;
    height:20px;

    background-image:url('../img/icons/info_icons_20.png');
    background-repeat:no-repeat;
    background-position:50% 0px;
}

div#wrapper div#sidebar div#liste div.liste table td.res_info.no div {
    background-position:50% 20px;
}

div#wrapper div#sidebar div#liste div.liste table td.res_info.customer_info div {
    background-position:50% 0px;
}

div#wrapper div#sidebar div#liste div.liste table td.res_info.book_info div {
    background-position:50% -20px;
}

div#wrapper div#sidebar div#liste div.liste table td.res_info.birthday_info div {
    background-position:50% -40px;
}

div#wrapper div#sidebar div#liste div.liste table td.res_info.wedding_info div {
    background-position:50% -60px;
}

div#wrapper div#sidebar div#liste div.liste table td.status div {
    position:relative;

    margin:0 auto;

    width:20px;
    height:20px;

    background-image:url('../img/icons/res_status.png');
    background-repeat:no-repeat;
    background-position:50% 0px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.offen div {
    background-position:50% 0px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.abgeschlossen div {
    background-position:50% -20px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.noshow div {
    background-position:50% -40px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.storniert div {
    background-position:50% -60px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.web div {
    background-position:50% -80px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.facebook div {
    background-position:50% -100px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.erschienen div {
    background-position:50% -120px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.walkin div {
    background-position:50% -140px;
}


div#wrapper div#sidebar div#liste div.liste table td.status.walkin-covid-19 div {
    /*background-position:50% -140px;*/
    position:relative;

    margin:0 auto;

    width:20px;
    height:20px;

    background-image:url('../img/icons/people-outline.png');
    background-repeat:no-repeat;
    background-position:50% 0px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.event div {
    background-position:50% -180px;
}

div#wrapper div#sidebar div#liste div.liste table td.status.facebook,
div#wrapper div#sidebar div#liste div.liste table td.status.web {
    background-color:#c2af41;

}

div#wrapper div#sidebar div#liste div.liste table td.status.abgeschlossen {
    background-color:#86868a;

}

div#wrapper div#sidebar div#liste div.liste table td.status.erschienen,
div#wrapper div#sidebar div#liste div.liste table td.status.walkin,
div#wrapper div#sidebar div#liste div.liste table td.status.walkin-covid-19 {
    background-color:#4ec241;

}

div#wrapper div#sidebar div#liste div.liste table td.status.noshow,
div#wrapper div#sidebar div#liste div.liste table td.status.storniert {
    background-color:#c24141;

}

div#wrapper div#sidebar div#liste div.liste table td.open {
    cursor:pointer;
}

div#wrapper div#sidebar div#liste div.liste table td.open div.icons {
    opacity:0.8;

    transition:opacity 0.15s ease-in-out 0s;
}

.no-touch div#wrapper div#sidebar div#liste div.liste table td.open:hover div.icons {
    opacity:1;
}

/* ====================================================== */
/* Inner Content */
/* ====================================================== */
div#wrapper div#content > div.header {
    left:10px;
    right:10px;
    height:55px;

    overflow-x:auto;
    overflow-y:hidden;

    position:absolute !important;
}

div#wrapper div#content > div.header div.navigation {
    float:left;
}

/* ====================================================== */
/* Dashboard */
/* ====================================================== */
div#wrapper div#content[current="dashboard"] {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;

    padding-top:2em;
}

div#wrapper div#content[current="dashboard"] div.box  {
    position: relative;
    display:inline-block;

    width: 85%;
    min-height: 150px;

    padding:15px;

    margin:0 1em 2em;

    color:#ffffff;

    background-color:#004f7e;

    border:1px solid rgba(255, 255, 255, 0.8);

    page-break-inside: avoid;
    break-inside: avoid;
}

div#wrapper div#content[current="dashboard"] div.box div.headline {
    font-size:12px;
    font-weight:600;

    margin-bottom:15px;
}

div#wrapper div#content[current="dashboard"] div.box div.content {
    font-size:18px;
    font-weight:600;

    margin-bottom: 0px;

    min-height:40px;
}

div#wrapper div#content[current="dashboard"] div.box div.content span.sub {
    display:block;
    position:relative;

    margin-top:10px;
    font-size:12px;
}

div#wrapper div#content[current="dashboard"] div.box div.navigation {
    font-size:12px;
    font-weight:600;
    width:100px;
    height:26px;
    padding-top: 10px;
    cursor:pointer;
}

div#wrapper div#content[current="dashboard"] div.box div.navigation div.label {
    float:left;

    height:20px;

    margin-right:5px;
}

div#wrapper div#content[current="dashboard"] div.box div.navigation div.icons {
    float:left;
}

/* ====================================================== */
/* Kundendatenbank */
/* ====================================================== */
div#wrapper div#content[current="kunden"] {
    /*padding-top:2em;*/
    padding-top:1em;
}

div#wrapper div#content[current="kunden"] div.header {
    display:block;

    position:relative;

    margin-bottom:20px;

    padding-left:1em;
}

div#wrapper div#content[current="kunden"] div.content  {
    position:absolute;
    top:60px;
    left:0px;
    bottom:0px;
    right:0px;

    border-top:1px solid #bcbcbc;

    padding-bottom:20px;
    padding-top:10px;

    overflow:auto;
}

div#wrapper div#content[current="kunden"] div.content div.entrys  {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;

    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

div#wrapper div#content[current="kunden"] div.content div.entry {
    padding:10px;

    margin:0 1em 2em;

    background-color:#dcdcdc;

    border:1px solid #cccccc;

    cursor:pointer;

    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /*display:table;*/
    display:inline-block;

    width:90%;
    height:140px;

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    transition:background-color 0.15s ease-in-out 0s;

    position:relative;
}

.no-touch div#wrapper div#content[current="kunden"] div.content div.entry:hover {
    background-color:#cdcdcd;
}

div#wrapper div#content[current="kunden"] div.content div.entry div.info {
    font-weight:400;
    display:block;

    font-size:12px;

    margin-bottom:5px;
}

div#wrapper div#content[current="kunden"] div.content div.entry div.head {
    font-weight:600;
    display:block;
}

div#wrapper div#content[current="kunden"] div.content div.entry div.head div.kunde_attr {
    background-color: #ffffff;
    color: #004f7e;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 3.5em;

    border-radius: 4px;
    border:1px solid #85abc2;

    display: block;
    float: right;

    height: 30px;
    width: 30px;

    margin-left: 5px;
}

div#wrapper div#content[current="kunden"] div.content div.entry div.row {
    display:block;

    font-size:12px;
}

div#wrapper div#content[current="kunden"] input#customer_all_search_input {
    float:left;

    margin-right:10px;
}

div#wrapper div#content[current="kunden"] div.button.add {
    padding:0;

    width:34px;
    height:34px;

    background-color:#759700;
    background-image:url('../img/icons/add.png');
    background-repeat:no-repeat;
    background-position:center center;
}

/* ====================================================== */
/* Belegungsplan */
/* ====================================================== */
div#wrapper div#content[current="belegung"] {
    padding:1em;

    overflow:hidden;
}

div#wrapper div#content[current="belegung"] > div.header {
    position:fixed;
}

div#wrapper div#content[current="belegung"] > div.header div.button {
    margin-right:10px;

    background-color:#004f7e;
    background:linear-gradient(#006399, #002b44) repeat center center;
    /*background-color:#9399a0;
    background:linear-gradient(to bottom, #9399a0 0%,#28343b 100%);*/
}

div#wrapper div#content[current="belegung"] > div.header div.button.inactive {
    background-color:#ef6100;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
    cursor:inherit;
}

.no-touch div#wrapper div#content[current="belegung"] > div.header div.button.inactive:hover {
    opacity:1 !important;
}

div#wrapper div#content[current="belegung"] div.header .button:active {
    background-color:#f2830b;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
}

div#wrapper div#content[current="belegung"] div.header input.button {
    background-color:#ffffff;

    padding:9px 6px;

    margin-right:10px;
}

div#wrapper div#content[current="belegung"] div.header input.button.inactive {
    color:#ffffff;
    border:1px solid #666666;
}

div#wrapper div#content[current="belegung"] div.header  .button.inactive {
    background-color:#ef6100;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
    cursor:inherit;
}

.no-touch div#wrapper div#content[current="belegung"] div.header  .button.inactive:hover {
    opacity:1 !important;
}

div#wrapper div#content[current="belegung"] div.content {
    position:absolute;

    top:60px;
    left:0px;
    bottom:0px;
    right:0px;

    border-top:1px solid #bcbcbc;

    overflow:auto;
}

div#wrapper div#content[current="belegung"] div.content div.section {
    display:block;

    position:relative;

    overflow:hidden;

    padding-bottom:28px;
}

div#wrapper div#content[current="belegung"] div.content div.week div.section {
    padding-bottom:46px;
}

div#wrapper div#content[current="belegung"] div.content div.header,
div#wrapper div#content[current="belegung"] div.content div.row {
    display:block;

    position:relative;

    height:28px;
}

div#wrapper div#content[current="belegung"] div.content div.week div.header {
    height:46px;
}

div#wrapper div#content[current="belegung"] div.content div.header {
    background-color:#dcdcdc;

    -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.25);

    border-bottom:1px solid #888888;

    position:absolute;

    z-index:2;

    z-index:100;

    width:100%;
}

div#wrapper div#content[current="belegung"] div.content div.row {
    background-color:#ffffff;
    border-bottom:1px solid #bcbcbc;

    top:29px;
}

div#wrapper div#content[current="belegung"] div.content div.week div.row {
    top:46px;
}

div#wrapper div#content[current="belegung"] div.content div.header div.name,
div#wrapper div#content[current="belegung"] div.content div.row div.name {
    display:block;

    float:left;

    width:140px;
    height:18px;

    padding:5px;

    font-weight:600;

    position:absolute;

    z-index:3;
}

div#wrapper div#content[current="belegung"] div.content div.header div.name {
    background-color:#dcdcdc;
    border-right:1px solid #bcbcbc;

    overflow:hidden;

    z-index:4;

    text-overflow:ellipsis;
    white-space:nowrap;
}

div#wrapper div#content[current="belegung"] div.content div.header div.first,
div#wrapper div#content[current="belegung"] div.content div.row div.first {
    display:block;

    float:left;

    width:70px;
    height:18px;

    padding:5px;

    font-weight:600;

    text-align:center;
}

div#wrapper div#content[current="belegung"] div.content div.week div.row div.first {

}

div#wrapper div#content[current="belegung"] div.content div.header div.days,
div#wrapper div#content[current="belegung"] div.content div.row div.days {
    display:block;

    float:left;

    width:140px;
    height:18px;

    padding:5px;

    text-align:center;

    border-left:1px solid #bcbcbc;

    font-size:12px;
    line-height:1.6em;
}

div#wrapper div#content[current="belegung"] div.content div.week div.row div.days {
    width:64.5px;
}

div#wrapper div#content[current="belegung"] div.content div.header div.days,
div#wrapper div#content[current="belegung"] div.content div.header div.first {
    font-weight:600;

    height:36px;
}

div#wrapper div#content[current="belegung"] div.content div.header div.days div.sub {
    display:block;
    float:left;

    font-size:9px;
    text-align:center;

    width:70px;
}

div#wrapper div#content[current="belegung"] div.content div.row div.name {
    /*background-color:#ababab;*/
    background-color:#999999;
    color:#ffffff;
}

div#wrapper div#content[current="belegung"] div.content div.row div.name span.plaetze {
    font-size:10px;
    margin-top:3px;
    float:right;
}

div#wrapper div#content[current="belegung"] div.content div.header div.time {
    display:block;

    float:left;

    width:39px;
    height:18px;

    padding:5px;

    text-align:center;

    border-left:1px solid #bcbcbc;

    font-size:12px;
    line-height:1.6em;

    position:relative;
    left:150px;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys {
    display:block;

    float:left;

    height:28px;

    background-color:#ffffff;

    cursor:pointer;
}

div#wrapper div#content[current="belegung"] div.content div.row.background,
div#wrapper div#content[current="belegung"] div.content div.row div.entrys.background,
div#wrapper div#content[current="belegung"] div.content div.week div.row.background {
    background-color:#dcdcdc;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry {
    position:absolute;

    height:28px;

    /*background-color:#759700;*/
    /*background-color:#2d738a;*/
    background-color:#c2af41;

    font-size:10px;
    color:#002b44;
    line-height:1.2em;
    text-align:center;
    /*text-shadow:1px 1px 1px #000000;*/

    cursor:pointer;

    overflow:hidden;

    border-left:1px solid #ffffff;

    z-index:2;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.erschienen,
div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.walkin,
div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.walkin-covid-19{
    background-color:#4ec241 !important;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.abgeschlossen {
    background-color:#86868a !important;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.noshow,
div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.storniert {
    background-color:#c24141 !important;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.preview {
    opacity:0.5;

    z-index:1;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.ui-draggable-dragging {
    z-index:99;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.clone {
    z-index:1;
}

div#wrapper div#content[current="belegung"] div.content div.row div.entrys div.entry.ui-draggable-dragging {
    opacity:0.75;
}

div#wrapper div#content[current="belegung"] div.content div.day div.timeline {
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;

    display:block;

    width:2px;

    background-color:#cc0000;

    z-index:2;
}

div#wrapper div#content[current="belegung"] div.content div.row.small{

    height: 28px;
    line-height: 28px;
    font-size: 15px;
    background-color: #FFFFFF;

}

div#wrapper div#content[current="belegung"] div.content div.row.small div.text.reservierungen{

    height: 28px;
    line-height: 28px;
    font-size: 15px;
    font-style: inherit;
    float: left;
    margin-left: 50px;
    left: 150px;
    position: relative;

}


/* ====================================================== */
/* Objektpläne */
/* ====================================================== */
div#wrapper div#content[current="tischplan"] {
    padding:1em;

    overflow:hidden;
}

div#wrapper div#content[current="tischplan"] div.header {
    position:fixed;
}

div#wrapper div#content[current="tischplan"] div.header .button {
    margin-right:10px;

    background-color:#004f7e;
    background:linear-gradient(#006399, #002b44) repeat center center;

    /*background-color:#9399a0;
    background:linear-gradient(to bottom, #9399a0 0%,#28343b 100%);*/
}

div#wrapper div#content[current="tischplan"] div.header  .button.inactive {
    background-color:#ef6100;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
    cursor:inherit;
}

div#wrapper div#content[current="tischplan"] div.header input.dauer {
    width:50px;
}

div#wrapper div#content[current="tischplan"] div.header input.button {
    background-color:#ffffff;

    padding:9px 6px;
}

div#wrapper div#content[current="tischplan"] div.header input.button.inactive {
    color:#ffffff;
    border:1px solid #666666;
}

.no-touch div#wrapper div#content[current="tischplan"] div.header  .button.inactive:hover {
    opacity:1 !important;
}

div#wrapper div#content[current="tischplan"] div.header .button.active,
div#wrapper div#content[current="tischplan"] div.header .button:active {
    background-color:#f2830b;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
}

div#wrapper div#content[current="tischplan"] div.content {
    position:absolute;

    top:60px;
    left:0px;
    bottom:0px;
    right:0px;

    border-top:1px solid #bcbcbc;

    overflow:hidden;

    background-color:#ffffff;
}

div.plan {
    position:relative;
    margin:0;
}

div#einstellungen-plan div.plan {
    min-width:100% !important;
    min-height:95% !important;
}

div.plan div.object {
    display:table;

    position:absolute;

    text-align:center;

    font-size:10px;
    color:#ffffff;
    line-height:1em;

    background-color:#759700;

    border-radius:2px;

    cursor:pointer;

    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    -webkit-box-sizing:border-box;

    z-index:2;
}

div.plan div.object.close {
    background-color:#bcbcbc;
}

div.plan div.object.blocked {
    background-color:#F27213;
}

div.plan div.object.belegt {
    background-color:#cc0000;
}

div.plan div.object.belegt.hover {
    background-color:#f2830b;
}

div.plan div.object.event {
    background-color:#004f7e;
}

div.plan div.object.event.hover {
    background-color:#f2830b;
}

div.plan div.object.selected {
    background-color:#f2830b;
}

div.plan div.object.belegt.selected {
    background:linear-gradient(45deg, #cc0000 50%, #f2830b 50%);
}

div.plan div.object.rund {
    border-radius:1000px;
}

div.plan div.object div.beschriftung {
    display:table-cell;
    vertical-align:middle;
}

div.plan div.object span.nummer {
    display:block;

    font-weight:600;
}

div.plan div.object span.plaetze {
    display:block;
}

div.plan div.einrichtung {
    position:absolute;

    background-color:#bcbcbc;
}

div.plan div.object.drag {
    cursor:move;
}

/* ====================================================== */
/* Einstellungen */
/* ====================================================== */
div#wrapper div#content[current="einstellungen"] {
    padding:1em;

    overflow:hidden;
    z-index: 900;
    background: white;
}

div#wrapper div#content[current="einstellungen"] div.header {
    position:fixed;
}


div#wrapper div#content[current="einstellungen"] div.header div.navigation div.button {
    margin-right:10px;

    background-color:#004f7e;
    background:linear-gradient(#006399, #002b44) repeat center center;

    /*background-color:#9399a0;
    background:linear-gradient(to bottom, #9399a0 0%,#28343b 100%);*/
}

div#wrapper div#content[current="einstellungen"] div.header div.navigation div.button.active,
div#wrapper div#content[current="einstellungen"] div.header div.navigation div.button:active {
    background-color:#f2830b;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
}

/* F�r Schichtleiter CSV Export ausblenden */
div#wrapper.ur3 div#content[current="einstellungen"] div.header div.navigation div.button[referenz="kunden-csv-export"] {
    display:none;
}

/* F�r Schichtleiter Tischpl�ne Einstellung ausblenden */
div#wrapper.ur3 div#content[current="einstellungen"] div.header div.navigation div.button[section="navigation_plans"] {
    display:none;
}

div#wrapper div#content[current="einstellungen"] div.header div.subnavigation {
    position:relative;

    top:10px;

    display:none;
}

div#wrapper div#content[current="einstellungen"] div.header div.subnavigation div.button {
    margin-right:10px;

    background-color:#004f7e;
    background:linear-gradient(#006399, #002b44) repeat center center;

    /*background-color:#9399a0;
    background:linear-gradient(to bottom, #9399a0 0%,#28343b 100%);*/
}

div#wrapper div#content[current="einstellungen"] div.header div.subnavigation div.button.active,
div#wrapper div#content[current="einstellungen"] div.header div.subnavigation .button:active {
    background-color:#f2830b;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
}

div#wrapper div#content[current="einstellungen"] div.content {
    position:absolute;

    top:60px;
    left:0px;
    bottom:0px;
    right:0px;

    border-top:1px solid #bcbcbc;

    overflow:auto;

    padding:1em;
}

/* Bestimmte Men�punkte/Bereiche f�r Schichtleiter ausblenden */
div#wrapper.ur3 div#content[current="einstellungen"] div.header.users,
div#wrapper.ur3 div#content[current="einstellungen"] div.header.stops {
    display:none;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.content.users,
div#wrapper.ur3 div#content[current="einstellungen"] div.content.stops {
    border-top:0;
    top:0px;
}


div#wrapper div#content[current="einstellungen"] div.content div.row {
    display:block;

    float:left;

    width:100%;

    position:relative;

    text-align:center;
}

/* Schichtleiter bestimmte Aktionen sperren */
div#wrapper.ur3 div#content[current="einstellungen"] div.add_oeffnungszeiten div.delete  {
    display:inline;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.add_oeffnungszeiten div.row:last-of-type  {
    display:inline;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.stops div.delete  {
    display:none;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.createNewAnlass,
div#wrapper.ur3 div#content[current="einstellungen"] div.anlaesse.vorlage  {
    display:none;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.createNewZusatzfeld,
div#wrapper.ur3 div#content[current="einstellungen"] div.zusatzfelder.vorlage  {
    display:none;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.createNewKundenzuordnung,
div#wrapper.ur3 div#content[current="einstellungen"] div.kundenzuordnung.vorlage  {
    display:none;
}

div#wrapper div#content[current="einstellungen"] div.content div.row div.upload_preview {
    position:absolute;

    top:-25px;
    right:-170px;

    width:150px;
    height:100px;

    overflow:hidden;

    background-size:contain;
    background-repeat:no-repeat;
    background-position:center center;
}

div#wrapper div#content[current="einstellungen"] div.content div.field:after {
    clear:both;
    float:none;
    display:block;
    height:0px;
    content:".";
    visibility:hidden;
}

div#wrapper div#content[current="einstellungen"] div.content div.field {
    background-color: #efefef;

    border: 1px solid #cccccc;

    /* float: left; */
    /* height: 36px; */
    height: auto;

    position:relative;
    margin:5px auto;

    padding: 5px;

    width: 650px;

    text-align:left;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.label {
    display: block;

    float: left;

    font-size: 14px;
    font-weight: 600;

    height: 100%;
    width: 190px;

    line-height: 2.5em;

    margin-right: 10px;

}

div#wrapper div#content[current="einstellungen"] div.content div.field div.label.doubleline {
    line-height:1.2em;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.label.required:after {
    content: "*";
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value {
    display: block;

    width:450px;

    float: left;

    position:relative;

    line-height:2.5em;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value span.headline {
    display:block;

    font-weight:600;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value span.innercontent {
    line-height:1.2em;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input,
div#wrapper div#content[current="einstellungen"] div.content div.field div.value select,
div#wrapper div#content[current="einstellungen"] div.content div.field div.value textarea{
    padding: 8px 6px;
    width: 436px;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value select{
    width: 450px;
    height: 33px;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input[name="zusatzfelder"] {
    left: 0px;
    width: 316px;
    float: left;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input[type=file] {
    padding:5px 6px;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input[type="checkbox"] {
    position: relative;
    top: 10px;

    float:left;

    width: auto;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input[type="radio"] {
    position: relative;
    top: 10px;

    float:left;

    width: auto;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input.mini {
    width: 15px;

    float:left;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input.small {
    width: 32px;

    float:left;

    text-align:center;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value label {
    float:left;

    position:relative;

    margin-left:5px;
    margin-right:15px;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value span.label {
    display:block;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value span.trenner {
    float:left;

    margin-left:5px;
    margin-right:5px;

    line-height:2.5em;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value div.entry {
    margin-bottom:5px;
}

div#wrapper div#content[current="einstellungen"] div.content input[type=submit] {
    margin-left:10px;
    margin-top:10px;

    width:200px;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.content input[type=submit] {
    display:none;
}

div#wrapper.ur3 div#content[current="einstellungen"] div.content form#einstellungen-global-open_times input[type=submit] {
    display:inline;
}

div#wrapper div#content[current="einstellungen"] div.content h2 {
    text-align:center;

    padding-bottom:5px;
    margin:20px auto 10px;

    width:650px;

    border-bottom:1px solid;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input.colorfield {
    float:left;

    width:40px;
    height:36px;

    padding:0;
    margin-left:5px;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input.has_colorfield {
    float:left;

    width:381px;
}


div#wrapper div#content[current="einstellungen"] div.content div.field div.value input.datetime{
    float:left;
    margin-right: 10px;
    width:189px;
}

/* ====================================================== */
/* Marketing / Statistik */
/* ====================================================== */
div#wrapper div#content[current="marketing"] {
    padding:1em;

    overflow:hidden;
}

div#wrapper div#content[current="marketing"] div.header {
    position:fixed;
}

div#wrapper div#content[current="marketing"] div.header div.navigation div.button {
    margin-right:10px;

    background-color:#004f7e;
    background:linear-gradient(#006399, #002b44) repeat center center;

    /*background-color:#9399a0;
    background:linear-gradient(to bottom, #9399a0 0%,#28343b 100%);*/
}

div#wrapper div#content[current="marketing"] div.header div.navigation div.button.active,
div#wrapper div#content[current="marketing"] div.header div.navigation .button:active {
    background-color:#f2830b;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
}

div#wrapper div#content[current="marketing"] div.content {
    position:absolute;

    top:60px;
    left:0px;
    bottom:0px;
    right:0px;

    border-top:1px solid #bcbcbc;

    overflow:auto;

    padding:1em;
}

div#wrapper div#content[current="marketing"] div.content div.row {
    display:block;

    float:left;

    width:100%;

    position:relative;

    text-align:center;
}

div#wrapper div#content[current="marketing"] div.header div.button {
    margin-right:10px;

    background-color:#004f7e;
    background:linear-gradient(#006399, #002b44) repeat center center;

    /*background-color:#9399a0;
    background:linear-gradient(to bottom, #9399a0 0%,#28343b 100%);*/
}

div#wrapper div#content[current="marketing"] div.header div.button.active,
div#wrapper div#content[current="marketing"] div.header .button:active {
    background-color:#f2830b;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
}

div#wrapper div#content[current="marketing"] div.content h2 {
    text-align:center;

    padding-bottom:5px;
    margin:20px auto 10px;

    width:650px;

    border-bottom:1px solid;

    cursor:pointer;
}

div#wrapper div#content[current="marketing"] div.content div.accordion {
    display:none;
}

div#wrapper div#content[current="marketing"] div.content div.field {
    background-color: #efefef;

    border: 1px solid #cccccc;

    /* float: left; */
    /* height: 36px; */
    height: auto;

    position:relative;
    margin:5px auto;

    padding: 5px;

    width: 650px;

    text-align:left;
}

div#wrapper div#content[current="marketing"] div.content div.field:after {
    display:block;
    visibility:hidden;
    height:0px;

    content:".";

    float:none;
    clear:both;
}

div#wrapper div#content[current="marketing"] div.content div.field div.label {
    display: block;

    float: left;

    font-size: 14px;
    font-weight: 600;

    height: 100%;
    width: 190px;

    line-height: 2.5em;

    margin-right: 10px;

}

div#wrapper div#content[current="marketing"] div.content div.field div.label.doubleline {
    line-height:1.2em;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value {
    display: block;
    width: 450px;

    float: left;

    position:relative;

    line-height:2.5em;
    word-wrap: break-word;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value input.has_colorfield {
    float:left;

    width:381px;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value span.headline {
    display:block;
    line-height: 20px;

    font-weight:600;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value span.innercontent {
    line-height:1.2em;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value input,
div#wrapper div#content[current="marketing"] div.content div.field div.value select,
div#wrapper div#content[current="marketing"] div.content div.field div.value textarea {
    padding: 8px 6px;
    width: 436px;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value input.colorfield {
    float:left;

    width:40px;
    height:36px;

    padding:0;
    margin-left:5px;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value span#newsletter_kundenzuordnung {
    display:block;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value input[type="checkbox"] {
    position: relative;
    top: 11px;

    margin-right:5px;

    float:left;

    width: auto;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value input.small {
    width: 32px;

    float:left;

    text-align:center;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value span#span_selected_customers {
    display:block;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value span#span_selected_customers span {
    font-weight:600;
}

div#wrapper div#content[current="marketing"] div.content input[type=submit] {
    margin-left:10px;
    margin-top:10px;
    margin-bottom:10px;

    width:200px;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value div.entry {
    margin-bottom:5px;
}

div#wrapper div#content[current="marketing"] div.table div.row.header div.col {
    height:25px;

    font-weight:600;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col.wrong_monat {
    opacity:0.33;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col {
    width:14%;
    height:154px;

    border-bottom:1px solid #bcbcbc;
    border-left:1px solid #bcbcbc;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col:nth-of-type(7n) {
    border-right:1px solid #bcbcbc;
}

div#wrapper div#content[current="marketing"] div.table div.row:first-of-type div.col {
    border-top:1px solid #bcbcbc;
    border-bottom:1px solid #888888;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col div.date {
    padding:2px;

    font-weight:600;

    border-bottom:1px solid #bcbcbc;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col div.entry {
    padding:5px;

    font-size:12px;
    color:#ffffff;

    background-color:#2d738a;

    margin-bottom:2px;

    cursor:pointer;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col div.entry div.name {
    display:block;
    width:100%;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div#wrapper div#content[current="marketing"] div.table div.row div.col div.entry div.info {
    display:block;
    width:100%;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div#wrapper div#content[current="marketing"] div.header div.navigation div.button.inactive {
    background-color:#ef6100;
    background:linear-gradient(#ffb25a, #ef6100) repeat center center;
    cursor:inherit;
}

div#wrapper div#content[current="marketing"] div.content div.field div.value input[type=file] {
    padding:5px 6px;
}

div#wrapper div#content[current="marketing"] div.content div.chart {
    display:block;

    width:662px;
    height:300px;

    margin:0 auto;
}

div#wrapper div#content[current="marketing"] div.content div.chart.mini {
    position: absolute;
    right: 10px;
    top: 10px;

    width: 275px;
    height: 275px;
}
div#wrapper div#content[current="marketing"] div.content div.field div.value span.trenner {
    float:left;

    margin-left:5px;
    margin-right:5px;

    line-height:2.5em;
}

div.text-red{
    color: #C24142;
}

/* ======== */
/* Feedback */
/* ======== */

div#wrapper div#content[current="marketing"] div.content div.feedback_kommentar div.field {
    background-color: #efefe;
    border: 1px solid #cccccc;
    margin:5px auto;
    padding: 5px;
    width: 650px;
    text-align:left;
}

div#wrapper div#content[current="marketing"] div.content div.feedback_kommentar  div.field div.label {
    display: block;
    float: left;
    font-size: 12px;
    font-weight: 600;
    height: 100%;
    width: 190px;
    line-height: 1.2em;
    margin-right: 10px;
    padding-bottom: 10px;
}

div#wrapper div#content[current="marketing"] div.content div.feedback_kommentar div.field div.value {
    display: block;
    width: 450px;
    float: left;
    position: relative;
    height: auto;
    line-height: 1.5em;
    word-wrap: break-word;
}

div#wrapper div#content[current="marketing"] div.content div.feedback_kommentar div.field div.footer {
    clear: both;
    padding-top:  24px;
}
div#wrapper div#content[current="marketing"] div.content div.feedback_kommentar div.field div.button {
    font-size: 12px;

}

div#wrapper div#content[current="marketing"] div.content div.feedback_kommentar div.field div.footer div.button.best_status{
    float: right;
    bottom: 0;
}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages{
    position: absolute;
    background-image:url('../img/icons/flags.png');
    background-repeat:no-repeat;
    width: 20px;
    height: 20px;
    margin-top: 5px;


}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages.de{
    background-position:0px -20px;
}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages.en{
    background-position:0px -200px;
}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages.it{
    background-position:0px -240px;
}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages div.sub {
    position: absolute;
    top: 27px;
    right: -30px;
    z-index: 999
}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages div.sub ul {
    max-height: 0px;
    overflow: hidden;
    text-align: center;
    transition: max-height 0.5s ease-in-out 0s;
}

div#wrapper div#head div#backend div#backend_navigation div#languages_box div#languages div.sub li {
    background-color: rgba(0, 79, 126, 1);
    border-bottom: 1px solid #002b44;
    border-right: 1px solid #002b44;
    border-left: 1px solid #002b44;
    cursor: pointer;
    height: 17px;
    padding: 15px;
    transition: background-color 0.25s ease-in-out 0s;


}


div#wrapper div#content[current="einstellungen"] div.content div.field div.value div.button.alle_loeschen {
    float: right;
}
div#wrapper div#navigation div#navigation_wrapper div.button.walkin div.icon {
    background-position:10px -180px;
}

div#wrapper div#navigation div#navigation_wrapper div.button.walkin {
    background:transparent;
    background-color:#808080;
}
div#wrapper div#content[current="einstellungen"] div.content div.field div.value input[name="reservierungszusatzfelder"] {
    left: 0px;
    width: 316px;
    float: left;
    margin-right: 20px;
}

div.plan div.object.belegt.doppelt_belegt {
    background:linear-gradient(45deg,  #c00 50%, #5ed15e 50%);
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value label.zusatzfelder{
    line-height:1.2em;
    word-wrap: break-word;
    left: 15px;
    top: -11px;
}

div#wrapper div#content[current="tischplan"] div.plan_navigation
{
    position: fixed;
    left: 0;
    bottom: 0;
}

div#wrapper div#content[current="tischplan"] div.plan_navigation div.button
{
    width: 20px;
    float: none;
    margin-bottom: 2.5px;
    margin-left: 2.5px;
}


div.popup  div.plan_navigation{
    position: absolute;
    margin: auto;
    left: 0px;
    bottom: 65px;
}


div.popup div.plan_navigation div.button{
    width: 20px;
    float: none;
    margin-bottom: 2.5px;
    margin-left: 2.5px;
}

div#wrapper div#content[current="einstellungen"] div.content div.field div.value input.reservieung_ohne_tisch_farbe{
    margin-left: 50px;
}

div#wrapper div#sidebar div#liste div.liste table td.ohne_tisch{
    background: repeating-linear-gradient(
        25deg,
        #dcdcdc,
        #000 5px,
        #dcdcdc 5px,
        #dcdcdc 10px
        );
}

div#wrapper div#content[current="marketing"] div.content table#produktetabelle img#einstellungen_produktImage_preview {
    width: 50px;
    height: 50px;
}

table.dataTable tbody th, table.dataTable tbody td{
    padding: 0;
    text-align: center;
}

table.dataTable tbody th, table.dataTable tbody td.td-option {
    width: 175px;
    padding: 0;
}

div#wrapper div#content[current="marketing"] div.content table#bestellungentabelle td.fertig {
    background-color:rgba(0,255, 0, 0.3);
}

div#wrapper div#content[current="marketing"] div.content table#bestellungentabelle td.offen {
    background-color:rgba(255, 0, 0, 0.3);
}

div#wrapper div#content[current="marketing"] div.content table#bestellungentabelle td.in_vorbereitung {
    background-color:rgba(255, 255, 0, 0.3);
}

div#wrapper div#content[current="marketing"] div.content table#bestellungentabelle td.storno {
    background-color:rgba(0, 0, 0, 0.3);
}

div#wrapper div#content[current="marketing"] div.header div.navigation div.button.aktualisieren{
    background:transparent;
    background-color:#317629;
}

.gg-trash {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 10px;
    height: 12px;
    border: 2px solid transparent;
    box-shadow:
        0 0 0 2px,
        inset -2px 0 0,
        inset 2px 0 0;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    margin-top: 4px;
}

.gg-trash::after,
.gg-trash::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-trash::after {
    background: currentColor;
    border-radius: 3px;
    width: 16px;
    height: 2px;
    top: -4px;
    left: -5px
}
.gg-trash::before {
    width: 10px;
    height: 4px;
    border: 2px solid;
    border-bottom: transparent;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    top: -7px;
    left: -2px
}

.gg-trash-red{
    color: red;
}

.gg-copy {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 14px;
    height: 18px;
    border: 2px solid;
    margin-left: -5px;
    margin-top: -4px
}
.gg-copy::after,
.gg-copy::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute
}
.gg-copy::before {
    background:
        linear-gradient( to left,
        currentColor 5px, transparent 0)
        no-repeat right top/5px 2px,
        linear-gradient( to left,
        currentColor 5px, transparent 0)
        no-repeat left bottom/ 2px 5px;
    box-shadow: inset -4px -4px 0 -2px;
    bottom: -6px;
    right: -6px;
    width: 14px;
    height: 18px
}
.gg-copy::after {
    width: 6px;
    height: 2px;
    background: currentColor;
    left: 2px;
    top: 2px;
    box-shadow: 0 4px 0,0 8px 0;
    margin-left: 5px
}


.gg-check {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px
}

.gg-check::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 3px;
    top: -1px;
    width: 6px;
    height: 10px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    transform-origin: bottom left;
    transform: rotate(45deg)
} 
div.popup div.content div.field div.value
/*div#wrapper div#content[current="marketing"] div.content div.field div.label.offers{
po
}

div#wrapper div#content[current="marketing"] div.content div.field div.value.offers{

}  */

/* Grundlegende Stile für das Popup */
#offers-popup {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
    width: 300px;
    border-radius: 5px;
}

div#wrapper div#sidebar div#liste div.liste table td.status_restaurant.offers{
    background-color: #c2af41;
}

div#wrapper div#sidebar div#liste div.liste table td.status_restaurant div {
    position:relative;

    margin:0 auto;

    width:20px;
    height:20px;

    background-image:url('../img/icons/restaurant_icon.png');
    background-repeat:no-repeat;
    background-position:50% 0px;
}

div#wrapper div#sidebar div#liste div.liste table td.status_restaurant.offers div {
    background-position: 91%  -47px;
}

/* Messages extension */
.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.controls {
    margin-bottom: 10px;
}

.controls select {
    margin-right: 10px;
}

.main-area textarea {
    width: 100%;
    height: 100%;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
    resize: none;
}

.sidebar {
    width: 250px;
    flex-direction: column;
    padding: 10px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.tab {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #e0e0e0;
    cursor: pointer;
}

.tab.active {
    background-color: #fff;
    font-weight: bold;
}

.item-list li {
    padding: 5px 0;
}