/* Ensure proper wrapping on small screens */
    @media (max-width: 660px) {
    .scnnet, .scncal {
      width: 100%;
      min-width: unset;
    }
  }
  
  @media(min-width:1200px) {
    .container {
      margin: auto;
    }
  }

  @media(min-width:768px) and (max-width:1200px) {
    .container {
      margin: auto;
    }
  }

@font-face {
  font-family: 'Kalyani';
  src: url('/fonts/Kalyani.eot'); /* For IE */
  src: url('/fonts/Kalyani.eot?#iefix') format('embedded-opentype'), /* For IE */
        url('/fonts/Kalyani.woff2') format('woff2'), /* Modern browsers */
        url('/fonts/Kalyani.woff') format('woff');   /* Older browsers */
  font-weight: normal;
  font-style: normal;
}  


@font-face {
  font-family: 'Jyothi';
  src: url('/fonts/Jyothi.eot'); /* For IE */
  src: url('/fonts/Jyothi.eot?#iefix') format('embedded-opentype'), /* For IE */
        url('/fonts/Jyothi.woff2') format('woff2'), /* Modern browsers */
        url('/fonts/Jyothi.woff') format('woff');   /* Older browsers */
  font-weight: normal;
  font-style: normal;
}  

@font-face {
  font-family: 'Anton';
  src: url('/fonts/Anton-Regular.eot');
  src: url('/fonts/Anton-Regular.eot?#iefix') format('embedded-opentype'),
      url('/fonts/Anton-Regular.woff2') format('woff2'),
      url('/fonts/Anton-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*
@font-face {
  font-family: 'Pari';
  src: url('/fonts/Pari.eot'); /* For IE * /
  src: url('/fonts/Pari.eot?#iefix') format('embedded-opentype'), /* For IE * /
        url('/fonts/Pari.woff2') format('woff2'), /* Modern browsers * /
        url('/fonts/Pari.woff') format('woff');   /* Older browsers * /
  font-weight: normal;
  font-style: normal;
} */


/* Style the tab */ 
.tab { 
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
} 

/* Style the buttons that are used to open the tab content */ 
.tab button { 
    background-color: inherit; 
    float: left; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    padding: 14px 16px; 
    transition: 0.3s; 

    box-shadow: 2px 2px 2px #555555;
    margin-left: 5px;
} 
/* Change background color of buttons on hover */ 
.tab button:hover { 
    background-color: 
    #ddd; 
} 
/* Create an active/current tablink class */ 
.tab button.active { 
    background-color: #ccc; 
} 
/* Style the tab content */ 
.tabcontent { 
    display: none; 
    padding: 6px 12px; 
    border: 1px solid #ccc; 
    border-top: none; 
    animation: fadeEffect 2s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}

}

/* End of Tab style */


/* Banner customisation changes */
.container-header
{  
  background-image: linear-gradient(135deg,#ebeefb 0,#c3bae1 100%); 
}

.container-header .site-description
{
  color: black;
  font-size: 1.25rem;
  margin-top: 10px;
  margin-left: 10px;
  
  
}
.site-description
{
  font-family: "Pari";   
}

/* End of Banner customisation changes */

/* Menu Display customisation for Tamil*/
.btmenu_ta {
    font-family: 'Jyothi';
    font-size: 1.25rem;
}


/* End of Menu Display */

/*Body customisation */

body:lang(en-gb){
  font-family: 'sans-serif';
}

body:lang(ta-in){
        font-family: 'Kalyani';
    }
    
/* End of Body Customisation */

h1:lang(ta-in),h2:lang(ta-in),h3:lang(ta-in),h4:lang(ta-in),h5:lang(ta-in){
    font-family: 'Jyothi';
}

.site-grid{
  background-color: #fffbec;
  margin-bottom:0;
}
.site-grid:lang(ta-in){
  background: #efffec;
}

.breadcrumb{
  background-color: transparent;
  font-weight:bold;
}


/* End of Article Formatting */

/* Footer formatting */
.footer {
    background-image: linear-gradient(135deg,#ebeefb 0,#c3bae1 100%);
    font-family: 'Pari';
    color: #000;
    margin-top:0;
}

.footer .grid-child{
    padding: 10px;
}

.footer .grid-child table{
    border: 0;
    
}

.footer .grid-child td  h5{
    color: slateblue;
}

.footer .grid-child:lang(ta-in) td  h5{
    color: slateblue;
}


   body {
      background-color: #b4e0b4;
    }

    h4 {
      margin: 2px;
    }

    h1 {
      color: blueviolet;
      text-align: center;
    }
    h1.tam
    {
      font-family:'Jyothi';
      /*font-size:1.5em;*/
    }

    h2 {
      color: blue;
      text-align: center;
      padding-top: 15px;
    }

    .bg {
      margin: auto;
      width: 95%;
      /*max-width: 900px; */
      background-color: #b5eafe;
      min-width: 400px;
      padding: 0px 10px;
    }
    
    .container {
      display: flex;
      flex-wrap: wrap; /* Allows items to wrap */
      justify-content: flex-start; 
      
      min-width: 820px;
      margin:0 auto;
    }
    
    .scnnet {
      background-color: beige;
      padding: 5px;
      margin: 5px;
      /*max-width: 400px;
      width:95%;*/
      width:100%;
    }
    
    .scncal {
      background-color: bisque;
      padding: 5px;
      /*flex-grow: 1;
      max-width: 400px;*/
      margin: 5px;
      min-width: 360px;
      width:45%;
    }
    
    .smt {
      color:blue;
      background-color: #7febd6;
      padding: 5px;
      border-style: outset;
      border-width: 5px;
    }

    .str {
      color: #ffffff;
      background-color: #2b3f6b;
      padding: 5px;
      border-style: outset;
      border-width: 5px;
    }
    .thi {
      color: #4c6e4e;
      background-color: #f0f5a9;
      padding: 5px;
      border-style: outset;
      border-width: 5px;
    }


    .strnet {
      background-color: bisque;
      padding: 5px;
    }

    .lat
    {
      width:95px;
      padding:5px;
    }

    .inf {
      color: blueviolet;
      background: lavender;
      border-style: outset;
      border-width: thin;
      border-color: chocolate;
      padding: 5px;
    }
    .highlight {
      background-color: yellow;
      font-weight: bold;
      font-size: 20px;
      padding: 2px 4px;
      border-radius: 3px;
    }

    table {
      /*width: 95%;*/
      margin: auto;
    }

    table.tab{
      text-align:left;
      width: 95%;
      background: white;
      border-collapse: collapse;
      border-spacing:5px;
      color:red;
    }

    table.tab td {
      padding:10px;
      border: 1px solid #808080;
    }

    td.stbtn {
      border: 1px solid #808080;
      padding: 2px 10px;
      width: 90%;
    }


    table.cal {
      border: 3px solid #808080;
      padding: 5px;
      /*width: 95%;*/
      border-style:ridge;
      border-radius: 15px;
      table-layout: fixed;
      border-width:3px;
      text-align: center;
      font-weight: 600;
    }

    table.centre {
      text-align:center;
      /*border-width: medium;
      border-style: groove;
      border-color: chocolate;*/
      width: 100%;
    }

    table.sides{
      text-align:left;
      /*margin:5px;*/
      width: 95%;
      color: #d70a31;
      border-collapse: collapse;
      font-size: 1em;
      border-spacing:0cap;
    }

    #ptForm {
      position: fixed;
      /*top: 0;*/
      background: bisque; /* Ensure background is solid */
      z-index: 1000; /* Keep it above other elements */
      padding: 10px;
      border-bottom: 2px solid #ccc; /* Optional for better visibility */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
      width: 800px;
      min-width: 800px;
      max-width: 800px;
      margin: 0 auto; /* Centers it */
      margin-left:30px;
  }
  

    .caldate{
      font-family: 'Anton';
      color:darkolivegreen;
      font-size: 15em;
      line-height: 1;
      display: inline-block;
      transform: translateY(-0.01em); 
    }

    .tdate{
      border-left-width: 3px;
      border-right-width: 3px;
      border-color: chocolate;
      border-style: ridge;
      border-collapse: collapse;
    }

    .fest{ 
        background-color: bisque;
        padding: 5px;
        margin: 5px;
        border-style: inset;
        border-width:3px;
        border-radius: 1px;
        font-size:1em;
        text-align: left;
    }

    table.dbl {
      width: 95%;
      margin: auto;
      border-width: 3px;
      table-layout: fixed;
      text-align:left;
      border-style: double;
    }

    tr.pri {
      background-color: #caf9de;
      padding: 5px;
      border-width:2px;
      color: #a100a1;
      font-size: 1.8em;
      border-color: #7a8574;
      border-style:outset;
    }

    tr.pri td {
      border-width: 3px;
      border-color: chocolate;
      border-style: ridge;
      border-collapse: collapse;
    }  

    tr.sec {
      background-color: azure;
      border: groove;
      padding: 5px;
      border-width:2px;
    }

   /* tr.sec td {
      border-width: 3px;
      border-collapse: collapse;
      border-color: chocolate;
      border-style: ridge;
    }  */

    tr.cbtm {
      color: #7b27c5;
      font-size: 1.5em;
    }

    td.blk {
      padding: 3px;
      border-width:2px;
      border-style:solid
    }

    td.tz {
      font-weight: 600;
      color: blue;
      padding: 5px;
      text-align: center;
    }

    .btn {
      border-radius: 4px;
      border: 0;
      color: red;
      cursor: pointer;
      display: inline-block;
      margin: 2px;
      padding: 5px;
      position: relative;
      background-color: bisque;
      box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);
      border: 0;
      margin-bottom:6px;
    }

      .btn:hover {
        background: #b4e0b4;
      }

      .btn:active, #btn:focus {
        background: #b5eafe;
      }

      .btn:disabled {
        background-color: rgba(100,100,100,0.1);
        cursor: not-allowed;
      }

    .txt {
      padding: 5px;
      width: 140px;
    }

    .hdtxt {
      color:blue;
      font-size: 1.2em;
      font-weight: 700;
    }

    .attn {
      color: red;
      font-weight: 600;
    }

    .log {
      outline: none;
      background-color: azure;
      padding: 10px;
      border: inset;
      color: darkolivegreen;
      margin-bottom: 20px;
      margin-top: 10px;
      /* width: 85%;*/
      min-height: 250px;
      /*max-height:500px;*/
    }
    #ecl{
      column-width: 16em;
    }
    .sang {
      font-size: 1em;
    }
    .sb {
      font-size: small;
      font-weight:bold;
    }

    .tabsp {
      display: flex; 
      gap: 2em;
    }

    .info{
      color: darkgreen;
      font-weight: 800;
      
    }
 
    .ref{
      color:rgb(68, 39, 95);
      font-style:italic;
      font-weight: bolder;
    }

    .tref{
      color:goldenrod;
      font-family:Jyothi;
    } 

    .language-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
  }

  select {
      padding: 5px 10px;
      font-size: 14px;
      border-radius: 4px;
      border: 1px solid #ccc;
      background-color: bisque;
      height: 30px;

  }

  .nodisp {
    display:none;
  }

  .txtcentre{
    text-align: center;
    padding-bottom:10px;
    padding-top: 10px;
  }

  .combo-box {
    position: relative;
    display: inline-block;
}

  #cityInput, #citySearch{
    width: 120px;
    /*padding: 3px;*/
    border: 1px solid #0a0a0a;
}

  #citySelect, #citySearchSelect {
    margin-left: 40px;
    /*padding: 5px;*/
    font-size: 1em;
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    background: white;
    border: 1px solid #000000;
    height:140px;
}

