/* Screen size */
@keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@-moz-keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fadeup {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeOut {
  from {
    display: block;
    opacity: 1;
    height: auto; }
  to {
    opacity: 0;
    height: 0;
    display: none; } }

@-webkit-keyframes fadeOut {
  from {
    display: block;
    opacity: 1;
    height: auto; }
  to {
    opacity: 0;
    height: 0;
    display: none; } }

@-moz-keyframes fadeOut {
  from {
    display: block;
    opacity: 1;
    height: auto; }
  to {
    opacity: 0;
    height: 0;
    display: none; } }

body {
  background-color: #FFF;
  padding: 0;
  margin: 0; }

* {
  font-family: "Roboto", helvetica, sans-serif;
  font-weight: 300;
  letter-spacing: 0.5px;
  scroll-behavior: smooth;
  scroll-margin: 40px; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: none; }

ul.list-inline {
  padding: 0;
  margin: 0; }
  ul.list-inline li {
    display: inline-block; }

.title {
  color: #7d7d7d; }
  .title.search-title {
    padding: 40px 0;
    display: block; }
    .title.search-title strong {
      font-weight: bold; }

/* Buttons */
.generic-banner {
  padding: 60px 0; }

.primary-color {
  color: #0061ff; }

.grey {
  color: #7d7d7d; }

.btn {
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #303030;
  background: #FFF; }

.btn-primary {
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #FFF;
  background: #0061ff;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  border: none; }
  .btn-primary:hover {
    background: #004ac2; }

.btn-secondary {
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #303030;
  background: #b0f8fc;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  border: none; }
  .btn-secondary:hover {
    background-color: #d7fbfd; }

.btn-outline {
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #0061ff;
  background: #FFF;
  border: 2px solid #0061ff; }

.btn-icon {
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #7d7d7d;
  background: "none";
  padding: 10px; }
  .btn-icon i.icon {
    margin-right: 0;
    font-size: 18px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s; }
    .btn-icon i.icon.fa-keyboard {
      font-size: 20px;
      position: relative;
      top: 1.5px; }
  .btn-icon:hover i.con {
    color: #303030 !important; }

.btn-settings {
  padding: 10px 0; }
  .btn-settings i {
    position: relative;
    top: 2px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s; }

.btn-checkbox {
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  color: #303030;
  background: #FFF;
  padding: 10px 0;
  text-transform: none;
  font-size: 16px;
  color: #303030;
  background: none; }
  .btn-checkbox input {
    display: none; }
    .btn-checkbox input:checked + span::before {
      background: #0061ff;
      border-radius: 100%; }
  .btn-checkbox span {
    padding-left: 30px;
    position: relative; }
    .btn-checkbox span::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 2px;
      height: 15px;
      width: 15px;
      border: 2px solid #0061ff;
      transition: all 1s;
      -moz-transition: all 1s;
      -webkit-transition: all 1s; }

/* Fonts */
.big-title {
  font-size: 44px;
  font-weight: bold; }
  @media screen and (max-width: 575px) {
    .big-title {
      font-size: 30px; } }

.medium-title {
  font-size: 32px;
  margin: 0; }
  @media screen and (max-width: 575px) {
    .medium-title {
      font-size: 24px; } }

.small-title {
  font-size: 18px;
  margin: 0;
  font-weight: bold;
  text-transform: capitalize;
  color: #303030; }
  @media screen and (max-width: 575px) {
    .small-title {
      font-size: 20px; } }

i.icon {
  color: #7d7d7d;
  margin-right: 10px; }
  i.icon.white {
    color: #FFF; }

header {
  padding-top: 20px; }
  header .right-col,
  header .close-wrapper {
    text-align: right; }
  header .user-wrapper {
    color: #303030; }
    header .user-wrapper .title {
      padding-bottom: 5px; }
    header .user-wrapper strong {
      font-weight: bold; }
  header li.user-wrapper {
    padding-right: 20px; }

.alert-wrapper {
  position: fixed;
  z-index: 9999;
  bottom: 10px;
  left: 10px;
  right: 10px;
  width: auto;
  overflow: hidden;
  animation: fadeOut 1s 3s 1 forwards; }
  .alert-wrapper span {
    display: block;
    padding: 20px;
    background-color: #e1fcfe;
    border-radius: 5px; }
    .alert-wrapper span strong {
      text-transform: capitalize;
      font-weight: bold; }
  .alert-wrapper.delete span {
    background-color: #ffdbbf; }

/* Formulaire */
.form-wrapper.search {
  text-align: right; }

.form-wrapper form input[type="text"], .form-wrapper form input[type="password"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #F4F4F4;
  margin-bottom: 10px;
  width: 100%; }
  .form-wrapper form input[type="text"].inline, .form-wrapper form input[type="password"].inline {
    display: inline-block; }
  .form-wrapper form input[type="text"].searchform, .form-wrapper form input[type="password"].searchform {
    max-width: 200px;
    border-radius: 50px;
    padding-left: 20px;
    margin-bottom: 0; }

.form-wrapper form select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  background-color: #F4F4F4;
  margin-bottom: 10px;
  width: 100%; }

.form-wrapper form textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: block;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
  background-color: #F4F4F4; }
  .form-wrapper form textarea.code {
    padding: 20px;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New; }

.form-wrapper form button {
  border: none;
  cursor: pointer; }
  .form-wrapper form button.inline {
    display: inline-block; }

.form-wrapper form .btn-wrapper {
  padding-top: 10px; }

.max-width-md {
  display: block;
  max-width: 600px;
  margin: 0 auto; }

.text-center {
  text-align: center; }

.btn-filter {
  display: block;
  border: 2px solid #F4F4F4;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color: #7d7d7d;
  background: #F4F4F4; }
  .btn-filter.active, .btn-filter:hover {
    background: #b0f8fc;
    border-color: #b0f8fc;
    color: #0061ff;
    transition: all 0.75s;
    -moz-transition: all 0.75s;
    -webkit-transition: all 0.75s; }
    .btn-filter.active span.item-count, .btn-filter:hover span.item-count {
      background: #FFF;
      color: #0061ff; }
  .btn-filter span.item-count {
    margin-left: 2.5px;
    font-weight: bold; }

section .filters-wrapper {
  padding: 20px 0;
  position: sticky;
  position: -moz-sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 2;
  background: #FFF;
  text-align: left; }
  section .filters-wrapper .title {
    color: #7d7d7d;
    font-weight: 400; }
  section .filters-wrapper ul li {
    margin-bottom: 5px; }
    section .filters-wrapper ul li span.title {
      padding-right: 10px; }
    section .filters-wrapper ul li span.item-count {
      padding: 0 5px;
      border-radius: 50px;
      opacity: 0.8;
      background: #F4F4F4; }

section.connect-wrapper {
  padding: 40px 10px; }
  section.connect-wrapper .form-wrapper form .btn-wrapper {
    margin-top: 0; }

section .snippet-wrapper article {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto; }
  section .snippet-wrapper article.snippet-item {
    display: none;
    border-radius: 10px;
    padding: 25px 20px;
    margin-top: 20px;
    background: #F4F4F4;
    transform: translateX(10px);
    opacity: 0; }
    section .snippet-wrapper article.snippet-item.visible {
      display: block;
      animation: fadeup 1s 0.3s 1 forwards; }
    section .snippet-wrapper article.snippet-item header {
      padding-top: 0; }
      section .snippet-wrapper article.snippet-item header ul {
        padding-top: 10px; }
      section .snippet-wrapper article.snippet-item header .item-btn {
        color: #0061ff;
        text-transform: capitalize;
        font-weight: bold;
        position: relative;
        padding-right: 30px; }
        section .snippet-wrapper article.snippet-item header .item-btn i.chevron {
          display: block;
          position: absolute;
          height: 10px;
          width: 10px;
          top: 15px;
          right: 15px;
          opacity: 0.5;
          border: 4px solid #7d7d7d;
          border-left: none;
          border-bottom: none;
          transform: rotate(135deg);
          transition: all 0.5s;
          -moz-transition: all 0.5s;
          -webkit-transition: all 0.5s; }
    section .snippet-wrapper article.snippet-item aside.snippet-actions {
      text-align: right;
      transition: all 0.85s;
      -moz-transition: all 0.85s;
      -webkit-transition: all 0.85s; }
      @media screen and (min-width: 991px) {
        section .snippet-wrapper article.snippet-item aside.snippet-actions {
          opacity: 0; } }
      section .snippet-wrapper article.snippet-item aside.snippet-actions form input {
        display: none; }
      section .snippet-wrapper article.snippet-item aside.snippet-actions form .delete-btn {
        border: none;
        -moz-appearance: none;
        background: none;
        cursor: pointer; }
        section .snippet-wrapper article.snippet-item aside.snippet-actions form .delete-btn i {
          color: #7d7d7d;
          margin-right: 0; }
    section .snippet-wrapper article.snippet-item .label {
      border: 2px solid #FFF;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 12px; }
      section .snippet-wrapper article.snippet-item .label--lang {
        text-transform: uppercase;
        background-color: #b0f8fc;
        border-color: #b0f8fc;
        color: #0061ff;
        font-weight: bold; }
      section .snippet-wrapper article.snippet-item .label--url {
        background: #FFF;
        color: #303030 !important;
        display: block;
        max-width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis; }
    section .snippet-wrapper article.snippet-item .code-wrapper {
      height: 0;
      overflow: hidden; }
    section .snippet-wrapper article.snippet-item .context-wrapper {
      margin-top: 20px; }
      section .snippet-wrapper article.snippet-item .context-wrapper span {
        color: #7d7d7d;
        font-size: 14px; }
    section .snippet-wrapper article.snippet-item .code-wrapper-item {
      max-width: 100%;
      margin: 20px 0 0;
      padding: 20px;
      background-color: #131616;
      border-radius: 10px;
      box-shadow: 0 0 100px rgba(0, 0, 0, 0.5) inset;
      overflow: scroll; }
      section .snippet-wrapper article.snippet-item .code-wrapper-item pre {
        margin: 0; }
      section .snippet-wrapper article.snippet-item .code-wrapper-item code {
        color: #FFF;
        font-size: 14px;
        font-weight: 600;
        opacity: 0.9;
        font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New; }
    section .snippet-wrapper article.snippet-item.active .code-wrapper {
      height: 100%;
      animation: fadeup 1s 1 forwards; }
    section .snippet-wrapper article.snippet-item.active header .item-btn i.chevron {
      transform: rotate(-45deg); }
    section .snippet-wrapper article.snippet-item:hover aside.snippet-actions, section .snippet-wrapper article.snippet-item.active aside.snippet-actions {
      opacity: 1; }

.settings-wrapper .btn-wrapper {
  margin-top: 40px; }

.add-wrapper {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  bottom: 10px;
  text-align: center;
  padding-top: 40px;
  opacity: 0; }
  .add-wrapper .btn {
    display: inline-block; }

main.is-active .add-wrapper {
  animation: fadeup 1s 1 forwards; }

footer {
  padding: 0 20px; }
  footer p {
    font-size: 14px; }
    footer p a {
      color: #0061ff; }

body.darkmode {
  background: #212121; }
  body.darkmode .btn-filter {
    background: #1c1c1c;
    border-color: #1c1c1c;
    color: #FFF; }
    body.darkmode .btn-filter.active, body.darkmode .btn-filter:hover {
      background: #b0f8fc;
      color: #0061ff;
      border-color: #b0f8fc; }
      body.darkmode .btn-filter.active span.item-count, body.darkmode .btn-filter:hover span.item-count {
        background: #e1fcfe; }
    body.darkmode .btn-filter span.item-count {
      background: #202020; }
  body.darkmode .btn-outline {
    background: #2D2D2D;
    border-color: #2D2D2D;
    color: #F4F4F4; }
  body.darkmode .btn-checkbox span {
    color: #F4F4F4; }
  body.darkmode .btn-icon:hover i,
  body.darkmode .btn-settings:hover i {
    color: #FFF !important; }
  body.darkmode .btn-icon:hover i.fa-trash-alt,
  body.darkmode .btn-settings:hover i.fa-trash-alt {
    color: #ffdbbf !important; }
  body.darkmode p {
    color: #F4F4F4; }
  body.darkmode .primary-color {
    color: #b0f8fc; }
  body.darkmode .search-title {
    color: #b0f8fc; }
  body.darkmode section .filters-wrapper {
    background: #212121; }
  body.darkmode section .snippet-wrapper article.snippet-item {
    background: #171717; }
    body.darkmode section .snippet-wrapper article.snippet-item header .item-btn {
      color: #FFF;
      opacity: 0.92; }
    body.darkmode section .snippet-wrapper article.snippet-item .label--url {
      background-color: #141414;
      border-color: #141414;
      color: #FFF !important; }
    body.darkmode section .snippet-wrapper article.snippet-item.active header .item-btn {
      opacity: 1; }
    body.darkmode section .snippet-wrapper article.snippet-item.active .context-wrapper span {
      color: #FFF;
      transition: all 0.5s;
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s; }
  body.darkmode .form-wrapper form textarea {
    background: #171717;
    color: #FFF; }
    body.darkmode .form-wrapper form textarea.code {
      background: #070707;
      color: #b0f8fc; }
  body.darkmode .form-wrapper form input[type="text"], body.darkmode .form-wrapper form select {
    background-color: #171717;
    color: #FFF; }
    body.darkmode .form-wrapper form input[type="text"].searchform, body.darkmode .form-wrapper form select.searchform {
      background-color: #1c1c1c; }

.d-mobile {
  display: none; }

@media screen and (max-width: 767px) {
  .d-desktop {
    display: none !important; } }

@media screen and (max-width: 575px) {
  .d-mobile {
    display: block;
    opacity: 0;
    animation: fadeup 1s 3s 1 forwards; }
  ul.list-inline li {
    margin-bottom: 5px; }
  .generic-banner {
    padding: 20px 0; }
  .btn-icon {
    padding: 10px 7.5px; }
  header.main-header {
    padding-top: 40px;
    text-align: center; }
    header.main-header .title {
      padding-bottom: 10px; }
    header.main-header .right-col {
      padding: 40px 15px 0; }
      header.main-header .right-col ul {
        text-align: center; }
        header.main-header .right-col ul li a {
          display: block; }
  section .filters-wrapper {
    padding: 15px 0 0; }
    section .filters-wrapper ul.list-inline {
      white-space: nowrap;
      overflow: scroll;
      padding-bottom: 5px; }
      section .filters-wrapper ul.list-inline li {
        display: inline-block;
        margin: 0 5px 0 0; }
  section .snippet-wrapper article.snippet-item {
    padding: 20px 20px 15px; }
    section .snippet-wrapper article.snippet-item header ul {
      padding-top: 20px; }
    section .snippet-wrapper article.snippet-item header .item-btn {
      padding-right: 100px;
      display: block; }
      section .snippet-wrapper article.snippet-item header .item-btn i.chevron {
        right: 80px;
        top: 11px; }
    section .snippet-wrapper article.snippet-item aside.snippet-actions {
      max-width: 90px;
      padding: 0;
      position: absolute;
      top: 15px;
      right: 10px; }
    section .snippet-wrapper article.snippet-item ul.list-inline li {
      max-width: 100%;
      overflow: hidden;
      max-width: 230px; }
      section .snippet-wrapper article.snippet-item ul.list-inline li a, section .snippet-wrapper article.snippet-item ul.list-inline li span {
        display: block;
        text-overflow: ellipsis;
        overflow: hidden; }
    section .snippet-wrapper article.snippet-item .context-wrapper {
      margin-top: 10px; }
      section .snippet-wrapper article.snippet-item .context-wrapper span {
        color: #303030; }
    section .snippet-wrapper article.snippet-item .code-wrapper {
      padding: 0 5px; }
  section .snippet-wrapper .listing-wrapper {
    display: block;
    margin: 40px auto 0; }
  .form-wrapper form .btn-wrapper {
    margin-top: 20px; }
  .form-wrapper.search {
    text-align: center;
    padding-top: 10px; }
  .form-wrapper.add {
    padding: 10px; }
    .form-wrapper.add .btn-wrapper {
      position: sticky;
      position: -webkit-sticky;
      position: -moz-sticky;
      bottom: 20px;
      margin-bottom: 20px; }
  aside.settings-wrapper {
    padding-top: 40px; }
    aside.settings-wrapper .form-wrapper {
      text-align: center; }
  body.darkmode header.main-header .grey {
    color: #FFF; }
  body.darkmode article.snippet-item .context-wrapper span {
    color: #FFF; } }