:root {
    --header-background-colour: rgb(0, 0, 200);
    /* --background-colour: rgb(240, 240, 240); */
    /* --background-colour: rgb(230, 240, 251); */
    /* --background-colour: rgb(0, 0, 146); */
    /* --background-colour-alt: rgb(0, 0, 175); */
    /* --border-colour: rgba(255, 255, 255, 0.5); */
    --font-colour: rgb(40, 40, 40);
    --header-colour: rgb(210, 210, 210);
    --header-font-colour: rgb(237, 237, 237);
    --control-colour: rgb(40, 40, 40);
    --anim-speed: 150ms;
    --header-background-colour-alt: rgb(128, 147, 241);
    --background-colour: rgb(245, 243, 245);
    --background-colour-alt: rgb(245, 243, 245);
    --border-colour: rgb(100, 100, 100);
    --exam-border-colour: rgb(100, 100, 100);
    --exam-border-colour-alt: rgb(140, 140, 140);
    --background-colour-lite: rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 800px) {
    :root {
        --header-background-colour-alt: rgb(0, 0, 200);
        --border-colour: rgb(237, 237, 237);
        --font-colour: rgb(237, 237, 237);
        --background-colour: rgb(0, 0, 200);
        --background-colour-alt: rgb(53, 53, 190);
        --control-colour: rgb(210, 210, 210);
    }
}


/* Fill in section from style.css */
.wavetag-control-row {
    display: flex;
    flex-direction: row;
}

#inspect-url-container {
    height: 30px;
}

.wavetag-control-span {
    margin: auto;
}


.wavetag-control-search-result {
    width: 15.4%;
    background-color: var(--border-colour);
}

#content-inspect-url-label {
    font-weight: bold;
    font-size: 90%;
    padding-left: 10px;
    margin-left: 0px;
    margin-right: 0px;
    /*width: 15.4%; */
    width: 20%;
}

#inspect-url-container {
    background-color: var(--background-colour);
    border: solid 2px;
    width: 99.5%;
    border-color: var(--border-colour);
}

.inspect-url-result {
    background-color: var(--background-colour-lite);
    border: solid 2px;
    border-top: none;
    border-color: var(--border-colour);
    border-radius: 0px 0px 10px 10px;
    padding-top: 10px;
}

.exam-item-wrapper {
    display: flex;
    padding: 2px;
    padding-top: 5px;
}

.exam-item-heading {
    display: flex;
    /* width: 99%; */
    /* border: 1px solid #cccccc; */
    border: 1px solid var(--border-colour);
    border-radius: 0px 6px 6px 0px;
    margin-right: 1%;
    background-color: var(--background-colour-alt);
}

.exam-item-label {
    width: 25%;
    padding-left: 3%;
    font-size: 14px;
    font-weight: bold;
}


.exam-item-value {
    /* max-width: 60%; */
    flex-grow: 1;
    overflow-wrap: break-word;
    /* Standard */
    word-wrap: break-word;
}

.exam-item-result {
    width: 13.2%;
    border-radius: 0px 5px 5px 0px;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
}

    .exam-item-result.false {
        border: 1px solid darkred;
        background-color: darkred;
        background-image: url(./icons/basic-cross-white.svg);
    }

    .exam-item-result.true {
        border: 1px solid darkgreen;
        background-color: darkgreen;
        background-image: url(./icons/basic-tick-white.svg);
    }

.exam-section-wrapper {
    display: flex;
    margin-bottom: 5px;
    /* margin: 2px; */
    /* padding: 2px; */
    /*border: 1px solid blue;*/
}

.exam-section-heading {
    display: flex;
    width: 99%;
    border: 1px solid var(--exam-border-colour);
    /* padding-left: 10px; */
    border-radius: 0px 6px 6px 0px;
    background-color: var(--background-colour-alt);
}

.exam-section-label {
    padding-left: 10px;
    /* width: 65%; */
    font-size: 16px;
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 2px;
    flex-grow: 100;
}

.exam-section-launch {
    margin-left: auto;
    margin-right: 2px;
    /* margin: 2px;
    filter: invert(1); */
}

.exam-section-link {
    display: block;
    width: 20px;
    height: 20px;
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(./icons/launch.svg);
}

.exam-section-spacer {
    /* width: 20%; */
    /* flex-grow: 1; */
}

.exam-section-result {
    /* width: 10%; */
    width: 15%;
    border-radius: 0px 5px 5px 0px;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
}

    .exam-section-result.false {
        border: 1px solid darkred;
        background-color: darkred;
        background-image: url(./icons/basic-cross-white.svg);
    }

    .exam-section-result.true {
        border: 1px solid darkgreen;
        background-color: darkgreen;
        background-image: url(./icons/basic-tick-white.svg);
    }

.exam-test-wrapper {
    /* margin: 2px; */
    padding: 2px;
    /*border: 1px solid red;*/
}

.exam-test-heading {
    display: flex;
    /* width: 99%; */
    border: 1px solid var(--exam-border-colour-alt);
    background-color: var(--background-colour-alt);
    margin: 0.5%;
    margin-left: 1.5%;
    border-radius: 5px;
    /* padding-left: 10px; */
    /* margin-left: 10px; */
}

.exam-test-indent {
    /* width: 25%; */
    display: none;
}

.exam-test-description {
    /* width: 60%; */
    flex-grow: 1;
    padding-left: 5px;
}

