@charset "UTF-8";
html{min-height:100%;}
body {font-family: Nunito,sans-serif; font-size:18px; font-weight: 400; color: #212121; background: #f8f8f8; margin: 0; line-height: 1.5; position:relative; min-height: 100vh;}
body::after {position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.2); z-index: 5;}
body.overlay::after{content:"";}
body.overlay{overflow:hidden;}
h1{font-size: 2rem; font-weight: 500; line-height: 1; color: #333; display: block; padding: 10px 15px 10px 70px; border-radius: 30px; background: #ddd; margin: 0 0 40px 0; position: relative;}
h1 .icon{font-size: 20px; position: absolute; top: 0; left: 0; bottom: 0; width: 52px; text-align: center; line-height: 52px; border-radius: 50%; background: #2cc990; color: #fff;}
h1 .title{font-size: 20px; line-height: 32px; display: block;}
h1.clean{padding:10px 20px; font-size:20px; line-height:1.2; display: block;}
h2{font-size:1.6rem; padding:0; margin:0 0 20px 0; font-weight:400; line-height: 1.2; color: inherit;}
h4{font-size: 1.15rem; padding:0 0 10px 0; margin:0 0 .5rem 0; display: inline-block;font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit;}
p{margin:0;}
a{text-decoration:none; color:inherit; outline:none; transition: color .2s;}
.formGroup{margin-bottom: 15px; display: table; width: 100%;}
.formGroup>.title{font-size:16px; line-height: 1.3; background: #eee; padding: 10px 15px; margin: 0 0 5px 0; font-weight:700;}
.formGroup>.content{padding: 0px 15px; line-height: 1.3; font-size:16px; margin: 0 0 10px 0; display: table; width: 100%;}
.lngItem{border-right: 1px solid #ddd; padding: 0 10px 0 0; margin: 0 10px 0 0; float: left;}
.hide{display:none !important;}
.flex{display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.align-items-center {-ms-flex-align: center; align-items: center;}
.button{border-radius: 5px; outline: initial !important; font-size:20px; padding:10px 30px; display: block; font-weight: 400; text-align: center; border: none; line-height: 1.2; color: #fff; width: 45%; margin: 0 10% 0 0; float: left;}
.button:nth-child(2n){margin:0;}
.buttonGreen{background: #2cc990; color: #fff;}
.buttonOrange{background: #fcb941; color: #fff;}
.buttonBlue{background: #2c82c9; color: #fff;}

/* Login page */
body.login{height: 100%;}
body.login main {margin: 0 !important; height: 100%; position:relative;}
body.login main .container {height:100%}
.transition1s{transition:all 0.1s linear 0s; -webkit-transition:all 0.1s linear 0s; -moz-transition:all 0.1s linear 0s; -o-transition:all 0.1s linear 0s; -ms-transition:all 0.1s linear 0s;}
.transition2s{transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
.transition3s{transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;}
#loading{position: absolute; top: 20px;}
.auth-card {display:flex; flex-direction:row; box-shadow:0 1px 15px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04); border-bottom-right-radius: 20px !important;}
.auth-card .image-side {width:40%; background:#f2f2f2; background-size:cover; padding:80px 40px; color: #999;}
.auth-card .image-side img{width:auto; max-width:40%; margin:20px auto;}
.auth-card .image-side .h3 {line-height:.8rem}
.auth-card .form-side {width:60%;padding:80px}
#wf-login-logo{width:60%; max-width:300px; margin:100px auto 50px auto;}
#wf-login-form{background:#fff; padding: 40px; border-radius: 20px; width:100%; max-width:400px; margin: 0 auto; text-align:center;}
#wf-login-form label{margin-bottom:5px;display: block;}
#wf-login-form input{border-radius: 5px; outline: initial !important; box-shadow: none !important; padding: 5px 15px; line-height: 2; border: 1px solid #d7d7d7; background: #fff; color: #212121; display: block; width: 100%;}
#wf-login-form button{border-radius: 5px; outline: initial !important; font-size:20px; padding: 10px 30px; display: inline-block; font-weight: 400; text-align: center; border:none; line-height: 1.5; background-color:#2c82c9; color: #fff; width:100%;}
.loginStatus{position: absolute; top: 10px; left: 50%; z-index: 1; transform: translate3d(-50%,-100px,0); transition: all 1s; padding: 20px 50px 20px 20px; background: #dc3545; color: #fff; width:95%; font-size:4.5vw;}
.loginStatus .close{position: absolute; top:50%; right: 0; padding:.5rem 1rem; color:inherit; background-color:transparent; border:0; z-index: 1; transform: translateY(-50%);}
.loginStatus.show{transform:translate3d(-50%,0,0);}
.loginStatus.wrong{background: #dc3545;}
.loginStatus.correct{background: #28a745;}
.h-100 {height: 100% !important;}

header{position: fixed; top: 0; right: 0; left: 0; margin: 0; background: #f8f8f8; z-index: 5; padding: 20px;}
main{padding:120px 0 50px 0;}
body.login main{padding:0;}
#sideMenu{position: fixed; top: 0; left: 0; right: 50px; bottom: 0; background: #fff; z-index:6; padding: 25px; border-radius: 0 20px 20px 0; overflow-y: scroll; -webkit-box-shadow:0 1px 15px rgba(0,0,0,.2),0 1px 6px rgba(0,0,0,.2); -moz-box-shadow:0 1px 15px rgba(0,0,0,.2),0 1px 6px rgba(0,0,0,.2); box-shadow:0 1px 15px rgba(0,0,0,.2),0 1px 6px rgba(0,0,0,.2); transform:translateX(calc(-100% - 10px))}
#sideMenu.open{transform:translateX(0);}
#sideMenu .logo{width:50%; max-width:150px; margin:0 auto 50px auto;}
#sideMenu .menuSection{width: 100%; padding: 20px 0; border-top: 1px solid #ccc; margin: 0 0 20px 0;}
#sideMenu .menuSection .item{display: block; padding:10px 15px; border-radius:30px; background:#f2f2f2; margin:0 0 15px 0;}
#sideMenu .menuSection .item:hover{background:#d8e6ff;}
#sideMenu .menuSection .item .icon{margin: 0 20px 0 0; font-size:20px;}
#sideMenu .menuSection .item .title{font-size:20px;}
.menuButton{position: fixed; top:20px; left:20px; color: #bbbec3; z-index: 5; font-size: 26px;}
.headerLogo{width:50%; display: block; margin:0 auto; max-width:300px; height:80px; z-index: 4; position: relative;}
.headerLogo img{width:auto; height:auto; max-height:100px; margin:0 auto; max-width:100%; position: absolute; top: 50%; left:50%; transform:translateX(-50%) translateY(-50%);}
.homepageTabsWrapper{display: table; width: 100%;}
.homepageTabsWrapper .item{width:100%; display: block; float: left; margin:0 0 20px 0; text-align: center; background: #fff; border-radius:.75rem; position: relative; -webkit-box-shadow:0 1px 15px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04); -moz-box-shadow:0 1px 15px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04); box-shadow:0 1px 15px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04); padding: 2rem .5rem; color:#fff;}
.homepageTabsWrapper .item:last-child{margin:0;}
.homepageTabsWrapper .item.half{width:48%; margin:0 4% 20px 0;}
.homepageTabsWrapper .item.half:nth-child(2n){margin:0 0 20px 0;}
.homepageTabsWrapper .item.orange{background: #fcb941;}
.homepageTabsWrapper .item.blue{background: #2c82c9;}
.homepageTabsWrapper .item.yellow{background: #eee657;}
.homepageTabsWrapper .item.green{background: #2cc990;}
/*.homepageTabsWrapper .item .textWrapper{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}*/
.homepageTabsWrapper .item .icon{font-size:30px; margin: 0 0 10px 0; display:block;}
.homepageTabsWrapper .item .title{display: block; line-height: 2; font-size: 16px; margin: 0 0 10px 0;}
.homepageTabsWrapper .item .number{font-size: 50px; font-weight: 700; display: block; line-height: 1;}
#mainMenuWrapper{position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:100%; width:450px; border-radius: 5px 5px 0 0; overflow: hidden;}
#mainMenuWrapper .item{width:calc(100% / 6); display: block; float: left; text-align: center; background:#4b3a58; padding: 0 0 15% 0; position: relative; color:#fff; border-right:1px solid #ccc;}
#mainMenuWrapper .item:last-child{border:none;}
#mainMenuWrapper .item .textWrapper{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
#mainMenuWrapper .item .icon{font-size:16px; margin: 0 0 5px 0; display:contents;}
#mainMenuWrapper .item .icon svg{fill:#fff; width:19px;}
#mainMenuWrapper .item .title{display: block; line-height:1; font-size:11px;}
.menuHolder{margin:0 0 50px 0;}
.menuHolder h2{color: #2c82c9; font-weight:700; margin:0 0 10px 0;}

.dd {position: relative; display:block; margin:0 0 30px 0; padding:0; width:100%; list-style:none; font-size:16px; line-height:1.5;}
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }
.dd-item, .dd-empty, .dd-placeholder {position: relative; line-height:1.5; border:1px solid #ddd; background:#fff; background: -webkit-linear-gradient(top, #fff 0%, #ddd 100%); background:-moz-linear-gradient(top, #fff 0%, #ddd 100%); background:linear-gradient(top, #fff 0%, #ddd 100%); font-size: 16px;display: block; margin:0 0 10px 0; padding:0 0 0 45px; color: #333; text-decoration: none; font-weight: bold; -webkit-border-radius: 3px; border-radius: 3px;}
.dd-item>a{display:flex; flex-direction:row; padding:10px; line-height: 1.3;}
.dd-item>a>span{flex-grow:0; width:100px;}
.mealTitle{flex-grow:1;}
.dd-handle:hover { color: #2ea8e5; background: #fff; }
.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }
.dd-placeholder,.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5; background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); background-size: 60px 60px;
background-position: 0 0, 30px 30px;}
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);}
.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
#nestable-menu { padding: 0; margin: 20px 0; }
.dd-handle {position: absolute; left:0; top:0; bottom:0; width:40px; cursor: pointer; text-indent: 100%; white-space: nowrap; overflow: hidden; background: #ddd; background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%); background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%); background: linear-gradient(top, #ddd 0%, #bbb 100%); border-top-right-radius: 0; border-bottom-right-radius: 0;}
.dd-handle::before {content: '≡';display: block;position: absolute;left: 50%;top: 50%;width: 100%;text-align: center;text-indent: 0;color: #fff;font-size: 25px;font-weight: normal;transform: translateX(-50%) translateY(-50%);z-index: 5;}
.dd-handle:hover {background: #bbb;}
#nestable2 .dd-item > button:before {color: #fff;}
.info{display: block; min-width: 100px; max-width: 100px; text-align: center; margin: 0 0 0 10px;}
.info .price{display: block; clear: both; font-size: 12px; margin: 4px 0;}
.displayStatus{display:inline-block; width:15px; height:15px; border-radius: 50%; margin:0 10px 0 0;}
.displayStatus.on{background-color: #2cc990;}
.displayStatus.off{background-color: #fc6042;}
.saveButton{border-radius: 5px; outline: initial !important; font-size:20px; padding: 10px 30px; display: inline-block; font-weight: 400; text-align: center; border:none; line-height: 1.5; background-color:#2c82c9; color: #fff; width:100%;}
.saveButtonHide{border-radius: 5px; outline: initial !important; font-size:20px; padding: 10px 30px; display: inline-block; font-weight: 400; text-align: center; border:none; line-height: 1.5; background-color:#2c82c9; color: #fff; width:100%; display: none;}
.saveButton.half{width:45%;}
.buttonHolder{display: none;}
.catTitle{width: 100%; border-bottom: 1px solid #2cc990; margin: 10px 0; padding: 5px; font-size: 18px;}
/*.mainDelete{float: right; background: #fc6042; text-align: center; color: #fff; border-radius: 4px; font-size: 16px; cursor: pointer; margin: 0 0 20px 0; line-height: 2; padding: 0 15px;}*/
/*.mainEdit{float: right; background-color:#2cc990; width:40px; height:40px; line-height:40px; text-align: center; color: #fff; border-radius: 4px; font-size:20px; position: absolute; top: 50%; right: 70px; transform: translateY(-50%);}*/
.addButton{position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; background: #2e5bff; border-radius: 50%; font-size: 20px; display: block; float: right;}
.manuItem{position: relative;border: 1px solid #ddd;background: #fff;background: -webkit-linear-gradient(top, #fff 0%, #ddd 100%);background: -moz-linear-gradient(top, #fff 0%, #ddd 100%);background: linear-gradient(top, #fff 0%, #ddd 100%);font-size: 16px;margin: 0 0 10px 0;color: #333;text-decoration: none;font-weight: bold;-webkit-border-radius: 3px;border-radius: 3px;display: flex;flex-direction: row;padding: 10px;line-height: 1.3;}

.qrcodeHolder{width:80%; margin:0 auto 40px auto; max-width:250px; box-shadow: 10px 10px 20px #e6e6e6, 0px 0px 20px #ffffff; border-radius: 30px; overflow: hidden; padding: 30px;}

#form{clear:both; display: table; width: 100%;}
#form label{margin-bottom:5px;display: block;}
label .error{color:#fc6042; font-size: 14px; float: right; font-weight: 300;}
#form input, #form select{border-radius: 5px; outline: initial !important; box-shadow: none !important; padding: 5px 15px; line-height: 2; border: 1px solid #d7d7d7; background: #fff; color: #212121; display: block; width: 100%;}
#form textarea{border-radius: 5px; outline: initial !important; box-shadow: none !important; padding: 5px 15px; line-height:1.4; border: 1px solid #d7d7d7; background: #fff; color: #212121; display: block; width: 100%; resize:none; height:100px;}
#form button{border-radius: 5px; outline: initial !important; font-size:20px; padding: 10px 30px; display: inline-block; font-weight: 400; text-align: center; border:none; line-height: 1.5; background-color:#2c82c9; color: #fff; width:100%;}
#form button.submit{width: 45%; float: left;}
.cancel{border-radius: 5px; outline: initial !important; font-size: 20px; padding: 10px 30px; display: block; font-weight: 400; text-align: center; border: none; line-height: 1.5; background-color: #fcb941; color: #fff; width: 45%; margin: 0 10% 0 0; float: left;}
.switch{margin-bottom: 1.5rem;}
.switch .title{margin:0;}
.switch label{cursor:pointer; display:inline-block !important;}
.switch label input[type="checkbox"]{opacity: 0; width: 0; height: 0; position: absolute; pointer-events: none;}
.switch label .lever{content: ""; display: inline-block; position: relative; background-color: #818181; border-radius: .9375rem; vertical-align: middle; margin: 0 0.4rem; width: 2.5rem; height: .9375rem; transition: background .3s ease;}
.switch label .lever::after{content: ""; position: absolute; display: inline-block; background-color:#fc6042; border-radius: 1.3125rem; left: -.3125rem; top: -.1875rem; width: 1.3125rem; height: 1.3125rem; transition: left .3s ease,background .3s ease,box-shadow 1s ease;}
.switch label input[type="checkbox"]:checked + .lever {background-color: #dccfe2;}
.switch label input[type="checkbox"]:checked + .lever::after {background-color:#2cc990; left: 1.5rem;}
.switch.inline{display: -ms-inline-flexbox; display: inline-flex; padding-right: 30px;}
.labelFileButton{width:90vw; height:90vw; border: 1px solid #ddd; text-align: center; position: relative; background:#ddd;}
.labelFileButton img{max-width: 100%; max-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1;}
.featuredImageDelete{position: absolute; bottom: 10px; right: 10px; background: #fc6042; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; border-radius: 4px; font-size: 20px; cursor: pointer; z-index: 3;}
.chooseImage{position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 100px; color:rgba(255,255,255,0.5); z-index:2;}
.viewImg{border: 1px solid #ccc; padding: 10px; background: #fff; margin: 0 0 20px 0;}
#form input.hide[type="checkbox"] + label{margin: 0 5% 20px 0; flex-basis: left; -ms-flex: 0 0 30%; flex: 0 0 30%; background: #eee; height:27vw; -ms-flex-align: center; align-items: center; display: flex; justify-content: center; text-align: center; font-size: 16px; line-height: 1.2; border-radius: 5px; padding:10px; color:#999;}
#form input.hide[type="checkbox"] + label:nth-child(3n){margin:0 0 20px 0;}
#form input.hide[type="checkbox"]:checked + label{background:#2cc990; color:#fff;}
#form .tempHolder{margin: 0 5% 20px 0; flex-basis: left; -ms-flex: 0 0 30%; flex: 0 0 30%; }
#form .tempHolder:nth-child(3n){margin:0 0 20px 0;}
#form input.hide[type="radio"] + label{background: #eee; height:27vw; -ms-flex-align: center; align-items: center; display: flex; justify-content: center; text-align: center; font-size: 16px; line-height: 1.2; border-radius: 5px; padding:10px; color:#999;}
#form input.hide[type="radio"] + label:nth-child(3n){margin:0 0 20px 0;}
#form input.hide[type="radio"]:checked + label{background:#2cc990; color:#fff;}
.templateDescription{display: block; font-size: 15px; line-height: 1.2;}

.subMenuWrapper{border-top: 1px solid #ddd; padding:15px; font-size:16px; font-weight:700; margin-top: 25px;}
.subMenuWrapper .item{display: block; margin: 0 0 10px 0; color: #2c82c9;}
.subMenuWrapper .item.red{color:#fc6042;}
.subMenuWrapper .item .icon{margin:0 10px 0 0;}

/* Notification */
.notification-container {box-sizing:border-box;  position:fixed; top:15px; right:15px; z-index:999999; width:auto; max-width:95%; overflow-x:hidden; overflow-y:auto}
.notification { box-sizing:border-box; cursor:pointer; font-size:1em; line-height:1.2em; position:relative; border-radius:3px; box-shadow: 0 1px 15px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04);padding: 25px; transform:translate3d(120%,0,0); transition:all 2s;}
.notification.enter{transform:translate3d(0,0,0);}
.notification .close{position: absolute; top: 0; right: 0; padding:10px; color: inherit; background-color: transparent; border:0; line-height:10px; font-size:20px;}
.notification .title {font-size:16px; line-height:1.2em; font-weight:400; margin:0 0 5px; padding:0;}
.notification-error.filled { color:#fff; background-color:#c43d4b}
.notification-error.filled .notification-message .message,.notification-error.filled .notification-message .title { color:#fff}
.notification-success { color:#3e884f; background-color:#fff; border:1px solid #3e884f; opacity:1}
.notification-success.filled { color:#fff; background-color:#3e884f}
.notification-success.filled .notification-message .message,.notification-success.filled .notification-message .title { color:#fff}

.loader {border: 16px solid #f3f3f3;  border-radius: 50%;  border-top: 16px solid #3498db;   margin: 0 auto; -webkit-animation: spin 2s linear infinite; /* Safari */  animation: spin 2s linear infinite; position:  absolute;   top: 30%;   left: 30%;   bottom: 30%;   right: 30%;}
/* Safari */
@-webkit-keyframes spin {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); }}
@keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}

/*-------------------------- Modal popup ------------------------*/
.wf-modal-holder{display:none; position:fixed; top:150px; left:50%; transform:translateX(-50%); width:500px; max-width:90%; min-width:40%; color:#000; background-color:#fff; z-index:9999; -webkit-box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.3); -moz-box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.3); box-shadow:0px 0px 30px 0px rgba(50, 50, 50, 0.3); padding:30px; border-radius:4px; text-align: center; font-size: 18px;}
.wf-modal-back{display: none;position:fixed; height:100%; width:100%; top:0; left:0; z-index:9998; background:rgba(255,255,255,0.8);}
.wf-modal-content{padding:0 0 40px 0;}
.wf-modal-response{display:block; width:100%; text-align:center;}
.wf-modal-content>.title{font-weight: 700;}
.wf-modal-response>button{display:inline-block; margin:0 10px; border:none; padding:8px 20px; color:#fff;}
.wf-modal-response>button.yes{background:#2ecc71;}
.wf-modal-response>button.no{background:#e74c3c;}
.wf-modal-response>button.ok{background:#3498db;}

@media only screen and (max-device-width: 812px) and (orientation: portrait) {
    /*.homepageTabsWrapper .item{width:100%; margin:0 0 20px 0; padding:0 0 46% 0;}*/
    #mainMenuWrapper{border-radius:0;}
}