* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: #435165; } DIV.popup_message_main_container { width:100%; background-color:white; z-index:50; } DIV.popup_message_container { width: 90%; background-color:lightgray; padding: 2px 6px; margin: 8px auto; text-align:center; border:solid 1px; border-radius: 12px; } .cursor-default { cursor:default; } .mr-2 { margin-right:2px; } .mr-4 { margin-right:4px; } .pt-5 { padding-top:5px; } .pb-5 { padding-top:5px; } pr-1 { padding-right:1px; } pr-2 { padding-right:2px; } pr-3 { padding-right:3px; } .navbar-logo { width:260px; height:50px; } .pointer-default { pointer:default; } .border-bottom { border-bottom:solid 1px; } .border-radius-20 { border-radius: 20px; } .border { border:solid 1px; } .border-2 { border:solid 2px; } .border-color-green { border-color:green !important; } .float-right { float:right; } .font-75 { font-size:75%; } .font-85 { font-size:85%; } .font-95 { font-size:95%; } .icon { width: 28px; height: 28px; } .iconS { width:20px; height:20px; } .margin-auto { margin:auto; } .iconLarge { width: 48px; height: 48px; } .iconMedium { width: 36px; height: 36px; } .login { width: 400px; background-color: #ffffff; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3); margin: 100px auto; } .login h1 { text-align: center; color: #5b6574; font-size: 24px; padding: 20px 0 20px 0; border-bottom: 1px solid #dee0e4; } .login form { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; } .login form label { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: #3274d6; color: #ffffff; } .login form input[type="password"], .login form input[type="text"] { width: 310px; height: 50px; border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0 15px; } .login form input[type="submit"] { width: 100%; padding: 15px; margin-top: 20px; background-color: #3274d6; border: 0; cursor: pointer; font-weight: bold; color: #ffffff; transition: background-color 0.2s; } .login form input[type="submit"]:hover { background-color: #2868c7; transition: background-color 0.2s; } .navtop { background-color: #2f3947; height: 60px; width: 100%; border: 0; z-index:10; } .navtop div { display: flex; margin: 0 auto; width: 98%; height: 100%; } .navtop div h1, .navtop div a { display: inline-flex; align-items: center; } .navtop div h1 { flex: 1; font-size: 24px; padding: 0; margin: 0; color: #eaebed; font-weight: normal; } .navtop div a { padding: 0 20px; text-decoration: none; color: #c1c4c8; font-weight: bold; } .navtop div a i { padding: 2px 8px 0 0; } .navtop div a:hover { color: #eaebed; } body.loggedin { background-color: #f3f4f7; } .content { width: 98%; margin: 0 auto; } .content h2 { margin: 0; padding: 25px 0; font-size: 22px; border-bottom: 1px solid #e0e0e3; color: #4a536e; } .content > p, .content > div { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); margin: 25px 0; padding: 25px; background-color: #fff; } .content > p table td, .content > div table td { padding: 5px; } .content > p table td:first-child, .content > div table td:first-child { font-weight: bold; color: #4a536e; padding-right: 15px; } .content > div p { padding: 5px; margin: 0 0 10px 0; } .text-right { text-align:right; } .text-left { text-align:left; } .text-center { text-align:center; } .font-125 { font-size:125%; } .font-150 { font-size:150%; } .font-bold { font-weight:bold; } .font-normal { font-weight:normal; } .margin-auto { margin: auto; } .text-underline { text-decoration:underline; } .update_status_row { width:95%; padding: 4px 8px; margin: 5px auto; Font-size: 150%; font-weight:bold; background-color:white; text-align:center; border-radius:12px; } .update_status_row_success { color:green; } .update_status_row_fail { color:red; } .pwd_update { Font-size: 150%; font-weight:bold; } .pwd_update_success { color:green; } .pwd_update_fail { color:red; } /* Lunch specific classes */ DIV.center_container { position:relative; background-color:white; width: 80%; min-height: 600px; margin: 50px auto; padding: 12px 0; border-radius: 12px; } DIV.center_message_container { position:relative; background-color:white; width: 80%; margin: 50px auto; padding: 12px 0; text-align:center; } DIV.thumb_outer_container { display: inline-block; width: 33%; vertical-align:top; } DIV.thumb_container { margin: 10px auto; width: 150px; height: 220px; border: solid 3px; border-radius: 14px; } DIV.thumb_icon_container { margin: 8px auto; height: 115px; width: 150px; text-align:center; } img.thumb_icon_container { width: 110px; height: 110px; } DIV.thumb_name_container { cursor:default; width: 150px; height: 20px; padding: 5px 0; font-weight:bold; text-align:center; font-size: 125%; } DIV.message_container { width:92%; margin: 12px auto; padding: 8px 1%; font-weight:bold; } DIV.email_header_container { width:96%; margin: 12px auto; padding: 4px; text-align:center; } DIV.project_select_button { border: solid 1px; border-radius: 24px; padding: 6px 10px; width: calc(100% - 20px); margin:auto; } SPAN.bluebox { padding: 6px 8px; background-color:#e6ffff; color:#3399ff; font-weight:bold; } .color-red { color:red; } .color-green { color:green; } img.iconM { width:42px; height:42px; } DIV.list_container { width:95%; margin: 24px auto; border: solid 1px; border-radius: 16px; min-height: 400px; overflow-y:scroll; } DIV.list_row_container { padding: 18px 6px; width:calc(100%); border-bottom:solid 1px; } DIV.inline-block { display: inline-block; } DIV.float-right { float:right; } DIV.button_column { width:96%; margin: 16px auto; text-align:center; } DIV.calendar-control { display:inline; width:90%; margin:auto; padding-bottom: 16px; border-bottom: solid 1px; } DIV.week_heading { float:left; width: 70%; text-align:center; padding: 16px 0; font-size:300%; } DIV.week_change { width:15%; padding: 16px 0; font-weight:bold; font-size:300%; text-align:center; } DIV.prevWeek { float:left; } DIV.nextWeek { float:right; } table.calendar_table { border:solid 1px; margin:auto; } table.calendar_table td { padding: 24px 12px; width:calc(100% / 7); border:solid 1px; height:40px; } table.calendar_table td .td_status_container { width:100%; min-height:40px; margin-top:15px; text-align:center; } table.calendar_table td .td_date_conatiner { width:100%; text-align:left; font-weight:normal; } td.date_not_serving { color:red; font-weight:bold; } DIV.new_order_date_heading { width:100%; text-align:center; font-size:150%; } DIV.row { width:100%; text-align:center; } DIV.half-column { width:50%; } DIV.td_statistic_container { width:100%; min-height:40px; text-align:center; font-weight:normal; font-size:75%; } DIV.calendar-smormagasinet { display:block; width:100%; text-align:center; } DIV.create_menu_heading { width:90%; margin: 25px auto; text-align:center; display:block; font-size:150%; background-color:white; padding: 10px 0; } DIV.create_menu_choise_row { margin: 8px auto; display:block; padding: 4px 0; } DIV.menu_choises_container { width:100%; margin: 4px 0; } DIV.order_summary_controll_div { width:100%; padding: 8px 0px; } DIV.box-list { width:80%; margin:auto; min-height:600px; border:solid 1px; } DIV.box-list-row { width: 100%; padding-left:4px; border-bottom:solid 1px; } DIV.box-list-heading { width: 100%; padding-left:4px; border-bottom:solid 1px; background-color: #B5FAFC; } DIV.box-list-row-summary-line-heading { width:100%; } DIV.box-list-row-summary-line { width:100%; margin: 2px 0px; } DIV.summary_shift_box { width:96%; margin: 2px auto; border:solid 1px; text-align:left; } DIV.summary_shift_heading { width:100%; text-align:center; padding: 2px 0px; background-color: #B5FAFC; } DIV.summary_shift_dish { display:inline-block; width:80%; padding: 2px 0px 2px 1%; } DIV.summary_shift_dish_department { display:inline-block; width:75%; padding: 2px 0px 2px 5%; } DIV.summary_shift_dish_total { display:inline-block; width:18%; padding: 2px 0px 2px 0px; text-align:center; } DIV.summary_day_worker_name { display:inline-block; width:60%; padding: 2px 0px 2px 0px; text-align:center; } DIV.summary_day_worker_dish_order { display:inline-block; width:36%; padding: 2px 0px 2px 0px; text-align:center; } /* Menu builder tool page css */ DIV.week_menu_menu_item { margin: 8px auto; padding: 6px 4px; width:95%; border:solid 1px; border-radius:12px; min-height:250px; } DIV.week_menu_menu_item_heading { width:calc(100% - 10px); padding-left:10px; padding-right:10px; font-weight:bold; margin-bottom:2px; } DIV.week_menu_menu_item_content { width:calc(100% - 10px); padding-left:10px; padding-right:10px; } DIV.plus_add_button { border:solid 2px; border-radius: 50%; padding: 4px; } DIV.date_data_notes_box { max-width: 60%; margin:auto; padding: 4px 6px; border:solid 3px #ffecb3; border-radius: 8px; } DIV.date_data_notes_box_heading { position:absolute; margin-top: -22px; margin-left: 20px; } .bgc-light-gray { background-color:lightgray; } .bgc-lightgreen { background-color:lightgreen; } .bgc-light-yellow { background-color:#FFFF99; } .bgc-yellow { background-color:yellow; } .bgc-white { background-color:white; } .bgc-green { background-color:green; } .current_week_marker { border:solid 2px red; border-radius:50%; padding-right:4px; } .dotted-bottom-border { border-bottom:dotted 1px; } .create_menu_back_button { padding:0px 5px 3px 5px; border:solid 1px gray; color:gray; border-radius:50%; margin-right:15px; } .make_sticky { position: -webkit-sticky; position: sticky; top:0; } .outline-border-green { outline:solid 5px green; } .font-bold { font-weight:bold; } .font-size-75 { font-size:75%; } .font-size-85 { font-size:85%; } .font-size-125 { font-size:125%; } .font-size-150 { font-size:150%; } .border-circle { border:solid 1px; border-radius:50%; padding-right:4px; } .hover-highlight:hover { background-color:#F9F9F9; } .hover-highlight-blue:hover { background-color:#b1e7fc; } .hover-border-highlight:hover { border:solid 3px #FFB3B3; } .list_container { width:95%; margin:auto; border:solid 1px; border-radius: 16px; } .list_item_row { width:100; padding: 2px 1%; text-align:left; border-bottom:solid 1px; } .hidden { display:none; } .order_history_list_order_id { width:5%; vertical-align:top; } .order_history_list_order_choise { width:40%; vertical-align:top; } .order_history_list_order_date { width:25%; } .order_history_list_order_options { width:30%; text-align:center; vertical-align:middle; } /* Theme */ .theme_heading_colors { background-color:#2f3947; font-weight:bold; color:white; } .theme_heading_spacing { padding-top: 6px; padding-bottom: 6px; margin-bottom: 8px; } .theme_border { border-color:#2f3947; border-radius:16px; } .theme_heading_container_radius { border-radius: 16px 16px 0px 0px; } @media only screen and (max-width: 1024px) { .navbar-logo { width:182px; height:35px; } .order_history_list_order_id { width:8%; } .order_history_list_order_choise { width:50%; } .order_history_list_order_date { width:25%; } .order_history_list_order_options { width:17%; } DIV.center_container { $width: 94%; } DIV.thumb_outer_container { width: 50%; } table.calendar_table { } table.calendar_table td { display:block; width:100%; height:auto; min-height:120px; } DIV.date_data_notes_box { max-width: 90%; margin-left:8%; } .mobile-zoom-100 { zoom:100%; } .mobile-zoom-150 { zoom:150%; } .mobile-zoom-200 { zoom:200%; } a.mobile-hide { display:none; } }