.sg-table-row-group td{
 --bs-table-bg: #aaaaaa;
 --bs-table-color-state: black;
 background-color: #aaaaaa;
 text-align:center;
 font-size:22px;
 font-family:Times New Roman;
 font-weight:bold;
 color: black;
}

.sg-table-row-name th{
 background-color: #aaaaaa;
 text-align:center;
 font-size:22px;
 font-family:Times New Roman;
 font-weight:bold;
 color: black;
}

.sg-table-row-exception td{
 background-color: red;
 color: white;
}

.sg-table-row-exception-ligth td{
 color: green;
}

.sg-table-head th{
 --bs-table-bg: #e9ecef;
}

.sg-table-head td{
 text-align: center;
}

.sg-table-cell-selection {
 width: 1%;
 white-space: nowrap;
}

.sg-tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}

.sg-tooltip .sg-tooltiptext {
 visibility: hidden;
 width: 140px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;
 opacity: 0;
 transition: opacity 0.3s;
}

.sg-tooltip .sg-tooltiptext::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
}

.sg-tooltip:hover .sg-tooltiptext {
 visibility: visible;
 opacity: 1;
}

.close {
 float: right;
 font-size: 1.5rem;
 font-weight: 700;
 line-height: 1;
 color: #000;
 text-shadow: 0 1px 0 #fff;
 opacity: 0.5;
}

.close:hover {
 color: #000;
 text-decoration: none;
 opacity: 0.75;
}

:root{
 --bs-info-rgb: 23, 162, 184;
 .btn-info{
  --bs-btn-color: #fff !important;
  --bs-btn-bg: #17A2B8;
  --bs-btn-border-color: #17A2B8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #138496;
  --bs-btn-hover-border-color: #138496;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #17A2B8;
  --bs-btn-disabled-border-color: #17A2B8;
 }
}

.magus-calendar-triplet{
 display: flex;
 justify-content: center;
 align-items: center;
}

.magus-calendar-days{
 padding: 0;
 margin: 0;
}

.magus-calendar-days li{
 list-style-type: none;
 display: inline-block;
 font-size: 12px;
 width:5%;
 text-align:center;
}

.magus-calendar-days li:hover{
 background:grey;
}

.magus-calendar-days li.calendar-something-happened{
 color: red;
}

.magus-calendar-days li.calendar-date-selected{
 background:yellow;
}

.magus-calendar-days li.calendar-date-selected:hover{
 background:skyblue;
}

.magus-selector-header p{
 margin-bottom: 0;
 margin-top: 1rem;
}

.magus-grid-item {
 padding: 1rem;
 border: 1px solid #dee2e6;
 background-color: #fff;
}

.magus-grid-title {
 font-weight: 600;
 background-color: #aaaaaa;
 padding: 0.75rem 1rem;
}

.magus-grid-header {
 font-weight: 600;
 background-color: #f8f9fa;
 padding: 0.75rem 1rem;
 border: 1px solid #dee2e6;
 border-bottom: 2px solid #dee2e6;
 display: flex;
 align-items: center;
}

.magus-grid-value {
 background-color: #ffff;
 padding: 0.75rem 1rem;
 border: 1px solid #dee2e6;
 border-top: none;
 display: flex;
 align-items: center;
 min-height: 4.5rem; /* Ensures consistent height */
}

.magus-grid-value input.form-control {
 padding: 0.75rem 1rem;
 border-radius: 0;
 height: 100%;
 width: 100%; /* Compensate for negative margin */
}

.magus-grid-value input.form-control:focus {
 box-shadow: inset 0 0 0 2px #0d6efd;
 outline: none;
}

/* Mobile view - stack vertically */
@media (max-width: 767px) {
 .magus-grid-header {
  border-bottom: 1px solid #dee2e6;
 }

 .magus-grid-value {
  border-top: 1px solid #dee2e6;
  margin-bottom: 1.5rem;
 }
}

/* Desktop view - align horizontally */
@media (min-width: 768px) {
 .magus-grid-header {
  border-right: none;
 }

 .magus-grid-header:last-child {
  border-right: 1px solid #dee2e6;
 }

 .magus-grid-value {
  border-right: none;
  border-top: none;
 }

 .magus-grid-value:last-child {
  border-right: 1px solid #dee2e6;
 }
}

.table-responsive-x {
 overflow-x: auto;
 overflow-y: visible;
 -webkit-overflow-scrolling: touch;
}

.sg-color-warning{
 color: #FF7205;
}

select {
 min-width: max-content;
}