/* standard colors and other cusum varaibles*/
:root {
    --height_menubar: 110px; /*this is to set the correct top for scrolling elements such as the TOC or when you click on images/references(for the last two, use scroll-margin: var(--height_menubar);)*/
    --purpleDarkest: hsl(233, 30%, 39%);
    --purplelink: hsl(254, 48%, 31%);
    --purpleDark: #787FB6;
    --purpleNormal: #A5A8D5;
    --purpleLight: #C7CAEA;
    --purpleLightest: #E9ECFF;
    --backgroundWebsite: white; /*Ruben: I don't know what the background color is, but set the colour of the boxes to this color*/
}

/* FONTS */
@font-face {
    font-family: 'White Rabbit';
    src: url('fonts/whitrabt.woff') format('woff'),
         url('fonts/whitrabt.woff2') format('woff2'),
         url('fonts/whitrabt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }
    
@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

html {
    scroll-behavior: smooth; /*Enable smooth scrolling for TOC */
}
header {
    background-color: #f1f2ff;
    color: black;
    padding-bottom: 40px; /*same as TOC and padden h1 top*/
    padding-top: 100px;
    font-size: 18px;
    font-family: 'Orbitron', Arial, sans-serif;
}

    header .box_angles .content {
        position: relative;
        color: white;
        text-align: right;
        font-weight: bold;

    }

    header .box_angles h1 {
        font-weight: bold;
        font-size: 60px;
    }
    header p {
        margin: 0;
    }
    header .window_box {
        background-color: white;
    }

footer {
    background-color: #f1f2ff;
    color: black;
    font-family: Arial, sans-serif;
}
body {
    padding-top: 0px;
    display: flex;
    flex-direction: column;
    background-color: var(--backgroundWebsite);
    color: var(--purpleDarkest);
}

.abstract {
        font-family: Arial;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.navbar {
    color: var(--purpleDark);
    background-color: var(--backgroundWebsite);
    font-family: 'White Rabbit', Arial, sans-serif;
}
    .navbar a {
        color: var(--purpleDarkest);
    }
    .navbar a:hover {
        color: var(--purpleDark);
    }
    .navbar a:visited {
        color: var(--purpleDark);
    }

    article a {
        color: purple;
        text-decoration: none;
        position: relative; 
    }
    
    article a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px; 
        background-color: var(--purpleDarkest);
        left: 0;
        bottom: -2px;
        transition: width 0.3s ease-in-out; 
    }
    
    article a:hover::after {
        width: 100%;
    }
    
    article a:hover {
    color: purple;
}

.dropdown-item:active{
    color: white;
    background-color: var(--purpleLight);
}

.window_box_text a:visited {
    color: var(--purpleDarkest);
    text-decoration: none;
}

.window_box_text a {
    color: purple;
    text-decoration: none;
    position: relative; 
}

.window_box_text a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; 
    background-color: var(--purpleDarkest);
    left: 0;
    bottom: -2px;
    transition: width 0.3s ease-in-out; 
}

.window_box_text a:hover::after {
    width: 100%;
}

.window_box_text a:hover {
color: purple;
}

.window_box_text a:visited {
color: var(--purpleDarkest);
text-decoration: none;
}

.abstract {
    color: var(--purpleDarkest)
}

.abstract a:visited {
    color: var(--purpleDarkest);
    text-decoration: none;
}
.abstract a {
    color: purple;
    text-decoration: none;
    position: relative; 
}

.abstract a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; 
    background-color: var(--purpleDarkest);
    left: 0;
    bottom: -2px;
    transition: width 0.3s ease-in-out;
}

.abstract a:hover::after {
    width: 100%;
}

.abstract a:hover {
color: purple;
}

.abstract a:visited {
color: var(--purpleDarkest);
text-decoration: none;
}
.box_angles a:visited {
    color: var(--purpleDarkest);
    text-decoration: none;
}

