@media screen and (min-width:0\0){
    .submit-btn > .flex > .font-chi {
      margin-bottom: 13px !important; 
  }
  .font-chi{
    font-weight: bold;
  }
  
  
  .btn-En-center{
    text-align: center;
  }
  }
  .btn-En-center{
    margin: auto !important ;
  }
.alert.show{
    display: block;
}


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

@font-face {
  font-family: chinese;
  src: url(../fonts/chi_blod.otf);
}

body{
    color: #fff;
    /* text-align: justify; */
}
.en body {
    font-family: 'Red Hat Text', 'Tahoma', 'Arial', sans-serif !important;
}
.ch body {
    font-family: 'Noto Sans HK', 'Microsoft Yahei', '微軟正黑體', arial, sans-serif !important;
}
body > * {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
  }
  
  ::-webkit-scrollbar {
    /*display: none;
	display:inherit;*/
  }

h1{
    font-size: 35px;
}

h2{
    font-size: 26px;
}

h3{
    font-size: 18px;
}

h5{
    font-size: 17px;
}

h6{
    font-size: 12px;
    line-height: 1.2rem;
}
.en h1, .en h2, .en h3, .en h4, .en h6, {
    font-family: 'Red Hat Text', 'Tahoma', 'Arial', sans-serif !important;
}
.ch h1, .ch h2, .ch h3, .ch h4, .ch h6, {
    font-family: 'Noto Sans HK', 'Microsoft Yahei', '微軟正黑體', arial, sans-serif !important;
}
.font-chi{
    /*font-family: chinese, Arial, Helvetica, sans-serif;*/
	margin-bottom:3px;
	font-family: 微軟正黑體, "Microsoft JhengHei", "Microsoft JhengHei", "Meiryo UI", Meiryo, arial, "open sans";
	/* text-shadow: 0px 1px, 1px 0px, 1px 1px; */
    font-weight: 700;
}
.container.sog-wrapper {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    position: inherit;
    min-height: 100vh;
}

.background{
    min-height: 100vh;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    position: relative;
}

.deco{
    position: fixed;
    z-index: 0;
}

.deco-vol{
    top: 0;
    left: -20%;
}

.deco-horse{
    top: 0;
    right: -100px;
    height: 350px;
}

.deco-horse img{
    height: 100%;
    width: auto;
}

.nav{
    z-index: 999;
    display: flex;
    width: 90%;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 20px 0 0 0;
}

.font-prov{
    font-family: Provicali, Arial, Helvetica, sans-serif;
    display: grid;
}

.trophy{
    display: inline-block;
    padding: 10px;
    text-align: center;
    height: 145px;
    margin-top: -30px;
    margin-bottom: -10px;
    z-index: 999;
}

.trophy img{
    width: auto;
    height: 100%;
}

.list{
    background: url(../images/textbox_long.png) center center no-repeat;
    background-size: 125% 104%;
    border-radius: 5px;
    width:90%; 
    margin-top: -5px;
    position: relative;
    max-width: 650px;
}
.list ul{
    width:80%; 
    margin: auto;
    padding-top: 10px;
}

.list-content{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #349FD9;
    border-top: 1px solid #99D6F6;
    height: 55px;
}

.list-content:first-child{
    border-top: none;
}

.list-content:last-child{
    border-bottom: none;
    margin-bottom: 14px;
}

.result-index{
    display: flex;
    align-items: center;
    /*border-bottom: 1px solid #349FD9;*/
    margin: 0 20px;
    padding-bottom: 15px;
	padding-top:30px;
}

.rank{
    width: 64px;
    height: 64px;
    margin: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank img{
    width: 100%;
    height: auto;
}

.rank h5{
    opacity: 0.6;
}

.score{
    margin-left: 20px;
}

.notice{
    margin: 10px 0 40px 0;
    width:80%; 
    max-width: 580px;
}

.result{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*text-shadow: 2px 2px 4px #009DFF;*/
    flex: 1;
}

.submit-form{
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    /*background-color: #9dbde4;
    background-color: #fff;*/
}

.result-form{

    background-size: 100% 100%;
    /*color: var(--rh-themecolor-primary);*/
	color:#333;
    font-size: 16px;
    box-sizing: border-box;
    position: relative;
    padding: 15px;
    padding-top: 30px;
    /*height: 100vh;*/
    min-height: 100vh;
	background: #F9CBD5;
    background: linear-gradient(180deg,rgba(249, 203, 213, 1) 0%, rgba(206, 207, 227, 1) 100%);
	
}

/*
.result-form {
    border-radius: 5px;
    background: url(../images/textbox_long.png) center center no-repeat;
    background-size: 118% 104%;

}*/

#scoreReturned{
    margin-top: 5px;
    border: solid #237df4;
}
.result-form-body{
    margin-bottom: 30px;
}

