/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */
/* =============== ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ =============== */
/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */

:root {
    --main_bue: #3030c4;
}

/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */
/* =============== ГЛОБАЛЬНАЯ СТИЛИЗАЦИЯ =============== */
/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */

body, html {
    width: 100vw;
    height: 100vh;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */
/* =============== ЛОКАЛЬНАЯ СТИЛИЗАЦИЯ =============== */
/* VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV */

/* =============== Встречающий блок (выбор проекта) =============== */

.mb_proj_sel_cl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: 500ms all;
}

.mb_proj_sel_cl>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.title_proj_sel_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.title_proj_sel_cl>img {
    width: 12vh;
    height: 12vh;
    border-radius: 50%;
    background-color: white;
}

.title_proj_sel_cl>div {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}

.title_proj_sel_cl>div>h1 {
    font-size: 5vh;
    font-weight: bold;
    color: var(--main_bue);
    text-shadow: 0 0 7.5px black;
    margin: 0;
}

.title_proj_sel_cl>div>h2 {
    font-size: 3vh;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px black;
    margin: 0;
}

.but_proj_sel_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 75px;
}

.but_proj_sel_cl>div {
    width: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.but_proj_sel_cl>div:hover {
    cursor: pointer;
}

.but_proj_sel_cl>div>div {
    width: 10vh;
    height: 10vh;
}

.but_proj_sel_cl>div>div>svg {
    color: gray;
    transition: 500ms all;
}

.but_proj_sel_cl>div:hover>div>svg {
    color: var(--main_bue);
}

.but_proj_sel_cl>div>span {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    transition: 500ms all;
}

.but_proj_sel_cl>div:hover>span {
    color: var(--main_bue);
}





.reg_proj_sel_cl {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reg_proj_sel_cl>section:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.reg_proj_sel_cl>section:nth-child(1)>div:nth-child(1) {
    font-size: 2vh;
    color: gray;
    transition: 500ms all;
}

.reg_proj_sel_cl>section:nth-child(1)>div:nth-child(1):hover {
    cursor: pointer;
    color: var(--main_bue);
    text-decoration: underline;
}

.reg_proj_sel_cl>section:nth-child(1)>div:nth-child(2) {
    font-size: 2vh;
    color: var(--main_bue);
    transition: 500ms all;
}

.reg_proj_sel_cl>section:nth-child(1)>div:nth-child(2):hover {
    cursor: pointer;
    color: green;
    text-decoration: underline;
}

/* =============== РАБОЧЕЕ ПОЛЕ =============== */

main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(48, 47, 47);
}

/* ---------- Окно создания проекта ---------- */

#pr_cr_win_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    visibility: collapse;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 500ms all;
    z-index: 101;
}

#pr_cr_win_id>div{
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vh;
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 40px blue;
    background-color: black;
    gap: 15px;
    transform: scale(0.75);
    transition: 500ms all;
}

#pr_cr_win_id>div>span {
    font-size: 4vh;
    font-weight: bold;
    color: var(--main_bue);
}

.pr_cr_de_cl {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.pr_cr_de_cl>span {
    font-size: 2vh;
    color: gray;
    text-indent: 20px;
}

.pr_cr_de_cl>input {
    width: 35vw;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2vh;
    color: white;
}

.pr_cr_de_cl>select {
    width: calc(35vw + 20px);
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2vh;
    color: white;
}

.pr_cr_de_cl>select>option {
    font-size: 2vh;
    color: white;
    background: black;
}

.pr_cr_de_cl>textarea {
    width: calc(35vw - 5px);
    height: 15vh;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2vh;
    color: white;
    resize: none;
    scrollbar-gutter: stable;
}

.pr_cr_de_cl>textarea::-webkit-scrollbar {
    width: 14px;
}

.pr_cr_de_cl>textarea::-webkit-scrollbar-track {
    background: #9a9a9a;
    border-radius: 10px;
}

.pr_cr_de_cl>textarea::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
    border: 3px solid #9a9a9a;
    /* чтобы выглядел аккуратно на сером фоне */
}

.pr_cr_de_cl>textarea::-webkit-scrollbar-thumb:hover {
    background: #111;
}

.pr_cr_de_cl>textarea::-webkit-scrollbar-button:single-button {
    background: #9a9a9a;
    height: 14px;
}

.pr_cr_de_cl>textarea::-webkit-scrollbar-button:single-button:vertical:decrement {
    background:
        linear-gradient(135deg, transparent 55%, #000 56%) 6px 7px/6px 6px no-repeat,
        linear-gradient(225deg, transparent 55%, #000 56%) 8px 7px/6px 6px no-repeat,
        #9a9a9a;
}

.pr_cr_de_cl>textarea::-webkit-scrollbar-button:single-button:vertical:increment {
    background:
        linear-gradient(315deg, transparent 55%, #000 56%) 6px 5px/6px 6px no-repeat,
        linear-gradient(45deg, transparent 55%, #000 56%) 8px 5px/6px 6px no-repeat,
        #9a9a9a;
}

.pr_cr_de_cl>textarea {
    scrollbar-width: auto;
    scrollbar-color: #000 #9a9a9a;
}

.pr_cr_de_cl > textarea::-webkit-scrollbar-track{
  background: #9a9a9a;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.premium_content_cl {
    width: calc(100% - 45px);
    padding: 20px;
    border-radius: 1.5vh;
    background:  linear-gradient(45deg, rgba(0, 0, 255, 0.25), rgba(132, 0, 255, 0.25));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.premium_content_cl>span {
    font-size: 3vh;
    font-weight: bold;
    background: linear-gradient(90deg, blue, blueviolet);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pr_con_sett_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.pr_con_sett_cl>span {
    font-size: 2vh;
    color: gray;
    text-indent: 20px;
}

.pr_con_sett_cl>div {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pr_con_sett_cl>div>select {
    width: 85%;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2vh;
    color: white;
}

.pr_con_sett_cl>div>select>option {
    font-size: 2vh;
    color: white;
    background: rgb(69, 31, 104);
}

.pr_con_sett_cl>div>div {
    width: 5vh;
    height: 5vh;
}

.pr_con_sett_cl>div>div>svg {
    color: gray;
    transition: 500ms all;
}

.pr_con_sett_cl>div>div:hover>svg {
    cursor: pointer;
    color: var(--main_bue);
}

.pr_cr_man_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pr_cr_man_cl>div {
    padding: 15px;
    font-size: 3vh;
    font-weight: bold;
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 500ms all;
}

.pr_cr_man_cl>div:hover {
    cursor: pointer;
}

.pr_cr_man_cl>div:nth-child(1) {
    width: 25%;
    background: gray;
}

.pr_cr_man_cl>div:nth-child(1):hover {
    background: var(--main_bue);
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    color: black;
}

.pr_cr_man_cl>div:nth-child(2) {
    width: 50%;
    background: blue;
}

.pr_cr_man_cl>div:nth-child(2):hover {
    background: green;
    box-shadow: 0 0 5px green, 0 0 10px green, 0 0 20px green;
}

/* ---------- Окно открытия проекта ---------- */

#pr_open_win_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: collapse;
    z-index: 102;
}

#pr_open_win_id>div {
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    width: 30vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: rgb(49, 46, 46);
    transform: translateX(-30vw);
    transition: 500ms all;
}

#pr_open_win_id>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: white;
}

#pr_open_win_id>div>section {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    height: 80vh;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

#pr_open_win_id>div>section::-webkit-scrollbar {
    width: 14px;
}

#pr_open_win_id>div>section::-webkit-scrollbar-track {
    background: #9a9a9a;
    border-radius: 10px;
}

#pr_open_win_id>div>section::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 10px;
    border: 3px solid #9a9a9a;
    /* чтобы выглядел аккуратно на сером фоне */
}

#pr_open_win_id>div>section::-webkit-scrollbar-thumb:hover {
    background: #111;
}

