@charset "utf-8";

/*
========================
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; 
}


/*
========================
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; }
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.flex .label 				{ margin-right: 30px;}
form .col							{ width:48.5%; flex-grow: 0; flex-shrink: 0; }
form .col:first-child				{ margin-right: 3%;}
form .label							{ margin-bottom:10px; }
form .value 						{ color: #888;}
form .option-label					{ margin-right: 10px;}
form .option-label input			{ margin-right: 5px;}
form input[type="text"],
form input[type="date"],
form input[type="email"],
form input[type="number"],
form input[type="tel"],
form input[type="password"],
form textarea,
form select							{ width:100%; height: 42px; padding:.6em 1em; background:#f7f7f7; border:1px solid #d2d2d2; border-radius:4px; font-family:inherit; outline:none; -webkit-appearance: none; -moz-appearance: none; }
form textarea						{ height:120px; }
form select							{ padding:5px; }
form button							{ font-family:inherit; outline:none; }
form button[type="submit"] 			{ display: inline-block; }
form .error							{ display:block; text-align:right; margin-top:5px; color:#d54449; font-size:.86em; line-height:1.25em; }
form .success						{ display:block; text-align:left; margin-top:5px; color:#A4B9BA; 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::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: .7; }
form .option-rows 							{ display: flex; flex-wrap: wrap;}
form .option-rows .option-row				{ margin-right: 30px;}
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;}
.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; }
.custom-scrollbar::-webkit-scrollbar-track 			{ background: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb 			{ background: var(--scrollbar-thumb); 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:10px; }
.fr-view ul li 													{ list-style:inherit; margin-left: 20px;}
.fr-view ol														{ list-style:decimal; padding-left:10px;}
.fr-view ol li 													{ list-style:inherit; margin-left: 20px;}

.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-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 a > img						{ cursor:pointer !important; }
.fr-view p 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-family: "Font Awesome 5 Pro"; 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 sup 							{ line-height:0; }
.fr-view blockquote						{ border-left:4px solid var(--theme-color); background:#f5f5f5; color:#555; 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-family: "Font Awesome 5 Pro"; margin-right: 5px; }
.fr-view .fr-class-emphasized,					
.fr-view .fr-class-highlighted			{ color: #E25041; background: none;}
.fr-popup								{ z-index: 999999999 !important;}

.fr-view .fr-img-caption .fr-img-wrap>span						{ line-height: 1.2em; text-align: left; }
.fr-view .fr-img-caption .fr-img-wrap>span:not(:focus)		 	{ max-height: 4em; overflow: hidden; position: relative; }
.fr-view .fr-img-caption .fr-img-wrap>span:not(:focus)::after 	{ content: ''; position: absolute !important; left: 0; bottom:0; right: 0; height: 1em; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}

/** fr-editor **/
.fr-box.fr-basic .fr-wrapper 										{ border-color: #dfdfdf;}
.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;}
.fr-second-toolbar 													{ border-radius:0 0 4px 4px !important; border-color: #dfdfdf;}
.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;}