.player-result-png{
    height: 80px;
    margin: 0 0 0 15px;
}

.player-result-png img{
    width: auto;
    height: 100%;
}
.player-result{
    width: 155px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    text-shadow: 2px 2px 2px #008CFF;
}

.player-result:last-child{
    border: 0px solid #ffffff;
    border-radius: 50px;
}

.name,
.mobile,
.captcha-input {
position: relative;
     /*   border: 2px solid #fff;
    border-radius: 50px;
    padding: 6px 16px;
    height: 45px;
    font-size: 12px;
    8margin: 6px 20px;
    margin: 6px 10px;*/
}

.name{
    margin-top: 10px;
}

.name label, .mobile label, .captcha-input label {
    display: inline-block;
}
.captcha-input label {

}

.form-notice{
    font-size: 12px;
    display: block;
    margin: 4px 28px;
}

#captcha {
    padding-left: 120px;
}


#v_captcha{
   
}


::placeholder{
    color: #ffffff;
}


#tnc,
#promo{
    margin-right: 10px;
    width: auto;
}
.tnc-click{
    align-items: flex-start;
    display: flex;
    margin: 6px 0;
    width: 100%;
    box-sizing: border-box;
}
.tnc-click label{
padding-left: 30px;
}

.en .tnc-click label{
    font-family: 'Red Hat Text', 'Tahoma', 'Arial', sans-serif !important;
}
.ch .tnc-click label{
    font-family: 'Noto Sans HK', 'Microsoft Yahei', '微軟正黑體', arial, sans-serif !important;
}

.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
   /*width: 280px;*/
   color: var(--rh-themecolor-primary);
    font-size: 24px;
    border: none;
    cursor: pointer;
    transition: color 0.4s;
    background: none;
	margin-bottom:5px;
}

.btn .font-chi,
.player-result .font-chi{
    font-size: 21px;
    margin-right: 8px;
}

.btn:focus{
    outline: none;
}

.replay-btn{
    background: url(../images/btn-blue.png) center center no-repeat;
    background-size: 100% 120%;
}
.replay-btn-yellow{
    background: url(../images/btn-lightgreen.png) center center no-repeat;
    background-size: 100% 120%;
}

.flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -14px;
}

.flex > .font-chi{
    margin: auto !important;
}

.flex > .font-prov{
    margin-top: 0px;
}

.submit-btn a,
.replay-btn a,
.replay-btn-yellow a{

}

.submit-btn{
    /*text-shadow: 2px 2px 4px #009DFF;*/
    background: url(../images/btn-blue.png) center center no-repeat;
    background-size: 100% 120%;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}


.replay-btn a{
    margin-top: -6px;
}
.replay-btn-yellow a{
    /*margin-top: -6px;*/
}

.line{
    border: 1px solid #ffffff;
    width: 150px;
    margin: 16px auto;
}

