* {
	box-sizing: border-box;
	color: white;
}

html {
	height: 100%;
	width: 100%;
}

body {
	background-color: rgb(4, 37, 37);
	padding: 0;
	margin: 0;
	height: 100%;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
	box-sizing: border-box;
	overflow: hidden;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #aee3d8;
	background-image: none;
	padding: 10px;
	color: #091c18;
	cursor: pointer;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

dialog {
	background-color: #1a5549;
	border: solid 2px #57a394;
	box-shadow: black 0px 0px 20px 0px;
	padding: 4px;
	width: 90vw;
	max-width: 800px;
	margin: 10px;
}

dialog input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #aee3d8;
	background-image: none;
	padding: 4px;
	color: #091c18;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
	flex: 1;
	width: 100%;
}

dialog input:focus {
	background-color: #d1f3ec;
}

dialog input::selection {
	background: #1a5549;
	color: white;
}

dialog textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #aee3d8;
	background-image: none;
	padding: 4px;
	color: #091c18;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
	flex: 1;
	width: 100%;
}

dialog textarea:focus {
	background-color: #d1f3ec;
}

dialog textarea::selection {
	background: #1a5549;
	color: white;
}

dialog select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #aee3d8;
	background-image: none;
	padding: 4px;
	color: #091c18;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
	flex: 1;
	width: 100%;
}

dialog select:focus {
	background-color: #d1f3ec;
}

dialog option {
	color: #091c18;
}

dialog label {
	font-size: 0.8em;
	padding-bottom: 4px;
}

dialog button {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #aee3d8;
	background-image: none;
	padding: 4px 12px;
	color: #091c18;
	cursor: pointer;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
}

/* width */
::-webkit-scrollbar {
	width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
	background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #1e3631;
	border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #233e39;
}

.dialogRowContainer {
	display: flex;
	position: relative;
	flex-direction: row;
	width: 100%;
	padding: 4px;
	gap: 8px;
}

.dialogCellContainer {
	display: flex;
	position: relative;
	flex-direction: column;
	flex: 1;
}

.dialogButtonRowContainer {
	justify-content: flex-end;
	/* background-color: bisque; */
}

.heading {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 4px;
	height: 2.5em;
	margin: 4px;
	background-color: #1a5549;
}

.heading>div {
	flex: 1;
}

.heading>img {
	cursor: pointer;
	padding: 4px;

	/* background-color: red; */
}

.selectedElementBackground {
	background-color: #134d42 !important;
}

#mainOuter {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	/* background-color: royalblue; */
}

#mainLeft {
	display: flex;
	flex-direction: column;
	width: 250px;
	height: 100%;
	overflow: hidden;
	/* background-color: royalblue; */
}

#countryContainer {
	/* background-color: red; */
	padding: 4px;
}

#countrySelect {
	width: 100%;
	/* background-color: rgb(9, 54, 54); */
	background-color: transparent;
	color: white;
	padding: 4px;
}

#pagesContainer {
	flex: 1;
	flex-direction: column;
	padding: 4px;
	overflow-y: auto;
	/* background-color: green; */
}

#pagesContainer>div {
	padding: 4px 4px;
	cursor: pointer;
	/* background-color: green; */
}

#mainCenter {
	display: flex;
	flex-direction: column;
	flex: 4;
	max-width: 300px;
	height: 100%;
	overflow: hidden;
	/* background-color: salmon; */
}

#pageInfo {
	padding: 8px;
	/* background-color: green; */
}

#imagesContainerOuter {
	flex: 1;
	margin: 4px;
	overflow-y: auto;
}

#imagesContainer {
	display: grid;
	/* gap: 10px; */
	/* background-color: green; */
}

#imagesContainer>div {
	aspect-ratio: 16/9;
	/* background-color: #559689; */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 4px;
	cursor: pointer;
}

#imageEditUpload {
	display: none;
}

#imageEditPreviewContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40em;
}

#imageEditPreview {
	max-width: 100%;
	max-height: 40em;
}

#notesContainer {
	flex: 1;
	margin: 4px;
	overflow-y: auto;
}

#notesContainer>div {
	margin: 4px;
}

#noteEditUpload {
	display: none;
}

#mainRight {
	flex: 4;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#elementsContainerOuter {
	flex: 1;
	flex-direction: column;
	margin: 4px;
	overflow-y: auto;
}

#elementsContainer {
	gap: 10px;
}

#elementsContainer>div {
	/* background-color: #263c38; */
	margin: 4px;
	cursor: pointer;
	border-top: solid 1px #1a5549;
	padding-top: 4px;
	/* margin-bottom: 30px; */
}

#elementsContainer>div:first-child {
	/* background-color: #263c38; */
	cursor: pointer;
	border-top: none;
}

#imageSelectorImageContainer {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#imageSelectorImageContainer>div {
	aspect-ratio: 16/9;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 4px;
	cursor: pointer;
}