:root{
    --innerBg: rgb(17 20 23 / 90%);
    --innerBgInsetShadow: rgb(95,95,95);
    --dynamicMenuBg: rgb(255 255 255 / 75%);
    --text: white;
    --input: white;
    --floatWIN-BG: rgb(0 0 0 / 80%);
    --floatBTNBg: #eaeaea;
    --floatBTNBgHover: white;
    --floatWinText: white;
    --bad: #DC7633;
    --ok: #F8C471;
    --good: #58D68D;
    --terribleBg: white;
    --terrible: #ff1919;
    --arptNormalBg: white;
    --rptBg: rgb(36 49 62 / 30%);
    --metarHeadBg: #141c25;
    --prdct: #d2dce6;
    --prdctBg: rgb(45 72 99 / 40%);
    --scrollBar: #F5F5F5;
    --fontWeight: normal;
    --skelenton-color: rgba(255 255 255/0.02);
    font-size: 1em;
}
*{
    -webkit-appearance: none;
}
html, body {
    /* position: fixed; */
    background-color: #101010;
    color: var(--text,white);
    font-weight: var(--fontWeight,normal);
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    line-height: 140%;
    margin: 0;
    font-family: 'Jura', sans-serif;
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
    overflow: hidden;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100% !important;
    
}
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./img/repeating-coffee.jpg);
}
body.bright::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./img/repeating-coffee.jpg);
    filter: invert(1) brightness(0.8);
}
::selection{
    color:var(--metarHeadBg);
    background-color: var(--dynamicMenuBg);
}
a, span, i{
    border-radius: 1em;
}
P{
    margin: 0;
}

