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

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600&family=Quicksand:wght@600&family=Varela+Round&display=swap');


html,
body {
    height: 100%;
    -webkit-overflow-scrolling: touch
}
div#example_filter label {
    font-size: 0rem!important;	
    text-transform: uppercase!important;	
}
button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), input.dt-button:focus:not(.disabled){
	background: 252830!important;
	border: 0px solid #426c9e!important;
    text-shadow: 0 0px 0 #c4def1!important;
    outline: none!important;
}
.dropdown-item {
	padding: 0.25rem 1rem!important;
}
div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) {

    background: -moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%)!important;
    background: -ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%)!important;
    background: -o-linear-gradient(top, #f0f0f0 0%, #dadada 100%)!important;
    background: linear-gradient(to bottom, #dc3545 0%, #e91e63 100%)!important;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#dadada')!important;
    box-shadow: inset 0px 0px 0px #666!important;
}
.dataTables_wrapper .dataTables_filter input {
    font-family: 'Quicksand'!important;	
    font-size: 1.5rem!important;	
    -webkit-appearance: none!important;	
    /* padding: 0.90em 0.90em 0.90em 0; */
    outline: 0!important;	
	background-color: #333549 !important;
    border: 3px solid #454c67!important;
    border-radius: 3px!important;	
	color: #ffc107!important;
    font-weight: 900!important;
}
.dataTables_wrapper .dataTables_filter input:focus {
	border-color: #515151 !important;
    background: #fff!important;
	color: #333549!important;
    font-weight: 900!important;
}
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
background-color: #333549 !important;	
color: white!important;	
text-transform: uppercase;
padding: 5px!important;	
line-height: 2.5em!important;
}
.filter-option-inner-inner {
    font-size: 1.25rem;
    text-indent: 0.50rem;
}
.dataTables_wrapper .dataTables_info {
    text-transform: uppercase!important;
}
div#durum_Fark_HTML {
    height: calc(3rem + 1px);
    font-size: 1.5rem;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-data {
    border-color: #e70f00!important;
    color: #fbfaff!important;
    background: #ec5353!important;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-condition {
    border-color: #e70f00!important;
    color: #fbfaff!important;
    background: #ec5353!important;
}
div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-value, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-value {
    border-color: #e70f00!important;
    color: #fbfaff!important;
    background: #ec5353!important;
}

.preload * {
    -webkit-transition: none !important;
    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
}

body {
    background: #131417
}

@media (min-width: 831px) {
    body {
        position: relative;
       /*height: auto;*/
        min-height: 100vh
    }
    body:not(.sidebar-false) {
        padding-left: 188px
    }
    body.sidebar-collapsed {
        padding-left: 10px
    }
    .main-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 13;
        width: 188px;
        min-height: 100%;
        background: #1e1f26;
        -webkit-box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.38, 0.01, 0.09, 0.98);
        transition: -webkit-transform 0.4s cubic-bezier(0.38, 0.01, 0.09, 0.98);
        transition: transform 0.4s cubic-bezier(0.38, 0.01, 0.09, 0.98);
        transition: transform 0.4s cubic-bezier(0.38, 0.01, 0.09, 0.98), -webkit-transform 0.4s cubic-bezier(0.38, 0.01, 0.09, 0.98)
    }
    .main-sidebar .navigation-wrap {
        -webkit-transition: visibility 0s linear;
        transition: visibility 0s linear
    }
    .sidebar-collapsed .main-sidebar {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
    .sidebar-collapsed .main-sidebar .navigation-wrap {
        visibility: hidden;
        -webkit-transition-delay: 0.4s;
        transition-delay: 0.4s
    }
}

@media (min-height: 720px) and (min-width: 831px) {
    .main-sidebar {
        position: fixed
    }
}

.mega-header {
    position: relative;
    border-bottom: 1px solid black;
    -webkit-box-shadow: 0 2px 15px black;
    box-shadow: 0 2px 15px black;
    background: #000 url(https://static.codepen.io/assets/global/texture-codepen-2-d817063398aa9a2b534f3834f8533e2bae759c25933b86cdd149d9f0cc38563d.png);
    background-position: 0 -5px;
    padding: 50px 20px 50px 20px;
    margin: 0 0 20px 0;
background: linear-gradient(-134deg, #517FA4 0%, #243949 100%);	
	
}

.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: 4rem;
    padding: 0 25% 0 0;
    word-break: break-word
}

.mega-header .mega-header-subhead {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #717790
}

.mega-header .mega-header-subdescription {
    max-width: 800px;
    margin: auto;
    letter-spacing: 0.1px;
    line-height: 26px
}

.mega-header p {
    color: #9b9dad;
    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-box;
        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 .meta-line {
        margin-right: auto
    }
    .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
}

.mega-header .content-author {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 3px solid #47cf73
}

@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;
    -webkit-transition: 0.2s;
    transition: 0.2s
}

.more-link svg {
    width: 16px;
    height: 16px;
    fill: white;
    position: relative;
    top: 3px;
    padding: 2px;
    -webkit-transition: 0.2s;
    transition: 0.2s
}

.more-link:hover svg,
.more-link:focus svg {
    fill: #b7bbc8;
    -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: 30px 0 25px 0
}

.title-header .more-link {
    position: absolute;
    right: 0;
    bottom: 10px
}

.posts-title-header {
    border-bottom: 4px solid #47cf73
}

.pens-title-header {
    border-bottom: 4px solid #0ebeff
}

.collections-title-header {
    border-bottom: 4px solid #ae63e4
}

.projects-title-header {
    border-bottom: 4px solid #ffdd40
}

.deleteds-title-header {
    border-bottom: 4px solid #717790
}

.header-help {
    position: absolute;
    right: 0;
    bottom: 7px
}

.header-help svg {
    fill: #b7bbc8;
    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
}

.grid-size-toggle .icon-grid-6 {
    width: 23px
}

.grid-size-toggle .icon-grid-12 {
    width: 21px;
    height: 32px
}

@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'
    }
}

.sidebar-false .main-header,
.within-popup .main-header {
    background: #1e1f26;
    height: 65px
}

@media (max-width: 830px) {
    .sidebar-false .main-header,
    .within-popup .main-header {
        height: 53px
    }
	
	
}

.sidebar-false .main-header .navigation-wrap,
.within-popup .main-header .navigation-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.sidebar-false .main-header .pin-dropdown-alone-button,
.within-popup .main-header .pin-dropdown-alone-button {
    padding: 0.625rem 0.25rem 0.75rem 0.625rem;
    margin-right: 0.75rem
}

.sidebar-false .main-header .pin-dropdown-alone-button .icon-icon-pin,
.within-popup .main-header .pin-dropdown-alone-button .icon-icon-pin {
    margin-right: 0.25rem
}

.sidebar-false .main-header .pin-dropdown-alone-button .icon-arrow-down-mini,
.within-popup .main-header .pin-dropdown-alone-button .icon-arrow-down-mini {
    width: 10px;
    height: 8px;
    margin-bottom: 3px
}

@media (max-width: 1000px) {
    .sidebar-false .main-header>.button,
    .sidebar-false .main-header>.file-upload-button,
    .sidebar-false .main-header .editor-actions-menu .button,
    .sidebar-false .main-header .editor-actions-menu .file-upload-button,
    .within-popup .main-header>.button,
    .within-popup .main-header>.file-upload-button,
    .within-popup .main-header .editor-actions-menu .button,
    .within-popup .main-header .editor-actions-menu .file-upload-button {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 1rem
    }
    .sidebar-false .main-header>.button,
    .sidebar-false .main-header>.file-upload-button,
    .sidebar-false .main-header .editor-actions-menu .button,
    .sidebar-false .main-header .editor-actions-menu .file-upload-button,
    .sidebar-false .main-header .multi-button,
    .within-popup .main-header>.button,
    .within-popup .main-header>.file-upload-button,
    .within-popup .main-header .editor-actions-menu .button,
    .within-popup .main-header .editor-actions-menu .file-upload-button,
    .within-popup .main-header .multi-button {
        margin-left: 0;
        margin-right: 6px
    }
    .sidebar-false .main-header .multi-button .button,
    .sidebar-false .main-header .multi-button .file-upload-button,
    .within-popup .main-header .multi-button .button,
    .within-popup .main-header .multi-button .file-upload-button {
        margin-right: 0
    }
}

@media (max-width: 800px) {
    .sidebar-false .main-header .button .icon,
    .sidebar-false .main-header .file-upload-button .icon,
    .within-popup .main-header .button .icon,
    .within-popup .main-header .file-upload-button .icon {
        margin-right: 0
    }
    .sidebar-false .main-header .button .label,
    .sidebar-false .main-header .file-upload-button .label,
    .within-popup .main-header .button .label,
    .within-popup .main-header .file-upload-button .label {
        position: absolute;
        top: -9999px;
        left: -9999px
    }
}

@media (max-width: 767px),
(max-height: 440px) {
    .sidebar-false .main-header .button,
    .sidebar-false .main-header .file-upload-button,
    .within-popup .main-header .button,
    .within-popup .main-header .file-upload-button {
        padding: 5px 7px
    }
    .sidebar-false .main-header .editor-actions .button,
    .sidebar-false .main-header .editor-actions .file-upload-button,
    .within-popup .main-header .editor-actions .button,
    .within-popup .main-header .editor-actions .file-upload-button {
        padding: 0.5rem 1rem
    }
    .sidebar-false .main-header .multi-button-pin,
    .sidebar-false .main-header .pin-dropdown-alone-button,
    .within-popup .main-header .multi-button-pin,
    .within-popup .main-header .pin-dropdown-alone-button {
        display: none
    }
}

.sidebar-false.details .main-header {
    background: #2c303a
}

.editor-actions-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.editor-actions-menu .footer-button {
    display: none;
    position: relative
}

@media (max-width: 767px),
(max-height: 440px) {
    .editor-actions-menu .footer-button {
        display: block
    }
    .editor-actions-menu .footer-button[aria-expanded='true'] svg {
        -webkit-transform: scale(1, -1) translateY(-1px);
        transform: scale(1, -1) translateY(-1px)
    }
    .editor-actions-menu .footer-button[aria-expanded='true'] span {
        width: 6px
    }
    .editor-actions-menu .footer-button[aria-expanded='true'] span:before {
        width: 9px
    }
}

.toggle-actions-button {
    width: 36px;
    height: 32px;
    padding: 15px 8px;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 5px 0 0;
    position: relative;
    background: #444857;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease
}

.toggle-actions-button svg {
    width: 12px;
    height: 9px;
    position: absolute;
    top: 8px;
    right: 6px;
    fill: white;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
}

.toggle-actions-button span {
    position: relative;
    display: block;
    background: white;
    border-radius: 6px;
    height: 2px;
    width: 10px
}

.toggle-actions-button span::before,
.toggle-actions-button span::after {
    content: '';
    position: absolute;
    left: 0;
    height: inherit;
    background: inherit;
    border-radius: inherit;
    -webkit-transition: inherit;
    transition: inherit
}

.toggle-actions-button span::before {
    top: -6px;
    width: 6px
}

.toggle-actions-button span::after {
    bottom: -6px;
    width: 16px
}

.editor-actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media (max-width: 767px),
(max-height: 440px) {
    .editor-actions {
        display: block;
        position: absolute;
        z-index: 400;
        top: 100%;
        right: 0;
        width: 225px;
        max-height: 75vh;
        padding-bottom: 1rem;
        overflow: hidden;
        overflow-y: auto;
        background: #1e1f26;
        -webkit-box-shadow: 0 2rem 4rem #0a0a0c;
        box-shadow: 0 2rem 4rem #0a0a0c;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transform-origin: top right;
        transform-origin: top right;
        -webkit-transition: all 0.2s ease-in-out, visibility 0s linear 0.2s;
        transition: all 0.2s ease-in-out, visibility 0s linear 0.2s
    }
    .editor-actions::-webkit-scrollbar {
        width: 0.5em;
        height: 0.5em
    }
    .editor-actions::-webkit-scrollbar-thumb {
        background: #717790
    }
    .editor-actions::-webkit-scrollbar-track {
        background: #b8bbc8
    }
    .editor-actions[data-expanded='true'] {
        opacity: 1;
        visibility: visible;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition-delay: 0s, 0s;
        transition-delay: 0s, 0s;
        pointer-events: auto
    }
    .editor-actions .button,
    .editor-actions .file-upload-button {
        line-height: 1.4;
        display: block;
        background: none;
        border: none;
        border-radius: 0;
        font-weight: bold !important;
        width: 100%;
        text-align: left
    }
    .editor-actions .button:hover,
    .editor-actions .file-upload-button:hover,
    .editor-actions .button:focus,
    .editor-actions .file-upload-button:focus {
        background: #444857
    }
    .editor-actions .button .label,
    .editor-actions .file-upload-button .label {
        position: static !important
    }
    .editor-actions .button .icon:not(.icon-heart),
    .editor-actions .file-upload-button .icon:not(.icon-heart) {
        margin-right: 0.4rem !important
    }
}

.recent-activity-widget {
    margin-top: 1rem
}

.recent-activity-widget a {
    color: #0ebeff;
    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 1.325rem 0;
    padding: 1rem;
    font-size: 0.9em;
    clear: both;
    overflow: hidden;
    position: relative;
    background: #1e1f26;
    border-radius: 4px
}

.recent-activity-widget .activity-avatar {
    width: 10%;
    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: 90%;
    margin: 0
}

.recent-activity-widget .activity-sentence {
    margin: 0 0 3px 0
}

.recent-activity-widget svg {
    position: absolute;
    top: 3px;
    left: 0;
    fill: #aaaebc;
    width: 20px;
    height: 20px
}

.site-footer {
    font-family: 'Baloo Chettan 2';
    height: 30px;
    line-height: 1;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1.75em 0.75em 1.76em 0.75em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    color: #9b9dad;
    /* background: #2c303a; */
    /* border-top: 1px solid #444857; */
    z-index: 10;
    font-size: 1rem;
}

.site-footer a {
    color: #cccedb
}

.site-footer a:hover,
.site-footer a:focus {
    color: white
}

.footer-left {
    height: 100%;
    padding: 9px 0;
    z-index: 1
}

@media (min-width: 551px) {
    .footer-left {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.footer-left>.button,
.footer-left>.file-upload-button {
    margin-right: 8px
}

.export-feature-notifier.export-feature-notifier {
    margin: 0;
    position: absolute;
    top: -4px;
    right: -2px
}

.footer-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

@media (max-width: 610px) {
    .footer-right {
        position: relative;
        padding-left: 5px
    }
}

@media (max-width: 610px) {
    .editor-footer .footer-right {
        position: absolute;
        right: 5px;
        padding-left: 0
    }
}

.footer-right .pick-iframe {
    display: inline-block;
    width: 70px;
    height: 20px;
    background: none;
    vertical-align: top;
    margin: 0 5px 0 0
}

.footer-right>a {
    display: inline-block;
    position: relative
}

.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: #5a5f73
}

.footer-icon-editor:hover svg,
.footer-icon-editor:active svg {
    fill: #9b9dad
}

.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: #b7bbc8
}

.footer-word-links {
    display: inline-block
}

.footer-word-links a {
    margin-left: 4px
}

.collections-select {
    width: 120px;
    display: inline-block;
    background: url(https://static.codepen.io/assets/buttons/arrow-tiny-down-white-cd748d5e97310942356ea8298bca9b344350441cffed1a653c89551258a76b3a.png) 93% 7px no-repeat, #444857 !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;
    padding-bottom: 0;
    border-radius: 3px;
    line-height: 1.5
}

.collections-select option {
    background: white;
    color: black
}

.button.zoom-select,
.zoom-select.file-upload-button {
    display: none
}

@media (max-width: 767px),
(max-height: 440px) {
    .button.zoom-select,
    .zoom-select.file-upload-button {
        display: inline-block
    }
}

.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: 700 !important;
    background: #1e1e1e
}

.editor-toggle-buttons>.button:not(:first-child),
.editor-toggle-buttons>.file-upload-button:not(:first-child) {
    border-left: 1px solid #5a5f73
}

.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: #717790
}

.pres-footer .mini-logo {
    vertical-align: middle;
    margin-right: 5px
}

.preview-size-buttons {
    margin: 0 !important
}

.footer-icon-editor {
    margin-left: 5px
}

.footer-actions-menu .toggle-footer-menu-button {
    display: none
}

.footer-actions-menu .footer-actions {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex
}

@media (max-width: 550px) {
    .footer-actions-menu .toggle-footer-menu-button {
        display: inline-block;
        padding: 0px 16px
    }
    .footer-actions-menu .toggle-footer-menu-button svg {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        -webkit-transition: 0.2s -webkit-transform;
        transition: 0.2s -webkit-transform;
        transition: 0.2s transform;
        transition: 0.2s transform, 0.2s -webkit-transform
    }
    .footer-actions-menu .toggle-footer-menu-button[aria-expanded='true'] svg {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    .footer-actions-menu .footer-actions {
        display: block;
        position: absolute;
        left: 0;
        bottom: 100%;
        z-index: 400;
        width: 100%;
        padding: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        background: #1e1f26;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-transform-origin: bottom left;
        transform-origin: bottom left;
        -webkit-transition: all 0.2s ease-in-out, visibility 0s linear 0.2s;
        transition: all 0.2s ease-in-out, visibility 0s linear 0.2s
    }
    .footer-actions-menu .footer-actions[data-expanded='true'] {
        opacity: 1;
        visibility: visible;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transition-delay: 0s, 0s;
        transition-delay: 0s, 0s
    }
}



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
    }
	
	.login-css {
        display:none;
    }
	
	
}

@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
}

h1 .title-callout,
h2 .title-callout,
h3 .title-callout,
h4 .title-callout,
h5 .title-callout,
h6 .title-callout {
    color: #0ebeff
}

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;
    color: #f1b910!important;
}

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 .user-avatar {
    display: block
}

.content-author time {
    white-space: nowrap
}

.mega-header .content-author {
    color: #9b9dad
}

@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: #b7bbc8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 80%
}

blockquote {
    padding: 0.5rem 1rem 0.625rem;
    border-left: 2px solid #0ebeff;
    background: #f1f1f3;
    color: #717790
}

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 #717790
}

.text>p:last-child {
    margin-bottom: 0
}

aside p,
aside address {
    color: #aaaebc;
    font-style: normal
}

.pen-description p code,
.pen-description li code {
    color: #aaaebc
}

.pen-description a code {
    color: #76daff
}

.pen-description a:hover code {
    color: white
}

.comment-text code,
.pen-description code {
    font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
    font-size: 85%;
    text-transform: none
}

.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;
    -o-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-wrap;
    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: #717790
}

.pen-description pre>code::-webkit-scrollbar-track,
.post-body pre>code::-webkit-scrollbar-track,
.comment-text pre>code::-webkit-scrollbar-track {
    background: 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: #2c303a;
    border-bottom: 1px solid #5a5f73;
    color: #9b9dad;
    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: #444857;
    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
}

input[type='name'],
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='number'],
textarea {
    font-family: 'Quicksand';
    font-size: 1.50rem;
    -webkit-appearance: none;
    /*padding: 0.90em 0.90em 0.90em 0;     padding: 0.20em 0.0em 0.0em 0!important;*/
    outline: 0;
    background: #d5d7de;
    border: 3px solid #d5d7de;
    border-radius: 3px;
    font-family: 'Quicksand';
    -webkit-appearance: none;

    outline: 0;
    background: #d5d7de;
    /* border: 3px solid #d5d7de; */
    border-radius: 3px;
}

input[type='name']: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: #717790;
    background: #fff
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

label[for],
input[type='checkbox'],
input[type='radio'] {
    cursor: pointer
}

fieldset {
    border: 1px solid #717790;
    padding: 10px;
    margin: 0 0 010px 0
}

legend {
    padding: 0 10px
}

form.form-on-white {
    background: white
}

form.form-on-white label {
    color: #2c303a
}

textarea.is-code {
    font-family: Monaco, Courier, MonoSpace
}

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
}

.mega-fullwidth.mega-fullwidth {
    width: 100%;
    margin: 10px 0;
    font-size: 1.5em;
    padding: 0.5em
}

.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: 9px 10px 0 0;
    color: #c7c9d3;
    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: #9b9dad;
    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;
    letter-spacing: 0.5px;
    font-size: 2rem;
    font-weight: bold;
}

.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%;
    font-family: 'Baloo Chettan 2';
}

.top-label-form select {
    background: #c7c9d3
}

.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: #47cf73
}

.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: white;
    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 {
    position: relative;
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1)
}

.ios-toggle-wrap .badge {
    top: -1px;
    margin-left: 4px
}

.ios-toggle-mega-label-wrap {
    display: inline-block;
    position: relative
}

.ios-toggle-mega-label-wrap.ios-toggle-disabled {
    opacity: 0.5;
    pointer-events: none
}

.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: 2.975em;
    height: 1.75em;
    border-radius: 1.75em;
    background: #b7bbc8;
    vertical-align: middle;
    margin: 0 0.5rem
}

.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: #9b9dad
}

.ios-toggle>input:checked+label::after {
    right: 0;
    left: 1.225em
}

.ios-toggle>input:active+label::after {
    right: 0.875em;
    left: 0
}

.ios-toggle>input:active:checked+label::after {
    right: 0;
    left: 0.875em
}

.ios-toggle>input[disabled][disabled]+label,
.ios-toggle>input[disabled][disabled]+label::before {
    background: #717790
}

.ios-toggle>input[disabled][disabled]+label::after {
    background: #c7c9d3
}

.ios-toggle>input[disabled][disabled] ~ label {
    cursor: not-allowed
}

.ios-toggle>label:not(.ios-toggle-mega-label) {
    display: block !important;
    width: 100% !important;
    height: 100%;
    border-radius: 1.75em;
    -webkit-transition: background 0.125s;
    transition: background 0.125s
}

.ios-toggle>label:not(.ios-toggle-mega-label)::before,
.ios-toggle>label:not(.ios-toggle-mega-label)::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    height: 1.75em;
    border-radius: inherit;
    -webkit-transition: all 0.2s;
    transition: all 0.2s
}

.ios-toggle>label:not(.ios-toggle-mega-label)::before {
    background: #47cf73;
    width: 100%
}

.ios-toggle>label:not(.ios-toggle-mega-label)::after {
    background: #fff;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    right: 1.225em;
    -webkit-box-shadow: 0 0.21875em rgba(0, 0, 0, 0.05), inset 0 -1.75em 1.75em -1.75em rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.21875em rgba(0, 0, 0, 0.05), inset 0 -1.75em 1.75em -1.75em rgba(0, 0, 0, 0.1)
}

.ios-toggle.ios-toggle-ambiguous>input:checked+label {
    background: #9b9dad
}

.ios-toggle.ios-toggle-ambiguous>label::before {
    background: #9b9dad
}

.ios-toggle.ios-toggle-reverse>input:checked+label {
    background: #47cf73
}

.ios-toggle.ios-toggle-reverse>label::before {
    background: #9b9dad
}

.ios-toggle.ios-toggle-big {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.password-protect-toggle-wrap {
    background: #482020;
    text-align: left;
    padding-left: 1rem
}

#item-details-password-value {
    width: auto;
    padding: 4px 6px;
    margin-left: 4px
}

.no-password-error-message {
    font-size: 0.8rem;
    margin-top: 1rem
}

.normal-labels label {
    font-weight: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit
}

.checkbox-row {
    position: relative;
    margin: 0 0 5px 0
}

.checkbox-row.public-private-checkbox-row {
    margin-bottom: 0
}

.select {
    position: relative;
    display: inline-block;
    color: #5a5f73
}

.select.select-small {
    vertical-align: top
}

.select.select-small select {
    vertical-align: middle;
    border: 0;
    padding: 4px 20px 4px 10px;
    font-size: 0.7rem;
    border-radius: 3px
}

.select.select-small::after {
    right: 5px;
    top: 14px
}

.select select {
    display: inline-block;
    margin: 0;
    padding: 10px 20px 10px 10px;
    border: 3px solid #b7bbc8;
    border-radius: 2px;
    cursor: pointer;
    outline: 0;
    -webkit-transition: border-color 0.2s;
    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: #5a5f73
}

.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)
}

.resource-search-bar {
    border-radius: 6px;
    position: relative;
    background: #e3e4e8;
    border: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 !important
}

.resource-search-bar:focus-within {
    border-color: #5a5f73
}

.resource-search-bar .icon-mag {
    width: 18px;
    height: 18px;
    fill: #535557;
    margin-left: 0.75rem
}

.resource-search-bar input[type='text'] {
    width: 100%;
    border: 0;
    color: #444857;
    font-size: 1rem;
    background: none;
    padding: 1rem
}

.resource-search-bar>input[type='text'] {
    width: auto
}

.resource-search-bar .clock-spinner {
    margin-right: 1rem
}

.resource-search-bar .recent-searches {
    font-size: 0.9rem;
    background: #b7bbc8;
    width: 100%;
    padding: 0.1rem 0.5rem 0.05rem;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden
}

.resource-search-bar .recent-searches:empty {
    display: none
}

.resource-search-bar .recent-searches strong {
    color: #9397a5;
    font-size: 0.8rem;
    vertical-align: top;
    display: inline-block;
    margin-top: 2px;
    letter-spacing: 0.4px
}

.resource-search-bar .recent-searches span {
    cursor: pointer;
    margin-left: 3px;
    display: inline-block;
    background: #444857;
    padding: 0 6px;
    border-radius: 3px;
    color: #c7c9d3;
    margin-bottom: 2px;
    margin-top: 2px;
    font-size: 0.8rem
}

.resource-search-bar .recent-searches span:hover {
    background: #1e1f26
}

.range {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -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: #444857;
    line-height: 32px
}

.signup-form .range.team-count,
.pricing-table .range.team-count {
    border: 3px solid #aaaebc;
    border-radius: 4px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    max-width: 225px
}

.signup-form .range .team-count-decrease,
.signup-form .range .team-count-increase,
.pricing-table .range .team-count-decrease,
.pricing-table .range .team-count-increase {
    border: none;
    color: transparent;
    position: relative;
    cursor: pointer
}

.signup-form .range .team-count-decrease:before,
.signup-form .range .team-count-increase:before,
.pricing-table .range .team-count-decrease:before,
.pricing-table .range .team-count-increase:before {
    position: absolute;
    background: black;
    content: '';
    top: 5px;
    width: 16px;
    height: 4px
}

.signup-form .range .team-count-decrease:focus,
.signup-form .range .team-count-increase:focus,
.pricing-table .range .team-count-decrease:focus,
.pricing-table .range .team-count-increase:focus {
    outline: none
}

.signup-form .range .team-count-decrease:focus:before,
.signup-form .range .team-count-decrease:focus:after,
.signup-form .range .team-count-increase:focus:before,
.signup-form .range .team-count-increase:focus:after,
.pricing-table .range .team-count-decrease:focus:before,
.pricing-table .range .team-count-decrease:focus:after,
.pricing-table .range .team-count-increase:focus:before,
.pricing-table .range .team-count-increase:focus:after {
    background: #0ebeff
}

.signup-form .range .team-count-decrease:before,
.pricing-table .range .team-count-decrease:before {
    left: 1rem
}

.signup-form .range .team-count-increase:before,
.pricing-table .range .team-count-increase:before {
    right: 1rem
}

.signup-form .range .team-count-increase:after,
.pricing-table .range .team-count-increase:after {
    position: absolute;
    background: black;
    content: '';
    top: -1px;
    right: 1.4rem;
    width: 4px;
    height: 16px
}

#forgot-password-form {
    display: none
}

.search-input-wrap {
    position: relative;
    display: block;
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 0.9rem;
}

.search-input-wrap .icon-mag {
    position: absolute;
    top: 0;
    left: 0.6em;
    bottom: 0;
    margin: auto auto auto 0;
    width: 1em;
    height: 1em;
    z-index: 1;
    fill: #717790
}


.search-input-wrap .icon-mag-s {
    position: absolute;
    top: 0;
    left: 0.6em;
    bottom: 0;
    margin: auto auto auto 0;
    height: 1em;
    z-index: 1;
    fill: #ffc107;
    font-size: 1.25em;
}
label.search-input-wrap.mid {
    background: #3d3e5a;
}
.search-input-wrap-mid .search-input {
    width: 100%;
    margin: 0;
    padding: 0.4em 0.4em 0.4em 0.4em;
    text-indent: 0.5em;
    border: 0;
    background: #3d3e5a;
    border-radius: 4px;
    font: inherit;
	padding: 0.3em 0.2em 0.2em 0.2em !important;
	
}	
.search-input-wrap-mid {
    position: relative;
    display: block;
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 0.9rem;
}	

.search-input-wrap-mid .icon-mag-s {
    position: absolute;
    top: 0;
    left: 0.6em;
    bottom: 0;
    margin: auto auto auto 0;
    width: 1em;
    height: 1em;
    z-index: 1;
    fill: #ffc107;color: #ffc107
}





.css-bulut-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ffffff!important;
  font-weight:bold;
  opacity: 9; /* Firefox */
}

.css-bulut-input {
    color: #ffc107!important;
    background-color: #333549 !important;
    /* border-color: #515151 !important; */
    font-weight: 900!important;
    font-family: 'Quicksand'!important;
    text-indent: 1.50em;
    display: block;
    width: 100%;
    /*height: calc(2.25rem + 2px);*/
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 3rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background: #d5d7de;
    border: 3px solid #d5d7de;
    border-radius: 3px;
}
.css-bulut-input-empty::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ebd83e!important;
  font-weight:bold;
  opacity: 1; /* Firefox */
}
.css-bulut-input-empty {
    color: #ffc107!important;
    background-color: #333549 !important;
    /* border-color: #515151 !important; */
    font-weight: 900;
    font-family: 'Baloo Chettan 2', cursive !important;
    
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 3rem;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background: #d5d7de;
    border: 3px solid #d5d7de;
    border-radius: 3px;
}

@media (max-width: 830px) {
    .search-form-header .search-input-wrap {
      
    }
}

.search-form-header .search-input-wrap .icon-mag {
    fill: #868ca0
}

.search-form-header .search-input {font-weight: bold;color: white;background-size: 200% 200%;padding: 0.75em!important;background: linear-gradient( 
130deg ,#030910,#283236,#2c2c2d);}

.search-form-header .search-input::-webkit-input-placeholder {
    color: #868ca0;
    text-overflow: ellipsis
}

.search-form-header .search-input::-moz-placeholder {
    color: #868ca0;
    text-overflow: ellipsis
}

.search-form-header .search-input:-ms-input-placeholder {
    color: #868ca0;
    text-overflow: ellipsis
}

.search-form-header .search-input::-ms-input-placeholder {
    color: #868ca0;
    text-overflow: ellipsis
}

.search-form-header .search-input::placeholder {
    color: #868ca0;
    text-overflow: ellipsis
}

.search-form-header .search-input:focus {
    background: #2c303a;
    outline: solid 3px #0ebeff;
    border-color: #aaaebc;
    outline-color: rgba(14, 190, 255, 0.4);
    outline-offset: 1px;
    outline-style: auto;
    outline-width: 4px
}

.last {
    margin-right: 0 !important
}

.center {
    text-align: center
}

.flex-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
}

.align-right {
    text-align: right
}

.align-left {
    text-align: left
}

.rotate-cc90 {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.rotate-c90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.full-width,
.fullwidth {
    width: 100%
}

.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 !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 {
    -webkit-transition: opacity 300ms ease;
    transition: opacity 300ms ease;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    top: 0;
    line-height: 3.75rem;
    white-space: nowrap;
    z-index: 10;
    opacity: 0
}
.form-control:disabled, .form-control[readonly] {
    opacity: 1!important;
}
.collection .disabled-feature-prompt {
    line-height: 1.5rem;
    padding-top: 0.5rem
}

.settings .disabled-feature-prompt a {
    color: #ffdd40;
    border-bottom-color: #ffdd40
}

.settings .disabled-feature-prompt a:hover,
.settings .disabled-feature-prompt a:focus {
    color: #56bcf9;
    border-bottom: none
}

.disabled-feature-prompt:hover,
.disabled-feature-prompt:focus {
    opacity: 1
}

.icon-heart {
    fill: white
}

.loves .icon-heart {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0)
}

.loved-1 .icon-heart {
    color: #f19994;
    fill: #f19994 !important;
    -webkit-transform: scale(1.15);
    transform: scale(1.15)
}

.loved-2 .icon-heart {
    color: #ff8484;
    fill: #ff8484 !important;
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.loved-3 .icon-heart {
    color: #ff3c41;
    fill: #ff3c41 !important;
    -webkit-transform: scale(1.35);
    transform: scale(1.35)
}

.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
}
.fa-1x {
    font-size: 1.5em;
}

.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: #ff3c41;
    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: #47cf73
}

.inline-error {
    color: white !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff3c41), to(#a00808));
    background-image: linear-gradient(to bottom, #ff3c41, #a00808);
    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 #2c303a;
    margin: 15px 0 30px 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: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(0, 0, 0, 0.75)), to(transparent));
    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
}

.user-avatar {
    border-radius: 4px
}

.admin-copy-score {
    margin-right: 5px
}

.inline-code {
    display: inline;
    background: #c7c9d3;
    padding: 3px
}

.unsupported-browser-message {
    padding: 1rem;
    background: #ffdd40;
    color: black;
    display: none
}

.unsupported-browser-message a {
    color: #0ebeff;
    border-bottom: 1px solid #0ebeff
}

