@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');



@import "tailwindcss";
/* @import "tailwindcss" prefix(tw); */
@plugin "@tailwindcss/forms";

@theme {
  /* --breakpoint-sm-*: initial; */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --breakpoint-3xl: 1600px;
  
  --default-font-family: 'Open Sans', sans-serif;
  --font-family-roboto: 'Roboto', sans-serif;
  --color-theme: #169b62;
  --color-theme-black: #f1b434;
  --color-theme-orange: #f1b434;
  --color-theme-blue: #2c88e8;
  --color-theme-gray: #868686;
  --color-theme-blue: #0265ba;
  --color-theme-green: #046a38;
}

.without-ring {
  @apply focus:ring-0 focus:ring-offset-0;
}
.without-outline {
  @apply focus:outline-0 focus:outline-offset-0;
}

body{
  font-family: 'Lato', sans-serif;
}



.password-field.active .initially-shown{
  @apply !hidden;
}
.password-field.active .initially-hidden{
  @apply !flex;
}


input[type=checkbox]{position: relative;}
input[type=checkbox]:checked:after
{
  content: '';
    display: block;
    position: absolute;
    top: -2px;
    left: 2px;
    width: 8px;
    height: 16px;
    margin-left: 4px;
    border: solid #383737;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}