@import url(https://fonts.googleapis.com/css?family=Oswald:400&subset=latin,latin-ext);

@font-face {
    font-family: 'FuturaCondensedMedium';
    src: url('../font/futura-condensed-medium.eot');
    src: url('../font/futura-condensed-medium.eot?#iefix') format('embedded-opentype'),
         url('../font/futura-condensed-medium.woff') format('woff'),
         url('../font/futura-condensed-medium.ttf') format('truetype');
}

@font-face {
    font-family: 'FuturaCondensedBold';
    src: url('../font/futura-condensed-bold.eot');
    src: url('../font/futura-condensed-bold.eot?#iefix') format('embedded-opentype'),
         url('../font/futura-condensed-bold.woff') format('woff'),
         url('../font/futura-condensed-bold.ttf') format('truetype');
}

@font-face {
    font-family: 'abakutlsymsans';
    src: url('../font/abakutlsymsans.eot');
    src: url('../font/abakutlsymsans.eot?#iefix') format('embedded-opentype'),
         url('../font/abakutlsymsans.woff') format('woff'),
         url('../font/abakutlsymsans.ttf') format('truetype');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { min-height: 100vh; display: flex; flex-direction: column; background-color: #f9f9f9; position: relative; }
#Toolbar { width: 100%; height: 55px; background-color: #e21e21; box-shadow: 0 5px 5px rgba(0,0,0,0.2); position: relative; z-index: 3000; }

#LeftIconArea { width: 55px; height: 55px; float: left; text-align: center; line-height: 55px; cursor: pointer; }
#FoodXLogoArea { width: calc(100% - 110px); height: 55px; float: left; }
#FoodXLogoArea img { height: 35px; width: auto; margin-top: 5px; }
#RightIconArea { width: 55px; height: 55px; float: left; text-align: center; line-height: 55px; cursor: pointer; }
#LeftIconArea i, #RightIconArea i { font-size: 31px; color: white;margin-top:12px; }

#LoginForm { display: none; float: right; height: 55px; padding-right: 15px; }
.form-item { float: left; margin-left: 10px; margin-top: 12px; }
.form-logo { height: 44px; margin-right:5px; margin-top:5px; }
.form-logo img { height: 44px; width: auto; }
.input-wrapper { position: relative; display: inline-block; }
.input-wrapper input { height: 31px; padding: 0 10px 0 35px; border: none; border-radius: 4px; width: 150px; box-sizing: border-box; outline:none; font-family:'Oswald'; }
.input-wrapper i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #666; z-index: 2; }
.forgot-password { color: white; margin: 0 10px; cursor: pointer; font-size: 31px; }
.login-btn, .signup-btn {
    height: 31px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: normal;
    font-family: 'Oswald';
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.login-btn {
    background-color: #ffc107;
    color: #e21e21;
    font-family: 'Oswald';
}
.signup-btn {
    background-color: white;
    color: #e21e21;
    font-family: 'Oswald';
    margin-left: 10px;
}
.login-btn i, .signup-btn i { margin-right: 5px; color: #e21e21; }

#SignedForm { float: right; height: 55px; padding-right: 15px; display: none; align-items: center; gap: 5px;  }
.signed-form-item { float: left; margin-left: 10px; margin-top: 12px; }
.signed-form-logo { height: 44px; margin-right: 5px; margin-top: 0px; margin-right:20px; }
.signed-form-logo img { height: 44px; width: auto; }
.bonus-info { color: white; margin-right: 15px; font-family: 'FuturaCondensedMedium';font-size:20px; margin-right:20px; margin-top:5px; }
.bonus-info .amount { color: #ffc107; }
.bonus-info i { color: #ffc107; margin-right: 5px; }
.user-menu-item { color: white; font-size: 20px; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: color 0.3s; }
.user-menu-item:hover { color: #ffc107; }


#TopImage { width: 100%; height: 200px; background-color: #666; background-image: url('../img/Top.jpg');background-position: 0% 50%;background-size:cover;position:relative; }
#LogoArea { margin-left:calc((100% - 250px)/2);margin-top:75px;background: #ffffff;display: inline-block;height: 125px;width: 250px;border-top-left-radius: 125px;border-top-right-radius: 125px;opacity: 0.8;border-left:0.5px solid #dbdbdb;border-right:0.5px solid #dbdbdb;border-top:0.5px solid #dbdbdb; }
#TitleBar { width:100%;height:50px;background-color:#e21e21;box-shadow:0 2px 5px rgba(0,0,0,0.2);text-align:center;line-height:50px;color:#ffffff;font-family:'Oswald';font-size:18px;z-index:2; }


#Content { flex: 1; position: relative; min-height: calc(100vh - 420px); width: 100%; display:flex; flex-direction:column; align-items:center; }
.content-inner { width: 100%; max-width: 1000px; min-height:calc(100vh - 355px); display:flex; flex-direction:column; align-items:center; background-color:#ffffff; }

.OpenCloseArrow { width:30px;margin-top:30px; }



#Footer { width: 100%; height: 50px; background-color: #e21e21; color:#ffffff; font-family:'Oswald'; font-size: 18px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }

@media screen and (max-width: 1024px) {
   #TopImage { height:150px; }
   #LogoArea { width:200px;height:100px;margin-top:50px;margin-left:calc((100% - 200px)/2); }
    #LoginForm, #SignedForm {
        display: none !important;
    }
   .content-inner { min-height:calc(100vh - 305px); }
}
@media screen and (min-width: 1025px) {
	#FoodXLogoArea, #RightIconArea { display: none; }
    /*#LoginForm { display: block; }*/
    
}


.sidenav { width: 250px; height: 100%; position: fixed; z-index: 1; top: 0; left: -250px; background-color: #e21e21; overflow-x: hidden; transition: 0.2s; padding-top: 60px; z-index:10002; opacity:0.98; box-shadow:0 1px 5px 0px rgba(0,0,0,.7); }
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-family:'Oswald'; font-size: 18px; color:#ffffff; display: block; transition: 0.3s; }
.sidenav a:hover { color:#fcde6d; }
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-family:'Oswald'; font-size: 72px; margin-left: 50px; }


.sidenav2 { width: 250px; height: 100%; position: fixed; z-index: 1; top: 0; left: calc(100% + 250px); background-color:#363636; overflow-x: hidden; transition: 0.2s; padding-top: 60px; z-index:10002; opacity:0.98; box-shadow:0 1px 5px 0px rgba(0,0,0,.7); }
.sidenav2 a { padding: 8px 8px 8px 32px; text-decoration: none; font-family:'Oswald'; font-size: 18px; color:#ffffff; display: block; transition: 0.3s; }
.sidenav2 a:hover { color:#fcde6d; }
.sidenav2 .closebtn2 { position: absolute; top: 0; right: 25px; font-family:'Oswald'; font-size: 72px; margin-left: 50px; }

.OpenCloseArrow {
    width: 30px;
    margin-top: 30px;
}

.OpenCloseOutside {
    width: 200px;
    height: 200px;
    padding: 5px;
    background-color: #565656;
    border-radius: 100px;
}

.OpenCloseInside {
    width: 190px;
    height: 190px;
    border-radius: 96px;
    border: 2px solid #ffffff;
    background-image: url('../img/OpenClose.png');
    background-position: 50% 50%;
    background-size: cover;
}

.OpenCloseStatus {
    width: 134px;
    height: 53px;
    position: absolute;
    line-height: 42px;
    margin-left: 26px;
    margin-top: 83px;
    text-align: center;
    font-size: 22px;
    opacity: 1;
    font-family: Oswald;
}

.OpenCloseRed {
    background-color: #e12735;
    color: #e12735;
}

.OpenCloseGreen {
    background-color: #478e08;
    color: #478e08;
}

.BtnOutside {
    display: inline-block;
    height: 58px;
    padding: 4px;
    background-color: #565656;
    border-radius: 10px;
    cursor: pointer;

}

.BtnInside {
    float: left;
    height: 50px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    padding-left: 15px;
    border-radius: 10px;
    border: 2px solid #ffffff;
    padding-right: 15px;
    min-width: 120px;
    font-family: Oswald;
}

.BtnRed {
    background-color: #e12735;
    color: #ffffff;
}

.BtnGreen {
    background-color: #478e08;
    color: #ffffff;
}

.BtnOrange {
    background-color: #fa8513;
    color: #ffffff;
}