/*@import 'legacy.css';*/

/* overwriting default Fore relevance styles */
/*
[nonrelevant]{
    display: none;
}
[relevant]{
    display: inline-block;
}
*/
[inert]{
    height: 0 !important;
    width: 0;
}
@media print {
    .badge{
        display: none;
    }
}
@media screen {
    #view{
        margin:0;
        padding:0;
        width: 100vw;
        height: 100vh;
    }
    [nonrelevant]{
        display: none !important;
    }
    details.info {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: rgba(255,255,255,0.95);
        padding: 1rem;
        left: 0;
    }
    /* mobile styles first */

    button {
        color: white;
        background: var(--paper-grey-500);
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
        font-weight: 700;
        transition: all 0.2s ease-in-out;
        width: auto;
        height: auto;
    }
    .drag-over{
        background: var(--paper-grey-300);
    }
    fieldset {
        border-radius: 0.25rem;
        padding: 0.3rem;
        margin: 0.25rem 0;
        border-color: var(--paper-grey-200);
    }
    .horizontal{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .horizontal fx-control{
        display: inline-block;
    }
    img.icon{
        width: 1rem;
        height: 1rem;
        margin:0 0.25rem;
    }
    #issue-report-link{
        position: absolute;
        bottom: 0;
        left: 1rem;
        margin:0;
    }
    #issue-report-link a{
        text-decoration: underline;
        font-size: smaller;
    }

    input[type="search"]:focus{
        outline: none;
    }

    .print{
        display: none;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    input,
    select,
    textarea {
        display: block;
        padding: 0.5rem 0.2rem;
        font-size: clamp(1rem, 1vw, 1vh);
        width: 100%;
        border-radius: 5px;
        background: transparent;
        /*border:none;*/
        border-radius: 0;
        /*border-bottom: thin solid black;*/
        /*border-top: thin solid var(--paper-grey-500);*/
        border: thin solid var(--paper-grey-200);
        border-radius: 0.3rem;
        color: black;
    }
    .smallerButton{
        font-size: 1rem;
    }
    header.mainheader{
        position: fixed;
        width: 100%;
        z-index: 12;
        padding-left: 4rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-top: 10px;
        font-size: 2rem;
        background: white;
        color:#444444;
        height: 4rem;
        top:0;
        left:0;
    }
    h1{
        position: fixed;
        width: 100%;
        z-index: 12;
        padding-left: 4rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-top: 10px;
        font-size: 2rem;
        background: white;
        color:#444444;
        height: 4rem;
        top:0;
        left:0;
    }

    h1 > fx-trigger {
        font-size: 0.8rem;
    }

    h2 {
        color: white;
        padding: 0 0 2rem 0;
    }
    header{
        font-size: 1.5rem;
        padding:1rem 0;
    }
    details.info summary{
        padding: 0.2rem 0;
        color:var(--paper-orange-900);
    }
    details.info header{
        font-size: 1.2rem;
    }
    details.info li,p{
        line-height: 2;
    }

    details.info p{
        margin:1rem 0;
    }


    input,
    select,
    textarea {
        display: block;
        padding: 0.5rem 0.2rem;
        font-size: clamp(1rem, 1vw, 1vh);
        width: 100%;
        border-radius: 5px;
        background: transparent;
        border: none;
        border-radius: 0;
        border-bottom: thin solid black;
    }

    ul{
        list-style: none;
        padding: 0;
    }

    /* Fore overwrites */
    /*
    h1, fx-fore h1 {
        padding-left: 4rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        color: white;
        margin-top: 10px;
        font-size: 2rem;
        background: transparent;
        height: 5rem;
    }
    */

    .isEmpty.visited .widget{
        background: inherit;
    }


    [required]:after{
        content:'';
    }
    .submit-validation-failed [required].isEmpty fx-alert{
        display: block;
    }
    .submit-validation-failed fx-control.isEmpty label::after {
        content: ' please provide a value';
        color: red;
    }
    fx-alert {
        color: var(--paper-orange-500);
        font-size: 1.2rem;
        padding: 0.5rem 0;
    }

    fx-fore.is-open h1 {
        padding-left: 1rem;
    }

    fx-fore .menu-open-true h1 {
        padding-left: 1rem;
    }


    fx-case {
        position: relative;
        opacity: 0;
        transition: all .6s;
        display: block;
        height: 0;

    }

    fx-case.selected-case {
        opacity: 1;
        /*animation: fadein 1s forwards;*/
        height:fit-content;
    }

    #view > fx-case.selected-case{
        width: 100vw;
        height: 100vh;
    }

    fx-control {
        display: block;
        position: relative;
        white-space: inherit;
        padding:0.25rem 0;
    }

    main > fx-control {
        margin: 0;
        display: inline-block;
    }


    fx-control .ui{
        position: fixed;
        top:0;
        overflow:auto;
        scroll-padding-top:5rem;
    }


    fx-group {
        padding: 1rem;
        border-radius: 0.5rem;
        /*margin-bottom: 1rem;*/
        display: block;
    }
    fx-group.filter-section{
        padding: 0;
        margin-top: 1rem;
    }
    fx-group.neutral{
        padding: 0;
        margin:0;
    }

    fx-dialog{
        display: none;
    }

    fx-dialog.show {
        position: absolute;
        z-index: 100;
    }

    fx-dialog.show .dialog-content {
        padding-top: 4rem;
    }

    fx-dialog.show .dialog-content input {
        border-bottom: thin solid;
        border-radius: 0;
    }

    fx-dialog header {
        color: white;
        font-size: 1.4rem;
        position: absolute;
        width: 100%;
        background: var(--paper-light-blue-700);
        left: 0;
        top: 0;
        padding: 1rem;

    }

    fx-dialog .action {
        margin-top: 2rem;
    }


    fx-fore {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        transition: opacity 0.6s;
    }

    fx-fore.fx-ready {
        opacity: 1;
    }

    fx-fore fx-fore {
        width: auto;
        height: auto;
    }


    fx-switch {
        width: 100%;
        display: block;
        padding: 0.5rem;
        border-radius: 0.5rem;
        border-top-right-radius: 1.4rem;
    }

    fx-repeatitem {
        display: block;
        width: 100%;
        padding: 0.3rem;
    }

    fx-repeatitem {
        padding: 0;
        margin-bottom: 2rem;
    }

    fx-repeatitem section {
        position: relative;
        /*max-width: 800px;*/
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 100%;
    }
    fx-var{
        display: none;
    }

    /* general page specific */
    /* should be renamed - used for the '+' icon to switch to detail view in projects, clients, users */
    .add-trigger {
        position: absolute;
        top: 8px;
        right: 18px;
        z-index: 20;
    }

    .add-trigger a, add-trigger button {
        font-size: 4rem;
        font-weight: 300;
        text-decoration: none;
        color: var(--paper-blue-500);
        border: none;
        outline:none;
    }

    .add-trigger.detail {
        transition: all .3s;
        transform: rotate(45deg);
    }


    .actions fx-trigger {
        margin: 0;
    }

    .addEntry {
        position: relative;
        display: block;
    }

    .addEntry > * {
        width: 100%;
    }
    .addBtn {
        display: inline-block;
        text-align: right;
        margin-top: -4.5rem;
    }

    .addBtn::before {
        /*content:'add user';*/
        content: attr(label);
    }

    .addBtn a {
        text-decoration: none;
        font-size: 4rem;
        color: var(--paper-green-500);
        backdrop-filter: blur(5px);

    }

    /*
    .existsolutions{
        border:var(--paper-orange-500) 1px solid;
    }
    .jinntec{
        border: var(--paper-blue-500) 1px solid;
    }
    */

    .saveBtn{
        button{
            padding:1rem;
            font-size: 1.2rem;
        }
    }
    .saveButton {
        position: absolute;
        bottom: 1rem;
    }

    .saveButton button {
    }

    fx-trigger.readonly button {
        background: var(--paper-grey-500);
    }

    .badge {
        background: var(--paper-blue-500);
        border-radius: 1rem;
        padding: 0.2rem 0.4rem;
        text-align: center;
        color: white;
        width: 100%;
        white-space: nowrap;
        font-size: 0.8rem;
    }


    /* client */
    .client {
        width: 100%;
        font-size:2rem;
    }

    .client fx-output #value {
        width: 100%;
    }

    .company{
        position: absolute;
        right: 0;
        top:0;
        font-size:0.8rem;
        /*background: var(--paper-grey-500);*/
        color:var(--paper-grey-900);
        padding:0.2rem 0.4rem;
    }
    .company.jinntec{
        /*background:var(--paper-blue-500);*/
    }

    .current-user {
        font-size: 0.9rem;
        display: inline-block;
    }



    /* ##### reports ##### */
    /* ##### reports ##### */
    /* ##### reports ##### */
    /* ##### reports ##### */
    #report header.record-summary.text-info{
        font-size: 1.2rem;
        color:var(--paper-deep-orange-a400);
    }
    [ref='justmine']{
        display: flex;
        align-items: center;
    }
    [ref='justmine'] label{
        margin-left:0.5rem;
    }

    details, details * {
        font-size: 0.9rem;
    }

    .dimmed {
        color: var(--paper-grey-500);
        font-size: 1rem;
    }

    .duration label {
        width: 100%;
    }

    .duration fx-control {
        display: inline-block;
        width: 5rem;
    }

    .duration fx-control input {
        text-align: center;
    }

    .durations {
        margin-bottom: 1rem;
        margin-top: -3rem;
        text-align: right;
        height: 1.5rem;
        display: flex;
        justify-content: initial;
        /*width: 100vw;*/
        overflow-y: hidden;
        overflow-x: auto;
        padding: 3rem 0;

    }

    .durations fx-trigger {
        padding: 0;
        border-radius: .3rem;
        margin-right: 0.5rem;
        background: rgba(255,255,255,0.2);
        height:1.75rem;
        display: flex;
        align-items: center;
    }
    .durations fx-trigger:hover {
        background: rgba(255,255,255,0.4);
    }


    .durations fx-trigger a {
        color: var(--paper-light-blue-100);
        font-size: 0.9rem;
        text-decoration: none;
        padding:0.25rem 0.5rem;
    }

    .deselector{
        position: absolute;
        top:2rem;
        right:0;
    }
    .deselector button {
        border-radius: 50%;
        width: 1.1rem;
        height: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        padding: 0.5rem;
        font-weight: 300;
        text-align: center;
    }

    .day-entries {
        font-size: 1.2rem;
        background: transparent;
        padding: 0;
    }



    .full-width {
        width: 100%;
    }

    fx-repeat {
        padding: 1rem 0 0;
    }

    fx-trigger {

    }


    fx-trigger.addUserButton button {
        margin-top: 0;

    }

    fx-trigger .deleteRecord {
        color: var(--paper-red-500);
    }

    fx-trigger button {
        padding: 0.5rem;
        color: white;
        background: var(--paper-light-blue-700);
        /*font-size: larger;*/
        font-weight:300;
    }

    fx-trigger.main {
        margin-top: 2rem;
        display: block;
        text-align: right;
    }

    .is-open, .menu-open-true {
        transition: all 0.6s;
    }


    [name="list"] .actions {
        display: none;
    }

    label {
        display: block;
        color: black;
        font-weight: 500;
        white-space: nowrap;
    }

    .mainBtn {
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease-in-out;
        width: auto;
        height: auto;
        opacity: 1;
    }

    .mainBtn button {
        font-size: 1.2rem;
        padding: 1rem 2rem;
        color: white;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        font-weight: 500;
        transition: all 0.2s ease-in-out;
    }

    .mainButton {
        font-size: 1.2rem;
        padding: 1rem 2rem;
        color: white;
        border: none;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
        font-weight: 500;
        transition: all 0.2s ease-in-out;
        width: auto;
        height: auto;
        opacity: 1;
    }

    .one-line {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
    }

    .one-line-two-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;

    }

    .outer {
        height: calc(100% - 3rem);
        /*overflow: auto;*/
    }

    .users #r-users label {
        display: none;
    }
    .users #r-users fx-repeatitem:first-child label {
        display: inline-block;
    }
    .users #r-users fx-repeatitem{
        margin-bottom: 0;
    }

    #reports{
        .filter{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap:1rem;
            padding: 2rem;

            fx-control{
                width: 9rem;
            }
        }
        header.record-summary{
            font-size: 0.8rem;
            padding: 0;

        }
        header.record-summary *{
            margin:0;
            padding:0.4rem;
        }
        header.record-summary:nth-child(3){
            margin-bottom:1rem;
        }
        #hour-reports{

            fx-control{
                display: inline-block;
                padding-right: 1rem;
            }
            input, select, label{
                /*color:white;*/
            }
        }

        #output{
            width: 60rem;
            height: 40rem;
            margin: 0 auto;
            background: white;
            margin-block-start: 5rem;

            textarea{
                height: 100%;
            }

            #dialog-content{
                display: grid;
                grid-template-rows:auto 4rem;
                height: 100%;
                grid-gap:1rem;
                padding:1rem;
            }

            fx-trigger{
                text-align: center;
            }
        }
        #progress.project-progress{
            height: 0.25rem;
            padding: 0;

            &> div{
                height: 0.25rem;
            }
            &hover,
            &hover > div{
                height: 0.5rem;
            }
        }
        .project-progress{
            position: absolute;
            left: 0;
            bottom:0;
            height:0.125rem;
            display: inline-block;
        }

        #reportselector {
            margin:0 1rem;
        }

        .report-actions {
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: end;

            a,
            a:link,
            a:visited
            {
                color:white;
                margin-right: 1rem;
            }

            button{
                padding: 0.5rem;
                font-size: smaller;
            }
        }
        td{
            white-space: nowrap;
            vertical-align: top;
        }
        td:nth-child(1){
            width: 5rem;
        }
        td:nth-child(2){
            width: 12rem;
            overflow: hidden;
        }
        td:nth-child(3){
            width: 5rem;
        }
        td:nth-child(4) {
            width: 6rem;
        }
        td:nth-child(5){
            white-space: normal;
            max-width: 40vw;
        }
        .ui{
            max-width:100%;
        }

        .year{
            color:white;
        }

    }





    #searching{
        border-radius: 0;
    }
    #searching .dialog-content{
        opacity: 0;
        padding-top:1rem;
        /*background: rgba(255,255,255,0.7);*/
        /* From https://css.glass */
        background: rgba(255, 255, 255, 0.4);
        border-radius: 16px;
        box-shadow: 0 0 2rem rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    #searching.show .dialog-content{
        opacity: 1;
        transition:opacity 0.8s;
        color:white;
    }

    #progress.project-progress{
        padding:0.1rem;
        overflow: hidden;
        width: 100%;
        font-size: 0.8rem;
        background: lightgrey;
    }
    .project-progress > div{
        height:0.3rem;
        border-radius: 0.5rem;
    }
    .project-progress .red,
    .project-progress.red
    {
        background: var(--paper-red-500);
    }
    .project-progress .orange,
    .project-progress.orange{
        background: var(--paper-orange-500);
    }
    .project-progress .green,
    .project-progress.green
    {
        background: var(--paper-green-500);
    }


    r-project-progress{

    }
    .projectByProgress{
        list-style: none;
        padding: 0;
        max-width:40rem;
        margin:0 auto;
    }
    .projectByProgress progress{
        width: 100%;
    }
    .projectByProgress label{
        font-size: 1.2rem;
    }
    .projectByProgress label span{
        float:right;
        font-size: 1.5rem;
    }


    .projectByProgress .lost progress{
        filter:hue-rotate(150deg) brightness(0.5);
    }
    .projectByProgress .critical progress{
        filter:hue-rotate(150deg) brightness(2.5);
    }
    .projectByProgress .overdue progress{
        filter:hue-rotate(150deg);
    }




    /*
    #report td:nth-child(5),
    #report td:nth-child(6),
    #report td:nth-child(7) {
        display: none;
    }
    */

    /*
    #report td{
        white-space: nowrap;
        vertical-align: top;
    }
    */

    /*
    #report td:nth-child(1){
        width: 5rem;
    }
    */
    /*
    #report td:nth-child(2){
        width: 12rem;
        overflow: hidden;
    }
    #report td:nth-child(3){
        width: 5rem;
    }
    #report td:nth-child(4) {
        width: 6rem;
    }
    #report td:nth-child(5){
        white-space: normal;
        max-width: 40vw;
    }
    */

    /*
    #report header.record-summary{
        font-size: 0.8rem;
        padding: 0;

    }
    */
    /*
    #report header.record-summary *{
        margin:0;
        padding:0.4rem;
    }
    #report header.record-summary:nth-child(3){
        margin-bottom:1rem;
    }
    */
    /*
    #report #progress.project-progress{
        height: 0.25rem;
        padding: 0;
    }
    */
    /*
    #report #progress.project-progress > div{
        height: 0.25rem;
    }
    */
    /*
    #report #progress.project-progress:hover,
    #report #progress.project-progress:hover > div{
        height: 0.5rem;

    }
    */

    .record-summary .commercial span {
        background: var(--paper-orange-500);
    }

    .record-summary .internal span {
        background: var(--paper-grey-500);
    }


    .record-summary span {
        background: var(--paper-blue-500);
        padding: 0.1rem;
        color: white;
        border-radius: 1rem;
        display: inline-block;
    }
    .record-summary div{
        padding: 0.1rem;
    }
    /*
    #report header.record-summary div:nth-child(1){
        font-size: 1.5rem;
    }
    */

    section {
        background: white;
        padding: 1rem;
        border-radius: 0.5rem;
        /*max-width: 800px;*/
    }

    section#report {
        margin-top: -1rem;
    }

    section#report h2 {
        color: black;
    }

    section#report section {
        padding: 0;
        max-width: inherit;
    }

    #report thead td {
        font-weight: 700;
    }

    #report thead td:nth-child(6), #report thead td:nth-child(7) {
        width: 4rem;
    }

    #report td{
        font-size: 0.8rem;
        vertical-align: middle;
        position: relative;
    }
    #report td:first-child {
        white-space: nowrap;
    }
    #report td a,
    #report td a:link,
    #report td a:visited {
        color: var(--paper-blue-700);
        text-decoration: none;
    }
    #summary-report td{
        font-size:1rem;
        vertical-align: bottom;
    }
    #summary-report .project-row td{
        background: var(--paper-blue-500);
        color:white;
    }
    #summary-report td:nth-child(1){
        width:14rem;
    }
    #summary-report progress{
        width:100%;
    }



    section.users {
        padding: 0;
        margin-top: 2rem;
        position: relative;
        margin-bottom:10rem;
    }
    section.users h2{
        color:black;
    }

    section.users fieldset {
        padding: 1rem;
    }

    select {
        width: 100%;
    }

    th {
        font-size: 1.2rem;
        padding: 0.5rem;
        text-align: left;
    }

    .subgroup {
        background-color: white;
        border: 1px rgba(255, 255, 255, 0.4) solid;
        border-bottom: 1px rgba(40, 40, 40, 0.35) solid;
        border-right: 1px rgba(40, 40, 40, 0.35) solid;
        /*border-top-right-radius: 1.5rem;*/
        /*padding-right: 3rem;*/
        padding-top:1rem;
        /*margin-bottom:8rem;*/
        overflow:auto;
    }

    #r-clients{
        display: block;
    }

    #r-clients fx-control {
        width: auto;
    }
    #r-clients > fx-repeatitem{
        border:thin solid #dddddd;
        border-radius: 0.5rem;
    }

    #r-clients span {
        font-size: 1rem;
        font-weight: 300;
        border-radius: 1rem;
        background: var(--paper-blue-500);
        display: inline-block;
        text-align: center;
        margin-right: 1rem;
        padding: 0.5rem;
        color:white;
    }

    #r-clients input {
        background: rgba(255, 255, 255, 0.4);
    }

    #r-clients input:hover {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
    }

    #r-clients input:focus {
        border: white;
    }

    #r-clients section{
        display: block;
    }

    #r-client-projects fx-repeatitem{
        display: inline-block;
        width: auto;
    }
    #r-client-projects a,
    #r-client-projects a:link,
    #r-client-projects a:visited{
        color:white;
    }
    #r-clients .active-false {
        background: var(--paper-grey-300);
    }
    #r-clients .active-false a,
    #r-clients .active-false a:link,
    #r-clients .active-false a:visited{
        color:var(--paper-grey-700);
    }

    #r-clients .existsolutions .active-true {
        background: var(--paper-orange-500);
    }


    #r-records {
        width: 100%;
        display: block;
        background: transparent;
        border:none;
    }

    #r-records fx-repeatitem {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: var(--paper-blue-grey-50);
        color: var(--paper-grey-900);
        margin: 1rem 0;
        border-radius: 0.5rem;
        padding: 1rem;

    }

    #r-records fx-repeatitem a,
    #r-records fx-repeatitem a:link,
    #r-records fx-repeatitem a:visited{
        color:black;
    }


    progress[inactive='true'] {
        display: none;
    }

    #project-table {
        max-width: 60rem;
        margin:0 auto;
    }
    #project-table tr:nth-child(odd){
        background: white;
    }

    #multi-select{
        display: flex;

        fx-trigger{
            border-radius: 50%;
            button {
                padding: 0.2rem;
                border-radius: 50%;
                padding: 0.25rem 0.3rem;
                font-size: 0.75rem;
            }
        }
        fx-repeat{
            display: inline-block;
        }
        fx-repeatitem{
            margin:0;
            display: inline-block;
            padding:0 0.25rem;
            width: auto;
        }
    }

    #calc-time{
        position: absolute;
        bottom:-1.2rem;
        right:-1rem;
    }

    #r-records fx-repeatitem .shortInfo .note::before {
        content: "\201C";
        font-size: 3rem;
        margin-top: 1rem;
    }

    tbody td {
        padding: 0.5rem;
    }

    tbody tr:nth-child(odd) {
        background: var(--paper-grey-100);
    }

    .t-edit, .t-delete {
        padding: 0.1rem 0;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }

    textarea {
        width: 100%;
    }

    fx-group.ui {
        position: fixed;
        transition: all 0.2s ease-in-out;
        width: 100%;
        font-size: 1rem;
        height: calc(100vh - 4rem);
        padding: 1rem;
        /*max-width:64rem;*/
        top:0;
        scroll-padding-top:5rem;
        margin-top:4rem;
        overflow: auto;
    }

    main {
        overflow: auto;
    }

    .user-summary details{
        margin-bottom:0.5rem;
    }
    .user-summary summary{
        border:thin solid var(--paper-blue-500);
        background: var(--paper-blue-500);
        border-radius: 0.5rem;
        padding:0.5rem;
        color:white;
    }
    .user-summary span{
        font-size: 1.2rem;
        min-width:10rem;
        display: inline-block;
        text-align: right;
    }
    .user-summary header{
        padding:1rem;
    }

    .user-summary li{
        display: grid;
        grid-template-columns: repeat(4,10rem);
    }
    .user-summary li span{
        margin-left:.5rem;
    }

    .user-summary ul{
        list-style: none;
        margin-left:1rem;
        padding: 0.5rem 0;
    }
    .user-summary li{
        font-size: 1.2rem;
    }
    .user-summary .sum span{
        padding: 0 1rem;

    }
    .user-summary span:first-child{
        text-align: left;
    }
    .user-summary .totalMins,
    .user-summary .totalHours,
    .user-summary .totalDays{
        text-align: right;
    }

    fx-items {
        width: 100%;
    }
    fx-items span,
    fx-items span *{
        display: inline-block;
    }
    fx-items input{
        width:1.2rem;
    }
    /* matching checkboxes */
    /*
    [name='detail'] fx-trigger {
        display: block;
        position: relative;
    }
    */

    .projects .external-link{
        padding: 1rem 0;
        display: block;
    }
    .projects .external-link[nonrelevant]{
        display: none;
    }
    #r-periods{
        background: var(--paper-blue-100);
        padding: 0;
    }

    [name='detail'] fx-trigger.add-trigger {
        position: absolute;
        top: -1rem;
        right: 0.5rem;
        transform: rotate(45deg);

    }

    [value-prop=checked] label,
    [value-prop=checked] input {
        display: inline-block;
        width: fit-content;
    }

    [readonly] .widget{
        background: var(--paper-grey-300);
    }
    /* advancing to bigger resolutions */
    /* advancing to bigger resolutions */
    /* advancing to bigger resolutions */
    @media only screen and (min-width: 64rem) {
        /*
        .addEntry {
            display: flex;
            flex-wrap:wrap;
            position: relative;
            max-width: 800px;
            padding: 2rem 2rem 2rem 1rem;
        }
        */

        .actions {
            position: relative;
            background: transparent;
            padding: 0;
            border: none;
            width: 100%;
        }

        .duration fx-control {
            display: inline-block;
            /*width: auto;*/
        }

        .durations {
            /*margin-top: -3.5rem;*/
            justify-content: end;
            display: flex;
            flex-direction: row;
            margin:0;
            margin-top:-5rem;
        }

        #c-form{
            height: auto;
        }
        /*
        fx-case,
        fx-case *{
            visibility: hidden;
        }
        fx-case.selected-case,
        fx-case.selected-case *
        {
            visibility: visible;
        }
        */

        #c-form.selected-case {
            height: 28rem;
        }

        fx-case.selected-case .actions {
            width: 100%;
        }

        fx-trigger {
            align-self: center;
            /*text-align: right;*/
            right: 0;
            width: auto;
            cursor: pointer;
        }

        fx-trigger button {
            cursor: pointer;
        }
        fx-trigger[readonly]{
            filter:brightness(0.8);
        }

        .projects #r-users fx-repeatitem {
            display: flex;
            justify-content: space-between;
            border-radius: 0.5rem;
            padding: 0.5rem;
        }

        [ref='date'] {
            width: fit-content;
            display: inline-block;
        }

        .ui {
            height: calc(100vh - 4.5rem);
        }

        .ui.users{
            max-width: 50rem;
        }

        .ui.users fx-repeatitem{
            display: flex;
            gap:1rem;
            /*grid-template-columns: repeat(4,1fr) 1rem;*/
        }
        .ui.users .deletebtn{
            transform:scale(.5);
        }

    }

    .icon-button {
        width: 48px;
        height: 48px;
    }

    analog-clock[size="36"] {
        border-radius: 50%;
        border: 1px solid #000;
    }
    analog-clock::after{
        content:attr(aria-label);
    }

    .hand{
        width:2px;
    }
}

