.atm-table-wrapper {
    @apply overflow-x-auto border-gray-700;

    textarea {
        @apply w-full md:w-52 mr-10 mt-2 md:mt-0;
    }

    .table-responsive {
        @apply hidden md:block w-full;

        .title {
            @apply relative pt-1;

            .atm-link {
                @apply absolute right-1 top-1 text-red;
            }
        }

        .icon-delete {
            @apply absolute right-4 top-4;
            @apply text-red;

            .atm-icon,
            .atm-link span {
                @apply text-red;
                @apply font-bold;
            }

            .text {
                @apply hidden;
            }
        }

        table {
            @apply w-full lg:table-fixed;

            th {
                @apply w-full bg-white;
            }

            tr:first-child {
                @apply border-none;
            }

            tr {
                @apply border-r border-l-2 border-b border-gray-700 relative;
                th {
                    @apply bg-gray-700 p-4 font-semibold text-left border-solid  border-gray-700;
                }

                .head {
                    @apply align-top;
                }

                td {
                    @apply p-4 align-top border-solid  whitespace-nowrap lg:whitespace-normal;
                }
            }

            .atm-link {
                @apply text-green;

                .text {
                    @apply underline;
                }
            }
        }
    }

    .table-list {
        @apply block md:hidden;

        .atm-link {
            @apply text-green;

            .text {
                @apply underline;
            }
        }

        .icon-delete {
            @apply absolute right-4 top-4;
            @apply text-red;

            .atm-icon,
            .atm-link span {
                @apply text-red;
                @apply font-bold;
            }

            .text {
                @apply hidden;
            }
        }

        .title {
            @apply relative pt-4;

            .icon {
                @apply right-1 top-4;
            }

            span {
                @apply font-bold;
            }
        }

        .wrapper {
            @apply relative;

            .item .atm-link {
                @apply font-normal;
            }
        }

        ul {
            li {
                &:not(:last-child) {
                    @apply md:mb-4;
                }

                .wrapper {
                    @apply bg-white m-0 md:m-[5px] md:mb-8 p-8 border border-solid border-gray-700 shadow-xl;

                    .item {
                        @apply mb-4;
                    }
                }
            }
        }
    }
}