/* Allgemein */

body                                                          { font-family:"Helvetica", sans-serif; background-color:#f7f7f7; color:#555; padding:0em; font-size:1.6em; font-weight:300; }
select                                                        { color:#555; font-size:1em; font-weight:300; text-align:left; } /* height:1.6em; */
select#units                                                  { width:8.4em; }
select#properties                                             { width:12em; }
input[type="text"]                                            { width:3.4em; color:#555; font-size:1.1em; font-weight:300; text-align:right; }
input[type="number"]                                          { width:4.3em; color:#555; font-size:1.1em; font-weight:300; text-align:right; }
button                                                        { margin-left:1em; padding:0em 0.2em 0em 0.2em; font-size:0.8em; }
.container                                                    { display:block; margin:0 auto; max-width:800px; } /* border-radius:6px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */

h1,h2                                                         { font-size:1em; color:#333; font-weight:400; }
h1                                                            { margin:1em 0em 1em 0em; text-align:center; color:blue; }
h1 span                                                       { color:grey; }
p                                                             { line-height:1.2; margin-bottom:20px; }
td > ul                                                       { margin-top:0px; }
hr                                                            { margin:0.6em 0em 1.2em 0em; border-bottom:none 0px; color:#404040; }
table,th,td                                                   { border:none 0px; }
td                                                            { padding:0.4em; vertical-align:top; }
table.r3 td:nth-child(2)                                      { text-align:right; }
table.r4 td:nth-child(1)                                      { min-width:2em; }
table.r4 td:nth-child(2)                                      { min-width:18em; }
table.r4 td:nth-child(3)                                      { min-width:4.4em; text-align:right; }
table.r4 td:nth-child(4)                                      { min-width:3em; }
ul                                                            { margin-bottom:0em; }
ul li                                                         { margin-bottom:0.6em; }
.info                                                         { color:#ddd; }
.info:hover                                                   { color:#555; }
b,strong                                                      { color:#333; }

form#calculation_form table td                                { line-height:1.4em; }
form#calculation_form table td:nth-child(1)                   { vertical-align:bottom; padding-bottom:0.6em; }
form#calculation_form table td:nth-child(2)                   { vertical-align:bottom; padding-bottom:0.5em; }
/*
.disabled                                                     { color:#333; background-color:#f7f7f7; border:none 0px; }
form#calculation_form input[type="text"].disabled             { color:#333; background-color:#f7f7f7; border:none 0px; }
*/
/* black color on disabled input fields will only be shown in MSFS 2020 with explicite declarations */
form#calculation_form input#distance-in-nm.disabled           { color:#000; background-color:#f7f7f7; border:none 0px; }
form#calculation_form input#height-difference-in-ft.disabled  { color:#000; background-color:#f7f7f7; border:none 0px; }
form#calculation_form input#speed-in-kts.disabled             { color:#000; background-color:#f7f7f7; border:none 0px; }
form#calculation_form input#rate-in-ft-per-min.disabled       { color:#000; background-color:#f7f7f7; border:none 0px; }
form#calculation_form input#rate-in-degrees.disabled          { color:#000; background-color:#f7f7f7; border:none 0px; }
form#calculation_form input#time-in-hmm.disabled              { color:#000; background-color:#f7f7f7; border:none 0px; }

/* form#search_form                                              { position:relative; display:inline; } */
input#search_text, button#search_button                       { font-size:0.9em; width:4em; }

table#calculation_units                                       { width:100%; }
table#calculation_units td                                    { padding:0px; }
table#calculation_units td:nth-child(1)                       { width:11em; }
table#calculation_units input                                 { width:3.5em; }
table#calculation_units hr                                    { margin:0.8em 0em 0.8em 0em; }

div#property_table table                                      { margin:1em auto 0em auto; }
          
/* Reiterkarten mit Dank an Joseph Fusco: https://cdpn.io/fusco/fullembedgrid/Wvzjrm?animations=run&type=embed */

.tab-wrap                                                     { position:relative; display:flex; flex-wrap:wrap; list-style:none; max-width:100%; margin:1.2em 0em 0em 0em; transition:0.3s ease; } /* umlaufender Schatten: transition:0.3s box-shadow ease; border-radius:6px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
/* .tab-wrap:hover                                            { box-shadow:0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19); } kein umlaufender Hover-Schatten */

.tab                                                          { display:none; }
.tab + label                                                  { display:block; flex-grow:3; text-align:center; text-decoration:none; height:50px; padding:15px; cursor:pointer; color:#777; background-color:#dadada; box-shadow:0 -1px 0 #eee inset; border-radius:6px 6px 0 0; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:0.3s background-color ease, 0.3s box-shadow ease; }

/* edit for additional tabs */
.tab:checked:nth-of-type(1) ~ .tabContent:nth-of-type(1)      { opacity:1; transition:0.5s opacity ease-in, 0.8s transform ease; position:relative; top:0; z-index:100; transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(2) ~ .tabContent:nth-of-type(2)      { opacity:1; transition:0.5s opacity ease-in, 0.8s transform ease; position:relative; top:0; z-index:100; transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(3) ~ .tabContent:nth-of-type(3)      { opacity:1; transition:0.5s opacity ease-in, 0.8s transform ease; position:relative; top:0; z-index:100; transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(4) ~ .tabContent:nth-of-type(4)      { opacity:1; transition:0.5s opacity ease-in, 0.8s transform ease; position:relative; top:0; z-index:100; transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(5) ~ .tabContent:nth-of-type(5)      { opacity:1; transition:0.5s opacity ease-in, 0.8s transform ease; position:relative; top:0; z-index:100; transform:translateY(0px); text-shadow:0 0 0; }
.tab:checked:nth-of-type(6) ~ .tabContent:nth-of-type(6)      { opacity:1; transition:0.5s opacity ease-in, 0.8s transform ease; position:relative; top:0; z-index:100; transform:translateY(0px); text-shadow:0 0 0; }

.tab:first-of-type:not(:last-of-type) + label                 { border-top-right-radius:0; border-bottom-right-radius:0; }
.tab:not(:first-of-type):not(:last-of-type) + label           { border-radius:0; }
.tab:last-of-type:not(:first-of-type) + label                 { border-top-left-radius:0; border-bottom-left-radius:0; }
.tab:checked + label                                          { color:#222; background-color:#f7f7f7; box-shadow:0 -1px 0 #fff inset; cursor:default; }

.tab:not(.tab:checked) + label:hover                          { background-color:#f9f9f9; box-shadow:0 1px 0 #f4f4f4 inset; } /* Hover-Effekt nur für inaktive Reiter */
/* .tab:checked + label:hover                                 { box-shadow:0 -1px 0 #fff inset; background-color:#fff; } kein Hover-Effekt für aktive Reiter */

.tabContent                                                   { position:absolute; width:100%; left:0; padding:0.6em; opacity:0; transform:translateY(-3px); background-color:transparent; border-radius:6px; z-index:-1; }
.tabContent table                                             { margin-top:0.6em; }
.tabContent ul                                                { padding-left:1em; }