/* fonts */
@import url('./volte.css');

/* basic reset */
body,
h1,
h2,
h3,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd,
dt {
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    min-height: 100vh;
    font-family: "Volte Regular", sans-serif;
    background-color: var(--white);
    color: var(--black);

    font-family: var(--body-a-regular-14-font-family);
    font-weight: var(--body-a-regular-14-font-weight);
    color: var(--main-black);
    font-size: var(--body-a-regular-14-font-size);
    letter-spacing: var(--body-a-regular-14-letter-spacing);
    line-height: var(--body-a-regular-14-line-height);
    font-style: var(--body-a-regular-14-font-style);
}

h1 {
    font-family: var(--h1-bold-38-font-family);
    font-weight: var(--h1-bold-38-font-weight);
    color: var(--main-black);
    font-size: var(--h1-bold-38-font-size);
    letter-spacing: var(--h1-bold-38-letter-spacing);
    line-height: var(--h1-bold-38-line-height);
    font-style: var(--h1-bold-38-font-style);
}

h6 {
    color: var(--main-black);
    font-size: var(--body-a-selibold-14-font-size);
    font-family: var(--body-a-selibold-14-font-family);
    font-weight: var(--body-a-selibold-14-font-weight);
    letter-spacing: var(--body-a-selibold-14-letter-spacing);
    line-height: var(--body-a-selibold-14-line-height);
    font-style: var(--body-a-selibold-14-font-style);
}

p {
    font-family: var(--body-a-regular-14-font-family);
    font-weight: var(--body-a-regular-14-font-weight);
    color: #000000;
    font-size: var(--body-a-regular-14-font-size);
    letter-spacing: var(--body-a-regular-14-letter-spacing);
    line-height: var(--body-a-regular-14-line-height);
    font-style: var(--body-a-regular-14-font-style);
}

label {
    font-family: var(--semibold-12-font-family);
    font-weight: var(--semibold-12-font-weight);
    color: var(--main-black);
    font-size: var(--semibold-12-font-size);
    letter-spacing: var(--semibold-12-letter-spacing);
    line-height: var(--semibold-12-line-height);
    white-space: nowrap;
    font-style: var(--semibold-12-font-style);
}

input.text, select, textarea {
    /* display: flex; */
    /* align-items: center; */
    /* gap: 4px; */
    padding: 5px 12px;
    /* position: relative; */
    /* align-self: stretch; */
    /* width: 100%; */
    /* flex: 0 0 auto; */
    background-color: var(--additional-white);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--main-background);
}

a {
    font-family: var(--fooftnote-regular-12-font-family);
    color: #003478;
    font-size: var(--fooftnote-regular-12-font-size);
    font-weight: var(--fooftnote-regular-12-font-weight);
    letter-spacing: var(--fooftnote-regular-12-letter-spacing);
    line-height: var(--fooftnote-regular-12-line-height);
    font-style: var(--fooftnote-regular-12-font-style);
    text-decoration: none;
}

button,
input[type="button"]
{
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    padding: 4px 15px;
    flex: 1;
    flex-grow: 1;
    background-color: var(--main-logo);
    border-radius: 3px;
    border: 1px solid;
    box-shadow: var(--drop-shadow-button-primary);
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    border-color: var(--main-logo);
    font-family: var(--semibold-16-font-family);
    color: var(--additional-white);
    font-size: var(--semibold-16-font-size);
    font-weight: var(--semibold-16-font-weight);
    text-align: center;
    letter-spacing: var(--semibold-16-letter-spacing);
    line-height: var(--semibold-16-line-height);
    white-space: nowrap;
    font-style: var(--semibold-16-font-style);
}

button:disabled, input[type="button"]:disabled
{
    background-color: var(--additional-grey);
    border-color: var(--additional-grey);
}

table {
    border-spacing: 0;
    width: 100%;
}

table th {
    padding: 13px 0px;
    text-align: left;
    font-family: var(--fooftnote-semibold-12-font-family);
    font-weight: var(--fooftnote-semibold-12-font-weight);
    color: #003478;
    font-size: var(--fooftnote-semibold-12-font-size);
    letter-spacing: var(--fooftnote-semibold-12-letter-spacing);
    line-height: var(--fooftnote-semibold-12-line-height);
    font-style: var(--fooftnote-semibold-12-font-style);
    border-bottom: solid 1px #E4EAED;
}

table td {
    padding: 21px 0px;
    position: relative;
    border-bottom: solid 1px #E4EAED;
}

table td.bold {
    letter-spacing: var(--body-a-selibold-14-letter-spacing);
    line-height: var(--body-a-selibold-14-line-height);
    font-style: var(--body-a-selibold-14-font-style);
    font-family: var(--body-a-selibold-14-font-family);
    font-size: var(--body-a-selibold-14-font-size);
    font-weight: var(--body-a-selibold-14-font-weight);
    color: var(--additional-blue);
}

strong {
    letter-spacing: var(--body-a-selibold-14-letter-spacing);
    line-height: var(--body-a-selibold-14-line-height);
    font-style: var(--body-a-selibold-14-font-style);
    font-family: var(--body-a-selibold-14-font-family);
    font-weight: var(--body-a-selibold-14-font-weight);
}

.desktopHidden {
    display: none !important;
}

h5 {
    font-family: var(--h5-semibold-16-font-family);
    color: var(--main-black);
    font-size: var(--h5-semibold-16-font-size);
    font-weight: var(--h5-semibold-16-font-weight);
    letter-spacing: var(--h5-semibold-16-letter-spacing);
    line-height: var(--h5-semibold-16-line-height);
    font-style: var(--h5-semibold-16-font-style);
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 992px) {
    body {
        background-size: 120%;
    }

    .mobileHidden {
        display: none !important;
    }

    .desktopHidden {
        display: inherit !important;
    }
}