/*
    Basic form CSS

    BUGS:
    - When an input field gains focus, box shadow is set but doesn't use transition.
*/
.basic-form
{
    display: block;
}

.g-recaptcha
{
    margin: 2%;
}

.basic-form select
{
    display: block;
    margin: 2%;
    padding: 2.5%;
    width: 80%;
    border: 1px solid rgba(0, 0, 0, 0.2);

    /* Default box shadow for dropdowns */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}


.basic-form .tinymce-textarea
{
    display: block;
    margin: 2%;
    width: 80%;
}

.basic-form input:not([type=checkbox])
{
    display: block;
    margin: 2%;
    padding: 2.5%;
    width: 80%;
    border: 1px solid rgba(0, 0, 0, 0.2);

    /* Default box shadow for non-checkboxes */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.basic-form input[type=checkbox]
{
    margin: 2%;
}

.basic-form input[type=button]
{
    background-color: orangered;
    cursor: pointer;
    border: none;
    color: white;
    font-size: 100%;
    font-family: "Raleway";
    font-weight: bold;

    /* By default, no box-shadow! We need this because we need to use transition! */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;

    /* Standard transitions */
    transition: 0.5s box-shadow, 0.5s background-color;
    -webkit-transition: 0.5s box-shadow, 0.5s -webkit-box-shadow, 0.5s background-color;
    -moz-transition: 0.5s box-shadow, 0.5s -moz-box-shadow, 0.5s background-color;
    -ms-transition: 0.5s box-shadow, 0.5s background-color;
    -o-transition: 0.5s box-shadow, 0.5s background-color;
}

.basic-form input[type=submit]
{
    background-color: #4CAF50;
    cursor: pointer;
    border: none;
    color: white;
    font-size: 100%;
    font-family: "Raleway";
    font-weight: bold;

    /* By default, no box-shadow! We need this because we need to use transition! */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;

    /* Standard transitions */
    transition: 0.5s box-shadow, 0.5s background-color;
    -webkit-transition: 0.5s box-shadow, 0.5s -webkit-box-shadow, 0.5s background-color;
    -moz-transition: 0.5s box-shadow, 0.5s -moz-box-shadow, 0.5s background-color;
    -ms-transition: 0.5s box-shadow, 0.5s background-color;
    -o-transition: 0.5s box-shadow, 0.5s background-color;
}

.basic-form input[type=reset]
{
    background-color: tomato;
    cursor: pointer;
    border: none;
    color: white;
    font-size: 100%;
    font-family: "Raleway";
    font-weight: bold;

    /* By default, no box-shadow! We need this because we need to use transition! */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;

    /* Standard transitions */
    transition: 0.5s box-shadow, 0.5s background-color;
    -webkit-transition: 0.5s box-shadow, 0.5s -webkit-box-shadow, 0.5s background-color;
    -moz-transition: 0.5s box-shadow, 0.5s -moz-box-shadow, 0.5s background-color;
    -ms-transition: 0.5s box-shadow, 0.5s background-color;
    -o-transition: 0.5s box-shadow, 0.5s background-color;
}

.basic-form input[type=reset]:hover, .basic-form input[type=button]:hover
{
    background-color: red;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
}

.basic-form input[type=submit]:hover
{
    background-color: #459648;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
}

.basic-form input[type=submit]:focus, .basic-form input[type=reset], .basic-form select:focus, .basic-form input[type=button]:hover
{
    outline: none;
}

.basic-form input[type=text]:focus, .basic-form input[type=number]:focus, .basic-form input[type=date]:focus, .basic-form input[type=datetime-local]:focus, .basic-form input[type=time]:focus, .basic-form input[type=password]:focus, .basic-form input[type=email]:focus, .basic-form select:focus
{
    outline: none;
    box-shadow: 0 0 5px rgba(0, 192, 255, 1.0), 0 1px 1px rgba(0, 192, 255, 0.2) inset;
    -webkit-box-shadow: 0 0 5px rgba(0, 192, 255, 1.0), 0 1px 1px rgba(0, 192, 255, 0.2) inset;
    -moz-box-shadow: 0 0 5px rgba(0, 192, 255, 1.0), 0 1px 1px rgba(0, 192, 255, 0.2) inset;
}

.basic-form table
{
    width: 100%;
    table-layout: fixed;
    font-family: "Raleway";
    border-spacing: 0;
    border-color: none;
    border-collapse: initial;
    border-collapse: separate; /* IE10 */
}

.basic-form-input-invalid
{
    box-shadow: 0 0 5px red !important;
    -webkit-box-shadow: 0 0 5px red !important;
    -moz-box-shadow: 0 0 5px red !important;
}

.basic-form .small-field-description
{
    display: block;
    font-weight: normal;
}

/*
    CUSTOM CHECKBOX CSS
    Once again abusing labels!!!!
*/
.basic-form-checkbox-outer
{
    display: inline-block;
    vertical-align: middle;
}

.basic-form-checkbox-outer.default
{
    margin: 2%;
}

.basic-form-checkbox-outer.inline-text
{
    margin-left: 2%;
    margin-top: 1%;
    margin-bottom: 1%;
}

.basic-form-checkbox
{
    position: relative;
    cursor: pointer;

    /* 
        This hack makes sure that the positioning inside the input field doesn't depend on the font-size
        on Firefox and perhaps other browsers too
    */
    font-size: 0px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.basic-form-checkbox input[type=checkbox]
{
    /*
        We use opacity: 0 here but since that doesn't fully... 'hide' the element we have to use position: absolute to ensure
        it will be placed correctly (do note: parent has position: relative so the absolute positions are relative to the parent)
    */
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.basic-form-checkbox .checkmark
{
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 25px;
    width: 25px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.basic-form-checkbox input[type=checkbox]:checked ~ .checkmark 
{
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: 1px solid #4CAF50;
    background: #4CAF50;
}

.checkmark:after 
{
    content: "";
    position: absolute;
    display: none;
}

.basic-form-checkbox input[type=checkbox]:checked ~ .checkmark:after 
{
    display: block;
}


.basic-form-checkbox .checkmark:after
{
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}