@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: #fff;
    color: #696969;
    font-size: 14px;
    font-weight: 400;
    font-family: Figtree, sans-serif;
}


.muis {
    cursor:pointer;
}

.new-tekst {
background: #c53838;
    font-size: 10px;
    padding: 2px 5px;
    color: #fff;
    font-weight: 300;
    border-radius: 5px;
}

.jwplayer {
    border-radius: 5px;
}

#iframeContainer,
#infoText,
#acceptButton {
    display: none; /* Standaard verbergen */
    margin-top: 20px; /* Ruimte boven de elementen */
}

.visible {
    display: block; /* Deze klasse maakt het element zichtbaar */
}

.hide-big {
    display: none;
}

.highlight {
    background-color: #292929;
    font-weight: bold;
    color: #fff;
}

.text-padding3 {
    margin-top: -10px;
    font-size: 12px;
}


.search-result {
    margin-bottom: 20px;
}

.result-link {
    color: #006621;
    font-size: 14px;
   white-space: normal;     /* Zorgt ervoor dat de tekst automatisch wordt afgebroken */
    word-wrap: break-word;   /* Breekt woorden wanneer ze te lang zijn voor de container */
    overflow-wrap: anywhere; /* Laat lange woorden op elk punt afbreken indien nodig */
    max-width: 100%;        
}

.result-title {
    font-size: 18px;
    margin-bottom: 5px;
   white-space: normal;     /* Zorgt ervoor dat de tekst automatisch wordt afgebroken */
    word-wrap: break-word;   /* Breekt woorden wanneer ze te lang zijn voor de container */
    overflow-wrap: anywhere; /* Laat lange woorden op elk punt afbreken indien nodig */
    max-width: 100%;    
}

.result-title a {
    text-decoration: none;
    color: #1a0dab;
}

.result-title a:hover {
    text-decoration: underline;
}

.result-description {
    font-size: 13px;
    color: #545454;
}

/* Remove the arrow (caret) from the dropdown toggle */
.custom-dropdown-toggle::after {
    display: none; /* Hide the default Bootstrap caret (arrow) */
}

/* Smaller dropdown styling */
.custom-dropdown-menu {
    min-width: 120px; /* Set smaller width */
    padding: 5px 10px; /* Smaller padding for compact look */
    font-size: 12px; /* Reduce font size */
}

/* Smaller dropdown item */
.custom-dropdown-item {
    font-size: 12px; /* Smaller font size for items */
    padding: 5px 10px; /* Smaller padding */
    color: #333; /* Text color */
}

/* Remove hover effect for dropdown items */
.custom-dropdown-item:hover {
    background-color: transparent; /* No background change on hover */
    color: #333; /* Keep text color the same */
}

/* Style the dropdown toggle button */
.custom-dropdown-toggle {
    padding: 2px 8px; /* Smaller padding for toggle button */
    font-size: 14px; /* Reduce font size for ellipsis */
    color: #555; /* Set ellipsis icon color */
}



/* Standaardstijl voor de zwarte knop */
.btn_black {
    background-color: #000; /* Zwarte achtergrondkleur */
    color: #fff;            /* Witte tekstkleur */
    padding: 10px 20px;     /* Standaard padding */
    text-decoration: none;  /* Geen onderstreepte tekst voor links */
    border: 2px solid #000; /* Zwarte rand */
    border-radius: 0;       /* Geen afgeronde hoeken */
    display: inline-block;  /* Zorgt ervoor dat de knop als link functioneert */
    font-size: 14px;        /* Standaard lettergrootte */
    font-weight: 500;       /* Iets dikkere tekst */
}

/* Hover-effect: de achtergrondkleur wordt iets lichter */
.btn_black:hover {
    background-color: #333; /* Donkergrijs bij hover */
    color: #fff;            /* Witte tekstkleur blijft bij hover */
    border-color: #333;     /* Randkleur verandert met de achtergrond */
}

/* Kleinere versie van de zwarte knop */
.btn_black.btn_small {
    padding: 5px 10px;      /* Kleiner maken door minder padding */
    font-size: 12px;        /* Kleinere tekstgrootte */
    border-width: 1px;      /* Dikkere rand aanpassen voor kleinere versie */
}


.mouse { 
    cursor: pointer; /* Wijzig de cursor naar pointer */
}    

