/**** Use in dynamic web *****/
@import url(https://fonts.googleapis.com/css?family=Sarabun:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap);

body {
    font-family: 'Sarabun', arial, sans-serif;
	font-size:0.85em;
}

.navbar {
  background-color: #3c4e60 !important;
  background-image: linear-gradient(to right, #3c4e60 , #5f748a); 
}
.navbar .navbar-brand {
  color: #f6f3f3;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ffc107;
}
.navbar .navbar-text {
  color: #f6f3f3;
}
.navbar .navbar-text a {
  color: #f6f3f3;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ffc107; 
}
.navbar .navbar-nav .nav-link {
  color: #f6f3f3;
  border-radius: 0rem;
  margin: 0 0.25em;
  font-size:1em !important;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ffc107;
  background:#516274;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ffc107;
  background-color: #516274;
  
}
.navbar .navbar-toggle {
  border-color: #516274;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #516274;
}
.navbar .navbar-toggle .navbar-toggler-icon {
  color: #f6f3f3;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #f6f3f3;
}
.navbar .navbar-link {
  color: #f6f3f3;
}
.navbar .navbar-link:hover {
  color: #ffffff;
  
}


.navbar .navbar-nav .dropdown-menu {
  background-color: #e8ecf0;
  border-color: #c7d0d8;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #02050d;
  font-size:.875em !important;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #efe39c;
  background-color: #5d738a;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #f0fbfe;
}
@media (max-width: 575px) {
	.navbar .navbar-nav .nav-link { padding-left:10px; }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #FFFFFF;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    /*background-color: #516274;*/
  }
}



input[type="text"],
input[type="password"],
select.form-control{
  background-color:#f7f9f9;
}

input[type="text"]:focus,
input[type="password"]:focus,
select.form-control:focus {
  background-color:#ffffef;
}

div.input_section_header{background-color:#cfd6de};


@media (max-width: 767px) {
	/** kawpod **/
	.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}
	
	.navbar .navbar-nav .dropdown-menu {
	  background-color: #adb5bd;
	  border-color: #5f758a;
	}
	/*
	.navbar{ 	background-color:#3c4e60 !important; }
	.navbar .navbar-nav .nav-link {
	  color: #f6f3f3;
	}
	.navbar .navbar-nav .nav-link:not(.disabled):hover,
	.navbar .navbar-nav .nav-link:not(.disabled):focus {
	  color: #ffc107;
	}
	.navbar .navbar-toggle, .navbar .navbar-toggle .navbar-toggler-icon {
	  color: #f6f3f3 !important; 
	}
	
	.navbar .navbar-nav .nav-link { padding-left:10px; }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
	background-color: #e8ecf0;
    color: #f6f3f3  !important; 
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
  }*/
}

@media (max-width: 991px) {
	.navbar .navbar-nav .nav-link { padding-left:10px; }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #f6f3f3;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    /*background-color: #516274 ; */
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #f6f3f3;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    /*background-color: #516274;*/
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #f6f3f3;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  /*background-color: #516274;*/
}




/* Scroll to top button* /
#scrollToTop a {
  border-radius: 100px;
}
#scrollToTop a i:before {
  content: '';
  position: absolute;
  height: 40%;
  top: 25%;
  background: #fff;
  width: 2px;
  left: calc(50% - 1px);
}
#scrollToTop a i:after {
  content: '';
  position: absolute;
  display: block;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 40%;
  height: 40%;
  left: 30%;
  bottom: 30%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}*/
/*! Scroll to top arrow */
.mbr-arrow-up{
	bottom:25px;right:90px;position:fixed;text-align:right;z-index:5000;color:#ffffff;font-size:32px;transform:rotate(180deg);-webkit-transform:rotate(180deg)
}
.mbr-arrow-up a{
	background:rgba(0,0,0,0.2);border-radius:3px;color:#fff;display:inline-block;height:60px;width:60px;outline-style:none !important;position:relative;text-decoration:none;transition:all .3s ease-in-out;cursor:pointer;text-align:center
}
.mbr-arrow-up a:hover{
	background-color:rgba(0,0,0,0.4)
}
.mbr-arrow-up a i{
	line-height:60px
}
.mbr-arrow-up-icon{
	display:block;color:#fff
}
.mbr-arrow-up-icon::before{
	content:"\203a";display:inline-block;font-family:serif;font-size:32px;line-height:1;font-style:normal;position:relative;top:6px;left:-4px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)
}


.menu_separator_white{
	border-left:0px  !important;
	padding-left:20px;
}
.menu_separator_white_right{
	border-right:0px  !important;
}


.table .thead-dark th{color:#000000;background-color:#d2d9de;border-color:#abb4ba}

.table-dark{color:#000000;background-color:#d2d9de}

.table-dark td,.table-dark th,.table-dark thead th{border-color:#abb4ba}




/*********************************/


@media screen and (max-width: 800px) {
	.img_responsive {
		width:100% !important;
		height:auto !important;
	}
	
	.div_responsive {
		width:100% !important;
	}
}
/*
Bootstrap 4 grid tiers and media query breakpoints
xs = Extra small <576px
sm = Small >=576px
md = Medium >=768px
lg = Large >=992px
xl = Extra large >=1200px
*/
@media screen and (max-width: 576px) {
	.btn_responsive {
		width:100% !important;
		margin-left:0px;
	}
	
	.box_responsive, .textbox_responsive{
		width:100% !important;
	}

}


@media (min-width: 768px) {
.dropdown .dropdown-menu{
    display: none; 
  opacity:0;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
height:0px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
	height:auto;
	margin-top:0px;
}
.menu_separator_white{
	border-left:solid 1px white !important;
}
.menu_separator_white_right{
	border-right:solid 1px white !important;
}
}




.parallax-window {
    min-height: 400px;
    background: transparent;
	border:solid 0px red;
	
}

.kp-parallax{
	height:100%; background: transparent; background-image:url('../../assets/images/header_mobile_bg.png');  background-attachment: fixed;background-position: center; background-repeat: no-repeat; background-size: cover; 
}


.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  border-bottom: 10px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
.loader_lg {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  border-bottom: 16px solid #3498db;
  width: 120px;
  height: 120px;
  margin-left:auto;
  margin-right:auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


th {
    background-color: #cad4dd;
    color: #000000;
} 
th a {
    color: #3f6589;
} 

.box_title_1 {
    background-color: #b8d2e5;
    color: #000000;
} 

h1{ color:#003399;}


			.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table-responsive::-webkit-scrollbar:vertical {
    width: 12px;
}

.table-responsive::-webkit-scrollbar:horizontal {
    height: 12px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.table-responsive::-webkit-scrollbar-track {
    border-radius: 10px;  
    background-color: #ffffff; 
}

.white_space_normal{ white-space:normal; }