/* Resets */
a {
	cursor:pointer;
}
a:hover, 
a:focus, 
a:active {
	text-decoration:none;
}

/* Global Styles */
body {
    font-family: 'Lato';
    font-weight:300 !important;
}
select.form-control {
	color:#fff;
	background:#404040;
}
.fa-btn {
    margin-right: 6px;
}
.error-alert {
	position:relative;
}
.alert {
	margin-top:15px;
	margin-bottom:0px;
}
.alert-success {
	background:#42A5F5;
	color:#fff;
	border:0px;
}

.inline-error {
	color:#a94442;
	padding-top:15px;
}
.dismiss-inline-error {
	color:#404040;
}
.close-custom {
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	right:16px;
	color:#000;
	opacity:0.2;
	font-size:20px;
	line-height:0%;
}
.close-custom:hover {
	color:#000;
	opacity:0.6;
	cursor:pointer;
}
i.right-pad {
	padding-right:3px;
}
i.left-pad {
	padding-left:3px;
}
.no-margin-h {
	margin-left:0px !important;
	margin-right:0px !important;
}
.no-margin-v {
	margin-top:0px !important;
	margin-bottom:0px !important;
}
.has-error {
	border-color:red !important;
}
.btn-no-click {
	pointer-events:none;
}
.visible-mobile-only {
	display:none;
}
a.normal-link {
	color:#42A5F5;
}
a.normal-link:hover {
	color:#1E88E5;
}
.error-block {
	display:block;
}
.dont-look-at-this-field {
	display:none;
}
.display-none {
	display:none;
}
.display-none-important {
	display:none !important;
}
.font-16 {
	font-size:16px;
}
.ease-color-transitions {
	transition:color 0.3s ease;
}

@media only screen and (max-width:768px) {
	.hide-text-mobile {
		display:none;
	}
	.controls .btn.btn-primary {
		width:42px;
		font-size:17px;
	}
	.visible-mobile-only {
		display:initial;
	}
}
@media only screen and (max-width:600px) {
	.controls .btn.btn-primary {
		width:42px;
		font-size:17px;
	}
}
.dark-grey-rule {
	border-top:1px solid #ccc;
}
.save-new-list-submit-loading {
	opacity:0.5;
}

/* Welcome Page */

.panel.panel-default.welcome-panel {
	max-width:600px;
	margin:45px auto 20px;

}
.panel.panel-default.welcome-panel .panel-heading {
	background:#404040;
	color:#FFF;
	font-size:24px;
	border-bottom:0px;
	border-radius:0px !important;
}
.panel.panel-default.welcome-panel .panel-body {
	background:#404040;
	color:#fff;
	padding-bottom:40px;
	position:relative;
}
.forgot-pass-link,
.create-acc-link {
	color:#fff;
	padding:5px;
	position:absolute;
	bottom:10px;
}
.forgot-pass-link {
	left:20px;
}
.create-acc-link {
	right:15px;
}
.forgot-pass-link:hover,
.forgot-pass-link:active,
.forgot-pass-link:focus,
.create-acc-link:hover,
.create-acc-link:focus,
.create-acc-link:active {
	color:#fff;
	text-decoration:underline;
}
@media only screen and (max-width:991px) {
	.login-button, .login-button-loading {
		margin-top:-25px;
	}
}
.login-button-loading {
	display:none;
	opacity:0.8;
}
.login-or-create {
	font-size:15px;
	margin-top:8px;
}
.login-or-create a {
	color:#fff;
}
.login-or-create a:hover {
	text-decoration:underline;
}
.developer-link {
	display:inline-block;
	width:55px;
	margin:0 auto;
	text-align:center;
}
.developer-logo {
	text-align:center;
}
.developer-text {
	text-align:center;
}
.chrislove-logo {
	width:35px;
	height:64px;
	transition:all 0.5s ease-out;
}
.chrislove-logo:hover {
	transition:all 0.5s ease-out;
	transform:rotate(300deg);
}
.chrislove-logo path {
	transition:all 0.3s ease-out;
	stroke:#ababab;
}
.chrislove-logo:hover path {
	stroke:#1E88E5;
	transition:all 0.3s ease-out;
}
.welcome-login-form {
	margin-bottom:35px;
}

