/*
Lovion Theme Template
Beschreibung: Mit dieser Datei kann das Look & Feel des Lovion WEB PORTALs einfach geändert werden.
Logo und Farben können hier mittels CSS-Variablen leicht an die Bedürfnisse des Kunden angepasst werden.
*/

:root {
  /* Datei, Größe und Positionierung */

  --logo-file: url(../img/logo_aov.jpg);
  --logo-height: 38px;
  --logo-height-scrolled: 26px;
  --logo-position: center;

  --logo-height-small: 56px;

  /* Hintergrundfarbe und Rahmen des Logos */

  --color-brand-bg: var(--color-aov-bg-grey); /*Anpassung*/
  --color-brand-border: var(--color-border); /*Anpassung*/

  /* Schriftarten */

  --default-font: "Open Sans", "Arial", sans-serif;
  --heading-font: "Open Sans", "Arial", sans-serif;

  /* *************************************
   
     Allgemeine Farben */

  --color-white: #ffffff;
  --color-black: #000000;
  --color-light-grey: #dddddd;

  /* aov Farben */

  --color-aov-blue: #0f4b7d;
  --color-aov-yellow: #ffde00;
  --color-aov-bg-grey: #f5f5f5;

  /* Hauptfarbe inkl. Abstufungen */

  --color-primary-lighten-5: #0c80c6;
  --color-primary-lighten-10: #0d8ad5;
  --color-primary-lighten-15: #0e93e4;
  --color-primary-lighten-20: #139cef;
  --color-primary-lighten-70: #a6d9f9;
  --color-primary-lighten-80: #c4e6fb;
  --color-primary: var(--color-aov-blue);
  --color-primary-darken-5: #0b71ae;
  --color-primary-darken-10: #0a6ba5;
  --color-primary-darken-15: #0a659c;
  --color-primary-darken-20: #095f93;
  --color-text-on-primary: #d9d9d9;

  /*Schmuckfarbe */

  --color-secondary: var(--color-aov-yellow);
  --color-secondary-lighten-50: #ffb27f;

  /* Textfarben */

  --color-body-text: #666;
  --color-body-text-dark: #222;
  --color-body-text-light: #999;
  --color-heading: #222;
  --color-link: var(--color-aov-blue);
  --color-link-hover: var(--color-aov-yellow);

  /* Farben für Rahmen */

  --color-border: #dfdfdf;
  --color-border-dark: #cacbd8;
  --color-border-light: #e5e5e5;

  /* Hintergrundfarben Inhalt  */

  --color-content-bg: var(--color-aov-bg-grey);
  --color-content-bg-light: var(--color-white);
  --color-content-bg-dark: #e8e8e8;
  --color-body-highlight: #fff0e5;

  /* Kopfbereich Inhalt */

  --color-content-header-bg: var(--color-aov-bg-grey);
  --color-content-header-text: var(--color-aov-blue);
  --color-content-header-border: var(--color-border);

  /* *************************************
     
     Kopfbereich der Seite */

  --color-header-bg: var(--color-aov-blue);
  --color-header-bg-dark: #1d276f;
  --color-header-shadow-scrolled: rgba(0, 0, 0, 0.5);
  --color-header-border: #1d276f;

  --color-header-text: var(--color-white);
  --color-header-text-bg: var(--color-aov-blue);
  --color-header-text-hover: var(--color-white);
  --color-header-text-bg-hover: var(--color-aov-yellow);

  --color-header-search-icon: var(--color-white);
  --color-header-search-text: var(--color-white);
  --color-header-search-text-focus: #222;
  --color-header-search-bg-focus: var(--color-white);
  --color-header-search-placeholder: #6775d7;

  /* *************************************
     
     Fussbereich der Seite */

  --color-footer-bg: var(--color-aov-blue);
  --color-footer-text: var(--color-white);
  --color-footer-link: var(--color-white);
  --color-footer-link-hover: var(--color-white);
  --color-footer-link-active: var(--color-white);

  /* *************************************
     
     Seitenbereich der Seite */

  --color-sidebar-bg: var(--color-white);
  --color-sidebar-text: var(--color-black);
  --color-sidebar-border: var(--color-border);

  --color-sidebar-title: var(--color-black);
  --color-sidebar-title-btn-bg: var(--color-light-grey);
  --color-sidebar-title-btn-link: var(--color-light-grey);
  --color-sidebar-title-btn-bg-active: var(--color-light-grey);
  --color-sidebar-title-btn-link-active: var(--color-light-grey);
  --color-sidebar-title-btn-border: var(--color-border);

  --color-sidebar-link: var(--color-black);
  --color-sidebar-link-hover: var(--color-white);
  --color-sidebar-link-hover-border: var(--color-light-grey);

  --color-sidebar-active-bg: var(--color-light-grey);
  --color-sidebar-active-border: var(--color-light-grey);
  --color-sidebar-active-link: var(--color-black);

  /* *************************************
     
     Schaltflächen / Buttons */

  --color-btn-default: var(--color-aov-blue);
  --color-btn-default-hover: var(--color-aov-yellow);
  --color-btn-default-text: var(--color-white);

  --color-btn-secondary: var(--color-aov-blue);
  --color-btn-secondary-hover: var(--color-aov-yellow);
  --color-btn-secondary-text: var(--color-white);

  --color-btn-positive: #4caf50;
  --color-btn-positive-hover: #3d8b40;
  --color-btn-positive-text: var(--color-white);

  --color-btn-negative: #d32f2f;
  --color-btn-negative-hover: #ab2424;
  --color-btn-negative-text: var(--color-white);

  --color-btn-light-bg: var(--color-white);
  --color-btn-light-border: var(--color-border-dark);
  --color-btn-light-text: var(--color-aov-blue);
  --color-btn-light-text-hover: #103e76; /*#!!!!!!!!!!*/
  --color-btn-light-hover: var(--color-aov-blue);

  --color-button-ghost: var(--color-aov-blue);

  /* *************************************
     
     Seitenmenü / Navigation */

  --color-menu-trigger: var(--color-white);
  --color-menu-trigger-active: var(--color-white);
  --color-menu-trigger-bg: #1d276f;
  --color-menu-trigger-bg-active: var(--color-aov-blue);

  --color-nav-bg: var(--color-aov-blue);
  --color-nav-item-bg: var(--color-primary);
  --color-nav-text: var(--color-white);
  --color-nav-delimiter: var(--color-aov-yellow);
  --color-nav-text-hover: var(--color-white);
  --color-nav-bg-hover: var(--color-aov-yellow);
  --color-nav-bg-active: var(--color-aov-yellow);
  --color-nav-text-active: #var(--color-white);

  /* *************************************
     
     Benutzermenü */

  --color-user-menu-bg: var(--color-aov-blue);
  --color-user-menu-border: var(--color-border-dark);
  --color-user-menu-delimiter: var(--color-aov-yellow);
  --color-user-menu-item-link: var(--color-white);
  --color-user-menu-item-link-hover: var(--color-white);
  --color-user-menu-item-link-hover-bg: var(--color-aov-yellow);

  /* *************************************
     
     Box-Ínhalt */

  --color-box-bg: #fcfcfc;
  --color-box-footer-bg: var(--color-aov-bg-grey);
  --color-box-title: var(--color-aov-blue);
  --color-box-title-hover: #17205b; /*#17205b;!!!!!!!!!!*/
  --color-box-footer-link: var(--color-aov-blue);
  --color-box-expandable-bg: #fcfcfc;

  /* *************************************
     
     Formular-Elemente */

  --color-form-primary: var(--color-aov-blue);
  --color-form-secondary: var(--color-aov-yellow);
  --color-form-success: #4caf50;
  --color-form-error: #d32f2f;
  --color-form-input-bg: var(--color-white);
  --color-form-input-special-bg: #fffed0;
  --color-form-input-text: #222;
  --color-form-input-bg-disabled: #f7f7f7;
  --color-form-input-text-disabled: #999;
  --color-form-input-bg-readonly: #fcfcfc;
  --color-form-input-text-readonly: #222;
  --color-form-border: #adaec2;
  --color-form-border-focus: #8f91ad;
  --color-form-border-readonly: var(--color-white);
  --color-form-label: #222;
  --color-form-label-hint: #999;
  --color-form-input-glow: #ff944d;
  --color-form-placeholder: #999;
  --color-form-select-button-text: #222;
  --color-form-select-button-bg: var(--color-aov-bg-grey);
  --color-form-select-title: var(--color-aov-blue);
  --color-form-select-text: #222;
  --color-form-toggle-active: var(--color-white);
  --color-form-toggle-bg-active: var(--color-aov-yellow);
  --color-form-toggle-border-active: var(--color-aov-yellow);
  --color-form-toggle-border-hover: var(--color-aov-yellow);
  --color-form-toggle-border: var(--color-aov-yellow);
  --color-form-toggle-bg: var(--color-white);
  --color-form-toggle-checked: #4caf50;
  --color-form-toggle-unchecked: #d32f2f;
  --color-form-toggle-not-set: #999;
  --color-checkbox-intermediate: var(--color-border);

  /* *************************************
     
     Fenster (Modal, Lightbox & PopUp)  */

  --color-modal-bg: var(--color-white);
  --color-modal-header-bg: var(--color-aov-blue);
  --color-modal-title: var(--color-white);
  --color-modal-text: #222;
  --color-modal-footer-bg: var(--color-aov-bg-grey);
  --color-modal-close-bg: #1d276f;
  --color-modal-close-bg-hover: #1a2363;
  --color-modal-close-text: var(--color-white);

  --color-lightbox-bg: var(--color-white);
  --color-lightbox-close-bg: transparent;
  --color-lightbox-close-bg-hover: #1a2363;
  --color-lightbox-close-text: #222;
  --color-lightbox-close-text-hover: var(--color-white);

  /* *************************************
     
     Objekt-Editor */

  --color-object-editor-bg: #fcfcfc;
  --color-object-editor-header: #656d77;
  --color-object-editor-header-dark: #596069;
  --color-object-editor-header-dark-10: #4e545b;

  /* *************************************
     
     Reiter */

  --color-tabs-border: var(--color-border);
  --color-tabs-link: #666;
  --color-tabs-link-hover: #222;
  --color-tabs-link-active: #222;
  --color-tabs-indicator: var(--color-aov-yellow);

  /* *************************************
     
     Status-Farben */

  --color-positive: #4caf50;
  --color-negative: #d32f2f;
  --color-info: var(--color-aov-yellow);
  --color-warning: #ffa500;
  --color-mandatory: #d32f2f;

  --color-positive-bg: #c7e7c8;
  --color-negative-bg: #f2c2c2;
  --color-info-bg: #c4d8e8;
  --color-warning-bg: #ffe4b3;
  --color-mandatory-bg: #f2c2c2;

  --color-positive-border: #449d48;
  --color-negative-border: #c02929;
  --color-info-border: #3f75a2;
  --color-warning-border: #e69500;
  --color-mandatory-border: #c02929;

  /* *************************************
     
     Funktions-Schaltflächen */

  --color-gf-link: #666;
  --color-gf-bg: var(--color-white);
  --color-gf-border: var(--color-border);
  --color-gf-link-hover: var(--color-black);
  --color-gf-bg-hover: var(--color-aov-yellow);
  --color-gf-border-hover: var(--color-border);
  --color-gf-link-active: var(--color-black);
  --color-gf-bg-active: var(--color-primary-lighten-80);
  --color-gf-border-active: var(--color-border);
  --color-gf-link-disabled: gray;
  --color-gf-bg-disabled: var(--color-white);
  --color-gf-border-disabled: #e7e7e7;

  /* *************************************
     
     Schrittanzeige */

  --color-pb-default-bg: var(--color-white);
  --color-pb-default-text: #999;
  --color-pb-default-label: #999;
  --color-pb-finish-bg: var(--color-aov-blue);
  --color-pb-finish-text: var(--color-white);
  --color-pb-finish-label: #666;
  --color-pb-active-bg: var(--color-aov-yellow);
  --color-pb-active-text: var(--color-white);
  --color-pb-active-label: #222;
  --color-pb-border: var(--color-border-dark);

  /* *************************************
     
     Tabellen */

  --color-table-header: var(--color-aov-blue);
  --color-table-header-text: var(--color-white);
  --color-table-row-background: var(--color-white);
  --color-table-row-text: #222;
  --color-table-highlight: #var(--color-aov-blue);
  --color-table-highlight-text: #000;
  --color-table-highlight-bg-dark: #12abe420; /*Creos mittelblau hell*/
  --color-table-selected: var(--color-secondary-lighten-50);
  --color-table-selected-text: #000;
  --color-table-row-background-1: #fcfcfc;
  --color-table-row-background-2: #fafafa;
  --color-table-row-background-3: #f7f7f7;
  --color-table-row-background-4: whitesmoke;
  --color-table-row-background-5: #f2f2f2;
  --color-table-row-background-6: #f0f0f0;
  --color-table-row-background-7: #ededed;
  --color-table-row-background-8: #ebebeb;
  --color-table-selected-1: #ffede0;
  --color-table-selected-2: #ffeadb;
  --color-table-selected-3: #ffe7d6;
  --color-table-selected-4: #ffe4d1;
  --color-table-selected-5: #ffe1cb;
  --color-table-selected-6: #ffdec6;
  --color-table-selected-7: #ffdbc1;
  --color-table-selected-8: #ffd8bc;

  --color-arrow-step-gap: #fcfcfc;
  --color-arrow-step-bg: var(--color-aov-bg-grey);
  --color-arrow-step-link: #222;
  --color-arrow-step-text: #666;
  --color-arrow-step-label: #222;
  --color-arrow-step-active-bg: var(--color-aov-yellow);

  /* *************************************
     
     Status-Farben für Aufgaben (TASK) */

  --color-status-angelegt: #f9f9f9;
  --color-status-planung: #b13bf9;
  --color-status-freigegeben: #e42700;
  --color-status-in-bearbeitung: #0069ff;
  --color-status-unterbrochen: #00bbc1;
  --color-status-durchgefuehrt: #00c200;
  --color-status-zurueckgestellt: #ee9800;
  --color-status-abgewiesen: #000;
  --color-status-archiviert: #8e8e8e;
  --color-status-entwurf: #ee9800;
  --color-status-beantragt: #b13bf9;
  --color-status-rueckfrage: #e42700;
  --color-status-abgeschlossen: #00c200;

  --color-badge-bg: #d32f2f;
  --color-badge-text: var(--color-white);

  --color-help-circle-bg: var(--color-white);
  --color-help-circle-border: var(--color-border-dark);
  --color-help-circle-text: var(--color-aov-blue);
  --color-help-circle-bg-hover: var(--color-aov-blue);
  --color-help-circle-border-hover: var(--color-aov-blue);
  --color-help-circle-text-hover: var(--color-white);

  /* *************************************
     
     Datei(en) hochladen (DropZone) */

  --color-dz-preview-bg: var(--color-white);
  --color-dz-preview-border: var(--color-border);
  --color-dz-progress-bar: #4caf50;
  --color-dz-progress-bar-bg: var(--color-aov-bg-grey);

  /* *************************************
     
     Tooltipp */

  --color-tt-bg: #fff0e5;
  --color-tt-text: #222;
  --color-tt-border: var(--color-border-dark);

  /* *************************************
     
     Datumauswahl (DatePicker) */

  --color-dp-bg: var(--color-white);
  --color-dp-border: var(--color-border-dark);
  --color-dp-link: var(--color-aov-blue);
  --color-dp-header-bg: var(--color-aov-blue);
  --color-dp-ctrl-bg: var(--color-aov-bg-grey);
  --color-dp-month-nav-bg: var(--color-white);
  --color-dp-full-month-border: var(--color-white);
  --color-dp-circle-btn-bg: var(--color-aov-blue);
  --color-dp-circle-btn-text: var(--color-white);
  --color-dp-circle-btn-border: var(--color-aov-blue);
  --color-dp-circle-btn-bg-hover: var(--color-white);
  --color-dp-circle-btn-text-hover: var(--color-aov-blue);
  --color-dp-circle-btn-border-hover: var(--color-white);
  --color-dp-select-bg: var(--color-white);
  --color-dp-select-text: var(--color-aov-blue);
  --color-dp-select-border: #1d276f;
  --color-dp-month-header-border: var(--color-border);
  --color-dp-month-header-bg: var(--color-aov-bg-grey);
  --color-dp-month-header-text: #999;
  --color-dp-other-month-bg: transparent;
  --color-dp-other-month-text: #b3b3b3;
  --color-dp-month-bg: var(--color-white);
  --color-dp-month-border: var(--color-border);
  --color-dp-month-link-bg: var(--color-white);
  --color-dp-month-link-text: var(--color-aov-blue);
  --color-dp-month-link-border: var(--color-border-dark);
  --color-dp-month-today-link-bg: transparent;
  --color-dp-month-today-link-text: var(--color-aov-yellow);
  --color-dp-month-today-link-border: var(--color-border-dark);
  --color-dp-month-highlight-link-bg: var(--color-aov-blue);
  --color-dp-month-highlight-link-text: var(--color-white);
  --color-dp-month-weekend-link-bg: var(--color-aov-bg-grey);
  --color-dp-month-weekend-link-text: var(--color-aov-blue);
  --color-dp-month-selected-link-bg: var(--color-aov-yellow);
  --color-dp-month-selected-link-text: var(--color-white);

  /* *************************************
     
     Zum Seitenanfang */

  --color-top-jump-bg: rgba(245, 245, 245, 0.5);
  --color-top-jump-text: var(--color-border-dark);
  --color-top-jump-border: var(--color-border-dark);
  --color-top-jump-circle: var(--color-border);
  --color-top-jump-bg-hover: var(--color-aov-yellow);
  --color-top-jump-text-hover: var(--color-white);
  --color-top-jump-border-hover: var(--color-aov-yellow);
  --color-top-jump-circle-hover: var(--color-aov-blue);

  /* *************************************
     
     Klappboxen */

  --color-toggle-box-bg: #656d77;
  --color-toggle-box-text: var(--color-white);

  /* *************************************
     
     Aufgaben (TASK) */

  --color-task-list-bg: var(--color-white);
  --color-task-item-bg: var(--color-white);
  --color-task-item-bg-hover: #fff0e5;
  --color-task-item-text: #666;
  --color-task-item-text-hover: #222;
  --color-task-special-link: #01a9e3;

  --color-task-category-1: #d61212;
  --color-task-category-2: var(--color-aov-blue);
  --color-task-category-3: #008be4;
  --color-task-category-4: #06b025;

  --color-check-init: #434a54;
  --color-check-init-bg: #dbdbdb;
  --color-check-init-bg-active: #f4f4f4;

  --color-check-none: #434a54;
  --color-check-none-bg: #adadad;
  --color-check-none-bg-active: #c7c7c7;

  --color-check-success: #129a00;
  --color-check-success-bg: #afffa2;
  --color-check-success-bg-active: #dbffd5;

  --color-check-warn: #867500;
  --color-check-warn-bg: #fdff6b;
  --color-check-warn-bg-active: #feff9e;

  --color-check-error: #c90000;
  --color-check-error-bg: #ffbdbd;
  --color-check-error-bg-active: #fff0f0;

  /* *************************************
     
     Slider Element */

  --color-range-track: #656d77;
  --color-range-thumb: var(--color-aov-yellow);
  --color-thumb-shadow: var(--color-border);
  --color-thumb-border: var(--color-white);
  --color-track-shadow: #222;
  --color-track-border: #656d77;

  /* *************************************
     
     Nachrichten (MESSAGE) */

  --color-bubble-bg: #fff8f1;
  --color-bubble-media-bg: #fff0e5;

  /* *************************************
     
     Weitere Farben */

  --color-overlay: rgba(0, 0, 0, 0.25);
  --color-map-topic-header: #656d77;
  --color-expandable-header-bg-hover: var(--color-white);
  --color-complementary: var(--color-white);
  --color-full-width-container: #fcfcfc;
  --color-full-width-container-border: var(--color-border);
}