.facebook{
    height:65px;
    /*background: url(../images/btn-green.png) center center no-repeat;*/
    background-size: 100% 120%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.facebook a{
    /*margin-top: -6px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
}

.fb-logo{
    width: 42px;
    height: 42px;
    margin-right: 6px;
}

.fb-logo img{
    width: 100%;
    height: auto;
}

.icon{
    display: inline-flex;
    align-items: flex-start;
    width: 100%;
    height: 80px;
}

.icon img{
    margin-left: 10px;
    margin-top: 10px;
    opacity: 0.3;
    height: 100%;
    width: auto;
}



.tick {
    width: 90%;
    /* height: 200px; */
   
    /* background: url(../images/tick_bg.png) center center no-repeat; */
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: 63px; */
    margin-bottom: 0px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.tick img{
    width: 100%;
    height: 100%;

}

.success-font{
    text-align: center;
    margin-top: 16px;
   /* text-shadow: 2px 2px 4px #00F9FF;*/
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

.home,
.back{
    width: 51px;
    height: 50px;
    margin: 0 6px;
}

/*.home img,
.back img{
    width: 100%;
    height: 100%;
}*/

.alert{
    color:red;
    margin: 0 36px;
    display: none;
}

::-ms-clear { 
    display: none; 
}


.captcha-img{
    display: flex;
    align-items: center;
    justify-content: center;
}

.captcha-img img{
    width: 120px;
    height: auto;
    border-radius: 10px;
}

.refresh{
    width: 45px;
    background: none;
    border-radius: 20px;
    outline: none;
    border: none;
    margin-right: -14px;
}

.refresh img{
    width: 100%;
}

label{
    cursor: pointer;
}

.textbox{
    /*background: url(../images/textbox.png) top center no-repeat;*/
   /* background-size: 100% 100%;
    height: 320px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-width: 650px;
	
	background: rgb(62,62,62);
    background: radial-gradient(circle, rgba(62,62,62,1) 17%, rgba(0,0,0,1) 100%);
    border: 1px solid #fff;
    border-radius: 15px;*/
}




.light-effect{
  /*  position: absolute;
    background: url(../images/box_light.png) top center no-repeat;
    background-size: cover;
    width: 150px;
    height: 40px;
    z-index: 999;*/
}


.style1{
  /*  top: -20px;
    left: 10%;
    animation: style1 5s linear 2s infinite alternate;*/
}

@keyframes style1{
    0% { left: 5%;}
    100% { left: 70%;}
}

.style2{
    transform: scale(0.7);
    opacity: 0.8;
    bottom: -20px;
    right: 10%;
    animation: style2 3s linear 2s infinite alternate;
}

@keyframes style2{
    0% { right: 10%;}
    100% { right: 70%;}
}


.style3{
    top: -18px;
    animation: style3 3s linear 2s infinite alternate;
}

@keyframes style3{
    0% { left: 5%;}
    100% { left: 60%;}
}

.style4{
    transform: scale(0.7);
    opacity: 0.8;
    bottom: -15px;
    right: 20px;
    animation: style4 3s linear 2s infinite alternate;
}

@keyframes style4{
    0% { left: 5%;}
    100% { left: 60%;}
}

.text-container{
   /* margin-top: 0px;
    overflow: auto;
    height: 78%;
    width: 85%;
    line-height: 1.4em;
    font-size: 14px;
	overflow-y: scroll;
    overflow-x: hidden;
	padding-right: 10px;*/
    margin-top: 0px;
    overflow: auto;
    height: auto;
    width: 100%;
    line-height: 1.4em;
    font-size: 14px;
    /* overflow-y: scroll; */
    overflow-x: hidden;
    padding-right: 10px;
    margin-bottom: 30px;
}

.text-container ul{
    list-style-type: disc;
    margin-left: 1.5em;
    margin-right: 10px;
	line-height:1.5em;
}

.red{
    color:yellow;
}

.textbox a{
    color: #fff;
}

.fb-word{
    /*text-shadow: 2px 2px 4px #00FF00;*/
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

.replay-btn, .replay-btn-yellow{

}

@media screen and (max-width: 375px) {

    .text-container{
        width: 80%;
    }
    
    .textbox{
        margin-top: -20px;
        background-size: cover;
    }
    
    .list ul{
        width: 83%;
    }
	
	.style1 {
    top: 10px;
    left: 10%;
    animation: style1 5s linear 2s infinite alternate;
}

}

.add-width{
    width: 90%!important;
}

.add-width li{
    padding-left: 10px;
}
/*
.ranking{
    width: 70%;
    height: 50px;
    background: url(../images/ranking_top.png) center center no-repeat;
    background-size: 90% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
}*/

.ranking {
    /* width: 70%; */
    height: 50px;
    /* background: url(../images/ranking_top.png) center center no-repeat; */
    /* background-size: 90% 100%; */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* max-width: 600px; */
}


.ranking.tnc{
    margin-top: 100px;
    position: relative;
}

.tnc-contant{
    height: 580px;	
    margin-top: 40px;
}
.chi-v-tnc {
     margin: 0 auto;
	 /*width:80%;
      margin-top: 20px;*/
     width:90%;
	 margin-top: 0px;
}

.chi-v-tnc .tnc-title {
    font-size: 1.4em;
    line-height: 1.2;
}

.tnc-ul{
    font-size: 12px;
    line-height: 1.4em;
    height: 540px;
    overflow: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  
  .tnc-ul::-webkit-scrollbar {
    display: none;
  }


  .tnc-ul ol {
    list-style: decimal;
    padding-left: 40px!important;
}

.tnc-ul li{
    margin-bottom: 10px;
}

.tnc-ul a{
    color: #fff;
	overflow-wrap: break-word;
}

/*

.close{
    height: 22px;
    position: absolute;
    right: -30px;
}*/


.close{
    height: 22px;
    position: absolute;
    left: 1px;
}


.close img{
    height: 100%;
    width: auto;
}



.captcha-img img {
    width: 200px;
    height: auto;
    border-radius: 15px;
	margin-top:5px;
}

h2 {
	line-height:34px;
}

@media screen and (max-width: 450px) {
.container{

	height:inherit!important
}
}

::-webkit-scrollbar {
    width: 5px;
}

label {
    cursor: inherit!important;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(206,207,228,1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(206,207,228,0.8); 
}


/************* 2023 CSS Start *************************/

.reload-btn .refresh{
    text-align: center;
}

.sog-wrapper {
    max-width: 414px;
    background-size: cover!important;
    background-position: top!important;
    margin: 0 auto;
}

.survey_top_gong {
    width: 80%;
    display: block;
    margin-left: auto;
    margin-right: auto;
	    position: relative!important;
    top: 2em!important;
    z-index: 2!important;
}

.survey_border {
    width:90%;
    border:1px solid #fff;
    padding:3px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
	box-shadow: 0 0 10px 10px rgba(255,255,255,0.65);
	 background: linear-gradient(0deg, rgba(29,92,154,1) 0%, rgba(0,74,142,1) 100%);
	padding:10px;
}

.survey_border_2 {
    /*width:100%;*/
    border:2px solid #fff;
    padding:0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
    background: linear-gradient(0deg, rgba(29,92,154,1) 0%, rgba(0,74,142,1) 100%);
}

.score_bg {
  /*  background:#c29734;
    background: linear-gradient(170deg, rgba(245,230,166,1) 0%,  rgba(194,151,52,1) 62%, rgba(213,174,76,1) 74%, rgba(184,140,42,1) 86%, rgba(184,140,42,1) 100%);
    border-radius: 13px 13px 0 0;
    min-height: 70px;
    padding: 10px 0px 0px 0px;*/
    display: flex;
}

.score_bg .player-result {
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    background: rgba(0,0,0,0);
    border: 0px solid #237df4!important;
    width:100%!important;
    text-shadow: 0px 0px 0px #008CFF!important;
    font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, PingFang TC, Heiti TC, Microsoft JhengHei, sans-serif!important;
    -webkit-font-smoothing: antialiased!important;
}

.score_bg #scoreReturned {
    /*margin-top: 15px;*/
}

.score_bg__left {
    width:50%;
}

.score_bg__right {
    width:50%;
}

.score_bg__txt img{
    width:100%;
    padding: 0 10px;
}

.score_bg__num {
    width: 100%!important;
    margin-top: 10px;
}

.fill_info {
    background: linear-gradient(0deg, rgba(29,92,154,1) 0%, rgba(0,74,142,1) 100%);
    padding:10px 12px;
    border-radius: 0 0 13px 13px;
}

.input_border {
  /*  border: 2px solid #fff;
    padding:5px;
    border-radius: 10px;
    display: flex;*/
}

.input_flame__left20 {
    width:20%;
}

.input_flame__left40 {
    width:40%;
}

.input_flame__left48 {
    width:48%;
}

.input_flame__right80 {
    width:80%;
}

.input_flame__right52 {
    width:52%;
}

.input_flame__right60 {
    width:60%;
}

.input_flame__lr50 {
    width:50%;
}

.mt-10px {
    margin-top:10px
}

.mt-20px {
    margin-top:20px
}

.mt-30px {
    margin-top:30px
}

.mt-40px {
    margin-top:40px
}

.mb-20px {
    margin-bottom:20px
}

.box_name_txt__maxw {
    width:100%;
}

.input_border.name label, .input_border.mobile label, .input_border.captcha-input label {
    position:relative!important;
    width:100%!important;
    left: 0px; 
    top: 4px;
}

.input_capt {
    font-size: 12px;
    text-align: center;
    line-height: 1.2;
}


.fill_info #mobile {
    position:unset; 
    width: 90%;
    margin: auto;
    display: block;
    margin-top: 8px;
}

.fill_info #name {
    position:unset; 
    width: 90%;
    margin: auto;
    display: block;
    margin-top: 8px;
}

.fill_info #code {
    position:unset; 
    width: 90%;
    margin: auto;
    display: block;
    margin-top: 8px;
}

.captcha_div {
    text-align: center;
}

.input_border input {
    font-size: 16px;
}

.score_bg.result-index {
    margin: unset;
}


.score_bg .result {
    flex-direction: unset;
}


.input_border #v_captcha{
    text-align: center;
    width: 52%;
    padding-left: 0px;
}


.result-form-body .error {
    color: #f9b3bc;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.result-form-body .alert {
    margin: 0px;
}

.result-form-body .captcha-img img {
    border-radius: 0px;
    width: 200px;
}

.result-form-body .tnc-click {
   /* font-size: 0.75em;
    line-height: 1.2;*/
}


      
/* Customize the label (the container) */
.result-form-body .container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height:unset;
  }
  
  /* Hide the browser's default checkbox */
  .result-form-body .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .result-form-body .checkmark {
    position: absolute;
    top: 0px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 1px solid #f6e599;
  }
  
  
  /* When the checkbox is checked, add a blue background */
  .tnc-click input:checked ~ table .checkmark {
    background-color: transparent
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .tnc-click .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .tnc-click input:checked ~ table .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .tnc-click .checkmark:after {
    left: 5px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid #f6e599;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }




  .submit-form .submit-btn, .submit-form .replay-btn-yellow, .facebook {
    background:unset;
}

.submit-form button {
}

.submit-form .btn img {
    width:100%;
}

.facebook img {
    width:100%;
}

/************* T&C section Start **************/

.tnc-click input {
    /* display: none; */
    position: absolute;
}

.tnc-title {
    font-size:1.2em;
}

.ranking {
    background:unset;
}

.ranking.tnc {
    margin-top:unset;
}

.ranking.tnc .close img {
    position: absolute;
}

.tnc-contant {
    margin-top:unset;
    height: 87vh;
}

.tnc-ul {
    height: 100%;
}



#tnc_tc, #tnc_en {
    padding: 10px;
}

#tnc_tc .container, #tnc_en .container {
    border: 2px double #fff;
    border-radius: 15px;
    padding: 2px;
    background: #003d7f;
    min-height: 96vh;
}

