/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */


@font-face {
	font-family: 'Conv_Prompt-Regular';
	src: url('fonts/Prompt-Regular.eot');
	src: local('☺'), url('fonts/Prompt-Regular.woff') format('woff'), url('fonts/Prompt-Regular.ttf') format('truetype'), url('fonts/Prompt-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'Conv_NotoSansThai-Regular';
	src: url('fonts/NotoSansThai-Regular.eot');
	src: local('☺'), url('fonts/NotoSansThai-Regular.woff') format('woff'), url('fonts/NotoSansThai-Regular.ttf') format('truetype'), url('fonts/NotoSansThai-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}


body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, p {font-family: 'Conv_NotoSansThai-Regular', serif !important; font-size: 1.3rem;}
h1 {font-size: 3rem !important;}
h2 {font-size: 2.5rem !important;}
h3 {font-size: 2rem !important;}
h4 {font-size: 1.5rem !important;}
p {line-height: 25px !important;}
.btn {font-size: 1.1rem;}


.videoPlayer {
    width: 460px;
    height: auto;
}

/*---------- วิดีโอ กลุ่มเสี่ยง ----------*/
.sec_news .card-content {
  overflow: hidden;
  margin: 0 0 25px 0;
  height: auto;
  border-radius: 10px;
}
.sec_video {
  margin-bottom: 25px;
}
.sec_video iframe {
  width: 100%;
  height: 277px;
}
.cat {
  text-decoration: none;
  padding-left: 10px;
  border-left: 1px solid #ccc;
  margin-left: 10px;
}

/*---------- End วิดีโอ กลุ่มเสี่ยง ----------*/

/*---------- nav ----------*/

.btn-yellow {
  border-color: #fee409 !important;
  background-color: #fee409 !important;
  color: #000 !important;
}
.btn-yellow:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #fee409;
}
.btn-pink {
  border-color: #f04e8a !important;
  background-color: #f04e8a !important;
  color: #fff !important;
}
.btn-pink:hover:not(.disabled):not(:disabled) {
  box-shadow: 0 8px 25px -8px #f04e8a;
}
.note { font-size: 16px;}

/*---------- End nav ----------*/

.img-thumbnail.warfarin img { margin: 15px 30px;}

.result { padding: 25px; background: #fee409; border-radius: 10px; margin-bottom: 20px; color: #000; font-size: 22px; }
.result code { padding: 6px 15px; font-size: 25px;}

html .app-content.content_dt {
  padding: calc(2rem + 4.45rem + 1.3rem) 2rem 0;
}

.text-primary {color: #2D58BF !important;}

.bg_top {background: #1a458a; margin-bottom: 25px; border-bottom: 5px #f7c200 solid;}
.text_white a { color: #fff;}
.text_white a:hover { color: rgba(255,255,255,0.60);}
.col-form-label span, .form-label span {color: red;}
.card-header span { color: #1a458a;}
.img_home {margin-bottom: 25px; background: url("../images/img-home.jpg") center top no-repeat; background-size: cover;  height: 550px; border-radius: 20px; position: relative;}
.text_banner { width: 38%; height: 300px; position: absolute; top: 20%; left: 5%;}
.text_banner h1 {line-height: 1.5; font-size: 35px;}
.text_banner_mobile h4 {display: none; margin-bottom: 25px;}

.font_bold {font-weight: bold;}



.nav-pills .nav-link.active {background-color: #2D58BF; border-color: #2D58BF; box-shadow: 0 4px 18px -4px rgba(45, 88, 191, 0.65);} 
.header-navbar.floating-nav {
  left: 0;
}
.header-navbar.floating-nav {width: calc(100vw - (100vw - 100%) - calc(2rem * 2) - 0px);}
.form-check-inline {margin-bottom: 1rem;}

.head_l h4 { margin-top: 8px;}



.main-menu .navbar-header .navbar-brand .brand-logo img {
  max-width: 180px;
  height: auto;
}
.main-menu .navbar-header .navbar-brand {margin-top: 0;}
.main-menu .navbar-header {z-index: 9;}

.ql-editor {min-height: 200px;}
.img_100 img {width: 100%; height: auto;}

.col-form-label {font-size: 1.2rem !important;}
.text_right {text-align: right;}

.form-label {font-size: 1.3rem !important; color: #1a458a; }
.ml-1 {margin-left: 1rem !important;}
.ml-2 {margin-left: 2rem !important;}
.ml-3 {margin-left: 3rem !important;}

.box_form { padding: 30px 5px 30px 30px; border: 1px solid #eee; border-radius: 10px; margin:0 0 32px 0; background: #fafafa;}

.sub_head {}



.container_box_regis {width: 960px; margin: 0 auto;}
.nav_step {}
.nav_step .btn { margin-bottom: 5px ;}
.content_inner { padding:32px 220px;}
.content_inner .form-control, .content_inner .form-select {margin-bottom: 13px;}
.content_inner2 { padding:32px 100px;}
.content_inner2 .form-control, .content_inner2 .form-select {margin-bottom: 13px;}
.box_gray {background: #f4f4f4; padding: 30px; border-radius: 10px; margin-bottom: 25px; border: 1px solid #ccc;}
.box_gray h3 { color: #2D58BF; font-weight: 600; margin-bottom: 20px;}
.box_gray hr { margin: 20px 0;}
.box_gray strong { color: #2D58BF;}
.emotion {}
.emotion img {width: 170px; height: auto;}
.scroll-top {
  z-index: 9999;
}
#rangeValue {
  position: relative;
  display: block;
  text-align: center;
  font-size: 6em;
  color: #999;
  font-weight: 400;
}
.range {
  width: 400px;
  height: 15px;
  -webkit-appearance: none;
  background: #2D58BF;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  /*box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);*/
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00fd0a;
  cursor: pointer;
  border: 4px solid #333;
  box-shadow: -407px 0 0 400px #00fd0a;
}

@media only screen and (max-width: 767px) {
	.container_box_regis {width: 100%; }
	.content_inner { padding:0;}
	
	html body .app-content {padding: 10px !important;}
	.img_home {background-position-x: -300px;}
	.text_banner h1 {font-size: 25px !important; display: none;}
	.text_banner_mobile h4 {display: inherit;}
}

@media only screen and (max-width: 600px) {
	
	.videoPlayer {
    width: 100%;
    height: 270px;
}
	
	.container { max-width: 100%;}
	.img_home {margin-bottom: 25px; height: 350px;}
	.text_banner { width: 90%; height: 300px; top: 15%; left: 5%; }
	.text_banner h1 {font-size: 26px;}
	
	
	
  .box_form {
  padding: 30px 5px 30px 5px;
}
	.sub_head, .form-check-inline { width: 100%;}
	.form-check.form_check_mobile {padding-left: 0;}
}