body {
  font-family: Arial, sans-serif;
  background-color: f3f3f3;
  margin-left: 2px;
  margin-right: 2px;
  font-size: 11px;
}

@media (min-width: 768px) {
  body {
    margin-left: 16px;
    margin-right: 16px;
  }
}

#results {
  margin-top: 20px;
}

form {
  margin-left: 0px;
  margin-right: 0px;
}

table {
  width: 100%;
  border-collapse: collapse;  
  font-size: 11px;  
}

@media (min-width: 768px) {
  table {
    font-size: 14px;
  }
}

table, th, td {
  border: 1px solid black;
}

th, td {
  text-align: left;
}

select, input, button {
  margin-top: 10px;
  padding: 8px;
  font-size: 16px;
  box-sizing: border-box;
  outline: none;
}

input {
  width: 100%;
  border-color: #a00217;
  border-width: 2px;
  border-style: solid;
  border-radius: 4px;
}

input:focus {
  outline: none;
}

a:link {
  color: #a00217;  /* Unvisited link color */
  text-decoration: none; /* Removes the default underline */
}

a:visited {
  color: #5e000d; /* Visited link color */
  text-decoration: none;
}

a:hover {
  color: #D80621; /* Color when the user mouses over the link */
  text-decoration: underline; /* Adds an underline on hover */
}

a:active {
  color: #8d4952; /* Color the moment the link is clicked */
  text-decoration: underline;
}

.mainHeader {
  position: absolute;
  background-color: #a0021701;
  height: 60px;
  width: 100%;
}

.mainHeader h1 {
  color: #FFFFFF01;
}

.header {
  color: #333;
  background-color: #a00217;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.resultsLoader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border: 20px solid #f3f3f3; /* Light grey background border */
  border-top: 20px solid #3498db; /* Blue spinning section */
  border-radius: 50%; /* Makes the div a circle */
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite; /* Animation properties */
}

.title {
  font-size: 14px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.input-group {
  position: relative;
  width: 100%;
  vertical-align: top;
}

#raceform {    
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

#mruContainer {
  width: 100%;
  box-sizing: border-box;
  max-width: 600px;
  max-height: 472px;
  z-index: 100;
  position: absolute;
  top: 100%;
  left: 0;
  overflow-y: auto;
  border: 2px;
  border-color: #9b0215;
  border-style: solid;
  color: #920417;
  font-size: 14px;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  background-color: #dfdddd;
  padding-top: 0;
}

.mru-link {
  display: flex;
  text-decoration: none;
  gap: 0.5rem; /* Consistent spacing between fields */
  font-family: 
    /* 1. Apple Modern (iOS 13.4+, macOS 10.15+) - Targets "SF Mono" */
    ui-monospace, 
    /* 2. macOS/iOS Classic - High quality, pre-installed */
    "Menlo", "Monaco", 
    /* 3. Android - Modern clean mono */
    "Roboto Mono", 
    /* 4. Windows - Professional standard */
    "Consolas", 
    /* 5. Generic Linux/Universal - Avoids Courier if possible */
    "Liberation Mono", "DejaVu Sans Mono", 
    /* 6. System Fallback */
    monospace;
}

.mru-gender {
  width: 1ch; 
  display: inline-block;
}

.mru-discipline {
  width: 1.75ch; 
  display: inline-block;
}

.mru-date {
  width: 10.3ch; 
  display: inline-block;
}

.infoicon {
  cursor: pointer;
  width: 24px;
  height: 24px;
}

#info p {
  margin-left: 15px;
  margin-right: 15px;
}

#info h2 {
  margin-left: 15px;
  margin-right: 15px;
  color: white;
}

.info-content {
  position: absolute;
  top: 158px;
  padding: 0px;
  z-index: 10;
  border: 2px;
  border-color: #9b0215;
  border-style: solid;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  background-color: #dfdddd;
  font-size: 14px;
  width: calc(100% - 10px);
  max-width: 450px;
  right: 4px;
}

.info-content-show {      
  display:block;
}

.info-content-hide {      
  display: none;
}

.nerd {    
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  margin-top: 112px;
  width: 128px;
}

.nerdWaterMark {
  position: fixed;  
  pointer-events: none;
  user-select: none;
  opacity: 0.05;
  margin-top: 278px;
}

.buttonContainer {
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  width: 24px;
  height: 24px;
  right: 16px;
  margin-top: -9px;
  width: 96px;
}

.shareicon {
  margin-top: 0px;
  padding: 0px;
  background: transparent;
  border-style: none;
}