:root {
    --background: #FBF9FA;
    --text: #434242;
    --main: #22A39F;
    --mainlight: #22a39f2d;
  }

html, body { color: var(--text); font-family: 'Open Sans', sans-serif !important; }

	/* -ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; */

/**
 * Remove default margin.
 */

body {
	margin: 0;
    background-color: var(--background);
    background-image: url("background.png");
    background-size: 25%;
}

ul.experiences li {
    list-style-type: none;
    position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
    /* use padding-bottom instead of margin-bottom.*/ 
    margin-bottom: 0; /* This overrides previously specified margin-bottom */
    padding-bottom: 2em;
}

ul.experiences li:after {
    /* bullets */
    content: url('circle-fill.svg');
    transform: scale(.5);
    position: absolute;
    left: 81.5px; /*adjust manually*/
    top: -1.2px;
}

ul.experiences li:before {
    /* lines */
    content: attr(data-checked);
    position: absolute;
    left: -30px; /* adjust manually */
    border-right: 1px solid var(--text);
    height: 100%;
    width: 120px;
    margin-bottom: 0;
    font-size: 80%;
}

ul.experiences li:first-child:before {
   /* first li's line */
   top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences li:last-child:before {
    /* last li's line */
   height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

.what {
    margin-left: 115px; /*adjust manually*/
    font-size: 90%;
    font-weight: bold;
}

.title {
    margin-left: 115px; /*adjust manually*/
    text-transform: uppercase;
    font-style: italic;
    font-size: 70%;
}

.where {
    float: right;
    color: #b9b9b9;
    font-style: italic;
    font-size: 70%;
}

ul.descriptions li {
    list-style-type: circle;
    position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
    /* use padding-bottom instead of margin-bottom.*/ 
    margin-left: 100px; /*adjust manually*/
    margin-bottom: 0; /* This overrides previously specified margin-bottom */
    padding-bottom: 0em;
    font-size: 80%;
    width: 100%;
}

ul.descriptions li:after {
    /* bullets */
    content: None;
    position: absolute;
    left: 0px; /*adjust manually*/
    top: 0px;
}

ul.descriptions li:before {
    /* lines */
    content: None;
    position: absolute;
    left: 0px; /* adjust manually */
    border-right: None;
    height: 0%;
    width: 0px;
    margin-bottom: 0;
    padding-bottom: 0em;
}

/* change color of accoridon header if not collapsed */
.accordion-button:not(.collapsed) {
    background-color: var(--mainlight);
    color: var(--main);
}

.accordion-button.collapsed {
    background-color: var(--background);
    color: var(--text);
}

/* Style for the accordion header of the cover letter with class name = coverletter*/
div.coverletter h2.accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--background);
    color: var(--text);
    font-size: 2vw;
}

div.coverletter h2.accordion-header .accordion-button.collapsed{
    font-size: 2vw;
}

/* button style if accordion is closed */
/* .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='red' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
} */

/* button style if accordion is open */
/* to change the color use fill='%23YOUR_HEX_CODE'%3e%3cpath only change YOUR_HEX_CODE wihtout # at the beginning*/
/* other data comes from here: https://icons.getbootstrap.com/icons/chevron-compact-up/ */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2322A39F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* .radio-group button {
    color: var(--main);
}

.radio-group button:disabled {
    color: black;
} */

/* Buttons */
/* .radiobutton-group > label {
    padding: .25em .5em;
    cursor: pointer;
    border: 1px solid #28608f;
    margin-right: -1px;
    color: #fff;
    background-color: #428bca;
} */

/* .btn {
    color: var(--main);
    border-color: var(--main);
}

.btn:hover {
    color: white;
    border-color: var(--main);
    background-color: var(--main);
}

.form-check:active, .form-check.active, .form-check:focus, .form-check.focus{
    color: white;
    border-color: var(--main);
    background-color: var(--main);
} */

/* .btn:active{
    color: white;
    border-color: var(--main);
    background-color: var(--main);
} */
/* 
.sideButton:focus,
.sideButton:active,
.sideButton.active {
    color: white;
    border-color: var(--main);
    background-color: var(--main);
} */

/* .btn:selected{
    color: white;
    border-color: var(--main);
    background-color: var(--main);
} */

/* Style dropdown menu (dcc.dropdown)
more details here: https://community.plotly.com/t/change-textcolor-for-dropdown-menu/35230/3 */

/* input box */
.Select-control {
    background-color: var(--tertiary) !important;
    color: var(--main);
}

/* changes the text color of input box */
.Select-menu-outer {
    background-color: "white";
    /* color: var(--main) !important; */
}

/* changes the text color of input box */
/* .Select-value-label {
    color: var(--main) !important;
} */

/* data table header center align */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th{
    text-align: center !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    text-align: left !important;
}

.rc-slider-track {
    background-color: var(--main);
  }
  
