:root {
    --bg1: #504055;
    --bg2: #253540;
    --bg3: #304050;
    --margin: 15px;
    --padding: 15px;
    --radius: 10px;
    --icons: 18px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Layout */
.table, .img {
    width: 95%;
    max-width: 430px;
    margin: auto;
}
.flex, .event, .tb, .tbe { display:flex; }
.tb, .tbe, .iw { 
    flex: 1; 
}
.event-info { flex:3; }
.tw, .th { flex:2.5; }

/* Typography */
body { background: var(--bg1); }
body, div, a, button, .th { 
    font-family: verdana, tahoma, arial;
    font-size: 12px;
    color: white; 
    line-height: 1.5;
}
h4, p { margin: 0; }
.event { margin: var(--margin) 0; }
.iw {
    display: flex;
    justify-content: flex-end;
}
.tw { 
    text-align: left;
    padding-left: 10px;
}

/* Visibility */ 
.table.inactive, .td.inactive { display:none !important; }

/* Common Components */
.th, .td, .tb, .tbe, .ti {
    vertical-align: text-top;
    text-align: center;  
    padding: var(--padding) 0;
}
.th, .td, .tb, .ti, .ih, .img { border: 1px solid grey; }

/* Header */
.th, .ih { 
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom-width: 0;   
}
.th { 
    width: 100%;
    cursor: pointer;
    font-weight: bold;
}
.th.inactive {
    background: var(--bg1);
    border-bottom-width: 1px;
}

/* Content */
.ti { 
    border-radius: 0 0 var(--radius) var(--radius);
    border-top-width: 0; 
}
.td, .ti, .th, .ih { background: var(--bg2); }
.td, .tb, .img { border-radius: var(--radius); }
.tb, .img { border-color: grey #333333 #333333 grey; }

/* Links */
.tb {background: var(--bg3);}
.icons {
    max-width: var(--icons);
    max-height: var(--icons);
    top: 1px;
}
.tb,.tbe {
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: 0 var(--margin);
}

/* Hover */
.tb:hover { background: #301010; }
.th:hover, .tb:hover { color:red; }