@import url("header.css");
@import url("footer.css");

:root {
    --white-100: #FFF;
    --neutral-200: #969696;
    --blue-500: #004a8c;
    --blue-700: #002d4b;
    --yellow-100: #fcfc1b;
    --gray-100: #f9f9f9;
    --gray-200: #dedede;
    --gray-300: #747876;
    --gray-800: #2d2d2d;
    --white: #ffffff;
    --black: #000000;
}

body main {
    overflow: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif !important;
    background-color: var(--gray-100);
}

body a {
    text-decoration: none !important;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
body p {
    font-size: 10px;
    font-size: 1rem;
}

body p,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body form,
body input,
body select,
body option {
    font-family: Arial, Helvetica, sans-serif;
}

body ol,
body ul {
    padding-left: 0rem !important;
}

.btn-primary {
    background-color: var(--blue-700);
    border-color: var(--blue-700);
    transition: 400ms;
    padding: 8px 16px;
    color: var(--white);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem
}

.btn-primary:hover {
    background-color: var(--yellow-100) !important;
    border-color: var(--yellow-100) !important;
    color: var(--blue-700) !important;
    transition: 200ms;
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--gray-300);
    border-color: white;
    color: var(--gray-100);
}

.btn-secondary{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: var(--primary-100);
    border: 1px solid var(--primary-100);
    background: var(--neutral-0);
    transition: 400ms;
    padding: 8px 16px;
    font-size: 1rem;
}

.btn-secondary:hover{
    background-color: var(--yellow-100) !important;
    color: var(--blue-700) !important;
    border: 1px solid var(--primary-100);
    transition: 400ms;
}
.btn-secondary:active{
    color: var(--primary-600);
    border: 1px solid var(--primary-600);
    background: var(--primary-200);
}
.btn-secondary:hover:disabled,.btn-secondary:disabled{
    border: 1px solid var(--neutral-300);
    background: var(--neutral-0);
    color: #a4a6a5;
}
.btn-secondary:focus{
    background-color: var(--yellow-100) !important;
    color: var(--blue-700) !important;
    border: 1px solid var(--primary-100);
    transition: 400ms;
}

.btn-yellow {
    background-color: var(--yellow-100) !important;
    padding: 8px 16px;
    color: var(--blue-700) !important;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.btn-yellow:hover {
    background-color: var(--gray-200) !important;
    color: var(--blue-700) !important;
    transition: 200ms;
}


.btn-outline-primary {
    padding: 8px 16px;
    color: var(--blue-700) !important;
    border-color: var(--blue-700) !important;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.btn-outline-primary:hover {
    background-color: var(--blue-700) !important;
    color: var(--white) !important;
    transition: 200ms;
}

.btn-outline-light {
    background: transparent !important;
    padding: 0.5rem 1rem;
    color: var(--white) !important;
    border-color: var(--white) !important;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.btn-outline-light:hover {
    background-color: var(--yellow-100) !important;
    border-color: var(--yellow-100) !important;
    color: var(--blue-700) !important;
    transition: 200ms;
}
.btn-outline-light:focus {
    background-color: var(--yellow-100) !important;
    border-color: var(--yellow-100) !important;
    color: var(--blue-700) !important;
    transition: 200ms;
}