@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

: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);
}

/* Pallet 1
Black: 1a1d1a
main: 0000c8
dark blue: 414d69
light blue: 8da9c4
light : eef4ed
*/
/* Pallet 2
Black: 1a1d1a
main: 0000c8
light blue: 8093f1
off blue: 7cdedc
light : eef4ed

other light: #77B6EA
*/

@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);
    }
}

.folder-entry-button {
    flex: 1;
    /*font-family: 'Michroma', sans-serif;*/
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    background: none;
    /*color:rgb(210, 210, 210);*/
    color: var(--control-colour);
    /*letter-spacing: 5px;*/
    border: none;
    /* border-bottom: solid var(--border-colour) 1px; */
    min-height: 30px;
    /* width: 100%; */
    width: 85%;
    /* word-wrap: break-word; */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.folder-item {
    display: flex;
    border-bottom: solid var(--border-colour) 1px;
    width: 100%;
}

.folder-section-label {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
}

.folder-section-stack {
    display: flex;
    flex-direction: column;
}

.folder-section-wrapper {
    display: flex;
    margin: 2px;
    padding: 2px;
}

.folder-twistie-button.collapsed {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 5px;
    margin-bottom: 8px;
    border-top: 8px solid transparent;
    border-left: 8px solid;
    border-bottom: 8px solid transparent;
}

.folder-twistie-button.expanded {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    margin-right: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    border-top: 8px solid;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.folder-twistie-children {
    width: 100%;
}

.folder-twistie-content {
    width: 100%;
}




.wavetag-body {
    font-family: "Segoe UI", Tahoma, sans-serif;
    width: inherit;
    color: var(--font-colour);
    /* height: fit-content; */
    height: inherit;
    margin: 0px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width var(--anim-speed) linear;
    background-color: var(--background-colour);
    /* transition:  width 2s; */

    scrollbar-color: var(--border-colour) var(--background-colour);
    scrollbar-width: thin;
}

.wavetag-control {
    position: relative;
    background-color: var(--background-colour);
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 30px;
    border-top: solid var(--border-colour) 1px;
    /* margin-bottom:10px; */
}

.wavetag-control-arrow {
    margin-top: auto;
    margin-bottom: auto;
    background-image: url("icons/control-arrow.svg");
    background-color: var(--header-background-colour-alt);
    border: none;
    /* width: 5%; */
    width: 20px;
    aspect-ratio: 1/1;
    transform: rotate(90deg);
    transition: transform var(--anim-speed) linear;
}

.wavetag-control-arrow.left {
    transform: rotate(-90deg);
}

.wavetag-control-arrow.right {
    transform: rotate(90deg);
}

.wavetag-control-row {
    width: 100%;
    /*position: absolute;*/
    display: flex;
    flex-direction: row;
    /* background-color: var(--background-colour); */
}

.wavetag-control-row.collect {
    transform: translateX(-50%);
    transition: all var(--anim-speed);

    @starting-style {
        transform: translateX(0%);
    }
}

.wavetag-control-row.inspect {
    transform: translateX(0px);
    transition: all var(--anim-speed);

    @starting-style {
        transform: translateX(-50%);
    }
}

#inspect-url-container {
    height: 30px;
    /* margin: auto;
    /* width: 95%; 
    overflow: hidden;
    text-overflow: ellipsis;
    width: 250px; */
}

.expanded #inspect-url-container {
    height: inherit;
}

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

#header-inspect {
    height: 30px;
    color: var(--header-colour);
    background-color: var(--header-background-colour-alt);
    /* color: rgb(210, 210, 210); */
    letter-spacing: 5px;
    font-family: 'Michroma', sans-serif;
}

#header-collect {
    height: 30px;
    /*color:rgb(210, 210, 210);*/
    color: var(--header-colour);
    letter-spacing: 5px;
    font-family: 'Michroma', sans-serif;
}

