@font-face {
    font-family: Lato;
    src: url("/static/fonts/Lato-Regular.8ab18d934cfa.eot");
    src: url("/static/fonts/Lato-Regular.8ab18d934cfa.eot?#iefix")
            format("embedded-opentype"),
        url("/static/fonts/Lato-Regular.bd03a2cc277b.woff2") format("woff2"),
        url("/static/fonts/Lato-Regular.27bd77b9162d.woff") format("woff"),
        url("/static/fonts/Lato-Regular.6d4e78225df0.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: Lato;
    src: url("/static/fonts/Lato-Bold.a2fb219c999a.eot");
    src: url("/static/fonts/Lato-Bold.a2fb219c999a.eot?#iefix") format("embedded-opentype"),
        url("/static/fonts/Lato-Bold.cccb89748581.woff2") format("woff2"),
        url("/static/fonts/Lato-Bold.d878b6c29b10.woff") format("woff"),
        url("/static/fonts/Lato-Bold.5b1b8b856d7a.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
}

:root {
    --primary: #613b97;
    --secondary: #9b1f64;
    --accent: #fff;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --header-color: #000;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #fff;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--primary);

    --link-fg: #613b97;
    --link-hover-color: #613b97;
    --link-selected-fg: #613b97;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: #609ab6;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #532c8b;
    --close-button-bg: #888; /* Previously #bbb, contrast 1.92 */
    --close-button-hover-bg: #747474;
    --delete-button-bg: #eb5768;
    --delete-button-hover-bg: #de5262;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);
}

/* *,
*::before,
*::after {
    box-sizing: border-box;
} */

#user-tools a,
#user-tools a:focus,
#user-tools a:hover {
    color: var(--header-link-color);
    border-bottom-color: var(--header-link-color);
}

#user-tools a:not(:hover) {
    border: none;
}

html {
    line-height: 1.5;
}

a:hover {
    text-decoration: underline;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.5;
    margin: 0;
}

.phageai-container {
    /* text-align: center; */
    display: flex;
    justify-content: center;
}

.middle-box {
    width: 400px;
    margin: 0 auto;
    padding: 8% 0;
    display: flex;
    flex-direction: column;
}

.logo {
    width: 250px;
    margin: -50px 0;
    pointer-events: none;
}

body {
    font-family: "Lato", "Lucida Grande", Tahoma, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    font-size: 15px;
}

input.phageai-form-control {
    width: 100%;
    font-size: 15px;

    color: #2b1f3c;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    outline: 0;
}

input.phageai-form-control:focus {
    border: 1px solid #613b97;
    border-radius: 2px;
}

input.phageai-form-control.has-error:not(:focus),
input.phageai-form-control.is-invalid:not(:focus) {
    border-bottom: 1px solid #eb5768;
}

.error-text {
    font-size: 12px;
    color: #eb5768;
    margin-top: -0.75rem;
    margin-bottom: 0.5rem;
}
/* 
a {
    color: #613b97;
    text-decoration: none;
} */
/* 
a:hover {
    text-decoration: underline;
} */

.phageai-form .phageai-form {
    display: flex;
    flex-direction: column;
}

.phageai-form .phageai-form input {
    margin-bottom: 1rem;
}

.phageai-form .phageai-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    border: transparent;
    outline: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.phageai-form .phageai-button-primary {
    background: #613b97;
    border: 1px solid #613b97;
    color: #ffffff;
}

.phageai-form .phageai-button-primary:hover {
    background: #532c8b;
    border: 1px solid #532c8b;
    text-decoration: none;
}

.phageai-form .phageai-button-primary:focus {
    background: #472677;
}

.phageai-form .phageai-button-secondary {
    color: #613b97;
    background-color: #ffffff;
    border: 1px solid #613b97;
}

.phageai-form .phageai-button-secondary:hover {
    background: #ece7f2;
    color: #613b97;
    border: 1px solid #ece7f2;
    text-decoration: none;
}

.phageai-form .phageai-button-secondary:focus {
    background-color: #e3daf0;
}

.phageai-form .info-text {
    font-size: 15px;
    margin-top: 1rem;
    color: #565759;
    text-align: center;
}

.phageai-form .footer {
    font-size: 15px;
    color: #565759;
    text-align: center;
    margin-top: 2rem;
}

.phageai-form .form-header {
    text-align: center;
}

.text-center {
    text-align: center;
}