body {
  font-family:  'Source Sans Pro', Verdana, Arial, Helvetica, Tahoma, sans-serif;
  font-size: .75rem;
  height: 100%;
  margin: 3px;
}

a {
  color: darkblue;
  font-weight: bold;
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
}

.tmsmenu {
  color: rgb(0, 0, 0);
  height: 30px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
  border-radius: 2px;
  border: 2px solid #353535;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: #e7f7fe;
  border: 1px solid black;
  font-family:  'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.statbar {
  overflow: auto;
  background-color: rgb(201, 236, 248);
  border: 1px solid grey;
  font-size: 14px;
  font-weight: bold;
  display: flex;              /* Use flexbox for layout */
  justify-content: space-between; /* Distribute space between the two list items */
  padding: 0;
  margin: 0;
  list-style: none;           /* Remove default list styling */
  }
  
  ul.statbar li {
    display: inline;            /* Ensure list items are displayed inline */
  }
  
  ul.statbar .statmsg {
    text-align: left;           /* Left-align the first item */
  }
  
  ul.statbar .statinfo {
    text-align: right;          /* Right-align the second item */
  }
  

.debugbar {
  list-style-type: none;
  color: black;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(243, 230, 230);
  border: 1px dotted black;
  font-size: 12px;
}

.errorbar {
  list-style-type: none;
  color: white;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: red;
  border: 3px solid black;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}

.messagebar {
  list-style-type: none;
  color: white;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: rgb(54, 126, 54);
  border: 3px solid black;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}

.messagebar a {
  color: yellow;
  text-decoration: underline;
}

.messagebar a:hover {
  color: rgb(255, 106, 0);
}

.footer {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  background-color: lightblue;
  border: 1px solid grey;
}

.page:last-of-type {
  margin-bottom: -1px;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: black;
  font-weight: bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #c5ebfe;
  border: 2px solid darkblue;
}

li.dropdown {
  display: inline-block;
}

.badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.25em;
}

.badge-high {
  background: #dcfce7;
  color: #166534;
}

