/* |||||||||||||||||||||||||||||| CORE STYLES |||||||||||||||||||||||||||||| */

/* ----- STYLE VARIABLES ----- */

@import "./variables.css";

/* ----- FONT FAMILIES ----- */

@font-face {
    font-family: "font-regular";
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "font-bold";
    src: url("fonts/Roboto-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "font-light";
    src: url("fonts/Roboto-Light.ttf") format("truetype");
}

@font-face {
    font-family: "font-medium";
    src: url("fonts/Roboto-Medium.ttf") format("truetype");
}

html {
    font-size: var(--font-base-size); /* base font size = 1rem */
    height: 100%;
}

/* |||||||||||||||||||[ PAGE BODY ]||||||||||||||||||| */

body {
    font-family: font-regular;
    font-size: var(--font-p-size);
    letter-spacing: var(--font-p-letter-spacing);
    color: var(--color-font-primary);
    /*background-color: var(--color-neutral-100);*/
    /*padding: var(--spacing-l) 0;*/
    margin: 0;
    min-width: var(--body-min-width);
}

/* |||||||||||||||||||[ TYPEOGRAPHY ]||||||||||||||||||| */

/* ----- CORE FONTS ----- */

p {
    font-family: font-regular;
    font-size: var(--font-p-size);
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    margin: 0 0 var(--spacing-xl);
}

h1 {
    font-family: font-light;
    font-size: var(--font-h1-size);
    letter-spacing: var(--font-h1-letter-spacing);
    word-spacing: var(--font-h1-word-spacing);
    margin: 0 0 var(--spacing-l);
}

h2 {
    font-family: font-light;
    font-size: var(--font-h2-size);
    letter-spacing: var(--font-h2-letter-spacing);
    word-spacing: var(--font-h2-word-spacing);
    margin: 0 0 var(--spacing-m);
}

h3 {
    font-family: font-light;
    font-size: var(--font-h3-size);
    letter-spacing: var(--font-h3-letter-spacing);
    word-spacing: var(--font-h3-word-spacing);
    color: var(--color-font-secondary);
    margin: 0 0 0 0;
}

a {
    display: block;
    font-family: font-regular;
    font-size: var(--font-p-size);
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-action-400);
    width: 100%;
    height: auto;
}

a:hover {
    color: var(--color-action-300);
}

a:visited {
    color: var(--color-action-500);
}

.attention {
    font-weight:400;
    color: var(--color-attention-500);
}



/* |||||||||||||||||||[ CARDS ]||||||||||||||||||| */

/* |||||||||||||||||||[ FORMS ]||||||||||||||||||| */

input[type=text] {
    box-sizing: border-box;
    width: 50%;
    padding: var(--spacing-m);
    border-style: solid;
    border-width: 0;
    border-radius: var(--radius-m);
    letter-spacing: var(--font-p-letter-spacing);
    box-shadow: var(--shadow-form);
    font-family: font-regular;
    font-size: var(--font-p-size);
    outline-style: solid;
    outline-width: 0.0625rem; /* 1px */
    outline-color: var(--color-neutral-400);
    background-color: var(--color-action-100);
    word-wrap: break-word;
}

input[type=text]:focus {
    outline-width: .125rem; /* 2px */
    outline-color: var(--color-action-300);
    background-color: var(--color-neutral-white);
}

.form_text_input {
    margin: var(--spacing-s) 0 var(--spacing-xl) 0;
}

input.form_text_input_long {
    width: 75%;
    margin: var(--spacing-s) 0 var(--spacing-xl) 0;
}

.form_textarea_input {
    box-sizing: border-box;
    padding: var(--spacing-m);
    border-style: solid;
    border-width: 0;
    border-radius: var(--radius-m);
    letter-spacing: var(--font-p-letter-spacing);
    box-shadow: var(--shadow-form);
    font-family: font-regular;
    font-size: var(--font-p-size);
    outline-style: solid;
    outline-width: 0.0625rem; /* 1px */
    outline-color: var(--color-neutral-400);
    background-color: var(--color-action-100);
    resize: vertical;
    min-height: 6rem; /* 96px */
    margin: var(--spacing-s) 0 var(--spacing-xl) 0
}

.form_textarea_input:focus {
    outline-width: 0.125rem; /* 2px */
    outline-color: var(--color-action-400);
    background-color: var(--color-neutral-white);
}

