/*
All styling overrides for Amember should go in this style sheet.
It's hard loaded after amember loads it's style sheets.
 */
:root {
    --color-primary-100: #171B2E;
    --color-primary-80: #454958;
    --color-primary-60: #747682;
    --color-primary-40: #A2A4AB;
    --color-primary-20: #D1D1D5;

    --color-background-100: #E9ECF2;
    --color-background-80: #EDF0F5;
    --color-background-60: #F2F4FA;
    --color-background-40: #F6F7FA;
    --color-background-20: #FBFBFC;

    --color-accent-100: #FC5130;
    --color-accent-80: #FD7459;
    --color-accent-60: #FD9783;
    --color-accent-40: #FEB9AC;
    --color-accent-20: #FEDCD6;

    --color-secondary-100: #6C4FFF;
    --color-secondary-80: #8972FF;
    --color-secondary-60: #A795FF;
    --color-secondary-40: #C4B9FF;
    --color-secondary-20: #E2DCFF;

    --color-notice-100: #014169;
    --color-notice-80: #0264A1;
    --color-notice-60: #418BB9;
    --color-notice-40: #81B2D0;
    --color-notice-20: #C0D8E8;

    --color-error-100: #B8001F;
    --color-error-80: #C6334C;
    --color-error-60: #D46679;
    --color-error-40: #E399A5;
    --color-error-20: #F1CCD2;

    --color-warn-100: #FFB020;
    --color-warn-80: #FFC04D;
    --color-warn-60: #FFD079;
    --color-warn-40: #FFDFA6;
    --color-warn-20: #FFEFD2;

    --color-success-100: #02570A;
    --color-success-80: #059015;
    --color-success-60: #47B153;
    --color-success-40: #89D291;
    --color-success-20: #CAF3CE;

    --color-gray-100: #000000;
    --color-gray-80: #4A5568;
    --color-gray-60: #969CA5;
    --color-gray-40: #E2E2E2;
    --color-gray-20: #FFFFFF;

    --base-border-radius: 20px;
    --button-border-radius: 10px;
}

body {
    margin: 10px;
}

.am-copyright, .am-account-toolbar, .am-tabs-wrapper, #widget-member-main-unsubscribe, #widget-subusers {
    display: none;
}

.am-shell
{
    box-sizing: border-box;
    width: 100%;
    flex: 1 0 auto;
    max-width: 1500px;
    margin: 0 auto;
    padding: 8px 16px;
    border: 1px solid var(--color-primary-20) !important;
    border-radius: var(--base-border-radius);
    background: var(--color-background-20);
}

.am-block
{
    border: 1px solid var(--color-primary-20);
    margin-bottom: 0;
    color: var(--color-gray-100);
    background: var(--color-background-40);
    border-radius: 5px;
    box-shadow: none;
}

.am-layout-two-coll
{
    color: var(--color-gray-100);
    border: 1px solid var(--color-primary-20);
    border-radius: var(--base-border-radius);
    background: var(--color-background-40);
    box-shadow: none;
}

.am-layout-two-coll .am-layout-two-coll-top
{
    height: auto;
}

#member-main-subscriptions,
#member-main-links
{
    background: var(--color-background-20);
}

.am-body-content-top h1
{
    color: var(--color-primary-100);
}

.am-form form
{
    border: 1px solid var(--color-primary-20);
    color: var(--color-gray-100);
    background: var(--color-background-40);
    border-radius: var(--base-border-radius);
    box-shadow: none;
}

.am-form fieldset legend
{
    background: linear-gradient(110deg, var(--color-primary-100) 0%, var(--color-primary-80) 85%, var(--color-primary-60) 100%);
    color: var(--color-gray-20);
    border-radius: var(--base-border-radius) var(--base-border-radius) 0 0;
}

.am-form #profile fieldset legend
{
    border-radius: 0;
}

.am-form .am-helpdesk-form
{
    padding-top: 15px;
}

.am-info {
    background: var(--color-notice-20);
    border: 1px solid var(--color-notice-60);
    color: var(--color-notice-80);
    border-radius: 3px;
    margin-bottom: 1em;
    padding: 0.5em 1em;
}

#member-main-subscriptions a,
#member-main-links a,
.am-info a,
.am-form form a,
.am-signup-link a,
#am-grid-wrap-import-button,
.link
{
    color: var(--color-secondary-100);
    text-decoration-color: var(--color-secondary-100);
    text-decoration-style: dashed;
}

#member-main-subscriptions a:hover,
#member-main-links a:hover,
.am-info a:hover,
.am-form form a:hover,
.am-signup-link a:hover,
#am-grid-wrap-import-button:hover,
.link:hover
{
    color: var(--color-secondary-60);
}

.am-body-content a.button,
.am-body-content button,
.input-file .input-file-button,
.am-body-content input[type="button"],
.am-body-content input[type="submit"],
.am-popup a.button,
.am-popup button,
.am-popup input[type="button"],
.am-popup input[type="submit"]
{
    background: var(--color-secondary-100);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--color-gray-20);
    font-weight: bold;
}

.input-file
{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--color-gray-20);
    border-color: var(--color-primary-20);
}

.input-file.hover
{
    border-color: var(--color-primary-20);
}

.input-file .input-file-button
{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.am-body-content a.button:hover,
.am-body-content button:hover,
.input-file.hover .input-file-button,
.am-body-content input[type="button"]:hover,
.am-body-content input[type="submit"]:hover,
.am-popup a.button:hover,
.am-popup button:hover,
.am-popup input[type="button"]:hover,
.am-popup input[type="submit"]:hover
{
    background: var(--color-secondary-80);
}

.input-file.hover .input-file-button
{
    border-color: transparent;
    text-shadow: none;
}

.am-auth-form div.am-row
{
    background: transparent !important;
}

.am-body-content-content
{
    margin-bottom: 10px;
}

.am-body-content-top h1,
h1.am-grid-title
{
    margin: 5px;
}

.am-coll-content h2
{
    margin: 5px;
}

.am-info
{
    margin-bottom: 10px;
}

.am-grid-container {
    border: 1px solid var(--color-primary-20);
    box-shadow: none;
    margin-bottom: 1em;
    overflow-x: auto;
}

.am-grid
{
    border-spacing: 0;
}

.am-grid th,
.am-grid th:last-child
{
    padding: .6em .5em;
    font-size: 90%;
    font-weight: normal;
    font-variant: small-caps;
    text-transform: lowercase;
    border-bottom: 1px solid var(--color-primary-20);
    border-right: none;
    color: var(--color-gray-20);
    background: var(--color-primary-100);
}

.am-grid th
{
    border-right: 1px solid var(--color-primary-20);
}

.am-grid th a
{
    color: var(--color-gray-20);
}

.am-grid th a.sorted-desc,
.am-grid th a.sorted-asc
{
    color: var(--color-gray-20);
}

.am-grid tr.am-grid-row > td
{
    background: var(--color-background-40);
    border-right: 1px solid var(--color-primary-20);
}

.am-grid tr.am-grid-row.odd td
{
    background: var(--color-background-100);
}

.am-grid tr.am-grid-row.odd td:last-child
{
    border-right: none;
}

d
div.am-errors ul, ul.am-error, ul.am-errors {
    margin: 0 0 1em 0;
    padding: 0;
    background: var(--color-error-20);
    border: 1px solid var(--color-error-100);
    color: var(--color-error-100);
    border-radius: 3px;
}