styles.css

/* purgecss start ignore */
@tailwind base;

body {
  @apply bg-gray-100;
}
footer,
header {
  background-color: rgb(62,93,88)
}

h1 {
  @apply text-3xl font-thin leading-loose;
}
h2 {
  @apply text-2xl font-thin leading-loose;
}
h3 {
  @apply text-xl font-thin leading-loose;

}
h4 {
  @apply font-semibold;
}
ul {
  @apply list-disc;
  @apply list-inside;
}
p {
  @apply mb-1
}
code {
  @apply block p-2 bg-gray-100 border-gray-900;
}
main a {
  @apply text-blue-600 underline;
}

th {
  @apply bg-blue-100 ;
}
tr:hover,
tr:nth-child(even):hover {
  @apply bg-gray-300;
}
tr:nth-child(even) {
  @apply bg-gray-100;
}

td, th {
  @apply border px-4 py-2 text-left;
}


.tight td, 
.tight th {
    @apply border px-1 py-1 text-left;
}

  label {
  @apply block text-gray-700 text-sm font-bold mr-2 mt-1;
}
input[type=text],
input[type=search],
input[type=email],
input[type=password],
input[type=url],
textarea  {
  @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight mb-2 ;
}

dl {
  @apply mt-4;
}
dt {
  @apply text-right font-bold  max-w-xs;
}
dd {
  @apply  ml-5 mb-1 max-w-xs ;
}

button {
  @apply bg-gray-500 text-white font-bold py-2 px-4 mx-2 rounded;
}
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 mx-2 rounded;
}
.btn-secondary {
  @apply bg-gray-500 text-white font-bold py-2 px-4 mx-2 rounded;
}
.btn-primary:hover {
  @apply bg-blue-700;
}
.panel-error {
  @apply bg-red-700 text-white font-bold py-2 px-4 rounded;
}

.panel {
  @apply max-w-full px-2 py-2 my-2 bg-white rounded-lg shadow-md;
}

.radio-bar {
  @apply mx-1;
}

.card {
  @apply max-w-full flex my-4 bg-white rounded-lg shadow-md 
}

.react-tabs__tab-list {
  @apply flex border-b mt-2;
}

.react-tabs__tab {
  @apply mr-1 bg-white inline-block py-2 px-4 text-blue-500 font-semibold;
}
.react-tabs__tab:hover {
  @apply text-blue-800 ;
}
.react-tabs__tab--selected {
  @apply -mb-px mx-2 bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-blue-700 font-semibold;
}

.react-tabs__tab-panel {
  @apply bg-white ;
}

.dzu-dropzone {
  /* min-height: 120px;
  position: relative;
  box-sizing: border-box;
  transition: all .15s linear;
  border: 2px solid #d9d9d9;
  border-radius: 4px; */
  @apply flex  flex-col items-center w-full overflow-y-auto
}
.dzu-dropzone {
  @apply flex flex-col absolute w-full text-center align-middle h-64 bg-gray-200 bg-opacity-0;
  transition: all .15s linear;
}

.dzu-dropzoneActive {
  background-color: #DEEBFF;
  border-color: #2484FF;
}

.dzu-dropzoneDisabled {
  opacity: 0.5;
}

.dzu-dropzoneDisabled *:hover {
  cursor: unset;
}

.dzu-input {
  display: none;
}

/* .dzu-inputLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: 'Helvetica', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #2484FF;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
} */

.dzu-inputLabel {
  @apply text-blue-600 text-4xl text-opacity-0 bg-opacity-0 ;
}
.dzu-inputLabelWithFiles {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  padding: 0 14px;
  min-height: 32px;
  background-color: #E6E6E6;
  color: #2484FF;
  border: none;
  font-family: 'Helvetica', sans-serif;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  margin-left: 3%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

.dzu-previewContainer {
  padding: 40px 3%;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  z-index: 1;
  /* border-bottom: 1px solid #ECECEC; */
  box-sizing: border-box;
  @apply flex flex-row relative w-full border-b bg-gray-200 bg-opacity-75;
}

dzu-dropzone:has(dzu-previewContainer) {
  @apply bg-gray-200  bg-opacity-75;
}

.dzu-previewStatusContainer {
  display: flex;
  align-items: center;
}

.dzu-previewFileName {
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

.dzu-previewImage {
  width: auto;
  max-height: 40px;
  max-width: 140px;
  border-radius: 4px;
}

.dzu-previewButton {
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  cursor: pointer;
  opacity: 0.9;
  margin: 0 0 2px 10px;
}

.dzu-submitButtonContainer {
  margin: 24px 0;
  z-index: 1;
}

.dzu-submitButton {
  padding: 0 14px;
  min-height: 32px;
  background-color: #2484FF;
  border: none;
  border-radius: 4px;
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFF;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

.dzu-submitButton:disabled {
  background-color: #E6E6E6;
  color: #333333;
  cursor: unset;
}



.dzu-dropzone:hover .dzu-inputLabel {
  @apply text-blue-600 text-opacity-50 bg-opacity-50 ;
}
/* text-opacity-0 bg-opacity-0 */
.dzu-dropzone:hover {
  @apply bg-opacity-75 text-opacity-75 ;
}
.dzu-input {
  display: none;
}

@tailwind components;
/* purgecss end ignore */
@tailwind utilities;