.form_inputs {
    /*margin: 0 0 var(--spacing-s);
    position: relative;*/
}

.form_label {
    display: block;
    position: relative;
    top: var(--form-label);
    height: 0;
    font-family: font-regular;
    font-size: var(--font-p-size);
    color: var(--color-font-secondary);
    letter-spacing: var(--font-p-letter-spacing);
}

.form_label_block {
    display: block;
    position: relative;
    height: var(--spacing-s);
    font-family: font-regular;
    font-size: var(--font-p-size);
    color: var(--color-font-secondary);
    letter-spacing: var(--font-p-letter-spacing);
}

.form_label_left {
    display: block;
    position: relative;
    font-family: font-regular;
    font-size: var(--font-p-size);
    color: var(--color-font-secondary);
    letter-spacing: var(--font-p-letter-spacing);
    margin: var(--spacing-m) 0 0 0;
}

.form_dropdown_input {
    width: 50%;
    padding: var(--spacing-m);
    box-sizing: border-box;
    background-color: var(--color-action-100);
    border-style: solid;
    border-width: 0;
    border-radius: var(--radius-m);
    font-family: font-regular;
    font-size: var(--font-p-size);
    letter-spacing: var(--font-p-letter-spacing);
    box-shadow: var(--shadow-inner-s);
    margin: var(--spacing-s) 0 var(--spacing-xl) 0;
    outline-style: solid;
    outline-width: 0.0625rem; /* 1px */
    outline-color: var(--color-neutral-400);
}

.form_dropdown_input:focus {
    outline-width: 0.125rem; /* 2px */
    outline-color: var(--color-action-400);
    background-color: var(--color-neutral-white);
}

.form_dropdown_menu {
    height: 4rem;
    padding: var(--spacing-m);
}

select {
    outline-width: .125rem; /* 2px */
    outline-color: var(--color-action-300);
    background-color: var(--color-neutral-white);
    border: .125rem solid var(--color-neutral-300);
}

.txtentrytrouble {
    width: 100%;
    padding: var(--spacing-m);
    box-sizing: border-box;
    background-color: var(--neutral-100);
    border-style: solid;
    border-width: 0;
    border-radius: var(--radius-m);
    font-family: font-regular;
    font-size: var(--font-p-size);
    color: var(--color-attention-500);
    letter-spacing: var(--font-p-letter-spacing);
    box-shadow: var(--shadow-inner-s);
    margin: 0 0 var(--spacing-m);
}

::placeholder {
    /* FOR FIREFOX */
    color: var(--color-neutral-300);
    opacity: 1;
}

::-ms-input-placeholder {
    /* FOR EDGE 12-18 */
    color: var(--color-neutral-300);
}

.entrylabeltrouble {
    display: block;
    font-family: font-regular;
    font-size: var(--font-p-size);
    color: var(--color-font-secondary);
    letter-spacing: var(--font-p-letter-spacing);
    margin: 0 0 var(--spacing-xxs) 0;
}

/* |||||||||||||||||||[ BUTTONS ]||||||||||||||||||| */

/* primary button */

.btn_primary {
    font-family: font-bold;
    font-size: var(--font-p-size);
    text-transform: uppercase;
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-neutral-white);
    background-color: var(--color-action-500);
    border: var(--btn-border-width) solid var(--color-action-500);
    border-radius: var(--radius-m);
    padding: var(--btn-padding);
    min-width: var(--btn-min-width);
    margin: 0 0 var(--spacing-l);
}

.btn_primary:hover {
    background-color: var(--color-action-400);
    border: var(--btn-border-width) solid var(--color-action-400);
}

.btn_primary:focus {
    outline-width: .125rem; /* 2px */
    outline-color: var(--color-action-400);
    background-color: var(--color-action-400);
}

.btn_primary_next {
    font-family: font-medium;
    font-size: var(--font-p-size);
    text-transform: uppercase;
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-neutral-white);
    background-color: var(--color-action-500);
    border: var(--btn-border-width) solid var(--color-action-500);
    border-radius: var(--radius-m);
    padding: var(--btn-padding);
    min-width: var(--btn-min-width);
    margin: 0 0 var(--spacing-l);
}

