/* Path: css/loading_screen.css */

#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../res/img/logowanie_bg3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10000;
    top: 0;
    left: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

#loading-screen-logo {
    position: absolute;
    top: calc(40% - 30px / 2);
    left: calc(50% - 370px / 2);
    width: 370px;
    height: 100px;
    background-image: url("../res/img/obliview.svg");
    background-size: 370px 100px;
    background-repeat: no-repeat;
    animation-name: pulsing-white;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes pulsing-drop-shadow {
    0% {
        filter: drop-shadow(0px 0px 2px red);
    }
    7.5% {
        filter: drop-shadow(0px 0px 10px red);
    }
    15% {
        filter: drop-shadow(0px 0px 10px orange);
    }
    22.5% {
        filter: drop-shadow(0px 0px 2px orange);
    }
    30% {
        filter: drop-shadow(0px 0px 2px yellow);
    }
    37.5% {
        filter: drop-shadow(0px 0px 10px yellow);
    }
    45% {
        filter: drop-shadow(0px 0px 10px green);
    }
    52.5% {
        filter: drop-shadow(0px 0px 2px green);
    }
    60% {
        filter: drop-shadow(0px 0px 2px blue);
    }
    67.5% {
        filter: drop-shadow(0px 0px 10px blue);
    }
    75% {
        filter: drop-shadow(0px 0px 10px indigo);
    }
    82.5% {
        filter: drop-shadow(0px 0px 2px indigo);
    }
    100% {
        filter: drop-shadow(0px 0px 2px violet);
    }
}

@keyframes pulsing-white {
    0% {
        filter: drop-shadow(0px 0px 2px white);
    }
    50% {
        filter: drop-shadow(0px 0px 5px white);
    }
    100% {
        filter: drop-shadow(0px 0px 2px white);
    }
}

@keyframes squares-fill-1 {
    0%{
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes squares-fill-2 {
    10%{
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes squares-fill-3 {
    20%{
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes squares-fill-4 {
    30%{
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.loading-spinner,
#loading-spinner {
    --anim-time: 1.5s;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loading-spinner path:nth-child(1),
#loading-spinner path:nth-child(1) {
    animation: squares-fill-1 var(--anim-time) ease-in-out infinite;
}
.loading-spinner path:nth-child(3),
#loading-spinner path:nth-child(3) {
    animation: squares-fill-2 var(--anim-time) ease-in-out infinite;
}
.loading-spinner path:nth-child(4),
#loading-spinner path:nth-child(4) {
    animation: squares-fill-3 var(--anim-time) ease-in-out infinite;
}
.loading-spinner path:nth-child(2),
#loading-spinner path:nth-child(2) {
    animation: squares-fill-4 var(--anim-time) ease-in-out infinite;
}

#loading-screen-progressbar {
    width: 0%;
    height: 10px;
    background-color: var(--mainColor);
    filter: brightness(0.7);
    /* upper box shadow */
    box-shadow: 0 0 10px 0 var(--mainColor);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.1s;
    animation: box-shadow-pulsing 1s infinite;
}

@keyframes box-shadow-pulsing {
    0% {
        box-shadow: 0 0 10px 0 var(--mainColor);
    }
    50% {
        box-shadow: 0 0 20px 0 var(--mainColor);
    }
    100% {
        box-shadow: 0 0 10px 0 var(--mainColor);
    }    
}

#loading-screen-indicator{
    /* dodatkowe informacje */
    position: absolute;
    top: calc(65% - 20px);
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
}

@media screen and (max-height: 600px) and (orientation: landscape) {
    #loading-screen-indicator {
        top: 90%;
        font-size: 1rem;
    }
}

:root,
:host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}

:root.high-contrast {
  --ol-foreground-color: var(--mainFontColorWhite);
  --ol-subtle-foreground-color: var(--mainFontColorWhite);
}

.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid var(--ol-background-color);
  background-color: var(--ol-partial-background-color);
}

.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}

.ol-scale-line {
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}

.ol-scale-line-inner {
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}

.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.ol-scale-bar-inner {
  display: flex;
}

.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}

.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}

.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid var(--ol-foreground-color);
}

.ol-scale-singlebar-even {
  background-color: var(--ol-subtle-foreground-color);
}

.ol-scale-singlebar-odd {
  background-color: var(--ol-background-color);
}

.ol-unsupported {
  display: none;
}

.ol-viewport,
.ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}

.ol-viewport {
  touch-action: pan-x pan-y;
}

.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.ol-grabbing {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.ol-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.ol-control {
  position: absolute;
  background-color: var(--ol-subtle-background-color);
  border-radius: 4px;
}

.ol-zoom {
  top: .5em;
  left: .5em;
}

.ol-rotate {
  top: .5em;
  right: .5em;
  transition: opacity .25s linear, visibility 0s linear;
}

.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}

.ol-zoom-extent {
  top: 4.643em;
  left: .5em;
}

.ol-full-screen {
  right: .5em;
  top: .5em;
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
}

.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}

.ol-zoom-extent button {
  line-height: 1.4em;
}

