.create-dropdown,
.user-dropdown,
.pen-templates-dropdown,
.activity-dropdown,
.priority-nav__dropdown,
.view-switcher {
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    position: absolute;
    top: 100%;
    padding: 5px 0;
    width: 220px;
    color: #222;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, -webkit-transform 0.15s;
    transition: transform 0.15s, opacity 0.15s;
    transition: transform 0.15s, opacity 0.15s, -webkit-transform 0.15s;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-transform-origin: top right;
    transform-origin: top right
}
.open.create-dropdown,
.open.user-dropdown,
.open.pen-templates-dropdown,
.open.activity-dropdown,
.open.priority-nav__dropdown,
.open.view-switcher {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
html,
body {
    height: 100%;
    -webkit-overflow-scrolling: touch
}
.preload * {
    transition: none !important
}
img,
a img {
    outline: 0;
    border: 0
}
.page-wrap {
    position: relative;
    padding: 20px 20px 50px 20px
}
img {
    max-width: 100%;
    height: auto
}
h1.download {
	position: fixed;
	top: 20%;
	left: 20%;
}
.mega-header {
    position: relative;
    border-bottom: 1px solid black;
    box-shadow: 0 2px 15px black;
    background: #000 url(https://production-assets.codepen.io/assets/global/texture-codepen-2-d817063398aa9a2b534f3834f8533e2bae759c25933b86cdd149d9f0cc38563d.png);
    background-position: 0 -5px;
    padding: 50px 20px 50px 20px;
    margin: 0 0 20px 0
}
.mega-header.center h1,
.mega-header.center p {
    padding-right: 0;
    max-width: 100%
}
.mega-header.mega-header-only {
    padding-bottom: 0
}
.mega-header h1 {
    font-size: 4.0rem;
    padding: 0 25% 0 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}
.mega-header .mega-header-subhead {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555
}
.mega-header .mega-header-subdescription {
    max-width: 800px;
    margin: auto;
    letter-spacing: 0.1px;
    line-height: 26px
}
.mega-header p {
    color: #999;
    font-size: 1.2rem;
    padding-right: 200px
}
.mega-header p,
.mega-header blockquote,
.mega-header ol,
.mega-header ul {
    max-width: 1000px
}
.mega-header .actions-meta {
    position: absolute;
    top: 0;
    right: 20px;
    text-align: right
}
@media (max-width: 550px) {
    .mega-header .actions-meta {
        position: static;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        text-align: left
    }
    .mega-header .actions-meta .post-meta-line-hearter {
        display: none
    }
    .mega-header .actions-meta .meta-line br {
        display: none
    }
}
.mega-header .meta-line {
    margin: 0 0 10px 0
}
.mega-header .date-block {
    padding: 4px 8px;
    color: black;
    font-weight: bold
}
@media (max-width: 850px) {
    .mega-header {
        padding-left: 20px;
        padding-right: 20px
    }
}
@media (max-width: 550px) {
    .mega-header {
        background: black;
        padding: 20px 10px 10px 10px !important
    }
    .mega-header h1 {
        font-size: 2.5rem;
        margin: 0 0 0.5rem 0;
        padding-right: 0
    }
    .mega-header p {
        padding-right: 0
    }
    .mega-header time,
    .mega-header button,
    .mega-header a {
        margin-right: 5px
    }
}
@media (max-width: 550px) {
    .bonus-text {
        display: none
    }
}
.more-link {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: 0.2s
}
.more-link svg {
    width: 16px;
    height: 16px;
    fill: white;
    position: relative;
    top: 3px;
    padding: 2px;
    transition: 0.2s
}
.more-link:hover svg,
.more-link:focus svg {
    fill: #ccc;
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}
.more-link.more-link-pens:hover,
.more-link.more-link-pens:focus {
    color: #8ee0ff
}
.more-link.more-link-pens svg {
    fill: #0ebeff
}
.more-link.more-link-projects:hover,
.more-link.more-link-projects:focus {
    color: #ffeb8d
}
.more-link.more-link-projects svg {
    fill: #ffdd40
}
.more-link.more-link-posts:hover,
.more-link.more-link-posts:focus {
    color: #84dfa1
}
.more-link.more-link-posts svg {
    fill: #47cf73
}
.more-link.more-link-collections:hover,
.more-link.more-link-collections:focus {
    color: #d0a4ef
}
.more-link.more-link-collections svg {
    fill: #ae63e4
}
.title-header {
    position: relative;
    margin: 40px 0 25px 0
}
.title-header .more-link {
    position: absolute;
    right: 0;
    bottom: 10px
}
.posts-title-header {
    border-bottom: 5px solid #47cf73
}
.pens-title-header {
    border-bottom: 5px solid #0ebeff
}
.collections-title-header {
    border-bottom: 5px solid #ae63e4
}
.projects-title-header {
    border-bottom: 5px solid #ffdd40
}
.header-help {
    position: absolute;
    right: 0;
    bottom: 7px
}
.header-help svg {
    fill: #ccc;
    width: 13px;
    height: 13px
}
.header-help:hover svg,
.header-help:focus svg {
    fill: white
}
.little-big-header {
    font-size: 4.5rem;
    margin: 0;
    color: white
}
@media (max-width: 550px) {
    .little-big-header {
        font-size: 2.8rem
    }
}
.grid-size-toggle {
    position: absolute;
    right: 0;
    bottom: 10px
}
@media (max-width: 550px) {
    .grid-size-toggle .button,
    .grid-size-toggle .file-upload-button {
        padding: 4px 4px 4px 2px
    }
    .grid-size-toggle .button svg,
    .grid-size-toggle .file-upload-button svg {
        display: none
    }
    .grid-size-toggle #button-12-up::before {
        content: "12"
    }
    .grid-size-toggle #button-6-up::before {
        content: "6"
    }
}
.main-header {
    background: black;
    border-bottom: 1px solid #222;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: middle;
    -ms-flex-align: middle;
    align-items: middle;
    position: relative;
    z-index: 11;
    height: 65px
}
.main-header.up-and-away {
    transition: height 0.2s ease, -webkit-transform 0.2s ease;
    transition: height 0.2s ease, transform 0.2s ease;
    transition: height 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
    height: 0;
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px)
}
@media (max-width: 615px) {
    .main-header .header-activity {
        display: none
    }
    .main-header .dropdown-activity {
        display: block
    }
}
@media (max-width: 510px) {
    .main-header .logo {
        margin-right: 0
    }
}
.logo {
    margin: 0;
    position: relative;
    z-index: 1;
    height: 100%;
    margin-right: 20px
}
.logo .small-screen-logo {
    display: block;
    width: 30px;
    height: 100%;
    margin: 0 10px
}
.logo .small-screen-logo svg {
    fill: white;
    height: 100%;
    width: 100%
}
.logo .large-screen-logo {
    display: none;
    font: 0/0 a;
    background: url(https://production-assets.codepen.io/assets/logos/codepen-logo-0b07553e128f9be6a5f2e8a3f80a08f2772c2f56c054d78091ee82f6f3f02727.svg) no-repeat 18px 21px;
    background-size: 138px 24px;
    width: 180px;
    height: 65px;
    border: 0;
    outline: 0
}
@media (min-width: 551px) {
    .main-header .logo {
        width: auto
    }
    .main-header .logo .large-screen-logo {
        display: block
    }
    .main-header .logo .small-screen-logo {
        display: none
    }
}
.primary-nav {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: middle;
    -ms-flex-align: middle;
    align-items: middle
}
.primary-nav.show-more-text .primary-nav-more {
    display: inline
}
.primary-nav .primary-nav-more {
    display: none
}
.primary-nav>a,
.primary-nav>ul>li>a,
.primary-nav #overflow-nav-menu-link {
    line-height: 65px;
    position: relative;
    font-size: 16px;
    color: #acacac;
    display: inline-block;
    margin-right: 10px
}
.primary-nav>a:hover,
.primary-nav>ul>li>a:hover,
.primary-nav #overflow-nav-menu-link:hover {
    color: white
}
.primary-nav>a:hover .dropdown-arrow,
.primary-nav>ul>li>a:hover .dropdown-arrow,
.primary-nav #overflow-nav-menu-link:hover .dropdown-arrow {
    fill: white !important
}
.primary-nav>ul>li>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px
}
.primary-nav>ul>li>a:hover::after {
    background: #555;
    display: block
}
.primary-nav .primary a {
    color: white;
    font-weight: 900;
    position: relative
}
.primary-nav .primary-last {
    margin-right: 15px
}
.primary-nav .primary-pens a:hover::after,
body.explore-pens .primary-nav .primary-pens a::after {
    background: #0ebeff
}
.primary-nav .primary-projects a:hover::after,
body.explore-projects .primary-nav .primary-projects a::after {
    background: #ffdd40
}
.primary-nav .primary-posts a:hover::after,
body.explore-posts .primary-nav .primary-posts a::after {
    background: #47cf73
}
.primary-nav .primary-collections a:hover::after,
body.explore-collections .primary-nav .primary-collections a::after {
    background: #ae63e4
}
body.explore-jobs .primary-nav .primary-jobs a::after {
    display: block
}
body.explore-patterns .primary-nav .primary-patterns a::after {
    display: block
}
.fill-space {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3
}
.primary-actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0
}
.primary-actions>a,
.primary-actions>button,
.primary-actions>.button,
.primary-actions>.file-upload-button,
.primary-actions>.multi-button {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}
.signup-and-login {
    padding-top: 10px
}
.create-button .icon {
    fill: #47cf73;
    margin-left: 5px;
    position: relative;
    top: 1px
}
@media (max-width: 550px) {
    .create-button {
        display: none !important
    }
}
.create-dropdown {
    right: 152px;
    width: 300px;
    padding: 0
}
@media (max-width: 550px) {
    .create-dropdown {
        right: 25px
    }
}
.new-button {
    color: #555;
    font-weight: bold;
    text-align: center
}
.new-button:hover,
.new-button:focus {
    background: #444;
    color: white
}
.new-button svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 4px;
    top: -2px;
    position: relative
}
.new-pen-button {
    display: block;
    font-size: 1.2rem;
    padding: 20px
}
.new-pen-button svg {
    fill: #0ebeff;
    width: 23px;
    height: 23px;
    margin-right: 7px
}
.new-pen-button.border-bottom {
    border-bottom: 1px solid #e2e2e2
}
.new-pen-from-template-label {
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    display: block;
    padding: 10px;
    text-align: center;
    background: #f7f7f7;
    color: #666
}
.new-pen-from-template-label>svg {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin-left: 3px;
    position: relative;
    top: -1px;
    fill: #999
}
.new-pen-from-template-label:hover,
.new-pen-from-template-label:focus {
    background: #444;
    color: white
}
.pen-and-post-wrap {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
.pen-and-post-wrap .new-button {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}
.new-project-button,
.new-post-button {
    padding: 10px
}
.new-project-button {
    border-right: 1px solid #e2e2e2
}
.new-project-button svg {
    fill: #ffdd40
}
.new-post-button svg {
    fill: #47cf73
}
.user-stuff {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}
.user-stuff>.button,
.user-stuff>.file-upload-button {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}
.lowkey-header .user-stuff>.button,
.lowkey-header .user-stuff>.file-upload-button {
    margin-left: 5px !important
}
body.logged-in .user-stuff {
    padding: 10px 10px 10px 0
}
body.logged-in .user-stuff img {
    border-radius: 2px
}
@media (max-width: 550px) {
    body.logged-out .user-stuff>.button,
    body.logged-out .user-stuff>.file-upload-button {
        padding-left: 8px;
        padding-right: 8px;
        margin-right: 4px
    }
}
#mini-personal-avatar,
#mini-team-avatar {
    border-radius: 2px;
    cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
    list-style: none
}
.link-list a {
    color: black;
    display: block;
    padding: 8px 15px 10px;
    line-height: 1.1;
    text-shadow: none;
    text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
    color: inherit;
    background: #e7e7e7
}
.link-list a.active {
    background: #ccc
}
.link-list a.active .view-meta {
    color: #666
}
.user-dropdown {
    left: auto !important;
    right: 10px
}
.user-dropdown>li {
    position: relative
}
.user-dropdown>li.sep-after {
    border-bottom: 1px solid #666;
    padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
    padding-top: 5px
}
.user-dropdown .context-switcher {
    position: relative;
    padding: 0 !important
}
.user-dropdown .context-switcher .context-switcher-avatar {
    position: absolute;
    top: 10px;
    left: 0;
    width: 36px;
    height: 36px
}
.user-dropdown .context-switcher .context-switcher-links {
    line-height: 1.1
}
.user-dropdown .context-switcher .context-switcher-choices {
    padding-left: 45px
}
.user-dropdown .context-switcher .context-switcher-choices select {
    width: 100%;
    display: block
}
.user-dropdown .context-switcher .context-switcher-choices h5 {
    margin: 0 0 2px 0
}
.user-dropdown .profile-link {
    display: none
}
.section-create,
.dropdown-newpost,
.dropdown-newpen,
.dropdown-newproject,
.dropdown-activity {
    display: none
}
body.editor .section-create,
body.project-editor .section-create,
body.details .section-create,
body.editor .dropdown-newpost,
body.project-editor .dropdown-newpost,
body.details .dropdown-newpost,
body.editor .dropdown-newpen,
body.project-editor .dropdown-newpen,
body.details .dropdown-newpen,
body.editor .dropdown-newproject,
body.project-editor .dropdown-newproject,
body.details .dropdown-newproject,
body.editor .dropdown-activity,
body.project-editor .dropdown-activity,
body.details .dropdown-activity {
    display: block
}
@media (max-width: 550px) {
    .dropdown-newpost,
    .dropdown-newpen,
    .dropdown-newproject {
        display: block
    }
}
.account-in-dropdown .user-dropdown-quicklink-row {
    padding: 8px 0 5px;
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    width: 100%
}
.dropdown-profile>a,
.dropdown-yoursettings>a {
    padding-bottom: 3px
}
.dropdown-profile>.user-dropdown-quicklink-row,
.dropdown-yoursettings>.user-dropdown-quicklink-row {
    padding-left: 15px;
    padding-bottom: 8px
}
.team-name-and-links a,
.team-name-and-links button,
.user-dropdown-quicklink-row a,
.user-dropdown-quicklink-row button {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    display: inline-block;
    font-size: 0.75rem;
    margin: 0 2px 0 0;
    background: none;
    cursor: pointer;
    color: #999;
    outline: 0;
    padding: 0;
    border: 0
}
.team-name-and-links a:hover,
.team-name-and-links a:focus,
.team-name-and-links button:hover,
.team-name-and-links button:focus,
.user-dropdown-quicklink-row a:hover,
.user-dropdown-quicklink-row a:focus,
.user-dropdown-quicklink-row button:hover,
.user-dropdown-quicklink-row button:focus {
    background: none;
    color: #111
}
.current .team-name-and-links a:hover,
.current .team-name-and-links a:focus,
.current .team-name-and-links button:hover,
.current .team-name-and-links button:focus,
.current .user-dropdown-quicklink-row a:hover,
.current .user-dropdown-quicklink-row a:focus,
.current .user-dropdown-quicklink-row button:hover,
.current .user-dropdown-quicklink-row button:focus {
    color: #ccc
}
.account-in-dropdown {
    padding: 10px 5px 10px 10px;
    border-right: 5px solid transparent;
    position: relative;
    margin: 5px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}
