.large-button,.large-button-grey {
    border-radius: 4px;
    padding: 10px 20px;
    display: inline-block;
    margin-bottom: 10px;
    font-weight: 700;
    white-space: nowrap
}

#mc_embed_signup h2,.bold,.font-weight-700,.interest-label,.lang,.large-button,.mock-select>a,.nav-crumb,.platform,.sep,b,strong {
    font-weight: 700
}

.cms-img-caption-right,.footer-links li,.large-text,.manual-sidebar li,.massive-text,.med-text,.nav-crumb,.small,.small-text,.smaller,.tiny-text,body,div,h2,h3,input,ol,option,p,p.article-note,pre,select,small,td,textarea,ul {
    line-height: var(--line-height)
}

#mc_embed_signup .nowrap,.large-button,.large-button-grey,.platform,a.btn,div.login-btn {
    white-space: nowrap
}

.logo.white-text,hr {
    background-repeat: no-repeat
}

.table-responsive>table,table,tbody {
    overflow-x: hidden;
    border-collapse: collapse
}

.nav a:hover,a,a.intlink {
    text-decoration: none
}

.em,.italic,em,p.article-note {
    font-style: italic
}

.caps,.creator-name h3,.lang,h2.orange {
    text-transform: uppercase
}

.nav-inner,.search-img,.vcenter,div.login-btn span.icon,td {
    vertical-align: middle
}

.filter,.sidebar-close-bar,header {
    user-select: none
}

:root {
    --bg-main-color: #ffffff;
    --bg-secondary-color: #F2F2F2;
    --bg-disabled-color: #D3D3D3;
    --bg-highlight-color: #D3D3D3;
    --text-color-normal: #545859;
    --text-color-subdued: #6f7578;
    --text-color-bright: #1d2022;
    --text-color-header: #1d2022;
    --text-color-link: #267eab;
    --text-color-link-hover: #389DCE;
    --text-color-green-accent: #78A19C;
    --line-height: 1.5;
    --theme-purple: #9F7BEA;
    --theme-orange: #F9DD8D;
    --theme-light-blue: #A1D2EE;
    --theme-blue: #34B3F1;
    --theme-green: #9AD27D;
    --theme-red: #E1523F;
    --theme-white: #ffffff;
    --theme-black: #1d2022;
    --text-font: 'Inter',sans-serif;
    font-family: Inter,sans-serif
}

@supports (font-variation-settings: normal) {
    :root {
        font-family:'Inter var',sans-serif
    }
}

body,div,p {
    font-size: medium;
    color: var(--text-color-normal)
}

body,html {
    overflow-x: hidden;
    min-height: 100%;
    margin: 0;
    background-color: var(--bg-main-color)
}

h1,h2,h3 {
    color: var(--text-color-header)
}

h1 {
    font-size: xx-large;
    line-height: 1.2;
    margin: 20px auto 10px
}

h2 {
    font-size: x-large;
    margin: 50px auto 10px
}

h3 {
    font-size: large;
    margin: 30px auto 10px
}

.become-expert-android-support,.container-footer p,.f-16-l-24,.f-18-l-30,.footer-columns ul li,.normal-text,.support-font-size-16,.support-font-size-18,ol li,p,p.result-description,ul li {
    font-size: medium;
    line-height: var(--line-height)
}

p {
    margin: 0 0 20px
}

.concepts-privacy-wrapper tr:nth-child(odd),.filter:hover,.grid-item img.gallery-thumb,.secondary {
    background-color: var(--bg-secondary-color)
}

#mc_embed_signup .small-meta,.nav a,.nav-main>a,.small,.small-text,.smaller,.sort a,.subsub a,small {
    font-size: small
}

.interest-label,.nav-crumb,input,input[type=checkbox],option,pre,select,td,td>input[type=text],textarea {
    font-size: medium
}

a {
    color: var(--text-color-link)
}

a:active,a:hover {
    outline: 0;
    color: var(--text-color-link-hover)
}

button,div.login-btn:hover {
    cursor: pointer
}

.large-button {
    background: var(--text-color-link);
    color: var(--theme-white);
    border: 0;
    margin-right: 20px
}

.large-button:hover {
    color: var(--theme-white);
    background: var(--text-color-link-hover)
}

.large-button-grey {
    background: 0 0;
    color: var(--text-color-subdued);
    border: 1px solid var(--text-color-subdued)
}

.marker-green,.marker-purple {
    padding: 15px;
    background-position: center center;
    background-clip: padding-box;
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    z-index: 1
}

.bright,.large-button-grey:hover {
    color: var(--text-color-bright)
}

.color-red,.red,a.red:hover {
    color: var(--theme-red)
}

.blue,.color-blue {
    color: var(--theme-blue)
}

.light-green {
    color: var(--theme-green)
}

.green-accent {
    color: var(--text-color-green-accent)
}

.purple {
    color: var(--theme-purple)
}

.marker-green {
    background-image: url('https://cdn.tophatch.com/img/6.x/concepts-marker-green.png')
}

.marker-purple {
    background-image: url('https://cdn.tophatch.com/img/6.x/concepts-marker-purple.png')
}

.mock-select>a,.nav-crumb,.nav-crumb a,.nav-main>a,.small,small {
    color: var(--text-color-subdued)
}

ol,ul {
    margin-top: 15px
}

.sidebar-nav-item li,.support-videos iframe,ol li,ul li {
    margin-bottom: 5px
}

.ec-middle>div.platform,.not-bold {
    font-weight: 400
}

input,option,pre,select,textarea {
    color: var(--text-color-normal)
}

div.mobile-pad {
    width: auto;
    margin: 0 auto
}

.concepts-mobile-pad {
    padding: 0 20px
}

.concepts-mobile-pad>div,div.rel-center {
    max-width: 960px;
    margin: 0 auto
}

section img {
    width: 100%;
    opacity: 1;
    border-radius: 4px
}

hr {
    height: 7px;
    max-width: 640px;
    border: 0;
    background-image: url('https://cdn.tophatch.com/teams/img/line-light.png');
    background-size: contain
}

.rounded-block {
    border-radius: 4px;
    background-color: var(--bg-highlight-color)
}

.round {
    border-radius: 50%
}

.featured-creators-header .concepts-logo img,.header,.social p {
    margin: 0
}

.header-email-avatar-wrapper,.header-email-avatar-wrapper .icon,.logo-nav-main-wrapper,header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.email-avatar-wrapper,.nav-main,.nav-main .icon,.upload-label {
    display: flex;
    align-items: center
}

.nav-main {
    justify-content: flex-end;
    margin: 10px 0;
    gap: 20px;
    width: 100%
}

.three-column,.two-column {
    padding-top: 15px;
    gap: 30px;
    align-content: start
}

.margin-right-40px {
    margin-right: 40px
}

.logo {
    background-image: url('https://cdn.tophatch.com/img/6.x/Concepts-6-Logo-Wide.svg')
}

.logo.white-text {
    min-width: 180px;
    height: 38px;
    background-image: url('https://cdn.tophatch.com/img/6.x/Concepts-6-Logo-Wide-Dark.svg');
    background-size: 180px 38px
}

.nav-crumb {
    margin: 30px 0 50px
}

.icon-rows {
    display: grid;
    align-items: center;
    grid-template-columns: 48px 1fr
}

.icon-rows .icon {
    display: inline-block;
    width: 72px;
    height: 72px;
    margin: 0 15px 0 0
}

.user-email {
    margin-right: 10px;
    color: var(--theme-orange)
}

.icon-rows>div {
    margin: 6px 0 6px 12px
}

.ec-middle,.featured-creator,.text-center {
    text-align: center
}

.nav,.sort,.text-right {
    text-align: right
}

.pull-right {
    float: right
}

.two-column {
    -webkit-columns: 2 100px;
    -moz-columns: 2 100px;
    columns: 2 100px
}

