body, html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  min-width: 350px;
  font: 14px apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; }

h1, h2, h3, h4 {
  font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace; }

nav {
  min-width: 350px;
  background-color: transparent;
  box-shadow: none;
  margin: 10px 0; }
  nav .nav-wrapper {
    display: flex;
    justify-content: space-between; }
  nav .dashboard-logo {
    color: #eceff1;
    position: absolute;
    z-index: 100; }
    nav .dashboard-logo:hover {
      color: lightgrey; }
  nav a {
    color: #222; }
    nav a:hover {
      color: #616161; }
      nav a:hover span {
        color: #FF4081; }
    nav a span {
      color: #00BCD4; }
  nav ul li a {
    color: #222; }
    nav ul li a:hover {
      color: #FF4081;
      background-color: transparent; }
  nav #search-bar {
    flex-grow: 1;
    width: 20%;
    height: 64px; }
    nav #search-bar button {
      height: -webkit-fill-available; }
    nav #search-bar input {
      height: 42px; }
  nav .dropdown-content li > a, nav .dropdown-content li > span {
    color: #222; }
    nav .dropdown-content li > a:hover, nav .dropdown-content li > span:hover {
      background-color: #f6f9fc; }

main {
  min-height: 100vh; }

a {
  color: #00B7FF; }

.card {
  /* Override */
  position: inherit !important; }

#index .panel {
  padding: 50px 20px; }

#index h1, #index h3 {
  font-size: 30px; }

#index h2 {
  font-size: 35px; }

#index .first {
  display: flex;
  max-width: 1200px;
  padding-bottom: 50px; }
  #index .first .video {
    width: 50%; }
  #index .first .page-title {
    width: 50%; }
    #index .first .page-title p {
      line-height: 22px; }
      #index .first .page-title p strong {
        color: #FF4081; }
  #index .first .btn {
    margin: 30px 0 40px; }
  #index .first .features-btn:hover {
    background: none;
    color: #FF4081; }

#index .buttons {
  margin-bottom: 50px; }
  #index .buttons .btn {
    margin: 20px 0;
    background-color: #00BCD4; }
    #index .buttons .btn:hover {
      background-color: #2f3643; }
  #index .buttons .btn-flat {
    border: 2px #00BCD4 solid;
    border-radius: 2px;
    margin: 0 2px; }
    #index .buttons .btn-flat:hover {
      background-color: lightgrey; }

#index .bg-section {
  background-color: #f0f4f7; }
  #index .bg-section img {
    width: auto;
    max-width: 100%; }

#index .features header {
  margin-bottom: 40px; }

#index .features .share {
  padding: 20px; }
  #index .features .share i {
    color: #FF4081; }
  #index .features .share div {
    margin-bottom: 30px; }

#index .features h1 {
  font-size: 18px;
  margin: 10px 0 0 0;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }

#index .features .col .boxes {
  margin-top: 25px; }
  #index .features .col .boxes i {
    color: #00BCD4; }

.singlepost {
  padding: 15px 0; }
  .singlepost a:hover {
    color: #FF4081; }
  .singlepost .btn-flat:hover {
    color: #FF4081; }
  .singlepost .voting-section {
    border-top: 3px solid darkgray; }
  .singlepost .main-content, .singlepost .more {
    margin-bottom: 40px; }
  .singlepost .embedded-code .prettyprint {
    background: #2f4350;
    border-radius: 12px;
    font-size: 1em; }
  .singlepost #markdown h1 {
    font-size: 2rem;
    border-bottom: 1px solid lightgrey; }
  .singlepost #markdown h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid lightgrey; }
  .singlepost #markdown h3, .singlepost #markdown h4, .singlepost #markdown h5 {
    font-size: 1.2rem; }
  .singlepost #markdown h1, .singlepost #markdown h3, .singlepost #markdown h5, .singlepost #markdown h6 {
    font-weight: 600; }
  .singlepost #markdown h6 {
    color: grey; }
  .singlepost #markdown pre, .singlepost #markdown code {
    background-color: #f6f8fa;
    font-size: 14px;
    border-radius: 3px; }
  .singlepost #markdown pre {
    color: #222;
    padding: 16px;
    overflow: auto;
    line-height: 1.45; }
  .singlepost #markdown code {
    padding: 0.2em 0.4em;
    margin: 0; }
  .singlepost .comments {
    background-color: #f6f9fc;
    padding: 15px 50px 25px; }
    .singlepost .comments .title {
      margin-bottom: 20px; }
    .singlepost .comments .content {
      align-items: center;
      display: flex; }
      .singlepost .comments .content i {
        padding-right: 10px; }
    .singlepost .comments textarea {
      max-width: 350px;
      border: 1px solid lightgrey;
      border-radius: 5px; }
  .singlepost #more {
    margin: 40px 0; }
    .singlepost #more pre {
      font-size: 12px; }
  .singlepost .linked-posts h6 {
    padding-bottom: 15px; }
  .singlepost .linked-posts .code-cards {
    column-count: 1; }
  .singlepost #extensions-ad .posttitle {
    font-size: 14px; }

.directory .tabithas {
  margin-top: 10px;
  padding: 15px; }
  .directory .tabithas .btn-flat {
    border-radius: 12px;
    margin: 0 2px; }
    .directory .tabithas .btn-flat:hover {
      background-color: lightgrey; }
  .directory .tabithas .active {
    background-color: #0f2433;
    color: white; }
    .directory .tabithas .active:hover {
      background-color: darkgray; }

.directory .code-cards {
  padding: 0 50px; }