#pr_open_win_id>div>section::-webkit-scrollbar-button:single-button {
    background: #9a9a9a;
    height: 14px;
}

#pr_open_win_id>div>section::-webkit-scrollbar-button:single-button:vertical:decrement {
    background:
        linear-gradient(135deg, transparent 55%, #000 56%) 6px 7px/6px 6px no-repeat,
        linear-gradient(225deg, transparent 55%, #000 56%) 8px 7px/6px 6px no-repeat,
        #9a9a9a;
}

#pr_open_win_id>div>section::-webkit-scrollbar-button:single-button:vertical:increment {
    background:
        linear-gradient(315deg, transparent 55%, #000 56%) 6px 5px/6px 6px no-repeat,
        linear-gradient(45deg, transparent 55%, #000 56%) 8px 5px/6px 6px no-repeat,
        #9a9a9a;
}

#pr_open_win_id>div>section {
    scrollbar-width: auto;
    scrollbar-color: #000 #9a9a9a;
}

#pr_open_win_id>div>section::-webkit-scrollbar-track{
  background: #9a9a9a;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

#pr_open_win_id>div>div {
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    background-color: gray;
    font-size: 2.5vh;
    font-weight: bold;
    color: white;
    margin-top: 15px;
    margin-left: auto;
    transition: 500ms all;
}

#pr_open_win_id>div>div:hover {
    cursor: pointer;
    background-color: var(--main_bue);
}

.my_project_cl {
    width: calc(100% - 5px);
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(128, 128, 128, 0.15);
    padding-bottom: 5px;
}

.my_project_cl>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.my_project_cl>div:nth-child(1)>span:nth-child(1) {
    font-size: 2.5vh;
    color: var(--main_bue);
    text-shadow: 0 0 5px black;
    transition: 300ms all;
}

.my_project_cl>div:nth-child(1)>span:nth-child(1):hover {
    cursor: pointer;
    text-decoration: underline;
    color: blueviolet;
}

.my_project_cl>div:nth-child(1)>span:nth-child(2) {
    font-size: 2vh;
    color: gray;
    text-shadow: 0 0 3px black;
}

.my_project_cl>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
    transition: 300ms all;
}

.my_project_cl>div:nth-child(2):hover {
    cursor: pointer;
}

.my_project_cl>div:nth-child(2)>div {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background-color: white;
    transition: 300ms all;
}

.my_project_cl>div:nth-child(2):hover>div {
    background-color: var(--main_bue);
}

/* =============== ЗАГРУЗКА ЗАПРОСА =============== */

#download_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    visibility: collapse;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 102;
}

#download_window_id>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#download_window_id>div>img {
    width: 6vh;
    height: 6vh;
}

#download_window_id>div>span {
    font-size: 4vh;
    font-weight: bold;
    color: white;
}

/* =============== НАСТРОЙКИ МОДУЛЕЙ И СТРАНИЦ =============== */

#tran_bet_sec_pag_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 28vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    transition: 500ms all;
    z-index: 10;
}

#tran_bet_sec_pag_id>section:nth-child(1) {
    width: 25vw;
    height: 100vh;
    background-color: black;
    padding: 15px;
    overflow: hidden;
}

#tran_bet_sec_pag_id>section:nth-child(2) {
    width: 3vw;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

#tran_bet_sec_pag_id>section:nth-child(2)>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#tran_bet_sec_pag_id>section:nth-child(2)>div:nth-child(1)>div:nth-child(1) {
    width: 1.5vw;
    height: 2.5vw;
    background-color: black;
}

#tran_bet_sec_pag_id>section:nth-child(2)>div:nth-child(1)>div:nth-child(2) {
    width: 1.5vw;
    height: 2.5vw;
    border-bottom-right-radius: 1vw;
    border: 2px solid gray;
    border-left: none;
    border-top: none;
    background-color: black;
}


#tran_bet_sec_pag_id>section:nth-child(2)>div:nth-child(2) {
    width: 25px;
    height: 3vh;
    border-left: 2px solid gray;
    border-top: 2px solid gray;
    border-top-left-radius: 1vw;
    transform: translateY(-1.5px) translateX(-1px);
    box-shadow: 0px -12px 0px black;
}

#tran_bet_sec_pag_id>section:nth-child(2)>div:nth-child(3) {
    width: 1px;
    height: calc(100vh - 3vh - 2.5vw + 4px);
    border-left: 2px solid gray;
    transform: translateY(-2px) translateX(-1px);
}

/* Название и краткое описание проекта */

.tran_bet_sec_pag_one_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(128, 128, 128, 0.25);
    padding-bottom: 5px;
}

.tran_bet_sec_pag_one_cl>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.tran_bet_sec_pag_one_cl>div:nth-child(1)>span:nth-child(1) {
    font-size: 2.5vh;
    color: var(--main_bue);
    text-shadow: 0 0 5px black;
}

.tran_bet_sec_pag_one_cl>div:nth-child(1)>span:nth-child(2) {
    font-size: 2vh;
    color: gray;
    text-shadow: 0 0 3px black;
}

.tran_bet_sec_pag_one_cl>div:nth-child(2) {
    width: 4vh;
    height: 4vh;
}

.tran_bet_sec_pag_one_cl>div:nth-child(2)>svg {
    color: gray;
    transition: 300ms all;
}
.tran_bet_sec_pag_one_cl>div:nth-child(2)>svg:hover {
    cursor: pointer;
    color: var(--main_bue);
}

/* Описание проекта */

.tran_bet_sec_pag_two_cl {
    width: 100%;
    height: 10vh;
    padding-bottom: 5px;
    border-bottom: 2px solid rgba(128, 128, 128, 0.25);
    margin-bottom: 5px;
}

.tran_bet_sec_pag_two_cl>span {
    font-size: 1.85vh;
    color: gray;
}

/* Поиск и подсказки */

.tran_bet_sec_pag_three_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.tran_bet_sec_pag_three_cl>div:nth-child(1) {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    border: 2px solid rgba(128, 128, 128, 0.25);
    border-radius: 10px;
    padding: 5px;
    transition: 300ms all;
}

.tran_bet_sec_pag_three_cl>div:nth-child(1):hover {
    border: 2px solid rgba(128, 128, 128, 1);
}

.tran_bet_sec_pag_three_cl>div:nth-child(1)>input {
    font-size: 2vh;
    font-weight: bold;
    color: white;
    border: none;
    outline: none;
    background: none;
    padding-left: 2.5px;
}

.tran_bet_sec_pag_three_cl>div:nth-child(1)>div {
    width: 3.5vh;
    height: 3.5vh;
}

