/* COLOURS */

body {
    /* the 'l' prefix indicates light colours */
    --purple:   #55007d;
    --lpurple:  #efdcf7;
    --pink:     #9c0649;
    --lpink:    #ffe0ee;
    --pink2:    #d44ec9;
    --blue:     #397ca8;
    --lblue:    #d4ebfa;
    --teal:     #3b8a83;
    --lteal:    #d4fff7;
    --green:    #267a31;
    --lgreen:   #cfffe0;
    --orange:   #d99102;
    --lorange:  #ffebc9;

    --hmbc: var(--purple);
    --lhmbc: var(--lpurple);
    --n15: var(--blue);
    --ln15: var(--lblue);
    --ci13: var(--green);
    --lci13: var(--lgreen);
    --c13: var(--orange);
    --lc13: var(--lorange);
    --h1: var(--pink);
    --lh1: var(--lpink);
}

h2#modules_h2 {
    margin-bottom: 0px;
    padding-bottom: 0px;
}


/* Module selector */
div#chooser {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

div.chooser-overall {
    border: 1px dashed;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

div.chooser_modules {
    align-self: center;
}

/* labels at the top of each column */
div.chooser_text {
    text-align: center;
    font-size: 125%;
    font-weight: bold;
}

/* the list of modules */
div.chooser_modules {
    text-align: center;
    font-size: 110%;
    padding: 5px;
}

/* overall look of the list */
div.chooser_modules>ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-row-gap: 8px;
    grid-column-gap: 8px;
}

/* set a manual limit on the height of the 1H box */
div.chooser_modules.h1>ul {
    grid-template-rows: repeat(11, auto);
}
/* then set the 1H None label to be longer */
li#li_h1_none {
    grid-column: 1 / 3;
}
li#li_h1_none>label {
    width: 100%;
}

/* radio buttons */
/* https://markheath.net/post/customize-radio-button-css */
/* disable the original radio buttons first. we only style the labels */
.chooser_modules input[type="radio"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

/* then style the labels. This applies to all labels. */
.chooser_modules label {
    display: inline-block;
    border: 1px solid black;
    padding: 1.5px;
    border-radius: 2px;
    height: auto;
    width: 140px;
}
/* but we shrink some of them a bit for smaller viewports */
@media (max-width: 1059px) {
    div.hmbc > div.hmbc label, div.n15 > div.n15 label {
        width: 95px;
    }
    div.ci13 > div.ci13 label {
        width: 120px;
    }
}

@supports (transition-property: background-color) {
    .chooser_modules label {
        transition-property: background-color;
        transition-duration: 0.2s;
    }
}

.chooser_modules input[type="radio"]:focus + label {
    box-shadow: 0 0 4px 2px #aaaaaa;
}

/* this applies to all labels that immediately follow a checked radio button */
.chooser_modules input[type="radio"]:checked + label {
    font-weight: bold;
    padding: 0;
    border: 2.5px solid black;
}

/* COLOURS */
div.hmbc, div.hmbc label {
    color: var(--hmbc);
    border-color: var(--hmbc);
}

div.hmbc label:hover, div.hmbc input[type="radio"]:checked + label {
    background-color: var(--lhmbc);
    border-color: var(--hmbc);
}


div.n15, div.n15 label {
    color: var(--n15);
    border-color: var(--n15);
}

div.n15 label:hover, div.n15 input[type="radio"]:checked + label {
    background-color: var(--ln15);
    border-color: var(--n15);
}

div.ci13, div.ci13 label {
    color: var(--ci13);
    border-color: var(--ci13);
}

div.ci13 label:hover, div.ci13 input[type="radio"]:checked + label {
    background-color: var(--lci13);
    border-color: var(--ci13);
}

div.c13, div.c13 label {
    color: var(--c13);
    border-color: var(--c13);
}

div.c13 label:hover, div.c13 input[type="radio"]:checked + label {
    background-color: var(--lc13);
    border-color: var(--c13);
}

div.h1, div.h1 label {
    color: var(--h1);
    border-color: var(--h1);
}

div.h1 label:hover, div.h1 input[type="radio"]:checked + label {
    background-color: var(--lh1);
    border-color: var(--h1);
}