/**
 * Theme Name: rpi-Materialpool Blocksy Child Theme
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

#less-button {
    display: none;
}

#tnp-1 {
    border: 1px solid #0072AA;
}

.clear {
    clear: both;
    width: 100%;
}

.mobile {
    display: none;
}

.material-grid-layout {
    display: grid;
    align-content: space-around;
    grid-gap: 30px;
}

.sidebar {
    position: absolute;
    z-index: 2;
    background-color: #fff;
    display: none;
    width: 300px !important;
    border: 1px solid #ddd;
    box-shadow: 2px 1px 12px 2px aliceblue;
    padding: 0 20px 0 20px;
}

.loading-icon{
    display: none;
    position: fixed;
    z-index: 1000;
    bottom: 75px;
    right: 75px;
    height: 70px;
    width: 70px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .8)
                url('/wp-content/themes/rw_materialpool-blocksy-theme/assets/Loading_icon.gif') 10px no-repeat;
    background-size: 50px;
}
body.loading .loading-icon{
    overflow: hidden;
}
body.loading .loading-icon{
    display: block;
}

.material-filter-button{
    width: fit-content;
    grid-column: 2;
}
.material-filter-button button {
    color: white;
    background-color: #e4301c;
    width: 110px;
    padding: 10px 20px;
    border-radius: 3px;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center;
    margin-top: 30px;
}

.facetwp-search {
    background-color: #fff !important;
    border: 2px solid #e4301c !important;
    margin: 30px 0 0 0 !important;
    min-width: unset !important;
    width: 100% !important;
}

.facetwp-selections li{
    background-color: #0072aa;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: bold;
    margin: 5px;
}

.facetwp-selections li:hover{
    background-color: var(--linkHoverColor);
    cursor: pointer;
}

.info-button button {
    background-color: grey;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: none;
}

.frontpage-search-container{
    background: linear-gradient(90deg, #3A8BC3, #3A8CC0, #3A8BC3 100%);
    padding: 20px 0 50px;
    margin: 20px 20px;
}

.frontpage-search{
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}
.frontpage-search div{
    flex: auto;
}
.frontpage-search-field.search{
    min-width: 250px;
    width: 30%;
    background-color: #ddd;
    border: 2px solid #e4301c!important;
    margin-right: 10px;
    box-shadow: 2px 2px 6px #000;
}
.frontpage-search-field.search:focus,select.frontpage-search-field:focus {
    background-color: #fff;
}
select.frontpage-search-field{
    min-width: 170px;
    width: 30%;
    border: 2px solid #e4301c!important;
    background-color: #ddd;
    box-shadow: 2px 2px 6px #000;

}
.frontpage-search-field.material-filter-button{
    width: 90px;
    background-color: #e4301c!important;
    margin-left: 10px;
    box-shadow: 2px 2px 6px #000;
    border: 2px solid #e4301c!important;
}
.frontpage-search-field.material-filter-button:hover{
    background-color: #fff!important;
    color:#e4301c;
    box-shadow: 1px 1px 4px #000;
}

.frontpage-themenliste{
    display: flex;
    flex-wrap: wrap;
}
.frontpage-themenliste a {
    flex: auto;
    margin: 3px;
}

.home-page-show-more{
   text-align: center;
}
.home-page-show-more a{
    border-radius: 50%;
    height: 135px;
    background-color: #e4301c;
    box-shadow: 1px 5px 20px 5px #aaa !important;
    border: 2px solid white;
    font-size: large;
}
.home-page-show-more a:hover{
    background-color: white ;
    border: 2px solid #e4301c;
    color: #e4301c;
}

.material-suche{
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-gap: 10px;
}

.material-detail-grid {
    display: grid;
    grid-template-areas:    "snapshot snapshot snapshot origin"
                            "snapshot snapshot snapshot meta"
                            "desc desc desc meta"
                            "links links links links"
                            "children children children children";
    grid-gap: 50px;
    margin-top: 30px;
}

.autor-detail-grid, .organisation-detail-grid {
    display: grid;
    grid-template-areas:    "title"
                            "search"
                            "material";
}

.organisation-detail-grid h1 {
    text-align: center;
}

.organisation-title{
    grid-area: title;
}

.detail-organisation-header, .detail-autor-header {
    display: grid;
    grid-template-areas:    "cover name" "tabdetail tabdetail" "tabs tabs";
    grid-template-columns: 30% 70%;
    background-image: linear-gradient(to top left, white, #0072aa, #388BC2, white);
    text-align: center;
    color: white;
}

.detail-autor-header a, .detail-organisation-header a {
    color: white;
}

.detail-autor-header a:hover, .detail-organisation-header a:hover {
    color: #e4301c;
}

.autor-header-tabs, .organisation-header-tabs {
    grid-area: tabs;
    display: flex;
    background: #0072aa;
    border-top: 2px solid #2872fa;
    border-bottom: 2px solid #2872fa;

    font-size: 1.2em;

    box-shadow: 2px -27px 30px rgba(250, 250, 250, 0.3);

}

.header-tab {
    margin: 2px 10px;
    background: unset;
    color: white;
    border-top: 2px solid #0072aa;
}

.header-tab:hover {
    border-top: 2px solid white
}

.detail-autor-meta.desktop {
    border-top: 2px solid #0072aa;
    margin: 5px 10px;
    color: lightgrey;
    width: 100%;
    text-align: right;
}

@media (max-width: 800px) {
    .material-detail-grid {
        grid-template-areas:    "snapshot"
                                "origin"
                                "desc"
                                "meta"
                                "links"
                                "children";

    }
    
    .organisation-author .detail-organisation-author {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: unset;
    }

    .info-button button {
        display: block;
    }

    .autor-name h4, .organisation-name h4 {
        font-size: 1.5em !important;
    }
    .detail-organisation-header, .detail-autor-header {
        grid-template-columns: unset;
    }
    .material-suche{
        display: flex;
    }

    .frontpage-search div{
        display: none;
    }
    .frontpage-search-field.search{
        min-width: 99%;
    }
    select.frontpage-search-field{
        width: auto;
        max-width: 66%;
        margin: 0;
    }
    .frontpage-search-field.material-filter-button {
        max-height: 40px;
        max-width: 34%;
        min-width: 33%;
        margin: 0;
        padding: 2px 5px;
    }
    .frontpage-search-container{
        margin: 0  20px;
        padding: 0px 0 5px;
        background: none;
    }
}

.detail-element {
    display: table-cell;
}

.material-detail-grid .detail-snapshot {
    grid-area: snapshot;
}

.material-detail-grid .normal-cover {
    /* background: url('/wp-content/themes/rw_materialpool-blocksy-theme/assets/material-hintergund.jpg'); */
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    text-align: center;
    background-color: rgba(0, 115, 170, 0.15);

}

