: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, p, div { font-size: medium; line-height: var(--line-height); color: var(--text-color-normal); }
html, body { overflow-x: hidden; 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; line-height: var(--line-height); margin: 50px auto 10px; }
h3 { font-size: large; line-height: var(--line-height); margin: 30px auto 10px; }

p { font-size: medium; line-height: var(--line-height); margin: 0 0 20px; }
a { text-decoration: none; color: var(--text-color-link); }
a:active, a:hover { outline: 0; color: var(--text-color-link-hover); }

button { cursor: pointer; }

.red { color: var(--theme-red); }
.blue { color: var(--theme-blue); }
.light-green { color: var(--theme-green); }
.green-accent { color: var(--text-color-green-accent); }
.purple { color: var(--theme-purple); }
.bright { color: var(--text-color-bright); }

a.red:hover { color: var(--theme-red); }
ul, ol { line-height: var(--line-height); margin-top: 15px;  }
ul li, ol li { font-size: medium; line-height: var(--line-height); margin-bottom: 5px; }
b, strong, .bold { font-weight: bold; }
.not-bold { font-weight: normal; }
em, .em { font-style: italic; }
small, .small { font-size: small; line-height: var(--line-height); color: var(--text-color-subdued); }

div.mobile-pad { width: auto; margin: 0 auto; }
.concepts-mobile-pad { padding: 0 20px; } /* todo remove */
.concepts-mobile-pad > div { 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; background-repeat: no-repeat; }

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

/* nav */
header { padding-top: 40px; }
.header { margin: 0; }
header, .logo-nav-main-wrapper, .header-email-avatar-wrapper, .header-email-avatar-wrapper .icon { display: flex; align-items: center; justify-content: space-between; }

.email-avatar-wrapper { display: flex; align-items: center; }


.nav-main { display: flex; align-items: center; justify-content: flex-end; margin:10px 0; gap:20px; width:100%; }
.nav-main>a { color: var(--text-color-subdued); font-size: small; }
.margin-right-40px { margin-right: 40px; }
.nav-main .icon { display: flex; align-items: center; }
.logo { min-width: 180px; height: 38px; background-image: url('https://cdn.tophatch.com/img/6.x/Concepts-6-Logo-Wide.svg'); background-repeat: no-repeat; background-size: 180px 38px; }
.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-repeat: no-repeat;background-size: 180px 38px; }
.nav-crumb { font-size: medium; line-height: var(--line-height);  margin: 30px 0 50px; color: var(--text-color-subdued); }
.nav-crumb a { display: inline-block; color: var(--text-color-subdued); }
.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; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.pull-right { float:right; }

.two-column { padding-top: 15px; -webkit-columns: 2 100px; -moz-columns: 2 100px; columns: 2 100px; gap:30px; align-content: start; }
.three-column { padding-top: 15px; -webkit-columns: 3 100px; -moz-columns: 3 100px; columns: 3 100px; gap:30px; align-content: start; } /* degrades to 2 column on small screens */
.two-column p, .three-column p { margin-top: 0; margin-bottom: 10px; }
.two-column > *, .three-column > * { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
.two-column h2, .two-column h3, .three-column h2, .three-column h3 { margin: 0; padding: 30px 0 10px; } /* bug in css columns */

.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; border-collapse: collapse; }
td { font-size: medium; line-height: var(--line-height); padding: 8px 4px; vertical-align: middle; }
td > input[type=text] { font-size: medium; 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; }
.footer-columns ul li { font-size: medium; line-height: var(--line-height); }
.container-footer { margin-top: 68px; padding: 72px 0; }
.container-footer p { font-size: medium; line-height: var(--line-height); }

.social-section { margin-bottom: 10px; }
.social { margin: 7px 0 8px; }
.social p { margin: 0; }
.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; }
.editors-choice { display:inline-flex; flex-direction: row; gap:10px; margin:10px; align-items: center; }
.ec-left { display:inline-block; width:48px; height:100px; background-image: url('https://cdn.tophatch.com/img/6.x/sprig-left.svg'); background-repeat: no-repeat; background-size: 48px 100px; }
.ec-right { display:inline-block; width:48px; height:100px; background-image: url('https://cdn.tophatch.com/img/6.x/sprig-right.svg'); background-repeat: no-repeat; background-size: 48px 100px; }
.ec-middle { text-align: center; }
.ec-middle>div.platform { font-weight: normal; }

