/* --- Color Variables --------------------------------------------------------------------------------------------------------------- */
:root {
	--color-unisync: #0d89ff;
	--color-text: #343434;
	--color-inverted: #fff;
	--color-bg: #fff;
	--color-main-bg: #E8E8E8;
	--color-content-bg: #F5F5F5;
	--color-table-border: #939c96;
	--color-caution: #DC143C;
}

/* --- Element --------------------------------------------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	width: 100%;
	background: var(--color-bg);
}

body, form, button, label, fieldset, legend, datalist, input, textarea, select, option, header, footer, nav, main, ul, ol, li, table, thead, tbody, tr, th, td, div, span, p, h1, h2, h3, h4, h5, a{
	font-weight: normal;
	font-size: 14px;
	font-family: "Avenir Next", "Avenir", "Helvetica Neue", Arial, sans-serif;
	color: var(--color-text);
	text-decoration: none;
}

a:link, a:visited, a:active {
	color: var(--color-text);
	text-decoration: none;
}

a:hover {
	color: var(--color-text);
	text-decoration: none;
}

img {
	border: 0;
}

/* --- Template --------------------------------------------------------------------------------------------------------------- */
.sub {
	font-size: 0.8em;
}

.em {
	font-weight: bold;
}

.caution {
	color: var(--color-caution);
}

.loading {
	width: 100%;
	height: 40px;
	background: url("/Component/img/loading.gif") no-repeat center center;
}

/* Container */

header {
	width: 100%;
	min-height: 75px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	flex-wrap: wrap;
}

main {
	display: flex;
	flex: 1;
}

#ln {
	margin: 0;
	padding: 0 0 0 14px;
	width: 170px;
	min-width: 170px;
	background-color: var(--color-content-bg);
	box-sizing: border-box;
	flex-shrink: 0;
}

#Content {
	flex: 1;
	background-color: var(--color-content-bg);
}

div#Entry {
	margin: 1em;
	padding: 2em;
	background-color: var(--color-bg);
	border-radius: 20px;
}

footer {
	padding-top: 5px;
	display: flex;
	justify-content: center;
	background-color: var(--color-content-bg);
}



#logo {
	padding: 0px 0px 0px 4px;
}

#user_info {
	padding: 8px 8px 0 0;
	text-align : right;
}

#user_info a{
	font-weight: bold;
}

#user_info a.logout{
	font-size: 0.8em;
	font-weight: normal;
}

#user_info a:hover {
	text-decoration:	underline;
}

#user_info form{
	display: inline-block;
}

#user_info select{
	border: none;
	font-weight: bold;
	cursor: pointer;
}

#gn {
	width: 100%;
	min-height: 36px;
	background: var(--color-text);
	display: flex;
	justify-content: space-between;
	padding: 8px 7px 0 7px;
	box-sizing: border-box;
	order: 1;
}

#gn a{
	padding: 1px 10px;
	border-radius: 10px;
	font-weight: 500;
}

#gn a:link, #gn a:visited {
	color: var(--color-inverted);
}

#gn a:hover, #gn a:active, #gn a.Current:link, #gn a.Current:visited, #gn a.Current:hover {
	color: var(--color-text);
	background: var(--color-inverted);
}

#gn #gnConfig a {
	padding-left: 24px;
}

#gn #gnConfig a:link, #gn #gnConfig a:visited {
	background: url("/Component/img/icon_setting.svg") no-repeat left top;
}

#gn #gnConfig a:hover, #gn #gnConfig a:active, #gn #gnConfig a.Current {
	background: var(--color-inverted) url("/Component/img/icon_setting_hover.svg") no-repeat left top;
	border-radius: 10px;
	color: var(--color-text);
}


/* Local Navigation */


#ln div.add {
	width : 140px;
	margin : 12px 0px;
}

#ln div.add a.add {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 4px 10px;
		background-color: var(--color-unisync);
		color: var(--color-inverted);
		border-radius: 20px;
		text-decoration: none;
		font-weight: 600;
		font-size: 14px;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		transition: all 0.2s ease;
		transform: translateY(-1px);
}

#ln div.add a.add::before {
		content: "+";
		margin-right: 6px;
		font-size: 16px;
		font-weight: 500;
}

#ln div.add a.add:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
		filter: brightness(1.1);
		transform: translateY(-2px);
}

