/* TM CMS Template */
:root {
    --bg-color: #2e4650;
    --light: #4c6e86;
    --medium: #3d5f6c;
    --normal: #36515d;
    --dark: #273a43;
    --darker: #17242A;
    --darkest: #202020;
    --highlight: #7babc5;
    --highlight-hover: #e3ab77;
    --text-light: #dcdcdc;
    --text: #bebebe;
    --text-lighter: #ffffff;
    --font-size: 14px;
    --font-size-small: 12px;
    --font-size-large: 16px;
    --font-family: 'Roboto', sans-serif;
    --line-height: 1.6;
    --min-height: 100vh;
    --margin: 0;
    --padding: 0;
    --box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    min-height: var(--min-height);
    background: linear-gradient(135deg, var(--darkest) 0%, var(--bg-color) 100%);
    color: var(--text);
    margin: 0px;
    padding: 0px;
}

h1 {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: var(--text-lighter) !important;
}
h2 {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-lighter);
    margin-bottom: 10px;
}


h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-lighter);
    margin-bottom: 10px;
}

h4 {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-lighter);
    margin-bottom: 10px;
}

a, input, textarea, button {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: var(--margin);
    padding: var(--padding);
    box-sizing: var(--box-sizing);
}

a {
    color: var(--text);
    text-decoration: none;
    transition: all 450ms;
}

a:hover {

    color: var(--text-lighter);
}


.form {
    width: 100%;
    margin: 0 auto;
}

.form .input-area {
    margin-bottom: 20px;
}
.form .input-area label {
    display: none;
}
.form input {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    background-color: #17242A;
    border: 1px solid #17242A;
    color: #ffffff;
    outline: none;
    border-radius: 8px;
}

.form input:focus {
    border-color: #7babc5;
    background-color: #36515d;
}

.form textarea {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    background-color: #17242A;
    border: 1px solid #17242A;
    color: #ffffff;
    outline: none;
    border-radius: 8px;
    resize: vertical;
}

.form textarea:focus {
    border-color: #7babc5;
    background-color: #36515d;
}

.form button {
    border: 1px solid #3d5f6c;
    background-color: #3d5f6c;
    border-radius: 8px;
    display: inline-block;
    padding: 12px 32px;
    font-size: 13px;
    color: #bebebe;
    cursor: pointer;
    transition: all 450ms;
    width: auto;
}

.form button:hover {
    border-color: #7babc5;
    background-color: #7babc5;
    color: #ffffff;
}

.form .error {
    color: #ff0000;
    font-size: 14px;
    padding: 10px 0px 0px 0px;
}

.tracedmethod-project {
    position: absolute;
    bottom: 10px;
    left: 10px;
}