input, textarea, select, option { font-size: medium; line-height: var(--line-height); color: var(--text-color-normal); background-color: var(--bg-highlight-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type='text'], input[type='password'], input[type='email'], input[type='number'], 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='text']:hover, input[type='password']:hover, input[type='email']:hover, textarea:hover, select:hover { border: 1px solid var(--bg-highlight-color); outline: none; }
input[type='text']:focus, input[type='password']:focus, textarea:focus, select:focus { border: 1px solid var(--text-color-link); outline: none; }
input[type='text']:disabled, input[type='password']:disabled, input[type='checkbox']:disabled, textarea:disabled, select:disabled { background-color: var(--bg-disabled-color); color: var(--text-color-subdued); }
input[type='checkbox'] { font-size: medium; width: 16px; height: 16px; margin: 0 8px 0 0; border: 1px solid var(--text-color-normal); border-radius: 2px; outline: none;  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; }
input[type='submit']:disabled, button:disabled { background-color: var(--bg-disabled-color); color: var(--text-color-subdued); }
textarea { display: block; width: 80%; min-width: 280px; max-width: 100%; padding: 10px; border: 1px solid var(--bg-highlight-color); background: var(--bg-main-color); border-radius: 4px; font-family: var(--text-font); font-size: medium; }
select {min-width: 180px; padding: 10px;  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-weight:bold; font-size: small; color:var(--text-color-subdued); }
.mock-select>a:hover { background-color: var(--bg-highlight-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 {padding: 10px; cursor: move; cursor: grab; cursor: -moz-grab; cursor: -webkit-grab; border: 1px dashed var(--text-color-subdued); }
.upload-label { display: flex; align-items: center; }
.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: 0.1px; height: 0.1px; opacity: 0;  }
.interest-label { font-size: medium; font-weight: bold; position: relative; top: -45px;  text-align: center;  }
#profile-icon, #profile-icon-preview {display: block; width: 72px; min-width: 72px; height: 72px; min-height: 72px; border: 2px solid var(--bg-highlight-color); background-color: var(--bg-secondary-color); background-size: cover;  }
.profile-icon {display: block; width: 48px; height: 48px; border: 2px solid var(--bg-highlight-color); background-color: var(--bg-secondary-color); background-size: cover;  }

/* nav */
header { display:grid; align-items:center; grid-template-columns:180px auto; padding:30px 0; user-select: none; }
.logo { display: inline-block; height:38px; min-width:180px; background-size: 180px 38px; background-repeat: no-repeat; }
.nav-crumb { margin-top: 15px; font-size: medium; font-weight: bold; color: var(--text-color-subdued); }
.nav-crumb a { display:inline-block; color: var(--text-color-subdued); }
#search-btn { background-size:18px; background-position:center; display:inline-block; 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 { vertical-align: middle; line-height: normal; display: inline-block; }
.platform-switcher, .lang-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; }
.platform { background-repeat: no-repeat; background-position: 6px; background-size: 16px; display:inline-block; padding:6px 12px 6px 28px !important; border-radius: 4px; font-size:small; display:block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight:bold; cursor:pointer; }
.platform-selected { background-color:var(--bg-highlight-color); }
.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; }

.lang { border-radius: 4px; font-size:small; font-weight:bold; text-transform:uppercase; }
.sep { display:inline-block; color:var(--bg-secondary-color); font-weight: bold; }

.tag, .badge, .filter { background-color:var(--bg-secondary-color); margin-right:10px; border-radius: 4px; display:inline-block; padding: 4px 10px; font-size:small; }
.filter { cursor: pointer; background-color:var(--bg-main-color); border:1px solid var(--bg-secondary-color); user-select: none; }
.filter:hover { background-color:var(--bg-secondary-color); }
.filter.selected { background-color:var(--bg-highlight-color); }
.hidden { display:none; }

.table-responsive { min-height: .01%; overflow-x: auto; }
.table-responsive > table { border:none; border-collapse: collapse; overflow-x: hidden; }

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

pre { font-size: medium; line-height: var(--line-height); 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; color: var(--text-color-normal); border: none; background-color: var(--bg-secondary-color); }

/* general responsiveness */
@media (max-width: 641px) {
    section { margin: 10px 0; }
    .thank-you-platform a { font-size: medium; }
    .thank-you-platform p { font-size: medium; }
    /* billing */
    .nav-crumb { font-size: medium; margin: 0; }
    .billing-team-info-wrapper { align-items: normal; flex-direction: column;  }
    .icon-rows > div { margin: 0; }
    .billing-form-inputs-wrapper { margin-bottom: 0; }
    .billing-form-input-btn-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: normal;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 { display: none; }
    .billing-table-mobile { display: table; }
    .billing-form-inputs-wrapper { flex-direction: column; }
    .billing-form-btn-wrapper { justify-content: center; }
    .billing-form-btn-wrapper p { font-size: medium; line-height: var(--line-height); }
    .billing-renews { font-size: medium; margin: 10px auto 20px; }
    /*dashboard*/
    .dashboard-section h2 { margin: 10px 0 5px; }
    .personal-info div, .my-teams div { margin: 0 0 20px 12px; }
    .personal-info a, .my-teams a { font-size: medium; }
    .icon-rows .icon-team-name { font-size: large; line-height: var(--line-height); }
    /* header */
    header { align-items: normal; flex-direction: column; justify-content: normal; margin-top: 15px;  }
    .header-email-avatar-wrapper { justify-content: space-between; margin-top: 10px; }
    /* licenses-table */
    .licenses-table-header-wrapper h2 { font-size: large; }
    .licenses-table-header-wrapper span { font-size: medium; }
    .licenses-table thead td, .invoice-table thead td { font-size: medium; }
    .licenses-table tbody td, .invoice-table tbody td { font-size: medium; }
    .licenses-table input[type='checkbox'] { margin: 0; }
    /*invoices*/
    .invoices-pagination a { font-size: medium; }
    /* footer */
    footer h3 { font-size: large; line-height: var(--line-height); }
    footer ul li, .container-footer p { font-size: medium; line-height: var(--line-height); }
    .container-footer {margin-top: 45px; padding: 37px 0;  }
    .social { margin: 7px 0 28px; }
    /*user detail profile*/
    .user-detail-info-wrapper { display: flex; flex-direction: column; }
    .user-name-detail { font-size: large; line-height: var(--line-height); }
    .user-detail-email { font-size: medium; line-height: var(--line-height); }
    .user-detail-icon-rows div { margin: 6px 0 6px 60px; }
    .user-detail-language { font-size: medium; line-height: var(--line-height); }
    .user-detail-icon-rows { margin-bottom: 0; }
    .user-receive-emails-status { margin: 22px 0 7px !important; }
    /*user edit profile*/
    .user-avatar-wrapper { margin-bottom: 0; }
    .icon-rows  .drag-and-drop-area { margin-left: 12px; }
    .drag-and-drop-text { display: none; }
    .upload { border: none; }
    .edit-user-profile-inputs-wrapper { flex-direction: column; }
    .edit-user-profile-inputs-wrapper div:not(:first-child) { margin: 0; }
    .edit-user-profile-input-wrapper { display: inline-block; }
    .edit-user-profile-input-wrapper { display: block; }
    .password-eye-icon { right: 15px; }
    .center-submit-btn-wrapper { display: flex; justify-content: center; }
    input[type=text], input[type=password], input[type=email], textarea, select, .edit-user-profile-input-wrapper select { box-sizing: border-box; width: 100%; max-width: none; }
    input.input-with-checked-sign-icon { width: 90%; }
    /*invoices*/
    .invoices-pagination span { font-size: small; padding: 0 8px; }
    /*modal popup*/
    .modal-content { width: 280px; }
    .modal-cancel-btn, .modal-confirm-btn { font-size: medium; width: 100px; height: 35px; }
    .close { font-size: large; }

    header { display:block; }
    .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; }
    .header-user-email { display: none; }
    .download-system-requirements-wrapper { display: block; }
    .download-system-requirements-wrapper div:first-child { margin-bottom: 15px; }
}

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