button:focus {
    outline: none!important;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 45px 15px 45px 15px;
    border-bottom: 1px solid #ebebeb;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-container {
    position: relative; /* Zorg ervoor dat de container als referentie voor absolute positionering wordt gebruikt */
}

.header-center {
    position: absolute;
    padding: 0 10px;
    border: 10px solid #292929;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 26px;
    text-transform: uppercase;
    color: #292929;
    text-align: center;
    max-height: 54px;
}

.header-center::after {
    position: absolute;
    background: #fff;
    left: 50%;
    bottom: -13px;
    padding: 0 5px;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 10px;
    color: #555;
    content: "Productions";
}


.header-center:hover, .header-center:active {
    text-decoration: none;
}

/* Stijl voor de laatste <span> in .header-center */
.header-center span:last-child {
    display: inline-block;
    transform: scaleX(-1);
}


/* Rechterzijde (winkelwagen, zoekfunctie, taalkeuze) */
.header-right {
    display: flex;
    align-items: center;
}

.header-right, .header-left {
    font-size: 14px;
    color: #292929;
    margin-top: -40px;
}

.header-right a {
    text-decoration: none;
    color: #292929; /* Zwarte tekstkleur */
}

.header-right a i {
    margin-right: 5px;
}

/* Taalkeuze dropdown */
.dropdown-toggle {
    border: none;
    background-color: transparent;
}

small-extra {
    font-size: 13px;
}

a,
a:hover {
    color: #292929;
}

.comment {
  background: #b5b4b412;
}

small-extra {
    font-size: 13px;
}

/* Hidden replies */
.hidden {
    display: none;
}

.replies {
    border-left: 15px solid #f8f9fa;
}

.news-image {
    max-width: 100%;  /* Zorgt ervoor dat de afbeelding nooit breder is dan de container */
    height: auto;     /* Houdt de aspect ratio van de afbeelding */
    margin-top: 10px; /* Voeg wat ruimte boven de afbeelding toe */
}

/* Navbar */

.navbar-custom {
    background-color: #fff;    
}

.navbar-brand {
    display: none;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link-top,
.nav-link,
.nav-link-top {
    color: #292929 !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
}

.navbar .navbar-nav .nav-item {
    position: relative;
}

.navbar .navbar-nav .nav-link::after,
.navbar .navbar-nav .nav-link-top::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    content: "";
    background-color: #ebebeb;
    width: 0%;
    height: 2px;
    transition: all 0.5s;
}

/* Onderlijn tonen bij hover of active */
.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link.active::after,
.navbar .navbar-nav .nav-link-top:hover::after,
.navbar .navbar-nav .nav-link-top.active::after {
    width: 100%;
}


/* Login Panel Panel */
.user-panel {
    font-size: 22px;
    margin-right: 5px;
}
.user-panel a {
    color: #292929;
    text-decoration: none;
}

.login-panel {
    padding: 30px;
}

.login-panel > p {
    text-transform: uppercase;
    font-size: 14px;
    padding-top: 15px;    
}

.name {  
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 26px;
    text-transform: uppercase;
    color: #292929;
    padding: 0 10px;
    border: 10px solid #292929;    
}


.name::after {  
    position: absolute;
    top: 82px;
    background: #fff;
    left: 50%;
    padding: 0 5px;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 10px;
    color: #555;
    content: "Productions";    
}



.name > span {
    display: inline-block;
    transform: scaleX(-1);
}

.name:hover,
.name:active {
    text-decoration: none;
}


.user-initial {
    font-family: "Montserrat", sans-serif;
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #292929;
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
}

.mail {
   padding: 8px 5px;
    font-size: 18px;
    color: #292929;
}

.mail:hover {
    text-decoration: none;
}

#pending-count {
    font-size: 13px;
    position: relative;
    bottom: 5px;
    left:-3px;
    font-weight: 700;
}

.header-title {
    color: #4b4b4b !important;    
    background: #fbfbfb;
    border-bottom: none;
    padding: 15px 0;
}

.header-title a, .header-title a:hover {
    text-decoration: none; /* Optioneel, om de onderstreping te verwijderen */
}

.big-header-text {
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;    
    padding-bottom: 5px; 
}

.small-header-text {
    font-size: 12px;
}

