body {
  background-color: #ededed;
  color: #424242;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;

}



h1,
.h1 {
  font-size: 45px;
  line-height: 48px;
}

h2,
.h2 {
  font-size: 36px;
  line-height: 42px;
}

h3,
.h3 {
  font-weight: bold;
  font-size: 25px;
  line-height: 26px;
  margin: 5px 0px;
}

h4,
.h4 {
  font-weight: bold;
  font-size: 24px;
  line-height: 25px;
}

h5,
.h5 {
  font-size: 20px;
  line-height: 24px;
}

h6,
.h6 {
  font-size: 18px;
  line-height: 24px;
}

a {
  color: #3282e6;
}

a:hover,
a:focus {
  color: #165db5;
  text-decoration: underline;
}








.MainDiv {
  background-color: white;
  max-width: 1200px;
  margin: auto;

  font-family: Arial, Sans-serif;
  font-size: 16px;
  line-height: 1.3;

}



.TitleDiv {
  padding: 5px 10px 10px 10px;
  margin: 0px 0px 5px 0px;
  background-color: #98b1c0;
  font-family: Verdana,Sans-serif;
  color: #C7435F;
	display:flex;
	flex-wrap:wrap;
 justify-content: center;
 text-align: center;
}

 .OffLineWarning{
        background-color:orange;
        font-size:18px;
        font-weight:Bold;
        text-align:center;
    }       

        .HomePageMenuDiv {
          flex-wrap: wrap;
          display: flex;
          justify-content: center;
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          font-size: 18px;
          font-weight: normal;
          width: auto;
          color: white;
          background-color: white;
          padding: 0;
          text-align: center;
        }

      

.HomePageMenuDiv1 {
  flex-grow: 1;
  border-radius: 5px;
  
  min-width: 300px;
  background-color: #3d5476;
  margin-top: 0px;
  padding: 0px;
  margin: 5px;
  height:auto;
}

.HomePageMenuDiv2 {
  border-style: solid;
  border-color: lightgrey;
  border-width: 2px;
  border-radius: 5px;
  width: 220px;
  padding: 5px 5px 3px 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px
}

.HomePageMenuDiv3 {
  flex-grow: 1;
  min-width: 310px;
  border-radius: 5px;
  background-color: #3d5476;
  margin-top: 0px;
  padding: 10px 5px 5px 5px;
  margin: 5px;
  height: 50px;
  text-align: center;
}

.LightTextDiv {
  color: black;
  margin: 5px;
  flex-grow: 1;
  text-align: left;
  border-radius: 5px;
  background-color: #98b1c0;
  margin-left: 5px;
  margin-right: 5px;
  padding: 10px 10px 10px 10px;
  font-size: 16px;
  font-weight: bold;
}

.BottomPageHelpDiv {
  margin: 5px 5px;
  flex-grow: 1;
  text-align: left;
  border-radius: 5px;
 background-color: #3d5476;
   padding: 10px 10px 10px 10px;
  font-size: 16px;
  font-weight: bold;
  color:white;

}

.DetailsDiv, .BlueDiv {
  margin: 5px;
  flex-grow: 1;
  text-align: center;
  background-color: #3d5476;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px 10px 5px 10px;
  font-size: 16px;
  font-weight: normal;
color:white;
}

 .LightBlueDiv {
  margin: 5px;
  flex-grow: 1;
  text-align: center;
  background-color: #98b1c0;
 padding: 10px 10px 10px 10px;
  font-size: 16px;
  font-weight: normal;
    color:white;
}

  .DetailsMenuDiv {
    line-height: 20px;
    margin: 0px 0px 0px 0px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;
    width: auto;
    background-color: #3d5476;
    padding: 10px 10px 10px 10px;
    text-align: center;
    color: yellow;

  }

  .MenuDiv {
      display: flex;
      flex-wrap: wrap;
      padding: 0px;
      background-color: #98b1c0;
      color: #c7435f;
      width: auto;
      min-width: 300px;
      height: auto;
     margin-left: 5px;
  margin-right: 5px;

   }
