@import "../fonts/fonts.css";

html {
    font: normal 14px/1.4 Stolzl, Arial, sans-serif;
    color: #363642;
    font-weight: 400;
    height: 100vh;
}

body {
    padding: 40px 40px;
}

header, main, footer {
    max-width: 1300px;
    margin: 0 auto;
}

h3 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.1;
    margin: 60px 0 0 -2px;
}

h3+.sub {
    font-size: 18px;
    margin: 14px 0;
}

.pre+h3 {
    margin-top: 0;
}

.pre{
    font-size: 14px;
    padding: 0; margin: 60px 0 1em 0;
}

.error {
    color: #D5313A !important;
}

.success {
    color: #12B24B !important;
}


form {
    margin-top: 5em;
}

form section, form fieldset {
    margin: 0.5em 0 5em 0;
}

form label {
    font-size: 18px;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5em;

    transition: 120ms color ease-in-out;
}

form fieldset legend {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0.5em;
}

form fieldset ul {
    list-style: none;
    padding: 0;
    margin: 0.5em 0 auto 0;
    width: auto;

    display: grid;
    grid-template-columns: fit-content(50%) fit-content(50%);
    column-gap: 3em;
    row-gap: 1.5em;

}

form fieldset label {
    font-size: 14px;
    font-weight: 400;
    display: inline;
}

form input[type=text] {
    border: none;
    border-bottom: solid 1px #363642;
    margin-top: 10px;
}

form input[type=text]:focus {
    border-bottom: solid 1px #12B24B;
}

form textarea {
    border: solid 1px #363642;
    min-height: 8em;
    resize: vertical;
}

form textarea:focus {
    border: solid 1px #12B24B;
}

form textarea, form input[type=text] {
    transition-property: border-top-color, border-bottom-color, border-left-color, border-right-color;
    transition-duration: 120ms;
    transition-timing-function: ease-in-out;
}

form input[type=text], form textarea {
    outline: none;
    box-sizing: border-box;
}


form select {
    appearance: none;
    outline: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;

    width: 100%;

    margin-top: 10px;
    border: none;
    border-bottom: solid 1px #363642;
    padding: 0.12em 0.5em;


    /* SVG background image */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: .6em;
    background-position: calc(100% - 1.3em) center;
    background-repeat: no-repeat;
}



form select option {
    border: none;
    padding: 0.5em;
}





form div:focus-within label {
    color: #12B24B;
}

form section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3em;
    row-gap: 3em;
}

form section div {
    width: 100%;
}

form section input[type=text], form section textarea {
    width: 100%;
    line-height: 1.5;
}


form input[type=checkbox] {
    appearance: none;

    margin: 0;
    width: 20px; height: 20px;
    vertical-align: text-bottom;

    border: solid 1px #363642;
    border-radius: 0.25em;

    transition: 120ms background-color, border ease-in-out;
}


form input[type="checkbox"]::before {
    content: "";
    display: block;
    margin-left: -1px;
    width: 100%; height: 100%;
    color: #12B24B;
    background: white;
    clip-path: polygon(32% 44%, 21% 60%, 52% 81% ,84% 31%, 66% 21%, 47% 52%);
    transform: scale(0);

    transition: 240ms transform ease-in-out;
}

form input[type=checkbox]:checked {
    border: solid 1px #12B24B;
    background: #12B24B;
    color: white
}

form input[type=checkbox]:checked:before {
    transform: scale(1);
}

.btn {
    padding: 15px 20px;
    border: none;
    min-width: 200px;

    background: #12B24B;
    color: white;

    transition: 120ms background-color ease;
}

.btn:hover {
    background-color: #24de66;
}

.btn:active {
    background-color: #60f695;
}

.btn:disabled {
    background: #C9C9D3;
    color: #363642
}

.message main {
    display: grid;
    place-content: center;
    margin-top: 3em;
}

.message h3 {
    margin-bottom: 0.7em;
}

.message p {
    color: #9696A3;
    font-size: 18px;
}

.message .btn {
    margin-top: 3em;
}



@media screen and (max-width: 1100px){
    form section {
        grid-template-columns: 1fr;
    }
    form section#intro {
        grid-template-columns: 1fr 1fr;
    }
    form section#intro div:first-of-type {
        grid-column: span 2;
    }
}


@media screen and (max-width: 800px) {
    form section, form section#intro {
        grid-template-columns: 1fr;
    }
    form fieldset ul {
        grid-template-columns: 1fr;
    }

    form section#intro div:first-of-type {
        grid-column: span 1;
    }
}

.uploads {
    padding-top: 1em;
}

.uploads button {
    appearance: none;
    background: white;
    border: solid 1px #363642;
    border-radius: 15px;
    padding: 7px 16px;
    margin: 1em 0 1em 0;
}

.uploads input[type=file] {
    display: none;
}

.upload {
    margin: 0 0 1em 0;
    display: grid;
    grid-template:
        "i t"
        "i b"
        / 58px auto
    ;
    column-gap: 14px;
    align-items: self-start;
}

.upload.empty {
    display: none;
}



.upload .title {
    grid-area: t;
}

.upload .icon {
    display: inline-block;
    line-height: 30px;
    width: 30px; height: 30px;
}

.upload div.icon {
    grid-area: i;
    width: 58px;
    height: 70px;
    line-height: 75px;
    text-align: center;
    background: url(../img/icon.generic.svg) no-repeat;
}

.icon.delete {
    background: url(../img/icon.delete.svg) no-repeat;
}

.icon.reload {
    background: url(../img/icon.reload.svg) no-repeat;
}

.upload .buttons {
    align-self: baseline;
    height: 30px;
    align-self: end;
}

.upload .buttons * { margin: 0; padding: 0}
.upload .buttons .icon { margin-right: 12px;}