@charset "UTF-8";
@font-face {
  font-family: "Roboto slab";
  src: url("/fonts/RobotoSlab-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #999 #444;
  scrollbar-width: thin;
}
html .small-text {
  font-size: 14px;
}
html .large-text {
  font-size: 18px;
}

body {
  height: 100%;
  line-height: 1.5;
  color: #eee;
  background-color: #252526;
}

@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top); /* Reserve space for the status bar */
  }
}

#app {
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #6dda8b;
  font-family: "Roboto Slab", sans-serif;
  font-weight: 400;
}

h1 {
  font-size: 3em;
}
@media (max-width: 600px) {
  h1 {
    font-size: 2.5em;
  }
}

input,
textarea,
select,
button,
option {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #eee;
}
.small-text input,
.small-text textarea,
.small-text select,
.small-text button,
.small-text option {
  font-size: 14px;
}
.large-text input,
.large-text textarea,
.large-text select,
.large-text button,
.large-text option {
  font-size: 18px;
}

input[type=text] {
  -webkit-appearance: none;
}

select,
button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

option {
  color: #444;
}

a {
  text-decoration: none;
  color: inherit;
}

.main-content {
  background-color: #343338;
  margin-left: 250px;
  padding: 10px 10px 50px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 800px) {
  .main-content {
    margin-left: 0;
  }
}
.main-content__cards {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 1 330px;
}

.scrollbar {
  overflow-y: scroll;
  scrollbar-color: #999 #444;
  scrollbar-width: thin;
}
.scrollbar::-webkit-scrollbar {
  width: 2px;
  background-color: #444;
}
.scrollbar--wide::-webkit-scrollbar {
  width: 5px;
}
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #999;
}

.sidebar {
  background-color: #252526;
  width: 250px;
  -webkit-overflow-scrolling: touch;
}
.standalone .sidebar.h_60px_at800px {
  height: 70px;
}
.standalone .sidebar .sidebar__logo {
  padding-top: 25px;
}
.sidebar__expander {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6em;
  width: 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}
.sidebar__logo {
  font-family: "Roboto Slab", sans-serif;
  color: #6dda8b;
  border-bottom: 1px solid #6dda8b;
}
.sidebar__list {
  list-style: none;
}
.sidebar__selected {
  color: #6abeff;
  font-weight: bold;
}
.sidebar__menu {
  color: #c7581b;
}
.sidebar__tags {
  color: #c7581b;
}
.sidebar__hamburger {
  position: fixed;
  top: 0;
  right: 0;
  -webkit-appearance: none;
  background-color: transparent;
  height: 60px;
  width: 60px;
  border: none;
  z-index: 2;
}
.standalone .sidebar__hamburger {
  top: 12px;
}
.sidebar__hamburger--inactive {
  border-top: 3px solid #6dda8b;
  border-bottom: 3px solid #6dda8b;
  transition: opacity linear 0.2s;
  width: 25px;
  height: 21px;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
.sidebar__hamburger--expanded .sidebar__hamburger--inactive {
  opacity: 0;
}
.sidebar__hamburger--inactive:before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  border-top: 3px solid #6dda8b;
  content: "";
}
.sidebar__hamburger--active {
  opacity: 0;
  transition: opacity linear 0.2s;
  position: relative;
  top: 2px;
}
.sidebar__hamburger--expanded .sidebar__hamburger--active {
  opacity: 1;
}

