.card-building-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 47px 18px;
  margin-top: 40px;
  justify-content: center;
  width: 100% !important;
}

.card-building {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
}

.image-building {
  width: 100%;
  height: 200px;
  /* object-fit: cover; */
}

.image-building-container {
  width: 300px;
  height: 200px;
  margin: 0 auto; 
  display: flex; 
  justify-content: center; 
}

.card-building-content {
  padding: 10px;
}

.h3-building {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 10px;
  text-align: center;
}

.p-building {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 10px;
  text-align: center;
}

.building-name {
  text-decoration: none;
  color: black;
}

.read-more {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 4px;
}

.read-more:hover {
  background-color: #0056b3;
}

.menu-building-container {
  position: absolute;
  /* top: 10px; */
  top: 210px;
  right: 10px;
}

.menu-building-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.dropdown-building-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.dropdown-building-menu.active {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: black;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

.delete-item {
  color: red;
}

/* CSS Session */
.body-session {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4; 
  color: #333; 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.required:after {
  content:" *"; 
  color: red;
}

.body-password-forgot {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4; 
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  margin: 0;
  justify-content: flex-start; 
  padding-top: 50px; 
}

.right-login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
}

.card-login {
  background-color: #f4f4f4; 
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 25px;
  max-width: 450px;
  width: 100%;
}

.h1-session {
  text-align: center;
  font-weight: bold;
  margin-bottom: 25px;
  color: #333; 
  font-size: 24px; 
}

.textfild {
  margin-bottom: 20px;
}

label {
  font-size: 16px;
  display: block;
  margin-bottom: 8px;
  color: #555; 
}

input[type="email"], input[type="password"] {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc; 
  border-radius: 8px;
  background-color: #f4f4f4;  
  box-sizing: border-box;
}

.btn-container {
  display: flex;
  justify-content: center; 
  margin-top: 20px;
  gap: 10px; 
}

.forgot-password {
  text-align: right;
  margin-bottom: 20px; /* Espaçamento para separar do botão "Entrar" */
}

.forgot-password a {
  color: #555; /* Cor do link igual à cor das labels */
  font-size: 14px; /* Tamanho de fonte menor para o link */
  text-decoration: none;
}

.link-forgot:hover {
  text-decoration: underline; /* Sublinhado no hover */
}

.btn {
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex: 1;
}

.btn-cadastre-se {
  background-color: #007bff; /* Azul para "Cadastre-se" */
  text-decoration: none;
  text-align: center;
}

.btn-entrar {
  background-color: #28a745; /* Verde para "Entrar" */
}

.btn:hover {
  opacity: 0.9; /* Efeito de hover mais sutil */
}

/* CSS Session Registration */
.body-registration {
  background-color: #f4f4f4; 
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.h1-registration {
  margin-top: 20px;
  text-align: center;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Inclui padding e border na largura total */
}

.button-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.button-container button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: #f4f4f4;
  font-size: 16px;
  cursor: pointer;
}

.button-back {
  background-color: #007bff; /* Azul */
}

#button-submit {
  background-color: #28a745; /* Verde */
  padding: 10px 20px;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  color: #f4f4f4;
  font-size: 16px;
  cursor: pointer;
}

.button-back:hover {
  background-color: #0056b3;
}

.button-submit:hover {
  background-color: #218838;
}

.link-back {
  text-decoration: none;
  color: #f4f4f4;
}

.link-back-registration {
  display: inline-block; /* Permite que o link tenha padding e margin */
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: #f4f4f4;
  font-size: 16px;
  background-color: #007bff; /* Azul */
  text-decoration: none; /* Remove o sublinhado */
  cursor: pointer;
}

.link-back-registration:hover {
  background-color: #0056b3; /* Efeito hover */
}
.form-container {
  margin-top: 30px;
  width: 100%;
  max-width: 600px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f4f4f4; 
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  /* font-weight: bold; */
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Inclui padding e border na largura total */
}

.button-container {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.button-container button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: #f4f4f4;
  font-size: 16px;
  cursor: pointer;
}

.button-back {
  background-color: #007bff; /* Azul */
}

#button-submit {
  background-color: #28a745; /* Verde */
  padding: 10px 20px;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  color: #f4f4f4;
  font-size: 16px;
  cursor: pointer;
}

.button-back:hover {
  background-color: #0056b3;
}

.button-submit:hover {
  background-color: #218838;
}

.link-back {
  text-decoration: none;
  color: #f4f4f4;
}

/*Errors messages */
.error-messages-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* Garante que a mensagem esteja sobre outros elementos */
  width: auto;
  max-width: 400px; /* Define um tamanho máximo para o contêiner */
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar a mensagem */
  background-color: #f8d7da; /* Fundo vermelho claro para erros */
  /* color: #721c24;  */
  color: #342323; /* Cor do texto para erros */
}

