// Elements

.page-title {
    @apply text-3xl font-bold text-gray-900;
}

a {
    @apply text-gray-700;

    &:hover {
        @apply text-gray-900;
    }
}

.modal-container {
    @apply top-0 bottom-0 left-0 right-0 fixed bg-black opacity-50 z-10;
}

.modal {
    @apply bg-white absolute rounded z-20 overflow-hidden shadow max-w-full;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    animation-name: modalopen;
    animation-duration: 0.5s;
}

.box-toggle {
    @apply shadow;

    &-header {
        @apply flex justify-between items-center px-4 py-2 text-white bg-gray-800 font-bold cursor-pointer;

        svg {
            @apply w-8 fill-current;
        }
    }

    svg {
        transform: rotate(270deg);
        transition: transform 0.3s;

        &.open {
            //@apply rotate-90;
            transform: rotate(90deg);
        }
    }

    &-content {
        @apply px-4 py-2 bg-white;
    }
}

.card {
    @apply bg-gray-300 rounded text-black;

    svg {
        @apply max-w-full max-h-48 max-w-48 m-auto fill-current;
    }

    h2 {
        @apply text-2xl text-center font-bold;
    }
}