/*
 *****************************************************************
 * liNear skin for oXygen generated WebHelp.
 *
 * Version 1.0  2019-05-21  parson AG (FR)  Initial version.
 * Version 1.1  2019-07-20  parson AG (FR)  Final version.
 * Version 2.0  2020-11-23  parson AG (FR)  Upgrade to use with Oxygen 23.
 *
 *****************************************************************
 */

/* 1 Navigationsleiste
 *
 * a) Navigationsleiste links auf allen Seiten (Startseite, Suche, Inhaltsseiten).
 * b) In der Navigationsleiste werden alle Gliederungsebenen aufgeführt (Aktuell ist auf den Inhaltsseiten nur der Inhalt des jeweiligen Hauptkapitels dargestellt).
 * c) Der obere Navigationsbereich in der aktuellen Hilfe wird entfernt.
 * d) Die Hauptkapitel werden fett dargestellt.
 * 10) Sidebar-Menü: Ohne Hintergrund, seitliche Abtrennung zum Content durch vertikale Linie: Farbe schwarz, Breite: 1px
 * 11) Sidebar-Menü: Schriftfarbe schwarz
 * 12) Sidebar-Menü: Das Verhalten ist nicht nachvollziehbar. Wenn man einen Unterpunkt aufklappt sind einige Einträge türkis und andere grau. Es sollen alle Einträge bis auf den aktiven schwarz sein (Hauptkapitel fett, die anderen normal). Der aktive Eintrag soll Türkis sein
 */

/* a) Technisch derzeit nicht umsetzbar
 *
 *    Siehe Oxygen-Forum: "Customize Webhelp Responsive home page" (https://www.oxygenxml.com/forum/topic19567.html)
 */

/* b) Alle Gliederungsebenen aufführen
 * Wird über Transformationsparameter gesteuert.
 *
 * webhelp.publication.toc.links
 *
 * Specifies which links will be included in the Publication TOC of each topic.
 * Allowed values:
 * "topic"
 * - The Publication TOC will include only the links to the current topic and its children.
 * "chapter" (default)
 * - The Publication TOC will include the links to the current topic, its children, and its ancestors.
 * "all"
 * - The Publication TOC will include all links.
 *
 * Der Parameter kann im Template Descriptor File gesetzt werden:
 * <parameters>
 *   <parameter name="webhelp.publication.toc.links" value="all"/>
 *
 */

.wh_publication_title a {
    margin: 0;
}

header.wh_header {
    display: block;
    margin: 0;
    position: relative;
    background-color: #183d46;
    padding: 40px 10px 0 10px;
}

/* d) Oberste Menüebene fett */
div.wh_publication_toc > ul[role = "tree"] > li div.title a {
    font-weight: bold;
}

div.wh_publication_toc ul[role = "group"] li div.title a {
    font-weight: normal;
}

/* 10) Ohne Hintergrund, seitliche Abtrennung zum Content durch vertikale Linie: Farbe schwarz, Breite: 1px */
div.wh_publication_toc {
    background-color: white;
    border-radius: 0px;
    border-right: 1px solid black;
    min-height: 800px !important;
}

/* 11) Schriftfarbe schwarz */
div.wh_publication_toc li div.title a {
    color: black !important;
}

/* 12) Aktiver Eintrag türkis und fett */
div.wh_publication_toc li.active > .topicref a {
    color: #1DA7AE !important;
    font-weight: bold;
}


/*******************************************************************************
 * 2 Suchleiste
 *
 * - Der Bereich mit der Suchleiste rutscht nach oben (Wegfall der oberen Navigation) und wird mit einem Bild hinterlegt.
 */
.wh_search_input {
    display: block;
    margin: 0;
    position: relative;
    background: #183d46;
    border-bottom: 1px solid #1DA7AE;
}

@media only screen and (min-width : 768px) {
    .wh_search_input {
        padding: 20px 60px 60px 60px;
    }
}

