/* ========================================================================================
   anliegenmanagement.css: CSS fuer Anliegenmanagement-Miniweb
   ======================================================================================== */

/*
 * Akzentfarbe Hintergruende
 */

#binding .header,
.accent,
.az-active:hover,
.az-choosen,
#ui-datepicker-div  td .ui-state-active,
#ui-datepicker-div  td .ui-state-hover {
	background: #0092bc;
}

/*
 * Akzentfarbe Textlinks
 */

a,
.accent-text,
.carousel-btn:hover,
.service-login:hover,
.service-login-active,
.service-menu-link:hover,
.service-menu-link-active:hover,
.main-menu-link:hover,
.main-menu-link-active,
.main-menu-link-active:hover,
.box-linked .link,
.box-linked .headline,
.az-active,
.accordion dt,
.expand h4,
#binding .ui-widget-header a,
#binding .ui-accordion h3 {
	color: rgb(0, 128, 165);
}

/*
 * TdoT Suche
 */

.tdot /* Container, der die gesamte Suche enthaelt  */{
    font-size: .9rem;
}

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

.tdot input.active,
.tdot select.active,
.tdot textarea.active {
    border: 2px solid #0092bc;
}

.tdot input[type="search"] {
    box-sizing: border-box;
}

.tdot .island {
    padding: .9375rem .6215rem;
}

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

.tdot__heading--h3 {
    font-size: 1rem;
    margin-bottom: .625rem;
    font-weight: normal;
}

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

.filter__detail .filter__group:first-child {
    margin-bottom: 1.75rem;
}

.control__label {
    display: block;
    margin-bottom: 1rem;
}

.control__label--switch {
    position: relative;
    width: 9rem;
    height: 2rem;
}

/* An-Aus-Schalter */

.switch__input {
    display: none;
}

.switch__slider {    /* Grundfläche */
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 3.2rem;
    height: 1.6rem;
    background-color: #8f8f8f; /* inaktiv */
    border-radius: .8rem;
    transition: all .3s ease-in-out;
}

.switch__slider:before {  /* verschiebbarer Button */
    position: absolute;
    content: "";
    height: 1.2rem;
    width: 1.2rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background-color: white;
    border-radius: 50%;
    transition: all .3s ease-in-out;
}

.switch__input:checked + .switch__slider {
    background-color: #0092bc; /* aktiv */
}

.switch__input:checked + .switch__slider:before {
    transform: translateX(1.5rem);
}

.switch__label-text {
    display: inline-block;
    margin-left: 4rem;
    height: 1.6rem;
}

.filter__detail {
    display: none;
    background: #ddd;
    padding: 1rem .5rem;
}

.filter__heading {
    cursor: pointer;
    position: relative;
    font-size: .9rem;
    padding: .375rem 3rem .375rem 1rem ;
    background: #ddd;
    width: 100%;
}

/*
 * Filter-Button
 */

.button {
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1rem;
    padding: .75rem;
}

.button-wrapper {
    padding: .5rem .5rem 1rem .5rem;
    display: flex;
    justify-content: space-between;
}

.button--filter,
.button--filter-delete {
    position: relative;
    cursor: pointer;
}

.button--filter {
    flex-grow: 2;
}

.button--filter-delete {
    margin-left: 1rem;
    width: 3rem;
    line-height: 1rem;
}

.button--filter-delete.button--primary.inactive {
    border-color: #ccc;
    background: #ccc;
    cursor: default;
    pointer-events: none;
}

.button--primary {
    border-color: #0092bc;
    background: #0092bc;
    color: #fff;
}

.button--primary:hover {
    border-color: #00b3d3;
    background: #00b3d3;
}

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

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

.button__text-wrapper {
    padding-right: 2rem;
    width: 100%;
    display: block;
}

.filter__detail .filter__group:last-child {
    display: flex;
    align-content: space-between;
}

.filter__detail .filter__group:last-child .filter__group-item--1 {
    width: 7.5rem;
    margin-right: 2rem;
    flex-shrink: 0;
}

.filter__detail .filter__group:last-child .filter__group-item--2 {
}

/* Rahmen Icon */

.button__icon {
	width: 1.375rem;
	height: 1.375rem;
}

.button__icon--control {
    display: inline-block;
    position: absolute;
    fill: white;
    top: 25%;
    right: .5rem;
}

.button__icon--delete {
    position: relative;
    display: inline-block;
    fill: white;
}