.account-in-dropdown .user-dropdown-pens,
.account-in-dropdown .user-dropdown-projects,
.account-in-dropdown .user-dropdown-posts,
.account-in-dropdown .user-dropdown-collections {
    padding-top: 4px;
    border-top: 1px solid #ccc
}
.account-in-dropdown.current .user-dropdown-quicklink-row .user-dropdown-pens {
    border-top-color: #0ebeff
}
.account-in-dropdown.current .user-dropdown-quicklink-row .user-dropdown-projects {
    border-top-color: #ffdd40
}
.account-in-dropdown.current .user-dropdown-quicklink-row .user-dropdown-posts {
    border-top-color: #47cf73
}
.account-in-dropdown.current .user-dropdown-quicklink-row .user-dropdown-collections {
    border-top-color: #ae63e4
}
.account-in-dropdown .team-avatar-block {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 10px 0 0;
    padding: 0
}
.account-in-dropdown .team-name-and-links {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}
.account-in-dropdown .context-switcher-gravatar {
    width: 100%;
    height: 100%
}
.account-in-dropdown .account-name {
    text-transform: none;
    margin: 0
}
.account-in-dropdown .account-name a {
    font-size: 1rem;
    color: black
}
.account-in-dropdown:last-child {
    border-bottom: 0
}
.account-in-dropdown.current {
    background: black
}
.account-in-dropdown.current .account-name a {
    color: white
}
.account-in-dropdown.current .context-switch-button {
    display: none
}
.account-in-dropdown.current .profile-link {
    display: inline-block
}
.account-in-dropdown .icon-check {
    fill: white;
    position: absolute;
    top: 17px;
    right: 5px;
    width: 20px;
    height: 20px
}
.context-switcher a {
    padding: 0
}
.context-switcher a:hover {
    background: none
}
.context-switcher .account-name {
    margin: 0 0 3px 0
}
.unsaved #save::after,
.unsaved #update::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fedd31
}
.pen-templates-dropdown {
    right: 152px;
    padding-top: 0;
    width: 250px
}
.pen-templates-dropdown h3 {
    font-size: 1.2rem;
    padding: 10px 0;
    margin: 0 15px 5px;
    border-bottom: 2px solid #ccc
}
@media (max-width: 550px) {
    .pen-templates-dropdown {
        right: 25px
    }
}
.templates-upsell {
    font-size: 0.85rem;
    margin-top: 10px;
    text-align: center;
    background: #ffed96
}
.lowkey-header {
    height: 30px !important
}
.lowkey-header .logo .large-screen-logo {
    height: 30px;
    font: 0/0 a;
    background-position: 10px center;
    background-size: 102px 18px !important;
    width: 130px !important
}
.lowkey-header .logo .small-screen-logo {
    padding: 2px 6px
}
.lowkey-header .logo .small-screen-logo svg {
    fill: #ccc
}
.lowkey-header .user-stuff {
    height: 30px !important;
    padding: 5px 10px !important
}
.lowkey-header .user-stuff #mini-personal-avatar,
.lowkey-header .user-stuff #mini-team-avatar {
    margin-top: 0 !important;
    width: 20px;
    height: 20px
}
.lowkey-header .user-stuff .dropdown-arrow {
    top: 3px;
    left: 4px;
    width: 8px
}
body.logged-out .lowkey-header .user-stuff {
    padding: 0 10px !important
}
.lowkey-header .top-button {
    height: 20px;
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 0 20px
}
.header-search {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
.header-search.open svg {
    fill: white
}
.header-search-button svg {
    pointer-events: none;
    fill: #999
}
.header-search-button:hover svg,
.header-search-button:focus svg {
    fill: white
}
.header-search-button {
    display: block;
    height: 65px;
    padding: 0 10px;
    margin-right: 10px
}
.header-search-button svg {
    width: 25px;
    height: 65px
}
.search-form .search-input {
    width: 100%
}
.search-form .search-input:focus {
    outline: 0
}
#header-search-form-wrap {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 65px;
    left: 0;
    width: 100%;
    height: 100%;
    height: calc(100% - 65px);
    transition: 0.2s;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.75) 60%, transparent);
    padding: 45px 0 0 0;
    z-index: 10
}
#header-search-form-wrap.open {
    opacity: 1;
    visibility: visible
}
#header-search-form-wrap #search-form {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px
}
@media (max-width: 550px) {
    #header-search-form-wrap {
        background: rgba(0, 0, 0, 0.85)
    }
}
body.body-search .search-input,
#header-search-form-wrap #search-form .search-input {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Telefon Black", Sans-Serif;
    font-size: 6rem;
    background: none;
    color: white;
    box-shadow: none !important;
    border: 0;
    padding: 0
}
@media (max-width: 550px) {
    body.body-search .search-input,
    #header-search-form-wrap #search-form .search-input {
        font-size: 3.2rem
    }
}
.advanced-options {
    padding: 20px 0
}
.search-option {
    padding-right: 20px
}
.search-option select {
    width: 100%
}
.search-option-radio-row {
    overflow: auto;
    padding-left: 2px
}
.search-option-radio-row>div {
    white-space: nowrap;
    display: inline-block
}
@media (max-width: 550px) {
    .search-option-radio-row>div {
        display: block;
        width: 100%;
        margin: 0 0 10px 0
    }
}
.search-option-radio-row h5 {
    margin-bottom: 5px
}
.search-option-radio-row label {
    padding: 0 12px 0 2px;
    color: #666
}
.header-activity-button {
    padding: 0 18px 0 0px;
    display: block
}
.header-activity-button .activity-icon {
    width: 23px;
    height: 65px;
    fill: #999;
    pointer-events: none
}
.header-activity-button:hover .activity-icon,
.header-activity-button:focus .activity-icon {
    fill: white
}
.activity-dropdown {
    left: auto !important;
    right: 0;
    width: 300px;
    padding: 10px
}
.recent-activity-widget a {
    color: black;
    font-weight: bold
}
.recent-activity-widget a:hover,
.recent-activity-widget a:focus {
    color: #76daff
}
.recent-activity-widget ol {
    list-style: none
}
.recent-activity-widget li {
    margin: 0 0 20px 0;
    font-size: 0.9em;
    clear: both;
    overflow: hidden;
    position: relative
}
.recent-activity-widget .activity-avatar {
    width: 15%;
    height: auto;
    float: left
}
.recent-activity-widget .activity-avatar img {
    width: 100%;
    display: block
}
.recent-activity-widget .activity-date,
.recent-activity-widget .activity-sentence {
    float: right;
    width: 85%;
    margin: 0
}
.recent-activity-widget .activity-sentence {
    margin: 0 0 3px 0
}
.recent-activity-widget svg {
    position: absolute;
    top: 3px;
    left: 0;
    fill: #ccc;
    width: 25px;
    height: 25px
}
.priority-nav {
    height: 100%;
    overflow: hidden
}
.priority-nav>ul {
    list-style: none;
    height: 100%
}
.priority-nav>ul>li {
    display: inline-block
}
.priority-nav>ul>li.overflow-nav {
    display: none
}
.priority-nav>ul>li.overflow-nav .dropdown-arrow {
    fill: #ccc;
    width: 10px;
    height: 9px;
    pointer-events: none
}
.priority-nav__dropdown {
    list-style: none;
    z-index: 1;
    left: 0
}
@media (max-width: 550px) {
    .priority-nav__dropdown {
        left: -30px
    }
}
.priority-nav__dropdown.show {
    opacity: 1;
    visibility: visible
}
.priority-nav__dropdown>li>a,
.priority-nav__dropdown .primary>a {
    color: black
}
.priority-nav__dropdown .primary-last {
    margin-right: 0
}
.new-header .logo {
    margin-right: 16px
}
.new-header .primary-nav>ul>li>a {
    line-height: 80px
}
.new-header .primary-dashboard::before,
.new-header .primary-pens::before {
    position: absolute;
    font-size: 0.83rem;
    display: block;
    line-height: 20px;
    top: 12px
}
.new-header .primary-dashboard::before {
    content: 'YOUR';
    color: #89dcff
}
.new-header .primary-pens::before {
    content: 'Explore';
    text-transform: uppercase;
    color: #f4e17f
}
.new-header .priority-nav__dropdown li {
    position: relative
}
.new-header .priority-nav__dropdown li.primary-dashboard,
.new-header .priority-nav__dropdown li.primary-pens {
    padding-top: 18px
}
.new-header .priority-nav__dropdown li.primary-dashboard::before,
.new-header .priority-nav__dropdown li.primary-pens::before {
    line-height: 18px;
    margin-left: 16px;
    top: 0;
    border-bottom: 1px solid #555;
    width: 86%;
    color: #555
}
.new-header .user-dropdown {
    width: 230px
}
.new-header .user-dropdown>li.sep-after {
    border-bottom: none;
    margin-bottom: 5px
}
.new-header .user-dropdown>li.sep-after+li {
    padding-top: 0
}
.new-header .dropdown-yoursettings,
.new-header .dropdown-logout {
    width: 50%;
    display: inline-block;
    margin-top: 4px
}
.new-header .dropdown-yoursettings a,
.new-header .dropdown-logout a {
    line-height: 20px
}
.new-header .dropdown-yoursettings a:hover svg,
.new-header .dropdown-logout a:hover svg {
    fill: #222
}
.new-header .dropdown-yoursettings svg,
.new-header .dropdown-logout svg {
    display: inlign-block;
    vertical-align: top;
    margin-right: 2px;
    fill: #acacac
}
.new-header .dropdown-yoursettings {
    float: left
}
.new-header .dropdown-yoursettings a {
    padding-bottom: 10px
}
.new-header .link-list a {
    padding: 7px 15px 8px
}
.new-header .section-header {
    color: #7f7f7f;
    font-size: 0.8rem;
    padding-left: 10px;
    padding-top: 5px
}
.new-header .context-list {
    font-weight: bold;
    font-size: 0.97rem
}
.new-header .context-list.active {
    background: #f4f4f4;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
    z-index: 1
}
.new-header .context-list.active a {
    pointer-events: none
}
.new-header .context-list a {
    line-height: 25px;
    padding: 5px 15px 5px
}
.new-header .context-list a:hover {
    background: #f4f4f4
}
.new-header .context-list img {
    vertical-align: top;
    margin-right: 4px
}
.site-footer {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    height: 40px;
    line-height: 1;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0 5px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    color: #999;
    background: #343436;
    border-top: 1px solid #3e3e3f;
    z-index: 10
}
.site-footer a {
    color: #ccc
}
.site-footer a:hover,
.site-footer a:focus {
    color: white
}
.footer-left {
    height: 100%;
    padding: 9px 0;
    z-index: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}