.error-messages-container h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.error-messages-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.error-messages-container li {
  margin-bottom: 5px;
}

.error-messages-container .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: #721c24;
  cursor: pointer;
}

.error-messages-container .close:hover {
  color: #491217;
}

.container-password {
  background-color: #f4f4f4;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  text-align: center;
  margin-top: 20px; 
}

label {
  display: block;
  margin-bottom: 10px;
  text-align: left;
  color: black
}

input[type="email"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 25px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.3px;
}

input[type="password-field"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 25px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.3px;
  -webkit-text-security: disc;
}

input[type="tel"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 25px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13.3px;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.buttons button {
  padding: 12px 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
}

.buttons .recover {
  background-color: #28a745;
  color: white;
  width: 60%;
}

.buttons .back {
  background-color: #003366;
  color: white;
  width: 40%;
}

/* Button back with link_to */
.styled-button {
  display: inline-block;
  padding: 12px 25px;
  background-color: #003366; 
  color: white; 
  text-align: center; 
  text-decoration: none; 
  border-radius: 4px; 
  cursor: pointer; 
  border: none; 
  width: 27.5%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Sombra do botão */
}
.content-wrapper {
  min-height: calc(100vh - 150px);
  padding-bottom: 10px;
}

#footer {
  height: 60px;
  text-align: center;
  padding: 20px 40px 40px 40px;
  background-color: #002249;
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#developer-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 5px;
}

#developer-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px; /* Espaço entre os desenvolvedores */
}

.developer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.developer img {
  width: 24px; /* Tamanho do ícone */
  height: 24px;
  margin-bottom: 5px; /* Espaço entre ícone e nome */
}

#footer-title {
  margin: 0;
  font-size: 20px;
  text-align: start;
  color: #ffffff;
  margin-top: 31px;
}

#copyright {
  font-size: 14px;
  margin-top: 10px;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

@page{
  /*
  This CSS highlights how page sizes and margin boxes are set.
  https://docraptor.com/documentation/article/1067959-size-dimensions-orientation

  Within the page margin boxes content from running elements is used instead of a 
  standard content string. The name which is passed in the element() function can
  be found in the CSS code below in a position property and is defined there by 
  the running() function.
  */
  size:A4;
  
  @top-left{
  	content:element(header);
  }
  
  @bottom-left{
  	content:element(footer);
  }
}

@page:first{
  /*
  This CSS highlights how the margin, background and page margin boxes are set 
  only for the first page of the PDF.
  
  As the first or cover page should not get the header and footer like all other
  pages, we set the content of these page margin boxes to empty.
  */
  margin:0;
  background-size:cover;
  
  @top-left{
    content:"";
  }
  
  @bottom-left{
    content:"";
  }
}

/* 
The body itself has no margin or padding.
Additionally the default font family, size and color for the document is defined
here.

For the entries in the timeline we also reset the CSS counter called "entries".
*/
.body-pdf{
  margin:0;
  padding:0;
  color: #303E48;
  font-family: 'Montserrat', sans-serif;
  font-size:10pt;
  counter-reset:entries;
}

/*
The links in the document should not be highlighted by an different color and underline
instead we use the color value inherit to get the current texts color.
*/
.a-pdf{
  color:inherit;
  text-decoration:none;
}

/*
The page header in our document uses the HTML HEADER element, we define a height 
of 2cm and a border on the bottom of half a millimeter.

As mentioned above in the comment for the @page the position property with the 
value running(header) makes this HTML element float into the top left page margin
box. This page margin box repeats on every page in case we would have a multi-page
proposal.
*/
#header-pdf{
  position:running(header);
  height:2cm;
  border-bottom:.5mm solid #CEC3BA;
  text-align: center;
  margin-top: 20px;
}

/*
Each chapter should start on a new page, for this we need to set the page-break-before property
to always.
*/
.chapter{
  page-break-before:always;
}

/*
The chapter headings should have a margin top of 1cm and the text should always be displayed uppercase.
*/
.chapter h1{
  margin-top:1cm;
  text-transform:uppercase;
}

/*
The table on the budget page should always be 100% wide and the borders should be 
collapsed. To give some space between the tables we add a margin top of 1.5cm.
*/
.chapter.budget table {
  width: 100%;
  border-collapse: collapse; /* Garante que as bordas sejam colapsadas */
  margin-top: 1.5cm;
}
/*
The first table should have a little less margin between table and highlighted paragraph.
*/
.chapter.budget table:first-of-type{
  margin-top:1cm;
}

/*
The headers of the budget table get a blue background color and the text is transformed
to uppercase.
*/
.chapter.budget table thead tr th {
  background-color: #1FC2DE;
  text-align: left;
  padding: 4mm 6mm;
  text-transform: uppercase;
  border: 0.125mm solid #CEC3BA; /* Adiciona uma borda, se necessário */
}