.badge-low {
  background: #ffedd5;
  color: #9a3412;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #e7f7fe;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
  border-radius: 2%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #b3e0ff;   
  font-size: 18px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.tms_header {
  border-style: solid;
  border-width: thin;
  border-color: silver;
}

.tms_input {
  color: blue;
  height: 28px;
  font-size: 20px;
  width: 90%;
  float: left;
  text-transform: uppercase;
  font-family:  monospace;
}

.tms_multiselect {
  color: blue;
  size: 6;
  font-size: 16px;
  width: 100%;
  float: left;
  text-transform: uppercase;
  font-family:  monospace;
}

.tms_multiselect option:checked {
  background-color: blue;
  color: white;
}

.tms_inputsmall{
  color: blue;
  height: 28px;
  font-size: 16px;
  width: 90%;
  float: left;
  text-transform: uppercase;
  font-family:  monospace;
}

.tms_textarea80{
  color: blue;
  height: 80px;
  font-size: 16px;
  width: 90%;
  float: left;
  text-transform: uppercase;
  font-family:  monospace;
}

.tms_textarea120{
  color: blue;
  height: 120px;
  font-size: 16px;
  width: 90%;
  float: left;
  text-transform: uppercase;
  font-family:  monospace;
}

.tms_label{
  height: 30px;
  font-size: 12px;
  float: right;
  font-weight: bold;  
  margin-top: 8px;
  font-family:  Verdana;
}

.tms_labelval{
  height:45px;
  font-size: 20px;
  float: left;
  color: blue;
  margin-left: 8px;
  text-transform: uppercase;
  font-family:  monospace;
}

.tms_readonly{
  color: blue;
  height: 30px;
  font-size: 12px;
  float: left;
  font-weight: bold;  
  margin-top: 8px;
  margin-left: 8px;
}

.tms_readonlyorange{
  color: orangered;
  height: 30px;
  font-size: 14px;
  float: left;
  font-weight: bold;  
  margin-top: 8px;
  margin-left: 8px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

table {
  background-color: #f9fbe7;
  border: black 1px;
  border-style: inset;
}

.no-border-background {
  background-color: transparent;
  border: 0px;
}

.tmsbutton {
  background-color: lightcyan; /* Green */
  border: 2px solid black;
  color: black;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  padding: 4px 18px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 20px; /* Increased to make it well-rounded */
  border-style: outset;
  transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
  font-weight: bold;
}

.tmsbutton:hover {
  background-color: #a6eaa8; /* Green */
  color: black;
}

.tmsbutton:active {
  background-color: #a6eaa8;
  transform: translateY(4px);
}

th {
  color: black;
  background: lightcyan;
}

h1 {
  margin: 0px 0px 0px 0px;   
  padding: 0px 0px 0px 0px;
}

h2 {
  color: crimson;
}

h4 {
  color: darkgreen;
}

#tmsrow:hover {
  background-color: peachpuff;
}

.boldred {
  color: crimson;
  font-weight: bold;
}

.boldblue {
  color: blue;
  font-weight: bold;
}

.boldpurple {
  font-family:  Verdana;
  color: darkred;
  font-weight: bold;
  font-size: 14px;
}

.login {
  width: 350px;
  background-color: #efffff;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);
  margin: 10% auto;
}

.receipt {
  width: 210mm;
  height: 150mm;
  background-color: #ffffff;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.3);
  margin: auto;
  border-style: outset;
  border:1px solid #000;
  position:relative;
}
.receipt-schm {
  font-size: 14px;
  font-family:  Tahoma, Geneva, Verdana, sans-serif;
}
.receipt-body {
  font-size: 14px;
  font-family:  Tahoma, Geneva, Verdana, sans-serif;
}
.receipt-schm-field {
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
  font-size: 24px;
  font-family:  Verdana, Geneva, Tahoma, sans-serif;
}
.receipt-ack-label {
  position:absolute;
  float: left;
  left: 300px;
  top: 170px;
  border-bottom:1px solid #000;
}
.receipt-number-label {
  position:absolute;
  float: left;
  left: 20px;
  top: 210px;
}
.receipt-number {
  position:absolute;
  float: left;
  left: 100px;
  top: 205px;
}
.receipt-date-label {
  position:absolute;
  float: left;
  left: 625px;
  top: 215px;
}
.receipt-date {
  position:absolute;
  float: left;
  left: 675px;
  top: 210px;
}
.receipt-donordet {
  position:absolute;
  float: left;
  left: 20px;
  top: 240px;
  text-transform: uppercase;
}
.receipt-amtdet-label {
  position:absolute;
  float: left;
  left: 20px;
  top: 295px;
}
.receipt-amtdet {
  position:absolute;
  float: left;
  left: 145px;
  top: 295px;
}
.receipt-type-label {
  position:absolute;
  float: left;
  left: 20px;
  top: 320px;
}
.receipt-type {
  position:absolute;
  float: left;
  left: 145px;
  top: 320px;
}
.receipt-paydet-label {
  position:absolute;
  float: left;
  left: 20px;
  top: 345px;
}
.receipt-paydet {
  position:absolute;
  float: left;
  left: 145px;
  top: 345px;
}
.receipt-schmdet-label {
  position:absolute;
  float: left;
  left: 20px;
  top: 370px;
}
.receipt-schmdet {
  position:absolute;
  float: left;
  left: 145px;
  top: 370px;
}
.receipt-amtnum {
  position:absolute;
  float: left;
  left: 20px;
  top: 450px;
  padding: 3px;
  border:2px solid black;
}
.receipt-digisign{
  position:absolute;
  float: left;
  left: 650px;
  top: 425px;
}
.receipt-authsign {
  position:absolute;
  float: left;
  left: 620px;
  top: 480px;
}
.receipt-footer {
  position:absolute;
  width: 100%;
  top: 500px;
  height: 36px;
  text-align: center;
  border-top:1px solid slategrey;
}
.receipt-literal {
  color: black;
  font-size: 12px;
  font-family:  verdana;
  position:relative;
}
.receipt-valfield {
  color: black;
  font-size: 14px;
  text-transform: uppercase;
}
.receipt-datefield {
  color: black;
  font-size: 16px;
  text-transform: uppercase;
}
.receipt-numfield {
  color: black;
  font-size: 20px;
  text-transform: uppercase;
  font-family:  Arial;
}

.receipt-print-btn {
  text-align: center;
}

.bg-light-green {
  background-color: forestgreen;
}

.bg-light-red {
  background-color: orangered;
}

.bold-row td {
  font-weight: bold;
}

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

/* Background: #008B8B; Color: White */
.color0 {
  background-color: #008B8B;
  color: white;
}

/* Background: #0000FF; Color: White */
.color1 {
  background-color: forestgreen;
  color: white;
}

/* Background: #00FA9A; Color: Black */
.color2 {
  background-color: #b2f561;
  color: black;
}

/* Background: #00FFFF; Color: Black */
.color3 {
  background-color: #87CEEB;
  color: black;
}

/* Background: #20B2AA; Color: White */
.color4 {
  background-color: #20B2AA;
  color: white;
}

/* Background: #2F4F4F; Color: White */
.color5 {
  background-color: #2F4F4F;
  color: white;
}

/* Background: #40E0D0; Color: Black */
.color6 {
  background-color: #40E0D0;
  color: black;
}

/* Background: #48D1CC; Color: Black */
.color7 {
  background-color: #48D1CC;
  color: black;
}

/* Background: #5F9EA0; Color: White */
.color8 {
  background-color: #5F9EA0;
  color: white;
}

/* Background: #696969; Color: White */
.color9 {
  background-color: #0000FF;
  color: white;
}

/* Background: #6B8E23; Color: White */
.color10 {
  background-color: #6B8E23;
  color: white;
}

/* Background: #778899; Color: White */
.color11 {
  background-color: #778899;
  color: white;
}

/* Background: #7FFF00; Color: Black */
.color12 {
  background-color: #77FF00;
  color: black;
}

/* Background: #808000; Color: White */
.color13 {
  background-color: #808000;
  color: white;
}

/* Background: #87CEEB; Color: Black */
.color14 {
  background-color: #00FFFF;
  color: black;
}

/* Background: #8B008B; Color: White */
.color15 {
  background-color: #8B008B;
  color: white;
}

/* Background: #90EE90; Color: Black */
.color16 {
  background-color: #B8FFB8;
  color: black;
}

/* Background: #9932CC; Color: White */
.color17 {
  background-color: #9932CC;
  color: white;
}

/* Background: #A52A2A; Color: White */
.color18 {
  background-color: #A52A2A;
  color: white;
}

/* Background: #ADFF2F; Color: Black */
.color19 {
  background-color: #ADFF2F;
  color: black;
}

/* Background: #B0E0E6; Color: Black */
.color20 {
  background-color: #B0E0E6;
  color: black;
}

/* Background: #BC8F8F; Color: White */
.color21 {
  background-color: #00FA9A;
  color: white;
}

/* Background: #C71585; Color: White */
.color22 {
  background-color: #C71585;
  color: white;
}

/* Background: #D2B48C; Color: Black */
.color23 {
  background-color: #D2B48C;
  color: black;
}

/* Background: #D8BFD8; Color: Black */
.color24 {
  background-color: #D8BFD8;
  color: black;
}

/* Background: #DC143C; Color: White */
.color25 {
  background-color: #DC143C;
  color: white;
}

/* Background: #DEB887; Color: Black */
.color26 {
  background-color: #DEB887;
  color: black;
}

/* Background: #EE82EE; Color: Black */
.color27 {
  background-color: #EE82EE;
  color: black;
}

/* Background: #F0E68C; Color: Black */
.color28 {
  background-color: #F0E68C;
  color: black;
}

/* Background: #F4A460; Color: Black */
.color29 {
  background-color: #F4A460;
  color: black;
}

.gnani-box {
  background: #c0f4bd;            /* soft blue */
  border-left: 4px solid #f62222;
  padding: 10px 12px;
  margin: 12px 0;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.averylabel {
  width: 57mm;
  height: 25mm;
  border: 1px solid;
  float: left;
  page-break-inside: avoid;
  padding-top: 3mm;
  padding-left: 2mm;
  padding-right: 1mm;
}

.averylabel .addr {
  font-size: .625rem;      /* address block */
  line-height: 1.3;
}

@media print {
  body * {
    visibility: hidden;
  }
  #receiptdiv * {
    visibility: visible;
  }
  #receiptdiv {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 5mm;
    padding-top: 2mm;
  }

  #averylabels * {
    visibility: visible;
  }

  #averylabels {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 5mm;
    padding-left: 5mm;
    padding-right: 1mm;
    }
}

