:root {

   /* Colors */

   --main-color: #6E76C5;
   --main-color-2: #8189D8;
   --foreground: #F5F6FA;
   --main-foreground: #F1F4F9;
   --dark-color: #37383E;
   --login-gradient: linear-gradient(250.57deg, #8189D8 11.52%, #96B675 86.85%);
   --error-color: #D83732;
   --success-color: #85B455;

   --border-input-color: #dbdbdc;

   /* Badges colors */
   --badge-pending: #6F748033;
   --badge-verifying: #C4B75033;
   --badge-completed: #81BCD84D;
   --badge-rejected: #D8373233;
   --badge-reciept-sent: #8189D84D;
   --badge-finished: #96B6754D;
   --badge-returned: #6F748033;


   /* Radius */

   --rounded-sm: 0.8rem;
   --rounded-md: 1.6rem;
   --rounded-lg: 2.4rem;
   --rounded-xl: 3.4rem;


   /* Shadow */

   --shadow-lg: 8px 8px 56px 0px rgba(0, 0, 0, 0.08);

}



@font-face {

   font-family: 'Metropolis-Regular';
   src: url('../fonts/Metropolis-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;

}



@font-face {

   font-family: 'Metropolis-Medium';
   src: url('../fonts/Metropolis-Medium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;

}



@font-face {

   font-family: 'Metropolis-Semibold';

   src: url('../fonts/Metropolis-SemiBold.woff') format('woff');

   font-weight: 600;

   font-style: normal;

   font-display: swap;

}



@font-face {

   font-family: 'Metropolis-Bold';

   src: url('../fonts/Metropolis-Bold.woff') format('woff');

   font-weight: 700;

   font-style: normal;

   font-display: swap;

}



* {

   box-sizing: border-box;

   margin: 0;

   padding: 0;

}



html {
   font-size: 62.5%;
   font-family: 'Metropolis-Regular';
   color: var(--dark-color);
   overflow-x: hidden;
   margin: 0;
   padding: 0;
   height: 100%;
}

input,
select {
   font-family: 'Metropolis-Regular' !important;
   font-size: 1.6rem;
}



body {
   font-family: 'Metropolis', sans-serif;
   overflow-x: hidden;
   margin: 0;
   padding: 0;
}



h1,
h2,
h3,
h4 {

   font-family: 'Metropolis-Semibold';

}



h1 {

   font-size: 3.2rem;

}



h2 {

   font-size: 2.4rem;

}



label {

   font-size: 1.6rem;

   font-family: 'Metropolis-Regular';

}



a,
p {
   font-size: 1.6rem;
   font-family: 'Metropolis-Regular';
}


a {
   text-decoration: none;
   color: var(--dark-color);
}



li {
   list-style: none;
}



button {
   border: none;
   outline: none;
   background: none;
   cursor: pointer;
   font-size: 1.6rem;
}

button:not(.na-combobox__trigger):disabled {
   opacity: 0.6 !important;
   cursor: auto !important;
   background: #B1B2B3 !important;
   border: 1px solid #B1B2B3 !important;
   color: white !important;
}

button.pagination__button:disabled {
   opacity: 0.6 !important;
   cursor: auto !important;
   background: transparent !important;
   border: none !important;
   color: #37383E !important;
}

button:not(:disabled):active {
   transform: scale(0.98);
}

input {
   border: none;
   outline: none;
   padding: .8rem 1.6rem;
   font-size: 1.6rem;
}


.button {
   padding: 0.8rem 2.4rem;
   border-radius: var(--rounded-sm);
}

.header__button {
   border-radius: var(--rounded-sm);
}


.table__button {
   padding: 0.8rem 1.6rem;
   font-size: 1.4rem;
}


.button__primary {
   background-color: var(--main-color);
   color: white;
}


.button_disable,
.button__delete {
   background-color: var(--error-color);
   color: white;
}


.flex {
   display: flex;
}


.items-center {
   align-items: center !important;
}

.justify-between {
   justify-content: space-between !important;
}


.justify-center {
   justify-content: center !important;
}


.f-16 {
   font-size: 1.6rem !important;
}



.f-14 {

   font-size: 1.4rem !important;

}



.flex-1 {
   flex: 1;
}

.max-w-560 {
   max-width: 560px;
}





@media (width < 450px) {

   h1 {

      font-size: 2.8rem;

   }



   h2 {

      font-size: 2.1rem;

   }



   label {

      font-size: 1.4rem;

   }



}