/*********************************** Google Fonts *****************@*@******************/
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('res/fonts/opensans_cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('res/fonts/opensans_cyrillic.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('res/fonts/opensans_latin_ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('res/fonts/opensans_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/*********************************** General *****************@*@******************/

/* Added by Bryan */
.listing-title.active{
	color: green;
	font-weight: bold !important;
	font-size: 19px;
}
.listing-title.draft{
	color: rgb(202, 3, 3);
	font-weight: bold !important;
	font-size: 19px;
}
/* -------------- */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,
figure,
main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration:none;
}

a:active,
a:hover {
  outline-width: 0;
  text-decoration:none;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@media print {
  *,
  *::before,
  *::after,
  p::first-letter,
  div::first-letter,
  blockquote::first-letter,
  li::first-letter,
  p::first-line,
  div::first-line,
  blockquote::first-line,
  li::first-line {
    text-shadow: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

@-ms-viewport {
  width: device-width;
}

html {
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

body {
	font-family: Arial,Helvetica;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #292b2c;
	background-color: #eee;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  cursor: help;
}
ul{
	list-style:none;
}
ol,
ul,
dl {
  margin:0;
  padding:0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

a {
  color: #333;
}

a:focus, a:hover {
  color: #333;
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
}

/* #file_image{
	max-width: 500px;
	width:100%;
} */

a,
area,
button,
input,
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

table {
  border-collapse: collapse;
  background-color: transparent;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #636c72;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: left;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}

input,
button,
select,
textarea {
	line-height: inherit;
	font-size:1em;
	font-family:inherit;
	border:1px solid #ccc;
	padding:8px;
	background:transparent;
	border-radius:2px;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
}

output {
  display: inline-block;
}

[hidden],.displayNone {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

/*for minor styling only.*/
.text-bold{
	font-weight:bold;
}
.text-underline{
	text-decoration:underline;
}
.text-red{
	color:#c02c2c;
}
.text-blue{
	color:#1565C0;
}

.file_download{
	color:blue;
}

.file_download:hover{
	color: darkblue;
	text-decoration: underline;
}

/*********************************** Glyphicons ******************@*@*****************/
/*obselete. Use Font Awesome. Refer to fonticon_fa_all.css.*/

/*********************************** Icon ******************@*@*****************/
.icon-helpguide:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f059";
}
.icon-tickcross-0:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
	color:#c02c2c;
}
.icon-tickcross-1:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00c";
	color:#7CB342;
}

/*********************************** button ****************@*@*******************/
.btn-group{
	flex-grow:1;
	margin-left:-5px;/*btn_offset*/
}
.btn-group,
.btn-group *{
	/* margin-left:15px;
	margin-right:15px; */
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row wrap;
	align-items:center;
	justify-content:flex-end;
}
.btn{
	font-size:1rem;
	text-decoration:none;
	text-align:center;
	border-radius:2px;
	background-color:#fafafa;
	border:0;
	cursor:pointer;
	/* padding:3px 7px; */
	padding:10px 30px;
	color:#555;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	margin-top:5px;
	/* width:100%; */
	width:auto;
	margin-left:5px;/*btn_offset margin_left*/
	/* flex-grow:1; */
	/* justify-content:center; */
}
.btn-align-right{
	justify-content:flex-end;
}
.btn:hover{
	box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 3px 3px rgba(0,0,0,0.22);
}
a.btn{
	text-decoration:none;
}
/*overwrite .btn comestic*/
.btn-dropdown{
	padding:0;
	box-shadow: none;
}
.btn-dropdown>.btn{
	margin:0;
	width:100%;
}

/*btn search textbox*/
.btn-search-textbox{
	padding:0;
	align-items:stretch;
	flex-wrap:nowrap;
}
.btn-search-textbox input{
	border:0;
	/* padding:3px 7px; */
	padding:10px 30px;
	flex-grow:1;
	width: 100% !important;
}
.btn-search-textbox span{
	padding:0 5px;
}


/*overwrite by specific location.*/
.form-section-right .btn-group{
}
.page-header-button-left .btn.search-textbox{
	flex-grow:1;
}
.page-header-button-left .btn-search-select{
	padding-top:2px;
	padding-bottom:2px;
}
.page-header-button-left .btn-group{
	justify-content:flex-start;
}
.page-header-button-right .btn-group{
}
/*
.page-header-button-right .btn-dropdown{
	flex-grow:0;
}
.adirow [class*="adicol"] .btn-group{
	margin-bottom:22px;
	margin-left:30px;
}
.adirow .form-section-right .btn-group{
	flex-grow:1;
	justify-content:flex-end;
	margin-left:0;
	margin-bottom:0;
}
*/



/*responsive*/
@media all and (min-width: 384px) {
	.btn-group{
		margin-left:-5px;/*btn_offset*/
		margin-top:-5px;/*btn_offset*/
	}
}
@media all and (min-width: 768px) {
	.btn-group .btn{
		flex-grow:0;
	}
	.page-header-button-left .btn-search-textbox{
		flex-grow:1;
	}
}

.num-count{
	background-color: rgb(56, 209, 98, 0.4);
    padding: 3px 7px;
    border: 0;
    outline: 0;
    border-radius: 50%;
	font-size: 10px;
	font-weight: bold;
}

/*button icon default*/
.btn-more:after,
.btn-info:before,
.btn-next-level:before,
.btn-back:before,
.btn-edit:before,
.btn-activate:before,
.btn-view:before,
.btn-view:before,
.btn-add:before,
.btn-delete:before,
.btn-submit:before,
.btn-cancel:before,
.btn-close:before,
.btn-save:before,
.btn-search:before,
.btn-search-textbox-search:before,
.btn-search-textbox-reset:before{
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 400;
	src: url("res/fonticons/fa_regular_400.eot");
	src: url("res/fonticons/fa_regular_400.eot?#iefix") format("embedded-opentype"), url("res/fonticons/fa_regular_400.woff2") format("woff2"), url("res/fonticons/fa_regular_400.woff") format("woff"), url("res/fonticons/fa_regular_400.ttf") format("truetype"), url("res/fonticons/fa_regular_400.svg#fontawesome") format("svg");
	padding-right:10px;
	vertical-align:initial;
}

.btn-search-textbox-search,
.btn-search-textbox-reset{
	padding-right: 13px !important;
	padding-left: 13px !important;
}

/*icon after text*/
.btn-more:after{
	padding-right:0;
	padding-left:5px;
}
/*button icon*/
.btn-delete-file{
	padding: 3px;
	background-color: transparent;
	color: red;
}

.btn-delete-file:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
}

.btn-info:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f05a";
}

.btn-next-level:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f3be";
}

.btn-export-excel:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f1c3";
	padding-right:10px;
}

.btn-more:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f078";
}
.btn-back:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0d9";
}
.btn-edit:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f304";
}
.btn-activate:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f4fc";
}
.btn-view:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f06e";
}
.btn-add:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f067";
}
.btn-delete:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f2ed";
}
.btn-submit:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00c";
}
.btn-cancel:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
}
.btn-close:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
}
.btn-save:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f019";
}
.btn-search:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f002";
}
.btn-search-textbox-search:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f002";
	padding:0;
}
.btn-search-textbox-reset:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
	padding:0;
}

