@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "variables.css";

body {
    margin: 0;
    padding: 0;
    min-width: 1024px;
    color: var(--app-text-color);
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4444;
    background-image: url(img/tp_images/app-bg.webp);
    background-size: cover;
    background-attachment: fixed;
}

html, body {
    height: 100%;
}

a {
    color: var(--green);
}

a:hover {
    text-decoration: none;
}

.fred-login__container {
    height: calc(100% - 36px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 36px;
}

.fred-login__card {
    width: 500px;
    margin: 0 auto;
    padding: 28px 24px 24px;
}

.fred-login__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
}

.fred-login__logo img {
    width: 250px;
}

.fred-login__description {
    margin: 0 0 36px 0;
}

.fred-login__description h1 {
    font-weight: 500;
    margin: 0 0 8px 0;
}

.fred-login__description p {
    font-size: 14px;
    margin: 0;
}

.fred-login__buttons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 26px;
}

.fred-login__buttons-row-links {
    display: flex;
    align-items: center;
}

.fred-login__buttons-row-links .divider {
    display: block;
    width: 1px;
    height: 12px;
    margin: 0 8px;
    background: rgba(0, 0, 0, .54);
}

.button {
    font-size: 14px;
    background: var(--app-yellow-500);
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    width: fit-content;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.fred-login__notification {
    padding: 10px 16px 10px 45px;
    border-radius: 4px;
    background: var(--app-yellow-100);
    color: var(--app-text-color);
    margin-bottom: 8px;
    position: relative;
}

.fred-login__notification:after {
    content: url(img/tp_images/alert-circle-outline.svg);
    position: absolute;
    top: 11px;
    left: 11px;
    opacity: .7;
    width: 24px;
}

.fred-login__button {
    background: var(--app-yellow-500);
    border: none;
    display: inline-block;
    border-radius: 4px;
    padding: 6px 16px;
    width: fit-content;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    color: inherit;
    box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
}

.fred-login__copyrights {
    text-align: center;
    margin-top: 36px;
}

.fred-login__copyrights a {
    display: block;
    text-align: center;
    margin-bottom: 16px;
}

.fred-login__copyrights p {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, .54);
}

.fred-login__copyrights-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
}

.fred-login__copyrights-links a {
    margin-bottom: 0;
}

.fred-login__form-field {
    display: flex;
    flex-direction: column;
}

.fred-login__form-field input, .fred-login__form-field select {
    border: 1px solid rgba(0, 0, 0, .42);
    border-radius: 4px;
    margin: 0;
    padding: 0 8px;
    font-size: 14px;
}

.fred-login__form-field input {
    height: 32px;
}

.fred-login__form-field select {
    padding: 0;
    overflow: auto;
}

.fred-login__form-field option {
    padding: 8px;
    cursor: pointer;
}

.fred-login__form-field label {
    font-weight: 500;
}

.fred-login__form-field input:focus-visible,
.fred-login__form-field select:focus-visible {
    border-color: transparent;
    outline: 1px solid var(--app-yellow-500);
}

.fred-login__form-field input:focus,
.fred-login__form-field select:focus {
    border-color: var(--app-yellow-500);
    border-radius: 4px;
    outline: var(--app-yellow-500);
}

.fred-login__form-field + .fred-login__form-field {
    margin-top: 24px;
}

.fred-card {
    background: var(--app-white);
    border-radius: 4px;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}

.messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
}

.message {
    margin-bottom: 24px;
    padding: 10px 16px;
    border-radius: 4px;
    display: grid;
    grid-template-columns: 36px auto;
}

.message-error {
    background: var(--app-red-100);
}

.message-success {
    background: var(--app-mint-100);
}

.message-info {
    background: var(--app-blue-02-100);
}

.message p {
    margin: 0;
}

/* --- Basic markup styles --- */

.block {
    margin: 0;
}

.block-left {
    float: left !important;
}

.block-right {
    float: right !important;
}

.align-left {
    text-align: left !important;
}

.align-right {
    text-align: right !important;
}

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

.page {
    min-height: 100%;
}

.views-slideshow-cycle-main-frame, .views_slideshow_cycle_slide {
    width: 100% !important;
}

/* --- Retina styles --- */
@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}

/* --- Mobile styles --- */

@media only screen and (max-device-width: 800px) {
    body {
        min-width: 320px !important;
        -webkit-text-size-adjust: none;
    }
}

.alert {
    padding: 20px;
    border-radius: 5px;
}

.alert-warning-ie {
    margin-top: 30px;
    color: #fff176;
    border: 1px solid #fff9c4;
}

.top-links p {
    margin: 0 0 0.5em;
    text-align: right;
}

.top-links .split {
    margin: 0 0.2em;
    color: #999999;
}

.version-info {
    font-size: 80%;
    color: #999999;
}

.login-form {
    width: 450px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f;
    border-radius: 4px;
}

#gotoShippers a, #gotoCarriers a {
    border-bottom: 1px dashed #005595;
}

#gotoShippers a:hover, #gotoCarriers a:hover {
    text-decoration: none;
}

.sso-button {
    display: block;
    width: 50%;
    min-width: 150px;
    background: #fbfbfc url(images/tess_button.png) repeat 0 -5px;
    border: 1px solid #003c74;
    color: inherit;
    border-radius: 3px;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
}

.sso-button:hover {
    text-decoration: none;
}