@media only screen and (max-width: 64rem) {
    /*
    .stopwatch{
        margin-top:-3.5rem;
    }
    */
    #reports td:nth-child(5),
    #reports td:nth-child(7){
        display: none;
    }
}
@media only screen and (max-width: 45rem) {
    #reports td{
        display: inline-block;
    }
    #reports td:nth-child(5),
    #reports td:nth-child(6),
    #reports td:nth-child(8)
    {
        display: none;
    }
    .record-summary span {
        margin:0.2rem 0;
        font-size: 1rem;
    }
    fx-trigger{
        display: block;
    }

    #version{
        display: none;

        /*
        position: fixed;
        left: 1rem;
        bottom: 1rem;
        color: black;
        z-index: 101;
        font-weight:300;
        */
    }

}

.pulse {
    animation: pulse-animation 2s infinite;
}
.pulseStrong {
    animation: pulse-strong-animation 2s infinite;
}
@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 0 0.75rem rgba(0, 0, 0, 0);
    }
}

@keyframes pulse-strong-animation {
    0% {
        box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0.75rem rgba(0, 0, 0, 0);
    }
}

.move{
    animation: move 2s;
    transform-origin: center center;
    position: fixed;
}
.smallbutton{
    font-size:0.8rem;
}
.smallbutton button{
    font-size: inherit;
    padding: .2rem;
}
.save-message{
    background: var(--paper-green-500);
}
.toastify.on.warning{
    background: orange;
}
svg.icon{
    width: 24px;
    height: 24px;
}
/*
#version {
    position: fixed;
    right: 1.5rem;
    bottom: 1rem;
    color: black;
    z-index: 101;
    font-weight: 300;
    background: rgba(255,255,255,0.75);
    padding: 0.5rem;
    border-radius: 0.25rem;
}
*/


.copiedMessage {
    display: none;
    color: green;
    margin-left: 10px;
    transition: opacity 0.3s ease;
}
.copiedMessage.show {
    display: inline;
}

@keyframes move {
    0% {
        transform: translateY(0);
        transform: translateX(0);
        width:100%;
        height: 3.5rem;
        width: 3.5rem;
    }
    100% {
        transform:translateY(-5000px);
        transform:translateX(-4000px);
        /*opacity: 0.3;*/
        position: fixed;
        width:640px;
        height: 3.5rem;
        width: 3.5rem;

        /*top:80px;*/
    }
}
.highlight{
    animation: target-fade .6s;
}

.underline {
    background-color: dodgerblue;
    display: inline-block;
    height: 1px;
    left: 0;
    position: absolute;
    transform: scale(0, 1);
    transition: all 0.2s linear;
    width: 100%;
}
#project-search .widget,
#project-search .widget:focus
{
    border-bottom:1px solid;
    outline:none;
}
input[type="search"]:focus + .underline {
    transform: scale(1);
}


@keyframes target-fade {
    0% {
        background-color: rgb(1, 87, 155, .4);
    }
    100% {
        background-color: rgb(1, 87, 155, 0);
    }
}