* {
  box-sizing: border-box;
}

BODY {
/*	font-size:150%; */
}

.clsContextMenu {
  -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
  -moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
  box-shadow: 0 0 12px rgba(0,0,0,.6);
  -webkit-background-clip: padding;
  background-clip: padding-box;
  -webkit-border-radius: .3125em /*{global-radii-blocks}*/;
  border-radius: .3125em /*{global-radii-blocks}*/;
}

th {
  position: sticky;
  top: 0; /* Don't forget this, required to stick*/
}

.clsDet {
  overflow:auto !important;
}


.clsInfo {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.clsInfo td, .clsInfo th {
  border: 1px solid #ddd;
  padding: 8px;
}

.clsInfo tr:nth-child(even){
  background-color: #f2f2f2;}
  }

.clsLabel0 {
  background-color: #f0f0f0;
  border: #ddd solid thin;
  width:5em;
  }

.clsLabelD {
  background-color: #f0f0f0;
  border: #ddd solid thin;
  width:12em;
  }



.clsLabel1 {
  background-color: #f0f0f0;
  border: #ddd solid thin;
  width:3em;
  height:1.2em;
  text-align: center;
  }

.clsLabel2 {
  background-color: #f0f0f0;
  border: #ddd solid thin;
  height:1.2em;
  text-align: center;
  }

.clsLabel1l {
  text-align: left;
  }


  INPUT, SELECT {
  	font-family:sans-serif /*{global-font-family}*/;
  	font-size:100%;        /* was 150% and 3em for smaller screens */
  	width:2em;
padding:0px 1px 0px 3px;
margin:0px;
   }


.clsNum {
  width:4em;
  }


/* sizing:  ipads OK at 100% and show up as width 768. 10" Android tablet needs larger and gives 768 or 1024.  SMall phone A32 gives width385 (854 landscape) */


/* -----smaller screens ----------*/
@media (max-width: 599px){

.clsText {
	width:12em;
  }

.clsLabel2 {
	font-size:150%;
  }

}


@media (min-width: 600px){

  .clsText {
	  width:24em;
    }


  .clsLabel1 {
  	font-size:200%;
    }
  .clsLabel2 {
  	font-size:300%;
    }
}

@media (min-width: 800px) and (max-width: 1280px) {     /* eg 10" Android tablet*/
/*@media (min-width: 800px) {     /* eg 10" Android tablet*/
  INPUT, SELECT {
  	font-size:150%;        /* was 150% and 3em for smaller screens */
  	width:2em;
   }

   .clsText {
    	width:24em;
      }


  .mnuPop {
  	font-size:150%;
    }

  .clsLabel1 {
  	font-size:200%;
    }
  .clsLabel2 {
  	font-size:300%;
    }
}

@media (min-width: 1282px){
  INPUT, SELECT {
  	font-size:100%;        /* was 150% and 3em for smaller screens */
  	width:2em;
   }

  .clsText {
  	width:36em;
    }

}


input[type=checkbox] {
/*  transform: scale(1.5); */
	font-size:100%;        /* was 150% and 3em for smaller screens */
	width:2em;              /*override media setting*/
  min-width:20px;
  min-height:20px;
}

.clsChk {
  ztransform: scale(1.5);
/*	width:2em;              /*override media setting*/
  width:100%;
  height:100%;    /*      not good on ipad (very small) */
/*  min-width:20px; */
/*  min-height:20px; */
}



.clsTextNarrow {
	width:5em;
  }

.clsTextMid2 {
	width:7em;
  }

.clsTextMid {
	width:12em;
  }

.clsTextNarrow1 {
	width:2em;
  }

  INPUT, SELECT {
  	font-size:150%;        /* was 150% and 3em for smaller screens */
  	width:2em;
   }

.clsTextWide, .clsTextWide.Input {
 	font-size:100%;
 	width:36em;
  }


@media screen {
  .clsPrintHeader {
    display:none;
    }
}
@media print {

  body {
  margin: 0;
  }

  .pagebreak {
     clear: both;
     page-break-after: always;
     }


  .ui-content, ui-page {
    overflow:visible;
/*    position:static; */
      }


.ui-header, .ui-footer, .out {
  display: none;
  visibility: hidden;
  }

.clsPrintHeader {
  top:0px;
  left:0px;
  width:100%;
  padding-top:0px;
  position:relative;
  z-index:1000;
  }


.clsScroll, .clsScrollBtn, .clsHS {
  display:none;
  }

@page {                    /*test setting these*/
/*    size: A4 landscape; */
/*    margin: 10%; */
}

}


#imsecstartat {
	width:4em;
  }