.material-detail-grid .normal-cover img {
    width: 60%;
    margin: 20px 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 3px solid #fff;
    box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.8);
}

.material-detail-grid .special-cover {
    padding: 0;
    margin: 30px 0 50px;
}

.material-detail-grid .detail-cover-source,
.material-detail-grid .special-cover p,
.autor-detail-grid .autor-image {
    text-align: end;
    font-style: italic;
    font-size: small;

}

.material-detail-grid .detail-snapshot-footer {
    margin-top: 20px;
}

.material-detail-grid .detail-origin {
    grid-area: origin;
}

.material-detail-grid .detail-origin .detail-herkunft-organisation {
    text-align: center;
    background: #ddd;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.detail-herkunft-organisation .materialpool-template-material-organisation {
}

.material-detail-grid .detail-origin .detail-herkunft-organisation .materialpool-template-material-organisation-logo {
    max-height: 100px;
    width: fit-content;
    background-position: center;
    margin: auto;
}

.detail-herkunft-organisation .materialpool-template-material-organisation-logo img {
    max-height: 100px;

}

.material-detail-grid .detail-origin .detail-herkunft-author,
.organisation-author .detail-organisation-author {
    align-items: center;
    text-align: center;
}

.detail-herkunft-single-author {
    display: inline-table;
    margin: 0 20px;
    min-width: 130px;
}


.detail-herkunft-author .materialpool-template-material-autor-logo,
.detail-organisation-author .materialpool-template-material-autor-logo {
    height: 75px;
    width: 75px;
    border-radius: 50%;
    background-size: cover;
    display: inline-block;
    margin-right: 5px;
}

.detail-origin .detail-parent {
    background: #ddd;
    padding: 10px 0;
    border-radius: 10px;
    text-align: center;
    margin-top: 10px;
}

