/**■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 * ak-acf フロント インプットCSS
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■**/
:root{
    --acf-front-input-table-color:#ebebeb;
}
form#acf-form {
    .acf-fields.acf-form-fields {

        /* タブグループ */
        &>.acf-tab-wrap {
            background-color: #ffffff00;

            ul.acf-tab-group {
                border-bottom: none;
                margin-bottom: 0;
                padding: 5px 0px;
                display: flex;
                flex-wrap: wrap;

                li {
                    margin: 0 .5em .5em 0;
                    float: none;
                    flex-grow: 1;

                    a {
                        border: none;
                        padding: 5px 10px;
                        background-color: #f2f2f2;
                        text-align: center;

                        &:hover {
                            background-color: #f1f1f1;
                        }
                    }

                    &.active {
                        a {
                            background-color: var(--AKACF);
                            color: #fff;
                            border: none;
                            padding: 5px 10px;
                        }
                    }
                }
            }
        }

        &>.acf-field {
            border-top: none;
            border-bottom: 1px solid #f7f7f7;
            padding: 10px 0px;


        }

        .acf-field {
            display: flex;
            flex-wrap: wrap;

            .acf-label {
                flex: 0 0 100%;


                label {
                    font-size: .9rem;
                    font-weight: 600;

                    .acf-required {

                        color: var(--AKACF);

                        &::after {
                            display: none;
                            content: "必須";
                            font-size: 0.6rem;
                            color: #fff;
                            background-color: var(--AKACF);
                            padding: 1px 3px;
                            border-radius: 3px;
                        }
                    }


                }

                .description {
                    font-size: .7rem;
                    background-color: #eeeeee;
                    padding: .5rem;
                    border-radius: 5px;
                }
            }

            .acf-input {
                flex: 1;

            }


            input[type=text],
            input[type=password],
            input[type=date],
            input[type=datetime],
            input[type=datetime-local],
            input[type=email],
            input[type=month],
            input[type=number],
            input[type=search],
            input[type=tel],
            input[type=time],
            input[type=url],
            input[type=week],
            textarea,
            select {
                padding: 10px 10px;
            }

            .acf-checkbox-list,
            .acf-radio-list {
                li {
                    margin-right: 0.7rem;
                    margin-bottom: 0.7rem;

                    label {
                        display: inline-block;
                        position: relative;
                        background-color: #eeeeee;
                        padding: 2px 10px;
                        border-radius: 100px;

                        input[type="checkbox"],
                        input[type="radio"] {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translateY(-50%) translateX(-50%);
                            z-index: 2;
                            margin: 0;
                            opacity: 0;
                            cursor: pointer;

                            &:checked {}

                            &:checked::after {}
                        }



                        &.selected {
                            background-color: var(--AKACF);
                            color: #fff;

                            input[type="checkbox"],
                            input[type="radio"] {
                                &:checked {}

                                &:checked::after {}
                            }


                        }
                    }
                }
            }

            .acf-actions {
                .acf-button {
                    background-color: var(--AKACF);
                    color: #fff;
                    font-size: .9rem;
                    padding: .4rem .8rem;
                    display: inline-block;
                    border-radius: 5px;
                }
            }

            @media (min-width:992px) {
                .acf-label {
                    flex: 0 0 250px;
                }

                .acf-input {
                    flex: 1;
                }
            }

        }

        .acf-switch {
            &:hover {
                border-color: #333;
                color: #333;

                .acf-switch-slider {
                    border-color: #333;
                }
            }

            &.-focus {
                border-color: #333;
                color: #333;

                .acf-switch-slider {
                    border-color: #333;
                }
            }

            &.-on {
                border-color: var(--AKACF);
                background-color: var(--AKACF);

                .acf-switch-slider {
                    border-color: var(--AKACF);
                }

                &:hover {
                    border-color: var(--AKACF);
                    background-color: var(--AKACF);

                    .acf-switch-slider {
                        border-color: var(--AKACF);
                    }
                }
            }

            .acf-switch-on {
                text-shadow: none;
            }
        }

        .acf-url i {
            top: 10px;
        }


        @media (min-width:992px) {
            .acf-label {
                padding-right: 15px;
            }
        }
    }

    .acf-form-submit {
        padding: 1.5rem 10px;

        input.acf-button {
            width: 100%;
            background-color: var(--AKACF);
            border: none;
            padding: 1rem 1rem;
        }
    }

    table.acf-table {
        border-collapse: separate;
        border-spacing: 0 15px;
        border:none;
        background-color: #ffffff00;
        tbody{
            tr.acf-row{
                padding: 16px;
                background: #fff;
                td{
                    border: none;
                    &.acf-row-handle{
                        background-color: var(--acf-front-input-table-color);
                    }
                    &.acf-row-handle.order{
                        border-left: 1px solid var(--acf-front-input-table-color);
                        border-radius:10px 0 0 10px;
                        color: #333;
                    }
                    &.acf-fields{
                        border-top: 1px solid var(--acf-front-input-table-color);
                        border-bottom: 1px solid var(--acf-front-input-table-color);
                        .acf-field{
                            border-top-color: #f7f7f7;
                            padding-top: 12px;
                            padding-bottom: 7px;
                        }
                    }
                    &.acf-row-handle.remove{
                        border-right: 1px solid var(--acf-front-input-table-color);
                        border-radius: 0 10px 10px 0;
                    }
                }
            }
        }

    }

    .acf-notice{
        padding: 1rem 1rem;
        border: none;
        border-left: 0px;
        border-radius: 10px;
        margin: 10px;
        .-dismiss{
            padding-right: 40px;
        }
    }
}

.acf-ui-datepicker {
    .ui-datepicker {
        width: 25em;
        max-width: 85vw;
    }
}