#ln div.add a.add:active {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		filter: brightness(0.95);
		transform: translateY(0);
}


#ln h1 {
	margin: 1.5em 0 0 0;
	padding: 0;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
	font-weight: 600;
}

#ln a {
	margin: 5px 0;
	padding: 2px 2px 2px 12px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-weight: 500;
}

#ln a::before {
	content: "○";
	display: inline-block;
	margin-left: -6px;
	margin-right: 6px;
}

#ln a:hover, #ln a.Current:hover {
	border-radius: 5px;
	background-color: var(--color-main-bg);
}

#ln a.Current {
	border-radius: 5px;
	background-color: var(--color-bg);
}

#ln a.Current::before {
	content: "●";
	display: inline-block;
	margin-left: -6px;
	margin-right: 6px;
}


/* Calendar */
#calendar_container {
	padding: 2em;
	background-color: var(--color-bg);
	border-radius: 20px;
}

.cal_header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 12px 15px;
	background-color: var(--color-content-bg);
	white-space: nowrap;
	overflow-x: auto;
	min-width: 600px;
	-webkit-overflow-scrolling: touch;
}

.cal_view{
	display : inline-block;
	width: fit-content;
}

.cal_view a.clear{
	display : inline-block;
	margin-left:1em;
	font-size : 12px;
	border-radius: 20px;
	padding : 3px 1.5em;
	background-color : var(--color-bg);
	border: 1px solid var(--color-table-border);
}

.cal_view a.clear:hover{
	background-color : var(--color-main-bg);
}

.cal_header_month {
	grid-column: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-self: center;
}

.cal_month {
	font-size: 18px;
	font-weight: bold;
}

.cal_header_btn {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg);
	border: 1px solid var(--color-table-border);
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
}

.cal_header_btn:hover{
	background-color: var(--color-main-bg);
	border-color: var(--color-text);
	text-decoration: none;
	transform: translateY(-1px);
}

.cal_header_btn:active{
	transform: translateY(0);
}


.cal_header_thismonth {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cal_header_thismonth form {
	display: flex;
	align-items: center;
	gap: 5px;
}

.cal_header_thismonth form:first-child {
	font-size: 0;
}

.cal_header select {
	appearance: none;
	border-radius: 20px;
	font-weight: 600;
	border: 1px solid var(--color-table-border);
	background-color: var(--color-bg);
	padding: 4px 25px 4px 10px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - 8px) center;
}

.cal_header select:hover {
	background-color: var(--color-main-bg);
	border-color: var(--color-text);
	transform: translateY(-1px);
}

.cal_header select:focus {
	outline: none;
	border-color: var(--color-text);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.cal_header_thismonth_btn {
	font-weight: 600;
	border-radius: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg);
	border: 1px solid var(--color-table-border);
	padding: 4px 15px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
}

.cal_header_thismonth_btn:hover{
	background-color: var(--color-main-bg);
	border-color: var(--color-text);
	transform: translateY(-1px);
}

.cal_header_thismonth_btn:active{
	transform: translateY(0);
}


#calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0;
	padding: 2em;
}

#calendar div.sunday {
	border-left: 1px solid var(--color-table-border);
}

#calendar div.weekday {
	border-right: none;
	border-bottom: 1px solid var(--color-table-border);
	text-align: center;
	font-weight: 600;
	font-size: 14px;
}

#calendar div.holiday{
	color: var(--color-caution);
}

#calendar div.day {
	padding: 8px 2px 0 2px;
	border-right: 1px solid var(--color-table-border);
	border-bottom: 1px solid var(--color-table-border);
	justify-content: center;
	align-items: center;
	min-height: 100px;
}

#calendar div.day_header {
	position: relative;
	justify-content: center;
	text-align: center;
}

#calendar div.day div.day_num, #calendar div.day div.month_name {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
}

#calendar div.day div.month_name{
	padding-right : 3px;
}

#calendar div.today div.day_num {
	border-radius: 50%;
	width : 30px;
	height : 30px;
	line-height: 30px;
	justify-content: center;
	align-items: center;
	padding: 0;
	background-color: var(--color-unisync);
	color: var(--color-inverted) !important;
}

#calendar div.holiday div.day_num, #calendar div.holiday div.month_name {
	color: var(--color-caution);
}