.unsupported-browser-message a:hover,
.unsupported-browser-message a:focus {
    color: #41ccff;
    border-bottom: none
}

html.ie8 .unsupported-browser-message,
html.ie9 .unsupported-browser-message,
html.ie10 .unsupported-browser-message,
html.ie11 .unsupported-browser-message {
    display: block
}

@supports (--custom: property) {
    [style*='--aspect-ratio'] {
        position: relative
    }
    [style*='--aspect-ratio']::before {
        content: '';
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)))
    }
    [style*='--aspect-ratio']>:first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%
    }
}


.button-date {
    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;
    padding: 10px 16px;
    margin: 0 10px 0 0;
    position: relative;
    border-radius: 4px;
    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-date>svg{
    width: 16px;
    height: 16px;
    display: inline-block;
    pointer-events: none;
    vertical-align: bottom;
    fill: currentColor;
}

button {
    font-family: inherit
}

.button,
.file-upload-button,
.gsc-cursor-page {
    font-family: 'Quicksand';
    -webkit-appearance: none;
    font-size: 1rem;
    text-shadow: none;
    line-height: 1.2;
    display: inline-block;
    padding: 5px 16px;
    margin: 0 10px 0 0;
    position: relative;
    border-radius: 4px;
    border: 3px solid transparent;
    background: #444857;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
    text-align: center;
    font-weight: normal !important;
    line-height: 1.26em!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: currentColor;
}

.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: #000
}

.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 {
    -webkit-box-shadow: 0 0 0 2px #248c46;
    box-shadow: 0 0 0 2px #248c46
}

.button.faded-green,
.faded-green.file-upload-button,
.gsc-cursor-page.faded-green {
    background: #248c46;
    color: #000
}

.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: #1a6332
}

.button.faded-green.button-focus:focus,
.faded-green.button-focus.file-upload-button:focus,
.gsc-cursor-page.faded-green.button-focus:focus {
    -webkit-box-shadow: 0 0 0 2px #0f3b1d;
    box-shadow: 0 0 0 2px #0f3b1d
}

.button.red,
.red.file-upload-button,
.gsc-cursor-page.red {
    background: #ff3c41;
    color: #fff
}

.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 {
    -webkit-box-shadow: 0 0 0 2px #d50005;
    box-shadow: 0 0 0 2px #d50005
}

.button.purple,
.purple.file-upload-button,
.gsc-cursor-page.purple {
    background: #ae63e4;
    color: #000
}

.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 {
    -webkit-box-shadow: 0 0 0 2px #7d21c0;
    box-shadow: 0 0 0 2px #7d21c0
}



.button.yellow,
.yellow.file-upload-button,
.gsc-cursor-page.yellow {
    background: #ffdd40;
    color: #000
}

.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: #ffd40d
}

.button.yellow.button-focus:focus,
.yellow.button-focus.file-upload-button:focus,
.gsc-cursor-page.yellow.button-focus:focus {
    -webkit-box-shadow: 0 0 0 2px #d9b200;
    box-shadow: 0 0 0 2px #d9b200
}

.button.yellow-dark,
.yellow-dark.file-upload-button,
.gsc-cursor-page.yellow-dark {
    background: #d9b200;
    color: #000
}

.button.yellow-dark:hover,
.yellow-dark.file-upload-button:hover,
.button.yellow-dark:focus,
.yellow-dark.file-upload-button:focus,
.button.yellow-dark.button-focus:focus,
.yellow-dark.button-focus.file-upload-button:focus,
.gsc-cursor-page.yellow-dark:hover,
.gsc-cursor-page.yellow-dark:focus,
.gsc-cursor-page.yellow-dark.button-focus:focus {
    background: #a68800
}

.button.yellow-dark.button-focus:focus,
.yellow-dark.button-focus.file-upload-button:focus,
.gsc-cursor-page.yellow-dark.button-focus:focus {
    -webkit-box-shadow: 0 0 0 2px #735e00;
    box-shadow: 0 0 0 2px #735e00
}

.button.blue,
.blue.file-upload-button,
.gsc-cursor-page.blue {
    background: linear-gradient( -270deg, #517FA4 0%, #243949 100%);
    color: #000
}

.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: linear-gradient( -270deg, #517FA4 0%, #243949 100%);
}

.button.blue.button-focus:focus,
.blue.button-focus.file-upload-button:focus,
.gsc-cursor-page.blue.button-focus:focus {
    -webkit-box-shadow: 0 0 0 2px #007aa7;
    box-shadow: 0 0 0 2px #007aa7
}

.button.black,
.black.file-upload-button,
.gsc-cursor-page.black {
    background: #2c303a;
    color: #fff
}

.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: #16181d
}

.button.black.button-focus:focus,
.black.button-focus.file-upload-button:focus,
.gsc-cursor-page.black.button-focus:focus {
    -webkit-box-shadow: 0 0 0 2px black;
    box-shadow: 0 0 0 2px black
}

.button.green-blue,
.green-blue.file-upload-button,
.gsc-cursor-page.green-blue {
    background: #47cf73;
    background: linear-gradient(45deg, #00d36a 0%, #00c1ff 100%);
    color: black;
    border: none
}

.button.green-blue:hover,
.green-blue.file-upload-button:hover,
.button.green-blue:focus,
.green-blue.file-upload-button:focus,
.button.green-blue.button-focus:focus,
.green-blue.button-focus.file-upload-button:focus,
.gsc-cursor-page.green-blue:hover,
.gsc-cursor-page.green-blue:focus,
.gsc-cursor-page.green-blue.button-focus:focus {
    background: #47cf73
}

.button.green-blue.button-focus:focus,
.green-blue.button-focus.file-upload-button:focus,
.gsc-cursor-page.green-blue.button-focus:focus {
    -webkit-box-shadow: 0 0 0 2px #248c46;
    box-shadow: 0 0 0 2px #248c46
}

.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;
    color: black !important
}

.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: #ffdd40;
    color: black !important
}

.button.big,
.big.file-upload-button,
.gsc-cursor-page.big {
    font-size: 1.375em
}

.button.bold,
.bold.file-upload-button,
.gsc-cursor-page.bold {
    font-weight: 700 !important
}

.button-outline {
    background: none;
    border: 3px solid #aaaebc;
    min-width: 40px
}

.button-outline:hover,
.button-outline:focus {
    background: white;
    border-color: white;
    color: black
}

.button-light {
    background: #aaaebc;
    color: #1e1f26 !important
}

.button-light:hover {
    background: #71788f;
    color: white !important
}

.button-light.active:not([disabled]) {
    background: #717790;
    color: white !important
}

.button-medium,
.button-small {
    background: #444857;
    color: white;
    margin: 5;
}

.button-medium.button-focus:focus,
.button-small.button-focus:focus {
    background: #5a6074;
    -webkit-box-shadow: 0 0 0 2px #444857;
    box-shadow: 0 0 0 2px #444857
}

.button-medium:hover,
.button-small:hover {
    background: #5a6074
}

.button-medium.active:not([disabled]),
.button-small.active:not([disabled]) {
    background: white;
    color: #2c303a !important
}

.button-medium.active:not([disabled]) svg,
.button-small.active:not([disabled]) svg {
    fill: #2c303a
}

.button-dark {
    background: #1e1f26
}

.button-dark:hover,
.button-dark:focus {
    background: #292b34
}

.button-dark.active:not([disabled]) {
    background: white;
    color: #2c303a !important
}

.button-dark.active:not([disabled]):not(.loved):not(.all-three) svg {
    fill: #2c303a
}

.text-button {
    color: #0ebeff;
    font-weight: bold;
    font-size: 1.1rem;
    position: relative
}

.text-button::after {
    content: '?';
    position: absolute;
    bottom: -0.12rem;
    margin-left: 0.5rem
}

button.invisible-button {
    border: 0;
    background: none
}

button.looks-like-link {
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: #76daff
}

.button-no-right-margin {
    margin-right: 0
}

.pagination-button,
.react-pagination-button {
    background: none;
    border: 3px solid #aaaebc;
    min-width: 40px
}

.pagination-button:hover,
.pagination-button:focus,
.react-pagination-button:hover,
.react-pagination-button:focus {
    background: white;
    border-color: white;
    color: black
}

.pagination-button .icon-arrow-right-mini,
.pagination-button .icon-arrow-left-mini,
.react-pagination-button .icon-arrow-right-mini,
.react-pagination-button .icon-arrow-left-mini {
    width: 14px;
    height: 14px;
    position: relative;
    top: -1px
}

.pagination-button .icon-arrow-right-mini,
.react-pagination-button .icon-arrow-right-mini {
    margin-left: 4px
}

.pagination-button .icon-arrow-left-mini,
.react-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,
.react-pagination-button:hover .icon-arrow-right-mini,
.react-pagination-button:hover .icon-arrow-left-mini,
.react-pagination-button:focus .icon-arrow-right-mini,
.react-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-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -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: #868ca0;
    font-size: 0.8em;
    width: 17px;
    text-align: center
}

.mini-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;
    border-radius: 2px
}

.mini-button>svg,
.file-upload-button>svg {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    position: relative;
    top: -1px
}

.mini-button>svg:not(:only-child)+:not(.screen-reader-text),
.file-upload-button>svg:not(:only-child)+:not(.screen-reader-text) {
    margin-right: 2px
}

.footer-button {
    font-size: 0.75rem;
    background: none;
    border: 0;
    color: #b7bbc8;
    padding: 8px;
    border-radius: 0;
    margin: 0
}

.footer-left .footer-button {
    border-right: 1px solid #444857
}

.footer-right .footer-button {
    border-left: 1px solid #444857
}

.footer-button:hover,
.footer-button:focus {
    color: white;
    background: #1e1f26;
    cursor: pointer
}

.footer-button>svg {
    width: 11px;
    height: 11px;
    vertical-align: middle;
    position: relative;
    top: -1px
}

.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: #9b9dad
}

.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.show-run-button .top-button {
    padding: 12px 14px
}

.sharing-button .icon {
    top: 3px
}

.big-button {
    font-size: 2em;
    padding: 12px 40px;
    -webkit-box-shadow: 0 0 15px 1px #d9b200;
    box-shadow: 0 0 15px 1px #d9b200
}

.big-button:focus,
.big-button:hover {
    -webkit-box-shadow: 0 0 30px 1px #d9b200;
    box-shadow: 0 0 30px 1px #d9b200
}

.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;
    margin: 0 0 10px 0
}

.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: #868ca0;
    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: #c7c9d3;
    text-shadow: none
}

.github-button:hover:not([disabled]) svg,
.github-button:focus:not([disabled]) svg {
    fill: #2c303a
}

.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;
    top: 50%;
    margin-top: -13px;
    opacity: 0;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='%23ccc'%3E %3Cpath d='M55.49 0h8.794v30H55.49z'/%3E %3Cpath opacity='.9' d='M26.08 10.237l7.615-4.397 15 25.981-7.615 4.397z'/%3E %3Cpath opacity='.7' d='M5.728 33.808l4.396-7.615 25.981 15-4.396 7.615z'/%3E %3Cpath opacity='.5' d='M-.112 64.397v-8.793h30v8.793z'/%3E %3Cpath opacity='.4' d='M10.125 93.808l-4.397-7.615 25.981-15 4.397 7.614z'/%3E %3Cpath opacity='.3' d='M33.696 114.16l-7.615-4.396 15-25.981 7.615 4.396z'/%3E %3Cpath opacity='.2' d='M64.284 120h-8.793V90h8.793z'/%3E %3Cpath opacity='.3' d='M93.696 109.763l-7.615 4.397-15-25.981 7.614-4.397z'/%3E %3Cpath opacity='.4' d='M114.048 86.192l-4.396 7.615-25.981-15 4.396-7.615z'/%3E %3Cpath opacity='.5' d='M119.888 55.603v8.793h-30v-8.793z'/%3E %3Cpath opacity='.7' d='M109.65 26.192l4.397 7.615-25.98 15-4.397-7.615z'/%3E %3Cpath opacity='.9' d='M86.08 5.84l7.615 4.397-15 25.98-7.615-4.396z'/%3E %3C/svg%3E");
    -webkit-animation: spin-spinner 0.8s steps(12) infinite;
    animation: spin-spinner 0.8s steps(12) infinite
}

@-webkit-keyframes spin-spinner {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin-spinner {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.action-button,
.action-button .spinner,
.action-button .label {
    -webkit-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;
    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: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    margin-right: 10px;
    border-radius: 4px
}

.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
}

.multi-button-outline .button:first-child,
.multi-button-outline .file-upload-button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.multi-button-outline .button:last-child,
.multi-button-outline .file-upload-button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.multi-button-outline .button:not(:last-child),
.multi-button-outline .file-upload-button:not(:last-child) {
    border-right: 0
}

.multi-button-outline .button:not(:first-child),
.multi-button-outline .file-upload-button:not(:first-child) {
    border-left: 0
}

.multi-button-pin .button.pin-dropdown-button,
.multi-button-pin .pin-dropdown-button.file-upload-button {
    background: #444857;
    padding: 10px 0 10px 5px;
    position: relative
}

.multi-button-pin .button.pin-dropdown-button svg,
.multi-button-pin .pin-dropdown-button.file-upload-button svg {
    margin-right: 2px;
    width: 12px
}

.multi-button-pin .button.pin-dropdown-button[aria-expanded='true'],
.multi-button-pin .pin-dropdown-button[aria-expanded='true'].file-upload-button {
    background: white
}

.multi-button-pin .button.pin-dropdown-button[aria-expanded='true'] svg,
.multi-button-pin .pin-dropdown-button[aria-expanded='true'].file-upload-button svg {
    fill: #2c303a
}

.multi-button-pin .pin-button {
    padding: 10px 14px
}

.multi-button-pin .pin-button .icon-icon-pin {
    width: 18px;
    height: 18px;
    margin-right: 0
}

.multi-button-pin .pin-button.is-pinned svg {
    fill: #76daff !important
}

.pin-dropdown-alone-button {
    padding: 0;
    margin-right: 26px;
    display: block
}

.pin-dropdown-alone-button .icon-pin {
    width: 20px;
    height: 20px;
    fill: #9b9dad;
    pointer-events: none
}

.pin-dropdown-alone-button .dropdown-arrow {
    width: 9px;
    margin-left: -3px;
    fill: #9b9dad
}

.pin-dropdown-alone-button:hover .icon-pin,
.pin-dropdown-alone-button:hover .dropdown-arrow,
.pin-dropdown-alone-button:focus .icon-pin,
.pin-dropdown-alone-button:focus .dropdown-arrow {
    fill: white
}

.pin-dropdown-alone-button:hover .feature-callout {
    -webkit-animation: none;
    animation: none;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
}

@-webkit-keyframes feature-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(249, 233, 162, 0.8);
        box-shadow: 0 0 0 0 rgba(249, 233, 162, 0.8)
    }
    70% {
        -webkit-box-shadow: 0 0 0 14px rgba(249, 233, 162, 0);
        box-shadow: 0 0 0 14px rgba(249, 233, 162, 0)
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(249, 233, 162, 0);
        box-shadow: 0 0 0 0 rgba(249, 233, 162, 0)
    }
}

@keyframes feature-pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(249, 233, 162, 0.8);
        box-shadow: 0 0 0 0 rgba(249, 233, 162, 0.8)
    }
    70% {
        -webkit-box-shadow: 0 0 0 14px rgba(249, 233, 162, 0);
        box-shadow: 0 0 0 14px rgba(249, 233, 162, 0)
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(249, 233, 162, 0);
        box-shadow: 0 0 0 0 rgba(249, 233, 162, 0)
    }
}

.feature-callout {
    font: 0/0 a;
    width: 12px;
    height: 12px;
    background: #ffdd40;
    top: 0;
    right: 0;
    position: absolute;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 0 0 rgba(255, 221, 64, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 221, 64, 0.4);
    -webkit-animation: feature-pulse 2s infinite;
    animation: feature-pulse 2s infinite;
    opacity: 1;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.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 svg,
.button-editor-solid svg {
    fill: #adafbc
}

.button-editor-outline.icon-button svg,
.button-editor-solid.icon-button svg {
    margin-right: 0.4rem
}

.button-editor-outline:hover,
.button-editor-outline:focus,
.button-editor-solid:hover,
.button-editor-solid:focus {
    background: #5a6074
}

.button-editor-outline {
    border: 3px solid #444857;
    background: none
}

.button-editor-solid {
    border: 3px solid #444857;
    background: #444857
}

progress.progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border: 0;
    background-color: #444857
}

progress.progress::-webkit-progress-bar {
    background-color: #444857
}

progress.progress::-moz-progress-bar {
    background-color: #aaaebc
}

progress.progress::-webkit-progress-value {
    background-color: #aaaebc
}

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: #ffdd40
}

progress.progress.level-2::-webkit-progress-value {
    background-color: #ffdd40
}

progress.progress.level-3::-moz-progress-value {
    background-color: #ff3c41
}

progress.progress.level-3::-webkit-progress-value {
    background-color: #ff3c41
}

.tabNav {
    border-bottom: 2px solid #2c303a
}

.tabNav ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.tabNav-tab {
    display: inline-block
}

.tabNav-tab a {
    border-bottom: 2px solid #2c303a;
    color: #868ca0;
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.625rem 1rem;
    margin-bottom: -2px;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all
}

.tabNav-tab a.active {
    color: white;
    border-bottom: 2px solid #47cf73
}

.tabNav-tab a:hover,
.tabNav-tab a:active {
    color: white;
    border-bottom: 2px solid #717790
}

.loading-spinner {
    height: 1.2em;
    width: 1.2em;
    border-radius: 50%;
    background: #717790;
    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-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #b7bbc8;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s
}

.loading-text span {
    display: inline-block;
    width: 15px;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 1px;
    -webkit-animation: exposedots 20s forwards linear;
    animation: exposedots 20s forwards linear;
    vertical-align: bottom
}

body.prelayout .loading-text {
    opacity: 0
}

#results .loading-text {
    position: static;
    -webkit-transform: none;
    transform: none
}

@-webkit-keyframes exposedots {
    to {
        width: 75px
    }
}

@keyframes exposedots {
    to {
        width: 75px
    }
}

.modal {

    background: #fff;

	
	
	
	
	
}

.modal::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em
}

.modal::-webkit-scrollbar-thumb {
    background: #717790
}

.modal::-webkit-scrollbar-track {
    background: #b8bbc8
}




.modalTable {
	position: sticky;
    height: 50%;
    margin: 0 auto;
    z-index: 0;
    overflow-x: auto;
    overflow-y: auto;
}
.modalTable::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em
}

.modalTable::-webkit-scrollbar-thumb {
    background: #717790
}

.modalTable::-webkit-scrollbar-track {
    background: #b8bbc8
}






.modal h1 {
    font-size: 2.4rem
}

.modal p,
.modal ul {
    color: #c7c9d3;
    margin: 0 0 25px 0
}

.modal p.error-details {
    color: #9b9dad;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 0
}

.modal ul {
    margin-left: 20px
}

.modal .modal-buttons {
    margin: 0
}

.modal p>code,
.modal div>code,
.modal li>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,
.modal.modal-upsell {
    border: 10px solid #ffdd40
}

.modal.modal-good {
    border: 10px solid #47cf73
}

.modal.modal-neutral {
    border: 10px solid #5a5f73
}

.modal.modal-email,
.modal.modal-blue {
    border: 10px solid #76daff
}

.modal.modal-single-message {
    text-align: center;
    padding: 45px 10px 55px
}

.modal.modal-single-message p {
    margin: 0
}

.modal.modal-feature h2 {
    font-size: 2rem;
    text-align: center;
    margin: 1rem 3rem 1.5rem
}

