/*
Empty file - this file might be replaced in projects
Static Files Folder to apply a custom branding to
the website.
*/

.wrapper-left {
    background-image: var(--logo-file) !important;
    background-color: var(--color-brand-bg) !important;
	background-size: 100% !important;
	background-position: center !important;
    float: left;
    position: relative;
}

.wrapper-right {
    background-color: #FFF !important;
}

.brand {
	background-image: url("../img/Netzgesellschaft_Duesseldorf_white.png");
    background-size: auto 90% !important;
}

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

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

.modal-content {
	padding: -25px !important;
    line-height: 1.5rem !important;
	color: var(--color-modal-text);
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.footer-nav {
  margin-left: -10px !important;
  width: 105% !important;
}

.key-visual {
  background-image: url("../img/NGD_MainBG.jpg") !important;
  background-position: unset !important;
}

.custom-form-block-hint {
  color: gray; 
}

/*h1 {
	font-size: 1.5rem;
	line-height: 1.1;
    color: #FFF !important;
}*/

/*h2 {
	font-size: 1.125rem !important;
	line-height: 1.2 !important;
    color: #000 !important;
}*/


div#login_header_left {
    background-color: var(--color-brand-bg) !important;
	color: #fff !important;
    padding-left: 20px !important;
    padding-top: 10px !important;
    margin-top: 0px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0px !important;
}

div#login_page {
    background-image: url(../img/Netzgesellschaft_duesseldorf_mbh_logo.png);
    background-color: #FFFFFF !important;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top 70px;
    margin-bottom: -90px;
}

div#login_description {
    margin-top: 120px !important;
    padding-left: -20px !important;
    padding-right: -20px !important;
    line-height: 1.2em;
}

div#login_page_footage_left {
    background-color: var(--color-brand-bg) !important;
    padding-left: 10px !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
    padding-bottom: 15px !important;
    margin-bottom: 0px !important;
    padding-right: 0px !important;
    margin-right: 0px !important;
    color: #fff !important;
    position: absolute; 
    bottom: 0;
    width: 100%;
}

div#login_page_footage_right {
    margin-top: 10px !important;
    color: #fff !important;
}

div#login_content {
    margin-top: 10px;
}

form#login_form {
	margin-top: 30px;
    background-color: var(--color-content-bg) !important;
}


span.password-info {
    font-size: 14px;
    color: red;
}


.visualization.wizard_pathbased .visualization.vertical_container > .container-item.contains-statictext {
    border-bottom: none !important;
}
 
.visualization.wizard_pathbased .visualization.vertical_container > .container-item.contains-htmltext {   
    border-bottom: none !important;
}
 
.visualization.vertical_container > .container-item > .visualization {
    margin: 0 auto;
    max-width: 1400px;
}


.visualization.wizard_summary .visualization.grid_standard td > a {
  pointer-events: none;
  text-decoration: none;
}
.visualization.wizard_summary .visualization.grid_standard a[name=grid-edit] {
  display: none !important;
}

.visualization.wizard_pathbased .visualization.grid_standard td > a {
  pointer-events: none;
  text-decoration: none;
}
.visualization.wizard_pathbased .visualization.grid_standard a[name=grid-edit] {
  display: none !important;
}

