:root {
  --body-background: #fff;
  --button-preisliste: #58585b;
  --button-preisliste-aktiv: #bbaf9d;
  --button-preisliste-aktiv-bottom: #58585b;
  --button-preisliste-hover: #bbaf9d;
  --button-preisliste-hover-bottom: #58585b;

  --header-background: rgba(88, 88, 91, 16);

}


html, body {
    background: var(--body-background) none repeat scroll 0 0;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 18px;
    color:#6c6c6c;
    margin: 0;
    padding: 0;
	height: 3000px;
}

#header.fixed {
    height: 76px;
    margin: 0;
    overflow: hidden;
    position: inherit;
    width: 100%;
    z-index: 5;
}

#mainmenu, #header.fixed #mainmenu {
    background: var(--header-background) none repeat scroll 0 0;
}

#header.fixed #mainmenu li a {
    color: #fff;
}

#header.fixed #mainmenu li a:hover, #header.fixed #mainmenu li a:focus,
	#header.fixed #mainmenu li a:active {
	color: #fff;
}


#buchen em {
    font-size: 20px;
}


span {
    font-size: 14px;
}

strong {
    font-size: 12px;
}

label, a {
    font-size: 15px;
}

#preis strong {
    font-size: 20px;
}

div, applet, object, iframe, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, font, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-size: 14px;
}

.slide-up .medium {
    float: left;
    font-size: 15px;
    width: calc(100% - 30px);
}

.big {
    font-size: 24px;
    line-height: 33px;
}

dfn, cite, em, i {
    font-style: italic;
    font-weight: bold;
    font-size: 12px;
}

.dateproducts li {
    background: #fff none repeat scroll 0 0;
    padding: 6px 10px 10px;
    position: relative;
}

.minipaddleft {
    border-left: 0px solid #000;
    margin-left: 0px !important;
}

a.datemakerboxLink {
    background-color: #38291c !important;
    color: #fff !important;
    opacity: 1 !important;
    z-index: 1000;
}

#kml {
	color: #6c6c6c;
}

#kml-button {
	border-color: #6c6c6c;
	color: #6c6c6c;
}

#kml-button span.ui-selectmenu-status {
	color: #6c6c6c;
}

#kml-button span.ui-selectmenu-icon {
	border-left: 1px dashed rgba(0, 0, 0, 23);
}

.ui-selectmenu-menu ul#kml-menu {
	border: 1px solid #6c6c6c;
	border-top: none;
}

.ui-selectmenu-menu ul#kml-menu li a {
	color: #6c6c6c;
}

.ui-selectmenu-menu ul#kml-menu li.ui-state-hover a {
	color: #fff;
	background-color: #6c6c6c;
}

input.btn.btn-large[type="submit"] {
    background-color: #6c6c6c;
    border-color: #6c6c6c !important;
}

input.btn.btn-large[type="submit"]:hover {
	background-color: var(--button-preisliste-aktiv);
	border-color: #38291c;
	color: #fff !important;
}

input[type="checkbox"]:checked + .btn-flat.btn-primary, [class*="grid-"] input[type="checkbox"]:checked + .btn-flat.btn-primary {
    background-color: var(--button-preisliste-aktiv);
    border-bottom: 4px solid var(--button-preisliste-aktiv-bottom);
    color: var(--button-preisliste-aktiv);
    position: relative;
}

input[type="checkbox"]:checked+.btn-flat.btn-primary:after,*[class*="grid-"] input[type="checkbox"]:checked+.btn-flat.btn-primary:after
	{
	content: 'Gewählt';
	color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}


.btn-primary, [class*="grid-"] > .btn-primary {
    background-color: var(--button-preisliste);
    color: #fff;
}

.btn-flat.btn-primary:active, *[class*="grid-"] .btn-flat.btn-primary:active,
.btn-flat.btn-primary:focus, *[class*="grid-"] .btn-flat.btn-primary:focus,
.makedate:hover .btn-flat.btn-primary, .makedate:hover *[class*="grid-"] .btn-flat.btn-primary,
.btn-flat.btn-primary:hover, *[class*="grid-"] .btn-flat.btn-primary:hover {
	color: #fff;
	border-bottom: 4px solid var(--button-preisliste-hover-bottom);
	background-color: var(--button-preisliste-hover);
}



#header li.logo a, #header.fixed li.logo a {
    width: 1px !important;
}