#calendar div.holiday_name {
	display: block;
	padding-left : 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-caution);
	text-align : left;
}

#calendar div.past, div.notthismonth{
	background-color: var(--color-content-bg);
}

#calendar div.past div.day_num, #calendar div.notthismonth div.day_num, #calendar div.past div.month_name, #calendar div.notthismonth div.month_name, #calendar div.past div.holiday_name, #calendar div.notthismonth div.holiday_name{
	color: #999;
	font-weight : normal;
}

#calendar div.day a.add_btn {
	position: absolute;
	top: 3px;
	right: 3px;
	margin-left: auto;
	border: 1px solid var(--color-main-bg);
	border-radius: 50%;
	padding: 0;
	width: 20px;
	height: 20px;
	background-color: var(--color-bg);
	color: var(--color-text);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	line-height: 1;
}

#calendar div.day a.add_btn:hover {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

#calendar div.day a.add_btn:active {
	transform: translateY(0px);
}


#calendar .cal_data {
	display: block;
	margin: 9px 3px;
	border: 1px solid var(--color-main-bg);
	border-radius: 8px;
	padding: 12px;
	background-color: var(--color-bg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#calendar .cal_data .status {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 5px;
	background-color: var(--color-main-bg);
}

#calendar .cal_data .status_0 {
	background-color: #FDF2F8;
	color: #9D174D;
}

#calendar .cal_data .status_1 {
	background-color: #FEE2E2;
	color: #B91C1C;
}

#calendar .cal_data .status_2 {
	background-color: #EFF6FF;
	color: #1E40AF;
}

#calendar .cal_data .status_3 {
	background-color: #F9FAFB;
	color: #9CA3AF;
}

#calendar .cal_data .status_4 {
	background-color: #E5E7EB;
	color: #1F2937;
}

#calendar .cal_data .content_owner, .cal_data .project_name {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	padding: 2px 5px;
	border-radius: 5px;
	margin-bottom: 5px;
	margin-right: 3px;
	border: 1px solid;
}

#calendar .cal_data:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
	transform: translateY(-2px);
}

#calendar div.cal_time {
	font-weight: 500;
	font-size: 14px;
}

#calendar div.cal_time span.cal_sub_time {
	padding-left: 5px;
	font-weight: normal;
	font-size: 10px;
}

#calendar div.cal_title {
	padding: 5px 0;
	font-size: 14px;
	font-weight: 500;
}

#calendar div.cal_icon img {
	display: inline-block;
	width: 14px;
	opacity: 0.3;
	margin: 3px 3px 8px 0;
}





/* Content Columns */

.content-columns {
	display: flex;
	gap: 10px;
}

.content-column {
	flex: 0 0 auto;
	width: auto;
}

/* Social Copy */
label.social_copy {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;

}

textarea.social_copy, input[type="text"].social_copy {
	padding: 12px;
	border: 1px solid var(--color-table-border);
	border-radius: 4px;
	resize: vertical;
	font-size: 12px;
	cursor: pointer;
}

textarea.social_copy:focus, input[type="text"].social_copy:focus {
	background-color: var(--color-bg);
	border-color: var(--color-unisync);
	cursor: text;
}

input[type="text"].social_copy {
	width: 600px;
}

textarea.social_copy {
	font-size: 12px;
	line-height: 1.5;
	width: 280px;
	min-height: 350px;
	overflow-wrap: break-word;
	word-break: break-word;
	padding: 12px;
}

/* Platform Selector */
.platform-selector {
	display: flex;
	align-items: center;
	min-width: fit-content;
	white-space: nowrap;
	flex-wrap: wrap;
	gap: 1px;
	font-size: 10px;
	margin: 18px 0 8px 0;
}

.platform-selector input[type="radio"] {
	margin-right: 4px;
	cursor: pointer;
	flex-shrink: 0;
}

.platform-selector label {
	font-size: 10px;
	margin-right: 10px;
	font-weight: normal;
	cursor: pointer;
}

.platform-selector .copy-btn {
	margin-left: auto;
	margin-top: 0;
	padding: 2px 5px;
	background-color: var(--color-bg);

	border: 1px solid var(--color-table-border);
	border-radius: 10px;
	cursor: pointer;
	font-size: 12px;
}

.platform-selector .copy-btn:hover {
	background-color: var(--color-content-bg);
}

