@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap");

.develop-2016,
.develop-2016 input,
.develop-2016 button,
.develop-2016 select,
.develop-2016 textarea {
    font-family: "Source Sans Pro", Arial, sans-serif;
}

.develop-2016 {
    min-height: calc(100vh - 40px);
    padding: 34px 18px 70px;
    color: #191919;
    font-size: 16px;
    font-weight: 300;
}

.develop-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.develop-page-heading {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.develop-page-heading h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 300;
}

.develop-panel {
    display: flex;
    align-items: stretch;
    min-height: 520px;
    background: #fff;
    border: 1px solid #d6d6d6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.develop-sidebar-2016 {
    flex: 0 0 190px;
    width: 190px;
    padding: 18px 0 24px;
    border-right: 1px solid #d6d6d6;
    background: #f7f7f7;
}

.develop-sidebar-title {
    padding: 0 18px 8px;
    font-size: 18px;
    font-weight: 400;
}

.develop-sidebar-secondary {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid #ddd;
    font-size: 14px;
    color: #777;
    text-transform: uppercase;
}

.develop-sidebar-2016 nav a {
    display: block;
    padding: 8px 18px;
    color: #191919;
    text-decoration: none;
    font-size: 16px;
    line-height: 22px;
    border-left: 4px solid transparent;
}

.develop-sidebar-2016 nav a:hover,
.develop-sidebar-2016 nav a.active {
    color: #7B2CBF;
    background: #fff;
    border-left-color: #7B2CBF;
}

.develop-sidebar-disabled {
    padding: 7px 18px 7px 22px;
    color: #aaa;
    font-size: 15px;
}

.develop-sidebar-disabled span {
    display: block;
    font-size: 11px;
    color: #bbb;
}

.develop-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 28px 36px;
}

.develop-main h2 {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 300;
}

.develop-main h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}

.develop-muted {
    margin: 3px 0 18px;
    color: #777;
    font-weight: 300;
}

.develop-primary-btn,
.develop-secondary-btn,
.develop-danger-btn {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 16px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.develop-primary-btn {
    color: #fff !important;
    background: #7B2CBF;
    border: 1px solid #7B2CBF;
}

.develop-primary-btn:hover {
    background: #9D4EDD;
    border-color: #9D4EDD;
}

.develop-secondary-btn {
    color: #444 !important;
    background: #fff;
    border: 1px solid #b8b8b8;
}

.develop-secondary-btn:hover:not(:disabled) {
    color: #191919 !important;
    background: #f2f2f2;
}

.develop-secondary-btn:disabled {
    color: #aaa !important;
    background: #f6f6f6;
    cursor: not-allowed;
}

.develop-danger-btn {
    color: #fff;
    background: #d9534f;
    border: 1px solid #d43f3a;
}

.develop-stat-list {
    margin: 18px 0 30px;
    border-top: 1px solid #ddd;
}

.develop-stat-list > a,
.develop-stat-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 12px;
    color: #191919;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

.develop-stat-list > a:hover {
    background: #f7f7f7;
}

.develop-stat-list strong {
    color: #555;
    font-weight: 400;
}

.develop-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 10px;
}

.develop-section-heading > a {
    color: #7B2CBF;
    text-decoration: none;
}

