@font-face {
    font-family: font_menu;
    src: url(fonts/Poppins/Poppins-Medium.otf);
}

@font-face {
    font-family: font_content;
    src: url(fonts/Poppins/Poppins-Medium.otf);
}

@font-face {
    font-family: font_content_light;
    src: url(fonts/Poppins/Poppins-Thin.otf);
}

:root {
    color-scheme: only light;
}

body {
    background-color: #F7FBFC;
    background-size: contain;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    font-family: font_content;
    color: #3b2518;
}

.bg-fixed {
  position: fixed;
  inset: 0;                        /* shorthand for top/right/bottom/left:0 */
  background-image: url(../styles/images/main_bg.png);
  z-index: -1;                     /* stay behind everything */
  will-change: transform;          /* smoother scroll perf on mobile */
  background-size: 100% auto;
    background-repeat: no-repeat; 
    background-position: center;
    top:0;left:0;width:100%;height:100%;
}
input {color:#3b2518}
    body.scratchnwin {
        background-color: #F7FBFC;
        background-size: cover;
        width: 100vw;
        height: 100vh;
        background-image: url(../styles/images/scratch_bg.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0;
        font-family: font_content;
        color: #3b2518;
    }

    body::-webkit-scrollbar {width: 3px;}
    body::-webkit-scrollbar-track {background: #f1f1f1;}
    body::-webkit-scrollbar-thumb {background: #E26B27;}
    body::-webkit-scrollbar-thumb:hover {background: #393939;}

.menu           {position:fixed;right:0;padding: 20px;z-index:30;}
    .menu > ul  {text-align: center;margin: 0px auto;}
        .menu > ul > li {float: left;list-style-type: none;display: inline-block;height: 42px;margin-left:30px;}             
        .menu > ul > li img {height: 42px;}             
            .menu > ul > li > a {text-decoration: none;color: #fff;opacity: 1;cursor:pointer}
                .menu > ul > li > a:active {text-decoration: none;color: #fff;}


.bg-flower      {  background-size: contain;background-image: url(../styles/images/bg_flower.png);background-size:100% auto; background-repeat: no-repeat;background-attachment: fixed;z-index:2;position:fixed;top:0px;left:0px;width:100%;height:100%;}
.bg-flower-top  { display:none;}
.bg-flower-bot  { display:none;}
.bg-flower-home {background-size: contain;background-image: url(../styles/images/bg_flower.png);background-size:100% auto; background-repeat: no-repeat;background-attachment: fixed;z-index:2;position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:0;}

#img1           {z-index:10;position:absolute; height:80vh;top:-1000px;left:50%;transform:translateX(-50%);}
#img2           {z-index:5;position:absolute; width:0px;top:50%;left:50%;opacity:0;}
#img3           {z-index:15;position:absolute; width:15vw;top:-1000px;left:50%;opacity:0;transform:translateY(-50%);opacity:0;}
#img4           {z-index:25;position:absolute; width:0px;top:-1000px;left:50%;}
#img5           {display:none;}
#img6           {z-index:10;position:fixed; width:400px;top:-1000px;left:50%;margin-left:-200px;}
#img7           {z-index:10;position:fixed; width:400px;top:-1000px;}
#img8           {display:none;}

#imgs0           {z-index:40;position:fixed; width:400px;top:-1000px;left:50%;margin-left:-200px;}
#imgs1           {z-index:10;position:absolute; width:400px;top:-1000px;left:50%;margin-left:-200px;}
#imgs2           {z-index:5;position:fixed; width:0px;top:-1000px;left:50%;}
#imgs3           {z-index:5;position:absolute; width:0px;top:-1000px;left:50%;}
#imgs4           {z-index:25;position:absolute; width:0px;top:-1000px;left:50%;}

#scratch-title   {z-index:25;position:absolute; width:0px;top:-1000px;left:50%;text-align:center;}
#scratch-title img{width:60%;}
#scratchcontainer{z-index:25;position:relative; width:240px;height:240px;top:-1000px;left:50%;text-align:center;display:inline-block}
#imgscratch      {z-index:20;position:absolute; top:0;left:0;}
#redux           {z-index:25;position:absolute; top:0;left:0;opacity:1;}
#scratch-info    {z-index:25;position:absolute; width:0px;top:-1000px;left:50%;text-align:center;}
#scratch-title b {color:#3b2518;font-size:24px;}
#scratch-refresh {z-index:25;position:absolute; width:0px;top:-1000px;left:50%;text-align:center;}
#scratch-refresh img {width:250px;margin:0px auto;cursor:pointer;}


.bg-shadow      {z-index:100;position:fixed;width:100%;height:100%; background-color:#000; display:none;opacity:0.6}
.modal-box      {z-index:110;position:fixed;width:600px;height:404px; margin:0px auto; top: 150px;background-image:url(../styles/images/modal_bg.png?x=5);background-size:contain; background-repeat:no-repeat; left:0;right:0;display:none;background-size: contain;}
.modal-box-congrats      {z-index:112;position:fixed;width:600px;height:268px; margin:0px auto; top: 150px;background-image:url(../styles/images/modal_congrats.png?x=7);background-size:contain; background-repeat:no-repeat;left:0;right:0;display:none;background-size: contain;cursor:pointer}
.modal-box-runout        {z-index:110;position:fixed;width:600px;height:251px; margin:0px auto; top: 150px;background-image:url(../styles/images/modal_runout.png?x=7);background-size:contain; background-repeat:no-repeat;left:0;right:0;display:none;background-size: contain;cursor:pointer;background-repeat:no-repeat;}

    .modal-box > .title      {font-size:22px;font-weight:normal;width:550px;margin:0px auto;text-align:center;margin-top:30px;line-height:20px;}
    .modal-box > .subtitle   {font-size:18px;font-weight:bold;width:550px;margin:0px auto;text-align:center;font-family:font_content_light}
    
    .modal-box > .modal-form {width:500px;margin:20px auto 10px;;}
        .modal-form > .modal-form-line      {width:500px;overflow:hidden;margin-bottom:2px;height:35px;}
        .modal-form > .modal-form-line-alert{width:475px;overflow:hidden;margin:0 0 0 50px;height:20px;font-size:14px;color:red;font-weight:lighter;}
        .modal-form-line > .form-icon       {height:25px;width:25px;float:left;margin-right:10px;}
        .modal-form-line > .form-icon >img  {height:25px;}
        .modal-form-line > .form-field      {width:465px;float:left;background-image:url(../styles/images/textbox.png);background-size:cover;height:40px;}
        .form-field-textbox                 {border: none;top: 9px;left: 50%;transform: translateX(-50%);position: relative;height: 20px;font-size: 18px;width: 430px;}
        .modal-form > .modal-form-line-thick{width:500px;overflow:hidden;margin:0px auto 10px;height:50px;}
        .modal-form > .modal-form-line-thick img {left: 50%;transform: translateX(-50%);margin:0px auto;cursor:pointer;position:relative;}

        .modal-form > .modal-form-line-otp  {width:400px;overflow:hidden;margin-bottom:40px;height:70px; display: flex;gap: 20px;padding-top:20px;transform:translateX(-50%);left:50%;position:relative}
        .otp_char                           {width:50px;height:70px; color:#3b2518; }
        .txt_otp                            {background-color:rgba(0, 0, 0, 0.15);border-bottom:solid 2px #3b2518;font-size: 50px;width: 50px;left: 50%;position: relative;transform: translateX(-50%);text-align: center;  }
        .txt_otp:focus {outline: none;}
        .modal-form > .modal-form-line-res  {width:500px;overflow:hidden;margin-bottom:10px;height:165px;}
        .modal-form-line-res  img           {width:165px;height:165px; position: relative;left: 50%;transform: translateX(-50%);}

        .modal-footer               {color:#3b2518;font-family:font_content_light;text-align:center;width:550px;margin:0px auto;font-size:14px;}
        .modal-footer a             {color:#3b2518;text-decoration:none;font-weight:bold;font-family:font_content;}
        .form-spinner               {animation: rotation 2s infinite linear;height:60px;left: calc(50% - 30px) !important;}
                                    @keyframes rotation         {
                                            from {transform: rotate(0deg);}
                                            to {transform: rotate(359deg);}
                                    }
.modal-close                                { width:30px; height:30px;right:0px;position:relative;float:right;cursor:pointer}
	#form_result {background-image:url('../styles/images/modal_congrats_wrong.png');background-size:100% 100%;background-repeat:no-repeat;}
input {outline-width: 0;background: transparent; border: none;}



.tnc_box                            {position:relative;width:1100px;height:75%;margin:18vh auto;background-image:url(../styles/images/tnc.png);    background-size: 100% 100%;}
.tnc_scroll                         {position:relative;width:1050px;height:92%;margin:0px auto;overflow-y:scroll;overflow-x:hidden;top:20px;}
    .tnc_scroll::-webkit-scrollbar {width: 3px;}
    .tnc_scroll::-webkit-scrollbar-track {background: #f1f1f1;}
    .tnc_scroll::-webkit-scrollbar-thumb {background: #E26B27;}
    .tnc_scroll::-webkit-scrollbar-thumb:hover {background: #393939;}
.tnc_content                        {position:relative;width:1050px;font-size:12px;}
#header_tnc                         {width:300px;left:50%;transform:translateX(-50%);position:relative;margin:20px 0px;}
.tnc_content_ul                     {}
    .tnc_content_ul li              {margin-bottom:10px;}

.desktop        {display:block}
.mobile         {display:none}
#lblEmail {font-family: font_content;}
@media print, screen and (max-width:640px) { 
    body            {  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;}
    body.scratchnwin{background-image: url(../styles/images/form_bg.png);overflow-y:unset;overflow-x:hidden;overflow-y:scroll;background-size: 100% 100%;}
 
 
.bg-fixed {
  position: fixed;
  inset: 0;                        /* shorthand for top/right/bottom/left:0 */
  background-image: url(../styles/images/mobile_bg.png);background-size:100% 100%;
  z-index: -1;                     /* stay behind everything */
  will-change: transform;          /* smoother scroll perf on mobile */
    background-repeat: no-repeat; 
    background-position: center;
    top:0;left:0;width:100vw;height:100vh;
}
 
    .menu           {position:fixed;bottom:10px;right:10px;padding: 5px;z-index:30;}
    .menu > ul  {text-align: center;margin: 0px auto;}
        .menu > ul > li {float: none;list-style-type: none;display: block;height: 60px;margin-left:30px;}             
        .menu > ul > li img {height:40px;}             
            .menu > ul > li > a {text-decoration: none;color: #fff;opacity: 1;cursor:pointer}
                .menu > ul > li > a:active {text-decoration: none;color: #fff;}


    .bg-flower      {  display:none}
    .bg-flower-top  {  display:block; background-size: contain;background-image: url(../styles/images/mobile_top.png);background-size:100% auto; background-position:top;          background-repeat: no-repeat;background-attachment: fixed;z-index:2;position:fixed;top:0px;left:0px;width:100%;height:200px;}
    .bg-flower-bot  {  display:block; background-size: contain;background-image: url(../styles/images/mobile_bot.png);background-size:100% auto; background-position:bottom;       background-repeat: no-repeat;background-attachment: fixed;z-index:2;position:fixed;bottom:0px;left:0px;width:100%;height:200px;}
    .bg-flower-home {  background-size: contain;background-image: url(../styles/images/bg_flower_mobile.png);background-size:100% auto; background-position:bottom; background-repeat: no-repeat;background-attachment: fixed;z-index:10;position:fixed;bottom:0px;left:0px;width:100%;height:160px;top:unset;opacity:1}

    #home {height:120%;}
    #img1           {display:none}
    #img2           {z-index:5;position:absolute; width:0px;display:none;}
    #img3           {z-index:5;position:absolute; width:0px;top:-1000px;left:50%;}
    #img4           {z-index:25;position:absolute; width:250px;top:520px;left:50%;transform:translateX(-50%)}
    #img5           {z-index:5;position:absolute; width:35vh;top:65vh;left:50%;transform:translateX(-50%);display:block}
    #img6           {z-index:5;position:fixed; width:70%;top:25px;left:50%;transform:translateX(-50%);margin:unset;}
    #img8           {z-index:10;position:absolute; width:100%;top:20px;left:unset;margin:unset;display:block; transform:translateX(-50%);left:50%;}

    #imgs0           {z-index:40;position:fixed; width:80%;top:50px;margin-left:0;transform:translateX(-50%)}
    #imgs1           {z-index:10;position:absolute; width:100%;top:140px;margin:0;left:0;}
    #imgs1m          {z-index:10;position:absolute; width:100%;top:100px;margin:0;left:0;}
    #imgs2           {z-index:5;position:absolute; width:0px;display:none;}
    #imgs3           {z-index:5;position:absolute; width:0px;display:none;}
    #imgs4           {z-index:25;position:absolute; width:0px;display:none;}

    #scratch-title   {z-index:25;position:absolute; width:100%;top:270px;left:0%;text-align:center;font-size:12px;}
    #scratchcontainer{z-index:25;position:relative; width:300px;height:300px;top:350px;left:50%;transform:translateX(-50%);text-align:center;display:inline-block}
    #scratchcontainer img {width:300px;}
    #imgscratch      {z-index:20;position:absolute; top:0;left:0;}
    #redux           {z-index:25;position:absolute; top:0;left:0;opacity:1;}
    #scratch-info    {z-index:25;position:absolute; width:100%;top:720px;text-align:center;left:0%;font-size:12px;}
    #scratch-title b {color:#3b2518;font-size:20px;}

    #scratch-refresh {z-index:25;position:absolute; width:90%;top:665px;margin:0px auto; text-align:center;font-size:12px;left:0; right:0;}
        #scratch-refresh img {width:250px;margin:0px auto;cursor:pointer;}



    .bg-shadow      {z-index:100;position:fixed;width:100%;height:100%; background-color:#000; display:none;opacity:0.6}
    .modal-box      {z-index:110;position:fixed;width:94vw;height:85vw; margin:0px auto; top: 150px;background-image:url(../styles/images/mobile_modal_bg.png?x=2);left:0;right:0;display:none;background-size: contain;background-size:100% 100%;}
    .modal-box-congrats      {z-index:112;position:fixed;width:90%;margin:0px auto; top: 150px;background-image:url(../styles/images/mobile_modal_congrats.png?x=3);left:0;right:0;display:none;background-size: 100% auto;cursor:pointer; background-repeat:no-repeat;}
    .modal-box-runout        {z-index:110;position:fixed;width:90%;margin:0px auto; top: 150px;background-image:url(../styles/images/mobile_modal_runout.png?x=2);left:0;right:0;display:none;background-size: 100% auto;cursor:pointer; background-repeat:no-repeat;}

        .modal-box > .title      {font-size:18px;font-weight:normal;width:96%;margin:0px auto;text-align:center;margin-top:15px}
        .modal-box > .subtitle   {font-size:14px;font-weight:bold;width:96%;margin:0px auto;text-align:center;font-family:font_content_light}
    
        .modal-box > .modal-form {width:90%;margin:5px auto 5px;}
            .modal-form > .modal-form-line      {width:100%;overflow:hidden;margin-bottom:0px;height:35px;}
            .modal-form > .modal-form-line-alert{width:100%;overflow:hidden;margin:0 0 0 40px;height:14px;font-size:9px;color:red;font-weight:lighter;}
            .modal-form-line > .form-icon       {height:90%;float:left;margin-right:10px;}
            .modal-form-line > .form-icon >img  {height:100%;}
            .modal-form-line > .form-field      {width:88%;float:left;background-image:url(../styles/images/textbox.png);background-size:cover; height:35px;background-size:100% 100%;}
            .form-field-textbox                 {border: none;top: 4px;left: 50%;transform: translateX(-50%);position: relative;height: 20px;font-size: 16px;width:94%;}
            .modal-form > .modal-form-line-thick{width:100%;overflow:hidden;margin:0px auto 0px;height:40px;}
            .modal-form > .modal-form-line-thick img {left: 50%;transform: translateX(-50%);margin:0px auto;cursor:pointer;position:relative;width:160px;}

            .modal-form > .modal-form-line-otp  {width:100%;overflow:hidden;margin:30px auto;height:80px; display: flex;gap: 1%;padding:20px 2.5%;position:unset;left:unset;transform:unset;}
            .otp_char                           {width:15%;height:103px; color:#3b2518; }
            .txt_otp                            {background-color:rgba(0, 0, 0, 0.15);border-bottom:solid 2px #3b2518;font-size: 50px;width: 90%;left: 50%;position: relative;transform: translateX(-50%);text-align: center;  }

            .modal-form > .modal-form-line-res  {width:94%;overflow:hidden;height:165px;margin:30px auto;}
            .modal-form-line-res  img           {width:165px;height:165px; position: relative;left: 50%;transform: translateX(-50%);}

            .modal-footer               {color:#3b2518;font-family:font_content_light;text-align:center;width:94%;margin:0px auto;font-size:10px;}
            .modal-footer a             {color:#3b2518;text-decoration:none;font-weight:bold;}
            .form-spinner               {animation: rotation 2s infinite linear;left: calc(50% - 20px) !important;height:40px !important;width:40px !important;}
                                        @keyframes rotation         {
                                                from {transform: rotate(0deg);}
                                                to {transform: rotate(359deg);}
                                        }
										
	#form_result {background-image:url('../styles/images/mobile_modal_congrats_wrong.png');background-size:100% 100%;background-repeat:no-repeat;cursor:pointer;}
    input {outline-width: 0;background: transparent; border: none;}



    .tnc_box                            {position:relative;width:90%;height:76vh;margin:60px auto 100px;background-image:url(../styles/images/tnc_mobile.png);background-size:100% 100%;}
    .tnc_scroll                         {position:relative;width:90%;height:92%;margin:0px auto;overflow-y:scroll;overflow-x:hidden;top:20px;}
        .tnc_scroll::-webkit-scrollbar {width: 3px;}
        .tnc_scroll::-webkit-scrollbar-track {background: #f1f1f1;}
        .tnc_scroll::-webkit-scrollbar-thumb {background: #E26B27;}
        .tnc_scroll::-webkit-scrollbar-thumb:hover {background: #393939;}
    .tnc_content                        {position:relative;width:100%;font-size:10px;}
    #header_tnc                         {width:220px;left:50%;transform:translateX(-50%);position:relative;margin:20px 0px;}
    
    .tnc_content_ul                     {padding-left:20px;}
        .tnc_content_ul li              {margin-bottom:10px;}

    .desktop        {display:none}
    .mobile         {display:block}




}



.alert_input {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 1;
}

@keyframes shake {
    0% {
        background-color: #F05623;
    }
     

    100% {
        background-color: transparent;
    }
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}