:root {
    --border-radius-form: 4px;
    --border-radius-field: 3px;
    --box-shadow-form: 0 2px 4px 0 rgba(0, 0, 0, .1);
    --sizing-app-brand-max-height: 150px;
    --sizing-app-brand-max-width: 300px;
    --sizing-content-width: 330px;
    --spacing-app-brand: 30px;
    --spacing-field-content: 8px;
    --spacing-form: 30px 20px 40px;
    --spacing-form-desktop: 30px 30px 40px;
    --spacing-form-controls: 20px;
    --spacing-form-label-bottom: 5px;
    --spacing-silverstripe-brand: 30px;
    --spacing-submit-content: 10px 20px;

    --color-button-primary-background: #f6c445;
    --color-button-primary-hover-background: #e0a800;
    --color-button-primary-text: #3e464e;
    --color-button-primary-hover-text: #3e464e;
    --color-button-secondary-background: transparent;
    --color-button-secondary-hover-background: #5a656f;
    --color-button-secondary-text: #ced5e1;
    --color-button-secondary-hover-text: #ced5e1;
    --color-field-background: #4f5861;
    --color-field-border: #313941;
    --color-field-text: #fff;
    --color-form-background: #3e464e;
    --color-form-text: #fff;
    --color-link-primary: #ced5e1;
    --color-message-error: #da273b;
    --color-message-warning: orange;
    --color-page-background: #4f5861;
    --color-page-text: #fff;
    --color-text: #fff;
    --color-dark-text: #fff;
}

html, body {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

html body {
    display: -ms-grid;
    display: grid;

    -ms-grid-columns: 1fr minmax(320px,max-content) 1fr;
    grid-template-columns: 1fr minmax(320px,max-content) 1fr;

    -ms-grid-rows: 1fr auto auto auto 1fr;
    grid-template-rows: 1fr auto auto auto 1fr;

    height: 100vh;

    -webkit-box-pack: unset;
    -webkit-justify-content: unset;
    justify-content: unset;
}

.app-brand {
    background-color: #309947;

    border-top-left-radius: 4px;
    border-top-left-radius: var(--border-radius-form);
    border-top-right-radius: 4px;
    border-top-right-radius: var(--border-radius-form);
}

.login-form {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.app-brand__logo--light-mode {
    display: none
}

.app-brand__logo--dark-mode {
    display: block
}

.silverstripe-brand .silverstripe-cms-logo .text {
    fill: #fff
}

.silverstripe-brand .silverstripe-cms-logo .glyph {
    fill: #44c8f5
}

.login-form .left-remember-contents img.avatar {
    border-color: var(--color-field-border);
}

input.text:focus,
textarea:focus {
    border-color: #166FA2 !important;
}

.app-brand, .login-form {
    -ms-grid-column: 2;
    grid-column: 2;
}

.app-brand {
    -ms-grid-row: 2;
    grid-row: 2;
}

.login-form {
    display: block;

    -ms-grid-row: 3;
    grid-row: 3;
}

.silverstripe-brand {
    -ms-grid-column: 2;
    grid-column: 2;

    -ms-grid-row: 4;
    grid-row: 4;

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}