/*
GRØNN:  #72b220  rgba(125,202,48,1)
BLÅ:    #247cce  rgba(36,124,206,1)
ORANGE: #f47a20  rgba(244,112,32,1)
*/

@import url(reset.css);
@import url(//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic);

body,html {
	height:100%;
	font-family:'Lato', 'sans-serif';
	font-size:15px;
	color:#333;
	padding:0;
	margin:0;
}
a, a:visited, a:focus {
	color:#247cce;
	text-decoration:none;
	cursor:pointer;
}
a:hover {color:#000; text-decoration:none;}

a.action {
	display:block;
	width:100%;
	color:#fff;
	text-align:center;
	background-color:rgba(114,178,32,1);
	text-decoration:none;
	border-radius:5px;
	line-height:62px;
	margin-bottom:20px;
}
a.action:hover {background-color:rgba(114,178,32,0.7);}
a.action.cancel {background-color:rgba(190,40,40,1);}
a.action.cancel:hover {background-color:rgba(190,40,40,0.7);}

h3 {font-size:21px;}
h3.login {margin-top:30px;}

h4 {margin-bottom:0.5em; font-weight:bold;}

img {max-width:100%; max-height:100%;}

p {margin-bottom:30px;}
.inner > h1 {
	font-size:23px;
	color:rgba(36,124,206,1);
	font-weight:normal;
	margin-bottom:30px;
}
h3 {margin-bottom:20px;}
.wrapper {
	width:100%;
	padding-bottom:120px;
}
.inner {
	height:100%;
	max-width:767px;
	margin:0 auto;
	background-color:#fff;
	padding:20px;
}

.top {margin-bottom:20px;}

.main-nav a {
	display:block;
	width:120px;
	height:120px;
	line-height:37px;
	text-align:center;
	color:#247cce;
	background-color:rgba(36,124,206,0.08);
	border:1px solid #247cce;
	border-radius:50%;
	margin:15px auto;
	transition:all 0.3s;
}
.main-nav a:before {
	font-family:FontAwesome;
	display:block;
	font-size:42px;
	padding-top:29px;
}
.main-nav a:hover {
	color:#fff;
	background-color:rgba(36,124,206,0.8);
}
.main-nav a:hover:before {color:#fff;}

.main-nav a.menus:before {content:'\f0f5';}
.main-nav a.calendar:before {content:'\f073';}
.main-nav a.user:before {content:'\f2be';}
.main-nav a.history:before {content:'\f1da';}
.main-nav a.skm:before {content:'\f08a';}
.main-nav a.faq:before {content:'\f29c';}

.nav-user a {
	display:block;
	width:100%;
	font-size:17px;
	color:#247cce;
	background-color:rgba(36,124,206,0.08);
	text-transform:uppercase;
	border:1px solid #247cce;
	border-radius:5px;
	padding:20px;
	transition:all 0.3s;
	margin-bottom:10px;
}
.nav-user a.active {
	color:rgba(244,122,32,1);
	background-color:rgba(244,122,32,0.15);
	border:1px solid #F47A20;
}
.nav-user a.active:hover {
	background-color:rgba(244,122,32,0.25);
}
.nav-user a.logout {
	color:#F47A20;
	background-color:rgba(244,122,32,0.08);
	border:1px solid #F47A20;
}
.nav-user a.logout:hover {background-color:rgba(244,122,32,0.15);}

.nav-user a:hover {
	background-color:rgba(36,124,206,0.15);
}
.nav-user a:before {
	font-family:FontAwesome;
	content:'\f105';
	font-size:23px;
	margin-right:15px;
}

.online {
	position:relative;
	height:36px;
	line-height:36px;
	color:#fff;
	background-color:#247cce;
}
.online .left {position:absolute; top:0; left:10px;}
.online .right {position:absolute; top:0; right:10px;}
.online .right a {color:#fff; font-size:23px;}

/*******************************
            CONTENT
*******************************/

table {width:100%; border-spacing:0; border:0;}
table th {white-space:nowrap;}

table th,
table td {border-spacing:0; border:0; vertical-align:top; padding:4px 4px 4px 0;}

table.border th,
table.border td {border-bottom:1px solid #e0e0e0;}

ul.menulist {margin-bottom:20px;}
.menucircle,
ul.menulist a.selmenu {
	display:inline-block;
	height:80px;
	width:80px;
	border-radius:50%;
	line-height:80px;
	font-size:31px;
	text-align:center;
	border:1px solid rgba(36,124,206,1);
	margin-bottom:10px;
}
ul.menulist a.selmenu:hover {
	color:#72b220;	
	background-color:rgba(36,124,206,0.15);
}
.menucircle.active,
ul.menulist a.active {
	color:#fff;
	background:rgba(36,124,206,1);
}

ul.menulist span a {
	line-height:80px;
	padding-left:20px;
	font-size:17px;
}
ul.weekdays {
	border-top:1px solid #e0e0e0;
}
ul.weekdays.second {
	border-top:1px solid #e0e0e0;
	border-bottom:1px solid #e0e0e0;
}
ul.weekdays li {
	float:left;
	width:20%;
	text-align:center;
	padding:10px 0;
}
ul.weekdays li label {
	font-size:15px;
	margin:0;
	color:#333;
	cursor:pointer;
}

.menu-selection {margin-bottom:30px;}

a.menu-sel-top {display:block; width:100%; border:1px solid #247cce; border-radius:10px; padding:10px; margin-bottom:2%;}
a.menu-sel-top div {font-size:17px; display:inline-block; width:32px; line-height:32px; text-align:center; color:#fff; background-color:#247cce; border-radius:50%; margin-right:10px;}
a.menu-sel-top span {font-size:13px; font-weight:600; text-transform:uppercase; color:#555; line-heigth:auto;}
a.menu-sel-top.active,
a.menu-sel-top:hover {background-color:rgba(36,124,206,0.1);}

.showmenu li {margin-bottom:10px; background-color:rgba(125,202,48,0.1); border:1px solid #72b220; border-radius:5px;}
.showmenu li.closed {background-color:#f0f0f0; border:1px solid #ccc;}
.showmenu li.heading {background:none; text-align:center; font-weight:600; color:#F47A20; font-size:19px; margin-top:20px; margin-bottom:10px; border:none;}
.showmenu a {display:block; padding:10px;}
.showmenu p {color:#444; margin:0; padding-bottom:5px;}
.showmenu p.date {text-transform:capitalize; font-weight:600; padding:5px 0;}
.showmenu p.right {color:#777; font-size:13px;}

.course-spec h4 {font-size:17px; margin-bottom:15px; border-bottom:1px solid #e5e5e5; padding-bottom:5px; margin-bottom:15px;}
.course-spec h4 span {color:#247cce;}
.course-spec img {margin-bottom:15px;}
.menucircle span {padding-left:20px;}

ul.history li {border-bottom:1px solid #e0e0e0; border:1px solid #72b220; padding:7px; margin-bottom:7px; border-radius:5px;}
ul.history li p {margin:0;}
ul.history li p.date {border-bottom:1px solid rgba(125,202,48,0.3); padding-bottom:5px; margin-bottom:5px;}
ul.history li.future {background-color:rgba(125,202,48,0.15);}

/*******************************
          CALENDAR MONTH
*******************************/

.calendar .heading {
	position:relative;
	text-align:center;
	font-size:21px;
	text-transform:uppercase;
	border-top:1px solid #e0e0e0;
	padding:5px 0;
}
.calendar .heading span {display:block; padding:3px 0; font-size:13px;}
.calendar .heading .pastmonth a:before,
.calendar .heading .nextmonth a:after {
	font-family:'fontawesome';
	padding:0;
}
.calendar .heading .pastmonth a:before {content:'\f104';}
.calendar .heading .nextmonth a:after {content:'\f105';}
.calendar .heading a {
	position:absolute; top:50%; margin-top:-15px;
	display:block;
	height:30px;
	line-height:26px;
	width:30px;
	text-align:center;
	border:1px solid rgba(114,178,32,1);
	border-radius:50%;
	padding:0;
}
.calendar .heading a:hover {color:#fff; background-color:rgba(114,178,32,1);}
.calendar .pastmonth a {left:0;}
.calendar .nextmonth a {right:0;}

.calendar table th {
	text-transform:uppercase;
	width:12.28%;
	font-weight:normal;
	text-align:center;
	line-height:32px;
	font-size:17px;
	border-top:1px solid #e0e0e0;
	border-bottom:1px solid #e0e0e0;
}
.calendar table th.week {width:7%;}
.calendar table td {text-align:center; padding:10px 5px; border-bottom:1px solid #e0e0e0; line-height:42px;}

.calendar td a {display:block;}
.calendar .weeknum {border:0;}
.calendar a.today {
	-webkit-box-shadow: 0px 0px 1px 0px #aa0000;
	   -moz-box-shadow: 0px 0px 1px 0px #aa0000;
	        box-shadow: 0px 0px 0px 3px #ff5555;
}
.calendar td a,
.cal-expl .normal
.cal-expl .disabled,
.cal-expl .cancelled,
.cal-expl .delivery {display:block; font-size:15px; line-height:42px; border-radius:5px; position:relative;}

.cal-expl a.normal,
.calendar a.normal {line-height:40px; border:1px solid rgba(36,124,206,0.2);}
.calendar a.normal:hover {background-color:rgba(36,124,206,0.2);}

.cal-expl .delivery,
.calendar a.delivery {color:#fff; background-color:rgba(114,178,32,1);}
.calendar a.delivery:hover {background-color:rgba(114,178,32,0.7);}

.cal-expl .cancelled,
.calendar a.cancelled {color:#fff; background-color:rgba(190,40,40,1);}
.calendar a.cancelled:hover {background-color:rgba(190,40,40,0.7);}

.cal-expl  i.icon-menu,
.calendar i.icon-menu {position:absolute; top:0; left:5px; text-align:center; font-size:13px; font-style:normal; line-height:19px;}

a.icon:after {position:absolute; top:-12px; right:5px;}
a.delivery.icon:after {content:'+'; font-size:19px;}

.cal-expl a.disabled,
.calendar a.disabled {color:#999; background-color:#e0e0e0; cursor:not-allowed;}
a.disabled.no-delivery {background-color:#999;}

.cal-expl td:first-child {width:1%; text-align:center; padding-right:10px;}
.cal-expl td {padding:5px;}
.cal-expl .disabled,
.cal-expl .delivery,
.cal-expl .cancelled {display:inline-block;width:60px; height:42px;}

/*******************************
          CALENDAR WEEK
*******************************/

.daywrapper {position:relative; border-radius:5px; border:1px solid; padding:10px; margin-bottom:10px;}
.daywrapper.delivery {background-color:#fff; border-color:rgba(114,178,32,1);}
.daywrapper.cancelled {background-color:rgba(190,40,40,0.1); border-color:rgba(190,40,40,0.7);}
.daywrapper.disabled {background-color:#fafafa; border-color:#ccc;}

.daywrapper a.button {background:#72b220; color:#fff; padding:3px 6px; border-radius:3px;}

.dayhead {text-transform:uppercase; border-bottom:1px solid #e0e0e0; padding-bottom:5px;}

.delivery .dayhead {border-color:rgba(114,178,32,0.3);}
.cancelled .dayhead {border-color:rgba(190,40,40,0.2);}
.disabled .dayhead {border-color:#ccc;}

.dayhead .date {float:left; width:50%;}
.dayhead .status {float:left; width:50%; font-weight:700; text-align:right;}

.dayhead .status.delivery {color:#72B220;}
.dayhead .status.cancelled {color:#CE6060;}
.dayhead .status.disabled {color:#777;}

.daybody {position:relative; height:auto; padding:10px 0;}

.daybody .menunum a {float:left; width:42px; color:#fff; line-height:40px; font-size:19px; background-color: rgba(114,178,32,1); border-radius:50%; text-align:center;}
.daybody .menucontent {float:left; width:85%; margin-left:15px;}
.daybody .menucontent .menuname {font-weight:700; font-size:17px;}
.daybody .menucontent span {display:block; color:#777;}

.daywrapper .allergens {display:block;}
.allergy-warning {padding:10px; background-color:#ff5555; color:#fff; margin-top:10px;}

.daybody .action a {height:40px; line-height:40px; text-transform:uppercase; background-color:#ccc;}
.daybody .action a:after {
	position:absolute; right:0; top:0;
	font-family:FontAwesome;
	display:block;
	content:'\f105';
	font-size:42px;
}
span.no-service {color:#777; line-height:36px;}

@media (max-width: 480px) {
	.daybody .menunum a {float:none; display:block; margin-bottom:5px;}
	.daybody .menucontent {float:none; display:block; width:100%; margin-left:0;}
}

/*******************************************
			REORDER
*******************************************/

.daycourses .wrap {border:1px solid #ddd; border-radius:10px; padding:15px 15px 0 15px; margin-bottom:30px;
	-webkit-box-shadow:0 1px 5px 0 rgba(0,0,0,0.3);
	   -moz-box-shadow:0 1px 5px 0 rgba(0,0,0,0.3);
	        box-shadow:0 1px 8px 0 rgba(0,0,0,0.1);
}
.daycourses .wrap.static {border:1px solid #72b220;}
.daycourses .contents {margin-bottom:10px; font-style:italic;}
.daycourses .contents span {font-style:normal;}

.daycourses .head {height:49px; position:relative; border-bottom:1px solid #ddd; margin-bottom:15px;}
.daycourses h4 {line-height:21px; padding:5px 0 0 53px;}
.daycourses h4 a {position:absolute; top:0; left:0; width:39px; text-align:center; font-size:21px; line-height:39px; color:#fff; background-color:#72b220; border-radius:50%;}
.daycourses .wrap.static .head {border-bottom:1px solid #72b220;}
.daycourses p.coursename {font-weight:bold; border-bottom:1px solid #ddd; margin-bottom:12px;}
.daycourses p.coursename,
.daycourses p.ingredients {
	line-height:21px;
	height:52px;
}
.daycourses p.allergens {
	line-height:21px;
	font-size:14px;
	background-color:#f0f0f0;
	padding:5px;
}
.daycourses .image {
	height:280px;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	overflow:hidden;
}

.daycourses .image,
.daycourses p {margin-bottom:10px;}
.daycourses .in-box {margin-bottom:15px;}

.daycourses .allergy-warning {padding:10px; background-color:#ff5555; color:#fff;}

.daycourses .wrap.static {height:auto;} 
.daycourses .static p.ingredients,
.daycourses p.allergens {height:auto;}

/*@media (min-width: 768px) {
	.daycourses .image {
		height:420px;
	}
}
@media (max-width: 767px) {
	.daycourses .image {
		height:420px;
	}
}
@media (max-width: 519px) {
	.daycourses .image {
		height:260px;
	}
}
*/
.dayselect {margin-bottom:30px;}
.dayselect .left {float:left; margin-right:1%;}
.dayselect .right {float:left; margin-left:1%;}
.dayselect .left,
.dayselect .right {width:49%;}
.dayselect a {
	display:block;
	text-transform:uppercase;
	font-size:13px;
	line-height:42px;
	color:#444;
	text-align:center;
	background-color:#f0f0f0;
	border:1px solid #e0e0e0;
	border-radius:5px;
	margin:0;
}
.dayselect a.disabled,
.dayselect a.disabled:hover {
	background:none;
	border:none;
	border-radius:0;
}
.dayselect a:hover {background-color:#e5e5e5;}
.dayselect a.pastday:before {
	font-family:'fontawesome';
	content:'\f104';
	font-size:19px;
	margin-right:10px;
}
.dayselect a.nextday:after {
	font-family:'fontawesome';
	content:'\f105';
	font-size:19px;
	margin-left:10px;
}

/*******************************
            BOTTOM
*******************************/

.bottom-select {
	width:100%;
	position:fixed;
	left:0;
	bottom:0;
	background-color:#247cce;
}
.bottom-select li {
	float:left;
	width:33.333333%;
	text-align:center;
}
.bottom-select a {
	display:block;
	color:#fff;
	line-height:31px;
	transition:all 0.5s;
}
.bottom-select a:before {
	font-family:FontAwesome;
	display:block;
	font-size:29px;
	padding-top:15px;
}
.bottom-select a.menu:before {content:'\f0f5';}
.bottom-select a.calendar:before {content:'\f073';}
.bottom-select a.user:before {content:'\f2be';}
.bottom-select a.home:before {content:'\f015';}

.bottom-select a:hover {
	background-color:rgba(0,0,0,0.2);
}

/*******************************
            FORMS
*******************************/

form.login {margin-top:30px;}
.inp-group {margin-bottom:15px;}

label {
	display:block;
	width:100%;
	color:#666;
	font-size:13px;
	font-weight:normal;
	text-transform:uppercase;
	margin-bottom:3px;
}
select,
input[type=text],
input[type=email],
input[type=password] {
	height:52px;
	line-height:52px;
	width:100%;
	border:1px solid #72b220;
	padding:0 10px;
	margin-bottom:20px;
}
input[type=password] {
	border:1px solid #F47A20;
}
input[type=submit] {
	height:52px;
	line-height:52px;
	width:100%;
	border:none;
	text-transform:uppercase;
	color:#fff;
	background-color:#72b220;
}
input[type=submit].in-box {
	width:100%;
	background:rgba(114,178,32,1);
	border-radius:5px;
}
input[type=submit].in-box:hover {
	background:rgba(114,178,32,0.8);
}

input[type=submit].cancel {
	width:100%;
	height:62px;
	line-height:62px;
	border-radius:5px;
	background-color:rgba(190,40,40,1);
}
input[type=submit].cancel:hover {background-color:rgba(190,40,40,0.7);}

input[type=submit].full {width:100%;}
input[type=submit]:hover {background-color:#558518;}

.log-group {position:relative; height:60px; max-width:100%; display:block; background-color:#ccc; margin-bottom:20px;}
.log-group i,
.log-group input {position:absolute; top:0; left:0; height:60px; line-height:60px; font-size:19px;}
.log-group i {font-size:24px; color:#aaa; padding:0 15px; z-index:101;}
.log-group input {padding-left:46px; z-index:100;}

.check label {display:inline-block;width:auto; padding-left:10px; cursor:pointer;}

/*******************************
            MESSAGES
*******************************/

.msg {
	position:relative;
	border-radius:5px;
	padding:20px;
	margin-bottom:30px;
}
.msg.info {
	background-color:rgba(27,121,152,0.1);
	border:1px solid rgba(27,121,152,0.4);
	color:rgba(27,121,152,1);
}
.msg.success {
	background-color:rgba(114,178,32,0.1);
	border:1px solid rgba(114,178,32,0.4);
	color:           rgba(114,178,32,1);
}
.msg.failure {
	background-color:rgba(190,40,40,0.1);
	border:1px solid rgba(190,40,40,0.4);
	color:           rgba(190,40,40,1);
}
.msg.warning {
	background-color:rgba(197,130,0,0.1);
	border:1px solid rgba(197,130,0,0.4);
	color:           rgba(197,130,0,1);
}

/**********************************
            MISC
***********************************/

.block-top {margin-top:30px;}
.block-bottom {margin-bottom:30px;}
.soft {color:#999;}
.center {text-align:center;}
.right {text-align:right;}
.nowrap {white-space:nowrap;}
.cap {text-transform:capitalize;}