@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&family=Pixelify+Sans:wght@400..700&display=swap');

:root{
    --main-font: "Pixelify Sans", Helvetica, sans-serif;
    --mono-font: "Noto Sans Mono", monospace;
    /* --background-color: #070907;
    --primary-color: #373737;
    --secondary-color: #1c1c1c;
    --accent-color: #92ff5c;
	--text-color: #eaf1ec; */
    --note-color: #5cb2ff;
    --warning-color: #ffec5c;
    --error-color: #ff5c5c;
    
}

@media only screen and (prefers-color-scheme: light) {
	:root {
		--text-color: #0e1510;
		--background-color: #f6f8f6;
		--primary-color: #c7c7c7;
		--secondary-color: #e3e3e3;
		--accent-color: #36a300;
	}
}

@media only screen and (prefers-color-scheme: dark) {
	:root {
		--text-color: #eaf1ec;
		--background-color: #070907;
		--primary-color: #373737;
		--secondary-color: #1c1c1c;
		--accent-color: #92ff5c;
	}
}



* {
    box-sizing: border-box;
    font-family: var(--main-font);
    app-region: no-drag;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0px;
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--main-font);
    font-weight: 400;
    font-size: 100%;
}

::-webkit-scrollbar {
    width: 10px;
    margin-right: 5px;
}