.btn_primary_next:hover {
    background-color: var(--color-action-400);
    border: var(--btn-border-width) solid var(--color-action-400);
}

.btn_primary_next:focus {
    outline-width: .125rem; /* 2px */
    outline-color: var(--color-action-400);
    background-color: var(--color-action-400);
}

/* primary button - responsive */

.btn_primary_responsive {
    font-family: font-medium;
    font-size: var(--font-p-size);
    text-transform: uppercase;
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-neutral-white);
    background-color: var(--color-action-500);
    border: var(--btn-border-width) solid var(--color-action-500);
    border-radius: var(--radius-m);
    padding: var(--btn-padding);
    min-width: 0;
    margin: 0 0 var(--spacing-l);
}

.btn_primary_responsive:hover {
    background-color: var(--color-action-400);
    border: var(--btn-border-width) solid var(--color-action-400);
}

.btn_primary_responsive:focus {
    outline-width: .125rem; /* 2px */
    outline-color: var(--color-action-400);
    background-color: var(--color-action-400);
}

/* secondary button */

.btn_secondary {
    font-family: font-bold;
    font-size: var(--font-p-size);
    text-transform: uppercase;
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-neutral-500);
    background-color: var(--color-neutral-white);
    border: var(--btn-border-width) solid var(--color-neutral-300);
    border-radius: var(--radius-m);
    padding: var(--btn-padding);
    min-width: var(--btn-min-width);
}

.btn_secondary:hover {
    border: var(--btn-border-width) solid var(--color-action-300);
    color: var(--color-action-500);
}

.btn_secondary:focus {
    outline-color: var(--color-neutral-400);
}

.btn_secondary_next {
    font-family: font-bold;
    font-size: var(--font-p-size);
    text-transform: uppercase;
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-neutral-500);
    background-color: var(--color-neutral-white);
    border: var(--btn-border-width) solid var(--color-neutral-300);
    border-radius: var(--radius-m);
    padding: var(--btn-padding);
    min-width: var(--btn-min-width);
    margin: 0 0 var(--spacing-l);
}

.btn_secondary_next:hover {
    border: var(--btn-border-width) solid var(--color-neutral-500);
}

.btn_secondary_next:focus {
    outline-color: var(--color-neutral-500);
}

/* secondary button - responsive */

.btn_secondary_responsive {
    font-family: font-bold;
    font-size: var(--font-p-size);
    text-transform: uppercase;
    letter-spacing: var(--font-p-letter-spacing);
    word-spacing: var(--font-p-word-spacing);
    color: var(--color-neutral-500);
    background-color: var(--color-neutral-white);
    border: var(--btn-border-width) solid var(--color-neutral-300);
    border-radius: var(--radius-m);
    padding: var(--btn-padding);
    min-width: 0;
    margin: 0 0 var(--spacing-l);
}

.btn_secondary_responsive:hover {
    border: var(--btn-border-width) solid var(--color-action-300);
    color: var(--color-action-400);
}

.btn_secondary_responsive:focus {
    outline-width: var(--btn-border-width);
    outline-color: var(--color-neutral-300);
    color: var(--color-action-500);
}

/* |||||||||||||||||||[ GENERAL UI ]||||||||||||||||||| */

.fullwidth {
    width: 100%;
}

.verticaltop {
    vertical-align: top;
}

.divider {
    background-color: var(--color-neutral-300);
    height: 0.0625rem !important;
    /*height: 0.0625rem; /* 1px */
    margin: var(--spacing-xl) 0;
}

.rightalign {
    display: flex;
    justify-content: flex-end;
}

.table {
    border-spacing: 1px;
    display: block;
    width: 100%;
}

tr {
    display: block;
    width: 100%;
}

td {
    display: block;
    width: 100%;
}

.notify {
    display: block;
}

.singletable {
    width: 100%;
    margin: auto;
}

.verify {
    color: var(--color-attention-500);
}


.logoimgdiv {
    width: 100%;
}

.tbllinks {
    margin: 0 0 var(--spacing-l) 0;
    width: 100%;
}

.footer {
    width: 100%;
    height: var(--spacing-xxl);
}

.logoimg {
    height: var(--spacing-xl);
    float: right;
    margin: 0 0 0 auto;
}

.headshotimg {
    border-radius: .5rem;
    display: block;
    width: auto;
}