@import url(./advanced_kit_mobile.css);

    .p2-advanced-component {
        display: flex;
        gap: 24px;
        flex-direction: column;
        padding-bottom: 24px;
        margin-bottom: 4px;
        border-bottom: 1px solid #DAE0EE;

    }

    .p2-advanced-component:only-child {
        border-bottom: none;
    }

    .p2-advanced-search-title {
        padding: 18px 0;
        font-size: 16px;
        font-weight: 600;
        color: #384572;
        border-bottom: 1px solid #1549C0;
    }

    .p2-advanced-search-btn {
        display: flex;
        gap: 16px;
        justify-content: center;
    }

    .p2-as-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        font-size: 14px;
        color: #A6ACBC;
        border-radius: 30px;
        border: 1px solid #A6ACBC;
        padding: 0 26px;
    }

    .p2-as-btn-search {
        width: 120px;
        background-color: #1549C0;
        border-color: #1549C0;
        color: white;
    }


    .p2-advanced-search-content {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .p2-advanced-group:only-child .p2-advanced-group-delete {
        cursor: not-allowed;
    }

    .p2-advanced-search-content .p2-advanced-group:nth-child(1) .p2-advanced-group-select:nth-child(1) {
        pointer-events: none;
        opacity: 0;
    }

    .p2-advanced-group {
        display: flex;
        gap: 15px;
    }

    .p2-advanced-group-select {
        position: relative;
    }

    .p2-advanced-group-select:has(.on)::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .p2-advanced-group-select::after {
        content: '';
        position: absolute;
        right: 8px;
        top: 50%;
        width: 16px;
        height: 16px;
        background: url(/staticresource/scioabook/static/down1.svg) center center no-repeat;
        transform: translateY(-50%);
        pointer-events: none;
    }

    /* .p2-advanced-group-select:focus:after {
        transform: translateY(-50%) rotate(180deg);
    } */

    .p2-advanced-group-select:nth-child(1) .p2-advanced-select-input {
        width: 80px;
    }

    .p2-advanced-group-select:nth-child(2) .p2-advanced-select-input {
        width: 200px;
    }

    .p2-advanced-group-select:nth-child(4) .p2-advanced-select-input {
        width: 120px;
    }

    .p2-advanced-group-input {
        flex: 1;
    }

    .p2-advanced-group-input .p2-advanced-text-input {
        cursor: text;

    }

    .p2-advanced-text-input,
    .p2-advanced-select-input {
        width: 100%;
        height: 40px;
        padding: 8px 12px;
        border: 1px solid #DAE0EE;
        color: #384572;
        box-sizing: border-box;
        cursor: pointer;
    }

    .p2-advanced-text-input:focus,
    .p2-advanced-select-input:focus {
        outline: none;
        border-color: #4d90fe;
    }

    .p2-advanced-select-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 2px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        max-height: 200px;
        overflow-y: auto;
        display: none;
        z-index: 10;
    }

    .p2-advanced-select-option {
        padding: 8px 12px;
        cursor: pointer;
        color: #384572;
    }

    .p2-advanced-select-option:hover {
        background-color: #f5f5f5;
    }

    .p2-advanced-select-option.selected {
        background-color: rgba(21, 73, 192, 0.1);
        color: #1549C0;
    }

    .p2-advanced-group-btn {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .p2-advanced-group-btn .p2-advanced-btn-s {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    .p2-advanced-flex-box {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #384572;
        font-size: 14px;
    }

    .p2-advanced-flex-box span {
        display: none;
    }

    .p2-advanced-group-delete {
        transition: all .3s;
        background-image: url(../static/input-delete.svg);
    }

    .p2-advanced-group:not(:only-child) .p2-advanced-group-delete:hover {
        background-image: url(../static/delete-hover.svg);
    }

    .p2-advanced-group:not(:only-child) .p2-advanced-group-delete:active {
        background-image: url(../static/delete-click.svg);
    }

    .p2-advanced-group-add {
        transition: all .3s;
        background-image: url(../static/input-add.svg);
    }

    .p2-advanced-group-add:hover {
        background-image: url(../static/add-hover.svg);
    }

    .p2-advanced-group-add:active {
        background-image: url(../static/add-click.svg);
    }

    .p2-advanced-extra-content {
        position: relative;
        display: flex;
        column-gap: 36px;
        min-width: 0;
        flex: 1;
    }