@font-face {
    font-family: 'The Bold Font', sans-serif;
    src: url(/theboldfont/theboldfont.ttf);
}
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer components{


    .table{
        @apply w-full text-sm;
    }

    .table > :not(caption) > * > * {
        padding: 0.5rem 0.5rem;
        background-color: transparent;
        border-bottom-width: 1px;
    }

    .table-border-col > :not(caption) > * > :not(:last-child) {
        border-right-width: 1px;
    }
    .table > tbody {
        vertical-align: inherit;
    }
    .table > thead {
        vertical-align: bottom;
        text-align: left;

    }
    .table > :not(:last-child) > :last-child > * {
        @apply  text-gray-700 border-t-2 border-b-2;
    }

    .table > tbody > tr > td {
        @apply text-gray-600;
    }

    .table > tbody > tr:hover > td {
        @apply text-orange-700;
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        @apply bg-gray-100;
    }

    .table-hover > tbody > tr:hover {
        @apply bg-gray-200 bg-opacity-20;
    }

    .pagination {
        /* @apply mt-5; */
    }

    .pagination > nav p {
        @apply hidden;
    }

    .btn {
        @apply border py-2 px-3 text-sm rounded-md focus:outline-none;
    }

    .btn-info{
        @apply bg-blue-500 border-blue-500 text-blue-50 hover:bg-blue-600 hover:border-blue-600
    }
    .btn-success{
        @apply bg-green-400 border-green-400 text-green-50 hover:bg-green-500 hover:border-green-500
    }
    .btn-warning{
        @apply bg-orange-300 border-orange-300 text-orange-900 hover:bg-orange-400 hover:border-orange-400
    }
    .btn-danger{
        @apply bg-red-500 border-red-500 text-red-50 hover:bg-red-600 hover:border-red-600
    }

    .btn-dark{
        @apply bg-gray-700 border-gray-700 text-gray-50 hover:bg-gray-800 hover:border-gray-800
    }
    .btn-primary{
        @apply bg-gray-500  border-gray-500 text-gray-50 hover:bg-gray-600 hover:border-gray-600
    }
    .btn-secondary{
        @apply bg-gray-200 border-gray-300 text-gray-600 hover:bg-gray-300 hover:border-gray-300
    }

    .btn-danger{
        @apply bg-red-500 border-red-500 text-red-50 hover:bg-red-600 hover:border-red-600
    }

    .btn-search-orange{
        @apply bg-orange-500 border-orange-600 text-white px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-300 hover:bg-opacity-90 hover:border-orange-500;
        padding-top: 0.20rem;
        padding-bottom: 0.20rem;
    }

    .btn-action{
        @apply block bg-gray-200 hover:bg-opacity-75 border border-gray-300 px-2 rounded-lg;
    }

    .btn-action span{
        @apply text-xs;
    }

    .card{
        @apply flex flex-col w-full;
    }

    .card-head{
        @apply flex justify-between border-orange-500 border-b-2 mb-7;
    }

    .card-body{
        @apply flex flex-col;
    }

    .checkbox {
        @apply rounded border-gray-300 text-yellow-600 shadow-sm focus:border-yellow-300 focus:ring focus:ring-offset-0 focus:ring-yellow-200 focus:ring-opacity-50;
    }

    .form-control
    {
        @apply w-full h-9 text-gray-700 px-3 border border-gray-300 rounded-md focus:border-blue-400 focus:border-opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-30 placeholder-gray-500  placeholder-opacity-40;
    }

}