/** style sheet for song search **/

.ui-autocomplete {
  max-height: 100px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  background-color: #f5f4f0;
  color: black;
  border: 6px solid #000;
  z-index: 10050 !important;
  position: absolute;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-state-active.ui-button:hover {
  /* border: 4px solid #ff0000; */
  border-radius: 10px;
  border: 2px solid yellow;
  background: blue;
  color: white;
}

/** TABLE - Begin style **/
/** use Tamil/Devanagari fonts ** https://mymuruga.com/tpday2/util/myfonts/vijaya.ttf itfdevanagari-demi.woff*/
@font-face {
  font-family: myMurugaTamil;
  src: url(/util/myfonts/vijaya.woff2);
}

@font-face {
  font-family: myMurugaDev;
  src: url(/util/myfonts/itfdevanagari-demi.woff);
}

/** Tamil Font Class**/
.myTamilFont {
  font-family: myMurugaTamil;
  /* font-size:2em; */
}

.myDevFont {
  font-family: myMurugaDev;
  /*  font-size:2.2em; */
}

table#myHDR1,
table#myHDR1 td {
  border: none !important;
  background: #76448A;
  /** #2980b9; **/
  color: #ffffff;
  padding: 1rem;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  font-size: 85%;
}

table#myHDR2,
table#myHDR2 td {
  border: none !important;
  background: #76448A;
  /** #2980b9; **/
  color: #ffffff;
  padding: 1rem;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  font-size: 85%;
}

#myHDR1 tr {
  line-height: 10px;
}

#myHDR2 tr {
  line-height: 10px;
}

/** TABLE - End style **/

/** Modal sytle - BEGIN   **/

.modal {
  /*  text-align: center; */
  padding: 0 !important;

}

.modal-header {
  background-color: #76448A;
}

.modal-header-expl {
  background-color: darkgreen;
  text-align: center;
  color: #FFFFFF;
}

.modal-dialog {
  width: 75vw;
  max-width: 900px;
  height: 75vh;
  margin: 12.5vh auto;
}


.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-body,
.modal-body-expl,
.modal-body-dev {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iOS smooth scroll */
}


.modal-body {
  /* max-height: calc(80vh - 190px); */
  /* max-height: calc(80vh - 280px); wkg */
  /**max-height:75vh; */
  overflow-y: auto;
  text-align: center;
  font-size: 180%;
  color: #000000;

}

.modal-body-expl {
  /* max-height: calc(80vh - 120px); */
  /**max-height:75vh; */
  /*max-height: calc(80vh - 220px); wkg*/

  overflow-y: auto;
  /* text-align:center; */
  font-size: 160%;
  padding-left: 20px;
  padding-right: 20px;
  color: #000000;
  background-color: lightyellow;
}

.modal-body-dev {
  /**max-height:75vh; */
  overflow-y: auto;
  text-align: center;
  font-size: 180%;
  color: #000000;

}

.modal-footer {
  width: 100%;
  padding: 1px 4px;
  border-top: 0 none;
}

.modal-footer-dev {
  width: 100%;
  padding: 1px 0;
  text-align: center;
  font-size: 1.1em;
  background: #76448A;
  color: #ffffff;
  border: 6px groove #888;
}

.modal-footer,
.modal-footer-dev {
  flex-shrink: 0;
}


u {
  /** underline lyrics **/
  /** text-decoration: none; wkg
                  border-bottom: 2px solid black; wkg **/
  text-decoration: underline black;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
}

/** MODAL-CLOSE - Begin - following classes are for close button - iOs device to behave properly. **/
.clickable {
  cursor: pointer;
  border: none;
  background: none;
  top: -15px;
  right: -4px;
  color: #76448A;
}

.popupCloseButton {
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  position: absolute;
  top: -10px;
  /* from 15px to 10px */
  right: 4px;
  font-size: 30px;
  width: 20px;
  height: 20px;
  text-align: center;
  color: #ffffff;

}

@media (max-width: 768px) {
  .modal-dialog {
    width: 90vw;
    height: 75vh;
    margin: 6vh auto;
    /* keeps top gap visible */
  }
}
/** MODAL-CLOSE - End - **/
/** Modal sytle - END   **/

/******/
/* ===== MASTER SEARCH BAR ===== */
/* ===== SEARCH WRAPPER ===== */

.mm-search-wrap {
  /* background: linear-gradient(90deg, #fdf2e9, #fdebd0); */
  padding: 6px 10px;
  /* border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); */
  width: 100%;
  max-width: 800px;
  /* prevent too wide on desktop */
  margin: 0 auto;
  /* center */
}

/* ===== FLEX ROW ===== */
.mm-search-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  /* allows wrap on very small screens */

  /*  background: linear-gradient(180deg, #ffcc00,#fffad3, #ffcc00); /* eye-catching gradient 
   border-radius: 12px;           
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); 
  /* subtle shadow */
}

/* ===== SEARCH TITLE ===== */
.mm-search-title {
  font-weight: bold;
  font-size: 14px;
  font-face: Helvetica;
  color: #4a235a;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;

}

/* ===== SEARCH ITEM (label + input/select) ===== */
.mm-search-item {
  display: flex;
  align-items: center;
  gap: 4px;
  /* space between label and field */
  flex: 1 1 auto;
  /* allow shrink on small screens */
  min-width: 120px;
  /* avoid collapse */
  max-width: 220px;
  /* avoid too wide */
}

/* ===== LABEL ===== */
.mm-label {
  font-size: 14px;
  /* font-weight: 600;*/
  color: #333;
  white-space: nowrap;
  font-face: Helvetica;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 0;
}

/* ===== SELECT ===== */
.mm-select {
  height: 28px;
  font-size: 13px;
  padding: 2px 6px;
  width: 100%;
  /* takes remaining space inside mm-search-item */
  box-sizing: border-box;
}

/* ===== INPUT ===== */
.mm-input {
  height: 28px;
  font-size: 13px;
  padding: 2px 6px;
  width: 100%;
  /* takes remaining space inside mm-search-item */
  box-sizing: border-box;
  background:yellow;
}

/* ===== ONLY FOR PLACE HOLDER TEX =====*/
/* Standard syntax for modern browsers */
input::placeholder {
  font-style: italic;
  font-size: 11px;
}

/* For older versions of Chrome, Safari, and Opera */
input::-webkit-input-placeholder {
  font-style: italic;
  font-size: 11px;
}

/* For older versions of Firefox */
input::-moz-placeholder {
  font-style: italic;
  font-size: 11px;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  font-style: italic;
  font-size: 11px;
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 480px) {
  .mm-search-row {
    flex-wrap: wrap;
    /* allow wrap if necessary */
    gap: 8px;
  }

  .mm-search-title {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
  }

  .mm-search-item {
    max-width: 100%;
  }
}


/* ===== FIX SELECT TEXT NOT SHOWING ===== */
.mm-search-wrap select {
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;

  background-color: #ffffff;
  color: #000000;

  height: 28px;
  line-height: 26px;
  /* 🔑 critical */
  padding: 2px 6px;

  font-size: 13px;
  font-weight: normal;

  border: 1px solid #ccc;
  background:yellow;
}

/* Ensure options are readable */
.mm-search-wrap select option {
  color: #000000;
  background: #ffffff;
}


/******/