.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

#c302278 .tx-powermail h3,
#c305206 .tx-powermail h3,
#c305318 .tx-powermail h3 {
    display: block;
}

/* Don't hide the 1st row in the powermail output table.
 This is because we remove the 1st row using JavaScript. This makes the 2nd row
 (which contains proper event data) now the 1st row. */
#c302278 .powermail_frontend table tr:nth-child(1),
#c305206 .powermail_frontend table tr:nth-child(1),
#c305318 .powermail_frontend table tr:nth-child(1) {
    display: block;
}

#c302278 .powermail_frontend table tr td:nth-child(3),
#c302278 .powermail_frontend table tr td:nth-child(4),
#c302278 .powermail_frontend table tr td:nth-child(5),
#c302278 .powermail_frontend table tr td:nth-child(6),
#c302278 .powermail_frontend table tr td:nth-child(7),
#c302278 .powermail_frontend table tr td:nth-child(8),
#c302278 .powermail_frontend table tr td:nth-child(9),
#c302278 .powermail_frontend table tr td:nth-child(10),
#c302278 .powermail_frontend table tr td:nth-child(11),
#c302278 .powermail_frontend table tr td:nth-child(12),
#c302278 .powermail_frontend table tr td:nth-child(13),
#c302278 .powermail_frontend table tr td:nth-child(14),
#c302278 .powermail_frontend table tr td:nth-child(15),
#c302278 .powermail_frontend table tr td:nth-child(16),
#c302278 .powermail_frontend table tr td:nth-child(17),
#c302278 .powermail_frontend table tr td:nth-child(18),
#c305206 .powermail_frontend table tr td:nth-child(3),
#c305206 .powermail_frontend table tr td:nth-child(4),
#c305206 .powermail_frontend table tr td:nth-child(5),
#c305206 .powermail_frontend table tr td:nth-child(6),
#c305206 .powermail_frontend table tr td:nth-child(7),
#c305206 .powermail_frontend table tr td:nth-child(8),
#c305206 .powermail_frontend table tr td:nth-child(9),
#c305206 .powermail_frontend table tr td:nth-child(10),
#c305206 .powermail_frontend table tr td:nth-child(11),
#c305206 .powermail_frontend table tr td:nth-child(12),
#c305206 .powermail_frontend table tr td:nth-child(13),
#c305206 .powermail_frontend table tr td:nth-child(14),
#c305206 .powermail_frontend table tr td:nth-child(15),
#c305206 .powermail_frontend table tr td:nth-child(16),
#c305206 .powermail_frontend table tr td:nth-child(17),
#c305206 .powermail_frontend table tr td:nth-child(18),
#c305318 .powermail_frontend table tr td:nth-child(3),
#c305318 .powermail_frontend table tr td:nth-child(4),
#c305318 .powermail_frontend table tr td:nth-child(5),
#c305318 .powermail_frontend table tr td:nth-child(6),
#c305318 .powermail_frontend table tr td:nth-child(7),
#c305318 .powermail_frontend table tr td:nth-child(8),
#c305318 .powermail_frontend table tr td:nth-child(9),
#c305318 .powermail_frontend table tr td:nth-child(10),
#c305318 .powermail_frontend table tr td:nth-child(11),
#c305318 .powermail_frontend table tr td:nth-child(12),
#c305318 .powermail_frontend table tr td:nth-child(13),
#c305318 .powermail_frontend table tr td:nth-child(14),
#c305318 .powermail_frontend table tr td:nth-child(15),
#c305318 .powermail_frontend table tr td:nth-child(16),
#c305318 .powermail_frontend table tr td:nth-child(17),
#c305318 .powermail_frontend table tr td:nth-child(18) {
    display: none;
}

#c302278 .powermail_frontend table tr,
#c305206 .powermail_frontend table tr,
#c305318 .powermail_frontend table tr {
    font-weight: 400;
}

#c302278 .powermail_frontend table tr td:nth-child(2),
#c305206 .powermail_frontend table tr td:nth-child(2),
#c305318 .powermail_frontend table tr td:nth-child(2) {
    width: 100%;
    padding: 0 0 12px;
}

.np-events-app {
    padding: 0;
    font-size: 1.143em;
}

