/*PC weergave*/
@media (min-width: 1025px){
    #dash-gen-body-dummy-en{
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 5%;
    }

    #question-input-dummy-en {
        width: 75%;
        height: 50px;
        border-radius: 50px 0px 0px 50px;
    }

    #generate-button-dummy-en {
        width: 25%;
        height: 50px;
        text-align: center;
        font-size: 18px;
        font-weight: bolder;
        margin: 0rem, 0rem, 1rem, 1rem;
        background-color: #7545FF;
        border: transparent;
        color: #FFFFFF;
        border-radius: 0px 50px 50px 0px;
        text-transform: None;
    }
    #search-bar-dummy-en{
        display: flex;
        margin-top: 20px;
        transform: translateY(-150%)
    }

    #inleiding-dummy-en{
        transform: translateY(-50%);
    }

    #inleiding-dummy-en img {
        height: 150px;
        width: 150px;
        position: relative;
        bottom: 0;
        right: 0;
        transform: translate(550%, -65%);
        z-index: 2;
    }
    #inleiding-en img {
        height: 150px;
        width: 150px;
        position: relative;
        bottom: 0;
        right: 0;
        transform: translate(-85%, -65%);
    }

    #footer-dummy-en{
        display: flex; 
        justify-content: center;
        margin-top: 10px;
    }

    #input-form-en{
        width: 100%;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 32px;
        box-shadow: 0 1px 6px #0d0c5405, 0 6px 22px #0d0c540a;
        background-color: #FFFFFF;
    }

    /*Nadat de vraag is gesteld*/ 
    #body-dash-output-dummy-en{
        display: flex;
        width: 100%;
        align-items: flex-start;
    }

    #dashboard-output-dummy-en{
        padding-top: 50px;
        max-height: 100vh;
    }

    #contact-form-dummy-en{
        flex: 0.5;
    }
    #contact-form-dummy-en.open{
        padding-top: 50px;
        flex: 0.5;
        height: 100vh;
    }
    #after-gen-message-en{
        top: 10px;
        position: -webkit-sticky;
        position: sticky;
    }
    #form-after-gen-dummy-en{
        width: 300px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-top: 20px;
    }
    #form-after-gen-img-dummy-en{
        height: 150px;
        width: 150px;
        position: relative;
        bottom: 0;
        right: 0;
        transform: translate(150%, -25%);
    }
    #content-footer.open{
        display: none;
    }
}
/*Mobiele weergave*/
@media (max-width: 768px) {
    #dash-gen-body-dummy-en{
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 10%;
    }

    #input-form-en{
        width: 100%;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background-color: #FFFFFF;
    }
    #search-bar-dummy-en {
        flex-direction: column;
    }
    #question-input-dummy-en {
        width: 100%;
    }
    #generate-button-dummy-en {
        margin: 10px, 0, 0, 0;
        width: 100%;
        text-align: center;
        font-size: small;
        margin: 0rem, 0rem, 1rem, 1rem;
        background-color: #7545FF;
        border: transparent;
        color: #FFFFFF;
        text-transform: None;
    }
    #inleiding-dummy-en{
        display: flex;
        flex-direction: column;
    
    }
    #inleiding-en{
        display: flex;
        flex-direction: column;
    
    }
    #inleiding-dummy-en img {
        transform: translateX(calc(75px - 50%));
        transform: translateY(-10%);
        align-self: center;
        height: 150px;
        width: 150px;
        margin-bottom: 50px;
    }
    #footer-dummy-en{
        display: flex; 
        text-align: center;
        justify-content: center;
        margin-top: 10px;
    }
    /*Nadat de vraag is gesteld*/ 
    #body-dash-output-dummy-en{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    
    #dashboard-output-dummy-en{
        order: 1;
        overflow: visible;
        
    }
    
    #contact-form-dummy-en{
        order: 2;
    }

    #after-gen-message-en{
        display: flex;
        flex-direction: column;
    }
    #form-after-gen-dummy-en{
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-top: 20px;
    }
    #form-after-gen-img-dummy-en{
        transform: translateX(calc(75px - 50%));
        transform: translateY(-10%);
        align-self: center;
        height: 150px;
        width: 150px;
        z-index: -1;

    }

    .dash-graph{
        zoom:0.65;
        width: 100vw;
    }
    #content-footer{
        display: none;
    }

}
/*Tablet weergave*/
@media (min-width: 769px) and (max-width: 1024px) {
    #dash-gen-body-dummy-en{
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 5%;
    }

    #question-input-dummy-en {
        width: 75%;
        height: 50px;
    }

    #generate-button-dummy-en {
        width: 25%;
        height: 50px;
        text-align: center;
        font-size: small;
        margin: 0rem, 0rem, 1rem, 1rem;
        background-color: #7545FF;
        border: transparent;
        color: #FFFFFF;
        text-transform: None;
    }
    #search-bar-dummy-en{
        display: flex;
        margin-top: 20px;
    }

    #inleiding-dummy-en{
        transform: translateY(-25%)
    }

    #inleiding-dummy-en img {
        height: 150px;
        width: 150px;
        position: relative;
        bottom: 0;
        right: 0;
        transform: translate(-85%, -65%);
    }

    #footer-dummy-en{
        display: flex; 
        justify-content: center;
        margin-top: 10px;
    }

    #input-form-en{
        width: 100%;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background-color: #FFFFFF;
    }

    #body-dash-output-dummy-en{
        display: flex;
        width: 100%;
        flex-direction: column;
        
    }
    #dashboard-output-dummy-en{
        order: 1;
    }
    
    #contact-form-dummy-en{
        order: 2;
    }
    #after-gen-message-en{
        display: flex;
        flex-direction: column;
    }
    #form-after-gen-dummy-en{
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-top: 20px;
    }
    #form-after-gen-img-dummy-en{
        transform: translateX(calc(75px - 50%));
        transform: translateY(-10%);
        align-self: center;
        height: 150px;
        width: 150px;
    }
    #content-footer{
        display: none;
    }
}