#tnc_tc .close, #tnc_en .close {
    height: 41px;
}

#tnc_tc .list, #tnc_en .list {
    background:unset;
}

#tnc_tc .list ul, #tnc_en .list ul {
    width:90%;
}

/************* T&C section End **************/


/*********** result Start ***************/
.result-page.container {
    min-height: unset;
}

.result-form .replay-btn {
    background: none;
    margin: auto;
    max-width: 200px;
}
/*********** result End ***************/
/************* 2023 CSS End *************************/


/************* 2024 CSS Start *************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
	font-size:14px;
	line-height: 1.2;
}
.en body {
    font-family: 'Red Hat Text', 'Tahoma', 'Arial', sans-serif;
}
.ch body {
    font-family: 'Noto Sans HK', 'Microsoft Yahei', '微軟正黑體', arial, sans-serif;
}
.engtext {
	 /* font-family: "Roboto"!important;*/
	
}

.engtext.smallfont {
	font-size:11px!important;
}

.score_bg__left.score_bg__txt {
    font-size: 1.8em!important;
	color:#184177!important;
	 text-align: left !important;
}

.score_bg {
	background:#f6e599!important;
	padding: 5px 0px 5px 0px;
}

.score_bg__left {
    width: 60%;
    padding: 0px 10px;
}

