body {
	font-family: Arial, sans-serif;
	/* Gradient purple color  */
	background: linear-gradient(135deg, #e0c3fc, #8ec5fc);
}

/* Style the tab */
.tab {
	display: flex;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab__button {
	background-color: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab__button:hover {
	background-color: #ddd;
}

/* Create an active/current tablink class */
.tab__button--active {
	background-color: #ccc;
}

/* Style the tab content */
.tab-panel {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	display: none;
}
.tab-panel--open {
	display: block;
}

.word {
	margin: auto;
	padding: 0;
}

button:hover,
label:hover {
	cursor: pointer;
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	overflow: hidden;
}

.accordion__panel--open {
	grid-template-rows: 1fr;
}

.accordion__content {
	overflow: hidden;
	padding-left: 15px;
}

.tab-panel__content {
	border-top: solid;
	padding-top: 10px;
}

.add-panel__input {
	margin-left: 5px;
	margin-right: 5px;
}

.add-panel__inputs,
.tab-panel__input,
.add-panel__submit-button,
.tab-panel__submit-button,
.tab-panel__button--hidden,
.tab-panel__label--hidden,
.add-panel__button--hidden,
.add-panel__label--hidden,
.accordion__button--hidden,
.modal,
.document-panel,
.accordion__edit-input,
.accordion__submit-edit-button,
.accordion__edit-button--hidden,
.accordion__input,
.accordion__value--hidden,
.accordion__edit-btn--hidden,
.accordion__submit-btn,
.word--hidden,
.publish__popup {
	display: none;
}

.add-panel__inputs--visible,
.tab-panel__input--visible,
.tab-panel__input--visible,
.tab-panel__submit-button--visible,
.add-panel__submit-button--visible,
.add-panel__input--visible,
.modal--visible,
.document-panel--visible,
.accordion__edit-input--visible,
.accordion__submit-edit-button--visible,
.accordion__input--visible,
.accordion__submit-btn--visible,
.publish__popup--visible {
	display: inline;
}

.modal {
	height: 50px;
	width: 120px;
	box-shadow: 3px 3px 7px 0 #7c7c7c;
	position: absolute;
	z-index: 2;
}

#familyModal {
	height: 75px;
}

.modal__content {
	display: grid;
	height: 100%;
}

.modal__button {
	grid-template-rows: 1fr;
}

.document-panel {
	position: fixed;
	inset: 0;
	z-index: 1;
}

button {
	cursor: pointer;
}

.accordion__autocomplete-list {
	position: absolute;
	background-color: white;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.accordion__autocomplete-list li {
	padding: 8px 12px;
}
.accordion__autocomplete-list li:hover {
	background-color: #ddd;
	cursor: pointer;
}

.save-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 10px 20px;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 5px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition:
		background-color 0.3s ease,
		transform 0.2s ease;
	z-index: 1000;
}
.save-btn:hover {
	background-color: #45a049;
	transform: scale(1.05);
}

.publish__popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 20px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	background: linear-gradient(135deg, #d5abfd, #6eb6ff);
	border-radius: 10px;
	border: 1px solid #ccc;
}
.publish__popup button {
	margin: 5px;
}

.publish__btn {
	position: fixed;
	bottom: 20px;
	right: 100px;
	padding: 10px 20px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 5px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	transition:
		background-color 0.3s ease,
		transform 0.3s ease;
}
.publish__btn:hover {
	background-color: #0056b3;
	transform: scale(1.05);
}
.publish__cancel-btn,
.publish__confirm-btn {
	margin: 5px;
	border: none;
	border-radius: 5px;
	transition:
		background-color 0.3s ease,
		transform 0.2s ease;
	/* blue buttons */
}
.publish__cancel-btn:hover,
.publish__confirm-btn:hover {
	background-color: #ccc;
	color: black;
	transform: scale(1.05);
}