/* Algemene stijlen */
.banner {
    background-color: #f0f0f0;
}

.page-template-welstee-intranet {
    background-color: #f0f0f0;
    color: #686868;
}

.page-template-welstee-intranet .top-menu p{
    color: #fff;
    margin: 0;
    line-height: 38px;
}

.page-template-welstee-intranet .nav > li > a {
    padding: 20px 15px;
}

.page-template-welstee-intranettemplateslogin-page-php .nav > li > a{
    padding: 30px 15px;
}

.page-template-welstee-intranet h1{
    font-weight: 900;
    font-size: 54px;
    margin-bottom: 25px;
    color: #1d6775;
}

.welstee-content {
    padding-top: 100px;
}

/* Login Pagina */
.welstee-intranet-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.welstee-intranet-login .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.welstee-login {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    text-align: center;
}

.welstee-login .logo {
    display: inline-block;
    width: 177px;
    margin-bottom: 25px;
}

.welstee-login .logo a img {
    width: 100%;
    height: auto;
}

.welstee-login h2 {
    margin: 20px 0;
    font-size: 32px;
    font-weight: 900;
    color: #1d6775;
}

.welstee-login input {
    border: 1px solid #D1DBE3;
    border-radius: 5px;
}

/* Intranet Content */
.welstee-content-blok {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
}

.welstee-content-blok h2 {
    margin-bottom: 20px;
    font-size: 32px;
    font-weight: 900;
    color: #1d6775;
}

/* Polls */
.poll {
    margin-bottom: 20px;
    padding: 10px 0;
    border-radius: 5px;
    background-color: #fff;
}

.poll p {
    margin-bottom: 10px;
}

.poll strong {
    display: inline-block;
    margin: 10px 0;
}

.poll h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #B9968B;
}

.poll .vote-bar {
    width: 100%;
    height: 10px;
    margin-bottom: 5px;
    background-color: #eee;
    border-radius: 5px;
}

.poll .vote-bar .perc {
    height: 100%;
    background-color: #1d6775;
    border-radius: 5px;
}

/* Artikelen */
.welstee-article {
    display: block;
    position: relative;
    margin-bottom: 20px;
    transition: 0.3s ease;
}

.welstee-article.opvallen{
    background-color: #ffd288;
}

.welstee-article p {
    font-size: 20px;
    margin-bottom: 0;
    color: #000;
    transition: 0.3s ease;
}

.welstee-article span {
    color: #000;
    transition: 0.3s ease;
}

.welstee-article .thumb {
    aspect-ratio: 16/9;
}

.welstee-article .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-info {
    padding: 15px 0;
}

.welstee-article .round-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #B9968B;
    color: #fff;
    text-align: center;
    transition: 0.3s ease;
}

.welstee-article .round-btn i {
    font-size: 30px;
    line-height: 45px;
}

/* Hover effecten voor artikelen */
.welstee-article:hover {
    transition: 0.3s ease;
}

.welstee-article:hover p {
    color: #1d6775;
}

.welstee-article:hover .round-btn {
    background-color: #1d6775;
}

/* Flexbox aanpassingen voor rijen en kolommen */
.welstee-article .row {
    display: flex;
    flex-wrap: wrap;
}

