@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '~@ng-select/ng-select/themes/default.theme.css';
@import 'partials/colors';
@import 'partials/buttons';
@import 'partials/icons';
@import 'partials/dialog';
@import 'partials/scrollbar';
@import 'partials/poppers';
@import 'partials/forms';
@import 'partials/select';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  @apply text-gray-800;
}

:root {
  --header-height: 64px;
}

/* Animate items as they're being sorted. */
.cdk-drop-list-dragging .cdk-drag {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

/* Animate an item that has been dropped. */
.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-placeholder:not(compito-task-list) {
  @apply rounded-md;
}

.task-list:hover:not(.cdk-drag-preview):not(.cdk-drag-dragging):not(.cdk-drop-list-dragging) {
  .list__drag {
    @apply opacity-100;
  }
}

.box {
  @apply mx-auto;
  @media only screen and (min-width: 960px) {
    max-width: 900px;
  }
  @media only screen and (min-width: 1440px) {
    max-width: 1400px;
    /* styles for browsers larger than 1440px; */
  }
  @media only screen and (min-width: 2000px) {
    max-width: 1600px;
    /* for sumo sized (mac) screens */
  }
}

.password-toggle {
  position: absolute;
  right: 10px;
  bottom: 27px;
}