.exam-test-result {
    /* width: 12.4%; */
    width: 11.8%;
    text-align: center;
    /* background-size: 12px 12px; */
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 0px 5px 5px 0px;
}

    .exam-test-result.false {
        border: 1px solid darkred;
        background-color: darkred;
        background-image: url(./icons/basic-cross-white.svg);
    }

    .exam-test-result.true {
        border: 1px solid darkgreen;
        background-color: darkgreen;
        background-image: url(./icons/basic-tick-white.svg);
    }

.exam-topic-wrapper {
    display: flex;
    margin: 2px;
    padding: 2px;
    /*border: 1px solid black;*/
}

.exam-topic-heading {
    display: flex;
    width: 100%;
    border: 1px solid var(--exam-border-colour-alt);
    padding-left: 10px;
}

    /* #region  exam-topic-heading*/
    .exam-topic-heading .black {
        border: 2px solid black;
    }

    .exam-topic-heading.blue {
        border: 2px solid blue;
    }

    .exam-topic-heading.green {
        border: 2px solid green;
    }

    .exam-topic-heading.orange {
        border: 2px solid orange;
    }

    .exam-topic-heading.red {
        border: 2px solid red;
    }

    .exam-topic-heading.yellow {
        border: 2px solid yellow;
    }

/* #endregion */

.exam-topic-label {
    width: 25%;
    font-size: 18px;
    font-weight: bold;
}

.exam-topic-content {
    width: 60%;
    margin-top: auto;
}

.exam-topic-result {
    /* width: 10%; */
    width: 13.2%;
    text-align: center;
    /* border-radius: 0px 5px 5px 0px; */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px;
}

    .exam-topic-result.black {
        border: 1px solid black;
        background-color: black;
        background-image: url(./icons/basic-danger-white.svg);
    }

    .exam-topic-result.blue {
        border: 1px solid blue;
        background-color: blue;
        background-image: url(./icons/basic-star-white.svg);
    }

    .exam-topic-result.green {
        border: 1px solid green;
        background-color: green;
        background-image: url(./icons/basic-triangle-white.svg);
    }

    .exam-topic-result.grey {
        border: 1px solid green;
        background-color: green;
        background-image: url(./icons/basic-hook-black.svg);
    }

    .exam-topic-result.orange {
        border: 1px solid orange;
        background-color: orange;
        background-image: url(./icons/basic-square-black.svg);
    }

    .exam-topic-result.purple {
        border: 1px solid purple;
        background-color: purple;
        background-image: url(./icons/basic-circle-white.svg);
    }

    .exam-topic-result.red {
        border: 1px solid red;
        background-color: red;
        background-image: url(./icons/basic-octagon-white.svg);
    }

    .exam-topic-result.yellow {
        border: 1px solid yellow;
        background-color: yellow;
        background-image: url(./icons/basic-triangle-180-black.svg);
    }

.wavetag-control-search-result {
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
    /* border-radius: 0px 5px 5px 0px; */
    background-size: 20px;
}

    .wavetag-control-search-result.black {
        border: 1px solid black;
        background-color: black;
        background-image: url(./icons/circle-danger-white.svg);
    }

    .wavetag-control-search-result.blue {
        border: 1px solid blue;
        background-color: blue;
        background-image: url(./icons/circle-star-white.svg);
    }

    .wavetag-control-search-result.green {
        border: 1px solid green;
        background-color: green;
        background-image: url(./icons/circle-triangle-white.svg);
    }

    .wavetag-control-search-result.grey {
        border: 1px solid green;
        background-color: green;
        background-image: url(./icons/circle-hook-black.svg);
    }

    .wavetag-control-search-result.orange {
        border: 1px solid orange;
        background-color: orange;
        background-image: url(./icons/circle-square-black.svg);
    }

    .wavetag-control-search-result.purple {
        border: 1px solid purple;
        background-color: purple;
        background-image: url(./icons/circle-circle-white.svg);
    }

    .wavetag-control-search-result.red {
        border: 1px solid red;
        background-color: red;
        background-image: url(./icons/circle-octagon-white.svg);
    }

    .wavetag-control-search-result.yellow {
        border: 1px solid yellow;
        background-color: yellow;
        background-image: url(./icons/circle-triangle-180-black.svg);
    }

.exam-twistie-button {
    background-image: url(./icons/arrow-folder.svg);
    width: 3%;
    padding: 1px;
    aspect-ratio: 1/1;
    margin-bottom: auto;
    margin-top: 4px;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

@media screen and (max-width: 800px) {
    .wavetag-control-search-result {
        width: 17.8%;
    }

    #content-inspect-url-label {
        padding-left: 2px;
        font-size: 82%;
        /*width: 17.8%;*/
        width: 20%;
    }

    #inspect-url-container {
        background-color: var(--background-colour);
        border: solid 2px;
        /* width: 99.5%; */
        border-color: var(--border-colour);
    }


    .exam-item-value {
        max-width: 200px;
    }

    .exam-twistie-button {
        filter: none;
        width: 4%;
    }

    .exam-item-label {
        width: 30%;
    }

    .exam-section-launch {
        margin: 2px;
        filter: invert(1);
    }
}


.exam-twistie-button.collapsed {
    transform: rotate(90deg);
}

.exam-twistie-button.expanded {
    transform: rotate(180deg);
}

.exam-twistie-content {
    /* margin-top: auto; */
    /* margin-bottom: auto; */
    flex-grow: 1;
    width: 96%;
}

/* holds all under */
.exam-twistie-children {
    border: 1px solid var(--border-colour);
    border-top: 0px;
    border-radius: 0px 0px 10px 10px;
    padding-top: 5px;
    padding-bottom: 0.75%;
    width: 98%;
    background-color: var(--background-colour-lite);
    ;
}

.hidden {
    display: none;
}