/* @import url('https://zahnarzt-spitalgasse.ch/a/c/zawin.css'); */

:root {
	--dunkelgrau: #676b79;
	--hellgrau: #9497a1;
	--kacheln: #186b50;
	--kachelnKontrast: white;
	--kachelschatten: transparent;
	--weiterButtons: #186b50;
	--weiterButtonsKontrast: white;
	--weiterButtonsSchatten: white;
	--warnfarbe: #dc3545;
	--warnfarbeKontrast: white;
	--warnfarbeSchatten: white;
	--link: #186b50;
	--linkHover: #186b50;
	--linkVisited: #186b50;
}

/* ===== Nav-Balken ==============================================================*/

/* gesamter Balken */
header .navbar{
	background-color: var(--dunkelgrau);
}

/* Menu "Termin buchen", "Anmelden" */
header .nav-link {
	color:white !important;
}
header .nav-link:hover {
	color:white !important;
	background-color: var(--kacheln);
}
header>nav .nav-item .nav-link.active {/*Balken unter Menu "Termin buchen"*/
	border-bottom-color:var(--kacheln);
}
header>nav .nav-item .nav-link.active:hover {
	background-color:var(--kacheln);
	border-bottom-color:white;
	color:white !important;
}

/* Dropdowns Pat.account und Sprache */
header .dropdown-menu {/* Dropdown-Container */
	background-color: var(--dunkelgrau) !important;
}
header .dropdown-toggle {/* Dropdown-Knopf */
	color:white !important;
	background-color: var(--dunkelgrau) !important;
}
header .dropdown-toggle:hover,
header .dropdown-toggle:focus-within {
	color:white !important;
	background-color: var(--kacheln) !important;
}

header .dropdown-item {/* Einzelne Eintraege */
	color: white !important;
}
header .dropdown-item:hover {
	color:white !important;
	background-color: var(--kacheln) !important;
}
header .dropdown-item:active {
	color:white !important;
	background-color: var(--dunkelgrau);
}
header .dropdown-item.selected {
	background-color:var(--kacheln);
}

header .dropdown-item:hover .badge-light {/* Symbol Anz. Termine */
	background-color:var(--warnfarbe) !important;
	color:white !important;
}




/* ====== Wizard-Ueberschriften ============================================================================*/

.oa-wizard [data-oa-wizard-toggle]:hover, 
.oa-wizard > .card.oa-wizard-active > .card-header {
	background-color: var(--hellgrau);
	border-color: var(--hellgrau);
	color: white;
	font-weight: normal;
}
.oa-wizard>.card.oa-wizard-active {
 border-color:var(--hellgrau);
}


