.tab-nav {
    z-index: 100;
    @apply shadow-sm relative hidden lg:block;
    > ul {
        @apply flex;

        > li {
            flex-grow: 1;
            flex-basis: 0;
            @apply border-r border-red-400;

            .link {
                @apply flex items-center justify-center w-full h-full text-center text-white bg-red text-intro py-5 px-2;

                &:hover,
                &.active {
                    @apply bg-red-600;

                    &,
                    span {
                        @apply no-underline;
                    }
                }

                .icon {
                    @apply hidden;
                }
            }

            &.active .link {
                @apply bg-red-600;

                &,
                span {
                    @apply no-underline;
                }
            }
        }
    }
}

.dropdown-nav {
    z-index: 10000;
    display: block;
    position: relative;
    @apply lg:hidden mb-8;

    @media only screen and (max-height: 575px) {
        display: block;
      }

    details {
        .wrapper {
            @apply cursor-pointer bg-red text-white shadow-sm border-0 text-md p-4 flex justify-between text-left w-full items-center;
        }
        summary {
        }

        .icon-open {
            @apply inline;
        }

        .icon-close {
            @apply hidden;
        }

        &[open] {
            .icon-open {
                @apply hidden;
            }

            .icon-close {
                @apply inline;
            }
        }
    }

    .dropdown-content {
        @apply bg-red w-full shadow-sm overflow-y-auto max-h-60;
        z-index: 1000;

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

        &::-webkit-scrollbar-track {
            @apply bg-red-600;
        }

        &::-webkit-scrollbar-thumb {
            @apply bg-red-800;
        }

        &::-webkit-scrollbar-thumb:hover {
            @apply bg-black;
        }

        a {
            @apply text-white p-4 block;

            &:hover {
                @apply bg-red-600 no-underline;
            }

            .text {
                @apply no-underline;
            }
        }
    }
}