@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

* {
  font-family: 'Inter', sans-serif;
}

h1 {
  @apply font-semibold;
  @apply text-xl;
}

label {
  @apply font-semibold;
}

input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="number"]) {
  @apply w-full rounded-3xl border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50;
  text-indent: 10px;
}

input[type="submit"] {
  @apply w-full rounded-3xl mt-6 text-white py-3 font-semibold cursor-pointer;
  background: linear-gradient(271.09deg, #1EB8C4 2.3%, #00E5EB 99.73%) !important;
}

input[type="submit"]:disabled {
  @apply border-gray-300 !important;
  background: rgb(169,169,169) !important;
}

input[type="time"], input[name="time"]{
  @apply w-full rounded-3xl py-5 px-6 text-black cursor-pointer text-left;
  text-indent: 0px !important;
}

input[type="time"]::-webkit-date-and-time-value {
  @apply ml-0;
}

input::-webkit-date-and-time-value {
  @apply text-left ml-1;
}

#entry_visit_type {
  @apply w-full rounded-3xl text-black cursor-pointer text-left;
  @apply w-full rounded-3xl border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50;
  text-indent: 10px;
}

.field-group {
  @apply flex flex-col mx-auto w-full md:w-9/12;
}

button {
  @apply rounded-sm font-bold;
}

input[type="radio"]:checked {
  background-image: none;
  @apply bg-primary;
}

.hide {
  display: none;
}

.error-message {
  @apply text-red-500 text-sm font-semibold mt-1;
}

.flash .notice {
  @apply text-primary text-sm font-semibold mb-1;
}

.flash .alert {
  @apply text-black text-sm font-semibold mb-1;
}

.flash-wrapper {
  @apply fixed right-1 z-10;
}

.alert {
  @apply bg-white shadow-sm pr-7 pl-5 py-5 rounded-sm relative;
}

.alert .close-alert {
  @apply cursor-pointer text-gray-400 font-bold hover:text-gray-500;
}

.close-alert {
  @apply absolute top-4 right-0 z-10;
}

.alert svg {
  @apply font-bold text-gray-400 ml-5 mt-1;
}

.alert.error {
  @apply bg-red-100 border border-red-400 text-red-700;
}

.alert.error svg {
  @apply text-red-500
}

.tooltip-image {
  @apply w-5 ml-2;
}

.tooltip {
  @apply relative inline-block;
}

.tooltip .tooltiptext {
  @apply absolute z-10 w-60 invisible bg-white text-sm text-black text-center rounded-lg py-2 px-3 right-0 left-0 md:left-1/2 top-full opacity-0 ml-[-100px] mb-2;
  transition: opacity 0.3s;
}

.tooltiptext {
  @apply border border-gray-300 shadow-sm;
}

.tooltip:hover .tooltiptext {
  @apply visible opacity-100;
}

.tooltip .forgot-password {
  @apply absolute z-10 w-60 invisible bg-white text-sm text-black text-center rounded-lg py-2 px-3 right-0 left-0 md:left-1/2 top-full opacity-0 ml-12 md:ml-[-100px] mb-2;
  transition: opacity 0.3s;
}

.forgot-password {
  @apply border border-gray-300 shadow-sm;
}

.tooltip:hover .forgot-password {
  @apply visible opacity-100;
}

.tooltip .login {
  @apply absolute z-10 w-60 invisible bg-white text-sm text-black text-center rounded-lg py-2 px-3 right-0 left-0 md:left-1/2 top-full opacity-0 ml-0 md:ml-[-100px] mb-2;
  transition: opacity 0.3s;
}

.tooltip:hover .login {
  @apply visible opacity-100;
}

.login {
  @apply border border-gray-300 shadow-sm;
}

.delete-button {
  @apply flex ml-auto text-center text-discard underline font-normal;
}

.close-button {
  @apply text-lg px-3;
  transition: background-color 0.3s ease;
}

.close-button:hover {
  @apply bg-gray-300;
  border-radius: 100%;
}

.reset-diary {
  @apply flex ml-auto underline text-primary font-normal;
}

.submit-diary {
  @apply rounded-full text-white py-3 font-semibold cursor-pointer;
  background: linear-gradient(271.09deg, #1EB8C4 2.3%, #00E5EB 99.73%) !important;
}

.modal-open {
  overflow: hidden;
}

.progress-image{
  @apply mt-[-20px];
}

#gdprModal .modal-content {
  @apply w-full md:w-2/3 lg:w-1/3 2xl:w-1/4;
  word-wrap: break-word;
}

.checkbox-label {
  @apply font-normal leading-5;
}

#gdprModal [data-target='gdpr-modal.getStartedButton'][disabled] {
  @apply opacity-50 cursor-default;
}

.password-icon-wrapper {
  @apply relative flex items-center justify-between mt-1;
}

.password-icon-wrapper input {
  @apply mt-0;
}

.password-icon {
  @apply absolute w-6 right-[60px] font-semibold text-sm;
}

.send-link {
  @apply w-full rounded-3xl text-white py-3 font-semibold cursor-pointer;
  background: linear-gradient(271.09deg, #1EB8C4 2.3%, #00E5EB 99.73%) !important;
}

.send-link:disabled {
  @apply border-gray-300 !important;
  background: rgb(169, 169, 169) !important;
}