.np-events-app > .cols > div {
    padding-left: 8px;
    padding-right: 8px;
    background-color: #fff;
}

#site-body-wrap--article.event-app .powermail_legend {
    display: block;
}

body[data-page-id="21659"] .events-list-header-grid {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-gap: 20px;
}

body[data-page-id="21659"] .filter-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#c302278 .powermail_frontend {
    margin-top: 25px;
}

#c302278 .powermail_frontend .item,
#c305206 .powermail_frontend .item,
#c305318 .powermail_frontend .item {
    display: grid;
    border: 1px solid #ccc;
    margin-bottom: 1.5em;
    grid-template-columns: 60px 1fr;
    grid-template-areas: 'el-event-date el-event-details';
}

#c305206 .powermail_frontend .item,
#c305318 .powermail_frontend .item {
    display: none;
    margin-bottom: 1em;
}

/* Only show 3 events in the listing that shown in the middle column of the 3-column section at the bottom of the home
and article pages. */
#c305206 .powermail_frontend .item:nth-child(-n+4),
#c305318 .powermail_frontend .item:nth-child(-n+4) {
    display: grid;
}

#c302278 .powermail_frontend .item > .date,
#c305206 .powermail_frontend .item > .date,
#c305318 .powermail_frontend .item > .date {
    grid-area: el-event-date;
}

#c302278 .powermail_frontend .item .event-details,
#c305206 .powermail_frontend .item .event-details,
#c305318 .powermail_frontend .item .event-details {
    grid-area: el-event-details;
}

#c302278 .powermail_frontend .item .event-details .core-details,
#c302278 .powermail_frontend .item .event-details .more-details .more-details-inner {
    display: grid;
    grid-template-columns: 1fr 120px;
    grid-column-gap: 20px;
}

#c305206 .powermail_frontend .item .event-details .core-details,
#c305206 .powermail_frontend .item .event-details .more-details .more-details-inner,
#c305318 .powermail_frontend .item .event-details .core-details,
#c305318 .powermail_frontend .item .event-details .more-details .more-details-inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
}

#c302278 .powermail_frontend .item .event-details .core-details .cd-right-col {
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    flex-wrap: wrap;
}

#c305206 .powermail_frontend .item .event-details .core-details .cd-right-col,
#c305318 .powermail_frontend .item .event-details .core-details .cd-right-col {
    display: none;
}

#c302278 .powermail_frontend .item .event-details .more-details,
#c305206 .powermail_frontend .item .event-details .more-details,
#c305318 .powermail_frontend .item .event-details .more-details {
    display: none;
}

#c302278 .powermail_frontend .item > .date .date-inner,
#c305206 .powermail_frontend .item > .date .date-inner,
#c305318 .powermail_frontend .item > .date .date-inner {
    text-align: center;
    padding: 5px 8px;
    display: inline-block;
    background-color: #eee;
}

#c302278 .powermail_frontend .item > .date .month,
#c305206 .powermail_frontend .item > .date .month,
#c305318 .powermail_frontend .item > .date .month {
    display: block;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

#c302278 .powermail_frontend .item > .date .day,
#c305206 .powermail_frontend .item > .date .day,
#c305318 .powermail_frontend .item > .date .day {
    display: block;
    padding: 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

#c302278 .powermail_frontend .item .event-details {
    padding: 1em .5em .7em 0;
}

#c305206 .powermail_frontend .item .event-details,
#c305318 .powermail_frontend .item .event-details{
    padding: .7em .5em .7em 0;
}

#c302278 .powermail_frontend .item .event-details h3,
#c305206 .powermail_frontend .item .event-details h3,
#c305318 .powermail_frontend .item .event-details h3 {
    margin: 0 0 4px;
    font-size: 1.4em;
    color: #e22226;
}

#c302278 .powermail_frontend .item .event-details h3.event-title,
#c305206 .powermail_frontend .item .event-details h3.event-title,
#c305318 .powermail_frontend .item .event-details h3.event-title {
    color: #555;
}

#c302278 .powermail_frontend .action-buttons,
#c305206 .powermail_frontend .action-buttons,
#c305318 .powermail_frontend .action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 4px 0;
}