.url-span {
    /* width: 95%; */
    width: 250px;
    height: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.expanded .url-span {
    margin: auto;
    width: 95%;
    height: inherit;
    overflow: none;
    text-overflow: unset;
    word-break: break-all;
    white-space: unset;
    text-align: left;
    /* width: 100%; */
    /* height: 20px; */
}

.wavetag-control-stack {
    width: 200%;
    /*position: absolute;*/
    display: flex;
    flex-direction: column;
}

.wavetag-extension {
    /* transition: all 10s linear;
   */
    /* transition-property: height;
    transition-duration: 5s;
    transition-behavior: allow-discrete;*/
    /* background-color: var(--background-colour); */
    /* max-height: 600px; */
    /* max-width: 800px; */
    /* height: 100%; */
    min-width: 340px;
    min-height: 60px;
    overflow: hidden;
    transition: transform var(--anim-speed) linear;
    transition-timing-function: ease;

    /* overflow: hidden; */
    @starting-style {
        height: 60px
    }
}

.wavetag-content {
    width: 60%;
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (max-width: 800px) {
    .wavetag-extension {
        width: 340px;
        max-height: 600px;
        max-width: 800px;
        /* min-height: 400px; */
        background-color: var(--background-colour);
        /* background-color: magenta; */
    }

    .wavetag-content {
        width: 100%;
        max-width: 100%;
        /* max-height: 400px; */
        overflow-y: hidden;
        height: 80%
    }

    #content-inspect {
        height: 100%;
    }

    #content-inspect-url {
        height: 100%;
    }

    #content-inspect-url-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #content-inspect-all {
        height: 100%;
    }

    .inspect-url-result {
        max-height: 250px;
        flex-grow: 1;
    }

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

    #content-inspect-url-value {
        min-height: 16px;
    }
}

.wavetag-header {
    min-width: 330px;
    /* height: 70px; */
    /* height: 40px; */
    height: 30px;
    background-color: var(--header-background-colour);
    color: var(--header-colour);
    /*background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.09));*/
    padding: 5px;
    display: flex;
    flex-direction: row;
}

.wavetag-header-control-configure {
    background: none;
    background-color: var(--header-background-colour);
    display: flex;
    /* width: 15px; */
    width: 20px;
    aspect-ratio: 1/1;
    font-family: 'Michroma', sans-serif;
    /*color:rgb(210, 210, 210);*/
    color: var(--header-colour);
    letter-spacing: 5px;
    /* min-height: 20px; */
    word-wrap: break-word;
    margin: 0px;
    margin-left: auto;
    margin-bottom: auto;
    border: none;
    padding: 0;
}

.wavetag-header-control-configure-image {
    width: 20px;
    /* margin: auto; */
}

.wavetag-header-control-configure-image.expand-button {
    background-image: url(./icons/expand.svg);
}

.wavetag-header-control-configure-image.expand-button.expanded {
    background-image: url(./icons/contract2.svg);
}

.wavetag-header-control-toggle {
    width: 20px;
    aspect-ratio: 1/1;
    margin: auto;
}

.wavetag-header-logo {
    /* width: 50px; */
    /* width: 40px; */
    width: 30px;
    /* width:20px; */
    height: 30px;
    aspect-ratio: 1/1;
    /* padding: 5px; */
}

.wavetag-header-title {
    flex-grow: 1;
    font-family: 'Michroma', sans-serif;
    /* font-size: 2.2em; */
    font-size: 1.4em;
    font-weight: bolder;
    padding-left: 7.5px;
    /* margin-top: 5px; */
    /* margin-top: 20px; */
}

.wavetag-header-title-wrapper {
    position: absolute;
    display: flex;
    flex-direction: row;
}

/* 
.wavetag-header-title {
    flex-grow: 1;
    font-family: 'Michroma', sans-serif;
    font-size: 3em;
    font-weight: bold;
    padding-left: 7.5px;


    margin-top: 5px;
    /*margin-top: 20px;
} */