/** Select2 **/
.select2-container 																				{ width: 100% !important; /*max-width: 600px;*/ }
.select2-container--default .select2-selection--single 											{ height: 44px; border: 1px solid #d2d2d2; outline: none;}
.select2-container--default .select2-selection--single .select2-selection__rendered 			{ line-height: 44px; padding-left: 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow 				{ height: 44px; width: 44px; }
.select2-container--default .select2-selection--single .select2-selection__clear				{ font-size: 12px; color: #222; height: 44px; margin-right: 36px;}
.select2-container--default .select2-selection--multiple .select2-selection__choice				{ padding: 7px 0 8px 30px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove 	{ height: 30px; width: 30px; min-width: 0 !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__display	{ padding: 0 10px; color: #222; }
.select2-container--default .select2-selection--multiple										{ min-height: 44px;border: 1px solid #d2d2d2;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #f7f7f7; color: #222;}
.select2-container--default .select2-results__option--disabled									{ font-weight: 500; color: #222; }
.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; }
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover 	{ background: var(--scrollbar-thumb) !important; }
.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__group																			{ padding: .9em 15px !important; color: #888; }
.select2-results__option 																		{ white-space: nowrap;  color: #222; padding: .9em 15px; }
  

/** 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-no-shrink							{ flex-shrink: 0;}
.flex-no-grow							{ flex-grow: 0;}
.flex-shrink							{ flex-shrink: 1;}
.flex-grow								{ flex-grow: 1;}

/** Column layout **/
.column-2 							    { display:flex; flex-wrap:wrap; }
.column-2 .col-item 				    { width:49%; margin-top:2%; margin-right: 2%; }
.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:23.5%; margin-right:2%; 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 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; }

/** Play button **/
.play-button							{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block; width:60px; height:60px; background:#fff; border-radius:50%; opacity:.85; transition:opacity .4s; cursor: pointer; z-index: 1; }
.play-button:after						{ content:''; position:absolute; left:50%; top:50%; transform:translate(-20%, -50%); border-left:12px solid #000; border-right:12px solid transparent; border-top:7px solid transparent; border-bottom:7px solid transparent;  }											
.play-button:hover						{ opacity:1; }

/** 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:8px; font-size:1.4em; }	
.button-sq								{ width: 38px; padding: 0; line-height: 38px;}						
.button i			   		  			{ margin-right:.5em; }							
.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-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-light i 						{ color: inherit;}
.button-soft 							{ border: 1px solid var(--light-bg-color); background-color: #fff; color: var(--theme-text-color); border-radius: 4px; box-shadow: 3px 3px 10px rgba(0,63,64,.12); 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.full,
.button-md.full,
.button-lg.full							{ width: 100%;}
.button.warning 						{ background-color: #e74c3c;}


/** 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-family: "Font Awesome 5 Pro"; font-size: 12px; margin-left: 8px; }

/** 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-grow:1; align-items: center; margin-bottom: 15px; }
.breadcrumbs .item						{ white-space:nowrap; color: #666; }
.breadcrumbs .item:after				{ content: "|"; margin:0 .7em 0 .5em; font-size:.86em; }
.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; }
.pagination a,
.pagination span 						{ padding:4px 9px; display:inline-block; line-height:normal; color:#999; }
.pagination a:hover 					{ color:#000;}
.pagination .active	span				{ color:#000; }
.pagination .prev						{ font-size:1.2em; transform:translateY(-3px); }
.pagination .next						{ font-size:1.2em; transform:translateY(-3px); }
.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;}

/** Sortable table **/
.tablesorter-header													{ cursor: pointer; }
.tablesorter-header-inner											{ position: relative; }
.tablesorter-header-inner::after 									{ font-family: "Font Awesome 5 Pro"; 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;}
.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; }
.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-box									{ max-width: 540px;}
.jconfirm.dialog-tiny .jconfirm-box				{ max-width: 360px;}
.jconfirm.dialog-small .jconfirm-box			{ max-width: 400px;}
.jconfirm.dialog-medium .jconfirm-box			{ max-width: 450px;}
.jconfirm.dialog-large .jconfirm-box			{ max-width: 1000px;}
.jconfirm.dialog-large .jconfirm-box			{ padding-right: 4px;}
.jconfirm.dialog-large .jconfirm-content-pane	{ padding-right: 10px;}
.jconfirm.dialog-center-title .jconfirm-box .jconfirm-title-c { text-align: center; }
.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; color: var(--theme-text-color);}
.jconfirm .jconfirm-box div.jconfirm-closeIcon	{ font-size: 16px !important; font-weight: 500;}
.jconfirm .jconfirm-content-pane::-webkit-scrollbar-track 			{ background: var(--scrollbar-track) !important; }
.jconfirm .jconfirm-content-pane::-webkit-scrollbar-thumb 			{ background: var(--scrollbar-thumb) !important; }
.jconfirm .jconfirm-content-pane::-webkit-scrollbar-thumb:hover 	{ background: var(--scrollbar-thumb) !important; }

/** 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; }

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

/** Highlight **/
.highlight,
.highlight-anchor 								{ animation: highlight 1s 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-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-md											{ box-shadow: 0 4px 10px rgba(0,63,64,.15);} 
.box-shadow-lg											{ box-shadow: 0 0 15px rgba(0,63,64,.15);} 
.box-shadow-soft 										{ box-shadow: 3px 3px 10px rgba(0,63,64,.12); }

.box-round 												{ border-radius: 4px; overflow: hidden;}
.box-round-md 											{ border-radius: 8px; overflow: hidden;}
.box-round-lg 											{ border-radius: 15px; overflow: hidden;}
.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;}

.box-border												{ border: 1px solid var(--light-border-color);} 

/** 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 .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: 30px; 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; }


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

@keyframes highlight{
	0%		{ background-color: transparent;}
	100%	{ background-color: rgb(255, 249, 227);}
}

@keyframes rotation {
	from 	{ transform:translate(-50%, -50%) rotate(0deg); }
	to 		{ transform:translate(-50%, -50%) rotate(359deg); }
}

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

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

}

/*
-----------------------------
For 920px or less
-----------------------------
*/
@media screen and (max-width: 920px) {
	
	/** 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; }
	
}

/*
-----------------------------
For 768px or less
-----------------------------
*/
@media screen and (max-width: 768px) {
	
	/** 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; }

}

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

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

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

	/** Column layout **/
	.column-4 .col-item                 	 	{ width:49%; margin-right:2%; 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: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; }
	
}