/*
The first cell in each content row should consum 90% of the tables width.
*/
.chapter.budget table tbody tr td:first-of-type{
  width:50%;
}

/*
All cells in the tables body have a padding of 6mm and a border on the bottom.
*/
.chapter.budget table tbody tr td{
  padding:6mm;
  border-bottom:0.125mm solid #CEC3BA;
}

/*
The footer for all content pages is set as running element which gets added to
the page margin boxes via the @page rule. 

The text is smaller than standard and the items in the footer (HR element and text)
are aligned.
*/
.footer-pdf{
  position:running(footer);
  font-size:8pt;
  text-transform:uppercase;
  color: #1FC2DE;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin: 10px 0;
}

/*
The HR HTML element in the footer should have a width of 45% and a 0.5mm solid blue line.
*/
.footer hr{
  width:45%;
  height:0;
  border:0;
  border-top:.5mm solid #1FC2DE;;
}

/*
The last link in the footer (the link to the website) needs to be bold.
*/
.footer a:last-of-type{
  font-weight:bold;
}

#start-date-pdf {
  padding: 8px 0 8px 2px;
  margin-bottom: 18px;
}

#end-date-pdf {
  padding: 8px 0 8px 2px;
  margin-bottom: 18px;
}

#label-start-date-pdf {
  margin-bottom: 2px;
}

#label-end-date-pdf {
  margin-bottom: 2px;
}

.button-pdf {
  background-color: #28a745; /* Verde */
  padding: 9px 18px;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  color: #f4f4f4;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  margin-left: 4px;
}

.page-break {
  page-break-before: always;
}
/* CSS New */
.body-reservation {
  font-family: Arial, sans-serif;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.h1-registration {
  text-align: center;
  margin-bottom: 30px; 
}

.h1-reservation {
  text-align: center;
}

h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

#p-reservation-name {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 17px;
}

#p-reservation {
  margin: 0;
  padding-top: 4px;
  padding-bottom: 35px;
}

.container {
  background-color:#f4f4f4;
  padding: 30px; 
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 600px;
  height: auto; 
}

label {
  display: block;
  margin-bottom: 10px; 
}

input[type="text"], input[type="date"], select {
  width: 96%;
  padding: 12px; 
  margin-bottom: 30px; 
  border: 1px solid #ccc;
  border-radius: 4px;
}

#reservation-start-date {
  min-width: 200px;
}

#reservation-end-date {
  min-width: 200px;
}

#justification_approve_form,
#justification_cancel_form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#button-submit-new-justification-approve,
#button-submit-new-justification-cancel {
  padding: 12px 25px;
  border: none;
  border-radius: 4px; 
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  width: 150px; 
  align-self: center;
  background-color: #28a745;
  color: #f4f4f4;
}

.checkbox-group {
  display: block;
  margin-bottom: 20px; 
}

.checkbox-group div {
  display: flex;
  align-items: baseline;
  /* align-items: center; */ 
  /* margin-bottom: 15px; */ 
}

.checkbox-group label {
  text-align: left;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 15px;  
}

label {
  margin-bottom: 10px;
  display: block;
}

select {
  width: 100%; 
  padding: 12px; 
  margin-bottom: 30px;
  border: 1px solid #ccc; 
  border-radius: 4px; 
}

.buttons-new {
  display: flex;
  justify-content: space-between;
}

.buttons-new a, /* Aplica o estilo tanto a links quanto a botões */
.buttons-new button,
.button-submit-new {
  padding: 12px 25px;
  border: none; /* Remove qualquer borda preta */
  border-radius: 4px; /* Arredonda os cantos */
  cursor: pointer;
  font-size: 16px;
  text-decoration: none; /* Remove o sublinhado dos links */
}

.back-new {
  background-color: #003366;
  color: white;
}
.back-delete {
  background-color: #a94442;
  color: white;
}

.button-submit-new {
  background-color: #28a745;
  color: #f4f4f4;
  border: none; /* Garante que o botão "Confirmar" não tenha borda */
  border-radius: 4px; /* Arredonda os cantos do botão */
}

/* Centralizar o calendário */
/* Container para o calendário */
.calendar-container {
  max-width: 1600px; /* Aumentar a largura máxima do calendário */
  margin: 0 auto; /* Centraliza o container horizontalmente */
  padding: 20px 20px 0px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Estilo básico para o título */
h2 {
  text-align: center;
  font-size: 24px; /* Aumenta o tamanho da fonte do título */
  margin-bottom: 20px; /* Aumenta o espaço abaixo do título */
}

/* Estilo do calendário */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  background-color: #f1f3f4;
  color: #202124;
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  font-size: 16px; /* Tamanho da fonte dos cabeçalhos */
}

