/*  Timer Styles
    https://www.cssscript.com/circular-countdown-timer-javascript-css3/ 
*/
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

#button-timer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#timer-info {
    margin-top: .5rem;
}

.circle {
    position: relative;
    display: inline-block;
    margin-bottom: .5rem;
    -webkit-transition: opacity .3s ease-out, visibility .3s ease-out;
    -o-transition: opacity .3s ease-out, visibility .3s ease-out;
    transition: opacity .3s ease-out, visibility .3s ease-out;
}

.display-remaining-time {
    position: absolute;
    left: 50%;
    top: 48%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.e-c-base {
    fill: none;
    stroke: #B6B6B6;
    stroke-width: 4px
}

.e-c-progress {
    fill: none;
    stroke: black;
    stroke-width: 4px;
}

.e-c-pointer {
    fill: #FFF;
    stroke: black;
    stroke-width: 2px;
}

#e-pointer { 
    -webkit-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg);
}

.hide {
    display: none !important;
}

.hide-visually {
    visibility: hidden;
    opacity: 0;
}

.show-visually {
    visibility: visible;
    opacity: 1;
}

.no-js .hide-if-no-js {
    display: none !important;
}