:root {
    --palette-primary: 33, 72, 57; /* #214839 */
    --palette-primary-1: rgba(var(--palette-primary), 1);
    --palette-primary-2: rgba(var(--palette-primary), .1);
    --palette-neutral: 248, 248, 248; /* #f8f8f8 */
    --palette-neutral-1: rgba(var(--palette-neutral), 1);
    --palette-neutral-2: rgba(var(--palette-neutral), .1);
    --palette-accent: 0, 60, 81; /* #003C69 */
    --palette-accent-1: rgba(var(--palette-accent), 1);
    --palette-accent-2: rgba(var(--palette-accent), .1);
    --palette-gray: 84, 84, 84; /* #545454 */
    --palette-gray-1: rgba(var(--palette-gray), 1);
    --palette-gray-2: rgba(var(--palette-gray), .1);
    --palette-error: 255, 0, 0; /* #ff0000 */
    --palette-correct: 14, 153, 88; /* #0e9958 */
    --palette-warning: 241, 165, 0; /* #f1a500 */

    --background-color: rgba(var(--palette-neutral), 1);
    --font-color: 0, 0, 0;
    --font-color-accent: rgba(var(--palette-accent), 1);
    --font-color-primary: rgba(var(--palette-primary), 1);
    --font-color-gray: rgba(var(--palette-gray), 1);
    --box-shadow: 0 1px 3px 0 rgba(var(--font-color), 0.1), 0 1px 2px 0 rgba(var(--font-color), 0.06);
    --transition: .3s all;
    --font-family: "Open Sans";
    --font-family-accent: "Open Sans Condensed";
    --background-primary: 232,236,243; /*#e8ecf3*/
    --background-primary-1: rgba(var(--background-primary), 1);
    --background-white: 250,251,252; /*fafbfc*/
    --background-white-1: rgba(var(--background-white),1);
    --palette-text: 27,38,79; /*#1b264f*/
    --palette-text-1: rgba(var(--palette-text),1);
}
/* commend */

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}
form, .full--size {
    height: 100vh
}
body {
    padding: 0;
    margin: 0;
    font-family: "Open Sans";
    font-family: var(--font-family), sans-serif;
    background-color: rgba(248, 248, 248, 1);
    background-color: var(--background-color);
    font-size: 16pt;
    min-height: 100vh;
    background-image: linear-gradient( 178.6deg, rgba(248, 248, 248, 1) 3.3%, rgb(245, 245, 245) 109.6% );
    background-image: linear-gradient( 178.6deg, var(--palette-neutral-1) 3.3%, rgb(245, 245, 245) 109.6% );
}

.validation-summary-errors {
    color: red;
    display: inline-block;
    font-size: 0.8rem;
}

.validation-summary-errors ul{
    margin: 0;
    padding: 0;
}

.validation-summary-errors ul li{
    text-align: left;
    margin-left: 1rem;
    margin-top: .3rem;
    font-weight: 600;
}

.validation-summary-valid {
    display: none;
}

.card {
    max-width: 300px;
    flex: 1 0 auto;
}

.card--popup {
    animation: card_popup .4s;
}

@keyframes card_popup {
    from {
        transform: scale(.01);
    }
    to {
        transform: scale(1);
    }
}

.card.card--100 {
    max-width: 100%;
}

.card
.card__wrapper {
    background:rgba(232,236,243,1);
    background: var(--background-primary-1);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--box-shadow);
    padding: 1rem;
}

.card 
.card__section {
    width: 100%;
    margin-top: 20px;
}

.card 
.card__section ul {
    text-align: left;
}

.card 
.card__section 
a {
    color: rgba(27,38,79,1);
    color: var(--palette-text-1);
    font-size: 0.8rem;
    font-weight: 400;
   
}
.card
.card__section 
a:hover {
    opacity: .69;
   
}

.card 
.card__section a:hover {
    color: var(--palette-primary-1);
}

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

.input {
    text-indent: 10px;
    font-weight: 600;
    padding: 0 5px 0 0;
    height:40px;
    display: inline-block;
    padding-left: .5rem;
    padding-right: .5rem;
    font-size: .7rem;
    outline: none;
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    -webkit-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
    background: rgba(250,251,252,1);
    background: var(--background-white-1);
    border-left: 1px solid rgba(84, 84, 84, .1);
    border-left: 1px solid var(--palette-gray-2);
    letter-spacing: 1px;
}

.input:active {
    border-color: rgba(33, 72, 57, 1);
    border-color: var(--palette-primary-1);
    background: rgba(33, 72, 57, .1);
    background: var(--palette-primary-2);
}

.input:focus {
    border-color: rgba(33, 72, 57, 1);
    border-color: var(--palette-primary-1);
    background: rgba(33, 72, 57, .1);
    background: var(--palette-primary-2);
}

.input::placeholder {
    color:rgba(27,38,79, 1);
    color: var(--palette-text-1);
}


.mar {}
.mar.mar--none {
    margin: 0;
}

.mar.mar--l {
    margin-left: .5rem;
}

.mar.mar--r {
    margin-right: .5rem;
}

.mar.mar--t {
    margin-top: 1.5rem;
}


.font {}
.font.font--xs{

}
.font.font--sm{
    font-size: .75rem;
}
.font.font--md{
    font-size: 2rem
}
.font.font--lg{
    font-size: 2.7rem;
}
.font.font--600{
    font-weight: 600;
}
.font.font--400{
    font-weight: 400;
}
.font.font--200{
    font-weight: 200;
}
.font.font--family {
    font-family: "Open Sans";
    font-family: var(--font-family);
}
.font.font--family-accent {
    font-family: "Open Sans Condensed";
    font-family: var(--font-family-accent);
}
.font.font--color {
    color: rgba(0, 0, 0, 1);
    color: rgba(var(--font-color), 1)
}
.font.font--color-primary {
    color: rgba(33, 72, 57, 1);
    color: var(--font-color-primary);
}
.font.font--color-accent {
    color: rgba(0, 60, 81, 1);
    color: var(--font-color-accent);
}
.font.font--color-gray {
    color:rgba(84, 84, 84, 1);
    color: var(--font-color-gray);
}
.font.font--space{
    letter-spacing: 2px;
}


.button {
    background-color: rgba( 33, 72, 57,1);
    background-color: var(--palette-primary-1);
    outline: none;
    border-radius: 3px;
    font-size: 0.75rem;
    padding: .55rem 1.5rem;
    transition: .3s all;
    transition: var(--transition);
    border: none;
    transition: all .15s;
    font-weight: 600;
    letter-spacing: .045em;
    text-transform: uppercase;
    font-weight: 700;
    user-select: none;
    border: 1px solid  rgba(84, 84, 84, .1);
    border: 1px solid var(--palette-gray-2);
    color: rgba(248, 248, 248, 1);
    color: var( --palette-neutral-1);
    letter-spacing: 2px;
    margin: auto;
}

.button:hover {
    cursor: pointer;
    background:rgba( 33, 72, 57,1);
    background: var(--palette-primary-1);
    color: rgba(248, 248, 248, 1);
    color: var( --palette-neutral-1);
}
.button:active {
    background: rgba(84, 84, 84, .045);
    background: rgba(var(--palette-gray), .045);
    border-color: rgba(84, 84, 84, .049);
    border-color: rgba(var(--palette-gray), .049);
}