.wavetag-header-title-span {
    margin: auto;
    letter-spacing: 7.5px;
    /* justify-content: center; */
}

.wavetag-header-button-wrapper {
    display: flex;
    flex-direction: column;
    width: 30px;
}

.wavetag-header-button-wrapper {
    display: flex;
    position: absolute;
    right: 5px;
    top: 5px;
    flex-direction: row-reverse;
    height: 30px;
}

.wavetag-header-control-wrapper {
    display: flex;
    flex-direction: row;
    /* width: 100%; */
    margin-left: auto;
    margin-right: auto;
    height: 30px;
}

.wavetag-control-content {
    display: none;
    position: absolute;
    background-color: var(--background-colour);
    width: 100%;
}


.wavetag-control-content.inspect {
    top: 29px;
    transition: top 5s;
}


.wavetag-control-content.collect {
    top: -30px;
    /* top: 29px; */
    transition: top 5s;
}

.wavetag-control-textbox-url {}

#collect-button-expandall {
    appearance: none;
    background: none;
    border: none;
    display: flex;
    font-size: large;
    flex: 0;
    width: 40px;
}

#collect-button-expandall::before {
    content: "▶";
}

#collect-button-expandall:checked::before {
    content: "▼";
}

#collect-button-selectall {
    min-width: 20px;
    flex: 0;
    display: flex;
}

#wavetag-select-all-span {
    font-family: 'Michroma', sans-serif;
    margin: 0;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    letter-spacing: 2px;
}


#wavetag-control-label {
    /* display: flex;
  flex-direction: row; */
    margin-top: auto;
    margin-bottom: auto;
    width: 20px;
    height: 20px;
    /* background-color: magenta; */
    /* background-image: url("icons/arrow.svg"); */
    /* transform: rotate(90deg); */
    transition: transform var(--anim-speed) linear;
}

#wavetag-control-label-span {
    margin-top: auto;
    margin-bottom: auto;
    flex-grow: 0.9;
    ;
}

#wavetag-control-label-image {
    margin-top: auto;
    margin-bottom: auto;
    width: 20px;
    height: 20px;
    /* background-color: magenta; */
    background-image: url("icons/arrow.svg");
    transform: rotate(90deg);
    transition: transform var(--anim-speed) linear;
}

.wavetag-control-content {
    opacity: 0;
    display: none;
    transition-property: display, opacity;
    transition-duration: var(--anim-speed);
    transition-behavior: allow-discrete;
}

.wavetag-control:hover .wavetag-control-content {
    opacity: 1;
    display: flex;
    transition-property: display, opacity;
    transition-duration: var(--anim-speed);
    transition-behavior: allow-discrete;

    @starting-style {
        opacity: 0;
    }
}

.wavetag-content-control-send {
    width: 40px;
    margin: 5px;
}


.wavetag-control:hover #wavetag-control-label-image.collect {
    transform: rotate(180deg);
}

.wavetag-control:hover #wavetag-control-label-image.inspect {
    /* transform: rotate(-90deg);*/
    /* background-color: greenyellow; */
    transform: rotate(0deg);
}

/* #toggle-extension  */
.wavetag-header-control-configure input:checked {
    /* change to correct images */
    background-image: url(./icons/power-on.svg);
    background-color: none;
    /* background-color: red; */
}

.wavetag-header-control-configure input:not(:checked) {
    /* change to correct images */
    background-image: url(./icons/power-off.svg);
    background-color: none;
    /* background-color: lightgreen; */
}

.wavetag-header-control-configure .wavetag-checkbox-power {
    appearance: none;
    margin: 0px;
    width: 30px;
    aspect-ratio: 1/1;
    /*remove later*/
    background-color: white;
    border-radius: 5px;
    border-width: 2px;
    border: 1px black solid;
}