/*
 * Veranstaltungen Ausgabe
 */

/* Counter */

.event__counter-wrapper {
    text-align: center;
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    background: #8f8f8f;
    border-top: 2px solid #fff;
    color: #fff;
}

/* Content-Elemente volle Breite */

.event__counter-wrapper,
.event-list__item-heading,
.marker-list,
.event__text {
    padding-left: .5rem;
    padding-right: .5rem;
}

.event-list__item {
    position: relative;
}

/* Veranstaltung Ueberschirft */

.event-list__item-heading--pre {
    display: block;
    border-bottom: 2px solid #fff;
    font-size: 1rem;
    margin-bottom: .375rem;
}

.event-list__item-heading {
    font-size: 1.5rem;
    line-height: 1.8rem;
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-bottom: 0;
    font-weight: normal;
    color: #fff;
    background: #0092bc;
    position: relative;
    cursor: pointer;
}

.event-list__item-heading:hover {
    background: #00b3d3;
}

.button__detail {
    position: relative;
    display: block;
    padding-left: 2rem;
    margin-top: .5rem;
    border-top: 2px solid #fff;
}

.button__detail--openclose {
    top: .35rem;
    left: 0;
    width: 1.375rem;
    height: 1.375rem;
    fill: white;
}

.button__detail-text {
    font-size: 1rem;
}

.button__detail-text--close::before {
    content: 'Mehr Infos anzeigen';
}

.button__detail-text--open::before {
    content: 'Weniger Infos anzeigen';
}

.favorite__icon-wrapper {
    position: relative;
    height: 0;
}

.event__bookmark-menu {
    list-style-type: none;
    text-align: right;
    margin-bottom: 0px;
}

.event__bookmark-item {
    display: inline;
    margin-left: 15px;
}

.event__bookmark-link {
    cursor: pointer;
}

.event__bookmark-link:hover {
    text-decoration: none;
    color: #00b3d3;
}

/* Icon-Liste */