.tran_bet_sec_pag_three_cl>div:nth-child(1)>div>svg {
    color: gray;
    transition: 300ms all;
}

.tran_bet_sec_pag_three_cl>div:nth-child(1)>div>svg:hover {
    cursor: pointer;
    color: var(--main_bue);
}

.tran_bet_sec_pag_three_cl>div:nth-child(2) {
    width: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.tran_bet_sec_pag_three_cl>div:nth-child(2)>div {
    width: 4vh;
    height: 4vh;
}

.tran_bet_sec_pag_three_cl>div:nth-child(2)>div>svg {
    color: gray;
    transition: 300ms all;
}

.tran_bet_sec_pag_three_cl>div:nth-child(2)>div>svg:hover {
    cursor: pointer;
    color: var(--main_bue);
}

/* Переключения между модулями и страницами */

.tran_bet_sec_pag_four_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 2px solid rgba(128, 128, 128, 0.25);
    padding-bottom: 5px;
    margin-top: 25px;
}

.tran_bet_sec_pag_four_cl>span {
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.tran_bet_sec_pag_four_cl>span:hover {
    cursor: pointer;
    color: white;
}

.tran_bet_sec_pag_four_cl>div {
    position: absolute;
    border: 2px solid rgba(128, 128, 128, 0.25);
    border-bottom: none;
    width: 7.5vw;
    height: 5vh;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transform: translateY(-0.65vh) translateX(0vw);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: 500ms all;
}

.tran_bet_sec_pag_four_cl>div>div {
    width: 100%;
    height: 10px;
    background-color: black;
    transform: translateY(5px);
}

/* Блоки взаимодействия "Модули, "Frontend", "Backend" */

.tran_bet_sec_pag_five_cl {
    width: 100%;
    height: 60vh;
    border-bottom: 2px solid rgba(128, 128, 128, 0.25);
    display: flex;
    flex-direction: row;
    align-items: start;
    /* perspective: 800px; */
    transform-style: preserve-3d;
}

.tran_bet_sec_pag_five_cl>section {
    position: absolute;
    left: 2.5vw;
    width: 25vw;
    height: 95%;
    padding-top: 10px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 5px;
    overflow: hidden;
    transition: 500ms all;
    background-color: black;
}

.tran_bet_sec_pag_five_cl>section>section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 2.5px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: gray transparent;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar {
    width: 10px;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-track {
    background: transparent;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-thumb:hover {
    background: #111;
    background-clip: content-box;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-button {
    background: transparent;
    height: 12px;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-button:single-button {
    background-color: transparent;
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-color: rgba(0, 0, 0, 0.6);
}

.tran_bet_sec_pag_five_cl>section>section::-webkit-scrollbar-button:single-button:vertical:increment {
    background-color: rgba(0, 0, 0, 0.6);
}

#module_list_id {
    transform: rotateY(0deg) translateZ(12.5vw) translateX(-3.5vw);
}

#frontend_list_id {
    transform: rotateY(90deg) translateZ(12.5vw) translateX(-3.5vw);
}

#backend_list_id {
    transform: rotateY(180deg) translateZ(12.5vw) translateX(-3.5vw);
}

.string_creation_cl {
    width: auto;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    order: 1000;
}

.string_creation_cl:hover {
    cursor: pointer;
}

.string_creation_cl>span {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.string_creation_cl:hover>span {
    color: var(--main_bue);
}

.string_creation_cl>div {
    width: 2vh;
    height: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    border: 2px solid gray;
    border-radius: 50%;
    transition: 300ms all;
}

.string_creation_cl:hover>div {
    border-color: var(--main_bue);
    color: var(--main_bue);
}

/* ------ Создание модуля ------ */

#windows_module_creation_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 102;
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
}

#windows_module_creation_id>div {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vh;
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 40px blue;
    background-color: black;
    gap: 15px;
    transform: scale(0.75) translateY(-10vh);
    transition: 500ms all;
}

#windows_module_creation_id>div>span {
    font-size: 4vh;
    font-weight: bold;
    color: var(--main_bue);
}

#windows_module_creation_id>div>section {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#windows_module_creation_id>div>section>span {
    font-size: 2.5vh;
    color: gray;
    text-indent: 20px;
}

#windows_module_creation_id>div>section>input {
    width: 35vw;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2.5vh;
    color: white;
}

#windows_module_creation_id>div>section>select {
    width: calc(35vw + 20px);
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2.5vh;
    color: white;
}

#windows_module_creation_id>div>section>select>option {
    font-size: 2.5vh;
    color: white;
    background: black;
}

.w_m_c_man_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    gap: 15px;
}

.w_m_c_man_cl>div {
    padding: 10px;
    font-size: 2.5vh;
    font-weight: bold;
    color: white;
    border-radius: 7.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 500ms all;
}

.w_m_c_man_cl>div:hover {
    cursor: pointer;
}

.w_m_c_man_cl>div:nth-child(1) {
    width: 25%;
    background: gray;
}

.w_m_c_man_cl>div:nth-child(1):hover {
    background: var(--main_bue);
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    color: black;
}

.w_m_c_man_cl>div:nth-child(2) {
    width: 50%;
    background: blue;
}

.w_m_c_man_cl>div:nth-child(2):hover {
    background: green;
    box-shadow: 0 0 5px green, 0 0 10px green, 0 0 20px green;
}

.w_m_c_man_cl>div:nth-child(3) {
    width: 50%;
    background: green;
}

.w_m_c_man_cl>div:nth-child(3):hover {
    background: blue;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
}

.w_m_c_man_cl>div:nth-child(4) {
    width: 50%;
    background: red;
}

.w_m_c_man_cl>div:nth-child(4):hover {
    background: blue;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
}

/* Модули */

.block_row_module_cl {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.block_row_module_cl>div:nth-child(1) {
    width: 5vh;
    height: 5vh;
}

.block_row_module_cl>div:nth-child(1)>svg {
    color: gray;
    transition: 300ms all;
}

.block_row_module_cl>div:nth-child(2) {
    width: 16vw;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.block_row_module_cl>div:nth-child(2)>span:nth-child(1) {
    font-size: 2vh;
    color: var(--main_bue);
    transition: 300ms all;
}

.block_row_module_cl>div:nth-child(2)>span:nth-child(1):hover {
    cursor: pointer;
    color: blueviolet;
    text-decoration: underline;
}

.block_row_module_cl>div:nth-child(2)>span:nth-child(2) {
    font-size: 1.75vh;
    color: gray;
}

.block_row_module_cl>div:nth-child(3) {
    width: 2.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5px;
}

.block_row_module_cl>div:nth-child(3):hover {
    cursor: pointer;
}

.block_row_module_cl>div:nth-child(3)>div {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background-color: white;
    transition: 300ms all;
}   

.block_row_module_cl>div:nth-child(3):hover>div  {
    background-color: var(--main_bue);
}

/* ------ Создание раздела страниц ------ */

#windows_cr_sec_pages_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 102;
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
}

#windows_cr_sec_pages_id>div {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vh;
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 40px blue;
    background-color: black;
    gap: 15px;
    transform: scale(0.75);
    transition: 500ms all;
}

#windows_cr_sec_pages_id>div>span {
    font-size: 4vh;
    font-weight: bold;
    color: var(--main_bue);
}