/*Color*/
.btn-cancel,
.btn-close,
.btn-back{
	color:#fff;
	background-color:#c02c2c;
}
.btn-search-textbox-reset{
	color:#c02c2c;
}
.btn-search-textbox-search:hover,
.btn-search-textbox-reset:hover{
	background:#ffff99;
}

/*********************************** layout ****************@*@*******************/
.layout{
	padding:0;
	margin:0;
	box-sizing:border-box;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row wrap;
}
.layout,.layouthead,.layoutfoot,.layoutbody,.layoutcontent,.layoutmenu{
	box-sizing:border-box;
}
.layouthead,.layoutfoot{
	width:100%;
}
.layoutbody{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row wrap;
	width:100%;
}
.layoutcontent{
	width:100%;
	flex-grow:1;
	margin-bottom:50px;
}
.layoutmenu{
	width:100%;
	/* background-color:#2A3F54; */
	/* padding-bottom:50px; */
	min-height: 719px !important;
}
.layoutmenu-hide{
	display:none;
}
.layoutmenu-show{
	display:block;
}
@media all and (min-width: 992px) {
	.layoutbody{
		flex-flow: row nowrap;
	}
	.layoutmenu{
		width:250px;
		display:block !important;/*Tag:menu,hide-and-show.*/
	}
	.layoutcontent{
		width:100%;/*IE11 fix.*/
		display:block !important;
	}
}
#overlay{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:2;
	overflow:hidden;
}
#overlay.tinted{
	background-color:rgba(0,0,0,0.4);
}

/*********************************** banner ******************@*@*****************/
.banner,.banner-row,.banner-left,.banner-center,.banner-right,.banner-button,.banner-button a,.banner-button a span{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row nowrap;
}
.banner{
	
	/* box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
	font-size:1.3em;
}
.banner-row{
	width:100%;
	
}
.banner-center{
	align-items:center;
	padding-right:15px;
	padding-bottom:5px;
}
.banner-left{
	display:none;
}
.banner-right{
	flex-grow:1;
	align-items:center;
	justify-content:flex-end;
	padding-right:15px;
	padding-bottom:5px;
}
.banner-icon, .banner-name, .banner-name-short, .banner-button{
	margin-left:15px;
	margin-top:5px;
}
.banner-left .banner-name, .banner-left .banner-name-short, .banner-left .banner-icon{
	margin-bottom:5px;
	padding:0 10px !important;
	font-size: 20px !important;
}
.banner-button{
	align-items:strech;
}
.banner-button>a{
	color:inherit;
	text-decoration:none;
}
.banner-button>a span{
	align-items:center;
}
.banner-left .banner-button>a{
	margin-right:15px;
}
.banner-right .banner-button>a{
	margin-left:15px;
}
.banner-name-short{
	margin-left:5px;
}
.banner-name{
	display:none;
	margin-left:5px;
}
.banner-icon{
	background-image:url('res/banner_icon.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 70px;
	height: 70px;
	background-position: center;
}
.banner-badge,.banner-badge-alert{
	position:absolute;
	margin-top:10px;
	font-size:0.7em;
	border-radius:2px;
	padding:0 3px;
	background:#dc143c;
	font-weight:bold;
	text-align:center;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.banner-badge{
	margin-left:-10px;
}
.banner-badge-alert{
	margin-left:-1px;
}
.banner-badge-ale2rt{
	font-size:0.7em;
}
.banner-badge-alert:after{
	content:'!';
}
.banner.banner-intro .banner-left{
	width:100%;
	display:flex;
}
@media all and (min-width: 992px) {
	.banner-left{
		width:250px;/*follow menu width*/
		display:flex;
		align-items:left;
	}
	.banner-name{
		display:inherit;
	}
	.banner-name-short{
		display:none;
	}
	.banner-center{
		align-items:center;
		padding-right:15px;
		padding-bottom:5px;
		display:none;
	}
}

/*********************************** footer ****************@*@*******************/
.footer{
	text-align:center;
	font-size:0.8em;
	color:#555;
	margin-top:15px;
	margin-bottom:75px;/*tag:.floatbtn*/
	margin-left:15px;
	margin-right:15px;
}


/*********************************** dropdown-menu ****************@*@*******************/
.btn-dropdown{
	position:relative;
	display:inline-block;
}
.dropdown-menu{
	display: inline-block;
	border-radius: 2px;
	background:#fff;
	padding:10px 0;
	box-sizing:border-box;
	margin-top:0px;
	color:#333;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	font-size:1rem;
	text-align:left;
	
	position:absolute;
	right:0;/*default position align right.*/
	min-width:250px;
	z-index:3;/*pverlay is z-index 2*/
}