#c302278 .powermail_frontend .action-buttons .spacer,
#c305206 .powermail_frontend .action-buttons .spacer,
#c305318 .powermail_frontend .action-buttons .spacer {
    width: 8px;
}


/* START: Mobile project filter */
.mobile-filter-wrap {
    position: relative;
    z-index: 1;
    font-size: .8889em;
}

.mobile-filter-wrap #filter-btn {
    float: left;
    padding: 6px .7rem 5px;
    background-color: #e22226;
    border: 3px solid #e22226;
}

.mobile-filter-wrap .custom-select-menu {
    float: left;
}

.mobile-filter-wrap .custom-select-menu:focus {
    outline: none;
}

.mobile-filter-wrap .custom-select-menu {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 250px;
    height: 36px;
    border: 1px solid #e1d8cd;
}

.mobile-filter-wrap .custom-select-menu .option {
    margin: 0;
    padding: 0 30px 0 10px;
    min-height: 36px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: #eee solid 1px;
    position: absolute;
    top: 0;
    width: 100%;
    pointer-events: none;
    order: 2;
    z-index: 1;
    transition: background .4s ease-in-out;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 1.15em;
}

.mobile-filter-wrap .custom-select-menu:focus .option {
    position: relative;
    pointer-events: all;
}

.mobile-filter-wrap .custom-select-menu input {
    opacity: 0;
    position: absolute;
    left: -99999px;
}

.mobile-filter-wrap .custom-select-menu input:checked + label {
    order: 1;
    z-index: 2;
    background: #fff;
    border-top: none;
    position: relative;
    border-bottom: 1px solid #e1d8cd;
    border-left: none;
    border-right: none;
    font-size: 1.15em;
}

.mobile-filter-wrap .custom-select-menu input:not(:checked) + label:last-child {
    border-bottom: 1px solid #e1d8cd;
}

.mobile-filter-wrap .custom-select-menu input + label {
    border-left: 1px solid #e1d8cd;
    border-right: 1px solid #e1d8cd;
}

.mobile-filter-wrap .custom-select-menu input:checked + label:after {
    content: '';
    width: 40px;
    height: 40px;
    background: transparent url('../images/icons/icon-chevron-down.svg') no-repeat;
    background-position: center 50%;
    background-size: 15px 7px;

    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none;
    z-index: 3;
}

.mobile-filter-wrap .custom-select-menu input:checked + label:before {
    position: absolute;
    right: 0;
    height: 40px;
    width: 40px;
    content: '';
    background: #fff;
}

@media only screen and (max-width: 480px) {
    .mobile-filter-wrap {
        display: inline-block;
    }
}

/* END: Mobile project filter */


.np-events-app .button-secondary,
#event-details .button-secondary {
    display: inline-block;
    align-self: center;
    padding: 7px 12px;
    background-color: #52aedf;
    color: #fff !important;
    text-decoration: none;
    line-height: 1;
    border-radius: 0;
    border-bottom: none !important;
    box-shadow: none !important;
}

.np-events-app .button-secondary:hover,
#event-details .button-secondary:hover {
    background-color: #797994 !important;
}

#event-details {
    padding-bottom: 15px;
}

#selEventCategories {
    margin-bottom: 20px;
}

#events-category-toggle-btn {
    display: none;
    cursor: pointer;
}

#events-calendar-toggle-btn {
    display: none;
    cursor: pointer;
}

#mobile-event-nav-bar {
    margin-bottom: 11px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.np-events-app a.redlink,
.np-events-app a.redlink,
.np-events-app a.redlink,
.np-events-app a.redlink,
.np-events-app a.redlink {
    color: #e22226;
    text-decoration: none;
}

#events-search-icon--mobile {
    display: none;
    margin-left: 34px;
    width: 33px;
    height: auto;
    cursor: pointer;
}

/* START: Events calendar --------------  */
#events-calendar .calendar-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    color: #fff;
    background: #e22226;
    line-height: 1.7em;
    text-align: center;
    margin: 0;
    padding: 0.6em 0;
    font-size: .962em;
}

#events-calendar .calendar-title .prev,
#events-calendar .calendar-title .next {
    width: 40px;
    align-self: center;
    color: #fff !important;
    font-size: 1.75em;
}

#events-calendar .calendar-title h2 {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.6em;
}

