html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
/* Body Fix  */

body::after{
  position:fixed;
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: all 0.4s ease;
  z-index: 8;
  display: none;
}
body.active{
  overflow: hidden;
}
body.active::after{
  display: block;
}
#checkbox-flip .uk-background-muted{ background-color:#fff; box-shadow: rgba(0,0,0,0.09) 0 0 10px;}
#WCL_RESERVATION_WIDGET{ width: 100%; display: flex; justify-content: space-around; z-index: 9;}
#WCL_RESERVATION_WIDGET .wcl_rsvn_control{ width: 100%; box-shadow: none; }
#WCL_RESERVATION_WIDGET .wcl_rsvn_container{ display: flex; align-items: center; justify-content: space-between; }
#WCL_RESERVATION_WIDGET .wcl_button button{ appearance : none; border: none; width: 100%; height: 100%; cursor: pointer; font-size: 1em; letter-spacing: 1px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
#WCL_RESERVATION_WIDGET .wcl_rsvn_box{ display: flex; flex-direction: column; position: relative; font-family: sans-serif; }
#WCL_RESERVATION_WIDGET .wcl_rsvn_box label{ font-size: 0.7em; font-weight: bold; letter-spacing: 0.5px; margin: 0px 0px 10px 0px; }
#WCL_RESERVATION_WIDGET .wcl_date {position: absolute; }
#WCL_RESERVATION_WIDGET .wcl_date span{ font-size: 2.25em; font-weight: 300; color: #333333; }
#WCL_RESERVATION_WIDGET .wcl_date span:nth-child(2){ font-size: 1em; }
#WCL_RESERVATION_WIDGET .wcl_date span:nth-child(3){ font-size: 0.8em; font-weight: bold; opacity: 0.5;}
#WCL_RESERVATION_WIDGET input[type=text]{ opacity: 0; z-index: 10; cursor: pointer; }
#WCL_RESERVATION_WIDGET select{ opacity: 0; }
#WCL_RESERVATION_WIDGET .wcl_rsvn_box.wcl_promo_code input[type=text]{ opacity: 1; border: none; outline : none; margin-left: -2px;font-size: 0.8em;font-weight: bold;color: #888; }
#WCL_RESERVATION_WIDGET .wcl_icon_calendar{ opacity: 0.7; width: 28px; position: absolute; bottom: 7.5px; left: calc(100% + 45px); }
#WCL_RESERVATION_WIDGET .wcl_button.wcl_mobile_button{ display: none; }

/* Arrow SVG */
#WCL_RESERVATION_WIDGET .select-box__current { position: relative; cursor: pointer; outline: none; }
#WCL_RESERVATION_WIDGET .select-box__current:focus + .select-box__list { opacity: 1; -webkit-animation-name: none; animation-name: none; }
#WCL_RESERVATION_WIDGET .select-box__current:focus + .select-box__list .select-box__option { cursor: pointer; }
#WCL_RESERVATION_WIDGET .select-box__current:focus .select-box__icon { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }


