:root {
	--out-col: #888888;
	--bg-col: #1b1b1b;
	--bg-alt: #2e2e2e;
	--text-col: #ffffff;
	--danger-col: #fc4e4e;

	--trans-col: #00000000;
	--hover-light: #ffffff33;
	--hover-display: #ffffff88;
	--popup-overlay: #0c0c0c88;
	--hover-border: #ffffff15;
	--insert-blink: #ffffff11;
	--insert-blink-active: #ffffffff;
	--dialog-hover: #bbbbbb;

	--conflict: #f1d94c;
	--conflict-bg: #ffd90045;
}

html {
	scroll-behavior: smooth !important;
}

body {
	background-color: var(--bg-col);
	font-family: "Roboto Mono";
	margin: 0;
}

button, input, label, textarea {
	font-family: "Roboto Mono";
	outline: none;
	color: var(--text-col);
}

svg, path {
	fill: var(--text-col);
}

.display-details {
	position: absolute;
	left: 5%;
	padding: 15px;
	display: flex;
	z-index: 2;
	flex-direction: column;
	color: var(--text-col);
	transition-property: all;
	transition-duration: .3s;
	transition-delay: 0s;
}

.display-details .scriptr {
	font-size: 24px;
}

.display-details .scene-name {
	font-size: 16px;
}

.navbar:hover ~ .display-details {
	left: 15%;
	background-color: var(--hover-display);
	border-bottom-right-radius: 20px;

	transition: all .3s;
}

.navbar {
	position: absolute;
	width: 5%;
	height: 100vh;
	background-color: var(--bg-alt);
	z-index: 2;
	transition-property: width;
	transition-duration: .3s;
	transition-delay: 0s;
}

.nav-element {
	max-width: 100%;
	width: 100%;
	background-color: var(--trans-col);
	border: none;
	text-align: left;
	font-size: 18px;
	color: var(--text-col);
	overflow: hidden;
}

.nav-element:hover {
	background-color: var(--hover-light);
}

.nav-element-heading {
	display: flex;
	padding-top: 30px;
	padding-bottom: 30px;
	justify-content: center;
}

.navbar:hover {
	width: 15%;
	transition-property: width;
	transition-duration: .3s;
	transition-delay: 0s;
}

.navbar:hover .nav-element .nav-element-heading {
	justify-content: space-between;
	padding-inline: 10%;
}

.navbar:hover .nav-element .nav-element-heading label {
	display: inherit;
	opacity: 100%;
}

.nav-element-heading label {
	display: none;
	opacity: 0%;
}

.navbar-scenes {
	height: 84px;
	transition-property: height;
	transition-duration: .8s;
}

.navbar-scenes:hover {	
	height: 400px;

	transition-property: height;
	transition-duration: 1s;
}

.scenes-holder {
	width: 100%;
	height: 300px;
	display: none;
	flex-direction: column;

	overflow-y: auto;
	scrollbar-width: none;
}

.navbar-scenes:hover .scenes-holder{
	display: flex;
}

.act {
	display: flex;
	flex-direction: column;

	width: 100%;
	text-align: right;
}

.act hr {
	width: 80%;
	color: var(--out-col);
}

.navbar-script {
	position: absolute;
	bottom: 10%;
}

.navbar-settings {
	position: absolute;
	bottom: 0;
}

.navbar .navbar-settings .nav-element-heading .settings-logo svg {
	transform: rotate(0deg);
	transition: transform .5s;
}

.navbar:hover .navbar-settings .nav-element-heading .settings-logo svg {
	transform: rotate(180deg);
	transition: transform .5s;
}

.scenes-holder button {
	margin-inline: 25px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	text-align: right;
	background-color: var(--trans-col);
	border: none;
	color: var(--dialog-hover);
	margin-right: 25px;
}

.scenes-holder .scene-button {
	border-left: 1px solid var(--out-col);
}

.scenes-holder button:hover {
	background-color: var(--hover-light);
}

.popup-darken {
	position: absolute;
	display: inherit;
	z-index: 2;
	width: 100vw;
	height: 100vh;
	backdrop-filter: blur(2px);
	background-color: var(--popup-overlay);
}

.popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1%;
	border-radius: 10px;
	background-color: var(--bg-col);
	border: 2px solid var(--out-col);
	z-index: 2;
}

