@charset "utf-8";

/*
 * Sport Predictor 2026
 * CCP v2.0.10
 * 2026.07.03
 *
 * All products
 *
 * In development
 *
 * Full rework for new DOM structure and up-to-date CSS
 */

/*
Version
*/
.CustomContentPodContentWrapper
{
    --version: 2.0.10 (2026.07.03);
}

/*
Global settings
*/
.CustomContentPodContentWrapper,
.CCP_MatchTableContainer
{
    --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --preload-outer: hsla(161, 100%, 58%, 0.25);
    --bet365-green: hsl(161, 100%, 58%);
    --main-text-color: #eee;
    --legal-color: #999;
    --button-text: #222;
    --button-hover: #fff;
}

@media (max-width: 480px)
{
	.CustomContentPodContentWrapper
	{
		--base-ui-height: 315px;
	}
}

@media (min-width: 481px)
{
	.CustomContentPodContentWrapper
	{
		--base-ui-height: 315px;
	}
}

/*
Global positioning and sizes
*/
.CustomContentPodContentWrapper
{
    position: relative;
    max-width: 1024px;
    margin: 20px auto 50px;
}

.CustomContentPodContentWrapper.loading
{
    min-height: var(--base-ui-height);
}

.__CCPBody img
{
    display: block;
    margin: 0;
}


/*
 ** CCP rules begin **
 */

/* Size calculations */
@media (max-width: 599px)
{
    .__CCPBody
    {
		--core-ui-width: 96vw;
		--core-ui-height: 90px;
	}
}

@media (min-width: 600px) and (max-width: 899px)
{
	.__CCPBody
    {
		--core-ui-width: 90vw;
		--core-ui-height: 90px;
	}
}

/* @media (min-width: 768px) */
@media (min-width: 900px)
{
    .__CCPBody
    {
		--core-ui-width: 800px;
		--core-ui-height: 90px;
	}
}

.__CCPBody
{
	--tile-gap: 4px;
	--tile-gap-max: calc(var(--tile-gap) * (var(--tile-count) - 1));
	--available-ui-width: calc(var(--core-ui-width) - var(--tile-gap-max));
	--tile-standard-width: round(up, var(--available-ui-width) * 0.38, 1px);
	--tile-draw-width: calc(100% - (calc(var(--tile-standard-width) * 2)));
	--tile-equal-width: calc((var(--core-ui-width) - var(--tile-gap-max)) / var(--tile-count));
	--tile-selected-width: calc(var(--core-ui-width) * 0.575);
	--tile-info-width: calc(var(--core-ui-width) * 0.425);
	--tile-equal-spacing: calc(var(--tile-equal-width) + var(--tile-gap));
	--cta-line-height: 1.4;
}

/* Layout */
.__CCPBody
{
    position: relative;
    background: transparent var(--pitch-image) center bottom no-repeat;
    isolation: isolate;
}

.CustomContentPodContentWrapper.loading > .__CCPBody
{
    min-height: var(--base-ui-height);
}

.CustomContentPodContentWrapper:not(.loading) > .__CCPBody
{
    height: var(--base-ui-height);
}


/*
Site cascade resets
*/
.ccp-CustomContentPod
{
	padding-top: 0;
}

.__CCPBody h3
{
    max-width: unset;
}



/*
 * Text content
 */
.__CCPBody h2,
.CCP_CTA
{
    padding: 0 15px;
    text-align: center;
}

.__CCPBody h2,
.__CCPBody h3
{
    letter-spacing: -.015em;
    font-weight: normal;
	text-transform: uppercase;
	line-height: 1;
}

.__CCPBody h2
{
    font-family: FuturaPTWebCondensedExtraBoldOblique;
    color: var(--bet365-green);
    margin: 0 auto 5px;
}

.__CCPBody h3
{
    font-family: FuturaPTCondBoldOblique;
}

.CCP_CTA
{
    font-size: 14px;
    margin: 0 auto;
    color: var(--main-text-color);
    line-height: var(--cta-line-height);
    text-wrap: pretty;
}