:root {
 
  /* *************************************

  Logo und CD/CI */


  /* Datei, Größe und Positionierung */
  
   /* BRAND/LOGO */
  --logo-path: url("../img/Netzgesellschaft_Duesseldorf_white.png");
  --logo-file: url("../img/Anmeldeseite_background-image.jpg");
  --logo-height: 100%;
  --logo-height-scrolled: 50%;
  --logo-height-small: 100%;
  --logo-height-app: 20%;
  /*--logo-position: left;*/
  --logo-position: 5px;
  --logo-login: 10px;
 /* Hintergrundfarbe und Rahmen des Logos */

  --color-brand-bg:                       #55c81e; /*Anpassung*/
  --color-brand-border:                   #dfdfdf; /*Anpassung*/


  /* Schriftarten */

  --default-font:                         "StradaTF-Regular", "Arial", sans-serif;
  --heading-font:                         "StradaTF-Regular", "Arial", sans-serif;



  /* *************************************

  Allgemeine Farben */


  /* Hauptfarbe inkl. Abstufungen */

  --color-primary:                        #55c81e;  /*SWD grün */
  --color-primary-darken-5:               #292c45;	/*SWD blau */
  --color-primary-darken-10:              #292c45;
  --color-primary-darken-15:              #54596c;
  --color-primary-darken-20:              #55c81e;  /*254215 */
  --color-text-on-primary:                #000000; /*weiß */


  /*Schmuckfarbe */

  --color-secondary:                      #292c45;  /*SWD grün */


  /* Textfarben */

  --color-body-text:                      #666;     /*dunkelgrau */
  --color-body-text-dark:                 #222;     /*anthrazit */
  --color-body-text-light:                #999;		/*grau */
  --color-heading:                        #fff;     /*anthrazit */
  --color-link:                           #000000;  /*schwarz */
  --color-link-hover:                     #cacbd8;  /*grau */


  /* Farben für Rahmen */

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


  /* Hintergrundfarben Inhalt  */

  --color-content-bg:                     #ffffff;   /*weiß */
  --color-content-bg-light:               #fff;      /*weiß */
  --color-content-bg-dark:                #e8e8e8;	 /*grau */
  --color-body-highlight:                 #fff0e5;   /*hellorange */


  /* Kopfbereich Inhalt */

  --color-content-header-bg:              #ffffff;
  --color-content-header-text:            #000000;  /*schwarz */
  --color-content-header-border:          #dfdfdf;



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

  --color-header-bg:                      #55c81e;  /*LSW blau */
  --color-header-bg-dark:                 #326319;
  --color-header-shadow-scrolled:         #4baa1b;
  --color-header-border:                  #dfdfdf;

  --color-header-text:                    #000000;
  --color-header-text-bg:                 #ffffff;  /*weiß */
  --color-header-text-hover:              #fff;
  --color-header-text-bg-hover:           #55c81e;  /*SWD grün */

  --color-header-search-icon:             #fff;
  --color-header-search-text:             #fff;
  --color-header-search-text-focus:       #222;
  --color-header-search-bg-focus:         #fff;
  --color-header-search-placeholder:      #6775d7;



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

  --color-footer-bg:                      #55c81e;  /*LSW blau */
  --color-footer-text:                    #ffffff;  /*Weiss */
  --color-footer-link:                    #ffffff;  /*Weiss */
  --color-footer-link-hover:              #000000;  /*Weiss */
  --color-footer-link-active:             #ffffff;  /*Weiss */
  --color-footer-start-bg: 				  #292C45;



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

  --color-sidebar-bg:                     #ffffff;  /*weiß */
  --color-sidebar-text:                   #000000;  /*schwarz */
  --color-sidebar-border:                 #dfdfdf;

  --color-sidebar-title:                  #000000;  /*schwarz */
  --color-sidebar-title-btn-bg:           #55c81e;  /*SWD grün */
  --color-sidebar-title-btn-link:         #000000;  /*schwarz */
  --color-sidebar-title-btn-bg-active:    #b5e996;  /*SWD grün */
  --color-sidebar-title-btn-link-active:  #ffffff;  /*Weiss */
  --color-sidebar-title-btn-border:       #55c81e;  /*SWD grün */

  --color-sidebar-link:                   #000000;  /*schwarz */
  --color-sidebar-link-hover:             #000000;  /*schwarz */
  --color-sidebar-link-hover-border:      #55c81e;  /*SWD grün */

  --color-sidebar-active-bg:              #ffffff;  /*SWD grün */
  --color-sidebar-active-border:          #55c81e;  /*SWD grün */
  --color-sidebar-active-link:            #55c81e;  /*Weiss */

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

  --color-btn-default:                    #55c81e;  /*SWD grün */
  --color-btn-default-hover:              #fff;  /*SWD grün */
   --color-btn-default-text:              #000; 

  --color-btn-secondary:                  #55c81e;  /*SWD grün */
  --color-btn-secondary-hover:            #fff;  /*SWD grün */
  --color-btn-secondary-text:             #000;

  --color-btn-positive:                   #55c81e;
  --color-btn-positive-hover:             #fff;
  --color-btn-positive-text:              #000000;

  --color-btn-negative:                   #a27029;
  --color-btn-negative-hover:             #ab2424;
  --color-btn-negative-text:              #000000;

  --color-btn-light-bg:                   #fff;
  --color-btn-light-border:               #cacbd8;
  --color-btn-light-text:                 #000000;  /*LSW blau */
  --color-btn-light-text-hover:           #ffffff; 	/*#!!!!!!!!!!*/
  --color-btn-light-hover:                #55c81e;  /*SWD grün */
  
  --color-button-ghost:                   #55c81e;  /*SWD grün */



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

  --color-menu-trigger:                   #fff;
  --color-menu-trigger-active:            #000000;
  --color-menu-trigger-bg:                #55c81e;
  --color-menu-trigger-bg-active:         #ffffff;  /*grau */

  --color-nav-bg:                         #ffffff;  
  --color-nav-item-bg:                    #ffffff;  
  --color-nav-text:                       #000000;  /*schwarz */
  --color-nav-delimiter:                  #55c81e;  /*SWD grün */
  --color-nav-text-hover:                 #55c81e;  /*Weiss */
  --color-nav-bg-hover:                   #ffffff;  /*SWD grün */
  --color-nav-bg-active:                  #55c81e;  /*LSW hellblau */
  --color-nav-text-active:                #FFFFFF;  /*Weiss */



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

  --color-user-menu-bg:                   #ffffff;  /*ffffff */
  --color-user-menu-border:               #dfdfdf;
  --color-user-menu-delimiter:            #55c81e;  /*SWD grün */
  --color-user-menu-item-link:            #000000;  /*Weiss */
  --color-user-menu-item-link-hover:      #ffffff;  /*Weiss */
  --color-user-menu-item-link-hover-bg:   #55c81e;  /*SWD grün */



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

  --color-box-bg:                         #f7f7f7;
  --color-box-footer-bg:                  #f5f5f5;
  --color-box-title:                      #55c81e;  /*LSW blau */
  --color-box-title-hover:                #17205b;	/*#17205b;!!!!!!!!!!*/
  --color-box-footer-link:                #55c81e;  /*LSW blau */
  --color-box-expandable-bg:              #f7f7f7;



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

  --color-form-primary:                   #55c81e;  /*LSW blau */
  --color-form-secondary:                 #55c81e;  /*SWD grün */
  --color-form-success:                   #4CAF50;
  --color-form-error:                     #D32F2F;
  --color-form-input-bg:                  #fff;
  --color-form-input-special-bg:          #fffed0;
  --color-form-input-text:                #222;
  --color-form-input-bg-disabled:         #f0f0f0;
  --color-form-input-text-disabled:       #999;
  --color-form-input-bg-readonly:         #f2f2f2;
  --color-form-input-text-readonly:       #222;
  --color-form-border:                    #adaec2;
  --color-form-border-focus:              #8f91ad;
  --color-form-border-readonly:           #fff;
  --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:          #f5f5f5;
  --color-form-select-title:              #55c81e;  /*LSW blau */
  --color-form-select-text:               #222;
  --color-form-toggle-active:             #fff;
  --color-form-toggle-bg-active:          #55c81e;  /*SWD grün */
  --color-form-toggle-border-active:      #55c81e;  /*SWD grün */
  --color-form-toggle-border-hover:       #55c81e;  /*SWD grün */
  --color-form-toggle-border:             #55c81e;  /*SWD grün */
  --color-form-toggle-bg:                 #fff;
  --color-form-toggle-checked:            #4CAF50;
  --color-form-toggle-unchecked:          #D32F2F;
  --color-form-toggle-not-set:            #999;
  --color-checkbox-intermediate:          #dfdfdf;



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

  --color-modal-bg:                       #fff;
  --color-modal-header-bg:                #55c81e;  /*LSW blau */
  --color-modal-title:                    #fff;
  --color-modal-text:                     #222;
  --color-modal-footer-bg:                #f5f5f5;
  --color-modal-close-bg:                 #4CAF50;
  --color-modal-close-bg-hover:           #299134;
  --color-modal-close-text:               #fff;

  --color-lightbox-bg:                    #fff;
  --color-lightbox-close-bg:              transparent;
  --color-lightbox-close-bg-hover:        #299134;
  --color-lightbox-close-text:            #222;
  --color-lightbox-close-text-hover:      #fff;



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

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



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

  --color-tabs-border:                    #dfdfdf;
  --color-tabs-link:                      #666;
  --color-tabs-link-hover:                #222;
  --color-tabs-link-active:               #222;
  --color-tabs-indicator:                 #55c81e;  /*SWD grün */



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

  --color-positive:                       #4CAF50;
  --color-negative:                       #D32F2F;
  --color-info:                           #55c81e;  /*SWD grün */
  --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:                    #3d8c40;
  --color-warning-border:                 #e69500;
  --color-mandatory-border:               #c02929;



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

  --color-gf-link:                        #666;
  --color-gf-bg:                          #fff;
  --color-gf-border:                      #dfdfdf;
  --color-gf-link-hover:                  #fff;  /*SWD grün */
  --color-gf-bg-hover:                    #55c81e;  /*LSW blau */
  --color-gf-border-hover:                #dfdfdf;  /*LSW blau */
  --color-gf-link-active:                 #fff;  /*LSW blau */
  --color-gf-bg-active:                   #55c81e;  /*SWD grün */
  --color-gf-border-active:               #dfdfdf;  /*SWD grün */
  --color-gf-link-disabled:               gray;
  --color-gf-bg-disabled:                 #fff;
  --color-gf-border-disabled:             #e7e7e7;



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

  --color-pb-default-bg:                  #fff;
  --color-pb-default-text:                #999;
  --color-pb-default-label:               #999;
  --color-pb-finish-bg:                   #55c81e;  /*LSW blau */
  --color-pb-finish-text:                 #fff;
  --color-pb-finish-label:                #666;
  --color-pb-active-bg:                   #55c81e;  /*SWD grün */
  --color-pb-active-text:                 #fff;
  --color-pb-active-label:                #222;
  --color-pb-border:                      #cacbd8;


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

  --color-table-header:                   #55c81e;  /*LSW blau */
  --color-table-header-text:              #fff;
  --color-table-row-background:           #fff;
  --color-table-row-text:                 #222;
  --color-table-highlight:                ##55c81e;  /*LSW blau */
  --color-table-highlight-text:           #000;
  --color-table-highlight-bg-dark:        #12ABE420;  /*Creos mittelblau hell*/
  --color-table-selected:                 #55c81e;  /*SWD grün */
  --color-table-selected-text:            #000;
  --color-table-row-background-1:         #f7f7f7;
  --color-table-row-background-2:         #fafafa;
  --color-table-row-background-3:         #c9c9c9;
  --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:                 #f7f7f7;
  --color-arrow-step-bg:                  #f5f5f5;
  --color-arrow-step-link:                #222;
  --color-arrow-step-text:                #666;
  --color-arrow-step-label:               #222;
  --color-arrow-step-active-bg:           #55c81e;  /*SWD grün */



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

  --color-help-circle-bg:                 #fff;
  --color-help-circle-border:             #cacbd8;
  --color-help-circle-text:               #55c81e;  /*LSW blau */
  --color-help-circle-bg-hover:           #55c81e;  /*LSW blau */
  --color-help-circle-border-hover:       #55c81e;  /*LSW blau */
  --color-help-circle-text-hover:         #fff;



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

  --color-dz-preview-bg:                  #fff;
  --color-dz-preview-border:              #dfdfdf;
  --color-dz-progress-bar:                #4CAF50;
  --color-dz-progress-bar-bg:             #f5f5f5;



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

  --color-tt-bg:                          #fff0e5;
  --color-tt-text:                        #222;
  --color-tt-border:                      #cacbd8;



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

  --color-dp-bg:                          #fff;
  --color-dp-border:                      #cacbd8;
  --color-dp-link:                        #55c81e;  /*LSW blau */
  --color-dp-header-bg:                   #55c81e;  /*LSW blau */
  --color-dp-ctrl-bg:                     #f5f5f5;
  --color-dp-month-nav-bg:                #fff;
  --color-dp-full-month-border:           #fff;
  --color-dp-circle-btn-bg:               #55c81e;  /*LSW blau */
  --color-dp-circle-btn-text:             #fff;
  --color-dp-circle-btn-border:           #55c81e;  /*LSW blau */
  --color-dp-circle-btn-bg-hover:         #fff;
  --color-dp-circle-btn-text-hover:       #55c81e;  /*LSW blau */
  --color-dp-circle-btn-border-hover:     #fff;
  --color-dp-select-bg:                   #fff;
  --color-dp-select-text:                 #55c81e;  /*LSW blau */
  --color-dp-select-border:               #1d276f;
  --color-dp-month-header-border:         #dfdfdf;
  --color-dp-month-header-bg:             #f5f5f5;
  --color-dp-month-header-text:           #999;
  --color-dp-other-month-bg:              transparent;
  --color-dp-other-month-text:            #b3b3b3;
  --color-dp-month-bg:                    #fff;
  --color-dp-month-border:                #dfdfdf;
  --color-dp-month-link-bg:               #fff;
  --color-dp-month-link-text:             #55c81e;  /*LSW blau */
  --color-dp-month-link-border:           #cacbd8;
  --color-dp-month-today-link-bg:         transparent;
  --color-dp-month-today-link-text:       #55c81e;  /*SWD grün */
  --color-dp-month-today-link-border:     #cacbd8;
  --color-dp-month-highlight-link-bg:     #55c81e;  /*LSW blau */
  --color-dp-month-highlight-link-text:   #fff;
  --color-dp-month-weekend-link-bg:       #f5f5f5;
  --color-dp-month-weekend-link-text:     #55c81e;  /*LSW blau */
  --color-dp-month-selected-link-bg:      #55c81e;  /*SWD grün */
  --color-dp-month-selected-link-text:    #fff;



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

  --color-top-jump-bg:                    rgba(245, 245, 245, 0.5);
  --color-top-jump-text:                  #cacbd8;
  --color-top-jump-border:                #cacbd8;
  --color-top-jump-circle:                #dfdfdf;
  --color-top-jump-bg-hover:              #55c81e;  /*SWD grün */
  --color-top-jump-text-hover:            #fff;
  --color-top-jump-border-hover:          #55c81e;  /*SWD grün */
  --color-top-jump-circle-hover:          #55c81e;  /*LSW blau */



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

  --color-toggle-box-bg:                  #656d77;
  --color-toggle-box-text:                #fff;



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

  --color-task-list-bg:                   #fff;
  --color-task-item-bg:                   #fff;
  --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:                #55c81e;  /*LSW blau */
  --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:                    #55c81e;  /*SWD grün */
  --color-thumb-shadow:                   #dfdfdf;
  --color-thumb-border:                   #fff;
  --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:               #55c81e;
  --color-expandable-header-bg-hover:     #fff;
  --color-complementary:                  #fff;
  --color-full-width-container:           #f7f7f7;
  --color-full-width-container-border:    #dfdfdf;

  --color-secondary:					  #55c81e;
  --color-secondary-darken-5: 			  #292c45;
  --color-secondary-darken-10: 			  #292c45;
}