.small-header-text > span::before {
    content: "/"; /* Voeg de schuine streep toe */
    margin: 0 5px; /* Optioneel, wat ruimte tussen de schuine streep en de tekst */
}

.small-header-text > span a {
    color: #808080;
}


/* Sidemenu */
.sidemenu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    background-color: #f8f9fa;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
#sidemenu.open {
    width: 400px;
}
#overlay.show {
    display: block;
}
.sidemenu a {
    padding: 8px 32px;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    display: block;
    transition: 0.3s;
}
.sidemenu a:hover {
    color: #000;
}

/* Sidebar Comments */
#menuIcon, #commentIcon {
    cursor: pointer;
}
.sidebar-comments {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3;
    top: 0;
    right: 0;
    background-color: #f8f9fa;
    overflow-x: hidden;
    transition: 0.5s;
}
.sidebar-content {
    color: #000;
    padding: 20px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #63616121;
    display: none;
    z-index: 1;
}

/* News Item */
.news-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    padding: 10px 0 ;
}

.news-content {
    flex-grow: 1;
}

.news-img {
    flex-shrink: 0;
    margin-left: 20px;
}

.news-img img {
    max-width: 150px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 3px;
}

.news-meta-header {
    display: inline-block;
}

.news h1, .news-item h2, .news-meta-header a {
    color: #000;
}
.news h1 {
    font-size: 20px;
    font-weight: 600;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    padding-bottom: 10px;
}

.news-item h2 , h2 {
    color: #292929;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 700;
}

.news-item h2 a, .author-name a, .publication a, .news-meta a {
    text-decoration: none;
    color: #292929;
}
.news-item h2 a:hover, .news-meta a:hover {
    text-decoration: none;
}
.news-item p {
    margin: 5px 0;
    color: #666;
}
.news-meta, .news-meta-sub {
    font-size: 14px;
    color: #999;
}
.news-tags {
    margin-top: 10px;
}
.tag, .tag-page, .category {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    color: #292929 !important;
    text-decoration: none !important;
    font-size: 12px;
    background: #F2F2F2;
    border-radius: 15px;    
}


.tag-page {
        font-size: 12px;
        margin: 5px 0;
}