#imsecendn, #imstopwatchn, #imsecstartn  {
	float:left;
  }


#imsecendprevdriver, #imstopwatchprevdriver, #imsecstartprevdriver {
	margin-top:20px;
  }

.clsDialogHdr {
  padding:0.6em;
}


.clsNotes {
 width:97%;
}

.clsTime {
 width:4em;
}
.clsSTime {
 width:5em;
}

/*
button {
  height: 2.4em;
}
*/


.btnimgwrapper img:last-child {
  display: none;
}
.btnimgwrapper:hover img:last-child {
  display: block;
}
.btnimgwrapper:hover img:first-child {
  display: none;
}


.clsBtnOff:hover, .clsBtnOn {
  display:none;
}
.clsBtnOn:hover {
  display:block;
}


.clsSpin {
  font-family:sans-serif; /*{global-font-family}*/;
  font-size:100%;
	width:2em;
	text-align: center;
  border: #ddd solid thin;
  background-color:#c9c9c9;
}

.clsDrsgPad {
  position: fixed;
  top:64px;
  left:270px;
  border-radius: 15px;
}

.clsDrsgPadT, .clsDrsgPadT td, .clsDrsgPadT tr {
  border-collapse: collapse;
  }

.clsDrsgPad div {
	font-weight:normal;
  border-radius: 15px;
}



.clsDrsgPadT td {
	font-size:30pt;
  width:120px;
  }

.clsDrsgP {
	font-size:60pt;
  width:1.4em;
}



TABLE {
  border: none;
  margin: 0px;
/*  padding: 0px;*/
}

.clsPopup td {
  height: 1.5em;
  }


.clsTextInput {
  border: #ddd solid thin;
  padding: 4px;
  line-height:1.4em;
}


.clsDrsg, #imdrsgs {
	font-size:60pt;
}




.ui-content {
  padding: 0px;
}


P {
/*  margin-left: 3;*/
  margin-top: 5px;
  margin-bottom: 5px;
}

HR {
  border: none;
  border-top: 1px solid #A0A0A0;
}


H3 {
  font: bold 14pt Arial;
  margin-top: 0px;
  margin-bottom: 10px;
}


.clsTSReadWrite, .clsTSWriteDiscouraged {
  border-width: 1px;
  border-style: solid;
}


THEAD {
  display: table-header-group;
}


.clsDP5 {
  margin-bottom:-4px;
}

.clsDP {
  margin-bottom:-3px;
}


.clsHS TD {
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
  text-align: center;
  cursor: default;
}




td.clsHSBTN {
  padding: 0px;
  border-top: hidden;
}

TD.clsHSBTN > DIV {  /*container for non-TP horiz scroll buttons*/
 position: relative;
 height: 15px;
}

TD.clsHSBTN > DIV > DIV {  /*non-TP horiz scroll buttons*/
  position: absolute;
  height: 15px;  /*needs to match container's value*/
  width: 17px;
  padding: 0px;
  top: 0px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.65;
  border: none;
}

TD.clsHSBTN > DIV > DIV:hover {
  background-color: #aaaaaa; /*darker because opacity is less than 1*/
}

.clsHSBTN, .clsAxis TD, .clsAxis TH {
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
  cursor: default;
  padding-left: 2px;

/*  text-align:center; */
}


