.wrapper {
    display:flex;
    flex-flow: column;
}

.content {
    padding:1em;
}

.btable {
    margin-right: auto;
    margin-left: auto;
    border-collapse: collapse;
    width: 45%;
}

.btable th,td {
    border: 1px solid #222;
    padding: 3px;
}

.box-container {
    position: relative;
    display: table;
    border-collapse: collapse;
    margin-left: 15%;
    margin-right: 15%;
    width: 70%;
}
.box-row {
    display: table-row;
    padding: 5px;
}

.box-header {
    display: table-cell;
    padding: 5px;
    vertical-align: middle;
    text-align : center;
    border: 1px solid;
    width: 10%;
    font-weight: bold;
}

.box-value{
    display: table-cell;
    padding: 5px;
    vertical-align: middle;
    text-align : center;
    border: 1px solid;
    word-break: break-all;
}

.box-value a {
    writing-mode: vertical-lr;
}

.box-value a.event_code {
    writing-mode: horizontal-tb;
}

.box-title {
    width: 30%;
}

@media screen and (max-width: 1000px) {
    .box-container {
        position: relative;
        display: table;
        border-collapse: collapse;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
    }
}

@media screen and (max-width: 830px) {
    .box-container {
        position: relative;
        display: table;
        border-collapse: collapse;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
    }
}