@charset "UTF-8";

/*====================================================
  Table of Contents
====================================================*/

/*
  - Global
  - Color Thief
  - Animations
  - Grid
  - Search
  - Typeahead Styling
  - Animating Results as they generate
  - Custom Scrollbars for search results
  - Settings Overlay Menu
  - Settings & Link Icons
  - Custom Checkboxes
  - Settings List Animation
  - Sort
  - Tags Dropdown
  - Tags Dropdown Scrollbar
  - Link Panel Grid Layout
  - Link Panels
  - Transparent Element to Hold Link
  - Quick Delete Rollover X Button
  - Transparent Element to Hold Delete Function
  - Edit Rollover Icon
  - Thumbnail / Screenshot
  - Styles for Hide Thumbnails Option
  - Special Styles for Links to PDFs
  - Special Styles for Links to local Chrome urls
  - Special Styles for Links to Dewey
  - Link Details
  - Link Tags
  - Edit Modal
  - Bookmark Title
  - Title Textarea Scrollbar
  - URL Input
  - Bootstrap Tags Input
  - Folders as Tags
  - Custom Tags
  - Buttons
  - Media Queries
*/

/*====================================================
  Global
====================================================*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  background: #e4e7e6;
  font-size: 100%; }

body {
  color: rgba(36, 45, 50, 0.3);
  font-family: 'Source Sans Pro', sans-serif;
  padding-top: 3.125rem;
  padding-bottom: 20rem; }

.no-scroll {
  overflow: hidden; }

::selection {
  background: rgba(241, 129, 95, 1);
  color: white; }

ol, ul {
  list-style: none; }

/*====================================================
  Color Thief
====================================================*/

body canvas {
  display: none; }

/*====================================================
  Animations
====================================================*/

@-webkit-keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }}

@-webkit-keyframes fade-in-up {
  from { opacity: 0; -webkit-transform: translateY(1.25rem); }
  to { opacity: 1; -webkit-transform: translateY(0); }}

@-webkit-keyframes fade-in-down {
  from { opacity: 0; -webkit-transform: translateY(-2rem); }
  to { opacity: 1; -webkit-transform: translateY(0); }}

@-webkit-keyframes slide-right {
  from { -webkit-transform: translateX(-5rem); }
  to { -webkit-transform: translateX(0); }}

@-webkit-keyframes slide-left {
  from { -webkit-transform: translateX(5rem); }
  to { -webkit-transform: translateX(0); }}

@-webkit-keyframes slide-far-left {
  from { -webkit-transform: translateX(15rem); }
  to { -webkit-transform: translateX(0); }}

@-webkit-keyframes scale-up {
  from { -webkit-transform: scale(0); }
  to { -webkit-transform: scale(1); }}

/*====================================================
    Grid
====================================================*/

.grid {
  margin: 3.25rem auto 0;
  width: 72.5em;
  transition: -webkit-transform 250ms cubic-bezier(0.5, -0.75, 0.25, 1.5);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: bottom;
  -webkit-backface-visibility: hidden;
  z-index: 7000;
  -webkit-will-change: -webkit-transform, -webkit-filter; }

/* Effect for Edit Modal Background */

.scale-blur {
  -webkit-filter: blur(7px);
  -webkit-transform: scale(.98); }

/*====================================================
    Search
====================================================*/

.nav-wrap {
  -webkit-animation: fade-in-down 300ms ease-in-out;
  -webkit-transform-origin: center;
  background: white;
  box-shadow: 0 0 2rem 0.625rem rgba(0, 0, 0, 0.05);
  height: 3.125rem;
  position: fixed;
  top: 0;
  transition: -webkit-transform 250ms cubic-bezier(0.5, -0.75, 0.25, 1.5);
  width: 100%;
  z-index: 9000; }

.search-wrap {
  height: 3.125rem;
  text-align: left; }

.search-group {
  -webkit-animation: slide-right 500ms cubic-bezier(0.65, -1, 0.25, 1.75); }