.three-column {
    -webkit-columns: 3 100px;
    -moz-columns: 3 100px;
    columns: 3 100px
}

.column-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 20px
}

.column-grid>div {
    padding: 0 20px;
    border-radius: 4px
}

.three-column p,.two-column p {
    margin-top: 0;
    margin-bottom: 10px
}

.three-column>*,.two-column>* {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid
}

.three-column h2,.three-column h3,.two-column h2,.two-column h3 {
    margin: 0;
    padding: 30px 0 10px
}

.flex-container {
    display: flex;
    overflow: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between
}

.flex-item {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 30%;
    height: auto
}

table {
    width: 100%;
    margin: 15px 0
}

td {
    padding: 8px 4px
}

td>input[type=text] {
    margin-right: 10px;
    padding: 3px 10px
}

footer {
    width: 100%;
    padding: 20px 0
}

.footer-columns {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    grid-gap: 20px
}

.footer-columns ul {
    padding-left: 0;
    list-style-type: none
}

.container-footer {
    margin-top: 68px;
    padding: 72px 0
}

.mb-10,.social-section {
    margin-bottom: 10px
}

.social {
    margin: 7px 0 8px
}

.social-link img {
    width: 32px;
    height: 32px;
    margin: 15px 8px 5px 0
}

.download {
    margin-top: 25px
}

.download img {
    width: auto;
    height: 32px;
    padding-right: 6px
}

.gallery-scroll {
    overflow-x: auto;
    display: flex;
    padding: 0 25vw;
    gap: 5vw;
    margin-top: 60px;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.gallery-scroll::-webkit-scrollbar {
    display: none
}

.gallery-scroll img {
    border-radius: 4px;
    max-width: 80vw
}

.editors-choice-container {
    padding-top: 60px
}

.upload,select,textarea {
    padding: 10px
}

.editors-choice {
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    margin: 10px;
    align-items: center
}

.ec-left,.ec-right {
    display: inline-block;
    height: 100px;
    background-size: 48px 100px;
    width: 48px;
    background-repeat: no-repeat
}

.ec-left {
    background-image: url('https://cdn.tophatch.com/img/6.x/sprig-left.svg')
}

.ec-right {
    background-image: url('https://cdn.tophatch.com/img/6.x/sprig-right.svg')
}

input,option,select,textarea {
    background-color: var(--bg-highlight-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=email],input[type=number],input[type=password],input[type=text],select {
    font-size: medium;
    max-width: 90%;
    min-width: 180px;
    padding: 10px;
    border: 1px solid var(--bg-highlight-color);
    border-radius: 4px;
    background-color: var(--bg-main-color)
}

input[type=email]:hover,input[type=password]:hover,input[type=text]:hover,select:hover,textarea:hover {
    border: 1px solid var(--bg-highlight-color);
    outline: 0
}

input[type=password]:focus,input[type=text]:focus,select:focus,textarea:focus {
    border: 1px solid var(--text-color-link);
    outline: 0
}

button:disabled,input[type=checkbox]:disabled,input[type=password]:disabled,input[type=submit]:disabled,input[type=text]:disabled,select:disabled,textarea:disabled {
    background-color: var(--bg-disabled-color);
    color: var(--text-color-subdued)
}

input[type=checkbox] {
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
    border: 1px solid var(--text-color-normal);
    border-radius: 2px;
    outline: 0;
    background-color: var(--bg-main-color)
}

input[type=checkbox]:checked {
    position: relative;
    color: var(--bg-main-color);
    background-color: var(--text-color-normal)
}

input[type=checkbox]:checked:after {
    position: absolute;
    top: -2px;
    left: 2px;
    visibility: visible;
    content: '\2713'
}

.form-check input[type=checkbox]:checked:after {
    content: none
}

textarea {
    display: block;
    width: 80%;
    min-width: 280px;
    max-width: 100%;
    border: 1px solid var(--bg-highlight-color);
    background: var(--bg-main-color);
    border-radius: 4px;
    font-family: var(--text-font)
}

.logo,select {
    min-width: 180px
}

select {
    border: 1px solid var(--bg-highlight-color);
    border-radius: 4px;
    background: var(--bg-secondary-color) url('data:image/svg+xml,%3Csvg width=\'12\' height=\'6\' viewBox=\'0 0 12 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 6L0.803848 0.75L11.1962 0.75L6 6Z\' fill=\'%231d2022\'/%3E%3C/svg%3E%0A') no-repeat 95% 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.mock-select {
    position: absolute;
    background-color: var(--bg-secondary-color);
    border-radius: 4px;
    margin-top: 5px;
    z-index: 10
}

.mock-select>a {
    display: block;
    text-align: left;
    padding: 6px 12px;
    font-size: small
}

.filter.selected,.mock-select>a:hover,.platform-selected {
    background-color: var(--bg-highlight-color)
}

.badge,.filter,.tag,pre {
    background-color: var(--bg-secondary-color)
}

::-webkit-input-placeholder {
    color: var(--text-color-subdued)
}

::-moz-placeholder {
    color: var(--text-color-subdued)
}

::-ms-input-placeholder {
    color: var(--text-color-subdued)
}

::placeholder {
    color: var(--text-color-subdued)
}

#pwd-toggle {
    position: relative;
    margin-left: -34px
}

#pwd-toggle svg {
    fill: var(--text-color-bright)
}

.upload {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    border: 1px dashed var(--text-color-subdued)
}

#profile-icon,#profile-icon-preview,.profile-icon {
    display: block;
    border: 2px solid var(--bg-highlight-color);
    background-size: cover;
    background-color: var(--bg-secondary-color)
}

.recently-added-tags-wrapper>button:not(:last-child),.upload-label #profile-icon-preview {
    margin-right: 15px
}

.upload:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing
}

#file-upload {
    position: absolute;
    z-index: -1;
    overflow: hidden;
    width: .1px;
    height: .1px;
    opacity: 0
}

.interest-label {
    position: relative;
    top: -45px;
    text-align: center
}

#profile-icon,#profile-icon-preview {
    width: 72px;
    min-width: 72px;
    height: 72px;
    min-height: 72px
}

.profile-icon {
    width: 48px;
    height: 48px
}

#search-btn,.logo,.nav-crumb a,.nav-inner {
    display: inline-block
}

header {
    display: grid;
    align-items: center;
    grid-template-columns: 180px auto;
    padding: 30px 0
}

.logo {
    height: 38px;
    background-size: 180px 38px;
    background-repeat: no-repeat
}

.nav-crumb {
    margin-top: 15px
}

#search-btn {
    background-size: 18px;
    background-position: center;
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.1545 5.98428C13.5678 7.66855 13.3481 10.1796 11.6638 11.5929C9.97953 13.0061 7.46847 12.7865 6.0552 11.1022C4.64193 9.41791 4.86162 6.90686 6.54589 5.49359C8.23016 4.08032 10.7412 4.30001 12.1545 5.98428ZM13.9879 11.9995C15.5227 9.83418 15.4725 6.82706 13.6866 4.69871C11.5633 2.16829 7.79074 1.83823 5.26032 3.9615C2.7299 6.08478 2.39984 9.85734 4.52312 12.3878C6.3178 14.5266 9.29081 15.0934 11.6961 13.9354L14.8103 17.6468C15.3428 18.2814 16.2889 18.3642 16.9236 17.8317C17.5582 17.2992 17.6409 16.3531 17.1084 15.7184L13.9879 11.9995Z' fill='%23888888'/%3E%3C/svg%3E%0A")
}

.nav-inner {
    line-height: normal
}

.lang-switcher,.platform-switcher {
    padding-right: 8px;
    font-size: small;
    border: none;
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L0.803848 0.75L11.1962 0.75L6 6Z' fill='%231d2022'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 95% 50%;
    user-select: none;
    cursor: pointer
}