#windows_cr_sec_pages_id>div>section {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#windows_cr_sec_pages_id>div>section>span {
    font-size: 2.5vh;
    color: gray;
    text-indent: 20px;
}

#windows_cr_sec_pages_id>div>section>input {
    width: 35vw;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2.5vh;
    color: white;
}

#windows_cr_sec_pages_id>div>article {
    width: calc(35vw + 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#windows_cr_sec_pages_id>div>article>section {
    width: 47.5%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

#windows_cr_sec_pages_id>div>article>section>span {
    font-size: 2.5vh;
    color: gray;
    text-indent: 20px;
}


#windows_cr_sec_pages_id>div>article>section>select {
    width: 100%;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2.5vh;
    color: white;
}

#windows_cr_sec_pages_id>div>article>section>select>option {
    font-size: 2.5vh;
    color: white;
    background: black;
}

/* Frontend */

.front_sec_main_cl {
    width: 91.5%;
    height: calc(5vh + 2.5px);
    display: flex;
    flex-direction: column;
    align-items: start;
    border: 2px dashed rgba(128, 128, 128, 0.25);
    border-radius: 10px;
    padding-bottom: 5px;
    overflow: hidden;
    transition: 500ms all;
}

.front_sec_main_cl>div {
    width: calc(97.5% - 5px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    gap: 5px;
}

.front_sec_main_cl>div>div:nth-child(1) {
    width: 5vh;
    height: 5vh;
}

.front_sec_main_cl>div>div:nth-child(1)>svg {
    color: gray;
    transition: 300ms all;
}

.front_sec_main_cl>div>div:nth-child(2) {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.front_sec_main_cl>div>div:nth-child(2)>span:nth-child(1) {
    font-size: 2vh;
    color: var(--main_bue);
    transition: 300ms all;
}

.front_sec_main_cl>div>div:nth-child(2)>span:nth-child(1):hover {
    cursor: pointer;
    color: blueviolet;
    text-decoration: underline;
}

.front_sec_main_cl>div>div:nth-child(2)>span:nth-child(2) {
    font-size: 1.75vh;
    color: gray;
}

.front_sec_main_cl>div>div:nth-child(3) {
    width: 4vh;
    height: 4vh;
}

.front_sec_main_cl>div>div:nth-child(3)>svg {
    color: gray;
    transition: 300ms all;
}

.front_sec_main_cl>div>div:nth-child(3)>svg:hover {
    cursor: pointer;
    color: var(--main_bue);
}

.front_sec_main_cl>div>div:nth-child(4) {
    width: 3vh;
    height: 3vh;
    border: 3px solid gray;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

.front_sec_main_cl>div>div:nth-child(4)>span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    transform: translateY(1.5px) translateX(0.5px);
    transition: 300ms all;
}

.front_sec_main_cl>div>div:nth-child(4):hover {
    cursor: pointer;
    border-color: white;
}

.front_sec_main_cl>div>div:nth-child(4):hover>span {
    color: white;
}

.front_sec_main_cl>section {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-left: 10%;
}

/* Кастомная страница */

.page_block_cl {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.page_block_cl>div:nth-child(1) {
    width: 4vh;
    height: 4vh;
}

.page_block_cl>div:nth-child(1)>svg {
    color: gray;
}

.page_block_cl>div:nth-child(2) {
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.page_block_cl>div:nth-child(2)>span:nth-child(1) {
    font-size: 1.75vh;
    color: var(--main_bue);
    transition: 300ms all;
}

.page_block_cl>div:nth-child(2)>span:nth-child(1):hover {
    cursor: pointer;
    color: blueviolet;
    text-decoration: underline;
}

.page_block_cl>div:nth-child(2)>span:nth-child(2) {
    font-size: 1.5vh;
    color: gray;
}

.page_block_cl>div:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.page_block_cl>div:nth-child(3):hover {
    cursor: pointer;
}

.page_block_cl>div:nth-child(3)>div {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: white;
    transition: 300ms all;
}

.page_block_cl>div:nth-child(3):hover>div {
    background-color: var(--main_bue);
}

/* Граница страниц */

.page_border_cl {
    width: 95%;
    height: 2px;
    border-radius: 1px;
    background-color: rgba(128, 128, 128, 0.15);
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Создание страницы */

.creating_a_page_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    order: 1000;
}

.creating_a_page_cl:hover {
    cursor: pointer;
}

.creating_a_page_cl>span {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.creating_a_page_cl:hover>span {
    color: white;
}

.creating_a_page_cl>div {
    width: 2vh;
    height: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid gray;
    border-radius: 50%;
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.creating_a_page_cl:hover>div {
    color: white;
    border-color: white;
    /* visibility: hidden; */
}

/* ------ Создание страницы ------ ------ */

#page_creation_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 102;
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
}

#page_creation_window_id>div {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 2vh;
    box-shadow: 0 0 10px blue, 0 0 20px blue, 0 0 40px blue;
    background-color: black;
    gap: 15px;
    transform: scale(0.75);
    transition: 500ms all;
}

#page_creation_window_id>div>span {
    font-size: 4vh;
    font-weight: bold;
    color: var(--main_bue);
}

#page_creation_window_id>div>section {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#page_creation_window_id>div>section>span {
    font-size: 2.5vh;
    color: gray;
    text-indent: 20px;
}

#page_creation_window_id>div>section>input {
    width: 35vw;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2.5vh;
    color: white;
}

#page_creation_window_id>div>article {
    width: calc(35vw + 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#page_creation_window_id>div>article>section {
    width: 47.5%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

#page_creation_window_id>div>article>section>span {
    font-size: 2.5vh;
    color: gray;
    text-indent: 20px;
}


#page_creation_window_id>div>article>section>select {
    width: 100%;
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    font-size: 2.5vh;
    color: white;
}

#page_creation_window_id>div>article>section>select>option {
    font-size: 2.5vh;
    color: white;
    background: black;
}

/* ------ Создание Backend плагина ------ */

#backend_plugin_block_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
    z-index: 11;
}

#backend_plugin_block_id>div {
    padding: 20px;
    border-radius: 2vh;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: black;
}

#backend_plugin_block_id>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: var(--main_bue);
}

#backend_plugin_block_id>div>div {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
}

/* Список плагинов */

.list_plugins_cl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.list_plugins_cl>span {
    font-size: 2vh;
    font-weight: bold;
    color: white;
}