/* Only for main page */
.wh_main_page .wh_search_input {
    padding: 60px; /* 12.08.2022, ESC: changed the padding from 60px 20px 60px to general 60px to accommodate the longer title of AC */
}

.wh_search_textfield {
    border: solid 1px #cccccc;
    border-radius: 5px;
    padding: 0 .5em;
    position: relative;
    height: 2.8em;
}
.wh_search_button {
    border: solid 1px #cccccc;
    border-radius: 0 5px 5px 0;
    padding: 0 .5em;
    color: #fff;
    background-color: #1da7ae;
    height: 2.8em;
}

/* Bei schmalem Bildschirm Sucheingabe verkleinern */
@media only screen and (max-width : 1500px) {
    #searchForm > div {
        z-index: 20;
    }
}


/* Logo und Publication Title anzeigen */

/* Navigationsleiste als Container fixieren*/
header.wh_header {
    display: block;
    z-index: 10;
}

/*.wh_header{
    background: transparent none;
    color: fuchsia;
}
*/

/* Schatteneffekte deaktivieren */
header.navbar,
header.navbar-default {
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Transparenter Hintergrund für alle Element im Header */
header.wh_header * {
    background-color: transparent;
}

/* Kindelemente separat ausblenden */
div#wh_top_menu_and_indexterms_link * {
    display: none;
}

/* Logo und Publication Title */
div.wh_logo_and_publication_title {
    display: block;
}

a.wh_logo {
    display: block;
}

/* Publication title anpassung PHO vorübergehend Einblenden des Titels und verkleinern des Logos */
div.wh_publication_title {
    display: inline;
}


/* 07.07.2022, ESC: increase title font size */
div.wh_publication_title > a {
    color: #ffffff;
    font-size: 20px
}

/* Logogröße anpassen | 07.07.2022, ESC: Wunsch GME: Logo komplett ausblenden*/
a.wh_logo img {
    display: none;
}


/*******************************************************************************
 * 3	Farbe Links
 *
 * Tauschen der Farbe aller mit Blau dargestellten Links durch Türkis.
 *
 * türkis = #1DA7AE
 */

.related-links a,
.related-links a:visited {
    color: #1DA7AE;
    padding-bottom: .3em;
    display: inline-block;
}

a {
    color: #1DA7AE;
}

.active a {
    color: #1DA7AE;
}

#li.active > div.title {
    color: #1DA7AE;
}

/* Pagination links */
.pagination > li > a,
.pagination > li > span {
    color: #1DA7AE;
}

.wh-search-pagination ul {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.wh-search-pagination ul a {
    position: relative;
    display: block;
    padding: 0.37rem 0.75rem;
    font-size: 1rem;
    color: #1DA7AE;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #1DA7AE;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.wh-search-pagination ul li:not(:first-child) a {
    margin-left: -1px;
}

.wh-search-pagination ul li.active a {
    color: #fff;
}

#wh-search-pagination > ul > li.active > a {
    background-color: #1DA7AE;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    border-color: #1DA7AE;
}


/* Tooltip: Hintergrundfarbe türkis */
.wh_breadcrumb .topicref .wh-tooltip,
.wh_publication_toc .topicref .wh-tooltip .wh-tooltip {
    background-color: #1DA7AE !important;
}


/* 4	Sections
 *
 * - Kettensymbole noch dem Section-Titel ausblenden
 * - Einklappen von Sections deaktivieren und Symbol nicht darstellen.
 *
 * Testen mit "Details zu MEP-Räume erstellen".
 */

/* Kettensymbol ausblenden */
span.permalink {
    display: none
}

/* Einklappen deaktivieren */
span.wh_expand_btn {
    display: none;
}


/* 5	Abtrennung Sections
 *
 * (vgl. Webhelp_Mockup_Final_MEP-Räume.jpg)
 * - Oberhalb von Sections eine graue Trennlinie einfügen.
 * - Abstände zwischen Überschrift Section und Paragraf anpassen.
 */

