.hack-centre-y, .hack-centre-x, .hack-centre, #open-fixed img {
  width: fit-content;
  width: -moz-fit-content;
  position: relative; }

.hack-centre, #open-fixed img {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%; }

.hack-centre-x {
  transform: translateX(-50%);
  left: 50%; }

.hack-centre-y {
  transform: translateY(50%);
  bottom: 50%; }

.card-title, #open {
  margin: auto 0; }

.flex {
  display: flex; }

.pos-abs {
  position: absolute; }

.pos-fix {
  position: fixed; }

.black-card, .white-card {
  border-radius: 0.5rem; }

.pad-s {
  padding: 0.5rem; }

.pad-m {
  padding: 1rem; }

.bg-red {
  background-color: #ff4b4b !important; }

.bg-none {
  background: none !important; }

.hidden {
  display: none !important;
  visibility: hidden !important; }

@media (prefers-color-scheme: light) {
  .big-card, .white-card {
    background-color: white; }
  #notify {
    background-color: white; }
  .black-card {
    background-color: black; }
  .sc-card, .content, .header {
    background-color: #eeeff3; }
  .black-card {
    color: white; }
  .card-title, #notify, .big-card, #sidenav-logo p, .white-card {
    color: black; }
  .white-card {
    border: 1px solid black; } }

@media (prefers-color-scheme: dark) {
  .big-card, .white-card {
    background-color: black; }
  #notify {
    background-color: #232323; }
  .black-card {
    background-color: white; }
  .sc-card, .content, .header {
    background-color: black; }
  .black-card {
    color: black !important; }
  .card-title, #notify, .big-card, #sidenav-logo p, .white-card {
    color: white !important; }
  .white-card {
    border: 1px solid white; } }

@media (prefers-color-scheme: dark) {
  .invert, .mini-fade, #notify img, #close, #page-next,
  #page-prev {
    filter: invert(1); } }

:root {
  --action-corner: 1.25rem;
  --action-padding: 1.2rem;
  --indent: 1rem; }

html {
  scroll-behavior: smooth; }

.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none; }

/* big elements */
.article-container {
  position: relative;
  padding: 6rem 2rem 2rem 2rem;
  font-size: 130%;
  line-height: normal;
  max-width: 35rem;
  /* 5rems spacing for the header */
  min-height: 100vh; }

.header {
  font-size: 130%;
  z-index: 3;
  display: flex;
  position: fixed;
  top: 0;
  padding: 1rem 0rem; }
  .header.no-sidebar {
    width: calc(100vw); }
  .header.with-sidebar {
    width: calc(100vw - 250px); }

/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(250, 250, 250, 0.9);
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 4.5rem;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  border-right: 1px solid gray; }

/* The navigation menu links */
.sidebar-link {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  color: #3c3c3c;
  display: block;
  transition: 0.3s; }

.sidebar-heading {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  color: #141414;
  display: block;
  transition: 0.3s;
  font-size: 25px;
  font-size: 1.7rem; }

/* When you mouse over the navigation links, change their color */
.sidebar-link:hover,
.sidebar-heading:hover {
  color: grey; }

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 1rem;
  right: 1rem; }

.sidenav.closed {
  margin-left: -250px; }

.sidenav.opened {
  margin-left: 0px; }

#sidenav-logo {
  display: flex; }
  #sidenav-logo p {
    display: block;
    margin: auto 1rem auto 0;
    flex: auto;
    font-size: 1.7rem; }
  #sidenav-logo img {
    display: block;
    max-width: 30%;
    margin: 0.5rem 1rem;
    flex: initial; }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px; }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
.content {
  margin-left: 250px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: flex;
  position: relative; }

#closebtn {
  visibility: hidden;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem; }

#page-next,
#page-prev {
  width: 1rem;
  height: 1rem; }

#open-fixed {
  top: 1.4rem;
  left: 1.4rem;
  position: fixed;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 4;
  background-color: black;
  border-radius: 25%;
  border: 1px solid white; }
  #open-fixed img {
    width: 1rem;
    height: 1rem; }

#open {
  width: 1rem;
  height: 1rem;
  visibility: hidden;
  z-index: 4;
  line-height: 1rem; }
  #open.oncard {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    background-color: black;
    border-radius: 25%;
    border: 1px solid white; }
    #open.oncard img {
      height: 1rem;
      margin: 0.75rem; }
  #open img {
    width: 1rem; }

.always-on {
  visibility: visible !important; }

#close {
  width: 1rem;
  height: 1rem; }

.transparent {
  background: none !important; }

.inherit-white * {
  color: white; }

/* prevents the header covering the action on hash links */
.hash {
  position: relative;
  top: -6.5rem; }

#glyph-bg {
  min-width: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.7rem;
  background-color: black;
  display: inline-block;
  margin: 0 1rem;
  /* padding:.4rem; */ }

#glyph-icon {
  max-width: 2.2rem;
  max-height: 2.2rem;
  filter: invert(1); }

/* submit page styling */
.centralize {
  margin: 2rem auto;
  display: block;
  width: fit-content;
  width: -moz-fit-content; }

.centralize.top {
  margin-top: 20vh; }

.helptext {
  visibility: hidden; }

#id_iCloudLink::placeholder {
  content: "test";
  color: gainsboro; }

input {
  border-radius: 0.3rem;
  border: 1px solid darkgray; }

input[type="submit"] {
  color: white;
  background-color: rgba(30, 30, 90, 0.9); }

#splash {
  max-width: 20rem;
  margin: 0;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); }

.form-error ul {
  list-style: none;
  padding: 0;
  margin-top: -1.5rem; }

.form-error li {
  color: white; }

/* icon background */
.gridiron {
  position: fixed;
  top: -100rem;
  left: -10rem;
  display: grid;
  grid-template-columns: repeat(40, 5rem);
  grid-template-rows: repeat(40, 5rem);
  transform: rotate(-45deg);
  z-index: -2; }
  .gridiron.huge {
    top: -60rem;
    left: -60rem;
    grid-template-columns: repeat(80, 5rem);
    grid-template-rows: repeat(80, 5rem); }

.bg-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 20%;
  grid-row-end: span 2;
  grid-column-end: span 2;
  margin: auto; }

.grid-padding {
  grid-row-end: span 2;
  grid-column-start: 1; }

#gp1 {
  grid-row-start: 1; }

#gp2 {
  grid-row-start: 5; }

#gp3 {
  grid-row-start: 9; }

