﻿@font-face {
    font-family: "Headline Bold";
    font-display: fallback;
    font-style: normal;
    font-weight: 400;
    src: url("../font/Gotham-Bold.woff2"), url("../font/Gotham-Bold.woff"), local("Helvetica Neue"), local("Arial"), local("sans-serif");
}
@font-face {
    font-family: "Text Regular";
    font-display: fallback;
    font-style: normal;
    font-weight: 400;
    src: url("../font/OpenSans-Regular.woff2"), url("../font/OpenSans-Regular.woff"), local("Helvetica Neue"), local("Arial"), local("sans-serif");
}
@font-face {
    font-family: "Text SemiBold";
    font-display: fallback;
    font-style: normal;
    font-weight: 400;
    src: url("../font/OpenSans-SemiBold.woff2"), url("../font/OpenSans-SemiBold.woff"), local("Helvetica Neue"), local("Arial"), local("sans-serif");
}
@font-face {
    font-family: "Text Bold";
    font-display: fallback;
    font-style: normal;
    font-weight: 400;
    src: url("../font/OpenSans-Bold.woff2"), url("../font/OpenSans-Bold.woff"), local("Helvetica Neue"), local("Arial"), local("sans-serif");
}

body {
    margin: 0;
    padding: 0;
    font-family: "Text Regular";
}
a {
    color: #026198;
    text-decoration: none;
}
a:hover {
    color: #e52d87;
    transition: color 0.2s ease;
    text-decoration: underline;
}
a:hover svg {
    fill: #e52d87;
    transition: fill 0.2s ease;
}
.invisible {
    display: none;
}

.cronos-web--bg {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-content: center;
    align-items: center;
    background-image: linear-gradient(90deg, rgba(229, 45, 135, 0.25) 0%, rgba(124, 96, 162, 0.25) 35%, rgba(56, 183, 230, 0.25) 100%);
    background-image: linear-gradient(90deg, rgba(229, 45, 135, 0.1875) 0%, rgba(124, 96, 162, 0.1875) 35%, rgba(56, 183, 230, 0.1875) 100%);
}
.login-form--container {
    max-width: 25rem;
    position: relative;
    background: #ffffff;
    padding: 3rem;

    -webkit-box-shadow: 0 0 1rem 0 rgba(0,0,0,0.75);
    -moz-box-shadow: 0 0 1rem 0 rgba(0,0,0,0.75);
    box-shadow: 0 0 2rem 0.25rem rgba(88, 88, 90, 0.5);
}
.login-form--container p {
    font-family: "Text Regular";
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding: 1rem 0 0.5rem;
}

.amporis-logo {
    margin-top: -2rem;
    margin-left: -1rem;
}

@media screen and (min-width: 0) {
    .amporis-logo {
        width: 10rem;
        height: 5rem;
    }
}

@media screen and (min-width: 25rem) {
    .amporis-logo {
        width: 15rem;
        height: 7.5rem;
    }
}

@media screen and (min-width: 34rem) {
    .login-form--container {
        min-width: 19rem;
    }
}


.login-form {
    padding: 2rem;

}

.login-form--web-name {
    font-family: "Headline Bold";
    font-size: 1.625rem;
    line-height: 2.125rem;
    padding: 1.5rem;
    margin: 0;
    max-width: 25rem;
}
.login-form--action-label {
    font-family: "Text Regular";
    font-size: 1.625rem;
    line-height: 2.125rem;
    padding: 1rem 0 0.5rem;
    margin: 0;
}

.login-form--forgot {
    padding: 2rem 0 0;

}

.login-form--under {
    position: relative;
    padding: 1.5rem 0;
}
.login-form--under a {
    display: inline-flex;
    align-items: center;
    color: #58585a;
    transition: color 0.2s ease;
}
.login-form--under a:hover {
    color: #e52d87;
}
.login-form--under a svg {
    fill: #58585a;
    transition: color 0.2s ease;
}
.login-form--under a:hover svg {
    fill: #e52d87;
}
.arrow-left {
    fill: #000000;
    transform: rotate(180deg);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.75rem 0;
}

.login-form--item {
    padding: 0.5rem 0;
}
.login-form--item--chb {
    padding-top: 1rem;
}

.login-form--item input[type=email], .login-form--item input[type=password] {
    font-family: "Text Regular";
    font-size: 1.25rem;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 0.0625rem solid #026198;
    width: 100%;
    outline: 0;
}

.login-form--item input[type=email]:hover, .login-form--item input[type=password]:hover {
    border-bottom-color: #133b66;
}
.login-form--item input[type=email]:focus, .login-form--item input[type=password]:focus {
    border-bottom-color: #e52d87;
}

.login-form--item input[type=checkbox] {
    margin: 0 0.5rem 0 0;
    padding: 0;
}
.login-form--item label {
    font-size: 1.125rem;
}

.login-form--item input[type=submit] {
    border: 0;
    outline: 0;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.125rem;
    font-family:"Text Bold";
    padding: 0.625rem 1.75rem;
    border-radius: 1.25rem;
    border-bottom: 0.3125rem solid;
    transition: all 0.2s ease;
    background-color: #e53187;
    border-bottom-color: #9d177f;
    letter-spacing: 0.0625rem;
    cursor: pointer;
}
.login-form--item input[type=submit]:hover {
    background-color: #9d177f;
    border-bottom-color: #9d177f;
    transform: scale(1.05);
}

.login-form--item input[type=submit]:focus {
    border-bottom-color: #e52d87;
}
.login-form--item input[type=submit]:hover {
    border-bottom-color: #133b66;
}

.validation-summary-errors {


}

.validation-summary-errors ul {
    margin: 0.5rem 0 1rem 1.375rem;
    padding: 0;
}

.validation-summary-errors ul li {
    font-family: "Text Bold";
    font-size: 1.125rem;
    padding: 0.25rem 0;
    color: #dd0000;
}