.dropdown-item{
	display:block;
	text-decoration:none;
	padding:10px 25px 10px 25px;
}
.dropdown-item:hover{
	background:#eee;
}
.dropdown-divider{
	border-bottom:1px solid #ddd;
	margin-top:10px;
	margin-bottom:10px;
}
.dropdown-badge,.dropdown-badge-alert{
	text-align:center;
	padding:4px 5px;
	background:#d32f2f;
	color:#fff;
	margin-left:15px;
	font-size:0.75em;
	font-weight:bold;
	border-radius:2px;
}
.dropdown-badge-alert:after{
	content:'!';
}
.dropdown-badge-alert{
}
/*********************************** vmenu ****************@*@*******************/
.vmenu-wrapper{
	padding:0;
}
.vmenu-header{
	font-size:1.5em;
	padding:15px;
	/*
	color:#fff;
	background:#333;
	*/
}
.vmenu-collapsible{
	float:right;
	margin-left:15px;
}
.vmenu ul li{
}
.vmenu ul li a{
	padding:10px 15px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row nowrap;
	cursor:pointer;
}
.vmenu ul li li a{
	padding-left:30px;
	align-items:center;
}
.vmenu ul li a .vmenu-label{
	flex-grow:1;
}
.vmenu ul li.selected a{
	padding-left:10px;
}
.vmenu ul li li.selected a{
	padding-left:25px;
}
.vmenu .collapse ul{
	display:none;
}
.vmenu .expand ul{
	display:inherit;
}
.vmenu .collapse .vmenu-collapsible:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f067";
}
.vmenu .expand .vmenu-collapsible:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f068";
}
.vmenu .fa{
	margin-right:5px;
}
@media all and (min-width: 992px) {
	.vmenu-wrapper{
		width:250px;
		/* border-right:1px solid #dddcdc; */
	}
}
/*********************************** module menu ****************@*@*******************/
#dashboard_module .title{
	padding:15px;
	font-size:1.1em;
	border-bottom:1px solid rgba(0,0,0,0.1);
}
#dashboard_module .desc{
	padding:15px;
}
#dashboard_module a.card-wrapper{
	cursor:pointer;
}
#dashboard_module a.card-wrapper:hover{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

/*********************************** breadcrumb ****************@*@*******************/
.breadcrumb{
	margin:0px 5px 0 0px;
	/* font-size:0.9em; */
	color:#0a85c8;
	text-decoration: underline;
}
.breadcrumb:hover{
	color:#066192;
}

