:root {
    --color-almost-black: rgb(34, 34, 34);
    --color-almost-black-alpha: rgba(34, 34, 34, .1);
    --color-grayish: rgb(102, 114, 125);
    --color-grayish-alpha: rgba(102, 114, 125, .1);
    --color-active-white: rgb(222, 222, 222);
    --color-almost-white: rgb(238, 238, 238);
    --color-new-white: rgb(249, 249, 249);
    --color-orange: rgb(255, 121, 59);
    --color-orange-alpha: rgba(255, 121, 59, .2);
    --color-green: rgb(35, 176, 0);
    --color-green-alpha: rgba(35, 176, 0, .1);
    --color-red: rgb(220, 21, 3);
    --color-red-alpha:  rgb(220, 21, 3, .1);
    --color-blue: rgb(0, 111, 215);
    --color-blue-alpha: rgba(0, 111, 215, .1);
 
    --color-zendesk-private: #fff6d9;
    --color-zendesk-private-border: #ffc83d;

    --default-spacing: 1rem;
    --default-row-height: 3rem;
}

@font-face {
    font-family: "Inter";
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/fonts/Inter-Bold.woff2") format("woff2");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::before, *::after { box-sizing: inherit; }

body, textarea, pre {
    font-size: .875rem;
    font-family: Inter, Helvetica, Arial, sans-serif;
    color: var(--color-almost-black);
}

footer {
    border-top: 1px solid var(--color-active-white);
    padding: .25rem var(--default-spacing); 
    background-color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    a:hover { 
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
h4 { font-size: .925rem; }
h5 { font-size: .9rem; }

a {
    display: block;
    transition: all 50ms ease-in;
}

button {
    width: max-content;
    font-size: .875rem;
    padding: .5rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 50ms ease-in; 
    background: transparent;

    img {
        filter: grayscale(1) contrast(0);
    }

    &:hover {
        background-color: var(--color-almost-white);
        img { filter: grayscale(0) contrast(1); }
    }
}

#loading {
    position: absolute;
    top: 1px;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 1rem;
    font-weight: bold;
    width: max-content;
    padding: .3rem .5rem;
    border: 1px solid var(--color-almost-black);
    background-color: var(--color-almost-white);
    z-index: 2;
}

.outside {
    background-color: var(--color-new-white);
}

/* login start */
.login {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem 2rem;
    margin-inline: auto;
    top: 15vh;
    position: relative;
    background-color: white;
    border: 1px solid var(--color-almost-white);
    border-radius: 12px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.1);
    width: 550px;

    h1 {
        font-size: 2.25rem;
        letter-spacing: -.2rem;

        img { width: 32px; }
    }

    a {
        font-size: 1rem;
        padding: 1rem;
        text-decoration: none;
    }

    form {
        

        input, button {
            width: 100%;
        }

        input {
            font-size: 1rem;
            border: 1px solid var(--color-active-white);
            border-radius: 8px;
            padding: .6rem 1rem;
            margin-top: .5rem;
            margin-bottom: 1.5rem;
        }
    
        button[type="submit"] {
            border-radius: 8px;
            background-color: var(--color-almost-white);
            padding-block: 1rem;
            font-size: .925rem;
            font-weight: bold;
        
            &:hover { background-color: var(--color-active-white); }
        }
    }


    .error {
        font-size: 1.25rem;
        color: red;
    }
}


.gsi-material-button { /* generated from  https://developers.google.com/identity/branding-guidelines */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: var(--color-almost-white);
    background-image: none;
    border: 1px solid var(--color-active-white);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--color-almost-black);
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 1rem;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    min-width: min-content;
  }
  
  .gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
  }
  
  .gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  
  .gsi-material-button .gsi-material-button-contents {
    font-family: 'Roboto', arial, sans-serif;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }
  
  .gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
  }
  
  .gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
  }
  
  .gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
  }
  
  .gsi-material-button:not(:disabled):active .gsi-material-button-state, 
  .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
  }
  
  .gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  }
  
  .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
  }
/* login end */