.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}

.ol-touch .ol-control button {
  font-size: 1.5em;
}

.ol-touch .ol-zoom-extent {
  top: 5.5em;
}

.ol-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: var(--ol-foreground-color);
}

.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}

.ol-attribution {
  text-align: right;
  bottom: .5em;
  right: .5em;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}

.ol-attribution a {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}

.ol-attribution ul {
  margin: 0;
  padding: 1px .5em;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}

.ol-attribution li {
  display: inline;
  list-style: none;
}

.ol-attribution li:not(:last-child):after {
  content: " ";
}

.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}

.ol-attribution button {
  flex-shrink: 0;
}

.ol-attribution.ol-collapsed ul {
  display: none;
}

.ol-attribution:not(.ol-collapsed) {
  background: var(--ol-partial-background-color);
}

.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}

.ol-attribution.ol-uncollapsible img {
  margin-top: -.2em;
  max-height: 1.6em;
}

.ol-attribution.ol-uncollapsible button {
  display: none;
}

.ol-zoomslider {
  top: 4.5em;
  left: .5em;
  height: 200px;
}

.ol-zoomslider button {
  position: relative;
  height: 10px;
}

.ol-touch .ol-zoomslider {
  top: 5.5em;
}

.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}

.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}

.ol-overviewmap .ol-overviewmap-map,
.ol-overviewmap button {
  display: block;
}

.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 150px;
  width: 150px;
}

.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
}

.ol-overviewmap.ol-collapsed .ol-overviewmap-map,
.ol-overviewmap.ol-uncollapsible button {
  display: none;
}

.ol-overviewmap:not(.ol-collapsed) {
  background: var(--ol-subtle-background-color);
}

.ol-overviewmap-box {
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}

.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}

.ol-overviewmap .ol-viewport:hover {
  cursor: pointer;
}#footer {
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 100%;
    height: 2.6875rem;
    display: flex;
    z-index: 100;
    background: linear-gradient(0deg, rgba(26, 26, 26, 0.4) 0%,
            rgba(26, 26, 26, 0.15) 60%,
            rgba(26, 26, 26, 0.01) 100%);
    transition: 2s linear;
    pointer-events: none;
}

.footer-left-side,
.footer-right-side {
    height: auto;
    max-height: 100%;
    width: fit-content;
    position: absolute;
    pointer-events: none;
}

.footer-left-side {
    left: 3px;
    display: grid;
    grid-template-columns: 6.75rem 6.5rem auto; /* skala trafia do drugiej kolumny, max 100px ma miec */
    justify-items: center;
    align-items: center;
    column-gap: 1rem;
    bottom: 3px;
    transition: left 0.5s ease;
}

.footer-logo-container:empty {
    display: none;
}

.footer-left-side:has(.footer-logo-container:empty) {
    grid-template-columns: 6.5rem auto;
}

@media (max-width: 639px) {
    .footer-left-side {
        grid-template-columns: 0 6.75rem auto;
    }
}

.footer-left-side.expanded-footer {
    left: calc(var(--minimaps-container-width) + 3px);
}

a#logo-client {
    display: block;
}

#logo-client img {
    max-height: 2rem;
    max-width: 10.625rem;
    /* display: block; */
}

#logo-aero img {
    height: 2rem;
}

.footer-right-side {
    right: 3px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    bottom: 0;
}

a#logo-aero {
    display: none;
    width: auto;
    height: fit-content;
    margin-bottom: 1px;
}

#footer img {
    display: block;
}


svg#logo-obliview {
    height: 32px;
    width: fit-content;
    max-width: 30vw;
    grid-column: 1 / 2;
    cursor: pointer;
}

a#logo-client,
a#logo-aero,
svg#logo-obliview {
    pointer-events: auto;
}

/* comparision maps */
.compare {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
}

.slider {
    left: 50%;
    height: 100%;
    width: 2px;
    position: absolute;
    z-index: 100;
    pointer-events: none;
    /* Usuwamy background-color i clip-path ze slidera głównego */
}

/* Tworzymy górną połówkę linii */
.slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(50% - 23px); /* Dokładnie do uchwytu */
    background-color: white;
}

/* Tworzymy dolną połówkę linii */
.slider::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(50% - 23px); /* Dokładnie od uchwytu do dołu */
    background-color: white;
}

.sliderH {
    position: absolute;
    top: calc(50% - 23px);
    left: calc(50% - 23px);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgb(229 229 229 / 40%);
    border: 2px solid white;
    cursor: grab;
}

:root.high-contrast .slider::before,
:root.high-contrast .slider::after {
    background-color: var(--mainFontColorWhite);
}

:root.high-contrast .sliderH {
    border-color: var(--mainFontColorWhite);
}

@media (max-width: 639px) {
    .sliderH {
        transform: rotate(90deg);
    }
}

.slider.slider-horizontal {
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}

.slider.slider-horizontal::before,
.slider.slider-horizontal::after {
    display: block;
    top: 0;
    bottom: auto;
    height: 100%;
    width: calc(50% - 23px);
}

