:root {
  --color-grey:#5C5959;
  --hbg:0;
  --sbg:0%;
  --lbg:2%;
  --color-bg:hsl(var(--hbg),var(--sbg),var(--lbg));
  --hbase:0;
  --sbase:0%;
  --lbase:100%;
  --color-base:hsl(var(--hbase),var(--sbase),var(--lbase));
  --h:220;
  --s:100%;
  --l:71%;
  --color-primary:hsl(var(--h),var(--s),var(--l));
  --color-secondary:hsl(var(--h),var(--s),calc(var(--l) + 10%));
  --color-dark:hsl(var(--h),var(--s),calc(var(--l) - 20%));
  --htext:0;
  --stext:0%;
  --ltext:100%;
  --color-text:hsl(var(--htext),var(--stext),var(--ltext));
  --hhd:286;
  --shd:100%;
  --lhd:29%;
  --header-color:hsl(var(--hhd),var(--shd),var(--lhd));
}

@font-face {
  font-family:myFirstFont;
  src:url(../font/bartone.otf);
}

* {
  padding:0;
  margin:0;
  box-sizing:border-box;
}

*:focus {
  outline:none;
}

html {
  font-size:10px;
}

body {
  background:var(--color-primary);
  font-family:sans-serif;
  font-size:15px;
  line-height:1.1;
  color:var(--color-text);
  font-weight:400;
}

body.no-scroll {
  overflow:hidden;
}

@media (min-width:768px) {
  body .container {
    max-width:920px;
  }
}

@media (min-width:992px) {
  body .container {
    max-width:1024px;
  }
}

img {
  width:100%;
}

h1,
h2 {
  margin-bottom:1rem;
}

h3,
h4,
h5,
h6 {
  margin-bottom:0.571rem;
}

h1 {
  font-size:28px;
  color:hsl(var(--h),var(--s),calc(var(--l) - 20%));
}

h2 {
  font-size:25px;
  color:hsl(var(--h),var(--s),calc(var(--l) - 20%));
}

h3 {
  color:hsl(var(--h),var(--s),calc(var(--l) + 25%));
  font-size:24px;
}

h4 {
  color:hsl(var(--h),var(--s),calc(var(--l) + 20%));
  font-size:20px;
}

h5 {
  color:hsl(var(--h),var(--s),calc(var(--l) + 20%));
  font-size:18px;
}

h6 {
  color:hsl(var(--h),var(--s),calc(var(--l) + 20%));
  font-size:16px;
}

a,
button {
  transition:all 0.2s ease-in-out;
  text-decoration:none;
  color:hsl(calc(var(--h) + 5),var(--s),calc(var(--l) - 10%));
}

a:hover,
button:hover {
  color:hsl(calc(var(--h) - 10),var(--s),calc(var(--l) - 20%));
  text-decoration:none;
}

ul {
  list-style:none;
}

.m-r-1 {
  margin-right:0.571rem;
}

.m-r-2 {
  margin-right:1rem;
}

.m-b-half {
  margin-bottom:0.2855rem;
}

.m-b-1 {
  margin-bottom:0.571rem;
}

.m-b-2 {
  margin-bottom:1rem;
}

.m-b-3 {
  margin-bottom:1.713rem;
}

.m-b-half {
  margin-bottom:0.2855rem;
}

.m-l-1 {
  margin-left:0.571rem;
}

.m-l-2 {
  margin-left:1rem;
}

.m-t-1 {
  margin-top:0.571rem;
}

.m-t-2 {
  margin-top:1rem;
}

.m-t-3 {
  margin-top:1.713rem;
}

.p-1 {
  padding:0.571rem;
}

.p-2 {
  padding:1rem;
}

.p-t-1 {
  padding-top:0.571rem;
}

.p-t-2 {
  padding-top:1rem;
}

.p-b-1 {
  padding-bottom:0.571rem;
}

.p-b-2 {
  padding-bottom:1rem;
}

.p-l-1 {
  padding-left:0.571rem;
}

.p-l-2 {
  padding-left:1rem;
}