.badge,.filter,.lang,.platform,.tag {
    border-radius: 4px;
    font-size: small
}

.platform {
    background-repeat: no-repeat;
    background-position: 6px;
    background-size: 16px;
    padding: 6px 12px 6px 28px!important;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.platform#ios {
    background-image: url("https://cdn.tophatch.com/teams/img/platform-ios-dark.svg")
}

.platform#android {
    background-image: url("https://cdn.tophatch.com/teams/img/platform-android-dark.svg")
}

.platform#windows {
    background-image: url("https://cdn.tophatch.com/teams/img/platform-windows-dark.svg")
}

.lang-switcher:first-child {
    padding-right: 18px
}

.sep {
    display: inline-block;
    color: var(--bg-secondary-color)
}

.badge,.filter,.tag {
    margin-right: 10px;
    display: inline-block;
    padding: 4px 10px
}

.tag.accent-green {
    background-color: var(--text-color-green-accent);
    color: var(--theme-white)
}

.filter {
    cursor: pointer;
    background-color: var(--bg-main-color);
    border: 1px solid var(--bg-secondary-color)
}

#mc_embed_signup #mce-error-response,.d-none,.hidden,.shorten,.submit-bottom {
    display: none
}

.table-responsive {
    min-height: .01%;
    overflow-x: auto
}

.table-responsive>table,abbr.timeago,table,tbody {
    border: none
}

.manual-container img {
    max-width: 960px;
    border-radius: 4px
}

pre {
    display: block;
    margin: 0 0 10px;
    padding: 9.5px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    word-break: break-word;
    border: none
}

video {
    border-radius: 4px;
    max-width: 100%;
}

@media (max-width: 641px) {
    section {
        margin:10px 0
    }

    .invoice-table tbody td,.invoice-table thead td,.invoices-pagination a,.licenses-table tbody td,.licenses-table thead td,.licenses-table-header-wrapper span,.my-teams a,.personal-info a,.thank-you-platform a,.thank-you-platform p {
        font-size: medium
    }

    .nav-crumb {
        font-size: medium;
        margin: 0
    }

    .billing-team-info-wrapper {
        align-items: normal;
        flex-direction: column
    }

    .edit-user-profile-inputs-wrapper div:not(:first-child),.icon-rows>div,.licenses-table input[type=checkbox] {
        margin: 0
    }

    .billing-form-input-btn-wrapper,.edit-user-profile-inputs-wrapper {
        flex-direction: column
    }

    .billing-form-input-btn-wrapper>input {
        width: 100%;
        max-width: none
    }

    .billing-form-input-btn-wrapper>a {
        margin-top: 5px
    }

    .billing-form-inputs-wrapper label p {
        font-size: large;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 10px
    }

    .account-manager-wrapper h3,.account-manager-wrapper p,.download-the-app-section li {
        font-size: medium;
        line-height: 20px
    }

    .billing-form-inputs-wrapper div {
        margin-bottom: 33px
    }

    .billing-table,.drag-and-drop-text,.header-user-email {
        display: none
    }

    .billing-table-mobile {
        display: table
    }

    .billing-form-inputs-wrapper {
        margin-bottom: 0;
        flex-direction: column
    }

    .billing-form-btn-wrapper {
        justify-content: center
    }

    .billing-form-btn-wrapper p,.container-footer p,.user-detail-email,.user-detail-language,footer ul li {
        font-size: medium;
        line-height: var(--line-height)
    }

    .billing-renews {
        font-size: medium;
        margin: 10px auto 20px
    }

    .dashboard-section h2 {
        margin: 10px 0 5px
    }

    .my-teams div,.personal-info div {
        margin: 0 0 20px 12px
    }

    .icon-rows .icon-team-name,.user-name-detail,footer h3 {
        font-size: large;
        line-height: var(--line-height)
    }

    header {
        align-items: normal;
        flex-direction: column;
        justify-content: normal;
        margin-top: 15px;
        display: block
    }

    .header-email-avatar-wrapper {
        justify-content: space-between;
        margin-top: 10px
    }

    .close,.licenses-table-header-wrapper h2 {
        font-size: large
    }

    .container-footer {
        margin-top: 45px;
        padding: 37px 0
    }

    .social {
        margin: 7px 0 28px
    }

    .user-detail-info-wrapper {
        display: flex;
        flex-direction: column
    }

    .user-detail-icon-rows div {
        margin: 6px 0 6px 60px
    }

    .user-avatar-wrapper,.user-detail-icon-rows {
        margin-bottom: 0
    }

    .user-receive-emails-status {
        margin: 22px 0 7px!important
    }

    .icon-rows .drag-and-drop-area {
        margin-left: 12px
    }

    .upload {
        border: none
    }

    .download-system-requirements-wrapper,.edit-user-profile-input-wrapper {
        display: block
    }

    .password-eye-icon {
        right: 15px
    }

    .center-submit-btn-wrapper {
        display: flex;
        justify-content: center
    }

    .edit-user-profile-input-wrapper select,input[type=email],input[type=password],input[type=text],select,textarea {
        box-sizing: border-box;
        width: 100%;
        max-width: none
    }

    input.input-with-checked-sign-icon {
        width: 90%
    }

    .invoices-pagination span {
        font-size: small;
        padding: 0 8px
    }

    .modal-content {
        width: 280px
    }

    .modal-cancel-btn,.modal-confirm-btn {
        font-size: medium;
        width: 100px;
        height: 35px
    }

    .nav-main {
        justify-content: space-between;
        gap: 5px
    }

    .nav-crumb {
        margin-top: 0
    }

    .interest-label {
        font-size: medium;
        line-height: var(--line-height);
        top: 0
    }

    .download-system-requirements-wrapper div:first-child {
        margin-bottom: 15px
    }
}

#mc_embed_signup .button,.help-button,.search-img img,.vcenter,a.btn,a.social,div.login-btn,div.login-btn span.icon {
    display: inline-block
}

@media (max-width: 999px) {
    .container {
        padding:0 20px!important
    }
}

#mc_embed_signup form {
    position: relative;
    display: block;
    padding: 10px 0 10px 3%;
    text-align: left
}

#mc_embed_signup h2 {
    font-size: large;
    margin: 15px 0;
    padding: 0
}

#mc_embed_signup .button,#mc_embed_signup label,h2.orange {
    font-size: medium;
    font-weight: 700
}

#mc_embed_signup input {
    border: 1px solid #999;
    -webkit-appearance: none
}

#mc_embed_signup input[type=checkbox] {
    -webkit-appearance: checkbox
}

#mc_embed_signup input[type=radio] {
    -webkit-appearance: radio
}

#mc_embed_signup input:focus {
    border-color: #333
}

#mc_embed_signup .button {
    line-height: 32px;
    clear: both;
    width: auto;
    height: 32px;
    margin: 0 5px 10px 0;
    padding: 0;
    cursor: pointer;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    border: 0;
    border-radius: 4px;
    background-color: #aaa
}

.grid-item img.gallery-thumb,input.email {
    border: 1px solid var(--bg-highlight-color)
}

#mc_embed_signup .button:hover {
    background-color: #777
}

#mc_embed_signup .clear {
    display: inline;
    clear: none
}

#mc_embed_signup label {
    display: block;
    padding-bottom: 10px
}

#mc_embed_signup input.email {
    display: block;
    width: 58%;
    min-width: 130px;
    margin: 0 4% 10px 0;
    padding: 8px 0;
    text-indent: 5px
}

#mc_embed_signup input.button {
    display: block;
    width: 35%;
    min-width: 90px;
    margin: 0 0 10px
}

#mc_embed_signup div#mce-responses {
    top: -1.4em;
    float: left;
    clear: both;
    overflow: hidden;
    width: 90%;
    margin: 0 5%;
    padding: 0 .5em
}

#mc_embed_signup div.response {
    font-weight: 700;
    z-index: 1;
    top: -1.5em;
    float: left;
    width: 80%;
    margin: 1em 0;
    padding: 1em .5em .5em 0
}