#WCL_RESERVATION_WIDGET .select-box__icon { position: absolute; top: calc(50% + 3px); right: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 10px; opacity: 0.3; transition: 0.2s ease; }
#WCL_RESERVATION_WIDGET .select-box__value { display: flex; }
#WCL_RESERVATION_WIDGET .select-box__input { display: none; }
#WCL_RESERVATION_WIDGET .select-box__input:checked + .select-box__input-text { display: block; }
#WCL_RESERVATION_WIDGET .select-box__input-text { display: none; width: 100%; margin: 0!important; padding: 0px!important; background-color: #fff; }
#WCL_RESERVATION_WIDGET .select-box__list { position: absolute; cursor: pointer; width: 100%; padding: 60px 0px 0px 0px;list-style: none;opacity: 0;-webkit-animation-name: HideList;animation-name: HideList;-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-delay: 0.5s;animation-delay: 0.5s;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;-webkit-animation-timing-function: step-start;animation-timing-function: step-start; }
#WCL_RESERVATION_WIDGET ul{ left: -8px; top:0; z-index: 100; margin: 30px 0px 0px 0px; }
#WCL_RESERVATION_WIDGET li label.select-box__option { display: flex; padding: 10px 15px; margin: 0; font-size: 1.2em!important; font-weight: 300!important; background-color: #ffffff; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
#WCL_RESERVATION_WIDGET li label.select-box__option span{ font-size: 0.65em; margin: 0px 0px 0px 5px; display: flex; flex-flow: column; justify-content: center; color: #333; }
#WCL_RESERVATION_WIDGET li:last-child label.select-box__option { border-bottom: 1px solid #eee; }
#WCL_RESERVATION_WIDGET .select-box__option:hover, .select-box__option:focus { color: #333333; background-color: #eeeeee; }
#WCL_RESERVATION_WIDGET .wcl_calling{ display: none; width: 15%; align-items: center; opacity: 0.5; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
#WCL_RESERVATION_WIDGET .wcl_mailing{ display: none; width: 15%; align-items: center; opacity: 0.5; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; }
#WCL_RESERVATION_WIDGET .wcl_calling a { width: 100%;text-align: center; }
#WCL_RESERVATION_WIDGET .wcl_mailing a { width: 100%;text-align: center; }
#WCL_RESERVATION_WIDGET .wcl_calling:hover{ opacity:1; }
#WCL_RESERVATION_WIDGET .wcl_mailing:hover{ opacity:1; }
#WCL_RESERVATION_WIDGET .wcl_rsvn_box a img{ width: 50px; }


/* CSS TYPE01 - for Horizontal Design */
.be-type01 .TYPE01 .checkbox-close{
  display: none;
}
#WCL_RESERVATION_WIDGET.TYPE01 h3{display: none;}
#WCL_RESERVATION_WIDGET.TYPE01{ position: absolute; bottom: 0;}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_control{ background-color: #fff; min-width: 768px; max-width: 840px; border-radius: 5px 5px 0 0;}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_container{ padding: 20px; height: 100px; border-radius: 5px 5px 0 0;}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box{ padding: 10px 10px;}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box.wcl_calendar{ width: 18%; }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box.wcl_options{ width: 12%; }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box.wcl_promo_code{ width: 15%; border-right: none; }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box.wcl_button{ width: 15%; height: 100%; padding: 0; }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_date { top: 30px; }
#WCL_RESERVATION_WIDGET.TYPE01 .select-box__current{ width: 100%; height: 35px; }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_date span:nth-child(1){ padding-right: 10px;}
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_date span:nth-child(2){ margin: 0px 0px 0px 3px; position: absolute; bottom: 18.5px; }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_date span:nth-child(3){ margin: 0px 0px 0px 3px; position: absolute; bottom: 5px; }
#WCL_RESERVATION_WIDGET.TYPE01 input[type=text]{ width: 100%; height: 35px; border: 0; padding: 0; }
#WCL_RESERVATION_WIDGET.TYPE01 select{ width: 100%; height: 42px; border: 0; padding: 0; }
#WCL_RESERVATION_WIDGET.TYPE01 .select-box__input-text{ font-size: 2.25em; font-weight: 300; }
#WCL_RESERVATION_WIDGET.TYPE01 .select-box__input-text{ font-size: 2.25em; font-weight: 300; }