.card {
  background-color: #2e2d31;
  border: 1px solid #329ad9;
  word-break: break-word;
}
.card__section {
  border-top: 1px solid #329ad9;
}
.card__section--tags {
  color: #6abeff;
}
.card__section--withSelect {
  position: relative;
}
.card__section--withSelect:after {
  content: ". . .";
  position: absolute;
  pointer-events: none;
  right: 20px;
  top: 25px;
}
.card__status {
  color: #6abeff;
}
.card__more-note {
  background-color: #329ad9;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1.1em;
  padding-bottom: 2px;
}
.card__label {
  color: #6abeff;
  font-weight: bold;
  font-size: 0.8em;
}
.card__url {
  color: rgba(0, 0, 0, 0.6);
  background-color: #329ad9;
}
.card__input {
  min-height: 24px;
}
.card__input:focus {
  outline: none;
}
.card__input ol, .card__input ul {
  margin-left: 20px !important;
}
.card__save {
  color: #6abeff;
  border: none;
  border-right: 1px solid #329ad9;
}
.card__cancel {
  color: #c7581b;
}
.card__remove {
  color: #d849bc;
}
.card__theme-span {
  display: inline-block;
  margin: 15px 10px 5px 0;
}
.card__colorRadio {
  display: none;
}
.card__colorRadio:checked + label:before {
  content: "✓";
  color: white;
  -webkit-appearance: none;
  font-size: 25px;
  line-height: 12px;
}
.card__colorLabel {
  margin-right: 40px;
  position: relative;
}
.card__colorLabel:before {
  box-sizing: border-box;
  content: " ";
  width: 20px;
  height: 20px;
  color: #329ad9;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  color: #eee;
}
.card__dropdown {
  padding: 0;
  position: relative;
}
.card__dropdown-label {
  position: absolute;
  top: 10px;
  pointer-events: none;
  left: 10px;
}
.card__dropdown-select {
  display: block;
  outline: none;
  width: 100%;
  border: none;
  background-color: transparent;
  padding: 30px 10px 10px;
}
.card__dropdown-select[disabled] {
  color: #888;
}
.card__colorLabel--blue:before {
  border: 1px solid #329ad9;
  background-color: #329ad9;
}
.card.keep-card,
.card .card-btn {
  background-color: rgba(50, 154, 217, 0.07);
}
.card__colorLabel--orange:before {
  border: 1px solid #e28446;
  background-color: #e28446;
}
.card--orange {
  border: 1px solid #e28446;
}
.card--orange.keep-card,
.card--orange .card-btn {
  background-color: rgba(226, 132, 70, 0.07);
  border-color: #e28446;
}
.card--orange.card__url {
  background-color: #e28446;
}
.card--orange .card__section {
  border-top: 1px solid #e28446;
}
.card--orange .card__section--tags {
  color: #e28446;
}
.card--orange .card__more-note {
  background-color: #e28446;
}
.card--orange .card__status,
.card--orange .card__label {
  color: #e28446;
}
.card__colorLabel--purple:before {
  border: 1px solid #d849bc;
  background-color: #d849bc;
}
.card--purple {
  border: 1px solid #d849bc;
}
.card--purple.keep-card,
.card--purple .card-btn {
  background-color: rgba(216, 73, 188, 0.07);
  border-color: #d849bc;
}
.card--purple.card__url {
  background-color: #d849bc;
}
.card--purple .card__section {
  border-top: 1px solid #d849bc;
}
.card--purple .card__section--tags {
  color: #d849bc;
}
.card--purple .card__more-note {
  background-color: #d849bc;
}
.card--purple .card__status,
.card--purple .card__label {
  color: #d849bc;
}
.card__colorLabel--green:before {
  border: 1px solid #00af3c;
  background-color: #00af3c;
}
.card--green {
  border: 1px solid #00af3c;
}
.card--green.keep-card,
.card--green .card-btn {
  background-color: rgba(0, 175, 60, 0.07);
  border-color: #00af3c;
}
.card--green.card__url {
  background-color: #00af3c;
}
.card--green .card__section {
  border-top: 1px solid #00af3c;
}
.card--green .card__section--tags {
  color: #00af3c;
}
.card--green .card__more-note {
  background-color: #00af3c;
}
.card--green .card__status,
.card--green .card__label {
  color: #00af3c;
}
.card__colorLabel--grey:before {
  border: 1px solid #aaaaaa;
  background-color: #aaaaaa;
}
.card--grey {
  border: 1px solid #aaaaaa;
}
.card--grey.keep-card,
.card--grey .card-btn {
  background-color: rgba(170, 170, 170, 0.07);
  border-color: #aaaaaa;
}
.card--grey.card__url {
  background-color: #aaaaaa;
}
.card--grey .card__section {
  border-top: 1px solid #aaaaaa;
}
.card--grey .card__section--tags {
  color: #aaaaaa;
}
.card--grey .card__more-note {
  background-color: #aaaaaa;
}
.card--grey .card__status,
.card--grey .card__label {
  color: #aaaaaa;
}
.card__colorLabel--black:before {
  border: 1px solid #000;
  background-color: #000;
}
.card--black {
  border: 1px solid #000;
}
.card--black.keep-card,
.card--black .card-btn {
  background-color: rgba(0, 0, 0, 0.07);
  border-color: #000;
}
.card--black.card__url {
  background-color: #000;
  color: #888;
}
.card--black .card__section {
  border-top: 1px solid #000;
}
.card--black .card__section--tags {
  color: #888;
}
.card--black .card__more-note {
  background-color: #000;
}
.card--black .card__status,
.card--black .card__label {
  color: #888;
}
.card__colorLabel--yellow:before {
  border: 1px solid #c1ac12;
  background-color: #c1ac12;
}
.card--yellow {
  border: 1px solid #c1ac12;
}
.card--yellow.keep-card,
.card--yellow .card-btn {
  background-color: rgba(193, 172, 18, 0.07);
  border-color: #c1ac12;
}
.card--yellow.card__url {
  background-color: #c1ac12;
}
.card--yellow .card__section {
  border-top: 1px solid #c1ac12;
}
.card--yellow .card__section--tags {
  color: #c1ac12;
}
.card--yellow .card__more-note {
  background-color: #c1ac12;
}
.card--yellow .card__status,
.card--yellow .card__label {
  color: #c1ac12;
}
.card__colorLabel--red:before {
  border: 1px solid #ab1f1f;
  background-color: #ab1f1f;
}
.card--red {
  border: 1px solid #ab1f1f;
}
.card--red.keep-card,
.card--red .card-btn {
  background-color: rgba(171, 31, 31, 0.07);
  border-color: #ab1f1f;
}
.card--red.card__url {
  background-color: #ab1f1f;
}
.card--red .card__section {
  border-top: 1px solid #ab1f1f;
}
.card--red .card__section--tags {
  color: #ab1f1f;
}
.card--red .card__more-note {
  background-color: #ab1f1f;
}
.card--red .card__status,
.card--red .card__label {
  color: #ab1f1f;
}
.card__colorLabel--neon:before {
  border: 1px solid #aa70ea;
  background-color: #aa70ea;
}
.card--neon {
  border: 1px solid #aa70ea;
}
.card--neon.keep-card,
.card--neon .card-btn {
  background-color: rgba(170, 112, 234, 0.07);
  border-color: #aa70ea;
}
.card--neon.card__url {
  background-color: #aa70ea;
}
.card--neon .card__section {
  border-top: 1px solid #aa70ea;
}
.card--neon .card__section--tags {
  color: #aa70ea;
}
.card--neon .card__more-note {
  background-color: #aa70ea;
}
.card--neon .card__status,
.card--neon .card__label {
  color: #aa70ea;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #bbb;
  border-top-color: transparent;
  border-radius: 50%;
  animation: rotate 1s linear infinite;
}