.search-group input[type="search"] {
  -webkit-appearance: none;
  background: url(../images/search.svg) no-repeat;
  background-position: 1rem 1rem;
  background-size: 1.3rem;
  border: none;
  font: 400 1.35rem 'Source Sans Pro', sans-serif;
  height: 3.125rem;
  padding-left: 3rem;
  text-align: left;
  width: 100%; }

.search-group input[type="search"]:focus {
  outline: none; }

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: white url(../images/delete.svg) center no-repeat;
  cursor: pointer;
  height: 3.12rem;
  left: 0;
  position: absolute;
  width: 3.125rem; }

@media only screen and (max-width: 33.5rem) {
  .search-group input[type="search"] {
    width: 80%; } }

/*====================================================
    Typeahead Styling
====================================================*/

.typeahead-dropdown {
  background-color: rgba(36, 45, 50, 0.95);
  color: rgba(255, 255, 255, 0.95);
  max-height: 13.5rem;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  z-index: 10000; }

.typeahead-dropdown > li {
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  font-weight: 600;
  left: 0;
  line-height: 1.2;
  padding: .5rem 1rem;
  position: relative; }

.typeahead-dropdown > li a:focus {
  outline: none; }

.typeahead-dropdown > li:last-child {
  padding-bottom: .75rem; }

/* Highlights Matching Letters in Results */

strong {
  color: rgba(241, 129, 95, 1); }

.active {
  background: rgba(255, 255, 255, 0.075);
  color: rgba(241, 129, 95, 1); }

/*====================================================
    Animating Results as they generate
====================================================*/

.results-item {
  -webkit-animation: fade-in-up ease-out; }

.results-item:nth-child(1) {
  -webkit-animation-duration: 40ms; }

.results-item:nth-child(2) {
  -webkit-animation-duration: 60ms; }

.results-item:nth-child(3) {
  -webkit-animation-duration: 80ms; }

.results-item:nth-child(4) {
  -webkit-animation-duration: 100ms; }

.results-item:nth-child(5) {
  -webkit-animation-duration: 120ms; }

.results-item:nth-child(6) {
  -webkit-animation-duration: 140ms; }

/*====================================================
    Custom Scrollbars for search results
====================================================*/

.typeahead-dropdown::-webkit-scrollbar {
  width: 3px; }

.typeahead-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15); }

.typeahead-dropdown::-webkit-scrollbar-thumb {
  background: rgba(241, 129, 95, 1); }

/*====================================================
    Settings Overlay Menu
====================================================*/

.settings-toggle {
  -webkit-animation: slide-left 500ms cubic-bezier(0.65, -1, 0.25, 1.75);
  -webkit-filter: saturate(0);
  background: rgba(36, 45, 50, 0.05) url(../images/settings.svg) no-repeat center;
  background-size: 1.25rem 1.25rem;
  cursor: pointer;
  display: block;
  height: 3.125rem;
  position: fixed;
  right: -3px;
  top: 0;
  width: 3.125rem;
  z-index: 9010;
  transition: -webkit-filter 200ms ease-in-out,
              width 300ms 150ms cubic-bezier(0.65, -1, 0.25, 1.75),
              background-position 300ms 150ms cubic-bezier(0.65, -1, 0.25, 1.75); }

.settings-toggle:hover {
  width: 6.5rem;
  -webkit-filter: saturate(1);
  background-position: 15% center; }

.settings-toggle:after {
  content: "Settings";
  margin-left: 2.5rem;
  line-height: 3rem;
  font-size: .9rem;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateX(5rem);
  transition: -webkit-transform 300ms 150ms cubic-bezier(0.65, -1, 0.25, 1.5),
              opacity 300ms 150ms ease,
              visibility 300ms 150ms ease; }

.settings-toggle:hover:after {
  -webkit-transform: translateX(0);
  visibility: visible;
  opacity: 1; }

.settings {
  background: rgba(36, 45, 50, 0.95);
  height: 100vh;
  list-style: none;
  opacity: 0;
  padding: 0 8%;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 9020;
  -webkit-transform-origin: center;
  -webkit-transform: scale(0.8);
  transition: opacity 200ms ease, visibility 200ms ease,
              -webkit-transform 200ms cubic-bezier(0, 0, 0, 1);
  -webkit-will-change: opacity, visibility, -webkit-transform; }

