:root {

}

tr.over-16 {
    background-color: #FFD0D0 !important;
    font-weight:      bold;
}

div.logo img {
    max-height: 4.375rem;
}

.grading-form-container table {
    margin-top: 36px;
}

.grading-form-container div.tab {
    margin-bottom: 16px;
}

.vol1 {
    color: #669900;
}

.vol2 {
    color: #336699;
}

.vol4 {
    color: #990000;
}

.vol3 {
    color: #FF6600;
}

.marshalling {
    width: 25%;
}

/* Style the tab */
.tab {
    overflow:         hidden;
    border:           1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float:            left;
    border:           none;
    outline:          none;
    cursor:           pointer;
    padding:          14px 16px;
    transition:       0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display:    none;
    padding:    6px 12px;
    border:     1px solid #ccc;
    border-top: none;
}

body {
    margin:           0;
    font-family:      "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size:        1rem;
    font-weight:      400;
    line-height:      1.5;
    color:            #858796;
    text-align:       left;
    background-color: #F5F5F5;
}

div.submit a.cancel {
    margin-left: 15px;
}

.edit-member-title-tab {
    border-bottom: 1px solid #e3e6f0;
    margin-bottom: 20px;
}

/* Start Legend member list */
.totals-bar {
    background-color:                #FFFFFF;
    color:                           #666666;
    border-bottom:                   2px #CCCCCC;
    -webkit-border-top-left-radius:  6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft:      6px;
    -moz-border-radius-topright:     6px;
    border-top-left-radius:          6px;
    border-top-right-radius:         6px;
    -webkit-box-shadow:              0 0 21px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow:                 0 0 21px 0 rgba(0, 0, 0, 0.4);
    box-shadow:                      0 0 21px 0 rgba(0, 0, 0, 0.4);
    padding:                         8px 8px 20px;
    position:                        sticky;
    bottom:                          0;
}

table.legend {
    width: 100%;
}

table.legend td {
    padding: 6px;
}

.totals-bar table.legend span {
    font-weight: bold;
}

.totals-bar .total-volunteered {
    color: #33D633
}

.totals-bar .total-cancelled {
    color: #D11919
}

.totals-bar .total-self-cancelled {
    color: #3399FF
}

.totals-bar .total-no-show {
    color: #FF9933
}

/* End */

#sidebarToggle,
#navReports,
#navSettings,
#nacAccount {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;

    span {
        font-size: .5em;
    }
}

div.members.index table thead {
    background-color: #EEEEEE;
}

div.members.index .table {
    --bs-table-color:         var(--bs-body-color);
    --bs-table-bg:            transparent;
    --bs-table-border-color:  var(--bs-border-color);
    --bs-table-accent-bg:     transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg:    rgba(0, 0, 0, 0.05);
    --bs-table-active-color:  var(--bs-body-color);
    --bs-table-active-bg:     rgba(0, 0, 0, 0.1);
    --bs-table-hover-color:   var(--bs-body-color);
    --bs-table-hover-bg:      #99CC00;
    width:                    100%;
    margin-bottom:            1rem;
    color:                    var(--bs-table-color);
    vertical-align:           top;
    border-color:             var(--bs-table-border-color);
}

.navbar.bg-grey {
    background-color: #505050;
}

.sb-sidenav-dark {
    background-color: #454545;
}

a {
    color:            #4e73df;
    text-decoration:  none;
    background-color: transparent;
}

a:hover {
    color: #224abe;
    /*text-decoration: underline;*/
}

.form-switch .form-check-input:checked {
    background-color: #8AA700;
    border-color:     rgba(138, 167, 0, 1);
}

.btn.cancel {
    background-color: #7B7B7B;
    border:           1px solid #7B7B7B;
}

.btn.cancel:hover {
    text-decoration: none;
}

.btn.save {
    background-color: #889E0C;
    border:           1px solid #889E0C;
}

.btn.save:hover {
    background-color: #9fb90d;
    border:           1px solid #9fb90d;
}

div#grading .nav-pills .nav-link {
    color:            #FFFFFF;
    background-color: #B0B0B0;
}

div#grading .nav-pills .nav-link.active {
    background-color: #4B4B4B;
}

div#grading .nav-pills .nav-link:hover {
    background-color: #707070;
}

div#grading .nav-pills button {
    margin: 1px;
}

.check-subscriber {
    border-top:    1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
    margin:        15px 0;
    padding:       12px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #eaecf4;
    opacity:          1;
}

:root {
    --bs-primary-rgb: 20, 40, 73;
}

