.empty_state {
    background-color: rgb(var(--color-white));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.empty_state_text_column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.empty_state_text_column_title {
    color: rgb(var(--color-gray650));
    text-align: center;
    font-family: Arial;
    font-style: normal;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

.empty_state_text_column_description {
    max-width: 295px;
    color: rgb(var(--color-gray550));
    text-align: center;
    font-family: Arial;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.empty_state_circular_background_image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(var(--color-gray200));
}

.empty_state_buttons {
    display: flex;
    gap: 8px;
}

.empty_state_button[secondary]
{
    background-color: rgb( var(--color-white) );
    border: 2px solid rgb( var( --color-primary ) );
    color: rgb( var( --color-primary ) );
}

.empty_state_button[secondary]:hover
{
    transition-duration: 0.3s;
    background-color: rgb( var( --color-gray150 ) );
}

.empty_state_button {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    padding-left: 20px;
    padding-right: 20px;
    height: 44px;

    border-radius: 6px;
    cursor: pointer;

    color: rgb(var(--color-white));
}

.empty_state_button::before {
    position: absolute;
    inset: 0;
    opacity: 0;
    content: " ";
    transition-duration: 0.3s;
}

.empty_state_button:not([disabled="disabled"]):hover::before
{
    border-radius: 6px;
}

.empty_state_button[primary]:not([disabled="disabled"]):hover::before
{
    opacity: 0.1;
    background-color: currentcolor;
}

.empty_state_button[secondary]:not([disabled="disabled"]):hover::before
{
    background-color: rgb( var( --color-gray150 ) );
}

.empty_state_grey_button {
    background: rgb(var(--color-gray-100));
    border: 1px solid rgb(var(--color-gray600));
    color: rgb(var(--color-gray600)) !important;
}

.empty_state_blue_button {
    background-color: rgb(var(--color-primary));
}

.empty_state_button > span {
    text-align: center;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.empty_state_button[disabled="disabled"] {
    color: rgb( var( --color-gray500 ) ) !important;
    background-color: rgb( var( --color-gray250 ) ) !important;
    border: 1px solid rgb( var( --color-gray250 ) ) !important;
}