.bg-login-image {
	background: url(../../images/bg_home.jpg);
	background-position: center;
	background-size: cover;
}
.bg-register-image {
	background: url(../../images/bg_home.jpg);
	background-position: center;
	background-size: cover;
}
.bg-password-image {
	background: url(https://source.unsplash.com/oWTW-jNGl9I/600x800);
	/*background-position: center;*/
	background-size: cover;
}
.text-middle, .text-middle th, .text-middle td {
	vertical-align: middle !important;
}
.text-line-through {
	text-decoration: line-through !important;
}
.text-line-through-red {
	text-decoration: line-through !important;
	text-decoration-color: red !important;
}
.text-red {
	color: red;
}
.text-green {
	color: green;
}
.text-black {
	color: black;
}
.bg-black {
	background-color:black;
}
.bg-white {
	background-color:white;
}
.bg-blue {
	background-color:blue;
}
.bg-red {
	background-color:red;
}
.bg-green {
	background-color:green;
}
.pull-right {
	float: right;
}
.pull-left {
	float: left;
}
label {
	margin-top: 10px;
	margin-bottom: 0px;
}

.home .container {
	/*
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5)),url(../images/bg_home.jpg) !important;
	background-size: cover;
	min-height: 320px;
	text-align: center;
	padding-top: 140px;
	color: white;
	font-family: "Open sans", Helvetica, Arial;
	font-weight: 300;
	*/
	padding-left: 0px;
	padding-right: 0px;;
}	

@media (max-width: 767px) {
	.home .container {
			min-height: 220px;
			padding-top: 60px;
	}
}
.footer1 {
	background: #232323;
	padding: 30px 0 24px 0;
	font-size: 12px;
	color: #999;
	margin:-24px;
	margin-bottom: 0px;;
}
img {
	max-width: 100%;
}
#head .btn-default {
	text-shadow: none;
	background: transparent;
	color: rgba(255,255,255,.5);
	-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.5);
	-moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.5);
	box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.5);
	background: transparent;
}
#head .btn-lg {
	padding: 15px 65px;
	font-size: 14px;
	font-weight: bold;
}
#head .btn-default:hover, #head .btn-default:focus {
	color: rgba(255,255,255,.8);
	-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.8);
	-moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.8);
	box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.8);
	background: transparent;
}

.btn-triangle-dark {
	color: #5a5c69;
	border-color: #5a5c69;
	border-radius: 0px;
	padding-left: 24px;
	padding-right: 20px;
	background: #fff;
	margin-bottom: 3px;
}
.btn-triangle-dark:after {
	margin-left: 8px;
	border: solid #5a5c69;
	border-width: 0px 1px 1px 0;
	display: inline-block;
	padding: 0.79rem;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	position: absolute;
	content: "";
	margin-top: -0.09rem;
	background: #fff;
	/*transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;*/
}	
.btn-triangle-dark:hover {
	color: #fff;
	background-color: #84879b;
	border-color: #5a5c69;
}
.btn-triangle-dark:hover:after {
	background-color: #84879b;
	border-color: #5a5c69;
	/*transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;*/
}
.btn-triangle-dark:focus {
	outline: 0;
	box-shadow: none;
	color: #fff;
	background-color: #5a5c69;
}
.btn-triangle-dark:focus:after {
	color: #fff;
	background-color: #5a5c69;
}
form label {
	font-size: small;
}
.required>label:after {
	content: "*";
	color: red;
}
.form-data .form-group {
	margin-bottom: .5rem;
}
.text-small, .text-small span {
	font-size: small !important;
}
.text-smaller, .text-smaller span {
	font-size: smaller !important;
}
.text-x-smaller, .text-x-smaller span {
	font-size: x-small !important;
}
.text-xx-smaller, .text-xx-smaller span {
	font-size: xx-small !important;
}
.text-top {
	vertical-align: top;
}
a {
	text-decoration: none !important;
}
.card-header .close:focus {
	outline: none;
}
.bootstrap-select .btn-light {
	color: #858796;
	border:solid 1px #d1d3e2;
}
.bootstrap-select .btn-light:hover {
	color: #858796;
	background-color: #fff;
	cursor: default;
}	
.dropdown .dropdown-menu.show {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#example_processing {
	color:whitesmoke;
	background-color: crimson;
	position: fixed;
}
.btn-edit {
	width:70px;
}
.table-report td, .table-reoort th {
	padding: 0.3rem;
}
::placeholder {
  color: #ccc !important;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #ccc !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color: #ccc !important;
}
.nav.nav-tab {
	border-bottom: solid 1px #4e73df;
}

.nav.nav-tab .active {
	border-bottom: solid 2px #4e73df;
	font-weight: bold;
}
@media only screen {
	.lable-header {
		color: #fff;
		background-color: #4e73df;
	}
	.table-bg-th {
		color: #fff;
		background-color: #4e73df;
	}
}
.cursor-pointer {
	cursor: pointer;
}