.TopMenuInnerDiv1 {
      font-size: 16px;
      margin: 0px 0px 0px 0px;
      padding: 3px 0px 2px 0px;
      width: auto;
      overflow-y: auto;
      text-align: center;
      height: auto;
   }
   
      .HPTcell {
        font-size: 16px;
        padding: 1px 5px;
        border-style: solid;
        border-width: 1px;
        border-color: white
      }




/********************************/
/* BUTTON CSS */

button{
  border-style: solid;
  border-color: lightgrey;
  background-color: #c7435f;
  color: white;
  border-radius: 5px;
  font-size: 16px;
padding: 4px 15px 4px 15px;
 

}
button:disabled {
  background-color: grey;
}

button:active {
  box-shadow: 0px -2px lightgrey;
  transform: translateY(2px);
}

.HomePageMenuButton{
   width: 210px;
  margin: 5px 5px 6px 5px;
 padding: 4px 15px 4px 15px;
  font-size: 20px;
  font-weight: bold;
}

.DetailsMenuButton{
   width: 190px;
  margin: 5px 5px 6px 5px;
 padding: 4px 15px 4px 15px;
  font-size: 20px;
  font-weight: bold;
}


.StandardButton {
  margin: 5px;
 padding: 3px 10px 5px 10px;
  font-size: 16px;
  font-weight: bold;
}

.StandardSmallButton {
 margin: 5px;
 padding: 2px 5px 2px 5px;
  font-size: 14px;
  font-weight: normal;
}





.HomePageMenuButtonSmall {
  border-style: solid;
  border-color: lightgrey;
  background-color: #c7435f;
  color: white;
  width: 210px;
  margin: 5px 5px 3px 5px;
  border-radius: 5px;
  padding: 2px 5px 2px 5px;
  font-size: 16px;
  font-weight: bold;
}



.HomePageMenuButtonVSmall {
  border-style: solid;
  border-color: lightgrey;
  background-color: #c7435f;
  color: white;
  width: 95px;
  margin: 3px 5px 3px 5px;
  border-radius: 5px;
  padding: 2px 3px 2px 3px;
  font-size: 16px;
  font-family: Helvactica, Arial, Sans-serif;
  font-weight: normal;
}



.HomePageMenuButton2 {
  border-style: solid;
  border-color: lightgrey;
  background-color: #c7435f;
  color: white;
  width: 190px;
  margin: 3px 5px 7px 5px;
  border-radius: 5px;
  padding: 2px 15px 3px 15px;
  font-size: 20px;
  font-family: Helvactica, Arial, Sans-serif;
  font-weight: normal;
}

.HomePageMenuButton2:disabled {
  background-color: grey;
}

.HomePageMenuButton2:active {
  box-shadow:  -2px lightgrey;
  transform: translateY(2px);
}

      .HelpButton {
        position: absolute;
        border-radius: 10px;
        bottom: 4px;
        left: 4px;
        width: 20px;
        font-size: 16px;
        font-weight: bold;
        background-color: #98b1c0;
        color: white;

      }

 .butMenu {

      margin: 3px 0 0 0;
      padding: 2px 5px 1px 5px;
      font-size: 18px;

   }
   
    .CentralButtons {
      text-align: center;
      width: 98%;
      margin: 0;
   }
   
    .HTMbutMenu {
        width: 230px;
        border-style: solid;
        background-color: #c7435f;
        color: white;
        margin: 5px 5px 15px 5px;
        border-radius: 5px;
        padding: 5px 5px 5px 5px;
        font-size: 22px;
        font-family: Helvactica, Arial, Sans-serif;
        font-weight: normal;
      }

      .HTMbutMenu:disabled {
        background-color: grey;
      }

      .HTMbutMenu:active {
        box-shadow: 0px -2px lightgrey;
        transform: translateY(2px);
      }


/* *******************************/
/* *******************************/



