:root {
  --vboxmain: #000000;           ///#0A0F2A ;
  --white: #E5E5E5;
  --ticket:#000000 ;               //#fff0ff
  --elemento:#b3fa35;                     //#1C3297;
  --ticket_bg:#4D4D4D;                     //#1432A7;
  --lightgray: #efefef;
  --blue: steelblue;
  --black: rgba(0, 0, 0, 0.8);
  --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);  
}

      body {
        font: calc(14px + 6 * ((100vw - 340px) / 680)) Helvetica "Lucida Grande", Tahoma, Verdana, sans-serif;			  
        margin: 0.5px;
        margin-left: 0px;
        padding: 0.5px;
        overflow: hidden;
        background-color: var(--vboxmain);
        background-image: url("img/virtuales.png");
        color:#000000;
        overscroll-behavior: contain;
font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;        
        }

      .plays {
        font: 6px/10px "Lucida Grande", Tahoma, Verdana, sans-serif;			  
        margin: 0px;
        padding: 0px;
        overflow: hidden;
        background-color: var(--vboxmain);
        width: 83vw;
        height:71vh;
        overflow-x: hidden; /* Enable scroll if needed */
	    overflow-y: scroll; /* Enable scroll if needed */
	    -webkit-overflow-scrolling: touch;
	    scrollbar-width: none; /* for Firefox */
   }
.plays::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}           

      .ticket {
        font: 12px/16px "Lucida Grande", Tahoma, Verdana, sans-serif;			  
        margin: 1px;
        padding: 1px;
        overflow-y:auto;
        background-color: var(--ticket);
        height: 20vh;
        width: 15vw;
        overflow-x:scroll;
        scroll-behavior: smooth;

        
	       }

:root {
  --option_yes: "Si";
  --option_no: "No";
}

@font-face {
  font-family: 'Roboto-Light';
  src:url("fonts/Roboto-Bold.ttf");  
  font-display: swap;

}

@font-face {
  font-family: 'Roboto-Black';
  src:url("fonts/Roboto-Black.ttf");  
  font-display: swap;
}

font-face {
  font-family: 'HelveticaNeue';
  src:url("fonts/HelveticaNeue.ttf");  
  font-display: swap;
}

font-face {
  font-family: 'Attentica';
  src:url("fonts/Attentica-4F-UltraLight.ttf");  
  font-display: swap;
}

font-face {
  font-family: 'Aaargh';
  src:url("fonts/Aaargh.ttf");  
  font-display: swap;
}

/*
font-face {
  font-family: 'CaviarDreams';
  src:url("fonts/CaviarDreams.ttf");  
  font-display: swap;
}
*/


  .vboxmain {
     display:flex;
     flex-direction:column;
     background: var(--vboxmain);
     border: 0px solid #FEFEFE;
     margin: 0px;
     padding: 0px;
     align-items:stretch;
     flex-basis: 0;
     border-radius: 5px;
     -webkit-overflow-scrolling: touch;
	 
     
   }

  .vbox {
     display:flex;
     flex-direction:column;
     background: var(--vboxmain);
     border: 0px solid #BFBFBF;
     margin: 0px;
     padding: 0px;
     align-items:stretch;
     margin-left: 0.1px;
     flex-basis: 0;
     border-radius: 5px;
    font-family: Helvetica, sans-serif;
	font-size: 2.1vw;    
	-webkit-overflow-scrolling: touch;
	
   }
.vbox::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}           


