/*
|--------------------------------------------------------------------------
| Belib main css
|--------------------------------------------------------------------------
|
| DO NOT CHANGE ANYTHING IN THIS FILE!!!!!!!!!!!!
| ANY CUSTOMIZATION, PLEASE DO IT IN 'client' FOLDER ONLY!!!!!!!!!!!!
|
|--------------------------------------------------------------------------
|
*/

/*
|--------------------------------------------------------------------------
| Google fonts
|--------------------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krub:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');


/*
|--------------------------------------------------------------------------
| Core files
|--------------------------------------------------------------------------
*/
@import 'topbar.css';
@import 'carousel.css';
@import 'breadcrumb.css';
@import 'button.css';
@import 'text-and-background.css';
@import 'form.css';
@import 'bookshelf.css';
@import 'autocomplete.css';
@import 'footer.css';



/*
|--------------------------------------------------------------------------
| General
|--------------------------------------------------------------------------
*/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:focus {
    outline: 0 !important
}
html {
  font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Kanit', sans-serif;
}
body {
	font-family: 'Krub', sans-serif;
	font-size: 1rem !important;
}
p {
    font-size: 1rem;
}
p.lead {
    font-size: 1.25rem;
}
a:hover,
a:active,
a:focus,
a.text-dark:hover,
a.text-dark:active,
a.text-dark:focus,
a figcaption:hover,
a figcaption:active,
a figcaption:focus {
	color: #015BA9 !important;
	text-decoration: none;
	cursor: pointer !important;
}
a i:not(.fab):hover,
a i:not(.fab):active,
a i:not(.fab):focus {
	color: #015BA9 !important;
	text-decoration: underline;
}
.container { 
	padding-left: 25px !important; 
	padding-right: 25px !important; 
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: 'Kanit', sans-serif;
  color: #eee;
  opacity: 0.5; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: 'Kanit', sans-serif;
  color: #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
  font-family: 'Kanit', sans-serif;
  color: #eee;
}

.media img { width: 40px; height: 40px; }
.media img.big { width: 60px; height: 60px; }

.cursor-pointer { cursor: pointer !important; }

.font-pri-,
.font-pri-th { font-family: 'Kanit', sans-serif !important; }
.font-sec-th { font-family: 'Krub', sans-serif !important; }
.font-pri-en { font-family: 'Poppins', sans-serif !important; }
.font-sec-en { font-family: 'Kanit', sans-serif !important; }

.fs-bigger { font-size: 1.2em !important; }
.fs-large { font-size: 1.5em !important; }

/*
|--------------------------------------------------------------------------
| Page header
|--------------------------------------------------------------------------
*/
.page-header-pri {
	font-family: 'Kanit', sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
}
.page-header-sec {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	font-style: italic; 
}
.sub-page-header {
	font-family: 'Kanit', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	color: #015BA9;
}
.border-bottom-thick {
	border-bottom: 3px solid #333;
}




/*
|--------------------------------------------------------------------------
| Optimize for all devices
|--------------------------------------------------------------------------
*/
/*--- Small devices (landscape phones, 576px and up) ---*/
@media (min-width: 576px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1rem !important; }
	.page-header-pri {
		font-weight: 600;
		font-size: 1.2rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.2rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1rem;
	}
}
/*--- Medium devices (tablets, 768px and up) ---*/
@media (min-width: 768px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1rem !important; }
	.container { 
		padding-left: 15px !important; 
		padding-right: 15px !important; 
	}
	.page-header-pri {
		font-weight: 600;
		font-size: 1.4rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.4rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1rem;
	}
}
/*--- Large devices (desktops, 992px and up) ---*/
@media (min-width: 992px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1.25rem !important; }
	.page-header-pri {
		font-weight: 600;
		font-size: 1.8rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.8rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1.1rem;
	}
}
/*--- Extra large devices (large desktops, 1200px and up) ---*/
@media (min-width: 1200px) {
	html { font-size: 14px; }
	body,p { font-size: 1rem !important; }
	p.lead { font-size: 1.25rem !important; }
	.page-header-pri {
		font-weight: 600;
		font-size: 1.8rem;
	}
	.page-header-sec {
		font-weight: 400;
		font-size: 1.8rem;
	}
	.sub-page-header {
		font-weight: 300;
		font-size: 1.1rem;
	}
}

.user-type{
	font-size: 16px;
  border-bottom: 1px solid #DEDEDE;
	cursor: pointer;
}
.user-subtype{
	font-size: 16px;
  padding: 15px 0px;
  text-align: center;
  border-left: 1px solid #DEDEDE;
  border-right: 1px solid #DEDEDE;
}
.user-subtype:first-child{
	/*border-top: 1px solid #DEDEDE;*/
}
.user-subtype:last-child{
	border-radius: 0 0 50px 50px;
	border-bottom: 1px solid #DEDEDE;
}
.user-subtype.active, .user-subtype:hover{
	background-color: #FBD2DD;
	cursor: pointer;
}

.child-box{
	border: 1px solid #e45d82;
	border-radius: 20px;
	padding: 30px;
}

.custom-control{
	margin: 0 0 10px 0;
}
.custom-control-label {
	padding-left: 10px;
}

/* This is the default state */
.custom-radio .custom-control-label::before {
  /*background-color: darkorange;  /* orange */*/
}

/* This is the checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-color: #e45d82;  /* green */
  /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E); 
  border-radius: 50%;
}

/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
  color: #fff;
  background-color: #e45d82; /* red */
}
    
/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); /* pink, 25% opacity */
}

.form-group label.error{
  display: block;
}

.my-child-avatar{
	max-height: 250px;
	border-radius: 0;
}
.my-avatar{
	max-height: 250px;
}