.phrase-input-container {
    position: relative;
}

    .phrase-input-container button[type="submit"].btn {
        position: absolute;
        bottom: -1px;
        right: -1px;
        min-width: 140px;
        height: 48px;
    }

    .phrase-input-container .phrase-input {
        height: 46px;
        width: 100%;
        padding: 0 160px 0 20px;
        border: none;
        outline: 1px solid #9aa3af;
        border-radius: 100px;
    }

        .phrase-input-container .phrase-input::placeholder {
            color: color-mix( in srgb, var(--grey-color), white);
            font-weight: 300;
        }

        .phrase-input-container .phrase-input:focus {
            outline: none;
        }

        .phrase-input-container .phrase-input:focus-visible {
            outline: 2px solid var(--dark-blue-color);
        }

.filtering-controls {
    width: 100%;
    margin-bottom: 6px;
}

    .filtering-controls > summary {
        color: var(--dark-blue-color);
        cursor: pointer;
    }

    .filtering-controls input {
        height: 30px;
        width: 110px;
        padding: 4px 8px;
        border: 1px solid #9aa3af;
        color: var(--grey-color);
        background-color: var(--white-color);
    }

        .filtering-controls input::-webkit-outer-spin-button,
        .filtering-controls input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    
        .filtering-controls input::placeholder {
            color: color-mix( in srgb, var(--grey-color), white);
            font-weight: 300;
        }

        .filtering-controls input:focus {
            outline: none;
        }

        .filtering-controls input:focus-visible{
            border: 1px solid var(--dark-blue-color);
        }

        .filtering-controls input[type='checkbox'] {
            height: 18px;
            width: 18px;
            vertical-align: sub;
            margin-left: 4px;
        }
        
.filtering-controls-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 14px 14px 20px 14px;
    margin: 4px 0 16px 0;
    border-radius: 20px;
    background-color: var(--grey-background);
}

    .filtering-controls-wrapper .has-not-access-to-filter {
        text-align: right;
        color: var(--light-red-color);
        font-size: 1.5rem;
    }

        .filtering-controls-wrapper .has-not-access-to-filter > .material-symbols-outlined {
            font-size: 1.9rem;
            vertical-align: sub;
        }
        
        .filtering-controls-wrapper .tooltip-text {
            left: unset;
            right: 0;
        }

.filtering-controls-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filtering-controls-column {
    
}

    .filtering-controls-column > .column-header {
        padding-left: 6px;
    }

    .filtering-controls-column > .inputs {
        display: flex;
    }

        .filtering-controls-column > .inputs > input:first-child {
            border-radius: 16px 0 0 16px;
        }
    
        .filtering-controls-column > .inputs > input:last-child {
            border-radius: 0 16px 16px 0;
            margin-left: -1px;
        }

input.form-input, .form-text-area {
    background-color: var(--grey-background);
    border: none;
    border-radius: 100px;
    height: 47px;
    padding: 0 20px;
    color: var(--black-color);
    font-size: 1.9rem;
}

    input.form-input::placeholder, .form-text-area::placeholder {
        color: color-mix( in srgb, var(--grey-color), white);
        font-size: 1.7rem;
        font-weight: 300;
    }

    input.form-input:focus, .form-text-area:focus {
        outline: none;
    }

    input.form-input:focus-visible {
        outline: 2px solid var(--dark-blue-color);
    }

.form-text-area {
    border-radius: 10px;
    padding: 12px 20px;
    height: unset;
    resize: vertical;
}

    .form-text-area::placeholder {
        color: var(--grey-background);
    }

div.form-input {
    position: relative;
    border-radius: 100px;
    height: 47px;
}

    div.form-input > input {
        border: none;
        border-radius: 100px;
        background-color: var(--grey-background);
        color: var(--grey-color);
        font-size: 1.7rem;
        height: 100%;
        width: 100%;
        padding: 0 20px;
    }

        div.form-input > input.input-validation-error {
            outline: 1px solid var(--light-red-color);
        }

        div.form-input > input::placeholder {
            color: var(--placeholder-color);
            font-size: 1.7rem;
            opacity: .6;
        }

        div.form-input > input:hover {
            outline: 1px solid var(--input-grey-color);
        }

        div.form-input > input:focus {
            outline: none;
        }

        div.form-input > input:focus {
            outline: 2px solid var(--dark-blue-color);
            color: var(--black-color);
        }

    div.form-input:has(> .helper) > input {
        padding-top: 16px;
    }

    div.form-input > .helper {
        color: var(--input-grey-color);
        font-size: 12px;
        font-weight: 300;
        left: 20px;
        line-height: 17px;
        position: absolute;
        top: 4.5px;
    }

        div.form-input > .helper:hover + input {
            outline: 1px solid var(--input-grey-color);
        }

    div.form-input.password > img {
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer;
    }

    div.form-input.password > input {
        padding-right: 55px;
    }
    
.similar-phrases-on-focus-container {
    position: absolute;
    top: 54px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 30%;
    padding: 10px 0;
    background-color: var(--white-color);
    box-shadow: 0 5px 13px 4px rgba(0,0,0,.09);
    border-radius: 20px;
    overflow: hidden;
}

    .similar-phrases-on-focus-container > div {
        padding: 4px 20px;
        cursor: pointer;
    }

        .similar-phrases-on-focus-container > div:hover {
            background-color: var(--grey-background);
        }

#phrase-input-container-id {
    position: relative;
}
     
.phrase-input-wrapper .trending-history-wrapper {
    max-width: 1064px;
    margin-inline: auto;
    margin-top: 16px;
}

    .phrase-input-wrapper .trending-history-wrapper summary {
        color: var(--dark-blue-color);
        cursor: pointer;
    }

.load-container {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
}

.load-container .progress-icon {
    position: absolute;
    top: -2px;
    left: calc(50% - 48px);
    font-size: 28px;
    color: var(--dark-blue-color);
    animation: spin 2s linear infinite;
    -webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
    user-select: none;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

#open-product-analyzation-id {
    min-width: 180px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 500px) {
    .phrase-input-container button[type="submit"].btn {
        min-width: 60px;
        height: 40px;
        background: none;
        border: none;
        outline: none;
    }

    .phrase-input-container .phrase-input {
        height: 38px;
        padding-right: 60px;
    }

    .filtering-controls-column:has(input[type="number"]) {
        width: 100%;
    }

    .filtering-controls input {
        width: 100%;
    }
    .load-container .progress-icon {
        top: 0;
        left: calc(50% - 44px);
        font-size: 24px;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
}