body { margin: 0; padding: 0; font-family: Roboto, Helvetica, Sans-Serif; background: #e9e9e9; }

h1 { font: 700 35px/35px 'PT Sans'; color: rgba(0,0,0,0.75); margin: 0 0 20px 0; padding: 0; letter-spacing: -1px; }
h1 span { font-weight: 400; }

h2 { font: 700 16px/16px Roboto; color: #333333; padding: 0 0 5px 0; display: inline-block; margin: 0 0 15px 0; }
h2 img { width: 32px; height: 32px; float: left; margin-right: 5px; position: relative; top: -8px; }
h2.Collapse, h2.Shrink { padding: 0 0 2px 24px; margin: 0; background: url(//code.scurto.net/images/icons/reflection/black/24/collapse-arrow-alt.png) no-repeat; background-position-x: -4px; background-position-y: -2px; cursor: pointer; }
h2.Shrink { background: url(//code.scurto.net/images/icons/reflection/black/24/collapse-alt.png) no-repeat; background-position-x: -4px; background-position-y: -2px; }

h4 { font: 700 15px/15px Roboto; color: #555555; margin: 0 0 5px 0; padding: 0; }
h5 { font: 400 15px/15px Roboto; color: #555555; margin: 0; padding: 0; }
h6 { font: 400 13px/13px 'PT Sans'; color: #898989; margin: 0; padding: 0; }

p { font: 300 15px/20px Roboto; color: #333333; margin-bottom: 20px; }
ul { font: 300 15px/24px Roboto; color: #333333; margin: 0 0 20px 10px; padding: 0 0 0 10px; }
ul.TwoCol li { float: left; width: 50%; }

a { color: #00a261; }
a:hover { opacity: 0.9; }
hr { height: 2px; background: #d9d9d9; border: none; display: block; clear: both; margin: 20px 0 20px 0; }
hr.LessMarg { margin: 10px 0 10px 0; }

p.Sm, ul.Sm, .Sm p, .Sm ul { font-size: 13px; line-height: 18px; margin-bottom: 15px; }
p.Lined { margin: 5px 0 5px 0; border-bottom: 1px dotted #d9d9d9; }

.Sm h1 { font-size: 30px; line-height: 30px; }
.Sm h2 { font-size: 16px; line-height: 16px; }
.Sm h4 { font-size: 13px; line-height: 13px; }

canvas { cursor: pointer; }

input, textarea { transition: ease-in-out 0.2s; }
input[type='submit'] { transition: none; }

div { box-sizing: border-box; }

iframe { border: none; padding: 0; margin: 0; }

.ds { box-shadow: 0 0 4px rgba(0,0,0,0.5); }

@media only screen and (max-width: 620px) {

	h1 { font: 700 30px/30px 'PT Sans'; margin: 0 0 20px 0; background-size: 36px 36px; background-position-x: 8px; }

}

.tagsinput,
select, 
input[type='text'], 
input[type='date'], 
input[type='time'], 
input[type='number'], 
input[type='file'], 
input[type='password'], 
input[type='email'], 
input[type='url'] { 
	height: 40px; 
}

.tagsinput,
select,
input[type='text'],
input[type='date'],
input[type='time'], 
input[type='number'],
input[type='file'],
input[type='password'],
input[type='email'],
input[type='url'],
textarea,
.TextArea { 
	font: 400 14px/14px Roboto;
	color: rgba(0,0,0,0.5); 
	margin: 0; 
	background: rgba(0,0,0,0.05); 
	padding: 8px; 
	border: none; 
	border-radius: 5px; 
	box-sizing: border-box; 
	display: inline-block; 
	min-width: 150px; 
	max-width: 100%; 
	vertical-align: middle; 
	position: relative; 
}

.tagsinput:focus,
select:focus, 
input[type='text']:focus, 
input[type='date']:focus, 
input[type='time']:focus, 
input[type='number']:focus, 
input[type='file']:focus, 
input[type='password']:focus, 
input[type='email']:focus, 
input[type='url']:focus,
textarea:focus, 
.TextArea:focus { 
	background: rgba(0, 162, 97, 0.1);
	color: #00a261; 
	font-weight: bold;

}

select:disabled,
input[type='text']:disabled,
input[type='date']:disabled,
input[type='time']:disabled,
input[type='number']:disabled,
input[type='file']:disabled,
input[type='password']:disabled,
input[type='email']:disabled,
input[type='url']:disabled,
textarea:disabled { 
	opacity: 0.5; box-shadow: none;
}

input[type='checkbox'] { 
	padding: 0;
	margin: 0;
	cursor: pointer; 
	background: rgba(0,0,0,0.05); 
	-ms-transform: scale(1.1); 
	-moz-transform: scale(1.1); 
	-webkit-transform: scale(1.1); 
	-o-transform: scale(1.1); 
}

select { 
	padding: 0 28px 0 8px;
	margin: 0;
	cursor: pointer; 
}

select::-ms-expand { display: none; }
label { margin-left: 5px; }

input[type='submit'], 
input[type='button'], 
.Button { 
	text-decoration: none; 
	padding: 10px 15px; 
	border: none; 
	font-size: 12px; 
	text-transform: uppercase; 
	font-weight: 700; 
	color: rgba(0,0,0,0.4); 
	border-radius: 5px; 
	background: rgba(0,0,0,0.05); 
	vertical-align: middle; 
	transition: 0.1s ease-in-out;
}

input[type='submit']:hover, input[type='button']:hover, .Button:hover { opacity: 0.8; text-decoration: none; }

.ButtonIcon { display: inline-block; width: 45px; height: 45px; padding: 10px; font-size: 20px; border-radius: 5px; text-align: center; border: 1px solid rgba(0,0,0,0.15); box-sizing: border-box; }
.ButtonIcon:hover { border: 1px solid rgba(0,0,0,0.35); }
.ButtonIcon span { display: inline-block; text-align: center; }
.ButtonIcon.ButtonSmall { width: 35px; height: 35px; padding: 8px; font-size: 14px; background: transparent; }
.ButtonIcon.ButtonTiny { width: 30px; height: 30px; padding: 7px; font-size: 14px; background: transparent; }
.ButtonIcon.ButtonNoBorder { border: none; background: none; padding: 12px; border-radius: 0; width: auto; height: auto; }

.ButtonGray { color: white !important; background: linear-gradient(#cccccc, #bbbbbb) !important; }
.ButtonGreen { color: white !important; background: linear-gradient(#00b271, #00a261) !important; }
.ButtonRed { color: white !important; background: linear-gradient(#c33028, #b32018) !important; }
.ButtonBlue { color: white !important; background: linear-gradient(#0077b2, #0067a2) !important; }

.ButtonGreenHoverAccent:hover { color: #00a261 !important; border-color: #00a261 !important; }
.ButtonRedHoverAccent:hover { color: #b32018 !important; border-color: #b32018 !important; }
.ButtonBlueHoverAccent:hover { color: #0067a2 !important; border-color: #0067a2 !important; }

.MultiBtnMenu { display: none; position: absolute; min-width: 130px; top: 40px; right: 0; z-index: 3; background-color: #00a261; padding: 5px 10px 5px 10px; border-radius: 5px; }
.MultiBtnMenu a { font-size: 15px; line-height: 15px; color: white; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.15); display: block; text-decoration: none; }
.MultiBtnMenu a:last-child { border: none; }

.SectionButtons { position: absolute; top: 32px; right: 2%; }
.SectionButtons .Button { margin-left: 5px; }

a.SocialBtn { display: inline-block; margin: 11px 20px 0 0; font-size: 12px; font-weight: 700; color: #195a8c; text-decoration: none; }
a.SocialBtn img { width: 20px; height: 20px; margin: -3px 5px 0 0; }

.LoginLogo { margin: 50px auto 25px auto; text-align: center; }
.LoginLogo img { max-height: 35px; max-width: 265px; }

.Login { width: 300px; margin: 0 auto 0 auto; font-size: 13px; background: #ffffff; white-space: nowrap; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
.Login h1 { font-size: 18px; color: White; font-weight: 700; border: none; margin: 0; background: #666666; padding: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; display: block; }
.Login .Fields { padding: 20px; }
.Login .Fields input[type='text'], .Login .Fields input[type='password'], .Login .Fields input[type='email'], .Login .Fields input[type='number'] { width: 100%; margin-bottom: 10px; display: block; }
.Login .Fields input[type='checkbox'] { margin-top: 10px; }
.Login .Fields input[type='submit'] { float: right; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
.Login .Fields input[type='submit'].ButtonLoading { filter: grayscale(100%); color: transparent; background-image: url('/images/oliveloading.gif'); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }

.Login .AlertBox { top: 0; }

p.LoginHelp { font-size: 13px; line-height: 15px; margin: 20px auto; position: relative; text-align: center; width: auto; }

.SiteFrame { width: 100%; margin: 0 auto 0 auto; position: relative; }
.ContentFrame { width: calc(100% - 195px); margin: 50px 0 0 195px; position: relative; padding: 2%; }

.ErrorPage {
	margin: 0 33.33%;
	text-align: center;
}

@media only screen and (max-width: 620px) {

	.SiteFrame { width: 100%; }
	.ContentFrame { width: 100%; margin: 0; padding: 20px 0; }

	.Btns a.NewMulti { background-position-y: 9px; background-position-x: 4px; }

	.MultiBtnMenu { top: 45px; right: 22px; }
	.MultiBtnMenu a { text-align: right; font-size: 15px; line-height: 15px; color: white; padding: 10px 0 10px 0; border-bottom: 1px dotted white; display: block; text-decoration: none; }
	.MultiBtnMenu a:last-child { border: none; }

}

.Top { width: 100%; height: 50px; background: #000000; position: fixed; top: 0; left: 0; font-size: 13px; font-weight: 700; color: #888888; z-index: 99; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.Top a { color: White; text-decoration: none; margin-left: 15px; display: inline-block; }
.Top a:hover { text-decoration: underline; }
.Top a.Home { width: 16px; height: 16px; margin-left: 0; background: url(//code.scurto.net/images/icons/iconsweets/32/light/misc/32-home.png) no-repeat; background-size: 16px 16px; background-position-y: 0; }
.Top a.Profile { padding-left: 18px; background: url(//code.scurto.net/images/icons/iconsweets/32/light/users/32-user.png) no-repeat; background-size: 14px 14px; }
.Top a.Settings { padding-left: 18px; background: url(//code.scurto.net/images/icons/iconsweets/32/light/settings/32-cog.png) no-repeat; background-size: 16px 16px; }
.Top .Crumbs { position: absolute; top: 17px; left: calc(65px + 2.5%); }
.Top .Crumbs a { margin-left: 10px; font: 400 13px/13px quicksand; text-transform: uppercase; color: #898989; }
.Top .Crumbs a:hover { color: white; }
.Top .Crumbs span { display: inline-block; margin-left: 10px; font-family: quicksand; }
.Top .Crumbs a:first-child, .Top .Crumbs span:first-child { margin-left: 0; }
.Top .TopRightLinks { position: absolute; right: 220px; top: 17px; text-align: right; margin-right: 40px; }
.Top .Search { position: absolute; top: 12px; right: 20px; }
.Top .Search input[type='text'] { width: 200px; padding: 5px; background: #696969; height: 26px; border: none; border-radius: 5px; }
.Top .Search input[type='text']:hover { background: #c9c9c9; }
.Top .Search input[type='submit'] { min-width: 18px; width: 18px; height: 18px; margin: 0; padding: 0; border: none; position: absolute; top: 5px; right: 1px; z-index: 2; background: url(//code.scurto.net/images/icons/reflection/black/24/search.png) no-repeat; background-size: 18px 18px; }
.Top .Search div { position: absolute; top: 7px; right: 4px; z-index: 2; }
.Top .MenuIcon { border-top: 2px solid white; margin: 0; border-bottom: 2px solid white; width: 22px; position: absolute; left: 19px; top: 19px; opacity: 0.5; }
.Top .MenuIcon span { width: 22px; height: 2px; display: block; background: white; border-top: 4px solid black; border-bottom: 4px solid black; }

.Bottom { width: 100%; padding: 10px 20px; background: #000000; position: fixed; bottom: 0; left: 0; z-index: 99; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.Bottom a { color: rgba(255,255,255,0.5); text-decoration: none; }
.Bottom a.ToTop { display: inline-block; width: 48px; height: 48px; background: url(//code.scurto.net/images/icons/reflection/black/arrow-up-2.png) no-repeat; }
.Bottom p { font-size: 12px; text-align: right; margin: 0; color: rgba(255,255,255,0.5); }
.Bottom select { float: left; height: auto; padding-top: 5px; padding-bottom: 5px; background: transparent; color: #aaaaaa; }

@media only screen and (max-width: 1024px) {

	.Top .Crumbs { display: none; }

}
@media only screen and (max-width: 620px) {

	.Top { width: 100%; padding: 0 5% 0 5%; position: relative; }
	.Top .Crumbs, .Top .Search { display: none; }
	.Top .TopRightLinks { right: 5%; margin: 0; }
	.Top .TopRightLinks .Themes { display: none; }
	.Top .MobileMenu { display: block; }

	.Bottom { }
}




.Nav { position: fixed; top: 50px; left: 0; z-index: 98; width: 195px; height: 100%; background: #444444; box-shadow: 0 0 8px rgba(0,0,0,0.5); }

.Tabs a, .SubTabs a { color: white; font-size: 16px; opacity: 0.5; width: 100%; height: 40px; padding: 10px 20px; position: relative; background-color: #444444; display: block; border-top: 1px solid #666666; border-bottom: 1px solid#222222; box-sizing: border-box; transition: ease-in-out 0.2s; }
.Tabs a:hover { opacity: 1; background-color: #333333; }
.Tabs a.Active { opacity: 1; }
.Tabs span { display: inline-block; text-align: center; }
.Tabs span span { font: 400 12px/12px quicksand; text-transform: uppercase; position: absolute; left: 50px; top: 50%; transform: translateY(-50%); }

.SubTabs { display: none; }
.SubTabs a { background: #aaaaaa; border-top: 1px solid #bbbbbb; border-bottom: 1px solid #444444; color: black; }
.SubTabs a:hover { background: #aaaaaa; color: white; opacity: 0.5;  }
	.SubTabs a.Active, .SubTabs a.Active:hover {
		background: #e9e9e9 ;
		border: none;
		width: calc(100% + 15px);
		padding-right: 35px;
		opacity: 1;
	}

.TabTooltip { white-space: nowrap; display: none; position: absolute; top: 100px; left: 70px; min-width: 50px; background: #333333; color: #ffffff; padding: 10px; font: 600 15px/15px Roboto; z-index: 999; box-shadow: 0 0 8px rgba(0,0,0,0.25); }
.TabTooltip:before { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 20px solid #333333; }

.ContentBox { width: 100%; position: relative; background: white; padding: 20px; margin: 0 0 20px 0; box-shadow: 0 0 4px rgba(0,0,0,0.15); overflow-x: auto; border-top: 4px solid #888888; }
.ContentBox.Passive { border-color: #888888; }
.ContentBox h1 { padding-right: 25%; }
.ContentBox .ControlButtons { position: absolute; top: 10px; right: 20px; }

.SideBox, .SideBoxDash { width: 100%; position: relative; background: white; padding: 20px; margin: 0 0 20px 0; box-shadow: 0 0 4px rgba(0,0,0,0.15); border-top: 4px solid #888888; }
.SideBoxDash { padding: 0 0 10px 0; }

.SideBox .BtnBox { padding: 20px 20px 0 0; }

.MenuHide, .MenuShow { display: block; font: 700 50px/50px quicksand; text-align: right; letter-spacing: -5px; padding: 10px 20px 10px 20px; color: white; text-decoration: none; text-shadow: 0 0 3px rgba(0,0,0,0.5); }
.MenuShow { display: none; background: #e9e9e9; padding-left: 10px; padding-right: 10px; position: absolute; top: 0; left: -60px; }

@media only screen and (max-width: 1024px) {
	.Nav { position: fixed; top: 50px; left: 0; z-index: 98; width: 65px; height: 100%; background: #444444; box-shadow: 0 0 8px rgba(0,0,0,0.5); }
	.Tabs a, .SubTabs a { text-align: center;	}
	.Tabs span span { display: none; }
	.ContentFrame { width: calc(100% - 65px); margin: 50px 0 0 65px; position: relative; padding: 2%; }
}

@media only screen and (max-width: 620px) {

	.Nav { position: absolute; display: none; width: 100%; }
	.ContentBox, .SideBox, .SideBoxDash { margin: 0; }

}

h2.ListView { width: auto; color: #555555; margin: 0 0 15px 0; }

.DashViewBtns { position: absolute; top: 10px; right: 20px; z-index: 99; }
.DashViewBtns .Button.Active { color: #00a261; border-color: #00a261; }

.DateViewer { position: absolute; top: 35px; right: 2%; margin-top: 10px; font: 700 14px/14px Roboto; text-transform: uppercase; text-align: right; }
.DateViewer a { vertical-align: middle; display: inline-block; color: rgba(0,0,0,0.75); text-decoration: none; padding: 5px; }
.DateViewer span { font: 400 11px/11px Roboto; color: rgba(0,0,0,0.6); text-transform: none; position: relative; }

.DateSelector { display: none; position: absolute; top: 35px; right: 2%; white-space: nowrap; }
.DateSelector input[type='text'], .DateSelector select, .DateSelector .Spacer { background: white; margin: 0; width: 100px; min-width: 100px; text-align: center; box-sizing: border-box; height: 35px; float: left; font-weight: 600; border: none; border-radius: 0; }
.DateSelector input[type='text'].Start { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.DateSelector input[type='text'].End { position: relative; z-index: 1; left: -2px; }
.DateSelector input[type='text']:focus { background: white; box-shadow: none; }
.DateSelector select { min-width: 150px; width: 150px; }
.DateSelector input[type='submit'] { width: auto; height: 35px; background: #0077b2; color: white; border-top-left-radius: 0; border-bottom-left-radius: 0;  }
.DateSelector .Spacer { width: 20px; min-width: 20px; padding: 8px 0 0 0; background: white; position: relative; z-index: 2; left: -1px; }

.Help { position: absolute; top: 25px; right: 2%; z-index: 99; text-align: right; width: auto; max-width: 50%; margin-top: 13px; }
.Help .Icon { display: inline-block; cursor: pointer; height: 32px; padding-top: 5px; font-size: 13px; font-weight: 700; color: #000000; text-indent: 32px; background: url(//code.scurto.net/images/icons/reflection/black/question-2.png) no-repeat; background-size: 32px 32px; }
.Help .Overlay { display: none;  background: white; padding: 20px 30px 0 20px; text-align: left; box-shadow: 0 0 35px rgba(0,0,0,0.25); }

@media only screen and (max-width: 620px) {

	.DateViewer { position: static; display: block; text-align: left; padding: 0 0 0 10px; margin: 0 0 20px 0; }
	.DateViewer span { display: none; }

	.DateSelector { width: 100%; height: 30px; position: static; display: none; padding: 0 0 0 20px; margin: 0 0 20px 0; }
	.DateSelector input[type='text'], .DateSelector input[type='date'] { font-size: 12px; width: 85px; margin: 0; display: inline-block; }
	.DateSelector select { display: none; }
	.DateSelector input[type='submit'] { padding-left: 10px; padding-right: 10px; font-size: 12px; margin: 0 0 0 5px; display: inline-block; }

}

.ContentLinks { margin: 0 0 10px 0; font-size: 14px; color: #555555; font-weight: 600; }
.ContentLinks a { margin-right: 10px; display: inline-block; text-decoration: none; color: #444444; padding: 8px 10px; vertical-align: middle; }
.ContentLinks a:hover { text-decoration: none; color: #777777; }
.ContentLinks a.Active { box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5); background-color: #fafafa; border-radius: 5px; }

@media only screen and (max-width: 620px) {

	.ContentLinks { font-size: 12px; margin: 20px 0 0 15px; }
	.ContentLinks a { margin: 0 5px 10px 0; background-size: 20px 20px; padding-left: 26px; width: 20%; }

}

.CardView {
	display: flex;
	justify-content: center;
	align-content: stretch;
	flex-wrap: wrap;
	align-items: stretch;
}

.CardView .Card {
	min-width: 300px;
	background: white;
	box-shadow: 0 0 2px rgba(0,0,0,0.35);
	border-radius: 5px;
	position: relative;
	flex-basis: 25%;
	flex: 1;
	margin: 10px;
}

.CardView .Card h3 {
	font-size: 17px;
	font-weight: 400;
	line-height: 20px;
	margin: 0 0 10px 0;
}

.CardView .Card h3 a {
	color: #222222;
}

.CardView .Card h5 {
	font-size: 12px;
	font-weight: 400;
	color: #b32017;
	margin: 0 0 10px 0;
}

.CardView .Card h5.Done {
	color: #00a261;
}

.CardView .Card h6 {
	font-size: 12px;
	color: #aaaaaa;
	margin: 0;
}

.CardView .Card span.Status {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: #dddddd;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

	.CardView .Card span.Status.Complete {
		background: #00a261;
	}


.ListView { }

.ListView a { text-decoration: none; }

.ListView .Controls { margin: 0 0 20px 0; }
.ListView .Controls input[type='submit'], .ListView .Controls input[type='button'], .ListView .Controls a { margin-right: 2px; vertical-align: middle; }

.ListView .Filter { position: relative; top: -20px; left: -20px; width: calc(100% + 40px); background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0)); padding: 20px 20px 0 20px; }
.ListView .Filter select, .ListView .Filter input[type='text'], .ListView .Filter input[type='date'], .ListView .Filter input[type='checkbox'] { margin: 0 5px 0 0; vertical-align: middle; display: inline-block; background-color: white; border: 1px solid rgba(0,0,0,0.1); }
.ListView .Filter label { vertical-align: middle; font-size: 13px; line-height: 13px; margin: 0 5px 0 5px; color: #555555; }
.ListView .Filter .Search .FilterItem { float: left; margin-right: 10px; }
.ListView .Filter span { display: inline-block; margin: 0 0 0 5px; vertical-align: middle; }

.ListView .Footer { background: #f3f3f3; padding: 15px; font-size: 13px; line-height: 13px; font-weight: 400; color: #555555; }

.ListView table { width: 100%; border: 1px solid rgba(0,0,0,0.05); border-collapse: collapse; }
.ListView table .Header { background: linear-gradient(rgba(0,0,0,0.05), transparent); }
.ListView table .Footer { background: linear-gradient(transparent, rgba(0,0,0,0.05)); }
.ListView table .Header th, .ListView table .Footer td, .ListView table .Line td { padding: 12px 15px; border: 1px solid rgba(0,0,0,0.05); }
.ListView table .Header th, .ListView table .Footer td { font-size: 12px; text-transform: uppercase; font-weight: 400; color: rgba(0,0,0,0.5); white-space: nowrap; }
.ListView table .Header th a { background-image: url(//code.scurto.net/images/icons/reflection/black35p/arrow-down-1.png); background-size: 16px 16px; background-repeat: no-repeat; background-position-x: -3px; padding-left: 15px; color: #888888; }
.ListView table .Header th a.AltSort { background-image: url(//code.scurto.net/images/icons/reflection/black35p/arrow-up-1.png); }
.ListView table .Line { background-color: White; }
.ListView table .Line:hover { background: rgba(0,0,0,0.025); }
.ListView table .Line.Draggable { cursor: pointer; }
.ListView table .Line.Draggable .DragIcon { display: block; }
.ListView table .Line.Selected { opacity: 0.75; box-shadow: 0 0 16px rgba(0,0,0,0.5); }
.ListView table .Line .DragIcon { display: none; border-top: 1px solid rgba(0,0,0,0.2); margin: 0; border-bottom: 1px solid rgba(0,0,0,0.2); width: 50px; position: absolute; right: 5%; bottom: 25px; }
.ListView table .Line .DragIcon span { width: 50px; height: 1px; display: block; background: rgba(0,0,0,0.2); border-top: 8px solid white; border-bottom: 8px solid white; }
.ListView table .Line td { color: rgba(0,0,0,0.65); font-size: 14px; line-height: 14px; font-weight: 500; }
.ListView table .Line td input[type='text'], .ListView table .Line td textarea { width: 100%; min-width: 35px; }
.ListView table .Line td span.Tag { display: inline-block; background: #ffffff; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; margin: 5px 2px 0 0; padding: 2px 5px; font-size: 11px; }
.ListView table .Line td span.On { color: #00a261; }
.ListView table .Line td span.Off { color: #b32017; }
.ListView table .Line td img.ListThumb { width: 75px; height: auto; }
.ListView table .Line .SelectCol { min-width: 45px; max-width: 45px; text-align: center; box-sizing: border-box; background: rgba(0,0,0,0.025); }
.ListView table .Line .ControlCol { padding: 0; position: relative; }
.ListView table .Sortable { cursor: pointer; }

.ListView table .LineAlertMsg { background: rgba(242,242,97,1); color: black; }
.ListView table .LineErrorMsg { background: #b32017; color: white; }
.ListView table .LineAlertMsg td, .ListView table .LineErrorMsg td { font-size: 14px; line-height: 14px; font-weight: 600; padding: 15px 15px 15px 35px; background: url(//code.scurto.net/images/icons/reflection/white/24/exclamation-4.png) no-repeat 10px 11px; }

@media only screen and (max-width: 620px) {

	.ListView .Controls { padding: 10px 0; margin: 10px 0; background: none; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }

	.ListView .Filter { padding: 0; background: none; }
	.ListView .Filter select, .ListView .Filter input[type='text'], .ListView .Filter input[type='date'], .ListView .Filter input[type='checkbox'], .ListView .Filter .Search input[type='submit'] { margin: 0 0 5px 0; width: 100%; }
	.ListView .Filter input[type='submit'].Search { margin: 0; width: auto; }
	.ListView .Filter .Search .FilterItem { float: none; margin: 0; }

	.ListView table { border: none; }
	.ListView table .Header { display: none; }
	.ListView table .Line { position: relative; border-bottom: 1px solid #d9d9d9; display: block; margin: 0 0 10px 0; padding: 0 0 10px 0; }
	.ListView table .Line:last-child { border: none; margin-bottom: 0; padding-bottom: 0; }
	.ListView table .Line td { display: block; width: 100%; padding: 5px 0; box-sizing: border-box; border: none; text-align: left; }
	.ListView table .Line td:nth-child(n+5) { display: none; }
	.ListView table .Line .SelectCol { position: absolute; top: 10px; right: 15px; padding: 0; text-align: right; }

}

.DashView { position: relative; }

.DashView h2 { color: #555555; margin: 0; padding: 20px; border: none; display: block; }
.DashView p { background: #ffffff; font: 400 14px/14px 'PT Sans'; padding: 0 20px 20px 20px; color: #555555; }
.DashView a { text-decoration: none; }
.DashView a:hover { text-decoration: underline; }

.DashView table { width: auto; border: 0; }
.DashView table th, .DashView table td { padding: 10px 20px; font: 500 13px/13px Roboto; color: rgba(0,0,0,0.65); border: none; }
.DashView table tr.Header th { font-weight: 400; font-size: 12px; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid rgba(0,0,0,0.05); padding-top: 0; }
.DashView table tr:hover { background: rgba(0,0,0,0.025); }
.DashView table tr.Header:hover { background: none; }
.DashView table td { border: 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.DashView table tr:last-child td { border-bottom: none; }
.DashView table td span { display: block; }

.DashView select { float: right; font-size: 12px; }

.ReportView table { width: auto; border: 0; }
.ReportView table th, .ReportView table td { padding: 10px 20px 10px 0; font: 300 13px/13px Roboto; color: #555555; border: none; }
.ReportView table tr.Header th { font-weight: 400; white-space: nowrap; border-bottom: rgba(0,0,0,0.05); padding-top: 0; }
.ReportView table tr:hover { background: linear-gradient(#ffffff, #ecfff6); }
.ReportView table td { border: 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.ReportView table td span { display: block; }

@media only screen and (max-width: 620px) {

	.SideBox, .SideBoxDash { padding-bottom: 10px; }
	.DashView table th, .DashView table td { padding: 8px 20px; font: 300 12px/12px Roboto; }
	.DashView table tr:last-child td { border: none; }

}

.DetailView { position: relative; width: 100%; clear: both; margin: 10px 0; }

.DetailView .DragIcon { display: none; border-top: 1px solid #d3d3d3; margin: 0; border-bottom: 1px solid #d3d3d3; width: 50px; position: absolute; right: 5%; bottom: 25px; }
.DetailView .DragIcon span { width: 50px; height: 1px; display: block; background: #d3d3d3; border-top: 8px solid white; border-bottom: 8px solid white; }

.DetailView.Draggable { cursor: pointer; }
.DetailView.Draggable .DragIcon { display: block; }
.DetailView.Selected { opacity: 0.75; box-shadow: 0 0 16px rgba(0,0,0,0.5); }

.DetailView h2 { width: auto; }
.DetailView h2 input[type='checkbox'] { float: right; }
.DetailView h2 label { font-size: 13px; font-weight: 700; float: right; color: #777777; margin: 3px 5px 0 15px; }
.DetailView h3 { margin-bottom: 5px; font-size: 13px; color: #777777; font-weight: 700; }
.DetailView h4 { font: 500 15px/15px Roboto; margin: 0; }
.DetailView h4 input[type='checkbox'] { margin: 0 10px 0 3px; -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); }
.DetailView h4 input[type='radio'] { margin-left: 0 5px 0 3px; -ms-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-transform: scale(1.25); -o-transform: scale(1.25); }
.DetailView h4 label { font: 400 14px/14px Roboto; color: #888888; position: relative; top: -2px; }
.DetailView h4.Inline { display: inline-block; }
.DetailView h5, .DetailView h6 { display: block; font-weight: 400; font-size: 12px; margin: 2px 0 15px 0; color: #898989; }
.DetailView h5 { margin-left: 10px; }
.DetailView h5 input[type='checkbox'] { margin: 0 8px 0 -8px; -ms-transform: scale(1.35); -moz-transform: scale(1.35); -webkit-transform: scale(1.35); -o-transform: scale(1.35); }

.DetailView label { margin: 0 13px 0 3px; font-size: 14px; vertical-align: middle; }

.DetailView span.Tag { background: rgba(0,0,0,0.05); border-radius: 5px; margin: 0 10px 0 -5px; padding: 3px 5px; }

.DetailView iframe { width: 100%; height: auto; }

.DetailView .Field label { padding: 5px 10px 0 5px; font-size: 13px; display: inline-block; }
.DetailView .Field span { font-size: 13px; display: inline-block; vertical-align: middle; }

.DetailView .Value img { margin-top: 3px; }
.DetailView .Value img.Social { margin: 0 0 0 5px; width: 20px; height: 20px; vertical-align: middle; }
.DetailView .Value label { margin-right: 10px; }

.DetailView .HtmlView { background: #f3f3f3; padding: 20px; }
.DetailView .HtmlView h1 { font: 22px/22px Quicksand; margin: 0 0 10px 0; padding: 0; border: none; }
.DetailView .HtmlView h2 { font: 18px/18px Quicksand; margin: 0 0 5px 0; padding: 0; }
.DetailView .HtmlView h3 { font: 16px/16px Quicksand; margin: 0 0 5px 0; padding: 0; }
.DetailView .HtmlView h4 { font: 14px/14px Quicksand; margin: 0 0 5px 0; padding: 0; }
.DetailView .HtmlView p { font: 12px/14px Quicksand; margin: 0 0 15px 0; }
.DetailView .HtmlView hr { width: 100%; height: 1px; background: #999999; border: none; margin: 10px 0 10px; padding: 0; }

.DetailView .ItemLabel { display: inline-block; background: #eeeeee; padding: 5px 8px 5px 8px; margin: 0 5px 5px 0; font-size: 14px; border: 1px solid #d9d9d9; border-radius: 5px; }
.DetailView .ItemLabel span { display: inline-block; color: #777777; }
.DetailView .ItemLabel a { display: inline-block; margin-right: 2px; font-weight: 700; color: #555555; text-decoration: none; }

.DetailView ul.LinkedList { list-style: none; font: 400 14px/14px Roboto; margin: 0; padding: 0; }
.DetailView ul.LinkedList li { width: 33%; float: left; padding: 5px 0; }

.DetailView .SmBtns input[type='submit'], .DetailView .SmBtns a { margin: 0 5px 0 0; }
.DetailView a.Coords { padding-right: 25px; background: url(//code.scurto.net/images/icons/reflection/black/pin.png) no-repeat; background-position-x: 100%; background-size: 24px 24px; }

.DetailView .AlertMsg { background: rgba(0, 162, 97, 1); color: white; padding: 10px; font: 400 13px/13px Roboto; margin: 20px 0 20px 0; border-radius: 5px; }

.DetailView .FieldSyncStatus { background: rgba(0,162,97,0.2); padding: 5px 8px; color: rgba(0,162,97,0.75); font: 400 13px/13px Roboto; display: inline-block; border-radius: 5px; }

@media only screen and (max-width: 620px) {

	

}

.EmailSection { padding: 20px; text-align: center; position: relative; margin: 20px 0; border-radius: 5px; background: #f9f9f9; }
.EmailSection h3 { text-transform: uppercase; letter-spacing: normal; color: #ffffff; margin: 0; display: inline-block; font-size: 12px; background: #cccccc; padding: 2px 10px; }
.EmailSection h3.Add { color: #000000; font-size: 22px; background-image: url(//code.scurto.net/images/icons/reflection/black/button-add.png); background-repeat: no-repeat; background-size: 34px 34px; padding-left: 36px; opacity: 0.35; }

.SaveButtons { text-align: right; margin-bottom: 20px; position: fixed; bottom: 20px; left: 0; z-index: 3; width: 100%; padding: 20px 40px; background: #f3f3f3; box-shadow: 0 0 10px rgba(0,0,0,0.15); }
.SaveButtons input, .SaveButtons a.Button { margin: 0 0 0 10px; padding: 15px 30px; font-size: 14px; min-width: 125px; }

@media only screen and (max-width: 620px) {

	.SaveButtons { padding-right: 20px;	}
	.SaveButtons input { padding: 12px 20px; min-width: 100px; }

}

.ImagePopUp { position: absolute; top: 0; left: 50%; width: 100%; z-index: 99; display: none; background: white; box-shadow: 0 0 12px rgba(0,0,0,0.25); }

.PopupView { background: #ffffff; position: absolute; z-index: 200; display: none; left: 0; top: 0; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
.PopupView label { display: inline-block; vertical-align: middle; font-size: 12px; line-height: 12px; }
.PopupView span { margin: 0; padding: 0; }
.PopupView input[type='checkbox'] { display: inline-block; vertical-align: middle; margin: 5px 0 0 0; font-size: 12px; line-height: 12px; }
.PopupView a.CloseWindow { position: absolute; top: 0; right: -3px; z-index: 201; display: block; width: 38px; height: 38px; background: url(//code.scurto.net/images/icons/reflection/black/button-delete.png) no-repeat; background-size: 38px 38px; }

.ChartKey span { display: inline-block; font-size: 12px; color: #999999; margin-right: 15px; }
.ChartKey span.ColorBlk { width: 10px; height: 10px; margin-right: 5px; border-radius: 5px; }

.DashView .ChartKey span { display: block; font-size: 12px; line-height: 20px; color: #999999; margin: 0; clear: both; }
.DashView .ChartKey span.ColorBlk { display: inline-block; width: 10px; height: 10px; margin-right: 5px; position: relative; top: 1px; border-radius: 5px; }

.CodeView, .CodeView p, .CodeView ul, .CodeView ol { font: 13px/15px "Share Tech Mono"; color: #666666; }
.CodeView { background: #f3f3f3; padding: 20px; margin: 20px 0 20px 0; box-shadow: inset 0 0 10px rgba(0,0,0,0.2); }

.InfoMsg, .SuccessMsg, .WarningMsg, .ErrorMsg { background: none; font-size: 15px; font-weight: bold; margin: 0; padding: 15px 40px; border-radius: 0; position: fixed; width: auto; left: 50%; transform: translate(-50%, 0); top: 50px; z-index: 1; box-sizing: border-box; transition: 0.5s; }
.InfoMsg { background-color: #0061a2; color: white; }
.SuccessMsg { background-color: #00a261; color: white; }
.WarningMsg { background-color: #e3b361; color: white; }
.ErrorMsg { background-color: #b32017; color: white; }

.Login .InfoMsg, .Login .SuccessMsg, .Login .WarningMsg, .Login .ErrorMsg { position: static; transform: translate(0,0); width: 100%; height: auto; padding: 15px; white-space: normal; }

.Blackout { width: 100%; position: absolute; top: 0; left: 0; z-index: 100; display: none; background: rgba(0,0,0,0.6); }
.Whiteout { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 50; background: rgba(255,255,255,0.8); display: none; }

.LoadingFill { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 51; display: none; }
.LoadingBox, .SyncingBox { width: 200px; position: fixed; top: 50%; left: 50%; padding: 20px; z-index: 51; margin: -40px 0 0 -100px; box-shadow: 0 0 20px rgba(0,0,0,0.25); background: white; text-align: center; }
.LoadingBox h4, .SyncingBox h4 { position: relative; font-size: 22px; font-weight: 300; letter-spacing: -1px; display: inline-block; margin: 0; padding: 2px 0 0 0; color: #00a261; background: white; }

.SyncingBox { width: 400px; margin: -50px 0 0 -200px; }
.SyncingBox h4 { padding-bottom: 15px; }

.ProgressBar { display: none; box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5); background: #f9f9f9; position: relative; }
.ProgressBar div { display: block; width: 1px; height: 20px; background: #00a261; }
.ProgressBar span { display: block; position: absolute; top: 2px; left: 50%; font-size: 13px; font-weight: 600; color: #333333; text-align: center; }

.LoadingFill#Syncing .ProgressBar { display: block; }

.StaffOnly { border-color: #b32018; }

span.Green { color: #00a261; }
span.Red { color: #b32017; }

.SuccessfulSave { color: #00a261; }
.SuccessfulDelete { color: #b32017; }

.ToggleSwitch {	position: relative;	display: inline-block; width: 44px;	height: 25px; }
.ToggleSwitch input	{	opacity: 0;	width: 0;	height: 0; border: none; }
.ToggleSwitchSlider {	position: absolute;	cursor: pointer; top: 0;	left: 0; right: 0; bottom: 0;	background-color: #ccc; border-radius: 25px;	 transition: .4s; }
.ToggleSwitchSlider:before { position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: .4s; }

.ToggleSwitch input:checked + .ToggleSwitchSlider {	background-color: #00a261;}
.ToggleSwitch input:checked + .ToggleSwitchSlider:before {	transform: translateX(20px);}

table.StaticCalendar { float: left; width: 210px; border: none; border-collapse: collapse; background: White; text-align: center; vertical-align: middle; display: block; margin: 0 2% 2% 0; }
table.StaticCalendar td { border: 1px solid #d9d9d9; width: 30px; padding: 5px 0; font-size: 12px; color: #666666; box-sizing: border-box; }
table.StaticCalendar tr.Title { background: #555555; }
table.StaticCalendar tr.Title td { border: 1px solid #555555; color: White; font-size: 14px; font-weight: bold; }
table.StaticCalendar tr.DayHeader { background: #e2e2e2; color: #a9a9a9; font-size: 12px; font-weight: bold; }

table.StaticCalendar td.Day,
table.StaticCalendar td.DayBooked,
table.StaticCalendar td.DayArrival,
table.StaticCalendar td.DayDeparture,
table.StaticCalendar td.DayTurn,
table.StaticCalendar td.DayOtherMonth { 
	background: White; 
}

table.StaticCalendar td.DayBooked10p { background: rgba(0, 162, 97, 0.10); }
table.StaticCalendar td.DayBooked20p { background: rgba(0, 162, 97, 0.20); }
table.StaticCalendar td.DayBooked30p { background: rgba(0, 162, 97, 0.30); }
table.StaticCalendar td.DayBooked40p { background: rgba(0, 162, 97, 0.40); }
table.StaticCalendar td.DayBooked50p { background: rgba(0, 162, 97, 0.50); }
table.StaticCalendar td.DayBooked60p { background: rgba(0, 162, 97, 0.60); }
table.StaticCalendar td.DayBooked70p { background: rgba(0, 162, 97, 0.70); }
table.StaticCalendar td.DayBooked80p { background: rgba(0, 162, 97, 0.80); }
table.StaticCalendar td.DayBooked90p { background: rgba(0, 162, 97, 0.90); }
table.StaticCalendar td.DayBooked100p { background: rgba(0, 162, 97, 1); }

table.StaticCalendar td.DayOtherMonth { background: #eeeeee; color: #aaaaaa; }
table.StaticCalendar td.DayBooked { background: #999999; }
table.StaticCalendar td.DayArrival { background: linear-gradient(-45deg, #999999 50%, white 50%); }
table.StaticCalendar td.DayDeparture { background: linear-gradient(135deg, #999999 50%, white 50%); }
table.StaticCalendar td.DayTurn { background: #777777; color: white; }

.Legend { font-size: 10px; line-height: 10px; }
.Legend span.DayBooked10p { background: rgba(0, 162, 97, 0.1); display: inline-block; width: 20px; height: 15px; vertical-align: middle; }
.Legend span.DayBooked50p { background: rgba(0, 162, 97, 0.5); display: inline-block; width: 20px; height: 15px; vertical-align: middle; }
.Legend span.DayBooked100p { background: rgba(0, 162, 97, 1); display: inline-block; width: 20px; height: 15px; vertical-align: middle; }

@media only screen and (max-width: 620px) {

	table.StaticCalendar { width: 155px; margin: 0 10px 10px 0; }

}

/*AJAX/JQUERY*/

.AjaxRatingFilled, .AjaxRatingEmpty, .AjaxRatingWaiting { width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-top: 5px; background: url(//code.scurto.net/images/icons/reflection/black/24/star.png) no-repeat; }
.AjaxRatingEmpty { opacity: 0.2; }

.AjaxCal .ajax__calendar_container { font: 400 13px/13px Roboto; }
.AjaxCal .ajax__calendar_active  { background: #0061a2; color: white; }
.AjaxCal .ajax__calendar_hover .ajax__calendar_day, .AjaxCal .ajax__calendar_hover .ajax__calendar_month, .AjaxCal .ajax__calendar_hover .ajax__calendar_year { background: #00a261; color: white; }

.ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; background: white; font-size: 14px; color: #333333; padding: 4px; border: 1px solid #d9d9d9; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.3); }
.ui-autocomplete a { color: #333333; }

.switch-button-label { float: left; font-size: 11px; cursor: pointer; margin-top: 6px; }
.switch-button-label.off { color: #adadad; margin-top: 6px; }
.switch-button-label.on { color: #00a261; margin-top: 6px; }
.switch-button-background { float: left; position: relative; background: #ccc; border: 1px solid #aaa; margin: 6px 10px 0 10px; border-radius: 4px; cursor: pointer; }
.switch-button-button { position: absolute; left: -1px; top: -1px; background: #FAFAFA; border: 1px solid #aaa; border-radius: 4px; }

.tagsinput span.tag, .tagsinput span.tag a { display: inline-block; padding: 3px 5px 2px 5px; text-decoration: none; color: #888888; font: 400 14px/14px Roboto; }
.tagsinput span.tag { border: 1px solid #d9d9d9; margin: 0 5px 0 0; border-radius: 3px; background: rgba(255,255,255,0.25); }
.tagsinput div { display: block; float: left; } 

.tags_clear { clear: both; width: 100%; height: 0; }
.not_valid {background: #ff0000; color: #ffffff;}

iframe.EmailPreview { width: 100%; height: 800px; -ms-zoom: 0.5; -moz-transform: scale(0.5); -moz-transform-origin: 50% 0; -o-transform: scale(0.5); -o-transform-origin: 50% 0; -webkit-transform: scale(0.5); -webkit-transform-origin: 50% 0; }

/*MISC*/

.tooltip, .arrow:after { background: white; border: 1px solid #d9d9d9; font-size: 13px; line-height: 18px; color: #444444; }
.tooltip { pointer-events: none; opacity: 0; display: inline-block; min-width: 100px; max-width: 400px; position: absolute; padding: 10px 20px; margin-top: 20px; text-align: left; text-decoration: none; z-index: 999; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 10px; }
.arrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; }
.arrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 25px; height: 25px; box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.tooltip.active { opacity: 1; margin-top: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; }
.tooltip.out { opacity: 0; margin-top: -20px; }

.LineChart div { border: none !Important; padding: 0 !Important; }

.StarIcon { display: inline-block; width: 20px; height: 18px; background: url(//code.scurto.net/images/icons/reflection/black/24/star.png) no-repeat; left: -5px; position: relative; }

.error-client { visibility: hidden; }

@media only screen and (max-width: 1024px) {
	.col65 { width: 100%; float: none; }
	.col35 { width: 100%; float: none; }
	.col35 .lm5p { margin: 0; }
	.nmd { display: none; }

	.ButtonIcon { width: 40px; height: 40px; padding: 10px; font-size: 16px; }

	.SectionButtons { top: 20px; }

}