#mc_embed_signup #mce-success-response {
    display: none;
    color: #529214
}

#mc_embed_signup label.error {
    display: block;
    float: none;
    width: auto;
    margin-left: 1.05em;
    padding: .5em 0;
    text-align: left
}

h2.orange {
    margin: 15px 0 0;
    color: #eb9635
}

.vcenter {
    float: none
}

.help-button {
    max-height: 40px;
    margin: 0 10px 10px 0
}

.cover {
    margin: inherit;
    text-align: center;
    color: #fff
}

.cms-img-caption-right,.color-grey,.footer-langs a,.nav a,.sidebar-close-bar,.sidebar-foot a,.sidebar-head a,.sidebar-head h1,.sort a,.subdued,div.article-subtitle,div.subdued-title,div.th-breadcrumb {
    color: var(--text-color-subdued)
}

.nav {
    padding: 25px 8px
}

.nav a {
    margin: 20px 10px 0
}

.sort {
    padding: 2px
}

.sort a {
    margin-left: 15px
}

.container {
    padding: 0;
    max-width: 960px;
    margin: 0 auto
}

.space {
    padding: 15px 0
}

.space-above {
    padding-top: 20px
}

.space-below {
    padding-bottom: 20px
}

.tiny,.tiny-text {
    font-size: x-small
}

.footer-links a,.footer-links li,.small-attention a,.tag-footer,.tagline,.textarea,div.post div.category,input.email {
    font-size: medium
}

.narrow {
    max-width: 640px
}

.black,.white p {
    color: #1d2022
}

.grid h1,.grid p {
    color: #fff
}

.quote {
    margin: 40px auto;
    padding: 0 20px
}

.quote-img {
    height: 20px;
    margin-top: 10px;
    opacity: .5
}

.header-gradient {
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 400px;
    background: -moz-linear-gradient(top,rgba(218,220,222,.4) 0,rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,rgba(218,220,222,.4) 0,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,rgba(218,220,222,.4) 0,rgba(255,255,255,0) 100%)
}

.header-gradient-wrapper,.hero-plugin,.position-relative,.rel {
    position: relative
}

.white {
    background-color: #fff
}

.nav .white-text,.white-text {
    color: #fff!important
}

.light-text {
    color: #aeaeae
}

.mid-text {
    color: #888
}

.orange-text {
    color: #e58f1f
}

.grid p {
    font-weight: 300
}

.small-attention a {
    color: #fac141
}

.concepts-download,.featured-designer,.gallery-img-row,.gallery-txt-offset,.mt-20 {
    margin-top: 20px
}

.concepts-download img {
    height: 40px;
    margin: 0 5px
}

.tagline {
    margin-bottom: 20px
}

.learn {
    margin-bottom: 50px
}

.resources {
    margin: 50px auto
}

.m-20-0,.resources>div,div.instructions img {
    margin: 20px 0
}

.img-caption,.support-social a {
    margin-top: -5px
}

.support-videos {
    padding: 10px 0;
    border: none
}

.support-videos td {
    font-weight: 700;
    padding: 0 20px 0 0;
    color: #5d5d5d;
    border: none
}

div#mc_embed_signup {
    background: 0 0;
    margin-left: 95px
}

div#mc_embed_signup form {
    padding: 10px 0 0
}

div.post div.category {
    font-weight: 700;
    margin-bottom: 0;
    color: #aaa
}

p.post,p.post p {
    padding: 5px 0
}

p.error,p.success {
    padding: 5px 10px;
    color: #fff
}

p.success {
    background-color: #228b22
}

p.error {
    background-color: #dc143c
}

.textarea,input.email {
    font-weight: 400;
    width: 60%;
    padding: 5px 10px;
    color: var(--text-color-normal)
}

.concepts-privacy-wrapper li:last-child,div.toc {
    margin-bottom: 15px
}

div.toc a {
    padding: 10px 5px
}

div.instructions h2,div.instructions h3 {
    margin: 30px 0 10px
}

.trusted-by-logo-wrapper,.trusted-by-title,div.drawing-container,div.th-breadcrump div.links {
    text-align: left
}

.drawing-container img {
    margin: 0 auto
}

input.email {
    border-radius: 4px
}

a.btn,div.login-btn span.buttonText,input.btn,input.button {
    font-weight: 700;
    font-size: medium
}

input.btn,input.button {
    color: var(--text-color-bright);
    border: none;
    background-color: var(--theme-blue)
}

.textarea {
    min-width: 250px;
    border: 1px solid var(--bg-highlight-color);
    border-radius: 4px
}

a.btn,div.login-btn {
    border-radius: 4px
}

div.editable,div.editable:focus {
    outline: transparent solid 0
}

div.login-btn {
    width: 180px;
    color: #fff;
    background: var(--theme-blue)
}

div.login-btn span.icon {
    width: 42px;
    height: 42px;
    margin: 0 auto;
    padding: 12px;
    border-right: var(--theme-blue) 1px solid
}

div.login-btn span.buttonText {
    display: inline-block;
    padding: 0 42px;
    vertical-align: middle
}

a.btn {
    min-width: 160px;
    padding: 10px;
    color: var(--text-color-bright);
    background-color: var(--text-color-link)
}

.full-width,input.email {
    min-width: 100%
}

a.btn:hover,input.btn:hover,input.button:hover {
    color: var(--text-color-bright);
    background-color: var(--text-color-link-hover)
}

.tag-footer {
    color: var(--text-color-subdued);
    padding: 30px 0
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style-type: none
}

.footer-links li {
    margin: 0;
    padding: 3px 0
}

.footer-links a {
    font-weight: 400;
    color: var(--text-color-link)
}

.footer-links a:hover,.tag-footer a:focus,footer a:focus {
    color: var(--text-color-link-hover)
}

a.intlink {
    border-bottom: 1px dashed
}

.footer-social,.footer-social form,.footer-social form input {
    margin-left: 0;
    padding: 20px 0
}

a.social {
    width: 38px;
    height: 30px;
    margin: 20px 0;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 30px
}

a.social:hover {
    opacity: .85
}

div.th-breadcrumb {
    font-size: small;
    font-weight: 700;
    margin-bottom: 0;
    padding: 15px;
    background-color: var(--bg-secondary-color)
}

div.th-breadcrumb a {
    font-size: small;
    font-weight: 400
}

div.para-container {
    width: 100%;
    margin: 50px 0;
    padding: 20px 0
}

.content h2 {
    margin: 20px auto 10px
}

div.para-left {
    z-index: 2;
    width: 60%;
    padding: 80px 0 80px 20px
}

div.para-right {
    z-index: 2;
    width: 60%;
    margin-left: 40%;
    padding: 80px 0
}

div.para-right h2,div.para-right p {
    padding-right: 20px;
    pointer-events: all
}

div.graphic,div.graphic div {
    pointer-events: none
}

.mt-30,div.para-right h2,div.search-outer {
    margin-top: 30px
}

div.graphic {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%
}

div.para-left a {
    pointer-events: all
}

div.subdued-title {
    font-size: medium;
    font-weight: 700;
    margin: 0 0 30px 20px
}

.footer-langs {
    display: flex;
    gap: 10px
}

.concepts-logo img {
    height: 32px;
    margin: 0;
    border: 0!important
}

.featured-subtitle {
    margin-left: 25px
}

.featured-designer-content {
    margin: 0 25px
}

.featured-profile-bio {
    max-width: 670px
}

.support-videos iframe {
    width: 556px;
    height: 286px
}

.filer_image {
    border: 1px solid var(--bg-secondary-color)
}

.hero {
    max-height: 450px;
    background-position: 50% 30%
}

.creator-story-image,.hero-image,.hero-plugin {
    background-repeat: no-repeat;
    background-position: center
}

