.repo {
    font-family: verdana;
}
.repo-user {
    border: solid 1px #7f7f7f;
    margin: 8px;
    background-color: #efefef;
}
.repo-user-info {
    width: 15%;
    min-width: 5em;
    display: inline-block;
    vertical-align: top;
}
.repo-user-email {
    font-size: 10pt;
    word-break: break-all;
}
.repo-user-email::before {
    content: "<";
}
.repo-user-email::after {
    content: ">";
}
.repo-uri {
    color: #3f00bf;
    font-weight: 700;
    text-decoration: none;
}
.repo-uri:hover {
    text-decoration: underline;
}
.repo-vaults {
    display: inline-block;
    width: 50%;
    min-width: 17.5em;
    vertical-align: top;
}
.repo-vault {
    margin: 4px;
    padding: 4px;
    border: dotted 1px #007f00;
    background-color: #dfefef;
}
.repo-vault-key {
    width: 16em;
    margin: 4px 4px 4px 4px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    background-color: #dfdfdf;
}
.repo-vault-key-current, .repo-vault-key-secondary {
    border: solid 2px #3f3f3f;
}
.repo-vault-key-lost {
    border: dotted 2px #9f9f9f;
}
.repo-vault-key-temp {
    border: dashed 2px #3f3f3f;
}
.repo-vault-key-shadow {
    border: solid 2px #003f3f;
}
.repo-vault-key-recovery {
    border: solid 2px #9f9f3f;
}
.repo-vault-key-title {
    margin: 8px auto 8px 0;
    width: 9.5em;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.repo-vault-key-title::before {
    content: "Vault Key";
    display: block;
}
.repo-vault-key-type {
    display: block;
    font-size: 11pt;
}
.repo-vault-key-type::before {
    content: "type: '";
}
.repo-vault-key-type::after {
    content: "'";
}
.repo-vault-key-creator {
    display: block;
    font-size: 11pt;
}
.repo-vault-key-creator::before {
    content: "creator: ";
}
.repo-vault-entries {
    min-height: 5.5em;
    width: 6em;
    border-left: dotted 1px #7f7f7f;
    display: inline-block;
    text-align: center;
}
.repo-vault-entries::before {
    content: "Vault Entries:";
    font-size: 8pt;
    display: block;
    text-align: center;
}
.repo-vault-items {
    display: inline-block;
    width: 30%;
    min-width: 9.5em;
    vertical-align: top;
}
.repo-vault-item-file {
    margin: 4px;
    padding: 4px;
    border: dotted 1px #00007f;
    background-color: #efefdf;
}
.repo-vault-item {
    width: 8em;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding: 2px 0 2px 0;
    margin: 4px;
    height: 2.25em;
}
.repo-vault-item-active::before {
    content: "Vault Item";
    display: block;
    text-align: center;
    font-size: 10pt;
}
.repo-vault-item-active {
    border: solid 2px #3f3f3f;
}
.repo-vault-item-deleted {
    border: dotted 2px #9f9f9f;
}
.repo-vault-item-deleted::before {
    content: "deleted";
    font-size: 10pt;
    display: block;
    text-align: center;
    font-weight: 900;
    color: #7f0000;
}
.repo-vault-item-title {
    font-size: 11pt;
}
.repo-vault-entry {
    display: inline-block;
    border: dotted 1px #bfbfbf;
    font-size: 8pt;
    margin: 1px 0 1px 2px;
    padding: 2px;
    width: 7em;
    text-align: center;
}
.repo-vault-item-101 { background-color: #ffcfcf;}
.repo-vault-item-102 { background-color: #ffe7cf;}
.repo-vault-item-103 { background-color: #ffffcf;}
.repo-vault-item-104 { background-color: #e7ffcf;}
.repo-vault-item-105 { background-color: #cfffcf;}
.repo-vault-item-106 { background-color: #cfffe7;}
.repo-vault-item-107 { background-color: #cfffff;}
.repo-vault-item-108 { background-color: #cfe7ff;}
.repo-vault-item-109 { background-color: #cfcfff;}
.repo-vault-item-110 { background-color: #e7cfff;}
.repo-vault-item-111 { background-color: #ffcfff;}
.repo-vault-item-112 { background-color: #ffcfe7;}
.repo-vault-item-113 { background-color: #ffe7e7;}
.repo-vault-item-114 { background-color: #ffffe7;}
.repo-vault-item-115 { background-color: #e7ffff;}
.repo-vault-item-116 { background-color: #e7e7ff;}
.repo-vault-item-117 { background-color: #ffe7ff;}
.repo-vault-item-118 { background-color: #ffe7e7;}
.repo-vault-item-119 { background-color: #ffffb7;}
.repo-vault-item-120 { background-color: #e7ffcf;}

.repo-key-101 svg { fill: #ffcfcf;}
.repo-key-102 svg { fill: #ffe7cf;}
.repo-key-103 svg { fill: #ffffcf;}
.repo-key-104 svg { fill: #e7ffcf;}
.repo-key-105 svg { fill: #cfffcf;}
.repo-key-106 svg { fill: #cfffe7;}
.repo-key-107 svg { fill: #cfffff;}
.repo-key-108 svg { fill: #cfe7ff;}
.repo-key-109 svg { fill: #cfcfff;}
.repo-key-110 svg { fill: #e7cfff;}
.repo-key-111 svg { fill: #ffcfff;}
.repo-key-112 svg { fill: #ffcfe7;}
.repo-key-113 svg { fill: #ffe7e7;}
.repo-key-114 svg { fill: #ffffe7;}
.repo-key-115 svg { fill: #e7ffff;}
.repo-key-116 svg { fill: #e7e7ff;}
.repo-key-117 svg { fill: #ffe7ff;}
.repo-key-118 svg { fill: #ffe7e7;}
.repo-key-119 svg { fill: #ffffb7;}
.repo-key-120 svg { fill: #e7ffcf;}

.repo-keys {
    position: absolute;
    left: -8px;
    top: 6px;
    overflow: hidden;
    width: 32px;
    height: 20px;
}
.repo-keys a {
    display: block;
    position: absolute;
    overflow: hidden;
    width: 32px;
    height: 32px;
    top: -6px;
    border-left: solid 1px #bf3f3f;
}
.repo-keys a svg {
    position: absolute;
    display: block;
    stroke: #3f3f3f;
}
.repo-key-current, .repo-key-secondary {
    position: absolute;
    top: 24px;
    left: -68px;
    padding-left: 32px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: left center;
}
.repo-key-current {
    background-image: url(/assets/img/user.svg);
}
.repo-key-current svg {
    fill: #dfdfdf;
    stroke: #1f1f1f;
}
.repo-key-secondary {
    background-image: url(/assets/img/device.svg);
}
.repo-key-secondary svg {
    fill: #7f7f7f;
    stroke: #1f1f1f;
}
.repo-vault-key-lost .repo-key svg {
    stroke-dasharray: 1;
}

.repo-highlight {
    border-color: #ff3f00;
    border-style: solid;
}