* {
  font-family: "Kanit", sans-serif;
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  border-bottom: 0.5px solid rgb(196, 196, 196);
  text-align: center;
}

.flex-menu-title {
  padding: 20px;
  flex: 30%;
}

.flex-menu-button {
  padding: 10px;
  flex: 10%;
}
.flex-text-searchbox {
    padding: 25px;
    flex: 20%;
    font-size: 16px;

  }
.flex-searchfield {
    padding: 10px;
    flex: 30%;
    position: relative;
}
.flex-loginmenu {
  padding: 10px;
  flex: 20%;
}
#canvas {
  border: solid 2px rgb(196, 196, 196);
  width: 100%;
  height: 45px;
  border-radius: 20px;
  background: transparent;
}

.searchbox {
  width: 70%;
}
@media only screen and (max-width: 900px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-menu-title {
    flex: 100%;
  }
  
  .flex-menu-button {
    flex: 100%;
  }
  .flex-searchfield {
    flex: 50%;
  }
}

.pageshow {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 62.5%;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kanit", sans-serif;
}

@font-face {
  font-family: FontScore;
  src: url(../font/DBChidlomX.ttf);
}

#header {
  background-image: url(../img/recruit-head-bg.jpg);
  height: auto;
  padding: 100px 100px;
}

h1 {
  color: white;
  font-family: Arial;
  text-align: center;
}

.sarabunfont {
  font-family: "Sarabun";
}

#bannerimage {
  width: 100%;
  background-image: url(../img/recruit-head-bg.jpg);
  height: 150px;
  background-color: purple;
  background-position: center;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

body {
  background: rgba(255, 255, 255, 0.603);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: fit-content !important;
  max-height: fit-content !important;
}

md-content{
  padding-left: 10%;
  padding-right: 10%;
}

.div {
  background: rgb(255, 255, 255);
}

.collapse:not(.show) {
  display: none;
}

.alert {
  background: rgb(223, 45, 75);
  color: rgb(255, 255, 255);
}

.md-button.md-raised {
  padding-left: 15px;
  padding-right: 15px;
}

.md-content {
  background: rgb(255, 255, 255);
}

.md-card-content {
  background: rgb(255, 255, 255);
}

.card-header {
  min-height: 12px;
  background-color: #3f51b5;
  color: white;
  font-size: 24px;
  line-height: 35px;
  text-align: left;
  padding: 10px 20px;
  border-radius: 5px 5px 0 0;
}

span {
  font-size: 15px;
}

.span-mobile {
  font-size: 10px;
}

.span-bold {
  font-weight: bold;
}

.table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

.table th {
  font-size: 20px;
  color: #3f51b5;
  padding: 10px 10px;
}

.black {
  font-size: 16px;
  color: black;
  padding: 10px 10px;
}

.table tbody tr:hover {
  background-color: #f0f0f0;
}

.table td {
  padding: 20px 20px;
  vertical-align: top;
  border-bottom: 1px solid #dedede;
}

md-card {
  border-radius: 0.75rem;
}

.no-bolder {
  border: none !important;
}

.bolder {
  border-collapse: collapse;
  border: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

/* LogoEng Css Score */
.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.3;
  position: absolute;
  left: 0;
  right: 0;
  width: 500px;
  height: 600px;
  margin: auto;
}

.demo-content {
  position: relative;
}
/* LogoEng Css Score */

.virtual-paper {
  border: 1px solid #bbb;
  padding: 40px;
}

.virtual-paperlandscape {
  border: 1px solid #bbb;
  padding: 40px;
}

.md-datepicker-input-container {
  width: 100%;
}

.md-dialog-container {
  position: absolute;
}

.nav-theme {
  background-color: #34495e;
}

.paddingleft {
  padding-left: 30px;
}

.margin0 {
  margin-top: 0px;
}

.marginbottom {
  margin-bottom: 0px;
}

.virtual-paper {
  border: 1px solid #bbb;
  padding: 40px;
}

hr.dashed {
  border-top: 1px dashed #bbb;
  margin-bottom: 30px;
}

footer {
  /* position: absolute;
  bottom: 0;
  width: 100%;
  display: inline-block;
  margin-top: 2%; */
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-image: linear-gradient(60deg,#686868,#2c2c2c);
  box-shadow: 0px 0px 10px 10px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(110 110 110 / 40%);
  color: white;
  text-align: center;
}

@media print {
  body {
    font-size: 10pt;
    line-height: 120%;
    background: white;
  }

  .virtual-paper {
    padding: 0;
    border: none;
  }

  .virtual-paperl {
    padding: 0;
    border: none;
    @page {
      size: landscape;
    }
  }
  .noprint {
    display: none!important;
  }

  footer,
  #non-printable {
    display: none !important;
  }
  #printable {
    display: block;
  }
}

.wbarcode {
  max-width: 60%;
}

.button1 {
  border-radius: 2px;
}

.button2 {
  border-radius: 4px;
}

.button3 {
  border-radius: 8px;
}

.button4 {
  border-radius: 12px;
}

.button5 {
  border-radius: 30px;
}

.card {
  position: relative;
  width: 300px;
  height: 400px;
  background: #fff;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.card i {
  position: absolute;
  top: 40px;
  left: -15px;
  width: 280px;
  height: 50px;
  background: steelblue;
  border-radius: 30px;
  border-bottom-left-radius: 0;
}
.card i::before {
  content: "";
  position: absolute;
  top: 50px;
  width: 15px;
  height: 30px;
  background: #3f51b5;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  z-index: 2;
}
.card i::after {
  content: "";
  position: absolute;
  top: 50px;
  width: 15px;
  height: 15px;
  background: steelblue;
  z-index: 1;
}

.md-sidenav-left .nav-header img {
  width: 150px;
  margin: 20px auto 0;
  display: block;
}

.md-sidenav-left .nav-header small {
  display: block;
  text-align: center;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.md-sidenav-left .top-right-pos {
  position: absolute;
  top: 12px;
  right: 0;
}

.swal-wide{
  max-width: 900px !important;
  width:80% !important;
}