.main-container {
    height: calc(100vh - 70px);
    width: 73vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}
.main-block-1 { /* Easy Lodge Management... */
    text-align: center;
    font-size: var(--font1);  /* font300 */
    font-weight: bold;
    color: black;
    padding-top: 10px;
}
.main-block-2 { /* Secretaries and Treasurers... */
    text-align: center;
    padding-top: 10px;
    font-size: var(--font2); /* font175 */
    font-weight: bold;
    color: var(--main-red-color);
}
.main-block-3 { /* Lodgical */
    text-align: center;
    font-size: var(--font3); /* font350 */
    font-weight: bold;
    color: var(--main-blue-color);
}
.main-block-4 { /* A web-based... */
    text-align: center;
    font-size: var(--font4); /* font175 */
    font-weight: bold;
    padding: 0 20px;
}

.main-block-5 { /* Sec, Mem, Trsr items */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.main-block-5-1 { /* SEC */
     width: 31%;
     display: flex;
     flex-direction: column;
     text-align: center;
}
.main-block-5-2 { /* MEM + CHA */
    width: 31%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.main-block-5-2-1 {
    margin-bottom: 20px;
}
.main-block-5-2-2 {
}
.main-block-5-3 { /* TRS */
    width: 31%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 10px;
}

.main-block-6 { /* Action Buttons */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    padding: 5px 5px 5px 5px;
    row-gap: 20px;
}
.main-block-6-action {
    width: 30%;
    align-self: center;
    border: 3px solid darkred;
    border-radius: 20px;
    background-color: var(--main-lightpink-color);
    color: var(--main-red-color);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.main-block-6-action-title {
    text-align: center;
    font-size: var(--font125);
    font-weight: bold;
    color: var(--main-blue-color);
}
.main-block-6-action-button {
    text-align: center;
    font-size: var(--font100);
}

.office-name {
    font-size: var(--font5);
    font-weight: bold;
    color: var(--main-red-color);
}

.office-action {
    font-size: var(--font5);
    font-weight: bold;
}

/* 240530 Screen Sizes from JS $(window).width()
               Portrait         Landscape
    iPhone    828 / 1421        1600 / 655
    iPad      820 / 1073        1181 / 746
    Ssg A05   768 / 1357        1549 / 672
    krm Phone 720 / 1294
    Win10 pc (krm)              1737 / 868
    Win10 PC      x             2125 / 1035
    Assume that browser info (eg url bar) only affects height
    and that variation in height accomodated with vertical scroll bar

    Then, from above breakpoints should be at:
      >= 1750            (350)
      >= 1450 &  < 1750  (350)
      >= 850  &  < 1450  (600)
      >= 720  &  < 850   (130)    Phone / Tablet
       < 720             (120)    Small Phone
*/

@media only screen and (width >= 1750px) {
    .page-container, .main-container {
        width: 62vw;
        --font1: 300%;
        --font2: 175%;
        --font3: 400%;
        --font4: 175%;
        --font5: 125%;
        --font6: 100%;
    }
    .main-block-6 {
        background-color: lightgreen;
    }
    .nb-action-container-s{
        display: none;
    }
}
@media only screen and (width >= 1450px) and (width < 1750px) {
    /* 0% reduction on above */
    .page-container, .main-container {
        width: 72vw;
        --font1: 300%;
        --font2: 175%;
        --font3: 400%;
        --font4: 175%;
        --font5: 125%;
        --font6: 190%;
    }
    .main-block-6 {
        background-color: red;
    }
    .nb-action-container-s {
        display: none;
    }
}

@media only screen and (width >= 850px) and (width < 1450px) {
    /* 20% reduction on above */
    .page-container, .main-container {
        width: 72vw;
        --font1: 240%;
        --font2: 140%;
        --font3: 320%;
        --font4: 140%;
        --font5: 100%;
        --font6: 80%;
    }
    .main-block-6 {
        background-color: yellow;
    }
    .nb-action-container-s {
        display: none;
    }
    .ui-widget-content {
        border: none !important;
    }
}
@media only screen and (width >= 720px) and (width < 850px) {
    /* phone : ipad */
    .page-container, .main-container {
        width: 96vw;
        height: 1500px;
        --font1: 400%;
        --font2: 325%;
        --font3: 600%;
        --font4: 250%;
        --font5: 160%;
        --font6: 140%;
    }
    .main-block-6 {
        background-color: orange;
    }
    .nb-action-container {
        display: none;
    }
}

@media only screen and (width < 720px) {
    .page-container, .main-container {
        width: 98vw;
        height: 1100px;
        --font1: 360%;
        --font2: 225%;
        --font3: 360%;
        --font4: 225%;
        --font5: 140%;
        --font6: 120%;
    }
    .main-block-6 {
        background-color: steelblue;
    }
    .nb-action-container {
        display: none;
    }
}