.marker-list {
    display: flex;
    margin-top: .5rem;
    margin-right: 2.5rem;
    margin-bottom: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.marker__icon-wrapper {
    width: 3rem;
    height: 2rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    background: #fff;
    position: relative;
    border: 2px solid #666;
    border-radius: 5px;
    color: #666;
    font-weight: bold;
    font-size: .75rem;
    display: inline-block;
}

.control__label--switch .marker__icon-wrapper {
    margin-left: 4rem;
    margin-top: -.125rem;
}

.marker__icon-wrapper:last-child {
    margin-right: 0;
}

.marker__icon-wrapper--new {
    text-align: center;
    font-size: 1rem;
    line-height: 1.625rem;
}

/* Icons */
.marker__icon {
    fill: currentColor;
}

.marker__icon-wrapper--accessibility {
    position: absolute;
    top: .125rem;
    left: .625rem;
    width: 1.5rem;
    height: 1.5rem;
}

.marker__icon-wrapper--accessibility-wc {
    position: absolute;
    top: .25rem;
    left: .125rem;
    width: 1.25rem;
    height: 1.25rem;
}

.marker__icon-wrapper--accessibility-p {
    position: absolute;
    top: .25rem;
    left: .375rem;
    width: 1.25rem;
    height: 1.25rem;
}

.marker__icon-wrapper--childcare {
    position: absolute;
    top: .125rem;
    left: .625rem;
    width: 1.5rem;
    height: 1.5rem;
}

.marker__icon-wrapper--free {
    position: absolute;
    top: .125rem;
    left: .625rem;
    width: 1.5rem;
    height: 1.5rem;
}

.marker__icon-wrapper--ticket {
    position: absolute;
    top: .125rem;
    left: .5rem;
    width: 1.75rem;
    height: 1.563rem;
}

.marker__icon-decorator {
    position: absolute;
}

.marker__icon-decorator--accessibility-wc {
    right: 2px;
}

.marker__icon-decorator--accessibility-p {
    right: 5px;
}

/* Toggle Oeffnungszeiten oben und Veranstaltungsdetails */

.event--close__openinghours {
    display: block;
}

.event--open__openinghours .openinghours-list {
    margin-right: 2.5rem;
}


.event--open__openinghours {
    display: none;
}

.event__detail {
    display: none;
}

/* Veranstaltung Fliesstext */

.event__text {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.event__text ul {
    padding-top: 1rem;
    padding-left: 1.75rem;
    list-style: disc;
}

.event__text li {
    padding-left: .75rem;
}

.link-wrapper /* Website Link */ {
    margin: 1rem 0 .5rem 2.5rem;
}

/* Veranstaltung Oeffnungszeiten und Adresse */
.event__date-wrapper {
    position: relative;
}

.event__date-wrapper,
.event__date-wrapper--top {
    border-top: 2px solid #fff;
}

.openinghours-list__item-label {
    display: inline-block;
    line-height: 1.2rem;
    padding-left: .5rem;
    padding-right: .5rem;
    color: #fff;
    background: #e00;
    border-radius: 3px;
    margin-left: 0.5rem;
}

/* Listen Icons, Verantaltungen, Oeffnungszeiten */

.marker-list,
.event-list,
.openinghours-list {
    list-style: none;
}

/* mit vorgestelltem Icon */

.link-wrapper,
.openinghours-list,
.event__adress-wrapper {
    margin-left: 2.5rem;
    position: relative;
}


/* Adressblock */

.event__adress {
    margin-bottom: .5rem;
}

/* VGN-Link */

.link--icon {
    display: inline-block;
    position: relative;
    padding: .375rem .375rem .375rem 2.5rem;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    border-color: #0080a5;
}

.link--icon:hover {
    border-color: #00b3d3;
    text-decoration: none;
    color: #00b3d3;
}

.svg-icon {
    position: absolute;
}

.svg-icon--clock {
    top: 1.1rem;
    left: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    fill: rgb(102, 102, 102);
}

.svg-icon--address {
    top: .125rem;
    left: -2.5rem;
    width: 1.5rem;
    height: 2rem;
    fill: rgb(102, 102, 102);
}

.svg-icon--external {
    top: .5rem;
    left: .5rem;
    width: 20px;
    height: 18px;
    fill: #0080a5;
}

.link--icon:hover > .svg-icon--external {
    fill: #00b3d3;
}

.svg-icon--favorite {
    top: .5rem;
    right: .5rem;
    width: 1.375rem;
    height: 1.25rem;
    cursor: pointer;
    z-index: 100;
}

.favorite__icon-wrapper--inactive > .svg-icon--favorite {
    fill:rgb(206, 206, 206);
}

.favorite__icon-wrapper--active > .svg-icon--favorite {
    fill: #0080a5;
}

.favorite__icon-wrapper:hover.favorite__icon-wrapper--inactive > .svg-icon--favorite,
.favorite__icon-wrapper:hover.favorite__icon-wrapper--active > .svg-icon--favorite {
    fill: #00b3d3;
}

/*
 * Login, Registrieren Modals
 * Grundlegendes css befindet sich in der bootstrap.custom.css. Einige Anpassungen waren
 * allerdings noch nötig.
 */
.modal-dialog label {
    display: inline-block;
    width: 30%;
}

.modal-dialog input {
    width: 55%;
}



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

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

    .tdot {
        font-size: .9rem;
    }

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

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

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

    .tdot .island {
        padding: 1rem;
    }

    .button-wrapper {
        padding: .5rem 1rem 1rem 12rem;
    }

    .button__text-wrapper {
        width: auto;
        margin-right: .5rem;
        display: inline-block;
    }

    .button__icon--control {
        right: 1rem;
    }

        .filter__group {
        display: flex;
        align-content: flex-start;
    }

    .filter__detail .filter__group:first-child {
        border-bottom: 2px solid #fff;
        margin-bottom: 1.5rem;
    }

    .filter__group-item--1,
    .filter__detail .filter__group:last-child .filter__group-item--1 {
        width: 9rem;
        margin-right: 2rem;
        flex-shrink: 0;
    }

    .filter__group-item--2,
    .filter__detail .filter__group:last-child .filter__group-item--2 {
        width: 100%;
    }

    .control__label--input {
        display: flex;
    }

    .control__label--input .control__label-text {
        width: 11rem;
        flex-shrink: 0;
        padding-right: .375rem;
    }

    .control__input-wrapper {
        width: 100%;
        position: relative;
    }

    /* Reset Button für Suchfeld */
    .control__reset-btn {
        position: absolute;
        top: 1px;
        right: 0.5rem;
        color: #0092bc;
    }

    .event-list__item {
        background: #efefef;
    }

    .event__counter-wrapper,
    .event-list__item-heading,
    .event__text {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .marker-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .event__text {
        background: #efefef;
    }

}