.navbar-wrapper {
    background-position      : center right;
    background-repeat        : no-repeat;
    background-size          : cover;
    /* padding-top           : 3.5rem; */
    /* height                : 524px; */
}

.pageTitle {
    font-weight   : bold;
    font-size     : 5.2rem;
    line-height   : 6.2rem;
    text-align    : center;
    letter-spacing: -0.03em;
    color         : #E6EAF5;
    padding-top   : 17.6rem;
    padding-bottom: 17.6rem;
}

/* Berthing Report */

.berthingSec {
    padding-top   : 5rem;
    padding-bottom: 47.4rem;
}

.berthingSec h3 {
    font-weight   : bold;
    font-size     : 4.8rem;
    line-height   : 5.6rem;
    letter-spacing: -0.03em;
    color         : #E6EAF5;
}

.berthingSec .btn {
    color: #BBC9ED;
}



.desktopTable {
    padding-top: 7.5rem;
}


.desktopTable * {
    padding: 0;
}

.desktopTable thead th {
    padding-top   : 4.1rem;
    padding-bottom: 4.1rem;
    font-weight   : bold;
    font-size     : 1.6rem;
    line-height   : 1.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color         : #E6EAF5;
}

.desktopTable thead tr th:first-child {
    min-width: 10vw;
}

.desktopTable thead tr th:nth-child(2) {
    min-width: 15vw;
}

.desktopTable thead tr th:nth-child(3) {
    min-width: 22vw;
}

.desktopTable thead tr th:last-child {
    text-align      : center;
    /* padding-right: 4rem; */
}

.desktopTable tbody tr td {
    font-weight   : normal;
    font-size     : 1.8rem;
    line-height   : 2.2rem;
    letter-spacing: -0.02em;
    color         : #BBC9ED;
    padding-top   : 4.1rem;
    padding-bottom: 4.1rem;
}


.desktopTable .btn {
    /* border-color: rgba(187, 201, 237, 0.3); */
    padding: 1.6rem 2rem;
    border : 2px solid rgba(187, 201, 237, 0.3);
}

.desktopTable .btn svg {
    height      : 2rem;
    width       : 2rem;
    margin-right: 1rem;
    margin-top  : -.4rem;
}

.desktopTable thead {
    border: none !important;
}

.desktopTable thead th {
    border: 2px solid #061425;
}

.desktopTable tbody td {
    border-bottom: 1px solid rgba(187, 201, 237, 0.3);
}

.desktopTable tbody tr:last-child td {
    border-bottom: none;
}

.desktopTable tbody tr td:last-child {
    text-align: center;
}



/* Card Design for mobile device*/
.mobileBerthRep {
    display   : none;
    margin-top: 20px;
}

.berthingRepCard {
    background      : rgba(56, 95, 142, .16);
    /* opacity      : 0.16; */
    border-radius   : 10px;
    padding         : 28px 22px;
}

.berthingRepCard {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 15px;
}

.berthingRepCard .sn {
    font-weight   : normal;
    font-size     : 17px;
    line-height   : 21px;
    letter-spacing: -0.02em;
    color         : #BBC9ED;
    margin-right  : 14px;
}


.berthingRepCard h4 {
    font-weight   : bold;
    font-size     : 18px;
    line-height   : 22px;
    letter-spacing: -0.02em;
    color         : #BBC9ED;
    margin-bottom : 8px;
}

.berthingRepCard h5 {
    font-weight   : normal;
    font-size     : 12px;
    line-height   : 15px;
    letter-spacing: -0.02em;
    color         : #BBC9ED;
    opacity       : 0.6;
}

.berthingRepCard button {
    background-color: transparent;
    border          : 2px solid rgba(187, 201, 237, 0.3);
    padding         : 13px;
}

.berthingRepCard button img {
    height: 20px;
    width : 20px;
}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .berthingSec h3 {
        font-size     : 19px;
        line-height   : 23px;
        letter-spacing: -0.03em;
    }

    .desktopTable {
        display: none;
    }

    .mobileBerthRep {
        display: block;
    }

}