/*/ Default untuk ukuran layar kecil 320px /*/ body { background: url('../../assets/image/bg1.png') center fixed no-repeat; background-size: 100% 100%; } table, tr, th, td { border: 1px solid #fff !important; color: #fff; text-align: center; padding: 5px; margin: 3px; margin-top: 7px; } .extension { visibility: hidden; } .pageBody { height: 100%; margin-bottom: 60px !important; } #myModal, #bgTransparent { position: fixed; z-index: 3; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #panduan { position: fixed; z-index: 3; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #peluang { position: fixed; z-index: 3; width: auto; height: auto; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } .responsive { width: 100%; height: auto; margin-top: 5px; } .flex-container { display: flex; justify-content: center; align-items: center; } .flex-container > div { margin: 1px; padding: 1px; } .customAlert { padding: 3px; width: auto; height: 100%; overflow-y: scroll; overflow-x: hidden; background: #800079; border-radius: 4px; } .customPeluang { padding: 3px; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; background: #800079; border-radius: 4px; } .message { padding: 3px; color: white; font-size: 14px; line-height: 15px; text-align: justify; } .close, .closePanduan, .closePeluang { border: 0; border-radius: 8px; padding: 5px 20px; display: block; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); color: #313131; font-weight: 700; font-size: 18px; margin: 3px auto; } .message-title { color: #fff; text-align: center; font-weight: 300; font-family: 'Noto Serif', serif; font-size: 18px; margin-bottom: 10px; } /*/ form ticket /*/ #formTicket { position: relative; z-index: 2; text-align: center; margin: 10px 20px; } #tombolDaftar { display: grid; grid-template-columns: auto auto; grid-gap: 22px; background-color: transparent; margin-bottom: 15px; position: relative; justify-content: center; align-items: center; } #ketikKupon { margin: 0px; } #kodeTicketTitle { font-family: 'Noto Serif', serif; text-align: center; font-size: 18px; color: aliceblue; margin-bottom: 5px; } #code { padding: 5px 8px; border-radius: 10px; } #spinImage { width: 56px; height: 31px; border-radius: 8px; cursor: pointer; margin: 5px; } .but { font-family: 'Noto Serif', serif; font-size: 18px; color: #313131; font-weight: 100; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border: 0px; border-radius: 7px; padding: 3px 9px; } .btn { padding: 5px 10px; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); letter-spacing: 1px; color: #313131; font-size: 22px !important; border-radius: 10px; font-weight: 900 !important; cursor: pointer; margin-bottom: 2px; } /*/ Winwheel /*/ canvas { width: 275px; height: 275px; } .the_wheel { position: relative; z-index: 1; margin-top: 0px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 270px; height: 270px; display: flex; justify-content: center; align-items: center; } .bodyWheel { display: flex; justify-content: center; align-items: center; } .formIndicator { position: relative; z-index: 2; margin: auto; width: 80%; background-color: rgba(200, 200, 200, 0.6); border-radius: 8px; } .indicator { display: block; color: black; background-color: rgba(200, 200, 200, 0.8); border-radius: 8px; } .sub-indicator { background-color: rgb(230, 230, 230); border-radius: 10px; padding: 4px; display: flex; justify-content: center; align-items: center; } .sub-indicator button { background: linear-gradient(to bottom, #7ce0e4 0, rgb(161, 0, 161) 80%); border-radius: 10px; margin: 2px 3px; text-align: center; display: inline-block; color: #fff; width: 90px; cursor: pointer; } .judulIndicator { text-align: center; color: black !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-decoration: none !important; } .helpPC { display: none; } .indicatorPC { display: none; } /*/ Fixed Footer for Mobile /*/ .fixed-footer { position: fixed; z-index: 2; display: flex; justify-content: space-around; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); padding: 5px 0px; left: 0; right: 0; bottom: 0; } .fixed-footer a { color: #fff !important; flex-basis: calc((100% - 15px * 6) / 4); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 10px; font-weight: 300; text-decoration: none; } @media (max-width: 320px) { #code { width: 60%; } } @media (min-width: 320px) { /*/ Winwheel /*/ canvas { width: 295px; height: 295px; } .the_wheel { position: relative; z-index: 1; margin-top: 0px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 290px; height: 290px; display: flex; justify-content: center; align-items: center; } } @media (min-width: 375px) { canvas { width: 358px; height: 358px; } .the_wheel { position: relative; z-index: 1; margin-top: 0px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; } #spinImage { width: 56px; height: 38px; border-radius: 8px; cursor: pointer; margin: 0px; } #code { width: 50%; padding: 6px 8px; } .but { font-family: 'Noto Serif', serif; font-size: 16px; color: #313131; font-weight: 100; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border: 0px; border-radius: 7px; padding: 6px 14px; } .formIndicator { position: relative; z-index: 2; margin: auto; width: 70%; background-color: rgba(200, 200, 200, 0.6); border-radius: 8px; } } @media (min-width: 414px) { .message-title { color: #fff; text-align: center; font-weight: 300; font-family: 'Noto Serif', serif; font-size: 22px; margin-bottom: 10px; } canvas { width: 398px; height: 398px; } .the_wheel { position: relative; z-index: 1; margin-top: 0px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 390px; height: 390px; display: flex; justify-content: center; align-items: center; } .btn { padding: 8px 40px; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); letter-spacing: 1px; color: #313131; font-size: 26px !important; border-radius: 10px; font-weight: 900; cursor: pointer; margin-bottom: 2px; } } @media (min-width: 540px) { #code { width: 40%; padding: 5px 8px; border-radius: 10px; } canvas { width: 446px; height: 446px; } .the_wheel { position: relative; z-index: 1; margin-top: 20px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 440px; height: 440px; display: flex; justify-content: center; align-items: center; } .formIndicator { position: relative; z-index: 2; margin: auto; width: 55%; background-color: rgba(200, 200, 200, 0.6); border-radius: 8px; } .close, .closePanduan, .closePeluang { border: 0; border-radius: 8px; padding: 8px 25px; display: block; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); color: #313131; font-weight: 700; font-size: 20px; margin: 3px auto; margin-bottom: 8px; } } @media (min-width: 660px) { #code { width: 35%; padding: 6px 8px; border-radius: 10px; } #spinImage { border-radius: 8px; cursor: pointer; margin: 0px 8px; } canvas { width: 456px; height: 456px; } .the_wheel { position: relative; z-index: 1; margin-top: 20px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 450px; height: 450px; display: flex; justify-content: center; align-items: center; } .formIndicator { position: relative; z-index: 2; margin: auto; width: 50%; background-color: rgba(200, 200, 200, 0.6); border-radius: 8px; } } @media (min-width: 712px) { body { background: url('../../assets/image/bg2.png') center fixed no-repeat; background-size: 100% 100%; } .formIndicator { width: 40%; } } @media (min-width: 767px) { .formIndicator { position: relative; z-index: 2; margin: auto; width: 35%; background-color: rgba(200, 200, 200, 0.6); border-radius: 8px; } #code { width: 30%; padding: 5px 8px; border-radius: 10px; } } @media (min-width: 800px) { .message-title { color: #fff; text-align: center; font-weight: 300; font-family: 'Noto Serif', serif; font-size: 26px; margin-bottom: 10px; } .message { padding: 3px; color: white; font-size: 20px; line-height: 1.5; text-align: justify; } #code { padding: 10px 8px; font-size: 16px; border-radius: 10px; } #spinImage { width: 76px; height: 46px; border-radius: 8px; cursor: pointer; margin: 5px; } .but { font-family: 'Noto Serif', serif; font-size: 18px; color: #313131; font-weight: 100; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border: 0px; border-radius: 7px; padding: 10px 20px; } .btn { padding: 5px 10px; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); letter-spacing: 1px; color: #313131; font-size: 30px !important; border-radius: 10px; font-weight: 900 !important; cursor: pointer; margin-bottom: 2px; } #tombolDaftar { display: grid; grid-template-columns: auto auto; grid-gap: 22px; background-color: transparent; margin-bottom: 15px; margin-top: 15px; position: relative; justify-content: center; align-items: center; } canvas { width: 586px; height: 586px; } .the_wheel { position: relative; z-index: 1; margin-top: 20px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 580px; height: 580px; display: flex; justify-content: center; align-items: center; } .sub-indicator button { background: linear-gradient(to bottom, #7ce0e4 0, rgb(161, 0, 161) 80%); border-radius: 10px; margin: 2px 3px; text-align: center; display: inline-block; color: #fff; width: 90px; cursor: pointer; padding: auto; font-size: 20px; } .fixed-footer { position: fixed; z-index: 2; display: flex; justify-content: space-around; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); padding: 5px 0px; left: 0; right: 0; bottom: 0; } .fixed-footer a { color: #fff !important; flex-basis: calc((100% - 15px * 6) / 4); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 16px; font-weight: 300 !important; text-decoration: none; } } @media (min-width: 992px) { body { background: url('../../assets/image/bg.png') center fixed no-repeat; background-size: 100% 100%; } .extension { visibility: visible; z-index: 2; } .pageBody { height: auto; } #myModal, #bgTransparent { position: fixed; z-index: 3; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #panduan { position: fixed; z-index: 3; width: 100%; height: 100%; overflow: scroll !important; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #peluang { position: fixed; z-index: 3; width: auto; height: auto; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } .responsive { width: 100%; height: auto; margin-top: 5px; } .flex-container { display: flex; justify-content: center; align-items: center; } .flex-container > div { margin: 1px; padding: 1px; } .customPeluang { padding: 3px; width: 100%; height: 100%; background: #800079; border-radius: 4px; } .customAlert { padding: 3px; width: 75%; height: 100%; overflow: scroll !important; background: #800079; border-radius: 4px; } .message { padding: 3px; color: white; font-size: 16px; line-height: 1.5; text-align: justify; } .close, .closePanduan, .closePeluang { border: 0; border-radius: 8px; padding: 5px 26px; display: block; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); color: #313131; font-weight: 700; font-size: 20px; margin: 3px auto; } .message-title { color: #fff; text-align: center; font-weight: 300; font-family: 'Noto Serif', serif; font-size: 18px; margin-bottom: 10px; } /*/ form ticket /*/ #formTicket { position: relative; z-index: 2; text-align: center; margin: 10px 20px; } #tombolDaftar { display: grid; grid-template-columns: auto auto; grid-gap: 30px; background-color: transparent; margin-bottom: 15px; position: relative; justify-content: center; align-items: center; } #ketikKupon { margin: 0px; } #kodeTicketTitle { font-family: 'Noto Serif', serif; text-align: center; font-size: 18px; color: aliceblue; margin-bottom: 5px; } #code { width: 18%; padding: 5px 8px; border-radius: 10px; } #spinImage { width: 56px; height: 36px; border-radius: 8px; cursor: pointer; margin: 5px; } .but { font-family: 'Noto Serif', serif; font-size: 20px; color: #313131; font-weight: 100; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border: 0px; border-radius: 7px; padding: 3px 9px; padding-bottom: 5px; } .btn { padding: 5px 10px; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); letter-spacing: 1px; color: #313131; font-size: 22px !important; border-radius: 10px; font-weight: 900 !important; cursor: pointer; margin-bottom: 2px; } /*/ Winwheel /*/ canvas { width: 385px; height: 385px; } .the_wheel { position: relative; z-index: 1; margin-top: 0px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 380px; height: 380px; display: flex; justify-content: center; align-items: center; } .bodyWheel { display: flex; justify-content: center; align-items: center; } /*/ Indicator /*/ .formIndicator { display: none; } .judulIndicator { text-align: center; color: black !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-decoration: none !important; } .indicatorPC { position: relative; z-index: 2; display: block; color: black; background-color: rgba(200, 200, 200, 0.8); border-radius: 10px; padding: 5px 5px; margin-bottom: 3px; } .helpPC { position: relative; z-index: 2; display: grid; grid-template-columns: auto auto; gap: 7px; justify-content: center; align-items: center; border-radius: 10px; background-color: rgba(200, 200, 200, 0.8); padding: 4px; } .helpPC button { background: linear-gradient(to bottom, #7ce0e4 0, rgb(161, 0, 161) 80%); border-radius: 10px; margin: 2px 3px; padding: 2px; text-align: center; display: inline-block; color: #fff; width: 90px; cursor: pointer; } .sub-indicatorPC { background-color: rgb(230, 230, 230); border-radius: 10px; padding: 4px; display: flex; justify-content: center; align-items: center; } .sub-indicatorPC button { background: linear-gradient(to bottom, #7ce0e4 0, rgb(161, 0, 161) 80%); border-radius: 10px; margin: 2px 3px; text-align: center; display: inline-block; color: #fff; width: 90px; cursor: pointer; } /*/ Fixed Footer for Mobile /*/ .fixed-footer { display: none; } } @media (min-width: 1280px) { .message { padding: 3px; color: white; font-size: 16px; line-height: 1.5; text-align: justify; } .close, .closePanduan, .closePeluang { border: 0; border-radius: 8px; padding: 5px 26px; display: block; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); color: #313131; font-weight: 700; font-size: 20px; margin: 8px auto; } .message-title { color: #fff; text-align: center; font-weight: 300; font-family: 'Noto Serif', serif; font-size: 26px; margin-bottom: 12px; } #code { width: 16%; padding: 5px 8px; border-radius: 10px; } canvas { width: 485px; height: 485px; } .the_wheel { position: relative; z-index: 1; margin-top: 5px !important; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 480px; height: 480px; display: flex; justify-content: center; align-items: center; } } @media (min-width: 1440px) { #code { width: 14%; padding: 5px 8px; border-radius: 10px; } canvas { width: 505px; height: 505px; } .the_wheel { position: relative; z-index: 1; margin-top: 5px !important; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } } @media (min-width: 2560px) { table, tr, th, td { border: 1px solid #fff !important; color: #fff; text-align: center; padding: 5px; margin: 3px; margin-top: 7px; font-size: 28px; } .pageBody { height: 100%; } #myModal, #bgTransparent { position: fixed; z-index: 3; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #panduan { position: fixed; z-index: 3; width: 100%; height: 100%; overflow: scroll !important; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #peluang { position: fixed; z-index: 3; width: auto; height: auto; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } .responsive { width: 100%; height: auto; margin-top: 5px; } .flex-container { display: flex; justify-content: center; align-items: center; } .flex-container > div { margin: 1px; padding: 1px; } .customAlert { padding: 3px; width: 100%; height: 100%; background: #800079; border-radius: 4px; } .message { padding: 3px; color: white; font-size: 30px; line-height: 1.5; text-align: justify; } .close, .closePanduan, .closePeluang { border: 0; border-radius: 8px; padding: 5px 26px; display: block; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); color: #313131; font-weight: 700; font-size: 34px; margin: 20px auto; } .message-title { color: #fff; text-align: center; font-weight: 300; font-family: 'Noto Serif', serif; font-size: 36px; margin-bottom: 10px; } /*/ form ticket /*/ #formTicket { position: relative; z-index: 2; text-align: center; margin: 10px 20px; } #tombolDaftar { display: grid; grid-template-columns: auto auto; grid-gap: 60px; background-color: transparent; margin-bottom: 15px; position: relative; justify-content: center; align-items: center; } #ketikKupon { margin: 0px; } #kodeTicketTitle { font-family: 'Noto Serif', serif; text-align: center; font-size: 32px; color: aliceblue; margin-bottom: 5px; } #code { width: 14%; font-size: 24px; padding: 11px 10px; border-radius: 10px; } #spinImage { width: 92px; height: 58px; border-radius: 8px; cursor: pointer; margin: 0px; } .but { font-family: 'Noto Serif', serif; font-size: 32px; color: #313131; font-weight: 100; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border: 0px; border-radius: 7px; padding: 5px 20px; } .btn { padding: 5px 10px; background: linear-gradient(to bottom, #ffc74d 0, rgb(189, 107, 0) 80%); letter-spacing: 1px; color: #313131; font-size: 40px !important; border-radius: 10px; font-weight: 900 !important; cursor: pointer; margin-bottom: 2px; } /*/ Winwheel /*/ canvas { width: 706px; height: 706px; } .the_wheel { position: relative; z-index: 1; margin-top: 0px; background-image: url('../../assets/image/wheel.png'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 700px; height: 700px; display: flex; justify-content: center; align-items: center; } .bodyWheel { display: flex; justify-content: center; align-items: center; } /*/ Indicator /*/ .formIndicator { display: none; } .judulIndicator { text-align: center; color: black !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-decoration: none !important; } .indicatorPC { position: relative; z-index: 2; display: block; color: black; background-color: rgba(200, 200, 200, 0.8); border-radius: 10px; padding: 10px 10px; margin-bottom: 3px; } .helpPC { position: relative; z-index: 2; display: grid; grid-template-columns: auto auto; gap: 7px; justify-content: center; align-items: center; border-radius: 10px; background-color: rgba(200, 200, 200, 0.8); padding: 4px; } .helpPC button { background: linear-gradient(to bottom, #7ce0e4 0, rgb(161, 0, 161) 80%); border-radius: 10px; margin: 2px 3px; padding: 2px; text-align: center; display: inline-block; color: #fff; width: 150px; cursor: pointer; font-size: 30px; } .sub-indicatorPC { background-color: rgb(230, 230, 230); border-radius: 10px; padding: 4px; display: flex; justify-content: center; align-items: center; } .sub-indicatorPC button { background: linear-gradient(to bottom, #7ce0e4 0, rgb(161, 0, 161) 80%); border-radius: 10px; margin: 2px 3px; text-align: center; display: inline-block; color: #fff; font-size: 30px; width: 150px; cursor: pointer; } /*/ Fixed Footer for Mobile /*/ .fixed-footer { display: none; } } /*/ Animation Keyframes /*/ .fadesample { animation-name: fadeOut; animation-duration: 3s; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }