@import url("general.css");

/* Content */
.content {
    position       : relative;
    display        : flex;
    flex-direction : column;
    justify-content: start;
    align-items    : center;
    gap            : 20px;
    overflow-y     : hidden;
    width          : 100%;
    height         : auto;
}

.content h1 {
    text-align   : center;
    line-height  : 115%;
    font-size    : 25px;
    margin-bottom: 15px;
}

.content p {
    text-align   : justify;
    hyphens      : auto;
    width        : 90%;
    overflow     : hidden;
    line-height  : 1.5em;
    margin-bottom: 2px;
}

#messagebox:not([open]) {
    display: none;
}

#messagebox {
    position: fixed;
}

#messagebox {
    justify-content : center;
    align-items     : center;
    gap             : 30px;
    overflow-y      : hidden;
    text-align      : center;
    top             : 20%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    background-color: whitesmoke;
    width           : 300px;
    padding         : 10px;
    height          : fit-content;
    border          : 3px red solid;
    border-radius   : 10px;
    box-shadow      : 7px 11px 15px -7px #707070;
}

#messagebox p {
    text-align: center;
    width     : 90%;

}

#messagebox button {
    width        : 90px;
    height       : 30px;
    border-radius: 5px;
    margin-top   : 20px;
}

#windtrianglechart {
    display : inline;
    height  : 600px;
    width   : 100%;
    border  : 1px dotted grey;
    overflow: hidden;
}

winddata,
coursedata,
otherdata,
timedata {
    max-width: 85%;
    margin-right: 15%;
    padding-left: 20px;
}

input[type=range] {
    width  : 100%;
    padding: 0px;
    height : 20px;
}

input[type=range]::-ms-tooltip {
    display: none;
}

input[type=range]:focus {
    outline: none;
}

winddata input[type=range],
winddata input[type=number],
winddata input[type=text] {
    color           : white;
    accent-color    : #A66BD3;
    background-color: #A66BD3;
}

#coursespeed {
    accent-color: blue;
}

#coursespeedfield {
    background-color: blue;
}

#courseangle {
    accent-color: red;
}

#courseanglefield {
    background-color: red;
}

#variationfield {
    background-color: orange;
    color           : black;
}

#deviationfield {
    background-color: brown;
}

#variation {
    accent-color: orange;
}

#deviation {
    accent-color: brown;
}

#distance,
#consumption {
    accent-color: black;
}

#distancefield,
#consumptionfield {
    color: black;
}

input[type=number],
input[type=text],
select {
    padding      : 4px;
    height       : 1.7rem;
    font-size    : 1rem;
    font-weight  : bold;
    border-radius: 5px;
    color        : white;
    width        : 75px;
}

winddata.fields,
coursedata.fields,
otherdata.fields,
timedata.fields,
otherdata.ranges {
    flex-direction : row;
    align-items    : start;
    justify-content: start;
    width          : 100%;
}

winddata.ranges,
coursedata.ranges,
timedata.ranges {
    flex-direction: column;
    align-items   : center;
}

winddata.ranges,
coursedata.ranges,
otherdata.ranges,
timedata.ranges,
winddata.fields,
coursedata.fields,
otherdata.fields,
timedata.fields {
    justify-content   : space-between;
    overflow-y        : hidden;
    gap               : 2px;
    width             : 90%;
    height            : auto;
    font-size         : .8rem;
    /* border         : 1px green solid; */
}

winddata.ranges div,
coursedata.ranges div,
timedata.ranges div {
    width: 100%;
}

otherdata.ranges div {
    width: 49%;
}

winddata label,
coursedata label,
otherdata label,
timedata label {
    max-width: fit-content;
}

winddata.ranges,
coursedata.ranges,
otherdata.ranges,
timedata.ranges {
    display: flex;
}

winddata.fields,
coursedata.fields,
otherdata.fields,
timedata.fields {
    display: none;
}