nav {
    background-color: white;
    border-bottom: 1px solid var(--color-active-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1;

    div {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    h1 {
        font-size: 1.25rem;
        line-height: 1.25rem;
        letter-spacing: -.08rem;
        padding-bottom: .125rem;
    }

    img {
        width: 16px;
    }

    button {
        font-size: 1rem;
        color: slategray;
    }

    #profile-button {
        border-radius: 50%;
        padding: .25rem;
        width: 40px;
        height: 40px;
        
        img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            filter: unset;
        }
    }

    .profile-options {
        display: block;
        position: absolute;
        top: 56px;
        right: 1rem;
        padding: .25rem;
        background-color: white;
        border: 1px solid var(--color-active-white);
        border-radius: 10px;
        box-shadow: 0 5px 10px -2px rgba(0,0,0,.25);

        button { 
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .5rem; 
            padding-inline: 1rem;
            font-size: .925rem;
        }
    }

    .hidden { display: none; }
}

.users, .clients, .teams {
    border-collapse: collapse;
    text-wrap: nowrap;
    width: 100%;

    .wrappable {
        text-wrap: wrap;
    }

    tbody tr {
        cursor: pointer;
        &:hover{ background-color: var(--color-almost-white); }
    }

    .deactivated {
        cursor: unset;
        background: repeating-linear-gradient(-45deg, white, white 10px, var(--color-new-white) 10px, var(--color-new-white) 20px);
        &:hover{ background-color: unset; }
    }

    th, td { padding: .5rem 1rem; margin-block: .25rem; }
    th { text-align: left; }
    td { border-block: 1px solid var(--color-almost-white); }

    img {
        width: 16px;
        height: 16px;
    }

    button {
        display: block;
        margin-left: auto;
        
        &:hover { background-color: var(--color-active-white); }
    }

    
    a {
        width: max-content;
        padding: .35rem;
        border-radius: 50%;
        text-decoration: none;

        &:hover {
            background-color: var(--color-active-white);
        }
    }
}

.form-hat {
    background-color: var(--color-new-white);
    padding: .5rem;

    .closer {
        margin-left: auto;
        display: block;
    }
}

#user-form, 
#client-form {
    width: 100%;
    padding: 3rem 5rem;

    h2 { margin-bottom: 2rem; }

    label {
        display: block;
        margin-block: 2rem 1rem;
        color: var(--color-grayish);
    }
    
    input, select {
        width: 100%;
        font-size: 1rem;
        padding-block: .25rem;
        border: none;
        border-bottom: 1px solid var(--color-active-white);
        
        &:focus {
            outline: none;
            border-bottom: 1px solid black;
        }
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    button[type="submit"] {
        display: block;
        margin-top: 2rem;
        font-size: .925rem;
        font-weight: bold;
        border: 1px solid var(--color-active-white);
    }

    span {
        margin-block: 1rem;
        display: block;
        position: relative;
        top: -2.65rem;
        left: 4.5rem;
        color: var(--color-green);
    }
}

.error { color: var(--color-red); }

/* User page start */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-wrap: nowrap;
    font-size: .825rem;
    padding: .25rem 1rem;
    background: var(--color-new-white);
    border-bottom: 1px solid var(--color-active-white);

    a {
        width: max-content;
        text-decoration: none;
        color: black;

        &:hover {
            text-decoration: underline;
            text-underline-offset: 2px;
        }
    }
    
    button {
        width: 32px;
        height: 32px;
        padding: .5rem;
        border-radius: 50%;

        img {
            width: 16px;
            height: 16px;
        }

        &:hover { 
            background-color: var(--color-active-white);
        }
    }

    button[id='grouper'] {
        width: unset;
        height: unset;
        border-radius: 8px;
    }

    .active { 
        background-color: var(--color-active-white);
        img { filter: grayscale(0) contrast(1); }
    }
}

.workspace {
    --nav-height: 57px;
    --breadcrumb-height: 41px;
    --footer-height: 23px;

    width: 100%;
    height: calc(100vh - var(--nav-height) - var(--breadcrumb-height) - var(--footer-height));
    max-height: calc(100vh - var(--nav-height) - var(--breadcrumb-height) - var(--footer-height));
    overflow-y: scroll; 
}
/* User page end */


