/*COPYRIGHT © 2026 AUTHOR-E BV. ALL RIGHTS RESERVED */

/*for mobile devices*/
@media screen and (max-width:480px){
    html
    {
        overflow-y: auto;
    }
    /*List menu*/
    #sideMenu
    {
        display: none;
    }
    #hamburgerIcon {
        margin-left: 10px;
    }
    section
    {
        margin-left: 20px;
    }
    .paragraphInfoText 
    {
        margin-left: 20px;
    }
    #carouselNavigator {
        margin-left: 20px;
    }
    #questionNavigationBar
    {
        margin-left: 20px;
    }
    /*Presentation*/
    #buttonNavigator {
        padding: 0px 20px 0px 20px;
    }

    #previousSectionButton {
        width: calc(100% - 50px);
        margin-left: 50px;
        height: 40px;
      }
      
      #nextSectionButton {
        width: calc(100% - 50px);
        margin-left: 50px;
        height: 40px;
      }

      .actionButtonOptionsIcon {
        width: 35px;
        height: 35px;
    }
    
    .mainIcon {
        width: 40px;
        height: 40px;
    }

    .actionButtonOptions 
    {
        margin-right: 1px;
        bottom: 43px;
    }
    
    .actionButtonOptions li 
    {
    padding: 3px;
    margin-top: 5px;
    }

    .Ratio50-50Left 
    {
        width: calc(100% - 20px);
        min-height: 1%;
      }
      .Ratio50-50Right {
        width: calc(100% - 20px);
        min-height: 1%;
      }
    
    


     /*Search*/
    .SearchResults {
        height: 82vh;
        padding: 20px 20px 0px 0px;
    }
    #Content
    {
        padding: 50px 5px 0px 0px;
        overflow-x: hidden;
        /* background-color: red; */
    }

    #overviewContent > #Content
    {
        height: fit-content !important;
    }

    #overviewRight
    {
        /* background-color: red; */
        width: 100%;;
        padding: 0;
        height: fit-content;
    }
    #overview
    {
        overflow-y: auto;
    }
    
    #overviewContent > #Content {
        padding: 0 15px 0px 15px;
        margin: 0;
        overflow-y: hidden;
    }
    #overviewLeft
    {
        width: 100%;
        height: fit-content;
        padding-top: 30px;
    }

    div#companyLogoContainer {
        padding-left: 35px;
      }
   
    .card
    {
        margin: 30px auto;
        width: 90%;
    }
    .overviewCardIcon 
    {
        margin: 20px 10px;
        background-position: center;
    }
    .overviewCardLabel 
    {
        font-size: 18px;
        left: 23%;
    }
    .overviewCardSubsection 
    {
        left: 23%;
        font-size: 12px;
    }
    
    
    #overviewLeft > #SearchContainer
    {
        margin: 35px!important;
    }
}

/*for tablets*/
@media screen and (min-width:481px) and (max-width:768px){
    html
    {
        overflow-y: auto;
    }
    /*List menu*/
    #sideMenu
    {
        display: none;
    }
    
    #hamburgerIcon {
        margin-left: 10px;
    }
    section
    {
        margin-left: 20px;
    }
    #carouselNavigator {
        margin-left: 20px;
    }
    #questionNavigationBar
    {
        margin-left: 20px;
    }
    /*Presentation*/
    #previousSectionButton {
        width: calc(100% - 50px);
        margin-left: 50px;
      }
      
      #nextSectionButton {
        width: calc(100% - 50px);
        margin-left: 50px;
      }

      .actionButtonOptionsIcon {
        width: 40px;
        height: 40px;
    }
    
    .mainIcon {
        width: 45px;
        height: 45px;
    }
    
.actionButtonOptions li 
{
    padding: 3px;
    margin-top: 7px;
}

.Ratio50-50Left 
    {
        width: calc(100% - 20px);
        min-height: 1%;
      }
      .Ratio50-50Right {
        width: calc(100% - 20px);
        min-height: 1%;
      }
     /*Search*/
    #Content
    {
        /* background-color: green; */
        overflow-x: hidden;
        padding: 50px 10px 0px 0px;
    }

    #overviewContent > #Content
    {
        height: fit-content !important;
    }

        
    #overview
    {
        overflow-y: auto;
    }


    #overviewLeft
    {
        width: 100%;
        height: fit-content;
        padding: 50px 0 50px 0;
    }

    #overviewRight
    {
        width: 100%;;
        /* background-color: green; */
        padding: 0;
        height: fit-content;
    }
    /* #companyLogo {
        margin: 0 80px 20px;
        height: 100px;
    } */
    div#companyLogoContainer {
        padding-left: 80px;
      }
    #overviewContent > #Content {
        padding: 0 80px 0px 60px;
    }
    .card
    {
        margin: 50px 80px 50px 80px;
    }

    #overviewLeft > #SearchContainer
    {
        margin-left: 80px!important;
        margin-top: 25px!important;
    }
}