.directory .posts-content {
  margin: 30px auto;
  padding: 0 50px; }
  .directory .posts-content .grid-view .username {
    padding: 0 10px;
    color: #d8d8d8; }
    .directory .posts-content .grid-view .username a {
      color: #d8d8d8; }

.directory .fixwidth {
  max-width: 1000px; }

.directory .posts-options {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 50px;
  align-items: center; }
  .directory .posts-options .active {
    font-weight: 600; }
  .directory .posts-options a {
    color: #0f2433; }
    .directory .posts-options a:hover {
      color: #FF4081; }

.directory .dashboard-views, .dashboard .dashboard-views {
  align-items: center; }
  .directory .dashboard-views .view, .dashboard .dashboard-views .view {
    display: flex;
    justify-content: flex-end; }
    .directory .dashboard-views .view .normal, .dashboard .dashboard-views .view .normal {
      display: flex; }
  .directory .dashboard-views a, .dashboard .dashboard-views a {
    color: #90a4ae; }
    .directory .dashboard-views a:hover, .dashboard .dashboard-views a:hover {
      color: #FF4081; }
  .directory .dashboard-views .mutipleselect, .dashboard .dashboard-views .mutipleselect {
    display: none; }
    .directory .dashboard-views .mutipleselect select, .dashboard .dashboard-views .mutipleselect select {
      border: 1px solid transparent;
      padding-left: 25px;
      -webkit-appearance: none;
      border-radius: 12px;
      background-color: transparent;
      cursor: pointer;
      width: 155px; }
      .directory .dashboard-views .mutipleselect select:hover, .dashboard .dashboard-views .mutipleselect select:hover {
        color: #FF4081; }
      .directory .dashboard-views .mutipleselect select:focus, .dashboard .dashboard-views .mutipleselect select:focus {
        outline: none;
        border: 1px solid #f6f9fc; }
  .directory .dashboard-views .btn, .dashboard .dashboard-views .btn {
    display: flex;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 12px;
    border: 1px solid transparent; }
    .directory .dashboard-views .btn i, .dashboard .dashboard-views .btn i {
      margin-right: 5px; }
  .directory .dashboard-views .btn, .dashboard .dashboard-views .btn {
    background: transparent; }
    .directory .dashboard-views .btn:hover, .dashboard .dashboard-views .btn:hover {
      color: #FF4081; }
  .directory .dashboard-views #selectall, .directory .dashboard-views #deselectall, .dashboard .dashboard-views #selectall, .dashboard .dashboard-views #deselectall {
    padding: 0 2px; }
    .directory .dashboard-views #selectall i, .directory .dashboard-views #deselectall i, .dashboard .dashboard-views #selectall i, .dashboard .dashboard-views #deselectall i {
      margin: 0; }
  .directory .dashboard-views #delete-col, .dashboard .dashboard-views #delete-col {
    color: #9e9e9e;
    border: 1px solid #9e9e9e; }
    .directory .dashboard-views #delete-col:hover, .dashboard .dashboard-views #delete-col:hover {
      color: #FF4081;
      border: 1px solid #FF4081; }

.directory .view i, .dashboard .view i {
  margin-right: 5px; }

.directory .view a, .dashboard .view a {
  vertical-align: sub; }

.directory .list-view, .dashboard .list-view {
  max-width: 900px;
  margin: 10px auto 20px;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid lightgrey; }
  .directory .list-view h2, .dashboard .list-view h2 {
    font-size: 18px;
    color: #222; }
    .directory .list-view h2:hover, .dashboard .list-view h2:hover {
      color: #FF4081; }
  .directory .list-view a:hover, .dashboard .list-view a:hover {
    color: #FF4081; }
  .directory .list-view .single-item, .dashboard .list-view .single-item {
    padding: 10px 0 5px 50px;
    margin-left: -50px; }
    .directory .list-view .single-item:after, .dashboard .list-view .single-item:after {
      content: "";
      display: block;
      margin: 0 auto;
      border-bottom: 1px solid lightgrey; }
    .directory .list-view .single-item:last-child:after, .dashboard .list-view .single-item:last-child:after {
      border: none; }
  .directory .list-view .expand, .dashboard .list-view .expand {
    background-color: #f0f4f7;
    border-radius: 50px;
    cursor: pointer; }
  .directory .list-view pre, .dashboard .list-view pre {
    border-radius: 12px;
    padding: 10px 0;
    margin-top: 20px; }

.posts-content .empty {
  width: 100%;
  padding-top: 50px; }
  .posts-content .empty .delete-form a {
    color: #90a4ae; }
    .posts-content .empty .delete-form a:hover {
      color: #FF4081;
      background: transparent; }

.dashboard .feedback {
  position: absolute;
  top: 50%;
  right: -22px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg); }
  .dashboard .feedback a {
    padding: 5px;
    background-color: #f0f4f7;
    color: #15354a; }
    .dashboard .feedback a:hover {
      color: #FF4081; }

.boards {
  margin: 30px auto;
  max-width: 1200px;
  padding: 0 30px; }
  .boards .card-title {
    padding-bottom: 25px; }
    .boards .card-title a {
      font-size: 12px;
      font-weight: 400; }
      .boards .card-title a:hover {
        color: #FF4081; }
  .boards a h4 {
    color: white;
    font-size: 20px;
    margin-bottom: 0 !important;
    padding: 0 10px; }
    .boards a h4:hover {
      color: #FF4081; }
  .boards .yellowtext a {
    color: #ffce54; }
  .boards .bluetext a {
    color: #4fc1e9; }
  .boards .greentext a {
    color: #8BC34A; }
  .boards .purpletext a {
    color: #ac92ec; }
  .boards .collection a {
    background: transparent;
    font-weight: bold; }
    .boards .collection a:hover {
      background: #f6f9fc; }

.testimonials {
  margin: 20px auto 50px;
  max-width: 800px; }
  .testimonials p {
    padding: 15px;
    background: #f0f4f7;
    border-radius: 12px;
    margin-bottom: 10px;
    color: #616161; }
  .testimonials .yellowtext {
    color: #ffce54; }
  .testimonials .greentext {
    color: #8BC34A; }
  .testimonials .purpletext {
    color: #ac92ec; }

#boardsHere .code-cards {
  column-count: 4; }

.editPage, .newPage {
  background-color: #f0f4f7;
  padding: 10px; }
  .editPage .card, .newPage .card {
    border-radius: 12px;
    box-shadow: none; }
  .editPage .lang-dropdown, .newPage .lang-dropdown {
    height: 13px;
    display: flex;
    flex-flow: row-reverse; }
    .editPage .lang-dropdown select, .newPage .lang-dropdown select {
      max-width: 200px;
      z-index: 99;
      background: #f0f4f7;
      border: 1px solid lightgrey;
      border-bottom: none; }
    .editPage .lang-dropdown #autoformatter, .newPage .lang-dropdown #autoformatter {
      text-transform: capitalize; }
  .editPage .collections .card-title, .newPage .collections .card-title {
    border-radius: 12px 12px 0 0;
    color: #fff;
    background-color: #0f2433;
    padding: 10px;
    text-align: center; }
  .editPage .collections .input-field, .editPage .collections .add-new, .newPage .collections .input-field, .newPage .collections .add-new {
    padding: 0 10px; }
  .editPage #side, .newPage #side {
    margin-bottom: 100px; }
    .editPage #side .submit, .newPage #side .submit {
      margin-bottom: 25px; }
      .editPage #side .submit button, .newPage #side .submit button {
        width: 100%;
        border-radius: 5px; }

.edit-history {
  margin-top: 30px; }
  .edit-history h6 {
    margin-left: 1.5rem;
    margin-bottom: 25px;
    cursor: pointer; }
    .edit-history h6:hover {
      color: #FF4081; }
  .edit-history .collapsible {
    max-width: 600px;
    margin-bottom: 50px; }
    .edit-history .collapsible .active .collapsible-header {
      border-radius: 12px 12px 0 0; }
    .edit-history .collapsible li {
      border-radius: 12px; }
      .edit-history .collapsible li pre {
        margin: 0;
        padding: 15px;
        border-radius: 0 0 12px 12px; }
      .edit-history .collapsible li .collapsible-header {
        background-color: transparent;
        border-radius: 12px;
        border: 1px solid lightgrey;
        box-shadow: none; }
        .edit-history .collapsible li .collapsible-header:hover {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
      .edit-history .collapsible li .collapsible-body {
        padding: 0; }

.highlight-on {
  background-color: yellow; }

.embedded-code .highlight-on .pln {
  color: grey; }

.embedded-code .highlight-on .pun {
  color: grey; }

.form-card .form-card-title {
  background-color: #0f2433;
  border-radius: 12px 12px 0 0;
  color: #fff;
  padding: 10px;
  text-align: right; }
  .form-card .form-card-title h1 {
    font-size: 30px; }

.form-card .form-card-content {
  border-radius: 0 0 12px 12px;
  background-color: #fff; }

.form-bg {
  background-color: #f0f4f7;
  padding: 15px; }

.bg-light {
  background-color: #f6f9fc; }

.ext-btn {
  border-radius: 12px;
  margin: 10px;
  height: 78.76px; }
  .ext-btn:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.extensionUserForm {
  background-color: #0f2433; }
  .extensionUserForm .left-panel {
    height: 100vh;
    color: white;
    background-image: url(/images/code-brackets-bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 180%; }
    .extensionUserForm .left-panel .material-icons {
      padding-right: 7px;
      vertical-align: -6px; }
  .extensionUserForm .right-panel {
    background-color: #f0f4f7;
    height: 100vh; }
    .extensionUserForm .right-panel .form-card-title {
      text-align: left; }
    .extensionUserForm .right-panel h1 {
      padding: 0 15px;
      font-size: 26px; }
    .extensionUserForm .right-panel p {
      padding: 0 15px;
      color: #d8d8d8; }
    .extensionUserForm .right-panel .form-card {
      margin: 0 auto;
      width: 350px; }
    .extensionUserForm .right-panel .select-dropdown {
      border: 1px solid lightgrey;
      border-radius: 7px;
      padding: 5px 10px;
      color: #15354a; }
    .extensionUserForm .right-panel .input-field {
      width: 90%; }

.setupForm .progressBar {
  position: absolute;
  width: 100%;
  height: 7px;
  background-color: #d8d8d8;
  display: flex; }
  .setupForm .progressBar .progressStep {
    width: 33.3%;
    height: inherit;
    background-color: #FF4081;
    margin-right: 5px;
    transition: visibility 0s, opacity 0.5s linear; }
    .setupForm .progressBar .progressStep:last-child {
      margin-right: 0; }

.homepage {
  background-image: url(../images/computer-image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top right; }

.frontpage {
  background-image: url(../images/computer-image-cropped.jpg);
  height: 100%;
  background-position: top right;
  background-size: cover; }

.mainstuff {
  margin-left: 118px;
  padding-top: 270px;
  padding-left: 30px; }

.mainstuff .p {
  margin-top: 30px; }

.logoname {
  font: Helvetica;
  font-size: 7.5rem; }

.height-input {
  height: 40px !important; }

#signup-button {
  background-color: #8BC34A;
  border-color: grey; }

.second-section {
  padding: 15px;
  min-height: 100vh;
  height: auto; }

.bg-h1 {
  background-color: #0f2433;
  padding: 30px;
  color: white; }

.list-group-item.active {
  background-color: #0097A7; }

.CodeMirror {
  border: solid 1px lightgrey;
  border-radius: 5px;
  height: auto !important;
  min-height: 200px;
  font-size: 12px;
  font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important; }

.CodeMirror-scroll {
  height: auto;
  min-height: 200px;
  overflow-y: hidden;
  overflow-x: auto; }

.CodeMirror-matchingbracket {
  outline: 1px solid lightgrey; }

.card-header {
  color: white;
  background-color: #0097A7; }

.form-part {
  background-color: white;
  margin: 10px;
  align-items: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.dropdown-content {
  backface-visibility: hidden; }

#snippets .input-box {
  border: 1px solid lightgrey;
  border-radius: 5px !important;
  padding: 0 10px !important; }

#description {
  border: none;
  padding: 10px 0; }

.loginstuff {
  height: 750px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.line-breaks {
  white-space: pre-line; }

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: inline-block;
  margin: 0 0 1em;
  width: 100%; }

.list-group {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.guest-link {
  padding-top: 12px;
  color: #00BCD4; }

.card-title {
  padding: 5px 0; }

.form-container {
  max-width: 1000px;
  margin-bottom: 100px; }

#search {
  padding-left: 15px; }

.footer-nav a:hover {
  color: #00BCD4 !important; }

.search-results li a:hover {
  color: #8BC34A; }

.productupdates .tabithas {
  border-bottom: 1px solid lightgrey; }
  .productupdates .tabithas .tabs .indicator {
    background-color: #0f2433; }
  .productupdates .tabithas .tabs .tab a {
    color: #000; }
    .productupdates .tabithas .tabs .tab a:hover {
      color: #FF4081; }

.productupdates #web td {
  vertical-align: text-top; }

.productupdates #web td > ul > li {
  padding-top: 7px; }
  .productupdates #web td > ul > li a {
    color: #00BCD4; }
    .productupdates #web td > ul > li a:hover {
      color: #FF4081; }
  .productupdates #web td > ul > li:after {
    content: "";
    display: block;
    padding-top: 7px;
    margin: 0 auto;
    border-bottom: 1px solid #d8d8d8; }
  .productupdates #web td > ul > li:last-child:after {
    border: none; }

.btn {
  border-radius: 5px; }

.btn-small {
  background-color: #FF4081; }
  .btn-small:hover {
    background-color: #2f3643; }

.blue-to-grey {
  background-color: #00BCD4; }

.blue-to-grey:hover {
  background-color: #0f2433; }

.login-signup-button2 {
  background-color: #8BC34A;
  color: #FFFFFF; }

.login-signup-button2:hover {
  background-color: #455a64; }

.mobile-user-icons {
  display: flex;
  justify-content: space-between;
  margin: 0 48px; }

.mobile-icons-size {
  font-size: 32px; }

.login-button {
  background-color: #e8e8f0;
  color: #282420; }

.community-btn:hover {
  background-color: #8BC34A; }

.logo img {
  margin-left: 20px;
  width: 80%; }

pre {
  font-size: 0.8em;
  color: #fff; }

li a {
  color: #212121; }

.disc > li {
  margin-left: 35px;
  list-style-type: disc !important; }

.buttons-layout {
  flex-wrap: wrap;
  justify-content: space-between; }

.lang-button {
  margin-bottom: 5px; }

footer {
  padding: 30px 10px; }

.row {
  margin-bottom: 0; }

.pagination li.active {
  background-color: #00BCD4; }

.pagination li.a:hover {
  background-color: #FF4081; }

.show-mobile-only {
  visibility: hidden; }

nav .brand-logo {
  /* For displaying the BETA tag in mobile. remove this code when launched. */
  display: inline-table; }

.blue-background {
  background: #455a64; }

.nav-tag {
  font-size: 14px;
  display: inline; }

.homepage-bullets {
  margin-bottom: 15px;
  display: flex;
  align-items: center; }

.homepage-headers {
  font-size: 14px;
  display: inline;
  margin-top: 0;
  margin-bottom: 0; }

#board-lang svg {
  background-color: #8BC34A;
  fill: white;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); }

#board-lang input {
  border: solid 1px lightgrey;
  border-radius: 2px;
  padding: 0 7px; }

#board-lang .select-wrapper {
  background-color: white; }

#profile {
  max-width: 1500px; }
  #profile .tabithas {
    width: 350px; }
    #profile .tabithas .tabs .indicator {
      background-color: #0f2433; }
    #profile .tabithas .tabs .tab a {
      color: #000; }
      #profile .tabithas .tabs .tab a:hover {
        color: #FF4081; }
  #profile .header img {
    border: 1px solid #d8d8d8; }
  #profile .header .textcontent {
    width: 100%;
    word-wrap: break-word;
    margin: 10px; }
    #profile .header .textcontent h1 {
      color: #FF4081;
      font-size: 1.7vw; }
    #profile .header .textcontent .btn-small {
      margin-top: 15px; }

#home .tabs .indicator {
  background-color: rgba(139, 195, 74, 0); }

/*Color of underline*/
#home ul {
  border-bottom: 5px solid #8BC34A; }

.gForm {
  background-image: url(/images/preloader.gif);
  background-repeat: no-repeat; }

#home ul .active {
  background-color: #8BC34A; }

#home li:hover {
  background-color: transparent;
  color: white; }

.source-display {
  display: none; }

#boardModal {
  width: 40%; }

.collect-btn:hover {
  background: lightgrey; }

.darkmode {
  background: #0f2433;
  color: #fff; }
  .darkmode #search-bar {
    background: transparent;
    border: 1px solid #4c4c4c; }
    .darkmode #search-bar input::placeholder {
      color: darkgrey; }
    .darkmode #search-bar button {
      color: darkgrey; }
    .darkmode #search-bar .select-dropdown {
      color: darkgrey; }
    .darkmode #search-bar:focus-within {
      border: 1px solid lightgrey; }
      .darkmode #search-bar:focus-within input {
        color: lightgrey; }
      .darkmode #search-bar:focus-within button {
        color: #fff; }
  .darkmode nav a {
    color: #fff; }
  .darkmode .dashboard .dashboard-sidebar-bg {
    border-right: 1px solid #4c4c4c; }
  .darkmode .dashboard input {
    color: #fff; }
  .darkmode .code-cards .card {
    border: 1px solid darkgrey; }
  .darkmode .directory .posts-options a {
    color: #fff; }
    .darkmode .directory .posts-options a:hover {
      color: #FF4081; }
  .darkmode .directory .tabithas .btn-flat {
    color: darkgray; }
    .darkmode .directory .tabithas .btn-flat:hover {
      background-color: #FF4081;
      color: #fff; }
  .darkmode .directory .tabithas .active {
    background-color: lightgrey;
    color: #0f2433; }
  .darkmode .directory .posts-content .list-view .btn-flat, .darkmode .dashboard .posts-content .list-view .btn-flat {
    color: #d8d8d8; }
  .darkmode .directory .posts-content .list-view h2, .darkmode .dashboard .posts-content .list-view h2 {
    color: #fff; }
    .darkmode .directory .posts-content .list-view h2:hover, .darkmode .dashboard .posts-content .list-view h2:hover {
      color: #FF4081; }
  .darkmode .directory .posts-content .list-view .expand, .darkmode .dashboard .posts-content .list-view .expand {
    background-color: #15354a; }
  .darkmode .editPage, .darkmode .newPage {
    background-color: transparent; }
    .darkmode .editPage h5, .darkmode .newPage h5 {
      color: #fff; }
    .darkmode .editPage #mainform .material-icons, .darkmode .newPage #mainform .material-icons {
      color: #fff; }
    .darkmode .editPage #mainform .chip .close, .darkmode .newPage #mainform .chip .close {
      color: grey; }
    .darkmode .editPage #mainform .chips .input, .darkmode .newPage #mainform .chips .input {
      color: white; }
    .darkmode .editPage .collections .card-title, .darkmode .newPage .collections .card-title {
      background-color: #15354a;
      border-bottom: 1px solid darkgrey; }
    .darkmode .editPage .collections, .darkmode .newPage .collections {
      border: 1px solid #4c4c4c;
      border-radius: 12px; }
      .darkmode .editPage .collections a, .darkmode .newPage .collections a {
        color: lightgrey; }
        .darkmode .editPage .collections a:hover, .darkmode .newPage .collections a:hover {
          color: #FF4081;
          background-color: transparent; }
    .darkmode .editPage .card, .darkmode .newPage .card {
      background: transparent; }
      .darkmode .editPage .card .cm-s-neo.CodeMirror, .darkmode .newPage .card .cm-s-neo.CodeMirror {
        background-color: #15354a; }
      .darkmode .editPage .card textarea, .darkmode .newPage .card textarea {
        color: #fff; }
      .darkmode .editPage .card select, .darkmode .newPage .card select {
        background: transparent;
        border: 1px solid #5a5a5a;
        color: lightgray; }
  .darkmode .dashboard .dashboard-views select {
    color: white; }
  .darkmode .dashboard .dashboard-views .btn {
    color: lightgrey; }
    .darkmode .dashboard .dashboard-views .btn:hover {
      color: #FF4081; }
  .darkmode .dashboard .dashboard-content .subcollections a {
    color: lightgrey; }
  .darkmode .dashboard .dashboard-content .delete-form .btn-flat {
    color: grey; }
    .darkmode .dashboard .dashboard-content .delete-form .btn-flat:hover {
      color: #FF4081;
      background: transparent; }
  .darkmode #snippets .input-box {
    border: 1px solid #5a5a5a;
    color: #fff; }
  .darkmode .modal {
    background: #0f2433; }
    .darkmode .modal .modal-footer {
      background-color: #0f2433; }
      .darkmode .modal .modal-footer a {
        color: #fff; }
  .darkmode #messageus textarea, .darkmode #messageus input {
    color: #fff; }
  .darkmode .singlepost .btn-flat {
    color: lightgrey; }
    .darkmode .singlepost .btn-flat:hover {
      color: #FF4081; }
  .darkmode .singlepost .comments {
    background-color: #15354a; }
  .darkmode .bg-light {
    background-color: #15354a; }
  .darkmode .form-bg {
    background-color: #0f2433; }
    .darkmode .form-bg .form-card-title {
      border: 1px solid darkgray; }
    .darkmode .form-bg .form-card-content {
      background-color: #15354a;
      border: 1px solid darkgray; }
      .darkmode .form-bg .form-card-content input {
        color: #fff; }
  .darkmode #profile .tabithas .tabs .indicator {
    background-color: #fff; }
  .darkmode #profile .tabithas .tabs .tab a {
    color: lightgrey; }
    .darkmode #profile .tabithas .tabs .tab a:hover {
      color: #FF4081; }
  .darkmode .collapsible-body {
    border-radius: 0 0 12px 12px;
    border: 1px solid #ddd; }
  .darkmode .blue-to-grey:hover {
    background-color: grey; }

#messageus textarea {
  resize: vertical;
  min-height: 120px; }

#messageus input {
  width: 96%; }

#messageus textarea, #messageus input {
  border: 1px solid lightgrey;
  padding: 5px 10px;
  border-radius: 12px; }

.warning {
  margin: 15px 0 30px; }
  .warning ul {
    margin: 15px 0 25px; }
  .warning li {
    margin: 15px 0; }
  .warning i {
    margin-right: 7px; }

[type="radio"]:checked + span:after {
  background-color: #00BCD4; }

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block; }

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */ }

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible; }

.logo-size {
  margin: 0 20px;
  font-size: 25px; }

#post-title {
  font-size: 2rem; }

#closeBtnPopup {
  color: #757575;
  cursor: pointer; }
  #closeBtnPopup:hover {
    color: #c62828;
    font-size: 27px;
    transition-duration: 0.1s; }

.savecode-icon {
  color: #00BCD4;
  background-color: #0f2433;
  border-radius: 100%;
  padding: 10px; }
  .savecode-icon:hover {
    background-color: #FF4081;
    color: #fff; }

.card-link {
  padding: 20px 10px;
  background: #2f4350;
  border-radius: 0 0 12px 12px; }
  .card-link a {
    overflow-wrap: break-word; }
    .card-link a:hover {
      text-decoration: underline; }

.shareBtn {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1); }

.btn-outline {
  border: 3px solid #00BCD4;
  background-color: #fff;
  color: #0f2433;
  border-radius: 7px;
  box-shadow: none; }
  .btn-outline:hover {
    color: #fff; }

.embedded-code pre {
  padding: 20px;
  margin: 0;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* Internet Explorer 5.5+ */ }

.embedded-code .buttons a:hover {
  color: #b5bd68 !important; }

.embedded-code .buttons i {
  padding: 5px; }

.embedded-code footer {
  margin: 0;
  padding: 5px 20px;
  background: #262a2b;
  color: #c5c8c6;
  font-size: 13px;
  border-radius: 0 0 12px 12px; }
  .embedded-code footer p {
    margin: 10px; }
  .embedded-code footer a {
    color: #c5c8c6; }
    .embedded-code footer a:hover {
      text-decoration: underline;
      color: #FF4081; }
  .embedded-code footer .website:hover {
    color: #00BCD4; }

.embedded-code .prettyprint {
  background: #2f4350;
  font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;
  border: 0 !important; }

.embedded-code .pln {
  color: #e6e9ed; }

.embedded-code ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
  color: #656d78; }

.embedded-code li.L0, .embedded-code li.L1, .embedded-code li.L2, .embedded-code li.L3, .embedded-code li.L4, .embedded-code li.L5, .embedded-code li.L6, .embedded-code li.L7, .embedded-code li.L8, .embedded-code li.L9 {
  padding-left: 1em;
  background-color: #2f4350;
  list-style-type: decimal; }

@media screen {
  .embedded-code .str {
    color: #ffce54; }
  .embedded-code .kwd {
    color: #4fc1e9; }
  .embedded-code .com {
    color: #656d78; }
  .embedded-code .typ {
    color: #4fc1e9; }
  .embedded-code .lit {
    color: #ac92ec; }
  .embedded-code .pun {
    color: #e6e9ed; }
  .embedded-code .opn {
    color: #e6e9ed; }
  .embedded-code .clo {
    color: #e6e9ed; }
  .embedded-code .tag {
    color: #4db6ac; }
  .embedded-code .atn {
    color: #a0d468; }
  .embedded-code .atv {
    color: #ffce54; }
  .embedded-code .dec {
    color: #ac92ec; }
  .embedded-code .var {
    color: #e6e9ed; }
  .embedded-code .fun {
    color: #e6e9ed; } }

.twitter {
  width: 800px; }

#oembed pre {
  overflow: scroll;
  white-space: pre;
  white-space: -moz-pre;
  /* Mozilla, since 1999 */
  white-space: -o-pre; }

.no-code-icon {
  font-size: 75px;
  color: lightgray;
  border-radius: 500px;
  padding: 15px;
  border: 5px solid lightgrey; }

#search-bar {
  background: #fff;
  border: 1px solid lightgray;
  border-radius: 12px !important; }
  #search-bar:focus {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
  #search-bar .select-wrapper {
    display: none;
    width: 90px;
    border-right: 1px solid lightgray; }
    #search-bar .select-wrapper input.select-dropdown {
      border: none;
      font: 14px "Roboto", Helvetica, Arial, sans-serif; }
      #search-bar .select-wrapper input.select-dropdown:focus {
        border: none; }
  #search-bar input {
    width: 95%;
    border: none;
    margin: 0;
    padding: 0 10px; }
  #search-bar button {
    cursor: pointer;
    background: none;
    border: none;
    color: grey; }
    #search-bar button i:hover {
      color: #FF4081; }
  #search-bar:focus-within .select-wrapper {
    display: block; }
  #search-bar:focus-within button {
    color: #222; }

.toast-styling {
  border-radius: 12px;
  background: white;
  color: #222;
  font-size: 18px;
  font-weight: normal; }

.progress .indeterminate {
  background-color: #00BCD4; }

.dashboard {
  min-height: 90vh; }
  .dashboard .dashboard-sidebar-bg {
    position: fixed;
    width: 200px;
    background: #0f2433;
    height: 100vh;
    top: 0;
    z-index: -200; }
  .dashboard .dashboard-sidebar {
    position: fixed;
    width: 200px;
    overflow-y: scroll;
    top: 60px;
    bottom: 0;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */ }
    .dashboard .dashboard-sidebar::-webkit-scrollbar {
      display: none; }
    .dashboard .dashboard-sidebar .profile {
      height: 70px;
      width: 70px;
      background-color: lightgrey;
      margin: 10px 20px 20px; }
    .dashboard .dashboard-sidebar .save-btn {
      margin-bottom: 40px; }
      .dashboard .dashboard-sidebar .save-btn a {
        border-radius: 12px;
        color: #0f2433;
        background: white; }
        .dashboard .dashboard-sidebar .save-btn a:hover {
          background: lightgrey; }
    .dashboard .dashboard-sidebar .active li {
      background: #FF4081; }
    .dashboard .dashboard-sidebar .child {
      display: none; }
      .dashboard .dashboard-sidebar .child li {
        background: #15354a; }
        .dashboard .dashboard-sidebar .child li:hover {
          border-left: 3px solid white; }
      .dashboard .dashboard-sidebar .child .active {
        border-left: 3px solid white; }
    .dashboard .dashboard-sidebar .parent li {
      padding: 15px 5px; }
    .dashboard .dashboard-sidebar .parent span {
      vertical-align: super; }
    .dashboard .dashboard-sidebar .parent i:hover {
      background-color: #0f2433;
      border-radius: 50px; }
    .dashboard .dashboard-sidebar li {
      padding: 15px;
      color: white;
      font-weight: 400; }
      .dashboard .dashboard-sidebar li:hover {
        background: grey; }
  .dashboard .dashboard-content {
    margin-left: 200px;
    padding: 0 50px; }
    .dashboard .dashboard-content .title {
      padding-left: 10px;
      display: none;
      text-transform: capitalize; }
    .dashboard .dashboard-content .deletepostbtns {
      display: none; }
    .dashboard .dashboard-content .photopostbtns {
      display: none; }
    .dashboard .dashboard-content .card:hover .deletepostbtns, .dashboard .dashboard-content .single-item:hover .deletepostbtns {
      display: inline-block; }
    .dashboard .dashboard-content .card:hover .photopostbtns, .dashboard .dashboard-content .single-item:hover .photopostbtns {
      display: inline-block; }
    .dashboard .dashboard-content .card:hover .delbox, .dashboard .dashboard-content .single-item:hover .delbox {
      opacity: 100%; }
    .dashboard .dashboard-content .list-view .deletepostbtns {
      display: inline-block; }
    .dashboard .dashboard-content .list-view .single-item input[type='checkbox'] {
      transform: scale(1.5);
      position: relative;
      pointer-events: all;
      margin-left: -50px;
      float: left; }
      .dashboard .dashboard-content .list-view .single-item input[type='checkbox']:checked {
        filter: invert(100%) hue-rotate(349deg) brightness(1.7);
        opacity: 100%; }
    .dashboard .dashboard-content .list-view .single-item:hover input[type='checkbox'] {
      opacity: 100%; }
    .dashboard .dashboard-content .grid-view input[type='checkbox'] {
      transform: scale(1.5);
      position: relative;
      pointer-events: all;
      float: left;
      margin: 10px 5px; }
      .dashboard .dashboard-content .grid-view input[type='checkbox']:checked {
        filter: invert(100%) hue-rotate(349deg) brightness(1.7);
        opacity: 100%; }
    .dashboard .dashboard-content .editCollectionBox {
      display: flex;
      height: 45px; }
      .dashboard .dashboard-content .editCollectionBox button {
        height: -webkit-fill-available; }
      .dashboard .dashboard-content .editCollectionBox input {
        flex-grow: 1;
        height: 42px;
        border-bottom: none; }
    .dashboard .dashboard-content .subcollections a {
      color: #222;
      border: 1px solid lightgrey;
      border-radius: 12px;
      text-transform: none; }
      .dashboard .dashboard-content .subcollections a:hover {
        color: #FF4081;
        background: #f6f9fc; }

.no-posts-dashboard .welcome-message {
  width: 100%;
  position: absolute;
  top: 40vh;
  left: 4vw;
  padding-left: 200px;
  padding-right: 30px;
  z-index: -1; }
  .no-posts-dashboard .welcome-message h1 {
    font-size: 2em; }

.no-posts-dashboard .browse-abs-block {
  top: 75px;
  position: absolute;
  display: flex;
  right: 185px; }

.no-posts-dashboard .add-snip-block {
  top: 75px;
  position: absolute;
  right: 85px; }

.no-posts-dashboard .edit-prof-block {
  top: 70px;
  position: absolute;
  display: flex;
  left: 150px; }

.no-posts-dashboard .chrome-btn {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 50px; }

.navbar-fixed #search-bar {
  margin: 0 20px; }

.code-cards {
  column-gap: 1em;
  column-count: 2; }
  .code-cards .card-snippet:hover {
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.29); }
    .code-cards .card-snippet:hover .card-content .posttitle {
      color: #FF4081; }
  .code-cards .card {
    border-radius: 12px;
    box-shadow: none;
    background-color: #0f2433;
    margin-bottom: 30px; }
    .code-cards .card .card-content {
      padding: 0; }
      .code-cards .card .card-content .btn-flat {
        color: #d8d8d8; }
      .code-cards .card .card-content .icons {
        padding: 2px 10px;
        text-align: right;
        cursor: default; }
        .code-cards .card .card-content .icons i {
          font-size: 1rem; }
      .code-cards .card .card-content p {
        padding: 0 10px 7px; }
      .code-cards .card .card-content .posttitle {
        font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;
        overflow-wrap: break-word;
        color: white;
        font-size: 16px;
        padding: 2px 10px;
        display: block; }
        .code-cards .card .card-content .posttitle:hover {
          color: #FF4081; }
      .code-cards .card .card-content a {
        font-size: 12px; }
        .code-cards .card .card-content a:hover {
          color: #FF4081; }
    .code-cards .card pre {
      width: -webkit-fill-available;
      border-radius: 0 0 12px 12px;
      padding: 15px;
      max-height: 600px;
      overflow: hidden; }

.extension-hints {
  max-width: 1000px;
  padding: 50px 20px; }
  .extension-hints div {
    margin-bottom: 50px; }
    .extension-hints div img {
      width: 90%;
      max-width: 500px; }

.sideborder {
  border-right: 1px solid lightgrey;
  margin-bottom: 20px; }

#embedded-code pre {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */ }
  #embedded-code pre::-webkit-scrollbar {
    display: none; }

#embedded-code .mobile-btns {
  display: none; }
  #embedded-code .mobile-btns a {
    margin-right: 5px; }

@media screen and (max-width: 550px) {
  #extensions-ad {
    border-top: 1px solid lightgrey; }
  .sideborder {
    border-right: none; }
  #embedded-code .mobile-btns {
    display: block; }
  #embedded-code .desktop-btns {
    display: none; } }

@media screen and (max-width: 350px) {
  body {
    overflow-x: scroll; } }

@media screen and (max-width: 430px) {
  nav .dashboard-logo {
    margin: 5px;
    font-size: 10px; }
  nav .hidden-logo {
    visibility: hidden; }
  h1 {
    font-size: 3.0rem; }
  #post-title {
    font-size: 1.5rem; }
  pre {
    font-size: 0.8em; }
  .code-cards {
    padding: 0 10px;
    column-count: 1; }
    .code-cards .posttitle {
      font-size: 14px; }
  .ext-btn {
    width: auto;
    height: 50px; }
  .dashboard .dashboard-sidebar {
    width: 80px; }
    .dashboard .dashboard-sidebar .profile {
      height: 30px;
      width: 30px;
      margin: 20px 0 0; }
    .dashboard .dashboard-sidebar .save-btn {
      display: none; }
    .dashboard .dashboard-sidebar li {
      padding: 10px 5px; }
      .dashboard .dashboard-sidebar li i {
        display: none; }
      .dashboard .dashboard-sidebar li span {
        font-size: 8px; }
  .dashboard .dashboard-sidebar-bg {
    width: 80px; }
  .dashboard .dashboard-content {
    margin-left: 80px;
    padding: 10px; }
    .dashboard .dashboard-content .title {
      display: inline-block; }
    .dashboard .dashboard-content .btn-text {
      display: none; }
  .dashboard .edit-prof-block {
    display: none; }
  .dashboard .welcome-message {
    padding-left: 80px; }
    .dashboard .welcome-message h1 {
      font-size: 1.5em; } }

@media screen and (max-width: 550px) and (min-width: 430px) {
  #post-title {
    font-size: 2rem; }
  .dashboard-content {
    padding: 15px; } }

@media screen and (max-width: 600px) {
  .hide-on-mobile {
    visibility: hidden;
    display: none; }
  #side {
    display: flex;
    flex-direction: column; }
    #side .submit {
      margin-top: 25px;
      order: 2; }
    #side .collections {
      order: 1; }
  #index .testimonials p {
    font-size: 12px; }
  #index .first {
    flex-direction: column; }
    #index .first .video {
      width: 100%; }
    #index .first .page-title {
      width: 100%; }
    #index .first .info {
      order: 1;
      text-align: center; }
    #index .first .video {
      order: 2; }
    #index .first .buttons {
      order: 3;
      text-align: center; }
  .add-snip-block {
    right: 70px; }
  .extensionUserForm .left-panel {
    height: auto;
    padding: 50px 10px; }
    .extensionUserForm .left-panel .vscodebullets {
      margin: 0; }
  .extensionUserForm .right-panel {
    height: auto;
    padding: 30px 10px; }
  #profile .header img {
    width: 100px; }
  #profile .header .textcontent {
    text-align: center; }
    #profile .header .textcontent h1 {
      font-size: 2.3rem; }
    #profile .header .textcontent p {
      color: #757575; }
  .directory .code-cards {
    margin: 0; }
  .directory .posts-content {
    padding: 0 15px; }
    .directory .posts-content .posts-options {
      padding: 0 15px; } }

@media screen and (max-width: 660px) {
  .directory .code-cards {
    column-count: 2;
    padding: 0 15px; }
    .directory .code-cards .posttitle {
      font-size: 14px; } }

@media screen and (max-width: 685px) {
  #search-bar svg {
    display: none; }
  .logo-size {
    font-size: 15px; } }

@media screen and (max-width: 710px) {
  #search-bar {
    margin: 0 10px;
    width: 10%; }
  #index #search-bar {
    width: 100%; }
    #index #search-bar input {
      width: 70%; } }

@media screen and (max-width: 720px) {
  .dashboard .code-cards {
    column-count: 1; } }

@media screen and (max-width: 760px) and (min-width: 600px) {
  #profile .header .textcontent h1 {
    font-size: 2.5vw; } }

@media screen and (max-width: 760px) {
  .dashboard .browse-abs-block {
    display: none; } }

@media screen and (max-width: 860px) and (min-width: 430px) {
  .code-cards {
    column-count: 2; }
  pre {
    font-size: 0.8em;
    width: -webkit-fill-available; } }

@media screen and (max-width: 750px) and (min-width: 550px) {
  .disapper-new {
    display: none; } }

@media screen and (max-width: 1200px) and (min-width: 800px) {
  .code-cards {
    column-count: 3; } }

@media screen and (max-width: 930px) and (min-width: 720px) {
  .dashboard .code-cards {
    column-count: 2; } }

@media screen and (max-width: 990px) {
  .show-mobile-only {
    visibility: visible; }
  .front {
    height: 70vh; }
  .brand-logo {
    margin-left: 0; } }

@media only screen and (min-width: 990px) {
  .front {
    height: 100vh; } }

@media screen and (max-width: 996px) {
  .code-mycards {
    padding-left: 0px; }
  .resp-padding-for-sidebar {
    padding-left: 0px; }
  .bookmark-padding {
    margin-left: 0px; } }

@media only screen and (min-width: 1200px) {
  .code-cards {
    column-count: 4; }
  .code-mycards {
    column-count: 3;
    padding-left: 300px; }
  .resp-padding-for-sidebar {
    padding-left: 300px; }
  .bookmark-padding {
    margin-left: 300px; } }