#gp4 {
  grid-row-start: 13; }

#gp5 {
  grid-row-start: 17; }

#gp6 {
  grid-row-start: 21; }

#gp7 {
  grid-row-start: 25; }

#gp8 {
  grid-row-start: 29; }

#gp9 {
  grid-row-start: 33; }

#gp10 {
  grid-row-start: 37; }

.bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }
  .bg-darkmode {
    z-index: -3; }
  .bg-blue {
    z-index: -1; }

/* big card container */
.big-card {
  margin: 2rem auto;
  border-radius: 2rem;
  padding: 2rem;
  max-width: calc(100vw - 250px - 4rem);
  flex: auto;
  position: relative; }

/* pagination */
#paginate {
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto; }

#page-prev {
  transform: rotate(180deg); }

#page-current {
  margin: 0 1rem; }

/* list of shortcuts */
.shortcut-list {
  list-style: none;
  padding: 0; }

.shortcut-link {
  font-size: 1.2rem; }

/* reddit post page branding */
#reddit-post {
  font-size: 1.5rem; }

#reddit-post::before {
  content: "r/"; }

#reddit-light,
#reddit-dark {
  max-height: 15rem; }

/* loading image */
#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30vh;
  width: 30vh;
  padding: 5vh;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px white;
  display: none; }

#qrcode img {
  width: 100%;
  height: 100%; }

#path1 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 750;
  animation: dash1 4s linear -2.75s infinite; }

#path2 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 770;
  animation: dash2 4s linear 0s infinite; }

.bg-blue,
.bg-darkmode {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0; }

/* 
# notification
*/
#notify {
  z-index: 10;
  font-weight: 600;
  height: 2rem;
  top: -3rem;
  border-radius: 1rem;
  padding: 0 1rem 0 0.7rem;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.25));
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s; }
  #notify img {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
    display: none; }
  #notify span {
    position: relative;
    bottom: 0.3rem; }
  #notify.with-sidebar {
    /* 50% of sidebar & right nav */
    left: calc(50% + 125px - 2.5rem); }

@keyframes dash1 {
  0% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 1500; } }

@keyframes dash2 {
  0% {
    stroke-dashoffset: 1500; }
  100% {
    stroke-dashoffset: 0; } }

@media (prefers-color-scheme: dark) {
  .bg-darkmode {
    background: #333; }
  .bg-blue {
    background-color: rgba(10, 10, 45, 0.6); }
  #mySidenav {
    background-color: rgba(40, 40, 40, 0.95);
    border-right: 1px solid white; }
  .sidebar-heading {
    color: aliceblue; }
  .sidebar-link {
    color: #f1f1f1; }
  .content {
    background-color: black; }
  #reddit-light {
    display: none; }
  #reddit-dark {
    display: block; } }

@media (prefers-color-scheme: light) {
  .bg-darkmode {
    background: none; }
  .bg-blue {
    background-color: rgba(30, 30, 90, 0.8); }
  #reddit-light {
    display: block; }
  #reddit-dark {
    display: none; } }

@media only screen and (max-width: 768px) {
  .content {
    margin-left: 0; }
  #open,
  #closebtn {
    visibility: visible; }
  .sidenav {
    margin-left: -250px; }
  #splash {
    max-width: 90vw; }
  .big-card {
    max-width: 90vw; } }

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 2rem; }
  .sidebar-heading,
  .sidebar-link {
    font-size: 1.2rem;
    padding-top: 0;
    padding-bottom: 0; } }

@media only screen and (max-width: 1280px) {
  #reddit-post::before {
    content: ""; }
  #reddit-post * {
    display: block;
    margin: 0 auto 0.5rem auto; } }

a * {
  /* remove default coloring */
  color: black; }

.masonry {
  /* Masonry container */
  column-gap: 1rem;
  height: fit-content;
  height: -moz-fit-content; }

.sideby {
  width: fit-content;
  width: -moz-fit-content;
  display: flex;
  margin: 0 auto .5rem auto; }

.sc-card {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5rem;
  width: 100%;
  padding: 1rem 1rem 6rem 1rem;
  border-radius: 1rem;
  overflow-y: hidden;
  /* max-width: 31 rem action max + 1 rem each size */
  max-width: 33rem; }

.action.cutoff {
  position: absolute !important;
  bottom: 5rem;
  right: 0;
  transform: translateY(100%);
  margin-right: 1rem;
  pointer-events: none;
  width: calc(100% - 2rem);
  height: 7rem; }

.sc-card #glyph-bg {
  margin: auto .5rem auto 0; }

/* .sc-card:first-child{
    a block is getting "buried" under hidden elements
    z-index: 5;
} */
.card-title {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block; }

.like-btn {
  height: 3rem;
  width: 3rem;
  padding: .5rem; }

.like-btn ~ p {
  margin: auto 0;
  font-size: 1.5rem; }

#flow {
  height: 2rem;
  width: 2rem;
  margin: .5rem .5rem .5rem 1.5rem;
  position: relative;
  top: .1rem; }

.mini-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5rem;
  width: 100%;
  z-index: 5;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #eeeff3);
  pointer-events: none;
  border-radius: 1rem; }

@media only screen and (min-width: 64rem) {
  .masonry {
    column-count: 2; } }

@media only screen and (min-width: 90rem) {
  .masonry {
    column-count: 3; } }

@media (prefers-color-scheme: dark) {
  .sc-card {
    border: 1px solid #eeeff3; } }

.hack-centre-y, .hack-centre-x, .hack-centre, #open-fixed img {
  width: fit-content;
  width: -moz-fit-content;
  position: relative; }

.hack-centre, #open-fixed img {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%; }

.hack-centre-x {
  transform: translateX(-50%);
  left: 50%; }

.hack-centre-y {
  transform: translateY(50%);
  bottom: 50%; }

#open {
  margin: auto 0; }

.flex {
  display: flex; }

.pos-abs {
  position: absolute; }

.pos-fix {
  position: fixed; }

.black-card, .white-card {
  border-radius: 0.5rem; }

.pad-s {
  padding: 0.5rem; }

.pad-m {
  padding: 1rem; }

.bg-red {
  background-color: #ff4b4b !important; }

.bg-none {
  background: none !important; }

.hidden {
  display: none !important;
  visibility: hidden !important; }

@media (prefers-color-scheme: light) {
  .big-card, .white-card {
    background-color: white; }
  #notify {
    background-color: white; }
  .black-card {
    background-color: black; }
  .content, .header {
    background-color: #eeeff3; }
  .black-card {
    color: white; }
  #screenshot-mark p, #notify, .big-card, #sidenav-logo p, .white-card {
    color: black; }
  .white-card {
    border: 1px solid black; } }

