@import url('base-forms.css');

html
{
	height:100%;
	overflow-x:hidden;
	overflow-y:scroll;
}
html.no-scroll
{
	overflow-y:hidden;
}
body
{
	margin:0;
	height:100%;
	background-color:white;
	color:#404040;
	font-size:100%;
	-webkit-font-smoothing:antialiased;
}
body *
{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
strong
{
	font-weight:500;
}
.hidden
{
	display:none !important;
}


/*	buttons, forms
*/

a.button
{	
	background-color:#54a585;
	border-color:rgba(0,0,0,.3);
}
a.button:not(.disabled):hover
{
 	border-color:rgba(0,0,0,.6);
	background-color:#4b9477;
}

svg.icon path,
svg.icon polygon,
svg.icon.checkbox rect
{
	fill:#999999;
}
svg.icon.checkbox rect,
svg.icon.checkbox path.check
{
	fill:transparent;
}
/* .head svg.icon.checkbox:not(:hover) path:not(.check), */
svg.icon.checkmark path
{
	fill:#404040;
}
svg.icon.checkbox.checked rect,
svg.icon.checkbox.checked path:not(.check),
svg.icon.checkbox:hover path:not(.check)
/* tr:hover svg.icon.checkbox path:not(.check) */
{
	fill:#0065b7;
}
svg.icon.checkbox.checked path.check
{
	fill:white;
}
svg.icon.checkbox.focus path:not(.check)
{
	fill:#333;
}


/*	modals
*/

div.modal,
#popover
{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;

	background-color:rgba(255,255,255,.9);
	z-index:10000;
	
	transition:opacity .25s ease 0s;
	
	overflow-y:auto;
	
	text-align: center;
}
div.modal.remove,
html.transition div.modal
{
	opacity:0;
}
div.modal:before
{
	/*	vertically centers dialogue within modal */
	content:'';
	display:inline-block;
	height:100%;
	max-height:100vh;
	vertical-align:middle;
}
div.modal .dialog
{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	
	margin:0;
	padding:10px;

	width:400px;
	max-width:96%;

	text-align:left;
}
div.modal .dialog .head
{
	padding-bottom:12px;
	border-bottom:1px solid rgba(0,0,0,.3);

	font-size:18px;
	font-weight:500;
	line-height:normal;
}
/* 
div.modal .dialog .head .close
{
	position:absolute;
	right:6px;
	top:6px;
	width:18px;
	height:18px;
	background:transparent url(../media/close.svg) no-repeat 0 0;
}
 */
div.modal .dialog .body
{
	padding:15px 0 20px 0;
	font-size:16px;
	line-height:20px;
}
div.modal .dialog .body .list
{
	display:block;
	position:relative;
	padding-left:10px;
}
div.modal .dialog .body .list:before
{
	content:'-';
	position:absolute;
	left:0px;
}

div.modal .dialog .footer
{
	margin-bottom:40px;
	padding-top:15px;
	border-top:1px solid rgba(0,0,0,.3);

	text-align:right;
}

html.popover #viewport
{
	overflow:hidden;
	transform:scale(.9);
	opacity:.4;
}
#list.transition
{
	overflow:hidden;
}
#popover
{
	padding-top:20px;
	overflow:hidden;
	background-color:rgba(0,0,0,.05);
	transition:background-color .5s ease 0s; 
}
#popover .viewport
{
	width:100%;
	height:100%;
	transition:transform .4s ease 0s;
	transform:none;
}
#popover iframe
{
	width:100%;
	height:calc(100% - 40px);
	background-color:white;
}
#popover.transition
{
	background-color:transparent;
}
#popover.transition .viewport
{
	transform:translateY(100%);
}
#popover .header
{
	position:relative;
	width:100%;
	height:40px;
	border-bottom:1px solid rgba(0,0,0,.6);
}


/*	sidebar, signin
*/

#viewport
{
	width:100%;
	height:100%;
	
	transition:
		transform .5s ease 0s,
		opacity .5s ease-out 0s;
	transform-origin:center bottom 0;
}

#sidebar
{
	position:fixed;
	left:0;
	top:0;
	
	max-width:280px;
	
	width:100%;
	height:100%;
	padding:15px;
	/* padding:15px 20px; */
	
	background-color:#54a585;
	
	transition:max-width .4s ease 0s;
	
	color:white;
	font-size:16px;
	
	z-index:2000;
}
#sidebar.popover,
#sidebar.popover > div
{
	transition:none !important;
}
#viewport.compact #sidebar
{
	transform:translateX(-250px);
}
#sidebar .gradient
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:180px;
	
	background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,0));
	z-index:-1;
}
#sidebar > div
{
	width:250px;
	/* width:240px; */
}

