*,
::after,
::before {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

mjx-container {
    margin: 0.21vw 0vw 0.21vw 0vw !important;
    padding: 0 !important;
}

.montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.andika {
    font-family: "Andika", sans-serif;
    font-weight: 700;
    font-style: normal;
}

span {
    display: inline-block;
    font-family: "Andika", sans-serif;
    font-weight: 700;
    font-style: normal;
}

label {
    user-select: none;
}

p {
    user-select: none;
}

a {
    user-select: none;
}

.math-text {
    font-size: 0.8vw;
}

/* HEADER */

header {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5.9vw;
    padding: 0.5vw;
    background: linear-gradient(to right, #808080, #696969, #808080);
}

.btn-style {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-style:hover {
    background-color: mediumslateblue;
    color: white;
}

.btn-apply-style {
    font-size: 1.2vw;
    transition: background-color 0.3s;
    cursor: pointer;
}

.btn-apply-style:hover {
    background-color: mediumslateblue;
    color: white;
}

a {
    font-size: 1vw;
    text-decoration: none;
}

li {
    cursor: pointer;
}

input {
    cursor: pointer;
}

.int-in {
    width: 2.5vw;
    height: 1.5vw;
}

.cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.6vw;
}

#multiply_1 {
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

#equal {
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

#multiply_2 {
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

#square {
    margin-left: 0.2vw;
    margin-right: 0.2vw;
}

#separator {
    height: 100%;
    width: 0.2vw;
    background-color: black;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
}

.li-separator {
    cursor: default;
    display: flex;
    align-items: center;
}

.color-change {
    transition: background-color 0.3s;
}

.color-change:hover {
    background-color: slategrey;
}

.color-type-change {
    transition: background-color 0.3s;
}

.color-type-change:hover {
    background-color: darkslategrey;
}

.color-exit-change {
    transition: background-color 0.3s;
}

.color-exit-change:hover {
    background-color: red;
}

.step-fraction {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.2vw;
    border-bottom: solid 0.15vw white;
}

.directions {
    display: grid;
    grid-template-columns: 2vw 2vw 2vw;
    grid-template-rows: 2vw 2vw 2vw;
}

.direct-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 1;
    grid-column: 2;
}

.direct-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 2;
    grid-column: 3;
}

.direct-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 3;
    grid-column: 2;
}

.direct-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 2;
    grid-column: 1;
}

.direct-5 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-row: 2;
    grid-column: 2;
}

.btn-direct {
    width: 1.6vw;
    height: 1.6vw;
    text-align: center;
    font-size: 1vw;
}

.btn-back {
    width: 1.8vw;
    height: 1.8vw;
    text-align: center;
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 0.3vw;
}

.level-parent {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    font-size: 1vw;
    padding: 0.109vw 0.5vw;
    height: 2vw;
}

.parent-reviewer {
    position: relative;
    margin-left: 0.1vw;
    display: flex;
    align-items: center;
}

.reviewer {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 1vw 0.3vw;
    height: 1.6vw;
    width: 8.26vw;
    transition: background-color 0.3s;
}

.reviewer:hover {
    background-color: white;
}

.reviewer:hover .style-reviewer-color {
    color: black;
}

.style-reviewer-color {
    color: white;
    transition: color 0.3s;
}

.user {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 8vw;
    padding: 0.4vw 0.3vw;
    transition: background-color 0.3s;
}

.user:hover {
    background-color: royalblue;
}

.parent-user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}

.style-color {
    color: white;
}

.user-color {
    color: lightcyan;
    font-style: italic;
}

.authentication {
    display: grid;
    cursor: default;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto auto;
    row-gap: 0.5vw;
    padding: 0.5vw 0.2vw 0vw 0.2vw;
}

.enter-item-1 {
    grid-column: 1;
    padding-right: 0.3vw;
    display: flex;
    align-items: center;
    justify-content: end;
    font-size: 1vw;
}