.slider.slider-horizontal::before {
    left: 0;
    right: auto;
}

.slider.slider-horizontal::after {
    right: 0;
    left: auto;
}

#slider-handle-inner {
    position: absolute;
    width: 5px;
    height: 5px;
    top: calc(50% - 2.5px);
    left: calc(50% - 2.5px);
    border-radius: 50%;
    background-color: var(--mainFontColorWhite);
}

#slider-handle-arrow-left,
#slider-handle-arrow-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#slider-handle-arrow-left {
    left: 5px;
}

#slider-handle-arrow-right {
    right: 5px;
}

#slider-handle-arrow-left svg,
#slider-handle-arrow-right svg {
    width: 100%;
    height: 100%;
    display: block;
}

.year-switcher-1,
.year-switcher-2 {
    position: absolute;
    height: 1.875rem;
    width: 7.5rem;
    background: var(--darkBCG);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    justify-content: center;
    user-select: none;
    z-index: 100;
    bottom: -1px;
    transform: translateX(50%);
    color: var(--mainFontColorWhite);
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    box-shadow: var(--box-shadow-settings);
    cursor: pointer;
}

.year-switcher-1:focus-visible,
.year-switcher-2:focus-visible {
    outline: 2px solid var(--mainColor);
    outline-offset: -2px;
}

.year-switcher-1-dropdown,
.year-switcher-2-dropdown {
    position: absolute;
    min-height: 2.5rem;
    max-height: 11.875rem;
    height: fit-content;
    width: 10rem;
    background: var(--darkBCG);
    display: none;
    z-index: 100;
    bottom: -1px;
    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
    overflow: hidden;
}

.year-switcher-dropdown-list {
    max-height: 10rem;
    overflow-x: hidden;
    overflow-y: hidden;
}

.year-switcher-dropdown.year-switcher-dropdown-expanded .year-switcher-dropdown-list {
    overflow-y: auto;
}

.year-switcher-dropdown::after {
    content: "";
    width: 100%;
    height: 0.625rem;
    position: absolute;
    left: 0;
    bottom: 1.875rem;
    pointer-events: none;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--darkBCG), transparent 50%) 40%,
        var(--darkBCG) 95%
    );
}

.year-switcher-dropdown::before {
    content: "";
    width: 100%;
    height: 0.625rem;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    background-image: linear-gradient(
        0deg,
        transparent 0%,
        color-mix(in srgb, var(--darkBCG), transparent 50%) 40%,
        var(--darkBCG) 95%
    );
}

.year-switcher-1-dropdown button.year-switcher-btn,
.year-switcher-2-dropdown button.year-switcher-btn {
    height: 1.875rem;
    font-size: 0.875rem;
    color: var(--mainFontColorWhite);
    border: none;
    background: var(--darkBCG);
    cursor: pointer;
    width: 100%;
    padding-inline: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.year-switcher-1-dropdown button.year-switcher-btn:hover,
.year-switcher-2-dropdown button.year-switcher-btn:hover {
    background-color: var(--darkBCKsecond);
}

.year-switcher-1-dropdown button.year-switcher-btn:focus-visible,
.year-switcher-2-dropdown button.year-switcher-btn:focus-visible,
.year-switcher-1-dropdown button.year-switcher-btn:focus,
.year-switcher-2-dropdown button.year-switcher-btn:focus {
    outline: 2px solid var(--mainColor);
    outline-offset: -2px;
    background-color: var(--darkBCKsecond);
}

.year-switcher-1-dropdown button.year-switcher-btn.active,
.year-switcher-2-dropdown button.year-switcher-btn.active {
    color: var(--mainColor);
    font-weight: 700;
}

.year-switcher-1-init {
    z-index: 101;
}

.year-switcher-1-dropdown-init {
    padding-bottom: 1.875rem;
    transform: translateX(50%);
}

.year-switcher-1,
.year-switcher-1-dropdown {
    right: 50%;
}

.year-switcher-2,
.year-switcher-2-dropdown {
    left: 50%;
}

.year-switcher-1 span,
.year-switcher-2 span {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding-inline: 0.5rem;
}

.year-switcher-expanded {
    background-color: var(--darkBCKsecond);
}

.stereo-1 {
    right: calc(50% - calc(var(--menu-size) / 2));
    top: 90%;
    transform: none;
    border-top-right-radius: unset;
    z-index: 101;
}

.stereo-2 {
    left: calc(50% + calc(var(--menu-size) / 2));
    top: 90%;
    transform: none;
    border-top-left-radius: unset;
    z-index: 101;
}

.stereo-1-dropdown {
    right: calc(50% - calc(var(--menu-size) / 2));
    top: calc(90% - 0.625rem);
    transform: translateY(calc(-100% + 2.5rem));
    border-top-right-radius: unset;
    width: 7.5rem;
    padding-bottom: 1.875rem;
}

.stereo-2-dropdown {
    left: calc(50% + calc(var(--menu-size) / 2));
    top: calc(90% - 0.625rem);
    transform: translateY(calc(-100% + 2.5rem));
    border-top-left-radius: unset;
    width: 7.5rem;
    padding-bottom: 1.875rem;
}

.stereo-1-space {
    right: calc(50% - calc(var(--menu-size) / 2) + 1px);
}

.stereo-2-space {
    left: calc(50% + calc(var(--menu-size) / 2) + 1px);
}

.comparision-2 {
    left: calc(50% + calc(var(--menu-size) / 2) + 2px);
}

.comparision-2-dropdown {
    left: calc(50% + calc(var(--menu-size) / 2) + 2px);
}


@media (min-width: 768px) {
    a#logo-aero {
        display: block;
    }
}

