/* ========================================================================================
   soer_nbg.css: SOER Nbg A-Z-Liste, Mängelmelder
   ======================================================================================== */

/* veraltete A-Z-Liste */
.list-az li.aktiv,
.list-az li a:hover {
    background-color: #c25400;
}

/* A-Z-Liste: aktueller Index, veraltete Listeneinbindung ueber Link */
.list-az li.az-choosen,
.list-az li.az-active:hover,
.list-az li.az-active:active {
    background-color: #c25400;
}
.list-az li.az-active:hover,
.list-az li.az-active:active,
.az-active:hover a,
.az-choosen a,
.az-active a:hover {
    color: #fff;
    text-decoration: none;
}

/* ========================================================================================
   maengelmelder.css: CSS fuer Mängelmelder Include
   ======================================================================================== */

/*
 * Akzentfarbe Hintergruende
 */

.concern .accent {
	background: hsl(197, 100%, 30%);
}

/*
 * Akzentfarbe Textlinks
 */

.concern a,
.concern .accent-text,
.concern__heading--h1.accent-text
{
	color: hsl(197, 100%, 25%);
}

/*
 * Anliegen melden
 */

.concern /* Container, der das gesamte Anliegenmanagement enthaelt  */{
    font-size: .85rem;
    padding-bottom: 1.5rem;
}

.concern input,
.concern select,
.concern textarea {
    border: 1px solid #b9b9b9;
    border-radius: 5px;
    padding: .2rem;
}

.concern input[type='text'],
.concern textarea,
.concern select {
    font-size: 1rem;
}

.concern__heading--h1 {
    font-size: 2rem;
    font-weight: normal;
    line-height: 2rem;
    margin-bottom: 2rem;
}

.concern__heading--h2 {
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 2rem;
}

.concern__heading--addition {
    display: block;
    font-size: 1rem;
    margin-top: .5rem;
}

.concern__heading--h3 {
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 1.3rem;
}

.no-break {
    white-space: nowrap;
}

/*
 * Kategorie waehlen
 */

.concern__category-icon-wrapper /* Kategorie waehlen: Kategorie Rahmen*/ {
    align-items: center;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    margin-bottom: .9375rem;
    min-height: 3rem;
}

.concern__category-icon /* Kategorie waehlen: Icon Container */{
    border-radius: 5px;
    color: #fff;
    height: 3rem;
    padding-left: .9rem;
    padding-top: .6rem;
    position: relative;
    width: 3rem;
}

.concern__category-text /* Kategorie waehlen: Text Container */ {
    padding-left: .9375rem;
}

.concern__category-icon--list /* Kategorie waehlen: Liste der Kategorien */ {
    left: 0;
    position: absolute;
    top: 0;
}

/* SVG-Icons */

.svg-icon {
    position: absolute;
}

.svg-icon rect {;
    height: 2rem;
    width: 2rem;
}

.svg-icon--category-button {
    fill: #fff;
    height: 1.75rem;
    left: 1rem;
    top: .75rem;
    width: 1.75rem;
}

.svg-icon--category-marker {
    fill: #fff;
    height: 1.75rem;
    left: .688rem;
    top: .625rem;
    width: 1.75rem;
}

/*
 * Position waehlen
 */

.concern__label--street,
.concern__label--number,
.concern__label--location {
    display: block;
    padding-bottom: 1rem;
    position: relative;
}

.concern__label--street {
    width: 100%;
}

.concern__label--number {
    width: 8rem;
}

.concern__description .input-comment-m {
    height: 10rem;
}

.check-map .concern__position-text,
.check-street .concern__position-text,
.check-map .either-or,
.check-street .either-or,
.check-street .concern__label--street .concern__label-text,
.check-street .concern__label--number .concern__label-text,
.check-street .concern__label--location .concern__label-text,
.check-street .concern__position-wrapper {
    display: none;
}

.check-street .concern__label--street,
.check-street .concern__label--number {
    display: inline;
    width: auto;
}