.list_plugins_cl>div {
    padding: 10px;
    border-radius: 10px;
    width: 30vw;
    height: 60vh;
    background-color: rgba(128, 128, 128, 0.10);
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

.list_plugins_cl>div>div {
    gap: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.list_plugins_cl>div::-webkit-scrollbar {
    width: 10px;
}

.list_plugins_cl>div::-webkit-scrollbar-track {
    background: transparent;
}

.list_plugins_cl>div::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.list_plugins_cl>div::-webkit-scrollbar-thumb:hover {
    background: #111;
    background-clip: content-box;
}

.list_plugins_cl>div::-webkit-scrollbar-button {
    background: transparent;
    height: 12px;
}

.list_plugins_cl>div::-webkit-scrollbar-button:single-button {
    background-color: transparent;
}

.list_plugins_cl>div::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-color: rgba(0, 0, 0, 0.6);
}

.list_plugins_cl>div::-webkit-scrollbar-button:single-button:vertical:increment {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Карточка плагина */

.plugin_card_cl {
    width: 30vw;
    height: 60vh;
}

.plugin_card_cl>section:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 2px solid rgba(128, 128, 128, 0.25);
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(1)>div {
    width: 3.5vh;
    height: 3.5vh;
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(1)>span {
    font-size: 2.5vh;
    color: var(--main_bue);
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(2)>div {
    width: 4vh;
    height: 4vh;
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(2)>div>svg {
    color: gray;
    transition: 300ms all;
}

.plugin_card_cl>section:nth-child(1)>div:nth-child(2)>div>svg:hover {
    cursor: pointer;
    color: var(--main_bue);
}

.plugin_card_cl>section:nth-child(2) {
    width: 100%;
    height: 10vh;
    margin-bottom: 10px;
}

.plugin_card_cl>section:nth-child(2)>span {
    font-size: 2vh;
    color: gray;
}

.plugin_card_cl>section:nth-child(3) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.plugin_card_cl>section:nth-child(3)>span {
    font-size: 2vh;
    font-weight: bold;
    color: white;
}

.plugin_card_cl>section:nth-child(3)>div {
    padding: 10px;
    border-radius: 10px;
    width: calc(30vw - 20px);
    height: 37.5vh;
    background-color: rgba(128, 128, 128, 0.10);
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar {
    width: 10px;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-track {
    background: transparent;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-thumb:hover {
    background: #111;
    background-clip: content-box;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-button {
    background: transparent;
    height: 12px;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-button:single-button {
    background-color: transparent;
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-color: rgba(0, 0, 0, 0.6);
}

.plugin_card_cl>section:nth-child(3)>div::-webkit-scrollbar-button:single-button:vertical:increment {
    background-color: rgba(0, 0, 0, 0.6);
}

.plugin_card_cl>section:nth-child(3)>div>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-bottom: 150px
}

/* --- Название плагина --- */
.title_plugin_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 10px;
    border-radius: 5px;
    background-color: black;
    transform: translateX(5px);
}

.title_plugin_cl>span {
    font-size: 2vh;
    color: gray;
}

.title_plugin_cl>input {
    width: calc(100% - 10px);
    font-size: 2vh;
    color: white;
    border: 2px solid gray;
    border-radius: 5px;
    padding: 2.5px;
    padding-left: 5px;
    background-color: rgba(128, 128, 128, 0.10);
}

/* --- Проверочный запрос --- */

.verification_request_cl {
    width: calc(100% - 10px);
    height: 3vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 10px;
    border-radius: 5px;
    background-color: black;
    transform: translateX(5px);
    overflow: hidden;
    transition: 500ms all;
}

.verification_request_cl>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.verification_request_cl>div>span {
    font-size: 2vh;
    color: gray;
}

.verification_request_cl>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.verification_request_cl>div>div>div {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    padding: 2.5px;
    border-radius: 5px;
    transition: 500ms all;
}

.verification_request_cl>div>div>div:nth-child(2) {
    color: white;
    border-color: white;
}

.verification_request_cl>div>div>div:hover {
    cursor: pointer;
    border-color: var(--main_bue);
    color: var(--main_bue);
}

.verification_request_cl>section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.verification_request_cl>section>input {
    width: 65%;
    font-size: 2vh;
    color: white;
    border: 2px solid gray;
    border-radius: 5px;
    padding: 2.5px;
    padding-left: 5px;
    background-color: rgba(128, 128, 128, 0.10);
}

.verification_request_cl>section>div {
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    padding: 2.5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid gray;
    border-radius: 5px;
    transition: 300ms all;
}

.verification_request_cl>section>div:hover {
    cursor: pointer;
    color: var(--main_bue);
    border-color: var(--main_bue);
}

/* --- Выбор базы данных --- */

.choosing_a_database_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    padding: 10px;
    border-radius: 5px;
    background-color: black;
    transform: translateX(5px);
    z-index: 103;
}

.choosing_a_database_cl>span {
    font-size: 2vh;
    color: gray;
}

.choosing_a_database_cl>section {
    width: 45%;
}

.choosing_a_database_cl>section>section {
    width:42.5%;
    height: 4vh;
    position: absolute;
    border: 2px solid gray;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    transform: translateY(-1vh);
    transition: 500ms all;
    background-color: black;
    overflow: hidden;
}

.choosing_a_database_cl>section>section:hover {
    cursor: pointer;
    height: 30vh;
}

.choosing_a_database_cl>section>section:hover>div:nth-child(1)>div:nth-child(2) {
    transform: rotateZ(180deg);
    color: white;
}

.choosing_a_database_cl>section>section:hover>div:nth-child(1)>div:nth-child(2)>svg {
    color: white;
}

/* --- Защитные вставки в тексте запроса --- */

.protective_inserts_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 10px;
    border-radius: 5px;
    background-color: black;
    transform: translateX(5px);
    transition: 500ms all;
    overflow: hidden;
}

.protective_inserts_cl>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.protective_inserts_cl>div>span {
    font-size: 2vh;
    color: gray;
}

.protective_inserts_cl>div>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.protective_inserts_cl>div>div>div {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    border-radius: 5px;
    transition: 500ms all;
    padding: 2.5px;
}

.protective_inserts_cl>div>div>div:hover {
    cursor: pointer;
    border-color: var(--main_bue);
    color: var(--main_bue);
}

.protective_inserts_cl>section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.protective_inserts_cl>section>span {
    font-size: 2vh;
    color: gray;
}

.protective_inserts_cl>section>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.protective_inserts_cl>section>section>div {
    width: 35px;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    border: 2px solid gray;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

.protective_inserts_cl>section>section>div:hover {
    cursor: pointer;
    border-color: var(--main_bue);
    color: var(--main_bue);
}

.protective_inserts_cl>section>section>span {
    font-size: 2vh;
    font-weight: bold;
    color: white;
}

/* --- Необходимые данные --- */

.required_data_cl {
    width: calc(100% - 10px);
    padding: 10px;
    border-radius: 5px;
    background-color: black;
    transform: translateX(5px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.required_data_cl>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.required_data_cl>div:nth-child(1)>div {
    width: 3vh;
    height: 3vh;
}

.required_data_cl>div:nth-child(1)>div>svg {
    color: gray;
}

.required_data_cl>div:nth-child(1)>span {
    font-size: 2vh;
    color: gray;
    text-decoration: underline;
}

.required_data_cl>div:nth-child(2) {
    width: 3vh;
    height: 3vh;
}

.required_data_cl>div:nth-child(2)>svg {
    color: gray;
    transition: 300ms all;
}

.required_data_cl>div:nth-child(2)>svg:hover {
    cursor: pointer;
    color: var(--main_bue);
}

/* --- Настройки плагина --- */

.pl_conf_yes_no_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    padding: 10px;
    border-radius: 5px;
    background-color: black;
    transform: translateX(5px);
}

.pl_conf_yes_no_cl>span {
    font-size: 2vh;
    color: gray;
}

.pl_conf_yes_no_cl>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.pl_conf_yes_no_cl>div>div {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    border-radius: 5px;
    padding: 2.5px;
    transition: 500ms all;
}

.pl_conf_yes_no_cl>div>div:hover {
    cursor: pointer;
    border-color: var(--main_bue);
    color: var(--main_bue);
}

/* --- Разделение плагинов --- */

.plugin_separation_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.plugin_separation_cl>div {
    height: 2px;
    border-radius: 1px;
    background-color: rgba(128, 128, 128, 0.25);
}

.plugin_separation_cl>span {
    font-size: 1.75vh;
    color: gray;
}

/* --- Добавить данные запроса --- */

.add_request_data_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 300ms all;
}

.add_request_data_cl:hover {
    cursor: pointer;
}

.add_request_data_cl>span {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.add_request_data_cl:hover>span {
    color: white;
}

.add_request_data_cl>div {
    width: 2vh;
    height: 2vh;
    border-radius: 50%;
    border: 2px solid gray;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

.add_request_data_cl:hover>div {
    border-color: white;
}

.add_request_data_cl>div>span {
    font-size: 1.75vh;
    font-weight: bold;
    color: gray;
    transform: translateX(0.25px) translateY(1px);
    transition: 300ms all;
}

.add_request_data_cl:hover>div>span {
    color: white;
}




/* --- Карточка плагина --- */

.plugin_card_cl>section:nth-child(4) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: calc(2.5vh - 5px);
}

.plugin_card_cl>section:nth-child(4)>div {
    padding: 7.5px;
    padding-left: 22.5px;
    padding-right: 22.5px;
    border-radius: 10px;
    background-color: gray;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    transition: 300ms all;
}

.plugin_card_cl>section:nth-child(4)>div:hover {
    cursor: pointer;
}

.plugin_card_cl>section:nth-child(4)>div:nth-child(1):hover {
    background-color: var(--main_bue);
    box-shadow: 0 0 2.5px blue, 0 0 5px blue, 0 0 10px blue;
}

.plugin_card_cl>section:nth-child(4)>div:nth-child(2):hover {
    background-color: green;
    box-shadow: 0 0 2.5px green, 0 0 5px green, 0 0 10px green;
}

/* ----- Строка плагина ----- */

.plugin_string_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 15px;
    transition: 300ms all;
    padding: 2.5px;
    padding-right: 5px;
}

.plugin_string_cl:hover {
    background-color: rgba(128, 128, 128, 0.25);
}

.plugin_string_cl>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.plugin_string_cl>div:nth-child(1)>div {
    width: 3vh;
    height: 3vh;
}

.plugin_string_cl>div:nth-child(1)>span {
    font-size: 2vh;
    color: gray;
    transition: 300ms all;
}

.plugin_string_cl>div:nth-child(1)>span:hover {
    cursor: pointer;
    color: var(--main_bue);
    text-decoration: underline;
}

.plugin_string_cl>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.plugin_string_cl>div:nth-child(2)>span {
    font-size: 1.75vh;
    font-weight: bold;
    color: green;
}

.plugin_string_cl>div:nth-child(2)>div {
    width: 2.25vh;
    height: 2.25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid gray;
    border-radius: 50%;
    font-size: 1.5vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.plugin_string_cl>div:nth-child(2)>div:hover {
    cursor: pointer;
    color: var(--main_bue);
    border-color: var(--main_bue);
}

/* --- карточка базы данных --- */

.progr_lan_card_cl {
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transform: translateX(5px);
}

.progr_lan_card_cl>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
}

.progr_lan_card_cl>div:nth-child(1)>div {
    width: 4vh;
    height: 4vh;
}

.progr_lan_card_cl>div:nth-child(1)>span {
    font-size: 2vh;
    color: white;
    transition: 500ms all;
}

.progr_lan_card_cl:hover>div:nth-child(1)>span {
    cursor: pointer;
    color: var(--main_bue);
}

.progr_lan_card_cl>div:nth-child(2) {
    width: 2vh;
    height: 2vh;
    transition: 500ms all;
}

.progr_lan_card_cl>div:nth-child(2)>svg {
    color: gray;
    transition: 500ms all;
}

/* серверный плагин проекта */

.project_server_plugin_cl {
    width: 90% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    overflow-y: none;
}

.project_server_plugin_cl>div:nth-child(1) {
    width: 4vh !important;
    height: 4vh !important;
}

.project_server_plugin_cl>div:nth-child(2) {
    width: calc(100% - 8vh) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: start !important;
}

.project_server_plugin_cl>div:nth-child(2)>span:nth-child(1) {
    font-size: 2vh !important;
    font-weight: bold !important;
    color: white !important;
}

.project_server_plugin_cl>div:nth-child(2)>span:nth-child(2) {
    font-size: 1.75vh !important;
    color: gray !important;
}

.project_server_plugin_cl>div:nth-child(3) {
    width: 4vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2.5px !important;
}

.project_server_plugin_cl>div:nth-child(3):hover {
    cursor: pointer !important;
}

.project_server_plugin_cl>div:nth-child(3)>div {
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background-color: white !important;
    transition: 300ms all !important;
}

.project_server_plugin_cl>div:nth-child(3):hover>div {
    background-color: var(--main_bue) !important;
}

/* Выбор яхыка программирования */

.choice_prog_lan_cl {
    width: 97.5%;
    height: 7vh;
    z-index: 103;
    transform: translateX(-2%);
}

.choice_prog_lan_cl>section {
    position: absolute;
    width: 47.5%;
    height: 7vh;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid gray;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    background-color: black;
    transition: 500ms all;
}

.choice_prog_lan_cl>section:nth-child(1):hover {
    height: 32vh;
}

.choice_prog_lan_cl>section:nth-child(2):hover {
    height: 28vh;
}

.choice_prog_lan_cl>section:nth-child(3):hover {
    height: 60vh;
}


.choice_prog_lan_cl>section>section:nth-child(2) {
    margin-bottom: 1vh;
}

.choice_prog_lan_cl>section:hover>section:nth-child(2)>div:last-child {
    transform: rotateZ(180deg);
}

.choice_prog_lan_cl>section:hover>section:nth-child(2)>div:last-child>svg {
    color: white;
}

.choice_prog_lan_cl>section:nth-child(3) {
    left: 52.5%;
}

.choice_prog_lan_cl>section>span {
    width: 100%;
    font-size: 2.5vh;
    font-weight: bold;
    color: white;
    text-align: center;
}

.ch_prog_lan_bl_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.ch_prog_lan_bl_cl:hover {
    cursor: pointer;
}

.ch_prog_lan_bl_cl>div:nth-child(1)>svg {
    width: 3.5vh;
    height: 3.5vh;
}

.ch_prog_lan_bl_cl>div:nth-child(2)>svg {
    width: 3.5vh;
    height: 3.5vh;
}

.ch_prog_lan_bl_cl>div:nth-child(3)>svg {
    width: 3.5vh;
    height: 3.5vh;
}

.ch_prog_lan_bl_cl>span {
    width: 80%;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    text-align: start;
    padding-left: 5px;
    transition: 500ms all;
}

.ch_prog_lan_bl_cl:hover>span {
    color: var(--main_bue);
}

.ch_prog_lan_bl_cl>div:last-child {
    width: 2vh;
    height: 2vh;
    transition: 500ms all;
}

.ch_prog_lan_bl_cl>div:last-child>svg {
    color: gray;
    transition: 500ms all;
}

/* --- Панель управления "Выйти", "Сохранение", "Скачать" --- */

.cont_pan_log_out_save_down_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.cont_pan_log_out_save_down_cl>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.c_p_l_o_s_d_but_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 7.5px;
    background-color: var(--main_bue);
}

.c_p_l_o_s_d_but_cl:hover {
    cursor: pointer;
}

.c_p_l_o_s_d_but_cl>span {
    font-size: 1.75vh;
    font-weight: bold;
    color: white;
}

.c_p_l_o_s_d_but_cl>div {
    width: 3vh;
    height: 3vh;
}

/* ------ Настройки страницы ------ */

#page_settings_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
    z-index: 11;
}

#page_settings_id>div {
    padding: 20px;
    background-color: black;
    border-radius: 2vh;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#page_settings_id>div>span {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#page_settings_id>div>section:last-child {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
}

#page_settings_id>div>section:last-child>div {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    background-color: gray;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    transition: 300ms all;
}

#page_settings_id>div>section:last-child>div:nth-child(2) {
    background-color: rgb(148, 15, 15);
}

#page_settings_id>div>section:last-child>div:nth-child(3) {
    background-color: var(--main_bue);
}

#page_settings_id>div>section:last-child>div:hover {
    cursor: pointer;
    background-color: var(--main_bue);
}

