body {
    height: 100%;
    background: #fff;
    font-family: Lato, sans-serif;
    line-height: 15px;
}

/*--------------------------------------------------------------------------------------------------------------------*
 * Semantic-UI Overrides
 *--------------------------------------------------------------------------------------------------------------------*/

/* Modify segment padding amount */
.ui.raised.segment {
    padding: 40px;
}

.ui.no-padding.segment {
    padding: 0;
    margin-bottom: 0;
}

/*--------------------------------------------------------------------------------------------------------------------*
 * SSO-specific Styles
 *--------------------------------------------------------------------------------------------------------------------*/

.ui.logo.image {
    width: auto;
    height: 48px;
    margin-bottom: 25px;
}

.ui.button {
    margin: 0 0 .5em;
    transition: all 300ms ease;
}

.ui.button[type=submit],
a.ui.button {
    background-color: #487BE4;
    color: white;
}

.ui.button[type=submit]:hover,
.ui.button[type=submit]:active,
.ui.button[type=submit]:focus,
a.ui.button:hover,
a.ui.button:active,
a.ui.button:focus {
    background-color: #2968e9;
    color: white;
}

.ui.button.secondary[type=submit],
a.ui.button.secondary {
    background-color: #0A3185;
    color: white;
}

.ui.button.secondary[type=submit]:hover,
.ui.button.secondary[type=submit]:active,
.ui.button.secondary[type=submit]:focus,
a.ui.button.secondary:hover,
a.ui.button.secondary:active,
a.ui.button.secondary:focus {
    background-color: #0537a4;
}

.forgot-password {
    text-align: left;
    margin: 0 0 2em;
}

/* Link that is underlined on hover */
.text-link {
    -webkit-transition: color 300ms ease;
    transition: color 300ms ease;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    color: #0E46BE;
    margin: 0 0 1em;
    text-align: left;
}

.text-link:hover {
    color: #0037ad;
    text-decoration: underline;
}

.copyright-text {
    font-weight: 300;
    font-size: 14px;
    color: rgba(0,0,0, 0.87);
}

.ui.info.message .requirement-error,
.requirement-error {
    color: #9f3a38 !important;
}

.ui.accordion {
    width: 100%;
    margin: 1.5em 0 0;
}

.ui.accordion .title {
    display: flex;
    align-items: center;
    opacity: .5;
    margin: 0 0 .5em -5px;
    font-size: 14px !important;
}

.ui.accordion .title:hover {
    opacity: .75;
}

/*--------------------------------------------------------------------------------------------------------------------*
 * Error Page Styles
 *--------------------------------------------------------------------------------------------------------------------*/

body.errors {
    background: #f9f9f9;
}

.main.menu {
    background: #fff;
}

.logo.item {
    margin: 0 auto;
}

.logo.item::before {
    background: none;
}


.container .ui.header {
    width: 100%;
    max-width: 530px;
    margin: 0 auto;
}

.container .ui.header h5 {
    font-weight: normal;
}

.container .ui.header .content .sub.header {
    line-height: 1.5em;
    padding-top: 1em;
}

img.ui.image.error-image {
    width: 100%;
    max-width: 50%;
    margin: 20px auto;
}


/*--------------------------------------------------------------------------------------------------------------------*
 * New blue-on-the-left / form-on-the-right styles
 *--------------------------------------------------------------------------------------------------------------------*/

.container {
    display: flex;
    flex-direction: row;
    min-height: 100%;
}

.container .outer-container {
    box-sizing: border-box;
    position: relative;
    flex-basis: 50%;
    display: flex;
    align-items: center;
    height: auto;
    min-height: 100%;
    padding: 30px;
}

.container .outer-container .inner-container {
    position: relative;
    height: auto;
    width: 100%;
    max-width: 400px;
    margin: auto;
}

/* --------------------------- */
/* left-specific */
/* --------------------------- */


/* little blue triangle thingy */
.container .left.outer-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    margin: auto;
    height: 30px;
    width: 30px;
    -webkit-transform: translate(50%, 0) rotate(45deg);
    -moz-transform: translate(50%, 0) rotate(45deg);
    -ms-transform: translate(50%, 0) rotate(45deg);
    -o-transform: translate(50%, 0) rotate(45deg);
    transform: translate(50%, 0) rotate(45deg);
}

