body.overflow {
    @apply h-screen overflow-hidden;
}

.tpl-vacancy-overview {
    @apply pt-[var(--content-padding-top)] overflow-hidden;

    .vacancy-intro {
        @apply p-4;
        @apply md:p-0;
        @apply lg:w-2/3;

        h1.atm-heading {
            @apply text-secondary-col-1 mb-6;
            @apply sm:text-h1;
        }
    }

    .vacancy-overview-list {
        @apply grid mt-10 mb-20;
        @apply md:grid-cols-12;
        @apply lg:mt-20;

        .left {
            @apply mr-12;
            @apply md:col-span-3;
            @apply lg:col-span-2;

            .modal {
                @apply hidden md:block fixed top-0 left-0 overflow-y-auto h-full z-[9999999] md:z-50 w-full md:w-auto bg-white md:relative;
                @apply md:h-auto md:relative md:block md:w-auto;

                &::-webkit-scrollbar {
                    width: 1px;
                }

                .modal-inner {
                    @apply p-6 mt-32 mb-32;
                    @apply md:p-0 md:m-0 md:pl-1;
                }

                &.active {
                    @apply block;
                }

                .desktop-form {
                    @apply hidden;
                    @apply md:block;
                }

                .mobile-form {
                    @apply md:hidden;
                }

                .atm-button{
                    @apply m-0;
                }

                .wrapper-checkbox {
                    @apply mb-8;

                    .atm-form-checkbox {
                        @apply mb-1;
                    }

                    .last-item ~ .atm-form-checkbox {
                        @apply hidden;
                    }

                    .read-more,
                    .read-less {
                        @apply text-secondary-col-1 cursor-pointer;

                        &.hide {
                            @apply hidden;
                        }
                    }
                }
            }

            .go-back {
                @apply fixed w-full z-50 top-0 left-0 border-b border-solid bg-secondary-col-1;
                @apply md:hidden;

                .go-back-inner {
                    @apply py-6 px-4 flex justify-between items-center text-white;

                    * {
                        @apply cursor-pointer;
                    }
                }
            }

            .mobile-filter-btn {
                @apply border-solid text-center;
                @apply md:hidden;

                .atm-button {
                    @apply m-0;
                }
            }

            .check-postcode {
                @apply mb-8;

                .check-postcode-wrapper{
                    @apply flex mb-4;
                }

                .atm-form-select {

                    .form-select {
                        @apply w-full;
                    }
                }

                .atm-form-input {
                    @apply relative w-full;

                    .form-input {
                        @apply w-full border-0 border-b p-0 rounded-none;
                    }

                    .form-label {
                        @apply text-gray-300 p-0 w-[max-content] left-0;
                    }


                }
                .atm-button {
                    @apply bg-white m-0 p-0 rounded-none border-b;

                    .button-content{
                        height: 100%;
                    }

                    .atm-icon {
                        @apply text-black;

                        &::after{
                            content: none;
                        }
                    }
                }
            }

            .show-vacancies {
                @apply fixed bottom-0 left-0 bg-white p-6 w-full z-[999] text-center;
                @apply md:hidden;
                -webkit-box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
                -moz-box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
                box-shadow: 0px -4px 14px rgba(0, 0, 0, 0.06);
            }
        }

        .right {
            @apply relative p-3 self-start;
            @apply md:col-span-9 md:p-10;
            @apply lg:col-span-10;

            svg {
                @apply top-0 left-0;
            }

            .vacancy-results {
                @apply grid justify-between items-center p-4;
                @apply md:mb-10 md:p-0;

                grid-template-columns: 1fr 1fr;

                .desktop-filer-btn, .mobile-filter-btn{
                    grid-area: 1 / 2 / 1 / 3;
                }

                .desktop-filter-btn {
                    @apply hidden justify-self-end;
                    @apply md:block;
                }
                .mobile-filter-btn {
                    @apply justify-self-end;
                    @apply md:hidden;
                }

                .atm-heading {
                    @apply m-0 text-white;
                }
                .atm-button {
                    @apply m-0;
                }
            }

            .vacancy-list-wrapper {
                @apply grid gap-3 grid-cols-1 mt-3;
                @apply md:gap-4;

                .no-vacancies {
                    @apply text-white text-center;
                }
            }

            .atm-pager {
                @apply mt-10 text-white font-display;

                a {
                    &:hover {
                        @apply text-white;
                        font-weight: bold;
                    }
                    &.active {
                        @apply bg-[transparent] text-white border-2 border-white;
                    }
                }
                li {
                    &:first-child {
                        a {
                            @apply bg-[transparent] text-white;
                        }
                    }
                    &:last-child {
                        a {
                            @apply bg-[transparent] text-white;
                        }
                    }
                    &:last-child,
                    &:first-child {
                        a:hover {
                            @apply bg-white text-secondary-col-1;
                        }
                    }
                }
            }
        }
    }
}