.cms-striped h1,.cms-striped h2,.cms-striped h3 {
    max-width: 640px;
    text-align: left
}

.cms-striped>p {
    margin: 0 auto 20px;
    max-width: 640px;
    text-align: left
}

.cms-striped>p.article-note {
    margin: 10px auto 20px;
    font-size: small;
    text-align: left
}

.cms-striped>ol,.cms-striped>ul {
    max-width: 640px;
    margin: 20px auto;
    text-align: left
}

.cms-striped>ol>li>p,.cms-striped>ul>li>p {
    margin: 0;
    text-align: left
}

.cms-striped>div {
    margin: 0 auto;
    text-align: center
}

div.article-subtitle,h1.article-title,p.article-note,p.article-tip {
    max-width: 640px;
    text-align: left
}

h1.article-title {
    margin: 60px auto 0;
    font-weight: 700
}

div.article-subtitle {
    margin: 10px auto 20px
}

h2.article-section,h3.article-subsection {
    margin: 20px auto;
    max-width: 640px;
    text-align: left
}

h3.article-subsection {
    font-weight: 400;
    font-variant: normal;
    color: var(--text-color-bright)
}

p.article-note {
    font-size: small;
    color: var(--text-color-subdued);
    margin: 10px auto 0
}

p.article-tip {
    margin: 10px auto;
    padding: 10px 20px;
    background: #fff5e0
}

.form-description-mailchimp-form p,.hero-quote p {
    text-align: center;
    line-height: var(--line-height)
}

@media (max-width: 376px) {
    .striped h1 {
        width:350px
    }
}

.featured-profile-brushpack {
    overflow-x: auto;
    width: 900px;
    height: 140px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: rgba(214,220,222,.4)
}

.brush-pack-content {
    width: 100%;
    margin-top: 10px;
    margin-left: 40px
}

.brush-pack-object p,.col-sm-12,.full-width,.recently-added-gallery img {
    width: 100%
}

.brush-pack-brushes img,.gallery-img-offset {
    margin-top: 10px
}

.brush-pack-title {
    font-size: medium;
    font-weight: 700;
    color: #1d2022
}

.brush-pack-author {
    font-size: small;
    margin-left: 30px;
    color: #1d2022
}

.featured-profile-main-image {
    margin: 40px 0
}

.form-description {
    margin-right: 5px;
    margin-left: 5px
}

.form-description h2,.form-description p {
    width: 98%
}

.form-check-label {
    font-weight: 400;
    margin-left: -30px
}

.mailchimp-form {
    margin-left: 4em
}

#sidebar,.d-block,.submit-side {
    display: block
}

.mailchimp-button,input.btn,input.button {
    margin-left: -20px;
    padding: 6px 20px;
    border-radius: 2px
}

.ml-0,.navbar-collapse.sidebar-nav .nav a,input.btn.ml-0,input.button.ml-0 {
    margin-left: 0
}

@media (max-width: 768px) {
    .form-description {
        margin:0 20px
    }

    .mailchimp-form {
        margin-left: 0
    }

    .form-check-label {
        margin-left: -20px
    }
}

@media(max-width: 590px) {
    .form-check-label {
        margin-left:-10px
    }
}

@media(max-width: 450px) {
    .form-check-label {
        margin-left:0
    }
}

@media (max-width: 425px) {
    .form-check-label,.mailchimp-form,div#mc_embed_signup {
        margin-left:0
    }

    .form-description {
        width: 90%
    }

    .submit-bottom {
        display: block
    }

    .submit-side {
        display: none
    }
}

.hero-plugin {
    height: 550px;
    background-size: cover
}

.hero-image {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 469px;
    transform: translateY(20%);
    background-size: contain
}

.appstore {
    padding-top: 120px;
    padding-bottom: 20px
}

.hero-quote {
    padding-bottom: 50px
}

.hero-quote p {
    font-size: large;
    height: 216px;
    margin-right: 10px;
    letter-spacing: normal;
    color: #1d2022
}

.mb-120 {
    margin-bottom: 120px
}

.mb-160 {
    margin-bottom: 160px
}

@media (max-width: 801px) {
    .hero-quote p {
        font-size:large;
        margin-left: 10px
    }
}

@media (max-width: 769px) {
    .hero-plugin {
        height:300px
    }

    .hero-image {
        height: 250px;
        transform: translateY(5%)
    }

    .appstore {
        padding-top: 70px;
        padding-bottom: 10px
    }

    .hero-quote {
        margin-bottom: -50px;
        padding-bottom: 0
    }

    .hero-quote p {
        font-size: large
    }
}

@media (max-width: 460px) {
    .hero-plugin {
        height:300px
    }

    .hero-image {
        height: 209px;
        transform: translateY(30%)
    }

    .appstore {
        padding-top: 50px;
        padding-bottom: 20px
    }

    .hero-quote {
        margin-bottom: -50px;
        padding-bottom: 0
    }

    .hero-quote p {
        font-size: large;
        margin-left: 15px
    }
}

@media (max-width: 330px) {
    .hero {
        height:200px
    }

    .hero-image {
        height: 150px;
        transform: translateY(10%)
    }

    .appstore {
        padding-top: 30px;
        padding-bottom: 10px
    }

    .hero-quote {
        margin-bottom: -20px;
        padding-bottom: 0
    }

    .hero-quote p {
        font-size: large;
        margin-left: 15px
    }
}

input.btn-mailchimp-form,input.button-mailchimp-form {
    margin-left: -20px;
    padding: 6px 20px;
    border-radius: 2px;
    background-color: #fac141
}

.mailchimp-form-plugin {
    margin-top: -200px;
    margin-left: 100px;
    padding-left: 100px
}

.form-description-mailchimp-form p {
    font-size: medium;
    width: 500px;
    margin: 50px 0 0 70px;
    padding-top: 50px
}

.bot-field,.support-input-hidden {
    position: absolute;
    left: -5000px
}

@media (max-width: 990px) {
    input.btn-mailchimp-form,input.button-mailchimp-form {
        margin-left:100px
    }
}

@media(max-width: 800px) {
    .mailchimp-form-plugin {
        margin-left:50px
    }

    .form-description-mailchimp-form {
        margin-left: 140px
    }
}

@media (max-width: 770px) {
    .mailchimp-form-plugin {
        margin-left:50px
    }

    .form-description-mailchimp-form {
        margin-left: 145px
    }

    .form-description-mailchimp-form p {
        width: 600px;
        margin-left: -80px
    }

    input.btn-mailchimp-form,input.button-mailchimp-form {
        margin-left: 130px
    }
}

@media (max-width: 767px) {
    .mailchimp-form-plugin {
        margin-top:-50px;
        margin-left: 0;
        padding-left: 10px
    }

    input.email-mailchimp-form {
        width: 80%;
        min-width: 100px;
        margin-left: 90px;
        text-align: center
    }

    input.btn-mailchimp-form,input.button-mailchimp-form {
        margin-top: 10px;
        margin-left: 270px;
        padding: 6px 20px;
        border-radius: 2px
    }

    .form-description-mailchimp-form {
        margin-top: 10px;
        margin-left: 120px;
        padding-top: 10px;
        text-align: center
    }

    p {
        font-size: medium;
        line-height: var(--line-height)
    }
}

@media (max-width: 430px) {
    input.email-mailchimp-form {
        width:100%;
        min-width: 100px;
        margin-left: 0;
        text-align: center
    }

    input.btn-mailchimp-form,input.button-mailchimp-form {
        margin-top: 10px;
        margin-left: 100px;
        padding: 6px 20px;
        border-radius: 2px
    }

    .form-description-mailchimp-form {
        margin-top: 10px;
        margin-left: 10px;
        padding-top: 10px;
        text-align: center
    }

    .form-description-mailchimp-form p {
        width: 400px;
        margin-top: -50px;
        margin-left: -10px
    }

    p {
        font-size: medium;
        line-height: var(--line-height)
    }
}