.rpt_all{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0.3em 0;
    background-color: var(--rptBg,#24313e);
    padding: 0.2em;
    width: 100%;
    max-width: 100%;
}
.metar_head{
    width: 3em;
    min-width: 3em;
    max-width: 3em;
    overflow-wrap: normal;
    margin-right: 0.3em;
    display: flex;
    align-items: center;
    padding: 0.5em;
    background-color: var(--metarHeadBg,#141c25);
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0.7;
}
.rpt_body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 110%;
    /* webkit下不溢出的最大宽度 */
    width: 87%;
    transition: opacity 0.8s cubic-bezier(0, 2.79, 0.98, -1.79);
}
.block{
    transition: backgound-color 0.2s cubic-bezier(0, 2.79, 0.98, -1.79);
    font-style: normal;
}
.recent_float{
    position: fixed;
    margin-top: -9em;
    line-height: 1.3em;
    padding: 0.5em;
    background-color: var(--floatBTNBg);
    color: var(--innerBg);
    font-style: normal;
    opacity: 0;
    box-shadow: black 0 0 0.3rem 0;
    transition: opacity 200ms cubic-bezier(0, 2.79, 0.98, -1.79);
    max-width: 80vw;
    overflow: hidden;
    white-space: nowrap;
    max-height: 8em;
}
.recent_float .prdct {
    color: var(--floatBTNBg);
    background-color: var(--metarHeadBg);
    font-weight: 500;
    opacity: .8;
    padding: 0 0.6em;
}
.rpt_prdct{
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    margin-top: 0.3em;
}
.prdct_time {
    width: 30em;
    max-width: fit-content;
    margin-right: 0.3em;
}
#HRinRpt {
    width: 98%;
    border: none;
    border-top: dashed 0.1em;
    color: #1b2631;
    margin: 0.1em;
    margin-top: 0.2em;
}
div {
    border-radius: 8px;
}
hr {
    max-width: 60em;
    margin-inline-start: 0.2em;
}
input {
    background: none;
    color: var(--input,white);
    font-style: italic;
    text-align: center;
    border: none;
    border-bottom: var(--input,white) 1px solid;
    box-shadow: 0 0 0 0;
    border-radius: 0;
    -webkit-transition: width 0.4s cubic-bezier(.62,-0.14,.62,1.25);
    transition: width 0.4s cubic-bezier(.62,-0.14,.62,1.25);
    margin: 0;
    font-size: 1rem;
    padding-bottom: 0;
}
input:focus{
    text-align: center;
    border: none;
    border-bottom: var(--input,white) 2px solid;
    box-shadow: 0 0 0 0;
    border-radius: 0;
    outline: none;
}
input:focus-visible{
    text-align: center;
    border: none;
    border-bottom: var(--input,white) 2px solid;
    box-shadow: 0 0 0 0;
    border-radius: 0;
    outline: none;
} 
#inputFLTNO::placeholder{
    color: var(--input,white);
}
#inputFLTNO::-moz-placeholder{
    color: var(--input,white);
}
#inputFLTNO::-webkit-input-placeholder{
    color: var(--input,white);
}
#inputFLTNO:focus::placeholder{
    color: darkgray;
}
#inputFLTNO:focus::-moz-placeholder{
    color: darkgray;
}
#inputFLTNO:focus::-webkit-input-placeholder{
    color: darkgray;
}
#fltNOChecker {
    position: relative;
    left: -1.2em;
    color: var(--good);
    margin-right: -1.2em;
    transition: opacity 0.3s cubic-bezier(.62,-0.14,.62,1.25);
    opacity: 0;
}
#inputCOMPANY{
    background-color: var(--text);
    color: var( --metarHeadBg);
    padding-left: .5em;
    font-weight: 700;
    font-family: 'Jura', sans-serif;
    margin-top: auto;
    margin-bottom: 0;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    font-style: normal;
}
#fnLabel {
    color: var(--text);
    margin-right: -1.3em;
}
textarea{
    height: 5rem;
    width: 100%;
    resize: none;
    background-color: #333333;
    color: white;
    margin: 1em auto;
    border-color: #6b6b6b;
    border-radius: 0.5em;
}
img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: -webkit-filter 0.2s ease-in-out;  
    -moz-transition: -moz-filter 0.2s ease-in-out;  
    -o-transition: -o-filter 0.2s ease-in-out;  
    transition: filter 0.2s ease-in-out;  
}
#NMC{
    padding: 0 .5em;
    background-color: var(--innerBg);
    color: var(--text);
    border-radius: 0;
    margin: 0 .5em 0 -.5em;
    font-weight: bold;
    text-shadow: 0 0 5px var(--innerBg);
    opacity: .9;
}
div#NMC::after {
    content: attr(data-for-after);
}
.innerTop {
    height: 1.5em;
    width: fit-content;
    font-weight: 400;
    font-size: 0.8rem;
    font-family: 'Ubuntu Mono', monospace;
    display: flex;
    flex-direction: row;
    opacity: 0.95;
    margin-top: -1rem;
    border-radius: 0 0 0.4rem 0.4rem;
    overflow: hidden;
}
.innerTopEle {
    background-color: var(--text,white);
    color: var(--metarHeadBg, #141c25);
    border-radius: 0;
    padding: 0 1em;
    display: flex;
    align-items: center;
    opacity: 0.8;
    transition: 
        opacity 150ms ease-in-out,
        color 150ms ease-in-out,
        background-color 150ms ease-in-out;
    overflow: hidden;
    white-space: nowrap;
    min-height: 1.3em;
}
.innerTopEle.clickable::before {
    content: "|";
    position: absolute;
    margin: 0 0 0 -1.3em;
}
.innerTopEle:nth-child(3)::before {
    content: "";
}
.innerTopEle.clickable:hover, .innerTopEle.clickable:active{
    opacity: 1;
    z-index: 4;
    box-shadow: 0 0 0.5rem #000;
}
.innerTopEle.selected {
    opacity: 0.9;
    background-color: var(--good);
    color: black;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 0 0.5rem 0px var(--good);
}
.innerTopEle.selected::before {
    content: "";
}
.innerTopEle.selected::after {
    content: attr(data-for-text);
}
.selected > .fa-bolt {
    color: yellow;
}
.selected > .fa-cloud-showers-heavy {
    color: #0470d0;
}
.selected > .fa-thermometer-three-quarters {
    color: #ff2300;
}
.selected > .fa-icicles {
    color: #c6e4ff;
}
.selected > .fa-smog {
    color: white;
}

.blur{
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}
#radarProgressBar{
    /* 进度条的槽 */
    margin-left: 1em;
    width:8em;
    /* 设置进度条的高度 */
    height: 0.5em;
    background-color: var(--floatBTNBgHover,#1B2631);
}
#radarProgress{
    /* 进度部分 */
    /* 利用继承父元素宽度的百分比控制进度 */
    width: 60%;
    height: 100%;
    transition: width 400ms cubic-bezier(0.39, -0.26, 0.82, 1.56)
}
#radarProgress.valid{
    background-color: var(--good);
}
#radarProgress.invalid{
    background-color: var(--terrible);
}
#radarProgress.loading{
    background: linear-gradient(45deg, #58d68d 0, #58d68d 25%, white 25%, white 50%, #58d68d 50%, #58d68d 75%, white 75%, white);
    background-size: 0.8em 0.8em;
    animation: progressLoading 0.5s linear infinite;
    width: 100%;
}
@keyframes progressLoading {
    0%{
        background-position-x: 0;
    }
    100%{
        background-position-x: 0.8em;
    }
}
#dutyTimeline{
    width: 90%;
    height: 1em;
    margin: 2.5em auto;
    box-shadow: 0 0 10px #000;
    display: flex;
}
#timeSlider{
    height: 1.5em;
    width: 0.2em;
    background-color: #ffffff;
    position: absolute;
    margin-left: 50%;
    margin-top: -0.25em;
    opacity: 0.9;
    box-shadow: 0 0 5px 1px #000;
    white-space: nowrap;
    padding-top: 1em;
}
#timePreflight{
    background-color: #7ed2ff;
    height: 100%;
    width: 12.5%;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
