/* ===================================================================================================================
 * Styleguide
 * ===================================================================================================================*/

#highlight {
    max-height: 100% !important;
}
.box img {
    max-width: 500px;
}

/* ===================================================================================================================
 * Utilities
 * ===================================================================================================================*/

.m-b-0  { margin-bottom: 0 !important; }
.m-b-5  { margin-bottom: 5px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-15 { margin-bottom: 15px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-30 { margin-bottom: 30px !important; }


.hyphens {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* ===================================================================================================================
 * Statusfarben :: DWD
 * ===================================================================================================================*/

/* Statusfarben */
.white  {background-color: #FFFFFF;}
.grey   {background-color: #D8D8D8;}  /* 15 */
.brown  {background-color: #B76919;}  /*  5 */
.violet {background-color: #CC99FF;}  /*  9 */
.red    {background-color: #E53935;}  /*  5 */
.orange {background-color: #FB8C00;}  /*  9 */
.yellow {background-color: #FFEB3B;}  /* 17 */
.green  {background-color: #C5E566;}  /* 15 */

/* Iconfarben */
.icon-white  {background-color: #FFFFFF;}  /* dito */
.icon-grey   {background-color: #D8D8D8;}  /* dito */
.icon-brown  {background-color: #C28342;}  /* DIFF */
.icon-violet {background-color: #CC99FF;}  /* dito */
.icon-red    {background-color: #E53935;}  /* dito */
.icon-orange {background-color: #FFAA00;}  /* DIFF+ */
.icon-yellow {background-color: #FFEB3B;}  /* dito */
.icon-green  {background-color: #BBF807;}  /* DIFF+ */

.icon-white-ar  {background-color: #FFFFFF;}  /* dito */
.icon-grey-ar   {background-color: #D8D8D8;}  /* dito */
.icon-brown-ar  {background-color: #C28342;}  /* DIFF */
.icon-violet-ar {background-color: #CC99FF;}  /* dito */
.icon-red-ar    {background-color: #E53935;}  /* dito */
.icon-orange-ar {background-color: #FBA700;}  /* DIFF */
.icon-yellow-ar {background-color: #FFEB3B;}  /* dito */
.icon-green-ar  {background-color: #B1EC00;}  /* DIFF */


/* ===================================================================================================================
 * Tabellen :: Reflow
 * ===================================================================================================================*/

/* SG2 :: td :: padding: 12px */

/* Hidden Column-Title */
.reflowTable tbody td .reflowTitle {
    display: none;
}
/* Show on Reflow */
.reflowTable tbody td .reflowVisible {
    display: none;
}
/* Hide on Reflow */
.reflowHidden {}

@media ( max-width: 767px ) {
    /* Header und Footer */
    .reflowTable thead th,
    .reflowTable tfoot td {
        display: none;
    }
    /* Body */
    .reflowTable tbody {
        border: 0 none;
    }
    /* Row */
    .reflowTable tbody tr {
        border-left: 0 none;
        border-right: 0 none;
    }
    /* Column */
    .reflowTable tbody td {
        text-align: left;
        display: block;
        border: 0 none;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        clear: left;
    }
    /* First Column */
    .reflowTable tbody tr td:first-child {
        font-weight: bold;
    }
    /* Hidden Column-Title */
    .reflowTable tbody td .reflowTitle {
        min-width: 30%;
        display: inline-block;
        color: #666;
    }
    /* Show on Reflow */
    .reflowTable tbody td .reflowVisible {
        display: inline-block;
    }
    /* Hide on Reflow */
    .reflowHidden {
        display: none !important;
    }
    /* Padding */
    .reflowTable tbody tr td {
        padding: 2px 12px !important;
    }
    .reflowTable tbody tr td:first-child {
        padding: 12px 12px 6px !important;
    }
    .reflowTable tbody tr td:last-child,
    .reflowTable tbody tr td.reflowLastRow {
        padding: 2px 12px 12px !important;
    }
    /* Background */
    .reflowTable tbody tr {
        background-color: #fff !important;
        border-top: 1px solid #cdcdcd;
    }
    .reflowTable tbody tr.toggleRow {
        border-top: 0;
    }

    /* konkrete Tabellen */
    .wUebersichtTable .reflowTitle {
        min-width: 10em !important;
    }
    .wFgTable .reflowTitle {
        min-width: 8em !important;
    }
    .nFgTable .reflowTitle {
        min-width: 8em !important;
    }
    .wUebersichtTable .statusEntry,
    .wFgTable .statusEntry,
    .nFgTable .statusEntry {
        display: block;
        padding: 2px 0;
    }
}

/* ===================================================================================================================
 * Tabellen :: Allgemein
 * ===================================================================================================================*/

.tableWrapper {
    margin-bottom: 40px;
}
.box .tableWrapper {
    margin-bottom: 20px;
}
.tableWrapper .table-responsive {
    overflow-x: hidden;
    min-height: 0;
    border: 0;
}
.tableWrapper table {
    min-width: 0 !important;
    margin-bottom: 0 !important;
}
.tableWrapper table thead th {
    border-radius: 0 !important;
    vertical-align: top !important;
}

.tdLeft {
    text-align: left;
}
.tdCenter {
    text-align: center;
}
.thSmall th {
    padding-top: 0 !important;
}

/* ===================================================================================================================
 * Tabellen :: Filtern
 * ===================================================================================================================*/

.btn.filterReset {
    line-height: 23px;
    font-size: 20px;
}
.btn.filterReset:active,
.btn.filterReset:focus,
.btn.filterReset:hover {
    text-decoration: none;
}

/* ===================================================================================================================
 * Tabellen :: Sortieren
 * ===================================================================================================================*/

.sortHeader {
    cursor: pointer;
}


/* ===================================================================================================================
 * Status
 * ===================================================================================================================*/

.statusEntry {
    display: inline-block;
    min-width: 45px;
}
.statusIcon {
    display: inline-block;
    height: 14px;
    width: 14px;
    border: 1px solid #808080;
    margin-right: 10px;
    margin-bottom: -1px;
}
.statusText {
    display: inline-block;
}
.statusIcon.statusEmpty {
    border-color: transparent;
}


/* ===================================================================================================================
 * Karte
 * ===================================================================================================================*/

.karteWrapper {
    position:relative;
    max-width: 100%;
    margin: 0 auto 10px auto;
    overflow: hidden;
    line-height: 0;
    page-break-inside:avoid;
}
/* IE-11-Hack für SVG :: https://www.mediaevent.de/tutorial/svg-responsive.html */
.karteWrapper canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}
.karteWrapper svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* Rasterimages */
.kartenimage {
    width: 100%;
}

.pageKarteFlussgebiet .karteWrapper {
    margin-bottom: 20px;
}

/* Flussgebiete :: SVG-Polygone */
.kartenGebiet {
    fill: transparent;
    stroke: #333;
    stroke-width: 0;
}

/* Frühwarn-Gebiete :: SVG-Polygone */
.fwGebiet {
    fill-opacity: 0.7;
    stroke: #333;
    stroke-width: 1px;
}
.fwGebiet:hover {
    fill-opacity: 0.85;
}
/* Smartphone large */
@media (max-width: 767px) {
    /* keine PopUps */
    .fwGebiet {
        pointer-events: none;
    }
}


/* unterhalb der Karte :: Letzte Aktualisierung */
.letzteAktualisierung {
    margin-bottom: 25px;
}


/* ===================================================================================================================
 * Karte :: Messstationen
 * ===================================================================================================================*/

/* CSS-Icons */
.msIcon {
    display: inline-block;
    width: 9px;
    height: 9px;
    border: 1px solid #555;
}
.msIcon.iconQuadrat {
}
.msIcon.iconKreis {
    border-radius: 50%;
}
.msIcon.iconKreisQuer {
    border-radius: 50%;
    position: relative;
}
.msIcon.iconKreisQuer:after {
    content: "";
    position: absolute;
    border-top: 1px solid #000;
    width: 200%;
    transform: rotate(-45deg);
    transform-origin: 80% 0%;
    left: -66.6%;
}

/* Messstations-Icon :: Wrapper */
.msWrapper {
    position: absolute;
    cursor: pointer;
}

/* Icons auf Karte */
.karteWrapper .msIcon {
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
}
.karteWrapper .msIcon.iconQuadrat {
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    margin-top: -4.5px;
}
/* Small-Screen und Tablet */
@media (max-width: 1219px) {
    .karteWrapper .msIcon {
        width: 9px;
        height: 9px;
        margin-left: -4.5px;
        margin-top: -4.5px;
        border-color: #666;
    }
    .karteWrapper .msIcon.iconQuadrat {
        width: 8px;
        height: 8px;
        margin-left: -4px;
        margin-top: -4px;
    }
}
/* Smartphone large */
@media (max-width: 767px) {
    /* Nicht-Meldepegel ausblenden */
    .karteWrapper .msIcon.iconQuadrat {
        display: none;
    }
    /* keine PopUps und keine Navigation zur Messstation */
    .karteWrapper .msWrapper {
        pointer-events: none;
    }
}
/* Smartphone small */
@media (max-width: 575px) {
    .karteWrapper .msIcon {
        width: 8px;
        height: 8px;
        margin-left: -4px;
        margin-top: -4px;
        border-color: #777;
    }
}
@media (max-width: 420px) {
    .karteWrapper .msIcon {
        width: 7px;
        height: 7px;
        margin-left: -3.5px;
        margin-top: -3.5px;
        border-color: #888;
    }
}

/* Meldepegel 'nach vorn' */
.karteWrapper .msIcon.iconKreis {
    z-index: 20;
}


/* ===================================================================================================================
 * Legende Wasserstand und Niederschlag
 * ===================================================================================================================*/

.legendeAccordion {
    margin-bottom: 40px !important;
}
.legendeItem img {
    vertical-align: middle;
    margin-right: 10px;
}
.legendeItem .msIcon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 11px;
    height: 11px;
}
.legendeItem span {
    vertical-align: middle;
}
.legendeItem .iconTendenz {
    width: 18px;
    height: 18px;
}

/* ===================================================================================================================
 * Wasserstand :: Tabelle
 * ===================================================================================================================*/

.iconTendenz {
    width: 20px;
    height: 20px;
}

/* ===================================================================================================================
 * Niederschlag :: Tabelle
 * ===================================================================================================================*/

.nFgTable .nFgColN {
    width: 12%;
}

/* ===================================================================================================================
 * Messstation :: Detailseite
 * ===================================================================================================================*/

.msDiagramm {
    width: 450px;
    max-width: 100%;
    padding: 0 20px 20px 0;
}
.diagrammLegende .statusEntry {
    margin-right: 15px;
    min-width: 10em;
    margin-bottom: 5px;
}


/* ===================================================================================================================
 * Tooltips allgemein (Messtationen und Frühwarnung)
 * ===================================================================================================================*/

.qtip.hwimsTooltip {
    padding: 0;
    margin: 0;
    border: 0;
    color: #000;
    background-color: transparent;
}
.qtip.hwimsTooltip .qtip-content {
    padding: 15px;
    margin: 0;
    background: none #fff;
    color: #000;
    font-size: 13px;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0,0,0,.5);
    border-radius: 4px;
}
.qtip.hwimsTooltip .qtip-tip {
    display: none !important;
}


/* ===================================================================================================================
 * Tooltips Messstationen
 * ===================================================================================================================*/


.popUp {
    display: none;
}
.popUp p {
    padding: 0 0 0 10px;
}
.popUpStatus {
    margin: -15px -15px 0 -15px;
}
.popUpStatus > div {
    padding: 10px 10px 10px 15px;
    background: rgba(255,255,255,0.1);
}
.popUpTitle {
    margin: 0;
    padding: 10px 0;
}
.popUpTitleBold {
    font-weight: bold;
    font-size: 1.1em;
}


/* ===================================================================================================================
 * Tooltips Messstationen :: Pegel
 * ===================================================================================================================*/

.qtip.msTooltip {
    min-width: 360px;
}
.popUpMsTendenz {
    margin: 10px -15px -15px -15px;
    padding: 10px 20px 10px 15px;
    background-color: #F6F6F6;
}
.popUpMsDiagrammContainer {
    float: left;
    width: 140px;
    margin-bottom: 5px;
    margin-left: -5px;
}
.popUpMsDiagramm {
    width: 138px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}
.popUpMsTableContainer {
    margin: 0;
    float: left;
    width: 190px;
    padding-left: 10px;
    padding-top: 3px;
}
.popUpRow {
    display: table;
    width: 100%;
}
.popUpRow .popUpLabel,
.popUpRow .popUpValue {
    display: table-cell;
}
.popUpValue {
    text-align: right;
}
.popUpMs .iconTendenz {
    width: 24px;
    height: 24px;
    margin: -2px 0;
}

/* ===================================================================================================================
 * Tooltips Messstationen :: Ombrometer
 * ===================================================================================================================*/

.qtip.omTooltip {
    min-width: 330px;
}
.popUpOmHeader {
    padding: 0 0 0 10px;
    margin: 0;
}
.popUpOmTableContainer {
    float: left;
    padding-left: 15px;
}
.popUpOmTableContainer .popUpRow {
    margin-bottom: 3px;
}
.popUpMsDiagrammLabel {
    margin-left: 5px;
    margin-bottom: 5px;
}


/* ===================================================================================================================
 * Frühwarnung
 * ===================================================================================================================*/

.fwLegende {
    margin-bottom: 20px;
}
.fwLegendeEntry {
    display: inline-block;
    margin-bottom: 4px;
    min-width: 12em;
}
.fwLegendeIcon {
    display: inline-block;
    height: 14px;
    width: 14px;
    border: 1px solid #808080;
    margin-right: 10px;
    vertical-align: middle;
}
.fwLegendeText {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
}

.fwSublegende {
    margin-bottom: 30px;
    font-size: 12px;
}
.fwSublegendeEntry {
    display: inline-block;
    margin-right: 20px;
}

.fwAccordionLegende ul {
    margin: 8px 0 8px 24px !important;
}
.fwAccordionLegende ul li {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.fwAccordionLegende ul li::before {
    color: #666 !important;
}

/* ===================================================================================================================
 * Frühwarnung :: Row Toggle
 * ===================================================================================================================*/

/* Toggle-Link */
a.toggleLink {
    padding-left: 20px;
    background-position: left center;
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-arrow-top-blue.svg.jsf);
}
a.toggleLink.collapsed {
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-arrow-bottom-blue.svg.jsf);
}
/* Toggle-Row */
.reflowTable tbody tr.toggleRow td {
    padding: 0 !important;
}
.toggleRow .toggleContent {
    font-weight: normal;
    padding: 12px 12px 18px;
}
.toggleRow .toggleContent img {
    max-width: 100%;
    max-height: 200px;
}
.toggleRow .toggleContent .media-caption {
    display: block;
    margin-top: 10px;
    max-width: 400px;
    color: #333;
}
@media (min-width: 768px) {
    .toggleRow {
        display: none;
    }
}
/* Hidden-Row */
.hiddenRow {
    display: none;
}


/* ===================================================================================================================
 * Frühwarnung :: Tooltips
 * ===================================================================================================================*/

.qtip.fwTooltip {
    min-width: 320px !important;
}
/* Tooltip-Nase ausblenden */
.qtip.fwTooltip .qtip-tip {
    display: none !important;
}
.qtip.fwTooltip .qtip-content {
    padding: 0 !important;
}

.fwTooltipContent {
    display: none;
}
/* Tooltip Fruehwarnung :: Content */
.fwTooltip .fwTooltipContent {
    font-size: 1em;
    line-height: 1.3em;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    display: block;
}
.fwTooltip .fwTooltipInner {
    padding: 15px;
    background: none #fff;
}
.fwTooltip .fwTooltipStatus {
    margin: -15px -15px 0 -15px;
}
.fwTooltip .fwTooltipStatus > div {
    padding: 10px 15px;
    background: rgba(255,255,255,0.1);
}
.fwTooltip .fwTooltipHeading {
    font-size: 1.1em;
    font-weight: bold;
    margin: 10px 0;
}
.fwTooltipEmpfehlungen {
    margin-bottom: 15px;
}
.fwTooltipEmpfehlungen div {
    margin-bottom: 5px;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.fwTooltip .fwTooltipDiagram {
    margin: 10px 0 0 0;
}
.fwTooltip .fwTooltipDiagram img {
    width: 100%;
    margin: 0 0 10px 0;
}
.fwTooltip .fwTooltipDiagram div {
    font-size: .9em;
}

@media ( max-width: 767px ) {
    .qtip.fwTooltip {
        /* display: none !important; */
    }
}


/* ===================================================================================================================
 * Seitentitel
 * ===================================================================================================================*/

.pageTitle {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin-bottom: 30px;
}
@media ( max-width: 576px ) {
    .pageTitle {
        font-size: 30px;
    }
}


/* ===================================================================================================================
 * Breadcrumb
 * ===================================================================================================================*/

.breadCrumbWrapper {
    background-color: #f9f9f9;
    border-radius: 4px;
    margin-top: -15px;
}
.highlight .breadCrumbWrapper {
    background-color: transparent;
    margin-top: -20px;
}

.breadCrumb {
    padding: 8px 12px;
    margin-bottom: 22px;
    list-style: none;
    position: relative;
}
.breadCrumb > li {
    display: inline-block;
}
.breadCrumb > li + li::before {
    padding: 0 5px;
    color: #888;
    content: "/\00a0";
}
.highlight .breadCrumb {
    /* background-color: #dceaf6; */
    background-color: transparent;
    padding-left: 0;
}

@media ( min-width: 992px ) {
    .breadCrumbWrapper {
        margin-top: -30px;
    }
    .highlight .breadCrumbWrapper {
        margin-top: -25px;
    }

}

/* ===================================================================================================================
 * Blättern
 * ===================================================================================================================*/

.hwimsBlaettern {
    background-color: #f9f9f9;
    display: block;
    height: 40px;
    width: 40px;
    border: 1px solid #d1e2f3;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 6px;
}
.highlight .hwimsBlaettern {
    background-color: #d1e2f3;
    border-color: #d1e2f3;
}
.hwimsBlaetternZurueck .hwimsBlaettern {
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-arrow-left-blue.svg.jsf);
}
.hwimsBlaetternVor .hwimsBlaettern {
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-arrow-right-blue.svg.jsf);
}
.hwimsBlaettern:hover {
    background-color: #176FC5;
    border-color: #176FC5;
}
.hwimsBlaetternZurueck .hwimsBlaettern:hover {
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-arrow-left-white.svg.jsf);
}
.hwimsBlaetternVor .hwimsBlaettern:hover {
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-arrow-right-white.svg.jsf);
}

.hwimsBlaetternCol {
    float: left;
    padding: 0 10px;
    width: 60px;
    position: relative;
}
.hwimsBlaetternCol.hwimsBlaetternTitle {
    width: calc(100% - 120px);
}

/* ===================================================================================================================
 * RSS
 * ===================================================================================================================*/

.hwimsRSS {
    background-color: transparent;
    display: block;
    height: 28px;
    width: 28px;
    border: 1px solid transparent;
    border-radius: 3px;
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-rss-blue.svg.jsf);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}
.hwimsRSS:hover {
    background-color: #176FC5 !important;
    border-color: #176FC5 !important;
    background-image: url(/umwelt/infosysteme/hwims/portal/javax.faces.resource/icons/icon-rss-white.svg.jsf);
}
.pageTitleRSS {
    position: relative;
    padding-right: 30px;
}
.pageTitle .hwimsRSS {
    position: absolute;
    right: 0;
    top: 5px;
}
h2.pageTitleRSS .hwimsRSS {
    position: absolute;
    right: 0;
    top: -2px;
}
.breadCrumbWrapper {
    position: relative;
    padding-right: 26px;
}
.breadCrumbWrapper .hwimsRSS {
    position: absolute;
    right: 6px;
    top: 6px;
}

/* ===================================================================================================================
 * Dropdown :: Portalauswahl
 * ===================================================================================================================*/

.portalAuswahl {
    position: absolute;
    right: 10px;
    bottom: 0;
}
.portalAuswahl .btn {
    color: #000 !important;
    background-color: #d1e2f3 !important;
    border-color: #d1e2f3 !important;
}
.portalAuswahl .btn:hover,
.portalAuswahl .btn:focus {
    color: #fff !important;
    background-color: #176FC5 !important;
    border-color: #176FC5 !important;
}

.portalAuswahl .dropdown-menu {
    min-width: 130px;
}
.portalAuswahl .dropdown-menu > li {
    padding: 6px 12px;
}
.portalAuswahl .dropdown-menu > li > a {
    padding: 1px 5px 1px 20px;
}
.portalAuswahl .dropdown-menu > li > a:hover {
    text-decoration: underline;
    color: #176FC5;
    background-color: #fff;
}

@media ( max-width: 992px ) {
    .portalAuswahl {
        bottom: -20px;
    }
    .pageKarteFlussgebiet .karteWrapper {
        margin-bottom: 40px;
    }
    .pageKarteFlussgebiet .portalAuswahl {
        bottom: -50px;
    }
}
@media ( max-width: 576px ) {
    .portalAuswahl {
        bottom: -25px;
    }
}

/* ===================================================================================================================
 * Download von Messwerten
 * ===================================================================================================================*/

.linkCol {
    padding: 5px 0;
}
.inputTypeDate {
    line-height: 1.65 !important;
}