.rc-slider-dot-active {  
border-color: var(--main);
border: solid 2px var(--main);
}

.rc-slider-handle {
border-color: var(--main);
}

.rc-slider-handle:hover {
border-color: var(--mainlight);
}

.rc-slider-handle-active:active {
border-color: var(--mainlight);
}

.rc-slider-tooltip-inner{
background-color: var(--main);
}

.pagination {
    text-align: center
}

.pdp-plot {
    height: 35vw !important;
    width: 35vw !important;
}

.pdp-space {
    height: 200px !important;
}

.pdp-map-space {
    height: 270px !important;
}

.ipl-boxplot {
    height: 180px !important;
}

.ipl-calibcurve {
    height: 200px !important;
}

.confusion-matrix {
    height: 250px !important;
    width: 250px !important;
}

.time-series {
    height: 500px !important;
}

.portrait {
    height:160px !important;
    width:160px !important;
}

.umap-plot {
    height:400px !important;
    width:500px !important;
}

.bayes-images {
    height:350px !important;
    width:175px !important;
}

.bayes-images-container {
    height:360px !important;
    width:200x !important;
}

.bayes-curves {
    height: 400px !important;
}

.bayes-pagination {
    width:215px !important;
}

.uncertrainty-pagination {
    margin-left:315px !important;
}

.uncertrainty-img {
    margin-left:25px !important;
    width:85% !important;
}

.sentence-body{
    height:180px !important;
}

.sentence-barplot{
    margin-top:10px !important;
    height:120px !important;
}

.sentence-barplot2{
    height:150px !important;
    margin-top:10px !important;
}

@media only screen and (max-width: 1200px) {
    .pdp-space {
        height: 230px !important;
    }
    
    .pdp-map-space {
        height: 300px !important;
    }
    
    .umap-plot {
        height:400px !important;
        width:400px !important;
    }

    .bayes-images {
        height:350px !important;
        width:175px !important;
    }
    
    .bayes-images-container {
        height:310px !important;
        width:200x !important;
    }
    
    .bayes-pagination {
        width:215px !important;
    }

    .uncertrainty-pagination {
        margin-left:200px !important;
    }
    .uncertrainty-img {
        margin-left:5px !important;
        width:95% !important;
    }

    .sentence-body{
        height:220px !important;
    }

    .sentence-barplot{
        height:120px !important;
    }

    .sentence-barplot2{
        height:150px !important;
    }
}

@media only screen and (max-width: 992px) {
    .pdp-plot {
        height: 31vw !important;
        width: 31vw !important;
    }
    .pdp-space {
        height: 320px !important;
    }
    .pdp-map-space {
        height: 380px !important;
    }
    .ipl-boxplot {
        height: 250px !important;
    }
    .ipl-calibcurve {
        height: 200px !important;
    }
    .confusion-matrix {
        height: 200px !important;
        width: 200px !important;
    }
    .time-series {
        height: 500px !important;
    }
    .portrait {
        height:130px !important;
        width:130px !important;
    }
    .umap-plot {
        height:100% !important;
        width:100% !important;
    }
    .bayes-images {
        height:300px !important;
        width:150px !important;
    }
    
    .bayes-images-container {
        height:310px !important;
        width:200x !important;
    }

    .bayes-curves {
        height: 300px !important;
    }
    
    .bayes-pagination {
        width:190px !important;
    }

    .pagination-sm .page-link {
        padding: 0.2rem 0.45rem;
        font-size: 0.7rem;
        line-height: 1.3; }
      
    .pagination-sm .page-item:first-child .page-link {
        border-top-left-radius: 0.2rem;
        border-bottom-left-radius: 0.2rem; }
      
    .pagination-sm .page-item:last-child .page-link {
        border-top-right-radius: 0.2rem;
        border-bottom-right-radius: 0.2rem; }

    .uncertrainty-pagination {
            margin-left:140px !important;
        }

    .sentence-body{
        height:300px !important;
    }

    .sentence-barplot{
        height:150px !important;
    }

    .sentence-barplot2{
        height:180px !important;
    }
}

@media only screen and (max-width: 768px) {
    .pdp-space {
        height: 390px !important;
    }
    .pdp-map-space {
        height: 440px !important;
    }
    .ipl-boxplot {
        height: 350px !important;
    }
    .ipl-calibcurve {
        height: 250px !important;
    }
    .confusion-matrix {
        height: 200px !important;
        width: 200px !important;
    }
    .portrait {
        height:110px !important;
        width:110px !important;
    }

    .uncertrainty-pagination {
        margin-left:160px !important;
    }

    .sentence-body{
        height:270px !important;
    }

    .sentence-barplot{
        height:150px !important;
        margin-top:10px !important;
    }

    .sentence-barplot2{
        height:180px !important;
        margin-top:15px !important;
    }
}