#header.fixed #mainmenu li.logo a {
    width: 313px;
}

#header.fixed li.logo a {
    background-image: url("/templates/frontend/_css/salons/211/logo.jpg");
    background-size: auto 30px;
    height: 31px;
    width: 313px;
}
#mainmenu li.logo a {
    background-image: url("/templates/frontend/_css/salons/211/logo.jpg");
    background-repeat: no-repeat;
    display: block;
    height: 31px;
    width: 313px;
}


.txt_blue, a:link, a:visited, .makedate:hover, .makedate:focus {
    color: var(--button-preisliste);
}

#productform .active {
    color: #6c6c6c;
}

.txt_blue_price {
	color: #6c6c6c;
	text-decoration: none;
}

a.pricelist {
    background: #6c6c6c none repeat scroll 0 0;
}

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


#header #mainmenu li.searcher > a::before, #header #mainmenu li.menu > a::before, #header #mainmenu li.login > a::before {
    background: rgba(0, 0, 0, 0) url("/templates/frontend/_css/salons/217/button-login-217.svg") repeat scroll 0 0;
		width: 54px;
		float: right;
		text-align: center;
		margin-left: 10px;
}

	a.datemakerboxLink:hover {
		background-color: #38291c !important;
	}

}

/* Seite 2 */


label.WhoCanDoit {
	position: relative;
	display: inline-block;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.4);
	width: 25%;
	width: calc(33.33% -       26px);
	float: left;
	text-align: center;
	margin: 2px;
	height: auto;
	padding: 10px;
	display: inline-block;
	z-index: 1;
}


.hideName {
	-webkit-transition: top 0.5s; /* Safari */
	transition: top 0.5s;
	position: absolute;
	left: 0%;
	top: -300%;
	width: 72px;
	background-color: rgba(0, 0, 0, 0.6);
	color: white;
	height: 100%;
	width: 100%;
	z-index: -1;
	padding: 80% 0 0 0px;
	font-size: 13px;
	hyphens: auto;
}

label.WhoCanDoit.active,label.WhoCanDoit:hover {
	border: 1px solid #04a7c8;
	background: #04a7c8;
	color: #fff;
}



label.pointer, a.pointer {
    border: medium none;
    color: #6c6c6c;
    cursor: pointer;
    font-size: 12px;
    height: 25px;
    padding: 0;
    text-align: center;
    width: 100%;
}

label.pointer:hover,a.pointer:hover {
	color: #fff;
	background-color: var(--button-preisliste-aktiv);
}

.terminTable {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

a {
    color: #6c6c6c;
    text-decoration: none;
}

a:hover, a:focus {
    color: #6c6c6c;
    text-decoration: none;
}

.header-wunsch {
    color: #6c6c6c !important;
    text-decoration: none;
    text-align: center;
    line-height: 1.5em;
}

/* Seite 3 */

.btn-info, *[class*="grid-"] > .btn-info {
	background-color: #6c6c6c;
	*background-color: #6c6c6c;
	/* Darken IE7 buttons by default so they stand out more given they won't have borders */
	border-bottom: 4px solid #6c6c6c;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
	background-color: var(--button-preisliste-hover);
	color: #fff !important;
	*background-color: #38291c;
}

.btn-flat, [class*="grid-"] .btn-flat {
    border-color: -moz-use-text-color -moz-use-text-color #6c6c6c;
    border-bottom: 4px solid #6c6c6c;
}

.ui-selectmenu-status {
    color: #000;
}

.ui-selectmenu-menu li a, .ui-selectmenu-status {
    color: #6c6c6c;
}

.ui-selectmenu-menu li.ui-state-hover a {
	color: #fff;
	background: #6c6c6c;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
    border: 1px solid #6c6c6c  !important;
    color: #6c6c6c !important;

}



.ui-selectmenu.ui-widget {
    border: 1px solid #6c6c6c;
}

.ui-selectmenu-menu ul {
    border-color: -moz-use-text-color #6c6c6c;
}

.searchform input[type="checkbox"] + span::before, .checkbox input[type="checkbox"] + span::before, .checkbox input[type="checkbox"] + span#ratingmail-label label::before, .checkbox input[type="checkbox"] + span#sms_reminder-label label::before, .checkbox input[type="checkbox"] + span#sms_confirm-label label::before, .checkbox input[type="checkbox"] + span#reminder-label label::before, .checkbox input[type="checkbox"] + span#newsletter-label label::before, #bigregistration input[type="checkbox"] + span#salon_agb-label label::before {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    border: 1px solid #6c6c6c;
}