.open {
  -webkit-transform: scale(1);
  visibility: visible;
  opacity: 1; }

.close {
  content: url(../images/close.svg);
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0; }

.settings-wrap {
  margin: 25vh auto;
  min-height: 16rem;
  position: relative;
  width: 35rem; }

.col-1,
.col-2 {
  display: inline-block;
  width: 14rem;
  vertical-align: top; }

.col-2 {
  width: 17rem; }

.settings ul {
  list-style: none; }

.settings ul li,
.checkbox label,
.checkbox input,
.credits {
  cursor: pointer;
  color: white;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 6vh;
  vertical-align: middle; }

.credits {
  cursor: default;
  vertical-align: bottom; }

.makers {
  font-size: 80%;
  position: absolute;
  bottom: 2rem;
  right: 3rem;
}

.settings a {
  color: white;
  text-decoration: none; }

/*====================================================
    Settings & Link Icons
====================================================*/

.docs:before,
.feedback:before,
.review:before,
.donate:before,
.email:before,
.website:before {
  margin-right: 1rem;
  vertical-align: middle; }

.docs:before {
  content: url(../images/docs.svg); }

.feedback:before {
  content: url(../images/feedback.svg); }

.review:before {
  content: url(../images/review.svg); }

.donate:before {
  content: url(../images/donate.svg); }

.email:before {
  content: url(../images/contact.svg); }

.website:before {
  content: url(../images/link.svg); }

.important {
  color: rgba(241, 129, 95, 1) !important;
  font-weight: 400; }

/*====================================================
    Custom Checkboxes
====================================================*/

input[type=checkbox].css-checkbox {
  display: none; }

input[type=checkbox].css-checkbox + label.css-label {
  padding-left: 2rem;
  height: 1.375rem; }

input[type=checkbox].css-checkbox:checked + label.css-label {
  background: url(../images/checkbox-checked.svg) 0 -2px no-repeat; }

label.css-label {
  background: url(../images/checkbox.svg) 0 -2px no-repeat; }

/*====================================================
    Settings List Animation
====================================================*/

.open .col-1 li,
.open .col-2 div {
  -webkit-animation: slide-far-left ease-out;
  -webkit-will-change: -webkit-transform; }

.open .col-1 li:nth-child(1),
.open .col-2 div:nth-child(1) {
  -webkit-animation-duration: 200ms; }

.open .col-1 li:nth-child(2),
.open .col-2 div:nth-child(2) {
  -webkit-animation-duration: 220ms; }

.open .col-1 li:nth-child(3),
.open .col-2 div:nth-child(3) {
  -webkit-animation-duration: 240ms; }

.open .col-1 li:nth-child(4),
.open .col-2 div:nth-child(4) {
  -webkit-animation-duration: 260ms; }

.open .col-1 li:nth-child(5),
.open .col-2 div:nth-child(5) {
  -webkit-animation-duration: 280ms; }

.open .col-1 li:nth-child(6),
.open .col-2 div:nth-child(6) {
  -webkit-animation-duration: 300ms; }

/*====================================================
    Sort
====================================================*/

.sort {
  font: 400 .85rem/1rem 'Source Sans Pro', sans-serif;
  text-align: right; }

.sort p {
  color: rgba(36, 45, 50, 0.8); }

.sort p, .sort a {
  display: inline-block;
  list-style: none;
  margin-right: 1rem; }

.sort a {
  cursor: pointer;
  transition: color 250ms ease; }

.sort a:hover, .sort a:focus {
  color: rgba(241, 129, 95, 1);
  outline: none; }

.sort-active {
  border-bottom: 1px solid; }

/*====================================================
    Tags Dropdown
====================================================*/

.tags-wrap {
  float: left;
  margin-left: 1rem;
  margin-top: -.25rem;
  position: relative;
  text-align: left;
  z-index: 8000; }

.tags-toggle {
  -webkit-filter: saturate(0);
  background: url(../images/tags.svg) no-repeat center;
  background-size: contain;
  cursor: pointer;
  display: block;
  height: 1.25rem;
  transition: -webkit-filter 100ms ease-in-out;
  width: 1.25rem; }

