:root {
	--button-color: #ffffff;

	--delete-hover-color: #c70000;
	--edit-hover-color: #ffae00;
	--copy-hover-color: #0066ff;
	--last-update-hover-color: #ffda5f;

	--badge-color: linear-gradient(45deg, #b30000, #ff0000);
	--language-color: linear-gradient(45deg, #0054b3, #0f7fff);

	--badge-text-color: #e4f0f2;
	--language-text-color: #e4f0f2;

	--switch-profil-hover-color: #a4a4a4;
	--add-color: #00c400;
	--add-hover-color: #01df01;
	--close-color: #c20000;
	--close-hover-color: #df0000;
	--import-color: #0084ff;
	--import-hover-color: #389fff;
	--export-color: #ffae00;
	--export-hover-color: #ffc13b;
}

[data-theme="dark"] {
	--text-color: #e4f0f2;

	--error-background-color: #FF496E;
	--error-border-color: #e63457;

	--background-color: #16181c;
	--case-background-color: #26292e;
	--case-border-color: #313030;
	--case-border-hover-color: #3d3c3c;

	--button-background-hover-color: #434956;
	--button-background-color: #505661;

	--input-background-color: #434956;
	--input-placeholder-color: #818a96;

	--theme-color: #e7d000;
	--theme-hover-color: #ffe600;
}

[data-theme="light"] {
	--text-color: #1a202c;

	--error-background-color: #FF496E;
	--error-border-color: #e63457;

	--background-color: #e5e7eb;
	--case-background-color: #ffffff;
	--case-border-color: #ffffff00;
	--case-border-hover-color: #ececec;

	--button-background-hover-color: #e5e7eb;
	--button-background-color: #d8d8d8;

	--input-background-color: #e5e7eb;
	--input-placeholder-color: #6c6f78;

	--theme-color: #0058ca;
	--theme-hover-color: #0064e7;
}

@font-face {
	font-family: "Inter";
	src: url("/public/css/import/inter.ttf");
}

* {
	margin: 0;
	font-family: "inter", sans-serif;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	user-select: none;
	transition: 200ms;
	margin: 0;
}

button:focus {
	outline: none;
}

.main {
	margin: 20px;
	min-height: calc(100% - 110px);
}

.mainLogin {
	min-height: calc(100% - 186px);
}

.statsBox {
	height: 37px;
	margin-right: 20px;
}

@media only screen and (max-width: 1400px) {
	.statsBox {
		display: none;
	}
}

.backgroundTop {
	width: 100%;
	height: 116px;
	background-color: var(--background-color);
	transition: 200ms;
	position: fixed;
	top: 0;
	z-index: 1;
}

::-webkit-scrollbar {
	display: none;
}

.row {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.column {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.topSearch {
	display: flex;
	justify-content: right;
	align-items: center;
	position: fixed;
	right: 42px;
}

.formContainer {
	justify-content: center;
	top: 0;
	align-items: center;
	height: 100%;
	width: 100%;
	background-color: #00000025;
	position: fixed;
	z-index: 100;
	backdrop-filter: blur(3px);
}

.box {
	background-color: var(--case-background-color);
	transition: 200ms;
	border-radius: 9px;
	border-style: solid;
	border-width: 2px;
	border-color: var(--case-border-color);
	padding: 20px;
	text-align: center;
	box-shadow: #3232641a 0px 2px 4px 0px;
}

.noscript {
	background-color: var(--error-background-color);
	border-style: solid;
	border-width: 2px;
	border-color: var(--error-border-color);
	z-index: 10;
	position: sticky;
	max-width: 50%;
}

.form {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: fit-content;
	gap: 10px;
	transform: translateY(-30%);
}

input, select {
	background-color: var(--input-background-color);
	transition: 200ms;
	padding: 10px;
	border: 0;
	border-radius: 9px;
	font-size: 15px;
	color: var(--text-color);
}

input::placeholder {
	color: var(--input-placeholder-color);
}

input:focus, select:focus {
	outline: none;
}

.actionButton {
	display: inline-block;
	border: 0;
	border-radius: 20px;
	width: 37px;
	height: 37px;
	font-size: 20px;
	transition: 200ms;
	color: var(--text-color);
	text-align: center;
	line-height: 37px;
	cursor: pointer;
}

.actionButton:hover {
	transition: 200ms;
	cursor: pointer;
}

.addFormButton {
	background-color: var(--add-color);
}

.addFormButton:hover {
	background-color: var(--add-hover-color);
}

.closeFormButton {
	background-color: var(--close-color);
}

.closeFormButton:hover {
	background-color: var(--close-hover-color);
}

.exportButton {
	background-color: var(--export-color);
}

.exportButton:hover {
	background-color: var(--export-hover-color);
}

.importButton {
	background-color: var(--import-color);
	margin-left: 0;
}

.importButton:hover {
	background-color: var(--import-hover-color);
}

.themeButton {
	background-color: var(--theme-color);
}

.themeButton:hover {
	background-color: var(--theme-hover-color);
}

.listContainer {
	width: 100%;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	height: min-content;
}

.item {
	height: 100px;
	max-width: 500px;
}

.item:hover {
	border-color: var(--case-border-hover-color);
	transition: 200ms;
}

.actionForm {
	gap: 0;
}

.search {
	width: 360px;
	height: 42px;
	padding-left: 16px;
	padding-right: 16px;
}

.stats {
	text-align: left;
	margin-top: -4px;
}

.stats .title {
	font-size: 16px;
}

.tagListTitle {
	margin-left: -10px;
	text-align: left;
}

.stats .number {
	font-size: 18px;
	font-weight: bold;
	margin-top: -10px;
	margin-bottom: -10px;
	user-select: text;
}

.filterContainer {
	height: fit-content;
	min-width: fit-content;
}

input[type=checkbox], input[type="checkbox"] + label {
	cursor: pointer;
}

#add {
	padding: 10px 20px 10px 20px;
	background-color: var(--button-background-color);
	color: var(--text-color);
	border: 0;
	border-radius: 10px;
	margin-top: 12px;
	transition: 200ms;
	cursor: pointer;
}

#add:hover {
	background-color: var(--button-background-hover-color);
	transition: 200ms;
}

#add[disabled] {
	color: var(--input-placeholder-color);
	background-color: var(--button-background-hover-color);
	cursor: not-allowed;
}

label {
	margin-left: 10px;
}

.filterContainer a {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: -8px;
}

.form a {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

.profilEditButton:hover {
	color: var(--add-color);
	transition: 200ms;
}

.profilForm {
	gap: 0;
}

.profilButtonContainer {
	margin-left: 21px;
}

.profilButton {
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--text-color);
	font-size: 20px;
}

.editProfilButton {
	margin-left: 8px;
	font-size: 23px !important;
}

.editProfilButton:hover {
	color: var(--edit-hover-color) !important;
	transition: 200ms;
}

td {
	text-align: center;
	height: 50px;
}

.badgeList, .languageList {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
	text-align: left;
	margin-right: 10px;
	cursor: pointer;
}

.itemName {
	font-size: 18px;
	text-decoration: none;
	text-align: left;
	color: var(--text-color);
	transition: 200ms;
	width: 100%;

	word-wrap: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.itemName[href] {
	cursor: pointer;
}

.buttonContainer {
	display: flex;
	gap: 10px;
	justify-content: left;
	margin-top: -10px;
	align-items: center;
	min-height: 30px;
}

.actionButtonContainer {
	display: flex;
	margin-top: -10px;
	margin-right: -6px;
	justify-content: right;
}

.button {
	padding: 5px 12px 5px 12px;
	border-radius: 5px;
	transition: 200ms;
	height: fit-content;
}

.button:hover {
	transition: 200ms;
}

.button img {
	height: 20px;
	width: 20px;
}

.deleteButton, .editButton, .copyButton, .lastUpdateDate {
	margin-right: -4px;
	margin-top: -2px;
}

.simpleButton {
	border: 0;
	background: none;
	color: var(--text-color);
	font-size: 20px;
	transition: 200ms;
	text-decoration: none;
	cursor: pointer;
}

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

.arrowButton {
	font-size: 30px;
	height: min-content;
}

.arrowButton:hover {
	color: var(--switch-profil-hover-color);
	transition: 200ms;
}

.copyButton, .editButton, .lastUpdateDate {
	margin-right: -20px;
}

.lastUpdateDate {
	cursor: help;
}

.lastUpdateDate:hover {
	color: var(--last-update-hover-color);
	transition: 200ms;
}

.deleteButton:hover, .profilDeleteButton:hover {
	color: var(--delete-hover-color);
	transition: 200ms;
}

.editButton:hover {
	color: var(--edit-hover-color);
	transition: 200ms;
}

.copyButton:hover, .profilSaveButton:hover {
	color: var(--copy-hover-color);
	transition: 200ms;
}

.profilAddButton:hover {
	color: var(--add-color);
	transition: 200ms;
}

.logoutButton:hover {
	opacity: 75%;
}

.noItemContainer {
	display: flex;
	justify-content: center;
	width: 100%;
	height: min-content;
}

.noItem {
	font-size: 20px;
	display: flex;
	gap: 22px;
	align-items: center;
	background-color: var(--error-background-color);
	border-color: var(--error-border-color);
}

.top {
	padding: 15px 20px 15px 20px;
	z-index: 10;
	position: sticky;
	top: 20px;
	align-items: center;
}

select {
	font-size: 18px;
	max-width: 15%;
}

.topTitle {
	display: flex;
	align-items: center;
	z-index: 10;
	font-size: 18px;
	font-weight: bold;
	word-wrap: normal;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.badgeContainer {
	display: flex;
	gap: 6px;
	font-size: 13px;
	align-items: center;
	margin-top: -4px;
}

.badge {
	padding: 2px 12px 2px 12px;
	background: var(--badge-color);
	color: var(--badge-text-color);
	border-radius: 6px;
}

.description {
	opacity: 50%;
	text-align: left;
	margin-top: -20px;
	word-wrap: normal;
	white-space: nowrap;
	overflow-x: clip;
	text-overflow: ellipsis;
	user-select: text;
}

.language {
	padding: 2px 12px 2px 12px;
	background: var(--language-color);
	color: var(--language-text-color);
	border-radius: 6px;
}

.badge:hover, .language:hover {
	cursor: help;
}

.vscode {
	background-color: #005892;
}

.vscode:hover {
	background-color: #00497a;
}

.idea {
	background-color: #c44b75;
}

.idea:hover {
	background-color: #c42a60;
}

.path {
	background-color: #d1bc67;
}

.path:hover {
	background-color: #d8c578;
}

.github {
	background-color: #f0f0f0;
}

.github:hover {
	background-color: #c5c5c5;
}

.gitlab {
	background-color: #e07d4c;
}

.gitlab:hover {
	background-color: #d86b35;
}

.loginContainer {
	display: flex;
	justify-content: center;
	margin-top: 5%;
}

.loginItem {
	display: flex;
	flex-direction: column;
	max-width: 400px;
	gap: 20px;
}

.loginButton {
	border: 0;
	border-radius: 9px;
	background-color: var(--button-background-color);
	height: 30px;
	color: var(--text-color);
	font-size: 16px;
	cursor: pointer;
	margin-top: 10px;
	transition: 200ms;
}

.loginButton:hover {
	background-color: var(--button-background-hover-color);
	transition: 200ms;
}

.passwordContainer {
	display: flex;
	align-items: center;
	justify-content: right;
}

.showPassword {
	padding-left: 8px;
	margin-right: 10px;
	font-size: 22px;
	cursor: pointer;
	position: absolute;
	background-color: var(--input-background-color);
}

.error {
	background-color: var(--error-background-color);
	border-color: var(--error-border-color);
	font-size: 18px;
	margin-bottom: 20px;
}

.loginField {
	width: 100%;
}

.loginField:-webkit-autofill,
.loginField:-webkit-autofill:hover,
.loginField:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px var(--input-background-color) inset;
	-webkit-text-fill-color: var(--text-color);
}

.external {
	cursor: pointer;
	margin: -10px;
	font-size: 14px;
	opacity: 75%;
	transition: 200ms;
}

.external:hover {
	opacity: 95%;
	transition: 200ms;
}

footer {
	margin-top: 6vh;
	text-align: center;
}

.footerLink {
	text-decoration: underline;
	color: var(--text-color);
}

.footerGit {
	margin-left: 15px;
	text-decoration: none;
}

.notfoundContainer {
	display: flex;
	flex-direction: column;
	margin: auto;
	margin-top: 10%;
	width: 300px;
}