.subContainer {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 20px;
  /* Safari */ }
  .subContainer .sHeader {
    margin-top: 60px;
    display: flex;
    justify-content: flex-end; }
    .subContainer .sHeader span {
      flex-basis: 300px;
      /* justify-content: flex-end; */
      text-align: center;
      display: flex;
      margin: 2px;
      justify-content: flex-end;
      flex-direction: column;
      font-size: 24px;
      background-color: #4caf50;
      border-top-right-radius: 2em;
      color: aliceblue; }
  .subContainer ul.boxSearch {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 10px 0;
    list-style: none; }
    .subContainer ul.boxSearch li {
      flex: 1;
      display: flex; }
      .subContainer ul.boxSearch li label {
        flex: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #009688; }
      .subContainer ul.boxSearch li input[type="date"] {
        flex: 1;
        background-color: #0dcdbb;
        font-size: 18px;
        font-family: "Kanit", sans-serif; }
      .subContainer ul.boxSearch li select {
        flex: 1;
        background-color: #0dcdbb;
        font-size: 18px;
        font-family: "Kanit", sans-serif; }
      .subContainer ul.boxSearch li span {
        flex: 0.2; }
      .subContainer ul.boxSearch li button {
        font-family: "Kanit", sans-serif;
        background-color: #009688;
        font-size: 20px; }
  .subContainer #wait {
    position: absolute;
    display: none;
    z-index: 99;
    top: 40%;
    left: 40%;
    border: 16px solid darkseagreen;
    border-radius: 50%;
    padding: 35px 12px 26px 12px;
    background-color: floralwhite;
    -webkit-animation: spin 0.5s linear infinite;
    /*Safari*/
    animation: spin 0.5s linear infinite; }
@-webkit-keyframes spin {
  0% {
    border: 16px solid darkseagreen; }
  100% {
    border: 16px solid greenyellow; } }
@keyframes spin {
  0% {
    border: 16px solid darkseagreen; }
  100% {
    border: 16px solid greenyellow; } }
  .subContainer .popupDetail {
    visibility: hidden;
    position: fixed;
    border: 15px solid greenyellow;
    padding: 10px;
    box-shadow: 5px 5px 20px black;
    width: 74%;
    margin: -9% 0 0 0%;
    z-index: 99;
    background-color: lightslategray;
    display: flex;
    flex-direction: column;
    background-image: url("../img/bg04.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }
    .subContainer .popupDetail span {
      color: red;
      flex-basis: 10px;
      align-self: flex-end;
      font-size: 24px;
      padding: 5px 15px 5px 15px;
      background: #ff9800;
      border-radius: 50%;
      /* background-color: white; */
      box-shadow: 3px 1px 13px black; }
      .subContainer .popupDetail span:hover {
        background: #ffeb3b;
        color: #ff5722; }
    .subContainer .popupDetail .boxControlMain {
      flex: 1;
      display: flex; }
      .subContainer .popupDetail .boxControlMain .prePic {
        flex: 1;
        align-self: center;
        text-align: center;
        text-shadow: 4px 5px 5px black;
        cursor: pointer; }
        .subContainer .popupDetail .boxControlMain .prePic .material-icons {
          font-size: 80px;
          color: greenyellow;
          cursor: pointer; }
      .subContainer .popupDetail .boxControlMain .popMainPic {
        flex: 5;
        margin: 0 auto; }
        .subContainer .popupDetail .boxControlMain .popMainPic img {
          height: auto;
          width: 65%;
          margin: 0 0 0 18%;
          box-shadow: 3px 5px 17px black; }
      .subContainer .popupDetail .boxControlMain .nextPic {
        flex: 1;
        align-self: center;
        text-align: center;
        text-shadow: 4px 5px 5px black;
        cursor: pointer; }
        .subContainer .popupDetail .boxControlMain .nextPic .material-icons {
          font-size: 80px;
          color: greenyellow; }
    .subContainer .popupDetail .popSubPic {
      flex: 1; }
      .subContainer .popupDetail .popSubPic ul {
        display: flex;
        margin: 0;
        padding: 15px;
        list-style: none;
        align-items: center;
        flex-wrap: wrap; }
        .subContainer .popupDetail .popSubPic ul li {
          margin: 0 0 0 10px;
          flex-basis: 150px; }
          .subContainer .popupDetail .popSubPic ul li img {
            width: 100%;
            border: 3px solid #425443; }
            .subContainer .popupDetail .popSubPic ul li img:hover {
              border: 3px solid #789b7a; }
  .subContainer .showPopUpDetail {
    visibility: visible; }
  .subContainer .boxTableDetail {
    display: flex;
    flex-direction: row; }
    .subContainer .boxTableDetail #boxTable {
      flex: 1; }
      .subContainer .boxTableDetail #boxTable table.sboxTbEven {
        border-collapse: collapse;
        width: 100%; }
      .subContainer .boxTableDetail #boxTable th,
      .subContainer .boxTableDetail #boxTable td {
        text-align: left;
        padding: 8px; }
        .subContainer .boxTableDetail #boxTable th a:link,
        .subContainer .boxTableDetail #boxTable td a:link {
          color: darkgreen;
          text-decoration: none; }
        .subContainer .boxTableDetail #boxTable th a:visited,
        .subContainer .boxTableDetail #boxTable td a:visited {
          color: darkgreen; }
        .subContainer .boxTableDetail #boxTable th a:hover,
        .subContainer .boxTableDetail #boxTable td a:hover {
          color: aliceblue; }
        .subContainer .boxTableDetail #boxTable th img,
        .subContainer .boxTableDetail #boxTable td img {
          width: 150px;
          height: 100px; }
      .subContainer .boxTableDetail #boxTable tr:nth-child(even) {
        background-color: #f2f2f2; }
      .subContainer .boxTableDetail #boxTable tr {
        cursor: pointer; }
        .subContainer .boxTableDetail #boxTable tr:hover {
          background-color: #7b8273;
          color: aliceblue; }
      .subContainer .boxTableDetail #boxTable th {
        background-color: #4caf50;
        color: white; }

@media only screen and (max-width: 800px) {
  body .subContainer .popupDetail {
    position: absolute; } }
@media only screen and (max-width: 600px) {
  body .subContainer {
    width: 95%; }
    body .subContainer ul.boxSearch li {
      flex-direction: column; } }

/*# sourceMappingURL=subStyle.css.map */