/*
COLOR PALETTE
  light-pink: rgb(254, 211, 225);
  pink-red: rgb(255, 140, 140);
  purple: rgb(160, 9, 147);
  violet: rgb(52, 16, 57);
  light-yellow: rgb(254, 251, 185);
  dark-yellow: rgb(255, 183, 0);
  green: rgb(40, 150, 10);
  black;
*/

/* ------------ CSS Reset ------------ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Selected text throughout the documents */
/* -moz is the same code for Firefox */
::-moz-selection, ::selection {
	color: black;
	background: rgb(255, 140, 140);
}
/* Selected input text throughout the documents */
/* -moz is the same code for Firefox */
input::-moz-selection, input::selection {
	color: rgb(254, 251, 185);
	background: rgb(160, 9, 147);
}
/* Except for class .edit-mode (for editting a term), hide the placeholder after clicking the input field */
input:not(.edit-mode):focus::placeholder {
	color: transparent;
}

/* Animation for spinner loaders */
.fa-spin {
	animation-direction: reverse;
	animation-duration: 1000000s;
}
.loading-window {
	display: none;
	z-index: 100;
	position: absolute;
	top: 20%; left: 35%;
	animation-duration: 2.5s;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	border: solid;
	color: rgb(160, 9, 147);
	background-color: rgb(255, 183, 0, 0.8);
}
.load-spinner {
	position: relative;
	top: 8.3rem; left: 5rem;
	width: 3.5rem;
	color: rgb(160, 9, 147);
	border: none;
	border-radius: 50%;
}

/* Undisplay permanently pre-defined elements */
.undisplayed {
	display: none;
}

/* Utilities */
.container {
	margin: 0 auto;
	max-width: 540px;
}

/* ------------ Generic ------------ */
body {
	padding: 0rem;
	font-family: Inter, sans-serif;
	background-color: rgba(52, 16, 57);
}

header {
	display: flex;
	align-items: center;
	justify-content:space-around;
	margin-bottom: 1rem;
	background-color: rgb(160, 9, 147);
}

h1 {
	color: rgb(254, 251, 185);
	font-size: 2rem;
}

/* Panel */
.panel {
	padding: 0.3rem;
	border-radius: 1rem;
	background-color: rgb(254, 211, 225);
}

/* ------------ Dropdown user menu ------------ */
.user-panel {
	position: relative;
	font-size: 1.1rem;
	font-weight: 600;
}

/* Style user panel dropdown button (user avatar/image) */
.user-dropdown-button { 
	display: inline-block;
	cursor: pointer;
	border-radius: 40%;
	border-style:groove;
	background-color: rgb(254, 211, 225);
	color: rgba(52, 16, 57);
	cursor: pointer;
	padding: 0;
}
.user-dropdown-button:hover, .user-dropdown-button:active {
	color: black;
	background-color: rgb(255, 183, 0);
}
/* User avatar image in the user dropdown menu button */
.logoOfDELIKAKTUS, .user-dropdown-button-image {
	max-width: 4rem;
	min-height: 3rem;
	max-height: 4rem;
	padding: 0.2rem 0.2rem 0 0.2rem;
	border-radius: 40%;
}
/* Text of user dropdown menu button for an unlogged user instead of avatar image */
.user-dropdown-button-login {
	padding: 0 0.3rem;
	line-height: 220%;
}

.user-panel-content {
	position: absolute;
	right: 0;
	flex-grow: 1;
	z-index: 1;
	min-width: 16rem;
	color: rgb(160, 9, 147);
	font-size: 1.2rem;
}

.user-panel-content td {
	padding: 0.1rem;
}
.user-panel-content input:not(.user-new-image-input) {
	max-width: 12rem;
	padding: 0.3rem;
	border-radius: 0.8rem;
	border: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	background-color: rgb(254, 251, 185);
}
.user-new-image-input {
	min-width: 5rem;
	max-width: 18rem;
	margin: 0.2rem 0;
	border-radius: 0 0.8rem 0.8rem 0;
	border: none;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	background-color: rgb(254, 251, 185);
}