#platform-socialoutput {
	min-height: 600px;
	background-color: var(--color-content-bg);

}



/* Content Headings */

#Content h1 {
	margin: 1em 0;
	font-weight: bold;
	font-size: 18px;
}

#Content h1 span.keyword {
	font-weight: bold;
	font-size: 1.1em;
	font-style: italic;
	color: var(--color-unisync);
}


#Content h2 {
	margin: 2em 0 0.4em 0;
	font-weight: bold;
	font-size: 16px;
	padding-left: 0.3em;
	border-left: 3px solid var(--color-table-border);
}

#Content h3 {
	margin: 1.5em 0 0.2em 0;
	font-weight: bold;
	font-size: 16px;
}

/* Report Table */
#Report {
	padding: 2em;
	background-color: var(--color-bg);
	border-radius: 20px;
}

table.Report {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 2px solid #333;
}

table.Report th {
	white-space: nowrap;
	font-weight: normal;
	font-size: 12px;
	font-weight: 600;
	position: sticky;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
	background: var(--color-content-bg);
}

table.Report td {
	font-size: 10px;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
	white-space: nowrap;
	text-align: center;
	padding: 0 3px;
}

table.Report th.pf_name {
	border-bottom: 1px solid #333;
}

table.Report th.pf_line, table.Report td.pf_line {
	border-left: 2px solid #333;
}

table.Report tr:first-child th {
	border-top: 1px solid #333;
	top: 0;
	height: 20px;
	z-index: 10;
}

table.Report tr:nth-child(2) th {
	position: sticky;
	top: 22px;
	z-index: 9;
}

table.Report th.cal_title{
	padding: 0 6px;
}

table.Report th.cal_title a{
	font-size: 12px;
	white-space: pre-wrap;
	font-weight: 600;
	padding: 6px;
}

table.Report th.thumb {
	padding: 0;
}

table.Report th span, table.Report td span {
	font-size: 10px;
}

table.Report td span.low, table.Report td input.low {
	color: #cb3305;
}

table.Report td span.high, table.Report td input.high {
	color: #0457e1;
}

table.Report tr:hover {
	background-color: var(--color-content-bg);
}

#Report div.cal_time {
	padding: 0 6px;
	font-weight: 500;
	font-size: 14px;
}

#Report div.cal_time span.cal_sub_time {
	font-weight: normal;
	font-size: 10px;
}

table.Report td input[type="text"] {
	margin-top: 14px;
	border: none;
	text-align: right;
	width: 5em;
	font-size: 14px;
	font-weight: 600;
	background-color: transparent;
	text-align: center;
}

table.Report td input[type="text"].views {
	margin-top: 0;
	font-size: 14px;
	font-weight: 600;
}

table.Report tr.Total th {
	font-size: 14px;
	padding: 10px 0;
	border-top: 2px solid;
	vertical-align: middle;
}