#sidebar.signin
{
	max-width:100%;
}
#sidebar.signin .header,
#sidebar.signin .section,
#sidebar.switch .section
{
	transform:translateX(-280px);
}

#sidebar .header
{
	position:relative;
	min-height:75px;
	text-align:center;
	font-weight:500;
	transition:transform .2s ease .2s;
}
#sidebar .header .title
{
	font-size:20px;
	line-height:24px;
	text-shadow:0 1px 1px rgba(0,0,0,.15);
}
#sidebar .header .subtitle
{
	margin-top:4px;
	font-size:14px;
}
#sidebar .header .subtitle svg.icon
{
	margin:-1px 0 0 4px;
	vertical-align:text-bottom;
}
#sidebar .header .subtitle svg.icon path,
#sidebar .header .subtitle svg.icon polygon
{
    fill:white;
}
#sidebar .header select
{
	position:absolute;
	left:50%;
	margin:-18px 0 0 -70px;
	width:140px;
	height:20px;
	padding:1px 6px;
	
	border-color:rgba(0,0,0,.3);
	border-radius:5px;
	background-color:#54a585;

	color:white;
	font-weight:500;

	opacity:0;
	z-index:1000;
}
#sidebar .header select option
{
	padding:3px 6px;
}

#page-login
{
	transform:translateX(-50%);
	margin:20px 0 15px 50%;
}
#page-login .profile
{
	position:relative;
	display:table;
	
	margin:0 -15px;
	padding:4px 0;
}
li.profile.active:after
{
	content:url(../media/arrow-right-white.svg);
	position:absolute;
	right:8px;
	top:2px;
}
#sidebar:not(.signin) li.profile
{	
	cursor:pointer;
}
li.profile > div
{
	display:table-cell;
	vertical-align:middle;
}
li.profile > .signout
{
	padding:0 20px 0px 0;
	line-height:14px;
}
li.profile.active > .signout
{
	padding:0 30px 0px 0;
}
#signout:hover
{
	border-color: rgba(0,0,0,.4);
}

#login-form
{
	margin:25px 0 40px 0;
}
#login-form label
{
	color:white;
}
#login-form input.error
{
	border-color:#cc0000;
	background-color:#fcfcfc;
}
#login-form .caption.error
{
	color:#cc0000;
}
#login-form div.submit
{
	margin-top:30px;
	text-align:center;
}
#page-login .linkedin
{
	position:relative;
	border-top:1px solid #fcfcfc;/* rgba(0,0,0,.8); */
	padding:20px 0;
	font-size:14px;
	text-align:center;
}
#page-login .linkedin .or
{
	position:absolute;
	left:50%;
	top:-11px;
	padding:0 5px;
	transform:translateX(-50%);
	background-color:#54a585;
}
#page-login .signing-in
{
	padding-top:70px;
	text-align:center;
}
#page-login .avatar
{
	margin-left:30px;
	width:38px;
	height:38px;
		
	border-radius:50%;
	background:rgba(244,244,244,.9) url(../media/avatar-default.svg) no-repeat 50% 50%;
	background-size:cover;

	box-shadow:0 0 1px rgba(0,0,0,.5);
}
#page-login .user
{
	width:100%; /*	grab all available space */
	padding:0 6px;
	font-size:14px;
	line-height:16px;
}
#sidebar.signin #signout,
#sidebar:not(.signin) .form,
#page-login.loading .form
{
	display:none;
}

