widgets.css

/*---------------------------------------------
	/ Fonts
*/
@font-face {
	font-style: normal;
	font-weight: normal;
	font-family: "Entypo";
	src: url("../fonts/entypo.woff");
}

@font-face {
	font-style: normal;
	font-weight: normal;
	font-family: "Climacons";
	src: url("../fonts/climacons.woff");
}





/*---------------------------------------------
	/ Widget Globals
*/
.widget .header {
	color: #666;
	font-size: 16px;
	margin-bottom: 10px;
	font-family: Open Sans, sans-serif;
}

.widget.tiny .header {
	font-size: 15px;
	line-height: 15px;
	margin-bottom: 15px;
}

.widget .details {
	display: flex;
	margin-top: 25px;
	flex-flow: row wrap;
}

.widget .details div {
	flex: 1;
	color: #666;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}

.widget .details div:after,
.widget .mainval:after {
	color: #666;
	display: block;
	font-size: 13px;
	text-align: center;
	font-weight: normal;
	content: attr(data-label);
}

.widget .mainval {
	color: #1C9C40;
	display: block;
	font-size: 100px;
	text-align: center;
	line-height: 110px;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.widget .mainval:before { /* Without this :after won't be pushed down properly */
	content: "";
	font-size: 65%;
}

.widget .mainval:after {
	font-size: 18px;
	line-height: 25px;
}

.widget .mainval b {
	font-size: 65%;
	font-weight: 600;
}

.widget.tiny .mainval {
	font-size: 55px;
	line-height: 50px;
}

.widget.tiny .mainval:after {
	font-size: 16px;
}

.widget [contenteditable]:focus {
	outline: 0;
}





/*---------------------------------------------
	/ Store Detail Overrides
*/
.store .detail .widget .handle,
.store .detail .widget .settings {
	display: none;
}





/*---------------------------------------------
	/ Weather
*/
.weather .cond {
	width: 100px;
	margin-left: 20px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url("/images/weather/unknown.svg");
}

.weather .cond:before {
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
	display: inline-block;
	vertical-align: bottom;
}

.weather .cond.clear,
.weather .cond.sunny {
	background-image: url("/images/weather/sun.svg");
}

.weather .cond.fog,
.weather .cond.hazy {
	background-image: url("/images/weather/fog.svg");
}

.weather .cond.flurries,
.weather .cond.chanceflurries {
	background-image: url("/images/weather/flurries.svg");
}

.weather .cond.rain,
.weather .cond.sleet,
.weather .cond.chancerain,
.weather .cond.chancesleet {
	background-image: url("/images/weather/rain.svg");
}

.weather .cond.snow,
.weather .cond.chancesnow {
	background-image: url("/images/weather/snow.svg");
}

.weather .cond.tstorms,
.weather .cond.chancetstorms {
	background-image: url("/images/weather/tstorm.svg");
}

.weather .cond.cloudy {
	background-image: url("/images/weather/cloud.svg");
}

.weather .cond.drizzle {
	background-image: url("/images/weather/drizzle.svg");
}

.weather .cond.mostlycloudy,
.weather .cond.mostlysunny,
.weather .cond.partlycloudy,
.weather .cond.partlysunny {
	background-image: url("/images/weather/partcloud.svg");
}

.weather .cond:after {
	color: #67A9E2;
	margin-top: 100px;
	font-weight: bold;
	white-space: nowrap;
	display: inline-block;
	content: attr(data-label);
}

/*
.weather .cond.clear:after			{ content: "Clear"; }
.weather .cond.flurries:after		{ content: "Flurries"; }
.weather .cond.fog:after			{ content: "Fog"; }
.weather .cond.hazy:after			{ content: "Haze"; }
.weather .cond.rain:after			{ content: "Rain"; }
.weather .cond.sleet:after			{ content: "Sleet"; }
.weather .cond.snow:after			{ content: "Snow"; }
.weather .cond.sunny:after			{ content: "Sunny"; }
.weather .cond.tstorms:after		{ content: "T-Storms"; }
.weather .cond.cloudy:after			{ content: "Cloudy"; }
.weather .cond.mostlycloudy:after	{ content: "Mostly Cloudy"; }
.weather .cond.mostlysunny:after	{ content: "Mostly Sunny"; }
.weather .cond.partlycloudy:after	{ content: "Partly Cloudy"; }
.weather .cond.partlysunny:after	{ content: "Partly Sunny"; }
.weather .cond.chanceflurries:after	{ content: "Chance Flurries"; }
.weather .cond.chancerain:after		{ content: "Chance Rain"; }
.weather .cond.chancesleet:after	{ content: "Chance Sleet"; }
.weather .cond.chancesnow:after		{ content: "Chance Snow"; }
.weather .cond.chancetstorms:after	{ content: "Chance T-Storms"; }
*/

.weather .temp {
	font-size: 64px;
	line-height: 45px;
	margin-left: 15px;
	display: inline-block;
	vertical-align: middle;
	font-family: Open Sans, sans-serif;
}

.weather .temp .f:after {
	content: "\00b0 F";
}

.weather .temp .c:after {
	content: "\00b0 C";
}

.weather .temp .f + sup a:after {
	content: "C";
}

.weather .temp .c + sup a:after {
	content: "F";
}

.weather sup {
	top: -15px;
	margin-left: -10px;
	font-size: 20px;
	vertical-align: super;
}

.weather .details {
	color: #666;
	font-size: 0;
	display: flex;
	padding: 0 25px;
	margin-top: 20px;
	justify-content: space-between;
}

.weather .details span {
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
}

.weather .details span:before {
	font-weight: 400;
	line-height: 14px;
	margin-right: 7px;
	font-family: "Climacons";
	vertical-align: text-top;
}

.weather .details .wind:before {
	color: #555;
	font-size: 45px;
	content: "\e021";
}

.weather .details .chill:before {
	color: #AAA;
	font-size: 35px;
	content: "\e038";
}

.weather .details .humidity:before {
	color: #76B3E9;
	font-size: 20px;
	content: "\e66d";
	font-family: Entypo!important;
}

.weather .cond,
.weather .temp,
.weather .details,
.weather .forecast {
	cursor: pointer;
}






/*---------------------------------------------
	/ Weather / Forecast
*/
.weather .forecast {
	display: flex;
	flex-flow: row wrap;
	padding: 10px 30px 15px;
	margin: 20px -15px -15px;
	justify-content: space-between;
	background: rgba(0, 0, 0, 0.04);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.7);
}

.weather .forecast .day {
	text-align: center;
}

.weather .forecast .cond {
	width: 40px;
	height: 40px;
	display: block;
	margin: 5px auto;
}

.weather .forecast .cond:after {
	content: "";
}

.weather .forecast span:after {
	content: "\00b0";
}

.weather .forecast .low {
	color: #888;
}




/*---------------------------------------------
	/ Weather / Tiny
*/
.weather.tiny .temp {
	font-size: 55px;
	line-height: 40px;
	margin-left: 0px;
}

.weather.tiny sup {
	font-size: 18px;
	margin-left: -15px;
}





/*---------------------------------------------
	/ Weather / Multiple
*/
.weather .header ~ .header {
	padding: 20px 20px 0;
	margin: 15px -15px 10px;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.weather.tiny .header ~ .header {
	padding: 15px 15px 0;
	margin: 20px -15px 15px;
}





/*---------------------------------------------
	/ Stocks
*/
.stocks .info {
	margin: 20px 0;
}

.stocks .info > div {
	display: inline-block;
	vertical-align: middle;
}

.stocks .info .stock span {
	width: 135px;
	color: #666;
	display: block;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-right: 10px;
}

.stocks .info .relative {
	color: #444;
	font-size: 15px;
	font-weight: bold;
	margin: 10px 0 0 15px;
}

.stocks .val {
	font-size: 55px;
	line-height: 45px;
	font-family: Open Sans, sans-serif;
}

.stocks .val b {
	font-size: 65%;
	font-weight: 600;
}

.stocks .val.up,
.stocks .current.up,
.stocks table .change.up {
	color: #1C9C40;
}

.stocks .val.down,
.stocks .current.down,
.stocks table .change.down {
	color: #E23C3C;
}





/*---------------------------------------------
	/ Stocks / Multiple
*/
.stocks table {
	margin: 15px 10px 0;
	table-layout: fixed;
	width: calc(100% - 20px);
}

.stocks table td {
	text-align: right;
	line-height: 30px;
	font-family: Open Sans, sans-serif;
}

.stocks table .ticker {
	color: #666;
	font-size: 15px;
	text-align: left;
}

.stocks table .price {
	color: #52A9CA;
	font-size: 16px;
}

.stocks table .change {
	width: 36%;
	font-weight: 600;
}





/*---------------------------------------------
	/ Stocks / Tiny
*/
.stocks.tiny .val {
	font-size: 40px;
	line-height: 40px;
}





/*---------------------------------------------
	/ List style widgets
*/
.drive h2.header,
.twitter h2.header,
.widget.rss a.header,
.widget.rss h2.header,
.widget.news h2.header,
.widget.reddit h2.header,
.widget.feedly h2.header {
	margin-bottom: 25px;
}

.rss .items,
.news .items,
.drive .files,
.reddit .items,
.feedly .items,
.twitter .tweets {
	padding: 0;
	margin: -15px;
	max-height: 600px;
	overflow-x: hidden;
}

.medley .rss .items,
.medley .news .items,
.medley .drive .files,
.medley .reddit .items,
.medley .feedly .items,
.medley .twitter .tweets {
	max-height: calc(100% + 30px);
}

.medley .news .items,
.medley .reddit .items,
.medley .feedly .items,
.medley .rss .header ~ .items,
.medley .drive .header ~ .files,
.medley .twitter .header ~ .tweets {
	max-height: calc(100% - 12px);
}

.medley .news .header ~ .items,
.medley .reddit .header ~ .items,
.medley .feedly .header ~ .items {
	max-height: calc(100% - 54px);
}

.rss .item,
.news .item,
.reddit .item,
.feedly .item {
	color: #555;
	display: block;
	overflow: hidden;
	max-height: 95px;
	padding: 10px 15px;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.rss .item .excerpt,
.news .item .excerpt,
.reddit .item .content,
.feedly .item .content {
	max-height: 75px;
	font-size: 12px;
	overflow: hidden;
}

.rss .item .title,
.news .item .title,
.reddit .item .title,
.feedly .item .title {
	color: #222;
	display: block;
	font-size: 13px;
	overflow: hidden;
	max-height: 35px;
	font-weight: 600;
	letter-spacing: -0.2px;
}

.rss .item span.nested-link[data-href],
.news .item span.nested-link[data-href],
.reddit .item span.nested-link[data-href],
.feedly .item span.nested-link[data-href] {
	color: #222;
	font-weight: 600;
}

.rss .item:visited .title,
.news .item:visited .title,
.reddit .item:visited .title,
.feedly .item:visited .title,

.rss .item:visited span.nested-link[data-href],
.news .item:visited span.nested-link[data-href],
.reddit .item:visited span.nested-link[data-href],
.feedly .item:visited span.nested-link[data-href] {
	color: #555;
}

.rss .item img,
.news .item img,
.reddit .item .img,
.feedly .item .img {
	float: left;
	margin-right: 10px;
	height: calc(100% - 20px);
}

.rss .item .desc,
.news .item .desc,
.reddit .item .desc,
.feedly .item .desc {
	margin-top: 5px;
}

.rss .item:hover,
.news .item:hover,
.reddit .item:hover,
.feedly .item:hover {
	background: rgba(0, 0, 0, 0.03);
}

.news .more,
.reddit .more,
.feedly .more {
	margin: -15px;
	color: #404040;
	display: block;
	padding: 12px 0;
	font-size: 13px;
	margin-top: 15px;
	text-align: center;
	text-decoration: none;
}

.news .more:hover,
.reddit .more:hover,
.feedly .more:hover {
	background: rgba(0, 0, 0, 0.03);
}





/*---------------------------------------------
	/ News
*/
.news .item img {
	height: 75px;
}

.news .item.featured {
	max-height: initial;
}

.news .item.featured .excerpt {
	max-height: 85px;
}

.news .item.featured img {
	height: 80px;
	margin: 5px 10px 0 0;
}

.news .item.featured .desc {
	margin-top: 0;
}





/*---------------------------------------------
	/ RSS
*/
.widget.rss a.header {
	display: block;
	text-decoration: none;
}

.rss a.header:hover {
	color: #428BCA;
}

.rss .item .img {
	float: left;
	width: 70px;
	height: 70px;
	margin-right: 10px;
	background-size: cover;
	background-position: center;
}





/*---------------------------------------------
	/ RSS / Images view
*/
.rss .images .item {
	max-height: 100%;
}

.rss .images img {
	float: none;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}





/*---------------------------------------------
	/ Reddit
*/
.reddit .item .img {
	width: 70px;
	height: 70px;
	background: #DDD no-repeat center;
	background-size: auto 100%;
}

.reddit .item .title {
	margin-bottom: 5px;
}

.reddit .item .img + .content .title {
	height: 40px;
	margin-bottom: 15px;
}

.reddit .item .nested-link:hover {
	color: #428BCA;
	text-decoration: none;
}

.reddit .item .domain {
	color: #AAA;
	font-size: 12px;
	font-weight: normal;
	word-break: break-all;
}

.reddit .item .domain:before {
	content: "(";
}

.reddit .item .domain:after {
	content: ")";
}

.reddit .item .specs {
	font-size: 13px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.reddit .item .specs span {
	color: #777;
	margin-right: 10px;
}

.reddit .item .specs span:before {
	font-size: 14px;
	margin-right: 5px;
	line-height: 18px;
	font-family: FontAwesome;
}

.reddit .item .specs .score:before {
	content: "\f062";
	font-size: 12px;
	line-height: 16px;
	vertical-align: text-top;
}

.reddit .item .specs .score.down:before {
	content: "\f062";
}

.reddit .item .posted:before {
	content: "\f017";
}

.reddit .item .comments:before {
	content: "\f086";
}

.reddit .item .subreddit:before {
	content: "\f03c";
}

.reddit .item .user:before {
	content: "\f007";
}





/*---------------------------------------------
	/ Feedly
*/
.feedly .items {
	outline: 0;
	max-height: 475px;
	position: relative;
}

.medley .feedly .items {
	max-height: 100%;
	height: calc(100% - 54px);
}

.feedly .item.read .title {
	color: #777;
}

.feedly .item .img {
	width: 70px;
	height: 70px;
	background: #DDD no-repeat center;
	background-size: cover;
}

.feedly .item .img img {
	width: 60%;
	visibility: hidden;
}

.feedly .item .content {
	max-height: 55px;
}

.feedly .item .specs {
	font-size: 12px;
	margin-top: 5px;
}

.feedly .item .recommendations {
	color: #00B900;
}

.feedly .item .source {
	max-width: 50%;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: top;
	display: inline-block;
	text-overflow: ellipsis;
}

.feedly .item .author {
	display: none;
}





/*---------------------------------------------
	/ Feedly / Card View
*/
.feedly .items.cards {
	margin-top: 10px;
	text-align: center;
}

.feedly .cards .item {
	width: 90%;
	text-align: left;
	max-height: 100%;
	border-radius: 3px;
	margin-bottom: 10px;
	vertical-align: top;
	display: inline-block;
	border: 1px solid #E0E0E0;
}

.feedly .cards .item .img {
	float: none;
	height: auto;
	border-radius: 0;
	width: calc(100% + 31px); /* Fix 1px bug */
	margin: -10px -15px 10px;
}





/*---------------------------------------------
	/ Feedly / Dual Card View
*/
.feedly .cards.dual .column {
	min-width: 0;
	max-width: 100%;
	vertical-align: top;
	display: inline-block;
	width: calc(50% - 30px);
}

.feedly .cards.dual .column:first-child {
	margin-right: 15px;
}

.feedly .cards.dual .item {
	width: 100%;
	padding: 10px;
}

.feedly .cards.dual .item .title,
.feedly .cards.dual .item .content {
	max-height: 100%;
}

.feedly .cards.dual .item .img {
	margin: -10px -10px 10px;
	width: calc(100% + 21px); /* Fix 1px bug */
}

.feedly .cards.dual .item .age,
.feedly .cards.dual .item .desc,
.feedly .cards.dual .item .source {
	display: none;
}

.feedly .cards.dual .item .author {
	display: inline;
}

.feedly .cards.dual .item .recommendations {
	float: right;
}





/*---------------------------------------------
	/ Feedly / List View
*/
.feedly .list .img,
.feedly .list .desc,
.feedly .list span:not(.recommendations):not(.title) {
	display: none;
}

.feedly .list .content,
.feedly .list .title,
.feedly .list .specs {
	display: inline;
}

.feedly .list .recommendations {
	margin-left: 5px;
}





/*---------------------------------------------
	/ Clock
*/
.widget.clock {
	font-family: Roboto, sans-serif;
}

.widget.clock.small {
	background: #FAFAFA;
}

.clock .section {
	padding: 15px;
	position: absolute;
	margin: 0 -15px -15px;
	transform: translateX(-100%);
	transition: transform .2s ease-in-out;
}

.clock .section.active {
	position: static;
	transform: translateX(0);
}

.clock .section.active ~ .section {
	transform: translateX(100%);
}

.clock .time {
	color: #555;
	font-size: 85px;
	font-weight: 300;
	text-align: center;
	line-height: 115px;
	font-family: Open Sans, sans-serif;
}

.clock input:not([type="checkbox"]) {
	border-radius: 0;
	border-width: 0 0 1px 0!important;
}

.clock input.time {
	width: 100%;
	font-size: 80px;
	border-radius: 0;
	border: 0!important;
	padding: 0 0 5px!important;
}

.clock input.date {
	font-size: 16px;
}

.clock .time:after {
	color: #67A9E2;
	font-size: 25px;
	line-height: 25px;
	vertical-align: top;
}

.clock .time.am:after {
	content: "AM";
}

.clock .time.pm:after {
	content: "PM";
}

.clock .time.no-seconds {
	font-size: 120px;
	line-height: 115px;
}

.clock .date {
	color: #428BCA;
	font-size: 18px;
	margin-top: 20px;
	text-align: center;
}

.clock .controls {
	display: flex;
	margin-top: 15px;
	align-items: flex-end;
	justify-content: space-between;
}

.clock .controls button.material {
	margin: 0;
}

.clock .controls button.material.toggle {
	margin: -6px 4px;
}

.clock .controls button.material.toggle:first-child {
	margin-left: -6px;
}

.clock .start-stop.started #start,
.clock .start-stop:not(.started) #stop {
	display: none;
}







/*---------------------------------------------
	/ Clock / Header
*/
.clock header.tabs {
	height: 44px;
	display: flex;
	background: #FFF;
	margin: -15px -15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.clock .tabs .item {
	flex: 1 25%;
	padding: 10px 0;
	cursor: pointer;
	text-align: center;
}

.clock .tabs svg {
	width: 22px;
	height: 22px;
	fill: #757575;
	display: inline-block;
	vertical-align: middle;
}

.clock .tabs .item:hover svg {
	fill: #444;
}

.clock .tabs .item.active svg {
	opacity: 1;
	fill: #2196F3;
}








/*---------------------------------------------
	/ Clock / Clock
*/
.clock .section.clock {
	padding-top: 25px;
}






/*---------------------------------------------
	/ Clock / Alarm
*/
.clock .alarm.running input.time,
.clock .alarm:not(.running) div.time {
	display: none;
}

.clock .alarm input.time {
	padding: 3px 0 3px!important;
}

.clock .alarm .date {
	color: #333;
	flex: 0 145px;
	margin-top: 0;
	border: 0!important;
	padding: 0!important;
}

.clock .alarm .audio {
	margin-left: 5px;
	font-weight: 500;
}







/*---------------------------------------------
	/ Clock / Timer
*/
.clock .timer .controls {
	margin-top: 10px;
}

.clock .timer.running input.time,
.clock .timer:not(.running) div.time {
	display: none;
}







/*---------------------------------------------
	/ Clock / Alert
*/
.clock .alert {
	left: 0;
	right: 0;
	top: 100%;
	margin: 0;
	border: 0;
	bottom: 0;
	z-index: 1;
	color: #FFF;
	width: 100%;
	height: 100%;
	display: flex;
	border-radius: 0;
	position: absolute;
	text-align: center;
	background: #FB8C00;
	flex-flow: row wrap;
	align-content: space-around;
	transition: top .2s ease-in-out;
}

.clock .alert.visible {
	top: 0;
}

.clock .alert > * {
	flex-basis: 100%;
}

.clock .alert h3 {
	font-weight: 300;
	font-family: inherit;
}

.clock .alert .time,
.clock .alert button.flat {
	color: inherit;
}

.clock .alert .time {
	margin: 0;
}







/*---------------------------------------------
	/ Clock / Analog
*/
.clock.analog {
	height: 150px; /* Unfortunately hardcoded since I can't find a way to make the clock scale. */
	box-shadow: none;
	background: rgba(0, 0, 0, 0)!important;
}

.clock.analog .clock {
	top: 50%;
	left: 50%;
	width: 150px;
	height: 150px;
	font-size: 48px;
	background: #FFF;
	transition: none;
	border-radius: 50%;
	position: relative;
	box-sizing: border-box;
	border: 4px solid #FFF;
	margin: -75px 0 0 -75px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),
				inset 0 0 8px rgba(0, 0, 0, 0.3),
				inset 0 0 55px rgba(0, 0, 0, 0.1);
}

.clock.analog .clock:after {
	top: 50%;
	left: 50%;
	width: 3%;
	height: 3%;
	content: "";
	background: #333;
	position: absolute;
	border-radius: 50%;
	margin: -1.5% 0 0 -1.5%;
	background-clip: padding-box;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2),
				0 0 3px rgba(0, 0, 0, 0.3),
				0 0 20px rgba(0, 0, 0, 0.3);
}

.clock.analog .ticks {
	top: 50%;
	width: 0;
	left: 50%;
	height: 0;
	z-index: 2;
	position: absolute;
}

.clock.analog .ticks div {
	left: 57px; /* Half of 114px which is 150px clock size - (4px border * 2) - (10px tick length * 2) - (4px padding * 2) */
	width: 10px;
	height: 2px;
	background: #333;
	position: absolute;
	box-sizing: border-box;
	-webkit-transform-origin: -57px 0;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.clock.analog .ticks div:nth-child(1)	{ -webkit-transform: rotate(0deg); }
.clock.analog .ticks div:nth-child(2)	{ -webkit-transform: rotate(30deg); }
.clock.analog .ticks div:nth-child(3)	{ -webkit-transform: rotate(60deg); }
.clock.analog .ticks div:nth-child(4)	{ -webkit-transform: rotate(90deg); }
.clock.analog .ticks div:nth-child(5)	{ -webkit-transform: rotate(120deg); }
.clock.analog .ticks div:nth-child(6)	{ -webkit-transform: rotate(150deg); }
.clock.analog .ticks div:nth-child(7)	{ -webkit-transform: rotate(180deg); }
.clock.analog .ticks div:nth-child(8)	{ -webkit-transform: rotate(210deg); }
.clock.analog .ticks div:nth-child(9)	{ -webkit-transform: rotate(240deg); }
.clock.analog .ticks div:nth-child(10)	{ -webkit-transform: rotate(270deg); }
.clock.analog .ticks div:nth-child(11)	{ -webkit-transform: rotate(300deg); }
.clock.analog .ticks div:nth-child(12)	{ -webkit-transform: rotate(330deg); }


.clock.analog .mticks {
	top: 50%;
	left: 50%;
	width: 2px;
	height: 2px;
	margin-top: -1px;
	margin-left: -1px;
	position: absolute;
	border-radius: 50%;

	/* The minute ticks */
	box-shadow: 65.63844px	6.89888px	#333,	64.55774px	13.72218px	#333,	62.76973px	20.39513px	#333,
				60.294px	26.84463px	#333,	53.39511px	38.79384px	#333,	49.04754px	44.16264px	#333,
				44.1626px	49.04757px	#333,	38.79381px	53.39514px	#333,	26.84459px	60.29401px	#333,
				20.39509px	62.76974px	#333,	13.72213px	64.55775px	#333,	6.89884px	65.63845px	#333,
				-6.89893px	65.63844px	#333,	-13.72222px	64.55773px	#333,	-20.39517px	62.76971px	#333,
				-26.84467px	60.29398px	#333,	-38.79388px	53.39509px	#333,	-44.16267px	49.04751px	#333,
				-49.0476px	44.16257px	#333,	-53.39516px	38.79377px	#333,	-60.29403px	26.84455px	#333,	
				-62.76975px	20.39505px	#333,	-64.55776px	13.72209px	#333,	-65.63845px	6.89879px	#333,
				-65.63844px	-6.89897px	#333,	-64.55772px	-13.72226px	#333,	-62.7697px	-20.39521px	#333,
				-60.29396px	-26.84471px	#333,	-53.39506px	-38.79391px	#333,	-49.04749px	-44.1627px	#333,
				-44.16254px	-49.04763px	#333,	-38.79373px	-53.39519px	#333,	-26.84451px	-60.29405px	#333,
				-20.395px	-62.76977px	#333,	-13.72205px	-64.55777px	#333,	-6.89875px	-65.63846px	#333,
				6.89901px	-65.63843px	#333,	13.72231px	-64.55771px	#333,	20.39526px	-62.76969px	#333,
				26.84475px	-60.29394px	#333,	38.79395px	-53.39503px	#333,	44.16273px	-49.04746px	#333,
				49.04766px	-44.1625px	#333,	53.39522px	-38.7937px	#333,	60.29407px	-26.84447px	#333,
				62.76978px	-20.39496px	#333,	64.55778px	-13.722px	#333,	65.63846px	-6.8987px	#333;
}

.clock.analog .holder {
	width: 100%;
	height: 100%;
	position: absolute;
}

.clock.analog .hand {
	top: 0;
	left: 0;
	z-index: 2;
	padding: 5%;
	width: 100%;
	height: 100%;
	position: absolute;
	box-sizing: border-box;
}

.clock.analog .hand div {
	top: 5%;
	left: 50%;
	background: #333;
	position: relative;
}

.clock.analog .hour .hand { -webkit-animation: clock-rotate 43200s normal infinite linear; }
.clock.analog .minute .hand { -webkit-animation: clock-rotate 3600s normal infinite linear; }
.clock.analog .second .hand { -webkit-animation: clock-rotate 60s normal infinite steps(60, end); }

@-webkit-keyframes clock-rotate { 
	0% { -webkit-transform: translate(0, 0) rotate(0deg) translate(0, 0); }
	100% { -webkit-transform: translate(0, 0) rotate(360deg) translate(0, 0); }
}

.clock.analog .second .hand div {
	width: 2px;
	height: 60%;
	margin-left: -1px;
	background: #EB2F35;
}

.clock.analog .minute .hand div {
	width: 3px;
	height: 40%;
	margin-top: 8%;
	margin-left: -1.5px;
}

.clock.analog .hour .hand div {
	width: 4px;
	height: 30%;
	margin-top: 14%;
	margin-left: -2px;
}

.clock.analog .shadow {
	top: 1px;
	left: 1px;
	width: 100%;
	height: 100%;
	position: absolute;
}

.clock.analog .shadow .hand div {
	background: rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}





/*---------------------------------------------
	/ Clock / Tiny
*/
.clock.tiny {
	padding: 0;
}

.widget.clock.tiny h2.header {
	margin: 15px 15px -5px;
}

.clock.tiny .time {
	font-size: 55px;
	line-height: 85px;
}

.clock.tiny .time:after {
	content: none;
}

.clock.tiny .time.full {
	font-size: 65px;
}

.clock.tiny .time span {
	height: 55px;
	max-width: 35px;
	font-size: 30px;
	margin-top: 5px;
	line-height: 20px;
	margin-left: 5px;
	display: inline-flex;
	vertical-align: text-top;
	justify-content: space-between;
	flex-direction: column-reverse;
}

.clock.tiny .time span:after {
	color: #67A9E2;
	font-size: 20px;
}

.clock.tiny .time.am span:after {
	content: "AM";
}

.clock.tiny .time.pm span:after {
	content: "PM";
}





/*---------------------------------------------
	/ Traffic
*/
.widget.traffic {
	cursor: pointer;
}

.widget.traffic a {
	color: inherit;
	text-decoration: none;
}

.widget.traffic .dest {
	font-size: 16px;
	margin-top: 10px;
	line-height: 15px;
	text-align: center;
	font-family: Open Sans, sans-serif;
}

.widget.traffic .time {
	color: #E43431;
	font-size: 48px;
	line-height: 65px;
	text-align: center;
	margin-bottom: 20px;
	font-family: Open Sans, sans-serif;
}





/*---------------------------------------------
	/ Traffic / Tiny
*/
.widget.traffic.tiny .time {
	font-size: 45px;
	margin-bottom: 0;
	line-height: 50px;
	white-space: nowrap;
}





/*---------------------------------------------
	/ Analytics
*/
.analytics .mainval {
	font-size: 95px;
	margin-bottom: 15px;
}

.analytics .no-profile.header {
	margin: 5px;
	font-size: 14px;
	line-height: 20px;
}

.analytics .details div:after {
	text-transform: lowercase;
}





/*---------------------------------------------
	/ Analytics / Tiny
*/
.analytics.tiny .mainval {
	margin-bottom: 0;
}





/*---------------------------------------------
	/ Calendar
*/
.widget.calendar a.header {
	display: block;
	margin-bottom: 25px;
	text-decoration: none;
}

.calendar a.header:hover {
	color: #428BCA;
}

.calendar .events {
	margin: -15px;
}

.calendar .events.no-header {
	margin-top: -15px;
}

.calendar .event {
	color: #428BCA;
	display: block;
	overflow: hidden;
	padding: 10px 20px;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.calendar .event:hover {
	background: rgba(0, 0, 0, 0.03);
}

.calendar .event.no-events {
	color: #555;
}

.calendar .event .title {
	width: 100%;
	font-size: 18px;
	overflow: hidden;
	margin-bottom: 5px;
	white-space: nowrap;
	display: inline-block;
	text-overflow: ellipsis;
}

.calendar .event span {
	width: 49%;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	text-overflow: ellipsis;
}

.calendar .event .time,
.calendar .event .calendar {
	color: #333;
	line-height: 20px;
}

.calendar .event .calendar {
	float: right;
	font-size: 13px;
	text-align: right;
}

.calendar .event .location {
	color: #666;
	float: right;
	font-size: 15px;
	text-align: right;
	line-height: 25px;
}

.calendar .event .location + .title {
	max-width: 49%;
}





/*---------------------------------------------
	/ Apps
*/
.apps .list {
	font-size: 0;
	display: block;
	overflow: auto;
	max-height: 365px;
}

.apps .app {
	width: 50%;
	color: #666;
	height: 32px;
	margin: 6px 0;
	font-size: 14px;
	display: inline-block;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.apps .app.holder {
	border-radius: 3px;
	vertical-align: top;
	background: rgba(0, 0, 0, .05);
}

.apps .app.unavailable {
	color: #888;
}

.apps .thumb {
	width: 32px;
	margin-right: 5px;
	border-radius: 2px;
}

.apps .list .title {
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	text-overflow: ellipsis;
	width: calc(100% - 45px);
	vertical-align: text-bottom;
}





/*---------------------------------------------
	/ Apps / Tile View
*/
.apps .tiles {
	display: flex;
	padding: 0 15px;
	flex-flow: row wrap;
}

.apps .tiles .app {
	flex: 1;
	height: auto;
	margin: 10px;
	min-width: 64px;
	text-align: center;
}

.apps .tiles .thumb {
	width: 64px;
	margin-right: 0;
	border-radius: 4px;
}

.apps .tiles .title {
	display: block;
	margin-top: 5px;
}





/*---------------------------------------------
	/ Top Sites
*/
.widget.topsites h2.header {
	margin-bottom: 25px;
}

.topsites .sites {
	margin: -15px;
	display: block;
}

.topsites .site {
	color: #666;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.topsites .site:hover {
	background: rgba(0, 0, 0, 0.03);
}

.topsites .favicon {
	width: 16px;
	margin-right: 5px;
	border-radius: 2px;
}

.topsites .title {
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	text-overflow: ellipsis;
	width: calc(100% - 25px);
}





/*---------------------------------------------
	/ Notes
*/
.notes .note {
	margin: -15px;
	padding: 15px;
	height: calc(100% + 30px);
}

.notes .note.yellow	{ background: #FFFFB5; }
.notes .note.blue	{ background: #B5E4FF; }
.notes .note.red	{ background: #FFB5B5; }
.notes .note.orange	{ background: #FFD280; }
.notes .note.green	{ background: #99DA99; }

.notes .note input.header {
	border: 0!important;
	padding: 0!important;
	background: transparent;
	font-family: Open Sans, sans-serif!important;
}

.notes .note .content {
	cursor: text;
	overflow-x: hidden;
	max-height: calc(100% - 35px);
}





/*---------------------------------------------
	/ Notes / Content Overrides
*/
.notes .note * {
	font-family: Arial, sans-serif!important;
}

.notes img {
	max-width: 100%!important;
}

.notes ul {
	padding-left: 20px!important;
}





/*---------------------------------------------
	/ Wolfram Alpha
*/
.wolfram form {
	padding: 15px;
	margin-top: 10px;
	text-align: center;
	border-radius: 10px;
	border: 1px solid #FDA566;
	box-shadow: 0 0 3px 1px #CCC;
}

.wolfram img {
	width: 150px;
	margin-top: -50px;
	box-shadow: 0 0 15px 10px #FFF;
	background: rgba(255, 255, 255, 1.7);
}

.wolfram input,
.wolfram input:hover,
.wolfram input:focus {
	top: -5px;
	width: 100%;
	margin-top: -50px;
	line-height: 16px;
	position: relative;
	border-radius: 6px;
	border: 1px solid #FA6800!important;
	box-shadow: 0 0 0 2px #FED36E,0 0 0 4px #FFC104!important;
}





/*------------------------------
	/ Sports
*/
.widget.sports h2.header {
	margin-bottom: 25px;
}

.sports .games {
	margin: -15px;
}

.sports .game {
	color: #333;
	display: block;
	font-size: 15px;
	padding: 10px 15px;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.sports .game:hover,
.sports .no-games:hover {
	background: rgba(0, 0, 0, 0.03);
}

.sports .team {
	width: 60%;
	line-height: 30px;
	display: inline-block;
}

.sports .team .icon {
	width: 25px;
	height: 25px;
	margin-right: 5px;
}

.sports .team .name {
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	text-overflow: ellipsis;
	width: calc(100% - 60px);
}

.sports .team .score {
	display: inline-block;
}

.sports .status,
.sports .team .score {
	color: #666;
	font-weight: bold;
	text-align: right;
}

.sports .status {
	width: 40%;
	float: right;
	overflow: hidden;
	line-height: 30px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sports .no-games {
	color: #444;
	display: block;
	padding: 15px 0;
	margin-top: 25px;
	text-align: center;
	text-decoration: none;
}

.sports .no-games .text {
	padding: 15px;
}





/*---------------------------------------------
	/ Sports / Tiny
*/
.sports.tiny {
	padding: 0;
}

.widget.sports.tiny h2.header {
	overflow: hidden;
	text-align: center;
	line-height: 20px;
	white-space: nowrap;
	margin: -5px -10px 15px;
	text-overflow: ellipsis;
}

.sports.tiny a {
	padding: 15px;
	display: block;
	text-align: center;
	text-decoration: none;
}

.sports.tiny .score {
	color: #4897DB;
	font-size: 40px;
	font-weight: 600;
	line-height: 40px;
	font-family: Open Sans, sans-serif;
}

.sports.tiny .no-games {
	padding: 10px;
	margin-top: 0;
}

.sports.tiny .no-games .text {
	padding: 10px;
}





/*---------------------------------------------
	/ Bookmarks
*/
.widget.bookmarks h2.header {
	margin-bottom: 25px!important;
}

.bookmarks .new {
	opacity: 0;
	float: right;
	font-size: 14px;
	margin-right: 10px;
	transition: opacity .3s ease-in-out;
}

.bookmarks .list {
	font-size: 0;
	margin: -15px;
	display: block;
}

.bookmarks .link {
	color: #666;
	height: 40px;
	display: block;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.bookmarks .link:hover {
	background: rgba(0, 0, 0, 0.03);
}

.bookmarks .drag.dragged {
	cursor: move;
	position: absolute;
	background: #F7F7F7;
}

.bookmarks .list.two-column > .drag {
	width: 50%;
	display: inline-block;
	vertical-align: middle;
}

.bookmarks .link.holder {
	border-width: 1px 0;
	border: 1px solid #F3F3F3;
}

.bookmarks .favicon {
	width: 16px;
	margin-right: 5px;
	border-radius: 2px;
}

.bookmarks .title {
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	text-overflow: ellipsis;
	width: calc(100% - 25px);
}

.bookmarks .link:hover .title {
	width: calc(100% - 100px);
}

.bookmarks .tools {
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	font-size: 20px;
	line-height: 20px;
	position: absolute;
	font-family: Entypo;
	padding: 10px 10px 10px 0;
}

.bookmarks:hover .new,
.bookmarks .link:hover .tools,
.bookmarks .drag.dragged .tools {
	opacity: 1;
}

.bookmarks .tools span {
	padding: 0 5px;
}

.bookmarks .tools .edit:hover	{ color: #428BCA; }
.bookmarks .tools .delete:hover	{ color: #E43431; }
.bookmarks .tools .move:hover	{ cursor: move; }






/*---------------------------------------------
	/ Bookmarks / Edit Mode Styles
*/
body.no-edit .bookmarks .new,
body.no-edit .bookmarks .tools {
	display: none;
}





/*---------------------------------------------
	/ Bookmarks / Folders
*/
.bookmarks .folder {
	color: #666;
	cursor: pointer;
	background: #FFF;
	position: relative;
}

.bookmarks .folder:before {
	color: #777;
	font-size: 14px;
	content: "\F0DA";
	margin-left: 15px;
	font-family: FontAwesome;
}

.bookmarks .folder.active:before {
	content: "\F0D7";
}

.bookmarks .folder .tools {
	background: inherit;
}

.bookmarks .folder .tools:hover,
.bookmarks .folder .name:hover + .tools {
	opacity: 1;
}

.bookmarks .folder .name {
	color: #444;
	cursor: pointer;
	font-size: 15px;
	position: relative;
	border: 0!important;
	width: calc(100% - 30px);
	padding: 10px 15px!important;
	padding-left: 10px!important;
	font-family: Open Sans, sans-serif;
}

.bookmarks .folder .name:hover {
	color: #666;
}

.bookmarks .folder .name:hover {
	width: calc(100% - 100px);
}

.bookmarks .folder > .items {
	display: none;
}

.bookmarks .folder.active > .items {
	display: block;
}

.bookmarks .folder .folder {
	padding-left: 10px;
}

.bookmarks .folder .link {
	padding-left: 25px;
}







/*---------------------------------------------
	/ Bookmarks / Modal
*/
.modal.bookmarks-modal form {
	overflow: auto;
	padding: 20px 25px;
	height: calc(100% - 110px);
}

.modal.bookmarks-modal input[type="tel"],
.modal.bookmarks-modal input[type="text"],
.modal.bookmarks-modal input[type="email"],
.modal.bookmarks-modal input[type="search"],
.modal.bookmarks-modal select,
.modal.bookmarks-modal textarea {
	width: 100%;
}

.modal.bookmarks-modal .form-group:last-child {
	margin-bottom: 0;
}

.modal.bookmarks-modal .btn {
	float: right;
	margin-right: 20px;
}




/*---------------------------------------------
	/ Bookmarks / Link Drop
*/
.bookmarks .drop {
	z-index: 9;
	display: none;
	background: rgba(255, 255, 255, .8);
}

.bookmarks .drop.active {
	display: block;
}

.bookmarks .drop,
.bookmarks .drop > div {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
}

.bookmarks .drop .text {
	margin: auto;
	width: 200px;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
	text-align: center;
	font-family: Open Sans, sans-serif;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

.bookmarks .drop .catch {
	opacity: 0;
}







/*---------------------------------------------
	/ Chrome Bookmarks
*/
.widget.chrome_bookmarks h2.header {
	margin-bottom: 25px!important;
}

.chrome_bookmarks .list {
	font-size: 0;
	display: block;
	overflow: auto;
	max-height: 340px;
	margin: -5px -15px;
}

.chrome_bookmarks .link,
.chrome_bookmarks .folder {
	color: #444;
	display: flex;
	cursor: pointer;
	font-size: 13px;
	line-height: 16px;
	padding: 9px 15px;
	padding-left: 12px;
	position: relative;
	align-items: center;
	text-decoration: none;
	font-family: Roboto, sans-serif;
	border-left: 3px solid transparent;
}

.chrome_bookmarks .link:hover,
.chrome_bookmarks .folder:hover {
	border-left-color: #1E88E5;
	background: rgba(0, 0, 0, .03);
}

.chrome_bookmarks .favicon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 2px;
	vertical-align: top;
}

.chrome_bookmarks .title {
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 10px 0 8px;
	text-overflow: ellipsis;
}

.chrome_bookmarks .date,
.chrome_bookmarks .count {
	color: #757575;
	flex-shrink: 0;
	font-size: 11px;
	font-family: Open Sans, sans-serif;
}



/*---------------------------------------------
	/ Bookmarks / Folders
*/
.chrome_bookmarks .folder:before {
	width: 16px;
	content: "";
	height: 16px;
	flex-shrink: 0;
	background: no-repeat center/18px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#444" viewBox="0 0 24 24"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/></svg>');
}

.chrome_bookmarks .folder.active:before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#444" viewBox="0 0 24 24"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/></svg>');
}

.chrome_bookmarks .folder .title {
	padding-right: 0;
}

.chrome_bookmarks .folder:not(.active) + .folder-items {
	display: none;
}

.chrome_bookmarks .folder-items > .link,
.chrome_bookmarks .folder-items > .folder {
	padding-left: 22px;
}

.chrome_bookmarks .folder-items > .folder-items > .link,
.chrome_bookmarks .folder-items > .folder-items > .folder {
	padding-left: 29px;
}

.chrome_bookmarks .folder-items > .folder-items > .folder-items > .link,
.chrome_bookmarks .folder-items > .folder-items > .folder-items > .folder {
	padding-left: 36px;
}






/*---------------------------------------------
	/ To do
*/
.widget.todo {
	overflow: visible;
}

.widget.todo h2.header {
	margin-bottom: 25px;
}

.todo .new {
	opacity: 0;
	float: right;
	font-size: 14px;
	margin-right: 10px;
	transition: opacity .3s ease-in-out;
}

.todo:hover .new {
	opacity: 1;
}

.todo .list {
	color: #666;
	margin: -15px;
	display: block;
}

.todo .item {
	height: 40px;
	display: block;
	padding: 10px 15px;
	position: relative;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.todo .item:hover {
	background: rgba(0, 0, 0, 0.03);
}

.todo .item.dragged {
	cursor: pointer;
	position: absolute;
	background: #F7F7F7;
}

.todo .item.holder {
	border: 1px solid #F3F3F3;
	border-width: 1px 0;
}

.todo .check {
	width: 10px;
	font-size: 16px;
	margin-right: 10px;
	font-family: Entypo;
	display: inline-block;
	vertical-align: middle;
}

.todo .check:hover {
	cursor: pointer;
}

.todo .title {
	overflow: hidden;
	border: 0!important;
	padding: 0!important;
	display: inline-block;
	vertical-align: middle;
	text-overflow: ellipsis;
	background: rgba(0, 0, 0, 0);
	width: calc(100% - 25px)!important;
	font-family: Open Sans, sans-serif!important;
}

.todo .item:hover .title {
	width: calc(100% - 100px)!important;
}

.todo .tools {
	top: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	font-size: 20px;
	line-height: 20px;
	position: absolute;
	font-family: Entypo;
	padding: 10px 10px 10px 0;
}

.todo .item:hover .tools,
.todo .item.dragged .tools {
	opacity: 1;
}

.todo .tools span {
	padding: 0 5px;
}

.todo .tools .delete:hover {
	color: #E43431;
	cursor: pointer;
}

.todo .tools .move:hover {
	cursor: move;
}






/*---------------------------------------------
	/ To do / Done and Important styles
*/
.todo .item.done .check {
	color: #AAA;
}

.todo .item.done .title,
.todo .item.important.done .title {
	color: #AAA;
	text-decoration: line-through;
}

.todo .item.important {
	background-color: #FFECEC;
}

.todo .item.important .title {
	color: #E40400;
}





/*---------------------------------------------
	/ To do / Tags
*/
.todo .tags {
	top: 85%;
	z-index: 1;
	opacity: 0;
	color: #444;
	font-size: 12px;
	min-width: 100px;
	background: #FFF;
	line-height: 15px;
	position: absolute;
	visibility: hidden;
	right: calc(100% - 30px);
	font-family: Open Sans, sans-serif;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
	transition: opacity .2s .2s, visibility 0s .4s;
}

.todo .tags:hover,
.todo .tools .tag:hover ~ .tags {
	opacity: 1;
	visibility: visible;
	transition: opacity .2s 0s, visibility 0s 0s;
}

.todo .tags div {
	padding: 5px 10px;
	cursor: pointer;
}

.todo .tags div:hover {
	background: #F7F7F7!important;
}





/*---------------------------------------------
	/ Tasks
*/
.widget.tasks h2.header {
	margin-bottom: 25px;
}

.tasks .authorize {
	font-size: 14px;
	padding: 10px 20px;
	text-align: center;
}

.tasks button {
	font-size: 13px;
	background: none;
	font-weight: 500;
	border-radius: 1px;
	text-transform: uppercase;
	font-family: Roboto, sans-serif;
	transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.tasks button:hover,
.tasks button:focus {
	background: rgba(153, 153, 153, .2);
}

.tasks button:active {
	box-shadow: none;
	background: rgba(153, 153, 153, .4);
}

.tasks .add {
	opacity: 0;
	color: #666;
	float: right;
	margin-top: -5px;
	padding: 5px 10px;
	margin-right: -5px;
}

.tasks:hover .add {
	opacity: 1;
}

.tasks .items {
	font-size: 0;
	display: block;
	margin: -5px -15px;
}

.tasks .item {
	opacity: 1;
	color: #444;
	height: 38px; /* This is hardcoded so the height can be transitioned */
	display: flex;
	cursor: pointer;
	font-size: 13px;
	overflow: hidden;
	line-height: 16px;
	padding: 9px 15px;
	padding-left: 12px;
	position: relative;
	align-items: center;
	text-decoration: none;
	font-family: Roboto, sans-serif;
	border-left: 3px solid transparent;
	transition: all .2s cubic-bezier(.4, 0, .2, 1),
				opacity .15s cubic-bezier(.4, 0, .2, 1);
}

.tasks .item.transitioning {
	opacity: 0;
}

.tasks .item.edit,
.tasks .item:hover {
	border-left-color: #1ABC9C;
	background: rgba(0, 0, 0, .03);
}

.tasks .check {
	margin: 1px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	vertical-align: top;
}

/**
 * This increases the checkbox's click target area to minimize
 * the chance of user frustration from missing the box.
 */
.tasks .check:after {
	top: -9px;
	border: 0;
	left: -15px;
	right: -5px;
	content: "";
	width: auto;
	height: auto;
	bottom: -9px;
	transform: none;
	position: absolute;
}

.tasks .check:checked {
	background: none;
	box-shadow: none;
}

.tasks .check:checked:before {
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	position: absolute;
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#1ABC9C" viewBox="0 0 20 20"><path d="M10,1.667c-4.604,0-8.333,3.729-8.333,8.333S5.396,18.333,10,18.333s8.333-3.729,8.333-8.333S14.604,1.667,10,1.667z M10,16.667c-3.683,0-6.667-2.984-6.667-6.667c0-3.683,2.983-6.667,6.667-6.667c3.683,0,6.667,2.983,6.667,6.667 C16.667,13.683,13.683,16.667,10,16.667z M15,7.933l-6.429,6.428l-1.428-1.428L5,10.789L6.429,9.36l2.143,2.144l5-5L15,7.933z" /></svg>');
}

.tasks .title {
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
	padding: 0 10px 0 8px;
	text-overflow: ellipsis;
	transition: color .25s cubic-bezier(.55, 0, .1, 1);
}

.tasks .check:checked + .title {
	color: #888;
}

.tasks .title .strikethrough {
	max-width: 100%;
	overflow: hidden;
	position: relative;
	display: inline-block;
	text-overflow: ellipsis;
}

.tasks .title .strikethrough:before {
	left: 0;
	top: 50%;
	width: 0;
	content: "";
	position: absolute;
	border-top: 1px solid #888;
	transition: width .25s cubic-bezier(.55, 0, .1, 1);
}

.tasks .check:checked + .title .strikethrough:before {
	width: 100%;
}

.tasks .due-date {
	color: #757575;
	flex-shrink: 0;
	font-size: 11px;
	font-family: Open Sans, sans-serif;
}

.tasks .due-date.due-today {
	color: #2196F3;
}

.tasks .due-date.overdue {
	color: #F44336;
}

/**
 * This removes the need for a re-render when items are checked off
 * by disabling the title (pointer-events) and date styling.
 */
.tasks .check:checked ~ .due-date {
	color: #757575;
	pointer-events: none;
}





/*---------------------------------------------
	/ Tasks / Edit
*/
.tasks .item.edit {
	height: 154px; /* This is hardcoded so the height can be transitioned */
	margin: 5px 0;
	cursor: default;
	flex-wrap: wrap;
	padding-top: 12px;
	background: initial;
	box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .25);
}

.tasks .edit textarea,
.tasks .edit input[type="text"] {
	border-radius: 0;
	padding: 4px 6px!important;
	border-width: 0 0 1px 0!important;
}

.tasks .edit input.title[type="text"] {
	font-size: inherit;
	margin-right: 10px;
	padding: 3px 6px!important;
	flex-basis: calc(72% - 10px);
}

.tasks .edit .due-date {
	flex-basis: 28%;
}

.tasks .edit textarea.notes {
	height: 56px;
	resize: none;
	flex-basis: 100%;
	font-size: inherit;
	margin: 12px 0 10px;
}

.tasks .edit button.done {
	color: #0FAD8E;
	margin-left: auto;
}

.tasks .edit button.icon {
	padding: 3px 5px;
}

.tasks .edit button.icon svg {
	fill: #474747;
	vertical-align: top;
}

.tasks .edit button.delete svg {
	margin: 2px;
	width: 20px;
	height: 20px;
}





/*---------------------------------------------
	/ Translate
*/
.translate form {
	height: calc(100% - 30px);
}

.translate textarea {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	font-size: 13px;
	min-height: 70px;
	border-radius: 2px;
	margin: 10px 0 15px;
	height: calc(100% - 55px);
	padding: 5px 8px!important;
}

.translate .selectbar {
	float: left;
	height: 34px;
	line-height: 34px;
	text-align: center;
	width: calc(100% - 105px);
}

.translate .switch {
	color: #000; /* See below */
	cursor: pointer;
	font-size: 18px;
	font-family: Entypo;
	text-shadow: 0 0 #000; /* Helps with font-scaling issues a bit, just enough that it looks OK. */
}

.translate select {
	float: left;
	height: 34px;
	font-size: 13px;
	width: calc(50% - 15px);
	padding: 5px 6px!important;
}

.translate select:last-child {
	float: right;
}

.translate button {
	float: right;
}





/*---------------------------------------------
	/ Currency
*/
.currency .selectbar,
.currency .inputs {
	width: 100%;
	font-size: 13px;
	position: relative;
	text-align: center;
	display: inline-block;
}

.currency .inputs {
	margin: 5px 0;
}

.currency select,
.currency input {
	z-index: 1;
	float: left;
	height: 34px;
	font-size: 13px;
	position: relative;
	width: calc(50% - 15px);
	padding: 5px 6px!important;
}

.currency select:last-child,
.currency input:last-child {
	float: right;
}

.currency span.to {
	left: 0;
	z-index: 0;
	width: 100%;
	bottom: -14px;
	position: absolute;
}





/*---------------------------------------------
	/ iframe widgets shared
*/
.widget.html,
.widget.keep,
.widget.plus,
.widget.gmail,
.widget.iframe,
.widget.facebook,
.widget.classroom,
.widget.notifications {
	padding: 0!important;
}

.html iframe,
.keep iframe,
.plus iframe,
.gmail iframe,
.iframe iframe,
.facebook iframe,
.classroom iframe,
.notifications iframe {
	width: 100%;
	height: 100%;
}





/*---------------------------------------------
	/ Now
*/
.widgets-container .widget.now,
.store-detail .preview .widget.now {
	padding: 0!important;
	border: none!important;
	box-shadow: none!important;
	background: transparent!important;
}

.now .cards {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	align-content: flex-start;
}

.now .card {
	color: #333;
	flex: 1 100%;
	overflow: hidden;
	background: #FFF;
	position: relative;
	border-radius: 2px;
	text-decoration: none;
	box-shadow: 0 2px 1px rgba(102, 102, 102, 0.1);
}

.now .card:not(:first-child) {
	z-index: 9;
	margin-top: 15px;
}

.now .card.btns {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.now .card .dismiss {
	top: 2px;
	right: 4px;
	opacity: 0;
	color: #777;
	cursor: pointer;
	position: absolute;
	font-family: Entypo;
}

.now .card:first-child .dismiss {
	right: 20px;
}

.now .card .dismiss:hover {
	color: #555;
}

.now .card:hover .dismiss {
	opacity: 1;
}

.now .card .icon {
	float: left;
	width: 80px;
	height: 80px;
	margin-right: 15px;
	background: #F5F5F5 center no-repeat;
}

.now .card h2 {
	font-size: 14px;
	font-weight: 400;
	overflow: hidden;
	margin-top: 10px;
	max-height: 40px;
	line-height: 20px;
	margin-left: 15px;
	padding-right: 5px;
	margin-bottom: 8px;
	font-family: Roboto;
}

.now .card .desc {
	font-size: 12px;
	overflow: hidden;
	max-height: 36px;
	line-height: 18px;
	font-family: Roboto;
	margin: -4px 5px 8px 15px;
}





/*---------------------------------------------
	/ Now / Card Buttons
*/
.now .cards .buttons {
	width: 100%;
	z-index: 10;
	display: flex;
	overflow: hidden;
	background: #FFF;
	position: relative;
	border-top: 1px solid #EAEAEA;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	box-shadow: 0 2px 1px rgba(102, 102, 102, 0.1);
}

.now .cards .buttons a {
	flex: 1;
	color: #333;
	display: block;
	font-size: 13px;
	padding: 10px 15px;
	font-family: Roboto;
	text-decoration: none;
}

.now .cards .buttons a:hover {
	color: #006AD1;
	background: #F7F7F7;
}

.now .buttons img {
	width: 16px;
	height: 16px;
	margin-right: 10px;
	display: inline-block;
	background: transparent;
	vertical-align: text-bottom;
}




/*---------------------------------------------
	/ Now / Card Variations
*/
.now .card .image {
	clear: both;
	width: 100%;
	height: 240px;
	background: center no-repeat;
}





/*---------------------------------------------
	/ Now / Authorize
*/
.now .authorize {
	text-align: center;
}

.now .authorize .btn {
	margin: 15px 0;
	width: calc(100% - 35px);
}





/*---------------------------------------------
	/ Twitter
*/
.twitter .tweet {
	color: #777;
	padding: 15px;
	cursor: pointer;
	text-decoration: none;
}

.twitter .tweet:hover {
	background: rgba(0, 0, 0, .03);
}

.twitter .tweet .topbar {
	color: #333;
	line-height: 10px;
	margin-bottom: 9px;
}

.twitter .topbar a.user {
	color: #333;
	text-decoration: none;
}

.twitter .topbar a.user:hover {
	color: #428BCA;
}

.twitter .tweet .tweeter {
	color: #666;
	padding-left: 5px;
}

.twitter .tweet .age {
	color: #777;
	float: right;
	font-size: 12px;
}

.twitter .tweet .content {
	font-size: 13px;
}

.twitter .tweet img {
	float: left;
	border-radius: 3px;
	margin: 4px 15px 4px 0;
}

.twitter .tweet .tools {
	font-size: 12px;
	margin-top: 5px;
	text-align: right;
	margin-bottom: -7px;
}

.twitter .tools a {
	opacity: 0;
	color: #777;
	padding: 0 5px;
	text-decoration: none;
}

.twitter .tools a:hover {
	color: #3E85C2;
}

.twitter .tweet:hover .tools a {
	opacity: 1;
}

.twitter .tools a:before {
	font-size: 14px;
	line-height: 15px;
	padding-right: 5px;
	font-family: Entypo;
	vertical-align: bottom;
}

.twitter .tools .reply:before {
	content: "\e60a";
}

.twitter .tools .retweet:before {
	content: "\e68e";
}

.twitter .tools .favorite:before {
	content: "\e61b";
}

.twitter .tools .more {
	float: left;
}





/*---------------------------------------------
	/ Twitter / Authorize & No Tweets
*/
.twitter .no-tweets {
	padding: 25px 0;
	text-align: center;
	font-family: Open Sans, sans-serif;
}

.twitter .authorize {
	padding: 20px;
	text-align: center;
}

.twitter .authorize .btn {
	width: 100%;
	margin-top: 15px;
}





/*---------------------------------------------
	/ Drive
*/
.drive .file {
	color: #333;
	display: block;
	min-height: 75px;
	position: relative;
	text-decoration: none;
	border-top: 1px solid #EEE;
}

.drive .file:hover {
	background-color: rgba(0, 0, 0, 0.01);
}

.drive .file:hover:after {
	right: 15px;
	color: #888;
	font-size: 30px;
	content: "\E6D4";
	line-height: 15px;
	position: absolute;
	font-family: Entypo;
	top: calc(50% - (15px / 2));
}

.drive .file .info {
	padding: 15px;
}

.drive .file h2 {
	font-size: 18px;
	overflow: hidden;
	line-height: 20px;
	white-space: nowrap;
	font-weight: normal;
	text-overflow: ellipsis;
}

.drive .file .modified {
	font-size: 12px;
	padding-top: 5px;
}

.drive .file .icon {
	float: left;
	width: 75px;
	height: 75px;
	margin-right: 15px;
	background: #F5F5F5 center no-repeat;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB0SURBVFiF7dSxDYAwDERRj5cxWIY5MkrGocwIBroIEXIRnEVxln5rv8rm7taW1s1flm0w7T37CFBnEAxAOVpQBAVwLkYRNACKoAIQBB0wQoQAnhBhgB4iFHCHCAdcEaxPWIAqCzCVAAIIIIAAAggggAC/Auz27D1Yc1xjaQAAAABJRU5ErkJggg==");
}





/*---------------------------------------------
	/ Drive / Authorize
*/
.drive .authorize {
	padding: 20px;
	text-align: center;
}

.drive .authorize .btn {
	width: 100%;
	margin-top: 15px;
}






/*---------------------------------------------
	/ Calculator
*/
.widget.calc {
	padding: 0!important;
}

.calc .display {
	width: 100%;
	font-size: 35px;
	font-weight: 300;
	border: 0!important;
	padding: 25px!important;
	font-family: Open Sans, sans-serif;
}

.calc .buttons {
	display: flex;
	flex-flow: row wrap;
}

.calc button {
	border: 0;
	margin: 0;
	outline: 0;
	width: 25%;
	color: #444;
	height: 75px;
	font-size: 25px;
	background: #EEE;
	font-weight: 300;
	transition: background .1s;
	font-family: Open Sans, sans-serif;
	box-shadow: inset 1px 1px rgba(0, 0, 0, 0.06);
}

.calc .buttons button:hover {
	background: #8BE;
	box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, .06), inset -1px 0 0 rgba(0, 0, 0, .06);
}

.calc .buttons button:active,
.calc button[data-id="equals"] {
	background: #67A9E2;
}

.calc button:hover + button:not(:nth-child(4n + 1)) {
	box-shadow: inset 0 1px rgba(0, 0, 0, .06);
}

.calc button[data-id="minus"] {
	font-size: 20px;
}

.calc button.larger {
	font-size: 30px;
}





/*---------------------------------------------
	/ Calculator / Medium
*/
.calc.medium button[data-id="equals"] {
	width: 50%;
}





/*---------------------------------------------
	/ YouTube
*/
.youtube .searchbox {
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .2);
}

.youtube .searchbox input {
	float: left;
	border-radius: 0;
	border: 0!important;
	padding: 15px!important;
	width: calc(100% - 55px);
	background: #F5F5F5!important;
}

.youtube .searchbox input:focus {
	background: #EEE!important;
}

.youtube .searchbox button {
	border: 0;
	outline: 0;
	color: #333;
	width: 55px;
	height: 50px;
	font-size: 20px;
	border-radius: 0;
	background: #F5F5F5;
	font-family: Entypo;
	transition: .1s ease-in-out;
	transition-property: color, background-color;
}

.youtube .searchbox button:hover {
	background: #EAEAEA;
}

.youtube .searchbox button:active {
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.youtube .video {
	width: 48%;
	overflow: hidden;
	margin-top: 15px;
	background: #FFF;
	border-radius: 2px;
	padding-bottom: 5px;
	display: inline-block;
	text-decoration: none;
	box-shadow: 0 2px 1px 0 rgba(0, 0, 0, .1),
		1px 0 0 0 rgba(0, 0, 0, .05),
		-1px 0 0 0 rgba(0, 0, 0, .05);
}

.youtube .video:hover {
	background: #F9F9F9;
}

.youtube .video:nth-child(2n) {
	float: right;
}

.youtube .video .thumb {
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	background-size: 100% auto;
	background-position: center;
	box-shadow: inset 0 0 25px rgba(0, 0, 0, .2);
}

.youtube .video .thumb:after {
	right: 0;
	bottom: 0;
	padding: 0 4px;
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
	position: absolute;
	content: attr(data-duration);
	color: rgba(255, 255, 255, .9);
	background: rgba(0, 0, 0, 0.7);
}

.youtube .video h2 {
	color: #333;
	height: 40px;
	padding: 0 6px;
	font-size: 13px;
	margin-top: 5px;
	overflow: hidden;
	line-height: 18px;
	font-family: Open Sans, sans-serif;
}

.youtube .video:hover h2 {
	color: #28C;
}

.youtube .video span {
	color: #888;
	padding: 0 8px;
	max-width: 50%;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	text-overflow: ellipsis;
}

.youtube .video .views {
	float: right;
}

.youtube .featured.video {
	width: 100%;
	display: block;
	margin-top: 10px;
	margin-bottom: 5px;
}

.youtube .featured.video h2 {
	height: auto;
	padding: 0 8px;
	font-size: 14px;
	max-height: 36px;
	margin-bottom: 5px;
}

.youtube .featured.video .views {
	font-size: 13px;
}





/*---------------------------------------------
	/ Recently Closed
*/
.widget.recentlyclosed h2.header {
	margin-bottom: 25px;
}

.recentlyclosed .items {
	margin: -15px;
	display: block;
}

.recentlyclosed .item {
	color: #666;
	display: block;
	padding: 10px 15px;
	text-decoration: none;
	font-family: Open Sans, sans-serif;
}

.recentlyclosed .item:hover {
	background: rgba(0, 0, 0, 0.03);
}

.recentlyclosed .favicon {
	width: 16px;
	margin-right: 5px;
	border-radius: 2px;
}

.recentlyclosed .title {
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	vertical-align: middle;
	text-overflow: ellipsis;
	width: calc(100% - 25px);
}







/*---------------------------------------------
	/ Quotes
*/
.quotes blockquote {
	border: 0;
	margin: 0;
	color: #222;
	font-size: 20px;
	padding: 5px 5px 0;
	-webkit-font-smoothing: antialiased;
	font-family: Georgia, Cambria, "Times New Roman", Times, serif;
}

.quotes blockquote > a {
	color: inherit;
	display: block;
	text-decoration: none;
}

.quotes blockquote p {
	font: inherit;
	font-style: italic;
	text-align: center;
	margin-bottom: 5px;
	white-space: pre-wrap;
}

.quotes blockquote p.no-quotes {
	margin-top: 8px;
}

.quotes blockquote p:not(.no-quotes):before {
	content: "\201C";
}

.quotes blockquote p:not(.no-quotes):after {
	content: "\201D";
}

.quotes blockquote footer {
	font-size: 14px;
	text-align: right;
}

.quotes blockquote p.no-quotes + footer {
	margin-bottom: -12px;
}

.quotes footer cite {
	color: #444;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: top;
	display: inline-block;
	text-overflow: ellipsis;
	max-width: calc(100% - 70px);
}

.quotes footer span {
	opacity: 0;
	float: left;
	cursor: pointer;
	margin-right: 10px;
	font-family: Roboto, sans-serif;
	transition: opacity .2s cubic-bezier(.4, 0, .2, 1);
}

.quotes:hover footer span {
	opacity: 1;
}

.quotes footer .tweet:before {
	color: #55ACEE;
	font-size: 20px;
	content: "\F099";
	line-height: 20px;
	font-family: FontAwesome;
}

.quotes footer .refresh svg {
	fill: #444;
	width: 20px;
	height: 20px;
}

.quotes footer .refresh:hover svg {
	fill: #222;
}







/*---------------------------------------------
	/ Site Link
*/
.widget.sitelink {
	padding: 0!important;
	border-radius: 4px 4px 2px 2px;
}

.sitelink a {
	display: block;
	text-decoration: none;
}
.widget.sitelink h2.header {
	margin: 0;
	padding: 12px;
}

.sitelink .thumbnail {
	display: block;
	overflow: hidden;
	position: relative;
	background: #F8F8F8;
	padding-bottom: 65%;
	border-radius: 4px 4px 0 0;
	box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}

.sitelink .thumbnail:not(.fill) {
	background-image: none!important;
}

.sitelink .thumbnail img {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
}

.sitelink .thumbnail.fill {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sitelink .thumbnail.fill img {
	display: none;
}







/*---------------------------------------------
	/ System Stats
*/
.stats {
	font-family: Roboto, sans-serif;
}

.stats .header {
	margin-bottom: 15px;
}

.stats .cpu,
.stats .memory {
	margin-bottom: 20px;
}

.stats .label {
	width: 60px;
	padding-right: 5px;
	display: inline-block;
	vertical-align: middle;
}

.stats h3 {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	margin-bottom: 5px;
	font-family: inherit;
}

.stats .icon {
	width: 100%;
	opacity: .6;
	height: 36px;
	display: inline-block;
}

.stats .status {
	display: inline-block;
	vertical-align: middle;
	width: calc(100% - 65px);
}

.stats .name,
.stats .summary {
	font-size: 13px;
	margin-bottom: 2px;
}

.stats progress {
	width: auto;
	height: 6px;
	margin: 6px 0;
	display: block;
	overflow: hidden;
	border-radius: 2px;
	-webkit-appearance: none;
}

.stats progress::-webkit-progress-value {
	background: #2196F3;
	transition: width .5s ease;
}

.stats progress::-webkit-progress-bar {
	background: #BBDEFB;
}







/*---------------------------------------------
	/ Search
*/
.widget.search form {
	height: 50px;
	margin: -15px;
	position: relative;
}

.widget.search .searchbox {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	border-radius: 0;
	position: absolute;
	border: 0!important;
	font-family: Roboto;
	padding: 6px 18px!important;
}

.widget.search .searchbox:focus,
.widget.search .searchbox:active {
	background: rgba(0, 0, 0, .015)!important;
}

.widget.search button.submit {
	top: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	border-radius: 0;
	position: absolute;
}

.widget.search.tiny form {
	height: 65px;
}







/*---------------------------------------------
	/ Classroom
*/
.widget.classroom {
	height: 450px;
}