/* Define the dimensions of the timer container box */
.cd-timer {
    /* Uses CSS variables to allow dimensions to be easily changed */
    
	--cd-size: 190px;   /* Default diameter of the (semi-transparent) countdown circle */
    --cd-border: 4px;   /* Default width of the (opaque) border */
    --cd-opacity: 0.3;  /* Default opacity */

    width: var(--cd-size);
    height: var(--cd-size);
    margin: auto;	/* to keep things centred */
}
/* Set the container position to relative to ensure that */
/* the actual timer components are always correctly placed */
.cd-timer-container {
    position: relative !important;
}

/* The text containiner for showing the remaining time */
.cd-timer .cd-seconds {
    /* Allow the font to scale proportionately when the timer dimensions are changed */
    /* font-size: calc(0.3 * var(--cd-size)); */
    /* The div containing the seconds label needs position: absolute so it can be centred vertically */
    font: normal normal 200 123px/18px 'Montserrat', sans-serif;
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;	/* centre horizontally */
    line-height: var(--cd-size); /* centre text vertically (container height) */
    z-index: 1; /* Ensure the counter appears over the pie chart */
}

/* The containers which will be animated to show the countdown progress */
/* slice is the transparent wedge, outline is the solid border surrounding it */
.cd-slice, .cd-outline {
    position: absolute;
    width: var(--cd-size);
    height: var(--cd-size);
	clip-path: inset(0 50% 0 0);
}
/* We want the inner panel to be semi-transparent */
.cd-slice {
    opacity: var(--cd-opacity);
}
/* Set the background to white in order to make the panel slightly "hazy" */
.cd-slice .cd-pie {
    background-color: white;
}
/* Set the outline background to transparent because we only want to show the border */
.cd-outline .cd-pie {
    background-color: transparent;
    border: var(--cd-border) solid #000000;
}
.cd-pie {
    width: var(--cd-size);
    height: var(--cd-size);
}
/* Allow the entire pie chart to be shown while we still have more than 50% of the timer to run */
.cd-gt50 {
	clip-path: inset(0 0 0 0);
}
/* Define the pie chart itself */
.cd-pie {
    /* The pie divs need position: absolute to ensure that they overlap, providing the *illusion* of a countdown timer. */
    position: absolute;
    clip-path: inset(0 0 0 50%);
    -moz-border-radius: calc(var(--cd-size) / 2);
    -webkit-border-radius: calc(var(--cd-size) / 2);
    -o-border-radius: calc(var(--cd-size) / 2);
    border-radius: calc(var(--cd-size) / 2);
}
/* The "filled" pie chart is used to show the left half of the display, which we still have more than 50% remaining */
.cd-pie.cd-fill {
    -moz-transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
}