@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap');
body {
    font-family: "Sarabun", sans-serif !important;
}
/*header all*/
.content_ticket {
	padding-bottom: 1rem;
}
.library-header {
	padding-bottom: 10px;
	

}
.card-header {
    display: flex;
    align-items: center;
	justify-content: end;
	margin-top: 10px;
    margin-bottom: 20px;
}
.sub-menubar   {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 12px;
	width: 100%;
    max-width: 100rem;
    margin: 0 auto;
}
.sub-menubar2 {
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
	width: 100%;
    max-width: 100rem;
    margin: 0 auto;
}
.sub-menubar .sub-menu , .sub-menubar2 .sub-menu {
    border-radius: 4px;
    background: #f5f5f5;
    padding: 8px 0px;
	text-align: center;
}
.sub-menubar .sub-menu.active a  , .sub-menubar2 .sub-menu.active a {
    color: #FFF;
}

.sub-menubar .sub-menu.active  , .sub-menubar2 .sub-menu.active {
    background: #189008;
}
@media (max-width: 768px) {

 
	.sub-menubar  , .sub-menubar2{
	   display: flex;
	   flex-direction: column !important;
   }
   
   
}
@media (max-width: 768px) {
    .mFont {
        margin: 15px 0;
        text-align: center;
        float: initial !important; 
    }
}
@media (max-width: 767px) {
	.library-header .container .title_main {
	 display: unset;
	}
}
.box-detail-library01 {
	margin-top: 50px;
}
.library-header .container .title_main {
	padding-bottom: 10px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e5e5e5;
}
.library-card {
	margin-top: 25px;
}
p.title-page {
    font-size: 14px;
    padding-top: 0px;
    margin-bottom: 5px;
    margin-top: 15px;
}
.library-card {

	margin-top: 25px;
}
p.library-page{

	font-size: 14px;
	padding-top: 0px;
	margin-bottom: 5px;
	margin-top: 15px;
}

h2.title-library {

	color: #000;
	margin: 18px 0px 15px 0px;
	font-size: 34px;

}

.mFont {
	margin-top: 10px;
	float: right;
}

button.btn.btn-default-up {

	color: #9B9B9B;
	background-color: #fff;
	border-color: #ccc;
	padding: 4px 17px;
}

button.btn.btn-default-up:hover {

	background-color: #f5f5f5
}


button.btn.btn-default-down {

	color: #9B9B9B;
	background-color: #fff;
	border-color: #ccc;
	padding: 4px 17px;

}

button.btn.btn-default-down:hover {

	background-color: #f5f5f5
}
/*--------------------*/

/*หน้า Gallery ticket*/

.ticket_box{
	/*padding:20px 20px 15px 20px;*/
	border:2px solid #f5f5f5;
	border-radius: 4px;
	margin-bottom: 25px;

}
@media (max-width: 1024px) {
    .mFont {
      display: none;
    }

}
@media screen and (max-width: 892px) { 
	.ticket_box{
		padding:0px;
	}
}

.ticket_box:hover{
	box-shadow: 0 0 12px rgba(0,0,0,.3);
	border-radius: 4px;
	border: 2px solid transparent;
	/*border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;*/ 
}

h3.header_ticket{
	/*margin: 5px 20px 0px 20px;*/
	font-size: 20px;
	text-align: left;
	color: #000;
	height: 39px;
	overflow: hidden;
}

.img_card{ margin: 10px 10px 15px 10px; }
.img_card img {
	height: 195px;
	object-fit: cover;
	object-position: center center;
}

.ticket_content{
	text-align: left;
	margin-bottom: 10px;
	color: #9B9B9B;
	font-weight: 200;
	overflow: hidden;
	height: 38px;
}

option {

	margin-left: 10px; 
}
.modal-header {

	border: none;
	height: 40px;
}

.box-gallery-card {

	margin: 0px 25px 15px 25px;
}

.paginationjs .paginationjs-pages li.active>a {

	background: #20498E !important;
}

