.go-up-btn {
    background-color: forestgreen;
    width: 3em;
    height: 3em;
    text-align: center;
    border-radius: 22px;
    color: white;
    position: sticky;
    bottom: 3em;
    left: 92%;
    cursor: pointer;
    border: none;
    display: none;
}

.plink-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .plink-tooltip .tooltiptext {
        font-weight: normal;
        font-size: 0.7em;
        visibility: hidden;
        width: 15em;
        background-color: rgb(110 110 110);
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 150%;
        left: 50%;
        margin-left: -60px;
    }

        .plink-tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 25%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent rgb(110 110 110) transparent;
        }

    .plink-tooltip:hover .tooltiptext {
        visibility: visible;
    }


/*Style for About-View*/
/*thanks to w3s*/

.partner-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.flip-card {
    margin: 1.5em;
    background-color: transparent;
    width: 320px;
    height: 320px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #fff;
    color: black;
}

    .flip-card-front > img {
        margin-top: 30%;
    }

.flip-card-back {
    background-color: #e75712; /*labw: #ffcc00*/
    color: white;
    transform: rotateY(180deg);
}

    .flip-card-back a {
        color: #fff;
        text-decoration: underline;
    }

        .flip-card-back a:hover {
            font-weight: bolder;
        }

#about-labw-card {
    background-color: #ffcc00;
    color: rgb(35, 32, 32);
}

#about-zdv-card {
    background-color: #a51e37;
}


/* new Style for Home/Index */

/* may be put a banner on the main page??.. Decide later*/


/*av-container is used in layout and applied to the rendered page, cause the default setting with max with were my way...
*/
.av-container {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.av-overview-container {
    display: flex;
    flex-flow: row wrap;
    /*justify-content: space-around;*/
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}


@media(min-width: 720px) {
    .av-overview-container {
        margin-left: 0.5em;
    }

    .av-item {
        max-width: 30%;
        flex: 1 2 20em;
        box-shadow: 4.2px 8.3px 8.3px hsl(0deg 0% 0% / 0.37);
    }

    .overview-item {
        max-width: 30%;
        flex: 1 2 20em;
        box-shadow: 4.2px 8.3px 8.3px hsl(0deg 0% 0% / 0.37);
    }
}


.av-item {
    padding: 1em;
    width: 100%;
    max-height: 35rem;
    display: flex;
    background-color: #fff; /*#363538;*/
    /*border-radius: 0.25rem;*/
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4.2px 8.3px 8.3px hsl(0deg 0% 0% / 0.27);
}

.av-thumb {
    display: flex;
    background-color: gray;
    align-self: center;
    max-height: 180px;
    position: relative; /*neu*/
}

.av-img-thumbnail {
    max-height: 180px; /*fix for 4:3 image thumbnail.. */
}

/* class: neu*/
.av-img-overlay-symbol {
    position: absolute;
    width: 7em;
    height: auto;
    top: 0em;
    right: 0em;
    background-color: aqua;
    z-index: 100;
}

.avp-zdv-info {
    font-weight: lighter;
    font-size: 13px;
}

.av-foreign-ids {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 20px;
    font-size: 0.9rem;
}

    .av-foreign-ids > div {
        display: flex;
        align-self: baseline;
        padding: 0.2rem;
    }


.av-description-short {
    padding: 1.5rem;
}


.av-title {
    font-size: 1rem;
    font-weight: bolder;
    height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.av-down-btn {
    color: white;
    background-color: #408697;
    width: 30%;
    padding: 0.5em 1em 0.5em 1em;
    border: none;
}

    .av-down-btn:hover {
        /* background-color: #52d6f4;*/
        font-weight: bolder;
        color: #fff;
    }


.media-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .media-tooltip .tooltiptext {
        position: absolute;
        visibility: hidden;
        width: 200px;
        background-color: rgb(65 132 149 / 0.95); /*temporary accent color #408697*/
        color: whitesmoke;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -25px;
    }

        .media-tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 20%;
            margin-left: -20px;
            border-width: 5px;
            border-style: solid;
            border-color: black transparent transparent transparent;
        }

    .media-tooltip:hover .tooltiptext {
        visibility: visible;
    }

/*For Metadata on the Preview Page*/
.button-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.button-container-item {
    /*display: inline;*/
    background-color: #e9e9ed;
    margin: 0.2em;
    height: 3em;
    width: 12em;
    padding: 0.2em 1em 0.2em 1em;
    align-content: center;
    border-radius: 3px;
    font-weight: 600;
    color: #076d84;
    text-shadow: 1px 1px white;
}

    .button-container-item:hover {
        background-color: #1ca9c9;
        color: white;
        text-shadow: none;
    }

@media(max-width: 1100px) {
    .button-container {
        flex-direction: column;
        width: 60%;
    }

    .button-container-item {
        width: 100%;
    }
}

.meta-data-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
    padding-left: 0;
    align-content: flex-start;
}

    .meta-data-list > li {
        min-width: 10em;
        display: flex;
        flex: 1 2 20em;
        padding: 0.5em;
    }