.welcome-login-form .input-group-btn .btn-no-click {
	width:80px;
	background-color:#F5F5F5;
	text-align:right;
}

/* Controls and Buttons */
.controls {
	margin-bottom:20px;
}
.controls button {
	margin-right:5px;
}
.btn.btn-primary {
	background-color:#42A5F5;
	border-color:#42A5F5;
	/*border-color:#1976D2;*/
	color:#F5F5F5;
	font-size:16px;
}
.btn.btn-primary:hover {
	background:#1E88E5;
	border-color:#1E88E5;
	/*border-color:#1565C0;*/
}
.btn.btn-default.btn-custom {
	font-size:16px;	
}
a.btn.btn-primary {
	margin-right:5px;
}
.top-pad-15 {
	padding-top:15px;
}
@media only screen and (max-width:768px) {
	.controls {
		margin-bottom:7px;
	}
	.controls button,
	.controls a.btn.btn-primary {
		margin-bottom:10px;
	}
}

/* Layout Styles */
#app-layout {
	margin-bottom:60px;
}
body {
	background:#EEEEEE;
	color:#404040;
}


/* Header and Nav */
.navbar {
	background:#404040;
}
.navbar a.navbar-brand {
	color:#fff;
}
.navbar a.navbar-brand:hover {
	color:#9e9e9e;
}
.navbar a.navbar-brand:focus,
.navbar a.navbar-brand:active {
	color:#fff;
}

.nav.navbar-nav {

}
.nav.navbar-nav li a {
	color:#fff;
}

.nav.navbar-nav li a:hover {
	color:#9e9e9e;
}
.nav.navbar-nav li a:active,
.nav.navbar-nav li a:focus {
	color:#fff;
}
.nav-account-email {
	font-weight:300;
}
.nav-account-email:hover a {
	color:#fff !important;
}
.navbar-toggle i.fa { 
	color:#fff;
	font-size:25px;
}
.navbar-toggle span {
	color:#404040;
}
.navbar-toggle,
.navbar-toggle:hover,
.navbar-toggle:active,
.navbar-toggle:focus {
	background:none !important;
	border:0px;
}
@media only screen and (max-width:768px) {
	.navbar-brand {
		line-height:30px;
	}
}


/* Lists */
.list-filter-wrap {
	width: 200px;
}
.list-filter-wrap input {
	padding:17.5px 12px;
	vertical-align:bottom;
}
.list-filter-wrap button {
	padding:7.5px 12px;
	margin-right:0px;
}

.list-body {
	display:none;
}

.item-name-field {
	margin-bottom:5px;
}

.url-field,
.date-field {
	display:inline-block;
	width:20%;
}
@media only screen and (max-width:768px) {
	.url-field,
	.date-field {
		width:40%;
	}
	.list-filter-wrap {
		width:100%;
		margin-top:8px;
		display:none;
	}
	.list-filter-wrap input {
		font-size:17px;
		padding:20px 12px;
	}
	.list-filter-wrap button {
		padding:10px 17px;
	}
	.search-filter-toggle {
		display:table;
	}
}
.list-item-form {
	margin-bottom:5px;
}
.input-wrapper {
	text-align:right;
	margin-top:10px;
}
.input-wrapper-url,
.input-wrapper-date {
	display:none;
}
.input-wrapper-date label {
	font-size:13px;
	padding-right:2px;
	padding-top:4px;
}
.date-icon i.fa {
	
	font-size:14px;
	vertical-align:top;
	padding-top:4px;
}