.file-popup {
	width: 50vw;
	height: 50vh;
	margin: 0;

	padding: 0;

	display: flex;
}

.file-popup .random-image {
	max-width: 50%;
	height: 100%;
	overflow: hidden;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;

	border-right: 1px solid var(--out-col);
}

.file-popup .random-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.file-popup .random-image p {
	position: absolute;
	bottom: 0;
	left: 15;
	color: #FFFFFF;

	padding: 5px;
	border-radius: 5px;
	background-color: var(--popup-overlay);
}

.file-popup .file-details {
	width: 50%;
}

.file-popup .file-details .logo {
	display: flex;

	margin: 25px;
}

.file-details .logo svg {
	width: 32px;
	height: 32px;
	margin: 6px;
}

.file-details .logo label {
	width: 100%;
	font-size: 32px;
	margin-left: 10px;

	display: flex;
	justify-content: space-between;
}

.file-details .logo label button {
	aspect-ratio: 1/1;
}

.file-details .logo label button svg {
	width: 16px;
	height: 16px ;
}

.file-details .actions,
.file-details .recents,
.file-details .new-project {
	width: 80%;
	margin-inline: 30px;
	margin-bottom: 30px;
}

.recents {
	display: none;
}

.file-details .actions label,
.file-details .recents label,
.file-details .new-project label {
	font-size: 18px;
}

.file-details .actions .buttons,
.file-details .recents .scripts-holder {
	display: flex;
	flex-direction: column;

	color: var(--text-col);
	list-style: none;
	width: fit-content;
}

.file-details .actions li,
.file-details .recents li {
	background-color: var(--trans-col);
	border: none;
	color: var(--dialog-hover);
}

.file-details .actions li::before,
.file-details .recents li::before {
	content: "\2023";
	margin-right: 0.5em;
}

.file-details .actions li:hover,
.file-details .recents li:hover{
	list-style-type: "\2023";
	color: var(--text-col);
}

.file-details .new-project {
	display: flex;
	flex-direction: column;
	height: 30%;
}

.file-details .new-project input {
	background-color: var(--trans-col);
	border: 1px solid var(--out-col);
	border-radius: 5px;
	padding: 5px;

	margin-top: 10px;
	margin-bottom: 10px;

	width: 100%;
}

.file-details .new-project .buttons {
	display: flex;
	justify-content: space-between;
}

.file-details .new-project .buttons button {
	background-color: var(--trans-col);
	outline: none;
	border: 1px solid var(--out-col);
	border-radius: 5px;
	padding: 5px;

	width: 45%;
}

.file-details .new-project .buttons button:hover {
	background-color: var(--bg-alt);
}

.file-details .new-project p {
	font-size: 12px;
	color: var(--text-col);
}

.file-details .links {
	margin-inline: 30px;
	width: 50%;

	display: flex;

	position: absolute;
	bottom: 10;
}

.file-details .links .bar {
	padding-right: 10px;
	margin-right: 10px;
	border-right: 1px solid var(--out-col);
}

.file-details .links label {
	font-size: 12px;
}

.new-scene-popup {
	display: flex;
	width: 50vw;
	height: 50vh;
}