.check-street .input-text-l,
.street-selected .concern__label--number .concern__input--position[readonly]
{
    display: inline;
    width: auto;
}

.concern__label--personal-data {
    display: block;
    margin-bottom: 0;
}

.concern__label--personal-data:first-child {
    padding-top: .3125rem;
}

.concern__input-wrapper--personal-data {
    display: block;
    padding-bottom: 1rem;
    position: relative;
}


.concern__position-text {
    background: #efefef;
    cursor: pointer;
    margin-bottom: 1px;
    padding-bottom: .3125rem;
    padding-left: 3rem;
    padding-top: .3125rem;
    position: relative;
}

.concern__position-text:hover .concern__icon--toggle {
    color: #005b80;
}

.concern__icon--toggle {
    color: #464646;
    height: 3rem;
    left: 0;
    padding: .3125rem .625rem .3125rem .625rem;
    position: absolute;
    top: 0;
    width: 3rem;
    z-index: 1;
}

.concern__position--readonly {
    display: block;
}

.concern__position--readonly .concern__label--street,
.concern__position--readonly .concern__label--number,
.concern__position--readonly .input-text-l {
    display: inline;
    width: auto;
}

.concern__position--readonly .concern__position-text {
    display: none;
}

.concern__input--position[readonly] {
    background: none;
    border: none;
    color: #000;
    font-size: .9rem;
}

.concern__label--street .concern__input--position[readonly],
.concern__label--number .concern__input--position[readonly] {
    font-weight: bold;
}

.concern__label--checkbox {
    display: flex;
    justify-content: flex-start;
}

/*
 * gemeldete Anliegen Liste
 */

.concern__list {
    list-style: none;
}

.concern__list-item {
    background: #f7f7f7;
    border-bottom: 1px solid #ddd;
    margin-bottom: .625rem;
    margin-left: 3.125rem ;
    position: relative;
}

/* gemeldete Anliegen Kurzinfo */

.concern__list-item-icon,
.concern__popup-icon {
    cursor: pointer;
    position: absolute;
    z-index: 1;
}

.concern__list-item-icon--toggle {
    bottom: 0;
    color: #464646;
    height: 3rem;
    padding: .938rem .625rem .625rem .938rem;
    right: 0;
    width: 3rem;
}

.concern__list-item-icon--favorite,
.concern__popup-icon--favorite {
    color: #cecece;
    height: 3rem;
    padding: .625rem .625rem .625rem .938rem;
    right: 0;
    top: 0;
    width: 3rem;
}

.concern__counter {
    color: #8f8f8f;
    display: none;
    position: absolute;
    right: calc(100% - .625rem);
}

.liked .concern__counter {
    display: block;
}

.concern__list-item-icon--favorite:hover,
.concern__popup-icon--favorite:hover,
.liked.concern__list-item-icon--favorite,
.liked.concern__popup-icon--favorite,
.liked.concern__list-item-icon--favorite:hover .concern__counter,
.liked.concern__popup-icon--favorite:hover .concern__counter {
    color: #005b80;
}

.concern__list-item-info {
    margin-bottom: 1px;
    margin-left: -3.125rem ;
    padding-left: 3.125rem ;
    padding-right: 3.125rem;
    position: relative;
}

.other /* nicht zuständig */{
    background-color: hsl(197, 100%, 30%);
}

.outstanding /* noch nicht bearbeitet */ {
    background-color: #737373; /* ehemals rot #d70f00 */
}

.under-progress /* in Bearbeitung */ {
    background-color: #f29400 ;
}

.finished /* beendet */ {
    background-color: #6a9519;
}

/* gemeldete Anliegen Detail */

.concern__list-item-detail {
    padding-bottom: 3rem;
    /*margin-bottom: .938rem;*/
}

.concern__list-item-detail {
    display: none;
}

.concern__list-item-map {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
}

.concern__comment {
    font-style: italic;
    padding-left: 2rem;
    position: relative;
}