.enter-item-2 {
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enter-item-2-3 {
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: start;
}

.enter-buttons {
    grid-column: 1 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-authentication {
    width: 10vw;
    height: 1.2vw;
}

.btn-user-style {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    height: 1.7vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.file-source {
    padding: 0vw 0.2vw 0vw 0.2vw;
    cursor: pointer;
}

#file_selected {
    margin-left: 0.5vw;
}

#files_length {
    margin-right: 0.5vw;
}

.btn-add-style {
    margin: 0vw 0.2vw 0vw 0.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    width: 2vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-delete-style {
    margin: 0vw 0.2vw 0vw 0.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1vw;
    width: 1.5vw;
    cursor: pointer;
    transition: background-color 0.3s;
}

.passord-help-text {
    font-size: 0.5vw;
    font-weight: 300;
}

.btn-user-style:hover {
    background-color: mediumslateblue;
    color: white;
}

.btn-add-style:hover {
    background-color: mediumslateblue;
    color: white;
}

.btn-delete-style:hover {
    background-color: red;
    color: white;
}

.instruction {
    transition: background-color 0.3s;
}

.instruction:hover {
    background-color: Teal;
}

.file {
    transition: background-color 0.3s;
}

.file:hover {
    background-color: deepskyblue;
}

.editing {
    transition: background-color 0.3s;
}

.editing:hover {
    background-color: deepskyblue;
}

.connection {
    transition: background-color 0.3s;
}

.connection:hover {
    background-color: deepskyblue;
}

.laws {
    transition: background-color 0.3s;
}

.laws:hover {
    background-color: deepskyblue;
}

.screenshot {
    transition: background-color 0.3s;
}

.creators-table {
    width: 100%;
    border-collapse: collapse;
}

.creators-th, .creators-td {
    border: 1px solid white;
    padding: 8px;
    text-align: left;
}

.authors {
    transition: background-color 0.3s;
}

.authors:hover {
    background-color: deepskyblue;
}

.screenshot:hover {
    background-color: deepskyblue;
}

.cleaning {
    transition: background-color 0.3s;
}

.cleaning:hover {
    background-color: purple;
}

.adding {
    transition: background-color 0.3s;
}

.adding:hover {
    background-color: purple;
}

.go-null {
    transition: background-color 0.3s;
}

.go-null:hover {
    background-color: purple;
}

.step {
    transition: background-color 0.3s;
}

.step:hover {
    background-color: purple;
}

.mode {
    transition: background-color 0.3s;
}

.mode:hover {
    background-color: purple;
}

.l-adding {
    transition: background-color 0.3s;
    margin-left: 0.1vw;
}

.l-adding:hover {
    background-color: darkgreen;
}

.level-border {
    border: solid 0.1vw black;
}

.level-border:hover {
    border: solid 0.1vw blue;
}

.selected-level {
    border: solid 0.1vw red;
}

/* Styles of MLTI levels */
.G1k0 {
    transition: boarder 0.3s;
    background-color: #c2c5c8;
}

.G0k-1 {
    transition: boarder 0.3s;
    background-color: #74afec;
}

.G1k1 {
    transition: boarder 0.3s;
    background-color: #92e892;
}

.G-1k-2 {
    transition: boarder 0.3s;
    background-color: #e79bde;
}

.G0k0 {
    transition: boarder 0.3s;
    background-color: #dbdb7b;
}

.G1k2 {
    transition: boarder 0.3s;
    background-color: #e79670;
}

.G-1k-1 {
    transition: boarder 0.3s;
    background-color: #cbdca9;
}

.G0k1 {
    transition: boarder 0.3s;
    background-color: #dce6f2;
}

.G-1k0 {
    transition: boarder 0.3s;
    background-color: #6d6d6d;
}
/*  */

/* Styles of MLT levels */
.G1 {
    transition: boarder 0.3s;
    background-color: #c2c5c8;
}

.G1_2 {
    transition: boarder 0.3s;
    background-color: #92e892;
}

.G0 {
    transition: boarder 0.3s;
    background-color: #dbdb7b;
}

.G-1_2 {
    transition: boarder 0.3s;
    background-color: #dce6f2;
}

.G-1 {
    transition: boarder 0.3s;
    background-color: #6d6d6d;
}
/*  */

.MLTI-level-G-dim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLTI-level-k-dim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLTI-level-space-bracket {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLTI-level-M-dim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLTI-level-I-dim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLTI-level-bracket {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLT-level-G-dim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLT-level-space-bracket {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLT-level-M-dim {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.MLT-level-bracket {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.parent-levels {
    display: flex;
    max-width: 83.77vw;
    height: 3.2vw;
    justify-content: flex-start;
    align-items: center;
    cursor: default;
    overflow-x: scroll;
    overflow-y: hidden;
}

.levels-container {
    display: flex;
    height: 2vw;
}

.levels {
    height: 3.2vw;
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5vw;
    white-space: nowrap;
}

ul {
    list-style-type: none;
}

.level-choice {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4vw;
}

.level-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.3vw;
}

.dropdown-service {
    display: none;
    position: absolute;
    background-color: deepskyblue;
    border: 0.1vw solid #ccc;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    top: 42%;
}

.dropdown-options {
    display: none;
    position: absolute;
    background-color: purple;
    border: 0.1vw solid #ccc;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    top: 42%;
}

.dropdown-mode {
    display: none;
    position: absolute;
    cursor: default;
    background-color: purple;
    border: 0.1vw solid #ccc;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    top: 42%;
}

.dropdown-MLTI-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropdown-MLT-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.text-mode-style {
    font-size: 0.7vw;
    white-space: nowrap;
}

.checkbox-mode-style {
    width: 1vw;
    height: 1vw;
}

.dropdown-L-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropdown-T-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropdown-M-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropdown-I-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropdown-G-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dropdown-k-modes {
    display: none;
    position: relative;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.MLTI-place {
    display: flex;
    flex-direction: column;
}

.MLT-place {
    display: flex;
    flex-direction: column;
}

.dropdown {
    display: none;
    position: absolute;
    right: 0;
    background-color: royalblue;
    border: 0.1vw solid #ccc;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    top: 39%;
}

.delete-account {
    display: flex;
    flex-direction: column;
}

.files {
    display: flex;
    flex-direction: column;
}

.save {
    display: flex;
    flex-direction: column;
}

.save-as {
    display: flex;
    flex-direction: column;
}

.list-dropdown {
    display: none;
    position: relative;
    border: none;
    list-style-type: none;
    padding: 0;
    width: 100%;
}

.delete-dropdown {
    display: none;
    position: relative;
    background-color: red;
    border: none;
    list-style-type: none;
    padding: 0;
    width: 100%;
}

.save-dropdown {
    display: none;
    position: relative;
    border: none;
    list-style-type: none;
    padding: 0;
    width: 100%;
}

.save-as-dropdown {
    display: none;
    position: relative;
    border: none;
    list-style-type: none;
    padding: 0;
    width: 100%;
}

.dropdown-connections {
    display: none;
    position: absolute;
    border: 0.1vw solid deepskyblue;
    list-style-type: none;
    z-index: 1;
    top: 42.6%;
}

.dropdown-laws {
    display: none;
    position: absolute;
    border: 0.1vw solid deepskyblue;
    list-style-type: none;
    z-index: 1;
    top: 42.6%;
}

.laws-list {
    background-color: white;
}

.dropdown-authors {
    display: none;
    position: absolute;
    background-color: deepskyblue;
    border: 0.1vw solid deepskyblue;
    list-style-type: none;
    z-index: 1;
    top: 42.6%;
}

.dropdown-MLTI-adding {
    position: absolute;
    background-color: darkgreen;
    border: 0.1vw solid #ccc;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    top: 99%;
}

.dropdown-MLT-adding {
    position: absolute;
    background-color: darkgreen;
    border: 0.1vw solid #ccc;
    z-index: 1;
    list-style-type: none;
    padding: 0;
    top: 99%;
}

.dropdown-reviewer {
    position: absolute;
    display: block;
    right: 0;
    visibility: hidden;
    background-color: white;
    list-style-type: none;
    z-index: 1;
    top: 82%;
    padding: 0;
}

.reviewer-boarder {
    border: 0.1vw solid black;
}

.invisible {
    display: none;
}

.dropdown li {
    margin: 0;
}

.parent:hover .dropdown {
    display: block;
}

.files:hover .list-dropdown {
    display: flex;
    align-items: center;
}

.parent:hover .dropdown-service {
    display: block;
}

.parent:hover .dropdown-options {
    display: block;
}

.parent:hover .dropdown-mode {
    display: block;
}

.parent:hover .dropdown-connections {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parent:hover .dropdown-laws {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parent:hover .dropdown-authors {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parent:hover .dropdown-MLTI-adding {
    display: block;
}

.parent:hover .dropdown-MLT-adding {
    display: block;
}

.user:hover .dropdown {
    display: block;
}

.delete-account:hover .delete-dropdown {
    display: block;
}

.save:hover .save-dropdown {
    display: flex;
    align-items: center;
}

.save-as:hover .save-as-dropdown {
    display: flex;
    align-items: center;
}

.L-modes:hover .dropdown-L-modes {
    display: block;
}

.L-modes:hover {
    height: auto;
}

.T-modes:hover .dropdown-T-modes {
    display: block;
}

.T-modes:hover {
    height: auto;
}

.M-modes:hover .dropdown-M-modes {
    display: block;
}

.M-modes:hover {
    height: auto;
}

.I-modes:hover .dropdown-I-modes {
    display: block;
}

.I-modes:hover {
    height: auto;
}

.G-modes:hover .dropdown-G-modes {
    display: block;
}

.G-modes:hover {
    height: auto;
}

.k-modes:hover .dropdown-k-modes {
    display: block;
}

.k-modes:hover {
    height: auto;
}

.MLTI-place:hover {
    height: auto;
}

.MLT-place:hover {
    height: auto;
}

.MLTI-place:hover .dropdown-MLTI-modes {
    display: block;
}

.MLT-place:hover .dropdown-MLT-modes {
    display: block;
}

.reviewer:hover .dropdown-reviewer {
    visibility: visible;
}

.MLT-style {
    display: flex;
    justify-content: center;
}

.system {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start;
    height: 1.6vw;
}

.file-upload {
    display: none;
}

.small-style {
    height: 1.5vw;
    display: flex;
    align-items: center;
}

.text-style {
    font-size: 1vw;
}

.input-style {
    width: 1vw;
    height: 1vw;
}

.level-color {
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-style {
    width: 3vw;
    height: 1.8vw;
}

.text-index-style {
    font-size: 1.5vw;
}

.adding-symbol {
    font-size: 1.66vw;
}

.step-choice {
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.apply-style {
    display: flex;
    justify-content: center;
    align-items: center;
}

#result_formula {
    background-color: white;
    border-radius: 0.5vw;
    height: 3vw;
    margin-right: 0.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#result {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 83.77vw;
    height: 3vw;
}

#see_one {
    margin-right: 0.1vw;
}

#see_square {
    margin-right: 0.1vw;
}

#label_see_one {
    margin-right: 0.3vw;
}

#label_see_square {
    margin-right: 0.3vw;
}

#law_visual {
    margin-right: 0.3vw;
}

#law_adding {
    margin-right: 0.3vw;
}

#new_law {
    margin-right: 1vw;
}

/* WORKING FIELD */

:root {
    --height: 85px;
    --color: #dbdb7b;
}

.clean-unit {
    background-color: white;
}

.unit {
    font-size: 13px;
    border: none;
    width: calc(var(--height) * 1.5);
    height: var(--height);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin: 0px 2px;
}

.board-active-unit {
    background-color: black;
    border: none;
    width: calc(var(--height) * 1.5);
    height: var(--height);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 2px;
}

.active-unit {
    font-size: 13px;
    color: black;
    border: none;
    width: calc(var(--height) * 1.5 - 4px);
    height: calc(var(--height) - 4px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: white;
}

.charact-selected-unit {
    background-color: var(--color) !important;
}

.selected-unit {
    font-size: 13px;
    color: black;
    border: none;
    width: calc(var(--height) * 1.5 - 4px);
    height: calc(var(--height) - 4px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--color);
}

.selected-0-unit {
    position: absolute;
    font-size: 13px;
    color: black;
    border: none;
    width: calc(var(--height) * 1.5 - 4px);
    height: calc(var(--height) - 4px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 0;
}

.selected-1-unit {
    position: absolute;
    border: none;
    width: calc((var(--height) * 1.5 - 4px) * 3 / 4);
    height: calc((var(--height) - 4px) * 3 / 4);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: white;
    z-index: 1;
}

.selected-2-unit {
    position: absolute;
    border: none;
    width: calc((var(--height) * 1.5 - 4px) / 2);
    height: calc((var(--height) - 4px) / 2);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: white;
    z-index: 2;
}

.selected-3-unit {
    position: absolute;
    border: none;
    width: calc((var(--height) * 1.5 - 4px) / 4);
    height: calc((var(--height) - 4px) / 4);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: white;
    z-index: 3;
}

.animated-selected-1-unit {
    transition: background-color 0.3s;
}

.animated-selected-2-unit {
    transition: background-color 0.3s;
}

.animated-selected-3-unit {
    transition: background-color 0.3s;
}

.active-center-unit {
    font-size: 13px;
    color: black;
    border: none;
    width: calc(var(--height) * 1.5 - 8px);
    height: calc(var(--height) - 8px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: white;
}

.selected-center-unit {
    font-size: 13px;
    color: black;
    border: none;
    width: calc(var(--height) * 1.5 - 8px);
    height: calc(var(--height) - 8px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--color);
}

.selected-0-center-unit {
    position: absolute;
    font-size: 13px;
    color: black;
    border: none;
    width: calc(var(--height) * 1.5 - 8px);
    height: calc(var(--height) - 8px);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--color);
    z-index: 0;
}

.unit:hover {
    background-color: var(--color); /* Can be changed */
    color: rgba(0, 0, 0, 1);
}

.active-unit:hover {
    background-color: var(--color); /* Can be changed */
}

.active-center-unit:hover {
    background-color: var(--color); /* Can be changed */
}

.animated-selected-1-unit:hover {
    background-color: var(--color); /* Can be changed */
}

.animated-selected-2-unit:hover {
    background-color: var(--color); /* Can be changed */
}

.animated-selected-3-unit:hover {
    background-color: var(--color); /* Can be changed */
}

.selected-4-unit:hover {
    background-color: var(--color); /* Can be changed */
}

.no-color {
    background-color: white !important;
}

.working-row {
    display: flex;
    justify-content: center;
    height: calc(3 * var(--height) / 4 + (4px * sqrt(2.21) - 0.5px) / 1.4);
}

#working_field {
    margin: 6.7vw 0.7vw 0.7vw 0.7vw;
    position: absolute;
}

#spatial_svg {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
}

#characteristic {
    display: none;
    position: absolute;
    background: linear-gradient(to right, #808080, #696969, #808080);
    list-style: none;
    z-index: 2;
}

.characteristic {
    display: grid;
    cursor: default;
    grid-template-columns: 7vw 2vw 2vw 2vw auto auto 3vw 3vw auto auto 2vw 0.5vw 0.5vw 6.5vw;
    grid-template-rows: auto auto auto auto 2vw;
    row-gap: 0.5vw;
    padding: 0.2vw 0.1vw 0.2vw 0.1vw;
}

.dimension {
    position: relative;
    display: grid;
    cursor: pointer;
    grid-template-columns: auto auto auto auto;
    column-gap: 0;
    grid-template-rows: auto;
    z-index: 4;
    pointer-events: none;
}

.M_dim {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.L_dim {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.T_dim {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.I_dim {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.LT_dimension {
    position: relative;
    display: grid;
    cursor: pointer;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    z-index: 4;
    pointer-events: none;
}

.L_dimension {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.T_dimension {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.item-1 {
    grid-column: 1 / 5;
    display: flex;
    align-items: center;
    justify-content: end;
}

.item-2 {
    grid-column: 5 / 11;
    font-size: 1vw;
    display: flex;
    align-items: center;
}

.item-3 {
    grid-column: 11 / 13;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-4 {
    grid-column: 13 / 15;
    display: flex;
    align-items: center;
    justify-content: center;
}

.row-1 {
    grid-row: 1;
}

.row-2 {
    grid-row: 2;
}

.row-3 {
    grid-row: 3;
}

.row-4 {
    grid-row: 4;
}

.btn-characteristic-1 {
    grid-row: 5;
    grid-column: 4;
}

.btn-characteristic-2 {
    grid-row: 5;
    grid-column: 7 / 9;
}

.btn-characteristic-3 {
    grid-row: 5;
    grid-column: 11;
}

.checkbox-style {
    width: 70%;
}

.background-style {
    background-color: white;
}

.btn-characteristic-style {
    font-size: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-characteristic-style:hover {
    background-color: mediumslateblue;
    color: white;
}

.input-characteristic-style {
    width: 100%;
    max-width: 24vw;
    height: 1.4vw;
}

.label-color {
    color: white;
}

.text-characteristic-style {
    font-size: 0.7vw;
}

#drawing_field {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.8;
}

#reviewer_div {
    display: flex;
    height: auto;
    width: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#reviewer_svg {
    position: absolute;
    height: 100%;
    width: 100%;
}

.level-line {
    margin: 10px 0px 10px 0px;
    height: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-unit-line {
    margin: 0px 2px 0px 2px;
    height: 4px;
    width: 10px;
    border: 1px solid black;
}

.unit-line {
    margin: 0px 2px 0px 2px;
    height: 4px;
    width: 10px;
    border: none;
}