.floating {
    position: absolute;
    top: 0;
    left: 0;
    outline: none;
    border: 0.5px solid rgba(0,0,0,0.05);
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    /* transform-origin: 0 0; */
    transform-origin: 100% 0; /* opens to the left now to save space */
    transform: scale(0);
    transition: transform 0.3s, opacity 0.3s;
}
.floating:focus-within, .floating:focus {
    opacity: 1;
    pointer-events: all;
    transform: none;
}
.floating .sub.menu {
    position: absolute;
    top: -0.15em;
    left: 100%;
    transform-origin: 0 0;
    transform: scaleX(0);
    transition: transform 0.3s;
    --hover-bg: lightgreen;
}

.menu {
    display: flex;
    flex-direction: column;
    font-size: 0.5rem;
    background: var(--menu-bg);
    border-radius: 0.2rem;
    --hover-bg: rgba(0,0,0,0.3);
}

.menu > *:not(.menu) {
    padding: 0.3em;
    margin: 0.2em;
    font-size: inherit;
    border-radius: inherit;
    border: none;
    background: transparent;
    transition: background 0.15s;
}
.menu > button:hover {
    background: var(--hover-bg);
}
.menu > .style-changer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1em;
}
.menu > .style-changer button {
    background: url('leftarrow.svg');
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: center;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    height: 1.5em;
    width: 1.5em;
    margin: 0.2em;
    border: none;
    background-color: inherit;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.31);
    border-radius: 1em;
    cursor: pointer;
}
.menu > .style-changer button:hover {
    background-color: lightblue;
}
/* .menu > .style-changer button:before {
    content: '';
    width: 0;
    height: 0;
    padding: 1.5em;
} */
.menu > .style-changer button ~ button {
    transform: rotateZ(180deg);
}
.menu > .style-changer span {
    display: flex;
    align-items: center;
    justify-content: center; 
    white-space: nowrap;
    position: relative;
    /* font-size: 0.6em; */
    width: 6em;
    height: 100%;
}
.menu > .style-changer:before {
    content: 'Style';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 1em;
    text-transform: uppercase;
    text-align: center;
    transform-origin: 50% 0;
    transform: scale(0.4) translateY(-40%);
    background-color: var(--menu-bg);
    border: 0.5px solid lightgrey;
    border-radius: 1em;
}
/* .menu > .style-changer span:before {
    content: 'Style';
    text-transform: uppercase;
    position: absolute;
    top: 0;
    padding: 0 1em;
    transform-origin: 50% 0;
    transform: scale(0.4) translateY(-40%);
    background-color: var(--menu-bg);
    border: 0.5px solid lightgrey;
    border-radius: 1em;
} */
.menu > .add {
    display: flex;
    align-items: center;
    justify-content: center;
    --hover-bg: rgba(0,0,0,0.2);
}
.menu > .add:after {
    content: '';
    position: absolute;
    right: 0.25em;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('rightarrow.svg');
    background-size: 1.3em;
    background-position: center;   
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.3s, transform 0.3s; 
}
.menu .add:hover:after, .menu .add.hover:after {
    opacity: 1;
    transform: translateX(0%);
}
.menu .delete:hover {
    color: red;
}

.page .dot-menu-btn {
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--btn-size);
    margin-left: 0.3em;
    margin-right: -0.6em;
    /* padding: 0.7em 0.4em; */
    padding: 0 0.3em;
    width: 0;
    height: 1em;
    border-radius: 0.3em;
    background-color: transparent;
    border: none;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.dot-menu-btn:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.1);
}
.dot-menu-btn:before {
    content: '\22EE';
    display: block;
    font-size: 0.85em;
}

.page .viewer-topbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: -1.8em;
    margin-bottom: 0;
}
.page .viewer-topbar button {
    font-size: 0.5em;
}
.page .viewer-topbar > span {
    text-align: center;
}
.page button {
    cursor: pointer;
    border-color: var(--trim);
    border-radius: 0.2em;
    font: inherit;
    color: inherit;
    background-color: transparent;
}
.page button.control {
    border: 0.125em solid;
    border: none;
    border-radius: 0.25em;
    font-weight: 400;
    padding: 0.4em 0.8em;
    opacity: 0.8;
    transition: opacity 0.2s, background 0.3s, color 0.3s;
}
.page button.control:hover {
    background-color: #65708041;
    opacity: 1;
}
.page button.control:active {
    /* background-color: rgba(0,0,0,0.3) !important; */
    color: black !important;
}