/*for laptops*/
@media screen and (min-width:769px) and (max-width:1024px){
    /*List menu*/
    #Navigation1
    {
        width: 95%;
    }

    #Navigation1.Tree>.Node>.Children>.Node {
        /* padding: 10px; */
    }

    .Tree .Title
    {
        margin-left: 0px;
    }

    
    #Navigation1.Tree>.Node>.Display:first-child {
        padding-top: 15px;
        padding-left: 10px;
    }

    #Navigation1 .Children a {
        opacity: 1;
        font-size: 12px;
    }
    #hamburgerIcon {
        margin-left: 15px;
    }
    section
    {
        margin-left: 20px;
    }
    #carouselNavigator {
        margin-left: 20px;
    }
    #questionNavigationBar
    {
        margin-left: 20px;
    }

    #sideMenuTitleContainer {
        width: 95%;
    }

    div#sideMenuTitleText {
        font-size: 14pt;
        font-weight: bold;
    }

    #searchContainer
    {
        width: 95% !important;
    }

   
    #closeSideMenuIcon
    {
        display: none !important;
    }
       
    /*Presentation*/
    #contentTitle {
        font-size: 28px;
    }
    .Content
    {
        font-size: 12px;
    }
    .InteractionOption
    {
        font-size: 12px;
    }
    #previousSectionButton {
        width: calc(75% - 50px);
        margin-left: 50px;
      }
      
      #nextSectionButton {
        width: calc(75% - 50px);
        margin-left: 50px;
      }
     /*Search*/
     #SearchContainer
     {
        width: 95% !important;
     }
    #Content
    {
        /* background-color: yellow; */
    }
    #overviewRight
    {
        /* background-color: yellow; */
    }
    .card {
        margin: 50px 50px 50px 50px;
    }
    .overviewCardIcon 
    {
        margin: 20px 10px;
        background-position: center;
    }
    .overviewCardLabel 
    {
        font-size: 18px;
        left: 23%;
    }
    .overviewCardSubsection 
    {
        left: 23%;
        font-size: 12px;
    }
    .overviewCardButton 
    {
        background-position: top;
        right: 15px;
        width: 20px;
        right: 15px;
        top: 20%;
    }
    div#companyLogoContainer {
        padding-left: 70px;
      }

}

/*for desktop*/
@media screen and (min-width:1025px) and (max-width:1200px){
    /*List menu*/
    #closeSideMenuIcon
    {
        display: none !important;
    }
       
    /*Presentation*/
     /*Search*/
    #Content
    {
        /* background-color: pink; */
    }
    #overviewRight
    {
        /* background-color: pink; */
    }
    
    .overviewCardLabel
    {
        left: 25%;
    }
    
    .overviewCardSubsection
    {
        left: 25%;
    }
    div#companyLogoContainer {
        /* padding-left: 80px; */
      }
}

/*for huge screen*/
@media screen and (min-width:1201px){
    /*List menu*/
    #closeSideMenuIcon
    {
        display: none !important;
    }
    /*Presentation*/
     /*Search*/
    #Content
    {
        /* background-color: purple; */
    }
    #overviewRight
    {
        /* background-color: purple; */
    }
    div#companyLogoContainer {
        /* padding-left: 80px; */
      }
}


/* responsiveness based on height */
@media screen and (max-height:290px)
{
    #Navigation1 {
        /* max-height: 40vh; */
    }
    /* #Content {
        height: 65vh !important;
    } */
    .SearchResults
    {
        height: 55vh !important;
    }
}

@media screen and (min-height:291px)
{
    #Navigation1 {
        /* max-height: 45vh; */
    }
    /* #Content {
        height: 65vh !important;
    } */
    .SearchResults
    {
        height: 55vh !important;
    }
}

@media screen and (min-height:331px)
{
    #Navigation1 {
        /* max-height: 50vh; */
    }
    /* #Content {
        height: 65vh !important;
    } */
    .SearchResults
    {
        height: 55vh !important;
    }
}

@media screen and (min-height:391px)
{
    #Navigation1 {
        /* max-height: 55vh; */
    }
    /* #Content {
        height: 75vh !important;
    } */
    .SearchResults
    {
        height: 65vh !important;
    }
}

@media screen and (min-height:431px)
{
    #Navigation1 {
        /* max-height: 60vh; */
    }
    /* #Content {
        height: 75vh !important;
    } */
    .SearchResults
    {
        height: 65vh !important;
    }
}

@media screen and (min-height:491px)
{
    #Navigation1 {
        /* max-height: 65vh; */
    }
    /* #Content {
        height: 80vh !important;
    } */
    .SearchResults
    {
        height: 70vh !important;
    }
}

@media screen and (min-height:591px)
{
    #Navigation1 {
        /* max-height: 70vh; */
    }
    /* #Content {
        height: 80vh !important;
    } */
    .SearchResults
    {
        height: 70vh !important;
    }
}

@media screen and (min-height:631px)
{
    #Navigation1 {
        /* max-height: 72vh; */
    }
    /* #Content {
        height: 80vh !important;
    } */
    .SearchResults
    {
        height: 82vh !important;
    }
}

@media screen and (min-height:701px)
{
    #Navigation1 {
        /* max-height: 75vh; */
    }
    /* #Content {
        height: 85vh !important;
    } */
    .SearchResults
    {
        height: 82vh !important;
    }
}

@media screen and (min-height:791px)
{
    #Navigation1 {
        /* max-height: 77vh; */
    }
    /* #Content {
        height: 85vh !important;
    } */
    
    .SearchResults
    {
        height: 82vh !important;
    }
}

@media screen and (min-height:1000px)
{
    #Navigation1 {
        /* max-height: 81vh; */
    }
    /* #Content {
        height: 90vh !important;
    } */
    .SearchResults
    {
        height: 82vh !important;
    }
}

@media screen and (min-height:1200px)
{
    #Navigation1 {
        /* max-height: 85vh; */
    }
    /* #Content {
        height: 92vh !important;
    } */
    .SearchResults
    {
        height: 82vh !important;
    }
}

/* extra responsiveness for overview page */


@media screen and (min-width:769px) and (max-height:600px)
{
    /* #companyLogo {
        min-height: 50px;
        margin: 0 50px 20px;
    } */
    #overviewLeft {
        padding-top: 30px;
    }
    #overviewRight
    {
        margin-top: 0px;
    }
    #overviewContent > #Content {
       max-height: 50vh;
    }
}