.add-url-button,
.add-date-button {
	padding-left:15px !important;
	padding-right:15px !important;
}
.submit-note-button {
	background-color:#42A5F5;	
	border-color:#1976D2;
	color:#F5F5F5;
}
.submit-note-button:hover,
.submit-note-button:focus,
.submit-note-button:active,
.submit-note-button:focus:active {
	background:#1E88E5;
	color:#fff;
	border-color:#1565C0;
}


.panel.panel-default {
	border-color:#404040;
	border-radius:0px;
	border:0px;
}
.list-heading-collapsed {
	border-bottom:1px solid #ddd;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}
.panel.panel-default .panel-heading.list-heading {
	cursor:pointer;
}
.panel.panel-default .panel-heading.list-heading,
.panel.panel-default .panel-heading.list-heading-single {
	font-size:17px;
	background:#404040;
	border-radius:0px;
	color:#fff;
	border:0px;
}
.panel.panel-default .panel-heading.list-heading:hover {
	background:#545454;
}
.panel.panel-default .panel-heading.list-heading.main-list-page i {
	transition:all 0.5s;
}	
.panel.panel-default .panel-heading.list-heading.main-list-page:hover i {
	transition:all 0.5s;
	transform:rotate(-180deg);
}
.panel.panel-default .panel-heading.list-heading-collapsed {
	
}
.panel.panel-default .panel-body.list-body,
.panel.panel-default .panel-body.list-body-single {
	border-top:1px solid #404040;
	border-color:#404040;
}

.panel.panel-default .panel-body.list-body-single {
	border-top:0px;
}
/*.list-note-count {
	font-size:65%;
	opacity:0.5;
	position:relative;
	top:-1.5px;
	left:-4px;
}*/

.divider {
	background-color:rgba(0,0,0,0);
}
.divider .panel-heading {
	font-size:17px;
	color:#404040;
	background-color:rgba(0,0,0,0);
	border-color:#949494;
}

.divider-reorder {
	cursor:pointer;
}

.reorder-row {
	margin-top:20px;
}
@media only screen and (max-width:768px) {
	.reorder-row {
		width:80% !important;
	}
}

/* Notes */

.list-items .date-wrap {
	display:inline-block;
	border:1px solid #333;
	border-radius:3px;
	padding:2px 4px;
	margin-right:4px;
}

.checked {
	color:#bfbfbf;
	text-decoration:line-through;
}
.checked .date-wrap {
	border-color:#bfbfbf;
}
.note {
	position:relative;
	padding:12px 10px;
	border-bottom:1px solid #EEEEEE;
}
.note.important-note {
	background:#F5F5F5;
	-webkit-box-shadow: inset 2px 0px 0px 0px rgba(189,189,189,1);
	-moz-box-shadow: inset 2px 0px 0px 0px rgba(189,189,189,1);
	box-shadow: inset 2px 0px 0px 0px rgba(189,189,189,1);
}
.note.important-note:hover,
.note.important-note:focus,
.note.important-note:active {
	-webkit-box-shadow: inset 2px 0px 0px 0px rgba(66,165,245,1);
	-moz-box-shadow: inset 2px 0px 0px 0px rgba(66,165,245,1);
	box-shadow: inset 2px 0px 0px 0px rgba(66,165,245,1);
}
.important-note:last-child {
	
}

.note:hover,
.note:focus,
.note:active {
	-webkit-box-shadow: inset 2px 0px 0px 0px rgba(189,189,189,1);
	-moz-box-shadow: inset 2px 0px 0px 0px rgba(189,189,189,1);
	box-shadow: inset 2px 0px 0px 0px rgba(189,189,189,1);
}

/* Desktop Note Controls*/
@media only screen and (min-width:993px) {

	.note:hover .note-controls,
	.note:active .note-controls,
	.note:focus .note-controls {
		display:initial;
	}	

}

.note .note-controls {
	position:absolute;
	top:47%;
	transform:translateY(-50%);
	right:5px;
	
}
.note-controls button {
	float:left;
	border-right:0px;
}
.note-controls button:last-child {
	border-right:1px solid #ccc;
}
.note-controls button:last-child:hover {
	border-color:#adadad;
}

/* Mobile Note Controls */
.note-controls-toggle {
	display:none;
	position:absolute;
	top:47%;
	transform:translateY(-50%);
	left:-22px;
}
.note-controls-toggle .open-note-controls {
	padding:2px 6px;
}
@media only screen and (max-width:992px) {

	.note-controls-toggle {
		display:initial;
	}

}


.list-items {
	list-style:none;
	padding-left:8px;
	margin-bottom:17px;
}
.list-items li a {
	display:block;
	word-break:break-word;
}
.note:last-child {
	border:0px;
}

ul.list-items {

}
ul.list-items li {
	font-size:16px;
}
a.list-item-url {
	padding:4px 0px 4px 18px;
	font-size:14px;
	color:#9E9E9E;
}
a.list-item-url:hover {
	text-decoration:none;
	color:#42A5F5;
}
a.list-item-url i {
	transition:0.3s all;
}
a.list-item-url:hover i {
	transition:0.4s all;
	transform: translateX(100%);
}
.mobile-url {
	display:none !important;
	color:#42A5F5 !important;
}
@media only screen and (max-width:768px) {
	a.list-item-url {
		display:none !important;
	}
	a.list-item-url.mobile-url {
		display:table !important;
	}
}
.no-notes-message {
	color:#bfbfbf;
}

/* Single List View */

.single-list-view {
	padding-top:5px;
}

.single-list-view .controls {
	margin-bottom:0px;
}

.single-list-view .controls .bottom-border-wrapper {
	margin:0px 15px;
	border-bottom:2px solid #d6d6d6;
}

.single-list-view-title {
	font-size:20px;
	margin-top:5px;
	margin-bottom:15px;
	display:inline-block;
	padding-top:7px;
}
.right-aligned-controls {
}
.belongs-to {
	margin-bottom:7px;
}
a.btn.last-button-right {
	margin-right:0px;
}

@media only screen and (max-width:768px) {
	.belongs-to {
		padding-top:12px;
	}
	.single-list-view-title {
		max-width:100%;
		width:100%;
		border-bottom:2px solid #d6d6d6;
		margin-bottom:0px;
		padding-bottom:8px;
	}
	.right-aligned-controls {
	
	}
	.single-list-view .controls .bottom-border-wrapper {
		border-bottom:0px;
	}
}

.page-title {
	margin-top:20px;
	position:relative;
	font-size:20px;
	border-bottom:2px solid #d6d6d6;
	/*margin-bottom:15px;*/
	padding-bottom:10px;
}
.page-title .main-title {
	display:inline-block;
	width:calc(100% - 82px);
}
.page-sub-title {
	padding-right:5px;
	color:#c3c3c3 !important;
}
.page-title .page-title-inline-controls {
	position:absolute;
	right:0px;
	bottom:10px;
}
@media only screen and (max-width:768px) {
	.page-title .page-title-inline-controls {
		left:0px;
		bottom:45px;
	}
}

.sharing-url {
	display:block;
	max-width:90%;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}
.copied {
	color:green;
}

input[type="checkbox"] {
	margin-right:6px;
}


.archive-panel-wrap {
	border:0px;
	border-radius:0px;
}
.archive-panel-wrap .panel-heading {

}	
.archive-panel-wrap .panel-body {

}

.archived-notes-table {
	width:100%;
	color:#333;
}

.archived-notes-table td {
	width:31%;
	border-bottom:1px solid #bfbfbf;
	padding:7px 0px; 
}
.archived-notes-table .action-column {
	width:7%;
}

.body-td {
	word-break:break-all;
}

.custom-row:hover {
	background:#F5F5F5;
}


.archived-list-item-data {
	display:block;
}

.archived-list-item-data .list-item-url {
	padding-left:2px;
	color:#bfbfbf;
}

.update-list-name-form {
	padding:5px 0px;
}
.update-list-name-form button,
.update-account-name button {
	font-size:14px !important;
}


.new-archived-notes {
	display:none;
	float:right;
	cursor:pointer;
}

.list-info-non-modal {
	font-size:15px;
	color:#c3c3c3;
}

.list-info {
	font-size:16px;
	margin:16px 0px 0px;
	overflow:hidden;
}
.list-info span.pull-right {
	text-align:right;
}
@media only screen and (max-width:768px) {
	.list-info span {
		font-size:14px;
		display:block;
		float:none !important;
		text-align:left !important;
	}
	.new-archived-notes {
		float:none;
		width:100%;
		font-size:15px;
	}
}

/* Modals */
.modal-content {
	overflow:hidden;
	background-color:rgba(0,0,0,0);
	border-radius:0px;
}
.modal-header {
	color:#fff !important;
	background:#404040;
	overflow:hidden;
}
.modal-header .close {
	color:#fff;
	opacity:1;
	text-shadow:none;
}
.modal-header .close:hover {
	opacity:0.7;
}
.modal-body {
	background:#fff;
	border:0px;
}
.modal-footer {
	background:#fff;
	border:0px #fff;
	outline:0px #fff;
}

.modal-body .control-label {
	text-align:left;
}
.modal-body .row {
	width:90%;
	margin:0 auto;
}

#delete-list .btn.btn-default {
	font-size:16px;
}