/*@media (max-width: 830px) {
    .modal {
        top: 52px;
        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
}

.modal-blocker {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 301;
    display: block;
    top: 0
}

.upgrade-upsell-modal .close-button {
    margin: auto;
    width: 100px;
    display: block;
    margin-top: 1rem
}

.modal-close-button {
    background: transparent;
    border: none;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 10;
    cursor: pointer
}

.modal-close-button svg {
    fill: #9b9dad;
    width: 1rem;
    height: 1rem;
    -webkit-transition: 0.1s ease fill;
    transition: 0.1s ease fill
}

.modal-close-button:hover svg {
    fill: white
}

.modal-close-button.light-modal:hover svg {
    fill: #0a0a0c
}

@media (max-width: 600px) {
    .modal {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 95%;
        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: #b7bbc8
}

.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: #b7bbc8 !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 #717790;
    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.6)
}

.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
}

.upgrade-upsell-modal {
    padding: 0;
    max-height: 1005px;
    background: none
}

.upgrade-upsell-modal iframe {
    background: black;
    height: calc(100% - 80px) !important;
    border: 10px solid black !important
}

.collision-modal-choices {
    border-collapse: collapse
}

.collision-modal-choices td {
    padding: 15px 20px 15px 0;
    border-bottom: 1px solid #9b9dad
}

.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 .public-private-wrap .help-flyout-link .icon-help:hover,
.collection-settings-form .public-private-wrap .help-flyout-link .icon-help:focus {
    fill: #aaaebc
}

.collection-settings-form-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.collection-settings-form-footer .public-private-wrap {
    background: none;
    padding: 0;
    margin: 0 0
}

.top-label-form>.collection-settings-form-footer {
    margin-bottom: 0
}

.collection-settings-form-footer .collection-settings-form-footer-item {
    text-align: center
}

.collection-settings-form-footer .collection-settings-form-footer-item .ios-toggle-wrap {
    color: inherit
}

@media (max-width: 550px) {
    .collection-settings-form .public-private-wrap {
        margin-top: 20px
    }
}

@media (min-width: 550px) {
    .collection-settings-form-footer {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -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-top: 7px solid #47cf73;
    border-radius: 6px;
    padding: 2rem 4rem;
    height: 81vh;
    max-height: 800px;
    min-height: 600px;
    max-width: 550px;
    top: 2.5vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.modal-signup>h1,
.modal-signup>p {
    text-align: center
}

.modal-signup h1 {
    color: #444857
}

.modal-signup h1 strong {
    color: #248c46
}

.modal-signup p {
    color: #868ca0
}

.modal-signup .tabs {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 32px
}

.modal-signup .tab-group {
    background: #fff;
    margin: 0 -4rem;
    padding: 2rem 4rem 0;
    position: relative;
    z-index: 5;
    border-top: 1px solid #f1f1f3
}

.modal-signup .tab {
    text-align: center;
    color: #444857;
    width: 100%;
    display: block
}

.modal-signup .tab.active {
    display: none
}

.modal-signup .tab .button,
.modal-signup .tab .file-upload-button {
    padding: 10px 16px;
    margin-right: 0;
    display: block
}

.modal-signup .tab .fake-link {
    color: #1f798f
}

.modal-signup .tab .fake-link:hover,
.modal-signup .tab .fake-link:focus {
    color: #3fb8d5
}

.modal-signup .input-area {
    padding: 12px 40px 0px 40px;
    margin: -2px -40px -20px;
    overflow-y: auto;
    height: 338px;
    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-bottom: 16px
}

.modal-signup .input-area label {
    color: #444857;
    text-transform: none;
    font-weight: bold
}

.modal-signup .input-area.active {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -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: #868ca0
}

.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-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@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
    }
}

.unsaved-editor-message {
    display: inline-block;
    font-size: 10px;
    vertical-align: -0.5em;
    padding: 2px 6px 3px;
    color: black;
    border-radius: 3px;
    line-height: 1;
    background: #ffdd40;
    margin-left: 3px;
    max-width: 50%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: opacity 0.4s linear, -webkit-transform 0.4s ease-in-out;
    transition: opacity 0.4s linear, -webkit-transform 0.4s ease-in-out;
    transition: opacity 0.4s linear, transform 0.4s ease-in-out;
    transition: opacity 0.4s linear, transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out
}

.unsaved-editor-message b {
    font-weight: 700
}

.unsaved-editor-message svg {
    opacity: 0.7;
    margin-left: 2px;
    margin-bottom: -1px;
    display: inline-block;
    width: 0.8em;
    height: 0.8em
}

.unsaved-editor-message.visible {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    pointer-events: auto
}

.is-horiz-skinny+* .unsaved-editor-message.visible {
    -webkit-animation: none;
    animation: none
}

@media (max-width: 767px),
(max-height: 440px) {
    .unsaved-editor-message {
        position: fixed;
        top: 0;
        left: 50%;
        -webkit-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
        border-radius: 0 0 3px 3px;
        white-space: nowrap;
        z-index: 15
    }
    .unsaved-editor-message.visible {
        visibility: visible;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0)
    }
}

@-webkit-keyframes flash-message-in {
    from {
        -webkit-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
        opacity: 0
    }
}

@keyframes flash-message-in {
    from {
        -webkit-transform: translate(-50%, -100%);
        transform: translate(-50%, -100%);
        opacity: 0
    }
}

.flash-message {
    position: fixed;
    z-index: 302;
    top: 0;
    left: 50%;
    right: -50%;
    font-size: 14px;
    line-height: 1.3;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 3px 10px 4px;
    color: black;
    border-radius: 0 0 5px 5px;
    background: #ffdd40;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -webkit-animation: flash-message-in 0.5s ease-in-out;
    animation: flash-message-in 0.5s ease-in-out
}

.flash-message a {
    background: #2c303a;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    white-space: nowrap
}

.flash-message a:hover,
.flash-message a:focus {
    background: #5a5f73
}

.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: 0;
    top: 0;
    cursor: pointer
}

.flash-message .close svg {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    vertical-align: top
}

.flash-message .dismiss {
    background: #ffdd40;
    color: black;
    display: inline-block;
    padding: 0;
    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;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.flash-message .dismiss svg {
    width: 50%;
    height: 50%;
    margin-top: 5px
}

.bar-message {
    text-align: center;
    margin-bottom: 1rem;
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.15)), to(transparent));
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    -webkit-transition: 0.3s;
    transition: 0.3s
}

.bar-message svg {
    display: inline-block;
    vertical-align: middle
}

.bar-message .close {
    position: absolute;
    right: 6px;
    top: 9px
}

.bar-message .close svg {
    width: 16px;
    height: 16px;
    padding: 2px;
    border-radius: 2px;
    fill: white;
    pointer-events: none
}

.bar-message .close:hover svg,
.bar-message .close:active svg {
    background: white;
    fill: #2c303a
}

.bar-message p {
    margin: 0 auto;
    max-width: 650px
}

.bar-message .mini-button,
.bar-message .file-upload-button {
    vertical-align: baseline
}

.bar-message.bar-message-error {
    background: #ffcfcb;
    color: #2c303a
}

.bar-message.bar-message-success {
    background: #d3ffe1;
    color: #2c303a
}

.bar-message.bar-message-ask {
    background: #f9e9a2;
    color: #2c303a
}

.bar-message.bar-message-ask a {
    color: #1f798f;
    border-bottom: 1px solid #acacac
}

.bar-message.bar-message-ask a:hover,
.bar-message.bar-message-ask a:focus {
    color: #289cb9;
    border-bottom: none
}

.bar-message.bar-message-error svg,
.bar-message.bar-message-success svg,
.bar-message.bar-message-ask svg {
    fill: #2c303a
}

.bar-message.bar-message-error .close:hover svg,
.bar-message.bar-message-error .close:active svg,
.bar-message.bar-message-success .close:hover svg,
.bar-message.bar-message-success .close:active svg,
.bar-message.bar-message-ask .close:hover svg,
.bar-message.bar-message-ask .close:active svg {
    background: #2c303a;
    fill: white
}

.bar-message.bar-message-split {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.bar-message.bar-message-split>:first-child {
    margin-right: auto
}

.bar-message.bar-message-gone {
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    margin: 0
}

.bar-message-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem
}

.bar-message-wrap .bar-message {
    margin-right: 1rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 0
}

#packages-building-message {
    margin: 2rem;
    z-index: 2;
    -webkit-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25)
}

.badge {
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 71%;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px 2px 5px;
    color: black !important;
    border-radius: 2px;
    position: relative;
    top: -1px;
    text-shadow: none !important;
    white-space: nowrap;
    letter-spacing: 0
}

.badge-pro {
    background: #ffdd40
}

.badge-hire {
    background: #76daff
}

.badge-new,
.badge-draft {
    background: #47cf73
}

.badge-follows {
    background: #717790
}

h2 .badge,
h3 .badge,
h4 .badge {
    margin-left: 0.25rem
}

.help-flyout {
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    display: none;
    position: absolute;
    z-index: 10;
    left: 100%;
    top: -20px;
    margin-left: 12px;
    border: 5px solid #5a5f73;
    -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    width: 300px;
    padding: 20px;
    background: black;
    text-align: left;
    font-weight: normal;
    color: #aaaebc;
    cursor: auto
}

.help-flyout::before {
    content: '';
    position: absolute;
    left: 0;
    margin-left: -14px;
    top: 12px;
    width: 0;
    height: 0;
    border-right: 10px solid #5a5f73;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent
}

.help-flyout h5 {
    color: white;
    margin: 0 0 0.5rem 0
}

.help-flyout p {
    color: #aaaebc !important;
    font-size: 0.9rem;
    margin: 0 0 1rem 0
}

.help-flyout p:last-child {
    margin: 0
}

.settings .help-flyout a {
    color: #56bcf9;
    white-space: nowrap;
    border-color: #56bcf9
}

.settings .help-flyout a:hover,
.settings .help-flyout a:focus {
    color: white;
    border: none
}

.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 #5a5f73
}

.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 #5a5f73;
    border-bottom: none;
    border-right: 10px solid transparent
}

.help-flyout-flush-left-top {
    right: 100%;
    left: auto;
    top: -2px;
    margin-right: 12px;
    margin-left: 0;
    bottom: auto;
    z-index: 6
}

.help-flyout-flush-left-top::before {
    top: -5px;
    bottom: auto;
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -24px;
    border-left: 10px solid #5a5f73;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    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: 3px;
    right: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer
}

.help-flyout-link .icon-help {
    width: 100%;
    height: 100%;
    fill: #717790
}

.help-flyout-link .icon-help:hover,
.help-flyout-link .icon-help:focus {
    fill: #0ebeff
}

.help-flyout-link svg {
    display: block
}

.help-flyout-link .icon-x {
    width: 12px;
    height: 12px;
    fill: #5a5f73;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer
}

.help-flyout-link .icon-x:hover,
.help-flyout-link .icon-x:focus {
    fill: #c7c9d3
}

.template-wrap .help-flyout-link,
.public-private-wrap .help-flyout-link,
.template-checkbox-row .help-flyout-link {
    top: 22px;
    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: #5a5f73;
    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;
    left: 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
}

.typeahead,
.tt-query,
.tt-hint {
    padding: 8px 12px;
    border: 2px solid #ccc;
    outline: none
}

.typeahead:focus {
    border: 2px solid #0097cf
}

.tt-suggestion {
    color: white;
    margin: 0 !important;
    padding: 8px;
    font-size: 11px;
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden
}

.tt-suggestion small {
    display: block;
    margin: 2px 0;
    color: #9b9dad
}

.tt-cursor {
    color: white;
    background: -webkit-gradient(linear, left top, left bottom, from(#3875d7), to(#2a62bc));
    background: linear-gradient(#3875d7, #2a62bc)
}

.tt-menu {
    background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#131313));
    background: linear-gradient(#313131, #131313);
    color: white;
    width: calc(100% + 73px);
    max-height: 240px;
    overflow: auto;
    left: -36px !important
}

.tt-menu::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em
}

.tt-menu::-webkit-scrollbar-thumb {
    background: #666
}

.tt-menu::-webkit-scrollbar-track {
    background: none
}

.empty-typeahead-message {
    padding: 15px;
    color: white
}

.typeahead-no-results-found {
    text-align: center;
    padding: 1rem
}

.twitter-typeahead {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

@media print {
    .main-sidebar,
    [id='react-search-and-user-menu'],
    .width-wrapper-comments .explore-tabs,
    .link-footer,
    .end-of-article-footer,
    .article-headline-link,
    .blog-meta-spacer,
    .blog-meta-spacer+.author-link,
    .actions-meta a,
    .cp_embed_wrapper iframe,
    [id='react-site-footer'],
    .end-of-article-sep,
    .follow-user-button,
    .pick-iframe,
    .leave-a-comment-area,
    .block-comment-actions {
        display: none
    }
    body {
        padding: 1rem !important;
        overflow-x: visible;
        overflow-y: visible
    }
    body,
    .block-comment-content,
    pre {
        background: white !important;
        color: black !important
    }
    .box {
        border: double 0.5em #666;
        margin: 0 0 1em
    }
    .post-body pre[class]::before,
    .comment-text pre[class]::before {
        border-bottom: solid 0.3em #666
    }
    .post-body pre[class*='lang-'],
    .comment-text pre[class*='lang-'] {
        margin: 0
    }
    .cp_embed_wrapper {
        border: dashed 0.1em #666;
        height: 4em;
        margin: 0 0 1em;
        overflow: hidden;
        padding: 1em
    }
    .cp_embed_wrapper:before {
        content: 'Embedded Pen';
        display: block;
        margin: 0 0 4em
    }
    .mega-header {
        -webkit-box-shadow: none;
        box-shadow: none;
        background: none;
        border: 0
    }
    .comment-list {
        list-style: none
    }
}

#myDiv {
    display: block;
}

#myDiv:hover,
#myDiv:focus-within {
    display: block;
}

#myInput:focus + #myDiv {
    display: FLEX;

}

.Logo_root-3XNFn {
    margin: 0;
    height: 2.25em
}

@media (max-width:830px) {
    .Logo_root-3XNFn {
        height: 2.25em
    }
.bootstrap-main {
    padding-top: 45px;
}	
	
}

.Logo_root-3XNFn .Logo_small-3i6l6 {
    display: block;
    width: 60px;
    height: 100%;
}

@media (min-width:831px) {
    .Logo_root-3XNFn .Logo_small-3i6l6 {
        display: none
    }
}

@media (max-width:550px) {
    body.details .Logo_root-3XNFn .Logo_small-3i6l6,
    body.editor .Logo_root-3XNFn .Logo_small-3i6l6,
    body.fullpage .Logo_root-3XNFn .Logo_small-3i6l6 {
        width: 20px
    }
}

.Logo_root-3XNFn .Logo_small-3i6l6 svg {
    display: block;
    fill: #fff;
    height: 100%;
    width: 100%;
    padding-top: 10px;
}

body[data-custom-playground] .Logo_root-3XNFn .Logo_small-3i6l6 svg {
    height: 46px;
    width: 30px;
    margin-left: 0
}

.Logo_root-3XNFn .Logo_large-3FckA {
    display: none;
    height: 65px;
    border: 0;
    padding: 0 1.25rem
}

@media (min-width:831px) {
    .Logo_root-3XNFn .Logo_large-3FckA {
        display: block;
        height: 75px
    }
}

.Logo_root-3XNFn .Logo_large-3FckA svg {
    display: block;
    fill: none;
    stroke: #fff;
    stroke-width: 2.3;
    stroke-linejoin: round;
    stroke-linecap: round;
    height: 100%;
    width: 150px
}

.main-header .Logo_large-3FckA {
    display: none
}

.main-header .Logo_small-3i6l6 {
    display: block
}

.Create_root-1iW7E {
    position: relative
}

.Create_menu-1BUPB {
    padding: 0;
    margin: 0;
    list-style: none
}

.Create_menu-1BUPB svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-right: 8px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    fill: #5a5f73;
    transition: fill .2s ease
}

button.Create_template-2ikcS {
    color: #9b9dad;
    width: 100%;
    margin-top: -.125rem;
    padding: .25rem 1.375rem 0 3.25rem;
    line-height: 1;
    text-align: left;
    display: block;
    cursor: pointer;
    transition: color .2s ease;
    font-size: 12px
}

button.Create_template-2ikcS svg {
    width: 11px;
    height: 11px;
    margin: -1px 0 0 .375rem;
    transition: transform .2s ease, fill .2s linear;
    fill: #9b9dad
}

button.Create_template-2ikcS:active,
button.Create_template-2ikcS:hover {
    color: #0ebeff
}

button.Create_template-2ikcS:active svg,
button.Create_template-2ikcS:hover svg {
    fill: #0ebeff
}

button.Create_template-2ikcS[aria-expanded=true] svg {
    transform: scaleY(-1)
}

.Create_createPen-2GnOY {
    margin-bottom: .5rem
}

.Create_pen-3iR43:hover svg {
    fill: #0ebeff
}

.Create_project-1ryPp:hover svg {
    fill: #ffdd40
}

.Create_post-1HOJq:hover svg {
    fill: #47cf73
}

.Create_collection-1Bske:hover svg {
    fill: #ae63e4
}

.CreateFromTemplate_root-1K-vZ {
    visibility: hidden;
    overflow: hidden;
    background: #1e1f26;
    padding: 0;
    max-height: 0;
    transition: all .3s cubic-bezier(.5, 0, .5, 1);
    -webkit-animation: CreateFromTemplate_expand-1KPra .3s cubic-bezier(.5, 0, .5, 1);
    animation: CreateFromTemplate_expand-1KPra .3s cubic-bezier(.5, 0, .5, 1)
}

.CreateFromTemplate_root-1K-vZ::-webkit-scrollbar {
    width: .5rem;
    height: .5rem
}

.CreateFromTemplate_root-1K-vZ::-webkit-scrollbar-thumb {
    background: #717790
}

.CreateFromTemplate_root-1K-vZ::-webkit-scrollbar-track {
    background: none
}

@-webkit-keyframes CreateFromTemplate_expand-1KPra {
    0% {
        max-height: 0;
        overflow: hidden
    }
}

@keyframes CreateFromTemplate_expand-1KPra {
    0% {
        max-height: 0;
        overflow: hidden
    }
}

.CreateFromTemplate_root-1K-vZ ul {
    list-style: none;
    margin: 0 0 .5rem
}

@media (max-width:830px) {
    .CreateFromTemplate_root-1K-vZ ul {
        width: 100%
    }
}

.CreateFromTemplate_root-1K-vZ a {
    padding: .3rem 1.375rem .3rem 4rem;
    font-size: 14px;
    line-height: 1.2;
    color: #fff;
    display: block;
    position: relative;
    transition: all .2s ease
}

.CreateFromTemplate_root-1K-vZ a span {
    color: #0ebeff;
    text-decoration: underline;
    transition: -webkit-text-decoration .2s ease;
    transition: text-decoration .2s ease;
    transition: text-decoration .2s ease, -webkit-text-decoration .2s ease
}

.CreateFromTemplate_root-1K-vZ a:active,
.CreateFromTemplate_root-1K-vZ a:hover {
    background: #131417;
    color: #0ebeff
}

.CreateFromTemplate_root-1K-vZ a:active span,
.CreateFromTemplate_root-1K-vZ a:hover span {
    text-decoration: none
}

.CreateFromTemplate_root-1K-vZ a:after,
.CreateFromTemplate_root-1K-vZ a:before {
    content: "";
    position: absolute;
    left: 30px;
    background: #0ebeff
}

.CreateFromTemplate_root-1K-vZ a:before {
    width: 2px;
    height: 11px;
    top: 1px
}

.CreateFromTemplate_root-1K-vZ a:after {
    width: 20px;
    height: 2px;
    top: 11px
}

.CreateFromTemplate_root-1K-vZ[data-expanded=true] {
    visibility: visible;
    overflow-y: scroll;
    max-height: 400px
}

.Pin_root-6tzg0 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: 13px 13px 17px;
    margin-bottom: 15px;
    background: #2c303a;
    border-radius: 6px;
    box-sizing: border-box;
    position: relative
}

.Pin_root-6tzg0:after {
    content: "";
    width: 100%;
    height: 4px;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 0 0 4px 4px
}

.Pin_root-6tzg0>div {
    max-width: 280px
}

.Pin_root-6tzg0 h3 {
    color: #fff;
    line-height: 1.4;
    font-size: 15px;
    margin-bottom: .25rem
}

.Pin_root-6tzg0 h4 {
    text-transform: none;
    color: #aaaebc;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0
}

.Pin_root-6tzg0 button {
    width: 20px;
    height: 15px;
    margin: 0 0 0 5px;
    padding: 0
}

.Pin_root-6tzg0 button svg {
    width: 15px;
    height: 15px;
    fill: #717790;
    transition: all .2s ease
}

.Pin_root-6tzg0 button:hover svg {
    fill: #fff
}

.pen:after {
    background: #0ebeff
}

.project:after {
    background: #ffdd40
}

.post:after {
    background: #47cf73
}

.collection:after {
    background: #ae63e4
}

.Pin_info-16aa6 {
    display: flex
}

.Pin_info-16aa6 svg {
    width: 20px;
    height: 20px;
    margin-right: .75rem
}

.Pin_info-16aa6 .icon-icon-new-pen {
    fill: #0ebeff
}

.Pin_info-16aa6 .icon-icon-new-project {
    fill: #ffdd40
}

.Pin_info-16aa6 .icon-icon-new-post {
    fill: #47cf73
}

.Pin_info-16aa6 .icon-icon-new-collection {
    fill: #ae63e4
}

.Drawer_root-3dt6g {
    box-shadow: 3px 0 3px rgba(0, 0, 0, .2);
    position: fixed;
    z-index: 15;
    top: 0;
    width: 400px;
    height: 100vh;
    background: #131417;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .15s ease, visibility 0s linear .15s;
    scrollbar-face-color: #2c303a;
    scrollbar-track-color: none;
    left: 188px;
    transform: translateX(-50px);
    padding: 5em 2rem 2rem;
    overflow: auto
}

@media (max-width:830px) {
    .Drawer_root-3dt6g {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100%;
        height: auto;
        height: 100%;
        min-height: 80vh;
        box-shadow: -5px 0 20px rgba(0, 0, 0, .3);
        padding: 1rem
    }
}

.Drawer_root-3dt6g button {
    background: none
}

.Drawer_root-3dt6g>h3 {
    font-size: 15px;
    margin: 0 0 10px 18px;
    text-transform: none;
    color: #fff;
    font-weight: 700
}

.Drawer_root-3dt6g::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.Drawer_root-3dt6g::-webkit-scrollbar-thumb {
    background: #717790
}

.Drawer_root-3dt6g::-webkit-scrollbar-track {
    background: #b8bbc8
}

.Drawer_close-3Z9P- {
    border: 0;
    background: none;
    position: absolute;
    top: 5.1rem;
    left: 2rem;
    cursor: pointer;
    text-align: left;
    width: 9rem
}

@media (max-width:830px) {
    .Drawer_close-3Z9P- {
        top: 1.1rem;
        left: 1rem
    }
}

.Drawer_close-3Z9P- svg {
    transform: rotate(90deg);
    fill: #aaaebc;
    width: 14px;
    height: 14px
}

.Drawer_close-3Z9P-:hover svg {
    fill: #fff
}

.sidebar-false .Drawer_root-3dt6g {
    left: auto;
    right: 0;
    transform: translateX(50px);
    top: 65px;
    height: calc(100vh - 52px)
}

.drawer.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s, 0s
}

.PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY {
    padding-top: 2rem;
    position: absolute;
    right: 60px;
    height: auto;
    max-height: 80vh;
    bottom: auto;
    transform-origin: top right;
    transform: scale(.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    border-radius: 3px
}

.PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY::-webkit-scrollbar-thumb {
    background: #717790
}

.PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY::-webkit-scrollbar-track {
    background: #b8bbc8
}

.PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY h3 {
    margin-left: 0
}

.PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY.PinsDrawer_open-1GNpF {
    transform: scale(1)
}

@media (max-width:830px) {
    .PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY {
        right: 0
    }
}
.Sidebar_root-2t9nF .button-anon-pen span {
    padding: .875rem 0;
    font-size: 1.75rem;
    align-items: center;
    background: #000;
    border-radius: 3px;
    display: block;
    justify-content: center;
    margin: 3px;
    box-sizing: border-box;
    height: 100%;
    transition: background .5s ease;
    font-family: 'Allura', cursive;
}		
@media (max-width:550px) {
    .PinsDrawer_drawer-1Qbdu.PinsDrawer_headerDrawer-1EhwY {
        display: none
    }
	
	
.Sidebar_root-2t9nF .button-anon-pen span {
    padding: .875rem 0;
    font-size: 2.25rem;
    align-items: center;
    background: #000;
    border-radius: 3px;
    display: block;
    justify-content: center;
    margin: 3px;
    box-sizing: border-box;
    height: 100%;
    transition: background .5s ease;
    font-family: 'Allura', cursive;
}	
	
}

.ActivityDrawer_allActivityLink-beShR {
    float: right;
    margin-top: -1em;
    margin-bottom: 1em
}

.ActivityItem_root-iX7xp {
    position: relative;
    background: #252830;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 4px;
    clear: both;
    overflow: hidden
}

.ActivityItem_itemPreview-2suvy {
    float: right;
    margin: 0 0 1rem 1.5rem;
    width: 25%;
    max-width: 200px
}

.ActivityItem_itemPreview-2suvy .cover-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: -.5rem;
    z-index: 10;
    border-radius: 6px;
    background: #fff;
    opacity: 0;
    transition: opacity .2s linear
}

.ActivityItem_itemPreview-2suvy .cover-link:focus,
.ActivityItem_itemPreview-2suvy .cover-link:hover {
    opacity: .15
}

.ActivityItem_new-3AGGa {
    background: #2c303a
}

.ActivityItem_new-3AGGa:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    background: #47cf73
}

.ActivityItem_new-3AGGa .ActivityItem_timeAgo-2YJdL {
    color: #868ca0!important
}

.ActivityItem_actor-1fAf- {
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.3;
    color: #c7c9d3;
    -webkit-font-smoothing: antialiased
}

.ActivityItem_actor-1fAf- strong {
    font-weight: 700;
    color: #fff
}

.ActivityItem_actor-1fAf- a {
    font-weight: 700;
    color: #56bcf9;
    transition: all .3s ease
}

.ActivityItem_actor-1fAf- a:active,
.ActivityItem_actor-1fAf- a:hover {
    color: #fff
}

.ActivityItem_pickedByRainbow-1raOb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73)
}

.ActivityItem_avatars-1-vzJ {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 1rem .3rem 0
}

.ActivityItem_avatars-1-vzJ img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    overflow: hidden;
    margin: 0 5px 5px 0
}

.ActivityItem_avatars-1-vzJ a:first-child img {
    width: 45px;
    height: 45px;
    border-radius: 3px
}

.ActivityItem_timeAgo-2YJdL {
    color: #5a5f73;
    margin-bottom: 0
}

.ActivityItem_commentText-1Fma8 {
    margin: .5rem 0;
    color: #fff;
    position: relative;
    font-style: italic;
    padding-left: 1rem;
    font-size: 1rem
}

.ActivityItem_commentText-1Fma8:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    border-radius: 3px;
    background: #5a5f73
}

a.ActivityItem_replyButton-1xolL {
    color: #fff;
    margin-bottom: .5rem
}

.PopOutPreviewButton_root-2j0aI {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 1rem 1rem 20%;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    transition: .25s cubic-bezier(.5, 0, .5, 1);
    transition-property: opacity;
    overflow: hidden;
    border-radius: inherit
}

@media (max-width:550px) {
    .PopOutPreviewButton_root-2j0aI {
        display: none
    }
}

.PopOutPreviewButton_root-2j0aI:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 200px;
    background: linear-gradient(to bottom left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2), transparent 49%);
    opacity: .8;
    transition: inherit;
    transform: scale(.9);
    transform-origin: top right;
    transition-property: opacity, transform
}

.PopOutPreviewButton_root-2j0aI:focus,
.PopOutPreviewButton_root-2j0aI:hover,
[data-component=Item]:focus .PopOutPreviewButton_root-2j0aI,
[data-component=Item]:hover .PopOutPreviewButton_root-2j0aI {
    opacity: .99
}

.PopOutPreviewButton_root-2j0aI:focus .PopOutPreviewButton_popupButton-3uddv,
.PopOutPreviewButton_root-2j0aI:hover .PopOutPreviewButton_popupButton-3uddv,
[data-component=Item]:focus .PopOutPreviewButton_root-2j0aI .PopOutPreviewButton_popupButton-3uddv,
[data-component=Item]:hover .PopOutPreviewButton_root-2j0aI .PopOutPreviewButton_popupButton-3uddv {
    transform: scale(.9)
}

.PopOutPreviewButton_root-2j0aI:focus:before,
.PopOutPreviewButton_root-2j0aI:hover:before {
    opacity: .99;
    transform: none
}

[data-component=Item]:focus .PopOutPreviewButton_root-2j0aI:focus .PopOutPreviewButton_popupButton-3uddv,
[data-component=Item]:focus .PopOutPreviewButton_root-2j0aI:hover .PopOutPreviewButton_popupButton-3uddv,
[data-component=Item]:hover .PopOutPreviewButton_root-2j0aI:focus .PopOutPreviewButton_popupButton-3uddv,
[data-component=Item]:hover .PopOutPreviewButton_root-2j0aI:hover .PopOutPreviewButton_popupButton-3uddv {
    transform: scale(1);
    background-color: #717790
}

[data-component=Item]:focus .PopOutPreviewButton_root-2j0aI:focus .PopOutPreviewButton_popupButton-3uddv .PopOutPreviewButton_expandIcon-NNnMY,
[data-component=Item]:focus .PopOutPreviewButton_root-2j0aI:hover .PopOutPreviewButton_popupButton-3uddv .PopOutPreviewButton_expandIcon-NNnMY,
[data-component=Item]:hover .PopOutPreviewButton_root-2j0aI:focus .PopOutPreviewButton_popupButton-3uddv .PopOutPreviewButton_expandIcon-NNnMY,
[data-component=Item]:hover .PopOutPreviewButton_root-2j0aI:hover .PopOutPreviewButton_popupButton-3uddv .PopOutPreviewButton_expandIcon-NNnMY {
    fill: #fff
}

.PopOutPreviewButton_popupButton-3uddv {
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    padding: .5rem;
    background: #5a5f73;
    border-radius: 6px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transform: translate(.25rem) scale(.9);
    transition: .25s cubic-bezier(.5, 0, .5, 1);
    transition-property: transform, background-color, opacity
}

.PopOutPreviewButton_expandIcon-NNnMY {
    display: block;
    fill: #aaaebc
}

.CollectionPreview_root-2Q7ct {
    position: relative
}

.CollectionPreview_root-2Q7ct:focus .CollectionPreview_count-DTFVg,
.CollectionPreview_root-2Q7ct:hover .CollectionPreview_count-DTFVg {
    background: #1e1f26;
    color: #e3e4e8
}

.CollectionPreview_count-DTFVg {
    font-size: .9rem;
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    text-align: right;
    background: #000;
    color: #b7bbc8;
    margin: 0;
    padding: .2em .5em;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: .2s linear;
    transition-property: background, color
}

.CollectionPreview_count-DTFVg svg {
    width: 1em;
    height: 1em;
    margin-left: .2em;
    fill: currentColor;
    vertical-align: -2px
}

.CollectionPreview_previewGrid-20p4a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 8px;
    align-items: stretch
}

.CollectionPreview_previewGrid-20p4a .CollectionPreview_filler-EHsC1,
.CollectionPreview_previewGrid-20p4a img {
    display: block;
    background: #2c303a;
    border-radius: 4px;
    overflow: hidden
}

.CollectionPreview_previewGrid-20p4a .CollectionPreview_filler-EHsC1 {
    width: 100%;
    padding-top: 56.25%
}

.FollowButton_followButton-2frIy {
    background: #47cf73;
    color: #000;
    top: -1px;
    display: inline-flex;
    align-items: center;
    padding: 1px 5px 1px 4px;
    background-color: #5a5f73;
    color: #c7c9d3;
    transition: background-color .2s linear, color .2s linear;
    border: 0;
    margin: 0 10px 2px 5px;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    font-size: 10px;
    line-height: 1.4
}

.FollowButton_followButton-2frIy.FollowButton_button-focus-Ds3Oh:focus,
.FollowButton_followButton-2frIy:focus,
.FollowButton_followButton-2frIy:hover {
    background: #2fb45a
}

.FollowButton_followButton-2frIy.FollowButton_button-focus-Ds3Oh:focus {
    box-shadow: 0 0 0 2px #248c46
}

.FollowButton_followButton-2frIy:active,
.FollowButton_followButton-2frIy:focus,
.FollowButton_followButton-2frIy:hover {
    color: #000;
    background-color: #47cf73
}

.FollowButton_followButton-2frIy:active svg,
.FollowButton_followButton-2frIy:focus svg,
.FollowButton_followButton-2frIy:hover svg {
    fill: #000
}

@media (max-width:550px) {
    .FollowButton_followButton-2frIy {
        font-size: 9px
    }
}

.FollowButton_followButton-2frIy>span>svg {
    margin: 0 3px 0 0;
    fill: #c7c9d3;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    transition: fill .2s linear;
    position: relative;
    top: -1px
}

.FollowButton_followButton-2frIy .FollowButton_iconArea-YciNl {
    position: relative
}

.FollowButton_followButton-2frIy .FollowButton_unfollowIcon-2d1tY {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -2px;
    margin: auto;
    visibility: hidden;
    transform: scale(.8)!important
}

.FollowButton_followButton-2frIy.FollowButton_following-2f7K9 {
    background-color: #5a5f73
}

.FollowButton_followButton-2frIy.FollowButton_following-2f7K9:focus,
.FollowButton_followButton-2frIy.FollowButton_following-2f7K9:hover {
    background-color: #ff3c41
}

.FollowButton_followButton-2frIy.FollowButton_following-2f7K9:focus .FollowButton_statusIcon-1iDOg,
.FollowButton_followButton-2frIy.FollowButton_following-2f7K9:hover .FollowButton_statusIcon-1iDOg {
    visibility: hidden
}

.FollowButton_followButton-2frIy.FollowButton_following-2f7K9:focus .FollowButton_unfollowIcon-2d1tY,
.FollowButton_followButton-2frIy.FollowButton_following-2f7K9:hover .FollowButton_unfollowIcon-2d1tY {
    visibility: visible
}

.SidebarAd_root-PH2LM {
    padding: 1.75rem 1.375rem .35rem
}

@-webkit-keyframes Sidebar_rainbowBorder-1Xqh0 {
    0%,
    to {
        background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe)
    }
    25% {
        background-image: linear-gradient(115deg, #fad648, #a767e5, #12bcfe, #4fcf70)
    }
    50% {
        background-image: linear-gradient(115deg, #a767e5, #12bcfe, #4fcf70, #fad648)
    }
    75% {
        background-image: linear-gradient(115deg, #12bcfe, #4fcf70, #fad648, #a767e5)
    }
}

@keyframes Sidebar_rainbowBorder-1Xqh0 {
    0%,
    to {
        background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe)
    }
    25% {
        background-image: linear-gradient(115deg, #fad648, #a767e5, #12bcfe, #4fcf70)
    }
    50% {
        background-image: linear-gradient(115deg, #a767e5, #12bcfe, #4fcf70, #fad648)
    }
    75% {
        background-image: linear-gradient(115deg, #12bcfe, #4fcf70, #fad648, #a767e5)
    }
}

.Sidebar_root-2t9nF {
    position: relative;
	font-family: 'Dosis', sans-serif;
}

@media (min-height:720px) and (min-width:831px) {
    .Sidebar_root-2t9nF {
        max-height: 100vh;
        overflow-y: auto
    }
    .Sidebar_root-2t9nF::-webkit-scrollbar {
        width: 5px;
        height: 5px
    }
    .Sidebar_root-2t9nF::-webkit-scrollbar-thumb {
        background: #444857
    }
    .Sidebar_root-2t9nF::-webkit-scrollbar-track {
        background: transparent
    }
    .ios .Sidebar_root-2t9nF {
        overflow: visible
    }
}

.Sidebar_root-2t9nF button {
    background: transparent;
    border: 0
}

.Sidebar_root-2t9nF h2 {
	font-weight: 900;
    font-size: 1rem;
    margin: 1.25rem 1.35rem .2rem;
    transition: color .3s ease;
    text-transform: uppercase;
    color: #9b9dad;
    /* font-family: Lato, Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; */
    display: block;
    font-family: 'Dosis', sans-serif;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Baloo Chettan 2', cursive !important;
}

@media (max-width:830px) {
    .Sidebar_root-2t9nF h2 {
        font-size: .9rem
    }
}

.Sidebar_root-2t9nF h2 svg {
    width: 10px;
    height: 10px;
    margin-top: 2px;
    fill: #fff;
    margin-left: .5rem
}

@media (min-width:831px) {
    .Sidebar_root-2t9nF h2 svg {
        display: none
    }
}

.Sidebar_root-2t9nF .main-menu-create {
    color: #b7bbc8;
    position: relative;
    margin-bottom: 1rem;
    margin-top: 0
}

body:not(.logged-out) .Sidebar_root-2t9nF .main-menu-create:after {
    position: absolute;
    bottom: -.5rem;
    left: 0;
    right: 0;
    content: "";
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73)
}

.Sidebar_root-2t9nF .main-menu-companies,
.Sidebar_root-2t9nF .main-menu-your {
    color: #0ebeff
}

.Sidebar_root-2t9nF .main-menu-explore {
    color: #ffdd40
}

.Sidebar_root-2t9nF .main-menu-grow {
    color: #47cf73
}

.Sidebar_root-2t9nF .new-button,
.Sidebar_root-2t9nF .primary-explore-link>a,
.Sidebar_root-2t9nF .primary-explore-link>button {
    font-weight: 700;
    color: #fff;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 1.25rem;
    white-space: nowrap;
    text-align: left;
    overflow: hidden;
    transition: .2s ease;
    line-height: 1;
    cursor: pointer;
}

@media (max-width:830px) {
    .Sidebar_root-2t9nF .new-button,
    .Sidebar_root-2t9nF .primary-explore-link>a,
    .Sidebar_root-2t9nF .primary-explore-link>button {
        font-size: 1.5rem;
    }
}

.Sidebar_root-2t9nF .primary-explore-link .unseen {
    color: #868ca0;
    font-size: .82rem;
    padding-left: .4em;
    font-weight: 400
}

.Sidebar_root-2t9nF .new-button {
    padding: .175rem 1.375rem
}

.Sidebar_root-2t9nF .button-anon-pen {
    margin: -.75rem auto 0;
    padding: 0;
    width: calc(100% - 2.75rem);
    text-align: center;
    position: relative;
    background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    border-radius: 6px;
    box-sizing: border-box;
    color: #fff;
    display: block;
    z-index: 2;
    font-size: 1.5rem;
}



.Sidebar_root-2t9nF .button-anon-pen:focus,
.Sidebar_root-2t9nF .button-anon-pen:hover {
    -webkit-animation: Sidebar_rainbowBorder-1Xqh0 .5s linear infinite;
    animation: Sidebar_rainbowBorder-1Xqh0 .5s linear infinite
}

.Sidebar_root-2t9nF .primary-explore-link>a,
.Sidebar_root-2t9nF .primary-explore-link>button {
    padding: .35rem 1.375rem
}

.Sidebar_root-2t9nF .explore-links-menu li:not(.primary-explore-link)>a {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    padding: .375rem 1.375rem;
    width: 100%;
    color: #c7c9d3;
    border: 0;
    transition: .2s ease
}

.Sidebar_root-2t9nF .explore-links-menu li:not(.primary-explore-link)>a:hover {
    background: #000
}

@media (max-width:830px) {
    .Sidebar_root-2t9nF .explore-links-menu li:not(.primary-explore-link)>a {
        font-size: 1.1rem;
        width: 100%
    }
}

.Sidebar_root-2t9nF .explore-links-menu+.explore-links-menu {
    margin-top: 1rem
}

.Sidebar_root-2t9nF .primary-explore-link>a:hover,
.Sidebar_root-2t9nF .primary-explore-link>button:hover {
    background: #000
}

.Sidebar_root-2t9nF .Sidebar_navigationWrap-1eN9p {
    display: flex;
    flex-direction: column;
        /* min-height: calc(100vh - 58px); */

}

@media (max-width:830px) {
    .Sidebar_root-2t9nF .navigation-wrap {
        display: block;
        width: 20em;
        max-width: 60vw;
        display: inline-block;
        position: absolute;
        top: 52px;
        left: 0;
        padding: 1rem 0 .5rem;
        background: #1e1f26;
        box-shadow: 0 5px 20px #000;
        z-index: 100;
        transform: scale(1);
        transform-origin: 25% 0;
        transition: transform .25s cubic-bezier(.5, 0, .5, 1), opacity .25s linear, visibility 0s linear;
        font-size: 1.25rem;
    }
    .sidebar-collapsed .Sidebar_root-2t9nF .navigation-wrap {
        opacity: 0;
        transform: scale(.9);
        visibility: hidden;
        pointer-events: none;
        transition-delay: 0s, 0s, .25s
    }
    .Sidebar_root-2t9nF .explore-links-menu,
    .Sidebar_root-2t9nF .your-links-menu {
        margin-bottom: 1rem
    }
	.button, .file-upload-button, .gsc-cursor-page {
	    padding: 10px;
	}
}

.SidebarToggle_root-JNUQt {
    position: fixed;
    left: 0;
    top: 16px;
    overflow: hidden;
    z-index: 20;
}

@media (max-width:830px) {
    .SidebarToggle_root-JNUQt {
        position: absolute;
        left: 50px;
        top: 10px;
		z-index: 5;
    }
}

.SidebarToggle_icon-30znX {
	width: 3em;
    padding: 1.45em 0.60em;
    cursor: pointer;
    border-radius: 4px;
    background: #444857;
    transition: background-color .2s ease
}

.SidebarToggle_icon-30znX svg {
    width: 12px;
    height: 9px;
    position: absolute;
    top: 9px;
    right: 6px;
    fill: #fff;
    transition: transform .2s ease;
    transform: scaleY(-1)
}

.SidebarToggle_icon-30znX span {
    position: relative;
    display: block;
    background: #fff;
    border-radius: 6px;
    width: 6px;
    height: 2px
}

.SidebarToggle_icon-30znX span:after,
.SidebarToggle_icon-30znX span:before {
    content: "";
    position: absolute;
    left: 0;
    height: inherit;
    background: inherit;
    border-radius: inherit;
    transition: inherit
}

.SidebarToggle_icon-30znX span:before {
    top: -6px;
    width: 9px
}

.SidebarToggle_icon-30znX span:after {
    bottom: -6px;
    width: 16px
}

.SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX {
    background: #5a5f73
}

.SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX svg {
    transform: scale(1)
}

.SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX span {
    width: 10px
}

.SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX span:before {
    width: 6px
}

.SidebarToggle_icon-30znX:focus,
.SidebarToggle_icon-30znX:hover {
    background: #717790
}