/*.modal-content {

	height: 500px;

	}*/

	.btn-page {

		margin-bottom: 5px;
	}

	.btn-page:hover {
		color: #FFF;
		background-color: #189008
	}
	.modal-dialog {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.modal-content {
		height: auto;
		min-height: 100%;
		border-radius: 0;
	}
	.btn-page-tickets:hover, .btn-page-tickets:active, .btn-page-tickets:focus{

		color: #FFF;
		background-color: #2758AA;
	}
	#box_detail h3.header_ticket {
		text-align: center;
	}
	#box_detail>div.img_card{
		text-align: center;
	}
	#box_detail .ticket_content{
		text-align: center;
	}
	.btn-close-xmark{
		position: absolute;
		right: 2%;
		font-size: 30px;
	}
	.tranview{
		min-height: 60vh;
		padding: 5% 0px 5% 0px;
	}


	/* หน้า Facility */
	.freespace_or {
		float: left;margin:0px 2%;line-height: 28px;margin-bottom: 10px;
	}

	.nomargin-x { margin-right: 0px;margin-left: 0px; }
	.nomargin-y { margin-top: 0px;margin-bottom: 0px; }
	.facilities-panel { border-radius: 0px; }
	.btn_search {
		display: block;
		color: #fff!important;
		background: #C71517;
		background-color: #189008;
		border-color: #189008;
		border-radius: 2px;
		width: 100px;
		float: right;
	}

	.result_header {
		padding-bottom: 20px;
		color: #000;
		display: block;
		font-size: 1.2em;
	}

	/*--------------------------------------*/

	/*main*/

	.header-interest {
		background: #20498E;
		display: inline-block;
		color: #fff;
		border-radius: 4px;
		padding: 0;
		/*margin-bottom: 8px;*/
		margin:8px;
	}

	.box-link-suge {
		padding: 11px 13px;
	}

	p.title-headsugestion {
		font-family: "Sarabun", sans-serif;
		font-size: 18px;
		letter-spacing: 0.4px;
		margin-top: 14px;
		line-height: 22px;
	}
	.box-middle {
		padding: 6px 15px 6px 15px;
	}

	.media-object {
		display: block;
	}

	.box-link-suge-right {
		padding: 11px 13px;
	}

	p.title-headsugestion:hover {

		color: #189008;

	} 

	/*--------------------------------------*/
	/*ระบบโครงสร้างทางวิ่งและสถานี*/

	.btn-page.clicked {
		color: #FFF;
		background-color: #189008;
		padding: 8px 0;
	}
	.content_ticket li p {
      margin: 0;
	}
	h3.head-page-libralystruct {

		color: #333333; 
		font-weight: 500;
		font-size: 20px ;
		line-height: normal;
		margin-top: 15px; 
		text-align: center;
	}
	h3.head-page-libralystruct-left {
		font-size: 20px;
		color: #333; 
		margin-top: 15px; 
		text-align: left;
		margin-bottom: 2px;
	}
	p.library-detail-struc {

		color: #8e8e8e;
		font-weight: 300;
		letter-spacing: 0.4px;
		line-height: 22px;
		text-align: left;
	}

	.img-map img {

		width: 40%;
	}

	.col-md-3.col-sm-6.col-xs-12.box-btn-libraly {

		padding: 0px 6px;
	}

	/*--------------------------------------*/

	/*design*/

	p.head-page-libralydesign{

		color: #8e8e8e;
		font-weight: 300;
		letter-spacing: 0.4px;
		line-height: 22px;
		text-align: left;
	}
	.noppading ul {
		font-size: 14px;
	}
	li.li-library-detail-design{

		color: #8e8e8e;
		font-weight: 300;
		letter-spacing: 0.4px;
		line-height: 22px;
		text-align: left;
		font-size: 14px;
	}
	.head-page-libralydesign {
		font-size: 20px;
		color: #333; 
		margin-top: 15px; 
		text-align: left;
		margin-bottom: 2px;
	}

	.img-map-03 img{

		width: 60%;

	}
	p.library-title-design {

		margin-bottom: 5px;
		font-weight: 500;
		color: #333333;
	}
	.head-library {
		font-size: 20px ;
	}
	/*--------------------------------------*/

	/*smode*/

	.img-map-04 img {

		width: 80%;
		margin-bottom: 20px;
	}

	.table-facilities > tbody > tr > td { padding: 12px 30px; }


	/*--------------------------------------*/

	/*other*/


	p.library-head-other {
		
		font-size: 16px;
		height: 50px;
		line-height: 24px;
		overflow: hidden;
	}


	@media screen and (max-width: 892px) { 
		.panel-body { padding: 15px 0px; }
		.freespace_or { margin:0px 3%; }
		.freespace_or { margin-bottom: 0px; }
		.btn_search { width: 100%;margin-top: 2%; }	
	}

	/*--------------------------------------*/

	/*security*/

	p.library-title-security {

		margin-bottom: 5px;
		font-weight: 500;
		color: #333333;
		margin-top: 5px;


	}

	.img-map-2 img{

		width: 100%
	}
	/*--------------------------------------*/

	/*personel*/

	h4.head-page-libralyper {

		margin-top: 0px;
		text-align: left;
		margin-bottom: 2px;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
	}

	h4.head-page-libralyper2 {
		color: #333;
		margin-top: 5px;
		text-align: left;
		margin-bottom: 2px;
		font-size: 19px;
		line-height: 25px;

	}

	@media (max-width: 420px) and (min-width:  320px){ 


		.mFont{

			margin: 15px 0px;
			text-align: center;
			float: initial;

		}

		.img-map img {

			width: 100%;

		}
		.img-map-03 img{

			width: 100%;

		}

		.img-map-04 img {

			width: 100%;
		}

		.box-tab{

			padding: 0px;
		}
		.box-btn-libraly {

			padding: 0px;
		}

		.box-detail-library02 {

			padding: 0px;
		}
	}