/* CSS Document */

@font-face {
  font-family: "Swiss";
  src: url("font/Swiss.ttf");
  font-weight: normal;
  }

@font-face {
  font-family: "SwissLight";
  src: url("font/SwissLight.ttf");
}

@font-face {
  font-family: "SwissBold";
  src: url("font/SwissBold.ttf");
  font-weight: bold;
}
strong{
  font-family: "SwissBold", Arial, sans-serif;
}

html {
    min-height: 100%;
}
body {
  font-family: "Swiss", Arial, sans-serif; /* Fallback font */
  font-weight: 300;
  font-size: 1rem;
}
body {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@media print {
  body {
    opacity: 1 !important;
    animation: none !important;
  }
}

.fontLight{
  font-family: "SwissLight", Arial ;
}

* {
  box-sizing: border-box;
}
.nav-align{
  justify-content:center;
}

i {
  font-size:1.5rem;
  margin-right:5px;
}
ul {
  list-style-type: disc;
}
li {
  line-height: 1.5em;
}

.butColor {
    background-color: #8fb251;
    color: #FFFFFF;
}

div + label {
  font-weight: bold;
}
.card-header5 {
  background-color: #B43542;
  color: #FFFFFF;
}
.card-header30 {
  background-color: #E2971C;
  color: #FFFFFF;
}
.card-header100 {
  background-color: #5D9A4E;
  color: #FFFFFF;
}
.card-header {
  background-color: #667A95;
  color: #FFFFFF;
}

input[type='radio']{
    transform:scale(1.5);
    margin-top:5px;
    margin-left:10px;
    margin-right:10px;
}

h5 {
  background-color: hsla(53, 26%, 92%, 0.45);
  padding: 8px;
}

h4.summary {
  background-color: hsla(0, 0%, 73%, 0.45);
  padding: 8px;
}
a {
  text-decoration:none;
}
.tableTopic {
  font-weight: bold;
}
.page-item {
    font-style:italic;
  }
.questionText {
  font-weight: bold;
}

.page-item {
    font-style:italic;
  }
.form-check-inline{
    padding-top:5px;
    padding-bottom:2px;
  }

.card{
    padding:0px;
    margin:0px;
  }

.startBk {
    background: linear-gradient(to bottom, white, rgba(251, 238, 225, 1) 66%, white);
     margin-bottom:10px;
  }
  
.ownerBk {
  background: linear-gradient(to bottom, white, rgba(102, 122, 149, 0.60) 66%, white);
   margin-bottom:10px;
}

.leaderBk {
  background-image: linear-gradient(to bottom, white, rgba(109, 119, 91, 0.60) 66%, white);
  margin-bottom: 10px;
}

.coordinatorBk{
  background-image:linear-gradient(to bottom, white,rgba(119, 82, 82, 0.60) 66%, white);
  margin-bottom:10px;
}

.gmBack{
  background-image:linear-gradient(to bottom, white,rgba(162, 125, 76, 0.735) 66%, white);
  margin-bottom:10px;
}

.footerBk{
    background: linear-gradient(to top, transparent, rgba(23, 24, 25, 0.409) 70%);
margin-bottom:10px;
  }

.leaderBut{
  background-image:linear-gradient(rgba(255, 255, 255, 0),#959595,#6D775B);
  margin-bottom:10px;
  border: 0px;
}
.cardTx * {
    font-weight: 300;
  }

sup{
  color:red;
}
supBlack{
  color: black;
}
/* Custom CSS for nav-tabs */
.nav-link.active {
   font-weight: bold;
  font-size: 1rem;
}
.nav-tabs .nav-link {
    border: 1px solid #dee2e6;
    /* Light border */
    border-radius: 0.25rem;
    /* Optional: rounded corners */
    margin-right: 2em;
    /* gx-2 spacing */
}

.nav-tabs .nav-link:hover {
    background-color: rgba(230, 230, 230, 0.735);
    color: rgb(0, 0, 0) ;
    /* Hover response */
}

  /* Customize Bootstrap button using local CSS variables */
  .btn-custom {
    --bs-btn-border-width: 0px;
    --bs-btn-border-radius: 8px;
    --bs-btn-padding-x: 5px;
    --bs-btn-padding-y: 5px;
  

    border-width: var(--bs-btn-border-width);
    border-radius: var(--bs-btn-border-radius);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  }
  
  .page-break {
      page-break-after: always;
  }

@media print {
      .XXXno-print {
          display: none;
      }
  }
  
  /* mapping css */
#comMap {
      height: 60vh;
      width: 70vw;
  }
  
  .marker {
      width: 40px;
      height: 40px;
      background-color: rgb(148, 255, 0);
      border-radius: 50%;
      border: 2px solid white;
      opacity: 80%;
  }
  
  .markerNull {
      width: 30px;
      height: 30px;
      background-color: rgb(61, 82, 122);
      border-radius: 50%;
      border: 2px solid white;
      opacity: 60%;
  }
  .marker-success {
      width: 40px;
      height: 40px;
      background-color: rgb(148, 255, 0);
      border-radius: 50%;
      border: 2px solid white;
      opacity: 80%;
  }
  .marker-warning {
      width: 40px;
      height: 40px;
      background-color: rgb(255, 156, 0);
      border-radius: 50%;
      border: 2px solid white;
      opacity: 80%;
  }
.marker-danger {
      width: 40px;
      height: 40px;
      background-color: rgb(255, 61, 0);
      border-radius: 50%;
      border: 2px solid white;
      opacity: 80%;
  }
  .marker-dark {
      width: 30px;
      height: 30px;
      background-color: rgb(61, 82, 122);
      border-radius: 50%;
      border: 2px solid white;
      opacity: 60%;
  }
.disabled-readonly {
      background-color: #e9ecef !important; /* Matches Bootstrap's disabled background */
      opacity: 1; /* Ensure text is visible */
      cursor: not-allowed; /* Show disabled cursor */
      user-select: none; /* Prevent text selection */
  }