@media (prefers-color-scheme: dark) {
  .big-card, .white-card {
    background-color: black; }
  #notify {
    background-color: #232323; }
  .black-card {
    background-color: white; }
  .content, .header {
    background-color: black; }
  .black-card {
    color: black !important; }
  #screenshot-mark p, #notify, .big-card, #sidenav-logo p, .white-card {
    color: white !important; }
  .white-card {
    border: 1px solid white; } }

@media (prefers-color-scheme: dark) {
  .invert, #screenshot-mark img, #notify img, #close, #page-next,
  #page-prev {
    filter: invert(1); } }

:root {
  --action-corner: 1.25rem;
  --action-padding: 1.2rem;
  --indent: 1rem; }

html {
  scroll-behavior: smooth; }

.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none; }

/* big elements */
.article-container {
  position: relative;
  padding: 6rem 2rem 2rem 2rem;
  font-size: 130%;
  line-height: normal;
  max-width: 35rem;
  /* 5rems spacing for the header */
  min-height: 100vh; }

.header {
  font-size: 130%;
  z-index: 3;
  display: flex;
  position: fixed;
  top: 0;
  padding: 1rem 0rem; }
  .header.no-sidebar {
    width: calc(100vw); }
  .header.with-sidebar {
    width: calc(100vw - 250px); }

/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(250, 250, 250, 0.9);
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 4.5rem;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  border-right: 1px solid gray; }

/* The navigation menu links */
.sidebar-link {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  color: #3c3c3c;
  display: block;
  transition: 0.3s; }

.sidebar-heading {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  color: #141414;
  display: block;
  transition: 0.3s;
  font-size: 25px;
  font-size: 1.7rem; }

/* When you mouse over the navigation links, change their color */
.sidebar-link:hover,
.sidebar-heading:hover {
  color: grey; }

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 1rem;
  right: 1rem; }

.sidenav.closed {
  margin-left: -250px; }

.sidenav.opened {
  margin-left: 0px; }

#sidenav-logo {
  display: flex; }
  #sidenav-logo p {
    display: block;
    margin: auto 1rem auto 0;
    flex: auto;
    font-size: 1.7rem; }
  #sidenav-logo img {
    display: block;
    max-width: 30%;
    margin: 0.5rem 1rem;
    flex: initial; }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px; }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
.content {
  margin-left: 250px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: flex;
  position: relative; }

#closebtn {
  visibility: hidden;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem; }

#page-next,
#page-prev {
  width: 1rem;
  height: 1rem; }

#open-fixed {
  top: 1.4rem;
  left: 1.4rem;
  position: fixed;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 4;
  background-color: black;
  border-radius: 25%;
  border: 1px solid white; }
  #open-fixed img {
    width: 1rem;
    height: 1rem; }

#open {
  width: 1rem;
  height: 1rem;
  visibility: hidden;
  z-index: 4;
  line-height: 1rem; }
  #open.oncard {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    background-color: black;
    border-radius: 25%;
    border: 1px solid white; }
    #open.oncard img {
      height: 1rem;
      margin: 0.75rem; }
  #open img {
    width: 1rem; }

.always-on {
  visibility: visible !important; }

#close {
  width: 1rem;
  height: 1rem; }

.transparent {
  background: none !important; }

.inherit-white * {
  color: white; }

/* prevents the header covering the action on hash links */
.hash {
  position: relative;
  top: -6.5rem; }

#glyph-bg {
  min-width: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.7rem;
  background-color: black;
  display: inline-block;
  margin: 0 1rem;
  /* padding:.4rem; */ }

#glyph-icon {
  max-width: 2.2rem;
  max-height: 2.2rem;
  filter: invert(1); }

/* submit page styling */
.centralize {
  margin: 2rem auto;
  display: block;
  width: fit-content;
  width: -moz-fit-content; }

.centralize.top {
  margin-top: 20vh; }

.helptext {
  visibility: hidden; }

#id_iCloudLink::placeholder {
  content: "test";
  color: gainsboro; }

input {
  border-radius: 0.3rem;
  border: 1px solid darkgray; }

input[type="submit"] {
  color: white;
  background-color: rgba(30, 30, 90, 0.9); }

#splash {
  max-width: 20rem;
  margin: 0;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); }

.form-error ul {
  list-style: none;
  padding: 0;
  margin-top: -1.5rem; }

.form-error li {
  color: white; }

/* icon background */
.gridiron {
  position: fixed;
  top: -100rem;
  left: -10rem;
  display: grid;
  grid-template-columns: repeat(40, 5rem);
  grid-template-rows: repeat(40, 5rem);
  transform: rotate(-45deg);
  z-index: -2; }
  .gridiron.huge {
    top: -60rem;
    left: -60rem;
    grid-template-columns: repeat(80, 5rem);
    grid-template-rows: repeat(80, 5rem); }

.bg-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 20%;
  grid-row-end: span 2;
  grid-column-end: span 2;
  margin: auto; }

.grid-padding {
  grid-row-end: span 2;
  grid-column-start: 1; }

#gp1 {
  grid-row-start: 1; }

#gp2 {
  grid-row-start: 5; }

#gp3 {
  grid-row-start: 9; }

#gp4 {
  grid-row-start: 13; }

#gp5 {
  grid-row-start: 17; }

#gp6 {
  grid-row-start: 21; }

#gp7 {
  grid-row-start: 25; }

#gp8 {
  grid-row-start: 29; }

#gp9 {
  grid-row-start: 33; }

#gp10 {
  grid-row-start: 37; }

.bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }
  .bg-darkmode {
    z-index: -3; }
  .bg-blue {
    z-index: -1; }

/* big card container */
.big-card {
  margin: 2rem auto;
  border-radius: 2rem;
  padding: 2rem;
  max-width: calc(100vw - 250px - 4rem);
  flex: auto;
  position: relative; }

/* pagination */
#paginate {
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto; }

#page-prev {
  transform: rotate(180deg); }

#page-current {
  margin: 0 1rem; }

/* list of shortcuts */
.shortcut-list {
  list-style: none;
  padding: 0; }

.shortcut-link {
  font-size: 1.2rem; }

