@charset "utf-8";

/*
========================
Variable
========================
*/
:root {
	--theme-bg-color: #306a6d;
	--theme-bg-transparent: #306a6def;
	--mid-bg-color: #7da198;
	--light-bg-color: #eaf0f0;
	--soft-bg-color: #eaf0f0;
	--anchor-bg-color: #e5eaec;
	--highlight-bg-color: #f6f4ee;
	--theme-text-color: #306a6d;
	--dark-text-color: #013f40;
	--mid-text-color: #819fa0;
	--light-text-color: #A4B9BA;
	--highlight-bg-color: #FBF6E8;
	--highlight-text-color: #E7D6A7;
	--highlight-mid-text-color: #D7C79D;
	--highlight-dark-text-color: #C2B38C;
	--theme-border-color: #013f40;
	--mid-border-color: #b4c6c5;
	--light-border-color: #b4c6c5;
	--lighter-border-color: #eaf0f0;
	--highlight-border-color: #D7C79D;
	--soft-border-color: #e3ebeb;
	--scrollbar-track: #d7dfdf;
	--scrollbar-thumb: #0d6263;
}


/*
========================
Confirm
========================
*/
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-theme			{ background-color: var(--theme-bg-color); color: #fff; }


/*
========================
Structure
========================
*/
#container								{ padding-top: 64px; }
.inner									{ width: 86%; margin:auto; max-width: 1440px; }
.inner-lg								{ width: 86%; margin:auto; }


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

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


/*
========================
Main
========================
*/
#main-wrapper							{ padding:60px 0; /*min-height: 600px;*/ }
#main-inner								{}
#main-inner > h2 						{ margin-bottom: 50px;}

/*
========================
Footer
========================
*/
#footer-wrapper							{ }
#footer-inner							{ padding: 15px 0; border-top: 1px solid var(--mid-border-color); color: var(--theme-text-color);}
#footer-inner .footer-nav				{ }
#footer-inner .footer-nav li			{ margin: 5px 60px 5px 0; font-size: 1.1em; }
#footer-inner .social-links li 			{ margin-left: 15px;}
#footer-inner .social-links li:first-child { margin-left: 0;}
#footer-inner .social-links li a 		{ display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px solid var(--light-border-color);}
#footer-copyright						{ font-size: 13px; }

#footer-inner .toolbar					{ margin: 15px 0; font-size: .95em;}
#footer-inner .toolbar .label			{ font-weight: 500; }
#footer-inner .toolbar li				{ margin-left: 15px;}
#footer-inner .toolbar li.active a		{ text-decoration: underline;}

/*
========================
Feedback
========================
*/
#feedback-index 					{ overflow-x: hidden; /* Fix select2 dropdown width issue */ }
#feedback-header 					{ height: 400px; background: url(../image/profile-banner.jpg) no-repeat 50% 50%; background-size: cover; position: relative; }
#feedback-header::before			{ content: ''; position:absolute; left: 0; top: -64px; width: 100%; height: 64px; background-color:var(--theme-bg-color);}
#feedback-header .inner 			{ height: 100%;}
#feedback-header .content 			{ margin: auto 0; color: var(--dark-text-color);}
#feedback-header .content h2 		{ font-size: 2.25em; letter-spacing: .1em; margin-bottom: 20px;  color: #145149; }
#feedback-header .content .fr-view	{ font-size: 1.1em; line-height: 1.5em; }

.feedback-form legend 				{ font-size: 1.4em; font-weight: 600; letter-spacing: .1em; color: var(--theme-text-color);} 
.feedback-form .form-body 			{ padding: 40px 4%; border: 1px solid var(--light-border-color);}
.feedback-form strong.label 		{ white-space: nowrap; margin: 0 20px 0 0 !important; font-weight: 500; font-size: 1.1em; color: var(--theme-text-color);}
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form input[type="password"],
.feedback-form textarea,
.feedback-form .select2-container--default .select2-selection--single { border: 1px solid var(--light-border-color); background-color: #fff;}
.feedback-form textarea				{ height: 200px;}
.feedback-form .bottom-row 			{ margin-top: 30px;}
.feedback-form .bottom-row .button 	{ min-width: 150px; height: 42px; position: relative; }
.feedback-form .bottom-row .button.loading::after { content: '\f3f4'; font: var(--fa-font-regular); margin-left: 5px; animation: rotation 1.5s linear infinite; position: absolute; left: 50%; top: 50%; margin-left: 30px; }
.feedback-form .result 				{ font-size: 1.1em; color: var(--theme-text-color);}