.GCSizer {  /*wraps content in grid cells that's supposed to be a specific size*/
  white-space: nowrap;
  overflow: hidden;
  display: block;
  padding: 0px 1px;
}


.semitrans {
  opacity:.5;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
}

.chkMulti {
  background:url(images/grey.gif);
  background-repeat:no-repeat;
  background-position:center center;
}



.clsRowSubSetDivide {
  height: 2px;
  font-weight:bold;
  }

.clsRowSubSetDivide TD {
  font-weight:bold;
  }


.clsRowDel, .clsRowDel TD, .clsRowDel Input {
  text-decoration: line-through;
}

/*
.clsRowDel, .clsRow, .clsRow2, .clsRowRO, .clsRowRO2, .clsRowHilite {
  height: 22px;
  }
*/

/*
.clsRowDel TD, .clsRow TD, .clsRow2 TD, .clsRowRO TD, .clsRowRO2 TD, .clsRowHilite TD {
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
  padding-bottom: 0px
}
*/

.clsGrid INPUT {
  border: none;
  font: 12pt Arial;
}

.clsGrid > TBODY > TR:not(.clsRow0) {  /* normal (non-totals) rows */
  font: 12pt Arial;
}

.clsRowRO, .clsRowRO INPUT, .clsRowRO2, .clsRowRO2 INPUT {
  cursor: default;
}

/*
.clsRow0 TD, .clsRow00 TD, .clsRow01 TD{
  border-style: solid;
  border-width: 1px;
  border-collapse: collapse;
}

.clsRow1 TD {
  border-style: solid;
  border-width: 1px;
}
*/


.clsGrid {
  margin: 0px;
  padding-top: 0px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 0px;
  border-collapse: collapse;
/*  border-style: solid;   cleared to avoid border on scrollbar corner cells */
  border-width: 1px;
}

.clsGrid TD  {
  margin: 0px;
  padding-top: 0px;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 0px;
  border-collapse: collapse;
  border-style: solid;
  border-width: 1px;
  height:29px;  /*b2647: this is closer to the actual height when a memo icon is present (so gives a more accurate result in the rows per page calculation) */

}

.clsImPad DIV {
  margin-left:3px;
  margin-right:3px;
  }


.clsDa {
  margin-top:-2px;
  line-height:7px;      /*helps alignment... or use margin-top:-7px but then disappears on IE6*/
  float:right;
}

.mnuBar {
  white-space: nowrap;
}

.mnuBar td {
  padding: 0px;
}

.mnuBar .mnuBarItem {
  padding: 8px 8px;
}

.mnuBarItem, .mnuBarHilite {
  cursor: pointer;
	font-weight:normal;
}

.mnuPop {
  position: absolute;
  border-width: 1px;
  border-style: solid;
  border-spacing: 0px;
  padding: 0px;
}

.mnuPop td {
  padding: 4px;
  border-width: 0px;
}



.mnuRA {
  display: block;
  margin: auto 0px auto auto;
}

.mnuDots {
  display: block;
  margin: auto 0px auto auto;
  visibility: hidden;
}

.mnuBarHilite .mnuDots {
  visibility: visible;
  opacity: 0.7;
}


.mnuBarItem .mnuLabel {
  padding: 4px 8px;
  }

.mnuBarItem .mnuDrop {
  border-collapse: collapse;
  }


.mnuBarItem .mnuDrop td:nth-child(1) {
  padding: 3px 2px 3px 8px;
  }

.mnuBarItem .mnuDrop td:nth-child(2) {
  padding: 3px 2px 3px 2px;
  }

.mnuBarItem .clsComboBtn:hover td {
  border-color: #cccccc;
  background: #f8f8f8;
  }

.mnuBarItem .clsComboBtn td:hover {
  background: #cccccc;
  color: #000000;
  }

 .divTbl {
  display: table;
  border-collapse: separate;  /* Need separate zero-width borders to avoid pick lists resizing when they get focus (which removes padding and adds a border) */
  border-spacing: 0px;
}