#content-collect-controls {
    border: solid white 1px;
    border-bottom: 0px;
    border-radius: 4px 4px 0px 0px;
    width: inherit;
    background-color: var(--background-colour-alt);
    margin-top: 10px;
}

#content-collect-tree {
    border-top: 0px;
    border-radius: 0px 0px 4px 4px;
    background-color: var(--background-colour-alt);
}

#content-collect-selectedcount {
    margin: 5px;
    margin-left: 10px;
}











/*.wavetag-inspect {
    background-color: var(--background-colour);
    display: flex;
    flex-direction: row;
    width: 100%;
}
*/

/*.wavetag-collect {
    background-color: var(--background-colour);
    display: flex;
    flex-direction: row;
    width: 100%;
}*/

/*#button-inspect {
border-top: solid var(--border-colour) 1px;
display: flex;
flex-direction: row;
border-right: solid var(--border-colour) 1px;
}*/

/*#inspect-container {
    display: flex;
    flex-direction: row;
}*/

/*#collect-container {
    display: flex;
    flex-direction: row;
}*/

/*#button-collect {
    background-image: url("icons/arrow.svg");
    border-top: solid var(--border-colour) 1px;
    border-left: solid var(--border-colour) 1px;
}*/

/*.wavetag-control-label-empty {
    width: 5%;
    aspect-ratio: 1/1;
    content: " ";
}*/




.bookmark-tree {
    flex-grow: 1;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
}

.folder {
    margin-bottom: 8px;
}

.folder-header {
    display: flex;
    align-items: center;
    padding: 4px;
    cursor: pointer;
    border-radius: 3px;
}

.folder-header:hover {
    /*background: #f0f0f0;*/
}

.folder-toggle {
    margin-right: 6px;
    font-size: 12px;
    /*color: #666;*/
}

.folder-name {
    font-weight: bold;
    /*color: #333;*/
}

.folder-content {
    margin-left: 20px;
    margin-top: 4px;
    max-height:360px;
}

.bookmark-item {
    display: flex;
    align-items: center;
    padding: 4px;
    margin-bottom: 2px;
    border-radius: 3px;
}

.bookmark-item:hover {
    /*background: #f8f8f8;*/
}

.bookmark-checkbox {
    margin-right: 8px;
}

.bookmark-title {
    font-size: 13px;
    /*color: #333;*/
    text-decoration: none;
    flex: 1;
    margin-top: auto;
    margin-bottom: auto;
}

.bookmark-url {
    font-size: 11px;
    /*color: #666;*/
    margin-left: 8px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-section {
    /* margin-top: 16px; */
    /* padding-top: 16px; */
    border-top: 1px solid #e0e0e0;
}

.selected-count {
    font-size: 12px;
    /*color: #666;*/
    margin-bottom: 8px;
}







.inspect-url-container {
    display: flex;
    flex-direction: row;
    height: fit-content;
    padding: 5px;
    background-color: var(--background-colour);
    width: 100%
}

.inspect-url-result {
    /* max-height: 200px; */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    /* background-color: var(--background-colour); */
}

.inspect-all-result {
    /* height: 100%; */
    background-color: var(--background-colour);
    overflow-x: auto;
    max-height:380px;
}

#url-title {
    color: var(--font-colour);
    font-size: 1.2em;
    margin: auto;
    flex-grow: 2;
    padding-left: 10px;
    width: 80%;
    word-wrap: break-word;
}

.toggle-item {
    background-color: var(--background-colour);
    display: flex;
    flex-direction: row;
    height: 30px;
    padding: 5px;
}

#hover-item {
    background-color: rgba(0, 75, 255, 0.8);
    background-image: linear-gradient(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.1));
}

#colour-item {
    background-color: rgba(0, 75, 255, 0.7);
    background-image: linear-gradient(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}




.content-bookmarks {
    display: flex;
    flex-direction: column;
}

