:root {
    --primary: #FF6C00;
    --secondary: #00399B;
}

/* Searchbar */

.uzp__search {
    margin-bottom: -16px;
}

.uzp__search .uzp-row {
    height: 100%;
    width: 100%;
    display: flex;
}

.uzp__search .query {
    width: 100%;
    height: 54px;
    position: relative;
}

.uzp__search .query input {
    width: 100%;
    height: 54px;
    border-radius: 999px;
    border: none;
    padding: 0 60px 0 24px;
}

.uzp__search .query button {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 99px;
    height: 46px;
    width: 46px;
    position: absolute;
    right: 4px;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--primary);
    cursor: pointer;
    transition-duration: 300ms;
}

.uzp__search .query button:hover {
    background: var(--secondary);
}

.uzp__vacancy-alert-modal { 
    pointer-events: none;
    background:rgba(0,0,0,0.4);
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top:0;
    left:0; 
    z-index: 10020;
    opacity: 0;
    transition-duration: 300ms;
}


.modal-open .uzp__vacancy-alert-modal {
    opacity: 100;
    pointer-events: auto;
}

.uzp__vacancy-alert-modal .container {
    height: 100dvh;
}

.uzp__vacancy-alert-modal-content {
    padding: 32px;
    position: absolute;
    width: 100%;
    top: 40%;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 20px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    color: var(--secondary);
    transition-duration: 400ms;
}

.modal-open .uzp__vacancy-alert-modal .uzp__vacancy-alert-modal-content {
    top: 50%;
}

.uzp__vacancy-alert-modal-content input[type=email] {
    padding: 16px;
    width: 100%;
    border: none;
    border-radius: 8px;
    border: 1px solid #dddddd;
}

.uzp__vacancy-alert-modal .success-message {
    background:rgb(21, 192, 21); 
    border-radius: 8px;
    padding: 8px !important;
    margin: 16px 0;
    color:white;
    display: none;
}

.uzp__vacancy-alert-modal button[type=submit] {
    color: #FFFFFF;
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    background: var(--primary);
    color: white;
    padding: 12px 18px;
    display: inline-block;
    margin-top: 16px;
    cursor: pointer;
    transition-duration: 300ms;
    border: 0;
    appearance: none;
}

.uzp__vacancy-alert-modal button[type=submit]:hover {
    background: var(--secondary);
}

.uzp__help-block--hidden {
    background:rgb(194, 9, 9);
    color:white;
    padding: 8px;
    display: none;
}

.uzp__vacancy-alert-modal-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
}

.uzp__vacancy-alert-modal-header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 16px;
}

.et_pb_sticky--top, .et_pb_section_0_tb_footer {
    z-index: 999 !important;
}

.modal-open .et_pb_sticky--top, .et_pb_section_0_tb_footer {
    z-index: 3 !important;
}

.et_builder_inner_content {
    position: inherit !important;
}

.show-modal {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: none;
    color: white;
    cursor: pointer;
}

.uzp__pagination {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.next-page, .prev-page {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--primary);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 300ms;
    cursor: pointer;
    flex-shrink: 0;
}

.disabled .next-page, .disabled .prev-page {
    background: rgb(192, 192, 192);
    cursor: not-allowed;
}

.disabled .next-page:hover, .disabled .prev-page:hover {
    background: rgb(192, 192, 192);
}


.next-page svg, .prev-page svg {
    width: 18px;
    color:white !important;
}

.next-page:hover, .prev-page:hover {
    background: var(--secondary);
}

.uzp__pagination li:first-of-type, .uzp__pagination li:last-of-type {
    display: flex !important;
}

.show-modal span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.show-modal span.uzp-button-filled {
    display: none;
}

/* Index  */

.uzp__vacancy-container {
    margin-bottom: 40px;
    color: var(--secondary);
}

.vacancy-items {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}


.uzp__vacancy-container a {
    color: var(--secondary);
}

.uzp__vacancy-container .uzp__filters {
    width: 25%;
    flex-shrink: 0;
}

@media screen and (min-width: 1140px) {
    .uzp__categories {
        display: block !important;
        height: auto !important;
    }
}

@media screen and (max-width: 1140px) {
    .filters-title {
        cursor: pointer;
    }
    .uzp__vacancy-container .uzp__filters {
        width: 100%;
    }
    .uzp__categories {
        display: none;
    }
}

