@charset "UTF-8";

/*  Basic Settings & Resets ======================================================================== */

/*	GLS Green: #82BE32
	GLS Orange: #FA8214
*/

form {
    position: relative;
}

#content-container form ul.form-elements {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1em;
}

#content-container form ul.form-elements li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#content-container form ul.form-elements li.form-item-checkbox {
    padding: 1.5em 1em 1.5em 0.5em;
}

#content-container form ul.form-elements li.form-item-checkbox + li.form-item-checkbox {
    padding-top: 0;
    margin-top: -1em;
}

#content-container form ul.form-elements li:before {
    display: none;
}

#content-container form ul.form-elements li.notification.hide {
    display: none;
}

#content-container form ul.form-elements li.notification > p {
    font-size: 0.95em;
    text-align: justify;
    padding-left: 1em;
    padding-right: 1em;
    border-left: solid 5px orange;
    margin-left: 2em;
    padding-bottom: 0.5em;
    background: oldlace;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-right: 2em;
    padding-top: 0.5em;
}

form fieldset {
    border: none;
    background-color: transparent;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

form input[type='submit'],
form input[type='text'],
form input[type='email'],
form input[type='tel'],
form textarea,
form button,
form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: solid 1px rgba(70,70,70,0.5);
    border-radius: 4px;
    box-shadow: none;
    padding: 0.5em;
    margin-bottom: 1em;
    
    background-color: white;
}

form #clear-log-btn {
    width: auto;
}

form select option:selected {
    color: inherit !important;
}

form select:invalid {
    color: gray;
}

form select {
    background-image: url("../images/select-down.png");
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-position: right 1em center;
}

form textarea {
    resize: vertical;
    min-height: 7em;
}

form.metadata-form textarea {
    min-height: unset;
}

form label {
    display: inline-block;
    width: 100%;
    font-size: 85%;
    color: rgba(70,70,70,0.8);
}

.metadata-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    width: 100%;
}

.metadata-label-wrapper label {
    width: auto; 
    display: inline-block; 
}

label.over-limit {
    color: rgba(214,118,15,1.00);
}

form.form-feedback label {
    font-size: inherit;
    color: inherit;
}

form.form-feedback label,
form.form-feedback p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

form input[type='checkbox'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
    
    display: inline-block;
    vertical-align: middle;
    padding: 0.7em;
    
    border: solid 1px rgba(70,70,70,0.5);
    border-radius: 4px;
    box-shadow: none;
    
    background-color: white;
    color: inherit;
}

form input[type='checkbox'] + label {
    font-size: unset;
    color: unset;
    width: auto;
    display: inline-block;
    
    border: solid 2px transparent;
    border-radius: 4px;
    
    background-image: url("../images/checkbox.png");
    background-repeat: no-repeat;
    background-size: 1.3em;
    background-position: left 0.3em;
    
    padding-left: 1.8em;
    cursor: pointer;
}

form input[type='checkbox']:focus + label {
    background-image: url("../images/checkbox-focus.png");
}

form input[type='checkbox']:checked + label {
    background-image: url("../images/checkbox-checked.png");
}

form input[type='checkbox']:checked:focus + label {
    background-image: url("../images/checkbox-checked-focus.png");
}

form input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
    
    display: inline-block;
    vertical-align: middle;
    padding: 0.7em;
    
    border: solid 1px rgba(70,70,70,0.5);
    border-radius: 4px;
    box-shadow: none;
    
    background-color: white;
    color: inherit;
}


form input[type='radio'] + label {
    font-size: unset;
    color: unset;
    width: auto;
    
    display: block;
    margin-left: 1em;
    
    border: solid 2px transparent;
    border-radius: 4px;
    
    background-image: url("../images/radio.png");
    background-repeat: no-repeat;
    background-size: 1.3em;
    background-position: left 0.3em;
    
    padding-left: 1.8em;
    cursor: pointer;
}

form input[type='radio']:focus + label {
    background-image: url("../images/radio-focus.png");
}

form input[type='radio']:checked + label {
    background-image: url("../images/radio-checked.png");
}

form input[type='radio']:checked:focus + label {
    background-image: url("../images/radio-checked-focus.png");
}