/* Author Details */
.author-details {
    display: flex;
    align-items: center;
}
.avatar, .user-avatar, .user-avatar-b, .user-avatar-c {
    border-radius: 50%;
    margin-right: 10px;
}
.avatar {
    width: 40px;
    height: 40px;
}
.user-avatar {
    width: 20px !important;
    height: 20px !important;
    object-fit: cover !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.author-info {
    display: flex;
    flex-direction: column;
}
.author-name {
    font-size: 14px;
}
.publication-details {
    display: flex;
    font-size: 12px;
    color: gray;
}
.publication, .read-time, .publish-date {
    margin-right: 5px;
}

/* News Extra */

.news-extra {
    margin: 25px 0;
    padding: 10px 0;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.news-extra > div {
display: flex; /* Maakt het mogelijk om binnen dit div extra flex-items te gebruiken */
    flex-direction: row; /* Zorgt dat alles horizontaal wordt uitgelijnd */
    align-items: center; /* Verticaal gecentreerd */
    gap: 0; /* Verwijdert ruimte tussen subelementen */
}

.news-extra > span {
    margin-right: 15px;
}
.news-img, .image-slug {
    object-fit: cover;
    border-radius: 6px;
}
.news-img {
    max-width: 150px;
    max-height: 100px;
    margin-left: 20px;
    margin-top: 30px;
}

.youtube-download {
    padding: 15px;
    margin: 15px 0;
    background-color: #ffe7e7;
    font-size: 13px;
    color: #c93131;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}
.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* Right Sidebar  */

.sidebar {
    padding: 20px;
    border-left: 1px solid #ebebeb;
}

.sidebar .top-viewed-news, .top-viewed-videos, .top-viewed-tags {
    margin-bottom: 40px;
}

.sidebar h3 {
    color: #292929 !important;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
}

.sidebar-subtitle {
    padding: 5px 0;
    font-weight: bold;
}

.news-item-top {
    padding: 5px 0;
}

.news-body {
  margin-top: 15px;
}
.video-block {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.image-wrapper {
    position: relative;
}

.sidebar-youtube {
    max-width: 90px;
    min-height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 10px;
}

.view-count {
    position: absolute;
    top: 5px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.7); /* Zwarte achtergrond met transparantie */
    color: white;
    padding: 2px 5px;
    font-size: 9px;
    border-radius: 3px;
}



.video-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video-title {
    font-size: 14px;
    color: #292929;
    text-decoration: none;
    font-weight: bold;
}

.video-title:hover {
    text-decoration: underline;
}

.image-wrapper {
    position: relative;
    display: inline-block;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    color: white; /* Set the icon color to white */
    font-size: 10px; /* Adjust the size as needed */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition */
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 5px 8px;
}

.image-wrapper:hover .play-icon {
    opacity: 1; /* Show the play icon on hover */
}


/* TEST */

.pagination {
    display: flex !important;
    gap: 10px !important; /* Ruimte tussen de paginering items */
}

.page-item {
    list-style: none !important;
}

.page-link {
    display: block !important;
    padding: 6px 12px !important; /* Aangepaste padding */
    color: #292929 !important;
    background-color: #fff !important;
    text-decoration: none !important;
    border: 1px solid #ddd !important; /* Border consistent voor alle items */
    border-radius: 0 !important; /* Border-radius helemaal weg */
    transition: background-color 0.3s, color 0.3s !important;
}

/* Border-radius voor eerste en laatste item volledig verwijderd */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 0 !important; /* Helemaal geen border-radius */
}

/* Actieve pagina: Achtergrond #292929 met witte tekst en grijze border */
.page-item.active .page-link {
    background-color: #292929 !important; /* Donkere achtergrond */
    color: #fff !important; /* Witte tekst */
    border-color: #ddd !important; /* Border hetzelfde als andere items */
}

/* Hover: Donkere achtergrond en witte tekst */
.page-link:hover {
    background-color: #292929 !important;
    color: #fff !important;
}


/* Comments */
#comments {
    margin: 15px 0;
}
.comment-reply {
    border-left: 3px solid #e5e5e5;
    margin: 15px 0;
    padding: 15px;
}

.delete-comment {
    margin-top: -10px;
    float: right;
}

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
   font-family: Figtree, sans-serif;
     font-size: 13px; /* opinion 3 */
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}


.user-info {
    position: relative;
    display: inline-block;
}

/* START TOOLTIP STYLES */
.tooltip-content {
    display: none;
    position: absolute;
    top: 100%;
    left: -40px;
    z-index: 1000;
    width: 260px; /* Pas aan naar behoefte */
    background-color: #fff;
    border: 1px solid #e6e6e6;
    padding: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    opacity: 0;
    transform: translateY(10px); /* Startpositie voor de animatie */
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    color: #696969;
}

.tooltip-newspage {
    left: -55px!important
} 


.user-info:hover .tooltip-content {
    display: block;
    opacity: 1;
    transform: translateY(0); /* Einde van de animatie */
}

.tooltip-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    margin-top: 10px;
}

.tooltip-text {
    flex-grow: 1;
    padding: 10px 0;
    color: #696969!important;
}


.tooltip-text h4 {
    font-size: 14px;
    font-weight: bold;
    color: #292929;
    margin: 15px 0 0 0;
}

.tooltip-text p {
    font-size: 14px;
    margin: 5px 0;
    color: #696969;
}

.tooltip-text p:last-child {
    margin-top: 10px;
    font-size: 14px;
}

.follow-form {
    margin: 5px 10px;
    display: inline-block;
    float: right;
}

/* Volgers sectie styling */
.tooltip-text p.followers-count {
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}


/* Profile Page */

.user-avatar-b , .user-avatar-c {
    width: 80px;
    height: 80px;
    object-fit: cover !important;    
}

.upload-avatar, .upload-banner {
    position: absolute; 
    top: 5px; 
    right: 5px; 
    font-size: 13px; 
    color: #fff;
    background-color: #000000ad;
    padding: 3px 7px 3px 6px;
    border-radius: 5px; 
    cursor: pointer;
}

.bio-container{
    margin-top: -15px;
}

.bio-text {
    padding: 15px 0;
}

.bio-controls {
    padding-right: 10px;
}

.edit-bio-btn, .save-bio-btn, .cancel-edit-bio {
    font-size: 12px;
    color: #fff;
    background-color: #000000ad;
    padding: 6px;
    border-radius: 5px;
}