.page button.cancel {
    background-color: rgba(255, 0, 0, 0.055);
    color: red;
}
.page button.cancel:hover {
    background-color: rgba(255, 0, 0, 0.144);
}
.page button.cancel:active {
    background-color: rgba(255, 0, 0, 0.568);
    color: white;
}
.page button.save {
    background-color: #1a73e80C;
    color: #1a73e8;
}
.page button.save:hover {
    background-color: #1a73e841;
    opacity: 1;
}
.page button.save:active {
    background-color: #1a73e856;
    color: black !important;
}
.page button#revert {
    background-color: transparent;
    color: darkred;
}
.page button#revert:hover {
    background-color: rgba(0,0,0,0.1);
    color: red;
}


.page.view-minutes {
    background-color: lightpink;
    background-color: cornsilk;
    --trim: salmon;
}
.page.view-agenda {
    /* background-color: rgb(235 218 126 / 90%); */
    /* --bg-color: rgba(235, 218, 126, 0.9);
    --bg-color-2: hsla(0, 0%, 96%, 0.9); */
    /* --bg-grad: radial-gradient(ellipse at top left, var(--bg-color) 49.16%, var(--bg-color-2)); */
    --bg-color: rgba(235, 218, 126, 0.41);
    --bg-color-2: hsla(0, 0%, 96%, 0.39);
    --bg-grad: radial-gradient(ellipse at 0% 30%, var(--bg-color) 49.16%, var(--bg-color-2)), 
    radial-gradient(ellipse at 20% 40%, var(--bg-color) 10.92%, var(--bg-color-2)), 
    radial-gradient(ellipse at 80% 60%, var(--bg-color) 10.92%, var(--bg-color-2)), 
    radial-gradient(ellipse at 40% 90%, var(--bg-color) 10.92%, var(--bg-color-2)), 
    radial-gradient(circle at 0% 90%, var(--bg-color) 10.92%, var(--bg-color-2));
    --trim: purple;
}
.page.edit-agenda {
    /* background-color: rgba(255, 255, 255, 0.9); */
    --bg-color: rgba(235, 218, 126, 0.9);
    --bg-color-2: hsla(0, 0%, 96%, 0.9);
    /* --bg-grad: linear-gradient(0deg, var(--bg-color), var(--bg-color-2)); */
    --bg-grad: whitesmoke;
    --bg-size: 2em;
    /* background-color: rgb(235 218 126 / 90%); */
    --trim: goldenrod;
}
.edit-agenda, .view-agenda {
    --bg-color: rgba(235, 218, 126, 0.9);
    border-radius: 0.5em;
}


.view-agenda .viewer-topbar {
    justify-content: flex-end;
}
.edit-agenda button {
    border-radius: 2px;
}
.edit-agenda button.loading {
    opacity: 0.3;
    pointer-events: none;
}
.edit-agenda button.add-field {
    display: block;
    margin: 0;
    padding: 0;
    /* flex-basis: 100%; */
    width: 100%;
    opacity: 0.1;
    pointer-events: none;
}

.viewer-content table {
    font-family: Helvetica Neue;
    font-weight: 200;
    overflow: scroll;
}
.viewer-content tbody tr:first-of-type {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: lightgrey;
    font-weight: 400;
    z-index: 1; /* needed because of td being position: relative */
    /* --border: darkslategrey; */
}
.viewer-content table {
    counter-reset: rowNumber;
}
.viewer-content table tr.body-row td:first-of-type::before {
    /* display: table-cell; */
    counter-increment: rowNumber;
    content: counter(rowNumber) ".";
    padding: 0.1em 0;
    padding-right: 0.2em;
    margin-left: -1em;
    text-align: right;
    /* vertical-align: middle; */
}
.viewer-content table tr.body-row td:first-of-type {
    padding-left: 1.1em
}

.edit-agenda button {
    border-radius: 2px;
}
.edit-agenda button.loading {
    opacity: 0.3;
    pointer-events: none;
}
.edit-agenda button.add-field {
    display: block;
    margin: 0;
    padding: 0;
    /* flex-basis: 100%; */
    width: 100%;
    opacity: 0.1;
    pointer-events: none;
}



.edit-agenda div.table.drag-and-drop {
    background-color: rgba(255,0,255,0.1);
    cursor: row-resize;
}
.edit-agenda .drag-and-drop .tr:active {
    opacity: 0.2;
}
.edit-agenda div.table .td {
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}
.edit-agenda div.table .td:hover {
    background-color: rgba(0,0,0,0.07);
}
.edit-agenda div.table .td:focus {
    cursor: default;
}