#timeDuty{
    background-color: #4fff99;
    height: 100%;
    width: 75%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#timeOT1{
    background-color: #ff9760;
    height: 100%;
    width: 2.5%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#timeOT2{
    background-color: red;
    height: 100%;
    width: 10%;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}
input.inFloatWIN {
    margin-right: 1em;
    color:#ffffff;
    font-size: 1rem;
    width: 3em;
    border-bottom: white 1px solid;
}
img#floatSYMBOL {
    max-width: 3em;
}
.short{
    color:#ffffff;
    font-size: 1rem;
    width:1.2em;
    border-bottom: white 1px solid;
}
#calcPart{
    margin-top: 0.5em;
}
.emphasize{
    color:var(--terrible,red);
    font-weight: bold;
}
.floatDuty {
    width: 9em;
    height: 1.3em;
    line-height: 1.3em;
    background-color: var(--floatWIN-BG);
    opacity: 0.9;
    box-shadow: 0 0 10px #000;
    padding: 0.5em;
    z-index: 6;
    top: 200px;
    right: 1em;
    text-align: center;
    position: fixed;
    color:#ffffff;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    transition: top 0.3s cubic-bezier(.62,-0.14,.62,1.25) 100ms;
}
#siteInfo {
    position: fixed;
    color: white;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    top: 5vh;
    font-family: 'Ubuntu Mono';
    font-weight: normal;
}
#radarPlaceholder {
    margin-top: 0.5rem;
    height: 0;
    opacity: 0;
    width: 15rem;
    max-width: 80vw;
    transition: 
        opacity 200ms ease-in-out,
        height 200ms ease-in-out;
}
#radarContainer{
    position: fixed;
    max-width: 60rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.windy{
    top: -4.5vh;
    width: 100vw;
}
#radarIMG {
    z-index: 1;
    margin: 0 auto;
    max-height: 80vh;
    display: flex;
    justify-content: flex-start;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    border-radius: 0;
}
#windyIframe {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    margin: auto;
    max-width: 60rem;
    z-index: 3;
    width: 100%;
    height: 66.5vh;
}
#chinaall {
    object-fit: contain;
    max-height: 80vh;
    z-index: 3;
}
#chinaallFade{
    object-fit: contain;
    max-height: 80vh;
    position: absolute;
    transition: opacity 0.3s ease-in-out;
    z-index: 4;
    pointer-events: none;
}
#refreshBar {
    margin: 0 auto;
    z-index: 5;
    border-radius: 0;
    border: none;
    width: 10%;
    -moz-box-shadow: 0px 0px 8px 1px #00ff6b;
    -webkit-box-shadow: 0px 0px 8px 1px #00ff6b;
    box-shadow: 0px 0px 8px 1px #00ff6b;
    /* transition: transform 100ms ease-in-out; */
    height: 3px;
    background-color: var(--good);
}
#refreshPill{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    z-index: 5;
    width: 10em;
    height: 1.2em;
    line-height: 1.2em;
    box-shadow: 0px 0px 8px 1px #00ff6b;
    position: relative;
    top: -0.8em;
    background-color: var(--good);
    color: white;
    font-weight: bold;
    padding: 0.1rem 0.2rem;
    opacity: 0;
    transition: width 0.4s cubic-bezier(.62,-0.14,.62,1.25);
}
#chinaallTOUCH {
    pointer-events: all;
}
#everthing {
    background-color: #1B2631;
    max-width: 60rem;
    overscroll-behavior: none;

}
#head_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin: 0.5em auto 0.5em 0;
    padding-right: 1rem;
}
.GPU_ACC{
    /* 开启GPU加速 */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
}
#OUTER {
    height: 100%;
    position: fixed;
    z-index: 5;
    overflow: scroll;
    padding-top: 200px;
    pointer-events: none;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 0;
    -webkit-overflow-scrolling: none;
    overscroll-behavior: none;
    transition: padding-top 0.5s cubic-bezier(.62,-0.14,.62,1.25);
}
#INNER {
    background-color: var(--innerBg,#1B2631);
    box-shadow: inset var(--innerBgInsetShadow) 0px 1px 1px 0px, rgb(0 0 0) 0px 0px 10px;
    padding-top: 1em;
    pointer-events: all;
    height: 150%;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0 auto;
    left: 0;
    right: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 30em 30em;
    scroll-behavior: smooth;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: 
        background-color 0.5s ease-out,
        backdrop-filter 0.3s ease-in-out;
}
#fakeBlur {
    filter: saturate(180%) blur(10px);
    position: absolute;
    z-index: -1;
    left: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: black;
    height: 1600px;
    background-image: url("");
    background-size: 600px auto;
    width: 1091px;
}
#fakeBlurV2{
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 60rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    filter: saturate(180%) blur(20px);
    -webkit-filter: saturate(180%) blur(20px);
}
#fakeBlurImg{
    max-height: 80vh;
}
.reports {
    width: 100%;
    text-align: left;
    margin: 0 0 0.5em;
}
.REPORT {
    margin-bottom: 0.5em;
}