#coords {
    display: grid;
    color: #F7F7F7;
    font-size: .875rem;
    pointer-events: auto;
}
:root.high-contrast #coords {
    color: var(--mainFontColorWhite);
}

#coords .coord {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

#coords .coord-values {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

#coords .coord svg {
    flex-shrink: 0;
    fill: #F7F7F7;
    color: #F7F7F7;
}
:root.high-contrast #coords .coord svg {
    fill: var(--mainFontColorWhite);
    color: var(--mainFontColorWhite);
}

#coords .coord svg path {
    fill: #F7F7F7;
}
:root.high-contrast #coords .coord svg path {
    fill: var(--mainFontColorWhite);
}

.footer-left-side {
    color: #F7F7F7;
}
:root.high-contrast .footer-left-side {
    color: var(--mainFontColorWhite);
}

#coords span {
    font-variant-numeric: tabular-nums;
}

#coords.height-hidden .height {
    visibility: hidden;
}

@media (max-width: 639px) {
    #coords {
        display: none;
    }
}

@media (max-width: 767px) {
    #coords {
        grid-template-columns: auto minmax(3.75rem, auto);
        column-gap: .7rem;
        align-items: center;
        font-size: .85rem;
    }

    #coords.height-hidden {
        grid-template-columns: auto 0;
    }

    #coords .coord-values {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        white-space: nowrap;
        max-width: calc(45vw - 1.25rem);
        gap: 0;
    }
}

@media (min-width: 768px) {
    #coords {
        margin-right: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 959px) {
    #coords {
        grid-template-columns: auto minmax(4rem, auto);
        column-gap: 0.5rem;
        align-items: center;
    }

    #coords.height-hidden {
        grid-template-columns: auto 0;
    }

    #coords .coord-values {
        flex-direction: column;
        line-height: 1.1;
        white-space: nowrap;
        gap: 0;
    }
}

@media (min-width: 960px) {
    #coords {
        grid-template-columns: auto minmax(4rem, auto);
        column-gap: 0.5rem;
        align-items: center;
    }

    #coords.height-hidden {
        grid-template-columns: auto 0;
    }
}

#toggle-opacity-changer {
    width: 1.25rem; 
    height: 1.25rem; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: .125rem;
    background: transparent;
    transition: opacity 150ms;
    border: none;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
}

#toggle-opacity-changer:hover svg {
    fill: var(--mainColor);
}

#toggle-opacity-changer svg {
    fill: var(--mainFontColorWhite);
    transform: rotate(90deg);
    margin-bottom: .15rem;
}

#toggle-opacity-changer.active svg {
    fill: var(--mainColor);
}

#toggle-opacity-changer:focus-visible {
    outline: 2px solid var(--mainColor);
    outline-offset: 1px;
    border-radius: 0.1875rem;
}

#toggle-opacity-changer:focus-visible svg {
    fill: var(--mainColor);
}

:root.high-contrast #toggle-opacity-changer:focus-visible {
    outline: 2px solid #EFEF0F;
}
#opacity-changer {
    position: absolute;
    display: none;
    height: 3.5rem;
    width: 12.5rem;
    background-color: var(--darkBCKsecond);
    border-radius: .3125rem;
    padding: .25rem;
    align-items: center;
    flex-direction: column;
    row-gap: .3125rem;
    z-index: 6;
}

#opacity-changer .range-slider {
    width: 10.5rem;
    margin: auto;
}

#opacity-changer.visible {
    display: flex;
}

@media (max-width: 639px) {
    #opacity-changer {
        top: 3.3rem !important;
        width: 54% !important;
        height: 3.5rem;
        z-index: 10001;
    }
}

.opacity-changer-text {
    color: var(--mainFontColorWhite);
    font-weight: 500;
    font-size: .75rem;
    font-style: italic;
}
.mobile #logo-client {
    display: none;
}

.mobile .footer-right-side {
    right: 0;
}

