/** IPad Mini (Landscape Mode) & IPad Pro (Portrait) **/
@media (width: 1024px) {
    .footer .links a button#footerCta {
        margin-left: -3% !important;
    }

    .currentEventCarousel .gallery.currentEvents {
        margin-inline: 25px !important;
    }
    .pastEvents .gallery.currentEvents {
        margin-inline: 25px !important;
    }

    #menu-toggle {
        display: block !important;
    }

    #nav-links {
        margin-top: 5% !important;
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 47.6% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .flickity-prev-next-button.previous {
        left: 35% !important;
    }

    .flickity-prev-next-button.next {
        right: 35% !important;
    }

    .pastEventCards {
        margin-inline: 25px !important;
    }

    
    #contact .container {
        margin-top: 25% !important;
    }

    .upcoming {
        margin-left: -2rem !important;
    }

    .currentEvent .header-content {
        padding-top: 45% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: medium !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }

    .overlay-img p {
        height: 472px !important;
        width: auto !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
        padding-top: 20% !important;
    }
    /*...*/
}

/** IPad Mini (Portrait Mode)  **/
@media (width: 768px) {
    #image-top-mobile {
        margin-left: 9% !important;
    }

    #nav-links {
        margin-top: 6.7% !important;
    }

    .footer .links a button#footerCta {
        margin-left: 35.5% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .pastEventCards {
        margin-inline: 5% !important;
        /* gap: 5px !important; 
            --> bug fixen onderaan past events
        */
    }

    .dataEvent {
        top: 20px !important;
    }

    #contact .container {
        margin-top: 25% !important;
    }
    
    .loginLogout {
        margin-top: 1rem !important;
    }

    .account-page-section .portal {
        width: min-content !important;
    }

    .upcoming, .past{
        border-right: 0.5px solid white !important;
        border-bottom-right-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    .current, .loginLogout {
        border-left: 0.5px solid white !important;
        border-bottom-left-radius: 16px !important;
        border-top-left-radius: 16px !important;
    }
    
    .editEventCard {
        margin-inline: 0% !important;
        padding-top: 25% !important;
    }

    .create-event-section {
        margin-left: 0% !important; 
        margin-right: 0% !important;
    }

    .ticketContainer .whitespace-nowrap {
        white-space: normal !important;
    }

    .currentEvent .header-content {
        padding-top: 60% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: small !important;
    }

    .ticketContainer .dividerLine {
        display: none !important;
    }

    .ticketContainer .ticketDates .ticketAndDate {
        display: flex !important;
        flex-direction: column-reverse !important;
        margin-bottom: 25px !important;
    }

    .ticketBtn {
        width: -webkit-fill-available !important;
    }

    .ticketInfo p {
        font-size: large !important;
    }

    .ticketBuyForm {
        padding-top: 25% !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
    }

    .ticketBuyForm form#payment-form {
        margin-top: 25px !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }
}

@media (width: 820px) {
    #image-top-mobile {
        margin-left: 9% !important;
    }

    #nav-links {
        margin-top: 6.7% !important;
    }

    .footer .links a button#footerCta {
        margin-left: 36.5% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .pastEventCards {
        margin-inline: 5% !important;
        /* gap: 5px !important; 
            --> bug fixen onderaan past events
        */
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 53% !important;
    }
    
    .flickity-prev-next-button.previous {
        left: 34% !important;
    }

    .flickity-prev-next-button.next {
        right: 36% !important;
    }

    .dataEvent {
        top: 20px !important;
    }

    #contact .container {
        margin-top: 25% !important;
    }
    
    .loginLogout {
        margin-top: 1rem !important;
    }

    .account-page-section .portal {
        width: min-content !important;
    }

    .upcoming, .past{
        border-right: 0.5px solid white !important;
        border-bottom-right-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    .current, .loginLogout {
        border-left: 0.5px solid white !important;
        border-bottom-left-radius: 16px !important;
        border-top-left-radius: 16px !important;
    }
    
    .editEventCard {
        margin-inline: 0% !important;
        padding-top: 25% !important;
    }

    .create-event-section {
        margin-left: 0% !important; 
        margin-right: 0% !important;
    }

    .ticketContainer .whitespace-nowrap {
        white-space: normal !important;
    }

    .currentEvent .header-content {
        padding-top: 60% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: small !important;
    }

    .ticketContainer .dividerLine {
        display: none !important;
    }

    .ticketContainer .ticketDates .ticketAndDate {
        display: flex !important;
        flex-direction: column-reverse !important;
        margin-bottom: 25px !important;
    }

    .ticketBtn {
        width: -webkit-fill-available !important;
    }

    .ticketInfo p {
        font-size: large !important;
    }

    .ticketBuyForm {
        padding-top: 25% !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
    }

    .ticketBuyForm form#payment-form {
        margin-top: 25px !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }
}

