.action-buttons{
    margin:0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 1rem 0;
}
.edit-actions{
    fx-trigger {
        margin-right: 1rem;
    }
}
.stopwatch {
    background: var(--paper-blue-500);
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border:none;

    img{
        border:thin solid darkblue;
        border-radius: 50%;
    }
}
#track{

    fx-group.ui .subgroup{
        max-width:40rem;
    }

    label{
        font-size: 0.8rem;
    }
}
#track .addEntry{
    display: flex;
    flex-wrap:wrap;
    position: relative;
    max-width: 800px;
    padding: 1rem;
    align-items: end;
    gap:0.2rem;
}


#track #date,
#track .duration{
    width: calc(50% - 1rem);
    display: inline-block;
    /*padding: 0;*/
}
#track #dateInput{
    max-width: 10rem;
}
#track .duration{
    /*white-space: nowrap;*/
}
fx-alert{
    padding: 0;
    margin:0;
}
#duration.visited ~ [ref=minutes].invalid fx-alert{
    display: block;
}

.submit-validation-failed [invalid] fx-alert{
    display: block;
}
/*
#track input,
#track select,
#track textarea {
    border: thin solid var(--paper-grey-400);
    border-radius: 0.3rem;
    background: white;
}
*/
#track .duration [ref="minutes"]{
    width: 100%;
    padding:0;
    margin:0;
    width: 100%;
    display: block;
}

#track [ref="minutes"] input {
    display: none;
}

#track fx-group.edit-actions.edit-false {
    display: none;
    visibility: hidden;
}

#track progress{
    width: 100%;
}
#track label[for='progress']{
    text-align: right;
    font-size: 0.8rem;
}
#track fx-control fx-group{
    padding: 0;
    margin:0;
}
#track [ref='note']{
    textarea{
        /*border-collapse: var(--paper-grey-300);*/
    }
}

stop-watch.running{
    color: green;
    font-weight: bold;
    animation: pulse1 1s infinite;
}
.shortInfo.paused {
    background: rgba(255,255,255,0.4);;
}
.watch-project{
    font-weight: 700;
}
#r-stopwatches fx-repeatitem{
    background: rgba(255,255,255,0.2);
    padding:0;
    border-radius:0.5rem;
    color:white;
    margin-bottom: 0.75rem;
}

#r-stopwatches .shortInfo {
    padding:0.5rem 1rem;

    position: relative;
    font-size: 1.1rem;
    font-weight: 300;
    display: flex;
    flex-wrap: wrap;
    vertical-align: center;
    align-items: center;
    justify-content: space-between;
    /*
    display: grid;
    grid-template-columns: 1fr 1fr 7rem;
    align-items: center;
    grid-gap:0.5rem;
    */
    border-radius: 0.5rem;
    padding:0.25rem 1rem;
    border-top:thin solid rgba(255,255,255,0.5);
    border-left:thin solid rgba(255,255,255,0.5);
    border-right:thin solid rgba(0,0,0,0.8);
    border-bottom:thin solid rgba(0,0,0,0.8);
    max-height: 4rem;
}
#r-stopwatches
.shortInfo span{
    display: flex;
    gap:1rem;
    align-items: center;
}
#r-stopwatches .shortInfo fx-trigger,
#r-stopwatches .shortInfo fx-trigger img{
    height:2rem;
    width: 2rem;
}

.shortInfo .note {
    display: block;
    font-size: 1rem;
}

@keyframes pulse1 {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}