@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');

@font-face {
  font-family: 'Idealista Bold';
  src: url('../fonts/Idealista-Bold.otf') format('truetype');
}

@font-face {
  font-family: 'Droid Sans';
  src: url('../fonts/DroidSans.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Droid Sans';
  src: url('../fonts/DroidSans-Bold.ttf') format('truetype');
  font-weight: 700;
}

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

@layer base {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-idealista;
    @apply text-primary;
  }

  /* FontSizes */
  h1 {
    @apply text-[3.75rem];
  }
  h2 {
    @apply text-[2.25rem];
  }
  h3 {
    @apply text-[1.75rem];
  }
  h4 {
    @apply text-[1.313rem];
  }
  h5 {
    @apply text-[0.813rem];
  }
  h6 {
    @apply text-[0.688rem];
  }
  h6 {
    @apply text-[0.688rem];
  }
  body {
    @apply text-[1.125rem];
  }

  p,
  span {
    @apply text-gray;
  }

  p>a {
    @apply font-extrabold;
  }

.tooltip {
  @apply bg-graphiteGray w-72 absolute -top-full ml-3 p-2 rounded transition-opacity duration-1000
}

/* Hidden widget from term intro screen */
#id_term_intro {
  @apply hidden
}

div.form-control > div > span {
  font-size: 0.75rem;
}

span.field-error {
  font-size: 0.75rem;
  @apply text-start text-red
}

  body > div > div.flex-1 > div > p {
    @apply opacity-70
  }

  #id_years_of_experience > div > label  {
    @apply flex items-center pl-3 mb-4
  }
  #id_years_of_experience > div > label > input {
    @apply h-4 w-4 mr-2
  }

  #id_fields_of_work > div > label {
    @apply flex items-center pl-3 mb-4
  }
  #id_fields_of_work > div > label > input {
    @apply h-4 w-4 mr-2
  }

  #id_approach>div>label {
    @apply flex items-center pl-3 mb-4 text-start justify-start
  }

  #id_approach>div>label>input {
    @apply h-4 w-7 mr-3 flex
  }
}

@layer components {
  .btn {
    @apply font-idealista text-neutral-50 focus:text-neutral-50 min-w-[150px] hover:text-neutral-50 ;
  }

/* Navigation formulário de voluntárias */
  .my-steps {
    @apply flex flex-row h-2 w-full bg-neutral-200 rounded-full;
  }

  .my-steps .my-step {
    @apply flex-1 h-2 bg-neutral-200;
  }

  .my-steps .my-step-active {
    @apply bg-secondary h-2;
  }

  .tabs .tab {
    @apply font-idealista text-gray opacity-25 uppercase px-2;
  }

  .tabs .msr_tab {
    @apply font-idealista opacity-25 uppercase px-2 text-white;
  }

  .tabs .msr_tab-active {
    @apply text-primary opacity-100 absolute left-5;
  }

  .tabs .tab-active {
    @apply text-secondary opacity-100;
  }

  .error-list {
    @apply flex flex-col gap-1;
  }

  .error-list .field-error {
    @apply text-sm text-error text-left;
  }

  .mapa-ilustracao {
    width: 310px;
    height: 281px;
    background-size: cover;
    position: absolute;
    right: 0;
    bottom: 0;
    content: " ";
  }

  .mapa-ilustracao-2 {
    width: 82px;
    height: 93px;
    background-size: cover;
    position: absolute;
    right: 2rem;
    bottom: 0;

  }

  .mapa-footer-bg {
    width: 523px;
    height: 378px;
    background-size: cover;
    position: absolute;
    bottom: -145px;

  }

  .mapa-footer-bg-2 {
    width: 426px;
    height: 62px;
    background-size: cover;
    position: absolute;
    bottom: 0;
  }

  .footer-cover {
    position: relative;
    height: 281px;
    overflow: hidden;
  }

  .scrollbar-thin::-webkit-scrollbar {
  width: 1px; /* Largura da barra de rolagem */
}

  .form-control {
    @apply pb-3;
  }

  .form-control label {
    transition: all .4s ease;
  }

  .form-control label {
    @apply text-darkGray pl-1 left-3 focus:-top-2.5 text-xs;
  }

  .form-control input {
    @apply pt-4 border-[#E0E0E0];
  }

  input {
    @apply input input-ghost text-xs max-w-xs w-full focus:outline-none focus:border-lightPink focus:ring-lightPink bg-lightGray placeholder-darkGray;
  }

  select {
    @apply select select-ghost w-full max-w-xs font-normal text-xs focus:outline-none focus:border-lightPink  focus:ring-lightPink bg-lightGray text-darkGray ;
  }

/* Formulário MSR - Triagem
/* Estilização dos checkboxes */
.custom-checkbox label {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 15px;
  text-align: left;
  max-width: 400px;
  min-width: 300px;
  cursor: pointer;

  @media (min-width: 640px) { /* para telas maiores */
    max-width: 350px;
  }

  @media (min-width: 800px) { /* Largura mínima para telas maiores */
    min-width: 300px;
  }

  @media (min-width: 811px) { /* Largura mínima para telas maiores */
    min-width: 400px;
  }
}

#id_3-agree{
  max-width: 1.5rem;
}

#id_3-agree:checked {
  background-color: #EBE5EF;
  accent-color: #622565;
}

.custom-checkbox input[type="checkbox"] {
    display: none; /* Oculta os checkboxes padrão */
}

/* Estilização dos checkboxes quando selecionados */
.custom-checkbox label.selected {
    background-color: #EBE5EF;
    border: 1px solid #EBE5EF;
}
.custom-checkbox input[type="checkbox"]:checked + label::before {
    background-color: #EBE5EF;
    max-width: 200px;
}

/* Estilização dos radiobuttons */
.custom-radio input[type="radio"] {
  display: none;
}

/* Estilização dos radiobuttons quando selecionados */
.custom-radio input[type="radio"]:checked + label::before {
  background-color: #EBE5EF;
  max-width: 200px;
}

.custom-radio label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 15px;
  text-align: left;
  max-width: 400px;
  min-width: 300px;
  cursor: pointer;

  @media (min-width: 640px) {
      max-width: 350px;
  }

  @media (min-width: 800px) {
      min-width: 300px;
  }

  @media (min-width: 811px) {
      min-width: 400px;
  }
}

.custom-radio label.selected {
  background-color: #EBE5EF;
  border: 1px solid #EBE5EF;
}

/* Radiobutton do form de registro */
input[id^="id_already_served_"]{
  width: 7%;
}


#id_already_served > li:nth-child(1){
  display: flex;
  align-items: center;
  justify-content: center;
}


.radio-input label{
  display: none;
}


@layer utilities {
  .animate-spin {
    animation: spin 2s linear infinite;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
}