.develop-top-heading {
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.develop-count,
.develop-section-heading > span {
    color: #888;
    font-size: 14px;
}

.develop-empty {
    padding: 48px 24px;
    text-align: center;
    color: #777;
    border: 1px solid #ddd;
    background: #fafafa;
}

.develop-empty h4 {
    margin: 0 0 5px;
    color: #444;
    font-size: 18px;
    font-weight: 400;
}

.develop-empty p {
    margin: 0 0 16px;
}

.develop-empty.compact {
    padding: 24px;
}

.develop-mini-place-list {
    border-top: 1px solid #ddd;
}

.develop-mini-place {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    color: #191919;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}

.develop-mini-place:hover {
    background: #fafafa;
}

.develop-mini-place img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid #ccc;
}

.develop-mini-place strong,
.develop-mini-place span {
    display: block;
}

.develop-mini-place strong {
    font-weight: 400;
    font-size: 17px;
}

.develop-mini-place span {
    margin-top: 3px;
    color: #888;
    font-size: 13px;
}

.develop-place-list {
    margin-top: 14px;
}

.develop-place-row {
    display: flex;
    align-items: center;
    min-height: 132px;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.develop-place-row:first-child {
    padding-top: 0;
}

.develop-place-thumb {
    flex: 0 0 110px;
    width: 110px;
    height: 110px;
    margin-right: 16px;
}

.develop-place-thumb img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 1px solid #bbb;
}

.develop-place-info {
    flex: 1 1 auto;
    min-width: 0;
}

.develop-place-title {
    display: block;
    max-width: 100%;
    color: #191919;
    font-size: 20px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.develop-place-title:hover {
    color: #7B2CBF;
}

.develop-place-meta {
    margin-top: 5px;
    color: #888;
    font-size: 13px;
}

.develop-place-status {
    display: inline-block;
    margin-top: 9px;
    font-size: 13px;
}

.develop-place-status.ready { color: #00a651; }
.develop-place-status.missing { color: #d9534f; }

.develop-place-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    margin-left: 18px;
}

.develop-form {
    max-width: 650px;
    margin-top: 20px;
}

.develop-field {
    margin-bottom: 18px;
}

.develop-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 400;
}

.develop-field input[type="text"],
.develop-field input[type="file"] {
    display: block;
    width: 100%;
}

.develop-field input[type="text"] {
    height: 38px;
    padding: 7px 10px;
    color: #191919;
    background: #fff;
    border: 1px solid #b8b8b8;
    border-radius: 2px;
    outline: 0;
}

.develop-field input[type="text"]:focus {
    border-color: #7B2CBF;
    box-shadow: 0 0 0 1px #7B2CBF;
}

.develop-field input[type="file"] {
    padding: 8px;
    border: 1px solid #ccc;
    background: #fafafa;
}

.develop-field small {
    display: block;
    margin-top: 5px;
    color: #888;
}

.develop-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.develop-alert {
    max-width: 650px;
    margin: 15px 0;
    padding: 10px 12px;
    border: 1px solid;
}

.develop-alert.error {
    color: #a94442;
    background: #f2dede;
    border-color: #ebccd1;
}

.develop-alert.success {
    color: #3c763d;
    background: #dff0d8;
    border-color: #d6e9c6;
}

.develop-configure-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ddd;
}

.develop-configure-head img {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border: 1px solid #bbb;
}

.develop-configure-head h2 {
    margin: 0 0 4px;
}

.develop-configure-head span {
    color: #888;
    font-size: 13px;
}

.develop-divider {
    height: 1px;
    margin: 28px 0 20px;
    background: #ddd;
}

.develop-inline-form {
    display: inline-block;
}

.develop-audio-upload {
    padding-bottom: 24px;
    border-bottom: 1px solid #ddd;
}

.develop-audio-list {
    border-top: 1px solid #ddd;
}

.develop-audio-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #ddd;
}

.develop-audio-main {
    flex: 1 1 auto;
    min-width: 0;
}

.develop-audio-main strong,
.develop-audio-main span {
    display: block;
}

.develop-audio-main strong {
    font-size: 17px;
    font-weight: 400;
}

.develop-audio-main span {
    margin: 2px 0 8px;
    color: #888;
    font-size: 13px;
}

.develop-audio-main audio {
    width: min(420px, 100%);
    height: 32px;
}

.develop-audio-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.develop-audio-actions form {
    margin: 0;
}

.develop-text-danger {
    padding: 0;
    color: #d9534f;
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 800px) {
    .develop-2016 { padding: 22px 8px 50px; }
    .develop-panel { display: block; }
    .develop-sidebar-2016 {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #d6d6d6;
    }
    .develop-sidebar-2016 nav {
        display: flex;
        flex-wrap: wrap;
    }
    .develop-sidebar-2016 nav a {
        border-left: 0;
        border-bottom: 3px solid transparent;
    }
    .develop-sidebar-2016 nav a:hover,
    .develop-sidebar-2016 nav a.active { border-bottom-color: #7B2CBF; }
    .develop-sidebar-secondary,
    .develop-sidebar-disabled { display: none; }
    .develop-main { padding: 20px 16px 30px; }
    .develop-place-row { align-items: flex-start; flex-wrap: wrap; }
    .develop-place-actions { width: 100%; margin: 10px 0 0 126px; flex-wrap: wrap; }
}

@media (max-width: 520px) {
    .develop-page-heading { align-items: flex-start; gap: 10px; }
    .develop-page-heading h1 { font-size: 27px; }
    .develop-place-thumb,
    .develop-place-thumb img { width: 82px; height: 82px; }
    .develop-place-thumb { flex-basis: 82px; }
    .develop-place-actions { margin-left: 98px; }
    .develop-audio-row { display: block; }
    .develop-audio-actions { margin-top: 10px; }
}

.develop-field input[type="number"],
.develop-field textarea {
    display: block;
    width: 100%;
    padding: 7px 10px;
    color: #191919;
    background: #fff;
    border: 1px solid #b8b8b8;
    border-radius: 2px;
    outline: 0;
}

.develop-field input[type="number"] {
    height: 38px;
}

.develop-field textarea {
    min-height: 110px;
    resize: vertical;
}

.develop-field input[type="number"]:focus,
.develop-field textarea:focus {
    border-color: #7B2CBF;
    box-shadow: 0 0 0 1px #7B2CBF;
}

.develop-clothing-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: 18px;
}