.page-content-header,
.view-content,
.view-header,
.view-description {
  margin: 0 2% 0 2%;
  width: unset !important;
}

.restricted-content-width {
  max-width: none !important;
}

.box {
  margin: 0px !important;
}

.box,
.box-modal {
  border: none !important;
  background-color: transparent !important;
  max-width: none !important;
  box-shadow: none !important;
}

.box .box-header {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}

body {
   overflow: auto !important;
   background-color: #fff !important;
}

.login {
   overflow: auto;
}

.brand-login {
  background-image: none !important;
}

.login .brand-logo {
   max-width: 120px;
   height: auto;
   margin-left: 30px;
   margin-top: -2px;
}

.login h1 {
   font-size: 2.2rem !important;
   color: var(--color-aov-blue) !important;
   margin-left: 50px !important;
}

.login h2 {
   color: var(--color-aov-blue) !important;
}

.wrapper-top {
   display: flex;
   align-items: center;
   background: url(../img/lines.jpg) repeat-x bottom left #fff !important;
   min-height: 150px;
}

.wrapper {
   background: url(../img/login_background2.jpg) no-repeat center center / cover !important;
   min-height: 590px;
   display: block;
}

.wrapper-bot .Netzportal-Text {
   position: absolute;
   top: 775px;
   left: 50%;
   transform: translateX(-50%);
}