form input[type='submit'],
form button {
    cursor: pointer;
    color: white;
    background-color: #82BE32;
    border-color: #82BE32;
}

form input[type='submit']:disabled,
from button:disabled {
    cursor: not-allowed;
    color: rgba(70,70,70,0.5);
    background-color: rgba(70,70,70,0.2);
    border-color: rgb(70,70,70);
}

form li.optional label:after {
    content: '(optional)';
    font-size: 12px;
    color: rgba(70,70,70,0.8);
    font-style: italic;
    
    position: absolute;
    right: 0.5em;
    
}

form span.label-optional {
    text-transform: uppercase;
    font-size: 60%;
    opacity: 0.7;
    font-style: italic;
}

form .show-error .error-container {
    background-color: rgb(253, 231, 226);
    border: solid 2px rgb(223, 99, 51);
    border-radius: 5px;
    padding: 0.5em 1em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

form .show-error .error-info-header {
    display: block;
    font-weight: 600;
    font-size: 110%;
}

form .show-error .error-info-text {
    display: block;
}

#content-container form ul.form-elements li.captcha {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

#content-container form ul.form-elements li.captcha div.g-recaptcha {
    display: inline-block;
}

#content-container form ul.form-elements li.form-item-reducedpricemessage.hidden {
    display: none;
}

form .htmlfield {
	resize: vertical;
	font-family: 'Courier New', Courier, monospace;
	white-space: pre;
    overflow-x: auto;
}

form.form-mail #emailBody {
	height: 50em;
	font-size: 1em;
}

/* Matomo Opt-Out Form and popup*/

#tracking-info {
    position: fixed;
    bottom: 1em;
    right: 0.5em;
    
    width: 80%;
    
    z-index: 100;
    background: white;
    padding: 1em 1em 0em 1em;
    max-width: 30em;
    font-size: 0.9em;
    border: solid 2px rgb(130, 190, 50);
    border-radius: 0.3em;
}

#tracking-info.seen {
    display: none;
}

#tracking-info form#optout-form p {
    margin-top: 0;
    margin-bottom: 0;
}

#tracking-info form#optout-form .optout-intro {
}

form#optout-form #button-ok {
    display: inline-block;
    float: right;
    width: auto;
    min-width: 2.5em;
    height: 2.5em;
    font-size: 0.9em;
    font-weight: 400;
    padding: 0 0 0.1em 0;
}

.legal form#optout-form {
    font-size: inherit;
}

.legal form#optout-form .optout-intro {
    display: none;
}

.legal form#optout-form #optout + label {
   font-size: inherit;
}

.legal form#optout-form #button-ok {
    display: none;
}

.hide-form {
    display: none;
}

.triangle {
    display: inline-block;
    transition: transform 0.3s ease; /* Smooth rotation */
    margin-right: 5px;
    font-size: 70%;
}
.rotated {
    transform: rotate(90deg); /* Rotate triangle down */
}

@media only screen and (min-width: 770px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min-resolution: 200dpi),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx) {

    /*form input[type='submit'],
    form button {
        display: inline-block;
        width: 30%;
        float: right;
    }*/

    #tracking-info {
        width: 30%;
        right: 1em;
    }
    
    #content-container form ul.form-elements li.captcha {
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        margin-top: 0;
    }

    #content-container form ul.form-elements li.captcha div.g-recaptcha {
        display: block;
    }
    
    #content-container form ul.form-elements li.submit {
        display: inline-block;
        vertical-align: middle;
        float: right;
        padding-top: 0.5em;
    }
	
	#content-container form ul.form-elements li.submitTest {
        display: inline-block;
        vertical-align: middle;
        float: left;
        padding-top: 0.5em;
    }
    
    input[type='submit'] {
        padding-left: 2em;
        padding-right: 2em;
    }
}

@media only screen and (min-width: 1030px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-resolution: 200dpi) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx)  and (orientation: landscape) {

	

}


@media only screen and (min-width: 1300px),
only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 1200px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 1200px) and ( min-resolution: 200dpi),
only screen and (min-width: 1200px) and ( min-resolution: 1.25dppx) {

}