/* CSS Document */

/*
  ************************ CSS table of content ************************

  1.   game-error-area
  2.   game-boxes
  3.   gamerules-form
  4.   new-game-form
  5.   odds-calculator-form
  6.   game numbers
  7.   rf icon style
  **************************************************************** */
.count-title { font-size: 36px; }
/*------------------------------------------------
1. game-error-area
--------------------------------------------------*/
.game-error-area {
  padding: 30px 20px 20px 20px;
  background-color:rgba(212,37,135,1.00);
  -webkit-box-shadow: 0px 0px 29.4px 0.6px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 0px 29.4px 0.6px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  position: relative;
}
.game-error-area .close-btn {
  position: absolute;
  top: 27px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.game-error-area .title {
  font-size: 28px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}
.game-error-area .game-error-form-wrapper {
  background-color: rgb(78, 64, 185);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  padding: 30px;
}
.game-error-area form .form-group {
  margin-bottom: 0;
}
.game-error-area form .form-group + .form-group {
  margin-top: 30px;
}
.game-error-area form label {
  text-transform: uppercase;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.game-error-area form label sup {
  color: #f1481f;
  font-size: 100%;
  top: 0;
  right: 3px;
}
.game-error-area form input {
  padding: 0;
  padding-bottom: 10px;
  min-height: auto;
  font-size: 16px;
  color: #ffffff;
  border: none;
  border-bottom: 1px solid #766bcb;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}
.game-error-area form input::-webkit-input-placeholder {
  color: #94a1dc;
}
.game-error-area form input::-moz-placeholder {
  color: #94a1dc;
}
.game-error-area form input:-ms-input-placeholder {
  color: #94a1dc;
}
.game-error-area form input:-moz-placeholder {
  color: #94a1dc;
}
.game-error-area form .link {
  color: #c4cbf9;
  font-size: 14px;
  margin-top: 3px;
  color: #00ffb8;
}
.game-error-area form .cmn-btn {
  width: 200px;
  display: inline-block;
}
.game-error-area p {
  font-size: 16px;
}
.game-error-area p a {
  color: #31d7a9;
  font-size: 16px;
  text-transform: uppercase;
}
.game-error-area .divider {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  text-align: center;
}
.game-error-area .divider::after {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 100%;
  height: 2px;
  border-radius: 50%;
  background-color: rgba(189, 189, 189, 0.502);
  z-index: -1;
}
.game-error-area .divider span {
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  padding: 5px 30px;
  background-color: #4e40b9;
}
.game-error-area .social-link-list {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 20px;
}
.game-error-area .social-link-list li {
  margin: 0 10px;
}
.game-error-area .social-link-list li a {
  width: 50px;
  height: 50px;
  background-color: rgba(12, 18, 32, 0);
  border: 1px solid #655dca;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 18px;
}
.game-error-area .social-link-list li a:hover {
  color: #ffffff;
  background-image: linear-gradient(86deg, rgb(236, 3, 139) 0%, rgb(251, 100, 104) 44%, rgb(251, 185, 54) 100%);
  -webkit-box-shadow: 0px 9px 4px 0px rgba(124, 78, 25, 0.35);
          box-shadow: 0px 9px 4px 0px rgba(124, 78, 25, 0.35);
}
/*------------------------------------------------
1. game-boxes
--------------------------------------------------*/

.game-box-1 {
    max-width: 70%;
    margin:0px auto;
  background-image: -webkit-gradient(linear, left top, right top, from(rgb(193, 101, 221)), to(rgb(92, 39, 254)));
  background-image: linear-gradient(90deg, rgb(193, 101, 221) 0%, rgb(92, 39, 254) 100%);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  padding: 30px 30px;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.game-box-1__thumb {
  width: 140px;
  height: 190px;
  align-self: flex-start;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: -25px;
}
@media (max-width: 1199px) {
    .game-box-1 {
        max-width: 70%;
    }
  .game-box-1__thumb {
    margin-left: auto;
    margin-right: auto;
  }
}
.game-box-1__content {
  /*width: calc(100% - 140px);*/
  width: 100%;
  padding-left: 30px;
}
@media (max-width: 499px) {
  .game-box-1__content {
    width: 100%;
    padding-left: 0;
    margin-top: 25px;
    text-align: center;
  }
}
.game-box-1__content p {
  color: #f1f3ff;
}
.game-box-1__title {
  margin-bottom: 10px;
}

/*------------------------------------------------
3. game-rules-form
--------------------------------------------------*/
.game-rules-form {
  /*  margin-right: 250px;*/
}
@media (max-width: 499px) {
    .game-rules-form {
    /*margin-right: 0px;*/
    }
}
/*------------------------------------------------
4. new-game-form
--------------------------------------------------*/
/* contact section css start */
.new-game-form-wrapper {
  background-image: linear-gradient(120deg, rgb(59, 38, 219) 1%, rgb(123, 25, 203) 100%);
  -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
    padding-bottom: 40px;
}
@media (max-width: 991px) {
  .new-game-form-wrapper {
    padding: 50px 30px 0 30px;
  }
}
.new-game-form {
    margin-top: 40px;
    padding-right:60px;
    border-left: 1px solid rgba(172,77,148,1.00);
}
.new-game-form .title {
    margin-top: 20px;
    margin-bottom: 40px;
}
/*------------------------------------------------
5. odds-calculator-form
--------------------------------------------------*/
/* contact section css start */
.odds-calculator-wrapper {
  background-image: linear-gradient(120deg, rgb(59, 38, 219) 1%, rgb(123, 25, 203) 100%);
  -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
    padding-bottom: 40px;
}
@media (max-width: 991px) {
  .odds-calculator-wrapper {
    padding: 50px 30px 0 30px;
  }
}
.odds-calculator {
    margin-top: 40px;
    padding-right:60px;
    border-left: 1px solid rgba(172,77,148,1.00);
}
.odds-calculator .title {
    margin-top: 20px;
    margin-bottom: 40px;
}
/*------------------------------------------------
6. game-numbers:addition to main theme
--------------------------------------------------*/
.past-draw-wrapper tbody:hover { background-color: #5346b7;
}
.past-draw-wrapper td {border:none !important;}
.past-draw-wrapper .number-list li:hover {
    border: none;
  background-image: linear-gradient(86deg, rgb(236, 3, 139) 0%, rgb(251, 100, 104) 44%, rgb(251, 185, 54) 100%);
  -webkit-box-shadow: 0px 17px 40px 0px rgba(124, 78, 25, 0.35);
          box-shadow: 0px 17px 40px 0px rgba(124, 78, 25, 0.35);
}
.past-draw-wrapper .number-list li.active {
    border: none;
      background-image: linear-gradient(7deg, rgb(236, 19, 121) 0%, rgb(108, 0, 146) 100%);
      -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
              box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
}

/* remove UL default spacing if you use <ul>/<li> */
.number-list-lg { list-style: none; margin: 0; padding: 0; }

.selected-number-lg {
  display: inline-grid;        /* keeps items inline and wrapping like inline-block */
  place-items: center;         /* centers horizontally + vertically */
  width: 75px;
  height: 75px;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 0;
  margin: 6px;                 /* spacing between circles */
  background-image: linear-gradient(86deg, rgb(236, 3, 139) 0%, rgb(251, 100, 104) 44%, rgb(251, 185, 54) 100%);
  box-shadow: 0px 17px 40px 0px rgba(124, 78, 25, 0.35);

  font-size: 45px;
  font-weight: 700;
  color: azure;

  vertical-align: middle;     /* keeps the circles aligned with surrounding inline content */
  line-height: normal;        /* ensure this doesn't interfere */
}
/*------------------------------------------------
7. rf icon pack
--------------------------------------------------*/
.rf { display:inline-block; width:1em; height:1em; line-height:1; vertical-align:middle; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;}
.rf.rf-gt { width:1.1em; height:1.1em; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; }

/* Data-URI for circle monogram (default) */
.rf.rf-gt.solid {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\n <defs>\n <linearGradient id='goldGrad' x1='0%' y1='0%' x2='100%' y2='100%'>\n <stop offset='0%' stop-color='%23fff8dc'/>\n <stop offset='30%' stop-color='%23ffd700'/>\n <stop offset='70%' stop-color='%23daa520'/>\n <stop offset='100%' stop-color='%23fff8dc'/>\n </linearGradient>\n </defs>\n <circle cx='32' cy='32' r='30' fill='url(%23goldGrad)' stroke='%23b8860b' stroke-width='1.5'/>\n <text x='50%' y='50%' font-family='Arial,Helvetica,sans-serif' font-size='28' fill='%23000000' font-weight='700' text-anchor='middle' dominant-baseline='central'>GT</text>\n</svg>");
}


/* Outline / stroke variant */
.rf.rf-gt.outline {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\n <defs>\n <linearGradient id='goldGrad2' x1='0%' y1='0%' x2='100%' y2='100%'>\n <stop offset='0%' stop-color='%23fff8dc'/>\n <stop offset='30%' stop-color='%23ffd700'/>\n <stop offset='70%' stop-color='%23daa520'/>\n <stop offset='100%' stop-color='%23fff8dc'/>\n </linearGradient>\n </defs>\n <circle cx='32' cy='32' r='28' fill='none' stroke='url(%23goldGrad2)' stroke-width='4'/>\n <text x='50%' y='50%' font-family='Arial,Helvetica,sans-serif' font-size='26' fill='%23b8860b' font-weight='700' text-anchor='middle' dominant-baseline='central'>GT</text>\n</svg>");
}


/* Monogram only (no outer shape) */
.rf.rf-gt.mono {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\n <defs>\n <linearGradient id='goldGrad3' x1='0%' y1='0%' x2='100%' y2='100%'>\n <stop offset='0%' stop-color='%23fff8dc'/>\n <stop offset='40%' stop-color='%23ffd700'/>\n <stop offset='80%' stop-color='%23b8860b'/>\n <stop offset='100%' stop-color='%23fff8dc'/>\n </linearGradient>\n </defs>\n <text x='50%' y='50%' font-family='Georgia, serif' font-size='34' fill='url(%23goldGrad3)' font-weight='800' text-anchor='middle' dominant-baseline='central'>GT</text>\n</svg>");
}


/* Accent color modifier example (uses secondary color) */
.rf.rf-gt.accent.solid {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='32' r='30' fill='%237051FB'/><text x='50%' y='50%' font-family='Arial,Helvetica,sans-serif' font-size='28' fill='white' font-weight='700' text-anchor='middle' dominant-baseline='central'>GT</text></svg>");
}


/* size helper */
.rf.rf-gt.large { width:1.6em; height:1.6em; }