.event-card {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);
    padding: 10px;
    position: relative;
    margin-bottom: 8px;
    display: grid;
    grid-template:
        'i l t s m' 24px
        'i d d s m'
        'i d2 d2 s m' / min-content auto 1fr min-content;
}

.event-card::before {
    grid-area: i;
    justify-self: left;
    margin-right: 12px;
    align-self: center;
}

.events .event-card:nth-of-type(even) {
    background-color: #f8f8f8;
}
.event-card > .material-icons {
  color: #888;
}
.event-card > label {
    grid-area: l;
    font-weight: 500;
    font-size: 13px;
    align-self: center;
    white-space: nowrap;
}

.event-card > time {
    color: #0008;
    font-size: 11px;
    align-self: center;
    white-space: nowrap;
    grid-area: t;
}

.event-card > time::before {
    content: " - ";
    margin-right: 2px;
    margin-left: 5px;
}

.event-card.accessDenied {
    color: #c62828 !important;
}

.event-card.accessGranted {
    color: #689f38 !important;
}
.event-card.forcedOpen,
.event-card.openTooLong,
.event-card.doorAlarm {
    color: #f44336 !important;
}

.event-card.online,
.event-card.resetFinish,
.event-card.setupFinish,
.event-card.restoreFinish {
    background-color: #f1f8e9 !important;
    color:#558b2f !important;
}

.event-card.restoreMissingEvents {
    background-color: #C0FDFF !important;
}


.event-card.setupStart,
.event-card.restoreStart {
    background-color: #F9F1F9 !important;
}

.event-card.offline,
.event-card.syncError,
.event-card.restoreError {
    background-color: #ffebee !important;
    color:  #f44336 !important;
}

.event-card.siteReleased {
    background-color: #f1f8e9 !important;
    color:#558b2f !important;
}

.event-card.siteLocked {
     background-color: #ffebee !important;
    color:  #f44336 !important;
}

.event-card > .info {
    grid-area: d;
    color: #555;
    white-space: pre-wrap;
    line-height: 1.4;
    letter-spacing: 1;
    word-wrap: break-word;
}

.event-card > .info:nth-of-type(2) {
    grid-area: d2;
}

.event-card > footer {
    justify-self: left;
    grid-column: span 3;
}

.event-card > footer > button {
    color: #444;
    font-size: 11px;
    padding: 0 6px;
    height: 32px;
    margin: 10px 10px 0 0;
    letter-spacing: 1.2;
}

.event-card > footer > button:before {
    font-size: 22px;
}

.event-card > footer > button:hover {
    background-color: #f3f3f3;
}

.event-card > snapshot   {
  grid-area: s;
  cursor: pointer;
}

.event-card > snapshot > object.avatar[data-icon-pos=videocam]:hover {
    box-shadow: 0 0 10px #ef6c00;
}

.event-card > span.close::before {
  padding: 5px;
  position: absolute;
  top:0px;
  right:0px;
  cursor: pointer;
  content: "close";
  font-family: 'Material Icons';
  font-size: 12px;  /* Preferred icon size */
  color: #666;
}

.event-card button.more {
    grid-area: m;
    color: #444;
    height: 32px;
    margin: 0;
}

.event-card button.more:hover {
    background-color: #f3f3f3;
}

.event-card menu {
    right: 8px;
    top: 8px;
    transform-origin: top right;
}

#event-details {
    overflow-y: auto;
    max-height: calc(100vh - 100px);
}

#event-details p {
    margin: 0;
    line-height: 32px;
    padding: 0 12px;
}

#event-details p:nth-child(odd) {
    background: #2a2a2a;
    border-radius: 5px;
    margin: 0 !important;
    line-height: 32px;
}

#event-details p > b {
    width: 84px;
    display: inline-block;
}

#event-details code {
    line-height: 1.4;
    display: block;
    padding-bottom: 8px;
    user-select: text;
}

#events-table > div.tabulator-tableHolder {
  height: 100% !important;
  max-height: 100% !important;
}

p.event {
    padding-top: 6px;
}

p.event > label {
    margin-right: 8px;
}

p.event.accessDenied > label,
p.event.accessDenied::before {
    color: #ef5350 !important;
}

.event.accessGranted > label,
.event.accessGranted::before {
    color: #9ccc65 !important;
}