@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
    .navbar {
        @apply bg-zinc-100 rounded-b-lg border-gray-200 border-[2px]
    }

    .base-container {
        @apply flex col-start-4 col-end-10 mt-5
    }

    .base-card {
        @apply max-w-sm p-6 bg-zinc-50 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700;
    }

    .base-button {
        @apply text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2
    }
}

.autoComplete_wrapper {
    display: inline-block;
    position: relative
}

.autoComplete_wrapper > input {
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: .875rem;
    text-overflow: ellipsis;
    color: #737373;
    outline: 0;
    border-radius: 6px;
    border: 1px solid #CBD5E1;
    background-size: 1.4rem;
    background-position: left 0.2rem top 0.45rem;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-color: #FFF;
    -webkit-transition: all -webkit-transform .1s ease
}

.autoComplete_wrapper > input:focus {
    outline: 0;
}

.autoComplete_wrapper > ul {
    position: absolute;
    max-height: 226px;
    overflow-y: scroll;
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin: .5rem 0 0 0;
    padding: 0;
    z-index: 1;
    list-style: none;
    border-radius: .6rem;
    background-color: #F9FAFB;
    border: 1px solid rgba(33, 33, 33, .07);
    box-shadow: #E5E7EB;
    outline: 0;
    transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out
}

.autoComplete_wrapper > ul:empty, .autoComplete_wrapper > ul[hidden] {
    display: block;
    opacity: 0;
    transform: scale(0)
}

.autoComplete_wrapper > ul > li {
    margin: .3rem;
    padding: .3rem .5rem;
    text-align: left;
    font-size: 1rem;
    color: #383D5A;
    border-radius: .35rem;
    background-color: #fff;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .2s ease
}

.autoComplete_wrapper > ul > li mark {
    background-color: transparent;
    --tw-text-opacity: 1;
    color: rgb(63 131 248 / var(--tw-text-opacity));
    font-weight: 600
}

.autoComplete_wrapper > ul > li:hover {
    cursor: pointer;
    background-color: #E5E7EB
}

.autoComplete_wrapper > ul > li[aria-selected=true] {
    background-color: #383D5A
}

@media only screen and (max-width: 600px) {
    .autoComplete_wrapper > input {
        width: 18rem
    }
}

.field_with_errors {
    display: inline;
}

.audit-table {
    @apply col-span-12 grid grid-cols-8 grid-flow-row border border-gray-200 text-stone-600 rounded-lg shadow-sm overflow-clip divide-x divide-y divide-gray-200;
}
.audit-table-header {
    @apply border-b border-b-stone-200 p-2 text-center;
}
.audit-table-body {
    @apply col-span-8 grid grid-cols-8 grid-flow-row;
}

.audit-table-who {
    @apply col-span-8 flex gap-4 bg-blue-100 py-2 px-6 text-center items-center hover:bg-blue-200;
}
.audit-table-cell {
    @apply col-span-2 p-1 text-center uppercase border-b border-b-stone-200;
}
.audit-table-cell-grey {
    @apply col-span-3 bg-gray-100 p-1 text-center border-b border-b-stone-200;
}
.audit-table-cell-emerald {
    @apply col-span-3 bg-emerald-50 p-1 text-center border-b border-b-stone-200;
}

.comment-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.comment-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

.comment-modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.stack {
    display: inline-grid;
    place-items: center;
    align-items: flex-end;
}

.stack > * {
    grid-column-start: 1;
    grid-row-start: 1;
    transform: translateY(10%) scale(0.9);
    z-index: 1;
    width: 100%;
    opacity: 0.6;
}

.stack > *:nth-child(2) {
    transform: translateY(5%) scale(0.95);
    z-index: 2;
    opacity: 0.8;
}

.stack > *:nth-child(1) {
    transform: translateY(0) scale(1);
    z-index: 3;
    opacity: 1;
}