@media (max-width: 1200px) {
     .keyvisual {
         margin-top: 0px !important;
     }
 }

 .logo-link {
     height: 60px !important;

 }

 @media (max-width: 374px) {
     .keyvisual img {
         width: initial !important;
     }
 }


 body:not(.isReady) {
     background: #fff !important;
 }

 .fa-plus:before {
     content: "+" !important;
     font-weight: 600 !important;
 }

 .Hide {
     display: none;
 }

 .h1 {
     font-family: var(--rh-global-eng-special-font-family);
     color: var(--rh-themecolor-primary);
     line-height: 1.1;
 }

 body {
     font-family: var(--rh-global-eng-font-family);
     font-size: var(--rh-global-eng-font-size);
 }

 .keyvisual {
     margin-top: 20px;
 }

 .heading-row {
     padding-top: 30px;
 }

 span {
     color: inherit !important;
 }


 .remove-padding .vc_column_container>.vc_column-inner {

     padding-left: 7px !important;
     padding-right: 7px !important;

 }

 #main {
     margin-bottom: 0px !important;
 }


 #submenu-history .btn-submenu a {
     border: 1px solid var(--rh-themecolor-secondary);
     color: var(--rh-global-white);
     background-color: var(--rh-themecolor-secondary);
     border-radius: 0px;
     font-size: var(--rh-btn-font-size);
     min-width: var(--rh-btn-min-width);
     padding: 10px 20px;
     font-weight: 600;
 }


 #content {
     padding-top: 0px !important;
 }

 .displaynone-icon {
     display: none !important;
 }

 .section-raceinfo-bar {
     background-repeat: no-repeat;
     background-size: contain;
     background-image: url(https://res.hkjc.com/campaigns/wp-content/uploads/sites/676/bg-kackpot.png);
     background-color: #eee;
     background-position: left;
     padding-bottom: 60px;
     padding-top: 60px;
 }

 @media (max-width: 767px) {
     .section-raceinfo-bar {
         background-image: url(https://res.hkjc.com/campaigns/wp-content/uploads/sites/676/bg-kackpot-mobile.png);
         background-size: cover;
         background-position: center;
         padding-bottom: 30px;
         padding-top: 0px;
     }

     .heading-row {
         padding-top: 0px;
     }
 }


 .form-page {
     max-width: none !important;
 }


 .logo-link-area {
     margin-bottom: 20px;

 }

 @media (max-width:1200px) {
     .logo-link-area {
         margin-bottom: 20px;
         margin-top: 20px;
         padding: 0px 0px;
     }
 }


 @media (max-width:550px) {
     .logo-link-area {
         margin-bottom: 15px;
         margin-top: 15px;
     }

     .logo-link {
         max-width: 240px;
     }
 }

 #capReload .fa {
     position: relative;
     top: 3px;
 }

 div#terms_detail li {

     font-size: 1rem !important;
 }

 button.normal-btn {
     background: #449be2 !important;
     color: #fff !important;
 }


 .popContain.container {
     max-width: 750px;
 }





 swiper-container {
     width: 100%;
     padding-top: 50px;
     padding-bottom: 50px;
     height: 550px;
 }


 swiper-slide {
     background-position: center;
     background-size: cover;
     width: 400px;
     height: 400px;
 }

 swiper-slide img {
     display: block;
     width: 100%;
 }

 .profile-big img {
     border-radius: 50%;
     width: 400px;
     height: 400px;
 }


 .swiper {

     height: auto !important;
 }

 .swiper-wrapper {

     height: auto !important;

 }

 .swiper-slide-shadow,
 .swiper-slide-shadow-bottom,
 .swiper-slide-shadow-left,
 .swiper-slide-shadow-right,
 .swiper-slide-shadow-top {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 10;
     border-radius: 50%;
 }

 @media (max-width:550px) {


     swiper-container {

         height: 450px;
     }


     swiper-slide {
         background-position: center;
         background-size: cover;
         width: 300px;
         height: 300px;
     }



     .profile-big img {
         border-radius: 50%;
         width: 300px;
         height: 300px;
     }


 }


 @media (max-width:400px) {


     swiper-container {

         height: 400px;
     }


     swiper-slide {
         background-position: center;
         background-size: cover;
         width: 250px;
         height: 250px;
     }



     .profile-big img {
         border-radius: 50%;
         width: 250px;
         height: 250px;
     }


 }




 .generic-table table th {
     text-align: center !important;
 }

 .generic-table table td {
     text-align: center !important;
 }


 .generic-table table tr>th:first-child {
     position: sticky;
     left: 0;
     background: #449bcc;
     border-right: 1px solid #ddd;
 }

 .generic-table table tr:nth-child(even)>td:first-child {
     position: sticky;
     left: 0;
     background: #f6f6f6;
     border-right: 1px solid #ddd;
 }

 .generic-table table tr:nth-child(odd)>td:first-child {
     position: sticky;
     left: 0;
     background: #fff;
     border-right: 1px solid #ddd;
 }


 .generic-table>table>tbody>tr>td:nth-child(1) {

     text-align: left !important;

 }

 .generic-table>table>thead>tr>th:nth-child(1) {
     text-align: left !important;
 }


 .am-table table th {
     background: #443422;
     color: #fff;
     line-height: 1.2em;
     /*text-transform: capitalize;*/
     padding: 10px 0px;
     letter-spacing: 0px;
     /*font-size: 15px !important;*/
 }








 .am-table>table>tbody>tr>td:nth-child(8) {

     text-align: left;

 }

 .am-table>table>tbody>tr>th:nth-child(8) {
     text-align: left;
 }



 .am-table>table>tbody>tr>td:nth-child(9) {

     text-align: left;

 }


 .am-table>table>tbody>tr>th:nth-child(9) {
     text-align: left;

 }

 .am-table>table>tbody>tr>td:nth-child(10) {

     text-align: left;

 }

 .am-table>table>tbody>tr>th:nth-child(10) {
     text-align: left;
 }

 .am-table>table>tbody>tr>td:nth-child(11) {

     text-align: left;

 }

 .am-table>table>tbody>tr>th:nth-child(11) {
     text-align: left;
 }

 .am-table>table>tbody>tr>td:nth-child(12) {

     text-align: left;

 }

 .am-table>table>tbody>tr>th:nth-child(12) {
     text-align: left;
 }



 .am-table table th {
     padding-left: 5px;
     line-height: 18px;
     /*font-size: 15px !important;*/
     color: #fff;
 }


 .am-table table td {
     padding-left: 5px;
     line-height: 18px;
     /*font-size: 15px !important;*/
     color: #333;
 }

 .am-table.wrap table th,
 .am-table.wrap table td {
     vertical-align: top;
 }


 td>a>img {
     max-width: 20px;
     width: 100%;
 }

 .am-table table td:nth-child(2) {
     padding-left: 20px !important;
 }

 .am-table table th:nth-child(2) {
     padding-left: 20px !important;
 }

 .am-table>table tbody tr:nth-child(odd)> :first-child,
 .raceresult-table tbody tr:nth-child(odd)> :first-child .post-number td {
     background: #f1f1f1;

     box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
 }


 .am-table>table tbody tr:nth-child(even)> :first-child,
 .raceresult-table tbody tr:nth-child(even)> :first-child .post-number td {
     background: #ffffff !important;
     box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
 }


 .am-table>table tbody tr:nth-child(even),
 .raceresult-table tbody tr:nth-child(even) .post-number td {
     background: #ffffff !important;
 }

 .am-table>table tbody tr:nth-child(odd),
 .raceresult-table tbody tr:nth-child(even) .post-number td {
     background: #f1f1f1 !important;
 }



 .am-table table tr:nth-child(odd) {
     background: #f1f1f1 !important;
 }

 .am-table table th {
     background: #2A435D !important;
     padding: 10px;
     box-sizing: border-box;
     text-align: center;
 }

 .am-table table td {
     padding: 10px !important;
     text-align: center;
     min-width: 120px;
 }


 .am-table table th:first-child {
     position: sticky;
     position: sticky;
     left: 0;
     z-index: 9998;
     background-color: #2A435D !important;
 }



 .am-table table td:first-child {
     position: sticky;
     left: 0;
     z-index: 9998;
 }

 .royal-grid-item p {
     font-size: 0.875em;
 }


 h1.race-title>span {
     display: inline-block;
     width: auto;
     font-size: 24px;
     color: #2A435D;
 }

 h2.table {
     color: #AE986B;
 }

 p.race-term {
     margin-top: 0px;
     margin-bottom: 20px;
     font-size: 13px;
 }


 .royal-royal-grid-container {
     display: grid;
     /* This is a (hacky) way to make the .royal-grid element size to fit its content */
     overflow-x: auto;
     width: 100%;
     margin-bottom: 20px;
 }

 .royal-grid {
     display: flex;
     flex-wrap: nowrap;
     width: 100%;
 }

 .royal-grid-col {
     width: 15%;
     min-width: 120px;
 }

 .royal-grid-item--header {
     position: sticky;
     position: -webkit-sticky;
     background: #2A435D;
     top: 0;
 }

 .royal-grid-item--header>p {
     color: #fff;
 }

 .royal-grid-col--fixed-left {
     position: sticky;
     left: 0;
     z-index: 9998;
     background-color: #FFFDF9;
     min-width: 140px;
 }


 .royal-grid-col--fixed-right {
     position: sticky;
     right: 0;
     z-index: 9998;
     background: white;
 }

 .royal-grid-item {
     padding: 10px;
     justify-items: center;
     align-items: center;
     display: flex;
 }

 .royal-grid-item p {
     margin: 0;
 }

 .royal-grey {
     background-color: rgba(42, 67, 93, 0.1);
 }


 .rotal-extra-width {
     width: 40%;
     min-width: 300px;
 }

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

 .royal-center>div>p {
     text-align: center;
     width: 100%;
 }


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

     .royal-grid-col--fixed-left {
         box-shadow: 10px 0px 5px 0px rgba(0, 0, 0, 0.2);
         -webkit-box-shadow: 10px 0px 5px 0px rgba(0, 0, 0, 0.2);
         -moz-box-shadow: 10px 0px 5px 0px rgba(0, 0, 0, 0.2);
     }

     .royal-extra-padding-left {
         padding-left: 30px;
     }

 }


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

     .am-table>table tbody tr:nth-child(odd)> :first-child,
     .raceresult-table tbody tr:nth-child(odd)> :first-child .post-number td {
         background: #f1f1f1;
         box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
         -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
         -moz-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
     }


     .am-table>table tbody tr:nth-child(even)> :first-child,
     .raceresult-table tbody tr:nth-child(even)> :first-child .post-number td {
         background: #ffffff;
         box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
         -webkit-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
         -moz-box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.2);
     }



 }


 .generic-table>table>tbody>tr>td:nth-child(3) {
     text-align: left !important;
 }

 .generic-table>table>thead>tr>th:nth-child(3) {
     text-align: left !important;
 }


 .generic-table>table>thead>tr>th:nth-child(2) {
     width: 180px !important;
 }

 .generic-table>table>thead>tr>th:nth-child(4) {
     width: 250px !important;
 }

 .toggle-btn:hover {
     font-size: 1.7em;
     font-weight: 600;
     color: #7F161D;
 }

 .toggle-btn:hover path {

     fill: #7F161D;
 }


 .toggle-btn {
     font-size: 1.7em !important;
     font-weight: 600;
     color: #7F161D;
 }



 button.toggle-btn {

     border: 0px !important;
     background: #fff !important;
 }


 @media (min-width: 992px) {
     .row.prize-table {
         margin-right: -15px;
         margin-left: -15px;
     }
 }



 .form-page-bg form {
     padding-top: 40px !important;
     padding-bottom: 40px !important;
 }


 .form-page-bg {
     padding: 0px 20px !important;
 }

 .mobile-question-wrap select {
     height: 40px;
     margin-right: 10px;
     border-radius: 4px !important;
 }

 label#v_captcha-error {
     width: 100%;
 }



 .btn_submit {

     color: #7F161D;
     width: 100%;
     max-width: 300px;
     min-width: 150px;
 }


 @media only screen and (max-width: 550px) {
     .form-page-bg {
         padding: 0px 10px !important;
     }
 }