.footer-left>.button,
.footer-left>.file-upload-button {
    margin-right: 8px
}
.footer-left .bsa-footer {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    text-align: center;
    font-size: 0.9rem
}
.footer-left .bsa-footer a::before {
    content: "Ad";
    display: inline-block;
    background: #47cf73;
    color: white;
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 5px
}
@media (max-width: 610px) {
    .footer-right {
        position: relative;
        padding-left: 5px
    }
}
@media (max-width: 610px) {
    .editor-footer .footer-right {
        position: absolute;
        padding-left: 0
    }
}
.footer-right .pick-iframe {
    display: inline-block;
    width: 100px;
    height: 20px;
    background: none;
    vertical-align: top
}
.footer-right>a {
    display: inline-block;
    position: relative
}
.footer-right>.button,
.footer-right>.file-upload-button {
    margin-left: 7px
}
.footer-icon svg {
    width: 15px;
    height: 15px;
    fill: white;
    display: inline-block;
    vertical-align: middle;
    top: -1px;
    position: relative
}
.footer-badge .badge {
    position: relative;
    top: -1px
}
.footer-badge:hover .badge,
.footer-badge:focus .badge {
    background: white
}
.footer-icon-editor svg {
    width: 16px !important;
    height: 16px !important;
    fill: #555
}
.footer-icon-editor:hover svg,
.footer-icon-editor:active svg {
    fill: #999
}
.layout-change-links {
    display: inline-block
}
body.layout-left .layout-change-links #left-layout svg,
body.layout-top .layout-change-links #top-layout svg,
body.layout-right .layout-change-links #right-layout svg {
    fill: #ccc
}
.footer-word-links {
    display: inline-block
}
.footer-word-links a {
    margin-left: 4px
}
.collections-select {
    width: 120px;
    display: inline-block;
    background: url(https://production-assets.codepen.io/assets/buttons/arrow-tiny-down-white-cd748d5e97310942356ea8298bca9b344350441cffed1a653c89551258a76b3a.png) 93% 7px no-repeat, #1e1e1e !important;
    color: white;
    -webkit-transform: none !important;
    transform: none !important;
    text-align: left !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    text-indent: 0.01px;
    margin-right: 8px !important;
    padding-bottom: 0;
    border-radius: 3px;
    line-height: 1.5
}
.collections-select option {
    background: white;
    color: black
}
.editor-toggle-buttons>.button,
.editor-toggle-buttons>.file-upload-button {
    background: #1e1e1e
}
.editor-toggle-buttons>.button.active,
.editor-toggle-buttons>.active.file-upload-button {
    color: white;
    font-weight: 900 !important;
    background: #1e1e1e
}
.editor-toggle-buttons>.button:not(:first-child),
.editor-toggle-buttons>.file-upload-button:not(:first-child) {
    border-left: 1px solid #555
}
.editor-layout-buttons {
    display: inline-block;
    position: relative;
    top: 1px
}
.footer-professor .layout-change-links {
    position: relative
}
body.student .footer-professor .layout-change-links::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.student-count {
    color: white;
    margin: 0 5px
}
.footer-collab .student-count {
    background: #666
}
.pres-footer .mini-logo {
    vertical-align: middle;
    margin-right: 5px
}
.preview-size-buttons {
    margin: 0 !important
}
.footer-icon-editor {
    margin-left: 5px
}
.promo-footer {
    clear: both;
    background: #28282b;
    padding: 40px 0;
    font-size: 0.9rem
}
.promo-footer p {
    color: #959595
}
@media (max-width: 550px) {
    .promo-footer {
        padding: 20px 0
    }
    .promo-footer .footer-chunk:not(:last-child) {
        margin-bottom: 40px
    }
    .promo-footer .width-wrapper {
        padding: 0 20px
    }
}
.footer-chunk {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.1)
}
.footer-chunk-jobs>ul li {
    margin: 0 0 5px 0
}
.footer-chunk-jobs>ul li a {
    color: #959595;
    display: block
}
.footer-chunk-jobs>ul li a:hover,
.footer-chunk-jobs>ul li a:focus {
    color: white
}
.link-footer {
    background: #111;
    padding: 40px 0 60px;
    position: relative
}
.link-footer nav {
    margin: 0 0 8px 0
}
.link-footer strong {
    color: white;
    margin-right: 20px
}
.link-footer a {
    color: #959595;
    margin-right: 10px
}
.link-footer .copyright {
    position: absolute;
    right: 20px;
    top: 0;
    text-align: right;
    font-size: 0.8rem;
    color: #959595
}
.link-footer .copyright .logo {
    height: 27px;
    margin: 0 0 5px 0
}
.link-footer .copyright .logo .large-screen-logo {
    background: url(https://production-assets.codepen.io/assets/footer/codepen-logo-midgray-c422cd88493fcc8211916ef1f7ecf9b5e97294eade4fb8ec2ead00eea1f17d96.svg) no-repeat top right;
    background-size: 146.66667px 25.83333px
}
.link-footer .copyright .logo .large-screen-logo {
    display: block;
    margin-right: 0px
}
.link-footer .copyright .logo .small-screen-logo {
    display: none
}
@media (max-width: 830px) {
    .link-footer {
        font-size: 125%
    }
    .link-footer .link-footer-links {
        margin: 0 0 40px 0
    }
    .link-footer .link-footer-links a,
    .link-footer .link-footer-links strong {
        display: block;
        padding: 5px
    }
    .link-footer .link-footer-codepen-links {
        float: left;
        width: 50%
    }
    .link-footer .link-footer-community-links {
        float: right;
        width: 50%
    }
    .link-footer .link-footer-social-links {
        clear: both;
        float: left;
        width: 50%
    }
    .link-footer .link-footer-profile-links {
        float: right;
        width: 50%
    }
    .link-footer .copyright {
        margin-top: 40px;
        text-align: left;
        position: static;
        clear: both;
        font-size: 0.9rem
    }
    .link-footer .copyright .logo {
        height: 33px
    }
    .link-footer .copyright .logo a {
        width: 145px;
        height: 27px
    }
}
@font-face {
    font-family: "Telefon Black";
    src: url(https://production-assets.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-78992f1ed89d5cadb09702e6a0d5bbb0302e85c728c1f8d18fdc8aa56870104c.woff) format("woff"), url(https://production-assets.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3-6435f1279663bb84d4a1d8effe0adafbf8499ff6efdd01a59be848c90d8c4c0b.woff2) format("woff2")
}
@font-face {
    font-family: "Telefon";
    src: url(https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff) format("woff"), url(https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868-8fdc-2b310d587b50-3-446e9e68a40500d1b24a18331c6d6a78226d276079dcdc2ad9e80a48bdcfd948.woff2) format("woff2")
}
html {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    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
    }
}
body {
    color: white
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin: 0 0 10px 0;
    font-weight: normal
}
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif
}
h1,
.h1 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Telefon Black", Sans-Serif;
    line-height: 1.1;
    font-size: 3rem
}
@media (max-width: 550px) {
    h1,
    .h1 {
        font-size: 2.2rem
    }
}
h2,
.h2 {
    font-family: "Telefon", Sans-Serif;
    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
}
.block-title {
    text-align: center;
    padding: 1em 0
}
.superhead {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 3px
}
.content-author {
    padding: 15px 0
}
.content-author time {
    white-space: nowrap
}
.content-author .author-link {
    color: #222;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5)
}
.content-author .mini-button,
.content-author .lowkey-header .user-stuff>.button,
.lowkey-header .content-author .user-stuff>.button,
.content-author .lowkey-header .user-stuff>.file-upload-button,
.lowkey-header .content-author .user-stuff>.file-upload-button,
.content-author .file-upload-button {
    margin-left: 4px
}
.mega-header .content-author {
    color: #999
}
.mega-header .content-author .author-link {
    color: white;
    border-color: rgba(255, 255, 255, 0.5)
}
@media (max-width: 550px) {
    .mega-header .content-author {
        margin: 0 0 20px 0
    }
}
p,
pre,
blockquote {
    margin: 0 0 1em 0
}
p:empty,
pre:empty,
blockquote:empty {
    display: none
}
a {
    text-decoration: none;
    color: #76daff
}
a:hover,
a:focus,
a:active {
    cursor: pointer;
    color: white
}
time {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 80%
}
blockquote {
    padding: 0.5rem 1rem;
    border-left: 2px solid #76daff;
    background: rgba(0, 0, 0, 0.25)
}
blockquote p:last-child {
    margin: 0
}
.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 #666
}
.text>p:last-child {
    margin-bottom: 0
}
aside p,
aside address {
    color: #ccc;
    font-style: normal
}
.meta-overlay pre {
    font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
    font-size: 0.9rem
}
.pen-description p code,
.pen-description li code {
    color: #ccc
}
.pen-description a code {
    color: #76daff
}
.pen-description a:hover code {
    color: white
}
.meta-overlay code,
.comment-text code,
.pen-description code {
    font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
    font-size: 85%;
    text-transform: none
}
.meta-overlay p code,
.meta-overlay li code,
.comment-text p code,
.comment-text li code,
.pen-description p code,
.pen-description li code {
    margin: 0 2px
}
.comment-text p code,
.pen-description p code {
    padding: 2px 5px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.2)
}
.pen-description pre,
.post-body pre,
.comment-text pre {
    color: white;
    padding: 0;
    margin: 0 0 1rem 0;
    font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
    font-size: 85%;
    -moz-tab-size: 2;
    tab-size: 2;
    -ms-word-break: normal;
    word-break: normal;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative
}
.pen-description pre[class*='lang-'],
.post-body pre[class*='lang-'],
.comment-text pre[class*='lang-'] {
    margin-top: 2.2rem
}
@media (max-width: 550px) {
    .pen-description pre[class*='lang-'],
    .post-body pre[class*='lang-'],
    .comment-text pre[class*='lang-'] {
        margin-top: 2.5rem
    }
}
.pen-description pre.has-code,
.post-body pre.has-code,
.comment-text pre.has-code {
    white-space: normal
}
.pen-description pre>code,
.post-body pre>code,
.comment-text pre>code {
    font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
    font-size: inherit;
    background: none;
    padding: 15px;
    white-space: pre;
    display: block;
    overflow-x: auto
}
.pen-description pre>code::-webkit-scrollbar,
.post-body pre>code::-webkit-scrollbar,
.comment-text pre>code::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem
}
.pen-description pre>code::-webkit-scrollbar-thumb,
.post-body pre>code::-webkit-scrollbar-thumb,
.comment-text pre>code::-webkit-scrollbar-thumb {
    background: #666
}
.pen-description pre>code::-webkit-scrollbar-track,
.post-body pre>code::-webkit-scrollbar-track,
.comment-text pre>code::-webkit-scrollbar-track {
    background: none
}
body .pen-description pre>code,
body .post-body pre>code,
body .comment-text pre>code {
    scrollbar-face-color: #666;
    scrollbar-track-color: none
}
.pen-description pre[class]::before,
.post-body pre[class]::before,
.comment-text pre[class]::before {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    display: block;
    background: #1e1e1e;
    border-bottom: 1px solid #343436;
    color: #999;
    padding: 5px;
    font-size: 75%;
    line-height: 1
}
.pen-description pre.lang-xml::before,
.post-body pre.lang-xml::before,
.comment-text pre.lang-xml::before {
    content: "HTML"
}
.pen-description pre.lang-html::before,
.post-body pre.lang-html::before,
.comment-text pre.lang-html::before {
    content: "HTML"
}
.pen-description pre.lang-haml::before,
.post-body pre.lang-haml::before,
.comment-text pre.lang-haml::before {
    content: "Haml"
}
.pen-description pre.lang-markdown::before,
.post-body pre.lang-markdown::before,
.comment-text pre.lang-markdown::before {
    content: "Markdown"
}
.pen-description pre.lang-application\/x-slim::before,
.post-body pre.lang-application\/x-slim::before,
.comment-text pre.lang-application\/x-slim::before {
    content: "Slim"
}
.pen-description pre.lang-pug::before,
.post-body pre.lang-pug::before,
.comment-text pre.lang-pug::before {
    content: "Pug"
}
.pen-description pre.lang-css::before,
.post-body pre.lang-css::before,
.comment-text pre.lang-css::before {
    content: "CSS"
}
.pen-description pre.lang-text\/x-scss::before,
.post-body pre.lang-text\/x-scss::before,
.comment-text pre.lang-text\/x-scss::before {
    content: "SCSS"
}
.pen-description pre.lang-text\/x-sass::before,
.post-body pre.lang-text\/x-sass::before,
.comment-text pre.lang-text\/x-sass::before {
    content: "Sass"
}
.pen-description pre.lang-text\/x-less::before,
.post-body pre.lang-text\/x-less::before,
.comment-text pre.lang-text\/x-less::before {
    content: "Less"
}
.pen-description pre.lang-text\/x-styl::before,
.post-body pre.lang-text\/x-styl::before,
.comment-text pre.lang-text\/x-styl::before {
    content: "Stylus"
}
.pen-description pre.lang-text\/x-postcss::before,
.post-body pre.lang-text\/x-postcss::before,
.comment-text pre.lang-text\/x-postcss::before {
    content: "PostCSS"
}
.pen-description pre.lang-javascript::before,
.post-body pre.lang-javascript::before,
.comment-text pre.lang-javascript::before {
    content: "JavaScript"
}
.pen-description pre.lang-livescript::before,
.post-body pre.lang-livescript::before,
.comment-text pre.lang-livescript::before {
    content: "LiveScript"
}
.pen-description pre.lang-text\/typescript::before,
.post-body pre.lang-text\/typescript::before,
.comment-text pre.lang-text\/typescript::before {
    content: "TypeScript"
}
.pen-description pre.lang-coffeescript::before,
.post-body pre.lang-coffeescript::before,
.comment-text pre.lang-coffeescript::before {
    content: "CoffeeScript"
}
.pen-description pre.lang-ruby::before,
.post-body pre.lang-ruby::before,
.comment-text pre.lang-ruby::before {
    content: "Ruby"
}
.pen-description pre.lang-shell::before,
.post-body pre.lang-shell::before,
.comment-text pre.lang-shell::before {
    content: "Shell"
}
.pen-description pre.lang-application\/x-httpd-php::before,
.post-body pre.lang-application\/x-httpd-php::before,
.comment-text pre.lang-application\/x-httpd-php::before {
    content: "PHP"
}
.pen-description pre.lang-sql::before,
.post-body pre.lang-sql::before,
.comment-text pre.lang-sql::before {
    content: "SQL"
}
.pen-description pre:not([class]),
.post-body pre:not([class]),
.comment-text pre:not([class]) {
    background: #333;
    overflow: auto;
    padding: 1rem
}
.pen-description pre:not([class])>code,
.post-body pre:not([class])>code,
.comment-text pre:not([class])>code {
    display: inline;
    padding: 0
}
label.small {
    display: block;
    font-size: 0.8em;
    margin: 0 0 2px 0
}
label.small-inline {
    font-size: 0.8em;
    display: inline-block !important;
    margin-right: 3px
}
label[for],
input[type=checkbox],
input[type=radio] {
    cursor: pointer
}
.fullwidth {
    width: 100%
}
.mega-fullwidth.mega-fullwidth {
    width: 100%;
    margin: 10px 0;
    font-size: 1.5em;
    padding: 0.5em
}
input[type='name'],
input[type='tel'],
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='number'],
textarea {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    font-size: 13px;
    -webkit-appearance: none;
    padding: 4px 5px 4px 5px;
    outline: 0;
    border: 3px solid #ccc;
    border-radius: 2px;
    transition: border-color 0.2s
}
input[type='name']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='number']:focus,
textarea:focus {
    border-color: #555
}
textarea.is-code {
    font-family: Monaco, Courier, MonoSpace
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}
.form-like-form>div {
    clear: both;
    margin: 0 0 10px 0
}
@media (max-width: 550px) {
    .form-like-form>div {
        margin: 0 0 20px 0
    }
}
.form-like-form label {
    display: block;
    width: 35%;
    float: left;
    text-align: right;
    padding: 2px 10px 0 0;
    color: #eee;
    text-transform: uppercase;
    letter-spacing: 0.5px
}
@media (max-width: 830px) {
    .form-like-form label {
        text-align: left
    }
}
@media (max-width: 550px) {
    .form-like-form label {
        float: none;
        width: 100%
    }
}
.form-like-form input[type='name'],
.form-like-form input[type='tel'],
.form-like-form input[type='text'],
.form-like-form input[type='email'],
.form-like-form input[type='password'],
.form-like-form input[type='url'],
.form-like-form textarea {
    padding: 10px;
    width: 64%
}
@media (max-width: 550px) {
    .form-like-form input[type='name'],
    .form-like-form input[type='tel'],
    .form-like-form input[type='text'],
    .form-like-form input[type='email'],
    .form-like-form input[type='password'],
    .form-like-form input[type='url'],
    .form-like-form textarea {
        width: 100%;
        margin: 2px 0 0 0
    }
}
.form-like-form input[type='checkbox'],
.form-like-form select {
    position: relative;
    top: 3px
}
.form-like-form select {
    width: 25%
}
@media (max-width: 550px) {
    .form-like-form select {
        width: 100%
    }
}
.form-like-form textarea {
    height: 100px;
    display: block
}
.form-like-form .hint {
    color: #999;
    font-size: 0.85em;
    padding: 5px 0 0 35%
}
.form-like-form .hint strong {
    color: white
}
@media (max-width: 550px) {
    .form-like-form .hint {
        padding-left: 0
    }
}
.form-like-form .end-form-buttons {
    padding-top: 10px
}
.form-like-form-halfs label {
    width: 50%
}
.form-like-form-halfs select {
    width: 50%
}
.top-label-form label {
    font-weight: normal;
    display: block;
    margin: 0 0 3px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px
}
.top-label-form input[type='name'],
.top-label-form input[type='tel'],
.top-label-form input[type='text'],
.top-label-form input[type='email'],
.top-label-form input[type='password'],
.top-label-form input[type='url'],
.top-label-form textarea {
    padding: 10px;
    width: 100%
}
.top-label-form>div {
    margin: 0 0 10px 0
}
.normal-labels label {
    text-transform: none;
    letter-spacing: 0
}
.row-of-radio label {
    display: inline
}
.selected {
    color: #76daff
}
.body-login h1 strong {
    color: #76daff
}
#sent-message {
    display: none
}
#sent-message p {
    color: #69c248
}
fieldset {
    border: 1px solid #666;
    padding: 10px;
    margin: 0 0 010px 0
}
legend {
    padding: 0 10px
}
.error {
    clear: both
}
.explore-tabs .error {
    background: none;
    color: #ff3c41 !important;
    font-weight: bold;
    border: 0;
    padding: 3px 8px 5px 8px
}
.error input[type='name'],
.error input[type='tel'],
.error input[type='text'],
.error input[type='email'],
.error input[type='password'],
.error input[type='url'],
.error textarea {
    border-color: #ff3c41;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}
.error-message {
    background: #ff3c41;
    color: #eee;
    padding: 5px 10px;
    margin-left: 35%;
    width: 64%;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px
}
#login-error .error-message {
    padding-top: 0
}
.top-label-form .error-message,
.field-half .error-message {
    margin-left: 0;
    width: 100%
}
#pro-other {
    clear: both;
    margin: 20px 0
}
#pro-other .error-message {
    padding-top: 0
}
.ios-toggle-wrap {
    text-align: center;
    margin: 0 0 20px 0
}
.ios-toggle-wrap .badge {
    top: -1px;
    margin-left: 4px
}
.ios-toggle-mega-label-wrap {
    display: inline-block;
    position: relative
}
.ios-toggle-mega-label {
    position: absolute;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.ios-toggle>input:checked+label::before,
.ios-toggle>input:active+label::before {
    width: 60%;
    left: 20%;
    top: 30%;
    height: 40%;
    opacity: 0
}
.ios-toggle {
    position: relative;
    display: inline-block;
    width: 3.4em;
    height: 2em;
    border-radius: 2em;
    background: #ccc;
    vertical-align: middle;
    margin: 0 5px
}
.ios-toggle>input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    width: 100% !important;
    height: 100%;
    position: absolute !important
}
.ios-toggle>input:checked+label {
    background: red
}
.ios-toggle>input:checked+label::after {
    right: 0;
    left: 1.4em
}
.ios-toggle>input:active+label::after {
    right: 1em;
    left: 0
}
.ios-toggle>input:active:checked+label::after {
    right: 0;
    left: 1em
}
.ios-toggle>label {
    display: block !important;
    width: 100% !important;
    height: 100%;
    border-radius: 2em;
    transition: background 0.125s
}
.ios-toggle>label::before,
.ios-toggle>label::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 2em;
    border-radius: inherit;
    transition: all 0.2s
}
.ios-toggle>label::before {
    background: #bada55;
    width: 100%
}
.ios-toggle>label::after {
    background: #fff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    right: 1.4em;
    box-shadow: 0 0.25em rgba(0, 0, 0, 0.05), inset 0 -2em 2em -2em rgba(0, 0, 0, 0.1)
}
.ios-toggle.ios-toggle-ambiguous>input:checked+label {
    background: #999
}
.ios-toggle.ios-toggle-ambiguous>label::before {
    background: #999
}
.ios-toggle.ios-toggle-reverse>input:checked+label {
    background: #bada55
}
.ios-toggle.ios-toggle-reverse>label::before {
    background: red
}
.ios-toggle.ios-toggle-big {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}
.normal-labels label {
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit
}
.checkbox-row {
    position: relative;
    margin: 0 0 5px 0
}
.select {
    position: relative;
    display: inline-block;
    color: #555
}
.select.select-small {
    vertical-align: top
}
.select.select-small select {
    background: black;
    vertical-align: middle;
    color: white;
    border: 0;
    padding: 4px 20px 4px 10px;
    font-size: 0.7rem;
    border-radius: 3px
}
.Firefox .select.select-small select {
    background: white;
    color: black;
    padding: 2px 20px 2px 10px
}
.select.select-small::after {
    right: 5px;
    top: 14px
}
.select select {
    display: inline-block;
    margin: 0;
    padding: 10px 20px 10px 10px;
    border: 3px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
    outline: 0;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}