.edit-agenda tbody.drag-and-drop {
    background-color: rgba(255,0,255,0.1);
    cursor: row-resize;
}
.edit-agenda .drag-and-drop tr:active {
    opacity: 0.2;
}
.edit-agenda tbody td {
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}
.edit-agenda tbody td:hover {
    background-color: rgba(0,0,0,0.07);
}
.edit-agenda tbody td:focus {
    cursor: default;
}
.edit-agenda tbody td:focus:after {
    opacity: 1;
}
.edit-agenda tbody td:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px black;
    opacity: 0;
    transition: opacity 1s;
}
.edit-agenda tbody td[contenteditable="true"] { /* to mark changed cells */
    background-color: rgba(255,0,0,0.05);
    cursor: text;
}


.edit-agenda button.end-now,  .edit-agenda button.start-now {
    background: rgba(255, 0, 0, 0.209);
    border: 0.07em solid;
    border-color: rgba(255, 0, 0, 0.5);
    font-size: 0.7em;
}
.edit-agenda button.start-now {
    background: rgba(39, 255, 39, 0.24);
    border-color: rgba(39, 255, 39, 0.5);
}



.edit-agenda {
    --sidepanel-width: 0.3;
    transition: transform 0.3s, border-radius 0.3s;
}
/* .edit-agenda.show-attachments {
    transform: translateX(calc(-50% * var(--sidepanel-width)));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
} */
.edit-agenda button.attachments {
    position: absolute;
    bottom: 0;
    right: 0;
    /* background-image: url('attach.svg'); */
    background-image: url('thinattach.svg');
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: center;
    width: 0;
    height: 0;
    padding: 1.5em;
    /* margin: -0.5em; */
    margin: -1.5rem;
    /* border: none; */
    border-radius: 0.2em;
    border: 0.5px solid;
    border-color: transparent;
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.edit-agenda button.attachments:hover {
    border-color: lightgrey;
}
.edit-agenda.show-attachments button.attachments {
    background-color: rgba(0,0,0,0.2);
    border-color: lightgrey;
    /* transform: rotateZ(90deg); */
}

.edit-agenda .attachment-window {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    font-size: 0.6em;
    margin: auto;
    padding: 1em;
    width: calc(100% * var(--sidepanel-width));
    height: 100%;
    box-sizing: border-box;
    /* background-color: white; */
    background: inherit;
    background-color: inherit;
    border-left: 1px dashed lightgrey;
    /* border-radius: inherit; */
    border-bottom-right-radius: 0.5em;
    border-top-right-radius: 0.5em;
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
}
.attachment-window.hidden {
    opacity: 0;
    pointer-events: none;
}

.attachment-window .attachments.control {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    height: 1em;
    width: 1em;
    margin: 0;
    background: none;
    padding: 0.55em;
}
.attachment-window .attachments.control:before {
    content: '\2715';
    font-size: 0.7em;
}

.attachment-window form {
    /* visibility: hidden; */
    margin: 0;
    padding: 0;
    height: 0;
    width: 0;
    overflow: hidden;    
}

.dragging-file .attachment-window > *:not(#file-drop-area) {
    /* display: none; */
    visibility: hidden;
}
.dragging-file .attachment-window {
    opacity: 1;
    pointer-events: all;
    background: transparent;
}
.dragging-file #file-drop-area * {
    pointer-events: none;
}
.dragging-file #file-drop-area:hover {
    background: rgba(0,0,0,0.4);
}
.dragging-file #file-drop-area {
    position: absolute;
    top: 1.5vh;
    right: 1.25vw;
    width: 97.5vw;
    height: 97vh;
    background: rgba(0,0,0,0.3);
    border-radius: 1em;
}
#file-drop-area {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 20%;
    border: 1px dashed grey;
    cursor: pointer;
}
#file-drop-area:hover {
    background-color: rgba(0,0,0,0.05);
}
#file-drop-area:before {
    content: 'Drag and drop or click to upload attachments';
    position: absolute;
    top: 0.2em;
    margin: auto;
    font-size: 0.8em;
    text-align: center;
    font-family: system-ui;
}
#file-drop-area:after {
    content: '';
    display: block;
    width: 6em;
    height: 6em;
    /* background: url('upload.svg'); */
    background: url('upload-down.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}
.attachment-window #file-preview-area {
    border: 1px solid gray;
    margin-top: 10%;
    padding-bottom: 3em;
    box-sizing: border-box;
    width: 100%;
    height: 75%;
    overflow: scroll;
}
#file-preview-area:before {
    content: 'Uploaded Attachments';
    display: block;
    font-weight: 400;
    color: darkblue;
    text-align: center;
    padding: 0.1em 0.3em;
    background-color: rgba(0,0,0,0.15);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    border: inherit;
    border-top: none;
}
#file-preview-area .attachment {
    display: flex;
    flex-direction: column;
    margin: 0.5em;
    padding: 0.15em;
    /* border-radius: 0.3em;
    border: 2px dashed lightgrey; */
    cursor: grab;
    /* background: pink; */
    transition: background 0.5s;
}
#file-preview-area .attachment.loading {
    background: orange;
}
#file-preview-area .attachment.uploading {
    background: yellow;
}
#file-preview-area .attachment.error {
    background: orangered;
}
#file-preview-area .attachment.new {
    animation: green-flash 1s both;
}
@keyframes green-flash {
    0% {
        background: green;
    }
    100% {
        background: inherit;
    }
}