@media (max-width: 400px) {
    input.btn-mailchimp-form,input.button-mailchimp-form {
        margin-left:70px
    }

    input.email-mailchimp-form {
        width: 300px
    }

    .form-description-mailchimp-form p {
        width: 350px
    }
}

@media (max-width: 320px) {
    .form-description {
        width:90%
    }

    .form-check-label,.mailchimp-form {
        margin-left: 0
    }

    input.email-mailchimp-form {
        margin-left: -35px
    }

    input.btn-mailchimp-form,input.button-mailchimp-form {
        margin-left: 50px
    }

    .form-description-mailchimp-form p {
        width: 300px
    }
}

.d-flex {
    display: flex
}

.cms-quote {
    font-size: xx-large;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    width: 80px;
    height: 242px;
    letter-spacing: normal;
    color: #d6dcde
}

.cms-quote-img {
    height: 48px;
    margin-right: 30px;
    opacity: .5
}

.quote-image {
    width: 610px;
    margin-top: 50px;
    margin-left: -200px
}

@media (max-width: 1300px) {
    .quote-image {
        margin-left:-390px
    }

    .quote-container .with-author-img {
        padding-right: 120px
    }
}

@media (max-width: 802px) {
    .quote-container .with-author-img {
        padding-right:0
    }
}

.story-img {
    width: 36px
}

@media (max-width: 801px) {
    .cms-quote-wrapper {
        padding-top:0
    }

    .cms-quote {
        font-size: xx-large;
        margin-left: -20px
    }

    .cms-quote-height {
        height: 30px;
        margin-top: -16px
    }

    .story-img {
        width: 30px
    }

    .quote-image {
        width: 410px;
        margin-top: -260px;
        margin-left: 100px
    }
}

@media (max-width: 769px) {
    .cms-quote {
        font-size:xx-large;
        margin-left: -20px
    }

    .story-img {
        width: 30px
    }

    .quote-image {
        width: 410px;
        margin-top: -260px;
        margin-left: 100px
    }

    .cms-quote-img {
        height: 20px;
        margin-right: 15px
    }
}

@media(max-width: 426px) {
    .featured-subtitle {
        margin-left:20px
    }

    .featured-designer-content {
        margin: 0 20px
    }

    .featured-designer {
        margin-top: 5px
    }

    .support-videos iframe {
        width: 300px;
        height: 100%;
        margin-bottom: -20px
    }

    h1.article-title {
        margin: 40px auto 0
    }

    .striped h1,div.article-subtitle {
        max-width: 370px
    }

    .striped p {
        margin: 0
    }

    .featured-profile-main-image {
        margin: 20px 0
    }

    .cms-quote {
        font-size: xx-large;
        margin-left: -10px
    }

    .quote-container {
        margin-left: 0
    }

    .story-img {
        width: 30px
    }
}

.cms-img-caption-right,.img-caption {
    font-size: small;
    text-align: center
}

@media(max-width: 321px) {
    .support-videos iframe {
        width:250px;
        height: 100%;
        margin-bottom: 10px
    }

    .story-link p {
        margin-bottom: 80px
    }
}

.row {
    max-width: 960px;
    display: block;
    margin: auto -15px
}

.col-sm-12,.col-sm-4 {
    margin: 0 15px;
    float: left
}

.col-sm-4 {
    width: 30%
}

.creator-header-wrapper {
    height: 401px;
    background-size: cover
}

.creator-header {
    margin-top: 0;
    padding-top: 40px
}

.creator-profile-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -96px
}

.creator-profile-container {
    margin-right: auto;
    margin-left: auto
}

.creator-avatar img {
    width: 192px;
    height: 192px;
    border-radius: 50%;
    background: #d6dcde
}

.creator-name h3 {
    font-size: large;
    margin-top: 20px;
    text-align: center;
    color: #46acdb
}

.creator-occupation h4 {
    font-size: medium;
    text-align: center
}

.creator-social {
    display: flex;
    justify-content: space-between;
    margin-top: 15px
}

.creator-back-next-links {
    margin-top: 98px
}

.creator-story-plugin {
    display: flex;
    margin-top: 30px
}

.creator-story-plugin>div {
    background-color: #eff1f2
}

.creator-story-container {
    width: 380px;
    height: 300px;
    margin-right: 12px
}

.creator-story-image {
    width: 517px;
    height: 300px;
    margin-left: 12px;
    background-size: cover
}

.creator-story-content {
    margin: 20px 30px
}

.creator-story-content h3 {
    font-size: large;
    font-weight: 700;
    line-height: var(--line-height);
    margin: 0;
    text-transform: uppercase
}

.creator-story-content p {
    font-size: medium;
    font-weight: 700;
    line-height: var(--line-height);
    margin-bottom: 20px;
    color: #abb1b1
}

.creator-read-story-button-wrapper {
    margin: 25px 30px
}

.featured-creators-header,.featured-creators-main {
    margin-right: 15px;
    margin-left: 15px
}

.creator-read-story-button-wrapper button {
    font-size: large;
    font-weight: 700;
    line-height: var(--line-height);
    width: 100%;
    height: 60px;
    color: #fff;
    border-color: transparent;
    border-radius: 4px;
    background: #f8a549
}

.featured-creators-wrapper h1 {
    color: #58595a
}

.featured-creator .creator-avatar img {
    width: 187px;
    height: 187px
}

.featured-creators-list {
    margin-top: 27px
}

.see-more-creators {
    margin-top: 17px
}

.featured-creators-main {
    margin-bottom: 86px
}

.recently-added-tags-wrapper>button.active,.recently-added-tags-wrapper>button:hover {
    background: #d6dcde
}

.recently-added-tags-wrapper>button {
    font-size: medium;
    line-height: var(--line-height);
    float: left;
    margin-bottom: 10px;
    padding: 10px 16px;
    text-align: center;
    color: #1d2022;
    border-color: transparent;
    border-radius: 4px;
    background: #eff1f2
}

img.profile,img.thumb {
    background-color: #eee
}

.recently-added-tags-wrapper:after {
    display: table;
    clear: both;
    content: ''
}

.featured-creators-main>h3 {
    font-size: large;
    line-height: var(--line-height);
    color: #58595a
}

.featured-creators-main>p {
    font-size: medium;
    line-height: var(--line-height);
    color: #555
}

.recently-added-gallery {
    margin-top: 12px
}

.recently-added-gallery>div {
    margin: 0 -10px 17px
}

.recently-added-gallery .col-md-4 {
    padding: 0 10px 10px
}

#login-form .btn,div.search-result {
    margin-bottom: 20px
}

.mt-0 {
    margin-top: 0
}

.ml-10 {
    margin-left: 10px
}

.mt-40 {
    margin-top: 40px
}

.apple-app-store-button-img,.google-app-store-button-img,.windows-app-store-button-img,samsung-galaxy-store-button {
    height: 40px
}

.apple-app-store-button-img {
    width: 120px
}

.windows-app-store-button-img {
    width: 111px
}

.google-app-store-button-img {
    width: 136px
}

.samsung-galaxy-store-button {
    width: 148px
}

h1.concepts-android-support {
    margin: 20px 0 10px;
    text-align: left
}

.support-submit-input {
    width: auto;
    padding: 0 20px;
    border-radius: 20px;
    background-color: #5d5d5d
}

.search-img {
    overflow: hidden;
    height: 200px;
    text-align: center;
    background: 0 0;
    border: 1px solid var(--bg-secondary-color);
    border-radius: 4px
}

.search-img img {
    width: 100%;
    height: inherit;
    margin: auto;
    object-fit: cover
}

a.search-title-link {
    text-transform: none
}

p.result-title {
    font-size: medium;
    line-height: var(--line-height);
    margin: 8px 0 0
}

