html, body {
    margin: 0;
    padding: 0;
  }
  
  #map {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
  
  #selectContainer {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 11px 0;
    display: flex;
    justify-content: center;
  }
  
  #selCountry {
    width: 200px;
    color: #212529;
    /* background: #FFFFFF; */
    /* font: 16px sans-serif;
    margin: 0px 58px;
    padding: 6px 36px 6px 12px;
    border-radius: 5px; */
  }
  
  #todayIcon {
    width: 125px;
    height: 125px;
  }
  
  #todayIcon1 {
    width: 75px;
    height: 75px;
  }

  #todayIcon2 {
    width: 75px;
    height: 75px;
  }

  .modal-dialog {
    max-width: 650px; /* Adjust this value as needed */
  }

  /* Adjust the width of the name-and-date container to fit the content */
.name-and-date {
  display: inline-block;
}

/* Give some spacing between name and date */
.name-and-date .name {
  margin-right: 10px;
}

/* Adjust the layout of holiday names and dates */
.row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start; /* Adjust this to control vertical alignment */
}

.col-md-6 {
  flex: 1; /* Distribute available space evenly */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
}

/* Give more width to the date column */
.col-md-6 .date {
  width:10%; /* Adjust this width as needed */
  text-align: right;
  margin-bottom: 0.5em; /* Add some spacing between dates */
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap; /* Prevent wrapping */
}

/* Reduce width of the name column */
.col-md-6 .name {
  width: 90%; /* Adjust this width as needed */
  text-align: left;
  white-space: nowrap; /* Prevent wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Show ellipsis for truncated text */
  margin-bottom: 0.5em; /* Add some spacing between names */
}

.name,
.date {
  padding: 10px;
}

.modal-sm {
  max-width: 400px;
}