body {
  font-family:'Prompt'; 

}

.font-01 {
  font-family: 'Prompt';
}
.fcb { color: #000;  }
.content-header {
background-color: #F3F4F7; border-top: 1px solid #CFD8DC; border-top-width: 0.1ex; 

}
.breadcrumb {
	background-color: #F3F4F7; text-align: right;
}
.content {
	background-color: #F3F4F7; margin-top: 0px;  padding-left: 30px; padding-right: 30px;
}

th {
    background-color: #CFD8DC;
}
.mbtn { padding: 5px; }
.btn-bd-blue { border: 1px solid #42a5f5 ;  }
.btn-bd-red { border: 1px solid  red;  }

.mtmenu ul { list-style: none; padding: 0px;  }
.mtmenu ul li { line-height: 40px; border-bottom: 1px dotted #D3D3D3; font-weight: bold; font-size: 15px; padding: 10px  }

.ftmenu ul { list-style: none; padding: 0px;  }
.ftmenu ul li { line-height: 40px; border-bottom: 1px dotted #D3D3D3;  }
.fslim { font-weight: lighter;  }

.bg-nav { background-color: #0F4C81 ; color: #FFF;  }
.bg-white { background-color: #FFFFFF;  }
.opt-input { height: 60px; width: 100%; line-height: 35px; font-size: 25px; text-align: center; border: solid 2px #CFD8DC;  }
.bg-orange-lighten-4 { background-color: #ffe0b2;  }
.qty-input { width: 100%;  }
.ng-memorysof { background-color: #0277bd; width: 100%; height: 101vh; margin-top: -10px; color: #FFFFFF;  }
.f-100 {  font-size: 100px;   }
.f-40 {  font-size: 40px;   }
.f-30 {  font-size: 30px;   }
.f-15 {  font-size: 15px;   }
.f-17 {  font-size: 17px;   }
.f-20 {  font-size: 20px;   }
.f-25 {  font-size: 25px;   }
.f-15 {  font-size: 15px;   }
.f-14 {  font-size: 14px;   }
.f-13 {  font-size: 13px;   }
.f-12 {  font-size: 12px;   }
.f-bl { font-weight: bold;  }
.txt-black { color: #000;  }
.txt-cyan { color: #00acc1 ;  }
.bg-cyan { background-color: #26c6da;  }
.bg-grayss { background-color: #F8F8FF;  }
.bg-gray { background-color: #F3F4F7;  }
.bg-black { background-color: #424242; color: #FFF;  }
.dblock { display: block;  }
.border-dot { border-style: dotted;    }
.border-line { border: solid 1px #F3F4F7;    }
.textB { font-weight: bold;  }
.text-black {color: #000; }
.alink { cursor: pointer; }
.linklist { display: block; }
.pad-2 { padding: 5px; }
.pad-5 { padding: 5px; }
.pad-10 { padding: 10px; }
.pad-20 { padding: 20px; }
.pad-top-5 { padding-top: 5px; }
.pad-top-8 { padding-top: 8px; }
.pad-top-10 { padding-top: 10px; }
.pad-top-15 { padding-top: 15px; }
.pad-top-20 { padding-top: 20px; }
.pad-top-25 { padding-top: 25px; }
.pad-top-30 { padding-top: 30px; }
.pad-bottom-50 { padding-bottom: 50px; }
.pad-bottom-10 { padding-bottom: 10px; }
.pad-left-20 { padding-left: 20; }
.pad-right-20 { padding-right: 20; }
.pad-left-10 { padding: 20; }
.padrl-10 { padding-left: 20px; padding-right: 20px; }
.linex { line-height: 35px;  }
.line25 { line-height: 25px;  }
.line40 { line-height: 40px;  }
.line100 { line-height: 100px;  }
.ovf { overflow-y: scroll;  }
.h500 { height:470px;  }
.w90 { width:99%;  }
.max-200 { max-height: 200px; overflow-y: scroll; }
.max-300 { max-height: 300px; overflow-y: scroll;  }
.min-663 { min-height: 663px; }
.min-600 { min-height: 600px; }

.min-630 { min-height: 630px; }
.min-650 { min-height: 650px; }
.min-609 { min-height: 609px; }
.min-700 { min-height: 700px; }
.min-612 { min-height: 612px; }
.min-600 { min-height: 600px; }
.min-653 { min-height: 653px; }
.min-400 { min-height: 400px; }
.min-500 { min-height: 500px; }
.min-580 { min-height: 580px; }
.min-570 { min-height: 570px; }
.min-550 { min-height: 550px; }
.min-575 { min-height: 575px; }
.min-150 { min-height: 150px; }
.min-120 { min-height: 120px; }
.min-100 { min-height: 100px; }
.min-80 { min-height: 80px; }
.min-60 { min-height: 60px; }
.min-50 { min-height: 50px; }
.min-200 { min-height: 200px; }
.min-230 { min-height: 230px; }
.min-250 { min-height: 250px; }
.min-300 { min-height: 300px; }
.min-350 { min-height: 350px; }
.min-380 { min-height: 380px; }
.min-340 { min-height: 340px; }
.min-320 { min-height: 320px; }
.min-390 { min-height: 390px; }
.min-490 { min-height: 490px; }
.min-400 { min-height: 400px; }
.min-450 { min-height: 450px; }
.min-900 { min-height: 900px; }
.h80 { height: 80px;  }
.h570 {  height: 650px; overflow-y: auto; }
.w95p { width: 95%;   }
.w15p { width: 15%;   }
.w65p { width: 65%;   }
.w20p { width: 20%;   }
.tbhead { 
	border-top: 1px solid #000; border-bottom: 1px solid #000; height: 25px; line-height: 25px; 
	font-weight: bold; text-align: center;  margin-bottom: 5px;  
}
.tdline { line-height: 20px;   }
.tdtop { border-top: 1px solid #000; margin-top: 5px;    }
.mgb-10 { margin-bottom: 10px; }
.mgt-2 { margin-top: -10px; }
.mgt-5 { margin-top: 5px; }
.mgt-10 { margin-top: 10px; }
.mgt-15 { margin-top: 15px; }
.mgt-20 { margin-top: 20px; }
.mgt-30 { margin-top: 30px; }
.mgt-50 { margin-top: 50px; }
.mgt-60 { margin-top: 60px; }
.mgt-70 { margin-top: 70px; }
.mgt-100 { margin-top: 100px; }
.mgt-110 { margin-top: 110px; }
.mgt-130 { margin-top: 130px; }
.mgr-50 { margin-right: 50px; }
.mgr-30 { margin-right: 30px; }
.mgl-10 { margin-left: 10px;}
.mgl-20 { margin-left: 20px;}
.mgl-50 { margin-left: 50px;}
.mgl-100 { margin-left: 100px;}
.mgt-40 { margin-top: 40px; }
.h50px { height: 50px;  }
.h100 { height: 100vh;  }
.w-100 { width: 100%; }
.w100 { width: 100px; margin-right: 10px;  }
.w200 { width: 200px; margin-right: 10px;  }
.w300 { width: 300px; margin-right: 10px;  }
.w70 { width: 100px; margin-right: 10px;  }
.htext { height: 350px;  }
.fl { float: left;  }
.f20 { font-size: 20px; font-weight: bold;  }
.mgr-5 { margin-right: 5px; }
.mgr-10 { margin-right: 10px; }
.font-18 { font-size: 18px;  }
.font-25 { font-size: 25px; font-weight: bold; }
.font-35 { font-size: 35px; font-weight: bold; }
.font-45 { font-size: 45px; font-weight: bold; }
.font-50 { font-size: 50px; font-weight: bold; }
.font-70 { font-size: 70px; font-weight: bold; }
.tstatus { padding: 6px; padding-right: 20px; padding-left: 20px; background-color: #616161; color: #FFFFFF; font-size: 15px;  }
.hclose { font-size: 30px; margin-right: 10px; cursor: pointer;  }
.bclose { font-size: 20px; margin-right: 10px; cursor: pointer;  }
.user-row {
    margin-bottom: 14px;
}
.font-12 { font-size: 11px;  }
.pad-10 { padding: 10px;  }
.pad-b-10 { padding: 10px; padding-top: 0px; padding-bottom: 0px; font-size: 15px; }
.border-bottom { width: 100%; border-bottom: 1px dotted #f5f5f5;   }
.border-bottom-t { border-bottom: 1px dotted #D3D3D3; margin-bottom: 5px;   }
.border-top-dot {  border-top: 1px dotted #D3D3D3; margin-top: 5px;   }
.wd-90 { width: 900px;  }
.user-row:last-child {
    margin-bottom: 0;
}
.cbg-gray { background-color: #f5f5f5;  }

.pbft {  
    border-top-style: dotted;
    border-bottom-style: dotted;  
    padding-top: 5px; 
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;

}
.pbt {  
    border-top-style: dotted; 
    bottom-top: 1px; 
    padding-top: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}


.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}

#mainImg .mainBody {
  background: #fafafa;
  padding: 0px;
  text-align: center;
  width: 95%; 
  margin: auto;
  margin-bottom: 30px;
  min-height: 150px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #bdbdbd;
  overflow: hidden;
}

.card-img{  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 150px;
  max-width: 100%;
  color: #eee;
  cursor: pointer;
}

.affix {   
    top: 0px;
    left: 0px;
    height: 100%;   
    width: 100%;
    z-index: 999; 
    overflow-x: hidden;
    position:fixed;
    padding: 0px;
    background-color: #f5f5f5;  
}
.aclose {  font-size: 30px; color: #FFFFFF; margin-right: 20px; cursor: pointer; }
.atop {
  top:0;width:100%;height: 50px; position:absolute; padding: 5px; 
  background-color: #039be5; color: #FFFFFF;
}
.headBar {margin-bottom: 10px; padding-top: 10px; padding-left: 30px; padding-right: 30px; background-color: #f5f5f5;  }
.abottom {
  bottom:0;width:100%; height: 50px; padding: 5px;  position:absolute; 
  border-top: 1px solid #F5F5F5; background-color: #039be5; color: #FFFFFF;
}

.abody {
  width:100%;
  padding: 10px;
  background-color: #FFFFFF;
}

.h100 { min-height:calc(100%);  }
.h50 { min-height:35px; width: 100%; float: left; overflow-y:scroll;  overflow-x: hidden; }


.scroll-area{
  width:100%;
  height:calc(100% - 100px); 
  float:left;
  margin-top: 50px;
  overflow-y:scroll;
  overflow-x: hidden;
  background-color: #f5f5f5;
  border-top: 1px solid #F5F5F5;
}


.invoice-title h2, .invoice-title h3 {
    display: inline-block;
}

.table > tbody > tr > .no-line {
    border-top: none;
}

.table > thead > tr > .no-line {
    border-bottom: none;
}

.table > tbody > tr > .thick-line {
    border-top: 2px solid;
}


.dropdown-user {
    margin: 13px 0;
    padding: 5px;
    height: 100%;
}

.dropdown-user:hover {
    cursor: pointer;
}

.table-user-information > tbody > tr {
    border-top: 1px solid rgb(221, 221, 221);
}

.table-user-information > tbody > tr:first-child {
    border-top: 0;
}


.table-user-information > tbody > tr > td {
    border-top: 0;
}
.nav-tabs { font-weight: bold; }



/*** Print ***/
.bbtop { border-top: 2px solid #000;  }
.btop { border-top: 1px solid #000;  }
.bbottom { border-bottom: 1px solid #000;  }
.line {  width: 100%; line-height: 15px; float: left; }
.W-100 {  width: 100%; float: left;  }
.W-48 {  width: 49%; float: left; border-right: 2px solid  }
.W-50 {  width: 50%; float: left;  }
.W-55 {  width: 55%; float: left;  }
.W-70 {  width: 70%; float: left;  }
.W-60 {  width: 60%; float: left;  }
.W-10 {  width: 10%; float: left;  }
.W-5 {  width: 5%; float: left;  }
.W-15 {  width: 15%; float: left;  }
.W-80 {  width: 80%; float: left;  }
.W-20 {  width: 20%; float: left;  }
.W-75 {  width: 75%; float: left;  }
.W-25 {  width: 25%; float: left;  }
.W-35 {  width: 35%; float: left;  }
.W-40 {  width: 40%; float: left;  }
.W-30 {  width: 30%; float: left;  }
.W-90 {  width: 90%; float: left;  }
.dotxxx { border-bottom: black 1px dotted; height: 25px; width: 100%;  }
.h-842 { height: 842px;  }
.h-50 { height: : 50px; }
.h-250 { width: 100%; height: : 250px; float: left; }
.h-600 { width: 100%; height: : 600px; float: left; border-bottom: solid 1px #000;  }
.fl {  float: left;  }
.bgbb {  background-color: rgb(221, 221, 221);  }
.f-30 { font-size: 30px;  }
.f-25 { font-size: 25px;  }
.f-10 { font-size: 10px;  }
.nbl { border-left: none;  }
.nbr { border-right: none;  }
.W-200px {  width: 200px; float: left;  }
.bgg { background-color: #ececec;  }
.mgt-50 { margin-top: 50px;  }
.border-right {  border-right: 1px solid #F5F5F5; height: auto; }
.border-rightB {  border-right: 1px solid #bdbdbd; height: auto; }
.border-left {  border-left: 1px solid #F5F5F5; height: auto; }
.border-leftB {  border-left: 1px solid #bdbdbd; height: auto; }
.border-top {  border-top: 1px solid #F5F5F5;  }
.border-topB {  border-top: 1px solid #bdbdbd;  }
.main-header { z-index: 888;  }

/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */  
@media all  
{  
    .page-break { display:none; }  
    .page-break-no{ display:none; }  
}  
@media print  
{  
    .page-break { display:block;height:1px; page-break-before:always; }  
    .page-break-no{ display:block;height:1px; page-break-after:avoid; }   
}  


.modal {  z-index: 1100;  }
.modal-lg {  z-index: 1100; width: 100%;  }
.modal-md {  z-index: 1100; width: 70%;  }

/* .modal-fullscreen */

.modal-fullscreen {
  background: transparent;
}
.modal-fullscreen .modal-content {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}


/* .modal-transparent */

.modal-transparent {
  background: transparent;
}
.modal-transparent .modal-content {
  background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}

/* .modal-fullscreen */

.modal-fullscreen {
  background: transparent;
}
.modal-fullscreen .modal-content {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

/* .modal-fullscreen size: we use Bootstrap media query breakpoints */

.modal-dialog-lg {
  margin: 0; margin-top: 10px; margin-bottom: 10px;  
  background: #ffffff;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
}

.modal-dialog-md {
  margin: 0; margin-top: 10px; margin-bottom: 10px;  
  background: #ffffff;
  margin-right: auto;
  margin-left: auto;
  width: 60%;
}

.modal-fullscreen .modal-dialog {
  margin: 0; margin-top: 10px; margin-bottom: 10px;
  background: #ffffff;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
     width: 1170px;
  }
}



/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */  
@media all {  
  .page-break { display:none; }  
  .page-break-no{ display:none; }  
}  
@media print {  
  .page-break { display:block;height:1px; page-break-before:always; }  
  .page-break-no{ display:block;height:1px; page-break-after:avoid; }   
}  

@media screen {
  #printSection {
      display: none;
  }
}

.printable { display: none; }
.printable1 { display: none; }
.printable2 { display: none; }
.printable3 { display: none; }

@media print{
    .non-printable { display: none; }
    .printable { display: block; }
    .printable1 { display: block; }
    .printable2 { display: block; }
    .printable3 { display: block; }    
}

/*** Slip Termal ***/
.pline { width: 100%; height: 25px; line-height: 25px; float: left;  }
.pcenter {  text-align: center;  }
.pleft {  text-align: left;  }
.pright {  text-align: right;  }
.pl50 {  width: 50%; float: left;  }
.termalSlip {  width:100%; height:inherit; margin:auto;  }

/*** Preload ***/
body { height: 100%; }
.pageload {  height: 100vh;  }

.cssload-title {
	margin: 50px auto;
  text-align: center;
	color: #FFF;
}
.cssload-title h1,h2,h3,h4{
	margin:auto;
}

.cssload-thecube {
	width: 73px;
	height: 73px;
	margin: 0 auto;
	margin-top: 100px;
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}

.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(43,160,199);
	animation: cssload-fold-thecube 2.76s infinite linear both;
		-o-animation: cssload-fold-thecube 2.76s infinite linear both;
		-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
		-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
		-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
	transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);
		-o-transform: scale(1.1) rotateZ(90deg);
		-ms-transform: scale(1.1) rotateZ(90deg);
		-webkit-transform: scale(1.1) rotateZ(90deg);
		-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);
		-o-transform: scale(1.1) rotateZ(180deg);
		-ms-transform: scale(1.1) rotateZ(180deg);
		-webkit-transform: scale(1.1) rotateZ(180deg);
		-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);
		-o-transform: scale(1.1) rotateZ(270deg);
		-ms-transform: scale(1.1) rotateZ(270deg);
		-webkit-transform: scale(1.1) rotateZ(270deg);
		-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
	animation-delay: 0.35s;
		-o-animation-delay: 0.35s;
		-ms-animation-delay: 0.35s;
		-webkit-animation-delay: 0.35s;
		-moz-animation-delay: 0.35s;
}
.cssload-thecube .cssload-c3:before {
	animation-delay: 0.69s;
		-o-animation-delay: 0.69s;
		-ms-animation-delay: 0.69s;
		-webkit-animation-delay: 0.69s;
		-moz-animation-delay: 0.69s;
}
.cssload-thecube .cssload-c4:before {
	animation-delay: 1.04s;
		-o-animation-delay: 1.04s;
		-ms-animation-delay: 1.04s;
		-webkit-animation-delay: 1.04s;
		-moz-animation-delay: 1.04s;
}



@keyframes cssload-fold-thecube {
	0%, 10% {
		transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-o-keyframes cssload-fold-thecube {
	0%, 10% {
		-o-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-o-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-o-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-ms-keyframes cssload-fold-thecube {
	0%, 10% {
		-ms-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-ms-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-ms-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-webkit-keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-webkit-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-webkit-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

@-moz-keyframes cssload-fold-thecube {
	0%, 10% {
		-moz-transform: perspective(136px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-moz-transform: perspective(136px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-moz-transform: perspective(136px) rotateY(180deg);
		opacity: 0;
	}
}

.info-box-icon-info { width: 30%;  }
.text-white { color: #FFF; }


.user-details {position: relative; padding: 0;}
.user-details .user-image {position: relative;  z-index: 1; width: 100%; text-align: center;}
 .user-image img { clear: both; margin: auto; position: relative;}

.user-details .user-info-block {width: 100%; position: absolute; top: 5px; background: rgb(255, 255, 255); z-index: 0; padding-top: 10px;}
 .user-info-block .user-heading {width: 100%; text-align: center;}
 .user-info-block .navigation {float: left; width: 100%; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #428BCA; border-top: 1px solid #428BCA;}
  .navigation li {float: left; margin: 0; padding: 0;}
   .navigation li a {padding: 10px 10px; float: left;}
   .navigation li.active a {background: #428BCA; color: #fff;}
 .user-info-block .user-body {float: left; width: 100%;}
  .user-body .tab-content > div {float: left; width: 100%;}
  .user-body .tab-content h4 {width: 100%; margin: 5px 0; color: #333;}


table-user-information > tbody > tr {
    border-top: 1px solid rgb(221, 221, 221);
}

.table-user-information > tbody > tr:first-child {
    border-top: 0;
}
.table-user-information > tbody > tr > td {
    border-top: 0;
}


.radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}
.img_zone {  width: 100%; height: 100%; text-align: center;  }


/* *********  media gallery  **************************** */

.thumbnail .image {
  height: 120px;
  overflow: hidden;
}
.caption {
  padding: 9px 5px;
  background: #F7F7F7;
}
.caption p {
  margin-bottom: 5px;
}
.thumbnail {
  height: 190px;
  overflow: hidden;
}
.view {
  overflow: hidden;
  position: relative;
  text-align: center;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
}
.view .mask, .view .content {
  position: absolute;
  width: 100%;
  overflow: hidden;
  top: 0;
  left: 0
}
.view img {
  display: block;
  position: relative
}
.view .tools {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.35);
  margin: 43px 0 0 0;
}
.mask.no-caption .tools {
  margin: 90px 0 0 0;
}
.view .tools a {
  display: inline-block;
  color: #FFF;
  font-size: 18px;
  font-weight: 400;
  padding: 0 4px;
}
.view p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 10px 20px 20px;
  text-align: center
}
.view a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 1px #000
}
.view-first img {
  transition: all 0.2s linear;
}
.view-first .mask {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease-in-out;
}
.view-first .tools {
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.view-first p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}
.view-first:hover img {
  transform: scale(1.1);
}
.view-first:hover .mask {
  opacity: 1;
}
.view-first:hover .tools, .view-first:hover p {
  opacity: 1;
  transform: translateY(0px);
}
.view-first:hover p {
  transition-delay: 0.1s;
}

/* *********  /media gallery  **************************** */




.barcodeTop {
margin-top: 20px;
}

@media screen {
  #printSection {
      display: none;
  }
}

.printable { display: none; }
.printable1 { display: none; }
.printable2 { display: none; }
.printable3 { display: none; }


@media print{
    .non-printable { display: none; }
    .printable { display: block; }
    .printable1 { display: block; }
    .printable2 { display: block; }
    .printable3 { display: block; }
    .printable4 { display: block; }
    .printable5 { display: block; }
    .printable6 { display: block; }
}

/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */  
@media all {  
  .page-break { display:none; }  
  .page-break-no{ display:none; }  
}  
@media print {  
  .page-break { display:block;height:1px; page-break-before:always; }  
  .page-break-no{ display:block;height:1px; page-break-after:avoid; }   
}  


.slip_page {  width:545px; height:350px; margin:auto; padding-top:20px; overflow: hidden; }
.slip_page_01 {  width:380px; height:545px; margin:auto; padding-top:20px; overflow: hidden;  }

.tbarcode {  width: 400px; font-size: 10px; text-align: center; height: auto; border: 1px solid #000000; padding: 20px; }
.slip_main {  width: 100%; float: left; }
.slip_left {  width: 35%; float: left; margin-right: 5px; }
.slip_center {  width: 55%; float: left; text-align: left;   }
.slip_center .btop {  width: 100%;  height: auto; font-size: 14px; color:#ff8533; margin-bottom: 20px; margin-top: 10px;   }
.slip_center .btop .btopl {  width: 65%; float: left; text-align: center;   }
.slip_center .btop .btopr {  width: 35%; float: left; text-align: center;  }
.slip_center .bems {  width: 100%;  height: 90px; text-align: center; font-weight: normal;}
.slip_right {  width: 37%; float: left; text-align: center; }
.slip_right .bbox { width: 100%;  height: 55px; font-size: 8px; line-height: 10px; border: 1px solid #000000; padding: 1px; text-align: center; margin-top: 5px;  }
.f24 { font-size: 24px;   }
.f18 { font-size: 18px;  }
.slip_right .bboxh30 { width: 100%;  height: 35px; font-size: 8px; line-height: 10px; border: 1px solid #000000; padding: 1px; text-align: center; margin-top: 5px;   }
.slip_title { width: 100%; height: 60px;  float: left; }
.slip_tile_font { font-size: 10px; font-weight: bold;  }
.slip_tile_01_font { font-size: 14px; font-weight: bold;  }
.slip_tile_02_font { font-size: 20px; font-weight: bold; margin-left: 20px; margin-top: 10px;  }
.slip_body_font { font-size: 9px; padding-left: 5px;  }
.slip_body {  width:100%; float: left; line-height: 20px; height:220px; font-size: 16px;   }
.slip_line {  width: 100%; float: left; }
.slip_line_foot {  width:100%; float: left; height:50px;   }
.fblue { color: #4d79ff; }
.fred { color: #ff8533; }
.pad15 { padding-left: 15px;  }
.pad5 { padding-left: 5px;  }
.padr50 { padding-right: 50px;  }
.h40 { height: 40px; line-height: 9px;  }
.fontZcode { font-size: 25px; font-weight: bold;  }

.previewText { width: 100%; height: 200px; padding-top: 60px; font-size: 50px; border: dotted 1px ;    }

.search-input {
  padding: 10px 10px;
  height: 52px;
  position: relative;
}

.cdefault { cursor: default;  }
.search-input::before {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAQJJREFUKBWVkr2uQUEUhf3ET6GRaC5aFRoJKrf1BKpb8SwqovYGXkCj00k0QnRKEYkILYobvpUYmeMMyVnJl7P3mjN7Zu9zwiGv2qRFyMMSRrAFp6JPN8XzBj+wgDkUYAg7WINTYdwpDECxrRLJHeq2accdkgm8bzTvNAg2EDOGeUYI1KNO1gkuzTA1g8T7ojbn4ONQWPuHPWgeHmnzCqoe15tkSNPgPEAn68oVcOmA2XMtGK9FoE/VhOTTVNExqLCGZnxCv2pYauEC6lF0oQxX6IOvb7yX9NPEQafan+aPXDdQC18LsO6Tip5BBY6gIQaSbnMCFRCBZRcIvFkbsvCr4AFGOCxQy+JdGQAAAABJRU5ErkJggg==');
  display: block;
  position: absolute;
  width: 15px;
  z-index: 3;
  height: 15px;
  font-size: 20px;
  top: 11px;
  left: 16px;
  line-height: 32px;
  opacity: 0.6;
}

.search-input > input {
  width: 100%;
  font-size: 18px;
  border: 1px solid #D3D3D3;
  line-height: 22px;
  padding: 5px 10px 5px 25px;
  height: 32px;
  position: relative;
}

.search-input > input:focus {
  outline: none;
}


/*stepwizard*/

.stepwizard-step p {
    margin-top: 10px;    
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;     
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
    
}

.stepwizard-step {    
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.stepwizard-content{
 border:none !important;
 float: left !important;
 margin-top: 0 !important;
 padding: 15px !important;
 width: 100% !important;
 
}

.stw {  border:none !important;  }


/*** Time line ***/

.timeline-centered {
    position: relative;
    margin-bottom: 30px;
}

    .timeline-centered:before, .timeline-centered:after {
        content: " ";
        display: table;
    }

    .timeline-centered:after {
        clear: both;
    }

    .timeline-centered:before, .timeline-centered:after {
        content: " ";
        display: table;
    }

    .timeline-centered:after {
        clear: both;
    }

    .timeline-centered:before {
        content: '';
        position: absolute;
        display: block;
        width: 4px;
        background: #f5f5f6;
        left: 50%;
        top: 20px;
        bottom: 20px;
        margin-left: -4px;
    }

    .timeline-centered .timeline-entry {
        position: relative;
        width: 50%;
        float: right;
        margin-bottom: 70px;
        clear: both;
    }

        .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
            content: " ";
            display: table;
        }

        .timeline-centered .timeline-entry:after {
            clear: both;
        }

        .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
            content: " ";
            display: table;
        }

        .timeline-centered .timeline-entry:after {
            clear: both;
        }

        .timeline-centered .timeline-entry.begin {
            margin-bottom: 0;
        }

        .timeline-centered .timeline-entry.left-aligned {
            float: left;
        }

            .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
                margin-left: 0;
                margin-right: -18px;
            }

                .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
                    left: auto;
                    right: -100px;
                    text-align: left;
                }

                .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
                    float: right;
                }

                .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
                    margin-left: 0;
                    margin-right: 70px;
                }

                    .timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
                        left: auto;
                        right: 0;
                        margin-left: 0;
                        margin-right: -9px;
                        -moz-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                        -webkit-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                        transform: rotate(180deg);
                    }

        .timeline-centered .timeline-entry .timeline-entry-inner {
            position: relative;
            margin-left: -22px;
        }

            .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after {
                content: " ";
                display: table;
            }

            .timeline-centered .timeline-entry .timeline-entry-inner:after {
                clear: both;
            }

            .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after {
                content: " ";
                display: table;
            }

            .timeline-centered .timeline-entry .timeline-entry-inner:after {
                clear: both;
            }

            .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
                position: absolute;
                left: -100px;
                text-align: right;
                padding: 10px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span {
                    display: block;
                }

                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child {
                        font-size: 15px;
                        font-weight: bold;
                    }

                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child {
                        font-size: 12px;
                    }

            .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
                background: #fff;
                color: #737881;
                display: block;
                width: 40px;
                height: 40px;
                -webkit-background-clip: padding-box;
                -moz-background-clip: padding;
                background-clip: padding-box;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
                text-align: center;
                -moz-box-shadow: 0 0 0 5px #f5f5f6;
                -webkit-box-shadow: 0 0 0 5px #f5f5f6;
                box-shadow: 0 0 0 5px #f5f5f6;
                line-height: 40px;
                font-size: 15px;
                float: left;
            }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
                    background-color: #303641;
                    color: #fff;
                }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary {
                    background-color: #ee4749;
                    color: #fff;
                }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
                    background-color: #00a651;
                    color: #fff;
                }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
                    background-color: #21a9e1;
                    color: #fff;
                }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
                    background-color: #fad839;
                    color: #fff;
                }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
                    background-color: #cc2424;
                    color: #fff;
                }

            .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
                position: relative;
                background: #f5f5f6;
                padding: 1.7em;
                margin-left: 70px;
                -webkit-background-clip: padding-box;
                -moz-background-clip: padding;
                background-clip: padding-box;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
                    content: '';
                    display: block;
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-width: 9px 9px 9px 0;
                    border-color: transparent #f5f5f6 transparent transparent;
                    left: 0;
                    top: 10px;
                    margin-left: -9px;
                }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2, .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p {
                    color: #737881;
                    font-family: "Noto Sans",sans-serif;
                    font-size: 12px;
                    margin: 0;
                    line-height: 1.428571429;
                }

                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p + p {
                        margin-top: 15px;
                    }

                .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 {
                    font-size: 16px;
                    margin-bottom: 10px;
                }

                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 a {
                        color: #303641;
                    }

                    .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label h2 span {
                        -webkit-opacity: .6;
                        -moz-opacity: .6;
                        opacity: .6;
                        -ms-filter: alpha(opacity=60);
                        filter: alpha(opacity=60);
                    }



.moble-menu-list {  
  width: 100%; 
  color: #616161;
  min-height: 600px;
}

.main-menu-box {
  padding: 10px; text-align: center;
}

.main-menu-box .main-menu {
  padding: 10px;
  color: #FFFFFF; 
  background-color: #0F4C81;
  border-radius: 10px;    
  cursor: pointer;
  height: 100px;
  width: 130px;
}

.fl-left { float: left;  }
.fl-right { float: right;  }

.main-menu-box .main-menu .ficon{ font-size: 30px; margin-top: 10px;   }  
.main-menu-box .main-menu .menu-caption{ font-size: 14px;   }






@keyframes closeWindow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ril__outer {
  background-color: rgba(0, 0, 0, 0.85);
  outline: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  -ms-content-zooming: none;
  -ms-user-select: none;
  -ms-touch-select: none;
  touch-action: none;
}

.ril__outerClosing {
  opacity: 0;
}

.ril__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.ril__image,
.ril__imagePrev,
.ril__imageNext {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: none;
  -ms-content-zooming: none;
  -ms-user-select: none;
  -ms-touch-select: none;
  touch-action: none;
}

.ril__imageDiscourager {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.ril__navButtons {
  border: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 34px;
  padding: 40px 30px;
  margin: auto;
  cursor: pointer;
  opacity: 0.7;
}
.ril__navButtons:hover {
  opacity: 1;
}
.ril__navButtons:active {
  opacity: 0.7;
}

.ril__navButtonPrev {
  left: 0;
  background: rgba(0, 0, 0, 0.2)
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')
    no-repeat center;
}

.ril__navButtonNext {
  right: 0;
  background: rgba(0, 0, 0, 0.2)
    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+')
    no-repeat center;
}

.ril__downloadBlocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
  background-size: cover;
}

.ril__caption,
.ril__toolbar {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.ril__caption {
  bottom: 0;
  max-height: 150px;
  overflow: auto;
}

.ril__captionContent {
  padding: 10px 20px;
  color: #fff;
}

.ril__toolbar {
  top: 0;
  height: 50px;
}

.ril__toolbarSide {
  height: 50px;
  margin: 0;
}

.ril__toolbarLeftSide {
  padding-left: 20px;
  padding-right: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ril__toolbarRightSide {
  padding-left: 0;
  padding-right: 20px;
  flex: 0 0 auto;
}

.ril__toolbarItem {
  display: inline-block;
  line-height: 50px;
  padding: 0;
  color: #fff;
  font-size: 120%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ril__toolbarItemChild {
  vertical-align: middle;
}

.ril__builtinButton {
  width: 40px;
  height: 35px;
  cursor: pointer;
  border: none;
  opacity: 0.7;
}
.ril__builtinButton:hover {
  opacity: 1;
}
.ril__builtinButton:active {
  outline: none;
}

.ril__builtinButtonDisabled {
  cursor: default;
  opacity: 0.5;
}
.ril__builtinButtonDisabled:hover {
  opacity: 0.5;
}

.ril__closeButton {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=')
    no-repeat center;
}

.ril__zoomInButton {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
    no-repeat center;
}

.ril__zoomOutButton {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')
    no-repeat center;
}

.ril__outerAnimating {
  animation-name: closeWindow;
}

@keyframes pointFade {
  0%,
  19.999%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}

.ril__loadingCircle {
  width: 60px;
  height: 60px;
  position: relative;
}

.ril__loadingCirclePoint {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.ril__loadingCirclePoint::before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 11%;
  height: 30%;
  background-color: #fff;
  border-radius: 30%;
  animation: pointFade 800ms infinite ease-in-out both;
}
.ril__loadingCirclePoint:nth-of-type(1) {
  transform: rotate(0deg);
}
.ril__loadingCirclePoint:nth-of-type(7) {
  transform: rotate(180deg);
}
.ril__loadingCirclePoint:nth-of-type(1)::before,
.ril__loadingCirclePoint:nth-of-type(7)::before {
  animation-delay: -800ms;
}
.ril__loadingCirclePoint:nth-of-type(2) {
  transform: rotate(30deg);
}
.ril__loadingCirclePoint:nth-of-type(8) {
  transform: rotate(210deg);
}
.ril__loadingCirclePoint:nth-of-type(2)::before,
.ril__loadingCirclePoint:nth-of-type(8)::before {
  animation-delay: -666ms;
}
.ril__loadingCirclePoint:nth-of-type(3) {
  transform: rotate(60deg);
}
.ril__loadingCirclePoint:nth-of-type(9) {
  transform: rotate(240deg);
}
.ril__loadingCirclePoint:nth-of-type(3)::before,
.ril__loadingCirclePoint:nth-of-type(9)::before {
  animation-delay: -533ms;
}
.ril__loadingCirclePoint:nth-of-type(4) {
  transform: rotate(90deg);
}
.ril__loadingCirclePoint:nth-of-type(10) {
  transform: rotate(270deg);
}
.ril__loadingCirclePoint:nth-of-type(4)::before,
.ril__loadingCirclePoint:nth-of-type(10)::before {
  animation-delay: -400ms;
}
.ril__loadingCirclePoint:nth-of-type(5) {
  transform: rotate(120deg);
}
.ril__loadingCirclePoint:nth-of-type(11) {
  transform: rotate(300deg);
}
.ril__loadingCirclePoint:nth-of-type(5)::before,
.ril__loadingCirclePoint:nth-of-type(11)::before {
  animation-delay: -266ms;
}
.ril__loadingCirclePoint:nth-of-type(6) {
  transform: rotate(150deg);
}
.ril__loadingCirclePoint:nth-of-type(12) {
  transform: rotate(330deg);
}
.ril__loadingCirclePoint:nth-of-type(6)::before,
.ril__loadingCirclePoint:nth-of-type(12)::before {
  animation-delay: -133ms;
}
.ril__loadingCirclePoint:nth-of-type(7) {
  transform: rotate(180deg);
}
.ril__loadingCirclePoint:nth-of-type(13) {
  transform: rotate(360deg);
}
.ril__loadingCirclePoint:nth-of-type(7)::before,
.ril__loadingCirclePoint:nth-of-type(13)::before {
  animation-delay: 0ms;
}

.ril__loadingContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ril__imagePrev .ril__loadingContainer,
.ril__imageNext .ril__loadingContainer {
  display: none;
}

.ril__errorContainer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ril__imagePrev .ril__errorContainer,
.ril__imageNext .ril__errorContainer {
  display: none;
}

.ril__loadingContainer__icon {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}


.container-calendar {
    background: #ffffff;
    padding: 15px;
    max-width: 475px;
    margin: 0 auto;
    overflow: auto;
}

.button-container-calendar button {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    background: #00a2b7;
    color: #fff;
    border: 1px solid #0aa2b5;
    border-radius: 4px;
    padding: 5px 10px;
}

.table-calendar {
    border-collapse: collapse;
    width: 100%;
}

.table-calendar td, .table-calendar th {
    padding: 5px;
    border: 1px solid #e2e2e2;
    text-align: center;
    vertical-align: top;
}

.date-picker.selected {
    font-weight: bold;
    outline: 1px dashed #00BCD4;
}

.date-picker.selected span {
    border-bottom: 2px solid currentColor;
}

/* sunday */
.date-picker:nth-child(1) {
  color: red;
}

/* friday */
.date-picker:nth-child(6) {
  color: green;
}

#monthAndYear {
    text-align: center;
    margin-top: 0;
}

.button-container-calendar {
    position: relative;
    margin-bottom: 1em;
    overflow: hidden;
    clear: both;
}

#previous {
    float: left;
}

#next {
    float: right;
}

.footer-container-calendar {
    margin-top: 1em;
    border-top: 1px solid #dadada;
    padding: 10px 0;
}

.footer-container-calendar select {
    cursor: pointer;
    display: inline-block;
    zoom: 1;
    background: #ffffff;
    color: #585858;
    border: 1px solid #bfc5c5;
    border-radius: 3px;
    padding: 5px 1em;
}