/* Text view */
.CCP_TextView
{
    display: flex;
    position: relative;
    height: var(--core-ui-height);
    margin: 30px auto 40px;
    flex-direction: column;
    justify-content: center;
}

.CCP_TextView::before
{
	content: "";
	display: block;
	position: absolute;
	inset: 0 -20px;
	background-color: #303030;
	z-index: -1;
	transform: skewX(-7deg);
}

.CCP_TextView > h3,
.CCP_TextView > p
{
    text-align: center;
    color: var(--main-text-color);
}

.CCP_TextView > h3
{
	margin: 0 auto 10px;
}

.CCP_TextView > p
{
	margin: 0 auto;
    text-wrap: pretty;
}

@media (max-width: 480px)
{
	.__CCPBody h2
	{
		font-size: clamp(24px, 7vw, 30px);
	}

	.CCP_CTA
    {
		font-size: 13px;
		height: calc(var(--cta-line-height) * var(--cta-ml-multiplier));
	}
}

@media (min-width: 481px) and (max-width: 767px)
{
    .__CCPBody h2
    {
        font-size: 30px;
    }
}

@media (min-width: 768px)
{
    .__CCPBody h2
    {
        font-size: 36px;
    }
}


/*
 * Center Bar container
 */
.CCP_CenterBar
{
    position: relative;
    margin: 30px auto 15px;
    padding-bottom: 5px;
    overflow: hidden;
    height: var(--core-ui-height);
}


/*
 * Predictor tiles
 */
.CCP_PredictorTiles
{
	--fallback-tile-color: #12735c;
	--fallback-accent-color: #093a2e;

    display: grid;
    position: relative;
    width: var(--core-ui-width);
    height: var(--core-ui-height);
    margin: 0 auto;
}

@media (max-width: 480px)
{
	.CCP_PredictorTiles
	{
		--player-strip-height: 60%;
		--prize-strip-height: 40%;
	}
}

@media (min-width: 481px)
{
	.CCP_PredictorTiles
	{
		--player-strip-height: 70%;
	    --prize-strip-height: 30%;
	}
}

.CCP_PredictorTiles > :not(:first-child)
{
	pointer-events: none;
}

.CCP_PredictorTiles > .display-strip
{
	position: relative;
	grid-area: 1 / 1;
	height: var(--core-ui-height);
}

.CCP_PredictorTiles > .display-strip.tiles
{
    transform: skew(-7deg);
}

.CCP_PredictorTiles > .display-strip.predictions
{
	display: flex;
	justify-content: space-between;
	gap: var(--tile-gap);
}

.CCP_PredictorTiles > .display-strip p
{
	display: flex;
	box-sizing: border-box;
	align-items: center;
	gap: 0 0.25em;
}

.CCP_PredictorTiles > .display-strip p:first-child
{
	height: var(--player-strip-height);
}

.CCP_PredictorTiles > .display-strip p:last-child
{
	height: var(--prize-strip-height);
	margin-left: -3px;
	margin-right: 6px;
}

.CCP_PredictorTiles.series > .display-strip p
{
	text-align: center;
}

.CCP_PredictorTiles.series .predictions p.name
{
	transform: translateX(2px);
}

.CCP_PredictorTiles.series .predictions p.prize
{
	transform: translateX(-2px);
}