.spinner-sidebar {
  width: 23px;
  height: 23px;
  border-color: #6dda8b;
  border-top-color: transparent;
  top: 15px;
  right: 15px;
}
@media (max-width: 800px) {
  .spinner-sidebar {
    top: 17px;
    left: 15px;
    right: 0;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.checkbox {
  position: relative;
  display: block;
  padding: 5px 0;
  cursor: pointer;
}
.checkbox__input {
  opacity: 0;
  position: absolute;
}
.checkbox__input:checked + .checkbox__text:before {
  content: "✓";
}
.checkbox__text {
  padding-left: 30px;
  display: inline-block;
}
.checkbox__text:before {
  display: block;
  position: absolute;
  left: 0;
  text-align: center;
  border: 1px solid #6abeff;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  content: " ";
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 16px;
}
.card--orange .checkbox__text:before {
  border-color: #e28446;
}
.card--purple .checkbox__text:before {
  border-color: #d849bc;
}
.card--green .checkbox__text:before {
  border-color: #00af3c;
}
.card--grey .checkbox__text:before {
  border-color: #aaaaaa;
}
.card--black .checkbox__text:before {
  border-color: #777;
}
.card--yellow .checkbox__text:before {
  border-color: #c1ac12;
}
.card--red .checkbox__text:before {
  border-color: #ab1f1f;
}
.card--neon .checkbox__text:before {
  border-color: #aa70ea;
}

/*# sourceMappingURL=site.css.map*/.pl_7px { padding-left: 7px; }.w_50\% { width: 50%; }.p_10px { padding: 10px; }.color_\#aaa { color: #aaa; }.d_block { display: block; }.w_100\% { width: 100%; }.bgc_transparent { background-color: transparent; }.b_none { border: none; }.w_40px { width: 40px; }.f_right { float: right; }.op_0 { opacity: 0; }.mr_45px { margin-right: 45px; }.ol_none { outline: none; }.f_left { float: left; }.w_34\% { width: 34%; }.td_underline { text-decoration: underline; }.d_inline-block { display: inline-block; }.w_33\% { width: 33%; }.br_1px_solid_\@cardBorderColor { border-right: 1px solid #329ad9; }.h_100\% { height: 100%; }.ta_center { text-align: center; }.va_top { vertical-align: top; }.mw_500px { max-width: 500px; }.po_relative { position: relative; }.color_\@blue3Color { color: #6abeff; }.m_5px_10px_-7px { margin: 5px 10px -7px; }.fs_0\.7em { font-size: 0.7em; }.color_\@dark2Color { color: #2e2d31; }.p_10px_3px_0_10px { padding: 10px 3px 0 10px; }.p_5px_10px { padding: 5px 10px; }.o_hidden { overflow: hidden; }.p_10px_0_10px { padding: 10px 0 10px; }.p_10px_0_50px { padding: 10px 0 50px; }.m_0_10px { margin: 0 10px; }.radius_0 { border-radius: 0; }.bgc_\@dark2Color { background-color: #2e2d31; }.p_7px { padding: 7px; }.b_1px_solid_\#444 { border: 1px solid #444; }.d_flex { display: flex; }.mt_10px { margin-top: 10px; }.fl_1 { flex: 1; }.fld_column { flex-direction: column; }.br_1px_solid_\@sidebarBorderColor { border-right: 1px solid #4a4a4a; }.bl_1px_solid_\@sidebarBorderColor { border-left: 1px solid #4a4a4a; }.blw_0\:first-child:first-child { border-left-width: 0; }.brw_0\:last-child:last-child { border-right-width: 0; }.fs_1\.1rem { font-size: 1.1rem; }.fl_0 { flex: 0; }.m_10px { margin: 10px; }.ol_none\:focus:focus { outline: none; }.color_\@cardBorderColor { color: #329ad9; }.mt_30px { margin-top: 30px; }.p_20px { padding: 20px; }.w_70px { width: 70px; }.pt_16px { padding-top: 16px; }.h_22px { height: 22px; }.w_22px { width: 22px; }.mr_10px { margin-right: 10px; }.ta_right { text-align: right; }.p_5px_0 { padding: 5px 0; }.w_calc\(100\%_-_70px\) { width: calc(100% - 70px); }.bb_1px_dotted_\#444 { border-bottom: 1px dotted #444; }.bb_none\:last-child:last-child { border-bottom: none; }.p_7px_0_10px { padding: 7px 0 10px; }.pb_0\:last-child:last-child { padding-bottom: 0; }.pt_0\:first-child:first-child { padding-top: 0; }.pl_10px { padding-left: 10px; }.m_20px_0_0 { margin: 20px 0 0; }.b_1px_solid_\@cardBorderColor { border: 1px solid #329ad9; }.w_106px { width: 106px; }.p_0_15px { padding: 0 15px; }.bl_1px_solid_\@cardBorderColor { border-left: 1px solid #329ad9; }.mt_15px { margin-top: 15px; }.color_\@orangeColor { color: #c7581b; }.mb_10px { margin-bottom: 10px; }.mb_25px { margin-bottom: 25px; }.color_\#6abeff { color: #6abeff; }.fs_0\.9rem { font-size: 0.9rem; }.color_\#c7581b { color: #c7581b; }.zi_2 { z-index: 2; }.pb_60px { padding-bottom: 60px; }.po_fixed { position: fixed; }.top_0 { top: 0; }.h_100vh { height: 100vh; }.d_none { display: none; }.p_15px_15px_17px { padding: 15px 15px 17px; }.m_0_15px { margin: 0 15px; }.fs_19px { font-size: 19px; }.top_1px { top: 1px; }.mb_30px { margin-bottom: 30px; }.bb_1px_solid_\@sidebarBorderColor { border-bottom: 1px solid #4a4a4a; }.mb_15px { margin-bottom: 15px; }.pl_0 { padding-left: 0; }.cursor_pointer { cursor: pointer; }.bt_1px_solid_\@sidebarBorderColor { border-top: 1px solid #4a4a4a; }.bgc_\#2f2f2f { background-color: #2f2f2f; }@media screen and (max-width:1700px) { .w_70\%_at1700px { width: 70%; }}@media screen and (max-width:1100px) { .w_100\%_at1100px { width: 100%; }}@media screen and (max-width:800px) { .pt_60px_at800px { padding-top: 60px; }.w_100\%_at800px { width: 100%; }.h_60px_at800px { height: 60px; }.o_hidden_at800px { overflow: hidden; }.d_block_at800px { display: block; }.d_none_at800px { display: none; }}@media screen and (max-width:600px) { .fld_column_at600px { flex-direction: column; }}@media screen and (max-width:350px) { .d_none_at350px { display: none; }}@media screen and (max-width:319px) { .w_auto_at319px { width: auto; }}