.container .left.outer-container .inner-container img.company {
    max-width: 100%;
}

/* --------------------------- */
/* responsive */
/* --------------------------- */

@media only screen and (max-width: 900px) {

    .container {
        flex-direction: column;
    }

    .container .outer-container {
        flex-basis: auto;
        min-height: 0;
    }

    .container .right.outer-container {
        padding-top: 45px; /* account for the little triangle thing cutting into the space */
    }

    /* move the little triangle thing to the bottom of the area */
    .container .left.outer-container::after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: translate(0, 50%) rotate(45deg);
        -moz-transform: translate(0, 50%) rotate(45deg);
        -ms-transform: translate(0, 50%) rotate(45deg);
        -o-transform: translate(0, 50%) rotate(45deg);
        transform: translate(0, 50%) rotate(45deg);
    }
}

/* don't let the inner containers get too far from the center on huge screens */
@media only screen and (min-width: 1500px) {
    .container .left.outer-container .inner-container {
        margin-right: 170px;
    }
    .container .right.outer-container .inner-container {
        margin-left: 170px;
    }
}


/*--------------------------------------------------------------------------------------------------------------------*
 * Unsupported browser message
 *--------------------------------------------------------------------------------------------------------------------*/

.ui.warning.message.unsupported-browser.hidden {
    display: none !important;
}

.u.warning.message.unsupported-browser .ui.button {
    color: rgba(0, 0, 0, .6) !important;
    text-decoration: none !important;
}


/*--------------------------------------------------------------------------------------------------------------------*
 * Custom icon message styles
 *--------------------------------------------------------------------------------------------------------------------*/

.ui.icon.message {
    box-shadow: none !important;
    border: 1px solid !important;
    padding: 0 !important;
}
.ui.icon.message > .icon {
    align-self: stretch !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 1 !important;
    width: 49px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 21px 0 !important;

    font-size: 21px !important;
}
.ui.icon.message .header {
    font-size: 16px !important;
}
.ui.icon.message .content {
    padding: 21px !important;
}
.ui.icon.message p,
.ui.icon.message ul li {
    font-size: 14px !important;
}
.ui.icon.message a {
    text-decoration: underline !important;
}

/* --- negative --- */

.ui.negative.message {
    color: #5b0f0f !important;
    border-color: #db2828 !important;
    background: #fdf5f5 !important;
}
.ui.negative.message p,
.ui.negative.message ul {
    color: #5b0f0f !important;
}
.ui.negative.message > .icon {
    background: #db2828 !important;
    color:  #fdf5f5 !important;
}
.ui.negative.message a:hover {
    color: #190404 !important;
}

/* --- warning --- */

.ui.warning.message {
    display: flex !important; /* semantic hides by default */
    color: #4f3b01 !important;
    border-color: #fbbd08 !important;
    background: #fffdf9 !important;
}
.ui.warning.message p,
.ui.warning.message ul {
    color: #4f3b01 !important;
}
.ui.warning.message > .icon {
    background: #fbbd08 !important;
    color: #fffdf9 !important;
}
.ui.warning.message a:hover {
    color: #1d1600 !important;
}

/* --- info --- */

.ui.info.message {
    color: #103f62 !important;
    border-color: #2185d0 !important;
    background: #f3f9fd !important;
}
.ui.info.message p,
.ui.info.message ul {
    color: #103f62 !important;
}
.ui.info.message > .icon {
    background: #2185d0 !important;
    color: #f3f9fd !important;
}
.ui.info.message a:hover {
    color: #051420 !important;
}

/* --- positive --- */

.ui.positive.message {
    color: #0a3815 !important;
    border-color: #21ba45 !important;
    background: #f6fdf8 !important;
}
.ui.positive.message p,
.ui.positive.message ul {
    color: #0a3815 !important;
}
.ui.positive.message > .icon {
    background: #21ba45 !important;
    color: #f6fdf8 !important;
}
.ui.positive.message a:hover {
    color: #020d05 !important;
}