.concern__comment-icon {
    color: #8f8f8f;
    left: 0;
    position: absolute;
    top: 0;
}

/* Anliegen verfolgen */

.concern__list--observe .concern__list-item-icon.concern__list-item-icon--favorite {
    cursor: default;
}

.concern__list--observe .concern__counter {
    display: block;
    right: .625rem;
}

.concern__list--observe .concern__counter,
.concern__list--observe .liked .concern__counter,
.concern__list--observe .concern__list-item-icon--favorite:hover .concern__counter,
.concern__list--observe .liked.concern__list-item-icon--favorite:hover .concern__counter {
    color: #666;
}

/*
 * Foto Upload
 */

.concern__input {
    background: #fff;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: 1rem;
}

/*
 * Fehleranzeige
 */

.concern input.error,
.concern textarea.error {
    border: 2px solid #e00;
    color: #e00;
    padding: .137rem;
}

.concern span.error {
    border-radius: 5px;
    bottom: -0rem;
    color: #e00;
    line-height: 1.125rem;
    padding: .1rem 0 0 0;
    position: absolute;
    z-index: 2;
}

.concern__label--number span.error {
    bottom: 0;
    width: 12.5rem;
}

/*
 * Vorwort-Button und Vorwort
 */

 .concern__button--preface {
    background: none;
    border: none;
    color: #005b80;
    display: block;
    line-height: 1.5rem;
    margin-left: 0.33rem;
    overflow: hidden;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: -3.8rem;
    white-space: nowrap;
    width: 1.625rem;
}

.concern__button--preface:hover {
    color: hsl(197, 100%, 30%);
    text-decoration: none;
}

.concern__preface-wrapper {
    position: relative;
}

.concern__preface {
    font-size: .85rem;
    padding: 1.5rem;
}

.concern__heading--h3.accent-text {
    color: #005b80;
}

/*
 * Buttons am Seitenende
 */

.concern__button--primary {
    background: #005b80;
    border-color: #005b80;
    color: #fff;
}

.concern__button--primary:hover {
    background: hsl(197, 100%, 30%);
    border-color: hsl(197, 100%, 30%);

}

.concern__button--secondary {
    background: #ddd;
    border-color: #ddd;
    color: #464646;
}

.concern__button--secondary:hover {
    background: #fff;
    color: #000;
}

.concern__button {
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    font-size: 1rem;
    line-height: 1.2rem;
    padding: .75rem;
}

.concern__button:focus {
    outline: 1px dotted #000;
}

.concern__button-icon-wrapper {
    margin-right: .75rem;
    width: 2rem;
}

.concern__button-text-wrapper {
    display: block;
    padding-left: .75rem;
    width: 100%;
}

/* einzelner Button */

.concern__button-wrapper--single {
    display: flex;
    justify-content: flex-end;
}

.concern__button--single {
    align-items: center;
    display: flex;
}

/* mehrere Buttons in Reihe */

.concern__button-wrapper--row {
    display: flex;
    flex-flow: wrap;
}

.concern__button--row {
    align-items: center;
    display: flex;
    margin-bottom: .938rem;
    min-height: 3.938rem;
    width: 100%;
}

.concern__button--primary .concern__button-text-wrapper {
    padding-left: 0;
    padding-right: .75rem;
}

.concern__button--list.concern__button--primary .concern__button-text-wrapper {
    padding: .25rem .75rem .25rem 3rem;
    text-align: left;
}

/* Buttonliste Kategorien */

.concern__button--list {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin: 0 auto .625rem auto;
    position: relative;
    width: 100%;
}

.concern__link-case {
    background: #005b80;
    border-radius: 3px;
    font-weight: bold;
    padding: .125rem .625rem;
}

.concern__link-case:hover {
    background: hsl(197, 100%, 30%);
    text-decoration: none;
}

.concern .concern__link-case,
.concern .concern__link-case:hover {
    color: #fff;
}