.CCP_PredictorTiles p.name
{
    font-family: FuturaPTCondBoldOblique;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.CCP_PredictorTiles p.prize
{
    margin: 0;
    color: #eee;
}

.CCP_PredictorTiles .text-color-light
{
	color: #fff;
}

.CCP_PredictorTiles .text-color-dark
{
	color: #303030;
}

/* Hide text content only for draw prediction */
.CCP_PredictorTiles .size-draw > p.name
{
    aspect-ratio: 1;
    overflow: hidden;
    text-indent: -999em;
    background: transparent var(--ui-drawcross) center no-repeat;
    background-size: contain;
}

@media (max-width: 480px)
{
    .CCP_PredictorTiles p.name
    {
        font-size: 20px;
    }

    .CCP_PredictorTiles p.prize
    {
        font-size: 11px;
        padding: 0 4px;
    }

    .CCP_PredictorTiles .size-draw > p.name
	{
		width: 50px;
	}

	.CCP_PredictorTiles .predictions p.name
    {
        padding: 0 5px 0 8px;
    }

	.CCP_PredictorTiles .selection p
    {
        padding: 0 10px;
    }

	.CCP_PredictorTiles.series .predictions p.prize
    {
        flex-direction: column;
        justify-content: center;
    }
}

@media (min-width: 481px)
{
    .CCP_PredictorTiles p.name
    {
        letter-spacing: -.025em;
    }

    .CCP_PredictorTiles p.prize
    {
        font-size: 12px;
        letter-spacing: -.015em;
    }
}

@media (min-width: 481px) and (max-width: 767px)
{
	.CCP_PredictorTiles .display-strip p
	{
		padding: 0 10px;
	}

    .CCP_PredictorTiles .size-sX4 > p.name,
    .CCP_PredictorTiles .size-sX5 > p.name
    {
		font-size: 24px;
	}

    .CCP_PredictorTiles p.name
    {
        font-size: 24px;
    }
}

@media (min-width: 768px)
{
	.CCP_PredictorTiles .display-strip p
	{
		padding: 0 15px;
	}

    .CCP_PredictorTiles .size-sX4 > p.name,
    .CCP_PredictorTiles .size-sX5 > p.name
    {
		font-size: 24px;
	}

    .CCP_PredictorTiles p.name
    {
        font-size: 28px;
    }
}


/*
Tile spec
*/

/* Tile types */
.CCP_PredictorTiles .fluid
{
    position: absolute;
    height: 100%;
}

.CCP_PredictorTiles .fluid:not(.size-info)
{
    width: var(--tile-computed-width);
}

.CCP_PredictorTiles .static
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 0 1 var(--tile-computed-width);
}


/* Tile stripes */
.CCP_PredictorTiles .fluid::before,
.CCP_PredictorTiles .fluid:not(.size-info)::after
{
	content: "";
	display: block;
	position: absolute;
}

.CCP_PredictorTiles .fluid:not(.size-info)::before
{
	inset: 0 0 auto;
	height: var(--player-strip-height);
	background-color: var(--team-color);
}

.CCP_PredictorTiles .fluid::after
{
	inset: auto 0 0;
	height: var(--prize-strip-height);
	opacity: .85;
	background-color: var(--team-accent);
}

.CCP_PredictorTiles .fluid.size-info
{
    width: 0;
    right: 0;
}

.CCP_PredictorTiles .fluid.size-info::before
{
	inset: 0;
	background-color: #303030;
	transform-origin: left bottom;
}


/* Tile sizes */
.__CCPBody .size-home,
.__CCPBody .size-away
{
	--tile-computed-width: calc(var(--tile-standard-width) - var(--tile-gap));
}

.__CCPBody .size-draw
{
	--tile-computed-width: var(--tile-draw-width);
}

.__CCPBody .size-pair,
.__CCPBody .size-sX3,
.__CCPBody .size-sX4,
.__CCPBody .size-sX5
{
	--tile-computed-width: var(--tile-equal-width);
}

.__CCPBody .size-info
{
	--tile-computed-width: var(--tile-info-width);
}


/* Tile positions */
.CCP_PredictorTiles .fluid.size-home
{
	left: 0;
}

.CCP_PredictorTiles .fluid.size-draw
{
	left: var(--tile-standard-width);
}

.CCP_PredictorTiles .fluid.size-away
{
	left: calc(100% - var(--tile-computed-width));
}

.CCP_PredictorTiles:not(.standard) .fluid
{
	left: calc(var(--tile-equal-spacing) * var(--tile-index));
}


/* Tile misc settings */
.CCP_PredictorTiles .fluid.size-info.status-locked::before
{
	background-color: #21650e;
}

.CCP_PredictorTiles .fluid.size-info.status-error::before
{
	background-color: #a20025;
}


/* Tile content alignment */
.CCP_PredictorTiles .static:last-child /* Right-hand option on standard/pair view */
{
	align-items: flex-end;
}

.CCP_PredictorTiles .size-draw, /* Draw option on standard view */
.CCP_PredictorTiles.series .predictions > .static /* All tiles on series view */
{
	align-items: center;
}