.skeleton .rpt_body div {
    animation: glowing 1s infinite ease-in-out;
    will-change: opacity;
}

.skeleton i, .skeleton div {
    color: transparent;
}

.skeleton .rpt_wx {
    background-color: var(--skelenton-color);
}

.skeleton .good, .skeleton .bad, .skeleton .ok {
    background-color: var(--arptNormalBg);
    height: 1rem;
    line-height: 1rem;
    display: inline-block;
    opacity: .2;
}

.skeleton .terrible{
    line-height: 1rem;
    display: inline-block;
    opacity: .2;
}

@keyframes glowing {
    0% {
        opacity: .55;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .55;
    }
}
#floatWIN {
    background-color: var(--floatWIN-BG);
    color: var(--floatWinText,white);
    box-shadow: 0 0 10px #000;
    position: fixed;
    z-index: 25;
    margin: -25vh auto;
    left: 0;
    right: 0;
    width: 40em;
    max-width: 80vw;
    display: flex;
    opacity: 0;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    max-height: 80%;
    overflow: scroll;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    transition: 
        margin-top 0.4s cubic-bezier(.62,-0.14,.62,1.25),
        opacity 0.4s cubic-bezier(.62,-0.14,.62,1.25);
}
#floatWINCover{
    border-radius: 0;
    position: fixed;
    z-index: 20;
    width: 100vw;
    height: 100vh;
    left: 0;
    opacity: 0;
    background-color: rgb(0 0 0 / 10%);
    transition: 
        opacity 0.4s cubic-bezier(.62,-0.14,.62,1.25);
    overflow: hidden;
    overscroll-behavior: none;
    display: none;
}
#closeFloatWIN {
    font-size: 2rem;
    height: 2rem;
    line-height: 2rem;
    position: sticky;
    top: 1%;
    left: 99%;
}
#closeFloatWIN:hover {
    background-color: #232323;
}
#floatDESC p {
    text-indent: 2em;
    margin: inherit;
}
#floatTITLE {
    padding: 1rem;
    font-weight: bold;
    text-align: center;
}
#floatDESC {
    margin-top: 1em;
    font-size: 0.8rem;
    width: 95%;
}
#topSHADOW {
    box-shadow: 0 0 1em 3px #000;
    position: fixed;
    z-index: 20;
    width: 100%;
    margin: auto 0;
    left: 0;
    right: 0;
}
#floatMSG {
    --floatMsgColor:red;
    color: white;
    background-color: var(--floatMsgColor);
    font-weight: bold;
    font-size: 0.9rem;
    position: absolute;
    z-index: 10;
    width: fit-content;
    margin: auto 0;
    left: 2%;
    top: 0;
    box-shadow: 0 0 0.5rem 0 #444444;
    padding: 0.1em 1em 0.1em 0.5em;
    opacity: 0;
    overflow: hidden;
    text-shadow: 0 0 5px #606060;
}
#floatMSG:hover, #floatMSG:active, #floatMSG:focus{
    box-shadow: 0 0 0.5rem var(--floatMsgColor);
}
#floatMSG::before {
    content: "";
    background: black;
    opacity: 0.5;
    z-index: -1;
    width: 1.8em;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    box-shadow: 0px 0px 5px #000;
}
#stickyMSG {
    color: white;
    background-color: red;
    font-weight: bold;
    font-size: 0.9rem;
    position: absolute;
    z-index: 35;
    width: fit-content;
    margin: auto 0;
    left: 2%;
    top: 0;
    box-shadow: 0 0 6px 0 #000000;
    padding: 0.1rem 1rem;
    opacity: 0;
    overflow: hidden;
    text-shadow: 0 0 5px #606060;
}
.reporttext{
    text-indent: -2em;
    margin-left: 2em;
    margin: 0 0 0 2em;
}
.prdct {
    color: var(--prdct,#d2dce6);
    background-color: var(--prdctBg,#2d4863);
    font-size: 0.95em;
    margin:0 0.2rem;
    padding: 0 0.4rem;
    font-style: normal;
    opacity: 0.9;
}
.largerfont{
    padding: 0.2rem 0.3rem;
}
.largerfont:hover{
    background-color: var(--prdct,#d2dce6);
    color: var(--prdctBg,#2d4863);
}
.arpt_ot {
    color: black;
    background: linear-gradient(45deg, red 0, red 25%, white 25%, white 50%, red 50%, red 75%, white 75%, white);
    background-size: 0.5rem 0.5rem;
    font-weight: bold;
    padding: 0.1rem 0.5rem;
    margin: 0 0.1rem;
}
.arpt_normal {
    color: black;
    background-color: var(--arptNormalBg,white);
    font-style: normal;
    font-weight: bold;
    padding: 0.1rem 0.5rem;
    margin: 0 0.1rem;
    width: fit-content;
}


.arpt_danger {
    color: #ffc8c8;
    background-color: #de0000;
    font-style: normal;
    font-weight: bold;
    padding: 0.1rem 0.5rem;
    margin: 0 0.1rem;
}
.arpt_good {
    color: #41ff91;
    background-color: #008e3c;
    font-style: normal;
    font-weight: bold;
    padding: 0.1rem 0.5rem;
    margin: 0 0.1rem;
}
.arptICAO.clickable:hover, .arptICAO.clickable:active, .arptICAO.clickable:focus{
    filter: brightness(1.1);
}
.arpt_ot.clickable:hover, .arpt_ot.clickable:active, .arpt_ot.clickable:focus{
    box-shadow: 0 0 0.5rem #f40000;
}
.arpt_normal.clickable:hover, .arpt_normal.clickable:active, .arpt_normal.clickable:focus{
    box-shadow: 0 0 0.5rem var(--input);
}
.arpt_good.clickable:hover, .arpt_good.clickable:active, .arpt_good.clickable:focus{
    box-shadow: 0 0 0.5rem #009c42;
}
.arpt_danger.clickable:hover, .arpt_danger.clickable:active, .arpt_danger.clickable:focus{
    box-shadow: 0 0 0.5rem #f40000;
}
.clickable{
    cursor:pointer;
    transition: 
        box-shadow 200ms ease-in-out,
        filter 200ms ease-in-out, 
        background-color 200ms ease-in-out,
        color 200ms ease-in-out;
}
.clickable:hover, .clickable:active, .clickable:focus{
    filter:saturate(1.05);
    box-shadow: 0 0 0.5rem gray;
}
.noneSelectable{
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Chrome/Safari/Opera */
    -webkit-user-select: none;
    /* Konqueror */
    -khtml-user-select: none;
    /* Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    -ms-user-select: none;
    /* Non-prefixed version, currently not supported by any browser */
    user-select: none;
}
.selectable{
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Chrome/Safari/Opera */
    -webkit-user-select: text;
    /* Konqueror */
    -khtml-user-select: text;
    /* Firefox */
    -moz-user-select: text;
    /* Internet Explorer/Edge */
    -ms-user-select: text;
    /* Non-prefixed version, currently not supported by any browser */
    user-select: text;
}
.terrible {
    color: var(--terrible,red);
    background-color: var(--terribleBg,white);
    font-style: normal;
    font-weight: bold;
    margin: 0 0.2rem;
    padding: 0 0.4rem;
    font-size: 0.95em;
}
.bad {
    color: var(--bad,#DC7633);
    font-style: normal;
    font-weight: bold;
}
.ok {
    color: var(--ok,#F8C471);
    font-style: normal;
    font-weight: bold;
}
.good {
    color: var(--good,#58D68D);
    font-style: normal;
    font-weight: bold;
}
.gray{
    filter: grayscale(0.9);
}

#reloadSymbol {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -webkit-animation: myrotate 10s linear infinite;
    animation: myrotate 10s linear infinite;
}
.floatBtnSVG {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin-right: auto;
}
@-webkit-keyframes myrotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes myrotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.reloadBtnLayer {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    background-color: #ffffff;
    opacity: 0;
    z-index: 10;
}

#floatBTN {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    z-index: 10;
    background-color: var(--floatBTNBg,#eaeaea);
}
#floatBTN:hover {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    background-color: var(--floatBTNBgHover,#ffffff);
    box-shadow: 0 0 3px 0px #000000;
    opacity: 1;
}
#statusBTN {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    z-index: 9;
    background-color: #ac0101;
    box-shadow: 0 0 10px 0 #222222;
}
.float-action-button {
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;

    color: #F2F1EF;
    border-radius: 50%;
    padding: 0.8em;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}
#dynamicMenu {
    width: 0em;
    height: 0em;
    display: none;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    right: 3.5rem;
    bottom: 48px;
    padding: 0.5em;
    color: var(--metarHeadBg);
    background-color: var(--dynamicMenuBg);
    z-index: 7;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 0 10px 0 #222;
    -webkit-transition: 
        width 0.3s cubic-bezier(.62,-0.14,.62,1.25), 
        height 0.3s cubic-bezier(.62,-0.14,.62,1.25),
        opacity 0.1s linear;
    transition: 
        width 0.3s cubic-bezier(.62,-0.14,.62,1.25), 
        height 0.3s cubic-bezier(.62,-0.14,.62,1.25),
        opacity 0.1s linear;
}
.floatMenu {
    padding: 0.5em 1em;
    height: 2em;
    line-height: 2em;
    font-size: 1.1rem;
    font-weight: normal;
    position: relative;
    transition: 
        background-color 0.2s linear, 
        color 0.2s linear;    
    -webkit-transition: 
        background-color 0.2s linear, 
        color 0.2s linear;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    user-select: none; 
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
}
.floatMenu div {
    margin-top: -0.5rem;
}
.floatMenu:hover{
    background-color: var(--floatBTNBgHover);
    color: (--text);
    font-weight: bolder;
}
.floatMenu:active{
    background-color: var(--floatBTNBgHover);
    color: (--text);
    font-weight: bolder;
}
.floatMenu:hover .fa-redo{
    color: #ff3636;
}
.floatMenu:hover .fa-bolt{
    color: #fff836;
}
.floatMenu:hover .fa-list-alt{
    color: #47ff36;
}
.floatMenu:hover .fa-clock{
    color: #815eff;
}
.floatMenu:hover .fa-hourglass-half{
    color: #36afff;
}
.floatMenu:hover .fa-moon{
    color: #ffdf74;
}
.floatMenu:hover .fa-sun{
    color: #ffdf74;
}
.fas.center{
    width: 1em;
    text-align: center;
    margin-inline-end: 0.2em;
    opacity: .7;
    transition: 
        background-color 0.2s linear, 
        color 0.2s linear;    
    -webkit-transition: 
        background-color 0.2s linear, 
        color 0.2s linear;
}
.reset::after {
    content: 'RESET';
    position: absolute;
    left: 3rem;
    bottom: -0.2rem;
    font-size: 0.6rem;
}
.reloadRadar::after {
    content: 'Reload Radar';
    position: absolute;
    left: 3rem;
    bottom: -0.2rem;
    font-size: 0.6rem;
}
.changeRdrSrc::after {
    content: attr(content-for-after);
    position: absolute;
    left: 3rem;
    bottom: -0.2rem;
    font-size: 0.6rem;
}
.resetTimezone::after {
    content: attr(content-for-after);
    position: absolute;
    left: 3rem;
    bottom: -0.2rem;
    font-size: 0.6rem;
}
.duty::after {
    content: attr(content-for-after);
    position: absolute;
    left: 3rem;
    bottom: -0.2rem;
    font-size: 0.6rem;
}
.colorScheme::after {
    content: attr(content-for-after);
    position: absolute;
    left: 3rem;
    bottom: -0.2rem;
    font-size: 0.6rem;
}
#outliner{
    border: solid red;
    position: fixed;
    display: none;
    opacity: 0;
    z-index: 20;
    transition: opacity 0.3s ease-in-out;
}
#cover{
    position: fixed;
    border-radius: 0;
    z-index: 20;
    width: 100vw;
    height: 100vh;
    left: 0;
    pointer-events: auto;
    opacity: 0;
    display: none;
    background-color: rgb(0 0 0 / 35%);
    overflow: hidden;
    overscroll-behavior: none;
    transition: backdrop-filter 0.3s ease-in-out;
}
#text {
    color: white;
    font-size: 0.8rem;
    position: fixed;
    z-index: 21;
    opacity: 0;
    display: none;
    width: 80vw;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 5em;
    box-shadow: 0px 0px 10px #000;
    padding: 2em;
    background-color: var(--floatWIN-BG);
    transition: opacity .3s ease-in-out;
}
#title {
    text-align: center;
    padding: 0 2em 0.5rem 2em;
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 1px solid;
    border-radius: 0;
    margin: 0 auto 1rem auto;
    width: fit-content;
}
#content {
    text-indent: 2em;
    line-height: 1.8em;
}
#next{
    width: fit-content;
    text-align: center;
    padding: 0.5em 1em;
    box-shadow: 0 0 5px black;
    margin: 1em 1em 0 auto;
}
#skip {
    position: fixed;
    z-index: 21;
    opacity: 0;
    display: none;
    transition: opacity .3s ease-in-out;
    padding: 0.5em;
    box-shadow: 0 0 10px black;
    right: 1em;
    top: 1em;
    opacity: .5;
}
#skip:hover {
    opacity: 1;
}
#skip:active {
    opacity: 1;
}