/* Trennlinie */
.section {
    border-top: 1px solid black;
}
/* Trennlinie über Lösung und Lösungsschritte in troubleshooting-topics entfernt (12.10.2021, ESC) */
.section.remedy {
    border-top: 0px solid black;
}
.section.steps-informal {
    border-top: 0px solid black;
}

/* Abstände zwischen Überschrift Section und Paragraf */
h1.topictitle1 {
    margin-bottom: 36px;
}

h2.title.sectiontitle {
    margin-bottom: 18px;
}

p {
    margin-top: 0em;
}

/* 6	Schriftparameter der Elemente
 *
 * - Schriftparameter Farbe, Schriftgröße, Schrifttyp anpassen.
 */
body {
    color: #000000;
    font-family: "Open Sans", Sans, sans-serif;
}

h1 {
    font-size: 2.571em;
}

h2 {
    font-size: 1.571em;
}

p {
    font-size: 14px;
}

/*******************************************************************************
 * 7 Suchseite
 *
 * (vgl. Webhelp_Mockup_Final_Suchergebnisse.jpg)
 * a) Anzeige der HTML-Seite in der Trefferliste entfernen.
 * b) Text „Übereinstimmung mit Suchanfrage“ über Bewertung einfügen.
 * (Der Text soll automatisch auf Basis der eingestellt Sprache in der Dita-Map angepasst werden)
 *
 * 23) Überschriften der Ergbnisse in font:weight 100 und Größe 1,8em
 * 24) Überschriften des "search_results_header" in font:weight 100 und Größe 1,8em
 *
 * Testen mit Suche nach "rohre zeichnen".
 */

/* a) Search relative path */
.searchresult li .relativePath a {
    display: none;
}

/* b) Text über Bewertung */
/*    Modified for Oxygen 23.0 */
#linear_search-results {
    float: right;
    line-height:1.2;
    position: relative;
    right:15.2em;
    top:3px;
    width: 10em;
}

/* Sterne nach links rücken */
#rightDiv {
    margin-right: 8em;
}

/* Textauszug schmaler */
ol.searchresult div.shortdesclink {
    margin-right: 15em !important;
}

/* 23) Überschriften der Ergbnisse in font:weight 100 und Größe 1,8em */
ol.searchresult li a.foundResult {
    font-size: 1.8em;
    font-weight: 100;
}

/* 24) Überschriften des "search_results_header" in font:weight 100 und Größe 1,8em */
/* Modified for Oxygen 23.0: Set max-width so text breaks earlier.                  */
div.wh_search_results_header_docs {
    font-size: 1.8em;
    font-weight: 100;
    max-width: 70%;
}

/* Linie nach unten verschieben */
div.wh_search_results_header {
    padding-bottom: 7px;
}


/*******************************************************************************
 * 8 Startseite
 *
 * (vgl. Webhelp_Mockup_Final_Home.jpg)
 * - Text in Kacheln linksbündig
 */

/* 12 Startseite
 *
 * (vgl. Webhelp_Mockup_Final_Home.jpg)
 * - Anzahl Kacheln von 3 pro Zeile auf 4 ändern.
 */

/* 02.05.2022, ESC: Hintergrundbild für Whats New*/
/*.wh_tile[data-id="whatsNew"]> div {
    background-image :url("resources/images/whatsNew.png");
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
}*/