.CCP_PredictorTiles.no-input
{
    pointer-events: none;
}


/* Progress Messaging */
.CCP_MessagePanel
{
    display: flex;
    position: absolute;
    box-sizing: border-box;
    width: var(--tile-computed-width);
    height: 100%;
    right: 0;
    align-items: center;
}

.CCP_MessagePanel h4
{
    margin: 0 0 5px;
    font-family: FuturaPTCondBoldOblique;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
}

.CCP_MessagePanel p
{
    margin: 0;
    line-height: 1.3;
    color: #ccc;
}

.CCP_MessagePanel > .message
{
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.CCP_MessagePanel > .error
{
    padding: 0 10px;
    align-items: center;
    text-align: center;
}

@media (max-width: 480px)
{
	/* .CCP_MessagePanel > .message.confirm + .CCP_SVGBox,
	.CCP_MessagePanel > .message.progress > p
    {
        display: none;
    } */
}

@media (max-width: 767px)
{
	.CCP_MessagePanel
	{
		padding-left: 10px;
		gap: 5px;
	}

	.CCP_MessagePanel h4
    {
        font-size: 16px;
    }

    .CCP_MessagePanel p
    {
        font-size: 12px;
    }
}

@media (min-width: 768px)
{
	.CCP_MessagePanel
	{
		padding-left: 20px;
	    gap: 10px;
	}

	.CCP_MessagePanel h4
    {
        font-size: 18px;
    }

    .CCP_MessagePanel p
    {
        font-size: 12px;
    }
}


/* Progress SVGs */
.CCP_SVGBox
{
    display: grid;
    position: relative;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin-right: 10px;
}

.CCP_SVGBox > *
{
    width: 100%;
    height: 100%;
    grid-column: 1;
    grid-row: 1;
}

.CCP_SVGBox circle,
.CCP_SVGBox polyline
{
    fill: none;
    stroke-dasharray: 100;
}

.CCP_SVGBox > .progress-bar .backing
{
    stroke: #1e5846;
}

.CCP_SVGBox > .progress-bar .fill
{
    stroke: var(--bet365-green);
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 350ms ease-out;
}

.CCP_SVGBox > .tick-mark *
{
    stroke: #fff;
}

.CCP_SVGBox > .warning *
{
    stroke: #666;
}

/* Progress bar specifics */
.CCP_SVGBox > span
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: FuturaPTCond;
    line-height: 1;
    color: #fff;
}

@media (max-width: 480px)
{
    .CCP_MessagePanel > .message.progress > p
    {
        display: none;
    }
}

@media (max-width: 599px)
{
    .CCP_SVGBox
    {
        width: 60px;
    }

	.CCP_SVGBox.standard
    {
        font-size: 16px;
    }

    .CCP_SVGBox.big-multi
    {
        font-size: 13px;
    }

    .CCP_MessagePanel > .message.confirm + .CCP_SVGBox
    {
        display: none;
    }
}

@media (min-width: 600px)
{
    .CCP_SVGBox
    {
        width: 70px;
    }

	.CCP_SVGBox.standard
    {
        font-size: 18px;
    }

    .CCP_SVGBox.big-multi
    {
        font-size: 14px;
    }
}




/* Upcoming CTA bar with timer */
.CCP_UpcomingCTA {
    display: flex;
    box-sizing: border-box;
    position: relative;
    width: var(--core-ui-width);
    height: var(--core-ui-height);
    margin: 5px auto 0;
    padding: 0 20px;
    isolation: isolate;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

.CCP_UpcomingCTA::before
{
	content: "";
	display: block;
	position: absolute;
	inset: 0 0 0 -4px;
	background-color: #303030;
	transform: skewX(-7deg);
    transform-origin: right bottom;
	z-index: -1;
}

.CCP_UpcomingCTA > *
{
    margin: 0;
    color: #fff;
}

.CCP_UpcomingCTA > p
{
    text-align: center;
}

@media (max-width: 480px)
{
	.CCP_UpcomingCTA > h3
	{
	    font-size: 24px;
	}

	.CCP_UpcomingCTA > p
	{
	    font-size: 12px;
	}
}

@media (min-width: 768px)
{
	.CCP_UpcomingCTA > h3
	{
	    font-size: 28px;
	}

	.CCP_UpcomingCTA > p
	{
	    font-size: 14px;
	}
}


.CCP_TimerBar
{
    position: absolute;
    inset: auto 0 0;
    width: calc(var(--core-ui-width) + 4px);
    height: 1px;
    margin: auto;
    transform: translateX(-2px);
}

.CCP_TimerBar::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: 0;
    background-color: var(--bet365-green);
}