td {
  vertical-align: top;
  padding: 12px; /* Padding das células */
  border: 1px solid #ddd;
  height: 110px; /* Ajuste a altura das células aqui */
  position: relative;
}

.day {
  user-select: none; /* Desativa a seleção de texto */
  -webkit-user-select: none; /* Para navegadores WebKit */
  -moz-user-select: none; /* Para navegadores Firefox */
  /* background-color: #ffffff; */
  border-radius: 4px;
  transition: background-color 0.3s;
  position: relative; /* Adiciona posição relativa */
  height: 100px; /* Defina uma altura fixa para o dia */
}

.day:hover {
  background-color: #f1f3f4;
}

.day strong {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  font-size: 16px; /* Tamanho da fonte dos dias */
}

.day.highlight {
  background-color: #c8ccce; /* ou qualquer cor que você preferir */
  color: inherit;
}

.calendar-legend {
  margin-top:5px;
  display: flex;
  gap: 15px;
}

.legend-available {
  background-color: #81D87F;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #000000;
  padding: 5px 10px;
  border-radius: 5px;
}

.legend-reserved {
  background-color: #a1a1a1;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #000000;;
  padding: 5px 10px;
  border-radius: 5px;
}

/* Cores para cada turno */
.reservation-shift-morning,
.reservation-shift-afternoon,
.reservation-shift-evening,
.reservation-shift-morning.pending
.reservation-shift-afternoon.pending
.reservation-shift-evening.pending {
  position: absolute; /* Posiciona os turnos de forma absoluta */
  background-color: inherit; /* Mantém a cor específica de cada turno */
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #000000; /* Cor do texto */
  margin-top: 5px; /* Espaçamento entre turnos */
  padding: 6px; /* Espaçamento interno */
  border-radius: 3px; /* Bordas arredondadas */
  font-size: 14px; /* Tamanho da fonte */
  cursor: pointer;
  display: flex; /* Centraliza o texto verticalmente */
  align-items: center; /* Alinha verticalmente o texto */
  height: 12px;
  width: calc(100% - 20px); /* Largura total menos margem */
}

.reservation-shift-morning.pending {
  background-color: #a1a1a1; /* Cor de destaque para pendentes */
}

.reservation-shift-afternoon.pending {
  background-color: #a1a1a1; /* Cor de destaque para pendentes */
}

.reservation-shift-evening.pending {
  background-color: #a1a1a1; /* Cor de destaque para pendentes */
}

.reservation-shift-morning {
  background-color: #81D87F;
  top: 17px; 
}

.reservation-shift-afternoon {
  background-color: #81D87F;
  /* background-color: #6F83AD; */
  top: 47px;
}

.reservation-shift-evening {
  background-color: #81D87F;
  /* background-color: #D78C70; */
  top: 77px; 
}

td.day.prev-month {
  background-color: #f1f1f1;
  color: #9e9e9e;
}

td.day.future.next-month {
  background-color: #f1f1f1;
  color: #9e9e9e;
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
  .calendar-container {
    max-width: 95%; /* Ajuste para dispositivos menores */
    padding: 10px;
    margin-left: 10px; /* Margem ajustada para telas menores */
    margin-right: 10px; /* Margem ajustada para telas menores */
  }

  td {
    height: 100px; /* Ajuste a altura para dispositivos menores */
  }

  .reservation {
    font-size: 12px; /* Ajuste o tamanho da fonte para dispositivos menores */
  }
}
@import "simple_calendar";

.calendar-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 20px;
}

.calendar-heading nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Para ocupar toda a largura disponível */
}

.calendar-navigation {
  display: flex;
  align-items: center;
}

.calendar-title {
  color: black;
  font-family: Arial, sans-serif;
  font-weight: bold;
  margin: 0 15px;
  font-size: 20px;
}

.calendar-header {
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
  font-size: 24px;
  align-self: center;
}

.calendar-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button-reserve,
.button-today {
  background-color: #7e7e7e;
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  height: 40px; /* Altura fixa */
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  font-size: large;
  border: none;
  cursor: pointer;
}

.icon-plus {
  margin-left: 8px;
  height: 32px;
}

.link-to {
  text-decoration: none;
  color: #000000;
}

.icone-back-calendar {
  margin-top: 10px;
  margin-bottom: 0;
  width: 40px;
  height: 40px;
}

/* Container do botão e do menu */
[data-controller="history"] {
  position: relative;
}

