/* Copyright (c) 2017, Xuan Linh Do & Finn Ole Koenecke */

/* This file is part of Interneural. */

/* Interneural is free software: you can redistribute it and/or modify */
/* it under the terms of the GNU General Public License as published by */
/* the Free Software Foundation, either version 3 of the License, or */
/* (at your option) any later version. */

/* Interneural is distributed in the hope that it will be useful, */
/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the */
/* GNU General Public License for more details. */

/* You should have received a copy of the GNU General Public License */
/* along with Interneural.  If not, see <https://www.gnu.org/licenses/>. */

#training {
    margin-top: 25px;
}

.preview-canvas {
    height: 200px;
    width: 200px;
}

input[name=trainingColor] {
    display:none;
}
.color-picks {
    width: 100%;
}
.color-pick-red {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 33%;
    height: 22px;
    background-color: #ff9896;
}
.color-pick-red:hover {
    background-color: #d62728;
}
input[name="trainingColor"]:checked + label .color-pick-red {
    border: 3px solid #373737;
    background-color: #d62728 !important;
}
.color-pick-green {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 34%;
    height: 22px;
    background-color: #98df8a;
}
.color-pick-green:hover {
    background-color: #2ca02c;
}
input[name="trainingColor"]:checked + label .color-pick-green {
    border: 3px solid #373737;
    background-color: #2ca02c !important;
}
.color-pick-blue {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 33%;
    height: 22px;
    background-color: #aec7e8;
}
.color-pick-blue:hover {
    background-color: #1f77b4;
}
input[name="trainingColor"]:checked + label .color-pick-blue {
    border: 3px solid #373737;
    background-color: #1f77b4 !important;
}

#samplesConfigDiv{
    float: right;
    width: 30%;
}

.xPosLabel, .yPosLabel{
    border: none;
    margin: 1px 0px 0px 0px;
    color: white;
    text-align: center;
    font-size: 16px;
    width: 49%;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
}

#xPosInput, #yPosInput{
    border: none;
    margin: 1px 0px 0px 0px;
    padding: 2px 0px;
    font-size: 16px;
    color: white;
    text-align: center;
    width: 50%;
    float: right;
    height: 20px;
}

#sampleLabel, #deleteSamplePointButton{
    border: none ;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 100%;
    float: left;
    clear: both;
    display: inline-block;
    height: 26px;
    line-height: 26px;
}

#sampleList{
    float: right;
    text-align: left;
}

#selectList{
    width: 100%;
}

.editSamplesContainer{
    width: 100%;
    margin-bottom: 5px;
}


#loadSamples, #saveSamples  {
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    width: 50%;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
    line-height: 26px;
}

#saveSamples  {
    border: solid;
    border-width: 0px 0px 0px 1px;
    float: right;
}

div{
    cursor: default;
}

.trainingHeader{
    width: 400px;
}

#sampleLabel, .xPosLabel, .yPosLabel, #maxIterationsLabel{
    background-color: #3a8fcd;
}

#maxIterationsInput, #loadSamples, #saveSamples, #xPosInput, #yPosInput, .add-button, #inputLearningRate, .ulActFuncOptions, .tooltip{
    background-color: #5caacf;
}

.ulActFuncOptions .liActFuncOptions.selected:not(.init), .ulActFuncOptions,.ulActFuncOptions .liActFuncOptions:not(.init){
    background-color: #5caacf;
}

#maxIterationsInput:hover, #loadSamples:hover, #saveSamples:hover, #xPosInput:hover, #yPosInput:hover, .add-button:hover, #inputLearningRate:hover, .ulActFuncOptions:hover, .tooltip:hover{
    background-color: #aec7e8;
}

.ulActFuncOptions .liActFuncOptions:not(.init):hover {
    background-color: #aec7e8;
}

#deleteSamplePointButton, .bad-button, .bad-button-big, .bad-button-small {
    background-color: #de262f;
}

#deleteSamplePointButton:hover, .bad-button:hover, .bad-button-big:hover, .bad-button-small:hover {
    background-color: #ff5b52;
}