.welstee-article [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welstee-article .row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* article overzicht */

.welstee-overzicht-article{
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
}

.welstee-overzicht-article a{
    color: #1d6775;
    transition: 0.3s ease all;
}

.welstee-overzicht-article a:hover{
    color: #B9968B;
    transition: 0.3s ease all;
}

.welstee-overzicht-article .interactions{
    border-top: 1px solid #B9968B;
    margin-top: 15px;
    padding-top: 5px;
}

.welstee-overzicht-article .thumb {
    aspect-ratio: 16/9;
    border-radius: 5px;
    overflow: hidden;
}

.welstee-overzicht-article .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.welstee-overzicht-article .info{
    padding: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.welstee-overzicht-article .info.opvallen{
    background-color: #ffd288;
}

.welstee-overzicht-article .info .date{
    display: inline-block;
    font-size: 14px;
    color: #1d6775;
    margin-bottom: 10px;
}

.welstee-overzicht-article .info h3 {
    margin-bottom: 20px;
    font-size: 20px;
    color: #1d6775;
}

.samenvatting {
    min-height: 170px;
    max-height: 170px; /* Beperk de hoogte van de samenvatting */
    overflow: hidden;
}

.samenvatting.expanded {
    max-height: none; /* Wanneer de samenvatting is uitgebreid, is de hoogte onbeperkt */
}

/* documentblokken */

.documentenblokken{
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
}

.documentenblokken > *{
    width: 100%;
}

.documentenblokken .col-xs-12{
    width: 100%;
    flex: 0 0 auto;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .documentenblokken .col-md-6{
        width: 50%;
        flex: 0 0 auto;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .documentenblokken .col-lg-4{
        width: 33.33333333%;
        flex: 0 0 auto;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .documentenblokken .col-xl-3{
        width: 25%;
        flex: 0 0 auto;
    }
}

.welstee-documentblok{
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
    text-align: left;
}

.welstee-documentblok h2 {
    margin: 20px 0;
    font-size: 20px;
    font-weight: 900;
    color: #1d6775;
}

.welstee-documentblok p a{
    color: #B9968B;
    transition: 0.3s ease all;
}

.welstee-documentblok p a:hover{
    color: #1d6775;
    transition: 0.3s ease all;
}

.welstee-documentblok .bestanden{
    padding-top: 20px;
}

.welstee-documentblok .bestanden .bestand a{
    color: #1d6775;
    transition: 0.3s ease all;
}

.welstee-documentblok .bestanden .bestand a:hover{
    color: #B9968B;
    transition: 0.3s ease all;
}

.toggle-files,
.toggle-links {
    line-height: 30px;
    font-size: 16px;
    display: block;
    margin: 10px auto;
    border: none;
    background-color: transparent;
    color: #000;
}

.toggle-files i,
.toggle-links i{
    color: #B9968B;
    font-size: 30px;
    margin-left: 5px;
}

/* docuemnten zoeken */

#search-form{
    position: relative;
    width: 100%;
}

#search-form #ajax-search-input{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 50vh;
    border: 1px solid #9DAFBD;
    padding: 10px;
}

#search-form button{
    position: absolute;
    height: 40px;
    width: 40px;
    z-index: 2;
    right: 0;
    top: 0;
    border: none;
    background-color: transparent;
    color: #9DAFBD;
    transition: 0.3s ease all;
}

#search-form button i{
    font-size: 20px;
}

#search-form button:hover{
    color: #B9968B;
    transition: 0.3s ease all;
}

#search-results{
    text-align: center;
}

#search-results .loading{
    padding: 20px;
    color: #1d6775;
}

/* paginalinks */

.pagina-items{
    position: relative;
}

.pagina-item{
    display: flex;
    flex-direction:column;
    justify-content:space-between;
    align-items: center;
    text-align: center;
    background-color: #1d6775;
    min-height: 300px;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
}

.pagina-item p,
.pagina-item h3{
    color: #fff;
}

.pagina-item h3{
    margin-bottom: 20px;
    font-weight: 700;
}

.pagina-item .btn{
    text-align: center;
}

.pagina-item.custom{
    padding: 0;
    align-items: center;
    background-color: #fff;
    overflow: hidden;
}

.pagina-item.custom .background{
    display: block;
    min-height: 300px;
    padding: 20px;
}

.pagina-item.custom p,
.pagina-item.custom h3{
    color: #1d6775;
}

.pagina-item.custom .background img{
    object-fit: contain;
    object-position: 50%;
    width: 100%;
    height: 100%;
}

/* smoelenboek */

.smoelenboek{
    position: relative;
}

.user-item{
    display: block;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 30px;
}

.user-item .user-bg{
    aspect-ratio: 1/1;
    position: relative;
}

.user-item .user-bg img{
    object-fit: cover;
    object-position: 50%;
    width: 100%;
    height: 100%;
}