/* Estilo do menu de filtros */
.filter-options {
  display: none;
  position: absolute;
  top: 50px; /* Alinha o topo do menu com o topo do botão */
  left: 5px; /* Posiciona o menu à direita do botão */
  margin-left: 10px; /* Espaçamento entre o botão e o menu */
  z-index: 10;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.filter-options.active {
  display: block; /* Mostra o menu quando a classe active é adicionada */
}

/*CSS para passar o mouse sobre o turno e exibir as informações */
.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.875rem;
  white-space: nowrap;
  z-index: 1000;
  display: none; /* Oculta inicialmente */
  pointer-events: none; /* Garante que não interfira no mouse */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Estilos gerais */
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#h4-space {
  margin-top: 12px;
  margin-bottom: 5px;
}
/* Container geral */
.container-space {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Barra de pesquisa */
.search-bar {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  position: relative;
}
.search-form {
  width: 100%;
}

.search-bar #search-input {
  width: 100%;
  padding: 10px 45px 10px 20px;
  border-radius: 25px;
  border: 1px solid #ccc;
  font-size: 16px;
  margin: 0;
  box-sizing: border-box;
}

.icons-container {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.icons-container label,
.icons-container button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  margin: 0;
}

.icons-container img {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

.filter-checkbox {
  display: none;
}

.filters {
  display: none;
  position: absolute;
  top: 60px;
  right: 10px;
  width: 260px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 100;
}

.filter-checkbox:checked + .icons-container + .filters {
  display: block;
}

.filters h4 {
  margin-top: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.filters label {
  display: block;
  margin-bottom: 10px; 
  margin-top: 6px;
}

.filters input[type="checkbox"] {
  margin-left: 2px;
}

/* Grade de Espaços */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 47px 18px;
  margin-top: 40px;
  justify-content: center;
  width: 100% !important;
}

.space-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #d9d9d9;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  position: relative; /* Para o uso do position: absolute no grupo de ícones */
  height: 94%;
}
.space-item.disabled {
  background-color: #ce7e7e; 
  color: #a0a0a0;
}

.space-item.disabled:hover {
  background-color: #c57c7c;
}

.space-item:hover {
  background-color: #cccccc;
}

.space-item .space-name {
  text-decoration: none;
  color: black;
}

.space-item .menu-container {
  position: absolute;
  top: 10px;
  right: 10px;
}

.menu-button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: black;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

.delete-item {
  color: red;
}

/* Responsividade */
@media (max-width: 768px) {
  .spaces-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filters {
    right: 20px;
  }
}

@media (max-width: 480px) {
  .spaces-grid {
    grid-template-columns: repeat(1, 1fr);
  }

  .filters {
    top: 120px;
    right: 10px;
  }

  .search-bar input {
    width: 80%;
  }
}

label {
  display: block;
  margin: 0 0 9px;
  font-weight: bold;
}

input[type="text"], input[type="number"], input[type="file"] {
  width: 100%;
  padding: 10px;
  margin: 0 0 25px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#number-search {
  margin: 0;
  max-width: 70px;
}

/* Cadastrar Space */
.checkbox-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.checkbox-group div {
  text-align: center;
  display: block;
  unicode-bidi: isolate;
}

.checkbox-group label {
  display: block;
  text-align: center;
  margin-bottom: 5px;
}

#reservation_form label{
  margin-bottom: 10px;
}

.button-container-space {
  display: flex;
  justify-content: flex-end; /* Alinha o botão à direita */
  margin-top: 10px; /* Ajuste a margem conforme necessário */
}

.submit-tag {
  background-color: #28a745; /* Cor de fundo verde */
  color: rgb(0, 0, 0); /* Cor do texto */
  border: none;
  padding: 7px 13px; /* Espaçamento interno */
  border-radius: 5px; /* Borda arredondada */
  font-size: 16px; /* Tamanho da fonte */
  cursor: pointer; /* Muda o cursor para pointer */
  transition: background-color 0.3s; /* Transição suave */
}

.submit-tag:hover {
  background-color: darkgreen; /* Cor ao passar o mouse */
}

#span-space {
  margin-right: 10px;
  color: #002249;
  font-size: 15px;
  font-weight: bold;
}