/* Buttons */
.CCP_ButtonBar
{
    display: grid;
    width: var(--core-ui-width);
    margin: 0 auto;
}

.CCP_ButtonBar > .button-strip
{
	display: flex;
	grid-area: 1 / 1;
}

.CCP_ButtonBar > .button-strip.predict
{
	justify-content: space-between;
	gap: 10px var(--tile-gap);
	padding-bottom: 30px;
}

.CCP_ButtonBar > .button-strip:not(.predict)
{
	justify-content: center;
}

.CCP_ButtonBar .size-home,
.CCP_ButtonBar .size-away,
.CCP_ButtonBar .size-draw
{
	width: var(--tile-computed-width);
}

@media (max-width: 480px)
{
	.CCP_ButtonBar > .button-strip
	{
		flex-direction: column;
		gap: 10px var(--tile-gap);
		justify-content: flex-start !important;
		align-items: center;
	}

	.CCP_ButtonBar > .button-strip > div
	{
		width: 100%;
	}
}

@media (min-width: 481px)
{
	.CCP_ButtonBar > .button-strip.predict > div
	{
		width: var(--tile-computed-width);
	}
}

.CCP_ButtonBar .box-hide
{
    opacity: 0;
    pointer-events: none;
}


.CCP_Button
{
    display: flex;
    position: relative;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;

    padding: 0 15px;
    height: 32px;
    outline: none;
    border-radius: 2px;

    font: 700 12px var(--system-font);
    line-height: 1;
    text-align: center;

    background-size: 300% auto;
    background-position: 100% 0;
    background-repeat: no-repeat;
    transition: background-position .3s cubic-bezier(.45, 0, .55, 1), color .3s cubic-bezier(.45, 0, .55, 1);

    cursor: pointer;
}