.p-r-1 {
  padding-right:0.571rem;
}

.p-r-2 {
  padding-right:1rem;
}

hr {
  border-color:var(--color-primary);
  margin-top:1em;
  margin-bottom:1em;
}

p {
  margin-bottom:0.571rem;
}

p.m-0 {
  margin-bottom:0;
}

.m-auto {
  margin:auto;
}

.relative {
  position:relative;
}

img {
  max-width:100%;
}

.text-right {
  text-align:right;
}

.text-left {
  text-align:left;
}

.text-center {
  text-align:center;
}

.text-justify {
  text-align:justify;
}

.text-bold {
  font-weight:700;
}

.items {
  margin-left:-0.571rem;
  margin-right:-0.571rem;
}

.items [class^=item-] {
  padding:0 0.571rem;
}

@media only screen and (max-width:768px) {
  .items {
    margin-left:0;
    margin-right:0;
  }
  .items > [class^=item-] {
    padding:0 0.571rem;
    flex:0 0 calc(100% / (12/12));
    max-width:calc(100% / (12/12));
  }
}

.item-auto {
  flex:1 1 auto;
}

.item-1 {
  flex:0 0 calc(100% / (12/1));
  max-width:calc(100% / (12/1));
}

.item-2 {
  flex:0 0 calc(100% / (12/2));
  max-width:calc(100% / (12/2));
}

.item-3 {
  flex:0 0 calc(100% / (12/3));
  max-width:calc(100% / (12/3));
}

.item-4 {
  flex:0 0 calc(100% / (12/4));
  max-width:calc(100% / (12/4));
}

.item-5 {
  flex:0 0 calc(100% / (12/5));
  max-width:calc(100% / (12/5));
}

.item-6 {
  flex:0 0 calc(100% / (12/6));
  max-width:calc(100% / (12/6));
}

.item-7 {
  flex:0 0 calc(100% / (12/7));
  max-width:calc(100% / (12/7));
}

.item-8 {
  flex:0 0 calc(100% / (12/8));
  max-width:calc(100% / (12/8));
}

.item-9 {
  flex:0 0 calc(100% / (12/9));
  max-width:calc(100% / (12/9));
}

.item-10 {
  flex:0 0 calc(100% / (12/10));
  max-width:calc(100% / (12/10));
}

.item-11 {
  flex:0 0 calc(100% / (12/11));
  max-width:calc(100% / (12/11));
}

.item-12 {
  flex:0 0 calc(100% / (12/12));
  max-width:calc(100% / (12/12));
}

.content-center {
  justify-content:center;
}

.content-end {
  justify-content:flex-end;
}

.content-start {
  justify-content:flex-start;
}

.content-between {
  justify-content:space-between;
}

.btn-primary,
.btn-primary-o {
  min-width:5.71rem;
  padding:0.1142rem 0.571rem;
  border-radius:10px;
  border:1px solid transparent;
  cursor:pointer;
  font-size:1em;
  font-weight:500;
  letter-spacing:1px;
  text-align:center;
  background-color:transparent;
  font-weight:bold;
}

.btn-primary {
  color:#ffffff;
  background-color:var(--color-primary);
  box-shadow:0 4px 15px -4px hsl(var(--h),var(--s),calc(var(--l) + 5%));
}

.btn-primary:hover {
  background-color:hsl(var(--h),var(--s),calc(var(--l) - 10%));
  color:#fff;
}

.btn-primary-o {
  color:var(--color-primary);
  border-color:var(--color-primary);
}

.btn-primary-o:hover {
  background-color:var(--color-primary);
  color:#ffffff;
}

.overlay {
  position:fixed;
  opacity:0;
  visibility:hidden;
  width:100%;
  height:100%;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.5);
  z-index:5;
}

.overlay.show {
  visibility:visible;
}

.sidebar {
  visibility:hidden;
  left:-500px;
  top:0;
  height:100%;
  width:60%;
  padding:2rem 1.5rem;
  background-color:hsl(var(--h),var(--s),calc(var(--l) - 60%));
  position:fixed;
  z-index:10;
  overflow:auto;
  transition:.5s all;
}