@media (min-width:831px) {
    .SidebarToggle_root-JNUQt {
        transition: opacity .4s ease-in-out, visibility 0s linear .4s;
        transform: scale(.75);
        transform-origin: left center;
        top: 22px;
        left: 188px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=false] {
        opacity: 0;
        visibility: hidden
    }
    .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX {
        transform: translateX(-100%)
    }
    .main-sidebar:hover .SidebarToggle_root-JNUQt[data-collapsed=false],
    .main-sidebar[focus-within] .SidebarToggle_root-JNUQt[data-collapsed=false] {
        opacity: .99;
        visibility: visible;
        transition-delay: 0s
    }
    .main-sidebar:focus-within .SidebarToggle_root-JNUQt[data-collapsed=false],
    .main-sidebar:hover .SidebarToggle_root-JNUQt[data-collapsed=false] {
        opacity: .99;
        visibility: visible;
        transition-delay: 0s
    }
    .main-sidebar:hover .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX,
    .main-sidebar[focus-within] .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX {
        transform: translateX(0)
    }
    .main-sidebar:focus-within .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX,
    .main-sidebar:hover .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX {
        transform: translateX(0)
    }
    .SidebarToggle_icon-30znX {
        border-radius: 0 6px 6px 0;
        background: #5a5f73;
        transition: background-color .2s ease, transform .2s ease-in-out
    }
    .SidebarToggle_icon-30znX svg {
        top: 13px;
        right: 5px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX svg {
        transform: rotate(-90deg)
    }
    .SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX span {
        width: 13px;
        height: 2px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX span:before {
        top: -6px;
        width: 10px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=true] .SidebarToggle_icon-30znX span:after {
        bottom: -5.5px;
        width: 10px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX svg {
        transform: rotate(90deg)
    }
    .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX span {
        width: 10px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX span:before {
        width: 12px
    }
    .SidebarToggle_root-JNUQt[data-collapsed=false] .SidebarToggle_icon-30znX span:after {
        width: 13px
    }
}

.editor .SidebarToggle_icon-30znX {
    display: none
}

.SidebarToggle_openBar-3Z4nP {
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    min-height: 100vh;
    width: 12px;
    cursor: pointer;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s linear, visibility 0s linear .3s
}

.SidebarToggle_openBar-3Z4nP:before {
    content: "";
    display: block;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    transition: transform .3s ease-in-out;
    transform: translateX(-100%);
    background: repeating-linear-gradient(45deg, #868ca0, #868ca0 2px, #5a5f73 0, #5a5f73 4px);
	    background: repeating-linear-gradient(45deg, #99b2ff, #263466 2px, #162560 0, #40486c 4px);
}

@media (max-width:830px) {
    .SidebarToggle_openBar-3Z4nP {
        display: none
    }
}

.SidebarToggle_openBar-3Z4nP[data-collapsed=true] {
    opacity: .25;
    visibility: visible;
    transition-delay: 0s, 0s
}

.SidebarToggle_openBar-3Z4nP[data-collapsed=true]:before {
    transform: translateX(0)
}

.SidebarToggle_openBar-3Z4nP[data-collapsed=true]:hover,
.SidebarToggle_root-JNUQt:hover+.SidebarToggle_openBar-3Z4nP[data-collapsed=true] {
    opacity: .5;
    -webkit-animation: SidebarToggle_collapsed-opener-slide-6fxkg .6s linear infinite;
    animation: SidebarToggle_collapsed-opener-slide-6fxkg .6s linear infinite
}

@-webkit-keyframes SidebarToggle_collapsed-opener-slide-6fxkg {
    to {
        transform: translateY(-17px)
    }
}

@keyframes SidebarToggle_collapsed-opener-slide-6fxkg {
    to {
        transform: translateY(-17px)
    }
}

.SearchAndUser_searchAndUserMenu-EFfCJ {
    flex: 1;
    padding: 1rem 0 1rem 1rem;
    display: flex;
    justify-content: flex-end;
    position: relative;

    height: 74px;
    visibility: hidden;
}

.SearchAndUser_searchAndUserMenu-EFfCJ>* {
    visibility: visible
}

@media (max-width:830px) {
    .SearchAndUser_searchAndUserMenu-EFfCJ {
        padding: 10px 0 10px 10px;
        position: absolute;
        top: 0;
        right: 0;
		
        height: 53px;
        width: calc(100% - 82px)
    }
}

.SearchAndUser_searchAndUserMenu-EFfCJ>div:first-child:not(:only-child) {
    flex: 1;
    margin-right: 1rem;
    overflow: hidden
}

@media (max-width:830px) {
    .SearchAndUser_searchAndUserMenu-EFfCJ>div:first-child:not(: only-child) {
        margin-right: .5rem
    }
}

@media (max-width:830px) {
    body:not([class*=editor]) [data-test-id=login-button],
    body:not([class*=editor]) [data-test-id=signup-button] {
        padding: 6px 8px
    }
}

.UserMenu_userMenuButton-38sVN {
    font-family: 'Dosis', sans-serif;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Baloo Chettan 2', cursive !important;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    margin-right: 1rem;
    transition: background-color .2s linear;
    width: 45px;
    height: 45px
}

body.editor .UserMenu_userMenuButton-38sVN {
    margin-right: 5px
}

@media (max-width:830px) {
    .UserMenu_userMenuButton-38sVN,
    body.editor .UserMenu_userMenuButton-38sVN {
        width: 32px;
        height: 32px
    }
}

@media (max-width:550px) {
    body.editor .UserMenu_userMenuButton-38sVN {
        width: 32px;
        height: 32px;
        margin-right: 4px
    }
}

.UserMenu_userMenuButton-38sVN img {
    width: 100%;
    height: 100%
}

.UserMenu_userMenuButton-38sVN:after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 100%;
    margin-top: 5px;
    z-index: 101;
    border-bottom: 4px solid #0ebeff;
    transform: scaleX(0);
    transition: transform .1s ease
}

.UserMenu_userMenuButton-38sVN[aria-expanded=true]:after {
    transform: scaleX(1)
}

.UserMenu_userMenuDropdownParent-5tsjj {
    position: relative
}

.UserMenu_userMenu-3E8E- {
    overflow-y: auto;
    position: absolute;
    z-index: 100;
    right: 0;
    top: calc(100% + 10px);
    width: 225px;
    list-style: none;
    max-height: 80vh;
    max-height: calc(100vh - 71px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    padding: 1rem 0 .5rem;
    background: #1e1f26;
    box-shadow: 0 2rem 4rem #0a0a0c;
    transform: scale(.9);
    transform-origin: top right;
    transition: all .2s ease-in-out, visibility 0s linear .2s
}

.UserMenu_userMenu-3E8E-::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.UserMenu_userMenu-3E8E-::-webkit-scrollbar-thumb {
    background: #5a5f73
}

.UserMenu_userMenu-3E8E-::-webkit-scrollbar-track {
    background: none
}

.UserMenu_userMenu-3E8E-[data-open=true] {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-delay: 0s, 0s
}

.UserMenu_userMenu-3E8E- svg {
    fill: #5a5f73;
    width: 16px;
    height: 16px;
    margin-right: .5rem
}

.UserMenu_userMenu-3E8E->li>a,
.UserMenu_userMenu-3E8E->li>button {
    font-family: 'Dosis', sans-serif;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Baloo Chettan 2', cursive !important;
    border: 0;
    width: 100%;
    color: #fff;
    font-weight: 700;
    text-align: left;
    background: none;
    font-size: 1rem;
    padding: .25rem 1rem;
    display: flex;
    align-items: center;
    line-height: inherit
}

.UserMenu_userMenu-3E8E->li>a:focus,
.UserMenu_userMenu-3E8E->li>a:hover,
.UserMenu_userMenu-3E8E->li>button:focus,
.UserMenu_userMenu-3E8E->li>button:hover {
    background: #444857;
    cursor: pointer
}

.UserMenu_userMenu-3E8E->li>a .UserMenu_badge-2C_6V,
.UserMenu_userMenu-3E8E->li>button .UserMenu_badge-2C_6V {
    margin-left: .4rem;
    top: 1px
}

.UserMenuLinks_sepAfter-3c-v5 {
    margin-bottom: .5rem
}

.UserMenuLinks_sepAfter-3c-v5:after {
    content: "";
    display: block;
    border-bottom: 1px solid #2c303a;
    margin-right: 1rem;
    margin-left: 1rem
}

.UserMenuLinks_sepAfter-3c-v5 a,
.UserMenuLinks_sepAfter-3c-v5 button {
    margin-bottom: .5rem;
    border: 0!important
}

.UserMenuLinks_sepBefore-1T3_1 {
    margin-top: .5rem
}

.UserMenuLinks_sepBefore-1T3_1:before {
    content: "";
    display: block;
    border-bottom: 1px solid #2c303a;
    margin-right: 1rem;
    margin-left: 1rem
}

.UserMenuLinks_sepBefore-1T3_1 a,
.UserMenuLinks_sepBefore-1T3_1 button {
    margin-top: .5rem;
    border: 0!important
}

.UserMenuLinks_proUpsellBadge-3OBG- {
    margin-left: .25rem;
    position: relative;
    top: 1px
}

.ContextSwitchLink_contextList-1pOBq {
    position: relative
}

.ContextSwitchLink_contextList-1pOBq img {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    margin-right: .75rem
}

.ContextSwitchLink_contextList-1pOBq[data-active=true] {
    display: none
}

.ContextSwitchLink_contextList-1pOBq[data-active=true] button:after {
    content: "?";
    line-height: 35px;
    text-align: center;
    position: absolute;
    left: 1rem;
    top: .25rem;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, .5);
    border-radius: 4px;
    color: #fff;
    font-size: 1.3rem;
    text-shadow: 0 0 4px #000
}

.ContextSwitchLink_contextSwitchLink-106CD {
    padding: .25rem 1rem
}

.ContextSwitchLink_contextSwitchLink-106CD span {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis
}

.ContextSwitchLink_sepAfter-2r8_I {
    margin-bottom: .5rem
}

.ContextSwitchLink_sepAfter-2r8_I:after {
    content: "";
    display: block;
    border-bottom: 1px solid #2c303a;
    margin-right: 1rem;
    margin-left: 1rem
}

.ContextSwitchLink_sepAfter-2r8_I a,
.ContextSwitchLink_sepAfter-2r8_I button {
    margin-bottom: .5rem;
    border: 0!important
}

.UserTeams_useCodePenAs-22fWR {
    margin-top: .5rem
}

.UserTeams_useCodePenAs-22fWR:before {
    content: "";
    display: block;
    border-bottom: 1px solid #2c303a;
    margin-right: 1rem;
    margin-left: 1rem
}

.UserTeams_useCodePenAs-22fWR a,
.UserTeams_useCodePenAs-22fWR button {
    margin-top: .5rem;
    border: 0!important
}

.UserTeams_useCodePenAs-22fWR span {
    color: #9b9dad;
    font-size: .8rem;
    padding: .5rem 1rem .25rem;
    display: inline-block
}

.SearchTypeFilterLinks_searchFilters-1GGrn {
    border-radius: 0 0 4px 4px;
    border: none;
    margin-top: -1rem;
    margin-bottom: 1rem;
    padding: .75rem;
    background: #2c303a;
    position: relative;
}

@media (max-width:930px) {
    .SearchTypeFilterLinks_searchFilters-1GGrn {
        margin-right: 60px
    }
}

@media (min-width:930px) {
    .SearchTypeFilterLinks_searchFilters-1GGrn:after,
    .SearchTypeFilterLinks_searchFilters-1GGrn:before {
        position: absolute;
        top: 0;
        /* content: ""; */
    }
    .SearchTypeFilterLinks_searchFilters-1GGrn:before {
        /* width: 10px; */
        height: 10px;
        right: -10px;
    }
    .SearchTypeFilterLinks_searchFilters-1GGrn:after {
        background: #131417;
        border-radius: 14px;
        width: 14px;
        height: 14px;
        right: -14px
    }
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2 {
    background-color: #1e1f26;
    color: #717790;
   /* padding: .25rem .5rem .375rem;*/
    margin-right: .75rem;
    font-size: 1rem;
    transition: all .2s linear;
    border-radius: 2px
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2:focus,
.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2:hover {
    outline: 0;
    color: #fff;
    box-shadow: 0 5px 3px #2c303a
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2:last-child {
    margin-right: 0
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2 svg {
    fill: currentColor;
    margin-right: .5rem;
    transition: fill .2s linear
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2[data-active=true] {
    color: #fff;
    background-color: #5a5f73;
    box-shadow: 0 5px 3px #2c303a
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2[data-active=true][data-search-type=Pens] svg {
    fill: #0ebeff
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2[data-active=true][data-search-type=Projects] svg {
    fill: #ffdd40
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2[data-active=true][data-search-type=Posts] svg {
    fill: #47cf73
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2[data-active=true][data-search-type=Collections] svg {
    fill: #ae63e4
}

.SearchTypeFilterLinks_searchFilters-1GGrn .SearchTypeFilterLinks_filter-2KNh2[data-active=true][data-search-type=Users] svg {
    fill: #ff3c41
}

.SearchPopular_root-1qVeY .button {
    background-color: #2c303a;
    color: #9b9dad;
/*padding: .25rem .5rem .375rem;*/
    margin: 0 1rem 1rem 0;
    font-size: 1rem;
    transition: all .2s linear;
    border-radius: 2px
}

.SearchPopular_root-1qVeY .button:focus,
.SearchPopular_root-1qVeY .button:hover {
    outline: 0;
    color: #fff;
    background-color: #5a5f73
}

.SearchPopular_root-1qVeY .button:last-child {
    margin-right: 0
}

.SearchPopular_searchLink-2S7U8 {
    display: inline-block
}

.SearchExpander_search-yHTK3 {
    z-index: 5
}

.SearchExpander_searchExpander-1vdOo {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10%);
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    width: 100%;
    background: #131417;
    box-shadow: 0 10px 20px #243949;
    padding: 0 1rem 1rem;
    transition: all .3s cubic-bezier(.8, 0, .6, 1);
    transition-property: all, visibility;
    transition-delay: 0s, .3s;
    /* background: linear-gradient(-180deg, #517FA4 0%, #243949 100%); */
}

.SearchExpander_searchExpander-1vdOo h4 {
	margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    color: #aaaebc;
    background: linear-gradient( 
130deg,#19191a,#939ca34a,#7b879373);
    padding: 0.25em;
    font-size: 1.25em;
    font-weight: bold;
    text-indent: 0.25em;
}

.SearchExpander_searchExpander-1vdOo[data-open=true] {
    visibility: visible;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.5, 0, .3, 1);
    opacity: 1;
    transform: translateY(-1px)
}

.SearchExpander_searchExpander-1vdOo[data-open=true] .SearchExpander_searchFilters-35K3B {
    margin-right: 60px
}

body[class*=logged-out] .SearchExpander_searchExpander-1vdOo[data-open=true] .SearchExpander_searchFilters-35K3B {
    margin-right: 187px
}

.SearchExpander_searchExpander-1vdOo[data-open=true] .SearchExpander_searchFilters-35K3B:after,
.SearchExpander_searchExpander-1vdOo[data-open=true] .SearchExpander_searchFilters-35K3B:before {
    display: none
}

.SearchExpander_searchExpander-1vdOo>a,
.SearchExpander_searchExpander-1vdOo>div {
    position: relative;
    z-index: 1
}

@media (max-width:830px) {
    .SearchExpander_searchExpander-1vdOo {
      /* display: none!important ;
	  left: -20%;
		width: auto; */;
    }
	
div#myDivMenu {
    overflow: scroll;
    height: 600px;
}	
#myDiv {
    Position: Fixed;
}	
}

.SearchExpander_svgBg-21XdP {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px
}

.ViewSwitcher_switch-1Ih20+.ViewSwitcher_switch-1Ih20 {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #444857
}

.ItemTitle_root-3FqLB {
    padding: 0 1rem 0 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    flex-shrink: 1;
    flex-grow: 1;
    min-width: 160px
}

.ItemTitle_root-3FqLB:first-child {
    margin-left: 1rem
}

.ItemTitle_text-2ho1f {
    width: 100%;
    overflow: hidden
}

.ItemTitle_title-3OkGi {
    font-family: 'Dosis', sans-serif;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 1.3rem;
    margin: 0;
    display: flex;
    align-items: center
}

@media (max-height:440px),
(max-width:767px) {
    .ItemTitle_title-3OkGi {
        margin: 0;
        font-size: 1.1rem
    }
}

.ItemTitle_title-3OkGi form {
    display: block;
    width: 100%
}

.ItemTitle_title-3OkGi input[type=text] {
    font: inherit;
    font-weight: 700;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    width: 100%
}

.ItemTitle_titleLink-mr9H4 {
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle
}

.ItemTitle_by-24dz8 {
    display: flex;
    align-items: center
}

.ItemTitle_by-24dz8 .badge-pro,
.ItemTitle_by-24dz8 .follow-user-button {
    top: 1px;
    font-size: .71rem;
    line-height: 1.5;
    padding: 0 4px;
    margin-left: 4px;
    margin-bottom: 0
}

.ItemTitle_by-24dz8 .badge-pro {
    padding: 0 4px 1px
}

.ItemTitle_by-24dz8 .follow-user-button {
    margin-bottom: 0;
    font-size: .75rem
}

@media (max-height:440px),
(max-width:767px) {
    .ItemTitle_by-24dz8 .follow-user-button {
        display: none
    }
}

.ItemTitle_ownerLink-tMhWC {
    color: #9b9dad;
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0
}

.ItemTitle_iconEdit-jPjlp {
    display: inline-block;
    vertical-align: middle;
    transition: opacity .3s;
    margin-left: 6px;
    cursor: pointer;
    height: 13px;
    width: 13px;
    fill: currentColor;
    flex: 0 0 auto
}

.ItemTitle_iconEdit-jPjlp:hover {
    opacity: .8;
    -webkit-animation: ItemTitle_jiggle-3dqUZ .6s forwards;
    animation: ItemTitle_jiggle-3dqUZ .6s forwards
}

@media (max-height:440px),
(max-width:767px) {
    .ItemTitle_iconEdit-jPjlp {
        height: 10px;
        width: 10px
    }
}

@-webkit-keyframes ItemTitle_jiggle-3dqUZ {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(9deg)
    }
    75% {
        transform: rotate(-9deg)
    }
    to {
        transform: rotate(0deg)
    }
}

@keyframes ItemTitle_jiggle-3dqUZ {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(9deg)
    }
    75% {
        transform: rotate(-9deg)
    }
    to {
        transform: rotate(0deg)
    }
}

.ItemHeader_headerWrap-2WdNj {
    height: 100%;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 11
}

.AboutPlayground_aboutButton-1wJm4 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    text-transform: uppercase;
    position: absolute;
    top: 28px;
    left: 12px;
    width: 26px;
    height: 26px;
    display: block;
    border: 1px solid transparent;
    box-shadow: 0 -5px 4px rgba(0, 0, 0, .25)
}

.AboutPlayground_aboutButton-1wJm4:focus,
.AboutPlayground_aboutButton-1wJm4:hover {
    border-color: #65b687
}

.AboutPlayground_aboutButton-1wJm4>img {
    width: 26px;
    height: 26px;
    padding: 3px;
    display: block;
    -o-object-fit: contain;
    object-fit: contain
}

.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx {
    max-width: 280px;
    padding: 0;
    text-transform: none;
    margin-top: -10px;
    top: 100%;
    bottom: auto;
    left: .5rem!important;
    transform-origin: top left;
    letter-spacing: 0
}

.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx a {
    color: #1f798f;
    border-bottom: 1px solid #acacac
}

.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx a:focus,
.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx.AboutPlayground_panel-1ANHx a:hover {
    color: #289cb9;
    border-bottom: none
}

.AboutPlayground_editorInfo-10MKK {
    padding: 1rem 1.5rem .5rem
}

.AboutPlayground_editorInfo-10MKK>header {
    text-align: center;
    background: #d5d7de;
    background: var(--accent);
    padding: .5rem;
    margin: -1rem -1.5rem 1rem
}

.AboutPlayground_editorInfo-10MKK>header img {
    display: block;
    margin: auto;
    width: 40px;
    height: auto
}

.AboutPlayground_editorInfo-10MKK h2 {
    font-family: inherit;
    font-weight: 700;
    font-size: 1.3rem
}

.AboutPlayground_editorInfo-10MKK p {
    color: #717790;
    font-size: .85rem;
    line-height: 1.4
}

.ItemPreviewModal_root-3aPJI {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
    overflow-y: scroll;
    background: rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.ItemPreviewModal_root-3aPJI::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.ItemPreviewModal_root-3aPJI::-webkit-scrollbar-thumb {
    background: #717790
}

.ItemPreviewModal_root-3aPJI::-webkit-scrollbar-track {
    background: none
}

.ItemPreviewModal_moveButton-1xWzZ,
.ItemPreviewModal_root-3aPJI {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, transform .3s cubic-bezier(.3, 0, .3, 1), visibility 0s linear .3s
}

[data-open=true] .ItemPreviewModal_moveButton-1xWzZ,
[data-open=true] .ItemPreviewModal_root-3aPJI {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
}

.ItemPreviewModal_modal-3FdGe {
    transform-origin: top center;
    transform: scale(.95) translateY(5vh);
    transition: transform .5s cubic-bezier(.3, 0, .3, 1)
}

[data-open=true] .ItemPreviewModal_modal-3FdGe {
    transform: none
}

.ItemPreviewModal_modal-3FdGe {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 800px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    align-self: center;
    margin: 40px auto;
    background: rgba(68, 72, 87, .85);
    border-radius: 10px
}

@media (max-width:830px) {
    .ItemPreviewModal_modal-3FdGe {
        width: 90%
    }
}

.ItemPreviewModal_moveButton-1xWzZ {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    position: fixed;
    background: #2c303a;
    border-radius: 4px;
    text-align: center;
    top: 50vh;
    margin-top: -30px;
    width: 50px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .2s ease;
    z-index: 101
}

@media (max-width:830px) {
    .ItemPreviewModal_moveButton-1xWzZ {
        width: 45px;
        height: 45px
    }
}

.ItemPreviewModal_moveButton-1xWzZ svg {
    fill: #717790;
    width: 14px;
    height: 20px;
    transition: all .2s ease
}

.ItemPreviewModal_moveButton-1xWzZ:focus,
.ItemPreviewModal_moveButton-1xWzZ:hover {
    background: #47cf73
}

.ItemPreviewModal_moveButton-1xWzZ:focus svg,
.ItemPreviewModal_moveButton-1xWzZ:hover svg {
    fill: #131417
}

.ItemPreviewModal_moveButton-1xWzZ[disabled] {
    visibility: hidden;
    opacity: 0!important
}

.ItemPreviewModal_moveButton-1xWzZ,
.ItemPreviewModal_moveButton-1xWzZ[disabled] {
    transform: scale(.6)
}

.ItemPreviewModal_prevPenButton-2WEiJ {
    left: 2vw
}

@media (max-width:830px) {
    .ItemPreviewModal_prevPenButton-2WEiJ {
        left: 1vw
    }
}

.ItemPreviewModal_prevPenButton-2WEiJ svg {
    margin-left: -4px
}

.ItemPreviewModal_nextPenButton-3Zar3 {
    right: 2vw
}

@media (max-width:830px) {
    .ItemPreviewModal_nextPenButton-3Zar3 {
        right: 1vw
    }
}

.ItemPreviewModal_nextPenButton-3Zar3 svg {
    margin-right: -4px
}

.ItemPreviewHeader_root-1ePBk {
    display: flex;
    align-items: center;
    padding: 1.125rem 1rem 1rem;
    background: #2d303a;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.ItemPreviewHeader_root-1ePBk .button {
    background: #5a5f73
}

.ItemPreviewHeader_root-1ePBk .button>svg {
    fill: #c7c9d3
}

.ItemPreviewHeader_root-1ePBk .button:focus,
.ItemPreviewHeader_root-1ePBk .button:hover {
    background: #717790
}

.ItemPreviewHeader_root-1ePBk .badge-pro {
    top: 0
}

.ItemPreviewHeader_avatar-1ti2k {
    border-radius: 3px;
    position: absolute;
    left: -10px;
    overflow: hidden;
    display: block
}

.ItemPreviewHeader_avatar-1ti2k img {
    display: block;
    overflow: hidden;
    width: 40px;
    height: 40px
}

.ItemPreviewHeader_title-2RBXs {
    width: 100%;
    overflow: hidden;
    padding: 0 .5rem 0 28px;
    flex-grow: 1;
    flex-shrink: 1
}

.ItemPreviewHeader_title-2RBXs>h1 {
    font-family: 'Dosis', sans-serif;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 1.1333rem;
    line-height: 1.1;
    margin: 0;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ItemPreviewHeader_title-2RBXs>h1 a {
    color: #fff
}

.ItemPreviewHeader_author-YZO6k {
    display: flex;
    align-items: center
}

.ItemPreviewHeader_author-YZO6k>* {
    margin: 0 3px
}

.ItemPreviewHeader_authorName-1KjC_ {
    color: #aaaebc;
    margin-left: 0
}

.ItemPreviewHeader_authorName-1KjC_:hover {
    color: #aaaebc
}

.ItemPreviewHeader_followButton-1r9b_.ItemPreviewHeader_followButton-1r9b_ {
    top: 0
}

.ItemPreviewHeader_actions-1F5CY {
    display: flex;
    flex-shrink: 0;
    margin-top: -.125rem
}

.ItemPreviewHeader_actions-1F5CY .action-menu>button,
.ItemPreviewHeader_actions-1F5CY>button {
    padding: 7px 10px
}

.ActionMenu_menu-2K9wU {
    position: relative
}

.ActionMenu_button-bnULH {
    padding: 0 10px;
    border-radius: 4px;
    border: none;
    background: #1e1f26;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 11;
    position: relative;
    transition: background .2s linear;
    margin-right: 0
}

.ActionMenu_button-bnULH svg {
    width: 25px;
    height: 20px;
    fill: #9b9dad;
    transition: fill .2s linear
}

[data-component=Item]:hover .ActionMenu_button-bnULH svg {
    fill: #868ca0
}

.ActionMenu_button-bnULH:hover {
    background: #444857
}

.ActionMenu_button-bnULH:hover svg {
    fill: #c7c9d3
}

.ActionMenu_menuOpen-2eDHl .ActionMenu_button-bnULH {
    background: #131417
}

.ActionMenu_menuOpen-2eDHl .ActionMenu_button-bnULH svg {
    fill: #c7c9d3
}

.ActionMenu_menu-2K9wU.ActionMenu_menu-2K9wU.ActionMenu_menu-2K9wU .ActionMenu_button-bnULH.ActionMenu_button-bnULH.ActionMenu_button-bnULH {
    display: flex!important;
    visibility: visible!important;
    opacity: 1!important;
    min-width: 25px!important;
    min-height: 20px!important;
    transform: none!important
}

.ActionMenu_menu-2K9wU.ActionMenu_menu-2K9wU.ActionMenu_menu-2K9wU .ActionMenu_button-bnULH.ActionMenu_button-bnULH.ActionMenu_button-bnULH svg {
    min-width: 25px!important;
    min-height: 20px!important
}

.ActionMenu_menu-2K9wU.ActionMenu_menu-2K9wU.ActionMenu_menu-2K9wU .ActionMenu_dialogOpen-2YLst.ActionMenu_dialogOpen-2YLst.ActionMenu_dialogOpen-2YLst {
    display: block!important;
    visibility: visible!important;
    opacity: 1!important;
    transform: scale(1)!important
}

.ActionMenu_dialog-22d5r {
    display: block;
    position: absolute;
    bottom: 100%;
    right: 0;
    left: auto;
    color: #fff;
    border-radius: 8px 8px 0 8px;
    border: none;
    white-space: nowrap;
    padding: .5rem 0;
    margin-bottom: 8px;
    box-shadow: -6px 6px 20px rgba(0, 0, 0, .25);
    transform-origin: bottom right
}

.ActionMenu_dialog-22d5r a,
.ActionMenu_dialog-22d5r button {
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    background: #131417;
    border: 0;
    color: inherit;
    cursor: pointer
}

.ActionMenu_dialog-22d5r a svg,
.ActionMenu_dialog-22d5r button svg {
    width: 20px;
    height: 20px;
    margin-right: .5rem;
    fill: #717790
}

.ActionMenu_dialog-22d5r a:focus,
.ActionMenu_dialog-22d5r a:hover,
.ActionMenu_dialog-22d5r button:focus,
.ActionMenu_dialog-22d5r button:hover {
    background: #2c303a
}

.ActionMenu_dialog-22d5r a:focus svg,
.ActionMenu_dialog-22d5r a:hover svg,
.ActionMenu_dialog-22d5r button:focus svg,
.ActionMenu_dialog-22d5r button:hover svg {
    fill: #9b9dad
}

.ActionMenu_menu-2K9wU:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 150%;
    border-radius: 0 0 10px 10px;
    pointer-events: none
}

.ActionMenu_menu-2K9wU[data-direction=down]:before {
    top: 0;
    bottom: auto;
    border-radius: 4px 4px 0 0
}

.ActionMenu_menu-2K9wU[data-direction=down] .ActionMenu_dialog-22d5r {
    bottom: auto;
    top: 100%;
    transform-origin: top right;
    border-radius: 8px 0 8px 8px
}

.ActionMenu_dialog-22d5r,
.ActionMenu_menu-2K9wU:before {
    background: #131417;
    z-index: 10;
    opacity: 0;
    transform: scale(.9);
    visibility: hidden;
    transition: opacity .15s linear, transform .15s cubic-bezier(.9, 0, .6, .6), visibility 0s linear .15s
}

.ActionMenu_dialogOpen-2YLst,
.ActionMenu_menuOpen-2eDHl .ActionMenu_dialog-22d5r,
.ActionMenu_menuOpen-2eDHl:before {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition-timing-function: linear, cubic-bezier(.37, .2, .06, .96), linear;
    transition-delay: 0s;
    -webkit-animation: ActionMenu_dialog-entrance-3C08I .15s .1s backwards;
    animation: ActionMenu_dialog-entrance-3C08I .15s .1s backwards;
    -webkit-animation-timing-function: cubic-bezier(.9, 0, .6, .6), linear;
    animation-timing-function: cubic-bezier(.9, 0, .6, .6), linear
}

@-webkit-keyframes ActionMenu_dialog-entrance-3C08I {
    0% {
        opacity: 0;
        transform: scale(.9)
    }
}

@keyframes ActionMenu_dialog-entrance-3C08I {
    0% {
        opacity: 0;
        transform: scale(.9)
    }
}

.ItemActions_menu-114wt {
    margin-right: 10px
}

.ItemActions_menuSmall-12vVp {
    margin-right: 5px
}

.ItemActions_menuSmall-12vVp .ItemActions_button-1Sw8z {
    padding: 5px
}

.ItemActions_menuSmall-12vVp .ItemActions_button-1Sw8z svg {
    height: 15px
}

.ItemActions_blocked-3RO8g {
    padding: .5em 1em;
    color: #868ca0
}

.ItemActions_button-1Sw8z {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0
}

.ItemActions_button-1Sw8z svg {
    z-index: 11;
    position: relative;
    width: 25px;
    height: 25px;
    fill: #5a5f73;
    transition: fill .2s linear
}

[data-component=Item]:hover .ItemActions_button-1Sw8z svg {
    fill: #868ca0
}

.ItemActions_button-1Sw8z:focus svg,
.ItemActions_button-1Sw8z:hover svg,
.ItemActions_menuOpen-3wYn7 .ItemActions_button-1Sw8z svg {
    fill: #aaaebc
}

.actionItem {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .5rem 1rem;
    color: inherit;
    cursor: pointer
}

.actionItem svg {
    width: 20px;
    height: 20px;
    margin-right: .5rem;
    fill: #717790
}

.actionItem[disabled] {
    opacity: .5;
    cursor: normal
}

.actionItem:focus,
.actionItem:hover {
    background: #2c303a
}

.actionItem:focus svg,
.actionItem:hover svg {
    fill: #9b9dad
}

.AddToCollection_modal-2LLIS {
    position: absolute;
    top: 2%;
    left: 2%;
    right: 2%;
    margin: auto;
    width: 96%;
    min-width: 20em;
    max-width: 25em;
    height: 100%;
    height: calc(100% + 44px);
    min-height: 290px;
    max-height: 390px;
    background: rgba(44, 48, 58, .95);
    z-index: 12;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column
}

.AddToCollection_modal-2LLIS[data-anchor=bottom] {
    top: auto;
    left: auto;
    right: 100px;
    bottom: 100%;
    margin: 0 0 1px;
    max-width: 20em
}

.AddToCollection_heading-39dIZ {
    font-size: .8rem;
    color: #fff;
    text-transform: none;
    padding: 10px 10px 0
}

.CollectionsList_collectionList-Pvt-b {
    overflow-y: auto;
    flex: 1 1 auto
}

.CollectionsList_collectionList-Pvt-b::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.CollectionsList_collectionList-Pvt-b::-webkit-scrollbar-thumb {
    background: #717790
}

.CollectionsList_collectionList-Pvt-b::-webkit-scrollbar-track {
    background: #4d4d4d
}

.CollectionsList_loading-39YOL,
.CollectionsList_noFilteredCollections-1WTZv {
    display: block;
    padding: 10px;
    text-align: center;
    white-space: normal;
    line-height: 1.5
}

.CollectionsList_noFilteredCollections-1WTZv {
    font-weight: 700;
    color: #fff
}

.CollectionsListItem_listItem-1QA-i {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    color: #fff;
    font-size: .95rem;
    cursor: pointer
}

.CollectionsListItem_listItem-1QA-i:hover {
    background: #1e1f26
}

.CollectionsListItem_preview-fdHT6 {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 10px 0 0;
    border-radius: 3px;
    background: #fff;
    color: #000;
    flex: 0 0 auto;
    position: relative
}

.CollectionsListItem_screenshot-3cU0Z {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 3px;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
    font-size: .8rem
}

.CollectionsListItem_privateIcon-2RbiR {
    width: 1.1em;
    height: 1.5em;
    fill: #868ca0;
    stroke: #2c303a;
    stroke-width: 20;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    margin: auto;
    z-index: 2
}

.CollectionsListItem_title-jjMdQ {
    line-height: 1.2;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateY(.7rem);
    transition: transform .3s ease
}

.CollectionsListItem_details-vF9yQ {
    display: block;
    margin-top: .2rem;
    font-size: .8rem;
    height: 1.2rem;
    transition: opacity .3s ease;
    opacity: 0;
    white-space: nowrap
}

.CollectionsListItem_detail-1o183 {
    display: inline-flex;
    align-items: center;
    padding: .1em .5em;
    background: #0a0a0c;
    margin-right: .5em;
    border-radius: 2px;
    color: #fff
}

.CollectionsListItem_detail-1o183 svg {
    width: .8em;
    height: .8em;
    fill: #fff;
    fill: currentColor;
    display: inline-block;
    margin-left: .3em
}

.CollectionsListItem_detailView-Z7bGj:focus,
.CollectionsListItem_detailView-Z7bGj:hover {
    background: #47cf73;
    color: #fff
}

.CollectionsListItem_listItem-1QA-i:focus .CollectionsListItem_title-jjMdQ,
.CollectionsListItem_listItem-1QA-i:hover .CollectionsListItem_title-jjMdQ {
    transform: translateY(0)
}

.CollectionsListItem_listItem-1QA-i:focus .CollectionsListItem_details-vF9yQ,
.CollectionsListItem_listItem-1QA-i:hover .CollectionsListItem_details-vF9yQ {
    opacity: 1
}

.CollectionsListItem_button-2SUPT {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    display: inline-flex;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    background: #868ca0;
    color: #fff;
    margin-left: 5px;
    flex: 0 0 22px;
    cursor: pointer
}

.CollectionsListItem_button-2SUPT>svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    fill: #131417
}

.CollectionsListItem_listItem-1QA-i:focus .CollectionsListItem_button-2SUPT,
.CollectionsListItem_listItem-1QA-i:hover .CollectionsListItem_button-2SUPT {
    background: #b7bbc8
}

.CollectionsListItem_statusButton-89hTg {
    position: relative;
    overflow: hidden
}

.CollectionsListItem_listItem-1QA-i:focus .CollectionsListItem_statusButtonInCollection-2x0LI,
.CollectionsListItem_listItem-1QA-i:hover .CollectionsListItem_statusButtonInCollection-2x0LI,
.CollectionsListItem_statusButtonInCollection-2x0LI {
    background: #47cf73
}

.CollectionsListItem_removeIcon-3KJtK {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: #ff3c41;
    opacity: 0;
    -webkit-animation: CollectionsListItem_no-show-6YBXD .5s linear;
    animation: CollectionsListItem_no-show-6YBXD .5s linear
}

.CollectionsListItem_listItem-1QA-i:focus .CollectionsListItem_removeIcon-3KJtK,
.CollectionsListItem_listItem-1QA-i:hover .CollectionsListItem_removeIcon-3KJtK {
    opacity: 1
}

@-webkit-keyframes CollectionsListItem_no-show-6YBXD {
    0%,
    99% {
        opacity: 0
    }
}

@keyframes CollectionsListItem_no-show-6YBXD {
    0%,
    99% {
        opacity: 0
    }
}

.NewCollection_button-1PbhN {
    display: block;
    z-index: 3;
    width: 100%;
    color: #fff;
    font-weight: 700;
    background: #2c303a;
    border: none;
    border-top: 2px solid #1e1f26;
    font-size: .9rem;
    padding: .75rem;
    margin: 0;
    cursor: pointer;
    flex: 0 0 auto
}

.NewCollection_button-1PbhN:hover {
    background: #47cf73;
    color: #1e1f26
}

.NewCollection_create-3mFvS {
    background: #131417;
    flex: 0 0 auto
}

.NewCollection_label-1H9BM {
    display: flex;
    align-items: center
}

.NewCollection_labelText-1p7BL {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Telefon, Sans-Serif;
    display: inline-block;
    font-weight: 400;
    line-height: 1;
    padding: .4em .75em .25em;
    text-transform: uppercase
}

.NewCollection_input-ryYkr {
    flex: 1 1 auto
}

.NewCollection_closeButton-1oysv {
    flex: 0;
    padding: .5em 1em;
    fill: #444857;
    cursor: pointer
}

.NewCollection_closeButton-1oysv:focus,
.NewCollection_closeButton-1oysv:hover {
    fill: #717790
}

input[type=text].NewCollection_input-ryYkr {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    background: transparent;
    border: none;
    padding: 10px;
    color: #fff;
    margin: 0;
    border-radius: 0
}

input[type=text].NewCollection_input-ryYkr:focus {
    background-color: #1e1f26;
    color: #fff
}

input[type=text].NewCollection_input-ryYkr::-webkit-input-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=text].NewCollection_input-ryYkr::-moz-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=text].NewCollection_input-ryYkr:-ms-input-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=text].NewCollection_input-ryYkr::-ms-input-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=text].NewCollection_input-ryYkr::placeholder {
    text-transform: uppercase;
    color: #717790
}

.FilterCollections_root-pqbn6 {
    display: block;
    position: relative;
    margin: 0 10px 5px;
    padding: 0;
    width: 100%;
    flex: 0 0 auto
}

.FilterCollections_searchIcon-350nP {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    margin: auto;
    width: 1em;
    height: 1em;
    fill: #868ca0
}

input[type=search].FilterCollections_searchInput-3ORmV {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    background-color: #1e1f26;
    width: 100%;
    width: calc(100% - 20px);
    border: none;
    padding: 10px 6px 10px 30px;
    color: #fff
}

input[type=search].FilterCollections_searchInput-3ORmV:focus {
    background-color: #444857;
    color: #fff
}

input[type=search].FilterCollections_searchInput-3ORmV::-webkit-input-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=search].FilterCollections_searchInput-3ORmV::-moz-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=search].FilterCollections_searchInput-3ORmV:-ms-input-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=search].FilterCollections_searchInput-3ORmV::-ms-input-placeholder {
    text-transform: uppercase;
    color: #717790
}

input[type=search].FilterCollections_searchInput-3ORmV::placeholder {
    text-transform: uppercase;
    color: #717790
}

.MiniCloseButton_closeButton-1WNd9 {
    position: absolute;
    top: 10px;
    right: 10px
}

.MiniCloseButton_closeButton-1WNd9 svg {
    pointer-events: none;
    width: 10px;
    height: 10px;
    fill: #717790
}

.MiniCloseButton_closeButton-1WNd9:active svg,
.MiniCloseButton_closeButton-1WNd9:hover svg {
    fill: #fff
}

#react-blocked-item,
.details #react-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

.BlockedItem_blockedMessage-2z-4i {
    padding: 1rem;
    text-align: center;
    display: grid;
    align-content: center;
    flex: 1;
    min-height: 300px;
    background: radial-gradient(444px at 50%, at 50%, #444856 0, #333641 100%);
    background: radial-gradient(444px at 50% 50%, #444856 0, #333641 100%)
}

.ItemDetailsLoader_loader-1tEN2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1 1 auto
}

.ItemDetailsLoader_loader-1tEN2 .ItemDetailsLoader_loaderSpinner-12tYz {
    position: relative
}

.ItemDetailsLoader_loader-1tEN2 .ItemDetailsLoader_loaderSpinner-12tYz .loading-spinner {
    margin: 0
}

.ItemDetailsLoader_loader-1tEN2 .ItemDetailsLoader_content-2uGZR {
    flex: 1 1 auto
}

.ItemDetailsLoader_loaderHeader-1Cbdb {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    width: 100%;
    height: 50vh;
    box-sizing: content-box;
    border-bottom: 10px solid #454855
}

.ItemDetailsContent_titleAndAuthor-1d0_M p {
    margin: 0
}

.ItemDetailsContent_content-3PNgI {
    margin: 0 auto;
    width: 100%;
    max-width: 860px;
    background: #2c303a;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    padding: 1.5rem 1rem
}

.ItemDetailsContent_desc-hTVKB {
    margin-bottom: 1rem;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

.ItemDetailsContent_desc-hTVKB:empty {
    display: none
}

@media (min-width:551px) {
    .ItemDetailsContent_content-3PNgI {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto auto 1fr auto;
        grid-gap: 1rem 2rem;
        padding: 2rem
    }
    .ItemDetailsContent_content-3PNgI>* {
        margin-top: 0!important;
        margin-bottom: 0!important
    }
    .ItemDetailsContent_meta-2n9i4 {
        grid-column: 2;
        grid-row: 1/span 3
    }
    .ItemDetailsContent_license-CMcib {
        grid-column: 1/-1
    }
}

@media (max-width:550px) {
    .ItemDetailsContent_share-1xnIs {
        float: right;
        margin-left: 1rem
    }
    .ItemDetailsContent_stats-30xxQ {
        clear: both
    }
}

.Comments_markdownButton-1l42y {
    float: right;
    margin: .5rem .75rem;
    color: #9b9dad;
    text-align: right;
    font-size: .8rem
}

.Comments_markdownButton-1l42y:focus,
.Comments_markdownButton-1l42y:hover {
    color: #56bcf9
}

.Comments_commentForm-2mkUu {
    padding: 0 0 10px;
    background: #1e1f26;
    border-color: #1e1f26;
    border-radius: 5px;
    position: relative
}

.Comments_commentForm-2mkUu.Comments_updateCommentForm-3la3s {
    margin-top: 10px;
    margin-bottom: 10px
}

textarea.Comments_commentInput-tzLXG {
    overflow: hidden;
    overflow-y: auto;
    background: none;
    border: none;
    color: #fff;
    padding: 10px;
    margin: 0;
    resize: none;
    height: 100px;
    font-size: 1rem;
    width: 100%;
    line-height: 1.4
}

textarea.Comments_commentInput-tzLXG::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

textarea.Comments_commentInput-tzLXG::-webkit-scrollbar-thumb {
    background: #717790
}

textarea.Comments_commentInput-tzLXG::-webkit-scrollbar-track {
    background: none
}

textarea.Comments_commentInput-tzLXG::-webkit-input-placeholder {
    color: #717790
}

textarea.Comments_commentInput-tzLXG::-moz-placeholder {
    color: #717790
}

textarea.Comments_commentInput-tzLXG:-ms-input-placeholder {
    color: #717790
}

textarea.Comments_commentInput-tzLXG::-ms-input-placeholder {
    color: #717790
}

textarea.Comments_commentInput-tzLXG::placeholder {
    color: #717790
}

.Comments_commentButton-pPmcw {
    display: block;
    margin-left: auto;
    margin-right: 10px;
    transition: all .2s ease
}

.Comments_commentButton-pPmcw:hover,
.Comments_in-action-3IkdW .Comments_commentButton-pPmcw {
    background: #47cf73;
    color: #000
}

.Comments_cancelButton-lwVDA {
    position: absolute;
    left: 10px;
    bottom: 10px
}

.Comments_cancelButton-lwVDA:hover,
.Comments_in-action-3IkdW .Comments_cancelButton-lwVDA {
    background: #ff3c41
}

.Comments_commentCount-CsQ1O {
    clear: both;
    color: #aaaebc;
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase
}

.Comments_commentList-2xOVm {
    list-style: none;
    margin: 20px auto
}

.Comments_showMoreComments-1g7Bj {
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    color: #e3e4e8;
    display: flex;
    align-items: center;
    cursor: pointer
}

.Comments_showMoreComments-1g7Bj:active,
.Comments_showMoreComments-1g7Bj:hover {
    color: #fff
}

.Comments_showMoreComments-1g7Bj:active svg,
.Comments_showMoreComments-1g7Bj:hover svg {
    fill: #47cf73
}

.Comments_plusButton-1Nv0u {
    padding: 7px;
    background: #1e1f26;
    border-radius: 4px;
    margin-right: .5rem
}

.Comments_plusButton-1Nv0u svg {
    fill: #868ca0;
    display: block;
    width: 16px;
    height: 16px
}

.Comments_noComments-2NPfu {
    clear: both;
    color: #aaaebc
}

.Comments_cantCommentMessage-39xft {
    background: #1e1f26;
    border-radius: 4px;
    padding: 1.5rem 1rem;
    text-align: center;
    font-weight: 700
}

.TextForm_textForm-1CvuX {
    padding: 0 0 10px;
    background: #1e1f26;
    border-color: #1e1f26;
    border-radius: 5px;
    margin-bottom: 1em;
    position: relative
}

.TextForm_textForm-1CvuX.TextForm_updateCommentForm-1kFwP {
    margin-top: 10px
}

.TextForm_textInput-2LDdI {
    background: none;
    font-size: 1rem;
    width: 100%;
    line-height: 1.4;
    padding: 10px;
    white-space: pre-wrap;
    overflow: hidden;
    overflow-y: auto;
    border: none;
    margin: 0;
    height: 100px;
    resize: none
}

.TextForm_textInput-2LDdI::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.TextForm_textInput-2LDdI::-webkit-scrollbar-thumb {
    background: #717790
}

.TextForm_textInput-2LDdI::-webkit-scrollbar-track {
    background: none
}

.TextForm_textInput-2LDdI,
.TextForm_textInput-2LDdI:focus {
    color: #fff;
    background: none
}

.TextForm_textInput-2LDdI::-webkit-input-placeholder {
    color: #717790
}

.TextForm_textInput-2LDdI::-moz-placeholder {
    color: #717790
}

.TextForm_textInput-2LDdI:-ms-input-placeholder {
    color: #717790
}

.TextForm_textInput-2LDdI::-ms-input-placeholder {
    color: #717790
}

.TextForm_textInput-2LDdI::placeholder {
    color: #717790
}

.TextForm_submitButton-2foT5 {
    display: block;
    margin-left: auto;
    transition: all .2s ease
}

.TextForm_in-action-3ChQl .TextForm_submitButton-2foT5,
.TextForm_submitButton-2foT5:hover {
    background: #47cf73;
    color: #000
}

.TextForm_cancelButton-1ocx5 {
    position: absolute;
    left: 10px;
    bottom: 10px
}

.TextForm_cancelButton-1ocx5:hover,
.TextForm_in-action-3ChQl .TextForm_cancelButton-1ocx5 {
    background: #ff3c41
}

.Comment_commentDetails-rViCF {
    display: grid;
    grid-template-columns: 40px auto;
    grid-template-rows: 18px 12px
}

.Comment_authorAvatar-1Y3fi {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    overflow: hidden;
    grid-column: 1;
    grid-row: 1/span 2;
    justify-content: start
}

.Comment_commentAuthor-1KGfN,
.Comment_commentTime-3QPoc {
    color: #aaaebc;
    grid-column: 2;
    margin: 0;
    line-height: 1
}

.Comment_commentAuthor-1KGfN {
    grid-row: 1
}

.Comment_commentAuthor-1KGfN em {
    color: #fff;
    font-weight: 700;
    font-style: normal
}

.Comment_commentTime-3QPoc {
    grid-row: 2;
    font-size: .8em;
    text-transform: none;
    line-height: 15px
}

.Comment_commentActions-1UY8U {
    transition: all .16s ease-out;
    transform: translateY(5px);
    opacity: 0
}

.Comment_comment-dlJi_:hover .Comment_commentActions-1UY8U {
    transform: none;
    opacity: 1
}

.Comment_commentAction-3g_Ch {
    margin-right: 4px
}

.Comment_commentContent-1DEtW {
    font-size: 1rem;
    margin: 4px 14px;
    padding: 10px 0 20px 24px;
    border-left: 2px solid #444857;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

.Comment_commentContent-1DEtW>:last-child {
    margin-bottom: 0
}

li:last-child>.Comment_commentContent-1DEtW {
    padding-bottom: 20px
}

.Comment_commentText-Khagw {
    padding: 0 0 10px
}

.ItemTags_list-A7T3d,
.ItemTags_listItem-x3GDL {
    margin: 0;
    padding: 0;
    list-style-type: none
}

ul.ItemTags_list-A7T3d {
    margin: 1rem 0;
    padding: 0
}

.ItemTags_listItem-x3GDL,
.ItemTags_tag-haU_P {
    display: inline-block
}

.ItemTags_tag-haU_P {
    margin: 0 .5rem .4rem 0;
    background: #444857;
    color: #b7bbc8;
    padding: .3rem .6rem .4rem .4rem;
    border-radius: 2px;
    font-size: .9rem;
    line-height: 1;
    max-width: 18em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ItemTags_tag-haU_P:before {
    content: "?";
    color: #1e1f26;
    display: inline-block;
    margin-right: .25rem
}

.ItemTags_tag-haU_P:focus,
.ItemTags_tag-haU_P:hover {
    background: #5a5f73;
    color: #c7c9d3
}

.ItemDetailsDescription_desc-10R0b {
    margin-bottom: 1rem;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

.ItemDetailsDescription_desc-10R0b hr {
    margin: 1rem 0;
    border-top: 1px solid #444857
}

.ItemDetailsDescription_desc-10R0b hr+hr {
    display: none
}

.ItemDetailsShare_root-Gptjf {
    background: #1e1f26;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    font-size: .875rem;
    position: relative
}

.ItemDetailsShare_root-Gptjf .pick-button {
    width: 30px;
    height: 20px;
    flex: 0 0 auto;
    margin: 1px auto
}

@media (min-width:831px) {
    .ItemDetailsShare_root-Gptjf .pick-button {
        position: absolute;
        left: -19px;
        top: 0;
        bottom: 0;
        margin: auto
    }
}

.ItemDetailsShare_root-Gptjf>span {
    display: inline-block;
    color: #717790;
    text-transform: uppercase;
    flex: 1;
    margin-right: .5rem;
    text-align: center
}

@media (max-width:550px) {
    .ItemDetailsShare_root-Gptjf {
        flex-direction: column
    }
    .ItemDetailsShare_root-Gptjf>span {
        margin: 0 0 .25rem
    }
    .ItemDetailsShare_root-Gptjf .ItemDetailsShare_shareButtonsContainer-1QyCk {
        flex-direction: column
    }
    .ItemDetailsShare_root-Gptjf .ItemDetailsShare_shareButtonsContainer-1QyCk>* {
        border-radius: 3px;
        margin: 1px 0;
        border: none
    }
}

.ItemDetailsShare_shareButtonsContainer-1QyCk {
    display: flex;
    flex: 1
}

.ItemDetailsShare_shareButtonsContainer-1QyCk svg {
    width: 16px;
    height: 16px
}

.ItemDetailsShare_shareButtonsContainer-1QyCk>* {
    flex: 1;
    margin: 0;
    padding: 5px 8px 6px;
    border: none;
    border-left: 1px solid #2c303a;
    border-radius: 0;
    box-sizing: content-box
}

.ItemDetailsShare_shareButtonsContainer-1QyCk>:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left-color: transparent
}

.ItemDetailsShare_shareButtonsContainer-1QyCk>:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    font-size: .8rem
}

.ItemDetailsShare_shareButtonsContainer-1QyCk>:last-child svg {
    margin-right: .2rem
}

.ItemDetailsAd_ad-C4iAS {
    border-radius: 8px;
    overflow: hidden;
    border: 4px solid #131417;
    background: #1e1f26;
    margin: 0 0 2rem;
    max-width: 300px
}

.ItemDetailsAd_adImage-1lML7 {
    padding: 1rem
}

.ItemDetailsAd_adImage-1lML7 img {
    max-width: 50px;
    margin: 0 auto;
    display: block
}

.ItemDetailsAd_adText-1ZjiT {
    padding: 1rem
}

.ItemDetailsAd_pixel-1btVL {
    position: absolute;
    top: -9999px;
    left: -9999px
}

.ItemDetailsAd_company-14pwf {
    color: #fff;
    font-size: 1.2rem
}

.ItemDetailsAd_description-20kVn {
    color: #aaaebc
}

.ItemStatAvatar_root-31OaP {
    z-index: 1;
    display: inline-block;
    width: 35px;
    height: 35px;
    position: relative;
    margin: 0 5px 5px 0;
    line-height: 1;
    transition: z-index .3s linear
}

.ItemStatAvatar_root-31OaP>img {
    background: #000;
    border-radius: 3px;
    width: 35px;
    height: 35px
}

.ItemStatAvatar_hoverContent-2CVdj {
    position: absolute;
    top: 75%;
    left: -80px;
    right: -80px;
    text-align: center;
    opacity: 0;
    transform: translateY(5px);
    transform-origin: top center;
    transition: .3s ease-in;
    pointer-events: none
}

.ItemStatAvatar_hoverContentWrap-_fmD- {
    display: inline-block;
    border-radius: 3px;
    padding: .25em .5em;
    background: #000;
    color: #fff;
    line-height: 1.25;
    max-width: 200px;
    margin: 0 auto
}

.ItemStatAvatar_hoverContentWrap-_fmD- svg {
    display: inline-block;
    vertical-align: -.1em;
    width: 1em;
    height: .8em;
    margin-left: .25em;
    fill: #fff;
    fill: currentColor
}

.ItemStatAvatar_root-31OaP:focus,
.ItemStatAvatar_root-31OaP:hover {
    z-index: 3;
    transition-duration: 0s
}

.ItemStatAvatar_root-31OaP:focus .ItemStatAvatar_hoverContent-2CVdj,
.ItemStatAvatar_root-31OaP:hover .ItemStatAvatar_hoverContent-2CVdj {
    opacity: 1;
    transform: none;
    transition-timing-function: ease-out
}

.ItemStatAvatar_root-31OaP:focus .ItemStatAvatar_hoverContentWrap-_fmD-,
.ItemStatAvatar_root-31OaP:hover .ItemStatAvatar_hoverContentWrap-_fmD- {
    pointer-events: auto
}

.ItemStatAvatar_root-31OaP[focus-within] {
    z-index: 3;
    transition-duration: 0s
}

.ItemStatAvatar_root-31OaP:focus-within {
    z-index: 3;
    transition-duration: 0s
}

.ItemStatAvatar_root-31OaP[focus-within] .ItemStatAvatar_hoverContent-2CVdj {
    opacity: 1;
    transform: none;
    transition-timing-function: ease-out
}

.ItemStatAvatar_root-31OaP:focus-within .ItemStatAvatar_hoverContent-2CVdj {
    opacity: 1;
    transform: none;
    transition-timing-function: ease-out
}

.ItemStatAvatar_root-31OaP[focus-within] .ItemStatAvatar_hoverContentWrap-_fmD- {
    pointer-events: auto
}

.ItemStatAvatar_root-31OaP:focus-within .ItemStatAvatar_hoverContentWrap-_fmD- {
    pointer-events: auto
}

.itemDetailsStats_stat-bJ2rD {
    margin-bottom: 1rem;
    clear: both
}

.itemDetailsStats_statTitle-2bHRf {
    color: #b7bbc8;
    font-size: 1rem;
    text-transform: none;
    margin-bottom: .5rem
}

.itemDetailsStats_statTitle-2bHRf svg {
    fill: #b7bbc8;
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    margin-right: .25em
}

.itemDetailsStats_statData-3xsrZ {
    padding-left: 1.5em;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.itemDetailsStats_count-2QgS8 {
    color: #fff
}

.itemDetailsStats_moreStatsCount-3pG-d {
    color: #717790;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer
}

.itemDetailsStats_moreStatsCount-3pG-d:hover {
    color: #fff
}

.ItemDetailsExpandedStatsList_root-3G5eu {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10
}

.ItemDetailsExpandedStatsList_overlay-1SYjs {
    background: #000;
    opacity: .7;
    position: absolute;
    width: 100%;
    height: 100%
}

.ItemDetailsExpandedStatsList_content-3G8-l {
    max-width: 400px;
    width: 90%;
    margin: 20px auto;
    background: #2c303a;
    position: relative;
    padding: 20px;
    border-radius: 4px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden
}

.ItemDetailsExpandedStatsList_content-3G8-l::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.ItemDetailsExpandedStatsList_content-3G8-l::-webkit-scrollbar-thumb {
    background: #717790
}

.ItemDetailsExpandedStatsList_content-3G8-l::-webkit-scrollbar-track {
    background: none
}

.ItemDetailsExpandedStatsList_list-2L7A0 {
    list-style: none
}

.ItemDetailsExpandedStatsList_list-2L7A0 li {
    display: flex;
    margin: 6px 0
}

.ItemDetailsExpandedStatsList_list-2L7A0 li>a:not([class*=fork]):first-child {
    flex: 0 0 35px
}

.ItemDetailsExpandedStatsList_user-1zBqu {
    color: #aaaebc;
    vertical-align: top;
    line-height: 35px;
    margin-left: 8px
}

.ItemDetailsExpandedStatsList_user-1zBqu em {
    color: #fff;
    font-weight: 700;
    font-style: normal
}

.ItemDetailsExpandedStatsList_hoverContent-2EFgm {
    left: 10px;
    right: 10px
}

.ItemDetailsExpandedStatsList_owner-2eaIz,
.ItemDetailsExpandedStatsList_title-2hCe5,
.ItemDetailsExpandedStatsList_user-1zBqu {
    display: block;
    width: calc(100% - 70px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.ItemDetailsExpandedStatsList_title-2hCe5 {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4
}

.ItemDetailsLicense_root-2ETco {
    border-top: 1px solid #444857;
    padding: 1.5rem 2rem 0;
    margin: 0 -2rem
}

.ItemDetailsLicense_heading-23qC2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem
}

.ItemDetailsLicense_title-3yAc7 {
    text-transform: none;
    margin-bottom: 0;
    font-size: 1rem
}

.ItemDetailsLicense_copy-3NDEB {
    font-size: .9rem;
    color: #717790;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all .2s ease
}

.ItemDetailsLicense_copy-3NDEB svg {
    fill: #717790;
    width: 1em;
    height: 1em;
    margin-right: .25em;
    transition: all .2s ease
}

.ItemDetailsLicense_copy-3NDEB:focus,
.ItemDetailsLicense_copy-3NDEB:hover {
    color: #0ebeff
}

.ItemDetailsLicense_copy-3NDEB:focus svg,
.ItemDetailsLicense_copy-3NDEB:hover svg {
    fill: #0ebeff
}

.ItemDetailsLicense_copied-gz368,
.ItemDetailsLicense_copied-gz368:focus,
.ItemDetailsLicense_copied-gz368:hover {
    color: #fff
}

.ItemDetailsLicense_copied-gz368 svg,
.ItemDetailsLicense_copied-gz368:focus svg,
.ItemDetailsLicense_copied-gz368:hover svg {
    fill: #fff
}

.ItemDetailsLicense_license-2HXq1 {
    font-size: .8rem;
    padding: 1rem;
    background: #1e1f26;
    border-radius: 4px;
    max-height: 9em;
    overflow: auto;
    white-space: pre-wrap;
    margin: 0
}

.ItemDetailsLicense_license-2HXq1::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.ItemDetailsLicense_license-2HXq1::-webkit-scrollbar-thumb {
    background: #717790
}

.ItemDetailsLicense_license-2HXq1::-webkit-scrollbar-track {
    background: none
}

.ItemDetailsMetaData_root-24Ajc {
    margin: 2rem 0;
    padding: 0
}

@media (max-width:550px) {
    .ItemDetailsMetaData_root-24Ajc {
        margin: 0 0 2rem
    }
}

.ItemDetailsMetaData_meta-3n3NY {
    margin-bottom: 1rem
}

.ItemDetailsMetaData_meta-3n3NY dt {
    display: block;
    color: #b7bbc8;
    font-size: .9rem;
    font-weight: 400
}

.ItemDetailsMetaData_meta-3n3NY dd {
    font-size: 1rem;
    font-weight: 700
}

.ItemDetailsMetaData_forkParent-1RSmo {
    display: grid;
    grid-template-columns: 35px auto;
    grid-template-rows: auto auto;
    line-height: 1;
    align-items: center;
    grid-gap: 0 .5rem;
    margin: .25rem 0;
    color: #fff
}

.ItemDetailsMetaData_forkParent-1RSmo span {
    display: block;
    line-height: 1.1;
    margin-bottom: .25rem
}

.ItemDetailsMetaData_forkParent-1RSmo small {
    font-weight: 400
}

.ItemDetailsMetaData_forkParent-1RSmo img {
    display: block;
    grid-column: 1;
    grid-row: 1/-1;
    border-radius: 4px;
    overflow: hidden;
    margin-right: .5rem
}

.ItemDetailsPreview_preview-3qsMK {
    position: relative
}

.ItemDetailsPreview_preview-3qsMK iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ItemDetailsPreview_resizer-bhiDd {
    height: 50vh
}

.PopupAd_adSpace-3DsHu {
    display: flex;
    height: 100px;
    pointer-events: none
}

.PopupAd_adInner-tQHHh {
    position: relative;
    padding: 5px 20px
}

.PopupAd_ad-2ubEY {
    pointer-events: auto;
    position: relative;
    width: 100%;
    z-index: 2;
    background: #1e1f26;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.PopupAd_ad-2ubEY .carbon-poweredby {
    display: block;
    position: absolute;
    bottom: 5px;
    right: 0
}

.PopupAd_ad-2ubEY .carbon-wrap {
    display: flex;
    align-items: center
}

.PopupAd_ad-2ubEY .carbon-img {
    margin: 0 1rem 0 0;
    display: block
}

.PopupAd_ad-2ubEY .carbon-img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.PopupAd_ad-2ubEY .carbon-img img {
    border-radius: 4px;
    max-width: 110px!important
}

.PopupAd_ad-2ubEY .carbon-text {
    font-size: 1rem;
    max-width: 320px;
    margin: 0
}

.PopupAd_searchAd-2Insc {
    padding: 1rem;
    display: flex;
    align-items: center;
    color: #fff
}

.PopupAd_adImage-1M7eD {
    width: 160px;
    height: 60px;
    padding: 10px;
    margin-right: 15px
}

.PopupAd_adImage-1M7eD img {
    display: block;
    height: 100%;
    margin: 0 auto
}

.PopupAd_adText-2Uuol {
    max-width: 420px;
    margin-right: 15px
}

.PopupAd_adText-2Uuol strong {
    display: block;
    margin: 0 0 .2rem
}

.PopupAd_adText-2Uuol small {
    display: block;
    line-height: 1.4;
    color: #aaaebc
}

.SiteFooterStyles_promoFooter-3O-ml {
    background: #0a0a0c;
    padding: 4rem 0 2rem;
    font-size: .9rem
}

.SiteFooterStyles_promoFooter-3O-ml p {
    color: #9b9dad
}

.SiteFooterStyles_footerGrid-3Up89 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 300px;
    grid-gap: 2rem
}

@media (max-width:1000px) {
    .SiteFooterStyles_footerGrid-3Up89 {
        grid-template-columns: 1fr 1fr 1fr
    }
}

@media (max-width:650px) {
    .SiteFooterStyles_footerGrid-3Up89 {
        grid-template-columns: 1fr 1fr
    }
}

.SiteFooterStyles_promoFooterPro-HXwja .SiteFooterStyles_footerGrid-3Up89 {
    grid-template-columns: 1fr 1fr 1fr
}

@media (max-width:650px) {
    .SiteFooterStyles_promoFooterPro-HXwja .SiteFooterStyles_footerGrid-3Up89 {
        grid-template-columns: 1fr
    }
}

.SiteFooterStyles_job-3vQN2 {
    display: block;
    padding: .25rem 0
}

@media (max-width:1000px) {
    .SiteFooterStyles_ad-3I4Zj {
        display: none
    }
}

@media (max-width:650px) {
    .SiteFooterStyles_hang-qIh3W {
        display: none
    }
}

.SiteFooterStyles_linkFooter-1oVdL {
    background: #010101;
    padding: 40px 0;
    position: relative
}

.SiteFooterStyles_linkFooter-1oVdL nav {
    margin: 0 0 8px
}

.SiteFooterStyles_linkFooter-1oVdL h4 {
    color: #fff;
    margin-right: 16px;
    display: inline;
    text-transform: none;
    font-size: inherit
}

.SiteFooterStyles_linkFooter-1oVdL a {
    color: #9b9dad;
    margin-right: 8px
}

@media (max-width:550px) {
    .SiteFooterStyles_linkFooterInside-1gCxR {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem
    }
    .SiteFooterStyles_linkFooterInside-1gCxR nav a {
        display: block
    }
}

.SiteFooterStyles_copyright-3gLgd {
    position: absolute;
    right: 20px;
    top: 0;
    text-align: right;
    font-size: .8rem;
    color: #9b9dad
}

.SiteFooterStyles_copyright-3gLgd p {
    margin: 0
}

.SiteFooterStyles_copyright-3gLgd>h1>a {
    margin: 0;
    padding: 0!important
}

@media (max-width:830px) {
    .SiteFooterStyles_copyright-3gLgd {
        position: static;
        text-align: left
    }
}

.FooterAd_root-1wuVr {
    white-space: normal;
    align-self: flex-end;
    flex: 1
}

@media (max-height:440px),
(max-width:767px) {
    .FooterAd_root-1wuVr {
        display: none
    }
}

.FooterAd_adWrapper-1mgNF {
    max-width: 28em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: #131417;
    margin: 0 auto;
    position: relative;
    bottom: -9px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .1)
}

.FooterAd_adWrapperWide-3MVNp {
    max-width: 80vw
}

.FooterAd_searchAd-3MV_e {
    display: flex;
    overflow: hidden
}

.FooterAd_company-2Iy4W {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    font-weight: 700;
    font-size: .87rem;
    color: #fff
}

.FooterAd_image-20y-l {
    flex: 0 0 42px;
    padding: 5px;
    display: grid;
    border-top-left-radius: 4px;
    overflow: hidden;
    align-items: center;
    justify-items: center;
    place-items: center
}

.FooterAd_image-20y-l>img {
    display: block
}

.FooterAd_text-2_g_8 {
    padding: .6rem .7rem;
    font-size: .77rem;
    line-height: 1.25;
    color: #aaaebc;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    flex: auto
}

.FooterAd_description-zYa1A {
    margin-top: .25rem
}

.FooterAd_closeButton-1U1IY {
    position: absolute;
    bottom: 0;
    left: 100%;
    background: linear-gradient(90deg, #131417, #444857 5px);
    border: 0;
    padding: .3rem .35rem;
    border-top-right-radius: 4px
}

.FooterAd_closeButton-1U1IY svg {
    width: 9px;
    height: 9px;
    fill: #fff
}

.FooterAd_closeButton-1U1IY:focus,
.FooterAd_closeButton-1U1IY:hover {
    outline: 0;
    background: linear-gradient(90deg, #2c303a, #5a5f73 5px)
}

.FooterAd_pixel-rqi9q {
    width: 1px;
    height: 1px;
    position: absolute;
    top: -9999px;
    left: -9999px
}

.EditorStatus_editorState-23I3v {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 .5rem;
    height: 20px;
    min-width: 205px;
    padding: 3px 0
}

.EditorStatus_editorState-23I3v svg {
    width: 14px;
    height: 14px;
    margin-left: .25rem
}

.EditorStatus_editorState-23I3v[data-state=ACTIVE] svg {
    -webkit-animation: EditorStatus_spin-3xd-_ 3s linear infinite;
    animation: EditorStatus_spin-3xd-_ 3s linear infinite;
    fill: #0ebeff
}

.EditorStatus_editorState-23I3v[data-state=SUCCESS] svg {
    fill: #47cf73
}

.EditorStatus_editorState-23I3v[data-state=ERROR] svg {
    fill: #ff3c41
}

@-webkit-keyframes EditorStatus_spin-3xd-_ {
    to {
        transform: rotate(1turn)
    }
}

@keyframes EditorStatus_spin-3xd-_ {
    to {
        transform: rotate(1turn)
    }
}

.EditorStatus_text-3wSUC {
    font-size: .8rem;
    color: #c7c9d3
}

.ExportPanel_root-2-_BS {
    padding-bottom: 1rem
}

.ExportPanel_actions-3Kgqa {
    list-style: none
}

.ExportPanel_actions-3Kgqa:last-child {
    margin-bottom: 0
}

.ExportPanel_actions-3Kgqa .button {
    background: #e7e7e7;
    color: #1e1f26;
    font-weight: 700!important;
    padding: 5px;
    display: block;
    text-align: left;
    border: 0
}

.ExportPanel_actions-3Kgqa .button svg {
    fill: #1e1f26;
    margin-right: 7px
}

.ExportPanel_actions-3Kgqa .button:focus,
.ExportPanel_actions-3Kgqa .button:hover {
    background: #717790;
    color: #fff
}

.ExportPanel_actions-3Kgqa .button:focus svg,
.ExportPanel_actions-3Kgqa .button:hover svg {
    fill: #fff
}

.ExportPanel_fancyProArea-2Axi4 {
    margin: 20px -15px -50px;
    padding: 35px;
    background: #fff8d9;
    position: relative;
    border-top: 2px solid #ffdd40
}

.ExportPanel_fancyProArea-2Axi4 [class*=zipStatus] {
    background: #fff8d9;
    z-index: 2
}

.ExportPanel_badgePro-3S1Gy {
    position: absolute;
    top: -8px;
    left: 15px;
    font-size: 90%;
    z-index: 3;
    padding: 2px 5px 2px 6px
}

.FeatureNotifier_root-2Rijo {
    position: relative;
    display: inline-block;
    vertical-align: 1px;
    width: 8px;
    height: 8px;
    margin: 0 6px;
    background: #ffdd40;
    color: transparent;
    border-radius: 100%;
    flex: 0 0 auto;
    -webkit-animation: FeatureNotifier_feature-notifier-fade-in-heRnk 1s linear;
    animation: FeatureNotifier_feature-notifier-fade-in-heRnk 1s linear;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .4)
}

.FeatureNotifier_root-2Rijo:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #f9e9a2;
    border-radius: 100%;
    opacity: .5;
    transform: translate(-50%, -50%) scale(3);
    -webkit-animation: FeatureNotifier_feature-notifier-pulse-1MDQj 3s infinite;
    animation: FeatureNotifier_feature-notifier-pulse-1MDQj 3s infinite
}

@-webkit-keyframes FeatureNotifier_feature-notifier-fade-in-heRnk {
    0% {
        opacity: 0
    }
}

@keyframes FeatureNotifier_feature-notifier-fade-in-heRnk {
    0% {
        opacity: 0
    }
}

@-webkit-keyframes FeatureNotifier_feature-notifier-pulse-1MDQj {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .8
    }
    70% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3)
    }
    to {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0
    }
}

@keyframes FeatureNotifier_feature-notifier-pulse-1MDQj {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: .8
    }
    70% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3)
    }
    to {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0
    }
}