div.wh_tiles {
    padding-top: 2rem;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

div.wh_tile {
    width: 100%;
    margin: 0;
    background-color: white;
    border: 1px solid black;
    font-weight: 300;
    min-height: 140px;
    padding: 1em;
    text-align: left;
    line-height: 1.3em
}

div.wh_tile_shortdesc {
    margin-top: 1em;
    text-align: left;
    color: #0D1A2B;
    font-size: 1.1em;
    line-height: 1.3em
}

div.wh_tile_text:after {
    background: linear-gradient(to bottom, rgba(236, 242, 249, 0), rgba(236, 242, 249, 1) 75%);
}

div.wh_tile_title {
    font-size: 1.7em;
    text-align: left;
    text-decoration: none;
}

div.wh_tile_title a {
    color: #1DA7AE;
}


/* 3) Boxen: Überschriften der Kapitel in schwarz, Fett und Schriftgröße 1,1em (analog zur Schriftart im Sidemenu) */
/*div.wh_tile_title {
    font-size: 1.1em;
    font-weight: bold;
}

div.wh_tile_title a {
    color: black;
}*/

/* 4) Boxen: Die Text line-hight der Kapitelbeschreibungen soll auf 1,4 geändert werden (aktuell 1,7) */
/*div.wh_tile_shortdesc {
    line-height: 1.4;
}*/

/* 5) Boxen: Einheitlicher Größe (an Box des Mockups orientieren), Text linksbündig und innerhalb der Box vertikal zentriert */
div.wh_tile {
    min-height: 200px;
}




/*******************************************************************************
 * 9 Note
*
 * (vgl. Webhelp_Mockup_Final_Geschossdaten.jpg)
* a) Typ Note grau hinterlegen.
* b) Andere Symbole für Type „tip“, „note“ und „attention“ hinterlegen
*
 * Testen mit "Geschossdaten importieren".
*/

div.note_note > span.note__title {
    background-image: url("resources/images/note.png") !important;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

div.note_tip > span.note__title {
    background-image: url("resources/images/tip.png") !important;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

div.note_attention > span.note__title {
    background-image: url("resources/images/attention.png") !important;
    background-repeat: no-repeat;
    background-size: 18px 18px;
}

.note {
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 5px 0px 0px 5px;
    background-color: #f6f6f6;
}


/*******************************************************************************
 *  10 Tabellen
 *
 * (vgl. Webhelp_Mockup_Final_MEP-Räume.jpg)
 * - Tabellenkopf grau hinterlegt.
 * Dicke Linie außen und unter Tabellenkopf. Die anderen Linien dünn.
 */

table.frame-all {
    border: 2px solid black;
}
th {
    background-color: #f6f6f6;
    border: 2px solid black;
}
td {
    border-bottom: 1px solid black !important;
}


/*******************************************************************************
 *  11 Suchseite
 *
 * (vgl. Webhelp_Mockup_Final_Suchergebnisse.jpg)
 * Darstellung Bewertung von Sternen auf Balken ändern.
 *
 *
 * CSS für die Sterne
 *
 * ul.stars li
 * oxygen-webhelp/app/topic/elements-styles.css
 * background:url("../img/star.png") no-repeat 0 0;
 *
 * Rating of searched terms
 * oxygen-webhelp/app/core/webhelp.css
 * background: url('../img/starsSmall.png') 0 25px;
 *
 */


/*
 * ------------------------------------------------------------------
 *
 * Search results.
 *
 */
.searchresult {
    list-style: none;
}

.searchresult li a {
    color: #1DA7AE;
}
.searchresult .shortdesclink {
    margin: .3em .5em 0 0;
}
.wh_search_expression {
    font-weight: bold;
}

#star .curr {
    background: url('resources/images/bar_small.png') 0 25px;
    float: left;
    width: 85px;
    font-size: 1px;
    opacity: 0.7;
}

#star .star {
    background: url('resources/images/bar_small.png') repeat-x 0 -25px;
}

/***************************************************
 * Sonstiges
 * Nur indirekt über die Screenshots spezifiziert
 *
 ***************************************************/

/*
 * Footer (29.06.2022, ESC: disabled entire footer at gme’s request)
 */
.wh_footer {
    display: none;
    /* text-align: center;
    padding: 1em;
    position: relative;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    background: none #333333;
    margin-top: 2em; */
}

.wh_footer a {
    color: #1DA7AE;
}

/* Quick fix for "Responsive footer not at bottom of page"
 * https://www.oxygenxml.com/forum/post54137.html
 */
.wh_footer {
    position: fixed;
    z-index: 20;
}


/*******************************************************************************
 * 8) Suchzeile: Placeholder-Text ändern in "Wonach möchten Sie suchen?"
 *
 * Datei:
 * com.oxygenxml.webhelp.responsive\oxygen-webhelp\resources\localization\strings-de-de.xml
 *
 * Eintrag:
 * <str name="webhelp.search" js="true" php="false">Suche</str>
 *
 * Siehe auch:
 * https://www.oxygenxml.com/doc/versions/23.0/ug-webhelp-responsive/topics/localize-webhelp-responsive.html
 *******************************************************************************/


/* 20) Steps: Text der Steps nicht einrücken und die Zahlen der Schritte in fett. */
ol.steps li.step {
    margin-left: -40px;
}

/* https://css-tricks.com/custom-list-number-styling/
 * http://www.kompx.com/en/bold-numbers-in-ordered-lists.htm */
ol.steps {
    counter-reset: item;
}
ol.steps li.step {
    display: block;
}
ol.steps li.step:before {
    content: counter(item) ". ";
    counter-increment: item;
    font-weight: bold;
}

/***************************************************
 * Anpassungen PHO
 ***************************************************/

/* Filepath schwarz (ID22) */
/* Filepath in oxygen css entfernt und hier die Farbe definiert. */
.filepath {
    color: #000;
}

/* Outputclas variablen eingestellt (ID 16)*/
.liNav{
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 1em;
}
.liNVor{
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 1em;
}
.liNRef{
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 1em;
}
/* Anpassungen Breadcrump (ID 9) */
/* oxygen 158 */
.wh_tools{
    background-color: #FFF;
}
/* oxygen 141 */
.wh_breadcrumb ol {
    color: #000
}
/* oxygen 147 */
.wh_breadcrumb ol .active{
    color: #1DA7AE
}

/* oxygen 169 */
.webhelp_expand_collapse_sections,
.wh_hide_highlight,
.wh_print_link button,
.wh_navigation_links a,
.wh_navigation_links a:hover,
.wh_navigation_links a:active,
.wh_navigation_links a:visited,
.wh_print_link a:before,
.wh_navigation_links a:before,
.wh_navigation_links a:hover:before,
.wh_navigation_links a:active:before,
.wh_navigation_links a:visited:before{
    color: #000
}

/* Menü rechts angepasst (ID 13)*/
/*  webhelp.css 134 */
.wh_topic_toc {
    border-left: 1px solid #000;
    }
.wh_topic_toc li a{
    color: #1DA7AE
}


/*  Anpassungen menuecascade (ID17)*/
.menucascade span {
    font-weight: normal
}

.highlight {
    background-color: #1DA7AE;
    }
 .wh_related_links{
     border-top: 1px solid #000
 }

 /* Tooltip Hintergrund anpassen */
.wh_publication_toc .topicref .wh-tooltip {
    background-color: #1DA7AE
    }
/*  Shortdesc kursiv */
p.shortdesc {
    font-style: italic
    }

/* Abstand related Links verringert */
.wh_topic_content, .wh_content_area {
    margin-bottom: 40px
}

h2.sectiontitle.tasklabel{
    font-size: 1.17em;
    font-weight: bold;
    margin-top: 1em;
}

/************************
 * Upgrade to Oxygen 23
 *
 ************************/

/* Make border-bottom as thick as in background image */
div.wh_search_input {
    border-bottom: 3px solid #1DA7AE;
    padding-bottom: 57px !important;
}

/* Hide top menu nav bar toggler button */
#wh_menu_mobile_button {
    display:none;
}

/* Do not indent section titles */
h2.sectiontitle {
    padding-left: 0px !important;
}

/* Increase line height for tile titles */
div.wh_tile_title span {
    line-height: 1.3em;
}

/* Move search results down */
div#results {
    margin-top:2em;
}