.sidebar-active {
  visibility:visible !important;
  left:0 !important;
  top:0;
}

.sidebar-btn {
  display:none;
  position:absolute;
  max-width:30px;
  left:1rem;
}

.ham {
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform 400ms;
  user-select:none;
  width:60px;
}

.hamRotate.active {
  transform:rotate(45deg);
}

.line {
  fill:none;
  transition:stroke-dasharray 400ms,stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width:4.5;
  stroke-linecap:round;
}

.ham4 .top {
  stroke-dasharray:40 121;
}

.ham4 .bottom {
  stroke-dasharray:40 121;
}

.ham4.active .top {
  stroke-dashoffset:-68px;
}

.ham4.active .bottom {
  stroke-dashoffset:-68px;
}

.sidebar-btn-close {
  visibility:hidden;
  width:fit-content;
  position:fixed;
  background:linear-gradient(to right,#860000,#e00000);
  box-shadow:0 0 5px 0 #ff3f3f inset;
  border-radius:5px;
  right:29%;
  top:0;
  z-index:100;
  left:-500px;
  transition:.44s all;
}

.sidebar-btn-close-active {
  left:60% !important;
  visibility:visible !important;
}

.sidebar-btn-close .ham {
  width:42px;
  display:flex;
}

.sport-menu {
  flex:0 0 20%;
  max-width:20%;
}

.main-area {
  flex:0 0 80%;
  max-width: 100%;
}

input {
  width:100%;
  font-size:17px;
  padding:7px;
  border-radius:10px;
  border:none;
  color:#484848;
}

header {
  background:hsl(var(--h),var(--s),calc(var(--l) - 35%));
}

.flex {
  display:flex;
}

.flex-wrap {
  flex-wrap:wrap;
}

.h-fit {
  height:fit-content;
}

.header {
  align-items:center;
}

.gap-1 {
  gap:.5rem;
}

.gap-2 {
  gap:1rem;
}

.wrapper-login-btn {
  box-shadow:0 0 5px 5px hsl(var(--h),var(--s),calc(var(--l) - 44%)) inset;
  border-radius:10px;
  padding:5px;
}

.login-btn {
  background:linear-gradient(to right,hsl(var(--h),var(--s),calc(var(--l) - 34%)),hsl(var(--h),var(--s),calc(var(--l) - 41%)),hsl(var(--h),var(--s),calc(var(--l) - 34%)));
  font-size:2vw;
  font-weight:bold;
  padding:1.5rem 1rem;
  width:100%;
  display:block;
  height:100%;
  border-radius:10px;
  text-align:center;
  color:#ffffff;
  box-shadow:0 0 5px 0 hsl(var(--h),var(--s),calc(var(--l) - 5%)) inset;
  text-transform:uppercase;
  border:none;
}

.regis-btn {
  font-family:myFirstFont;
  background:linear-gradient(to bottom,#ffffff,#aaaaaa);
  font-size:20px;
  padding:1rem;
  width:100%;
  display:block;
  height:100%;
  border-radius:10px;
  text-align:center;
  color:#253d69;
  text-transform:uppercase;
}

@media screen and (max-width:980px) {
  .regis-btn {
    font-size:16px;
  }
}

@media screen and (min-width:1200px) {
  .login-btn {
    font-size:30px;
  }
}

.login-btn:hover {
  color:#ffffff;
}

.logo img {
  max-width:320px;
}

.register-img img {
  max-width:140px;
}

.header .login-area {
  display:flex;
  align-items:center;
}

#captcha {
  background:#dbdde9;
  border-radius:10px;
  width:100%;
  font-size:22px;
  padding:4px;
  border-radius:10px;
  border:none;
  color:#020202;
  font-weight:bold;
  text-align:center;
}

.input-group-text-l {
  background:#ffffff;
  font-size:22px;
  padding:4px;
  border-radius:10px 0 0 10px;
  border:none;
  color:#020202;
  font-weight:bold;
  text-align:center;
}

.input-group-text-r {
  border-radius:0 10px 10px 0;
}

.icon-input {
  max-width:30px;
}

.area-login-btn {
  padding:0 1rem;
}

.grid {
  display:grid;
}

.game-icon {
  padding:.5rem 0;
  display:flex;
  gap:.5rem;
}

.game-after img {
  width:100% !important;
  max-width:unset !important;
}

.game-icon img {
  width:fit-content;
}

.info-area {
  margin:.5rem 0;
  background:#003cb0;
  padding:.5rem;
  border-radius:15px;
  font-size:15px;
  display:flex;
  align-items:center;
}

.info-label {
  text-transform:uppercase;
  font-weight:bold;
  padding:.5rem .75rem;
  display:flex;
  align-items:center;
}

.announcement-text {
  background:hsl(var(--h),var(--s),calc(var(--l) - 50%));
  width:100%;
  padding:.5rem;
  border-radius:0 10px 10px 0;
}

.banner img {
  border-radius:10px;
}

.lottery-area {
  background:url(../img/togel/bg_togel.png);
  background-size:cover !important;
  background-size:100% auto;
  width:100%;
  background-repeat:repeat;
  background-position:top;
  border-radius:15px;
}

.lottery-title {
  background:hsl(var(--h),var(--s),calc(var(--l) - 50%));
  font-size:2.2rem;
  font-weight:bold;
  padding:.75rem 1rem;
  border-radius:15px;
  text-align:center;
  position:relative;
}

.lottery-title::before,
.lottery-title::after {
  content:'';
  background-color:#ececec;
  width:20px;
  height:20px;
  position:absolute;
  border-radius:50%;
  top:0;
  transform:translateY(50%);
}

.lottery-title::before {
  left:1rem;
}

.lottery-title::after {
  right:1rem;
}

.lottery-results {
  display:flex;
  flex-wrap:wrap;
  padding:1rem;
}

.lottery-card {
  width:20%;
  padding:1rem .75rem;
}

.lottery-results .result {
  background:linear-gradient(to right,#173673,#3665b7);
  width:100%;
  padding:.256rem .5rem;
  border-radius:10px;
  text-align:center;
  box-shadow:0 0 5px 0 black inset;
}

.result-date {
  padding:.25rem 1rem;
  font-weight:bold;
  letter-spacing:1px;
}

.result-number {
  background:#ffffff;
  border-radius:5px;
  padding:.25rem 1rem;
  display:flex;
  gap:.5rem;
  justify-content:center;
}

.result-number img {
  max-width:15px;
}

.result-name {
  font-size:20px;
  padding:.25rem 1rem;
  font-weight:bold;
  letter-spacing:1px;
  text-transform: uppercase;
}

.contact-lis div a {
  display:flex;
}

.mobile-box {
  display:none;
}

.dashboard {
  padding:4px;
}

.dashboard-top,
.dashboard-center,
.dashboard-bottom {
  display:flex;
  width:100%;
  justify-content:end;
}

.dashboard-top {
  align-items:start;
  gap:1rem;
  margin-bottom:.25rem;
}

.dashboard-center {
  align-items:center;
  gap:1.5rem;
  margin-bottom:.25rem;
}

.dashboard-bottom {
  align-items:center;
  gap:2rem;
}

.livechat-img {
  width:80px;
}

.option-language {
  font-size:13px;
  padding-top:5px;
}

.today-date {
  text-transform:uppercase;
  padding-top:5px;
}

.wrapper-logout-btn {
  box-shadow:0 0 5px 5px hsl(var(--h),var(--s),calc(var(--l) - 50%)) inset;
  border-radius:5px;
  padding:5px;
}

.logout-btn {
  background:linear-gradient(to right,hsl(var(--h),var(--s),calc(var(--l) - 42%)),hsl(var(--h),var(--s),calc(var(--l) - 48%)),hsl(var(--h),var(--s),calc(var(--l) - 42%)));
  font-weight:bold;
  padding:.25rem .75rem;
  display:block;
  border-radius:5px;
  text-align:center;
  color:#ffffff;
  box-shadow:0 0 5px 0 hsl(var(--h),var(--s),calc(var(--l) - 20%));
  text-transform:uppercase;
}

.profile {
  font-size:14px;
}

.dashboard-bottom img {
  max-width:85px;
}

.dashboard-menu {
  display:flex;
  gap:1.5rem;
}

.dashboard-menu a {
  font-size:14px;
  color:#ffffff;
  border-right:2px solid #ffffff;
  padding-right:1.5rem;
}

.dashboard-menu a:hover {
  color:hsl(calc(var(--h) - 10),var(--s),calc(var(--l) - 10%));
}

.dashboard-menu a:last-child {
  padding:0;
  border:0;
}

@media only screen and (max-width:768px) {
  h1 {
    font-size:1.8em;
  }
  h2 {
    font-size:1.6em;
  }
  h3 {
    font-size:1.4em;
  }
  h4 {
    font-size:1.2em;
  }
  h5 {
    font-size:1em;
  }
  h6 {
    font-size:.9em;
  }
  .logo {
    display:flex;
    justify-content:center;
  }
  .logo img {
    max-width:200px;
  }
  .logo a {
    justify-content:center;
  }
  .game-icon {
    justify-content:unset;
    overflow-x:scroll;
  }
  .mb-hidden {
    display:none;
  }
  .mb-p-0 {
    padding:0 !important;
  }
  .sport-menu {
    display:none;
  }
  .contact-list {
    margin-top:1rem;
  }
  .contact-list .item-12 {
    padding:0 0.2855rem;
    flex:0 0 calc(100% /(12 / 4));
    max-width:calc(100% /(12 / 4));
  }
  .main-area {
    flex:0 0 100%;
    max-width:100%;
  }
  .lottery-card {
    width:50%;
  }
  .game-icon img {
    max-width:85px;
  }
  .mobile-box {
    display:block;
    width:90%;
    margin:auto;
    margin-bottom:1rem;
    margin-top:1rem;
  }
  .mobile-input {
    width:100%;
    height:40px;
    padding-left:12px;
    padding-right:12px;
    font-size:13px;
    color:#000;
    background-color:#ffffff;
    letter-spacing:0.5px;
    border:1px solid #333333;
    border-radius:10px !important;
  }
  .btn-login-mobile {
    width:100%;
    padding:1rem;
    background:hsl(var(--h),var(--s),calc(var(--l) - 20%));
    color:#ffffff;
    border:1px solid hsl(var(--h),var(--s),calc(var(--l) - 30%));
    box-shadow:inset 0 0 5px 3px hsl(var(--h),var(--s),calc(var(--l) - 10%)),inset 0 2px 0 0 #fff,inset 0 0 0 2px hsl(var(--h),var(--s),calc(var(--l) - 25%)),3px 3px 3px 1px rgba(0,0,0,.2);
    border-radius:10px !important;
    font-weight:700;
    font-size:15px;
  }
  .btn-regis-mobile {
    display:block;
    width:100%;
    padding:1rem;
    background:#e9e9e9;
    color:hsl(var(--h),var(--s),calc(var(--l) - 40%));
    border:1px solid #696969;
    box-shadow:inset 0 0 5px 3px #aeaeae,inset 0 2px 0 0 #fff,inset 0 0 0 2px #e8e8e8,3px 3px 3px 1px rgba(0,0,0,.2);
    border-radius:10px !important;
    font-weight:700;
    font-size:15px;
  }
  .sidebar-btn {
    display:block;
  }
}

@media only screen and (max-width:480px) {
  .contact-list .item-12 {
    flex:0 0 calc(100% (12 / 6));
    max-width:calc(100% /(12 / 6));
  }
}

@media only screen and (min-width:768px) {
  .contact-list {
    max-width:18%;
    flex:0 0 18%;
  }
}

.p-r-0 {
  padding-right:0 !important;
}