/*
 * MIT License
 *
 * Copyright (c) 2021 Thiago Lamenza e Victor Martins
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

:root {
    --timelineMargin: 10pt;
}

#algorithmController {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 65%;
    max-width: 500pt;
    /*border-radius: 8pt;*/
    border-top-right-radius: 12pt;
    border-top-left-radius: 12pt;
    margin: 15pt auto 0;
    padding: 10pt 15pt 5pt;
    /*background-color: rgba(0, 0, 0, 0.65);*/
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8) 80%)
}

#exit_button {
    float: right;
    margin-top: -4pt;
    margin-right: -8.5pt;
    cursor: pointer;
}


input[type="range"] {
    -webkit-appearance: none;
    border-radius: 4pt;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;

    border-radius: 4pt;

    transition: 0.1s;
    border: 2pt solid #eee;
}


/* TUTORIAL */
#tutorialContainer {
    margin-right: 10pt;

    /*
      Verde: #00FA9A
      Laranja: #FF4500
      Sem borda: transparent
    */
    border: 2pt solid transparent;
    border-radius: 4pt;

    padding: 2pt;
    /*background-color: #FF04;*/

    display: flex;
    flex-direction: column;
}

#tutorialContainer[highlighted="true"] {
    border: 2pt solid #00FA9A;
}

#tutorialContainer[warning="true"] {
    border: 2pt solid #FF4500;
}

#tutorialContainer[optional="true"] {
    border: 2pt solid skyblue;
    position: relative;
    pointer-events: none;
}

#tutorialContainer > a {
    color: white;
    border: 1px solid white;
    border-radius: 3px;
    cursor: pointer;
    pointer-events: all;
    display: none;
    margin: 3px 0 3px auto;
    padding: 3px;
    font-weight: bold;
}

#tutorialContainer[optional="true"] > a {
    display: block;
}

#tutorialContainer > label {
    color: white;
    font-size: 13pt;
    /*font-weight: bold;*/
}
#tutorialContainer em {
    font-style: normal;
    font-weight: bold;
    text-decoration: underline;
}
.separator {
    width: 100%;
    display: inline-block;

    border: 0;
    border-radius: 4pt;
    border-top: 2pt solid #eee;
}


/* CONTROLES */
#executionContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    /*background-color: #0F08;*/
}

/* Velocidade */
#speedContainer {
    width: 20%;

    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: monospace;
    font-size: 14pt;
    color: white;

    /*background-color: #F008;*/
}

#speedContainer > label {
    margin-bottom: -5pt;
}

/* Timeline */
#timelineContainer {
    width: 70%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    /*background-color: #00F8;*/
}

.timelineButton {
    /*min-width: 22.5pt;*/
    /*min-height: 22.5pt;*/

    border: 2pt solid white;
    border-radius: 7pt;

    margin: 2pt;
    fill: #FFF;
    background-color: transparent;
    /*background: red;*/
    display: flex;
}
.timelineButton img {
    padding: 1.5pt 2pt 2pt 2pt;
}

.timelineButton:hover {
    fill: #FFF;
    background-color: #FFF4;
}

.timelineButton:active {
    fill: #000;
    background-color: #FFF;
}


#timelineInput {
    width: 70%;
    height: 8pt;

    border: solid 2pt white;

    margin-left: var(--timelineMargin);
}

#timelineInput::-webkit-slider-thumb {
    width: 14pt;
    height: 20pt;

    background-color: #9999FF;
}

#timelineInput::-webkit-slider-thumb:hover {
    background-color: #6C6CD9;
}

#timelineInput::-webkit-slider-thumb:active {
    background-color: #5959B3;
}


#speedInput {
    width: 100%;
    height: 5pt;

    border: solid 1pt white;

    margin-top: 9pt;
    margin-bottom: 9pt;
}

#speedInput::-webkit-slider-thumb {
    width: 13pt;
    height: 13pt;

    background-color: #555;
}

#speedInput::-webkit-slider-thumb:hover {
    background-color: #444;
}

#speedInput::-webkit-slider-thumb:active {
    background-color: #000;
}