.my-alert {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: 90%;
  max-width: 500px;
}

input[type="checkbox"] {
  width: 25px;
  height: 25px;
  cursor: pointer;
  border-radius: 10px;
}

.alert-primary {
  background: rgb(220, 218, 243);
}

.alert-secondary {
  background: rgb(218, 232, 243);
}

.alert-success {
  background: rgb(218, 243, 218);
}

.alert-info {
  background: rgb(218, 243, 242);
}

.alert-warning {
  background: rgb(243, 240, 218);
}

.alert-danger {
  background: rgb(243, 222, 218);
}

.alert-light {
  background: rgb(255, 255, 255);
}

.alert-dark {
  background: rgb(179, 177, 177);
}


@media print {
  @page {
    size: A4 landscape; /* Force A4 landscape */
    margin: 10mm;
  }

  /* Force all bootstrap grid columns to use desktop layout */
  .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6,
  .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12,
  .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3,
  .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4 {
    float: left !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Example: force col-xl to always apply */
  .col-xl-3 { width: 25% !important; }
  .col-xl-4 { width: 33.3333% !important; }
  .col-xl-6 { width: 50% !important; }
  .col-xl-12 { width: 100% !important; }

  /* Make sure flex layouts don’t collapse */
  .row {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
}