section{
    margin-block: 3rem;
    &:not(.hidden):nth-child(1) { margin-top: 0; }
    &:not(.hidden):nth-last-child(1) { margin-bottom: 0; }

    h2, h3, h4, h5 { 
        padding: 1rem; 
    
        button {
            width: 20px;
            height: 20px;
            padding: .25rem;
            margin-left: .5rem;
            border-radius: 50%;
            
            img {
                width: 12px;
                height: 12px;
            }
        }
    }
}

td:last-child {
    position:relative;
}

td > section {
    background-color: var(--color-almost-white);
    position: absolute;
    padding: .55rem 1rem;
    padding-left: 12rem;
    margin: 0;
    right: 0;
    top: 0;

    form {
        display: inline;
    }
}

td {
    button {
        color: slategray;
        font-size: small;
        border: 1px solid var(--color-almost-black-alpha);
        border-radius: 6px;
        padding: .15rem .5rem;

        &:hover {
            background: var(--color-active-white);
        }
    }
}


/* Profile page start */
.profile {
    margin-inline: 1rem;
    /* padding-inline: 1rem; */
    /* border: 1px solid var(--color-almost-white);
    border-radius: 12px; */
    width: 400px;

    h3 { 
        padding: unset;
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
            width: 32px;
            height: 32px;
            padding: .5rem;
            border-radius: 50%;
    
            &:hover { background-color: var(--color-active-white); }
        }
    }

    .details {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 1rem;
    }

    .group {
        margin-block: 1rem;
        label {
            display: block; 
            margin-bottom: .25rem; 
            font-weight: bold;
        }
    }

    img {
        width: 16px;
        height: 16px;
    }
}



/* Profile page end */



/* Zendesk Tickets List page start */
.ticket-stats {
    width: 100%;
    border-collapse: collapse;
    text-wrap: nowrap;

    th, td { 
        padding: .5rem 1rem;
        text-align: left; 
    } 
    td { border-block: 1px solid var(--color-almost-white); }

    .border-green { border-bottom: 1px solid var(--color-green); }
    .border-orange { border-bottom: 1px solid var(--color-orange); }
    .border-red { border-bottom: 1px solid var(--color-red); }
}

.footnotes-section { margin-inline: 1rem; }

.footnote {
    display: block;
    padding: .5rem 2rem;
}

.footnote::before {
    font-size: .75em;
    float: left;
    margin-left: -1.25em;
}

.asterisk::before { content: "*"; }
.dagger::before { content: "†"; }
.double-dagger::before { content: "††"; }

.tabs {
    display: flex;

    button {
        font-size: .925rem;
        padding: .75rem 1rem;
        text-wrap: nowrap;
        border-bottom: 2px solid transparent;
        border-radius: unset;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        color: slategray;
    }

    .tabbed {
        color: black;      
        border-color: currentColor;
        font-weight: bold;
    }
}

.stubs {
    width: 100%;
    border-collapse: collapse;
    
    tr {
        cursor: pointer;
        border-block: 1px solid var(--color-almost-white);
        &:hover { background-color: var(--color-almost-white); }
        
        td  {
            padding: .5rem 1rem;
            text-wrap: nowrap;
        }

        .subject{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
            max-width: 0;
        }
    }

    .saved {
        background-color: var(--color-green);
    }

    .hidden {
        display: none;
    }
}

.modal-content .stubs tr {
    cursor: unset;
    &:hover { background-color: unset; }
}