#footer {
    margin: 0.2em auto;
    padding: 1em 0;
    font-family: 'Ubuntu Mono', monospace;
    font-weight: 100;
    color: var(--dynamicMenuBg);
    text-shadow: 1px 1px var(--innerBgInsetShadow);
    font-size: 0.8rem;
    width:100%;
}
#footer p {
    text-align: center;
    height: 1rem;
    line-height: 100%;
}
#footer a{
    color: var(--prdct);
    font-weight: 700;
}

body ::-webkit-scrollbar {
    width: 0;
    height: 16px;
    background-color: var(--scrollBar,#F5F5F5);
}
@media only screen and (max-width:760px) {
    :root{
        font-size: 0.8em;
    }
    #floatWIN {
        font-size: 0.8rem;
    }
}
@media only screen and (max-width:310px) {
    #floatWIN {
        zoom:0.7;
        -moz-transform: scale(0.7);
        -moz-transform-origin: 0 0;
    }
    input.inFloatWIN{
        font-size: 0.8rem;
    }
    .short{
        font-size: 0.8rem;
    }
}
@media only screen and (min-width:760px) {
    :root{
        font-size: 1.1em;
    }
    body {
        padding-left: 4em;
        padding-right: 4em;
    }
    #CONTENT {
        padding-left: 2em;
        padding-right: 2em;
    }
    #floatWIN {
        font-size: 1rem;
    }
}
/* 由于iOS设备不支持background-attachment:fixed属性，无法伪造blur，使用真实的blur效果 */
@supports (-webkit-touch-callout: none) {
    #closeFloatWIN{
        left:90%;
    }
  }