/* reddit post page branding */
#reddit-post {
  font-size: 1.5rem; }

#reddit-post::before {
  content: "r/"; }

#reddit-light,
#reddit-dark {
  max-height: 15rem; }

/* loading image */
#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30vh;
  width: 30vh;
  padding: 5vh;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px white;
  display: none; }

#qrcode img {
  width: 100%;
  height: 100%; }

#path1 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 750;
  animation: dash1 4s linear -2.75s infinite; }

#path2 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 770;
  animation: dash2 4s linear 0s infinite; }

.bg-blue,
.bg-darkmode {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0; }

/* 
# notification
*/
#notify {
  z-index: 10;
  font-weight: 600;
  height: 2rem;
  top: -3rem;
  border-radius: 1rem;
  padding: 0 1rem 0 0.7rem;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.25));
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s; }
  #notify img {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
    display: none; }
  #notify span {
    position: relative;
    bottom: 0.3rem; }
  #notify.with-sidebar {
    /* 50% of sidebar & right nav */
    left: calc(50% + 125px - 2.5rem); }

@keyframes dash1 {
  0% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 1500; } }

@keyframes dash2 {
  0% {
    stroke-dashoffset: 1500; }
  100% {
    stroke-dashoffset: 0; } }

@media (prefers-color-scheme: dark) {
  .bg-darkmode {
    background: #333; }
  .bg-blue {
    background-color: rgba(10, 10, 45, 0.6); }
  #mySidenav {
    background-color: rgba(40, 40, 40, 0.95);
    border-right: 1px solid white; }
  .sidebar-heading {
    color: aliceblue; }
  .sidebar-link {
    color: #f1f1f1; }
  .content {
    background-color: black; }
  #reddit-light {
    display: none; }
  #reddit-dark {
    display: block; } }

@media (prefers-color-scheme: light) {
  .bg-darkmode {
    background: none; }
  .bg-blue {
    background-color: rgba(30, 30, 90, 0.8); }
  #reddit-light {
    display: block; }
  #reddit-dark {
    display: none; } }

@media only screen and (max-width: 768px) {
  .content {
    margin-left: 0; }
  #open,
  #closebtn {
    visibility: visible; }
  .sidenav {
    margin-left: -250px; }
  #splash {
    max-width: 90vw; }
  .big-card {
    max-width: 90vw; } }

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 2rem; }
  .sidebar-heading,
  .sidebar-link {
    font-size: 1.2rem;
    padding-top: 0;
    padding-bottom: 0; } }

@media only screen and (max-width: 1280px) {
  #reddit-post::before {
    content: ""; }
  #reddit-post * {
    display: block;
    margin: 0 auto 0.5rem auto; } }

.sc-title {
  color: black;
  font-size: 2.7rem;
  font-weight: bold;
  height: 3rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  flex: initial; }

#action-container > .sc-title {
  width: inherit !important;
  white-space: normal; }

/* arrangement elements */
.floater {
  flex: auto;
  z-index: -1; }

.align-5 {
  width: 3rem;
  flex: initial; }

/* right side buttons */
.tool-container {
  position: fixed;
  right: 0;
  top: 0;
  width: 3rem;
  z-index: 5; }

/* disabled buttons */
div.disabled {
  opacity: 0.3;
  pointer-events: none; }

/* blocked content for free users */
.fade-out {
  height: 20rem;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 5;
  background-image: linear-gradient(rgba(255, 255, 255, 0), white); }

.gate-text {
  position: absolute;
  text-align: center;
  bottom: 1rem;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  font-size: 1.5rem; }

/* action extensions */
#accepts {
  margin-right: 1.5rem;
  display: inline;
  font-weight: 500; }

#accepted-types {
  display: inline;
  color: gray; }

/* screenshot watermark */
#screenshot-mark {
  width: fit-content;
  width: -moz-fit-content;
  height: 5rem;
  margin-top: 1rem; }
  #screenshot-mark img {
    display: inline-block;
    height: 5rem; }
  #screenshot-mark p {
    display: inline-block;
    font-size: 2rem; }

@media (prefers-color-scheme: dark) {
  .fade-out {
    background-image: linear-gradient(rgba(0, 0, 0, 0), black); }
  .sc-title,
  .gate-text {
    color: white; } }

.hack-centre-y, .hack-centre-x, .hack-centre, #open-fixed img {
  width: fit-content;
  width: -moz-fit-content;
  position: relative; }

.hack-centre, #open-fixed img {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%; }

.hack-centre-x {
  transform: translateX(-50%);
  left: 50%; }

.hack-centre-y {
  transform: translateY(50%);
  bottom: 50%; }

#ios-download + p,
#show-magic + p,
#like + p, #open {
  margin: auto 0; }

.flex {
  display: flex; }

.pos-abs {
  position: absolute; }

.pos-fix {
  position: fixed; }

.sub-label, .sub-btn, .tool-btn, .black-card, .white-card, #info + p, #info + p + p {
  border-radius: 0.5rem; }

.pad-s {
  padding: 0.5rem; }

.pad-m {
  padding: 1rem; }

.bg-red {
  background-color: #ff4b4b !important; }

.bg-none {
  background: none !important; }

.hidden {
  display: none !important;
  visibility: hidden !important; }

@media (prefers-color-scheme: light) {
  .sub-label, .sub-btn, .big-card, .white-card, #info + p, #info + p + p {
    background-color: white; }
  #notify {
    background-color: white; }
  .tool-btn, #ios-download + p,
  #show-magic + p,
  #like + p, .black-card {
    background-color: black; }
  .content, .header {
    background-color: #eeeff3; }
  #ios-download + p,
  #show-magic + p,
  #like + p, .black-card {
    color: white; }
  .sub-label, .sub-btn, #notify, .big-card, #sidenav-logo p, .white-card, #info + p, #info + p + p {
    color: black; }
  .sub-label, .sub-btn, .white-card, #info + p, #info + p + p {
    border: 1px solid black; } }

@media (prefers-color-scheme: dark) {
  .sub-label, .sub-btn, .big-card, .white-card, #info + p, #info + p + p {
    background-color: black; }
  #notify {
    background-color: #232323; }
  .tool-btn, #ios-download + p,
  #show-magic + p,
  #like + p, .black-card {
    background-color: white; }
  .content, .header {
    background-color: black; }
  #ios-download + p,
  #show-magic + p,
  #like + p, .black-card {
    color: black !important; }
  .sub-label, .sub-btn, #notify, .big-card, #sidenav-logo p, .white-card, #info + p, #info + p + p {
    color: white !important; }
  .sub-label, .sub-btn, .white-card, #info + p, #info + p + p {
    border: 1px solid white; } }