/* remove later */
.probe {
    .review {
        header {
            margin-block: 1rem;  
        }

        button {
            border: none;
            color: var(--color-red);
            margin-block: .5rem;
        }
    
        .entry {
            display: grid;
            grid-template-columns: max-content auto max-content;
            gap: var(--default-spacing);
            padding-block: var(--default-spacing);
            border-top: 1px solid var(--color-almost-white);
            border-bottom: 1px solid var(--color-almost-white);
            white-space: pre-wrap;

            h5 {
                margin-bottom: .5rem;
            }
    
            .remove {
                background: none;
                border: none;
                cursor: pointer;
                color: var(--color-red);
                padding: .5rem;
                border-radius: 2px; 
                font-weight: bold;
            }
    
            .remove:hover {
                background-color: var(--color-almost-white);
            }
        }
    }
}
/* Zendesk Tickets List page end */



/* Zendesk Ticket modal start */
/* inside modal-header */
.ticket-hat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-new-white);

    div {
        margin: .5rem;
        display: flex;
        gap: .25rem;
        align-items: center;
        font-size: small;
    }

    a {
        display: inline-block;
        color: unset;
    }
}

.closer {
    padding: .35rem;
    margin-right: .5rem;
    border-radius: 50%;
    font-size: .75rem;
    width: 24px;
    height: 24px;
    line-height: .75rem;

    &:hover {
        background-color: var(--color-active-white);
    }
}

.ticket-header {
    padding: 1rem;
    margin: unset;
}

.ticket-actions {
    margin-inline: .5rem;

    .action {
        font-size: .8rem;
        padding: .35rem;
        border-radius: unset;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        &:hover { background-color: var(--color-almost-white); }
    }
}

/* inside modal-content */
.details {
    border-bottom: 1px solid var(--color-almost-white);

    .stats {
        margin: 1rem;
    
        .metrics {
            display: flex;
            gap: 2rem;
            text-wrap: nowrap;
        
            .metric {    
                p { font-size: small; }
        
                .value {
                    margin-top: .5rem;
                    font-size: .875rem;
                    font-weight: bold;
                }
            }
        }
    }

    .harvest {
        margin: 1rem;
    
        table {
            width: 100%;
            border-collapse: collapse;
            margin-block: 1rem;
    
            caption {
                text-align: left;
                font-size: small;
                margin-block: .5rem;
                color: slategray;
            }
    
            th, td {
                padding: .5rem 1rem;
                text-wrap: nowrap;
            }
            th { text-align: left; }
            td { border-block: 1px solid var(--color-almost-white); }
            tr td:first-child, tr th:first-child { padding-left: 0; }
            tr td:last-child, tr th:last-child { padding-right: 0; }

            .truncate {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;
                max-width: 0;
            }
        }
    }
}

.ticket {
    .comment {
        padding: 1rem;
        border-bottom: 1px solid var(--color-almost-white);
    }
    
    a { /* for links within a ticket comment */
        display: unset;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */    
        white-space: -o-pre-wrap; /* Opera 7 */    
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
    
    img { max-width: 100%; } /* for images within a ticket comment */

    .author-img {
        width: 40px;
        height: 40px;
        object-fit: cover;
        border-radius: 50%;
        float: left;
        margin-right: 1rem;
    }

    .from-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-wrap: nowrap;
    }

    .zd-comment { 
        margin: 1rem 3.5rem;
        margin-right: 0;
        
        ol, ul {
            margin: .5rem 1.5rem;
        }

        .signature {
            hr, p { margin-block: 1rem; }
        }
    }

    .private {
        .zd-comment {
            background-color: var(--color-zendesk-private);
            border: 1px solid var(--color-zendesk-private-border);
            border-radius: 6px;
            padding: 1rem;
        }
    }

    .document-note-form {
        margin: 1rem;
        border: 1px solid var(--color-active-white);
        border-radius: 8px;
        overflow: hidden;

        textarea {
            width: 100%;
            overflow: hidden;
            resize: none;
            outline: none;
            border: none;
            padding: 1rem;
        }

        button {
            display: block;
            padding: .5rem;
            margin: .5rem;
            margin-left: auto; 
            border-radius: 50%;
            background-color: var(--color-almost-white);
            width: 32px;
            height: 32px;

            img {
                width: 16px;
                height: 16px;
            }

        }
    }
}