h3 {
    color: #292929;
    font-size: 16px;
    font-weight: 700;
}

.text-pading {
    padding: 15px 0 5px 0;
}

.image-container {
    width: 100%; /* of een specifieke breedte zoals 300px */
    height: 125px; /* Stel de hoogte in */
    overflow: hidden; /* Zorg ervoor dat de afbeelding niet buiten de container valt */
    position: relative; /* Voor positionering van het img-element als dat nodig is */
    border-radius: 5px;
}

.responsive-image {
    width: 100%; /* Maak de afbeelding 100% breed van de container */
    height: auto; /* Zorg ervoor dat de hoogte automatisch is om de aspectratio te behouden */
    object-fit: cover; /* Zorg ervoor dat de afbeelding de container vult zonder vervorming */
    position: absolute; /* Positioneer de afbeelding relatief aan de container */
    top: 50%; /* Center de afbeelding verticaal */
    left: 50%; /* Center de afbeelding horizontaal */
    transform: translate(-50%, -50%); /* Pas de afbeelding aan voor centreren */
}


.listje {
    padding: 10px 0;
}

/* dropdown menu styles */


.dropdown-item:active {
   background-color: #e9ecef!important;
}


.dropdown-padding {
  padding-left: 5px;
  padding-right: 10px;
}


.dropdown-item {
    font-size: 14px!important;   
    color: #000000!important;  
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #097ee8;!important;  
}


.dropdown .dropdown-menu {
    position: absolute!important;  
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
}


/* Radio onderin */

.custom-nav {
    display: flex;
    justify-content: space-around;
    padding: 10px 0 5px 0;
    background-color: transparent;
    position: relative;
    border-top: 1px solid #ebebeb;  
}

.custom-link {
    color: #4b4b4b; /* Rood gekleurde tekst */
    text-decoration: none; /* Geen onderstreping standaard */
    font-size: 12px;
    position: relative; /* Noodzakelijk voor de positionering van de blauwe onderstreep */
    text-transform: uppercase;
}

.custom-link:hover {
    color: #292929; /* Donkerder rood bij hover */
    text-decoration: none; /* Geen onderstreping bij hover */
}

.custom-link.active {
    color: #292929;
    border-bottom: none; /* Verwijder standaard onderstreep */
}

.custom-link.active::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ebebeb; /* Blauwe onderstreep */
    position: absolute;
    bottom: -6px; /* Pas deze waarde aan indien nodig */
    left: 0;
    z-index: 1; /* Zorg ervoor dat dit boven andere elementen ligt */
    transition: all 0.5s;
}


.tab-content {
    margin-top: 30px;
}

/* Radio onderin */

.current-song {
    background-color: #f5f5f59c;
    color: #292929; /* Pas de tekstkleur aan indien nodig */
}

.equalizer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 20px;
    height: 15px;
}

.bar {
    width: 6px;  /* Breedte van de balk */
    background-color: #000;  /* Kleur van de balken */
    animation: equalizer 0.5s infinite ease-in-out;
}

.bar:nth-child(1) {
    animation-delay: -0.2s;
}
.bar:nth-child(2) {
    animation-delay: -0.4s;
}
.bar:nth-child(3) {
    animation-delay: -0.6s;
}

@keyframes equalizer {
    0% {
        height: 5%;
    }
    50% {
        height: 100%;
    }
    100% {
        height: 5%;
    }
}


/* Klasse voor het tijdelijk stoppen van de animatie */
.bar-reset {
    animation: none;
}



/* Klasse die wordt toegevoegd aan body wanneer de speler open is */
body.music-player-visible {
    overflow: auto; /* Scrollen inschakelen */
    padding-bottom: 100px; /* Pas de ruimte aan, gebaseerd op de hoogte van de muziekspeler */
}

#close-player {
    position: absolute;
    top: 10px; /* Afstand van de bovenkant */
    right: 15px; /* Afstand van de rechterkant */
    padding: 5px 10px; /* Binnenruimte voor de knop */
    cursor: pointer; /* Wijzig cursor naar handje */
}


#song-list {
    padding: 0; /* Geen padding voor de lijst */
}