.OnlineMessage {
   font-size: 14px;
   color: green;
   text-align: left;
   position: relative;
   top: 5px;
   left: 0px;
}
/* *******************************/
/* *******************************/


.TextEntry {
  padding: 5px;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: whitesmoke;
  text-align: center;
  width: 180px;
  color: black;
  justify-content: center;
}


.AudioDiv {
      position: relative;
      flex-wrap: wrap;
      display: flex;
      font-size: 20px;
     text-align: center;
      color:white;
      background-color: #3d5476;
      margin: 0px;
      width: 100%;
      min-width: 320px;
      margin-top: 5px;
      padding: 2px
   }

   .AudioTableDiv {
      font-size: 20px;
      font-weight: bold;
      position: relative;
      flex-wrap: wrap;
      display: flex;
      background-color: #93b1c2;
      margin: 0px;
      width: 100%;
      min-width: 320px;
      margin-top: 5px;
      padding: 10px
   }
   
     .OuterAudioDiv1 {
      background-color: lightgreen;
      width: 45%;
      min-width: 340px;
      margin: 5px;
      padding: 10px;
       flex-grow: 1;
     font-size: 25px;
  

   }

   .OuterAudioDiv2 {
      background-color: pink;
      width: 45%;
      min-width: 340px;
      margin: 5px;
      padding: 10px;
 flex-grow: 1;
     font-size: 25px;
  
   }

   .audio {
      margin-top: 20px;
      margin-right: 10px;
   }
   
#video{
    width:320px;
    height:auto;
    margin-top: 0px;   
    margin-left: 0px;   
}