h1.category {
    font-size: medium;
    margin-bottom: 10px;
    margin-left: 15px
}

.concepts-platform-support-wrapper {
    padding: 30px 0
}

.concepts-platform-support-wrapper p.result-description {
    font-size: medium;
    line-height: 22px;
    margin: 0;
    padding: 0 0 5px
}

.concepts-privacy-wrapper p {
    font-size: medium;
    line-height: 24px
}

.concepts-privacy-wrapper a.red {
    color: #c93b3b
}

.concepts-privacy-wrapper td {
    padding: 15px 10px;
    vertical-align: top
}

.concepts-privacy-wrapper tr:first-child {
    font-weight: 700;
    background-color: var(--bg-highlight-color)
}

.ce-hero {
    width: 100%;
    height: 45%;
    min-height: 250px;
    background-color: #1d2022;
    background-image: url('https://cdn.tophatch.com/img/4.1-hero.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

img.profile {
    width: 32px;
    height: 32px;
    border: 1px solid #1d2022;
    border-radius: 50%;
    background-image: url('https://cdn.tophatch.com/img/5.0/btn-gallery-user@2x.png')
}

img.thumb {
    width: 100px;
    min-height: 40px;
    border: 1px solid #ccc;
    background-image: url('https://cdn.tophatch.com/img/5.0/thumb-blank-sm.jpg');
    background-size: 100px 40px
}

.grid {
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
    background-image: url('https://cdn.tophatch.com/img/5.0/grid.png');
    background-repeat: repeat;
    background-size: 32px 32px
}

a.social#pinterest {
    background-image: url('https://cdn.tophatch.com/img/social/social-pinterest@2x.png')
}

a.social#twitter {
    background-image: url('https://cdn.tophatch.com/img/social/social-twitter@2x.png')
}

a.social#facebook {
    background-image: url('https://cdn.tophatch.com/img/social/social-facebook@2x.png')
}

a.social#youtube {
    background-image: url('https://cdn.tophatch.com/img/social/social-youtube@2x.png')
}

a.social#medium {
    background-image: url('https://cdn.tophatch.com/img/social/social-medium@2x.png')
}

a.social#tiktok {
    background-image: url('https://cdn.tophatch.com/img/social/social-tiktok@2x.png')
}

a.social#instagram {
    background-image: url('https://cdn.tophatch.com/img/social/social-instagram@2x.png')
}

a.social#weibo {
    background-image: url('https://cdn.tophatch.com/img/social/social-weibo@2x.png')
}

a.social#youku {
    background-image: url('https://cdn.tophatch.com/img/social/social-youku@2x.png')
}

a.social#zhihu {
    background-image: url('https://cdn.tophatch.com/img/social/social-zhihu@2x.png')
}

a.social#jianshu {
    background-image: url('https://cdn.tophatch.com/img/social/social-jianshu@2x.png')
}

a.social#wechat {
    background-image: url('https://cdn.tophatch.com/img/social/social-wechat@2x.png')
}

a.social#whatsapp {
    background-image: url('https://cdn.tophatch.com/img/social/social-whatsapp@2x.png')
}

a.social#douban {
    background-image: url('https://cdn.tophatch.com/img/social/social-douban@2x.png')
}

.list-lower-alpha {
    list-style-type: lower-alpha
}

@media (min-width: 768px) {
    .shorten {
        display:inline-block
    }

    .space {
        padding: 30px 0
    }

    .tag-footer {
        margin-top: 30px
    }

    .footer-social,.footer-social form,.footer-social form input {
        margin-left: 0;
        padding-left: 0
    }

    .tag-footer .container {
        padding: 0 30px;
        margin: 0 auto
    }

    .nav {
        padding: 10px 0
    }

    .nav a {
        margin: 0 0 0 40px
    }

    .sort {
        padding: 5px 0
    }

    .sort a {
        font-size: small;
        margin-left: 20px
    }

    .quote-content,div.subdued-title {
        font-size: large
    }

    .tagline {
        margin-bottom: 20px
    }

    .concepts-download,div.drawing-container {
        text-align: center
    }

    .concepts-logo img {
        width: 235px;
        height: 43px;
        margin: 0
    }

    .concepts-logo {
        margin: 0
    }

    .concepts-platform-support-wrapper #mc-embedded-subscribe-form,.hero img {
        padding: 0
    }

    .help-button {
        float: left;
        max-height: 80px;
        margin-right: 15px
    }

    .learnandexplore {
        margin-top: 10px
    }

    .quote-content {
        font-weight: lighter;
        line-height: var(--line-height)
    }

    .quote-img {
        height: 48px;
        margin-top: 15px;
        opacity: .5
    }

    div.th-breadcrumb {
        padding: 15px 30px
    }

    div.th-breadcrumb .links {
        float: right;
        text-align: right
    }

    div.para-left {
        width: 60%;
        padding: 80px 0
    }

    div.para-right {
        width: 60%;
        margin-left: 40%;
        padding: 100px 0
    }

    div.graphic {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
    }

    div.rel-center {
        margin: 0 auto
    }

    .concepts-platform-support-wrapper #mc_embed_signup {
        margin-left: 95px
    }

    .subnav {
        padding-left: 10px
    }
}

@media (min-width: 960px) {
    .manual-sidebar {
        width:200px
    }

    #sidebar-toggle {
        display: none
    }
}

.manual-sidebar {
    overflow-y: auto;
    position: fixed;
    z-index: 9;
    top: 0;
    bottom: 0;
    left: 0;
    padding-left: 15px;
    border-right: 1px solid #d6dcde;
    background: #fff
}

.manual-sidebar li {
    list-style-type: none;
    text-align: left
}

.subnav li {
    line-height: 25px;
    padding-right: 30px;
    margin-bottom: 5px
}

.sidebar-nav-row {
    position: relative;
    padding-bottom: 15px
}

.concepts-manual-wrapper .subsub {
    margin-top: 0;
    padding-left: 20px
}

.sidebar-nav-item-row {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: space-between
}

#sidebar-toggle {
    display: none;
    background-color: var(--bg-secondary-color);
    padding: 12px 15px 8px;
    border-radius: 4px;
    position: fixed;
    top: 130px;
    left: 10px;
    z-index: 9998;
    opacity: .8
}

.icon-bar {
    height: 1px;
    border-bottom: 1px solid var(--text-color-subdued);
    display: block;
    width: 16px;
    margin: 2px 0
}

.sidebar-close-bar {
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 16px;
    padding: 10px 0 10px 24px;
    border-bottom: 1px solid var(--bg-secondary-color);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0.5C0.447715 0.5 0 0.947715 0 1.5C0 2.05228 0.447715 2.5 1 2.5H3C3.55228 2.5 4 2.05228 4 1.5C4 0.947715 3.55228 0.5 3 0.5H1ZM1 4.5C0.447715 4.5 0 4.94772 0 5.5C0 6.05228 0.447715 6.5 1 6.5H3C3.55228 6.5 4 6.05228 4 5.5C4 4.94772 3.55228 4.5 3 4.5H1ZM0 9.5C0 8.94771 0.447715 8.5 1 8.5H3C3.55228 8.5 4 8.94771 4 9.5C4 10.0523 3.55228 10.5 3 10.5H1C0.447715 10.5 0 10.0523 0 9.5ZM1 14.5C0.447715 14.5 0 14.9477 0 15.5C0 16.0523 0.447716 16.5 1 16.5H17C17.5523 16.5 18 16.0523 18 15.5V14.5V2.5V1.5C18 0.947715 17.5523 0.5 17 0.5H8C7.44772 0.5 7 0.947715 7 1.5C7 2.05228 7.44771 2.5 8 2.5H16V14.5H1Z' fill='%235d5d5d'/%3E%3C/svg%3E")
}

.sidebar-head {
    margin-top: 30px;
    padding-bottom: 20px
}

.sidebar-head h1 {
    font-size: medium;
    margin: 10px 0
}