.ticket::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}           
   
  .vboxhandicap {
     display:flex;
     flex-direction:column;
     background: var(--vboxmain);
     margin: 0px;
     padding: 0px;
     align-items:center;
     flex: 1;
     flex-basis: 0;
     
   }

  .hboxmain {
    display:flex;
    flex-direction:row;
    background: var(--vboxmain);
    border: 0px solid #fff;
    margin-left: 0.1px;
    padding: 0px;
    align-items:stretch;
    justify-content: space-between;

   }

  .hbox {
    display:flex;
    flex-direction:row;
    background: var(--vboxmain);
    border: 0px solid #FEFEFE;
    padding: 1px;
    align-items:center;
    margin-left: 0.1px;
    border-radius: 6px; 
    font-family: 'HelveticaNeue', sans-serif;
	font-size: 12px;    
    color: #ffffff;    
   }
   
  .hboxone {
    display:flex;
    flex-direction:row;
    background: linear-gradient(to bottom, #4D4D4D,#373435,#373435,#373435,#373435,#373435,#4D4D4D);
    border: 1px solid #000000;
    margin: 1px;
    padding: 1px;
    width: 99%;
    margin-left: 0.1px;
    height: 3.6vh;
    justify-content: space-between;
    align-items:center;

   }   

  .hboxtwo {
    display:flex;
    flex-direction:row;
    background: #1A1A1A;
    border: 0px solid #000000;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 2.8vh;
    align-items:center;
    font-size: 1.8rem;    
    flex: 1 0 auto;
    line-height:1.5rem;        
    z-index: 1;    
    justify-content: flex-start;
   }
   
.elemento{
    width:auto;
    display:flex;
    font-family: 'Helvetica';
    font-size: 2.4vw;
    color: #FEFEFE;
    line-height:1.7em;    
    font-weight: bold;
    margin: 2px;
    padding: 2px;        
    
}
.elemento1{
    width:50px;
    display:flex;
    font-family: 'Helvetica';
    font-size: 12px;    
    color: #fff;
    line-height:1.7em;    

}
.infovalue{
    width:auto;
    display: inline-block;
    font-family: 'Courier', sans-serif;    
    font-size: 16px;    
    color: #fff;  
    line-height:1.7em;        
    
}

.labeltitle1{
    width:auto;
    font-size: 18px;    
    display: inline-block;
    font-family: 'HelveticaNeue';
    font-weight: thin;
    line-height:1.9em;        
    color: #FEFEFE;  
    flex:1 0 1;
    margin: 2px;
    padding: 2px;    
}

.labeltitle1:nth-child(2){
    flex-grow:2;
}    
.labeltitle{
    width:auto;
    font-size: 1.2rem;    
    line-height:1.4em;        
    font-family: 'HelveticaNeue';
}

.labeltotal{
    width:auto;
    display: flex;
    background: var(--vboxmain);
    font-family: 'HelveticaNeue', sans-serif;
	font-size: 0.8rem;    
	font-weight: bold;
    color: #FECB00;
    
}

.labelhandicap{
    width:auto;
    display:flex;    
    background: var(--vboxmain);
    font-family: 'Courier', sans-serif;
    font-size: 0.7rem;    
    font-weight: bold;
    color: #FECB00;
    line-height:1.2em;        

}

.boxtitle{
    width:auto;
    display:flex;    
    height:auto;
    background: #E5E5E5;
    font-family: 'HelveticaNeue', sans-serif;
    font-size: 0.9rem;    
    color: var(--vboxmain);
    flex-direction:column;
    align-items:center;
    font-weight: bold;
    line-height:1.0em;
    border-radius: 8px;
    margin: 0px;
    padding: 1px;

}

.startmenu {
  width: 6.0vw;
  height: 0.5vh;
  background-color: white;
  margin: 1.5px 0px;

}

button {
   font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
   "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
   background-color: #fff0ff;
   border: none;
   color: white;
   padding: 1px 1px;
   font-size: 2px;
   cursor: pointer;

}

i {
   padding: 3.5px;
   color: rgb(33, 0, 109);
}
button:hover {
   background-color: #4D4D4D;
}
.button:hover i {
   color: white;
}



.check {
  width: 15px;
  height: 15px;
  margin: 2px 2px;	
  background : green;
  align-items:center;
  border-radius: 12px ;
  background:#b3fa35;
}


.game-popup {
  display: none;
  position: fixed;
  top: 32px;
  right: 0px;
  border: 0px solid #f1f1f1;
  z-index: 9;
  height: 50%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.game-popup2 {
  display: none;
  position: fixed;
  top: 0px;
  right: 0px;
  border: 0px solid #f1f1f1;
  z-index: 9;
  height: 50%;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.arrow {
  border: solid white;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 5px;
  width:15px;
  height:15px;
  top:0;
  left:0;
  position:relative;
  margin: 6px 8px;	
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
body {
  font-family: "HelveticaNeue";
  font-size: 100%;
  overflow-y: hidden;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: #000000;
}

.body::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}           



a {
  text-decoration: none;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
  color: black;
}
a:hover {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

a:active{
  color: blue;
}

.app {
  height: 100vh;
}

/* -------------
Sidebar
----------------*/
.sidebar {
  position: absolute;
  width: 17em;
  height: 95vh;
  top: 0;
  overflow: hidden;
  background-color: #19222a;
  -webkit-transform: translateZ(0);
  visibility: visible;
  -webkit-backface-visibility: hidden;
  overflow-y:scroll;
  
}
.sidebar header {
  background-color: #19222a;
  width: 100%;
  height:48px;
  display: block;
  padding: 0.5em 1em;
}

/* -------------
Sidebar Nav
----------------*/
.sidebar-nav {
  position: fixed;
  background-color: #19222a;
  height: 100%;
  font-weight: 400;
  font-size: 1.2em;
  overflow: auto;
  padding-bottom: 6em;
  z-index: 9999;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* -------------
  Chev elements
  ----------------*/
  /* -------------
  Nav-Flyout
  ----------------*/
  /* -------------
  Hover
  ----------------*/
}
.sidebar-nav ul {
  list-style: none;
  display: block;
  padding: 0px;
  margin: 0px;
}
.sidebar-nav ul li {
  margin-left: 0px;
  padding-left: 0px;
  display: inline-block;
  width: 100%;
  /* -------------
  Sidebar: icons
  ----------------*/
}
.sidebar-nav ul li a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75em;
  padding: 1.05em 1em;
  position: relative;
  display: block;
  
}
.sidebar-nav ul li a:hover {
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.sidebar-nav ul li i {
  font-size: 1.8em;
  padding-right: 0.5em;
  width: 9em;
  display: inline;
  vertical-align: middle;
}
.sidebar-nav > ul > li > a:after {
  content: "";
  font-family: ionicons;
  font-size: 0.5em;
  width: 10px;
  color: #fff;
  position: absolute;
  right: 0.75em;
  top: 45%;
}
.sidebar-nav .nav-flyout {
  position: absolute;
  background-color: #080d11;
  z-index: 9998;
  left: 2.5em;
  top: 0;
  height: 100vh;
  overflow-x:scroll;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.sidebar-nav .nav-flyout a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-nav ul > li:hover .nav-flyout {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


.fa-2x {
font-size: 0.2em;
}

@viewport{
    width: device-width;
}
/*
@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
*/
//--------------------
/*
h1 {
  margin: 0 0 1em;
}

.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
  color:#19222a;
}
*/

input[type=checkbox],
input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  background:#b3fa35;
}


.labelradio {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
  
}
.labelradio:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid white;
  border-radius: 0.25em;
  z-index: -1;
  background:#b3fa35;
}


input[type=radio] + labelradio::before {
  border-radius: 1em;
}

/* Checked */
input[type=checkbox]:checked + labelradio,
input[type=radio]:checked + labelradio {
  padding-left: 1em;
  color: #FECB00;
  background: var(--vboxmain);;  
}
input[type=checkbox]:checked + labelradio:before,
input[type=radio]:checked + labelradio:before {
  top: 0;
  width: 100%;
  height: 2em;
  background:#b3fa35;
}

/* Popup box BEGIN */
.hover_bkgr_fricc{
    background:rgba(0,0,0,.4);
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}
.hover_bkgr_fricc .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.hover_bkgr_fricc > div {
    background-color: #1A1A1A;
    box-shadow: 10px 10px 60px #1CBB1C;
    display: inline-block;
    height: auto;
    min-width: 251px;
    min-height: 100px;
    vertical-align: middle;
    width: 100%;
    position: relative;
    border-radius: 2px;
    padding: 1px 0%;
}
.popupCloseButton {
    background-color: #fff;
    border: 3px solid #999;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-weight: bold;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 25px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}
.popupCloseButton:hover {
    background-color: #ccc;
}
.trigger_popup_fricc {
    cursor: pointer;
    font-size: 20px;
    margin: 20px;
    display: inline-block;
    font-weight: bold;
}



.badge-warning{color:#212529;background-color:#ffc107}a.badge-warning:focus,a.badge-warning:hover{color:#212529;background-color:#d39e00}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:focus,a.badge-danger:hover{color:#fff;background-color:#bd2130}.badge-light{color:#212529;background-color:#f8f9fa}a.badge-light:focus,a.badge-light:hover{color:#212529;background-color:#dae0e5}.badge-dark{color:#fff;background-color:#343a40}a.badge-dark:focus,a.badge-dark:hover{color:#fff;background-color:#1d2124}

.onoffswitch {
    position: relative; width: 61px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 23px; padding: 0; line-height: 23px;
    font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: var(--option_yes);
    padding-left: 10px;
    background-color: #b3fa35; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "No";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 15px; height:20px;margin: 4px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 34px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}


.light-title {
  font-size: 0.8em;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.83);
}

.wall {
    height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 500px;
}

.wall > .win-logo {
    background-image: url("../img/logobetseven.png");
    width:500vw;
}

.con {
    position: absolute;
  bottom: 0;
  width: 1040px;
  min-height: 90vh;
  padding: 10px 15px;
  background: rgba(31, 31, 31, 0.84);
  display: flex;
  box-shadow: 0 0 3px #333;
  overflow: hidden;
}

.stats {
  flex: 2;
}

.stats .profile {
    display: flex;
  align-items: center;
}

.profile img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.profile p {
 color: white;
}

nav {
  margin-right: 15px;
}

nav a {
  display: block;
  text-decoration: none;
  padding: 10px 2px;
  color: white;
  font-size: 0.7em;
}

nav a:hover {
   background: rgba(134, 128, 128, 0.32);
}

.icon {
    display: inline-block;
  width: 30px;
  height: 30px;
  background: white;
  margin-right: 15px;
   vertical-align: middle;
}

.tiles-con {
  flex: 6;
  display: flex;
}

.tiles-sec-1,
.tiles-sec-2 {
  flex: 1;
}

header h3 {
  color: white;
  font-size: 0.7em;
  font-weight: 200em;
  margin: 0 5px 15px;
}
.tiles-1 {
    display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: rows;
  margin-right: 15px;
}

.g-large:nth-child(2n+1) {
  grid-column: 1/span 2;
  grid-row: 0;
}

.g-large:nth-child(2n+2) {
  grid-column: 2/span 2;
  grid-row: 0;
}

.g-large:nth-child(2n+1) {
  grid-column: 1/span 2;
  grid-row: 0;
}

.g-small {
  grid-column: 1/span 1;
}

.g-item {
    flex: 1;
  padding: 2px 2px;
  background: #FFFFFF;
  margin: 1px;
  
}
.g-item:hover img {
-webkit-transform:scale(1.10);
-moz-transform:scale(1.10);
-ms-transform:scale(1.10);
-o-transform:scale(1.10);
transform:scale(1.10);
}
.tiles-2 {
  flex: 1;
    display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.x-large {
  grid-area: span 2/span 2;
}


/***taskbar thingy***/

.taskbar {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #1f1f1f;
  z-index: 5;
}

/***hide con***/ 
.con {
opacity: 0;
  transform: translateY(5%);
  transition: transform .3s ease-out;
  z-index: -1;
  pointer-events: none;
}

.con .tiles-con {
  transform: translateY(20%);
   transition: transform .3s ease-out;
}

.taskbar .con {
  bottom: 100%;
}

.win-logo {
  height: 300px;
  width: 350px;
  background-image: url("../img/logobetseven.png");
  background-repeat: no-repeat;
  background-position: center;


}

.start-btn {
    display: block;
    width: 50px;
  padding: 5px;
  
}


.start-btn .win-logo {
  height: 35px;
  width: 100%;
  background: #E5E5E5;
  background-image: url("../img/b7btn.png");
  background-repeat: no-repeat;  
  background-position: center;
}
.start-btn:hover {
    background: rgba(134, 128, 128, 0.32);
}

.start-btn:hover > .win-logo {
  background-color: #279D27;
}

#in {
  position: absolute;
  opacity: 0;
}

#in:checked ~ .con {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0);
}

#in:checked + .con + .start-btn {
      background: rgba(134, 128, 128, 0.32);
}

#in:checked ~ .con > .tiles-con {
  transform: translate(0);
}

btndelitem {
    background:url(img/dialog-close16.png) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}
/* Style tab links */
.tablink {
  background-color: #E5E5E5;
  color: #1A1A1A;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}


.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 5px 5px;
  height: 100%;
}
@charset "utf-8";
/* CSS Document */

/* Saddle Color */
.ul{
	list-style:inline-block;
	}
.span .boxNo,
.boxNo {
    font-size: 12px;
    width: 22px;
    height: 22px;
    font-size: 12px;
    /*margin-top: -1px;*/
    line-height: 22px;
    color: #000;
    text-align: center;
    border: 1px solid transparent;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #fff;
    display: inline-block;
    font-family: 'TitilliumWeb-SemiBold', Arial, sans-serif;
}
.span .saddle1,
.saddle1 {
    background: #e91c1f;
    color: #ffffff;
}
.span .saddle2,
.saddle2 {
    background: #ffffff;
    border-color: #babbbe;
}
.span .saddle3,
.saddle3 {
    background: #0d4a9c;
    color: #ffffff;
}
.span .saddle4,
.saddle4 {
    background: #e8e536;
}
.span .saddle5,
.saddle5 {
    background: #438642;
    color: #ffffff;
}
.span .saddle6,
.saddle6 {
    background: #0c0c0f;
    color: #ffffff;
}
.span .saddle7,
.saddle7 {
    background: #f06724;
    color: #ffffff;
}
.span .saddle8,
.saddle8 {
    background: #f8bec5;
}
.span .saddle9,
.saddle9 {
    background: #20bbda;
    color: #ffffff;
}
.span .saddle10,
.saddle10 {
    background: #761b77;
    color: #ffffff;
}
.span .saddle11,
.saddle11 {
    background: #979998;
    color: #ffffff;
}
.span .saddle12,
.saddle12 {
    background: #6bbd45;
    color: #ffffff;
}
.span .saddle13,
.saddle13 {
    background: #5f3516;
    color: #ffffff;
}
.span .saddle14,
.saddle14 {
    background: #771115;
    color: #ffffff;
}
.span .saddle15,
.saddle15 {
    background: #cdc4b7;
    border-color: #999999;
}
.span .saddle16,
.saddle16 {
    background: #8789c4;
    color: #ffffff;
}
.span .saddle17,
.saddle17 {
    background: #1c3975;
    color: #ffffff;
}
.span .saddle18,
.saddle18 {
    background: #103c1b;
    color: #ffffff;
}
.span .saddle19,
.saddle19 {
    background: #0b73a8;
    color: #ffffff;
}
.span .saddle20,
.saddle20 {
    background: #df0b7a;
    color: #ffffff;
}
.span .saddle21,
.saddle21 {
    background: #b5b3d9;
    color: #000000;
}
.span .saddle22,
.saddle22 {
    background: #10446d;
    color: #ffffff;
}
.span .saddle23,
.saddle23 {
    background: #bdd6cd;
    color: #000000;
}
.span .saddle24,
.saddle24 {
    background: #42502c;
    color: #ffffff;
}