.wooden-frame {
  display: inline-block;                /* Allows the frame to wrap the image */
  padding: 2px;                        /* Padding to create space between the image and the frame */
  background-color: #ffffff;            /* A base color resembling wood (BurlyWood) */
  border: 1px solid #0f302f;           /* Darker brown for the outer part of the wooden frame */
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);  /* Adds a 3D shadow for depth */
  border-radius: 2px;                   /* Slight rounding for smoother edges */
}

.passport-photo {
  width: 99px;                         /* Standard half passport size */
  height: 99px;                        /* Standard half passport size */
  border-radius: 2px;                   /* Slight rounding for the image itself */
  display: block;
}

.donor-photo-upload {
  display: flex;                      /* Aligns items horizontally */
  align-items: center;                /* Vertically centers the items */
  gap: 15px;                          /* Space between the image and the file input */
}

/* For tablets and smaller screens (768px and below) */
@media (max-width: 768px) {
  .table-container {
      width: 100%;
      padding: 10px;
  }

  table {
      font-size: 12px; /* Reduce table font size for better readability */
      display: block;  /* Make the table scrollable horizontally */
  }
  
  
  li {
      display: block; /* Stack menu items vertically */
      width: 100%; /* Full-width for each item */
      padding: 10px 0; /* Reduce vertical padding */
  }

  .dropdown-content {
      display: none; /* Hide dropdowns by default */
      position: absolute; /* Absolute positioning for dropdowns */
      z-index: 1; /* Keep dropdowns above other elements */
  }

  .dropbtn {
      display: block; /* Stack buttons vertically */
      width: 100%; /* Full-width buttons */
      padding: 15px; /* Padding for touch targets */
      text-align: left; /* Align text to the left */
  }

  /* Show dropdowns when the button is clicked (useful for mobile) */
  .dropbtn:focus + .dropdown-content,
  .dropdown-content:hover {
      display: block; /* Display dropdown */
  }
}

/* For mobile screens (480px and below) */
@media (max-width: 480px) {
  .table-container {
      padding: 5px;
  }

  table {
      font-size: 12px; /* Further reduce font size */
  }

  th, td {
      padding: 5px; /* Reduce padding to fit small screens */
  }
  ul {
    padding: 0;
    list-style-type: none; /* Remove bullet points */
  }

  .dropdown-content {
      display: none; /* Hide dropdowns by default */
      position: absolute; /* Absolute positioning for dropdowns */
      z-index: 1; /* Keep dropdowns above other elements */
  }

  .dropbtn {
      display: block; /* Stack buttons vertically */
      width: 100%; /* Full-width buttons */
      padding: 15px; /* Padding for touch targets */
      text-align: left; /* Align text to the left */
  }

  /* Show dropdowns when the button is clicked (useful for mobile) */
  .dropbtn:focus + .dropdown-content,
  .dropdown-content:hover {
      display: block; /* Display dropdown */
  }
}

.receipt-body {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.receipt-left-column, .receipt-right-column {
  flex: 1;
}

.receipt-left-column {
  padding-right: 10px;
  border-right: 1px solid #ddd; /* Optional, for visual separation */
}

.receipt-right-column {
  padding-left: 10px;
}