.box_angles a {
    color: purple;
    text-decoration: none;
    position: relative;
}

    .box_angles a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: var(--purpleDarkest);
        left: 0;
        bottom: -2px;
        transition: width 0.3s ease-in-out;
    }

    .box_angles a:hover::after {
        width: 100%;
    }

    .box_angles a:hover {
        color: purple;
    }

    .box_angles a:visited {
        color: var(--purpleDarkest);
        text-decoration: none;
    }

    .box_angles a:visited {
        color: var(--purpleDarkest);
        text-decoration: none;
    }

table a {
    color: purple;
    text-decoration: none;
    position: relative;
}

    table a::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: var(--purpleDarkest);
        left: 0;
        bottom: -2px;
        transition: width 0.3s ease-in-out;
    }

    table a:hover::after {
        width: 100%;
    }

    table a:hover {
        color: purple;
    }

    table a:visited {
        color: var(--purpleDarkest);
        text-decoration: none;
    }

figure {
    scroll-margin: var(--height_menubar);
}




table {
    scroll-margin: var(--height_menubar);
}



/* Text colours */
.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--purpleDarkest); }
.bg-white {font-family: 'White Rabbit', Arial, sans-serif; }
.bg-hero { background-color: var(--purpleDarkest); 
           font-family: 'White Rabbit', Arial, sans-serif; 
           }


/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: var(--purpleDarkest); font-weight: bold; text-decoration: none; }
footer a:hover { color: var(--purpleDark); text-decoration: underline; }

/* content page */
.main_content { color: black; 
}



section {
    scroll-margin: var(--height_menubar);
}


article h1 {
    padding-top: 40px; /*same as TOC and padden header bottom*/
    position: relative;
    scroll-margin: var(--height_menubar);
    color: var(--purpleDarkest);
    font-weight: bold;
    font-family: Consolas;
}

.line-h1 {
    position: relative;
    border-top: 4px solid var(--purpleDarkest);
    margin-left: -15px;
    margin-right: -15px;
    padding-bottom: 20px;
}
    .line-h1:before,
    .line-h1:after {
        position: absolute;
        top: -7px;
        left: -5px;
        height: 10px;
        width: 10px;
        background: var(--purpleDarkest);
        content: '';
        border-radius: 5px;
    }
    .line-h1:after {
        right: -5px;
        left: auto;
    }

article h2 {
    position: relative;
    scroll-margin: var(--height_menubar);
    color: var(--purpleDark);
    font-weight: bold;
    font-family: Consolas;
}


.line-h2 {
    position: relative;
    border-top: 4px solid var(--purpleDark);
    padding-bottom: 10px;
    margin-left: -5px;
    margin-right: -5px;
}

    .line-h2:before,
    .line-h2:after {
        position: absolute;
        top: -7px;
        left: -5px;
        height: 10px;
        width: 10px;
        background: var(--purpleDark);
        content: '';
        border-radius: 5px;
    }

    .line-h2:after {
        right: -5px;
        left: auto;
    }






article h3 {
    position: relative;
    scroll-margin: var(--height_menubar);
    color: var(--purpleNormal);
    font-weight: bold;
    font-family: Consolas;
}

.line-h3 {
    position: relative;
    border-top: 4px solid var(--purpleNormal);
    padding-bottom: 10px;
    margin-left: -5px;
    margin-right: -5px;
}

    .line-h3:before,
    .line-h3:after {
        position: absolute;
        top: -7px;
        left: -5px;
        height: 10px;
        width: 10px;
        background: var(--purpleNormal);
        content: '';
        border-radius: 5px;
    }

    .line-h3:after {
        right: -5px;
        left: auto;
    }

/*****************************HYPERLINKS****************************************/




/*************************button link**************************/

.btn-link {
    position: relative;
    border: none;
    color: white !important;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    width: 100%;
    height: 100%;
    padding-left: 30px;
}


    .btn-link:hover {
        background-color: var(--purpleLight);
    }
/**********************RReferences*********************************/

/* change the button of the references*/

#button-references-content {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


