/*
 Copyright © 2021 - 2022 by OMICRON electronics GmbH <info@omicronenergy.com>
 Permission to use, copy, modify, and/or distribute this software for
 any purpose with or without fee is hereby granted.

 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 MERCHANTABILITY AND FITNESS.IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
 SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
 OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
 CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE
*/

* {
    box-sizing: border-box;
}


/* Style the header */

header {
    position: relative;
    background-color: #369;
    padding: 10px;
    text-align: justify;
    color: white;
    text-shadow: 3px 3px 5px rgba(64, 64, 64, 1);
    margin-bottom: 2ex;
    border-radius: 0.4em;
}

.grid {
    display: grid;
    align-items: center;
    justify-items: stretch;
    row-gap: 0.5em;
    column-gap: 3em;
}

.flex {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.horzflex {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}

.horzflex>* {
    padding-inline-start: 0.5em;
    flex-shrink: 0;
}


.main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background-color: #369;
    margin-top: 10px;
    padding: 0.5em;
    border-radius: 0.4em;
    width: 100%;
    overflow: auto;
}

body { 
    user-select: none;
}

button {
    width: fit-content;
    height: auto;
}

.grid label {
    justify-self: end !important;
}

label>span {
    margin-left: 10px;
}

#logo {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5ex;
    width: 10ex;
    box-sizing: content-box;
    border-radius: 0.2em;
}

#error_msg {
    color: #f5e214;
    background-color: #bb1326;
    margin-bottom: 0.5ex;
    width: 100%;
    font-weight: bold;
    display: inline-block;
    padding: 0.5em;
    font-family: 'Courier New', Courier, monospace;
}

tiny {
    font-size: 70%;
}

body {
    background-color: #12579b80;
    color: white;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    clip: auto;
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    margin: 0;
}

h1 {
    text-transform: uppercase;
    text-shadow: 5px 5px 5px #2b3139;
    padding: 2ex;
    color: #f5e214;
}

fieldset {
    padding: 1.5ex 1ex 1ex 1ex;
    margin-bottom: 2ex;
    border: none;
    background: #12579be0;
    border-radius: 0.5ex;
    display: flex;
}

fieldset legend {
    padding: 0 1ex 0.5ex 1ex;
    background: #ffffff;
    border-radius: 0.5ex;
    color: black;
}

#load_ds_button+label {
    border-radius: 0.5ex;
    background: linear-gradient(#ffffff, #e7e9ec);
    border-style: solid;
    border-width: 1px;
    border-color: #adb5c1;
    color: #353c46;
    padding: 1ex;
    width: fit-content;
    height: auto;
    font-size: smaller;
}

#load_ds_button+label:hover {
    background: #dbdfe4;
    border-style: solid;
    border-width: 1px;
    border-color: #adb5c1;
    color: #353c46;
    cursor: pointer;
}

#load_ds_button+label:active {
    background: #2384e4;
    border-style: solid;
    border-width: 1px;
    border-color: #0e467f;
    color: white;
}