@media (width: 1180px) {
    .footer .links a button#footerCta {
        margin-left: -3% !important;
    }

    .footer .infos {
        width: 46% !important;
    }

    .currentEventCarousel .gallery.currentEvents {
        margin-inline: 25px !important;
    }
    .pastEvents .gallery.currentEvents {
        margin-inline: 25px !important;
    }

    #menu-toggle {
        display: none !important;
    }

    #nav-links {
        margin-top: 0% !important;
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 57.75% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .flickity-prev-next-button.previous {
        left: 37% !important;
    }

    .flickity-prev-next-button.next {
        right: 37% !important;
    }

    .pastEventCards {
        margin-inline: 25px !important;
    }

    
    #contact .container {
        margin-top: 25% !important;
    }

    .upcoming {
        margin-left: -2rem !important;
    }

    .currentEvent .header-content {
        padding-top: 45% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: medium !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }

    .overlay-img p {
        height: 472px !important;
        width: auto !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
        padding-top: 20% !important;
    }

    .ticketDates {
        margin-left: -100px !important;
    }

    .dividerLine {
        height: 92% !important;
        top: 50px !important;
        bottom: 50px !important;
    }
    /*...*/
}

@media (width: 1366px) {
    .footer .links a button#footerCta {
        margin-left: -3% !important;
    }

    .currentEventCarousel .gallery.currentEvents {
        margin-inline: 25px !important;
    }
    .pastEvents .gallery.currentEvents {
        margin-inline: 25px !important;
    }

    #menu-toggle {
        display: none !important;
    }

    #nav-links {
        margin-top: 0% !important;
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 47.6% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .flickity-prev-next-button.previous {
        left: 35% !important;
    }

    .flickity-prev-next-button.next {
        right: 35% !important;
    }

    .pastEventCards {
        margin-inline: 25px !important;
    }

    
    #contact .container {
        margin-top: 25% !important;
    }

    .upcoming {
        margin-left: -2rem !important;
    }

    .currentEvent .header-content {
        padding-top: 35% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: medium !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }

    .overlay-img p {
        height: 472px !important;
        width: auto !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
        padding-top: 20% !important;
    }
    /*...*/
}

@media (width: 912px) {
    body {
        height: 100%;
    }
    .footer .links a button#footerCta {
        margin-left: 38.05% !important;
    }
    .footer {
        margin-top: 30% !important;
    }
    #image-top-mobile {
        margin-left: 8% !important;
    }
    .currentEvent .header-content {
        padding-top: 55% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: medium !important;
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 50.45% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .flickity-prev-next-button.previous {
        left: 37% !important;
    }

    .flickity-prev-next-button.next {
        right: 37% !important;
    }

    .ticketContainer .dividerLine {
        display: none !important;
    }

    .ticketContainer .ticketDates .ticketAndDate {
        display: flex !important;
        flex-direction: column-reverse !important;
        margin-bottom: 25px !important;
    }

    .ticketBtn {
        width: -webkit-fill-available !important;
    }

    .ticketInfo p {
        font-size: large !important;
    }

    .ticketBuyForm {
        padding-top: 25% !important;
    }
}

@media (width: 1368px) {
    .footer .links a button#footerCta {
        margin-left: -3% !important;
    }

    .currentEventCarousel .gallery.currentEvents {
        margin-inline: 25px !important;
    }
    .pastEvents .gallery.currentEvents {
        margin-inline: 25px !important;
    }

    #menu-toggle {
        display: none !important;
    }

    #nav-links {
        margin-top: 0% !important;
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 57.5% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .flickity-prev-next-button.previous {
        left: 35% !important;
    }

    .flickity-prev-next-button.next {
        right: 35% !important;
    }

    .pastEventCards {
        margin-inline: 25px !important;
    }

    
    #contact .container {
        margin-top: 25% !important;
    }

    .upcoming {
        margin-left: -2rem !important;
    }

    .currentEvent .header-content {
        padding-top: 35% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: medium !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }

    .overlay-img p {
        height: 472px !important;
        width: auto !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
        padding-top: 20% !important;
    }
    /*...*/
}