/*If you change the background color of the text color of the button, please also change it in references.js*/




.btn-references {
    position: relative;
    border: none;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    width: 100%;
    height: 100%;
    padding-left: 30px;
}


.btn-references:hover {
    background-color: var(--purpleLight)
}
/*change how the content is visible after collapsing the references*/

.collapsable-references {
    position: relative;
    border: 4px solid var(--purpleDarkest);
    border-top: 0;
    background-color: var(--purpleLight);
    margin-top: -4px;
    z-index: 99;
}
.csl-entry {
    margin: 0; /* Remove any margin if causing space issues */
    padding: 0; /* Remove padding if causing extra space */
    display: flex; /* Align items if needed */
    scroll-margin: var(--height_menubar);
}

.csl-left-margin {
    margin-right: 0.5em; /* distance between number of source and the citation itself */ 
}

/*when you click on a reference in the text, you scrol down to this reference and this animation is played*/
.references .emphasise {
    animation: pulse 1s;
    animation-duration: 3s;
}

.previous_section_button {
    position: fixed;
    bottom: 10%;
    right: 1%;
    z-index: 9;
    background-color: var(--purpleDarkest);
    color: white;
    border-radius: 50%;
    border: none;
    text-align: center;
    padding: 20px;
    z-index: 10;

}

/*******************************standard collapsable**********************************************************/

#standardButtonCollapsable-content {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


/*If you change the background color of the text color of the button, please also change it in references.js*/

.btn-standard-collapsable {
    position: relative;
    border: none;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    width: 100%;
    height: 100%;
    padding-left: 30px;
}


    .btn-standard-collapsable:hover {
        background-color: var(--purpleLight)
    }
/*change how the content is visible after collapsing the references*/

.collapsable-paragraph {
    position: relative;
    border: 4px solid var(--purpleDarkest);
    border-top: 0;
    background-color: var(--purpleLight);
    margin-top: -4px;
    z-index: 99;
}
/**********************************************************************************************************/

/*Folders for the menu items - 2 different possibilities*/

/***********************Standard-Table_of_contents********************************/



.sticky-sidebar {
    top: calc(var(--height_menubar));
    padding-top: 40px; /*same as the padding above h1 and bottom of header*/
}
/* these makte the TOC move when you hover over it. madewith animate.css*/
/*section*/
.main_content nav ul li {
    list-style-type: none;
}


/*the style of the TOC paragraps normal*/
.main_content nav a {
    color: #333;
    position: relative;
    transition: all;
    display: block;
    width: 100%;
    text-decoration: none;
    color: var(--purpleDarkest);
}
.main_content nav a:hover {
    font-weight: bold;
    color: var(--purpleDark)!important;
}

/* style of the TOC paragraphs when you are at that specific section */
.TOC_active {
    font-weight: bold;
    color: var(--purpleDark)!important;
}


/***************************kettes box****************************************************/



/*
    <div class="row">
        <div class="col-md-4">
            <div class="window_box_container">
                <div class="window_box_background"></div>
                    <div class="window_box_outer"></div>
                <div class="window_box">
                    <div class="window_box_border_text">Border Text</div>
                    <span class="window_box_dot2">
                    </span>
                    <div class="window_box_text"><a>dafkjafkaksfjkldj hdif j hdfioajfaifj daiffhdifh[]</a></div>

                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="window_box_container">
                <div class="window_box_background"></div>
                    <div class="window_box_outer"></div>
                <div class="window_box">
                    <div class="window_box_border_text">Border Text</div>

                    <span class="window_box_dot2">
                    </span>
                    <div class="window_box_text"><a>dafkjafkaksfjkldj hdif j hdfioajfaifj daiffhdifh[]</a></div>

                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="window_box_container">
                <div class="window_box_background"></div>
                    <div class="window_box_outer"></div>
                <div class="window_box">
                    <div class="window_box_border_text">Border Text</div>

                    <span class="window_box_dot2">
                    </span>
                    <div class="window_box_text"><a>dafkjafkaksfjkldj hdif j hdfioajfaifj daiffhdifh[]</a></div>

                </div>
            </div>
        </div>

    </div>


    It is first in a bootstrap row en then in the bootstrap column. The size of the box sizes with the width of the bootstrap column
*/