.checkbox input[type="checkbox"]:checked + span::before, .searchform input[type="checkbox"]:checked + span::before, #bigregistration input[type="checkbox"]:checked + span#salon_agb-label label::before {
    color: #6c6c6c;
    content: "X";
}

#bigregistration input[type="checkbox"]:focus+span#salon_agb-label label:before,#bigregistration input[type="checkbox"]:hover+span#salon_agb-label label:before,.checkbox input[type="checkbox"]:focus+span:before,.checkbox input[type="checkbox"]:hover+span:before,.checkbox input[type="checkbox"]:focus+span#ratingmail-label label:before,.checkbox input[type="checkbox"]:hover+span#ratingmail-label label:before,.checkbox input[type="checkbox"]:focus+span#sms_reminder-label label:before,.checkbox input[type="checkbox"]:hover+span#sms_reminder-label label:before,.checkbox input[type="checkbox"]:focus+span#sms_confirm-label label:before,.checkbox input[type="checkbox"]:hover+span#sms_confirm-label label:before,.checkbox input[type="checkbox"]:focus+span#reminder-label label:before,.checkbox input[type="checkbox"]:hover+span#reminder-label label:before,.checkbox input[type="checkbox"]:focus+span#newsletter-label label:before,.checkbox input[type="checkbox"]:hover+span#newsletter-label label:before,.searchform input[type="checkbox"]:focus+span:before,.searchform input[type="checkbox"]:hover+span:before
	{
	content: 'X';
	color: rgba(0, 0, 0, 0.4);
}

.datetimer::before {
    color: #6c6c6c;
}


/* Vielen Dank Seite */

.neverbreak::after {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.searchform .btn.lila {
    background-color: #6c6c6c;
    border-color: #6c6c6c !important;
    }
    
.searchform .btn.lila:hover {
	background-color: #6c6c6c;
	border-color: #6c6c6c;
	color: #fff !important;
}

.welcome::after {
    background: rgba(0, 0, 0, 0) url("/templates/frontend/_css/salons/217/willkommen.svg") repeat scroll 0 0 / contain ;
}

/* Termin suchen und prüfen */

#termin-suchen {
    background: rgba(255, 255, 255, 0.7) url("/templates/frontend/_css/salons/217/termin-suchen.gif") no-repeat scroll center center / 100px 100px;
}

#termin-prüfen {
    background: rgba(255, 255, 255, 0.7) url("/templates/frontend/_css/salons/217/termin-pruefen.gif") no-repeat scroll center center / 100px 100px;
}


a.pricelist {
    background: #6c6c6c none repeat scroll 0 0;
    color: #fff !important;
    display: inline-block;
    padding: 6px;
}

.txt_detail {
	color: #456;
	text-decoration: none;
}

#fancybox-close::before {
    color: #456;
    content: "X";
    font-family: Asap,Arial,sans-serif;
    font-size: 28px;
    font-weight: bold;
    line-height: 33px;
}

#fancybox-outer {
    background: #eceef0 none repeat scroll 0 0;
    height: 100%;
    position: relative;
    width: 100%;
}

.btn-flat.btn-primary, [class*="grid-"] .btn-flat.btn-primary {
    border-bottom: 4px solid rgba(51, 153, 204, 0.0);
}

.halfwhite {
    background-color: rgba(218, 212, 224, 0.3);
}



.txt_pink {
    color: #6c6c6c;
}




.datemakerboxLink {
    background: rgba(221, 246, 255, 0.9) none repeat scroll 0 0;
    border-bottom: 2px solid #fff;
    font-size: 20px;
    font-weight: bold;
    height: 70px;
    left: 0;
    line-height: 20px;
    padding: 15px 20px 13px;
    position: fixed;
    top: 100px;
    width: 100%;
}

.service-description {
	float: right;
	position: relative;
	cursor: pointer;
}
.service-description:after {
	clear: right;
	content: '';
}
.service-description-content {
	display: none;
	position: absolute;
	left: 0;
	top: 38px;
	border: 1px solid #39c;
	background: #fff;
	padding: 5px;
	min-width: 150px;
	max-width: 500px;
	max-height: 250px;
	overflow: auto;
	white-space: pre-wrap;
    z-index: 100;
}
.service-description-category {
	top: 3px;
}