.sidebar-foot a,.sidebar-head a {
    font-size: medium;
    margin-left: 15px
}

.sidebar-foot {
    padding: 30px 0;
    border-top: 1px solid var(--bg-secondary-color)
}

.concepts-manual-wrapper .nav {
    padding: 25px 0
}

.concepts-manual-wrapper .navbar-default {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    padding: 10px
}

.subnav {
    padding-left: 20px
}

.concepts-manual-wrapper input[type=text],input.search-box {
    width: 100%;
    min-width: 120px;
    padding: 8px 8px 8px 32px;
    color: var(--text-color-subdued);
    border-bottom: 3px solid var(--bg-secondary-color);
    outline: 0;
    background-color: var(--bg-secondary-color);
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.1545 5.98428C13.5678 7.66855 13.3481 10.1796 11.6638 11.5929C9.97953 13.0061 7.46847 12.7865 6.0552 11.1022C4.64193 9.41791 4.86162 6.90686 6.54589 5.49359C8.23016 4.08032 10.7412 4.30001 12.1545 5.98428ZM13.9879 11.9995C15.5227 9.83418 15.4725 6.82706 13.6866 4.69871C11.5633 2.16829 7.79074 1.83823 5.26032 3.9615C2.7299 6.08478 2.39984 9.85734 4.52312 12.3878C6.3178 14.5266 9.29081 15.0934 11.6961 13.9354L14.8103 17.6468C15.3428 18.2814 16.2889 18.3642 16.9236 17.8317C17.5582 17.2992 17.6409 16.3531 17.1084 15.7184L13.9879 11.9995Z' fill='black'/%3E%3C/svg%3E")
}

@media(max-width: 550px) {
    .multicolumn2 .column {
        float:initial!important;
        width: initial!important
    }
}

.p-10-0 {
    padding: 10px 0
}

.instructions-img-width {
    width: 44px
}

.clear-both {
    clear: both
}

.m-20-0-10 {
    margin: 20px 0 10px
}

.ios-support-container {
    margin-bottom: 0;
    padding: 50px 0
}

.h-60 {
    height: 60px
}

.users-view-submit-btn {
    font-size: medium;
    font-weight: 700;
    color: var(--text-color-bright);
    background-color: var(--theme-blue)
}

.msg {
    background-color: var(--bg-secondary-color);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px
}

.msg-orange,.msg-warn,.msg-yellow {
    border-left: 4px solid var(--theme-orange)
}

.msg-error,.msg-red {
    border-left: 4px solid var(--theme-red)
}

.msg-blue,.msg-info,.msg-notice {
    border-left: 4px solid var(--theme-blue)
}

.msg-green,.msg-success {
    border-left: 4px solid var(--theme-green)
}

.massive-text {
    font-size: xx-large
}

.large-text {
    font-size: x-large
}

.med-text {
    font-size: large
}

.logo-co {
    max-width: 94px;
    padding: 30px 20px;
    max-height: 40px;
    margin: 0 auto
}

@media(max-width: 768px) {
    #sidebar {
        display:none
    }

    .trusted-by-logo-wrapper,.trusted-by-title {
        text-align: center
    }

    .logo-co {
        max-width: 84px;
        padding: 30px 14px;
        max-height: 30px
    }
}

@media(max-width: 460px),(max-height:720px) {
    .logo-co {
        max-width:60px;
        padding: 10px 16px;
        max-height: 30px
    }

    .three-column {
        -webkit-columns: 2 100px;
        -moz-columns: 2 100px;
        columns: 2 100px
    }

    .flex-item {
        max-width: 45%
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-main-color:#000000;
        --bg-secondary-color: #1A1A1A;
        --bg-disabled-color: #303030;
        --bg-highlight-color: #303030;
        --text-color-normal: #a1a8ab;
        --text-color-subdued: #72787a;
        --text-color-bright: #ffffff;
        --text-color-header: #ffffff;
        --text-color-link: #389DCE;
        --text-color-link-hover: #267eab;
        --text-color-green-accent: #496D6F;
        --theme-light-blue: #2D5070;
        --theme-blue: #389DCE
    }

    hr {
        background-image: url('https://cdn.tophatch.com/teams/img/line-dark.png');
        opacity: .8
    }

    .logo {
        background-image: url('https://cdn.tophatch.com/img/6.x/Concepts-6-Logo-Wide-Dark.svg')
    }

    .lang-switcher,.platform-switcher {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L0.803848 0.75L11.1962 0.75L6 6Z' fill='%23aaaaaa'/%3E%3C/svg%3E%0A")
    }

    .lang-switcher.white,.platform-switcher.white {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L0.803848 0.75L11.1962 0.75L6 6Z' fill='%23ffffff'/%3E%3C/svg%3E%0A")
    }

    .platform#ios {
        background-image: url("https://cdn.tophatch.com/teams/img/platform-ios-light.svg")
    }

    .platform#android {
        background-image: url("https://cdn.tophatch.com/teams/img/platform-android-light.svg")
    }

    .platform#windows {
        background-image: url("https://cdn.tophatch.com/teams/img/platform-windows-light.svg")
    }

    .concepts-manual-wrapper input[type=text],input.search-box {
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.1545 5.98428C13.5678 7.66855 13.3481 10.1796 11.6638 11.5929C9.97953 13.0061 7.46847 12.7865 6.0552 11.1022C4.64193 9.41791 4.86162 6.90686 6.54589 5.49359C8.23016 4.08032 10.7412 4.30001 12.1545 5.98428ZM13.9879 11.9995C15.5227 9.83418 15.4725 6.82706 13.6866 4.69871C11.5633 2.16829 7.79074 1.83823 5.26032 3.9615C2.7299 6.08478 2.39984 9.85734 4.52312 12.3878C6.3178 14.5266 9.29081 15.0934 11.6961 13.9354L14.8103 17.6468C15.3428 18.2814 16.2889 18.3642 16.9236 17.8317C17.5582 17.2992 17.6409 16.3531 17.1084 15.7184L13.9879 11.9995Z' fill='white'/%3E%3C/svg%3E")
    }

    .sidebar-close-bar {
        background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0.5C0.447715 0.5 0 0.947715 0 1.5C0 2.05228 0.447715 2.5 1 2.5H3C3.55228 2.5 4 2.05228 4 1.5C4 0.947715 3.55228 0.5 3 0.5H1ZM1 4.5C0.447715 4.5 0 4.94772 0 5.5C0 6.05228 0.447715 6.5 1 6.5H3C3.55228 6.5 4 6.05228 4 5.5C4 4.94772 3.55228 4.5 3 4.5H1ZM0 9.5C0 8.94771 0.447715 8.5 1 8.5H3C3.55228 8.5 4 8.94771 4 9.5C4 10.0523 3.55228 10.5 3 10.5H1C0.447715 10.5 0 10.0523 0 9.5ZM1 14.5C0.447715 14.5 0 14.9477 0 15.5C0 16.0523 0.447716 16.5 1 16.5H17C17.5523 16.5 18 16.0523 18 15.5V14.5V2.5V1.5C18 0.947715 17.5523 0.5 17 0.5H8C7.44772 0.5 7 0.947715 7 1.5C7 2.05228 7.44771 2.5 8 2.5H16V14.5H1Z' fill='%235d5d5d'/%3E%3C/svg%3E")
    }

    .ec-left {
        background-image: url('https://cdn.tophatch.com/img/6.x/sprig-left-dark.svg')
    }

    .ec-right {
        background-image: url('https://cdn.tophatch.com/img/6.x/sprig-right-dark.svg')
    }

    .marker-green {
        background-image: url('https://cdn.tophatch.com/img/6.x/concepts-marker-darkgreen.png')
    }

    .marker-purple {
        background-image: url('https://cdn.tophatch.com/img/6.x/concepts-marker-darkpurple.png')
    }
}