.modal-input-checkbox {
	display:block;
	width:100%;
	margin-bottom:18px;
}
.label-help {
	font-size:95%;
	color:#b7b7b7;
	font-weight:300;
}


/* Settings Page */

.settings-menu {
	margin-bottom:0px;
}

.settings-menu a li {
	color:#FFF;
	position:relative;
	padding-bottom:10px;
}

.settings-menu a li:hover {
	color:#42A5F5;
}
.settings-menu-active li {
	color:#42A5F5 !important;
}
.settings-menu a li i {
	transition:all 0.5s;
	position:absolute;
	padding-left:10px;
	top:26%;
}
.settings-menu a li:hover i {
	transform:translateX(20%);
	transition:all 0.5s;
	color:#42A5F5;	
}
.settings-menu-active li i {
	transform:translateX(45%) !important;
	transition:all 0.5s !important;
	color:#FFF !important;
}

.settings-container table {
	width:100%;
}
.settings-container td {
	width:30%;
	border-bottom:1px solid #bfbfbf;
	padding:7px 0px; 
}
.settings-container .action-column {
	width:10%;
}
.account-details {
	margin-bottom:12px;
}
.account-details p {
	font-size:19px;
	margin-bottom:0px;
}
.account-details-name,
.account-details-email {
	font-weight:bold;
}
.account-edit-link {
	font-size:14px;
	cursor:pointer;
	padding-top:4px;
}