.new-scene-popup .scene-details {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.new-scene-popup .scene-details input,
.new-scene-popup .scene-details textarea {
	background-color: var(--trans-col);
	outline: none;
	width: 95%;
	color: var(--text-col);
	border: 1px solid var(--out-col);
	border-radius: 5px;
}

.new-scene-popup .scene-details input {
	height: 20%;
	max-height: 40px;
	padding: 1%;
}

.new-scene-popup .scene-details textarea {
	height: 80%;
	font-size: 14px;
	padding: 2%;
	resize: none;
}

.new-scene-popup .scene-details .buttons {
	display: flex;
	justify-content: space-evenly;
}

.new-scene-popup .scene-details button {
	background-color: var(--trans-col);
	outline: none;
	width: 40%;
	align-self: center;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	padding: 1%;
	border-radius: 5px;
}

.new-scene-popup .scene-details button:hover {
	background-color: var(--bg-alt);
}

.new-scene-popup .scene-details .buttons .delete-button:hover {
	border: 1px solid var(--danger-col);
	color: var(--danger-col);
}

.new-scene-popup .right-half {
	width: 50%;
	height: 100%;
	border-left: 1px solid var(--out-col);
	padding-left: 25px;
}

.new-scene-popup .right-half .scene-spec {
	width: 100%;
	height: 45%;
	border-top: 1px solid var(--out-col);
	padding-top: 10px;
	margin-top: 10px;
}

.new-scene-popup .right-half .scene-spec .act-scene {
	display: flex;
	flex-direction: row;
	justify-content: left;
	margin-top: 5px;
}

.new-scene-popup .right-half .scene-spec .act-scene input {
	border: 1px solid var(--out-col);
	outline: none;
	margin-right: 20px;
	margin-left: 8px;
	border-radius: 5px;
	background-color: var(--trans-col);
	-moz-appearance: textfield;
}

.new-scene-popup .right-half .scene-spec .act-scene input[type=text] {
	text-align: left;
	padding-inline: 5px;
}

.new-scene-popup .right-half .scene-spec .act-scene input[type=number] {
	width: 10%;
	text-align: center;
	padding-inline: 1px;
}

.new-scene-popup .right-half .scene-spec .act-scene input[type=number]::-webkit-inner-spin-button, 
.new-scene-popup .right-half .scene-spec .act-scene input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    appearance: none;
    margin: 0; 
}

.new-scene-popup .right-half .scene-spec textarea {
	width: 95%;
	height: 80%;
	resize: none;
	background-color: var(--trans-col);
	border: 1px solid var(--out-col);
	border-radius: 5px;
	margin-top: 15px;
	padding: 10px;
}

.new-scene-popup .character-selection {
	width: 100%;
	height: 45%;
	color: var(--text-col);

	overflow: hidden;
}

.character-holder {
	margin-top: 10px;
	margin-bottom: 10px;

	height: 80%;

	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: thin;
}

