@media screen and (min-width: 768px) {
    [data-vacancy-list-root] {
        min-height: 0;
        overflow: hidden;
    }

    [data-vacancy-list-root] > .not-mobile-card {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    [data-vacancy-list-root] > .not-mobile-card > [data-vacancy-panel] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .vacancy-promotion-row {
        flex: 0 0 auto;
    }
}

@media screen and (min-width: 767px) and (max-width: 1474px) {
    .vacancy-promotion-row {
        flex-wrap: nowrap;
    }

    .vacancy-promotion-row > .vacancy-promotion-col {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    .vacancy-promotion-row > .right-col-xs {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 767px) {
    .app-main {
        background-color: #fff;
    }
}

.right-col-xs.payment-col {
    flex: 0 0 323px;
}

@media screen and (max-width: 767px) {
    .right-col-xs.payment-col {
        max-width: 100%;
        width: 100%;
        flex: 1 1 100%;
        margin-bottom: 1em;
    }
    .vacancy-promotion-row {

    }
}


.badge-gray {
    width: 16px;
    height: 16px;
    font-weight: 600;
    font-size: 8px;
    color: #1A1A1A;

    line-height: 5px;
    background: #F5F5F5;
    border-radius: 4px;
}


.page-title {
    width: 514px;
}
.vacancy-service .title {
    flex: 0 0 500px;
}

@media screen and (max-width: 1400px) {
    .page-title {
        width: 314px;
    }
    .vacancy-service .title {
        flex: 0 0 300px;
    }
}

@media screen and (max-width: 1111px) {
    .page-title {
        width: 214px;
    }
    .vacancy-service .title {
        flex: 0 0 200px;
    }

}
@media screen and (max-width: 1010px) {
    .page-title {
        width: 164px;
    }
    .vacancy-service .title {
        flex: 0 0 150px;
    }
}

@media screen and (max-width: 967px) {
    .page-title {
        width: 164px;
    }
    .vacancy-service .title {
        flex: 0 0 150px;
    }
}
.vacancy-service .statuses .status {
    padding: 3px 6px;
}
.vacancy-service .statuses .status.danger {
   background-color: #E55555;
    color: #fff;
}

@media screen and (max-width: 840px) {
    .statuses {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .controls {
        width: 100%;
    }

}
@media screen and (min-width: 767px) and (max-width: 897px) {
    .ooo-btn.ooo-btn {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .vacancy-service .vacancy-service-row {
        width: 100%;
    }
    .vacancy-service .vacancy-service-row .title{
        flex: 1 1 100%;
    }
}