/*Kunden spezifische UI Anpassungen
  =================================
  Vorlage Version 0.3.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: #b2729b;
  --ordinationsinteraktionsfarbe: #ee7ae9;
  --ordinationshighlightfarbe: #ee7ae9;
  --ordinationshintergrundfarbe: #b2729b;
  --ordinationsmessagefarbe: #b2729b;
}

/* Mouse Over bei Image Buttons (Appointment/Index) */
#btnAppointmentSearch .img-overlay, #btnAppointmentEkosSearch .img-overlay {
  background: rgb(from var(--ordinationsinteraktionsfarbe) r g b / 0.4);
}

  /* 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: #FFFFFF; /* 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
  ================================ */

  .contraindicationRadioButton input[type="radio"]:checked::before,
  .cancellationReasonRadioButton input[type="radio"]:checked::before {
    background-color: var(--ordinationsinteraktionsfarbe);
  }
  /* -------------------------------
  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);
  }

  .divElementRow input[type="text"]:focus, .divElementRow input[type="email"]:focus, .divElementRow input[type="tel"]:focus, .divElementRow input[type="date"]:focus, .freitext:focus {
    border-color: var(--ordinationshighlightfarbe);
    outline: none;
  }