/* some style */

body {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 500;
    background-color: #FDFFD9;
}

/* Weather category config ********************/

#category-params input {
    width: 40px;
}

#category-params thead {
    text-align: center;
}

#category-params .min {
    padding-left: 10px;
}

#category-params .weight {
    min-width: 64px;
}

#category-params .derived {
    font-size: 75%;
    text-align: center;
}

#general-params {
    min-width: 180px;
}

#general-params td input {
    width: 40px;
}

.time-params input {
    width: 30px;
}

#time-location-params td {
    vertical-align: bottom;
}

svg {
    display: inline-block;
}

#controls {
    display: inline-block;
}

rect.sunny {
    fill: rgba(0,128,255,0);
}

rect.fair {
    fill: rgb(0,255,0);
}

rect.poor {
    fill: rgb(255,255,0);
}

rect.inclement {
    fill: rgb(192, 0, 0);
}

.cell {
    opacity: 0.75;
}

/* Button bar ********************/

.button-bar button {
    margin-right: 3px;
}

#enlarge-grid, #shrink-grid {
    background-color: white;
    padding: 2px 0 0 2px;
}


#computing-indicator {
    width: 24px;
}

/* Forecast ********************/

/* #forecast table { */
/*     border-collapse: collapse; */
/*     border: solid 1px; */
/* } */

/* #forecast thead tr td { */
/*     background: lightgray; */
/*     border-bottom: 1px solid black; */
/*     /\* padding-right: 7px; *\/ */
/* } */

/* #forecast table tr:nth-child(even) { */
/*     background: #F2F0E0; */
/* } */

#weather-grid-stack {
    position: relative;
}

#weather-grid {
    position: absolute;
    left: 0;
    top: 0; 
}

#weather-grid-overlay {
    position: absolute;
    left: 0;
    top: 0;
}

.exclusive-button.tool:checked {
    border: solid 1px blue;
}

.tool + img {
    height: 32px;
}

.tool input {
    position: absolute;
    left: -100px;
}

.tool + label {
    background-size: contain;
    background-size: 24px;
    background-position-x: 2px;
    background-position-y: 2px;
    background-repeat: no-repeat;
    color: rgba(0,0,0,0);
    padding-right: 27px;
    padding-left: 4px;
    padding-top: 8px;
    vertical-align: bottom;
}

.tool:checked + label {
    background-color: lightblue;
    border-style: groove;
    border-width: 1px;
    border-color: grey;
}

/* Help ************************************/

.help {
    display: inline-block;
    position: relative;
}

.help .img {
    width: 18px;
    height: 18px;
    color: white;
    background: darkblue;
    border-radius: 9px;
    text-align: center;
    display: inline-block;
    margin-right: 3px;
    margin-left: 3px;
    font-size: 80%;
}

.help .content {
    position: absolute;
    top: -3px;
    left: 28px;
    border: 1px solid black;
    background: #f9f29a;
    color: black;
    width: auto;
    min-width: 300px;
    z-index: 100;
    display: none;
    text-align: left;
    padding: 0 4px;
}

.help .content dt {
    font-weight: bold;
}

.help .hidden {
    display: none;
}

.help .content p {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.help .content p:last-child {
    margin-bottom: 0;
}

/**/

.weather-type {
    padding: 0 3px;
}

.weather-type.inclement {
    color: white;
}

.button-container {
    padding-bottom: 3px;
}

#locations {
    margin-left: 7px;
}

/* Control sections *******************/

.controls {
    align-items: stretch;
}

.control-container {
    margin-left: -8px;
}

#forecast-section .control-container {
    margin-left: initial;
}

.controls .toggle {
    display: inline-block;
    /* margin-right: 3px; */
    /* background: black; */
    /* color: white; */
    /* padding: 0 2px 2px 2px; */
    /* font-family: monospace; */

    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid black;
    display: inline-block;
    margin-right: 3px;
    vertical-align: middle;
    transform: rotate(-90deg);
}

.controls .toggle.visible {
    transform: rotate(0);
}