/* Sheet Data */
Table.SheetData {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

Table.SheetData th, Table.SheetData td {
	margin: 0;
	white-space: nowrap;
	border: 1px solid var(--color-table-border);
}

Table.SheetData th {
	width: 10%;
	text-align: center;
	background: var(--color-content-bg);
}

Table.SheetData td {
	width: 40%;
	padding: 3px 5px;
}

Table.SheetData td input{
	border: 1px solid var(--color-bg);
	background-color: var(--color-bg);
	width: 100%;
	margin: -1px;
	height: 16px;
	padding-top: 2px;
	cursor: pointer;
}

Table.SheetData td textarea {
	border: 1px solid var(--color-bg);
	background-color: var(--color-bg);
	width: 100%;
	height: 5em;
	margin: -1px;
	overflow: auto;
	line-height: 1.2em;
	cursor: pointer;
}

Table.SheetData select {
	height: 20px;
	width: 100%;
	background-color: var(--color-content-bg);
}

Table.SheetData td input.mouseover, Table.SheetData td textarea.mouseover, Table.SheetData td input.new {
	border: 1px solid var(--color-table-border);
	background-color: var(--color-bg);
}

Table.SheetData td input.focus, Table.SheetData td textarea.focus{
	border: 1px solid var(--color-table-border);
	background-color: var(--color-content-bg);
	cursor: text;
}

/* SVG Icons */

svg.link, svg.setting {
	width: 12px;
	height: 12px;
}

svg.setting:hover path {
	fill: var(--color-content-bg);
}

svg.link:hover path {
	stroke: var(--color-content-bg);
}


/* Input Lists in SheetData */

Table.SheetData td Table.InputList {
	width: 100px;
	border: none;
}

Table.SheetData td Table.InputList TD {
	border: none;
	padding: 0;
	padding-right: 0.5em;
}

Table.SheetData TD Table.InputList TD, Table.SheetData TD Table.InputList TH {
	display: inline-flex;
	width: 1%;
	min-width: max-content;
}

Table.SheetData TD Table.InputList td.checkbox input[type="checkbox"] {
	margin: 0 5px 0 0;
}

Table.SheetData TD Table.InputList td.checkbox label {
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 0;
	cursor: pointer;
}

Table.SheetData A.link_click {
	font-size: 12px;
	text-decoration: none;
}

Table.SheetData A.link_click:hover {
	font-size: 12px;
	text-decoration: none;
}


/* ConfigTable */

Table.ConfigTable {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

Table.ConfigTable th {
	padding: 0.2em 1em;
	white-space: nowrap;
	text-align: center;
	background: var(--color-main-bg);
	border-top: 1px solid var(--color-table-border);
	border-bottom: 1px solid var(--color-table-border);
}

Table.ConfigTable td {
	padding: .5em;
	text-align: left;
	border-bottom: 1px solid var(--color-table-border);
	white-space : nowrap;
}

Table.ConfigTable input[type="text"] {
	border : 1px solid var(--color-bg);
	padding : 2px;
	width:100%;
	cursor: pointer;
}

Table.ConfigTable input[type="text"]:hover {
	border : 1px solid var(--color-table-border);
}

Table.ConfigTable input[type="text"].new, Table.ConfigTable input[type="text"]:focus {
	border : 1px solid var(--color-table-border);
	background-color: var(--color-content-bg);
	cursor: text;
}

Table.ConfigTable button {
	padding: 1px 1em;
	cursor: pointer;
	font-size	: 12px;
	border: 1px solid var(--color-table-border);
	background-color: var(--color-content-bg);
	border-radius: 1em;
}

Table.ConfigTable button:hover {
	filter: brightness(.8);
}


/* Special Input Fields */

Table.SheetData td input.datefield {
	width: 10em;
}

Table.SheetData td input.numfield {
	width: 2em;
}

Table.SheetData td input.timefield{
	width: 4em;
}

Table.SheetData td input.numericfield {
	width: 4em;
}


/* Form Navigation */

div.formnavi {
	text-align: right;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.formnavi button {
	padding: 1px 1em;
	border: none;
	background-color: var(--color-unisync);
	color: var(--color-inverted);
	border-radius: 1em;
	opacity: 0.3;
	cursor: not-allowed;
}

.formnavi button.able {
	cursor: pointer;
	filter: alpha(opacity:100);
	opacity: 1;
}

.formnavi button.able:hover {
	cursor: pointer;
	filter: brightness(1.2);
}

.formnavi button.deletebtn {
	cursor: pointer;
	background-color: var(--color-table-border);
	color: var(--color-inverted);
	opacity: 1;
}

.formnavi button.deletebtn:hover {
	cursor: pointer;
	filter: brightness(1.2);
}



/* Thumb Upload */

#ThumbUploadArea {
	width: 100px;
	height: 100px;
	border: 1px solid var(--color-table-border);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

#ThumbPreview {
	max-width: 100%;
	max-height: 100%;
	display: none;
}

#ThumbUploadHolder {
	width: 100px;
	height: 100px;
	font-size: 24px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	display: none;
}

#ThumbDeleteBtn {
	margin-top: 10px;
	margin: 5px 0 0 auto;
	border:none;
	background:transparent;
	cursor:pointer;
}


/* Schedule Add Link */

a.sch_add {
	font-size: 10px;
	font-weight: normal;
	text-align: center;
	padding: 3px 0.5em;
	border: 1px solid var(--color-table-border);
	border-radius: 20px;
}

a.sch_add:link, a.sch_add:visited {
	text-decoration: none;
	background-color: var(--color-content-bg);
}

a.sch_add:hover {
	text-decoration: none;
	background-color: var(--color-content-bg);
}


/* Dialog Box */