.material-detail-grid .detail-short-desc {
    font-size: large;
}

.material-detail-grid .detail-desc {
    grid-area: desc;
}

.material-detail-grid .detail-desc .description {
    margin-bottom: 20px;
    overflow: hidden;
}


.material-detail-grid .detail-desc .description-long {
    transition: max-height 1s ease-in-out;
    max-height: 5000px !important;
    overflow: visible;
}


.material-detail-grid .detail-desc .description-short {
    max-height: 100px;
}


.detail-desc .cta-button, .detail-organisation-header .cta-button {
    width: 49%;
}
.detail-access-buttons{
    display: inline-flex;
}

.material-detail-grid .detail-desc .description-footer {
    text-align: end;
    font-style: italic;
    font-size: small;
}

.material-detail-grid .detail-meta {
    grid-area: meta;
    /*    width: min-content; */
}

.material-detail-grid .detail-links {
    grid-area: links;
}

.material-detail-grid .detail-children {
    grid-area: children;
}

.detail-autor-header .autor-cover, .detail-organisation-header .organisation-cover {
    grid-area: cover;
    display: flex;
    align-items: center;
    width: 100%;
    height: 200px;
    margin: 10px 0;
}

.autor-cover-container, .organisation-cover-container, .organisation-cover h2 {
    height: fit-content;
    width: fit-content;
    margin: auto !important;
}

.autor-cover img, .organisation-cover img {
    max-height: 200px;
    box-shadow: 2px 2px 11px black;
    border: 1px solid #ccc;
}

.autor-cover a {
    display: block;
    width: 100%;
    margin-top: -20px;
}

.detail-autor-header .autor-name, .detail-organisation-header .organisation-name {
    grid-area: name;
    margin: auto 5px;
    text-align: start;
}

.autor-name h4, .organisation-name h4 {
    font-size: 2.5em;
    color: white !important;
    margin: unset;
    font-weight: normal !important;
}

.autor-award {
    width: 36px;
    height: 36px;
    filter: invert();
}

.detail-autor-header .detail-autor-header-detail {
    grid-area: detail;
    width: 100%;
    text-align: center;
}

.detail-autor-organisation, .organisation-author {
    grid-area: tabdetail;
    display: none;
}

.header-tab.active {
    border-top: 2px solid #e4301c;
}

.detail-autor-organisation .materialpool-template-material-organisation-logo {
    width: 200px;
    margin: auto;
    background-position: center;
}

.detail-autor-spacer {
    margin: 40px 40px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.accent {
    background: #999999;
    border-radius: 15px;
}

.detail-autor-badge {
    margin: 5px;
    font-size: medium;
}

.tooltip-badge {
    border: unset !important;
}

.detail-autor-search, .detail-organisation-search {
    grid-area: search;
}

.detail-autor-search .entry-title, .detail-organisation-search .entry-title {
    text-align: center;
}

.detail-autor-material, .detail-organisation-material {
    grid-area: material;
}


.organisation-info {
    width: 100%;
    grid-area: cover;
    margin: 20px 0;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.organisation-detail-grid .organisation-cover {
    text-align: center;
    width: 100%;
    padding: 10px;
}


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

.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}
.alpikatooltip{
    width: 250px !important;
    margin-left: -125px !important;
    background: linear-gradient(184deg, rgba(59,67,71,1) 1%, rgba(135,175,216,1) 70%, rgba(153,212,249,1) 100%) !important;
    box-shadow: 7px 6px 13px #0000008a;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.ct-comment-inner {
    border: 1px solid #ddd;
}


.ct-comment-meta{
    display: grid;
    grid-template-areas:    "image-container comment-author"
                            "image-container comment-meta-data";
    grid-template-columns: 100px;
    grid-gap: 10px;
    background-color: #ddd;
    color:unset;
}
.ct-comment-meta a{
    color: revert;
    background-color: #ddd;
}
.ct-image-container{
    grid-area: image-container;
    width: 75px !important;
    height: 75px !important;
    margin: auto;
    border-radius: 50%;
    border: 1px solid lightsteelblue;
}
.ct-comment-author{
    grid-area: comment-author;
}
.ct-comment-meta-data{
    grid-area: comment-meta-data;
}
.ct-comment-content {
    padding: 10px;
    background: white;
}