@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-af57e642.css
---------------------------------------------------------
00. /var/www/archibm/public/css/reset.css
01. /var/www/archibm/public/css/common.css
02. /var/www/archibm/public/css/app.css
03. /var/www/archibm/public/css/app.rwd.css
04. /var/www/archibm/public/css/application.css
05. /var/www/archibm/public/css/subscription.css
06. /var/www/archibm/public/css/newsletter.css
07. /var/www/archibm/public/css/auth.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/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/archibm/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,
article h2,
article h3,
article h4,
article h5 							{ font-weight: 500; letter-spacing: .07em; line-height: 1.25em; }
article h1 							{ font-size: 2rem; margin: .5em 0; }
article h2                         	{ font-size: 1.72rem; margin: .5em 0; }
article h3                         	{ font-size: 1.45rem; margin: .5em 0; }
article h4                         	{ font-size: 1.25rem; margin: .5em 0; }
article h5                         	{ font-size: 1.12rem; margin: .5em 0; }
article hr 							{ margin: 25px 0;  }
article .fr-view 					{ color: #444; text-align: justify;}

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 .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 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: 7px; height: 7px; }
.custom-scrollbar::-webkit-scrollbar-track 						{ background: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb 						{ background: var(--scrollbar-thumb); min-height: 80px; border-radius: 7px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover 				{ background: var(--scrollbar-thumb); }
 
/** fr-view **/
.fr-view														{ font-size: 1rem; line-height:1.7em; }
.fr-view h1,
.fr-view h2,
.fr-view h3,
.fr-view h4,
.fr-view h5 													{ font-weight: 500; letter-spacing: .07em; line-height: 1.25em; }
.fr-view h1 													{ font-size: 2rem; margin: .5em 0; }
.fr-view h2                         							{ font-size: 1.72rem; margin: .5em 0; }
.fr-view h3                         							{ font-size: 1.45rem; margin: .5em 0; }
.fr-view h4                         							{ font-size: 1.25rem; margin: .5em 0; }
.fr-view h5                         							{ font-size: 1.12rem; margin: .5em 0; }

.fr-view h1.fr_header_border_bottom,
.fr-view h2.fr_header_border_bottom,
.fr-view h3.fr_header_border_bottom,
.fr-view h4.fr_header_border_bottom,
.fr-view h5.fr_header_border_bottom 							{ border-bottom: 1px solid var(--light-border-color);}
.fr-view h1.fr_header_border_bottom								{ padding-bottom: .7em; margin-bottom: .7em;}
.fr-view h2.fr_header_border_bottom								{ padding-bottom: .65em; margin-bottom: .65em;}
.fr-view h3.fr_header_border_bottom								{ padding-bottom: .6em; margin-bottom: .6em;}
.fr-view h4.fr_header_border_bottom								{ padding-bottom: .5em; margin-bottom: .5em;}
.fr-view h5.fr_header_border_bottom								{ padding-bottom: .35em; margin-bottom: .35em;}

.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:not(.fr-image-icon)		{ /*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"]:not()::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-video.fr-dvb 				{ }
.fr-view .fr-video.fr-rv				{ padding-top: 0; overflow: visible;}
.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: 10px;}

.fr-view .paragraph-sequence										{ border-left: 1px solid var(--light-border-color);  margin-left: 20px; counter-reset: sequence-counter;}
.fr-view .paragraph-sequence-item									{ display: flex; align-items: flex-start; margin: 30px 0; padding-left: 40px; position: relative; }
.fr-view .paragraph-sequence-item .col:nth-child(1)					{ width: 30%; min-width: 200px; margin-right: 12%; flex-grow: 0; flex-shrink: 1;}
.fr-view .paragraph-sequence-item .col:nth-child(2)					{ flex-grow: 1;}
.fr-view .paragraph-sequence-item::before 							{ counter-increment: sequence-counter; content: counter(sequence-counter); position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 28px; transform: translateX(-50%); text-align: center; border-radius: 50%; background-color: var(--softer-bg-color); color:var(--theme-text-color); }
.fr-view .paragraph-sequence-item img 								{ border-radius: 10px;}
.fr-view .paragraph-sequence-title									{ font-size: 1.2em; font-weight: 500; color: var(--theme-text-color); margin-bottom: 5px; }

.fr-view .paragraph-tabs .tabs										{ border-bottom: 1px solid var(--light-border-color);}
.fr-view .paragraph-tabs .tabs .tab 								{ font-size: 1.05em; padding: .7em 0; min-width: 120px; margin-right: 15px; color: var(--theme-text-color) !important; box-shadow: none !important; background: none !important; border-radius: 0 !important;}
.fr-view .paragraph-tabs .tabs .tab.active::after					{ bottom: -1px; height: 1px; background-color: var(--mid-border-color); }
.fr-view .paragraph-tab-title										{ font-size: 1.2em; font-weight: 500; color: var(--theme-text-color); margin-bottom: 5px; }
.fr-view .paragraph-tabs .tab-body .set.active						{ box-shadow: none; border-radius: 0; padding: 40px 0;}

.fr-view .fr-step-seperator 										{ margin: 0 .6em; color: var(--mid-text-color);} 

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

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

/** 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-bottom  				  	 		{ display:flex; align-items:flex-end; }
.flex-stretch 				  	 		{ display:flex; align-items:stretch; }
.flex-justify 				  	 		{ display:flex; justify-content:space-between; }
.flex-around 				  	 		{ display:flex; justify-content:space-around; }
.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;}
.flex-not-grow-shrink 					{ flex-shrink: 0; flex-grow: 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:30%; margin-right:5%; 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-button-color); color:#fff; border:none; text-align: center; text-decoration: none !important; }
.button									{ height: 38px; line-height: 36px; border-radius:4px; font-size:1em; border: 1px solid var(--theme-button-color);}
.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 2.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; border-radius:4px; }
.button-ft								{ height: 34px; line-height: 32px; letter-spacing: .06em; border-radius:4px; font-size:1em; }
.button-ft.button-sq 					{ width: 34px;}
.button i			   		  			{ margin-right:.5em; }							
.button-sq i			   		  		{ margin-right:0; font-size: 18px; color:var(--light-text-color); }
.button-ft i 							{ transform: scale(.8, .8); margin-right: 5px; }
.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:hover							{ border: 1px solid var(--dark-button-color); color: #fff; background-color: var(--dark-button-color);}	
.button-white 							{ background-color: #fff; color: var(--light-text-color); border: 1px solid var(--mid-border-color);}
.button-white:hover,
.button-white.active		 			{ background-color: var(--midtone-bg-color); color: #fff;}
.button-white i 						{ color: var(--light-text-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-soft 							{ border: none; background-color: #fff; color: var(--light-text-color); border-radius: 4px; box-shadow: 2px 2px 6px #7a73ff26; transition: all .2s;}
.button-soft i 							{ color: var(--light-text-color); }
.button-soft:hover 						{ border: none; 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;}

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

/** 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: 20px; }
.breadcrumbs .item						{ white-space:nowrap; color: var(--theme-text-color); 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; }
.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; }

/** Expandable **/
.expandable												{ border-top: 1px solid var(--gray-border-color); transition: opacity .4s; }
.expandable:last-child									{ border-bottom: 1px solid var(--gray-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-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.sortable .buttons .sort-handle 	 			{ width: 10px; }

.expandable.show .expandable-title .expandable-handle i	{ transform: translate(-50%, -50%) rotate(90deg);}
.expandable.show .expandable-body 						{ display: block;}
.expandable.show .expandable-handle i					{ transform: rotate(180deg);}

.expandable-group 										{ margin: 30px 0; overflow: hidden;}
.expandable-group .expandable							{ border-top: 1px solid var(--gray-border-color); }
.expandable-group .expandable:first-child				{ border-top: none;}
.expandable-group .expandable-title 					{ transition: all .2s;}
.expandable-group .expandable-title h2					{ font-weight: 500; font-size: 1.05em; color: var(--sharp-text-color); }
.expandable-group .expandable-handle i					{ transform: translate(-50%, -50%) rotate(0deg);}
.expandable-group .expandable-body .fr-view 			{ margin: 20px 5%;}

.expandable-group .expandable.show .expandable-handle i	{ transform: translate(-50%, -50%) rotate(90deg); color: var(--mid-text-color); }
.expandable-group .expandable.show .expandable-title 	{ border-bottom: 1px solid var(--gray-border-color); background-color: var(--softer-bg-color);}

.expandable-group.box-border .expandable:last-child,
.expandable-group.box-border-gray .expandable:last-child { border-bottom: none;}

/** Style box **/
.box-shadow												{ box-shadow: 0 0 2px #7a73ff26;} 
.box-shadow-sm											{ box-shadow: 0 2px 6px #7a73ff26;} 
.box-shadow-md											{ box-shadow: 0 4px 10px #7a73ff26;} 
.box-shadow-lg											{ box-shadow: 0 0 15px #7a73ff26;} 
.box-shadow-soft 										{ box-shadow: 3px 3px 10px #7A73FF33; }
.box-shadow-gray 										{ box-shadow: 2px 2px 6px #0000000D; }
.box-round 												{ border-radius: 4px;}
.box-round-md 											{ border-radius: 8px;}
.box-round-lg 											{ border-radius: 15px;}
.box-round-xl 											{ border-radius: 25px;}
.box-border 											{ border: 1px solid var(--theme-border-color); }
.box-border-light 										{ border: 1px solid var(--light-border-color); }
.box-border-mid 										{ border: 1px solid var(--mid-border-color); }
.box-border-gray 										{ border: 1px solid var(--gray-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;}

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


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

.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;}
}

/*
---------------------------------------------------------
02. /var/www/archibm/public/css/app.css
---------------------------------------------------------
*/


/*
========================
Variable
========================
*/
:root {

	--color-theme-100: #F2F1FF;
	--color-theme-200: #E4E3FF;
	--color-theme-300: #CAC7FF;
	--color-theme-400: #AAA5FF;
	--color-theme-500: #958FFF;
	--color-theme-600: #7872E0;
	--color-theme-700: #4C4894;
	--color-theme-800: #35326F;
	--color-orange-100: #FFF2EF;
	--color-orange-200: #FFE5DE;
	--color-orange-300: #FFCBBE;
	--color-orange-400: #FF987D;
	--color-orange-500: #FF7E5C;
	--color-black-50: #C8C8C8;
	--color-black-100: #666666;
	--color-black-200: #575757;
	--color-black-300: #555555;
	--color-black-400: #595959;
	--color-black-500: #222222;

	--color-theme-transparent-100: #F2F1FF00;
	--color-theme-transparent-200: #E4E3FF00;
	--color-theme-transparent-300: #CAC7FF00;
	--color-theme-transparent-400: #AAA5FF00;
	--color-orange-transparent-400: #FF987D44;

	--softer-border-color: var(--color-theme-100);
	--soft-border-color: var(--color-theme-200);
	--lighter-border-color: var(--color-theme-200);
	--light-border-color: var(--color-theme-300);
	--mid2-border-color: var(--color-theme-400);
	--mid-border-color: var(--color-theme-500);
	--theme-border-color: var(--color-theme-600);
	--gray-border-color: var(--color-black-50);
	--highlight-border-color: var(--color-theme-500);

	--default-light-text-color: var(--color-black-400);
	--default-text-color: var(--color-black-500);
	--sharp-text-color: var(--color-black-500);
	--default-title-color: var(--color-black-500);
	--light-title-color: var(--color-black-50);
	--theme-title-color: var(--color-theme-600);
	--dark-title-color: var(--color-theme-600);
	--secondary-light-title-color: var(--color-orange-400);
	--secondary-title-color: var(--color-orange-500);
	--secondary-text-color: var(--color-orange-500);

	--lighter-text-color: var(--color-theme-300);
	--light-text-color: var(--color-theme-400);
	--mid-text-color: var(--color-theme-500);
	--theme-text-color: var(--color-theme-600);
	--dark-text-color: var(--color-theme-700);

	--softer-bg-color: var(--color-theme-100);
	--soft-bg-color: var(--color-theme-200);
	--light-bg-color: var(--color-theme-300);
	--midtone2-bg-color: var(--color-theme-400);
	--midtone-bg-color: var(--color-theme-500);
	--theme-bg-color: var(--color-theme-600);
	--gradient-reversed-lighter-bg-color: linear-gradient(180deg, var(--color-theme-transparent-100) 50%, var(--color-theme-100) 100%);
	--gradient-lighter-bg-color: linear-gradient(180deg, var(--color-theme-100) 0%, var(--color-theme-transparent-100) 100%);
	--gradient-light-bg-color: linear-gradient(180deg, var(--color-theme-200) 0%, var(--color-theme-transparent-200) 100%);
	--gradient-bg-color: linear-gradient(180deg, var(--color-theme-400) 0%, var(--color-theme-transparent-400) 100%);

	--scrollbar-track: var(--color-theme-200);
	--scrollbar-thumb: var(--color-theme-400);
	--tooltipster-scrollbar-track: #ffffff;
	--tooltipster-scrollbar-thumb: var(--color-theme-400);

	--gray-button-color: var(--color-black-50);
	--light-button-color: var(--color-theme-300);
	--midtone-button-color: var(--color-theme-400);
	--midtone2-button-color: var(--color-theme-600);
	--theme-button-color: var(--color-theme-600);
	--dark-button-color: var(--color-theme-600);
	
	--secondary-button-color: var(--color-orange-400);
	--secondary-dark-button-color: var(--color-orange-500);

	--play-button-bg: #ffffff;
	--play-button-text: var(--color-theme-600);
	--play-button-size: 60px;

	--header-wrapper-height: 100px;
	--header-bar-top: 48px;
	--header-bar-height: 48px;
	
	--page-header-padding: 90px;
	--page-header-fontsize: 2.6em;

}

/*
========================
Elements
========================
*/
html { scroll-behavior: smooth; overflow-x: hidden; background: url(../image/assets/grid-bg.png) repeat-x 0 0; background-size: 115px; }
html, body { color: var(--default-text-color);}

/** Header **/
h1, h2, h3, h4, h5, h6 						{ color: var(--default-title-color); font-weight: 700;}
h1 											{ font-size: 2em; }
h2 											{ font-size: 2.7em; line-height: 1.2em; }
h3 											{ font-size: 1.4em; }
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--selected 									{ background-color: var(--softer-bg-color) !important; color: var(--theme-text-color) !important;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color:#f7f7f7; color: var(--default-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(--default-text-color); padding: .7em 15px; }
.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(--light-border-color); border-top:1px solid var(--light-border-color);}
.fr-view table:not(.law-table) th 						{ padding:6px 14px; border: none; border-right:1px solid #fff; border-bottom:1px solid var(--light-border-color);}
.fr-view table:not(.law-table) td 						{ padding:12px 14px; border: none; border-right:1px solid var(--light-border-color); border-bottom:1px solid var(--light-border-color);}
.fr-view table:not(.law-table) th						{ background-color: var(--midtone2-bg-color) !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;}

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

/** Tooltipster window **/
.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); }


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

/** Content box **/
.box-header                                             { padding: 18px 3%; border-bottom: 1px solid var(--mid-border-color); }   
.box-content                                            { padding: 30px 3%; min-height: 280px;}

/** Expandable **/
.expandable-title										{ color: var(--gray-text-color); padding: 12px 3px; cursor: pointer; transition: all .2s; }
.expandable-title .no 									{ flex-shrink: 0; flex-grow: 0; margin-right: 20px; width: 34px; height: 34px; line-height: 32px; text-align: center; border-radius: 50%; color: var(--theme-text-color); border: 1px solid var(--theme-border-color); background-color: #fff; transition: all .2s; }
.expandable-title .text 								{ margin-right: auto; font-size: 1.2em; line-height: 1.3em; letter-spacing: .06em; color: var(--default-title-color); }
.expandable-title .expandable-handle 					{ color: var(--gray-button-color); }
.expandable-body .text 									{ margin: 0 4.5%;}
.expandable-body .fr-view 								{ font-size: 1rem; }
.expandable.show .expandable-title .no					{ background-color: var(--theme-bg-color); color: #fff; }
.expandable.show .expandable-handle						{ color: var(--theme-button-color); }

.expandable.box-round-xl 								{ border: 1px solid var(--theme-border-color); padding: 0 15px; margin-bottom: 15px; overflow: hidden;}
.expandable.box-round-xl .expandable-title				{ padding: 8px 3px; background-color: #fff; }
.expandable.box-round-xl .expandable-body .text 		{ margin: 0 5%;}

/** Tab Expandable Articles **/
.tab-expandable-articles 								{ overflow: hidden;}
.tab-expandable-articles .tabs  						{ background-color: var(--softer-bg-color); border-bottom: 1px solid var(--gray-border-color); gap: 4%; padding: 0 4%; }
.tab-expandable-articles .tabs .tab 					{ background:none !important; box-shadow: none !important; padding: 1.1em 1em; border-bottom: 2px solid transparent; font-size: 1.02rem;}
.tab-expandable-articles .tabs .tab.active 				{ color: var(--theme-text-color); border-bottom: 2px solid var(--theme-border-color) !important; }
.tab-expandable-articles .tabs .tab.active::after		{ display: none;}
.tab-expandable-articles .tab-body .set 				{ box-shadow: none !important; padding: 20px 4% 40px 4%; }
.tab-expandable-articles .tab-body h2 					{ font-size: 1.15rem; font-weight: 400;}
.tab-expandable-articles .tab-body .expandable:first-child	{ border-top: none;}
.tab-expandable-articles .tab-body .expandable-body		{ padding: 0 20px 20px 20px; }

/** Button **/
.button,
.button-md,
.button-lg									{ border-radius: 50px;}
.button-sq 									{ border-radius: 6px; width: 34px; height: 34px; line-height: 34px;}
.button-sq i 								{ font-size: 16px; color: inherit;}
.button:hover 								{ background-color: var(--midtone2-button-color);}
.button-outline 							{ background-color: #fff; border: 1px solid var(--theme-button-color); color: var(--theme-button-color); }
.button-outline:hover,
.button-outline.active 						{ background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color); color: #fff;}
.button-two-tone 							{ background-color: transparent; border: 1px solid var(--gray-button-color); color: var(--gray-button-color);}
.button-two-tone:hover 						{ background-color: #fff; border: 1px solid var(--theme-button-color); color: var(--theme-button-color);}
.button-light 								{ background-color: var(--softer-bg-color); color: var(--theme-button-color); border: 1px none;}
.button-light:hover 						{ background-color: var(--soft-bg-color); color: var(--theme-button-color); border: 1px none; box-shadow: none; }
.button-soft:hover 							{ background-color: var(--soft-bg-color); }
.button-midtone 							{ background-color: var(--midtone-button-color); color: #fff;}
.button-midtone:hover 						{ background-color: var(--theme-button-color); border: 1px solid var(--theme-button-color);}
.button-secondary 							{ background-color: var(--secondary-button-color); border: 1px solid var(--secondary-button-color);}
.button-secondary:hover 					{ background-color: var(--secondary-dark-button-color); border: 1px solid var(--secondary-dark-button-color);}
.button-secondary-outline 					{ background-color: #fff; border: 1px solid var(--secondary-button-color); color: var(--secondary-button-color); }
.button-secondary-outline:hover 			{ background-color: #fff; border: 1px solid var(--secondary-dark-button-color); color: var(--secondary-dark-button-color);}
.button-secondary-soft 						{ background-color: #fff; border: 1px solid #fff; color: var(--secondary-button-color); box-shadow: 2px 2px 4px var(--color-orange-transparent-400);}
.button-secondary-soft:hover 				{ background-color: #fff; border: 1px solid var(--secondary-button-color); color: var(--secondary-button-color); }


/** Tab **/
.tab-buttons								{ justify-content: center; margin-bottom: 60px; gap: 10px;}
.tab-buttons li a							{ font-size: 1.1em; border-radius: 50px; padding: 0 3em; min-width:200px; }
.tab-buttons-dropdown 						{ display: none;}

/** Article **/
.page-article 								{ max-width: 920px; margin: 0 auto 40px auto; padding: 80px 6%;}
.page-article h1 							{ font-size: 1.8em; letter-spacing: .04em; margin-bottom: 1em;}

/** Section **/
.page-section-header 						{ padding: clamp(80px, 25vh, 180px) 0 40px 0; }
.page-section-header h2                    	{ line-height: 1.2em;}
.page-section-header .summary              	{ margin: 15px 0 40px 0; font-size: 1.15em; line-height: 1.33em; }
.page-section-header .buttons              	{ margin-bottom: 30px;}
.page-section-header .buttons .button      	{ margin: 0 5px; min-width: 160px;}

/** Faq Section **/
.faq-section                     { margin-top: 70px; }
.faq-section .inner              { max-width: 1200px; margin: auto; }
.faq-section h3                  { margin-bottom: 30px; font-weight: 500; font-size: 1.6em; color: var(--theme-title-color);}

.faq-expandable .expandable.show .expandable-title .expandable-handle i	{ transform: translate(-50%, -50%) rotate(45deg);}

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

#container								{ }
.inner									{ width: 92%; max-width: 1440px; margin:auto; }
.inner-lg								{ width: 92%; max-width: 1350px; margin:auto; }
.inner-md								{ width: 92%; max-width: 1150px; margin:auto; }
.inner-sm								{ width: 92%; max-width: 960px; margin:auto; }
.inner-wd								{ width: 92%; max-width: 1500px; margin:auto; }


/*
========================
Header
========================
*/
#header-wrapper							{ width: 100%; height: var(--header-wrapper-height); }
#header-wrapper h2 						{ font-size: 2.2em; font-weight: 500; letter-spacing: .04em; }
#header-inner							{ z-index: 1000; position: fixed; left: 50%; top: var(--header-bar-top); height: var(--header-bar-height); padding:0 9px 0 4%; transform: translateX(-50%); border: 1px solid var(--theme-border-color); border-radius: 50px; color: var(--default-text-color); }
#header-inner h1						{ width: 95px; flex-grow:0; flex-shrink: 0; }
#header-inner h1 a						{ display: block; width: 100%; height: 0; padding-top:22.32%; background: url(../image/logos/bimteki.svg) no-repeat 50% 50%; background-size: contain; text-indent: -999px; overflow: hidden;}	
#header-nav								{ margin-right: 60px; margin-left: auto; }
.not-login #header-nav 					{ margin-right: 30px;}
#header-nav > ul >li					{ margin-left: 50px;}
#header-nav > ul >li:first-child		{ margin-left: 0;}
#header-nav > ul >li > a 				{ font-size: 1.02em; letter-spacing: .05em;}
#header-nav > ul >li.active > a 		{ color: var(--theme-text-color);}
#header-nav i 							{ margin-right: 10px; width: 14px; height: 14px; }
#header-nav a:hover 					{ color:var(--theme-text-color); }
#header-nav > ul >li.dropdown .menu		{ left: 50%; transform: translateX(-50%); padding-top: 22px; }
#header-nav > ul >li.dropdown .menu > *	{ padding:4px 25px; min-width: 120px; width: fit-content; }
#header-nav > ul >li.dropdown .menu a:hover,
#header-nav > ul >li.dropdown .menu .active a { color:var(--theme-text-color); }
#header-nav > ul >li.dropdown .menu li  { margin:16px 0; }
#header-icons  							{ margin-right: 15px;  }
#header-icons li 						{ margin-left: 15px; 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:hover,
#header-icons .label:hover 				{ color:var(--theme-text-color); }

#header-trial-button 					{ margin-left: 40px; }


.headroom #header-inner					{ transition: all .5s; }
.headroom--pinned #header-inner   		{ background-color: rgba(255,255,255,1); }
.headroom--unpinned #header-inner		{ transform: translate(-50%, -100px); }
.headroom--not-top #header-inner		{ backdrop-filter: blur(6px); background-color: rgba(255,255,255,.7);  }

#site-switch-wrapper #site-switch-menu 	{ padding-top: 20px !important; right: -80px !important; }
#site-switch-wrapper #site-switch-menu ul { border: 1px solid var(--theme-border-color) !important;}
#notification-box 						{ top: 55px !important; right: 4% !important; border: 1px solid var(--theme-border-color) !important; }

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

#nav-inner									{ width: 95%; height: 100%; padding-bottom: 30px; }
#nav-inner ul li a 							{ opacity: .8; transition: all .2s;}
#nav-inner ul li a:hover 					{ opacity: 1; }
#nav-inner ul li.active a					{ }

#nav-inner .dropdown .label 				{ width: auto; display: inline-block;}
#nav-inner .dropdown .menu					{ position: static;}
#nav-inner .dropdown .menu ul 				{ border: none; padding: 0; border-radius: 0; box-shadow:none; background: none; text-align: left;}
#nav-inner .dropdown .menu li 				{ margin: 1.5rem 0 1rem 1rem; font-size: 1.02rem; color: var(--default-text-color);}
#nav-inner .nav-links 						{ margin: auto 12%; padding-top: 20px; }
#nav-inner .nav-links li					{ margin: 2em 0; font-size: 1.15rem;  }
#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%; padding-bottom: 30px; }
#nav-inner .social-links > .flex 			{ justify-content: flex-start; }
#nav-inner .social-links ul 				{ justify-content: center;}
#nav-inner .social-links li 				{ margin:0 10px 0 0; }
#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; color: var(--theme-text-color);}
	
#menu-button 								{ display: none; width: 18px; height: 18px; margin-right: 15px; cursor: pointer; position: relative; }
#menu-button span 							{ display: block; position: absolute; height: 1px; width: 100%; background-color:var(--theme-border-color); opacity: .7; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
#menu-button span:nth-child(1) 				{ top: 5px; transform-origin: left center; }
#menu-button span:nth-child(2) 				{ top: 10px; transform-origin: left center; }
#menu-button span:nth-child(3) 				{ top: 15px; transform-origin: left center; }

#menu-close 								{ display: none;}

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

#page-header-inner						{ padding: var(--page-header-padding) 15px calc(var(--page-header-padding) * .65) 15px; }
#page-header-inner h2 					{ color: var(--default-title-color); font-weight: 500; font-size: var(--page-header-fontsize);}

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

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

.main-content-wrapper									{ position: relative;}
.main-content-wrapper .main-content 					{ padding-bottom: 60px; }
.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-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-headroom	{ padding: 18vh 0 0 0; }

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

#footer-wrapper							{ padding-top: 30px; min-height: 300px; background: url(../image/assets/footer-bg.jpg) no-repeat center top; background-size: cover; }
#footer-inner							{ padding: 25px 0;  border-top: 1px solid var(--light-border-color); }
#footer-top-bar 						{ margin-bottom: 10px;}
#footer-logo 							{ width: 170px;}
#footer-nav li							{ margin-left: 36px; }
#footer-nav li a:hover 					{ color: var(--theme-text-color); } 
#footer-nav-primary						{ font-weight: 500; margin: 20px 0 30px 0; }
#footer-nav-secondary					{ font-size: .95em; }
#footer-inner .social-links-label		{ font-size: .9em; margin-bottom: 10px; color: var(--secondary-text-color); }
#footer-inner .social-links li			{ margin-right: 14px; }
#footer-inner .social-links li a 		{ display: block; width: 38px; height: 38px; line-height: 38px; text-align: center; color: var(--theme-text-color); border-radius: 50%; border: 1px solid var(--theme-border-color);}
#footer-inner .social-links li a:hover  { background-color: var(--theme-button-color); color: #fff;}
#footer-copyright 						{ font-size: 12px; letter-spacing: .1em; }

/** 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/assets/cta.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/assets/cta.webp')) { background-image: url('../image/assets/cta.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;}

/*
---------------------------------------------------------
03. /var/www/archibm/public/css/app.rwd.css
---------------------------------------------------------
*/


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

	:root {
		--page-header-padding: 60px;
		--page-header-fontsize: 2.2em;
	}

	h2 										{ font-size: 2.4em;}

	.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; }

	.page-section-header 					{ padding: clamp(80px, 20vh, 180px) 0 30px 0; }

	/** Header **/
	#header-nav								{ margin-right: 40px;}
	#header-nav	li							{ margin-left: 50px;}

	/** Main **/
	.main-content-wrapper .main-content .content-headroom	{ padding: 8vh 0 0 0;}

	/** Footer **/
	#footer-wrapper							{ min-height: 240px;}
	#footer-logo							{ width: 140px;}
	#footer-nav-primary						{ margin: 10px 0 30px 0;}

}


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

	:root {
		--page-header-padding: 50px;
		--page-header-fontsize: 1.8em;
	}

	/** 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	li								{ margin-left: 40px;}


	/** Footer **/
	#footer-wrapper								{ min-height: 200px; margin-top: 20px;}
	#footer-inner 								{ padding: 20px 0;}
	
	
}


/*
-----------------------------
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; }
	
	.page-section-header 						{ padding: clamp(80px, 15vh, 180px) 0 20px 0; }

	.expandable-title							{ padding: 10px 3px;}
	.expandable-title .text 					{ font-size: 1.05em; }
	
	/** Header **/
	#header-inner								{ padding-left: 20px;}
	#header-nav > ul >li						{ margin-left: 30px;}
	#header-trial-button						{ margin-left: 20px;}
}


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

	:root {
		--header-wrapper-height: 80px;
		--header-bar-top: 30px;
		--header-bar-height: 42px;
		--page-header-padding: 40px;
		--page-header-fontsize: 1.5em;
	}
	

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

	h2 											{ font-size: 2.1em;}

	/** 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 **/
	.inner										{ width: 92%; margin:auto; }

	.faq-section                     			{ margin-top: 50px; }
	.faq-section h3                  			{ margin-bottom: 20px; font-size: 1.6em; }

	.tab-buttons 								{ margin: 20px 0 30px 0; gap: 5px; }
	.tab-buttons li a 							{ font-size: 1em; min-width: 140px; padding: 0 1em; height: 36px; line-height: 34px;}

	/** Header **/
	#header-inner								{ }
	#header-inner h1							{ }
	#search-button 								{ font-size: 1.2em; opacity:.86; }
	#header-icons								{ margin-right: 15px; margin-left: auto; }
	#header-icons i								{ }
	#header-nav									{ display: none;}
	#header-trial-button 						{ display: none;}

	/** Nav **/
	#nav-wrapper 								{ background-color: rgba(255,255,255,.86); backdrop-filter: blur(6px); }
	#menu-button								{ display: block; }
	#menu-close									{ display: block; position: absolute; left: 12%; top: 20px;}
	#mobile-dashboard-button					{ position: absolute; right: 20px; top: 20px; font-size: 1.05em;}

	.show-nav #nav-wrapper						{ transform: translateX(0);}	

	/** Main **/
	.main-content-wrapper .main-content						{ padding: 0 0 40px 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; }
	.main-content-wrapper .main-content .content-headroom	{ padding: 0;}
	
	/** Footer **/
	#footer-wrapper								{ margin: 0; padding: 0;} 
	#footer-nav li								{ margin-left: 20px;}
	#footer-copyright							{ font-size: 10px;}
	
}


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

	.expandable-title .no 						{ margin-right: 15px; width: 30px; height: 30px; line-height: 26px; font-size: .92em; }

	/** Footer **/
	#footer-inner								{ padding-top: 30px;}
	#footer-header 								{ width: 100%;}
	#footer-top-bar 							{ flex-direction: column;}
	#footer-nav-primary 						{ flex-direction: column; margin: 20px 0 15px 0;}
	#footer-nav li								{ margin: 12px 0;}
	#footer-inner .social-links li				{ margin-right: 10px;}
	#footer-bottom-bar							{ display: block;}
	#footer-copyright							{ margin-top: 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;}
	
}

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

	:root {
		--page-header-padding: 30px;
		--page-header-fontsize: 1.5em;
	}

	/** Header **/
	h2 										{ font-size: 1.9em; }
	/*
	h1 										{ font-size: 2.2em; }
	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; }

	.tab-buttons-dropdown 								{ display: block; text-align: center; margin-top: 20px; margin-bottom: 30px; height: 34px; line-height: 32px; color: var(--theme-text-color); border: 1px solid var(--theme-border-color); border-radius: 50px; }
	.tab-buttons-dropdown i 							{ font-size: 12px; margin-left: 2px;}
	.tab-buttons-dropdown + .tab-buttons 				{ display: none; margin-top: 0; padding: 10px 0; border-radius: 10px; background-color: #fff; box-shadow: 0 1px 6px #7a73ff26;}
	.tab-buttons-dropdown + .tab-buttons li				{ display: block; width: 100%;}
	.tab-buttons-dropdown + .tab-buttons li a			{ display: block; width: 100%; height: 32px; line-height: 30px; border: none; border-radius: 0; background:none; color: var(--theme-text-color);}
	.tab-buttons-dropdown + .tab-buttons li a.active 	{ background-color: var(--soft-bg-color);}
	.tab-buttons-dropdown.open 							{ margin-bottom: 0;}
	.tab-buttons-dropdown.open + .tab-buttons 			{ display: block; margin-bottom: 30px;}

    .expandable-group 						{ margin-top: 20px;}
	.expandable-group .expandable-title h2  { font-size: 1rem !important;}
	.expandable-title 						{ padding: 8px 3px;}
	
	.page-section-header 					{ padding: clamp(50px, 12vh, 180px) 0 0 0; text-align: left; }
	.page-section-header .summary 			{ margin-top: 10px; margin-bottom: 20px; font-size: 1.04em;}

	#page-header-inner { padding: var(--page-header-padding) 10px calc(var(--page-header-padding) * .25) 10px;
}
	
}


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

	h2 										{ font-size: 1.7em; }

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

	.page-section-header .summary			{ font-size: 1em;}
}


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

@media screen and (max-width: 360px) {

	h2 										{ font-size: 1.5em; }

}

/*
---------------------------------------------------------
04. /var/www/archibm/public/css/application.css
---------------------------------------------------------
*/
/*
========================
My Applications
========================
*/

#my-application-header                  { padding: 18px 3%; border-bottom: 1px solid var(--mid-border-color); }
#my-application-list 					{ padding: 18px 3% 32px 3%; min-height: 50vh; }
#my-application-list .col               { border: none; }  
#my-application-list .col:first-child   { padding-left: 10px;}
#my-application-list .col:last-child    { padding-right: 10px;}
#my-application-list .application-row 	{ border-bottom:1px solid var(--light-border-color); }
#my-application-list .application-row.header .col { font-weight: 400; letter-spacing: .05em;}
#my-application-list .application-info 	{ padding: 15px 0;}
#my-application-list .application-info .col:first-child   { padding-left: 5px;}
#my-application-list .application-info .col:last-child   { padding-right: 5px;}
#my-application-list .application-icon      { width: 120px; }
#my-application-list .application-icon img  { width: 72px; }
#my-application-list .application-status    { width: 150px; }
#my-application-list .application-usage     { width: 150px; }
#my-application-list .application-sn        { width: 350px;}
#my-application-list .application-buttons    { width: 200px;}
#my-application-list .application-buttons .button { margin-left: 8px; border-radius: 8px;}
#my-application-list .application-buttons .cp-button { width: 32px; height: 32px;}
#my-application-list .application-name,
#my-application-list .application-status,
#my-application-list .application-usage     { font-weight: 500; font-size: 1.1em; letter-spacing: .05em; }
#my-application-list .application-sn        { font-size: 1.1em; letter-spacing: .05em;}
#my-application-list .mobile-label          { display: none;}

#my-application-list .content-holder { padding: 0; margin-bottom: 30px; }
#my-application-list .content-holder .content { min-height: 280px; }
#my-application-list .content-holder .list-table li > div        { padding: 1.4em 1em;}
#my-application-list .content-holder .list-table li > div:not(.empty) { border-bottom: 1px solid var(--light-border-color); }
#my-application-list .content-holder .list-table li > div:not(.buttons) { font-weight: 500; font-size: 1.02em; letter-spacing: .05em;}
#my-application-list .content-holder .list-table li.header > div { padding: 1em 1em; background: none; border-bottom: 1px solid var(--mid-border-color); color: var(--theme-text-color);}
#my-application-list .content-holder .list-table .empty-col { width: 4%;} 
#my-application-list .content-holder .list-table .first-col { padding-left: 0;}
#my-application-list .content-holder .list-table .last-col { padding-right: 0;}
#my-application-list .content-holder .button { margin-left: 5px; border-radius: 8px; }

#my-application-list .sn-segment        { font-weight: 500;}
#my-application-list .tip-button        { cursor: pointer; color: var(--light-text-color);}

#offline-activation-tip                 { color: #666;}
#offline-activation-button              { text-decoration: underline; }
#offline-activation-form                { margin-bottom: 15px;}
#offline-activation-form .error         { font-size: .92em; text-align: center;}
#offline-code-form .row                 { margin-bottom: 10px;}
#offline-code-form textarea             { font-size: .92em;}
#offline-code-form p                    { color: var(--theme-text-color); font-size: .92em; margin-bottom: 20px; text-align: left;}
#offline-code-form .button              { margin: 0 2px;}


/** Downloads **/
.box-app-downloads 								{ padding: 40px 6%; margin:0 auto 30px auto; color: var(--sharp-text-color);}
.box-app-downloads h3 							{ margin:0 0 5px 0; font-size: 2em; color: var(--theme-title-color); }
.box-app-downloads .meta 						{ margin-top: 30px;}
.box-app-downloads .meta p 						{ margin-right: 30px;}
.box-app-downloads .description 				{ margin-top: 20px; font-size: 1rem; line-height: 1.5em;}
.box-app-downloads .buttons .button:not(.button-soft) 		 { margin-left: 8px; min-width: 150px; border-radius: 5px;}
.box-app-downloads .buttons .button:not(.button-soft):hover  { background-color: #fff; border: 1px solid var(--theme-border-color); color: var(--theme-text-color);}
.box-app-downloads .all-versions-btn			{ margin-top: 25px; color: var(--default-text-color); cursor: pointer; transition: all .2s;}
.box-app-downloads .all-versions-btn:hover 		{ color: var(--theme-text-color);}
.box-app-downloads .all-versions-btn i 			{ font-size: 12px; margin-left: 4px; transition: all .2s;}
.box-app-downloads .all-versions-btn.opened i 	{ transform: rotate(180deg);}

.box-app-downloads .file-archives				{ margin-top: 30px; display: none;}
.box-app-downloads .file-archives li 			{ border-bottom: 1px solid var(--gray-border-color); padding: 30px 5px;}
.box-app-downloads .file-archives li:first-child { color: var(--theme-text-color);}
.box-app-downloads .file-archives li:not(.header-row) .filename { font-size: 1.2em; }
.box-app-downloads .file-archives .filename 	{ width: 40%; line-height: 1.2em; }
.box-app-downloads .file-archives .filesize 	{ width: 90px;}
.box-app-downloads .file-archives .version		{ width: 90px;}
.box-app-downloads .file-archives .updated		{ width: 80px;}
.box-app-downloads .file-archives .buttons      { width: 120px;}
.box-app-downloads .file-archives .button       { min-width: 0;}
.box-app-downloads .file-archives .note			{ font-size: 1rem; line-height: 1.2em; color: var(--default-text-color);}

.box-app-downloads .mobile-label                { display: none;}

/*
-----------------------------
For 1440px or less
-----------------------------
*/
@media screen and (max-width: 1440px) {
    #my-application-list { padding: 15px 2%;}
    #my-application-list .application-info { padding: 12px 0;}
    #my-application-list .application-name, 
    #my-application-list .application-status, 
    #my-application-list .application-usage { font-size: 1em;}
    #my-application-list .application-icon img { width: 60px;}
    #my-application-list .application-sn { font-size: 1em; width: 320px;}
    #my-application-list .application-buttons { width: 180px; }
    #my-application-list .application-buttons .button { font-size: .95rem; }
}


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

    #my-application-list .application-info .col:first-child { display: none;}
    #my-application-list .application-name { padding-left: 5px;}
    #my-application-list .application-buttons { width: 140px;}
    #my-application-list .application-buttons .button i { display: none;}

    .box-app-downloads { padding: 30px 4%; margin:0 auto 20px auto; border-radius: 15px; }
    .box-app-downloads h3 { font-size: 1.8em; margin-bottom: 0;}
    .box-app-downloads .file-archives li:not(.header-row) .filename { font-size: 1.1em;}
}

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

    #my-application-list { padding: 10px 3%;}
    #my-application-list .application-name { padding-left: 0;}
    #my-application-list .application-row.header { display: none;}
    #my-application-list .application-info { flex-direction: column; align-items: flex-start; gap: 14px; }
    #my-application-list .application-info > .col { text-align: left; width: 100%; display: flex; align-items: center; font-weight: 400; }
    #my-application-list .application-sn .cp-button { width: 21px; height: 21px; line-height: 21px; margin-left: 10px; box-shadow: 2px 2px 6px #7a73ff26; }
    #my-application-list .application-sn .cp-button i { font-size: 12px;}
    #my-application-list .application-buttons { justify-content: flex-start; margin: 5px 0;}
    #my-application-list .application-buttons .button { height: 34px; line-height: 32px; margin: 0 6px 0 0;}
    #my-application-list .application-buttons .button i { display: inline-block;}
    #my-application-list .mobile-label          { display: block; color: var(--theme-text-color); flex-shrink: 0; flex-grow: 0; width: 80px; font-weight: 500;}

    #my-application-list .content-holder .content { min-height: 0;}
    #my-application-list .application-expandable .list-table { display: block;}
    #my-application-list .application-expandable .list-table li { display: flex; flex-direction: column; padding: 15px 3%; border-bottom: 1px solid var(--mid-border-color); }
    #my-application-list .application-expandable .list-table li:last-child { border-bottom: none !important;}
    #my-application-list .application-expandable .list-table li .col { display: flex; align-items: flex-start; width: 100%; margin: 5px 0; padding: 0; border-bottom: none !important; text-align: left;}
    #my-application-list .application-expandable .list-table li .empty-col { display: none;}
    #my-application-list .application-expandable .list-table li.header { display: none;}
    #my-application-list .application-expandable .list-table li .buttons { margin: 5px 0;}
    #my-application-list .application-expandable .list-table li .buttons > div { justify-content: flex-start;}
    #my-application-list .application-expandable .list-table li .buttons .button { height: 34px; line-height: 32px; margin: 0 6px 0 0;}

    .box-app-downloads-wrapper              { margin-top: 15px;}
    .box-app-downloads > .flex-justify      { flex-direction: column;}
    .box-app-downloads .info                { width: 100%;}
    .box-app-downloads .buttons             { margin-top: 20px;}
    .box-app-downloads .buttons .button     { margin-left: 0 !important;  }
    .box-app-downloads .file-archives li    { padding: 20px 5px; position: relative;}
    .box-app-downloads .file-archives li.header-row { display: none;}
    .box-app-downloads .file-archives li > div { flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 40px; }
    .box-app-downloads .file-archives li .filename,
    .box-app-downloads .file-archives li .filesize,
    .box-app-downloads .file-archives li .version,
    .box-app-downloads .file-archives li .updated { display: flex; width: 100%; }
    .box-app-downloads .file-archives li:not(.header-row) .filename { font-size: 1em;}
    .box-app-downloads .file-archives .buttons  { width: auto; position: absolute; right: 0; top: 0;}
    .box-app-downloads .file-archives .buttons .button { width: 30px; height: 30px; line-height: 30px; box-shadow: 2px 2px 6px #7a73ff26; }
    .box-app-downloads .file-archives .note { display: flex; flex-direction: row; gap: 0; margin-top: 14px;}
    .box-app-downloads .file-archives .mobile-label        { display: block; color: var(--theme-text-color); width: 80px; flex-shrink: 0; flex-grow: 0;}
}

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

    .box-app-downloads h3 { font-size: 1.6em;}
    .box-app-downloads .meta { margin-top: 20px; }

}


/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {
    
    #application-my-applications .main-content-wrapper .main-content { margin-top: 10px;}
    #my-application-list                        { padding: 15px 4%;}
    #my-application-list .mobile-label          { width: 72px; }

    .box-app-downloads .meta { flex-direction: column; gap: 8px;}

}


/*
---------------------------------------------------------
05. /var/www/archibm/public/css/subscription.css
---------------------------------------------------------
*/
/*
========================
Plans
========================
*/
#subscription-plans .tooltipster-base                       { max-width: 210px; }
#subscription-plans .tooltipster-content                    { color: #666; font-size: 13px; line-height: 1.5em; }

#plan-list-wrapper                                          { }
.plan-table                                                 { }
.plan-table .col-item                                       { width: 30%; margin-right: 5%; position: relative;  }
.plan-table .plan-box                                       { min-height: 100%; background-color: #fff; border: 1px solid var(--gray-border-color); box-shadow: 3px 3px 6px rgba(0,0,0,.08); border-radius: 15px; }
.plan-table .plan-box:hover                                 { border: 1px solid var(--mid-border-color); box-shadow: 3px 3px 6px #7a73ff33; }
.plan-table .plan-box.is-preview                            { opacity: .6;}
.plan-table .plan-box.hide-button .body                     { padding-top: 0;}
.plan-table .header                                         { padding:25px 8% 0 8%;}
.plan-table .thumb                                          { margin-bottom: 15px; height: auto !important; padding-top: 0 !important;}
.plan-table .thumb img                                      { position: static !important;}
.plan-table .title                                          { font-size: 1.8em; font-weight: 500; letter-spacing: .08em; color: var(--default-text-color); }
.plan-table .title .postfix                                 { position: absolute; right: 8%; top: 25px; margin: 15px 15px 0 0; font-weight: 400; background:rgba(0,0,0,.4); color: #fff; border-radius: 4px; font-size: .55em; padding: .3em .4em .4em .6em; mix-blend-mode: overlay; }
.plan-table .title .pro-tag                                 { background-color: var(--theme-title-color); color: #fff; font-size: 13px; margin-left: 8px; padding: .2em .3em .2em .4em; border-radius: 3px; display: inline-block;}
.plan-table .title .pro-tag.highlighted                     { background-color: var(--secondary-title-color); }
.plan-table hr                                              { margin: 20px 0; border-bottom: 1px solid var(--gray-border-color);}
.plan-table .plan-box:hover hr                              { border-bottom: 1px solid var(--mid-border-color);}
.plan-table .price                                          { display:flex; align-items: flex-end; margin-bottom: 5px;}
.plan-table .price-value                                    {  }
.plan-table .amount                                         { font-size: 2.2em; letter-spacing: .08em; color: var(--theme-text-color);}
.plan-table .period                                         { font-size: .9em; color: var(--sharp-text-color); margin-left: .5em;}
.plan-table .price-note                                     { font-size: .9em; color: var(--default-text-color); margin-left: auto; letter-spacing: .08em;}
.plan-table .inquire-price                                  { font-size: 1.4em; font-weight: 500; letter-spacing: .08em; color: var(--theme-text-color);}
.plan-table .buy                                            { margin-top: 20px;}
.plan-table .buy .buttons                                   { position: absolute; bottom:40px; width: 84%; gap:8px; }
.plan-table .buy .buttons button,
.plan-table .buy .buttons a                                 { flex-grow: 1; font-weight: 400 !important; border-radius: 8px; color: var(--theme-text-color); background: none; transition: all .2s; cursor: pointer;}
.plan-table .buy .buttons button:hover,
.plan-table .buy .buttons a:hover                           { background-color: var(--mid2-border-color); border: 1px solid var(--mid2-border-color); color: #fff;}
.plan-table .buy .buttons .sep                              { margin: 0 8px; display: inline-block; font-size: 12px; transform: translateY(-2px); }
.plan-table .option-selector-wrapper                        { margin-top: 18px;}
.plan-table .option-selector-wrapper .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--mid-border-color); border-radius: 6px; }
.plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; color:#888; padding-left: 25px;}
.plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { width: 38px; height: 38px;}
.plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--mid-border-color) transparent transparent transparent;}
.plan-table .body                                           { padding: 15px 8% 110px 8%;}
.plan-table .spec                                           { color: var(--default-text-color); margin-bottom: 10px; font-size: 1.02em; line-height: 1.4em;}
.plan-table .features                                       { }
.plan-table .features li                                    { padding: .7em .5em .7em 0; font-size: 1.05em; color: var(--default-text-color); }
.plan-table .features .fa-check                             { font-size: .8em; margin-right: 4px; color: var(--theme-text-color);}
.plan-table .features .quota                                { color: var(--theme-text-color); font-weight: 500; margin-left: .5em;}
.plan-table .features .tooltip                              { color: #ddd; font-size: .88em; margin-left: 1px;}
.plan-table .plan-group-switch                              { position: absolute; right: 8%; top: 27px; border-radius: 40px; background-color: #f7f7f7; cursor: pointer;}
.plan-table .plan-group-switch .switch-button               { position: absolute; left: 0; top: 0; width: 60px; height: 100%; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 40px; transition: all .3s; }
.plan-table .plan-group-switch ul                           { display: flex; position: relative; z-index: 1; }
.plan-table .plan-group-switch li                           { white-space:nowrap; padding: .7em 1.1em; color: #666; font-weight: 500; transition: .2s all; }
.plan-table .plan-group-switch li.active                    { color: var(--mid-text-color);}
.plan-table .plan-box.highlighted                           { border: 1px solid var(--highlight-border-color); box-shadow: 3px 3px 10px #7a73ff26;;}
.plan-table .plan-box.highlighted .title                    { color: var(--highlight-mid-text-color); border-bottom: 2px solid var(--highlight-text-color); }
.plan-table .plan-box.highlighted .title .postfix           { background-color: var(--highlight-border-color); }
.plan-table .plan-box.highlighted .amount                   { color: var(--highlight-dark-text-color);}
.plan-table .plan-box.highlighted button                    { border: 1px solid var(--highlight-border-color); }
.plan-table .plan-box.highlighted button:hover              { background-color: var(--highlight-border-color); border: 1px solid var(--highlight-border-color); color: #fff; }
.plan-table .plan-box.highlighted .features                 { }
.plan-table .plan-box.highlighted .features .fa-check,
.plan-table .plan-box.highlighted .features .quota          { color: var(--highlight-text-color); }
.plan-table .plan-box.coming-soon                           { background-color: rgba(200,200,200,.5); }
.plan-table .plan-box.coming-soon .buy button,
.plan-table .plan-box.coming-soon .buy button:hover         { color: #bbb; border: 2px solid #bbb; background: none; pointer-events: none;}
.plan-table .plan-box.coming-soon .amount,
.plan-table .plan-box.coming-soon .period,
.plan-table .plan-box.coming-soon .price-note,
.plan-table .plan-box.coming-soon .spec,
.plan-table .plan-box.coming-soon .features li,
.plan-table .plan-box.coming-soon .features .fa-check,
.plan-table .plan-box.coming-soon .features .quota          { color: #aaa; }
.plan-table .plan-box.coming-soon .features .tooltip        { display: none;}
.plan-table .plan-box.coming-soon .double-dash              { font-weight: 200; margin-right: 10px;}
.plan-table .plan-group-switch.highlighted                  { background-color: var(--highlight-bg-color);}
.plan-table .plan-group-switch li                           { color: #888; }
.plan-table .plan-group-switch li.active.highlighted        { color: var(--highlight-mid-text-color); }
.plan-table .plan-group-switch .switch-button.highlighted   { border: 1px solid var(--highlight-border-color); }
.plan-table .remark                                         { margin-top: 12px; font-size: .92em; color: var(--theme-text-color); }
.plan-table .remark i                                       { font-size: 1.1em; margin-right: 3px;}

#application-plans .select2-results__option                 { padding-left: 25px;}

#comparison-table-nav                                       { display: none;}
#comparison-table-nav li                                    { flex-grow: 1; text-align: center;}
#comparison-table-wrapper                                   { margin: 80px auto; overflow: hidden; background-color: #fff; border: 1px solid var(--gray-border-color); box-shadow: none; border-radius: 15px;}
.comparison-table                                           { border: none;  }
.comparison-table tr                                        { transition: all .2s;}
.comparison-table tr:not(.header-row):hover                 { background-color: var(--softer-bg-color); }      
.comparison-table th,           
.comparison-table td                                        { padding: 1.2em 0; border: none; border-bottom: 1px solid var(--gray-border-color); }
.comparison-table tr:last-child td                          { border-bottom: none;}
.comparison-table th                                        { font-size: 1.2em; font-weight: 500; letter-spacing: .08em; text-align: center; padding: 1.8em 0; border-bottom: 1px solid var(--gray-border-color); color: var(--default-text-color); } 
.comparison-table td                                        { text-align: center; color: var(--mid-text-color); font-weight: 500; }
.comparison-table td:first-child                            { padding-left: 5%; text-align: left; color: var(--default-text-color); font-weight: normal; }
.comparison-table th.highlighted                            { background-color: var(--highlight-bg-color); color: var(--theme-text-color);}
.comparison-table td.highlighted                            { background-color: var(--highlight-bg-color);}
.comparison-table .pro-tag                                  { background-color: var(--theme-title-color); color: #fff; font-size: 11px; padding: .2em .3em .2em .4em; border-radius: 3px; display: inline-block;}
.comparison-table .pro-tag.highlighted                      { background-color: var(--secondary-title-color); }

/*
================================
Responsive Layout
================================
*/
	
/* for 1280px or less */
@media screen and (max-width: 1280px) {

    /** Plans **/
    .plan-table .col-item                   { width: 32%; margin-right: 2%; }
    .plan-table .title                      { font-size: 1.5em;}
    .plan-table .price                      { flex-wrap: wrap;}
    .plan-table .price-note                 { margin-left: 0; margin-top: 10px;}
    .plan-table .amount                     { font-size: 2em;}
    .plan-table .plan-group-switch          { top: 24px;}
    .plan-table .plan-group-switch li       { padding: .5em .9em;}
    .plan-table .spec                       { font-size: 1.05em;}
    .plan-table .features li                { font-size: 1.05em;}
	.plan-table .buy .buttons button, 
    .plan-table .buy .buttons a             { font-size: 1em; padding: 0 .6em; height: 36px; line-height: 34px; }
    .plan-table .buy .buttons .sep          { margin: 0 5px;}


    #comparison-table-wrapper               { margin: 50px auto 0 auto;}
    .comparison-table th                    { font-size: 1.2em;}
    .comparison-table td                    { font-size: 1.05em; }

}


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

	.plan-table .buy .buttons { flex-direction: column; bottom:20px; }
    .plan-table .buy .buttons button, 
    .plan-table .buy .buttons a { width: 100%;}

}


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

    /** Plans **/
    .plan-table .col-item                   { width: 100% !important; margin-right: 0 !important; margin: 10px 0 !important;}
    .plan-table .header                     { padding: 20px 6% 0 6%;}
    .plan-table .body                       { padding: 15px 6% 90px 6%;}
    .plan-table .features li                { padding: .6em .4em .6em 0; font-size: 1em;}
    .plan-table .plan-group-switch          { top: 18px; right: 6%;}
	.plan-table .buy .buttons               { flex-direction: row; bottom:30px; width: 88%; }
    .plan-table .buy .buttons button, 
    .plan-table .buy .buttons a             { width: auto; }

    #comparison-table-nav                   { display: flex; justify-content: space-between; margin: 40px 0 25px 0;}
    #comparison-table-nav li                { margin: 0 5%; font-size: 1.2em; font-weight: 500; color: #444; cursor: pointer;}
    #comparison-table-nav li.mobile-active  { color: var(--theme-text-color);}
    #comparison-table-wrapper               { margin-top: 0;} 
    .comparison-table th                    { width: 50% !important; font-size: 1.1em;}
    .comparison-table td                    { width: 50% !important; font-size: 1em;}

}

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

    /** Plans **/
    .plan-table .title                      { font-size: 1.33em;}
    .plan-table .amount                     { font-size: 1.8em;}
    .plan-table .plan-group-switch          { top: 16px;}

    #comparison-table-nav                   { margin: 20px 0;}
    #comparison-table-nav li                { font-size: 1.1em;} 
    #comparison-table-wrapper               { border-left:none; border-right: none; background: none; border-radius: 0; box-shadow: none;}
    .comparison-table th                    { display: none !important;}
    .comparison-table th, 
    .comparison-table td                    { padding: 1.15em 0; }

}

/*
---------------------------------------------------------
06. /var/www/archibm/public/css/newsletter.css
---------------------------------------------------------
*/
.subscription 					{ width:100%; max-width:360px; margin: 20px 0 30px 0;}
.subscription-title 			{ margin-bottom:10px; }
.subscription-fields			{ position:relative;  }
.subscription-fields input 		{ flex-grow: 1; width: auto !important; height:38px !important; background-color: #fff !important; border:1px solid var(--theme-button-color) !important; padding:0 .8em; line-height: 36px; border-radius:4px 0 0 4px !important; outline:none; }
.subscription-fields button 	{ height:38px; padding:0 .8em; line-height: 36px; background:var(--theme-button-color); color:#fff; border-radius:0 4px 4px 0; border:1px solid var(--theme-button-color); }
.subscription-policy            { margin-top: 15px; font-size: 12px; line-height: 1.33em; color: #888;}
.subscription-result			{ font-size: .95rem; color: #666; margin-top:10px; display:none; }

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

.subscription { margin: 20px 0 10px 0;}

}

/*
---------------------------------------------------------
07. /var/www/archibm/public/css/auth.css
---------------------------------------------------------
*/
#auth-toolbar						{ flex-shrink: 0; margin-right: 15px;}
#auth-toolbar .dropdown > .label 	{ opacity: 1; transition: all .2s;}
#auth-toolbar .dropdown > .label:hover { opacity: 1; color: var(--theme-text-color);}
#auth-toolbar .dropdown > .label i 	{ font-size: 1.5em; }
#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  				{ padding-top: 20px;}
#auth-toolbar .menu > div 			{ padding: 0; border: 1px solid var(--theme-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 	{ font-size: .95em;}
#auth-toolbar ul					{ padding: 10px 0; }
#auth-toolbar ul li					{ margin: 0; }
#auth-toolbar ul li a 				{ color: var(--default-text-color); display: block; padding: .7em 20px; transition: all .2s;}
#auth-toolbar ul li a:hover 		{ background-color: var(--soft-bg-color); color: var(--theme-text-color); }
#auth-toolbar ul li i 				{ width: 16px;}
#auth-toolbar-login-button			{ font-size: 1.46em; margin-left: 5px;}

.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; }

}