body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: white;
}

.fixed-title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #E1EAF4;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.scrolling-window {
  margin-top: 240px;
  padding: 10px;
  overflow-x: auto;
}

.page-heading {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/    
}

h1 {
    font-size: 20px;
    font-weight: bold;
    /*text-align: left;*/
    margin-top: 20px;
    margin-bottom: 20px;
    /*display: flex;
    align-items: center;*/
    /*justify-content: space-between;*/
}

/* Style the countdown timer */
.timer {
    /*margin: 10px;*/
    margin-right: 20px;
    font-weight: bold;
    color: red;
    /*display: flex;
    align-items: center;*/
}

/*
h1 img {
  max-width: 5%;
  height: auto;
  margin-right: 10px;
}
*/

/*
h1 span {
  font-size: calc(20px + 3vw);
  margin-left: auto;
}
*/


label {
  font-weight: bold;
}

input[type="text"] {
  width: 90%;
  font-size: 20px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="radio"] {
  margin-right: 10px;
  vertical-align: middle;
}

button[type="submit"] {
  display: block;
  margin: auto;
  width: 95%;
  /*padding: 10px;*/
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #45a049;
}



table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: center;
}

td {
  font-weight: normal;
  text-align: center;
}

.tdh {
  font-weight: bold;
  background-color: #1C3F95;
  color: white;
}

.tdh2 {
  font-weight: bold;
  background-color: #E1EAF4;
  color: black;
}

.unseeded {
  background-color: white;
  color: black;
  text-align: center;
}

.seeded {
  background-color: red;
  color: white;
  text-align: center;
}

.provisional {
  background-color: orange;
  color: black;
  text-align: center;
}

.final {
  background-color: green;
  color: white;
  text-align: center;
}

/* Style the search input */
.search {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

/* Style the radio buttons */
.radio {
    margin: 10px;
}

/* Style the refresh button */
.refresh {
    margin: 10px;
    padding: 10px;
    border: none;
    background-color: green;
    color: white;
    cursor: pointer;
}


#time-clock {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f3f3f3;
}
        
#time-clock .pie {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(0, 10px, 20px, 0);
    border-radius: 50%;
    background-color: #000;
    transform-origin: center;
}

/* Media Query for Mobile Devices */ 
@media only screen and (max-width: 1300px) {
    
    body {
    /*font-size: calc(20px + 3vw);*/
    background-color: white; /* red  #F5DADF */
    }
    
    h1 {
        /*font-size: calc(22px + 3vw);*/
        /*
        font-weight: bold;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        */
    }
    
    button[type="submit"] {
        /*font-size: calc(20px + 3vw);*/
        width: 90%;
    }

    table {
        /*font-size: calc(22px + 3vw);*/
        /*font-size: 20px;*/
        /*min-font-size:10px;*/
    }
    
    th, td {
        padding: 5px;
    }
    
    .fixed-title {
        padding: 5px;
    }
    
    .scrolling-window {
        margin-top: 220px;
        padding: 5px;
    }

    input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px; /*calc(20px + 3vw);*/
        height: 20px; /*calc(20px + 3vw);*/
        border-radius: 50%;
        border: 2px solid #000;
        outline: none;
        margin-right: 10px;
        }
    
    input[type="radio"]:checked {
      background-color: #000;
    }
    
    label {
      font-family: Arial;
      /*font-size: calc(20px + 3vw);*/
    }

/*  
    input[type="text"] {
        font-size: calc(20px + 1vw);
        width: 80%;
    }
*/
    input[type="text"] {
        /*font-size: calc(20px + 3vw);*/
        width: calc(20px + 3vw);
        width: 72.8%;
        padding: 5px;
        box-sizing: border-box;
    }
    
    ::placeholder {
        /*font-size: calc(20px + 3vw);*/
    }
    
    label {
        font-family: Arial;
        /*font-size: calc(20px + 3vw);*/
    }

}


/* Media Query for low resolution  Tablets, Ipads */ 
/*
@media (min-width: 481px) and (max-width: 767px) { 
    body { 
        background-color: yellow; 
    } 
} 
*/
  
/* Media Query for Tablets Ipads portrait mode */ 
/*
@media (min-width: 768px) and (max-width: 1024px){ 
    body { 
        background-color: blue; 
    } 
} 
*/
  
/* Media Query for Laptops and Desktops */ 
/*
@media (min-width: 1025px) and (max-width: 1280px){ 
    body { 
        background-color: green; 
    } 
} 
*/

/* Media Query for Large screens */ 
/*
@media (min-width: 1281px) { 
    body { 
        background-color: white; 
    } 
} 
*/

/*
.fixed-title {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #1C3F95;
	padding: 10px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: white;
}

.scrolling-window {
	margin-top: 100px;
	padding: 10px;
	font-size: 16px;
	line-height: 1.5;
}

h1 {
  font-size: 28pt;
  background-color: #1C3F95;
  color: white;
}

body,
button,
input,
select,
textarea {
  color: #333;
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.66;
}

td {
  font-size: 25px;
}