/* Maybe instead of width:33% you can place it in a bootstraph column with this width and then change the width to 100% here*/
.window_box_container {
    position: relative;
    width: 100%;
    height: auto;
}
.window_box_border_text {
    position: absolute;
    top: -30px;
    left: 0px;
    padding: 0 10px;
    background-color: #787FB6; /* Match the top border color */
    color: #fff; /* Text color */
    font-size: 12px;
    line-height: 30px; /* Same height as the top border */
    z-index: 10; /* Ensure the text stays on top of the border */
    font-weight: bold;
}
.window_box_background {
    position: absolute;
    width: calc(100% - 4px);
    height: 100%;
    background-color: #454C81;
    right: -4px;
    bottom: -8px;
    z-index: 3;
    overflow: visible;
}
.window_box {
    position: relative;
    top: 0px;
    left: 0px;
    width: 99%;
    height: 97%;
    border: 3px solid #454C81; /* Regular border for the sides and bottom */
    border-top: 30px solid #787FB6; /* Thicker top border */
    padding: 10px;
    box-sizing: border-box; /* Include padding and borders in the element's size */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--backgroundWebsite);
    z-index:5;
}
.window_box_outer {
    position: absolute;
    padding: 0px; /* Space between the borders */
    border: 3px solid #454C81; /* Outer border color */
    width: 99%;
    height: 30px;
    z-index: 15;
}

.window_box::before,
.window_box::after,
.window_box .window_box_dot2 {
    content: '';
    position: absolute;
    top: -22.5px; /* Position the dots just above the top border */
    width: 15px;
    height: 15px;
    border-radius: 50%; /* Make the dots circular */
}

/* First dot */
.window_box::before {
    background-color: #FEECC1;
    right: 45px; /* 30px from the right edge */
    border: 2px solid #454C81;
}

/* Second dot */
.window_box .window_box_dot2 {
    background-color: #ECA24B;
    right: 25px; /* 15px from the right edge */
    border: 2px solid #454C81;
}

/* Third dot */
.window_box::after {
    background-color: #EC6682;
    right: 5px; /* Align with the right edge */
    border: 2px solid #454C81;
}

.window_box_text {
    padding-left: 15px;
    padding-right: 15px;
}

.window_box_text h1 {
    font-family: Consolas;
}

/*********************************************************************************/

/*The following css starting with .flip creates images that can turn around and show text/another image*/

  .flip-box-inner {
    width: 100%;
    height: 250px;
    text-align: center;
    transition: transform 0.01s;
    transform-style: preserve-3d;
    padding-bottom: 5%;
  }
  
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-box-front {
    color: black;
  }
  
  .flip-box-back {
    background-color: #A5A8D5;
    color: white;
    transform: rotateY(180deg);
    border:2px solid #454C81;
  }

  @media (max-width: 576px) {
    .flip-box-inner {
      height: 100px;
      width: 80%;
    }
  }

.zigzag-container {
    position: relative;
    width: 100%;
    height: 100vh;
}


.tab content:hover {
    background-color: #787FB6;
    color: white !important;
    height: 100% !important;
    font-weight: bold;
    cursor: pointer;
}


/* Tabs styling */
.tabbar {
    display: flex;
    width: 70vw;
    justify-content: space-evenly;
    align-items: stretch;
    align-content: stretch;
    margin: auto auto;
    margin-bottom: 5vh;
}