.develop-clothing-form-wrap {
    flex: 1 1 620px;
    min-width: 0;
}

.develop-clothing-form {
    margin-top: 12px;
}

.develop-clothing-preview {
    flex: 0 0 220px;
    width: 220px;
    padding: 12px;
    border: 1px solid #d6d6d6;
    background: #fafafa;
}

.develop-clothing-preview img {
    display: block;
    width: 194px;
    height: 194px;
    object-fit: contain;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #c8c8c8;
}

.develop-clothing-preview strong,
.develop-clothing-preview span {
    display: block;
}

.develop-clothing-preview strong {
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.develop-clothing-preview span {
    color: #888;
    font-size: 13px;
}

.develop-clothing-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.develop-clothing-tools form {
    margin: 0;
}

.develop-clothing-list {
    border-top: 1px solid #ddd;
}

.develop-clothing-row {
    display: flex;
    align-items: center;
    min-height: 112px;
    padding: 11px 0;
    border-bottom: 1px solid #ddd;
}

.develop-clothing-thumb {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    margin-right: 15px;
}

.develop-clothing-thumb img {
    display: block;
    width: 92px;
    height: 92px;
    object-fit: contain;
    background: #f5f5f5;
    border: 1px solid #bbb;
}

.develop-clothing-info {
    flex: 1 1 auto;
    min-width: 0;
}

.develop-clothing-price {
    margin-top: 8px;
    color: #00a651;
    font-size: 14px;
}

@media (max-width: 800px) {
    .develop-clothing-layout {
        display: block;
    }

    .develop-clothing-preview {
        width: 220px;
        margin-top: 20px;
    }
}

@media (max-width: 520px) {
    .develop-clothing-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .develop-clothing-row .develop-place-actions {
        margin-left: 107px;
    }
}

/* configure page: what the place's thumbnail and icon look like right now.
   there is no image library on this box to resize an upload with, so the icon is the same
   file as the thumbnail and object-fit crops it square here instead. */
.develop-thumb-preview {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 14px 0 18px;
    flex-wrap: wrap;
}

.develop-thumb-preview figure {
    margin: 0;
    text-align: center;
}

.develop-thumb-preview img {
    display: block;
    width: 256px;
    height: 144px;
    object-fit: cover;
    background: #f0f0f0;
    border: 1px solid #bbb;
}

.develop-thumb-preview img.is-icon {
    width: 144px;
    height: 144px;
}

.develop-thumb-preview figcaption {
    margin-top: 6px;
    font-size: 11px;
    color: #666;
}

/* badges / game passes */
.develop-asset-editor {
    border: 1px solid #d4d4d4;
    background: #fafafa;
    padding: 16px;
    margin: 14px 0 24px;
}
.develop-asset-editor h3 { margin: 0 0 14px; font-size: 20px; font-weight: 400; }
.develop-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.develop-form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #444; }
.develop-form-grid input[type="text"],
.develop-form-grid input[type="number"],
.develop-form-grid select,
.develop-form-grid textarea { width: 100%; border: 1px solid #aaa; background: #fff; padding: 7px 8px; font: inherit; }
.develop-form-wide { grid-column: 1 / -1; }
.develop-form-actions { display: flex !important; flex-direction: row !important; gap: 8px !important; align-items: center; }
.develop-field-help { color: #999; font-size: 11px; font-weight: 400; }
.develop-check-label { flex-direction: row !important; align-items: center; align-self: end; min-height: 34px; }
.develop-check-label input { margin: 0 6px 0 0; }
.develop-asset-rows { border-top: 1px solid #ddd; }
.develop-asset-row { display: flex; align-items: center; min-height: 94px; padding: 10px 0; border-bottom: 1px solid #ddd; gap: 13px; }
.develop-asset-thumb { width: 72px; height: 72px; object-fit: contain; border: 1px solid #bbb; background: #fff; flex: 0 0 72px; }
.develop-asset-row-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.develop-asset-row-info strong { color: #6A1B9A; font-size: 15px; font-weight: 400; }
.develop-asset-row-info span { color: #777; font-size: 12px; }
.develop-alert { padding: 9px 12px; margin: 8px 0 14px; border: 1px solid; font-size: 13px; }
.develop-alert.success { color: #2f6f2f; background: #edf8ed; border-color: #a8d3a8; }
.develop-alert.error { color: #a11; background: #fff1f1; border-color: #e2adad; }
@media (max-width: 700px) {
    .develop-form-grid { grid-template-columns: 1fr; }
    .develop-form-wide { grid-column: auto; }
    .develop-asset-row { align-items: flex-start; flex-wrap: wrap; }
    .develop-asset-row .develop-place-actions { width: 100%; margin-left: 85px; }
}