#sidebar .section
{
	padding:10px 15px;
	border-top:1px solid rgba(0,0,0,.3);
	
	transition:transform .2s ease .3s;
}
#sidebar .section.account
{
	transition:transform .2s ease .4s;
}
#sidebar .section.notifications
{
	/* transition:transform .2s ease .5s; */
	transition:transform .2s ease .4s;
}
#sidebar.switch .section
{
	transition:transform .1s ease 0s;
}
#sidebar ul
{
	list-style:none;
	margin:0;
	padding:0;
	
	font-size:16px;
	line-height:40px;
	font-weight:500;
}
#sidebar li
{
	position:relative;
	margin:0 -30px;
}
#sidebar:not(.signin) li:not(.notifications):hover,
#sidebar a.notification:hover
{
	background-color:rgba(0,0,0,.05);
}
#sidebar li.active
{
	background-color:rgba(0,0,0,.1);
}
#sidebar li:not(.notifications):not(.profile) a
{
	padding-left:30px;
	display:block;
	color:rgba(255,255,255,.9);
	text-decoration:none;
	outline:none;
}
#sidebar li.active a
{
	font-weight:700;
	color:white;
}
#sidebar li.active:not(.profile) a:after
{
	content:url(../media/arrow-right-white.svg);
	position:absolute;
	right:8px;
	top:-1px;
}
#sidebar li .count
{
	position:absolute;
	top:11px;
	right:30px;
	
	background-color:rgba(0,0,0,.1);
	display:inline-block;
	
	padding:0 3px 2px 3px;
	border-radius:5px;
	min-width:28px;
	text-align:center;
	
	font-size:14px;
	line-height:16px;
	font-weight:500;
	color:rgba(0,0,0,.5);

}
#sidebar li .count.alert
{
	background-color:#0065b7;
	color:white;
}
#sidebar li.notifications
{
	margin:20px -10px;

	/* position:relative; */
	/* margin-left:-15px; */

	overflow:hidden; /*	hide scrollbars if present */
}
#sidebar li.notifications .list
{
	overflow-y:scroll;
	overflow-x:hidden;
	width:calc(100% + 15px);
	height:100%;
}
#sidebar li.notifications .fade
{
	position:absolute;
	left:0;
	bottom:-30px;
	width:100%;
	height:30px;
	box-shadow:0 -10px 20px rgba(84,165,133,1);
}
#sidebar a.notification
{
	display:block;
	position:relative;
	margin-bottom:15px;
	width:240px;
	min-height:30px;
	padding:8px 22px 3px 10px;
	
	border-radius:5px;
	/* background-color:rgba(255,255,255,.12); */
	border:1px solid rgba(0,0,0,.1);
	
	font-size:14px;
	font-weight:normal;
	line-height:17px;
	text-decoration:none;
	color:rgba(0,0,0,.6);
	
	transition:transform .3s ease 0s;
}
#sidebar a.notification.remove
{
	transform:translateX(-150%);
}
#sidebar a.notification .msg
{
	margin-bottom:6px;
}
#sidebar a.notification .date
{
	font-size:11px;
}
#sidebar a.notification .reset
{
	position:absolute;
	right:2px;
	top:2px;
}	
#sidebar a.notification svg.reset path
{
	fill:rgba(255,255,255,.5);
	fill:rgba(0,0,0,.3);
}
#sidebar a.notification svg.reset:hover path
{
	fill:rgba(255,255,255,.8);
}
#sidebar a.notification:not(.read):before
{
	content:'';
	display:block;
	position:absolute;
	left:9px;
	top:12px;
	width:10px;
	height:10px;

	border-radius:5px;
	background-color:#0065b7;
}
#sidebar a.notification:not(.read) .msg
{
	margin-left:15px;
}


/* list/item pages
*/

.page > .body > .spinner
{
	position:absolute;
	left:50%;
	top:45%;
	margin-left:-11px;
}