.vacancy-card {
    background: RGBA(0,182,255,0.04);
    color: var(--secondary);
    padding: 24px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.vacancy-card ul {
    margin: 8px 0;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.vacancy-card li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.vacancy-card li svg {
    width: 18px;
    color: var(--primary);
}

.vacancy-card .title {
    font-weight: 600;
    font-size: 20px;
}

.uzp__pagination-header {
    padding-bottom: 16px;
}

.vacancy-card p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.6rem;
}

.vacancies-header {
    display: flex;
    justify-content: space-between;
}

.vacancy-card .button {
    color: #FFFFFF;
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    background: var(--primary);
    color:white;
    padding: 12px 18px;
    display: inline-block;
    margin-top: 16px;
    transition-duration: 300ms;
}

.vacancy-card .button:hover {
    background: var(--secondary);
}

.mt-auto {
    margin-top: auto;
}

@media screen and (min-width: 1140px) {
    .uzp__vacancy-container {
        display: flex;
        width: 100%;
        gap: 32px;
    }

    .vacancy-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
}


/* Filters */

a.uzp__clear-filter {
    color: #FFFFFF;
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    background: rgb(250, 47, 47);
    color:white;
    padding: 12px 18px;
    display: inline-block;
    margin-top: 16px;
    transition-duration: 300ms;
}

a.uzp__clear-filter:hover {
    background: rgb(224, 35, 35);
}

.filters-title {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    gap: 6px;
    align-items: center;
    padding-bottom: 14px;
}

.filters-title svg {
    width: 20px;
}

.uzp__category {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgb(240, 240, 240);
}

.uzp__category:last-of-type {
    border-bottom: 0;
}

.uzp__tag a {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
    font-weight: 500;
}

.uzp__qty {
    margin-left: auto;
    font-weight: normal;
    font-size: 14px;
    opacity: 0.6;
    color: var(--primary)
}

.uzp__tag .checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
    transition-duration: 300ms;
}

.checked .checkbox {
    background: var(--primary);
    border: 1px solid var(--primary);
    position: relative;
}

.checked .checkbox:after {
    content:'';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    mask-size: contain;
    background-color: white;
    transform: translateY(-50%) translateX(-50%);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");
}

.uzp__tag:hover .checkbox {
    border: 1px solid var(--primary);
}

.category-title {
    padding-bottom: 4px;
    display: block;
}

/* Pagination */

.uzp__pagination {
    display: flex;
    margin-top: 32px;
    font-size: 16px;
    gap: 14px;
    padding: 0 !important;
    align-items: center;
    width: 100%;
}

.header-z {
    position: relative;
    z-index: 2 !important;
}
.et_pb_text_inner, .et_pb_column {
    position: relative;
    z-index: 0 !important;
}

.uzp__pagination li {
    list-style: none;
    font-weight: 500;
}

.uzp__pagination li a {
    transition-duration: 300ms;
}

.uzp__pagination li:hover a {
    color: var(--primary);
}

.uzp__pagination li.active .uzp__pagination-item {
    background: var(--primary);
    width: 32px;
    height: 32px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    text-align: center;
    font-weight: 500;
    color: white;
}

.uzp__pagination li:first-of-type,
.uzp__pagination li:last-of-type {
    display: none;
}


/* Single vacancy */

ul.vacancy-meta {
    margin: 8px 0;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--secondary);
    margin-bottom: 32px;
}

.vacancy-meta li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.vacancy-meta li svg {
    width: 18px;
    color: var(--primary);
}

.apply-button {
    color: #FFFFFF;
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    background: var(--primary);
    color:white;
    padding: 12px 18px;
    display: inline-block;
    margin-top: 16px;
    cursor: pointer;
    transition-duration: 300ms;
}

.apply-button:hover{
    background: var(--secondary);
}

h1.vacancy-title {
    font-size: 2.4rem;
}   

.vacancy-content {
    padding-top: 6rem;
    padding-bottom: 80px;
}

@media screen and (min-width: 1140px) {
    .single-vacancy {
        display: flex;
        gap: 32px;
        align-items: start;
    }
}

.single-vacancy .side-bar {
    width: 33.33333%;
    flex-shrink: 0;
}

.single-vacancy .vacancy-details {
    border: 1px solid #eceaff; 
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
}

.single-vacancy .vacancy-details p {
    font-size: 16px;
    line-height: 1.6em;
}