#inputDate {
  width:110px;
}

#search-year{
  height:25px;
  border: 1px solid #0a0a0a;
}

.num {
  font-family: 'Times New Roman', Times, serif;
  margin-top:5px;
}

.ckb {
  position:absolute;
  margin: 3px;
}
  
.ckbe {
  position:absolute;
  margin: 5px;
}

.adhik-style {
  color: burlywood;
  opacity: 0.6;
  font-style: italic;
}

.adhik-style,
.normal-style {
  transition: all 0.3s ease-in-out;
}

.calendar-select label {
  margin-right: 15px;
}

.lunar-style{
  opacity: 0.4;
  font-style: italic;
}

.normal-style {
  color: chocolate;
}
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  /*background-color: #e7e9b2;*/
  background-color: beige;
  width:100%;
}
.tab button {
  background-color: inherit;
  float: left;border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
.tab button:hover {
  background-color: #ddd;
}
.tab button.active {
  background-color: #7ccf98;
}
.tab button.inactive {
  background-color: #a8ecb9;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width:100%;
}
.tabh{
  color: rgb(106, 67, 197);
  font-weight: 700;
  font-size:large;
}

.festival-table {
  width: 100%;
  border-collapse: collapse;
  /*font-family: Arial, sans-serif;*/
}

.festival-table th {
  background-color: #f2f2f2;
  text-align: left;
  padding: 6px;
  font-weight: bold;
  font-size: 14px;
}

.festival-table td {
  padding: 10px;
  font-size: 14px;
  color:green;
  font-weight: 600;
  vertical-align: middle;
  border: 1px solid #808080;
}

.festival-table tr:nth-child(even) {
  background-color: beige;
}

.festival-table tr:nth-child(odd) {
  background-color: #f5e5e5;
}

.festival-table tr:hover {
  background-color: #e6f7ff;
}


.dhead
{
  width: 100%;
  text-align: center;
}

.indent-text {
  text-indent: 3em; /* or use px, e.g., 20px */
}

.form-container.horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;
  padding: 3px 15px;
  border: double 3px #ccc;
  background-color: azure;
  color: darkolivegreen;
  margin-top: 10px;
}

.form-container.horizontal label {
  margin-right: 5px;
}

.form-container.horizontal input,
.form-container.horizontal select {
  padding: 5px;
  max-width: 140px;
}

.city-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

#search-type,
#search-year,
#citySearch,
#citySearchSelect {
  padding: 5px;
}

/*
.btn {
  padding: 6px 12px;
  background-color: darkolivegreen;
  color: white;
  border: none;
  cursor: pointer;
}*/



.event-subfields {
  display: flex;
  flex-wrap: wrap;  /* Optional: allows wrapping if screen is too narrow */
  gap: 12px;
  align-items: center;
}

.sanka {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap; /* Optional: if it needs to wrap on smaller screens */
}

.sanka span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap; /* Prevent label wrapping */
}