@font-face {
    font-family: GilroySemibold;
    src: url('Gilroy-SemiBold.ttf');
    font-weight: normal;
}

@font-face {
    font-family: GilroyLight;
    src: url('Gilroy-Light.ttf');
    font-weight: normal;
}

body {
    background-color: #000000;
    overflow: hidden;
}

.hidden {
    pointer-events: none;
    opacity: 0;
}



/************************************************************/
/************************** COMPASS *************************/
/************************************************************/

.compass {
    pointer-events: none;
    padding: 40px;
    position: fixed;
    top: 0;
    left: 100%;
    transform: translateX(-100%);

    border-radius: 50%;

    /* background: radial-gradient(closest-side, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); */

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.compass-container {
    width: 64px;
    height: 64px;
}

.compass .background {
    position: absolute;
    width: 64px;
    height: 64px;
}

.compass .foreground {
    position: absolute;
    width: 64px;
    height: 64px;
}

.compass img {
    position: relative;
    top: 0;
    left: 0;
    height: 64px;
}




/************************************************************/
/********************** BACKGROUND IMAGE ********************/
/************************************************************/

.background-image-container {
    pointer-events: none;
    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.sequence-image-container {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.sequence-black-background {
    width: 100%;
    height: 100%;
    background-color: #000000;
}

.background-image {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.mask-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mask-container.wide svg {
    width: 100%;
    height: 100%;
}

.mask-container.tall svg {
    height: 100%;
} 

.mask-container svg {
    pointer-events: all;
}

.mask-container path {
    cursor: pointer;
    fill: #AD9271;
    fill-opacity: 40%;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-opacity: 40%;
}

.mask-container path:hover {
    fill: #AD9271;
    fill-opacity: 70%;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-opacity: 90%;
}



/************************************************************/
/*********************** FADE PANEL *************************/
/************************************************************/

.fade-panel {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 500px;
    /* 224px; */

    bottom: 0;

    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.0) 100%);
}



/************************************************************/
/********************** CONTROL PANEL ***********************/
/************************************************************/

.control-panel {
    position: absolute;
    width: 100%;
    height: 224px;

    bottom: 0;

    transition: opacity 0.1s;
}

.control-panel .buttons-container {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 40px;
    display: flex;
    gap: 32px;

    width: fit-content;
    height: fit-content;
}



/************************************************************/
/********************** CUSTOM BUTTON ***********************/
/************************************************************/

.button-container {
    width: 182px;
    height: 64px;
}

.button-container .button {
    cursor: pointer;
    width: 182px;
    height: 64px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 100px;
    background-color: #AD9271;
    color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    --filters-icon: url('../images/ui/filters-icon.png');
    --location-icon: url('../images/ui/location-icon.png');
    --apartment-icon: url('../images/ui/list-icon.png');

    transition: opacity 0.1s;
}

.button-container .button:hover {
    background-color: #ffffff;
    color: #AD9271;
    --filters-icon: url('../images/ui/filters-icon-selected.png');
    --location-icon: url('../images/ui/location-icon-selected.png');
    --apartment-icon: url('../images/ui/list-icon-selected.png');
}

.button-container .button:active {
    width: 178px;
    height: 63px;
}

.button-container .container {
    width: fit-content;
    height: fit-content;
    display: flex;
    gap: 12px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.button-container .button .icon {
    width: 24px;
    height: 24px;
    background-size: 24px;
}

.button-container .button .icon.filters {
    background-image: var(--filters-icon);
}

.button-container .button .icon.location {
    background-image: var(--location-icon);
}

.button-container .button .icon.apartment-list {
    background-image: var(--apartment-icon);
}

.button-container .button .label {
    font: normal 400 16px/22px GilroySemibold, sans-serif;

    display: flex;
    flex-direction: row;
    align-items: center;
}



/************************************************************/
/***************** CUSTOM CHECKABLE BUTTON ******************/
/************************************************************/

.checkable-button-container {
    width: 64px;
    height: 64px;
}

.checkable-button {
    cursor: pointer;
    width: 60px;
    height: 60px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50px;
    border: 2px solid #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    font: normal 400 16px/22px GilroySemibold, sans-serif;
    color: #ffffff;
    text-align: center;
    line-height: 60px;
}

.checkable-button:active {
    width: 58px;
    height: 58px;
    line-height: 58px;
}

.checkable-button:hover {
    background-color: #AD9271;
    border-color: #AD9271;
    color: #ffffff;
}

.checkable-button.checked {
    background-color: #AD9271;
    border-color: #AD9271;
    color: #ffffff;
}



/************************************************************/
/******************* CUSTOM ROUND BUTTON ********************/
/************************************************************/

.round-button-container {
    width: 64px;
    height: 64px;
}

.round-button {
    cursor: pointer;
    width: 64px;
    height: 64px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50px;

    background-color: #AD9271;

    --close-icon: url('../images/ui/close-icon.png');
    --reset-icon: url('../images/ui/reset-icon.png');
}

.round-button:hover {
    background-color: #ffffff;
    --close-icon: url('../images/ui/close-icon-selected.png');
    --reset-icon: url('../images/ui/reset-icon-selected.png');
}

.round-button:active {
    width: 62px;
    height: 62px;
}

.round-button .icon {
    width: 24px;
    height: 24px;
    background-size: 24px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.round-button .icon.close {
    background-image: var(--close-icon);
}

.round-button .icon.reset {
    background-image: var(--reset-icon);
}



/************************************************************/
/********************** FILTERS PANEL ***********************/
/************************************************************/

.filters-panel {
    position: absolute;
    width: fit-content;
    height: fit-content;
    padding: 40px;
    padding-top: 0px;

    bottom: 0;

    width: calc(100% - 80px);

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 144px 144px;
    grid-template-rows: 19px 64px;
    grid-column-gap: 50px;
    grid-row-gap: 24px;

    transition: opacity 0.1s;
}

.list-button {
    position: fixed;
    left: 40px;
    bottom: 171px;
    transition: opacity 0.1s;
}

.filters-panel .floor-label {
    grid-column: 1;
    grid-row: 1;
}

.filters-panel .area-label {
    grid-column: 2;
    grid-row: 1;
}

.filters-panel .price-label {
    grid-column: 3;
    grid-row: 1;
}

.filters-panel .room-label {
    grid-column: 4 / 6;
    grid-row: 1;
}

.filters-panel .floor-filter {
    grid-column: 1;
    grid-row: 2;
}

.filters-panel .area-filter {
    grid-column: 2;
    grid-row: 2;
}

.filters-panel .price-filter {
    grid-column: 3;
    grid-row: 2;
}

.filters-panel .room-filter {
    grid-column: 4;
    grid-row: 2;
}

.filters-panel .buttons {
    grid-column: 5;
    grid-row: 2;
}

.label-bold {
    font: normal 400 16px/22px GilroySemibold, sans-serif;
    color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.label-thin {
    font: normal 400 16px/22px GilroyLight, sans-serif;
    color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.room-buttons {
    display: flex;
    gap: 16px;
}

.control-buttons {
    display: flex;
    gap: 16px;
}

.add-margin {
    padding-top: 20px;
}

.area-slider {
    height: 50px;
    position: relative;

    top: 20%;
}

.price-slider {
    height: 50px;
    position: relative;

    top: 20%;
}

.floor-slider {
    height: 50px;
    position: relative;

    top: 20%;
}



/************************************************************/
/******************* DOUBLE SIDED SLIDER ********************/
/************************************************************/

:root {
    --slider-thickness: 2px;
    --slider-thumb-offset: -5px;
    --slider-thumb-size: 32px;
}

.range-slider {
    height: var(--slider-thickness);
    position: relative;
    background-color: #ffffff;
    border-radius: var(--slider-thickness);
}

.range-selected {
    height: 100%;
    left: 30%;
    right: 30%;
    position: absolute;
    border-radius: var(--slider-thickness);
    background-color: #AD9271;
}

.range-input {
    position: relative;
}

.range-input input {
    position: absolute;
    width: 100%;
    height: var(--slider-thickness);
    top: var(--slider-thumb-offset);
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.range-input input::-webkit-slider-thumb {
    height: var(--slider-thumb-size);
    width: var(--slider-thumb-size);
    border-radius: 50%;
    border: 3px solid #AD9271;
    background-color: #AD9271;
    pointer-events: auto;
    -webkit-appearance: none;
}

.range-input input::-moz-range-thumb {
    height: var(--slider-thumb-size);
    width: var(--slider-thumb-size);
    border-radius: 50%;
    border: var(--slider-thickness) solid #AD9271;
    background-color: #AD9271;
    pointer-events: auto;
    -moz-appearance: none;
}

.range-price {
    margin: 25px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.range-price label {
    font: normal 400 16px/22px GilroySemibold, sans-serif;
    color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

}

input[type="range"].min::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    background-image: url('../images/ui/slider-left-icon.png');
    background-size: cover;
}

input[type="range"].min::-moz-range-thumb {
    height: 24px;
    width: 24px;
    background-image: url('../images/ui/slider-left-icon.png');
    background-size: cover;
}

input[type="range"].max::-webkit-slider-thumb {
    height: 24px;
    width: 24px;
    background-image: url('../images/ui/slider-right-icon.png');
    background-size: cover;
}

input[type="range"].max::-moz-range-thumb {
    height: 24px;
    width: 24px;
    background-image: url('../images/ui/slider-right-icon.png');
    background-size: cover;
}



/************************************************************/
/****************** APARTMENT TABLE PANEL *******************/
/************************************************************/

.flat-list-table {
    width: 595px;
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;

    display: grid;
    grid-template-rows: 44px 64px 545px;
    grid-column-gap: 0px;

    background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.55) 100%);

    transition: opacity 0.1s;

    overflow: hidden;
}

.top-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.flat-list-table .caption {
    align-self: center;
    padding-left: 20px;
    font: normal 400 16px/22px GilroyLight, sans-serif;
    color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.flat-list-table .header {
    align-self: center;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
}

.flat-list-table .table-scroller {
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.flat-list-table .table-scroller::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.flat-list-table .entry {
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;

    font: normal 400 16px/22px GilroyLight, sans-serif;
    color: #ffffff;

    padding-top: 15px;
    padding-bottom: 15px;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.flat-list-table .entry div {
    padding-left: 20px;
}

.flat-list-table .entry {
    background-color: #ffffff00;
}

.flat-list-table .entry:nth-child(2n) {
    background-color: #0000008f;
}

.flat-list-table .entry:hover {
    background-color: #999999;
}

.flat-list-table .close-button {
    justify-self: end;
    align-self: center;
    cursor: pointer;
    width: 48px;
    height: 48px;
    padding: 8px;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.flat-list-table .close-button img {
    width: 48px;
    height: 48px;
}



/************************************************************/
/********************** SORTER BUTTON ***********************/
/************************************************************/

.header .sorter {
    cursor: pointer;

    font: normal 400 16px/22px GilroyLight, sans-serif;
    color: #ffffff;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.header .sorter .icon {
    width: 24px;
    height: 24px;
    opacity: 0;
    color: #ffffff;
}

.header .sorter .icon img {
    width: 24px;
    height: 24px;
}

.header .sorter .icon.ascending {
    -moz-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    transform: scale(1, -1);
}

.header .sorter.active .icon {
    opacity: 1;
}

.header .sorter .caption {
    text-align: end;
}

.header .sorter:hover {
    background-color: #666666;
    color: #ffffff;
}

.sorter.number {
    display: none;
}



/************************************************************/
/***************** FLAT DESCRIPTION SCREEN ******************/
/************************************************************/

.flat-description-screen {
    position: fixed;
    width: 580px;
    height: 310px;

    top: 40px;
    left: calc(595px + (100vw - 595px) * 0.5);
    transform: translateX(-50%);

    border-radius: 20px;
    border: 2px solid #AD9271;

    background-color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.flat-part-container {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 278px auto;
}

.flat-info {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 238px;
    height: calc(100% - 40px);
    padding: 20px;
}

.flat-info .flat-number {
    grid-column: 1 / 3;
    grid-row: 1;

    padding-bottom: 8px;

    font: normal 400 24px/20px GilroySemibold, sans-serif;
    color: #292F3F;
}

.flat-info .number-of-rooms {
    grid-column: 1 / 3;
    grid-row: 2;

    padding-bottom: 24px;

    font: normal 400 20px/20px GilroySemibold, sans-serif;
    color: #292F3F;
}

.flat-info .flat-area-label {
    grid-column: 1;
    grid-row: 3;
}

.flat-info .label-bold {
    font: normal 400 18px/22px GilroySemibold, sans-serif;
    color: #8B90A6;
}

.flat-info .label-thin {
    font: normal 400 16px/22px GilroyThin, sans-serif;
    color: #8B90A6;
}

.flat-info .apa-area {
    grid-column: 2;
    grid-row: 3;

    justify-self: end;

    font: normal 400 20px/22px GilroySemibold, sans-serif;
    color: #292F3F;
}

.flat-info .flat-floor-label {
    grid-column: 1;
    grid-row: 4;
}

.flat-info .floor-number {
    grid-column: 2;
    grid-row: 4;

    justify-self: end;

    font: normal 400 20px/22px GilroySemibold, sans-serif;
    color: #292F3F;
}

.flat-info .flat-price-label {
    grid-column: 1;
    grid-row: 5;
}

.flat-info .apa-price {
    grid-column: 2;
    grid-row: 5;

    justify-self: end;

    font: normal 400 20px/22px GilroySemibold, sans-serif;
    color: #292F3F;
}

.flat-info .flat-termination-label {
    grid-column: 1;
    grid-row: 6;
}

.flat-info .construction-termination {
    grid-column: 2;
    grid-row: 6;

    justify-self: end;;

    font: normal 400 20px/22px GilroySemibold, sans-serif;
    color: #292F3F;
}

.flat-info .balcony-view-button {
    grid-column: 1 / 3;
    grid-row: 7;

    height: 50px;
    padding-top: 24px;
}

.flat-plan {
    width: 302px;
    height: 310px;
}

.flat-plan-image {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.close-flat-info {
    cursor: pointer;
    position: fixed;
    width: 48px;
    height: 48px;
    top: 0;
    right: 0;
    padding: 7px;
}

.close-flat-info .container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 24px;
    height: 24px;
}

.close-flat-info .container img {
    width: 24px;
    height: 24px;
}

.floor-switcher {
    cursor: pointer;

    position: fixed;
    bottom: 20px;
    width: 70px;
    height: 30px;

    border-radius: 20px;

    text-align: center;
    line-height: 30px;

    font: normal 400 18px/30px GilroyThin, sans-serif;
    color: #AD9271;

    border-radius: 50px;
    border: 2px solid #AD9271;
}

.floor-switcher.selected {
    background-color: #AD9271;
    color: #ffffff;
}

.floor-switcher:hover {
    background-color: #AD9271;
    color: #ffffff;
}

#first-floor {
    position: fixed;
    left: 360px;
}

#second-floor {
    position: fixed;
    right: 50px;
}



/************************************************************/
/********************* 3D TOUR BUTTON ***********************/
/************************************************************/

.tour-3d-button {
    position: absolute;
    right: 20px;
    bottom: 26px;

    width: 238px;
    height: 50px;

    --balcony-view-icon: url('../images/ui/right-arrow-icon.png');
}

.tour-3d-button .show-3d-tour {
    cursor: pointer;
    width: 100%;
    height: 100%;

    border-radius: 50px;
    border: 2px solid #AD9271;
    background-color: #AD9271;
    color: #ffffff;

    font: normal 400 20px/22px GilroySemibold, sans-serif;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.show-3d-tour:hover {
    background-color: #ffffff;
    color: #AD9271;
    --balcony-view-icon: url('../images/ui/right-arrow-icon-selected.png');
}

.show-3d-tour:active {
    width: 95%;
    height: 95%;
}

.show-3d-tour .container {
    width: fit-content;
    height: fit-content;
    display: flex;
    gap: 12px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.show-3d-tour .icon {
    width: 24px;
    height: 24px;
    background-image: var(--balcony-view-icon);
    background-size: cover;
}



/************************************************************/
/******************* BALCONY VIEW BUTTON ********************/
/************************************************************/

.balcony-view-button {
    width: 100%;
    height: 100%;

    --balcony-view-icon: url('../images/ui/right-arrow-icon.png');
}

.balcony-view-button .show-balcony-view {
    cursor: pointer;
    width: 100%;
    height: 100%;

    border-radius: 50px;
    border: 2px solid #AD9271;
    background-color: #AD9271;
    color: #ffffff;

    font: normal 400 20px/22px GilroySemibold, sans-serif;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.show-balcony-view:hover {
    background-color: #ffffff;
    color: #AD9271;
    --balcony-view-icon: url('../images/ui/right-arrow-icon-selected.png');
}

.show-balcony-view:active {
    width: 95%;
    height: 95%;
}

.show-balcony-view .container {
    width: fit-content;
    height: fit-content;
    display: flex;
    gap: 12px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.show-balcony-view .icon {
    width: 24px;
    height: 24px;
    background-image: var(--balcony-view-icon);
    background-size: cover;
}



/************************************************************/
/******************* BALCONY VIEW PANEL *********************/
/************************************************************/

.balcony-view-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    transition: opacity 0.1s;
}

.balcony-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.close-balcony-view {
    position: fixed;
    top: 0;
    right: 0;
    padding: 40px;
}

.close-balcony {
    cursor: pointer;
}



/************************************************************/
/********************* 3D TOUR PANEL ************************/
/************************************************************/

.tour-3d-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    transition: opacity 0.1s;
}

.tour-3d-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.close-3d-tour {
    position: fixed;
    top: 0;
    right: 0;
    padding: 40px;
}

.close-tour {
    cursor: pointer;
}



/************************************************************/
/******************* TRANSPARENT BUTTON *********************/
/************************************************************/

.transparent-button-container {
    width: fit-content;
    height: 40px;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.transparent-button {
    cursor: pointer;

    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column-gap: 16px;

    font: normal 400 22px/22px GilroySemibold, sans-serif;
    color: #ffffff;

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

    white-space: nowrap;

    opacity: 0.7;
}

.transparent-button.right-align {
    grid-template-columns: 1fr min-content;
}

.transparent-button.right-align .icon {
    grid-column: 2;
    grid-row: 1;
}

.transparent-button.right-align .label {
    grid-column: 1;
    grid-row: 1;
}

.transparent-button:hover, .transparent-button.checked {
    opacity: 1.0;
}

.transparent-button:active {
    transform: scale(0.95, 0.95);
}

.transparent-button .icon, .transparent-button .icon img {
    width: 40px;
    height: 40px;
}

.disabled {
    pointer-events: none;
}



/************************************************************/
/****************** INFRASTRUCTURE SCREEN *******************/
/************************************************************/

.infrastructure-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.1s;
}

.infrastructure-controls {
    padding: 40px;
    position: fixed;
    bottom: 0;
    left: 100%;
    transform: translateX(-100%);
}

.distance-filter {
    padding: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
}

.distance-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 16px;
}

.walk-or-drive-buttons {
    position: absolute;
    width: min-content;
    height: min-content;

    left: 40px;
    bottom: 144px;

    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 20px;

    justify-items: start;
}

.transport-or-infrastructure-buttons {
    position: absolute;
    width: min-content;
    height: min-content;

    right: 40px;
    bottom: 144px;

    display: grid;
    grid-template-rows: min-content min-content;
    grid-row-gap: 20px;

    justify-items: end;
}

.pin-point-panel {
    pointer-events: none;
    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;
}

.pin-point-container {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: opacity 0.1s;
}

.distance-ellipse-position {
    position: absolute;
    top: 0;

    width: 0;
    height: 0;
    pointer-events: none;
}

.distance-ellipse-size {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    border: 2px solid #ffffff;

    background: radial-gradient(closest-side, rgba(0,0,0,0) 80%, rgba(255,255,255,0.4) 100%);

    transition: width 0.1s, height 0.1s;
}



/************************************************************/
/************************ PIN POINT *************************/
/************************************************************/

.pin-point:hover {
    cursor: pointer;
    pointer-events: auto;

    position: absolute;

    width: 0px;
    height: 0px;

    top: 200px;
    left: 100px;

    transition: width 0.1s, height 0.1s;
}

.pin-point {
    scale: 0.7;
}

.pin-point-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: scale 0.1s, opacity 0.1s;
}

.pin-point:hover .pin-point-button {
    scale: 1.1;
}

.pin-point:hover .pin-point-foreground {
    width: 30px;
    height: 30px;

    margin: auto;
    display: block;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);

    transition: width 0.1s, height 0.1s;
}

.pin-point:hover .pin-point-background {
    width: 64px;
    height: 64px;

    margin: auto;
    display: block;
    position: absolute;

    transition: width 0.1s, height 0.1s;
}

.pin-point, .pin-point:active {
    cursor: pointer;
    pointer-events: auto;

    position: absolute;


    width: 0px;
    height: 0px;

    top: 200px;
    left: 100px;

    transition: width 0.1s, height 0.1s;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.pin-point .pin-point-foreground, .pin-point:active .pin-point-foreground {
    width: 30px;
    height: 30px;

    margin: auto;
    display: block;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);

    transition: width 0.1s, height 0.1s;
}

.pin-point .pin-point-background, .pin-point:active .pin-point-background {
    width: 64px;
    height: 64px;

    margin: auto;
    display: block;
    position: absolute;

    bottom: 0%;
    left: -50%;
    transform: translateX(-50%);

    transition: width 0.1s, height 0.1s;
}



/************************************************************/
/********************** PIN INFO POINT **********************/
/************************************************************/

.pin-info-panel-container {
    width: 0;
    height: 0;

    position: absolute;
    top: 50%;
    left: 50%;
}

.pin-info-panel {
    position: fixed;
    width: 580px;
    height: 310px;
    padding: 40px;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 20px;
    border: 2px solid #AD9271;

    background-color: #ffffff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    display: grid;
    /* grid-template-rows: min-content auto; */
    grid-auto-rows: min-content;
    grid-row-gap: 24px;

    transition: opacity 0.1s;
}

.pin-caption {
    font: normal 400 30px/22px GilroySemibold, sans-serif;
}

.pin-description {
    font: normal 400 16px/22px GilroySemibold, sans-serif;
}

.pin-distance {
    font: normal 400 16px/22px GilroySemibold, sans-serif;
}

.pin-working-hours {
    font: normal 400 16px/22px GilroySemibold, sans-serif;
}

.close-pin-info {
    cursor: pointer;
    position: fixed;
    width: 48px;
    height: 48px;
    top: 0;
    right: 0;
    padding: 7px;
}

.close-pin-info .container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 24px;
    height: 24px;
}

.close-pin-info .container img {
    width: 24px;
    height: 24px;
}



/************************************************************/
/*********************** PAGE BUTTONS ***********************/
/************************************************************/

.page-buttons {
    pointer-events: none;
    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;
}

.next-image-button {
    pointer-events: all;

    cursor: pointer;
    width: 90px;
    height: 90px;

    position: absolute;
    top: 50%;
    right: calc(0% + 40px);
    transform: translateY(-50%);

    border-radius: 50%;
    /* background: radial-gradient(closest-side, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); */
}

.previous-image-button {
    pointer-events: all;
    cursor: pointer;
    width: 90px;
    height: 90px;

    position: absolute;
    top: 50%;
    left: calc(0% + 40px);
    transform: translateY(-50%);

    border-radius: 50%;
    /* background: radial-gradient(closest-side, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); */
}

.next-image-button img, .previous-image-button img {
    width: 70px;
    height: 70px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/************************************************************/
/********************** LOCATION FILTER *********************/
/************************************************************/

.filter-location-panel {
    position: fixed;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%) scale(1, 1);

    width: fit-content;
    height: 64px;
    padding: 40px;
}

.filter-location-panel .container {
    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
}

.filter-location-button {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 0px;

    justify-items: center;
    align-items: center;
}

.filter-location-button .icon {
    width: 32px;
    height: 32px;
}

.filter-location-button .icon img {
    width: 100%;
    height: 100%;
}

.filter-location-button .text {
    min-width: 70px;
    height: fit-content;
    font: normal 400 16px/22px GilroySemibold, sans-serif;
    color: #ffffff;

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

    text-align: center;
}

.filter-location-button .item-counter {
    width: 32px;
    height: 32px;

    border-radius: 50px;
    border: 2px solid #ffffff;

    font: normal 400 16px/22px GilroySemibold, sans-serif;
    color: #ffffff;

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

.filter-location-button:hover .item-counter, .filter-location-button.selected .item-counter {
    color: #AD9271;
    border-color: #AD9271;
}

.filter-location-button:hover .text, .filter-location-button.selected .text {
    color: #AD9271;
}

.filter-location-button img {
    visibility: collapse;
}

.filter-location-button .icon {
    width: 32px;
    height: 32px;
}

.filter-location-button .icon.park {
    background: url("../images/ui/park-icon.png");
    background-size: cover;
}

.filter-location-button .icon.store {
    background: url("../images/ui/store-icon.png");
    background-size: cover;
}

.filter-location-button .icon.restaurant {
    background: url("../images/ui/restaurant-icon.png");
    background-size: cover;
}

.filter-location-button .icon.university {
    background: url("../images/ui/university-icon.png");
    background-size: cover;
}

.filter-location-button .icon.sport {
    background: url("../images/ui/sport-icon.png");
    background-size: cover;
}

.filter-location-button .icon.museum {
    background: url("../images/ui/museum-icon.png");
    background-size: cover;
}

.filter-location-button .icon.mosque {
    background: url("../images/ui/mosque-icon.png");
    background-size: cover;
}










.filter-location-button:hover .icon.park, .filter-location-button.selected .icon.park {
    background: url("../images/ui/park-icon-selected.png");
    background-size: cover;
}

.filter-location-button:hover .icon.store, .filter-location-button.selected .icon.store {
    background: url("../images/ui/store-icon-selected.png");
    background-size: cover;
}

.filter-location-button:hover .icon.restaurant, .filter-location-button.selected .icon.restaurant {
    background: url("../images/ui/restaurant-icon-selected.png");
    background-size: cover;
}

.filter-location-button:hover .icon.university, .filter-location-button.selected .icon.university {
    background: url("../images/ui/university-icon-selected.png");
    background-size: cover;
}

.filter-location-button:hover .icon.sport, .filter-location-button.selected .icon.sport {
    background: url("../images/ui/sport-icon-selected.png");
    background-size: cover;
}

.filter-location-button:hover .icon.museum, .filter-location-button.selected .icon.museum {
    background: url("../images/ui/museum-icon-selected.png");
    background-size: cover;
}

.filter-location-button:hover .icon.mosque, .filter-location-button.selected .icon.mosque {
    background: url("../images/ui/mosque-icon-selected.png");
    background-size: cover;
}

/************************************************************/
/********************** LOADING SCREEN **********************/
/************************************************************/

.loading-screen {
    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 0;
    left: 0;

    background-color: #1F1C1C;

    transition: opacity 0.1s;
}

.loading-plate {
    width: clamp(200px, calc(200px + (100vw - 720px) * 50 / (1920 - 720)), 250px);
    height: clamp(110px, calc(110px + (100vw - 720px) * 16 / (1920 - 720)), 126px);

    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-plate img {
    display: inline-block;
    top: 0;
    width: 82px;
    height: 82px;
}

.loading-plate .progress-bar {
    position: absolute;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 4px;
    background-color: #ffffff1a;
    border-radius: 100px;
}

.acube-logo {
    max-width: 100%;
    max-height: 100%;
}

.logo-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
}

.logo-grid {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    margin-bottom: 10px;

    width: fit-content;

    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
}

.non-casual-games-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;

    width: clamp(152px, calc(152px + (100vw - 720px) * 24 / (1920 - 720)), 176px);
    height: clamp(26px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 30px);
}

.non-casual-games-logo img {
    width: clamp(152px, calc(152px + (100vw - 720px) * 24 / (1920 - 720)), 176px);
    height: clamp(26px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 30px);
}

.logo-hidden .non-casual-games-logo {
    width: 0px;
    height: 0px;
    visibility: collapse;
}

.logo-noncasual-only {
    display: block;
}

.logo-noncasual-only .non-casual-games-logo {
    width: clamp(152px, calc(152px + (100vw - 720px) * 24 / (1920 - 720)), 176px);
    height: clamp(26px, calc(20px + (100vw - 720px) * 3 / (1920 - 720)), 30px);
}

.logo-shown {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
}

.progress-bar-filler {
    width: 0%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 100px;
}