/* Minification failed. Returning unminified contents.
(6854,1): run-time error CSS1019: Unexpected token, found '}'
(8081,28): run-time error CSS1035: Expected colon, found '-webkit-transform'
(12970,1): run-time error CSS1019: Unexpected token, found '}'
 */
@charset "UTF-8";
@import "/ServicePortal/Content/css/vendor/reset.css";
@import "/ServicePortal/Content/css/vendor/boostrap-3.4.1.css";
@import "/ServicePortal/Content/css/front/font.css";
/*! jQuery UI - v1.10.0 - 2013-01-22
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin-top: 2px;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
	padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
	right: .5em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 21px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-menu {
	list-style: none;
	padding: 2px;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	margin-top: -3px;
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	width: 100%;
}
.ui-menu .ui-menu-divider {
	margin: 5px -2px 5px -2px;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
	text-decoration: none;
	display: block;
	padding: 2px .4em;
	line-height: 1.5;
	min-height: 0; /* support: IE7 */
	font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight: normal;
	margin: -1px;
}

.ui-menu .ui-state-disabled {
	font-weight: normal;
	margin: .4em 0 .2em;
	line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
	cursor: default;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item a {
	position: relative;
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: .2em;
	left: .2em;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	position: static;
	float: right;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("/ServicePortal/Content/css/images/animated-overlay.gif");
	height: 100%;
	filter: alpha(opacity=25);
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 22px;
}
.ui-spinner-button {
	width: 16px;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to overide default borders */
.ui-spinner a.ui-spinner-button {
	border-top: none;
	border-bottom: none;
	border-right: none;
}
/* vertical centre icon */
.ui-spinner .ui-icon {
	position: absolute;
	margin-top: -8px;
	top: 50%;
	left: 0;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position: -65px -16px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	font-size: 1em;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #eeeeee url(/ServicePortal/Content/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #e78f08;
	background: #f6a828 url(/ServicePortal/Content/css/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
	color: #ffffff;
	font-weight: bold;
}
.ui-widget-header a {
	color: #ffffff;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #cccccc;
	background: #f6f6f6 url(/ServicePortal/Content/css/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #1c94c4;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #1c94c4;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #fbcb09;
	background: #fdf5ce url(/ServicePortal/Content/css/images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #c77405;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: #c77405;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #fbd850;
	background: #ffffff url(/ServicePortal/Content/css/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #eb8f00;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #eb8f00;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fed22f;
	background: #ffe45c url(/ServicePortal/Content/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #b81900 url(/ServicePortal/Content/css/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
	color: #ffffff;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #ffffff;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #ffffff;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70);
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35);
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
	background-position: 16px 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_ffffff_256x240.png);
}
.ui-state-default .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_ef8c08_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_ef8c08_256x240.png);
}
.ui-state-active .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_ef8c08_256x240.png);
}
.ui-state-highlight .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_228ef1_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url(/ServicePortal/Content/css/images/ui-icons_ffd27a_256x240.png);
}

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

/* Overlays */
.ui-widget-overlay {
	background: #666666 url(/ServicePortal/Content/css/images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
	opacity: .5;
	filter: Alpha(Opacity=50);
}
.ui-widget-shadow {
	margin: -5px 0 0 -5px;
	padding: 5px;
	background: #000000 url(/ServicePortal/Content/css/images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
	opacity: .2;
	filter: Alpha(Opacity=20);
	border-radius: 5px;
}





@font-face {
    font-family: 'GeosansLight';
    src: url("/Content/font/GeosansLight.ttf") format("truetype"), url("/Content/font/GeosansLight.woff") format("woff");
}

body {
    font-family: "Hind", sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 10px;    
}


#captcha_inner a {
    touch-action: none;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.d-none {
    display: none;
}

.d-inline {
    display: inline;
}

.mobile-only {
    display: none;
}

.clear-fix {
    clear: both;
}

.margin-0 {
    margin: 0 !important;
}

@media all and (max-width: 1023px) {
    .mobile-only {
        display: block;
        height: auto !important;
    }
    .pc-only {
        display: none;
    }

    div.portal-verification
    {
        width: auto !important;
    }
}

.breadcrumbs,
.middle-bar {
    width: 100%;
    background: #d74b00;
    height: 65px;
    /*line-height: 65px;*/
    color: white;
    /*padding: 0 43.7px;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}
.breadcrumbs-info {
    line-height: 70px;
}

.breadcrumbs a,
.middle-bar a {
    /*font-size: 18px;*/
    font-size: 1.6rem;
    color: white;
    text-decoration: none;
}

    .breadcrumbs a:hover,
    .middle-bar a:hover {
        text-decoration: underline;
    }

    .breadcrumbs a.current,
    .middle-bar a.current {
        pointer-events: none;
        text-decoration: none;
    }

        .breadcrumbs a.current:hover,
        .middle-bar a.current:hover {
            text-decoration: none;
        }

.wrapper {
    max-width: 1366px;
    margin: 0 auto;
    position: relative;
}

.breadcrumbs-new {
    left: 15px;
    color: white;
    position: absolute;
    z-index: 8;
    top: 25px;
}

    .breadcrumbs-new a {
        font-size: 16px;
        color: white;
        text-decoration: none;
        display: inline-block;
        margin: 0 5px;
    }

        .breadcrumbs-new a:first-child {
            color: white;
        }

        .breadcrumbs-new a:hover {
            text-decoration: underline;
        }

        .breadcrumbs-new a.current {
            pointer-events: none;
            text-decoration: none;
            /*底下加了，麵包屑會跑版*/
            /*margin-top:10px;*/
        }

        .breadcrumbs-new a.current:hover {
            text-decoration: none;
        }

.setting-dropdown {
    position: absolute;
    right: 45px;
    /*top: 50%;*/
    /*transform: translateY(-50%);*/
    top: 10px;
    padding: 0px 40px;
    min-width: 170px;
    height: 42px;
    background: white;
    border-radius: 20px;
    font-size: 18px;
    color: black;
    z-index: 5;
    font-weight: normal;
    cursor: pointer;
}

    .setting-dropdown span {
        position: relative;
        top: -1px;
        left: 4px;
    }

    .setting-dropdown i {
        font-size: 25px;
    }

.setting-dropdown-menu {
    position: absolute;
    z-index: 3;
    min-width: 170px;
    right: 45px;
    background: #282828;
    padding: 25px 10px 10px 10px;
    /*top: 48px;*/
    top: 28px;
    border-radius: 0 0 10px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
}

    .setting-dropdown-menu li {
        padding: 5px 0;
        font-weight: normal;
        line-height: normal;
    }

        .setting-dropdown-menu li a {
            color: white;
            display: block;
            width: 100%;
            height: 100%;
            padding: 0px 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 1.6rem;
        }

/*mobile menu button*/
.toggle-btn {
    display: none;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    transition: 0.5s ease;
    z-index: 999;
    background: none;
    margin-top: 23px;
    position: relative;
}
    .toggle-btn:hover {
        -ms-transform: scale(1.05, 1.05); /* IE 9 */
        -webkit-transform: scale(1.05, 1.05); /* Safari */
        transform: scale(1.05, 1.05);
        cursor: pointer;
    }

    .toggle-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        margin: 2px 0;
        transition: 0.5s ease;
    }
    .toggle-btn:hover span {
        background: #fff;
    }
    .toggle-btn.active {
        z-index: 999;
    }
        .toggle-btn.active span {
            background: #fff;
        }
            .toggle-btn.active span:nth-child(1) {
                transform: rotate(-45deg);
            }
            .toggle-btn.active span:nth-child(2) {
                transform: rotate(-135deg);
                position: absolute;
                top: 5px;
            }
            .toggle-btn.active span:nth-child(3) {
                display: none;
            }

@media all and (max-width: 1023px) {
    .breadcrumbs {
        height: 51px;
        line-height: 51px;
        padding-left: 16px;
    }
        .breadcrumbs a {
            font-size: 16px;
        }
    .breadcrumbs-new {
        /*top: 77px;*/
        top: 20px;
    }
    .setting-dropdown {
        min-width: auto;
        padding: 0;
        color: white;
        background: transparent;
        right: 5px;
        top: 10px;
        width: 47px;
        border-radius: 1px;
        padding-bottom: 10px;
        padding-top: 0;
        -webkit-box-sizing: initial;
        box-sizing: initial;
        border-radius: 12px 12px 0 0;
        width: 60px !important;
    }
        .setting-dropdown.active {
            background: #282828;
        }
        .setting-dropdown span {
            display: none;
        }
        .setting-dropdown i {
            font-size: 20px;
            /*margin-left: 12px;*/
        }
    .setting-dropdown-menu {
        border-radius: 10px;
        top: 38px;
        right: 5px;
        padding: 15px 0px 10px 15px;
        -webkit-box-sizing: initial;
        box-sizing: initial;
    }
        .setting-dropdown-menu li {
            padding: 4px 0;
        }
    .toggle-btn {
        display: block;
    }
}

@media all and (max-width: 1023px) {
    body {
        min-width: auto;
    }
}
@media all and (max-width: 480px){
    .breadcrumbs-new a {
        font-size:12px;
    }

}
span.required {
    color: red;
}

.primary-circle-button {
    background: #d74b00;
    color: white;
    padding: 9px 30px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: normal;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

    .primary-circle-button:disabled {
        background: lightgray !important;
        color: white !important;
        cursor: not-allowed;
    }

    .primary-circle-button:hover {
        color: #D74B00;
        background: #D5D5D5;
    }

    .primary-circle-button.cancel {
        background: lightgray;
        color: white;
        padding: 9px 30px;
        border-radius: 20px;
        font-size: 18px;
        font-weight: normal;
    }

        .primary-circle-button.cancel:disabled {
            background: lightgray;
            cursor: not-allowed;
        }

.bg-white {
    background: white !important;
}

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.swiper-container {
    width: 100%;
    height: auto;
}

.context-menu ul li a {
    padding: 6px 20px;
}

/* The custom-checkbox */
.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .custom-checkbox input {
        position: absolute;
        display: none;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border: 1px solid #c9c5c5;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

/* On mouse-over, add a grey background color */
.custom-checkbox:hover input ~ .checkmark {
    background-color: #e7e5e5;
}

/* When the checkbox is checked, add a blue background */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #d74b00;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: none;
}

/* Show the checkmark when checked */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

table td[class*="col-"], table th[class*="col-"] {
    position: static;
    display: table-cell;
    float: none;
}

.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #dddddd;
}

table {
    background-color: transparent;
}

    table col[class*="col-"] {
        position: static;
        display: table-column;
        float: none;
    }

caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777777;
    text-align: left;
}

th {
    text-align: left;
}

.table {
    /*  width: 100%;*/
    max-width: 100%;
    margin-bottom: 20px;
}

    .table > thead > tr > th {
        vertical-align: bottom;
        border-bottom: 2px solid #dddddd;
    }

        .table > thead > tr > th.active {
            background-color: #f5f5f5;
        }

        .table > thead > tr > th.success {
            background-color: #dff0d8;
        }

        .table > thead > tr > th.info {
            background-color: #d9edf7;
        }

        .table > thead > tr > th.warning {
            background-color: #fcf8e3;
        }

        .table > thead > tr > th.danger {
            background-color: #f2dede;
        }

    .table > thead > tr > td.active {
        background-color: #f5f5f5;
    }

    .table > thead > tr > td.success {
        background-color: #dff0d8;
    }

    .table > thead > tr > td.info {
        background-color: #d9edf7;
    }

    .table > thead > tr > td.warning {
        background-color: #fcf8e3;
    }

    .table > thead > tr > td.danger {
        background-color: #f2dede;
    }

    .table > thead > tr.active > td {
        background-color: #f5f5f5;
    }

    .table > thead > tr.active > th {
        background-color: #f5f5f5;
    }

    .table > thead > tr.success > td {
        background-color: #dff0d8;
    }

    .table > thead > tr.success > th {
        background-color: #dff0d8;
    }

    .table > thead > tr.info > td {
        background-color: #d9edf7;
    }

    .table > thead > tr.info > th {
        background-color: #d9edf7;
    }

    .table > thead > tr.warning > td {
        background-color: #fcf8e3;
    }

    .table > thead > tr.warning > th {
        background-color: #fcf8e3;
    }

    .table > thead > tr.danger > td {
        background-color: #f2dede;
    }

    .table > thead > tr.danger > th {
        background-color: #f2dede;
    }

    .table > thead:first-child > tr:first-child > th {
        border-top: 0;
    }

    .table > thead:first-child > tr:first-child > td {
        border-top: 0;
    }

    .table > tbody > tr > th.active {
        background-color: #f5f5f5;
    }

    .table > tbody > tr > th.success {
        background-color: #dff0d8;
    }

    .table > tbody > tr > th.info {
        background-color: #d9edf7;
    }

    .table > tbody > tr > th.warning {
        background-color: #fcf8e3;
    }

    .table > tbody > tr > th.danger {
        background-color: #f2dede;
    }

    .table > tbody > tr > td.active {
        background-color: #f5f5f5;
    }

    .table > tbody > tr > td.success {
        background-color: #dff0d8;
    }

    .table > tbody > tr > td.info {
        background-color: #d9edf7;
    }

    .table > tbody > tr > td.warning {
        background-color: #fcf8e3;
    }

    .table > tbody > tr > td.danger {
        background-color: #f2dede;
    }

    .table > tbody > tr.active > td {
        background-color: #f5f5f5;
    }

    .table > tbody > tr.active > th {
        background-color: #f5f5f5;
    }

    .table > tbody > tr.success > td {
        background-color: #dff0d8;
    }

    .table > tbody > tr.success > th {
        background-color: #dff0d8;
    }

    .table > tbody > tr.info > td {
        background-color: #d9edf7;
    }

    .table > tbody > tr.info > th {
        background-color: #d9edf7;
    }

    .table > tbody > tr.warning > td {
        background-color: #fcf8e3;
    }

    .table > tbody > tr.warning > th {
        background-color: #fcf8e3;
    }

    .table > tbody > tr.danger > td {
        background-color: #f2dede;
    }

    .table > tbody > tr.danger > th {
        background-color: #f2dede;
    }

    .table > tbody + tbody {
        border-top: 2px solid #dddddd;
    }

    .table .table {
        background-color: #ffffff;
    }

    .table > tfoot > tr > th.active {
        background-color: #f5f5f5;
    }

    .table > tfoot > tr > th.success {
        background-color: #dff0d8;
    }

    .table > tfoot > tr > th.info {
        background-color: #d9edf7;
    }

    .table > tfoot > tr > th.warning {
        background-color: #fcf8e3;
    }

    .table > tfoot > tr > th.danger {
        background-color: #f2dede;
    }

    .table > tfoot > tr > td.active {
        background-color: #f5f5f5;
    }

    .table > tfoot > tr > td.success {
        background-color: #dff0d8;
    }

    .table > tfoot > tr > td.info {
        background-color: #d9edf7;
    }

    .table > tfoot > tr > td.warning {
        background-color: #fcf8e3;
    }

    .table > tfoot > tr > td.danger {
        background-color: #f2dede;
    }

    .table > tfoot > tr.active > td {
        background-color: #f5f5f5;
    }

    .table > tfoot > tr.active > th {
        background-color: #f5f5f5;
    }

    .table > tfoot > tr.success > td {
        background-color: #dff0d8;
    }

    .table > tfoot > tr.success > th {
        background-color: #dff0d8;
    }

    .table > tfoot > tr.info > td {
        background-color: #d9edf7;
    }

    .table > tfoot > tr.info > th {
        background-color: #d9edf7;
    }

    .table > tfoot > tr.warning > td {
        background-color: #fcf8e3;
    }

    .table > tfoot > tr.warning > th {
        background-color: #fcf8e3;
    }

    .table > tfoot > tr.danger > td {
        background-color: #f2dede;
    }

    .table > tfoot > tr.danger > th {
        background-color: #f2dede;
    }

    .table > caption + thead > tr:first-child > th {
        border-top: 0;
    }

    .table > caption + thead > tr:first-child > td {
        border-top: 0;
    }

    .table > colgroup + thead > tr:first-child > th {
        border-top: 0;
    }

    .table > colgroup + thead > tr:first-child > td {
        border-top: 0;
    }

.table-condensed > thead > tr > th {
    padding: 5px;
}

.table-condensed > thead > tr > td {
    padding: 5px;
}

.table-condensed > tbody > tr > th {
    padding: 5px;
}

.table-condensed > tbody > tr > td {
    padding: 5px;
}

.table-condensed > tfoot > tr > th {
    padding: 5px;
}

.table-condensed > tfoot > tr > td {
    padding: 5px;
}

.table-bordered {
    font-size: 1.4rem !important;
    border: 1px solid #dddddd !important;
}
.maintain.table-bordered {
    /*width:100%;*/
    width: calc(100% - 40px);
}
.table-bordered > thead > tr > th {
    background-color: #98a6ad;
    color: #ffffff;
    vertical-align: bottom;
    border-bottom: 1px solid #e4e7ea;
}

.table-bordered > thead > tr > td {
    /*border: 1px solid #dddddd;
    border-bottom-width: 2px;*/
    font-size: 1.6rem;
    font-weight: 400;
    padding: 15px 8px !important;
}

.table-bordered input 
{
    height: 26px;
    padding-left: 5px;
    width: 300px !important;
}

@media all and (min-width: 1024px) {
    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td {
        padding: 15px 8px !important;
    }

    .gotop 
    {
        bottom: 30px !important;
    }

    .livechat {
        bottom: 30px !important;
    }

    .right-sidebar {
        position: fixed;
        left: 0;
        bottom: 18%;
        z-index: 50;
        width: 20px;
    }

        .right-sidebar:hover {
            width: 70px;
        }

            .right-sidebar:hover .active, .right-sidebar:hover .prev, .right-sidebar:hover .next {
                display: block;
            }

            .right-sidebar:hover .toggle-button {
                display: none;
            }

    .right-sidebar-menu {
        cursor: pointer;
        width: 70px;
        height: 70px;
        /*background: #003a5db0;*/
        background: rgba(0,58,93,0.6);
        margin-top: 2px;
        color: white;
        -webkit-transition: background .35s ease-in-out;
        transition: background .35s ease-in-out;
        display: none;
    }



        .right-sidebar-menu:hover {
           /* background: #013a5ef5;*/
            background: rgba(0,58,93,0.9);
        }

    .right-sidebar-menu-content {
        display: block;
        float: left;
        height: 70px;
        min-width: 0;
        overflow: hidden;
        font-size: 18px;
        color: #fff !important;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        clear: both;
        /*background: #003a5db0;*/
        background: rgba(0,58,93,0.6);
        -moz-transition: min-width ease 0s 0.3s;
        -o-transition: min-width ease 0s 0.3s;
        -webkit-transition: min-width ease 0s 0.3s;
        transition: min-width ease 0s 0.3s;
    }

        .right-sidebar-menu-content a:hover, .right-sidebar-menu-content a:active {
            outline: 0;
        }

        .right-sidebar-menu-content span {
            display: inline-block;
            max-width: 0;
            overflow: hidden;
            height: 70px;
            padding: 18px 0 17px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            white-space: nowrap;
            white-space: normal\9;
            -moz-transition: max-width ease 0.3s, padding ease 0.3s;
            -o-transition: max-width ease 0.3s, padding ease 0.3s;
            -webkit-transition: max-width ease 0.3s, padding ease 0.3s;
            transition: max-width ease 0.3s, padding ease 0.3s;
            line-height: 35px;
        }

        .right-sidebar-menu-content i {
            float: right;
            width: 70px;
            height: 70px;
            display: table-cell;
            text-align: center;
            line-height: 70px;
            vertical-align: middle;
        }

        .right-sidebar-menu-content:hover span {
            max-width: 300px;
            padding: 18px 20px 17px;
            background: #013a5ef5;
        }

        .right-sidebar-menu-content img {
            width: 60%;
            height: 60%;
            vertical-align: middle;
        }

    .right-sidebar-menu.prev, .right-sidebar-menu.next {
        font-size: 50px;
        text-align: center;
        height: 35px;
    }
        .right-sidebar-menu.prev.disabled, .right-sidebar-menu.next.disabled {
            cursor: auto !important;
            background: lightgray !important;
        }

        .right-sidebar-menu.prev i, .right-sidebar-menu.next i {
            vertical-align: text-top;
            margin-top: -10px;
        }

    .right-sidebar-menu.toggle-button {
        font-size: 40px;
        text-align: center;
        position: relative;
        display: block;
        height: 350px;
        width: 20px;
    }

        .right-sidebar-menu.toggle-button i {
            display: block;
            position: absolute;
            text-align: center;
            width: 100%;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

            .right-sidebar-menu.toggle-button i.active {
                display: block;
            }
}

.table-bordered > tfoot > tr > td {
    border: 1px solid #dddddd;
}

.table-bordered button {
    color: #666;
    background: #fff;
    border-radius: 7px;
    font-size: 1em;
    font-weight: normal;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 40px !important;
    margin: 0 3px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        border: 1px solid #dddddd;
    }

        .table-responsive > .table {
            margin-bottom: 0;
        }

            .table-responsive > .table > thead > tr > th {
                white-space: nowrap;
            }

            .table-responsive > .table > thead > tr > td {
                white-space: nowrap;
            }

            .table-responsive > .table > tbody > tr > th {
                white-space: nowrap;
            }

            .table-responsive > .table > tbody > tr > td {
                white-space: nowrap;
            }

            .table-responsive > .table > tfoot > tr > th {
                white-space: nowrap;
            }

            .table-responsive > .table > tfoot > tr > td {
                white-space: nowrap;
            }

        .table-responsive > .table-bordered {
            border: 0;
        }

            .table-responsive > .table-bordered > thead > tr > th:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > thead > tr > th:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > thead > tr > td:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > thead > tr > td:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tbody > tr > th:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > tbody > tr > th:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tbody > tr > td:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > tbody > tr > td:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tbody > tr:last-child > th {
                border-bottom: 0;
            }

            .table-responsive > .table-bordered > tbody > tr:last-child > td {
                border-bottom: 0;
            }

            .table-responsive > .table-bordered > tfoot > tr > th:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > tfoot > tr > th:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tfoot > tr > td:first-child {
                border-left: 0;
            }

            .table-responsive > .table-bordered > tfoot > tr > td:last-child {
                border-right: 0;
            }

            .table-responsive > .table-bordered > tfoot > tr:last-child > th {
                border-bottom: 0;
            }

            .table-responsive > .table-bordered > tfoot > tr:last-child > td {
                border-bottom: 0;
            }
}

.clearfix:before {
    display: table;
    content: " ";
}

.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.hidden {
    display: none !important;
}