#song-list li {
    display: flex; /* Flexbox om de inhoud horizontaal uit te lijnen */
    justify-content: space-between; /* Ruimte tussen de titel en knoppen */
    align-items: center; /* Centreer items verticaal */
    padding: 10px 0; /* Ruimte boven en onder elk lijstitem */
    border-bottom: 1px solid #ddd; /* Onderlijn toevoegen */
}

.song-title {
    overflow-wrap: break-word; /* Zorg ervoor dat lange woorden worden afgebroken */
    white-space: normal; /* Zorg ervoor dat de tekst kan worden doorgebroken naar de volgende regel */   
    width: 55%; /* 40% breedte */
}

.button-group {
    display: flex; /* Flexbox voor de knoppen */
    align-items: center; /* Centreer knoppen verticaal */
}


.play-song {
    margin-right: 10px; /* Voeg ruimte toe aan de rechterkant van de Play knop */
}

.btn_small {
    padding: 5px 10px; /* Standaard padding voor knoppen */
}

#music-player {
    position: fixed; /* Zorgt ervoor dat de muziekspeler altijd aan de onderkant van het scherm blijft */
    bottom: 0; /* Plaatst de muziekspeler aan de onderkant van het scherm */
    left: 0; /* Uitlijnen met de linkerzijde van de pagina */
    width: 100%; /* Volledige breedte van de pagina */
    background-color: #fff; /* Achtergrondkleur met een beetje doorzichtigheid */
    z-index: 9999; /* Zorgt ervoor dat de muziekspeler altijd boven andere elementen komt */
    padding: 10px; /* Ruimte rondom de inhoud */
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); /* Schaduw voor een zwevend effect */
}

#player-controls {
    display: flex; /* Gebruik flexbox voor uitlijning */
    justify-content: center; /* Centreer de knoppen horizontaal */
    align-items: center; /* Zorg ervoor dat de knoppen verticaal uitgelijnd zijn */
    gap: 10px; /* Optioneel: ruimte tussen de knoppen */
}

footer.footer {
    position: relative;
    z-index: 1; /* Zorgt ervoor dat de footer achter de muziekspeler blijft */
}

.btn_back, .btn_forward, .btn_play, .btn_close  {
    border-radius: 50%; /* Maak de knoppen volledig rond */
    display: flex; /* Gebruik flexbox om de inhoud (het icoon) te centreren */
    justify-content: center; /* Centreer de inhoud horizontaal */
    align-items: center; /* Centreer de inhoud verticaal */
    background-color: #f5f5f5;
    color: #292929;
    border: none; /* Verwijder de rand van de knoppen */
    cursor: pointer; /* Geef de gebruiker een pointer-cursor als ze over de knop hoveren */
}

.btn_back, .btn_forward {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.btn_play {
    width: 50px; /* Bepaal de grootte van de cirkel */
    height: 50px; /* Zorg ervoor dat de hoogte gelijk is aan de breedte om een cirkel te maken */
    font-size: 18px; /* Optioneel: bepaal de grootte van het icoon */    
}    

.btn_close {
    width: 32px;
    height: 32px;
    font-size: 12px; 
}    

.player-info {
    display: flex; /* Gebruik flexbox om de inhoud in een rij uit te lijnen */
    justify-content: space-between; /* Zorg ervoor dat er ruimte tussen de elementen is */
    align-items: center; /* Centreer de elementen verticaal */
    padding: 10px; /* Optionele padding voor de speler-informatie */
}

#current-thumb {
    margin-right: 10px; /* Ruimte tussen thumbnail en andere elementen */
}

#current-thumb img {
    width: 35px; /* Pas de breedte aan zoals gewenst */
    height: auto; /* Houd de verhoudingen van de afbeelding */
    border-radius: 8px; /* Hoekradius voor een afgeronde afbeelding */
}


#current-title {
    color: #292929; /* Pas de tekstkleur aan indien nodig */
    overflow-wrap: break-word; /* Zorg ervoor dat lange woorden worden afgebroken */
    white-space: normal; /* Zorg ervoor dat de tekst kan worden doorgebroken naar de volgende regel */    
}

#duration {
    font-size: 14px; /* Pas de fontgrootte aan indien nodig */
    color: #292929; /* Pas de tekstkleur aan indien nodig */
}

#duration span {
    margin-left: 5px; /* Voeg ruimte toe tussen de tijdslabels */
    margin-right: 5px; /* Voeg ruimte toe tussen de tijdslabels */
}