@media (prefers-color-scheme: dark) {
  .invert, .tool-btn.line-art img, .sub-label img, .sub-btn img, .tool-btn img, #notify img, #close, #page-next,
  #page-prev {
    filter: invert(1); } }

:root {
  --action-corner: 1.25rem;
  --action-padding: 1.2rem;
  --indent: 1rem; }

html {
  scroll-behavior: smooth; }

.sidebar-nav {
  margin-top: 20px;
  padding: 0;
  list-style: none; }

/* big elements */
.article-container {
  position: relative;
  padding: 6rem 2rem 2rem 2rem;
  font-size: 130%;
  line-height: normal;
  max-width: 35rem;
  /* 5rems spacing for the header */
  min-height: 100vh; }

.header {
  font-size: 130%;
  z-index: 3;
  display: flex;
  position: fixed;
  top: 0;
  padding: 1rem 0rem; }
  .header.no-sidebar {
    width: calc(100vw); }
  .header.with-sidebar {
    width: calc(100vw - 250px); }

/* The side navigation menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(250, 250, 250, 0.9);
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 4.5rem;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
  border-right: 1px solid gray; }

/* The navigation menu links */
.sidebar-link {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  color: #3c3c3c;
  display: block;
  transition: 0.3s; }

.sidebar-heading {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  color: #141414;
  display: block;
  transition: 0.3s;
  font-size: 25px;
  font-size: 1.7rem; }

/* When you mouse over the navigation links, change their color */
.sidebar-link:hover,
.sidebar-heading:hover {
  color: grey; }

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 1rem;
  right: 1rem; }

.sidenav.closed {
  margin-left: -250px; }

.sidenav.opened {
  margin-left: 0px; }

#sidenav-logo {
  display: flex; }
  #sidenav-logo p {
    display: block;
    margin: auto 1rem auto 0;
    flex: auto;
    font-size: 1.7rem; }
  #sidenav-logo img {
    display: block;
    max-width: 30%;
    margin: 0.5rem 1rem;
    flex: initial; }

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px; }

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
.content {
  margin-left: 250px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: flex;
  position: relative; }

#closebtn {
  visibility: hidden;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  padding: 0.5rem; }

#page-next,
#page-prev {
  width: 1rem;
  height: 1rem; }

#open-fixed {
  top: 1.4rem;
  left: 1.4rem;
  position: fixed;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 4;
  background-color: black;
  border-radius: 25%;
  border: 1px solid white; }
  #open-fixed img {
    width: 1rem;
    height: 1rem; }

#open {
  width: 1rem;
  height: 1rem;
  visibility: hidden;
  z-index: 4;
  line-height: 1rem; }
  #open.oncard {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    background-color: black;
    border-radius: 25%;
    border: 1px solid white; }
    #open.oncard img {
      height: 1rem;
      margin: 0.75rem; }
  #open img {
    width: 1rem; }

.always-on {
  visibility: visible !important; }

#close {
  width: 1rem;
  height: 1rem; }

.transparent {
  background: none !important; }

.inherit-white * {
  color: white; }

/* prevents the header covering the action on hash links */
.hash {
  position: relative;
  top: -6.5rem; }

#glyph-bg {
  min-width: 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.7rem;
  background-color: black;
  display: inline-block;
  margin: 0 1rem;
  /* padding:.4rem; */ }

#glyph-icon {
  max-width: 2.2rem;
  max-height: 2.2rem;
  filter: invert(1); }

/* submit page styling */
.centralize {
  margin: 2rem auto;
  display: block;
  width: fit-content;
  width: -moz-fit-content; }

.centralize.top {
  margin-top: 20vh; }

.helptext {
  visibility: hidden; }

#id_iCloudLink::placeholder {
  content: "test";
  color: gainsboro; }

input {
  border-radius: 0.3rem;
  border: 1px solid darkgray; }

input[type="submit"] {
  color: white;
  background-color: rgba(30, 30, 90, 0.9); }

#splash {
  max-width: 20rem;
  margin: 0;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5)); }

.form-error ul {
  list-style: none;
  padding: 0;
  margin-top: -1.5rem; }

.form-error li {
  color: white; }

/* icon background */
.gridiron {
  position: fixed;
  top: -100rem;
  left: -10rem;
  display: grid;
  grid-template-columns: repeat(40, 5rem);
  grid-template-rows: repeat(40, 5rem);
  transform: rotate(-45deg);
  z-index: -2; }
  .gridiron.huge {
    top: -60rem;
    left: -60rem;
    grid-template-columns: repeat(80, 5rem);
    grid-template-rows: repeat(80, 5rem); }

.bg-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 20%;
  grid-row-end: span 2;
  grid-column-end: span 2;
  margin: auto; }

.grid-padding {
  grid-row-end: span 2;
  grid-column-start: 1; }

#gp1 {
  grid-row-start: 1; }

#gp2 {
  grid-row-start: 5; }

#gp3 {
  grid-row-start: 9; }

#gp4 {
  grid-row-start: 13; }

#gp5 {
  grid-row-start: 17; }

#gp6 {
  grid-row-start: 21; }

#gp7 {
  grid-row-start: 25; }

#gp8 {
  grid-row-start: 29; }

#gp9 {
  grid-row-start: 33; }

#gp10 {
  grid-row-start: 37; }

.bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%; }
  .bg-darkmode {
    z-index: -3; }
  .bg-blue {
    z-index: -1; }

/* big card container */
.big-card {
  margin: 2rem auto;
  border-radius: 2rem;
  padding: 2rem;
  max-width: calc(100vw - 250px - 4rem);
  flex: auto;
  position: relative; }

/* pagination */
#paginate {
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto; }

#page-prev {
  transform: rotate(180deg); }

#page-current {
  margin: 0 1rem; }

/* list of shortcuts */
.shortcut-list {
  list-style: none;
  padding: 0; }

.shortcut-link {
  font-size: 1.2rem; }

/* reddit post page branding */
#reddit-post {
  font-size: 1.5rem; }

#reddit-post::before {
  content: "r/"; }

#reddit-light,
#reddit-dark {
  max-height: 15rem; }

/* loading image */
#loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30vh;
  width: 30vh;
  padding: 5vh;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 10px white;
  display: none; }

