/* CORE STYLES */
html { padding: 0; margin: 0; }
body { font-family: Lato, Arial, sans; color: #666; background-color: #fff; padding: 0; margin: 0; font-size: 18px;  }
h1 { font-weight: 300; font-size: 38px; }
p { margin: 0; padding: 0; }
input,select,textarea { font-family: Lato, Arial, sans; }
h2 { font-weight: 700; font-size: 20px; }

.center { text-align: center; }
.material-icons:hover { cursor: pointer; }
.button:hover { cursor: pointer; }
.hide { display: none; }
.tiny .material-icons { font-size: 20px !important; }

/* MODAL */
#overlay { display: none; z-index: 999997; position: fixed; top: 0; left: 0; right: 0; bottom: 0;  background-color: rgba(0,0,0,.75); }
#cart #overlay { background-color: rgba(255,255,255,.75); }
#modal { display: none; z-index: 999998; position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%; background-color: #fff; border-radius: 5px; }
#processing_message { display: none; z-index: 999999; position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; background: transparent; }
#processing_message .loading_helper { display: inline-block; height: 100%; width: 100%; background: transparent url('/img/cart_processing.png') no-repeat center center; }
#modal_controls .close_modal { z-index: 9999999; position: absolute; top: 20px; right: 20px; color: #666; }
#meal_modal_content { display: flex; justify-content: space-between; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 20px; overflow-y: auto; }
#meal_modal_content h2 { padding: 0; margin: 0 0 20px 0; }
#meal_modal_content h4 { padding: 0; margin: 0 0 10px 0; }
#modal_images { display: flex; flex-basis: 38%; flex-direction: column; justify-content: space-between; }
#modal_images .modal_image { min-width: 100px; min-height: 400px; background-position: center; background-size: cover; border: 2px solid #febd3f; }
#modal_text { display: flex; flex-basis: 60%; flex-direction: column;  }
#modal_text h2 { font-weight: 300; font-size: 28px; }
#modal_text h4 { font-weight: 300; font-size: 20px; }
#dietary_tags img { display: inline-block; width: 64px; height: auto; }

/* LOGIN */
#login { background: #ccc url('/img/login_bg.jpg') no-repeat top center; background-size: cover; }
#login_form { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 350px; padding: 30px; background-color: #fff; box-shadow: #666 0px 0px 10px; border-radius: 10px; }
#login_form h1 { color: #273B40; }
.login_image { text-align: center; }
.form_item { padding: 5px 0; }
.form_item label { display: inline-block; font-weight: bold; margin-top: 10px; }
.form_item.hidden { display: none; }
.form_forgotten { text-align: center; margin: 5px 0px 10px 0; }
.form_forgotten  a { color: #273B40; text-decoration: none; }
.form_forgotten  a:hover { color: #369; text-decoration: underline; }
.form_create_account { text-align: center; margin-top: 10px; }
.form_create_account  a { color: #273B40; text-decoration: none; }
.form_create_account  a:hover { color: #369; text-decoration: underline; }

.login_input { width: 325px !important; padding: 10px; border: 1px solid #273B40; }
.login_button { width: 100%; padding: 15px 0; margin-top: 20px; text-align: center; background-color: #273B40; color: #fff; text-transform: uppercase; font-weight: 700; border: 0; }
.login_button:hover { background-color: #369; cursor: pointer; }
.login_message { padding: 10px; background-color: rgba(217,12,12,.25); border: 1px solid #e00; color: #e00; text-align: center; margin-bottom: 10px; }

/* APP */
a .material-icons { color: #000; }
body.app #base { height: 100vh; }
#top_nav { background-color: #eee; position: fixed; z-index: 99999; width: 100%; }
#top_menu { display: flex; width: 96vw; margin: 0 auto; padding: 0; color: #666;}
#top_menu a { font-weight: 300; color: #999; text-decoration: none; text-transform: uppercase;}
.top_menu_nav { list-style: none; padding: 0; margin: 0;  flex: 0 0 50%; }
.top_menu_nav li { display: inline-block; padding: 0; margin: 0; }
.top_menu_nav li a { display: inline-block; padding: 5px 10px; margin: 0; }
#nav_left { text-align: left; }
#nav_right { text-align: right; }
#page_nav { position: fixed; width:100%; background-color: #fff; border-bottom: 1px solid #eee; height: 100px; padding: 40px 10px 10px 10px; z-index: 99998; -webkit-box-shadow: 0px 3px 5px 2px rgba(204,204,204,.25); -moz-box-shadow: 0px 3px 5px 2px rgba(204,204,204,.25); box-shadow: 0px 3px 5px 2px rgba(204,204,204,.25); }
#page_menu { display: flex; justify-content: space-between; color: rgba(39,59,34,.25); width: 96vw; margin: 0 auto; position: relative; }
#nav { display: flex; min-height: 80px; align-items: center; justify-content: center; }
#nav a { display: inline-block; text-transform: uppercase; color: #999; text-decoration: none; padding: 6px 12px; margin: 0 2px; border-radius: 3px; }
#nav a img { display: inline-block; margin-top: 1px; }
#nav a:hover { background-color: rgba(0,0,0,.05); }
#nav a.active { color: #333; background-color: rgba(0,0,0,.1); }
#nav a.prevent { color: #ccc; cursor: not-allowed; }
#page_menu .logo { background: transparent url('/img/logo-small.png') no-repeat 7px center; padding: 10px; background-size: 150px; min-height: 80px; min-width: 180px; }
#page_menu .logo p { display: inline-block; color: #fff; font-weight: 700; font-size: 30px; margin-left: 40px; }
#nav { margin-right: 20px; }
#sub_nav a { display: inline-block; background-color: #273B40; border: 1px solid #273B40; color: #fff; text-decoration: none; padding: 4px 10px; margin: 0 16px 0 0; border-radius: 3px;  }
#sub_nav a:hover { color: #273B40; background-color: #fff; }
#nav a:hover { color: #666; background-color: rgba(0,0,0,.05); }
#page_block { padding: 170px 0 0 0; margin: 0; }
#page_content { width: 98vw; margin: 0 auto; }
#page_content  h1 { color: #666; font-size: 30px; }
#date_switcher { display:flex; justify-content:space-evenly; }

/* FORMS */
.form_item { display: flex; padding: 0; margin: 0 0 10px 0; }
.form_item label { display: inline-block; width: 160px; text-align: right; margin-right: 10px; vertical-align: middle; }
.form_item.textarea label { vertical-align: top; }
.form_item input { padding: 10px; }
.form_item select { padding: 10px; }
.form_item input[type=text] { width: 300px; }
.form_item input.small { width: 100px; }
.form_item input[type=password] { width: 300px; }
.form_item input[type=number] { width: 60px; }
.form_item input[type=date] { width: 140px; }
.form_item textarea { padding: 10px; width: 600px; height: 120px; }
.form_item input[type=submit] { padding: 10px 20px; font-weight: bold; background-color: #273B40; color: #fff; border: 1px solid #273B40;  }
.form_item input[type=submit]:hover { background-color: rgba(39,59,34,.25); color: #273B40; border: 1px solid #273B40; cursor: pointer; }

.meal_tags { display: inline; width: 80vw; }

.form_checkbox { display: inline; margin-right: 10px; }
.form_checkbox input { display: none; }
.form_checkbox label { display: inline-block; border: 1px solid #999; color: #000; font-weight: bold; padding: 5px 10px; margin: 0 10px 10px 0; width: auto; text-align: center; }
.form_checkbox label:hover { background-color: #ddd; cursor: pointer; }
.form_checkbox label.checked { background-color: rgba(0,113,120,.5); }
.form_radio { display: inline; margin-right: 10px; }
.form_radio input { display: none; }
.form_radio label { display: inline-block; border: 1px solid #999; color: #000; font-weight: bold; padding: 8px 16px; margin: 0 10px 10px 0; width: auto; text-align: center; }
.form_radio label:hover { background-color: #ddd; cursor: pointer; }
.form_radio label.checked { background-color: rgba(0,113,120,.5); }
.form_images { position: relative; padding: 10px 0; }
.form_images img { border: 1px solid #273B40; }
.form_image { min-width: 100px; display: inline-block; position: relative; margin-right: 10px; }
.form_image_overlay { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
.form_image:hover img { opacity: .5; cursor: pointer; }
.form_image:hover .form_image_overlay { opacity: 1; }
.controls { margin-bottom: 20px; }
.controls a { display: inline-block; padding: 10px 20px; background-color: #273B40; color: #fff; text-transform: uppercase; text-decoration: none; margin-right: 20px; }
.controls a:hover { background-color: rgba(39,59,34,.25); }

.dataTables_length { margin-bottom: 10px !important; }
.datatable th { text-align: left; background-color: rgba(39,59,34,.25); }
.datatable tr.even { background-color: #eee; }
table.dataTable tfoot th, table.dataTable tfoot td, table.dataTable thead th, table.dataTable thead td { padding: 10px !important; }
.datatable tfoot { background-color: rgba(39,59,34,.25); color: #fff; }

#confirm_message { width: 60vw; text-align: center; background-color: rgba(254,189,63,.5); border: 2px dashed #febd3f; margin: 0 auto; padding: 40px; }
#confirm_message h2 { margin-top: 0px; }
#confirm_message a { padding: 10px 20px; margin: 0 15px; text-transform: uppercase; color: #fff; text-decoration: none; }
#confirm_message a.confirm { background-color: #273B40; }
#confirm_message a.confirm:hover { background-color: rgba(39,59,34,.25); }
#confirm_message a.cancel { background-color: #f06721; }
#confirm_message a.cancel:hover { background-color: #febd3f; }

/* PROFILE SETTINGS */
#profile_settings { display: flex; justify-content: space-between; }
.profile_settings_item { margin-right: 10px; cursor: pointer; display: flex; flex-direction: column; background-color: rgba(0,113,120,.2); padding: 20px; border-radius: 10px; }
.profile_settings_item h3 { margin-top: 0; text-align: center; color: #273B40; }
.profile_settings_item img { width: 210px; height: 210px; object-fit: fill;}
.profile_settings_item a { display: block; text-align: center; background-color: #273B40; color: #fff; margin-top: 10px; padding: 10px 20px; text-decoration: none; border: 1px solid #273B40; }
.profile_settings_item a:hover { background-color: rgba(39,59,34,.25); color: #273B40; border: 1px solid #273B40; }
#summary_table tr.even { background-color: #eee; }

/* PASSWORD*/
.new_password span { display: inline-block; margin: 7px 0 0 10px; }
.new_password .short{ font-weight:bold; color:#FF0000; font-size:larger; }
.new_password .weak{ font-weight:bold; color:orange; font-size:larger; }
.new_password .good{ font-weight:bold; color:#2D98F3; font-size:larger; }
.new_password .strong{ font-weight:bold; color: limegreen; font-size:larger; }
#form_message { display: none; border: 1px solid #666; width: 30vw; min-width: 400px; background-color: rgba(254,189,63,.2); text-align: center; padding: 10px; margin-bottom: 20px; }
#login_form #form_message { width: auto !important; min-width: 0px; }
#form_message h3 { margin: 0 0 10px 0; color: #666; }
#form_message p { margin: 0; line-height: 1.6em; color: #666; }

/* REPORT */
#report_table { border-collapse: collapse; }
#report_table th { text-align: left; padding: 5px 2px; background-color: rgba(39,59,34,.25); }
#report_table td { padding: 5px 2px; }
#report_table th:first-child, #report_table td:first-child { padding-left: 6px; }
#report_table th:last-child, #report_table td:last-child { padding-right: 6px; }
#report_table tbody tr:nth-child(even) {background: #CCC}
#report_table th.c, #report_table td.c { text-align: center; }
#report_table th.r, #report_table td.r { text-align: right; }

/* MISC */
.section { margin-bottom: 30px; }
.section p { font-size: 16px; line-height: 1.6em; }
#message { margin-top: 20px; border: 1px solid #ccc; background-color: #eee; text-align: center; padding: 20px; font-size: 24px; }
#message.success { border-color: #3ab4a3; background-color: #c2d6d8;  }
.inline-help { display: inline-block; margin: 10px 0 0 10px; font-size: 14px; }
.actions a { display: inline-block; margin-right: 10px; }
.actions a:last-child { margin-right: 0px; }
.ui-widget-header .ui-icon { background-image: url('/img/ui-icons_444444_256x240.png'); }

/* FORM FLEX */
.form_flex { display: flex; }
.form_flex .form_col_50 { display: flex; flex-direction: column; flex-basis: 50% }

/* TABS */
#tabs.ui-tabs { border: 0; }
#tabs .ui-tabs-nav { background: transparent; border: 0; }
#tabs .ui-tabs-active { background-color: #fff; border-color: #ccc; }
#tabs .ui-tabs-active a {color: #454545; }
#tabs .ui-tabs-panel { border: 1px solid #ccc; }

/* FORM FIXES */
.form_item.vert_center input[type=radio],.form_item.vert_center input[type=checkbox] { display: inline-block; margin-top: 14px; }
.form_item.vert_center span { display: inline-block; margin: 9px 10px 0 5px; font-weight: 500; }
.ui-dialog-titlebar-close { visibility: hidden; }

/* MEDIA QUERIES */

@media screen and (max-width: 1366px) {
    /*p { font-size: 14px; }*/
    .meal_box { width: 29.5%; }
    #cart_sidebar { width: 24%; top: 145px; right: 10px; bottom: 10px; margin: 20px 0 0 30px; }
    #checkout_items { width: initial; }
}
@media screen and (max-width: 1566px) {
    #start_steps { margin: 10px 30px; }
}

@media screen and (max-width: 1300px) {
    #start_steps { font-size: .9em; margin: 10px; }
}

@media screen and (max-width: 1024px) {
    #date_switcher span, #date_switcher select { display: block; }
    #start_steps { font-size: .8em; margin: 10px 0; }
}

@media screen and (max-width: 768px) {
    .meal_box { width: 45%; }

@media screen and (max-width: 500px) {
    .meal_box { width: 100%; }
}