@media only print {
	body, a, .table, .text-white {
		color:#000 !important
	}
	.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th {
    border: 0 !important
	}
}

.visitor span {
	display: inline-block;
	padding: 6px 3px;
	margin: 0.5px;
	border-radius: 3px;
	line-height: 10px;
	color: #fff;
	background: #333;
	font-size: small;
}
.inline {
	display: inline;
}
.card-body {
	transition: height 2s ease !important;   
	transition-delay: 0s;
	overflow: hidden !important;
}
.article-top {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}
.article-top:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.play-video:hover {
	color: #264ec1 !important;
	background: #ccc;
}
.play-video {
	position: absolute;
	width: 40px;
	height: 40px;
	padding-left: 6px;
  padding-top: 2px;
	border: 0;
	border-radius: 50%;
	color: #fff !important;
	background: #264ec1;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	bottom: calc(50% - 20px);
	right: calc(50% - 20px);
	opacity: 0.7;
}
.cookie-policy {
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffff;
	z-index: 9999;
	font-size: 0.9rem;
	border-top: solid 2px #476dda;
	color: #476dda;
}
.cookie-policy a {
	text-decoration: underline !important;
	color: #b2bb1c;
}
body {
	margin: 0;
	font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.5;
	color: #858796;
	text-align: left;
  background-color: #fff;
}
.researcher {
	color:#4268d6;
}
.researcher-name {
	border: 1px solid #8587961a;
	background-color: #8587961a;
	margin: 2px;
	padding: 0 5px 0 5px;
	border-radius: 3px;
}
.app-title {
	font-size: 20px;
	color: #486edb;
}
.topbar .nav-item .nav-link {
	height: auto;
}
.img-profile {
	max-width: none !important;
}
.badge-over {
	background-color: #5b0080 !important;
}

/* all media */
.navbar .navbar-logo {
	max-height: 48px;
}
.footer-logo {
	max-height: 72px;
	margin: 0 5px 24px 5px;
	margin-bottom: 24px;
}
.vdo-close {
	color:#fff; margin-top:-24px;
}
.footer-about {
	background:#037ad0; 
	min-height:60px;
}
.article-label {
	width: 110px;
}
.article-data {
	border: 1px solid #8587961a;
	background-color: #8587961a;
	margin: 2px;
	padding: 0 5px 0 5px;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 2px;
}
.article-data-list {
	/*
	border: 1px solid #8587961a;
	background-color: #fff;
	margin: 2px;
	padding: 0 5px 0 5px;
	border-radius: 3px;
	*/
}
.white-space-nowrap {
	white-space: nowrap;
}
.mode-edit {
	border: 1px solid red !important;	
}
input[type=date] {
	width: 170px !important;
}

@media (max-width: 767px) {
	.navbar .navbar-logo {
		max-height: 35px;
	}
	.vdo-close {
		margin-top:-6px;
	}
	.footer-about {
		font-size: small;
	}
	.article-label {
		width: 75px;
		font-size: xx-small;
	}
	.text-top {
		padding-top: 5px;
	}
	#contentCanvas h1.h3 {
		display: none;
	}
	#export_to_excel, .btn-print, .btn-export {
		display: none;
	}
	input[type=date] {
		width: 130px !important;
		font-size: x-small;
	}
	.app-title {
	  width: max-content;
    /*font-size: large;*/
    margin-top: 4px;
	}
	form .app-title {
		/*font-size: small;*/
	}
}

@media (max-width: 400px) {
	form .app-title {
		font-size: small;
		position: absolute;
		/*margin-top: 50px;*/
	}
}	
@media (max-width: 1260px) {
	.app-title {
	  width: max-content;
    /*font-size: large;*/
    margin-top: 4px;
	}
}

/* ************************** */
/* ************************** */
/* ************************** */
/* ปรับการแสดงเมนูในมือถือ        */
/* ****************************/
.cover {
	display: none;
}
.navbar-logo {
	max-height: 72px;
	margin: 10px 5px 24px 5px;
	margin-bottom: 13px;	
}
.sidebar-toggled .navbar-logo {
	max-height: 47px;
	margin: 5px 2px 0px 5px;
	margin-bottom: 10px;	
}
.navbar-logo.sct {
	height: 62px;
	margin-top: 21px;
}
.sidebar-toggled .navbar-logo.sct {
	height: 40px;
	margin-top: 10px;
}