.tags-toggle:hover {
  -webkit-filter: saturate(1); }

.open > .tags-list {
  -webkit-transform: scale(1);
  opacity: 1;
  visibility: visible; }

.tags-list {
  -webkit-transform-origin: top left;
  -webkit-transform: scale(0.25);
  background: rgba(36, 45, 50, 1);
  border-radius: 3px;
  box-shadow: 0 10px 16px 0 rgba(36, 45, 50, 0.15);
  color: white;
  left: 2rem;
  list-style: none;
  max-height: 24rem;
  min-width: 11rem;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: .5rem 0;
  position: absolute;
  top: -0.5rem;
  transition: visibility 100ms ease, opacity 200ms ease, -webkit-transform 200ms cubic-bezier(0.6, 0, 0.2, 1.5);
  visibility: hidden; }

.tags-list > li > a {
  color: white;
  cursor: pointer;
  display: block;
  font: 400 .85rem/1.2 "Source Sans Pro", sans-serif;
  padding: .25rem 1rem;
  transition: none; }

.tags-list > li > a:hover,
.tags-list > li > a:focus {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(241, 129, 95, 1); }

/*====================================================
    Tags Dropdown Scrollbar
====================================================*/

.tags-list::-webkit-scrollbar {
  width: 3px; }

.tags-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15); }

.tags-list::-webkit-scrollbar-thumb {
  background: rgba(241, 129, 95, 1); }

/*====================================================
    Link Panel Grid Layout
====================================================*/

.list-bookmarks {
  font-size: 0;
  margin-top: 2.25rem;
  -webkit-transform: translate3d(0,0,0); } /*hack to keep keyboard navigation from making grid choppy*/

.list-bookmarks li {
  -webkit-animation: fade-in-up 300ms ease;
  background: transparent;
  display: inline-block;
  -webkit-transform: translate3d(0,0,0);
  list-style: none;
  margin: 1rem;
  vertical-align: top;
  width: 12.5rem;
  -webkit-will-change: -webkit-transform, opacity; }

.list-bookmarks li:active {
  -webkit-transform: scale(.99);}

/* Grid Panel Animation */

.list-bookmarks li:nth-child(3n+3),
.list-bookmarks li:nth-child(5n+1) {
  -webkit-animation-duration: 500ms; }

/*====================================================
    Link Panels
====================================================*/

.card {
  border-radius: 3px;
  box-shadow: 0 2px 4px -2px rgba(36, 45, 50, 0.2);
  overflow: hidden;
  position: relative;
  top: 0;
  -webkit-transform: translateY(0);
  -webkit-backface-visibility: hidden !important;
  transition: box-shadow 300ms cubic-bezier(0.65, -1, 0.25, 2.5),
              -webkit-transform 300ms cubic-bezier(0.65, -1, 0.25, 2.5);
  -webkit-will-change: -webkit-transform, box-shadow; }

.card:hover,
.card-primary {
  -webkit-transform: translateY(-0.3rem);
  box-shadow: 0 10px 16px -4px rgba(36, 45, 50, 0.15); }

.card:before {
  background: rgba(241, 129, 95, 1);
  bottom: 0;
  content: " ";
  display: inline-block;
  height: 0.25rem;
  position: absolute;
  -webkit-transform: scaleY(0);
  transform-origin: bottom;
  transition: -webkit-transform 300ms cubic-bezier(0.65, -1, 0.25, 3);
  width: 12.5rem;
  z-index: 7020;
  -webkit-will-change: -webkit-transform; }

.card-primary:before {
  -webkit-transform: scaleY(1); }

.card:focus {
  outline: none; }

/*====================================================
    Transparent Element to Hold Link
====================================================*/

.bookmark-link {
  bottom: 0;
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
  z-index: 7010; }

/*====================================================
    Quick Delete Rollover X Button - NEEDS TO BE REVISED without using .card:before
====================================================*/