.page_set_title_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.page_set_title_cl>span {
    font-size: 2vh;
    color: gray;
}

.page_set_title_cl>input {
    width: 27.5vw;
    border: 2px solid gray;
    border-radius: 5px;
    padding: 2.5px;
    padding-left: 5px;
    background: none;
    font-size: 2vh;
    color: white;
}

.page_set_img_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.page_set_img_cl>div:nth-child(1) {
    width: 47.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.page_set_img_cl>div:nth-child(1)>img {
    width: 100%;
    height: 25vh;
    border: 2px solid gray;
    border-radius: 5px;
    object-fit: contain;
}

.page_set_img_cl>div:nth-child(1)>span {
    width: 100%;
    font-size: 2vh;
    color: white;

    /* Ограничение текста */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page_set_img_cl>div:nth-child(2) {
    width: 47.5%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.page_set_img_cl>div:nth-child(2)>span {
    font-size: 2vh;
    font-weight: bold;
    color: gray;
}

.page_set_img_cl>div:nth-child(2)>div {
    width: 80%;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    background-color: gray;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    transition: 300ms all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_set_img_cl>div:nth-child(2)>div:hover {
    cursor: pointer;
    background-color: var(--main_bue);
}

/* ----- Показ блока хранения файлов ----- */

.disp_file_stor_sec_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.disp_file_stor_sec_cl>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    border: 2px solid gray;
    border-radius: 10px;
    padding: 2.5px;
    padding-right: 10px;
    transform: translateX(-15px);
    transition: 300ms all;
}

.disp_file_stor_sec_cl>div:hover {
    cursor: pointer;
    border-color: var(--main_bue);
}

.disp_file_stor_sec_cl>div>div {
    width: 3.5vh;
    height: 3.5vh;
}

.disp_file_stor_sec_cl>div>div>svg {
    color: gray;
    transition: 300ms all;
}

.disp_file_stor_sec_cl>div:hover>div>svg {
    color: var(--main_bue);
}

.disp_file_stor_sec_cl>div>span {
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.disp_file_stor_sec_cl>div:hover>span {
    color: var(--main_bue);
}

/* ------ Хранилище файлов ------ */

#file_storage_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
    z-index: 11;
}

#file_storage_id>div {
    width: 80%;
    height: 80%;
    padding: 25px;
    border-radius: 3vh;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: black;
}

#file_storage_id>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: white;
}

.search_filtre_cl {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search_filtre_cl>div:nth-child(1) {
    width: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.5px;
    border: 2px solid gray;
    border-radius: 10px;
}

.search_filtre_cl>div:nth-child(1)>input {
    width: 95%;
    font-size: 2vh;
    color: white;
    background: none;
    border: none;
    outline: none;
    padding-left: 5px;
}

.search_filtre_cl>div:nth-child(1)>div {
    width: 4vh;
    height: 4vh;
}

.search_filtre_cl>div:nth-child(1)>div:hover {
    cursor: pointer;
}

.search_filtre_cl>div:nth-child(1)>div>svg {
    color: gray;
    transition: 300ms all;
}

.search_filtre_cl>div:nth-child(1)>div:hover>svg {
    color: var(--main_bue);
}

.filter_unit_cl {
    width: 5vh;
    height: 5vh;
    border: 2px solid gray;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

.filter_unit_cl:hover {
    cursor: pointer;
    border-color: var(--main_bue);
}

.filter_unit_cl>span {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

.filter_unit_cl:hover>span {
    color: var(--main_bue);
}

.filter_unit_cl>svg {
    color: gray;
    transition: 300ms all;
}

.filter_unit_cl:hover>svg {
    color: var(--main_bue);
}

.file_manag_panel_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.file_manag_panel_cl>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.fi_ma_pa_button_cl {
    padding: 7.5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 7.5px;
    background-color: gray;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    transition: 300ms all;
}

.fi_ma_pa_button_cl:hover {
    background-color: var(--main_bue);
    cursor: pointer;
}

.fi_ma_pa_button_cl>div {
    width: 3vh;
    height: 3vh;
}

.fi_ma_pa_button_cl>span {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

.fi_ma_pa_button_cl:hover>span {
    color: white;
}

.list_of_files_cl {
    width: 100%;
    height: 75%;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #000 transparent;
}

.list_of_files_cl::-webkit-scrollbar {
    width: 10px;
}

.list_of_files_cl::-webkit-scrollbar-track {
    background: transparent;
}

.list_of_files_cl::-webkit-scrollbar-thumb {
    background: #000;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.list_of_files_cl::-webkit-scrollbar-thumb:hover {
    background: #111;
    background-clip: content-box;
}

.list_of_files_cl::-webkit-scrollbar-button {
    background: transparent;
    height: 12px;
}

.list_of_files_cl::-webkit-scrollbar-button:single-button {
    background-color: transparent;
}

.list_of_files_cl::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-color: rgba(0, 0, 0, 0.6);
}

.list_of_files_cl::-webkit-scrollbar-button:single-button:vertical:increment {
    background-color: rgba(0, 0, 0, 0.6);
}

.list_of_files_cl>section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-wrap: wrap;
}

.li_fi_block_cl {
    width: calc(20% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5px;
    padding: 5px;
}

.li_fi_block_cl>img {
    width: 100%;
    height: 20vh;
    border: 2px solid gray;
    border-radius: 5px;
    object-fit: contain;
    transition: 300ms all;
}

.li_fi_block_cl>img:hover {
    cursor: pointer;
    box-shadow: 0 0 2.5px blue, 0 0 5px blue, 0 0 10px blue;
    border-color: var(--main_bue);
}

.li_fi_block_cl>span {
    width: 100%;
    font-size: 2vh;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.li_fi_block_cl>div {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: translateY(-5px);
}

.li_fi_block_cl>div>div:nth-child(1) {
    width: 8vh;
    height: 8vh;
    scale: 1.2;
    transform: translateX(-5px) translateY(5px);
}

.li_fi_block_cl>div>div:nth-child(1)>svg {
    color: gray;
}

.li_fi_block_cl>div>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
}

.li_fi_block_cl>div>div:nth-child(2)>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding-top: 7.5px;
}

.li_fi_block_cl>div>div:nth-child(2)>div:nth-child(1)>span {
    font-size: 2vh;
    color:  gray;
}

.li_fi_block_cl>div>div:nth-child(2)>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.li_fi_block_cl>div>div:nth-child(2)>div:nth-child(2)>div {
    padding: 2.5px;
    padding-left: 7.5px;
    padding-right: 7.5px;
    border-radius: 5px;
    background-color: gray;
    font-size: 1.5vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

.li_fi_block_cl>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(1):hover {
    cursor: pointer;
    background-color: var(--main_bue);
    color: white;
}

.li_fi_block_cl>div>div:nth-child(2)>div:nth-child(2)>div:nth-child(2):hover {
    cursor: pointer;
    background-color: rgb(117, 23, 23);
    color: white;
}

/* --- Удаление файла --- */

#file_deletion_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 105;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
}

#file_deletion_id>div {
    padding: 20px;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: black;
    border-radius: 2vh;
}

#file_deletion_id>div>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#file_deletion_id>div>img:nth-child(2) {
    width: 25vw;
    height: 30vh;
    border: 2px solid gray;
    border-radius: 5px;
    object-fit: contain;
}

#file_deletion_id>div>span:nth-child(3) {
    font-size: 2vh;
    color: white;
    margin-top: 5px;
    margin-bottom: 20px;
}