.breadcrumb .breadcrumb-item{
}
.breadcrumb .breadcrumb-item a{
	display:block;
	color:#666;
	max-width:50px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-divider{
	padding-right:5px;
}
.breadcrumb .breadcrumb-divider:after{
	content:'/';
}
/*responsive*/
@media all and (min-width: 768px) {
	.breadcrumb .breadcrumb-item a{
		max-width:none;
	}
}
/*********************************** page-header ****************@*@*******************/
.page-header{
	padding:15px 15px 15px 15px;
	font-size:1.5em;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row wrap;
	align-items:end;
}
.page-header-title{
	flex-grow:1;
	width:100%;
	margin-bottom:5px;
}
.page-header-button-left,
.page-header-button-right{
	font-size:1rem;
	flex-grow:1;
	width:100%;
}

@media all and (min-width: 384px) {
	.page-header-button-left{
		margin-bottom:5px;
	}
}
@media all and (min-width: 768px) {
	.page-header-title{
		width:auto2;
	}
	.page-header-button-left{
		flex-grow:1;
		width:auto;
		margin-bottom:0;
	}
	.page-header-button-right{
		flex-grow:1;
		width:auto;
	}
}

/*********************************** grid-flexbox ****************@*@*******************/
.adicontainer{
	display:block;
	box-sizing:border-box;
	padding:0;
	margin:0;
	
}
.adicontainer *{
	box-sizing:border-box;
}
.adirow{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.menu-adirow{
	justify-content: unset !important;
}
.adirow.box-size-unify [class*="adicol"]{
	flex-grow:1;
}
.adirow .box-size-1{
	flex-grow:1 !important;
}
.adirow .box-size-2{
	flex-grow:2 !important;
}
.adirow .box-size-3{
	flex-grow:3 !important;
}
.adirow .box-align-top{
	align-self:flex-start;
}
.adirow .box-align-bottom{
	align-self:flex-end;
}
.adirow .box-align-center{
	align-self:center;
}
.adirow .item-align-top{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
}
.adirow .item-align-bottom{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}
.adirow .item-align-center{
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.adirow.box-align-center{
	justify-content:center;
}

[class*="adicol-"] {
	width:100%;
}
@media all and (min-width: 992px) {
	.adicol-1{width:100%;}
	.adicol-2plus4{width:50%;}
	.adicol-2{width:50%;}
	.adicol-4plus8{width:50%;}
	.adicol-4{width:50%;}
	.adicol-8{width:50%;}
	
}
@media all and (min-width: 1200px) {
	.adicol-1{width:100%;}
	.adicol-2plus4{width:75%;}
	.adicol-2{width:50%;}
	.adicol-4plus8{width:75%;}
	.adicol-4{width:25%;}
	.adicol-8{width:25%;}
	
}

@media all and (min-width: 769px) {
	.adicol-3{width: 33% !important;}
}

@media all and (max-width: 768px) {
	.adicol-3{width: 100% !important;}
}
/*
@media all and (min-width: 1400px) {
	.adicol-1{width:100%;}
	.adicol-2plus4{width:75%;}
	.adicol-2{width:50%;}
	.adicol-4plus8{width:37.5%;}
	.adicol-4{width:25%;}
	.adicol-8{width:12.5%;}
}*/

/*********************************** grid-card ****************@*@*******************/
.card{
	margin-right:15px;
}
.card .card-wrapper{
	margin-bottom:15px;
	margin-left:15px;
}
.card-same-height  .card-wrapper{
}
.card-same-height>.adirow>div,
.card-same-height>.adirow>a{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
}
.card-same-height>.adirow>a{
	text-decoration:none;
}
.card-same-height  .card-wrapper{
	align-items:stretch;
	width:100%;
}
.card .card-wrapper{
	background:#fff;
	border-radius:4px;
	/* border-top:1px solid #e9e9e9;
	border-left:1px solid #dddcdc;
	border-right:1px solid #dddcdc;
	border-bottom:1px solid #c2c2c2; */
	box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.36);
}
.card .card-title{
	margin:15px 15px 0 15px;
	font-size:1.3em;
}
.card .card-content{
	margin:15px 15px 0 15px;
}

.card .card-action,.card .card-action *{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row nowrap;
}
.card .card-action{
	margin-top:15px;
}
.card .card-action-item{
	flex-grow:1;
}
.card .card-action-item .btn{
	box-shadow:none;
	border-radius:none;
	border-top:1px solid #eee;
	border-left:1px solid #ddd;
	transition:all 0.3s cubic-bezier(.25,.8,.25,1);
	padding:7px;
	margin:0;
}
.card .card-action-item:nth-child(1) .btn{
	border-left:none;
}
.card .card-action-item .btn:hover{
	box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 3px 3px rgba(0,0,0,0.22);
	z-index:1;
	border:none;
}
/*********************************** float-button ****************@*@*******************/
.floatbtn{
	position:fixed;
	right:15px;
	bottom:15px;
	z-index:3;
}
.floatbtn-mainicon{
	text-align:center;
	font-size:28px;
	width: 46px;
    height: 46px;
    padding: 8px;
	border-radius: 50%;
	box-shadow: 0 3px 6px rgba(255,255,255,0.16), 0 3px 6px rgba(0,0,0,0.23);
	cursor:pointer;
}
.floatbtn-mainicon::after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	vertical-align:text-bottom;
	content: "\f142";
	margin-left:2px;
}
.floatbtn-menu-vertical{
	position:absolute;
	right:0;
	bottom:46px;
	text-align:right;
	padding-left:15px;
}
.floatbtn-menu-text{
	white-space:nowrap;
}
.floatbtn-menu-vertical a{
	background:#eee;
	border:1px solid #ddd;
	padding:5px 15px;
	display:inline-block;
	margin-bottom:20px;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	border-radius:2px;
	cursor:pointer;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.floatbtn-menu-vertical a:hover{
	background:#eee;
	border:1px solid #eee;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

/*********************************** Input ****************@*@*******************/
.form-frame{
	padding-top:32px;
	padding-right:30px;
}
.form-section,
.form-section-right{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-wrap:wrap;
}
.form-section{
	align-items:flex-end;
	margin-left:30px;
	margin-bottom:32px;
	/*with border bottom*/
	/*
	margin-left:0;
	margin-right:-30px;
	border-bottom:1px solid #ddd;
	padding:0 30px 5px 30px;
	*/
}
.form-section-left{
	width:100%;
	font-size:1.3em;
	padding:0;
}
.form-section-middle{
	width:auto;
	font-size:1.3em;
	margin:auto;
}
.form-section-right{
	width:100%;
	text-align:right;
}
.btn-section{
	margin-bottom:32px;
	margin-left:30px;
}

.input-group{
	margin-bottom:32px;
	margin-left:30px;
}
.input-group textarea,
.input-group select,
.input-group input{
	width:1%;
	border:0;
	flex-grow:1;
}
.input-group input[type="radio"],
.input-group input[type="checkbox"]{
	width:auto;
	margin:0;
	margin-top:5px;
	margin-right:4px;
}
.input-group textarea{
	min-height:100px;
}
.form-frame .input{
	/*
	*/
	background:#fafafa;
	border:1px solid #e1e1e1;
}
.input-group>label{
	padding:8px 0 8px 0;
	margin:0;
	font-size:1.1em;
	color:#444;
}
.input-group.compulsory>label{
	padding-left:12px;
	background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAmElEQVQYV2NkQAL7NTQUQFzHGzcewIQZURRoay8AK7h6NQFFAUgnMxOT/j8mpg0gCaZ//wL+/vt3EWQS435t7QWMjIzxyCbB2P///18ItgKbIpAkyCqIAgUFAUYenvfIpvz/8kXQ8cGDDxAFOjoOjAwM+/8zMBwE8RkZGOz/MzA4Ol65cgCuAOz6K1cOwDQw/P0r4Hj9+gYARC07vp1ndv8AAAAASUVORK5CYII=');
	background-repeat:no-repeat;
	background-position:left 0 top 12px;
}
.input-group .input-tips{
	font-size:0.9em;
	color:#666;
}
.input-group .input-button{
	margin-top:5px;
	font-size:0.9em;
	color:#666;
}
.input-group .input-error{
	font-size:0.9em;
	background-color:#c62828;
	color:#fff;
	padding:4px;
}

/* .error_exist>.input-error{
	background-color: RGBA(255,193,7) !important;
	color: black !important;
	padding: 7px;
	font-size: 16px;
} */

/*flexibox for complex input element.*/
.input-group .input-text,
.input-group .input-text *,
.input-group .input-password,
.input-group .input-password *,
.input-group .input-textarea,
.input-group .input-textarea *,
.input-group .input-file,
.input-group .input-file *,
.input-group .input-select,
.input-group .input-select *,
.input-group .input-email,
.input-group .input-email *,
.input-group .input-checkbox,
.input-group .input-checkbox *,
.input-group .input-radio,
.input-group .input-radio *,
.input-group .input-search,
.input-group .input-search *,
.input-group .input-date,
.input-group .input-date *{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row wrap;
}
/*Options for radio button and checkbox.*/
.input-group .input-option{
	width:100%;
}
.input-group .input-option label{
	flex-flow: row nowrap;
	padding:8px;
	margin:0;
	align-items:start;
	width:100%;
}
.input-group .input-option input{
	max-width:20px;
}
.input-group .input-option-text{
	width:80%;
}

/*Date*/
.input-group input[type="date"]{
	width:1%;
	flex-grow:1;
}
.input-group .input-date{
	flex-wrap: nowrap;
}
.input-group .input-date .input-icon-activate{
	background:#eee;
	border-right:1px solid #ddd;
	cursor:pointer;
}

.input-group .input-date .input-icon-clear{
	background:#eee;
	border-left:1px solid #ddd;
	cursor:pointer;
	align-self:stretch;
}
.input-group .input-date .input-icon-activate:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f073";
	color:#1565C0;
	align-self:center;
	padding:0 8px;
}
.input-group .input-date .input-icon-clear:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
	color:#c02c2c;
	align-self:center;
	padding:0 8px;
}
.input-group .input-dropbox{
	border:0;
}
/*Email*/
.input-group .input-email{
	flex-wrap:nowrap;
}
.input-group .input-email input{
	flex-grow:1;
	width:1%;
}
.input-group .input-email .input-icon{
	background:#eee;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
}
.input-group .input-email .input-icon:before{
	content: "@";
	align-self:center;
	padding:0 8px;
}

/*Search/autocomplete*/
.input-group .input-search,
.input-group .input-autocomplete{
	flex-wrap:nowrap;
}
.input-group .input-search input,
.input-group .input-autocomplete input{
	flex-grow:1;
	width:1%;
}
.input-group .input-search .input-icon,
.input-group .input-autocomplete .input-icon{
	background:#eee;
	border-right:1px solid #ddd;
}
.input-group .input-search .input-icon:before,
.input-group .input-autocomplete .input-icon:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f002";
	align-self:center;
	padding:0 8px;
}
.input-group .input-static{
	border-top:1px solid #7CB342;
	padding-top:8px;
	color:#000;
	/*
	border-top:1px solid #292b2c;
	*/
	/* 
	box-shadow:0 1px 2px rgba(0,0,0,0.24), 0 1px 1px rgba(0,0,0,0.24);
	border-top:1px solid #e9e9e9;
	border-left:1px solid #dddcdc;
	border-right:1px solid #dddcdc;
	border-bottom:1px solid #c2c2c2;
	*/
}

