/*========== GOOGLE FONTS ==========*/
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

 /*========== VARIABLES CSS ==========*/
 :root {
   --header-height: 3.5rem;
   --nave-width: 219px;
 
   /*========== Colors ==========*/
   --first-color: #008EF2;
   --first-color-light: #F4F0FA;
   --title-color: #19181B;
   --text-color: #58555E;
   --text-color-light: #A5A1AA;
   --body-color: #F9F6FD;
   --container-color: #FFFFFF;
 
   /*========== Font and typography ==========*/
   --body-font: 'Poppins', sans-serif;
   --normal-font-size: .938rem;
   --small-font-size: .75rem;
   --smaller-font-size: .75rem;
 
   /*========== Font weight ==========*/
   --font-medium: 500;
   --font-semi-bold: 600;
 
   /*========== z index ==========*/
   --z-fixed: 100;
 }
 
 @media screen and (min-width: 1024px) {
   :root {
     --normal-font-size: 1rem;
     --small-font-size: .875rem;
     --smaller-font-size: .813rem;
   }
 }
 
 /*========== BASE ==========*/
 *, ::before, ::after {
   box-sizing: border-box;
 }
 
 body {
   margin: 0 0 0 0;
   padding: 1rem 1rem 0;
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   background-color: var(--body-color);
   color: var(--text-color);
 }
 
 h3 {
   margin: 0;
 }
 
 .a {
   text-decoration: none;
 }
 
 img {
   max-width: 100%;
   height: auto;
 }
 
 /*========== HEADER ==========*/
 .header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--container-color);
   box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1);
   padding: 0 1rem;
   z-index: var(--z-fixed);
 }
 
 .header__container {
  display: flex;
  height: var(--header-height);
  justify-content: space-between;
  flex-direction: row; /* Isso garante que os itens estejam alinhados horizontalmente */
}

 
 .header__img {
   width: 105px;
   height: 35px;
   border-radius: 50%;
 }
 
 .header__logo {
   color: var(--title-color);
   font-weight: var(--font-medium);
   display: none;
 }
 
 
 
 .header__input {
   width: 100%;
   border: none;
   outline: none;
   background-color: var(--first-color-light);
 }
 
 .header__input::placeholder {
   font-family: var(--body-font);
   color: var(--text-color);
 }
 
 .header__icon, 
 .header__toggle {
   font-size: 1.2rem;
 }
 
 .header__toggle {
   color: var(--title-color);
   cursor: pointer;
 }
 
 /*========== nave ==========*/
 .nave {
   position: fixed;
   top: 0;
   left: -100%;
   height: 100vh;
   padding: 1rem 1rem 0;
   background-color: var(--container-color);
   box-shadow: 1px 0 0 rgba(8, 12, 43, 0.1);
   z-index: var(--z-fixed);
   transition: .4s;
 }
 
 .nave__container {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding-bottom: 3rem;
   overflow: auto;
   scrollbar-width: none; /* For mozilla */
 }
 
 /* For Google Chrome and others */
 .nave__container::-webkit-scrollbar {
   display: none;
 }
 
 .nave__logo {
   font-weight: var(--font-semi-bold);
   margin-bottom: 2.5rem;
 }
 
 .nave__list, 
 .nave__items {
   display: grid;
 }
 
 .nave__list {
   row-gap: 2.5rem;
 }
 
 .nave__items {
   row-gap: 1.5rem;
 }
 
 .nave__subtitle {
   font-size: var(--normal-font-size);
   text-transform: uppercase;
   letter-spacing: .1rem;
   color: var(--text-color-light);
 }
 
 .nave__link {
   display: flex;
   align-items: center;
   color: var(--text-color);
 }
 
 .nave__link:hover {
   color: var(--first-color);
 }
 
 .nave__icon {
   font-size: 1.2rem;
   margin-right: .5rem;
 }
 
 .nave__name {
   font-size: var(--small-font-size);
   font-weight: var(--font-medium);
   white-space: nowrap;
 }
 
 .nave__logout {
   margin-top: 5rem;
 }
 
 /* Dropdown */
 .nave__dropdown {
   overflow: hidden;
   max-height: 35px;
   transition: .4s ease-in-out;
 }
 
 .nave__dropdown-collapse {
   background-color: rgb(229, 229, 229);
   border-radius: .25rem;
   margin-top: 1rem;
 }
 
 .nave__dropdown-content {
   display: grid;
   row-gap: .3rem;
   padding: .50rem 1.5rem .50rem 1.2rem;
 }
 
 .nave__dropdown-item {
   font-size: 12px;
   font-weight: var(--font-medium);
   color: var(--text-color);
 }
 
 .nave__dropdown-item:hover {
   color: var(--first-color);
 }
 
 .nave__dropdown-icon {
   margin-left: auto;
   transition: .4s;
 }
 
 /* Show dropdown collapse */
 .nave__dropdown:hover {
   max-height: 110rem;
 }
 
 /* Rotate icon arrow */
 .nave__dropdown:hover .nave__dropdown-icon {
   transform: rotate(180deg);
 }
 
 /*===== Show menu =====*/
 .show-menu {
   left: 0;
 }
 
 /*===== Active link =====*/
 .active {
   color: var(--first-color);
 }
 
 .a{
   text-decoration: none;
 }
 
 .hidden{
   display: none;
 }
 
 /* ========== MEDIA QUERIES ==========*/
 /* For small devices reduce search*/
 @media screen and (max-width: 320px) {
   .header__search {
     width: 70%;
   }
 }
 
 @media screen and (min-width: 768px) {
   body {
     padding: 1rem .25rem 0 6rem;
   }
   .header {
     padding: 0 1rem 0 6rem;
   }
   .header__container {
     height: calc(var(--header-height) + .5rem);
   }
   .fc-toolbar-title::first-letter {
    text-transform: uppercase; /* Transforma apenas a primeira letra para maiúscula */
    }
   .header__search {
     min-width: 300px;
     margin-left: 110px;
     padding: 10px;
     max-width: 1000px;
   }
   .header__toggle {
     display: none;
   }
   .header__logo {
     display: block;
   }
   .header__img {
     width: 40px;
     height: 40px;
     order: 1;
   }
   .nave {
     top: 0;
     left: 0;
     padding: 1.2rem 1.5rem 0;
     width: 68px; /* Reduced navebar */
   }
   .nave__items {
     row-gap: 1.7rem;
   }
   .nave__icon {
     font-size: 1.3rem;
   }
 
   /* Element opacity */
   .nave__logo-name, 
   .nave__name, 
   .nave__subtitle, 
   .nave__dropdown-icon {
     opacity: 0;
     transition: .3s;
   }
   
   
   /* navebar expanded */
   .nave:hover {
     width: var(--nave-width);
   }
   
   /* Visible elements */
   .nave:hover .nave__logo-name {
     opacity: 1;
   }
   .nave:hover .nave__subtitle {
     opacity: 1;
   }
   .nave:hover .nave__name {
     opacity: 1;
   }
   .nave:hover .nave__dropdown-icon {
     opacity: 1;
   }
 
   .show{
     display: block;
   }
}