/* global.css */
body, html {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--font-color);
    box-sizing: border-box;
    font-family: var(--global-font);
    font-size: 16px;
    --max-width: 1280px;
    --default-transtion: all 0.3s ease;
    --opacity-transtion: opacity 0.3s ease;
    --transform-transtion: transform 0.3s ease;
    --global-font:Roboto, Helvetica Neue, sans-serif
}

.max-width {
    width: 100%;
    max-width: var(--max-width);
    box-sizing:border-box
}

a {
    color: var(--link-color);
    text-decoration:none
}

a.disabled {
    opacity:.3
}

.flex-row {
    display:flex
}

.capitalize {
    text-transform:capitalize
}

.uppercase {
    text-transform:uppercase
}

.glossary-term {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    cursor:pointer
}

body.content-loading content-router-wc {
    opacity:0
}

long-load-view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--bg-color);
    display:none
}

body.content-loading-long long-load-view {
    display: flex;
    flex-direction: column;
    justify-content:center
}

long-load-view .loader {
    width: 24px;
    height: 24px;
    background-image: var(--spin-loader);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    animation:spin 1s linear infinite
}

.switch-label {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: sans-serif;
    font-size:1rem
}

.switch-label .ios-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    min-width: 48px;
    height: 24px;
    min-height:24px
}

.switch-label .ios-switch input {
    opacity: 0;
    width: 0;
    height:0
}

.switch-label .slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    background-color: var(--switch-bg-color);
    transition: .3s;
    border-radius:24px
}

.switch-label .slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: var(--switch-cirlce-color);
    transition: .3s;
    border-radius:50%
}

.switch-label .ios-switch input:checked + .slider {
    background-color:var(--lightblue)
}

.switch-label .ios-switch input:checked + .slider::before {
    transform:translateX(24px)
}

.display-temp.m:after {
    content: "C"
}

.display-temp.e:after {
    content: "F"
}

.display-qpf.m:after {
    content: "mm"
}

.display-qpf.e:after {
    content: "in"
}

@keyframes spin {
    0% {
        transform:rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}