/*Toggle switch*/
/*.main-btn-switch{
	display:flex;
}
.btn-switch{
	font-size:1em;
	position:relative;
	display:inline-block;		
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select none;
	user-select:none;
	border:1px solid #ddd;
	border-radius:1.5em;
}
.btn-switch-radio{
	display:none;
}
.btn-switch-label{
	display:inline-block;	
	padding:6px;
	vertical-align:middle;
	font-size:0.9em;
	line-height:0.8em;
	color:#666;
	cursor:pointer;
	transition:color .2s ease-in-out;
	padding-top:1em;
}
.btn-switch-label + .btn-switch-label{
	padding-right:.75em;
	padding-left:0;
	padding-top:1em;
}
.btn-switch-txt{
	position:relative;
	z-index:2;
	display:inline-block;
	min-width:1.8em;
	opacity:1;
	pointer-events:none;
	transition:opacity .2s ease-in-out;
	left:0.2em;
}
.btn-switch-radio-No:checked ~ .btn-switch-label-Yes .btn-switch-txt,
.btn-switch-radio-Yes:checked ~ .btn-switch-label-No .btn-switch-txt{
	opacity:0;
}
.btn-switch-label:before{ 
	content:"";
	position:absolute;
	z-index:-1;
	top:-1px;
	right:0;
	bottom:0;
	left:0;
	border-radius:1.5em;
}
.btn-switch-radio-Yes:checked ~ .btn-switch-label:after{ 
	background-color:#44D62C;
}
.btn-switch-radio-No:checked ~ .btn-switch-label:after{ 
	background-color:#F93822; 
}
.btn-switch-label-No:after{ 
	content:""; 
	position:absolute;
	z-index:2;
	top:.5em;
	bottom:.5em;
	left:.5em;
	width:2em;
	background-color:#fff;
	border-radius:1em;	
	pointer-events:none;
	box-shadow:0 .1429em .2143em rgba(43,43,43,.2), 0 .3572em .3572em rgba(43,43,43,.1);
	transition:left .2s ease-in-out, background .2s ease-in-out;
}
.btn-switch-radio-Yes:checked ~ .btn-switch-label-No:after{
	left:calc(100% - 2.5em);
}
.btn-switch-radio-No:checked ~ .btn-switch-label-Yes:before,
.btn-switch-radio-Yes:checked ~ .btn-switch-label-No:before{
	z-index:1;
}
.btn-switch-radio-Yes:checked ~ .btn-switch-label-Yes{
	color:#666;
}*/