::-webkit-scrollbar-track {
    background: var(--background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    transition: 125ms;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

h1, h2, h3, h4, h5 {
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

h1 {
    font-size: 4.210rem; /* 67.36px */
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

h2 {
    font-size: 3.158rem; /* 50.56px */
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

h3 {
    font-size: 2.369rem; /* 37.92px */
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

h4 {
    font-size: 1.777rem; /* 28.48px */
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

h5 {
    font-size: 1.333rem; /* 21.28px */
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

small {
    font-size: 0.750rem; /* 12px */
    font-family: 'Pixelify Sans';
    font-weight: 700;
}

.material-symbols-rounded {
    font-size: 3.158rem;
    font-weight: 700;
	font-variation-settings: 
	'wght' 700;
}

button, input, select, textarea {
    transform: none;
    filter: none;
    transition: 250ms;
}

button:hover, input:hover, select:hover, textarea:hover {
    transform: translate(-5px, -5px);
    filter: drop-shadow(5px 5px var(--accent-color));
}

button:active, input:active, select:active, textarea:active {
    transform: translate(-2.5px, -2.5px);
    filter: drop-shadow(2.5px 2.5px var(--accent-color))
}

input:focus, select:focus, textarea:focus {
    transform: none;
    filter: none;
}

.error {
    background-color: var(--error-color);
    color: var(--primary-color);
	transition: 250ms;
}

.error:hover {
    background-color: var(--primary-color);
	color: var(--error-color);
    filter: drop-shadow(5px 5px var(--error-color));
}

.error:active {
    background-color: var(--primary-color);
	color: var(--error-color);
    filter: drop-shadow(2.5px 2.5px var(--error-color))
}

.special {
    background-color: var(--accent-color);
    color: var(--primary-color);
	transition: 250ms;
}

.normal {
    background-color: var(--primary-color);
    color: var(--text-color);
    transition: 250ms;
}

.special:hover, .normal:hover {
	background-color: var(--primary-color);
	color: var(--accent-color);
    transform: translate(-5px, -5px);
    filter: drop-shadow(5px 5px var(--accent-color));
}

.special:active, .normal:active {
    transform: translate(-2.5px, -2.5px);
    filter: drop-shadow(2.5px 2.5px var(--accent-color))
}

.drag_region {
    app-region: drag; 
    -webkit-user-select: none;
    user-select: none;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 30px;
    width: 100vw;
}

.drag_region:active {
    /* background-color: red; */
}

.main {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(300px, 20vw) 1fr minmax(400px, 30vw);
    border: 0px;
    background-color: var(--background-color);
}

.list_menu {
    grid-column: 1 / 2;
    height: 100%;
    width: 100%;
    padding:30px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    background-color: var(--background-color);
    filter: drop-shadow(0px 0px 10px black)
}

.list_menu_title {
    height: 75px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    border-radius: 25px;
    margin-top: 20px;
    padding: 10px;

    background-color: var(--secondary-color);
}

.list_menu_lists {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 25px;
    margin-bottom: 40px;

    background-color: var(--secondary-color)
}

.list_menu_list {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    border: none;
    outline: none;
    border-radius: 15px;

    background-color: var(--primary-color);

    transition: 250ms;
}

.list_menu_list:last-child {
    margin-bottom: 0px;
}

.list_menu_list_active {
    background-color: var(--accent-color);
}

.list_menu_list_active:hover {
    background-color: var(--primary-color);
	color: var(--accent-color);
}

.list_menu_list_active:hover > h3 {
    color: var(--accent-color);
}

.list_menu_item_title {
    margin: 0px;
	color: var(--text-color);
    justify-content: left;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list_menu_list:hover {
    color: var(--accent-color);   
}

.list_menu_list_active > .list_menu_item_title {
    color: var(--primary-color);
}

.list_menu_panel {
    width: 100%;
	height: 150px;
	margin-top: 40px;
	padding: 10px;
	border-radius: 25px;
	background-color: var(--secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

.list_menu_panel_button {
	width: 100%;
    height: 100%;
    border-radius: 15px;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list_menu_panel_button > .material-symbols-rounded {
    margin-right: 10px;
}

.main_view {
    grid-column: 2 / 3;
    width: 1fr;
    display: flex;
    flex-direction: column;
    padding: 50px;

    overflow-y: auto;

    /* overflow-x: hidden;
    overflow-y: auto; */
}

.list_name {
    width: 100%;
    height: 115px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 25px;
    padding-top: 20px;
    border-radius: 35px;
    margin-top: -15px;
    margin-bottom: 15px;
    background-color: var(--secondary-color);
}

.list_data {
    padding: 15px;
    width: 100%;
    height: auto;
    min-height: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 35px;
    background-color: var(--secondary-color);
}

.list_data_item {
    border: 0px;
    outline: 0px;
    width: 100%;
    height: 150px;
    margin-bottom: 15px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--primary-color);
    transition: 250ms;
}

.list_data_item:last-child {
    margin-bottom: 0px;
}

.list_data_item:hover {
    background-color: var(--primary-color);
}

.list_data_item_active:hover {
    background-color: var(--primary-color);
    color: var(--accent-color);
}

.list_data_item_active:hover > .list_data_item_title, .list_data_item_active:hover > .list_data_item_attribute {
    color: var(--accent-color)
}

.list_data_item_active {
    background-color: var(--accent-color);
}

.list_data_item_title {
    margin: 10px;
    margin-left: 15px;
    margin-bottom: 0px;
	color: var(--text-color);
    transition: 250ms;
}

.list_data_item_active > .list_data_item_title, .list_data_item:active > .list_data_item_title {
    color: var(--primary-color);
}

.list_data_item_attributes {
    margin: 0px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-family: var(--main-font);
	color: var(--text-color);
    transition: 250ms;
}

.list_data_item:hover > .list_data_item_attributes, .list_data_item:hover > .list_data_item_title {
    color: var(--accent-color);
}

.list_data_item_active > .list_data_item_attributes, .list_data_item:active > .list_data_item_attributes {
    color: var(--primary-color);
}

.list_data_item_active:hover > .list_data_item_attributes {
    color: var(--accent-color);
}

.list_data_item_attribute {
    margin: 0px;
    list-style: none;
    display: flex;
}

.list_data_item_attribute > p {
    margin: 0px;
    margin-right: 10px;
    font-size: 1.333rem
}

.edit_panel {
    grid-column: 3 / 4;
    height: 100%;
    width: 100%;
    padding:40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;

    background-color: var(--background-color);
    filter: drop-shadow(0px 0px 10px black)
}

.properties {
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 25px;

    margin-top: 10px;

    background-color: var(--secondary-color);
}

.edit_panel_attributes {
    width: auto;
    /* min-height: 150px; */
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: var(--secondary-color);
}

.edit_panel_attributes:last-child {
    margin-bottom: 0px;
}

.edit_panel_title {
    margin: 0px;
    margin-bottom: 10px;
}

.edit_panel_attributes > h3 {
    margin-left: 10px;
}

.edit_panel_item {
    width: 100%;
    height: auto;
    min-height: 100px;
    border-radius: 15px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: var(--primary-color);
}

.edit_panel_item:last-child {
    margin-bottom: 0px;
}

.edit_panel_item_title {
    margin: 0px;
    margin-bottom: 10px;
    font-size: 1.777rem;
}

.edit_panel_item_value {
    margin-left: 25px;
    /* width: 94%; */
    width: auto;
    min-width: 50px;
    min-height: 50px;
    font-size: 1.333rem;
    border: none;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    font-family: var(--main-font);
	color: var(--text-color);
	background-color: var(--secondary-color);
}

input.edit_panel_item_value {
	text-overflow: clip;
	overflow-x: auto;
}

.edit_panel_item_value:hover {
	background-color: var(--secondary-color);
}

.edit_panel_item_value::placeholder {
	color: var(--primary-color)
}

.edit_panel_item_value > .material-symbols-rounded {
    font-size: 3.158rem;
    font-weight: 700;
}

textarea.edit_panel_item_value {
    resize:vertical;
    min-height: 150px;
	padding-top: 10px;
	padding-bottom: 10px;
}

button.edit_panel_item_value {
	height: 50px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px;
	transition: 250ms;
	/* background-color: var(--background-color); */
}

button.edit_panel_item_value > span {
	color: var(--text-color);
	font-size: 3.158rem;
	font-variation-settings:
	'wght' 700;
	transition: 250ms;
}

button.edit_panel_item_value:hover > span {
	color: var(--accent-color);
}

.edit_panel_item_value_changed {
	background-color: var(--accent-color);
	color: var(--secondary-color)
}

.edit_panel_item_value_changed:hover {
    filter: drop-shadow(5px 5px var(--accent-color));
	background-color: var(--secondary-color);
	color: var(--accent-color);
}

button.edit_panel_item_value_changed > span {
	color: var(--secondary-color);
}

button.edit_panel_item_value_changed:hover > span{
	color: var(--primary-color);
}

select.edit_panel_item_value {
	transition: 250ms;
}

select.edit_panel_item_value > option {
	background-color: var(--secondary-color);
	color: var(--text-color);
	transition: 250ms;
}

.edit_panel_item_range {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.edit_panel_item_range > p {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 1.333rem;
}

.edit_panel_item_range_value {
    margin-left: 25px;
    margin-right: 25px;
    /* width: auto; */
    width: 100%;
    min-width: 50px;
    min-height: 50px;
    font-size: 1.333rem;
    border: none;
    outline: none;
    border-radius: 10px;
    padding-left: 10px;
    font-family: var(--main-font);
	background-color: var(--secondary-color);
	color: var(--text-color);
	transition: 250ms;
}

.edit_panel_item_range_value:last-child {
    margin-right: 0px;
}

.edit_panel_close {
	width: 100%;
	height: 150px;
	margin-top: 40px;
	padding: 10px;
	border-radius: 25px;
	background-color: var(--secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
}

.edit_panel_close_button > .material-symbols-rounded {
    font-size: 3.158rem;
    font-weight: 700;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.edit_panel_close_button {
	/* width: 1fr; */
	/* width: minmax(0.5fr, 1fr); */
	height: 100%;
	width: 100%;
	border-radius: 15px;
	border: none;
	outline: none;
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	font-size: 3.158rem;
	transition: 250ms;
}

.edit_panel_close_button:last-child {
    margin-left: 10px;
}

.edit_panel_close_button > h3 {
	font-size: 2.369rem;
    margin-top: 0px;
    margin-bottom: 0px;
}

.edit_panel_close_button_single {
	margin: 0px;
}

.edit_panel_close_button_single:last-child {
    margin: 0px;
}

.popup {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr minmax(200px, 5vw);
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100vw;

    /* padding: 50px; */

    border: none;
    outline: none;
    background-color: var(--background-color);
}

.popup_action {
    grid-row-end: -1;
    grid-column-end: -1;
    
    height: 100%;
    width: 100%;
    display: flex;

    align-items: center;
    padding: 50px;

    
    
}

.popup_action_close {
    border-radius: 15px;
	border: none;
	outline: none;
	display: flex;
    justify-self: flex-end;
	justify-content: center;
	align-items: center;
    padding: 25px;
	
	background-color: var(--accent-color);
	color: var(--primary-color);

	font-size: 3.158rem;
	transition: 250ms;
}

.popup_action_close > h3 {
    margin: 0px;
}

@media not screen and (min-width: 1280px) and (min-height: 820px) {
    .main {
        grid-template-columns: 1fr  minmax(400px, 30vw);
        grid-template-rows: minmax(150px, 10vh) 1fr;
    }

    .list_menu {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .list_menu > * {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 40px;
    }
    
    .list_menu:last-child {
        margin-right: 0px;
    }

    .list_menu_title {
        width: 300px;
    }

    .list_menu_lists {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        width: 1fr;
    }

    .list_menu_list {
        margin-right: 10px;
        min-width: 250px;
        margin-bottom: 0px;
    }

    .list_menu_list:last-child {
        margin-right: 0px;
    }

    .list_menu_panel {
        margin-right: 0px;
        width: 250px;
        height: 75px;
    }

    .main_view {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .edit_panel {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    
}