.select select:focus:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000
}
.select::after {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    margin-top: -0.15rem;
    pointer-events: none;
    border-top: 0.35rem solid;
    border-right: 0.35rem solid transparent;
    border-bottom: 0.35rem solid transparent;
    border-left: 0.35rem solid transparent
}
.select select:focus {
    border-color: #555
}
.select select::-ms-expand {
    display: none
}
@-moz-document url-prefix() {
    .select select {
        text-indent: 0.01px;
        text-overflow: '';
        padding-right: 1rem
    }
    .select option {
        background-color: white
    }
}
.file-upload-input {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: left;
    margin: 0 5px
}
.file-upload-input.button,
.file-upload-input.file-upload-button {
    font-weight: bold;
    border: 2px solid #929292;
    padding: 0.25em 0.5em;
    font-size: 0.8em;
    border-radius: 2px
}
.file-upload-input input {
    margin: 0;
    opacity: 0;
    position: absolute
}
.file-custom {
    position: relative;
    z-index: 2;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.file-custom:hover::after {
    color: #a2a2a2
}
.file-custom::after {
    content: "choose";
    color: #929292
}
.file-custom[data-text]::after {
    content: attr(data-text)
}
.range {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}
.range label {
    width: 100%
}
.range input {
    width: calc(100% - 40px)
}
.range .team-count-value {
    display: inline-block;
    width: 40px;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    vertical-align: top;
    color: #333;
    line-height: 32px
}
.last {
    margin-right: 0 !important
}
.center {
    text-align: center
}
.align-right {
    text-align: right
}
.rotate-cc90 {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}
.rotate-c90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}
.screen-reader-text {
    position: absolute;
    top: -9999px;
    left: -9999px
}
.mobile-break {
    display: none
}
@media (max-width: 550px) {
    .mobile-break {
        display: block
    }
}
textarea:focus,
textarea:active {
    outline: 0
}
.clear {
    clear: both
}
.hide {
    display: none !important
}
@media (max-width: 550px) {
    .hide-on-mobile {
        display: none !important
    }
}
.visually-hidden {
    position: absolute !important;
    top: -9999px;
    left: -9999px
}
.show {
    display: block !important
}
.show-inline-block {
    display: inline-block !important
}
.group::before,
.group::after {
    content: "";
    display: table
}
.group::after {
    clear: both
}
.context {
    position: relative
}
.wrap-text {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}
.flip {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
.nofloat {
    float: none !important
}
[disabled],
.disabled,
.faded {
    opacity: 0.5 !important;
    cursor: default !important;
    pointer-events: none
}
.disabled-cover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.1) 8px, rgba(255, 255, 255, 0.1) 10px)
}
.disabled-feature-prompt {
    transition: opacity 300ms ease;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    line-height: 64px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0
}
.disabled-feature-prompt:hover {
    opacity: 1
}
.icon-heart {
    fill: white
}
.loves .icon-heart {
    color: #999999;
    fill: #999999 !important;
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0)
}
.loved-1 .icon-heart {
    color: #ffaeae;
    fill: #ffaeae !important;
    -webkit-transform: scale(1.15) translateY(0.25px);
    transform: scale(1.15) translateY(0.25px)
}
.loved-2 .icon-heart {
    color: #ff8484;
    fill: #ff8484 !important;
    -webkit-transform: scale(1.25) translateY(0.5px);
    transform: scale(1.25) translateY(0.5px)
}
.loved-3 .icon-heart {
    color: #ff4545;
    fill: #ff4545 !important;
    -webkit-transform: scale(1.35) translateY(1px);
    transform: scale(1.35) translateY(1px)
}
.inline-q {
    text-align: center;
    font-size: 9px;
    width: 12px;
    display: inline-block;
    height: 12px;
    line-height: 12px;
    border-radius: 15px;
    background: white;
    color: black !important;
    position: relative;
    bottom: 1px;
    text-decoration: none !important;
    opacity: 0.5
}
.inline-q:hover,
.inline-q:focus {
    opacity: 1;
    color: black
}
.inline-q-reverse {
    background: black;
    color: white !important
}
.or {
    text-align: center;
    margin: 5px 0;
    font-style: italic
}
.warning-icon-bar,
.bonus-icon-bar {
    margin: 0 0 10px 0
}
.warning-icon-bar span,
.bonus-icon-bar span {
    display: inline-block;
    font-size: 2rem;
    color: white;
    background: red;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    font-weight: 800;
    text-align: center
}
.warning-icon-bar span.inline-warning,
.bonus-icon-bar span.inline-warning {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.8rem
}
.bonus-icon-bar span {
    font-family: sans-serif;
    width: 4rem;
    height: 4rem;
    line-height: 3.9rem;
    background: #66ce5b
}
.inline-error {
    color: white !important;
    background-image: linear-gradient(to bottom, red, #900);
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold
}
span.inline-error {
    margin: 0 1px
}
hr,
.sep {
    height: 0;
    border: 0;
    border-top: 1px solid #1e1e1e;
    margin: 30px 0 40px 0
}
.sep {
    text-align: center
}
.sep span {
    background: black;
    display: inline-block;
    padding: 0 20px;
    position: relative;
    top: -0.85em
}
.subtle-sep {
    height: 1px;
    position: relative;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.75), transparent);
    margin: 15px 0 40px 0
}
.subtle-sep::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    width: 100%;
    height: 5px;
    background: radial-gradient(ellipse at top center, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 78%)
}
.svg-hidden-container {
    position: absolute;
    top: -9999px;
    left: -9999px
}
.admin-pick,
.admin-pick-collection,
.force-default-ff {
    font-family: sans-serif
}
.teamcolor {
    color: #47cf73
}
.personalcolor {
    color: #47cf73
}
.admin-copy-score {
    margin-right: 5px
}
.button,
.file-upload-button,
.gsc-cursor-page {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    -webkit-appearance: none;
    font-size: 1rem;
    text-shadow: none;
    line-height: 1.2;
    display: inline-block;
    outline: 0;
    padding: 10px 16px;
    margin: 0 10px 0 0;
    position: relative;
    border-radius: 3px;
    border: 3px solid transparent;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
    text-align: center;
    font-weight: normal !important
}
.button::-moz-focus-inner,
.file-upload-button::-moz-focus-inner,
.gsc-cursor-page::-moz-focus-inner {
    border: 0;
    padding: 0
}
.button:active,
.file-upload-button:active,
.gsc-cursor-page:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}
.button a,
.file-upload-button a,
.gsc-cursor-page a {
    color: inherit
}
.button>svg,
.file-upload-button>svg,
.button>span>svg,
.file-upload-button>span>svg,
.gsc-cursor-page>svg,
.gsc-cursor-page>span>svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    pointer-events: none;
    vertical-align: bottom;
    fill: white
}
.button>svg.icon-heart,
.file-upload-button>svg.icon-heart,
.button>span>svg.icon-heart,
.file-upload-button>span>svg.icon-heart,
.gsc-cursor-page>svg.icon-heart,
.gsc-cursor-page>span>svg.icon-heart {
    width: 18px
}
.button.green,
.green.file-upload-button,
.gsc-cursor-page.green {
    background: #47cf73;
    color: white
}
.button.green:hover,
.green.file-upload-button:hover,
.button.green:focus,
.green.file-upload-button:focus,
.button.green.button-focus:focus,
.green.button-focus.file-upload-button:focus,
.gsc-cursor-page.green:hover,
.gsc-cursor-page.green:focus,
.gsc-cursor-page.green.button-focus:focus {
    background: #2fb45a
}
.button.green.button-focus:focus,
.green.button-focus.file-upload-button:focus,
.gsc-cursor-page.green.button-focus:focus {
    box-shadow: 0 0 0 2px #248c46
}
.button.faded-green,
.faded-green.file-upload-button,
.gsc-cursor-page.faded-green {
    background: #78b078;
    color: white
}
.button.faded-green:hover,
.faded-green.file-upload-button:hover,
.button.faded-green:focus,
.faded-green.file-upload-button:focus,
.button.faded-green.button-focus:focus,
.faded-green.button-focus.file-upload-button:focus,
.gsc-cursor-page.faded-green:hover,
.gsc-cursor-page.faded-green:focus,
.gsc-cursor-page.faded-green.button-focus:focus {
    background: #5a9b5a
}
.button.faded-green.button-focus:focus,
.faded-green.button-focus.file-upload-button:focus,
.gsc-cursor-page.faded-green.button-focus:focus {
    box-shadow: 0 0 0 2px #487a48
}
.button.red,
.red.file-upload-button,
.gsc-cursor-page.red {
    background: #ff3c41;
    color: white !important
}
.button.red:hover,
.red.file-upload-button:hover,
.button.red:focus,
.red.file-upload-button:focus,
.button.red.button-focus:focus,
.red.button-focus.file-upload-button:focus,
.gsc-cursor-page.red:hover,
.gsc-cursor-page.red:focus,
.gsc-cursor-page.red.button-focus:focus {
    background: #ff090f
}
.button.red.button-focus:focus,
.red.button-focus.file-upload-button:focus,
.gsc-cursor-page.red.button-focus:focus {
    box-shadow: 0 0 0 2px #d50005
}
.button.purple,
.purple.file-upload-button,
.gsc-cursor-page.purple {
    background: #ae63e4;
    color: white !important
}
.button.purple:hover,
.purple.file-upload-button:hover,
.button.purple:focus,
.purple.file-upload-button:focus,
.button.purple.button-focus:focus,
.purple.button-focus.file-upload-button:focus,
.gsc-cursor-page.purple:hover,
.gsc-cursor-page.purple:focus,
.gsc-cursor-page.purple.button-focus:focus {
    background: #9738dc
}
.button.purple.button-focus:focus,
.purple.button-focus.file-upload-button:focus,
.gsc-cursor-page.purple.button-focus:focus {
    box-shadow: 0 0 0 2px #7d21c0
}
.button.yellow,
.yellow.file-upload-button,
.gsc-cursor-page.yellow {
    background: #fcd000;
    color: #111
}
.button.yellow:hover,
.yellow.file-upload-button:hover,
.button.yellow:focus,
.yellow.file-upload-button:focus,
.button.yellow.button-focus:focus,
.yellow.button-focus.file-upload-button:focus,
.gsc-cursor-page.yellow:hover,
.gsc-cursor-page.yellow:focus,
.gsc-cursor-page.yellow.button-focus:focus {
    background: #c9a600
}
.button.yellow.button-focus:focus,
.yellow.button-focus.file-upload-button:focus,
.gsc-cursor-page.yellow.button-focus:focus {
    box-shadow: 0 0 0 2px #967c00
}
.button.blue,
.blue.file-upload-button,
.gsc-cursor-page.blue {
    background: #0ebeff;
    color: white !important
}
.button.blue:hover,
.blue.file-upload-button:hover,
.button.blue:focus,
.blue.file-upload-button:focus,
.button.blue.button-focus:focus,
.blue.button-focus.file-upload-button:focus,
.gsc-cursor-page.blue:hover,
.gsc-cursor-page.blue:focus,
.gsc-cursor-page.blue.button-focus:focus {
    background: #009fda
}
.button.blue.button-focus:focus,
.blue.button-focus.file-upload-button:focus,
.gsc-cursor-page.blue.button-focus:focus {
    box-shadow: 0 0 0 2px #007aa7
}
.button.black,
.black.file-upload-button,
.gsc-cursor-page.black {
    background: #222;
    color: #fcd000
}
.button.black:hover,
.black.file-upload-button:hover,
.button.black:focus,
.black.file-upload-button:focus,
.button.black.button-focus:focus,
.black.button-focus.file-upload-button:focus,
.gsc-cursor-page.black:hover,
.gsc-cursor-page.black:focus,
.gsc-cursor-page.black.button-focus:focus {
    background: #090909
}
.button.black.button-focus:focus,
.black.button-focus.file-upload-button:focus,
.gsc-cursor-page.black.button-focus:focus {
    box-shadow: 0 0 0 2px black
}
.button.roll-red:not([disabled]):hover,
.roll-red.file-upload-button:not([disabled]):hover,
.button.roll-red:not([disabled]):focus,
.roll-red.file-upload-button:not([disabled]):focus,
.gsc-cursor-page.roll-red:not([disabled]):hover,
.gsc-cursor-page.roll-red:not([disabled]):focus {
    background: #ff3c41
}
.button.roll-green:not([disabled]):hover,
.roll-green.file-upload-button:not([disabled]):hover,
.button.roll-green:not([disabled]):focus,
.roll-green.file-upload-button:not([disabled]):focus,
.gsc-cursor-page.roll-green:not([disabled]):hover,
.gsc-cursor-page.roll-green:not([disabled]):focus {
    background: #47cf73
}
.button.roll-yellow:not([disabled]):hover,
.roll-yellow.file-upload-button:not([disabled]):hover,
.button.roll-yellow:not([disabled]):focus,
.roll-yellow.file-upload-button:not([disabled]):focus,
.gsc-cursor-page.roll-yellow:not([disabled]):hover,
.gsc-cursor-page.roll-yellow:not([disabled]):focus {
    background: #fcd000;
    color: black !important
}
.button.big,
.big.file-upload-button,
.gsc-cursor-page.big {
    font-size: 2em
}
.button.bold,
.bold.file-upload-button,
.gsc-cursor-page.bold {
    font-weight: 700 !important
}
.button-outline {
    background: none;
    border: 3px solid #ccc
}
.button-outline:hover,
.button-outline:focus {
    background: white;
    border-color: white;
    color: black
}
.button-light {
    background: #ccc;
    color: #111 !important
}
.button-light:hover {
    background: #999999;
    color: white !important
}
.button-light.active:not([disabled]) {
    background: #555;
    color: white !important
}
.button-medium,
.button-small {
    background: #343436;
    color: white
}
.button-medium.button-focus:focus,
.button-small.button-focus:focus {
    background: #4d4d50;
    box-shadow: 0 0 0 2px #343436
}
.button-medium:hover,
.button-small:hover {
    background: #4d4d50
}
.button-medium.active:not([disabled]),
.button-small.active:not([disabled]) {
    background: white;
    color: #1e1e1e !important
}
.button-medium.active:not([disabled]) svg,
.button-small.active:not([disabled]) svg {
    fill: #1e1e1e
}
.button-dark {
    background: #111
}
.button-dark:hover,
.button-dark:focus {
    background: #1e1e1e
}
.button-dark.active:not([disabled]) {
    background: white;
    color: #1e1e1e !important
}
.button-dark.active:not([disabled]):not(.loved):not(.all-three) svg {
    fill: #1e1e1e
}
.button-no-right-margin,
.button:only-child,
.file-upload-button:only-child {
    margin-right: 0 !important
}
.pagination-button {
    background: none;
    border: 3px solid #ccc
}
.pagination-button:hover,
.pagination-button:focus {
    background: white;
    border-color: white;
    color: black
}
.pagination-button .icon-arrow-right-mini,
.pagination-button .icon-arrow-left-mini {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px
}
.pagination-button .icon-arrow-right-mini {
    margin-left: 4px
}
.pagination-button .icon-arrow-left-mini {
    margin-right: 4px
}
.pagination-button:hover .icon-arrow-right-mini,
.pagination-button:hover .icon-arrow-left-mini,
.pagination-button:focus .icon-arrow-right-mini,
.pagination-button:focus .icon-arrow-left-mini {
    fill: black
}
.button-fullwidth {
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0
}
.button-right-label {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}
.button-right-label .label {
    padding-right: 4px
}
.button-right-label .right-label {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    margin-left: auto;
    padding-left: 5px;
    color: #8d8d8d;
    font-size: 0.8em;
    width: 17px;
    text-align: center
}
.mini-button,
.lowkey-header .user-stuff>.button,
.lowkey-header .user-stuff>.file-upload-button,
.file-upload-button {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    font-size: 0.8rem;
    padding: 2px 7px;
    margin: 0 1px 0 0;
    border-width: 1px
}
.mini-button>svg,
.lowkey-header .user-stuff>.button>svg,
.lowkey-header .user-stuff>.file-upload-button>svg,
.file-upload-button>svg {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px
}
.mini-button>svg:not(:only-child),
.lowkey-header .user-stuff>.button>svg:not(:only-child),
.lowkey-header .user-stuff>.file-upload-button>svg:not(:only-child),
.file-upload-button>svg:not(:only-child) {
    margin-right: 2px
}
.file-upload-button {
    width: 80px
}
.file-upload-button::-webkit-file-upload-button {
    visibility: hidden
}
.file-upload-button::before {
    content: 'Select File(s)';
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer
}
#heart-this.loved {
    color: #d95151 !important
}
#heart-this .icon {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    color: #999
}
.save-template {
    width: 100%
}
.dropdown-divider {
    display: inline-block;
    height: 100%;
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 5px
}
.dropdown-divider::before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    margin-left: -4px;
    top: 10%;
    height: 80%;
    background: rgba(255, 255, 255, 0.1)
}
body:not(#mobile-editor-body).show-run-button .top-button {
    padding: 12px 14px
}
.sharing-button .icon {
    top: 3px
}
.big-button {
    font-size: 2em;
    padding: 12px 40px;
    box-shadow: 0 0 15px 1px #f3cf3d
}
.big-button:focus,
.big-button:hover {
    box-shadow: 0 0 30px 1px #f3cf3d
}
.button-small {
    padding: 6px 11px;
    font-size: 0.96rem
}
.button-tiny {
    padding: 0 5px;
    font-size: 0.9rem;
    line-height: 1
}
.social-account-button {
    padding-left: 60px;
    text-align: left
}
.social-account-button svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    position: absolute;
    left: 14px;
    top: 6px
}
.social-account-button.social-account-button-warning:hover:not([disabled]),
.social-account-button.social-account-button-warning:focus:not([disabled]) {
    background: #a00808;
    color: white !important
}
.social-account-button.social-account-button-warning:hover:not([disabled]) svg,
.social-account-button.social-account-button-warning:focus:not([disabled]) svg {
    fill: white
}
.social-account-button.smaller {
    white-space: normal;
    padding: 5px 8px 5px 40px;
    overflow: hidden;
    background-size: 30px;
    background-position: 4px 12px
}
.social-account-button.smaller svg {
    width: 20px;
    height: 20px;
    left: 8px;
    top: 50%;
    margin-top: -10px
}
.social-account-button.smaller:hover:not([disabled]),
.social-account-button.smaller:focus:not([disabled]) {
    background-size: 30px;
    background-position: 4px -39px
}
.github-button {
    background: #666;
    color: white
}
.github-button::before {
    top: 1px;
    left: -2px;
    font-weight: normal
}
.github-button:hover:not([disabled]),
.github-button:focus:not([disabled]) {
    color: black !important;
    background: #e6e2e4;
    text-shadow: none
}
.twitter-button {
    background: #60b5f0;
    color: white
}
.twitter-button:hover:not([disabled]),
.twitter-button:focus:not([disabled]) {
    background: #e6e2e4;
    color: black !important;
    text-shadow: none
}
.twitter-button:hover:not([disabled]) svg,
.twitter-button:focus:not([disabled]) svg {
    fill: #60b5f0
}
.facebook-button {
    background: #4464a2;
    color: white
}
.facebook-button:hover:not([disabled]),
.facebook-button:focus:not([disabled]) {
    background: #e6e2e4;
    color: black !important;
    text-shadow: none
}
.facebook-button:hover:not([disabled]) svg,
.facebook-button:focus:not([disabled]) svg {
    fill: #4464a2
}
select.button,
select.file-upload-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 1px;
    text-overflow: ''
}
.action-button {
    position: relative
}
.action-button[data-loading] {
    cursor: default
}
.action-button .spinner {
    position: absolute;
    width: 26px;
    height: 26px;
    background-size: 26px;
    top: 50%;
    margin-top: -13px;
    opacity: 0;
    background-image: url(data:image/gif;base64,R0lGODlhIAAgAPMAAJmZmf///6+vr8nJybW1tcDAwOjo6Nvb26ioqKOjo7Ozs/Ly8vz8/AAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAIAAgAAAE5xDISWlhperN52JLhSSdRgwVo1ICQZRUsiwHpTJT4iowNS8vyW2icCF6k8HMMBkCEDskxTBDAZwuAkkqIfxIQyhBQBFvAQSDITM5VDW6XNE4KagNh6Bgwe60smQUB3d4Rz1ZBApnFASDd0hihh12BkE9kjAJVlycXIg7CQIFA6SlnJ87paqbSKiKoqusnbMdmDC2tXQlkUhziYtyWTxIfy6BE8WJt5YJvpJivxNaGmLHT0VnOgSYf0dZXS7APdpB309RnHOG5gDqXGLDaC457D1zZ/V/nmOM82XiHRLYKhKP1oZmADdEAAAh+QQJCgAAACwAAAAAIAAgAAAE6hDISWlZpOrNp1lGNRSdRpDUolIGw5RUYhhHukqFu8DsrEyqnWThGvAmhVlteBvojpTDDBUEIFwMFBRAmBkSgOrBFZogCASwBDEY/CZSg7GSE0gSCjQBMVG023xWBhklAnoEdhQEfyNqMIcKjhRsjEdnezB+A4k8gTwJhFuiW4dokXiloUepBAp5qaKpp6+Ho7aWW54wl7obvEe0kRuoplCGepwSx2jJvqHEmGt6whJpGpfJCHmOoNHKaHx61WiSR92E4lbFoq+B6QDtuetcaBPnW6+O7wDHpIiK9SaVK5GgV543tzjgGcghAgAh+QQJCgAAACwAAAAAIAAgAAAE7hDISSkxpOrN5zFHNWRdhSiVoVLHspRUMoyUakyEe8PTPCATW9A14E0UvuAKMNAZKYUZCiBMuBakSQKG8G2FzUWox2AUtAQFcBKlVQoLgQReZhQlCIJesQXI5B0CBnUMOxMCenoCfTCEWBsJColTMANldx15BGs8B5wlCZ9Po6OJkwmRpnqkqnuSrayqfKmqpLajoiW5HJq7FL1Gr2mMMcKUMIiJgIemy7xZtJsTmsM4xHiKv5KMCXqfyUCJEonXPN2rAOIAmsfB3uPoAK++G+w48edZPK+M6hLJpQg484enXIdQFSS1u6UhksENEQAAIfkECQoAAAAsAAAAACAAIAAABOcQyEmpGKLqzWcZRVUQnZYg1aBSh2GUVEIQ2aQOE+G+cD4ntpWkZQj1JIiZIogDFFyHI0UxQwFugMSOFIPJftfVAEoZLBbcLEFhlQiqGp1Vd140AUklUN3eCA51C1EWMzMCezCBBmkxVIVHBWd3HHl9JQOIJSdSnJ0TDKChCwUJjoWMPaGqDKannasMo6WnM562R5YluZRwur0wpgqZE7NKUm+FNRPIhjBJxKZteWuIBMN4zRMIVIhffcgojwCF117i4nlLnY5ztRLsnOk+aV+oJY7V7m76PdkS4trKcdg0Zc0tTcKkRAAAIfkECQoAAAAsAAAAACAAIAAABO4QyEkpKqjqzScpRaVkXZWQEximw1BSCUEIlDohrft6cpKCk5xid5MNJTaAIkekKGQkWyKHkvhKsR7ARmitkAYDYRIbUQRQjWBwJRzChi9CRlBcY1UN4g0/VNB0AlcvcAYHRyZPdEQFYV8ccwR5HWxEJ02YmRMLnJ1xCYp0Y5idpQuhopmmC2KgojKasUQDk5BNAwwMOh2RtRq5uQuPZKGIJQIGwAwGf6I0JXMpC8C7kXWDBINFMxS4DKMAWVWAGYsAdNqW5uaRxkSKJOZKaU3tPOBZ4DuK2LATgJhkPJMgTwKCdFjyPHEnKxFCDhEAACH5BAkKAAAALAAAAAAgACAAAATzEMhJaVKp6s2nIkolIJ2WkBShpkVRWqqQrhLSEu9MZJKK9y1ZrqYK9WiClmvoUaF8gIQSNeF1Er4MNFn4SRSDARWroAIETg1iVwuHjYB1kYc1mwruwXKC9gmsJXliGxc+XiUCby9ydh1sOSdMkpMTBpaXBzsfhoc5l58Gm5yToAaZhaOUqjkDgCWNHAULCwOLaTmzswadEqggQwgHuQsHIoZCHQMMQgQGubVEcxOPFAcMDAYUA85eWARmfSRQCdcMe0zeP1AAygwLlJtPNAAL19DARdPzBOWSm1brJBi45soRAWQAAkrQIykShQ9wVhHCwCQCACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiRMDjI0Fd30/iI2UA5GSS5UDj2l6NoqgOgN4gksEBgYFf0FDqKgHnyZ9OX8HrgYHdHpcHQULXAS2qKpENRg7eAMLC7kTBaixUYFkKAzWAAnLC7FLVxLWDBLKCwaKTULgEwbLA4hJtOkSBNqITT3xEgfLpBtzE/jiuL04RGEBgwWhShRgQExHBAAh+QQJCgAAACwAAAAAIAAgAAAE7xDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfZiCqGk5dTESJeaOAlClzsJsqwiJwiqnFrb2nS9kmIcgEsjQydLiIlHehhpejaIjzh9eomSjZR+ipslWIRLAgMDOR2DOqKogTB9pCUJBagDBXR6XB0EBkIIsaRsGGMMAxoDBgYHTKJiUYEGDAzHC9EACcUGkIgFzgwZ0QsSBcXHiQvOwgDdEwfFs0sDzt4S6BK4xYjkDOzn0unFeBzOBijIm1Dgmg5YFQwsCMjp1oJ8LyIAACH5BAkKAAAALAAAAAAgACAAAATwEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GGl6NoiPOH16iZKNlH6KmyWFOggHhEEvAwwMA0N9GBsEC6amhnVcEwavDAazGwIDaH1ipaYLBUTCGgQDA8NdHz0FpqgTBwsLqAbWAAnIA4FWKdMLGdYGEgraigbT0OITBcg5QwPT4xLrROZL6AuQAPUS7bxLpoWidY0JtxLHKhwwMJBTHgPKdEQAACH5BAkKAAAALAAAAAAgACAAAATrEMhJaVKp6s2nIkqFZF2VIBWhUsJaTokqUCoBq+E71SRQeyqUToLA7VxF0JDyIQh/MVVPMt1ECZlfcjZJ9mIKoaTl1MRIl5o4CUKXOwmyrCInCKqcWtvadL2SYhyASyNDJ0uIiUd6GAULDJCRiXo1CpGXDJOUjY+Yip9DhToJA4RBLwMLCwVDfRgbBAaqqoZ1XBMHswsHtxtFaH1iqaoGNgAIxRpbFAgfPQSqpbgGBqUD1wBXeCYp1AYZ19JJOYgH1KwA4UBvQwXUBxPqVD9L3sbp2BNk2xvvFPJd+MFCN6HAAIKgNggY0KtEBAAh+QQJCgAAACwAAAAAIAAgAAAE6BDISWlSqerNpyJKhWRdlSAVoVLCWk6JKlAqAavhO9UkUHsqlE6CwO1cRdCQ8iEIfzFVTzLdRAmZX3I2SfYIDMaAFdTESJeaEDAIMxYFqrOUaNW4E4ObYcCXaiBVEgULe0NJaxxtYksjh2NLkZISgDgJhHthkpU4mW6blRiYmZOlh4JWkDqILwUGBnE6TYEbCgevr0N1gH4At7gHiRpFaLNrrq8HNgAJA70AWxQIH1+vsYMDAzZQPC9VCNkDWUhGkuE5PxJNwiUK4UfLzOlD4WvzAHaoG9nxPi5d+jYUqfAhhykOFwJWiAAAIfkECQoAAAAsAAAAACAAIAAABPAQyElpUqnqzaciSoVkXVUMFaFSwlpOCcMYlErAavhOMnNLNo8KsZsMZItJEIDIFSkLGQoQTNhIsFehRww2CQLKF0tYGKYSg+ygsZIuNqJksKgbfgIGepNo2cIUB3V1B3IvNiBYNQaDSTtfhhx0CwVPI0UJe0+bm4g5VgcGoqOcnjmjqDSdnhgEoamcsZuXO1aWQy8KAwOAuTYYGwi7w5h+Kr0SJ8MFihpNbx+4Erq7BYBuzsdiH1jCAzoSfl0rVirNbRXlBBlLX+BP0XJLAPGzTkAuAOqb0WT5AH7OcdCm5B8TgRwSRKIHQtaLCwg1RAAAOwAAAAAAAAAAAA==)
}
.action-button,
.action-button .spinner,
.action-button .label {
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) padding, 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) right
}
.action-button.expand-right .spinner {
    right: 15px
}
.action-button.expand-right.in-action {
    padding-right: 56px
}
.action-button.expand-right.in-action .spinner {
    opacity: 1
}
.multi-button {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 3px
}
.multi-button>.button,
.multi-button>.file-upload-button {
    margin: 0;
    float: left;
    border-radius: 0
}
.mini-multi-button {
    overflow: visible;
    margin: 0 10px
}
.mini-multi-button>.button,
.mini-multi-button>.file-upload-button {
    min-width: 50px;
    text-align: center;
    margin-left: -1px
}
.mini-multi-button>.button:first-child,
.mini-multi-button>.file-upload-button:first-child {
    border-radius: 3px 0 0 3px
}
.mini-multi-button>.button:last-child,
.mini-multi-button>.file-upload-button:last-child {
    border-radius: 0 3px 3px 0
}
.grid-button svg {
    fill: white;
    pointer-events: none
}
.grid-button .grid-button-6 {
    width: 23px;
    height: 21px
}
.grid-button .grid-button-12 {
    width: 21px;
    height: 32px
}
.button-editor-outline:not(.loves) svg,
.button-editor-solid:not(.loves) svg {
    margin-right: 3px;
    fill: #aeaeae
}
.button-editor-outline:hover,
.button-editor-solid:hover {
    background: #4d4d50
}
.button-editor-outline {
    border: 3px solid #343436;
    border-radius: 2px;
    background: none
}
.button-editor-solid {
    border: 3px solid #343436;
    background: #343436
}
progress.progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border: 0;
    background-color: #28282b
}
progress.progress::-webkit-progress-bar {
    background-color: #28282b
}
progress.progress::-moz-progress-bar {
    background-color: #ccc
}
progress.progress::-webkit-progress-value {
    background-color: #ccc
}
progress.progress.level-1::-moz-progress-bar {
    background-color: #47cf73
}
progress.progress.level-1::-webkit-progress-value {
    background-color: #47cf73
}
progress.progress.level-2::-moz-progress-bar {
    background-color: #fcd000
}
progress.progress.level-2::-webkit-progress-value {
    background-color: #fcd000
}
progress.progress.level-3::-moz-progress-value {
    background-color: #ff3c41
}
progress.progress.level-3::-webkit-progress-value {
    background-color: #ff3c41
}
.loading-spinner {
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    background: #666;
    display: block;
    margin: 10em auto;
    position: absolute;
    left: 50%;
    -webkit-animation: loading-spinner 2s ease infinite;
    animation: loading-spinner 2s ease infinite
}
.loading-spinner::before,
.loading-spinner::after {
    content: '';
    display: block;
    position: absolute;
    height: inherit;
    width: inherit;
    background: inherit;
    border-radius: inherit;
    -webkit-animation: loading-spinner 2s ease infinite;
    animation: loading-spinner 2s ease infinite
}
.loading-spinner::before {
    left: -2.3em
}
.loading-spinner::after {
    left: 2.3em
}
@-webkit-keyframes loading-spinner {
    0% {
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        top: -3.8em;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
    100% {
        top: 0;
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}
@keyframes loading-spinner {
    0% {
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        top: -3.8em;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg)
    }
    100% {
        top: 0;
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}
.loading-codepen-box {
    width: 100px;
    height: 100px;
    position: absolute
}
.loading-codepen-box div,
.loading-codepen-box svg {
    width: inherit;
    height: inherit;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
.loading-codepen-box .animation-position-up {
    -webkit-animation-name: codepen-box-up;
    animation-name: codepen-box-up;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.loading-codepen-box .animation-position-down {
    -webkit-animation-name: codepen-box-down;
    animation-name: codepen-box-down;
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53)
}
.loading-codepen-box .animation-rotation {
    -webkit-animation-name: codepen-box-spin;
    animation-name: codepen-box-spin;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}
.loading-codepen-box .animation-scale {
    -webkit-animation-name: codepen-box-squash;
    animation-name: codepen-box-squash;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955)
}
@-webkit-keyframes codepen-box-up {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes codepen-box-up {
    0% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@-webkit-keyframes codepen-box-down {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }
}
@keyframes codepen-box-down {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px)
    }
}
@-webkit-keyframes codepen-box-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}
@keyframes codepen-box-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}
@-webkit-keyframes codepen-box-squash {
    0% {
        -webkit-transform: scaleY(0.8);
        transform: scaleY(0.8)
    }
    7% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    91% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    100% {
        -webkit-transform: scaleY(0.8);
        transform: scaleY(0.8)
    }
}
@keyframes codepen-box-squash {
    0% {
        -webkit-transform: scaleY(0.8);
        transform: scaleY(0.8)
    }
    7% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    91% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
    }
    100% {
        -webkit-transform: scaleY(0.8);
        transform: scaleY(0.8)
    }
}
.modal {
    position: fixed;
    width: 600px;
    min-width: 380px;
    left: 50%;
    top: 50px;
    margin-left: -300px;
    padding: 20px;
    background: black;
    z-index: 201
}
.modal p,
.modal ul {
    color: #999;
    margin: 0 0 25px 0
}
.modal ul {
    margin: 0 0 50px 20px
}
.modal .modal-buttons {
    margin: 0
}
.modal code {
    font-family: "Source Code Pro", Menlo, Consolas, Monaco, monospace;
    font-size: 0.8em;
    color: white
}
.modal .contact-support {
    vertical-align: top;
    font-style: italic;
    margin-top: -10px
}
.modal .button,
.modal .file-upload-button {
    float: none
}
.modal.modal-warning {
    border: 10px solid #ff3c41
}
.modal.modal-error {
    border: 10px solid #fcd000
}
.modal.modal-good {
    border: 10px solid #47cf73
}
.modal.modal-neutral {
    border: 10px solid #343436
}
.modal.modal-email,
.modal.modal-blue {
    border: 10px solid #76daff
}
.modal.modal-upsell {
    box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.2);
    margin-left: -400px;
    text-align: center;
    background: #fff;
    height: 590px;
    width: 800px;
    top: 30px
}
.modal.modal-upsell .upsell-modal-close-x {
    transition: opacity 200ms ease;
    opacity: 0.5;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px
}
.modal.modal-upsell .upsell-modal-close-x svg {
    width: 100%;
    height: 100%
}
.modal.modal-upsell .upsell-modal-close-x:hover {
    opacity: 1
}
.modal.modal-upsell h1 {
    color: #111;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px
}
.modal.modal-upsell h1 .badge-pro {
    font-weight: bold;
    font-size: 38px;
    padding-left: 7px;
    padding-right: 6px
}
.modal.modal-upsell p {
    margin-bottom: 18px
}
.modal.modal-upsell .tab-group .tab {
    transition: background-color 200ms ease, color 200ms ease;
    color: #111;
    font-size: 20px;
    background: #eee;
    border-radius: 3px;
    margin: 5px;
    padding: 5px 10px
}
.modal.modal-upsell .tab-group .tab:hover {
    background: #ddd
}
.modal.modal-upsell .tab-group .tab.active {
    background-color: #111;
    color: #fcd000
}
.modal.modal-upsell .upsell-tab {
    padding: 20px 90px
}
.modal.modal-upsell .demo {
    height: 280px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%
}
.modal.modal-upsell .demo video {
    height: 100%
}
.modal.modal-upsell .upsell-footer {
    margin-top: 20px;
    font-size: 25px;
    color: #111
}
.modal.modal-upsell .upsell-footer a {
    font-size: 23px;
    padding: 10px 14px;
    border-radius: 3px;
    color: #fff !important;
    margin-left: 10px;
    margin-right: 10px
}
.modal.modal-single-message {
    text-align: center;
    padding: 45px 10px 55px
}
.modal.modal-single-message p {
    margin: 0
}
@media (max-width: 830px) {
    .modal {
        top: 20px;
        left: 10px;
        right: 10px;
        width: auto;
        min-width: 0;
        max-height: 375px;
        overflow: auto;
        margin-left: 0
    }
}
.modal .stop-confirms {
    margin-top: 20px;
    margin-bottom: 10px
}
.modal .stop-confirms input[type=checkbox] {
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
    margin-top: 5px
}
.modal-message {
    z-index: 301
}
@media (max-width: 600px) {
    .modal {
        box-sizing: border-box;
        width: 90%;
        left: 0;
        right: 0;
        margin: auto;
        min-width: auto
    }
}
.modal-title {
    font-weight: 700;
    font-size: 32px;
    margin: 0 0 10px 0;
    line-height: 1.2
}
.bottom-left-popup {
    top: auto;
    bottom: 30px;
    left: 0;
    width: auto;
    margin-left: 0;
    border-radius: 0
}
.add-to-collection-popup {
    padding: 10px;
    background: black
}
.add-to-collection-popup .chzn-drop {
    bottom: 0;
    top: auto !important;
    padding-bottom: 40px;
    margin-left: -10px
}
.add-to-collection-popup .chzn-drop li {
    color: #ccc
}
.add-to-collection-popup .no-search {
    padding-bottom: 0
}
.add-to-collection-popup .chzn-search {
    position: absolute !important;
    bottom: -8px;
    left: 0;
    background: black;
    padding: 10px !important
}
.add-to-collection-popup .chzn-search input {
    font-size: 1.2em
}
.add-to-collection-popup .chzn-results {
    padding: 10px !important;
    margin: 0 !important;
    background: black
}
.add-to-collection-popup .chzn-results li {
    color: #ccc !important
}
.add-to-collection-popup .chzn-results li:hover,
.add-to-collection-popup .chzn-results li:active {
    color: white !important
}
.add-to-collection-popup .chzn-results #collection_choice_chzn_o_1 {
    border-bottom: 1px solid #666;
    margin-bottom: 5px;
    padding-bottom: 8px
}
.add-to-collection-popup .chzn-drop {
    background: black
}
.upload-error-file {
    font-weight: bold;
    color: #ff3c41
}
@media (max-width: 830px) {
    .modal-buttons {
        line-height: 4
    }
}
.overlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5)
}
.overlay.block {
    display: block
}
.modal-overlay,
.noscript-overlay,
.tour-overlay {
    z-index: 300
}
.popup-overlay {
    z-index: 200
}
input.modal-closing-trick {
    position: absolute;
    top: -9999px;
    left: -9999px
}
input.modal-closing-trick:checked ~ div {
    display: none !important
}
.collision-modal-choices {
    border-collapse: collapse
}
.collision-modal-choices td {
    padding: 15px 20px 15px 0;
    border-bottom: 1px solid #999
}
.collision-modal-choices tr:last-child td {
    border: 0;
    padding-top: 20px
}
#list-of-files p {
    margin: 0 0 2px 0
}
#list-of-files p::before {
    content: " - "
}
#list-of-files p:last-child {
    margin-bottom: 15px
}
.collection-settings-form .public-private-wrap {
    margin-top: 9px
}
.collection-settings-form .ios-toggle-wrap {
    margin-bottom: 0
}
.collection-settings-form .public-private-wrap .help-flyout-link {
    display: inline-block;
    position: relative;
    top: 2px;
    right: 0;
    margin-left: 10px
}
.collection-settings-form-footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}
.collection-settings-form-footer .public-private-wrap {
    background: none;
    padding: 0;
    margin: 9px 0 0
}
.top-label-form>.collection-settings-form-footer {
    margin-bottom: 0
}
.collection-settings-form-footer .collection-settings-form-footer-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center
}
@media (max-width: 550px) {
    .collection-settings-form .public-private-wrap {
        margin-top: 20px
    }
}
@media (min-width: 550px) {
    .collection-settings-form-footer {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row
    }
    .collection-settings-form-footer-item:first-child {
        text-align: left
    }
    .collection-settings-form .ios-toggle-wrap {
        text-align: right
    }
}
.modal-signup {
    background: white;
    border: 10px solid #979797;
    padding: 20px 40px 0 40px;
    height: 95vh;
    max-height: 770px;
    min-height: 600px;
    width: 700px;
    top: 2.5vh;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}
