@charset "UTF-8";
/**
 * Sometimes we have to change the cprails style to ensure the global styles updates get applied.
 * If you find yourself in that position, update this comment to help trigger the change.
 * Last Updated at: 2026-03-13 2:48:00
 */
/* Extra values we can use if we decide we need more control in the future */
@property --bg-angle {
  inherits: false;
  initial-value: 0turn;
  syntax: "<angle>";
}
@-webkit-keyframes gradient-spin {
  to {
    --bg-angle: 1turn;
  }
}
@keyframes gradient-spin {
  to {
    --bg-angle: 1turn;
  }
}
:export {
  --theme-default: Dark;
  --theme-dark: Dark;
  --theme-light: Light;
}

:root {
  background: var(--cp-bg);
  color: var(--cp-color);
  --cp-sidebar-width: 180px;
  --cp-header-height: 65px;
  --cp-header-height-small: 53px;
  --cp-control-bar-height: 29px;
  --cp-control-bar-space-between: 1.5rem;
  --cp-font-family:
    "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  --cp-font-family-header: "Telefon Black", Sans-Serif;
  --cp-font-family-header-alt: "Telefon", Sans-Serif;
  --cp-font-family-monospace:
    SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --cp-font-family-editor: var(--cp-font-family-monospace);
  --cp-box-shadow: 0 6px 12px var(--cp-color-shadow);
  /**
  * # Button Variables
  * See @codepen/library/src/components/Button/Button.module.scss for usage
  */
  --cp-button-default-bg: var(--cp-button-bg);
  --cp-button-default-color: var(--cp-button-color);
  --cp-button-icon: currentColor;
  --cp-button-border-width: 3px;
  --cp-button-border-radius: 4px;
  --cp-button-margin-block: 1px;
  --cp-button-margin-inline: 10px;
  --cp-button-padding-inline: 16px;
  --cp-button-padding-block: 10px;
  --cp-pen-logo-size: 30px;
  --cp-pen-header-spacing: calc(var(--cp-pen-sidebar-spacing) * 1.5);
  --cp-pen-sidebar-width: 60px;
  --cp-pen-sidebar-icon-size: 26px;
  --cp-pen-sidebar-spacing: 6px;
  --cp-pen-sidebar-minimal-width: 6px;
  --cp-pen-panel-spacing: 10px;
  --cp-pen-bar-height: 45px;
  --cp-pen-editor-tab-spacing: 1px;
}
@media (max-width: 1100px) {
  :root {
    --cp-pen-logo-size: 24px;
    --cp-pen-sidebar-width: 50px;
    --cp-pen-sidebar-spacing: 4px;
    --cp-pen-sidebar-icon-size: 24px;
    --cp-pen-sidebar-minimal-width: 6px;
    --cp-pen-panel-spacing: 6px;
  }
}

/**
  * # THEME COLORS
  * The colors in use around the site. Don't use Sass variables anymore, reference the CSS variables.
  * These Sass variables are now scoped in here to prevent any kind of external usage, but they're still semi-useful as Sass variables for where they need to be repeated here.
  *
  * ## rgba / fade / transparent values
  * Mostly, color usage can and should be done with like var(--cp-color-8), but we've found that one more-than-a-few occasions, theme colors need slight adjustments to be useful in real life situations.
  * To help with this, we provide the raw `*-hsl` value variable for each color. For example, a theme color needs a slight bit of opacity applied to it. You can accomplish this like so
  * `color: hsl(var(--cp-color-17-hsl) / 80% );`
  *
  * Helpful Sass Color RegEx for finding Sass colors in use around the app: \$((collections|pens|posts|projects|users|picks|popular|following|topics|gray|green|red|yellow|purple|blue)(Color)?(-light|-dark|-very-light)?(-[0-9])?)
  */