#file_deletion_id>div>section:nth-child(4) {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#file_deletion_id>div>section:nth-child(4)>div {
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: gray;
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

#file_deletion_id>div>section:nth-child(4)>div:nth-child(1):hover {
    cursor: pointer;
    background-color: var(--main_bue);
    color: white;
}

#file_deletion_id>div>section:nth-child(4)>div:nth-child(2):hover {
    cursor: pointer;
    background-color: red;
    color: white;
}

/* --- Переименовка файла --- */

#renaming_a_file_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 105;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
}

#renaming_a_file_id>div {
    padding: 20px;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: black;
    border-radius: 2vh;
}

#renaming_a_file_id>div>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#renaming_a_file_id>div>input:nth-child(2) {
    width: 50vw;
    background: none;
    border: 2px solid gray;
    outline: none;
    border-radius: 10px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2vh;
    color: white;
}

#renaming_a_file_id>div>section:nth-child(3) {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#renaming_a_file_id>div>section:nth-child(3)>div {
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: gray;
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

#renaming_a_file_id>div>section:nth-child(3)>div:nth-child(1):hover {
    cursor: pointer;
    background-color: var(--main_bue);
    color: white;
}

#renaming_a_file_id>div>section:nth-child(3)>div:nth-child(2):hover {
    cursor: pointer;
    background-color: red;
    color: white;
}