/*.card:before; {
  content: url(../images/quick-delete.svg);
  height: 2rem;
  position: absolute;
  right: 0;
  opacity: 0;
  text-align: center;
  z-index: 7999;
  top: 0;
  width: 2rem;
  -webkit-transform: translateY(-2rem);
  transition: opacity 400ms ease, -webkit-transform 200ms cubic-bezier(0, 0, 0.25, 1.5); }

.card:hover:before {
  opacity: 1;
  -webkit-transform: translateY(0); }*/

/*====================================================
    Empty Element to Hold Delete Function
====================================================*/

/*.quick-delete {
  height: 2rem;
  position: absolute;
  cursor: pointer;
  color: white;
  display: block;
  right: 0;
  z-index: 7999;
  top: 0;
  width: 2rem; }*/

/*====================================================
    Edit Rollover Icon
====================================================*/

.card:after {
  content: url(../images/edit-gray.svg);
  height: 2rem;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 9.375rem;
  width: 2rem;
  -webkit-transform: translateY(1rem);
  transition: opacity 200ms ease, -webkit-transform 200ms cubic-bezier(0, 0, 0.25, 1.5); }

.card:hover:after {
  opacity: 1;
  -webkit-transform: translateY(0); }

/*====================================================
    Thumbnail / Screenshot
====================================================*/

.thumbnail-loading,
.thumbnail {
  background-position: center top !important;
  background-repeat: no-repeat !important;
  height: 9.375rem; }

.thumbnail-loading {
  background-size: 24px 24px !important;
  background-position: center !important; }

/* Forcing Cover and Hiding Backface Keeps Transitions Smooth */

.thumbnail {
  background-size: cover !important; }

.thumbnail:after,
.thumbnail-loading:after {
  background: rgba(36, 45, 50, 0.2);
  display: block;
  height: 100%;
  width: 100%;
  content: "";
  position: absolute;
  top: 0; }

/*====================================================
    Styles for Hide Thumbnails Option
====================================================*/

.card-small .thumbnail-loading {
  background-size: 18px 18px !important; }

.card-small .thumbnail-loading,
.card-small .thumbnail {
  height: 1.75rem; }

.card-small:after {
  top: 1.75rem; }

.card-small .edit-toggle {
  top: 1.75rem; }

/*====================================================
    Special Styles for Links to PDFs
====================================================*/

.thumbnail[title$=".pdf"] {
  background: white url(../images/pdf.svg) !important;
  background-position: center !important; }

.card-small .thumbnail[title$=".pdf"] {
  background: rgba(241, 129, 95, 1) !important; }

.favicon[src$=".pdf?defaulticon=lightpng"] {
  content: url(../images/link.svg); }

/*====================================================
    Special Styles for Links to local Chrome urls
====================================================*/

.thumbnail[title*="chrome://"],
.thumbnail[title*="chrome-extension://"] {
  background: url(../images/chrome.svg) !important;
  background-position: center !important; }

.card-small .thumbnail[title*="chrome://"],
.card-small .thumbnail[title*="chrome-extension://"] {
  background: rgba(241, 129, 95, 1) !important; }

.favicon[src*="chrome://"],
.favicon[src*="chrome-extension://"] {
  content: url(../images/chrome-32.png); }

/*====================================================
    Special Styles for Links to Dewey
====================================================*/

.thumbnail[title*="aahpfefkmihhdabllidnlipghcjgpkdm"] {
  background: url(../images/dewey-small.png) !important;
  -webkit-filter: brightness(1) !important;
  background-size: 12.5rem 9.375rem !important; }

.card-small .thumbnail[title*="aahpfefkmihhdabllidnlipghcjgpkdm"] {
  background: rgba(36, 45, 50, 1); !important; }