.bg-primary {
    --bs-bg-opacity:  1;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    background-image: radial-gradient(circle, #165387, #142849);
}

.nav-pills {
    --bs-nav-pills-border-radius:     2px;
    --bs-nav-pills-link-color:        #000000;
    --bs-nav-pills-link-hover-color:  #666666;
    --bs-nav-pills-link-active-color: #FFFFFF;
    --bs-nav-pills-link-active-bg:    transparent;
    --bs-nav-link-disabled-color:     transparent;
    --bs-nav-pills-background-color:  transparent;
}

.nav-pills .nav-link {
    background-color: var(--bs-nav-pills-background-color);
    border:           0;
    border-radius:    var(--bs-nav-pills-border-radius);
    color:            var(--bs-nav-pills-link-color);
}

.nav-pills .nav-link:disabled {
    color:            var(--bs-nav-link-disabled-color);
    background-color: transparent;
    border-color:     transparent;
    border-radius:    var(--bs-nav-pills-border-radius);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color:            var(--bs-nav-pills-link-active-color);
    background-color: var(--bs-nav-pills-link-active-bg);
    border-radius:    var(--bs-nav-pills-border-radius);
}

.nav-pills .nav-link:hover {
    color: var(--bs-nav-pills-link-hover-color);
}

.nav-pills .nav-link.active:hover {
    color: var(--bs-nav-pills-link-active-color);
}

.nav-div .nav-pills .nav-link {
    position: relative;
}

/* Triangle underneath the active item */
.nav-div .nav-pills a.active::before {
    content:             '';
    position:            absolute;
    border:              7px solid transparent;
    border-top:          0;
    border-bottom-color: var(--bs-nav-pills-link-active-color);
    left:                50%;
    bottom:              0;
    transform:           translateX(-50%);
}

.nav-div {
    background-color: #E87900;
    border-radius:    var(--bs-nav-pills-border-radius);
}

.mb-3-filter {
    margin-bottom: 1rem !important;
    float:         left;
    width:         33%;
}

.mb-3-dates {
    margin-bottom: 1rem !important;
    width:         50%;
    float:         left;
}

.bg-column-filtering {
    background-color: #505050;
}

.btn-filtering {
    text-align: center;
}

.navbar > .filter-columns.container-fluid {
    display:         flex;
    flex-wrap:       inherit;
    align-items:     center;
    justify-content: space-between;
    flex-direction:  column;
}

.row .filter {
    margin-top: 10px;
}

#layoutSidenav #layoutSidenav_nav {
    flex-basis:  1024px;
    flex-shrink: 0;
    transition:  transform 0.15s ease-in-out;
    z-index:     1038;
    transform:   translateX(0);
}

@media (min-width: 992px) {
    #layoutSidenav #layoutSidenav_nav {
        transform: translateX(0);
    }

    #layoutSidenav #layoutSidenav_content {
        margin-left: -1024px;
        transition:  margin 0.15s ease-in-out;
    }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
        transform: translateX(-1024px);
    }
}

.page-link.active, .datatable-pagination a.active, .active > .page-link, .datatable-pagination .active > a {
    z-index:          0;
    color:            var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color:     var(--bs-pagination-active-border-color);
}

.h1-title {
    color: #ffffff;
}

.user-title {
    text-align:         right;
    border-width:       0;
    border-right-width: 1px;
    border-color:       #858796;
    border-style:       solid;
    padding-right:      15px;
}

.user-name {
    font-size:   1.3rem;
    font-weight: bold;
}

.user-role {
    text-overflow: ellipsis;
    white-space:   nowrap;
    overflow:      hidden;
}

.submit-bar {
    background-color: #505050;
    border-color:     #ced4da;
    padding:          10px;
    border-radius:    5px;
    bottom:           0;
    position:         sticky;
}

.filter-buttons {
    margin-left: 0.5rem;
}

.filter-bar {
    background-color: whitesmoke;
    top:              0;
    position:         sticky;
    z-index:          1020;
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute;
    z-index:  9999;
}

.members-list-back {
    margin-left: auto;
}

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
    margin-left: -1024px;
}

.form-switch .form-check-input-archived:checked {
    background-color: #1F6A9D;
    border-color:     rgb(187, 211, 248);
}

.form-switch .form-check-input-archived:checked:focus {
    outline: 4px solid rgb(187, 211, 248);
}

.form-switch .form-check-input-lapsed:checked {
    background-color: #8B0000;
    border-color:     rgb(245, 98, 98);
}

.form-switch .form-check-input-lapsed:checked:focus {
    outline: 4px solid rgb(245, 98, 98);
}

.active-label {
    color:       #8AA700;
    font-weight: bold;
}

.renewed-label {
    color:       #8AA700;
    font-weight: bold;
}

.archived-label {
    color:       #1F6A9D;
    font-weight: bold;
}

.lapsed-label {
    color:       #8B0000;
    font-weight: bold;
}

#layoutSidenav #layoutSidenav_content {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    min-width:       0;
    flex-grow:       1;
    min-height:      calc(100vh - 56px);
    margin-left:     -1024px;
}

.display-fields {
    font-size: 0.75rem;
    color:     white;
}

.display-fields-heading {
    font-size: 1rem;
}

.display-fields-presets {
    flex:  0 0 auto;
    width: 66.66666667%;
}

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
    transform: translateX(-1024px);
}

.sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    content:    none;
    display:    block;
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    background: transparent;
    z-index:    1037;
    opacity:    0.5;
    transition: opacity 0.3s ease-in-out;
}

/* Status bar */
.member-pay {
    display:       inline-flex !important;
    color:         white;
    padding:       8px 10px 8px 10px;
    width:         30px;
    margin-right:  10px;
    border-radius: 30px;
    font-size:     15px;
    line-height:   15px;
    text-align:    center;
    float:         left;
}

.member-pay-true {
    background-color: #669900;
    font-weight:      bold;
}

.member-pay-false {
    background-color: #8B0000;
}

.status-flag {
    margin-left: auto;
    text-align:  center;
}

.member-active {
    display:                   inline-flex !important;
    padding:                   8px 25px 8px 25px;
    color:                     white;
    border-top-left-radius:    30px;
    border-bottom-left-radius: 30px;
    font-size:                 15px;
    line-height:               15px;
    margin-right:              0;
    margin-left:               10px;
    float:                     left;
}

.member-lapsed {
    display:                    inline-flex !important;
    padding:                    8px 25px 8px 25px;
    color:                      white;
    border-top-right-radius:    30px;
    border-bottom-right-radius: 30px;
    font-size:                  15px;
    line-height:                15px;
    margin-left:                0;
    margin-right:               10px;
    float:                      left;
}

.member-active-true {
    background-color: #669900;
    font-weight:      bold;
}

.member-active-false {
    background-color: #666666;
    color:            #999999;
}

.member-lapsed-true {
    background-color: #8B0000;
    font-weight:      bold;
}

.member-lapsed-false {
    background-color: #666666;
    color:            #999999;
}

.member-highlight-archived {
    outline:          1px solid #8B0000;
    padding:          .5em;
    background-color: lavenderblush;
}

.member-highlight-archived .form-control[readonly],
.member-highlight-archived .form-select:disabled {
    background-color: #8B0000;
    color:            #FFFFFF;
}

/* Search bar elements */
.search-field-box {
    display: inline-flex !important;
}

.search-box {
    border-bottom:       1px;
    border-bottom-style: solid;
    border-bottom-color: #DEE2E6;
    box-shadow:          0 5px 5px rgba(0, 0, 0, 0.175);
    margin-top:          -20px;
    margin-bottom:       10px;
}

.search-checkbox {
    width:   8.333333%;
    flex:    0 0 auto;
    display: inline-flex !important;
}

.search-actions {
    width:   50%;
    display: inline-flex !important;
}

.search-search-btn {
    width:   16.66666667%;
    display: inline-flex !important;
}

.search-box-container {
    display:        inline-flex !important;
    padding-bottom: 1em;
}

.search-to-col {
    text-align:   center;
    margin-left:  1%;
    margin-right: 1%;
}

.search-container {
    height: 60px;
}

.btn-search {
    height:          60px;
    display:         inline-flex;
    justify-content: center;
    align-items:     center;
}

.btn.btn-search.filter-buttons svg {
    padding-right: .4rem;
}

@media (max-width: 1080px) {
    .search-checkbox {
        width: 16.66666667%;
        flex:  0 0 auto;
    }

    .search-search-btn {
        width: 8.33333333%;
    }

    .display-fields-presets {
        flex:  0 0 auto;
        width: 50%;
    }

    .display-fields {
        font-size: 0.60rem;
    }

    .display-fields-heading {
        font-size: 0.75rem;
    }
}

@media (max-width: 960px) {
    .search-checkbox {
        width:   16%;
        flex:    0 0 auto;
        display: inline-flex !important;
    }

    .search-search-btn {
        width:   25%;
        display: inline-flex !important;
    }

    .search-actions {
        width:   50%;
        display: inline-flex !important;
    }

    .news-field {
        margin-left: 10px;
    }

    .display-fields {
        font-size: 0.50rem;
    }

    .display-fields-heading {
        font-size: 0.65rem;
    }

    #layoutSidenav #layoutSidenav_nav {
        flex-basis:  725px;
        flex-shrink: 0;
        transition:  transform 0.15s ease-in-out;
        z-index:     1038;
        transform:   translateX(0);
    }

    .display-fields-actions {
        margin-bottom: 20px;
    }

    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
        margin-left: -725px;
    }
}

@media (max-width: 512px) {
    .search-box-container {
        display: block !important;
    }

    .search-field-box {
        display:       block !important;
        margin-bottom: 10px;
    }

    .search-checkbox {
        width:         45%;
        flex:          0 0 auto;
        display:       inline-flex !important;
        margin-bottom: 15px;
    }

    .search-search-btn {
        width:   25%;
        display: inline-flex !important;
    }

    .search-actions {
        width:   50%;
        display: inline-flex !important;
    }

    .btn-search {
        margin-top: -7px;
    }

    .region-field {
        margin-bottom: 10px;
    }

    .news-field {
        margin-left: 10px;
    }

    .h1-title {
        display: none;
    }

    .user-title {
        display: none;
    }
}

.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: transparent;
}