/* Need to rename to wavetag  */
.contents {
    max-height: 300px;
}

.toggle-title {
    flex-grow: 3;
    padding-left: 20px;
    font-size: 1.4em;
}

.toggle-box {
    flex-grow: 1;
    padding-left: 10px;
    padding-right: 10px;
}



/*Tool Tip*/
#link-hover-tooltip {
    position: fixed;
    z-index: 999999;
    padding: 6px 10px;
    border-radius: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    max-width: 400px;
    word-break: break-all;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#link-hover-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.tooltip-verified {
    background: rgba(0, 0, 255, 0.9);
    color: white;
}

.tooltip-green {
    background: rgba(0, 255, 0, 0.9);
    color: white;
}

.tooltip-yellow {
    background: rgba(255, 255, 0, 0.9);
    color: black;
}

.tooltip-orange {
    background: rgba(255, 69, 0, 0.9);
    color: white;
}

.tooltip-red {
    background: rgba(255, 0, 0, 0.9);
    color: black;
}

.tooltip-black-list {
    background: rgba(0, 0, 0, 0.9);
    color: white;
}

.tooltip-unknown {
    background: magenta;
    color: black;
}

.tooltip-local {
    background: rgba(255, 255, 255, 0.9);
    color: black;
}

.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;
}

@media screen and (max-width: 800px) {
    .exam-item-label {
        width: 30%;
    }
}

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

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

.exam-item-result.false {
    /* border: 1px solid red; */
    background-color: red;
    /* background-image: url(../img/cross.svg); */
}

.exam-item-result.true {
    /* border: 1px solid green; */
    background-color: green;
    /* background-image: url(../img/circle-tick.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: 1;
}

.exam-section-launch {
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    margin: 2px;
    /*border: 1px solid blue;*/
    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);
    /*border: 1px solid green;*/
}

.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 red;
    background-color: red;
    /* background-image: url(../img/cross.svg); */
}

.exam-section-result.true {
    border: 1px solid green;
    background-color: green;
    /* background-image: url(../img/circle-tick.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%;
    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 red;
    background-color: red;
    /* background-image: url(../img/cross.svg); */
}

.exam-test-result.true {
    border: 1px solid green;
    background-color: green;
    /* background-image: url(../img/circle-tick.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%;
}

.exam-topic-result {
    /* width: 10%;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat; */

    width: 13%;
    border-radius: 0px 5px 5px 0px;
    text-align: center;
    background-position: center center;
    background-repeat: no-repeat;
}

/* #region  exam-topic-result*/
.exam-topic-result.blue {
    border: 1px solid blue;
    background-color: blue;
    /* background-image: url(../img/circle-tick.svg); */
}

.exam-topic-result.black {
    border: 1px solid black;
    background-color: black;
    /* background-image: url(../img/cross.svg); */
}

.exam-topic-result.green {
    border: 1px solid green;
    background-color: green;
    /* background-image: url(../img/circle-tick.svg); */
}

.exam-topic-result.orange {
    border: 1px solid orange;
    background-color: orange;
    /* background-image: url(../img/help-circle.svg); */
}

.exam-topic-result.red {
    border: 1px solid red;
    background-color: red;
    /* background-image: url(../img/cross.svg); */
}

.exam-topic-result.yellow {
    border: 1px solid yellow;
    background-color: yellow;
    /* background-image: url(../img/help-circle.svg); */
}

/* #endregion */

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

@media screen and (max-width: 800px) {
    .exam-item-value {
        max-width: 200px;
    }

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

.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: rgba(0, 0, 0, 0.05);
}


/*#region Sliders */