.divTbl > DIV {
  display: table-row;
}

.divTbl > DIV > DIV {
  display: table-cell;
  vertical-align: middle;
}

.divTbl > DIV > DIV > IMG {
  display: block;
}


.clsScroll, .clsScrollBtn, .clsGrid TD.clsScroll, .clsGrid TD.clsScrollBtn {   /* need enough specificity to override row styles in grids */
  border-collapse: collapse;
  border: hidden;
  cursor: default;
  padding: 0px;
  position: relative;
  overflow: hidden; /*DC14Sep18: IE & Edge need this to prevent the scroll button increasing the height of the page */
}

/*DC2Sep18: Centre the arrow images on grid scroll bars */
.clsScrollBtn img {
  display: block;
  margin: auto;
  opacity: 0.8;
}

.clsScrollBtn[data-disabled] img {
  opacity: 0.5;
}

.clsScroll img {
  position: absolute;
  opacity: 0.5;
}

.clsScroll img:hover {
  opacity: 0.75;
}

.clsScroll img.clsActive {
  opacity: 1;
}



.iplSingle, .iplMulti {
  border: solid 1px #008000;
  border: #c0c0c1 solid 1px; /* default; can be overridden in colour files */
  background-color: white; /* default; can be overridden in colour files */
  color: black;
  outline: none;  /* remove default focus highlight */
  box-sizing: border-box;  /* to match default SELECT element */
  display: inline-table;
}

.iplSingle {
  overflow: hidden;
  white-space: nowrap;
}

.iplSingle:hover .iplArrow {
  background-color: #dddddd; /* default; can be overridden in colour files */
}

.iplSingle .iplValue {
  height: 12px;
  padding: 1px 2px;
}

.iplSingle:focus .iplValue {
  color: white;
  background-color: #5599ee;
  border: 1px solid white;
  padding: 0px 1px;
}

.iplSingle:not(.iplOnDemand) .iplValue {
  overflow: hidden;
}

.iplSingle .iplArrow {
  opacity: 0.7;
  padding: 0px 3px;
}

.iplOnDemand:not(:hover):not(:focus):not(.iplDropped):not(.iplFocusWithin) {
  border-color: transparent;
}

.iplOnDemand:hover .iplValue, .iplOnDemand:focus .iplValue, .iplOnDemand.iplDropped .iplValue, .iplOnDemand.iplFocusWithin .iplValue {
  overflow: hidden;
}

.iplPlus.iplDropped .iplValue {
  overflow: visible;
}

.iplOnDemand:not(:hover):not(:focus):not(.iplDropped):not(.iplFocusWithin) .iplArrow {
  opacity: 0;
}

.iplPlus .iplValue {
  padding: 1px;
}

.iplPlus .iplValue INPUT {
  padding: 0px 1px;
/*  height: 12px; */
  border: none;
  background-color: transparent;
  color: currentColor;
}

.iplPlus .iplValue INPUT::selection {
  color: white;
  background-color: #5599ee;
}

.iplPlus.iplDropped .iplArrow {
  opacity: 0;
}

.iplPopup {
  position: relative; /* so that we can position controls relative to the dialog body - NEEDED??? */
  border: solid 1px #808080;
}

.iplListHdr {
  display: none;
}

.iplList TR.clsRow, .iplList TR.clsRowHilite, .iplList .clsScrollBtn {
  height: 15px;
}

.iplList .clsRowRO, .iplList .clsRowHilite { /*Note: in spite of the name, clsRowRO and clsRowHilite can be applied to tables cells as well as to rows*/
  background-color: white; /* default; can be overridden in colour files */
  color: black;
  border: none;
  padding: 0px;
}

.iplList:not(.noHover) .clsRow > TD:hover {
  background-color: #dddddd; /* default; can be overridden in colour files */
}