.wrapper-bot {
   background: url(../img/lines.jpg) repeat-x bottom left #fff !important;
   margin-top: 60px;
   max-height: 79px;
}

.wrapper-bot .logo {
   max-width: 10%;
   height: auto;
   margin-left: 90%;
}

.Firmentext {
   min-height: 50px;
   text-align: center;
   margin-top: 30px;
   color: var(--color-aov-blue) !important;
}

.login .modal {
   max-width: 55em !important;
   width: 700px !important;
   height: auto !important;
}

.login .modal-content {
   padding: 80px !important;
}

.login .modal .modal-content {
   display: table-caption !important;
   vertical-align: middle;
   background-color: #ffffff;
   margin-top: 63px;
}

.brand {
  background-image: var(--logo-file) !important;
  width: 40%;
  background-position: center;
  background-size: 80% !important;
}

.brand-wrapper {
  max-width: 50%;
  width: 50%;
  border: none !important;
  float: left !important;
  height: 550px !important;
}

.box-content {
  width: 40% !important;
  margin-left: auto !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
  display: inline-block;
  padding-left: 10% !important;
  padding-top: 10%;
  border: none !important;
}

.box-header {
  width: 40% !important;
  margin-left: auto !important;
  margin-right: 0px !important;
  margin-bottom: 0px !important;
  display: inline-block !important;
  border: none !important;
  padding-left: 10% !important;
}

