/*Copyright (C) 2021 Viktoria Shestakova*/

#render_port {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

#loading_label {
    background: #f0f8ff;
    box-shadow: 0 0 2px;
    padding: 0.2cm;
    color: black;
    font: lighter large sans-serif;
    font-size: medium;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#loading_label > div {
    display: block;
    margin-bottom: 0.2cm;
}

#loading_label > progress {
    display: block;
    width: 100%;
    margin: 0;
}

#loading_label > button {
    display: block;
    width: 100%;
    margin: 0;
}

#render_canvas {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
}

#time_control_panel {
    display: grid;
    grid-template-columns: min-content auto min-content min-content min-content;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
    grid-column-gap: 0.35cm;

    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: ghostwhite;
    margin: 0;
    padding: 0.15cm 0.35cm;
    box-sizing: border-box;
    box-shadow: 0 0 2px;
}

#time_control_panel > button {
    width: 32px;
    height: 32px;

    background-color: transparent;
    background-size: contain;

    border: 1px dashed lightgrey;
    border-radius: 0.1cm;
}

#time_indicator {
    white-space: nowrap;
    font-family: monospace;
    text-align: center;
}

.slider_container {
    display: grid;
    justify-items: center;
    width: 100%;
}

.slider_container input[type="range"]{
    width: 100%;
}

.play_button {
    background-image: url("../images/play.svg");
}

.play_button:disabled {
    opacity: 50%;
}

.pause_button {
    background-image: url("../images/pause.svg");
}

.pause_button:disabled {
    opacity: 50%;
}

.fullscreen_button {
    background-image: url("../images/fullscreen.svg");
}

.reset_cam_button {
    background-image: url("../images/reset_cam.svg");
}

.over_render_port_menu {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    max-width: 100%;
    padding: 0.3cm;
    box-sizing: border-box;
}

.over_render_port_menu > * {
    box-sizing: border-box;
}

.cs_checkboxes > * {
    display: block;
    white-space: nowrap;
}

.over_render_port_menu > * {
    font-family: monospace;
    font-size: x-large;
    display: block;
}

.color_scale {
    height: 1cm;
}

.color_scale > * {
    width: 100%;
    max-width: 100%;
}

.cs_scale {
    border: 1px solid black;
    background: linear-gradient(.25turn, red , orange , yellow , green , cyan, blue, blueviolet);
    height: 50%;
}

.cs_legend {
    height: 50%;
    display: grid;
    grid-template-columns: min-content auto min-content auto min-content auto min-content auto min-content;
    justify-items: stretch;
    font-size: medium;
}