@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
    height: 100vh;
}

body {
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    background-color: #ffffff;
}

[type="text"] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-gray-500  focus:border-[#710B06];
    @apply p-1.5;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 14px;
}

label {
    font-size: 10px
}

textarea {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-sm text-gray-500 focus:border-[#710B06];
    font-size: 14px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

[type='password'] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-sm text-gray-500 focus:border-[#710B06];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="email"] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-sm text-gray-500 focus:border-[#710B06];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="datetime-local"] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-sm text-gray-500 focus:border-[#710B06];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
input[type="date"] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-sm text-gray-500 focus:border-[#710B06];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="time"] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-sm text-gray-500 focus:border-[#710B06];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


button[type="submit"] {
    @apply text-black bg-white py-1 px-2 text-xs rounded mt-2 shadow-sm;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.20);
}

[type="checkbox"] {
    @apply rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
}

div.ts-control {
    background: transparent !important;
    @apply border rounded-md;
}

.ts-wrapper.multi .ts-control [data-value] {
    background: transparent !important;
    @apply border border-gray-100 rounded-md text-black;
    text-shadow: none;
}

select {
    @apply rounded text-gray-400 border-gray-300 text-sm shadow-sm focus:border-[#710B06] focus:ring-[#710B06];
    color:gray;
}

.soBad:hover span {
    color: white;
}

.soBad:hover svg {
    color: white;
}

.btn {
    @apply inline-flex items-center flex-grow-0 font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
}

.btn--success {
    @apply text-white bg-green-500 hover:bg-green-600 focus:ring-green-500;
}

.btn--primary {
    @apply bg-[#710B06] text-white p-1 rounded text-xs;
}

.btn--xs {
    @apply py-1 px-2 rounded text-xs
}

.btn--lg {
    @apply py-1 px-2 rounded text-xs
}

.btn--xl {
    @apply py-1 px-2 rounded text-xs
}

.btn--danger {
    @apply text-white bg-red-500 p-1 rounded text-xs;;
}


input[type=number] {
    @apply border border-gray-300 rounded-md shadow-sm;
    @apply focus:ring-[#710B06] text-gray-500  focus:border-[#710B06];
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.border-orange {
    border: 1px solid #710B06;
}

.search .wrapper:first-child svg {
    border: 4px solid blue !important;
}
/*React autocomplete css overwrite to match theme*/
/*dev*/
.vcwhJ > input {
    border: 1px solid gray !important;
    background-color: transparent;
    width: auto !important;
    padding: 4px !important;
}
/*prod*/
.byUUIE > input {
    border: 1px solid gray !important;
    background-color: transparent;
    width: auto !important;
    padding: 4px !important;
}