.affix {
    position: fixed;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

    .table-hover > tbody > tr:hover > .active {
        background-color: #e8e8e8;
    }

    .table-hover > tbody > tr:hover > .success {
        background-color: #d0e9c6;
    }

    .table-hover > tbody > tr:hover > .info {
        background-color: #c4e3f3;
    }

    .table-hover > tbody > tr:hover > .warning {
        background-color: #faf2cc;
    }

    .table-hover > tbody > tr:hover > .danger {
        background-color: #ebcccc;
    }

.table-hover > tbody > tr > td.active:hover {
    background-color: #e8e8e8;
}

.table-hover > tbody > tr > td.success:hover {
    background-color: #d0e9c6;
}

.table-hover > tbody > tr > td.info:hover {
    background-color: #c4e3f3;
}

.table-hover > tbody > tr > td.warning:hover {
    background-color: #faf2cc;
}

.table-hover > tbody > tr > td.danger:hover {
    background-color: #ebcccc;
}

.table-hover > tbody > tr > th.active:hover {
    background-color: #e8e8e8;
}

.table-hover > tbody > tr > th.success:hover {
    background-color: #d0e9c6;
}

.table-hover > tbody > tr > th.info:hover {
    background-color: #c4e3f3;
}

.table-hover > tbody > tr > th.warning:hover {
    background-color: #faf2cc;
}

.table-hover > tbody > tr > th.danger:hover {
    background-color: #ebcccc;
}

.table-hover > tbody > tr.active:hover > td {
    background-color: #e8e8e8;
}

.table-hover > tbody > tr.active:hover > th {
    background-color: #e8e8e8;
}

.table-hover > tbody > tr.success:hover > td {
    background-color: #d0e9c6;
}

.table-hover > tbody > tr.success:hover > th {
    background-color: #d0e9c6;
}

.table-hover > tbody > tr.info:hover > td {
    background-color: #c4e3f3;
}

.table-hover > tbody > tr.info:hover > th {
    background-color: #c4e3f3;
}

.table-hover > tbody > tr.warning:hover > td {
    background-color: #faf2cc;
}

.table-hover > tbody > tr.warning:hover > th {
    background-color: #faf2cc;
}

.table-hover > tbody > tr.danger:hover > td {
    background-color: #ebcccc;
}

.table-hover > tbody > tr.danger:hover > th {
    background-color: #ebcccc;
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination > li {
        display: inline;
    }

        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #ffffff;
            border: 1px solid #dddddd;
        }

            .pagination > li > a:hover,
            .pagination > li > span:hover,
            .pagination > li > a:focus,
            .pagination > li > span:focus {
                z-index: 2;
                color: #23527c;
                background-color: #eeeeee;
                border-color: #dddddd;
            }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 3;
        color: #ffffff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }

    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777777;
        cursor: not-allowed;
        background-color: #ffffff;
        border-color: #dddddd;
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

    .pager li {
        display: inline;
    }

        .pager li > a,
        .pager li > span {
            display: inline-block;
            padding: 5px 14px;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 15px;
        }

            .pager li > a:hover,
            .pager li > a:focus {
                text-decoration: none;
                background-color: #eeeeee;
            }

    .pager .next > a,
    .pager .next > span {
        float: right;
    }

    .pager .previous > a,
    .pager .previous > span {
        float: left;
    }

    .pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span {
        color: #777777;
        cursor: not-allowed;
        background-color: #ffffff;
    }

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
    }

    .btn:hover,
    .btn:focus,
    .btn.focus {
        color: #333333;
        text-decoration: none;
    }

    .btn:active,
    .btn.active {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn {
        cursor: not-allowed;
        filter: alpha(opacity=65);
        opacity: 0.65;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}

.btn-default {
    color: #333333;
    background-color: #ffffff;
    border-color: #cccccc;
}

    .btn-default:focus,
    .btn-default.focus {
        color: #333333;
        background-color: #e6e6e6;
        border-color: #8c8c8c;
    }

    .btn-default:hover {
        color: #333333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        color: #333333;
        background-color: #e6e6e6;
        background-image: none;
        border-color: #adadad;
    }

        .btn-default:active:hover,
        .btn-default.active:hover,
        .open > .dropdown-toggle.btn-default:hover,
        .btn-default:active:focus,
        .btn-default.active:focus,
        .open > .dropdown-toggle.btn-default:focus,
        .btn-default:active.focus,
        .btn-default.active.focus,
        .open > .dropdown-toggle.btn-default.focus {
            color: #333333;
            background-color: #d4d4d4;
            border-color: #8c8c8c;
        }

    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled.focus,
    .btn-default[disabled].focus,
    fieldset[disabled] .btn-default.focus {
        background-color: #ffffff;
        border-color: #cccccc;
    }

    .btn-default .badge {
        color: #ffffff;
        background-color: #333333;
    }

.btn-primary {
    color: #ffffff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .btn-primary:focus,
    .btn-primary.focus {
        color: #ffffff;
        background-color: #286090;
        border-color: #122b40;
    }

    .btn-primary:hover {
        color: #ffffff;
        background-color: #286090;
        border-color: #204d74;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        color: #ffffff;
        background-color: #286090;
        background-image: none;
        border-color: #204d74;
    }

        .btn-primary:active:hover,
        .btn-primary.active:hover,
        .open > .dropdown-toggle.btn-primary:hover,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .open > .dropdown-toggle.btn-primary:focus,
        .btn-primary:active.focus,
        .btn-primary.active.focus,
        .open > .dropdown-toggle.btn-primary.focus {
            color: #ffffff;
            background-color: #204d74;
            border-color: #122b40;
        }

    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled.focus,
    .btn-primary[disabled].focus,
    fieldset[disabled] .btn-primary.focus {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .btn-primary .badge {
        color: #337ab7;
        background-color: #ffffff;
    }

.btn-success {
    color: #ffffff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

    .btn-success:focus,
    .btn-success.focus {
        color: #ffffff;
        background-color: #449d44;
        border-color: #255625;
    }

    .btn-success:hover {
        color: #ffffff;
        background-color: #449d44;
        border-color: #398439;
    }

    .btn-success:active,
    .btn-success.active,
    .open > .dropdown-toggle.btn-success {
        color: #ffffff;
        background-color: #449d44;
        background-image: none;
        border-color: #398439;
    }

        .btn-success:active:hover,
        .btn-success.active:hover,
        .open > .dropdown-toggle.btn-success:hover,
        .btn-success:active:focus,
        .btn-success.active:focus,
        .open > .dropdown-toggle.btn-success:focus,
        .btn-success:active.focus,
        .btn-success.active.focus,
        .open > .dropdown-toggle.btn-success.focus {
            color: #ffffff;
            background-color: #398439;
            border-color: #255625;
        }

    .btn-success.disabled:hover,
    .btn-success[disabled]:hover,
    fieldset[disabled] .btn-success:hover,
    .btn-success.disabled:focus,
    .btn-success[disabled]:focus,
    fieldset[disabled] .btn-success:focus,
    .btn-success.disabled.focus,
    .btn-success[disabled].focus,
    fieldset[disabled] .btn-success.focus {
        background-color: #5cb85c;
        border-color: #4cae4c;
    }

    .btn-success .badge {
        color: #5cb85c;
        background-color: #ffffff;
    }

.btn-info {
    color: #ffffff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

    .btn-info:focus,
    .btn-info.focus {
        color: #ffffff;
        background-color: #31b0d5;
        border-color: #1b6d85;
    }

    .btn-info:hover {
        color: #ffffff;
        background-color: #31b0d5;
        border-color: #269abc;
    }

    .btn-info:active,
    .btn-info.active,
    .open > .dropdown-toggle.btn-info {
        color: #ffffff;
        background-color: #31b0d5;
        background-image: none;
        border-color: #269abc;
    }

        .btn-info:active:hover,
        .btn-info.active:hover,
        .open > .dropdown-toggle.btn-info:hover,
        .btn-info:active:focus,
        .btn-info.active:focus,
        .open > .dropdown-toggle.btn-info:focus,
        .btn-info:active.focus,
        .btn-info.active.focus,
        .open > .dropdown-toggle.btn-info.focus {
            color: #ffffff;
            background-color: #269abc;
            border-color: #1b6d85;
        }

    .btn-info.disabled:hover,
    .btn-info[disabled]:hover,
    fieldset[disabled] .btn-info:hover,
    .btn-info.disabled:focus,
    .btn-info[disabled]:focus,
    fieldset[disabled] .btn-info:focus,
    .btn-info.disabled.focus,
    .btn-info[disabled].focus,
    fieldset[disabled] .btn-info.focus {
        background-color: #5bc0de;
        border-color: #46b8da;
    }

    .btn-info .badge {
        color: #5bc0de;
        background-color: #ffffff;
    }

.btn-warning, .btnModify {
    color: #ffffff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

    .btn-warning:focus,
    .btn-warning.focus, .btnModify:foucs {
        color: #ffffff;
        background-color: #ec971f;
        border-color: #985f0d;
    }

    .btn-warning:hover, .btnModify:hover {
        color: #ffffff;
        background-color: #ec971f;
        border-color: #d58512;
    }

    .btn-warning:active,
    .btn-warning.active,
    .btnModify.actice,
    .open > .dropdown-toggle.btn-warning {
        color: #ffffff;
        background-color: #ec971f;
        background-image: none;
        border-color: #d58512;
    }

        .btn-warning:active:hover,
        .btn-warning.active:hover,
        .open > .dropdown-toggle.btn-warning:hover,
        .btn-warning:active:focus,
        .btn-warning.active:focus,
        .open > .dropdown-toggle.btn-warning:focus,
        .btn-warning:active.focus,
        .btn-warning.active.focus,
        .open > .dropdown-toggle.btn-warning.focus {
            color: #ffffff;
            background-color: #d58512;
            border-color: #985f0d;
        }

    .btn-warning.disabled:hover,
    .btn-warning[disabled]:hover,
    fieldset[disabled] .btn-warning:hover,
    .btn-warning.disabled:focus,
    .btn-warning[disabled]:focus,
    fieldset[disabled] .btn-warning:focus,
    .btn-warning.disabled.focus,
    .btn-warning[disabled].focus,
    fieldset[disabled] .btn-warning.focus {
        background-color: #f0ad4e;
        border-color: #eea236;
    }

    .btn-warning .badge {
        color: #f0ad4e;
        background-color: #ffffff;
    }

.btn-danger {
    color: #ffffff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

    .btn-danger:focus,
    .btn-danger.focus {
        color: #ffffff;
        background-color: #c9302c;
        border-color: #761c19;
    }

    .btn-danger:hover {
        color: #ffffff;
        background-color: #c9302c;
        border-color: #ac2925;
    }

    .btn-danger:active,
    .btn-danger.active,
    .open > .dropdown-toggle.btn-danger {
        color: #ffffff;
        background-color: #c9302c;
        background-image: none;
        border-color: #ac2925;
    }

        .btn-danger:active:hover,
        .btn-danger.active:hover,
        .open > .dropdown-toggle.btn-danger:hover,
        .btn-danger:active:focus,
        .btn-danger.active:focus,
        .open > .dropdown-toggle.btn-danger:focus,
        .btn-danger:active.focus,
        .btn-danger.active.focus,
        .open > .dropdown-toggle.btn-danger.focus {
            color: #ffffff;
            background-color: #ac2925;
            border-color: #761c19;
        }

    .btn-danger.disabled:hover,
    .btn-danger[disabled]:hover,
    fieldset[disabled] .btn-danger:hover,
    .btn-danger.disabled:focus,
    .btn-danger[disabled]:focus,
    fieldset[disabled] .btn-danger:focus,
    .btn-danger.disabled.focus,
    .btn-danger[disabled].focus,
    fieldset[disabled] .btn-danger.focus {
        background-color: #d9534f;
        border-color: #d43f3a;
    }

    .btn-danger .badge {
        color: #d9534f;
        background-color: #ffffff;
    }

.btn-link {
    font-weight: 400;
    color: #337ab7;
    border-radius: 0;
}

    .btn-link,
    .btn-link:active,
    .btn-link.active,
    .btn-link[disabled],
    fieldset[disabled] .btn-link {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .btn-link,
        .btn-link:hover,
        .btn-link:focus,
        .btn-link:active {
            border-color: transparent;
        }

            .btn-link:hover,
            .btn-link:focus {
                color: #23527c;
                text-decoration: underline;
                background-color: transparent;
            }

            .btn-link[disabled]:hover,
            fieldset[disabled] .btn-link:hover,
            .btn-link[disabled]:focus,
            fieldset[disabled] .btn-link:focus {
                color: #777777;
                text-decoration: none;
            }

.btn-lg,
.btn-group-lg > .btn {
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-xs,
.btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-block {
    display: block;
    width: 100%;
}

    .btn-block + .btn-block {
        margin-top: 5px;
    }

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}

.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

    .btn-group > .btn,
    .btn-group-vertical > .btn {
        position: relative;
        float: left;
    }

        .btn-group > .btn:hover,
        .btn-group-vertical > .btn:hover,
        .btn-group > .btn:focus,
        .btn-group-vertical > .btn:focus,
        .btn-group > .btn:active,
        .btn-group-vertical > .btn:active,
        .btn-group > .btn.active,
        .btn-group-vertical > .btn.active {
            z-index: 2;
        }

    .btn-group .btn + .btn,
    .btn-group .btn + .btn-group,
    .btn-group .btn-group + .btn,
    .btn-group .btn-group + .btn-group {
        margin-left: -1px;
    }

.btn-toolbar {
    margin-left: -5px;
}

    .btn-toolbar .btn,
    .btn-toolbar .btn-group,
    .btn-toolbar .input-group {
        float: left;
    }

    .btn-toolbar > .btn,
    .btn-toolbar > .btn-group,
    .btn-toolbar > .input-group {
        margin-left: 5px;
    }

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn-group > .btn:first-child {
    margin-left: 0;
}

    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-group > .btn-group {
    float: left;
}

    .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
    }

    .btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
    .btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group > .btn + .dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
}

.btn-group > .btn-lg + .dropdown-toggle {
    padding-right: 12px;
    padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

    .btn-group.open .dropdown-toggle.btn-link {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.btn .caret {
    margin-left: 0;
}

.btn-lg .caret {
    border-width: 5px 5px 0;
    border-bottom-width: 0;
}

.dropup .btn-lg .caret {
    border-width: 0 5px 5px;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
}

    .btn-group-vertical > .btn-group > .btn {
        float: none;
    }

    .btn-group-vertical > .btn + .btn,
    .btn-group-vertical > .btn + .btn-group,
    .btn-group-vertical > .btn-group + .btn,
    .btn-group-vertical > .btn-group + .btn-group {
        margin-top: -1px;
        margin-left: 0;
    }

    .btn-group-vertical > .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .btn-group-vertical > .btn:first-child:not(:last-child) {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-group-vertical > .btn:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
        border-radius: 0;
    }

    .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
    .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}

    .btn-group-justified > .btn,
    .btn-group-justified > .btn-group {
        display: table-cell;
        float: none;
        width: 1%;
    }

        .btn-group-justified > .btn-group .btn {
            width: 100%;
        }

        .btn-group-justified > .btn-group .dropdown-menu {
            left: auto;
        }

[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"],
[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.clearfix:before,
.clearfix:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after {
    display: table;
    content: " ";
}

.header {
    height: 60px;
    width: 100%;
    background: #282828;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 10;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

    .header nav {
        height: 100%;
        margin-left: 50px;
    }

        .header nav > ul {
            height: 100%;
            list-style: none;
            margin: 0;
        }

            .header nav > ul > li {
                height: 100%;
                line-height: 60px;
                float: left;
                padding-right: 35px;
                color: white;
                font-size: 16px;
                position: relative;
                cursor: pointer;
                white-space: nowrap;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-transition: all 0.4s;
                transition: all 0.4s;
            }

                /*
                .header nav > ul > li:hover {
                    color: #d74b00;
                }

                    .header nav > ul > li:hover a {
                        color: #d74b00;
                    }
*/
                .header nav > ul > li.logined {
                    padding-right: 35px !important;
                }

                    .header nav > ul > li.logined a {
                        text-align: right;
                    }

                .header nav > ul > li.before-login .fa-user {
                    position: relative;
                    top: 1px;
                    right: -6px;
                }

                .header nav > ul > li.has-right-line {
                    padding-right: 24px;
                }

                    .header nav > ul > li.has-right-line::after {
                        right: 0px;
                        top: 17px;
                        content: '';
                        position: absolute;
                        height: 26px;
                        width: 1px;
                        background: #ffffff;
                    }

                    .header nav > ul > li.has-right-line + li {
                        padding-left: 24px;
                    }

                .header nav > ul > li.mobile-only {
                    display: none;
                }

                .header nav > ul > li a {
                    display: inline-block;
                    height: 100%;
                    width: 100%;
                    color: white;
                    text-decoration: none;
                    font-size: 16px;
                    font-size: 1.6rem;
                    -webkit-transition: all 0.4s;
                    transition: all 0.4s;
                    font-family: "Hind", sans-serif;
                }

                .header nav > ul > li .sub-menu {
                    padding: 10px 15px;
                    background: #282828;
                    min-width: 194px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    position: absolute;
                    overflow: hidden;
                    display: none;
                }

                    .header nav > ul > li .sub-menu li {
                        height: 40px;
                        position: relative;
                        padding-left: 5px;
                        -webkit-transition: all 0.5s;
                        transition: all 0.5s;
                        line-height: 40px;
                    }

                        .header nav > ul > li .sub-menu li:hover {
                            background: #5c5858;
                        }

                        .header nav > ul > li .sub-menu li a {
                            color: white;
                            vertical-align: top;
                            top: 0;
                            line-height: 40px;
                            text-align: left;
                        }

                            .header nav > ul > li .sub-menu li a .count {
                                color: #d74b00;
                                margin: 5px;
                            }

                        .header nav > ul > li .sub-menu li.divided {
                            background: #d74b00;
                            height: 1px;
                            margin: 10px 0;
                        }

                .header nav > ul > li .user-dropdown {
                    position: relative;
                }

                    .header nav > ul > li .user-dropdown .user-menu {
                        left: -89px;
                        top: 60px;
                    }

                    .header nav > ul > li .user-dropdown li i {
                        background: url("/Content/image/header/ic_user_menu.png") no-repeat center;
                        width: 26px;
                        display: inline-block;
                        height: 31px;
                        margin-right: 15px;
                        margin-top: 10px;
                    }

                        .header nav > ul > li .user-dropdown li i.ic-exams {
                            background-position-y: 0px;
                        }

                        .header nav > ul > li .user-dropdown li i.ic-message {
                            background-position-y: -46px;
                        }

                        .header nav > ul > li .user-dropdown li i.ic-profile {
                            background-position-y: -89px;
                        }

                        .header nav > ul > li .user-dropdown li i.ic-system {
                            background-position-y: -132px;
                        }

                        .header nav > ul > li .user-dropdown li i.ic-signout {
                            background-position-y: -199px;
                        }

                .header nav > ul > li .language-menu {
                    left: -141px;
                    top: 46px;
                }

                    .header nav > ul > li .language-menu li.active a {
                        color: #d74b00;
                    }

                .header nav > ul > li .search-dropdown {
                    background: #282828;
                    padding: 10px 11px;
                    right: -136%;
                    position: absolute;
                    display: none;
                }

                .header nav > ul > li .search-dropdown-simple {
                    color: white !important;
                    width: 280px;
                    -ms-flex-pack: distribute;
                    justify-content: space-around;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                }

                    .header nav > ul > li .search-dropdown-simple input {
                        width: 206px;
                        height: 21px;
                        font-size: 16px;
                        padding-left: 2px;
                    }

                .header nav > ul > li .search-dropdown-advance {
                    width: 450px;
                    display: none;
                }

                    .header nav > ul > li .search-dropdown-advance form {
                        color: white !important;
                        font-size: 16px;
                    }

                        .header nav > ul > li .search-dropdown-advance form .chk-module {
                            text-align: center;
                        }

                            .header nav > ul > li .search-dropdown-advance form .chk-module label {
                                margin: 0 10px;
                            }

                        .header nav > ul > li .search-dropdown-advance form label {
                            line-height: 0;
                        }

                        .header nav > ul > li .search-dropdown-advance form .form-group {
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-align: center;
                            -ms-flex-align: center;
                            align-items: center;
                            -webkit-box-pack: start;
                            -ms-flex-pack: start;
                            justify-content: flex-start;
                            line-height: 0;
                        }

                            .header nav > ul > li .search-dropdown-advance form .form-group + .form-group {
                                margin-top: 30px;
                            }

                            .header nav > ul > li .search-dropdown-advance form .form-group > label {
                                width: 40%;
                                color: white !important;
                                text-align: right;
                                margin-right: 40px;
                            }

                            .header nav > ul > li .search-dropdown-advance form .form-group .radio-group.break-line {
                                position: relative;
                                top: 18px;
                            }

                                .header nav > ul > li .search-dropdown-advance form .form-group .radio-group.break-line label {
                                    width: 100%;
                                    display: block;
                                    line-height: 30px;
                                }

                            .header nav > ul > li .search-dropdown-advance form .form-group input[type=text] {
                                height: 22px;
                                font-size: 16px;
                            }

                                .header nav > ul > li .search-dropdown-advance form .form-group input[type=text].short {
                                    width: 40px;
                                }

                            .header nav > ul > li .search-dropdown-advance form .form-group select {
                                height: 28px;
                                font-size: 16px;
                            }

                            .header nav > ul > li .search-dropdown-advance form .form-group .date-picker-group {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                            }

                                .header nav > ul > li .search-dropdown-advance form .form-group .date-picker-group input {
                                    width: 50px;
                                }

                    .header nav > ul > li .search-dropdown-advance .text-center button {
                        margin: 23px 10px 0 10px;
                    }

.header-left {
    float: left;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*: 30%;*/
    min-width: 425px;
}

    .header-left img.logo {
        width: 95px;
        float: left;
    }

.header-right {
    float: right;
    width: 50%;
    min-width: 600px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

    .header-right nav {
        margin: 0;
    }

        .header-right nav .fa-user {
            margin: 10px;
        }

        .header-right nav .language-dropdown {
            position: relative;
        }

            .header-right nav .language-dropdown img {
                width: 50%;
            }

            .header-right nav .language-dropdown .fa-angle-down {
                font-weight: 400;
                font-size: 24px;
                top: 4px;
                position: relative;
                margin-left: 4px;
                -moz-transition: all .3s linear;
                -webkit-transition: all .3s linear;
                transition: all .3s linear;
            }

                .header-right nav .language-dropdown .fa-angle-down.rotate {
                    -ms-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
                }

    .header-right a, span.current-language {
        font-size: 14px !important;
    }

.header-search {
    width: 100%;
    left: 0;
    position: fixed;
    top: -100px;
    z-index: 9;
    height: 100px;
    background: #282828;
    -webkit-transition: 1s all ease-in-out;
    transition: 1s all ease-in-out;
    opacity: 0;
}

    .header-search.open {
        top: 60px;
        opacity: 1;
    }

    .header-search .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        height: 100%;
    }

.header-search-bar {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .header-search-bar input {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 400px;
        height: 40px;
        padding: 6px 50px 0 16px;
        background: #505050;
        font-size: 1.6rem;
        border: none;
        border-radius: 4px;
        color: white;
    }

    .header-search-bar .ic-search {
        font-size: 1.9rem;
        position: relative;
        left: -35px;
        cursor: pointer;
    }

    .header-search-bar .close {
        opacity: 1;
        color: white;
        float: none;
        font-size: 4.8rem;
        font-weight: lighter;
    }

@media all and (min-width: 1024px) and (max-width: 1366px) {
    .header .header-left {
        min-width: auto;
        width: 44%;
    }

    .header nav > ul > li {
        padding-right: 15px;
    }

    .header .header-right {
        width: 56%;
        min-width: auto;
    }

        .header .header-right ul li:last-child {
            padding-right: 0 !important;
        }
}

@media all and (max-width: 1023px) {
    .header nav > ul > li {
        font-size: 15px;
    }

        .header nav > ul > li.mobile-only {
            display: block;
            padding-right: 0;
            margin-right: 10px;
            display: none;
        }

        .header nav > ul > li.mobile-only .toggle-btn {
            margin-right: 10px;            
        }

        .header nav > ul > li.mobile-only:after {
            content: '|';
            color: white;
            position: absolute;
            right: -5px;
            top: 0;
        }

        .header nav > ul > li:hover {
            color: white;
        }

            .header nav > ul > li:hover a {
                color: white;
            }

        .header nav > ul > li.logined {
            padding-right: 12px !important;
        }

        .header nav > ul > li:last-child {
            padding-right: 0 !important;
        }

        .header nav > ul > li.has-right-line {
            padding-right: 10px;
        }

            .header nav > ul > li.has-right-line + li {
                padding-left: 14px;
            }

        .header nav > ul > li a {
            font-size: 15px !important;
        }

        .header nav > ul > li .user-dropdown {
            position: relative;
            left: -10px;
        }

            .header nav > ul > li .user-dropdown .user-menu {
                zoom: 0.9;
                left: -94px;
            }

            .header nav > ul > li .user-dropdown li:hover {
                background: #5c5858;
            }

        .header nav > ul > li .language-menu {
            zoom: 0.9 !important;
        }

    .header .header-left {
        width: auto;
        min-width: auto;
    }

        .header .header-left img.logo {
            width: 90px;
        }

        .header .header-left nav {
            display: none;
            position: absolute;
            left: 0;
            top: 60px;
            width: 100%;
            background: #282828;
            margin-left: 0px;
            height: auto;
        }

            .header .header-left nav.active {
                display: block;
            }

            .header .header-left nav li {
                float: none;
                width: 100%;
                line-height: 48px;
            }

                .header .header-left nav li a {
                    padding: 0 15px;
                }

                    .header .header-left nav li a:hover {
                        color: #D74B00;
                    }

    .header .header-right {
        min-width: auto;
        width: auto;
        position: absolute;
        right: 10px;
    }
}

.scrollbar-measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

.pp-overflow-hidden {
    overflow: hidden;
}

.pp-nav {
    position: fixed;
    z-index: 2100;
    top: 0px;
    left: 0px;
    height: 60px;
    padding: 0 15px;
    max-width: 100vw;
}

.pp-nav--black {
    background: #282828;
    position: fixed;
    z-index: 2100;
}

.pp-nav nav {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.pp-nav__left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    height: 100%;
}

.pp-nav__left--logo {
    margin: 0 50px 0 0;
}

    .pp-nav__left--logo img {
        width: 95px;
        height: auto;
    }

.pp-nav__left--menu {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

    .pp-nav__left--menu li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%;
        margin: 0 35px 0 0;
        color: color(white);
    }

        .pp-nav__left--menu li a {
            color: #ffffff;
            cursor: pointer;
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

            .pp-nav__left--menu li a.active {
                color: #d74b00;
            }

            .pp-nav__left--menu li a.has-icon {
                line-height: 34px;
            }

                .pp-nav__left--menu li a.has-icon:before {
                    content: '';
                    position: absolute;
                    height: 26px;
                    width: 1px;
                    left: 0px;
                    top: 4px;
                    background: color(white);
                }

                .pp-nav__left--menu li a.has-icon:after {
                    content: '';
                    position: absolute;
                    height: 26px;
                    width: 1px;
                    right: 0px;
                    top: 4px;
                    background: color(white);
                }

                .pp-nav__left--menu li a.has-icon.prev-has-icon {
                    margin: 0 0 0 -35px;
                }

                    .pp-nav__left--menu li a.has-icon.prev-has-icon:before {
                        content: none;
                    }

.pp-nav__right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    height: 100%;
}

.pp-nav__right--menu {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

    .pp-nav__right--menu li {
        display: inline-block;
        margin: 0 0 0 20px;
        position: relative;
        color: color(white);
        font-size: 12px;
        line-height: 20px;
    }

        .pp-nav__right--menu li a {
            font-size: 14px;
            line-height: 20px;
            color: color(white);
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

            .pp-nav__right--menu li a.pp-open-lang-switcher {
                cursor: pointer;
            }

                .pp-nav__right--menu li a.pp-open-lang-switcher .lang-code {
                    text-transform: uppercase;
                }

                .pp-nav__right--menu li a.pp-open-lang-switcher .lang-name {
                    margin: 0 10px 0 0;
                }

            .pp-nav__right--menu li a.has-icon {
                line-height: 34px;
            }

                .pp-nav__right--menu li a.has-icon:before {
                    content: '';
                    position: absolute;
                    height: 26px;
                    width: 1px;
                    left: 0px;
                    top: 4px;
                    background: color(white);
                }

                .pp-nav__right--menu li a.has-icon:after {
                    content: '';
                    position: absolute;
                    height: 26px;
                    width: 1px;
                    right: 0px;
                    top: 4px;
                    background: color(white);
                }

                .pp-nav__right--menu li a.has-icon.prev-has-icon {
                    margin: 0 0 0 -35px;
                }

                    .pp-nav__right--menu li a.has-icon.prev-has-icon:before {
                        content: none;
                    }

.pp-nav__right--menu-mobile {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    height: 100%;
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

    .pp-nav__right--menu-mobile li {
        display: inline-block;
        margin: 0 0 0 20px;
        position: relative;
        color: color(white);
        font-size: 12px;
        line-height: 20px;
    }

        .pp-nav__right--menu-mobile li a {
            font-size: 12px;
            line-height: 20px;
            color: color(white);
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }

            .pp-nav__right--menu-mobile li a.pp-open-lang-switcher {
                cursor: pointer;
            }

                .pp-nav__right--menu-mobile li a.pp-open-lang-switcher .lang-code {
                    text-transform: uppercase;
                    margin: 0 10px 0 0;
                }

            .pp-nav__right--menu-mobile li a.has-icon {
                line-height: 34px;
            }

                .pp-nav__right--menu-mobile li a.has-icon:before {
                    content: '';
                    position: absolute;
                    height: 16px;
                    width: 1px;
                    left: 0px;
                    top: 9px;
                    background: color(white);
                }

                .pp-nav__right--menu-mobile li a.has-icon:after {
                    content: '';
                    position: absolute;
                    height: 16px;
                    width: 1px;
                    right: 0px;
                    top: 9px;
                    background: color(white);
                }

                .pp-nav__right--menu-mobile li a.has-icon.prev-has-icon {
                    margin: 0 0 0 -35px;
                }

                    .pp-nav__right--menu-mobile li a.has-icon.prev-has-icon:before {
                        content: none;
                    }

            .pp-nav__right--menu-mobile li a.pp-open-mobile-menu {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                margin: 0 0 0 10px;
                position: relative;
                width: 16px;
                height: 16px;
            }

                .pp-nav__right--menu-mobile li a.pp-open-mobile-menu span {
                    display: block;
                    width: 16px;
                    height: 1px;
                    background: #ffffff;
                    -webkit-transition: all linear 250ms;
                    transition: all linear 250ms;
                }

                    .pp-nav__right--menu-mobile li a.pp-open-mobile-menu span:nth-child(2) {
                        margin: 3px 0;
                    }

                    .pp-nav__right--menu-mobile li a.pp-open-mobile-menu span:last-child {
                        margin: 0 0 2px 0;
                    }

                .pp-nav__right--menu-mobile li a.pp-open-mobile-menu.open span {
                    margin: 0;
                    position: absolute;
                }

                    .pp-nav__right--menu-mobile li a.pp-open-mobile-menu.open span:nth-child(1) {
                        -webkit-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                    }

                    .pp-nav__right--menu-mobile li a.pp-open-mobile-menu.open span:nth-child(2) {
                        -webkit-transform: rotate(45deg);
                        transform: rotate(45deg);
                    }

                    .pp-nav__right--menu-mobile li a.pp-open-mobile-menu.open span:nth-child(3) {
                        -webkit-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                    }

.pp-main-menu-section {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 1s ease-in-out;
    transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
    transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}

    .pp-main-menu-section.active {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }

.pp-search-bar {
    background: #282828;
    position: absolute;
    top: 60px;
    left: 0px;
    z-index: 9;
    height: 100px;
}

    .pp-search-bar .pp-container {
        padding: 30px 0;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

        .pp-search-bar .pp-container form {
            width: 100%;
        }

            .pp-search-bar .pp-container form .search-input {
                position: relative;
                width: 400px;
                margin: 0 0 0 auto;
            }

                .pp-search-bar .pp-container form .search-input input[type=text] {
                    background: gray;
                    width: 100%;
                    height: 40px;
                    border: 0px;
                    color: #ffffff;
                    outline: 0;
                    padding: 6px 50px 0 16px;
                    font-size: 16px;
                }

                .pp-search-bar .pp-container form .search-input button {
                    position: absolute;
                    top: 0px;
                    right: 0px;
                    background: none;
                    border: 0px;
                    outline: 0;
                    cursor: pointer;
                    width: 40px;
                    height: 40px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                }

                    .pp-search-bar .pp-container form .search-input button span {
                        color: #ffffff;
                    }

.pp-main-menu-mobile {
    position: fixed;
    top: 60px !important;
    left: 0px;
    z-index: 2095;
    min-height: 100vh;
    padding: 5px 0;
    background: #282828;
}

.pp-main-menu-mobile__nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

    .pp-main-menu-mobile__nav li {
        color: white;
        margin: 0;
    }

        .pp-main-menu-mobile__nav li.title {
            font-size: 17px;
            line-height: 27px;
            color: white;
            opacity: .3;
            text-transform: uppercase;
            margin: 0 0 30px 0;
        }

        .pp-main-menu-mobile__nav li a {
            color: white;
            font-size: 16px;
            cursor: pointer;
            margin: 0;
            padding: 10px 20px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            width: 100%;
            border-right: 1px solid transparent;
            position: relative;
        }

            .pp-main-menu-mobile__nav li a .mobile-submenu-icon {
                position: absolute;
                right: 20px;
                font-size: 16px;
                color: #9B9B9B;
            }

            .pp-main-menu-mobile__nav li a.active {
                color: #d74b00;
            }

                .pp-main-menu-mobile__nav li a.active .mobile-submenu-icon {
                    color: #d74b00;
                }

        .pp-main-menu-mobile__nav li .pp-mobile-submenu {
            list-style-type: none;
            padding: 8px 0;
            margin: 0px;
            width: 100%;
            display: none;
        }

            .pp-main-menu-mobile__nav li .pp-mobile-submenu a {
                color: color(white);
                font-size: 16px;
                cursor: pointer;
                margin: 0;
                padding: 8px 20px 8px 35px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                width: 100%;
                border-right: 1px solid transparent;
            }

                .pp-main-menu-mobile__nav li .pp-mobile-submenu a .mobile-sub-submenu-icon {
                    position: absolute;
                    right: 20px;
                    font-size: 16px;
                    color: #9B9B9B;
                }

                .pp-main-menu-mobile__nav li .pp-mobile-submenu a.active {
                    color: #d74b00;
                }

                    .pp-main-menu-mobile__nav li .pp-mobile-submenu a.active .mobile-sub-submenu-icon {
                        color: #d74b00;
                    }

            .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu {
                background: #414141;
                list-style-type: none;
                padding: 8px 0;
                margin: 0px;
                width: 100%;
                display: none;
                border-collapse: collapse;
            }

                .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu li {
                    display: table-cell;
                    width: 50%;
                    float: left;
                    border-right: 1px solid black;
                    border-bottom: 1px solid black;
                }

                    .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu li:last-child {
                        border-bottom: 0px;
                    }

                .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu a {
                    color: color(white);
                    font-size: 16px;
                    cursor: pointer;
                    margin: 0;
                    padding: 8px 8px 8px 35px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                    flex-direction: row;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: start;
                    -ms-flex-pack: start;
                    justify-content: flex-start;
                    width: 100%;
                    border-right: 1px solid transparent;
                }

                    .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu a .mobile-sub-submenu-icon {
                        position: absolute;
                        right: 20px;
                        font-size: 16px;
                        color: #9B9B9B;
                    }

                    .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu a.active {
                        color: #d74b00;
                    }

                        .pp-main-menu-mobile__nav li .pp-mobile-submenu .pp-mobile-sub-submenu a.active .mobile-submenu-icon {
                            color: #d74b00;
                        }

.pp-main-menu.header-language-menu {
    background: #282828;
    position: fixed;
    top: 50px;
    left: 0px;
    z-index: 9;
    min-height: 400px;
}

    .pp-main-menu.header-language-menu .pp-container {
        padding: 60px 0 80px 0;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        /*min-width: 1140px;*/
        max-width: 100%;
        overflow: hidden;
        max-width: 1180px;
    }

    .pp-main-menu.header-language-menu.pp-language-switcher {
        color: #ffffff;
    }

        .pp-main-menu.header-language-menu.pp-language-switcher .container-mobile {
            display: none;
        }

        .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .lang-area {
            font-size: 18px;
            font-weight: 700;
        }

        .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .area-languages {
            list-style-type: none;
            padding: 0px;
            margin: 15px 0 0 0;
        }

            .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .area-languages li a {
                color: #ffffff;
                font-size: 1.5rem;
                text-decoration: none;
                line-height: 27px;
            }

                .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .area-languages li a:hover {
                    text-decoration: underline;
                }

.pp-main-menu.header-language-menu__image__boxes {
    padding: 0 65px 40px 85px;
    position: relative;
    min-height: 400px;
    width: calc(100% - 30px);
    overflow: hidden;
    height: calc(100vh - 120px);
}

    .pp-main-menu.header-language-menu__image__boxes .sub-menu-scroll {
        overflow-y: scroll;
    }

    .pp-main-menu.header-language-menu__image__boxes .title {
        font-weight: 700;
        font-size: 17px;
        line-height: 27px;
        color: #ffffff;
        filter: alpha(opacity=30);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        -webkit-opacity: 0.3;
        -khtml-opacity: 0.3;
        -moz-opacity: 0.3;
        -ms-opacity: 0.3;
        -o-opacity: 0.3;
        opacity: 0.3;
        text-transform: uppercase;
    }

    .pp-main-menu.header-language-menu__image__boxes .boxes a {
        width: 100%;
        text-decoration: none;
    }

    .pp-main-menu.header-language-menu__image__boxes .boxes .box {
        padding: 0 15px;
        margin-top: 30px;
        min-height: 175px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        -webkit-transition: 250ms all linear;
        transition: 250ms all linear;
        text-decoration: none;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    .pp-main-menu.header-language-menu__image__boxes .boxes .box__title {
        width: 100%;
        height: 100%;
        margin: 0 10px 10px 10px;
        color: #ffffff;
    }

.pp-main-menu.header-language-menu__left--nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 300px;
}

    .pp-main-menu.header-language-menu__left--nav li {
        color: color(white);
        margin: 0;
    }

        .pp-main-menu.header-language-menu__left--nav li.title {
            font-size: 27px;
            line-height: 27px;
            color: color(white);
            text-transform: uppercase;
            margin: 0 0 30px 0;
        }

        .pp-main-menu.header-language-menu__left--nav li a {
            color: color(white);
            cursor: pointer;
            margin: 0;
            padding: 15px 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            width: 100%;
            border-right: 1px solid transparent;
        }

            .pp-main-menu.header-language-menu__left--nav li a.active {
                border-right: 4px solid color(orange);
            }

.pp-main-menu.header-language-menu__right {
    padding: 0 65px 40px 85px;
    position: relative;
    min-height: 400px;
    width: calc(100% - 350px);
    overflow: hidden;
    height: calc(100vh - 120px);
}

    .pp-main-menu.header-language-menu__right .sub-menu-scroll {
        overflow-y: scroll;
    }

    .pp-main-menu.header-language-menu__right:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 1px;
        left: 0px;
        top: 0px;
        background: color(midgray);
    }

    .pp-main-menu.header-language-menu__right .pp-sub-menu-section {
        margin: 0 0 50px 0;
        position: absolute;
        width: calc(100% - 150px);
    }

    .pp-main-menu.header-language-menu__right p {
        font-size: 13px;
        line-height: 21px;
        color: color(white);
        margin: 0 15px 5px 15px;
        max-width: 100%;
    }

.pp-main-menu.header-language-menu__right--nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .pp-main-menu.header-language-menu__right--nav li {
        width: calc(50% - 30px);
        min-height: 144px;
        margin: 15px;
    }

        .pp-main-menu.header-language-menu__right--nav li a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            color: color(white);
            padding: 15px;
            position: relative;
            border-bottom: 0px;
        }

            .pp-main-menu.header-language-menu__right--nav li a.bg-tile {
                min-height: 144px;
            }

                .pp-main-menu.header-language-menu__right--nav li a.bg-tile span.label {
                    color: color(white);
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                    flex-direction: row;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: start;
                    -ms-flex-pack: start;
                    justify-content: flex-start;
                }

                    .pp-main-menu.header-language-menu__right--nav li a.bg-tile span.label span {
                        color: color(white);
                    }

            .pp-main-menu.header-language-menu__right--nav li a.bg-image {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                text-decoration: none;
            }

                .pp-main-menu.header-language-menu__right--nav li a.bg-image span.bg-image-holder {
                    min-height: 190px;
                    width: 100%;
                }

                .pp-main-menu.header-language-menu__right--nav li a.bg-image span.label {
                    margin: 30px 0 0 0;
                    color: color(white);
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                    flex-direction: row;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    -webkit-box-pack: start;
                    -ms-flex-pack: start;
                    justify-content: flex-start;
                }

                    .pp-main-menu.header-language-menu__right--nav li a.bg-image span.label span {
                        color: color(white);
                    }

.pp-main-menu.header-language-menu__right .image-text-box {
    max-height: 225px;
    width: 50%;
    text-align: center;
}

.pp-main-menu.header-language-menu__right .image-text-box__date {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    color: black;
}

.pp-main-menu.header-language-menu__right .image-text-box__title {
    margin-bottom: 10px;
    font-size: 16px !important;
    text-align: center;
    max-width: 100%;
}

.pp-main-menu.header-language-menu__right .image-text-box__inner {
    padding: 0 15px;
}

.pp-main-menu.header-language-menu__right .image-text-box--large {
    width: 100%;
    max-height: 300px;
}

    .pp-main-menu.header-language-menu__right .image-text-box--large .image-text-box__date {
        text-align: left;
    }

    .pp-main-menu.header-language-menu__right .image-text-box--large .image-text-box__title {
        font-size: 20px !important;
        text-align: left;
    }

.pp-main-menu.header-language-menu__close {
    margin: 0 0 0 50px;
}

    .pp-main-menu.header-language-menu__close .pp-close-sub-menu {
        cursor: pointer;
    }

        .pp-main-menu.header-language-menu__close .pp-close-sub-menu span {
            font-size: 28px;
            line-height: 28px;
            color: color(white);
        }

@media (max-width: 1023px) {
    .pp-main-menu.header-language-menu.pp-language-switcher {
        padding: 0;
    }

        .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm {
            flex-basis: initial;
        }

            .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .lang-area {
                min-height: 40px;
                line-height: 40px;
                cursor: pointer;
                display: block;
                padding: 0 20px;
            }

                .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .lang-area:before {
                    font-family: "fontawesome";
                    content: "\f105";
                    position: absolute;
                    right: 40px;
                    top: 0;
                    font-size: 24px;
                }

                .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .lang-area.active {
                    color: #D74B00;
                }

                    .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .lang-area.active:before {
                        position: absolute;
                        right: 36px;
                        top: 0;
                        content: "\f107";
                    }

            .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .area-languages {
                display: none;
                background: #333333;
                margin-top: 0;
                padding: 20px 20px 20px 40px;
            }

                .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .area-languages.active {
                    display: block;
                }

                .pp-main-menu.header-language-menu.pp-language-switcher .pp-col-sm .area-languages li a {
                    padding: 8px 0;
                    display: block;
                }

        .pp-main-menu.header-language-menu.pp-language-switcher .pp-scroll-warpper {
            width: 100% !important;
        }
}

.pp-nav .icon-label--xs,
.pp-main-menu .icon-label--xs,
.pp-main-menu-mobile .icon-label--xs {
    font-size: 10px;
}

.pp-nav .icon-label--sm,
.pp-main-menu .icon-label--sm,
.pp-main-menu-mobile .icon-label--sm {
    font-size: 16px;
}

.pp-nav .icon-label--md,
.pp-main-menu .icon-label--md,
.pp-main-menu-mobile .icon-label--md {
    font-size: 22px;
}

.pp-nav .icon-label--lg,
.pp-main-menu .icon-label--lg,
.pp-main-menu-mobile .icon-label--lg {
    font-size: 28px;
}

.pp-nav .icon-label--xl,
.pp-main-menu .icon-label--xl,
.pp-main-menu-mobile .icon-label--xl {
    font-size: 34px;
}

.pp-nav .icon-label--left,
.pp-main-menu .icon-label--left,
.pp-main-menu-mobile .icon-label--left {
    margin: 0 10px 0 0;
}

.pp-nav .icon-label--right,
.pp-main-menu .icon-label--right,
.pp-main-menu-mobile .icon-label--right {
    margin: 0 0 0 10px;
}

.pp-nav .icon-label--standalone,
.pp-main-menu .icon-label--standalone,
.pp-main-menu-mobile .icon-label--standalone {
    padding: 0 30px;
    display: block;
    line-height: 34px;
}

.pp-scroll-warpper {
    height: calc(100vh - 120px) !important;
    /* width: 100% !important;*/
    width: calc(100vw - 25px);
    overflow-y: auto;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 15px;
}
/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
    background-color: gray;
}
/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}
/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
    background-color: gray;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    background-color: black;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */


.pp-col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.pp-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding: 0 20px;
}

@media (min-width: 576px) {
    .pp-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .pp-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .pp-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .pp-container {
        max-width: 1140px;
    }
}

.pp-container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pp-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

footer.pp-footer {
    background: #282828;
    padding: 90px 0;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Hind", sans-serif;
    font-style: normal;
    font-weight: 400;
}

    footer.pp-footer .btn--footer {
        display: inline-block;
        background: rgba(255, 255, 255, 0.1);
        font-size: 16px;
        text-align: center;
        padding: 18px 30px;
        border-radius: 100px;
        color: #ffffff;
        min-width: 180px;
        white-space: normal;
        text-decoration: none !important;
        -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    }

        footer.pp-footer .btn--footer:hover {
            color: #3B3D48;
            background: #D5D5D5;
        }

    footer.pp-footer a {
        font-family: "Hind", sans-serif;
        font-style: normal;
        font-weight: 400;
        text-decoration: none;
        margin: 0px;
    }

        footer.pp-footer a:hover {
            text-decoration: underline;
        }

    footer.pp-footer .pp-footer-logo img {
        width: 122px;
        height: auto;
    }

    footer.pp-footer .pp-footer-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 50px 0 0 0;
    }

@media (max-width: 767.98px) {
    footer.pp-footer .pp-footer-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

footer.pp-footer .pp-footer-section .pp-footer-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    line-height: 28px;
}

@media (max-width: 767.98px) {
    footer.pp-footer .pp-footer-section .pp-footer-menu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 448px;
        width: 100%;
        line-height: 34px;
    }
}

@media (max-width: 767.98px) {
    footer.pp-footer .pp-footer-section .pp-footer-menu__block {
        width: 100%;
    }
        footer.pp-footer .pp-footer-section .pp-footer-menu__block ul {
            max-height: 0;
        }
}

footer.pp-footer .pp-footer-section .pp-footer-menu__block .title {
    /* default primary */
    font-family: "Hind", sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #D74B00;
    display: block;
    position: relative;
}

    footer.pp-footer .pp-footer-section .pp-footer-menu__block .title a {
        font-family: "Hind", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        color: #D74B00;
    }

@media (max-width: 767.98px) {

    footer.pp-footer .pp-footer-section .pp-footer-menu__block .title span[class^=icon-] {
        /*display: block !important;*/
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

footer.pp-footer .pp-footer-section .pp-footer-menu__block .title span[class^=icon-] {
    display: none;
    width: 23px;
    height: 23px;
    text-align: center;
    font-size: 24px;
}
footer.pp-footer .pp-footer-section .pp-footer-menu__block .title span.icon-arrow-right:before {
    font-family: "Fontawesome";
    content: "\f105";
    cursor: pointer;
}
footer.pp-footer .pp-footer-section .pp-footer-menu__block.active .title span.icon-arrow-right {
    transform: rotate(90deg);
    top: 5px;
}
footer.pp-footer .pp-footer-section .pp-footer-menu__block ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0px 0 0;
    display: block;
    -webkit-transition: all .8s;
    transition: all .8s;
    /*max-height: 0;*/
    overflow: hidden;
}
    footer.pp-footer .pp-footer-section .pp-footer-menu__block ul.active {
        max-height: initial;

    }
@media (min-width: 768px) {
    footer.pp-footer .pp-footer-section .pp-footer-menu__block ul {
        max-height: none;
    }
}

footer.pp-footer .pp-footer-section .pp-footer-menu__block ul.active {
    max-height: 600px;
}

@media (min-width: 768px) {
    footer.pp-footer .pp-footer-section .pp-footer-menu__block ul {
        max-height: initial;
    }
        footer.pp-footer .pp-footer-section .pp-footer-menu__block ul.active {
            max-height: none;
        }
}

footer.pp-footer .pp-footer-section .pp-footer-menu__block ul li {
    font-size: 13px;
    color: #ffffff;
}

    footer.pp-footer .pp-footer-section .pp-footer-menu__block ul li a {
        font-size: 13px;
        color: #ffffff;
        margin: 0px;
    }

footer.pp-footer .pp-footer-section .pp-footer-social {
    max-width: 400px;
}

@media (max-width: 767.98px) {
    footer.pp-footer .pp-footer-section .pp-footer-social {
        margin-bottom: 45px;
        text-align: center;
    }
}

footer.pp-footer .pp-footer-section .pp-footer-social p {
    font-size: 13px;
    line-height: 22px;
    color: #ffffff;
    margin: 0;
}

    footer.pp-footer .pp-footer-section .pp-footer-social p.title {
        /* default primary */
        font-family: "Hind", sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 32px;
        color: #D74B00;
    }

    footer.pp-footer .pp-footer-section .pp-footer-social p a {
        color: #ffffff;
        text-decoration: underline;
        margin: 0px;
    }

footer.pp-footer .pp-footer-section .pp-footer-social .btn {
    margin: 10px 0 25px 0;
}

    footer.pp-footer .pp-footer-section .pp-footer-social .btn span {
        font-size: 11px;
        color: #D74B00;
        padding: 0 0 0 10px;
    }

        footer.pp-footer .pp-footer-section .pp-footer-social .btn span::before {
            content: "\003e";
        }

footer .pp-w-75 {
    width: 75%;
}

footer .pp-footer-menu__block {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

footer.pp-footer .pp-footer-section .pp-footer-social__menu {
    list-style-type: none;
    padding: 0;
    margin: 30px 0 0 0;
}

    footer.pp-footer .pp-footer-section .pp-footer-social__menu .fa {
        font-size: 17px;
    }

    footer.pp-footer .pp-footer-section .pp-footer-social__menu li {
        display: inline-block;
        margin: 0 6px 0 0;
    }

        footer.pp-footer .pp-footer-section .pp-footer-social__menu li a {
            font-size: 15px;
            color: #ffffff;
            filter: alpha(opacity=79);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=79)";
            -webkit-opacity: 0.79;
            -khtml-opacity: 0.79;
            -moz-opacity: 0.79;
            -ms-opacity: 0.79;
            -o-opacity: 0.79;
            opacity: 0.79;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 35px;
            height: 35px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            footer.pp-footer .pp-footer-section .pp-footer-social__menu li a:hover,
            footer.pp-footer .pp-footer-section .pp-footer-social__menu li a:active,
            footer.pp-footer .pp-footer-section .pp-footer-social__menu li a:focus {
                text-decoration: none;
                border: 1px solid white;
                filter: alpha(opacity=100);
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                -webkit-opacity: 1;
                -khtml-opacity: 1;
                -moz-opacity: 1;
                -ms-opacity: 1;
                -o-opacity: 1;
                opacity: 1;
            }

.pp-copyright {
    background: #1b1b1b;
    min-height: 74px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Hind", sans-serif;
    font-style: normal;
    font-weight: 400;
}

    .pp-copyright a {
        font-family: "Hind", sans-serif;
        font-style: normal;
        font-weight: 400;
        margin: 0px;
        text-decoration: none;
    }

        .pp-copyright a:hover {
            text-decoration: underline;
        }

    .pp-copyright .pp-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        min-height: 74px;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

@media (max-width: 991.98px) {
    .pp-copyright .pp-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
@media (max-width:640px) {
    .pp-copyright .pp-container {
        width: calc(100% - 40px);
    }
    .pp-footer .pp-container {
        width: calc(100% - 40px);
    }
}
.pp-copyright .pp-container .pp-copyright-menu {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

@media (max-width: 991.98px) {
    .pp-copyright .pp-container .pp-copyright-menu {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.pp-copyright .pp-container .pp-copyright-menu li {
    display: inline-block;
    margin: 0 30px 0 0;
}

@media (max-width: 991.98px) {
    .pp-copyright .pp-container .pp-copyright-menu li {
        margin: 0 7px;
    }
}

.pp-copyright .pp-container .pp-copyright-menu li a {
    font-size: 13px;
    line-height: 32px;
    color: #ffffff;
}

@media (max-width: 991.98px) {
    .pp-copyright .pp-container .pp-copyright-disclaimer {
        padding-bottom: 15px;
        text-align: center;
    }
}

.pp-copyright .pp-container .pp-copyright-disclaimer p {
    padding: 0px;
    margin: 0px;
    font-size: 13px;
    color: #ffffff;
}

.modal {
    font-size: 17px;
}

.modal-dialog {
    min-width: 750px;
}

    .modal-dialog .modal-content .modal-header {
        background: #282828;
        color: white;
        padding-left: 20px;
    }

        .modal-dialog .modal-content .modal-header .close {
            opacity: 1;
            color: white;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            position: absolute;
            right: 15px;
            top: 15px;
        }

        .modal-dialog .modal-content .modal-header .modal-title {
            color: white;
            font-weight: bold;
        }

    .modal-dialog .modal-content .modal-body {
        padding: 20px 40px;
    }

        .modal-dialog .modal-content .modal-body .required {
            color: red !important;
        }

        .modal-dialog .modal-content .modal-body .required-text {
            color: darkgray;
        }

        .modal-dialog .modal-content .modal-body .maintain-table {
            margin-top: 15px;
            width: 100%;
        }

            .modal-dialog .modal-content .modal-body .maintain-table tr th {
                text-align: right;
                width: 20%;
                vertical-align: middle;
                white-space: nowrap;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td {
                /*padding-left: 15px !important;*/
                vertical-align: middle;
            }

            .modal-dialog .modal-content .modal-body .maintain-table .option {
                position: relative;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=text],
            .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=password],
            .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=number] {
                width: 97%;
                border: 1px solid #7a7777;
                height: 30px;
                padding-left: 5px;
                border-radius: 6px;
                font-size: 0.95em;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td textarea {
                width: 97%;
                border: 1px solid #7a7777;
                height: 100px;
                padding-left: 5px;
                border-radius: 6px;
                font-size: 0.95em;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=text].short,
            .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=password].short,
            .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=number].short {
                width: 50px;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td select {
                height: 35px;
                min-width: 220px;
                border: 1px solid #7a7777;
                border-radius: 6px;
                font-size: 0.95em;
                cursor: pointer;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td label {
                cursor: pointer;
                font-size: 0.95em;
                float: left;
                margin-right: 20px;
            }

                /*
.modal-dialog .modal-content .modal-body .maintain-table tr td label + label {
  margin-left: 20px;
}
    */

                .modal-dialog .modal-content .modal-body .maintain-table tr td label input[type=radio],
                .modal-dialog .modal-content .modal-body .maintain-table tr td label input[type=checkbox] {
                    position: relative;
                    top: 0.35px;
                }

                .modal-dialog .modal-content .modal-body .maintain-table tr td label.d-block {
                    display: block;
                }

                    .modal-dialog .modal-content .modal-body .maintain-table tr td label.d-block + label {
                        margin-top: 10px;
                        margin-left: 0px;
                    }

            .modal-dialog .modal-content .modal-body .maintain-table tr td .remove-button {
                color: red;
                background: none;
                border: none;
                outline: none;
                position: relative;
                /*top: 19px;*/
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                font-size: 27px;
                left: 0px;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td .add-button {
                color: #3897b5;
                background: none;
                border: none;
                outline: none;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                font-size: 27px;
                float: right;
                margin-top: 22px;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td .option-area {
                width: 100%;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td .option {
                width: 100%;
            }

            .modal-dialog .modal-content .modal-body .maintain-table tr td .option-area .option {
                background: white;
                width: 100%;
                padding: 10px 45px 10px 21px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                margin-top: 15px;
                border-radius: 10px;
                position: relative;
                border: 1px solid #ccc;
            }

#tbOption tr td {
    border: 0;
}

.modal-dialog .modal-content .modal-body .maintain-table tr td .option-area .option-content {
    border-bottom: 1px dashed black;
    padding: 5px 0 8px 6px;
}

.modal-dialog .modal-content .modal-body .maintain-table tr td .option-area .option .correct-answer {
    padding-top: 8px;
    padding-bottom: 17px;
}

.modal-dialog .modal-content .modal-body .maintain-table tr td .question-group {
    position: relative;
    padding: 10px 45px 10px 5px;
    border-radius: 12px;
}

.modal-dialog .modal-content .modal-body .maintain-table tr td .question-group-gen-each-time {
    position: relative;
    padding: 10px 45px 10px 5px;
    border: 2px dashed #3897b5;
    border-radius: 12px;
}

.modal-dialog .modal-content .modal-body .maintain-table tr td .question-group table {
    width: 100%;
}

    .modal-dialog .modal-content .modal-body .maintain-table tr td .question-group table th,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .question-group table td,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .question-group-gen-each-time table th,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .question-group-gen-each-time table td {
        border: 1px solid #c5c5c5;
    }

.modal-dialog .modal-content .modal-body .maintain-table tr td .added-question-group .question-group-box {
    position: relative;
    border-radius: 20px;
    margin-top: 15px;
    padding: 10px 38px 10px 15px;
    border: 1px solid #dbdbdb;
}

    .modal-dialog .modal-content .modal-body .maintain-table tr td .added-question-group .question-group-box table {
        width: 100%;
    }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .added-question-group .question-group-box table th {
            width: 30%;
        }

.modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question-table,
.modal-dialog .modal-content .modal-body .maintain-table tr td .normal-table {
    width: 100%;
}

    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question-table th,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question-table td,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .normal-table th,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .normal-table td {
        border: 1px solid #c5c5c5;
    }

.modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-button {
    padding: 6px 15px !important;
    background: #923c11 !important;
    margin-top: 20px;
}

.modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table {
    width: 100%;
    table-layout: fixed;
    margin-top: 20px;
}

    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr th,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr td {
        padding: 0 !important;
        text-align: center;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr th {
        background: lightgray;
        border-right: 2px solid white;
        padding: 8px !important;
    }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr th:nth-child(1) {
            width: 7%;
        }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr th:nth-child(2) {
            width: 8%;
        }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr th:nth-child(3) {
            width: 85%;
            border-right: 2px solid lightgray;
        }

    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr td {
        padding: 10px !important;
        border: 2px solid lightgray;
    }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-list-table tr td:nth-child(3) {
            text-align: left;
        }

.modal-dialog .modal-content .modal-body .maintain-table tr td .added-table {
    width: 100%;
    table-layout: fixed;
}

    .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr th,
    .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr td {
        padding: 0 !important;
        text-align: center;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr th {
        padding: 10px !important;
    }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr th:nth-child(1) {
            width: 7%;
        }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr th:nth-child(2) {
            width: 83%;
        }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr th:nth-child(3) {
            width: 10%;
        }

    .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr td {
        padding: 10px !important;
    }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr td:nth-child(2) {
            text-align: left;
        }

        .modal-dialog .modal-content .modal-body .maintain-table tr td .added-table tr td:nth-child(3) {
            position: relative;
        }

.modal-dialog .modal-content .modal-body .maintain-table tr th,
.modal-dialog .modal-content .modal-body .maintain-table tr td {
    padding: 6px 5px;
    border: 1px solid #ccc;
}

.modal-dialog .modal-content .modal-body .maintain-table tr.title td {
    background: #ebe8e8;
    font-weight: bold;
    padding: 15px 5px;
}

.modal-dialog .modal-content .modal-body .maintain-button, #divReview.maintain-button {
    margin-top: 20px;
    text-align: center;
}

    #divReview.maintain-button #btnApprove {
        color: white;
        background: #d74b00;
        padding: 5px 20px;
        border-radius: 7px;
        font-size: 1em;
        font-weight: normal;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

        #divReview.maintain-button #btnApprove:hover {
            background: #af3a04;
        }

    #divReview.maintain-button #btnReject {
        color: white;
        background: gray;
        padding: 5px 20px;
        border-radius: 7px;
        font-size: 1em;
        font-weight: normal;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        margin-left: 20px;
    }

        #divReview.maintain-button #btnReject:hover {
            background: #6e6b6b;
        }

    .modal-dialog .modal-content .modal-body .maintain-button button.cancel-button {
        background: gray;
    }

        .modal-dialog .modal-content .modal-body .maintain-button button.cancel-button:hover {
            background: #6e6b6b;
        }

.modal-dialog .modal-content .modal-body .examination-content .examination-result {
    border: 1px dashed gray;
    width: 80%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    padding: 15px 30px;
}

    .modal-dialog .modal-content .modal-body .examination-content .examination-result .result {
        font-size: 18px;
    }

        .modal-dialog .modal-content .modal-body .examination-content .examination-result .result .pass-score {
            margin-top: 15px;
        }

    .modal-dialog .modal-content .modal-body .examination-content .examination-result .result-status {
        color: red;
        font-size: 30px;
        font-weight: bold;
    }

.modal-dialog .modal-content .modal-body .examination-content .examination {
    border-bottom: 1px dashed #b8b3b3;
    padding: 17px 20px 25px 20px;
}

    .modal-dialog .modal-content .modal-body .examination-content .examination video
    {
        width: 100%;
    }

    .modal-dialog .modal-content .modal-body .examination-content .examination.incorrect {
        border: 2px solid red;
    }

    .modal-dialog .modal-content .modal-body .examination-content .examination + .examination {
        margin-top: 25px;
    }

.modal-dialog .modal-content .modal-body .examination-content .examination-title {
    font-weight: bold;
    font-size: 19px;
}

    .modal-dialog .modal-content .modal-body .examination-content .examination-title img {
        width: 100%;
    }

.modal-dialog .modal-content .modal-body .examination-content .examination-image {
    display: block;
    max-width: 350px;
    padding-left: 45px;
    margin-top: 15px;
}

.modal-dialog .modal-content .modal-body .examination-content .examination-video {
    display: block;
    margin-top: 20px;
}

.modal-dialog .modal-content .modal-body .examination-content .examination-option ul {
    font-size: 19px;
    padding-left: 20px;
}

    .modal-dialog .modal-content .modal-body .examination-content .examination-option ul li {
        margin-top: 15px;
    }

        .modal-dialog .modal-content .modal-body .examination-content .examination-option ul li .correct-answer {
            color: red;
            font-weight: bold;
            margin: 5px;
        }

        .modal-dialog .modal-content .modal-body .examination-content .examination-option ul li label {
            cursor: pointer;
        }

            .modal-dialog .modal-content .modal-body .examination-content .examination-option ul li label input[type=radio], .modal-dialog .modal-content .modal-body .examination-content .examination-option ul li label input[type=checkbox] {
                margin-right: 8px;
            }

.modal-dialog .modal-content .modal-body .examination-content .examination-option-image {
    max-width: 200px;
    margin-top: 15px;
}

.modal-dialog .modal-content .modal-body .material-video {
    margin: 0 auto;
    width: 100%;
}

.modal-dialog .modal-content .modal-body .suggest-size {
    color: #1e1e9c;
    font-size: 14px;
    margin-top: 5px;
}

.modal-dialog .modal-content .modal-body .ui-sortable .ui-state-default {
    background: lightgray;
    padding: 15px 8px;
    border-radius: 10px;
    font-size: 18px;
    margin: 10px 0;
    cursor: move;
}

/* Remove margins and padding from the parent ul */
ul.tree-view {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* Style the caret/arrow */
    /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
    /* Hide the nested list */
}

    ul.tree-view .tree-row {
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        font-size: 1.7rem;
        line-height: 3rem;
        font-weight: 400;
    }

        ul.tree-view .tree-row .ic-folder {
            margin-right: 5px;
        }

        ul.tree-view .tree-row img.ic-folder {
            height: 22px;
            margin-top: -3px;
        }

        ul.tree-view .tree-row.active {
            color: #d74b00;
        }

    ul.tree-view .tree-caret {
        cursor: pointer;
        font-size: 16px;
        color: #cacaca;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    ul.tree-view .tree-caret-down {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        position: relative;
        top: 3px;
    }

    ul.tree-view .nested {
        display: none;
        padding-left: 30px;
        /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
    }

        ul.tree-view .nested.open {
            display: block;
        }

.tabs-nav li {
    display: inline-block;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    /*margin: 0 50px;*/
}

    .tabs-nav li a {
        color: black;
        text-decoration: none;
        padding: 0 15px;
        display: inline-block;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        font: 13px/1.5 Arial, 微軟正黑體;
        line-height: 2.5;
        border-radius: 6px 6px 0 0;
    }

    .tabs-nav li.active a, .tabs-nav li:hover a {
        color: #555;
        background: #ddd !important;
    }

.tabs-content > .tabs-panel {
    display: none;
}

    .tabs-content > .tabs-panel.active {
        display: block;
        border-top: 2px solid #ddd !important;
    }

@media all and (min-width: 1024px) {
    .custom-table {
        width: 100%;
        max-width: 1350px;
    }

    .custom-table-tr {
        display: table-row;
        word-break: break-all;
    }

    .custom-table-th {
        display: table-cell;
        /*word-break: break-all;*/
        color: white;
        background: #666;
        padding: 10px 5px;
        text-align: center;
        border-right: 1px solid #f0eded;
        vertical-align: middle;
        font-size: 1.6rem;
        width: 10%;
    }

    .custom-table-td {
        display: table-cell;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        background-color: #ebe8e8;
        /*word-break: break-all;*/
        padding: 10px 5px;
        text-align: center;
        vertical-align: middle;
        font-size: 1.4rem;
        width: 10% !important;
    }

        .custom-table-th:first-child, .custom-table-td:first-child {
            border-left: 1px solid #f0eded;
            width: 10% !important;
        }

        .custom-table-th:nth-child(2), .custom-table-td:nth-child(2) {
            width: 15% !important;
        }

        .custom-table-th:nth-child(3), .custom-table-td:nth-child(3) {
            width: 15% !important;
        }

        .custom-table-th:nth-child(4), .custom-table-td:nth-child(4) {
            width: 30% !important;
        }

        .custom-table-th:nth-child(5), .custom-table-td:nth-child(5) {
            width: 10% !important;
        }

        .custom-table-th:nth-child(6), .custom-table-td:nth-child(6) {
            width: 20% !important;
        }









    .page-manage .custom-table-th:first-child, .page-manage .custom-table-td:first-child {
        /*width: 8%;*/
        width: auto;
        min-width: 40px;
    }

    .page-manage .custom-table-th:nth-child(2), .page-manage .custom-table-td:nth-child(2) {
        width: 38%;
    }

    .page-manage .custom-table-th:nth-child(3), .page-manage .custom-table-td:nth-child(3) {
        width: 15%;
    }

    .page-manage .custom-table-th:nth-child(4), .page-manage .custom-table-td:nth-child(4) {
        /*width: 10%;*/
        width: 20%;
    }

    .page-manage .custom-table-th:nth-child(5), .page-manage .custom-table-td:nth-child(5) {
        width: 13%;
    }

    .page-manage .people .custom-table .custom-table-tr {
        display: table;
        width: 100%;
    }

    .page-manage .people .custom-table-th:first-child, .page-manage .people .custom-table-td:first-child {
        width: 20%;
    }

    .page-manage .people .custom-table-th:nth-child(2), .page-manage .people .custom-table-td:nth-child(2) {
        width: 70%;
    }

    .page-manage .people .custom-table-th:nth-child(3), .page-manage .people .custom-table-td:nth-child(3) {
        width: 15%;
    }

    .page-manage .questions .custom-table .custom-table-tr {
        display: table;
        width: 100%;
    }

    .page-manage .questions .custom-table-th:first-child, .page-manage .questions .custom-table-td:first-child {
        width: 10%;
    }

    .page-manage .questions .custom-table-th:nth-child(2), .page-manage .questions .custom-table-td:nth-child(2) {
        width: 50%;
    }

    .page-manage .questions .custom-table-th:nth-child(3), .page-manage .questions .custom-table-td:nth-child(3) {
        width: 20%;
    }

    .page-manage .questions .custom-table-th:nth-child(4), .page-manage .questions .custom-table-td:nth-child(4) {
        width: 20%;
    }

    .page-manage .people-detail .custom-table-th:first-child, .page-manage .people-detail .custom-table-td:first-child {
        width: 20%;
    }

    .page-manage .people-detail .custom-table-th:nth-child(2), .page-manage .people-detail .custom-table-td:nth-child(2) {
        width: 10%;
    }

    .page-manage .people-detail .custom-table-th:nth-child(3), .page-manage .people-detail .custom-table-td:nth-child(3) {
        width: 15%;
    }

    .page-manage .people-detail .custom-table-th:nth-child(4), .page-manage .people-detail .custom-table-td:nth-child(4) {
        width: 15%;
    }

    .custom-table .sub-table.active + .custom-table-tr {
        width: 10%;
    }

    div.custom-table-elearning-report {
        width: 100%;
        max-width: 1350px;
    }

        div.custom-table-elearning-report .custom-table-tr {
            display: table-row;
            word-break: break-all;
        }

        div.custom-table-elearning-report .custom-table-th {
            display: table-cell;
            /*word-break: break-all;*/
            color: white;
            background: #666;
            padding: 10px 5px;
            text-align: center;
            border-right: 1px solid #f0eded;
            vertical-align: middle;
            font-size: 1.6rem;
            width: 10%;
        }

        div.custom-table-elearning-report .custom-table-td {
            display: table-cell;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            background-color: #ebe8e8;
            word-break: break-word;
            padding: 10px 5px;
            text-align: center;
            vertical-align: middle;
            font-size: 1.4rem;
        }

            div.custom-table-elearning-report .custom-table-th:first-child, div.custom-table-elearning-report .custom-table-td:first-child {
                border-left: 1px solid #f0eded;
                width: 5% !important;
            }

            div.custom-table-elearning-report .custom-table-th:nth-child(2), div.custom-table-elearning-report .custom-table-td:nth-child(2) {
                width: 5% !important;
            }

            div.custom-table-elearning-report .custom-table-th:nth-child(3), div.custom-table-elearning-report .custom-table-td:nth-child(3) {
                width: 15% !important;
            }

            div.custom-table-elearning-report .custom-table-th:nth-child(4), div.custom-table-elearning-report .custom-table-td:nth-child(4) {
                width: 15% !important;
            }

            div.custom-table-elearning-report .custom-table-th:nth-child(5), div.custom-table-elearning-report .custom-table-td:nth-child(5) {
                width: 15% !important;
            }

            div.custom-table-elearning-report .custom-table-th:nth-child(6), div.custom-table-elearning-report .custom-table-td:nth-child(6) {
                width: 15% !important;
            }

            div.custom-table-elearning-report .custom-table-th:nth-child(7), div.custom-table-elearning-report .custom-table-td:nth-child(7) {
                width: 30% !important;
            }



            div.custom-table-elearning-report .custom-table-td > button {
                font-size: 16px;
                padding: 0 !important;
                height: 30px;
                width: 30px;
                border-radius: 40px !important;
                margin-top: 0px !important;
                color: #666 !important;
                background: transparent !important;
            }

                div.custom-table-elearning-report .custom-table-td > button + button {
                    margin-top: 15px;
                }

        div.custom-table-elearning-report .sub-table {
            /*width: 85%;*/
            margin: 0 auto;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
            padding-left: 60px;
        }

            div.custom-table-elearning-report .sub-table.active + .custom-table-tr {
                width: 10%;
            }

                div.custom-table-elearning-report .sub-table.active + .custom-table-tr .custom-table-td {
                    border-top: 1px solid #f0eded;
                }

            div.custom-table-elearning-report .sub-table .examination-record > h3,
            div.custom-table-elearning-report .sub-table .people > h3 {
                /*background: rgba(211, 68, 28, 0.425);*/
                background: #d74b00;
            }

            div.custom-table-elearning-report .sub-table .examination-record > hr,
            div.custom-table-elearning-report .sub-table .people > hr,
            div.custom-table-elearning-report .sub-table .teaching-material > hr,
            div.custom-table-elearning-report .sub-table .questions > hr {
                padding: 0;
                margin: 0;
                border: 2px solid #d74b00;
            }

            div.custom-table-elearning-report .sub-table .teaching-material > h3,
            div.custom-table-elearning-report .sub-table .questions > h3 {
                /*background: #8B3521;*/
                background: #d74b00;
            }

            div.custom-table-elearning-report .sub-table .examination-record .custom-table-tr {
                display: table;
                width: 100%;
            }

                div.custom-table-elearning-report .sub-table .examination-record .custom-table-tr div:nth-child(2) {
                    width: 30%;
                }

                div.custom-table-elearning-report .sub-table .examination-record .custom-table-tr div:nth-child(5) {
                    width: 20%;
                }

            div.custom-table-elearning-report .sub-table .teaching-material .custom-table-tr {
                display: table;
                width: 100%;
            }

                div.custom-table-elearning-report .sub-table .teaching-material .custom-table-tr div:nth-child(6) {
                    width: 20%;
                }

            div.custom-table-elearning-report .sub-table > div {
                /*margin-top: 30px;*/
                margin-bottom: 30px;
                margin-top: 14px;
                display: none;
                position: relative;
            }

                div.custom-table-elearning-report .sub-table > div.active {
                    display: block;
                }

                div.custom-table-elearning-report .sub-table > div > h3 {
                    font-size: 1.7rem;
                    text-align: center;
                    color: white;
                    padding: 15px;
                    width: 200px;
                    border-radius: 5px 5px 0 0;
                    height: 10px;
                }

    div.custom-table-examinees {
        width: 100%;
        max-width: 1350px;
    }

        div.custom-table-examinees .custom-table-tr {
            display: table-row;
            word-break: break-all;
        }

        div.custom-table-examinees .custom-table-th {
            display: table-cell;
            /*word-break: break-all;*/
            color: white;
            background: #666;
            padding: 10px 5px;
            text-align: center;
            border-right: 1px solid #f0eded;
            vertical-align: middle;
            font-size: 1.6rem;
            width: 10%;
            min-width: 120px;
        }

        div.custom-table-examinees .custom-table-td {
            display: table-cell;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            background-color: #ebe8e8;
            /*word-break: break-all;*/
            padding: 10px 5px;
            text-align: center;
            vertical-align: middle;
            font-size: 1.4rem;
            min-width: 120px;
        }

            div.custom-table-examinees .custom-table-th:first-child, div.custom-table-examinees .custom-table-td:first-child {
                border-left: 1px solid #f0eded;
                width: 5% !important;
            }

            div.custom-table-examinees .custom-table-th:nth-child(2), div.custom-table-examinees .custom-table-td:nth-child(2) {
                width: 20% !important;
            }

            div.custom-table-examinees .custom-table-th:nth-child(3), div.custom-table-examinees .custom-table-td:nth-child(3) {
                width: 15% !important;
            }

            div.custom-table-examinees .custom-table-th:nth-child(4), div.custom-table-examinees .custom-table-td:nth-child(4) {
                width: 15% !important;
            }

            div.custom-table-examinees .custom-table-th:nth-child(5), div.custom-table-examinees .custom-table-td:nth-child(5) {
                width: 15% !important;
            }

            div.custom-table-examinees .custom-table-th:nth-child(6), div.custom-table-examinees .custom-table-td:nth-child(6) {
                width: auto !important;
            }



    div.custom-table-questions {
        width: 100%;
        max-width: 1350px;
    }

        div.custom-table-questions .custom-table-tr {
            display: table-row;
            word-break: break-all;
        }

        div.custom-table-questions .custom-table-th {
            display: table-cell;
            /*word-break: break-all;*/
            color: white;
            background: #666;
            padding: 10px 5px;
            text-align: center;
            border-right: 1px solid #f0eded;
            vertical-align: middle;
            font-size: 1.6rem;
            width: 10%;
        }

        div.custom-table-questions .custom-table-td {
            display: table-cell;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            background-color: #ebe8e8;
            /*word-break: break-all;*/
            padding: 10px 5px;
            text-align: center;
            vertical-align: middle;
            font-size: 1.4rem;
        }

            div.custom-table-questions .custom-table-th:first-child, div.custom-table-questions .custom-table-td:first-child {
                border-left: 1px solid #f0eded;
                width: 10% !important;
            }

            div.custom-table-questions .custom-table-th:nth-child(2), div.custom-table-questions .custom-table-td:nth-child(2) {
                width: 50% !important;
                text-align: left;
                padding-left: 15px;
            }

            div.custom-table-questions .custom-table-th:nth-child(3), div.custom-table-questions .custom-table-td:nth-child(3) {
                width: 20% !important;
            }

            div.custom-table-questions .custom-table-th:nth-child(4), div.custom-table-questions .custom-table-td:nth-child(4) {
                width: 20% !important;
            }
}

.custom-table-td > button {
    font-size: 16px;
    padding: 0 !important;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 40px !important;
    margin-top: 0px !important;
    color: #666 !important;
    background: #fff !important;
}

    .custom-table-td > button + button {
        margin-top: 15px;
    }

.custom-table .sub-table {
    /*width: 85%;*/
    margin: 0 auto;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    padding-left: 60px;
}



    .custom-table .sub-table.active + .custom-table-tr .custom-table-td {
        border-top: 1px solid #f0eded;
    }

    .custom-table .sub-table .examination-record > h3,
    .custom-table .sub-table .people > h3 {
        /*background: rgba(211, 68, 28, 0.425);*/
        background: #d74b00;
    }

    .custom-table .sub-table .examination-record > hr,
    .custom-table .sub-table .people > hr,
    .custom-table .sub-table .teaching-material > hr,
    .custom-table .sub-table .questions > hr {
        padding: 0;
        margin: 0;
        border: 2px solid #d74b00;
    }

    .custom-table .sub-table .teaching-material > h3,
    .custom-table .sub-table .questions > h3 {
        /*background: #8B3521;*/
        background: #d74b00;
    }

    .custom-table .sub-table .examination-record .custom-table-tr {
        display: table;
        width: 100%;
    }

    .custom-table .sub-table .teaching-material .custom-table-tr {
        display: table;
        width: 100%;
    }



    .custom-table .sub-table > div {
        /*margin-top: 30px;*/
        margin-bottom: 30px;
        margin-top: 14px;
        display: none;
        position: relative;
    }

        .custom-table .sub-table > div.active {
            display: block;
        }

        .custom-table .sub-table > div > h3 {
            font-size: 1.7rem;
            text-align: center;
            color: white;
            padding: 15px;
            width: 200px;
            border-radius: 5px 5px 0 0;
            height: 10px;
        }

@media (max-width: 767px) {
    .tabs-nav li a {
        padding: 10px;
        font-size: 1.5rem;
    }
}
/*
.page-manage .people-detail .custom-table-th > button, .page-manage .people-detail .custom-table-td > button {
  min-width: 150px !important;
}
    */

.page {
    padding-top: 60px;
    padding-bottom: 60px;
}

    .page .banner {
        width: 100%;
        position: relative;
        height: 315px;
    }

        .page .banner img {
            width: 100%;
            -o-object-fit: fill;
            object-fit: fill;
            position: relative;
            bottom: 12px;
            -webkit-filter: blur(1px) brightness(0.5);
            filter: blur(1px) brightness(0.5);
            height: 315px;
        }

    .page .banner-text {
        color: white;
        position: absolute;
        font-weight: bolder;
        left: 50%;
        bottom: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 70px;
        padding: 25px 65px 40px 65px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        font-family: "Trade Gothic LT Std", sans-serif;
        width: 100%;
    }

    .page .banner .article-hero__title-outer {
        position: relative;
        top: -50px;
        z-index: 5;
        max-width: 1180px;
        padding: 0 20px;
        margin: 0 auto;
        margin-top: -262px;
    }

        .page .banner .article-hero__title-outer .article-hero__title {
            position: relative;
            font-size: 52px;
            font-weight: bold;
            text-transform: uppercase;
            line-height: 1.1;
            color: white;
            /*min-height: 230px;*/
        }

        .page .banner .article-hero__title-outer .article-hero__date {
            display: block;
            font-size: 16px;
            position: relative;
            color: #ffffff;
            margin-bottom: 20px;
            margin-top: 140px;
        }

@media (max-width: 1280px) {
    .page .banner .article-hero__title-outer {
        top: 0;
    }
}

@media (max-width: 1023px) {
    .page .banner .article-hero__title-outer {
        top: 0;
    }

        .page .banner .article-hero__title-outer .article-hero__title {
            font-size: 2.6rem;
        }

    .page .banner-text {
        border-width: 0 !important;
        font-size: 14px;
        width: auto;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        padding: 0;
        left: 4%;
        bottom: 20px;
        top: auto !important;
    }
        /*
        bottom: 1vw;
        font-size: 2.0rem;
        overflow-wrap: break-word;
            */
    }
}

@media (max-width: 640px) {
    .page .banner .article-hero__title-outer {
        top: 3vw;
    }
}

.custom-popup {
    background: #fafafa;
    width: 1000px;
    position: fixed;
    top: 0px;
    z-index: -1;
    font-size: 16px;
    opacity: 0;
    min-height: 550px;
    left: 50%;
    top: 10%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1.3) translateX(-50%);
    transform: scale(1.3) translateX(-50%);
    border-radius: 10px;
    visibility: hidden;
}

    .custom-popup.show {
        opacity: 1;
        visibility: visible;
        position: absolute;
        z-index: 100;
        -webkit-transform: scale(1) translateX(-50%);
        transform: scale(1) translateX(-50%);
    }

        .custom-popup.show ~ .custom-popup-overlay {
            display: block;
        }

    .custom-popup .close {
        color: gray;
        opacity: 1;
        font-size: 58px;
        position: absolute;
        right: 50px;
        top: 20px;
        font-weight: 100;
        z-index: 200;
    }

.custom-popup-body {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1000px;
    margin: 0 auto;
    margin-top: 30px;
}

    .custom-popup-body .divider {
        margin: 0 !important;
        padding: 0 !important;
    }

.custom-popup-title {
    font-family: Hind, sans-serif;
    color: #d74b00;
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
}

.custom-popup-content .login {
    height: 100%;
    min-width: 50%;
    padding: 20px 135px 0px 135px;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}

.custom-popup-content .login-title {
    font-family: Hind, sans-serif;
    font-size: 2.5em;
    color: white;
}

.custom-popup-content .login-form {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.9);
}

    .custom-popup-content .login-form .form-input {
        margin-top: 20px;
        font-size: 1.2em;
        width: 100%;
        display: inline-block;
        background: rgba(0, 0, 0, 0.06);
        border-bottom: 2px solid rgba(0, 0, 0, 0.42);
        height: 56px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .custom-popup-content .login-form .form-input:hover {
            background: rgba(0, 0, 0, 0.12);
        }

        .custom-popup-content .login-form .form-input.middle input {
            width: 35%;
        }

        .custom-popup-content .login-form .form-input label {
            font-weight: normal;
            width: 100%;
            display: inline-block;
            vertical-align: middle;
            font-size: 1.1em;
            color: rgba(0, 0, 0, 0.54);
        }

        .custom-popup-content .login-form .form-input input {
            height: 36px;
            width: 100%;
            font-size: 1em;
            padding-left: 15px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: transparent;
            border-style: none;
            margin-top: 22px;
        }

        .custom-popup-content .login-form .form-input.captcha img {
            display: inline-block;
            vertical-align: bottom;
            height: 36px;
            width: 186px;
            margin-top: 14px;
        }

    .custom-popup-content .login-form .form-tool {
        margin-top: 60px;
        z-index: 20;
        position: relative;
    }

        .custom-popup-content .login-form .form-tool .tool-link {
            width: 100%;
            color: black;
        }

        .custom-popup-content .login-form .form-tool .tool-link a {
            display: inline-block;
            font-size: 1.1em;
            text-decoration: none;
            color: black;
            padding: 0 10px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-right: -4px;
        }

        .custom-popup-content .login-form .form-tool .tool-link a:hover {
            text-decoration: underline;
        }

        .custom-popup-content .login-form .form-tool .tool-link a:first-child {
            padding-left: 0;
        }

        .custom-popup-content .login-form .form-tool .tool-link a + a {
            border-left: 1px solid white;
        }

        .custom-popup-content .login-form .form-tool .submit-button {
            margin-top: 14px;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            text-align: center;
            padding: 13px 30px;
            border-radius: 0;
            color: #ffffff;
            width: 100%;
            white-space: normal;
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        }

            .custom-popup-content .login-form .form-tool .submit-button:hover {
                color: #D74B00;
                background: #D5D5D5;
            }

.custom-popup-content .need-account-content {
    padding: 0 50px;
}

    .custom-popup-content .need-account-content .need-account-title {
        color: #474747;
        font-size: 2.3rem;
        font-weight: bold;
    }

    .custom-popup-content .need-account-content p {
        margin-top: 30px;
    }

        .custom-popup-content .need-account-content p.primary-color {
            color: #d74b00;
        }

    .custom-popup-content .need-account-content > ol {
        padding: 25px 15px 0 15px;
    }

        .custom-popup-content .need-account-content > ol li {
            color: gray;
            padding: 0 15px;
            padding: 5px 0;
            font-size: 1.5rem;
        }

            .custom-popup-content .need-account-content > ol li:last-child {
                padding-bottom: 0;
            }

.custom-popup-overlay {
    background: rgba(40, 40, 40, 0.95);
    width: 100%;
    height: 100vh;
    z-index: 99;
    position: fixed;
    top: 0;
    display: none;
}

.custom-popup .notice {
    width: 100%;
    margin: 0 auto;
    color: black;
}

.custom-popup .notice-area {
    margin-top: 50px;
}

    .custom-popup .notice-area label {
        margin: 10px 0;
        display: block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .custom-popup .notice-area label input[type=checkbox] {
            -webkit-transform: scale(1.3);
            transform: scale(1.3);
            position: relative;
            top: 1px;
            margin-right: 10px;
        }

    .custom-popup .notice-area pre {
        border-bottom: 2px solid gray;
        word-break: break-all;
        white-space: normal;
        padding: 3px 20px;
        line-height: 25px;
        font-size: 14px;
        max-height: 107px;
        overflow: auto;
        background: rgba(0, 0, 0, 0.06);
    }

.custom-popup .notice .text-center .primary-circle-button {
    margin-top: 50px;
}

.custom-popup .notice .text-center p {
    color: white;
    margin-top: 12px;
    font-size: 14px;
}

.custom-popup .register .form-group label {
    width: 22% !important;
}

.files-message {
    max-width: 450px;
    min-height: 250px;
}

    .files-message .message-header {
        padding: 10px 20px;
        border-bottom: 1px solid #f0eded;
    }

        .files-message .message-header h3 {
            margin: 0;
        }

    .files-message .message-content {
        padding: 20px 20px 10px 20px;
    }

        .files-message .message-content .list-item {
            display: flex;
            flex-wrap: wrap;
            font-size: 1.4rem;
        }

            .files-message .message-content .list-item .col01 {
                width: 80px;
            }

                .files-message .message-content .list-item .col01 .fa {
                    font-size: 5em;
                }

            .files-message .message-content .list-item .col02 {
                width: calc(100% - 80px);
            }

                .files-message .message-content .list-item .col02 h4 {
                    margin-top: 0;
                }

        .files-message .message-content .message-action {
            padding: 10px 0;
        }

            .files-message .message-content .message-action button {
                color: white;
                background: #d74b00;
                padding: 5px 20px;
                border-radius: 7px;
                font-size: 1em;
                font-weight: normal;
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out;
            }

        .files-message .message-content .message-remind .custom-checkbox {
            display: inline-block;
            font-size: 1.4rem;
            font-weight: 400;
        }

        .files-message .message-content .message-remind .checkmark {
        }

@media all and (max-width: 1023px) {
    .custom-popup.show {
        width: 90% !important;
    }

    .custom-popup .close {
        right: 23px;
        top: 3px;
    }

    .custom-popup-body {
        /*width: 100%;*/
        width: 100% !important;
        top: 15%;
    }

        .custom-popup-body .portal-form-wrapper form.portal-form {
            width: 90%;
        }

    .custom-popup-title {
        padding: 0 20px;
        /*font-size: 2em;*/
        font-size: 1.8em;
        text-align: left;
    }

    .custom-popup-content .portal-form-wrapper h2 {
        padding: 0 20px;
        font-size: 1.6em;
        text-align: left;
    }

    .custom-popup-content .login {
        margin-top: 30px;
        padding: 0 30px;
    }

    .custom-popup-content .login-form .form-input.middle input {
        width: 63%;
    }

    .custom-popup-content .login-form .form-input label {
        width: 37%;
    }

    .custom-popup-content .login-form .form-input input {
        width: 63%;
    }

    .custom-popup-content .login-form .form-input.captcha img {
        margin: 20px 0 0 37%;
        width: 150px;
    }

    .custom-popup-content .login-form .form-tool {
        margin-top: 22px;
    }

        .custom-popup-content .login-form .form-tool .tool-link a {
            padding: 5px 0;
            display: block;
        }

            .custom-popup-content .login-form .form-tool .tool-link a + a {
                border: none;
            }
}

@media all and (max-width: 768px) {
    .custom-popup-title {
        font-size: 1.5em;
    }

    .custom-popup .close {
        font-size: 2.5em;
        right: 10px;
    }
}

#simple-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100001;
}

.simple-popup {
    display: none;
}

.simple-popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    /* Safari <= 8.1 :-( */
    /* Bloody IE9 */
    transform: translate(-50%, -50%);
    max-height: 80%;
    max-width: 100%;
    z-index: 100002;
    padding: 30px 40px;
    -webkit-box-shadow: 2px 4px 15px 4px #b7b7b7;
    box-shadow: 2px 4px 15px 4px #b7b7b7;
    overflow: auto;
}

    .simple-popup-content .close {
        position: absolute;
        right: 0;
        top: 0;
        opacity: 1;
        font-weight: 100;
    }

        .simple-popup-content .close::before {
            display: inline-block;
            text-align: center;
            content: "\00d7";
            font-size: 30px;
            color: #666666;
            width: 50px;
            line-height: 50px;
        }

        .simple-popup-content .close:hover {
            cursor: hand;
            cursor: pointer;
        }

            .simple-popup-content .close:hover::before {
                color: grey;
            }

    .simple-popup-content h1.title {
        font-size: 2.1rem;
        font-weight: normal;
        margin: 0;
        margin-bottom: 18px;
    }

.simple-popup-content-form {
    margin-top: 18px;
}

    .simple-popup-content-form .form-control:focus {
        border-color: #d74b00;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #e3b9a2;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #e3b9a2;
    }

    .simple-popup-content-form button[type=submit] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: none;
        box-shadow: none;
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        background-color: #d74b00;
        border: 1px solid #f4f4f4;
        color: white;
        cursor: pointer;
        display: inline-block;
        height: 32px;
        min-width: 80px;
        padding: 4px 20px 6px;
    }

        .simple-popup-content-form button[type=submit]:disabled {
            background-color: #f4f4f4;
            border-color: #f4f4f4;
            cursor: not-allowed;
            font-weight: bold;
            color: #a4a4a4;
        }

#simple-popup-backdrop,
.simple-popup-backdrop-content {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
}

    #simple-popup,
    #simple-popup-backdrop,
    #simple-popup.hide-it,
    #simple-popup-backdrop.hide-it {
        -webkit-transition-property: opacity;
        transition-property: opacity;
    }

        #simple-popup.hide-it,
        #simple-popup-backdrop.hide-it {
            opacity: 0;
        }

#simple-popup,
#simple-popup-backdrop {
    opacity: 1;
}

.fa-angle-left, .fa-angle-right {
    opacity: 0.4;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .fa-angle-left:hover, .fa-angle-right:hover {
        opacity: 1;
    }

.swiper-button-next, .swiper-button-prev {
    opacity: 0.4;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .swiper-button-next:hover, .swiper-button-prev:hover {
        opacity: 1;
    }

body {
    background: #FAFAFA;
}

.page-index .banner {
    width: 100%;
    position: relative;
    margin-top: 56px;
}
.page .banner .pc-only img 
{
    height: 315px;
}

.page-index .banner img {
    width: 100%;
    -o-object-fit: fill;
    object-fit: fill;
    position: relative;
    bottom: -4px;
    height: 315px;
    cursor: pointer;
}

.page-index .banner img.disabled {
    cursor: auto !important;
}

.page-index .banner .bg-image.disabled {
    cursor: auto !important;
}

.page-index .banner-text {
    color: white;
    position: absolute;
    font-weight: bolder;
    top: 68%;
    left: 0;
    /*left: 50%;*/
    /*-webkit-transform: translateX(-50%);
    transform: translateX(-50%);*/
    font-size: 50px;
    width: 100%;
    padding: 25px 65px 40px 65px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-family: "Trade Gothic LT Std", sans-serif;
}

.page-index div.demarcation {
    height: 6px;
    background: #d74b00;
    margin: 0;
}

.page-index .content {
    margin-bottom: 30px;
    background: #FAFAFA;
}

    .page-index .content .content-main {
        height: 300px;
        width: 100%;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, #d74b00));
        background-image: linear-gradient(left, transparent 50%, #d74b00 50%);
        background: -ms-linear-gradient(left, transparent 50%, #d74b00 50%);
    }

        .page-index .content .content-main.no-news {
            background: #d74b00;
        }

        .page-index .content .content-main.no-announcement {
            background: #FAFAFA;
        }

        .page-index .content .content-main.no-information {
            display: none;
        }


        .page-index .content .content-main.not-login {
            height: 300px;
        }

        .page-index .content .content-main.not-show-login {
            background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), color-stop(50%, transparent));
            background-image: linear-gradient(left, transparent 50%, transparent 50%);
            background: -ms-linear-gradient(left, transparent 50%, transparent 50%);
        }

        .page-index .content .content-main.not-login .login {
            padding: 20px 0px 0px 40px !important;
            margin: 0 auto;
        }

    .page-index .content .content-main-wrap {
        max-width: 1366px;
        margin: 0 auto;
        height: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -o-flex;
        display: flex;
    }

    .page-index .content .content-main .news {
        background: #FAFAFA;
        height: 100%;
        min-width: 50%;
        padding: 20px 75px 0px 75px;
        font-size: 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        /*width: 50%;*/
    }

        .page-index .content .content-main .news .news-title {
            font-family: Hind, sans-serif;
            font-size: 2.3em;
            color: #d74b00;
        }

            .page-index .content .content-main .news .news-title span {
                color: black;
                font-family: Hind, sans-serif;
                font-size: 0.4em;
                font-weight: bold;
            }

        .page-index .content .content-main .news .news-subject {
            margin-top: 15px;
        }

            .page-index .content .content-main .news .news-subject a {
                font-size: 1.3em;
                text-decoration: none;
                line-height: 1.45em;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                height: 60px;
            }

                .page-index .content .content-main .news .news-subject a:hover {
                    text-decoration: underline;
                }

        .page-index .content .content-main .news .news-date-location {
            font-size: 0.8em;
            margin-top: 10px;
        }

        .page-index .content .content-main .news .news-content {
            margin-top: 20px;
            font-size: 0.9em;
            line-height: 1.4em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            word-break: break-word;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            height: 60px;
        }

        .page-index .content .content-main .news .news-more-button {
            margin-top: 14px;
            background: white;
            border-radius: 20%;
            border: 1px solid black;
            padding: 8px 30px;
            font-weight: normal;
            border-radius: 24px;
            font-size: 0.9em;
            cursor: pointer;
        }

        .page-index .content .content-main .news .news-arrow {
            position: absolute;
            color: #d74b00;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            font-size: 3.5em;
            cursor: pointer;
            outline: none;
        }

            .page-index .content .content-main .news .news-arrow.left {
                left: 20px;
            }

            .page-index .content .content-main .news .news-arrow.right {
                right: 20px;
            }

        .page-index .content .content-main .news .divided {
            border: none;
            height: 1px;
            margin: 0;
            margin-top: 20px;
        }

    .page-index .content .content-main .news-more-button {
        -webkit-transition: all .4s;
        transition: all .4s;
    }

        .page-index .content .content-main .news-more-button:hover {
            border: 1px solid #d74b00;
            color: #d74b00;
        }

    .page-index .content .content-main .news .divided {
        background: black;
    }

    .page-index .content .content-main .announcement {
        background: #d74b00;
        height: 100%;
        min-width: 50%;
        padding: 20px 75px 0px 75px;
        font-size: 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        width: 50%;
    }

        .page-index .content .content-main .announcement .announcement-title {
            font-family: Hind, sans-serif;
            font-size: 2.3em;
            color: #d74b00;
        }

            .page-index .content .content-main .announcement .announcement-title span {
                color: black;
                font-family: Microsoft JhengHei;
                font-size: 0.4em;
                font-weight: bold;
            }

        .page-index .content .content-main .announcement .announcement-subject {
            margin-top: 15px;
        }

            .page-index .content .content-main .announcement .announcement-subject a {
                font-size: 1.3em;
                text-decoration: none;
                line-height: 1.45em;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                height: 60px;
            }

                .page-index .content .content-main .announcement .announcement-subject a:hover {
                    text-decoration: underline;
                }

        .page-index .content .content-main .announcement .announcement-date-location {
            font-size: 0.8em;
            margin-top: 10px;
        }

        .page-index .content .content-main .announcement .announcement-content {
            margin-top: 20px;
            font-size: 0.9em;
            line-height: 1.4em;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            word-break: break-word;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            height: 60px;
        }

        .page-index .content .content-main .announcement .announcement-more-button {
            margin-top: 14px;
            background: white;
            border-radius: 20%;
            border: 1px solid black;
            padding: 8px 30px;
            font-weight: normal;
            border-radius: 24px;
            font-size: 0.9em;
            cursor: pointer;
        }

        .page-index .content .content-main .announcement .announcement-arrow {
            position: absolute;
            color: #d74b00;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            font-size: 3.5em;
            cursor: pointer;
            outline: none;
        }

            .page-index .content .content-main .announcement .announcement-arrow.left {
                left: 20px;
            }

            .page-index .content .content-main .announcement .announcement-arrow.right {
                right: 20px;
            }

        .page-index .content .content-main .announcement .divided {
            border: none;
            height: 1px;
            margin: 0;
            margin-top: 20px;
        }

        .page-index .content .content-main .announcement .divided {
            background: white;
        }

    .page-index .content .content-main .announcement-title, .page-index .content .content-main .announcement-subject, .page-index .content .content-main .announcement-more-button {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .page-index .content .content-main .announcement-date-location, .page-index .content .content-main .announcement-content {
        color: rgba(255, 255, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.85) !important;
    }

    .page-index .content .content-main .announcement-more-button {
        background: #d74b00 !important;
        border: 1px solid rgba(255, 255, 255, 0.85) !important;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

        .page-index .content .content-main .announcement-more-button:hover {
            border: 1px solid black !important;
            color: black !important;
        }

    .page-index .content .content-main .announcement-arrow {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .page-index .content .content-main .login {
        background: #d74b00;
        height: 100%;
        min-width: 50%;
        padding: 30px 45px 0px 45px;
        font-size: 16px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        /*width: 50%;*/
    }

    .page-index .content .content-main .login-title {
        font-family: Hind, sans-serif;
        font-size: 2.3em;
        color: white;
    }

    .page-index .content .content-main .login-form {
        margin-top: 15px;
        color: rgba(255, 255, 255, 0.9);
    }

        .page-index .content .content-main .login-form .form-input {
            margin-top: 12px;
            font-size: 1.2em;
        }

            .page-index .content .content-main .login-form .form-input.middle input {
                width: 35%;
            }

            .page-index .content .content-main .login-form .form-input label {
                font-weight: normal;
                width: 30%;
                display: inline-block;
                vertical-align: middle;
                font-size: 1em;
            }

            .page-index .content .content-main .login-form .form-input input {
                height: 36px;
                width: 70%;
                font-size: 1em;
                padding-left: 15px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

            .page-index .content .content-main .login-form .form-input.captcha > .captcha-index {
                width: 70%;
            }

            .page-index .content .content-main .login-form .form-input.captcha img {
                display: inline-block;
                vertical-align: bottom;
                height: 36px;
                width: 219px;
            }

        .page-index .content .content-main .login-form .form-tool {
            display: inline;
            margin-top: 44px;
        }

            .page-index .content .content-main .login-form .form-tool .tool-link {
                width: 100%;
                margin-top: 12px;
            }

                .page-index .content .content-main .login-form .form-tool .tool-link a {
                    display: inline;
                    font-size: 0.8em;
                    text-decoration: none;
                    color: rgba(255, 255, 255, 0.9);
                    margin: 3px;
                }

                    .page-index .content .content-main .login-form .form-tool .tool-link a:hover {
                        text-decoration: underline;
                    }

                    .page-index .content .content-main .login-form .form-tool .tool-link a + a {
                        margin-top: 8px;
                    }

                    .page-index .content .content-main .login-form .form-tool .tool-link a:first-child {
                        margin-left: 0px;
                    }

                    .page-index .content .content-main .login-form .form-tool .tool-link a:last-child {
                        margin-right: 0px;
                    }

                .page-index .content .content-main .login-form .form-tool .tool-link .ic-need-account {
                    cursor: pointer;
                    position: relative;
                    left: -5px;
                    top: 2px;
                }

            .page-index .content .content-main .login-form .form-tool .submit-button {
                width: 99.7%;
                height: 35px;
                cursor: pointer;
                background: #bbbbbb;
                font-size: 1em;
                margin-top: 12px;
                margin-right: 2px;
                color: black;
                opacity: 1;
                -webkit-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
                border-radius: 4px;
            }

                .page-index .content .content-main .login-form .form-tool .submit-button:hover {
                    /*opacity: 0.7;*/
                    border: 1px solid white;
                }

            .page-index .content .content-main .login-form .form-tool .need-account {
                text-decoration: none;
                color: black;
                font-size: 0.8em;
            }

                .page-index .content .content-main .login-form .form-tool .need-account:hover {
                    text-decoration: underline;
                }

.page-index .content-divider {
    width: 100%;
    height: 6px;
    background: #303030;
}

.page-index .content-main-links {
    width: 100%;
    height: 317px;
    background: #303030;
}

.page-index .content-main-links-wrap {
    max-width: 1366px;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .page-index .content-main-links-wrap .main-links-box {
        width: 24%;
        height: 222px;
        background-size: 100% !important;
        position: relative;
        -webkit-transition: all .3s;
        transition: all .3s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        cursor: pointer;
    }

        .page-index .content-main-links-wrap .main-links-box:hover {
            border: 5px solid #d74b00;
        }

        .page-index .content-main-links-wrap .main-links-box.eLibrary {
            background: url(/ServicePortal/Content/css/image/home/eLibrary.png) no-repeat center;
            background-size: cover;
        }

        .page-index .content-main-links-wrap .main-links-box.eLearning {
            background: url(/ServicePortal/Content/css/image/home/eLearning.png) no-repeat center;
            background-size: cover;
        }

        .page-index .content-main-links-wrap .main-links-box.forum {
            background: url(/ServicePortal/Content/css/image/home/forum.png) no-repeat center;
            background-size: cover;
        }

        .page-index .content-main-links-wrap .main-links-box.dealer {
            background: url(/ServicePortal/Content/css/image/home/eLibrary.png) no-repeat center;
            background-size: cover;
        }

    .page-index .content-main-links-wrap .main-links-box-content {
        text-align: center;
        position: absolute;
        bottom: 32%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 30px;
        color: white;
        font-family: Hind, sans-serif;
    }

        .page-index .content-main-links-wrap .main-links-box-content h4 {
            margin-top: 20px;
        }

        .page-index .content-main-links-wrap .main-links-box-content img {
            zoom: 0.75;
        }

.page-index .content-links {
    background: #FAFAFA;
    margin-top: 30px;
}

    .page-index .content-links .links-row {
        height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /*
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
*/
        max-width: 1366px;
        margin: 0 auto;
        border-top: 4px solid #FAFAFA;
        border-left: 4px solid #FAFAFA;
        border-right: 4px solid #FAFAFA;
        margin-top: 20px;
        border-top: none !important;
    }

        .page-index .content-links .links-row .links-box {
            height: 100%;
            width: 345px;
            background: white;
            -webkit-transition: all 0.7s ease-in-out;
            transition: all 0.7s ease-in-out;
            cursor: pointer;
            position: relative;
            font-family: Hind, sans-serif;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 25px;
            border-top: 1px solid #eeeeee;
            border-left: 1px solid #eeeeee;
            border-right: 1px solid #eeeeee;
            -webkit-box-shadow: 0px 5px #aaaaaa;
            box-shadow: 0px 5px #aaaaaa;
        }

            .page-index .content-links .links-row .links-box.sub-link {
                background: #dddddd;
            }

            .page-index .content-links .links-row .links-box h5 {
                color: #303030;
                font-size: 2.8rem;
                margin-top: 25px;
                -webkit-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
                position: absolute;
                width: 100%;
                text-align: center;
                top: 55%;
                font-weight: 700;
                font-family: "Hind", sans-serif;
                word-break: break-word;
            }

            .page-index .content-links .links-row .links-box img {
                zoom: 1;
                position: absolute;
                left: 50%;
                top: 7%;
                News-title -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                width: 130px;
            }

        .page-index .content-links .links-row .links-box-content {
            text-align: center;
            position: absolute;
            bottom: 32%;
            width: 100%;
        }

            .page-index .content-links .links-row .links-box-content h5 {
                color: #303030;
                font-size: 2.4rem;
                margin-top: 25px;
                -webkit-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
            }

            .page-index .content-links .links-row .links-box-content img {
                zoom: 0.75;
            }

        .page-index .content-links .links-row .links-box:hover {
            background: #7b7256;
        }

            .page-index .content-links .links-row .links-box:hover h5 {
                color: white;
            }

        .page-index .content-links .links-row .links-box.rowspan2 {
            width: 705px;
        }

        .page-index .content-links .links-row .links-box.rowspan3 {
            width: 1035px;
        }

        .page-index .content-links .links-row .links-box + .links-box {
            /*border-left: 12px solid white;*/
            margin-left: 20px;
        }

@media all and (min-width: 1024px) and (max-width: 1366px) {
    .page-index .banner-text {
        top: 63%;
        white-space: nowrap;
    }

    .page-index .content .content-main .content-main-wrap {
        max-width: 1024px;
    }

    .page-index .content .content-main.not-login .login {
        padding-right: 40px !important;
    }

        .page-index .content .content-main.not-login .login .login-form .form-input.captcha img {
            width: 143px;
        }

    .page-index .content-links .links-row {
        height: 256px;
        max-width: 1024px;
    }

    .page-index .content-main-links-wrap {
        padding: 0 6px;
        max-width: 1024px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .page-index .content-main-links-wrap .main-links-box {
            background-size: auto 100% !important;
            padding-bottom: 20%;
            height: auto;
        }

        .page-index .content-main-links-wrap .main-links-box-content {
            bottom: 26%;
        }
}

@media all and (max-width: 1023px) {
    .page-index .banner-text {
        border-width: 0 !important;
        font-size: 14px;
        width: 100%;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        padding: 0;
        bottom: 20px;
        top: auto !important;
    }

    .page-index .content .content-main.not-login .login
    {
        margin: initial !important;
    }

    .page-index div.demarcation {
        display: none;
    }

    .page-index .content {
        margin-bottom: 3px;
    }

        .page-index .content .mobile-tab > div {
            float: left;
            width: 50%;
            height: 46px;
        }

            .page-index .content .mobile-tab > div h2.tab-title {
                line-height: 46px;
                font-size: 23px;
                font-weight: bold;
                text-align: center;
                font-family: Hind, sans-serif;
            }

                .page-index .content .mobile-tab > div h2.tab-title span {
                    color: black;
                    font-size: 12px;
                    font-weight: bold;
                }

        .page-index .content .mobile-tab-news {
            background: white;
            color: #d74b00;
        }

        .page-index .content .mobile-tab-announcement {
            background: #d74b00;
            color: white;
        }

        .page-index .content .content-main {
            height: auto;
        }

            .page-index .content .content-main.not-login {
                height: auto;
            }

                .page-index .content .content-main.not-login .login {
                    /* padding: 30px 35px 0px 35px !important;*/
                    padding: 20px 35px 20px 35px !important;
                }

        .page-index .content .content-main-wrap {
            width: 100%;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
        }

        .page-index .content .content-main .login {
            font-size: 15px;
            display: none;
        }

    .portal-reset-password form.portal-form {
        width: 80% !important;
        }

            .page-index .content .content-main .login .tool-link {
                width: auto !important;
                line-height: 20px;
            }

            .page-index .content .content-main .login .submit-button {
                background-size: 80% !important;
                position: relative;
                /*left: 10px;*/
            }

            .page-index .content .content-main .login .captcha input {
                /*width: 69% !important;*/
                width: calc(100% - 200px);
            }

        .page-index .content .content-main .login-form .form-input label {
            width: 100%;
            display: block;
            margin-bottom: 10px;
        }

        .page-index .content .content-main .login-form .form-input input {
            width: 100%;
        }

        .page-index .content .content-main .login-form .form-input.captcha {
            display: block;
        }

            .page-index .content .content-main .login-form .form-input.captcha label {
                width: 100%;
                display: block;
                margin-bottom: 10px;
            }

            .page-index .content .content-main .login-form .form-input.captcha > .captcha-index {
                width: 100%;
            }

        .page-index .content .content-main .login .captcha img {
            display: block !important;
            width: 150px !important;
            /*margin: 20px 0px 0px 30% !important; */
            margin: 0px 0px 0px 10px !important;
        }

    .captcha > a, .captcha-inner > a {
        margin-left: 10px;        
    }

    .page-index .content .content-main .news {
        font-size: 16px;
        padding-bottom: 27px;
        width: 100%;
    }

    .page-index .content .content-main .news-title {
        display: none;
    }

    .page-index .content .content-main .news-subject {
        max-height: 91px;
        overflow: hidden;
        margin-top: 0 !important;
    }

        .page-index .content .content-main .news-subject a {
            line-height: 1.15em;
        }

    .page-index .content .content-main .announcement {
        font-size: 16px;
        padding-bottom: 27px;
        margin-top: -1px;
        width: 100%;
    }

    .page-index .content .content-main .announcement-title {
        display: inline-block;
        font-size: 2.0em !important;
    }

    .page-index .content .content-main .announcement-subject {
        max-height: 91px;
        overflow: hidden;
        margin-top: 0 !important;
    }

        .page-index .content .content-main .announcement-subject a {
            line-height: 1.15em;
        }

    .page-index .content .content-main .login-form .form-tool {
        margin-top: 22px;
        margin-bottom: 22px;
    }

    .page-index .content-main-links {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        background: white;
        height: auto;
    }

    .page-index .content-main-links-wrap {
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .page-index .content-main-links .main-links-box {
        background: #484848 !important;
        height: 50px;
        width: 100%;
        margin-top: 3px;
    }

        .page-index .content-main-links .main-links-box:hover {
            border: none;
        }

    .page-index .content-main-links .main-links-box-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        bottom: 0;
    }

        .page-index .content-main-links .main-links-box-content .img-wrapper {
            width: 65px;
            text-align: center;
        }

            .page-index .content-main-links .main-links-box-content .img-wrapper img {
                height: 23px;
            }

    .page-index .content-main-links .main-links-box:last-child .main-links-box-content .img-wrapper img {
        height: 35px;
    }

    .page-index .content-main-links .main-links-box-content h4 {
        margin: 0 15px;
        font-size: 18px;
        position: absolute;
        left: 13%;
        font-family: Microsoft Jhenghei;
    }

    .page-index .content-main-links .main-links-box-content .fa-caret-right {
        position: absolute;
        right: 16px;
        font-size: 21px;
    }

    .page-index .content-links {
        background: white;
        margin-top: 0px;
    }

        .page-index .content-links .links-row {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            height: auto;
            margin-top: 3px;
            border: none !important;
        }

            .page-index .content-links .links-row .links-box {
                width: 100%;
                height: 50px;
                border: none !important;
                /*background: #484848 !important;*/
                background: white !important;
                border-radius: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            .page-index .content-links .links-row .links-box.sub-link  {
                width: 100%;
                height: 50px;
                border: none !important;
                /*background: #484848 !important;*/
                background: #dddddd !important;
                border-radius: 0;
                -webkit-box-shadow: none;
                box-shadow: none;
            }
                /*
            .page-index .content-links .links-row:last-child .links-box {
                background: #f5f5f5 !important;
            }
            */
            .page-index .content-links .links-row .links-box a {
                display: block;
                width: 100%;
            }

            .page-index .content-links .links-row .links-box h5 {
                margin-top: 0;
                font-size: 18px;
                /*color: #fff;*/
                left: 15%;
                top: 38%;
                width: auto;
            }

            .page-index .content-links .links-row .links-box .fa-caret-right {
                font-size: 21px;
                color: #fff;
                position: absolute;
                right: 16px;
                top: 15px;
                display: none;
            }

            .page-index .content-links .links-row .links-box img {
                width: 24px;
                position: absolute;
                left: 30px;
                top: 15px;
            }

            .page-index .content-links .links-row .links-box + .links-box {
                margin-top: 3px;
            }

            .page-index .content-links .links-row .links-box + .links-box {
                margin-left: 0;
            }

            .page-index .content-links .links-row .links-box.sub-link:hover {
                background: #888888 !important;
            }

            .page-index .content-links .links-row .links-box-content {
                position: relative;
                bottom: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                height: 100%;
            }

                .page-index .content-links .links-row .links-box-content h5 {
                    margin: 0 15px;
                    font-size: 18px;
                    text-align: left;
                    font-family: Microsoft Jhenghei;
                    position: absolute;
                    left: 13%;
                }

                .page-index .content-links .links-row .links-box-content .img-wrapper {
                    width: 65px;
                    text-align: center;
                }

                    .page-index .content-links .links-row .links-box-content .img-wrapper img {
                        height: 23px;
                    }

                .page-index .content-links .links-row .links-box-content .fa-caret-right {
                    position: absolute;
                    right: 16px;
                    font-size: 21px;
                    color: white;
                }

            .page-index .content-links .links-row .links-box:hover {
                background: #b5b5b6 !important;
            }

            .page-index .content-links .links-row .links-box.rowspan2 {
                width: 100%;
            }

            .page-index .content-links .links-row .links-box.rowspan3 {
                width: 100%;
            }
}

/*for ie10 、 ie11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .news-subject,
    .announcement-subject {
        max-height: 60px !important;
        overflow: hidden !important;
    }

    .news-content,
    .announcement-content {
        max-height: 60px !important;
    }
}

.page-eLearning {
    padding-top: 60px;
}

    .page-eLearning .banner {
        text-align: center;
    }

        .page-eLearning .banner img {
            position: relative;
            max-width: 100%;
            width: 100%;
            margin-bottom: -3px;
        }

    .page-eLearning .content {
        background: #fafafa;
    }

        .page-eLearning .content .content-outer {
            margin-bottom: 30px;
            margin-top: 30px;
        }

    .page-eLearning .content-wrap {
        height: 200px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        max-width: 1366px;
        margin: 0 auto;
        border-top: 4px solid #FAFAFA;
        border-left: 4px solid #FAFAFA;
        border-right: 4px solid #FAFAFA;
        margin-top: 20px;
        border-top: none !important;
    }

    .page-eLearning .content-box {
        height: 100%;
        width: 325px;
        background: white;
        -webkit-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        cursor: pointer;
        position: relative;
        font-family: Hind, sans-serif;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 25px;
        border-top: 1px solid #eeeeee;
        border-left: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        -webkit-box-shadow: 0px 5px #aaaaaa;
        box-shadow: 0px 5px #aaaaaa;
    }

        .page-eLearning .content-box + .content-box, .page-eLearning .content-box:first-child {
            /*border-left: 6px solid white;*/
            border-left: 1px solid white;
        }

        .page-eLearning .content-box:first-child {
            border-left: none;
        }

        .page-eLearning .content-box:nth-child(4) {
            /*border-right: 6px solid white;*/
        }

        .page-eLearning .content-box:hover {
            background: #7B7256;
            /*background: #ccc;*/
        }

            .page-eLearning .content-box:hover .box-content h4 {
                color: white;
            }

        .page-eLearning .content-box .box-content {
            position: absolute;
            bottom: 15%;
            text-align: center;
            width: 100%;
        }

            .page-eLearning .content-box .box-content h4 {
                /*font-size: 2.4rem;*/
                font-size: 2rem;
                margin-top: 27px;
                color: #303030;
                width: 100%;
                font-family: Hind, sans-serif;
                -webkit-transition: all 0.7s ease-in-out;
                transition: all 0.7s ease-in-out;
            }

            .page-eLearning .content-box .box-content img {
                zoom: 0.85;
            }

@media all and (max-width: 1240px) {
    .page-eLearning .content-box {
        width: 25%;
    }
}

@media all and (max-width: 1023px) {
    .page-eLearning {
        padding: 0;
    }

        .page-eLearning .banner {
            text-align: center;
            position: relative;
            background: url(/ServicePortal/Content/image/eLearning/mobile_banner.jpg) center no-repeat;
            background-size: cover;
            min-height: 40vw;
        }

            .page-eLearning .banner img {
                position: relative;
                bottom: -2px;
                max-width: 100%;
            }

        .page-eLearning .banner-text {
            font-size: 40px;
            font-weight: normal;
            position: absolute;
            left: 12.3px;
            bottom: 25.9px;
            color: white;
        }

        .page-eLearning .content {
            padding: 0 0 3px 0;
            background: white;
        }

        .page-eLearning .content-wrap {
            display: block;
        }

        .page-eLearning .content-box {
            width: 100%;
            height: 50px;
            margin-left: 0px !important;
            border: none !important;
        }

            .page-eLearning .content-box + .content-box {
                margin-top: 4px;
            }

            .page-eLearning .content-box .box-content {
                position: relative;
                bottom: 0;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                height: 100%;
            }

                .page-eLearning .content-box .box-content .img-wrapper {
                    width: 65px;
                    text-align: center;
                }

                    .page-eLearning .content-box .box-content .img-wrapper img {
                        height: 25px;
                    }

                .page-eLearning .content-box .box-content h4 {
                    margin: 0 15px;
                    width: auto;
                    font-size: 18px;
                    text-align: left;
                    position: absolute;
                    left: 50px;
                }
}

.page-forum {
    padding-top: 60px !important;
}

    .page-forum .banner {
        text-align: center;
    }

        .page-forum .banner img {
            position: relative;
            /*bottom: -4px;*/
            max-width: 100%;
            width: 100%;
        }

    .page-forum .content-main-links {
        width: 100%;
        background: #f9f9f9;
        border-bottom: 1px solid #ccc;
    }

        .page-forum .content-main-links:last-child {
            border-bottom: none !important;
        }

        .page-forum .content-main-links.last {
            border-bottom: none !important;
        }

    .page-forum .content-main-links-wrap {
        max-width: 740px;
        height: 100%;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        /*display: flex;
        -webkit-box-pack: justify;　
        -ms-flex-pack: justify;
        justify-content: space-between;*/
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        flex-wrap: wrap;
    }

        .page-forum .content-main-links-wrap .main-links-box {
            width: 25%;
            height: 190px;
            background-size: 100% !important;
            position: relative;
            -webkit-transition: all .3s;
            transition: all .3s;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            cursor: pointer;
            font-size: 14px;
            color: black;
            border-right: 1px solid #ccc;
        }

            .page-forum .content-main-links-wrap .main-links-box.active {
                color: #d74b00;
            }

                .page-forum .content-main-links-wrap .main-links-box.active:after {
                    content: "";
                    background: url(/Content/image/forum/current-arrow.png) no-repeat 0 0;
                    width: 24px;
                    display: block;
                    height: 24px;
                    color: #d74b00;
                    position: absolute;
                    bottom: -14px;
                    left: 50%;
                    margin-left: -12px;
                }

            .page-forum .content-main-links-wrap .main-links-box:hover {
                color: #d74b00;
            }

            .page-forum .content-main-links-wrap .main-links-box:last-child {
                border-right: 0;
            }

        .page-forum .content-main-links-wrap .main-links-box-content {
            text-align: center;
            position: absolute;
            top: 15%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            font-size: 16px;
            /*color: black;*/
            font-family: Hind, sans-serif;
        }

            .page-forum .content-main-links-wrap .main-links-box-content h4 {
                margin-top: 20px;
            }

            .page-forum .content-main-links-wrap .main-links-box-content img {
                width: 100px;
            }

    .page-forum .content .sub-class-row {
        overflow: hidden;
        margin-bottom: 0px;
        height: 0px;
    }

        .page-forum .content .sub-class-row.active {
            border-bottom: 1px solid #ccc;
        }

        .page-forum .content .sub-class-row .subnav {
            width: 100%;
            margin-right: 10px;
            padding: 12px 0 10px;
        }

            .page-forum .content .sub-class-row .subnav .subnav-container {
                overflow: hidden;
                margin: 0 auto;
            }

            .page-forum .content .sub-class-row .subnav li {
                list-style: none;
                display: block;
                padding-top: 10px;
                /*min-height: 60px;*/
                background: #fff;
            }
                .page-forum .content .sub-class-row .subnav li:nth-child(even) {
                    background: #f9f9f9;
                }
                .page-forum .content .sub-class-row .subnav li a {
                    max-width: 860px;
                    margin: 0px auto 0;
                    padding: 0px 0 10px 45px;
                    font-size: 17px;
                    line-height: 1.2em;
                    color: #0090d0;
                    display: block;
                    text-decoration: none;
                    font-weight: normal;
                    background-size: 32px 32px !important;
                    position: relative;
                }

                    .page-forum .content .sub-class-row .subnav li a:hover {
                        text-decoration: none;
                    }

                        .page-forum .content .sub-class-row .subnav li a:hover span:first-child {
                            text-decoration: underline;
                        }

                    .page-forum .content .sub-class-row .subnav li a span {
                        padding-left: 0px;
                        display: block;
                        color: #D74B00;
                    }

                        .page-forum .content .sub-class-row .subnav li a span.title {
                            color: #777;
                        }

                        .page-forum .content .sub-class-row .subnav li a span.desc {
                            color: #666;
                            font-size: 14px;
                        }

                        .page-forum .content .sub-class-row .subnav li a span:nth-child(3) {
                            position: absolute;
                            top: 0;
                            left: 150px;
                        }

                .page-forum .content .sub-class-row .subnav li:nth-child(even) {
                    background: #f9f9f9;
                }

                .page-forum .content .sub-class-row .subnav li p {
                    color: #666;
                    line-height: 2em;
                    font-size: 12px;
                }

    .page-forum .content .accordion {
        background-color: #303030;
        color: white;
        cursor: pointer;
        padding: 0 43.2px;
        height: 68px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 24px;
        font-weight: normal;
        margin-top: 0.28%;
        position: relative;
        font-family: Hind, sans-serif;
    }

        .page-forum .content .accordion .toggle-icon {
            font-size: 50px;
            font-family: Hind, sans-serif;
            position: absolute;
            top: 50%;
            display: block;
            height: auto;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            right: 45px;
        }

            .page-forum .content .accordion .toggle-icon img {
                width: 30px;
                position: absolute;
                top: 50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
            }

    .page-forum .content .accordion-panel {
        padding: 0;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.4s ease-in-out;
        transition: max-height 0.4s ease-in-out;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        max-width: 1366px;
        margin: 0 auto;
        position: relative;
    }

        .page-forum .content .accordion-panel .arrow {
            height: auto;
            width: 50px;
            background: #919090;
            margin-top: 0.28%;
            color: white;
            font-size: 35px;
            position: relative;
            cursor: pointer;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
        }

            .page-forum .content .accordion-panel .arrow:hover {
                background: gray;
            }

            .page-forum .content .accordion-panel .arrow i {
                position: absolute;
                -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                left: 50%;
                top: 50%;
            }

            .page-forum .content .accordion-panel .arrow.prev-arrow {
                margin-right: 2px;
            }

            .page-forum .content .accordion-panel .arrow.next-arrow {
                margin-left: 2px;
            }

        .page-forum .content .accordion-panel .sub-category {
            background: #B5B5B6;
            margin-top: 0.28%;
            width: 21.8%;
            height: 270px;
            position: relative;
            cursor: pointer;
            margin-left: 2px;
            margin-right: 2px;
        }

        .page-forum .content .accordion-panel .sub-category-content {
            position: absolute;
            top: 15%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
        }

            .page-forum .content .accordion-panel .sub-category-content h3 {
                width: 100%;
                text-align: center;
                color: white;
                font-size: 20px;
                margin-top: 10px;
                position: absolute;
                top: 150px;
            }

    .page-forum .content .content-list-wrapper .content-list {
        width: 49%;
        padding: 25px 43.2px;
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .page-forum .content .content-list-wrapper .content-list-title {
        font-size: 30px;
        color: #d74b00;
        font-family: Hind, sans-serif;
    }

    .page-forum .content .content-list-wrapper .content-list ul {
        margin-top: 36px;
    }

    .page-forum .content .content-list-wrapper .content-list-article {
        padding: 15px 0;
        position: relative;
    }

        .page-forum .content .content-list-wrapper .content-list-article:first-child {
            padding-top: 0;
        }

        .page-forum .content .content-list-wrapper .content-list-article + .content-list-article {
            border-top: 1px solid #303030;
        }

        .page-forum .content .content-list-wrapper .content-list-article .article-title {
            font-size: 18px;
            color: black;
            cursor: pointer;
        }

            .page-forum .content .content-list-wrapper .content-list-article .article-title a {
                text-decoration: none;
            }

                .page-forum .content .content-list-wrapper .content-list-article .article-title a:link,
                .page-forum .content .content-list-wrapper .content-list-article .article-title a:visited,
                .page-forum .content .content-list-wrapper .content-list-article .article-title a:hover,
                .page-forum .content .content-list-wrapper .content-list-article .article-title a:active {
                    color: black;
                }

.breadcrumbs-new span {
    font-size: 16px;
    color: white;
    display: inline-block;
    margin: 0 5px;
}

.page-forum .content .content-list-wrapper .content-list-article .article-title:hover {
    text-decoration: underline;
}

.page-forum .content .content-list-wrapper .content-list-article .article-datetime {
    font-size: 14px;
    color: #303030;
    margin-top: 10px;
}

.page-forum .content .content-list-wrapper .content-list-article .article-replies {
    font-size: 14px;
    color: black;
    position: absolute;
    right: 0;
    bottom: 22px;
}

.page-forum .content .forum-list {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px;
}

    .page-forum .content .forum-list .new-topic-button {
        float: right;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        text-align: center;
        padding: 13px 30px;
        border-radius: 100px;
        color: #ffffff;
        min-width: 180px;
        white-space: normal;
        -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    }

        .page-forum .content .forum-list .new-topic-button:hover {
            color: #D74B00;
            background: #D5D5D5;
        }

    .page-forum .content .forum-list .tabs-nav li:first-child {
        margin-left: 0 !important;
    }

    .page-forum .content .forum-list .tabs-nav li {
        margin: 0 3px 0 0;
    }

        .page-forum .content .forum-list .tabs-nav li a {
            background: #fafafa;
            display: block;
            padding: 0 15px;
            line-height: 2.5;
            font-weight: bold;
            border-radius: 6px 6px 0 0;
            border: 1px solid #dbdbdb;
            position: relative;
            bottom: -1px;
            margin-top: 3px;
        }

.page-forum .content .forum-list-title {
    color: #d74b00;
    font-size: 30px;
    margin-bottom: 20px;
    font-family: Hind, sans-serif;
}

.page-forum .content .forum-list-table {
    border-top: 1px solid black;
    table-layout: fixed;
    width: 100%;
    font-size: 16px;
}

    .page-forum .content .forum-list-table thead th.sortable:hover {
        background: #f4f4f4;
    }

    .page-forum .content .forum-list-table tbody tr:hover {
        background: #f4f4f4;
    }

    .page-forum .content .forum-list-table th {
        padding: 15px 10px;
        text-align: left;
        border-bottom: 1px solid black;
    }

        .page-forum .content .forum-list-table th:first-child {
            width: 50px;
            padding: 0 !important;
        }

        .page-forum .content .forum-list-table th:nth-child(2) {
            width: 40%;
        }

        .page-forum .content .forum-list-table th:nth-child(6), .page-forum .content .forum-list-table th:nth-child(7) {
            text-align: center;
        }

    .page-forum .content .forum-list-table td {
        padding: 15px 10px;
        vertical-align: middle;
    }

        .page-forum .content .forum-list-table td:nth-child(6), .page-forum .content .forum-list-table td:nth-child(7) {
            text-align: center;
        }

        .page-forum .content .forum-list-table td a {
            color: black;
            text-decoration: none;
        }

            .page-forum .content .forum-list-table td a:hover {
                text-decoration: underline;
            }

        .page-forum .content .forum-list-table td .top-icon {
            width: 35px;
        }

        .page-forum .content .forum-list-table td .manage-button button {
            width: 40px;
            height: 35px;
            background-size: 100% 100% !important;
            margin: 5px;
        }

            .page-forum .content .forum-list-table td .manage-button button.remove {
                background: url(/ServicePortal/Content/css/image/forum/ic_time.svg);
            }

            .page-forum .content .forum-list-table td .manage-button button.arrow-up {
                background: url(/ServicePortal/Content/css/image/forum/ic_arrow_up.svg);
            }

            .page-forum .content .forum-list-table td .manage-button button.arrow-down {
                background: url(/ServicePortal/Content/css/image/forum/ic_arrow_down.svg);
            }

.page-forum .content .forum-detail {
    padding: 0 10px;
}

.page-forum .content .forum-detail-title {
    color: #d74b00;
    font-size: 30px;
    margin-bottom: 20px;
    margin-top: 50px;
    font-family: Hind, sans-serif;
}

.page-forum .content .forum-detail .detail-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

    .page-forum .content .forum-detail .detail-info .count-area {
        background: black;
        width: auto;
        min-width: 160px;
        color: white;
        font-size: 14px;
        border-radius: 20px;
        height: 40px;
    }

        .page-forum .content .forum-detail .detail-info .count-area .icon {
            width: 28px;
            height: 23px;
            background-image: url(/ServicePortal/Content/css/image/forum/ic_count.png);
            float: left;
        }

        .page-forum .content .forum-detail .detail-info .count-area span {
            position: relative;
            top: 5px;
            margin-left: 5px;
        }

        .page-forum .content .forum-detail .detail-info .count-area .reply-count {
            display: inline-block;
            margin: 9px;
            margin-left: 25px;
        }

        .page-forum .content .forum-detail .detail-info .count-area .view-count {
            display: inline-block;
        }

            .page-forum .content .forum-detail .detail-info .count-area .view-count .ic-view {
                background-position: right;
            }

    .page-forum .content .forum-detail .detail-info .subscribe-button {
        margin-left: 27px;
        background-color: #d74b00;
        border-radius: 20px;
        min-width: 160px;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-weight: normal;
        font-size: 15px;
    }

        .page-forum .content .forum-detail .detail-info .subscribe-button img {
            margin: 0 6px;
        }

.page-forum .content .forum-detail .article-area {
    margin-top: 25px;
}

    .page-forum .content .forum-detail .article-area .article-header {
        height: 133px;
        background: #636569;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: white;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        font-size: 14px;
        font-weight: normal;
        padding-left: 22px;
    }

        .page-forum .content .forum-detail .article-area .article-header .article-info {
            margin-left: 25px;
        }

            .page-forum .content .forum-detail .article-area .article-header .article-info .author-name {
                font-size: 17px;
            }

                .page-forum .content .forum-detail .article-area .article-header .article-info .author-name .level {
                    background: white;
                    color: #d74b00;
                    border-radius: 20px;
                    padding: 0px 10px;
                    font-size: 12px;
                    border: 1px solid black;
                    margin-left: 15px;
                    position: relative;
                    top: -3px;
                    font-weight: bold;
                }

            .page-forum .content .forum-detail .article-area .article-header .article-info .publish-time {
                margin-top: 20px;
            }

            .page-forum .content .forum-detail .article-area .article-header .article-info .last-edit-time {
                margin-top: 15px;
            }

        .page-forum .content .forum-detail .article-area .article-header .send-message {
            background: none;
            position: absolute;
            right: 30px;
            bottom: 20px;
        }

    .page-forum .content .forum-detail .article-area .article-content {
        padding: 30px 165px 30px 25px;
        position: relative;
    }

        .page-forum .content .forum-detail .article-area .article-content .article-main .demo-text {
            font-size: 16px;
            line-height: 23px;
        }

        .page-forum .content .forum-detail .article-area .article-content .article-main .demo-img {
            margin-top: 15px;
        }

            .page-forum .content .forum-detail .article-area .article-content .article-main .demo-img img + img {
                margin-left: 20px;
            }

        .page-forum .content .forum-detail .article-area .article-content .tags {
            color: #ef5300;
            font-size: 15px;
            margin-top: 20px;
        }

    .page-forum .content .forum-detail .article-area .article-attachment {
        padding: 30px 25px;
    }

    .page-forum .content .forum-detail .article-area .article-attachment-row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 15px;
        border-bottom: 2px solid gray;
    }

        .page-forum .content .forum-detail .article-area .article-attachment-row:first-child {
            border-top: 2px solid gray;
            padding: 10px 0;
        }

        .page-forum .content .forum-detail .article-area .article-attachment-row img {
            margin-right: 20px;
        }

        .page-forum .content .forum-detail .article-area .article-attachment-row a {
            cursor: pointer;
        }

            .page-forum .content .forum-detail .article-area .article-attachment-row a:hover {
                text-decoration: underline;
            }

        .page-forum .content .forum-detail .article-area .article-attachment-row .attachment-size {
            margin-left: 111px;
        }

    .page-forum .content .forum-detail .article-area .article .good-and-bad {
        display: inline-block;
        min-width: 204px;
        height: 45px;
        border: 1px solid gray;
        border-radius: 18px;
        padding: 7px 27px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .page-forum .content .forum-detail .article-area .article .good-and-bad > div {
            float: left;
            background-image: url("/ServicePortal/Content/image/forum/ic_good_bad.png");
            width: 26px;
            height: 25px;
            font-size: 15px;
            font-weight: bold;
        }

            .page-forum .content .forum-detail .article-area .article .good-and-bad > div span {
                margin: 10px 36px;
                display: block;
            }

        .page-forum .content .forum-detail .article-area .article .good-and-bad .good-btn {
            color: #d74b00;
        }

        .page-forum .content .forum-detail .article-area .article .good-and-bad .bad-btn {
            color: #505050;
            margin-left: 70px;
            height: 31px;
            background-position: right;
        }

.page-forum .content .forum-detail .reply-area .reply {
    margin-top: 53px;
    padding-bottom: 40px;
}

.page-forum .content .forum-detail .reply-area .reply-header {
    height: 133px;
    background: #636569;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    font-size: 14px;
    font-weight: normal;
    padding-left: 22px;
}

    .page-forum .content .forum-detail .reply-area .reply-header .floor-text {
        position: absolute;
        right: 30px;
        top: 20px;
        font-size: 16px;
    }

    .page-forum .content .forum-detail .reply-area .reply-header .reply-info {
        margin-left: 25px;
    }

        .page-forum .content .forum-detail .reply-area .reply-header .reply-info .reply-time {
            margin-top: 16px;
        }

        .page-forum .content .forum-detail .reply-area .reply-header .reply-info .reply-name {
            font-size: 17px;
        }

            .page-forum .content .forum-detail .reply-area .reply-header .reply-info .reply-name .level {
                background: white;
                color: #d74b00;
                border-radius: 20px;
                padding: 0px 10px;
                font-size: 12px;
                border: 1px solid black;
                margin-left: 15px;
                position: relative;
                top: -3px;
                font-weight: bold;
            }

        .page-forum .content .forum-detail .reply-area .reply-header .reply-info .publish-time {
            margin-top: 20px;
        }

        .page-forum .content .forum-detail .reply-area .reply-header .reply-info .last-edit-time {
            margin-top: 15px;
        }

    .page-forum .content .forum-detail .reply-area .reply-header .send-message {
        background: none;
        position: absolute;
        right: 30px;
        bottom: 20px;
    }

.page-forum .content .forum-detail .reply-area .reply-content {
    padding: 30px 165px 30px 25px;
    position: relative;
}

    .page-forum .content .forum-detail .reply-area .reply-content .reply-main .demo-text {
        font-size: 16px;
        line-height: 23px;
    }

    .page-forum .content .forum-detail .reply-area .reply-content .reply-main .demo-img {
        margin-top: 15px;
    }

        .page-forum .content .forum-detail .reply-area .reply-content .reply-main .demo-img img + img {
            margin-left: 20px;
        }

    .page-forum .content .forum-detail .reply-area .reply-content .tags {
        color: #ef5300;
        font-size: 15px;
        margin-top: 20px;
    }

    .page-forum .content .forum-detail .reply-area .reply-content .reply-other {
        font-size: 16px;
        line-height: 23px;
        border: 1px solid #d74b00;
        width: 80%;
        padding: 20px;
        margin: 0 auto;
        margin-bottom: 30px;
    }
@media (max-width: 1200px) {
    .forum-thread-post > header .forum-post-avatar {
        position: relative;
        left: 0 !important;
        margin-bottom: 20px;
    }

}
@media (max-width: 1023px) {
    #forum-main {
        width: calc(100% - 40px) !important;
    }
}
@media (max-width: 768px) {
    .page-forum .content .forum-list .tabs-nav li a {
        padding: 20px;
    }
}
@media (max-width: 640px) {
    .page-forum .content .forum-list {
        padding: 20px 10px;
    }
        .page-forum .content .forum-list .tabs-nav li {
            margin: 0;
        }
            .page-forum .content .forum-list .tabs-nav li a {
                font-size: 1.5rem;
            }
        .page-forum .content .forum-list .new-topic-button {
            min-width: initial;
        }
    .page-forum .content-main-links-wrap .main-links-box {
        /*width:50%;*/
    }

    .page-forum .content-main-links-wrap .fa {
        display: none;
    }

    .page-forum .content-main-links-wrap .main-links-box:nth-child(1), .page-forum .content-main-links-wrap .main-links-box:nth-child(2) {
        /*border-bottom: 1px solid #ccc;*/
    }
    .page-forum .content-main-links-wrap .main-links-box-content img {
        width: 70px !important;
        height: 70px !important;
    }
    .page-forum .content .sub-class-row .subnav li a {
        padding: 0px 0 10px 10px;
    }
    .page-forum .content .sub-class-row .subnav li {
        padding-left: 10px !important;
    }

        .page-forum .content .sub-class-row .subnav li a span {
            padding-left: 35px !important;
        }
}

.article-tool-button {
    position: absolute;
    right: 25px;
    top: 34px;
}

    .article-tool-button button {
        background: none;
        background-image: url("/ServicePortal/Content/image/forum/ic_claim_reply_pencil_trash.png");
        width: 43px;
        height: 44px;
        display: block;
    }

        .article-tool-button button + button {
            margin-top: 10px;
        }

        .article-tool-button button.reply-button {
            background-position-y: 145px;
        }

        .article-tool-button button.delete-button {
            background-position: bottom;
        }

        .article-tool-button button.edit-button {
            background-position-y: 95px;
        }

@media all and (max-width: 1023px) {
    .page-forum {
        padding: 0;
    }

        .page-forum .banner {
            position: relative;
        }

            .page-forum .banner img {
                max-width: 100%;
            }

        .page-forum .banner-text {
            font-size: 40px;
            font-weight: normal;
            position: absolute;
            left: 12.3px;
            bottom: 25.9px;
            color: white;
        }

        .page-forum .content .accordion {
            height: 51px;
            font-size: 25px;
            padding-left: 15px;
        }

            .page-forum .content .accordion .toggle-icon {
                font-size: 40px;
                right: 25px;
            }

        .page-forum .content .accordion-panel .sub-category {
            height: 51px;
            width: 100%;
        }

            .page-forum .content .accordion-panel .sub-category:empty {
                display: none;
            }

        .page-forum .content .accordion-panel .sub-category-content {
            position: relative;
            text-align: left;
            bottom: 0;
            left: 0;
            top: 0;
            -webkit-transform: translateX(0);
            transform: translateX(0);
            padding-left: 18px;
        }

            .page-forum .content .accordion-panel .sub-category-content h3 {
                text-align: left;
                font-size: 18px;
                margin: 0;
                line-height: 51px;
                position: relative;
                top: 0;
            }

            .page-forum .content .accordion-panel .sub-category-content img {
                display: none;
            }

        .page-forum .content .content-list-wrapper .content-list {
            width: 100%;
            padding: 50px 15px 0px 15px;
        }

            .page-forum .content .content-list-wrapper .content-list.hot {
                display: none;
            }

        .page-forum .content .content-list-wrapper .content-list-title {
            font-size: 45px;
        }

        .page-forum .content .content-list-wrapper .content-list-article + .content-list-article {
            padding: 20px 0;
        }

        .page-forum .content .content-list-wrapper .content-list-article .article-title {
            font-size: 18px;
        }

        .page-forum .content .content-list-wrapper .content-list-article .article-datetime {
            font-size: 14px;
        }

        .page-forum .content .content-list-wrapper .content-list-article .article-replies {
            font-size: 13px;
            color: #707070;
        }

        .page-forum .content .mobile-list-tab {
            height: 40px;
            padding: 0 55px;
            color: black;
            background: white;
            border: 1px solid black;
            border-radius: 15px;
            font-size: 17px;
            font-weight: normal;
            margin: 20px 20px 30px 20px;
            cursor: pointer;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
        }

            .page-forum .content .mobile-list-tab.active {
                background: #d74b00;
                color: white;
                border: 1px solid #d74b00;
            }
}

.browse-details table {
    padding-right: 0;
}

    .browse-details table th {
        padding: 5px 5px 15px 5px !important;
    }

.browse-details-tbody .forum-td-followers,
.browse-details-tbody .forum-td-following {
    display: none;
}

.browse-details-tbody .td-title a:hover {
    color: #f67308
}

.browse-details-tbody .forum-browse-content-location {
    text-transform: capitalize;
    font-size: 14px;
    margin-top: 0px;
    color: #666;
}

    .browse-details-tbody .forum-browse-content-location a {
        font-size: 14px;
    }

.browse-details-tbody .td-icon {
    vertical-align: middle;
    padding-right: 5px;
    padding-left: 15px;
}

.browse-details-tbody .td-actions {
    padding-right: 15px;
}

.browse-details-tbody tr td {
    font-size: 12px;
}

    .browse-details-tbody tr td .forum-meta-number {
        font-size: 12px;
    }

.browse-details-tbody .forum-browse-item:nth-child(2n+1) td {
    background-color: #fefefe;
}

.browse-details-tbody .forum-browse-item:nth-child(2n+2) td {
    background-color: #f3f3f3;
}

.browse-details-tbody .forum-browse-item:hover td {
    background-color: #fbf2e9;
}

.browse-details-tbody .forum-browse-item .td-actions {
    position: relative;
}

    .browse-details-tbody .forum-browse-item .td-actions .tools {
        font-size: 26px;
        color: #d74b00;
        height: 40px;
        text-align: center;
        line-height: 40px;
    }

        .browse-details-tbody .forum-browse-item .td-actions .tools i {
            cursor: pointer;
            margin: 0 3px;
        }

.browse-details-tbody .browse-details-tbody
.browse-details table.browse-list th:nth-child(5), .browse-details table.browse-list th:nth-child(6) {
    /*display: none;*/
}

.browse-details thead {
    background: #ddd;
    font-size: 14px;
}

    .browse-details thead strong {
        font-weight: normal;
    }

    .browse-details thead th {
        padding: 5px 10px 15px;
    }

/**Browse people **/
.browse-details .forum-people-row .td-actions span {
    background: none;
    color: #777777;
}

.browse-details .forum-people-row .td-actions .forum-follow {
    width: 95px;
    text-align: center;
}

.clearfix, .forum-thread-post footer, .apple-social-actions-wrapper .forum-social-actions, .apple-social-actions-wrapper #j-place-header-actions, .apple-social-actions-wrapper #j-profile-header-actions {
    zoom: 1;
}

    .clearfix:before, .forum-thread-post footer:before, .apple-social-actions-wrapper .forum-social-actions:before, .apple-social-actions-wrapper #j-place-header-actions:before, .apple-social-actions-wrapper #j-profile-header-actions:before, .clearfix:after, .forum-thread-post footer:after, .apple-social-actions-wrapper .forum-social-actions:after, .apple-social-actions-wrapper #j-place-header-actions:after, .apple-social-actions-wrapper #j-profile-header-actions:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }

    .clearfix:after, .forum-thread-post footer:after, .apple-social-actions-wrapper .forum-social-actions:after, .apple-social-actions-wrapper #j-place-header-actions:after, .apple-social-actions-wrapper #j-profile-header-actions:after {
        clear: both;
    }

.drop-shadow {
    -webkit-box-shadow: 2px 2px 5px #eee;
    box-shadow: 2px 2px 5px #eee;
}

.forum-content {
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .forum-content.forum-op {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.forun-outcome-badge-container {
    position: absolute;
    top: 0;
    right: 10px;
}

.forum-body-content.forum-thread .forum-column-wrap-l {
    float: none;
    clear: both;
}

.forum-body-content.forum-thread .forum-layout-ls .forum-column-l.lg-margin {
    margin-right: 0;
}

.forum-thread #forum-main {
    padding-top: 40px;
    max-width: 960px;
    z-index: 6;
}

.forum-thread .forum-social-actions {
    float: right;
}

.forum-body-content #forum-body-intro {
    margin-bottom: 0px;
    border-top: none;
}

.forum-thread-info {
    background: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 15px 0px 0;
    border-radius: 0;
    margin-bottom: 28px;
}

    .forum-thread-info .forum-thread-views {
        margin-right: 30px;
    }

        .forum-thread-info .forum-thread-views .content-footer-item {
            margin: 0;
        }

    .forum-thread-info strong {
        font-weight: normal;
    }

    .forum-thread-info .forum-pagination {
        display: none;
    }

#forum-replies .forum-thread-info .forum-pagination {
    display: block;
}

#forum-replies #forum-thread-reply-footer {
    margin-top: 10px;
}

.forum-discussion-replies + .forum-thread-info {
    margin: 10px 0px 0px;
}

#forum-thread-messages-container > * + .forum-op {
    margin-top: 0;
}

.forum-discussion-replies {
    margin: 0;
}

    .forum-discussion-replies li.reply .forum-thread-message {
        padding-top: 0;
    }

li.reply,
li.addReply {
    margin-top: 28px;
}

.forum-thread .forum-thread-messages {
    margin: 0 0 60px;
}

.forum-thread-post > header {
    padding: 13px 40px 20px 22px;
}

    .forum-thread-post > header .forum-post-avatar {
        width: 70px;
        top: 0px;
        left: -98px;
    }

        .forum-thread-post > header .forum-post-avatar .forum-avatar {
            border: 1px solid #c5c5c5;
        }

        .forum-thread-post > header .forum-post-avatar .forum-status-levels {
            text-align: center;
            font-size: 10px;
            color: #8c8c8c;
        }

            .forum-thread-post > header .forum-post-avatar .forum-status-levels img {
                display: block;
                margin: 4px auto 2px;
            }

            .forum-thread-post > header .forum-post-avatar .forum-status-levels span {
                display: block;
            }

    .forum-thread-post > header .forum-post-author {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
        display: block;
        overflow: visible;
        white-space: nowrap;
        width: auto;
        font-size: 16px;
        color: #666;
    }

        .forum-thread-post > header .forum-post-author strong {
            display: block;
        }

            .forum-thread-post > header .forum-post-author strong a {
                font-weight: 400;
            }

        .forum-thread-post > header .forum-post-author .forum-thread-replyto {
            padding-left: 0;
            display: block;
        }

            .forum-thread-post > header .forum-post-author .forum-thread-replyto a {
                color: #666;
            }

            .forum-thread-post > header .forum-post-author .forum-thread-replyto .font-color-okay, .forum-thread-post > header .forum-post-author .forum-thread-replyto .font-color-helpful {
                font-weight: bold;
            }

        .forum-thread-post > header .forum-post-author .appleParticipationImage {
            position: absolute;
            right: -31px;
            top: -9px;
            z-index: 9999;
        }

.forum-thread-post section {
    padding: 0 40px 0 22px;
    margin-bottom: 32px;
}

.forum-thread-post .forum-thread-pointer {
    background-position: -311px 0;
    width: 30px;
    height: 30px;
    left: -23px;
    top: 28px;
    display: none;
}

.forum-op .forum-thread-post .forum-thread-pointer {
    background-position: -372px 0;
}

.forum-thread-post footer {
    clear: both;
    font-size: 16px;
}

    .forum-thread-post footer .content-footer-item {
        line-height: 1.5em;
    }

    .forum-thread-post footer > .acclaim-container {
        display: block;
        float: left;
        margin: 12px 0;
        position: relative;
    }

    .forum-thread-post footer > ul {
        display: block;
        zoom: 1;
        margin-top: 0;
        border-top: 0;
        padding: 10px 0;
        position: relative;
        width: 100%;
        float: right;
    }

#forum-replies .forum-thread-post footer > ul {
    display: inline-block;
    width: auto;
}

.forum-thread .forum-content {
    margin: 0 0px 0 98px;
}

    .forum-thread .forum-content h6 {
        display: none;
    }

    .forum-thread .forum-content .forum-thread-post {
        border: 0;
        border-radius: 4px;
        margin: 0;
        padding: 0;
    }

    .forum-thread .forum-content.forum-op {
        background: none;
        border: 1px solid #e0e0e0;
    }

        .forum-thread .forum-content.forum-op .forum-thread-post {
            background: #f4f7fb;
        }

.forum-thread .forum-discussion-replies .forum-content {
    margin: 0 0 0 54px;
}

.forum-discussion-replies {
    border-left: 0;
}

.forum-thread .forum-discussion-replies .forum-content {
    margin: 0 0 0 98px;
}

.forum-discussion-indent-1 li.reply {
    background: transparent;
    padding-left: 28px;
}

ul.forum-discussion-replies.forum-discussion-indent-0 {
    border-left: 0;
    margin-left: 0px;
    margin-right: 0px;
}

.discussion-message-acclaim .icon-sml {
    display: none;
}

.browse-details table.browse-list {
    border: 1px solid #dbdbdb;
    border-collapse: collapse;
    width: 100%;
}

    .browse-details table.browse-list a:link, .browse-details table.browse-list a:visited {
        color: black;
        text-decoration: none;
    }

    .browse-details table.browse-list th {
        padding: 12px 5px !important;
    }

        .browse-details table.browse-list th.number {
            text-align: right;
        }

        .browse-details table.browse-list th:first-child {
            padding-left: 20px !important;
        }

    .browse-details table.browse-list td {
        border: 1px solid #dbdbdb;
        padding: 8px 12px;
        line-height: 1.5;
        vertical-align: middle;
        white-space: nowrap;
        width: 1px;
    }

        .browse-details table.browse-list td.number {
            text-align: right;
        }

    .browse-details table.browse-list .td-replies .icon-sml {
        margin-right: 4px;
        display: none;
    }

    .browse-details table.browse-list .a508-label {
        display: block !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 1px;
        height: 1px;
    }

    .browse-details table.browse-list .td-icon {
        vertical-align: middle;
        padding-right: 5px;
        padding-left: 15px;
        border-right: none;
    }

    .browse-details table.browse-list .td-title {
        width: 300px;
        border-left: none;
    }

        .browse-details table.browse-list .td-title a {
            font-size: 1.4rem;
        }

            .browse-details table.browse-list .td-title a:hover {
                color: #f67308;
            }

        .browse-details table.browse-list .td-title div {
            max-width: 400px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            word-wrap: break-word;
        }

#forum-main {
    display: block;
    min-height: 300px;
    padding: 30px 20px 20px;
    position: relative;
    z-index: 1;
    margin: auto;
    max-width: 1300px;
    width: 920px;
}

    #forum-main a:link, #forum-main a:visited {
        color: #d74b00;
        text-decoration: none;
        margin-right: 6px;
    }

    #forum-main .font-color-meta a, #forum-main .font-color-meta a:link, #forum-main .font-color-meta a:visited, #forum-main .font-color-meta-light a, #forum-main .font-color-meta-light a:link .font-color-meta-light a:visited {
        color: #d74b00;
    }

.forum-thread-header-outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 30px;
}

    .forum-thread-header-outer a:link, .forum-thread-header-outer a:visited {
        color: #666 !important;
        text-decoration: none;
    }

    .forum-thread-header-outer .forum-thread-header {
        font-size: 2.6rem;
        font-weight: 800;
    }

    .forum-thread-header-outer .forum-social-actions-wrapper ul {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .forum-thread-header-outer .forum-social-actions-wrapper ul li {
            display: inline-block;
            zoom: 1;
            vertical-align: top;
            width: 94px;
            margin: 0;
            padding: 0;
            border-left: 1px solid #dbdce1;
            text-align: center;
        }

            .forum-thread-header-outer .forum-social-actions-wrapper ul li:first-child {
                border-left: none;
            }

            .forum-thread-header-outer .forum-social-actions-wrapper ul li a {
                position: relative;
                display: block;
                background: transparent;
                width: 100%;
                font-weight: normal;
                font-size: 1.1rem;
                text-align: center;
                color: #666;
                text-shadow: none;
                border-top: 0;
                margin: 0px;
            }

                .forum-thread-header-outer .forum-social-actions-wrapper ul li a:hover {
                    opacity: 0.5;
                }

                .forum-thread-header-outer .forum-social-actions-wrapper ul li a span {
                    display: block;
                    width: 100%;
                    height: 15px;
                    margin: 0;
                    position: relative;
                    padding: 0;
                    top: 0;
                }

                    .forum-thread-header-outer .forum-social-actions-wrapper ul li a span:not(*:root) {
                        zoom: 2;
                    }

    .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions {
        display: none;
        position: absolute;
        z-index: 9;
        width: 240px;
        right: 20px;
        top: 80px;
        padding: 15px 20px;
        border: 1px solid #ccc;
        background: #fff;
        visibility: hidden;
        -webkit-transition: opacity 0.4s ease-in-out;
        transition: opacity 0.4s ease-in-out;
        opacity: 0;
    }

        .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions.active {
            display: block;
            visibility: visible;
            opacity: 1;
        }

        .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions header h4 {
            font-size: 1.8rem;
            padding-bottom: 15px;
        }

        .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions .box-body {
            height: auto;
        }

        .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions .forum-icon-list {
            display: block;
            -webkit-box-align: unset;
            -ms-flex-align: unset;
            align-items: unset;
        }

            .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions .forum-icon-list li {
                min-height: 14px;
                padding-left: 25px;
                padding-bottom: 10px;
                width: calc(100% - 25px);
            }

                .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions .forum-icon-list li a {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    font-size: 1.4rem;
                    width: 100%;
                    margin: 5px 0;
                }

                    .forum-thread-header-outer .forum-social-actions-wrapper .forum-box-actions .forum-icon-list li a span {
                        display: inline-block;
                        font-size: 0.7rem;
                        width: 14px;
                        height: 8px;
                    }

.forum-thread-info {
    background: white;
    border: 1px solid #e5e5e5;
    -webkit-box-shadow: 0 1px 1px white;
    box-shadow: 0 1px 1px white;
    margin: 0 0 20px;
    padding: 15px;
    position: relative;
    font-size: 1.4rem;
}

    .forum-thread-info div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .forum-thread-info div:first-child {
            font-size: 1.6rem;
            margin-bottom: 15px;
        }

        .forum-thread-info div:after {
            content: '';
            display: block;
            clear: both;
        }

        .forum-thread-info div span.fa {
            margin-left: 10px;
        }

.forum-content {
    position: relative;
    padding: 0px;
    border: 1px solid #dadada;
    background: white;
    line-height: 1.5;
    font-size: 14px;
    border-radius: 4px;
}

    .forum-content .reply-other {
        border: 1px solid #d74b00;
        margin: 20px auto;
        padding: 20px;
        max-width: 80%;
    }

    .forum-content .forum-post-avatar {
        position: absolute;
        width: 70px;
        top: 0px;
        left: -98px;
        text-align: center;
    }

        .forum-content .forum-post-avatar .forum-avatar {
            border-radius: 50%;
            width: 70px;
            height: 70px;
        }

    .forum-content .forum-thread-post footer {
        padding: 15px;
        border-top: 1px solid #e5e5e5;
    }

        .forum-content .forum-thread-post footer .two-col {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            flex-wrap: wrap;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            font-size: 1.4rem;
        }

            .forum-content .forum-thread-post footer .two-col a {
                font-size: 1.4rem;
            }

            .forum-content .forum-thread-post footer .two-col .item:first-child ul li {
                margin-right: 10px;
            }

            .forum-content .forum-thread-post footer .two-col .item:last-child ul li {
                margin-left: 20px;
            }

                .forum-content .forum-thread-post footer .two-col .item:last-child ul li span.fa-exclamation-triangle {
                    margin-right: 5px;
                }

            .forum-content .forum-thread-post footer .two-col ul {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            .forum-content .forum-thread-post footer .two-col .forum-actions {
                margin: 0;
            }

                .forum-content .forum-thread-post footer .two-col .forum-actions a {
                    display: inline-block;
                    padding-right: 15px;
                }

                    .forum-content .forum-thread-post footer .two-col .forum-actions a span {
                        right: 0;
                    }

                .forum-content .forum-thread-post footer .two-col .forum-actions:hover .dropdown-list {
                    display: block;
                }

                .forum-content .forum-thread-post footer .two-col .forum-actions .dropdown-list {
                    display: none;
                    padding: 10px 30px;
                    border: 1px solid #ccc;
                    background: #fff;
                    position: absolute;
                    z-index: 50;
                }

                    .forum-content .forum-thread-post footer .two-col .forum-actions .dropdown-list a {
                        display: block;
                        color: #000 !important;
                        padding: 0;
                        margin: 3px;
                    }

                        .forum-content .forum-thread-post footer .two-col .forum-actions .dropdown-list a:hover {
                            color: #d74b00 !important;
                        }

        .forum-content .forum-thread-post footer ul {
            float: none;
        }

            .forum-content .forum-thread-post footer ul li.reply-to-post {
                margin: 0;
            }

        .forum-content .forum-thread-post footer .a508-label {
            display: block !important;
            position: absolute !important;
            left: -9999px !important;
            top: -9999px !important;
            width: 1px;
            height: 1px;
        }

@media (max-width: 640px) {
    .forum-content .forum-thread-post footer .two-col .item {
        width: 100%;
    }
        .forum-content .forum-thread-post footer .two-col .item:last-child ul li {
            margin-left: 0;
            margin-right: 20px;
        }
}
.box-body {
    height: 0;
}

    .box-body.active {
        height: auto;
    }

li.reply-to-post {
    margin: 14px 10px -8px 10px;
    font-size: 16px;
}

    li.reply-to-post span {
        margin-right: 4px;
    }

.discussion-message-acclaim {
    font-size: 16px;
    color: #d74b00;
}

.page-eLibrary {
    padding-top: 60px;
}

    .page-eLibrary .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
    }

        .page-eLibrary .content .left-menu {
            width: 250px;
            border-right: 1px solid #dddddd;
            min-height: 85vh;
        }

        .page-eLibrary .content .left-menu-search {
            height: 50px;
            border-bottom: 1px solid #dddddd;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-size: 1.7rem;
            position: relative;
        }

            .page-eLibrary .content .left-menu-search .fa-search {
                color: #d74b00;
            }

            .page-eLibrary .content .left-menu-search .fa-angle-down {
                cursor: pointer;
            }

            .page-eLibrary .content .left-menu-search > input[type=text] {
                color: #1A1311;
                font-size: 1.7rem;
                border: none;
                width: 70%;
                margin-left: 15px;
            }

            .page-eLibrary .content .left-menu-search .advance-search {
                width: 690px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                height: 370px;
                background: white;
                position: absolute;
                z-index: 55;
                top: 50px;
                -webkit-box-shadow: 3px 3px 7px #a5a4a4fa;
                box-shadow: 3px 3px 7px #a5a4a4fa;
                left: 0;
                padding: 30px 0;
            }

                .page-eLibrary .content .left-menu-search .advance-search .form-group {
                    position: relative;
                }

                .page-eLibrary .content .left-menu-search .advance-search .form-control.w-80 {
                    width: 80%;
                }

                .page-eLibrary .content .left-menu-search .advance-search .form-control.d-inline {
                    display: inline;
                }

                .page-eLibrary .content .left-menu-search .advance-search .ui-datepicker-trigger {
                    margin-left: 10px;
                    cursor: pointer;
                }

                .page-eLibrary .content .left-menu-search .advance-search .within {
                    position: absolute;
                    left: 57.5%;
                    top: 7px;
                }

                .page-eLibrary .content .left-menu-search .advance-search .advance-search-btn button {
                    margin-right: 10px;
                }

                .page-eLibrary .content .left-menu-search .advance-search .control-label {
                    font-weight: normal;
                    font-size: 1.4rem;
                }

                    .page-eLibrary .content .left-menu-search .advance-search .control-label input[type=checkbox] {
                        position: relative;
                        margin-right: 5px;
                        top: 1px;
                    }

        .page-eLibrary .content .left-menu-content {
            font-weight: normal;
            color: black;
            font-size: 1.7rem;
        }

            .page-eLibrary .content .left-menu-content .web-title {
                padding-left: 20px;
                margin-top: 35px;
                font-size: 1.4rem;
            }

            .page-eLibrary .content .left-menu-content ul {
                margin-top: 12px;
            }

                .page-eLibrary .content .left-menu-content ul .left-menu-item {
                    padding-left: 62px;
                }

                    .page-eLibrary .content .left-menu-content ul .left-menu-item.active, .page-eLibrary .content .left-menu-content ul .left-menu-item:hover {
                        border-left: 3px solid #d74b00;
                        background: #F1F2F2;
                    }

                        .page-eLibrary .content .left-menu-content ul .left-menu-item.active a, .page-eLibrary .content .left-menu-content ul .left-menu-item:hover a {
                            color: #d74b00;
                        }

                    .page-eLibrary .content .left-menu-content ul .left-menu-item a {
                        display: block;
                        padding: 10px 0;
                        color: #585858;
                        font-size: 1.7rem;
                        font-weight: lighter;
                        text-decoration: none;
                    }

        .page-eLibrary .content .el-right-sidebar {
            position: fixed;
            background: white;
            width: 340px;
            right: -100%;
            z-index: -1;
            -webkit-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;
            border-color: #dddddd;
            height: 100vh;
            -webkit-box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.4);
            box-shadow: -30px 0 30px -30px rgba(0, 0, 0, 0.4);
        }

            .page-eLibrary .content .el-right-sidebar.open {
                right: 0;
                z-index: 9;
                display: block;
                position: absolute;
            }

            .page-eLibrary .content .el-right-sidebar .tool-bar .move {
                color: white;
            }

                .page-eLibrary .content .el-right-sidebar .tool-bar .move button {
                    border-radius: 0;
                    background: #d74b00;
                }

                    .page-eLibrary .content .el-right-sidebar .tool-bar .move button:hover {
                        color: white;
                        background: #b63f00;
                    }

                    .page-eLibrary .content .el-right-sidebar .tool-bar .move button:disabled {
                        background: #c5c0c0;
                    }

        .page-eLibrary .content .el-right-sidebar-content {
            padding: 10px 18px 20px;
        }

            .page-eLibrary .content .el-right-sidebar-content > h2 {
                font-size: 21px;
                font-weight: 300;
            }

            .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row {
                font-size: 1.4rem;
                padding: 7px 10px;
                white-space: nowrap;
            }

                .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row.active {
                    background: #d74b004f;
                    color: #333333;
                }

                    .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row.active:hover {
                        background: #d74b0062;
                    }

                .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row:hover {
                    background: #f5b7954a;
                }

                .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row .tree-caret {
                    font-size: 1.45rem;
                    top: 3px;
                }

                .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row .fa-icon {
                    font-size: 2rem;
                    margin: 0 3px;
                    position: relative;
                    top: 3px;
                }

                    .page-eLibrary .content .el-right-sidebar-content .tree-view .tree-row .fa-icon.ic-cloud {
                        color: #d74b00;
                    }

            .page-eLibrary .content .el-right-sidebar-content .tree-view .nested {
                padding-left: 30px;
            }

            .page-eLibrary .content .el-right-sidebar-content .tree-view img {
                max-width: 20px;
                margin-left: 3px;
                position: relative;
                top: -2px;
            }

            .page-eLibrary .content .el-right-sidebar-content .file {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

            .page-eLibrary .content .el-right-sidebar-content .file-image {
                font-size: 40px;
            }

            .page-eLibrary .content .el-right-sidebar-content .file-name {
                margin: 0;
                margin-left: 16px;
                white-space: nowrap;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                width: 227px;
                display: block;
                overflow: hidden;
            }

            .page-eLibrary .content .el-right-sidebar-content .file-info > p {
                font-weight: bold;
                margin-top: 20px;
            }

            .page-eLibrary .content .el-right-sidebar-content .file-info-group 
{
                margin-bottom: 16px;
            }

                .page-eLibrary .content .el-right-sidebar-content .file-info-group > label {
                    font-size: 1.2rem;
                    color: #444444;
                    display: block;
                    margin: 0;
                }

                .page-eLibrary .content .el-right-sidebar-content .file-info-group label {
                    font-weight: normal;
                }

                .page-eLibrary .content .el-right-sidebar-content .file-info-group .label-group label {
                    margin: 0;
                    margin-right: 3px;
                }

                    .page-eLibrary .content .el-right-sidebar-content .file-info-group .label-group label input[type=radio], .page-eLibrary .content .el-right-sidebar-content .file-info-group .label-group label input[type=checkbox] {
                        margin-right: 3px;
                        position: relative;
                        top: 1.5px;
                    }

                .page-eLibrary .content .el-right-sidebar-content .file-info-group p {
                    font-size: 1.4rem;
                    margin-bottom: 16px;
                }

                    .page-eLibrary .content .el-right-sidebar-content .file-info-group p.page-number-info {
                        font-size: 1.2rem;
                        margin-top: 5px;
                    }

            .page-eLibrary .content .el-right-sidebar-content .file-info .image-watermark img {
                max-width: 250px;
                margin-top: 10px;
            }

            .page-eLibrary .content .el-right-sidebar-content .watermark-btn {
                margin-top: 15px;
            }

                .page-eLibrary .content .el-right-sidebar-content .watermark-btn button {
                    margin-right: 10px;
                }

        .page-eLibrary .content .tool-bar {
            height: 50px;
            background: #F1F2F2;
            position: relative;
            padding-left: 20px;
        }

            .page-eLibrary .content .tool-bar .btn-group {
                height: 100%;
            }

                .page-eLibrary .content .tool-bar .btn-group button {
                    height: 100%;
                    height: 50px;
                    background: transparent;
                    font-size: 1.6rem;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .page-eLibrary .content .tool-bar .btn-group button img {
                        max-width: 17px;
                        max-height: 18px;
                        margin-right: 5px;
                    }

                    .page-eLibrary .content .tool-bar .btn-group button .fa-angle-down {
                        margin-left: 5px;
                    }

                    .page-eLibrary .content .tool-bar .btn-group button:hover {
                        background: #C5C7C9;
                        border-radius: 0;
                    }

            .page-eLibrary .content .tool-bar ul.dropdown-menu {
                border-radius: 8px;
                top: 96%;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            .page-eLibrary .content .tool-bar .btn-group.open .dropdown-toggle {
                -webkit-box-shadow: none;
                box-shadow: none;
                border-radius: 0;
                background: #C5C7C9;
            }

        .page-eLibrary .content .tool-bar-dropdown {
            font-size: 1.6rem;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            cursor: pointer;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .page-eLibrary .content .tool-bar-dropdown.active, .page-eLibrary .content .tool-bar-dropdown:hover {
                background: #C5C7C9;
            }

            .page-eLibrary .content .tool-bar-dropdown.sort {
                right: 90px;
            }

                .page-eLibrary .content .tool-bar-dropdown.sort span {
                    margin: 8px;
                }

            .page-eLibrary .content .tool-bar-dropdown.selected {
                right: 90px;
            }

            .page-eLibrary .content .tool-bar-dropdown.grid {
                right: 43px;
            }

                .page-eLibrary .content .tool-bar-dropdown.grid .dropdown-menu {
                    left: -110px;
                }

            .page-eLibrary .content .tool-bar-dropdown.info {
                right: 0;
            }

            .page-eLibrary .content .tool-bar-dropdown img {
                width: 17px;
            }

        .page-eLibrary .content .right-area {
            width: calc(100% - 250px);
        }

            .page-eLibrary .content .right-area .file-list-wrapper {
                padding: 23px 50px;
            }

                .page-eLibrary .content .right-area .file-list-wrapper .file-path {
                    /*font-size: 2.8rem;*/
                    font-size: 2.2rem;
                }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-path span {
                        cursor: pointer;
                        padding: 5px;
                    }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-path span:hover {
                            background: #f3f3f3;
                        }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list {
                    margin-top: 20px;
                }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table {
                    width: 100%;
                    table-layout: fixed;
                    font-size: 1.5rem;
                }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table thead th.sortable:hover {
                        background: #f4f4f4;
                    }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tbody tr:hover {
                        background: #f4f4f4;
                    }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tbody tr:hover .custom-checkbox {
                            display: block;
                        }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th {
                        -webkit-box-sizing: content-box;
                        box-sizing: content-box;
                        text-align: left;
                        vertical-align: middle;
                    }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:first-child {
                            text-align: right;
                            width: 70px;
                            padding-right: 15px;
                        }

                            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:first-child img {
                                min-width: 16px;
                            }

                            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:first-child .custom-checkbox {
                                display: block;
                            }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(2) {
                            width: auto;
                        }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(3) {
                            width: 15%;
                        }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(4) {
                            width: 15% !important;
                        }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(5) {
                            width: 30%;
                        }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td {
                        text-align: left;
                        vertical-align: middle;
                    }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td:first-child {
                            text-align: right;
                            padding-right: 15px;
                        }

                            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td:first-child img {
                                min-width: 20px;
                                min-height: 15.72px;
                            }

                            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td:first-child .fa {
                                font-size: 18px;
                            }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td:nth-child(2) span {
                            cursor: pointer;
                            word-wrap: break-word;
                            word-break: break-word;
                        }

                            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td:nth-child(2) span:hover {
                                text-decoration: underline;
                            }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th,
                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td {
                        padding: 13px 5px;
                        border-bottom: 1px solid #f0eded;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        word-break: break-all;
                    }

                    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config {
                        table-layout: initial;
                    }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config tr td:first-child {
                            text-align: left;
                            width: 300px;
                        }

                        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config tr td:last-child {
                            text-align: left;
                            width: calc(100% - 70px);
                        }

.func_btn {
    margin-top: 20px;
}

    .func_btn button {
        color: white;
        background: #d74b00;
        padding: 5px 20px;
        border-radius: 7px;
        font-size: 1em;
        font-weight: normal;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th .custom-checkbox,
.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td .custom-checkbox {
    position: relative;
    display: none;
    float: left;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td .div-options {
    position: relative;
    float: right;
    top: 0;
    right: 0;
    display: none;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tbody tr:hover td .div-options {
    display: block;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td .div-options .div-share {
    background: url(/Content/image/eLibrary/ic_share.png) center no-repeat;
    position: absolute;
    top: -13px;
    right: 45px;
    width: 45px;
    height: 48px;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td .div-options .div-action {
    background: url(/Content/image/eLibrary/ic_action.png) center no-repeat;
    position: absolute;
    top: -13px;
    right: 0;
    width: 45px;
    height: 48px;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td .div-options div:hover {
    background-color: lightgray;
}



.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr.active td {
    background: #eaeaea;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr.active .custom-checkbox {
    display: block;
}

.page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr.active:hover td {
    background: #dadada !important;
}

.page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li {
    list-style: none;
    float: left;
    width: 166px;
    height: 161px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 30px;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    position: relative;
}

    .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li:hover {
        background-color: #f4f4f4;
    }

        .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li:hover .custom-checkbox {
            display: block;
        }

    .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li.active {
        background-color: #eaeaea;
    }

        .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li.active .custom-checkbox {
            display: block;
        }

        .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li.active:hover {
            background-color: #dadada;
        }

    .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li .grid-image {
        font-size: 50px;
    }

    .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li .grid-file-name {
        text-align: center;
        margin: 0 auto;
        white-space: nowrap;
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li .grid-file-name:hover {
            text-decoration: underline;
        }

    .page-eLibrary .content .right-area .file-list-wrapper .grid-list ul li .custom-checkbox {
        position: absolute;
        right: 0;
        top: 13px;
        display: none;
    }

@media all and (max-width: 1023px) {
    html,
    body {
        height: 100%;
        max-height: 100%;
    }

    .page-eLibrary .content .left-menu {
        position: absolute;
        background: white;
        width: 233px;
        left: -100%;
        z-index: 9;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        border-color: #dddddd;
        height: calc(100% + 60px);
        -webkit-box-shadow: 8px 8px 7px #b5b5b6;
        box-shadow: 8px 8px 7px #b5b5b6;
    }

    .page-eLibrary .content .tool-bar .btn-group {
        margin-left: 30px;
    }

    .page-eLibrary .content .left-menu.open {
        left: 0;
        width: 100%;
        top: 50px;
    }

    .page-eLibrary .content .left-menu-search {
        display: none;
    }

    .page-eLibrary .content .left-menu-content {
        font-size: 20px;
    }

        .page-eLibrary .content .left-menu-content .web-title {
            margin-top: 40px;
        }

        .page-eLibrary .content .left-menu-content ul .left-menu-item a {
            font-size: 20px;
            padding: 10px 0;
        }

    .page-eLibrary .content .right-area {
        width: 100%;
    }

        .page-eLibrary .content .right-area .tool-bar {
            /*height: 50px;*/
            height: auto;
            min-height: 50px;
        }

            .page-eLibrary .content .right-area .tool-bar img {
                width: 70%;
            }

            .page-eLibrary .content .right-area .tool-bar .mobile-menu-icon {
                font-size: 23px;
                background: none;
                font-weight: lighter;
                color: #d74b00;
                cursor: pointer;
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                left: 10px;
            }

        .page-eLibrary .content .right-area .tool-bar-dropdown.sort {
            right: 70px;
        }

            .page-eLibrary .content .right-area .tool-bar-dropdown.sort .fa-angle-down {
                display: none;
            }

            .page-eLibrary .content .right-area .tool-bar-dropdown.sort span {
                display: none;
            }

        /*
  .page-eLibrary .content .right-area .tool-bar-dropdown.grid {
    right: 10px;
  }
    */

        .page-eLibrary .content .right-area .file-list-wrapper {
            padding: 25px;
        }

            .page-eLibrary .content .right-area .file-list-wrapper .file-list {
                overflow: auto;
                margin-top: 27px;
            }

            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table img {
                /*width: 50%;*/
            }

            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th {
                width: 50%;
            }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:first-child {
                    width: 70px;
                }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(2) {
                    width: 20vw;
                    min-width: 300px;
                }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(3) {
                    width: 35vw;
                }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th:nth-child(4) {
                    width: auto;
                }

            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th,
            .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td {
                padding: 18px 5px;
            }

                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr th .custom-checkbox,
                .page-eLibrary .content .right-area .file-list-wrapper .file-list-table tr td .custom-checkbox {
                    margin-left: 5px;
                }
}

@media all and (max-width: 640px) {
    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config tr {
        display: block;
    }

        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config tr td:first-child {
            display: block;
            width: 100%;
            border-bottom: none;
            padding: 10px 0;
        }

        .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config tr td:last-child {
            display: block;
            width: 100%;
            padding: 10px 0;
        }
}

@media all and (max-width: 480px) {
    .right-area .file-list-table td:nth-child(4),
    .right-area .file-list-table th:nth-child(4) {
        display: none !important;
    }
}

.menu-overlay {
    position: fixed;
    /* Sit on top of the page content */
    display: none;
    /* Hidden by default */
    width: 100%;
    /* Full width (cover the whole page) */
    height: 100%;
    /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    /* Black background with opacity */
    z-index: 2;
    /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer;
    /* Add a pointer on hover */
}

.dropzone {
    background: rgba(255, 255, 255, 0.3);
    border: 4px solid #d74b00;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.dropzone-title {
    background: #d74b00;
    font-size: 19px;
    text-align: center;
    margin: 0;
    color: white;
    height: 30px;
    line-height: 30px;
    font-weight: normal;
}

.page-manage {
    padding-top: 60px;
}

    .page-manage .banner img {
        max-width: 100%;
    }

    .page-manage .content {
        max-width: 1366px;
        margin: 0 auto;
        padding: 50px 10px;
        font-size: 18px;
    }

        .page-manage .content .search-condition {
            display: -webkit-box;
            display: -ms-flexbox;
        }

            .page-manage .content .search-condition .break-line {
                clear: both;
            }

        .page-manage .content .search-condition-group {
            margin-right: 10px;
            min-width: 227px;
        }

            .page-manage .content .search-condition-group.date-range div:nth-child(1) {
                font-size: 1.4rem;
                margin-bottom: 10px;
            }

            .page-manage .content .search-condition-group.date-range div:nth-child(2) {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

                .page-manage .content .search-condition-group.date-range div:nth-child(2) span {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .page-manage .content .search-condition-group.date-range div:nth-child(2) span:first-child {
                        margin-right: 10px;
                    }

            .page-manage .content .search-condition-group label {
                font-size: 1.4rem;
                display: block;
                width: 100%;
                margin-bottom: 10px;
            }

        .page-manage .content .list-class label {
            font-size: 1.4rem;
            display: inline-block;
            width: 110px;
            margin-bottom: 10px;
        }

        .page-manage .content .list-class span {
            font-size: 1.4rem;
            display: inline-block;
            margin-right: 20px;
        }

@media (max-width: 1023px) {
    .page-manage .content .search-condition-group.date-range {
        margin-top: 20px;
    }
}

@media (max-width: 640px) {
    .page-manage .content .search-condition-group.date-range div:nth-child(2) {
        display: block;
    }

        .page-manage .content .search-condition-group.date-range div:nth-child(2) span {
            width: 100%;
        }
}

.page-manage .content .search-condition-group input[type=text], .page-manage .content .search-condition-group input[type=password], .page-manage .content .search-condition-group input[type=number],
.page-manage .content .search-condition-group select {
    font-size: 1.4rem;
    height: 26px;
    /*border: 1px solid rgb(122, 119, 119);*/
    border: 1px solid #dadada;
    padding-left: 5px;
    border-radius: 3px;
    min-width: 220px;
}

.page-manage .content .search-condition-group select {
    height: 30px;
}

.page-manage .content .search-condition-group input[type=checkbox] {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    /*margin-left: 15px;*/
}

.page-manage .content .search-condition-group.date-range img {
    width: 16px;
    cursor: pointer;
    position: relative;
    top: 3px;
    margin: 0 7px;
}

.page-manage .content .search-condition-group.date-range label + label {
    margin-left: 10px;
}

.page-manage .content .search-condition-group .choose-group span {
    color: gray;
    font-weight: bold;
}

.page-manage .content .search-condition-group .choose-group .choose-button {
    margin-left: 10px;
}

.page-manage .content .tool-button {
    margin-top: 20px;
}

    .page-manage .content .tool-button button {
        font-size: 1.4rem !important;
    }

.page-manage .content .data-list {
    margin-top: 30px;
    font-size: 1.4rem;
}

    .page-manage .content .data-list table {
        table-layout: fixed;
        border: 1px solid #dddddd;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .page-manage .content .data-list table thead {
        background: lightgray;
    }

        .page-manage .content .data-list table thead tr th {
            background-color: lightgray !important;
            color: white;
            font-size: 1.6rem;
            border-right: 1px solid white;
            border-bottom: 1px solid white;
            white-space: nowrap;
            color: #333;
        }

    .page-manage .content .data-list table tbody {
        display: block;
        overflow: auto;
        max-height: 350px;
        width: 100%;
    }

        .page-manage .content .data-list table tr {            
            display: block;
        }

        .page-manage .content .data-list table tbody tr {
            background: #ececec;
        }

            .page-manage .content .data-list table tbody tr:nth-child(even) {
                background: white;
            }

        .page-manage .content .data-list table tr th, .page-manage .content .data-list table tr td{
            font-size: 14px !important;
        }

        .page-manage .content .data-list table tr td {
            border-left: 1px solid #dddddd;
            /*
  background: #ebe8e8;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
*/
        }

            .page-manage .content .data-list table tr td.data-button button {
                margin-left: 20px;
                margin-top: 10px;
                top: -5px;
                position: relative;
                left: -20px;
            }

@media all and (min-width: 1024px) {
    .page-manage .content .data-list table thead tr th {
        padding: 8px !important;
        vertical-align: middle;
        word-break: break-all;
    }

        .page-manage .content .data-list table thead tr th.allowSort {
            cursor: pointer;
        }

    .page-manage .content .data-list table tbody tr td {
        padding: 2px 8px !important;
        vertical-align: middle;
        word-break: break-all;
    }

        .page-manage .content .data-list table tr td div {
            line-height: 20px;
        }

    .page-manage .content .data-list table tbody > tr:hover td {
        background: rgba(31, 209, 206, 0.15) !important;
    }

    .page-manage .content .data-list table tbody button {
        position: relative;
        top: -5px;
        left: -5px;
        margin-top: 10px;
        margin-left: 5px;
        background: none;
        color: dimgray;
        font-weight: bold;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        word-break: keep-all;
        outline: none;
        font-size: 15px;
        min-height: initial !important;
        min-width: initial !important;
    }

    .custom-table .sub-table .examination-record .custom-table-tr div:nth-child(2) {
        width: 30%;
    }

    .custom-table .sub-table .examination-record .custom-table-tr div:nth-child(5) {
        width: 20%;
    }

    .custom-table .sub-table .teaching-material .custom-table-tr div:nth-child(6) {
        width: 20%;
    }

}

.page-manage .content .data-list table th div {
    /*display: flex;*/
    align-items: center;
    max-height: 22px;
}

.page-manage .content .data-list table th img {
    border-radius: 15px;
    border: 0;
    float: left;
    width: 17px;
    margin-right: 3px;
}

#tbQuestion {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
}

    #tbQuestion th:first-child, #tbQuestion th:nth-child(2),
    #tbQuestion td:first-child, #tbQuestion td:nth-child(2),
    #tbQuestion th:nth-child(3) {
        text-align: center;
    }

button.cssChartDownload, #btnAdd, #btnQueryQuestion, .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-button, .modal-dialog .modal-content .modal-body .maintain-button button, .custom-table-td > button, .page-manage .content .search-condition-group .choose-group .choose-button, .page-manage .content .tool-button button, .page-manage .content .data-list table tr td.data-button button {
    color: white;
    background: #d74b00;
    padding: 5px 20px;
    border-radius: 7px;
    font-size: 1em;
    font-weight: normal;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-button + button, .modal-dialog .modal-content .modal-body .maintain-button button + button, .custom-table-td > button + button, .page-manage .content .search-condition-group .choose-group .choose-button + button, .page-manage .content .tool-button button + button, .page-manage .content .data-list table tr td.data-button button + button {
        margin-left: 20px;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr td .choose-question .question-button:hover, .modal-dialog .modal-content .modal-body .maintain-button button:hover, .custom-table-td > button:hover, .page-manage .content .search-condition-group .choose-group .choose-button:hover, .page-manage .content .tool-button button:hover, .page-manage .content .data-list table tr td.data-button button:hover {
        background: #af3a04;
    }

.popover .popover-title {
    background: #282828 !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 17px;
}

.popover .popover-content {
    font-size: 16px;
}

    .popover .popover-content .popover-tool {
        margin-top: 8px;
    }

        .popover .popover-content .popover-tool > div {
            display: inline-block;
            width: 30%;
            font-size: 16px;
            cursor: pointer;
            padding: 5px;
            margin: 5px;
        }

        .popover .popover-content .popover-tool .popover-yes-button {
            background: #d74b00;
            color: white;
        }

        .popover .popover-content .popover-tool .popover-no-button {
            background: gray;
            color: white;
        }

.page-system-setting {
    padding-top: 65px;
    font-size: 20px;
}

    .page-system-setting .require-text {
        color: gray;
        margin-bottom: 10px;
    }

        .page-system-setting .require-text .required {
            margin: 10px;
        }

    .page-system-setting .setting-field {
        width: 100%;
        position: relative;
        /* margin-top: 25px;*/
        width: 700px;
        min-height: 50px;
    }

        .page-system-setting .setting-field .required {
            margin: 10px;
        }

        .page-system-setting .setting-field input {
            position: absolute;
            right: 0;
            font-size: 1em;
            height: 30px;
            border: 1px solid #7a7777;
            padding-left: 5px;
            border-radius: 3px;
            min-width: 220px;
            top: -10px;
        }

.page-materials,
.page-examination {
    padding-top: 60px;
}

    .page-materials .content,
    .page-examination .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        position: relative;
    }

    .page-materials .tool-bar, .page-examination .tool-bar {
        height: 50px;
        background: #F1F2F2;
        position: relative;
        padding-left: 20px;
        display: none;
    }

        .page-materials .tool-bar .mobile-menu-icon, .page-examination .tool-bar .mobile-menu-icon {
            font-size: 23px;
            background: none;
            font-weight: lighter;
            color: #d74b00;
            cursor: pointer;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 10px;
        }

    .page-materials .content .tree-menu,
    .page-examination .content .tree-menu {
        width: 300px;
        min-height: 800px;
        font-size: 18px;
        font-weight: bold;
        padding: 10px 10px 0 30px;
        border-right: 1px solid lightgray;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .page-materials .content .tree-menu .tree-row,
        .page-examination .content .tree-menu .tree-row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

    .page-materials .content .materials-list,
    .page-examination .content .materials-list {
        width: calc(100% - 300px);
    }

@media (max-width: 1023px) {
    .page-materials .tool-bar, .page-examination .tool-bar {
        display: block;
    }

    .page-materials .content .tree-menu,
    .page-examination .content .tree-menu {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        background: #fff;
        z-index: 9;
        display: none;
    }

        .page-materials .content .tree-menu.open,
        .page-examination .content .tree-menu.open {
            width: 100%;
            display: block;
        }

    .page-materials .content .materials-list,
    .page-examination .content .materials-list {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .page-manage .content .data-list table {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .page-system-setting .setting-field {
        margin-bottom: 25px;
        width: 100%;
    }

        .page-system-setting .setting-field label {
            width: 100%;
            margin-bottom: 5px;
            display: block;
        }

        .page-system-setting .setting-field input {
            position: relative;
            width: 100%;
        }
}

.page-materials .content .materials-list table,
.page-examination .content .materials-list table {
    /*font-weight: bold;*/
    width: 100%;
    /*font-size: 18px;*/
    font-size: 1.6rem !important;
}

    .page-materials .content .materials-list table th,
    .page-examination .content .materials-list table th {
        text-align: left;
        padding: 20px 13px;
        border-bottom: 1px solid #f0eded;
        border-right: 1px solid #f0eded;
    }

    .page-materials .content .materials-list table td,
    .page-examination .content .materials-list table td {
        text-align: left;
        padding: 13px;
        border-bottom: 1px solid #f0eded;
        border-right: 1px solid #f0eded;
        font-size: 1.4rem !important;
    }

        .page-materials .content .materials-list table td:first-child,
        .page-examination .content .materials-list table td:first-child {
            width: 45%;
        }

        .page-materials .content .materials-list table td button,
        .page-examination .content .materials-list table td button {
            display: -webkit-box;
            /*display: -ms-flexbox;*/
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
            width: 30px;
            height: 30px;
            padding: 0 !important;
            border-radius: 40px !important;
            text-align: center;
            background-color: #666 !important;
        }

            .page-materials .content .materials-list table td button:hover,
            .page-examination .content .materials-list table td button:hover {
                opacity: 0.5;
            }

            .page-materials .content .materials-list table td button i,
            .page-examination .content .materials-list table td button i {
                display: inline-block;
                /*margin-right: 5px;*/
            }

                .page-materials .content .materials-list table td button i.i-view,
                .page-examination .content .materials-list table td button i.i-view {
                    background: url(/ServicePortal/Content/css/image/ic-white-view.svg) center no-repeat;
                    background-size: 100% auto;
                    width: 16px;
                    height: 14px;
                }

                .page-materials .content .materials-list table td button i.i-exam,
                .page-examination .content .materials-list table td button i.i-exam {
                    background: url(/ServicePortal/Content/css/image/ic-white-exam.svg) center no-repeat;
                    background-size: 100% auto;
                    width: 14px;
                    height: 14px;
                    display: inline-block;
                }

        .page-materials .content .materials-list table td .view-button,
        .page-examination .content .materials-list table td .view-button {
            padding: 8px 30px;
            background: #d74b00;
            color: white;
            border-radius: 20px;
        }

        .page-materials .content .materials-list table td .completion,
        .page-examination .content .materials-list table td .completion {
            color: #15b315;
            margin-left: 3px;
        }

.page-examination .content .materials-list table {
    font-size: 1.6rem !important;
    font-weight: 400;
}

    .page-examination .content .materials-list table th {
        padding: 20px 13px;
    }

    .page-examination .content .materials-list table td {
        vertical-align: middle;
        padding: 13px;
    }

        .page-examination .content .materials-list table td:first-child {
            width: 25% !important;
        }

        .page-examination .content .materials-list table td .material-line {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .page-examination .content .materials-list table td .material-line + .material-line {
                margin-top: 15px;
            }

            .page-examination .content .materials-list table td .material-line .material-name {
                margin-right: 7px;
            }

        .page-examination .content .materials-list table td .examination-button {
            color: white;
            background: #d74b00;
            padding: 6px 20px;
            border-radius: 20px;
        }

            .page-examination .content .materials-list table td .examination-button:disabled {
                background: #c5bebe;
            }

        .page-examination .content .materials-list table th:nth-child(2), .page-examination .content .materials-list table td:nth-child(2) {
            width: 100px;
            text-align: center;
        }

        .page-examination .content .materials-list table th:nth-child(3), .page-examination .content .materials-list table td:nth-child(3) {
            width: 100px;
            text-align: center;
        }

        .page-examination .content .materials-list table th:nth-child(5), .page-examination .content .materials-list table td:nth-child(5) {
            text-align: center;
        }

.page-my-exam {
    padding: 50px 0;
}

    .page-my-exam .content .tabs-nav {
        margin-top: 30px;
    }

.page-portal {
    background: #43403F;
}

    .page-portal .notice {
        width: 70%;
        margin: 0 auto;
        color: white;
    }

    .page-portal .notice-area {
        margin-top: 50px;
    }

        .page-portal .notice-area label {
            margin: 10px 0;
            display: block;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .page-portal .notice-area label input[type=checkbox] {
                -webkit-transform: scale(1.3);
                transform: scale(1.3);
                position: relative;
                top: 1px;
                margin-right: 10px;
            }

        .page-portal .notice-area pre {
            border-bottom: 2px solid gray;
            word-break: break-all;
            white-space: normal;
            padding: 3px 20px;
            line-height: 25px;
            font-size: 14px;
            max-height: 237px;
            overflow: auto;
        }

    .page-portal .notice .text-center .primary-circle-button {
        margin-top: 50px;
    }

    .page-portal .notice .text-center p {
        color: white;
        margin-top: 12px;
        font-size: 14px;
    }

    .page-portal .news {
        position: relative;
        z-index: 1;
        /*padding-top: 50px;*/
        padding: 50px 20px 0 20px;
        max-width: 1160px;
        /*側邊_其他相關訊息*/
        /* CSS Document */
        /*--banner設定--*/
        /*新訊列表*/
        /*內頁*/
        /****分享*****/
        /********標題區*******/
        /****圖示顏色****/
    }

        .page-portal .news h3.articleTitle {
            clear: both;
            margin-bottom: 30px;
            border-bottom: 3px solid #eee;
        }

            .page-portal .news h3.articleTitle strong {
                position: relative;
                display: inline-block;
                font-weight: normal;
                padding: 0 20px 10px 20px;
                font-size: 24px;
                letter-spacing: .05em;
                font-weight: normal;
                color: #1f2020;
            }

                .page-portal .news h3.articleTitle strong:after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: -3px;
                    width: 100%;
                    height: 3px;
                    background: #d74b00;
                }

        .page-portal .news .inner:before {
            content: '';
            position: absolute;
            z-index: -1;
            z-index: 999;
            right: 260px;
            top: 0;
            width: 1px;
            height: 100%;
            background: #eee;
        }

        .page-portal .news .leftBox {
            float: left;
            width: calc(100% - 260px);
            padding-right: 50px;
            margin-right: 50px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-right: 1px solid #eee;
        }

        .page-portal .news .year-dropdown {
            display: block;
            padding: 13px;
            background: #fcfcfc;
            border: 1px solid #e5e5e5;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 5px;
            font-size: 15px;
            color: #808083;
            width: 140px;
        }

        .page-portal .news .sectionTitle {
            padding-bottom: 18px;
            border-bottom: 1px solid #eee;
        }

            .page-portal .news .sectionTitle strong {
                font-size: 18px;
                color: #2e363a;
                font-weight: normal;
                letter-spacing: .05em;
            }

            .page-portal .news .sectionTitle span {
                font-size: 14px;
            }

            .page-portal .news .sectionTitle em {
                font-weight: bold;
                font-size: 16px;
            }

        .page-portal .news .side_news {
            margin: 0 0 30px 0;
        }

            .page-portal .news .side_news ul {
                margin-top: 20px;
            }

                .page-portal .news .side_news ul li {
                    margin-bottom: 20px;
                }

                    .page-portal .news .side_news ul li .Img {
                        float: left;
                        margin-right: 12px;
                        width: 60px;
                        overflow: hidden;
                    }

                        .page-portal .news .side_news ul li .Img img {
                            height: 60px;
                        }

                    .page-portal .news .side_news ul li .Txt {
                        overflow: hidden;
                    }

                        .page-portal .news .side_news ul li .Txt a {
                            display: block;
                            font-size: 13px;
                            line-height: 20px;
                            color: #555;
                            font-weight: bold;
                            text-decoration: none;
                            -webkit-transition: all .5s;
                            transition: all .5s;
                        }

                            .page-portal .news .side_news ul li .Txt a:hover {
                                color: #d74b00;
                            }

                        .page-portal .news .side_news ul li .Txt b {
                            display: block;
                            font-size: 12px;
                            color: #999;
                            font-weight: normal;
                            margin-top: 5px;
                        }

                    .page-portal .news .side_news ul li .newsDate {
                        margin-bottom: 0;
                    }

                        .page-portal .news .side_news ul li .newsDate strong {
                            font-size: 13px;
                            font-family: "Roboto", sans-serif;
                            font-weight: 300;
                        }

        .page-portal .news .rightBox {
            float: right;
            width: 210px;
        }

        .page-portal .news .bannerBox li {
            /*height: 400px;*/
            overflow: hidden;
        }

        .page-portal .news ul.newsList li {
            border-bottom: 1px solid #eee;
            /*訊息分隔線*/
            padding: 0 0 25px 0;
            /*訊息間距*/
            margin-bottom: 25px;
        }

            .page-portal .news ul.newsList li:last-child {
                border-bottom: none;
            }

        .page-portal .news .newsDate {
            /*發布日期*/
            font-size: 15px !important;
            color: #9a9a9a;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-family: "Roboto", sans-serif;
            font-weight: 300;
            margin-bottom: 12px;
        }

            .page-portal .news .newsDate strong {
                display: inline-block;
                font-family: "Roboto", sans-serif;
                font-weight: 300;
            }

                .page-portal .news .newsDate strong i {
                    margin-right: 2px;
                    font-size: 14px !important;
                    color: #AE4233;
                }

            .page-portal .news .newsDate b {
                margin-left: 3px;
                font-family: "Roboto", sans-serif;
                font-weight: 300;
            }

        .page-portal .news .newIcon {
            /*分類小圖示*/
            padding: 4px 18px;
            margin-right: 6px;
            display: inline-block;
            font-family: 新細明體;
            font-size: 13px !important;
            font-weight: normal;
            color: #FFF;
        }

        .page-portal .news ul.newsList li .Img {
            /*訊息圖片*/
            float: left;
            margin-right: 10px;
            width: 150px;
            height: 150px;
            border: 4px solid #D2D2D2;
        }

            .page-portal .news ul.newsList li .Img img {
                display: block;
                width: 100%;
            }

        .page-portal .news ul.newsList li .Txt {
            /*文字區*/
            overflow: hidden;
        }

            .page-portal .news ul.newsList li .Txt h3 {
                /*訊息標題*/
                font-size: 18px !important;
                font-weight: normal;
                color: #2e363a;
                margin-bottom: 12px;
                letter-spacing: .05em;
            }

                .page-portal .news ul.newsList li .Txt h3 a {
                    /*訊息標題*/
                    display: inline-block;
                    vertical-align: middle;
                    color: #2e363a;
                    text-decoration: none;
                    -webkit-transition: all 0.4s;
                    transition: all 0.4s;
                }

                    .page-portal .news ul.newsList li .Txt h3 a:hover {
                        /*訊息標題滑過效果*/
                        color: #d74b00;
                    }

            .page-portal .news ul.newsList li .Txt p {
                /*列表說明*/
                margin-top: 7px;
                font-size: 13px !important;
                color: #747474;
                line-height: 20px;
                letter-spacing: .05em;
                max-height: 60px;
                margin-bottom: 22px;
            }

                .page-portal .news ul.newsList li .Txt p.ellipsis {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }

        .page-portal .news .btnBack {
            float: right;
        }

        .page-portal .news .textEditor {
            margin-bottom: 80px;
        }

        .page-portal .news .classYear {
            position: relative;
            margin-top: 0;
            float: left;
            width: 140px;
            cursor: pointer;
        }

            .page-portal .news .classYear a.main {
                display: block;
                padding: 13px;
                background: #fcfcfc;
                border: 1px solid #e5e5e5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 5px;
                font-size: 15px;
                color: #808083;
            }

                .page-portal .news .classYear a.main b {
                    font-family: "Roboto", sans-serif, "微軟正黑體";
                    font-weight: 300;
                }

                .page-portal .news .classYear a.main i {
                    float: right;
                }

            .page-portal .news .classYear ul {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: #fcfcfc;
                border: 1px solid #e5e5e5;
                border-radius: 5px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                display: none;
            }

                .page-portal .news .classYear ul li {
                    width: 100%;
                }

                    .page-portal .news .classYear ul li a {
                        display: block;
                        padding: 13px;
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        text-decoration: none;
                        font-size: 14px;
                        -webkit-transition: all 0.4s ease;
                        transition: all 0.4s ease;
                        color: #2e363a;
                    }

                        .page-portal .news .classYear ul li a:hover {
                            background: #f0f0f0;
                            color: inherit;
                        }

                        .page-portal .news .classYear ul li a.current {
                            background: #f0f0f0;
                        }

        .page-portal .news .classSort {
            display: block;
            margin-left: 10px;
            color: #8b8477;
            float: left;
            font-size: 16px;
            margin-top: 11px;
        }

        .page-portal .news .classBox {
            margin-bottom: 30px;
        }

        .page-portal .news .shareBox {
            float: right;
        }

            .page-portal .news .shareBox .btn-fb {
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
            }

            .page-portal .news .shareBox a.back {
                cursor: pointer;
                display: inline-block;
                vertical-align: middle;
                padding: 3px 5px;
                font-size: 12px;
                color: #FFF;
                border-radius: 3px;
                background: #ae4233;
                /* Old browsers */
                /* FF3.6+ */
                /* Chrome,Safari4+ */
                /* Chrome10+,Safari5.1+ */
                /* Opera 11.10+ */
                /* IE10+ */
                background: -webkit-gradient(linear, left top, left bottom, from(#ae4233), to(#c44c4c));
                background: linear-gradient(to bottom, #ae4233 0%, #c44c4c 100%);
                /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ae4233', endColorstr='#c44c4c', GradientType=0);
                /* IE6-9 */
                -webkit-transition: none;
                transition: none;
            }

                .page-portal .news .shareBox a.back:hover {
                    background: #398cb1;
                }

        .page-portal .news .titleArea {
            clear: both;
            margin-bottom: 30px;
        }

            .page-portal .news .titleArea h3 {
                /*標題區左-訊息標題*/
                font-size: 24px !important;
                font-weight: normal;
                color: #1f2020;
                letter-spacing: .05em;
                margin-bottom: 13px;
                overflow: hidden;
            }

                .page-portal .news .titleArea h3 strong {
                    display: block;
                    font-weight: normal;
                }

                .page-portal .news .titleArea h3 b {
                    /*標題區左-訊息日期*/
                    font-size: 12px;
                    color: #A3A3A3;
                    font-weight: normal;
                    margin-left: 5px;
                }

            .page-portal .news .titleArea .newsDate {
                font-size: 15px;
                color: #d74b00;
            }

                .page-portal .news .titleArea .newsDate strong {
                    font-family: "Roboto", sans-serif;
                    font-weight: 300;
                }

                .page-portal .news .titleArea .newsDate b {
                    font-family: "Roboto", sans-serif;
                    font-weight: 300;
                }

            .page-portal .news .titleArea .link {
                display: inline-block;
                color: #d74b00;
            }

                .page-portal .news .titleArea .link:hover {
                    color: #2e363a;
                }

                .page-portal .news .titleArea .link:before {
                    content: '|';
                    display: inline-block;
                    padding: 0 12px;
                    color: #b3b3b3;
                }

            .page-portal .news .titleArea .btn-fb {
                /*fb*/
                float: left;
            }

            .page-portal .news .titleArea a.back {
                /*回上頁*/
                cursor: pointer;
                display: block;
                float: right;
                margin-left: 5px;
                color: #06F;
                font-size: 10pt;
            }

        .page-portal .news .newIcon_green {
            background: #abd85d;
        }

        .page-portal .news .newIcon_brown {
            background: #ed842e;
        }

        .page-portal .news .newIcon_pink {
            background: #f48daf;
        }

        .page-portal .news .newIcon_blue {
            background: #00b7ea;
        }

        .page-portal .news .newIcon_navy {
            background: #3f4c6b;
        }

        .page-portal .news .newIcon_orange {
            background: #ffa84c;
        }

        .page-portal .news .newIcon_gold {
            background: #eab92d;
        }

        .page-portal .news .newIcon_burgundyRed {
            background: #a90329;
        }

        .page-portal .news .newIcon_purple {
            background: #cb60b3;
        }

        .page-portal .news .btnStyle03 a {
            display: inline-block;
            font-size: 13px;
            color: #d74b00;
            letter-spacing: .05em;
            -webkit-transition: all .5s;
            transition: all .5s;
            text-decoration: none;
        }

            .page-portal .news .btnStyle03 a:hover {
                color: #2e363a;
            }

@media (max-width: 768px) {
    .page-portal .news .textEditor {
        margin-bottom: 40px;
    }

    .page-portal .news .btnBack {
        float: left;
        width: 100%;
        margin-bottom: 15px;
    }

        .page-portal .news .btnBack a {
            display: block;
            text-align: center;
        }

    .page-portal .news .classYear {
        width: 100%;
        float: none;
        margin-bottom: 20px;
    }
}

.page-portal .news-detail {
    max-width: 1180px;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .page-portal .news-detail .article-content__wrapper {
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .page-portal .news-detail .article-content__wrapper .col-xl-9 {
            max-width: 75%;
            margin: 0 auto;
        }

    .page-portal .news-detail .article-content__inner {
        margin: 60px 0 120px 0;
    }

        .page-portal .news-detail .article-content__inner p {
            margin-bottom: 30px;
            font-size: 16px;
            font-family: "Hind", sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.4;
            color: #777777;
            max-width: 100%;
        }

    .page-portal .news-detail .article-items {
        border-top: 1px solid #D5D5D5;
        padding: 70px 0;
    }

        .page-portal .news-detail .article-items .article-items__info-item {
            padding: 0 45px 0 15px;
            border-left: 2px solid #D5D5D5;
            color: #AEB7C1;
            margin-bottom: 10px;
            font-size: 16px;
        }

    .page-portal .news-detail .attachment-area table {
        width: 100%;
        font-size: 1.4rem;
    }

        .page-portal .news-detail .attachment-area table tr {
            border-top: 1px solid lightgray;
        }

        .page-portal .news-detail .attachment-area table th {
            vertical-align: middle;
            font-weight: normal;
        }

            .page-portal .news-detail .attachment-area table th i {
                color: #d74b00;
                margin: 10px;
            }

        .page-portal .news-detail .attachment-area table td {
            padding: 10px 6px;
        }

            .page-portal .news-detail .attachment-area table td a {
                text-decoration: none;
                display: block;
                color: #337ab7;
            }

                .page-portal .news-detail .attachment-area table td a + a {
                    margin-top: 10px;
                }

                .page-portal .news-detail .attachment-area table td a:hover {
                    text-decoration: underline;
                }

@media (max-width: 1023px) {
    .page-portal .news-detail .article-content__wrapper .col-xl-9 {
        max-width: 90%;
    }
}

.page-portal .portal-lists {
    max-width: 1160px;
    margin: 50px auto;
}

    .page-portal .portal-lists .input-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .page-portal .portal-lists .form-control {
        height: 50px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 6px 12px;
        width: 100%;
    }

    .page-portal .portal-lists .input-group-addon {
        padding: 6px 12px;
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        color: #555;
        text-align: center;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 2px;
        cursor: pointer;
        padding-top: 15px;
    }

    .page-portal .portal-lists .table {
        margin-top: 30px;
        border: 2px solid #98a6ad;
        width: 100%;
        max-width: 100%;
    }

.page-portal .profile {
    font-size: 1.5rem;
    padding: 0 20px;
}

    .page-portal .profile h1.title {
        color: #d74b00;
        font-family: Hind, sans-serif;
        font-size: 2.6rem;
        margin-top: 25px;
    }

    .page-portal .profile .tabs-nav {
        margin-top: 20px;
        /*border-bottom: 2px gray solid;*/
    }

        .page-portal .profile .tabs-nav li {
            margin: 0 3px 0 0;
        }
}

.page-portal .profile .tabs-content {
    margin-top: 25px;
    position: relative;
}

.page-portal .profile .information-left {
    float: left;
    margin-left: 22px;
    text-align: center;
}

    .page-portal .profile .information-left .profile-avatar img {
        width: 100px;
    }

    .page-portal .profile .information-left .profile-level {
        color: #d74b00;
        border: 1px solid #1d1c1c;
        width: auto;
        display: inline-block;
        padding: 5px 15px;
        border-radius: 20px;
        margin-top: 15px;
    }

        .page-portal .profile .information-left .profile-level:empty {
            display: none;
        }

.page-portal .profile .information-right {
    margin-left: 58px;
    float: left;
    margin-top: 20px;
}

    .page-portal .profile .information-right .profile-info-name {
        font-weight: bold;
        font-size: 1.6rem;
    }

    .page-portal .profile .information-right .profile-info p {
        margin-top: 20px;
    }

.page-portal .profile .tool {
    position: absolute;
    right: 0;
    width: 40px;
    height: 40px;
    background-size: 100%;
    background-color: transparent;
}

    .page-portal .profile .tool.edit-profile {
        background-image: url(/Content/image/forum/ic_edit_mail.png);
        top: 250px !important;
        left: 75px;
    }

    .page-portal .profile .tool.mail-to {
        background-image: url(/Content/image/forum/ic_edit_mail.png);
        top: 250px !important;
        left: 75px;
        background-position: bottom;
    }

.portal-form-wrapper {
    width: 100%;
    height: 100%;
    padding-top: 35px;
    padding-bottom: 1px;
}

    .portal-form-wrapper > h1 {
        color: white;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        font-family: Hind, sans-serif;
        margin-bottom: 35px;
    }

    .portal-form-wrapper > h2 {
        color: black;
        text-align: center;
        font-size: 30px;
    }

    .portal-form-wrapper form.portal-form {
        width: 70%;
        margin: 0 auto;
        margin-bottom: 40px;
        position: relative;
    }

        .portal-form-wrapper form.portal-form .legend {
            color: black;
            font-size: 25px;
            font-weight: bold;
        }

        .portal-form-wrapper form.portal-form .form-group {
            margin-top: 40px;
        }

            .portal-form-wrapper form.portal-form .form-group + .legend {
                margin-top: 25px;
            }

            .portal-form-wrapper form.portal-form .form-group label {
                display: inline-block;
                color: rgba(0, 0, 0, 0.54);
                font-size: 1.1em;
                width: 100% !important;
                font-weight: lighter;
                margin-right: 20px;
            }
            .portal-form-wrapper form.portal-form .form-group.form-input.select select ~ label {
                font-size: 1.1em !important;
            }
            .portal-form-wrapper form.portal-form .form-group.form-input.select.active select ~ label {
                font-size: 14px !important;
            }
            .portal-form-wrapper form.portal-form .form-group input[type=text], .portal-form-wrapper form.portal-form .form-group input[type=password] {
                text-align: left;
                display: inline-block;
                width: 100%;
                height: 36px;
                font-size: 18px;
                padding-left: 15px;
            }
            .portal-form-wrapper form.portal-form .form-group select {
                text-align: left;
                display: inline-block;
                width: 100%;
                cursor: pointer;
                height: calc(100% - 12px);
                font-size: 18px;
                padding-left: 15px;
                padding-bottom: 5px;
                margin-left: 0px;
                background-color: transparent;
                border: none;
                top: 2px;
                position: relative;
                top: 20px;
                padding-bottom: 0px;
                height: 36px;
                /*
                &:focus + label{
                    top: -0.5em;
                    display: block;
                }
*/
            }
            .portal-form-wrapper form.portal-form .form-group.selected select {
                top: 20px;
                padding-bottom: 0px;
                height: 36px;
            }
            .portal-form-wrapper form.portal-form .form-group select + label, .portal-form-wrapper form.portal-form .form-group input[type=file] + label {
                top: 4px;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.54);
                font-weight: 500;
            }

            .portal-form-wrapper form.portal-form .form-group.captcha input {
                width: 100%;
            }

            .portal-form-wrapper form.portal-form .form-group.captcha img {
                display: inline-block;
                vertical-align: bottom;
                height: 36px;
                width: 186px;
                margin-top: 14px;
            }

            .portal-form-wrapper form.portal-form .form-group.captcha .fa-refresh {
                font-size: 30px;
                color: black;
                margin: 0 10px;
                position: relative;
                top: -5px;
            }

        .portal-form-wrapper form.portal-form .text-center {
            margin-top: 20px;
            margin-bottom: 20px;
        }

            .portal-form-wrapper form.portal-form .text-center .primary-circle-button {
                margin-top: 14px;
                font-style: normal;
                font-weight: 400;
                font-size: 16px;
                text-align: center;
                padding: 13px 30px;
                border-radius: 0;
                color: #ffffff;
                width: 100%;
                white-space: normal;
                -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            }

                .portal-form-wrapper form.portal-form .text-center .primary-circle-button:hover {
                    color: #D74B00;
                    background: #D5D5D5;
                }

        .portal-form-wrapper form.portal-form .back-to-login {
            position: absolute;
            bottom: 4%;
            left: 6%;
            color: rgba(211, 68, 28, 0.582);
            font-size: 17px;
            text-decoration: none;
        }

            .portal-form-wrapper form.portal-form .back-to-login:hover {
                text-decoration: underline;
            }

        .portal-form-wrapper form.portal-form .form-input {
            margin-top: 20px;
            font-size: 1.2em;
            width: 100%;
            display: inline-block;
            background: rgba(0, 0, 0, 0.06);
            border-bottom: 2px solid rgba(0, 0, 0, 0.42);
            height: 56px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

            .portal-form-wrapper form.portal-form .form-input:hover {
                background: rgba(0, 0, 0, 0.12);
            }

            .portal-form-wrapper form.portal-form .form-input input {
                height: 36px;
                width: 100%;
                font-size: 1em;
                padding-left: 15px;
                padding-right: 15px;
                padding-bottom: 4px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: transparent;
                border-style: none;
                margin-top: 22px;
            }

        .portal-form-wrapper form.portal-form .half-size {
            width: 49% !important;
        }

        .portal-form-wrapper form.portal-form .right {
            float: right;
        }

.dropdown-div-outer {
    margin-top: 20px !important;
}
.dropdown-div {
    font-size: 1.2em;
    width: 100%;
    display: inline-block;
    background: rgba(0, 0, 0, 0.06);
    border-bottom: 2px solid rgba(0, 0, 0, 0.42);
    height: 56px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: relative;
    cursor: pointer;
}

    .dropdown-div:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .dropdown-div label {
        display: block;
        color: rgba(0, 0, 0, 0.54);
        font-size: 1.1em;
        width: calc(100% - 30px) !important;
        font-weight: lighter;
        position: absolute;
        pointer-events: none;
        left: 15px;
        right: 15px;
        top: 18px !important;
        transition: 0.2s ease all;
    }
.portal-form-wrapper form.portal-form .form-group .dropdown-div label {
    width: calc(100% - 30px) !important;
}
.portal-form-wrapper form.portal-form .form-group.inline-block {
    display: inline-block;
    margin: 0;
}
.dropdown-div.active label {
    top: 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #d74b00 !important;
}

.dropdown-div.had_select label {
    top: 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(0, 0, 0, 0.54);
}

.dropdown-div label i {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 0;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.dropdown-div.active label i {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
}

.dropdown-div .select-val-div {
    position: absolute;
    display: inline-block;
    left: 15px;
    top: 30px;
    opacity: 0;
    transition: 0.2s ease all;
}

.dropdown-div.active .select-val-div {
    opacity: 1;
}

.dropdown-div.had_select .select-val-div {
    opacity: 1;
}

.dropdown-div .list-item {
    width: 100%;
    display: none;
    position: absolute;
    background: #fff;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    height: 0;
    top: 58px;
    z-index: 9999;
}

.dropdown-div.active .list-item {
    height: auto;
    display: block;
}

.dropdown-div .list-item ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    max-height: 230px;
}

    .dropdown-div .list-item ul li {
        color: rgba(0, 0, 0, 0.54);
        padding: 10px 10px;
        cursor: pointer;
    }

        .dropdown-div .list-item ul li:hover {
            background: #ced4da;
            color: #fff;
        }

.page-search {
    padding-top: 65px;
}

    .page-search .tabs-wrapper .container {
        position: relative;
    }

    .page-search .tabs-wrapper .tabs-nav {
        border-bottom: 1px solid lightgray;
    }

        .page-search .tabs-wrapper .tabs-nav li a {
            color: #5a5a5a;
            font-size: 1.5rem;
        }

    .page-search .tabs-wrapper .search-page-title {
        color: #323232;
        font-size: 52px;
        line-height: 52px;
        margin: 40px 0;
        font-style: normal;
        font-weight: 700;
    }

    .page-search .tabs-wrapper .tab-tool-button {
        background: none;
        color: #5a5a5a;
        position: absolute;
        bottom: 12px;
        right: 23px;
        font-size: 1.45rem;
    }

        .page-search .tabs-wrapper .tab-tool-button::before {
            font-family: "FontAwesome";
            font-weight: 900;
            content: '\f0ad';
            margin-right: 3px;
        }

        .page-search .tabs-wrapper .tab-tool-button.active {
            color: #d74b00;
        }

    .page-search .search-result-area {
        font-size: 16px;
        position: relative;
        padding-bottom: 100px;
        margin-top: 60px;
    }

        .page-search .search-result-area .search-count {
            position: absolute;
            color: gray;
            left: 0;
            opacity: 1;
            top: -37px;
            -webkit-transition: all 220ms ease-in-out;
            transition: all 220ms ease-in-out;
        }

            .page-search .search-result-area .search-count.down {
                opacity: 0;
            }

            .page-search .search-result-area .search-count.up {
                opacity: 1;
            }

        .page-search .search-result-area .search-condition {
            margin-left: -12px;
            transition: top 220ms ease-in-out;
            -webkit-transition: top 220ms ease-in-out;
            position: absolute;
        }

            .page-search .search-result-area .search-condition.down {
                opacity: 1;
                top: -48px;
            }

            .page-search .search-result-area .search-condition.up {
                opacity: 0;
            }

            .page-search .search-result-area .search-condition .btn-group + .btn-group {
                margin-left: 15px;
            }

            .page-search .search-result-area .search-condition .btn-group button {
                background: none;
            }

            .page-search .search-result-area .search-condition .btn-group ul li.current a {
                color: #d74b00;
            }

            .page-search .search-result-area .search-condition .btn-group ul li a {
                text-decoration: none;
            }

        .page-search .search-result-area .search-result {
            margin-top: 50px;
        }

            .page-search .search-result-area .search-result .match {
                color: red;
            }

        .page-search .search-result-area .search-result-title {
            color: #1a0dab;
            font-size: 1.1em;
            cursor: pointer;
        }

            .page-search .search-result-area .search-result-title a:hover {
                text-decoration: underline;
            }

        .page-search .search-result-area .search-result-url {
            color: #21AB38;
            font-size: 1em;
            margin-top: 10px;
            cursor: pointer;
        }

        .page-search .search-result-area .search-result-content {
            color: #595757;
            margin-top: 8px;
            font-size: 1em;
            line-height: 25px;
        }

@media (min-width: 768px) {
    .sitemap .architecture a {
        font-size: 140%;
    }

        .sitemap .architecture a.sub-title {
            font-size: 130%;
        }

        .sitemap .architecture a.home {
            width: 20%;
        }

    .sitemap .architecture ul li a {
        font-size: 120%;
    }
}

@media (max-width: 1023px) {
    .portal-form-wrapper form.portal-form .half-size {
        width: 100% !important;
        float: none;
    }
}

@media (max-width: 680px) {
    .sitemap .architecture .col-sm-2-4 {
        width: 50%;
        margin-top: 10px;
    }
}

.sitemap {
    max-width: 1366px;
    margin: 40px auto;
    font-size: 14px;
    padding: 0 15px;
    font-weight: normal;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .sitemap .architecture {
        margin: 0;
    }

        .sitemap .architecture a {
            font-size: 130%;
            color: #fff;
            text-align: center;
            display: block;
            text-decoration: none;
            line-height: 2.5;
            background-color: #7b7256;
            white-space: nowrap;
            -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.35);
            box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.35);
            border-radius: 20px;
            -webkit-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }

            .sitemap .architecture a:hover {
                background-color: #70643d;
                text-decoration: none;
            }

            .sitemap .architecture a.home {
                width: 32%;
                margin: 1em auto 2em auto;
                background: #d74b00;
            }

            .sitemap .architecture a.sub-title {
                font-size: 120%;
                color: white;
                background-color: #9b9999;
                margin: 1.5em 0 1em 0;
            }

                .sitemap .architecture a.sub-title:hover {
                    background-color: #858181;
                }

        .sitemap .architecture ul {
            margin: 0;
            padding: 0;
        }

            .sitemap .architecture ul li {
                list-style: none;
                margin-bottom: 1em;
            }

                .sitemap .architecture ul li a {
                    font-size: 110%;
                    color: #6d6d6d;
                    background-color: #e6e6e6;
                    margin: 0 1em;
                }

                    .sitemap .architecture ul li a:hover {
                        color: #111;
                        background-color: #c9c5c5;
                    }

        .sitemap .architecture .col-xs-12::before {
            content: "";
            border: 3px solid #c9c9c9;
            left: 50%;
            position: absolute;
            height: 86%;
            z-index: -1;
        }

        .sitemap .architecture .col-xs-12 {
            z-index: 1;
        }

        .sitemap .architecture .col-sm-2-4 {
            width: 16.66666666%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

#divSiteMap a {
    vertical-align: middle;
    white-space: normal;
}

    #divSiteMap a:hover {
        text-decoration: none;
    }

.page-message {
    padding-top: 60px;
}

    .page-message .message {
        font-size: 1.4rem;
        position: relative;
    }

    .page-message .message-nav {
        margin-top: 25px;
        padding-left: 20px;
        border-bottom: none;
    }

        .page-message .message-nav li {
            padding: 8px 0px;
            width: 100px;
            text-align: center;
            font-size: 1em;
            margin: 0;
            cursor: pointer;
            font-weight: bold;
            color: rgba(64, 64, 71, 0.26);
        }

            .page-message .message-nav li.active {
                color: #333333;
            }

    .page-message .message-container {
        padding: 0 20px;
        background: #f7f7f8;
    }

        .page-message .message-container .message-tool {
            padding: 20px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

            .page-message .message-container .message-tool .check-all-message {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

                .page-message .message-container .message-tool .check-all-message:hover {
                    background: white;
                    padding-left: 10px;
                    margin-left: -10px;
                    border: 1px solid white;
                    border-radius: 8px;
                }

                .page-message .message-container .message-tool .check-all-message label {
                    margin-bottom: 20px;
                    padding-left: 20px;
                }

                .page-message .message-container .message-tool .check-all-message .check-handler {
                    position: relative;
                    cursor: pointer;
                    display: block;
                    width: 20px;
                    height: 40px;
                    border-radius: 3px;
                    line-height: 40px;
                }

                    .page-message .message-container .message-tool .check-all-message .check-handler:hover {
                        background: white;
                        opacity: 0.3;
                    }

                .page-message .message-container .message-tool .check-all-message .fa {
                    left: 6px;
                    position: relative;
                }

            .page-message .message-container .message-tool .status-dropdown-list {
                position: absolute;
                height: 160px;
                width: 150px;
                background: white;
                left: 43px;
                top: 87px;
                border: 1px solid #eeeeee;
                border-radius: 8px;
                z-index: 5;
            }

                .page-message .message-container .message-tool .status-dropdown-list ul {
                    width: 100%;
                    height: 100%;
                    margin: 20px 0
                }

                .page-message .message-container .message-tool .status-dropdown-list li {
                    height: 30px;
                    line-height: 30px;
                    width: 115px;
                    font-size: 15px;
                    cursor: pointer;
                    padding-left: 35px;
                }

                    .page-message .message-container .message-tool .status-dropdown-list li:hover {
                        background: #eeeeee;
                    }

            .page-message .message-container .message-tool button {
                border: none;
                background: transparent;
            }

                .page-message .message-container .message-tool button.message-tool-btn {
                    font-size: 18px;
                    color: gray;
                    -webkit-transition: .3s all;
                    transition: .3s all;
                }

                    .page-message .message-container .message-tool button.message-tool-btn:hover {
                        color: #404047;
                    }

        .page-message .message-container .message-main {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

            .page-message .message-container .message-main .message-list {
                width: 400px;
                background: white;
            }

            .page-message .message-container .message-main .message-list-pager {
                height: 48px;
                line-height: 48px;
                -webkit-box-shadow: 0 2px 4px -2px #b4b3b3;
                box-shadow: 0 2px 4px -2px #b4b3b3;
                padding: 0 16px;
                font-size: 1.1em;
                font-weight: 500;
            }

                .page-message .message-container .message-main .message-list-pager .pager-button {
                    float: right;
                    height: 24px;
                    margin-top: 9px;
                }

                    .page-message .message-container .message-main .message-list-pager .pager-button input[type=image] {
                        cursor: pointer;
                    }

                        .page-message .message-container .message-main .message-list-pager .pager-button input[type=image]:disabled {
                            cursor: default;
                            opacity: 0.3;
                        }

            .page-message .message-container .message-main .message-list-content .message-box {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-shadow: 0 2px 4px -2px #b4b3b3;
                box-shadow: 0 2px 4px -2px #b4b3b3;
                border-right: 1px solid lightgray;
                padding: 25px 20px;
                cursor: pointer;
                position: relative;
            }

                .page-message .message-container .message-main .message-list-content .message-box:hover, .page-message .message-container .message-main .message-list-content .message-box.active {
                    border-left: 3px solid #d74b00;
                }

                .page-message .message-container .message-main .message-list-content .message-box.unread .message-info {
                    font-weight: bold;
                }

                    .page-message .message-container .message-main .message-list-content .message-box.unread .message-info .message-builder {
                        color: #404047;
                    }

                    .page-message .message-container .message-main .message-list-content .message-box.unread .message-info .message-subject {
                        color: #404047;
                    }

                    .page-message .message-container .message-main .message-list-content .message-box.unread .message-info .message-content {
                        color: rgba(64, 64, 71, 0.59);
                    }

                .page-message .message-container .message-main .message-list-content .message-box .message-info .message-builder {
                    font-size: 1.1em;
                    color: rgba(64, 64, 71, 0.59);
                }

                .page-message .message-container .message-main .message-list-content .message-box .message-info .message-subject {
                    font-size: 1em;
                    margin-top: 7px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: rgba(64, 64, 71, 0.59);
                    overflow: hidden;
                    width: 300px;
                }

                .page-message .message-container .message-main .message-list-content .message-box .message-info .message-content {
                    width: 300px;
                    font-size: 0.9em;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    color: rgba(64, 64, 71, 0.16);
                    margin-top: 7px;
                    background: white;
                }

                .page-message .message-container .message-main .message-list-content .message-box .message-info .message-send-time {
                    position: absolute;
                    top: 16px;
                    right: 16px;
                }

                .page-message .message-container .message-main .message-list-content .message-box .message-info .attach {
                    position: absolute;
                    top: 14px;
                    right: 93px;
                }

            .page-message .message-container .message-main .message-detail {
                width: calc(100% - 400px);
                background: white;
            }

            .page-message .message-container .message-main .message-detail-title {
                height: 48px;
                line-height: 48px;
                font-size: 20px;
                font-weight: bold;
                padding-left: 40px;
                -webkit-box-shadow: 0 2px 4px -2px #b4b3b3;
                box-shadow: 0 2px 4px -2px #b4b3b3;
            }

            .page-message .message-container .message-main .message-detail .message-group-area .message-group {
                border-bottom: 1px solid lightgray;
                padding: 24px 40px;
                position: relative;
            }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group :not(.message-group-content) {
                    cursor: pointer;
                }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group.open .message-group-content {
                    display: block;
                    overflow-x: auto;
                    overflow-y: hidden;
                }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-sender {
                    font-size: 15px;
                    font-weight: bold;
                }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group .receiver-info {
                    color: #4e4b48;
                    padding-top: 5px;
                }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group .send-time {
                    position: absolute;
                    color: #4e4b48;
                    top: 25px;
                    right: 161px;
                }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group .attach {
                    position: absolute;
                    color: #4e4b48;
                    top: 24px;
                    right: 100px;
                }

                .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach {
                    position: relative;
                    margin: 5px;
                    padding: 5px;
                }
                .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach-left {
                    position: absolute;
                    left: 0px;
                    color: #4e4b48;
                }
                .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach-center {
                    position: absolute;
                    left: 20px;
                }
                .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach-right {
                    position: absolute;
                    right: 50px;
                    color: #4e4b48;
                }

                    .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach-right .download {
                        color: #4e4b48;
                    }

                        .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach-right .download:hover {
                            color: #d74b00;
                        }

                        .page-message .message-container .message-main .message-detail .message-group-area .message-group .message-attach-right .download:active {
                            color: #d74b00;
                        }

            .page-message .message-container .message-main .message-detail .message-group-area .message-group-content {
                padding-top: 20px;
                display: none;
            }

            .page-message .message-container .message-main .message-detail-button {
                text-align: right;
                margin: 30px 70px;
            }

                .page-message .message-container .message-main .message-detail-button button {
                    padding: 13px 30px;
                    border-radius: 100px;
                    min-width: 180px;
                    margin-left: 20px;
                }

            .page-message .message-container .message-main .message-detail .message-reply-area {
                padding: 30px;
                display: none;
            }

                .page-message .message-container .message-main .message-detail .message-reply-area .reply-buttons button {
                    margin: 30px 25px 30px 0;
                }

            .page-message .message-container .message-main .message-detail .draft {
                font-size: 1.5rem;
                padding: 28px 40px;
            }

            .page-message .message-container .message-main .message-detail .draft-receiver {
                color: #404047;
            }

                .page-message .message-container .message-main .message-detail .draft-receiver label {
                    margin-right: 20px;
                }

            .page-message .message-container .message-main .message-detail .draft-receiver-name {
                font-weight: bold;
            }

            .page-message .message-container .message-main .message-detail .draft-title {
                margin-top: 12px;
            }

                .page-message .message-container .message-main .message-detail .draft-title input {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    font-size: 1.1em;
                    width: 100%;
                    height: 36px;
                    padding-left: 8px;
                    color: #404047;
                }

            .page-message .message-container .message-main .message-detail .draft-content {
                margin-top: 12px;
            }

            .page-message .message-container .message-main .message-detail .draft-button {
                margin-top: 20px;
            }

                .page-message .message-container .message-main .message-detail .draft-button button {
                    margin: 0px 25px 30px 0;
                }

    .page-message .message-toast {
        background: black;
        height: 45px;
        min-width: 190px;
        position: fixed;
        border-left: 5px solid #d74b00;
        bottom: 35px;
        left: 415px;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
        opacity: 0;
    }

        .page-message .message-toast.show {
            opacity: 1;
        }

    .page-message .message-toast-content {
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;
        padding: 0 18px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .page-message .message-toast-content p {
            font-size: 1.7rem;
            display: block;
        }

        .page-message .message-toast-content .close {
            display: block;
            color: white;
            opacity: 1;
            font-weight: lighter;
            font-size: 2.5rem;
        }


.captcha {
    display: flex;
    align-items: center;
}

    .captcha input {
        order: 1;
    }

    .captcha a {
        order: 3;
    }

    .captcha img {
        order: 2;
        max-width: 140px;
        margin: 0 10px;
    }

.captcha-inner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
}

    .captcha-inner img {
        margin: 10px 10px 0 0;
    }

.captcha-index input[type=text] {
    width: 53% !important;
}

.captcha > a, .captcha-inner > a {
    width: 28px;
    height: 28px;
    background-image: url('/Content/image/home/ic_refresh.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block !important;
}










div.people-detail h3 {
    background: #d74b00;
    font-size: 1.7rem;
    text-align: center;
    color: white;
    padding: 15px;
    width: 200px;
    border-radius: 5px 5px 0 0;
    height: 10px;
}

div.people-detail hr {
    padding: 0;
    margin: 0;
    border: 2px solid #d74b00;
}

#btnAddGroup {
    color: #3897b5;
    background: none;
    border: none;
    outline: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 27px;
    float: right;
    right: 2px;
    position: absolute;
    top: 100px;
}

div.question-group-box > .remove-button {
    right: 0px !important;
}

tr.trQuestions .remove-button {
    right: 20px !important;
}

#tbMaterials .remove-button {
    right: 15px !important;
}

.portal-reset-password {
    width: 100%;
    height: 100%;
    padding-top: 35px;
}

    .portal-reset-password > h1 {
        color: white;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        font-family: Hind, sans-serif;
        margin-bottom: 35px;
    }

    .portal-reset-password > h2 {
        color: black;
        text-align: center;
        font-size: 30px;
    }

    .portal-reset-password form.portal-form {
        width: 600px;
        margin: 0 auto;
        margin-bottom: 40px;
        position: relative;
    }

        .portal-reset-password form.portal-form .legend {
            color: black;
            font-size: 25px;
            font-weight: bold;
        }

        .portal-reset-password form.portal-form .form-group {
            margin-top: 40px;
        }

            .portal-reset-password form.portal-form .form-group + .legend {
                margin-top: 25px;
            }

            .portal-reset-password form.portal-form .form-group label {
                display: inline-block;
                color: rgba(0, 0, 0, 0.54);
                font-size: 1.1em;
                width: 100% !important;
                font-weight: lighter;
                margin-right: 20px;
            }

            .portal-reset-password form.portal-form .form-group input[type=text],
            .portal-reset-password form.portal-form .form-group input[type=password] {
                text-align: left;
                display: inline-block;
                width: 100%;
                height: 36px;
                font-size: 18px;
                padding-left: 15px;
            }

            .portal-reset-password form.portal-form .form-group select {
                text-align: left;
                display: inline-block;
                width: 100%;
                cursor: pointer;
                height: 100%;
                font-size: 18px;
                padding-left: 15px;
                margin-left: -3px;
                background-color: transparent;
                border: none;
                /*
                &:focus + label{
                    top: -0.5em;
                    display: block;
                }
*/
            }

                .portal-reset-password form.portal-form .form-group select + label, .portal-reset-password form.portal-form .form-group input[type=file] + label {
                    top: 4px;
                    font-size: 14px;
                    color: black;
                    font-weight: 500;
                }

            .portal-reset-password form.portal-form .form-group.captcha input {
                width: 100%;
            }

            .portal-reset-password form.portal-form .form-group.captcha img {
                display: inline-block;
                vertical-align: bottom;
                height: 36px;
                width: 186px;
                margin-top: 14px;
            }

            .portal-reset-password form.portal-form .form-group.captcha .fa-refresh {
                font-size: 30px;
                color: black;
                margin: 0 10px;
                position: relative;
                top: -5px;
            }

        .portal-reset-password form.portal-form .text-center {
            margin-top: 20px;
            margin-bottom: 20px;
        }

            .portal-reset-password form.portal-form .text-center .primary-circle-button {
                margin-top: 44px;
                font-style: normal;
                font-weight: 400;
                font-size: 16px;
                text-align: center;
                padding: 13px 30px;
                border-radius: 0;
                color: #ffffff;
                width: 100%;
                white-space: normal;
                -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            }

                .portal-reset-password form.portal-form .text-center .primary-circle-button:hover {
                    color: #D74B00;
                    background: #D5D5D5;
                }

        .portal-reset-password form.portal-form .back-to-login {
            position: absolute;
            bottom: 4%;
            left: 6%;
            color: rgba(211, 68, 28, 0.582);
            font-size: 17px;
            text-decoration: none;
        }

            .portal-reset-password form.portal-form .back-to-login:hover {
                text-decoration: underline;
            }

        .portal-reset-password form.portal-form .form-input {
            margin-top: 20px;
            font-size: 1.2em;
            width: 100%;
            display: inline-block;
            background: rgba(0, 0, 0, 0.06);
            border-bottom: 2px solid rgba(0, 0, 0, 0.42);
            height: 56px;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

            .portal-reset-password form.portal-form .form-input:hover {
                background: rgba(0, 0, 0, 0.12);
            }

            .portal-reset-password form.portal-form .form-input input {
                height: 36px;
                width: 100%;
                font-size: 1em;
                padding-left: 15px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: transparent;
                border-style: none;
                margin-top: 22px;
            }

        .portal-reset-password form.portal-form .half-size {
            width: 49% !important;
        }

        .portal-reset-password form.portal-form .right {
            float: right;
        }

div.portal-verification {
    width: 600px;
    margin: 0 auto;
    font-size: 26px;
    border: 2px solid #d74b00;
    position: relative;
    display: block;
    height: 200px;
    border-radius: 5px;
    margin-top: 40px;
}

    div.portal-verification .message-wrapper {
        padding: 30px;
        line-height: 30px;
        position: relative;
    }

        div.portal-verification .message-wrapper div:first-child {
            position: absolute;
            display: block;
            top: 20px;
        }

        div.portal-verification .message-wrapper div:nth-child(2) {
            position: absolute;
            display: block;
            left: 30px;
            top: 130px;
        }

            div.portal-verification .message-wrapper div:nth-child(2) a {
                width: 120px;
                height: 35px;
                cursor: pointer;
                background: #d74b00;
                color: white;
                font-size: 1em;
                margin-top: 12px;
                margin-right: 2px;
                opacity: 0.8;
                -webkit-transition: all 0.3s ease-in-out;
                transition: all 0.3s ease-in-out;
                border-radius: 4px;
                text-decoration: none;
                padding: 2px 15px;
                display: block;
                line-height: 35px;
                text-align: center;
            }

        div.portal-verification .message-wrapper div:nth-child(3) {
            position: absolute;
            display: block;
            right: 30px;
            top: 150px;
        }

    div.portal-verification .fail {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        top: 46%;
    }

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

    #T4U-Table tbody {
        max-height: none !important;
    }

    .break-table thead tr, div.custom-table-th, div.custom-table-elearning-report .custom-table-th,
    div.custom-table-questions custom-table-th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .break-table, .break-table thead, .break-table tbody, .break-table th, .break-table td, .break-table tr, div.custom-table-tr, div.custom-table-tr,
    div.custom-table-elearning-report .custom-table-tr, div.custom-table-examinees .custom-table-tr,
    div.custom-table-questions .custom-table-tr {
        display: block;
    }

        .break-table tr, div.custom-table-tr, div.custom-table-elearning-report .custom-table-tr, div.custom-table-examinees .custom-table-tr,
        div.custom-table-questions .custom-table-tr {
            border: 1px solid #ccc;
            margin-bottom: 10px;
            background-color: #ffffff;
        }

        .break-table td, div.custom-table-td, div.custom-table-elearning-report .custom-table-td, div.custom-table-examinees .custom-table-td,
        div.custom-table-questions .custom-table-td {
            border: none !important;
            border-bottom: 1px solid #eee !important;
            position: relative;
            padding-left: 35% !important;
            white-space: normal;
            text-align: left !important;
            min-height: 20px;
            padding: 10px 5px;
            background-color: #ebe8e8;
        }

            .break-table td:before, div.custom-table-td:before, div.custom-table-elearning-report .custom-table-td:before,
            div.custom-table-examinees .custom-table-td:before, div.custom-table-questions .custom-table-td:before {
                content: attr(data-title);
            }

            .break-table td:before, div.custom-table-td:before, div.custom-table-elearning-report .custom-table-td:before,
            div.custom-table-examinees .custom-table-td:before, div.custom-table-questions .custom-table-td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 30%;
                padding-right: 10px;
                text-align: left;
                font-weight: bold;
                color: #1a1a1a;
                word-break: break-word;
            }

    .custom-table .sub-table .examination-record .custom-table-tr div,
    div.custom-table-elearning-report .custom-table-th, div.custom-table-elearning-report .custom-table-td,
    div.custom-table-examinees .custom-table-th, div.custom-table-examinees .custom-table-td,
    div.custom-table-questions .custom-table-th, div.custom-table-questions .custom-table-td {
        width: auto;
    }

        div.custom-table-elearning-report .custom-table-th:first-child, div.custom-table-elearning-report .custom-table-td:first-child,
        div.custom-table-examinees .custom-table-th:first-child, div.custom-table-examinees .custom-table-td:first-child {
            border-left: 1px solid #f0eded;
            width: auto;
        }

        div.custom-table-elearning-report .custom-table-td > button {
            font-size: 16px;
            padding: 0 !important;
            height: 30px;
            width: 30px;
            border-radius: 40px !important;
            margin-top: 0px !important;
            color: #666 !important;
            background: #fff !important;
        }

            div.custom-table-elearning-report .custom-table-td > button + button {
                margin-top: 15px;
            }

    div.custom-table-elearning-report .sub-table {
        margin: 0 auto;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        padding-left: 30px;
    }

        div.custom-table-elearning-report .sub-table.active + .custom-table-tr .custom-table-td {
            border-top: 1px solid #f0eded;
        }

        div.custom-table-elearning-report .sub-table .examination-record > h3,
        div.custom-table-elearning-report .sub-table .people > h3 {
            background: #d74b00;
        }

        div.custom-table-elearning-report .sub-table .examination-record > hr,
        div.custom-table-elearning-report .sub-table .people > hr,
        div.custom-table-elearning-report .sub-table .teaching-material > hr,
        div.custom-table-elearning-report .sub-table .questions > hr {
            padding: 0;
            margin: 0;
            border: 2px solid #d74b00;
        }

        div.custom-table-elearning-report .sub-table .teaching-material > h3,
        div.custom-table-elearning-report .sub-table .questions > h3 {
            background: #d74b00;
        }

        div.custom-table-elearning-report .sub-table .examination-record .custom-table-tr {
            display: table;
            width: 100%;
        }

        div.custom-table-elearning-report .sub-table .teaching-material .custom-table-tr {
            display: table;
            width: 100%;
        }

        div.custom-table-elearning-report .sub-table > div {
            margin-bottom: 30px;
            margin-top: 14px;
            display: none;
            position: relative;
        }

            div.custom-table-elearning-report .sub-table > div.active {
                display: block;
            }

            div.custom-table-elearning-report .sub-table > div > h3 {
                font-size: 1.7rem;
                text-align: center;
                color: white;
                padding: 15px;
                width: 200px;
                border-radius: 5px 5px 0 0;
                height: 10px;
            }

    .right-sidebar {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 100%;
        height: 70px;
        right: auto;
        top: auto;
        display: inline-block;
        white-space: nowrap;
    }

        .right-sidebar .active {
            display: inline-block;
        }

    .right-sidebar-menu {
        cursor: pointer;
        width: 19%;
        /*background: #003a5db0;*/
        background: rgba(0,58,93,0.6);
        margin-top: 2px;
        color: white;
        -webkit-transition: background .35s ease-in-out;
        transition: background .35s ease-in-out;
        display: inline-block;
        height: 70px !important;
        text-align: center;
        display: none;
    }

        .right-sidebar-menu:hover {
           /* background: #013a5ef5;*/
            background: rgba(0,58,93,0.9);
        }

    .right-sidebar-menu-content {
        text-align: center;
        width: 100%;
        display: block;
        margin-top: 11px;
    }

        .right-sidebar-menu-content h6 {
            font-size: 14px;
            word-break: break-word;
            margin-top: 5px;
        }

    .right-sidebar-menu.prev, .right-sidebar-menu.next {
        font-size: 60px;
        text-align: center;
        width: 10%;
        display: inline-block;
    }
        .right-sidebar-menu.prev.disabled, .right-sidebar-menu.next.disabled {
            cursor: auto !important;
            background: lightgray !important;
        }

        .right-sidebar-menu.prev i, .right-sidebar-menu.next i {
            vertical-align: sub;
        }

    .right-sidebar-menu.toggle-button {
        font-size: 40px;
        text-align: center;
        position: relative;
        display: none;
    }

        .right-sidebar-menu.toggle-button i {
            display: none;
            position: absolute;
            text-align: center;
            width: 100%;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

            .right-sidebar-menu.toggle-button i.active {
                display: block;
            }

    .right-sidebar-menu-content span {
        display: none;
    }

    .right-sidebar-menu-content i {
        width: 100%;
        height: 70px;
        display: block;
        text-align: center;
        line-height: 63px;
        vertical-align: middle;
    }

    .right-sidebar-menu-content img {
        width: 50px;
        vertical-align: top;
        margin-top: 4px;
    }

    .right-sidebar .fa-angle-up:before {
        content: '\f104';
    }

    .right-sidebar .fa-angle-down:before {
        content: '\f105';
    }

    .pp-copyright {
        margin-bottom: 70px;
    }
}

.gotop {
    background: url(/Content/image/btn_gotop.png) center center no-repeat;
    height: 38px;
    width: 37px;
    position: fixed;
    right: 30px;
    bottom: 80px !important;
    opacity: 0;
    z-index: 1500;
}

    .gotop:hover {
        box-shadow: 1px 1px white;
    }

.livechat {
    background: url(/Content/images/dealer.png) center center no-repeat #d74b00;
    height: 60px;
    width: 60px;
    position: fixed;
    left: 30px;
    bottom: 90px;
    opacity: 1;
    z-index: 1500;
    border-radius:50%;
}

    .livechat:hover {
        /*box-shadow: 1px 1px white;*/
    }

.fade 
{
    opacity: 1;
    display: none;
}

    .fade.in 
{
        display: block;
    }

.cssSortMark i {
    margin: 3px;
    padding: 3px;
}



/*參考：https://codepen.io/pavelvaravko/pen/qjojOr*/

/* select starting stylings ------------------------------*/
.select {
    /*font-family: 'Roboto','Helvetica','Arial',sans-serif;*/
    position: relative;
    width: 350px;
}

.select-text {
    position: absolute;
    font-family: inherit;
    background-color: transparent;
    width: 350px;
    padding: 10px 10px 10px 0;
    font-size: 18px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0, 0.12);
    top: 14px;
}

    /* Remove focus */
    .select-text:focus {
        outline: none;
        border-bottom: 1px solid rgba(0,0,0, 0);
    }

/* Use custom arrow */
.select .select-text {   
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.select .select-text::-ms-expand {
    display: none;
}
.select:after {
    position: absolute;
    top: 26px;
    right: 10px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}


/* LABEL ======================================= */
.select-label {
    color: rgba(0,0,0, 0.26);
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 22px !important;
    transition: 0.2s ease all;
    font-size: 1.1em !important;
    color: rgba(0, 0, 0, 0.54) !important;
}

/* active state */
.select-text:focus ~ .select-label {
    top: 14px !important;
    font-size: 14px !important;
    color: #ff5252 !important;
    font-weight: 500 !important;
}

.select-text:valid ~ .select-label {
    top: 14px !important;
    font-size: 14px !important;
    color: rgba(0, 0, 0, 0.54) !important;
    font-weight: 500 !important;
}

#btn_change_list {
    color: white;
    background: #d74b00;
    padding: 5px 20px;
    border-radius: 7px;
    font-size: 1.4rem;
    font-weight: normal;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

div.page-system-setting .setting-field > span {
    position: absolute;
    left: 610px;
    top: 0;
    white-space: nowrap;
}

.modal-dialog .modal-content .modal-body .maintain-table td span.required {
    margin-top: 5px;
    /*margin-left: 3px;*/
}

#btnAppend {
    background: brown;
    color: white;
    height: 30px;
    border-radius: 7px;
    padding: 5px 20px;
    font-size: 14px;
    position: absolute;
    right: 50px;
    bottom: 80px;
}

#divAttachedFiles 
{
    display: none;
}

    #divAttachedFiles .theAttached {
        width: 500px;
        background: #eeeeee;
        color: black;
        height: 40px;
        margin: 10px;
        padding: 5px 20px;
        line-height: 50px;
        font-size: 20px;
        position: relative;
    }

    #divAttachedFiles button {
        position: absolute;
        right: 10px;
        top: 18px;
        cursor: pointer;
        width: 40px;
        text-align: center;
        opacity: 1;
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        background: transparent;
        line-height: normal;
    }

.profile-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid gray;
    margin-top: 20px;
}

.tabs-content .tabs-panel {
    min-height: 500px;
}

#div_message_group_area #txt_message_title {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
    padding-left: 10px;
    margin-top: 10px;
}

#div_message_group_area p:nth-child(2) {
    padding-right: 12px;
}

.modal-dialog-fullscreen {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.modal-content-fullscreen {
    height: auto;
    min-height: 100%;
    border-radius: 0;
}

.modal-dialog-fullscreen .modal-content .modal-body {
    padding: 0 !important;
    display: flex;
}

.maintain-table .div-mail-to-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
}

    .maintain-table .div-mail-to-wrapper #divMailTo {
        width: 600px;
        display: table-cell;
        height: 30px;
        background: #ebebeb;
        border-radius: 3px;
        vertical-align: middle;
        padding: 5px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

.div-mail-to-wrapper #btnAdd {
    position: absolute;
    top: -4px;
    right: 8px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.maintain-table th {
    height: 30px;
    padding: 5px;
    width: 100px;
    vertical-align: middle;
}

.maintain-table td {
    height: 42px;
    vertical-align: middle;
}

    .maintain-table td #txtSubject {
        width: 98%;
        height: 30px;
        border-radius: 3px;
        border: 1px solid lightgray;
        font-size: 16px;
        padding-left: 10px;
    }

.page-manage .required-text {
    margin-bottom: 5px;
}

.maintain-button {
    text-align: center;
    margin-top: 20px;
}

.maintain-table #btnInternalUser, .maintain-table #btnPartner {
    margin: 0 auto;
    padding: 15px 40px;
    background: #d74b00;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: 16px;
}

.content .content-wrapper {
    margin: 0 auto;
    width: 60%;
    margin-top: 20px;
}

.maintain-table #btnAddUser {
    margin: 0 auto;
    padding: 5px 20px;
    background: lightblue;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: 16px;
}

.maintain-button #btnClear {
    padding: 5px 20px;
    background: lightgray;
    border-radius: 50px;
    color: white;
    text-align: center;
    font-size: 16px;
    position: absolute;
    left: 54px;
    bottom: 36px;
}

.maintain-table .cssJoinedUser {
    height: 40px;
    border: 1px solid gray;
    border-radius: 5px;
    display: block;
    vertical-align: middle;
    padding: 0 10px;
    width: 410px;
    line-height: 40px;
    margin-bottom: 5px;
    position: relative;
}

    .maintain-table .cssJoinedUser .cssRemoveUser {
        height: 36px;
        border: 1px solid gray;
        border-radius: 5px;
        vertical-align: middle;
        padding: 0 3px;
        width: 36px;
        line-height: 35px;
        position: absolute;
        right: 2px;
        top: 2px;
    }

#T4U-Table td[data-title='Question'] div {
    overflow: auto;
    min-height: 70px;
}

#T4U-Table td[data-title='Question'] img {
    max-width: 230px;
}

#T4U-Table td[data-title='Question'] video {
    max-width: 230px;
}

.forum-box .fa-check::before, .forum-box .fa-gear::before, .forum-box .fa-cog::before {
    position: absolute;
    left: 18px;
}

div.mce-edit-area {
    overflow: auto;
}

div.new-folder-div {
    padding-left: 53px;

}
div.new-folder-button button {
    color: white;
    background: #b63f00;
    margin-top: 5px;
    padding: 5px;
    width: 60px;
}

#ViewModal {
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: hidden;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.forum-rendered-content ol, #secContent ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.forum-rendered-content li, #secContent li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.forum-rendered-content h1, #secContent h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.forum-rendered-content h2, #secContent h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.forum-rendered-content h3, #secContent h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.forum-rendered-content h4, #secContent h4 {
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.forum-rendered-content h5, #secContent h5 {
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.forum-rendered-content h6, #secContent h6 {
    display: block;
    font-size: 0.67em;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.forum-rendered-content sup, #secContent sup {
    vertical-align: super;
    font-size: smaller;
}

.forum-rendered-content sub, #secContent sub {
    vertical-align: sub;
    font-size: smaller;
}

.forum-rendered-content code, #secContent code {
    font-family: monospace;
}

.forum-rendered-content p, #secContent p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

.forum-rendered-content blockquote, #secContent blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
}

.forum-rendered-content div, #secContent div {
    display: block;
}

.forum-rendered-content pre, #secContent pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

.forum-rendered-content ul, #secContent ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.page-eLibrary .content .left-menu-content ul .left-menu-item.files {
    background: url(/Content/image/eLibrary/ic_files.png) 13px center no-repeat;
}

.page-eLibrary .content .left-menu-content ul .left-menu-item.my-share {
    background: url(/Content/image/eLibrary/ic_myshare.png) 15px center no-repeat;
}

.page-eLibrary .content .left-menu-content ul .left-menu-item.share-records {
    background: url(/Content/image/eLibrary/ic_share_records.png) 15px center no-repeat;
}

.page-eLibrary .content .left-menu-content ul .left-menu-item.download-records {
    background: url(/Content/image/eLibrary/ic_download_records.png) 15px center no-repeat;
}

.page-eLibrary .content .left-menu-content ul .left-menu-item.recycle-bin {
    background: url(/Content/image/eLibrary/ic_recycle_bin.png) 15px center no-repeat;
}

.page-eLibrary .content .left-menu-content ul .left-menu-item.system-setting {
    background: url(/Content/image/eLibrary/ic_system_setting.png) 15px center no-repeat;
}

#tbQuestions img {
    max-width: 650px;
}

.multiselect {
    border: 1px solid #dadada;
    padding: 5px;
    border-radius: 3px;
    height: 18px;
    overflow: hidden;
    background: #fff;
    position: relative;
    width: 250px;
}

    .multiselect.active {
        height: auto;
        overflow: visible;
    }

    .multiselect button {
        background: none;
        width: 100%;
        position: relative;
        padding: 0;
        text-align: left;
        font-weight: 400;
        margin-bottom: 10px;
        margin-left: 4px;
    }

        .multiselect button:after {
            content: '';
            position: absolute;
            top: 5px;
            right: 5px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 6px 3px 0 3px;
            border-color: #000333 transparent transparent transparent;
        }

    .multiselect .select-list {
        position: absolute;
        background: #fff;
        display: none;
        width: calc(100% - 10px);
        left: -1px;
        padding: 5px;
        border: 1px solid #dadada;
        border-top: none;
    }

    .multiselect.active .select-list {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        height: 150px;
        z-index: 500;
    }

    .multiselect .select-list label:last-child {
        margin-bottom: 0;
    }

    .multiselect .select-list label {
        font-size: 1.4rem;
        display: block;
        width: 100%;
        margin-bottom: 10px;
        position: relative;
        padding-left: 23px;
        height: 18px;
        white-space: nowrap;
    }

        .multiselect .select-list label input[type=checkbox] {
            transform: scale(1.2);
            top: -2.65px !important;
            position: absolute !important;
            left: 1px;
        }

.custom-alert {
    background: #fafafa;
    width: 400px;
    position: fixed;
    top: 0px;
    z-index: -1;
    font-size: 16px;
    opacity: 0;
    min-height: 200px;
    left: 50%;
    top: 10%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: scale(1.3) translateX(-50%);
    transform: scale(1.3) translateX(-50%);
    border-radius: 10px;
    visibility: hidden;
}

    .custom-alert.show {
        opacity: 1;
        visibility: visible;
        position: absolute;
        z-index: 100000002;
        -webkit-transform: scale(1) translateX(-50%);
        transform: scale(1) translateX(-50%);
    }

        .custom-alert.show ~ .custom-alert-overlay {
            display: block;
        }

.custom-alert-overlay {
    background: rgba(40, 40, 40, 0.95);
    width: 100%;
    height: 100vh;
    z-index: 10000000;
    position: fixed;
    top: 0;
    display: none;
}

.custom-alert button {
    color: white;
    background: #d74b00;
    padding: 5px 20px;
    border-radius: 7px;
    font-size: 1em;
    font-weight: normal;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.custom-alert .custom-action {
    width: 100%;
    position: absolute;
    bottom: 20px;
    text-align: center;
}


.custom-alert-body {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 400px;
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    padding-top: 20px;
}

    .custom-alert-body .divider {
        margin: 0 !important;
        padding: 0 !important;
    }

.custom-alert-title {
    font-family: Hind, sans-serif;
    color: #d74b00;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 10px;
}

.custom-toast {
    background: #666;
    height: 45px;
    min-width: 200px;
    position: fixed;
    border-left: 5px solid #d74b00;
    z-index: 200;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    opacity: 0;
    margin-left: -100px;
    display: none;
    bottom: 100px;
    right: 50px;
}

    .custom-toast.show {
        opacity: 1;
        display: block;
    }

.custom-toast-content {
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding: 0 18px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .custom-toast-content p {
        font-size: 14px;
        display: block;
        margin-bottom: 0;
    }

    .custom-toast-content .close {
        display: block;
        color: white;
        opacity: 1;
        font-weight: lighter;
        font-size: 2.5rem;
    }

div.ui-dialog {
    top: 120px !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none !important;
    text-align: center;
}

.ui-dialog-buttonset button {
    color: white;
    background: #d74b00;
    padding: 5px 20px;
    border-radius: 7px;
    font-size: 1em;
    font-weight: normal;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.ui-widget-header {
    border: 0 !important;
    background: black !important;
}

.mobile-action {
    display:none;
    margin-bottom:15px;
    text-align:right;
 }
.mobile-action.active{
    display:block;
}
.forum-box .fa-check::before, .forum-box .fa-gear::before, .forum-box .fa-cog::before {   
    left: calc(50% - 6px);
}
@media (max-width: 1023px) {
    .page-message .message-container .message-main{
        display:block;
        padding-bottom:70px;
    }
    .page-message .message-container .message-main .message-list {
        width: 100%;
    }
    .page-message .message-container .message-main .message-list-content .message-box {
        border-left: 3px solid #fff;
    }
    .page-message .message-container .message-main .message-list-content .message-box {
        width:calc(100% - 42px);
    }
    .page-message .message-container .message-main .message-list-content .message-box .message-info {
        width: calc(100% - 30px);
    }
    .page-message .message-container .message-main .message-detail {
        display: none !important;
        width: 100%;
    }    
    .page-message .message-container .message-main .message-detail.active {
        display: block !important;
    }
    .page-message .message-container .message-main .message-detail-button {
        text-align: center;
        margin: 30px 0px;
    }
    .page-message .message-container .message-main .message-detail-button button{
        min-width:120px;
    }
    .page-message .message-container .message-main .message-list-content .message-box .message-info .message-content {
        width: 100%;
    }    
    .page-message .message-container .message-main .message-detail .message-reply-area .reply-buttons{
        text-align:center;
    }
    .page-message .message-container .message-main .message-detail .message-reply-area .reply-buttons button {
        padding: 9px 20px;
        margin: 20px 10px;
    }
        .page-message .message-container .message-main .message-detail .message-group-area .message-group .send-time {
            right: 20px;
            width: 70px;
        }
        .page-message .message-container .message-main .message-detail .message-group-area .message-group .attach {
            position: absolute;
            color: #4e4b48;
            top: 26px;
            right: 93px;
        }
    .forum-layout-ls {
        padding-bottom: 80px;
    }
}
@media all and (max-width: 1023px) {
    .custom-popup-content .login-form .form-input input
    {
        width: 100%;
    }

    .custom-popup-content .login-form .form-input label
    {
        width: 100%;
    }

    .custom-popup-content .login-form .form-input.captcha img {
        margin: 5px -5px -4px 0 !important;
    }

    .custom-popup-content .login-form .form-tool {
        margin-top: 39px !important;
    }

    .custom-popup-content .login-form .form-tool .tool-link a {
        display: inline-block !important;
        margin-right: 5px;
    }

    .custom-popup .close
    {
        top: 5px !important;
        right: 5px !important;
    }

    .page-portal .profile .tool.edit-profile {
        top: 161px !important;
        right: 50px;
        left: auto;
    }

    .browse-details
    {
        overflow:auto;
    }

    .page-forum .content .forum-list .tabs-nav li a
    {
        padding: 0 15px;;
    }

    #ulTabs {
        margin-top: 70px;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr th, .modal-dialog .modal-content .modal-body .maintain-table tr td
    {
        display: block;
        width: 100%;
        text-align: left;
        height: 100%;
    }

    #tbQuestion tr td, #tbQuestion tr th, #tbQuestions tr th, #tbQuestions tr td {
        display: table-cell;
        word-break: break-word;
    }

    .modal-dialog {
        min-width: initial !important;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr td label {
        white-space: normal !important;
        float: initial;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=text], .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=password], .modal-dialog .modal-content .modal-body .maintain-table tr td input[type=number]
    {
        width: 92% !important;
    }

    .div-share{
        display: none;
    }

    .tool-bar-dropdown.sort, .tool-bar-dropdown.grid {
        display: none !important;
    }

    .page-eLibrary .content .tool-bar-dropdown.selected
    {
        right: 30px !important; 
    }

    .page-eLibrary .content .tool-bar .btn-group {
        margin-left: 20px !important;
    }

    .page-eLibrary .content .right-area .tool-bar .mobile-menu-icon
    {
        left: 0 !important;
    }

    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table
    {
        width: 1024px !important;
    }

    .page-portal .news .leftBox {
        width: 100% !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        border-right: 0 !important;
    }

    .page-portal .news .rightBox
    {
        display: none;
    }
    .page-portal .news .inner:before
    {
        display: none;
    }

    .page-portal .news .classBox
    {
        margin-bottom: 40px !important;
    }

    .page-portal .news ul.newsList li .Txt h3
    {
        padding-top: 5px;
    }

    /*
    .modal-dialog .modal-content .modal-body .maintain-table tr td label
    {
        display: initial !important;
    }
    */

    #btnAppend {
        position: initial !important;
        margin-left: 30px;
        margin-top: 15px;
    }

    .multiselect label
    {
        display: block !important;
    }

    .modal-dialog .modal-content .modal-body
    {
        padding: 15px !important;
    }

    .page-materials .content .materials-list, .page-examination .content .materials-list
    {
        overflow: auto;
    }

    .page-examination .content .materials-list table {
        table-layout: fixed;
    }

    .page-portal .news-detail img{
        width: 100%;
    }
    .forum-social-actions-wrapper {
        width: 100%;
        margin-top: 20px;
        text-align: right;
    }
    .forum-content .forum-thread-post footer {
        padding:15px 0;
    }
    .forum-content .forum-thread-post footer .two-col .forum-actions {
        margin-bottom: 20px;
    }
    .forum-content .forum-thread-post footer .two-col .item:last-child ul li {
     margin-right:10px;}

    .header-search-bar input{
        width: 100%;
    }

    .page-search .tabs-wrapper .tab-tool-button {
        bottom: -36px;
    }

    /*
    .modal-dialog .modal-content .modal-body .maintain-table tr th, .modal-dialog .modal-content .modal-body .maintain-table tr td
    {
        width: 80% !important;
    }
    */

    .cssDifficulty label {
        float: left !important;
    }

    .multiselect
    {
        width: 90% !important;
    }

    .question-group-box {
        padding: 10px 3px 10px 15px !important;
    }

    #T4U-Table tbody tr td div
    {
        max-width: 100%;
        word-break: break-word;
    }

    #tbMaterials tr th, #tbMaterials tr td {
        display: table-cell;
        word-break: break-all;
        white-space: pre-wrap;
    }

    .chart-wrapper, .chart-wrapper canvas {
        width: 100% !important;
    }

    .simple-popup-content {
        width: auto;
        height: auto;
        background: rgb(255, 255, 255);
        max-height: 100%;
        left: 0;
        transform: initial;
        top: 0;
        min-width: initial !important;
    }

    .simple-popup-content video {
        width: 100% !important;
    }

    .files-message .message-content .message-action button
    {
        margin-top: 5px;
    }

    .page-eLibrary .content .right-area .file-list-wrapper .file-list-table.system-config
    {
        width: 100% !important;
    }

    .page-portal .profile .tool.mail-to {
        top: 157px !important;
        left: 166px;
    }

    .page-message .message-container .message-main .message-detail-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-message .message-container .message-main .message-detail .message-group-area .message-group.open .message-group-content {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 20px;
    }

    #sortable li
    {
        min-width: 250px !important;
    }

    .modal-header h3 {
        width: calc(100% - 20px);
    }

    .page-portal .portal-lists .table
    {
        max-width: 90% !important;
    }

    .page-portal .portal-lists .form-control
    {
        width: 80% !important;
    }

    #tb_data thead th div, #tb_data tbody td div, #tb_download thead th div, #tb_download tbody td div {
        width: 100% !important;
    }

    .portal-lists .col-xs-12 {
        max-width: 90% !important;
    }

    /*
    .custom-checkbox, .check-handler {
        display: none !important;
    }
    */

    .cssNote br 
    {
        display:block !important;
    }

    #btnPreview
    {
        display: none;
    }

    .modal-dialog .modal-content .modal-body .maintain-table tr td select {
        width: 100% !important;
        min-width: initial !important;
    }

    .page-message .message-container .message-main .message-detail .message-group-area .message-group
    {
        padding: 24px 20px !important;
    }

    #divAttachedFiles .theAttached
    {
        width: auto !important;
    }

    #secContent img
    {
        width: 90%;
    }

    .forum-thread-post section
    {
        padding-right: 10px !important;
    }

    #tbQuestions thead tr th:first-child,
    #tbQuestions thead tr th:nth-child(3),
    #tbQuestions tbody tr td:first-child,
    #tbQuestions tbody tr td:nth-child(3) {
        width: 40px !important;
    }

    #sort, #sortbycategory {
        display: none;
    }

    .maintain-table .div-mail-to-wrapper #divMailTo {
        width: calc(100% - 34px);
        display: inline-table;
        min-height: 40px;
        word-break: break-word;
    }

    .div-mail-to-wrapper #btnAdd
    {
        right:0;
    }

    .modal-dialog .modal-content .modal-body .maintain-button, #divReview.maintain-button
    {
        position: relative;
    }

    .maintain-button #btnClear {
        left: 24px !important;
        bottom: 1px !important;
    }

    .cssJoinedUser .cssJoined {
        width: 80% !important;
        word-break: break-all !important;
        display: block;
    }

    .maintain-table .cssJoinedUser
    {
        height: auto !important;
    }

    .page .banner {
        height: auto !important;
    }
}