/* ===== Kacheln Erstauswahl ================================================================================*/

 .btn-outline-primary {
	color: var(--hellgrau);
	border-color: var(--hellgrau);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(:disabled).active {
	color: var(--kachelnKontrast);
	background-color:  var(--kacheln) !important;
	border-color:  var(--kacheln) !important;
}
.btn-outline-primary:focus {
	 box-shadow:0 0 0 0.2rem var(--kachelschatten) !important;
}



/* ===== Behandlung-Kacheln ======================================================================================*/

.wizard-card-behandlung {
	border-color: var(--hellgrau);
	color:var(--hellgrau);
}
.wizard-card-behandlung.active, 
.wizard-card-behandlung:hover {
	background-color: var(--kacheln);
	color: var(--kachelnKontrast);
}
.wizard-card-behandlung:focus {
   box-shadow:0 0 0 0.2rem var(--kachelschatten);
}

/* ===== Behandler-Kacheln =================================================================================*/

.wizard-card-behandler {
	color: black;
	border-color: var(--hellgrau);
	background-color: white;
}
.wizard-card-behandler.active, 
.wizard-card-behandler:hover {
	background-color: var(--kacheln);
	border-color: var(--kacheln);
   }
.wizard-card-behandler:focus,
.wizard-card-behandler:focus .behandler-image {
   box-shadow:0 0 0 0.2rem var(--kachelschatten);
}
.wizard-card-behandler .behandler-description {
	background-color: var(--hellgrau);
}
.wizard-card-behandler .behandler-funktion {
	color: black;
}
.wizard-card-behandler:hover .behandler-funktion,
.wizard-card-behandler.active .behandler-funktion {
	color: white !important;
}
.wizard-card-behandler div.behandler-image {
   border-color:var(--hellgrau);
   background-color:var(--hellgrau);
}
.wizard-card-behandler div.behandler-image .icon {
   color:var(--dunkelgrau);
}


/* ===== Standort-Kacheln ========================================================================================*/

.wizard-card-standort .address {
	border-color: var(--hellgrau);
	background-color: white;
	color:var(--hellgrau);
}
.wizard-card-standort .address:focus {
	box-shadow: 0 0 0 0.1rem var(--kachelschatten) !important;
}
.wizard-card-standort .address:hover, 
.wizard-card-standort .address.active {
	background-color:var(--kacheln);
	color: var(--kachelnKontrast);
}


/* ==================
	Links
*/

a {
	color: var(--link);
}
a:hover {
	color:var(--linkHover);
}
a:visited {
   color:var(--linkVisited); 
}


/* ==================
	Buchung abschliessen
*/

.booking-behandler >.behandler-description {
	 background-color: var(--kacheln);
}
.booking-behandler div.behandler-image {
	 border-color:var(--hellgrau);
}
.dropdown-item:hover,
.dropdown-item:focus {/* Dropdown "Termin buchen fuer" */
	border-color: var(--kacheln) !important;
	background-color: var(--kacheln) !important;
	color: var(--kachelnKontrast);
}

body .dropdown-item.active {
	background-color: var(--hellgrau);
	color:white;
}
body .dropdown-menu {
	border-color:var(--kacheln);
}


/* ==================
	Familienmitglieder
*/

.btn-primary, 
.btn-primary:hover {
	background-color:var(--kacheln);
	border-color:var(--kacheln);
}


/* ==================
	Buttons
*/

.btn-info,
.btn-info.mb-2{
	background-color: var(--weiterButtons);
	border-color:var(--weiterButtons);
	color: var(--weiterButtonsKontrast);
}
.btn-info:hover {
	background-color: var(--weiterButtonsKontrast);
	border-color:var(--weiterButtons);
	color:var(--weiterButtons);
}
.btn-info:focus {
	background-color: var(--weiterButtonsKontrast) !important;
	border-color:var(--weiterButtons) !important;
	color:var(--weiterButtons) !important;
	box-shadow: 0 0 0 0.1rem var(--weiterButtons) !important;
}

.btn-success {
	background-color: var(--weiterButtons);
	border-color: var(--weiterButtons);
}
.btn-success:hover {
	background-color: var(--weiterButtonsKontrast);
	border-color:var(--weiterButtons);
	color:var(--weiterButtons);
}
.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active {
	background-color: var(--weiterButtonsKontrast) !important;
	border-color:var(--weiterButtons) !important;
	color:var(--weiterButtons) !important;
	box-shadow: 0 0 0 0.1rem var(--weiterButtons) !important;
}

.btn-success.next-step {
	background-color:var(--weiterButtons);
	border-color:var(--weiterButtons);
	color: var(--weiterButtonsKontrast);
}
.btn-success.next-step:hover {
	background-color:var(--weiterButtonsKontrast);
	border-color:var(--weiterButtons);
	color:var(--weiterButtons);
}
.btn-success.next-step:focus {
	background-color: var(--weiterButtonsKontrast) !important;
	border-color: var(--weiterButtons) !important;
	color: var(--weiterButtons) !important;
	box-shadow: 0 0 0 0.1rem var(--weiterButtons) !important;
}

.btn-outline-success {
	color: var(--weiterButtonsKontrast);
	border-color:var(--weiterButtons);
	background-color:var(--weiterButtons);
}
.btn-outline-success:hover,
.btn-outline-success:disabled  {
	color:var(--weiterButtons);
	border-color:var(--weiterButtons);
	background-color: var(--weiterButtonsKontrast);
}
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active, 
.show>.btn-outline-success.dropdown-toggle {
	color:var(--weiterButtons) !important;
	border-color:var(--weiterButtons) !important;
	background-color: var(--weiterButtonsKontrast) !important;
	box-shadow: 0 0 0 0.1rem var(--weiterButtons) !important;
}

btn.danger {
	background-color: var(--warnfarbe);
	border-color:var(--warnfarbe);
	color:var(--warnfarbeKontrast);
}
.btn-danger:hover {
	background-color: var(--warnfarbeKontrast);
	border-color:var(--warnfarbe);
	color:var(--warnfarbe);
}
.btn-danger:focus {
	background-color: var(--warnfarbeKontrast) !important;
	border-color: var(--warnfarbe) !important;
	color: var(--warnfarbe) !important;
	box-shadow: 0 0 0 0.1rem var(--warnfarbe) !important;
}


/* ==================
	Textboxes
*/

input:focus,
select:focus,
textarea:focus {
	border-color: var(--dunkelgrau) !important;
	box-shadow: 0 0 0 0.1rem var(--kachelschatten) !important;
}


/* ==================
	Kalender
*/

.btn-info.btn-previous,
.btn-info.btn-next {
	background-color:var(--kacheln);
	color: var(--kachelnKontrast);
	border-color: var(--kacheln);
}
.btn-info.btn-previous:hover,
.btn-info.btn-next:hover {
	color:var(--kacheln);
	background-color: var(--kachelnKontrast);
	border-color: var(--kacheln);
	box-shadow: 0 0 0 0.1rem var(--kachelschatten);
}
.btn-info.btn-previous:focus,
.btn-info.btn-next:focus {
	color:var(--kacheln) !important;
	background-color: var(--kachelnKontrast) !important;
	border-color: var(--kacheln) !important;
	box-shadow: 0 0 0 0.1rem var(--kacheln) !important;
}

th.calcol-weekend {
	background-color:var(--hellgrau);
	color: black;
}
table.calendar>tbody button:hover,
table.calendar>tbody button.active {
	background-color:var(--kacheln) ;
}
table.calendar>tbody button:focus {
	box-shadow: 0 0 0 0.1rem var(--kachelschatten);
}
table.calendar>tbody button.call.active:focus {/* wenn Termin nur noch telefonisch buchbar */
	box-shadow: 0 0 0 0.1rem var(--kachelschatten);
}
tr.show-more, 
tr.show-less,
.next-termin {
	background-color:var(--kacheln);
	color: var(--kachelnKontrast);
}
tr.show-more>td:hover, 
tr.show-less>td:hover,
.next-termin:hover {
	background-color: var(--kachelnKontrast);
	border-color:var(--kacheln);
	border-style:solid;
	border-width: 1px;
	color:var(--kacheln);
}
tr.show-more>td:focus, 
tr.show-less>td:focus {
	box-shadow: 0 0 0 0.1rem var(--kachelschatten);
}



/* ==================
	Terminloeschfenster modal
*/

.modal-header.btn-danger,
.modal-header.btn-danger.close {
	background-color: var(--warnfarbe);
	color: var(--warnfarbeKontrast);
	opacity  100;
	font-weight: 100;
}
#modal-btn-delete { /* Terminloeschbutton im modalen Fenster */
	background-color: var(--weiterButtons) !important;
	color: var(--weiterButtonsKontrast) !important;
	border-color:var(--weiterButtons) !important;
}
#modal-btn-delete:hover {
	background-color: var(--weiterButtonsKontrast) !important;
	color: var(--weiterButtons) !important;
	border-color:var(--weiterButtons) !important;
}
#modal-btn-delete:focus {
	background-color: var(--weiterButtonsKontrast);
	color: var(--weiterButtons);
	border-color:var(--weiterButtons);
	box-shadow: 0 0 0 0.1rem var(--weiterButtons);
}



/* ==================
	Reset Style
*/

html {
	--dunkelgrau: #676b79;
	--hellgrau: #9497a1;
	--kacheln: #186b50;
	--kachelnKontrast: white;
	--kachelschatten: transparent;
	--weiterButtons: #186b50;
	--weiterButtonsKontrast: white;
	--weiterButtonsSchatten: white;
	--warnfarbe: #dc3545;
	--warnfarbeKontrast: white;
	--warnfarbeSchatten: white;
	--link: #186b50;
	--linkHover: #186b50;
	--linkVisited: #186b50;
}


html body {
	margin-bottom: 0;
	background: none;
	background-color: #fff;
}

html header .logoDiv,
html footer,
html .grecaptcha-badge {
	display: none !important;
}

html .card,
html .btn {
	border-radius: 0;
	border: none;
}

html .container,
html .container-sm {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

html .wizard-card-behandlung {
	border-radius: 0;
}