html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1;
}

#main > .columns {
  min-height: 100%;
}

.sidebar {
  width: 250px;
  background: whitesmoke;
  min-height: 100%;
}

#counterCSS {
  width: 180px;
}


/* wwwroot/css/styles.css */
#styled-date-picker {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 64px;
  color: #333;
  background-color: #f9f9f9;
}

#styled-date-picker:focus {
  border-color: #66afe9;
  outline: none;
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

.modal {
  position: absolute;
  top: 50px; /* Adjust this value as needed */
  left: 15%; 
  transform: translateX(-50%);
  z-index: 1000; /* Ensure it is above other elements */
}