.status-icon {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    font-size: .75rem;
    font-weight: bold;
    border-radius: 9999px;
    width: max-content;
    padding: .25rem .75rem;
}
.zendesk-status-open {
    color: var(--color-red); 
    background-color: var(--color-red-alpha); 
}
.zendesk-status-pending,
.document-status-draft {
    color: var(--color-blue); 
    background-color: var(--color-blue-alpha); 
}
.zendesk-status-hold {
    color: var(--color-almost-black); 
    background-color: var(--color-almost-black-alpha); 
}
.zendesk-status-solved, 
.zendesk-status-closed,
.document-status-final {
    color: var(--color-grayish); 
    background-color: var(--color-grayish-alpha); 
}
/* Zendesk Ticket modal end */


/* Harvest page start */
.harvest-metrics, .zendesk-metrics {
    display: flex;
    gap: 2rem;
    text-wrap: nowrap;
    padding-top: 2rem;
    padding-inline: 1rem;

    p { font-size: small; }

    .value {
        padding-block: .5rem;
        font-size: 1.125rem;
        font-weight: bold;
    }
}

.time-entries, .time-reports, .ticket-reports {
    width: 100%;
    border-collapse: collapse;
    text-wrap: nowrap;

    th, td {
        text-align: left;
        padding: .5rem 1rem;
    }

    td { border-block: 1px solid var(--color-almost-white); }

    img {
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    .task-name, .subject-name, .notes {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: max-content;
    }

    .task-name {
        max-width: 200px;
    }

    .notes {
        width: 100%;
        max-width: 0;
    }

    a { display: inline-block; }
}

.harvest-status-icon {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    font-size: .75rem;
    font-weight: bold;
    border-radius: 9999px;
    width: max-content;
    padding: .25rem .75rem;
}
.harvest-status-ok { 
    color: var(--color-green);
    background-color: var(--color-green-alpha);
}
.harvest-status-not-found { 
    color: var(--color-grayish);
    background-color: var(--color-grayish-alpha);
}
.harvest-status-backdated { 
    color: var(--color-red);
    background-color: var(--color-red-alpha);
}
.harvest-status-no-ref { 
    color: var(--color-red);
    background-color: var(--color-red-alpha);
}
.harvest-status-bad-ref { 
    color: var(--color-red);
    background-color: var(--color-red-alpha);
}
/* Harvest page end */


/* Documents page start */
.document-hat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-new-white);

    p span {
        text-decoration: underline;
    }
    
    div {
        display: flex;
        align-items: center;
        gap: .25rem;
        margin: .5rem;
        width: max-content;
    }

    button:not(.closer) {
        color: slategray;
        font-size: small;
        border: 1px solid var(--color-almost-black-alpha);
        border-radius: 6px;
        padding: .15rem .5rem;
    }
}

.document-header {
    background-color: white;
    margin: unset;

    h3 {
        padding: 1rem;
    }
}

.document-details {
    display: flex;
    gap: .5rem;
    padding-inline: 1rem;
}

.modal-content .document-details {
        padding-block: 1rem;
}


.document-form {
    max-width: 500px;
    padding: 1rem;
    margin-inline: auto;
    margin-top: 5rem;

    .name {
        font-size: 1.125rem;
        padding: .6rem 1rem;
        border: 1px solid var(--color-active-white);
        border-radius: 9999px;
        width: 100%;
        background-color: var(--color-new-white);
    }

    .include {
        display: flex;
        gap: .25rem;
        align-items: center;
        margin: 1rem;
    }

    span {
        display: flex;
        align-items: center;
        gap: .25rem;
        font-size: .75rem;
        font-weight: bold;
        border: 1px solid var(--color-active-white);
        border-radius: 9999px;
        width: max-content;
        padding: .25rem .45rem;

        img {
            margin: unset;
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }
    }

    .group {
        margin: 1rem;
        
        div {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-block: .25rem;
        }
    }

    input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    label {
        display: block;
        margin-bottom: .5rem;
        
    }

    img {
        width: 12px;
        height: 12px;
        margin-right: 6px;
    }

    button[type="submit"] {
        margin: .5rem;
        font-size: .925rem;
        font-weight: bold;
        border: 1px solid var(--color-active-white);
    }

}