/* *******************************/
/* *******************************/
/* *************TABLE CSS ******************/

   .DataEntryTable {
      border-collapse: collapse;
      border-spacing: 0;
      margin: 5px auto;
      border-width: 2px;
      text-align: center;
      width: auto;
    }

    .DataEntryTable td {
      font-size: 16px;
      padding: 5px 2px;
      border-style: solid;
      border-width: 2px;
      overflow: hidden;
      word-break: normal;
      min-width: 150px;
      border-color: black
    }

    .DataEntryTable th {
      font-size: 18px;
      font-weight: normal;
      padding: 1px 5px;
      border-style: solid;
      border-width: 2px;
      overflow: hidden;
      word-break: normal;
      border-color: black;
      table-layout: fixed;
    }

    .DataEntryTable .DataEntryCell {
      font-size: 16px;
      padding: 5px 5px;
      border-color: #000000;
      text-align: left;
      vertical-align: middle;
      color: black;
    }
    
    .DataEntryTable .DataEntryCellGrey {
      font-size: 16px;
      padding: 5px 5px;
      border-color: #000000;
      text-align: left;
      vertical-align: middle;
      color: black;
      background-color:lightgrey;
    }
    
       .DataEntryTable .DataEntryButtonCell {
      font-size: 16px;
      padding: 5px 5px;
      min-width:80px;
      border-color: #000000;
      text-align: middle;
      vertical-align: middle;
      color: black;
    }

    .DataEntryTable .DataEntryNameCell {
        font-size: 16px;        
        padding:2px 5px;
      border-color: #000000;
      text-align: left;
      vertical-align: middle;
     background-color: #93b1c2;

      color: black;
      

    }

    .DataEntryTable .DataEntryBlankCell {
      border-width: 0;
      background-color: whitesmoke;
      color:grey;
      font-size:14px;
      height: 25px;
      vertical-align: middle;
    }
    
   .DataEntryTable .DataEntryBlinking{
 	  font-weight: bold;
    text-align: left;
    vertical-align: middle;
    background-color: whitesmoke;
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: orange;    }
    49%{    color:  orange }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: orange;    }
}


  .HomePageTable {
        border-collapse: collapse;
        border-spacing: 0;
        margin: 0px auto;
        text-align: left;
        width: 210px;
      }

      .HPTcell {
        font-size: 16px;
        padding: 1px 5px;
        border-style: solid;
        border-width: 1px;
        border-color: white
      }
 /***************************************/   
 /***************************************/   
 /***************************************/   
    
    .CompetitorTable {
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0px auto;
      border-width: 2px;
      text-align: center;
      width: 98%;
    }


    .tg {
      border-collapse: collapse;
      border-spacing: 0;
      margin: 0 auto;
      border-width: 2px
   }

   .tg td {
      font-family: Arial, sans-serif;
      font-size: 16px;
      padding: 10px 8px;
      border-style: solid;
      border-width: 1px;
      overflow: hidden;
      word-break: normal;
      border-color: black;
   }

   .tg th {
      font-family: Arial, sans-serif;
      font-size: 12px;
      font-weight: normal;
      padding: 5px 5px;
      border-style: solid;
      overflow: hidden;
      word-break: normal;
      border-color: black;
      table-layout: fixed
   }

   .tg .TableHeader1 {
      font-weight: bold;
      border-color: black;
      text-align: center;
      vertical-align: middle;
      background-color: lightgrey;
      color:black;
   }
   
   .tg .TableCell1 {
      font-weight: bold;
      border-color: black;
      text-align: center;
      vertical-align: middle;
      color:black;
   }
   
   
   
   
   /******************************************************/
   	.TimerMainDiv {
		font-family: Arial, sans-serif;
		font-size: 20px;
	}

	.TopMenuDiv {
		display: flex;
		flex-wrap: wrap;
		margin: 2px 0px 2px 0px;
		background-color: #3d5476;
		width: 100%;
		text-align: center;
		justify-content: center;
		padding: 5px 0px;
		font-size: 20px;
		height: auto;
		color: white;

	}

	.RaceResDiv {
		display: flex;
		flex-wrap: wrap;

		margin: 5px 0px 2px 0px;

		background-color: #3d5476;
		width: 100%;
		text-align: center;
		justify-content: center;
		padding: 25px 0px;
		font-family: Arial, sans-serif;
		font-size: 20px;
		height: auto;
		color: white;

	}


	.VideoPhoto {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0px;
		box-shadow: 1px 1px 3px black;
		margin-top: 0px;
		margin-bottom: 0px;

	}


	.VideoPhoto1 {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0px;
		box-shadow: 1px 1px 3px black;
		margin-top: 0px;
		margin-bottom:10px;

	}

	.VideoOnly {
		width: auto;
		height: auto;
		margin-top: 0px;
		margin-left: 0px;
		-moz-transform: scale(1) -webkit-transform:scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}

	.SectionHeader {
		margin: 5px 0px 2px 0px;
		font-family: Arial, sans-serif;
		font-size: 20px;
		font-weight: bold;
		width: 100%;
		color: white;
		background-color: #3d5476;
		padding: 5px 0px 5px 0px;
		justify-content: center;
		text-align: center;



	}

	#FlagAndTimerDiv {
		font-family: Arial, sans-serif;
		margin: 0px;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		background-color: WhiteSmoke;
		justify-content: center;
	}

	#OuterTimerDiv {

		padding: 0px;
		background-color: #3d5476;
		width: 50%;
		min-width: 320px;
		height: Auto;
		min-height: 230px;
	}


	#MainResultsTableDiv {
		color: black;

	}


	#VideoAndStoreDiv {
		margin: 10px 0px 0px 0px;
		font-family: Arial, sans-serif;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		background-color: #93b1c2;
		justify-content: center;
		padding: 0px 0px px 0px;
		height: auto;
	}


	#VideoDiv,
	#VideoDiv2 {

		background-color: #93b1c2;
		margin: auto;
		margin-top: 0px;

		width: 49%;
		min-width: 320px;
		max-width: 340px;
		padding: 2px;
		height: auto;
	}


	#NumberButtonsDiv {
		justify-content: center;
		text-align: center;
		font-size: 18px;
		margin: 5px 3px 0px 3px;
		background-color: #3d5476;
		border-radius: 5px;
		width: 47%;
		min-width: 320px;
		padding: 5px;
		height: auto;
		color: white;
	}

	#NumberListOuterDiv {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

	}

	#NumberPadDiv {
		bottom: 10px;
		height: 350px;
		bottom: 10px;
		padding: 0px;
		padding-top: 10px;
		margin: 0px;
		width: 35%;
		width: 150px;
		padding: 5px;
	}


	.ResultsTableDiv {
		text-align: center;

		overflow-x: auto;
		padding: 7px;
		background-color: whitesmoke;
		margin: 2px;
		overflow-y: auto;
		height: 250px;
	}


	#NumberListDiv {
		text-align: center;

		overflow-x: auto;
		margin: 0px;
		background-color: WhiteSmoke;
		color: black;
		width: 63%;
		min-width: 80px;
		margin-top: 5px;
		padding: 0px;
		height: calc(30px + 64vh);
		min-height: 280px;
	}

	#ConfigTable {
		background-color: #3d5476;
		width: 98%;
		min-width: 340px;
		margin-top: 10px;
		padding: 10px;
		color: white;

	}

	#FlagDiv {
		height: Auto;
		min-height: 230px;
		margin: 0px;
		background-color: #93b1c2;
		text-align: center;
		min-width: 320px;
		width: 50%;
	}

	.InnerFlagDiv {
		width: auto;
		padding: 3px 5px 0px 5px;
		margin: 5px 5px 5px 5px;
		box-shadow: 1px 1px 3px black;
		height: auto;
		background-color: #83a1b2;
		border-radius: 5px;
		border: solid 3px #3d5476;

	}

	.ButtonAndFlagDiv {
		font-size: 20px;
		font-family: Arial, sans-serif;

		width: auto;
		padding: 3px 5px 8px 5px;
		margin: 3px 5px 5px 5px;
		box-shadow: 1px 1px 3px black;
		height: auto;
		background-color: #3d5476;
		border-radius: 5px;
		color: white;
	}




	#AvailableNumbersDiv {
		background-color: #93b1c2;
		text-align: center;
		min-width: 250px;
		width: 40%;
		padding: 2px;

	}

	.InnerVideoDiv {
		width: 98%;
		padding-top: 3px;
		padding-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
		margin-top: 5px;
		height: auto;
		border: solid 3px #3d5476;
		background-color: #83a1b2;
		border-radius: 5px;
		box-shadow: 1px 1px 3px black;
		text-align: center;
		font-size: 22px;
		font-weight: bold;


	}

	.InnerStoreButtons {
		position: relative;
		background-color: #83a1b2;
		width: 32%;
		max-width: 300px;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		padding: 5px 2px;
		color: white;
		border-radius: 5px;
		box-shadow: 1px 1px 3px white;
		height: calc(10px+ 64vh);
		min-height: 260px;

	}

	.InnerVideoKeyPadDiv {

		margin-top: 5px;
		margin-bottom: 5px;
		background-color: #3d5476;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		padding: 10px;
		color: white;
		border-radius: 5px;
		box-shadow: 1px 1px 3px white;

		font-size: 20px;
		font-weight: normal;



	}

	.StartingModeDiv {

		margin-top: 5px;
		margin-bottom: 5px;
		background-color: black;
		margin-left: 10px;
		margin-right: 10px;
		width: 200px;
		text-align: center;
		padding: 10px 5px;
		color: white;
		border-radius: 5px;
		box-shadow: 1px 1px 3px white;
		display: inline
	}


	.InnerTimerKeysDiv {
		background-color: #83a1b2;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		padding: 5px;
		color: white;
		border-radius: 5px;
		box-shadow: 1px 1px 3px white;

	}

	.BodgeDiv {
		font-size: 18px;
		font-family: Arial, sans-serif;
		background-color: #83a1b2;
		width: 90%;
		margin: auto;
		margin-bottom: 10px;
		text-align: center;
		padding: 5px;
		color: white;

	}


	.TimerDisplay {
		background-color: black;
		border-radius: 5px;
		border: 3px solid grey;
		width: auto;
		margin: 0px 5px 10px 5px;
		height: auto;
		font-size: calc(30px + 2vw);
		font-family: Helvactica, Arial, Sans-serif;
		font-weight: bold;
		text-align: center;
		padding: 5px 0px 2px 0px;
		vertical-align: middle;
		line-height: 95%
	}

	.TimerDisplay2 {
		background-color: black;
		width: 90px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 12px;
		margin-bottom: 0px;
		height: auto;
		font-size: 22px;
		font-family: Helvactica, Arial, Sans-serif;
		font-weight: bold;
		text-align: center;
		padding: 5px;
		vertical-align: middle;

		line-height: 95%;
		border-radius: 6px;
		border: 3px solid grey;
	}



	#TimerDiv {
		width: 95%;
		margin: 2px;
		padding: 2px
	}

	#StartFlagsDiv {
		padding-top: 5px;
		text-align: center;
	}

	.flags {
		width: auto;
		max-width:55px;
		height: auto;
		max-height: 55px;
	}

	.Nflag {
		padding: 0px;
		margin: 0px;
		text-align: center;
		font-size:18px;
		font-weight: bold;

	}

	.SMflags {

		position: relative;
		top: 7px;
		text-align: center;
		width: auto;
		height: 30px;
	}

	.SMflags2 {

		position: relative;
		top: 7px;
		text-align: center;
		width: auto;
		height: 30px;
		background-color: WhiteSmoke;

	}



	


	.buttonText {
		color: black;
		margin: 0;
		font-size: 12px
	}

	#VideoArea {
		position: relative;
		overflow: hidden;
		width: 320px;
		margin: auto;
		height: 420px;
		margin-top: 5px;
		margin-bottom: 5px;

	}

	#video {
		width: auto;
		height: auto;
		margin-top: 0px;
		margin-left: 0px;
	}

	.HelpDiv {
		width: 300px;
		height: 400px;
		margin: auto;
		padding: 10Px;
		background-color: #3d5476;
		font-size: 16px;
		font-family: Helvactica, Arial, Sans-serif;
		color: white;
		overflow: auto;
		text-align: left;


	}

	#OverLayArea {
		position: relative;
		top: -425px;
		overflow: hidden;
		width: 320px;
		margin: auto;
		padding: 0px;
		margin-bottom: -430px;
		height: auto;

	}

	#LineOverlay {
		width: 320px;
		height: 420px;
		margin: 0px;
		padding: 0px;
		background-color: transparent;
		opacity: 0.5;

	}

	.PhotoOptions {
		border: 5px solid #3d5476;
		width: 200px;
		background-color: #83a1b2;
		position: relative;
		top: -200px;
		margin: auto;
		padding: 20px 20px 20px 20px
	}

	#PhotoArea {
		width: 320px;
		margin: auto;
		height: 420px;
		margin-top: 5px;
		margin-bottom: 5px;

	}

	.TimerRepeatDiv {
		background-color: yellow;
		margin: 0px;
		width: 49%;
		min-width: 320px;
		margin-top: 0px;
		padding: 2px;
		height: auto;

	}

	#PhotoCount {
		font-size: 22px;
		;
		font-weight: bold;
		padding-top: 20px;
	}

	#startPhoto {
		width: 320px;
		margin: auto;
		padding: 0px;
		height: 420px;
		margin-top: 0px;
		margin-bottom: 0px;
	}


	#CentralButtons2 {
		padding-top: 10px;
		padding-left: 20px;
	}

	.SaveButton {
		background-color: orange;
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 3px 6px;
	}

	.SaveButton:disabled {
		background-color: grey;
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 3px 6px;
	}

	.SaveButton2 {
		background-color: green;
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 3px 6px;
	}

	.SaveButton2:disabled {
		background-color: grey;
		margin-top: 2px;
		margin-bottom: 2px;
		padding: 3px 6px;
	}

	.LargeButton {

		font-size: 20px;
		padding: 5px 15px 5px 15px;
		margin-bottom: 7px;
	}

	.ExtraLargeButton {
		width: 84%;
		border-width: 5px;
		font-size: 26px;
		min-width: 100px;
		padding: 12px 12px 12px 12px;
		margin: 5 px 5px ;
	}



	.ArrowBt {
		font-size: 17px;
		padding: 5px 10px 5px 10px;
		margin: 0px 10px 0px 10px;
	}

	.VideoHelpBut {
		font-size: 15px;
		padding: 5px 5px 5px 5px;
		margin: 0px 5px 0px 5px;
	}


	.VideoRecordToggleBut {
		width: 85%;
		min-width:100px;
		font-size: 15px;
		padding: 2px 2px 2px 2px;
		margin: 5px 2px 5px 2px;
	}


	.NumberBT {
		font-size: 17px;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 2px;
		margin-right: 2px;
	}

	.RaceNoBut {
		background-color: #c7435f;
		margin-top: 10px;
		padding: 4px 20px 4px 20px;
		font-size: 16px;
	}


    .SmallBut {
      background-color: #c7435f;
      color: white;
      font-size: 14px;
      padding: 2px 15px 2px 15px;
      margin: 10px 5px 3px 0px;
    }

    .SmallBut:disabled {
      background-color: grey;
    }

    .SmallBut:active {
      box-shadow: 0px -2px lightgrey;
      transform: translateY(2px);
    }




	.VerySmallBT {
		font-size: 17px;
		padding: 2px 10px;
		padding-left: 10px;
		padding-right: 10px;
		margin: 0px 5px;
	}

	.EditBT {
		font-size: 14px;
		padding: 1px 5px;
		margin: 0px 0px;
	}


	.NumberBT2 {
		font-size: calc(10px + 0.48vw);
		padding-left: 20px;
		padding-right: 20px;
		margin-left: 3px;
		margin-right: 3px;
		padding-top: 5px;
		padding-bottom: 5px;
	}


	.AlertMess {
		opacity:1;
		padding: 10px;
		font-size: 17px;
		line-height:1.1;
		font-family: Arial, sans-serif;
		text-align: center;
	    position: fixed;
        /* center the element */
        top:20px;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        /* give it dimensions */
        width: 300px;
		border: 3px solid;
		border-color: grey;
		background-color: lightcyan;
	}

	.AmessBut {
		font-size: 16px;
		padding-left: 10px;
		padding-right: 10px;
		margin-left: 2px;
		margin-right: 2px;
	}