.modal-signup h1 {
    color: #313131
}
.modal-signup h1 strong {
    color: #3d7d47
}
.modal-signup p {
    color: #818181
}
.modal-signup .tabs {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 32px
}
.modal-signup .tab-group {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5
}
.modal-signup .tab {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Telefon Black", Sans-Serif;
    display: inline-block;
    width: 48%;
    font-size: 1.6rem;
    text-align: center;
    background: #e3e3e3;
    height: 40px;
    line-height: 38px;
    border: 2px solid #ccc;
    color: #757575
}
.modal-signup .tab.active {
    color: #2ba753;
    border-bottom: none;
    background: #f4f4f4
}
.modal-signup .tab:hover:not(.active) {
    color: #313131;
    background: #f4f4f4
}
.modal-signup .tab.left {
    margin-right: 20px
}
.modal-signup .bottom-area {
    background: #f4f4f4;
    border-top: 2px solid #ccc;
    padding: 12px 40px 0px 40px;
    margin: -2px -40px;
    overflow-y: auto;
    height: 338px;
    position: relative;
    z-index: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-bottom: 16px
}
.modal-signup .bottom-area label {
    color: #454545;
    text-transform: none;
    font-weight: bold
}
.modal-signup .bottom-area.active {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}
.modal-signup .anon-signup-tab {
    margin-right: -40px;
    padding-right: 20px
}
.modal-signup .loading {
    position: absolute;
    z-index: 0;
    width: 220px;
    height: 140px;
    left: 50%;
    margin-left: -110px;
    top: 110px
}
.modal-signup .loading .loading-codepen-box {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    margin-top: -60px
}
.modal-signup .loading .loading-codepen-box svg {
    fill: #777
}
.modal-signup .loading p {
    font-size: 1.5rem;
    margin-left: 90px;
    margin-top: 20px
}
.modal-signup .anon-login-frame {
    border: 0;
    outline: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    height: 308px;
    position: relative;
    z-index: 20;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}