.update-account-name {
	display:none;
}
.update-account-name input,
.update-account-name .input-group {
	margin-bottom:10px;
}

.support-form input, textarea {
	margin-bottom:10px;
}

/* Reorder page */

.reorder-lists {
	list-style:none;
	padding-left:0px;
}

ul.reorder-lists li .panel.panel-default .panel-heading.reorder-list-heading {

}

.btn,
.form-control,
.alert {
	border-radius:0px !important;
}

/* Alternate Lists View */

.app-layout-alt {
	padding-left:350px !important;
}

.sidebar {
	width:350px;
	z-index:11;
	background:#333;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	overflow-y:auto;
	overflow-x:hidden;
	padding-bottom:30px;
}
.sidebar * {
	color:#fff;
}

.side-header {
	margin-top:15px;
	margin-bottom:20px;
}

.lists-heading {
	display:block;
	font-size:25px;
	width:310px;
	margin:0 auto;
	transition:all 0.5s;
}
.lists-heading:hover {
	color:#42A5F5;
}
.header-info {
	margin-bottom:10px;
}

.account-controls {
	width:310px;
	margin:0 auto;
}
.account-controls a {
	width:40px;
	height:40px;
	background:grey;
	display:inline-block;
}

ul.list-list {
	list-style:none;
	padding:0px;
}

