/* GENERAL */

body {
    font-family: sans-serif;
    font-size: 2em; 
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


input {
    -webkit-touch-ctextout: all;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}


.screen {
    position: fixed;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
    color: white;
}

.toolbar {
    position: absolute;
    bottom:0px;
    height:1.5em;
    width:100%;
    padding:0.7em;
    background-color: #311b92;
}

.toolbar .cf-button.right {
    position: absolute;
    right: 2em;
}

.cf-button {
    margin-left:0.3em;
    display:inline-block;
    text-align:center;
    min-width:0.7em;
    padding:0.3em;
    border-style:none;
    border-radius: 1em;
    background-color: #d500f9;
    color:white;
    cursor:pointer;
    box-shadow: black 0.2em 0.2em 0.2em;
}

.cf-button:hover {
    box-shadow: white 0em 0em 0.5em;
}

.cf-button.toggled {
    box-shadow:none;
    border:white 2px solid;
}

.cf-button.disabled {
    background-color: #777;
    color: #555;
    box-shadow: black 0px 0px 0px;
    cursor:not-allowed;
}





/* COUNTDOWN SCREEN */
#countdown-screen {
    background-color: #673ab7;
    display:none;
}

/* SETUP SCREEN */

#setup-screen {
    background-color: #673ab7;
    display:none;
}

.setup-panel {
    margin:0;
    border:0;
}

.setup-table {
    border-spacing: 1em;
}


.setup-line {
    padding: 25px;
    border: grey 2px solid;
}


.setup-line .input-subgroup {
    white-space: nowrap;
}

.setup-line input {
    font-size:1em;
    width:5em;
    text-align:right;
}

.total-group {
    text-align: right;
    padding-top:1em;
}

.invalid-input {
    box-shadow: inset 0 0 25px #f44336;
}

.setup-panel>div {
    margin:25px;
}



/* RUN SCREEN */

#run-screen {
}

#main-panel {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}

.rep-block {
    position: absolute;
    border-style: none;
}

.rep-block-background {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: #673ab7;
    opacity:0.2;
}

.block-gauge {
    position: absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:0%;
}

.active-gauge {
    animation-name: activeGaugePulse;
    animation-duration: 0.4s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    -webkit-animation-name: activeGaugePulse;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
}

.passive-gauge {
    background-color: #880e4f;
}

.resting {
    animation-name: restingColorPulse;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    -webkit-animation-name: restingColorPulse;
    -webkit-animation-duration: 2s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
}

.exercising {
    background: linear-gradient(40deg, #fefcea 0%,#f1da36 100%);
}


@keyframes restingColorPulse {
    from {  background-color: #b3e5fc; }
    to {    background-color: #4fc3f7; }
}
@-webkit-keyframes restingColorPulse {
    from {  background-color: #b3e5fc; }
    to {    background-color: #4fc3f7; }
}

@keyframes activeGaugePulse {
    from {  background-color: #880e4f; }
    to {    background-color: #c2185b; }
}

@-webkit-keyframes activeGaugePulse {
    from {  background-color: #880e4f; }
    to {    background-color: #c2185b; }
}



/* COUNTDOWN DIALS */

.dial {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

.dial line {
    stroke:white;
    stroke-width:5px;
    stroke-linecap: round;
}