@media (width: 853px) {
    #image-top-mobile {
        margin-left: 9% !important;
    }

    #nav-links {
        margin-top: 6.7% !important;
    }

    .footer .links a button#footerCta {
        margin-left: 36.5% !important;
    }

    .buttons {
        /* de afstand van boven en beneden kan nog hoger worden gezet */
        margin-block: 15px !important;
    }

    .pastEventCards {
        margin-inline: 5% !important;
        /* gap: 5px !important; 
            --> bug fixen onderaan past events
        */
    }

    .flickity-prev-next-button.previous, .flickity-prev-next-button.next {
        top: 53% !important;
    }
    
    .flickity-prev-next-button.previous {
        left: 34% !important;
    }

    .flickity-prev-next-button.next {
        right: 36% !important;
    }

    .dataEvent {
        top: 20px !important;
    }

    #contact .container {
        margin-top: 25% !important;
    }
    
    .loginLogout {
        margin-top: 1rem !important;
    }

    .account-page-section .portal {
        width: min-content !important;
    }

    .upcoming, .past{
        border-right: 0.5px solid white !important;
        border-bottom-right-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    .current, .loginLogout {
        border-left: 0.5px solid white !important;
        border-bottom-left-radius: 16px !important;
        border-top-left-radius: 16px !important;
    }
    
    .editEventCard {
        margin-inline: 0% !important;
        padding-top: 25% !important;
    }

    .create-event-section {
        margin-left: 0% !important; 
        margin-right: 0% !important;
    }

    .ticketContainer .whitespace-nowrap {
        white-space: normal !important;
    }

    .currentEvent .header-content {
        padding-top: 60% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: small !important;
    }

    .ticketContainer .dividerLine {
        display: none !important;
    }

    .ticketContainer .ticketDates .ticketAndDate {
        display: flex !important;
        flex-direction: column-reverse !important;
        margin-bottom: 25px !important;
    }

    .ticketBtn {
        width: -webkit-fill-available !important;
    }

    .ticketInfo p {
        font-size: large !important;
    }

    .ticketBuyForm {
        padding-top: 25% !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;
    }

    .ticketBuyForm form#payment-form {
        margin-top: 25px !important;
    }

    .overlay-img .title {
        font-size: medium !important;
    }
}

/**====================**/
/**=GSM responsiveness=**/
/**====================**/