.vacancy-details a {
    color: var(--secondary);
    text-decoration: underline;
}

.vacancy-details ul {
    margin: 0 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vacancy-details ul li {
    display: flex;
    align-items: start;
    font-size: 16px;
}

.vacancy-details ul li:before {
    content:'';
    top: 10px;
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    mask-size: contain;
    background-color: var(--primary);
    transform: translateY(-50%) translateX(-50%);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-square-rounded-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M12 2c-.218 0 -.432 .002 -.642 .005l-.616 .017l-.299 .013l-.579 .034l-.553 .046c-4.785 .464 -6.732 2.411 -7.196 7.196l-.046 .553l-.034 .579c-.005 .098 -.01 .198 -.013 .299l-.017 .616l-.004 .318l-.001 .324c0 .218 .002 .432 .005 .642l.017 .616l.013 .299l.034 .579l.046 .553c.464 4.785 2.411 6.732 7.196 7.196l.553 .046l.579 .034c.098 .005 .198 .01 .299 .013l.616 .017l.642 .005l.642 -.005l.616 -.017l.299 -.013l.579 -.034l.553 -.046c4.785 -.464 6.732 -2.411 7.196 -7.196l.046 -.553l.034 -.579c.005 -.098 .01 -.198 .013 -.299l.017 -.616l.005 -.642l-.005 -.642l-.017 -.616l-.013 -.299l-.034 -.579l-.046 -.553c-.464 -4.785 -2.411 -6.732 -7.196 -7.196l-.553 -.046l-.579 -.034a28.058 28.058 0 0 0 -.299 -.013l-.616 -.017l-.318 -.004l-.324 -.001zm2.293 7.293a1 1 0 0 1 1.497 1.32l-.083 .094l-4 4a1 1 0 0 1 -1.32 .083l-.094 -.083l-2 -2a1 1 0 0 1 1.32 -1.497l.094 .083l1.293 1.292l3.293 -3.292z' fill='currentColor' stroke-width='0' /%3E%3C/svg%3E");
}

.apply-block {
    background-image: linear-gradient(503deg, #5abaff 0%, #2b87da 100%);
    padding: 20px;
    color: white;
    border-radius: 20px;
    margin-bottom: 32px;
}

.apply-block p {
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
}

.apply-block .title  {
    font-size: 1.6rem;
    font-weight: 600;
    padding-bottom: 8px;
    display: block;
}

.apply-block .apply-button {
    width: 100%;
    text-align: center;
}

.recruiter .title {
    font-size: 1.2rem;
    font-weight: 600;
    padding-bottom: 16px;
    display: block;
}

.recruiter {
    border: 1px solid #eceaff;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 32px;
}

.client-logo {
    border-radius: 99px;
    border: 1px solid #eceaff;
    background-color: white;
}

.clien, .recruiter .header {
    gap: 16px;
    display: flex;
    align-items: center;
}

.client .details .name, .recruiter .header .name {
    display: block;
    font-weight: 500;
}

.client .footer {
    display: block;
}

.recruiter .footer a.phone {
    color: #FFFFFF;
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    background: var(--secondary);

    padding: 12px 18px;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    cursor: pointer;
    transition-duration: 300ms;
    width: 100%;
    text-align: center;
    align-items: center;
}

.recruiter .footer a.email {
    color: var(--secondary);
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    border: 1px solid var(--secondary);
    padding: 12px 18px;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    cursor: pointer;
    transition-duration: 300ms;
    width: 100%;
    text-align: center;
    align-items: center;
}

.recruiter .footer a.email:hover {
    color: white;
    background: var(--primary);
    border: 1px solid var(--primary);
}

.recruiter .footer a:hover {
    background-color: var(--primary);
}

.related .items {
    display: grid;
    gap: 16px;
}


.related .items .vacancy-card p {
    display: none;
}

.apply-modal {
    position: fixed;
    top: 0;
    left: 0; 
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: rgba(0,0,0,0.5);
}

.apply-modal .inner {
    padding: 32px 32px 0 32px;
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.apply-modal .columns {
    max-height: 100%;
    overflow-y: scroll;
    padding-bottom: 32px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.apply-modal .columns::-webkit-scrollbar { 
    display: none;
}

@media screen and (min-width: 1140px) {
    .apply-modal .columns {
        display: flex;
        width: 100%;
        gap: 40px;
    }

    .apply-modal .name {
        display: flex;
        gap: 16px;
        width: 100%;
    }

    .apply-modal .side-bar {
        width: 30%;
        flex-shrink: 0;
    }
}

.apply-modal .inner .columns .form {
    width: 100%;
}

.apply-modal .uzp {
    padding-bottom: 32px;
}

.apply-modal input[type=text], .apply-modal input[type=email], .apply-modal textarea, .uzp__registration-form input[type=text], .uzp__registration-form input[type=email], .uzp__registration-form textarea,
.uzp__registration-form input[type=number], .uzp__registration-form select  {
    padding: 16px;
    width: 100%;
    border:none;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #dddddd;
}

.uzp__driving-licenses {
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.uzp__driving-licenses .uzp__checkbox-inline {
    display: flex;
    gap: 8px;
    width: 20%;
    border: 1px solid #dddddd;
    padding: 8px;
    border-radius: 10px;
}

.uzp__driving-licenses .uzp__checkbox-inline svg {
    height: 10px;
    flex-shrink: 0;
}

.uzp__driving-licenses .uzp__checkbox-inline .license-icon {
    margin-left: auto;
}

.apply-modal h2 {
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: var(--secondary);
    line-height: 1.4em;
}

.apply-modal .name div {
    width: 100%;
}

.apply-modal .side-bar .recruiter {
    background: white;
    border: none;
    border: 1px solid rgba(0,0,0,0.1);
}

.apply-modal label, .uzp__registration-form label {
    font-weight: 500;
}

.apply-modal .close, .modal-close {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--primary);
    appearance: none;
    background: none !important;
    border:none !important;
}

.apply-modal .inner-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.uzp__registration-form button, .apply-modal button {
    color: #FFFFFF;
    border-radius: 40px;
    font-size: 16px;
    font-family: 'Actor', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 700;
    background: var(--primary);
    color:white;
    padding: 12px 18px;
    display: inline-block;
    margin-top: 16px;
    cursor: pointer;
    transition-duration: 300ms;
    border: 0;
}

.apply-modal button:hover, .uzp__registration-form button:hover {
    background: var(--secondary);
}

.uzp__registration-form .vacancy-alert, .apply-modal .vacancy-alert {
    background: var(--secondary);
    padding: 16px;
    border-radius: 20px;
    color:white;
    margin-bottom: 8px;
}

.apply-modal form a {
    color: var(--secondary);
    text-decoration: underline;
}

.uzp__registration-form .vacancy-alert label, .apply-modal .vacancy-alert label {
    display: flex;
    gap: 8px;
    align-items: start;
}

.uzp__help-block--filesize {
    font-size: 12px;
    margin-bottom: 16px;
    display: none;
}

/* Modal toggle */

.apply-modal {
    opacity: 0;
    pointer-events: none;
    transition-duration: 500ms;
}

.apply-modal .inner {
    transition-duration: 600ms;
    top: 5vh;
}

.apply-modal.open .inner {
    top: 10vh;
}

.apply-modal.open {
    opacity: 100;
    pointer-events: auto;
}



@media screen and (max-width: 1140px) and (min-width: 600px) {
    .related {
        width: 100%;
    }

    .single-vacancy .side-bar, .related .items {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .apply-block, .recruiter, .related .items a {
        width: calc(50% - 16px);
    }
}

@media screen and (max-width: 600px) {
    .single-vacancy .side-bar {
        width: 100%;
    }
}


.single-vacancy p:not(.has-background):last-of-type{
    padding-bottom: 16px;
}


/* latest-vacancies */

.latest-vacancies {
    display: grid;
    gap: 16px;
}

@media screen and (min-width: 768px) {
    .latest-vacancies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (min-width: 768px) {
    .three-column {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .two-column {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .flex-column {
        display: flex;
        gap: 16px;
        width: 100%;
    }
    .flex-column div {
        width: 100%;
    }
}

.ck-content {
    min-height: 200px;
}

.ck-editor {
    width: 100%;
    max-width: 100%;
    display: inline-block;
    margin-bottom: 16px !important;
}

.genders {
    margin-bottom: 8px;
}
 
.hidden {
    display: none;
}

.flex-terms {
    display: flex;
    gap: 8px;
    align-items: start;
    margin-top: 8px;
}

.flex-terms input {
    position: relative;
    top: 2px;
}

header {
    z-index: 999;
}