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

html {height: 100%;}
body {height: 100%; @apply text-indigo-300}
main {@apply leading-relaxed}

h1 {@apply text-xl}
header {@apply text-xl}

.main-bg {background: #14151B;}
a {@apply text-indigo-200 cursor-pointer}
a:hover {@apply text-indigo-100}
input[type="text"], input[type="email"], input[type="password"], textarea, select { color: #fff; padding: .15em .35em .15em .35em; margin: 1em 0 0 .5em; border: 2px #6C78B1 solid; border-radius: 5px; @apply bg-neutral-800} 
input[type="radio"] {appearance: none; border-radius: 50%; width: 14px; height: 14px; @apply border-2}
input:focus, textarea:focus {outline: none; border-color: #A5B4FC; box-shadow: 0 0 6px #A5B4FC inset;}
input:checked {@apply bg-indigo-400}

.btn-grn {@apply px-2 py-[3px] font-semibold rounded-lg shadow-md text-white hover:text-white bg-green-800 hover:bg-green-700}
.btn-orange {@apply px-2 py-[3px] font-semibold rounded-lg shadow-md text-white hover:text-white bg-amber-600 hover:bg-amber-500}
.btn-red {@apply px-2 py-[3px] font-semibold rounded-lg shadow-md text-white hover:text-white bg-rose-800 hover:bg-rose-700}
.btn-blu {@apply px-2 py-[2px] font-semibold rounded-lg shadow-md text-sky-900 hover:text-sky-900 bg-blue-400 hover:bg-blue-300}
.btn-disabled {@apply px-2 py-[3px] font-semibold rounded-lg shadow-md text-white hover:text-white bg-neutral-600 hover:bg-neutral-500}

.a-btn-grn {@apply px-2 py-[5px] font-semibold rounded-lg shadow-md text-white hover:text-white bg-green-800 hover:bg-green-700}
.a-btn-red {@apply px-2 py-[5px] font-semibold rounded-lg shadow-md text-white hover:text-white bg-rose-800 hover:bg-rose-700}

.form-success {@apply text-lime-300}
.form-error {@apply text-red-500}

/*#thumbs_type {display: none;*/
.hide {display:none;}

 /* Dropdown Button */
.drop-btn {border: none; cursor: pointer;}
.drop-down {display: inline-block;}
/* Dropdown Content (Hidden by Default) */
.drop-content {display: none;}
/* Links inside the dropdown */
.drop-content a {text-decoration: none; display: block; }
.show {display:block;} 
.help-text {@apply text-yellow-400 cursor-help}
/*.tab {@apply border border-solid border-b-0 border-slate-200 rounded p-1}*/