.blurbg {
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   display: block;
   filter: blur(5px);
   min-height: 1600px;
   min-width: 100%;
   left: 0px;
   position: fixed;
   right: 0px;
   z-index: -1;
   -webkit-filter: blur(5px);
}

input[type="nmtext"] {
   border: none;
   background: transparent;
   color: #000;
}

.ribbon {
   width: 150px;
   height: 150px;
   overflow: hidden;
   position: absolute;
}

.ribbon::before,
.ribbon::after {
   position: absolute;
   z-index: -1;
   content: '';
   display: block;
   border: 5px solid #2980b9;
}

.ribbon span {
   position: absolute;
   display: block;
   width: 225px;
   padding: 15px 0;
   background: #79A70A;
   background: linear-gradient(#F70505 0%, #8F0808 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   color: #fff;
   font: 700 18px/1 'Lato', sans-serif, "Microsoft JhengHei";
   text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   text-transform: uppercase;
   text-align: center;
}

/* top left*/
.ribbon-top-left {
   top: -10px;
   left: -10px;
}

.ribbon-top-left::before,
.ribbon-top-left::after {
   border-top-color: transparent;
   border-left-color: transparent;
}

.ribbon-top-left::before {
   top: 0;
   right: 0;
}

.ribbon-top-left::after {
   bottom: 0;
   left: 0;
}

.ribbon-top-left span {
   right: -25px;
   top: 30px;
   transform: rotate(-45deg);
}

.btn-top {
   display: none;
   /* Hidden by default */
   position: fixed;
   /* Fixed/sticky position */
   bottom: 20px;
   /* Place the button at the bottom of the page */
   right: 30px;
   /* Place the button 30px from the right */
   z-index: 99;
   /* Make sure it does not overlap */
}

.btn-top:hover {
   background-color: #555;
   /* Add a dark-grey background on hover */
}

/* raffle */
.topbox {
   background: white;
   padding-bottom: 50px;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f161d', endColorstr='#0f161d', GradientType=1);
   /* IE6-9 */
}

.rollbox {
   margin-top: 50px;
   height: 200px;
   background: #000;
   border: 1px solid #616161;
   overflow-x: auto;
   overflow: hidden;
   position: relative;
   padding: 0;
}

.rollbox>table {
   width: auto;
   height: 200px;
   margin: 0;
   padding: 0;

}

#loadout {
   position: absolute;
   top: 10px;
   left: 5px;
   z-index: 1;
   background: #121619;
}

.roller {
   position: relative;
   display: block;
   height: 100%;
   text-align: center;
   color: white;
   line-height: 180px;
   font-size: 0.8em;
   font-weight: bold;
}

.roller div {
   display: block;
   height: 50px;
   line-height: 50px;
   position: absolute;
   bottom: 0;
   width: 100%;
   left: 0;
}

.inputbox {
   background: #212121;
   box-shadow: inset 0 0 7px 0 black;
   font-size: 1.1em;
   font-weight: bold;
   color: white;
}

.badge {
   padding-top: 5px;
   text-shadow: 1px 1px 1px black;
   margin-bottom: 20px;
}

.rollline {
   width: 2px;
   height: 198px;
   top: 1px;
   left: 50%;
   position: absolute;
   background: #FFCE0A;
   opacity: 0.6;
   z-index: 2;
}

#log {
   margin-top: 30px;
   text-align: center;
   font-size: 1.5em;
   color: white;

}

#log span {
   font-size: 2em;
   font-weight: bold;
   color: #57B3F9;
}

#roll {}

.roller {
   height: 180px;
   width: 180px;
   margin-right: 10px;
   box-shadow: 0 0 5px 0 black;
}

tr,
table,
td {
   margin: 0;
   padding: 0;
}

.roller p {
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.header-filter:after,
.header-filter:before {
   position: fixed !important;
}

.off-canvas-sidebar .footer {
   position: relative;
   bottom: auto !important;
   width: 100%;
}

@media (max-width:992px) {
   .qtyplus {
      display: none;
   }

   .qtyminus {
      display: none;
   }
}

.ldBar-label {
   text-align: center;
   color: #fff;
}

.ldBar-label:after {
   content: " %";
}

.badge-name {
   text-shadow: none !important;
   margin-bottom: 2px !important;
   margin-top: 2px !important;
   font-size: 15px !important;
}

tr.tr-only-hide {
   color: #D20B2A;
}

@media (max-width: 767px) {
   table.dataTable>tbody>tr>td:first-child {
      padding-left: 5px !important;
   }

   .table-rwd {
      min-width: 100%;
   }

   tr.tr-only-hide {
      display: none !important;
   }

   .table-rwd tr {
      display: block;
      margin-top: 5px;
   }

   .table-rwd tr.odd {
      background: WhiteSmoke;
   }

   .table-rwd tr.even {
      background: Gainsboro;
   }

   .table-rwd td {
      text-align: left;
      font-size: 15px;
      overflow: hidden;
      display: block;
      border: none;
   }

   .table-rwd td:before {
      content: attr(data-th) " : ";
      display: inline-block;
      text-transform: uppercase;
      font-weight: bold;
      margin-right: 10px;
      color: #D20B2A;
   }

   .table-rwd.table-bordered td,
   .table-rwd.table-bordered th,
   .table-rwd.table-bordered {
      border: 0;
   }
}

@media (max-width: 991px) {

   .dropdown-menu .dropdown-item,
   .dropdown-menu li>a {
      color: #fff !important;
   }

   .navbar .dropdown .dropdown-menu,
   .navbar .dropdown.show .dropdown-menu {
      height: 100%;
      overflow-y: auto;
   }
}

table.dataTable.nowrap td,
table.dataTable.nowrap th {
   white-space: normal !important;
}

.card .card-header.card-header-image {
   height: 25vh;
}

.card .card-header.card-header-image img {
   height: 100%;
   object-fit: cover;
}

.card:hover [data-header-animation=true] {
   transform: translate3d(0, -25px, 0);
}