.user-panel-content :is(input:hover, input:focus) {
	background-color: rgb(255, 183, 0);
	color: black;
	font-weight: inherit;
	transition: 0.2s;
}

.user-panel-content button, .arrow-back, .user-action-button, .login-panel-action-button {
	cursor: pointer;
	color: rgb(254, 251, 185);
	background-color: rgb(160, 9, 147);
	border: none;
}
.user-panel-content button:hover, .arrow-back:hover, .user-action-button:hover, .login-panel-action-button:hover {
	color: rgb(160, 9, 147);
	background-color: rgb(254, 251, 185);
	transition: 0.2s;
}
.user-panel-content button:active, .arrow-back:active, .user-action-button:active, .login-panel-action-button:active {
	color: black;
	background-color: rgb(255, 183, 0);
	transition: 0.2s;
}

.user-credentials-inputs td {
	min-width: 100px;
}
.login-panel-inactive-button {
	cursor: pointer;
	color: rgb(160, 9, 147);
	background-color: rgb(254, 251, 185, 0);
	border: 0.15rem solid;
	transition: 0.2s;
}
.login-panel-inactive-button:hover {
	cursor: pointer;
	color: rgb(160, 9, 147);
	background-color: rgb(254, 251, 185);
	border: 0.15rem solid;
}
.login-panel-inactive-button:active {
	color: black;
	background-color: rgb(255, 183, 0);
	transition: 0.2s;
}

.login-panel-buttons, .register-panel-buttons {
	display: flex;
	justify-content: space-around;
	padding: 0.5rem;
}

.login-panel-action-button, .login-panel-inactive-button {
	font-size: 1rem;
	font-weight: inherit;
	width: 6rem;
	height: 6rem;
	border-radius: 1rem;
	text-align: center;
	align-content:flex-start;
	line-height: 0;
}

.login-panel-action-button img, .login-panel-inactive-button img {
	width: 5rem;
}

.user-action-button {
	display: flex;
	font-size: inherit;
	font-weight: inherit;
	text-align: left;
	width: 12rem;
	height: 3rem;
	border-radius: 0.8rem;
	margin: 0.2rem 0;
}

.user-action-button img {
	width: 4rem;
	padding: 0 0.5rem;
}

.arrow-back {
	float: right;
	width: 3rem;
	border-radius: 10rem;
}

.user-edit-image-button {
	position: absolute;
	top: 0.8rem; left: 3rem;
}

.user-edit-image-button img, .user-logged-table img, .edit-user-table img {
	width: 1.5rem;
	padding: 0.1rem;
}
.user-edit-image-button img:hover, .user-edit-image-button img:active, .user-logged-table img:hover, .user-logged-table img:active, .edit-user-table img:hover, .edit-user-table img:active {
	transform: scale(1.5);
	transition: 0.2s;
	cursor: pointer; 
}

/* ------------ "Add Term" module elements ------------ */

.add-term {
	font-size: 1.1rem;
	display: flex;
	gap: 0.5rem;
	margin-top: 2rem;
	position: relative;
}

.grammatic-type {
	font-size: inherit;
	font-weight: 600;
	padding: 0.3rem;
	border-radius: 0.8rem;
	border: none;
	background-color: rgb(254, 251, 185);
}

.add-term-input {
	font-size: inherit;
	padding: 0.3rem;
	border-radius: 0.8rem;
	border: none;
	flex-grow: 1;
	width: 100%;
	background-color: rgb(254, 251, 185);
}

.add-term-input:hover, .add-term-input:focus {
	background-color: rgb(255, 183, 0);
	color: black;
	font-size: inherit;
	font-weight: inherit;
}

.new-term-button {
	cursor: pointer;
	padding: 0.5rem;
	/* border: none; */
	border-radius: 1rem;
	background-color: rgb(160, 9, 147);
	border-style:groove;
}

.unlogged-user-message, .empty-list-message {
	text-align: center;
	font-weight: bold;
	font-size: 2rem;
	background-color: rgb(254, 251, 185);
	min-block-size: 4rem;
	padding: 1rem;
	line-height: 3.5rem;
	border-radius: 1rem;
}

