.error{
  background:#ba1f38;
  color:#fff;
  width:100%;
  z-index:10000;
  }

  a.link{
    color: #fff;
    text-decoration: none;
  }
  
  .top{
  display:flex;
  flex-direction:row;
  align-items:center;
  width:100%;
  }
  
  .top-logo{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    padding-left:2px;
    }
  
    .top-title{
      display:flex;
      flex-direction:row;
      justify-content:space-around;
      flex:1;
      align-items:center
      }
    
    .top-controls{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    flex:1;
    }
  
  .top-controls>*{
  margin-left:4px
  }
  
  .balance{
  display:flex;
  flex-direction:row;
  border-radius:4px;
  border: 1px black solid;
  height:24px;
  box-sizing:border-box;
  background:#000;
  font-size:10px
  }
  
  .balance-label{
  padding:0px 2px;
  display:flex;
  align-items:center;
  color:#fff
  }
  
  .balance-value{
  display:flex;
  align-items:center;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  padding:0px 2px;
  background:#fff;
  color:#000;
  font-weight:bold
  }
  
  .balance-value .currency{
  color:#797d88;
  font-weight:normal
  }
  
  .top-button{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  width:24px;
  height:24px;
  cursor:pointer;
  box-sizing:border-box;
  color:#fff;
  }
  
  .top-button:hover,.top-button:active,.top-button:focus{
  background:rgba(0,0,0,0.9)
  }
  
  .top-button>*{
  width:6px;
  height:16px
  }
  
  .info-page{
  font-family:'Noto Sans', sans-serif;
  padding:0 8px 16px;
  margin-top:24px
  }
  
  .info-page h1,h2,h3,h4{
  margin:0 0 8px
  }
  
  .info-page h2,h3,h4{
  opacity:0.7
  }
  
  .info-page .description{
  font-style:italic;
  opacity:0.7
  }
  
  .info-page p{
  margin:0 0 8px;
  font-size:14px
  }
  
  .info-page div{
  margin-bottom:16px
  }
  
  /* overflow:hidden, not scroll/auto — .table-container already clips its
     own content, so nothing at the body level should ever need to scroll.
     overflow:scroll unconditionally reserves/shows a scrollbar track even
     when there's nothing to scroll; on macOS this is invisible by default
     (overlay scrollbars), which is why it went unnoticed there, but
     Windows Chrome renders it as a permanently visible scrollbar. */
  html,body{
  margin:0;
  padding:0;
  font-family:'Noto Sans', sans-serif;
  height:100%;
  overflow:hidden;
  color:#000;
  background-color:#03a9f4;
  font-size:14px;
  }
  
  .wrapper{
  display:flex;
  flex-direction:column;

  position:relative;
  }
  
  .game-area{

  display:flex;
  flex-direction:column;
  position:relative
  }
  
  .game-area-results{

  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:+1;
  padding:0px;
  height:30px;
  }
  
  .game-area-results>svg{
  height:74px
  }
  
  .game-area-value{
  display:flex;
  flex-direction: column;
  align-items: center;
	
  height:30px;
  width:100%;
  }
  
  .game-area-value h1{
  margin:0;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  }
  
  .game-area-value h4{
  margin:0;
  font-size:12px;
  font-weight:normal;
  color:rgba(255,255,255,0.57)
  }
  
  .game-area-value-row {
    display:flex;
    flex-direction: column;
    align-items: center;
    flex:1;
  }
  .game-area-value-info {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
   
  }
  .game-area-value-icon {
    width:40px;
    padding: 0px 10px;
  }

  .game-area-results .payout{
  display:flex;
  flex-direction:row;
  text-align:right;
  padding:8px 24px;
  border-radius:8px;
  margin-top:8px;
  width:100%;
  background-color:#fff
  }
  
  
  
  .game-area-results .payout h4{
  margin:0 0 -4px;
  font-weight:normal;
  font-size:14px;
  text-align:right;
  color:rgba(0,0,0,0.57)
  }
  
  .game-area-results .payout h2{
  margin:0;
  font-size:21px;
  color:#000
  }
  

  
  .game-area-results .payout .button{
  cursor:pointer;
  padding:8px 0px 8px 8px;
  width:32px;
  height:32px
  }
  
  .game-area-results .payout svg{
  width:32px;
  height:32px;
  fill:#000
  }
  
  .game-area-content{
  display:flex;
  flex-direction:column;
  position:relative;
  align-items: center;
  height:110px;
  }
  
  .game-area-image{
}
  .contentForm {
      display:flex;
      flex-direction:column;
      position:relative;
  
      width:100%;
      z-index:+1;
  }
  .history{
  display:flex;
  flex-direction:row;
  color:#fff;
  background:#000}
  
  .history h4{
  margin:0;
  display:flex;
  align-items:center;
  font-size:10px;
  font-weight:normal}
  
  .exit {
    display:flex;
    flex-direction:row;
  }
  .bets{
  display:flex;
  align-items:center;
  flex-direction: row;
  overflow:hidden;
  flex: 1;
  margin-left:5px;}
  
  .bets .no-bets{
  color:rgba(255,255,255,0.57);
  font-size:10px;
  font-style:italic}
  
  .bets .entry{
  display:block;
  padding:2px 4px;
  border-radius:4px;
  margin-right:2px;
  margin-left:2px;
  font-size:12px;
  background: #fff;
  color:#000}
    
  .bet-selected {
        background-color: #03a9f4;
        border:1px;
        border-color: #b08828;
        border-style: solid;
    }
  
  .payoutrow{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#000;
  background:#fff}
  
  .payout-calculation{
  display:flex;
  flex-direction:row;
  align-items:center;
  background-color: #fff;
  border-width:0px;
  padding:0px 0;
  font-size:14px}
  
  .payout-calculation>span{
  flex:1;
  color:rgba(0,0,0,0.57)}
  
  .payout-calculation>span strong{
  color:#000;
  margin-left:2px}
  
  .payout-calculation .button{
  display:flex;
  flex-direction:row;
  align-items:center;
  border-radius:4px;
  border:0;
  cursor:pointer;
  background:#fff;
  color:#000}
  
  .payout-calculation .button>div{
  display:flex;
  align-items:center}
  
  .payout-calculation .button span{
  font-weight:bold;
  font-size:14px}
  
  .payout-calculation .button svg{
  width:21px;
  height:21px;
  margin-right:4px;
  fill:#000}
  
  .input-group{
  border-radius:0px;
  display:flex;
  flex-direction:row;
  height:35px;
  position:relative;
  overflow:hidden;
  border:1px solid #000}
  
  .input-group>*{
  flex:1}
  
  .input{
  display:flex;
  flex-direction:row;
  align-items:flex-end}
  
  .input .label{
  position:absolute;
  top:0;
  left:1px;
  color:#797d88;
  font-size:10px}
  
  .input .labelWhite{
      position:absolute;
      top:0;
      left:4px;
      color:#fff;
      font-size:10px}
  
  .input .suffix{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:4px;
  height:30px;
  color:#797d88;
  font-size:10px}
  
  .input .native-input{
  margin:0 1px;
  width:100%}
  
  .input .native-input>input{
  appearance:textfield;
  outline:none;
  border:0;
  padding:0;
  margin:0;
  width:100%;
  height:24px;
  color:#000;
  text-align:center;
  font-size:12px}
  
  

  
  .bet-button{
  margin:3px;
  border:0;
  border-radius:4px;
  cursor:pointer;
  background:#000;
  color:#fff}
  
 
  .bet-button.selected{
  background:#efd68b;
  color:#000}
  
  input.align-right{
  text-align:right}
  
  
      .controlsArea{
         border-top-left-radius:8px;
        border-top-right-radius:8px;
        background:#fff;
  		margin-top:180px;
		}
        
        .controlsArea form{
        display:flex;
        flex-direction:column;
        margin:0}
        
      .control-settings {
        display:flex;
          flex-direction:row;
          align-items:center;
          background-color:#000;
      }
      
      .control-div {
        flex:1;
        display:flex;
          flex-direction:row;
          position:relative;
          box-sizing:border-box;
          align-items:center;
          padding:2px;
        width:100%;
        z-index: 9999;
      }
      

      .controls {
        width:100%;
        
        display:flex;
          flex-direction:column;
          box-sizing:border-box;
      }
      .controls-labels {
      
          display:flex;
          flex-direction:row;
          align-items:center;
          font-size:10px;
          color: #fff;
          padding-left: 5px;
          padding-right: 5px;
      }
      .controls-labels label {
          flex:1;
          white-space:nowrap;
          text-overflow: clip;
          text-align:center;
          
      }

      .controls-labels label:first-of-type {
        flex:unset;
        width:40%;
      }
      
      .controls-controls {
          display:flex;
          flex-direction:row;
          align-items:center;
          margin-bottom: 2px;
          flex:1;
      }

      .controls-footer {
        display:flex;
        flex-direction:row;
        align-items:center;
        background-color:#03a9f4;
        padding:2px;
        flex:1;
	      border:0px;
    }
      .stake-input {
          display: flex;
          flex-direction: row;
          padding:1px;
          border-radius:2px;
          height:100%;
          box-sizing: border-box;
          padding-left:5px;
  
          
      }
      .stake-input>button {
        display:block;
          width:18px;
          height:18px;
          border-radius:18px;
          cursor:pointer;
          border:0;
          appearance: none;
          outline:none;
          background-color: #333;
          color:#6AC768;
      }
       .stake-input>input {
          height:100%;
          box-sizing: border-box;
          height:100%;
		      min-width:0;
          display:inline-block;
          text-align:center;
          appearance: none;
          outline: none;
          border: 1px;
          border-style:dotted;
          background-color: #03a9f4;
          font-size:12px;
          color:white;
  		    width: 10ch;
      }

	.stake-inputInput{
		width:4ch;
		}
      
    .redeal-buttons {
      flex:1;
      display: flex;
      flex-direction: row;
      height:100%;
      box-sizing: border-box;
      background-color: #333;
      padding:1px;
      margin-left:5px;
      margin-right: 1px;
      border:1px;
      border-color: #fff;
      border-style: solid;
    }
    .redeal-buttons>button {
      flex:1;
      height:100%!important;
      padding:1px;
      text-align:center;
      cursor:pointer;
      border:0;
      appearance: none;
      outline:none;
      font-size:12px;
      color:#fff;
      background-color: #333;
  }
      .bet-buttons {
       
        flex:1;
        display: flex;
        flex-direction: row;
        padding:1px;
        border-radius:2px;
        height:100%;
        box-sizing: border-box;
        background-color: #ff7f50;
        padding:3px;
        margin-left:1px;
        margin-right: 1px;
        border:1px;
        border-color: #fff;
        border-style: solid;
      }
      
      .bet-buttons.selected{
        background:#efd68b;
        color:#000}

      .bet-buttons>button {
          flex:1;
          height:100%!important;
          margin:0;
          padding:0px;
          text-align:center;
          cursor:pointer;
          border:0;
          border-radius:2px;
          appearance: none;
          outline:none;
          font-size:12px;
          color:#fff;
          background-color: #0000;
      }

      

      
      .button-border:not(:empty) {
        transform: translateZ(0);}


.svg-container {
        position: relative;
      }
      
      .bottom-svg,
      .top-svg {
        position: absolute;
        top: 0;
      }
      
      .top-svg {
        z-index: 2; /* Make the top SVG appear above the bottom SVG */
      }

  /* .table-container is the whole screen's flex column. Each .rowN is a
     flex item sized by its own content (flex-shrink:0 — never manually
     given a pixel height, since that's a feature-phone-era table-layout
     habit that goes stale the moment any row's real content needs more
     space than assumed) EXCEPT .row3, which is `flex:1; min-height:0` —
     it's handed exactly whatever vertical space is left after the other
     rows claim what they actually need, computed by the browser every
     time, with no manual budget number to keep in sync. This replaced an
     earlier `<table>`/`<tr>`/`<th>` layout that required guessing a
     `calc(100vh - Npx)` budget for .card-area. */
  .table-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    align-items: center;
    position:relative;
    width:100%;
    max-width: 800px;
    margin:auto;
    overflow: hidden;
  }

  .row1, .row2, .row4, .row5 {
    flex-shrink: 0;
    width: 100%;
  }

  .row3 {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  /* Not flush against the bottom edge of the screen. */
  .row5 {
    padding-bottom: 12px;
    box-sizing: border-box;
  }

.card-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.card-area svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}