@import "tailwindcss";

td {
    font-size: 11px !important;
}

.j-outer-container {
    display: none;
    width: 100%;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    transition: 2s;
    overflow-y: auto;
    overflow-x: hidden;

}

.j-outer-container .modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    border: 1px solid rgb(177, 176, 176);
    width: 60%;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: janimatetop;
    animation-duration: .4s;
    position: relative; 
    overflow: auto;
}

@keyframes janimatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
  }
  
  @media screen and (max-width: 900px) {
    .j-outer-container .modal-content {
        width: 70%;
        margin: 15% auto;
    }
}

@media screen and (max-width: 500px) {
    .j-outer-container .modal-content {
        width: 80%;
    }
}

.cp{
    cursor: pointer;
}

.table-content {
  overflow-x: auto; /* Enable horizontal scroll if needed */
}

.transposed-table {
  display: grid;
  grid-template-columns: auto 1fr; /* Vertical header and data body */
  grid-gap: 10px; /* Adjust as needed */
}

.vertical-header {
  display: grid;
  grid-template-rows: repeat(9, auto); /* Number of rows in the header */
  writing-mode: vertical-rl; /* Rotate text vertically */
  text-align: center;
}

.data-body {
  display: grid;
  grid-template-columns: 1fr; /* Data body in a single column */
}

/* Optional: Style for better readability */
.transposed-table div {
  border: 1px solid #ccc;
  padding: 8px;
}

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


.search-box{
  width: fit-content;
  height: fit-content;
  position: relative;
}
.input-search{
  height: 50px;
  width: 50px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all .5s ease-in-out;
  background-color: #22a6b3;
  padding-right: 40px;
  color:#fff;
}
.input-search::placeholder{
  color:#64748b;
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
}
.btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color:#ffffff ;
  background-color:transparent;
  pointer-events: painted;  
}
.btn-search:focus ~ .input-search{
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
.input-search:focus{
  width: 300px;
  border-radius: 0px;
  background-color: transparent; 
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}

input.comp:comp + label::after {
    content: " *";
    color: red;
} 
.comp2 + label::after {
  content: "*";
  color: red; /* Optional: Customize the color of the asterisk */
  margin-left: 3px; /* Optional: Add spacing between the label text and the asterisk */
}
.comp3 + label::after {
  content: "*";
  color: red; /* Optional: Customize the color of the asterisk */
  margin-left: 3px; /* Optional: Add spacing between the label text and the asterisk */
}
.comppac + label::after {
  content: "*";
  color: red; /* Optional: Customize the color of the asterisk */
  margin-left: 3px; /* Optional: Add spacing between the label text and the asterisk */
}

.pr-only {
    display: none;
}

@media print {
    .pr-only {
        display: block;
    }
    
    main, body, html {
        background-color: white !important;
        color: black !important;
    }
}
/* HTML: <div class="loader"></div> */
/* .loader2 {
  width: calc(80px / cos(45deg));
  height: 14px;
  background: repeating-linear-gradient(-45deg,#55c548 0 15px,#0ea62200 0 20px) left/200% 100%;
  animation: l3 2s infinite linear;
}
@keyframes l3 {
    100% {background-position:right}
} */

/* Force all reset buttons to be red, prevent overrides (toned to theme) */
button[id*="reset"],
input[type="reset"],
.btn-reset {
  background-color: #9a4242 !important; /* red-400 */
  background-image: none !important; /* kill gradients from .btn */
  color: #ffffff !important;
}

button[id*="reset"]:hover,
input[type="reset"]:hover,
.btn-reset:hover {
  background-color: #ef4444 !important; /* red-500 */
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
}

button[id*="reset"]:disabled,
input[type="reset"]:disabled,
.btn-reset:disabled {
  background-color: #fecaca !important; /* red-200 */
  background-image: none !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Header icon buttons: unified look with backgrounds */
.icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: transparent; /* no background */
  color: #4b5563; /* gray-600 */
  transition: color 150ms ease;
}
.icon-btn:hover {
  color: #059669; /* emerald-600 */
}
.icon-btn:focus {
  outline: none; /* no ring */
}
.icon-btn .material-symbols-outlined,
.icon-btn .material-icons {
  font-size: 19px !important;
  line-height: 1;
}
.icon-btn--alert {
  background-color: transparent; /* no background */
  color: #b91c1c; /* red-700 */
}
.icon-btn--alert:hover {
  color: #991b1b; /* red-800 */
}