:root {
  /* --cp-color-1 = white; */
  --cp-color-1-hsl: 0deg 0% 100%;
  --cp-color-1: hsl(var(--cp-color-1-hsl));
  /* --cp-color-2 = #f1f1f3; */
  --cp-color-2-hsl: 240deg 7.69% 94.9%;
  --cp-color-2: hsl(var(--cp-color-2-hsl));
  /* --cp-color-3 = rgb(234, 234.5, 237.5); */
  --cp-color-3-hsl: 231.43deg 9.09% 92.45%;
  --cp-color-3: hsl(var(--cp-color-3-hsl));
  /* --cp-color-4 = #e3e4e8; */
  --cp-color-4-hsl: 228deg 9.8% 90%;
  --cp-color-4: hsl(var(--cp-color-4-hsl));
  /* --cp-color-5 = #d5d7de; */
  --cp-color-5-hsl: 226.67deg 12% 85.29%;
  --cp-color-5: hsl(var(--cp-color-5-hsl));
  /* --cp-color-6 = #c7c9d3; */
  --cp-color-6-hsl: 230deg 12% 80.39%;
  --cp-color-6: hsl(var(--cp-color-6-hsl));
  /* --cp-color-7 = #b7bbc8; */
  --cp-color-7-hsl: 225.88deg 13.39% 75.1%;
  --cp-color-7: hsl(var(--cp-color-7-hsl));
  /* --cp-color-8 = #aaaebc; */
  --cp-color-8-hsl: 226.67deg 11.84% 70.2%;
  --cp-color-8: hsl(var(--cp-color-8-hsl));
  /* --cp-color-9 = #9b9dad; */
  --cp-color-9-hsl: 233.33deg 9.89% 64.31%;
  --cp-color-9: hsl(var(--cp-color-9-hsl));
  /* --cp-color-10 = #868ca0; */
  --cp-color-10-hsl: 226.15deg 12.04% 57.65%;
  --cp-color-10: hsl(var(--cp-color-10-hsl));
  /* --cp-color-11 = #717790; */
  --cp-color-11-hsl: 228.39deg 12.25% 50.39%;
  --cp-color-11: hsl(var(--cp-color-11-hsl));
  /* --cp-color-12 = #5a5f73; */
  --cp-color-12-hsl: 228deg 12.2% 40.2%;
  --cp-color-12: hsl(var(--cp-color-12-hsl));
  /* --cp-color-13 = #444857; */
  --cp-color-13-hsl: 227.37deg 12.26% 30.39%;
  --cp-color-13: hsl(var(--cp-color-13-hsl));
  /* --cp-color-14 = #2c303a; */
  --cp-color-14-hsl: 222.86deg 13.73% 20%;
  --cp-color-14: hsl(var(--cp-color-14-hsl));
  /* --cp-color-15 = rgb(37, 39.5, 48); */
  --cp-color-15-hsl: 226.36deg 12.94% 16.67%;
  --cp-color-15: hsl(var(--cp-color-15-hsl));
  /* --cp-color-16 = #1e1f26; */
  --cp-color-16-hsl: 232.5deg 11.76% 13.33%;
  --cp-color-16: hsl(var(--cp-color-16-hsl));
  /* --cp-color-17 = #131417; */
  --cp-color-17-hsl: 225deg 9.52% 8.24%;
  --cp-color-17: hsl(var(--cp-color-17-hsl));
  /* --cp-color-18 = #0a0a0c; */
  --cp-color-18-hsl: 240deg 9.09% 4.31%;
  --cp-color-18: hsl(var(--cp-color-18-hsl));
  /* --cp-color-19 = #010101; */
  --cp-color-19-hsl: 0deg 0% 0.39%;
  --cp-color-19: hsl(var(--cp-color-19-hsl));
  /* --cp-color-20 = black; */
  --cp-color-20-hsl: 0deg 0% 0%;
  --cp-color-20: hsl(var(--cp-color-20-hsl));
  /* --cp-color-green = #47cf73; */
  --cp-color-green-hsl: 139.41deg 58.62% 54.51%;
  --cp-color-green: hsl(var(--cp-color-green-hsl));
  /* --cp-color-green-light = #d3ffe1; */
  --cp-color-green-light-hsl: 139.09deg 100% 91.37%;
  --cp-color-green-light: hsl(var(--cp-color-green-light-hsl));
  /* --cp-color-green-dark = #248c46; */
  --cp-color-green-dark-hsl: 139.62deg 59.09% 34.51%;
  --cp-color-green-dark: hsl(var(--cp-color-green-dark-hsl));
  /* --cp-color-yellow = #ffdd40; */
  --cp-color-yellow-hsl: 49.32deg 100% 62.55%;
  --cp-color-yellow: hsl(var(--cp-color-yellow-hsl));
  /* --cp-color-yellow-light = #f9e9a2; */
  --cp-color-yellow-light-hsl: 48.97deg 87.88% 80.59%;
  --cp-color-yellow-light: hsl(var(--cp-color-yellow-light-hsl));
  /* --cp-color-yellow-dark = #d9b200; */
  --cp-color-yellow-dark-hsl: 49.22deg 100% 42.55%;
  --cp-color-yellow-dark: hsl(var(--cp-color-yellow-dark-hsl));
  /* --cp-color-yellow-darker = #5c4813; */
  --cp-color-yellow-darker-hsl: 43.56deg 65.77% 21.76%;
  --cp-color-yellow-darker: hsl(var(--cp-color-yellow-darker-hsl));
  /* --cp-color-purple = #ae63e4; */
  --cp-color-purple-hsl: 274.88deg 70.49% 64.12%;
  --cp-color-purple: hsl(var(--cp-color-purple-hsl));
  /* --cp-color-purple-light = #be9fe4; */
  --cp-color-purple-light-hsl: 266.96deg 56.1% 75.88%;
  --cp-color-purple-light: hsl(var(--cp-color-purple-light-hsl));
  /* --cp-color-purple-dark = #754cac; */
  --cp-color-purple-dark-hsl: 265.63deg 38.71% 48.63%;
  --cp-color-purple-dark: hsl(var(--cp-color-purple-dark-hsl));
  /* --cp-color-red = #ff3c41; */
  --cp-color-red-hsl: 358.46deg 100% 61.76%;
  --cp-color-red: hsl(var(--cp-color-red-hsl));
  /* --cp-color-red-very-light = #ffcfcb; */
  --cp-color-red-very-light-hsl: 4.62deg 100% 89.8%;
  --cp-color-red-very-light: hsl(var(--cp-color-red-very-light-hsl));
  /* --cp-color-red-light = #f19994; */
  --cp-color-red-light-hsl: 3.23deg 76.86% 76.27%;
  --cp-color-red-light: hsl(var(--cp-color-red-light-hsl));
  /* --cp-color-red-dark = #a00808; */
  --cp-color-red-dark-hsl: 0deg 90.48% 32.94%;
  --cp-color-red-dark: hsl(var(--cp-color-red-dark-hsl));
  /* --cp-color-blue = #0ebeff; */
  --cp-color-blue-hsl: 196.18deg 100% 52.75%;
  --cp-color-blue: hsl(var(--cp-color-blue-hsl));
  /* --cp-color-blue-light = #76daff; */
  --cp-color-blue-light-hsl: 196.2deg 100% 73.14%;
  --cp-color-blue-light: hsl(var(--cp-color-blue-light-hsl));
  /* --cp-color-blue-dark = #3d88c3; */
  --cp-color-blue-dark-hsl: 206.42deg 52.76% 50.2%;
  --cp-color-blue-dark: hsl(var(--cp-color-blue-dark-hsl));
  /* --cp-color-link = #76daff; */
  --cp-color-link-hsl: 196.2deg 100% 73.14%;
  --cp-color-link: hsl(var(--cp-color-link-hsl));
  /* --cp-color-link-on-white = #1f798f; */
  --cp-color-link-on-white-hsl: 191.79deg 64.37% 34.12%;
  --cp-color-link-on-white: hsl(var(--cp-color-link-on-white-hsl));
  /* --cp-color-link-on-black = #56bcf9; */
  --cp-color-link-on-black-hsl: 202.45deg 93.14% 65.69%;
  --cp-color-link-on-black: hsl(var(--cp-color-link-on-black-hsl));
  /* --cp-color-pens = #0ebeff; */
  --cp-color-pens-hsl: 196.18deg 100% 52.75%;
  --cp-color-pens: hsl(var(--cp-color-pens-hsl));
  /* --cp-color-posts = #47cf73; */
  --cp-color-posts-hsl: 139.41deg 58.62% 54.51%;
  --cp-color-posts: hsl(var(--cp-color-posts-hsl));
  /* --cp-color-collections = #ae63e4; */
  --cp-color-collections-hsl: 274.88deg 70.49% 64.12%;
  --cp-color-collections: hsl(var(--cp-color-collections-hsl));
  /* --cp-color-projects = #ffdd40; */
  --cp-color-projects-hsl: 49.32deg 100% 62.55%;
  --cp-color-projects: hsl(var(--cp-color-projects-hsl));
  --cp-bg-gradient-linear: linear-gradient(
    to right,
    var(--cp-color-blue),
    var(--cp-color-yellow),
    var(--cp-color-purple),
    var(--cp-color-green)
  );
}
:root {
  --cp-bg-gradient: radial-gradient(
    circle at top left,
    var(--cp-color-green),
    var(--cp-color-blue),
    var(--cp-color-purple),
    var(--cp-color-yellow)
  );
}
@supports (background-image: conic-gradient(from 0deg, #000, #fff)) {
  :root {
    --cp-bg-gradient: conic-gradient(
      from var(--bg-angle, 0deg),
      var(--cp-color-yellow),
      var(--cp-color-green),
      var(--cp-color-blue),
      var(--cp-color-purple),
      var(--cp-color-yellow)
    );
  }
}

/* No selectors if theme is default to keep the CSS simple and keep specificity low. The if statement targets :root if there's no parent, like for the main theme styles */
:root {
  color-scheme: dark;
  --cp-bg: var(--cp-color-17);
  --cp-bg-hsl: var(--cp-color-17-hsl);
  --cp-color: var(--cp-color-1);
  --cp-color-hsl: var(--cp-color-1-hsl);
  --cp-color-shadow-hsl: var(--cp-color-18-hsl);
  --cp-color-shadow: hsl(var(--cp-color-shadow-hsl) / 60%);
  --cp-overlay-bg: var(--cp-color-13);
  --cp-overlay-bg-gradient: radial-gradient(
    circle,
    hsl(var(--cp-color-11-hsl) / 90%) 35%,
    hsl(var(--cp-color-13-hsl) / 90%)
  );
  --cp-color-link-hover: var(--cp-color-1);
  /**
   * Button Variables
   * See @codepen/library/src/components/Button/Button.module.scss for usage
   */
  --cp-button-bg: var(--cp-color-13);
  --cp-button-color: white;
  --cp-button-hover-bg: var(--cp-color-12);
  --cp-button-hover-color: var(--cp-button-color);
  --cp-button-hover-icon: var(--cp-button-icon);
  --cp-button-active: var(--cp-color-13);
  /**
   * Grids
   */
  --cp-grid-item-bg: var(--cp-color-16);
  --cp-grid-item-color: var(--cp-color-1);
  --cp-grid-item-screenshot-bg: var(--cp-color-13);
  --cp-grid-item-screenshot-color: var(--cp-color-11);
  --cp-grid-item-author-color: var(--cp-color-7);
  /**
   * Forms & Input Variables
   */
  --cp-input-bg: var(--cp-color-4);
  --cp-input-color: var(--cp-color-17);
  --cp-input-placeholder: var(--cp-color-10);
  --cp-input-focus-border: var(--cp-color-11);
  --cp-input-focus-bg: var(--cp-color-1);
  --cp-select-bg: var(--cp-color-13);
  --cp-select-color: var(--cp-color-4);
  --cp-select-hover-bg: var(--cp-color-14);
  --cp-select-hover-color: var(--cp-color-2);
  --cp-select-focus-border: var(--cp-color-18);
  --cp-radio-bg: var(--cp-color-15);
  --cp-radio-border: var(--cp-color-12);
  --cp-radio-checked-bg: var(--cp-color-green);
  --cp-radio-checked-color: var(--cp-color-1);
  /**
   * ControlBar
   */
  --cp-control-bar-bg: var(--cp-color-16);
  --cp-control-bar-color: var(--cp-color-10);
  --cp-control-bar-input-bg: var(--cp-color-14);
  --cp-control-bar-input-color: var(--cp-color-3);
  --cp-control-bar-input-placeholder: var(--cp-color-8);
  --cp-control-bar-input-focus-bg: var(--cp-color-13);
  --cp-control-bar-input-focus-color: var(--cp-color-1);
  --cp-control-bar-input-focus-border-color: var(--cp-color-12);
  --cp-control-bar-button-bg: var(--cp-color-13);
  --cp-control-bar-button-hover-bg: var(--cp-color-11);
  --cp-control-bar-button-color: var(--cp-color-1);
  /* --cp-modal-border = #262830; */
  --cp-modal-border-hsl: 228deg 11.63% 16.86%;
  --cp-modal-border: hsl(var(--cp-modal-border-hsl));
  --cp-modal-bg: var(--cp-color-17);
  --cp-modal-bg-hsl: var(--cp-color-17-hsl);
  --cp-modal-color: var(--cp-color-1);
  --cp-modal-content-border: var(--cp-color-15);
  --cp-modal-footer-bg: var(--cp-color-18);
  --cp-modal-alt-bg: var(--cp-color-16);
  --cp-modal-nav-color: var(--cp-color-8);
  --cp-modal-nav-active-color: var(--cp-color-1);
  --cp-modal-nav-active-bg: var(--cp-color-14);
  --cp-modal-nav-active-border: var(--cp-color-green);
  /**
   * Dropdowns
   */
  --cp-dropdown-bg: var(--cp-color-16);
  --cp-dropdown-color: var(--cp-color-1);
  --cp-dropdown-border: var(--cp-color-13);
  --cp-dropdown-fill: var(--cp-color-11);
  /**
   * Old Editor Header
   */
  --cp-editor-actions-bg: var(--cp-color-16);
  /**
   * New Editor Variables
   */
  --cp-pen-border: var(--cp-color-15);
  --cp-pen-border-hover: var(--cp-color-13);
  --cp-pen-header-bg: var(--cp-color-20);
  --cp-pen-header-color: var(--cp-color-1);
  --cp-pen-header-color-secondary: var(--cp-color-8);
  --cp-pen-header-button-bg: var(--cp-color-15);
  --cp-pen-header-button-icon: var(--cp-color-10);
  --cp-pen-header-button-color: var(--cp-color-8);
  --cp-pen-header-button-hover-bg: var(--cp-color-13);
  --cp-pen-header-button-hover-color: var(--cp-color-3);
  --cp-pen-panel-bg: var(--cp-color-16);
  --cp-pen-panel-color: var(--cp-color-1);
  --cp-pen-panel-bg-secondary: var(--cp-color-13);
  --cp-pen-panel-color-secondary: var(--cp-color-7);
  --cp-pen-panel-box-bg: var(--cp-color-14);
  --cp-pen-panel-box-border: var(--cp-color-16);
  --cp-pen-panel-box-color: var(--cp-color-1);
  --cp-pen-panel-box-secondary-color: var(--cp-color-6);
  --cp-pen-panel-box-input-bg: var(--cp-color-5);
  --cp-pen-panel-box-input-color: var(--cp-color-14);
  --cp-pen-panel-box-input-focus-bg: var(--cp-color-16);
  --cp-pen-panel-box-input-focus-color: var(--cp-color-4);
  --cp-pen-editor-header-bg: var(--cp-color-18);
  --cp-pen-editor-tab-bg: var(--cp-color-16);
  --cp-pen-editor-tab-color: var(--cp-color-5);
  --cp-pen-editor-tab-border: var(--cp-color-13);
  --cp-pen-editor-dropdown-bg: var(--cp-color-12);
  --cp-pen-editor-content-bg: var(--cp-color-17);
  --cp-pen-editor-content-color: var(--cp-color-1);
  --cp-pen-footer-bg: var(--cp-color-18);
  --cp-pen-footer-color: var(--cp-color-10);
  --cp-pen-footer-color-highlight: var(--cp-color-6);
}

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

html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body {
  min-height: 100%;
}

.preload * {
  -webkit-transition: none !important;
  transition: none !important;
}

img,
a img {
  outline: 0;
  border: 0;
}

img {
  max-width: 100%;
  height: auto;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
}

.width-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  padding: 0 2rem;
}
@media (max-width: 550px) {
  .width-wrapper {
    padding: 0 10px;
  }
}

