@import "variables.css";

.accordion {
    background-color: var(--accordion-background-color);
    font: var(--accordion-font);
    color: var(--accordion-color);
    /*border-radius: var(--border-radius) !important;*/
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    border-top: var(--accordion-border);
    border-bottom: var(--accordion-border);
    border-radius: 5px;
    text-align: left;
    outline: none;
    transition: 0.4s;
    /*   box-shadow: var(--accordion-shadow);*/
    text-transform: uppercase;
}

.accordion.active {
    background-color: var(--accordion-active);
    color: var(--accordion-active-color);
}

.accordion:hover {
    background-color: var(--accordion-hover);
    color: var(--accordion-hover-color);
}

.accordion:after {
    font-family: FontAwesome;
    content: '\f107';
    color: var(--accordion-color);
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    font-family: FontAwesome;
    content: "\f106";
    color: var(--accordion-active-color);
}

.accordion:hover:after {
    color: var(--accordion-active-color);
}

.panel {
    padding: 20px;
    background-color: transparent;
}


/*Temporär*/
.info-hinweis-accordion {
    background-color: transparent;
    font: var(--accordion-font);
    font-size: 14px;
    color: var(--basic-font-color);
    font-weight: bold;
    padding: 0px;
    cursor: pointer;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
}

/*.info-hinweis-accordion.active {
    background-color: var(--accordion-active);
        color: var(--accordion-active-color);
}*/

/*.info-hinweis-accordion:hover {
    background-color: var(--accordion-hover);
        color: var(--accordion-hover-color);
}*/

.info-hinweis-accordion:after {
    font-family: FontAwesome;
    content: '\f107';
    color: var(--basic-font-color);
    float: right;
    margin-top: 2px;
    margin-left: 10px;
}

.info-hinweis-accordion.active:after {
    font-family: FontAwesome;
    content: "\f106";
    color: var(--basic-font-color);
}

.info-hinweis-accordion:hover:after {
    color: var(--basic-font-color);
}

.info-hinweis-accordion-panel {
    padding: 15px;
    background-color: var(--timeline-background-color);
    border: 2px solid var(--info-hinweis-accordion-color);
    border-radius: var(--border-radius);
    margin-top: 10px;
}