@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

*{
  font-family: 'Noto Sans', sans-serif;
}

body{
	min-width: fit-content;
}

.avatar {
  display: inline-flex;
  gap: 0.3rem;
}

.avatar > j-vcenter:first-child > div:first-child{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: white;
  background-color: blue;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.page-link:hover{
  cursor: pointer;
  background-color: lightskyblue;
}

.custom-table {
  border-radius: 1rem !important; 
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid #cde;
  overflow: hidden;
  box-shadow: 0.3rem 0.3rem 0.2rem rgba(128, 128, 128, 0.5);
}
.custom-table td,
.custom-table th{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  vertical-align: middle;
  border: 1px solid #cde;
}
.custom-table thead th{
  background: dodgerblue !important;
  color: white;
}
.custom-table td:first-child,
.custom-table th:first-child{
  border-left: 0;
}
.custom-table td:last-child,
.custom-table th:last-child{
  border-right: 0;
}
.custom-table *:first-child tr:first-child *{
  border-top: 0;
}
.custom-table *:last-child tr:last-child *{
  border-bottom: 0;
}

.modal-dialog.filter label{
  text-align: right;
  font-weight: bold;
}
.filter-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e0e0e0;
  padding: 6px 12px;
  border: 1px solid dodgerblue;
  border-radius: 4px;
  font-size: 14px;
}
.filter-chip > span:first-child{
  cursor: pointer;
  flex: 1 1 0%;
}
.filter-chip > span:last-child{
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transform: scale(1.5);
}

#login-dialog{
  z-index: calc(var(--bs-modal-zindex) + 10);
}

#login-dialog~.modal-backdrop{
  z-index: calc(var(--bs-backdrop-zindex) + 10);	
}

.shadow-text{
  color: white;
  text-shadow: 0.1em 0.1em 0.1em black;
}

.modal-dark .modal-title,
.modal-dark .label-title{
  color: white;
  text-shadow: 0.1em 0.1em 0.1em black;
}

.modal-dark > *{
	background-color: rgba(16, 16, 32, 0.7);
}

.modal-dark .modal-footer{
	border: none;	
}

.modal-dark .modal-header{
	border: none;
	background-color: #666680;
	box-shadow: 0 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
}

.btn.b-light{
	box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.5);
}
.btn.over-dark:hover{
	filter: brightness(0.9);
}