/* Algemeen stijlen voor de input range (vooraf ingesteld) */
input[type="range"] {
    -webkit-appearance: none; /* Verwijder standaard stijlen van de input range in Webkit-browsers */
    width: 100%; /* Volledige breedte */
    background-color: #f5f5f5 !important; /* Achtergrondkleur van de progressbar */
    border-radius: 15px !important; /* Voeg een border-radius toe aan de range zelf */
}

/* Achtergrondkleur van de progress-bar in Webkit-browsers */
input[type="range"]::-webkit-slider-runnable-track {
    background: #f5f5f5 !important; /* Achtergrondkleur van de hele track */
    border-radius: 15px !important; /* Voeg border-radius toe aan de track */
}

/* Kleur van de voortgang in Webkit-browsers */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Verwijder standaard stijlen van de thumb */
    height: 10px; /* Hoogte van de thumb */
    width: 10px; /* Breedte van de thumb */
    background: #292929 !important; /* Kleur van de voortgang */
    border-radius: 50% !important; /* Maak de thumb rond */
    cursor: pointer; /* Cursor bij hover */
}

/* Achtergrondkleur van de progress-bar voor Firefox */
input[type="range"]::-moz-range-track {
    background: #f5f5f5 !important; /* Achtergrondkleur van de hele track */
    border-radius: 15px !important; /* Voeg border-radius toe aan de track */
}

/* Kleur van de voortgang in Firefox */
input[type="range"]::-moz-range-thumb {
    height: 10px; /* Hoogte van de thumb */
    width: 10px; /* Breedte van de thumb */
    background: #292929 !important; /* Kleur van de voortgang */
    border-radius: 50% !important; /* Maak de thumb rond */
    cursor: pointer; /* Cursor bij hover */
}

/* Styling voor Internet Explorer */
input[type="range"]::-ms-track {
    background: #f5f5f5 !important; /* Achtergrondkleur van de hele track */
    border-color: transparent; /* Geen randkleur */
    color: transparent; /* Geen kleur voor de track */
    border-radius: 15px !important; /* Voeg border-radius toe aan de track */
}

/* Kleur van de voortgang in Internet Explorer */
input[type="range"]::-ms-thumb {
    height: 10px; /* Hoogte van de thumb */
    width: 10px; /* Breedte van de thumb */
    background: #292929 !important; /* Kleur van de voortgang */
    border-radius: 50% !important; /* Maak de thumb rond */
    cursor: pointer; /* Cursor bij hover */
}


/* Optional: Voeg nog keyframes toe voor complexere animaties */
@keyframes tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-info:hover .tooltip-content {
    animation: tooltip-fade-in 300ms ease-out forwards;
}

.ds {
    display: none;
}

.ms {
    display: block;
}

