body {
    background-image: url('./img/bg.svg');
    background-size: cover;
    background-attachment: fixed;
}     

h1{
    margin: 10px;
}
.myborder{
    border: 10px solid green;
    margin:5px;        
}
.svg {
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
        filter: invert(100%);
        padding-left: 8px;
}
.rating {
    position: relative;                
    padding-top: 6px;        
    padding-left: 20px;
    width: 90%;
    color: #c82338;
    
}
.tblcss{
background-color: red /* You can use any color of you choice here */
}
.bg-success{
background-color: #c82338; /*custom color here add !important if you don't want the hover color*/
}
tr.gone {
display: none; 
}
tr.visi {
display: table-row;
}
div.gone{
display: none; 
}
div.visi{
display: unset;
}

.image-container {
    position: relative;
    text-align: center;
    color: white;
    }

    /* Bottom left text */

.card-img-top {
    max-height: 150px;
    overflow: hidden;
}

.card-title a:link {
    font-size: 25px;
    background-color: transparent;
    color: #1e7926;
    text-decoration: none;
}

.card-title a:hover {
    color: rgb(43, 190, 38);
    background-color: #c8233844;
    /* text-decoration: underline; */
}

.youhave{       
    position: sticky;  
    position: -webkit-sticky;  
    top: 0px; 
    font-size: 30px;
    background-color: #c82338;
    color: #ffcc00ff;  
    z-index:3; 
}
.second-headline{
    /* display: inline; */
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 25px;
    /* background-color: #c82338; */
    color: #ffcc00ff;  
    z-index:3; 
}
.event{       
    /* position: absolute;       */
    margin: auto;   
    text-align: center;     
    top: 5px; 
    font-size: 20px;
    background-color: #c82338;
    color: #ffffff;              
}
.points_left{
    font-size: 45px;
    /* background-color: #c82338; */
    color: #ffffff;        
}

.votes {  
    display: table-cell;
    vertical-align: text-top;;  
    width: 10%;      
    font-size: 45px;
    background-color: #FFFFFF;
    color: #2e82e8;
    text-decoration: none;
}
input[type=text] {
    border: 2px solid #e84a2e;
    border-radius: 6px;
    font-size: 20px;
}
button[type="submit"] {  
    background-color: #ffcc00ff;  
    padding: 14px 20px;
    margin: 8px 0;  
    cursor: pointer;
    font-size: 20px;
    color: #c82338;
    font-weight: bold;    
  }
  
button[type="submit"]:hover {
    background-color: #c82338;
    color: #ffcc00;
}

.plusminus {  
    background-color: #ffcc00ff;  
    padding: 15px 10px;     
    cursor: pointer;
    font-size: 30px;
    color: #c82338;
    font-weight: bold;
    border-radius: 7px;
 }
 .plusminus:hover {
    background-color: #c82338;
    color: #ffcc00;
}

table { border-collapse:collapse }

.gamename{
    font-size: 15px;
    color: #7d6f71;
}
td{        
    color: #ffcc00ff; 
    font-size: 25px;
}
.ngn_logo{
    position:absolute; 
    position: -webkit-sticky;      
    right:2%; 
    width:10%; 
    top: 0; 
    z-index:4;
}

/* tooltips */

/* index.php */

input[], select {
    width: 300px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 5px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
  }
  
  
  
   input[type=checkbox] {
          visibility: hidden;
        }
        .checkbox-example {
          width: 50px;
          height: 18px;
          background: #555;
          margin: 20px 10px;
          position: relative;
          border-radius: 5px;
        }
        
        
        .checkbox-example label:hover {
        background-color:#ffaf00;
  
        }
        
        .checkbox-example label {
          display: block;
          width: 20px;
          height: 20px;
          border-radius: 50px;
          transition: all .5s;
          cursor: pointer;
          position: absolute;
          top: -2px;
          left: -3px;
          background: #ccc;
        }
        .checkbox-example input[type=checkbox]:checked + label {
          left: 33px;
          background-color: #54aa33;
        }
        label{                              
              font-size: 20px;
              background-color: #c82338;
              color: #ffffff;              
          }
        .redbackgorund{
          background-color: #c82338;        
          padding-top:15px;
          padding-left:10px; 
          padding-right:10px;
        }
        .yellowbackgorund{
          background-color: #ffcc00ff;
          color: #c82338;
          position:relative; 
          padding-left:15%;  
          padding-bottom:15px;
          top: 10px;
        }
        .slider {
          -webkit-appearance: none;  /* Override default CSS styles */
          appearance: none;
          width: 100%; /* Full-width */
          height: 35px; /* Specified height */        
          outline: none; /* Remove outline */
          opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
          /* -webkit-transition: .2s; /* 0.2 seconds transition on hover 
          transition: opacity .2s; */
        }
        .slider::-webkit-slider-thumb {
          -webkit-appearance: none; /* Override default look */
          appearance: none;
          position: relative;
          top: -9px;
          width: 35px; /* Set a specific slider handle width */
          height: 35px; /* Slider handle height */
          background: #04AA6D; /* Green background */
          cursor: pointer; /* Cursor on hover */
        }
        .slider::-moz-range-thumb {
          width: 35px; /* Set a specific slider handle width */
          height: 35px; /* Slider handle height */
          background: #04AA6D; /* Green background */
          cursor: pointer; /* Cursor on hover */
        }