/* ------------ Terms list panel ------------ */

.list-item {
	display:flex;
	align-items: center;
	list-style-type: none;
	gap: 0.05rem;
	margin: 0.3rem 0;
	border: none;
}

.term-italian, .term-english {
	display: flex;
	width: 100%;
	margin: 0 0.2rem;
}

.term-text-it,.term-text-en {
	background-color: rgb(254, 251, 185);
	border-radius: 0.5rem;
	line-height: 1.2rem;
	font-size: 1.2rem;
	width: 100%;
	padding: 0.5rem 0.2rem;
}
.flag-button-it, .flag-button-en {
	font-size: 1.5rem;
	background-color:transparent;
	border:none;
	margin: 0 0.1rem;
}

.term-italian>.term-hide {
	width: 100%;
	text-align: right;
}
.term-english>.term-hide {
	width: 100%;
	text-align: left;
}

.term-check:hover, .term-delete:hover, .term-edit:hover, .term-arrow-up:hover, 
.term-arrow-down:hover, .flag-button-it:hover, .flag-button-en:hover {
	background-color: rgb(255, 183, 0);
	cursor: pointer;
	scale: 1.3;
	transition: 0.2s;
}

.term-edit {
	border-radius: 0.5rem;
	background-color: rgb(160, 9, 147);
}
.edit-icon {
	height: 2rem;
}
.term-text-it-edit:hover, .term-text-en-edit:hover {
	background-color: rgb(255, 183, 0);
}

.term-check {
	padding: 0 0.3rem;
	border-radius: 0.5rem;
	background-color: rgb(40, 150, 10);
}
.check-icon {
	padding: 0.2rem 0 0 0;
	height: 2rem;
}

.term-delete {
	padding: 0 0.2rem;
	border-radius: 0.5rem;
	background-color: rgb(255, 140, 140);
}
.trash-bin-icon {
	padding: 0.2rem 0 0 0;
	height: 2rem;
}

/* Term edit mode changes */

.edit-mode {
	background-color: rgb(254, 251, 185);
}

.label-icon {
	height: 3rem;
}

.arrow-up-icon {
	margin: 0.25rem 0.2rem 0 0.1rem;
	padding: 0 0.2rem;
	height: 1.25rem;
}
.arrow-down-icon {
	margin: 0 0.2rem 0 0.1rem;
	padding: 0 0.2rem;
	height: 1.25rem;
}

.term-text-it-edit, .term-text-en-edit {
	padding: 0 0.2rem;
	width: 100%;
	border: solid;
	font-size: 2.4rem;
	color:rgb(160, 9, 147);
}
/* ______________________________________________________________________ */
/* ------------ Elelments display based on status checkboxes ------------ */
/* General sibling selector (~): https://www.w3schools.com/css/css_combinators.asp */
/* ______________________________________________________________________ */

/* If user-panel-toggle-checkbox is not checked: Hide dropdown user menu */
.user-panel-toggle-checkbox:not(:checked) ~ .container :is(.user-panel-content, .user-edit-image-button) {
	display: none;
}

/*******************************************************************/
/* Clicks on user-login and user-logout 
switch between user LOGIN and LOGGED panels via an undisplayed checkbox */

/* Apply display for LOGOUT status (default) */
/* If LOGOUT: Hide all elements under user panel content except for user login form, empty list message, TERMS list*/
.user-log-status-checkbox:not(:checked) ~ .container 
:is(.user-dropdown-button-image, .user-logged-panel, .back-to-user-edit-panel, .user-edit-confirm-inputs, .user-delete-inputs, .terms-list, .empty-list-message, .add-term) {
	display: none;
}

.user-log-status-checkbox:not(:checked) ~ .user-login-register-checkbox:not(:checked) ~ .container :is(.user-register-panel:not(.user-login-panel), .register-panel-buttons) {
	display: none;
}
.user-login-register-checkbox:checked ~ .container .login-panel-buttons  {
	display: none;
}