/* ------ WEB SEO данные ------ */

#web_seo_data_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: collapse;
    opacity: 0;
    z-index: 105;
    transition: 500ms all;
}

#web_seo_data_id>div {
    padding: 20px;
    border-radius: 2vh;
    box-shadow: 0 0 5px green, 0 0 10px green, 0 0 20px green;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 105;
}

#web_seo_data_id>div>b {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#web_seo_data_id>div>span {
    width: 100%;
    font-size: 2.25vh;
    color: gray;
    margin-top: 10px;
    text-align: start;
}

#web_seo_data_id>div>div {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 7.5px;
    background-color: gray;
    font-size: 2vh;
    font-weight: bold;
    color: black;
    margin-top: 25px;
    transition: 300ms all;
}

#web_seo_data_id>div>div:hover {
    cursor: pointer;
    color: white;
    background-color: green;
}

.sett_web_seo_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.sett_web_seo_cl>div:nth-child(1) {
    width: 6vh;
    height: 2.75vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    border: 2px solid gray;
    border-radius: calc(1.5vh + 2px);
    padding: 0.125vh;
    transition: 500ms all;
}

.sett_web_seo_cl>div:nth-child(1):hover {
    cursor: pointer;
    border-color: white;
}

.sett_web_seo_cl>div:nth-child(1)>div {
    width: 2.75vh;
    height: 2.75vh;
    border-radius: 50%;
    background-color: gray;
    transition: 500ms all;
}

.sett_web_seo_cl>div:nth-child(1):hover>div {
    background-color: white;
}

.sett_web_seo_cl>textarea {
    width: 25vw;
    height: 10vh;
    border: 2px solid gray;
    border-radius: 5px;
    background: none;
    outline: none;
    font-size: 2vh;
    color: white;
    padding: 2.5px;
    padding-left: 5px;
    padding-right: 5px;
    resize: none;
}

.sett_web_seo_cl>input {
    width: 25vw;
    height: 3vh;
    border: 2px solid gray;
    border-radius: 5px;
    background: none;
    outline: none;
    font-size: 2vh;
    color: white;
    padding: 2.5px;
    padding-left: 5px;
    padding-right: 5px;
}

.sett_web_seo_cl>span {
    width: 100%;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    text-align: start;
    transition: 500ms all;
}

/* ------ Удаление страницы/раздела/модуля ------ */

#deleting_something_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 105;
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
}

#deleting_something_id>div {
    padding: 30px;
    border-radius: 2vh;
    background-color: black;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#deleting_something_id>div>span:nth-child(1) {
    font-size: 3vh;
    font-weight: bold;
    color: white;
}

#deleting_something_id>div>span:nth-child(2) {
    font-size: 2vh;
    color: gray;
}

#deleting_something_id>div>span:nth-child(3) {
    font-size: 2vh;
    color: var(--main_bue);
}

#deleting_something_id>div>section {
    width: 25vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
}

#deleting_something_id>div>section>div {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 5px;
    background-color: gray;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    transition: 500ms all;
}

#deleting_something_id>div>section>div:nth-child(2) {
    background-color: red;
}

#deleting_something_id>div>section>div:hover {
    cursor: pointer;
    background-color: var(--main_bue);
}

/* ---------- ВХОД (ВРЕМЕННЫЙ) ---------- */

#temporary_entrance_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    visibility: collapse;
    opacity: 0;
    transition: 500ms all;
    z-index: 101;
}

#temporary_entrance_id>div {
    padding: 20px;
    border-radius: 2vh;
    box-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 20px blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background-color: black;
}

#temporary_entrance_id>div>span {
    font-size: 2.5vh;
    font-weight: bold;
    color: white;
}

#temporary_entrance_id>div>input {
    background: none;
    border: 2px solid gray;
    border-radius: 7.5px;
    padding: 2.5px;
    padding-left: 5px;
    font-size: 2.5vh;
    font-weight: bold;
    color: white;
}

#temporary_entrance_id>div>section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#temporary_entrance_id>div>section>div {
    padding: 7.5px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: gray;
    border-radius: 10px;
    font-size: 2.5vh;
    font-weight: bold;
    color: white;
    transition: 500ms all;
}

#temporary_entrance_id>div>section>div:nth-child(2) {
    background-color: green;
}

#temporary_entrance_id>div>section>div:hover {
    cursor: pointer;
    background-color: var(--main_bue);
}