.button-toggle-status {
  background-color: white;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.flex-item-reservation {
  margin-right: 20px;
}

/* Pending reservations */
.pending-list {
  width: 100%;
  font-family: Arial, sans-serif;
  background-color: #f0eaea;
}

.pending-row {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px; /* Espaço entre os itens */
  border-radius: 8px; /* Borda arredondada para os itens */
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra */
}

.pending-row.header {
  font-weight: bold;
  color: #000000;
  background-color: transparent; /* Sem sombra e background para o cabeçalho */
  margin-bottom: 0; /* Remove o espaçamento do cabeçalho */
  box-shadow: none;
}

.pending-column {
  padding: 5px;
}

.pending-column.pending {
  display: flex;
  align-items: center;
  width: 30%;
}

.pending-column.start-date,
.pending-column.end-date,
.pending-column.booking-information,
.pending-column.status {
  width: 15%;
  text-align: center;
}

.pending-column.actions {
  width: 10%;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.pending-info .name {
  font-weight: bold;
  margin: 0;
}

.pending-info .booking-information {
  font-size: 0.9em;
  color: #777;
  margin: 0;
}

.status-label {
  padding: 3px 8px;
  border-radius: 4px;
  color: white;
  font-size: 0.9em;
}

.status-label.inactive { background-color: #6c757d; }
.status-label.active { background-color: #28a745; }
.status-label.pending { background-color: #ffc107; }

.bt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #6c757d;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.bt.edit { background-color: #17a2b8; }
.bt.delete { background-color: #dc3545; }

.icone-cancel {
  text-align: center;
}

.details-space-group {
  flex: 1; 
  display: flex;
  flex-direction: column;
  gap: 8px;    
}

.icon-space-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  position: absolute;
  bottom: 10px; 
  left: 50%;
  transform: translateX(-50%); 
  /* min-height: 40px; */
}

.icon-space {
  width: 30px;
  height: 30px;
}

.toggle-checkbox {
  display: none; 
}

.menu {
  display: none; 
}

.toggle-checkbox:checked + .menu {
  display: block; 
}

/* Container do botão e do menu */
[data-controller="history-filter"] {
  position: relative;
}

/* Estilo do menu de filtros */
.history-filter-options {
  display: none;
  position: absolute;
  top: 50px; /* Alinha o topo do menu com o topo do botão */
  right: 5px; /* Posiciona o menu à direita do botão */
  margin-left: 10px; /* Espaçamento entre o botão e o menu */
  z-index: 10;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.history-filter-options.active {
  display: block; /* Mostra o menu quando a classe active é adicionada */
}
/* Modal Overlay: fundo escurecido */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal Content: centralizado e estilizado */
.modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
  width: 80%;
  max-width: 660px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease both;
}

.combobox-container {
  max-height: 200px; 
  overflow-y: auto;  
}

/* Header do Modal */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Animação de fadeIn */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Botão de Fechar o Modal */
.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  cursor: pointer;
  position: absolute;
  top: 45px;
  right: 30px;
}

.modal-close:hover {
  color: #ff0000; 
}
/*



 */

*{
  font-family: Arial, sans-serif;
}

.hw-combobox,
.hw-combobox__main__wrapper {
  width: 100% !important;
  margin-bottom: 35px;

}
#reservation_user_id {
  margin: 0;
  width: 100% !important;
  padding: 8px;
}

.flash-message {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000; /* Garante que a mensagem esteja sobre outros elementos */
  width: auto;
  min-width: 250px; /* Define um tamanho mínimo para o alerta */
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destacar a mensagem */
}

.flash-message .alert {
  padding-right: 35px; /* Espaço para o botão de fechar */
}

.flash-message .close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #000;
  font-size: 20px;
}

.alert-notice {
  background-color: #dff0d8;
  color: #3c763d;
}

.alert-alert {
  background-color: #f2dede;
  color: #a94442;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
}

/* Header */
header {
  width: 100%;
  background-color: #002249;
  color: white;
  margin: 0px 0px 5px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo-container {
  display: flex;
  align-items: center;
}

header img.logo {
  height: 70px;
  margin: 10px 20px 15px 60px;
}

/* Centralizar o formulário de login */
.login-form-container {
  margin: 0 auto;
  text-align: center;
}

.login-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espaço entre os campos */
}

.form-group-inline {
  display: flex;
  align-items: center;
}

.form-control-inline {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

#email-inline {
  margin-bottom: 22px;
}

#password-inline {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.button-space-inline {
  background-color: #002249;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.button-space-inline:hover {
  background-color: #004080;
}

.forgot-password-link-inline {
  font-size: 0.9em;
  /* color: #007bff; */
  color: white;
  text-decoration: none;
  margin-left: 10px;
}

.forgot-password-link-inline:hover {
  text-decoration: underline;
}

header .logo-container {
  display: flex;
  align-items: center;
}

header .login-form-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 20px;
}

header .button-space {
  margin-left: 10px; 
}

#link-back-off-icon-profile {
  margin-right: 80px; 
}

.form-group-inline-button {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group-inline-button-login {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

#buton-entrar {
  font-size: 15px;
}

#link-back-default {
  margin-left: 1290.280px
}

/* Perfil */
.profile-container {
  position: relative;
  display: flex;
  align-items: center;
}

.profile-container img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  margin: 15px 60px 10px 20px;
}

.profile-container input[type="checkbox"] {
  display: none;
}

.profile-container label img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}

.profile-card {
  display: none;
  position: absolute;
  top: 60px;
  right: 60px;
  width: 220px;
  background-color: #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 100;
}

.profile-container input[type="checkbox"]:checked + label + .profile-card {
  display: block;
}

.profile-header {
  padding: 1px;
  border-bottom: 1px solid #000;
  text-align: center;
}