@supports (-moz-appearance: none) {

    .year-switcher-dropdown-list {
        scrollbar-width: thin;
    }
}@font-face {
    font-family: 'Reddit Sans';
    src: url('./RedditSans-VariableFont_wght-BlIaKjvN.ttf') format('truetype');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reddit Sans';
    src: url('./RedditSans-Italic-VariableFont_wght-C6jZF8Wy.ttf') format('truetype');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/* Reddit Mono Thin */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-ExtraLight-DXeBZNjf.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono Light */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-Light-CYzlBbHN.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono Regular */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-Regular-BunZRpjm.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono Medium */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-Medium-DCQf4Eo5.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono SemiBold */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-SemiBold-a1nrDLzm.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono Bold */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-Bold-BeoC2uLA.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono ExtraBold */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-ExtraBold-C4iz4yvT.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Reddit Mono Black */
@font-face {
    font-family: 'Reddit Mono';
    src: url('./RedditMono-Black-B8_rG8lh.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.debug * {
  outline: 1px solid red;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.no-display{
  display:none;
}

:focus-visible {
  outline: 2px solid var(--mainColor);
  outline-offset: -2px;
}

:root.high-contrast :focus-visible {
  outline: 2px solid #EFEF0F;
  outline-offset: -2px;
}

:root.font-medium {
  font-size: 110% !important;
}

:root.font-large {
  font-size: 120% !important;
}

*,
::after,
::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Reddit Sans", sans-serif;
}

body,
main#main {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw;
  height: 100vh;
  color: var(--mainFontColorWhite);
}

body {
  overflow: hidden;
  background-color: var(--darkBCG);
}

#title-row {
  width: fit-content;
  display: block;
  margin: auto;
}

main#main {
  display: flex;
}

#viewer-container {
  height: 100vh;
}

#obliview-context-menu {
  display: flex;
  flex-direction: row;
  -ms-flex-direction: row;
  position: absolute;
  z-index: 10000;
  width: 150px;
  max-width: 300px;
  max-height: 300px;
  top: 0;
  right: 0;
  background-color: var(--darkBCG);
  overflow-y: auto;
  overflow-x: hidden;
  font-weight: 300;
  border-radius: 5px;
  display: none;
  word-break: break-all;
}

.window {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 250px;
  width: 450px;
  min-height: 200px;
  height: 350px;
  max-height: 500px;
  color: #000;
  text-align: center;
  border: 3px solid #000;
  border-radius: 5px;
  background-color: #c8c8c8;
  resize: both;
  overflow: auto;
  z-index: 9;
}

.window-header {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #c8c8c8;
}

.window * {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    filter: drop-shadow(0px 0px 5px blue);
  }

  50% {
    transform: rotate(180deg);
    filter: drop-shadow(0px 0px 12px rgb(43, 56, 59)) brightness(1.05);
  }

  100% {
    transform: rotate(360deg);
    filter: drop-shadow(0px 0px 5px blue);
  }
}

@-webkit-keyframes colorFade {
  0% {
    border-color: red;
  }

  100% {
    border-color: #ccc;
  }
}

@keyframes colorFade {
  0% {
    border-color: red;
  }

  100% {
    border-color: #ccc;
  }
}

#viewer-container {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: calc(100% - var(--menu-size));
  border-radius: 0px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
}

#container1.container1-stereo {
  border-right: 1px solid #fff;
}

#container2.container2-stereo {
  border-left: 1px solid #fff;
}

body.mobile #viewer-container {
  width: 100%;
}

body.mobile #viewer-container.split-vertical {
  flex-direction: column;
}

body.mobile #container1.container1-stereo,
body.mobile #container2.container2-stereo {
  width: 100% !important;
  height: 50% !important;
}

body.mobile #container1.container1-stereo {
  border-right: none;
  border-bottom: 1px solid #fff;
}

body.mobile #container2.container2-stereo {
  border-left: none;
  border-top: 1px solid #fff;
}

:root.high-contrast #container1.container1-stereo,
:root.high-contrast #container2.container2-stereo,
:root.high-contrast body.mobile #container1.container1-stereo,
:root.high-contrast body.mobile #container2.container2-stereo {
  border-color: var(--mainFontColorWhite);
}

#container1 {
  background-color: #ffffff;
  height: 100%;
  position: relative;
}

#container1:focus {
  outline: none;
}

#container1:focus-visible {
  outline: 2px solid var(--accent, #0b69ff);
  outline-offset: -2px;
}

#container2 {
  height: 100%;
  position: relative;
}

.map-center-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
  display: none;
  width: 32px;
  height: 32px;
  color: #ffffff;
  filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 1.5px #000000);
  user-select: none;
  -webkit-user-select: none;
}

.map-center-crosshair svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-center-crosshair.visible {
  display: block;
}

html.hide-mouse-cursor,
html.hide-mouse-cursor *,
body.hide-mouse-cursor,
body.hide-mouse-cursor *,
#viewer-container.hide-mouse-cursor,
#viewer-container.hide-mouse-cursor *,
#viewer-container.measuring-crosshair.hide-mouse-cursor,
#viewer-container.measuring-crosshair.hide-mouse-cursor *,
#container1.hide-mouse-cursor,
#container1.hide-mouse-cursor *,
#container2.hide-mouse-cursor,
#container2.hide-mouse-cursor * {
  cursor: none !important;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 2px 0 0 2px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-color);
  border-radius: 2px 0 0 2px;
}