/* Support */
#mc_embed_signup form {position: relative;  display: block; padding: 10px 0 10px 3%;;text-align: left; }
#mc_embed_signup h2 {font-size: large; font-weight: bold; margin: 15px 0; padding: 0;  }
#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 {font-size: medium; font-weight: bold; line-height: 32px; display: inline-block;  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 none; border-radius: 4px; background-color: #aaa;  }
#mc_embed_signup .button:hover { background-color: #777; }
#mc_embed_signup .small-meta { font-size: small; }
#mc_embed_signup .nowrap { white-space: nowrap; }
#mc_embed_signup .clear {display: inline; clear: none;  }
#mc_embed_signup label {font-size: medium; font-weight: bold; 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 0;  }
#mc_embed_signup div#mce-responses {top: -1.4em;  float: left; clear: both;overflow: hidden; width: 90%; margin: 0 5%; padding: 0 0.5em 0 0.5em;  }
#mc_embed_signup div.response {font-weight: bold; z-index: 1; top: -1.5em; float: left; width: 80%;; margin: 1em 0; padding: 1em 0.5em 0.5em 0; }
#mc_embed_signup #mce-error-response { display: none; }
#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: 0.5em 0;text-align: left;  }
h2.orange {font-size: medium; font-weight: 700; margin: 15px 0 0;text-transform: uppercase; color: #eb9635;  }
table, tbody {overflow-x: hidden;border-collapse: collapse;  border: none;  }
.vcenter { display: inline-block; float: none;vertical-align: middle;  }
.help-button {display: inline-block; max-height: 40px; margin: 0 10px 10px 0;  }
.cover {margin: inherit; text-align: center; color: #fff;  }
.nav {padding: 25px 8px; text-align: right;  }
.nav a { font-size: small; margin: 20px 10px 0 10px; color:var(--text-color-subdued); }
.nav a:hover { text-decoration: none; }
.sort {padding: 2px 2px; text-align: right;  }
.sort a {font-size: small; margin-left: 15px;  color: var(--text-color-subdued);  }
.container { padding: 0; max-width: 960px; margin: 0 auto; }
.space { padding: 15px 0; }
.space-above { padding-top:20px; }
.space-below { padding-bottom:20px; }
.shorten { display: none; }
.smaller { font-size: small; line-height: var(--line-height); }
.tiny { font-size: x-small; }
.narrow { max-width: 640px; }
.subdued { color: var(--text-color-subdued); }
.black { color: #1d2022; }
.quote { margin: 40px auto; padding: 0 20px; }
.quote-img { height: 20px; margin-top: 10px; opacity:0.5; }
.header-gradient {position: absolute; z-index: -1; top: 0; width: 100%;  height: 400px; background: -moz-linear-gradient(top, rgba(218, 220, 222, 0.4) 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(top, rgba(218, 220, 222, 0.4) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to bottom, rgba(218, 220, 222, 0.4) 0%, rgba(255, 255, 255, 0) 100%); }
.white { background-color: #fff; }
.white-text, .nav .white-text { color: #fff !important; }
.light-text { color: #aeaeae; }
.mid-text { color: #888; }
.orange-text { color: #e58f1f; }
.caps { text-transform: uppercase; }
.italic { font-style: italic; }
.grid p {font-weight: 300; color: #fff;  }
.grid h1 { color: #fff; }
.white p { color: #1d2022; }
.small-attention a {font-size: medium; color: #fac141;  }
.concepts-download { margin-top: 20px; }
.concepts-download img { height: 40px; margin:0 5px; }
.tagline { font-size:medium; margin-bottom: 20px; }
.learn { margin-bottom: 50px; }
.resources { margin: 50px auto; }
.resources>div { margin:20px 0; }
.support-social a { margin-top: -5px; }
.support-videos { padding: 10px 0; border: none; }
.support-videos td {font-weight: bold; padding: 0 20px 0 0; color: #5d5d5d; border: none;  }
.support-videos iframe { margin-bottom: 5px; }
div#mc_embed_signup { background: transparent; margin-left:95px; }
div#mc_embed_signup form { padding: 10px 0 0; }
div.post div.category {font-size: medium; font-weight: bold;margin-bottom: 0;  color: #aaa;  }
p.post, p.post p { padding: 5px 0; }
abbr.timeago { border: none; }
p.success {padding: 5px 10px; color: #fff; background-color: forestgreen;  }
p.error {padding: 5px 10px; color: #fff; background-color: crimson;  }
div.toc { margin-bottom: 15px; }
div.toc a { padding: 10px 5px; }
div.instructions img { margin: 20px 0; }
div.instructions h2 { margin: 30px 0 10px; }
div.instructions h3 { margin: 30px 0 10px; }
div.drawing-container { text-align: left; }
.drawing-container img { margin: 0 auto; }
.grid-item img.gallery-thumb { border: 1px solid var(--bg-highlight-color); background-color: var(--bg-secondary-color); }
input.email {font-size: medium; font-weight: 400;width: 60%;  min-width: 300px; padding: 5px 10px; color: var(--text-color-normal); border: 1px solid var(--bg-highlight-color); border-radius: 4px;  }
input.button, input.btn {font-size: medium; font-weight: bold; padding: 5px 15px; color: var(--text-color-bright); border: none; border-radius: 4px; background-color: var(--theme-blue);  }
.textarea {font-size: medium; font-weight: 400; width: 60%; min-width: 250px; padding: 5px 10px; color: var(--text-color-normal); border: 1px solid var(--bg-highlight-color); border-radius:4px;  }
div.editable, div.editable:focus { outline: 0 solid transparent; }
div.login-btn { display: inline-block; width: 180px; white-space: nowrap;color: white; border-radius: 4px; background: var(--theme-blue); }
div.login-btn:hover { cursor: pointer; }
div.login-btn span.icon { display: inline-block; width: 42px; height: 42px; margin: 0 auto; padding: 12px;vertical-align: middle; border-right: var(--theme-blue) 1px solid;  }
div.login-btn span.buttonText { font-size: medium; font-weight: bold;  display: inline-block; padding: 0 42px; vertical-align: middle;  }
a.btn {font-size: medium;font-weight: bold;  display: inline-block; min-width: 160px; padding: 10px; white-space: nowrap; color: var(--text-color-bright); border-radius: 4px; background-color: var(--text-color-link);  }
a.btn:hover, input.button:hover, input.btn:hover { color: var(--text-color-bright); background-color: var(--text-color-link-hover); }
.tag-footer { font-size: medium; color: var(--text-color-subdued); padding:30px 0; }
.footer-links {margin: 0; padding: 0; list-style-type: none;  }
.footer-links li {font-size: medium; line-height: var(--line-height); margin: 0; padding: 3px 0;  }
.footer-links a {font-size: medium; font-weight: normal; color: var(--text-color-link);  }
.footer-links a:hover, .tag-footer a:focus, footer a:focus { color: var(--text-color-link-hover); }
a.intlink { text-decoration: none; border-bottom: 1px dashed; }
.footer-social, .footer-social form, .footer-social form input {margin-left: 0; padding: 20px 0;  }
a.social {display: inline-block; width: 38px; height: 30px; margin: 20px 0; opacity: 1; background-repeat: no-repeat; background-position: left; background-size: 30px;  }
a.social:hover { opacity: 0.85; }
div.th-breadcrumb {font-size: small;  font-weight: bold; margin-bottom: 0;padding: 15px; color: var(--text-color-subdued); background-color: var(--bg-secondary-color); }
div.th-breadcrumb a {font-size: small; font-weight: normal;  }
div.th-breadcrump div.links { text-align: left; }
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 p, div.para-right h2 { padding-right: 20px; pointer-events: all; }
div.para-right h2 { margin-top: 30px; }
div.graphic { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; pointer-events: none; }
div.graphic div { pointer-events: none; }
div.para-left a { pointer-events: all; }
div.rel-center { max-width: 960px; margin: 0 auto; }
div.subdued-title { font-size: medium;  font-weight: bold; margin: 0 0 30px 20px;color: var(--text-color-subdued); }
.footer-langs { display:flex; gap:10px; }
.footer-langs a { color:var(--text-color-subdued) }

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

@media (min-width: 768px) {
    .shorten { display: inline-block; }
    .space { padding: 30px 0; }
    /* h1.footer, .concepts-manual-wrapper h1.footer { margin: 0 0 15px; } */
    .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;  }
    .tagline { margin-bottom: 20px; }
    .concepts-download { text-align: center; }
    .concepts-logo img { width: 235px; height: 43px; margin: 0; }
    .concepts-logo { margin: 0; }
    div.drawing-container { text-align: center; }
    .hero img { padding: 0; }
    .help-button {float: left; max-height: 80px; margin-right: 15px;  }
    .learnandexplore { margin-top: 10px; }
    .quote-content { font-size: large; font-weight: lighter; line-height: var(--line-height);  }
    .quote-img { height: 48px; margin-top: 15px; opacity:0.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; }
    div.subdued-title { font-size: large; }
}

/*cms_base.html*/
.header-gradient-wrapper { position: relative; }
.font-weight-700 { font-weight: 700; }

/*featured_designer.html*/
.featured-designer { margin-top: 20px; }
.featured-subtitle { margin-left: 25px; }
.featured-designer-content { margin: 0 25px; }
.featured-profile-bio { max-width: 670px; }

@media(max-width: 426px) {
    .featured-subtitle { margin-left: 20px; }
    .featured-designer-content { margin: 0 20px; }
    .featured-designer { margin-top: 5px; }
}

/*tutorial_template.html*/
.support-videos iframe { width: 556px; height: 286px; }
.filer_image { border: 1px solid var(--bg-secondary-color); }
.hero { max-height: 450px; background-position: 50% 30%; }
.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>ul, .cms-striped>ol { max-width: 640px; margin: 20px auto; text-align:left; }
.cms-striped>ul>li>p, .cms-striped>ol>li>p { margin:0; text-align:left; }
.cms-striped>div { margin:0 auto; text-align:center; }
h1.article-title { margin: 60px auto 0; max-width: 640px; font-weight:bold; text-align:left; }
div.article-subtitle { margin: 10px auto 20px; color: var(--text-color-subdued); max-width: 640px; text-align:left; }
h2.article-section { margin: 20px auto; max-width: 640px; text-align:left; }
h3.article-subsection { font-weight: normal; font-variant: normal; margin: 20px auto; color: var(--text-color-bright); max-width: 640px; text-align:left; }
p.article-note { font-size: small; font-style: italic; line-height: var(--line-height); color: var(--text-color-subdued); max-width: 640px; margin:10px auto 0; text-align:left; }
p.article-tip { margin: 10px auto; padding: 10px 20px; background: #fff5e0; max-width: 640px; text-align:left; }

@media(max-width: 426px) {
    .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; }
}

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

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

/*featured_designer_brushes.html*/
.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, 0.4);  }
.brush-pack-content { width: 100%; margin-top: 10px; margin-left: 40px; }
.brush-pack-object p { width: 100%; }
.brush-pack-brushes img { margin-top: 10px; }
.brush-pack-title { font-size: medium; font-weight: bold; color: #1d2022; }
.brush-pack-author {font-size: small;  margin-left: 30px; color: #1d2022; }

/*featured_designer_profile.html*/
.featured-profile-main-image { margin: 40px 0; }

@media(max-width: 426px) {
    .featured-profile-main-image { margin: 20px 0; }
}

/*full_mailchimp_form.html*/
.form-description {margin-right: 5px; margin-left: 5px;  }

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

.form-description p { width: 98%; }
.form-description h2 { width: 98%; }
.form-check-label { font-weight: normal; margin-left: -30px; }
.mailchimp-form { margin-left: 4em; }
.submit-side { display: block; }
.submit-bottom { display: none; }
input.button, input.btn {margin-left: -20px; padding: 6px 20px; border-radius: 2px;  }
input.email { min-width: 100%; }
.mailchimp-button {margin-left: -20px; padding: 6px 20px; border-radius: 2px;  }
.full-width {width: 100%; min-width: 100%;  }
.d-none { display: none; }
.d-block { display: block; }
input.button.ml-0, input.btn.ml-0, .ml-0 { margin-left: 0; }

@media (max-width: 768px) {
    .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 { margin-left: 0; }
    .form-description { width: 90%; }
    .submit-bottom { display: block; }
    .submit-side { display: none; }
    .mailchimp-form { margin-left: 0; }
    div#mc_embed_signup { margin-left:0; }
}
@media (max-width: 320px) {
    .form-description { width: 90%; }
    .mailchimp-form { margin-left: 0; }
    .form-check-label { margin-left: 0; }
}

/*hero.html*/
.hero-plugin {position: relative; height: 550px; background-repeat: no-repeat; background-position: center; background-size: cover;  }
.hero-image { position: absolute; z-index: 100;width: 100%; height: 469px; transform: translateY(20%); background-repeat: no-repeat; background-position: center; background-size: contain;  }
.appstore { padding-top: 120px; padding-bottom: 20px; }
.hero-quote { padding-bottom: 50px; }
.hero-quote p {font-size: large; line-height: var(--line-height);  height: 216px; margin-right: 10px;text-align: center; 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;  }
}

/*mailchimp_form.html*/
input.button-mailchimp-form, input.btn-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; line-height: var(--line-height); width: 500px; margin: 50px 0 0 70px; padding-top: 50px; text-align: center; }
.bot-field { position: absolute; left: -5000px; }

@media (max-width: 990px) {
    input.button-mailchimp-form, input.btn-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.button-mailchimp-form, input.btn-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.button-mailchimp-form, input.btn-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.button-mailchimp-form, input.btn-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;  }
    h1 {  }
    p { font-size: medium; line-height: var(--line-height); }
}

@media (max-width: 400px) {
    input.button-mailchimp-form, input.btn-mailchimp-form { margin-left: 70px; }
    input.email-mailchimp-form { width: 300px; }
    .form-description-mailchimp-form p { width: 350px; }
}

@media (max-width: 320px) {
    input.email-mailchimp-form { margin-left: -35px; }
    input.button-mailchimp-form, input.btn-mailchimp-form { margin-left: 50px; }
    .form-description-mailchimp-form p { width: 300px; }
}

/*quote.html*/
.d-flex { display:flex; }
.cms-quote { font-size: xx-large; font-weight: normal; 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:0.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) {
    .cms-quote {font-size: xx-large; margin-left: -10px;  }
    .quote-container { margin-left: 0; }
    .story-img { width: 30px; }
}

@media(max-width: 321px) {
    .story-link p { margin-bottom: 80px; }
}

.row { max-width: 960px; display:block; margin:auto -15px; }
.col-sm-4 { width:30%; float:left; margin:0 15px; }
.col-sm-12 { width:100%; float:left; margin:0 15px; }

/*creator page header*/
.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; text-transform: uppercase; 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*/
.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-repeat: no-repeat; background-position: center; background-size: cover;  }
.creator-story-content { margin: 20px 30px; }
.creator-story-content h3 {font-size: large;  font-weight: bold; line-height: var(--line-height); margin: 0;text-transform: uppercase;  }
.creator-story-content p {font-size: medium;  font-weight: bold; line-height: var(--line-height); margin-bottom: 20px;color: #abb1b1;  }
.creator-read-story-button-wrapper { margin: 25px 30px; }
.creator-read-story-button-wrapper button {font-size: large; font-weight: bold; line-height: var(--line-height);  width: 100%; height: 60px; color: #fff;border-color: transparent; border-radius: 4px; background: #f8a549;  }

/*creators list page ../creator/index.html*/
.featured-creators-wrapper h1 { color: #58595a; }
.featured-creator { text-align: center; }
.featured-creators-header { margin-right: 15px; margin-left: 15px; }
.featured-creators-header .concepts-logo img { margin: 0; }
.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-right: 15px; margin-bottom: 86px;margin-left: 15px;  }
.recently-added-tags-wrapper > button:hover { background: #d6dcde; }
.recently-added-tags-wrapper > button.active { 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;  }
.recently-added-tags-wrapper > button:not(:last-child) { margin-right: 15px; }
.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; }
.recently-added-gallery img { width: 100%; }

/*../admin/login.html*/
#login-form .btn { margin-bottom: 20px; }

/*drawing_share/public.html*/
.mt-0 { margin-top: 0; }

/*manual/ios/brushesandtools.html*/
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }

/*manual/ios/thegallery.html*/
.ml-10 { margin-left: 10px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }

/*static_pages/about.html*/
.apple-app-store-button-img, .windows-app-store-button-img, .google-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; }

/*static_pages/android_support.html*/
h1.concepts-android-support { margin: 20px 0 10px; text-align: left; }
.become-expert-android-support { font-size: medium; line-height: var(--line-height); }
.m-20-0 { margin: 20px 0; }
.f-18-l-30 { font-size: medium; line-height: var(--line-height); }
.f-16-l-24 { font-size: medium; line-height: var(--line-height); }
/* .support-email-input {font-size: 16px !important; display: block !important; min-width: 300px !important; padding: 6px 10px !important;  border: 1px solid #d6dcde !important; border-bottom: 4px solid #00aee0 !important; background: #fff; } */
.support-submit-input { width: auto; padding: 0 20px; border-radius: 20px; background-color: #5d5d5d; }
.support-input-hidden { position: absolute; left: -5000px; }

/*../errors/404.html and ../search/search.html, also support pages */
.search-img { overflow: hidden; height: 200px; text-align: center; vertical-align: middle; background: transparent; border: 1px solid var(--bg-secondary-color); border-radius: 4px; }
.search-img img { display: inline-block; width: 100%; height: inherit; margin: auto; object-fit: cover; }
a.search-title-link { text-transform: none; }
div.search-result { margin-bottom: 20px; }
p.result-title { font-size: medium; line-height: var(--line-height); margin: 8px 0 0; }
p.result-description { font-size: medium; line-height: var(--line-height); }
h1.category { font-size: medium; margin-bottom: 10px; margin-left: 15px; }
div.search-outer { margin-top: 30px; }

/*../search/search.html*/
.concepts-search-form-wrapper {  }

/*android_support.html + ios_support.html + windows_support.html*/
.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; }

@media (min-width: 768px) {
    .concepts-platform-support-wrapper #mc_embed_signup { margin-left: 95px; }
    .concepts-platform-support-wrapper #mc-embedded-subscribe-form { padding: 0; }
}

/*static_pages/privacy.html*/
.concepts-privacy-wrapper p { font-size: medium; line-height: 24px; }
.concepts-privacy-wrapper a.red { color: #c93b3b; }
.concepts-privacy-wrapper li:last-child { margin-bottom: 15px; }
.concepts-privacy-wrapper td {padding: 15px 10px; vertical-align: top;  }
.concepts-privacy-wrapper tr:nth-child(odd) { background-color: var(--bg-secondary-color); }
.concepts-privacy-wrapper tr:first-child {font-weight: bold; background-color: var(--bg-highlight-color);  }

/*default image caption templates/djangocms_picture/default/picture.html - overriding alignment as we always align center */
.cms-img-caption-right { font-size: small; line-height: var(--line-height); color:var(--text-color-subdued); text-align: center; }

/*STYLE_BASE.html*/
.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-color: #eee; 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-color: #eee;  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,0.05); border-bottom: 1px solid rgba(255,255,255,0.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'); }

/*END STYLE_BASE.html*/

.position-relative { position: relative; }
.list-lower-alpha { list-style-type: lower-alpha; }

/*CONCEPTS MANUAL PAGES*/
/*unique*/
.manual-sidebar { overflow-y: auto; }
/*end*/

@media (min-width: 768px) {
    /*unique*/
    .subnav { padding-left: 10px; }
    /*end*/
}

@media (min-width: 960px) {
    /*unique*/
    .manual-sidebar { width: 200px; }
    #sidebar-toggle { display: none; }
    /*end*/
}

/*unique*/
.navbar-collapse.sidebar-nav .nav a { margin-left: 0; }
/*end*/
/* 
.concepts-manual-wrapper .nav.navbar-default { padding: 0; }
.concepts-manual-wrapper .navbar-default .navbar-toggle { border: none; }
.concepts-manual-wrapper h1, .concepts-manual-wrapper h2, .concepts-manual-wrapper h3, .concepts-manual-wrapper h4 { line-height: var(--line-height); }
.concepts-manual-wrapper ul, .concepts-manual-wrapper ol { margin-bottom: 0; }
.concepts-manual-wrapper h3, .concepts-manual-wrapper h2.orange {font-size: large;  font-weight: bold; margin: 15px 0 0;text-transform: uppercase; }
.concepts-manual-wrapper p { font-size: medium; line-height: var(--line-height); margin: 0 0 10px;padding: 5px 0;  }
.concepts-manual-wrapper ul { margin-top: 15px; }
.concepts-manual-wrapper ul li { font-size: 16px; }
.concepts-manual-wrapper .container { padding: 0; }

@media (min-width: 768px) {
    .concepts-manual-wrapper .space { padding: 0 10px; }
    .concepts-manual-wrapper header { padding: 40px 0 0; }
    .concepts-manual-wrapper h1 { margin: 0 auto;  }
    .concepts-manual-wrapper h3 { margin: 20px 0 0; }
} */

/*unique*/
.manual-sidebar { position: fixed; z-index: 9; top: 0; bottom: 0; left: 0; padding-left: 15px; border-right: 1px solid #d6dcde; background: #fff;  }
.img-caption {font-size: small; margin-top: -5px; text-align: center;  }
/*end*/

/* .concepts-manual-wrapper .img-wrapper { margin-top: 15px; margin-bottom: 25px; }
.concepts-manual-wrapper li { font-size: medium; line-height: var(--line-height); }
.concepts-manual-wrapper ol { font-size: medium; line-height: var(--line-height); margin-top: 0; } */

/*unique*/
.gallery-img-offset { margin-top: 10px; }
.gallery-txt-offset { margin-top: 20px; }
.gallery-img-row { margin-top: 20px; }
/*end*/

/* @media (min-width: 768px) {
    .concepts-manual-wrapper .nav a { margin: 0 0 0 20px; }
    .para-container { padding:50px 0; }
} */

/*unique*/
.manual-sidebar li {line-height: var(--line-height); 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; }
.subsub a { font-size: small; }
.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-nav-item li { margin-bottom: 5px; }
#sidebar { display: block; }
#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:0.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; color: var(--text-color-subdued); border-bottom: 1px solid var(--bg-secondary-color); user-select: none; 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; color: var(--text-color-subdued); }
.sidebar-head a, .sidebar-foot a { font-size: medium; margin-left: 15px; color: var(--text-color-subdued); }
.sidebar-foot { padding: 30px 0; border-top: 1px solid var(--bg-secondary-color); }
/*end*/

.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; }
input.search-box, .concepts-manual-wrapper input[type=text] { width: 100%; min-width: 120px; padding: 8px 8px 8px 32px; color: var(--text-color-subdued); border-bottom: 3px solid var(--bg-secondary-color); outline: none; 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: 768px) {
    /*unique*/
    #sidebar { display: none; }
}

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

/*error 404*/
.p-10-0 { padding: 10px 0; }

/*static_pages/instructions.html*/
.instructions-img-width { width: 44px; }
.color-blue { color: var(--theme-blue); }
.color-grey { color: var(--text-color-subdued); }
.color-red { color: var(--theme-red); }
.clear-both { clear: both; }

/*static_pages/ios_support.html*/
.m-20-0-10 { margin: 20px 0 10px; }
.support-font-size-16 { font-size: medium; line-height: var(--line-height); }
.support-font-size-18 { font-size: medium; line-height: var(--line-height); }
.ios-support-container {margin-bottom: 0; padding: 50px 0; }

/*static_pages/tos.html*/
.h-60 { height: 60px; }

/*users/view.html*/
.users-view-submit-btn { font-size: medium; font-weight: bold; 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-warn, .msg-yellow, .msg-orange { border-left:4px solid var(--theme-orange); }
.msg-error, .msg-red { border-left:4px solid var(--theme-red); }
.msg-notice, .msg-info, .msg-blue { border-left:4px solid var(--theme-blue); }
.msg-success, .msg-green { border-left:4px solid var(--theme-green); }

.massive-text { font-size:xx-large; line-height: var(--line-height); }
.large-text { font-size:x-large; line-height: var(--line-height); }
.med-text { font-size:large; line-height: var(--line-height); }
.normal-text { font-size:medium; line-height:var(--line-height); }
.small-text { font-size:small; line-height:var(--line-height); }
.tiny-text { font-size:x-small; line-height:var(--line-height); }

.rel { position:relative; }

.trusted-by-title { text-align:left; }
.trusted-by-logo-wrapper { text-align:left; }
.logo-co { max-width: 94px; padding: 30px 20px; max-height: 40px; margin: 0 auto; }
@media(max-width: 768px) {
    .trusted-by-title { text-align:center; }
    .trusted-by-logo-wrapper { 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%; }
}

/* dark mode */
@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;
      }
    
    /* img { opacity: .8; transition: opacity .2s ease-in-out; }
    img:hover { opacity: 1; } */

    /* html, body { background-color: #000; }
    body, p, div, .para-container p, .partner-text p strong, .hero-quote p { color: #aaa; }
    h1, h2, h3, .content h1, .content h2, .content h3 { color: #ddd; }
    input, textarea, select, input.remove-selected-btn, input.activate-selected-btn { color: #aaa; background-color: #222; }
    input[type='text'], input[type='password'], input[type='email'], input[type='number'] { border: 1px solid #eee; background-color: #222; }
    input[type='submit']:disabled, button:disabled, .sign-in-forms input[type='submit']:disabled { color: #555;  border: 1px solid #333; background-color: #222; ; }
    select { background: #222 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=\'%23aaa\'/%3E%3C/svg%3E%0A') no-repeat 95% 50%; }
    #pwd-toggle svg { fill: #aaa; }

    .msg { background-color: rgba(214,220,222,0.2); }
    section img { transition: opacity 0.8s ease-in-out; opacity: 0.8; }
    a.social-link img { filter: invert(70%); }
    
    .tag-footer { background: rgba(214, 220, 222, 0.1); }
    .rounded-block { background-color: #222; }
    .upload { border: 1px dashed #777; }
    #profile-icon, #profile-icon-preview { border: 2px solid #333; background-color: #222; }
    .social-logins a#apple { color: #000; border: 1px solid #000; background-color: #fff; }
    .interest-label { color: #1d2022; }
    ::-webkit-input-placeholder { color: rgba(214,220,222,0.3); }
    ::-moz-placeholder { color: rgba(214,220,222,0.3); }
    ::-ms-input-placeholder { color: rgba(214,220,222,0.3); }
    ::placeholder { color: rgba(214,220,222,0.3); }
    .billing-table tr th, .billing-table-mobile tr th { color: #000; }
    .billing-table tr, .billing-table td { color: #aaa; }
    .sign-in-forms input[type='submit'], .submit-btn, .blue-btn { color: #ddd; background: #1c76a8; }
    .nav-crumb, .nav-crumb a { color: #ddd; }
    a, a:hover, a:active { color: #3fa5d4; }
    .billing-renews { color: #ddd; }
    .user-email { color: #f19e42; }
    .red { color: #bf3131; }
    input[type='checkbox']:checked { color: #ddd; background-color: #2a90bf; }
    .interests-slider { background-color: #000; }
    .interest img { border: 3px solid #000; }
    .paddle { background-color: rgba(255, 255, 255, 0); }
    .social-form > label > p, .billing-form > label > p { font-weight: normal; color: #ddd; }
    pre { color: #aaa; background-color: #2d2d2b;  ; }
    p.article-tip { background: rgba(214,220,222,0.3); }
    
    .tag { background-color:#222; }
    .search-img { border: 1px solid #222 !important; }
    .badge { background-color: #333 !important; }
    .concepts-privacy-wrapper tr:nth-child(odd) { background-color: #222; }
    .concepts-privacy-wrapper tr:first-child { font-weight: bold; background-color: #333; }
    .platform-selected { background-color: #111; }
    
    .black, .black p { color:#fff; }
    .white, .white p { color:#aaa; }
    .manual-sidebar { background: #111; border-right:1px solid #222; }
    .sidebar-head { border-bottom: 1px solid #222; }
    .concepts-manual-wrapper img { border:1px solid #222; }
    #sidebar-toggle { background-color: #222; }
    .sidebar-close-bar { border-bottom: 1px solid #222; }
    .icon-bar { border-bottom:1px solid #5d5d5d; } */
    hr { background-image: url('https://cdn.tophatch.com/teams/img/line-dark.png'); opacity:0.8; }
    .logo { background-image: url('https://cdn.tophatch.com/img/6.x/Concepts-6-Logo-Wide-Dark.svg'); }
    
    .platform-switcher, .lang-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"); }
    .platform-switcher.white, .lang-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"); }
    
    input.search-box, .concepts-manual-wrapper input[type=text] { 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'); }
}