/*! Algemene gsm scherm grootte media query !*/
@media screen and (min-width: 358px) and (max-width: 432px) and (orientation: portrait) {
    .currentEvent .header-content {
        padding-top: 100% !important;
    }

    .currentEvent .header-content .title {
        font-size: larger !important;
    }

    .currentEvent .header-content .currentEventDesc {
        font-size: small !important;
        white-space: normal !important;
    }

    .currentEvent .ticketIndicator span {
        font-size: small !important;
        white-space: normal !important;
    }

    .footer .links a button#footerCta {
        margin-left: 21% !important;
    }

    .ticketContainer .dividerLine {
        display: none !important;
    }
    
    .ticketContainer .ticketDates .ticketAndDate {
        display: flex !important; /* Gebruik flexbox op kleine schermen */
        flex-direction: column-reverse !important; /* Stapel de elementen onder elkaar */
        align-items: stretch !important; /* Laat de items de breedte vullen */
    }

    .ticketBtn {
        width: 85vw !important; /* Laat de knop de volledige breedte innemen */
        margin-bottom: 10px !important; /* Wat ruimte onder de knop */
    }

    .ticketInfo {
        margin-left: 0 !important; /* Reset de linkermarge */
        margin-bottom: 10px !important; /* Wat ruimte onder de info */
    }

    .ticketInfo.whitespace-nowrap p {
        font-size: smaller !important;
        white-space: wrap !important;
        word-break: break-word !important;
    }

    .ticketContainer .dividerLine {
        display: none !important; /* Verberg de verticale lijn op kleine schermen */
    }

    .ticketBuyForm {
        padding-top: 45% !important;
    }

    .create-event-section.ticketBuyForm {
        margin-inline: 5% !important;

    }

    .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: -10px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 15% !important;
        margin-left: -25px !important;
    }

    .detailsEvent .container .dataEvent .inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    
    .detailsEvent .container .title {
        white-space: normal !important;
        font-size: smaller !important;
    }

    .detailsEvent .container .startdates .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        margin-left: -0.15% !important;
    }

    .detailsEvent .container input.form-control {
        width: 13% !important;
    }

    .detailsEvent .container .startdates a {
        white-space: break-spaces !important;
    }

    .detailsEvent .container input[name="startDate"] {
        width: 13.3% !important;
        margin-left: -0.8% !important;
    }

    .detailsEvent .container .koop-tickets-knop {
        width: 13% !important;
        margin-top: 0% !important;
    }

    .detailsEvent .container textarea.form-control {
        width: 13% !important;
    }
     
    .detailsEvent .container .dataEvent .inputs .flex {
        flex-direction: column !important;
    }

    .detailsEvent .container .dataEvent .inputs p {
        text-align: left !important;
        margin-bottom: 0.2rem !important;
        font-weight: 600 !;
    }

    .detailPage, .dataEvent {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }

    .ticketBuyForm form#payment-form {
        margin-top: 15% !important;
        white-space: normal !important;
    }

    .ticketBuyForm form#payment-form .field {
        margin-left: 0% !important;
        margin-right: 0% !important;
    }
     
    .editEventCard {
        margin-inline: 0% !important;
        padding-top: 25% !important;
    }

    /** Ticket pagina tekst op gsm-schermen op nieuwe lijnen laten beginnen zodat deze niet buiten het scherm lopen. **/
    .ticketInfo p span.ticketPageTextDividerLine {
        display: none !important;
    }

    .ticketInfo p br.hidden {
        display: block !important;
    }

    /** back to top button op gsm-schermen meer aan de rechterkant zetten **/
    #back-to-top-btn {
        bottom: 1rem !important;
        right: 1rem !important;
    }

    /* Marges tussen navbar en dropdown aanpassen zodat hier geen overlap of witruimte tussen zit. */
    #nav-links {
        margin-top: 13.25% !important;
    }
}


/*? GSM schermgrootte query's voor bepaalde detailpagina en ticketpagina items meer centraal te zetten ipv uitgelijnd aan de linker kant ?*/
@media screen and (width: 360px) and (height: 720px) and (orientation: portrait) {
    .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: -28px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 14% !important;
        margin-left: -29px !important;
    }

    .detailsEvent .container .dataEvent .inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    
    .detailsEvent .container .title {
        white-space: normal !important;
        font-size: smaller !important;
    }

    .detailsEvent .container .startdates .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        margin-left: -0.15% !important;
    }

    .detailsEvent .container input.form-control {
        width: 12% !important;
    }

    .detailsEvent .container .startdates a {
        white-space: break-spaces !important;
    }

    .detailsEvent .container input[name="startDate"] {
        width: 12.3% !important;
        margin-left: -0.8% !important;
    }

    .detailsEvent .container .koop-tickets-knop {
        width: 12% !important;
        margin-top: 0% !important;
    }

    .detailsEvent .container textarea.form-control {
        width: 12% !important;
    }
     
    .detailsEvent .container .dataEvent .inputs .flex {
        flex-direction: column !important;
    }

    .detailsEvent .container .dataEvent .inputs p {
        text-align: left !important;
        margin-bottom: 0.2rem !important;
        font-weight: 600 !;
    }

    .detailPage, .dataEvent {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }
}

@media screen and (width: 375px) and (height: 667px) and (orientation: portrait) {
    .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: -20px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 14% !important;
        margin-left: -20px !important;
    }

    /* Marges tussen navbar en dropdown aanpassen zodat hier geen overlap of witruimte tussen zit. */
    #nav-links {
        margin-top: 13.5% !important;
    }
}

