body {
    padding: 24px;
    direction: rtl;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr max-content;
    height: calc(100vh - 48px);
}
h2,h3 {
    text-align: center;
}

header h2 img {
    max-width: 200px;
    max-height: 120px;
}
section.content {
    overflow: auto;
}

[data-visible-on] {
    display: none;
}

.controls {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 8px;
}

.loading {
    text-align: center;
    max-width: 120px;
    margin: 8px auto;
}


.extension {
    max-height: 10em;
    max-width: 20em;
    overflow: auto;
    direction: ltr;
}

.pagination {
    margin: 0 auto;
}

.table-inner,
.table-inner td{
    border: solid 1px #CCC;
    border-collapse: collapse;
}

.message {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}