.exportZip_zipStatus-209L7 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: #fff;
    color: #131417;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.exportZip_zipStatus-209L7:last-child {
    margin-bottom: 0
}

.exportZip_zipStatus-209L7 p {
    margin-bottom: .5em
}

.exportZip_zipStatus-209L7 a {
    color: #aaaebc
}

.exportZip_zipStatus-209L7 a:focus,
.exportZip_zipStatus-209L7 a:hover {
    color: #d5d7de
}

.exportZip_text-2yJXp {
    text-align: center;
    margin-top: 1rem
}

.exportZip_unsavedAction-SaXD6 {
    color: #000!important;
    font: inherit;
    font-weight: 700;
    cursor: pointer
}

.exportZip_spinWrap-2RtnZ {
    width: 16px;
    height: 16px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    top: -1px
}

.exportZip_spinning-2EANX {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    transform-origin: 50% 50%;
    -webkit-animation: exportZip_spin-me-right-round-baby-2GauN 4s linear infinite forwards;
    animation: exportZip_spin-me-right-round-baby-2GauN 4s linear infinite forwards
}

@-webkit-keyframes exportZip_spin-me-right-round-baby-2GauN {
    to {
        transform: rotate(1turn)
    }
}

@keyframes exportZip_spin-me-right-round-baby-2GauN {
    to {
        transform: rotate(1turn)
    }
}

