/*Fonts*/ @import url('font-icons.css'); @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700,800'); @font-face{ font-family:'Penumbra Sans Std'; src:url('../fonts/PenumbraSansStd-Regular.eot'); src:url('../fonts/PenumbraSansStd-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/PenumbraSansStd-Regular.woff2') format('woff2'), url('../fonts/PenumbraSansStd-Regular.woff') format('woff'), url('../fonts/PenumbraSansStd-Regular.ttf') format('truetype'), url('../fonts/PenumbraSansStd-Regular.svg#PenumbraSansStd-Regular') format('svg'); font-weight:normal; font-style:normal; font-display:swap; } @font-face{ font-family:'Penumbra Sans Std'; src:url('../fonts/PenumbraSansStd-Semibold.eot'); src:url('../fonts/PenumbraSansStd-Semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/PenumbraSansStd-Semibold.woff2') format('woff2'), url('../fonts/PenumbraSansStd-Semibold.woff') format('woff'), url('../fonts/PenumbraSansStd-Semibold.ttf') format('truetype'), url('../fonts/PenumbraSansStd-Semibold.svg#PenumbraSansStd-Semibold') format('svg'); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:'Penumbra Sans Std'; src:url('../fonts/PenumbraSansStd-Bold.eot'); src:url('../fonts/PenumbraSansStd-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/PenumbraSansStd-Bold.woff2') format('woff2'), url('../fonts/PenumbraSansStd-Bold.woff') format('woff'), url('../fonts/PenumbraSansStd-Bold.ttf') format('truetype'), url('../fonts/PenumbraSansStd-Bold.svg#PenumbraSansStd-Bold') format('svg'); font-weight:bold; font-style:normal; font-display:swap; } :root{ /*Color*/ --theme-dark:#006858; --theme-light:#009e51; --theme-highlight:#fce300; --color-white:#ffffff; --color-base:#474752; --color-dark:#000000; --color-gray:#888891; --color-light-gray:#f2f2f7; --color-dark-gray:#d5d5d8; --color-action:#009e51; /*Background Colors*/ --bg-body:var(--color-light-gray); --bg-white:var(--color-white); --bg-light-gray:var(--color-light-gray); /* Base Font */ --font-base:'Roboto'; /* R-400 M-500 B-700 */ --font-head:'Penumbra Sans Std';/* Regular-normal SB-600 B-bold */ /*Border Colors*/ --bdr:var(--color-light-gray); --bdr2:var(--color-dark-gray); /*Card CSS*/ --shadow-card:0px 0px 4px 0px rgba(0, 0, 0, 0.21); --bg-card:var(--color-white); --radius-card:6px; --shadow-card2:0px 0px 3px 0px rgba(0, 0, 0, 0.09); --bg-card2:var(--color-white); --radius-card2:4px; --green-highlight:#97c0a3; --tipped-bg:#ebf7ed; --tipped-bdr:var(--theme-light); --eliminated-light-color:#fff3f3; --eliminated-dark-color:#f90316; --abadoned-light-color:#e0e0e0; --abadoned-dark-color:#ccc; /* Header Root */ --bg-header:var(--color-white); --bdr-header:var(--bdr); --clr-header:var(--color-base); --clr-active-header:var(--color-dark); --nav-highlight:var(--theme-light); --headerHeight:42px; /* Button Root */ --btn-font:var(--font-head); --btn-color:var(--color-white); --primary-bg:var(--theme-light); --primary-clr:var(--btn-color); --primary-bg-hover:#41bb46; /* Extra Root */ --scrollBar-clr:var(--theme-light); --scrollBar-bg:var(--color-light-gray); --loader-bg:var(--color-light-gray); --loader-clr:var(--theme-light); /* Container ROOT */ --containerWidth:664px; --containerGap:12px; /* Modal */ --modal-bg:url(../images/modal-popup-bg.webp); } *{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;} :focus{outline:none;} html{-webkit-text-size-adjust:none;} body{font-size:12px;color:var(--color-base);background:var(--bg-body);font-family:var(--font-base);font-weight:normal;} a{text-decoration:none;outline:none;color:var(--color-action);outline:none;cursor:pointer;} a:hover, a:focus{text-decoration:none;outline:none;} .btn:hover, .btn:focus, .btn.focus,.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus{outline:none;box-shadow:none;} img{padding:0;margin:0;max-width:100%;border:none;height:auto;} p{line-height:normal;font-size:13px;color:var(--color-base);font-weight:normal;margin:0;padding:0;display:block;} *{box-sizing:border-box;-webkit-box-sizing:border-box;} /*HEADING CSS*/ h1, h2, h3, h4, h5, h6{margin:0;padding:0;display:block;color:var(--color-base);font-weight:normal;} h2{font-size:16px;} strong{font-weight:bold;} /*LIST CSS*/ ul, ul li, ol, ol li{padding:0;margin:0;list-style:none;} /*INPUT CSS*/ .form-group{float:left;width:100%;margin-top:16px;position:relative;} .input-group{float:left;width:100%;position:relative;} select, select option{width:100%;box-sizing:border-box;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;border-radius:0;} .form-control{float:left;width:100%;font-size:16px;outline:medium none;height:48px;color:var(--color-base);border:2px solid var(--bdr2);background:#ffffff;line-height:44px;padding:0 10px;transition:all 0.4s ease 0s;border-radius:6px;font-family:'Roboto', sans-serif;} .form-control:focus{outline:none;transition:all 0.3s ease 0s;} .form-control:disabled{background:#f2f2f2;color:#C7C6C6;} input[type="submit"], input[type="text"], input[type="password"], textarea{-webkit-appearance:none;} input[type="submit"], button{cursor:pointer;border:0;} textarea.form-control{resize:vertical;height:100px;} .addon{display:flex;align-items:center;} .input-label{float:left;width:100%;color:#111;font-size:14px;margin-bottom:2px;} .form-control::-ms-clear{display:none;} .form-control::-ms-expand{display:none;} .form-control::-ms-clear, .form-control::-ms-reveal{display:none;} .custom-select select:focus::-ms-value{color:transparent;font-size:0;background:transparent;} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none;margin:0;} input[type='number']{-moz-appearance:textfield;} .invalid-feedback {float:left;width:100%;margin-top:4px;font-size:12px;color:#f90316;} .valid-feedback {float:left;width:100%;margin-top:4px;font-size:12px;color:#006858;} .control-alert{position:absolute;top:2px;bottom:2px;height:calc(100% - 4px);right:2px;width:30px;display:flex;align-items:center;background:#ffffff;border-radius:8px;} .control-alert .loader-ring{height:22px;width:22px;border-width:3px;} .control-alert .icon{color:var(--color-base);font-size:20px;display:none;} .invalid-code .control-alert .invalid-icon{color:#f90316;display:block;} .valid-code .control-alert .valid-icon{display:block;color:var(--color-action);} /*CUSTUM SELECT CSS*/ .custom-select{display:inline-block;position:relative;cursor:pointer;position:relative;width:100%;} .select-span{float:left;width:100%;font-size:14px;outline:medium none;height:44px;color:var(--color-base);border:0;border:1px solid var(--bdr2);background:#ffffff;line-height:42px;padding:0 10px;transition:all 0.4s ease 0s;border-radius:8px;position:relative;} .custom-select select{border:0;font-size:14px;padding:0 30px 0 6px;height:100%;background:none;position:absolute;top:0;left:0;z-index:1;color:rgba(0, 0, 0, 0);cursor:pointer;} .custom-select .select-span{padding-right:14px;} .custom-select .is-filled + .select-span{border-color:#011a2b;} .custom-select select option{color:#111;} .custom-select:after{position:absolute;top:0;display:flex;align-items:center;height:100%;right:12px;content:'\e98a';font-family:'icons';pointer-events:none;font-size:10px;color:var(--color-base);} /*====== Switch CSS ======*/ .switch{float:left;position:relative;} .switch input{float:left;width:100%;position:absolute;top:0;left:0;opacity:0;height:100%;z-index:1;cursor:pointer;} .switch-label{float:left;width:44px;height:20px;border-radius:20px;background:var(--color-dark-gray);border:1px solid var(--color-dark-gray);} .switch-handle{float:left;width:16px;height:16px;border-radius:50%;background:#ffffff;position:absolute;top:2px;left:2px;transition:left 0.15s ease-out 0s;box-shadow:0px 0px 3px 0px rgba(0, 0, 0, 0.29);} .switch input:checked + .switch-label + .switch-handle{left:26px;background:#ffffff;} .switch input:checked + .switch-label{background:var(--theme-light);border:1px solid var(--theme-light);} /*====== CAROUSEL CSS ======*/ .custom-carousel{position:relative;width:100%;} .carousel-container{width:100%;overflow:hidden;} .carousel-track{display:flex;transition:transform 0.3s ease-in-out;user-select:none; touch-action:pan-y pinch-zoom;} .short-acca-item{flex:0 0 100%;width:100%;} .carousel-dots{display:flex;justify-content:center;gap:6px;margin:6px 0px;} .carousel-dots .dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-gray);cursor:pointer;transition:background-color 0.3s ease;} .carousel-dots .dot.active{background-color:var(--theme-dark);} .carousel-track:active{} .carousel-nav{height:28px;width:28px;border-radius:50%;background:var(--theme-light);position:absolute;top:calc(50% - 30px);display:inline-flex; justify-content:center; align-items:center;} .carousel-nav .icon{color:#ffffff;font-size:15px;} .carousel-prev{left:-46px;} .carousel-next{right:-46px;} .carousel-prev .icon{padding-right:2px;} .carousel-next .icon{padding-left:2px;} .multi-bet-bar{float:left; width:100%; text-align:center; margin-top:15px; display:flex; justify-content:center; align-items:center;} .multi-bet-bar .odds-btns{float:left; width:100%; height:40px; max-width:260px;} .multi-bet-bar .odds-btns .odds-points{font-size:16px;} /*====== Perfect ScrollBar CSS ======*/ *{scrollbar-color:var(--scrollBar-clr) auto;} *::-webkit-scrollbar{width:4px;border-radius:20px;height:4px;} *::-webkit-scrollbar-track{background:var(--scrollBar-bg);} *::-webkit-scrollbar-thumb{background-color:var(--scrollBar-clr);border-radius:20px;width:4px;height:4px;} /*====== Perfect ScrollBar CSS ======*/ /*NORMAL CSS*/ ::selection{background:#0067ab;color:#fff;} ::-moz-selection{background:#0067ab;color:#fff;} .container{margin:0 auto;width:100%;max-width:var(--containerWidth);padding:0px var(--containerGap);} .clearfix{clear:both;} .event-none{pointer-events:none;} .wcard{float:left;width:100%;padding:0px 6px;background:var(--bg-card);box-shadow:var(--shadow-card);border-radius:var(--radius-card);} .disabled{pointer-events:none;opacity:0.4;} .block{float:left;width:100%;} .hide{display:none!important;} .show{display:block!important;} /*BUTTON CSS*/ .btn{display:inline-flex;align-items:center;grid-gap:4px;justify-content:center;padding:0 8px;text-align:center;color:var(--color-base);font-size:16px;font-weight:600;line-height:44px;height:44px;background:#f9f9f9;transition:all 0.5s ease 0s;border:0;border-radius:4px;font-family:var(--btn-font);} .primary-btn{color:var(--primary-clr);background:var(--primary-bg);} .primary-btn:hover{color:var(--primary-clr);background:var(--primary-bg-hover);} .theme-btn{color:var(--color-dark);background:var(--theme-highlight);} .primary-bdr-btn{color:var(--primary-bg);background:var(--primary-clr);border:1px solid var(--primary-bg);} .gray-btn{color:#ffffff;background:var(--color-base);} .gray-bdr-btn{color:var(--color-base);background:#ffffff;border:1px solid var(--color-gray);} .simple-btn{font-family:var(--font-base);font-size:16px;font-weight:500;line-height:44px;height:44px;} .disable-btn{pointer-events:none;background:#dfdfdf;color:#a0a0a0;} .btn-icon{display:inline-block;width:40px;vertical-align:middle;margin-left:8px;line-height:normal;} .btn-icon img{float:left;width:100%;} .flex-btn{display:flex;align-items:center;justify-content:center;line-height:normal;} .btn .icon{font-size:16px;} /*COLs CSS*/ .icon{display:inline-block;font-size:20px;vertical-align:middle;} /* Loader Start */ .loading-wrapper{position:fixed;float:left;width:100%;top:0;left:0;right:0;bottom:0;z-index:2;text-align:center;background:var(--loader-bg);} .loading-wrapper.plain-loader{background:none;} .loading-wrapper.content-loader{position:absolute;height:100%;} .loading-wrapper.content-relative{position:relative;height:200px;background:none;z-index:1;} .loading-wrapper.content-relative .page-overlay{height:100%;display:flex;align-items:center;justify-content:center;} .page-overlay{float:left;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;} .loader-ring{display:inline-block;position:relative;width:42px;height:42px;border:5px solid var(--loader-clr);border-color:var(--loader-clr) transparent var(--loader-clr) var(--loader-clr);animation:loader-ring 650ms linear infinite;border-radius:50%;} @keyframes loader-ring{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } /* Loader End */ /* Counter*/ .counter{float:left;font-size:16px;color:var(--dark-clr);font-weight:bold;} /*Header css*/ .header{float:left;width:100%;position:sticky;position:-webkit-sticky;z-index:3;top:0;left:0;background:var(--bg-header);box-shadow:0px -1px var(--bdr-header) inset;} .header-outer{float:left;width:100%;padding:0px;display:flex;align-items:center;justify-content:space-between;position:relative;} /*NAV BAR CSS For Desktop*/ .nav-bar{float:left;width:100%;padding:0px;margin:0px;} .nav-bar .container{padding:0px;} .nav-container{float:left;width:100%;display:flex;justify-content:space-between;align-items:center;padding:0px calc(var(--containerGap) - 4px);font-family:var(--font-head);} .nav-items{float:left;display:flex;justify-content:space-between;width:100%;} .nav-items li{float:left;} .nav-items li a{float:left;font-size:12px;font-weight:600;color:var(--clr-header);padding:6px 4px;display:flex;align-items:center;justify-content:center;height:var(--headerHeight);position:relative;min-width:50px;} .lowercase{font-size:82% !important; display:inline-block; padding-left:1px;} .nav-items li.active a,.nav-items li:hover a{color:var(--clr-active-header);} .nav-items li:hover a:after, .nav-items li.active a:after{position:absolute;bottom:0px;left:0;width:100%;background:var(--nav-highlight);height:2px;content:'';} .action-item{align-self:center;} .nav-items li.action-item .btn{line-height:26px;box-shadow:none;height:26px;border-radius:3px;text-transform:none;background:var(--theme-highlight);color:var(--color-dark);padding:1px 6px 0px;font-size:10px;} .nav-items li.action-item:hover a:after{display:none;} .back-btn{float:left; width:30px; height:42px; min-width:30px; display:flex; align-items:center; color:var(--clr-header); cursor:pointer;} /*============== Iframe Page CSS ==============*/ .iframe-container{float:left;width:100%;height:100dvh;} iframe,.iframe{float:left;width:100%;height:100dvh;border:none;background:none;margin:0px;padding:0px;outline:none;} /* Mid Wrapper Start */ .main-section{float:left;width:100%;} .page-container{float:left;width:100%;} .mid-wrapper{float:left;width:100%;position:relative;} .mid-container{float:left;width:100%;padding:0px;margin:0px;} .page-wrap{float:left;width:100%;} .page-content{float:left;width:100%;padding-top:8px;} .scroll-content{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;} /*================= Home Page CSS Start =================*/ .home-wrap{--bg-body:radial-gradient(circle, var(--theme-light) -30%, var(--theme-dark) 80%, var(--theme-dark) 100%);--nav-highlight:var(--theme-light);--bg-header:var(--theme-dark);--bdr-header:var(--theme-dark);--clr-header:#ffffff;--clr-active-header:#ffffff;background-position:center;background-image:url(../images/home-bg.webp);background-size:cover;background-repeat:no-repeat;position:relative;} .home-wrap:before{position:absolute;left:0px;right:0px;top:0%;content:'';height:500px;width:500px;margin:0 auto;background:radial-gradient(circle, var(--theme-light) 0%, transparent 60%, transparent 100%);pointer-events:none;} .home-wrap .mid-wrapper{min-height:calc(100dvh - var(--headerHeight));padding-bottom:46px;} .home-card{float:left;width:100%;padding:38px 0px 0px;} .home-card-inner{float:left;width:100%;} .logo{float:left;width:100%;text-align:center;display:flex;justify-content:center;} .game-logo{float:left;width:100%;max-width:316px;margin:0px auto;} .game-logo img{float:left;width:100%;} .jockey-horse-block{float:left;width:100%;text-align:center;display:flex;justify-content:center;padding-top:6px;margin-top:-10px;} .horse-figure{float:left;width:100%;max-width:360px;margin:0px auto;} .horse-figure img{float:left;width:100%;} .resulted-game-view .home-button-bar.login-join-btns{order:-1;} .resulted-game-view .home-race-card.next-round-card{order:-2; } .resulted-game-view .home-race-card.current-race-card{margin-top:12px;} /* How Play Section */ .how-to-play{float:left; width:100%;border:1px solid #01c867;border-radius:10px;background-color: rgb(0, 72, 51, 0.35);margin:0px 0px 8px 0px;} .how-to-outer{float:left;width:100%; padding:8px 0px 14px;position:relative;} .how-to-title{float:left;width:100%;position:relative;padding-bottom:8px;margin-bottom:4px;} .htp-info{float:left;width:100%;padding:0px 8px;} .htp-list{float:left;width:100%;} .htp-list-item{float:left;width:100%;margin-bottom:16px;} .htp-list-item:last-child{margin-bottom:0;} .htp-card{float:left;width:100%;display:flex;gap:10px;align-items:flex-start;} .htp-point{float:left;--iconSize:38px;width:var(--iconSize);font-size:var(--iconSize);display:flex;justify-content:center;align-items:center;text-align:center;position:relative;} .htp-figure{float:left;width:100%;} .htp-figure img{float:left;width:100%;} .htp-detail{flex:1; display:flex; align-items:center;} .htp-detail p{float:left; width:100%; color:#ffffff; font-size:14px;letter-spacing:0.5px;line-height:1.3em;} .htp-bold{font-weight:800;} .htp-num{position:absolute;top:0px;left:0px;height:100%;width:100%;font-size:32%;display:flex;align-items:center;justify-content:center;padding-right:30%;font-weight:600;color:#000000;-webkit-text-fill-color:#ffffff;-webkit-text-stroke-width:1px;paint-order:stroke fill;filter:drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.9));font-family:var(--font-head);} .htp-title{position:relative;left:-7px;line-height:1.625;padding:3px 30px 3px 20px;border-radius:6px 0px 0px 0px;background:var(--theme-light);font-family: var(--font-head);font-size:16px;font-weight:bold;color:#ffffff;float:left;clip-path: polygon(-100vw 0, 100% 0, calc(100% - 10px) 16px, 100% 100%, 0px 100%);} .how-to-title:after {height:7px;width:5px;background:#004a39;position:absolute;left: -6px;bottom:1px;content:'';border-radius:6px 0px 0px 6px;} .how-to-title:before{height:8px;width:6px;background:var(--theme-light);position:absolute;left:-7px;bottom:1px;content:'';border-radius:0px 0px 0px 6px;} /* == Upcoming Race Card Start== */ .upcoming-card{float:left;width:100%;padding-top:20px;} .upcoming-race-card{float:left;width:100%;border:2px solid #01c867;border-radius:10px;background-color:#01523b;position:relative;} .upcoming-race-card:before{height:50%;width:100%;position:absolute;top:0px;background:linear-gradient(180deg, #009153, transparent);content:'';left:0px;z-index:0;border-radius:8px;opacity:0.8;} .upcoming-race-inner{float:left;width:100%;padding:18px;position:relative;} .uc-race-head{float:left;width:100%;position:absolute;top:-14px;left:0px;right:0px;width:100%;text-align:center;} .uc-race-heading{background:var(--theme-light);color:#ffffff;border-radius:4px;line-height:28px;font-size:14px;font-family:var(--font-head);font-weight:bold;min-width:156px;padding:0px 12px;display:inline-block;text-align:center;margin:0 auto;letter-spacing:1px; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);} .ribbon-title{float:left; width:100%; position:relative; padding-bottom:8px;} .ribbon-title-inner{position:relative; left:-7px; line-height:1.625; padding:3px 30px 3px 20px; border-radius:6px 0px 0px 0px; background:var(--theme-light); font-family: var(--font-head); font-size:16px; font-weight:bold; color:#ffffff; float:left; clip-path:polygon(-100vw 0, 100% 0, calc(100% - 10px) 16px, 100% 100%, 0px 100%);} .ribbon-title:after{height:7px;width:5px;background:#004a39;position:absolute;left: -6px;bottom:1px;content:'';border-radius:6px 0px 0px 6px;} .ribbon-title:before{height:8px;width:6px;background:var(--theme-light);position:absolute;left:-7px;bottom:1px;content:'';border-radius:0px 0px 0px 6px;} .upcoming-card .ribbon-title{margin:-10px 0 -8px -19px;} .upcoming-card .ribbon-title-inner{padding-right:22px;} .home-race-card-block{padding-top:20px; padding-bottom:12px; float:left; width:100%; display:flex; flex-direction:column; gap:10px;} .home-race-card{float:left; width:100%;} .home-race-card .uc-counter-inner{margin-top:4px;} .home-race-card-block .upcoming-card{padding-top:0;} .home-race-card-block .home-button-bar.button-bar{padding:0;} .home-race-card-block .button-container{padding:0;} .home-race-card-block .uc-counter-inner .uc-counter.before-start .start-counter span{min-height:24px;} .uc-game-counter{float:left;width:100%;} .uc-counter-inner{float:left;width:100%;margin:15px 0px 0px;} .uc-counter-inner .race-counter{justify-content:center;} .uc-counter-inner .race-countdown{width:auto;} .uc-counter-inner .race-countdown span{line-height:1em;min-width:44px;} .uc-counter-inner .uc-counter.before-start .lock-icon, .uc-counter-inner .uc-counter.before-start .start-text{display:none;} .uc-counter-inner .uc-counter.before-start .start-counter{padding:0px;} .uc-counter-inner .uc-counter.before-start .start-counter span{padding:0px 6px;display:flex;min-height:16px;font-size:11px;font-weight:600;align-items:center;justify-content:center;border-radius:2px;line-height:1em;min-width:44px;background:#f90316;color:#ffffff;text-transform:uppercase;} .uc-counter{font-size:14px;color:#ffffff;font-weight:500;text-transform:uppercase;float:left;width:100%;display:flex;justify-content:center;align-items:center;grid-gap:3px;} .lock-icon{float:left;} .lock-icon .icon{font-size:15px;color:var(--theme-light);font-weight:500;float:left;} .start-text{color:#a5dfb6;float:left;} .start-counter{padding-left:2px;float:left;text-transform:none;} .uc-race-name{float:left;width:100%;font-size:45px;text-align:center;color:var(--theme-highlight);font-family:var(--font-head);font-weight:bold; padding-top:10px; line-height:1.2em;} .next-race-name{float:left;width:100%;font-size:16px;text-align:center;color:var(--theme-highlight);font-family:var(--font-head);font-weight:bold; line-height:1.3em;} .next-round-card .upcoming-race-inner{padding:12px 18px 8px;} .uc-race-bottom{float:left;width:100%;padding:15px 0px 0px;margin-top:8px;border-top:1px solid rgba(255, 255, 255, 0.1);} .uc-race-bottom-inner{display:flex;justify-content:space-between;text-transform:uppercase;} .uc-race-col{float:left;display:inline-flex;grid-gap:4px;align-items:center;} .uc-race-label{font-size:14px;color:#ffffff;padding-top:1px;} .uc-race-count{font-size:18px;color:var(--theme-highlight);font-family:var(--font-head);font-weight:600;} .uc-race-count-block .uc-race-count{font-size:23px;} /* == Upcoming Race Card End== */ .next-round-card .upcoming-race-inner{background:url("../images/next-round-bg.png") no-repeat top left; background-size:auto; border-radius:10px; min-height:189px;} .next-round-info{text-align:center; float:right; padding:10px 0 0; display:flex; flex-direction:column; justify-content:center; align-items:center; max-width:180px; align-self:flex-end; flex:1; margin-top:-4px;} .next-round-date{float:left; color:#fff; font-size:13px; font-weight:bold; font-family:var(--font-head);} .next-round-card .uc-race-name{font-size:26px; padding:4px 0 0; width:auto;} .next-round-card .uc-game-counter{display:flex; align-items:center; justify-content:center; width:auto; min-height:34px; min-width:1px;} .next-round-card .uc-counter-inner{width:auto; padding:0 14px; position:relative; height:26px; display:flex; justify-content:center; align-items:center;} .next-round-card .uc-counter-inner:before{width:100%; position:absolute; top:0; left:0; height:100%; width:100%; background:#009e51; transform:skew(-30deg); content:''; z-index:0;} .next-round-card .uc-counter-inner .uc-counter{position:relative; z-index:1; text-transform:none; font-size:12px; font-weight:bold; color:#fff;} .next-round-card .uc-counter-inner .start-text{color:#fff;} .next-round-card .upcoming-race-inner{display:flex; flex-direction:column;} .next-round-card.no-track-info-card .next-round-info{margin-top:-34px; padding: 0; width:50%;} .next-round-card.no-track-info-card .next-race-name{font-size:42px;} .next-round-card.no-track-info-card .next-round-date{font-size:20px;} .game-info-top{float:left; width:100%; text-align:center; padding:0 20px;} .game-info-title{float:left; width:100%; color:var(--color-white); font-size:15px; font-family: var(--font-head); font-weight:bold; margin:-5px 0 5px;} .home-button-bar.button-bar{padding:10px 0px 14px;} .home-button-bar .btn{font-size:18px;} /* == Powered By Start == */ .powered-by-block{float:left;width:100%;display:flex;justify-content:center;align-items:flex-end;height:46px;position:absolute;bottom:0px;left:0px;right:0px;padding-bottom:8px;} .powered-footer{float:left;width:100%;} .powered-text{ float:left;width:100%;text-align:center;font-size:13px;margin-bottom:5px;font-family:var(--font-base);font-weight:400;color:#fefefe;} .powered-figure-block{float:left;width:100%;display:flex;justify-content:center;align-items:center;grid-gap:5px;} .pp-figure{float:left;width:76px;} .pp-figure img{float:left;width:100%} .gtg-figure{float:left;width:124px;} .gtg-figure img{float:left;width:100%} /* == Powered By End == */ /*================= Home Page CSS End =================*/ /*===Modal Popup Css Start===*/ body.show-modal{position:fixed;top:0;height:100%;width:100%;overflow:hidden;} body.in-iframe.show-modal .main-section{overflow:hidden !important;} .modal{float:left;width:100%;height:100%;position:fixed;top:0;left:0;z-index:13;background:rgba(0,0,0,0.8);display:none;overflow-y:auto;padding:0 14px;} .modal-contenier,.modal-container{float:left;width:100%;position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;padding:14px 0;} .modal-outer{float:left;width:100%;max-width:600px;background:#ffffff;position:relative;z-index:2;border-radius:6px;} .modal-body{float:left;width:100%;} .modal-info{z-index:1;position:relative;display:block;width:100%;float:left;padding:18px;} .modal-content{float:left;width:100%;} .modal-logo{float:left;width:100%;display:flex;align-items:center;justify-content:center;} .modal-logo figure{float:left;width:100%;max-width:132px;} .modal-head{float:left;width:100%;display:flex;justify-content:center;align-items:center;} .modal-title{float:left;width:100%;text-align:center;font-size:16px;color:var(--color-base);font-family:var(--font-head);font-weight:bold;} .modal-title-left{flex:1;float:left;} .modal-sm-pre{float:left;width:100%;text-align:left;font-size:12px;color:var(--color-gray);margin-top:5px;} .modal-footer{float:left;width:100%;padding:10px 18px 18px;} .modal-overlay{position:fixed;top:0;left:0;z-index:1;float:left;height:100dvh;width:100%;cursor:pointer;} /* Bottom Close */ .close-btn{position:absolute;bottom:-44px;left:0;right:0;margin:44px auto 0px;display:flex;justify-content:center;} .close-btn .icon{font-size:34px;color:#ffffff;} /*===Modal Popup CSS END===*/ /* Button Bar */ .button-bar{float:left;width:100%;padding:8px 0px;} .button-container{max-width:var(--containerWidth);padding:0px var(--containerGap);float:none;margin:0px auto;} .button-bar-outer{float:left;width:100%;display:flex;grid-gap:8px;} .button-bar-outer .col{flex:1;} .button-bar-outer .col .btn{width:100%;} .btn-info-label{float:left; width:100%; text-align:center; margin:5px 0 4px; font-size:11px; color:#fff; font-style:italic;} .col-flex{float:left;width:100%;display:flex;grid-gap:8px;align-items:center;} .btn-col{flex:1;float:left;} .tooltip-col{float:right;width:20px;min-width:20px;--tooltip-bg:var(--color-dark);--tooltip-clr:var(--color-white);--tooltip-radius:4px;} .tooltip-col .tooltip-info{float:left;width:100%;} .tooltip-col .tooltip-info .icon{float:left;width:100%;font-size:20px;color:var(--theme-light);} /* Custom Select Option */ .short-outer{float:left;display:flex;align-items:center;grid-gap:0px;padding:0px 0px 5px} .shorting-title{color:var(--color-base);font-size:12px;font-weight:400;text-align:left;white-space:nowrap;float:left;} .select-box{float:left;width:100%;position:relative;} .select-label{position:relative;float:left;width:100%;font-size:12px;height:26px;color:var(--color-dark);line-height:26px;padding:0 20px 0 4px;border-radius:4px;z-index:1;cursor:pointer;background:none;} .select-label.select-drop-active{border-radius:4px 4px 0px 0px;} .select-option{float:left;width:100%;} .select-short{float:left;width:100%;display:flex;align-items:center;} .select-short .short-name{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden;font-weight:normal;text-transform:capitalize;} .select-label .icon{position:absolute;right:6px;top:0;height:100%;display:flex;align-items:center;font-size:9px;pointer-events:none;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;color:var(--color-dark);transition:all 0.3s ease;} .select-label.select-drop-active .icon{transform:rotate(180deg);color:var(--theme-light);-webkit-transform:rotate(180deg);} .select-drop{display:none;position:absolute;top:calc(100% + 4px); left:0;right:0;z-index:3;background-color:#ffffff;border-radius:4px;flex-direction:column-reverse;max-height:145px; box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.21);border:1px solid var(--color-dark-gray);min-width:100px;} .select-drop:after{position:absolute;bottom:100%;left:10px;color:#ffffff;font-size:12px;height:9px;content:"\e98b";font-family:"icons";text-shadow:0px -1px 2px rgba(0, 0, 0, 0.21);} .select-drop ul{float:left;width:100%;position:relative; overflow:auto;max-height:145px;} .select-drop li:first-child{border:none;} .select-drop li:hover{background:var(--bg-light-gray);} .select-drop li.selected{color:var(--theme-light);} .select-drop li.selected:after{position:absolute;top:0;right:0;width:26px;height:100%;display:flex;justify-content:center;align-items:center; color:var(--theme-light); font-size:12px;content:"\e970";font-family:"icons";} .select-drop li{float:left;width:100%;padding:8px 10px;border-top:1px solid var(--bg-light-gray);cursor:pointer;position:relative;} /* ToolTip CSS */ .tooltip{position:absolute;right:0;bottom:100%;margin:0 auto;box-shadow:var(--tooltip-shadow);display:none;z-index:1;} .tooltip-info{position:relative;cursor:pointer;} .tooltip-outer{float:left;width:100%;display:flex;justify-content:center;position:relative; } .tooltip-info .icon:after{position:absolute;top:-8px;left:0;right:0;margin:0 auto;content:'';width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #000000;opacity:0;} .tooltip-inner{background:var(--tooltip-bg);color:var(--tooltip-clr);padding:6px 8px;text-align:left;float:left;border-radius:var(--tooltip-radius); width:max-content;position:absolute;bottom:8px;right:0px;} .tooltip-inner p{color:var(--tooltip-clr);font-size:14px;} /*================= My Picks Page CSS Start =================*/ /* Page Header */ .page-heading-wrap{top:var(--headerHeight);position:sticky;z-index:2;} .page-heading-inner{float:left;width:100%;padding:12px 0px;background-color:#ffffff;box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.29);} .page-title-block{float:left;width:100%;margin:2px 0px;} .page-title{float:left;width:100%;display:flex;justify-content:space-between;} .page-title-label{float:left;font-size:15px;font-family:var(--font-head);font-weight:bold;position:relative;bottom:-2px;} .race-prize-label{float:right;display:inline-flex;grid-gap:4px;align-items:center;} .race-prize-text{font-size:12px;color:var(--color-base);} .race-prize-value{font-family:var(--font-head);font-weight:bold;color:var(--theme-light);font-size:14px;} /* Round Selection */ .round-selection-block{float:left;width:100%;} .round-inner{float:left;width:100%;margin-top:5px;} .round-inner-wrap{float:left;width:100%;overflow:hidden;height:40px;} .round-filter-inner{float:left;width:100%;overflow:auto;height:60px;} .round-scroll{position:relative;} .round-filter-list{float:left;display:flex;grid-gap:10px;width:100%;} .round-list{float:left;flex:1;padding-top:8px;} .round-link{float:left;background:var(--bg-light-gray);border:1px solid var(--bg-light-gray);border-radius:5px;display:flex;justify-content:center;align-items:center;min-height:32px;min-width:44px;position:relative;white-space:nowrap;padding:4px 2px;grid-gap:3px;width:100%;} .round-link .round-text{color:var(--color-base);font-weight:500;font-size:14px;} .round-link .sm-icon{height:16px;width:16px;border-radius:50%;background:var(--tipped-bdr);color:#ffffff;display:none;justify-content:center;align-items:center;position:absolute;top:-8px;border:1px solid #ffffff;} .round-link .sm-icon .icon{color:#ffffff;font-size:9px;font-weight:500;} /* Active Tips */ .active .round-link{background:var(--theme-highlight)!important;border-color:var(--theme-highlight)} /* Tipped Tips */ .tipped .round-link .sm-icon{display:inline-flex;} .tipped .round-link{background:var(--tipped-bg);border-color:var(--tipped-bdr);} .tipped .round-link .round-text{color:var(--color-base);} /* Picks Screen */ .picks-screen{float:left;width:100%;} .tip-wrap-inner{float:left;width:100%;} .tips-listing{float:left;width:100%;} /* Sticky Card Block */ .pick-page-content{padding:0px;} .pick-page-content .scroll-content{overflow:inherit;-webkit-overflow-scrolling:inherit;flex:inherit;} .sticky-card-block{top:var(--headerHeight);position:sticky;z-index:1;float:left;width:100%;background:var(--bg-body);padding-top:8px;} .sticky-card-inner{width:calc(100% + var(--containerGap));margin-left:calc(var(--containerGap) - calc(var(--containerGap) * 1.5));background:var(--bg-body);float:left;padding:0px calc(var(--containerGap) / 2);} .sticky-card-block .short-outer{padding:0px;} /* Race Card */ .race-card-block{float:left;width:100%;position:relative;overflow:hidden;border-radius:8px;margin-bottom:8px;} .race-card{float:left;width:100%;background:url(../images/race-card-bg.webp);background-size:cover;background-position:center;position:relative;} .race-card:before{content:attr(data-race);position:absolute;font-size:115px;color:#013a29;font-family:var(--font-head);font-weight:bold;top:0;bottom:0;line-height:1.2em;opacity:0.45;right:8px;display:none;} .race-card-inner{float:left;width:100%;padding:14px 0px;position:relative;} .race-info-top{float:left;width:100%;padding:0px 14px;display:flex;justify-content:space-around;} .race-info-left{flex:1;} .race-counter{display:flex;grid-gap:4px;} .race-count-text{float:left;width:100%;text-align:center;color:var(--green-highlight);font-size:12px;white-space:nowrap;} .race-countdown{float:left;width:100%;} .race-countdown span {padding:0px 6px;display:flex;min-height:16px;font-size:11px;font-weight:600;align-items:center;justify-content:center;border-radius:2px;line-height:1em;background:#ffffff;min-width:50px;color:var(--color-base);white-space:nowrap;} .before-start .race-countdown span{background:#f90316;color:#ffffff;} .yellow-color .start-counter span{background:var(--theme-highlight) !important;color:var(--color-dark) !important;} .green-color .start-counter span{background:var(--theme-light) !important; color:#ffffff !important;} .race-label{float:left;width:100%;margin-bottom:8px;} .race-label span{font-size:12px;color:var(--green-highlight);} .race-title-time{float:left;width:100%;} .race-title-time span{float:left;width:100%;font-size:16px;color:var(--theme-highlight);font-family:var(--font-head);font-weight:bold;} .race-info-block{float:left;width:100%;margin-top:16px;} .race-info-flex{float:left;width:100%;display:flex;align-items:center;} .race-info-col{float:left;width:25%;position:relative; padding:0 8px;} .race-info-col:after{right:0px;top:0px;background:rgba(255, 255, 255, 0.1);height:100%;position:absolute;content:'';width:1px;} .race-info-col:last-child:after{display:none;} .race-info-inner{float:left;width:100%;} .race-info-label{float:left;width:100%;font-size:12px;color:var(--green-highlight);text-align:center;} .race-info-value{float:left;width:100%;font-size:12px;color:#ffffff;text-align:center;margin-top:6px;} /* Top Card Heading */ .card-head{float:left;width:100%;display:flex;justify-content:space-between;margin-bottom:8px;} .card-title{float:left;font-size:14px;color:var(--color-base);text-transform:uppercase;font-weight:700;} .card-right{float:right;display:inline-flex;align-items:center;justify-content:center;grid-gap:6px;} .switch-text{float:left;font-size:14px;color:var(--color-base);font-weight:500;} .horse-title{color:var(--theme-dark);} /* Tips Listing */ .tips-table-outer{float:left;width:100%;padding-top:5px;} .tips-table{float:left;width:100%;} .tip-table-head{float:left;width:100%;display:table;table-layout:auto;padding:0px 10px 5px;} .tip-table-head .col{display:table-cell;padding:0px ;white-space:nowrap;} .tip-table-head .col-place{text-align:right;} .tip-table-head .col-short-label{color:var(--color-base);font-size:12px;font-weight:400;text-align:left;} .col-short-link{display:inline-block;width:10px;height:10px;position:relative;cursor:pointer;margin-left:4px;} .col-short-link .icon{position:absolute;top:0px;left:0px;font-size:7px;color:#96969a;cursor:pointer;} .col-short-link .icon.icon-sort-desc{top:5px;cursor:pointer;} .col-short-link .icon.active{color:rgba(25, 25, 25, 0.8);} .tip-table-body{float:left;width:100%;} .tips-list{float:left;width:100%;} .tips-list-item{float:left;width:100%;margin-bottom:5px;} .tips-list-card{float:left;width:100%;position:relative;overflow:hidden;padding:8px 10px;background:#ffffff;border-radius:4px;box-shadow:var(--shadow-card2);border:1px solid #ffffff;} .jockey-item-top .col.jockey-rank{padding-left:6px;} .tips-list .jockey-item-top .col.jockey-rank{padding:0px 6px;} .jockey-item-top{float:left;width:100%;display:flex;align-items:center;} .jockey-item-top .col{padding:0px;float:left;} .jockey-item-top .jockey-content-col{flex:1;} .jockey-item-top .jockey-figure-col{--jockeySize:42px;max-width:var(--jockeySize);width:var(--jockeySize);min-width:var(--jockeySize);min-height:var(--jockeySize);padding:0px;margin-right:10px;} .jockey-item-top .jockey-selection-col{float:right;} .jockey-check{height:30px;width:30px;background:var(--bg-light-gray);border-radius:3px;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;} .jockey-check .icon{font-size:12px;color:var(--theme-light);} .jockey-figure-col .jockey-figure{float:left;width:100%;margin:0px;padding:0px;} .jockey-figure-col .jockey-figure img{float:left;width:100%;} .jockey-block{display:flex;align-items:center;justify-content:space-between;float:left;width:100%;grid-gap:4px;} .jockey-detail{display:block;overflow:hidden;text-align:left;} .rank-label{background:#f2f2f7;border-radius:20px;display:inline-flex;justify-content:center;align-items:center;padding:0px 4px;height:36px;line-height:36px;text-align:center;font-weight:600;width:36px; color:#474752;font-size:12px;} .jockey-name{font-size:14px;white-space:normal;line-height:18px;font-weight:500;color:var(--color-dark);margin-bottom:2px;} .jockey-info-block{float:left;width:100%;display:flex;grid-gap:5px;margin-top:4px;align-items:center;} .jockey-text{float:left;min-width:26px;color:var(--color-gray);font-size:11px;font-weight:400;clear:none; padding:0px;display:inline-flex;line-height:14px; /* white-space:nowrap;overflow:hidden;text-overflow:ellipsis; */} .jockey-text .jockey-text-label{float:left;width:14px;min-width:14px;font-weight:500;text-align:left;padding-right:2px;margin-top:0px;} .jockey-item-bottom{float:left;width:100%;padding-top:6px;margin-top:6px;border-top:1px solid var(--bdr);} .joc-info-block{display:flex;align-items:center;justify-content:space-between;float:left;width:100%;} .joc-info-col{float:left;font-size:11px;color:var(--color-dark);} .joc-info-col .joc-users-counts{display:flex;align-items:center;} .joc-users-counts{float:left;width:100%;display:flex;grid-gap:3px;align-items:center;} .jockey-figure-col .joc-users-counts{margin-top:7px;} .joc-users,.joc-odds,.joc-detail-link{float:left;width:100%;display:flex;grid-gap:3px;align-items:center;} .joc-users-icons{float:left;} .joc-users-icons .icon{font-size:14px;color:var(--color-base);} .joc-users-counts .joc-users-per{font-size:11px;padding-top:2px;} .joc-users-label,.joc-odds-label{color:var(--color-gray);} .joc-detail-text{color:var(--color-base);} .joc-detail-link .icon{font-size:11px;color:var(--theme-light);} /* Active Tips */ .active-tip .jockey-check{background:var(--theme-light);} .active-tip .jockey-check .icon:before{content:"\e970";color:#ffffff;} .active-tip .tips-list-card{background:var(--tipped-bg);border-color:var(--tipped-bdr);} .active-tip .jockey-item-bottom{border-color:#d4ede1;} /* Scratched Horse Message*/ .scratched{float:left;width:100%;display:none;padding:0px;} .scratched .scratch-text{color:var(--color-base);font-size:12px;overflow:hidden;white-space:nowrap;font-weight:600;text-transform:uppercase;padding-left:3px;} .scratched .scratch-box{background:var(--bg-light-gray);display:inline-flex;justify-content:center;align-items:center;padding:0px;height:34px;text-align: center;font-weight:600;width:34px;color:var(--color-gray);border-radius: 3px;font-size: 14px;} .review-list-card .scratched .scratch-box{width:52px;} .scratched-card-block {float:left;width:100%;padding:0px;margin-bottom:8px;} .scratched-card {float:left;width:100%;} .scratched-card-message {float:left;width:100%;background:#fff9df;padding:10px 14px;border-radius:4px;border-left:3px solid var(--theme-highlight); box-shadow:var(--shadow-card2);} .scratch-text{float:left;width:100%;text-align:left;font-size:13px;color:var(--color-base);font-weight:normal;line-height:1.2em;} /* Scratched Horse*/ .scratched-horse{pointer-events:none;} .scratched-horse .scratched{display:block;} /* .scratched-horse .jockey-name{text-decoration:line-through;color:var(--color-gray);} .scratched-horse .jockey-item-bottom, .scratched-horse .jockey-figure-col .jockey-figure img{filter:grayscale(1);opacity:0.5;} .scratched-horse .jockey-info-block{opacity:0.7;} */ .scratched-horse .jockey-check{display:none!important;} .scratched-horse .jockey-rank{display:none!important;} /* Race Locked */ .round-link .sm-lock{height:12px;line-height:1;width:10px;color:var(--color-dark);display:none;align-items:center;justify-content:center; } .round-link .sm-lock .icon{font-size:12px;line-height:1;float:left;} .race-locked .round-link .sm-lock{display:inline-flex;} .race-locked .tips-list-item{opacity:0.6;pointer-events:none;} .race-locked .round-link{border-color:var(--color-dark-gray);background:var(--bg-light-gray);} .race-locked .round-link .sm-icon{z-index:1;background:#888891;} /*Submit Your Picks*/ .submit-loading{position:fixed;background:rgba(0,0,0,0.6);top:0;bottom:0;left:0;right:0;padding:16px;display:flex;align-items:center;z-index:16;} .picks-loader{background:#ffffff;width:100%;max-width:600px;border-radius:3px;display:inline-block;padding:12px 16px;text-align:left;margin:0 auto;} .picks-loader span{font-size:13px;font-weight:500;color:var(--color-base);display:block;overflow:hidden;padding-top:0;line-height:18px;} .picks-loader .circle-loading{display:none;position:relative;width:30px;height:18px;float:left;} .picks-loader .circle-loading .loader-ring{height:18px;width:18px;border-width:2px;} .picks-loader .ok-icon{color:var(--color-action);display:none;float:left;width:30px;text-align:left;font-size:16px;line-height:18px;} .picks-loader .cross-icon{color:#D34600;display:none;float:left;width:30px;text-align:left;font-size:16px;line-height:18px;} .picks-loader.submit-success .ok-icon{display:block;} .picks-loader.submit-error .cross-icon{display:block;} .picks-loader.loading-picks .circle-loading{display:block;} .submit-button-bar.button-bar{padding:10px 0px;position:sticky;bottom:0;background:#ffffff;box-shadow:0px 0px 14px 0px rgba(0, 0, 0, 0.2);} .submit-button-bar .simple-btn{font-size:14px;line-height:36px;height:36px;} /*================= My Picks Page CSS End =================*/ /*======== Nickname Modal CSS Start========*/ .slide-bottom .modal-info.nickname-info{padding:0px;} .nickname-info .modal-bg-card{padding:40px 20px;} .nickname-info .modal-logo figure{max-width:240px;} .nickname-modal-bottom{padding:16px 14px 16px;float:left;width:100%;} .nickname-form {float:left;width:100%;} .form-block{float:left;width:100%;margin-bottom:16px;} .form-block .form-group{margin:0px;} .nickname-button-block{float:left;width:100%;} .nickname-button-block .button-bar{padding-bottom:0px;} /*======== Nickname Modal CSS End ========*/ /*======== Tip Continue Modal CSS Start========*/ .slide-bottom .modal-info.continue-tip-info{padding:0px;} .continue-tip-modal .continue-tip-info .modal-title{text-align:center;font-weight:600;padding:14px 0px;margin-top:10px;text-wrap:balance;} .continue-tip-info .modal-bg-card{padding:30px 20px;} .continue-tip-info .modal-logo figure{max-width:200px;} .continue-tip-info .modal-logo figure img{width:100%;float:left;} .continue-tip-modal-bottom{padding:16px 14px 16px;float:left;width:100%;} .continue-tip-button-block{float:left;width:100%;} .continue-tip-button-block .button-bar{padding-bottom:0px;} /*======== Tip Continue Modal CSS End ========*/ /*======== Quick Picks Modal CSS Start ========*/ .slide-bottom .modal-info{padding:16px 18px 30px;} .slide-bottom .modal-close{float:right;width:30px;position:relative;} .slide-bottom .modal-close .close-btn{position:relative;margin:0px;top:0px;right:0px;} .slide-bottom .modal-close .close-btn .icon{font-size:14px;color:var(--color-gray);} .slide-bottom .modal-head{justify-content:space-between;position:relative;margin-bottom:14px;} .slide-bottom .modal-title{text-align:left;} .quick-picks-action{padding:0px;} .quick-picks-action .button-bar-outer{flex-direction:column;grid-gap:5px;} /*======== Quick Picks Modal CSS End ========*/ /*======== Review Picks Modal CSS Start ========*/ .slide-bottom{--loader-bg:#ffffff;} .slide-bottom .modal-info.review-picks-info{padding-right:6px;padding-left:10px;padding-bottom:0px;} .review-list-block{float:left;width:100%;max-height:48dvh;overflow:auto;padding-right:4px;} .review-list-block .review-jockey-item{min-height:auto;} .review-list{float:left;width:100%;} .review-list-item{float:left;width:100%;margin-bottom:5px;} .review-list-item:last-child{margin:0px;} .review-list-card{float:left;width:100%;border:2px solid var(--bg-light-gray);border-radius:10px;background-color:#ffffff;padding:2px;} .review-jockey-item{float:left;width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 2px 8px 10px;min-height:66px; cursor:pointer;} .review-col{float:left;} .review-col-inner{float:left;width:100%;} .review-picks-col{width:28px;max-width:28px;min-width:28px;} .review-horse-col{min-width:90px;} .review-race-col{flex:1;} .review-list-block .review-horse-col{margin-right:10px;} .review-picks-info .review-list-block .review-horse-col{display:inline-block;} .review-race-title{float:left;width:100%;font-size:12px;color:var(--color-gray);} .review-race-name{float:left;width:100%;font-size:14px;color:var(--color-dark);font-family:var(--font-head);font-weight:600;margin-top:3px;} .review-race-info {float:left;width:100%;font-size:12px;margin-top:2px;margin-bottom:-6px;} .review-horse-col .review-col-inner{display:inline-flex;justify-content:center;grid-gap:4px;align-items:center;} .horse-count{float:left;padding:4px 8px;background:var(--tipped-bg);border-radius:4px;color:var(--color-gray);font-size:12px;} .horse-race-count{float:left;} .check-tip{float:left;padding:2px;display:none;} .check-tip .icon{color:var(--theme-light);font-size:18px;} .edit-tip{float:left;padding:4px;cursor:pointer;} .edit-tip .icon{color:var(--theme-light);font-size:16px;} .lock-tip{float:left;padding:4px;display:none;} .lock-tip .icon{color:var(--color-dark);font-size:16px;} .review-picks-detail .icon{color:var(--color-gray);font-size:16px;transition:all 0.3s ease 0s;} .edit-tip-btn{padding:4px 4px;border:1px solid var(--theme-light);color:var(--theme-light);background:none;border-radius:3px;font-size:12px;cursor:pointer;} .edit-tip-btn:hover{color:#ffffff;background:var(--theme-light);} .review-jockey-list-block{float:left;width:100%;} .review-jockey-list{float:left;width:100%;} .review-jockey-list-item{float:left;width:100%;padding:5px 6px;background:var(--bg-light-gray);border-radius:4px;margin-bottom:2px;} .review-jockey-list-item .jockey-item-top .jockey-figure-col{--jockeySize:36px;} .review-picks-detail{padding:6px;display:inline-block;cursor:pointer;} .open .review-list-card{border-color:var(--theme-light);} .open .race-status-icon, .open .review-jockey-list-item{background:#ffffff;} .open .review-picks-detail .icon{transform:rotate(180deg);-webkit-transform:rotate(180deg);color:var(--theme-light);} .review-picks-info .review-jockey-list-item{background:var(--bg-light-gray);} .review-picks-info ul.review-list{position:relative;z-index:1;} .review-picks-info .review-jockey-list-item .scratch-box{border:1px solid var(--bdr2);} .review-jockey-list .review-jockey-list-item .jockey-info-block{flex-wrap:wrap;grid-gap:2px 5px;} .review-jockey-list .review-jockey-list-item .jockey-text{min-width:26px;white-space:nowrap;} .review-jockey-list-block .scratched-card-block{margin:4px 0px 6px;} .submit-review-picks.button-bar{padding:10px 0px;position:sticky;bottom:0;background:#ffffff;z-index:1;} /* Odds Col Hide*/ .eliminated-race .bar-odds-col{display:none;} .race-locked .bar-odds-col{display:none;} .completed-race .bar-odds-col{display:none;} /* Race Locked Review Popup */ .race-locked .edit-tip{display:none;} .race-locked .lock-tip{display:block;} /* Completed Race Review Popup */ .completed-race .edit-tip{display:none;} .completed-race .race-start-block{--color-gray:var(--theme-light);} .completed-race .lock-tip{display:inline-block;} .completed-race .horse-count{border:1px solid var(--bdr2);} .review-picks-info .review-list .completed-race .review-list-card{border-color:var(--tipped-bdr);background:var(--tipped-bg);} /*======== Review Picks Modal CSS End========*/ /*======== Picks Submitted Modal CSS Start========*/ .slide-bottom .modal-info.submit-picks-info{padding:0px;} .submit-picks-info .modal-title{text-align:center;color:var(--theme-highlight);font-size:23px;margin-top:-10px;} .modal-title-pre{float:left;width:100%;text-align:center;font-size:14px;color:#ffffff;font-family:var(--font-head);font-weight:600;text-wrap:balance;line-height:1.3em;margin-top:6px;} .modal-bg-card{float:left;width:100%;margin-top:-1px;border-radius:14px 14px 0px 0px;background:var(--modal-bg);background-size:cover;background-position:bottom center;padding:24px 14px 24px;} .submit-modal-bottom{padding:0px 14px;float:left;width:100%;} .cross-sell-card{float:left;width:100%;margin:10px 0px;} .cross-sell-inner{float:left;width:100%;border-radius:6px;background:#004833;min-height:92px;font-size:14px;text-transform:uppercase;display:flex;justify-content:center;align-items:center;color:#ffffff;} .submit-list-block{float:left;width:100%;} .modal.submit-picks-modal{background:rgba(0,0,0,0.95);} .modal-banner{float:left;width:100%; display:none;} .modal-banner-figure{float:left;width:100%;} .modal-banner-figure img{float:left;width:100%;} /* Share Card */ .share-option{float:left; width:100%; text-align:center; display:flex; align-items:center; justify-content:center;} .share-btn{float:left;min-width:104px;display:flex;align-items:center;justify-content:center;color:#fff;background:#000000;height:42px;border-radius:4px;margin:0px;padding:0 6px;} .share-picks-block{float:left;width:100%;padding:0px;} .share-picks-outer{float:left;width:100%;} .share-picks{float:left;width:100%;position:relative;padding:20px 0px 10px;margin:0px;} .share-picks h3{float:left;width:100%;text-align:center;font-size:14px;margin-bottom:14px;color:var(--color-base);font-family:var(--font-head);font-weight:600;} .share-picks .share-option{grid-gap:4px;} .share-picks .share-btn{min-width:auto;font-size:13px;flex:1;line-height:normal;height:36px;font-weight:700; max-width:132px;} .share-btn .icon{font-size:16px;} .share-btn.fb-btn{background:#1777f2;color:#ffffff;} .share-btn.twitter-btn{background:#15202b;color:#ffffff;} .share-btn.whatsup-btn{background:#2fc021;color:#ffffff;} .share-btn.copy-btn{background:#ebebf0;color:var(--color-base);} /*======== Picks Submitted Modal CSS End========*/ /*================= My Picks ACCA Page CSS Start =================*/ /* Congrats Block */ .congrats-block{float:left;width:100%;margin-bottom:6px;} .congrats-inner-block{float:left;width:100%;position:relative;} .congrats-content{float:left;width:100%;position:relative;padding:28px 0px 32px;} .congrat-figure{position:absolute;left:0;top:0;max-width:340px;float:left;width:100%;} .congrat-image{float:left;width:100%;} .congrats-over-text{float:left;width:100%;} .congrats-head{float:left;width:100%;font-size:32px;font-family:var(--font-head);font-weight:bold;color:var(--theme-dark);} .congrats-text{float:left;width:100%;font-size:27px;font-family:var(--font-head);font-weight:bold;color:var(--theme-light);} /* Short ACCA Start*/ .short-acca-block{float:left;width:100%;margin-bottom:25px;margin-top:4px;} .short-acca-card{float:left;width:100%;background:var(--bg-card);border-radius:var(--radius-card);border:1px solid var(--theme-light);} .short-acca-inner{float:left;width:100%;} .short-acca-header{float:left;width:100%;--luckyCardHeight:92px;} .short-header-card{float:left;width:100%;background:var(--theme-dark);color:#ffffff;overflow:hidden;border-radius:calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0px 0px;} .short-header-inner{float:left;width:100%;display:flex;justify-content:space-between;min-height:var(--luckyCardHeight);} .short-header-left{float:left;flex:1;padding:0px 24px 0px 16px;display:inline-flex;flex-direction:column;justify-content:center;} .short-title{float:left;width:100%;font-family:var(--font-head);font-weight:bold;font-size:19px;color:var(--theme-highlight);} .short-text{float:left;width:100%;font-family:var(--font-head);font-weight:600;font-size:12px;color:#ffffff;margin-top:8px;line-height:1.4em;} .short-header-right{float:right;min-width:96px;position:relative;background:#fce300;align-items:center;display:inline-flex;padding-right:6px;} .short-header-right:after{position:absolute;right:100%;width:0;height:0;border-top:var(--luckyCardHeight) solid transparent;border-right:30px solid #fce300;content:'';top:0;} .short-header-right:before{position:absolute;right:100%;width:6px;height:0;content:'';top:0;border-left:27px solid transparent;border-right:0px solid transparent;border-bottom:var(--luckyCardHeight) solid #004833;} .short-right-inner{display:flex;align-items:center;position:relative;} .short-price{color:#000000;text-align:left;float:left;width:100%;font-size:21px;font-family:var(--font-head);font-weight:bold;} .short-arrow{top:100%;float:left;width:65px;position:absolute;right:calc(100% - 8px);z-index:1;} .short-arrow-figure{float:left;width:100%;filter:drop-shadow(1px 3px 0px var(--theme-dark))} .short-arrow-figure img{float:left;width:100%;} /* Short ACCA Carousel */ .short-acca-bottom{float:left;width:100%;padding:14px 8px;} .short-acca-outer{float:left;width:100%;} .short-acca-item{float:left;width:100%;padding-bottom:8px;} .short-acca-list{float:left;width:100%;} .short-acca-list-item{float:left;width:100%;} .short-acca-list-card{float:left;width:100%;padding:15px 2px;border-bottom:1px solid var(--bdr);} .short-acca-list-card .jockey-item-top .jockey-figure-col{--jockeySize:36px;padding:0px;margin-right:15px;} .odds-btns{background:var(--bg-light-gray);border-radius:4px;min-width:72px;min-height:36px;border:1px solid var(--bdr2);display:inline-flex;justify-content:center;align-items:center; cursor:pointer;} .odds-points{font-size:18px;font-weight:bold;color:var(--theme-light);float:left;width:100%;text-align:center;} .jockey-race-text{margin-top:-2px;float:left;width:100%;font-size:14px;color:#474752;} /* Prize Card Start*/ .prize-card-block{float:left;width:100%;margin-bottom:16px;padding-top:12px;} .prize-card-outer{float:left;width:100%;} .prize-card{float:left;width:100%;} .prize-card-inner{float:left;width:100%;padding:14px 12px;border-radius:var(--radius-card);position:relative; background:url(../images/prize-card-bg.webp);background-size:cover;background-position:center;position:relative;} .prize-card-heading{float:left;width:100%;position:absolute;top:-12px;left:0px;right:0px;text-align:center;} .prize-card-label{background:var(--theme-light);color:#ffffff;border-radius:calc(var(--radius-card) / 2);line-height:23px;font-size:12px;font-family:var(--font-head);font-weight:bold;padding:1px 10px 0px;display:inline-block;text-align:center;margin:0 auto;letter-spacing:0.6px;} .prize-info-bottom{float:left;width:100%;} .prize-info-bottom-inner{float:left;width:100%;} .round-pagination{float:left;width:100%;} .round-pagination-list{float:left;width:100%;display:flex;justify-content:space-between;grid-gap:6px;} .round-pag-list{flex:1;float:left;width:100%;--pagination-color:rgba(0, 0, 0, 0.6);} .round-pag-list span{height:6px;width:100%;background:var(--pagination-color);float:left;border-radius:10px;} .completed-race{--pagination-color:var(--tipped-bdr);} .abandoned-race{--pagination-color:var(--abadoned-dark-color);} .eliminated-race{--pagination-color:var(--eliminated-dark-color);} .upcoming-race{--pagination-color:#ffffff;} .current-race{--pagination-color:#ffffff;} .prize-race-info{float:left;width:100%;} .prize-info-top{float:left;width:100%;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255, 255, 255, 0.2);padding-top:6px;} .prize-race-label{float:left;width:100%;font-size:20px;font-family:var(--font-head);font-weight:bold;color:#ffffff;} .prize-race-time{float:left;width:100%;font-size:12px;color:var(--color-dark-gray);margin-top:2px;} .prize-info-center{float:left;width:100%;margin-bottom:13px;} .prize-info-detail{float:left;width:100%;display:flex;justify-content:space-between; position:relative;} .prize-col{flex:1;} .prize-label{float:left;width:100%;font-size:12px;color:var(--green-highlight);} .prize-point{float:left;width:100%;font-size:26px;color:var(--theme-highlight);font-family:var(--font-head);font-weight:bold;margin-top:4px;} .pool-prize-right .prize-point{color:#ffffff;font-size:18px;} .pool-prize-right{text-align:right;} .prize-result-bottom{float:left;width:100%;padding-top:12px;} .prize-result-inner{float:left;width:100%;display:flex;justify-content:space-between;font-size:12px;} .prize-result-left{float:left;} .prize-result-right{float:right;} .prize-result-point{color:#ffffff;} .prize-result-value{color:var(--green-highlight);} .card-logo{float:left; width:100%; max-width:100px; position:absolute; top:0; left:0; height:100%; margin:8px auto 0; right:0; display:flex; align-items:center; justify-content:center;} .card-logo-figure{float:left; width:100%;} .card-logo-figure img{float:left; width:100%;} /* Prize Card End*/ /* Picks Tip Listing */ .picks-wrap-inner{float:left;width:100%;} .picks-listing{float:left;width:100%;} .picks-table-outer{float:left;width:100%;} .picks-table{float:left;width:100%;} .picks-table-body{float:left;width:100%;} .picks-list{padding-bottom:16px;} .picks-list .review-jockey-item{padding:8px;} .picks-list .review-list-card{border-color:var(--bg-card2);border-width:1px;border-radius:var(--radius-card2);box-shadow:var(--shadow-card2);} .picks-list .open .review-list-card{border-color:var(--color-dark-gray);background:var(--bg-light-gray);} .picks-list .completed-race .review-list-card{border-color:var(--tipped-bdr);background:var(--tipped-bg);} .picks-list .abandoned-race .review-list-card{border-color:var(--abadoned-dark-color);background:var(--abadoned-light-color);} .picks-list .eliminated-race .review-list-card{border-color:var(--eliminated-dark-color);background:var(--eliminated-light-color);} .review-race-status{margin-right:10px;align-self:flex-start;margin-top:6px;} .race-status-icon{width:30px;height:30px;display:inline-flex;justify-content:center;background:var(--bg-light-gray);align-items:center;border-radius:50%;} .race-status-icon .icon{font-size:14px;color:var(--color-base);} .race-status-icon .icon.icon-unlock-fill, .race-status-icon .icon.icon-unlock{color:var(--color-gray);} .race-info-status{float:left;width:100%;display:flex;align-items:center;grid-gap:4px;} .dot{height:9px;width:9px;float:left;background:var(--bg-light-gray);border-radius:50%;} .race-info-text{color:var(--color-base);font-size:11px;} .status-live .dot{background:#fe0000;} .status-live .race-info-text{color:#fe0000;} .race-start-block{float:left;width:100%;} .race-start-block .uc-counter{color:var(--color-base);font-size:11px;text-transform:none;justify-content:flex-start;line-height:normal;} .race-start-block .uc-counter .lock-icon .icon{color:var(--color-gray);font-size:11px;} .race-start-block .start-text{color:var(--color-gray);} .race-start-counter{float:left;margin-left:-2px;} .race-start-counter .counter{font-weight:normal;font-size:11px;text-transform:capitalize;color:var(--color-base);display:flex;} .race-start-counter .counter span,.race-start-counter .counter strong{font-weight:normal;font-size:11px;color:var(--color-base);} .race-start-counter .counter .col{padding:1px;} /* Completed Race */ .completed-race .review-horse-col{display:none;} .completed-race .race-status-icon{background:var(--tipped-bdr);} .completed-race .review-jockey-list-item{background:#ffffff;} .completed-race .race-status-icon .icon{color:#ffffff;} .completed-race .race-status-icon .icon:before{content:"\e970";} /* Winner Race Card */ .review-jockey-list-item.winner-card{--color-dark:#fff; --color-gray:#fff; background:var(--color-action); margin-top:8px;} .race-result-col{float:left; display:none; margin-left:8px;} .race-result-label{font-size:14px; font-weight:bold; color:#ffffff; text-transform:uppercase;} .winner-card .race-result-col{display:block;} .winner-card .jockey-rank{display:none;} .won-race-card{float:left; width:100%; margin-top:8px;} .races-title-label{float:left; width:100%; font-size:12px; font-weight:bold; text-transform:uppercase; margin:10px 0 6px; padding-left:10px;} .won-race-card .race-result-col{display:block;} .won-race-card .race-result-label{color:var(--eliminated-dark-color); text-transform:none; font-weight:500;} .won-race-card .review-jockey-list-item{border:2px solid var(--eliminated-dark-color); box-shadow:0px 1px 27px 0px rgba(249, 4, 22, 0.2) inset; background:rgb(252, 241, 241);} .won-race-card .jockey-rank{display:none;} .won-race-card .jockey-text{color:var(--color-dark);} /* Lock Race */ .race-locked .review-horse-col{display:none;} .race-locked .race-status-icon .icon:before{content:"\e939";color:var(--color-base);} /* Review Race Info on class*/ .rc-users,.rc-resulted,.rc-start,.rc-live{display:none;opacity:1;} .upcoming-race .rc-start,.completed-race .rc-resulted{display:inline-flex;opacity:1;} .race-locked .rc-live{display:flex;opacity:1;} .review-user-col .joc-users-icons .icon{font-size:14px;} .review-user-col .joc-users-counts .joc-users-per{font-size:15px;font-weight:500;} .review-user-col .joc-users-counts{min-width:48px;justify-content:center;} /* Eliminated Race */ .eliminated-race .review-horse-col{display:none;} .eliminated-race .race-status-icon{background:var(--eliminated-dark-color);} .eliminated-race .review-jockey-list-item{background:#ffffff;} .eliminated-race .race-status-icon .icon{color:#ffffff;} .eliminated-race .race-status-icon .icon:before{content:"\e96f";} .eliminated-race.open .review-picks-detail .icon{color:var(--eliminated-dark-color);} .abandoned-race.open .review-picks-detail .icon{color:var(--color-gray);} /*================= My Picks ACCA Page CSS End =================*/ /*=================Result ACCA Page CSS Start =================*/ .results-wrap .header{box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.29);} .results-info .prize-card-inner{border-radius:var(--radius-card) var(--radius-card) 0px 0px;} /* Page Select Filter */ .page-filter-wrap{float:left;width:100%;} .page-filter-inner{float:left;width:100%;} .filter-select-block{float:left;width:100%;padding:8px 0px;} .filter-select-block .custom-select{float:left;width:100%;} .filter-select-block .select-span{line-height:32px;height:34px;border-radius:4px;color:var(--color-base);} /* Result Prize Card */ .result-prize-card .prize-card-inner{background-image:var(--prize-card-bg);background-size:cover;background-position:center;} .result-prize-card .prize-point{font-size:22px;} .result-prize-card .prize-card-outer{background:var(--bg-card);box-shadow:var(--shadow-card);border-radius:var(--radius-card);} .result-prize-card .prize-label, .result-prize-card .prize-result-value{color:var(--prize-label);} .result-prize-card .prize-card-label{background:var(--prize-head);} /* Pick Card */ .pick-card{--prize-label:var(--green-highlight);--prize-head:var(--tipped-bdr);--prize-card-bg:url(../images/pick-card-bg.webp);} /* Unpick Card */ .unpick-card{--prize-label:var(--color-dark-gray);--prize-head:var(--color-gray);--prize-card-bg:url(../images/unpick-card-bg.webp);} /* Eliminated Card */ .eliminated-card{--prize-label:var(--color-dark-gray);--prize-head:var(--eliminated-dark-color);--prize-card-bg:url(../images/eliminated-card-bg.webp);} /* Result Tips Listing */ .prize-picks-listing{float:left;width:100%;} .prize-picks-listing .picks-table-outer{padding:0px 8px 6px;} .prize-card-head{float:left;width:100%;display:flex;justify-content:space-between;align-items:center;padding:6px 10px;} .prize-card-link{float:right;padding:6px;cursor:pointer;} .prize-card-link .icon{color:var(--color-gray);font-size:16px;transition:all 0.3s ease 0s;} .card-open .prize-card-link .icon{transform:rotate(180deg);-webkit-transform:rotate(180deg);color:var(--theme-light);} /* No Picks Card */ .no-pick-msg{float:left;width:100%;} .no-pick-outer{float:left;width:100%;} .no-pick-outer h3{float:left;width:100%;text-align:center;color:var(--color-base);font-size:14px;font-weight:700;text-transform:uppercase;padding:12px 8px;line-height:16px;} /*Not Yet Open Alert Message*/ .not-yet-alert{float:left;width:100%;} .not-yet-outer{float:left;width: 100%;margin:0px 0px 16px;padding:30px 10px;display: flex;align-items:center;min-height: calc(100dvh - 200px);} .not-yet-block{float:left;width:100%;text-align:center;} .yet-block{float:left;width:100%;display:flex;justify-content:center;} .no-yet-figure{display:inline-flex;width:80px; height:80px; border-radius:50%; margin-bottom:18px;background:var(--theme-dark);align-items:center;} .no-yet-figure .icon{float:left;width:100%;color:#ffffff;font-size:56px;} .not-yet-block h3{float:left;width:100%;color:var(--color-base);font-size:16px;font-weight:700;line-height:1.3em;} .not-yet-block p{float:left;width:100%;color:var(--color-base);font-size:13px;font-weight:400;line-height:1.3em;margin-top:12px;} /*=================Result ACCA Page CSS End=================*/ /*=================Eliminated Page CSS Start =================*/ .eliminated-info .page-content{padding:0px;} .eliminated-banner{float:left;width:100%;background:url(../images/eliminated-bg.webp);background-size:cover;background-position:center;} .eliminated-inner{float:left;width:100%;display:flex;justify-content:flex-start;padding:23px 0px 74px;} .eliminated-card-outer{float:left;width:100%;} .eliminated-c-card{float:left;} .eliminated-status{float:left;width:100%;font-size:10px;color:#ffffff;font-weight:500;text-transform:uppercase;margin-bottom:3px;} .eliminated-c-card-inner{float:left;background:#ff0000; display:flex; flex-direction:column;} .eliminated-head{float:left;width:100%;text-align:center;color:#ffffff;font-size:25px;font-weight:bold;font-family:var(--font-head); height:32px;display:flex;justify-content:center;align-items:center;line-height:32px;padding:0px 8px;} .eliminated-label{float:left;width:100%;display:flex;align-items:center;background:var(--theme-highlight);grid-gap:3px;padding:0px 6px;min-height:22px;} .eliminate-user-icon{float:left;} .eliminate-user-icon .icon{font-size:14px;color:var(--color-dark);} .eliminate-race-text{font-size:10px;font-weight:600;font-family:var(--font-head);color:var(--color-dark);} /* .eliminated-info .eliminated-result-card{padding-top:0px;margin-top:-58px;} */ .eliminated-result-card.pound-currency .prize-card-inner{background:url(../images/pound-eliminated-dark-card-bg.webp);background-size:cover; background-position:center;} .eliminated-result-card.dollar-currency .prize-card-inner{background:url(../images/dollar-eliminated-dark-card-bg.webp);background-size:cover; background-position:center;} .eliminated-result-card .prize-card-inner{--green-highlight:var(--color-gray);background:url(../images/eliminated-dark-card-bg.webp);background-size:cover;background-position:center;} .picks-wrap-info.eliminated-info .eliminated-result-card .prize-card-inner{border:1px solid #ffffff;box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.3);} .eliminated-picks-list{--timeline-color:var(--bg-light-gray);} .eliminated-picks-list .review-race-status{--bg-light-gray:#cbcbcb;} .eliminated-picks-list .review-list-item{--pagination-color:#cbcbcb;} .eliminated-picks-list .upcoming-race{--pagination-color:#cbcbcb;} .eliminated-picks-list .completed-race{--pagination-color:var(--tipped-bdr);} .eliminated-picks-list .eliminated-race{--pagination-color:var(--eliminated-dark-color);} .review-list-outer{display:flex;justify-content:space-between;align-items:center;grid-gap:16px;position:relative;--timeline-color:var(--pagination-color);} .review-list-outer:after{position:absolute;left:14px;height:calc(100% + 5px);top:20px;width:2px;content:'';border-left:2px dashed var(--timeline-color);} .review-list-outer .review-race-status{margin:20px 0px 0px;width:30px;position:relative;z-index:1;} .review-list-col{float:left;} .review-race-detail{flex:1;} .review-list-item:last-child .review-list-outer:after, .review-list-item:first-child .review-list-outer:before{display:none;} .unpick-result-card .prize-card-inner{background:var(--prize-card-bg);background-size:cover;background-position:center;} .unpick-result-card {--green-highlight: var(--color-dark-gray);--prize-card-bg: url(../images/unpick-card-bg.webp);} .eliminated-info .prize-card-block{padding-top:0px;margin-top:-58px;} .eliminated-info.eliminated-acca .short-acca-block{margin-top:-58px;} .eliminated-info.eliminated-acca .prize-card-block{margin-top:0px;} /*================= Eliminated ACCA Page CSS End=================*/ /*================= FAQ Page CSS Start =================*/ .faq-screen{float:left;width:100%;} .faq-wrap-inner{float:left;width:100%;padding:2px 0px 16px;} .faq-wrap-inner .wcard{padding:0px;background:none;box-shadow:none;border-radius:none;} .faq-prizes-list{float:left;width:100%;position:relative;} .faq-accordin{float:left;width:100%;} .faq-accordin > li{float:left;width:100%;overflow:hidden;padding:0px;background: var(--bg-card); box-shadow: var(--shadow-card); border-radius: var(--radius-card); margin-bottom:8px;} .faq-accordin > li:last-child{margin:0px;} .faq-accordin > li.open .faq-title .icon{transform:rotate(180deg);-webkit-transform:rotate(180deg);} .faq-title{float:left;width:100%;min-height:44px;line-height:normal;color:#000;background:#ffffff;padding:10px 30px 10px 12px;position:relative;display:flex ;align-items:center;} .faq-title .faq-heading{color:var(--theme-dark);font-size:13px;display:block;overflow:hidden;font-weight:500;line-height:1.4em;} .faq-title .icon{float:left;margin-right:0;position:absolute;top:0;right:10px;height:100%;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease 0s;font-size:14px;color:var(--theme-light);} .faq-wcard{padding:4px 12px 12px;} .base-content-block{float:left;width:100%;display:none;} .base-content-block p{line-height:16px;margin-bottom:12px;font-size:13px;} .base-content-block center p{text-align:center;} .base-content-block p:last-child{margin-bottom:0;} .base-content-block center p{margin-bottom:10px;} .base-content-block h3{float:left;width:100%;color:#000;font-size:14px;margin-bottom:4px;} .base-content-block ul, .base-content-block ol{float:left;width:100%;list-style:decimal;padding-left:20px;color:var(--color-dark);margin:3px 0px;} .base-content-block ul li, .base-content-block ol li{float:left;width:100%;list-style:decimal;padding-bottom:7px;font-size:13px;color:#000;} .base-content-block ol, .base-content-block ol li{list-style:disk;} .base-content-block ul li ul{padding-left:22px;} .base-content-block ul li ul, .base-content-block ul li ul li, .base-content-block ol li ol, .base-content-block ol li ol li{list-style:lower-alpha;} .base-content-block ul li ul li, .base-content-block ol li ol li{padding-bottom:7px;} .base-content-block ul.list-disk, .base-content-block ul.list-disk li{list-style:disc;} .base-content-block p a{text-decoration:underline;color:var(--color-action);} .base-content-block .sub-heading{float:left;width:100%;color:#3c3c3c;font-size:14px;margin-bottom:6px;font-weight:700;} .base-table-outer + .sub-heading{margin-top:12px;} .base-table-outer{float:left;width:100%;overflow-x:auto;margin-bottom:12px;} .base-table{width:100%;border:1px solid var(--bdr);white-space:normal;border-spacing:0;margin:0;padding:0;} .base-table tr{width:100%;} .base-table tr:last-child td{border-bottom:0;} .base-table tr th{background:#ddd;font-weight:normal;font-size:11px;color:var(--color-dark);text-transform:uppercase;} .base-table tr th, .base-table tr td{text-align:left;border-right:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:6px 16px;} .base-table tr th:last-child, .base-table tr td:last-child{border-right:0;} /*================= FAQ Page CSS End=================*/ :root{ --bg-error:radial-gradient(circle, var(--theme-light) 0%, var(--theme-dark) 60%, var(--theme-dark) 100%); --bg-comingSoon:radial-gradient(circle, var(--theme-light) 0%, var(--theme-dark) 60%, var(--theme-dark) 100%); --bg-splash:radial-gradient(circle, var(--theme-light) 0%, var(--theme-dark) 60%, var(--theme-dark) 100%); } /*========Splash Page CSS========*/ .splash-widget{float:left;width:100%;} .splash-info{float:left;width:100%;height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg-splash);} .splash-content{float:left;width:100%;max-width:360px;padding:10px 0px;text-align:center;} .splash-logo-wrap{float:left;width:100%;text-align:center;} .splash-logo{display:inline-block;width:100%;max-width:360px;} .splash-logo img{float:left;width:100%;} /*========Error Page CSS========*/ .error-widget{float:left;width:100%;} .error-info{float:left;width:100%;height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg-error);} .error-content {float:left;width:100%;max-width:360px;padding:10px 15px;text-align:center;color:#ffffff;} .error-figure{margin:0 auto 20px;max-width:340px;width:100%;display:flex;align-items:center;justify-content:center;} .error-figure img{float:left;width:100%;} .error-title{font-size:30px;line-height:1.2em;font-weight:700;margin-bottom:4px;} .error-pre{font-size:14px;float:left;width:100%;} .error-content .button-bar{padding:0px;margin:20px 0px 0px;} /*========Coming Soon Page CSS========*/ .coming-soon-widget{float:left;width:100%;} .coming-soon-info{float:left;width:100%;height:100dvh;display:flex;justify-content:center;align-items:center;background:var(--bg-comingSoon);} .coming-soon-content {float:left;width:100%;max-width:360px;padding:10px 15px;text-align:center;} .coming-soon-figure{margin:0 auto 20px;width:56vmin;display:flex;align-items:center;justify-content:center;} .coming-soon-figure img{float:left;width:100%;} .coming-soon-title{font-size:36px;line-height:1.2em;font-weight:900;margin-bottom:4px;color:#ffffff;text-transform:uppercase;} .coming-soon-sm-title{font-size:20px;line-height:1.2em;font-weight:500;margin-bottom:4px;color:#ffffff;text-transform:uppercase;} /*Locked Modal CSS Start*/ .modal.locked-modal{z-index:2;} .modal-info-content{text-align:center;} .modal-pre{float:left; width:100%; font-size:13px; line-height:1.3em;} .modal-title ~ .modal-pre{margin-top:6px;} /*Locked Modal CSS End*/ /*Odds CTA CSS*/ .bar-odds-col{float:left; margin-left:5px;} .bar-odds-col .odds-btns{min-width:60px; max-width:60px;} .bar-odds-col .odds-btns .odds-points{font-size:13px;} .bar-odds-col .joc-odds{flex-direction:column; align-items:center; grid-gap:0;} .bar-odds-col .joc-odds-point{font-weight:600;font-size:14px;} .tips-list-item .bar-odds-col{margin:0 10px 0 5px;} /*Jockey and Trainer */ .jockey-trainer-info{float:left; width:100%;} .jockey-info-col{float:left; min-width:100%; max-width:100%; display:flex; gap:2px 5px;} .trainer-col{float:left; width:100%;} .trainer-col .jockey-text{white-space:normal !important;} /*============== Coming Soon Page CSS ==============*/ .coming-soon-page-outer{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle, var(--theme-light) -30%, var(--theme-dark) 80%, var(--theme-dark) 100%);} .coming-soon-wrap{float:left;width:100%;padding:10px 14px;position:relative;} .coming-soon-mid{float:left;width:100%;text-align:center;display:flex;height:100%;flex-direction:column;justify-content:center;} .coming-soon-logo{float:left;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;} .coming-soon-figure{margin:0 auto 20px;width:64vmin;} .coming-soon-figure img{float:left;width:100%;} .coming-soon-title{float:left;width:100%;font-size:7.5vmin;line-height:1.2em;font-weight:bold;color:#ffffff;} .coming-soon-title span{font-size:7.5vmin; color:#fffe03;} .countdown-lg-box{float:left;width:100%;display:flex;justify-content:center;min-height:5vmin;} .countdown-lg{float:left;width:100%;display:flex;justify-content:space-between;grid-gap:14px;max-width:253px;} .count-col-lg{float:left;width:100%;} .count-col-lg .count-value{float:left;width:100%;border-radius:4px;box-shadow:0px 4px 5px 0px rgba(0, 21, 16, 0.76);background-image:-moz-linear-gradient( -90deg, rgb(220,220,220) 0%, rgb(236,236,236) 46%, rgb(252,252,252) 48%);background-image:-webkit-linear-gradient( -90deg, rgb(220,220,220) 0%, rgb(236,236,236) 46%, rgb(252,252,252) 48%);background-image:-ms-linear-gradient( -90deg, rgb(220,220,220) 0%, rgb(236,236,236) 46%, rgb(252,252,252) 48%);position:relative;} .count-col-lg .count-value strong{float:left;width:100%;font-size:40px;line-height:1.45em;text-shadow:0px 3px 3px rgba(160, 160, 160, 0.68);color:#000000;position:relative;z-index:1;} .count-col-lg .count-value:before{position:absolute;top:48%;background:#858585;width:100%;height:1px;left:0px;content:'';} .count-col-lg .count-label{float:left;width:100%;color:#fffe03;text-align:center;margin-top:12px;font-size:15px;font-family:var(--font-pre);} /*Game Finished Card CSS Start*/ .card-result-info{float:left; width:100%; text-align:center; display:none;} .card-result-box{float:left; width:100%; padding:18px 0;} .result-bx{display:inline-flex; height:24px; min-width:78px; padding:0 8px; color:#fff; background:var(--theme-light); font-size:13px; font-weight:600; text-align:center; justify-content:center; align-items:center; border-radius:2px; font-family:var(--font-head);} .card-race-winners{float:left; width:100%; font-family:var(--font-head); color:#fff; font-size:18px; font-weight:600;} .winner-race-card .uc-game-counter, .winner-race-card .ribbon-title, .eliminated-race-card .uc-game-counter, .eliminated-race-card .ribbon-title{display:none;} .winner-race-card .uc-race-name{font-size:25px; padding-top:3px;} .winner-race-card .uc-race-heading, .eliminated-race-card .uc-race-heading{color:var(--color-base); background:#fff; letter-spacing:normal;} .winner-race-card .card-result-info, .eliminated-race-card .card-result-info{display:block;} .winner-race-card .card-result-box{background:url("../images/confetti.png") no-repeat center center; background-size:contain;} .eliminated-race-card .uc-race-name{font-size:28px; padding-top:1px;} .eliminated-race-card .card-race-winners{font-size:20px;} .eliminated-race-card .result-bx{background:#e40000;} .eliminated-race-card .card-result-box{padding-bottom:12px;} /*Game Finished Card CSS End*/ @media (orientation:landscape){ /* Coming Soon CSS*/ .coming-soon-figure{margin:0px auto 1vmin;width:56vmin;} .coming-soon-title{margin:3vmin 0px;line-height:1em;} .coming-soon-title span{display:inline-block;} .coming-soon-title span, .coming-soon-title{font-size:7.1vmin;} .countdown-lg-box{margin-bottom:3vmin} .countdown-lg{grid-gap:1.4vmin;max-width:32vmin;} .count-col-lg .count-value{border-radius:0.4vmin;} .count-col-lg .count-value strong{font-size:4.8vmin;line-height:1.4em;} .count-col-lg .count-label{font-size:2.5vmin;} } /* Time Form Card CSS Start*/ .jockey-item-top .jockey-figure-col .jockey-figure{width:calc(var(--jockeySize) - 10px);margin:0 5px 0;} .jockey-item-top .jockey-figure-col:has(.joc-users-counts) .jockey-figure{margin-top:5px;} .tips-list .jockey-item-top .col.jockey-rank, .jockey-item-top .bar-odds-col, .jockey-item-top .jockey-selection-col{position:relative;padding-bottom:19px;margin-top:4px;} .jockey-figure-col .joc-users-counts{justify-content:center;} .jockey-selection-col .joc-info-col{position:absolute;bottom:0px;right:0px;white-space:nowrap;} .jockey-selection-col .joc-users-counts{position:absolute;bottom:0px;right:0px;white-space:nowrap;width:auto;font-weight:700;margin:0;} .joc-timeform-block{display:flex;gap:6px;align-items:center;} .timeform-icon{float:left;width:60px;} .timeform-figure{float:left;width:100%;} .timeform-figure img{float:left;width:100%;} .rating-icon-block{display:inline-flex;gap:3px;} .rating-icon{float:left;} .rating-icon .icon{float:left;font-size:14px;color:#fcb800;/* color:var(--theme-highlight); */} .rating-acc-block{float:left;width:100%;} .rating-acc-inner{float:left;width:100%;padding:8px 0px 0px;margin-top:2px;} .rating-heading{float:left;width:100%;font-size:12px;color:var(--color-base);text-align:left;line-height:1.3em;font-weight:700;margin-bottom:2px;} .rating-description{float:left;width:100%;font-size:11px;color:var(--color-gray);text-align:left;line-height:1.3em;} .joc-detail-link .icon{transition:all 0.3s ease 0s;} .tips-list-item.show-all .joc-detail-link .icon{transform:rotate(180deg);-webkit-transform:rotate(180deg);} .tips-list-item.show-all .more-text, .tips-list-item:not(.show-all) .less-text{display:none;} /* Time Form Card CSS End*/ /* Time Form Verdict CSS Start*/ .verdict-card-info{float:left;width:100%;position:relative;overflow:hidden; background:#ffffff; border-radius:4px;box-shadow:var(--shadow-card2); margin-bottom:10px;} .verdict-card{float:left; width:100%;} .verdict-title{float:left; width:100%; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px;} .verdict-title-label{float:left; flex:1; display:flex; align-items:center; gap:4px;} .verdict-title-label .timeform-figure{float:left; width:60px; min-width:60px;} .verdict-title-arrow{float:left; font-size:13px; color:var(--theme-light); transition:all 0.3s ease 0s;} .verdict-title.active .verdict-title-arrow{transform:rotate(-180deg);} .verdict-label{float:left; font-size:18px; font-weight:bold; color:#233a4d;} .verdict-content{float:left; width:100%; padding:8px 10px 12px; display:none;} .verdict-content .rating-description{font-size:14px; color:var(--color-base); font-weight:normal;} .rating-list{float:left; width:100%; margin-top:5px;} .rating-pre{float:left; width:100%; font-size:12px; color:var(--color-base); font-weight:500; margin-top:5px;} /* Time Form Verdict CSS End*/ /*======Cheltenham Race CSS Start========*/ .cheltenham-race-day .home-wrap{--bg-body:url(../images/home-bg-cheltenham.webp) #05594d; background:var(--bg-body); background-size:cover; background-repeat:no-repeat;} .cheltenham-race-day .submit-picks-modal .modal-bg-card{--modal-bg:url(../images/submission-modal-popup-bg.webp); clip-path:ellipse(100% 99% at 50% 0%); background-size:cover; background-position:center top; padding-bottom:34px;} .cheltenham-race-day .submit-picks-modal .modal-logo figure{opacity:0; visibility:hidden;} .cheltenham-race-day .submit-picks-modal .modal-logo figure{opacity:0; visibility:hidden;} .cheltenham-race-day .modal-banner{display:block;} /*Next Card*/ .cheltenham-day-one.next-round-card .upcoming-race-inner{--card-bg:url("../images/next-round-bg-day-1.webp"); background:var(--card-bg) no-repeat top left; background-size:cover;} .cheltenham-day-two.next-round-card .upcoming-race-inner{--card-bg:url("../images/next-round-bg-day-2.webp"); background:var(--card-bg) no-repeat top left; background-size:cover;} .cheltenham-day-three.next-round-card .upcoming-race-inner{--card-bg:url("../images/next-round-bg-day-3.webp"); background:var(--card-bg) no-repeat top left; background-size:cover;} /*Tipping Article*/ .tipping-article-card{display:none; float:left; width:100%; border:2px solid #01c867; border-radius:10px; background-color:#01523b; position:relative; background:url(../images/next-round-bg-day-2.webp) no-repeat center center; height:190px; background-size:100%;} .cheltenham-race-day .tipping-article-card{display:block;} .tipping-article-card-inner{float:left; width:100%; height:100%; display:flex; align-items:center; justify-content:flex-end; padding:8px;} .article-card-content{float:left; width:52%; text-align:center;} .article-title{float:left; width:100%; color:var(--color-white); font-weight:bold; font-size:20px; text-transform:uppercase; font-family:var(--font-head);} .article-sm-title{float:left; width:100%; color:var(--color-white); font-weight:bold; font-size:20px; text-transform:uppercase; font-family:var(--font-head); margin-top:5px;} .highlight-label{color:var(--theme-highlight);} .article-btn{float:left; width:100%; text-align:center; margin-top:10px;} .article-btn .btn{height:40px; line-height:1.3em; text-transform:none; font-family:var(--font-base); min-width:125px;} @media (min-width:768px){ .cheltenham-race-day .home-wrap{--bg-body:url(../images/home-desk-bg-cheltenham.webp) #05594d; background-size:100%; background-repeat:no-repeat; background-position:center top;} .cheltenham-race-day .submit-picks-modal .modal-bg-card{--modal-bg:url(../images/submission-modal-popup-bg-desk.webp);} /*Next Card*/ .cheltenham-day-one.next-round-card .upcoming-race-inner{background:url("../images/next-round-desk-bg-day-1.webp") no-repeat top left; background-size:cover;} .cheltenham-day-two.next-round-card .upcoming-race-inner{background:url("../images/next-round-desk-bg-day-2.webp") no-repeat top left; background-size:cover;} .cheltenham-day-three.next-round-card .upcoming-race-inner{background:url("../images/next-round-desk-bg-day-3.webp") no-repeat top left; background-size:cover;} .tipping-article-card{background:url(../images/next-round-desk-bg-day-2.webp) no-repeat bottom left;background-size:cover; height:198px;} } @media (max-width:460px){ .tipping-article-card{background-position:left bottom; background-size:118%;} } /*======Cheltenham Race CSS End========*/ /*===================== Responsive CSS Start ======================*/ @media(max-width:1024px){ .modal.slide-bottom{padding:0px;overflow:hidden;display:block!important;background:none;overflow:inherit;top:calc(100% + 20px);transition:all 0.6s ease 0s;} .modal.slide-bottom.show{top:0;} .modal.slide-bottom.show .modal-overlay{display:block;} .modal.slide-bottom .modal-overlay{background:rgba(0,0,0,0.8);display:none;} .slide-bottom .modal-contenier,.slide-bottom .modal-container{padding:0;align-items:flex-end;} .slide-bottom .modal-outer{border-radius:16px 16px 0px 0px;max-width:calc(var(--containerWidth) - calc(var(--containerGap)*2));} .carousel-nav{display:none;} .tooltip-info.show-tooltip .tooltip{display:block;} .tooltip-info.show-tooltip .icon:after{opacity:1;} .home-wrap:before{display:none;} } @media(min-width:1025px){ .slide-bottom .modal-info.review-picks-info, .slide-bottom .modal-info{padding:18px;} .nickname-modal-bottom{padding:18px;} .submit-modal-bottom{padding:0px 18px 18px;} .slide-bottom .modal-outer{border-radius:16px;max-width:540px;} .slide-bottom .submit-review-picks.button-bar, .slide-bottom .button-bar.submit-picks{padding-bottom:0px;} .review-list-block{max-height:49dvh;} .short-acca-bottom{padding-left:12px;padding-right:12px;} .tooltip-info:hover .tooltip{display:block;} .tooltip-info:hover .icon:after{opacity:1;} } @media (min-width:768px){ :root{ --modal-bg:url(../images/modal-popup-bg-desk.webp); } .home-wrap{background:var(--bg-body);} .home-button-bar.button-bar{background:none;} .back-btn{min-width:40px; width:40px; margin-right:20px;} .game-info-title{font-size:20px;} .game-info-title br{display:none;} .next-round-date{font-size:16px;} .next-round-info{padding:0 0 6px; max-width:330px;} .next-round-card .uc-race-name{font-size:36px; padding:6px 0 0;} .next-race-name{font-size:20px;} .next-round-card .uc-game-counter{min-height:38px;} .next-round-card .uc-counter-inner{height:30px;} .next-round-card .uc-counter-inner .uc-counter{font-size:14px;} .next-race-name ~ .uc-race-name{padding-top:12px;} .next-round-card .upcoming-race-inner{background:url("../images/next-round-desk-bg.png") no-repeat center left; background-size:100%; min-height:213px;} } @media (min-width:992px) and (orientation:landscape){ .game-logo{max-width:40vmin;} .horse-figure{max-width:44vmin;} } /* CSS for Portrait iPad*/ @media (min-width:768px) and (max-width:992px) and (orientation:portrait){ } /* CSS for Landscape Mobile */ @media (max-width:992px) and (orientation:landscape){ .home-button-bar.button-bar{position:sticky;bottom:0;background:var(--theme-dark);padding:12px 0px;} .home-card{padding-top:24px;} /* Sticky Card Block */ .sticky-card-block{position:inherit;} } @media (max-width:767px){ .jockey-info-col{min-width:100%;} .trainer-col{min-width:100%;} .next-race-name ~ .uc-race-name{padding-top:10px;} } /* CSS for Portrait Mobile*/ @media (max-width:767px) and (orientation:portrait){ /* .home-button-bar.button-bar{position:sticky;bottom:0;background:var(--theme-dark);} */ .review-list-block .review-horse-col{margin-right:2px;} .jockey-text{max-width:140px;} .horse-figure{max-width:348px;} .home-card{padding-top:24px;} .uc-race-name{font-size:45px;} .uc-race-count{font-size:16px;} .upcoming-race-inner{padding:12px 12px 15px;} .upcoming-card .ribbon-title{margin:-4px 0 -8px -13px;} .current-race-card .upcoming-card .ribbon-title{margin-top:6px;} .home-race-card.next-round-card .ribbon-title{margin-left: -19px;} } /*6/7/8 plus*/ @media only screen and (device-width:414px) and (device-height:736px) and (orientation: portrait) { .horse-figure{max-width:280px;} } /*Pixel 3 XL*/ @media only screen and (device-width:393px) and (device-height:786px) and (orientation: portrait) { .horse-figure{max-width:280px;} } /*Pixel 2*/ @media only screen and (device-width:411px) and (device-height:731px) and (orientation: portrait) { .horse-figure{max-width:280px;} } /* CSS for Portrait Android Mobile*/ @media (min-width:376px) and (max-width:389px) and (orientation:portrait){ .horse-figure{max-width:280px;} .upcoming-card{padding-top:10px;} } /* CSS for Portrait Mobile*/ @media (max-width:375px) and (orientation:portrait){ .horse-figure{max-width:280px;} .uc-race-bottom{padding:10px 0px 0px;} .horse-figure{max-width:240px;} .tipping-article-card{background-size:122%;} } /* CSS for Portrait Mobile*/ @media (max-width:374px) and (orientation:portrait){ .short-header-left{padding:0px 20px 0px 10px;} .short-arrow{width:60px;right:calc(100% - 4px);} .short-header-right{min-width:80px;padding-right:4px;} .short-header-right:after{border-right-width:26px;} .short-header-right:before{border-left-width:24px;width:4px;} .short-title,.short-price{font-size:18px;} .short-text{font-size:11px;} .nav-items li a{font-size:11px;} .article-title{font-size:18px;} .article-sm-title{font-size:18px;} } @media (max-width:350px) and (orientation:portrait){ .nav-items li a{font-size:10px; padding:6px 2px;} .article-title{font-size:15px;} .article-sm-title{font-size:15px;} .tipping-article-card{height:160px; background-size:cover;} } /* Responsive CSS End*/