.ds_button_label:disabled {
    color: #353c4680;
    background: linear-gradient(#ffffff, #e7e9ec);
}

button {
    border-radius: 0.5ex;
    background: linear-gradient(#ffffff, #e7e9ec);
    border-style: solid;
    border-width: 1px;
    border-color: #adb5c1;
    color: #353c46;
    padding: 1ex;
    margin-right: 1ex;
    position: relative;
}

button:hover:enabled {
    background: #dbdfe4;
    border-style: solid;
    border-width: 1px;
    border-color: #adb5c1;
    color: #353c46;
    cursor: pointer;
}

button:active:enabled {
    background: #2384e4;
    border-style: solid;
    border-width: 1px;
    border-color: #0e467f;
    color: white;
}

button:disabled {
    color: #353c4680;
    background: linear-gradient(#ffffff, #e7e9ec);
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

select {
    height: 2em;
}

input {
    height: 20px;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

input[type="range"] {
    height: 27px;
    -webkit-appearance: none;
    appearance: none;
    margin-left: 10px;
    width: calc(100% - 20px);
    background: transparent;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: calc(100% - 20px);
    height: 2px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000;
    background: #ffffff;
    border-radius: 1px;
    border: 0px solid #353c46;
}

input[type="range"]::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #adb5c1;
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: linear-gradient(#ffffff, #e7e9ec);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-top: -9.5px;
}

input[type-range]:hover::-webkit-slider-thumb {
    background: #dbdfe4;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #ffffff;
}

input[type="range"]::-moz-range-track {
    width: calc(100% - 20px);
    height: 2px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000;
    background: #ffffff;
    border-radius: 1px;
    border: 0px solid #353c46;
}

input[type="range"]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #adb5c1;
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: linear-gradient(#ffffff, #e7e9ec);
    cursor: pointer;
}

input[type-range]:hover::-moz-range-thumb {
    background: #dbdfe4;
}

input[type="range"]::-ms-track {
    width: calc(100% - 20px);
    height: 2px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type="range"]::-ms-fill-lower {
    background: #ffffff;
    border: 0px solid #353c46;
    border-radius: 2px;
    box-shadow: 0px 0px 0px #000000;
}

input[type="range"]::-ms-fill-upper {
    background: #ffffff;
    border: 0px solid #353c46;
    border-radius: 2px;
    box-shadow: 0px 0px 0px #000000;
}

input[type="range"]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #000000;
    border: 1px solid #adb5c1;
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: linear-gradient(#ffffff, #e7e9ec);
    cursor: pointer;
}

input[type-range]:hover::-ms-thumb {
    background: #dbdfe4;
}

input[type="range"]:focus::-ms-fill-lower {
    background: #ffffff;
}

input[type="range"]:focus::-ms-fill-upper {
    background: #ffffff;
}


/*
input[type=checkbox] {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 6px;
width: 1.25em;
height: 1.25em;
border-radius: 2px;
display: inline-block;
position: relative;
}
 */

ul[role="listbox"] {
    background: white;
    border: 1px solid #aaa;
    padding: 0ex;
    margin: 0;
}

li[role="option"] {
    display: block;
    position: relative;
    padding: 0ex 1ex 0ex 1ex;
    line-height: 1.8em;
    color: black;
    cursor: default;
    opacity: 0.5;
}

input[readonly] {
    color: rgba(0, 0, 0, 0.5);
}

li[role="option"].enabled {
    background: #bde4ff;
    opacity: 1;
}

.spinner {
    border-radius: 50%;
    width: 3ex;
    height: 3ex;
    font-size: 10px;
    position: absolute;
    border-top: 0.3em solid rgba(0, 0, 0, 0.2);
    border-right: 0.3em solid rgba(0, 0, 0, 0.2);
    border-bottom: 0.3em solid rgba(0, 0, 0, 0.2);
    border-left: 0.3em solid #000000;
    animation: load8 1.1s infinite linear;
    left: 50%;
    top: 50%;
}

@keyframes load8 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.controllers {
    overflow-x: auto;
    padding-right: 8px;
    margin-bottom: 0px;
}

.controller {
    position: relative;
    width: fit-content;
    display: grid;
}

.hoverable:hover {
    filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));
}

.zoom {
    width: fit-content;
    height: fit-content;
}
.zoom_ctrl {
    cursor: pointer;
    margin: 0px;
    margin: 0.4em;
}

.zoom_ctrl:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.tooltip {
    position: absolute;
    z-index: 100;
    padding: 5px;
    background-color: lightyellow;
    border-radius: 5px;
    color: black;
}

.status_info {
    flex-grow: 1;
    flex-shrink: 1;
}

.status_info p {
    margin: 0;
}

svg text {
    cursor: default;
}

.filename {
    font-family: 'Courier New', Courier, monospace;
    white-space: nowrap;
}

.filename::before {
    content: "«";
}

.filename::after {
    content: "»";
}

.fade {
    animation: 300ms 1 alternate fade;
}

.abs {
    position: absolute;
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}