body {
    overflow:auto;
}

h1, h2, h3, h4 {
    text-align:center;
}

h4 {
    margin:0.5em;
    display:inline-block;
}

body > section {
	display:flex;
	flex:1;
	flex-direction:row;
}

body > section > nav {
    overflow-y:auto;
}

div > *, section#main-content > * {
    background-color:white;
    margin:5px;
}

header {
    background-color:darkcyan;
    color:white;
    display:flex;
    flex-direction:row;
    text-align:center;
    vertical-align:middle;
    min-height:50px;
    /*height:fit-content;*/
    margin:0 0 5px 0;
}

article header {
    background-color:white;
    color:black;
}

footer {
    background-color:lightgrey;
    font-size:xx-small;
    height:30px;
    overflow:auto;
    /*min-height:30px;*/
}

footer ul {
    display:flex;
    width:100%;
}

footer ul li {
    text-align:center;
    flex:1;
}

header a {
    color:white;
    text-decoration:none;
}
    
h1 {
    font-size:2em;
}

body > header {
    min-height:150px;
}

header img {
    height:50px;
    width:auto;
    margin:auto;
}

/*#box_intro img {*/
#box_intro figure {
    width:40%;
    float:right;
}

figcaption {
    font-size:xx-small;
    text-align:center;
    margin:auto;
}

header h1, header h2 {
    flex:1;
    vertical-align:middle;
    margin:auto;
    /*height:50px;*/
}

/*body > *:last-child {*/
    /*display:flex;*/
    /*flex:1;*/
    /*flex-direction:column;*/
/*}*/

/*body > *:last-child > section {*/
    /*flex:1;*/
/*}*/

section.content {
    display:flex;
    flex:1;
    flex-direction:column;
}

section.content > section {
    flex:1;
}

ul {
    list-style-type:none;
    padding:0;
}

#main_content nav {
    width:100%;
    display:flex;
}

#main_content > header {
    background-color:lightgrey;
    flex-direction:column;
}

form {
    margin:2px 0px 0px 0px;
}

form#strat_categories:not(.active) {
    display:none;
}

nav > ul {
    display:flex;
    margin:0px;
    width:100%;
}
    
ul li {
    flex:1;
}

nav > ul li {
    background-color:darkcyan;
    border-radius:0px 0px 5px 0px;
}

nav > ul li.active {
    background-color:darkgrey;
}

nav > ul li:not(:first-child) {
    margin-left:2px;
}

img {
    /*height:50%;*/
    width:70%;
    margin:auto;
    display:block;
}

article {
    clear:both;
    display:block;
    overflow-y:auto;
}

#box_intro article:not(.active) {
    display:none;
}

section#box_intro {
    /*overflow:scroll;*/
    overflow:auto;
    padding:2em;
}

.expandable article li {
    font-weight:bold;
    margin-left:20px;
    list-style-type:none;
}

.expandable article > li {
    list-style-image:url('/static/img/arrow_right.png');
}

.expandable article > li.active {
    list-style-image:url('/static/img/arrow_down.png');
}

.expandable article li ~ p:not(.active) {
    display:none;
}

.expandable article li ~ img:not(.active) {
    display:none;
}

.expandable article li ~ figure:not(.active) {
    display:none;
}

.expandable article li ~ ul:not(.active) {
    display:none;
}

.expandable article li ~ ul.active {
    list-style-type:disc;
    padding:0 40px 40px 40px;
}

.expandable article li ~ ul.active li {
    font-weight:normal;
    list-style-type:disc;
}

#main_content > section:not(.active) {
    display:none;
}

#box_strategies, #box_combinations {
    background-color:lightgrey;
	display:flex;
	flex-direction:column;
}

#box_strategies > section {
    background-color:lightgrey;
    display:flex;
	flex:1;
    flex-direction:row;
    /*justify-content:space-around;*/
}

#box_strategies > section:last-child {
    background-color:white;
}

#box_strategies article {
    background-color:white;
    flex:1;
    display:flex;
    flex-direction:column;
    margin:5px 0px 5px 0px;
}

#box_strategies > section:first-child article ~ article {
    margin-left:5px;
}

/*#box_strategies section:not(:first-child) > article:not(.active) {*/
#box_strategies article.detail:not(.active) {
	display:none;
}

#box_strategies article.detail {
    display:flex;
    flex-direction:row;
    padding:1em;
    position:relative;
}

#box_strategies article.detail div {
    flex:1;
}

/*article.detail img {*/
article.detail figure {
    /*width:50%;*/
    height:auto;
    margin:auto;
    position:relative;
}

#box_combinations > section {
    background-color:lightgrey;
    display:flex;
	flex:1;
    flex-direction:row;
    /*justify-content:space-around;*/
}

#box_combinations article {
    background-color:white;
    flex:1;
    margin:5px 0px 5px 0px;
    position:relative;
}

#box_combinations article ~ article {
    margin-left:5px;
}

#box_combinations > section:first-child article:not(:first-child) > article:not(.active) {
	display:none;
}

#box_combinations section:not(:first-child) article {
    display:flex;
    flex-direction:row;
}

#box_combinations section:not(:first-child) article div{
    padding:1em;
    flex:1;
}

/*#box_combinations section:not(:first-child) > article:not(.active) {*/
	/*display:none;*/
/*}*/

/* Test */

#list_strat {
    list-style-type:none;
    margin:auto;
    width:fit-content;
    /*overflow-y:scroll;*/
    overflow-y:auto;
}

section#box_strategies:not(.full) header ~ *:not(.alt) {
    display:none;
}

section#box_strategies.full header ~ *.alt {
    display:none;
}

/*ul#list_strat:not(.full) {*/
    /*display:none;*/
/*}*/

#box_strategies span {
    display:inline-block;
    height:1em;
    width:1em;
}

/*ul#list_strat span, ul#list_strat, a.uhi_info_icon { */
    /*display:none;*/
/*}*/

#list_strat input {
    display:none;
}

a.uhi_info_icon {
    color:black;
    font-size:smaller;
    margin:3px 3px 3px 4px;
    text-decoration:none;
}

#box_strategies span.tooltip span.tooltiptext {
    background-color:white;
    border-radius:5px;
    height:auto;
    margin:0 0 0 20px;
    position:absolute;
    width:auto;
    visibility:hidden;
    z-index:1;
}

#box_hvi {
    overflow:auto;
}

#box_hvi header {
    background-color:white;
    color:black;
}

#box_hvi article {
    display:flex;
    flex-direction:row-reverse;
}

#box_hvi div {
    margin:auto 10px;
    max-width:20%;
}

#box_hvi p {
    margin:0 auto 1em auto;
}

#box_hvi h5 {
    margin: auto 0 auto;
    font-size:small;
}

#box_hvi iframe {
    margin:auto;
}

.tooltiptext p {
    text-align:left;
}

#list_strat span.tooltip:hover .tooltiptext {
    visibility:visible;
}

article.placeholder {
    flex:1;
}

#box_combinations h3, h4 {
    color:black;
}

#box_strategies h3, h4 {
    color:black;
}

header h4 {
    color:white;
}

#main_content .obscured {
    display:none;
}

#main_content .zoomicon {
    position:absolute;
    top:0px;
    right:0px;
    display:block;
}