:root {
    --color-countdown: #a86e00;
    --color-countdown-bg: #402a00;
    --countdown-diameter: 5.5rem;
    --countdown-outer-ring: 1.75rem;
}

/* Rounding looks better but is not (fully) supported by most browsers other than firefox */
@-moz-document url-prefix() {
    :root {
        --countdown-diameter: round(5.5rem, 1px);
        --countdown-outer-ring: round(1.75rem, 1px);
    }
}

.timer-wrap {
    pointer-events: none;
    touch-action: none;
}

.building .timer-wrap {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.in-progress .school-wrap .time-left,
.selected-adventure.in-progress .time-left,
.in-construction .time-left {
    display: block;
}

.time-left:before,
.time-left:after{
    content:'';
    position:absolute;
}
.time-left{
    display:none;
    top:calc(50% + 1.5rem);
    left:50%;
    width:var(--countdown-diameter);
    height:var(--countdown-diameter);
    border-radius:50%;
    position:absolute;
    margin-top:calc(var(--countdown-diameter) * -0.5);
    margin-left:calc(var(--countdown-diameter) * -0.5);
    background-color:var(--color-countdown-bg);
}
.time-left:before{
    top:50%;
    left:50%;
    width:calc(var(--countdown-diameter) - var(--countdown-outer-ring));
    height:calc(var(--countdown-diameter) - var(--countdown-outer-ring));
    margin-top:calc((var(--countdown-diameter) - var(--countdown-outer-ring)) * -0.5);
    margin-left:calc((var(--countdown-diameter) - var(--countdown-outer-ring)) * -0.5);
    border-radius:inherit;
    background-color:var(--color-countdown);
    box-shadow: 0 0 0 0.2rem var(--color-countdown-bg);
}
.time-left .counter{
    width:100%;
    color:#fff;
    height:100%;
    font-size:1.5rem;
    font-weight:500;
    line-height:1.5rem;
    position:absolute;
    text-align:center;
    margin-top: 30%;
}
.time-left .counter:after{
    width:100%;
    display:block;
    font-size:1rem;
    font-weight:300;
    line-height:1rem;
    text-align:center;
    position:relative;
}
.sec:after{content:'sec';}
.min:after{content:'min';}
.hours:after{content:'hr';}
.details .sec:after{content:'\00a0sec.';}
.details .min:after{content:'\00a0min.';}
.details .hours:after{content:'\00a0hr.';}

.drop-target:not(.full):not(.in-progress) .time-left:before {
    background-color: #42b2bd;
}