@supports (-moz-appearance: none) {
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  }
}

.spinner-icon {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}div.notification-tray {
    position: absolute;
    width: min(25rem, calc(100% - 2rem));
    z-index: 1000;
    user-select: none;
    inset: 0;
    margin: auto;
    display: flex;
    height: max-content;
    flex-direction: column;
    gap: 1rem;
}

div.notification-tray > div {
    display: contents;
}

div.notification-tray__dim-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

div.notification-tray__item {
    display: flex;
    align-items: center;
    min-height: 5rem;
    background-color: color-mix(in srgb, var(--darkBCKsecond) 92%, transparent);
    padding-block: .75rem;
    padding-left: 1.5625rem;
    column-gap: 1.5625rem;
    border-radius: .625rem;
    box-shadow: var(--box-shadow-settings);
    backdrop-filter: blur(24px);
    position: relative;
}

div.notification-tray__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
}

div.notification-tray__title {
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: .6875rem;
    padding-right: 1.5625rem;
}

div.notification-tray__title.info {
    color: var(--mainColor);
}

div.notification-tray__title.warning {
    color: var(--orange);
}

div.notification-tray__title.error {
    color: var(--Error);
}

div.notification-tray__vertical-separator {
    width: calc(100% - 1.5625rem);
    background-color: var(--White2);
    height: 1px;
    margin-bottom: .625rem;
}

:root.high-contrast div.notification-tray__vertical-separator {
    background-color: var(--mainFontColorWhite);
}

:root.high-contrast div.notification-tray__title.info,
:root.high-contrast div.notification-tray__title.warning,
:root.high-contrast div.notification-tray__title.error {
    color: var(--mainFontColorWhite) !important;
}
:root.high-contrast div.notification-tray__item {
    --orange: var(--mainFontColorWhite);
    --Error: var(--mainFontColorWhite);
    --mainColor: var(--mainFontColorWhite);
}

:root.high-contrast button.notification-tray__confirm-btn {
    border-color: var(--mainFontColorWhite) !important;
    color: var(--mainFontColorWhite) !important;
}

:root.high-contrast button.notification-tray__confirm-btn:hover {
    background-color: var(--mainFontColorWhite) !important;
    color: var(--darkBCKsecond) !important;
}

:root.high-contrast button.notification-tray__close-notification {
    color: var(--mainFontColorWhite) !important;
}

div.notification-tray__content {
    color: var(--mainFontColorWhite);
    font-size: .875rem;
    font-weight: 600;
    padding-right: .375rem;
}

div.notification-tray__remember-choice {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    cursor: pointer;
}

div.notification-tray__remember-choice .custom-checkbox-wrapper {
    flex-shrink: 0;
}

div.notification-tray__remember-choice label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mainFontColorWhite);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

:root.high-contrast div.notification-tray__remember-choice label {
    color: var(--mainFontColorWhite) !important;
}

div.notification-tray__confirm-actions {
    margin-top: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-left: auto;
    flex-shrink: 0;
}

button.notification-tray__confirm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 2px solid var(--secondFontColor);
    border-radius: .4rem;
    background: none;
    color: var(--mainFontColorWhite);
    padding: .2rem 2rem;
    cursor: pointer;
    transition: border-color 150ms;
}

button.notification-tray__confirm-btn:hover {
    border-color: var(--mainColor);
    color: var(--mainColor);
}

div.notification-tray__item > svg {
    flex-shrink: 0;
}

button.notification-tray__close-notification {
    position: absolute;
    width: 2rem;
    height: 2rem;
    top: 0;
    right: 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: var(--mainFontColorWhite);
    fill: var(--mainFontColorWhite);
    display: flex;
    align-items: center;
    justify-content: center;
}

button.notification-tray__close-notification:hover,
button.notification-tray__close-notification:focus-visible {
    color: var(--mainColor);
}:root {
    --darkBCG: #1A1A1A;
    --darkBCKsecond: #303030;
    --darkListSecond: #2A2A2A;
    --DarkLine: #808080;
    --mainColor: #219FE6;
    --mainFontColorWhite: #F7F7F7;
    --secondFontColor: #c1c1c1;
    --White2: #D7D7D7;
    --darkSecondFontColor: #B4B4B4;
    --gridLineColor: #fff;
    --underscoreColor: #595959;
    --profileHoverLabelBackground: #1F77B4;
    
    --scaleFontColor: #F7F7F7;
    --scaleOutlineColor: #1A1A1A;

    --Error: #FF5C5C;
    --orange: #E69421;
    --disabledColor: #979797;  

    --padding-horizontal: .5rem;
    --padding-vertical: .6rem;
    --font-size: 0.75rem;
    --label-range-gap: .5rem;
    --analysis-row-height: 2.25rem;
    --mobileMenuStereoHeight: 20vh;

    --separatorLine: 1px solid var(--DarkLine);
    --menu-size: 3.25rem;
    --minimaps-container-width: 15vw;

    --scrollbar-thumb-color: var(--mainFontColorWhite);
    --scrollbar-track-color: var(--darkSecondFontColor);

    --box-shadow-settings: 2px 2px 2px 1px rgba(26, 26, 26, 0.25);
    --submenu-footer-shadow-gradient: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.1) 30%, rgba(26, 26, 26, 0.2) 70%);
    --bRadiusDefault: .3125rem;
    --rowHeight: 2.125rem;
    --switch-checked-border: var(--White2);
    --switch-checked-thumb: var(--mainFontColorWhite);
}