.box-header .box-title {
  padding-left: 16px;
}

.box-footer {
  margin-left: auto;
  width: 40%;
  border: none !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-left: 12px !important;
}

#register_page .box-content {
  padding-top: 5% !important;
}

#register_form .box-content {
  padding-top: 0px !important;
}

#login_form .buttonbar,
#forgot_password_form .buttonbar {
  margin: 0px !important;
}

#register_page .buttonbar {
  width: 40%;
  float: right;
  padding-right: 10%;
}

.modal-content.info:before {
  background-image: url(../img/message/warning.svg) !important;
}

span.password-info {
  font-size: 0.875rem;
  color: red;
}

.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary:active {
  color: var(--color-aov-blue) !important;
}

/*Reset Password/Register -Pages*/

.page.reset-password .brand-wrapper {
   background-color: #ffffff !important;
   height: 180px !important;
   margin-top: -330px !important;
}

.page.reset-password .box-content{
   margin-left: 480px !important;
   margin-top: -90px !important;
}

.page.reset-password .brand {
   width: 20% !important;
}

.page.register .brand-wrapper {
   background-color: #ffffff !important;
   height: 180px !important;
   margin-top: -175px !important;
}

.page.register .box-content{
   margin-left: 480px !important;
   margin-top: -5px !important;
}

.page.register .brand {
   width: 20% !important;
}

.page.register .box{
   margin-top: -60px !important;
}

.page.register .box-title {
   width: 800px !important;
   position: absolute !important;
   top: -25px !important;
   left: 475px !important;
}

/* RESPONSIVE PART */
@media only screen and (min-width: 1440px) {
   .brand-wrapper {
      height: 750px !important;
   }
}

@media only screen and (max-width: 425px) {
   .brand-wrapper {
      max-width: 100% !important;
      height: 250px !important;
   }
   .box-content {
      width: 100% !important;
      padding-left: 0px !important;
   }
   .box-footer {
      margin-left: 0% !important;
      width: 100% !important;
   }
   .text-center {
      margin-left: 0% !important;
   }
}