winddata.fields div div,
coursedata.fields div div,
otherdata.fields div div,
timedata.fields div div {
    display          : flex;
    flex-direction   : row;
    /* border        : 1px red solid; */
}

winddata.fields>div:nth-child(2),
coursedata.fields>div:nth-child(2),
otherdata.fields>div:nth-child(2),
timedata.fields>div:nth-child(2) {
    width    : 100px;
    /* border: 1px red solid; */
}

winddata.fields div:first-child,
coursedata.fields div:first-child,
otherdata.fields div:first-child,
timedata.fields div:first-child {
    flex-grow   : 1;
    /* border   : 1px violet solid; */
}

span {
    /* border      : 1px yellow solid; */
    max-width   : fit-content;
    padding-left: 3px;
    margin-top  : 5px;
}

#deviationfield {
    color: whitesmoke;
}

.output div {
    padding-top: 10px;
}

.explanations {
    display        : flex;
    flex-direction : column;
    justify-content: start;
    overflow-y     : hidden;
    width          : 90%;
    height         : auto;
    padding-bottom : 5px;
    font-size      : .8rem;
}

.explanations div {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    overflow-y     : hidden;
    min-height     : 25px;
}

.explanations div p:first-of-type {
    width: 30%;
}

.explanations div p:last-of-type {
    width: 70%;
}

.explanations p {
    overflow: hidden;
    padding : 0;
    margin  : 0;
}

.explanations h3 {
    padding: 0 0 20px 0;
}

.vectors {
    height: 12px;
    width : auto;
}

rect.boxdeco {
    fill        : whitesmoke;
    stroke-width: .5px;
    stroke      : grey;
}

tspan.doubleline {
    text-decoration: underline double;
}

/*   Toggle-Button */

.flipswitch {
    margin-top         : 0;
    padding-top        : 0;
    position           : relative;
    width              : 130px;     /*72px; Original*/
    user-select        : none;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
}

.flipswitch input[type=checkbox] {
    display: none;
}

.flipswitch-label {
    display      : block;
    overflow     : hidden;
    cursor       : pointer;
    border       : 1px solid #999999;
    border-radius: 10px;
}

.flipswitch-inner {
    width             : 200%;
    margin-left       : -100%;
    -webkit-transition: margin 0.3s ease-in 0s;
    -moz-transition   : margin 0.3s ease-in 0s;
    -ms-transition    : margin 0.3s ease-in 0s;
    -o-transition     : margin 0.3s ease-in 0s;
    transition        : margin 0.3s ease-in 0s;
}

.flipswitch-inner:before,
.flipswitch-inner:after {
    float             : left;
    width             : 50%;
    height            : 22px;
    padding           : 0;
    line-height       : 22px;
    font-size         : 12px;
    color             : white;
    font-family       : Trebuchet, Arial, sans-serif;
    font-weight       : bold;
    -moz-box-sizing   : border-box;
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
}

.flipswitch-inner:before {
    content         : "Regler anzeigen";
    padding-left    : 10px;
    background-color: #256799;
    color           : #FFFFFF;
}

.flipswitch-inner:after {
    content         : "Felder anzeigen";
    padding-right   : 10px;
    background-color: #ffffff;
    color           : #256799;
    text-align      : right;
}

.flipswitch-switch {
    width             : 20px;
    margin            : 1px;
    background        : #ffffff;
    border            : 1px solid #999999;
    border-radius     : 10px;
    position          : absolute;
    top               : 0;
    bottom            : 0;
    right             : 108px;    /*50px;  Original*/
    -webkit-transition: all 0.3s ease-in 0s;
    -moz-transition   : all 0.3s ease-in 0s;
    -ms-transition    : all 0.3s ease-in 0s;
    -o-transition     : all 0.3s ease-in 0s;
    transition        : all 0.3s ease-in 0s;
}

.flipswitch-cb:checked+.flipswitch-label .flipswitch-inner {
    margin-left: 0;
}

.flipswitch-cb:checked+.flipswitch-label .flipswitch-switch {
    right: 0;
}