.CCP_Button:not(.secondary)
{
    border: none;
    background-color: #8affab;
    background-image: linear-gradient(90deg, #fff 33%, #26ffbe 67%, #8affab);
    color: var(--button-text);
}

.CCP_Button.secondary
{
    border: 1px solid var(--bet365-green);
    background-color: #2229;
    background-image: linear-gradient(90deg, var(--bet365-green) 33%, transparent 67%);
    color: var(--bet365-green);
}

.CCP_ButtonBar > .button-strip.predict .CCP_Button
{
	margin: 0 auto;
}

.CCP_Button.generic
{
	margin: 0 auto;
	padding: 0 2em;
	width: fit-content;
}

.CCP_IconButton
{
    display: block;
    position: absolute;
    box-sizing: content-box;
    aspect-ratio: 1;
    top: 5px;
    right: 2px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: 'FuturaPTWebBook';
    line-height: 0;
    color: var(--bet365-green);
    cursor: pointer;
}

.CCP_IconButton.close
{
    width: 0.5em;
    font-size: 30px;
}

@media (max-width: 480px)
{
	.CCP_Button
	{
		width: 100%;
		max-width: 240px;
	}
}

.CCP_Button, .CCP_Link
{
    -webkit-tap-highlight-color: transparent;
}


/*
 * Legal footer
 */
.CCP_FooterBar
{
    display: flex;
    position: relative;
    justify-content: space-between;
    flex-direction: row-reverse;
    max-width: 870px;
    margin: -1.5em auto 0;
    padding: 0 10px;
    font-size: 11px;
    gap: 1em;
}

@media (max-width: 480px)
{
	.CCP_FooterBar
	{
		flex-direction: column;
		justify-content: center;
	}

	.CCP_FooterBar > span,
	.CCP_FooterBar > a
	{
		margin: 0 auto;
	}
}

.CCP_Legal,
.CCP_Link
{
    box-sizing: border-box;
    margin: 0;
    font-family: var(--system-font);
    line-height: 1;
}

.CCP_Legal
{
    color: var(--legal-color);
}

.CCP_Link
{
    color: var(--bet365-green);
    text-decoration: none;
}


.CCP_ScheduleTableContainer
{
    --table-base-padding: 10px;
    --bet365-green: #28ffbb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 20px auto 50px;
    max-width: 600px;
}

.CCP_InlineTableHeader
{
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 25px;
    line-height: 26px;
    color: var(--bet365-green);
    text-align: center;
}

.CCP_ScheduleTableContainer > p.no-history
{
    margin: 0 auto;
    padding: 1em;
    border: 1px solid #666;
    border-radius: 2px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #ccc;
}

.CCP_ScheduleTable
{
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font: 12px var(--system-font);
    color: #ccc;
    line-height: 18px;
    cursor: default;
}

.CCP_ScheduleTable thead
{
    position: sticky;
    top: 0;
    text-align: left;
    color: #e4e4e4;
    z-index: 1;
    border-bottom: 1px solid #444;
}

.CCP_ScheduleTable tr:not(:last-of-type)
{
    border-bottom: 1px solid #444;
}

.CCP_ScheduleTable tr > *
{
    padding: 3px var(--table-base-padding) 5px;
}

.CCP_ScheduleTable tr > :last-child
{
    text-align: right;
}

.CCP_ScheduleTable td
{
    vertical-align: top;
}

.CCP_ScheduleTable span
{
    display: block;
}

.CCP_ScheduleTable span + span
{
    margin-top: 3px;
}

.CCP_ScheduleTable tr.hilited
{
    color: var(--bet365-green);
    background-color: #2a2a2a;
}


/* UI Transitions */
.CCP_PredictorTiles
{
	--tile-resolve-in-motion: 200ms ease-in-out;
	--tile-shift-over-motion: 200ms 100ms ease-in-out;
}

.CCP_PredictorTiles .item-selected
{
	left: 0 !important;
	width: calc(var(--tile-selected-width) - var(--tile-gap)) !important;
}

.__CCPBody .item-show-info
{
	width: var(--tile-computed-width) !important;
}

.CCP_PredictorTiles .item-hidden
{
	transform: scale(.8);
	opacity: 0;
}

.CCP_PredictorTiles .item-resolve
{
    width: 0 !important;
}

.__CCPBody .item-text-hidden,
.__CCPBody .intro-item-hidden
{
	opacity: 0;
	pointer-events: none;
}

.__CCPBody .item-box-slide
{
    transform: translateY(calc(-100% - 5px));
}


.CCP_Motion-TextExit
{
	transition: opacity 100ms linear;
}

.CCP_Motion-TextEnter
{
	transition: opacity 100ms 250ms linear;
}

.CCP_Motion-BoxEnter
{
	transition: opacity 100ms 350ms linear;
}

.CCP_Motion-BoxSlide
{
    transition: transform 350ms ease-in-out;
}

.CCP_Motion-Exit
{
	transition: transform 150ms 50ms linear,
                opacity 150ms 50ms linear;
}

.CCP_Motion-Enter
{
	transition: transform 150ms 150ms linear,
                opacity 150ms 150ms linear;
}

.CCP_Motion-ShiftOver
{
	transition: left var(--tile-shift-over-motion), width var(--tile-shift-over-motion);
}

.CCP_Motion-ShiftBack
{
	transition: left 200ms 50ms ease-in-out, width 200ms 50ms ease-in-out;
}

.CCP_Motion-ResolveIn
{
	transition: left var(--tile-resolve-in-motion), width var(--tile-resolve-in-motion);
}

.CCP_Motion-ResolveOut
{
	transition: left var(--tile-shift-over-motion), width var(--tile-shift-over-motion);
}

.CCP_Motion-Colour::before
{
	transition: background-color 200ms linear;
}


/* Animations */
.CCP_Anim-SVGDrawStroke .draw-stroke
{
    stroke-dashoffset: 100; /* SVG file forces pathLength to 100 */
}

.CCP_Anim-SVGOuterRing .ring
{
    animation: CCP_KF-SVGDrawStroke 350ms 250ms ease-in-out forwards;
}

.CCP_Anim-SVGOuterRing .backing
{
    animation: CCP_KF-SVGDrawStroke 350ms ease-in forwards;
}

.CCP_Anim-SVGTickMark .tick
{
    animation: CCP_KF-SVGDrawStroke 200ms 550ms ease-out forwards;
}

.CCP_Anim-TimerBar::after
{
    animation: CCP_KF-TimerFill var(--timer-bar-duration) linear;
}


@keyframes CCP_KF-SVGDrawStroke
{
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes CCP_KF-TimerFill
{
    to { width: 100%; }
}


/* Media queries */
@media (hover:hover)
{
    .CCP_Button:hover
    {
        background-position: 0;
    }

    .CCP_Button.secondary:hover
    {
        color: var(--button-text);
    }

    .CCP_IconButton.close:hover
    {
        color: var(--button-hover);
    }

    .CCP_Link:hover
    {
        color: var(--button-hover);
    }

    .CCP_ScheduleTable tbody > tr:not(.hilited):hover
    {
        background-color: #2a2a2a;
    }
}


@media (max-width: 480px)
{
    .__CCPBody
    {
        transition: height 350ms ease-in-out;
    }

    /* Progress bar */
    .CCP_MessagePanel p.update-interval
    {
        display: none;
    }



    /* Text view */
    .CCP_TextView
    {
        width: 90vw;
    }

    .CCP_TextView .CCP_ButtonBar.generic
    {
        margin-top: 8vw;
    }

    .CCP_TextView h3,
    .CCP_TextView p
    {
        font-size: 3.8vw;
    }
}

@media (min-width: 481px)
{
	.CCP_PredictorTiles > .text-strip.predictions p.size-draw,
	.CCP_PredictorTiles.series > .text-strip.predictions p
	{
		white-space: nowrap;
	}
}

@media (min-width: 481px) and (max-width: 767px)
{
    .CCP_Button.confirm
    {
        width: 35vw;
        max-width: 200px;
    }

    .CCP_ButtonBar.predict .CCP_Button
    {
        max-width: 236px;
    }


    /* Text view */
    .CCP_TextView
    {
        width: 80vw;
    }

    .CCP_TextView h3,
    .CCP_TextView p
    {
        font-size: clamp(12px, 2.5vw, 14px);
    }
}

@media (min-width: 481px)
{
    /* Text content */
	.CCP_PredictorTiles .size-sX4 > p.name,
    .CCP_PredictorTiles .size-sX5 > p.name
    {
		font-size: 24px;
	}

    .CCP_PredictorTiles p.prize
    {
        font-size: 12px;
        letter-spacing: -.015em;
    }

    /* Buttons */
	.CCP_ButtonBar > .button-strip.predict
	{
		--predict-button-margin: 50px;
	}

    .CCP_Button.confirm
    {
        width: 200px;
    }

    .CCP_ButtonBar > .button-strip:not(.predict)
    {
        gap: 20px;
    }

    .CCP_ButtonBar > .button-strip.predict .CCP_Button
    {
        min-width: 80px;
    }

    /* Text view */
    .CCP_TextView
    {
        width: 550px;
    }

    .CCP_TextView h3
    {
        font-size: 24px;
    }

    .CCP_TextView p
    {
        font-size: 14px;
    }
}


/*
 * Preloader; retain at bottom of file
 */
.__CCPBody.preloading
{
    visibility: hidden;
}

.CCP_PreloadOverlay
{
    display: flex;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.CCP_PreloadOverlay > .bar-outer
{
    position: relative;
    width: 50%;
    max-width: 350px;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
    background-color: var(--preload-outer);
}

.CCP_PreloadOverlay .bar-inner
{
    width: 0;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background-color: var(--bet365-green);
    transition: width 350ms ease-out;
}

.CCP_PreloadOverlay .bar-number
{
    margin-top: 5px;
    text-align: right;
    font: 10px var(--system-font);
    line-height: 1;
    color: var(--bet365-green);
}