/* CSS TYPE02 - for Horizontal Design */
/* CSS TYPE02 - for Horizontal Design */
.checkbox-close{
  position: absolute;
  padding: 15px;
  right: 0;
  top: 0;
  cursor: pointer;
}
.checkbox-close .uk-icon{
  transition: all 0.4s ease;
  transform: rotate(-90deg);
}
.checkbox-close .uk-icon:hover{
  color: var(--secondary-color);
  transform: rotate(90deg);
}
.TYPE02.box-right{
  transform: translate(100%, 0px);
  transition: all 0.8s ease;
}
.TYPE02.box-right.active{
  transform: translate(0%, 0px);
}
.TYPE02.box-left{
  transform: translate(-100%, 0px);
  transition: all 0.8s ease;
}
.TYPE02.box-left.active{
  transform: translate(0%, 0px);
}
.TYPE02.box-center{
  transform: translate(0%, -200%);
  transition: all 0.8s ease;
  background: #fff;
}
.TYPE02.box-center.active{
  transform: translate(0%,0%);
}
.TYPE02.box-center .wcl_rsvn_control{
  max-width: 768px !important;
}

#WCL_RESERVATION_WIDGET.TYPE02 { position: fixed; top: 80px;}
#WCL_RESERVATION_WIDGET.TYPE02 h3{ font-size: 1.3rem; text-align: center; margin-bottom: 20px;}
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_control{ position: relative; background-color: #fff; padding: 50px 20px 20px; max-width: 320px; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_container{ padding: 15px; flex-flow: wrap; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_date{ position: relative; text-align: center; border: 1px solid #eeeeee; padding: 15px 0px 50px; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span { position: relative; float: left; width: 50%; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span:first-child { padding: 0px 5px 0px 0px; text-align: right; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span:nth-child(2){ margin: 3.5px 0px 0px 0px; text-align: left; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_date span:nth-child(3){ text-align: left; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_calendar{ width: 48%; cursor: pointer; margin: 0px 0px 15px 0px; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_options{ width: 48%; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_promo_code{ width: 48%; margin: 15px 0px 0px 0px; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_promo_code input[type=text]{ width: 100%; height: 45px; border: 1px solid #eeeeee; padding: 5px 10px; margin: 0px 0px 15px 0px; }
#WCL_RESERVATION_WIDGET.TYPE02 .select-box { border: 1px solid #eeeeee; padding: 10px 0px 10px 15px; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_button{ width: 100%; height: 50px; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_icon_calendar{ left: calc(50% - 18px); bottom: 20px; }
#WCL_RESERVATION_WIDGET.TYPE02 .select-box__list{ left: 0; margin: 10px 0px 0px 0px; }
#WCL_RESERVATION_WIDGET.TYPE02 .select-box__input-text{ font-size: 1.2em; font-weight: 300; }
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_calendar input[type=text]{ position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); }
#WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box.col_full{}
#WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.col_full{ width: 100%; }
@media screen and (max-width : 1024px){
  #WCL_RESERVATION_WIDGET{display: none;}
}
@media screen and (max-width : 768px){
  #WCL_RESERVATION_WIDGET{ position: fixed; bottom: 0; left: 0;}
  #WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_control{ width: 100%; min-width: 100%; }
  #WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_box{ border: none; }
  #WCL_RESERVATION_WIDGET.TYPE01 .wcl_rsvn_container { height : 50px; }
  #WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_control{max-width: 100%; }
  #WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_box.wcl_button{ height: 100%; }
  #WCL_RESERVATION_WIDGET.TYPE02 .wcl_rsvn_container { height : 50px; padding: 0; align-items: flex-start; }
  #WCL_RESERVATION_WIDGET .wcl_rsvn_box{ display: none; }
  #WCL_RESERVATION_WIDGET .wcl_calling{ display: flex; }
  #WCL_RESERVATION_WIDGET .wcl_mailing{ display: flex; }
  #WCL_RESERVATION_WIDGET .wcl_button.wcl_pc_button{ display: none; }
  #WCL_RESERVATION_WIDGET .wcl_button.wcl_mobile_button{ display: flex; }
  #WCL_RESERVATION_WIDGET .wcl_button.wcl_mobile_button a{ height: 100%; }
  #WCL_RESERVATION_WIDGET .wcl_button{ width: 70%!important; display: flex; }
  .hide-checkbox-mobile{ display: none!important; }
}


/* Keyframe for dropdown list */
@-webkit-keyframes HideList {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}

@keyframes HideList {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