#qrcode img {
  width: 100%;
  height: 100%; }

#path1 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 750;
  animation: dash1 4s linear -2.75s infinite; }

#path2 {
  stroke-dasharray: 325, 50, 325, 50;
  stroke-dashoffset: 770;
  animation: dash2 4s linear 0s infinite; }

.bg-blue,
.bg-darkmode {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0; }

/* 
# notification
*/
#notify {
  z-index: 10;
  font-weight: 600;
  height: 2rem;
  top: -3rem;
  border-radius: 1rem;
  padding: 0 1rem 0 0.7rem;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.25));
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s; }
  #notify img {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.25rem;
    display: none; }
  #notify span {
    position: relative;
    bottom: 0.3rem; }
  #notify.with-sidebar {
    /* 50% of sidebar & right nav */
    left: calc(50% + 125px - 2.5rem); }

@keyframes dash1 {
  0% {
    stroke-dashoffset: 0; }
  100% {
    stroke-dashoffset: 1500; } }

@keyframes dash2 {
  0% {
    stroke-dashoffset: 1500; }
  100% {
    stroke-dashoffset: 0; } }

@media (prefers-color-scheme: dark) {
  .bg-darkmode {
    background: #333; }
  .bg-blue {
    background-color: rgba(10, 10, 45, 0.6); }
  #mySidenav {
    background-color: rgba(40, 40, 40, 0.95);
    border-right: 1px solid white; }
  .sidebar-heading {
    color: aliceblue; }
  .sidebar-link {
    color: #f1f1f1; }
  .content {
    background-color: black; }
  #reddit-light {
    display: none; }
  #reddit-dark {
    display: block; } }

@media (prefers-color-scheme: light) {
  .bg-darkmode {
    background: none; }
  .bg-blue {
    background-color: rgba(30, 30, 90, 0.8); }
  #reddit-light {
    display: block; }
  #reddit-dark {
    display: none; } }

@media only screen and (max-width: 768px) {
  .content {
    margin-left: 0; }
  #open,
  #closebtn {
    visibility: visible; }
  .sidenav {
    margin-left: -250px; }
  #splash {
    max-width: 90vw; }
  .big-card {
    max-width: 90vw; } }

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 2rem; }
  .sidebar-heading,
  .sidebar-link {
    font-size: 1.2rem;
    padding-top: 0;
    padding-bottom: 0; } }

@media only screen and (max-width: 1280px) {
  #reddit-post::before {
    content: ""; }
  #reddit-post * {
    display: block;
    margin: 0 auto 0.5rem auto; } }

/* 
# Vertical Ordering
*/
.tool-btn,
.tool-btn + p,
.sub-btn,
.sub-label {
  position: absolute;
  top: calc(3rem * var(--n)); }

#show-magic {
  --n: 0; }

#screenshot {
  --n: 1; }

/* button specific stylings */
#ios-download,
#show-magic,
#like {
  white-space: nowrap; }
  #ios-download:hover + p,
  #show-magic:hover + p,
  #like:hover + p {
    right: 3rem;
    pointer-events: none; }
  #ios-download + p,
  #show-magic + p,
  #like + p {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    width: 2.5rem;
    right: -13rem;
    border-radius: 0.5rem;
    height: 2.5rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600; }

#info, #info + p {
  --n: 2; }
  #info + p, #info + p + p {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    right: -13rem;
    padding: 0.3rem;
    margin: 0.25rem;
    z-index: 4;
    width: 12rem;
    height: auto; }
  #info.clicked + p, #info + p.clicked + p {
    right: 3rem; }

#icloud,
#icloud-link,
#icloud-copy,
#icloud-qr {
  --n: 3; }

#like,
#like + p {
  --n: 4; }

#save {
  --n: 5; }
  #save.clicked img {
    filter: invert(45%) sepia(43%) saturate(7372%) hue-rotate(201deg) brightness(100%) contrast(98%); }

#xpost,
#reddit,
#twitter {
  --n: 6; }

.clicked + div > .sub-btn,
.clicked + div > .sub-label {
  top: calc(var(--n) * 3rem + var(--m) * 3rem);
  right: 3rem;
  visibility: visible !important;
  opacity: 1; }

#reddit {
  --m: -0.5; }
  #reddit img {
    filter: none !important; }

#twitter {
  --m: +0.5; }
  #twitter img {
    filter: none !important; }

#icloud-link {
  --m: +1; }

#icloud-copy {
  --m: 0; }

#icloud-qr {
  --m: -1; }

.sub-label, .sub-btn, .tool-btn {
  padding: 0.25rem;
  margin: 0.25rem;
  overflow: hidden; }
  .sub-label img, .sub-btn img, .tool-btn img {
    height: 2rem;
    min-width: 2rem;
    margin-right: 0.5rem; }

.tool-btn {
  height: 2.5rem;
  width: 2.5rem;
  right: 0; }
  .tool-btn p {
    margin: auto 0 auto 0.5rem; }
  .tool-btn.line-art p {
    color: black; }

.tool-btn.expand {
  transition: width 0.5s;
  -moz-transition: width 0.5s;
  color: white;
  display: flex; }
  .tool-btn.expand:hover {
    width: 10rem; }

.sub-label, .sub-btn {
  right: 0;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s;
  -moz-transition: 0.25s; }

.sub-btn {
  height: 2.5rem;
  width: 2.5rem; }

.sub-label {
  height: 2.5rem;
  width: auto; }
  .sub-label img {
    width: 2.5rem; }
  .sub-label p {
    white-space: nowrap; }

.line-art:hover {
  animation: shake 0.5s linear 0s; }

.line-art:active {
  animation: shake2 0.5s linear 0s; }

@keyframes shake {
  0% {
    transform: rotate(0deg); }
  16% {
    transform: rotate(-10deg); }
  50% {
    transform: rotate(8deg); }
  82% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes shake2 {
  0% {
    transform: rotate(0deg) scale(1); }
  16% {
    transform: rotate(-10deg) scale(1.05); }
  32% {
    transform: scale(1.1); }
  50% {
    transform: rotate(8deg) scale(1.08); }
  66% {
    transform: scale(1.05); }
  82% {
    transform: rotate(-5deg) scale(1.02); }
  100% {
    transform: rotate(0deg) scale(1); } }

/* 
## Color Transitions
*/
.tool-btn.line-art img {
  transition: 0.2s;
  -moz-transition: 0.2s; }

.like-btn.clicked img {
  filter: invert(41%) sepia(19%) saturate(2576%) hue-rotate(310deg) brightness(97%) contrast(98%) !important; }

#xpost:hover > img,
#xpost.clicked > img,
#xpost:active > img {
  filter: invert(60%) sepia(19%) saturate(2576%) hue-rotate(110deg) brightness(97%) contrast(98%); }