.character-selection label {
	font-size: 16px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

.close-menu {
	aspect-ratio: 1/1;
	background-color: var(--trans-col);
	border: 1px solid var(--out-col);
	border-radius: 100%;
	float: right;
}

.close-menu:hover {
	border: 1px solid var(--danger-col);
}

.close-menu:hover svg {
	fill: var(--danger-col);
}

.character-display {
	border-radius: 5px;
	font-size: 14px;
	color: var(--text-col);
	background-color: var(--trans-col);
	padding: 5px;
	margin-top: 5px;
	margin-right: 10px;
	border: 1px solid var(--out-col);
	width: fit-content;
}

.character-display:hover {
	background-color: var(--bg-alt);
}

.warning {
	background-color: var(--warn);
}

.scene-action-popup {
	width: 25vw;
	height: 10vh;
	color: var(--text-col);
	display: flex;
	flex-direction: column;
}

.scene-action-popup label {
	border-bottom: 1px solid var(--out-col);
	height: 80%;
	padding-right: 35px;
}

.scene-action-popup label button {
	border-radius: 100%;
	width: auto;
	position: absolute;
	top: 0;
	right: 10;
}

.scene-action-popup .scene-actions {
	display: flex;
	justify-content: space-evenly;
}

.scene-action-popup button {
	background-color: var(--trans-col);
	width: 30%;
	align-self: center;
	margin-top: 10px;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	padding: 1%;
	padding-inline: 2%;
	resize: none;
	border-radius: 5px;
}

.scene-action-popup button:hover {
	background-color: var(--bg-alt);
}

.characters-popup {
	display: flex;
	width: 50vw;
	height: 30vh;
	justify-content: center;
}

.characters-popup .character-list {
	width: 50%;
	height: 80%;
}

.characters-popup .character-list label {
	color: var(--text-col);
	display: flex;
	justify-content: space-between;
	margin-right: 10px;
}

.characters-popup .character-list .characters {
	height: 70%;
	padding-top: 5px;
}

.characters-popup .character-details {
	width: 50%;
	height: 100%;
	border-left: 1px solid var(--out-col);
}

.characters-popup .character-details .display-mode {
	width: 90%;
	height: 100%;
	margin-left: 25px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.characters-popup .character-details .display-mode label,
.characters-popup .character-details .display-mode p {
	background-color: var(--trans-col);
	border-radius: 5px;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	font-size: 14px;
	padding: 5px;
}

.characters-popup .character-details .display-mode p {
	resize: none;
	height: 65%;
}

.characters-popup .character-details .display-mode button {
	background-color: var(--bg-col);
	width: 40%;
	align-self: center;
	margin-top: 10px;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	padding: 1%;
	border-radius: 5px;
}

.characters-popup .character-details .display-mode button:hover {
	background-color: var(--bg-alt);
}

/* Edit mode */

.characters-popup .character-details .edit-mode {
	width: 90%;
	height: 100%;
	margin-left: 25px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
}

.characters-popup .character-details .edit-mode input,
.characters-popup .character-details .edit-mode textarea {
	background-color: var(--trans-col);
	border-radius: 5px;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	font-size: 14px;
	padding: 5px;
}

.characters-popup .character-details .edit-mode textarea {
	resize: none;
	height: 65%;
}

.characters-popup .character-details .edit-mode .buttons {
	display: flex;
	justify-content: space-evenly;
}

.characters-popup .character-details .edit-mode button {
	background-color: var(--trans-col);
	width: auto;
	align-self: center;
	margin-top: 10px;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	padding: 1%;
	padding-inline: 2%;
	border-radius: 5px;
}

.characters-popup .character-details .edit-mode button:hover {
	background-color: var(--bg-alt);
}

.settings-popup {
	width: fit-content;
	height: fit-content;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.settings-popup label {
	color: var(--text-col);
	margin-bottom: 10px;
}

.settings-popup .settings-elements {
	display: flex;
	justify-content: space-evenly;
}

.settings-popup .settings-elements button {
	aspect-ratio: 1/1;
	border-radius: 100%;
	background-color: var(--trans-col);
	border: none;
}

.settings-popup .settings-elements button:hover {
	background-color: var(--bg-alt);
}

.settings-popup .settings-elements button svg {
	width: 32px;
	height: 32px;
	margin: 10px;
}

.config-popup {
	width: 35vw;
	height: fit-content;
}

.config-popup .input-data {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
}

.config-popup .input-data input {
	background-color: var(--trans-col);
	color: var(--text-col);
	border: 1px solid var(--out-col);
	border-radius: 5px;
	margin-bottom: 10px;
	width: 70%;
	padding: 5px;
}

.config-popup .input-data .buttons {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

.config-popup .input-data .buttons button {
	background-color: var(--trans-col);
	width: 20%;
	align-self: center;
	margin-top: 10px;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	padding: 1%;
	padding-inline: 2%;
	border-radius: 5px;
}

.config-popup .input-data .buttons .delete-button:hover {
	border: 1px solid var(--danger-col);
	color: var(--danger-col);
}

.notice {
	height: 100vh;
	width: 22%;
	position: absolute;
	right: 0;

	display: flex;
	flex-direction: column-reverse;
}

.warning {
	font-size: 14px;
	align-self: center;
	color: var(--text-col);
	width: 80%;
	padding: 5%;
	height: fit-content;
	margin-bottom: 15px;
	border-radius: 5px;
	
	border: 1px solid var(--conflict);
	background-color: var(--conflict-bg);
}


.script-editor {
	color: var(--text-col);
	height: 100vh;

}

.script-area {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 80%;
	justify-content: space-around;
	overflow-y: auto;
	scrollbar-width: none;

}

.script-dialog {
	width: 50%;
	padding-top: 10px;
	height: auto;
	align-self: center;
}

.space {
	width: 100%;
	height: 30vh;
}

.top-gradient {
	position: absolute;
	top: 0;
	width: 100%;
	height: 10px;
	background-color: var(--bg-col);
	box-shadow: 0px 10px 50px 50px var(--bg-col);
	z-index: 1;
}

.dialog {
	margin-top: 2%;
	margin-bottom: 2%;
	height: auto;
	display: flex;
	justify-content: space-between;
	transition-property: scale, padding, height;
	transition-duration: .3s, .3s, .2s;
	transition-delay: .1s, .1s, .1s;
}

.dialog:hover {
	margin-top: 0%;
	margin-bottom: 0%;
	border: 1px solid var(--dialog-hover);
	border-radius: 5px;
	padding: 5px;
	scale: 110%;
	transition-property: scale, padding;
	transition-duration: .3s, .3s;
	transition-delay: 0s, 0s;
}

.dialog-edit {
	border: 1px solid var(--hover-border);
	border-radius: 5px;
	padding: 5px;
	scale: 110%;
}

.dialog-insert {
	border-top: 10px solid var(--text-col);
	padding-top: 5px;
	animation: blink 2s infinite;
}

@keyframes blink {
	0%, 50%, 100% {
		border-top: 2px solid var(--insert-blink);
	}
	25%, 75% {
		border-top: 2px solid var(--insert-blink-active);
	}
}

.dialog-text {
	width: 80%;
	display: flex;
	justify-content: space-between;
}

.dialog-text:hover .dialog-buttonholder .dialog-button,
.dialog-action:hover .dialog-buttonholder .dialog-button {
	visibility: visible;
}

.dialog-buttonholder {
	display: flex;
	flex-direction: row-reverse;
}

.dialog-button {
	visibility: hidden;
	align-items: center;
	background-color: var(--trans-col);
	color: var(--text-col);
	height: 21.6px;
	aspect-ratio: 1/1;
	border: 1px solid var(--out-col);
	border-radius: 5px;
	float: right;
	margin-left: 10px;
}

.dialog-button svg {
	fill: var(--out-col);
}

.dialog-button:hover {
	border: 1px solid var(--hover-border);
	background-color: var(--hover-fill);
}

.dialog-button:hover svg {
	fill: var(--text-col);
}

.delete:hover {
	border: 1px solid var(--danger-col);
}

.delete:hover svg {
	fill: var(--danger-col);
}

.dialog-action {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.input-area {
	z-index: 0;

	position: absolute;
	bottom: 0;

	display: flex;
	flex-direction: column;
	width: 100%;
	height: 160px;
	justify-content: space-evenly;
}

.input-character {
	width: 50%;
	height: 20%;
	display: flex;
	flex-direction: row;
	align-self: center;
}

.character-select {
	height: fit-content;
	font-size: 100%;
	font-weight: bold;
	border-radius: 10px;
	margin-right: 15px;
	background-color: var(--trans-col);
	color: var(--text-col);
	border: 2px solid var(--out-col);
	padding-inline: 10px;
}

.character-select .character-abbr {
	display: inherit;
}

.character-select .character-name {
	display: none;
}

.character-select:hover {
	border: 2px solid var(--text-col);
}

.character-select:hover .character-abbr {
	display: none;
}

.character-select:hover .character-name {
	display: inherit;
}

.rounded {
	padding-inline: 0;
	border-radius: 100%;
	aspect-ratio: 1/1;
}

.selected {
	background-color: var(--text-col);
	color: var(--bg-col);
	border: 1px solid var(--text-col);
}

.selected:hover {
	background-color: var(--dialog-hover);
	color: var(--bg-col);
	border: 1px solid var(--text-col);
}

.selected .character-abbr {
	display: none;
}

.selected .character-name {
	display: inherit;
}

.input-dialog {
	width: 50%;
	height: 60%;
	display: flex;
	justify-content: space-between;
	align-self: center;
	margin: 10px;
}

.input-dialog textarea {
	font-size: 16px;
	color: var(--text-col);
	width: 90%;
	height: 100%;
	border: 1px solid var(--out-col);
	background-color: var(--trans-col);
	border-radius: 5px;
	resize: none;
	padding: 1%;
}

.input-dialog textarea:focus {
	outline: none;
}

.input-dialog button {
	width: fit-content;
	height: 100%;
	background-color: var(--trans-col);
	color: var(--text-col);
	border: 1px solid var(--out-col);
	border-radius: 5px;
	padding: 10px;
}

.input-dialog button:hover {
	background-color: var(--text-col);
	color: var(--bg-col);
	border: 2px solid var(--text-col);
}

.tutorial-popup {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 70vh;
	color: var(--text-col);
	padding: 50px;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;

	z-index: 3;
}

.tutorial-popup label {
	font-size: 28px;
	align-self: center;
}

.tutorial-popup dt {
	margin-top: 20px;
	margin-bottom: 5px;
}

.tutorial-popup button {
	align-self: center;
	margin-top: 50px;
	font-size: 16px;
	background-color: var(--trans-col);
	outline: none;
	width: 20%;
	border: 1px solid var(--out-col);
	color: var(--text-col);
	padding: 1%;
	border-radius: 5px;
}

.tutorial-popup button:hover {
	background-color: var(--bg-alt);
}