@media screen and (width: 414px) and (height: 896px) and (orientation: portrait) {
       .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: 0px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 14% !important;
        margin-left: 0px !important;
    }

    .detailsEvent .container input.form-control {
        width: 14% !important;
    }

     .detailsEvent .container input[name="startDate"] {
        width: 14.3% !important;
        margin-left: -0.8% !important;
    }

    .detailsEvent .container .koop-tickets-knop {
        width: 14% !important;
        margin-top: 0% !important;
    }

    .detailsEvent .container textarea.form-control {
        width: 14% !important;
    }

    /* Marges tussen navbar en dropdown aanpassen zodat hier geen overlap of witruimte tussen zit. */
    #nav-links {
        margin-top: 12% !important;
    }
}

@media screen and (width: 430px) and (height: 932px) and (orientation: portrait) {
    .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: 10px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 14% !important;
        margin-left: 10px !important;
    }

    .detailsEvent .container input.form-control {
        width: 15% !important;
    }

     .detailsEvent .container input[name="startDate"] {
        width: 15.3% !important;
        margin-left: -0.8% !important;
    }

    .detailsEvent .container .koop-tickets-knop {
        width: 15% !important;
        margin-top: 0% !important;
    }

    .detailsEvent .container textarea.form-control {
        width: 15% !important;
    }

    /* Marges tussen navbar en dropdown aanpassen zodat hier geen overlap of witruimte tussen zit. */
    #nav-links {
        margin-top: 11.75% !important;
    }
}

/* Specifiek voor Galaxy A51 / 71 en Pixel 7... gsm's, waar de algemene GSM media query nog aangepast moest worden. */
@media screen and (width: 412px) and (min-height: 912px) and (max-height: 916px) and (orientation: portrait) {
       .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: 0px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 14% !important;
        margin-left: 0px !important;
    }

    .detailsEvent .container input.form-control {
        width: 14% !important;
    }

     .detailsEvent .container input[name="startDate"] {
        width: 14.3% !important;
        margin-left: -0.8% !important;
    }

    .detailsEvent .container .koop-tickets-knop {
        width: 14% !important;
        margin-top: 0% !important;
    }

    .detailsEvent .container textarea.form-control {
        width: 14% !important;
    }

    /* Marges tussen navbar en dropdown aanpassen zodat hier geen overlap of witruimte tussen zit. */
    #nav-links {
        margin-top: 12.25% !important;
    }
}

@media screen and (width: 360px) and (height: 740px) and (orientation: portrait) {
    .detailsEvent .container img {
        height: 225.42px !important;
        width: auto !important;
        margin-left: -28px !important;
        /* Overige stijlen behouden */
    }

    .detailsEvent .container video {
        height: 225.42px !important;
        width: 14% !important;
        margin-left: -29px !important;
    }

    .detailsEvent .container .dataEvent .inputs {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    
    .detailsEvent .container .title {
        white-space: normal !important;
        font-size: smaller !important;
    }

    .detailsEvent .container .startdates .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        margin-left: -0.15% !important;
    }

    .detailsEvent .container input.form-control {
        width: 12% !important;
    }

    .detailsEvent .container .startdates a {
        white-space: break-spaces !important;
    }

    .detailsEvent .container input[name="startDate"] {
        width: 12.3% !important;
        margin-left: -0.8% !important;
    }

    .detailsEvent .container .koop-tickets-knop {
        width: 12% !important;
        margin-top: 0% !important;
    }

    .detailsEvent .container textarea.form-control {
        width: 12% !important;
    }
     
    .detailsEvent .container .dataEvent .inputs .flex {
        flex-direction: column !important;
    }

    .detailsEvent .container .dataEvent .inputs p {
        text-align: left !important;
        margin-bottom: 0.2rem !important;
        font-weight: 600 !;
    }

    .detailPage, .dataEvent {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }

    /* Marges tussen navbar en dropdown aanpassen zodat hier geen overlap of witruimte tussen zit. */
    #nav-links {
        margin-top: 14.25% !important;
    }
}

/*! Voor laptop schermen met resolutie 1920x1080 !*/
@media screen and (min-width: 1536px) and (max-width: 1899px) {
    .container {
        max-width: 1280px !important;
    }

    .startdates input {
        overflow-x: scroll !important;
    }

    .currentEvent .header-content {
        padding-top: 33% !important;
    }
}

/*! Voor grotere schermen (ultra wide, 2k, 4k...) !*/
@media screen and (min-width: 1900px) {
    .container {
        max-width: 1536px !important;
    }
}