.iplList SPAN {
  background-color: transparent;
  color: currentColor;
  height: 15px;
  /*These properties prevent odd words in the list items being selected by (e.g.) double-click - https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.iplList TR .clsRowHilite, .iplList .clsRowHilite TD {  /*Highlighting can be specified at row or cell level*/
  background-color: #5599ee; /*system colours are deprecated, and ugly in default Edge & chrome: black text on a too-dark blue background*/
  color: white;
}

.iplList:not(.noHover) .clsRowHilite .clsRowRO:hover, .iplList:not(.noHover) .clsRow .clsRowHilite:hover {
  background-color: #66aaff;
}

.iplList .iplGrid {
  vertical-align: top;
}


.igTScroll {
//  touch-action: pan-x;  /* we use touch to scroll the grid vertically, so don't want it scrolling the page itself */
  touch-action: none;  /* we use touch to scroll the grid vertically and horizontally, so don't want it scrolling the page itself */
}


.clsRowRO, .clsRowRO INPUT {      /*override imcolours.css*/
  background: #ffffff;
}

.clsRowRO2, .clsRowRO2 INPUT {      /*override imcolours.css*/
  background: #ffffff;
}



.mnuDivider {
  border:none;
  border-top:1px solid;
  border-top-color: #c0c0c1;
}

.clsEditTd  {
  border: 1px solid #d0d0d0;
  padding:6px;
  }

.clsSel {
  width:6em;
  }

/* Live obstacle summary for a commentator: compact enough to scan while watching the arena. */
.imCommLive {
  border:1px solid #b8b8b8;
  background:#fafafa;
  margin:4px 0 14px 0;
  padding:8px;
  max-width:46em;
  }

.imCommLiveHdr {
  background:#e5e5e5;
  font-weight:bold;
  padding:5px 7px;
  margin:-8px -8px 8px -8px;
  }

.imCommLiveCols {
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  }

.imCommLiveCols > div {
  min-width:13em;
  }

.imCommLiveLabel, .imCommLiveMinor, .imCommLiveNote {
  color:#555;
  font-size:85%;
  }

.imCommLiveResult, .imCommLiveTarget {
  margin-top:8px;
  padding:6px;
  background:#fffbdc;
  }

.imCommLiveCue {
  color:#333;
  font-weight:bold;
  margin:4px 6px 0 6px;
  }

.imCommLiveBest {
  margin-top:8px;
  border-collapse:collapse;
  width:100%;
  }

.imCommLiveBest th, .imCommLiveBest td {
  border-top:1px solid #ddd;
  padding:4px 8px 4px 0;
  text-align:left;
  vertical-align:top;
  }

.imCommLiveNote {
  margin-top:6px;
  }

.clsDButton {
  min-width:5em;
  text-align:center;
  vertical-align:middle;
}

.clsBtnN {
  min-width:2em;
  text-align:center;
  vertical-align:middle;
}

.clsPrintNotes {
  margin:10px;
  font-weight:normal;
  }



@media screen {     /*if prefer more colourful on screen... */
  .itab th {
    background: #A9C7f0;
    border-collapse:collapse;
    padding: 3px;
    font: 10pt Arial;
    font-weight: bold;
  }

  .itab, .itab td {
    border-collapse:collapse;
    padding: 6px;
    font: 10pt Arial;
  }


  .itab tr:nth-child(odd) {
   background: #eaeaea;
  }
}
@media print {         /* save ink printing */

  .itab th {
    background: #e6e6e6;
    border-color: #ffffff;
    border-collapse:collapse;

    padding: 3px;
    font: 10pt Arial;
    font-weight: bold;
  }



  .itab, .itab td {
    border-collapse:collapse;
    border-color: #d4d4d4;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    font: 10pt Arial;
  }

}

.relnote {
  margin: 10px;
	font-weight:normal;
}

.relnote p {
  margin-top: 15px;
  margin-bottom: 15px;
  }


.clsShares TD {
  padding-left:8px;
  padding-right:8px;
}

.clsCenter {
text-align: center;
}