.score_bg_line_top {
	
    height: 2px;
    margin-bottom: 4px;
}

.score_bg_line_bottom {
	

    height: 2px;
    margin-top: 4px;
}

.form-group {
	/*margin-left:10px;
	margin-right:10px;*/
	padding:10px 10px;
}

.border-container {
	border:1px solid #fff; 
	border-radius: 15px; 
	margin-bottom:20px; 
	
}
.background-2024 {
    z-index: 1;
    position: relative;
}





table.label-field td {
	width: 50%;
    padding-bottom: 5px;
    padding-top: 0px;
	
    text-align: left !important;
	line-height: 1;
}

div#fields {
    /**margin: 0px 10px 0px 0px;*/
}

.must-text {
	margin-top:0px!important;
	font-size:11px;
}


.remark-icon {
	    font-size: 28px !important;
    position: relative;
    top: 10px;
}

.remark-icon-pos {
	position: absolute;
    left: -10px;
    /* top: 10px; */
    font-size: 36px !important;
    background:#024b8f;
    height: 20px;
}

.row.form-group {
	position: relative;
}

select.dropdown_list {
  height: 30px !important;
    width: 100%;
}

a {
    color: var(--rh-themecolor-primary);
}

a:hover {
    color: #741843;
}
.card a{
    color: var(--rh-themecolor-primary);
    text-decoration: none;
}
.card a:hover {
    color: #741843;
    text-decoration: none;
}
.tnc-click a{
    color: var(--rh-themecolor-primary);
    word-break: break-all;
}
.tnc-click a:hover {
    color: #741843;
}
 div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 
   vertical-align: inherit!important;
}



