body {
/*background-image: url("../assets/black-bg.jpg");
    background-color: #eef8f3;*/
/*background-image: url("../assets/money-bg.png");
 background-image: url("../assets/money-bg-4.jpg"); */
  
  
  /*background-size: cover;*/
  background-color : #000;
}


.container-block {
	width : 80%;
    height: 80%;
}

#lot-grid {
	 background: #fff;
}

.content-loader{

  text-align: center;
  padding: 100px;
  font-size : 16px;
}
.custom-nav{
  min-height: 100px !important;
  /* background-image: linear-gradient(to bottom,#636462 0,#f8f8f8 100%); */
 /*background-image: linear-gradient(to right, #00bdffe0 , #ffd700e6); */
 background-image : linear-gradient(to right, #ffc400ce , #ff00158e);
}

.dice-img{
  width: 50px;
  height:   50px;
}

.dash-location{
  width: 50%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.dash-value {
  width: 50%;
    text-align: center;
    font-size: 40px;
    color: green;
    font-weight: bold;
}

.btn-custom {
  
  font-size: 18px;
    color: #fefefe;
}

.logo-img{
  width: 250px !important;
}

.custom-right-items {
  margin-top: 25px;
}

.dash-container {
   background-image: linear-gradient(to bottom,#286090 0,#cac1c1 100%);
    padding: 10px;
    margin: 10px;
    display: flex;
    /* background: #fff; */
    border-radius: 5px;
}

.header-text{
    margin: 0 0 10px;
    padding: 1PX;
    font-size: 40PX;
    font-weight: bold;
    color: #000;
    text-align: center;
    font-family: ui-rounded;
}
#data-grid-container, #lot-grid {
    width: 100% !important;
}
#data-grid-container thead tr th {
  position: relative;
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select:none;
  user-select:none;
  -o-user-select:none;
  color : #fff;
  background : #000;
}
#data-grid-container thead tr th, #data-grid-container tbody tr td {
	text-align : center;
    font-size: 42px; 
    padding: 40px 0;
}

.navbar-form .form-control[type="date"] {
    height: 50px;          /* taller input */
    font-size: 28px;       /* bigger text */
    padding: 6px 12px;     /* more padding inside */
}

/* Increase Show Result button size */
.navbar-form .btn.btn-primary {
    height: 50px;          /* taller button */
    font-size: 28px;       /* bigger text */
    padding: 6px 20px;     /* more horizontal padding */
}

.single-cell{
	display : block;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
  font-weight: bold;
}

.lotto-time{
	
	margin-left: 10px;
    color: green;
    font-size: 35px;
}

.mobile-only{
  display: none;
}

textarea.configTextArea.ng-not-empty {
    height: 300Px;
    width: 500px;
    margin: 50px;
}


.flick-box-container {
	display : flex;
	justify-content : center;
	flex-direction : row;
}

.flick-box-item {
    flex-basis: 25%;
    margin: 10px 80px;
    height: 300px;
    text-align: center;
	box-shadow: rgb(10 10 10) 0px 54px 55px, rgb(253 248 248 / 12%) 0px -12px 30px, rgb(253 251 251 / 12%) 0px 4px 6px, rgb(251 249 249 / 17%) 0px 12px 13px, rgb(251 250 250 / 9%) 0px -3px 5px;
}
  



.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card.inactive .flip-card-inner {
  transform: rotateY(540deg);
}