/* Apply display for LOGGED status (checked via javascript) */
/* If LOGGED: Hide user avatar label, 'unlogged user' message */
.user-log-status-checkbox:checked ~ .container :is(.user-dropdown-button-login, .login-panel-buttons, .register-panel-buttons, .unlogged-user-message) {
	display: none;
}

/* If LOGGED & eye show-checkbox not checked: Hide password and eye-hidden icon */
.user-log-status-checkbox:checked ~ .user-show-password-checkbox:not(:active) ~ .container 
:is(.logged-user-password, .user-hide-password-icon) {
	display: none;
}
/* If LOGGED & eye show-checkbox active: Hide password-mask and eye icon */
.user-show-password-checkbox:active ~ .container 
:is(.logged-user-password-mask, .user-show-password-icon) {
	display: none;
}

/* Apply display for TERMS status (checked via javascript) */

/* If LOGGED & no TERMS (unchecked via javascript): Hide TERMS list*/
.user-log-status-checkbox:checked ~ .show-terms-checkbox:not(:checked) ~ .container .terms-list {
	display: none;
}
/* If LOGGED & TERMS (checked via javascript): Hide */
.show-terms-checkbox:checked ~ .container .empty-list-message {
	display: none;
}


/*******************************************************************/
/* Clicks on user-edit and arrow-back 
switch between user LOGGED and EDIT panels via undisplayed checkbox */

/* If LOGGED & not user EDIT mode (default and after arrow-back button clicked): Hide user-edit-panel, user-edit-form  */
.user-log-status-checkbox:checked ~ .user-edit-checkbox:not(:checked) ~ .container 
:is(.user-edit-panel, .user-register-panel, .back-to-user-edit-panel, .user-delete-inputs, .user-edit-confirm-inputs) {
	display: none;
}

/* If LOGGED & in user EDIT mode: Hide user-edit-panel, user-edit-form  */
.user-edit-checkbox:checked ~ .container 
:is(.user-show-password-icon, .user-hide-password-icon, .user-logged-panel-actions) {
	display: none;
}

/* If in user EDIT mode & not user-edit of any property: Hide all user-edit inputs */
.user-log-status-checkbox:checked ~ .user-edit-name-checkbox:not(:checked) ~ .container :is(.user-edit-name-inputs),
.user-log-status-checkbox:checked ~ .user-edit-email-checkbox:not(:checked) ~ .container .user-edit-email-inputs,
.user-log-status-checkbox:checked ~ .user-edit-password-checkbox:not(:checked) ~ .container .user-edit-password-inputs,
.user-log-status-checkbox:checked ~ .user-edit-image-checkbox:not(:checked) ~ .container .user-edit-image-inputs,
.user-log-status-checkbox:checked ~ .user-delete-checkbox:not(:checked) ~ .container .user-delete-inputs {
	display: none;
}

/* If in user EDIT mode & user-edit of any property: Hide user-logged-panel */
.user-edit-name-checkbox:checked ~ .container :is(.user-edit-image-button, .user-logged-panel),
.user-edit-email-checkbox:checked ~ .container :is(.user-edit-image-button, .user-logged-panel),
.user-edit-password-checkbox:checked ~ .container :is(.user-edit-image-button, .user-logged-panel),
.user-edit-image-checkbox:checked ~ .container :is(.user-edit-image-button, .user-logged-panel),
.user-delete-checkbox:checked ~ .container :is( .user-edit-image-button, .user-logged-panel, 
.user-edit-confirm-inputs :not(.retype-password-to-edit-user-section, input) ) {
	display: none;
}

.user-edit-confirm-inputs {
	display: none;
}
/* If in user EDIT mode & user-edit of any property: Show user-edit-confirm-inputs*/
.user-edit-name-checkbox:checked ~ .container .user-edit-confirm-inputs,
.user-edit-email-checkbox:checked ~ .container .user-edit-confirm-inputs,
.user-edit-password-checkbox:checked ~ .container .user-edit-confirm-inputs,
.user-edit-image-checkbox:checked ~ .container .user-edit-confirm-inputs,
.user-delete-checkbox:checked ~ .container  .user-edit-confirm-inputs {
	display: block;
}