#file-preview-area .attachment[data-tooltip]:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    transform: translateY(100%);
}
/* #file-preview-area .attachment:before {
    content: '';
    position: absolute;
    background: url('dragdots.svg');
    top: 0;
    bottom: 0;
    right: 0;
} */
#file-preview-area .attachment span {
    flex-basis: 100%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: scroll;
}
#file-preview-area .attachment a {
    cursor: pointer;
    text-decoration: none;
}
#file-preview-area .attachment a:before {
    content: '\2022';
    margin: 0.5em;
}

.attachment-window #attachment-text-area {
    padding: 1em;
    padding-top: 0.3em;
    font-size: 0.7em;
    font-weight: 400;
    text-align: center;
    /* height: 15%; */
    overflow: scroll;
    white-space: normal;
}

.viewer-bottom .download-formats {
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    background-color: rgba(0,0,0,0.75);
    color: white;
}

/* should probably be in main.css or something */
@media print {
    .download-formats {
        display: none !important;
    }
    button {
        display: none !important;
    }
    #item-container {
        display: none !important;
    }
    .page {
        --bg-color: white !important;
        --bg-color-2: white !important;
        height: unset !important;
    }
    #viewer {
        height: unset !important;
    }
}

.download-formats .icon {
    height: 2em;
    width: 2em;
    background-image: url('downloada.svg');
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: center;
    cursor: pointer;
    opacity: 0.5;
    transition: transform 0.2s 0.2s, opacity 0.2s;
}
/* .download-formats .icon:hover {
    transform: rotate(-90deg);
    opacity: 0.75;
} */
.download-formats:hover .icon {
    transform: rotate(-90deg);
    opacity: 0.75;
    transition-delay: 0s;
}
.download-formats:hover .formats {
    transform: scale(1);
    opacity: 1;
}

.download-formats .formats {
    transform-origin: 0 50%;
    transform: scaleX(0);
    opacity: 0.1;
    transition: transform 0.3s, opacity 0.3s;
}
/* .download-formats .icon:hover ~ .formats,
.download-formats .formats:hover {
    transform: scale(1);
    opacity: 1;
} */
.download-formats .formats button {
    border: none;
    letter-spacing: inherit;
    font-weight: 400;
    font-size: 0.9em;
    height: 100%;
    color: inherit;
    background: transparent;
}
.download-formats .formats button:hover {
    text-decoration: underline;
}
.download-formats .formats button.loading {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}



.page.make-folder {
    font-family: 'Roboto', 'Avenir', sans-serif, system-ui;
    background-color: white;
    padding: 1.25em;
    height: min-content;
    width: 55vw;
    border-radius: 0.5em;
}
.make-folder .viewer-topbar {
    margin: 0;
    font-size: 1.4em;
    font-weight: 400;
    /* margin-bottom: 0.75em; */
}
.make-folder .viewer-content {
    display: flex;
    flex-direction: column;
    /* font-size: 1em; */
}
.make-folder .title-input {
    display: inline-flex;
    align-items: center;
    margin: 1em 0;
    margin-bottom: 1.5em;
    /* margin-bottom: 1em; */
    padding: 0.4em;
    box-shadow: 0 0 1px grey inset;
    border: 2px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: text;
    position: relative;
    transition: border-color 0.3s;
}
.make-folder .title-input:hover {
    border-color: rgba(0,0,0,0.7);
}
.make-folder .title-input:focus-within {
    border-color: #1a73e8;
}
/* .make-folder .title-input:after { */
/*     content: ''; */
/*     display: block; */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     height: 100%; */
/*     width: 100%; */
/*     box-sizing: border-box; */
/*     border: 2px solid #1a73e8; /\* from gdox *\/ */
/*     border-radius: inherit; */
/*     opacity: 0; */
/*     transform: scale(1.1); */
/*     transition: opacity 0.2s, transform 0.2s; */
/* } */
/* .make-folder .title-input:focus-within:after { */
/*     opacity: 1; */
/*     transform: scale(1); */
/* } */

