/* ============= */
/* Global styles */
/* ============= */

*, *::before, *::after {
	font-family: "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
	box-sizing: border-box;							margin: 0;
	padding: 0;										font-size: 16px;
}

@media print {
	.page-break { break-after: page; }
}

body { background-color: #CCCCCC; }

a, a:visited { color: #0000FF; }

/* ====================== */
/* Navbar and menu styles */
/* ====================== */

.nav {
	background-color: #000000;						color: #FFFFFF;
	position: fixed;								width: 100%;
	top: 0;
}

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

.nav_list:last-child { padding-right: 96px; }

.nav_brand {
	margin-right: auto;								list-style: none;
	margin-left: 24px;
}

.nav_link {
	position: relative;								list-style: none;
	cursor: pointer;
}

.nav_link:hover {
	background-color: #EEB140;						border-radius: 4px;
}

.nav_link a {
	text-decoration: none;							color: #FFFFFF;
	padding: 26px 16px;								display: inline-block;
}

.nav_link:hover ul, .nav_link:focus ul {
	opacity: 1;										visibility: visible;
}

.nav_menu {
	position: absolute;								display: flex;
	flex-direction: column;							gap: 8px;
	top: 68px;										box-shadow: 0 0 10px #000000;
	left:8px;										width: 168px;
	padding: 4px;									background-color: #FFFFFF;
	border-radius: 4px;								visibility: hidden;
	opacity: 0;
}

.nav_menu a {
	text-decoration: none;							color: #000000;
	padding: unset;									display: inline-block;
	width: 100%;
}

.nav_menu li { list-style: none; }

.nav_menu li:hover {
	background-color: #EEB140;						border-radius: 4px;
}

.nav span { padding-right: 32px; }

/* ================ */
/* Login box styles */
/* ================ */

.login {
	margin: 105px auto;								border: 1px solid #CCCCCC;
	width: 400px;									background-color: #FFFFFF;
}

.login h1 {
	text-align: center;								color: #5B6574;
	font-size: 24px;								padding: 16px 0 16px 0;
	border-bottom: 1px solid #CCCCCC;
}

.login form {
	display: flex;									flex-wrap: wrap;
	justify-content: center;						padding-top: 16px;
}

.login form label {
	display: flex;									justify-content: center;
	align-items: center;							width: 50px;
	height: 32px;									background-color: #EEB140;
	color: #FFFFFF;
}

.login form input {
	width: 310px;									height: 32px;
	border: 1px solid #CCCCCC;						margin-bottom: 16px;
	padding: 0 15px;
}

.login form button {
	width: 100%;									padding: 16px;
	margin-top: 16px;								color: #FFFFFF;
	background-color: #EEB140;						border: none;
	cursor: pointer;								font-weight: bold;
}

.login form button:hover { background-color: #DFA73F; }
.login .ui-icon { font-size: 18px; }

.forgot_password {
	width: 360px;									text-align: right;
}

.forgot_password a {
	cursor: pointer;								font-size: 14px;
	color: #AAAAAA;
}

.forgot_password a:hover { color: #666666; }
.login .error { margin-top: 16px; margin-bottom: 0 !important; }
.login .message { margin-top: 16px; margin-bottom: 0 !important; }

/* ========================= */
/* Error and message styling */
/* ========================= */

.error {
	margin-bottom: 16px;							text-align: center;
	width: 60%;										margin-inline: auto;
}
.message {
	margin-bottom: 16px;							text-align: center;
	width: 60%;										margin-inline: auto;
}

/* ==================== */
/* Header block styling */
/* ==================== */

header {
	margin: 105px auto 16px auto;					width: 60%;
}

header h1 {
	padding-bottom: 16px;							color: #666666;
	border-bottom: 1px solid #AAAAAA;				font-size: 22px;
}

/* ================== */
/* Main block styling */
/* ================== */

main {
	margin-inline: auto;							padding-top: 16px;
	border: 1px solid #AAAAAA;						width: 60%;
	background-color: #FFFFFF;
}

main p {
	padding: 8px 16px 8px 16px;						text-align: center;
}

main button {
	padding: 4px 12px 4px 12px;						color: #FFFFFF;
	background-color: #EEB140;						border: none;
	cursor: pointer;								border-radius: 8px;
}

main button:hover { background-color: #DFA73F; }

main input {
	width: 310px;									height: 32px;
	border: 1px solid #CCCCCC;						padding: 0 15px;
}

main select { width: 310px; }

main div {
	padding-block: 8px;								text-align: center;
}

main h2 {
	margin: 16px;									font-style: italic;
}

hr {
	margin-inline: auto;							width: 95%
}

button[disabled] {
	background-color: #CCCCCC;						cursor: not-allowed;
}

button[disabled]:hover { background-color: #CCCCCC; }

/* ========================== */
/* General Form Table styling */
/* ========================== */

.form_table { margin-inline: auto; }

.form_table td:first-child {
	padding: 8px 16px 8px 16px;						color: #4A536E;
	font-weight: bold;
}

.form_table input[type=file] {
	border: none;									padding-top: 4px;
}

.form_table input[type=text] {
	font-size: 13px;								height: 21px;
}

.form_table textarea { font-size: 13px; }

.span_row { text-align: center; }
.span_row button { margin-inline: 16px; }

/* ================== */
/* Plan Table styling */
/* ================== */

.plan_table { margin-inline: auto; }
.plan_table input { width: 155px; }
.plan_table select { width: unset; }
.plan_table td[colspan="4"] { text-align: center; }
.plan_table h4, .plan_table h5 {
	text-align: center;
	color: #4A536E;
}

.plan_table td:first-child {
	padding: 0;										color: #4A536E;
	font-weight: bold;
}

.plan_table textarea { width: 100%; resize: vertical; }

/* ============ */
/* Tabs styling */
/* ============ */

.tabs {
	display: flex;									justify-content: left;
	list-style-type: none;							margin: 0;
	padding: 0;										border-bottom: 1px solid #000000;
	background-color: #EEEEEE;
}

.tab {
	cursor: pointer;								color: #000000;
	padding: 16px;
}

.tab.active {
	background-color: #EEB140;						color: #FFFFFF;
}

.tab:hover {
	background-color: #DFA73F; 						color: #FFFFFF;
}

.tab-content { text-align: left; }
[data-tab-content] { display: none; }
.active[data-tab-content] { display: block; }

/* ================= */
/* Dashboard styling */
/* ================= */

.flex {
	display: flex;									flex-direction: row;
	justify-content: center;						flex-wrap: wrap;
	gap: 16px;										padding: 16px;
}

.flex select {
	width: unset;									display: block;
	margin-block: 8px;								margin-inline: 16px;
}

.flex div {
	border: 1px solid #CCCCCC;						overflow: hidden;
	border-radius: 8px;								padding-block: 0 16px;
	flex: 1 1 35%;									box-shadow: 4px 4px 4px #CCCCCC;
}

.flex h3 {
	background-color: #EEEEEE;						color: #333333;
	padding-block: 8px;								margin-bottom: 16px;
	border-bottom: 1px solid #CCCCCC;
}

.flex a, .flex a:active {
	text-decoration: none;							color: #FFFFFF;
	background-color: #EEB140;						padding: 8px 16px 8px 16px;
	display: inline-block;							font-size: 32px;
	border-radius: 8px;
}

.flex a:hover { background-color: #DFA73F; cursor: pointer;}

/* ===================== */
/* General class styling */
/* ===================== */

.adder {
	padding-right: 16px;							text-align: right;
}

.deleter {
	padding: 16px;									text-align: right;
}

.deleter button { background-color: #FF0000; border-radius: 8px;}
.deleter button:hover { background-color: #C42727; }
.copier { margin-block: 8px; }
.copier select { width: unset; }
.generator { margin-block: 8px; }
.generator button { margin-inline: 8px; border-radius: 8px;}

.planner {
	margin-inline: auto;							margin-bottom: 16px;
}

.planner h3 {
	text-align: left;								font-style: italic;
}

.planner td:nth-child(3) { width: 50px; }

.planner a {
	text-decoration: none;							color: #0000FF;
}

.planner a:hover { color: #FF0000; }
.ui-icon-grip-dotted-vertical { cursor: grab; }
.ui-icon-delete { cursor: pointer; }
.tabber { padding: unset; }

.list_table { margin-inline: auto; }
.list_category { font-size: 16px; font-style: italic; font-weight: bold; }
.list_item { margin-left: 20px; font-size: 14px; }
.list_item a { font-size: 14px; }
.list_url { margin-left: 40px; font-size: 12px; }
.list_url a { font-size: 12px; }
.list_comment { margin-left: 40px; font-size: 12px; font-style: italic; }

/* ========== */
/* ID styling */
/* ========== */

#plan_period_from, #plan_period_to { width: 148px; }