body.page-announce {
    padding: 0;
    margin: 0;
}

.page-announce #header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    padding: env(safe-area-inset-top, 0px) 0 0 0;
}

.page-announce #header .logo,
.page-announce #header .backButton {
    float: none !important;
}

@media screen and (max-width: 768px) {
    .page-announce #header .logo,
    .page-announce #header .backButton {
        position: static !important;
        left: auto !important;
    }
}

@media screen and (max-width: 1024px) {
    .page-announce #header {
        display: flex !important;
        justify-content: space-between;
    }

    .page-announce #header .logo {
        flex: 1;
        display: flex !important;
        justify-content: center;
    }
}

.page-announce thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 59px;
    z-index: 2;
    background: #ddd;
}

.page-announce .title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
    padding: 0;
    text-align: center;
}


/* default styling. Nothing to do with freexing first row and column */

.page-announce table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}

th {
    font-size: 24px;
}

td {
    font-size: 18px;
    width: auto;
}

td,
th {
    border: 1px solid;
    padding: 10px;
    min-width: 150px;
    max-width: 400px;
    background: white;
    box-sizing: border-box;
    text-align: left;
}

.table-container {
    position: relative;
    max-height: 300px;
    width: 500px;
    overflow: scroll;
}

thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #ddd
}

thead th:first-child {
    left: 0;
    z-index: 3;
}

tfoot {
    position: -webkit-sticky;
    bottom: 0;
    z-index: 2;
}

tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

tfoot td:first-child {
    z-index: 3;
}

tbody {
    overflow: scroll;
}

/* MAKE LEFT COLUMN FIXEZ */
tr> :first-child {
    position: -webkit-sticky;
    position: sticky;
    /* background: #ddd; */
    left: 0;
}

@media screen and (max-width: 1024px) {
    .page-announce .title {
        font-size: 28px;
    }
}