.zendesk-notes, .harvest-notes {
    tr td {
        text-wrap: unset;
        padding-block: 1rem;
    }

    tr .subject{
        white-space: unset;
        text-overflow: unset;
        overflow: unset;
        width: 100%;
        max-width: unset;
    }

    td pre {
        margin-top: .5rem;
        text-wrap: wrap;
    }
}

.finalize-form {
    button[type="submit"] {
        margin: 2rem 1rem;
        font-size: .925rem;
        font-weight: bold;
        border: 1px solid var(--color-active-white);
    }
}
/* Documents page end */

/* Changelog start */
section[aria-label="changelog"] {
    li { 
        padding-block: 2rem; 
        border-block: 1px solid var(--color-new-white);
    }

    h3 { padding-block: 0; }

    span {
        display: block; 
        padding: .5rem 1rem;
        font-size: .75rem; 
    }

    p { padding: .5rem 1rem; }
}

/* Changelog end */

.label {
    display: inline-block;
    border-radius: 2px;
    padding: .25rem .45rem;
    margin-right: .25rem;
}

.disclaimer {
    padding: 1rem 2rem;
    margin-block: 1rem;
    background-color: var(--color-orange-alpha);
    border-left: 4px solid var(--color-orange);

    & li {
        margin: .25rem 2rem;
    }
}

.icon-sticky::before {
    font-size: 1.25em;
    content: "\01F36F";
}

.icon-wave::before {
    font-size: 1.25em;
    content: "\01F44B";
}

dialog {
    border: var(--color-almost-black);
    border-radius: 2px;
    width: max-content;
    margin: auto;
    padding: 3rem;
}


/* scroll bar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-new-white); }
::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover { background: var(--color-active-white); }

/* misc */
.strike { text-decoration: line-through; }
.hidden, .inactive { display: none; }
.shadow { box-shadow: 0 3px 2px -2px rgba(0,0,0,.1); }
.secondary-text{ color: slategray; }
.truncate {             
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.hover-disable {
    &:hover {
        cursor: unset !important; 
        background-color: unset !important; 
        text-decoration: none !important;
    }
}

.bullet::after {
    content: "\2022";
    margin-left: .25rem;
}
.color-green::after { color: var(--color-green); }
.color-orange::after { color: var(--color-orange); }
.color-red::after { color: var(--color-red); }


/***** MODAL DIALOG ****/
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background-color: rgba(0,0,0,0.3);
	z-index: 1000;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display: flex;
	flex-direction: column;
	align-items: center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration: 25ms;
	animation-timing-function: ease;

    .modal-underlay {
        /* underlay takes up the entire viewport. This is only
        required if you want to click to dismiss the popup */
        position: absolute;
        z-index: -1;
        top:0px;
        bottom:0px;
        left: 0px;
        right: 0px;
    }
    
    .modal-overlay {
        /* Position visible dialog near the top of the window */
        margin-block: 3vh;
    
        /* Sizing for visible dialog */
        width: 80%;
        max-width: 800px;
        /* height: 100%; */
    
        
        /* Display properties for visible dialog*/
        display: flex;
        flex-direction: column;
        background-color: white;
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
        overflow: hidden;
        border-radius: 12px;
    
        /* Animate when opening */
        animation-name: zoomIn;
        animation-duration: 50ms;
        animation-timing-function: ease;

        .modal-header {
            border-bottom: 1px solid var(--color-almost-white);
        }
        
        .modal-content {
            flex-grow: 1;
            overflow-y: auto;
        }
    }
}

#modal.closing {
	animation-name: fadeOut;
	animation-duration:50ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	animation-name: zoomOut;
	animation-duration:50ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}

@media print {
    @page { size: portrait; }

    * { overflow: visible !important; }

    /* Hide all elements */
    #loading,
    #modal, 
    #bench,
    footer,
    button {
        display: none;
    }

    /* Show only #desk */
    #desk { 
        display: block;
        height: auto;

        tr { break-inside: avoid; }
    }

}