@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-628cdbb1.css
---------------------------------------------------------
00. /var/www/archidb/public/css/reset.css
01. /var/www/archidb/public/toolkit/dropzone-5.7.0/dist/min/basic.min.css
02. /var/www/archidb/public/toolkit/dropzone-5.7.0/dist/min/dropzone.min.css
03. /var/www/archidb/public/css/common.css
04. /var/www/archidb/public/css/app.css
05. /var/www/archidb/public/css/app.rwd.css
06. /var/www/archidb/public/css/app.advanced.css
07. /var/www/archidb/public/css/conversation.css
08. /var/www/archidb/public/css/auth.css
*/

/*
---------------------------------------------------------
00. /var/www/archidb/public/css/reset.css
---------------------------------------------------------
*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
---------------------------------------------------------
01. /var/www/archidb/public/toolkit/dropzone-5.7.0/dist/min/basic.min.css
---------------------------------------------------------
*/
.dropzone,.dropzone *{box-sizing:border-box}.dropzone{position:relative}.dropzone .dz-preview{position:relative;display:inline-block;width:120px;margin:0.5em}.dropzone .dz-preview .dz-progress{display:block;height:15px;border:1px solid #aaa}.dropzone .dz-preview .dz-progress .dz-upload{display:block;height:100%;width:0;background:green}.dropzone .dz-preview .dz-error-message{color:red;display:none}.dropzone .dz-preview.dz-error .dz-error-message,.dropzone .dz-preview.dz-error .dz-error-mark{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{display:block}.dropzone .dz-preview .dz-error-mark,.dropzone .dz-preview .dz-success-mark{position:absolute;display:none;left:30px;top:30px;width:54px;height:58px;left:50%;margin-left:-27px}


/*
---------------------------------------------------------
02. /var/www/archidb/public/toolkit/dropzone-5.7.0/dist/min/dropzone.min.css
---------------------------------------------------------
*/
@-webkit-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%, 70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-moz-keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%, 70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@keyframes passing-through{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%, 70%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}100%{opacity:0;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px);transform:translateY(-40px)}}@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-moz-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px)}30%{opacity:1;-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}10%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}20%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.dropzone,.dropzone *{box-sizing:border-box}.dropzone{min-height:150px;border:2px solid rgba(0,0,0,0.3);background:white;padding:20px 20px}.dropzone.dz-clickable{cursor:pointer}.dropzone.dz-clickable *{cursor:default}.dropzone.dz-clickable .dz-message,.dropzone.dz-clickable .dz-message *{cursor:pointer}.dropzone.dz-started .dz-message{display:none}.dropzone.dz-drag-hover{border-style:solid}.dropzone.dz-drag-hover .dz-message{opacity:0.5}.dropzone .dz-message{text-align:center;margin:2em 0}.dropzone .dz-message .dz-button{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}.dropzone .dz-preview{position:relative;display:inline-block;vertical-align:top;margin:16px;min-height:100px}.dropzone .dz-preview:hover{z-index:1000}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview.dz-file-preview .dz-image{border-radius:20px;background:#999;background:linear-gradient(to bottom, #eee, #ddd)}.dropzone .dz-preview.dz-file-preview .dz-details{opacity:1}.dropzone .dz-preview.dz-image-preview{background:white}.dropzone .dz-preview.dz-image-preview .dz-details{-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-ms-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.dropzone .dz-preview .dz-remove{font-size:14px;text-align:center;display:block;cursor:pointer;border:none}.dropzone .dz-preview .dz-remove:hover{text-decoration:underline}.dropzone .dz-preview:hover .dz-details{opacity:1}.dropzone .dz-preview .dz-details{z-index:20;position:absolute;top:0;left:0;opacity:0;font-size:13px;min-width:100%;max-width:100%;padding:2em 1em;text-align:center;color:rgba(0,0,0,0.9);line-height:150%}.dropzone .dz-preview .dz-details .dz-size{margin-bottom:1em;font-size:16px}.dropzone .dz-preview .dz-details .dz-filename{white-space:nowrap}.dropzone .dz-preview .dz-details .dz-filename:hover span{border:1px solid rgba(200,200,200,0.8);background-color:rgba(255,255,255,0.8)}.dropzone .dz-preview .dz-details .dz-filename:not(:hover){overflow:hidden;text-overflow:ellipsis}.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span{border:1px solid transparent}.dropzone .dz-preview .dz-details .dz-filename span,.dropzone .dz-preview .dz-details .dz-size span{background-color:rgba(255,255,255,0.4);padding:0 0.4em;border-radius:3px}.dropzone .dz-preview:hover .dz-image img{-webkit-transform:scale(1.05, 1.05);-moz-transform:scale(1.05, 1.05);-ms-transform:scale(1.05, 1.05);-o-transform:scale(1.05, 1.05);transform:scale(1.05, 1.05);-webkit-filter:blur(8px);filter:blur(8px)}.dropzone .dz-preview .dz-image{border-radius:20px;overflow:hidden;width:120px;height:120px;position:relative;display:block;z-index:10}.dropzone .dz-preview .dz-image img{display:block}.dropzone .dz-preview.dz-success .dz-success-mark{-webkit-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-moz-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-ms-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);-o-animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);animation:passing-through 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview.dz-error .dz-error-mark{opacity:1;-webkit-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-moz-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-ms-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);-o-animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);animation:slide-in 3s cubic-bezier(0.77, 0, 0.175, 1)}.dropzone .dz-preview .dz-success-mark,.dropzone .dz-preview .dz-error-mark{pointer-events:none;opacity:0;z-index:500;position:absolute;display:block;top:50%;left:50%;margin-left:-27px;margin-top:-27px}.dropzone .dz-preview .dz-success-mark svg,.dropzone .dz-preview .dz-error-mark svg{display:block;width:54px;height:54px}.dropzone .dz-preview.dz-processing .dz-progress{opacity:1;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear}.dropzone .dz-preview.dz-complete .dz-progress{opacity:0;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.dropzone .dz-preview:not(.dz-processing) .dz-progress{-webkit-animation:pulse 6s ease infinite;-moz-animation:pulse 6s ease infinite;-ms-animation:pulse 6s ease infinite;-o-animation:pulse 6s ease infinite;animation:pulse 6s ease infinite}.dropzone .dz-preview .dz-progress{opacity:1;z-index:1000;pointer-events:none;position:absolute;height:16px;left:50%;top:50%;margin-top:-8px;width:80px;margin-left:-40px;background:rgba(255,255,255,0.9);-webkit-transform:scale(1);border-radius:8px;overflow:hidden}.dropzone .dz-preview .dz-progress .dz-upload{background:#333;background:linear-gradient(to bottom, #666, #444);position:absolute;top:0;left:0;bottom:0;width:0;-webkit-transition:width 300ms ease-in-out;-moz-transition:width 300ms ease-in-out;-ms-transition:width 300ms ease-in-out;-o-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.dropzone .dz-preview.dz-error .dz-error-message{display:block}.dropzone .dz-preview.dz-error:hover .dz-error-message{opacity:1;pointer-events:auto}.dropzone .dz-preview .dz-error-message{pointer-events:none;z-index:1000;position:absolute;display:block;display:none;opacity:0;-webkit-transition:opacity 0.3s ease;-moz-transition:opacity 0.3s ease;-ms-transition:opacity 0.3s ease;-o-transition:opacity 0.3s ease;transition:opacity 0.3s ease;border-radius:8px;font-size:13px;top:130px;left:-10px;width:140px;background:#be2626;background:linear-gradient(to bottom, #be2626, #a92222);padding:0.5em 1.2em;color:white}.dropzone .dz-preview .dz-error-message:after{content:'';position:absolute;top:-6px;left:64px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #be2626}


/*
---------------------------------------------------------
03. /var/www/archidb/public/css/common.css
---------------------------------------------------------
*/


/*
========================
Font
========================
*/
html, body 							{ 
	font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, "Arial";  
	font-size:14px; 
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal; 
	text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%; 
}


/*
========================
Color Schema
========================
*/
.bg-theme 							{ background-color: var(--theme-bg-color); color: #fff;}
.bg-theme-transparent 				{ background-color: var(--theme-bg-transparent); color: #fff;}
.bg-light 							{ background-color: var(--light-bg-color);}
.bg-white 							{ background-color: #fff;}
.bg-soft 							{ background-color: var(--soft-bg-color);}


/*
========================
Elements
========================
*/
*									{ box-sizing:border-box; }
html, body							{ /*scroll-behavior: smooth;*/ }
body								{ position: relative; /* This is neccesarry for positioning TributeJS */ }

a									{ color:inherit; text-decoration:none; transition: all .2s; }
strong, b							{ font-weight:500; }
em									{ font-style:italic; }

/** Table **/
table								{ width:100%; border: none; border-bottom:1px solid #ccc; border-right:1px solid #ccc; position: relative; }
table th,
table td							{ padding:8px 10px; min-width: 40px; border: none; border-left:1px solid #ccc; border-top:1px solid #ccc; text-align: left; }
caption								{ text-align:left; margin-bottom:10px; font-size:1.2em; }


/** Image **/
img									{ max-width:100%; }

/** Header **/
h1, h2, h3,
h4, h5, h6 							{ font-weight:500; color: var(--theme-text-color); }

/** Horizontal line **/
hr 									{ margin: 40px 0; border: none; border-top: 1px solid #ddd;}

/** Mark **/
mark								{ background: yellow; color: black; }
mark.current 						{ background: orange; }

/** Article **/
article								{ }
article h1							{ font-size: 1.6em; line-height: 1.2em; }
article h2							{ font-size: 1.33em; margin-bottom: 20px;  }
article .fr-view 					{ color: #444; text-align: justify;}
article hr 							{ margin: 25px 0;  }

article ins,
article del							{ text-decoration:none; display: inline-block;}
article ins							{ background:#def6de}
article del							{ background:#f7e7e7}
article ins > *,
article del > *						{ opacity: .5; }


/** Define List **/
dl 									{ display: flex; flex-wrap: wrap; justify-content: space-between;}
dt 									{ font-weight: 500; width: 30%; margin: 6px 0; color: #222; }
dd 									{ width: 70%; flex-grow: 1; color: #666; margin: 6px 0;}
	
/** Form & Button **/
form								{ }
form fieldset						{ }
form fieldset:last-child			{ border-bottom: none;}
form legend							{ font-size:1.33em; margin-bottom: 1.5em; }
form .row							{ margin-bottom:20px; position:relative; }
form .row:last-child				{ margin-bottom: 0;}
form .row.submit-row				{ margin-top: 30px;}
form .row.submit-row.flex-justify .button { margin-right: 5px;}
form .row.submit-row.flex-justify .button.right { margin-right: 0; margin-left: auto;}
form .row.submit-row.flex-justify .button.right + .button { margin-left: 5px;}
form .col							{ width:48.5%; }
form .label							{ margin-bottom:10px; }
form .value 						{ color: #888;}
form .field-tip-icon 				{ color: #aaa; font-size: 14px; margin-left: .3em; cursor: pointer;}
form .option-label					{ margin-right: 20px;}
form .option-label input			{ margin-right: 5px;}
form .option-rows 					{ display: flex; flex-wrap: wrap;}
form .option-rows .option-row		{ margin-right: 30px;}
form input[type="text"],
form input[type="date"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form textarea,
form select							{ width:100%; height: 42px; padding:.6em 1em; background:#f7f7f7; border:1px solid #dfdfdf; border-radius:4px; font-family:inherit; outline:none; -webkit-appearance: none; -moz-appearance: none; }
form textarea						{ height:120px; }
form textarea.long 					{ height: 270px;}
form select							{ padding:5px; }
form button							{ font-family:inherit; outline:none; }
form button[type="submit"] 			{ display: inline-block; }
form input:-webkit-autofill,
form input:-webkit-autofill:hover, 
form input:-webkit-autofill:focus   { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; }  
form .error							{ display:block; text-align:right; margin-top:5px; color:#d54449; font-size:.96em; line-height:1.25em; }
form .result						{ margin-top:20px; color:#666; }
form .row.right 					{ text-align: right;}
form .right .button 				{ display: inline-block; margin-left:3px;}
form .right button[type="submit"] 	{ transform: translateY(-1px);}
form hr 							{ margin: 25px 0;  }
form input.inline-editor		  	{ padding: 0; background: none; border: none; height: auto; font-size: 1.3em; font-weight: 500;}
form input.inline-editor.big-text 	{ font-size: 1.6em;} 
form input[type="color"]  			{ width: 34px; height: 36px; border:none; background-color: transparent; position: absolute; right: 5px; top: 3px; }
form input::placeholder,
form textarea::placeholder 			{ color: #aaa;  font-weight: 400; }
form input:disabled,
form input.disabled,
form button:disabled,
form button.disabled	 					{ pointer-events: none; opacity: .5; }
form .form-result							{ margin-top: 20px;}


form.inplace-editor							{ padding-left: 2px; flex-grow:1;}
form.inplace-editor input					{ margin-right: 4px; padding:0 .6em; width: 100%; height: 36px; }
form.inplace-editor button[type="submit"] 	{ height: 36px; white-space: nowrap; background: none; border: none; outline: none; color: #666;}
form.inplace-editor button:disabled			{ color: #888;}
.inplace-editor-handle 			   			{ cursor: pointer;}

button 										{ font-family: inherit; font-weight: 500 !important;}
button.text-button 							{ border: none; background: none; color: #666; display: inline-block; cursor: pointer;}
button.text-button:hover 					{ color: #000;}
button.text-button i 						{ margin: 0 4px 0 0;}

.custom-radio 								{ display: none;}
.custom-radio:checked + .button 			{ background-color: var(--theme-bg-color); color: #fff !important;}

/** Misc. **/
.right												{ text-align:right; }
.center												{ text-align:center; }
.clear												{ clear:both; }
.mobile-element 									{ display: none;}
.hidden 											{ display: none;}
.boost 												{ /*content-visibility: auto; contain-intrinsic-size: 200px;*/ /* This will cause scrollIntoView works incorrect */ }
.no-wrap 											{ white-space: nowrap;}

/** 404 **/
.http-error											{ padding:100px 4%; text-align: center; position:fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);}
.http-error .code									{ font-size: 4em ; margin-bottom: .4em; color: #999;}
.http-error	.message								{ font-size: 1.2em; font-weight: 500; color: #999; margin-bottom: 4em;}

/** Custom scrollbar **/
.custom-scrollbar::-webkit-scrollbar 							{ width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-track 						{ background: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb 						{ background: var(--scrollbar-thumb); min-height: 80px; border-radius: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover 				{ background: var(--scrollbar-thumb); }
 
/** fr-view **/
.fr-view														{ font-size: 1.05em; line-height:1.7em; }
.fr-view h3														{ font-size: 1.25em; margin-bottom: .4em !important; font-weight: 500;}
.fr-view h4														{ font-size: 1.15em; margin-bottom: .4em !important; font-weight: 500;}
.fr-view h5 													{ font-size: 1.05em;  margin-bottom: .4em !important; font-weight: 500; }
.fr-view ul														{ list-style:disc; padding-left:0; }
.fr-view ul li 													{ list-style:inherit; margin: 0 0 5px 20px;}
.fr-view ol														{ list-style:decimal; padding-left:0;}
.fr-view ol li 													{ list-style:inherit; margin: 0 0 5px 20px; text-indent: 0;}

.fr-view ol[style~="cjk-ideographic-parentheses;"],
.fr-view ol[style~="decimal-parentheses;"],
.fr-view ol[style~="lower-alpha-parentheses;"],
.fr-view ol[style~="upper-alpha-parentheses;"]					{ counter-reset: list; padding-left: 0; }

.fr-view ol[style~="cjk-ideographic-parentheses;"] > li,
.fr-view ol[style~="decimal-parentheses;"] > li,
.fr-view ol[style~="lower-alpha-parentheses;"] > li,
.fr-view ol[style~="upper-alpha-parentheses;"] > li				{ list-style: none; margin-left: 1.9em; text-indent: -1.9em; }

.fr-view ol[style~="cjk-ideographic-parentheses;"] > li			{ margin-left: 2.2em; text-indent: -2.2em; }
.fr-view ol[style~="cjk-ideographic;"] > li 					{ margin-left: 2.4em; }

.fr-view ol[style~="cjk-ideographic-parentheses;"] > li::before,
.fr-view ol[style~="decimal-parentheses;"] > li::before,
.fr-view ol[style~="lower-alpha-parentheses;"] > li::before,
.fr-view ol[style~="upper-alpha-parentheses;"] > li::before		{ counter-increment: list; margin-right: .4em; }

.fr-view ol[style~="cjk-ideographic-parentheses;"] > li::before	{ content:"(" counter(list, cjk-ideographic) ") "; margin-right: .3em; }
.fr-view ol[style~="decimal-parentheses;"] > li::before			{ content:"(" counter(list, decimal) ") "; }
.fr-view ol[style~="lower-alpha-parentheses;"] > li::before		{ content:"(" counter(list, lower-alpha) ") "; }
.fr-view ol[style~="upper-alpha-parentheses;"] > li::before		{ content:"(" counter(list, upper-alpha) ") ";  }

.fr-view img							{ /*cursor:default !important;*/ cursor: pointer; }
.fr-view img.fr-dib						{ /*margin: 0; */ }
.fr-view img.fr-blend-multiply,
.fr-view .fr-blend-multiply img 		{ mix-blend-mode: multiply;}
.fr-view img.fr-blend-darken,
.fr-view .fr-blend-darken img 			{ mix-blend-mode: darken;}
.fr-view a > img						{ cursor:pointer !important; }
.fr-view p a,
.fr-view li a 							{ text-decoration:none; background-color: var(--soft-bg-color); color: var(--theme-text-color); border-radius: 4px; margin: 0 .2em; padding: 0 .2em; }
.fr-view a[target="_blank"] 			{ position: relative; }
.fr-view a[target="_blank"]::after 		{ content: "\0f14c"; font: var(--fa-font-regular); font-size: 12px; margin-left: 3px;}
.fr-view a[target="_blank"]:has(> span[style^="color"])::after { content: '';}
.fr-view a[target="_blank"] > span[style^="color"]::after { content: "\0f14c"; font: var(--fa-font-regular); font-size: 12px; margin-left: 3px; }
.fr-view a.lightgallery					{ border: none; }
.fr-view a.lightgallery::after 			{ display: none;}
.fr-view a.fr-file						{ padding: 0;}
.fr-view a.fr-file::after 				{ display: none;}
.fr-view a.def-link						{ margin: 0; padding: 0 .1em; background: none; color: var(--def-text-color); }
.fr-view a.def-link::after				{ display: none;}
.fr-view p a.button 					{ background-color: var(--theme-bg-color); color: #fff; padding: 0 1em; height: 36px; line-height: 36px; font-size: 1rem; }
.fr-view p a.button::after				{ display: none;}
.fr-view sup 							{ line-height:0; }
.fr-view blockquote						{ border-radius: 5px; border-left:none !important; background:#f5f5f5; color:#555 !important; padding:1.1em; }
.fr-view strong							{ font-weight: 500;}
.fr-view .table-container 				{ overflow: auto; margin: 10px 0; }
.fr-view .table-container.is-overflow	{ border-right: 1px solid var(--light-border-color);}
.fr-view .fr-file::after 				{ display: none;}
.fr-view .fr-file::before 				{ content: "\0f019"; font: var(--fa-font-regular); margin-right: 5px; }
.fr-view .fr-class-emphasized,					
.fr-view .fr-class-highlighted			{ color: #E25041; background: none !important;}
.fr-view .fr-class-marked				{ background: #ffff00;}
.fr-view .fr-class-underline			{ text-decoration: underline;}
.fr-view .fr-class-line-through			{ text-decoration:line-through;}
.fr-view .fr-img-caption 				{ max-width: 100%;}
.fr-popup								{ z-index: 999999999 !important;}

.fr-view table:not(.law-table).fr-seperated-borders 							{ border-color: var(--softer-border-color); border-left: none !important; border-right: none !important; }
.fr-view table:not(.law-table).fr-seperated-borders tr th:nth-child(n),
.fr-view table:not(.law-table).fr-seperated-borders tr td:nth-child(n) 			{ border-color: var(--softer-border-color); border-left: none !important; border-right: none !important; background: none !important; color: inherit !important; padding: 8px 20px; position: relative; width: auto !important; }
.fr-view table:not(.law-table).fr-seperated-borders tr th::before,
.fr-view table:not(.law-table).fr-seperated-borders tr td::before 				{ content: ''; position: absolute; left: 0; top: 13px; height: 1em; border-left: 1px solid var(--softer-border-color);}
.fr-view table:not(.law-table).fr-seperated-borders tr th:first-child,
.fr-view table:not(.law-table).fr-seperated-borders tr td:first-child			{ padding-left: 0;}
.fr-view table:not(.law-table).fr-seperated-borders tr th:first-child::before,
.fr-view table:not(.law-table).fr-seperated-borders tr td:first-child::before	{ display: none;}
.fr-view table:not(.law-table).fr-seperated-borders tr th:first-child,
.fr-view table:not(.law-table).fr-seperated-borders tr td:first-child			{ min-width: 60px; white-space: nowrap;}
.fr-view table:not(.law-table) .fr-light 										{ background-color: whitesmoke;}
.fr-view table:not(.law-table) .fr-white 										{ background-color: #fff; }
body:not(#database-term-edit) .fr-view .fr-hidden-data 							{ display: none !important;} 

.fr-view .paragraph-column2											{ width: auto !important; margin: 20px 0; display: flex; justify-content: space-between; align-items: center; }
.fr-view .paragraph-column2.reverse 								{ flex-direction: row-reverse;}
.fr-view .paragraph-column2 .col 									{ width: 45%;}
.fr-view .paragraph-column2 img 									{ border-radius: 20px;}


/** fr-editor **/
.fr-box.fr-basic .fr-wrapper 										{ border-color: #dfdfdf !important;}
.fr-box.fr-basic .fr-element										{ font-family: inherit;}
.fr-box.fr-inline .fr-command.fr-btn.html-switch i					{ font-size: 14px; width: 14px; }
.fr-box .fr-toolbar.fr-top 											{ border-radius: 3px !important; border-color: #dfdfdf !important;}
.fr-second-toolbar 													{ border-radius:0 0 4px 4px !important; border-color: #dfdfdf !important;}
.fr-toolbar.fr-top													{ border-radius:4px 4px 0 0 !important; }
.fr-toolbar.fr-inline 												{ margin-top: 15px;}
.fr-toolbar .fr-newline												{ margin-left: 0; margin-right: 0;}
.fr-toolbar .fr-command.fr-btn.fr-active, 
.fr-popup .fr-command.fr-btn.fr-active, 
.fr-modal .fr-command.fr-btn.fr-active 	{ color: #0079fb;}
.fr-popup .fr-tabs .fr-command.fr-btn 								{ height: 46px;}
.fr-popup .fr-tabs .fr-command.fr-btn i 							{ width: 32px;}
.fr-dropdown-list h3  												{ font-size: 16px !important; }
.fr-dropdown-list h4  												{ font-size: 15px !important; }
.fr-dropdown-list h5  												{ font-size: 14px !important; }
.fr-modal-body .fr-image-list .fr-image-container .fr-delete-img,
.fr-modal-body .fr-image-list .fr-image-container .fr-insert-img 	{ padding: 0 !important;}
.fr-qi-helper a.fr-btn.fr-floating-btn								{ padding: 0;}
.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a i { margin: .5em 0; }
#tuiContainer, .tribute-container									{ z-index: 9999999999 !important;}
.jconfirm-content-pane .fr-toolbar.fr-sticky-on 					{ top: 52px !important; /* Fix toolbar sticky issue when toolbar show inside jquery-confirm dialog*/ }

.fr-toolbar.fr-top 													{ position: sticky !important; }
.jconfirm-content-pane .fr-toolbar.fr-top 							{ z-index: 99 !important;}


/** Lightgallery **/
.lg-backdrop 							{ background-color: rgba(0,0,0,.8);}
.lg-toolbar .lg-icon					{ color: #ddd;}
.lg-outer .lg-object					{ max-width: 90%; max-height: 90%;}
.lg-toolbar .lg-close:after 			{ content: '\f057'; font: var(--fa-font-light); font-size: 1.3em; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;}

/** Reaadmore **/
.readmore 								{ overflow: hidden; transition: height .2s; position: relative;}
.readmore + .more,
.readmore + .less  						{ display: inline-block; margin-top: 15px; color: #888;}
.readmore + .more:hover,
.readmore + .less:hover 				{ color: #222;}
.readmore[aria-expanded="false"]::after	{ pointer-events: none; content: ''; position: absolute; left: 0; right: 0; bottom:0; height: 50%; max-height: 60px; background: linear-gradient(180deg, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%); opacity: 1; visibility: visible; transition:opacity .3s, visibility 0s; }
.readmore[aria-expanded="true"]::after	{ pointer-events: none; content: ''; position: absolute; left: 0; right: 0; bottom:0; height: 50%; max-height: 60px; background: linear-gradient(180deg, rgba(242,242,242,0) 0%, rgba(242,242,242,1) 100%); opacity: 0; visibility: hidden; transition:opacity .3s, visibility 0 .3s;}

/** Flex layout **/
.flex         				      		{ display:flex; }
.flex-center  				  	 		{ display:flex; align-items:center; }
.flex-right  				  	 		{ display:flex; justify-content:flex-end; }
.flex-top  				  	 			{ display:flex; align-items:flex-start; }
.flex-stretch 				  	 		{ display:flex; align-items:stretch; }
.flex-justify 				  	 		{ display:flex; justify-content:space-between; }
.flex-evenly  				  	 		{ display:flex; justify-content:space-evenly; }
.flex-reverse 				 	  		{ display:flex; flex-direction:row-reverse; }
.flex-wrap 				 	  			{ display:flex; flex-wrap:wrap; }
.flex-vertical 				 	  		{ display:flex; flex-direction: column; }
.flex-grow 								{ flex-grow: 1;}
.flex-shrink 							{ flex-shrink: 1;}
.flex-not-grow 							{ flex-grow: 0;}
.flex-not-shrink 						{ flex-shrink: 0;}

/** Column layout **/
.column-2 							    { display:flex; flex-wrap:wrap; }
.column-2 .col-item 				    { width:48.5%; margin-top:2%; margin-right: 3%; }
.column-2 .col-item:nth-child(2n)	    { margin-right:0; }
.column-2 .col-item:nth-child(-n+2)    	{ margin-top:0; }

.column-3 								{ display:flex; flex-wrap:wrap; }
.column-3 .col-item 					{ width:32%; margin-right:2%; margin-top:2%; }
.column-3 .col-item:nth-child(3n)       { margin-right:0; }
.column-3 .col-item:nth-child(-n+3)     { margin-top:0; }

.column-4 								{ display:flex; flex-wrap:wrap; }
.column-4 .col-item			 			{ width:22.75%; margin-right:3%; margin-top:2%; }
.column-4 .col-item:nth-child(4n) 		{ margin-right:0; }
.column-4 .col-item:nth-child(-n+4) 	{ margin-top:0; }

.column-5 								{ display:flex; flex-wrap:wrap; }
.column-5 .col-item			 			{ width:18.4%; margin-right:2%; margin-top:2%; }
.column-5 .col-item:nth-child(5n) 		{ margin-right:0; }
.column-5 .col-item:nth-child(-n+5) 	{ margin-top:0; }

/** Menu horizontal **/
.menu-horizontal						{ margin-bottom: 30px; }
.menu-horizontal li						{ display: inline-block; margin-right: 30px;}
.menu-horizontal li.active				{ text-decoration: underline; }

/** Thumb **/
.thumb,
.thumb-sq,
.thumb-rect,
.thumb-banner,
.thumb-vl								{ width: 100%; overflow:hidden; position:relative; display: block; }
.thumb img,
.thumb-sq img,
.thumb-rect img,
.thumb-banner img,
.thumb-vl img							{ width:100%; transition:all .6s; }
.thumb.zoom:hover img,
.thumb-sq.zoom:hover img,
.thumb-rect.zoom:hover img,
.thumb-banner.zoom:hover img,
.thumb-vl.zoom:hover img				{ transform:scale(1.1, 1.1); }
.thumb-sq								{ height: 0; padding-top:100%; }
.thumb-rect								{ height: 0; padding-top:67%; }
.thumb-banner							{ height: 0; padding-top:46.875%; }
.thumb-vl								{ height: 0; padding-top:140%; }
.thumb-sq img,
.thumb-rect img,
.thumb-banner img,
.thumb-vl img							{ position:absolute; left:0; top:0; right:0; bottom:0; width:auto; height:auto; max-width:100%; max-height:100%; margin:auto;}
.thumb.fill img,
.thumb-sq.fill img,
.thumb-rect.fill img,
.thumb-banner.fill img,
.thumb-vl.fill img 						{ object-fit:cover; width:100%; height:100%; max-width:none; max-height:none;}
.thumb .mask::after 					{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.02); transition: all .4s;}
.thumb:hover .mask::after				{ background-color: rgba(0,0,0,0);}

/** Thumb info **/
.thumb-info								{ padding: 15px 0;}
.thumb-info	.subtitle					{ margin-bottom: 8px; }
.thumb-info	.title						{ font-size: 1.2em; line-height: 1.2em;}
.thumb-info	.summary					{ margin-top: 10px; color: #888;}

/** Zoom button **/											
.zoom-button							{ position: absolute; right: 15px; top: 15px; opacity: 0; transition: opacity .4s; cursor: pointer; }
.is-selected .zoom-button				{ opacity: 1; transition: opacity .4s .6s; }

/** Button **/
.button,
.button-md,
.button-lg,
.button-sq							  	{ display:inline-block; padding:0 1.1em; transition:background .2s; white-space:nowrap; cursor: pointer; transition: all .2s;
											background:var(--theme-bg-color); color:#fff; border:none; text-align: center; text-decoration: none !important; }
.button									{ height: 38px; line-height: 36px; border-radius:4px; font-size:1em; }
.button-md				  	  			{ height: 42px; line-height: 40px; border-radius:6px; font-size:1.1em; }									
.button-lg				  	  			{ height: 48px; line-height: 46px; border-radius:6px; font-size:1.2em; padding:0 1.4em; }						
.button-xl				  	  			{ height: 56px; line-height: 54px; border-radius:6px; font-size:1.2em; padding:0 1.5em; }	
.button-sq								{ width: 38px; padding: 0; line-height: 38px; }
.button-ft								{ height: 34px; line-height: 32px; letter-spacing: .06em; border-radius:4px; font-size:1em; }
.button-ft.button-sq 					{ width: 36px;}
.button i			   		  			{ margin-right:.5em; }							
.button-ft i 							{ transform: scale(.8, .8); margin-right: 5px; }
.button-sq i			   		  		{ margin-right:0; font-size: 18px; color:var(--light-bg-color); }
.button:hover,
.button-md:hover,
.button-lg:hover						{ filter: brightness(95%); }	
.button-wrapper							{ display:block; }
.button.disabled,
.button-md.disabled,
.button-lg.disabled						{ pointer-events: none; opacity: .6;}	
.button-white 							{ background-color: #fff; color: #666;}
.button-white:hover 					{ background-color: var(--theme-bg-color); color: #fff;}
.button-border 							{ background-color: #fff; border: 1px solid #A1B5B6; color:var(--theme-text-color); }
.button-border:hover 					{ background-color: var(--soft-bg-color); }
.button-gray 							{ border: 1px solid #f3f4f6; background: #f3f4f6; color: #666; transition: all .2s;}	
.button-gray i 							{ color: var(--theme-text-color);}
.button-gray:hover 						{ border: 1px solid var(--light-bg-color); background-color: #fff; color: var(--theme-text-color); box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}				
.button-light 							{ border: 1px solid var(--light-bg-color); background: var(--light-bg-color); color: var(--theme-text-color); transition: all .2s;}	
.button-light:hover 					{ border: 1px solid var(--theme-bg-color); background-color: var(--theme-bg-color); color: #fff; box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}																																
.button-mid 							{ border: 1px solid var(--midtone2-bg-color); background: var(--midtone2-bg-color); color: #fff; transition: all .2s;}	
.button-mid:hover 						{ border: 1px solid var(--theme-bg-color); background-color: var(--theme-bg-color); color: #fff; box-shadow:none; filter: none;}	
.button-mid2 							{ border: 1px solid #A4B9BA; background-color: #A4B9BA; color: #fff; transition: all .2s;}	
.button-mid2:hover 						{ border: 1px solid #003F40; background-color: #003F40; color: #fff; filter: none;}
.button-soft 							{ border: 1px solid var(--light-bg-color); background-color: #fff; color: var(--theme-text-color); border-radius: 4px; box-shadow: 2px 2px 6px rgba(0,63,64,.1); transition: all .2s;}
.button-soft i 							{ color: var(--theme-text-color); }
.button-soft:hover 						{ background-color: var(--light-bg-color); color: var(--theme-text-color) !important; filter: none; }
.button-article-light 					{ background-color: #fff; color: #2f6a6b; min-width: 140px; margin-right: 8px; border: 1px solid #2f6a6b; border-radius: 8px; box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}
.button-article-light:hover 			{ background-color:#2f6a6b; color: #fff; filter: none;}
.button-article-dark 					{ background-color: #2f6a6b; color: #fff; min-width: 140px; margin-right: 8px; border: 1px solid #2f6a6b; border-radius: 8px; box-shadow: 3px 3px 12px rgba(0,63,64,.15); filter: none;}
.button-article-dark:hover 				{ background-color:#fff; color: #2f6a6b; filter: none;}
.button-highlighted 					{ background-color: #D7C79D; border:1px solid #D7C79D; color: #fff;  }
.button-highlighted:hover 				{ background-color: #fff; color: #D7C79D; box-shadow: 3px 3px 10px rgba(240,222,174,.3); animation: cta-flash 2s linear infinite; }
.button-full 							{ width: 100%; text-align: center;}
.button-round 							{ padding-left: 1.5em; padding-right: 1.5em; border-radius: 50px;}

/** Play button **/
.play-button							{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block; width:var(--play-button-size); height:var(--play-button-size); background-color:var(--play-button-bg); border-radius:50%; box-shadow: 2px 2px 5px rgba(0,0,0,.1); transition:opacity .4s; cursor: pointer; z-index: 1; }
.play-button:after						{ content:''; position:absolute; left:50%; top:50%; transform:translate(-20%, -50%); border-left:calc(var(--play-button-size) * .3) solid var(--play-button-text); border-right:12px solid transparent; border-top:calc(var(--play-button-size) * .18) solid transparent; border-bottom:calc(var(--play-button-size) * .18) solid transparent;  }											

/** Link **/
.link									{ font-size:1.05em; }
.link i									{ margin-left:.8em; }
.link-wrapper				  			{ display:block; }

/** Tag **/
.tag-list								{ }
.tag-list .tag							{ display:inline-block; margin:0 2px 5px 0 !important; }
.tag-list .tag a,
.tag-list .tag span						{ display:inline-block; padding:.4em .76em; background:#ddd; color:#555; border-radius:25px; font-size:.96em; white-space:nowrap; transition:all .2s; }
.tag-list .tag a:hover,
.tag-list .tag a.active					{ background:var(--theme-color) !important; }
.tag-list .tag a i						{ margin-left:6px; font-size:12px; }
.tag-list.lg .tag						{ margin:0 4px 8px 0 !important; }
.tag-list.lg .tag a 					{ font-size: 1.1em; padding:.7em 1.2em; font-weight: 500; background-color: #fff;}
.tag-list.md .tag						{ margin:0 4px 8px 0 !important; }
.tag-list.md .tag a 					{ font-size: 1em; padding:.6em 1.1em; font-weight: 500; background-color: #fff;}
.tag-list.use-css-icon a.active::after 	{ content: '\f00d'; font: var(--fa-font-regular); font-size: 12px; margin-left: 8px; }

/** Tab **/
.tab-wrapper 							{ width: 100%;}
.tab-wrapper .tabs						{ display: flex; }
.tab-wrapper .tabs .tab 				{ margin-right: 1px; cursor: pointer; background-color: #f0f0f0; white-space: nowrap; font-size: 1.18em; letter-spacing: .04em; padding: .8em 1.2em; border-radius: 8px 8px 0 0; position: relative; }
.tab-wrapper .tabs .tab.active 			{ background-color: #fff; color: #444; box-shadow: 0 0 8px rgba(0,0,0,.1);}
.tab-wrapper .tabs .tab.active::after	{ content: ''; position: absolute; left: 0; right: 0; bottom:-8px; height: 8px; background-color: #fff;}
.tab-wrapper .tab-body .set				{ display: none; padding: 40px 4% 45px 4%; background-color: #fff; }
.tab-wrapper .tab-body .set.active 		{ display: block; border-radius: 0 8px 8px 8px; box-shadow: 0 6px 15px rgba(0,0,0,.1); }

.tab-toolbar							{ margin-bottom: 30px; background-color: #fff;}
.tab-toolbar.sticky						{ padding: 10px 0; z-index: 999;}
.tab-toolbar .lt 						{ flex-grow: 1; max-width: 450px;}
.tab-toolbar .lt .button 				{ margin-right: 5px;}
.tab-toolbar .rt .button 				{ margin-left: 5px;} 

.tab-toolbar-search-from				{}
.tab-toolbar-search-from input			{ border-radius: 4px 0 0 4px !important;}
.tab-toolbar-search-from button			{ width: 42px; height: 42px; text-align: center; color: #666; background-color:var(--light-bg-color); border: 1px solid #d2d2d2; border-left: none; border-radius: 0 4px 4px 0;}
.tab-toolbar-search-from				{}

/** Status tag **/
.status-tag								{ background-color: var(--light-bg-color); color: var(--theme-text-color); padding: 7px; border-radius: 5px; font-size: 13px; }
.status-tag i 							{ margin-right: 3px;}
.status-0								{ opacity: .6; transition: opacity .4s;}
.status-0:hover 						{ opacity: 1; }

/** Sharer **/
.social-share 									{ padding: 15px 0;}
.social-share .sharer-label 					{ margin-right: 15px;}
.social-share .sharer-icons						{ }
.social-share .jssocials-share-link 			{ border-radius: 50%; border: none !important; font-size:.8em; }
.social-share .jssocials-share-link:hover 		{ color: #000; }

/** Breadcrumbs **/
.breadcrumbs							{ display:flex; flex-wrap: wrap; flex-grow:1; margin-bottom: 15px; }
.breadcrumbs .item						{ white-space:nowrap; color: #666; margin: 3px 0; }
.breadcrumbs .item:after				{ content: "|"; margin:0 .7em 0 .5em; font-size:.9em; position: relative; top:-.1em; }
.breadcrumbs .item:last-child			{ margin-right:0; }
.breadcrumbs .item:last-child:after  	{ display:none; }
.breadcrumbs a[href]:hover 				{ color: var(--theme-text-color);}

/** Dropodown menu **/
.dropdown								{ position:relative; }
.dropdown .label						{ cursor:pointer; }
.dropdown .menu							{ z-index: 99; position:absolute; left:-10px; padding-top: 12px; display:none; }
.dropdown .menu > *						{ background: #fff; padding:5px 20px; width: 270px; }
.dropdown .menu li						{ margin:14px 0; white-space:nowrap; color: #666; }
.dropdown .menu li i 					{ margin-right: 5px;}
.dropdown:not(.dropdown-click):hover .menu,
.dropdown-click.opened .menu 			{ display:block; }
.dropdown .menu.right					{ left: auto; right: -10px; text-align: left;}

.dropdown-button						{ display: flex; align-items: center;}
.dropdown-button .button 				{ height: 36px; border-radius: 0; }
.dropdown-button .label 				{ margin: 0;  height: 36px; border-radius: 0 4px 4px 0; }
.dropdown-button .label i 				{ margin: 0;}

/** Pagination **/
.pagination 							{ margin-top:30px; display:flex; justify-content: center; }
.pagination a,
.pagination span 						{ margin: 0 10px; padding:4px 2px; font-size: 1.1em; display:inline-block; line-height:normal; color:#999; border-bottom: 1px solid transparent; }
.pagination a:hover 					{ color:var(--theme-bg-color);}
.pagination .active	span				{ color:var(--theme-bg-color); border-bottom: 1px solid var(--theme-bg-color); }
.pagination .prev						{ font-size:1.2em; }
.pagination .next						{ font-size:1.2em; }
.pagination .pager						{ display: none;}

/** List table **/
.list-table										{ display: table; width: 100%;}
.list-table li									{ display: table-row; width: 100%;}
.list-table li > div							{ display: table-cell; border-bottom:1px solid #ddd; padding: 1em 1em; color: #666; line-height: 1.2em; vertical-align: middle;}
.list-table li > div.right 						{ text-align: right;}
.list-table li > div.tags						{ width: 20%; padding: .8em .4em .4em 0; }
.list-table li.header > div 					{ padding: .8em 1em; font-weight: 500; color: #222; background-color: var(--light-bg-color); border-bottom: none; border-right: 2px solid #fff; }
.list-table li.header > div:last-child			{ border-right: none;}
.list-table li:not(.header) .title 				{ padding-left: 8px;}
.list-table.lite li.header > div 				{ background: none; color: var(--theme-text-color); border-bottom: 1px solid #ddd;}
.list-table.lite li > div 						{ padding: .6em 1em;}
.list-table.lite li > div:first-child			{ padding-left: 0;}
.list-table.lite li > div:last-child			{ padding-right: 10px;}

.list-table										{ display: table; width: 100%; border: none !important;}
.list-table tr									{ display: table-row; width: 100%;}
.list-table tr > td								{ display: table-cell; border-bottom:1px solid #ddd; border-left: none; border-right: none; padding: 1em 1em; color: #666; line-height: 1.2em; vertical-align: middle;}
.list-table tr > td.right 						{ text-align: right;}
.list-table tr > td.tags						{ width: 20%; padding: .8em .4em .4em 0; }
.list-table tr.header > td 						{ padding: .8em 1em; font-weight: 500; color: #222; background-color: var(--light-bg-color); border: none; }
.list-table tr.header > td:last-child			{ border-right: none;}
.list-table tr:not(.header) .title 				{ padding-left: 8px;}
.list-table.lite tr.header > td 				{ background: none; color: var(--theme-text-color); border-bottom: 1px solid #ddd;}
.list-table.lite tr > td 						{ padding: .6em 1em;}
.list-table.lite tr > td:first-child			{ padding-left: 5px;}
.list-table.lite tr > td:last-child				{ padding-right: 10px;}

/** Sortable table **/
.tablesorter-header													{ cursor: pointer; }
.tablesorter-header-inner											{ position: relative; }
.tablesorter-header-inner::after 									{ font: var(--fa-font-light); font-weight: 900; font-size: .88em; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.tablesorter-headerUnSorted .tablesorter-header-inner::after		{ content: "\0f0dc"; }
.tablesorter-headerAsc .tablesorter-header-inner::after				{ content: "\0f0de"; }
.tablesorter-headerDesc .tablesorter-header-inner::after			{ content: "\0f0dd"; }

/** Sortable item **/
.sort-handle							{ cursor: move; font-size: 14px; color: #888; width: 0; overflow: hidden;  margin: 0; pointer-events: all; transition: all .2s;}
.sortable .sort-handle					{ width: 14px; margin-right: 10px; flex-shrink: 0; }
.sortable a								{ pointer-events: none;  }

/** Tips **/
.tips											{ width: 100%; border-radius: 4px; background-color:var(--soft-bg-color); color:var(--theme-text-color); padding:.8em; margin-bottom: 8px; line-height: 1.2em;}
.tips.light 									{ background-color: #e2e2e2; }
.tips i											{ margin-right: 5px;}
.tips.warning i									{ color: #ce3939; }
.tips.notice i									{ color: orange; }
.tips.success i									{ color: #4cc12f; }
.tips .buttons									{ margin-right: 10px;}
.tips .buttons a 								{ margin-right: 15px; white-space: nowrap;}
.tips .buttons a:last-child						{ margin: 0;}
.tips .buttons a:hover 							{ text-decoration: underline;}
.header-tips .tips:last-child					{ margin-bottom: 25px;}

/** Toaster **/
.jq-toast-wrap 									{ margin-top: 55px; z-index: 999999999 !important; /* Should be higher than select2 menu in Excerpt header */ }
.jq-toast-loader 								{ display: none !important;}
.jq-toast-single								{ border-radius: 20px; padding: 8px 10px; }

/** Confirmation dialog **/
.confirmation h2								{ font-size: 1.6em; margin-bottom: 30px;}
.confirmation p									{ color: #666;}
.confirmation .buttons							{ margin-top: 40px;}
.confirmation .buttons .button 					{ margin-left: 5px;}
.jconfirm .jconfirm-box							{ max-width: 540px; padding: 15px 0; }
.jconfirm .jconfirm-title-c						{ padding: 0 18px; color: var(--theme-text-color);}
.jconfirm .jconfirm-content-pane 				{ padding: 0 18px;}
.jconfirm .jconfirm-buttons						{ padding: 0 18px 5px 18px;}
.jconfirm-box .btn-theme 						{ background-color: var(--theme-bg-color); color: #fff;}
.jconfirm.lazy-appear							{ opacity: 0; visibility: hidden;}
.jconfirm.lazy-appear.appear 					{ opacity: 1; visibility: visible; transition: opacity .2s, visibilibty 0s;}

.jconfirm.dialog-large .jconfirm-box			{ max-width: 1000px; }
.jconfirm.dialog-medium .jconfirm-box 			{ max-width: 800px; }
.jconfirm.dialog-compact .jconfirm-box 			{ max-width: 520px; }
.jconfirm.dialog-small .jconfirm-box 			{ max-width: 320px; }
.jconfirm.dialog-round-md .jconfirm-box 		{ border-radius: 15px;}
.jconfirm.dialog-center-buttons .jconfirm-box .jconfirm-buttons { text-align: center; float: none;}

.jconfirm-content													{ line-height: 1.33em; padding: 3px 0; color: #666; }
.jconfirm .jconfirm-box div.jconfirm-title-c 						{ font-size: 18px; font-weight: 500;}
.jconfirm .jconfirm-box div.jconfirm-closeIcon						{ font-size: 16px !important; font-weight: 500;}
.jconfirm .jconfirm-box div.jconfirm-content-pane					{ margin-bottom: 0;}
.jconfirm .jconfirm-content-pane::-webkit-scrollbar-track 			{ background: var(--scrollbar-track) !important; }
.jconfirm .jconfirm-content-pane::-webkit-scrollbar-thumb 			{ background: var(--scrollbar-thumb) !important; border-radius: 5px; }
.jconfirm .jconfirm-content-pane::-webkit-scrollbar-thumb:hover 	{ background: var(--scrollbar-thumb) !important; }
.jconfirm.circle-close .jconfirm-box								{ overflow: visible;}
.jconfirm.circle-close .jconfirm-box div.jconfirm-closeIcon			{ width: 32px; height: 32px; line-height: 30px !important; text-align: center; right: -15px; top: -15px; font-size: 1.6em !important; font-weight: normal; opacity: 1; border-radius: 50%; background-color: #3f696c; color: #fff;}
.jconfirm .jconfirm-box .jconfirm-buttons 							{ padding-top: 5px; padding-bottom: 0;}

.jconfirm-content,								
div.jconfirm-content-pane.no-scroll,
.jconfirm .jconfirm-box										{ overflow: visible !important; }
.jconfirm .jconfirm-box input[type="text"] 					{ background-color: #fff;}

/** Autocomplete **/
.ui-autocomplete								{ border-radius: 4px; z-index: 99999999; }
.ui-autocomplete-category 						{ font-weight: bold; padding: .2em .4em; margin: .4em .2em; line-height: 1.5; background: #f2f2f2; color: #222; }

/** Datepicker **/
.ui-datepicker									{ width: max-content;}
.ui-datepicker table							{ border: none;}

/** Lightgallery **/
.lg-sub-html									{ font-size: 13px;}

/** Select2 **/
.select2-custom-option img						{ width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar 				{ width: 5px; height: 5px;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track 		{ background: var(--scrollbar-track) !important; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb 		{ background: var(--scrollbar-thumb) !important; border-radius: 5px; width: 60px; height: 60px; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover 	{ background: var(--scrollbar-thumb) !important; }

/** Highlight **/
.highlight,
.highlight-anchor 										{ animation: highlight 1s forwards; }
.highlight-flash-anchor 								{ animation: highlight-flash 1.5s 2 forwards; }

/** Expandable **/
.expandable												{ border-top: 1px solid var(--light-border-color); transition: opacity .4s; }
.expandable:last-child									{ border-bottom: 1px solid var(--light-border-color); }
.expandable > .tips 									{ margin: 20px 0 0 0;}
.expandable-title										{ padding: 25px 3px; }
.expandable-title .expandable-handle					{ position: relative; display: inline-block; flex-shrink: 0; flex-grow: 0; width: 24px; height: 24px; margin-right: 5px; margin-left: 10px; color: #999; cursor: pointer;}
.expandable-title .expandable-handle i 					{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); transition: all .4s; }
.expandable.show .expandable-title .expandable-handle i	{ transform: translate(-50%, -50%) rotate(180deg);}
.expandable-title .buttons .sort-handle 				{ cursor:move; width: 0; overflow: hidden; }
.expandable-title h2 									{ margin: 0; }
.expandable-body										{ padding: 0 0 20px 0; display: none;  }
.expandable-body > .fr-view 							{ overflow-x:auto; }
.expandable-body .buttons 								{ margin-top: 15px;}
.expandable-body .buttons > div							{ margin-right: 24px; color: #999; cursor: pointer; display: inline-block; transition: color .2s; }
.expandable-body .buttons > div:hover 					{ color: #555;}
.expandable-body .buttons i 							{ margin-right: 1px;}
.expandable-body .tips 									{ margin: 0 0 15px 0; }
.expandable-body .tips .buttons 						{ margin-top: 0;}
.expandable.show .expandable-body 						{ display: block;}
.expandable.show .expandable-handle i					{ transform: rotate(180deg);}
.expandable.sortable .buttons .sort-handle 	 			{ width: 10px; }

/** Style box **/
.box-shadow												{ box-shadow: 0 0 2px rgba(0,63,64,.2);} 
.box-shadow-sm											{ box-shadow: 0 2px 6px rgba(0,63,64,.08);} 
.box-shadow-md											{ box-shadow: 0 4px 10px rgba(0,63,64,.08);} 
.box-shadow-lg											{ box-shadow: 0 0 15px rgba(0,63,64,.08);} 
.box-shadow-soft 										{ box-shadow: 3px 3px 10px rgba(0,63,64,.12); }
.box-round 												{ border-radius: 4px;}
.box-round-md 											{ border-radius: 8px;}
.box-round-lg 											{ border-radius: 15px;}
.box-border 											{ border: 1px solid var(--soft-border-color); }
.box-border-light 										{ border: 1px solid var(--light-border-color); }
.box-group												{ border-radius: 15px; box-shadow: 0 0 15px rgba(0,63,64,.15); padding: 40px 4%; margin-top: 25px; }
.box-group:first-child									{ margin-top: 0;}

/** Comment box **/
.comment-box											{ flex-grow: 1; width: 100%; margin:0; padding: 25px 0; border-top: 1px solid #ddd; }
.comment-box:last-child									{ padding-bottom: 10px;}
.comment-box .icon										{ flex-shrink: 0; width: 40px; margin-right: 20px;}
.comment-box .icon img 									{ width: 100%; border-radius: 50%;}
.comment-box .text										{ flex-grow: 1; }
.comment-box .subject 									{ font-size: 1.15em; font-weight: 500; color: #555; margin-bottom: 5px; }
.comment-box .fr-view									{ line-height: 1.5em; margin-bottom: 15px; word-break: break-all;}
.comment-box .footer 									{ color: #999; font-size: .95em; line-height: 1.2em;}
.comment-box .toolbar > div 							{ margin-left: 20px; cursor: pointer; transition: color .2s;}
.comment-box .toolbar > div:first-child					{ margin-left: 0;}
.comment-box .toolbar > div:hover 						{ color: #555;}
.comment-box .toolbar i 								{ margin-right: 2px;}
.comment-box .info i									{ margin-right: 4px;}
.comment-box .info a 									{ text-decoration: underline;} 


/** Meta info box **/
.meta-info-box 											{ border-radius: 15px; border: 1px solid var(--light-border-color); padding: 15px 30px; } 
.meta-info-box p 										{ margin: 5px 0;}
.meta-info-box .label 									{ font-weight: 500; color: var(--theme-text-color); margin-right: 5px; }

/** Issue **/
.issue-target 											{ color: #888;}
.issue-target i 										{ margin: 0 .5em; font-size: .8em;}

/** Toggle switch **/
.switch-toggle .switcher								{ width: 40px; height: 25px; border: 1px solid #ddd; background-color: #f7f7f7; border-radius: 40px; position: relative; cursor: pointer; box-shadow: inset 1px 1px 1px rgba(0,0,0,.08);}
.switch-toggle .switcher::before						{ content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background-color: #ddd; box-shadow: 1px 1px 1px rgba(0,0,0,.08);; transition: all .2s;}
.switch-toggle [type="checkbox"] 						{ display: none;} 
.switch-toggle [type="checkbox"]:checked + .switcher::before { left: 17px; background-color: var(--theme-bg-color); } 

/** File upload list **/
.file-upload-list 										{ margin-bottom: 15px;}
.file-upload-list:empty 								{ margin-bottom: 0;}
.file-upload-list li									{ margin: 7px 0; padding: 8px 15px; background-color: #f7f7f7; border-radius: 4px; }
.file-upload-list li.dz-success .dz-loading-mark		{ display: none;}
.file-upload-list li.dz-success .dz-success-mark		{ display: block;}
.file-upload-list li.dz-success .dz-remove-mark			{ display: block;}
.file-upload-list li.dz-error .dz-loading-mark			{ display: none;}
.file-upload-list li.dz-error .dz-error-mark			{ display: block;}
.file-upload-list .dz-loading-mark,
.file-upload-list .dz-loading-mark,
.file-upload-list .dz-loading-mark						{ width: 14px; height: 14px; font-size: 12px; position: relative; }
.file-upload-list .dz-loading-mark i,
.file-upload-list .dz-loading-mark i,
.file-upload-list .dz-loading-mark i					{ position: absolute; left: 50%; top:50%; }
.file-upload-list .dz-loading-mark						{ display: block; } 
.file-upload-list .dz-loading-mark i 					{ animation: rotation 1s linear infinite; }
.file-upload-list .dz-success-mark						{ display: none; color: var(--theme-bg-color); } 
.file-upload-list .dz-error-mark						{ display: none; color: #c00; } 
.file-upload-list .dz-filename							{ margin: 0 12px 0 10px; color: var(--theme-text-color); } 
.file-upload-list .dz-size								{ margin-right: auto; color: #999; } 
.file-upload-list .dz-size::before						{ content: '(';}
.file-upload-list .dz-size::after						{ content: ')';}
.file-upload-list .dz-remove-mark						{ color: #999; margin-left: 15px; cursor: pointer; transition: all .4s; display: none; overflow: hidden; }
.file-upload-list .dz-remove-mark:hover 				{ color: #666;}
.file-upload-list .dz-error-message 					{ color: #c00; font-size: 12px; line-height: 1.2em; margin-left: 23px; margin-top: 3px; }
.file-upload-list .sort-handle							{ margin-left: 15px; }
.file-upload-list.sortable .dz-remove-mark				{ width: 0; margin: 0; }
.file-upload-list + .upload-button 						{ display: inline-block; color: #888; margin: 0 0 5px 2px; cursor: pointer; transition: all .2s; }
.file-upload-list + .upload-button:hover 				{ color: var(--theme-text-color); }
.file-upload-list + .upload-button i 					{ font-size: 13px; margin-right: 5px;}

/*
========================
Animation
========================
*/

@keyframes highlight-flash{
	0%		{ background-color: transparent;}
	50%		{ background-color: #EEF2F2;}
	100%	{ background-color: transparent;}
}

@keyframes highlight{
	0%		{ background-color: transparent;}
	100%	{ background-color: #EEF2F2;}
}

@keyframes rotation {
	from 	{ transform:translate(-50%, -50%) rotate(0deg); }
	to 		{ transform:translate(-50%, -50%) rotate(359deg); }
}
	
@keyframes cta-flash {
	from {
		box-shadow: 3px 3px 5px rgba(240, 222, 174, .2);
	}
	50% {
		box-shadow: 3px 3px 20px rgba(240, 222, 174, .9);
	}
	to {
		box-shadow: 3px 3px 5px rgba(240, 222, 174, .2);
	}
}

@keyframes opacity-flash{
	0%		{ opacity: 1;}
	50%		{ opacity: .5;}
	100%	{ opacity: 1;}
}


/*
-----------------------------
For 1024px or less
-----------------------------
*/
							
@media screen and (max-width: 1024px) {

form input[type="text"],
form input[type="date"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form textarea,
form select										{ height: 36px; padding:.4em .7em; }

.meta-info-box 									{ padding: 15px 20px; }

.header-tips .tips:last-child					{ margin-bottom: 15px;}
.expandable-body .tips							{ margin-bottom: 10px;}

}

/*
-----------------------------
For 960px or less
-----------------------------
*/
@media screen and (max-width: 960px) {

.fr-view .paragraph-column2						{ margin: 20px 0; display: block; }
.fr-view .paragraph-column2 .col 				{ width: 100% !important;} 
.fr-view .paragraph-column2 .col:first-child	{ margin-bottom: 20px;}

}


/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {
	
.fr-view table:not(.law-table).fr-seperated-borders tr th:first-child,
.fr-view table:not(.law-table).fr-seperated-borders tr td:first-child			{ white-space:unset;}

.jconfirm.circle-close .jconfirm-box div.jconfirm-closeIcon	{ width: 24px; height: 24px; line-height: 22px !important; right: -12px; top: -12px; font-size: 1em !important;}
}

/*
---------------------------------------------------------
04. /var/www/archidb/public/css/app.css
---------------------------------------------------------
*/


/*
========================
Variable
========================
*/
:root {
	--theme-bg-color: #013f40;
	--theme-bg-transparent: #013f40ef;
	--theme-bg-transparent-2: #013f40dc;
	--midtone2-bg-color: #487B7C;
	--midtone-bg-color: #809FA0;
	--light-bg-color: #c9d8d9;
	--soft-bg-color: #e5eaec;
	--softer-bg-color: rgb(237, 240, 240);
	--anchor-bg-color: #e5eaec;
	--advanced-bg-color : #e7eded;
	--theme-text-color: #013f40;
	--mid-text-color: #025152;
	--mid2-text-color: #809FA0;
	--light-text-color: #A4B9BA;
	--lighter-text-color: #B3C6C6;
	--mid-text-color: #2F6A6B;
	--def-text-color: #2b6f71;
	--theme-border-color: #013f40;
	--mid-border-color: #026f71;
	--mid2-border-color: #809FA0;
	--light-border-color: #A4B9BA;
	--soft-border-color: #bbc9ca;
	--softer-border-color: #cedfe1;
	--scrollbar-track: #d7dfdf;
	--scrollbar-thumb: #0d6263;
	--tooltipster-scrollbar-track: #ffffff;
	--tooltipster-scrollbar-thumb: #A4B9BA;
	--play-button-bg: #f1e4b8;
	--play-button-text: #ffffff;
	--play-button-size: 72px;
	--doc-height: 100%;
}

/*
========================
Elements
========================
*/

/** Header **/
h1 											{ font-size: 2em; }
h2 											{ font-size: 1.4em; }
h3 											{ font-size: 1.3em; }
h4 											{ font-size: 1.2em; }
h5 											{ font-size: 1.1em; }
h6 											{ font-size: 1em; }

/** Select2 **/
.select2-container 																				{ width: 100% !important; }
.select2-container--default .select2-selection--single 											{ height: 36px; border: 1px solid #d2d2d2; outline: none;}
.select2-container--default .select2-selection--single .select2-selection__rendered 			{ line-height: 36px; padding-left: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow 				{ height: 36px; width: 36px; }
.select2-container--default .select2-selection--single .select2-selection__clear				{ font-size: 12px; color: #666; height: 36px; margin-right: 36px;}
.select2-container--default .select2-selection--multiple .select2-selection__choice				{ padding: 5px 0 6px 20px; background-color:#A1B5B6; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove 	{ height: 30px; color: #fff; border-right: none;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display	{ padding: 0 10px 0 3px; color: #fff; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { background-color: #A1B5B6; color: var(--theme-text-color);}
.select2-container--default .select2-selection--multiple										{ min-height: 36px;border: 1px solid #d2d2d2;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--light-bg-color); color: var(--theme-text-color);}
.select2-container--default .select2-results__option--disabled									{ font-weight: 500; color: #444; }
.select2-container--default.select2-container--focus .select2-selection--multiple				{ border: 1px solid #d2d2d2;}
.select2-container .select2-search--inline .select2-search__field								{ margin-left: 8px; margin-top: 10px; height: 22px;}
.select2-dropdown																				{ z-index: 99999999;  border: none; box-shadow: 3px 3px 10px rgba(0,63,64,.12);}
.select2-results__option 																		{ /*white-space: nowrap;*/ color: var(--theme-text-color); padding: .7em 15px; line-height: 1.2em; }
.select2-container--default .select2-results__group												{ padding: .7em 15px; }
.select2-container--default .select2-search--dropdown .select2-search__field					{ outline: none; border-radius: 3px;}

/** fr-view **/
.fr-view table:not(.law-table) 							{ border: none; border-left:1px solid var(--soft-border-color); border-top:1px solid var(--soft-border-color);}
.fr-view table:not(.law-table) th 						{ padding:6px 14px; border: none; border-right:1px solid #fff; border-bottom:1px solid var(--soft-border-color);}
.fr-view table:not(.law-table) td 						{ padding:12px 14px; border: none; border-right:1px solid var(--soft-border-color); border-bottom:1px solid var(--soft-border-color);}
.fr-view table:not(.law-table) th						{ background-color: #809FA1 !important; color: #fff !important;}

.fr-view .pdf-viewer 									{ width: 100%; height: 400px; border: 1px solid #ddd; resize: vertical; }

/** fr-view : image-caption **/
.fr-view .image-caption 								{ max-width:400px; max-height: 82px; overflow: hidden; margin:auto; position: relative; cursor: pointer; }
.fr-view .image-caption.has-overflow::after 			{ content: ''; position: absolute; left: 0; right: 0; bottom:0; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);  }
.fr-view .image-caption .head 							{ margin-bottom:.5em; }
.fr-view .image-caption .desc							{ text-align: left;}

/** Swiper **/
.swiper.lazy-appear 									{ opacity: 0; transition: opacity .4s;}
.swiper.lazy-appear.swiper-initialized 					{ opacity: 1;}

/** Fancybox **/
.fancybox__slide.has-html5video .fancybox__content 		{ height: 80vh !important; width: auto !important; } 

/** Toast **/
.jq-toast-single ul,
.jq-toast-single ul li 									{ list-style: none !important; margin-left: 0; padding-left: 0;}

/** Tooltipster window **/
body:not(.is-responsive) .tooltipster-base 				{ max-height: 70vh;}
.tooltipster-content::-webkit-scrollbar 				{ width: 5px; height: 5px; }
.tooltipster-content::-webkit-scrollbar-track 			{ background: var(--tooltipster-scrollbar-track); }
.tooltipster-content::-webkit-scrollbar-thumb 			{ background: var(--tooltipster-scrollbar-thumb); border-radius: 5px; }
.tooltipster-content::-webkit-scrollbar-thumb:hover 	{ background: var(--tooltipster-scrollbar-thumb); }
.tooltipster-box										{ width: 100%;}
.tooltipster-show										{ z-index: 999999998 !important;}
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box { overflow: hidden; box-shadow: 0 0 7px 3px rgba(0,0,0,.08); }
.tooltipster-sidetip.tooltipster-light .tooltipster-box  { border-radius: 8px; border:1px solid var(--light-border-color); background: #fff; box-shadow: 2px 2px 4px 2px rgba(0,0,0,.02); }
.tooltipster-sidetip.tooltipster-light.tooltipster-left .tooltipster-arrow-background { border-left-color: #fff;}
.tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-background { border-right-color: #fff;}
.tooltipster-sidetip.tooltipster-light.tooltipster-bottom .tooltipster-arrow-background { border-bottom-color: #fff;}
.tooltipster-sidetip.tooltipster-label .tooltipster-content { padding: .2em .6em;}

.desktop-tooltipster .tooltipster-content				{ padding: 10px 30px 25px 30px;}
.desktop-tooltipster .fr-img-caption,
.desktop-tooltipster .fr-img-caption img 				{ max-width: 100% !important;}

.tribute-container 										{ z-index: 999999998 !important;}
.tribute-container li									{ line-height: 1.2em;}
.tribute-dialog											{ padding-top: 65px; }
.tribute-dialog .header 								{ position: absolute; left: 0; right: 0; top: 0; padding: 15px 15px 15px 5px; border-radius: 5px 5px 0 0; background: #fff; z-index: 1; }
.tooltipster-right .tribute-dialog .header 				{ left: 6px;}
.tribute-dialog .title 									{ font-weight: 500; font-size: 1.33em; line-height: 1.2em; color: var(--theme-text-color); margin-bottom: .6em; }
.tribute-dialog .content 								{ line-height: 1.4em; position: relative !important;}
.tribute-dialog .buttons 								{ }
.tribute-dialog .buttons a								{ margin-left: 5px; transition: color .2s;}
.tribute-dialog .popup-link i 							{ transform: rotate(90deg);}
.tribute-dialog.truncated .content::after 				{ content: ''; position: absolute !important; left: 0; bottom:0; right: 0; height: 50px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
.tribute-dialog pre 									{ white-space: pre-wrap;}
.tribute-dialog strong.content-title 					{ color: var(--theme-text-color); margin-bottom: 5px; display: inline-block;}
.tribute-dialog img 									{ width: auto !important;}

/** Confirm **/
/*
.jconfirm .jconfirm-box div.jconfirm-closeIcon			{ right: 17px; top: 12px; width: 28px; height: 28px; line-height: 28px !important; border-radius: 4px; background-color: var(--theme-bg-color); color: var(--light-bg-color); opacity: 1; }
*/
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-theme			{ background-color: var(--theme-bg-color); }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-theme:hover	{ background-color: var(--mid-text-color); }

/** Date range picker **/
.daterangepicker															{ z-index: 99999999;}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td 	{ height: 18px; line-height: 18px;}
.daterangepicker td.in-range												{ background-color: var(--light-bg-color);}
.daterangepicker td.active, .daterangepicker td.active:hover				{ background-color: var(--theme-bg-color);}
.daterangepicker .drp-buttons .btn-primary									{ background-color: var(--theme-bg-color); color: #fff; border-radius: 4px; border: none;}
.daterangepicker .drp-buttons .btn-default									{ background-color: #ecf0f1; border-radius: 4px; border: none;}
.daterangepicker .ranges li.active											{ background-color: var(--theme-bg-color);}

/** Image view dialog **/
.image-dialog										{ z-index: 1002; display: block !important; position: fixed !important; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,.1); background: #fff; color: #666; cursor: move; }
.image-dialog figure .figure-image 					{ background: #f2f2f2;}		
.image-dialog figure img 							{ display: block; position: absolute; left: 2.5%; top: 2.5%; right: 2.5%; bottom: 2.5%; width: auto; height: auto; max-width: 95%; max-height: 95%; margin: auto;}
.image-dialog figure figcaption						{ line-height: 1.5em;}

.image-dialog .figure-close							{ position: absolute; right: 12px; top: 10px;}
.image-dialog .figure-close:hover 					{ color: #666;}
.image-dialog .figure-close i 						{ font-size: 1.2em; color: #ccc; cursor: pointer; transition: color .2s; }
.image-dialog .figure-close i:hover 				{ color: #666;}

.image-dialog.vertical 								{ width: 720px; height: 480px; padding: 35px 12px 15px 12px; }
.image-dialog.vertical figure						{ width: 100%; height: 100%; overflow: hidden; }
.image-dialog.vertical figure .figure-image			{ flex-grow:1; position: relative;}
.image-dialog.vertical figure .figure-content		{ margin-top: 10px;}

.image-dialog.horizontal							{ width: 800px; height: 400px; padding: 15px 15px 15px 12px;  }
.image-dialog.horizontal figure 					{ width: 100%; height: 100%; overflow: hidden; }
.image-dialog.horizontal figure .figure-image  		{ flex-grow: 2; flex-shrink: 1; flex-basis: 0%; width: 60%; height: 100%; position: relative; }
.image-dialog.horizontal figure .figure-content		{ flex: 1; height: 100%; margin-left: 20px; }
.image-dialog.horizontal figure figcaption 			{ overflow-y: auto; flex-grow: 1; padding: 0 15px 10px 0; margin-top: 25px; }

/** Law realted order button **/
.law-related-orders						{ }
.law-related-orders a 					{ display: block; position:relative; width: 24px; height: 24px; overflow: hidden; text-indent: -9999px; }
.law-related-orders a:hover 			{ text-decoration: none !important; }
.law-related-orders a::before			{ content: '\e04b'; font-family: "Font Awesome Kit"; font-size: 20px; color: var(--theme-text-color); text-indent: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); text-rendering: auto; -webkit-font-smoothing: antialiased; }
.law-related-orders a::after			{ display: none !important;}

/** Law table **/
.law-table-wrapper 								{ margin-top: 5px; padding-bottom: 5px; line-height: 1.5em; position: relative; transition: padding .4s; }
.law-table-wrapper.no-source-law				{ margin-top: 10px; border: none; padding: 0;}
.law-table-wrapper.no-source-law td.merged-cell { padding: 8px 0;}
.law-table th, 
.law-table td 									{ padding: 8px 10px ;}
.law-table,
.law-table > th,
.law-table > td,
.law-table > tbody > tr > th,
.law-table > tbody > tr > td 					{ border: none !important;}
.law-table .cell-before							{ padding-left: 4px; padding-right: 0; position: relative;}
.law-table .cell-before .law-related-orders		{ margin-right: 15px;}
.law-table .cell-before .changed-icon			{ margin-right: 5px;}
.law-table .cell-before:empty,
.law-table .cell-after:empty					{ width: 0; min-width: 0 !important; padding-left: 0; padding-right: 0;}
.law-table .law-no								{ width: max-content; white-space: nowrap; font-weight: 500; color: #444; position: relative;}
.law-table .law-no:nth-child(2)					{ padding-left: 0;}	
.law-table .law-no.eq-1 						{ max-width: 2.5em;}
.law-table .law-no.eq-2 						{ max-width: 3.5em;}
.law-table .merged-cell							{ padding-left: 0; padding-right: 0;}
.law-table .ref-title 							{ color: #444; font-size: 1.02em; font-weight: 500; margin-bottom: 10px;}
.law-table .ref-title a 						{ border: none;}
.law-table .ref-title a::after 					{ content: '\f08e'; font: var(--fa-font-regular); font-size: 12px; color: #888; margin-left: 8px; opacity: 0; transition: opacity .2s;}
.law-table .ref-title a:hover::after 			{ opacity: 1;}
.law-table .law-content							{ width: 100%; }
.law-table .order-content-td					{ width: 100%; }
.law-table .order-content						{ margin-bottom: 10px; }
.law-table .first-law-no 						{ display: none; white-space: nowrap; font-size: 1.15em; font-weight: 500; color: #444; }
.law-table .first-law-no td:nth-child(2)		{ padding-left: 0; }
.law-table.narrow .first-law-no					{ display: table-row; }
.law-table.narrow .law-no:nth-child(2)			{ width: 0; min-width: 0 !important; padding: 0;}
.law-table.narrow .law-no:nth-child(2) > * 		{ display: none;}
.law-table.narrow .law-no:nth-child(3)			{ padding-left: 0;}
.law-table.narrow .more-content-button,
.section-content.narrow .more-content-button	{ visibility:visible;}

/** Law order **/
.law-order										{ margin-top: 25px;}
.law-order .title 								{ margin-bottom: 15px;}

/** Law catalog **/
.law-catalog									{ border: 1px solid #ddd; background: #f7f7f7; padding: 10px 15px;}
.law-catalog .col-item 							{ margin-top:4px !important; margin-bottom: 4px !important; line-height: 1.5em;}
.law-catalog a 									{ border: none;}

/** Sortable table **/
.tablesorter-header													{ cursor: pointer; }
.tablesorter-header-inner											{ position: relative; }
.tablesorter-header-inner::after 									{ font: var(--fa-font-solid); font-size: .88em; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.tablesorter-headerUnSorted .tablesorter-header-inner::after		{ content: "\0f0dc"; }
.tablesorter-headerAsc .tablesorter-header-inner::after				{ content: "\0f0de"; }
.tablesorter-headerDesc .tablesorter-header-inner::after			{ content: "\0f0dd"; }

/** Sticky Fix **/
.sidebar__inner, inner-wrapper-sticky 			{ transform: translate(0, 0); /* For browsers don't support translate3d. */ transform: translate3d(0, 0, 0); will-change: position, transform; }

/*
========================
Parts
========================
*/

/** Page Header **/
.page-header 										{ margin-bottom: 30px;}
#database-index	.main-content-wrapper .main-content { padding-top: 60px;}						
#database-index-a .page-header 						{ margin-bottom: 40px;}
#database-index-a .breadcrumbs						{ margin-bottom: 15px;}
#database-list .breadcrumbs 						{ margin-bottom: 15px;}

/** Quick search **/
#quick-search 						 				{ width: 260px; border:1px solid #d2d2d2; border-radius:4px; overflow: hidden; margin-right: 8px; }
#quick-search-form 					 				{ position: relative; }
#quick-search input 				 				{ height: 38px; width: 100%; padding:.6em .8em; margin-right: 8px; background:#fff; border: none; font: var(--fa-font-regular); outline:none; -webkit-appearance: none; -moz-appearance: none;  }
#quick-search .buttons 				 				{ position: absolute; right: 0; top: 0; height: 38px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
#quick-search button 				 				{ height: 38px; width: 36px; border: none; border-left: 1px solid #d2d2d2; background:#f7f7f7;  cursor: pointer; outline: none;}
#quick-search button:first-child	 				{ }
#quick-search i 					 				{ font-size: 1.1em; opacity: .5; transition: opacity .2s; }
#quick-search button:hover i 		 				{ opacity: 1;}
#quick-search .indicator			 				{ margin-right: 12px; font-size: 12px; text-align: right; color: #666; display: none;}
#quick-search .indicator span:first-child::after 	{ content: '/'; margin:0 4px;}
#quick-search.show .buttons			 				{ opacity: 1; visibility: visible;  transition: opacity .4s, visibility 0s;}
#quick-search.show .indicator		 				{ display: block;}

/** Infinite loading **/
#infinite-loading					 				{ position: absolute; left: 0; right: 0; bottom:5px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
#infinite-loading.show 				 				{ opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s;}
#infinite-loading span 				 				{ padding: .5em 1em; background: #fff; color: var(--theme-text-color); background-color: var(--light-bg-color); border-radius: 4px; }

/** Call-to-action Popup **/
.cta-wrapper 						 				{ position: fixed; left: 0; top: 0; right: 0; bottom:0; z-index: 99999999; visibility: hidden; opacity: 0;  transition: opacity .4s, visibility 0s .4s;}
.show-cta-popup .cta-wrapper 		 				{ visibility: visible; opacity: 1; transition: opacity .4s, visibility 0s;}
.cta-mask 							 				{ width: 100%; height: 100%; background-color: rgba(0,0,0,.75);}
.cta-box 							 				{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; max-width: 960px; max-height: 600px; }
.cta-text 							 				{ width: 50%; padding: 60px 5%;  background-color: #fff; border-radius: 10px 0 0 10px;} 
.cta-text h2 						 				{ font-size: 1.6em; color: var(--theme-text-color); margin-top: auto; margin-bottom: 25px;}
.cta-text .fr-view 					 				{ font-size: 1.05em; text-align: justify; }
.cta-text .button-wrapper 			 				{ margin: 30px 0;}
.cta-text > div:last-child			 				{ margin-bottom: auto;}
.cta-text .cta-login 				 				{ color: #666;  }
.cta-text .cta-login a 				 				{ margin-left: 5px; text-decoration: underline;}
.cta-image 							 				{ width: 50%;  background-image: url(../image/intro/city-800x800.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-color: #bbb; background-size: cover; border-radius: 0 10px 10px 0; @supports (background-image: url('../image/intro/city-800x800.webp')) { background-image: url('../image/intro/city-800x800.webp'); } } 
.cta-close 											{ position: absolute; right: 0; top: 0; width: 40px; height: 40px; line-height: 42px; text-align: center; transform: translate(40%, -40%); border-radius: 50%; background-color: var(--theme-bg-color); color: #fff; cursor: pointer;}
.cta-close i 										{ font-size: 1.5em;}

/** Form **/
.form-field-privacy									{ margin: 15px 0 25px 0;}
.form-field-privacy select + .select2 				{ margin-top: 15px;}
.form-field-privacy .label 							{ font-weight: 500; font-size: 1.05em; color: #222; margin:0 0 10px 0; }
.form-field-privacy .field 							{ flex-grow: 1;}


/** Popup window **/
#popup-window										{ z-index: 1000000000; /*Higher than tooltipster*/ position:fixed; right: 0; top: 0; width: 45%; height: 100vh; background-color: #fff; transform: translateX(150%); transition:transform .5s ; }
#popup-window.compact 								{ width: 30%; max-width: 540px; }
#popup-window.show 									{ transform: translateX(0); }
#popup-window.minimize								{ transform: translateX(calc(100% - 20px)); }
#popup-window.ui-resizable-resizing	iframe 			{ pointer-events: none;}
#popup-window.ready #popup-holder iframe			{ visibility: visible;}
#popup-window.ready #popup-loading					{ visibility: hidden;}
#popup-window.is-narrow #popup-holder 				{ opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;}
#popup-holder 										{ width: 100%; height: 100%; opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s;}
#popup-holder iframe 								{ width: 100%; height: 100%; visibility: hidden; }
#popup-loading 										{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ccc; }
#popup-handle										{ position: absolute; left: 0; top: 50%; width: 27px; height: 54px; transform: translate(-100%, -50%); border-radius: 15px 0 0 15px; background-color: #fff; }
#popup-close 										{ position: fixed; right: 5%; top: 20px; cursor: pointer; width: 36px; height: 36px; }
#popup-back 										{ position: fixed; right: 5%; top: 20px; cursor: pointer; margin-right: 45px;}
#popup-view 										{ position: fixed; right: 5%; top: 20px; cursor: pointer; margin-right: 45px;}
#popup-resizer 										{ position: absolute; left: 0; top: 50%; width: 36px; height: 54px; line-height: 54px; text-align: center;  transform: translate(-50%, -50%); cursor:ew-resize; /*cursor: pointer;*/ background-color: #fff; color: #888; }
#popup-close:hover,
#popup-back:hover,
#popup-view:hover,
#popup-resizer:hover								{ color: var(--theme-text-color);}
#popup-close i,
#popup-resizer i									{ font-size: 18px;  transition: all .2s; }
#popup-resizer i 									{ transform: translateY(5px) rotate(90deg) ;}
#popup-back i,
#popup-view i										{ font-size: 16px;  transition: all .2s; }

.popup #container,
.popup #main-wrapper,
.popup .main-content										{ padding: 0 !important;}
.popup #main-inner 											{ width: 90% !important; margin-left: auto !important; }
.popup .main-content .content-default						{ max-width: none !important;}
.popup .page-header + .article-box:before					{ display: none;}
.popup #header-wrapper,
.popup #nav-wrapper,
.popup #footer-wrapper,
.popup #menu-button,
.popup .aside-lt,
.popup .aside-rt,
.popup .page-header,
.popup .aside-buttons,
.popup .article-switch,
.popup #aside-nav,
.popup #mobile-bottom-toolbar 								{ display: none !important;}
.popup .header-tips .tips:last-child,
.popup .expandable-body .buttons 							{ display: none;}
.popup .expandable:first-child								{ border-top: none;}
.popup #article-toolbar										{ display: none;}
.popup .article-box 										{ border: none; box-shadow: none; border-radius: 0; margin-bottom: 5px; padding: 0;}
.popup .article-box:first-child:before						{ display: none;}
.popup .article-box .article-header							{ margin: 0; padding: 20px 0 0 0; }
.popup .article-box .article-header-inner 					{ margin: 0; padding: 0; border-radius: 0; box-shadow: none;}
.popup .article-box .article-header-inner .header-content 	{ border-bottom: 1px solid var(--soft-border-color); }
.popup .article-box .article-body 							{ margin: 0; padding: 0;}
.popup .article-box .article-body-inner 					{ margin: 0; padding: 0; border-radius: 0; box-shadow: none;}
.popup #infinite-loading									{ bottom: 30px;}

/** Profile header **/
.profile-header											{ margin:25px 0 30px 0; padding:40px 0 0 6%; background-color: #fff; position: relative;}
.profile-header.no-nav 									{ padding-bottom: 40px;}
.profile-header	.avatar 								{ width: 120px; height: 120px; border-radius: 50%; flex-grow: 0; flex-shrink: 0; margin-right: 30px;}
.profile-header	.info 									{ flex-grow: 1; margin-right: 30px;}					
.profile-header .title 									{ margin-bottom: 8px;}
.profile-header .title .name 							{ margin-bottom: 0;}
.profile-header .title .tag 							{ font-size: .92em; background-color: var(--light-bg-color); color: var(--theme-text-color); margin:3px 10px 3px 0; padding:.3em .4em; border-radius: 3px; }
.profile-header .name 									{ color: var(--theme-text-color); font-size: 1.2em; font-weight: 500; line-height: 1.2em; letter-spacing: .05em; margin-bottom: 8px;}
.profile-header .meta 									{ color: #999;}
.profile-header .group 									{ color: #999; margin-right: 20px;}
.profile-header .registration 							{ color: #2a2a2a;}
.profile-header .statistics								{ margin-top: 30px; }
.profile-header .statistics .set 						{ padding: 0 30px; position: relative;}
.profile-header .statistics .set::before 				{ content: ''; position: absolute; left: 0; top: 0; bottom:0; width: 1px; background-color: #ddd;}
.profile-header .statistics .set:first-child 			{ padding-left: 0;}
.profile-header .statistics .set:first-child::before 	{ display: none;}
.profile-header .statistics .set:last-child				{ padding-right: 0;}
.profile-header .statistics .value 						{ font-size: 1.2em; font-weight: 500; color: #2a2a2a;}
.profile-header .statistics .label 						{ color: #999; line-height: 1.2em; margin-top: 8px;}
.profile-header .nav 									{ margin: 30px 0 0 20px; transform: translateY(1px);}
.profile-header .nav .swiper-slide						{ margin-left: 30px; width: auto !important;}
.profile-header .nav .swiper-slide:first-child			{ margin-left: 0;}
.profile-header .nav .swiper-slide a 					{ display: inline-block; padding:15px 10px; font-size: 1.05em; font-weight: 500; letter-spacing: .05em; color: var(--theme-text-color);  border-bottom: 2px solid transparent; opacity: .5; transition: all .2s;}								
.profile-header .nav .swiper-slide a:hover 				{ opacity: 1; }
.profile-header .nav .swiper-slide.active a 			{ border-bottom: 2px solid var(--theme-border-color); opacity: 1;} 	

.beta-tag { background-color: var(--light-bg-color); color:var(--theme-text-color); font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 3px;}

/*
========================
Structure
========================
*/

#container								{ padding-top: 64px; }
.inner									{ width: 88%; margin:auto; margin-left: 6%; }
.inner-lg								{ width: 92%; margin:auto; }
.inner-md								{ width: 92%; max-width: 1150px; margin:auto; }
.inner-sm								{ width: 92%; max-width: 800px; margin:auto; }

/*
========================
Header
========================
*/

#splash 								{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color:#fff; z-index: 99999999;}
#splash img 							{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 140px; }

#header-wrapper							{ position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; }
#header-inner							{ height: 64px; padding:0 0; position: static; }
#header-inner h1						{ width: 110px; flex-grow:0; flex-shrink: 0; margin-left: 15px; opacity: .95; transform: translateY(-2px); }
#header-inner h1 a						{ display: block; width: 100%; height: 0; padding-top:26.49%; background: url(../image/logos/logo-white.svg?m=20240123) no-repeat 50% 50%; background-size: contain; text-indent: -999px; overflow: hidden;}	
#header-nav								{ margin-right: 60px; margin-left: 30px; }
.not-login #header-nav 					{ margin-right: 30px;}
#header-nav	li							{ margin-left: 54px;}
#header-nav li:first-child				{ margin-left: 0;}
#header-nav li.sep 						{ margin-left: 25px;}
#header-nav li.sep::before				{ content: '|'; margin-right: 20px; opacity: .4;}
#header-nav i 							{ margin-right: 10px; width: 14px; height: 14px; }
#header-nav a							{ opacity: .86; transition: opacity .2s; cursor: pointer;}
#header-nav a:hover 					{ opacity: 1; }
#header-icons  							{ margin-right: 25px;  }
#header-icons li 						{ margin-left: 20px; width: 21px; height: 21px;}
#header-icons li:first-child			{ margin-left: 0;}
#header-icons i							{ margin-right: 5px; font-size: 1.5em;}
#header-icons a							{ opacity: .86; transition: opacity .2s; cursor: pointer;}
#header-icons a:hover 					{ opacity: 1; }
#header-corner-lt,
#header-corner-rt 						{ width: 28px; height: 28px; position: absolute; bottom:-28px; fill: var(--theme-bg-color); }
#header-corner-lt						{ left: 0;}
#header-corner-rt						{ right: 0;}

.headroom #header-wrapper										{ will-change: transform; transition: transform 400ms;}
.headroom--pinned #header-wrapper   							{ transform: translateY(0%);}
.headroom--unpinned:not(.show-search-bar) #header-wrapper		{ transform: translateY(-100%);}

#search-bar 											{ flex-grow: 1; margin: 0 auto 0 30px; max-width: 480px; position: relative; }
#search-bar-placeholder 								{ margin: 0 auto; }
#search-bar .input-wrapper 								{ padding: 0; border-radius: 8px;  border: 1px solid rgba(255,255,255, .5); }
#search-bar input[type="text"] 							{ width: 100%; height: 40px; padding: 0 1em; font: var(--fa-font-regular); font-size: 1.1em; font-family: "Noto Sans TC", "Font Awesome 6 Pro"; border: none; background-color:transparent; box-shadow:none; color: #fff;  }
#search-bar input[type="text"]::placeholder  			{ color: rgba(255,255,255,.85); }
#search-bar input[type="checkbox"]						{ display: none;} 
#search-bar input[type="checkbox"]:checked + span + i 	{ opacity: 1; visibility: visible;}
#search-bar .dropdown-button							{ border-radius: 8px;  border-left: 1px solid rgba(255,255,255, .5);}
#search-bar .button 									{ height: 40px; line-height: 40px; background: none; font-size: 1.05em; font-weight: normal !important; }
#search-bar.has-filter .button							{ padding-right: 0;}
#search-bar .label 										{ height: 40px; line-height: 40px; padding:0 1.2em; }
#search-bar .label i 									{ margin: 0 15px 0 -8px;}
#search-bar .menu 										{ z-index: 999999999; /*higher than ui-autocomplete*/ right: 0; padding-top: 0; /*display: block;*/}
#search-bar .menu ul 									{ padding: 10px 0; width: auto; min-width: 128px; border-radius:5px;}
#search-bar .menu li 									{ margin: 0; position: relative; }
#search-bar .menu li span 								{ display: block; padding: .8em 1em .8em 2.2em; user-select: none; cursor: pointer; transition: all .2s; }
#search-bar .menu li:hover span,
#search-bar input[type="checkbox"]:checked + span 		{ background-color: var(--light-bg-color); color: var(--theme-text-color);}
#search-bar .menu li i 									{ position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; margin:0; color: var(--theme-text-color); }
#search-bar .easy-autocomplete							{ width:100% !important; }

#suggestion-container 											{ width: 100%; /*position: absolute; max-width: 100%;*/ }
#suggestion-container .ui-autocomplete-category 				{ font-family:"Noto Sans TC"; font-size: 1.05em; font-weight: 500; padding: .2em .4em; margin: .8em 0 .2em .3em; line-height: 1.5; background: none; }
#suggestion-container .ui-menu 									{ max-width: 100%; padding-bottom: 15px; border: none !important; box-shadow: 3px 3px 10px rgba(0,63,64,.12); }
#suggestion-container .ui-menu .ui-menu-item-wrapper 			{ padding: 0; }
#suggestion-container .ui-menu .ui-menu-item-wrapper a 			{ display: block; padding: .5em .6em; font-size: 1rem; line-height: 1.4em; font-family:"Noto Sans TC"; }
#suggestion-container .ui-menu .ui-menu-item-wrapper a .sep 	{ margin: 0 .8em; font-size: .75em; transform: translateY(-1px); color: #888;}
#suggestion-container .ui-menu .ui-menu-item-wrapper:hover 		{ border-color: transparent; background:var(--light-bg-color); color: var(--theme-text-color); border: 1px solid transparent !important; }
#suggestion-container .ui-menu-item .ui-state-active 			{ border-top-color: transparent !important; border-bottom-color: transparent !important; }

/*
========================
Nav
========================
*/
#nav-wrapper								{ z-index: 1002; overflow-y: auto; position: fixed; left: 0; top:0; height: 100%; width: 100%; max-width: 400px; box-shadow: 0 0 4px rgba(0,0,0,.3); transform: translateX(-110%); transition: transform .4s;}

#nav-inner									{ height: 100%; }
#nav-inner ul li a 							{ opacity: .8; transition: all .2s;}
#nav-inner ul li a:hover 					{ opacity: 1; }
#nav-inner ul li.active a					{ border-bottom: 1px solid var(--light-border-color);}
#nav-inner .nav-links 						{ margin: auto; }
#nav-inner .nav-links li					{ margin: 2.2em 0; font-size: 1.15em;  }
#nav-inner .nav-links li a					{ display: block; width: 100%; white-space: nowrap; letter-spacing: .2em; }
#nav-inner .nav-links li i 					{ margin-right: .8em;}
#nav-inner .social-links 					{ margin: 0 12% 25% 12%;}
#nav-inner .social-links ul 				{ justify-content: center;}
#nav-inner .social-links li 				{ margin:0 8px; }
#nav-inner .social-links li a 				{ display:inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px solid var(--light-border-color);  }
#nav-inner .social-links li i 				{ font-size: 1.33em;}
	
#menu-button 								{ display: none; position: fixed; left: 2.8%; top: 21px; width: 30px; height: 18px; margin-left: -18px; z-index: 1003; cursor: pointer; }
#menu-button span 							{ display: block; position: absolute; height: 1px; width: 100%; background-color:#fff; opacity: .7; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
#menu-button span:nth-child(1) 				{ top: 0px; transform-origin: left center; }
#menu-button span:nth-child(2) 				{ top: 8px; transform-origin: left center; }
#menu-button span:nth-child(3) 				{ top: 17px; transform-origin: left center; }

.show-nav #nav-wrapper						{ transform: translateX(0);}	
.show-nav #menu-button span:nth-child(1) 	{ transform: rotate(30deg); top: 1px; left: 0; }
.show-nav #menu-button span:nth-child(2) 	{ width: 0%; opacity: 0; }
.show-nav #menu-button span:nth-child(3) 	{ transform: rotate(-30deg); top: 16px; left: 0; }

.headroom #menu-button								{ will-change: transform;	transition: transform 400ms;}
.headroom--unpinned:not(.show-nav) #menu-button		{ transform: translateY(-64px);}


/*
========================
Main
========================
*/

#main-wrapper											{ min-height: 80vh; }

.main-content-wrapper									{ position: relative;}
.main-content-wrapper .main-content 					{ /*flex-grow: 1;*/ padding:40px 0; }
.main-content-wrapper .main-content .content-default 	{ width: 100%; margin:0 auto; max-width: 1200px; }
.main-content-wrapper .main-content .content-tiny    	{ width: 100%; margin:0 auto; max-width: 600px; padding:30px 0; }
.main-content-wrapper .main-content .content-smaller   	{ width: 100%; margin:0 auto; max-width: 800px; }
.main-content-wrapper .main-content .content-small   	{ width: 100%; margin:0 auto; max-width: 960px; }
.main-content-wrapper .main-content .content-big 		{ width: 100%; margin:0 auto; max-width: 1400px; }
.main-content-wrapper .main-content .content-wide 		{ width: 100%; margin:0 auto; max-width: 1735px; }
.main-content-wrapper .main-content .content-large   	{ }
.main-content-wrapper .main-content .content-wide > h2,
.main-content-wrapper .main-content .content-default > h2,
.main-content-wrapper .main-content .content-tiny > h2,
.main-content-wrapper .main-content .content-small > h2,
.main-content-wrapper .main-content .content-large > h2,
.main-content-wrapper .main-content form > h2 			{ margin-bottom: 30px; color: #444;}
.main-content-wrapper .main-content form > h3 			{ margin-bottom: 20px; color: #444;}
.main-content-wrapper .main-content .content-default > .header,
.main-content-wrapper .main-content .content-tiny > .header,
.main-content-wrapper .main-content .content-small > .header,
.main-content-wrapper .main-content .content-large > .header { margin-bottom: 30px; color: #444;}
.main-content-wrapper .main-content .content-default .header-title,
.main-content-wrapper .main-content .content-tiny .header-title,
.main-content-wrapper .main-content .content-small .header-title,
.main-content-wrapper .main-content .content-large .header-title { margin-right: auto;}


/*
========================
Footer
========================
*/

#footer-wrapper							{ margin-top: 30px; color: var(--theme-text-color); }
#footer-inner							{ padding: 18px 0;  border-top: 1px solid #ddd; }
#footer-copyright,
#footer-credit							{ font-size: 12px; }
#footer-inner .social-links 			{ margin-left: 10px;}
#footer-inner .social-links li			{ margin-left: 15px; }
#footer-inner .social-links li a 		{ display: block; width: 32px; height: 32px; line-height: 30px; text-align: center; border-radius: 50%; border: 1px solid var(--light-border-color);}
.footer-links 							{ margin-left: auto;}
.footer-links li 						{ margin-left: 40px;}
.footer-links li:first-child			{ margin-left: 0;}


/*
========================
Bottom toolbar
========================
*/

#bottom-toolbar 										{ z-index: 1000; position: fixed; right: 30px; bottom:90px; transition: transform .4s; }
#bottom-toolbar.hide 									{ transform: translateX(200%);}
#bottom-toolbar .toolbar-button 						{ position: relative; justify-content: center; font-size: 1.3em; overflow: hidden; width: 60px; height: 60px; text-align: center; border-radius: 8px; margin-top: 10px; cursor: pointer; }
#bottom-toolbar .toolbar-button i 						{ display: block; font-size: 1.15em;}
#bottom-toolbar .toolbar-button .text 					{ display: block; margin-top: 5px; font-size: 12px; white-space: nowrap;}
#bottom-toolbar .toolbar-button.highlighted 			{ color: #D7C79D !important; border-color: #D7C79D !important; background-color: #fff; box-shadow:3px 3px 10px rgba(240, 222, 174, .3); }
#bottom-toolbar .toolbar-button.highlighted i 			{ color: #D7C79D !important;}
#bottom-toolbar .toolbar-button.highlighted:hover 		{ background-color: #faf6eb;}
#bottom-toolbar .toolbar-button.reversed 				{ background-color: var(--theme-bg-color); color:var(--lighter-text-color); }
#bottom-toolbar .toolbar-button.reversed i 				{ color: inherit;}
#bottom-toolbar .toolbar-button.reversed:hover 			{ color:#fff !important; }
#bottom-toolbar #bottom-toolbox:hover 					{ background-color: var(--light-bg-color); }
#bottom-toolbar #bottom-go-to-top 						{ width: 0; height: 0; margin-top: 0; transition: all .2s;}
#bottom-toolbar #bottom-register 						{ width: 0; height: 0; margin: 0; position: absolute; right: 72px; bottom:0; transition: all .2s; }
#bottom-toolbar #bottom-register .text 					{ text-align: justify; line-height: 1.3em; white-space: nowrap; margin: 0 10px 0 5px; }
#bottom-toolbar #bottom-register .text span 			{ letter-spacing: .16em;}
#bottom-toolbar #bottom-register img 					{ width: 40px; height: 40px; border-radius: 4px; }

.headroom--not-top #bottom-toolbar  #bottom-go-to-top	{ width: 60px; height: 60px; margin-top: 10px;  }
.headroom--not-top #bottom-toolbar  #bottom-register	{ width: 220px; height: 60px; }


/*
========================
Bottom advertisment
========================
*/
#ad-popup												{ z-index: 1000; position: fixed; right: 100px; bottom:90px; max-width: 590px; }
#ad-popup:not(.only-image) 								{ width:calc(100vw - 40px); }
#ad-popup.only-image #ad-popup-content 					{ padding: 0;}
#ad-popup-content 										{ padding:36px 20px 20px 20px; border-radius: 5px; border: 1px solid var(--light-border-color); background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.08);}
#ad-popup-content picture + .fr-view,
#ad-popup-content #ad-popup-link + .fr-view 			{ margin-top: 15px;}
#ad-popup-content .fr-view 								{ font-size: 1.05em; line-height: 1.5em; color: #000;}
#ad-popup-content img 									{ margin: 0; display: block;}
#ad-popup-close 										{ width: 21px; height: 21px; line-height: 21px; font-size: 16px; text-align: center; position: absolute; right: 16px; top: 8px; border-radius: 50%; color:#A1B5B6; cursor: pointer;}
#ad-popup .fr-view a[target="_blank"]::after			{ display: none !important;}

/*
========================
Toolbox
========================
*/

/** Structure **/
#toolbox 							 							{ z-index: 1100; width: 472px; height: 80vh; position: fixed; right: 110px; bottom:5vh; background-color: #fff; border-radius: 10px; visibility: hidden; overflow: hidden; transform: scale(0, 0); transform-origin: right bottom; transition: transform .4s, visibility 0s .4s;}
#toolbox.show-second-content									{ /*min-width: 1150px;*/ min-width: 70vw; }
#toolbox.show-second-content.resized 							{ /*min-width: 960px;*/ min-width: 60vw; }
#toolbox.has-lead-content 										{ min-width: 680px;}
#toolbox.has-lead-content.show-second-content 					{ min-width: 1320px;}
#toolbox.has-lead-content .first-content 						{ min-width: 220px;}
#toolbox.is-help #toolbox-menu									{ display: none;}
#toolbox .ui-resizable-nw										{ left: 3px; top: 2px; transform: rotate(-45deg);  }
#toolbox .ui-resizable-nw::after								{ content: '\f0d8'; font: var(--fa-font-solid); font-size: 12px; color: var(--theme-border-color); }
#toolbox-menu 						 							{ width: 90px; flex-shrink: 0; flex-grow: 0; border-right: 1px solid #ddd;}
#toolbox-menu ul 					 							{ width: 74px; margin: auto; padding-top: 40px;}
#toolbox-menu .toolbox-menu-button 			 					{ justify-content: center; width: 68px; height: 68px; color: var(--light-text-color); margin:0 auto 10px auto; border-radius: 8px; cursor: pointer; transition: color .2s;}
#toolbox-menu .toolbox-menu-button:hover 	 					{ color: var(--theme-text-color); }
#toolbox-menu li.active .toolbox-menu-button 					{ color: var(--theme-text-color); }
#toolbox-menu li i 					 							{ font-size: 21px; display: block; margin-bottom: 6px;}
#toolbox-body 						 							{ min-width: 380px; /*height: 65vh;*/  flex-grow: 1; position: relative;}
#toolbox-body.loading::after		 							{ content: '\f3f4'; font: var(--fa-font-regular); font-size: 24px; color: #aaa; position: absolute; left: 50%; top: 50%; pointer-events: none; animation: rotation 2s infinite linear; }
#toolbox-back													{ display: none;}
#toolbox-header 					 							{ flex-shrink: 0; height: 60px; padding: 0 25px; cursor: move; color: var(--theme-text-color); border-bottom: 1px solid #ddd;}
#toolbox-title 				 		 							{ font-size: 1.25em; font-weight: 500; cursor: default; margin-right: auto;}
#toolbox-sort,
#toolbox-help,
#toolbox-close,
#toolbox-search 												{ margin-left: 25px; font-size: 1.05em; cursor: pointer; opacity: .85; transition: all .2s; }
#toolbox-help:hover,
#toolbox-sort:hover,
#toolbox-close:hover,
#toolbox-search:hover 											{ opacity: 1;}
#toolbox-content 					 							{ flex-grow: 1; position: relative; overflow: hidden;}
#toolbox-content .lead-content									{ width: 220px; flex-grow: 0; flex-shrink: 0; padding: 20px 20px 20px 25px; overflow-y: auto; border-right:1px solid #ddd; }
#toolbox-content .first-content									{ flex-grow: 1; position: relative; /*width: 380px;*/ padding: 20px 20px 20px 25px; overflow-y: auto; }
#toolbox-content .first-content.no-padding 						{ padding: 0;}
#toolbox-content .second-content								{ position: relative; width: 0; border-left:1px solid #ddd; overflow: hidden; visibility: hidden; transition: width .8s, padding .8s, visibility 0s .4s; }
#toolbox.show-second-content #toolbox-content .first-content	{ flex:1.15;  }
#toolbox.show-second-content #toolbox-content .second-content 	{ flex-grow: 3; flex-shrink: 1; flex-basis: 0%; width: auto; visibility: visible; transition: width .8s, padding .8s, visibility 0s; }
#toolbox-content .second-content.loading::after 				{ content: '\f3f4'; font: var(--fa-font-regular); font-size: 24px; color: #aaa; position: absolute; left: 50%; top: 50%; pointer-events: none; animation: rotation 2s infinite linear; }
#toolbox-content .empty-content									{ flex-grow: 1;}
#toolbox-content .empty 										{ position: absolute; left: 50%; top: 50%; width: 90%; max-width: 320px; line-height: 1.5em; transform: translate(-50%, -50%); text-align: center;}
#toolbox-content .empty p 										{ font-size: 1.2em; color: #888; }
#toolbox-content .empty p a 									{ border-bottom: 1px solid var(--theme-border-color); color: var(--theme-text-color);}
#toolbox-content .empty .button 								{ margin-top: 20px; }
.show-toolbox #toolbox 		 		 							{ transform: scale(1, 1); visibility: visible; transition: transform .4s, visibility 0s;}

/** personal-workgroup-list **/
.personal-workgroup-list li										{ margin: 14px 0; font-size: 1em; font-weight: 500; line-height: 1.2em; letter-spacing: .02em; color: #888; }
.personal-workgroup-list li:first-child							{ margin-top: 5px;}
.personal-workgroup-list li:hover > a,
.personal-workgroup-list li.active > a 							{ color: var(--theme-text-color); }
.personal-workgroup-list li ul 									{ margin: 15px 0; }
.personal-workgroup-list li	li 									{ margin: 10px 0; font-size: 1rem; }
.personal-workgroup-list li i 									{ font-size: 12px; margin-right: 10px; color: var(--light-text-color); transform: scale(.7, .7);}

/** Search bar **/
#toolbox .toolbox-search 										{ width: 100%; height: 100%;}
#toolbox .toolbox-search .toolbox-search-form 					{ flex-shrink: 0; flex-grow: 0; border-bottom: 1px solid transparent; padding: 0 20px 0 25px; background-color: #f9f9f9; height: 0; transition: all .2s; overflow: hidden;}
#toolbox .toolbox-search.show .toolbox-search-form 				{ height: 54px; border-bottom: 1px solid #ddd; }
#toolbox .toolbox-search .toolbox-search-form input				{ border: none; border-radius: 0; background: none; padding: 0; font-size: 1.05em; color: #666; }
#toolbox .toolbox-search .toolbox-search-body 					{ flex-grow: 1; overflow-y: auto; }
#toolbox .toolbox-search-clear 									{ display: inline-block; width: 21px; height: 21px; line-height: 21px; text-align: center; color: #999; opacity: 0; visibility: hidden;  transition: opacity .4s, visibility 0s .4s;cursor: pointer;}
#toolbox .toolbox-search-clear:hover 							{ color: #222;}
#toolbox .toolbox-search-clear.show 							{ opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s;}
#toolbox .searchable-group.hide,
#toolbox .searchable-item.hide 									{ display: none;}

/** Filter tab (Deprecated) **/
#toolbox .toolbox-filters 										{ margin: 20px 0 0 20px;}
#toolbox .toolbox-filters .filter								{ color: #666; font-size: 1.05em; margin-right: 25px; cursor: pointer;}
#toolbox .toolbox-filters .filter:last-child 					{ margin-right: 0;}
#toolbox .toolbox-filters .filter:hover 						{ color: var(--theme-text-color);}
#toolbox .toolbox-filters .filter.active 						{ color: var(--theme-text-color);}


/** Toolbox button bar **/
#toolbox .toolbox-button-bar 									{ border-bottom: 1px solid #ddd; height: 53px; padding: 0 20px; flex-shrink: 0;}
#toolbox .toolbox-button-bar > div 								{ margin-right: 25px; font-size: .96em; color: var(--theme-text-color); cursor: pointer; transition: color .2s; }
#toolbox .toolbox-button-bar > div:last-child 					{ margin-right: 0;}
#toolbox .toolbox-button-bar > div:hover 					 	{ opacity: .85;}
#toolbox .toolbox-button-bar > div i 							{ margin-right: 3px;}

/** Category & List **/
.toolbox-category-item 											{ margin-left: -5px; padding: 20px 20px 40px 20px; }
.toolbox-category-item .group 									{ margin-bottom: 20px;}
.toolbox-category-item .group.default-category					{ margin-bottom: 10px;}
.toolbox-category-item .group-header							{ margin-bottom: 5px; padding: .5em 0; border-radius: 4px;}
.toolbox-category-item .group-header + .inplace-editor 			{ margin-bottom: 5px;}
.toolbox-category-item .group-title 							{ flex-grow: 1; font-size: 1.15em; font-weight: 500; color: var(--theme-text-color); }
.toolbox-category-item .group-buttons							{ visibility: hidden;}
.toolbox-category-item .group-buttons .btn						{ color: #999; cursor: pointer; transition: color .2s; margin-left: 20px; }
.toolbox-category-item .group-buttons .btn:hover 				{ color: #222;}
.toolbox-category-item .group-header .arrow 					{ margin-left: 20px; color:var(--theme-text-color); cursor: pointer;}
.toolbox-category-item .group-header .arrow.closed 				{ transform: rotate(180deg);}
.toolbox-category-item li 										{ margin: 0; padding:7px 9px; border-radius: 4px; cursor: pointer; transition: background .2s;}
.toolbox-category-item:not(.is-sorting) li:hover,
.toolbox-category-item li[draggable="true"]						{ color: var(--theme-text-color); }
.toolbox-category-item li.active								{ color: var(--theme-text-color); }
.toolbox-category-item li.active p 								{ color: var(--theme-text-color); }
.toolbox-category-item li p										{ color: #666; transition: color .2s; margin-right: auto; max-width: 320px; line-height: 1.2em; word-break: break-all; cursor: pointer;}
.toolbox-category-item li p i 									{ margin-right: 5px;}
.toolbox-category-item li .name 								{ display: block; color: var(--theme-text-color); font-weight: 500;}
.toolbox-category-item li .author 								{ display: block; margin-top: 5px; color: #888; font-size: 13px; }
.toolbox-category-item li .privacy 								{ color: var(--theme-text-color); margin-right: 5px;}
.sortable .group-header .arrow									{ display: none;}

.toolbox-labeled-list li										{ padding: 5px 0;}
.toolbox-labeled-list li a 										{ display: flex; flex-grow: 1; line-height: 1.2em; padding:10px 15px; background-color: var(--soft-bg-color); color: var(--theme-text-color); border-radius: 5px; transition: all .2s; }
.toolbox-labeled-list li .summary 								{ font-size: 1.02em; font-weight: 500; color: var(--theme-text-color);}
.toolbox-labeled-list li .source, 														
.toolbox-labeled-list li .author 								{ display: block; margin-top: 8px; color: #888; font-size: 13px;}
.toolbox-labeled-list li .icon 									{ font-size: 12px; margin-right: 10px; color: var(--light-text-color); transform: scale(.7, .7); }
.toolbox-labeled-list li .exceprt-title 						{ display: block;}
.toolbox-labeled-list li .excerpt-tags							{ margin-left: 18px; margin-top: 4px;}

.excerpt-tags 													{ display: block; }
.excerpt-tags .tag 												{ display: inline-block; margin: 2px 2px 2px 0; padding: .2em .5em; font-size: .86em; line-height: 1.2em; border-radius: 3px; background-color: var(--soft-bg-color); color: var(--theme-text-color);  }

#toolbox-content .sort-handle 														{ margin-left: auto; margin-right: 0; pointer-events: none;}
#note-list:not(.sortable) .group-header:hover .group-buttons,	
#excerpt-list:not(.sortable) .group-header:hover .group-buttons 					{ visibility:visible;}	
#excerpt-view .excerpt-content-list > .excerpt-content > .group-title::after		{ display: none;}
 
#note-list .group-header .sort-handle							{ margin-right: 15px;}
#excerpt-list .group-header .sort-handle						{ margin-right: 0;}
#excerpt-content-holder .sort-handle							{ margin-right: 40px;}	
#excerpt-content-holder .fr-view 								{ font-size: 1em;}

/** Quota label **/
.quota-label													{ font-size: 12px; background-color: var(--soft-bg-color); padding: .3em .8em; border-radius: 10px; cursor: default;}

/** Bookmark **/
#bookmark-list													{ padding: 20px 20px 20px 25px; }
#bookmark-list ul 												{ margin-bottom: 5px; margin-left: -10px; }
#bookmark-list li 												{ margin: 0; padding:7px 12px; border-radius: 4px; transition: background .2s; align-items: flex-start; }
#bookmark-list li:hover 										{ background:var(--soft-bg-color); }
#bookmark-list li .icon 										{ margin-top: 2px;margin-right: 15px; color: var(--icon-color); }
#bookmark-list li a 											{ color: #444; transition: color .2s; margin-right: auto; line-height: 1.2em; word-break: break-all;}
#bookmark-list li a .database-title 							{ color: #888; display: block; margin-bottom: 5px;}
#bookmark-list li a:hover 										{ color: var(--theme-text-color);}
#bookmark-list li a:hover .database-title 						{ color: var(--theme-text-color);}
#bookmark-list li .buttons 										{ margin-left: 15px; visibility: hidden;}
#bookmark-list li .buttons .btn 								{ color: #aaa; transition: color .2s; margin-left: 15px; cursor: pointer;}
#bookmark-list li .buttons .btn:first-child						{ margin-left: 0;}
#bookmark-list li .buttons .btn:hover 							{ color: #222;}
#bookmark-list li:hover .buttons 								{ visibility: visible;}
.bookmark-group-options											{ padding: 8px 0;}
.bookmark-group-options .option									{ width: 21px; height: 21px; border-radius: 50%; margin:0 3px; border: 2px solid transparent; cursor: pointer;}
.bookmark-group-options .option:hover 							{ border: 2px solid #999;}

/** Excerpt **/
#excerpts-form													{ padding: 20px;}
#excerpts-form legend 											{ color: #222; font-size: 1.4em; font-weight: 500; position: sticky; left: 0; right: 0; top: 0; z-index: 99; padding: 0; background-color: #fff;}
#excerpts-form .label 											{ color: #222; font-size: 1.05em; font-weight: 500;}
#excerpts-form .msg 											{ color: #c00; margin-top: 10px;}
#excerpts-form input[type="text"] 								{ background-color: #fff;}
.excerpt-tags-options .select2-results__message					{ display: none !important;}

#excerpt-summary 												{ margin-top: 0;}
#excerpt-attachments 											{ margin-top: 20px;}

#excerpt-starting-guide 										{ padding: 120px 0; margin:15px 75px 15px 0; border-radius: 8px; border: 1px solid var(--light-border-color);}
#excerpt-starting-guide .title 									{ color: var(--theme-text-color); font-size: 1.25em; letter-spacing: .04em; margin-bottom: 20px; }
#excerpt-content.has-content #excerpt-starting-guide			{ display: none;}

#excerpt-catalog 												{ padding: 15px 5px;}
#excerpt-catalog h3 											{ margin-bottom: 15px; font-size: 1.2em;}
#excerpt-catalog-list 											{ margin-left: 18px; }
#excerpt-catalog-list ol 										{ margin-left: 15px; }
#excerpt-catalog-list li 										{ margin: 10px 0; }
#excerpt-catalog-list li a 										{ color: #444; line-height: 1.25em;}
#excerpt-catalog-list > li 										{ list-style: disc; color: var(--lighter-text-color); }
#excerpt-catalog-list > li > a 									{ font-weight: 500; }
#excerpt-catalog-list li li li a								{ color: #999;}
#excerpt-catalog-list li a:hover 								{ color: var(--mid-text-color);}


#excerpt-content 																	{ height: 100%;}
#excerpt-content .header 															{ z-index: 1; width: 100%; height: 54px; flex-shrink: 0; padding: 0 20px; border: none;}
#excerpt-content .header .meta 														{ color: #888;}
#excerpt-content .header .meta a 													{ text-decoration: underline;}
#excerpt-content .aside-buttons 													{ z-index: 9; position: absolute; right: 27px; top: 90px;  }
#excerpt-content .aside-buttons-set 												{ padding: 4px 6px; border-radius: 6px; border: 1px solid var(--soft-border-color); background-color: #fff; }
#excerpt-content .aside-buttons .btn 												{ display: block; width: 24px; height: 24px; line-height: 22px; text-align: center; color: var(--lighter-text-color); border-radius: 4px; transition: color .2s; margin: 3px 0; cursor: pointer;}
#excerpt-content .aside-buttons .btn:hover,
#excerpt-content .aside-buttons .btn.active 										{ background-color: var(--light-bg-color); color: var(--theme-text-color);} 
#excerpt-content .aside-buttons i 													{ pointer-events: none;}
#excerpt-content .aside-buttons-set.dark 											{ background-color: var(--midtone-bg-color); color: #fff; margin-bottom: 8px; }
#excerpt-content .aside-buttons-set.dark .btn 										{ color: rgba(255,255,255,.8); position: relative; }
#excerpt-content.has-content .aside-buttons-set.dark .btn 							{ margin: 5px auto;}
#excerpt-content .aside-buttons-set.dark .btn:first-child							{ margin-top: 3px;}
#excerpt-content .aside-buttons-set.dark .btn:last-child							{ margin-bottom: 3px;}
#excerpt-content .aside-buttons-set.dark .btn:hover,
#excerpt-content .aside-buttons-set.dark .btn.active								{ background-color: var(--midtone-bg-color); color: #fff;}
#excerpt-content .aside-buttons-set.dark .btn:not(:first-child)::before 			{ content: ''; position: absolute; left: 3px; top: -5px; right: 3px; border-top: 1px solid rgba(255,255,255,.5);}
#excerpt-content .aside-buttons-set .catalog-btn 									{ display: none;}
#excerpt-content.has-content .aside-buttons-set .catalog-btn						{ display: block;}
#excerpt-content .content 															{ padding: 25px 20px; overflow-y:scroll; scroll-behavior: smooth; }
#excerpt-content .note 																{ margin-top: auto; height: 115px; flex-shrink: 0; flex-grow: 0; border-top: 1px solid #ddd;}
#excerpt-content .note textarea 													{ width: 100%; height: 100%; padding:15px 20px; line-height:1.4em; border-radius: 0; border: none; background: none; resize: none; outline: none; }
#excerpt-content .tips 																{ margin-bottom: 20px; margin-right: 60px; width: auto;}
#excerpt-content .tips.excerpt-warning												{ margin-bottom: 15px;}
#excerpt-content .tips.excerpt-warning .excerpt-detail-icon							{ color: var(--theme-text-color); margin: 0 5px;}
#excerpt-content .tips p 															{ margin-right: auto;}
#excerpt-content .tips + .tips														{ margin-top: -5px;}
#excerpt-content #excerpt-note														{ display: none; margin-bottom: 15px; margin-right: 60px; padding: 20px; font-size: 1.05rem; line-height: 1.4em; color: #666; border-radius: 10px; border: 1px solid var(--light-border-color);}
#excerpt-content #excerpt-note.has-note,
#excerpt-content #excerpt-note.has-attachment										{ display: block;}
#excerpt-content #excerpt-note .fr-view 											{ display: none;}
#excerpt-content #excerpt-note.has-note .fr-view									{ display: block;}
#excerpt-content #excerpt-note .excerpt-attachment									{ display: none; font-size: .92em; }
#excerpt-content #excerpt-note.has-attachment .excerpt-attachment					{ display: block;}
#excerpt-content #excerpt-note.has-note.has-attachment .excerpt-attachment			{ margin-top: 20px; }
#excerpt-content #excerpt-note .excerpt-attachment-title,
#excerpt-content #excerpt-catalog .excerpt-catalog-title							{ margin-bottom: 10px; font-size: 1.18em; font-weight: 500; color: var(--theme-text-color);}
#excerpt-content #excerpt-content-holder 											{ margin-right: 60px;}
#excerpt-content #excerpt-content-holder .excerpt-content							{ padding-top: 20px; border-top: 1px solid var(--light-border-color);}
#excerpt-content #excerpt-content-holder .excerpt-content:first-child 				{ padding-top: 0; border-top: none;}
#excerpt-content #excerpt-content-holder .excerpt-content h2						{ font-size: 1.4em; margin-bottom:1em; }
#excerpt-content #excerpt-content-holder .excerpt-content h3						{ font-size: 1.15em; margin-bottom: .8em; }
#excerpt-content #excerpt-content-holder .excerpt-content h4						{ font-size: 1.1em; margin-bottom: .8em; margin-left: 1em;}
#excerpt-content #excerpt-content-holder .excerpt-content .section-title.has-changed-icon,
#excerpt-content #excerpt-content-holder .excerpt-content .section-content.has-changed-icon { position: relative; padding-left: 25px; margin-left: 0;}
#excerpt-content #excerpt-content-holder .excerpt-content .section-title .changed-icon 		{ position: absolute; top: 3px; left: 0;}
#excerpt-content #excerpt-content-holder .excerpt-content .section-title 					{ margin-left: 10px;}
#excerpt-content #excerpt-content-holder .excerpt-content .section-content 					{ margin-bottom: 20px; padding-left: 10px; padding-right: 40px; position: relative;}
#excerpt-content #excerpt-content-holder .excerpt-content .section-content .more-operation-button { position: absolute; right: 10px; top: 0;}
#excerpt-content #excerpt-content-holder .excerpt-content .fr-view 					{ color: #666; line-height: 1.5em;}
#excerpt-content #excerpt-content-holder .excerpt-content .law-table-wrapper 		{ border: none; padding: 0; margin: 15px 0; font-size: 1em;}
#excerpt-content #excerpt-content-holder .excerpt-content .law-table .first-law-no	{ font-size: 1.1em;}
#excerpt-content #excerpt-content-holder .excerpt-content .law-table td 			{ padding-top: 3px; padding-bottom: 3px;}
#excerpt-content #excerpt-content-holder .excerpt-content .law-table .order-title	{ margin-top: 10px;}
#excerpt-content #excerpt-content-holder .excerpt-content .law-table .first-law-no td:nth-child(2),
#excerpt-content #excerpt-content-holder .excerpt-content .law-table.narrow .law-no:nth-child(3),
#excerpt-content #excerpt-content-holder .excerpt-content .merged-cell				{ padding-left: 10px;}
#excerpt-content #excerpt-content-holder .more-operation-button 					{ color: #ccc; cursor: pointer; transition: all .2s;}
#excerpt-content #excerpt-content-holder .more-operation-button:hover 				{ color: #666;}

#excerpt-note-editor 																{ transition: all .2s;}
#excerpt-note-editor:hover  														{ border-radius: 4px; box-shadow: inset 1px 1px 4px rgba(0,0,0,.18); padding: 6px 10px;}

.excerpt-item-note																	{ margin: 10px 0; padding: 8px 15px; line-height: 1.4em; background-color: var(--soft-bg-color); border-radius: 4px;}

.more-excerpt-buttons a 															{ display: block; margin: 10px 0; cursor: pointer; transition: all .2s;}
.more-excerpt-buttons a:hover 														{ color: #222;}
.more-excerpt-buttons a i 															{ margin-right: 5px;}

#excerpt-content .excerpt-item-group												{ margin-bottom: 25px;}
#excerpt-content .excerpt-item-group:first-child .move-up,
#excerpt-content .excerpt-item-group:last-child .move-down 							{ display: none;}
#excerpt-content .group-title														{ color: var(--theme-text-color); font-size: 1.2em; line-height: 1.2em; font-weight: 500; margin-bottom: 20px; }
#excerpt-content .group-title .buttons 												{ margin-left: 30px; visibility: hidden;}
#excerpt-content .group-title:hover .buttons 										{ visibility: visible;}
#excerpt-content .group-title .btn 													{ color: #aaa; transition: color .2s; cursor: pointer; display: inline-block; font-size: 12px; margin-left: 5px; width: 28px; height: 28px; line-height: 28px; text-align: center; background-color: #efefef; border-radius: 4px;}
#excerpt-content .group-title .btn:hover											{ color: var(--theme-text-color);}
#excerpt-content .group-item														{ margin-bottom: 20px;}
#excerpt-content .group-item .data 													{ flex-grow: 1;}
#excerpt-content .group-item:last-child												{ margin-bottom: 0;}
#excerpt-content .group-item .title 												{ margin-bottom: 5px;}
#excerpt-content .group-item .title .changed-icon 									{ color: orange; margin-right: 3px; }
#excerpt-content .group-item .fr-view 												{ color: #666;}
#excerpt-content .group-item .buttons 												{ margin-left: 20px; visibility: hidden;}
#excerpt-content .group-item:hover .buttons 										{ visibility: visible;}
#excerpt-content .group-item .btn 													{ color: #aaa; background-color:var(--soft-bg-color); transition: color .2s; cursor: pointer; display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 4px;}
#excerpt-content .group-item .btn:hover												{ color: var(--theme-text-color);}

#toolbox-excerpts 																	{ overflow-y: hidden !important;}
#toolbox-excerpts #excerpt-list														{ flex-grow: 1; overflow-y: auto; display: block;}
#toolbox-excerpts .toolbox-search-body 												{ height: 100%;}

.excerpt-content-list .changed-icon													{ margin-right: 5px; font-size: 14px; color: orange;}
.excerpt-content-list > .excerpt-content > .group-title 							{ cursor: pointer; position: relative;}
.excerpt-content-list > .excerpt-content > .group-title::after						{ content: '\f106'; font: var(--fa-font-regular); font-size: 12px; position: absolute; right: 8px; top: .4em; transition: transform .4s .4s; }
.excerpt-content-list > .excerpt-content > .group-title.collapse::after 			{ transform: rotate(180deg);}

.excerpt-checkbox 																	{ position: absolute; left: -50px; top: 10px; visibility: hidden; display: none; }
.excerpt-checkbox::after 															{ content: '\f0c8'; font: var(--fa-font-light); font-size: 15px; position: absolute; left: 0; visibility: visible; color: #999;}
.excerpt-checkbox:checked::after 													{ content: '\f14a'; font-weight: 900; color: var(--theme-text-color);}
.section-content																	{ padding: 5px; transition: padding .4s; position: relative;}
.section-content .excerpt-checkbox													{ left: 0; top: 5px;}

#excerpt-header 																	{ position: absolute; right: 15px; margin-top: 8px; width: 100%; max-width:fit-content;  padding-left:5px; background-color: #fff; border: 1px solid var(--soft-border-color); border-radius: 5px; z-index: 1010; opacity: 0; visibility: hidden; transition: all .2s, visibility 0s .2s; }
#excerpt-header.ready 																{ opacity: 1; visibility: visible; transition: all .2s, visibility 0s; }
#excerpt-header .excerpt-header-inner 												{ flex-grow: 1;}
#excerpt-header .excerpt-header-inner > p 											{ white-space: nowrap; margin-right: 10px;}
#excerpt-header .selector-wrapper													{ min-width: 290px; }
#excerpt-header .btn																{ flex-shrink: 0; flex-grow: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; color: var(--mid2-text-color); font-size: 1.05em; cursor: pointer; border-left:1px solid var(--light-border-color);  transition: all .2s; }
#excerpt-header .btn:hover 															{ color: var(--theme-text-color);}
#excerpt-header-create																{ display: block; padding: .8em 15px .9em 15px; font-weight: 500; color: var(--theme-text-color); cursor: pointer;}
#excerpt-header-create:hover 														{ color: #fff; background-color: var(--theme-bg-color); }
#excerpt-header-create i 															{ margin-right: 4px;}

body.excerpt-mode 																								{ overflow-x: hidden; }
body.excerpt-mode #excerpt-header																				{ transition: transform .6s; will-change: transform;}
#excerpt-header-dropdown-holder 																				{ position: absolute; left: 0; right: 8px; top: 41px; }
#excerpt-header-dropdown-holder .select2-container--default														{ left: 5px !important; top: 0 !important;}
#excerpt-header-dropdown-holder .select2-results>.select2-results__options										{ max-height: 300px;}
#excerpt-header-dropdown-holder .select2-results__options--nested li											{ padding-left: 2.5em;  padding-top: .5em; padding-bottom: .5em;}
#excerpt-header-dropdown-holder .select2-results__option														{ color: #666; }
#excerpt-header-dropdown-holder .select2-results__option:hover 													{ color: var(--theme-text-color); }
#excerpt-header-dropdown-holder .select2-results__option strong													{ color: #444;}

#excerpt-list-selector + .select2-container--default .select2-selection__placeholder 							{ color: var(--theme-text-color); font-size: 1.05em; font-weight: 400;}
#excerpt-list-selector + .select2-container--default .select2-selection--single 								{ height: 40px; border:none;}
#excerpt-list-selector + .select2-container--default .select2-selection--single .select2-selection__rendered 	{ line-height: 38px;}
#excerpt-list-selector + .select2-container--default .select2-selection--single .select2-selection__arrow		{ height: 40px;}

.show-excerpt-checkbox .law-table-wrapper,
.show-excerpt-checkbox .section-content	    										{ padding-left: 50px; }
.show-excerpt-checkbox .excerpt-checkbox											{ display: block; background: #fff;}
 
#excerpt-view #main-wrapper .excerpt-note 											{ margin-bottom: 30px; padding-top: 30px; border-top: 1px solid var(--light-border-color);  }
#excerpt-view #main-wrapper .excerpt-note-body,
#excerpt-view #main-wrapper #excerpt-catalog										{ padding: 30px; border-radius: 10px; border: 1px solid var(--light-border-color);}
#excerpt-view #main-wrapper #excerpt-catalog 										{ margin-bottom: 30px;}
#excerpt-view #main-wrapper .excerpt-note .fr-view 									{ color: #666;}
#excerpt-view #main-wrapper .excerpt-note .fr-view + .excerpt-attachment 			{ margin-top: 20px;}
#excerpt-view #main-wrapper .excerpt-note .excerpt-attachment-title,
#excerpt-view #main-wrapper #excerpt-catalog .excerpt-catalog-title					{ font-size: 1.15em; font-weight: 500; color: var(--theme-text-color); margin-bottom: 15px; }
#excerpt-view #main-wrapper .excerpt-note .file-upload-list							{ margin-bottom: 0;}
#excerpt-view #main-wrapper .excerpt-note .dz-preview 								{ background: none; padding: 3px 2px;}
#excerpt-view #main-wrapper .excerpt-note .dz-preview:last-child					{ padding-bottom: 0;}
#excerpt-view #main-wrapper #excerpt-catalog + .excerpt-content 					{ border-top: none; padding-top: 0;}
#excerpt-view #main-wrapper #excerpt-catalog + .excerpt-content-list > .excerpt-content:first-child { border-top: none; padding-top: 0;} 
#excerpt-view #main-wrapper .excerpt-content										{ padding-top: 30px; border-top: 1px solid var(--light-border-color);}
#excerpt-view #main-wrapper .excerpt-content h2										{ font-size: 1.6em; margin-bottom: 1.5em; }
#excerpt-view #main-wrapper .excerpt-content h3										{ font-size: 1.4em; margin-bottom: 1.5em; }
#excerpt-view #main-wrapper .excerpt-content h4										{ font-size: 1.3em; margin-bottom: 1em; margin-left: 1em;}
#excerpt-view #main-wrapper .excerpt-content .section-content 						{ margin-bottom: 20px; margin-left: 1.3em;}
#excerpt-view #main-wrapper .excerpt-content .fr-view 								{ color: #666; line-height: 1.5em;}
#excerpt-view #main-wrapper .excerpt-content .law-table-wrapper 					{ border: none; padding: 0; margin: 15px 0 15px 30px; font-size: 1.1em;}
#excerpt-view #main-wrapper .excerpt-content .order-title 							{ font-size: 1.2em; margin-top: 10px; }
#excerpt-view .article-box .article-header .meta i									{ color: #888; margin-right: 4px;}
#excerpt-view .article-box .article-header .excerpt-tags 							{ margin-top: 8px;}
#excerpt-view .article-box .article-header .excerpt-tags .tag 						{ font-size: .9em;}

.export-dialog																		{ padding: 5px 3px;}
.export-dialog .fr-view 															{ margin-bottom: 15px;}
.export-dialog .switch-toggle 														{ margin-right: 10px;}
.export-dialog .buttons 															{ margin-top: 30px;}
.export-dialog .buttons .button 													{ margin-right: 2px;}
.export-dialog .buttons .cancel-button 												{ box-shadow: none;}

#excerpt-search-wrapper 															{ padding-top: 80px; }
#excerpt-search-form																{ z-index: 1; position: fixed; height: 80px; left: 5%; right: 5%; top: 0; padding-right: 50px; border-bottom: 1px solid var(--soft-border-color); background: #fff; }
#excerpt-search-form #database-selector-wrapper 									{ width: 140px; margin-right: 10px;}
#excerpt-search-form #database-selector-wrapper .select2-container--default .select2-selection--single { height: 36px;}
#excerpt-search-form #keywords-input-wrapper										{ flex-grow: 1; position: relative;}
#excerpt-search-form input 															{ height: 36px; padding: 0 1em; }
#excerpt-search-form .book-list														{ border-top: none;}

#excerpt-search-suggestion															{ position: absolute; left: 0; top: 40px; width: 100%;}
#excerpt-search-suggestion .ui-autocomplete-category 								{ font-family:"Noto Sans TC"; font-size: 1.05em; font-weight: 500; padding: .2em .4em; margin: .8em 0 .2em .3em; line-height: 1.5; background: none; }
#excerpt-search-suggestion .ui-menu 												{ max-width: 100%; padding-bottom: 15px; border: none !important; box-shadow: 3px 3px 10px rgba(0,63,64,.12); }
#excerpt-search-suggestion .ui-menu .ui-menu-item-wrapper 							{ padding: 0; }
#excerpt-search-suggestion .ui-menu .ui-menu-item-wrapper a 						{ display: block; padding: .5em .6em; font-size: 1rem; line-height: 1.4em; font-family:"Noto Sans TC"; }
#excerpt-search-suggestion .ui-menu .ui-menu-item-wrapper a .sep 					{ margin: 0 .8em; font-size: .75em; transform: translateY(-1px); color: #888;}
#excerpt-search-suggestion .ui-menu .ui-menu-item-wrapper:hover 					{ border-color: transparent; background:var(--light-bg-color); color: var(--theme-text-color); border: 1px solid transparent !important; }
#excerpt-search-suggestion .ui-menu-item .ui-state-active 							{ border-top-color: transparent !important; border-bottom-color: transparent !important; }


/** Note **/
#toolbox-notes 																		{ overflow-y: hidden !important;}
#toolbox-notes #note-list															{ flex-grow: 1; overflow-y: auto; display: block;}
#toolbox-notes .toolbox-search-body 												{ height: 100%;}

#note-list-holder > div > .group:last-child											{ margin-bottom: 15px;}


/** Page **/
.toolbox-page-list 																	{ padding: 15px 20px 20px 20px; border-bottom: 1px solid #ddd;}
.toolbox-page-list:last-child														{ border-bottom: none;}
.toolbox-page-list .title 															{ color: #333; font-size: 1.2em; line-height: 1.2em; font-weight: 500; padding: .5em .3em; margin-bottom: 5px;}
.toolbox-page-list li 																{ color: #666;}
.toolbox-page-list a 																{ display: block; color: #666; line-height: 1.2em; padding:7px 25px 7px 9px; border-radius: 4px; transition: all .2s; position: relative;}
.toolbox-page-list a::after															{ color: inherit; content: "\f08e"; font: var(--fa-font-regular); font-size: 12px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0; transition: all .2s; }
.toolbox-page-list a:hover 															{ background-color: var(--soft-bg-color); color: var(--theme-text-color); }
.toolbox-page-list a:hover::after													{ opacity: 1;}
#toolbox-pages.large .toolbox-page-list .title 										{ font-size: 1.1em; padding-top: 0; margin-bottom: 8px;}
#toolbox-pages.large .toolbox-page-list li											{ margin-bottom: 10px;}
#toolbox-pages.large .toolbox-page-list li:last-child 								{ margin-bottom: 0;}
#toolbox-pages.large .toolbox-page-list a 											{ border: 1px solid var(--soft-border-color); color: var(--theme-text-color); border-radius: 5px; padding:15px 25px 15px 10px; }
 

/*
========================
Homepage
========================
*/
#intro-holder							{ display: none;}

.main-category							{ margin: 40px 0; }
.main-category li 						{ border-radius: 15px; position: relative; }
.main-category li a						{ display: block; height: 0; padding-top: 100%; font-size: 1.15em; position: relative;}
.main-category li a:hover img 			{ transform: translate(-50%, -50%) scale(1.05, 1.05); opacity: 1;}
.main-category li img 					{ position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: block; margin-bottom: 15px; width: 33%; opacity: .75; transition: all .5s; }
.main-category li .info 				{ position: absolute; left: 50%; top: 75%; transform: translate(-50%, -50%); width: 68%; }
.main-category li .title 				{ font-size: 1.25em; font-weight: 500; letter-spacing: .02em; }
.main-category li .desc 				{ margin-top: 12px; color: #888; font-size: 14px; }
.main-category .status-tag 				{ display: none; position: absolute; right: 15px; top: 20px ; }

.homepage-links 						{ max-width: 1000px; margin: 60px auto;}
.homepage-links h3 						{ margin-bottom: 20px; font-size: 1.3em; color: #444; }
.homepage-links li 						{ margin: 10px 0; line-height: 1.2em; color: #666;}
.homepage-links a:hover 				{ color: #222;}


/*
========================
Database main page
========================
*/
#sort-favorite-button.active			{ background-color: var(--light-bg-color);}
.favorite-terms .sort-handle 			{ margin-right: 0; margin-left: 10px; pointer-events: none;}
.favorite-terms .sort-handle i 			{ color: var(--light-text-color);}

.carousel-menu 							{ margin-bottom: 50px; transition: opacity .2s; position: relative; }
.carousel-menu h2 						{ margin-bottom: 25px;}
.carousel-menu .swiper 					{ padding-bottom: 30px;}
.carousel-menu .swiper-wrapper			{ padding-bottom: 7px;}
.carousel-menu .swiper-slide			{ border: 1px solid var(--soft-border-color); padding: 10px; width: 18.4%; margin-right: 2%; }
.carousel-menu .thumb-rect				{ background-color: #f2f2f2; border-radius: 5px;}
.carousel-menu .thumb-rect::before		{ content: ''; position: absolute; left: 0; top: 0; right: 0; bottom:0; opacity: .5; background: url(../image/logos/logo-icon.svg) no-repeat 50% 50%; background-size: 25%;}
.carousel-menu .thumb-rect .fill 		{ position: absolute; left: 0; top: 0; right: 0; bottom:0; }
.carousel-menu .thumb-rect img 			{ position: static; object-fit: cover; max-width: none; max-height: none; width: 100%; height: 100%;  }
.carousel-menu .title 					{ font-size: 1.05em; line-height: 1.4em; padding: 10px 5px 5px 5px;}
.carousel-menu .swiper-pagination 		{ position: absolute; bottom: 0; }
.carousel-menu .swiper-pagination-bullet-active { background-color: var(--theme-bg-color);}
.carousel-menu .swiper-button-prev				{ left: 5px; top: auto; bottom:-15px; width: auto;}
.carousel-menu .swiper-button-next				{ right: 5px; top: auto; bottom:-15px; width: auto;}
.carousel-menu .swiper-button-next, 
.carousel-menu .swiper-button-prev				{ color: var(--theme-text-color);}
.carousel-menu .swiper-button-next::after, 
.carousel-menu .swiper-button-prev::after		{font-size: 14px; }
.carousel-menu .swiper-button-next.swiper-button-disabled, 
.carousel-menu .swiper-button-prev.swiper-button-disabled	{ display: none;}

.block-menu 							{ margin-bottom: 50px;}
.block-menu h2 							{ margin-bottom: 25px;}
.block-menu .tabs 						{ margin-bottom: 30px; height: 52px;}
.block-menu .tabs .tab 					{ font-size: 1.2em; font-weight: 500; text-align: center; padding: 1em 0; border-bottom: 1px solid var(--soft-border-color); color: var(--light-text-color); cursor: pointer; transition: color .2s;}
.block-menu .tabs .tab.active 			{ border-bottom: 1px solid var(--mid-border-color); color: var(--theme-text-color);}
.block-menu .tabs-content 				{}
.block-menu .tab-body 					{ display: none;}
.block-menu .tab-body.active 			{ display: block;}
.block-menu .swiper-button-prev			{ left: 5px; width: auto;}
.block-menu .swiper-button-next			{ right: 5px; width: auto;}
.block-menu .swiper-button-next, 
.block-menu .swiper-button-prev			{ color: var(--theme-text-color); width: 25px;}
.block-menu .swiper-button-next:after, 
.block-menu .swiper-button-prev:after	{ font-size: 14px;}
.block-menu .swiper-button-next.swiper-button-disabled, 
.block-menu .swiper-button-prev.swiper-button-disabled	{ display: none;}

.terms-menu								{ margin-bottom: 80px;}
.terms-menu .header						{ border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-bottom: 20px; }
.terms-menu .header h2 					{ font-size: 1.4em; letter-spacing: .02em; color: #444; }
.terms-menu li .label					{ flex-grow: 1; background-color: #fff; border-radius: 15px; height: 100px; padding: 0 1.5em; font-size: 1.05em;  font-weight: 500; line-height: 1.3em; color: #444; position: relative; }
.terms-menu li .label:hover 			{ color: var(--theme-text-color); border: 1px solid var(--light-border-color);}
.terms-menu li.has-icon .label 			{ padding: 0 18px;}
.terms-menu li.has-icon .icon 			{ position: relative; width: 64px; height: 64px; flex-shrink: 0; flex-grow: 0; border-radius: 10px; background-color:var(--soft-bg-color); }
.terms-menu li.has-icon .icon img 		{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.terms-menu li.has-icon .icon img[src$=".svg"] { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 55%; max-height: 55%; opacity: .35;}
.terms-menu li.has-icon .text 			{ flex-grow: 1; padding: 0 1.33em; }
.terms-menu .status-icon				{ margin-left: auto;}
.terms-menu .no-terms					{ color: #999;}

.terms-menu.vl 							{ margin: 20px 0 20px 0; }
.terms-menu.vl ul 						{ align-items: stretch;}
.terms-menu.vl li .label 				{ height: 100%; padding: 1.8em 1.5em; font-size: 1.05rem; border: 1px solid var(--light-border-color); }
.terms-menu.vl li:hover .label 			{ border: 1px solid var(--mid-border-color); }
.terms-menu.vl li.is-category .label	{ background-color: var(--light-bg-color); color: var(--theme-text-color);}
.terms-menu.vl li .title 				{ font-size: 1.18em; line-height: 1.3em;  }
.terms-menu.vl li .summary				{ font-size: 14px; font-weight: 400; line-height: 1.3em; color: #666; margin-top: 15px; margin-bottom: auto;}
.terms-menu.vl li .notes 				{ font-weight: 400;  color: #666; margin-top: 30px; }

.terms-list li							{ margin-left: 30px; }
.terms-list li a						{ display: inline-block; padding:10px 25px; color: var(--theme-text-color); font-size: 1.03em; font-weight: 500; letter-spacing: .04em; position: relative; border-radius: 8px; transition: background-color .2s; }
.terms-list li a::before				{ content: '•'; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); }
.terms-list li a:hover					{ background-color: var(--soft-bg-color);}

#term-grid 								{ margin-top: 40px;}
#term-grid .grid-sizer,
#term-grid .grid-item 					{ width: 15%; }
#term-grid .gutter-sizer 				{ width: 2%; }
#term-grid .grid-item  					{ position: relative; margin-bottom: 2%; border-radius: 5px; color: #666; overflow: hidden;}
#term-grid .grid-item .thumb img 		{ z-index: 1; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; }
#term-grid .grid-item .thumb 			{ padding-top: 100%; height: 0; }
#term-grid .grid-item.hr 				{ width: 32%; }
#term-grid .grid-item.hr .thumb			{ padding-top: 46.875%; }
#term-grid .grid-item.vl .thumb			{ padding-top: 213.323%; }
#term-grid .grid-item .info 			{ z-index: 3;  position: absolute; left: 0; bottom:0; width: 100%; font-weight: 500; color: #fff;}
#term-grid .grid-item .info a 			{ display: flex; align-items: center; padding:14px 15px; transition: padding .2s; font-size: 1.05em; }
#term-grid .grid-item .info .count 		{ font-size: 12px; font-weight: normal; margin-left: 8px;}
#term-grid .grid-item::before			{ z-index: 2;  content: ''; position: absolute; left: 0; bottom:0; width: 100%; height: 70%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
#term-grid .grid-item::after			{ content: ''; position: absolute; left: 0; top: 0; right: 0; bottom:0; border: 1px solid #ddd; border-radius: 5px; pointer-events: none; }
#term-grid .grid-item:hover::after		{ border: 1px solid #bbb;} 

.category-tags .tag-list:first-child	{ padding: 15px 0 9px 0; margin-bottom: 15px; border-bottom: 1px solid #ddd;} 

.no-items								{ border-radius: 4px; border: 1px solid #ddd; background-color: #fff; color: #888; height:60vh; max-height: 400px; text-align: center; display: flex; flex-direction: column; justify-content: center;}
.no-items p								{ font-size: 1.4em; line-height: 1.25em;}
.no-items .buttons 						{ margin-top: 30px;}
.no-items .buttons .or 					{ margin: 0 15px;}

.aside-index 							{ color: #666;}
.aside-index li 						{ margin: 18px 0;}				
.aside-index a:hover 					{ color: #444;}
.aside-index i 							{ font-size: 13px; margin-right: 5px;}

.book-list-header											{ margin-bottom: 30px !important;}
.book-list-header .menu-filter-button						{ margin-right: 20px; position: relative;}
.book-list-header .menu-filter-button.loading .icon 		{ visibility: hidden;}
.book-list-header .menu-filter-button.loading::after		{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: '\f3f4'; font: var(--fa-font-regular); color: var(--theme-text-color); pointer-events: none; animation: rotation 2s infinite linear; }
.book-list													{ position: relative; min-height: 100px; border-top:1px solid #e0e0e0;}
.book-list > li,
.book-list > li:last-child									{ border-bottom:1px solid #e0e0e0; }
.book-list > li > .book-list-title							{ height: 50px; padding: 16px 3px; font-size: 1.12em; letter-spacing: .04em; color: #444; transition: padding .2s; cursor: pointer; }
.book-list > li > .book-list-title:hover 					{ /*padding-left: 10px;*/ color: var(--theme-text-color); }
.book-list > li > .book-list-title .text 					{ line-height: 1.2em;}
.book-list > li > .book-list-content > ul 					{ padding: 10px 0 25px 40px;  }
.book-list .seo-url 										{ display: none;}
.book-list-title											{ position: relative; transition: color .2s;}
.book-list-title .num 										{ margin-right: 1em; font-size: .9em; }
.book-list-title .text 										{ margin-right: auto; cursor: pointer;  }
.book-list-title .status-tag								{ margin-right: 25px;}
.book-list-content ul										{ padding: 20px 0 5px 25px; }
.book-list-content li 										{ margin: 20px 0; color: var(--theme-text-color); }
.book-list-content li:first-child							{ margin-top: 0;}
.book-list-content li:last-child							{ margin-bottom: 0;}
.book-list-content li:hover 								{ color: var(--light-text-color);}
.book-list-content li .text 								{ font-size: 1.05em; font-weight: 500; line-height: 1.2em;  }
.book-list-content li .icon 								{ margin-right: 12px; color: var(--light-text-color);}
.book-list-content li .icon.fa-circle-small 				{ font-size: 12px; transform: scale(.7, .7);}
.book-list li.loading > .book-list-title::after				{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); content: '\f3f4'; font: var(--fa-font-regular); color: var(--theme-text-color); pointer-events: none; animation: rotation 2s infinite linear; }
.book-list li.loading > .book-list-title .num 				{ visibility: hidden;}
.book-list-content li.loading > .book-list-title::after		{ left: 5px;}
.book-list-content li.loading > .book-list-title .icon 		{ visibility: hidden;}
.book-list.empty p 											{ margin-top: 30px;}

.filter-container 											{ position: relative; z-index: 1; }
.filter-set 												{ margin-top: 25px; }
.filter-set:first-child										{ margin-top: 0;}
.filter-set h3 												{ margin-bottom: .7em;}
.filter-set ul 												{ display: flex; flex-wrap: wrap;}
.filter-set li 												{ width: 12.5%; flex-shrink: 0; flex-grow: 0; margin: .5em 0; line-height: 1.2em; color: var(--theme-text-color); position: relative;}
.filter-set [type="checkbox"]								{ visibility: hidden;}
.filter-set .icon 											{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-top: 2px;}
.filter-set .icon i 										{ font-size: 1.2em;}
.filter-set .icon .checked									{ display: none; }
.filter-set .icon .unchecked								{ color: var(--theme-border-color);}
.filter-set [type="checkbox"]:checked + .icon .checked 		{ display: block; }
.filter-set [type="checkbox"]:checked + .icon .unchecked 	{ display: none;}
.filter-box 												{ display: none; background-color: var(--soft-bg-color); border-radius: 15px; padding:30px; margin-bottom: 40px; }
.filter-box .unselect-wrapper 								{ display: block; width: 0; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.filter-box .unselect-wrapper.show 							{ width: auto; opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s;}
.filter-box .buttons										{ margin-top: 30px; justify-content: center;}
.filter-box .buttons .button 								{ margin: 0 6px;}


/*
========================
Term
========================
*/
body.lighten-theme,
body.lighten-theme #article-toolbar,
body.lighten-theme .article-box .article-header,
body.lighten-theme .article-box .article-body,
body.lighten-theme .article-box .article-header-inner,
body.lighten-theme .article-box .article-body-inner					{ transition: background-color 1.4s; }

body.lighten-theme.not-responsive,
body.lighten-theme.not-responsive #article-toolbar,
body.lighten-theme.not-responsive .article-box .article-header,
body.lighten-theme.not-responsive .article-box .article-body 			{ background-color: var(--soft-bg-color);}
body.lighten-theme.not-responsive .article-box .article-header-inner,
body.lighten-theme.not-responsive .article-box .article-body-inner		{ background-color: #fff;}

/** Article toolbar **/
#article-toolbar										{ height: 70px; padding: 20px 15px 0 15px; z-index: 99; background-color: #fff; position: relative;}
#article-toolbar .buttons > li 							{ margin-left: 6px;}
#article-toolbar .buttons > li:first-child				{ margin-left: 0;}
#article-toolbar .back-button							{ margin-right: 30px;}
#article-toolbar .breadcrumbs							{ margin-bottom: 0;}
#article-toolbar .dropdown .menu						{ z-index: 1010;}
#article-toolbar .alt-panel-button						{ box-shadow: none; margin-left: 8px;}
#article-toolbar #excerpt-button i						{ display: none;}

.bookmark-button										{ display: none;}
.bookmark-button.show									{ display: inline-block;}

.favorite-button										{ display: none;}
.favorite-button.show									{ display: inline-block;}


/** Article box **/
.article-box											{ position: relative; /*overflow: hidden;*/ }
.article-box .article-header							{ background-color: #fff; padding: 10px 15px 0 15px; overflow: hidden; z-index: 1; }
.article-box .article-header-inner						{ padding: 40px 4% 0 4%; border-radius: 15px 15px 0 0; box-shadow: 0 5px 15px rgba(0,63,64,.15); }
.article-box .article-header-inner .header-content		{ padding-bottom: 20px;  }
.article-box .article-header .header-content-thumb		{ width: 200px; flex-shrink: 0; flex-grow: 0; margin-right: 40px; margin-bottom: 15px; transition: all .2s;}
.article-box .article-header .header-content-info 		{ flex-grow: 1; margin-bottom: 15px;}
.article-box .article-header.sticky .header-content 	{ border-bottom: 1px solid var(--soft-border-color); }
.article-box .article-header.sticky .header-content-thumb { width: 0; margin: 0; }
.article-box .article-header.sticky .summary			{ height: 0; margin: 0; }
.article-box .article-header .summary 					{ margin-top: 20px; overflow: hidden; transition: all .2s;}
.article-box .article-body								{ background-color: #fff; padding: 0 15px 20px 15px; overflow: hidden; }
.article-box .article-body-inner						{ padding: 0 4% 40px 4%; border-radius: 0 0 15px 15px; box-shadow: 0 0 15px rgba(0,63,64,.15); }

.article-box.tiny 										{ padding: 40px 6%; }
.article-box.small 										{ padding: 30px 4%;}
.article-box:last-child									{ margin-bottom: 0;}
.article-box h2											{ margin-bottom: 20px;}
.article-box .article-header .button 					{ margin-left: 5px;}
.article-box .article-header .button i 					{ margin: 0 4px 0 0;}
.article-box .article-contents							{ width: 100%; flex-grow: 1; }
.article-box .article-contents fieldset					{ margin-bottom: 40px;}
.article-box .article-contents fieldset:last-child 	 	{ margin-bottom: 0;}
.article-box .article-contents legend + .expandable  	{ border-top: 1px solid #ddd;}
.article-box .article-index								{ width: 180px; margin-bottom: 60px; }
.article-box .article-index li							{ margin: 15px 0; color: #777; line-height: 1.33em; }
.article-box .article-index li a:hover  				{ color: #444;}
.article-box .expandable-title 							{ padding: 25px 3px; }
.article-box .expandable-title h2						{ margin-bottom:0;}
.article-box .expandable-title h2 a 					{ border-bottom: 1px solid var(--theme-border-color);}
.article-box .expandable-title h2 a + i 				{ font-size: .8em; margin-left: .5em;}
.article-box .expandable.show:last-child				{ border-bottom: none;}
.article-header .meta 									{ margin-top: 18px; color: #888;}
.article-header .meta .meta-label 						{ font-size: 1.2em; font-weight: 500; color: #444;}
.article-header .meta p 								{ margin-right: 20px;}
.article-header .meta i 								{ color: var(--theme-text-color);}
.article-header .meta a 								{ border-bottom: 1px solid #888;}


.more-content-button																			{ visibility: hidden; position: absolute; right: 8px; width: 24px; height: 24px; line-height: 21px; font-size: 12px; text-align: center; cursor: pointer; transition: all .2s;}
body.excerpt-mode .more-content-button  														{ display: none;}
#database-term.is-login:not(.popup) .article-box .section-content										{ position: relative;}
#database-term.is-login:not(.popup) .article-box .section-content .more-content-button					{ transform: none;}
#database-term:not(.popup) .article-box .law-table .more-content-button									{ position: static;}
#database-term.is-login:not(.popup) .article-box .section-content										{ padding-right: 60px;}
#database-term.is-login:not(.popup) .article-box .section-content:hover .more-content-button,
#database-term.is-login:not(.popup) .article-box .law-table tr:hover .more-content-button				{ visibility: visible; }

/** Chanpter menu **/
#chapter-menu-button 												{ }
#chapter-menu														{ z-index: 1000; padding: 15px 0; position: absolute; right: 15px; top: 75px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; background-color: #fff; border: 1px solid var(--soft-border-color); overflow: hidden;}
#chapter-menu-body 													{ height: 60vh; max-height: 540px; overflow-y: auto; padding: 10px 0; }
.chapter-menu-group 												{ align-items: stretch; min-height:100%;}
.chapter-menu-set													{ padding: 5px 25px; width: 300px; flex-grow: 0; flex-shrink: 0; border-left: 1px solid var(--soft-border-color);}
.chapter-menu-set:first-child										{ border-left: none;}
.chapter-menu-set .title											{ font-size: 1.25em; font-weight: 500; letter-spacing: .02em; margin-bottom: 20px; color: var(--theme-text-color);}
.chapter-menu-set ul 												{ padding-bottom: 5px;}
.chapter-menu-set li												{ margin: 15px 0; line-height: 1.33em; }
.chapter-menu-set li a 												{ color: #888;}
.chapter-menu-set li a:hover 										{ color: var(--light-text-color);}
.chapter-menu-set li.active a										{ color: var(--theme-text-color);}
.chapter-menu-set li i 												{ margin-right: 7px;}
.chapter-menu-set.attachment-menu i 								{ margin-top: 3px;}
.show-chapter-menu #chapter-menu									{ opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s;}
.show-chapter-menu #chapter-menu-button 							{ background-color: var(--theme-bg-color); color: #fff;}
.show-chapter-menu #chapter-menu-button i 							{ color: #fff;}

/** Section Law Dialog **/
#section-law-dialog													{ padding: 0 10px; }
#section-law-dialog .header 										{ padding-bottom: 15px; border-bottom: 1px solid var(--light-border-color); position:sticky; left: 0; top: -1px; right: 0; background-color: #fff; z-index: 99;}
#section-law-dialog .close-button 									{ flex-grow: 0; flex-shrink: 0; margin-left: 10px; width: 28px; height: 28px; line-height: 30px;}
#section-law-dialog .term-title 									{ font-size: 1.33em; font-weight: 500; line-height: 1.2em; padding-top: 2px; color:var(--theme-text-color); }
#section-law-dialog .buttons 										{ padding: 15px 0;} 
#section-law-dialog .buttons .button 								{ margin-right: 5px; }
#section-law-dialog form .buttons 									{ padding-bottom: 0;} 
#section-law-dialog .button 										{ font-size: 1em; }
#section-law-dialog .button-sq i 									{ margin: 0;}
#section-law-dialog .bottom 										{ display: none; padding-top: 15px; border-top: 1px solid #ddd;}
#section-law-dialog .law-table-wrapper								{ margin: 0; padding: 0; border: none; font-size: 1em;}
#section-law-dialog .law-table-wrapper td.law-no:first-child 		{ padding-left: 0;}
#section-law-dialog table:not('.law-table') 						{ display: none;}

#section-law-dialog .note-wrapper									{ margin-top: 30px;  }
#section-law-dialog .note-title										{ font-weight: 500; color: #000; margin-bottom: 15px; }
#section-law-dialog .note-item										{ padding-bottom: 0;}
#section-law-dialog .note-item .note-form							{ display: none;}
#section-law-dialog .note-item.show-editor 							{ border: none; padding: 0;}
#section-law-dialog .note-form [name="subject"] 					{ margin-bottom: 10px; background-color: #fff;}
#section-law-dialog form input[type="text"]							{ border: 1px solid var(--light-border-color);}
#section-law-dialog .note-form .fr-box								{ z-index: 101;}
#section-law-dialog .note-form .buttons 							{ margin-top: 10px; position: sticky; left: 0; right: 0; bottom:0; background-color: #fff; z-index: 100; }
#section-law-dialog .comment-box									{ border-top: 1px solid var(--light-border-color);}
#section-law-dialog .fr-view 										{ font-size: 1em;}
#section-law-dialog .label-input-wrapper 							{ border: 1px solid var(--light-border-color);}
#section-law-dialog .fr-box .fr-toolbar.fr-top,
#section-law-dialog .fr-box.fr-basic .fr-wrapper,
#section-law-dialog .fr-second-toolbar								{ border-color: var(--light-border-color) !important;}
#section-law-dialog .fr-toolbar .fr-newline							{ background: var(--softer-border-color);}

#section-law-dialog #note-content-changed-tip p 					{ margin-right: auto;}
#section-law-dialog #note-content-changed-tip .buttons				{ padding: 0;}

/** Revision list **/
#revisions-list														{}
#revisions-list .item												{ margin-bottom: 25px;}
#revisions-list	.revision-header									{ background-color: #f7f7f7; border-radius: 3px; padding: 6px 14px; margin-bottom: 15px;}
#revisions-list	.revision-header .no								{ font-weight: 500;}
#revisions-list	.revision-header .date								{ font-size: .96em; color: #888; letter-spacing: .02em;}
#revisions-list	.revision-content									{}
#revisions-list	.revision-content .title							{ font-size: 1.05em; font-weight: 500; margin-bottom: 5px;}
#revisions-list	.revision-content .fr-view							{ font-size: 1rem; color: #444;}
#revisions-list	.diffdel											{ background-color: #fceded; color: rgb(211, 52, 52); }
#revisions-list	.diffins											{ background-color: #edfcf1; color: rgb(26, 90, 35); text-decoration: none;}
#revisions-list	del.diffmod											{ background-color: #fceded; color: rgb(211, 52, 52); }
#revisions-list	ins.diffmod											{ background-color: #edfcf1; color: rgb(26, 90, 35); text-decoration: none;}

/** Gallery **/
#term-gallery     													{ width: 250px; }
#term-gallery .swiper 												{ background-color: #fff; border-radius: 4px; overflow: hidden; }
#term-gallery .swiper img 											{ width: 100%; height: 100%; object-fit: cover;}
#term-gallery .download-button										{ position: absolute; right: 15px; bottom:15px; width: 32px; height: 32px; line-height: 32px; text-align: center; padding: 0; background-color: #fff; color: #666; opacity: .75; }
#term-gallery .download-button i 									{ margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 16px; }
#term-gallery .download-button:hover 								{ opacity: 1;}
#term-gallery .thumb-nav											{ margin-top: 20px;}
#term-gallery .thumb-nav li 										{ width: 40px; height: 40px; margin-right: 8px; margin-bottom: 8px; border-radius: 50%; overflow: hidden; cursor: pointer;}
#term-gallery .thumb-nav img										{ object-fit: cover; }

.term-info p 														{ margin-bottom: 15px; color: #888;}
.term-info p:last-child												{ margin-bottom: 0;}
.term-info a 														{ text-decoration: underline;}
.term-info i 														{ font-size: 1.1em;}

/** Archives **/
.expandable.archive-fade 								{ opacity: 0;}
.expandable.is-archive 									{ display: none; }
.chapter-menu .is-archive								{ display: none; text-decoration: line-through;}

#hide-archive-button									{ display: none; }
#switch-archive											{ display: none; }

.show-archive #show-archive-button						{ display: none; }
.show-archive #hide-archive-button						{ display: inline-block; }
.show-archive .expandable.is-archive					{ display: block; }
.show-archive  .chapter-menu .is-archive				{ display: block; }

.has-archive #switch-archive							{ display: block; }


/** label-input for Note & Exceprt form **/
.label-input-wrapper									{ border-radius: 4px; border: 1px solid #ddd; margin-bottom: 10px; }
.label-input-wrapper .label 							{ background-color: #f2f2f2; color: #666; height: 36px; line-height: 36px; white-space: nowrap; margin: 0; padding: 0 15px;}
.label-input-wrapper .select2-container--default .select2-selection--single { border: none !important;}

.widget-save-to 										{ flex-grow: 1; margin-bottom: 20px; overflow: hidden; }
.widget-save-to .label 									{ color: var(--theme-text-color);}
.widget-category										{ margin-bottom: 20px;}
.widget-category-wrapper 								{ min-width: 200px;}
.widget-save-to + .widget-category-wrapper				{ margin-left: 8px;}
#select2-widget-category-option-selector-results .select2-results__message { display: none;}

.note-form .widget-category 							{ margin-bottom: 10px;}

ul[id^="select2-project_id"] .select2-results__group	{ color: #666;}
ul[id^="select2-project_id"] .select2-results__option .select2-results__option { padding-left: 3em;}

/** Note tag **/
.note-tag,
.note-tags-count										{ display: inline-flex; background-color: var(--midtone-bg-color); color: #fff; margin-top: 8px; margin-right: 4px; padding:3px 10px 3px 4px; border-radius: 30px; border: 1px solid #ddd; box-shadow: 1px 1px 4px rgba(0,0,0,.1); transition: all .2s; cursor: pointer;}
.note-tag:hover,
.note-tags-count:hover									{ background-color: #fff; color: #666;}
.note-tag.highlight-anchor								{ color: #666;}
.note-tag .icon 										{ width: 21px; margin-right: 5px; border-radius: 50%; overflow: hidden; }
.note-tag .icon a 										{ position: static;}
.note-tag .icon img 									{ position: absolute !important; margin: auto !important;}
.note-tag .label 										{ font-size: .96em; white-space: nowrap; }
.note-tags-count										{ position: relative; text-align: center; justify-content: center; padding: 3px 0; min-width: 32px; height: 32px; overflow: hidden; }
.note-tags-count .unexpand 								{ display: none;}
.note-tag												{ display: none;}
.note-tag:nth-child(-n+2)								{ display: inline-flex;}
.note-tags-holder.expand .note-tag						{ display: inline-flex;}
.note-tags-holder.expand .note-tags-count .num			{ display: none;}
.note-tags-holder.expand .note-tags-count .unexpand		{ display: inline;}

/** Issue form **/
#issue-form .row 										{ margin-top: 5px;}
#issue-form .label										{ margin-bottom: 5px; color: #222; font-size: 14px !important;}
#issue-form .option-label								{ margin-right: 30px; font-size: 14px !important;}
#issue-form .error 										{ text-align: left;}
#issue-form input 										{ background-color: #fff;}

/** Contact form **/
.contact-form 											{ margin: 30px 0 0 0;}
.contact-form h3 										{ margin-bottom: 30px;}

/*
========================
Search
========================
*/

.search-info								{ color: #666; margin-bottom: 30px; }
.search-results								{ margin-top: 20px; border-top: 1px solid #ddd; }
.search-results li							{ border-bottom: 1px solid #ddd; padding: 20px 5px; }
.search-results li.top-relevant 			{ border: none; background-color: #f7f7f7; border-radius: 15px; padding: 20px 20px 15px 20px;}
.search-results em							{ color:rgb(236, 61, 3); }
.search-results .database					{ margin-bottom: 12px; color: #808080;}
.search-results .title 						{ font-size: 1.2em; font-weight: 500; line-height: 1.2em;}
.search-results .title .sep 				{ margin: 0 1em; font-size: .8em; color: #888; transform: translateY(-1px);}
.search-results .summary 					{ line-height: 1.2em; margin-top: 10px; color: #808080;}
.search-results .keywords					{ margin-top: 10px; color: #808080;}
.search-more 								{ margin-top: 30px; color: #888; }
.search-empty 								{ background-color: #f7f7f7; color: #888; font-size: 1.2em; padding: 40px 4%;}

.top-relevant-results						{ background-color:#f5f5f5; padding: 30px 30px 20px 30px; margin-bottom: 20px;}
.top-relevant-results li:last-child			{ border-bottom: none;}
.top-relevant-results + .search-results 	{ border-top: none; }

/*
========================
Revisions
========================
*/

.revisions .user 							{ display: block; margin-bottom: 8px; }
.revisions .time 							{ font-size: .92em;}


/*
========================
User profile
========================
*/

#user-profile .main-content-wrapper .main-content 	{ padding: 80px 0;}
#profile-overview img								{ width: 72px; height: 72px; border-radius: 50%; margin-right: 20px;}
#profile-overview-info								{  width: 40%;}
#profile-overview-info .info p 						{ margin: 5px 0;}
#profile-overview-info .info .category,
#profile-overview-info .info .registerd 			{ color: #888;}
#profile-overview-statistics 						{ width: 60%; color: #888; }
#profile-overview-statistics .num 					{ font-size: 1.8em; margin-right: 5px; color: #222;}

.user-terms 										{ border-top: 1px solid #ddd; margin-top: 30px; }
.user-terms .time 									{ text-align: right; color: #888;}

.profile-box 										{ min-height: 400px; position: relative; background-color: #fff; }
.profile-box .box-header 							{ border-bottom: 1px solid var(--soft-border-color); height: 60px; padding: 10px 25px; flex-grow:0; flex-shrink: 0;}
.profile-box .box-header h3 						{ font-size: 1.15em; letter-spacing: .08em;}
.profile-box .box-header .buttons 					{ position: relative; z-index: 999;}
.profile-box .box-header .button 					{ height: 36px; line-height: 34px; box-shadow: none; margin-right: 5px;}
.profile-box .box-header .button-sq i 				{ font-size: 1em; color: #fff;}
.profile-box .box-header .button-soft i 			{ color: var(--theme-text-color);}
.profile-box .box-tabs 								{ display: flex; color: var(--theme-text-color);}
.profile-box .box-tab 								{ margin-right: 25px; height: 60px; line-height: 60px; cursor: pointer;}
.profile-box .box-tab.active 						{ font-weight: 500; border-bottom: 2px solid var(--mid-border-color);}
.profile-box .box-tab-body 							{ display: none;}
.profile-box .box-tab-body.active 					{ display: block;}
.profile-box .box-content 							{ padding: 20px 25px 30px 25px; position: relative; flex-grow: 1;}
.profile-box .box-content .group 					{ margin-top: 40px;}
.profile-box .box-content .group:first-child		{ margin-top: 15px;}
.profile-box .box-content .group > h4 				{ font-size: 1.25em; margin-bottom: 15px;}
.profile-box .box-footer 							{ margin-top: 15px; border-top: 1px solid var(--soft-border-color); height: 60px; padding: 10px 25px; }
.profile-box .list-table li.header > div			{ height: 30px;}
.profile-box .list-table li > div					{ height: 48px;}
.profile-box .list-table li > div:first-child 		{ color: var(--theme-text-color); font-weight: 500;}
.profile-box .list-table li > div:first-child .subtitle { color: #888; margin-top: 4px; font-size: .95em; font-weight: 400;} 
.profile-box .list-table .actions a:not(.button) 				{ margin-left: 20px; color: #aaa;}
.profile-box .list-table .actions a:not(.button):first-child	{ margin-left: 0;}
.profile-box .list-table .actions a:not(.button):hover 			{  color: var(--theme-text-color);}
.profile-box .list-table .actions a:not(.button) i 				{ margin-right: 4px;}
.profile-box .list-table .actions .button						{ color: var(--theme-text-color); background-color: var(--softer-bg-color); height: 36px; line-height: 34px; margin: 0 0 0 3px;}
.profile-box .list-table .actions .button:last-child			{ margin-right: -10px;}
.profile-box .list-table .actions .button-sq 					{ width: 36px;}
.profile-box .list-table .actions .button i 					{ color: var(--theme-text-color); font-size: 15px; margin-right: 0;}
.profile-box .list-table .actions .button:hover 				{ border: 1px solid var(--light-border-color);}
.profile-box .list-table .actions .button-profile 				{ padding-left: .86em; padding-right: .86em; font-size: .96em; border: 1px solid #f3f4f6; background: #f3f4f6; color: var(--theme-bg-color); transition: all .2s;}
.profile-box .list-table .actions .button-profile i 			{ font-size: .96em; margin-right: 2px; color: inherit;}
.profile-box .list-table .actions .button-profile:hover 		{ color: #fff; background-color: var(--theme-bg-color); border: 1px solid var(--theme-bg-color); }
.profile-box .list-table .actions .button-profile .num 			{ background-color: var(--light-bg-color); color: var(--theme-text-color); font-size: 12px; padding: 0 .45em .05em .45em; margin-left: 3px; border-radius: 12px;  }
.profile-box .list-table .actions .button-profile .num span 	{ transform: scale(.8); display: inline-block;}
.profile-box .list-table .pin-to-top 							{ margin-left: 3px; color: var(--theme-text-color);}
.profile-box .empty 											{ position: absolute; left: 50%; top: 50%; width: 90%; transform: translate(-50%, -100%); text-align: center; font-size: 1.4em; line-height: 1.2em; color: #aaa;}



/*
========================
My workgroups
========================
*/
 
/** workgroup list **/
.workgroup-list .name .tag 					{ font-size: .9em; font-weight: normal; background-color: var(--light-bg-color); color: var(--theme-text-color); margin: 2px 4px 2px 5px; padding:.2em .4em; border-radius: 3px; }

.member-icons								{ margin-right: 10px;}
.member-icons li 							{ width: 36px; height: 36px; margin-right: 5px; flex-shrink: 0; flex-grow: 0;}
.member-icons .icon							{ display: block; background-color: #ddd; width: 100%; height: auto; border-radius: 50%; position: relative; flex-grow: 0; flex-shrink: 0;}
.member-icons .icon i 						{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.member-icons .more-icon .num 				{ display: block; width: 36px; height: 36px; line-height: 36px; text-align: center; color: var(--theme-text-color); font-weight: 500; background-color: var(--soft-bg-color); border-radius: 50%; cursor: pointer; }

.member-icon-list							{ min-width: 180px;}
.member-icon-list li 						{ margin: 8px 0;}
.member-icon-list li:hover 					{ color: var(--theme-text-color);}
.member-icon-list .icon 					{ width: 36px; height: 36px; margin-right: 6px; flex-shrink: 0; flex-grow: 0; border-radius: 50%;}

.workgroup-member-list .icon				{ width: 48px; height: 48px; margin-right: 15px; flex-grow: 0; flex-shrink: 0; }
.workgroup-member-list .edit-permission 	{ color: #888;}
.workgroup-member-list .edit-permission:hover { color: var(--theme-text-color);}
.workgroup-member-list .edit-permission i   { margin-left: 3px; font-size: 13px; }
#inviting-members li:first-child > div		{ border-top: 1px solid #ddd;}

/** workgroup list **/
#owend-workgroups .count-members 			{ font-size: .9em; font-weight: normal; margin-left: 5px;}
#owend-workgroups .projects 			    { font-weight: 500; }


/** workgroup invite form **/
#workgroup-invite-form .select2-container	{ width: 99% !important;}
#workgroup-invite-form p 					{ margin-bottom: 20px;}

/** workgroup accept **/
#workgroup-invitation							{ height: 100%; overflow: hidden;}
#workgroup-invitation h2						{ max-width: 520px; margin: auto; margin-bottom: 30px; color: var(--theme-text-color); }
#workgroup-invitation #container 				{ padding: 0;}
#workgroup-invitation #header-wrapper 			{ box-shadow: none; background: none; border: none; display: none; }
#workgroup-invitation #header-inner			 	{ text-align: center; display: block; padding: 60px 0;}
#workgroup-invitation #header-inner > h1 		{ margin: auto; display: inline-block;}
#workgroup-invitation #header-wrapper svg,
#workgroup-invitation #header-inner > :not(h1),
#workgroup-invitation #nav-wrapper,
#workgroup-invitation #footer-wrapper,
#workgroup-invitation #bottom-toolbar,
#workgroup-invitation #mobile-bottom-toolbar,
#workgroup-invitation #aside-nav				{ display: none;}
#workgroup-invitation #main-wrapper			 	{ padding: 0 0 60px 0; min-height: 0;}
#workgroup-invitation .invalid-link a			{ display: inline-block; margin-top: 15px; color: var(--theme-text-color);}
#workgroup-invitation #intro-holder				{ display: none;}

.workgroup-view								{ overflow: hidden; max-width: 520px; margin: auto;  }
.workgroup-view .header						{ flex-grow: 0; flex-shrink: 0; padding: 20px 30px; background-color: var(--light-bg-color); border-bottom: 1px solid var(--light-border-color); }
.workgroup-view .content					{ flex-grow: 1; height: 60vh; overflow-y: auto;}
.workgroup-view .workgroup-avatar 			{ width: 72px; height: 72px; margin-right: 20px; background-color: #fff; border-radius: 50%;}
.workgroup-view .workgroup-avatar i 		{ font-size: 24px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--theme-bg-color);}
.workgroup-view .workgroup-info 			{ margin-right: auto;}
.workgroup-view .workgroup-name 			{ font-size: 1.4em;}
.workgroup-view .workgroup-established 		{ margin-top: 5px;}
.workgroup-view .workgroup-count 			{ margin-top: 5px;}
.workgroup-view .workgroup-members 			{ margin-bottom: 20px;}
.workgroup-view .workgroup-members li 		{ border-bottom: 1px solid var(--light-border-color); padding: 15px 45px;}
.workgroup-view .member-icon .icon			{ width: 48px; height: 48px; margin-right: 15px; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,.2); }
.workgroup-view .member-name 				{ font-size: 1.1em; font-weight: 500; line-height: 1.2em; color: var(--theme-text-color);}
.workgroup-view .member-join 				{ color: #888; margin-left: auto;}

/** Permission form **/
.permission-form .permission-option 						{ margin-bottom: 20px;}
.permission-form .permission-option .title 					{ font-weight: 500; font-size: 1.05em; margin-bottom: 5px; color: var(--theme-text-color);}
.permission-form .permission-option .desc 					{ font-size: 1.05em;}
.permission-form .permission-option input[type="radio"] 	{ margin-right: 10px; }

/*
========================
My projects
========================
*/
body.project-theme 							{ background-color: var(--soft-bg-color); }

.profile-header-buttons 					{ position: absolute; right: 25px; top: 0; display: flex; align-items: center;}
.profile-header-buttons .button 			{ height: 30px; line-height: 26px; margin-left: 5px; font-size: .88em; color: var(--mid-text-color); border: 1px solid var(--light-border-color); box-shadow: none; }
.profile-header-buttons .button-sq 			{ width: 30px; height: 30px; line-height: 28px; box-shadow: none; }
.profile-header-buttons .button i  			{ font-size: 14px; color: var(--light-text-color);}
.profile-header-buttons .button:hover i 	{ color: var(--mid-text-color);}

.profile-header-more-button { display: none;}

#project-profile-header .statistics .value 		{ height: 36px; line-height: 36px;}

#generate-excerpt-button					{ position: relative; }
#generate-excerpt-button::after				{ display: none; content: 'AI'; position: absolute; right: 0; top: 0; font-size: 11px; line-height: 14px; padding: 0 .4em; border-radius: 3px; background-color: #c00; color: #fff; transform: translate(40%, -25%); }
#generate-excerpt-dialog  					{ font-size: .95em; }
#generate-excerpt-dialog label 				{ color: var(--theme-text-color); }
#generate-excerpt-dialog input[type="checkbox"] { margin-right: 5px; margin-left: 0; flex-grow: 0; flex-shrink: 0; }

#project-edit-form							{ padding: 5px 15px;}
#project-edit-form legend 					{ color: var(--theme-text-color); font-size: 1.5em; font-weight: 500;}
#project-edit-form .row .label 				{ color: var(--theme-text-color); font-size: 1.05em; font-weight: 500;}
#project-edit-form .error					{ text-align: left;}
#project-edit-form .select2-container		{ width: 99% !important;}
#project-edit-form input[type="text"] 		{ background: #fff;}
.project-edit-dialog .jconfirm-buttons		{ text-align: center; float: none !important; padding-bottom: 5px !important;}

.project-info-tabs 							{ display: flex; }
.project-info-tabs .tab 					{ position: relative; z-index: 1; border-radius: 8px 8px 0 0; border: 1px solid var(--light-border-color); border-bottom: none; padding: .8em 1.2em; font-weight: 500; font-size: 1.05em; letter-spacing: .08em; color: var(--theme-text-color); cursor: pointer; }
.project-info-tabs .tab.active::after 		{ content: ''; position: absolute; left: 0; bottom:-1px; width: 100%; height: 3px; background-color: #fff; }
.project-info-tabs + .box-content 			{ border-top-left-radius: 0; }
.project-info-template 						{ display: none;} 
.project-info-template.active 				{ display: block;} 
.project-info-template .project-info.form	{ margin: 0 15px;}	
.project-page-box .box-header + .project-info-tabs { margin-top: -40px;}

.project-info 								{ margin:0 5%; padding-top: 20px; /* column-count: 2; column-gap: 2%;*/ }
.project-info .row 							{ position: relative; /*break-inside: avoid-column;*/ }
.project-info .row .unit 					{ margin-left:2px; }
.project-info .row .sep 					{ margin: 0 2px;}
.project-info .row .group 					{ margin: 15px 0 10px 17px;}
.project-info .row .group > .row 			{ margin-bottom: 5px; display: flex; flex-wrap: wrap; align-items: flex-start;}
.project-info .row .group .label 			{ min-width: 135px; position: relative; }
.project-info .row .group .label.lg 		{ min-width: 160px; }
.project-info .row .group .label::after		{ content: '|'; font-size: .88em; position: absolute; right: 10px; top: 0; }
.project-info .row .group a 				{ border-bottom: 1px dashed #666; transition: all .2s;}
.project-info .row .group a:hover 			{ color: var(--theme-text-color); border-bottom: 1px dashed var(--theme-border-color);}
.project-info .row .group .label .tooltip 	{ font-size: .9em; margin-left: 3px; border-bottom: none;}
.project-info .label 						{ color: #666; font-weight: 500; line-height: 1.5em; margin-top: 2px; white-space: nowrap;}
.project-info > .row  						{ margin-bottom: 20px;}
.project-info > .row > .label 				{ display: flex; align-items: center; font-size: 1.05em; font-weight: 600; letter-spacing: .1em; color: var(--theme-text-color); cursor: pointer;}
.project-info .value 						{ color: #666; font-size: 1rem; width: calc(100% - 135px); }
.project-info .value .fr-view 				{ font-size: 1rem; line-height: 1.5em;}
.project-info .value + .value 				{ margin-left: 135px;}
.project-info .sep 							{ margin: 0 10px;}
.project-info input + .sep					{ margin-left: 0;}
.project-info .empty .project-edit-summary  { color: var(--light-text-color); margin: 0 2px; cursor: pointer; transition: all .2s;}
.project-info .empty .project-edit-summary:hover { color: var(--theme-text-color);}

.tooltip-field-desc h4,
.tooltip-term-suggestion h4 				{ margin-top: 5px; margin-bottom: 5px; font-size: 1.08em;}
.tooltip-term-suggestion ul 				{ margin-top: 5px; }
.tooltip-term-suggestion li 				{ margin: 5px 0;}

.project-field-tooltip.fr-view				{ padding: 7px 0; font-size: .96rem;}
.project-field-tooltip.fr-view a 	 		{ margin: 0; background-color: transparent;}

.form.project-info 											{ padding-bottom: 20px; column-count: 1; }
.form.project-info .group 									{ flex-grow: 1; margin-left: 40px;}
.form.project-info .group > .row							{ margin-bottom: 10px;}
.form.project-info .group .label 							{ width: 118px; margin-top: 10px;}
.form.project-info .group .label::after						{ display: none;}
.form.project-info .group > .row .buttons 					{ width: 100%; margin: 10px 0 15px 0; margin-left: 138px;}
.form.project-info .group > .row .buttons .btn 				{ margin-right: 15px; color: #999; cursor: pointer; transition: all .2s; }
.form.project-info .group > .row .buttons .btn i  			{ font-size: 12px; margin-right: 2px;}
.form.project-info .group > .row .buttons .btn:hover 		{ color: #666;}
.form.project-info .value 									{ flex-grow: 1; max-width: 710px;}
.form.project-info .value + .value 							{ margin-left: 138px; margin-top: 10px;}
.form.project-info .label  									{ margin-bottom: 0; width: 160px;}
.form.project-info .label::after							{ content: ''; margin: 0 10px;}
.form.project-info input[type="text"],
.form.project-info textarea 								{ margin-right: 10px; background-color: #fff; border: 1px solid #ddd; /*box-shadow: 0 0 2px rgba(0,63,64,.2);*/ }
.form.project-info input[type="text"]:last-child,
.form.project-info textarea:last-child						{ margin-right: 0;}
.form.project-info textarea									{ height: 5em;}
.form.project-info input[readonly] 							{ background-color: #f9f9f9; color: #888;}
.form.project-info .unit 									{ margin-right: 20px; margin-left: 5px;}
.form.project-info .option-label							{ margin-right: 40px;}
.form.project-info .add-custom-column 						{ color: var(--mid-text-color); margin-top: 12px; margin-left: 3px; cursor: pointer;}
.form.project-info .column-btn 								{ color: #ccc; margin-left: 20px; cursor: pointer;}
.form.project-info .column-btn:hover 						{ color: #666;}
.form.project-info .sort-column-btn 						{ cursor: move;}
.form.project-info .column-list								{ margin-left: 135px;}
.form.project-info .column-list .row 						{ margin-bottom: 15px;}
.form.project-info .column-list.single-row .sort-column-btn { display: none;}
.form.project-info .column-list.single-row input[type="text"]:nth-child(2) { margin-right: 0;}

#project-law-suggestion header 								{ position: relative; z-index: 1; padding-top: 30px; height: 80px; background-color: #fff; border-bottom: 1px solid var(--light-border-color);}
#project-law-suggestion .fr-view 							{ padding: 30px 0; font-size: 1rem; line-height: 1.2em; }
#project-law-suggestion .fr-view a 							{ background: none; display: flex; align-items: center; padding: 6px 8px;}
#project-law-suggestion .fr-view a::after					{ display: none;}
#project-law-suggestion .fr-view a::before					{ content: '\e122'; font: var(--fa-font-solid); font-size: 6px; margin-right: 10px; }
#project-law-suggestion .fr-view a:hover 					{ background-color: var(--softer-bg-color);}
#project-law-suggestion .no-content							{ color: var(--lighter-text-color); text-align: center; font-size: 1.33em; letter-spacing: .05em; padding-top: 40vh;}

/** project add member form **/
#project-add-member-form .select2-container	{ width: 99% !important;}
#project-add-member-form p 					{ margin-bottom: 15px;}
#project-add-member-form .error 			{ text-align: left;}
#project-members .select2-results__options--nested li	{ padding-left: 25px;}

.project-quota								{ margin-left: 15px; }

.project-page-box 							{ margin-top: 25px; background-color: #fff; overflow: hidden; }
.project-page-box .profile-header 			{ border-bottom: 1px solid var(--light-border-color); padding: 0 6%; margin-bottom: 0; }
.project-page-box .profile-box 				{ padding: 40px 6%; }
.project-page-box .profile-box .box-header  { padding: 0; margin-bottom: 20px; margin-top: -20px; height: auto; border: none;}
.project-page-box .profile-box .box-header .quota-label { margin-left: 6px; background: none; font-size: 13px; color: var(--mid-text-color);}
.project-page-box .profile-box .box-content { border: 1px solid var(--light-border-color); }

/** project invitation **/
#project-invitation							{ height: 100%; overflow: hidden;}
#project-invitation h2						{ max-width: 520px; margin: auto; margin-bottom: 30px; color: var(--theme-text-color); }
#project-invitation h2 img 					{ width: 115px;}
#project-invitation #container 				{ padding: 0;}
#project-invitation #header-wrapper 		{ box-shadow: none; background: none; border: none; display: none; }
#project-invitation #header-inner			{ text-align: center; display: block; padding: 60px 0;}
#project-invitation #header-inner > h1 		{ margin: auto; display: inline-block;}
#project-invitation #header-wrapper svg,
#project-invitation #header-inner > :not(h1),
#project-invitation #nav-wrapper,
#project-invitation #footer-wrapper,
#project-invitation #bottom-toolbar,
#project-invitation #mobile-bottom-toolbar,
#project-invitation #aside-nav				{ display: none;}
#project-invitation #main-wrapper			{ padding: 0 0 60px 0; min-height: 0;}
#project-invitation .invalid-link a			{ display: inline-block; margin-top: 15px; color: var(--theme-text-color);}
#project-invitation .project-info			{ padding: 50px 4%; }
#project-invitation .project-info p 		{ margin: 20px 0 30px 0;}

/** workgroup project list **/
.workgroup-project-list .name 											{ font-weight: 500; margin-right: 15px;}
.workgroup-project-list .name .workgroup-name 							{ font-weight: 400;}
.workgroup-project-list .name .sep 										{ font-weight: 400; margin: 0 .5em;}
.workgroup-project-list .tags 											{ margin: 5px 0;}
.workgroup-project-list .tag 											{ font-size: .9em; background-color: var(--light-bg-color); color: var(--theme-text-color); margin: 2px 4px 2px 0; padding:.2em .4em; border-radius: 3px; }
.workgroup-project-list .members 										{ width: 20%;}
.workgroup-project-list tr:not(.header) .name 							{ font-size: 1.05em;} 
.workgroup-project-list tr.show-excerpts td 							{ border-bottom: none;}
.workgroup-project-list tr.show-excerpts + .project-excert-row td 		{ border-bottom: 1px solid #ddd !important;}
.workgroup-project-list tr.show-excerpts + .project-excert-row ul,
.workgroup-project-list tr.show-excerpts + .project-excert-row p 		{ height: auto; padding: 0 10px 20px 8px;}
.workgroup-project-list tr.show-excerpts .expand-project-lists-button i { transform: rotate(45deg);}
.workgroup-project-list .project-excert-row td							{ height: 0 !important; padding: 0 !important; border: 1px solid transparent !important; }
.workgroup-project-list .project-excert-row ul,
.workgroup-project-list .project-excert-row p						{ height: 0; overflow: hidden;}
.workgroup-project-list .project-excert-row li 							{ display: block; margin: 7px 0; font-weight: 500; line-height: 1.2em; color: #888;}
.workgroup-project-list .project-excert-row li a:hover 					{ color: var(--theme-text-color);}
.workgroup-project-list .project-excert-row li a::before				{ content: '•'; margin-right: 3px;}

/*
========================
Project chronicles
========================
*/
/* container */
#project-chronicles #visualization 													{ opacity: 0; transition: opacity 2s; min-height: 400px; }
#project-chronicles #visualization.loaded 											{ opacity: 1;}
#project-chronicles #visualization-loading											{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 36px; opacity: .2; }
#project-chronicles .project-page-box .profile-box .box-content                     { padding: 0; overflow: hidden; }
#project-chronicles .vis-timeline                                                   { border-radius: 15px; border-top:none; border-left:none; border-right:none; }
#project-chronicles .vis-timeline.vis-active										{ box-shadow: inset 2px 2px 4px rgba(0,63,64,.08);}


/* timeline */
#project-chronicles .vis-time-axis .vis-text                                        { color: var(--theme-text-color); padding: 5px 3px;  } 

/* label */
#project-chronicles .vis-labelset .vis-label .vis-inner                             { color: var(--theme-text-color); padding: 10px 5px; }
#project-chronicles .vis-ltr .vis-label .vis-inner                                  { font-size: 13px; padding: 10px 5px 10px 15px; }
#project-chronicles .vis-ltr .vis-label.vis-nesting-group .vis-inner                { padding-left: 5px; }
#project-chronicles .vis-label.vis-nested-group.vis-group-level-unknown-but-gte1    { background-color: var(--soft-bg-color); }
#project-chronicles .vis-label.vis-nesting-group.expanded:before                    { content: '\f078'; font: var(--fa-font-regular); font-size: 12px; margin-left: 10px; transform: scale(.8, .8); }
#project-chronicles .vis-label.vis-nesting-group.collapsed:before                   { content: '\f054'; font: var(--fa-font-regular); font-size: 12px; margin-left: 10px; transform: scale(.8, .8); }

/* item */
#project-chronicles .vis-item                                                       { font-size: 13px;  color: var(--theme-text-color); }
#project-chronicles .vis-item.vis-dot 												{ border-color:var(--light-border-color); }
#project-chronicles .vis-item.vis-range 											{ border-color:var(--light-border-color); background-color: var(--soft-bg-color);} 
/*#project-chronicles .vis-item.vis-selected                                          { border-color:var(--theme-border-color); background-color: var(--theme-bg-color); color: #fff; }*/
#project-chronicles .vis-item.vis-point.vis-selected                                { background: var(--soft-bg-color); color: var(--theme-text-color);}
#project-chronicles .vis-item .vis-delete-rtl:after, #project-chronicles .vis-item .vis-delete:after    { color: var(--light-text-color); font-size: 24px; }
#project-chronicles .vis-item .vis-delete-rtl:hover, #project-chronicles .vis-item .vis-delete:hover    { background: var(--light-text-color); }
#project-chronicles .vis-item .vis-item-content                                     { line-height: 1.2em; }
#project-chronicles .vis-item .vis-item-content span,
#project-chronicles .vis-item.vis-range .vis-item-content span                      { display: block; }
#project-chronicles .vis-item .vis-item-overflow 									{ overflow: visible; }
#project-chronicles .vis-item.actual-time 											{ pointer-events: none; background-color: transparent; border-style: dashed!important; z-index: 0; }

/* line color */
#project-chronicles .vis-group-level-unknown-but-gte1                               { border: none; }
#project-chronicles .vis-current-time                                               { background-color: var(--theme-border-color); }

/* form */
#chronicles-event-form hr.last 														{ margin-bottom: 12px;}
#chronicles-event-form #delete-event-button                     					{ color: #aaa; }
#chronicles-event-form #delete-event-button:hover               					{ color: var(--theme-text-color); }

/* buttons */
#timeline-today-button 																{ margin-left: auto;}
#timeline-fit-button 																{ margin-right: 0;}

/*
========================
My issues
========================
*/
.my-issue-list li > div 				{ padding: 1em 1em; color: #444;}
.my-issue-list li > div.no 				{ width: 40px; padding-right: .5em;}
.my-issue-list li:not(.header) > div.no { font-size: 1.1em; letter-spacing: .05em; color: var(--light-text-color);}
.my-issue-list li a:hover 				{ color: var(--theme-text-color);}
.my-issue-list .category .label 		{ padding: .2em .5em; border-radius: 4px; display: inline-block;}

.issue-content							{ margin: 20px 0;}
.issue-content .label 					{ margin-bottom: 10px; font-size: 1.1em;}
.issue-content .fr-view 				{ margin-top: 15px; color: #888;}

.reply-list								{ flex-direction: column; align-items:flex-end; margin-top: 25px;  }
.reply-list .comment-box				{ background-color: #f2f2f2; padding: 20px; border: none; border-radius: 4px; margin: 10px 0; }
.reply-list .comment-box:first-child	{ border-top: none;}

/*
========================
Page
========================
*/

.page-wrapper .main-content-wrapper .main-content 					{ padding: 80px 0;}

.page-wrapper .page-menu 											{ margin-bottom: 30px; justify-content: center;}
.page-wrapper .page-menu li 										{ margin: 5px 10px; min-width: 250px;}
.page-wrapper .page-menu li a 										{ display: inline-block; width: 100%; padding: 1em 2em; font-size: 1.1em; text-align: center; color: var(--light-text-color); border: 1px solid var(--light-border-color); border-radius: 30px; transition: all .3s;}
.page-wrapper .page-menu li a i 									{ margin-right: .4em;}
.page-wrapper .page-menu li:hover a 								{ color: var(--theme-text-color); border: 1px solid var(--theme-border-color);}
.page-wrapper .page-menu li.active a								{ color: #fff; background: var(--theme-bg-color); border: 1px solid var(--theme-border-color);}
.page-wrapper .page-content 										{ padding: 40px 4%;}

.page-wrapper .page-header 											{ margin-top: 10px; margin-bottom: 40px;}
.page-wrapper .page-header h1										{ font-size: 1.8em; letter-spacing: .04em;}
.page-wrapper .page-header .subtitle 								{ margin-top: 15px; color: var(--light-text-color); font-size: 1.1em; line-height: 1.33em;}
.page-wrapper .page-expandable .expandable-title 					{ padding: 15px 3px; cursor: pointer; }
.page-wrapper .page-expandable .expandable-title .text 				{ color: #444; font-size: 1.25em; font-weight: 500; flex-grow: 1; }
.page-wrapper .page-expandable .expandable-title .text:hover,
.page-wrapper .page-expandable .expandable.show .expandable-title .text 		{ color: var(--theme-text-color); }
.page-wrapper .page-expandable .expandable-title .text i 			{ margin-right: 10px;}
.page-wrapper .page-expandable .expandable-title .expandable-handle i { font-size: 1.2em; color: var(--theme-text-color);}
.page-wrapper .page-expandable .expandable.show .expandable-title .expandable-handle i { transform: translate(-50%, -50%) rotate(45deg); }
.page-wrapper .page-expandable .expandable-body						{ padding: 0 5px 20px 5px;}
.page-wrapper .page-expandable .expandable-body	.text				{ display: flex; align-items: flex-start; } 
.page-wrapper .page-expandable .expandable-body .fr-view .paragraph-column2:first-child	{ margin-top: 0;}

.page-wrapper .page-list li											{ border-top: 1px solid var(--light-border-color);}
.page-wrapper .page-list li:last-child								{ border-bottom: 1px solid var(--light-border-color);}
.page-wrapper .page-list li a 										{ padding: 1em .4em; font-size: 1.15em; color: var(--theme-text-color);}
.page-wrapper .page-list li .date 									{ color: #888; font-size: .9em;}

#page-news-article-detail .main-content-wrapper .main-content .content-default  { max-width: 1040px; }
#page-article .breadcrumbs											{ margin-bottom: 30px;}
#page-article .page-article 										{ margin-top: 40px;}
#page-article .page-article h1 										{ margin-bottom: 1em; font-size: 1.7em;}
#page-article .article-header										{ padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--light-border-color);}
#page-article .article-header h1									{ margin-bottom: 0;}

/** Faq **/
.page-search-form													{ background-color: #fff; max-width: 760px; margin: 50px auto; border-radius: 30px; padding: 7px 20px;}
.page-search-form input 											{ border: none !important; background: none !important; margin: 0 10px 0 0; font-size: 1.2em;}
.page-search-form input::placeholder 								{ color: var(--light-text-color); }
.page-search-form button 											{ width: 40px; height: 40px; line-height: 34px; font-size: 1.2em; text-align: center;  border-radius: 50%; border: none; flex-shrink: 0; flex-grow: 0; background-color: var(--theme-bg-color); color: #fff;}
.page-search-form .clear 											{ color: #ddd; font-size: 21px; margin-right: 15px; cursor: pointer; transition: all .2s; }
.page-search-form .clear:hover 										{ color: var(--light-bg-color); }

#faq .page-wrapper .page-content 									{ padding: 20px 4%;}
#faq .page-wrapper .page-expandable .expandable-title .text::before,
#faq .page-wrapper .page-expandable .expandable-body  .text::before	{ display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; font-weight: normal; border-radius: 50%; margin-right: 2%; flex-shrink: 0; flex-grow: 0;}
#faq .page-wrapper .page-expandable .expandable-title .text::before	{ content: 'Q'; background-color: var(--theme-bg-color); color: #fff; }
#faq .page-wrapper .page-expandable .expandable-body  .text::before	{ content: 'A'; background-color: var(--light-bg-color); color: #fff; }

/** Page:News **/
.date-mark															{ width: 84px; height: 84px; padding: 10px; flex-shrink: 0; flex-grow: 0; text-align: center; display: flex; flex-direction: column; justify-content: space-between; align-items: center; color: var(--theme-text-color); border: 1px solid var(--soft-border-color); border-radius: 10px;}
.date-mark .day 													{ font-size: 2.6em; font-weight: 500; display: block; margin: auto; }
.date-mark .month-year 												{ font-weight: 500; letter-spacing: -.05em; margin: auto; }

.prev-next-link 													{ margin: 30px 0; color: var(--theme-text-color); font-size: 1.15em;}
.prev-next-link .prev i 											{ margin-right: 8px;}
.prev-next-link .next i 											{ margin-left: 8px;}

#news-list 															{ border-top: 1px solid var(--soft-border-color);}
#news-list > li 													{ border-bottom: 1px solid var(--soft-border-color); transition: all .4s; }
#news-list > li > a 												{ padding: 50px 0 50px 30px;  position: relative;}
#news-list > li > a::before											{ content: ''; position: absolute; left: 150px; top: 40px; bottom:40px; border-left: 1px solid var(--soft-border-color); }
#news-list .content 												{ margin-left: 80px; flex-grow: 1; font-size: 14px; color: #555; }
#news-list .content h3 												{ font-size: 1.4em; margin-bottom: .8em; }
#news-list .content .summary										{ line-height: 1.4em;}
#news-list .arrow													{ width: 48px; height: 48px; flex-shrink: 0; flex-grow: 0; margin-left: 40px; text-align: center; border-radius: 50%; border: none; position: relative;}
#news-list .arrow i 												{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.6em;}
#news-list > li:hover  												{ border-bottom: 1px solid var(--mid-border-color); }
#news-list > li:hover .arrow 										{ background-color: var(--theme-bg-color); }
#news-list > li:hover .arrow i 										{ color: #fff;}

#news-grid .col-item 												{ border: 1px solid var(--soft-border-color); }
#news-grid > li > a 												{ padding: 40px 20px; position: relative; flex-grow: 1;}
#news-grid > li > a::before											{ content: ''; position: absolute; left: 125px; top: 40px; bottom:40px; border-left: 1px solid var(--soft-border-color); }
#news-grid .content 												{ margin-left: 50px; flex-grow: 1; font-size: 14px; color: #555; }
#news-grid .content h3 												{ font-size: 1.3em; line-height: 1.33em; margin-bottom: .8em; }

#news-article 														{ }
#news-article > li 													{ padding: 30px; margin-bottom: 40px; border: 1px solid var(--light-border-color);  }
#news-article > li > a 												{ align-items:stretch; }
#news-article .image 												{ width: 33%; margin-right: 40px; flex-shrink: 0;}
#news-article .text 												{ flex-grow: 1;}
#news-article .content 												{ flex-grow: 1; margin: 20px 0;}
#news-article .content h3 											{ margin-bottom: 15px;}
#news-article .content .summary 									{ max-width: 600px; text-align: justify;}
#news-article .button-wrapper 										{ margin-top: auto; }
#news-article .button 												{ border-radius: 10px; padding-left: 20px; }
#news-article .button i 											{ margin-left: 10px;}

#news-detail .article-header 										{ padding-bottom: 25px; margin-bottom: 20px; border-bottom: 1px solid var(--soft-border-color);}
#news-detail .article-header .date-mark 							{ margin-bottom: 25px;}

#news-grid-detail .header 											{ color: var(--theme-text-color); font-size: 1.3em; font-weight: 500; margin-bottom: .8em;}
#news-grid-detail .body 											{ border: 1px solid var(--soft-border-color); padding: 40px 10%; position: relative; max-height: 65vh; overflow-y: auto; }
#news-grid-detail .body::before										{ content: ''; position: absolute; left: calc(10% + 115px); top: 40px; bottom:40px; border-left: 1px solid var(--soft-border-color); }
#news-grid-detail .content 											{ margin-left: 60px; flex-grow: 1; }
#news-grid-detail .content h3 										{ font-size: 1.3em; line-height: 1.3em; margin-bottom: .8em;}

#page-news-article-detail .main-content-wrapper .main-content .content-default	{ max-width: 1250px;}
#page-news-article-detail #news-detail								{ padding: 4% 8.4%;}
#page-news-article-detail #news-detail .article-header				{ margin-bottom:5%; }

/** About us **/
#page-about .main-content-wrapper .main-content 					{ padding: 0;}
#page-about #main-inner 											{ margin: 0; max-width: none; width: 100%;}
#page-about #footer-wrapper 										{ margin-top: 0; background-image: url(../image/about/bg.jpg); background-image: image-set("../image/about/bg.webp", "../image/about/bg.jpg"); background-repeat: repeat; }
#page-about .about-section > .inner									{ max-width: 1440px; margin: 0 auto; padding: 60px 0;}
#page-about h2 														{ font-size: 2.4em; font-weight: 400; line-height: 1.25em; margin-bottom: .4em; }
#page-about .sub-title 												{ font-size: 1.7em; font-weight: 400; line-height: 1.25em; margin-bottom: .8em; color: #A2B7B8; }
#page-about .fr-view 												{ font-size: 1.2em;}

#page-about #about-section-1 										{ background-image: url(../image/about/bg.jpg); background-image: image-set("../image/about/bg.webp", "../image/about/bg.jpg"); background-repeat: repeat; overflow: hidden;}
#page-about #about-section-1 .inner 								{ padding-top: 80px; padding-bottom: 0;}
#page-about #about-section-1 .column-2								{ justify-content: space-between; background-image: url(../image/about/bg-text.png); background-image: image-set("../image/about/bg-text.webp", "../image/about/bg-text.png"); background-repeat: no-repeat; background-position: left bottom; background-size: 28%;}
#page-about #about-section-1 .col-item:nth-child(1)					{ width: 39%; margin: 0;}
#page-about #about-section-1 .col-item:nth-child(2)					{ width: 55%; margin: 0; position: relative;}
#page-about #about-section-1 .col-item .text 						{ margin-bottom: 80px;}
#page-about #about-section-1 img 									{ display:block; margin: auto;}
#page-about #about-section-1 #curve-text 							{ position: absolute; left: 0; top: 0; width: 100%; transform-origin: 45% 67%; transform: rotate(0deg); } 

#page-about .bg-bubble												{ background-image: url(../image/about/bg-bubble.jpg); background-image: image-set("../image/about/bg-bubble.webp", "../image/about/bg-bubble.jpg"); background-repeat: no-repeat; background-position: 50% top; background-size: 100%;}
#page-about #about-section-2 .text 									{ max-width: 820px; margin: auto;}
#page-about #about-section-2 .fr-view 								{ margin: 30px 0;}
#about-slogan														{ height: 90px; background-image: url(../image/about/slogan-text.svg); background-repeat: repeat-x; background-position: 0 50%; }

#page-about #about-section-3 .column-2 								{ justify-content: space-between; flex-direction: row-reverse;}
#page-about #about-section-3 .col-item:nth-child(1)					{ width: 38%; margin: 0;}
#page-about #about-section-3 .col-item:nth-child(2)					{ width: 54%; margin: 0;}

#page-about #about-section-4										{ background-image: url(../image/about/bg.jpg); background-image: image-set("../image/about/bg.webp", "../image/about/bg.jpg"); background-repeat: repeat; position: relative;}
#page-about #about-section-4::before								{ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 25%; background: #fff;}
#page-about #about-section-4::after									{ content: ''; position: absolute; left: 0; right: 0; bottom: -75px; height: 75%; background-image: url(../image/about/bg-bubble-01.png); background-image: image-set("../image/about/bg-bubble-01.webp", "../image/about/bg-bubble-01.png"); background-repeat: no-repeat; background-position: left bottom; mix-blend-mode:darken; pointer-events: none;   }
#page-about #about-section-4 .inner 								{ padding: 0 0 50px 0;}
#page-about #about-section-4 .box-round-lg 							{ position: relative; z-index: 1; background: #fff; padding: 40px 6% 0 6%;}
#page-about #about-section-4 p 										{ font-size: 1.2em; line-height: 1.25em; }
#page-about #about-section-4 h2 									{ margin: 10px 0 40px 0;}
#page-about #about-section-4 img 									{ display:block; margin: auto;}



/*
---------------------------------------------------------
05. /var/www/archidb/public/css/app.rwd.css
---------------------------------------------------------
*/


/*
-----------------------------
For 1680px or less
-----------------------------
*/
@media screen and (max-width: 1680px) {

	/** Header **/
	#header-nav	li							{ margin-left: 44px;}
	#header-nav li.sep 						{ margin-left: 20px;}
	#header-nav li.sep::before				{ margin-right: 16px; }
}

/*
-----------------------------
For 1600px or less
-----------------------------
*/
@media screen and (max-width: 1600px) {

	.column-5 .col-item			 			{ width:23.5%; margin-right:2%; margin-top:2%; }
	.column-5 .col-item:nth-child(5n) 		{ margin-right:2%; }
	.column-5 .col-item:nth-child(-n+5) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(4n)   	{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+4) 	{ margin-top:0; }

	/** Header **/
	#header-nav								{ margin-right: 40px;}
	#header-nav	li							{ margin-left: 36px;}
	#search-bar								{ max-width: 450px; margin-left: 20px;}

	/** Database index **/
	.filter-set li									{ width: 16.666%;}

	/** Toolbox **/
	#toolbox.has-lead-content.show-second-content 	{ min-width: 1200px;}

}


/*
-----------------------------
For 1440px or less
-----------------------------
*/
@media screen and (max-width: 1440px) { 

	/** Header **/
	h1 											{ font-size: 1.8em; }
	h2 											{ font-size: 1.4em; }
	h3 											{ font-size: 1.25em; }
	h4 											{ font-size: 1.15em; }

	/** Article **/
	article h1									{ font-size: 1.4em; }
	article h2									{ font-size: 1.25em; }

	/** Header **/
	#header-nav i 								{ display: none;}

	/** Nav **/
	#menu-button								{ width: 24px; left: 3.2%;}	
	.show-nav #menu-button span:nth-child(1) 	{ transform: rotate(38deg); }
	.show-nav #menu-button span:nth-child(3) 	{ transform: rotate(-38deg); }
	
	/** Term **/
	#article-toolbar #breadcrumb-wrapper			{ display: none;}

	/** Page **/
	#page-read .main-content-wrapper .main-content	{ padding: 40px 0;}

	/** Toolbox **/
	#toolbox.has-lead-content.show-second-content 	{ min-width: 85vw;}
	#toolbox.show-second-content					{ min-width: 85vw; }
	#toolbox.show-second-content.resized 			{ min-width: 75vw; }

	/** Database main page **/
	.carousel-menu .swiper-slide					{ width: 23.5%; }

	/** About us **/
	#page-about h2 								{ font-size: 2.4em; }
	#page-about .sub-title 						{ font-size: 1.7em; }
	#page-about .fr-view 							{ font-size: 1.1em;}

	#page-about #about-section-4 .inner 			{ padding: 0 0 40px 0;}
	#page-about #about-section-4 p 				{ font-size: 1.1em; }
	
}


/*
-----------------------------
For 1280px or less
-----------------------------
*/
@media screen and (max-width: 1280px) { 
	
	/** Column layout **/
	.column-5 .col-item			 				{ width:32%; margin-right:2%; margin-top:2%; }
	.column-5 .col-item:nth-child(5n) 			{ margin-right:2%; }
	.column-5 .col-item:nth-child(-n+5) 		{ margin-top:2%; }
	.column-5 .col-item:nth-child(4n)   		{ margin-right:2%; }
	.column-5 .col-item:nth-child(-n+4) 		{ margin-top:2%; }
	.column-5 .col-item:nth-child(3n)   		{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+3) 		{ margin-top:0; }
	
	
	/** Header **/
	#header-nav									{ display: none;}
	
	/** Footer **/
	#footer-inner .social-links 				{ margin-left: 8px;}
	#footer-inner .social-links li				{ margin-left: 12px; }
	.footer-links li 							{ margin-left: 30px;}

	/** Database index **/
	.filter-set li								{ width: 20%;}

	/** Term **/
	.more-content-button						{ display: block; border: none; box-shadow: none; }
	.more-content-button i 						{ color: var(--light-text-color);}

	/** Chanpter menu **/
	.chapter-menu-set							{ padding: 5px 25px; width: 270px; }


	/** Popup window **/
	#popup-window								{ width: 100% !important; left: auto !important; height: var(--doc-height); }
	#popup-window #popup-handle,
	#popup-window #popup-resizer				{ display: none !important;}
	#popup-view									{ margin-right: 42px;}
	#popup-view i								{ font-size: 12px;}

	/** User profile **/
	#user-profile .main-content-wrapper .main-content	{ padding: 40px 0;}

	/** Workgroup **/ 
	.user-profile-body.column-2 				{ display: block;}
	.user-profile-body.column-2 .col-item 		{ width: 100%; margin: 15px 0;}
	.user-profile-body.column-2 .col-item:last-child { margin-bottom: 0;}

	/** Project **/ 
	.workgroup-project-list .time 				{ display: none;}

	/** Page **/
	.page-wrapper .page-menu li					{ min-width: 200px; margin: 5px;}
	.page-wrapper .page-menu a					{ padding: .9em 1.4em;}

	
	/** Page:News **/
	#news-grid.column-3 .col-item 					    { width:49%; margin-right:2%; margin-top:2%; }
	#news-grid.column-3 .col-item:nth-child(3n) 		{ margin-right:2%; }
	#news-grid.column-3 .col-item:nth-child(-n+3) 		{ margin-top:2%; }
	#news-grid.column-3 .col-item:nth-child(2n)	   	 	{ margin-right:0; }
	#news-grid.column-3 .col-item:nth-child(-n+2)	   	{ margin-top:0; }

	/** About us **/
	#page-about .about-section > .inner				{ padding: 40px 0;}
	#page-about #about-section-1 .inner				{ padding-top: 60px;}
	#page-about #about-section-2 .inner				{ padding-bottom: 15px;}
	#page-about #about-section-2 .fr-view				{ margin: 20px 0;}
	#page-about #about-section-3 .inner				{ padding-top: 15px;}
}

/*
-----------------------------
For 1025px or more
-----------------------------
*/
@media screen and (min-width: 1025px) {

	#database-term.is-login:not(.popup, .excerpt-mode) #main-wrapper .law-table tr[data-row-id]:hover td 					{ background-color: #f9f9f9;}
	#database-term.is-login:not(.popup, .excerpt-mode) #main-wrapper .law-table tr[data-row-id]:hover td:first-child			{ border-radius: 5px 0 0 5px;}
	#database-term.is-login:not(.popup, .excerpt-mode) #main-wrapper .law-table tr[data-row-id]:hover td:last-child			{ border-radius: 0 5px 5px 0;}
	#database-term.is-login:not(.popup, .excerpt-mode) #main-wrapper .section-content:hover 									{ background-color: #f9f9f9; border-radius: 5px; }
	
	#database-term.is-login:not(.popup, .excerpt-mode) #main-wrapper .law-table tr[data-row-id]:hover .image-caption.has-overflow::after,
	#database-term.is-login:not(.popup, .excerpt-mode) #main-wrapper .section-content:hover .image-caption.has-overflow::after 			{ background: linear-gradient(180deg, rgba(249,249,249,0) 0%, rgba(249,249,249,1) 100%);  }

}

/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) {

	.mobile-element 							{ display: inherit;}
	.mobile-hidden								{ display: none;}

	/** Article **/
	article h1									{ font-size: 1.33em;}
	article h2									{ margin-bottom: 15px;}

	/** Column layout **/
	.column-4 .col-item                 	 	{ width:32%; margin-right:2%; margin-top:2%; }
	.column-4 .col-item:nth-child(4n)   	 	{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+4) 	    { margin-top:2%; }
	.column-4 .col-item:nth-child(3n)   	    { margin-right:0; }
	.column-4 .col-item:nth-child(-n+3) 	    { margin-top:0; }

	/** Button **/
	.button-soft								{ box-shadow: none;}
	.button										{ height: 36px; line-height: 34px; }	
	.button-lg									{ height: 44px; line-height: 42px; font-size: 1.2em; }	
	.button-sq									{ width: 36px; padding: 0; line-height: 36px;}	

	/** Pagination **/
	.pagination 								{ margin: 20px 0 5px 0;}
	.pagination .page-item 						{ display: none;}
	.pagination .pager							{ display: flex; align-items: center; margin: 0 20px; color: var(--theme-text-color); font-size: .96em; font-weight: 500; }
	.pagination .pager .seperator 				{ margin: 0 10px; width: auto; height: auto;}

	/** fr-view **/
	.fr-view table:not(.law-table) td			{ padding: 8px; }
	.fr-view hr									{ margin: 20px 0;}

	/** Page Header **/
	.page-header 								{ margin-bottom: 20px;}

	/** Style box **/
	.box-group									{ padding: 30px 4%; margin-top: 15px; }

	/** Structure **/
	#container									{ padding-top: 50px;}
	.inner										{ width: 92%; margin:auto; }

	/** Header **/
	#header-inner								{ padding-left: 42px; height: 50px; }
	#header-inner h1							{ margin: 0 auto;}
	#search-button 								{ font-size: 1.2em; opacity:.86; }
	#header-icons								{ margin-right: 15px;}
	#header-icons i								{ font-size: 1.3em;}

	#search-bar									{ position: absolute; left: 0; top: 48px; width: 100%; max-width: none; height: 48px; margin: 0; border-bottom: 1px solid var(--light-border-color); visibility: hidden; opacity: 0; transition:opacity .4s, visibility 0s .4s;}
	#search-bar .input-wrapper					{ border: none;}
	#search-bar input[type="text"]				{ height: 46px; color: #666; background-color: #fff; border-radius: 0;}
	#search-bar input[type="text"]::placeholder { color: #ccc; }
	#search-bar .button										{ height: 48px; background-color: #bfcfcf; color: #fff; }
	.show-search-bar #search-bar 							{ visibility: visible; opacity: 1; transition:opacity .4s, visibility 0s;}
	.headroom--unpinned:not(.show-search-bar) #search-bar	{ visibility: hidden; opacity: 0; transition:opacity .4s, visibility 0s; }
	#suggestion-container .ui-menu							{ width: 100% !important;}

	#header-corner-lt,
	#header-corner-rt 							{ display: none;}

	/** Nav **/
	#nav-inner .nav-links li					{ margin: 2em 0; font-size: 1.15em; }
	#nav-inner .nav-links li i					{ margin-right: .6em;}
	#nav-inner .social-links					{ margin: 0 12% 12% 12%;} 
	#menu-button								{ display: block; margin-left: 0; left: 4%; top: 17px; width: 21px; }
	#menu-button span:nth-child(2)				{ top: 6px;}
	#menu-button span:nth-child(3)				{ top: 13px;}
	.show-nav #menu-button span:nth-child(1) 	{ transform: rotate(45deg); }
	.show-nav #menu-button span:nth-child(3) 	{ transform: rotate(-45deg); }
	#mobile-dashboard-button					{ position: absolute; right: 20px; top: 20px; font-size: 1.05em;}

	/** Main **/
	.main-content-wrapper .main-content						{ padding: 20px 0;}
	.main-content-wrapper .main-content .content-default > h2,
	.main-content-wrapper .main-content .content-tiny > h2,
	.main-content-wrapper .main-content .content-small > h2,
	.main-content-wrapper .main-content .content-large > h2,
	.main-content-wrapper .main-content form > h2 			{ margin-bottom: 20px; }
	.main-content-wrapper .main-content .content-tiny    	{ padding:20px 0; }
	
	/** Footer **/
	#footer-wrapper								{ margin: 0; padding: 0;}
	#footer-inner 								{ padding: 20px 0; flex-direction: column;}
	#footer-inner .footer-links					{ width: 100%; margin-bottom: 15px; flex-wrap: wrap; justify-content: space-around; }
	#footer-inner .footer-links li				{ margin: 5px 10px;}
	#footer-copyright							{ text-align: center;}

	/** Bottom advertisment **/
	#ad-popup												{ right: 20px; bottom:70px;  }
	#ad-popup-content 										{ padding:36px 15px 20px 15px; }
	#ad-popup-content .fr-view 								{ font-size: 1.05em; }
	#ad-popup-close  										{ right: 10px;}


	/** Bottom toolbar **/
	body.is-login #footer-wrapper,
	#bottom-toolbar											{ display: none; }
	body.is-login .main-content-wrapper						{ padding-bottom: 50px;}
	#mobile-bottom-toolbar									{ position: fixed; left: 0; right: 0; bottom:0; background-color: var(--theme-bg-color);  }
	
	.headroom #mobile-bottom-toolbar						{ will-change: transform;	transition: transform 400ms;}
	.headroom--pinned #mobile-bottom-toolbar   				{ transform: translateY(0%); z-index: 1;}
	.headroom--unpinned #mobile-bottom-toolbar				{ transform: translateY(100%);}


	/** Toolbox **/
	body.show-toolbox										{ overflow: hidden;}
	body.show-toolbox #toolbox 								{ transform: translateY(0); transition: transform .2s, visibility 0s}
	
	#toolbox 												{ left: 0 !important; top: auto !important; right: 0; bottom:0; width: 100% !important; height: var(--doc-height); min-width: 0; min-height: 0; border-radius: 0; flex-direction: column-reverse; transform: translateY(100%); transform-origin: 0 0; transition: transform .2s, visibility 0s .2s; }
	#toolbox .ui-resizable-nw::after						{ display: none;}
	#toolbox-menu											{ width: 100%; height: auto; border: none; }
	#toolbox-menu ul 										{ display: flex; justify-content: space-around; width: 100%; padding-top: 0;}
	#toolbox-menu li 										{ width: 100%; border-right: 1px solid rgba(255,255,255,.2);}
	#toolbox-menu li:last-child								{ border-right: none;}
	#toolbox-menu li i										{ font-size: 14px; margin: 0 8px 0 0;}
	#toolbox-menu .toolbox-menu-button						{ width: 100%; height: 50px; margin: 0; flex-direction: row; align-items: center; color:#fff !important; opacity: .8 !important;  }
	#toolbox-body											{ min-width: 320px; height: calc(var(--doc-height) - 68px);}
	#toolbox-header											{ height: 50px;}
	#toolbox .toolbox-search.show .toolbox-search-form		{ height: 50px;}

	#toolbox-content												{ transition: transform .4s;}
	#toolbox.show-second-content #toolbox-content					{ width: 200%; transform: translateX(-50%);}
	#toolbox.show-second-content #toolbox-content .first-content	{ flex: 1; }	
	#toolbox.show-second-content #toolbox-content .second-content	{ flex: 1; }	
	#toolbox.show-second-content #toolbox-back						{ display: block; margin-right: 20px;}
	#toolbox.show-second-content #toolbox-search 					{ display: none;}

	#toolbox.has-lead-content											{ min-width: 0;}
	#toolbox.has-lead-content #toolbox-search,
	#toolbox.has-lead-content #toolbox-sort								{ display: none;}
	#toolbox.has-lead-content #toolbox-content 							{ width: 200vw; }
	#toolbox.has-lead-content #toolbox-content .lead-content,
	#toolbox.has-lead-content #toolbox-content .first-content,
	#toolbox.has-lead-content #toolbox-content .second-content			{ width: auto; flex: 1; }
	#toolbox.has-lead-content.offset-lead-content #toolbox-search,
	#toolbox.has-lead-content.offset-lead-content #toolbox-sort			{ display: block;}
	#toolbox.has-lead-content.offset-lead-content #toolbox-content 		{ transform: translateX(-50%); }  
	#toolbox.has-lead-content.offset-lead-content .lead-content 		{ padding-left: 0; padding-right: 0; }
	#toolbox.has-lead-content.offset-lead-content #toolbox-back  		{ display: block; margin-right: 20px;}
	#toolbox.has-lead-content.show-second-content  						{ min-width: 0; }  
	#toolbox.has-lead-content.show-second-content #toolbox-search		{ display: none;}
	#toolbox.has-lead-content.has-second-content  #toolbox-content 		{ width: 300vw; }
	#toolbox.has-lead-content.has-second-content.offset-lead-content #toolbox-content { transform: translateX(-33.33%); }  
	#toolbox.has-lead-content.has-second-content.show-second-content #toolbox-content { transform: translateX(-66.66%); }  

	#excerpt-content .tips,
	#excerpt-content #excerpt-note,
	#excerpt-content #excerpt-content-holder			{ margin-right: 0;}
	#excerpt-content .aside-buttons 					{ position: static; width:100%; height: 48px; display: flex; border-top: 1px solid var(--light-text-color); border-bottom: 1px solid var(--light-text-color); }
	#excerpt-content .aside-buttons-set					{ flex-grow: .86; padding-left: 0; padding-right: 0; flex-direction: row; justify-content: space-between; box-shadow: none; border-radius: 0; border: none; }
	#excerpt-content .aside-buttons-set.dark			{ flex-grow: .14; margin: 0; background-color: #fff;}
	#excerpt-content.has-content .aside-buttons-set		{ flex-grow: .75;  }
	#excerpt-content.has-content .aside-buttons-set.dark{ flex-grow: .25; }
	#excerpt-content .aside-buttons-set.dark .btn 		{ background-color: #fff; color: var(--lighter-text-color); }
	#excerpt-content .aside-buttons-set.dark .btn:hover,
	#excerpt-content .aside-buttons-set.dark .btn.active { background-color: var(--light-bg-color); color: var(--theme-text-color); }
	#excerpt-content .aside-buttons-set.dark .btn:not(:first-child)::before { display: none;}
	#excerpt-content .aside-buttons .btn				{ margin: 0 auto !important;}
	#excerpts-form										{ padding: 0;}
	#excerpts-form legend								{ font-size: 1.25em; margin-bottom: 1em;}

	#excerpt-search-wrapper 															{ padding-top: 75px; }
	#excerpt-search-form																{ height: 78px; padding-right: 40px; }
	#excerpt-search-form #database-selector-wrapper 									{ width: 120px; }

	/** Profile header **/
	.profile-header										{ margin: 20px 0; padding:30px 4% 0 4%;}
	.profile-header.no-nav 								{ padding-bottom: 30px;}
	.profile-header	.avatar 							{ width: 90px; height: 90px; margin-right: 20px; }
	.profile-header .statistics							{ margin-top: 20px; }
	.profile-header .nav 								{ margin: 20px 0 0 20px; }

	/** Homepage **/
	.main-category										{ margin: 10px;}
	.book-list-header .menu-filter-button				{ margin-right: 15px;}
	.book-list > li > .book-list-title					{ font-size: 1.06em; letter-spacing: .02em; }
	.book-list > li > .book-list-content > ul 			{ padding: 10px 0 25px 7px;  }
	.book-list-content ul								{ padding: 20px 0 5px 23px; }
	.book-list-content li 								{ margin: 18px 0; }
	.book-list-content li .text 						{ font-size: 1em; }

	/** Database index **/
	#database-index .main-content-wrapper .main-content { padding-top: 30px;}
	.carousel-menu										{ margin-bottom: 30px;}
	.carousel-menu h2									{ margin-bottom: 15px;}
	.carousel-menu .swiper-slide						{ width: 32%; }

	.block-menu h2										{ margin-bottom: 15px;}
	.terms-menu.vl li .label							{ padding: 1.4em; border-radius: 8px;}
	.terms-menu.vl li .title							{ font-size: 1.1em;}
	.terms-menu.vl li .summary							{ display: none; margin-top: 8px;}
	.terms-menu.vl li .notes							{ margin-top: 8px;}
	.filter-set li										{ width: 25%;}

	.terms-menu											{ margin-bottom: 40px;}
	.terms-menu li .label								{ height: 80px; }
	.terms-menu li.has-icon .icon						{ width: 48px; height: 48px;}
	.terms-menu li.has-icon .label						{ padding: 0 14px;}
	.terms-menu li.has-icon .text						{ padding: 0 1em;}

	.filter-container									{ z-index: 1010; position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; transform: translateX(-100%); transition: transform .4s;}
	.filter-container .filter-box 						{ height: 100% !important; display: block !important; /* To disable slideToggle */ padding:80px 30px 30px 30px; border-radius: 0; overflow-y: auto; }
	.filter-container .close-button 					{ position: fixed; right: 20px; top: 20px;}
	.filter-box .buttons								{ position: fixed; right: 57px; top: 20px; margin: 0;}
	.filter-box .buttons .button						{ margin: 0 2px;}
	.show-menu-filter									{ overflow: hidden;}
	.show-menu-filter .filter-container					{ transform: translateX(0);}

	/** Term **/
	#database-term .main-content-wrapper .main-content,
	#preview .main-content-wrapper .main-content,
	#database-term-revision .main-content-wrapper .main-content 					{ padding-top: 0;}
	#database-term.is-login:not(.popup) .article-box .section-content			{ padding-right: 50px;}

	#quick-search										{ width: 100%; max-width: 200px; }
	#quick-search input									{ height: 36px;}
	#quick-search button								{ height: 36px; width: 34px;}

	#article-toolbar									{ height: 60px; padding: 15px 0 0 0; }
	#article-toolbar .back-button						{ width: 38px; margin-right: 0; padding: 0; }
	#article-toolbar .back-button i 					{ margin-right: 0;}

	.article-box .article-header						{ padding: 0;}
	.article-box .article-header-inner					{ padding: 5px 0 0 0;}
	.article-box .article-header-inner .header-content	{ padding-bottom: 12px;}
	.article-box .article-body							{ padding: 0;}
	.article-box .article-body-inner					{ padding: 0 0 20px 0;}

	.article-box .article-header .meta								{ margin-top: 12px;}
	.article-box .article-header .meta .meta-label 					{ display: none;}
	.article-box .article-header .meta p i 							{ display: none; margin-right: 4px;}
	.article-box .article-header .meta .meta-label + p:not(.hidden)	{ display: inherit;}
	.article-box .article-header .header-content-thumb				{ width: 160px; margin-right: 30px; }

	.article-box .expandable-title							{ padding: 15px 3px; }
		
	#section-law-dialog										{ padding: 0 0 12px 0;}
	#section-law-dialog .term-title							{ font-size: 1.25em; }
	#section-law-dialog .note-title							{ font-size: 1.15em; margin-bottom: 15px; }
	#section-law-dialog .close-button						{ /* margin-left: auto;*/ }

	.mobile-tooltipster										{ position: fixed !important; left: 0 !important; top: auto !important; bottom:0 !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: 48vh; transform: translateY(100%) !important; transition: transform .2s !important;}
	.mobile-tooltipster .tooltipster-box 					{ border-radius: 0 !important; margin-bottom: 0 !important;}
	.mobile-tooltipster .tooltipster-arrow					{ display: none;}
	.mobile-tooltipster .show-popup-button					{ display: none;}
	.mobile-tooltipster.tooltipster-show					{ transform: translateY(0) !important;}
	.mobile-tooltipster .title								{ font-size: 1.15em;} 
	.mobile-tooltipster .tooltipster-content				{ padding: 6px 4% 30px 4%;}

	/** Chanpter menu **/
	.show-chapter-menu #article-toolbar 					{ z-index: 1001; /* For mobile chapter menu to ovelay on header */ }
	#chapter-menu 											{ position: fixed; top: 0; right: 0; padding: 0; border-radius: 0; width: 80%; max-width: 400px; }
	#chapter-menu-body										{ height: 100vh; max-height: none; }
	#chapter-menu-body .close-button						{ position: absolute; right: 20px; top: 14px; font-size: 20px; color: var(--light-text-color);}
	.chapter-menu-group 									{ flex-direction: column;}
	.chapter-menu-set										{ padding:25px 25px 5px 25px; width: 100%; border-left: none; border-top: 1px solid var(--light-border-color); }
	.chapter-menu-set:first-child							{ border-top: none;}

	/** Page **/
	.page-wrapper .page-header								{ margin-bottom: 25px;}
	.page-wrapper .page-header h1							{ margin-bottom: 0; font-size: 1.6em; }
	.page-wrapper .page-menu li a							{ padding: .9em 1.4em; font-size: 1.05em;}
	.page-wrapper .page-content								{ padding: 30px 4%; }
	.page-wrapper .page-expandable .expandable-title 		{ padding: 12px 3px;}
	.page-wrapper .page-expandable .expandable-title .text 	{ font-size: 1.1em;}

	#page-article .page-article								{ margin-top: 0;}
	#page-article .page-article h1							{ font-size: 1.4em; margin-bottom: .8em; }
	#page-article .breadcrumbs								{ margin-bottom: 20px;}

	/** Page:Faq **/
	.page-search-form										{ margin: 30px auto; padding: 3px 10px;}
	.page-search-form input 								{ font-size: 1.1em;}
	.page-search-form button 								{ width: 36px; height: 36px; line-height: 32px; font-size: 1em; }
	.page-search-form .clear 								{ margin-right: 10px; }

	#faq .page-wrapper .page-content						{ padding:0 0 40px 0;}
	#faq .page-wrapper .page-expandable .expandable-title .text::before,
	#faq .page-wrapper .page-expandable .expandable-body  .text::before	{ width: 32px; height: 32px; line-height: 30px; font-size: 12px; }
	
	/** Page:News **/
	.date-mark												{ width: 72px; height: 72px; padding: 8px;  border-radius: 10px;}
	.date-mark .day 										{ font-size: 2.2em; }
	.date-mark .month-year 									{ font-size: .85em;}

	.prev-next-link											{ margin: 20px 0 0 0; font-size: 1.02em;}

	#news-list > li > a										{ padding: 30px 0 30px 15px;}
	#news-list > li > a::before								{ left: 110px; top: 20px; bottom:20px; }
	#news-list .content										{ margin-left: 45px;}
	#news-list .content h3									{ font-size: 1.3em; margin-bottom: .6em; }
	#news-list .arrow										{ display: none;}

	#news-grid > li > a::before								{ left: 112px;}
	#news-grid .content										{ margin-left: 42px;}

	#news-grid-detail .body::before							{ left: calc(10% + 95px);}
	#news-grid-detail .content								{ margin-left: 50px;}

	#page-news-article-detail #news-detail					{ padding: 4% 5%;}

	/** Excerpt **/
	.excerpt-checkbox									{ left: -40px;}
	.show-excerpt-checkbox .law-table-wrapper,
	.show-excerpt-checkbox .section-content	    		{ padding-left: 40px; }

	#excerpt-header										{ right: 0; }

	#excerpt-content .content							{ flex-grow: 1;}

	#excerpt-view #article-toolbar						{ padding: 15px 0 10px 0; height: auto; background-color: #fff;}
	#excerpt-view #article-toolbar .lt 					{ display: block !important;}
	#excerpt-view .article-box .header-content			{ padding-bottom: 15px;}
	#excerpt-view .article-box .header-content .meta	{ display: none;}
	#excerpt-view #main-wrapper .excerpt-content		{ padding-top: 20px;}
	#excerpt-view #main-wrapper .excerpt-content h2		{ font-size: 1.4em; margin-bottom: 1.2em;}
	#excerpt-view #main-wrapper .excerpt-content h3		{ font-size: 1.3em; margin-bottom: 1.2em;}
	#excerpt-view #main-wrapper .excerpt-content h4		{ font-size: 1.2em; margin-bottom: .5em;}
	#excerpt-view .law-table .first-law-no				{ font-size: 1.1em; }
	

	/** User profile **/
	#user-profile .main-content-wrapper .main-content	{ padding: 30px 0 0 0;}
	.user-terms											{ margin-top: 20px;}


	/** Profile header **/
	.profile-header							{ padding: 20px 4% 0 4%;}
	.profile-header.no-nav 					{ padding-bottom: 20px;}
	.profile-header	.avatar 				{ width: 72px; height: 72px; margin-right: 10px; }
	.profile-header .statistics 			{ display:none; }
	.profile-header .statistics .set		{ padding: 0 18px; }
	.profile-header .nav 					{ margin: 10px 0 0 0; justify-content: space-between;}
	.profile-header .nav .swiper-slide		{ margin-left: 20px; font-size: .96em;}
	.profile-header-buttons					{ right: 10px; top: 10px;}
	
	/** Workgroups **/
	.profile-header-buttons								{ right: 18px; top: 18px;}
	.profile-header .name								{ margin-bottom: 5px;}
	.profile-box 										{ min-height: 360px; }
	.profile-box .box-content 							{ padding: 12px 4%; }
	.profile-box .list-table li > div					{ height: 45px;}

    .project-page-box                                               { overflow: visible;}
    .project-page-box.shift                                         { margin-top: 60px;}
    .profile-header-more-button                                     { display: block; border: none; background: none !important; -webkit-tap-highlight-color:transparent; outline-style:none; position: absolute; right: 8px; top: -16px; font-size: 14px;}
    .profile-header-more-button + .profile-header-buttons           { display: none; z-index: 9; background-color: #fff; padding: 5px 8px 5px 5px; border-radius:5px; right: 0;  top:0; transform: translate(0, -70px);}
    .profile-header-more-button.active + .profile-header-buttons    { display: block;}
    .profile-header + .profile-box                                  { border-radius: 0 0 10px 10px;}
    .profile-box .box-header,
	.profile-box .box-tab 											{ height: 54px;}
	.profile-box .box-tab 											{ line-height: 54px;}

	.workgroup-member-list .email 						{ display: none;}

	/** Project **/ 
	.workgroup-project-list .members 						{ display: none;}
	.workgroup-project-list .expand-project-lists-button 	{ display: none;}

	.project-info 										{ column-count: 1; margin: 0; }
	.project-info .row .group							{ margin-left: 22px; }

	/** Project chronicles **/ 
	#project-chronicles .vis-panel.vis-left			{ max-width: 130px;}
	#project-chronicles .vis-ltr .vis-label .vis-inner { padding-left: 8px;}
	#project-chronicles .vis-ltr .vis-label:not(.vis-nesting-group):not(.vis-group-level-0) { padding-left: 5px;}
	
	/** Project excerpt list **/ 
	.project-excerpt-list .time 						{ display: none;}

	/** Issue **/
	.my-issue-list .status,
	.my-issue-list .actions 							{ display: none;}

	.member-icons li									{ width: 24px; height: 24px; margin-right: 2px;}

	
	/** About us **/
	#page-about h2 								{ font-size: 2em; }
	#page-about .sub-title 						{ font-size: 1.4em; }
	#page-about .fr-view 							{ font-size: 1.05em;}
}


/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {
	
	/** Column layout **/
	.column-3 .col-item 					    { width:49%; margin-right:2%; margin-top:2%; }
	.column-3 .col-item:nth-child(3n) 			{ margin-right:2%; }
	.column-3 .col-item:nth-child(-n+3) 		{ margin-top:2%; }
	.column-3 .col-item:nth-child(2n)	   	 	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+2)	   	 	{ margin-top:0; }

	/** Database index **/
	.filter-set li								{ width: 33.33%;}
	
	/** Button **/
	.button-lg									{ height: 40px; line-height: 38px; font-size: 1.1em; }	

}


/*
-----------------------------
For 768px or less
-----------------------------
*/
@media screen and (max-width: 768px) {
	
	/** Column layout **/
	.column-2 .col-item  				    	{ width:100%; margin-right:0; margin-top:2%; }
	.column-2 .col-item:nth-child(-n+2) 		{ margin-top:2%; }
	.column-2 .col-item:nth-child(1) 			{ margin-top:0; }

	.column-4 .col-item				     		{ width:49%; margin-right:2%; margin-top:2%; }
	.column-4 .col-item:nth-child(4n)	 		{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+4)  		{ margin-top:2%; }
	.column-4 .col-item:nth-child(3n)    		{ margin-right:2%; }
	.column-4 .col-item:nth-child(-n+3)  		{ margin-top:2%; }
	.column-4 .col-item:nth-child(2n)    		{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  		{ margin-top:0; }

	/** law-table **/
	.law-table th, 
	.law-table td								{ padding-left: 4px; padding-right: 4px;}
	.law-table .law-no.gt-2						{ white-space:unset; min-width: 3em; max-width: none; }

	/** Image dialog **/
	.image-dialog.mobile									{ left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none;}
	.image-dialog.mobile .ui-resizable-handle				{ display: none;}
	.image-dialog.mobile									{ padding: 35px 0 20px 0;}
	.image-dialog.mobile figure								{ display: block; overflow-y: auto; }
	.image-dialog.mobile figure figcaption					{ margin-top: 0; height: auto;}
	.image-dialog.mobile figure .figure-content				{ display: block; height: auto; margin:0; padding:15px 4%;}
	.image-dialog.mobile figure .figure-image				{ display: block; width: 100%; height: 68vh; }
	
	/** Profile header **/
	.profile-header .group									{ margin-right: 10px;}
	.profile-header .statistics .set 						{ padding: 0 25px; }

	/** Profile Empty **/
	.profile-box .empty										{ font-size: 1.2em; left: 50%; width: 80%; transform: translate(-50%, -50%);}

	/** Term **/
	.comment-box .footer .info								{ width: 100%; }
	.comment-box .footer .toolbar 							{ width: 100%; margin-top: 15px; }
	.comment-box .toolbar > div								{ margin-left: 20px;}

	.cta-box 							 					{ flex-direction: column-reverse; }
	.cta-text 							 					{ width: auto; height: 50%; padding: 20px 5% 30px 5%; border-radius: 0 0 10px 10px; } 
	.cta-text h2 						 					{ font-size: 1.4em; margin-top: 0; margin-bottom: 15px;}
	.cta-text .fr-view 					 					{ font-size: 1em; }
	.cta-text .button-wrapper								{ margin: 20px 0;}
	.cta-text .button-md 									{ font-size: 1em; width: 100%;}
	.cta-text .cta-login									{ text-align: center; margin-bottom: 0;}
	.cta-image 												{ width: auto; height: 50%; border-radius: 10px 10px 0 0; }
	.cta-close 												{ width: 30px; height: 30px; line-height: 32px; }
	.cta-close i 											{ font-size: 1.3em;}

	/** Excerpt **/
	#excerpt-header .excerpt-header-inner .label 			{ display: none;}

	/** Page **/
	.page-wrapper .page-header h1							{ font-size: 1.4em; }
	.page-wrapper .page-menu								{ margin-bottom: 25px;}
	.page-wrapper .page-list li a							{ font-size: 1.05em; padding: 1em .4em;}

	/** Page:News **/
	#news-grid.column-3 .col-item 				 			{ width:100%; margin-right:0; margin-top:2%; }
	#news-grid.column-3 .col-item:nth-child(3n) 	 		{ margin-right:0; }
	#news-grid.column-3 .col-item:nth-child(-n+3)  			{ margin-top:2%; }
	#news-grid.column-3 .col-item:nth-child(2n)    			{ margin-right:0; }
	#news-grid.column-3 .col-item:nth-child(-n+2)  			{ margin-top:2%; }
	#news-grid.column-3 .col-item:nth-child(1) 				{ margin-top:0; }
	#news-grid > li > a										{ padding: 20px 20px;}
	#news-grid > li > a::before								{ top: 20px; bottom:20px;}

	#news-grid-detail .header								{ font-size: 1.15em;}
	#news-grid-detail .body									{ padding: 20px 5%;}
	#news-grid-detail .body::before							{ left: calc(5% + 95px); top: 20px; bottom:20px;}
	#news-grid-detail .content								{ margin-left: 45px;}

	#news-article > li 										{ padding: 4%; margin-bottom: 25px; }
	#news-article > li > a 									{ display: block; }
	#news-article .image 									{ width: 100%; margin-right: 0; margin-bottom: 15px;}
	#news-article .text 									{ }
	#news-article .content .summary 						{ text-align: left;}
	
	/** Profile header **/
	.profile-header .nav .swiper-slide					 	{ margin-left: 15px; }
	.profile-header .nav .swiper-slide a 					{ padding: 15px 8px;}

	/** Workgroups **/
	.profile-box 											{ min-height: 300px; }
	.profile-box .list-table .actions .button-profile i 	{ display: none;}
	.workgroup-list .actions i,
	.workgroup-list .members								{ display: none;}
	
	/** About us **/
	#page-about .column-2 									{ flex-direction: column;}
	#page-about .column-2 .col-item 						{ width: 100% !important; margin: 0;}
	#page-about h2 											{ font-size: 1.8em; }
	#page-about .sub-title br 								{ display: none;}
	#page-about #about-section-1 .inner						{ padding-top: 50px;}
	#page-about #about-section-1 .col-item .text			{ margin-bottom: 50px;}
	#page-about #about-section-2 .fr-view					{ margin-top: 15px;}
	#page-about .bg-bubble									{ background-position: 0 0; background-size: 200%;}
	#about-slogan											{ background-size: 150%;}
	
}

/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {

	/** Header **/
	h1 										{ font-size: 1.6em; }
	h2 										{ font-size: 1.3em; }
	h3 										{ font-size: 1.2em; }
	h4 										{ font-size: 1.15em; }

	article .fr-view						{ text-align: left;}
		
	/** Column layout **/
	.column-5 .col-item			 			{ width:49%; margin-right:2%; margin-top:2%; }
	.column-5 .col-item:nth-child(5n) 		{ margin-right:2%; }
	.column-5 .col-item:nth-child(-n+5) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(4n)   	{ margin-right:2%; }
	.column-5 .col-item:nth-child(-n+4) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(3n)   	{ margin-right:2%; }
	.column-5 .col-item:nth-child(-n+3) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(2n)   	{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+2) 	{ margin-top:0; }

	/** Tips **/
	.tips									{ padding: .5em .7em;}
	.tips .buttons							{ display: none; /* Assume admin will not manage content on mobile */ }

	/** Law table **/
	.law-table .law-no						{ white-space: wrap;}

	/** Header **/
	#header-inner							{ padding-left: 40px;}
	#header-inner h1						{ width: 100px;}

	/** Bottom toolbar **/
	#toolbox-menu .toolbox-menu-button i 	{ margin: 0; font-size: 16px;}
	#toolbox-menu .toolbox-menu-button span { display: none;}

	
	/** Quota **/ 
	.quota-label										{ padding:.3em .5em; }
	.project-page-box .profile-box .box-header .quota-label { font-size: 12px; margin-left: 3px;}

	/** Workgroups **/ 
	.workgroup-list .actions								{ display: none;}

	/** Workgroup **/ 
	.profile-box .box-header							{ padding: 0 4%; height: 54px;}
	.profile-box .box-header h3							{ font-size: 1.1em; }
	.profile-box .box-header .button					{ padding:0 .86em; font-size: .92em; height: 34px; line-height: 32px;}
	.profile-box .box-header .button:not(.button-sq) i 	{ display: none;}
	.profile-box .box-header .workgroup-quota			{ margin-right: 5px;}
	.profile-box .box-content							{ padding: 15px 4% 20px 4%;}
	.profile-box .box-content .group					{ margin-top: 30px;}
	.profile-box .box-content .group > h4				{ font-size: 1.2em;}
	.profile-box .box-content .group:first-child		{ margin-top: 10px; }
	.profile-box .box-tab								{ height: 54px; line-height: 54px;}
	.profile-box .list-table .actions .button			{ font-size: .92em; height: 34px; line-height: 32px;}

    .profile-header-more-button                             { right: 6px; top: -18px;}

	#owend-workgroups .projects,
	#owend-workgroups .count-members,
	#joined-workgroups .time 									{ display: none;}

	.workgroup-member-list .icon 								{ width: 40px; height: 40px; margin-right: 10px;}
	.workgroup-member-list .time 								{ display: none;}
	.workgroup-member-list .actions .remove-member i 			{ margin-right: 0;}
	.workgroup-member-list .actions .remove-member i + span 	{ display: none;}
	#inviting-members .cancel-invitation i 						{ margin-right: 0;}
	#inviting-members .cancel-invitation i + span				{ display: none;}
	
	/** Project **/ 
	.workgroup-project-list tr:not(.header) .name				 { font-size: 1.02em;}
	.workgroup-project-list .actions 							 { padding-right: 0 !important;} 
	.workgroup-project-list .actions .button-profile:last-child  { display: none;} 

	.project-page-box .profile-box								 { padding: 30px 6%;}
	.project-page-box .profile-box .box-header					 { margin-top: -17px; margin-bottom: 15px;}
	
	.project-info-tabs .tab										 { font-size: 1em; padding: .8em;}
	.project-info > .row > .label 								 { font-size: 1.02em;}
	.project-info > .row > .label::before						 { font-size: .9em; } 
	.project-info .row .group									 { margin-top: 10px; margin-left: 0; }
	
	/** Project chronicles **/ 
	#project-chronicles  .vis-panel.vis-left					{ max-width: 115px;}

	/** Project members **/ 
	#project-members .workgroup-member-list .icon 				{ display: none;}

	/** Project excerpt list **/ 
	.project-excerpt-list .creator 								{ display: none;}
	.project-excerpt-list .actions a:last-child 				{ display: none;}

	/** Homepage **/
	.main-category li .title				{ font-size: 1.05em;}
	.main-category li .desc					{ font-size: 13px; margin-top: 10px;}
	.main-category .status-tag				{ right: 10px; top: 10px;}

	/** Database index **/
	.filter-set li							{ width: 50%;}
	.filter-set [type="checkbox"]			{ margin-right: 0;}

	.carousel-menu .swiper-slide			{ width: 49%; }

	/** Term **/
	.article-box .article-header .header-content-thumb		{ width: 90px; margin-right: 20px; }
	
	#section-law-dialog .fr-view .fr-img-caption,
	#section-law-dialog .fr-view img  						{ width: auto !important;}

	#article-toolbar .rt 									{ justify-content: space-between; width: 100%;}
	#article-toolbar #excerpt-button i,
	#article-toolbar #chapter-menu-button i					{ display: inline; margin: 0;}
	#article-toolbar #excerpt-button span,
	#article-toolbar #chapter-menu-button span 				{ display: none;}
	#article-toolbar #add-to-excerpt-button,
	#article-toolbar #chapter-menu-button					{ width: 36px; padding: 0;}

	/** User profile **/
	#profile-overview-info					{ width: 50%;}
	#profile-overview-statistics			{ width: 50%;}
	#profile-overview img					{ width: 60px; height: 60px;}

	/** Excerpt **/
	#excerpt-header .btn																{ width: 36px; height: 36px; line-height: 36px; }
	#excerpt-list-selector + .select2-container--default .select2-selection--single 								{ height: 36px; }
	#excerpt-list-selector + .select2-container--default .select2-selection--single .select2-selection__rendered 	{ line-height: 34px;}
	#excerpt-list-selector + .select2-container--default .select2-selection--single .select2-selection__arrow		{ height: 36px;}
	#excerpt-header-dropdown-holder 													{ top: 37px; }

	/** Issue **/
	.my-issue-list .category 				{ display: none;}


	/** Page **/
	.page-wrapper .page-menu				{ display: block; width: 100%; height: 0; padding-top: 40px; border-radius: 8px; border: 1px solid var(--theme-border-color); overflow: hidden; position: relative; }		
	.page-wrapper .page-menu::after			{ content: '\f107'; font: var(--fa-font-regular); font-size: 12px; color: #fff; position: absolute; right: 15px; top: 15px; pointer-events: none; }
	.page-wrapper .page-menu li				{ width: 100%; margin: 0; background: #fff; }	
	.page-wrapper .page-menu li a 			{ display: block; font-size: 1em; padding: .8em 1em; border-radius: 0; border: none !important; height: 40px; }
	.page-wrapper .page-menu li a i 		{ display: none;}
	.page-wrapper .page-menu li:not(.active) { display: none;}
	.page-wrapper .page-menu li.active		{ position: absolute; left: 0; top: 0; width: 100%; }
	.page-wrapper .page-menu.open 			{ height: auto;}
	.page-wrapper .page-menu.open li		{ display: block;}
	
	/*.page-wrapper .page-menu.open li:last-child a 	{ border-radius: 0 0 8px 8px;}*/

	.page-wrapper .page-expandable .expandable-title { padding: 10px 3px;}

	/** Contact form **/
	.contact-form 							{ margin: 15px 0 60px 0;}
	.contact-form h3 						{ margin-bottom: 20px;}

	/** About us **/
	#page-about #about-section-1 .inner					{ padding-top: 40px;}
	#page-about #about-section-1 .col-item .text			{ margin-bottom: 30px;}
	#page-about #about-section-4 .inner					{ padding-bottom: 30px;}
	#page-about #about-section-4 .box-round-lg				{ padding: 30px 6% 0 6%;}
	#page-about #about-section-4 .flex-vertical			{ flex-direction: column-reverse;}
	#page-about #about-section-4 h2 						{ margin: 0 0 15px 0;}
	#page-about #about-section-4 p 						{ margin-bottom: 30px; font-size: 1em;}
}


/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {

	/** Header **/
	h2 										{ font-size: 1.25em; }

	/** Column layout **/	
	.column-3 .col-item 				 	{ width:100%; margin-right:0; margin-top:2%; }
	.column-3 .col-item:nth-child(3n) 	 	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+3)  	{ margin-top:2%; }
	.column-3 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-3 .col-item:nth-child(-n+2)  	{ margin-top:2%; }
	.column-3 .col-item:nth-child(1) 		{ margin-top:0; }

	.column-4 .col-item 				 	{ width:100%; margin-right:0; margin-top:2%; }
	.column-4 .col-item:nth-child(4n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+4)  	{ margin-top:2%; }
	.column-4 .col-item:nth-child(3n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+3)  	{ margin-top:2%; }
	.column-4 .col-item:nth-child(2n)    	{ margin-right:0; }
	.column-4 .col-item:nth-child(-n+2)  	{ margin-top:2%; }
	.column-4 .col-item:nth-child(1) 		{ margin-top:0; }

	.column-5 .col-item			 			{ width:100%; margin-right:0; margin-top:2%; }
	.column-5 .col-item:nth-child(5n) 		{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+5) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(4n)   	{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+4) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(3n)   	{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+3) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(2n)   	{ margin-right:0; }
	.column-5 .col-item:nth-child(-n+2) 	{ margin-top:2%; }
	.column-5 .col-item:nth-child(1) 		{ margin-top:0; }

	/** Profile header **/
	.profile-header						{ margin: 20px 0; }
	.profile-header	.avatar 			{ width: 72px; height: 72px; margin-right: 10px; }
	.profile-header .title 				{ margin-bottom: 6px;}
	.profile-header .meta 				{ font-size: .96em;}
	.profile-header .name				{ font-size: 1.1em;}
	.profile-header .statistics .set	{ padding: 0 10px; }
	.profile-header .statistics .value 	{ font-size: 1.5em; }
	.profile-header .statistics .label 	{ font-size: .9em; }
	.profile-header .nav 				{ margin: 15px 0 0 0; }

    .profile-header-more-button         { right: 6px; top: -18px;}


	/** Homepage **/
	.main-category > .col-item a			{ display: flex; align-items: center; height: auto; padding: 15px 12px;}
	.main-category > .col-item a img 		{ position: static; transform: none !important; width: 60px; height: 60px; margin:0 10px 0 0;}
	.main-category > .col-item a .info 		{ position: static; transform: none; width: auto; text-align: left;}
	.main-category > .col-item a .desc 		{ margin-top: 6px;}

	/** Database index **/
	.carousel-menu .swiper  						{ padding-bottom: 18px;}
	.carousel-menu .swiper-slide					{ width: 100%; margin-left: 0; }
	.carousel-menu .swiper-button-next,
	.carousel-menu .swiper-button-prev				{ display: none;}

	.block-menu .tabs								{ margin-bottom: 15px;}
	.block-menu .tabs .tab							{ padding: .8em 0;}
	
	
	.book-list-header .menu-filter-button			{ margin-right: 10px;}
	.book-list .num									{ margin-right: .4em;}
	
	/** Term **/
	#article-toolbar .lt 							{ display: none;}
	#article-toolbar .buttons a:not(.button-sq) i 	{ display: none;}
	
	.article-header .meta .meta-label				{ display: none;}

	.popup .article-box .article-header h1,
	.popup .article-box .article-header .meta				{ margin-right: 72px;}
	.popup .article-box .article-header .meta .meta-label 	{ display: none;}

	#excerpt-header .selector-wrapper						{ min-width: 240px; }

	/** User profile **/
	#profile-overview-info						{ width: 100%; flex-wrap: wrap;}
	#profile-overview-info img					{ margin: 10px auto; width: 110px; height: 110px;}
	#profile-overview-info .info 				{ width: 100%; text-align: center;}
	#profile-overview-info .info .name 			{ font-size: 1.2em; font-weight: 500; margin-bottom: 10px;}
	#profile-overview-statistics				{ width: 100%; text-align: center; margin: 15px 0; }
	#profile-overview-statistics .num			{ font-size: 1.3em;}

	/** Excerpt **/
	.excerpt-mode #excerpt-header .save-excerpt-list	{ margin: 0 5px 0 10px;}

	/** Issue **/
	.my-issue-list .time 					{ display: none;}
	
	/** Page **/
	.page-wrapper .page-header				{ margin-bottom: 20px;}
	.page-wrapper .page-menu				{ margin-bottom: 15px;}
	.page-wrapper .page-content				{ padding: 25px 4%; }

	/** Page:Faq **/
	.page-search-form										{ margin: 25px auto; padding: 2px 10px;}
	
	/** Page:News **/
	.page-wrapper .page-header .subtitle					{ font-size: 1em;}

	.date-mark												{ width: 68px; height: 68px; padding: 5px;  border-radius: 8px;}
	.date-mark .day 										{ font-size: 2.1em; }
	.date-mark .month-year 									{ font-size: 12px; transform: scale(.9, .9);}

	#news-list > li > a										{ padding: 20px 0;}
	#news-list > li > a::before								{ left: 85px; top: 20px; bottom:20px; }
	#news-list .content										{ margin-left: 35px;}
	#news-list .arrow										{ display: none;}

	#news-grid > li > a										{ padding: 20px 15px;}
	#news-grid > li > a::before								{ left: 98px;}
	#news-grid .content									 	{ margin-left: 30px;}

	#news-grid-detail .body::before							{ left: calc(5% + 85px); }
	#news-grid-detail .content								{ margin-left: 35px;}

	/** About us **/
	#page-about h2 										{ font-size: 1.5em; }
	#page-about .sub-title 								{ font-size: 1.3em; }
	#page-about .fr-view 									{ font-size: 1.02em;}
	#page-about .bg-bubble									{ background-position: 0 0; background-size: 250%;}
	#about-slogan											{ height: 80px; background-size: 250%;}
}


/*
-----------------------------
For 360px or less
-----------------------------
*/

@media screen and (max-width: 360px) {
	
	/** Database index **/
	.filter-set li									{ width: 100%;}

	/** Term **/
	.article-box .article-header .header-content-thumb		{ width: 60px; margin-right: 10px; }

	#section-law-dialog .buttons .button:not(.button-sq) i	{ display: none;}

	#excerpt-header .selector-wrapper						{ min-width: 220px; }

}

/*
---------------------------------------------------------
06. /var/www/archidb/public/css/app.advanced.css
---------------------------------------------------------
*/


:root {
	--header-height: 64px;
	--aside-nav-width: 82px;
	--aside-nav-height: 48px; /* for mobile */
	--aside-nav-button-width: 62px;
}

.advanced-theme                                             { background-color: var(--advanced-bg-color);}
.advanced-theme #breadcrumb-wrapper                         { margin-bottom: 40px; margin-left: 10px; }
.advanced-theme #breadcrumb-wrapper .item                   { color: var(--theme-text-color);}

#container 		                                            { margin-left: var(--aside-nav-width);}
#header-wrapper                                             { left: var(--aside-nav-width); right: 0; width: auto; }
#header-inner                                               { width: 96%; height: var(--header-height); margin: 0 auto 0 0;}
#header-corner-rt                                           { display: none;}
.headroom--unpinned:not(.show-search-bar) #header-wrapper	{ transform: translateY(-150%);}
.headroom--unpinned:not(.show-nav) #menu-button             { transform: none;}
.bg-theme-transparent	                                    { background-color: var(--theme-bg-color);}

.guota-label-tips                       { font-size: 12px;}
.guota-label-tips a                     { font-weight: 500; color: var(--mid-text-color);}

.popup #aside-nav                       { display: none !important;}
.popup #container                       { margin-left: 0;}

#aside-nav                              { z-index: 1001; position: fixed; left: 0; top: 0; bottom:0; width: var(--aside-nav-width); display: flex; flex-direction: column; background-color: var(--theme-bg-color); color: var(--lighter-text-color);  }
#aside-nav-list                         { width: var(--aside-nav-button-width); margin: 90px auto 0 auto; text-align: center; font-size: .94em;}
#aside-nav-list li                      { height: var(--aside-nav-button-width); margin-bottom: 15px; position: relative; display: flex; flex-direction: column; justify-content: center; border-radius: 5px; cursor: pointer; }
#aside-nav-list li:hover                { color: #fff;}
#aside-nav-list li.active               { color: var(--theme-text-color); background-color: #fff; border-bottom: 2px solid var(--light-border-color);}
#aside-nav-list li.bottom-bar::after    { content: ''; position: absolute; left: 20%; right: 20%; bottom:-20px; height: 1px; background-color: rgba(255,255,255,.33); }
#aside-nav-list li.bottom-bar           { margin-bottom: 40px;}
#aside-nav-list i                       { display: block; font-size: 20px; margin-bottom: 6px;}
#aside-nav-list .prefix-tag             { background-color: #E5D097; color: #fff; font-size: 10px; font-weight: 500; border-radius: 3px; padding: 1px 5px; position: absolute; right: 0; top: 0; }
#aside-nav-list li.active .prefix-tag   { display: none;}

#widget-page-header                     { margin: 30px 0; }
#widget-page-header .quota-label        { background: none; margin: 10px auto 0 5px; font-size: 13px; color: var(--mid-text-color); }
#widget-page-header .quota-label .usage { margin-left: 3px;}
#widget-page-header .quota-label .alt-msg a { font-weight: 500; border-bottom: 1px solid var(--light-border-color);}
#widget-page-header #widget-page-title  { margin: 0;} 
#widget-page-title                      { font-size: 1.8em; font-weight: 400; letter-spacing: .08em; color: var(--theme-text-color); margin: 30px 0; }


#widget-header-buttons      { margin-top: -10px; margin-bottom: 20px;}
#widget-header-buttons .button { margin-right: 5px;}
#widget-header-buttons .button-ft { min-width: 98px;}
#widget-header-buttons + #widget-page-nav { margin-bottom: 20px;}

#widget-page-nav                           { margin-bottom: 30px; font-size: 1.05em; letter-spacing: .02em;  color: var(--mid-text-color); border-bottom: 1px solid var(--theme-border-color); }
#widget-page-nav .swiper-slide             { width: auto !important; margin-right: 40px;}
#widget-page-nav .swiper-slide:last-child  { margin-right: 0 !important;}
#widget-page-nav .swiper-slide.active      { color: var(--theme-text-color); font-weight: 500; border-bottom: 1px solid var(--theme-border-color); }
#widget-page-nav .swiper-slide a           { display: inline-block; padding-bottom: .8em; letter-spacing: .08em; }

#widget-page-search                         { position: relative; }
#widget-page-search input                   { width: 0; height: 36px; padding: 0; border: 1px solid var(--advanced-bg-color); color: var(--theme-text-color); background-color: #fff; opacity: 0; transition: width .4s, opacity .3s .1s, border-color 0s .4s; }
#widget-page-search.show input              { width: 270px; border: 1px solid var(--light-border-color); padding: 0 1em; opacity: 1;  transition: width .4s, opacity .4s, border-color 0s; }
#widget-page-search button                  { position: absolute; right: 0; top: 50%; width: 36px; height: 36px; line-height: 34px; transform: translateY(-50%); margin-left: 5px; font-size: 18px; border: none; background: none; cursor: pointer; color: var(--theme-text-color);}
#widget-page-search .clear                  { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 12px; display: none;}
#widget-page-search.has-text .clear         { display: block;}

.box-header.has-swiper-tabs                 { padding: 0 !important; }
.widget-page-box                            { min-height: 480px;}
.widget-page-box .empty                     { transform: translate(-50%, -50%);}
.widget-page-box .box-tabs.swiper           { margin-left: 0; padding-left: 40px; margin-right: 0; padding-right: 40px; flex-grow: 1; }
.widget-page-box .box-tab 		            { margin-right: 40px; }
.widget-page-box .box-tab.swiper-slide 		{ width: auto !important; }
.widget-page-box .box-tab:last-child        { margin-right: 0 !important;}
.widget-page-box .box-tab a                 { display: block; height: 100%;}
.widget-page-box .clear-query               { color: var(--lighter-text-color); margin-left: 5px;}
.widget-page-box .clear-query:hover         { color: var(--theme-text-color);}
.widget-page-box .pagination a, .widget-page-box .pagination span { font-size: 1em; padding: 2px; }
.widget-list tr:not(.header) td             { height: 53px;}
.widget-list a                              { color: var(--theme-text-color);}
.widget-list a:hover                        { color: var(--light-text-color);}
.widget-list .member-icons                  { width: 45px; padding-left: 0 !important; padding-right: 10px !important; }

#widget-page-body                                           { padding: 0;}
#widget-page-aside                                          { width: 270px; min-height: 480px; flex-grow: 0; flex-shrink: 0; padding: 20px 0; border-right: 1px solid var(--light-border-color);}
#widget-page-body.no-content-selected #widget-page-aside    { height: 600px; }
#widget-page-aside-content                                  { overflow-y: auto;}
#widget-page-content                                        { flex-grow: 1; position: relative; overflow-x: hidden;} 
#widget-page-content #excerpt-content .empty                { margin-top: 1em;}

body:not(.is-responsive) #widget-page-body.hide-menu #widget-page-aside              { width: 27px;}
body:not(.is-responsive) #widget-page-body.hide-menu #widget-page-aside-content      { display: none;}
body:not(.is-responsive) #widget-page-body.hide-menu #widget-page-aside-buttons      { margin: 0; justify-content: center;}
body:not(.is-responsive) #widget-page-body.hide-menu #widget-page-aside-buttons .lt  { display: none;}
body:not(.is-responsive) #widget-page-body.hide-menu #my-project-menu-toggle i       { transform: rotate(180deg);}

.widget-page-box .pagination 				            { margin-top:25px; }
.widget-page-box .pagination a,
.widget-page-box .pagination span                       { display: block; width: 28px; height: 28px; line-height: 28px; padding: 0; margin: 0 3px; text-align: center; }
.widget-page-box .pagination a,
.widget-page-box .pagination span,
.widget-page-box .pagination .active span	            { border-bottom:none;  }
.widget-page-box .pagination .active span               { background-color: var(--soft-bg-color); border-radius: 3px;}

#widget-header-buttons .sort-selector                   { color: var(--theme-text-color); }
#widget-header-buttons .sort-selector-label i           { font-size: 10px; margin-left: 5px; margin-right: 0;}
#widget-header-buttons .sort-selector-menu              { padding-top: 4px; left: auto; right: 4px;}
#widget-header-buttons .sort-selector-menu ul           { padding: 10px 0; background-color: #fff; width: auto; }
#widget-header-buttons .sort-selector-menu li           { margin: 0; min-width:146px;}
#widget-header-buttons .sort-selector-menu a            { display: block; color: #888; padding: 8px 14px;}
#widget-header-buttons .sort-selector-menu a:hover      { background-color: var(--soft-bg-color);}
#widget-header-buttons .sort-selector-menu a.active     { background-color: var(--soft-bg-color); color: var(--theme-text-color); }

#category-mamanegment h3                                { margin-bottom: 20px; font-size: 1.33rem;}
#category-mamanegment-list li                           { border: 1px solid var(--light-border-color); border-radius: 4px; margin: 7px 0; padding: 9px 15px;}
#category-mamanegment-list li .sort                     { color: var(--theme-text-color); margin-right: 10px; cursor: pointer;}
#category-mamanegment-list .label                       { flex-grow: 1; color: var(--theme-text-color);}
#category-mamanegment-list .buttons a                   { margin-left: 20px; color: var(--light-text-color); font-size: 13px;}
#category-mamanegment-list .buttons a:hover             { color: var(--theme-text-color);}
#category-mamanegment-form                              { border-top: 1px solid var(--light-border-color); margin: 25px 0 10px 0; padding-top: 25px;}
#category-mamanegment-form input                        { height: 38px; margin-right: 5px;}
#category-mamanegment-form .error                       { text-align: left;}

#widget-permission-field .row                           { margin-bottom: 20px;}

#note-category-form .error                              { text-align: left;}

#my-workgroup-selector-wrapper                                { width: 320px; margin-right: 10px;}
#my-workgroup-selector-wrapper .select2-selection__rendered   { color: var(--theme-text-color);}
#my-workgroup-dropdown-holder .select2-container              { width: auto !important;}

#my-project-selector-wrapper                                  { width: 320px; margin-right: 10px;}
#my-project-selector-wrapper .select2-selection__rendered     { color: var(--theme-text-color);}
#my-project-dropdown-holder .select2-container                { width: auto !important;}
#my-project-dropdown-holder .tags                             { margin-left: 6px;}
#my-project-dropdown-holder .tag                              { font-size: 11px; background-color: var(--light-bg-color); color: var(--theme-text-color); margin: 2px 4px 2px 0; padding: .2em .4em; border-radius: 3px;}
#my-project-dropdown-holder .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--softer-bg-color);}
#my-project-dropdown-holder .select2-container--default .select2-results__option--selected      { background-color: var(--soft-bg-color);}
#my-project-dropdown-holder .select2-container--open .select2-search__field                     { height: 32px; padding: .2em .7em;}
#my-project-dropdown-holder .select2-container--open .select2-search__field::placeholder        { color: #999; }

#project-view .project-export-btn i         { display: none;}

#widget-filter-mobile-button                { display: none;}
#widget-filter-form                         { margin-left: auto;}
#widget-filter-form .button                 { margin-left: 4px;}
#widget-filter-wrapper                      { width: 240px;}
#widget-filter-wrapper .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { height: 24px;}
#widget-filter-wrapper .select2-container .select2-search--inline .select2-search__field { margin-top: 8px;}

#mobile-excerpt-back-button                 { display: none;}

.my-excerpt-menu-title                      { color: var(--theme-text-color); font-weight: 500; line-height: 1.36em; padding: 8px 15px 8px 20px; cursor: pointer; transition: all .2s; }
.my-excerpt-menu-title:hover                { background-color: var(--soft-bg-color);}
.my-excerpt-menu-title i                    { font-size: 12px; margin-left: 15px; margin-top: 4px;}
.my-excerpt-menu-title.active i             { transform: rotate(180deg);}
.my-excerpt-menu                            { color: #999; }
.my-excerpt-menu li                         { padding: 7px 20px;}
.my-excerpt-menu li:hover .text             { color: var(--mid-text-color);}
.my-excerpt-menu li.active                  { padding: 10px 20px; background: #f3f3f2; color: var(--theme-text-color); font-weight: 500; }
.my-excerpt-menu li.active .label .symbol   { color: var(--theme-text-color);}
.my-excerpt-menu .label .symbol             { width: 20px; color: var(--light-text-color); font-size: 16px; font-weight: 500; flex-grow: 0; flex-shrink: 0; }
.my-excerpt-menu .label .text               { font-size: .96em; line-height: 1.2em; transition: all .2s;}
.my-excerpt-menu .excerpt-tags              { margin-left: 20px; padding: 7px 0 5px 0;  }
.my-excerpt-menu .excerpt-tags .tag         { background-color: var(--light-bg-color); }

.widget-expandable-box                     { border: 1px solid var(--light-border-color); border-radius: 8px; margin: 15px 75px 15px 0;}
.widget-expandable-title                   { padding: 12px 15px; color: var(--theme-text-color); cursor: pointer;}
.widget-expandable-title span              { font-weight: 500; font-size: 1.15em; }
.widget-expandable-title i                 { font-size: 12px; color: var(--mid-text-color); transition: transform .4s .4s;}
.widget-expandable-title.show i            { transform: rotate(180deg);}
.widget-expandable-content                 { padding: 10px 15px 15px 15px; color: #444;}

#widget-page-aside-buttons                 { margin: 0 15px 15px 18px; }
#widget-page-aside-buttons .button         { box-shadow: none; font-size: 12px; padding: 0 .8em; height: 24px; line-height: 22px; }
#my-project-menu-toggle                    { color: var(--light-text-color); padding: 3px; cursor: pointer; transition: all .2s;}
#my-project-menu-toggle:hover              { color: var(--mid-text-color);}

#widget-page-content #excerpt-content .content                                          { overflow-y: visible;}
#widget-page-content.sortable .excerpt-content-list.is-collapsed .group-title::after    { display: none; }

#widget-page-content #excerpt-content .tips,
#widget-page-content #excerpt-content #excerpt-note,
#widget-page-content #excerpt-content #excerpt-content-holder 							{ margin-right: 75px;}

#widget-page-content #excerpt-content .aside-buttons                                    { top: 80px;}
#widget-page-content #excerpt-content > .header > .title                                { font-weight: 500; color: var(--theme-text-color);}


#my-bookmark-list .title       { padding-left: 20px; }
#my-bookmark-list .actions     { padding-right: 40px; }
#my-bookmark-list .icon 	   { color: var(--icon-color); }
#my-bookmark-list .database-title   { font-weight: 400;}
#my-bookmark-list .sep              { font-weight: 400; margin: 0 .4em;}
#my-bookmark-list .term-title       { font-weight: 500;}

#my-reference-list .title       { padding-left: 20px; }
#my-reference-list .actions     { padding-right: 40px; }

.widget-popup-form              { padding: 5px 10px !important;}
.widget-popup-form legend       { margin-bottom: .9em; padding-bottom: .9em !important; font-size: 1.33rem; font-weight: 500; color: var(--theme-text-color) !important; border-bottom: 1px solid var(--light-border-color); }
.widget-popup-form .label       { color: #222; font-size: 1.05em; font-weight: 500; }

/*
-----------------------------
For 1024px or less
-----------------------------
*/
@media screen and (max-width: 1024px) {

    :root {
        --header-height: 48px;
    }

    .box-round-lg                                    { border-radius: 8px;}

    .headroom--unpinned:not(.show-nav) #menu-button { transform: translateY(-64px);}
	.headroom #aside-nav                            { will-change: transform;	transition: transform 400ms;}
	.headroom--pinned #aside-nav                    { transform: translateY(0%); z-index: 1000;}
	.headroom--unpinned #aside-nav                  { transform: translateY(100%);}

    #container 		                        { margin-left: 0;}
    #header-wrapper                         { left: 0; }
    #header-inner                           { margin: auto; width: 92%;}
    #menu-button                            { display: block; }

    #aside-nav                              { position: fixed; top: auto; width:100vw; height: var(--aside-nav-height); flex-direction:row; }
    #aside-nav-list                         { width:100%; margin: 0; font-size: .94em; display: flex; align-items: center; justify-content: space-around;}
    #aside-nav-list li                      { height:100%; margin: 0 2px; flex-grow:1; }
    #aside-nav-list li.bottom-bar           { margin: 0;}
    #aside-nav-list li.bottom-bar::after    { display: none;}
    #aside-nav-list li.active               { background: none; border-bottom: none; color: #fff; }
    #aside-nav-list li a                    { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 100%; height: var(--aside-nav-height); }
    #aside-nav-list li a i                  { margin-bottom: 0; font-size: 16px;}
    #aside-nav-list li a span               { display: none;}

    .list-table.lite tr > td                                        { height: 48px;}  
    .list-table.lite tr > td                                        { padding:.6em 5px;}
    .list-table.lite tr > td:first-child                            { min-width: 0; width: 20px; }

    #widget-page-header                         { margin: 0 0 20px 0;}
    #widget-page-title                          { font-size: 1.6em;}

    .widget-page-box .box-tabs.swiper           { padding-left: 25px; padding-right: 25px;}
    .widget-page-box .box-tab                   { margin-right: 25px;}

    #widget-page-body.no-content-selected #widget-page-content  { display: none;}
    #widget-page-body.no-content-selected #widget-page-aside    { width: 100%; border-right: none;}
    #widget-page-body.has-content-selected #widget-page-aside   { display: none;}

    #my-project-menu-toggle                     { display: none;}

    #project-my-list .list-table .permission    { display: none;}
    #project-edit-form                          { padding: 0;}
    #project-edit-form legend                   { font-size: 1.3em;}
    .project-edit-dialog .jconfirm-buttons      { padding-bottom: 0 !important;}

    .project-info                               { padding-top: 10px;}
    .project-info .row .group .label            { min-width: 115px;}
    .project-info .value 						{ width: calc(100% - 115px); }
    .project-info .value + .value 				{ margin-left: 115px;}
    .form.project-info .column-list             { margin-left: 115px;}

    .form.project-info .group .label            { width: 100px;}

    .widget-expandable-box                                          { margin-right: 0;}
    #widget-page-content #excerpt-content .tips,
    #widget-page-content #excerpt-content #excerpt-note,
    #widget-page-content #excerpt-content #excerpt-content-holder { margin-right: 0;}

    #mobile-excerpt-back-button                         { display: block; background-color: var(--light-bg-color) !important; border: none;}
    #mobile-excerpt-back-button i                       { display: unset !important; color: var(--theme-text-color) !important; }

    #note-my-list .owner,
    #note-my-list .created_at                           { display: none;}


    #my-bookmark-list .actions     { padding-right: 0; }

    #my-reference-list .actions,
    #my-reference-list .date        { display: none;}
    #my-reference-list .title       { padding-left: 5px;}
}

/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {

    #widget-header-buttons                              { flex-wrap: wrap;}
    #my-project-selector-wrapper,
    #my-workgroup-selector-wrapper                      { width: 100%; margin-right: 5px;}

}


/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {

    .widget-page-box .buttons                           { width: 54px; }  

    #widget-page-header                                 { flex-wrap: wrap; }
    #widget-page-search                                 { width: 100% !important; transition: none; height: 0; }
    #widget-page-search button                          { transform: none; position: absolute; right: 0; top: -32px; font-size: 16px; }
    #widget-page-search input                           { width: 100% !important; transition: none; margin-top: 10px; display: none;}
    #widget-page-search.show                            { height: auto; }
    #widget-page-search.show input                      { display: block;}

    #widget-header-buttons .button i { display: none; }
    #widget-page-nav .swiper-slide                      { margin-right: 30px;}

    #widget-filter-mobile-button                        { display: block; background-color: var(--light-bg-color); border: none; box-shadow: none; }
    #widget-filter-mobile-button i                      { display: unset !important; color: var(--theme-text-color);}
    #widget-filter-mobile-button.reveal + #widget-filter-form { display: flex;}
    #widget-filter-form                                 { display: none; width: 100%; margin-left: 0; margin-top: 10px;}
    #widget-filter-wrapper                              { width: 100%; }

    #widget-save-to                                     { width: 100%; }
    .widget-save-to + .widget-category-wrapper          { width: 100%; margin-left: 0; margin-top: 0;}


    #project-my-list .list-table .actions               { display: none;}


    .form.project-info .row .group > .row               { flex-wrap: wrap;}
    .form.project-info .row .group .label               { width: 100%; margin-bottom: 5px; }
    .form.project-info .column-list                     { margin-left: 0;}
    .form.project-info .column-list .row                { margin-bottom: 10px;}
    .form.project-info .add-custom-column-set .label    { display: none;}

    #note-my-list .source                               { display: none;}

    #excerpt-content .header                            { flex-wrap: wrap; height: auto; min-height: 50px; }
    #excerpt-content .header .title                     { width: 100%; }
    #excerpt-content .header .meta                      { display: none; }
}


/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {

}

/*
---------------------------------------------------------
07. /var/www/archidb/public/css/conversation.css
---------------------------------------------------------
*/
/*
========================
My conversation
========================
*/

.conversation-input									                        { background-color: #fff; }
.conversation-input textarea  					                    { resize: none;  }
.conversation-input [name="message"] 					              { border: none; background-color: #fff; font-size: 1.02em; }
.conversation-input [name="message"]::placeholder           { color: #A1B5B6; }
.conversation-input [type="submit"] 					              { border: none; background-color: transparent; color: var(--light-text-color); font-size: 21px; transform: translateY(-2px); cursor: pointer; transition: all .2s;}
.conversation-input [type="submit"]:hover 			            { color: var(--theme-text-color);}
.conversation-input .label                                  { color: #003F40; font-size: .92em; }
.conversation-input .label .scope-name + i                  { font-size: 12px; margin-left: 3px;}
.conversation-input .row                                    { width: 100%; }



#conversation-scope-dropdown .menu                          { padding-top: 20px; }
#conversation-scope-dropdown .label                         { margin-bottom: 0; color: var(--theme-text-color); letter-spacing: .02em;}
#conversation-scope-dropdown .label:hover                   { color: #00292a;}
#conversation-scope-dropdown .label i:nth-child(2)          { font-size: 10px; margin-left: 2px;}
#conversation-scope-content                                 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 5px 12px ; padding: 15px 25px; background-color: #fff; width: auto;border: 1px solid #A4B9BA;box-shadow: 5px 5px 5px 0px rgba(0, 63, 64, 0.15);  }
#conversation-scope-content label                           { cursor: pointer; border-radius: 8px; white-space: nowrap;}
#conversation-scope-content input                           { display: none;} 
#conversation-scope-content .selected label                 { background-color: rgba(229, 235, 236, 0.5); }
#conversation-scope-content .icon-label-wrapper             { gap: 15px; padding: 8px 6px; font-size: .92em; color: #666; position: relative; border-radius: 10px;transition: background 0.2s ease-in-out; }

#conversation-presets-wrapper                                             { margin: clamp(30px, 5vw, 40px) 0 0 0; }
#conversation-presets-wrapper .conversation-presets                       { display: none;}
#conversation-presets-wrapper .grid                                       { display: grid; grid-template-columns: repeat(2, 1fr); gap:12px 30px; }
#conversation-presets-wrapper .grid .grid-item                            { padding: 14px 12px; border: 1px solid #A2B7B8; border-radius: 10px; cursor: pointer; gap:15px; transition: border-color 0.3s ease; }
#conversation-presets-wrapper .grid .grid-item:hover                      { border-color: var(--mid-border-color); }
#conversation-presets-wrapper .grid .grid-item:hover .icon-square         { background-color: var(--midtone-bg-color); color:var(--soft-bg-color); }
#conversation-presets-wrapper .icon-square                                { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 6px; background:var(--light-bg-color); color:var(--mid2-text-color); transition: all .2s; }
#conversation-presets-wrapper .icon-square i                              { font-size: 21px; transform: translateY(2px); }
#conversation-presets-wrapper .icon-text-wrapper                          { gap: 15px; }
#conversation-presets-wrapper .preset-text                                { color: var(--theme-text-color); font-size: .98em; letter-spacing: .07em; line-height: 1.2em;}

#recent-history-wrapper                                                   { margin: clamp(40px, 5vw, 50px) 0 0 0; }
#recent-history-wrapper .header                                           { margin-bottom: 24px; }
#recent-history-wrapper .header a                                         { display: flex; align-items: center; gap: 7px; color:#666; } 
#recent-history-wrapper .record                                           { padding: 10px 0px; gap:20px; color: var(--mid-text-color); border-bottom: 1px solid #A2B7B8; transition: all .2s; cursor: pointer; }
#recent-history-wrapper .record:hover                                     { color: var(--theme-text-color); border-color: var(--mid-border-color); }
#recent-history-wrapper .record:hover .icon-circle                        { background: #809FA0; }
#recent-history-wrapper .record .preset-text                              { font-size: .98em; letter-spacing: .07em; line-height: 1.2em;}
#recent-history-wrapper .icon-circle                                      { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #A4B9BA; transition: background .2s; }
#recent-history-wrapper .icon-circle i                                    { font-size: 14px; color: #fff; }
#recent-history-wrapper .no-history                                       { font-size: 16px; color: #A1B5B6; text-align: center; margin: 50px; }
#recent-history-wrapper .toggle-history-button                            { cursor: pointer; gap: 7px;color: #666; transition: color 0.2s; }
#recent-history-wrapper .toggle-history-button:hover                      { color: #00292a; }
#recent-history-wrapper .toggle-history-button i:last-child               { font-size:10px; transition: transform 0.3s ease;}
#recent-history-wrapper .toggle-history-button i:last-child.rotated       { transform: rotate(180deg); }
#recent-history-wrapper #history-conversation-button i                    { font-size:10px; }
#recent-history-wrapper #history-conversation-button:hover                { color: #00292a; }

.conversation-suggest-question                              { display: inline-block; padding: 3px 10px 5px 10px; margin: 2px; white-space: nowrap; border: 1px solid var(--light-border-color); border-radius: 30px; background-color: #fff; color: var(--mid-text-color); transition: all .2s; cursor: pointer;}
.conversation-suggest-question:hover                        { color: var(--theme-text-color);}

.chat-references                                            { margin-top: 30px;}
.chat-references p                                          { margin-bottom: 12px; transform: translateX(-4px); }
.chat-references p::before                                  { content: '\f02d'; font: var(--fa-font-solid); margin-right: 10px; }
.chat-references ul li                                      { margin: 0 0 8px 0; line-height: 1.25em; display: flex; align-items: flex-start;}.chat-references ul li::before 							    { content: '\0e122'; font: var(--fa-font-solid); color: var(--def-text-color); font-size: 7px; margin-right: 8px; color: var(--light-text-color); vertical-align: middle; }
.chat-references ul li::before 							                { content: '\0e122'; font: var(--fa-font-solid); color: var(--def-text-color); font-size: 7px; margin-right: 8px; margin-top: 1.1em; color: var(--light-text-color); vertical-align: middle; }
.chat-references ul li a 								                    { display: inline-block; pointer-events: all; cursor: pointer; font-size: .92em; background: none; }
.chat-references ul li a::after 							              { display: none;}
.chat-references ul li a:hover 								              { color: var(--light-text-color);  }

.chat-additional-questions                                  { margin-top: 30px;}
.chat-additional-questions p                                { margin-bottom: 12px;}

#conversation-toolbar                                       { padding-top: clamp(0px, 2vw, 60px); padding-bottom: clamp(25px, 4vw, 50px); color: var(--theme-text-color); justify-content: flex-end;}
#conversation-toolbar a                                     { margin-left: 8px; font-size: .96em;}
#conversation-toolbar a i                                   { margin-right: 0;}


#conversation-start 										                    { margin-top: clamp(4vh, 8vw, 12vh); }
#conversation-start-input                                   { padding: 14px 0 6px 20px; border: 1px solid #A1B5B6; }
#conversation-start-input [type="submit"]                   { margin-right: 12px;}
#conversation-start-form                                    { margin-bottom: auto; }
#conversation-start-form textarea                           { min-height: 64px; height: auto; margin:0 0 5px 0; padding: 0 20px 0 0; }
#conversation-start-header 									                { margin-top: auto; margin-bottom: clamp(20px, 4vw, 40px); font-size: clamp(1.5rem, 4vw, 2.7rem); line-height: 1.2em; font-weight: 400; }
#conversation-start-toolbar                                 { color: var(--theme-text-color); margin-top: 5px; }
#conversation-quota .quota-label                            { background-color: transparent;}
#conversation-start-toolbar #history-conversation-button    { font-size: 12px; margin-top: 4px; margin-left: 8px; }
#conversation-start-toolbar #history-conversation-button i  { margin-right: 2px;}

#conversation-bottom                                        { position: fixed; left: var(--aside-nav-width); right: 0; bottom:0; padding: 28px 0; background: linear-gradient(180deg, rgba(231,237,237,0) 0%, rgba(231,237,237,1) 50%); }
#conversation-bottom-input                                  { position: relative; padding: 10px 16px 10px 24px; border-radius: 50px; border: 3px solid var(--softer-border-color); }
#conversation-bottom-input textarea                         { height: 22px; padding: 0; }
#conversation-bottom-input .loading-icon                    { position: absolute; height: 5px; left: 40px; top: 50%; transform: translate(-50%, -50%); gap:7px; visibility: hidden; opacity: 0; transition: visibility 0s .4s, opacity .4s; }
#conversation-bottom-input .loading-icon .dot               { width: 5px; height: 5px; border-radius: 50%; background-color: var(--soft-border-color); animation: bounce 1.2s infinite ease-in-out;}
#conversation-bottom-input .loading-icon .dot:nth-child(2)  { animation-delay: 0.2s; }
#conversation-bottom-input .loading-icon .dot:nth-child(3)  { animation-delay: 0.4s; }
#conversation-bottom-input.loading .loading-icon            { visibility: visible; opacity: 1; transition: visibility 0s, opacity .4s;}
#conversation-bottom-input.loading textarea                 { visibility: hidden;}
#conversation-warning                                       { font-size: .9em; text-align: center; color: var(--mid-text-color); margin-top: 6px;} 

#conversation-chain .conversation                           { gap: 10px 0px; padding: 30px 0 20px 0; border-bottom: 1px solid var(--light-border-color); position: relative; }
#conversation-chain .conversation .icon-circle              { width: 42px; height: 42px; line-height: 42px; margin-right: 25px; border-radius: 50%; background: #A4B9BA; font-size: 26px; text-align: center; color: white; margin-top: 0.2em; }
#conversation-chain .conversation .question                 { color: var(--theme-text-color); font-size: 1.3em; line-height: 1.5em; margin-bottom: 10px; }
#conversation-chain .conversation .answer                   { color: var(--mid-text-color); }
#conversation-chain .conversation .placeholder              { width: 100%; max-width: 400px; animation: opacity-flash 1.2s linear infinite; }
#conversation-chain .row-function                           { margin-top: 25px; grid-area: rowfunc; gap: 20px; visibility: hidden; opacity: 0; transition: visibility 0s .4s, opacity .4s; }
#conversation-chain .done .row-function                     { visibility: visible; opacity: 1; transition: visibility 0s, opacity .4s; }
#conversation-chain .row-function .btn                      { font-size: .96em; cursor: pointer; color: var(--mid-text-color); transition: color 0.2s; }
#conversation-chain .row-function .btn:hover                { color: var(--theme-text-color); }
#conversation-chain .row-function .btn i                    { margin-right: 3px;}
#conversation-chain .template                               { display: none !important; }

#conversation-faq                                           { margin: 50px 0;}
#conversation-faq .item                                     { border-bottom: 1px solid var(--light-border-color);}
#conversation-faq .header                                   { padding: 10px 0; color: var(--mid-text-color); cursor: pointer;}
#conversation-faq .header:hover .icon,
#conversation-faq .item.open .icon                          { background-color: var(--midtone-bg-color);}
#conversation-faq .item.open .handle                        { transform: rotate(45deg);}
#conversation-faq .icon                                     { margin-right: 20px; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; background-color: var(--light-bg-color); transition: all .2s;}
#conversation-faq .icon i                                   { color: #fff; margin: 0;}
#conversation-faq .title                                    { margin-right: auto; font-size: 1.05em; font-weight: 500; letter-spacing: .05em;}
#conversation-faq .handle                                   { margin-right: 20px; color: var(--mid-text-color); font-size: 12px; transition: all .4s;}
#conversation-faq .contents                                 { padding: 20px 20px 30px 60px; color: var(--theme-text-color); font-size: 1rem; line-height: 1.8em; }

/** instruction **/
#conversation-instruction                                   { padding: 80px 4%; font-size: 1rem; color: var(--theme-text-color); }


/** history.blade.php **/
#conversation-history-wrapper .history-right                                              { width: 270px; margin-left: 7%;}

/* Left block */
#conversation-history-wrapper header                                                      { margin-bottom: 40px; }
#conversation-history-wrapper header h2                                                   { font-size: 1.6em; letter-spacing: .1em; }
#conversation-history-wrapper header .buttons                                             { display: flex; }
#conversation-history-wrapper header .buttons button                                      { outline: none; margin-left: 6px; }
#conversation-history-wrapper #delete-selected                                            { max-width: 0; padding-left: 0; padding-right: 0; margin-left: 0; overflow: hidden; border-width: 0; transition: all .2s;}
#conversation-history-wrapper #delete-selected.show                                       { max-width: 200px; padding-left: 1.1em; padding-right: 1.1em; margin-left: 6px; border-width: 1px; }

#conversation-history-wrapper .history-record                                             { height: auto; min-height: 100px; padding: 22px 43px 22px 17px; border: 1px solid var(--mid2-border-color); border-radius: 10px; margin-bottom: 20px; transition: background .2s; }
#conversation-history-wrapper .history-record:hover                                       { background: #FFF; }
#conversation-history-wrapper .history-record input[type="checkbox"]                      { visibility: hidden; margin-right: 20px; }
#conversation-history-wrapper .history-record input[type="checkbox"]::after               { content: "\f0c8"; font: var(--fa-font-light); color: var(--light-text-color); font-size: 16px; visibility: visible;}
#conversation-history-wrapper .history-record input[type="checkbox"]:checked::after       { content: '\f14a'; font: var(--fa-font-solid); color: var(--theme-text-color); font-size: 16px; visibility: visible; }
#conversation-history-wrapper .history-record .date-box                                   { margin-right: 25px; border-radius: 6.4px; border: 1px solid var(--mid2-border-color); color: var(--mid2-border-color); width: 64px; height: 64px; }
#conversation-history-wrapper .history-record .date-box .day                              { font-size: 2em; }
#conversation-history-wrapper .history-record .date-box .month-year                       { font-size: .76em; white-space: nowrap; text-transform: uppercase; }
#conversation-history-wrapper .conversation-info                                          { width: 100%; border-left: 1px solid var(--mid2-border-color); padding-left: 24px; padding-bottom: 4px;}
#conversation-history-wrapper .conversation-info .category                                { width: fit-content; font-size: .86em; padding: 3px 6px; margin-bottom: 6px; border-radius: 5px; background: #A4B9BA; color: #003F40; white-space: nowrap; }
#conversation-history-wrapper .conversation-info .title                                   { margin-bottom: 10px; font-size: 1.2em; line-height: 1.3em; }
#conversation-history-wrapper .conversation-info .last-message-time                       { color: #808080; font-size: 0.9em; }

/* Right block */
#conversation-history-wrapper .history-right-toolbar                                      { margin-bottom: 40px; }
#conversation-history-wrapper .history-right .search-toggle                               { display: flex; justify-content: flex-end; align-items: center; }
#conversation-history-wrapper .search-toggle i                                            { width: 15px; flex-shrink: 0; fill: #003F40; }
#conversation-history-wrapper .search-bar-wrapper                                         { padding: 10px 2px; width: 0; opacity: 0; overflow: hidden; border-radius: 5px; border: 1px solid #A1B5B6; background: #FFF; transition: all 0.3s ease; }
#conversation-history-wrapper .search-bar-wrapper.active                                  { width: 100%; opacity: 1; padding: 10px 9px; }
#conversation-history-wrapper .search-bar-wrapper input[type="text"]                      { font-size: .9em; border: none; outline: none; width: 100%; color: #003F40; background: transparent; padding: 0 4px; box-shadow: none; transform: translateY(1px);}
#conversation-history-wrapper .search-bar-wrapper input[type="text"]::placeholder         { color: #BFBFBF; font-size: 15px; line-height: normal;}
#conversation-history-wrapper .search-bar-wrapper i                                       { font-size: 14px; color: var(--light-text-color); cursor: pointer; margin-left: 5px;}
#conversation-history-wrapper #search-toggle-icon                                         { font-size: 16px; color: #003F40; cursor: pointer; margin-left: 5px;}
#conversation-history-wrapper #mobile-open-filter-button,                                       
#conversation-history-wrapper #mobile-close-filter-button                                 { display: none;}

#conversation-history-wrapper .history-month-list .month-filter                           { border-bottom: 1px solid #809FA0; cursor: pointer; transition: background 0.2s ease; padding: 12px; }
#conversation-history-wrapper .history-month-list .month-filter:hover                     { background: rgba(164, 185, 186, 0.50);}
#conversation-history-wrapper .history-month-list .month-title                            { color: #003F40; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 1.92px;}
#conversation-history-wrapper .history-month-list .month-count                            { margin-left: 10px; padding: 4px 6px; border-radius: 4px; border: 1px solid var(--mid2-border-color); color: var(--mid2-text-color); font-size: 12px; white-space: nowrap;}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  40% {
    transform: scale(1.4);
    opacity: 1;
  }
}

@media (max-width: 1024px) {

  #conversation-history-wrapper .history-right                                            { width: 220px; margin-left: 4%;}
  #conversation-history-wrapper .history-month-list .month-filter                         { padding: 10px;}

  #conversation-bottom                                                                    { left: 0; padding-top: 15px; padding-bottom: 70px; transition: padding .4s; }
  #conversation-bottom-input                                                              { padding: 6px 10px 6px 18px; border-width: 2px; }
  #conversation-bottom-input .loading-icon                                                { height: 4px; left: 32px; gap:6px; }
  #conversation-bottom-input .loading-icon .dot                                           { width: 4px; height: 4px; }
  #conversation-warning                                                                   { font-size: .88em;}
  #conversation-chain                                                                     { margin-bottom: 64px; padding: 0 6px;}

  .headroom--unpinned #conversation-bottom                                                { padding-bottom: 20px; }

}

@media (max-width: 768px) {
  

  .conversation-input [type="submit"]                                     { font-size: 18px;}
  
  #conversation-start-input                                               { padding-left: 15px;}
  #conversation-start-input [type="submit"]                               { margin-right: 5px;}

  #recent-history-wrapper .header                                         { margin-bottom: 15px; font-size: .95em;}
  #recent-history-wrapper .history-records                                { gap:10px 40px;}  

  #conversation-toolbar a                                                 { margin-left: 6px;}
  #conversation-toolbar a i                                               { display: none;}

  #conversation-chain .conversation:nth-child(2)                          { padding-top: 0;}
  #conversation-chain .conversation .icon-circle                          { display: none;}

  #conversation-history-wrapper header                                    { margin-bottom: 20px;}
  #conversation-history-wrapper header h2                                 { font-size: 1.4em; letter-spacing: .04em;}
  #conversation-history-wrapper #mobile-open-filter-button,                                       
  #conversation-history-wrapper #mobile-close-filter-button               { display: block;}
  #conversation-history-wrapper #mobile-open-filter-button i              { color: #fff;}
  #conversation-history-wrapper #mobile-close-filter-button               { color: var(--theme-text-color); font-size: 18px; margin-left: 15px; }

  #conversation-history-wrapper .history-record                           { padding: 16px; margin-bottom: 14px;}
  #conversation-history-wrapper .history-record .date-box                 { display: none;}
  #conversation-history-wrapper .conversation-info                        { padding-left: 20px;}
  #conversation-history-wrapper .conversation-info .category              { margin-bottom: 4px;}
  #conversation-history-wrapper .conversation-info .title                 { margin-bottom: 8px; font-size: 1.1em;}

  #conversation-history-wrapper .history-right                            { transform: translateX(100%); z-index: 2000; position: fixed; left: 0; top:0; width: 100vw; height: 100vh; overflow-y: auto; margin: 0; padding: 15px 4%; background-color: #fff; transition: transform .4s;}
  body.show-filter #conversation-history-wrapper .history-right           { transform: translateX(0);}
  #conversation-history-wrapper .history-right-toolbar                    { margin-bottom: 15px;}
  #conversation-history-wrapper .search-bar-wrapper                       { border-radius: 3px;}

}

@media (max-width: 640px) {

  #conversation-presets-wrapper .grid                                     { grid-template-columns: 1fr; gap:10px 40px; } 
  #conversation-presets-wrapper .grid .grid-item                          { padding: 10px; border-radius: 8px;}
  #conversation-presets-wrapper .icon-square                              { width: 36px; height: 36px; line-height: 36px;}
  #conversation-presets-wrapper .icon-square i                            { font-size: 18px;}
  #conversation-presets-wrapper .icon-text-wrapper                        { gap: 10px;}
  #conversation-presets-wrapper .preset-text                              { font-size: .96em; }

  #recent-history-wrapper .record                                         { gap:10px; }
  #recent-history-wrapper .icon-circle                                    { width: 28px; height: 28px; line-height: 28px; }
  #recent-history-wrapper .icon-circle i                                  { font-size: 12px; }

  #conversation-faq                                                       { margin: 30px 0;}
  #conversation-faq .header                                               { padding: 8px 0; }
  #conversation-faq .icon                                                 { margin-right: 10px; width: 30px; height: 30px; line-height: 30px; }
  #conversation-faq .handle                                               { margin-right: 10px; }
  #conversation-faq .contents                                             { padding: 15px 0 20px 0; line-height: 1.7em; }

}

@media (max-width: 480px) {

  #conversation-history-wrapper #conversation-toolbar                     { justify-content: flex-start;}
  #conversation-history-wrapper #conversation-toolbar a                   { margin-left: 0;}
  #conversation-history-wrapper header .buttons                           { position: absolute; top: 28px; right: 0;}
  #conversation-history-wrapper header .buttons button                    { margin-left: 4px; }
  #conversation-history-wrapper header .buttons button:not(.button-sq) i  { display: none;}
  #conversation-history-wrapper #delete-selected.show                     { margin-left: 4px;}

  #conversation-history-wrapper .history-record                           { padding: 14px 10px; }
  #conversation-history-wrapper .history-record input[type="checkbox"]    { margin-right: 14px;}
  #conversation-history-wrapper .conversation-info                        { padding-left: 14px;}
}


/*
---------------------------------------------------------
08. /var/www/archidb/public/css/auth.css
---------------------------------------------------------
*/
#auth-toolbar						{ flex-shrink: 0;}
#auth-toolbar .label .name			{ margin-left: 12px; white-space: nowrap; font-size: .96em; line-height: 1.33em; }
#auth-toolbar .label img 			{ width: 40px; height: 40px; border-radius: 50%; flex-grow: 0; flex-shrink: 0; }
#auth-toolbar .menu > div 			{ padding: 0; border: 1px solid var(--light-border-color);}
#auth-toolbar .profile-info 		{ padding: 15px; border-bottom: 1px solid var(--light-border-color);}
#auth-toolbar .profile-info > a 	{ flex-grow: 0; flex-shrink: 0 }
#auth-toolbar .profile-info img 	{ margin-right: 10px;}
#auth-toolbar .profile-info .name 	{ margin:0 0 4px 0; font-weight: 500; font-size: 1.05em; color: var(--theme-text-color);}
#auth-toolbar .profile-info .email 	{ color: #888; font-size: .95em;}
#auth-toolbar ul					{ padding: 10px 0; }
#auth-toolbar ul li					{ margin: 0; }
#auth-toolbar ul li a 				{ display: block; padding: .7em 20px; transition: all .2s;}
#auth-toolbar ul li a:hover 		{ background-color: var(--light-bg-color); color: var(--theme-text-color); }
#auth-toolbar ul li i 				{ width: 16px;}

.auth-form 						{ background-color: #fff; border:1px solid #ddd; border-radius:5px; width:100%; max-width:420px; margin:60px auto; padding:35px 30px 30px 30px; }
.auth-form button 				{ width:100%; }
.auth-form .remember 			{ display:inline-block; margin-top:10px; }
.auth-form .top 				{ }
.auth-form .top p 				{ margin:20px 0; padding:.3em .6em; color:#666; font-size:.96em; line-height:1.25em; color: #ce3939; border: 1px solid #ce3939; background-color: #f7e7e7; }
.auth-form .bottom 				{ margin-top:30px; }
.auth-form .bottom p 			{ margin:15px 0; font-size: .92em; line-height:1.25em; color: #666; }
.auth-form .bottom .forget 		{}
.auth-form .bottom .register a 	{ text-decoration:underline; }
.auth-form .bottom .expired a 	{ text-decoration:underline; }
.auth-form hr 					{ margin:25px 0 20px 0; border: none; border-top: 1px solid #ddd;}

.verify-email 					{ padding:35px 0; }
.verify-email p 				{ margin:20px 0; line-height:1.25em; }
.verify-remind					{ border: 1px solid #ddd; padding:25px; margin-bottom: 30px;}
.verify-remind p				{ line-height: 1.5em; margin: 10px 0;}

.social-login					{ width:100%; max-width:360px; margin:30px auto; }
.social-login-button 			{ background:#000; color:#fff; padding:.8em 0 .9em 0; margin:8px 0; text-align:center; display:block; 
									border-radius:3px; }
.social-login-button i 			{ margin-right:8px; }
.social-login-button.facebook 	{ background:#3b5998; }
.social-login-button.google 	{ background:#dd4b39; }
.social-login-button.line 		{ background:#53b635; }

.profile-aside-wrapper			{ min-width: 300px; margin-right: 30px; }
.profile-aside					{ padding: 20px 0; border: 1px solid #ddd; padding: 20px 20px 0 20px; }
.profile-aside .info 			{ margin-bottom: 20px; }
.profile-aside .avatar 			{ color: #ccc; font-size: 54px;}
.profile-aside .name	 		{ margin-left:20px; flex-grow:1; font-size: 1.15em; }
.profile-aside ul				{ padding: 10px 0; border-top: 1px solid #ddd; }
.profile-aside li 				{ margin: 15px 0;}
.profile-aside li.active 		{ text-decoration: underline;}

.profile-aside-wrapper + div			{ max-width: none; flex-grow: 1; }
.profile-aside-wrapper + div button		{ max-width: 80px;}							

/* for 1024px or less */
@media screen and (max-width: 1024px) {
	
#auth-toolbar .label img			{ width: 30px; height: 30px;}

.profile-aside-wrapper				{ display: none;}

.auth-form 							{ margin:40px auto; padding:30px 30px 20px 30px; }

}


/* for 640px or less */
@media screen and (max-width: 640px) {

#auth-toolbar .label .name			{ display: none;}
.auth-form 							{ /*max-width: none;*/ padding:30px 25px 20px 25px;}	
.social-login						{ /*max-width: none;*/ }	
.verify-remind						{ padding:10px 4% 25px 4%; margin-bottom: 20px; }

}