#icloud:hover > img,
#icloud.clicked > img,
#icloud:active > img {
  filter: invert(55%) sepia(41%) saturate(1940%) hue-rotate(180deg) brightness(105%) contrast(99%); }

/* 
# Color Scheme
*/
@media (prefers-color-scheme: light) {
  #info + p, #info + p + p {
    border: 1px solid black; } }

@media (prefers-color-scheme: dark) {
  #info + p, #info + p + p {
    border: 1px solid var(--sc-grey); }
  #info + p, #info + p + p,
  .tool-btn p {
    color: black; }
  .tool-btn.line-art p {
    color: white; } }

.output {
  width: fit-content;
  width: -moz-fit-content; }

.hack-centre-y, .hack-centre-x, .hack-centre {
  width: fit-content;
  width: -moz-fit-content;
  position: relative; }

.hack-centre {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%; }

.hack-centre-x {
  transform: translateX(-50%);
  left: 50%; }

.hack-centre-y {
  transform: translateY(50%);
  bottom: 50%; }

.counter, .pill, .lower-line .magic,
.lower-line .text,
.lower-line a {
  margin: auto 0; }

.flex {
  display: flex; }

.pos-abs {
  position: absolute; }

.pos-fix {
  position: fixed; }

.black-card, .white-card {
  border-radius: 0.5rem; }

.pad-s {
  padding: 0.5rem; }

.pad-m {
  padding: 1rem; }