.modal-signup .save-as-anon {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #333;
    height: 30px;
    line-height: 30px;
    text-align: center
}
.modal-signup .save-as-anon .thats-ok {
    color: white
}
@media (max-width: 550px) {
    .modal-signup {
        max-height: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        padding: 10px
    }
    .modal-signup h1 {
        font-size: 2rem
    }
    .modal-signup .tab-group {
        white-space: nowrap
    }
    .modal-signup .tabs {
        padding-bottom: 22px
    }
    .modal-signup .tab.left {
        margin-right: 3px
    }
}
.flash-message {
    position: fixed;
    z-index: 302;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 3px 10px 4px;
    color: black;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fedd31
}
.flash-message a {
    background: #222;
    color: white;
    padding: 2px 4px;
    border-radius: 4px
}
.flash-message button.recheck-button {
    margin-left: 10px;
    margin-bottom: 1px
}
.flash-message .close {
    width: 22px;
    height: 22px;
    padding: 5px;
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer
}
.flash-message .close svg {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0px;
    vertical-align: top
}
.flash-message .dismiss {
    background: #fedd31;
    color: black;
    display: inline-block;
    padding: 0px;
    text-align: center;
    font-size: 12px;
    margin-left: 10px;
    letter-spacing: 0.1px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 100%;
    font-weight: bold;
    border: 2px solid black;
    box-sizing: content-box
}
.flash-message .dismiss svg {
    width: 50%;
    height: 50%;
    margin-top: 5px
}
.bar-message {
    text-align: center;
    margin: 10px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    transition: 0.3s;
    height: 42px;
    line-height: 40px
}
.bar-message .close {
    position: absolute;
    right: 8px;
    top: 1px
}
.bar-message .close svg {
    width: 12px;
    height: 12px;
    fill: white;
    pointer-events: none
}
.bar-message .close:hover svg,
.bar-message .close:active svg {
    fill: #ccc
}
.bar-message .mini-button,
.bar-message .lowkey-header .user-stuff>.button,
.lowkey-header .bar-message .user-stuff>.button,
.bar-message .lowkey-header .user-stuff>.file-upload-button,
.lowkey-header .bar-message .user-stuff>.file-upload-button,
.bar-message .file-upload-button {
    vertical-align: baseline
}
.bar-message.bar-message-error {
    background: #ff3c41
}
.bar-message.bar-message-error a {
    color: inherit;
    text-decoration: underline
}
.bar-message.bar-message-success {
    background: #47cf73
}
.bar-message.bar-message-success a {
    color: inherit;
    text-decoration: underline
}
.bar-message.bar-message-ask {
    background: #fcd000;
    color: black
}
@media (max-width: 550px) {
    .bar-message {
        height: auto
    }
}
.bar-message.bar-message-gone {
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    margin: 0
}
.badge {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    font-size: 70%;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 3px 1px 3px;
    color: black !important;
    border-radius: 3px;
    position: relative;
    top: -2px;
    text-shadow: none !important;
    white-space: nowrap
}
.single-item .badge {
    top: 0;
    left: -3px;
    font-size: 80%
}
.badge-pro {
    background: #fcd000
}
.badge-hire {
    background: #76daff
}
.badge-new,
.badge-draft {
    background: #47cf73
}
.badge-follows {
    background: #555
}
.help-flyout {
    display: none;
    position: absolute;
    z-index: 10;
    left: 100%;
    top: -20px;
    margin-left: 12px;
    border: 5px solid #555;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    width: 300px;
    padding: 20px;
    background: black;
    text-align: left;
    font-weight: normal;
    color: #ccc
}
.help-flyout::before {
    content: "";
    position: absolute;
    left: 0;
    margin-left: -14px;
    top: 12px;
    width: 0;
    height: 0;
    border-right: 10px solid #555;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent
}
.help-flyout h5 {
    color: white;
    margin: 0 0 0.5rem 0
}
.help-flyout p {
    font-size: 0.9rem;
    margin: 0 0 1rem 0
}
.help-flyout p:last-child {
    margin: 0
}
.help-flyout a {
    color: #76daff;
    white-space: nowrap
}
.help-flyout a:hover,
.help-flyout a:focus {
    color: white
}
.help-flyout pre {
    white-space: pre-wrap
}
.help-flyout-reverse {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px
}
.help-flyout-reverse::before {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -24px;
    border-right: 10px solid transparent;
    border-left: 10px solid #555
}
.help-flyout-flush-right-top {
    right: 0;
    left: auto;
    top: auto;
    margin-right: 0;
    margin-left: 0;
    bottom: calc(100% + 20px)
}
.help-flyout-flush-right-top::before {
    top: calc(100% + 5px);
    bottom: 0;
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid #555;
    border-bottom: none;
    border-right: 10px solid transparent
}
.help-flyout-up {
    top: auto;
    bottom: -20px
}
.help-flyout-up::before {
    top: auto;
    bottom: 10px
}
.help-flyout-middle {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.help-flyout-middle::before {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}
.help-flyout-narrow {
    width: 200px
}
.help-flyout-link {
    position: absolute;
    top: 12px;
    right: 0;
    width: 14px;
    height: 14px
}
.help-flyout-link .icon-help {
    width: 100%;
    height: 100%;
    fill: #666
}
.help-flyout-link .icon-help:hover,
.help-flyout-link .icon-help:focus {
    fill: #999
}
.help-flyout-link svg {
    display: block
}
.help-flyout-link .icon-x {
    width: 12px;
    height: 12px;
    fill: #555;
    position: absolute;
    top: 10px;
    right: 10px
}
.help-flyout-link .icon-x:hover,
.help-flyout-link .icon-x:focus {
    fill: #eee
}
.template-wrap .help-flyout-link,
.public-private-wrap .help-flyout-link,
.template-checkbox-row .help-flyout-link {
    top: 27px;
    right: 20px
}
.help-flyout-link.inline-flyout.open {
    width: 100%;
    position: relative;
    height: auto
}
.help-flyout-link.inline-flyout.open .icon-help {
    position: absolute;
    right: -5px;
    left: auto;
    top: -25px;
    width: 14px;
    height: 14px
}
.help-flyout-link.inline-flyout.open .help-flyout.help-flyout-reverse {
    display: block;
    position: relative;
    right: auto;
    width: 100%;
    margin-top: 24px;
    border-width: 2px;
    left: 2%
}
.help-flyout-link.inline-flyout.open .help-flyout.help-flyout-reverse::before {
    display: none
}
.private-icon {
    float: right;
    fill: #555;
    height: 25px;
    width: 20px
}
.private-icon.inline {
    display: inline-block;
    float: none;
    vertical-align: middle
}
.private-icon svg {
    width: 100%;
    height: 100%
}
.private-icon.left {
    margin-right: 5px;
    float: left
}
.private-icon.absolute {
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2
}
.private-icon.centered {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%
}
.private-icon.large {
    width: 40px;
    height: 40px
}
.private-icon.small {
    height: 23px;
    width: 16px
}
.private-icon.trans {
    opacity: 0.5
}
.view-switcher-area {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
.view-switcher-area .button,
.view-switcher-area .file-upload-button {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}
.view-switcher {
    padding: 20px;
    width: 350px;
    text-align: left
}
.view-switcher .view-switcher-row {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    display: block;
    padding: 5px 10px 8px 10px;
    margin: 0 -10px
}
.view-switcher h3 {
    font-size: 1.1rem
}
.view-switcher hr {
    margin: 20px 0 20px
}
.view-switcher-row {
    position: relative
}
.view-switcher-row.view-switcher-cbt {
    border-top: 1px dotted #ccc
}
.view-meta {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: 6px 15px 10px;
    color: #ccc
}
.view-meta>* {
    vertical-align: middle
}
.view-meta .learn-more {
    display: inline-block;
    margin-left: 15px
}
.view-meta svg {
    pointer-events: none;
    width: 12px;
    height: 12px
}
.share-static {
    margin-left: -10px
}
.share-static a {
    padding: 10px;
    color: #343436;
    border-radius: 2px
}
.share-static a:focus,
.share-static a:hover {
    background: #e7e7e7
}
.editor-layout-buttons {
    border: 1px solid #ccc;
    border-radius: 2px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
.editor-layout-buttons>a {
    padding: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: inline-block
}
.editor-layout-buttons>a:not(:last-child) {
    border-right: 1px solid #ccc
}
.editor-layout-buttons>a svg {
    fill: #ccc;
    display: block;
    margin: 0 auto
}
.editor-layout-buttons>a:hover {
    background: #eee
}
body.layout-left .editor-layout-buttons #left-layout,
body.layout-top .editor-layout-buttons #top-layout,
body.layout-right .editor-layout-buttons #right-layout {
    background: #ececec
}
body.layout-left .editor-layout-buttons #left-layout svg,
body.layout-top .editor-layout-buttons #top-layout svg,
body.layout-right .editor-layout-buttons #right-layout svg {
    fill: black
}
.layout-change-icon svg {
    width: 20px;
    height: 20px
}
.main-header {
    height: 69px;
    min-height: 69px;
    min-width: 1000px;
    border-bottom: 5px solid #343436;
    box-shadow: 0 1px 1px black
}
body.room-collab .main-header {
    border-bottom-color: #d4a12c
}
body.room-professor .main-header {
    border-bottom-color: #9e53d7
}
.pen-title-area {
    padding: 10px 15px 0 15px;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}
.pen-title-area .icon-codepen-box {
    fill: white;
    width: 25px;
    height: 25px;
    margin-right: 10px
}
.pen-title-area .pen-title-text {
    width: 100%;
    min-width: 0
}
.pen-title-area .pen-title {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    width: 100%;
    font-size: 1.3rem;
    margin: 0 0 1px 0
}
.pen-title-area .pen-title input[type="text"] {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    font-size: 1.3rem;
    background: none;
    border: none;
    color: currentColor;
    margin-top: -1px;
    margin-bottom: 2px;
    padding: 0;
    width: 100%
}
body.details .pen-title-area .pen-title {
    font-size: 1.6rem
}
.pen-title-area .pen-title-link {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 90%;
    display: inline-block;
    color: inherit
}
.pen-title-area .by {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #999
}
.pen-title-area .by .pen-owner-link {
    color: white;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0
}
.pen-title-area .by .badge-pro {
    margin-left: 2px;
    vertical-align: middle;
    top: -1px
}
body.details .pen-title-area .by {
    display: none
}
.pen-title-area .pen-title-link,
.pen-title-area .pen-owner-link {
    transition: opacity 200ms
}
.pen-title-area .pen-title-link:hover,
.pen-title-area .pen-title-link:focus,
.pen-title-area .pen-owner-link:hover,
.pen-title-area .pen-owner-link:focus {
    opacity: 0.8
}
.pen-title-area.editing .pen-title-link,
.pen-title-area.editing .edit-pen-title {
    display: none
}
body.details .pen-title-area {
    padding-top: 18px
}
.edit-pen-title {
    transition: opacity 300ms;
    margin-left: 3px;
    position: relative;
    top: -3px;
    cursor: pointer;
    height: 13px;
    width: 13px;
    fill: currentColor
}
.edit-pen-title:hover {
    opacity: 0.8;
    -webkit-animation: jiggle 0.6s forwards;
    animation: jiggle 0.6s forwards
}
.run {
    display: none
}
body.show-run-button .run {
    display: inline-block
}
.run:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px)
}
@media (max-width: 675px) {
    .main-header .loves {
        display: none
    }
}
@media (max-width: 610px) {
    .main-header .fork-button {
        display: none
    }
}
@media (max-width: 500px) {
    .main-header .view-switcher-area {
        display: none
    }
}
@media (max-width: 400px) {
    .main-header {
        height: 62px;
        min-height: 62px;
        min-width: 0
    }
    .user-avatar {
        width: 38px;
        height: 38px
    }
}
html,
body {
    overflow: auto;
    height: 100%
}
body {
    margin: 0
}
.fullpage {
    padding-bottom: 0px
}
.fullpage .main-header {
    min-width: 0
}
.oldie-header {
    display: none;
    padding: 5px;
    background: black;
    color: white
}
html.oldie .oldie-header {
    display: block
}
html.oldie .main-header {
    display: none
}
#result-iframe-wrap {
    height: 100%;
    height: calc(100% - 69px);
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}
html.oldie #result-iframe-wrap {
    height: 100%;
    height: calc(100% - 32px)
}
@media (max-width: 400px) {
    #result-iframe-wrap {
        height: calc(100% - 62px)
    }
}
#result {
    border: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: static
}