@import url('https://fonts.googleapis.com/css?family=Lato');

.clearfix { overflow: auto; clear: both; height: 2em;}


body { font-family: 'Lato', 'Microsoft JhengHei', sans-serif; margin: 0; background: #424A59; text-align: center; font-size: 100%; }

a { text-decoration: none; -webkit-transition: 0.25s; transition: 0.25s; }
a:hover,
a:focus { text-decoration: none; }

h4{ font-size: 12px; line-height: 20px; color: #565656; font-weight: 400; }

option, input { font-family: 'Lato', 'Microsoft JhengHei', sans-serif; font-size: 14px; line-height: 20px; color: #565656; }

/* RESERVATION */
#rstitle { display: block; width: 100%; text-align: center; padding: 50px 0 10px 0; font-size: 12px; line-height: 12px; letter-spacing: 1px; color: #fff; font-weight: 400; }
#rstitle p{ font-size: 20px; color: #fff; font-weight: 700; letter-spacing: 4px; }

#rscontent { display: block; width: 90%; text-align: center; padding: 20px 20px 30px 20px; margin: auto; margin-top: 20px; font-size: 12px; line-height: 20px; font-weight: 400; color: #565656; background: #EFEFEF; max-width: 640px; }
#rscontent p{ font-size: 14px; font-weight: 700; padding-top: 20px; }

.btnclose { position: absolute; top: 10px; right: 10px; font-size: 18px; }
a.btnclose { color: #fff; cursor: hand; }
a.btnclose:hover { color: #ff0000; }

.inlineblock { display: inline-block; padding: 0 6px 20px 6px; }
.inlineblock label{ display: block; font-size: 14px; text-align: left; font-weight: 400; }

.orderdate { display: block; width: 100%; font-size: 14px; color: #fff; background: #5AA492; text-align: left; padding: 6px 12px; margin-bottom: 20px; }
.stock { display: inline-block; font-size: 14px; background: #DDDDDD; border: 1px solid #B6B6B6; padding: 6px 12px; margin: 0 10px 10px 0; }
.stockselect { font-family: 'Lato', 'Microsoft JhengHei', sans-serif; font-size: 14px; color: #565656; background-color:#ffffff; border: 1px solid #c6c6c6; padding: 6px 6px; }
.identity { display: block; width: 100%; font-size: 14px; text-align: left; background: #DDDDDD; border: 1px solid #B6B6B6; padding: 6px 12px; margin: 0 10px 10px 0; }
.inputform { font-family: 'Lato', 'Microsoft JhengHei', sans-serif; font-size: 14px; color: #565656;
  width: 150px;
  background-color:#ffffff;
  border: 1px solid #c6c6c6;
  padding: 6px 12px;
  margin-bottom: 10px;
  -moz-placeholder: color:#B6B6B6;
  -ms-input-placeholder: color:#B6B6B6;
  -webkit-input-placeholder: color:#B6B6B6;
  }

/** custom select **/
  /*the container must be positioned relative:*/
.custom-select {
  text-align: left;
  position: relative;
  font-family: 'Lato', 'Microsoft JhengHei', sans-serif; font-size: 14px; color: #565656;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  border: 1px solid #c6c6c6;
  background-color: white;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #565656 transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #565656 transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items {
  border: 1px solid #c6c6c6;
  background-color: white;
}
.select-items div,.select-selected {
  color: #565656;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
}
/*style items (options):*/
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  color: #fff;
  background-color: DodgerBlue;
  /* background-color: rgba(0, 0, 0, 0.1); */
}

#selected { color: #EE7C61; }

.pdnormal { width: 100%; height: 30px; font-size: 14px; line-height: 30px; font-weight: 400; text-align: left; margin: 0 auto; padding: 0 12px; }
a.pdnormal { display: block; color: #565656; }
a.pdnormal span{ float: right; font-size: 60%; /*padding: 10px 0 0 0;*/ }

.note { display: block; width: 100%; font-size: 12px; text-align: left; background: #DDDDDD; border: 1px solid #B6B6B6; padding: 6px 12px; margin: 0; }


/* CALENDAR */

#cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; }
#loginScreen { position: absolute; height: 100%; width: 100%; margin: 0 auto; top: 0; z-index: 10; display: none; border:1px solid #c6c6c6; }
#loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; }
.cancel { display: block; position: absolute; top: 10px; right: 10px; color: #fff; height: 30px; width: 30px; font-size: 30px; text-decoration: none; text-align: center; }
.cancel a:hover{ color: #000; }

.calendar { background: #fff; font-size: 14px; letter-spacing: 1px; margin: auto; margin-top: 110px; }
.calendar th { font-weight: 700; text-align: center; padding: 5px; margin: 0; }
.calendar th p{ font-size: 16px; font-weight: 700; padding: 10px; margin: 0; }
.calendar td { width: 40px; height: 36px; line-height: 36px; text-align: center; color: #f1f0ef; background: #fff; padding: 0; margin: 0; border:1px solid #f1f0ef; }

.day { width: 40px; height: 36px; font-size: 14px; line-height: 36px; text-align: center; color: #f1f0ef; }
a.day { display: block; color: #565656; cursor: hand; }
a.day:hover { color: #fff; background: #EE7C61; }
a.day:active { color: #fff; background: #EE7C61; }
a.day:focus { color: #fff; background: #EE7C61; }

.btnright { float: right; padding-top: 8px; padding-right: 10px; font-size: 24px; }
a.btnright { color: #808080; cursor: hand; }
a.btnright:hover { color: #000; }

.btnleft { float: left; padding-top: 8px; padding-left: 10px; font-size: 24px; }
a.btnleft { color: #808080; cursor: hand; }
a.btnleft:hover { color: #000; }


/* TABLE */

.tabletitle { display: block; width: 100%; font-size: 14px; color: #fff; background: #5AA492; text-align: left; padding: 6px 12px; margin: 0; }
.tabletitle span{ float: right; }

.infomation { width: 100%; border: 1px solid #5AA492; font-size: 14px; letter-spacing: 1px; }
.infomation thead{ color: #565656; background: #fff; }
.infomation th { font-size: 14px; font-weight: 700; padding: 15px 10px 5px 10px; margin: 0; }
.infomation tbody{ color: #565656; background: #fff; padding-bottom: 20px; }
.infomation td { font-size: 12px; line-height: 18px; background: #fff; border: 0; padding: 3px 10px; margin: 0; }
.infomation td p{ width: 100%; border-top: 1px solid #565656; color: #EE7C61; text-align: right; padding: 0; font-size: 14px; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }

.infosum { width: 100%; border: 1px solid #EE7C61; font-size: 14px; letter-spacing: 1px; }
.infosum thead{ color: #565656; background: #fff; }
.infosum th { font-size: 12px; line-height: 18px; font-weight: 400; background: #fff; border: 0; padding: 10px 10px 20px 10px; margin: 0; }
.infosum th p{ font-weight: 700; }
.infosum tbody{ color: #fff; background: #EE7C61; }
.infosum td { font-size: 14px; font-weight: 700; padding: 6px 12px; margin: 0; }

.orderscnt { width: 100%; border-bottom: 1px solid #5AA492; border-left: 1px solid #5AA492; border-right: 1px solid #5AA492; font-size: 14px; letter-spacing: 1px; }
.orderscnt thead{ color: #565656; background: #fff; }
.orderscnt th { font-size: 14px; font-weight: 700; width: 120px; padding: 5px 10px 5px 10px; margin: 0; }
.orderscnt td { font-size: 14px; font-weight: 400; padding: 5px 10px; margin: 0; }
.orderscnt span{ color: #EE7C61; }

.orderscnt td p{ font-size: 12px; font-weight: 400; padding: 0; margin: 0; }

.orderhr { border:0; height: 1px; background-color:#565656; color: #565656; }


/* BUTTON */
.button {
  display: inline-block;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  padding: 8px 8px;
  color: #fff;
}
.button:active  {
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
}

.button:hover  {
  color: #fff;
  background: #7f9f37;
}


/* COLOR */
.bggreen { background: #B8DFD8; }
.bgblue { background: #B8DFD8; }
a.bgblue:hover{ background: #97cdc3; }
.bgyellow { background: #F8CB83; }
a.bgyellow:hover{ background: #f5b349; }
.bgwhite { background: #fff; color: #565656; border: 1px solid #B6B6B6; margin: 5px 0 0 0; }
a.bgwhite:hover{ background: #424a59; color: #fff; }
.bgmgray { background: #DDDDDD; }
a.bgmgray:hover{ background: #B8DFD8; }
.bgorange { background: #EE7C61; color: #fff; }
a.bgorange:hover{ background: #e5380f; }
.bggray { background: #565656; }
a.bggray:hover{ background: #5AA492; }
.bggreen { background: #9ECB52; }
.bglgray { background: #B6B6B6; }
.bgbluegreen { background: #5AA492; }
a.bgbluegreen { color: #fff; }
a.bgbluegreen:hover { background: #B8DFD8; color: #565656; }

.width100 { display: block; width: 100%; margin: 0 0 10px 0; }


/* FOOTER */

footer{ width: 100%; background: #424A59; text-align: center; padding: 20px 0; color: #fff; font-size: 12px; letter-spacing: 1px; }
footer span{ padding: 5px 24px; margin: 16px auto; font-size: 135%; color: #fff; background-color: transparent;}
footer p{ padding: 15px 0; font-size: 115%; line-height: 150%; letter-spacing: 1px; }
footer p a{ color: #fff; }
footer p a:hover{ color: #9dcb52; }

.btn_goback {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: #9dca52;
  color: #fff;
}

.parallelogram {
    width: 10em;
    height: 6em;
    border: 4px solid #ccc;
    background-color: #fff;
    position: relative;
}

.parallelogram::before,
.parallelogram::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

.parallelogram::before {
    border-width: 1.5em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}

.parallelogram::after {
    border-radius: 0.4em;
    border-width: 1.35em;
    border-right-color: #0c0;
    border-top-color: #0c0;
}