.favicon[src*="aahpfefkmihhdabllidnlipghcjgpkdm"] {
  content: url(http://deweyapp.io/images/favicon.png); }

/*====================================================
    Link Details
====================================================*/

.details {
  background: white;
  cursor: pointer;
  padding: 1rem;
  text-decoration: none;
  position: relative;
  width: 100%; }

.details h2 {
  color: rgba(36, 45, 50, 0.8);
  font: 700 1rem/1rem 'Source Sans Pro', sans-serif;
  height: auto;
  overflow: hidden;
  padding-bottom: .5rem;
  width: 100%; }

.favicon {
  height: 16px;
  margin-bottom: .5rem;
  width: 16px; }

/*====================================================
    Link Tags
====================================================*/

.tag-links {
  margin-top: 1rem;
  position: relative;
  z-index: 7020; }

.tag-links a {
  color: rgba(36, 45, 50, 0.35);
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  font-size: 0.75rem;
  padding-bottom: 0.4rem;
  padding-right: 0.35rem;
  transition: color 250ms ease; }

.tag-links a:hover {
  color: rgba(241, 129, 95, 1); }

.tag-links .badge-custom {
  color: rgba(36, 45, 50, 0.7); }

/*====================================================
    Edit Modal
====================================================*/

.edit-toggle {
  content: url(../images/edit.svg);
  background: white;
  cursor: pointer;
  height: 2rem;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 9.375rem;
  width: 2rem;
  z-index: 7020;
  transition: opacity 400ms ease; }

.edit-toggle:hover {
  opacity: 1; }

.modal-open {
  overflow: hidden; }

.modal {
  background: rgba(36, 45, 50, 0.95);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  overflow-y: scroll;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 300ms ease;
  z-index: 10000; }

.modal.in {
  opacity: 1; }

.modal-dialog {
  height: auto;
  margin: 20vh auto;
  max-width: 38rem;
  z-index: 10010;
  opacity: 0;
  -webkit-transform: translate3d(0, 6rem, 0) perspective(400px) rotateY(160deg) scale(0.5);
  transition: -webkit-transform 350ms ease-out, opacity 350ms ease;
  -webkit-backface-visibility: hidden; }

.modal.in .modal-dialog {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotateY(0deg) scale(1); }

.modal-body {
  position: relative;
  padding: 1.5rem; }

.modal-footer {
  text-align: right; }

/*====================================================
    Bookmark Title
====================================================*/

.title-input {
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 1);
  font: 700 2.35rem/1 "Source Sans Pro";
  margin-bottom: .75rem;
  min-height: 5rem;
  resize: none;
  width: 100%; }

.title-input,
.url-input {
  transition: color 200ms ease, background 200ms ease; }

.title-input:hover,
.url-input:hover {
  background: rgba(241, 129, 95, 0.1); }

.title-input:focus,
.url-input:focus {
  background: transparent;
  color: rgba(241, 129, 95, 1);
  outline: none; }

.title-input::-webkit-input-placeholder {
  color: rgba(36, 45, 50, 0.25); }

/*====================================================
    Title Textarea Scrollbar
====================================================*/

.title-input::-webkit-scrollbar {
  width: 3px; }

.title-input::-webkit-scrollbar-thumb:vertical {
  background-color: rgba(241, 129, 95, 1); }

/*====================================================
    URL Input
====================================================*/

.launch {
  -webkit-filter: saturate(0);
  content: url(../images/launch.svg);
  margin-bottom: -2.25rem;
  margin-left: .75rem;
  transition: -webkit-filter 200ms ease, opacity 200ms ease;
  -webkit-backface-visibility: hidden; }

.launch:hover {
  -webkit-filter: saturate(1);
  opacity: 1; }

.url-input {
  -webkit-appearance: none;
  background: transparent;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
  border-left: none;
  border-right: none;
  border-top: 1px dotted rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.25);
  font-size: .825rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  padding-left: 2.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

.url-input:hover {
  color: rgba(255, 255, 255, 0.5); }

/*====================================================
    Bootstrap Tags Input
====================================================*/

.bootstrap-tagsinput {
  background: transparent;
  display: inline;
  padding: 0; }

.custom-tag-input {
  -webkit-appearance: none;
  outline: none; }

.custom-tag-input input {
  background: transparent;
  border-radius: 3px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 1);
  display: inline-block;
  font: 700 1rem/1 "Source Sans Pro";
  height: 3.25rem;
  margin-bottom: 1.25rem;
  margin-right: 1.25rem;
  outline: none;
  padding: 1rem;
  text-align: left;
  transition: border 200ms ease;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased; }

