/*!
* Copyright Kamphaeng Phet Rajabhat University
*/
@font-face {
font-family: "THSarabun";
src: url('../fonts/THSarabun.ttf');
src: local('THSarabun'), url('fonts/THSarabun.ttf') format('truetype');
font-style: normal;
}
.bg-purple {
background-color: #6f42c1;
}
.bg-gray {
color: #ffffff;
background-color: #B3B3B3 !important;
}
.bg-orange {
background-color: #ec4600;
}
/* Add a black background color to the top navigation */
.navbar-collapse {
/* background-color: #333; */
/* overflow: hidden; */
}
/* Style the links inside the navigation bar */
.navbar-collapse a {
/* float: left; */
color: #f2f2f2;
/* text-align: center; */
/* padding: 14px 16px; */
/* text-decoration: none; */
/* font-size: 17px; */
}
.navbar-collapse a:hover {
/* float: left; */
color: #000;
background-color: #ddd;
/* text-align: center; */
/* padding: 14px 16px; */
/* text-decoration: none; */
/* font-size: 17px; */
border-radius: 4px; *
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu {
/* position: absolute; */
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
/* padding: 5px 0; */
/* margin: 2px 0 0; */
font-size: 14px;
text-align: left;
list-style: none;
background-color: #ec4600;
/* -webkit-background-clip: padding-box;
background-clip: padding-box; */
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.font-8 {
font-family: "THSarabun";
font-size: 8px;
/* color: black; */
/* font-weight: bold; */
/* vertical-align: center; */
}
.font-9 {
font-family: "THSarabun";
font-size: 9px;
/* color: black; */
/* font-weight: bold; */
/* vertical-align: center; */
}
.font-10 {
font-family: "THSarabun";
font-size: 10px;
/* color: black; */
/* font-weight: bold; */
/* vertical-align: center; */
}
.font-12 {
font-family: "THSarabun";
font-size: 12px;
/* color: black; */
/* font-weight: bold; */
/* vertical-align: center; */
}
.font-12-dot {
font-family: "THSarabun";
font-size: 12px;
border-bottom: 1px dotted black;
/* color: black; */
/* font-weight: bold; */
/* vertical-align: center; */
}
.font-13 {
/* font-family: "THSarabun"; */
font-size: 13px;
/* color: black; */
/* font-weight: bold; */
/* vertical-align: center; */
}
.font-13-bold {
/* font-family: "THSarabun"; */
font-size: 13px;
/* color: black; */
font-weight: bold;
/* vertical-align: center; */
}
.font-14-bold {
/* font-family: "THSarabun"; */
font-size: 14px;
/* color: black; */
font-weight: bold;
/* vertical-align: center; */
}
.panel2 { position: relative; overflow: hidden; display: block; border-radius: 0 !important; }
.panel2-default { border-color: #ebedef !important; }
.panel2 .panel2-body { position: relative; padding: 0 !important; overflow: hidden; height: auto; }
.panel2 .panel2-body a { overflow: hidden; }
.panel2 .panel2-body a img { display: block; margin: 0; width: 100%; height: auto;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.panel2 .panel2-body a.zoom:hover img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); }
.panel2 .panel2-body a.zoom span.overlay { position: absolute; top: 0; left: 0; visibility: visible; height: 100%; width: 100%; background-color: #000; opacity: 0.55; -moz-opacity: 0.55; -webkit-opacity: 0.55; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-webkit-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
}
.panel2 .panel2-body a.zoom:hover span.overlay { display: block; visibility: hidden; opacity: 0; }
.panel2 .panel2-body a.zoom:hover span.overlay i { position: absolute; top: 45%; left: 0%; width: 100%; font-size: 2.25em; color: #fff !important; text-align: center;
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
}
/* - */
.accordion2 {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion2active, .accordion2:hover {
background-color: #ccc;
}
.accordion2:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion2active:after {
content: "\2212";
}
.panel3 {
/* padding: 0 18px; */
display: none;
background-color: white;
/* overflow: hidden; */
}
.accordion21 {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion21active, .accordion21:hover {
background-color: #ccc;
}
.accordion21:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion21active:after {
content: "\2212";
}
.panel31 {
/* padding: 0 18px; */
display: none;
background-color: white;
/* overflow: hidden; */
}
.accordion22 {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion22active, .accordion22:hover {
background-color: #ccc;
}
.accordion22:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion22active:after {
content: "\2212";
}
.panel32 {
/* padding: 0 18px; */
display: none;
background-color: white;
/* overflow: hidden; */
}
.accordion23 {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion23active, .accordion23:hover {
background-color: #ccc;
}
.accordion23:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion23active:after {
content: "\2212";
}
.panel33 {
/* padding: 0 18px; */
display: none;
background-color: white;
/* overflow: hidden; */
}
/* - */
.container2 {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.container2 img {vertical-align: middle;}
.container2 .content2 {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* Black background with transparency */
color: #f1f1f1;
width: 100%;
padding: 20px;
}
* {box-sizing: border-box;}
.containerA {
position: relative;
width: 100%;
max-width: 120px;
}
.imageA {
display: block;
width: 100%;
height: auto;
}
.overlayA {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 8px;
padding: 10px;
text-align: center;
}
.containerA:hover .overlayA {
opacity: 1;
}
.center-cropped {
object-fit: cover; /* Scale the image so it covers whole area, thus will likely crop */
/* object-position: center; Center the image within the element */
width: 118px;
height: 128px;
}
.absolute-center-parent {
top: 139px;
left: 57px;
width: 117px;
height: 128px;
background-color: #fff;
/* static relative absolute fixed absolute sticky */
position: relative;
overflow: hidden;
}
.absolute-center-child {
/* width: 117px; */
height: 128px;
position: absolute;
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
}
div.img-resize img {
width: 117px;
height: auto;
}
div.img-resize {
top: 134px;
left: 57px;
width: 117px;
height: 127px;
text-align: center;
position: absolute;
overflow: hidden;
}
div.idcard img {
width: 250px;
height: auto;
}
div.idcard {
top: 267px;
left: 0px;
width: 250px;
height: 127px;
text-align: center;
position: absolute;
overflow: hidden;
}
.barcode {
padding: 1.5mm;
margin: 0;
vertical-align: top;
color: #000000;
}
.barcodecell {
text-align: center;
vertical-align: middle;
padding: 0;
}