.input-switch{
	background:none !important;
	border:none !important;
}
.input-switch,
.input-switch-option{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row nowrap;
}
.input-switch-option{
	border:1px solid #e1e1e1;
	border-radius:1.5em;
	align-items:center;
	padding:8px;
	background-color:#fafafa;
	cursor:pointer;
}
.input-switch-oval{
	width:25px;
	height:25px;
	border-radius:1em;
	box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
	transition:left .2s ease-in-out, background .2s ease-in-out;
}
.input-switch-option:hover .input-switch-oval{
	box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 3px 3px rgba(0,0,0,0.22);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.input-switch-yes .input-switch-oval{
	background-color:#44D62C;
}
.input-switch-no .input-switch-oval{
	background-color:#F93822;
}
.input-switch-yes .input-switch-label-no,
.input-switch-no .input-switch-label-yes{
	display:none;
}
.input-switch-yes .input-switch-label-yes,
.input-switch-no .input-switch-label-no{
	display:block;
}
.input-switch .input-switch-label-yes{
	padding:0;
	margin-right:8px;
}
.input-switch .input-switch-label-no{
	padding:0;
	margin-left:8px;
}

/*CKEditor*/
.cke_chrome{
	border:0 !important;
}

.static-text{
	margin-left:30px;
	margin-bottom:32px;
}

/*button inside input-group*/
.input-group .btn{
	margin-top:5px;
	margin-left:5px;
}

/*Responsive Control*/
@media all and (min-width: 384px) {
}
@media all and (min-width: 768px) {
}
@media all and (min-width: 992px) {
	.form-section{
		flex-wrap:nowrap;
		justify-content:space-between;
	}
	.form-section-left{
		width:auto;
	}
	.form-section-middle{
		width:auto;
		margin:auto;
	}
	.form-section-right{
		width:auto;
	}
	
	.input-group select[multiple=""]{
		min-height:100px;
	}
	
	.input-group .input-option{
		width:100%;
	}
	.input-group.column2 .input-option{
		width:50%;
	}
	.input-group.column4 .input-option{
		width:25%;
	}
	
}
@media all and (min-width: 992px) {
	/*Form Horizontal*/
	.form-frame.form-horizontal .input-group{
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;
		flex-flow: row wrap;
		margin-bottom:30px;
	}
	.form-frame.form-horizontal .input-group>label{
		padding-top:5px;/*matching the input box. padding 4px + border 1px.*/
		width:200px;
		justify-content:flex-end;
		text-align:right;
		padding-right:15px;
	}
	.form-frame.form-horizontal .input-group.compulsory>label{
		padding-right:23px; /*15px+8px*/
		background-position:right 8px top 8px;
	}
	.form-frame.form-horizontal .input-group .input{
		width:calc(100% - 200px);
		flex-grow:1;
		align-self:flex-start;
	}
	.form-frame.form-horizontal .input-group .input-tips,
	.form-frame.form-horizontal .input-group .input-error{
		margin-left:200px;
		width:100%;
	}
	.form-frame.form-horizontal .adicol-1{width:100%;}
	.form-frame.form-horizontal .adicol-2{width:100%;}
	.form-frame.form-horizontal .adicol-2plus4{width:100%;}
	.form-frame.form-horizontal .adicol-4plus8{width:100%;}
	.form-frame.form-horizontal .adicol-4{width:100%;}
	.form-frame.form-horizontal .adicol-8{width:100%;}
}
@media all and (min-width: 1200px) {
	.input-group .column4 .input-option{
		width:25%;
	}
	
	/*Form Horizontal*/
	.form-frame.form-horizontal .adicol-1{width:100%;}
	.form-frame.form-horizontal .adicol-2{width:100%;}
	.form-frame.form-horizontal .adicol-2plus4{width:100%;}
	.form-frame.form-horizontal .adicol-4plus8{width:50%;}
	.form-frame.form-horizontal .adicol-4{width:50%;}
	.form-frame.form-horizontal .adicol-8{width:50%;}
}
@media all and (min-width: 1400px) {

	/*Form Horizontal*/
	.form-frame.form-horizontal .adicol-1{width:100%;}
	.form-frame.form-horizontal .adicol-2{width:50%;}
	.form-frame.form-horizontal .adicol-2plus4{width:100%;}
	.form-frame.form-horizontal .adicol-4plus8{width:50%;}
	.form-frame.form-horizontal .adicol-4{width:50%;}
	.form-frame.form-horizontal .adicol-8{width:50%;}
}
/*********************************** Login ****************@*@*******************/
.login-box{
	margin:15px auto;
}
.login-message-wrapper{
}
.login-message-title{
	font-size:1.3em;
	padding:22px 15px 30px 15px;
}
.login-message{
	padding:0 15px 22px 15px;
}
.login-box .login-message-wrapper{
	order:2;
}
.login-box .login-form{
	order:1;
}
.login-link{
	justify-content:flex-start !important;
}
@media all and (min-width: 992px) {
	.login-box{
		max-width:992px;
	}
	.login-box .login-message-wrapper{
		order:1;
	}
	.login-box .login-form{
		order:2;
	}
}
/*********************************** table listing ****************@*@*******************/
.tbl-listing-wrapper{
	overflow:hidden;
}
.tbl-listing{
	overflow-x:auto;
}
.adicontainer .tbl-listing{
	margin-left:30px;
	margin-bottom:32px;
}
.tbl-table{
	width:100%;
	padding:0;
	margin:0;
	border:0;
	border-collapse:collapse;
}
.tbl-table .align-left{
	text-align:left;
}
.tbl-table .align-right{
	text-align:right;
}
.tbl-table .align-center{
	text-align:center;
}
.tbl-table th,
.tbl-table td{
	padding:15px;
}
.tbl-table thead th{
	border-bottom:1px solid #eee;
	font-weight:normal;
	vertical-align:bottom;
	color:#555;
	font-size:1.1em;
}
.tbl-table th{
	font-weight:bold;
}
.tbl-sortable{
	cursor:pointer;
	color:#1B5E20 !important;
}
.tbl-sortable.sort-asc:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0d8";
	margin-left:5px;
}
.tbl-sortable.sort-desc:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f0d7";
	margin-left:5px;
}
.tbl-table tbody td{
	vertical-align:top;
	border-bottom:1px solid #eee;
}
.tbl-table tbody tr:hover{
	background:#ffff99 !important;
}
.tbl-table tbody td.tbl-action a{
	margin-left:5px;
}
.tbl-table tbody tr:nth-child(even){
	/*
	background:#f9f9f9;
	*/
}
.tbl-table tfoot td{
	color:#555;
}
.tbl-action{
	white-space:nowrap;
}
.tbl-Norec{
	text-align:center;
	margin-top:15px;
}
/*********************************** listing paging****************@*@*******************/
.paging{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow:row nowrap;
	justify-content:center;
	margin-left:30px;
	margin-bottom:15px;
	/*
	background:#fafafa;
	box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
	*/
}
.paging .paging-first,
.paging .paging-last,
.paging .paging-previous,
.paging .paging-next{
	font-family: 'Glyphicons Halflings';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding:5px 0;
	flex-grow:1;
	text-align:center;
	align-self:center;
	cursor:pointer;
}
.paging .paging-first:hover,
.paging .paging-last:hover,
.paging .paging-previous:hover,
.paging .paging-next:hover,
.paging .paging-select:hover{
	/*
	*/
	background:#ffff99;
}
.paging .paging-first{
	margin-left:0;
}
.paging .paging-previous,
.paging .paging-next{
	/*
	border-left:1px solid #eee;
	border-right:1px solid #eee;
	*/
}
.paging .paging-first:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content:'\f100';
}
.paging .paging-last:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content:'\f101';
}
.paging-previous:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content:'\f104';
}
.paging .paging-next:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content:'\f105';
}
.paging .paging-select{
	align-self:center;
	padding:0 10px;
}
.paging .paging-dd{
	padding:0 10px;
	border:0;
	margin:0;
	background:transparent;
	-moz-appearance:none;
	cursor:pointer;
}
.paging .totalrec{
	padding:5px;
	/*
	border-left:1px solid #eee;
	*/
	color:#999;
	white-space:nowrap;
	display:none;
}
/*responsive*/
@media all and (min-width: 384px) {
	.paging .totalrec{
		display:block;
	}
}
@media all and (min-width: 768px) {
	.paging{
		max-width:500px;
		margin-left:auto;
		margin-right:0;
	}
}
/*********************************** session message ****************@*@*******************/
.message{
	font-size:1.1em;
	background:#ff9;
	margin:0 15px 15px 15px;
	padding-top:15px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
	border-radius:2px;
}
.message .message_wrapper{
}
.message .message_content,
.message .message_action_wrapper{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow: row nowrap;
}
.message .message_action_wrapper{
	flex-wrap: wrap;
}
.message .message_msg_wrapper{
	margin-left:15px;
	margin-right:30px;
	margin-bottom:15px;
}
.message .message_icon{
	margin-top:2px;/*adjust the icon to align with text center of mass.*/
}
.message .message_action {
}
.message .message_action_wrapper a{
	margin-right:5px;
	padding:3px 15px;
	margin-top:5px;
	display:block;
	color:#fff;
	box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
	border-radius:2px;
	text-decoration:none;
	white-space:nowrap;
}
/*message icon*/
.message .information .message_icon:after,
.message .success .message_icon:after,
.message .error .message_icon:after,
.message .warning .message_icon:after{
	font-family: 'Glyphicons Halflings';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left:30px;
}
.message .information .message_icon:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f06a";
}
.message .success .message_icon:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00c";
}
.message .error .message_icon:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
}
.message .warning .message_icon:after{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f071";
}

