.ds-li-jobs-wrapper {

    select,
    input[type="text"] {
        --dst--input-border-color: rgba(255, 255, 255, 0.2);
        --dst--input-bg-color: rgba(221, 224, 229, 0.1);
        --dst--input-height: 5.8rem;
        --dst--input-color: #ffffff;
    }

    input[type="text"]::placeholder {
        color: var(--dst--input-color);
    }

    select {
        --dst--select-icon:  url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.26607 0L9.60591 7.33984L16.9458 0L19.2109 2.26518L9.60591 11.8702L0.00088501 2.26518L2.26607 0Z' fill='white'/%3E%3C/svg%3E%0A");

        option {
            background: rgba(255, 255, 255, 0.1);
            color: var(--dst--primary-color1);
        }

        &[data-ds-li-department-filter],
        &[data-ds-li-location-filter] {
            max-width: 40rem;

            @media screen and (max-width: 1340px) {
                max-width: 25rem;
            }

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

        }

    }

    .ds-li-jobs-filter {
        display: flex;
        gap: 2.4rem;
        position: relative;

        label {
            width: 1px;
        }

        @media screen and (max-width: 1024px) {
            flex-direction: column;
        }

    }

    .ds-li-search-wrapper {
        display: flex;
        width: 100%;
        gap: 1.6rem;

        .ds-li-search-btn {
            width: 6.5rem;
            background: var(--dst--btn-secondary-bg);
            border: 1px solid var(--dst--btn-secondary-bg);
            border-radius: 0.7rem;

            svg {
                width: 2.2rem;
                color: #ffffff;
            }

        }

    }

    .ds-li-jobs-list {
        margin-top: 4rem;

        .ds-li-job-item {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid #013687;
            border-radius: 0.8rem;
            margin-bottom: 1.2rem;
            overflow: hidden;
            transition: all 0.3s ease;

            .ds-li-job-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                cursor: pointer;
                padding: 2.6rem 3rem;
                border: none;
                background: var(--dst--primary-color1);
                text-align: left;
                color: #fff;
                font-size: 2.4rem;
                font-weight: 700;
                position: relative;

                &:after {
                    content: '';
                    width: 1.6rem;
                    height: 1.6rem;
                    position: absolute;
                    top: 3rem;
                    right: 3rem;
                    background-size: contain;
                    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.2 7.2H8.80005V0.799951C8.80005 0.358447 8.4416 0 7.99995 0C7.55845 0 7.2 0.358447 7.2 0.799951V7.2H0.799951C0.358447 7.2 0 7.55845 0 7.99995C0 8.4416 0.358447 8.80005 0.799951 8.80005H7.2V15.2C7.2 15.6416 7.55845 16 7.99995 16C8.4416 16 8.80005 15.6416 8.80005 15.2V8.80005H15.2C15.6416 8.80005 16 8.4416 16 7.99995C16 7.55845 15.6416 7.2 15.2 7.2Z' fill='white'/%3E%3C/svg%3E%0A");
                }

                &[aria-expanded="true"] {

                    &:after {
                        background-image: url("data:image/svg+xml,%0A%3Csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cdefs%3E%3Cimage width='16' height='2' id='img1' href='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDE2IDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjc4NDUyMSAwQzAuNTc0ODg3IDAuMDA1NzI3NzYgMC4zNzUzODYgMC4xMTM1NTEgMC4yMjg3NDkgMC4zMDA0NjFDMC4wODIxMTIxIDAuNDg3MzcyIDAgMC43Mzg1MTcgMCAxQzAgMS4yNjE0OCAwLjA4MjExMjEgMS41MTI1MSAwLjIyODc0OSAxLjY5OTQyQzAuMzc1Mzg2IDEuODg2MzMgMC41NzQ4ODcgMS45OTQyNyAwLjc4NDUyMSAySDE1LjIxNTVDMTUuNDI1MSAxLjk5NDI3IDE1LjYyNDYgMS44ODYzMyAxNS43NzEzIDEuNjk5NDJDMTUuOTE3OSAxLjUxMjUxIDE2IDEuMjYxNDggMTYgMUMxNiAwLjczODUxNyAxNS45MTc5IDAuNDg3MzcyIDE1Ljc3MTMgMC4zMDA0NjFDMTUuNjI0NiAwLjExMzU1MSAxNS40MjUxIDAuMDA1NzI3NzYgMTUuMjE1NSAwSDAuNzg0NTIxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=='/%3E%3C/defs%3E%3Cstyle%3E%3C/style%3E%3Cuse id='path2047' href='%23img1' transform='matrix(1,0,0,1,0,7)'/%3E%3C/svg%3E");
                    }

                }

                &:hover {
                    background: rgba(255, 255, 255, 0.03);
                }

                &:focus {
                    outline: none;
                }

            }

            .ds-li-job-body {
                padding: 2.6rem 3rem;
                color: #ffffff;
                line-height: 1.6;
            }

            .ds-li-job-title-text {
                flex: 1;
            }

            .ds-li-job-header {
                display: flex;
                align-items: center;
                gap: 6rem;
                margin-top: 1.4rem;
                flex-wrap: wrap;
                font-weight: 400;

                @media screen and (max-width: 1024px) {
                    gap: 1.5rem;
                }

            }

            .ds-li-job-meta-item {
                display: inline-flex;
                align-items: center;
                gap: 1.2rem;
                font-size: 1.8rem;
            }

            .ds-li-job-meta-item svg {
                width: 2.4rem;
            }

            .ds-li-job-badge {
                display: inline-block;
                padding: 0.6rem 3rem;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 0.5rem;
                font-size: 1.8rem;
                line-height: 1.4;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .ds-li-job-body h3 {
                color: #fff;
                font-size: 16px;
                margin-top: 1.5rem;
                margin-bottom: 0.75rem;
            }

            .ds-li-job-description {
                margin-bottom: 2.8rem;
                padding-bottom: 2.8rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);

                ul,
                ol {
                    margin-left: 1.5rem;
                    margin-bottom: 1rem;

                    li {
                        margin-bottom: 0.5rem;
                    }

                }

            }

        }

    }

}

.ds-empty-jobs-wrapper {
    position: relative;
    text-align: center;
}

.ds-empty-jobs {
    color: #ffffff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    left: 0;
    right: 0;
    font-size: 2.2rem;
}

.ds-empty-jobs p {
    margin-bottom: 15px;
}

.ds-empty-jobs-image {
    width: 100%;
    height: auto;
}