.flip-card-front, .flip-card-back{
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back-detail {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
}
.flip-card-front img, .flip-card-back img{
	width : 100%;
	height : 100%;
}

.flip-card-back {
  color: white;
  transform: rotateY(540deg);
}
.flip-card-back-detail {
  color: #fff;
}

.letterss {
  background: #fff;
  padding: 0px;
  margin: 5px;
  width: 36px;
  text-align: center;
  font-size: 35px;
  font-weight: 800;
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -moz-animation: my-animation 5s linear infinite;
  -webkit-animation: my-animation 5s linear infinite;
  animation: my-animation 5s linear infinite;
}


.odometer {
    height: 1.5em;
    width: 100%;
    border: 2px solid;
    /* margin-left: 1%; */
    padding: 1rem;
    color: #00AEEF;
    text-align: center;
    display: inline-block;
    background: #fff;
    font-size: 4vw;
    font-weight: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
}
.digit {
 margin: -0.5vw;
    display: inline-block;
    height: 1.5em;
    width: 0.75em;
    overflow: hidden;
}
.digit:first-child {
  border-left: none;
}
.digit-container {
  line-height:1.5em;
}
.digit-container.digit-thousand {
  line-height: 1.5em;
  -webkit-animation: slide 4s infinite ease;
  animation: slide 1s infinite ease;
}

.digit-container.digit-hundred {
  line-height: 1.5em;
  -webkit-animation: slide 4s infinite ease-out;
  animation: slide 1s infinite  ease-out;
}

.digit-container.digit-ten {
  line-height: 1.5em;
  -webkit-animation: slide 4s infinite ease-in-out;
  animation: slide 1s infinite ease-in-out;
}

.digit-container.digit-one {
  line-height: 1.5em;
  -webkit-animation: slide 4s infinite linear;
  animation: slide 1s infinite linear;
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: translateY(-10em);
  }
  /* delay between animations by adding extra transform type with the same value as transform for 100% */
  40% {
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes slide {
  0% {
    transform: translateY(-10em);
  }
  40% {
    transform: translateY(0);
  }
    100% {
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    margin-top: -100%;
    height: 300%;
  }

  to {
    margin-top: 0%;
    height: 100%;
  }
}

@keyframes my-animation {
  from {
    -moz-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  to {
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes gradientText {
  0% {
    color: red;
  }

  25% {
    color: yellow;
  }

  50% {
    color: blue;
  }

  75% {
    color: rgb(238, 18, 190);
  }

  100% {
    color: green;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.moving-border {
  position: relative;
  background: #111;
  padding: 4px;
}
.moving-border::before,
.moving-border::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: linear-gradient(var(--angle), 
    #032146,  #C3F2FF, #b00);
  animation: rotate 10s linear infinite;
}
.moving-border::after {
  filter: blur(10px);
}
@keyframes rotate {
  0%     { --angle: 0deg; }
  100%   { --angle: 360deg;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}


@media only screen and (max-width : 768px){
  .mobile-only{
  display: block;
}

.mobile-btn{
  margin: 5px;
    margin-top: 0;
}
  .container-block {
    width : 95% !important;
    }
    .navbar-header{
          width: 50%;
    }
    .logo-img {
      width: 180px !important;
  }
  
  .header-text{
    font-size : 17px;
    margin-top : 10px;
  }
  .desktop-only{
    display: none;
  }
  .head-container{
    display: flex;
  }
  #daily-text{
    width: 50%;
  }
  .navbar-form{
    display: flex;
    margin: 10px;
  }
  .navbar-form .form-control[type="date"] {
    height: 45px;          /* taller input */
    font-size: 23px;       /* bigger text */
    padding: 6px 12px;     /* more padding inside */
  }

/* Increase Show Result button size */
  .navbar-form .btn.btn-primary {
    height: 45px;          /* taller button */
    font-size: 23px;       /* bigger text */
    padding: 6px 20px;     /* more horizontal padding */
  }
  .mobile-head-block{
    display : flex;
  }
  #log-out-btn{
  position : absolute;
  right : 0;
}
  .custom-right-items{
    margin : 100;
  }
  .table-responsive{
    border : none !important;
    padding : 0 !important;
  }
    .flick-box-container {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
  .flick-box-item {
    flex-basis: initial;
    margin: 10px;
    height: 400px;
    width: 80%;
    /* margin: 10px 80px; */
    /* height: 350px; */
}
.digit {
    margin: -5px 0;
    display: inline-block;
    height: 1.5em;
    width: 1.05em;
    overflow: hidden;
}
.odometer{
	padding : 0;
	    font-size: 7vw;
}
.container-fluid {
	padding-right : 0 !important;
}
.result-card {
	height: 250px;
}
}