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

@charset "UTF-8";
@import "../css/local_roboto.css";

/* ====================================================== */
/* Globale Definitionen */
/* ====================================================== */
* {
    margin:0;
    padding:0;

    outline:none;

    /*-webkit-backface-visibility: hidden; */
}

body {
    font-size:14px;
    font-weight:400;
    font-family:'Roboto',Arial,sans-serif;

    /* background-color:#f2f3eb; */
    color:#004f7e;

    overflow:hidden;
}

body.touch > *:hover {
    opacity:inherit !important;
}

p {
    margin: 20px 0;
}

a {
    color:#004f7e;
}

a:hover {
    opacity:0.8;
}

.icon {
    cursor:pointer;
}

div.label > img {
    position:relative;
    top:1px;
}

div#wrapper div.title {
    position:absolute;

    margin-left:10px;
    margin-top:10px;

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

    color:rgba(255,255,255,1);
}

.cssclear, 
.clear:after { 
    content:".";

    clear:both;
    float:none;

    display:block;

    height:0;

    visibility:hidden;
}

.button {
    float: left;

    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-align:center;
    line-height:1.3em;

    width: auto;

    padding: 9px 16px;

    border:1px solid #666666;

    cursor:pointer;

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

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

    font-family: "Roboto",Arial,sans-serif;

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

.button:hover {
    opacity:0.8;
}

.button.plusminus {
    font-size:16px;
    line-height:0.9em;

    width:8px;
    height:16px;
}

.button.cancel {
    background:transparent !important;
    background-color:#cc0000 !important;
    background:linear-gradient(#cc0000, #aa0000) repeat center center !important;
}
.button.gruen,
.button.ok,
.button.next,
.button.save {
    background:transparent !important;
    background-color:#759700 !important;
    background:linear-gradient(#759700, #317629) repeat center center !important;
}

.button.add_dropdown{

    margin-left: 10px;

}

span.error {
    position:absolute;

    margin:10px;
}

.print {
    cursor:pointer;
}

span.print:hover {
    text-decoration:underline;
}

.android .dw {
    background-color:#002b44;
}

.android .dw-bubble-bottom .dw-arr {
    border-color: transparent transparent #002b44;
}

.android .dwwc {
    background-color:transparent;
}

/* ====================================================== */
/* Mobile & Spezialf�lle */
/* ====================================================== */
.ui-loader {
    display:none !important;
    width:0;
    height:0;
    visibility:hidden;
}

/* ====================================================== */
/* �berschriften */
/* ====================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    display:block;

    margin:20px 0 10px;

    font-weight:600;
}

h1 {
    font-size:20px;
}

h2 {
    font-size:18px;
}

h3 {
    font-size:16px;
}

h4,
h5,
h6 {
    font-size:15px;
}

/* ====================================================== */
/* Kalendar */
/* ====================================================== */
div.datepicker_dashboard,
div.datepicker_vista,
div.datepicker_jqui,
div.datepicker_minimal,
div.datepicker_bootstrap {
    z-index:999;
}

.datepicker_minimal .header {
    background-color:#004f7e;
}

/* ====================================================== */
/* Datetimepicker */
/* ====================================================== */
#dw_cancel {
    background: #ad5151;
    background: -moz-linear-gradient(top, #ad5151 0%, #ea5454 50%, #c12c2c 51%, #a81717 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ad5151), color-stop(50%,#ea5454), color-stop(51%,#c12c2c), color-stop(100%,#a81717));
    background: -webkit-linear-gradient(top, #ad5151 0%,#ea5454 50%,#c12c2c 51%,#a81717 100%);
    background: -o-linear-gradient(top, #ad5151 0%,#ea5454 50%,#c12c2c 51%,#a81717 100%);
    background: -ms-linear-gradient(top, #ad5151 0%,#ea5454 50%,#c12c2c 51%,#a81717 100%);
    background: linear-gradient(to bottom, #ad5151 0%,#ea5454 50%,#c12c2c 51%,#a81717 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad5151', endColorstr='#a81717',GradientType=0 );
}

#dw_set { 
    background: #559144;
    background: -moz-linear-gradient(top, #559144 0%, #8bba00 50%, #4d7700 51%, #4d7700 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#559144), color-stop(50%,#8bba00), color-stop(51%,#4d7700), color-stop(100%,#4d7700));
    background: -webkit-linear-gradient(top, #559144 0%,#8bba00 50%,#4d7700 51%,#4d7700 100%);
    background: -o-linear-gradient(top, #559144 0%,#8bba00 50%,#4d7700 51%,#4d7700 100%);
    background: -ms-linear-gradient(top, #559144 0%,#8bba00 50%,#4d7700 51%,#4d7700 100%);
    background: linear-gradient(to bottom, #559144 0%,#8bba00 50%,#4d7700 51%,#4d7700 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#559144', endColorstr='#4d7700',GradientType=0 );
}

/* ====================================================== */
/* Formulare */
/* ====================================================== */
input,
select,
textarea {
    font-family:'Roboto',Arial,sans-serif;
    font-size:13px;
}

input,
input[type=text],
input[type=email], 
input[type=password],
input[type=search],
input.search,
select,
textarea {
    border-radius:0px;

    padding:8px 6px;

    border:1px solid #85abc2;

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

    color:#004f7e;
}

textarea {
    height:100px;

    resize:none;
}

select {
    padding:3px 6px;

    height:28px;
}

input[type=submit] {
    border:1px solid #4d7700;

    cursor:pointer;

    color:#f2f3eb;

    font-weight:600;

    height:32px;

    padding:0;

    background-color:#759700;
    background:linear-gradient(#759700, #317629) repeat center center;
}

input[type=submit]:hover {
    opacity:0.8;
}

option {
    padding:5px;
}

form .message {
    display:none;

    border:1px solid #f6c45a;
    border-radius:3px;

    padding:10px;

    font-size:14px;

    background-color:#fdfbe2;

    opacity:0;

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

form .message.show {
    display:block;
    opacity:1;
}

form .message .title {
    color:#cc0000;

    font-weight:600;
}

/* ====================================================== */
/* Effekte */
/* ====================================================== */
.requesting {
    filter:blur(3px);
    -webkit-filter:blur(3px);
    -o-filter:blur(3px);
    -ms-filter:blur(3px);
    -moz-filter:blur(3px);
    filter:url("../img/blur.svg#colorblur"); 
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

    pointer-events:none;
}

.effects {
    transition:all 0.15s ease-in-out 0s;
}

/* ====================================================== */
/* Listen */
/* ====================================================== */
ul {
    list-style:none;
}

ul.open {
    max-height:1000px !important;
} 

ul .arrow {
    width:8px;
    height:5px;

    position:absolute;
    top:22px;
    right:11px;

    background-image:url('../img/icons/dropdown_arrows.png');
    background-repeat:no-repeat;
}

ul.open .arrow {
    background-position:0px -5px;
}

/* ====================================================== */
/* Icon-Klassen */
/* ====================================================== */
.icon {
    cursor:pointer;
}

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

.icon_dropdown:hover,
.icon_dropdown.active {
    background-color:#002b44;
}

div.icon_16 {
    width:16px;
    height:16px;

    background-image:url('../img/icons/icons_16.png');
    background-repeat:no-repeat;
}

div.icon_16.home {
    background-position:0px 0px;
}

div.icon_16.settings {
    background-position:0px -16px;
}

div.icon_16.help {
    background-position:0px -32px;
}

div.icon_16.arrow {
    background-position:0px -48px;
}

div.icon_16.arrow_blue {
    background-position:0px -64px;
}

div.icon_16.kalendar {
    background-position:0px -80px;
}

div.icon_16.power {
    background-position:0px -96px;
}

div.icon_16.hamburger{
    background-position:0px -160px;
}

div.icon_16.walkin {
    background-position:0px -112px;

    padding-top:1px;
    padding-left:20px;

    width:60px;
}

div.icon_20 {
    width:20px;
    height:20px;

    background-image:url('../img/icons/res_status.png');
    background-repeat:no-repeat;
}

div.icon_20.walkin {
    background-position:0px -140px;

    padding-left:20px;

    line-height:1.8em;

    width:60px;
}

div.icon_20.bell {
    padding-left: 20px;
    line-height: 1.8em;
    width: 60px;
    background-image: url('../img/icons/bell.png');
}

div#wrapper div#head div#bell div#notification_count {

    color: #FFFFFF;
    position: absolute;
    margin-top: -5px;
    margin-left: 10px;
    background-color: #C24141;
    height: 15px;
    width: 15px;
    text-align: center;
    border-radius: 15px;

}

div.info_icons {
    width:20px;
    height:20px;

    background-image:url('../img/icons/info_icons_20.png');
    background-repeat:no-repeat;
}

div.info_icons.birthday {
    background-position:50% -40px;
}

div.info_icons.weddingday {
    background-position:50% -60px;
}

/* ====================================================== */
/* Loader */
/* ====================================================== */
div#loader,
.spinner-img {
    position:fixed;

    top:50%;
    left:50%;

    width:100px;
    height:16px;

    margin-left:-75px;
    margin-top:-25px;

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

    padding:15px 0 20px 50px;

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

    background-color:rgba(255,255,255,0.9);
    background-image:url('../img/icons/loader.gif');
    background-repeat:no-repeat;
    background-position:10px center;

    opacity:0;

    z-index:9999;
}

/* ====================================================== */
/* Error MSG Box */
/* ====================================================== */
div.errormsg {
    position:fixed;

    top:50%;
    left:50%;

    max-width:95%;
    /*height:20px;*/
    height:auto;

    margin-left:-120px;
    margin-top:-30px;

    color:#cc0000;
    font-size:16px;
    font-weight:600;
    text-align:center;

    padding:20px;

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

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

    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);

    z-index:9999;

    cursor:pointer;
}

/* ====================================================== */
/* MSG Box */
/* ====================================================== */
div.msg {
    position:fixed;

    top:50%;
    left:50%;

    max-width:95%;
    height:20px;

    margin-left:-120px;
    margin-top:-30px;

    color:#759700;
    font-size:16px;
    font-weight:600;

    padding:20px;

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

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

    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);

    z-index:9999;

    cursor:pointer;
}

/* ====================================================== */
/* Question Box */
/* ====================================================== */
div.question {
    position:fixed;

    top:50%;
    left:50%;

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

    margin-left:-120px;
    margin-top:-55px;

    color:#004f7e;
    font-size:16px;
    font-weight:600;

    padding:20px;

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

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

    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.5);

    z-index:9999;

    cursor:pointer;
}

div.question.datenschutz{

    top: 0;
    left: 0;
    margin: 0;

}

div.question div.answer {
    display:block;

    width:100%;

    margin-top:10px;
}

div.question div.answer .button.cancel {
    float:left;
}

div.question div.answer .button.next {
    float:right;
}

div.question div.answer .button.ok {
    margin: 0 auto;
    float: none;
    width: 85px;
}

/* ====================================================== */
/* DIV Tabellen */
/* ====================================================== */
div.table div.row div.col {
    display:block;
    float:left;

    min-height:25px;
}

div.table div.row.header div.col {
    line-height:1.8em;
}

div.table div.row div.col.background {
    background:#dcdcdc;
}

.hand{
    cursor:pointer;
}

.pflicht:after{
    content: " *";
}

.switch {
	padding:0;
	
	position: absolute;
	
	width:16px;
	height:16px;
	
	background:url("../img/icons/icons_16.png") 50% -144px no-repeat transparent !important;
	
	right:15px;
	top: 15px;
	
	color:transparent;
	border:0;
}

.span_kunden_karten {
    margin-left: 5px
}