@use "sass:color";
@use "sass:math";
@use "sass:string";
@import "vars";

:root {
    --icon__default-height: 48px;
    
    --grid__height: 5;
    --grid__width: 5;
    --grid__zoom: 1;
    
    --loader__icon-size: 48px;
    --loader__line-color: #{$cl_geo};
    --loader__ground-line-size: 8px;
    --loader__slime__size: 300px;
    --loader__slime__outline-width: 10px;
    --loader__slime__offset: 10px;
    
    --pannel__width: 400px;
}

body {
    font-family: ptsans_regular, sans-serif;
}

#transform-canvas {
    left: 50%;
    opacity: 0;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -100;
}

#page-background {
    background: url('./../img/background.jpg') no-repeat center;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

#page-container {
    form {
        &.sp_form__uploading {
            filter: blur(4px);
            &:after {
                bottom: 0;
                content: '';
                display: block;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 10;
            }
        }
    }
    
    /* *** CLASS GENERIC *** */
    .sp_flex__filler {
        flex-grow: 1;
    }
    .sp_invert {
        filter: invert(0.5);
    }
    .sp_grayscale {
        filter: grayscale(1);
    }
    .sp_icon__container {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        user-select: none;
        img {
            margin: auto;
            height: var(--icon__default-height);
            width: auto;
        }
    }
    .sp_button {
        background-color: $cl_ui_dark;
        border: 2px solid $cl_white;
        border-radius: 6px;
        display: flex;
        height: 36px;
        overflow: hidden;
        padding: 0;
        width: 140px;
        span {
            color: $cl_white;
            display: block;
            margin: auto;
            padding: 0 6px;
            user-select: none;
        }
        &.sp_button__active {
            background-color: $cl_geo;
        }
        &:hover {
            background-color: $cl_ui_hover;
            &[data-type='cancel'] {
                background-color: $cl_pyro;
            }
            &[data-type='validate'] {
                background-color: $cl_dendro;
            }
        }
    }
    
    /* *** FORM COMPONENTS *** */
    [class*='sp_form-row'] {
        margin-bottom: 6px;
        max-width: 400px;
        overflow: hidden;
    }
    .sp_form-row__file, .sp_form-row__text, .sp_form-row__select {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 36px;
    }
    .sp_form-row__file, .sp_form-row__text, .sp_form-row__select, .sp_form-row__textarea {
        background-color: $cl_white;
        //border: 1px solid $cl_ui_dark;
        border-radius: 6px;
        > label {
            background-color: $cl_ui_dark;
            border: 2px solid $cl_white;
            border-radius: inherit;
            color: $cl_white;
            flex-shrink: 0;
            line-height: 30px;
            min-width: 90px;
            max-width: 70%;
            overflow: hidden;
            padding: 0 6px;
            text-overflow: ellipsis;
            user-select: none;
            white-space: nowrap;
            transition: max-width ease-in 250ms;
        }
        &:hover, &:focus-within {
            label {
                background-color: $cl_ui_hover;
            }
        }
    }
    .sp_form-row__file, .sp_form-row__text, .sp_form-row__select, .sp_form-row__textarea {
        input[type='text'], select, textarea {
            border: 2px solid $cl_white;
            flex-shrink: 1;
            font-size: 16px;
            padding: 0 2px;
            width: 100%;
        }
        input[type='text'], select {
            line-height: 30px;
        }
    }
    .sp_form-row__text, .sp_form-row__select {
        &:focus-within {
            label {
                max-width: 90px;
                transition: max-width ease-out 250ms;
            }
        }
    }
    .sp_form-row__button {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 6px;
        height: 36px;
        .sp_button {
            width: auto;
        }
    }
    .sp_form-row__file {
        input {
            &[type='file'] {
                height: 100%;
                left: 0;
                opacity: 0;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 2;
                &:hover {
                    cursor: pointer;
                }
            }
        }
        .sp_input__file-preview {
            background-color: $cl_ui_dark;
            border: 2px solid $cl_white;
            border-radius: 6px;
            flex-shrink: 0;
            padding: 1px;
            width: 36px;
            img {
                height: 100%;
                width: auto;
            }
        }
    }
    
    //<editor-fold desc="old radio">
    //.sp_form-row__radio {
    //    display: flex;
    //    flex-direction: column;
    //    &.sp_form-row__radio-wrapper {
    //        border-left: 4px solid $cl_ui_dark;
    //        border-right: 4px solid $cl_ui_dark;
    //        border-radius: 6px;
    //        padding: 0 4px;
    //    }
    //    //background-color: $cl_white;
    //    //border: 1px solid $cl_ui_dark;
    //    //border-radius: 6px;
    //    > label {
    //        background-color: $cl_ui_dark;
    //        border: 2px solid $cl_white;
    //        border-radius: 6px;
    //        color: $cl_white;
    //        flex-shrink: 0;
    //        line-height: 30px;
    //        margin-bottom: 2px;
    //        max-width: none;
    //        overflow: hidden;
    //        padding: 0 6px;
    //        text-overflow: ellipsis;
    //        user-select: none;
    //        white-space: nowrap;
    //        width: 100%;
    //    }
    //    .sp_radio__container {
    //        > label {
    //            display: flex;
    //            flex-direction: row;
    //            overflow: hidden;
    //        }
    //        $boxDim: 16px;
    //        .sp_checkbox__text, .sp_radio__text {
    //            background-color: $cl_white;
    //            border-radius: 4px;
    //            line-height: 20px;
    //            .sp_radio__label {
    //                background-color: rgba($cl_pyro, 0.6);
    //                border: 2px solid $cl_white;
    //                border-radius: inherit;
    //                color: $cl_white;
    //                overflow: hidden;
    //                padding: 0 6px 0 (8px + $boxDim);
    //                text-overflow: ellipsis;
    //                width: 100%;
    //                white-space: nowrap;
    //                &:before {
    //                    background-color: transparent;
    //                    border: 1px solid $cl_white;
    //                    content: '';
    //                    height: $boxDim;
    //                    left: 2px;
    //                    position: absolute;
    //                    top: 50%;
    //                    transform: translateY(-50%);
    //                    width: $boxDim;
    //                }
    //            }
    //            &.sp_radio__checked {
    //                .sp_radio__label {
    //                    background-color: $cl_dendro;
    //                    &:before {
    //                        background-color: $cl_white;
    //                    }
    //                }
    //            }
    //        }
    //        .sp_checkbox__text {
    //            .sp_radio__label {
    //                &:before {
    //                    border-radius: 2px;
    //                }
    //            }
    //        }
    //        .sp_radio__text {
    //            .sp_radio__label {
    //                &:before {
    //                    //border-radius: math.div($boxDim, 2);
    //                    border-radius: math.div($boxDim, 2);
    //                }
    //            }
    //        }
    //        .sp_radio__enhanced {
    //            //&.sp_invert {
    //            //    filter: invert(0.5);
    //            //}
    //            //&.sp_grayscale {
    //            //    filter: grayscale(1);
    //            //}
    //            //&.sp_radio__checked {
    //            //    &.sp_invert {
    //            //        filter: invert(0);
    //            //    }
    //            //    &.sp_grayscale {
    //            //        filter: grayscale(0);
    //            //    }
    //            //}
    //            &:hover, *:hover {
    //                cursor: pointer;
    //            }
    //        }
    //
    //        &.sp_radio__layout-inline {
    //            display: flex;
    //            flex-direction: row;
    //            flex-wrap: wrap;
    //            > label {
    //                margin: 0 6px 6px 0;
    //                &:last-child {
    //                    margin-right: 0;
    //                }
    //            }
    //        }
    //        &.sp_radio__layout-grid-b {
    //            display: grid;
    //            grid-template-columns: repeat(2, 1fr);
    //            grid-gap: 4px;
    //        }
    //        &.sp_radio__layout-grid-c {
    //            display: grid;
    //            grid-template-columns: repeat(2, 1fr 24px);
    //            grid-gap: 4px;
    //        }
    //
    //        &.sp_radio__invert {
    //            .sp_radio__enhanced {
    //                filter: invert(0.5);
    //                &.sp_radio__checked {
    //                    filter: invert(0);
    //                }
    //            }
    //        }
    //        &.sp_radio__grayscale {
    //            .sp_radio__enhanced {
    //                filter: grayscale(1);
    //                &.sp_radio__checked {
    //                    filter: grayscale(0);
    //                }
    //            }
    //        }
    //
    //        input {
    //            display: none;
    //        }
    //    }
    //    &:hover {
    //        > label {
    //            background-color: $cl_ui_hover;
    //        }
    //    }
    //}
    //</editor-fold>
    .sp_form-row__radio {
        display: flex;
        flex-direction: column;
        .sp_radio__main-label {
            background-color: $cl_ui_dark;
            border: 2px solid $cl_white;
            border-radius: 6px;
            color: $cl_white;
            flex-shrink: 0;
            line-height: 30px;
            margin-bottom: 4px;
            max-width: none;
            overflow: hidden;
            padding: 0 6px;
            text-overflow: ellipsis;
            user-select: none;
            white-space: nowrap;
            width: 100%;
        }
        .sp_radio__input-wrapper {
            background-color: $cl_white;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow: hidden;
            .sp_radio__input-icon, .sp_radio__input-mark {
                position: absolute;
                left: 2px;
                top: 50%;
                transform: translateY(-50%);
            }
            .sp_radio__input-label {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            input {
                &[type="checkbox"],
                &[type="radio"] {
                    display: none;
                }
            }
            &:not(.sp_radio__checked) {
                .sp_radio__input-label {
                    color: $cl_ui_shell;
                }
            }
        }
        
        &.sp_radio__layout-inline {
            .sp_radio__container {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .sp_radio__wrapper {
                margin: 0 6px 6px 0;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        
        &[class*="sp_radio__layout-grid"] {
            .sp_radio__container {
                display: grid;
                grid-gap: 4px;
            }
        }
        &.sp_radio__layout-grid-a {
            .sp_radio__container {
                grid-template-columns: 1fr;
            }
        }
        &.sp_radio__layout-grid-b {
            .sp_radio__container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        &.sp_radio__layout-grid-c {
            .sp_radio__container {
                grid-template-columns: repeat(2, 1fr 24px);
            }
        }
        
        &.sp_radio__style-text {
            .sp_radio__input-wrapper {
                height: 24px;
                padding: 0 4px 0 26px;
                .sp_radio__input-mark {
                    background-color: #ff8888;
                    box-shadow:
                            inset 1px 1px 0 rgba($cl_ui_dark, 0.5),
                            inset 0 0 1px rgba($cl_ui_dark, 0.5);
                    display: flex;
                    height: 20px;
                    width: 20px;
                    &:before {
                        content: "";
                    }
                }
                .sp_radio__input-label {
                    line-height: 24px;
                }
                &.sp_radio__type-checkbox, &.sp_radio__type-radio {
                    .sp_radio__input-icon {
                        display: none;
                    }
                }
                &.sp_radio__type-checkbox {
                    .sp_radio__input-mark {
                        border-radius: 4px;
                        &:before,
                        &:after {
                            background-color: $cl_white;
                            box-shadow: none;
                            height: 14px;
                            margin: auto;
                            width: 2px;
                            transform: rotate(45deg);
                        }
                        &:after {
                            content: "";
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%) rotate(-45deg);
                        }
                    }
                }
                &.sp_radio__type-radio {
                    .sp_radio__input-mark {
                        border-radius: 50%;
                        &:before {
                            background-color: transparent;
                            border: 1px solid $cl_white;
                            box-shadow: none;
                            border-radius: 50%;
                            height: 12px;
                            margin: auto;
                            width: 12px;
                        }
                    }
                }
                &.sp_radio__checked {
                    color: $cl_ui_dark;
                    .sp_radio__input-mark {
                        background-color: $cl_dendro;
                        &:before {
                            box-shadow: 1px 1px 0 rgba($cl_ui_dark, 0.5);
                        }
                    }
                    &.sp_radio__type-checkbox {
                        .sp_radio__input-mark {
                            &:before {
                                background-color: transparent;
                                border-bottom: 3px solid $cl_white;
                                border-right: 3px solid $cl_white;
                                height: 12px;
                                margin: auto;
                                transform: rotate(45deg);
                                width: 6px;
                            }
                            &:after {
                                content: none;
                            }
                        }
                    }
                    &.sp_radio__type-radio {
                        .sp_radio__input-mark {
                            &:before {
                                background-color: $cl_white;
                                border: none;
                            }
                        }
                    }
                }
            }
        }
    
        &.sp_radio__style-icon, &.sp_radio__style-button {
            .sp_radio__input-wrapper {
                line-height: unset;
                &.sp_radio__type-checkbox, &.sp_radio__type-radio {
                    .sp_radio__input-mark {
                        display: none;
                    }
                    &:not(.sp_radio__checked) {
                        .sp_radio__input-icon {
                            filter: grayscale(1);
                        }
                    }
                }
            }
        }
        &.sp_radio__style-icon {
            .sp_radio__input-wrapper {
                height: 34px;
                padding: 0 4px 0 36px;
                .sp_radio__input-icon {
                    display: block;
                    height: 34px;
                    width: 34px;
                    > * {
                        display: block;
                        width: 34px;
                    }
                }
                .sp_radio__input-label {
                    line-height: 34px;
                }
            }
        }
        &.sp_radio__style-button {
            .sp_radio__input-wrapper {
                height: 48px;
                margin-right: 6px;
                padding: 0 0 0 48px;
                .sp_radio__input-icon {
                    display: block;
                    height: 48px;
                    width: 48px;
                    > * {
                        display: block;
                        width: 48px;
                    }
                }
                .sp_radio__input-label {
                    display: none;
                }
            }
        }
    }
    .sp_form-row__textarea {
        display: flex;
        flex-direction: column;
        label {
            max-width: 100%;
            width: 100%;
        }
        textarea {
            resize: none;
            min-height: 120px;
        }
    }
    .sp_form-row_inline-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 6px;
        > [class*='sp_form-row'] {
            margin: 0;
        }
    }
    
    /* *** CLASS TEMPLATES *** */
    .sp_menu-btn {
        cursor: pointer;
        display: flex;
        flex-shrink: 0;
        height: 64px;
        padding: 10px;
        width: 64px;
        .sp_menu-btn__bars {
            background-color: white;
            height: 6px;
            margin: auto;
            overflow: visible;
            width: 44px;
            //transition: background-color 250ms ease-out;
            transform: rotate(0deg);
            transition: transform 250ms ease-in;
            &:before, &:after {
                background-color: white;
                content: "";
                height: 6px;
                left: 50%;
                position: absolute;
                transform: translate(-50%, -50%);
                width: 44px;
                transition: transform 250ms ease-in, top 250ms ease-in;
            }
            &:before {
                top: calc(50% - 12px);
            }
            &:after {
                top: calc(50% + 12px);
            }
        }
        &.sp_nav__nav-open {
            .sp_menu-btn__bars {
                transform: rotate(45deg);
                transition: transform 250ms ease-in;
                &:before, &:after {
                    transition: transform 250ms ease-in, top 250ms ease-in;
                }
                &:before {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(-90deg);
                }
                &:after {
                    top: 50%;
                    transform: translate(-50%, -50%) rotate(-90deg);
                }
            }
        }
    }
    .ul_nav__wrapper {
        overflow: visible;
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .ul_nav {
            display: flex;
            flex-direction: row;
            height: 64px;
            margin: 0 auto;
            overflow: visible;
            padding: 0 80px;
            .ul_nav__head, .ul_nav__tail, .ul_nav__item {
                flex-shrink: 0;
                height: 64px;
                > *:not(.ul_nav__sub-nav) {
                    height: 64px;
                }
            }
            .ul_nav__head, .ul_nav__tail {
                background-color: $cl_geo;
                position: absolute;
                width: 64px;
                z-index: 1;
                > * {
                    width: 64px;
                }
            }
            .ul_nav__head {
                left: 0;
            }
            .ul_nav__tail {
                right: 0;
            }
            .ul_nav__item {
                color: $cl_ui_light;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                width: 120px;
                > a {
                    background-color: $cl_ui_darker;
                    display: flex;
                    flex-shrink: 0;
                    height: 64px;
                    overflow: hidden;
                    padding: 0 12px;
                    width: inherit;
                    z-index: 2;
                    .ul_nav__underline {
                        background-color: rgba($cl_ui_light, 0.2);
                        bottom: 0;
                        height: 2px;
                        left: 6px;
                        position: absolute;
                        right: 6px;
                        z-index: 2;
                    }
                    .ul_nav__item-title {
                        margin: auto;
                        font-weight: normal;
                        font-size: 16px;
                        line-height: 18px;
                    }
                    &.ul_nav__link-active {
                        color: $cl_geo;
                        font-family: ptsans_bold, sans-serif;
                        .ul_nav__underline {
                            background-color: $cl_geo;
                        }
                    }
                    &:hover {
                        background-color: $cl_ui_dark;
                    }
                    &:not(.ul_nav__link-active) {
                        &:hover {
                            color: $cl_ui_hover;
                            .ul_nav__underline {
                                background-color: $cl_ui_hover;
                            }
                        }
                    }
                }
            }
            > .ul_nav__item {
                overflow: visible;
                z-index: 2;
                &:nth-child(2), &:nth-last-child(2) {
                    > a {
                        overflow: visible;
                        &:after {
                            content: '';
                            display: block;
                            position: absolute;
                            top: 0;
                        }
                    }
                }
                &:nth-child(2) {
                    > a {
                        &:after {
                            border-top: 64px solid $cl_geo;
                            border-right: 16px solid $cl_ui_darker;
                            left: -16px;
                        }
                        &:hover {
                            &:after {
                                border-right: 16px solid $cl_ui_dark;
                            }
                        }
                    }
                }
                &:nth-last-child(2) {
                    > a {
                        &:after {
                            border-bottom: 64px solid $cl_geo;
                            border-left: 16px solid $cl_ui_darker;
                            right: -16px;
                        }
                        &:hover {
                            &:after {
                                border-left: 16px solid $cl_ui_dark;
                            }
                        }
                    }
                }
                &:hover {
                    height: auto;
                    .ul_nav__sub-nav {
                        max-height: 256px;
                        transition: max-height ease-in 350ms;
                    }
                }
            }
        }
        .ul_nav__sub-nav {
            box-shadow: 0 0 10px -4px $cl_ui_light;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height ease-out 250ms;
            z-index: 1;
            .ul_nav__item {
                a {
                    &.ul_nav__link-active {
                        color: $cl_dendro;
                        font-family: ptsans_regular, sans-serif;
                        .ul_nav__underline {
                            background-color: $cl_dendro;
                        }
                    }
                }
            }
        }
    }
    .sp_nav {
        display: flex;
        flex-direction: row;
        .sp_nav__wrapper, .sp_nav__item {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            height: 64px;
            overflow: hidden;
            width: 140px;
        }
        .sp_nav__wrapper {
            height: 128px;
        }
        .sp_nav__item {
            color: $cl_ui_light;
            padding: 0 12px;
            .sp_nav__indicator, .sp_nav__underline, .sp_nav__cursor {
                z-index: 2;
            }
            .sp_nav__indicator, .sp_nav__underline {
                background-color: $cl_ui_light;
                opacity: 0.2;
                position: absolute;
            }
            .sp_nav__indicator, .sp_nav__cursor {
                display: none;
            }
            .sp_nav__underline {
                bottom: 0;
                height: 2px;
                left: 4px;
                right: 4px;
            }
            .sp_nav__title {
                margin: auto;
                z-index: 1;
            }
            &.sp_nav__active {
                //background-color: $cl_ui_light;
                color: $cl_geo;
                font-family: ptsans_bold, sans-serif;
                .sp_nav__indicator, .sp_nav__underline {
                    background-color: $cl_geo;
                    opacity: 1;
                }
            }
            &:not(.sp_nav__active):hover {
                //.sp_nav__indicator, .sp_nav__underline {
                color: $cl_ui_hover;
                .sp_nav__indicator, .sp_nav__underline {
                    background-color: $cl_geo;
                    opacity: 0.8;
                }
            }
        }
        &.sp_nav__vertical {
            flex-direction: column;
            .sp_nav__item {
                background-color: rgba($cl_ui_dark, 0.8);
                margin-bottom: 6px;
                padding-left: 16px;
                width: 160px;
                .sp_nav__indicator {
                    display: block;
                    height: 100%;
                    left: 0;
                    top: 0;
                    width: 6px;
                }
                .sp_nav__cursor {
                    display: none;
                    background-color: transparent;
                    border: 12px solid transparent;
                    border-left-color: $cl_dendro;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .sp_nav__underline {
                    left: 10px;
                }
                .sp_nav__title {
                    margin: auto 0;
                }
                &.sp_nav__sub-item {
                    height: 48px;
                    margin-left: auto;
                    width: 140px;
                }
                &.sp_nav__active {
                    background-color: $cl_ui_light;
                    color: $cl_ui_dark;
                    .sp_nav__indicator, .sp_nav__underline {
                        background-color: $cl_dendro;
                    }
                    .sp_nav__cursor {
                        display: block;
                    }
                }
            }
        }
    }
    //<editor-fold desc="old grid">
    //.sp_grid__container {
    //    display: flex;
    //    flex-direction: column;
    //    flex-wrap: nowrap;
    //    .sp_grid__row {
    //        display: flex;
    //        flex-direction: row;
    //        flex-shrink: 0;
    //    }
    //    .sp_grid__column {
    //        //padding-top: calc(100% / var(--grid__width) * var(--grid__zoom));
    //        user-select: none;
    //        flex-shrink: 0;
    //        height: calc(512px + (64px * var(--grid__zoom)));
    //        width: calc(512px + (64px * var(--grid__zoom)));
    //        //width: calc(100% / var(--grid__width) * var(--grid__zoom));
    //        .sp_grid__map, .sp_grid__node-container, .sp_grid__map-form {
    //            height: 100%;
    //            left: 0;
    //            position: absolute;
    //            top: 0;
    //            width: 100%;
    //        }
    //        .sp_grid__map {
    //            z-index: 1;
    //        }
    //        .sp_grid__node-container {
    //            z-index: 3;
    //            .sp_node__item {
    //                position: absolute;
    //                z-index: 1;
    //                &.sp_node__collected:not(.sp_node__deleted) {
    //                    opacity: 0.3;
    //                }
    //                &.sp_node__hidden {
    //                    display: none;
    //                }
    //                &.sp_node__deleted {
    //                    &:before, &:after {
    //                        border-top: 4px solid $cl_pyro;
    //                        content: '';
    //                        height: 0;
    //                        left: 50%;
    //                        position: absolute;
    //                        top: 50%;
    //                        width: 40px;
    //                        z-index: 3;
    //                    }
    //                    &:before {
    //                        transform: translate(-50%, -50%) rotate(-45deg);
    //                    }
    //                    &:after {
    //                        transform: translate(-50%, -50%) rotate(45deg);
    //                    }
    //                }
    //            }
    //        }
    //        .sp_grid__map-form {
    //            z-index: 4;
    //            input[type='file'] {
    //                height: 100%;
    //                left: 0;
    //                opacity: 0;
    //                position: absolute;
    //                top: 0;
    //                width: 100%;
    //            }
    //            &:hover {
    //                background-color: rgba($cl_ui_dark, 0.2);
    //            }
    //        }
    //        &:before {
    //            bottom: 0;
    //            content: '';
    //            left: 0;
    //            position: absolute;
    //            right: 0;
    //            top: 0;
    //            z-index: 2;
    //        }
    //    }
    //}
    //</editor-fold>
    .sp_grid__container {
        display: grid;
        grid-template-rows: repeat(var(--grid__height), calc(256px + (64px * var(--grid__zoom))));
        grid-template-columns: repeat(var(--grid__width), calc(256px + (64px * var(--grid__zoom))));
        .sp_grid__cell {
            user-select: none;
            //flex-shrink: 0;
            //height: calc(512px + (64px * var(--grid__zoom)));
            //width: calc(512px + (64px * var(--grid__zoom)));
            .sp_grid__map, .sp_grid__node-container, .sp_grid__map-form {
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
            }
            .sp_grid__map {
                z-index: 1;
            }
            .sp_grid__node-container {
                z-index: 3;
                .sp_node__item {
                    position: absolute;
                    z-index: 1;
                    &.sp_node__collected:not(.sp_node__deleted) {
                        opacity: 0.3;
                    }
                    &.sp_node__hidden {
                        display: none;
                    }
                    &.sp_node__deleted {
                        &:before, &:after {
                            border-top: 4px solid $cl_pyro;
                            content: '';
                            height: 0;
                            left: 50%;
                            position: absolute;
                            top: 50%;
                            width: 40px;
                            z-index: 3;
                        }
                        &:before {
                            transform: translate(-50%, -50%) rotate(-45deg);
                        }
                        &:after {
                            transform: translate(-50%, -50%) rotate(45deg);
                        }
                    }
                }
            }
            .sp_grid__map-form {
                z-index: 4;
                input[type='file'] {
                    height: 100%;
                    left: 0;
                    opacity: 0;
                    position: absolute;
                    top: 0;
                    width: 100%;
                }
                &:hover {
                    background-color: rgba($cl_ui_dark, 0.2);
                }
            }
            &:before {
                bottom: 0;
                content: '';
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 2;
            }
        }
    }
    .sp_dashboard__container {
        background-color: $cl_ui_light;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px 12px;
        width: 100%;
    }
    .sp_node__item {
        $outer_dim: 34px;
        height: $outer_dim;
        width: $outer_dim;
        .sp_node__background {
            $inner_dim: 70.6%;
            border: 2px solid white;
            background-color: $cl_ui_dark;
            border-radius: 4px;
            height: $inner_dim;
            left: 50%;
            overflow: hidden;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: $inner_dim;
            z-index: 2;
            img {
                //height: auto;
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
                width: 32px;
                z-index: 1;
            }
            &:before {
                border-radius: 4px;
                content: '';
                display: block;
                height: 100%;
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                z-index: 3;
            }
        }
        .sp_node__quantity {
            background-color: $cl_ui_dark;
            border: 1px solid $cl_white;
            border-radius: 4px;
            height: 14px;
            left: -2px;
            position: absolute;
            top: 10px;
            transform: rotate(45deg);
            width: 14px;
            z-index: 2;
            > span {
                //color: $cl_geo;
                color: $cl_white;
                font-size: 10px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
            }
        }
        .sp_node__guidelines {
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 1;
            &:before, &:after {
                border: 1px solid $cl_legendary;
                content: '';
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            &:before {
                height: 4096px;
            }
            &:after {
                width: 4096px;
            }
        }
        &.sp_node__highlight {
            .sp_node__background {
                border: 2px solid rgb(0, 255, 255);
            }
        }
    }
    .sp_modal, .sp_tooltip {
        background-color: $cl_ui_light;
        border: 2px solid $cl_white;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 6px;
        width: 100%;
        .sp_modal__body, .sp_tooltip__body {
            flex-grow: 1;
            flex-shrink: 1;
            line-height: 20px;
            margin-bottom: 6px;
            overflow-x: hidden;
            overflow-y: auto;
            padding: 0 6px;
        }
    }
    .sp_tooltip__wrapper {
        display: flex;
        flex-direction: column;
        max-height: 250px;
        overflow: visible;
        position: absolute;
        transform: translate(-50%, -100%);
        width: 400px;
        z-index: 10;
        .sp_tooltip__action-left-wrapper, .sp_tooltip__action-right-wrapper {
            display: flex;
            flex-direction: row;
            position: absolute;
            top: 0;
            transform: translateY(calc(-100% - 2px));
            z-index: 3;
            > *:not(:last-child) {
                margin-right: 2px;
            }
            .sp_button {
                width: 100px;
                &.sp_icon__container {
                    width: 36px;
                    img {
                        height: 24px;
                    }
                }
            }
            .sp_node__set-display {
                margin-left: auto;
                &[data-is-hidden="0"] {
                    > span:nth-child(even) {
                        display: none
                    }
                }
                &[data-is-hidden="1"] {
                    > span:nth-child(odd) {
                        display: none
                    }
                }
            }
        }
        .sp_tooltip__action-left-wrapper {
            left: 0;
        }
        .sp_tooltip__action-right-wrapper {
            right: 0;
        }
        .sp_tooltip {
            margin-bottom: 20px;
            z-index: 1;
            .sp_tooltip__header, .sp_tooltip__footer {
                display: flex;
                flex-shrink: 0;
            }
            .sp_tooltip__header {
                flex-direction: row;
                margin: 0;
                line-height: 28px;
                > span {
                    &:nth-child(1) {
                        margin-right: auto;
                    }
                    &:nth-child(2) {
                        font-size: 12px;
                        line-height: 16px;
                        margin-bottom: auto;
                    }
                }
            }
            .sp_tooltip__footer {
                flex-direction: column;
                button {
                    background-color: transparent;
                    border: none;
                    height: 32px;
                    padding: 0;
                    width: 32px;
                    img {
                        height: 32px;
                        //noinspection CssInvalidFunction
                        transform: rotateY(0deg);
                    }
                    &:not(:last-child) {
                        margin-right: 6px;
                    }
                    &:hover {
                        img {
                            //noinspection CssInvalidFunction
                            transform: rotateY(360deg);
                            transition: all 0.6s ease;
                        }
                    }
                }
                > :not(.sp_tooltip__screenshot-container) {
                    font-family: ptsans_italic, sans-serif;
                    font-size: 14px;
                    margin-bottom: 2px;
                }
                > .sp_tooltip__screenshot-container {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    .sp_screenshot__container {
                        cursor: pointer;
                        margin-right: 6px;
                        z-index: 1;
                        img {
                            border: 2px solid $cl_white;
                            border-radius: 6px;
                        }
                        &:hover {
                            z-index: 2;
                            img {
                                animation: 300ms linear infinite screenshot__rock;
                            }
                        }
                    }
                }
            }
            &:before {
                background: no-repeat center;
                background-size: 70%;
                content: "";
                filter: blur(4px);
                height: 100%;
                left: 0;
                opacity: 0.3;
                position: absolute;
                top: 0;
                width: 100%;
            }
        }
        .sp_tooltip__cursor {
            bottom: 2px;
            height: 20px;
            left: 50%;
            overflow: hidden;
            position: absolute;
            transform: translateX(-50%);
            width: 40px;
            z-index: 2;
            &:before {
                background-color: $cl_ui_light;
                border: 2px solid white;
                border-radius: 6px;
                bottom: 8px;
                content: "";
                height: 40px;
                left: 50%;
                position: absolute;
                transform: translateX(-50%) rotate(45deg);
                width: 40px;
            }
        }
    }
    
    /* *** ID COMMONS *** */
    #header-container, #footer-container {
        color: $cl_white;
        //background-color: rgba($cl_ui_dark, 0.5);
        background-color: $cl_ui_darker;
    }
    #header-container {
        overflow: visible;
        .sp_header__nav, .sp_header__extra {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            flex-wrap: nowrap;
            max-height: inherit;
            overflow: visible;
        }
        .sp_header__nav {
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
        }
        .sp_header__extra {
            position: absolute;
            right: 20px;
            .sp_icon__container {
                height: 64px;
                &:not(:last-child) {
                    margin-right: 20px;
                }
            }
        }
        .sp_header__page-icon {
        }
        .sp_header__title {
            line-height: 64px;;
        }
        .sp_nav {
            .sp_nav__item:not(:first-child) {
                background-color: $cl_ui_darker;
            }
        }
    }
    #toasts-container {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        z-index: 999;
        .sp_toast {
            background: $cl_ui_dark;
            color: $cl_white;
            margin-bottom: 6px;
            opacity: 0;
            padding: 8px 12px;
            position: relative;
            transform: translateY(100px);
            &__success {
                background: $cl_common;
            }
            &__error {
                background: $cl_challenge;
            }
            &__active {
                opacity: 1;
                transform: translateY(0);
                transition: all 250ms ease-out;
            }
        }
    }
    #modal-container {
        display: none;
        bottom: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        transition: opacity ease-out 150ms;
        .sp_modal__background {
            background-color: rgba($cl_ui_dark, 0.6);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 1;
        }
        .sp_modal__container, .sp_modal {
            left: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
        }
        .sp_modal__container {
            top: 50%;
            width: 400px;
            z-index: 2;
        }
        .sp_modal {
            top: 200%;
            transition: top ease-out 150ms;
            &.sp_modal__warn {
                background-color: $cl_ui_dark;
                .sp_modal__body {
                    color: $cl_white;
                    font-family: ptsans_bold, sans-serif;
                }
            }
        }
        &.sp_modal__open {
            display: block;
            opacity: 1;
            transition: opacity ease-in 250ms;
            .sp_modal {
                top: 50%;
                transition: top ease-in 250ms;
            }
        }
    }
    #blob-loader {
        background-color: $cl_sea;
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        user-select: none;
        z-index: 100;
        .sp_loader__wrapper,
        .sp_slime__wrapper,
        .sp_slime__outline_ends, .sp_slime__outline_end,
        .sp_slime__eyes, .sp_slime__eye,
        .sp_ground_line__wrapper,
        .sp_ground_line__ends, .sp_ground_line__end,
        .sp_element__wrapper,
        .sp_elements, .sp_element, .sp_element__icon {
            position: absolute;
        }
        
        .sp_loader__wrapper, .sp_slime__wrapper, .sp_ground_line__wrapper, .sp_element__wrapper {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .sp_slime__outline_ends, .sp_ground_line__ends {
            height: inherit;
            left: 0;
            right: 0;
            top: 0;
        }
        
        .sp_slime__outline_end, .sp_ground_line__end, .sp_slime__eye {
            background-color: var(--loader__line-color);
            border-radius: 50%;
            height: inherit;
            top: 50%;
            transform: translateY(-50%);
            &:first-child {
                left: 0;
            }
            &:last-child {
                right: 0;
            }
        }
        
        .sp_element__wrapper, .sp_elements, .sp_element {
            height: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 20px);
            width: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 20px);
        }
        
        .sp_elements, .sp_element, .sp_element__icon {
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }
        
        .sp_loader__wrapper {
            height: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 100px);
            width: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 100px);
        }
        
        .sp_slime__wrapper {
            height: var(--loader__slime__size);
            transform: translate(-50%, calc(-50% - (var(--loader__slime__offset) + var(--loader__ground-line-size) / 2)));
            width: var(--loader__slime__size);
            .sp_slime__outline {
                border: var(--loader__slime__outline-width) solid var(--loader__line-color);
                border-bottom-color: transparent;
                border-right-color: transparent;
                border-radius: 50%;
                height: inherit;
                transform: rotate(45deg);
                width: inherit;
            }
            .sp_slime__outline_ends {
                .sp_slime__outline_end {
                    height: var(--loader__slime__outline-width);
                    width: var(--loader__slime__outline-width);
                }
            }
            .sp_slime__eyes {
                animation: 5s linear infinite slime_eyes__move;
                height: calc(var(--loader__slime__outline-width) * 2);
                left: 30%;
                top: 20%;
                transform: translateX(-50%);
                width: 50px;
                .sp_slime__eye {
                    animation: 5s linear infinite slime_eyes__blink;
                    width: var(--loader__slime__outline-width);
                }
            }
        }
        
        .sp_ground_line__wrapper {
            height: var(--loader__ground-line-size);
            padding: 0 4px;
            width: calc(var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 40px);
            .sp_ground_line {
                background-color: var(--loader__line-color);
                height: inherit;
                width: 100%;
            }
            .sp_ground_line__ends {
                .sp_ground_line__end {
                    width: var(--loader__ground-line-size);
                }
            }
        }
        
        .sp_element__wrapper {
            height: calc(((var(--loader__slime__size) + (var(--loader__icon-size) * 2) + 20px) / 2) + var(--loader__slime__offset));
            overflow: hidden;
            transform: translate(-50%, calc(-100% - 4px));
            .sp_elements {
                animation: 10s linear infinite loader_spin;
                width: inherit;
                .sp_element {
                    width: inherit;
                    .sp_element__icon {
                        height: var(--loader__icon-size);
                        width: var(--loader__icon-size);
                        img {
                            width: 100%;
                        }
                    }
                    @for $i from 2 through 14 {
                        &:nth-child(#{$i}) {
                            transform: translateX(-50%) rotate(#{25.72deg * ($i - 1)});
                        }
                    }
                }
            }
        }
    
        .sp_loader__text {
            color: $cl_geo;
            font-size: 32px;
            font-family: ptsans_bold, sans-serif;
            left: 50%;
            position: absolute;
            text-align: center;
            top: calc(50% + 20px);
            transform: translateX(-50%);
            .sp_loader__warn-text {
                color: $cl_pyro;
            }
        }
    }
    
    /* *** ID FRONT *** */
    #main-left-container, #main-right-container {
        background-color: $cl_ui_light;
        height: 100%;
        overflow: visible;
        position: absolute;
        top: 0;
        width: var(--pannel__width);
        z-index: 2;
        .sp_panel__header {
            background-color: $cl_ui_dark;
            color: #fff;
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            flex-wrap: nowrap;
            height: 64px;
            overflow: hidden;
            padding: 0 20px;
        }
        .sp_panel__switch, .sp_panel__content-switch-container {
            position: absolute;
        }
        .sp_panel__content-switch-container {
            display: grid;
            grid-template-columns: 1fr;
            grid-row-gap: 6px;
            top: 200px;
        }
        .sp_panel__switch, .sp_panel__content-switch {
            background-color: $cl_ui_light;
            cursor: pointer;
            height: 50px;
            overflow: hidden;
            user-select: none;
            width: 30px;
            img {
                //filter: drop-shadow(0px 0px 0px gray);
                height: auto;
                left: 50%;
                max-width: none;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 38px;
                z-index: 1;
            }
            &:before {
                content: '';
                display: block;
                height: 100%;
                left: 0;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 2;
            }
        }
        .sp_panel__switch {
            top: 100px;
            img {
                width: 38px;
            }
            .sp_panel__open {
                display: initial;
            }
            .sp_panel__close {
                display: none;
            }
        }
        .sp_panel__content-switch {
            &.sp_panel__switch-active {
                img {
                    filter:
                            hue-rotate(color.hue($cl_hydro) - color.hue($cl_geo))
                            saturate(100% + color.saturation($cl_geo) - (color.saturation($cl_hydro)))
                            brightness(100% + (color.lightness($cl_hydro) - color.lightness($cl_geo)));
                }
            }
        }
        .sp_panel__content {
            flex-grow: 1;
            flex-shrink: 1;
            overflow-x: hidden;
            overflow-y: auto;
            width: 100%;
            &.sp_slider {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                overflow: hidden;
            }
        }
        .sp_slider {
            .sp_slider__slide {
                background-color: $cl_ui_light;
                height: 100%;
                left: -105%;
                overflow-x: hidden;
                overflow-y: auto;
                position: absolute;
                top: 0;
                transition: left ease-in 150ms;
                width: 100%;
                z-index: 1;
                &.sp_slider__slide-open {
                    left: 0;
                    transition: left ease-out 250ms;
                    z-index: 2;
                }
            }
        }
        .sp_panel__section {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 10px;
            width: 100%;
            .sp_panel__section-title {
                color: $cl_hydro;
                display: flex;
                flex-direction: row;
                line-height: 24px;
                margin-bottom: 10px;
                h2, label {
                    font-family: ptsans_bold, sans-serif;
                    font-size: 20px;
                    margin: 0 auto 0 0;
                }
                button {
                    border: none;
                    background-color: transparent;
                    color: $cl_geo;
                    font-family: inherit;
                    font-size: 12px;
                    height: 14px;
                    margin: auto 0 6px;
                }
            }
        }
        &.sp_panel__open {
            .sp_panel__switch {
                .sp_panel__open {
                    display: none;
                }
                .sp_panel__close {
                    display: initial;
                }
            }
        }
    }
    #main-left-container {
        left: calc(var(--pannel__width) * (-1));
        transition: left ease-in 150ms;
        .sp_panel__content-switch-container {
            right: 0;
            transition: right ease-in 150ms;
        }
        .sp_panel__switch, .sp_panel__content-switch {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        .sp_panel__switch {
            right: -30px;
            .sp_panel__close {
                //noinspection CssInvalidFunction
                transform: translate(-50%, -50%) rotateZ(180deg);
            }
        }
        &.sp_panel__open {
            left: 0;
            transition: left ease-out 250ms;
            .sp_panel__content-switch-container {
                right: -30px;
                transition: right ease-out 250ms;
            }
        }
    }
    #main-right-container {
        right: calc(var(--pannel__width) * (-1));
        transition: right 150ms;
        .sp_panel__switch {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            left: -30px;
            .sp_panel__open {
                //noinspection CssInvalidFunction
                transform: translate(-50%, -50%) rotateZ(180deg);
            }
        }
        &.sp_panel__open {
            right: 0;
            transition: right 250ms;
        }
    }
    #main-center-container {
        z-index: 1;
        &.sp_region__background-sand, &.sp_region__background-sea {
            background-repeat: repeat;
        }
        &.sp_region__background-sand {
            background-image: url('./../static/map/sand.jpg');
        }
        &.sp_region__background-sea {
            background-image: url('./../static/map/sea.jpg');
        }
    }
    #map-title {
        color: white;
        left: 50%;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    #worldmap-container {
        //display: flex;
        //flex-direction: column;
        height: 100%;
        margin: auto;
        max-width: 100%;
        overflow: hidden;
        z-index: 1;
        //.sp_grid__container {
        //    margin: auto 0;
        //    .sp_grid__row {
        //        margin: 0 auto;
        //    }
        //}
        &.sp_worldmap__edit {
            //.sp_grid__container {
            //    .sp_grid__column {
            //        .sp_grid__node-container {
            //            .sp_node__item:not(#node-form-coordinate-tracker) {
            //                filter: grayscale(1);
            //            }
            //            &:before {
            //                content: '';
            //                display: block;
            //                height: 100%;
            //                left: 0;
            //                position: absolute;
            //                top: 0;
            //                width: 100%;
            //                z-index: 10000;
            //            }
            //        }
            //    }
            //}
            .sp_grid__cell {
                .sp_grid__node-container {
                    .sp_node__item:not(#node-form-coordinate-tracker) {
                        filter: grayscale(1);
                    }
                    &:before {
                        content: '';
                        display: block;
                        height: 100%;
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 100%;
                        z-index: 10000;
                    }
                }
            }
            &:not(.sp_worldmap_locked) {
                //.sp_grid__container {
                //    .sp_grid__column {
                //        .sp_grid__map {
                //            filter: grayscale(1);
                //        }
                //        &:hover {
                //            filter: grayscale(0);
                //            .sp_grid__map {
                //                filter: grayscale(0);
                //            }
                //        }
                //    }
                //}
                .sp_grid__cell {
                    .sp_grid__map {
                        filter: grayscale(1);
                    }
                    &:hover {
                        filter: grayscale(0);
                        .sp_grid__map {
                            filter: grayscale(0);
                        }
                    }
                }
            }
            &.sp_worldmap_locked {
                //.sp_grid__container {
                //    .sp_grid__column {
                //        &:not(.sp_grid__active) {
                //            .sp_grid__map {
                //                filter: grayscale(1);
                //            }
                //        }
                //    }
                //}
                .sp_grid__cell {
                    &:not(.sp_grid__active) {
                        .sp_grid__map {
                            filter: grayscale(1);
                        }
                    }
                }
            }
        }
        .sp_node__item {
            transform: translate(-50%, -50%);
        }
    }
    #worldmap-filters {
        .sp_panel__section {
            max-height: 800px;
            transition: max-height ease-in 250ms;
            .sp_panel__section-title {
                h2 {
                    span {
                        content: '▼';
                        cursor: pointer;
                        height: 100%;
                        position: absolute;
                        right: -24px;
                        top: 0;
                        width: 24px;
                        transform: rotate(0deg);
                        transition: transform ease-in 250ms;
                    }
                }
            }
            &.sp_panel__section-closed {
                max-height: 34px;
                transition: max-height ease-out 250ms;
                .sp_panel__section-title {
                    h2 {
                        span {
                            transform: rotate(-90deg);
                            transition: transform ease-out 250ms;
                        }
                    }
                }
            }
        }
        .sp_worldmap-filter__section {
            user-select: none;
        }
        .sp_form-row__radio {
            max-width: unset;
            width: 100%;
            .sp_radio__input-wrapper {
                background-color: transparent;
                .sp_radio__input-icon {
                    left: 0;
                }
                .nodes_count {
                    bottom: 0;
                    font-size: 9px;
                    height: 9px;
                    line-height: 9px;
                    position: absolute;
                    left: 26px;
                }
                .sp_radio__input-label {
                    line-height: 20px;
                    margin: 4px 0 auto;
                    padding: 0 6px 0 0;
                }
                &:not(.sp_radio__checked) {
                    .nodes_count, .sp_radio__input-label {
                        color: $cl_gray
                    }
                }
                &.sp_radio__checked {
                    .nodes_count {
                        color: $cl_geo;
                    }
                    .sp_radio__input-label {
                        color: $cl_hydro;
                    }
                }
            }
        }
        .sp_button {
            height: 24px;
            margin: auto;
            width: 24px;
            span {
                line-height: 16px;
                padding: 0;
            }
        }
    }
    #node-form-coordinate-tracker {
        z-index: 10001;
        .sp_node__background {
            opacity: 0.4;
        }
    }
    #primogem-counter-container {
        background: linear-gradient(185deg, $cl_ui_darker 20%, #2d548d 90%);
        color: $cl_ui_light;
        height: 64px;
        display: flex;
        flex-direction: column;
        padding: 6px 20px;
        h2 {
            font-size: 16px;
            line-height: 18px;
            margin: 0;
        }
        img {
            height: 32px;
            margin-left: 6px;
            width: 32px;
        }
        .sp_primogem__main-container {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            margin: auto;
            > * {
                display: flex;
                flex-shrink: 0;
                &:nth-child(1) {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    height: 32px;
                    > * {
                        &:first-child {
                            margin: auto 6px 0 auto;
                        }
                    }
                }
                &:nth-child(2) {
                    line-height: 18px;
                    height: 18px;
                }
            }
        }
        &.sp_primogem__complete {
            img {
                height: 48px;
                margin: auto;
                width: 48px;
            }
            .sp_primogem__main-container {
                > * {
                    &:nth-child(1) {
                        height: 48px;
                        > * {
                            &:not(:last-child) {
                                display: none;
                            }
                            &:last-child {
                            
                            }
                        }
                    }
                    &:nth-child(2) {
                        display: none;
                    }
                }
            }
        }
        &:before {
            background: url("./../static/stars.png") no-repeat center;
            background-size: cover;
            bottom: 0;
            content: '';
            display: block;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    #primogem-counter {
        font-family: ptsans_bold, sans-serif;
        font-size: 28px;
        height: 32px;
    }
    #grid-zoom-container {
        background-color: rgba(0,0,0, 0.3);
        border-radius: 10px;
        display: grid;
        font-size: 18px;
        grid-template-columns: 20px;
        grid-template-rows: 20px 160px 20px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(calc(-50% - 10px), -50%);
        height: 200px;
        width: 20px;
        z-index: 2;
        > span {
            color: white;
            display: block;
            font-family: ptsans_bold, sans-serif;
            height: 20px;
            text-align: center;
            width: 20px;
            z-index: 1;
        }
        > input {
            height: 20px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            width: 160px;
            z-index: 2;
        }
    }
    
    /* *** ID BACK *** */
    #main-section-container {
        background-color: rgba($cl_ui_dark, 0.5);
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 20px auto;
        max-width: 1000px;
        padding: 16px 20px;
        overflow: hidden;
        width: 100%;
        &.sp_section_container__horizontal {
            flex-direction: row;
        }
        &:after {
            border: 2px solid $cl_ui_light;
            bottom: 0;
            content: "";
            left: 0;
            margin: 6px;
            position: absolute;
            right: 0;
            top: 0;
            z-index: -1;
        }
    }
    #map-editor {
        display: flex;
        flex-direction: column;
        height: 100%;
        .sp_map_editor__header_container {
            display: flex;
            flex-direction: row;
            > * {
                display: block;
                height: 38px;
                line-height: 38px;
                text-align: center;
                img {
                    height: 100%;
                }
                &:not(:nth-child(2)) {
                    flex-shrink: 0;
                    width: 50px;
                }
                &:nth-child(2) {
                    flex-grow: 1;
                    &:before {
                    }
                }
            }
        }
        .sp_map_editor__grid_container {
            height: 100%;
            margin: 0 auto;
            max-height: 700px;
            max-width: 700px;
            width: 100%;
        }
        .sp_grid__container {
            display: grid;
            grid-auto-flow: row;
            grid-template-columns: repeat(var(--grid__width), 1fr);
            grid-template-rows: repeat(var(--grid__height), 1fr);
            //.sp_grid__row {
            //    display: grid;
            //    grid-auto-flow: column;
            //    grid-template-columns: repeat(var(--grid__width), 1fr);
            //}
            //.sp_grid__column {
            //    height: auto;
            //    padding-top: 100%;
            //    width: auto;
            //}
        }
    }
    
    &.sp_app__is-touch-device {
        .ul_nav__wrapper {
            height: 64px;
            .ul_nav {
                flex-direction: column;
                margin: 0;
                padding: 0;
                position: absolute;
                right: 0;
                top: 64px;
                height: auto;
                max-height: 0;
                overflow-x: hidden;
                overflow-y: scroll;
                transition: max-height ease-out 250ms;
                .ul_nav__head, .ul_nav__tail {
                    position: fixed;
                    top: 0;
                    z-index: 3;
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        top: 0;
                    }
                }
                .ul_nav__head {
                    left: 0;
                    &:after {
                        border-top: 64px solid $cl_geo;
                        border-right: 16px solid $cl_ui_darker;
                        right: -16px;
                    }
                }
                .ul_nav__tail {
                    left: 96px;
                    &:after {
                        border-bottom: 64px solid $cl_geo;
                        border-left: 16px solid $cl_ui_darker;
                        left: -16px;
                    }
                }
                .ul_nav__item {
                    min-width: 240px;
                    max-width: 100vw;
                    width: auto;
                }
                > .ul_nav__item {
                    min-height: 64px;
                    max-height: unset;
                    height: auto;
                    &:nth-child(2), &:nth-last-child(2) {
                        > a {
                            &:after {
                                content: unset;
                            }
                        }
                    }
                }
            }
            .ul_nav__sub-nav {
                box-shadow: none;
                max-height: unset;
                transition: none;
                .ul_nav__item {
                }
            }
            &.sp_nav__nav-open {
                .ul_nav {
                    max-height: 320px;
                    transition: max-height ease-in 350ms;
                }
            }
        }
    
        #header-container {
            padding: 0;
            .sp_header__nav {
                margin: 0 0 0 auto;
                width: 0;
            }
            .sp_header__extra {
                background-color: $cl_ui_darker;
                border-radius: 32px;
                bottom: 6px;
                padding: 0 20px;
                position: fixed;
                right: 6px;
            }
            .sp_menu-btn {
                position: absolute;
                right: 0;
                top: 0;
                z-index: 100;
            }
        }
        
        &[data-device='mobile'] {
            .sp_tooltip__wrapper {
                max-height: 35vh;
                bottom: 10px;
                left: 50%;
                position: fixed;
                transform: translate(-50%, 0);
                width: calc(100vw - 20px);
                .sp_tooltip {
                    margin-bottom: 0;
                    .sp_tooltip__footer {
                        > .sp_tooltip__screenshot-container {
                            .sp_screenshot__container {
                                &:hover {
                                    img {
                                        animation: none;
                                    }
                                }
                            }
                        }
                    }
                    &:before {
                        background: no-repeat center;
                        background-size: 70%;
                        content: "";
                        filter: blur(4px);
                        height: 100%;
                        left: 0;
                        opacity: 0.3;
                        position: absolute;
                        top: 0;
                        width: 100%;
                    }
                }
                .sp_tooltip__cursor {
                    display: none;
                }
            }
            
            #main-left-container, #main-right-container {
                width: calc(100vw - 40px);
            }
            #main-left-container {
                &:not(.sp_panel__open) {
                    left: calc((100vw - 40px) * (-1));
                }
            }
            #main-right-container {
                &:not(.sp_panel__open) {
                    right: calc((100vw - 40px) * (-1));
                }
            }
            #primogem-counter-container {
                .sp_primogem__main-container {
                    margin: auto auto auto 0;
                    > * {
                        &:nth-child(1) {
                            > * {
                                &:first-child {
                                    margin: auto 6px 0 0;
                                }
                            }
                        }
                    }
                }
            }
            #grid-zoom-container {
                top: 10px;
                transform: translate(-50%, 0);
            }
        }
        
        &[data-device='tablet'] {}
    }
}

@keyframes loader_spin {
    from {
        transform: translate(-50%) rotate(0deg);
    }
    to {
        transform: translate(-50%) rotate(360deg);
    }
}

@keyframes slime_eyes__move {
    0%, 10%, 90%, 100% {
        left: 30%;
    }
    40%, 60% {
        left: 70%;
    }
}

@keyframes slime_eyes__blink {
    0%, 41%, 46%, 91%, 96%, 100% {
        height: inherit;
    }
    42%, 45%, 92%, 95% {
        height: 2px;
    }
}

//noinspection CssInvalidFunction
@keyframes screenshot__rock {
    0% {
        transform: scale(1.1) rotateZ(0deg);
    }
    25% {
        transform: scale(1.1) rotateZ(2deg);
    }
    50% {
        transform: scale(1.1) rotateZ(0deg);
    }
    75% {
        transform: scale(1.1) rotateZ(-2deg);
    }
    100% {
        transform: scale(1.1) rotateZ(0deg);
    }
}