/* Fonts */
/* inter-tight-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/google/inter-tight-v2-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
        url('../fonts/google/inter-tight-v2-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-tight-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/google/inter-tight-v2-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
        url('../fonts/google/inter-tight-v2-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
a{ transition: all .2s ease; }

/* Loader screen */

/* Notiications */
.notice.alert{ padding: 12px 17px; border-left: solid 6px; background-color: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.2); margin-bottom: 25px; font-weight: 700; font-size: 0.915rem; }
.notice.alert.success{ border-left-color: #2c8715; }
.notice.alert.error{ border-left-color: #aa1515; }
.notice.alert.info{ border-left-color: #152eaa; }
.notice.alert.warning{ border-left-color: #e9da0b; }

/* Main Styles */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{ font-family: 'Inter Tight', Arial, Helvetica, sans-serif; padding: 0; margin: 0; display: flex; flex-direction: column; }
h1,h2,h3,h4,h5,h6{ padding: 0 0 12px; margin: 0; }
p{ margin: 0; padding: 0 0 10px 0; }

/* Login Page */
#admin_login{ background-color: #DBE4E9; position: relative; }
#admin_login #loginwrap{ position: absolute; left: 50%; top: 130px; transform: translateX(-50%); max-width: 360px; width: 100%; padding: 45px 30px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2); background-color: #FFF; }
#admin_login #logo{ margin: 0; padding: 0; text-align: center; }
#admin_login #logo img{ max-width: 320px; width: 100%; vertical-align: bottom; }
#admin_login #body{ padding: 25px 0; }
#admin_login #loginform .recaptcha_field{ padding: 5px 0 20px; text-align: center; }
#admin_login #loginform .cf-turnstile{ width: fit-content; margin: 0 auto; }
#admin_login #loginform .cf-turnstile iframe{ width: 100% !important; }
#admin_login #loginform .loginfield:not(:last-of-type){ padding-bottom: 18px; }
#admin_login #loginform .loginfield .form-label{ display: block; padding: 0 0 5px; margin: 0; font-weight: 700; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; font-size: 0.875rem; }
#admin_login #loginform .loginfield .form-control{ line-height: 36px; font-size: 1.125rem; padding: 0 12px; border: solid 1px #CCC; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; border-radius: 3px; width: 100%; }
#admin_login #loginform .loginfield.buttons #signin{ line-height: 52px; font-size: 1rem; padding: 0 24px; border: none; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; border-radius: 3px; width: 100%; background-color: #396A36; color: #FFF; transition: all .2s ease; cursor: pointer; }
#admin_login #loginform .loginfield.buttons #signin:hover{ background-color: #474343; }
  
/* Admin Area */
#admin_body{ display: flex; flex-direction: row; width: 100%; }
#admin_body .appframe{ display: flex; flex-direction: column; flex: 1; width: 100%; }
#admin_body .appbody{ padding: 50px; overflow: auto; height: 100%; box-sizing: border-box; }
#admin_body .appbody .page-title{ font-size: 2.25rem; line-height: 1.6; padding: 0 0 12px; }
#admin_body .appbody .title-permalink{ font-size: 0.925rem; padding: 0 0 20px; }
#admin_body .appbody .title-permalink .label{ font-weight: 700; }
#admin_body .appbody .title-permalink a, #admin_body .brand .meta .data a, #admin_body .brand-list .visibility a, #admin_body .goback a{ color: #555; }
#admin_body .appbody .title-permalink a:hover, #admin_body .brand .meta .data a:hover, #admin_body .brand-list .visibility a:hover, #admin_body .goback a:hover{ color: #2d57c1; }
#admin_body .goback{ padding: 0 0 25px; }
#admin_body .settings .goback{ padding: 0 0 14px; }
#admin_body .goback a{ font-weight: 700; text-decoration: none; display: block; width: fit-content; height: 40px; line-height: 40px; }
#admin_body .goback a .label{ line-height: 18px; display: inline-block; vertical-align: middle; padding: 0 0 0 8px; }
#admin_body .goback a .icon{ display: inline-block; width: 18px; height: 18px; vertical-align: middle; color: #555; }
#admin_body .goback a:hover .icon{ color: #2d57c1; }
#admin_body .appbody .page-title .status{ font-size: 0.875rem; vertical-align: middle; border: solid 1px; display: inline-block; padding: 4px 9px; border-radius: 3px; margin-left: 9px; }
#admin_body .appbody .page-title .status.gopriv{ border-color: #5f0c0c; background-color: #fef6f6; color: #5f0c0c; }
#admin_body .action-links .post-link{ display: block; height: 40px; width: fit-content; padding: 12px 15px; text-decoration: none; white-space: nowrap; }
#admin_body .action-links .post-link .icon{ color: #FFF; display: inline-block; width: 16px; height: 16px; margin-right: 7px; text-align: center; }
#admin_body .action-links .post-link .icon:before{ line-height: 16px; font-size: 14px; }
#admin_body .action-links .post-link .label{ line-height: 16px; display: inline-block; }
#admin_body .action-links .post-link.preview{ color: #FFF; background-color: #2E75BA; }
#admin_body .action-links .post-link.edit{ color: #FFF; background-color: #688C14; }
#admin_body .action-links .post-link.delete{ background-color: #AF1623; color: #FFF; }
/* Header */
#admin_body .header{ height: 75px; border-bottom: solid 1px #CCC; display: flex; }
/* Searchform */
#admin_body .header .searchform{ flex: 1; position: relative; margin: 0; padding: 0; }
#admin_body .header .searchform .search{ color: #555; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); left: 32px; margin: 0; text-align: center; }
#admin_body .header .searchform .search:before{ line-height: 24px; font-size: 20px; }
#admin_body .header .searchform .clear{ width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); right: 32px; margin: 0; display: none; }
#admin_body .header .searchform .clear a{ display: block; width: 100%; height: 100%; }
#admin_body .header .searchform .clear .icon{ display: block; width: 100%; height: 100%; color: #555; }
#admin_body .header .searchform .clear .icon:before{ text-align: center; line-height: 24px; }
#admin_body .header .searchform .searchbox{ margin: 0; border: none; outline: none; height: 74px; width: 100%; padding: 0 80px 0 80px; font-size: 1.3rem; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; }
#admin_body .header .searchform #livesearch{ position: absolute; top: 74px; left: 0; z-index: 10; width: 100%; max-height: 250px; overflow: auto; border: solid 1px #CCC; background-color: #FFF; }
#admin_body .header .searchform #livesearch a{ display: block; padding: 4px 7px; font-weight: 700; color: #202020; text-decoration: none; }
#admin_body .header .searchform #livesearch a:hover{ background-color: #EFEFEF; }
/* Input Form */
#admin_body .inputform .field{ width: fit-content; }
#admin_body .inputform .field .colour .field-input{ border: none; }
#admin_body .inputform .field:not(:last-of-type){ padding-bottom: 20px; }
#admin_body .inputform .field-label{ font-size: 0.85rem; font-weight: 700; display: block; padding: 0 0 5px; }
#admin_body .inputform .field-input, #admin_body .settings .repeat .field-group .field .input{ line-height: 36px; font-size: 1.125rem; padding: 0 12px; border: solid 1px #CCC; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; border-radius: 3px; }
#admin_body .inputform .field label.error{ border: solid 1px #840f0f; padding: 8px 12px; font-size: 0.875rem; background-color: #f5e8e8; display: block; }
#admin_body .inputform .buttons #submitform, #admin_body .inputform .buttons #deleteitem{ display: inline-block; vertical-align: middle; width: fit-content; padding: 12px 25px; text-decoration: none; white-space: nowrap; border: none; text-decoration: none; cursor: pointer; }
#admin_body .inputform .buttons .button .icon{ color: #FFF; display: inline-block; width: 16px; height: 32px; text-align: center; margin-right: 12px; vertical-align: middle; }
#admin_body .inputform .buttons .button .icon:before{ line-height: 32px; font-size: 20px; }
#admin_body .inputform .buttons #submitform{ background-color: #8337A4; color: #FFF; margin-right: 12px; font-size: 1.125rem; }
#admin_body .inputform .buttons .button .label{ display: inline-block; vertical-align: middle; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; font-size: 1.35rem; line-height: 1.6; }
#admin_body .inputform .buttons #deleteitem{ background-color: #AF1723; color: #FFF; }
/* User */
#admin_body .header .user-details{ width: 250px; display: flex; border-left: solid 1px #CCC; height: 74px; margin: 0; }
#admin_body .header .grav{ margin: 0; padding: 13px; }
#admin_body .header .grav img{ border-radius: 50%; border: solid 1px #CCC; }
#admin_body .header .user{ padding: 12px 0 12px 12px; }
#admin_body .header .user p{ padding: 0; margin: 0; }
#admin_body .header .user .name{ font-size: 1.125rem; font-weight: 700; padding: 3px 0 6px; }
#admin_body .header .user .logout{ font-size: 0.875rem; }
#admin_body .header .user .logout a{ color: #404040; }
#admin_body .header .user .logout a:hover{ color: #2c5195; }
/* Sidebar */
#admin_body #sidebar{ background-color: #3F5671; color: #FFF; width: 290px; }
#admin_body #sidebar #logo{ padding: 20px; text-align: center; }
#admin_body #sidebar #logo img{ width: 100%; vertical-align: bottom; }
#admin_body #sidebar .menu, #admin_body #sidebar .mobilemenu{ border-top: solid 1px rgba(255,255,255,.25); list-style: none; margin: 0; padding: 0; }
#admin_body #sidebar .menu{ display: block; }
#admin_body #sidebar .mobilemenu{ display: none; }
#admin_body #sidebar .menu .item{ border-bottom: solid 1px rgba(255,255,255,.25); }
#admin_body #sidebar .menu .item a, #admin_body #sidebar .mobilemenu a{ display: block; font-weight: 700; color: #FFF; text-decoration: none; padding: 12px 20px; }
#admin_body #sidebar .menu .item a span, #admin_body #sidebar .mobilemenu a span{ display: inline-block; height: 18px; line-height: 18px; vertical-align: middle; }
#admin_body #sidebar .menu .item a .label, #admin_body #sidebar .mobilemenu a .label{ padding: 0 0 0 8px; }
#admin_body #sidebar .menu .item a .icon, #admin_body #sidebar .mobilemenu a .icon{ width: 18px; color: #FFF; }
/* Dashboard */
#admin_body .dashboard .widgets{ display: flex; padding: 0 0 60px; gap: 25px; flex-wrap: wrap; }
#admin_body .dashboard .widgets .widget{ margin: 0; max-width: 350px; width: calc( 25% - 19px ); height: 125px; padding: 25px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2); background-color: #FFF; display: flex; }
#admin_body .dashboard .widgets .widget .icon{ width: 72px; height: 72px; border-radius: 50%; display: inline-block; vertical-align: top; padding: 19px; }
#admin_body .dashboard .widgets .widget .icon-image{ width: 36px; height: 36px; text-align: center; display: block; }
#admin_body .dashboard .widgets .widget .icon-image:before{ line-height: 36px; font-size: 28px; }
#admin_body .dashboard .widgets .widget.registered-brands .icon{ background-color: #BCDEFA; }
#admin_body .dashboard .widgets .widget.registered-brands .icon-image{ color: #59A3E3; }
#admin_body .dashboard .widgets .widget.registered-swatches .icon{ background-color: #A3F5BF; }
#admin_body .dashboard .widgets .widget.registered-swatches .icon-image{ color: #3BC36F; }
#admin_body .dashboard .widgets .widget.unregistered-brands .icon{ background-color: #ebbdd3; }
#admin_body .dashboard .widgets .widget.unregistered-brands .icon-image{ color: #a12b4c; }
#admin_body .dashboard .widgets .widget.form-submissions .icon{ background-color: #B2B8FE; }
#admin_body .dashboard .widgets .widget.form-submissions .icon-image{ color: #828DE0; }
#admin_body .dashboard .widgets .widget .content{ display: inline-block; padding: 0 0 0 12px; flex: 1; }
#admin_body .dashboard .widgets .widget .content .widget-title{ font-size: 0.975rem; font-weight: 700; margin: 0; padding: 0 0 10px; }
#admin_body .dashboard .widgets .widget .content .widget-content{ font-size: 2.5rem; margin: 0; padding: 0; }
#admin_body .dashboard .app-main{ padding: 30px; background-color: #FFF; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
#admin_body .dashboard .app-main .section-title{ font-size: 1.5rem; }
#admin_body .dashboard .app-main .post-list{ list-style: none; margin: 0; padding: 0; width: 100%; }
#admin_body .dashboard .app-main .post-list .brand{ display: flex; flex-wrap: nowrap; display: flex; flex-wrap: nowrap; }
#admin_body .dashboard .app-main .post-list .brand.not-live{ color: #C5C5C5; }
#admin_body .dashboard .app-main .post-list .brand .privicon{ display: inline-block; vertical-align: middle; width: 50px; padding: 10px 20px 10px 10px; }
#admin_body .dashboard .app-main .post-list .brand .privicon .icon{ color: #888; width: 20px; height: 20px; text-align: center; display: block; }
#admin_body .dashboard .app-main .post-list .brand .privicon .icon:before{ line-height: 20px; }
#admin_body .dashboard .app-main .post-list .brand:not(:last-of-type){ border-bottom: solid 1px #CCC; }
#admin_body .dashboard .app-main .post-list .brand .name{ flex: 1; line-height: 40px; font-weight: 700; }
#admin_body .dashboard .app-main .post-list .brand .links{ padding: 0 0 0 20px; height: 40px; width: 325px; gap: 5px; display: none; }
#admin_body .dashboard .app-main .post-list .brand:hover .links{ display: flex; }
#admin_body .dashboard .app-main .post-list .brand .count{ line-height: 40px; width: 125px; padding: 0 0 0 20px; }
#admin_body .dashboard .app-main .post-list .brand .updated{ line-height: 40px; width: 125px; padding: 0 20px; }
/* Brand List */
#admin_body .brand-list .visibility{ padding-bottom: 30px; font-size: 0.875rem; }
#admin_body .brand-list .visibility a, #admin_body .brand-list .visibility .div{ display: inline-block; vertical-align: middle; }
#admin_body .brand-list .app-main{ padding: 30px; background-color: #FFF; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
#admin_body .brand-list .app-main .post-list{ list-style: none; margin: 0; padding: 0; width: 100%; }
#admin_body .brand-list .app-main .post-list .brand{ display: flex; flex-wrap: nowrap; display: flex; flex-wrap: nowrap; }
#admin_body .brand-list .app-main .post-list .brand:not(:last-of-type){ border-bottom: solid 1px #CCC; }
#admin_body .brand-list .app-main .post-list .brand.not-live{ color: #C5C5C5; }
#admin_body .brand-list .app-main .post-list .brand .privicon{ display: inline-block; vertical-align: middle; width: 50px; padding: 10px 20px 10px 10px; }
#admin_body .brand-list .app-main .post-list .brand .privicon .icon{ color: #888; width: 20px; height: 20px; text-align: center; display: block; }
#admin_body .brand-list .app-main .post-list .brand .privicon .icon:before{ line-height: 20px; font-size: 18px; }
#admin_body .brand-list .app-main .post-list .brand .name{ flex: 1; line-height: 40px; font-weight: 700; }
#admin_body .brand-list .app-main .post-list .brand .links{ padding: 0 0 0 20px; height: 40px; width: 325px; gap: 5px; display: none; }
#admin_body .brand-list .app-main .post-list .brand:hover .links{ display: flex; justify-content: flex-end; }
#admin_body .brand-list .app-main .post-list .brand .count{ line-height: 40px; width: 125px; padding: 0 0 0 20px; }
#admin_body .brand-list .app-main .post-list .brand .updated{ line-height: 40px; width: 125px; padding: 0 20px; }
/* Single Brand */
#admin_body .brand .app-main{ display: flex; gap: 50px; flex-wrap: none; }
#admin_body .brand .swatches{ flex: 1; }
#admin_body .brand .swatchlist{ margin: 0; padding: 0; list-style: none; gap: 20px; display: flex; flex-wrap: wrap; }
#admin_body .brand .swatchlist .swatch{ box-shadow: 0 2px 4px rgba(0,0,0,.2); border-radius: 8px; }
#admin_body .brand .swatchlist .swatch a{ display: block; width: 160px; height: 120px; padding: 42px 62px; text-decoration: none; }
#admin_body .brand .swatchlist .swatch.add-new .icon{ color: #888; width: 36px; height: 36px; text-align: center; display: block; }
#admin_body .brand .swatchlist .swatch.add-new .icon:before{ line-height: 36px; font-size: 28px; }
#admin_body .brand .meta, #admin_body .settings .meta{ width: 350px; padding: 30px; box-shadow: 0 2px 4px rgba(0,0,0,.2); height: fit-content; }
#admin_body .brand .meta .buttons .button{ display: block; padding: 12px 18px; line-height: 18px; text-decoration: none; width: 100%; text-align: center; }
#admin_body .brand .meta .buttons .button > span{ display: inline-block; vertical-align: middle; }
#admin_body .brand .meta .buttons .button .icon{ width: 18px; color: #FFF; height: 18px; text-align: center; }
#admin_body .brand .meta .buttons .button .icon:before{ line-height: 18px; }
#admin_body .brand .meta .buttons .button .label{ padding-left: 8px; color: #FFF; font-weight: 700; font-size: 0.925rem; }
#admin_body .brand .meta .buttons.editdelete{ padding-bottom: 32px; display: flex; gap: 12px; flex-direction: row; flex-wrap: nowrap; }
#admin_body .brand .meta .buttons.editdelete .edit{ background-color: #688C13; }
#admin_body .brand .meta .buttons.editdelete .delete, #admin_body .brand .meta .buttons.golive .private{ background-color: #AF1723; }
#admin_body .brand .meta .buttons.golive, #admin_body .settings .meta .buttons{ padding-top: 32px; }
#admin_body .brand .meta .buttons.golive .public{ background-color: #2D75BA; }
#admin_body .brand .meta .buttons.golive .transfer{ background-color: #2D75BA; }
#admin_body .brand .meta .data a{ font-weight: 700; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: break-word; overflow-wrap: break-word; display: block; }

#admin_body .brand .meta .label, #admin_body .settings .meta .label{ font-weight: 700; font-size: 0.875rem; }
#admin_body .brand .meta .data:not(:last-of-type), #admin_body .settings .meta .data:not(:last-of-type){ padding: 0 0 15px; }
#admin_body .brand .meta .data:last-of-type, #admin_body .settings .meta .data:last-of-type{ padding: 0; }
/* Edit Brand */
#admin_body .edit-brand .inputform .titlefield{ max-width: 850px; width: 100%; }
#admin_body .edit-brand .inputform .titlefield .title-input{ line-height: 72px; font-size: 1.65rem; width: 100%; }
#admin_body .edit-brand .inputform .field.permalink .field-label, #admin_body .edit-brand .inputform .field.permalink .permalink{ display: inline-block; vertical-align: middle; padding: 0; }
#admin_body .edit-brand .inputform .field.permalink .permalink{ padding-left: 12px; }
#admin_body .edit-brand .inputform .field.permalink .permalink, #admin_body .edit-brand .inputform .field.permalink .permalink-input{ font-size: 0.85rem; }
#admin_body .edit-brand .inputform .field.permalink .permalink-input{ line-height: 24px; width: 150px; }
#admin_body .edit-brand .brandform .field:not(.permalink):not(.titlefield){ width: 100%; max-width: 400px; }
#admin_body .edit-brand .brandform .field .field-input{ width: 100%; }
/* Edit Swatch */
#admin_body .edit-swatch .app-main{ display: flex; gap: 50px; flex-wrap: none; }
#admin_body .edit-swatch .swatch{ width: 340px; }
#admin_body .edit-swatch .swatch .swatch-key{ height: 260px; margin: 0; padding: 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
#admin_body .edit-swatch .swatchform .others{ display: none; padding-bottom: 35px; }
#admin_body .edit-swatch .swatchform input[readonly]{ border-color: #CCC; color: #C0C0C0; background-color: #ECECEC; }
#admin_body .edit-swatch .swatchform .checkbox-field{ padding: 12px 0 6px; }
#admin_body .edit-swatch .swatchform label.checkbox{ display: inline-block; cursor: pointer; position: relative; padding-left: 32px; margin-right: 15px; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; line-height: 22px; vertical-align: middle; }
#admin_body .edit-swatch .swatchform input[type=checkbox]{ display: none; }
#admin_body .edit-swatch .swatchform input[type=checkbox] + label:before{ content: " "; transition: all .1s ease; display: inline-block; width: 12px; height: 12px; margin-right: 10px; position: absolute; left: 2px; top: 0; bottom: 1px; border-radius: 3px; outline: solid 2px var(--form_forgetlabel); border: solid 3px #FFF; background-color: #FFF; }
#admin_body .edit-swatch .swatchform input[type=checkbox] + label:before{ content: " "; outline: solid 2px #CCCCCC; background-color: #FFFFFF; }
#admin_body .edit-swatch .swatchform input[type=checkbox]:checked + label:before{ content: " "; outline: solid 2px #1976D2; background-color: #1976D2; }
/* Profile */
#admin_body .edit-profile .field{ max-width: 450px; width: 100%; }
#admin_body .edit-profile .field-input{ width: 100%; }
#admin_body .edit-profile  input[readonly]{ border-color: #CCC; color: #C0C0C0; background-color: #ECECEC; }
#admin_body .edit-profile  .checkbox-field{ padding: 12px 0 6px; }
#admin_body .edit-profile  label.checkbox{ display: inline-block; cursor: pointer; position: relative; padding-left: 32px; margin-right: 15px; font-family: 'Inter Tight', Arial, Helvetica, sans-serif; line-height: 22px; vertical-align: middle; }
#admin_body .edit-profile  input[type=checkbox]{ display: none; }
#admin_body .edit-profile  input[type=checkbox] + label:before{ content: " "; transition: all .1s ease; display: inline-block; width: 12px; height: 12px; margin-right: 10px; position: absolute; left: 2px; top: 0; bottom: 1px; border-radius: 3px; outline: solid 2px var(--form_forgetlabel); border: solid 3px #FFF; background-color: #FFF; }
#admin_body .edit-profile  input[type=checkbox] + label:before{ content: " "; outline: solid 2px #CCCCCC; background-color: #FFFFFF; }
#admin_body .edit-profile  input[type=checkbox]:checked + label:before{ content: " "; outline: solid 2px #1976D2; background-color: #1976D2; }
/* Settings */
#admin_body .settings .app-main .inputform{ display: flex; gap: 50px; flex-wrap: none; }
#admin_body .settings .app-main .inputform .formbody{ flex: 1; }
#admin_body .settings .inputform .field-input{ min-width: 450px; width: 100%; }
#admin_body .inputform .field-label{ line-height: 21px; }
#admin_body .settings .repeat .field-group .field .input{ max-width: 300px; width: 100%; }
#admin_body .settings .list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 25px; }
#admin_body .settings .list .option{ max-width: 275px; width: calc( 20% - 20px ); }
#admin_body .settings .list .option .setting{ display: block; padding: 25px 30px; min-height: 164px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,.2); background-color: #FFF; color: #555; text-align: center; text-decoration: none; font-weight: 700; }
#admin_body .settings .list .option .setting:hover{ color: #2d57c1; }
#admin_body .settings .list .option .setting .icon{ height: 64px; width: 64px; text-align: center; color: #555; display: block; margin: 0 auto; }
#admin_body .settings .list .option .setting .icon:before{ line-height: 64px; font-size: 52px; }
#admin_body .settings .list .option .setting:hover .icon{ color: #2d57c1; }
#admin_body .settings .list .option .setting .label{ display: block; padding-top: 25px; line-height: 25px; }
#admin_body .settings .inputform .titlefield{ width: 100%; }
#admin_body .settings .inputform .titlefield .title-input{ line-height: 72px; font-size: 1.65rem; width: 100%; }
#admin_body .inputform .select-hidden { display: none; visibility: hidden; padding-right: 10px; }
#admin_body .inputform .select { cursor: pointer; display: inline-block; position: relative; font-size: 16px; color: #202020; width: 100%; min-width: 220px; height: 40px; border: solid 1px #CCC; }
#admin_body .inputform .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #ffffff; padding: 8px 15px; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
#admin_body .inputform .select-styled:after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-color: #313131 transparent transparent transparent; position: absolute; top: 16px; right: 10px; }
#admin_body .inputform .select-styled:hover { background-color: #ffffff; }
#admin_body .inputform .select-styled:active, #admin_body .inputform .select-styled.active { background-color: #dfdfdf; }
#admin_body .inputform .select-styled:active:after, #admin_body .inputform .select-styled.active:after { top: 9px; border-color: transparent transparent #000000 transparent; }
#admin_body .inputform .select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #f7f7f7; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
#admin_body .inputform .select-options li { margin: 0; padding: 12px 0; text-indent: 15px; border-top: 1px solid #CCC; border-left: solid 1px #CCC; border-right: solid 1px #CCC; -moz-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; background-color: #FFF; }
#admin_body .inputform .select-options li:last-of-type{ border-bottom: solid 1px #CCC; }
#admin_body .inputform .select-options li:hover, #admin_body .inputform .select-options li.is-selected { color: #000000; background: #ededed; }
#admin_body .inputform .select-options li[rel="hide"] { display: none; }
#admin_body .settings .repeat .table{ width: 100%; }
#admin_body .settings .repeat .fields, #admin_body .settings .repeat .field-group{ flex: 1; display: flex; flex-wrap: nowrap; }
#admin_body .settings .repeat .fields{ gap: 20px; }
#admin_body .settings .repeat .field-group{ gap: 12px; }
#admin_body .settings .repeat .field-group .field{ width: 100%; max-width: 300px; padding: 0 12px 18px 0; white-space: nowrap; }
#admin_body .settings .repeat .field-group .input.colorfield{ font-size: 1rem; padding: 9px 7px; }
#admin_body .settings .repeat .field-group .input.colorfield.colorvalue{ width: 48px; padding: 9px 4px; }
#admin_body .settings .add-button{ padding: 0 0 12px; }
#admin_body .settings .btn{ border: none; font-size: 1rem; text-align: center; border-radius: 6px; transition: all .2s ease; cursor: pointer; }
#admin_body .settings .btn.add, #admin_body .settings .btn.submit, #admin_body .settings .repeat .controls .btn.move-up, #admin_body .settings .repeat .controls .btn.move-down{ background-color: #444; color: #FFF; }
#admin_body .settings .btn.add:hover, #admin_body .settings .repeat .controls .btn.move-up:hover, #admin_body .settings .repeat .controls .btn.move-down:hover{ background-color: #202020; color: #FFF; }
#admin_body .settings .repeat{ padding-top: 18px; }
#admin_body .settings .repeat .controls{ padding-top: 25px; }
#admin_body .settings .repeat .controls .btn.remove{ color: #FFF; background-color: #7f4646; }
#admin_body .settings .repeat .controls .btn.remove:hover{ color: #FFF; background-color: #640101; }
#admin_body .settings .btn.add{ padding: 9px 15px; }
#admin_body .settings .btn.submit{ padding: 12px 18px; font-size: 1.125rem; }
#admin_body .settings .btn.submit:hover{ background-color: #0b5e09; color: #FFF; }
#admin_body .settings .repeat .controls .btn{ width: 40px; height: 40px; padding: 12px; }
#admin_body .settings .repeat .controls .btn .icon{ display: block; width: 16px; height: 16px; text-align: center; color: #FFF; pointer-events: none; }
#admin_body .settings .repeat .controls .btn .icon{ line-height: 16px; font-size: 14px; }
/* Notifications */
#admin_body .send-push .app-main{ display: flex; gap: 25px; }
#admin_body .send-push .app-main .pushform{ max-width: 400px; width: 100%; padding: 25px; border-radius: 4px; background-color: #eeeeee; }
#admin_body .send-push .app-main .pushform.inputform .field{ width: 100%; }
#admin_body .send-push .app-main .pushform.inputform .field .field-input{ width: 100%; }
#admin_body .send-push .app-main .pushform .message .message_status{ display: block; height: 10px; background-color: #555; }
#admin_body .send-push .app-main .pushform .message .message_status[data-status^="error"]{ background-color: #800; }
#admin_body .send-push .app-main .pushform .message .message_status[data-status^="working"]{ background-color: #e0b416; }
#admin_body .send-push .app-main .pushform .message .message_status[data-status^="good"]{ background-color: #058800; }
#admin_body .send-push .app-main .messages{ flex: 1; overflow: auto; }
#admin_body .send-push .app-main .messages .push{ padding: 0; background-color: #FCFCFC; border-top: solid 1px #CFCFCF; border-right: solid 1px #CFCFCF; border-left: solid 5px; }
#admin_body .send-push .app-main .messages .push:last-of-type{ border-bottom: solid 1px #CFCFCF; }
#admin_body .send-push .app-main .messages .push.update{ border-left-color: #0d951c; }
#admin_body .send-push .app-main .messages .push.notice{ border-left-color: #f9f003; }
#admin_body .send-push .app-main .messages .push.status{ border-left-color: #e99607; }
#admin_body .send-push .app-main .messages .push .open{ font-size: 1.25rem; font-weight: 700; color: #555; padding: 15px 20px; display: flex; text-decoration: none; }
#admin_body .send-push .app-main .messages .push .open:hover{ color: #2d57c1; }
#admin_body .send-push .app-main .messages .push .open .title{ flex: 1; display: block; padding: 0 12px 0 0; }
#admin_body .send-push .app-main .messages .push .open .status{ color: #555; width: 24px; height: 24px; text-align: center; display: block; text-decoration: none; }
#admin_body .send-push .app-main .messages .push .open .status:before{ line-height: 24px; font-size: 20px; font-family: "colour-library"; text-decoration: none; }
#admin_body .send-push .app-main .messages .push.update .open .status:before{ content:"\ea6d"; }
#admin_body .send-push .app-main .messages .push.notice .open .status:before{ content:"\ea5d"; }
#admin_body .send-push .app-main .messages .push.status .open .status:before{ content:"\ea81"; }
#admin_body .send-push .app-main .messages .push .message{ display: none; padding: 5px 20px 15px; }
#admin_body .send-push .app-main .messages .push .message .push_id{ font-size: 0.825rem; color: #BFBFBF; }
#admin_body .send-push .app-main .messages .push .message .content{ font-size: 1.125rem; font-weight: 700; padding: 12px 10px 28px; }
#admin_body .send-push .app-main .messages .push .message .meta{ font-size: 0.875rem; color: #5F5F5F; }
#admin_body .send-push .app-main .messages .push .message .meta:last-of-type{ padding: 0; }
#admin_body .send-push .app-main .messages .push .message .meta .label{ font-weight: 700; }
#admin_body .send-push .app-main .messages .push .message .meta.push_link a{ color: #5F5F5F; }
#admin_body .send-push .app-main .messages .push .message .meta.push_link a:hover{ color: #2d57c1; }

@media only screen and (max-width: 800px){
    #admin_body .appbody .page-title{ font-size: 1.75rem; }
    #admin_body #sidebar #logo img{ max-width: 200px; margin: 0 auto; }
    #admin_login{ padding: 80px 20px; }
    #admin_login #loginwrap{ position: relative; top: unset; left: unset; transform: unset; }
    #admin_body { flex-direction: column; width: unset; height: unset; }
    #admin_body .header{ height: 50px; }
    #admin_body .header .user-details{ display: none; }
    #admin_body .header .searchform{ width: 100%; }
    #admin_body .header .searchform .searchbox{ height: 49px; font-size: 1.125rem; padding: 0px 50px; }
    #admin_body .header .searchform #livesearch{ top: 49px; }
    #admin_body .header .searchform #livesearch a{ padding: 10px 22px; font-size: 1.125rem; }
    #admin_body .header .searchform .search, #admin_body .header .searchform .clear{ width: 18px; height: 18px; }
    #admin_body .header .searchform .search{ left: 15px; }
    #admin_body .header .searchform .clear{ right: 15px; }
    #admin_body #sidebar{ width: 100%; }
    #admin_body .appbody{ padding: 30px; }
    #admin_body #sidebar .mobilemenu{ display: block; }
    #admin_body #sidebar .menu{ display: none; }
    #admin_body #sidebar .menu.show{ display: block; }
    #admin_body .dashboard .widgets{ flex-direction: column; }
    #admin_body .dashboard .widgets .widget{ width: 100%; height: fit-content; }
    #admin_body .dashboard .widgets .widget .icon{ display: block; }
    #admin_body .dashboard .widgets .widget .content{ padding: 0 0 0 12px; }
    #admin_body .dashboard .app-main .post-list .brand, #admin_body .brand-list .app-main .post-list .brand{ flex-direction: column; }
    #admin_body .dashboard .app-main .post-list .brand .count, #admin_body .dashboard .app-main .post-list .brand .links, #admin_body .dashboard .app-main .post-list .brand .updated, #admin_body .brand-list .app-main .post-list .brand .count, #admin_body .brand-list .app-main .post-list .brand .links, #admin_body .brand-list .app-main .post-list .brand .updated{ width: 100%; padding: 0; }
    #admin_body .dashboard .app-main .post-list .brand .links, #admin_body .brand-list .app-main .post-list .brand .links{ display: flex; flex-wrap: nowrap; gap: 0; }
    #admin_body .action-links .post-link, #admin_body .brand-list .app-main .post-list .brand .links .post-link{ display: block; margin: 0; padding: 12px; width: calc( 100%/3); text-align: center; }
    #admin_body .action-links .post-link .label{ display: none; }
    #admin_body .brand .app-main{ flex-direction: column-reverse; }
    #admin_body .brand .meta{ width: 100%; }
    #admin_body .edit-swatch .app-main{ flex-direction: column; }
    #admin_body .edit-swatch .swatch{ width: 100%; }
    #admin_body .edit-swatch .swatch .swatch-key{ height: 100px; }
    #admin_body .edit-brand .inputform .field.permalink .permalink{ padding: 12px 0 0 0; }
    #admin_body .brand .swatchlist .swatch{ width: 100%; height: 75px; }
    #admin_body .brand .swatchlist .swatch a{ width: 100%; height: 100%; line-height: 75px; text-align: center; padding: 20px 0; }
    #admin_body .brand .swatchlist .swatch.add-new .icon{ display: inline-block; vertical-align: middle; height: 35px; width: 35px; }
    #admin_body .title-permalink a{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: break-word; overflow-wrap: break-word; display: block; padding: 6px 0 0; }
    #admin_body .edit-brand .inputform .field.permalink{ width: 100%; }
    #admin_body .edit-brand .inputform .field.permalink .permalink{ display: block; padding: 6px 0 0; width: 100%; }

    #admin_body .settings .app-main .inputform, #admin_body .settings .repeat .fields, #admin_body .settings .repeat .field-group{ flex-direction: column; }
    #admin_body .settings .repeat .field-group .field{ padding-right: 0; max-width: unset; }
    #admin_body .settings .repeat .field-group .field .input{ max-width: unset; }
    #admin_body .settings .list .option{ width: 100%; max-width: 100%; }
    #admin_body .settings .list .option .setting{ text-align: left; min-height: unset; padding: 18px 25px; }
    #admin_body .settings .list .option .setting .icon{ display: inline-block; vertical-align: middle; width: 25px; height: 25px; }
    #admin_body .settings .list .option .setting .label{ display: inline-block; vertical-align: middle; padding-top: 0; padding-left: 12px; }
    #admin_body .inputform .field{ width: 100%; }
    #admin_body .settings .inputform .field-input{ min-width: unset; }

    #admin_body .send-push .app-main{ flex-direction: column; }
    #admin_body .send-push .app-main .pushform{ max-width: 100%; }
    #admin_body .send-push .app-main .messages .push .message .meta .label, #admin_body .send-push .app-main .messages .push .message .meta .data{ display: block; }
    #admin_body .send-push .app-main .messages .push .message .meta .data{ padding-top: 5px; }
}