/* FONTS */
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* TAILWIND */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* PLUGINS */
@import "./tui-editor.css";
@import "./vue-notification.css";
@import "./v-select.css";
@import "./QuillEditor.css";

@layer utilities {
    .tooltip {
        position: absolute;
        width: 200px;
        @apply bg-gray-900 bg-opacity-90 text-white;
        text-align: center;
        padding: 10px 20px 10px 20px;
        border-radius: 10px;
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        z-index: 999;
    }

    .tooltip-box {
        position: relative
    }

    .triangle {
        border-width: 0 6px 6px;
        border-color: transparent;
        border-bottom-color: #233876;
        position: absolute;
        left: -6px;
        top: calc(50% - 3px);
        transform: rotate(270deg) translateY(-50%)
    }

    /**
     * Scrollbar
     */
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .cut {
        block-overflow: ellipsis;
        overflow-block: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 600px;
        word-break: break-word;
    }

    .one-line {
        -webkit-line-clamp: 1;
        max-lines: 1;
    }

    .two-lines {
        -webkit-line-clamp: 2;
        max-lines: 2;
    }

}

body {
    scroll-behavior: smooth;
}

@media only screen and (max-width: 700px) {
    table, thead, tbody, tr, th, td {
        @apply block;
    }

    th {
        @apply hidden;
    }

    td {
        padding-left: 100px;
        @apply relative;
    }

    td:first-child {
        @apply bg-blue-600 text-white font-bold items-start;
        content: attr(data-label);
    }

    td:not(:first-child):before {
        @apply px-2 py-4 bg-gray-100 text-gray-500;
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        bottom: 0;
        /*display: flex;*/
        /*align-items: center;*/
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }




}