.controls legend {
    margin-left: -7px;
}

/******************************************/

.test0 {
    fill: red;
}

.test1 {
    fill: yellow;
}

.test2 {
    fill: green;
}

.test3 {
    fill: blue;
}

/* Wind Vectors ***************************/

.wind-vector {
    stroke: black;
    stroke-width: 0.08px;
    pointer-events: none;
}

/* Text overlay ***************************/

#text-overlay {
    stroke: black;
    pointer-events: none;
}

.text-overlay.temperature {
    font-size: 120%;
}

.text-overlay.type {
    font-size: 180%;
}

/* Selected cell overlay ******************/

#selected-cell-overlay {
    fill: rgba(0,0,0,0.3);
    stroke: black;
    stroke-width: 0.1px;
    stroke-dasharray: 0.2 0.2;
    stroke-width: 0.1;
}

/* Wind stability areas ********************/

.wind-stability-params input {
    width: 16px;
}

.wind-stability-params  {
    border: 2px dashed black;
    padding: 4px;
    margin-bottom: 3px;
    margin-right: 3px;
}

.wind-stability-params hr {
    display: none;
}

/* .wind-stability-area { */
/*     fill: none; */
/*     stroke: black; */
/*     stroke-width: 0.2px; */
/*     stroke-dasharray: 0.6 0.6; */
/* } */

/* .wind-stability-area.alternate { */
/*     stroke: white; */
/*     stroke-dashoffset: 0.6; */
/* } */

.wind-stability-boxes {
    display: flex;
    flex-wrap: wrap;
}

/* Weather overrides ************************/

.override-label {
    vertical-align: bottom;
    padding-bottom: 3px;
}

.weather-overrides input {
    width: 35px;
}

.weather-overrides {
    border: dashed 2px fuchsia;
    padding: 4px;
    margin-bottom: 3px;
    margin-right: 3px;
}

.weather-override-boxes {
    display: flex;
    flex-wrap: wrap;
}

/* Spinner *********************************/

.spinner-background {
    opacity: 0.25;
}

.spinner {
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-name: spin-fade;
    fill: lightblue;
}

.spinner0 {
    animation-delay: 0s;
}

.spinner1 {
    animation-delay: 0.042s;
}

.spinner2 {
    animation-delay: 0.083s;
}

.spinner3 {
    animation-delay: 0.125s;
}

.spinner4 {
    animation-delay: 0.166s;
}

.spinner5 {
    animation-delay: 0.208s;
}

.spinner6 {
    animation-delay: 0.25s;
}

.spinner7 {
    animation-delay: 0.292s;
}

.spinner8 {
    animation-delay: 0.333s;
}

.spinner9 {
    animation-delay: 0.375s;
}

.spinner10 {
    animation-delay: 0.417s;
}

.spinner11 {
    animation-delay: 0.458s;
}


@keyframes spin-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Input Fields *************************/

.control-container {
    flex-direction: column;
    flex-wrap: wrap;
}

#display-controls-section .control-container,
#weather-params-section .control-container {
    display: flex;
    /* max-height: 96px; */
}

.field {
    display: flex;
    flex-wrap: nowrap;
    /* background: linear-gradient(45deg, #fbfbfb, lavender); */
    margin: 0 2px 3px 2px;
    padding: 0 4px 3px 2px;
}

.field-label {
    width: 70px;
}

#weather-params-section .field-label {
    width: 120px;
}

.field-input {
    width: 120px;
}

.field-input select,
.field-input input {
    width: 100%
}

#weather-params-section .field-input input {
    width: 35px;
}

#advanced-params-section .field-label {
    width: 90px;
}

#advanced-params-section .field-input {
    width: 40px;
}

#advanced-params-section .field-input input {
    width: 55px;
}

/* Swatch colors */

div.minicolors-theme-weathergen {
    border: solid 1px black;
    width: 16px;
    height: 16px;
}

.minicolors input[type=hidden] + .minicolors-swatch {
    width: 0;
}

