/* = Settings Screen
=============================================*/

.fp-link-footer {
    text-decoration: none;
    margin-right: 5px;
    margin-left: 5px;

    &:hover {
        text-decoration: underline;

        span {
            text-decoration: none;
        }
    }
}


.select2-drop {
    padding-top: 8px;

    &.select2-drop-active {
        border: 2px solid #2271b1;
        border-top: 0;
    }

    .select2-search {
        &:after {
            content: "\f179";
            display: block;
            position: absolute;
            top: 9px;
            text-align: center;
            font: normal 20px/1 dashicons !important;
            right: 13px;
            speak: never;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        input[type="text"] {
            background: #fff !important;
            padding-right: 30px;
        }
    }
}

.__fakerpress {
    input[type="text"],
    input[type="password"],
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select {
        padding: 5px 5px 4px;
    }

    .fp-submit {
        text-align: left;
        max-width: 100%;
        margin-top: 20px;
        padding-top: 10px;

        .fp-response {
            margin: 20px 0;
        }

        .spinner {
            float: none;
        }
    }

    .fp-table-meta,
    .fp-table-taxonomy {
        border: 0 none;
        border-spacing: 0;
        border-radius: 0;
        table-layout: auto;
        padding: 0;
        margin: 0;
        width: 100%;
        clear: both;

        border: #DFDFDF solid 1px;
        background: #F9F9F9;

        + .fp-table-meta,
        + .fp-table-taxonomy {
            border-top: 0px;
        }

        .fp-field-description {
            font-size: 0.9em;
        }

        > thead th {
            background: #fff;
            border-color: #F4F4F4;
            border-style: solid;
            border-width: 0 0 1px 1px;
            padding: 2px 0;
            position: relative;
            vertical-align: top;
            text-align: left;
            color: #333333;
            font-size: 14px;
            line-height: 1.4em;
            font-weight: normal;
            position: relative;
        }

        > thead .fp-order-table {
            width: 4%;

        }

        > thead .fp-label-table {
            width: 15%;
        }


        > thead .fp-actions-table {
            width: 4%;
        }

        > tbody > tr {
            z-index: 1;
        }

        > tbody > tr > td {
            padding: 8px;
            text-align: left;
            border-color: #EDEDED;
            background: #fff;
        }

        > tfoot th {
            padding: 0;
        }

        > tbody > tr:first-child > td,
        > tbody > tr.fp-first-child > td {
            padding-top: 20px;
        }

        > tbody > tr:last-child > td,
        > tbody > tr.fp-last-child > td {
            padding-bottom: 20px;
        }


        /* order */

        > thead > tr > th.fp-order-table,
        > tbody > tr > td.fp-order-table,
        > thead > tr > th.fp-actions-table,
        > tbody > tr > td.fp-actions-table {
            text-align: center;
            vertical-align: middle;
        }

        > tbody > tr > td.fp-order-table,
        > tbody > tr > td.fp-actions-table {
            border-right-color: #EDEDED;
            background: #f4f4f4;
            cursor: move;
            color: #aaa;
            text-shadow: #fff 0 1px 0;
        }

        > tbody > tr > td.fp-order-table:hover {
            color: #666;
        }

        > tbody > tr > td.fp-order-table + td {
            border-left-color: #ddd;
            padding-left: 20px;
            vertical-align: top;

            .fp-field-label {
                margin-top: 5px;
                display: inline-block;
            }
        }

        /* remove */

        > thead > tr > th.remove,
        > tbody > tr > td.remove {
            width: 16px;
            vertical-align: middle;
        }

        > tbody > tr > td.remove {
            background: #F9F9F9;
            border-left-color: #DFDFDF;
        }

        /* border limits */

        > thead > tr > th:first-child,
        > tbody > tr > td:first-child {
            border-left-width: 0;
        }

        .fp-order-table-spacer,
        .fp-remove-table-spacer {
            width: 1px;
            display: block;
            height: 1px;
        }
    }

    .fp-action-order,
    .fp-action-duplicate,
    .fp-action-remove {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 10px;
        width: 22px;
        height: 23px;
        min-height: 22px;
        line-height: 20px;
        padding: 0;
        font-weight: bold;
        font-size: 13px;
    }

    .fp-action-duplicate {
        top: 35px;
    }

    /*@@@@@@@@@@@@@@@@@*/

    input::-webkit-input-placeholder {
        line-height: normal;
    }

    .fp-meta_conf-container {
        display: none;
    }

    .fp-type-dropdown {
        &.select2-dropdown-open {
            .select2-choice,
            .select2-choices {
                box-shadow: 0 0 0 1px #2271b1;
                outline: 2px solid transparent;
                border-radius: 4px 4px 0 0;
            }

            .select2-choice {
                .select2-arrow {
                    b {
                        &:after {
                            content: "\f343";
                        }
                    }
                }
            }

        }

        .select2-choice {
            height: 26px;
            padding: 5px 5px 5px 8px;
            box-shadow: 0 0 0 transparent;
            border: 1px solid #8c8f94;
            background: #fff;
            color: #2c3338;

            &:focus {
            }

            .select2-arrow {
                width: 30px;
                background: transparent;
                border: 0;

                b {
                    width: 20px;
                    height: 20px;
                    margin: 6px auto;
                    background: transparent !important; /** Select2 uses important so we do too. **/

                    &:after {
                        content: "\f347";
                        display: block;
                        position: relative;
                        top: 3px;
                        text-align: center;
                        font: normal 20px/1 dashicons !important;
                        speak: never;
                        -webkit-font-smoothing: antialiased;
                        -moz-osx-font-smoothing: grayscale;
                    }
                }
            }
        }

        .select2-choices {
            border-radius: 4px;
            box-shadow: 0 0 0 transparent;
            border: 1px solid #8c8f94;
            background: #fff;
            color: #2c3338;
            outline: none;
            transition: none;
            padding: 4px 0;


            .select2-search-choice {
                margin-top: 5px;
                margin-bottom: 5px;
                background: #f1f1f1;
            }

            .select2-search-choice-close {
                transition: none;
            }
        }

        .select2-search-field {
            .select2-input {
                padding-top: 0;
                padding-bottom: 0;
            }

        }
    }


    .select2-results li abbr em {
        background-color: transparent;
        font-style: italic;
        font-size: 0.9em;
    }

    .fp-internal-label {
        font-size: 12px;
        color: #888;
    }

    .fp-internal-label b[spacer] {
        font-size: 15px;
        padding: 0 3px;
    }

    .fp-field-wrap + .fp-field-wrap {
        margin-top: 8px;
    }

    .select2-container {
        margin: 1px;
        margin-top: -3px;
    }

    .select2-container-multi {

    }

    .fp-field-container .dashicon-date {
        height: 37px;
        line-height: 37px;
        padding-left: 1px;
        margin: 0;
        width: 25px;
    }

    .form-table {
        max-width: 940px;
    }

    .fp-field-wrap {
        line-height: 28px;
    }

    td.fp-field-wrap {
        padding-left: 0;
    }

    .fp-actions {
        display: inline-block;
        padding-left: 10px;
    }

    .fp-actions input {
        margin-top: -7px;
        padding: 5px 10px;
    }

    .fp-field-description {
        margin: 4px 1px 5px;
        color: #666;
        font-style: italic;
    }

    .fp-field-radio label,
    .fp-field-checkbox_list label {
        display: block;
        margin: 5px 0;
    }

    .fp-field-radio label input,
    .fp-field-checkbox_list label input {
        margin-right: 5px;
    }

    .fp-field-wrap h3 {
        margin: 0 0 10px -22px;
        background-color: #f9f9f9;
        padding: 6px 0 6px 22px;
    }

    .fp-field-wrap h3 ~ h3 {
        margin-top: 2.25em;
    }

    .fp-field-wrap h3 + p {
        margin: 0 0 10px;
        padding-left: 12px;
    }

    .fp-field-textarea.fp-size-small textarea {
        width: 180px;
        height: 60px;
    }

    .fp-field-textarea.fp-size-medium textarea {
        width: 300px;
        height: 80px;
    }

    .fp-field-textarea.fp-size-large textarea {
        width: 450px;
        height: 120px;
    }

    .fp-size-tiny {
        width: 6em;
    }

    .fp-size-small {
        width: 10em;
    }

    .fp-size-medium {
        width: 25em
    }

    .fp-size-large {
        width: 35em;
    }

    .type-raw-container > .fakerpress-fields-row-full-width {
        padding: 0;
    }

    .fakerpress-fields-row-full-width {
        padding-left: 0;
        padding-right: 0;
    }

    .fakerpress-fieldset-table {
        width: 100%;
    }
}