@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Material+Icons+Round');

.rms { /* rms = React Magma Styles */
    /* COLORS https://react-magma.cengage.com/version/next/design-intro/colors/ */
    --color-primary: #006298;
    --color-focus: #027ee1;
    --color-focusInverse: rgba(255,255,255,0.7);
    --color-foundation: #00263e;
    --color-foundation02: #003865;
    --color-foundation03: #00a9e0;
    --color-foundation04: #71c5e8;
    --color-success: #3A8200;
    --color-success02: #48A200;
    --color-danger: #C61D23;
    --color-pop: #E0004D;
    --color-pop02: #FC4C02;
    --color-pop03: #F2A900;
    --color-pop04: #FFC72C;
    --color-pop05: #92278F;
    --color-pop06: #007A6D;
    --color-neutral: #3F3F3F;
    --color-neutral02: #575757;
    --color-neutral03: #707070;
    --color-neutral04: #8f8f8f;
    --color-neutral05: #BFBFBF;
    --color-neutral06: #DFDFDF;
    --color-neutral07: #F7F7F7;
    --color-neutral08: #ffffff;
    --color-primaryInverse: #70CDFF;
    --color-successInverse: #91CF60;
    --color-dangerInverse: #F59295;
    --color-primary-hover: #004165;
    --color-neutral08-hover: #e5eff4;
}
/* BUTTONS https://react-magma.cengage.com/version/next/design/button/ */
.rms button,
.rms button.medium,
.rms .button,
.rms .button.medium {
    margin: 4px;
    min-width: 90px;
    overflow: hidden;
    padding: 12px 16px;
    border-radius: 4px;
    border: 2px solid var(--color-primary);
    background-color: var(--color-neutral08);
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    box-sizing: border-box;
    line-height: 16px;
    height: 40px;
    display: inline-flex;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
}
.rms button.low,
.rms .button.low {
    border-color: var(--color-neutral08);
}
.rms button.high,
.rms .button.high {
    background-color: var(--color-primary);
    color: var(--color-neutral08);
}
.rms button:hover,
.rms button:focus,
.rms button.medium:hover,
.rms button.medium:focus,
.rms .button:hover,
.rms .button:focus,
.rms .button.medium:hover,
.rms .button.medium:focus {
    background-color: var(--color-neutral08-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

/* FOCUS STATE https://react-magma.cengage.com/version/next/design/button/ */
.rms :focus,
.rms :focus:active {
    outline-offset: 4px;
    outline: var(--color-focus) dotted 2px;
}
/* On dark backgrounds: */
.rms .inverse:focus,
.rms .inverse:focus:active {
    outline-offset: 4px;
    outline: var(--color-focusInverse) dotted 2px;
}

.rms .alert {
    opacity: 1;
    border-radius: 4px;
    font-weight: 400;
    color: var(--color-neutral08);
    background-color: var(--color-neutral);
    box-sizing: border-box;
    line-height: 24px;
    padding: 12px 0;
}
.rms .alert.success {
    background-color: var(--color-success);
}
.rms .alert span.material-icons-round {
    vertical-align: top;
}
/* ICONS */
/* https://material.io/resources/icons/?style=round */
/* https://developers.google.com/fonts/docs/material_icons */
span.material-icons-round {
    padding: 0 8px 0 12px;
    height: 1em;
    vertical-align: middle;
}
.rms button span.material-icons-round {
    font-size: inherit;
    padding-left: 0;
}