.cssRule1 .remove-button {
    position: absolute !important;
    transform: translateY(-50%) !important;
    left: auto !important;
    top: 122px;
}

.ui-dialog.ui-widget {
    z-index: 20000 !important;
}

.ui-widget-overlay {
    z-index: 10000 !important;
}

.bg-image {
    width: 100%;
    -o-object-fit: fill;
    object-fit: fill;
    position: relative;
    /*bottom: -4px;*/
    height: 315px;
    cursor: pointer;
    background-position: center center;
    background-size: cover;
}

.ui-dialog-titlebar-close {
    visibility: hidden;
}

.ui-widget {
    font-family: Microsoft JhengHei !important;
}

.ui-dialog-title{
    font-size: 15.4px;
}

#alertDialog{
    font-size: 15.4px;
}

.ui-dialog-buttonset button {
    color: white !important;
    background: #d74b00 !important;
    padding: 5px 20px;
    border-radius: 7px;
    font-size: 1em !important;
    font-weight: normal !important;
    -webkit-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
    -webkit-appearance: media-sliderthumb !important;
}

.ui-button-text-only .ui-button-text {
    padding: 0 !important;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 6.16px 15.4px !important;
}

.ui-button-text
{
    font-size: 15.4px;
}

.form-group.input-material {
  position: relative;
}
  .form-group.input-material label {
    color: #b1bbc4;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 22px;
    transition: 0.1s ease all;
    -moz-transition: 0.1s ease all;
    -webkit-transition: 0.1s ease all; }
  .form-group.input-material .form-control {
    border: none;
    border-bottom: 2px solid #ced4da;
    border-radius: 0px;
    background: transparent;
    padding-left: 5px;
    box-shadow: none;
    /* active state */
    /* invalid state */ }
    .form-group.input-material .form-control:focus, .form-group.input-material .form-control[value]:not([value=""]) {
      border-bottom-color: #007bff;
      color: #000; }
    .form-group.input-material .form-control:focus ~ label{
      top: 14px;
      font-size: 14px;
      color: #ff5252;
      font-weight: 500; }
        .form-group.input-material .form-control[value]:not([value=""]) ~ label {
            top: 14px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.54);
            font-weight: 500;
        }
    .form-group.input-material .form-control:focus.invalid, .form-group.input-material .form-control.invalid, .form-group.input-material .form-control:focus.parsley-error, .form-group.input-material .form-control[value]:not([value=""]).parsley-error {
      border-bottom-color: #dc3545; }
    .form-group.input-material .form-control:focus.invalid ~ label, .form-group.input-material .form-control.invalid ~ label, .form-group.input-material .form-control:focus.parsley-error ~ label, .form-group.input-material .form-control[value]:not([value=""]).parsley-error ~ label {
      color: #dc3545; }
  .form-group.input-material .parsley-errors-list {
    color: #dc3545;
    list-style: none;
    font-size: 0.7em;
    padding-left: 5px; }