.wrapper-alert {
    @apply bg-black bg-opacity-70 w-full absolute -top-48 bottom-0 right-0 left-0 z-[100000] hidden;
    height: calc(100% + 192px);

    .alert-popup {
        @apply mt-24 md:mt-48 mx-auto relative;
        @apply text-white max-w-lg;

        .close {
            @apply absolute right-4 md:right-0 -top-10;
        }

        .uhasselt-container {
            @apply flex items-center px-8 py-4;

            .text {
                @apply px-8 w-full;

                h6 {
                    @apply font-semibold;
                }
            }

            .icon {
                @apply text-white;
                transition: all 0.3s ease;
            }
        }

        .picture {
            @apply w-auto;

            img {
                @apply w-full;
            }
        }

        .extra-info {
            @apply p-8 bg-white text-black;

            .paragraph {
                @apply mb-8;
            }
        }

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

            &:hover {
                @apply bg-red-700;
            }
        }

        &.black {
            @apply bg-black;

            &:hover {
                @apply bg-black-800;
            }

            .button.button-black {
                .icon {
                    @apply text-white;
                }
            }
        }

        &.white {
            @apply bg-white text-black border border-solid border-gray;

            .icon {
                @apply text-red;
            }

            &:hover {
                @apply bg-gray-400;
            }

            .button .icon {
                @apply text-white;
            }
        }

        &.js--clickable {
            cursor: pointer;
        }

        &:hover {
            @apply no-underline;

            .fa-chevron-right {
                transform: translateX(5px);
            }
        }
    }
}