#viewport > .page
{
	position:absolute;
	left:280px;
	top:0;
	width:calc(100% - 280px);
	min-height:100%;
	
	transition:
		transform .5s ease 0s,
		opacity .5s ease-out 0s;
}
#viewport.compact > .page,
#viewport.compact .bar
{
	left:0;
	width:100%;
}
#viewport.list #item,
#viewport.item #list,
#viewport.transition .page
{
	height:100%;
	overflow:hidden;
}


/*	page-view
*/

#viewport.page #page
{
	display:block;
}
#page,
#viewport.page .page:not(#page)
{
	display:none;
}


/*	list-view 
*/

#viewport.list #list
{
	transition:
		transform .4s ease .25s,
		opacity .4s ease-out .25s;
}
#viewport.list #item
{
	position:fixed;
	transform:translateX(100%);
}

/*	item-view
*/

#viewport.item #item
{
	transition:transform .4s ease .25s;
}
#viewport.item #list
{
	transform:scale(.9);
	opacity:.4;
	transform-origin:80% 50%;
}


/*	header, footer bar
*/

.bar
{
	position:fixed;

	width:calc(100% - 280px);
	height:45px;

	background-color:#f2f2f2;
	
	z-index:1100;
}
#viewport.item #list .bar,
#viewport.list #item .bar,
#viewport.transition .bar
{
	position:absolute;
	left:0;
	width:100%;
}
.bar.header
{
	top:0;
	padding:8px 15px;
	background-color:white;
	border-bottom:1px solid #e5e5e5;
	line-height:28px;
	font-weight:500;
}
.bar.header .filter
{
	position:absolute;
	top:0;
	right:30px;
	
	
	float:right;
	
	display:inline-block;
	/* position:relative; */
	/* margin:-12px 15px 0 15px; */
	/* margin-top:-5px; */
	
	font-weight:normal;
	min-width:200px;
	
	
}
.bar.header .filter .TokensContainer
{
	margin:0;
	padding:8px 30px 8px 6px;
	
	
/* 
	height:44px;
	padding:8px 0;
 */
	
	border-radius:0;
	border-top:none;
	border-bottom:none;
	
}



.bar.header .filter .search-icon
{
	position:absolute;
	right:0;
}
div.Tokenize ul.TokensContainer.Focused
{
	border-color:#e5e5e5;
}
div.Tokenize ul.TokensContainer li.Token
{
	/* margin:0 5px 0 0; */
	padding:3px 6px;
}
#list-header div.Tokenize ul.TokensContainer li.Token
{
	margin:0 5px 0 0;
}
div.Tokenize ul.TokensContainer li.TokenSearch
{
/* 
	height:32px;
	line-height:32px;
 */
}


.bar.footer
{
	bottom:0;
	height:60px;
	padding:15px;
	border-top:1px solid #e5e5e5;
	box-shadow:0 -10px 25px rgba(255,255,255,.7);
}
.bar .title
{
	position:absolute;
	left:0;
	right:0;
	text-align:center;
	z-index:-1;
}
.bar .button:not(.right)
{
	float:left;
	margin-left:15px;
}
.bar .button.right
{
	float:right;
	margin-right:15px;
}

#list-footer .selected
{
	float:left;
	position:relative;
	margin-left:15px;
	padding-left:38px;
	height:28px;
	line-height:27px;
	font-size:14px;
}
#list-footer .selected .checkbox
{
	position:absolute;
	left:10px;
	top:7px;
}


/*	item list
*/

