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

@layer components {

    .webH1 {
        @apply text-3xl font-bold mb-4 text-gray-600;
    }

    .webH1intro {
        @apply text-lg mb-2 text-gray-400;
    }

    .webH2 {
        @apply text-xl font-bold mb-1;
    }

    .webH2intro {
        @apply text-base mb-2 text-cyan-600;
    }
    .webH2p {
        @apply text-base mb-8;
    }

    .pageTitle {
        @apply text-xl text-slate-400 mb-4;
    }

    .button_group_start{
        @apply relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10;
    }
    .button_group_center{
        @apply relative -ml-px inline-flex items-center bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10;
    }
    .button_group_end{
        @apply relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10;
    }

    .block_hover {
        @apply hover:bg-gray-50;
    }

    .block_selected{
        @apply bg-gray-50;
    }

    .row_hover {
        @apply hover:bg-gray-50;
    }

    .row_selected{
        @apply bg-teal-100;
    }

    .btn-primary {
        @apply py-2 px-4 bg-red-200;
    }

    h1 {
        @apply text-4xl;
    }

    h3 {
        @apply text-xl;
    }

    .tedigo-logo {
        width: 120px;
    }

    h2 {
        @apply text-2xl text-slate-900;
    }

    .h2 {
        @apply text-slate-900 text-3xl;
    }

    fieldset{
        @apply mt-4;
    }
    .form_label{
        @apply block text-sm text-base font-semibold leading-6 text-gray-900;
    }
    .form_text_input {
        @apply text-xl block w-full rounded-md border-0 py-2 text-gray-800 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:leading-6;
    }

    .button_disabled {
        @apply border cursor-default block flex justify-center align-middle bg-gray-50 text-gray-500 py-1 px-4 border border-gray-400 rounded text-sm;
    }

    .button_cancel {
        @apply cursor-pointer block flex justify-center align-middle bg-slate-500 hover:bg-slate-400 text-white  py-1 px-4 border border-slate-400 hover:border-transparent rounded text-sm;
    }

    .button_save {
        @apply cursor-pointer block flex justify-center align-middle bg-blue-500 hover:bg-blue-400 text-white  py-1 px-4 border border-blue-400 hover:border-transparent rounded text-sm;
    }

    .button_delete {
        @apply cursor-pointer flex justify-center align-middle bg-red-500 hover:bg-red-400 text-white  py-1 px-4 border border-red-400 hover:border-transparent rounded text-sm;
    }

    .button_menu_action {
        @apply cursor-pointer flex justify-center align-middle  bg-white/80 hover:bg-gray-100 text-slate-600  py-1 px-4 border border-gray-400 rounded text-sm;
    }

    .button_menu_icon {
        @apply flex flex-row justify-center align-middle rounded-md pt-1 mr-1 border-2 border-slate-200 hover:bg-blue-50 h-8;
    }

    th {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }

    td {
        @apply px-2 py-4 whitespace-nowrap text-sm text-gray-900;
    }

    .question_answer {
        @apply mt-4;
    }

    .question_answer h3 {
        @apply text-lg font-semibold;
    }

    .message_success {
        @apply bg-green-100  border-green-200;
    }
    .message_text_success {
        @apply text-green-500;
    }
    .message_error {
        @apply bg-red-100  border-red-200;
    }
    .message_text_error {
        @apply text-red-500;
    }
    .message_warning {
        @apply bg-orange-100  border-orange-200;
    }
    .message_text_warning {
        @apply text-orange-500;
    }
    .message_default {
        @apply bg-green-200  border-green-500;
    }
    .message_text_default {
        @apply text-green-500;
    }
    .label_tag{
        @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-green-600/20;
    }
    .label_tag_green{
        @apply bg-green-100 text-green-700;
    }
    .label_tag_red {
        @apply bg-red-100 text-red-700;
    }
    .label_sentiment_positive {
        @apply bg-green-500 text-green-100;
    }
    .label_sentiment_negative {
        @apply bg-red-500 text-red-100;
    }
    .label_sentiment_neutral {
        @apply bg-amber-400 text-amber-100;
    }
    .box_positive {
        @apply bg-green-400;
    }
    .box_negative {
        @apply bg-red-400;
    }
    .box_neutral {
        @apply bg-amber-300;
    }

    .text_positive {
        @apply text-green-500;
    }
    .text_negative {
        @apply text-red-500;
    }
    .text_neutral {
        @apply text-amber-400;
    }
    /* # blue, green, red, yellow, indigo, purple, pink */
    .badge-red{
        @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-red-600/10 bg-red-50 text-red-700
    }
    .badge-blue{
        @apply  inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-blue-600/10 bg-blue-50 text-blue-700
    }
    .badge-green{
        @apply  inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-green-600/10 bg-green-50 text-green-700
    }
    .badge-amber{
        @apply  inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-amber-600/10 bg-amber-50 text-amber-700
    }
    .badge-gray{
        @apply  inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-600/10 bg-gray-50 text-gray-700
    }
    .badge-pink{
        @apply  inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-pink-600/10 bg-pink-50 text-pink-700
    }
    .bullet{
        @apply inline-block border w-[32px] h-[32px] mx-auto rounded-full my-auto text-center font-semibold text-xl bg-orange-500 text-white mr-2;
    }
}
/* fonts */

div.jqcloud {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 20px;
    line-height: normal;
 }

div.jqcloud a {
    font-size: inherit;
    text-decoration: none;
    zoom: 1
}

div.jqcloud span.w10 { font-size: 100px; }
div.jqcloud span.w9 { font-size: 90px; }
div.jqcloud span.w8 { font-size: 89px; }
div.jqcloud span.w7 { font-size: 70px; }
div.jqcloud span.w6 { font-size: 60px; }
div.jqcloud span.w5 { font-size: 50px; }
div.jqcloud span.w4 { font-size: 40px; }
div.jqcloud span.w3 { font-size: 30px; }
div.jqcloud span.w2 { font-size: 20px; }
div.jqcloud span.w1 { font-size: 10px; }

/*div.jqcloud span.w10 { font-size: 550%; }*/
/*div.jqcloud span.w9 { font-size: 500%; }*/
/*div.jqcloud span.w8 { font-size: 450%; }*/
/*div.jqcloud span.w7 { font-size: 400%; }*/
/*div.jqcloud span.w6 { font-size: 350%; }*/
/*div.jqcloud span.w5 { font-size: 300%; }*/
/*div.jqcloud span.w4 { font-size: 250%; }*/
/*div.jqcloud span.w3 { font-size: 200%; }*/
/*div.jqcloud span.w2 { font-size: 150%; }*/
/*div.jqcloud span.w1 { font-size: 100%; }*/

/* colors */

div.jqcloud { color: #09f; }
div.jqcloud a { color: inherit; }
div.jqcloud a:hover { color: #0df; }
div.jqcloud a:hover { color: #0cf; }
div.jqcloud span.w10 { color: #0cf; }
div.jqcloud span.w9 { color: #0cf; }
div.jqcloud span.w8 { color: #0cf; }
div.jqcloud span.w7 { color: #39d; }
div.jqcloud span.w6 { color: #90c5f0; }
div.jqcloud span.w5 { color: #90a0dd; }
div.jqcloud span.w4 { color: #90c5f0; }
div.jqcloud span.w3 { color: #a0ddff; }
div.jqcloud span.w2 { color: #99ccee; }
div.jqcloud span.w1 { color: #aab5f0; }

/* layout */

div.jqcloud {
    overflow: hidden;
    position: relative;
}

div.jqcloud span { padding: 0; }
/*
 * 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.
 *


 */