@media (min-width: 768px) {
	.position-sm-initial {
		position: initial !important;
	}
	.carousel-img	{
		height: 319px;
	}
}
@media (max-width: 767px) {
	.carousel-item	{
		max-height: 136px;
	}
	.carousel-img	{
		max-height: 136px;
	}
	.cover {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 991;
		background-color: black;
		opacity: 0.3;
		display: block;
	}
	.bg-gradient-primary {
    background-image: none;
	}
	#page-top.sidebar-toggled .cover {
		display: none;
	}
	#page-top #content-wrapper {
		height: 100vh !important;
		overflow: hidden;
		position: fixed;
	}
	#page-top.sidebar-toggled #content-wrapper{
		height: auto;
		overflow: auto;
	}
	.collapse  {
		z-index: 999;
	}
	.sidebar {
		z-index: 999;
		width: 14rem;
	}
	.sidebar .nav-item .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem;
    width: 14rem;
	}
	.sidebar .nav-item .nav-link i {
    font-size: .85rem;
    margin-right: .25rem;
	}
	.sidebar .nav-item .nav-link span {
    font-size: .85rem;
    display: inline;
	}
	.sidebar .nav-item .nav-link[data-toggle=collapse]::after {
    width: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
	}
	.sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after {
    content: '\f105';
	}	
	.home .container {
    min-height: auto;
    padding-top: inherit;
	}

}
/* จบ ปรับการแสดงเมนูในมือถือ */
:focus {
	outline: 0 !important;
}
.bootstrap-select .dropdown-toggle:focus {
	outline: 0 dotted #333333 !important;
	outline: 0 auto -webkit-focus-ring-color !important;
	outline-offset: -2px;
}
.inline-flex {
	display: inline-flex !important;
}
.badge-warning {
	color: #56566f;
}

/* **************** */
/* จัดการเมนูตรึง       */ 
/* **************** */

.back_menu {
	z-index:992; 
}
@media (min-width: 768px) {
	.navbar-fixed {
	position: fixed !important; 
	top:0px; 
	z-index:993; 
	height:100%;
	overflow: auto; 
	}
	.sidebar-toggled .collapse.show {
		position: fixed !important;
		top: 100px !important;	
	}
}
@media (max-width: 767px) {
	.navbar-fixed {
		position: absolute !important; 
	}
}

/************ scrollbar ************* */
/* width */
.scrollbar::-webkit-scrollbar {
  width: 3px;
}

/* Track */
.scrollbar::-webkit-scrollbar-track {
  background: #888; 
}
 
/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
  background:#666 
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.nav-item .collapse {
	z-index: 2 !important;
}
.nav-item .collapse-inner {
		background: #dce3f7 !important;
}

/* /จัดการเมนูตรึง */ 

.c3-legend-item-hidden, .c3-legend-item-focused .c3-legend-item {
	opacity: 0.5;
}

#listCard .dropdown-menu, .btn-print-export .dropdown-menu {
	min-width: 8rem;
}
#listCard .dropdown-menu>li>a, .btn-print-export .dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
}
#listCard .dropdown-menu>li>a:focus, .btn-print-export .dropdown-menu>li>a:focus,
#listCard .dropdown-menu>li>a:hover, .btn-print-export .dropdown-menu>li>a:hover {
	color: #262626;
	text-decoration: none;
	background-color: #f5f5f5;
}
.custom-control-label {
	padding-top: 3px;
}
.modal-header i,.dropdown-menu i {
	color:#a9a4a4;
}
.dropdown_search {
	cursor: pointer; 
}
.dropdown_search .dropdown-toggle::after {
	border: 0px;
}
.dropdown_search a label {
	width :15px;
	margin: 0px;
}
.google-scholar {
	background: #fff !important;
}
@media (min-width: 768px) {
	.sidebar .nav-item .nav-link span {
    font-size: .8rem;
	}
}
.amount-link:hover {
	cursor: pointer;
}
.amount-link:hover span {
	text-decoration: underline;
	cursor: pointer;
}
.group-inline {
	display: flex;
	flex-flow: initial;
	align-items: center;
}
.group-inline label {
	margin-right: 6px;
	white-space: nowrap;
}
.opacity-img img {
	opacity: 0.5;
}
.input-group label {
	margin-top: 0px ;
}
.input-group .input-group-text {
	text-align: left;
	padding-left: 32px;;
}
.custom-file-label {
	height: calc(1.85em + .75rem + 2px);
	padding: .6rem .75rem;
}.custom-file-label:after {
	height: calc(1.85em + .75rem);
	padding: .6rem .75rem;
}
.text-border {
	border: 1px solid;
}
pre {
	color: #858796;
}
#print_canvas pre {
	color: #000;
	border: 0px solid;
}
.iframe>iframe {
	width: 100%;
	border: 0;
}
.inline-block {
	display: inline-block;
}
#formModify.disabled button.disabled,
#formModify.disabled button:disabled {
	color: #6e707e;
	background-color: #eaecf4;
	opacity: 1;
}
li span.group-name {
  position: relative;
  left: -10px;
}