body.admin-logged-in-as-user {
  --admin-bar-height: 16px;
  padding-top: var(--admin-bar-height) !important;
}
body.admin-logged-in-as-user::before {
  content: "⚠️ ADMIN LOGGED IN AS USER - Log out to switch back to admin.";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: red;
  color: white;
  z-index: 999;
  font-size: 11px;
  height: var(--admin-bar-height);
}

@font-face {
  font-family: "Telefon Black";
  src: url("https://public.codepenassets.com/fonts/telefon-black.654a55c7fc5c69899e4c776e9440cb.woff2") format("woff2");
}
@font-face {
  font-family: "Telefon";
  src: url("https://public.codepenassets.com/fonts/telefon-bold.30e9132f184f36be19ce6e4b9024ab.woff2") format("woff2");
}
html {
  font-family: var(--cp-font-family);
  line-height: 1.5;
  font-size: 15px;
  font-weight: 400;
}
@media (max-width: 830px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 550px) {
  html {
    font-size: 13px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  margin: 0 0 10px 0;
  font-weight: normal;
}
h1 .title-callout,
h2 .title-callout,
h3 .title-callout,
h4 .title-callout,
h5 .title-callout,
h6 .title-callout {
  color: var(--cp-color-blue);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--cp-font-family);
}

h1,
.h1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--cp-font-family-header);
  line-height: 1.1;
  font-size: 3rem;
}
@media (max-width: 550px) {
  h1,
  .h1 {
    font-size: 2.2rem;
  }
}