.toggle-container {
    position: relative;
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 3px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.toggle-slider {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-slider input[type="radio"] {
    display: none;
}

.toggle-option {
    position: relative;
    padding: 1px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    /* min-width: 80px; */
    text-align: center;
    user-select: none;
}

.toggle-option:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Slider backgrounds */
.slider-background {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(33.333% - 4px);
    background: #ff6b6b;
    border-radius: 46px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Active states for Hover Slider */
#hover-toggle1:checked+.toggle-option,
#hover-toggle2:checked+.toggle-option,
#hover-toggle3:checked+.toggle-option {
    color: white;
    font-weight: 600;
}

/* Active states for Colour Slider */
#colour-toggle1:checked+.toggle-option,
#colour-toggle2:checked+.toggle-option,
#colour-toggle3:checked+.toggle-option {
    color: white;
    font-weight: 600;
}

/* Hover slider positions */
#hover-toggle1:checked~.slider-background {
    transform: translateX(0);
    background: #ff6b6b;
}

#hover-toggle2:checked~.slider-background {
    transform: translateX(calc(100% + 4px));
    background: #4ecdc4;
}

#hover-toggle3:checked~.slider-background {
    transform: translateX(calc(200% + 8px));
    background: #a8edea;
}

/* Colour slider positions */
#colour-toggle1:checked~.slider-background {
    transform: translateX(0);
    background: #9b59b6;
}

#colour-toggle2:checked~.slider-background {
    transform: translateX(calc(100% + 4px));
    background: #e74c3c;
}

#colour-toggle3:checked~.slider-background {
    transform: translateX(calc(200% + 8px));
    background: #f39c12;
}

/* #endregion */
.unselected {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.073), rgba(0, 0, 0, 0.2));
    background-color: gradient() rgba(0, 0, 0, 0.2);
}

.wavetag-control-button {
    flex: 1;
    font-family: 'Michroma', sans-serif;
    background: none;
    /*color:rgb(210, 210, 210);*/
    color: var(--control-colour);
    letter-spacing: 5px;
    border: none;
    border-bottom: solid var(--border-colour) 1px;
    min-height: 30px;
    width: 100%;
    word-wrap: break-word;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* display: flex; */
    /* flex-direction: column; */
    /* padding: 0px; */
}


.wavetag-control-button {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.01));
    /* border-top: 2px solid var(--border-colour); */
    border-left: 1px solid var(--border-colour);
    border-right: 1px solid var(--border-colour);
    border-bottom: 2px solid var(--border-colour);
    /* border-radius: 10px 10px 0px 0px; */
}


#button-configure {
    font-size: 0.8em;
    /* border-right: solid var(--border-colour) 1px;  */
}

#button-url {
    font-size: 0.8em;
    /* border-right: 0px; */
    border-left: 0px;
    /* border-radius: 0px 10px 0px 0px; */
    /* border-left: solid var(--border-colour) 1px; */
}

#button-all {
    font-size: 0.8em;
    border-right: 0px;
    /* border-radius: 10px 0px 0px 0px; */
    /*border-left: solid var(--border-colour) 1px; */
}

#button-page {
    font-size: 0.8em;
    border-left: 0px;
    /* border-radius: 0px 10px 0px 0px; */
    /* border-right: solid var(--border-colour) 1px; */
}

#button-bookmarks {
    font-size: 0.8em;
    /* border-right: solid var(--border-colour) 1px; */
    /* border-left: solid var(--border-colour) 1px; */
}

#button-history {
    font-size: 0.8em;
    border-right: 0px;
    /* border-radius: 10px 0px 0px 0px; */
    /* border-left: solid var(--border-colour) 1px; */
}

.selected {
    /* background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.3)); */
    /* background-color: gradient() rgba(0, 0, 0, 0.2); */
    /* border-top: 0px; */
    /* border-left: 0px; */
    /* border-right: 0px; */
    /* padding: 0%; */
    /* padding: auto ; */
    /* padding-left: 7.6px; */
    /* padding-right: 7.6px; */
}

.wavetag-control-select {
    color: var(--control-colour);
    background: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.01));
    border-left: 1px solid var(--border-colour);
    border-right: 1px solid var(--border-colour);
    border-bottom: 2px solid var(--border-colour);
}