#list-page,
#item-page
{
	position:absolute;
	left:0;
	top:0;
	right:0;
	
	min-height:100%;
	
	background-color:white;
}
#list-page
{
	padding:70px 30px 80px 30px;
}
#list-page > .head
{
	position:fixed;
	top:45px;
	left:280px;
	width:calc(100% - 280px);

	padding:20px 0 10px 0;

	text-align:center;
	
	background-color:white;
	
	z-index:1000;
}
#viewport.item #list-page > .head,
#viewport.transition.list #list-page > .head
{
	left:0;
	width:100%;
}
#list-page > .head a.scroll
{
	position:absolute;
	top:16px;
	right:60px;
	width:24px;
	height:24px;
	background:#fcfcfc url(../media/arrow-left-black.svg) no-repeat 50% 50%;
}
#list-page > .head a.scroll.right
{
	right:30px;
	background-image:url(../media/arrow-right-black.svg);
}
#list-page > .head a.scroll:hover
{
	background-color:#f3f3f3;
}
#list-page > .footer
{
	margin-top:20px;
	text-align:center;
}
#list-page > .body
{
	margin-top:30px;
	overflow-x:auto;
}
#list-page table
{
	width:100%;
	font-size:15px;
	line-height:30px;
	white-space:nowrap;
}
#list-page table thead
{
	color:#a0a0a0;
	font-size:12px;
	line-height:26px;
	white-space:nowrap;
}
#list-page table thead svg.icon.edit
{
	margin-right:3px;
	margin-bottom:-1px;
}	
#list-page table thead svg.icon.edit path
{
	fill:rgb(0,117,182);
}
#list-page table thead th:not(.select):not(.manage)
{
	cursor:pointer;
}
#list-page table thead th:not(.action):hover
{
	color:#404040;
}
#list-page table th.sort.up:after
{
	content:url(../media/arrow-sort-up.svg);
	margin-left:5px;
}
#list-page table th.sort.down:after
{
	content:url(../media/arrow-sort-down.svg);
	margin-left:5px;
}
#list-page table tr.hidden
{
	display:none;
}
#list-page table th,
#list-page table td
{
	padding:0 5px;
	border-bottom:1px solid #e5e5e5;
	
	font-weight:400;
	text-align:left;
	
	min-height:30px;
	vertical-align: top;
}
#list-page table td.edit
{
	padding:0;
	line-height:0;
}
#list-page table td.edit span.unit
{
	display:inline-block;
	line-height:30px;
	min-height:30px;
	/* background-color:rgba(250,0,250,.1); */
}
#list-page table td span[contenteditable]
{
	display:inline-block;
	padding:0 7px;
	margin:-1px;
	width:100%;
	min-height:32px;
	line-height:30px;

	border:1px solid transparent;

	/* background-color:rgba(250,0,0,.1); */
}
#list-page table td span[contenteditable] input
{	
	margin:0;
	width:88px;
	padding:0;
	border:none;
	background-color:transparent;
	font-size:15px;
}
#list-page table td.unit span[contenteditable]:empty::before
{
	/*	hack for firefox to deal with empty contenteditable alignment */
	content:'_';
	color:transparent;
}
#list-page table td.unit span[contenteditable]
{
	width: calc(100% - 25px);
}
#list-page table td span[contenteditable]:hover
{
	background-color:rgba(0,117,182,.1);
}
#list-page table td span[contenteditable]:focus
{
	border-color:rgb(0,117,182);
	background-color:rgba(0,117,182,.05);
	outline:none;
}
#list-page table td span[contenteditable].issue
{
	border-color:#ffa500;
	background-color:#fff2d9;
}
#list-page table th.center,
#list-page table td.center
{
	width:50px;
	text-align:center;
}
#list-page table th.right,
#list-page table td.right
{
	padding-right:15px;
	text-align:right;
}
#list-page table td.check
{
	position:relative;
	width:33px;
	min-width:33px;
}
#list-page table td.check input
{
	display:none;
}
#list-page table td.check label
{
	margin:0;
	height:30px;
}

#list-page table td.check svg
{
	position:absolute;
	left:5px;
	top:9px;
}
/* #list-page table td svg.checkmark, */
#list-page table td .unread-bullet
{
	/* margin-left:10px; */
	display:inline-block;
}
#list-page table td .unread-bullet
{
	margin-top:11px;
}
#list-page table td a.button.small
{
	/* margin-bottom:2px; */
	/* vertical-align:text-bottom; */
	vertical-align: middle;
}
#list-page table tbody tr:nth-child(odd) 
{
	background-color:#fcfcfc;
}
#list-page table tr.select
{
	cursor:pointer;
}
#list-page table tbody tr.issue
{
	background-color:#fff2d9;
}
#list-page table tr.issue .warning
{
	position:absolute;
	top:7px;
}
#list-page table tr.issue .warning path
{
	fill:#ffa500;
}
#list-page table tr.issue a:hover .warning path
{
	fill:#333;
}
#list-page table tr.issue td:last-child
{
	position:relative;
	min-width:28px;
}