/*****************Key board ************************/
.KeyBoardBut {
		Width:55px;
		border-color: black;	
		font-size: 16px;
	    padding:2px 0px;
		margin: 4px 7px;
	}
	
	
	.KeyboardDiv {
		opacity:1;
		padding: 5px 2px 2px 5px;
		font-size: 18px;
		font-family: Arial, sans-serif;
		position: fixed;
		top: 100px;
		left: calc((100% - 250px)/2);
		width: 260px;
		height:175px;
		border: 3px solid;
		border-color: grey;
		background-color: lightcyan;
	}
	
 
.SetNumber {
		text-align: center;
		background-color: whitesmoke;
		height: 20px;
		width:140px;
		border: 2px solid;
		border-radius: 5px;
		padding-top: 2px;
		border-color: black;
		font-size: 16px;
		color: black;
		margin:auto
	}
	


	.CompetitorTableDiv {
		overflow-x: auto;
		padding: 7px;
		background-color: whitesmoke;
		margin: 2px;
		overflow-y: auto;
		height: 200px;
	}


	.tg {
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0px auto;
		border-width: 2px;
		width: 100%;
		color: black;
	}



	.tg td {
		font-family: Arial, sans-serif;
		font-size: 15px;
		padding: 8px 3px 8px 3px;
		border-style: solid;
		border-width: 2px;
		overflow: hidden;
		word-break: normal;
		border-color: black;
	}

	.tg th {
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-weight: normal;
		padding: 5px 3px 5px 3px;
		border-style: solid;
		border-width: 2px;
		overflow: hidden;
		word-break: normal;
		border-color: black;
		table-layout: fixed
	}



	.tg .tg-g7sd {
		font-weight: bold;
		border-color: black;
		text-align: center;
		vertical-align: middle;
		background-color: lightgrey
	}

	.tg .tg-g7sda {
		font-weight: bold;
		border-color: black;
		text-align: center;
		vertical-align: middle;
		background-color: #f44336;
		color: white;
		padding-left: 10px;
		padding-right: 10px
	}

	.tg .tg-key {
		font-weight: bold;
		border-color: grey;
		text-align: center;
		vertical-align: middle;
		background-color: #c7435f;
		color: white;
		padding-left: 15px;
		padding-right: 15px
	}



	.tg .tg-0lax {
		text-align: center;
		vertical-align: middle
	}

	.tg .tg-0lax2 {
		text-align: center;
		vertical-align: middle;
		font-size: 15px;
		padding: 7px 7px;
	}

	.tg .tg-0lax2a {
		text-align: center;
		vertical-align: middle;
		font-size: 15px;
		color: red;
		padding: 5px 5px;
		font-weight: bold;
	}

	.tg .tg-0lax2aa {
		width: 50px;
		text-align: center;
		vertical-align: middle;
		font-size: 15px;
		color: red;
		padding: 5px 5px;
		font-weight: bold;
	}





	.tg .tg-0lax2b {
		text-align: center;
		vertical-align: middle;
		font-size: 13px;
		color: green;
		padding: 5px 5px;
	}

	.tg .tg-0lax2c {
		text-align: center;
		vertical-align: middle;
		font-size: 12px;
		padding: 2px 2px;
		max-width: 20px;
	}
	
	.tg .tg-0lax2d {
		text-align: center;
		background-color: #e8e8e8;
		vertical-align: middle;
		font-size: 14px;
		padding: 8px 2px;
		max-width: 25px;
		color:darkblue;
	}



	.tg .EventKey {
		text-align: center;
		padding: 0px;
		margin: 0px;
		vertical-align: middle;
		font-size: 5px;
		background: white;
		border-style: none;
	}

	.tg .EventValue {
		padding: 3px 5px;
		border-style: solid;
		border-width: 3px;
		border-color: black;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
		font-size: 18px;
	}

	.tg .EventBlank {
		border-style: none;
		vertical-align: top;

	}



	.tg2 {
		border-collapse: collapse;
		border-spacing: 0;
		margin: 0px auto;
		border-width: 2px
	}



	.tg2 th {
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-weight: normal;
		padding: 10px 5px;
		border-style: solid;
		border-width: 2px;
		overflow: hidden;
		word-break: normal;
		border-color: black;
		table-layout: fixed
	}


	

	.VerySmallFlag {
		width: 18px;
		height: 18px;
		margin: 0px 0px 0px 20px;
		padding: 0px;
	}

	.TimerType {
		color: white;
		margin: 5px 0px 0px 0px;
		font-size: 17px;
		text-align: center;

	}

	.TimerType2 {
		color: white;
		margin: 0px 0px 0px 0px;
		font-size: 17px;
		text-align: center;

	}


	.TickBox {
		margin: 0px 0px 0px 5px;
		padding: 0px 2px 0px 2px;
		background-color: whitesmoke;
		color: black;
		border: 2px solid grey;
		width: 15px;
		display: inline-block;
	}


	.RecordVisualizer {
		height: 64px;
		width: 256px;
		border: solid 3px #3d5476;

	}

	.ProgressBar {
		width: 256px;
		height: 6px;
		background-color: grey;
		margin: auto;
		margin-top: 5px;
		margin-bottom: 5px;
		border-style: solid;
		border-width: 1px;
		border-radius: 3px;
	}

	.ProgressBarDsp {
		width: 0;
		height: 6px;
		background-color: red;

	}



    .PWcode {
      padding: 5px;
      margin: auto;
      margin-top: 5px;
      margin-bottom: 20px;
      background-color: whitesmoke;
      text-align: center;
      width: 180px;
      color: black;
      justify-content: center;


    }