.profile-header h3 {
  margin: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.profile-header p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.profile-card ul {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.profile-card ul li {
  margin: 10px;
  margin-right: 5px;
}

.profile-card ul li a {
  text-decoration: none;
  color: #002249;
  font-size: 14px;
}

.profile-card ul li a:hover {
  color: #0066cc;
}

/* Estilo do switch */
.switch-container {
  display: flex;
  align-items: center;
}

.switch-container span {
  margin-right: 0px; /* Espaço entre o texto e o switch */
  white-space: nowrap; /* Evitar quebra de linha no texto */
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  margin: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2.5px;
  background-color: #f4f4f4;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(25px);
}

#span-name {
  margin-right: 10px;
  color: #002249;
  font-size: 15px;
}

.button-space {
  background-color: #f4f4f4;
  color: black;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  height: 40px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: bold;
  font-size: large;
  border: none;
  cursor: pointer;
  margin-left: auto; 
}

#button-reservation-pending {
  margin-left: 1078.220px;
}

/* Mensagens de erro em um campo */
.field-errors {
  margin-top: 0.25rem; /* Espaço entre o campo e as mensagens */
  color: #e63946; 
  font-size: 0.875rem; 
  font-weight: 500; 
}

/* Texto individual de erro */
.error-message {
  display: block; /* Cada mensagem em uma nova linha */
  margin: 0.15rem 0; /* Espaço entre mensagens de erro */
}

/* Campos com erro: borda vermelha */
.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
  border: 1px solid #e63946 !important; /* Borda vermelha */
  border-radius: 5px; 
  outline: none; /* Remove o foco padrão do navegador */
}

/* Campo com erro no foco */
.field_with_errors input:focus,
.field_with_errors textarea:focus,
.field_with_errors select:focus {
  box-shadow: 0 0 5px rgba(230, 57, 70, 0.5); /* Destaque com sombra */
  border-color: #d62839; /* Borda mais intensa ao focar */
}
:root {
  --hw-active-bg-color: #F3F4F6;
  --hw-border-color: #D1D5DB;
  --hw-group-color: #57595C;
  --hw-group-bg-color: #FFFFFF;
  --hw-invalid-color: #EF4444;
  --hw-dialog-label-color: #1D1D1D;
  --hw-focus-color: #2563EB;
  --hw-option-bg-color: #FFFFFF;

  --hw-border-radius: 0.375rem;
  --hw-border-width--slim: 1px;
  --hw-border-width--thick: 2px;

  --hw-combobox-width: 10rem;
  --hw-combobox-width--multiple: 30rem;

  --hw-dialog-font-size: 1.25rem;
  --hw-dialog-input-height: 2.5rem;
  --hw-dialog-label-alignment: center;
  --hw-dialog-label-padding: 0.5rem 0 0.375rem;
  --hw-dialog-label-size: 1.05rem;
  --hw-dialog-listbox-margin: 1.25rem 0 0;
  --hw-dialog-padding: 1rem 1rem 0;
  --hw-dialog-top-offset: 4rem;

  --hw-font-size: 1rem;

  --hw-handle-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  --hw-handle-image--queried: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
  --hw-handle-offset-right: 0.375rem;
  --hw-handle-width: 1.5rem;
  --hw-handle-width--queried: 1rem;

  --hw-line-height: 1.5rem;
  --hw-line-height--multiple: 2.125rem;

  --hw-listbox-height: calc(var(--hw-line-height) * 10);
  --hw-listbox-z-index: 10;

  --hw-padding--slimmer: 0.25rem;
  --hw-padding--slim: 0.375rem;
  --hw-padding--thick: 0.75rem;

  --hw-selection-chip-font-size: 0.875rem;

  --hw-visual-viewport-height: 100vh;
}

.hw-combobox {
  border-width: 0;
  display: inline-flex;
  flex-direction: column;
  font-size: var(--hw-font-size);
  gap: var(--hw-padding--slim);
  margin: 0;
  padding: 0;
  position: relative;

  &, * {
    box-sizing: border-box;
  }
}

.hw-combobox__main__wrapper {
  border: var(--hw-border-width--slim) solid var(--hw-border-color);
  border-radius: var(--hw-border-radius);
  padding: var(--hw-padding--slim) calc(var(--hw-handle-width) + var(--hw-padding--slimmer)) var(--hw-padding--slim) var(--hw-padding--thick);
  position: relative;
  width: var(--hw-combobox-width);

  &:focus-within {
    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-focus-color);
  }

  &:has(.hw-combobox__input--invalid) {
    box-shadow: 0 0 0 var(--hw-border-width--thick) var(--hw-invalid-color);
  }
}

.hw-combobox__input {
  border: none;
  font-size: inherit;
  line-height: var(--hw-line-height);
  min-width: 0;
  padding: 0;
  text-overflow: ellipsis;
  width: 100%;
}

.hw-combobox__input:focus,
.hw-combobox__input:focus-visible,
.hw-combobox__input:focus-within {
  box-shadow: none;
  outline: none;
}