.mp-3 {
    padding: 15px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .header-container {
        display: block!important;
    }

  .navbar .navbar-nav .nav-link::after,
  .navbar .navbar-nav .nav-link-top::after {
    content: none;
  }

.navbar .navbar-nav .nav-item::after {
display: none !important;
}


 .custom-link.active::after {
        display: block; /* Zorg ervoor dat het zichtbaar is op mobiel */
    }

.ds {
    display:block!important;
}


.ms {
    display: none!important;
}

   .navbar-nav {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .navbar-nav .nav-item {
        text-align: center;
    }

/* profiel dingen */
.text-pading2 {
    margin: 5px 0;
}

.mp-3 {
    padding: 1rem !important;
}

.mp-4 {
padding: 15px 20px 15px 40px;
}

.text-pading {
    padding: 0px!important;
}

.image-container {
    height: 100px!important;
}

.user-avatar-b, .user-avatar-c {
    width: 60px !important;
    height: 60px !important;    
}

.text-pading3 {
    margin-top: -5px;
    margin-bottom: -15px;
    font-size: 12px;
}

.btn_black.btn_mobiel {
    padding: 10px 0!important;
    font-size: 12px;
    border-width: 1px;
    width: 100%;
}

.mobile-anim {
    width: 150px;               /* Breedte van de container */
    overflow: hidden;           /* Verbergt de tekst die buiten de container valt */
    position: relative;         /* Positionering voor het animatie-element */
}

        #current-title {
            width: 150px;              /* Breedte van de container */
            white-space: nowrap;       /* Zorgt ervoor dat de tekst niet wordt afgebroken */
            animation: slide 8s linear infinite; /* Animatie */
            font-size: 12px;           /* Optionele stijlen */
        }

@keyframes slide {
    0% { transform: translateX(100%); opacity: 0; }    /* Begin buiten het zicht aan de rechterkant, volledig transparant */
    10% { opacity: 1; }                                /* Volledig zichtbaar */
    70% { opacity: 1; }                                /* Blijft volledig zichtbaar */
    95% { opacity: 1; }                                /* Begin met vervagen */
    100% { transform: translateX(-100%); opacity: 0; } /* Eindig buiten het zicht aan de linkerkant, volledig transparant */
}
    .navbar-brand {
        display: block !important;
    color: #292929 !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    }
    .header-container {
    padding: 20px 15px 55px 15px!important;
    }
   .header-right, .header-left{    
    margin-top: -15px;!important;
   }

    .header-center {
    display: block!important;
    justify-content: center !important; /* Horizontaal centreren */
    align-items: center !important;     /* Verticaal centreren */
    }
    .header-left {
    display: flex !important; 
    justify-content: center !important; /* Horizontaal centreren */
    align-items: center !important;     /* Verticaal centreren */
        padding: 10px 0;           
    }
    .header-right {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 5px 0;
        position: relative !important;
        top: 55px !important;
    }
    #sidemenu.open {
        width: 250px !important;
    }
    .row.no-pad > [class*='col-'] {
        padding-right: 0;
        padding-left: 0;
    }
    .navbar-toggler.minus {
        border: none;
    }
    .navbar-toggler.minus:focus {
        outline: none;
    }
    .navbar-toggler.minus[aria-expanded="true"] .icon-bar:nth-of-type(1) {
        transform: translate3d(0, 6px, 0);
    }
    .navbar-toggler.minus[aria-expanded="true"] .icon-bar:nth-of-type(3) {
        transform: translate3d(0, -6px, 0);
    }
    .navbar-toggler.minus .icon-bar {
        width: 22px;
        height: 2px;
        background-color: #272626;
        transition: all 0.2s;
    }
    .navbar-toggler.minus .icon-bar + .icon-bar {
        margin-top: 4px;
    }
    .sidebar {
        border-left: 0 !important;
    }
    .navbar-custom .nav-link {
        margin-top: 0px !important;
    }
    .nav-link:not(:last-child) {
        margin-right: 20px;
    }
    .navbar-nav .dropdown-menu {
        border-radius: 0px !important;
        margin-top: 10px;
        width: auto !important;
    }
    .nav-item.dropdown .dropdown-toggle {
        font-size: 12px;
    }

.navbar-toggler.minus {
        margin-top: 5px;
    }

    /* ANIMATED MINUS */
.navbar-toggler.minus {
    border: none;
    &:focus {
        outline: none;
    }
    &[aria-expanded="true"] {
        .icon-bar {
            &:nth-of-type(1) {
                transform: translate3d(0,6px,0);
            }
            &:nth-of-type(2) {

            }
            &:nth-of-type(3) {
                transform: translate3d(0,-6px,0);
            }
        }
    }
    .icon-bar {
        width: 22px;
        display: block;
        height: 2px;
        background-color: #272626;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        &+ .icon-bar {
            margin-top: 4px;
        }
        &:nth-of-type(1) {
            transform: translate3d(0,0,0) rotate(0deg);
        }
        &:nth-of-type(2) {
            transform: translate3d(0,0,0) rotate(0deg);
        }
        &:nth-of-type(3) {
            transform: translate3d(0,0,0) rotate(0deg);
        }
    }
}
}

/* Responsive */
@media (max-width: 428px) {

.text-preview {
    display: block;
    max-width: 65%;
}

.news-img {
    float:right;
    max-width: 85px !important;
    max-height: 55px !important;
    margin-left: 15px!important;
    margin-top: 5px!important;
}


.hide-big {
    display: inline-block;
}

.small-hide {
    display: none!important;
}

}


/* Contact ticket layout */
.contact-side-card strong{color:#111;}
.contact-ticket-form .form-control{border-radius:8px;}
.contact-map-wrap iframe{display:block;width:100%;}