@font-face {
    font-family: 'FallingSky';
    src: local('FallingSky'), url('FallingSky.otf') format('opentype');
}

@font-face {
    font-family: 'Segoe UI';
    src:
        local("Segoe UI Light"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"),
        url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype");
    font-weight: 100;
}

/* App Settings */
div.wherefly {
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #35353518;
    color: white;
    font-family: 'Segoe UI';
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 5;
}

div.wherefly-main {
    background-color: #353535;
    padding: 1rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 55rem;
}

div.wherefly-main h2 {
    font-weight: 500;
}

div.wherefly-close {
    margin: 0;
    margin-top: 0.8rem;
    margin-bottom: 1.2rem;
    margin-left: 50rem;
    background-color: #454545;
    width: fit-content;
    padding: 4px 20px;
    border: white solid 2.5px;
    cursor: pointer;
}

div.wherefly-close:hover {
    background-color: #656565;
}

img {
    -webkit-user-drag: none;
}

body {
    background-color: black;
    margin: 0;
    padding: 0;
    font-family: 'FallingSky';
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.place-card-large.place-card {
    display: none !important;
}

/* Main App */
div.mainapp {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

/* Header */
header {
    background: rgb(53, 53, 53);
    height: 3rem;
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}

div.headerleft,
div.headerright {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.18rem;
}

a.home i {
    margin-right: 0.4rem;
}

a.home,
a.pane,
a.settings,
a.play {
    cursor: pointer;
    color: white;
    text-decoration: none;
    height: 3rem;
    padding: 0rem 0.6rem;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    margin-right: 0.4rem;
}

a.pane i {
    color: red;
}

a.home:hover,
a.pane:hover,
a.settings:hover,
a.play:hover {
    background: #454545;
    transition: 0.25s;
}

img.headerimg {
    width: 30px;
    height: 31.2px;
    margin-left: 0.6rem;
}

a.title {
    color: white;
    font-weight: bold;
    font-size: 1.55rem;
    margin-left: 0.7rem;
    text-align: center;
    color: white;
    text-decoration: none;
}

div.loading {
    background-color: black;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.loadwrapper img {
    width: 8rem;
    animation: rotate 1.5s 0s linear infinite;
}

body::-webkit-scrollbar {
    display: none;
}

@keyframes rotate {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

/* Left Panel */
div.no-left-panel,
div.no-left-panel2 {
    display: none;
    position: fixed;
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    z-index: 8;
    background-color: rgb(24, 24, 24);
    color: white;
    font-weight: lighter;

    div {
        i {
            font-size: 2.5rem;
            color: gray;
        }

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

div.no-left-panel2 {
    z-index: 9;
}

img.no-left-panel-image {
    width: 100rem;
    margin-top: 6rem;
    margin-bottom: 0;
}

i.panel-close {
    font-size: 1.5rem;
    color: gray;
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
}

div.no-left-panel-text {
    margin-top: 10dvh;
}

p.no-left-panel-small {
    color: gray;
    font-size: 1rem;
    margin: 0;
    margin-bottom: 0.4rem;
}

div.left-panel {
    position: fixed;
    width: calc(100vw - 25rem);
    height: 100vh;
    left: 0;
    background-color: #262626;
}

div.leaflet-control-zoom,
div.leaflet-bottom {
    display: none !important;
}

/* Right Panel */
span.marker-label {
    color: white;
    position: relative;
    bottom: 3.3rem;
    font-size: 1.2rem;
}

div.right-panel {
    background-color: #f1f1f1;
    height: 100dvh;
    width: 25rem;
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
}

div.settings {
    display: none;
    flex-direction: column;
    margin: 3rem;
    margin-top: 5.5rem;
    justify-content: flex-start;
    gap: 0.7rem;
    height: 70dvh;
}

div.settings-head {
    font-size: 3rem;
    margin-bottom: 2rem;
}

div.settings-text {
    color: gray;
    font-size: smaller;
}

div.settings select {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    padding: 0.2rem;
}

img.settings-logo {
    margin-top: 5rem;
}

div.top-info-container {
    display: grid;
    grid-template-columns: 2fr 1.5fr 2fr;
    grid-template-rows: 1fr 1fr;
    margin: 4rem;
    margin-bottom: 0;
    height: 4rem;
    grid-template-areas:
        'origin logo destination'
        'origini logo destinationi';
    ;
    row-gap: 0.4rem;
}

div.top-info1 {
    grid-area: origin;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.2rem;
}

div.top-info2 {
    grid-area: origini;
    display: flex;
    justify-content: center;
    font-size: 1.2rem;
}

div.top-info3 {
    grid-area: logo;
    color: red;
    rotate: 90deg;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.top-info4 {
    grid-area: destination;
    display: flex;
    justify-content: center;
    font-size: 3.2rem;
}

div.top-info5 {
    grid-area: destinationi;
    display: flex;
    justify-content: center;
    font-size: 1.2rem;
}


div.bottom-info-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(9 1fr);
    margin: 3rem;
    height: 25rem;
    column-gap: 1.25rem;
    grid-template-areas:
        'lto ltd'
        'ltoi ltdi'
        'gs alt'
        'gsi alti'
        'dt dr'
        'dti dri'
        'tr eta'
        'tri etai'
        'metric arrival'
    ;
}

div.bottom-info1 {
    grid-area: lto;
}

div.bottom-info2 {
    grid-area: ltoi;
}

div.bottom-info3 {
    grid-area: ltd;
}

div.bottom-info4 {
    grid-area: ltdi;
}

div.bottom-info5 {
    grid-area: gs;
}

div.bottom-info6 {
    grid-area: gsi;
}

div.bottom-info7 {
    grid-area: alt;
}

div.bottom-info8 {
    grid-area: alti;
}

div.bottom-info9 {
    grid-area: dt;
}

div.bottom-info10 {
    grid-area: dti;
}

div.bottom-info11 {
    grid-area: dr;
}

div.bottom-info12 {
    grid-area: dri;
}

div.bottom-info13 {
    grid-area: tr;
}

div.bottom-info14 {
    grid-area: tri;
}

div.bottom-info15 {
    grid-area: eta;
}

div.bottom-info16 {
    grid-area: etai;
}

div.bottom-info17 {
    color: white;
    margin: 0.5rem 0;
    padding: 0.1rem 0.3rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    grid-area: metric;
    background-color: red;
}

div.bottom-info18 {
    color: white;
    margin: 0.5rem 0;
    padding: 0.1rem 0.3rem;
    display: flex;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    grid-area: arrival;
    background-color: black;
}

div.bottom-head {
    color: gray;
    font-size: smaller;
}

div.bottom-info {
    position: relative;
    bottom: 0.5rem;
    color: black;
    font-size: 1.7rem;
}

/* Animations */
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@media (max-width: 800px) {
    div.no-left-panel2 {
        display: flex !important;
    }
}