/*
 * Anliegen verfolgen
 */

/* Filter */

.concern__label--filters {
    display: block;
    margin-bottom: .9375rem;
}

.concern__popup-wrapper {
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    width: 100%;
}

.concern__popup {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.1);
    margin: 2rem auto;
    padding: .9375rem;
    position: relative;
    width: 21.563rem;
    z-index: 3;
}

.concern__popup-info {
    display: flex;
    margin-bottom: 1px;
    padding-right: 4rem;
    position: relative;
}

.concern__category-icon--popup {
    margin-right: .9375rem;
    margin-top: .3125rem;
}

/*
 * Map Popup
 */

#Popup_close {
    right: 25px !important; top:35px !important;
}

.olPopup img {
    max-width : inherit !important;
}


.olPopup {
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)) !important;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2))!important;
    position: absolute;
}

.olPopup:after, .olPopup:before {
    border: solid transparent;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    width: 0;
}

.olPopup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.olPopup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.concern__popup{
    box-shadow: none  !important;
    margin: .1rem auto !important;
}

/*
 * ???
 */

.ui-widget,
.ui-widget .ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}

.ui-widget-content {
    background: #ffffff;
    border: 1px solid #dddddd;
    color: #333333;
}

.ui-widget-content a {
    color: #333333;
}

.ui-widget-header {
    background: #e9e9e9;
    border: 1px solid #dddddd;
    color: #333333;
    font-weight: bold;
}

.ui-widget-header a {
    color: #333333;
}

/*
 * Bildupload Spinner
 */

#cover-spin {
    background-color: rgba(255, 255, 255, 0.7);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#cover-spin::after {
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
    border-color: black;
    border-radius: 50%;
    border-style: solid;
    border-top-color: transparent;
    border-width: 4px;
    content: '';
    display: block;
    height: 40px;
    left: 48%;
    position: absolute;
    top: 40%;
    width: 40px;
}


/* ==========================================================================
   Media queries
   ========================================================================== */

@media only all and (min-width: 26.875em) {

    .concern {
    }

    .concern__position {
        display: flex;
        justify-content: space-between;
    }

    .check-street .concern__position {
        display: block;
    }

    .concern__label--street {
        padding-right: .9375rem;
    }

    .concern__label--number {
        flex-shrink: 0;
    }

    .concern__label--number span.error {
        bottom: auto;
        top: 3rem;
        width: 8.5rem;
    }

    .concern__label--personal-data,
    .concern__label--filters {
        display: flex;
    }

    .concern__label-text--counter,
    .concern__label-text--error {
        bottom: 0;
        left: 0;
        position: absolute;
    }

    .concern__description {
        display: block;
        padding-bottom: 1rem;
        position: relative;
    }

    .concern__label--personal-data {
        padding-bottom: .625rem;
    }

    .concern__label--personal-data .concern__label-text,
    .concern__label--filters .concern__label-text {
        padding-right: .3125rem;
        width: 33%;
    }

    .concern__input-wrapper--personal-data,
    .concern__input-wrapper--filters {
        width: 66%;
    }

    .concern__label--checkbox {
        margin-left: 33%;
    }

    .concern__button-wrapper--row {
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-right: -.75rem;
    }

    .concern__button--row {
        margin-bottom: 0;
        margin-right: .75rem;
        max-width: 33%;
    }

    .concern__button-wrapper--foto .concern__button--row {
        max-width: 48%;
    }

    .concern__button--list {
        width: 80%;
    }
}

@media only all and (min-width: 28.125em) {
    .concern__description .input-comment-m {
        height: 4rem;
    }

    .concern__button-wrapper--row {
        flex-direction: row-reverse;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-right: -.75rem;
    }

    .concern__button--row {
        margin-bottom: 0;
        margin-right: .75rem;
        max-width: 33%;
    }
}

@media only screen and (max-width: 53.125em) {
    .mapDynamiCls {
        width: 98% !important;
    }
}