.bg-red {
  background-color: #ff4b4b !important; }

.bg-none {
  background: none !important; }

.hidden {
  display: none !important;
  visibility: hidden !important; }

@media (prefers-color-scheme: light) {
  .white-card {
    background-color: white; }
  .action {
    background-color: white; }
  .black-card {
    background-color: black; }
  .counter, .pill {
    background-color: #e6e6e6; }
  .output {
    background-color: #ecf2ff; }
  .black-card {
    color: white; }
  .output, .white-card {
    color: black; }
  .inline-magic .text {
    color: #0d47d8; }
  .white-card {
    border: 1px solid black; } }

@media (prefers-color-scheme: dark) {
  .white-card {
    background-color: black; }
  .action {
    background-color: #232323; }
  .black-card {
    background-color: white; }
  .counter, .pill {
    background-color: #3d3e42; }
  .output {
    background-color: #272b33; }
  .black-card {
    color: black !important; }
  .output, .white-card {
    color: white !important; }
  .inline-magic .text {
    color: #469efb; }
  .white-card {
    border: 1px solid white; } }

@media (prefers-color-scheme: dark) {
  .invert, .counter img {
    filter: invert(1); } }

div {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; }

.dummy::before {
  /* the line running through shortcuts */
  content: "";
  background-color: #91969d;
  width: 3px;
  /* shorten the tail, due to hidden result elements */
  height: calc(100% - 2rem);
  top: 0;
  left: 50%;
  z-index: 0;
  position: absolute; }

.not-implemented {
  margin: auto; }

.magic {
  position: relative;
  padding: 0 .1rem 0 .4rem;
  color: #0d47d8;
  background-color: #ecf2ff;
  border-radius: 0.5rem;
  font-weight: normal !important;
  /* super long URLs and text: */
  overflow-wrap: break-word;
  word-break: break-word; }
  .magic.empty {
    color: #8facec; }
  .magic .inline-glyph {
    position: relative;
    top: 0.2rem; }

/* keep line height consistent */
.inline-line,
.number {
  font-weight: 300;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow-x: scroll; }

.empty {
  color: lightgray; }

span[leftify=True] {
  flex: 5; }

.choose {
  color: #0d47d8;
  font-weight: 300;
  flex: initial; }

.blank {
  color: lightgray; }

.comment > .row.category {
  background-color: #f5ebd2; }

/* styling category row with bottom line */
.comment > .row.category,
.text > .row.category {
  border-radius: var(--action-corner) var(--action-corner) 0 0;
  margin: -1.2rem -1.2rem 1rem -1.2rem;
  /* 1.2 - 0.25 = 0.95 to bring it in-line with other blocks */
  padding: 0.95rem;
  border-bottom: 1px solid lightgray; }

.text div {
  overflow-wrap: break-word;
  word-break: break-word;
  max-height: 60vh;
  overflow-y: scroll; }

.indent-1 {
  margin-left: calc(var(--indent) * 1); }

.indent-2 {
  margin-left: calc(var(--indent) * 2); }

.indent-3 {
  margin-left: calc(var(--indent) * 3); }

.indent-4 {
  margin-left: calc(var(--indent) * 4); }

.indent-5 {
  margin-left: calc(var(--indent) * 5); }

.indent-6 {
  margin-left: calc(var(--indent) * 6); }

.indent-7 {
  margin-left: calc(var(--indent) * 7); }

.indent-8 {
  margin-left: calc(var(--indent) * 8); }

.action {
  max-width: 31rem;
  border-radius: var(--action-corner);
  padding: var(--action-padding);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  z-index: 2;
  position: relative;
  margin-bottom: var(--action-padding);
  line-height: 1.6;
  transition: 0.5s;
  -moz-transition: 0.5s; }
  .action.comment {
    background-color: #fbf4e8; }
  .action.control .row.category {
    visibility: hidden;
    display: none; }
  .action.control .action-title {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem; }

.action-glyph,
.inline-glyph,
.output-glyph {
  border-radius: 0.3em;
  height: 1.5rem;
  width: 1.5rem; }

.action-glyph {
  margin-right: 0.4rem; }

.row .inline-glyph,
.output-glyph {
  position: relative;
  top: 0.2rem;
  margin-left: -0.15rem; }

.action-title {
  font-size: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0rem;
  overflow-wrap: break-word;
  word-break: break-word; }
  .action-title.flow {
    margin-top: -0.7rem;
    margin-bottom: -0.7rem; }
  .action-title .row {
    margin: 0; }

.list-inline-magic .magic + .magic,
.list-inline-magic .inline-magic + .magic,
.list-inline-magic .magic + .inline-magic,
.list-inline-magic .inline-magic + .inline-magic {
  display: inline; }

.action-category {
  color: rgba(147, 148, 150, 0.8);
  font-weight: 300;
  font-size: 1rem; }

.category {
  margin: -0.25rem; }

.dummy {
  position: relative; }

/* line elements */
.line-elems {
  margin: 1rem -1.2rem -1.2rem -1.2rem;
  padding-right: 0; }

.lower-line {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.5rem 1.2rem 0.5rem 0;
  margin-left: 1.2rem;
  /* height: 3.4rem; */
  font-size: 1.2rem;
  display: flex; }
  .lower-line .magic,
  .lower-line .text,
  .lower-line a {
    flex: initial; }
  .lower-line .inline-glyph {
    position: relative;
    top: 0.25rem;
    margin-left: -0.15rem; }

.choose,
.inline-line {
  flex: initial;
  margin: auto 0 auto 0; }

.inline-line,
.notes {
  white-space: pre-wrap; }
  .inline-line .magic,
  .notes .magic {
    padding: 0.25rem; }

.code .text {
  font-family: monospace; }

.lower-line:first-child,
.list-line:first-child {
  margin-left: 0 !important;
  padding-left: 1.2rem; }

.line-label {
  /* expands, unless the line elem needs to be aligned left */
  flex: 2.7;
  margin: auto;
  /* should be slightly thicker, but CSS doesn't allow it */
  font-weight: 400; }

.line-label:empty {
  /* make room for the Not Implemented */
  flex: 0 0 0 !important;
  margin: 0 !important; }

.toggle {
  /* 3:5 ratio */
  width: 4rem;
  flex: initial;
  border-radius: 999rem;
  height: 2.4rem;
  overflow: hidden;
  margin: -0.2rem 0; }
  .toggle.on {
    background-color: #3cc55e; }
    .toggle.on .slider {
      float: right; }
  .toggle.on:after {
    float: right; }
  .toggle:after {
    content: "";
    width: 2.1rem;
    height: 2.1rem;
    margin: 0.15rem;
    border-radius: 50%;
    background-color: white;
    flex: initial;
    align-self: center;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); }
  .toggle.off {
    background-color: #dedede; }
  .toggle.off:after {
    float: left; }
  .toggle.turning-on {
    background-color: #2a8841; }

.slider {
  width: 2.1rem;
  height: 2.1rem;
  margin: 0.15rem;
  border-radius: 50%;
  background-color: white;
  flex: initial;
  align-self: center;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); }

/* list styling */
.list-elem {
  margin: auto 0.3rem auto 0 !important; }

.minus {
  width: 2rem;
  height: 2rem;
  margin-right: 0.7rem; }

.dict-key,
.dict-value {
  /* fix "|" between key and dict */
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  white-space: nowrap;
  overflow: auto; }
  .dict-key div,
  .dict-value div {
    /* creates horizontal scrolling */
    display: inline-block; }

.dict-key {
  flex: 2.7;
  /* text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; */ }

.dict-value {
  white-space: nowrap;
  overflow: auto;
  /* white-space: nowrap;
    overflow: auto; */
  padding-left: 0.7rem;
  flex: 4;
  border-left: 1px solid rgba(0, 0, 0, 0.125); }

.pill {
  border-radius: 0.4rem;
  display: flex;
  flex-direction: row;
  height: 1.6rem;
  overflow: hidden; }
  .pill-off {
    margin: 0.3rem 0.1rem;
    padding: 0rem 0.5rem; }
    .pill-off + .pill-off {
      border-left: thin lightgray solid; }
  .pill-on {
    margin: 0.1rem 0.1rem;
    padding: 0.2rem 0.5rem;
    background-color: white;
    border-radius: 0.35rem;
    font-weight: 500;
    box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2); }
  .pill-off, .pill-on {
    font-size: 0.9rem;
    line-height: 1rem;
    flex: auto; }

.counter {
  border-radius: 0.4rem;
  display: flex;
  flex-direction: row;
  height: 2rem;
  overflow: hidden; }
  .counter img {
    margin: 0.5rem 0;
    height: 1rem;
    line-height: 1rem;
    padding: 0 1rem; }
  .counter img:last-of-type {
    border-left: thin lightgray solid; }

a:hover {
  text-decoration: none; }

/* show magic var output */
.output {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  bottom: -3rem;
  margin: 0 0 var(--action-padding) 50%;
  transform: translate(-50%, 0);
  border-radius: 0.5rem;
  padding: 0.1rem 0.4rem 0.2rem 0.4rem;
  white-space: nowrap; }
  .output.shown {
    visibility: visible;
    opacity: 100%; }
  .output.collapsed {
    visibility: hidden;
    opacity: 0%;
    height: 0 !important;
    margin-bottom: 0 !important; }

/* inline blocks */
.inline-magic {
  display: inline;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 0.15rem #ecf2ff;
  background-color: #ecf2ff; }
  .inline-magic * {
    white-space: nowrap;
    word-break: keep-all; }
  .inline-magic .magic {
    background-color: #e0e9fa; }

/* filters for filter action */
.filter {
  margin: auto 0; }
  .filter-property {
    color: #7873e6; }
  .filter-operator {
    color: #d84bd8; }
  .filter-benchmark {
    color: #fe4454; }
  .filter-unit {
    color: #ff6634; }

.spacer {
  display: inline-block;
  width: .1rem; }

.text + .spacer {
  width: 0; }

#magic_input {
  background: none;
  font-size: inherit;
  border-radius: 0;
  border: none; }

/* modded from 768 due to 35 rem default */
@media only screen and (max-width: 600px) {
  .action {
    max-width: auto; }
  #action-container {
    max-width: calc(100vw - 5rem);
    padding-left: 0;
    padding-right: 0; } }

/* dark mode settings */
@media (prefers-color-scheme: dark) {
  .action {
    color: white; }
  .magic {
    color: #469efb;
    background-color: #272b33; }
    .magic.empty {
      color: #325a82; }
  .inline-magic {
    box-shadow: 0 0 0 0.15rem #272b33;
    background-color: #272b33; }
    .inline-magic .magic {
      background-color: #26333f; }
  .choose {
    color: #469efb; }
  .toggle.off {
    background-color: #434448; }
  .pill-on {
    background-color: #7c8088; }
  .action.comment,
  .comment > .row.category {
    background-color: #272517;
    border-bottom: none; } }