.custom-tag-input input:focus {
  border: 3px solid rgba(241, 129, 95, 1); }

.custom-tag-input input::-webkit-input-placeholder {
  -webkit-transform: translateY(2px);
  color: rgba(255, 255, 255, 0.25);
  transition: color 200ms ease; }

.custom-tag-input input:focus::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.15); }

.custom-tag-input .tag [data-role="remove"] {
  border: none;
  cursor: pointer;
  margin-left: .5rem; }

.custom-tag-input .tag [data-role="remove"]:after {
  content: "╳";
  padding: 1px 2px; }

/*====================================================
    Folders as Tags
====================================================*/

.tags {
  margin: 1rem 0; }

.list-inline {
  display: inline;
  font-size: 0;
  list-style: none;
  padding-left: 0; }

.list-inline > li {
  display: inline; }

.tag {
  -webkit-font-smoothing: antialiased;
  background: transparent;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  font: 700 1rem/1 "Source Sans Pro";
  height: 3.25rem;
  margin-bottom: 1.25rem;
  margin-right: 1.25rem;
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap; }

.tag:before {
  content: url(../images/folder.svg);
  display: block;
  float: left;
  margin-right: .75rem;
  margin-top: 1px;
  width: 20px; }

.tag:empty {
  display: none; }

/*====================================================
    Custom Tags
====================================================*/

.custom-tags {
  display: inline; }

.custom-tag {
  background-color: rgba(255, 255, 255, 1) !important;
  color: rgba(36, 45, 50, 1);
  cursor: default;
  -webkit-animation: scale-up 200ms cubic-bezier(0.65, 0, 0.75, 1.5); }

.custom-tag:before {
  content: url(../images/tags-blue.svg);
  margin-top: 1px; }

.custom-tag a:hover {
  cursor: pointer;
  opacity: 0.5;
  text-decoration: none; }

.custom-tag input[type=text] {
  height: auto;
  padding: 2px;
  width: 6.25rem; }

/*====================================================
    Buttons
====================================================*/

.save,
.cancel,
.delete {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: color 200ms ease-out; }

.save {
  -webkit-transform-origin: center;
  background: rgba(241, 129, 95, 1);
  border-radius: 3px;
  color: white;
  display: inline-block;
  font: 700 1rem/1 "Source Sans Pro";
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1rem;
  text-align: center;
  transition: -webkit-transform 100ms cubic-bezier(0.65, 0, 0.75, 1.5);
  width: 6.25rem;
  -webkit-font-smoothing: antialiased; }

.save:hover {
  -webkit-transform: scale(1.05); }

.save:focus,
.save:active {
  -webkit-transform: scale(1);
  transition-duration: 10ms; }

.cancel {
  color: rgba(255, 255, 255, 0.5);
  background: none;
  margin-right: 20px; }

.cancel:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline; }

.delete {
  color: rgba(230, 61, 61, 0.5);
  float: left;
  line-height: 3.25; }

.delete:hover {
  color: rgba(230, 61, 61, 1);
  text-decoration: underline; }

/*====================================================
    Media Queries
====================================================*/

@media only screen and (min-width: 135rem) {

  html { font-size: 125%; }

  .thumbnail[title*="aahpfefkmihhdabllidnlipghcjgpkdm"] { background: url(../images/dewey-big.png) !important; }}

@media only screen and (min-width: 100rem) {

  .grid { width: 87rem; }}

@media only screen and (max-width: 72.5rem) {

  .grid { width: 58rem; }}

@media only screen and (max-width: 58rem) {

  .grid { width: 43.5rem; }}

@media only screen and (max-width: 43.5rem) {

  .grid { width: 29rem; }}

@media only screen and (max-width: 29rem) {

  .grid { width: 12.5rem; }

  .settings-wrap { margin: 20px; width: auto; }

  .list-bookmarks li { margin: 1.25rem 0 0 0; }

  .tags-wrap { margin-left: 0; }

  .tags-list { left: 0; width: 12.5rem; }

  .sort p, .sort a { margin-right: .5rem; }

  .sort a:last-child { margin-right: 0; }}