.exportZip_close-ImWRR {
    border: 0;
    background: none;
    position: absolute;
    top: 14px;
    right: 10px;
    cursor: pointer;
    text-align: left;
    width: 16px
}

.exportZip_close-ImWRR svg {
    transform: rotate(90deg);
    fill: #868ca0;
    width: 14px;
    height: 14px
}

.PenCommentsModal_root-a2DFp {
    position: fixed;
    top: 70px;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    overflow-y: auto;
    z-index: 210;
    max-width: 800px;
    max-height: 90vh;
    margin: auto
}

.PenCommentsModal_root-a2DFp::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

.PenCommentsModal_root-a2DFp::-webkit-scrollbar-thumb {
    background: #717790
}

.PenCommentsModal_root-a2DFp::-webkit-scrollbar-track {
    background: none
}

.PenCommentsModal_root-a2DFp>div {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
}

.BlockedUser_blockedUsers-2X5VV {
    list-style-type: none
}

.BlockedUser_blockedUser-2Yeqd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #444857;
    padding: 1rem 0
}

.BlockedUser_blockedUser-2Yeqd:last-child {
    border-bottom: none
}

.BlockedUser_blockedUser-2Yeqd button {
    margin-right: 0
}

.BlockedUser_userInfo-Yp3mh {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 1rem;
    color: inherit;
    line-height: 1.4
}

.BlockedUser_userInfo-Yp3mh img {
    width: 50px;
    border-radius: 3px;
    margin-right: 1rem
}

.BlockedUser_userInfo-Yp3mh .BlockedUser_names-1xQt3 strong {
    color: #fff
}

.PaginationContainer_debug-1EpOh {
    font-family: monospace;
    text-align: center;
    align-self: center;
    justify-self: center;
    pointer-events: none;
    z-index: 2;
    margin: auto;
    background: rgba(0, 0, 0, .4)
}

.PaginationContainer_pagination-39vZR {
    grid-row: 2;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 3rem
}

.PaginationContainer_next-1r-_8,
.PaginationContainer_previous-3oq4n {
    opacity: .4;
    position: relative;
    transition: opacity .2s linear
}

.PaginationContainer_next-1r-_8:after,
.PaginationContainer_previous-3oq4n:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    cursor: pointer
}

.PaginationContainer_next-1r-_8:focus,
.PaginationContainer_next-1r-_8:hover,
.PaginationContainer_previous-3oq4n:focus,
.PaginationContainer_previous-3oq4n:hover {
    opacity: .8
}

.PaginationContainer_previous-3oq4n {
    transform: translateX(-100%)
}

.PaginationContainer_next-1r-_8 {
    transform: translateX(100%)
}

.BlockedUserList_blockedUsers-3FinT {
    list-style-type: none
}

.BlockedUserList_noBlocks-2oVtk {
    display: block;
    text-align: center;
    margin: 2rem auto
}

.PrivateByDefaultToggle_root-3defx {
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    position: relative;
    background: #444857;
    padding: 1rem
}

.PrivateByDefaultToggle_root-3defx+h3 {
    margin-top: 2rem
}

.PrivateByDefaultToggle_root-3defx .help-flyout-link {
    position: relative;
    top: 0
}

p+.PrivateByDefaultToggle_root-3defx {
    margin-top: -.75rem
}

.PrivateByDefaultToggle_showDetails-15xVk {
    background: transparent;
    padding: 0;
    justify-content: space-between;
    grid-template-columns: 40px 1fr auto auto;
    grid-gap: 1rem
}

.PrivateByDefaultToggle_showDetails-15xVk img {
    max-width: 40px;
    border-radius: 3px
}

.PrivateByDefaultToggle_title-3nclx {
    font-weight: 700
}

.SettingsPrivacy_padGridRight-2LA5a {
    padding-right: 20px
}

.EmailNotificationsModuleItem_root-3zr8u {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 1fr 110px;
    grid-gap: 1rem;
    margin: 1rem 0;
    position: relative;
    background: #444857;
    padding: 1rem;
    border-radius: 4px
}

.EmailNotificationsModuleItem_root-3zr8u+h3 {
    margin-top: 2rem
}

.EmailNotificationsModuleItem_title-3HTTd {
    font-weight: 700;
    font-size: 1.1rem
}

.EmailNotificationsModuleItem_desc-3OETO {
    color: #b7bbc8
}

.PostDetails_content-3XvjI {
    max-width: none
}

.tabs {
    padding-bottom: 40px;
    position: relative
}

.tabs>h1 {
    display: inline-block;
    margin: 0 15px 10px 0
}

.tabs>div {
    clear: both;
    display: none
}

.tabs>div.active {
    display: block
}

.tabs .gap {
    display: inline-block;
    width: 20px
}

.explore-tabs {
    margin: 0 0 12px 0;
    position: relative;
    font-size: 0;
    white-space: nowrap
}

.explore-tabs a,
.explore-tabs span {
    font-size: 1.1rem;
    display: inline-block;
    color: #9b9dad;
    padding: 3px 14px 5px 0
}

@media (max-width: 767px),
(max-height: 440px) {
    .explore-tabs a,
    .explore-tabs span {
        padding-right: 10px
    }
}

.explore-tabs a.nav-sep-before,
.explore-tabs span.nav-sep-before {
    border-left: 1px solid #5a5f73;
    margin-left: 10px;
    padding-left: 18px
}

.organize-grid .explore-tabs a,
.organize-grid .explore-tabs span {
    padding: 6px 8px
}

.explore-tabs a:hover,
.explore-tabs a:focus {
    color: #c7c9d3
}

.explore-tabs a.active {
    color: white;
    font-weight: 700
}

.error .explore-tabs a {
    color: black
}

.explore-tabs .mobile-trigger {
    font-size: 1rem;
    display: none
}

.explore-tabs .nav-right {
    position: absolute;
    right: 0;
    top: 0
}

.explore-tabs .nav-right a {
    padding-right: 0
}

.explore-tabs .nav-right .jobs-link {
    color: #81e058
}