h2,
.h2 {
  font-family: var(--cp-font-family-header-alt);
  font-size: 1.8rem;
}

h3,
.h3,
dt {
  font-size: 1.4rem;
  font-weight: bold;
}

h4,
.h4 {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

h5,
.h5 {
  font-weight: bold;
  text-transform: uppercase;
}

h6 {
  font-weight: bold;
}

p,
pre,
blockquote {
  margin: 0 0 1em 0;
}
p:empty,
pre:empty,
blockquote:empty {
  display: none;
}

a {
  text-decoration: none;
  color: var(--cp-color-link);
}
a:hover, a:focus {
  cursor: pointer;
  color: var(--cp-color-link-hover);
}

time {
  color: var(--cp-color-7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 80%;
}

code {
  font-family: var(--cp-font-family-monospace);
}

blockquote {
  padding-left: 1.625rem;
}
blockquote :last-child {
  margin: 0;
}

aside p,
aside address {
  color: var(--cp-color-8);
  font-style: normal;
}

.text ul,
.text ol {
  margin: 0 0 1.5rem 0;
  padding: 0 0 0 1.5rem;
}
.text ul li,
.text ol li {
  margin: 0 0 0.5rem 0;
}
.text table {
  border-collapse: collapse;
  margin: 0 0 1rem 0;
}
.text table th,
.text table td {
  padding: 3px 8px;
  border: 1px solid var(--cp-color-11);
}
.text > p:last-child {
  margin-bottom: 0;
}

.page-wrap {
  position: relative;
  padding: 20px 20px 50px 20px;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  margin: -1px;
}

.visually-hidden {
  position: absolute !important;
  top: -9999px;
  left: -9999px;
}

.mobile-break {
  display: none;
}
@media (max-width: 550px) {
  .mobile-break {
    display: block;
  }
}

textarea:focus,
textarea:active {
  outline: 0;
}

[disabled],
.disabled,
.faded {
  opacity: 0.5 !important;
  cursor: default !important;
  pointer-events: none;
}

hr,
.sep {
  height: 0;
  border: 0;
  border-top: 1px solid var(--cp-color-14);
  margin: 30px 0 40px 0;
}

input[type=name],
input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=datetime-local],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
textarea {
  font-family: var(--cp-font-family);
  font-size: 13px;
  -webkit-appearance: none;
  padding: 4px 5px 4px 5px;
  outline: 0;
  background: var(--cp-color-5);
  color: var(--cp-color-15);
  border: 3px solid var(--cp-color-5);
  border-radius: 3px;
}
input[type=name]:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=number]:focus,
textarea:focus {
  border-color: var(--cp