/*Kunden spezifische UI Anpassungen
  =================================
  Vorlage Version 0.2
  Nur die Farbwerte stehen zur Anpassung bereit. Alles andere muss erhalten bleiben.
  
  Installationshinweis: Zuordnung erfolgt mit dem Dateinamen nach RadiologyShortcut der Web.config. Beispiel: Appointment_data.css wenn RadiologyShortcut "data" ist.
*/

:root {
  --ordinationsleitfarbe: #19a7b4;
  --ordinationsinteraktionsfarbe: #19a7b4;
  --ordinationshighlightfarbe: #4291b4;
  --ordinationshintergrundfarbe: #f5faff;
  --ordinationsmessagefarbe: #4291b4;
}

/* ordinationsleitfarbe
----------------------------------*/
/* Ref.:A*/
.yellow #navigation-title {
  background-color: var(--ordinationsleitfarbe);
}
/* Progress Bar */
.divProgressbarColor {
  background: var(--ordinationsleitfarbe);
}

.orange input[type="submit"],
.yellow input[type="button"],
.yellow input[type="submit"],
.yellow button {
  background-color: var(--ordinationsinteraktionsfarbe);
  border-color: var(--ordinationsinteraktionsfarbe);
}

/* JQuery-UI Checkbox */
.ui-button {
  background-color: var(--ordinationsinteraktionsfarbe);
  border-color: var(--ordinationsinteraktionsfarbe);
}

  .ui-button:active, .ui-button:focus, .ui-button:hover, .ui-state-active, .ui-button.ui-state-active:hover {
    border: 1px solid var(--ordinationshighlightfarbe);
    background: var(--ordinationshighlightfarbe);
    color: #f4f4f9;
  }

/* braucht !important; */
/* background-color:#FBBA00 !important; */
.yellow .aToButton {
  background-color: var(--ordinationsinteraktionsfarbe) !important;
}
/* Ref.:B 
  braucht !important; */
/*background-color: #3e753b !important;
  border-color: #3e753b !important;*/
.next {
  background-color: var(--ordinationsinteraktionsfarbe) !important;
  border-color: var(--ordinationsinteraktionsfarbe) !important;
}
/* Ref.:C*/
.yellow .info,
.yellow .message {
  background-color: var(--ordinationsmessagefarbe);
  color: #f4f4f9; /* Schriftfarbe */
}
/*ordinationshintergrundfarbe der angeboteten Termine*/
/* Ref.:D*/
.ui-widget-content {
  border: 1px solid var(--ordinationshintergrundfarbe);
  background: var(--ordinationshintergrundfarbe);
  color: #404040;
}
/* Ref.:E*/
ui-widget-content .ui-state-hover {
  border: 1px solid #e3e3e3;
  background: var(--ordinationshintergrundfarbe);
}

/* ===============================
  Interaction Cues
  ================================ */
/* -------------------------------
  Ausgwähltes element Farbe
----------------------------------*/
/* Ref.:F*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--ordinationsinteraktionsfarbe);
  background: var(--ordinationsinteraktionsfarbe);
  color: c4d11d; /* #f1f1f1; Kein Effekt? */
}

/* -------------------------------
  ordinationsinteraktionsfarbe
  (alles was man anklicken kann)
----------------------------------*/
/*Zuweiser ausklappbare buttons */
/* Ref.:G*/
.divAppExpnder .ui-expander-header {
  background: var(--ordinationsinteraktionsfarbe) !important;
}

/* Dropdown Button Farbe: */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-state-active, .ui-widget-content .ui-state-active {
  background: var(--ordinationsinteraktionsfarbe);
  border: none;
}

/* Date Picker Header Farbe */
.ui-widget-header {
  background: var(--ordinationsinteraktionsfarbe);
}

/* -------------------------------
  Alle Mouse Over Highlight Farben
  (alles was man anklicken kann)
----------------------------------*/
/* Dropdown mouse over Farbe: */
.ui-state-hover, .ui-widget-content .ui-state-hover {
  border: 1px solid var(--ordinationshighlightfarbe);
  background: var(--ordinationshighlightfarbe);
}

/* Ausklapp boxen Mouse over Farbe */
.white .divAppExpnder .ui-state-hover {
  background: var(--ordinationshighlightfarbe) !important;
}

/* Tabelle Mouse over Farbe */
.yellow .linkInTableSpecial:hover {
  color: var(--ordinationshighlightfarbe) !important;
}

/* Button Mouse over Farbe */
.white .aToButton:hover:not(.recorderButton), .white input[type="submit"]:hover:not(.recorderButton), .white input[type="button"]:hover:not(.recorderButton), .white button:hover:not(.recorderButton) {
  background: var(--ordinationshighlightfarbe) !important;
}

/*Mouse Over Farbe und Fokus Farbe DE LB*/
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  background: 1px var(--ordinationshighlightfarbe);
}