/* Standart style sheet. Note: uses CSS2 features like position */

body {
    font-family: verdana,arial,helvetica,sans-serif;
    min-height: 95vh;
}

div.header {
    margin: 0;
    padding: .5em 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
div.logo {
    font-size: 200%;
    font-weight: 800;
}

div.content {
    margin: 0;
    padding: .5em 1em;
}

/* My own button. Browser independent */
.button {
    display: none;
}

/* --- control tab --- */

/* Switch for the controller panel */
div.switch {
    position: relative;
    flex-grow: 1;

    margin: 0.4em 0.4em;

    border: 2px solid black;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: black;

    container: switch / size;
    cursor: default;
    user-select: none;
}
div.switch:hover {
    box-shadow: 0px 0px 5px 5px var(--color_lv_1);
}
div.switch[active] {
    background-color: var(--color_lv_5);
}
div.switch[disabled],
div.switch[disabled]:hover {
    box-shadow: none;

    border: 2px solid var(--color_lv_8);
    background-color: var(--color_lv_10);
    color: var(--color_lv_8);
}
div.switch[status="on"] {
    background: radial-gradient(green 0%, var(--color_lv_10) 70%)
}
div.switch[status="off"] {
    background: radial-gradient(red 0%, var(--color_lv_10) 80%)
}

div.switch > img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60cqmin;
    margin: 0;

    transform: translateY(-50%) translateX(-50%);
    filter: invert(30%);
}
div.switch[disabled][status="on"]  > img {
    filter: blur(2px) invert(60%);
}
div.switch[status="off"] > img {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(-46deg) brightness(88%);
}

div.switch[status="on"] > img {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(158%);
}

div.switch > span:not(.overrideButton) {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;

    transform: translateY(-50%) translateX(-50%);

    font-size: min(50cqh, 14cqw);
}

/** this is the small override symbol on the control pane
 *  indicating that the button was pressed and is overriding
 *  the default signal. */
.overrideButton {
    display: block;
    position: absolute;
    margin: 0;
    right: 0.1em;
    bottom: 0.1em;
    width: 1.0em;
    height: 1.0em;

    line-height: 1em;

    border: 2px solid white;
    color: black;

    text-align: center;
    font-size: min(50cqh, 12cqw);
}

div.switch[auto]  > .overrideButton {
    border: 2px solid black;
    color: black;
}


/* signals table */
table {
    /* width: 100%; */
    border-collapse: collapse;
}
th, td {
    text-align: left;
    padding-left: .4em;
    border-radius: var(--common_border_radius);
}
tr:nth-child(even) {
    background-color: white;
}
tr:nth-child(odd) {
    background-color: #aaa;
}

/* -- procConfig -- */
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
li.proc {
    margin-top: 1em;
    margin-bottom: .5em;
    margin-left: .5em;
    padding: .5em;
    border: 2px solid #a0a;
    border-radius: var(--common_border_radius);

    border: 2px solid #a0a;

    animation-duration: 1s;
    animation-name: appear;
}
li.proc > h1 {
    font-size: 100%;
    font-weight: 600;
    margin: 0;
    margin-top: -1.1em;
    padding: 0;
    padding-left: .4em;
    padding-right: .4em;

    width: fit-content;
    border-radius: var(--common_border_radius);
}
li.proc th {
    font-weight: 600;
    border-radius: var(--common_border_radius);
    width: 1%; /* minimum width */
    white-space: nowrap;
}

li.proc td {
    width: auto;
}

li.procGroup {
    margin-top: .5em;
    margin-left: -.3em;
    padding: 0.5em;

    border-top: 2px solid var(--color_lv_4);
    border-left: 2px solid var(--color_lv_3);
    border-bottom: 2px solid var(--color_lv_2);
    border-top-left-radius: var(--common_border_radius);
    border-bottom-left-radius: var(--common_border_radius);
}
li.procGroup > details > summary {
    font-size: 100%;
    font-weight: 600;

    cursor: default;
}

.options_menu {
    float: right;

    border: 2px solid var(--color_lv_2);

    padding-bottom: 0;
    padding-top: .1em;
    padding-left: .2em;
    padding-right: .2em;
    margin-top: -1.3em;
}
.options_menu > img {
    width: 1.5em;
    height: 1.5em;
}
.options_window {
    display: none;
    position: absolute;
    right: 10px;

    padding: .5em;

    border: 2px solid #888;
    border-radius: var(--common_border_radius);

    text-align: left;
    font-weight: 400;
    font-size: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    z-index: 1;
}

/* Change color of dropdown links on hover */
.options_window li:hover {
    cursor: default;
}

/* -- slider stuff -- */

.sliderBubble {
    display: inline-block;
    position: relative;
    color: black;
    padding: .1em;
    text-align: center;
    border-radius: 5px;
    width: 3em;
}
.sliderBubble:after {
    content: "";
    position: absolute;
    right: 100%;
    top: .2em;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 12px solid var(--color_lv_7);
    border-bottom: 6px solid transparent;
}

/* -- tabs -- */
.tabButton {
    display: inline-block;
    margin: 0;
    padding: .5em 1em .5em 1em;

    color: gray;

    text-align: center;
}

.tabButton.active {
    border-bottom: 2px solid black;

    color: black;
}

.tabcontent {
    display: none;
    padding: 6px 12px;

    flex-grow: 1;
}

canvas.expo {
    width: 5em;
    height: 5em;

    border-radius: var(--common_border_radius);
    border: 2px solid var(--color_lv_3);
}


input[type=number] {
  text-align:right;
}

/* styles for cpu pinout */
.cpuBorderTop {
    border-top: 2px solid black;
}
.cpuBorderBottom {
    border-bottom: 2px solid black;
}
.cpuBorderRight {
    border-right: 2px solid black;
}
.cpuBorderLeft {
    border-left: 2px solid black;
}

/* styles for the circular speed/rpm meter*/
.meterPointer {
    fill: red;
    stroke: darkred;
    stroke-width: 1px;
}
.meterOutline {
    fill: #222;
    stroke: gray;
    stroke-width: 2px;
}
.meterCenter {
    fill: black;
}
.meterMark {
    stroke: white;
    stroke-width: 1.5px;
}
.meterNumbers {
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 6px;
    fill: #fff;
}
.meterBigText {
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 12px;
    fill: #fff;
}
.meterSmallText {
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: 6px;
    fill: #fff;
}


/* styles for the signals bar */
.progressBar {
    fill: gray;
}
.checkMark {
    stroke: black;
    stroke-width: 2px;
}
.signalBar {
    fill: #06f;
    stroke: gray;
    stroke-width: 1px;
}
.signalMark {
    fill: #06f;
    stroke: gray;
    stroke-width: 1px;
}
.signalText {
    font-family: verdana,arial,helvetica,sans-serif;
    fill: black;
}

.overrideBar {
    fill: #d60;
    stroke: #f40;
    stroke-width: 1px;
}
.overrideMark {
    fill: #a20;
    stroke: #f40;
    stroke-width: 1px;
}
.overrideText {
    font-family: verdana,arial,helvetica,sans-serif;
    fill: black;
}


/* Animation to highlight a button. */
@keyframes highlight {
  50% {
    box-shadow: 0px 0px 5px 5px var(--color_lv_1);
  }
  0%, 100% {
    box-shadow: none;
  }
}

/* Animation for procs and groups to appear.
 *
 * Without the animation it might not be that easy to notice.
 */
@keyframes appear {
  from {
    opacity: 50%;
    /* scale: 1 50%; */
  }

  to {
    opacity: 1;
    /* scale: 1 100%; */
  }
}