ul.list-list li,
.settings-menu a {
	display:block;
}

ul.list-list .list-item,
.settings-menu li {
	font-size:20px;
	padding:8px 0px;
	width:270px;
	margin-left:20px;
	position:relative;
	transition:all 0.5s;
	line-height:23px;
}

ul.list-list .list-item:hover,
ul.list-list .list-item:hover i.fa-users {
	color:#42A5F5;
	cursor:pointer;
}
.active-list,
.active-list i.fa-users {
	color:#42A5F5;
}
ul.list-list .list-item i.fa-users {
	font-size:12px;
	transform:translateY(-2px);
	transition:all 0.5s;
}
ul.list-list .list-item i.fa-arrow-right {
	opacity:0;
	position:absolute;
	transition:all 0.5s;
	right:12px;
	top:50%;
	transform:translateY(-50%);
}
ul.list-list .list-item:hover i.fa-arrow-right {
	opacity:1;	
	right:-30px;
	/*transform:translateX(30px);*/
}


ul.list-list .divider-item {
	width:310px;
	margin:0 auto;
	font-size:15px;
	margin-bottom:7px;
	padding-bottom:7px;
	border-bottom:1px solid #fff;
	margin-top:15px !important;
}

.alt-view-notes {
	padding:28px 20px;
	background:#fff;
	margin-bottom:10px;
}
.list-content {
	width:90%;
	margin:0 auto;
}
.list-data {
	display:none;
	margin-top:20px;
}

.list-name {
	font-size:25px;
	margin-bottom:12px;
}

.update-list-name-form-alt {
	display:none;
}

.list-controls-below {

}

.divider-item {
	position:relative;
}
.divider-item:hover .edit-divider {
	display:initial;
}
.edit-divider {
	display:none;
	position:absolute;
	right:10px;
	top:40%;
	transform:translateY(-50%);
}

.delete-divider-form {
	display:inline-block;
}

.settings-page {
	margin-top:20px;
}


.mobile-top-nav {
	display:none;
	position:fixed;
	z-index:10;
	top:0;
	left:0;
	right:0;
	height:50px;
	background:#333;
}
.toggle-nav-wrap {
	position:absolute;
	right:20px;
	font-size:24px;
	top:50%;
	transform:translateY(-50%);
}
.toggle-nav {
	color:#fff;
	display:none;
}
.toggle-nav:hover {
	color:#42A5F5;
}
.mobile-lists-title {
	font-size:22px;
	color:#fff;
	position:absolute;
	top:50%;
	left:20px;
	transform:translateY(-50%);
}
.mobile-lists-title a {
	color:#fff;
}
.mobile-lists-title a:hover {
	color:#42A5F5;
}
.sidebar {
	transition:all 0.5s;
}
.sidebar-visible {
	left:0 !important;
	transition:all 0.5s;
}

.mobile-dismiss-sidebar {
	display:none !important;
}

@media only screen and (max-width:992px) {
	.mobile-dismiss-sidebar {
		display:inline-block !important;
	}
	.sidebar {
		left:-350px;
	}
	.app-layout-alt {
		padding-left:0px !important;
		padding-top:50px;
	}
	.mobile-top-nav {
		display:block;
	}
	.edit-divider {
		display:initial;
	}	
	.centered-no-lists-message {
		left:50% !important;
	}
}

.settings-page .list-name {
	margin-top:15px;
}

.no-lists-message {
	width:85%;
	margin:30px auto;
	text-align:center;
}

.centered-no-lists-message {
	position:absolute;
	top:50%;
	left:calc(50% + 175px);
	transform:translate(-50%,-50%);
}
.centered-no-lists-message i {
	display:block;
	font-size:40px;
	text-align:center;
}
.centered-no-lists-message p {
	text-align:center;
	padding-top:10px;
	font-size:20px; 
}