.wavetag-control-option {
    background: none;
}

.wavetag-control-row.selection-page {
    #button-page {
        background-image: none;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: soild 2px var(--border-colour);
    }

    #button-bookmarks {
        border-top-left-radius: 10px;
    }

}

.wavetag-control-row.selection-bookmarks {
    #button-page {
        border-top-right-radius: 10px;
    }

    #button-bookmarks {
        background-image: none;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: soild 2px var(--border-colour);
    }

    #button-history {
        border-top-left-radius: 10px;
    }

}

.wavetag-control-row.selection-history {
    #button-bookmarks {
        border-top-right-radius: 10px;
    }

    #button-history {
        background-image: none;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: soild 2px var(--border-colour);
    }

}

.wavetag-control-row.selection-url {
    #button-url {
        background-image: none;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: soild 2px var(--border-colour);
    }

    #button-all {
        border-top-left-radius: 10px;
    }

}

.wavetag-control-row.selection-all {
    #button-url {
        border-top-right-radius: 10px;
    }

    #button-all {
        background-image: none;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: soild 2px var(--border-colour);
    }

}

.wavetag-extension.expanded {
    width: 800px;
    text-overflow: unset;
    /* transform: scaleX(2.35); */
    /* animation: ease ; */
    transition: width var(--anim-speed) linear;
    transition-timing-function: ease;
}

.colour-indicator {

    width: 7%;
    max-width: 22px;
    aspect-ratio: 1/1;
    background-color: white;
    margin: auto;
    border-radius: 5px;

    .orange {
        background-color: var(--orange);
    }
}

.colour-indicator-title {

    width: 7%;
    max-width: 22px;
    aspect-ratio: 1/1;
    background-image: url(icons/wavetag-inspector.svg);
    /* background-color: white; */
    margin: auto;
    border-radius: 5px;

    .blue {
        background-image: url(icons/wavetag-inspector-blue.svg);
    }

    .green {
        background-image: url(icons/wavetag-inspector-blue.svg);
    }

    .yellow {
        background-image: url(icons/wavetag-inspector-yellow.svg);
    }

    .orange {
        background-image: url(icons/wavetag-inspector-orange.svg);
    }

    .red {
        background-image: url(icons/wavetag-inspector-red.svg);
    }

    .black {
        background-image: url(icons/wavetag-inspector-black.svg);
    }

    .unknown {
        background-image: url(icons/wavetag-inspector.svg);
        background-color: magenta;
        color: black;
    }
}

.folder-title {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
}

.launch-new-tab {
    height: 80%;
    width: 15px;

    margin-left: auto;
    margin-right: 4px;
    aspect-ratio: 1 / 1;
    /* margin-top: auto; */
    margin-bottom: auto;
    background: none;
    border: none;
    filter: invert(1);
    background-image: url(icons/launch.svg);
    cursor: pointer;
    display: none;
}

.folder-item:hover {
    .launch-new-tab {
        display: inline-block;
    }
}

.folder-header:hover {
    .launch-new-tab {
        display: inline-block;
    }
}

.tooltip-verified {
    background-color: rgba(0, 0, 255, 0.9);
    color: white;
}

.green {
    background-color: rgba(0, 255, 0, 0.9);
    color: white;
}

.yellow {
    background-color: rgba(255, 255, 0, 0.9);
    color: black;
}

.orange {
    background-color: rgba(255, 69, 0, 0.9);
    color: white;
}

.red {
    background-color: rgba(255, 0, 0, 0.9);
    color: black;
}

.black {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
}

.unknown {
    background-color: magenta;
    color: black;
}


/* This must be at the end of the stylesheet to over-ride any other 'display' settings! */
.hidden {
    display: none;
}

@media screen and (max-width: 800px) {
    .hidden {
        display: none;
    }
}