
	.box-row {
	    padding: 0px 10px;
	}
	.box-body {
		width: 100%;
	    overflow: hidden;
	    position: relative;
        margin-top: -5px;
	}
			
		.box-body .box-map {
		    width: 100% ;
			transition: .5s;
		}
			.box-body .box-map.open {
			    width: calc(100% - 400px) ;
			}
				.box-body .box-map div#map {
				    width: 100% !important;
				    height: 40vw !important;
				}

		.box-body ,
		.box-body .box-list {
		    height: 40vw;
		}
		.box-body .box-list {
		    position: absolute;
		    z-index: 99;
		    right: 0px;
		    top: 0px;
			margin-right: -400px;
			width: 400px;
			background: #ffffff;
	        padding-right: 10px;
			transition: .5s;
		    border-left: 1px solid #e5e5e5;
		}
			.box-body .box-map.open + .box-list {
				margin-right: 0px;
			}
			.box-body .box-list .B-List-close {
			    position: absolute;
			    left: -30px;
			    top: 0px;
			    width: 30px;
			    height: 30px;
			    transition: .5s;
		        z-index: 99;
			    background: url(../images/expand.jpg) center center;
			}
			.box-body .box-map.open + .box-list .B-List-close {
		        background: url(../images/close.jpg) center center;
			}
			.box-body .box-list .B-List {
			    overflow: auto;
			    width: 100%;
			    height: calc(100% - 10px);
			    padding-right: 10px;
			    margin: 5px 0px;
			}
				.box-body .box-list .B-List::-webkit-scrollbar-track {
					background-color: #e5e5e5;
				}
				.box-body .box-list .B-List::-webkit-scrollbar {
					width: 6px;
					background-color: #e5e5e5;
				}
				.box-body .box-list .B-List::-webkit-scrollbar-thumb {
					background-color: #113f6e;
				}
					.box-body .box-list .B-List .List {
					    border-bottom: 1px solid #e5e5e5;
					}
					.box-body .box-list .B-List .List::before {
						content: "";
						float: left;
					    width: 15px;
					    height: 31px;
					    margin-top: 4px;
					    margin-left: 4px;
				        background: url('../images/non.svg') center;
					    background-repeat: no-repeat;
					    background-size: contain;
					    transition: .5s;
					}
					.box-body .box-list .B-List .List.on::before {
						background-image: url('../images/check.svg');
					}
						.box-body .box-list .B-List .List a {
						    padding: 4px;
						    color: #0e3c5d;
					        height: 40px;
						    line-height: 31px;
					        text-overflow: ellipsis;
						    overflow: hidden;
						    white-space: nowrap;
						    display: block;
						}
							.box-body .box-list .B-List .List a > span {
						        color: #000;
							    min-width: 62px;
							    float: left;
							    text-align: center;
							    display: block;
							    margin-right: 10px;
							    padding: 0px 8px;
							}
							
				div#B-summary {
				    background: #191919;
				    color: #fff;
				    cursor: pointer;
				    padding: 2.5px 15px;
				    position: absolute;
				    left: -150px;
				    top: 0px;
			        word-break: break-all;
				    transition: .5s;
				    z-index: 99;
				}
					div#B-summary:hover , div#B-central:hover  {
					    background: #848484;
					}
					
				div#B-central {
				    background: #191919;
				    color: #fff;
				    cursor: pointer;
				    padding: 2.5px 15px;
				    position: absolute;
				    left: -250px;
				    top: 0px;
			        word-break: break-all;
				    transition: .5s;
				    z-index: 99;
				}
				img#btnCenterTH {
				    position: absolute;
				    left: 14px;
				    top: 336px;
				    width: 30px;
				    height: 30px;
				    transition: .5s;
				    z-index: 99;
				}
			    
	#colorbox {
		left: 50% !important;
	    transform: translateX(-50%) !important;
	}
	#colorbox, #colorbox div {
	    max-width: 450px;
	}
	#cboxLoadedContent {
	    border: 0px !important;
    }


	.select2-container {
	    width: 100% !important;
    }
    .select2-container--default .select2-selection--single {
	    border: 0 !important;
	    border-radius: 0 !important;
	    height: 33px !important;
        margin-top: -3px;
	}
	#frmSearch .select {
	    width: 49% !important;
	    -webkit-padding-end: 2% !important;
	}
	.select2-container--open .select2-dropdown--below {
	    border-top: 1px solid #aaa;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow::after {
	    content: "\e114";
	    font-family: 'Glyphicons Halflings';
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    right: 6px;
	    font-size: .6em;
	    color: #328bc3 !important;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		opacity: 0;
	}
/* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.box-body .box-list .B-List-close {
		display: none;
	}
	.box-body {
	    height: auto;
	    padding-bottom: 30px;
	    margin: 10px 20px 0px 20px;
	    width: calc(100% - 40px);
	}
	.box-body .box-map {
	    width: 100% !important;
	}
	.box-body .box-list {
	    width: 100%;
	    height: auto;
	    float: none;
	    position: initial;
	    padding: 0px;
        margin-top: 30px;
	}
	.box-body .box-list .B-List {
	    height: calc(30vh - 6px);
    }
	.box-body .box-map {
	    height: auto;
	    float: none;
	    position: initial;
	}   
	.box-body .box-map div#map {
	    width: calc(100vw - 40px) !important;
	    height: calc(50vh - 105px) !important;
	}
	.ldmap_popup_mini iframe.popupMap {
	    width: calc(100% - 2px);
	    height: calc(100% - 2px);
	    border: 1px solid #a7a7a7;
	}
	div#B-summary ,
	div#B-central {
	    left: auto;
	    right: 0px;
	}

}


/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {

	.box-body .box-list .B-List-close {
		display: none;
	}
    .box-body {
	    height: auto;
	    padding-bottom: 30px;
	    margin: 10px 20px 0px 20px;
	    width: calc(100% - 40px);
	}
	.box-body .box-map {
	    width: 100% !important;
	}
	.box-body .box-list {
	    width: 100%;
	    height: auto;
	    float: none;
	    position: initial;
	    padding: 0px;
        margin-top: 30px;
	}
	.box-body .box-map {
	    height: auto;
	    float: none;
	    position: initial;
	}   
	.box-body .box-map div#map {
	    width: calc(100vw - 40px) !important;
	}
	@media only screen and (orientation:portrait){
		.box-body .box-map div#map {
		    height: calc(90vh - 105px) !important;
		}
	}
	@media only screen and (orientation:landscape){
		.box-body .box-map div#map {
		    height: calc(100vh - 86px) !important;
		}
		img#btnCenterTH {
		    top: 2px;
		    left: 140px;
		}
	}
	.ldmap_placeholder .ldmap_popup_mini {
	    min-height: 189px;
	}
	.ldmap_popup_mini iframe.popupMap {
	    width: calc(100% - 2px);
	    height: calc(100% - 2px);
	    border: 1px solid #a7a7a7;
	}
	div#B-summary  
	 {
	    left: auto;
	    right: 0px;
	}
	div#B-central {
	    left: auto;
	    right: 120px;
	}
	#colorbox div {
	    width: 100% !important;
	}
	#cboxContent {
	    margin: 0px !important;
	}
	div#cboxMiddleLeft {
	    display: none;
    }
	#colorbox {
	    width: 95% !important;
	}
	#frmSearch .select {
	    width: 100% !important;
	    -webkit-padding-end: 0px !important;
	}
}