:root.theme-white {
    --darkBCG: #F0F0F0;
    --darkBCKsecond: #dfdfdf;
    --darkListSecond: #F0F0F0;
    --scrollbar-track-color: #9F9F9F;
    --mainFontColorWhite:  #1c1c1c;
    --darkSecondFontColor: #515151;
    --White2:  #656565;
    --mainColor: #0061C3;
    --gridLineColor: #141414;
    --underscoreColor: #767676;
    --Error: #C81E1E;
    --box-shadow-settings: 2px 2px 2px 1px rgba(26, 26, 26, 0.1);
    --submenu-footer-shadow-gradient: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 0.05) 30%, rgba(26, 26, 26, 0.1) 70%);
    --switch-checked-border: #1c1c1c;
    --switch-checked-thumb: #dfdfdf;
}

:root.high-contrast {
    --darkBCG: #000000;
    --darkBCKsecond: #000000;
    --darkListSecond: #000000;
    --DarkLine: #EFEF0F;
    --mainColor: #00EBEB;
    --mainFontColorWhite: #EFEF0F;
    --secondFontColor: #EFEF0F;
    --darkSecondFontColor: #EFEF0F;
    --White2: #EFEF0F;
    --underscoreColor: #EFEF0F;
    --scrollbar-thumb-color: #EFEF0F;
    --scrollbar-track-color: #000000;
    --Error: #FF5555;
}.obliview-window {
    position: absolute;
    z-index: 10000;
    height: fit-content;
    border-radius: 0.3125rem;
    background-color: var(--darkBCG);
}

.obliview-window > .caption {
    display: flex;
    align-items: center;
    position: relative;

    box-sizing: border-box;
    width: 100%;
    height: 2.125rem;

    font-weight: 500;
    font-size: 1rem;
    z-index: 2;
    background-color: var(--darkBCK);
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    border-top-left-radius: 0.3125rem;
    border-top-right-radius: 0.3125rem;
}

.obliview-window > .caption:focus-visible {
    outline: 2px solid var(--mainColor);
    outline-offset: -2px;
}

:root.high-contrast .obliview-window > .caption:focus-visible {
    outline: 2px solid #EFEF0F;
    outline-offset: -2px;
}

.obliview-window > .caption::before {
    content: "";
    flex: 0 0 1.75rem;
}

.obliview-window > .caption > span {
    flex: 1 1 0;
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    text-align: center;
}

.obliview-window > .caption > .close-button {
    position: static;
    transform: none;

    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 24px;
    min-height: 24px;

    margin-right: 0.5rem;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    background: none;
    color: var(--mainFontColorWhite);
    cursor: pointer;
}

.obliview-window > .caption > .close-button:hover,
.obliview-window > .caption > .close-button:focus-visible {
    color: var(--mainColor);
}

.obliview-window > .caption > .caption-icon {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    fill: var(--mainFontColorWhite);
}

.obliview-window > .caption > .close-button svg {
    flex-shrink: 0;
}

.obliview-window > .main {
    z-index: 1;
    color: var(--mainFontColorWhite);
    display: none;
    overflow: auto;
    word-break: break-word;
    /*min-height: 30vh;*/
    /*min-width: 30vw;*/
    max-width: 75vw;
    max-height: 80vh;
    font-size: 1rem;
    font-weight: 500;
    border-bottom-left-radius: 0.3125rem;
    border-bottom-right-radius: 0.3125rem;
    backdrop-filter: blur(0.4688rem);
    background-color: var(--darkBCKsecond);
    line-height: 1.4;
    scrollbar-width: thin;
    padding-top: 0.625rem;
}

.obliview-window > .caption.title-left {
    font-size: 0.875rem;
    font-weight: 700;
}

.obliview-window > .caption.title-left > span {
    text-align: left;
    font-size: 0.875rem;
    font-weight: 700;
}

.obliview-window > .caption > .window-caption-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.625rem;
    flex-shrink: 0;
}