.tab {
    align-items: center;
    flex: 1;
    margin: unset !important;
    padding: 0px; /*original 20px*/
    background-color: #A5A8D5;
    color: white;
    font-weight: bold;
    text-decoration: none !important;
    align-content: center;
    text-align: center;
    border: 2px;
    border-style: solid;
    min-height: 80px;
}
  
  .main-block-container {
    font-size: 1.2rem;
    margin: auto;
  }
  
  .tab:hover {
    background-color:  #787FB6;
    color: white !important;
    height: 100% !important;
    font-weight: bold;
    cursor: pointer;
  }
  
  .tab.active {
    background-color:  #787FB6;
    color: white !important;
    font-weight: bold;
  }
  
  .tabcontent {
    display: none;
    height: 0;
  }
  
  .tabcontent.active {
    display: block;
    height: fit-content;
  }

  .first {
    margin-top: 1rem;
}

@media only screen and (max-device-width: 768px) {
    .tabbar {
      flex-direction: column !important;
    }
    .tab {
      width: 100% !important;
    }
}





/************************************************weird boxes********************************************************/
/*
    How to use?
<div class="row mb-4">
            <div class="col-8">
                <div class="box_angles rightTopCorner_40_var(--purpleDark)_var(--purpleDarkest)_4">
                    <div class="content">
                        <p>hoiadakjfdkjf hoe gaat het met jouw met maij fda gaat het wel goed  halleo hoe gaat het</p>
                        <img class="img-fluid" src="https://static.igem.wiki/teams/5106/homepage/brain-lesions.webp" />

                    </div>                   
                </div>
            </div>
        </div>
    The box sizes with the parent container.
    The size of the angle is determind by the last number, in this case 40. 40 means 40% of the pixel HEIGHT!
    ALWAYS ADD THE CONTENT IN THE CONTENT BOX
    
    The p-2 is a bootstrap thing. It is there to set the padding between the content of the box and the box itself!
    If ther is not enough space betweeen  the content and the box, increase the padding with this variable. 

    These css elements only work in combination with the shape_angle_Kette.js

    leftTopCorner
    rightTopCorner
    leftBottomCorner
    rightBottomCorner
    rightLeftBottomCorner
    rightLeftTopCorner
    leftBottomRightTopCorner
    leftTopRightBottomCorner 


    set background color and border color:
    the last number is the border widht in pixels!!
    rightTopCorner_40_borderColor_backgroundColor_4

    eg.

    rightTopCorner_40_var(--purpleDarkest)_#5442244

    */
.box_angles {
    position: relative;
    height: 100%;
}


.box_angles_inner {
    position: absolute;
    z-index: 2;
}
.box_angles_outer {
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

.box_angles_inner .content {
    position: absolute;
    align-content: center;
    height: 100%;
    width: 100%;
    z-index: 10;
    color: white;
}

#navbar-lottie-logo-container {
    position: relative;
    height: 50px;
    width: 200px;
    overflow: visible;
    align-items: center;
}
#lottie-miRADAR-logo {
    position: absolute;
    top: -25px;
    left: 0px;
    height: 100px;
}

p {
    text-align: justify;
}

.btn-link {
    position: relative;
    border: none;
    color: white;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    width: 100%;
    height: 100%;
    padding-left: 30px;
}


    .btn-link:hover {
        background-color: var(--purpleLight)
    }


figure figcaption{
    font-size:small !important;
}


    /* fluid images for stakeholders */
    @media (min-width: 768px) {
        .stakeholder-img {
            width: 20%;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .stakeholder-img{
            width: 50%;
        }
    }

    .col-md-4.custom-toc {
        margin-left: -55px; /* Move the TOC container to the left */
    }

/* code for sponsor carousel */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.sponsor-logos {
    overflow: hidden;
    padding: 0 0;
    white-space: nowrap;
    position: relative;
}

.sponsor-logos:before,
.sponsor-logos:after {
    position: absolute;
    top: 0;
    width: 50px;
    height: 100%;
    content: "";
    z-index: 2;
}

.sponsor-logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #f1f2ff);
}

.sponsor-logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #f1f2ff);
}

.sponsor-logos:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 30s slide infinite linear;
}

.logos-slide img {
    height: 100px;
    margin: 0 40px;
}