.user-item .user-bg .overlay{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.user-item .user-bg .overlay .user-info{
    padding: 15px;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
}

.user-item .user-bg .overlay .user-info h4{
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

.user-item .user-bg .overlay .user-info span{
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

#user-filter-form{
    margin-bottom: 20px;
    display: inline-block;
    float: right;
}

#user-filter-form .form-group{
    margin-right: 20px;
}

/* kalender */

.maandblok{
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 30px;
    text-align: left;
}

.maandblok h2{
    margin: 20px 0;
    font-size: 32px;
    font-weight: 900;
    color: #1d6775;
}

/* Algemene styling */
.birthday-calendar {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

.birthday-calendar th {
    padding: 10px;
    background-color: #B9968B;
    color: #fff;
    text-align: center;
}

.birthday-calendar td {
    width: 14.28%;
    aspect-ratio: 1/1;
    padding: 5px;
    vertical-align: top;
    border: 1px solid #e0e0e0;
    text-align: center;
}

.birthday-names {
    font-size: 0.9em;
    color: #1d6775;
}

/* Desktopweergave */
.calendar-desktop {
    display: block;
}

/* Mobiele weergave */
.calendar-mobile {
    display: none;
}

.birthday-item {
    padding: 10px;
    border-bottom: 1px solid #B9968B;
}

/* Styling voor de huidige dag */
.current-day {
    background-color: #FFECB3; /* Gele achtergrond voor huidige dag */
    border: 1px solid #FFE082;
    color: #333;
    font-weight: bold;
}

/* Responsive styling voor mobiel */
@media (max-width: 576px) {
    .calendar-desktop {
        display: none;
    }

    .calendar-mobile {
        display: block;
    }

    .birthday-item {
        color: #1d6775;
        padding: 10px 0;
        font-size: 1em;
    }

    .birthday-item strong{
        color: #686868;
    }

    /* Huidige dag op mobiel */
    .calendar-mobile .current-day {
        background-color: #FFECB3;
        color: #333;
        font-weight: bold;
    }
}

/* comments */

.reacties{
    position: relative;
}

.reacties h2,
.reacties h3,
.reacties a{    
    color: #1d6775;
}

.reacties a:hover{
    color: #B9968B;
}

.comment-respond {
    padding: 15px;
    border-radius: 10px;
    background-color: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.comment-respond p {
    margin: 0;
}

.comment-respond .logged-in-as {
    margin-bottom: 15px;
}

.comment-respond label {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    line-height: 30px;
    color: #1d6775;
}

.comment-respond textarea {
    margin-bottom: 10px;
    width: 100%;
    padding: 5px 5px;
    border-radius: 5px;
    border: 1px solid #9DAFBD;
    transition: all 0.3s ease;
}

.comment-respond textarea:focus {
    border-color: #1d6775;
    box-shadow: none;
    outline: 0 none;
    transition: all 0.3s ease;
}

.comment-respond input[type="submit"],
.comment-respond #cancel-comment-reply-link {
    font-weight: bold;
    font-style: normal;
    font-size: 12px;
    line-height: 20px;
    border-radius: 5px;
    padding: 10px 25px;
    border-width: 2px;
    text-transform: uppercase;
    margin: 5px 0;
    border-style: solid;
    color: #ffffff;
    background-color: #1d6775;
    border-color: #1d6775;
    transition: all 0.3s ease;
}

.comment-respond input[type="submit"]:hover,
.comment-respond #cancel-comment-reply-link:hover {
    color: #1d6775;
    background-color: transparent;
    border-color: #1d6775;
    transition: all 0.3s ease;
}

.comment-respond #cancel-comment-reply-link {
    float: right;
}

.comments-list {
    list-style: none;
    display: block;
    padding: 0;
    margin-top: 15px;
}

.comments-list a {
    font-size: 12px;
    line-height: 18px;
}

@media (min-width: 992px) {
    .comments-list a {
        font-size: 16px;
        line-height: 30px;
    }
}

.comments-list .comment {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 30px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.comments-list .comment .comment-body {
    margin-bottom: 15px;
}

.comments-list .comment .comment-author.vcard {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: bold;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
}

@media (min-width: 992px) {
    .comments-list .comment .comment-author.vcard {
        font-size: 16px;
        line-height: 30px;
    }
}

.comments-list .comment .comment-author.vcard .says {
    margin-left: 15px;
    display: inline-block;
    font-family: "SangBleu Sunrise";
    font-weight: normal;
    font-style: italic;
    font-size: 12px;
    line-height: 18px;
}

@media (min-width: 992px) {
    .comments-list .comment .comment-author.vcard .says {
        font-size: 16px;
        line-height: 30px;
    }
}

.comments-list .comment .comment-author.vcard .avatar {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #ffffff;
    margin-right: 10px;
    border: 2px solid #1d6775;
    border-radius: 5px;
}

.comments-list .comment .comment-meta.commentmetadata {
    position: absolute;
    right: 15px;
    top: 15px;
}

.comments-list .comment .comment-respond {
    margin-left: 30px;
}

.comments-list .comment .children {
    margin-top: 15px;
    padding-left: 30px;
    list-style: none;
    margin-bottom: 0px;
}

.comments-list .comment .children li {
    margin-bottom: 15px;
}

.white-popup {
    position: relative;
    background: #FFF;
    padding: 0px;
    width: auto;
    max-width: 400px;
    margin: 20px auto;
}

.userpopup img{
    width: 100%;
}

.userpopup .popupinfo{
    padding: 15px;
    color: #000;
}

.userpopup .popupinfo p{
    margin: 0;
}