.make-folder .title-input input {
    background-color: transparent;
    font-size: 1em;
    /* border-radius: 0.5em; */
    padding-left: 0.3em;
    padding-bottom: 0.2em;
    border: none;
    /* border-bottom: 0.5px solid rgba(0,0,0,0.5); */
    outline: none;
    width: 100%;
    /* transition: border-color 0.3s, border-radius 0.3s; */
}
/* .make-folder .title-input input:focus { */
/*     border-color: transparent; */
/*     border-bottom-color: rgba(0,0,0,0.5); */
/*     border-radius: 0; */
/* } */
.make-folder button {
    float: right;
    border: none;
    border-radius: 4px;
    font-weight: 400;
    padding: 0.4em 0.8em;
    margin: 0.2em;   
}
.make-folder button:hover {
    color: #185abc;
    background-color: #1a73e80C;
}
.make-folder button.cancel {
    color: #3c4043;
}
.make-folder button.save {
    color: #1a73e8;
}

/* 
.page.make-meeting {
    background-color: lightgreen;
} */

.page.edit-perms {
    font-family: 'Roboto', 'Avenir', sans-serif, system-ui;
    text-align: center;
    background-color: white;
    padding: 1.25em;
    height: min-content;
    width: 55vw;
    border-radius: 0.5em;
    position: relative;
}
.edit-perms .loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    font-size: 2em;
}
.edit-perms .viewer-topbar {
    margin: 0;
    margin-top: -0.5em;
    font-size: 1.15em;
    font-weight: 400;
    justify-content: center;
    /* margin-bottom: 0.75em; */
}
.edit-perms .viewer-content {
    overflow: visible; /* otherwise tooltips get clipped */
}
.edit-perms label[data-tooltip]:after {
    transform: translateY(-100%);
}
.edit-perms button.save:before {
    content: var(--text);
}
.edit-perms button.save {
    --text: 'Save and Close';
    width: 6em;
    width: 8.5em;
}
.edit-perms button.save.loading {
    --text: 'Saving';
    cursor: wait;
}
.edit-perms .perms-table {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* grid-auto-columns: minmax(0, 1fr); */ /* works better for small width but */
    min-height: 12em;
}
.perms-table .perms-req, .perms-table .perms-acc {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.perms-table label {
    display: inline-block;
}
.perms-table label[data-tooltip]:after {
    transform: translate(-35%, -100%);
    width: 400%;
}
.perms-table button.add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border: 0.03em solid grey;
    border-radius: 0.2em;
    opacity: 0.4;
    transition: opacity 0.3s, border-color 0.3s;
}
.perms-table button.add:hover {
    opacity: 0.9;
}
.perms-table button.add:active {
    border-color: transparent;
}
.edit-perms .user-list {
    min-height: 4em;
    min-width: 8em;
    margin: 1em;
    margin-top: 0.25em;
}
.edit-perms.loading .user-list {
    opacity: 0.3;
}
.edit-perms.loading .user-list:after {
    content: 'Loading';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.75);
}
.user-list .user-entry {
    border-radius: 0.3em;
    border: 0.08em solid grey;
    margin: 0.1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.user-entry .main-text {
    margin: auto;
}
.user-entry.curr .main-text:after {
    content: ' (You)';
}
.user-entry button.glyph {
    height: 2em;
    width: 2em;
    margin: 0.2em;
    border-radius: inherit;
}
.user-entry button.arrow.glyph {
    background-image: url('rightarrow.svg');
}
.user-entry button.delete.glyph {
    background-image: url('blackx.svg');
}
/* prevent removing yourself as owner */
/* .perms-acc .user-entry.curr button.arrow {
    opacity: 0.3;
    pointer-events: none;
} */
.perms-acc .user-entry button.delete {
    display: none;
}
.perms-acc .user-entry button.arrow {
    order: -1;
    transform: rotate(180deg);
}

.perms-table ~ label { /* to fix tooltip sizing */
    width: 50%;
    margin: auto;
    user-select: none;
    -webkit-user-select: none;
}