st-form {

    font-size: var(--st-form-font-size, 16px);
    line-height: var(--st-form-line-height, 1.3);

    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    text-align: left;

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    form {
        position: relative;
        background-color: var(--st-form-background-color, #F6F7F8);
        border: var(--st-form-border-size, 1px) solid var(--st-form-border-color, #D6D9DC);
        border-radius: var(--st-form-border-radius, 3px);
        
        width: var(--st-form-width, 100%);
        padding: var(--st-form-padding, 10px 10px 40px 10px);
        margin: var(--st-form-margin, 0 0 40px 0);

        &.st-form-errors {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: shake;
            animation-name: shake;
        }
    }

    .st-validation-icon {
        visibility: hidden;
        position: relative;
        left: -20px;
    }

    .st-form-row {
        margin-bottom: var(--st-form-row-margin-bottom, 0px);
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        flex-wrap: wrap;

        /* Inputs */
        input[type='text'],
        input[type='email'],
        input[type='number'],
        select {
            background-color: var(--st-form-input-background-color, #FFFFFF);
            border: 1px solid var(--st-form-input-border-color, #D6D9DC);
            border-radius: var(--st-form-input-border-radius, 3px);
            width: var(--st-form-input-width, 100%);
            padding: var(--st-form-input-padding, 7px);
            font-size: var(--st-form-input-font-size, 14px);
        }

        [type='text'].st-touched:invalid,
        [type='email'].st-touched:invalid,
        [type='tel'].st-touched:invalid,
        [type='number'].st-touched:invalid,
        select.st-touched:invalid {
            border: 1px solid var(--st-form-input-invalid-border-color, #D55C5F);
            color: var(--st-form-input-invalid-color, #D55C5F);
            box-shadow: none; 
        }
            
        /* Select Elements */
        select {
            -webkit-appearance: none;
        }
        
        /* Textarea */
        textarea {
            font-family: "Roboto", "Arial", sans-serif;
            font-size: var(--st-form-input-font-size, 14px);
        
            border: 1px solid #D6D9DC;
            border-radius: var(--st-form-input-border-radius, 3px);
        
            min-height: 200px;
            margin-bottom: 10px;
            padding: 7px;
            resize: none;
        }

        .instructions {
            color: #999999;
            font-size: 14px;
            margin-bottom: 30px;
        }

        /* Checkboxes */
        .st-checkbox-label {
            display: inline-block;
            margin: var(--st-checkbox-label-margin, 2px 0 0 0);
            > input {
                margin-right: 5px;
            }
        }
    }

    .st-form-options-row {
        border: none;
        margin: var(--st-form-options-row-margin, 10px 0 20px 0);
        display: flex;
        flex-direction: column;


        .st-radio-label, .st-checkbox-label {
            display: flex;
            font-size: var(--st-form-radio-label-font-size, 14px);
            padding: var(--st-form-radio-label-padding, 0);
        }

        input[type='radio'], input[type='checkbox'] {
            flex: none;
            margin: var(--st-form-radio-margin, 2px 8px 0 0);
        }
    }

    .st-muted-text {
        color: rgb(102, 120, 138);
    }
}


@media only screen and (min-width: 700px) {

    st-form {

        form {
            width: var(--st-form-width-desktop, 560px);
            padding: var(--st-form-padding-desktop, 20px 70px 50px 50px);
        }

        // .st-form-row {
        //     flex-direction: row;
        //     align-items: flex-start;

        //     input[type='text'],
        //     input[type='email'],
        //     label.st-checkbox-label,
        //     select,
        //     textarea,
        //     .st-form-options-row
        //     {
        //         width: var(--st-form-element-width-desktop, 250px);
        //         height: initial;
        //     }

        //     label {
        //         text-align: right;
        //         width: var(--st-form-label-column-width-desktop, 120px);
        //         margin-top: var(--st-form-label-margin-top-desktop, 7px);
        //         padding-right: var(--st-form-label-padding-right-desktop, 20px);            

        //         &.st-checkbox-label {
        //             margin-top: var(--st-checkbox-label-margin-top-desktop, 10px);
        //             padding: 0;
        //             text-align: left;
        //         }
        //     }

            

        //     .instructions {
        //         margin-left: var(--st-form-label-column-width-desktop, 120px);
        //     }
            
        // }
        
        // .st-form-options-row {
        //     margin-bottom: var(--st-form-options-row-margin-bottom-desktop, 10px);                
        // }
        
        // .st-form-action-row {
        //     .st-form-action {
        //         > span {
        //             display: inline-block!important;
        //         }    
        //     }

        //     .st-form-inline-action {
        //         margin-left: var(--st-form-label-column-width-desktop, 120px);
        //     }
        // }

        // .st-ffh, .st-ffvm {
        //     margin-left: var(--st-form-label-column-width-desktop, 120px);
        // }
        
    }

}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}