/* Place your CSS styles in this file */

body {
    font-family: 'Manrope', sans-serif;
    background-color: #1C1C1C;
    color: #F5F5F5;
    font-size: 18px;
    text-align: center;
}

.topnav {
    overflow: hidden;
    background-color: #4D4D4D;
}
  
.topnav a {
    float: left;
    color: #F5F5F5;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
  
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
  
.topnav a.active {
    background-color: #000000;
    color: #F5F5F5;
}

h1 {
    text-align: center;
}

input[type=text] {
    padding: 5px;
    margin: 5px;
    border: none;
    border-radius: 2em;
    width: 80%;
    text-align: left;
}

table, th, td {
    text-align: left;
    padding: 0.2em;
}

.results {
    width: 100%;
}

th {
    text-align: center;
    min-width: 7.5ch;
    background-color: #5a5a5abe;
    border-radius: 2px;
}

table {
    border-radius: 1em;
}

a{ 
    color: #F5F5F5;
}

.pull {
    padding-top: 5px;
    padding-bottom: 5px;
    width: 80%;
    max-width: 450px;
    height: min-content;
    margin: auto;
    border-radius: 3em;
    text-align: center;
}

.btn {
    width: 8em;
    margin: auto;
    cursor: pointer;
    padding: 0.5em 0.5em 0.5em 0.5em; 
    border-radius: 1em;
    border: solid white;
    border-width: 1.5px;
    text-align: center;
    color: #F5F5F5;
    transition: 0.2s;
}

.btn:hover {
    background-color: #5a5a5abe;
    transition: 0.2s;
}

.response {
    color: #F5F5F5;
    width: fit-content;
    min-width: 8em;
    max-width: 90%;
    height: min-content;
    margin: auto;
    padding: 0.5em 0.5em 0.5em 0.5em;
    border-radius: 1em; 
    text-align: center;
}

.container {
    color: #F5F5F5;
    width: fit-content;
    min-width: 10em;
    max-width: 90%;
    margin: auto; 
    padding: 0.5em 0.5em 0.5em 0.5em; 
    border-radius: 1em;
    border: solid white;
    border-width: 1.5px;
    text-align: center;
}

.about {
    width: 85%;
    text-align: left;
}

/* Classes for each flight category */
.VFR {
    color: rgb(0, 255, 0);
    background-color: rgba(0, 255, 0, 0.2);
    font-weight: bold;
}

.MVFR {
    color: blue;
    background-color: rgba(20, 20, 255, 0.2);
    font-weight: bold;
}

.IFR {
    color: red;
    background-color: rgba(255, 0, 0, 0.2);
    font-weight: bold;
}

.LIFR {
    color: magenta;
    background-color: rgba(255, 0, 255, 0.2);
    font-weight: bold;
}

.UNKN {
    color: rgb(255, 255, 0);
    background-color: rgba(255, 255, 0, 0.2);   
    font-weight: bold;
}

/* Tabs for METAR readout and chart */
.tab {
    overflow: hidden;
}

.tab button {
    background-color: #5a5a5abe;
    color: #F5F5F5;
    float: center;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 18px;
}

.tab button:hover {
    background-color: #838383be;
}

.tab button.active {
    background-color: #000000;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    overflow: auto;
}

#tablecontainer {
    display: none;
    width: 90%;
}

.graph {
    object-fit: scale-down;
}

/*
v1.0.1
-Fixed the #tablecontainer div to always be 90% of screen width. This keeps the bar from extending too far, and always gives a fixed value
    when building graphs.
-Cleaned up bar classes, removing uncessary color and font-weight.
v1.0.2
-Added CSS for tabs

v1.0.3
-Added CSS for top navbar

v1.1.0
-Made background gray and a little more coherent color pallete

v1.1.1
-Removed CSS for bar, which is now done with canvas
*/