/*message color*/
.message .information .message_icon{color:#015473;}
.message .information .message_action a{background:#015473;}
.message .success .message_icon{color:#7CB342;}
.message .success .message_action a{background:#618036;}
.message .error .message_icon{color:#b00101;}
.message .error .message_action a{background:#b00101;}
.message .warning .message_icon{color:#f36c00;}
.message .warning .message_action a{background:#f36c00;}

/*responsive*/
@media all and (min-width: 768px) {
	.message .message_msg_wrapper{
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;
		flex-flow:row nowrap;
		flex-grow:1;
	}
	.message .message_msg{
		flex-grow:1;
		flex-basis:0;
	}
	.message .message_action_wrapper a{
		margin-top:0;
	}
}

/*********************************** Modal ****************@*@*******************/
.modal{
	position:absolute;
	z-index:3;
	background:#fff;
	top:50%;
	margin:0 15px;
	transform:translate(0, -50%);
	border-radius:2px;
	box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	max-height: 100% !important;
}

.modal .modal-header{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	padding:15px;
	background-color:#fff;
	border-top-left-radius:inherit;
	border-top-right-radius:inherit;
	border-bottom:1px solid #eee;
}
.modal .modal-header-left{
	flex-grow:1;
}
.modal .modal-header-right .modal-header-btn-close:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f00d";
	color:#c02c2c;
	cursor:pointer;
}
.modal .modal-header-title{
	font-size:1.3em;
}
.modal .modal-body{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	padding: 15px;
}
.modal .modal-footer{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	padding:15px;
	border-top: 1px solid #eee;
}

.divider{
	border: 1px solid #dddddd;
	margin-top: 10px;
	margin-bottom: 23px;
	display:flex;
	flex-direction: row;
	margin-left: 15px;
}

.menu-url{
	overflow-wrap: break-word;
	max-width: 27vw;
}

tr.url-option{
	border-bottom: 1px solid #dddddd;
	line-height:30px;
}

tr.url-sub-option{
	border-bottom: 1px solid #dddddd;
	line-height:30px;
	padding-left: 20px;
	cursor:pointer;
}

#url:hover{
	cursor: pointer;
}

.url-option:hover{
	cursor:pointer;
}
td.url-category{
	padding: 10px 0 10px 0;
    font-size: 1.1em;
	cursor:pointer;
}

td.url-sub-title{
	padding-left: 20px;
	cursor:pointer;
	padding-bottom: 20px;
}

td.url-title{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow:row nowrap;
	justify-content:left;
	align-items: baseline;
	margin-left: 20px;
	width: 100%;
}

td.url-title-preset{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	flex-flow:row nowrap;
	justify-content:left;
	align-items: baseline;
	width: 100%; 
	/* white-space: nowrap; */
}

td.url-link{
	word-break: break-all;
	width: 70%;
	padding-left: 30px;
	line-height: 1.42857143;
	vertical-align: baseline;
}

td.url-link-preset{
	word-break: break-all;
	width: 77%;
	line-height: 1.42857143;
	vertical-align: baseline;
}

.placeholder{
	color: grey;
}

@media all and (min-width: 768px){
	.modal{
		margin:0;
		left:50%;
		transform:translate(-50%, -50%);
	}
}

/*********************************** Focus Action Bar ****************@*@*******************/
/* Actbarbottom with form */

.actbarbottom-btn-section{
    margin-bottom: 0px !important;
}
.actbarbottom-form-frame{
	padding-top:0px !important;
	width:100% !important;
}
.actbarbottom-cancel{
	background-color:#c02c2c !important;
	color:#fff !important;
}
/* End with Actbarbottom with form */

.actbarbottom-item:hover{
	z-index:1;
	outline:none;
	box-shadow:0px 1px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
	cursor:pointer;
}

.actbarbottom-item .actbarbottom-icon.btn-save:before{
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f019";
}

.actbarbottom-item .actbarbottom-icon.btn-more:after,
.actbarbottom-item .actbarbottom-icon.btn-back:before,
.actbarbottom-item .actbarbottom-icon.btn-edit:before,
.actbarbottom-item .actbarbottom-icon.btn-view:before,
.actbarbottom-item .actbarbottom-icon.btn-add:before,
.actbarbottom-item .actbarbottom-icon.btn-delete:before,
.actbarbottom-item .actbarbottom-icon.btn-submit:before,
.actbarbottom-item .actbarbottom-icon.btn-cancel:before,
.actbarbottom-item .actbarbottom-icon.btn-close:before,
.actbarbottom-item .actbarbottom-icon.btn-save:before,
.actbarbottom-item .actbarbottom-icon.btn-search:before,
.actbarbottom-item .actbarbottom-icon.btn-search-textbox-search:before,
.actbarbottom-item .actbarbottom-icon.btn-search-textbox-reset:before{
	padding-right:0px !important;
}

.actbarbottom-item .actbarbottom-icon.btn-more:after{
	padding-left:0px !important;
}

@media all and (max-width: 991px){
	.actbarbottom{
		flex-flow:row nowrap;
		font-size:0.8em;
		background-color:#fff;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		z-index:2;
	}	
	.actbarbottom-wrapper{
		display:flex;
		box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.36);
	}
	/* With scroll */
	.actbarbottom-wrapper-scroll{
		min-width:100%;
		overflow-x:auto;
		flex:1;
	}
	.actbarbottom-wrapper::-webkit-scrollbar{
		display:none;
	}
	.actbarbottom-item-flex{
		flex:1;
		min-width:100px;
		/* outline:1px solid #f1f1f1; */
	}
	/* End with scroll */
	
	/* Small menu */
	.actbarbottom-overflow{
		overflow:hidden;
	}
	.item-left+.item-right {
		margin-left: auto;
	}
	.item-left{
		/* outline:1px solid #f1f1f1; */
	}
	.item-right{
		/* outline:1px solid #f1f1f1; */
	}
	/* End with small menu*/
	
	.actbarbottom-item{
		display:flex;
		padding:5px 15px;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		text-align:center;
		height:auto;
		width:auto;
		background:#fff;
		flex:1;
	}
	.actbarbottom-label{
	}
	.actbarbottom-icon{
		margin-bottom:2px;
		margin-top:2px;
	}
}
@media all and (min-width: 992px){
	.actbarbottom{
		display:flex;
		flex-flow:row nowrap;
		align-items:center;
		justify-content:flex-end;
		position:fixed;
		bottom:0;
		right:0;
		z-index:2;
	}
	.actbarbottom-wrapper{
		display:flex;
		box-shadow: -2px 0px 2px rgba(0,0,0,0.12),0 0px 2px rgba(0,0,0,0.36);
	}
	.actbarbottom-item{
		display:flex;
		padding:5px 15px;
		align-items:center;
		justify-content:center;
		text-align:center;
		height:auto;
		width:auto;
		background:#fff;
		/* outline:1px solid #f1f1f1; */
	}
	.actbarbottom-label{
	
	}
	.actbarbottom-icon{
		margin-left:5px;
		padding-right:5px;
	}
}

/*********************************** Toggle Slide Up Form ****************@*@*******************/
.slideup-menu{
	display: inline-block;
	border-radius: 2px;
	background:#fff;
	padding:10px 0;
	box-sizing:border-box;
	margin-top:0px;
	color:#333;
	box-shadow: 0 2px 2px rgba(0,0,0,0.12),0 -1px 2px rgba(0,0,0,0.36);
	font-size:1rem;
	text-align:left;
	position:fixed;
	right:0; 	/* default position align right. */
	bottom:0;
	min-width:100%;
	z-index:6; 	/* overlay is z-index 2 */
}
.slideup-content{
	display:-webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display:-moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display:-ms-flexbox;      /* TWEENER - IE 10 */
	display:-webkit-flex;     /* NEW - Chrome */
	display:flex;
	padding:15px;
}
.close-slideup{
	display:flex;
}
.close-slideup-button{
	margin-left:auto;
	cursor:pointer;
	padding:0px 20px;
	font-size:2rem;
}

.tabStrip{
	margin: 0 15px;
}
.tabStrip ul {
	margin-bottom: 10px;
	padding: 0;
	list-style-type: none;
	box-shadow: inset 0px -4px 0 #e6e9ed;
	display: inline-flex;
	width:100%;
}
.tabStrip li {
	list-style-type: none;
}
.tabLink {
	display: block;
	padding: 10px 10px 0px 10px;
	color:#4a6785;
	font-size:16pt;

}
.tabLinkActive {
	display: block;
	text-decoration: none;
	padding: 10px 10px 0px 10px;
	border-bottom: 4px solid ;
	font-size:16pt;
	color:#4a6785;
}
.tabContent {
	display: none;
}
.tabContentActive {
	display: block;		
}

.lang-item{
    border-radius: 2px;
	padding: 3px 7px;
	flex-direction: column;
    flex: 1;
}
.lang-label{
	padding: 0px;
}
.lang-item:hover{
	z-index:1;
	box-shadow:0px 1px 0px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
	cursor:pointer;
}
.lang-div{
	font-size: 1rem;
    text-decoration: none;
    text-align: center;
    border-radius: 2px;
    background-color: #fafafa;
    border: 0;
    cursor: pointer;
    padding: 3px 7px;
    color: #555;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 1px 1px rgb(0 0 0 / 24%);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    margin-top: 5px;
    width: auto;
    margin-left: 5px;
    flex-grow: 1;
    justify-content: center;
}
.item-active{
	color: white !important;
    background-color: #4a6785;
	border-radius: 0px;
}
.item-first{
	color: white !important;
    background-color: #4a6785;
	border-radius: 2px 0px 0px 2px;
}
.item-last{
	color: white !important;
    background-color: #4a6785;
	border-radius: 0px 2px 2px 0px;
}
.modal .displayModal{
    transform: translate(-100%);        
    -webkit-transform: translate(-100%);
}
.slideFromTop{
	animation: 0.5s ease-out 0s 0.5 slideInFromTop;
}
.slideFromRight{
	animation: 0.5s ease-out 0s 0.5 slideInFromRight;
}

.slideOutTop{
	animation: 0.5s ease-out 0s 0.5 slideOutToTop;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(+100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(+100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideOutToLeft {
  0% {
    transform: translateX(+100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideOutToRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideOutToTop {
  0% {
    transform: translateY(+100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideOutToBottom {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}


#modal.five {
  transform: scale(1);
}
#modal-container.five .modal-background {
  background: rgba(0, 0, 0, 0);
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five .modal-background .modal {
  transform: translateX(-1500px);
  animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-container.five.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out .modal-background .modal {
  animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 1;
}

@keyframes roadRunnerIn {
  0% {
    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}

.blue, .hover-blue:hover {
    color: #fff!important;
    background-color: #2196F3!important;
}
.small {
    font-size: 12px!important;
}
.badge, .tag {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}

/*********************************** Dashboard ****************@*@*******************/
#dashboard-index canvas{
	padding:30px;
}

.hide {
	display: none!important;
}

.btn-icon-add {
	font-weight: bold;
	font-size: 30px;
}

.article-section-row {
	display: flex;
	flex-direction: column;
}

.section-no::after {
  content: attr(data-section-seq-display);
}

.modal {
  /* display: none;  */
  position: fixed; 
  z-index: 50; 
  padding-top: 15px; 
  /* padding-top: 30px;  */
  /* width: 100%;  */
  /* height: 100%;  */
  overflow: auto; 
  background-color: rgb(255,255,255); 
  /*background-color: rgba(255,255,255,0.8);*/
}

.modal.show {
  display: block;
}

/* The Close Button */
.modal-close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  opacity: 0.8 !important;
}

.modal-close:hover,
.modal-close:focus {
  color: #e5e5e5;
  text-decoration: none;
  cursor: pointer;
}

.dp-modal {
	z-index: 1000!important;
}

.ev-input-group{
	margin-bottom: 32px;
  margin-left: 30px;
}

.ev-input-group input{
	width: 100%;
}

.ev-input-group label{
	padding: 8px 0 8px 0;
  margin: 0;
  font-size: 1.1em;
  color: #444;
}

.eventModalConfirmBtn,.eventModalCloseBtn{
	float: right;
}

.eventModalConfirmBtn {
	margin-left: 20px;
}

.eventModalCloseBtn {
	color: #fff;
  background-color: #c02c2c;
}

.dropdown-item.selected {
	color: white !important;
	background-color: #4a6785;
}
.tabTitle_current, .tabTitle_draft, .lang-item{
	padding: 10px 30px;
}
.btn-active-draft{
	background-color: #eaeaea;
}
.modal-body-setting{
	width: 1000px !important;
	max-height: 500px;
	overflow: auto;
}
.tbl-listing-setting{
	max-height: 500px;
}

@media all and (max-width: 1000px) {
	.modal-body-setting{
		width: 80vw !important;
	}
	.modal{
		margin: 0;
	}
}
@media all and (max-width: 767px) {
	.modal-body-setting{		
		width: 100vw !important;
		max-height: 100vh !important;
	}
	.tbl-listing-setting{
		max-height: 100vw !important;
		overflow: auto;
	}
	.modal{
		margin: 0;
		width: 100%;
	}
}