.download-btn {
    border: none;
    padding: 1em;
}

.meta-data-details {
    width: 90%;
}

.meta-data-summary {
    background-color: lightgray;
    padding: 1em;
    margin: 0.5em auto 0.5em auto;
}

    .meta-data-summary > * {
        display: inline;
    }
/* buttons for viewing PBCore file or copying playlist link*/
.av-btn {
    padding: 0.4em;
    width: 100%;
    font-size: 13px;
    border: none;
    margin: 0.2em;
}

/* for AVPortal2 view*/
.category-title {
    width: 95%;
    color: dimgray;
    margin-top: 1.7em;
    margin-bottom: 1em;
    border-bottom: solid 1px;
    padding-bottom: 0.3em;
    padding-left: 0.2em;
}
/* ___________________ */
.beta-banner {
    background: linear-gradient(100deg, #FC466B 0%, orange 100%);
    width: 100%;
    padding: 1em 2em 1em 2em;
    color: white;
    border-radius: 5px;
    border-bottom-right-radius: 80%;
    font-size: 1.2em
}

.beta-banner-container {
    background-color: #2a4676;
    width: 95%;
    border-radius: 10px;
}


.olderNews {
    color: white;
    text-decoration-line: underline;
}

/*----history-banner-and-changelogs---*/

.beta-banner-history {
    background-color: #F8F8FF;
    width: 100%;
    padding: 1em 2em 1em 2em;
    color: black;
    border-radius: 5px;
    border-bottom-right-radius: 100%;
    font-size: 1.2em;
    font-family: "Courier New";
}

.beta-banner-history-container {
    background-color: Lavender;
    width: 100%;
    border-radius: 10px;
    border: double 3px black;
}

/*news style*/
.state-menu {
    min-width: 19em;
    width: 19em;
    max-width: 19em;
    border: 2px solid darkgrey;
    padding: 0.3em 0 0.3em 0.2em;
    margin-top: 0.4em;
    margin-left: -0.3em;
    margin-bottom: 0.3em;
    overflow: visible;
    border-radius: 3px;
}

    .state-menu > button {
        min-width: 2em;
        border-radius: 2px;
        border: none;
    }

    .state-menu button:hover {
        background-color: #acacfb !important;
    }

/*News-Legende-Style*/
.legende-symbol {
    min-width: 2em;
    width: 2em;
    border-radius: 2px;
    border: none;
    background-color: lightgray;
    padding: 0.3em 0 0.3em 0.2em;
    margin-bottom: 0.2em;
    display: inline-block;
}

.legende-text {
    display: inline-block;
    padding: 0.3em 0 0.3em 0.2em;
}

/*News-Button Einfügebutton Style*/

.news-button-style {
    margin: 0em;
    padding: 1em;
    border-radius: 5px;
    border: double 3px black;
}

    .news-button-style:hover {
        background-color: #acacfb !important;
    }

.disclaimer-box {
    background-size: 3em 3em;
    background-color: #1ca9c9;
    opacity: 1;
    color: white;
    text-shadow: 0px 0px 3px #043b478b;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.05em;
    padding: 2em;
}

.urls-container {
    margin-top: 1em;
}
/*ul containing links*/
.url-list {
    list-style: none;
}

    .url-list > li {
        margin-left: -2.2em;
        margin-top: 0.3em;
        background-color: #1ca9c9;
        border-radius: 3px;
        padding: 0.5em;
    }

.url-label {
    font-weight: bolder;
    padding-bottom: 0.3em;
    color: white;
    text-shadow: 0px 0px 3px #043b478b;
}

.address {
    background-color: #127f98ca;
    padding: 0.3em;
    border-radius: 3px;
    color: #e4faff;
    text-shadow: 0px 0px 2px #01111572;
    font-weight: 600;
    position: relative;
}

.copy-btn {
    border-radius: 3px;
    border: none;
    right: 0.5em;
    position: absolute;
    background-color: inherit;
    color: inherit;
}

/*to do tooltip for copy/copied notification */
.copytooltip {
}