#SiriusBG {
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--color-text);
	filter: alpha(opacity:60);
	opacity: 0.6;
	MozOpacityopacity: 0.6;
	z-index: 10;
}

#SiriusDialog {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	margin-left: -150px;
	margin-top: -40px;
	padding: 10px;
	border: 1px solid var(--color-text);
	background-color: var(--color-main-bg);
	font-size: 10pt;
	text-align: center;
	z-index: 11;
}

#SiriusDialog button {
	margin-top: 5px;
	font-size: 10px;
	padding: 1px 10px;
	cursor: pointer;
}

/* Error */
#Error h1 {
	text-align: center;
}

#Error p {
	text-align: center;
	line-height: 1.5em;
}

/* Calendar and Time Input Components */
Table.SheetData td Table.SiriusInputCalendar, Table.SiriusInputCalendar {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

Table.SheetData td Table.SiriusInputCalendar td, Table.SheetData td Table.SiriusInputCalendar th, Table.SiriusInputCalendar td, Table.SiriusInputCalendar th {
	display: table-cell;
	border: none;
	text-align: center;
	vertical-align: middle;
	width: 20px;
	height: 12px;
	padding: 1px;
	font-size: 9px;
	font-family: Arial;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	opacity: 0.95;
	background-color: var(--color-content-bg);
}

Table.SheetData td Table.SiriusInputCalendar td span, Table.SheetData td Table.SiriusInputCalendar th span, Table.SiriusInputCalendar td span, Table.SiriusInputCalendar th span {
	font-size: 9px;
	display: block;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--color-content-bg);
}

Table.SheetData td Table.SiriusInputCalendar td span:hover, Table.SiriusInputCalendar td span:hover {
	border: 1px solid var(--color-table-border);
}

Table.SheetData td Table.SiriusInputCalendar td span.today, Table.SiriusInputCalendar td span.today {
	border: 1px solid var(--color-table-border);
}

/* Time List Input */
Table.SheetData td Table.SiriusInputTimeList, Table.TimeCard td Table.SiriusInputTimeList {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

Table.SheetData td Table.SiriusInputTimeList td, Table.SheetData td Table.SiriusInputTimeList th{
	display: table-cell;
	border: none;
	text-align: center;
	vertical-align: middle;
	width: 30px;
	height: 12px;
	padding: 1px 2px;
	font-size: 9px;
	font-family: Arial;
	filter: alpha(opacity=95);
	-moz-opacity: 0.95;
	opacity: 0.95;
	background-color: var(--color-content-bg);
}

Table.SheetData td Table.SiriusInputTimeList td span, Table.SheetData td Table.SiriusInputTimeList th span{
	font-size: 9px;
	display: block;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--color-content-bg);
}

Table.SheetData td Table.SiriusInputTimeList td span:hover {
	border: 1px solid var(--color-table-border);
}

Table.SheetData td Table.SiriusInputTimeList td span.current_time {
	border: 1px solid var(--color-table-border);
}


/* Form Styles */

.ListEditor-form {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

.ListEditor-form input[type="text"] {
	width: 250px;
	padding: 6px;
}

.ListEditor-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-bottom: 1px solid #ccc;
	background: #fafafa;
	cursor: grab;
}

.ListEditor-item input[type="text"] {
	width: 250px;
	font-weight: 400;
	border: 1px solid #aaa;
	padding: 4px;
	border-radius: 5px;
}

input[type="color"] {
	width: 40px;
	height: 32px;
	border: none;
}

.ListEditor-hidden-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
}

.ListEditor-color-tag {
	font-weight: bold;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 13px;
	border: 1px solid;
	background-color: #EAF6FD;
	display: inline-block;
}

.drag-over {
	outline: 2px dashed #0074B8;
}

.ListEditor-form button, .ListEditor-item button {
	padding: 1px 1em;
	cursor: pointer;
	font-size	: 12px;
	border: 1px solid var(--color-table-border);
	background-color: var(--color-content-bg);
	border-radius: 1em;
}

.ListEditor-form button:hover, .ListEditor-item button:hover {
	filter: brightness(.8);
}




/* Media Queries */
@media (max-width: 768px) {
	.cal_header {
		padding: 10px;
		gap: 8px;
	}
}

/* Print Styles */
@media print {
	#header, #gn, #ln {
		display: none;
	}
	
	#Content {
		margin: 0;
	}
}