.custom-close-button {
    font-size: 1.625rem;
    border: none;
    background: none;
    color: var(--mainFontColorWhite);
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-close-button:hover {
    color: var(--mainColor);
}

.custom-close-button:focus-visible {
    color: var(--mainColor);
    outline: 2px solid var(--mainColor);
    outline-offset: 1px;
    border-radius: .1875rem;
}

.custom-close-button:focus:not(:focus-visible) {
    outline: none;
}

:root.high-contrast .custom-close-button:focus-visible {
    color: #EFEF0F;
    outline: 2px solid #EFEF0F;
    outline-offset: 1px;
}


.button-allign {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.dialog-button {
    border-radius: 0.1562rem;
    background-color: var(--mainColor);
    border: none;
    cursor: pointer;
    height: 1.875rem;
    width: 5.3125rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    font-weight: 900;
    margin: 0 0.75rem 0.75rem 0.75rem;
}

.obliview-window input[type="text"],
.obliview-window input[type="number"] {
    color: var(--mainFontColorWhite);
    padding: 0 .25rem;
    padding-left: 0.125rem;
    height: 1.25rem;
}

.obliview-window input[type="text"]::placeholder,
.obliview-window input[type="number"]::placeholder {
    color: var(--mainFontColorWhite);
}

.usr-input-container {
    margin: 0 0.75rem 1.25rem 0.75rem;
}

.usr-input-row {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
}

.usr-input {
    width: 55%;
    height: 1.6rem !important;
    background-color: transparent;
    border: var(--White2) 1px solid;
    border-radius: 5px;
}

.usr-input-select {
    border-radius: 0.1562rem;
    width: 60% !important;
    height: 1.875rem;
    color: var(--mainFontColorBlack) !important;
}

.usr-input-select::after {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 0.3125rem;
    right: 0.625rem;
    transition: transform 0.3s linear;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

/* Side Window */
.side-window {
    position: absolute;
    z-index: 10000;
    height: fit-content;
    border-radius: 0.3125rem;
    display: flex;
    right: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-window > .s-w-title-bar {
    width: 2.4375rem;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-size: 1rem;
    font-weight: 500;
    border-top-left-radius: 0.3125rem;
    border-bottom-left-radius: 0.3125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0.9375rem 0.3125rem 0.9375rem 0.3125rem;
}

.s-w-title-bar > .s-w-title {
    transform: rotate(-90deg);
}

.s-w-title-bar > button {
    cursor: pointer;
    background: none;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.side-window > .s-w-content {
    color: var(--mainFontColorWhite);
    overflow: auto;
    word-break: break-word;
    font-size: 1rem;
    backdrop-filter: blur(0.4688rem);
    line-height: 1.4;
    flex-grow: 1;
    scrollbar-width: thin;
    padding: 0.625rem;
}

.s-w-title-bar > .s-w-close svg {
    width: 0.875rem;
    height: 0.875rem;
}

.s-w-title-bar > .s-w-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(90deg);
}

.s-w-title-bar > .s-w-toggle svg.window-open {
    transform: rotate(-90deg);
}

@keyframes dialog-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes dialog-fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes backdrop-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.obliview-dialog-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(26, 26, 26, 0.3);
    z-index: 10500;
    animation: backdrop-fade-in 0.2s ease-out forwards;
}

.obliview-dialog-backdrop.closing {
    animation: backdrop-fade-out 0.3s ease-out forwards;
}

dialog.obliview-dialog::backdrop {
    background-color: rgba(26, 26, 26, 0.3);
    animation: backdrop-fade-in 0.2s ease-out forwards;
}

dialog.obliview-dialog.closing::backdrop {
    animation: backdrop-fade-out 0.3s ease-out forwards;
}

.obliview-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    border: none;
    padding: 0;
    color: inherit;
    z-index: 10501;
    background-color: var(--darkBCG);
    border-radius: var(--bRadiusDefault);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    max-width: 90vw;
    animation: dialog-fade-in 0.2s ease-out forwards;
}

.obliview-dialog.closing {
    animation: dialog-fade-out 0.3s ease-out forwards;
}

.obliview-dialog > .caption {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-weight: 500;
    background-color: var(--darkBCK);
    user-select: none;
    font-size: 0.875rem;
    border-top-left-radius: var(--bRadiusDefault);
    border-top-right-radius: var(--bRadiusDefault);
    padding: 0.407rem 0;
    max-height: 2.125rem;
}

.obliview-dialog > .caption.title-left {
    font-size: 0.875rem;
    font-weight: 700;
}

.obliview-dialog > .caption.title-left span {
    margin-left: 0.625rem;
    margin-right: auto;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
    font-weight: 700;
}

.obliview-dialog > .caption > .close-button {
    cursor: pointer;
    margin-inline: 0.5rem;
}

.obliview-dialog > .obliview-dialog-main {
    color: var(--mainFontColorWhite);
    overflow: auto;
    max-height: 85vh;
    font-size: 1rem;
    font-weight: 500;
    border-bottom-left-radius: var(--bRadiusDefault);
    border-bottom-right-radius: var(--bRadiusDefault);
    backdrop-filter: blur(0.4688rem);
    background-color: var(--darkBCKsecond);
    line-height: 1.4;
    scrollbar-width: thin;
}

@media (max-width: 639px) {
    .obliview-window {
        position: fixed !important;
        bottom: 4.75rem !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin: 0 !important;
        z-index: 10000 !important;
        transform: none !important;
    }

    .obliview-window > .main {
        width: 100% !important;
        max-width: 100% !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-sizing: border-box !important;
        max-height: calc(100dvh - 8rem) !important;
    }
}