.btn {
margin: auto;
}

.phone-field-bar {
    display: inline-flex;
}

.hk-areacode {
    height: 26px;
    font-size: 13px;
    background-color: #ccc;
    border: 1px solid #767676;
    color: #333 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    padding-left: 5px;
    padding-right: 5px;
    /* border-radius: 4px !important; */
    width: 30px;
    margin-right: 2px;
    margin-top: 6px;
    /* margin-bottom: 10px;*/
}

.hk-areacode span {
    position: relative;
    top: 5px;
}

.captcha-img {
    display: flex;
    align-items:flex-start;
    justify-content:flex-start;
}

.result-form-body .error {
    color: #b3d0f9;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.result-form-body .alert {
    margin: 0px;
}

.result-form-body .captcha-img img {
    border-radius: 0px;
    width: 200px;
}

.result-form-body .tnc-click {
    /*font-size: 0.75em;
    line-height: 1.2;*/
}


      
/* Customize the label (the container) */
.result-form-body .container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-height:unset;
  }
  
  /* Hide the browser's default checkbox */
  .result-form-body .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .result-form-body .checkmark {
    position: absolute;
    top: 0px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 1px solid #f6e599;
  }
  
  
  /* When the checkbox is checked, add a blue background */
  .tnc-click input:checked ~ table .checkmark {
    background-color: transparent
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .tnc-click .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .tnc-click input:checked ~ table .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .tnc-click .checkmark:after {
    left: 5px;
    top: 0px;
    width: 7px;
    height: 12px;
    border: solid #f6e599;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
      appearance: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 2px;
    background-clip: content-box;
    border: 1px solid #bbbbbb;
    /* background-color: #e7e6e7; */
    border-radius: 50%;

}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #f6e599;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}


.score_bg #scoreReturned {
    /* margin-top: 15px; */
    color: #184177 !important;
}

.form-control {
	/*height:24px!important;
	max-width:150px!important;*/
    max-width:200px!important;
	position: relative;
	top:0px;
}

.dropdown-width-title {
	width:40%!important;
}

.lang-font-size {
	
	
	display:initial!important; 
	font-size:14px;
	margin-right:10px;
	margin-top: 2px;
}

@media screen and (max-width: 360px) {

.form-control {
	
	max-width:130px!important;
	
}
	
	.lang-font-size {
	
	
	
	font-size:12px;
	margin-top: 4px;
}
.dropdown-width-title {
	width:50%!important;
}
}

@media screen and (max-width: 350px) {

.form-control {
	
	max-width:110px!important;
	margin-top: 4px;
}
	
	.lang-font-size {
	
	
	
	font-size:11px;
	margin-top: 4px;
}

}
.error {
   color: #ff4545 !important;
}
.result-form-body .error {
    color: #940000 !important;
}

button.submit-btn.btn {
	margin-bottom:10px!important;
}

.facebook.btn {
	margin-top:0px!important;
}

/************* 2024 CSS End *************************/