@media (max-width: 550px) {
    .explore-tabs:not(.no-mobile-nav) {
        background: -webkit-gradient(linear, left top, left bottom, from(#2c303a), to(#1e1f26));
        background: linear-gradient(#2c303a, #1e1f26);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
        border-bottom: 0;
        height: 33px;
        text-align: left !important
    }
    .explore-tabs:not(.no-mobile-nav) .width-wrapper {
        position: static;
        padding: 0
    }
    .explore-tabs:not(.no-mobile-nav).open {
        height: auto
    }
    .explore-tabs:not(.no-mobile-nav).open a {
        position: relative
    }
    .explore-tabs:not(.no-mobile-nav).open .mobile-trigger {
        width: 25px
    }
    .explore-tabs:not(.no-mobile-nav) .mobile-trigger {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        padding: 5px 10px 0 0;
        height: 100%;
        z-index: 2;
        text-align: right
    }
    .explore-tabs:not(.no-mobile-nav) .mobile-trigger svg {
        pointer-events: none;
        fill: #9b9dad;
        width: 13px;
        height: 13px;
        display: inline-block
    }
}

@media (max-width: 550px) and (max-width: 550px) {
    .explore-tabs:not(.no-mobile-nav) .mobile-trigger {
        top: 3px
    }
}

@media (max-width: 550px) {
    .explore-tabs:not(.no-mobile-nav) a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 5px 0 4px 8px
    }
    .explore-tabs:not(.no-mobile-nav) a:hover {
        background: #131417;
        color: white
    }
    .explore-tabs:not(.no-mobile-nav) a.active {
        border-bottom: 0;
        top: auto;
        z-index: 1;
        background: -webkit-gradient(linear, left top, left bottom, from(#2c303a), to(#1e1f26));
        background: linear-gradient(#2c303a, #1e1f26)
    }
}

.explore-tabs.no-mobile-nav {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.explore-tabs.no-mobile-nav::-webkit-scrollbar {
    width: 0;
    height: 0
}

.explore-tabs.no-mobile-nav::-webkit-scrollbar-thumb {
    background: none
}

.explore-tabs.no-mobile-nav::-webkit-scrollbar-track {
    background: none
}

.custom-select-wrap {
    border-radius: 3px;
    position: relative;
    height: 42px;
    background: #fff;
}

.custom-select-wrap select {
    z-index: 0;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 0 24px 0 12px;
    height: 42px;
    line-height: 42px;
    font-size: 1.1rem;
    color: #5a5f73;
    background: transparent
}

.custom-select-wrap .select-icon {
    z-index: 0;
    padding: 1px;
    position: absolute;
    width: 18px;
    height: 18px;
    right: 6px;
    top: 12px;
    pointer-events: none;
}

.custom-select-wrap .select-icon svg {
    width: 14px;
    height: 30px;
    position: absolute;
    fill: #5a5f73;
    padding: 1px;
}

.custom-select-wrap .select-icon svg:first-child {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: -10px;
}

.dashboard-controls {
    margin: 0 auto 2rem;
    background: #2c303a
}

.controls-separator {
    display: block;
    height: 0;
    border-top: solid 1px #0a0a0c;
    margin: 0
}

.content-controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0.5rem;
}

@media (max-width: 1040px) {
    .content-controls {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.content-controls label {
    cursor: pointer
}

.content-controls .content-control {
    padding: 0.5rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    background: #1e1f26;
    border-radius: 4px;
    margin: 3px;
    padding: 0 0 0 0.75rem;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    -webkit-transition: 0.3s ease background;
    transition: 0.3s ease background
}


.content-controls .content-control-date {
    padding: 0.5rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    background: #1e1f26;
    border-radius: 4px;
    margin: 3px;
    padding: 0 0 0 0.75rem;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    -webkit-transition: 0.3s ease background;
    transition: 0.3s ease background;
}



@media (max-width: 1040px) {
    .content-controls .content-control.sort-by {
        min-width: 14rem
    }
    .content-controls .content-control.preview-type {
        min-width: 16rem
    }
}

@media (min-width: 1040px) {
    .content-controls .content-control {
        -webkit-box-flex: 1;
        -webkit-flex: 1 2 25%;
        -ms-flex: 1 2 25%;
        /* flex: 1 2 3%; */
        /* max-width: 25em; */
    }
}

.content-controls .content-control.search-clear {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.content-controls .content-control.search-clear>:last-child {
    display: block;
    margin: auto 0
}

.content-controls .content-control.search-forks {
    padding: 0 1rem
}

.content-controls .content-control.search-forks input {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.content-controls .content-control.search-forks .control-input {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: -1px
}

.content-controls .content-control.search-clear {
    padding-left: 0;
	background: linear-gradient(-270deg, #517FA4 0%, #243949 100%);
}

.content-controls .content-control.search-clear .control-label {
    width: 0;
    height: 0;
    margin: 0
}

.content-controls .content-control.search-clear .search-clear-button {
padding: 6px 12px 8px;
    font-size: 1em;
    display: block;
    background: linear-gradient(-270deg, #517FA4 0%, #243949 100%);
    border: 1rem;
    background: transparent;
    cursor: grab;
    color: white;
	outline: none;
}

@media (max-width: 830px) {
    .content-controls .content-control.search-clear .search-clear-button {
        padding: 8px 12px
    }
}

.content-controls .content-control:hover {
    background: #0a0a0c;
    background: #243949;
}

.content-controls .content-control.order-by,
.content-controls .content-control.search-forks,
.content-controls .content-control.sort-by,
.content-controls .content-control.search {
    grid-template-columns: 4.0rem 1fr;
}

.content-controls .content-control.view-filter,
.content-controls .content-control.tag-filter {
    grid-template-columns: 2rem 1fr
}

.content-controls .content-control.display-order {
    grid-template-columns: 7.5rem 1fr;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto
}

.content-controls .content-control.search-forks {
    max-width: 13rem
}

.content-controls .content-control .control-label {
    color: #717790
}

.content-controls .content-control .custom-select-wrap {
    background: transparent;
    margin-top: -1px;
    height: 35px;
}

.content-controls .content-control .custom-select-wrap select {
    font-size: 1rem;
    height: 35px;
    line-height: 33px;
    color: #fff
}

.content-controls .content-control .custom-select-wrap select option {
    color: #000
}

.content-controls .content-control .custom-select-wrap .select-icon {
    top: 7px;
}

.content-controls .content-control .custom-select-wrap {
    background: transparent
}

.content-controls .display-type-wrap,
.content-controls .display-order {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.6%;
    -ms-flex: 0 0 16.6%;
    flex: 0 0 16.6%
}

.content-controls .display-type-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    padding: 0 1rem
}

.content-controls .display-type-wrap .display-type-button {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.content-controls .display-type-wrap .display-type-button:first-child .button {
    margin-left: 0.5rem
}

.content-controls .display-type-wrap .display-type-button:last-child {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.content-controls .display-type-wrap .display-type-button:last-child .button {
    margin-right: 0.5rem;
    border-radius: 0 2px 2px 0
}

.content-controls .display-type-wrap .display-type-button:last-child .button svg {
    width: 14px;
    height: 15px
}

.content-controls .display-type-wrap .display-type-button .button {
    margin: 0
}

.content-controls .display-order .flex-button-wrapper,
.content-controls .display-type-wrap .flex-button-wrapper {
    height: 25px
}

.content-controls .display-order .button,
.content-controls .display-type-wrap .button {
    padding: 2px 7px;
    border-radius: 2px 0 0 2px;
    line-height: 1
}

.content-controls .display-order .button svg,
.content-controls .display-type-wrap .button svg {
    width: 15px;
    height: 15px;
    opacity: 0.5
}

.content-controls .display-order .button:hover svg,
.content-controls .display-order .button:active svg,
.content-controls .display-order .button.active svg,
.content-controls .display-type-wrap .button:hover svg,
.content-controls .display-type-wrap .button:active svg,
.content-controls .display-type-wrap .button.active svg {
    opacity: 0.99
}

.content-controls .flex-button-wrapper>:first-child {
    margin-right: 0;
	padding: 0!important;
}

.content-controls .flex-button-wrapper>:last-child {
    margin-left: 0
}

.content-controls .button-dark {
    background: #5a5f73
}

.content-controls .button-dark.flipped {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.content-controls .control {
    position: relative
}

.content-controls .control-label {
    text-transform: uppercase;
    display: block;
    color: #b7bbc8;
    /* font-size: 0.8rem; */
    height: 40px;
    line-height: 41px;
    width: 100%;
}
.content-controls .control-label-end {
    text-transform: uppercase;
    display: block;
    color: #b7bbc8;
    /* font-size: 0.8rem; */
    height: 40px;
    line-height: 41px;
    width: 25%;
}
.content-controls .tag-search {
    margin-top: -1px;
    font-size: 1rem;
    width: 100%;
    height: 40px;
    background: transparent;
    border-width: 0;
    color: white
}

.content-controls .tag-search:focus {
    background: transparent
}

.content-controls .tag-search:focus::-webkit-input-placeholder {
    color: #b7bbc8
}

.content-controls .tag-search:focus::-moz-placeholder {
    color: #b7bbc8
}

.content-controls .tag-search:focus:-ms-input-placeholder {
    color: #b7bbc8
}

.content-controls .tag-search:focus::-ms-input-placeholder {
    color: #b7bbc8
}

.content-controls .tag-search:focus::placeholder {
    color: #b7bbc8
}

.content-controls .tag-search::-webkit-input-placeholder {
    color: white;
    font-size: 1rem;
    -webkit-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.content-controls .tag-search::-moz-placeholder {
    color: white;
    font-size: 1rem;
    -moz-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.content-controls .tag-search:-ms-input-placeholder {
    color: white;
    font-size: 1rem;
    -ms-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.content-controls .tag-search::-ms-input-placeholder {
    color: white;
    font-size: 1rem;
    -ms-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.content-controls .tag-search::placeholder {
    color: white;
    font-size: 1rem;
    -webkit-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.content-controls .tag-clear {
    width: 26px;
    height: 42px;
    position: absolute;
    border: none;
    fill: #5a5f73;
    right: 8px;
    background: transparent;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px
}

.content-controls .tag-clear:hover {
    cursor: pointer
}

.content-controls .tag-clear:hover svg {
    fill: white
}

.content-controls .tag-clear.focused {
    fill: #fff
}

.content-controls .tag-clear .icon-x {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 6px;
    top: 16px
}

.content-controls .tag-filter {
    position: relative
}

.content-controls .tag-results {
    list-style: none;
    background: #0a0a0c;
    color: #d5d7de;
    border-radius: 0 0 6px 6px;
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    z-index: 2;
    max-height: 300px;
    overflow: auto
}

.content-controls .tag-results li {
    padding: 0 12px 0 50px;
    height: 42px;
    line-height: 42px;
    font-size: 1.1rem;
    cursor: pointer;
    border-bottom: 1px solid #1e1f26;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-controls .tag-results li:last-child {
    border-bottom: none
}

.content-controls .tag-results li.loading,
.content-controls .tag-results li.no-tags {
    color: #717790;
    font-size: 1rem;
    font-weight: bold
}

.content-controls .tag-results li.selected,
.content-controls .tag-results li:hover {
    background: #444857;
    color: white
}

.control.search {
    width: auto;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
    min-width: 16em
}

.control.search .search-submit {
    margin-right: 0
}

.control.search>div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.control.search .search-input {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    border-width: 0;
    width: 100%;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 4px 12px;
    color: white;
    font-size: 1rem;
    margin-top: -1px;
    background: transparent
}

.control.search .search-input:focus {
    background: transparent;
    caret-color: white
}

.control.search .search-input:focus::-webkit-input-placeholder {
    color: #b7bbc8
}

.control.search .search-input:focus::-moz-placeholder {
    color: #b7bbc8
}

.control.search .search-input:focus:-ms-input-placeholder {
    color: #b7bbc8
}

.control.search .search-input:focus::-ms-input-placeholder {
    color: #b7bbc8
}

.control.search .search-input:focus::placeholder {
    color: #b7bbc8
}

.control.search .search-input::-webkit-input-placeholder {
    color: white;
    font-size: 1rem;
    -webkit-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.control.search .search-input::-moz-placeholder {
    color: white;
    font-size: 1rem;
    -moz-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.control.search .search-input:-ms-input-placeholder {
    color: white;
    font-size: 1rem;
    -ms-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.control.search .search-input::-ms-input-placeholder {
    color: white;
    font-size: 1rem;
    -ms-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.control.search .search-input::placeholder {
    color: white;
    font-size: 1rem;
    -webkit-transition: 0.1s ease color;
    transition: 0.1s ease color
}

.control.search .search-submit {
    background: #5a5f73;
    color: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 8px 10px;
    height: 40px;
    line-height: 1.25em;
}


@media screen and (max-width: 1040px) {
    .control.search .search-submit {
        padding: 9px 10px
    }
}

.flex-button-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.display-order-first {
    margin-right: 1rem
}

.content-results {
    z-index: 0;
    position: relative
}

.page-wrap-search {
    padding: 0 1rem
}

.page-wrap-search .tabs {
    margin-top: 1rem;
    padding-bottom: 0
}

@media (min-width: 831px) {
    .page-wrap-search .search-form {
        width: calc(100% - 60px);
        margin-top: -75px
    }
    body.logged-out .page-wrap-search .search-form {
        width: calc(100% - 193px)
    }
}

.search-filters {
    padding: 1rem 0.75rem 0.75rem;
    border-top: solid 4px #fff
}

.search-filters.type-pens {
    border-color: #0ebeff;
}

.search-filters.type-projects {
    border-color: #ffdd40
}

.search-filters.type-collections {
    border-color: #ae63e4
}

.search-filters.type-posts {
    border-color: #47cf73
}

.search-filters .search-filter {
    cursor: pointer;
    background: #1e1f26;
    padding: 0.5rem 0.75rem;
    color: #9b9dad;
    line-height: 1;
    -webkit-transition: 0.2s ease background;
    transition: 0.2s ease background
}

.search-filters .search-filter .icon {
    fill: currentColor;
    margin-right: 0.5rem
}

.search-filters input[type='radio'] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0.1
}

.search-filters input[type='radio']:checked+label {
    color: white;
    background: #717790;
    padding: 0.375rem 0.75rem 0.5rem
}

.search-filters input[type='radio']:focus+label {
    color: white;
    background: #717790
}

.search-filters .search-filter.active,
.search-filters .search-filter:hover,
.search-filters .search-filter:focus {
    color: #fff !important;
    background: #010101
}

.search-filters .search-filter.active.type-pens .icon,
.search-filters .search-filter:hover.type-pens .icon,
.search-filters .search-filter:focus.type-pens .icon {
    fill: #0ebeff
}

.search-filters .search-filter.active.type-projects .icon,
.search-filters .search-filter:hover.type-projects .icon,
.search-filters .search-filter:focus.type-projects .icon {
    fill: #ffdd40
}

.search-filters .search-filter.active.type-collections .icon,
.search-filters .search-filter:hover.type-collections .icon,
.search-filters .search-filter:focus.type-collections .icon {
    fill: #ae63e4
}

.search-filters .search-filter.active.type-posts .icon,
.search-filters .search-filter:hover.type-posts .icon,
.search-filters .search-filter:focus.type-posts .icon {
    fill: #47cf73
}

.search-filters .search-filter:focus {
    outline-color: rgba(14, 190, 255, 0.4);
    outline-offset: 1px;
    outline-style: auto;
    outline-width: 4px
}

.search-filters .selected.selected .icon-check {
    fill: #fff
}

.advanced-options {
    background: #2c303a;
    /* border-top: 1px solid #0a0a0c; */
    /* margin-bottom: 2rem; */
    /* background: linear-gradient(-270deg, #517FA4 0%, #243949 100%); */
}
.advanced-options-rememberMe {
    /* background: #2c303a; */
    /* border-top: 1px solid #0a0a0c; */
    margin-bottom: 1rem;
    /* background: linear-gradient(-270deg, #517FA4 0%, #243949 100%); */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: -1px;
    font-size: 0.99em;
}
.advanced-options-rememberMe  span {
    line-height: 1px;
    padding: 5px;
    font-size: 1.5rem;
    font-weight: 900;
}

.check {
  cursor: pointer;
  position: relative;
  margin: auto;
  width: 18px;
  height: 18px;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}
.check:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34,50,84,0.03);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #c8ccd4;
  stroke-width: 1.5;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease;
}
.check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}
.check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 66;
}
.check:hover:before {
  opacity: 1;
}
.check:hover svg {
  stroke: #4285f4;
}
#rememberMe:checked + .check svg {
  stroke: #4285f4;
}
#rememberMe:checked + .check svg path {
  stroke-dashoffset: 60;
  transition: all 0.3s linear;
}
#rememberMe:checked + .check svg polyline {
  stroke-dashoffset: 42;
  transition: all 0.2s linear;
  transition-delay: 0.15s;
}

.rememberMe:checked + .check svg {
  stroke: #4285f4;
}
.rememberMe:checked + .check svg path {
  stroke-dashoffset: 60;
  transition: all 0.3s linear;
}
.rememberMe:checked + .check svg polyline {
  stroke-dashoffset: 42;
  transition: all 0.2s linear;
  transition-delay: 0.15s;
}

.search-results-header {
    text-transform: uppercase;
    font-size: 1.2rem
}

@media (min-width: 831px) {
    .search-results-header {
        display: none
    }
}

.search-term {
    font-weight: bold
}

.tag-match-line {
    text-align: right;
    margin: 0 0 5px 0
}

.tag-match {
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-size: 0.8em;
    color: white;
    font-weight: normal
}

.search-results {
    padding-bottom: 75px
}

.search-results-tabs {
    background: #2c303a;
    padding: 10px;
    margin: 0;
    border-top: 5px solid #aaaebc;
    width: 100%;
    /* background: linear-gradient(-270deg, #517FA4 0%, #243949 100%); */
}

.search-results-tabs.type-projects,
.search-results-tabs.type-posts,
.search-results-tabs.type-collections {
    margin: 0 0 2rem
}

@media (max-width: 550px) {
    .search-results-tabs {
        padding: 0
    }
}

.num-found {
    text-transform: uppercase;
    font-weight: bold;
    padding: 2px 8px;
    letter-spacing: 2px;
    color: #c7c9d3
}

.search-user {
    background: black;
    padding: 10px
}

.search-user>a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.search-user .search-user-avatar {
    width: 40px;
    margin-right: 10px
}

.SearchTopics_topicTiles-3YaDQ {
    display: flex;
    align-items: stretch
}

.SearchTopics_topicTile-1VUVy {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #9b9dad;
    flex: 1 1 120px;
    max-width: 160px;
    margin-right: 0.25rem;
    text-align: center;
    background: #2c303a;
    border-radius: 4px;
    padding-top: 1rem;
    padding-bottom: .75rem;
    transition: background-color .2s linear, color .2s linear
}

.SearchTopics_topicTile-1VUVy h3,
.SearchTopics_topicTile-1VUVy h4 {
    margin-bottom: 0;
    font-size: 1rem;
    margin-top: 1rem
}

.SearchTopics_topicTile-1VUVy>div {
    width: 60px;
    height: 50px;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center center;
    margin: 0 auto .2rem
}

.SearchTopics_topicTile-1VUVy>div img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
}

.SearchTopics_topicTile-1VUVy:focus,
.SearchTopics_topicTile-1VUVy:hover {
    background-color: #5a5f73;
    color: #fff
}



html.ie8 .signup-callout,
html.ie9 .signup-callout,
html.ie10 .signup-callout,
html.ie11 .signup-callout {
    display: none
}
@media (max-width: 550px) and (max-width: 550px) {
.signup-callout {
	margin-top: -20px;
    }
}
.signup-callout {
	margin-top: 0px;
    text-align: center;
    font-family: 'Quicksand';
    font-size: 1.75rem;
    display: block;
    padding: 20px;
    position: relative;
    background: #2c303a;
    border-radius: 6px;
    margin: 0 0 20px 0;
}

.signup-callout p,
.signup-callout li,
.signup-callout .item-content {
    color: #b7bbc8
}

.signup-callout .item-content {
    margin: 0 0 1em 0
}

.signup-callout blockquote {
    background: #444857;
    color: #d5d7de;
    max-width: 25em;
    margin: 1rem auto
}

.signup-callout:not(.single-collection)>h1,
.signup-callout:not(.single-collection)>h2,
.signup-callout:not(.single-collection)>h3,
.signup-callout:not(.single-collection)>h4,
.signup-callout:not(.single-post)>h1,
.signup-callout:not(.single-post)>h2,
.signup-callout:not(.single-post)>h3,
.signup-callout:not(.single-post)>h4 {
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    position: relative
}

.error .signup-callout {
    background: rgba(0, 0, 0, 0.8)
}

.signup-callout .module {
    background: #2c303a
}

.login-modal .main-sidebar,
.login-modal .login-header,
.login-modal .signup-callout,
.login-modal .forgot-password-link,
.login-job_posting .main-sidebar,
.login-job_posting .login-header,
.login-job_posting .signup-callout,
.login-job_posting .forgot-password-link {
    display: none
}

.login-modal .login-header,
.login-job_posting .login-header {
    margin: 0 0 20px 0
}

.login-modal .login-half.left,
.login-job_posting .login-half.left {
    width: 50%
}

.login-modal .github-button,
.login-job_posting .github-button {
    text-align: left;
    padding-left: 60px
}

.login-modal.body-login {
    background: #d5d7de;
    padding-top: 28px;
    color: #444857
}

.login-modal .login-or {
    color: #9b9dad;
    border-color: #b7bbc8
}

.login-modal .login-divider .bar {
    background: #b7bbc8
}

.login-modal .login-wrap {
    padding: 0
}

.login-job_posting.body-login {
    background: #2c303a
}

.login-job_posting .login-wrap {
    padding-bottom: 0
}

.body-login {
    background: #2c303a url(https://static.codepen.io/assets/logos/codepen-logo-pattern-b477875ac66ffc21e4485a989358c220fac283caf17e602346a50d4250970254.png);
    background: linear-gradient(-270deg, #fcfeff 0%, #eeeeee 100%);
}

.body-login .login-button {
    display: none
}

.login-header {
    margin: 50px 0 20px 0
}

.login-logo {
    margin: 0 0 0 -6px;
    font: 0/0 a;
    /*background: url(https://static.codepen.io/assets/logos/codepen-logo-eccd67a3067908687f74b7725787a321b0a13ce18601ba839aaab2bd8df9d772.svg) no-repeat; */
    background-size: 176px 31px;
    width: 220px;
    height: 31px;
    opacity: 0.5;
    font-size: 3rem;
    font-family: 'Baloo Chettan 2';
    font-weight: 900;
}
	
}

@media (max-width: 550px) {
    .login-logo {
        margin: 15px 0 5px 0;
        background-size: 110px 24px;
        width: 220px;
        height: 24px
    }
}

#log-in-button {
    display: block;
    width: 100%;
    font-size: 2rem;
    font-weight: 900!important;
    font-family: 'Baloo Chettan 2';
}
#log-in-button-off {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    font-weight: bold;
}
#forgot-password-link {
    text-align: center;
    display: block;padding: 0.50em;
}

.login-wrap {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    position: relative;
    font-family: 'Baloo Chettan 2';
    font-size: 1.5rem;
}

.login-half {
    width: 50%
}

.login-half.left {
    padding-right: 10%;
    width: 55%
}

.login-half.right {
    padding-left: 10%;
    width: 45%
}

.login-divider {
    width: 0%;
    position: relative
}

.login-divider .bar {
    width: 2px;
    height: 41%;
    width: 2px;
    position: absolute;
    background: #9b9dad;
    left: -1px
}

.login-divider .bar-top {
    top: 0
}

.login-divider .bar-bottom {
    bottom: 0
}

.login-or {
    position: absolute;
    display: block;
    width: 46px;
    height: 18%;
    left: -23px;
    border: 2px solid #9b9dad;
    top: 41%;
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 10px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.2rem;
    line-height: 30px;
    color: #b7bbc8
}

.linked-account-info {
    margin-bottom: 20px
}

.linked-account-info .help-flyout-link {
    position: relative;
    display: inline-block;
    vertical-align: top;
    top: 5px;
    left: 5px
}

.login-form .field {
    padding-right: 0
}



@media (max-width: 550px) {
    .login-half.left,
    .login-half.right,
    .login-header {
        padding: 0;
    }
    .login-header {
        margin-top: 10px
    }
    .login-divider {
        width: 100%;
        position: relative;
        height: 25px;
        margin-top: 10px;
    }
    .login-divider .bar {
        width: 41%;
        height: 2px;
        position: absolute;
        background: #9b9dad;
    }
    .login-divider .bar-top {
        left: 0
    }
    .login-divider .bar-bottom {
        right: 0;
        left: auto;
        top: 0
    }
    .login-or {
        width: 18%;
        height: 30px;
        left: 41%;
        top: -15px
    }
}

.social-auth-errors {
    display: none
}

.login-error-message {
    border: 2px solid #ffdd40;
    padding: 20px;
    margin: 0 0 20px 0
}

.login-error-message:last-child {
    margin: 0
}

.account-submit-button {
    color: white;
    display: inline-block;
    font-size: 1.2em;
    padding: 0.5rem 2.8rem;
    font-weight: bold !important;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
    background: #47cf73;
    -webkit-box-shadow: 0 1px 0 1px #34c864;
    box-shadow: 0 1px 0 1px #34c864;
    border-radius: 3px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    font-size: 1.6em;
    padding: 0.8rem 2.8rem
}

.account-submit-button:hover,
.account-submit-button:focus {
    -webkit-box-shadow: 0 0 0 1px #34c864;
    box-shadow: 0 0 0 1px #34c864;
    -webkit-transform: translateY(1px) translateZ(0);
    transform: translateY(1px) translateZ(0)
}

.plan-button.plan-0 {
    color: white;
    display: inline-block;
    font-size: 1.2em;
    padding: 0.5rem 2.8rem;
    font-weight: bold !important;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
    background: #5a5f73;
    -webkit-box-shadow: 0 1px 0 1px #4f5365;
    box-shadow: 0 1px 0 1px #4f5365;
    border-radius: 3px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.plan-button.plan-0:hover,
.plan-button.plan-0:focus {
    -webkit-box-shadow: 0 0 0 1px #4f5365;
    box-shadow: 0 0 0 1px #4f5365;
    -webkit-transform: translateY(1px) translateZ(0);
    transform: translateY(1px) translateZ(0)
}

.plan-button.plan-1 {
    color: white;
    display: inline-block;
    font-size: 1.2em;
    padding: 0.5rem 2.8rem;
    font-weight: bold !important;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
    background: #0ebeff;
    -webkit-box-shadow: 0 1px 0 1px #00b2f4;
    box-shadow: 0 1px 0 1px #00b2f4;
    border-radius: 3px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.plan-button.plan-1:hover,
.plan-button.plan-1:focus {
    -webkit-box-shadow: 0 0 0 1px #00b2f4;
    box-shadow: 0 0 0 1px #00b2f4;
    -webkit-transform: translateY(1px) translateZ(0);
    transform: translateY(1px) translateZ(0)
}

.plan-button.plan-2 {
    color: white;
    display: inline-block;
    font-size: 1.2em;
    padding: 0.5rem 2.8rem;
    font-weight: bold !important;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
    background: #ae63e4;
    -webkit-box-shadow: 0 1px 0 1px #a34de0;
    box-shadow: 0 1px 0 1px #a34de0;
    border-radius: 3px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.plan-button.plan-2:hover,
.plan-button.plan-2:focus {
    -webkit-box-shadow: 0 0 0 1px #a34de0;
    box-shadow: 0 0 0 1px #a34de0;
    -webkit-transform: translateY(1px) translateZ(0);
    transform: translateY(1px) translateZ(0)
}

.plan-button.plan-3 {
    color: white;
    display: inline-block;
    font-size: 1.2em;
    padding: 0.5rem 2.8rem;
    font-weight: bold !important;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05);
    background: #47cf73;
    -webkit-box-shadow: 0 1px 0 1px #34c864;
    box-shadow: 0 1px 0 1px #34c864;
    border-radius: 3px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.plan-button.plan-3:hover,
.plan-button.plan-3:focus {
    -webkit-box-shadow: 0 0 0 1px #34c864;
    box-shadow: 0 0 0 1px #34c864;
    -webkit-transform: translateY(1px) translateZ(0);
    transform: translateY(1px) translateZ(0)
}

.terms-acknowledgment {
    font-size: 0.82rem;
    color: #868ca0;
    margin-top: 1.3em
}

.terms-acknowledgment a {
    color: #868ca0;
    text-decoration: underline
}

.terms-acknowledgment.upgrade {
    margin-top: -0.2em;
    margin-bottom: 1.2em
}

.signup-feature-list {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 20px;
    border-left: 6px solid #868ca0;
    background: #444857
}

@media (max-width: 550px) {
    .signup-feature-list {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        border-top: 6px solid #868ca0;
        border-left: none
    }
}

.signup-feature-list dt {
    font-weight: normal;
    color: #aaaebc
}

.signup-feature-list h3 {
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 1rem;
    border-bottom: 2px solid #9b9dad;
    margin-bottom: 0.5rem;
    padding-bottom: .5rem;
    color: #fff
}

.signup-feature-list h3:not(:first-of-type) {
    margin-top: 1.25rem
}

.signup-feature-list dt,
.signup-feature-list dd {
    font-size: 0.9rem
}

.signup-feature-list dl {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.signup-feature-list dl dt {
    -webkit-flex-basis: 65%;
    -ms-flex-preferred-size: 65%;
    flex-basis: 65%
}

.signup-feature-list dl dd {
    -webkit-flex-basis: 35%;
    -ms-flex-preferred-size: 35%;
    flex-basis: 35%
}

.signup-feature-list dl dd {
    color: #aaaebc;
    text-align: right;
    font-weight: bold
}

.payment-type-wrapper {
    margin-right: 20px
}

.payment-type.radio-group {
    margin-bottom: 15px;
    margin-top: 15px
}

.payment-type.radio-group span,
.payment-type.radio-group label {
    display: inline-block
}

.cc-form-fields .fields>div .select {
    -webkit-flex-basis: 30%;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%
}

.field {
    margin: 0 0 20px 0
}

.field small {
    font-weight: 100
}

.field>label {
    color: #9b9dad
}

.field .select select {
    width: 100%
}

.field .select select,
.field input {
    font-size: 1.3rem;
    max-width: 100%
}

.field input {
    padding: 8px 12px
}

.field .select select {
    padding: 8px 24px 8px 12px
}

.field .select::after {
    right: 10px
}

.fields {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media (max-width: 830px) {
    .fields>div#billing-card-cvc {
        -webkit-box-flex: 2;
        -webkit-flex: 2;
        -ms-flex: 2;
        flex: 2
    }
}

.fields>div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.fields>div.no-flex {
    display: block
}

.fields>div.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.fields>div.flex-2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2
}

.fields>div.flex-3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3
}

.fields>div+div {
    margin-left: 0.5rem
}

.fields>div label {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.fields>div input,
.fields>div .select {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: inline-block
}

.fields>div input+*,
.fields>div .select+* {
    margin-left: 0.5rem
}

.radio-group-interval .pricing-show-monthly {
    font-size: 0.7em;
    text-align: right;
    color: #aaaebc
}

.radio-group-interval .pricing-show-monthly:hover,
.radio-group-interval .pricing-show-monthly:active {
    color: #9b9dad
}

.radio-group-interval .pricing-radio-wrapper {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.radio-group-interval .pricing-radio-wrapper+.pricing-radio-wrapper {
    margin-top: 0.25rem
}

.radio-group-interval .pricing-radio-wrapper label {
    display: block;
    padding: 0.8rem 0.5rem 0.8rem 2.25rem;
    background: #b7bbc8;
    border-radius: 2px;
    border: 3px solid #aaaebc;
    margin: 0;
    line-height: 1
}

.radio-group-interval .pricing-radio-wrapper label .total-wrap {
    float: right;
    color: #717790;
    font-weight: bold
}

.radio-group-interval .pricing-radio-wrapper input {
    position: absolute;
    top: 48%;
    left: 1rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.radio-group-interval .pricing-radio-wrapper input:checked+label {
    background: white
}

.radio-group-interval.primary-interval-year .interval-month {
    display: none
}

body {
    background: #252527 url(https://static.codepen.io/assets/logos/codepen-logo-pattern-b477875ac66ffc21e4485a989358c220fac283caf17e602346a50d4250970254.png);
    background-position: center
}

.selected {
    color: #2c303a;
    font-weight: bold
}

.signup-header {
    text-align: center;
    padding: 60px 0 30px;
    position: relative
}

.signup-header>h1 {
    font-size: 4rem
}

.signup-header>h2 {
    font-size: 3rem
}

.signup-byline {
    text-align: center;
    padding-bottom: 35px;
    padding-top: 10px
}

.signup-form {
    color: #9b9dad
}

body.plan-type-user-0 .signup-header {
    background: #5a5f73;
    color: white;
    text-align: center
}

body.plan-type-user-0 .signup-header h1,
body.plan-type-user-0 .signup-header h3 {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-0 .signup-header p {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-1 .signup-header {
    background: #0ebeff;
    color: black;
    text-align: center
}

body.plan-type-user-1 .signup-header h1,
body.plan-type-user-1 .signup-header h3 {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-1 .signup-header p {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-2 .signup-header {
    background: #ae63e4;
    color: white;
    text-align: center
}

body.plan-type-user-2 .signup-header h1,
body.plan-type-user-2 .signup-header h3 {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-2 .signup-header p {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-3 .signup-header {
    background: #47cf73;
    color: black;
    text-align: center
}

body.plan-type-user-3 .signup-header h1,
body.plan-type-user-3 .signup-header h3 {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-3 .signup-header p {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-user-0 .signup-header::after {
    content: '';
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#47cf73), color-stop(25%, #47cf73), color-stop(25%, #ffdd40), color-stop(50%, #ffdd40), color-stop(50%, #ae63e4), color-stop(75%, #ae63e4), color-stop(75%, #76daff), to(#76daff));
    background: linear-gradient(to right, #47cf73, #47cf73 25%, #ffdd40 25%, #ffdd40 50%, #ae63e4 50%, #ae63e4 75%, #76daff 75%, #76daff)
}

body.plan-type-team-3 .signup-header {
    background: #ffdd40;
    color: black;
    text-align: center
}

body.plan-type-team-3 .signup-header h1,
body.plan-type-team-3 .signup-header h3 {
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.05)
}

body.plan-type-team-3 .signup-header p {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05)
}

.form-wrap {
    width: 95%;
    max-width: 720px;
    margin: 20px auto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: #fff
}

@media (min-width: 551px) {
    .form-wrap {
        margin-top: 40px
    }
}

.form-wrap .signup-header {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.form-wrap .signup-form {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding: 20px
}

body.plan-type-user-0 #user-new-form {
    padding-top: 1rem;
    display: none
}

body.plan-type-user-0 #login-with-email:checked ~ #user-new-form {
    display: block
}

.form-processing {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
    color: #fff;
    text-align: center;
    display: none
}

.form-processing.active {
    display: block
}

.form-processing .loading-spinner-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -130px;
    margin-left: -40px
}

.form-processing .loading-spinner {
    background: #fff
}

.braintree-form-fields {
    display: none
}

.signup-form {
    margin: 0
}

.signup-form input[type='range'] {
    width: calc(100% - 40px)
}

.signup-form .small-text {
    margin-top: 0.5rem
}

.signup-form .small-text a {
    color: #30a9f4
}

.signup-form .small-text a:hover,
.signup-form .small-text a:focus {
    color: #0a73b4
}

.signup-form #total-charge span {
    font-weight: bold;
    color: #717790;
    letter-spacing: 0
}

.signup-form .radio-group-interval {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.signup-form .braintree-only-description {
    display: none
}

.signup-form.braintree-only .cc-form-fields,
.signup-form.braintree-only .payment-type.radio-group,
.signup-form.braintree-only #total-charge,
.signup-form.braintree-only .cc-payment-submit {
    display: none
}

.signup-form.braintree-only .braintree-only-description,
.signup-form.braintree-only .braintree-form-fields {
    display: block
}

.signup-form.stripe-only .payment-type.radio-group {
    display: none
}

#signup-provider-card small {
    display: inline-block;
    float: right
}

#signup-provider-card small a:hover {
    color: currentColor
}

#signup-provider-card.hidden,
#signup-billing-details.hidden {
    display: none
}

.signup-form-plan-choice {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    list-style: none;
    border: 1px solid white;
    margin: 0 0 2rem 0;
    position: relative
}

.signup-form-plan-choice>li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.signup-form-plan-choice>li:not(:last-child) {
    border-right: 1px solid white
}

.signup-form-plan-choice>li>a {
    display: block;
    padding: 1rem 0.5rem;
    text-align: center;
    font-weight: bold;
    color: white;
    font-size: 1.4rem;
    position: relative
}

.signup-form input[type='text'],
.signup-form input[type='tel'],
.signup-form input[type='email'],
.signup-form input[type='password'],
.signup-form textarea {
    width: 100%;
    font-size: 1.3rem;
    padding: 8px 12px
}

.signup-form .field {
    position: relative
}

.signup-form .error-message {
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 9
}

.signup-form .error-general div {
    position: relative
}

.radio-group>div {
    margin: 0 0 5px 0
}

.radio-group label {
    margin-left: 4px
}

.radio-group-interval label {
    display: inline-block;
    text-transform: none
}

.top-label-form .g-recaptcha {
    margin: 0 0 25px 0
}

.top-label-form .g-recaptcha .error-message {
    width: 302px;
    margin-top: -3px
}





.tag-grid>li>a:before {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000
}


.grid {
    clear: both
}

.grid>[class*='grid-'] {
    float: left;
    min-height: 2px
}

@media (max-width: 830px) {
    .grid>[class*='grid-'] {
        width: 100% !important;
        padding-right: 0 !important
    }
}

.grid>.grid-1-1 {
    width: 100%
}

.grid>.grid-1-2 {
    width: 50%
}

.grid>.grid-1-3 {
    width: 33.33%
}

.grid>.grid-1-4 {
    width: 25%
}

.grid>.grid-1-5 {
    width: 20%
}

.grid>.grid-1-6 {
    width: 16.66%
}

.grid>.grid-1-8 {
    width: 12.5%
}

.grid>.grid-2-5 {
    width: 40%
}

.grid>.grid-3-5 {
    width: 60%
}

.grid>.grid-3-8 {
    width: 37.5%
}

.grid>.grid-2-3 {
    width: 66.66%
}

.grid>.grid-3-4 {
    width: 75%
}

.grid>.grid-4-5 {
    width: 80%
}

.grid aside {
    padding: 0 0 0 20px;
    margin: 0 0 20px 0
}

@media (max-width: 830px) {
    .grid aside {
        padding: 0
    }
}

.grid.padded>[class*='grid-']:not([class*='-grid-']) {
    padding-right: 20px
}

.grid .last {
    padding-right: 0 !important
}

.flex-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

@media (max-width: 550px) {
    .flex-grid>* {
        width: 100% !important
    }
}

.flex-grid .grid-1-3 {
    width: 32%;
    margin-right: 2%
}

.flex-grid .grid-1-3:nth-child(3n) {
    margin-right: 0
}

.flex-grid .grid-2-3 {
    width: 66%;
    margin-right: 2%
}

.flex-grid .grid-1-2 {
    width: 49%;
    margin-right: 2%
}

.flex-grid>:last-child {
    margin-right: 0
}

.flex-grid[data-grid-type='fill']>* {
   /* -webkit-box-flex: 1;
    -webkit-flex: 1;*/
  /*  -ms-flex: 1;*/
    /*flex: 1*/
}

@media (max-width: 830px) {
    .flex-grid[data-grid-type='fill'] [class*='grid-'] {
        -webkit-box-flex: 1;
        -webkit-flex: auto;
        -ms-flex: auto;
        flex: auto;
        margin-right: 0
    }
}

.flex-grid-thirds {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex-grid-thirds>* {
    width: 32%;
    margin-right: 2%
}

.flex-grid-thirds>:nth-child(3n) {
    margin-right: 0
}

@media (max-width: 830px) {
    .flex-grid-thirds {
        display: block
    }
    .flex-grid-thirds>* {
        width: 100%;
        margin-right: 0
    }
}

.flex-grid-quarters {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

.flex-grid-quarters>* {
    width: 23.5%;
    margin-right: 2%
}

.flex-grid-quarters>:nth-child(4n) {
    margin-right: 0
}

@media (max-width: 830px) {
    .flex-grid-quarters {
        display: block
    }
    .flex-grid-quarters>* {
        width: 100%;
        margin-right: 0
    }
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-v-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.grid-triplet {
    display: grid;
    grid-gap: 4rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 4rem
}

.grid-triplet+.grid-triplet {
    margin-top: 4rem
}

.grid-triplet article:first-child {
    grid-row-end: span 2
}

.grid-triplet-reverse article:first-child {
    grid-row-end: 1
}

.grid-triplet-reverse article:nth-child(2) {
    grid-row-end: span 2
}

.single-item.single-spam-post {
    width: 290px;
    padding: 6px;
    background: #fff;
    color: #2c303a
}

.single-item.single-spam-post .spam-title {
    font-size: 1.3rem
}

.single-item.single-spam-post a {
    color: #006f98
}

.single-item.single-spam-collection {
    width: 290px;
    padding: 6px;
    background: #fff;
    color: #2c303a;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 8em
}

.single-item.single-spam-collection .spam-title {
    font-size: 1.3rem
}

.single-item.single-spam-collection a {
    color: #006f98
}

.tag-grid>li>a:before {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000
}

.module {
    display: none;
    padding: 20px;
    position: relative;
    background: #2c303a;
    border-radius: 6px;
    margin: 0 0 20px 0
}

.module p,
.module li,
.module .item-content {
    color: #b7bbc8
}

.module .item-content {
    margin: 0 0 1em 0
}

.module blockquote {
    background: #444857;
    color: #d5d7de;
    max-width: 25em;
    margin: 1rem auto
}

.module:not(.single-collection)>h1,
.module:not(.single-collection)>h2,
.module:not(.single-collection)>h3,
.module:not(.single-collection)>h4,
.module:not(.single-post)>h1,
.module:not(.single-post)>h2,
.module:not(.single-post)>h3,
.module:not(.single-post)>h4 {
    border-bottom: 3px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    position: relative
}

.error .module {
    background: rgba(0, 0, 0, 0.8)
}

.module .module {
    background: #2c303a
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    -webkit-box-align: start;
    -webkit-align-items: start;
    -ms-flex-align: start;
    align-items: start;
    justify-items: center;
    grid-gap: 4rem 3rem
}

@media (min-width: 1101px) {
    .item-grid {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr))
    }
}

.dashboard-content .item-grid,
.profile-grid-pens .item-grid,
.topics-grid .item-grid {
    grid-gap: 6rem 3rem;
    margin-bottom: 5rem
}

.item-grid .full-width {
    grid-column: 1 / -1
}

.item-grid.with-context {
    grid-gap: 4.5rem 3rem
}

.item-grid-large {
    display: grid;
    -webkit-box-align: start;
    -webkit-align-items: start;
    -ms-flex-align: start;
    align-items: start;
    justify-items: center;
    grid-gap: 4rem 3rem
}

@media (max-width: 1280px) {
    .item-grid-large {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr))
    }
    .item-grid-large>:nth-child(6n+1),
    .item-grid-large>:nth-child(6n+5) {
        grid-row: span 2
    }
    .item-grid-large>:nth-child(6n+1) .item-content,
    .item-grid-large>:nth-child(6n+5) .item-content {
        display: none
    }
    .item-grid-large>:nth-child(6n+1) .item-content-long,
    .item-grid-large>:nth-child(6n+5) .item-content-long {
        display: block
    }
}

@media (min-width: 1281px) {
    .item-grid-large {
        grid-template-columns: repeat(3, 1fr)
    }
    .item-grid-large>:nth-child(12n+1),
    .item-grid-large>:nth-child(12n+5),
    .item-grid-large>:nth-child(12n+9) {
        grid-row: span 2
    }
    .item-grid-large>:nth-child(12n+1) .item-content,
    .item-grid-large>:nth-child(12n+5) .item-content,
    .item-grid-large>:nth-child(12n+9) .item-content {
        display: none
    }
    .item-grid-large>:nth-child(12n+1) .item-content-long,
    .item-grid-large>:nth-child(12n+5) .item-content-long,
    .item-grid-large>:nth-child(12n+9) .item-content-long {
        display: block
    }
}

.direction {
    position: relative;
    top: -1px;
    left: 2px
}

.items-in-list-view {
    width: 100%;
    margin: 0 0 20px 0;
    table-layout: fixed;
    white-space: nowrap
}

.items-in-list-view th,
.items-in-list-view td {
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis
}

.items-in-list-view th {
    text-align: left
}

.items-in-list-view th.stats-header {
    text-align: center
}

.items-in-list-view th.title-header {
    width: 45%
}

.items-in-list-view th.sort-updated_at {
    width: 17%
}

.items-in-list-view th.sort-created_at {
    width: 17%
}

.items-in-list-view th.sorted_asc .sort-icon-up {
    display: block
}

.items-in-list-view th.sorted_desc .sort-icon-down {
    display: block
}

.items-in-list-view .preview {
    width: 30px;
    padding: 2px
}

.items-in-list-view .sort-icon {
    width: 10px;
    height: 18px;
    float: left;
    position: relative;
    margin-right: 5px;
    top: 2px
}

.items-in-list-view .sort-icon-up,
.items-in-list-view .sort-icon-down {
    display: none
}

.items-in-list-view-wrap {
    overflow-x: auto
}

.item-in-list-view {
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 1px;
    overflow: hidden;
    color: #9b9dad
}

.item-in-list-view:hover {
    background: rgba(0, 0, 0, 0.5);
    color: white
}

.item-in-list-view .title {
    max-width: 50%;
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-weight: normal;
    font-size: 1em;
    margin: 0;
    white-space: normal
}

.item-in-list-view .title a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.item-in-list-view .title a .title-text {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.item-in-list-view .title a .private-icon {
    display: inline-block;
    position: static;
    float: none;
    margin-left: 0.25em
}

.item-in-list-view .date,
.item-in-list-view .list-stats {
    font-size: 13px;
    line-height: 25px
}

.item-in-list-view .list-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    max-width: 100%;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

.item-in-list-view .list-stats .stat-value {
    padding: 0 5px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto
}

.item-in-list-view .stat-value {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left
}

.item-in-list-view .stat-value span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    -webkit-box-flex: 0;
    -webkit-flex: 0 2 auto;
    -ms-flex: 0 2 auto;
    flex: 0 2 auto
}

@media (max-width: 830px) {
    .item-in-list-view .stat-value span {
        display: inline-block;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0
    }
}

.item-in-list-view .stat-value>svg {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    fill: #9b9dad;
    position: relative;
    margin-right: 3px
}

.item-in-list-view .stat-value .icon-comment {
    width: 11px;
    height: 11px
}

.item-in-list-view .stat-value .icon-eye {
    width: 14px;
    height: 14px
}

@media (max-width: 1100px) {
    .items-in-list-view thead,
    .items-in-list-view tbody,
    .items-in-list-view tr,
    .items-in-list-view td,
    .items-in-list-view th {
        display: block
    }
    .items-in-list-view th {
        display: none
    }
    .items-in-list-view .item-in-list-view {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 8px 10px;
        border-bottom: solid 1px #444857
    }
    .items-in-list-view .item-in-list-view>* {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin: 0 8px 3px 0;
        padding: 0
    }
    .items-in-list-view .title {
        max-width: none;
        width: 100%
    }
    .items-in-list-view .preview {
        display: none
    }
    .items-in-list-view .date {
        width: auto
    }
    .items-in-list-view .date::before {
        font-weight: bold;
        font-size: 10px;
        line-height: 1;
        display: block
    }
    .items-in-list-view .date.created::before {
        content: 'Created on '
    }
    .items-in-list-view .date.updated::before {
        content: 'Updated on '
    }
    .items-in-list-view .list-stats {
        width: auto;
        margin-right: 0;
        justify-self: flex-end
    }
	

	
}

.tag-grid>li>a:before {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000
}

.single-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #717790;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1
}

.single-item.has-modal {
    z-index: 2
}

.single-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: -2rem;
    left: 0;
    margin: -1rem;
    border-radius: 10px;
    overflow: hidden;
    z-index: -1;
    background: #1f2229;
    -webkit-clip-path: inset(2rem 0 2rem 2rem round 10px);
    clip-path: inset(2rem 0 2rem 2rem round 10px);
    contain: strict;
    -webkit-transition: -webkit-clip-path 0.3s ease 0.1s;
    transition: -webkit-clip-path 0.3s ease 0.1s;
    transition: clip-path 0.3s ease 0.1s;
    transition: clip-path 0.3s ease 0.1s, -webkit-clip-path 0.3s ease 0.1s
}

@media (prefers-reduced-motion: reduce) {
    .single-item::after {
        -webkit-transition: none;
        transition: none
    }
}

.single-item.user-item::after {
    top: -1rem;
    left: -1rem;
    -webkit-transition: right 0.3s ease 0.1s, -webkit-clip-path 0.3s ease 0.1s;
    transition: right 0.3s ease 0.1s, -webkit-clip-path 0.3s ease 0.1s;
    transition: clip-path 0.3s ease 0.1s, right 0.3s ease 0.1s;
    transition: clip-path 0.3s ease 0.1s, right 0.3s ease 0.1s, -webkit-clip-path 0.3s ease 0.1s
}

.single-item.hide-owner::after {
    -webkit-clip-path: inset(2rem 0 0 1rem round 10px);
    clip-path: inset(2rem 0 0 1rem round 10px)
}

.single-item.single-post.hide-owner::after {
    bottom: 0
}

.organize-grid .single-item::after {
    display: none
}

.single-item:hover::after,
.single-item:focus::after,
.single-item:active::after {
    -webkit-clip-path: inset(0 0 0 0 round 10px);
    clip-path: inset(0 0 0 0 round 10px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.single-item.user-item:hover::after,
.single-item.user-item:focus::after,
.single-item.user-item:active::after {
    -webkit-clip-path: inset(2rem 0 2rem 1rem round 10px);
    clip-path: inset(2rem 0 2rem 1rem round 10px);
    right: -1rem
}

.single-item:focus-within {
    z-index: 2
}

.single-item:focus-within::after {
    -webkit-clip-path: inset(0 0 0 0 round 10px);
    clip-path: inset(0 0 0 0 round 10px);
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}

.profile-grid-pens .single-item.featured-pen {
    margin-bottom: 5rem
}

.single-item .cover-link {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    border: 0 !important;
    z-index: 1
}

.single-item .context {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: -28px;
    color: #fff;
    font-size: 0.9rem;
    z-index: 10;
    width: 100%
}

.single-item .context .codepen-icon,
.single-item .context .actor-icon {
    display: block;
    margin-left: 12px
}

.single-item .context .codepen-icon img,
.single-item .context .actor-icon img {
    max-width: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #000;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
}

.single-item .context .text {
    font-weight: bold;
    margin-left: 4px;
    line-height: 1.2;
    color: #d5d7de;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem
}

.single-item .context .text a {
    color: #d5d7de
}

.single-item .context .codepen-icon {
    background: black;
    padding: 2px
}

.single-item .context .codepen-icon svg {
    fill: #fff;
    width: 18px;
    height: 18px
}

.single-item .context .picked-by-rainbow {
    height: 3px;
    background: -webkit-gradient(linear, left top, right top, from(#47cf73), color-stop(#ffdd40), color-stop(#ae63e4), color-stop(#0ebeff), to(#47cf73));
    background: linear-gradient(90deg, #47cf73, #ffdd40, #ae63e4, #0ebeff, #47cf73);
    border-radius: 4px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-left: 4px
}

.single-item-fpo {
    pointer-events: none
}

.single-item-fpo .user-avatar {
    background: #444857
}

.single-item-fpo .iframe-wrap {
    height: 100%
}

.single-item-fpo.collections-fpo .iframe-wrap {
    background: #2c303a
}

.iframe-wrap,
.thumbnail-wrap {
    opacity: 0.99;
    position: relative;
    height: 0;
    border-radius: 6px;
    padding-top: 56.25%;
    overflow: hidden;
    background: #444857;
    background-size: cover
}

.iframe-wrap iframe {
    width: calc(200% + 5px);
    height: calc(200% + 5px);
    border: 0;
    position: absolute;
    top: -2px;
    left: -2px;
    background: white;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    opacity: 0;
    -webkit-transition: opacity 0.4s linear 0.1s;
    transition: opacity 0.4s linear 0.1s
}

.iframe-wrap[data-loaded] iframe {
    opacity: 1
}

.thumbnail-wrap .grid-preview-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover
}

.preview-loading {
    background: black;
    color: #b7bbc8;
    text-align: center;
    padding-top: 20%;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.single-title-and-excerpt {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background: white;
    border-radius: 6px;
    -webkit-transition: 0.3s ease all;
    transition: 0.3s ease all;
    height: 0;
    padding-top: 56.25%;
    padding-top: calc(56.25% - 3px);
    border-bottom: 3px solid transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.single-title-and-excerpt .excerpt-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 20px;
    word-break: break-word;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(#fff), color-stop(98%, transparent), to(transparent));
    -webkit-mask-image: linear-gradient(to bottom, #fff 0, #fff calc(98% - 3em), transparent 98%, transparent 100%);
    mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(#fff), color-stop(98%, transparent), to(transparent));
    mask-image: linear-gradient(to bottom, #fff 0, #fff calc(98% - 3em), transparent 98%, transparent 100%);
    overflow: hidden
}

.single-collection .single-title-and-excerpt {
    background: black;
    color: #9b9dad;
    min-height: 235px
}

.single-post:hover .single-title-and-excerpt {
    border-radius: 6px 6px 0 0;
    border-bottom-color: #47cf73;
    cursor: pointer
}

.single-collection:hover .single-title-and-excerpt {
    border-radius: 6px 6px 0 0;
    border-bottom-color: #ae63e4;
    cursor: pointer
}

.single-collection:hover .single-title-and-excerpt h2 {
    color: #ae63e4
}

.single-title-and-excerpt .post-title a {
    color: #2c303a;
    display: block
}

.single-title-and-excerpt .post-title a:hover,
.single-title-and-excerpt .post-title a:focus {
    color: #47cf73
}

.single-title-and-excerpt .collection-title {
    color: white;
    display: block
}

.single-title-and-excerpt .item-content a {
    color: #1f798f;
    border-bottom: 1px solid #1f798f
}

.single-title-and-excerpt .item-content a:hover,
.single-title-and-excerpt .item-content a:focus {
    color: #289cb9;
    border-bottom: none
}

.single-collection .single-title-and-excerpt .item-content a {
    color: #56bcf9;
    border-bottom: 1px solid #56bcf9
}

.single-collection .single-title-and-excerpt .item-content a:hover,
.single-collection .single-title-and-excerpt .item-content a:focus {
    color: #87d0fb;
    border-bottom: none
}

.single-title-and-excerpt .item-content hr {
    display: none
}

.single-title-and-excerpt .item-content pre,
.single-title-and-excerpt .item-content code {
    word-break: break-all;
    white-space: pre-wrap
}

.single-title-and-excerpt .item-content-long {
    display: none
}

.tag-grid>li>a:before {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 #000
}

.single-item .header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 1rem;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3
}

.single-item .authorAvatar {
    display: block;
    margin-right: 0.75rem;
    position: relative;
    z-index: 1
}

.single-item .authorAvatar>img {
    display: block;
    width: 40px;
    height: 40px;
    background: #444857;
    overflow: hidden;
    font: 10px/1 monospace
}

.single-item .titleAndAuthor {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0 1rem 0 0
}

.single-item .titleAndAuthor,
.single-item .titleAndAuthor .title {
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.single-item .title {
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
    font-weight: 900;
    font-size: 17px;
    margin: 0 0 0.25rem;
    display: block
}

.single-item .title a {
    color: white
}

.single-item.hide-owner .title {
    margin-left: 1rem
}

.single-item .author {
    color: #c0c3d0;
    font: inherit;
    font-size: 14px;
    line-height: 1.2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.single-item .author:hover .authorInfo {
    opacity: 1;
    visibility: visible
}

.single-item .author:hover .authorName {
    color: white
}

.single-item .authorName {
    color: inherit;
    display: inline-block;
    position: relative;
    z-index: 1;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all
}

.single-item .authorName ~ .pro-link {
    margin-left: 0.5rem
}

.single-item .type {
    display: inline-block;
    margin: 0 0.5rem
}

.single-item .authorInfo {
    position: absolute;
    bottom: 0;
    right: -1rem;
    background: #1f2229;
    width: calc(100% + 2rem);
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s ease all 2s;
    transition: 0.2s ease all 2s
}

.single-item .authorInfoPens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr
}

.single-item .authorInfoPens li>div {
    border-radius: 0
}

.single-item .authorInfoPens li:first-child>div {
    border-radius: 6px 0 0 0
}

.single-item .authorInfoPens li:last-child>div {
    border-radius: 0 6px 0 0
}

.stats {
    position: absolute;
    bottom: -44px;
    left: -7px;
    padding: 0 0 0 7px;
    height: 45px;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    overflow: hidden
}

.hide-owner .stats {
    margin-left: 1rem;
    height: auto;
    bottom: -2rem;
    -webkit-transition: 0.3s ease transform;
    transition: 0.3s ease transform
}

.single-post.hide-owner .stats {
    bottom: 0
}

.stats .single-stat {
    font: inherit;
    margin-right: 5px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 4px;
    padding: 0.25rem 0.5rem 0.2rem;
    color: white;
    cursor: pointer
}

.stats .single-stat svg {
    -webkit-transition: 0.1s ease all;
    transition: 0.1s ease all
}

.stats .single-stat:hover,
.stats .single-stat:focus {
    background: white;
    color: black
}

.stats .single-stat:hover svg,
.stats .single-stat:focus svg {
    fill: #47cf73
}

.stats .single-stat.loves:hover,
.stats .single-stat.loves:focus {
    background: white;
    color: black
}

.stats .single-stat.loves:hover svg,
.stats .single-stat.loves:focus svg {
    fill: #f19994
}

.stats svg {
    width: 12px;
    height: 12px;
    display: inline-block;
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
    fill: white
}

.stats svg.icon-eye {
    top: -2px;
    width: 17px
}

.stats svg.icon-heart {
    width: 13px
}

.stats .loves {
    position: relative
}

.stats .loves::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.stats .loves .icon-heart {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear
}

.single-item:not(.hide-owner) .single-stat {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform;
    -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.75), linear;
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.75), linear
}

@media (prefers-reduced-motion: reduce) {
    .single-item:not(.hide-owner) .single-stat {
        -webkit-transform: none;
        transform: none;
        -webkit-transition-delay: 0s !important;
        transition-delay: 0s !important
    }
}

.single-item:not(.hide-owner) .single-stat:nth-child(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s
}

.single-item:not(.hide-owner) .single-stat:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.single-item:not(.hide-owner):hover .single-stat,
.single-item:not(.hide-owner):active .single-stat,
.single-item:not(.hide-owner):focus .single-stat {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-transition-timing-function: cubic-bezier(0.2, 0.15, 0.1, 1), ease;
    transition-timing-function: cubic-bezier(0.2, 0.15, 0.1, 1), ease;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.single-item:not(.hide-owner):hover .single-stat:nth-child(2),
.single-item:not(.hide-owner):active .single-stat:nth-child(2),
.single-item:not(.hide-owner):focus .single-stat:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s
}

.single-item:not(.hide-owner):hover .single-stat:nth-child(3),
.single-item:not(.hide-owner):active .single-stat:nth-child(3),
.single-item:not(.hide-owner):focus .single-stat:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.single-item:not(.hide-owner):focus-within .single-stat {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-transition-timing-function: cubic-bezier(0.2, 0.15, 0.1, 1), ease;
    transition-timing-function: cubic-bezier(0.2, 0.15, 0.1, 1), ease;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}

.single-item:not(.hide-owner):focus-within .single-stat:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s
}

.single-item:not(.hide-owner):focus-within .single-stat:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}

.collections-mini-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    padding: 60px 10px 10px 10px;
    z-index: 4;
    text-align: center;
    border-radius: 5px
}

.collection-choice {
    width: 100%
}

.close-button-collections-mini-modal {
    position: absolute;
    top: 10px;
    right: 10px
}

.close-button-collections-mini-modal svg {
    pointer-events: none;
    width: 12px;
    height: 12px;
    fill: #b7bbc8
}

.close-button-collections-mini-modal:hover svg,
.close-button-collections-mini-modal:active svg {
    fill: white
}

.ad {
    position: relative
}

.ad .ad-wrap {
    max-width: 300px;
    margin: 0 auto
}

.ad .ad-wrap iframe {
    border: 0
}

#bsap_1299665 {
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif
}

#bsap_1299665>iframe {
    width: 100%;
    height: 250px
}

#bsap_1299665>a>img {
    width: 100%;
    max-width: 300px;
    height: auto !important;
    display: block
}

#bsap_1299665 .adhere {
    text-align: center;
    color: white;
    vertical-align: center
}

#bsap_1299665 .adhere:before {
    content: '';
    width: 1px;
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

#bsap_1299665 .adhere:hover {
    background: rgba(255, 255, 255, 0.1)
}

#bsap_1299665 .bsap_adhere {
    display: none
}

.carbon-img,
.carbon-img img,
.carbon-text {
    display: block
}

.carbon-img {
    margin: 0 0 10px 0
}

.carbon-text {
    font-size: 12px;
    margin: 0 0 5px 0
}

.carbon-text,
.carbon-poweredby {
    line-height: 1.5;
    color: #9b9dad;
    text-decoration: none
}

.carbon-poweredby {
    display: none
}

.tag-grid {
    overflow: hidden;
    list-style: none;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tag-grid>li {
    padding: 0 5px 0 0;
    margin: 0 0 5px 0;
    width: 25%
}

@media (max-width: 830px) {
    .tag-grid>li {
        width: 33.33%
    }
}

@media (max-width: 550px) {
    .tag-grid>li {
        width: 50%
    }
}

@media (min-width: 1281px) {
    .tag-grid>li {
        width: 16.66%
    }
}

.tag-grid>li>a {
    display: block;
    color: white;
    padding: 5px 10px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700
}

.tag-grid>li>a:hover,
.tag-grid>li>a:focus {
    background: rgba(0, 0, 0, 0.4)
}

.tag-grid>li>a>span {
    position: absolute;
    right: 6px;
    top: 7px;
    background: black;
    color: white;
    padding: 2px 4px 1px;
    text-align: center;
    border-radius: 8px;
    font-size: 60%;
    font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif
}

.tag-grid>li>a:before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    top: 50%;
    margin-top: -3px;
    right: 6px;
    border-radius: 50%;
    background: #333333
}

.pagination {
    padding: 0 0 5px 0
}

.pagination .button {
    float: none;
    display: inline-block;
    margin: 0 0 4px 0
}

.top-pagination {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right
}

.tabs .top-pagination {
    right: 0;
    padding-right: 0;
    top: 5px
}

@media (max-width: 830px) {
    .top-pagination {
        right: 0
    }
}

.bottom-pagination {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

@media screen and (min-width: 705px) and (max-width: 830px) {
    .bottom-pagination {
        grid-column: 1 / 3
    }
}

@media screen and (min-width: 901px) {
    .bottom-pagination {
        grid-column: 1 / 3
    }
}

@media screen and (min-width: 1253px) {
    .bottom-pagination {
        grid-column: 1 / 4
    }
}

.bottom-pagination .pagination-button+.pagination-button {
    margin-left: 2rem
}

@media (max-width: 830px) {
    .bottom-pagination {
        top: auto !important;
        bottom: 20px
    }
}

@-webkit-keyframes pulse {
    to {
        opacity: 1
    }
}

@keyframes pulse {
    to {
        opacity: 1
    }
}

.tabs {
    padding-bottom: 40px;
    position: relative
}

.tabs>h1 {
    display: inline-block;
    margin: 0 15px 10px 0
}

.tabs>div {
    clear: both;
    display: none
}

.tabs>div.active {
    display: block
}

.tabs .gap {
    display: inline-block;
    width: 20px
}

.explore-tabs {
    margin: 0 0 12px 0;
    position: relative;
    font-size: 0;
    white-space: nowrap
}

.explore-tabs a,
.explore-tabs span {
    font-size: 1.1rem;
    display: inline-block;
    color: #9b9dad;
    padding: 3px 14px 5px 0
}

@media (max-width: 767px),
(max-height: 440px) {
    .explore-tabs a,
    .explore-tabs span {
        padding-right: 10px
    }
}

.explore-tabs a.nav-sep-before,
.explore-tabs span.nav-sep-before {
    border-left: 1px solid #5a5f73;
    margin-left: 10px;
    padding-left: 18px
}

.organize-grid .explore-tabs a,
.organize-grid .explore-tabs span {
    padding: 6px 8px
}

.explore-tabs a:hover,
.explore-tabs a:focus {
    color: #c7c9d3
}

.explore-tabs a.active {
    color: white;
    font-weight: 700
}

.error .explore-tabs a {
    color: black
}

.explore-tabs .mobile-trigger {
    font-size: 1rem;
    display: none
}

.explore-tabs .nav-right {
    position: absolute;
    right: 0;
    top: 0
}

.explore-tabs .nav-right a {
    padding-right: 0
}

.explore-tabs .nav-right .jobs-link {
    color: #81e058
}

@media (max-width: 550px) {
    .explore-tabs:not(.no-mobile-nav) {
        background: -webkit-gradient(linear, left top, left bottom, from(#2c303a), to(#1e1f26));
        background: linear-gradient(#2c303a, #1e1f26);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
        border-bottom: 0;
        height: 33px;
        text-align: left !important
    }
    .explore-tabs:not(.no-mobile-nav) .width-wrapper {
        position: static;
        padding: 0
    }
    .explore-tabs:not(.no-mobile-nav).open {
        height: auto
    }
    .explore-tabs:not(.no-mobile-nav).open a {
        position: relative
    }
    .explore-tabs:not(.no-mobile-nav).open .mobile-trigger {
        width: 25px
    }
    .explore-tabs:not(.no-mobile-nav) .mobile-trigger {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        padding: 5px 10px 0 0;
        height: 100%;
        z-index: 2;
        text-align: right
    }
    .explore-tabs:not(.no-mobile-nav) .mobile-trigger svg {
        pointer-events: none;
        fill: #9b9dad;
        width: 13px;
        height: 13px;
        display: inline-block
    }
}

@media (max-width: 550px) and (max-width: 550px) {
    .explore-tabs:not(.no-mobile-nav) .mobile-trigger {
        top: 3px
    }
}

@media (max-width: 550px) {
    .explore-tabs:not(.no-mobile-nav) a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 5px 0 4px 8px
    }
    .explore-tabs:not(.no-mobile-nav) a:hover {
        background: #131417;
        color: white
    }
    .explore-tabs:not(.no-mobile-nav) a.active {
        border-bottom: 0;
        top: auto;
        z-index: 1;
        background: -webkit-gradient(linear, left top, left bottom, from(#2c303a), to(#1e1f26));
        background: linear-gradient(#2c303a, #1e1f26)
    }
}

.explore-tabs.no-mobile-nav {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.explore-tabs.no-mobile-nav::-webkit-scrollbar {
    width: 0;
    height: 0
}

.explore-tabs.no-mobile-nav::-webkit-scrollbar-thumb {
    background: none
}

.explore-tabs.no-mobile-nav::-webkit-scrollbar-track {
    background: none
}

html {
    overflow-x: hidden
}



.width-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0 2rem
}

@media (max-width: 550px) {
    .width-wrapper {
        padding: 0 10px
    }
}

.width-wrapper-narrow {
    max-width: 675px
}

@media (max-width: 550px) {
    .box-actions {
        display: none
    }
}

#publish-module .module {
    overflow: visible
}

.module-text {
    color: #9b9dad;
    position: relative;
    padding-bottom: 50px
}

.module-text pre {
    margin: 0 0 10px 0
}

.module-coupon {
    background: rgba(255, 221, 64, 0.1);
    text-align: center
}

.module-coupon h1 {
    color: white
}

.coupon-message {
    padding: 1rem 1rem 0 1rem;
    font-size: 120%;
    margin: 0 0 20px 0
}

.coupon-message p {
    color: #a3a3a3
}

.super-center {
    display: block;
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 20px auto 60px
}

.user img {
    vertical-align: middle;
    position: relative;
    top: -1px;
    border: 0;
    display: inline-block
}

.message-empty {
    width: 100%;
    text-align: center;
    padding: 40px;
    grid-column: 1 / -1;
    max-width: 40em;
    margin: 0 auto 20px
}

.message-empty p {
    color: #c7c9d3;
    margin-top: 15px
}

.message-empty p:last-child {
    margin: 0
}

.message-empty .tour-button {
    margin-top: 20px
}

.item-grid .message-empty {
    grid-column-start: 1;
    grid-column-end: 3
}

.explore-pen p {
    font-size: 0.8em;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

.explore-pen p:last-child {
    margin: 0
}

.featured-iframe-wrap {
    overflow: hidden;
    width: 100%;
    height: 125px;
    margin: 0 0 10px 0;
    position: relative
}

.featured-iframe-wrap iframe {
    width: 300%;
    height: 300%;
    background: white;
    -webkit-transform: scale(0.3333);
    transform: scale(0.3333);
    -webkit-transform-origin: top left;
    transform-origin: top left
}

.user-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px
}

.user-list::before,
.user-list::after {
    display: none
}

.user-list>.module {
    display: inline-block;
    width: 100%;
    padding: 0;
    line-height: 1.4;
    background: #1e1f26;
    z-index: 2;
    margin: 0
}

.user-list>.module>a {
    display: block;
    padding: 10px
}

.user-list>.module img {
    width: 40px;
    height: 40px;
    float: left;
    border-radius: 3px
}

.user-list>.module .user-list-placeholder-img {
    width: 40px;
    height: 40px;
    float: left;
    background: #1e1f26;
    border-radius: 3px
}

.user-list>.module .user-list-name {
    width: 75%;
    width: calc(100% - 40px - 10px);
    float: right;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-list>.module .user-list-username {
    width: 75%;
    width: calc(100% - 40px - 10px);
    float: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8rem
}

@media (max-width: 1050px) {
    .user-list {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3
    }
}

@media (max-width: 830px) {
    .user-list {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2
    }
}

.upgrade .close-button {
    display: none
}

.video {
    height: 0;
    position: relative
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-16-9 {
    padding-top: 57%
}


.dropdown-toggle::after {display:none !important}
.btn-light.focus, .btn-light:focus {
  box-shadow:   0 0 0 0.2rem  rgba(255, 255, 255, 0) !important
}



.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle{
	color: #212529;
	background-color: transparent !important;
    border-color: transparent !important;
}
 btn-light, .form-control {
	color: #ffdd40;
	background-color: transparent !important;
	border-color: transparent !important;
	/* font-size: 2rem; */
}

.btn-light {
	color: #fff !important;
	background-color: transparent !important;
    border-color: transparent !important;
}
.control-input span {color:#fff;}
div#ui-datepicker-div {
    z-index: 9999 !important;
}

div#ui-datepicker-div {
    z-index: 1051!important;
}
	
	
	
	
.col-sm-2{
    position: relative;
    width: 100%;
    padding-right: 5px !important;
    padding-left: 5px !important;;
}	
button#submit {
    font-family: 'Baloo Chettan 2', cursive !important;
	font-size: 1.5rem;font-weight: bold;
}
body {
font-family: 'Baloo Chettan 2', cursive !important;
font-family: 'Quicksand', sans-serif !important;
font-family: 'Varela Round', sans-serif !important;
font-family: 'Dosis', sans-serif !important;
}
table.ui-datepicker-calendar {
    font-family: 'Baloo Chettan 2', cursive !important;
}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 45%;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 12px;
    font-weight: bold;
    color: #000000 !important;
    background-color: #d70c0c00 !important;
    border: 0px;
    outline: none;
}	

span.input-group-text {
    border: 0px !important;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1021;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay .closebtndiv {
    position: absolute;
    top: 4%;
    font-size: 200%;
    text-decoration: none;
    color: #f867679c;
    left: 2%;
}

.overlay .closebtn {
  position: absolute;
  top: 0%;
  right: 45px;
  font-size: 60px;text-decoration: none;
}
a.buton {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}
a:hover {
    color: #fff;
    text-decoration: none;
    background-color: transparent;
}
.width-50{
width: 50%;
}
.width-100{
width: 100%;
}

@media screen and (max-height: 450px) {
.overlay .closebtndiv {
    position: absolute;
    top: 4%;
    font-size: 125%;
    text-decoration: none;
    color: #f867679c;
    left: 2%;
}
  .overlay .closebtn {
  font-size: 40px;
  right: 35px;
  }
}


.page-item.active .page-link {
    background-color: #dc3545!important;
    border-color: #dc3545!important;
}
.page-link{
    color: #000!important;border: 1px solid #dee2e652!important;
}
.page-item.active .page-link {color: #fff!important;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0rem!important;
    border-bottom-left-radius: 0rem!important;
}

.table {
    width: 100%;
    margin-bottom: 1rem !important;
    box-shadow: 0 1px 10px #243949 !important;
    background: #fff !important;
    color: #2c303a !important;
    border-collapse: separate !important;
    outline: none;
	font-family: 'Dosis', sans-serif;
    font-family: 'Varela Round', sans-serif;
    font-family: 'Quicksand', sans-serif;
}
.table-overflow {
    height: 80%;
    margin: 0 auto;
    overflow: auto;
}
::-webkit-scrollbar
{
    width:0px;
}
::-webkit-scrollbar-track-piece
{
    background-color:transparent;
}
.border-bottom {
	border-bottom :0px !important; 
}
.table-bordered {
     border: 0px !important;
}

 table, th, td{/* border:0px solid indigo !important; */}
body {
 background: linear-gradient(-270deg, #f5f5f5 0%, #cccccc 100%) !important;
}
.body_login {
 background: linear-gradient(-270deg, #517FA4 0%, #243949 100%) !important;
    background: -webkit-linear-gradient( 
-427deg
 ,#0f2244 0,#1e2d5b 10%,#194b88 40%,#0285c2 90%,#1d9cdf 100%)!important;
    background: linear-gradient( 
157deg
 ,#0f2244 0,#1e2d5b 5%,#194b88 32%,#0285c2 76%,#1d9cdf 100%)!important;
  background: linear-gradient( 
157deg
 ,#1d9cdf 0,#0285c2 5%,#194b88 32%,#1e2d5b 76%,#0f2244 100%)!important;
}


.table-striped tbody tr:nth-of-type(odd) {
    background: #efefef!important;
}
tfoot {
background-color: #007bff!important;
    color: #fff;
    background-color: #007bff;
    /* border-color: #007bff; */
    background: linear-gradient( 
130deg ,#003880,#1ca1f2,#003880);
    background-size: 200% 200%;
}
table.dataTable tfoot th, table.dataTable tfoot td {
    border-top: 0px solid #111!important;
}
.col.page-table {
	color: #ffc107!important;   
    border: 0px;
    padding: 5px;    height: 38px;
}
.text-muted {
	color: #1586ff!important;
	border: 0px!important;
	background: transparent!important;
	padding: 5px 05px 5px 0px;
	font-size: 16px;
	line-height: 1;
	border: 0;
	border-radius: 0;
	-webkit-appearance: none;
	outline: none;
}
.mt-2, .my-2 {
    margin-top: 0rem!important;
}

.main-footer{position:-webkit-sticky;     position: sticky;
    bottom: 0;
    border-color: white;
	background: white;
    
    height: 38px;}



.main-footer-1{position:-webkit-sticky;     position: sticky;
    bottom: 0;
    border-color: white;
    background: linear-gradient(-270deg, #517FA4 0%, #243949 100%) !important;
    height: 38px;}
	
.row {margin-right: -30px!important;
margin-left: -30px!important;}	
.col-sm-12.paddingLeft.pagerfwt {
    font-family: 'Poiret One', cursive;
    font-weight: 900;
}


.btn-danger {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.btn-price {
	color: #1d1c1c !important;
    background-color: #ffffff !important;
    border-color: #515151 !important;
}
input#price_id_Edit:focus {
	color: #1d1c1c !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
	box-shadow: 0 0 0 0rem rgba(0,123,255,.0) !important;
}

#plaka_Km_HTML {
	font-size: 1.25rem!important;
    line-height: 3rem;
    font-family: 'Quicksand'!important;
    text-indent: 1.75em;
    color: #ffc107!important;
	
	}
.css-bulut {
    color: #ffc107!important;
    background-color: #353840 !important;
    /* border-color: #515151 !important; */
    font-weight: 900;
    font-family: 'Quicksand'!important;
    height: 3em;
    /* font-size: 3em; */
	background: #d5d7de;
    border: 3px solid #d5d7de;
    border-radius: 3px;
}
input#plaka_Km_Yeni {font-size: 1.25rem!important;line-height: 3rem;font-family: 'Quicksand'!important;/* text-indent: 2em; */color: #ffc107!important;}
input#plaka_Km_Fark {
	font-size: 1.25rem!important;
    line-height: 3rem;
    font-family: 'Quicksand'!important;
    text-indent: 1.75em;
    color: #ffc107!important;
}
.payment_pages {font-size: 1.25rem!important;line-height: 3rem;font-family: 'Quicksand'!important;/* text-indent: 2em; */color: #ffc107!important;}

.btn-km {
	color: #1d1c1c !important;
    background-color: #ffffff !important;
    border-color: #515151 !important;
	font-weight:900;
	font-family:'Baloo Chettan 2', cursive !important;
}
input.btn-km:focus {
	color: #1d1c1c !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
	box-shadow: 0 0 0 0rem rgba(0,123,255,.0) !important;
}

button.btn.btn-sm.btn-light {
    font-size: 2em;
    color: #ce5010b5!important;
    opacity: 1;
    text-transform: uppercase;
}
.container {
    width: 100%;
    padding-right: 10px !important;
    padding-left: 10px !important;
    margin-right: auto;
    margin-left: auto;
} 
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ oyku*/
  color: #e2dbdb!important;
  font-weight:900;font-family: 'Quicksand'!important;
  opacity: 9; /* Firefox */
}
.form-row {
  margin-left: 0px!important;
}


.form-control:focus {
    border-color: #80bdff00 !important;
    outline: 0;
	border-color: #80bdff !important;
	color:white!important;
}
.bs-searchbox .form-control:active {
	border-color: #80bdff !important;
	/* box-shadow: 0 0 0 0rem rgba(0,123,255,.0) !important; */
	font-size: 2rem;
	font-family: 'Quicksand';
	height: 4rem;
	font-weight: bold;
}
.bs-searchbox .form-control:focus {
	border-color: #80bdff !important;
	/* box-shadow: 0 0 0 0rem rgba(0,123,255,.0) !important; */
	color:black!important;font-size: 2rem;
    font-family: 'Quicksand';
    height: 4rem;
    font-weight: bold;
}

.content-controls-edit .content-control-edit {
    padding: 0.5rem;
    -webkit-box-flex: 0;
    -webkit-flex: 0 auto;
    -ms-flex: 0 auto;
    flex: 0 auto;
    background: #1e1f26;
    border-radius: 4px;
    margin: 15px;
    padding: 0 0 0 0.75rem;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    -webkit-transition: 0.3s ease background;
    transition: 0.3s ease background;
    -webkit-box-flex: 1;
    -webkit-flex: 1 2 25%;
    -ms-flex: 1 2 25%;
    flex: 1 2 25%;
}

.content-controls-edit label {
    cursor: pointer;
}
.content-controls-edit .content-control-edit:hover {
    background: #243949;
}
/*background: linear-gradient(130deg,#003880,#1ca1f2,#003880);*/


.btn-primary-edit {
    color: #fff;
    background-color: #007bff;
    /* border-color: #007bff; */
    background: linear-gradient(130deg,#003880,#1ca1f2,#003880);
    background-size: 200% 200%;
    color: #fff;
    width: 100%;
    /*padding: 15px 0;*/
    text-align: center;
    animation: homeBtnAnimate 4s ease infinite;
	line-height: 3rem;
}
.btn-primary-edit:hover{
    color: #fff;}
	
@keyframes homeBtnAnimate{0%,100%{background-position:10% 0}50%{background-position:91% 100%}}
 
 

.Done_Icon {
background-repeat: no-repeat;
font-size: 2em;display: inline-table;
cursor: pointer;
position: relative;}
.Starry_Icon {
background-repeat: no-repeat;
font-size: 1.9em;display: inline-table;
cursor: pointer;
position: relative;
bottom: 1px;}
.Starry_On {color:#ffb11f; }
.Starry_On:hover {color:#ffb11f; }
.Starry_On:before {
content: "\f005";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;}
.Starry_Off { color: #ffb11f; }
.Starry_Off:hover:after {
    content: "\f005";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;color: #ffb11f;}
.Starry_Off:after {
    content: "\f006";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;}
	
	
	
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0!important;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
	border: 0 !important;
    border-radius: 0 !important;
    min-width: 100%!important;
    box-shadow: 0em 0em 0.1em 0.1em rgb(0 131 243)!important;
}	
    
		
		
.search-input-wrap .icon-mag-l {
    position: absolute;
    top: 0;
    left: 0.75em;
    bottom: 0;
    margin: auto auto auto 0;
    width: 1em;
    height: 1em;
    z-index: 1;
    fill: #ffc107;
}		
.filter-option {
    text-indent: 0em!important;
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    padding: 0px!important;
    font-size: 1.50rem;
}
span.text {
    outline: 0px!important;
}
.dropdown-item.active, .dropdown-item:active {
    outline: 0px!important;
    border: 0px;
    border-radius: 0px;
	background: linear-gradient(130deg,#003880,#1ca1f2,#003880);
}
.form-row>.col, .form-row>[class*=col-] {
    padding-left: 0px!important;
}


.dateFa {
position: absolute;
    top: 0;
    left: 0.6em;
    bottom: 0;
    margin: 0.25em;
    width: 1em;
	}
	



.css-bulut-input:disabled {
    color: #ffc107!important;
    background-color: #333549 !important;
    /* border-color: #515151 !important; */
    font-weight: 900;
    font-family: 'Baloo Chettan 2', cursive !important;
    text-indent: 1.5em;
    display: block;
    width: 100%;
     /*height: calc(2.25rem + 2px);*/
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 3px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	opacity:1!important;
}


.btn-hata-animation {
    color: #fff;
    background-color: #ff3c41;
    /* border-color: #007bff; */
    background: linear-gradient(130deg,#820410,#f3293c,#78010d);
    background-size: 200% 200%;
    color: #fff;
    width: 100%;
    padding: .375rem .75rem;
    text-align: center;
    animation: homeBtnAnimate 4s ease infinite;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 1.25em;
    font-weight: 900;
    margin-bottom: 0.75em;
 }
	
.btn-durum-animation {
    color: #fff;
    background-color: #ff3c41;
    /* border-color: #007bff; */
    background: linear-gradient(300deg,#b1cab700,#24482f21,#10707dd4);
    background-size: 200% 200%;
    color: #fff;
    width: 100%;
    padding: .375rem .75rem;
    text-align: center;
    animation: homeBtnAnimate 4s ease infinite;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 1.25em;
    font-weight: 900;    margin-bottom: 0.75em;
}	
	
.inputHata {background: linear-gradient(27deg,#be5858,#d9aeae,#ae2d2d); 
    background-size: 200% 200%;
    color: #fff;
    width: 100%;
    padding: .375rem .75rem;
    text-align: center;
    animation: homeBtnAnimate 4s ease infinite;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 1.25em;
    font-weight: 900;    margin-bottom: 0.75em;
	}

.inputStok {
    background: linear-gradient(90deg, #61258A , #fd0f77);
	text-decoration-thickness: from-font;
    background-size: 200% 200%;
    color: #fff;
    width: 100%;
    padding: .375rem .75rem;
    text-align: center;
    animation: homeBtnAnimate 4s ease infinite;
    font-family: 'Baloo Chettan 2', cursive !important;
    font-size: 1.25em;
    font-weight: 900;    margin-bottom: 0.75em;
}	
table#example {
    color: black;
}	

.dataTables_wrapper {
    padding:0 1em;
}
	
	
	
	
	
	
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
/*http://codepen.io/drehimself/pen/KdXwxR?utm_source=bypeople
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/*/

*, *:before, *:after {
  box-sizing: border-box;
}
.message-data-left {
   /*width: 80%!important;display:block;*/
}
.lineId {
   /* width: 99%;*/
    padding-top: 0em!important;
    display: block;}
.chat {
    display: block;
}
.chat .chat-history {
  /*padding: 15px 30px 0px!important;*/
  border-bottom: 2px solid white;    margin-top: 1em!important;

}
.chat .chat-history .message-data {
  margin-bottom: 15px!important;
}
.chat .chat-history .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}
.chat .chat-history .message {
  color: white!important;
  padding: 15px 20px!important;
  line-height: 26px;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom: 0px!important;
  width: 100%;
  position: relative;
}
.chat .chat-history .message:after {
content: "";
    position: absolute;
    top: -0.75em;
    left: 1em;
    border-width: 0 1em 1em;
    border-style: solid;
    border-color: #CCDBDC transparent;
    display: block;
    width: 0;
}
.chat .chat-history .you-message {
  background: #CCDBDC;
  color:#003366;
}
.chat .chat-history .me-message {
  background: #E9724C;
}
.chat .chat-history .me-message:after {
  border-color: #E9724C transparent;
    right: 20px;
    top: -15px;
    left: auto;
    bottom:auto;
}
.chat .chat-message {
  padding: 30px;
}
.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
  font-size: 16px;
  color: gray;
  cursor: pointer;
}

.chat-ul li{
    list-style-type: none;
}

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

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

.float-right {
  float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.you {
  color: #CCDBDC;
}

.me {
  color: #E9724C;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Baloo Chettan 2';
    color: #003366;
}



.message-input .wrap input {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    float: left;
    border: none;
    width: calc(100% - 53px);
    padding: 0px!important;
    font-size: 1em;
    color: #32465a;
    display:grid; margin-bottom:1em!important;
}
.message-input .wrap .buttonMessage:hover {
    background: #435f7a;
}
.message-input .wrap .buttonMessage {    /* float: right; */
float: right;
    border: none;
    width: 51px;
    padding: 1.0em 0em!important;
    cursor: pointer;
    background: #333549;
    color: #f5f5f5;
    border-radius: 0.25em;
    text-align: center;
        /* line-height: 2.25em; */
    /* height: 3.85em; */}

@media (max-width:550px) {
.message-input .wrap .buttonMessage {
	float:none;
    border: none;
    padding: 1.45em 0em!important;
    cursor: pointer;
    background: #333549;
    color: #f5f5f5;
    border-radius: 0.1em;
    text-align: center;width: 100%;
	    /* line-height: 2.25em; */
    /* height: 3.85em; */
}
.message-input .wrap input {
    font-family: "proxima-nova", "Source Sans Pro", sans-serif;
    float: left;
    border: none;
    width: calc(100% - 53px);
    padding: 0px!important;
    font-size: 1em;
    color: #32465a;
    display:grid;height: 2em;
}
.message-input .wrap .buttonMessage:hover {
    background: #435f7a;
}

}


	
	
th.msgcol {
    border: 0px;
    padding: 0px;
}
	
.plaka .dropdown-menu li a span.text {
    font-family: 'Baloo Chettan 2';
}	
	
input#login-password-field_ {
    font-weight: 900;
}
	
input#login-email-field {
    font-weight: 900;
}	
input#login-email-field:active{
    font-weight: 900;
}	
	
.search-input-wrap .search-input {text-indent:1em;}
@media (max-width:830px) {
a.button.button-medium.undefined {
	height: 3em;
    border: 0px;
    border-radius: 0px;
    line-height: 1.7em;
    padding: 0.85em;width: 95%;}
}	
label.search-input-wrap {margin-bottom: 0em;}
.bootstrap-margin-bottom-75 {margin-bottom: 0.75em!important;}
.bootstrap-margin-bottom-1 {margin-bottom: 1em!important;}
.bootstrap-main {
    flex: 1;
    padding: 0;
    display: block;
    justify-content: flex-end;
    position: relative;
    z-index: 0;
}

.bootstrap-container {
    flex: 1;
    margin: 0.25rem 1rem 0rem 1rem;
}
.bootstrap-container-search {
    flex: 1;
    margin: 0.50rem 1rem 0rem 1rem;
}
.bootstrap-main-search {
    flex: 1;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 12;
}
.btn-group, .btn-group-vertical {
    float: left;
}
@media (max-width: 830px){
.bootstrap-main-search {
    padding: 0.85em 0.95em 0em 0.75em;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    height: 53px;
    width: calc(100% - 82px);
}
.dropdown-item {
    white-space: normal!important;	
	padding: 0.25rem 1rem!important;
}
.bootstrap-container-search {
    flex: 1;
    margin: 0rem 0.25rem 0rem 0.25rem;
}
}

input.css-bulut-input:focus {
    font-family: 'Quicksand'!important;

    font-weight: bold;	
	
}

.selectpicker-text-indent{text-indent:1em!important}

.fa-1x {font-size: 1.75em!important;}
.size-1 {font-size: 1.50em!important;}


.footerInputService {
	right: 0;
    position: absolute;
    display: -webkit-box;
}
.footerKilometre {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
	padding: 0.75em;
    padding-left: 13.5em;
}
@media (max-width: 830px) {
.footerKilometre {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    padding: 0.75em;
}
}
.footerService {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
	padding: 0.75em;
    padding-left: 13.5em;
}
@media (max-width: 830px) {
.footerService {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    padding: 0.75em;
}
}
#hiddenField {
  height:17px; 
  width:1px;
  position:absolute;
  margin-left:3px;
  margin-top:2px;
  border:none;
  border-width:0px 0px 0px 1px;
}

#cursorMeasuringDiv {
  position:absolute;
  visibility:hidden;
  margin:0px;
  padding:0px;
}

#hiddenField:focus {
  border:1px solid gray;  
  border-width:0px 0px 0px 1px;
  outline:none;
  animation-name: cursor;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes cursor {
    from {opacity:0;}
    to {opacity:1;}
}

textarea#service_note {
    overflow: scroll;
    text-align: justify;
    padding-left: 1.75em;
	line-height: 1.25em;
}


@media (max-width: 830px) {
.flex-button-wrapper.margin-right {
    margin: 0rem 0.25rem 0rem 0.25rem;padding: 0.0em 0.50em 0.0em 0.50em;
}    
}

input#add_deppo {
    text-indent: 1.25em;
}

.dropdown.bootstrap-select.css-bulut-input {
    padding: 1em;
}
form#form-tid {
    width: 100%;
}

@media (max-width: 830px) {
form#form-tid {
    width: 103.25%;
}
	  }
	  
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    border: 0px solid rgba(0,0,0,0.3)!important;	  
 }	  
 
 div.dtr-modal div.dtr-modal-close {

    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}