#list-page table tr.select:hover td
{
	background-color:#f3f3f3;
}
#list-page table tr.selected
{
	background-color:#ebebeb !important;
}
#list-page .unread-bullet
{
	width:10px;
	height:10px;
	border-radius:5px;
	background-color:#0065b7;
}


/*	form page layout
*/

form
{
	margin:70px 45px 100px 45px;
}
.page > .body .section
{
	margin-bottom:70px;
}
.page > .body .section:last-child
{
	margin-bottom:350px;
}
.page > .body .section > .header
{
	margin:0 -15px;
	padding:15px 0 10px 0;

	font-size:17px;
	font-weight:500;
}
.page > .body .section:not(:first-child) > .header
{
	border-top:1px solid rgba(0,0,0,.3);
	/* border-top:1px solid #e5e5e5; */
}
.page > .body .section > .guide
{
	/* font-weight:300; */
	font-size:15px;
	margin:0 -15px;
	/* padding-bottom:10px; */

	/* font-size:14px; */
}


/*	widget page layout (dashbaord)
*/

.widgets
{
	position:relative;
	margin:20px;
}
.widget
{
	float:left;
	width:100%;
	margin:10px;
}
.widget.full
{
	width:calc(100% - 20px);
}
.widget.half
{
	width:calc(50% - 20px);
}
.widget > .title
{
	font-weight:500;
	color:white;
	padding:0 0 2px 15px;
	text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.widget > .body
{
	border:1px solid #e5e5e5;
	border-radius:3px;
	padding:10px 15px 25px 15px;
	background-color:#fcfcfc;
	background-color:rgba(252,252,252,.9);
}


#page.dashboard
{
	background:transparent none no-repeat 0% 50%;
	background-size:cover;
}
#page.dashboard:before
{
	content:'';
	top:0;
	z-index:0;
	height:120px;
	
	position:absolute;
	width:100%;
	background-image:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0));
}

.dashboard-header
{
	position:relative;
	height:120px;
	padding:15px;
	margin-bottom:-20px;
	text-align:center;
}
.dashboard-header img.logo
{
	display:inline-block;
	max-height:100%;
}
.dashboard-header a.prefs
{
	position:absolute;
	right:30px;
	top:20px;
	border-color:rgba(252,252,252,.8);
	color:#e5e5e5;
}
.dashboard-header a.prefs:hover
{
	border-color:#e5e5e5 !important;
	background-color:rgba(252,252,252,.2) !important;
}

#graph
{
	max-width:80%;
	margin:auto;
	text-align:center;
}
#graph > .header
{
	padding:15px 0 25px 0;
}
#period
{
	width:120px;
	height:24px;
	padding:0 25px 1px 10px;
	border-color:#404040;
	border-radius:5px;
	background-color:transparent;
	
	font-size:14px;
	font-weight:500;
}
#period + svg.expand
{
	position:absolute;
	top:7px;
	right:5px;
}
#period + svg.expand path,
#period + svg.expand polygon
{
	fill:#404040;
}
#graph > canvas
{
	margin-bottom:20px;
}
.graph-header
{
	position:relative;
	float:right;
}
.graph-header.total
{
	margin:8px 50px 0 0;
	color:#0065b7;
	font-size:56px;
	line-height:60px;
	text-align:right;
}
.graph-header.total.green
{
	color:#54a585;
}
.graph-header.total .type,
#graph .stats .type
{
	padding-right:4px;
	font-size:15px;
	line-height:15px;
}
#graph .stats
{
	display:inline-block;
	margin:10px;
	padding:13px 10px;
	border-radius:5px;	
	background-color:rgba(0,0,0,.06);
}
#graph .stats > div
{
	padding:0 15px;
	float:left;
	text-align:right;
	font-size:40px;
	line-height:44px;
}
#graph .stats > div:first-child
{
	padding-right:25px;
	border-right:1px solid #404040;
	margin-right:15px;
}