#events-calendar table th.day-name {
    text-align: center;
    vertical-align: middle;
    cursor: default;
    padding: 0.6em 0;
    color: #fff;
    background: #555;
    border: none;
    font-family: 'Antonio regular', sans-serif;
    font-size: 1.3em;
}

#events-calendar table td {
    padding: .7em 0;
    background: #f0f0ed;
    color: #989898;
    text-align: center;
    vertical-align: middle;
    border: none;
}

#events-calendar table td.valid-month-day {
    background: #f0f0ed;
    color: #474647;
    font-weight: normal;
    font-size: 1.05em;
}

#events-calendar table td.today {
    border: 2px solid #333;
}

#events-calendar table td.day-has-event {
    background: #e27676;
    color: #fff;
    cursor: pointer;
}

#events-calendar .event-data {
    display: none;
}

#calendar-key {
    display: table;
    width: 100%;
    table-layout: fixed;
    font-size: .85em;
}

#calendar-key .heading {
    margin-bottom: 8px;
    font-weight: bold;
    text-decoration: underline;
}

#calendar-key .key-today {
    display: table-cell;
    border: 2px solid #333;
    width: 30px;
    height: 30px;
}

#calendar-key .key-value {
    display: table-cell;
    padding-left: 12px;
    flex: 1 0;
}

#calendar-key .key-event-day {
    display: table-cell;
    background-color: #e27676;
    width: 30px;
    height: 30px;
}

.css-table-row {
    display: flex;
    padding-bottom: 12px;
}

/* END: Events calendar --------------  */

/* START: Events calendar modal ------ */
#eventsCalendarModal.in {
    top: 150px;
}

#eventsCalendarModal .modal-content {
    background-color: #fff;
}

#eventsCalendarModal .modal-body .event-title a {
    color: #555;
    text-decoration: none;
}

#eventsCalendarModal .modal-body .event-title {
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 1.3em;
}

#eventsCalendarModal .modal-body .event-title:first-child {
    margin: 0;
}

/* END: Events calendar modal ------ */

/* START: Event detail page -- */
#event-details .btn-back,
.np-events-app .btn-back,
.article-body.list-an-event .btn-back {
    color: #e22226;
    cursor: pointer;
    font-size: 2em;
}

.np-events-app .btn-back {
    margin-right: 20px;
}

#event-details .event-title {
    color: #555;
}

#event-details .event-date {
    text-transform: uppercase;
    color: #e22226;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
}

#event-details .image-wrap img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

#event-details .event-details-label {
    padding-left: 8px;
    font-weight: bold;
}

#event-details .event-details-prop-value {
    padding-left: 8px;
}

/* END: Event detail page -- */

#eventsCalendarModal .modal-header {
    background-color: #e22226;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#eventsCalendarModal .modal-header button.close {
    color: #fff;
    opacity: 1;
}

#eventsCalendarModal .modal-title {
    font-size: 1.5em;
    color: #fff;
}

/* START: ----------Event category drop-down menu ------------ */
/* The container <div> - needed to position the dropdown content */
#dropdownEventCategories {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}

/* Dropdown Button */
#dropdownEventCategories .dropbtn {
    /*background-color: #3498DB;*/
    /*background-color: #fff;*/
    background: url(https://www.newsport.com.au/fileadmin/templates/images/down_arrow_select_2.jpg) no-repeat right 0 top 50% #fff;
    width: 100%;
    /*color: white;*/
    padding: 5px 43px 6px 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: left;
}

/* Dropdown button on hover & focus */
/*
#dropdownEventCategories .dropbtn:hover,
#dropdownEventCategories .dropbtn:focus {
  background-color: #2980B9;
}
*/

/* Dropdown Content (Hidden by Default) */
#dropdownEventCategories .dropdown-content {
    display: none;
    position: absolute;
    max-height: 400px;
    overflow: scroll;
    /*background-color: #f1f1f1;*/
    background-color: #fff;
    /*min-width: 160px;*/
    /*width: calc(90vw - 47px);*/
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */
#dropdownEventCategories .cat-item {
    color: black;
    padding: 9px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

/*
#dropdownEventCategories .cat-item:first-child {
  display: none;
}
*/