.hw-combobox__handle {
  height: 100%;
  position: absolute;
  right: var(--hw-handle-offset-right);
  top: 0;
  width: var(--hw-handle-width);
}

.hw-combobox__handle::before {
  background-image: var(--hw-handle-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--hw-handle-width);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.hw-combobox__input[data-queried] + .hw-combobox__handle::before {
  background-image: var(--hw-handle-image--queried);
  background-size: var(--hw-handle-width--queried);
}

.hw-combobox__listbox {
  border-color: transparent;
  border-radius: var(--hw-border-radius);
  border-style: solid;
  border-width: var(--hw-border-width--slim);
  left: 0;
  line-height: var(--hw-line-height);
  list-style: none;
  margin: 0;
  max-height: var(--hw-listbox-height);
  overflow: auto;
  padding: 0;
  position: absolute;
  top: calc(100% + 0.2rem);
  width: 100%;
  z-index: var(--hw-listbox-z-index);

  &:has([role="option"]:not([hidden])) {
    border-color: var(--hw-border-color);
  }
}

.hw-combobox__group {
  display: none;
  padding: 0;
}

.hw-combobox__group__label {
  background-color: var(--hw-group-bg-color);
  color: var(--hw-group-color);
  padding: var(--hw-padding--slim);
}

.hw-combobox__group:has(.hw-combobox__option:not([hidden])) {
  display: block;
}

.hw-combobox__option {
  background-color: var(--hw-option-bg-color);
  padding: var(--hw-padding--slim) var(--hw-padding--thick);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-combobox__option--blank {
  border-bottom: var(--hw-border-width--slim) solid var(--hw-border-color);
}

.hw-combobox__option:hover,
.hw-combobox__option--navigated,
.hw-combobox__option--selected {
  background-color: var(--hw-active-bg-color);
}

.hw-combobox__dialog__wrapper {
  display: none;
  height: 100vh;
  inset-inline-start: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;

  &:has([open]) {
    display: flex;
  }
}

.hw-combobox__dialog {
  border: 0;
  font-size: var(--hw-dialog-font-size);
  height: auto;
  margin: 0;
  max-height: calc(var(--hw-visual-viewport-height) - var(--hw-dialog-top-offset));
  max-width: none;
  overflow: hidden;
  padding: var(--hw-dialog-padding);
  pointer-events: auto;
  position: absolute;
  top: var(--hw-dialog-top-offset);
  width: auto;

  &[open] {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  &::backdrop {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, white 50%);
  }
}

.hw-combobox__dialog__label {
  align-self: var(--hw-dialog-label-alignment);
  color: var(--hw-dialog-label-color);
  font-size: var(--hw-dialog-label-size);
  padding: var(--hw-dialog-label-padding);
}

.hw-combobox__dialog__input {
  border: var(--hw-border-width--slim) solid var(--hw-border-color);
  border-radius: var(--hw-border-radius);
  font-size: inherit;
  height: var(--hw-dialog-input-height);
  line-height: var(--hw-dialog-input-height);
  padding: var(--hw-padding--slim) var(--hw-padding--thick);
  text-overflow: ellipsis;
  width: 90%;
}

.hw-combobox__dialog__listbox {
  margin: var(--hw-dialog-listbox-margin);
  overflow: auto;
  padding: 0;
  width: 100%;

  [role="option"] {
    border-radius: var(--hw-border-radius);
    padding: var(--hw-padding--thick);
  }
}

.hw-combobox__chip {
  align-items: center;
  border: var(--hw-border-width--slim) solid var(--hw-border-color);
  border-radius: var(--hw-border-radius);
  display: flex;
  font-size: var(--hw-selection-chip-font-size);
  line-height: var(--hw-line-height);
  padding: var(--hw-padding--slimmer);
  padding-left: var(--hw-padding--slim);
}

.hw-combobox__chip__remover {
  background-image: var(--hw-handle-image--queried);
  background-size: var(--hw-handle-width--queried);
  background-repeat: no-repeat;
  margin-left: var(--hw-padding--slimmer);
  min-height: var(--hw-handle-width--queried);
  min-width: var(--hw-handle-width--queried);
}

.hw-combobox--multiple {
  .hw-combobox__main__wrapper {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hw-padding--slimmer);
    width: var(--hw-combobox-width--multiple);

    &:has([data-hw-combobox-chip]) .hw-combobox__input::placeholder {
      color: transparent;
    }
  }

  .hw-combobox__input {
    min-width: calc(var(--hw-combobox-width) / 2);
    flex-grow: 1;
    line-height: var(--hw-line-height--multiple);
    max-width: 100%;
    width: 1rem;
  }
}

.hw_combobox__pagination__wrapper {
  background-color: var(--hw-option-bg-color);
}