form{
	z-index: 1;
	max-width: 64em;
}
#aaa{
    font-size: 2em;
}

label {
	display: block;
	margin: 0.5em 1em;
	flex-direction: column;
    width: 100%;
    max-width: 30em;
}

select, input {
	display: block;
	font-size: inherit;
    width: 100%;
    max-width: 30em;
	/* useful when width is set to anything other than 100% */

}

select{
	position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-align-last: center;
    padding: 0.8em;
    border-radius: 0.5em;
    font-family: var(--fontFamily);
    font-size: 1em;
    font-weight: 100;
    cursor: pointer;
    flex-grow: 1;
    z-index: 1;
	color: rgb(var(--colUIText01));
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}


/* Hover style */

select:hover {
	background-color: rgb(var(--colUIBack04));
}
/* Focus style */

select:focus {
	border-color: rgb(var(--colAccent02));
	box-shadow: 0 0 1px 1px rgb(var(--colAccent));
	box-shadow: 0 0 0 1px -moz-mac-focusring;
	outline: none;
}
/* Set options to normal weight */

select option {
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
	font-weight: normal;

}

select option:hover {
	background-color: rgb(var(--colAccent));
	color: white;
}

select > *:hover {
	background-color: rgb(var(--colAccent));
}



input, textarea{
    color: rgb(var(--colUIText03));
    background-color: rgb(var(--colBG));
    line-height: normal;
    padding: 0.8em;
    border: 0px;
    font-size: 1em;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeight);
    letter-spacing: var(--letterSpacing);
}

input[type="file"]{
    appearance: none;
	display: none;
}

label.fileUpload{
	height: fit-content;
	padding: 0.5em;
	margin-top: 2em;
	background-color: white;
    color: rgb(var(--colUIText01));
}

textarea {
	width: 100% !important;
    max-width: 30em;
	min-height: 2.5em;
    padding: 0.6em;
}


.button {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.45em;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: rgb(var(--colUIText03));
    padding: 0.7em;
    position: relative;
}

.button:hover{
    background-color: rgba(var(--colBG),0.7);

}

.button:active{
    background-color: rgba(var(--colUIText03),0.7) !important;
}


    .button.button--grey{
        background-color: rgb(var(--colUIBack02));
        border-color: rgb(var(--colUIBack02));
        color: rgb(var(--colUIText01));
    }
        .button.button--grey:hover {
            background: rgba(var(--colUIBack02),0.6);
            border-color: rgba(var(--colUIBack02),0.6);
        }

    .button.button--green{
        background-color: rgb(var(--colPro01));
        border-color: rgb(var(--colPro01));
        color: rgb(240,240,240);
    }
        .button.button--green:hover, .button.button--green.focus{
            background-color: rgba(var(--colPro01),0.6);
        }

    .button.button--red{
        background-color: rgb(var(--colContra01));
        border-color: rgb(var(--colContra01));
        color: rgb(240,240,240);
    }
        .button.button--red:hover, .button.button--red.focus{
            background-color: rgba(var(--colContra01),0.6);
        }

    .button.button--yellow{
        background-color: rgb(var(--colAttention01));
        border-color: rgb(var(--colAttention01));
        color: rgb(var(--colUIBack03));
        font-weight: 400;
    }
        .button.button--yellow:hover, .button.button--yellow.focus{
            background-color: rgba(var(--colAttention01),0.6);
        }

    .button.button--bordered{
        border-color: rgb(var(--colUIText03));
    }
        .button.button--bordered:hover{
            background-color: rgba(var(--colUIText03),0.6);
            border-color: rgb(var(--colUIText03));
            color: rgb(var(--colUIText01));
        }
            .button.button--bordered:hover svg{
                stroke: rgb(var(--colUIText01));
            }


    .button.button--spaced{
        margin: 0.3em;
        flex-grow: 1;
    }

    .button.button--wide{
        flex-grow: 1;
    }

    .button.button--full{
        width: 100%;
    }

    .button.button--small{
        padding: 0.5em;
        border: none;
        width: 2em;
        height: 2em;
    }

    .button__icon{
        background-color: transparent;
        height: var(--ButtonIconSize);
        width: var(--ButtonIconSize);
        flex-shrink: 0;
    }

   	.button--attention,
    .button--attention:hover{
        stroke: rgb(var(--colUIText02));
        color: rgb(var(--colUIText02));
    }


    .button.button--normal{
        padding: 0.5em;
        margin: 0.5em 0px;
        width: 100%;
        justify-content: left;
    }

    .button.button--silent{
        align-items: center;
        justify-content: left;
        padding-left: 0px;
        }

    .button.button--silent:hover {
        background: none !important;
        border-color: transparent;
    }

    .button--simple{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0.25em;
        border-radius: 0.5em;
        padding: var(--ButtonPadding);
    }

    .button.button--centered{
        justify-content: center;
    }

    .button.button--normal:hover,
    .button.button--simple:hover,
    .button.button--silent:hover>.button--simple{
        background-color: rgb(var(--colUIBack04));
        border-color: rgb(var(--colUIBack04));
    }

        .button.button--active:not(.button.button--special):hover{
            background-color: rgb(var(--colUIBack01));
        }

    .button.button--accent:not(.inactive){
        background-color: rgb(var(--colAccent));
        border-color: rgb(var(--colAccent));
        color: rgb(255,255,255);
    }

        button.button--accent:hover{
            background-color: rgba(var(--colAccent));
            border-color: rgb(var(--colAccent));
            filter: brightness(1.1) saturate(0.9);
            color: rgb(255,255,255);
        }

        .button.button--accent>.button__icon{
            stroke: rgb(255,255,255);
        }