/* Change color of dropdown links on hover */
#dropdownEventCategories .cat-item:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
#dropdownEventCategories .show {
    display: block;
}

/* END: ----------Event category drop-down menu ------------ */

@media all and (max-width: 1230px) {
    #eventsCalendarModal.in {
        top: 96px;
    }
}

@media only screen and (min-width: 0px) {
    /*
    Responsive Equal Height Boxes for Twitter Bootstrap 3
    Source: http://codepen.io/bootstrapped/details/RrabNe/
    */
    .flex-row.row {
        display: flex;
        flex-wrap: wrap;
    }

    .flex-row.row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    .flex-row.row:after,
    .flex-row.row:before {
        display: flex;
    }
}


@media only screen and (min-width: 767px) and (max-width: 865px) {
    #c303457 .events-list-header-grid {
        grid-template-columns: 1fr;
    }

    #c303457 .events-list-header-grid .filter-box {
        justify-content: flex-start;
    }
}

/* Small Devices, Tablets (Bootstrap col-sm-*) */
@media only screen and (max-width: 768px) {
    .event-listing-grid {
        flex-wrap: wrap;
    }

    .event-listing-grid .grid-box-1 {
        order: 2;
        flex: 1 1 100%;
        max-width: 100%;
    }

    .np-events-app .event-page-title-block {
        margin-bottom: 12px;
    }

    .np-events-app .event-page-title-block h1,
    .np-events-app .event-page-title-block h2 {
        font-size: 1.4em;
    }

    .np-events-app > .cols.cols-100 > div {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .np-events-app > .event-page-title-block.cols.cols-100 > div {
        padding-top: 0;
        padding-bottom: 0;
    }

    #event-details .event-details-prop-value {
        margin-bottom: 8px;
    }

    .np-events-app .cols-66-33 .right-col .mobile-advert-wrap {
        display: block;
    }

    #c302278 .powermail_frontend .item .event-details .core-details,
    #c305206 .powermail_frontend .item .event-details .core-details,
    #c305318 .powermail_frontend .item .event-details .core-details,
    #c302278 .powermail_frontend .item .event-details .more-details .more-details-inner,
    #c305206 .powermail_frontend .item .event-details .more-details .more-details-inner,
    #c305318 .powermail_frontend .item .event-details .more-details .more-details-inner{
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 20px;
    }

    #c302278 .powermail_frontend .item .event-details .core-details .cd-right-col .button-primary:first-child {
        margin-right: 8px;
    }
}

@media only screen and (max-width: 550px) {
    #c303457 .events-list-header-grid {
        grid-template-columns: 1fr;
    }

    #c303457 .events-list-header-grid .filter-box {
        justify-content: flex-start;
    }
}

@media all and (min-width: 501px) {
    #dropdownEventCategories {
        display: block !important;
    }

    #events-search-form-wrapper {
        display: block !important;
    }

    #events-calendar {
        display: block !important;
    }
}

@media all and (max-width: 500px) {
    /*
    #events-search-icon--mobile {
      !*display: inline;*!
      display: inline-block;
    }
    */
    #events-category-toggle-btn,
    #events-calendar-toggle-btn {
        /*display: inline-block;*/
        line-height: inherit;
        display: block;
        height: 100%;
        margin: 0;
        flex: 0 0 32%;
        text-align: center;
    }

    #dropdownEventCategories {
        display: none;
    }

    #events-search-form-wrapper {
        display: none;
    }

    #dropdownEventCategories .dropdown-content {
        max-height: 300px;
        /*max-height: inherit;*/
    }

    #events-calendar {
        display: none;
    }

    .list-events-wrapper--desktop {
        display: none;
    }

    #c302278 .powermail_frontend,
    #c305206 .powermail_frontend,
    #c305318 .powermail_frontend {
        margin-top: 15px;
    }

    #eventsCalendarModal.in {
        top: 70px;
    }
}

@media all and (max-width: 400px) {
    #events-category-toggle-btn,
    #events-calendar-toggle-btn {
        font-size: .9em;
    }

    .mobile-filter-wrap .custom-select-menu {
        width: 200px;
    }
}

@media all and (max-width: 370px) {
    #events-category-toggle-btn,
    #events-calendar-toggle-btn {
        font-size: .8em;
    }
}