body {
    /*background: url('../Images/Patterns/bg_pattern.jpg');*/
    font-size: 12px;
    font-family: "Arial";
}
/*
TopBarRight
*/
.TopBarRight h5 {
    text-align: right;
}

#HeaderTitleLogo {
    /*background: url('../Images/Patterns/header_bg.png') #f9f9f9;*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-top: 15px;
    border-radius: 25px 25px 0 0;
    box-shadow: 0 0 78px -11px;
}

.bg-light {
    background-color: rgb(186, 191, 139) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
    margin-bottom: 16px;
}

#MainHeader {
    /*background-color: rgb(186, 191, 139) !important;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .75);
    margin-bottom: 16px;*/
    /*height:0;*/
}

#logoRight a {
    float: right;
    margin-bottom: -35px;
}
/* ---- The site navigation bar ------------------------------------------------------------------
   The bar in Views/Shared/_Layout.cshtml, on every page (prds/2026-09-27-site-navigation-styling).
   The bar's olive comes from the .bg-light override above; everything here is scoped to
   #MainHeader so it cannot reach another .navbar, .nav-link or .dropdown-menu.

   Items are dark text on the olive. Hover, keyboard focus and the current page draw a maroon bar
   under the item: an ::after rather than a border, so showing it never moves the text. The
   current item is the one the layout marks .active and aria-current="page" (Navigation/NavSection).
   Administration is a slate pill, the colour of the admin landing page, and its bar sits below the
   pill, on the olive, where it can be seen.

   Contrast, on the colours they sit on:
     bar       #babf8b, item text #222 8.3:1, maroon bar #971119 4.5:1, focus ring #1f2a37 7.6:1
     dropdown  #fff, row text #222 15.9:1; hover/focus row #e3e6d2 12.5:1; pressed row #babf8b 8.3:1
     pill      #1f2a37, text #fff 14.5:1; hover/focus #3b5068 8.3:1
   --------------------------------------------------------------------------------------------- */

.nav-item {
    font-size: 15px;
    font-weight: bold;
}

.navbar {
    padding: 4px 10px;
    z-index: 1000;
}

.collapse {
    padding: 0;
}

#MainHeader .navbar-nav .nav-link {
    position: relative;
    color: #222;
}

#MainHeader .navbar-nav .nav-link:not(.dropdown-toggle)::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: transparent;
}

/* The dropdown toggles' caret is Bootstrap's own ::after, so their bar is drawn on ::before. */
#MainHeader .navbar-nav .dropdown-toggle::before {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: transparent;
}

#MainHeader .navbar-nav .nav-link:hover,
#MainHeader .navbar-nav .nav-link:focus,
#MainHeader .navbar-nav .nav-link.active,
#MainHeader .navbar-nav .show > .nav-link {
    color: #222;
}

#MainHeader .navbar-nav .nav-link:not(.dropdown-toggle):hover::after,
#MainHeader .navbar-nav .nav-link:not(.dropdown-toggle):focus::after,
#MainHeader .navbar-nav .nav-link.active:not(.dropdown-toggle)::after,
#MainHeader .navbar-nav .dropdown-toggle:hover::before,
#MainHeader .navbar-nav .dropdown-toggle:focus::before,
#MainHeader .navbar-nav .dropdown-toggle.active::before,
#MainHeader .navbar-nav .show > .dropdown-toggle::before {
    background: #971119;
}

#MainHeader .navbar-nav .nav-link:focus-visible {
    outline: 2px solid #1f2a37;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- Dropdown menus: white panels, olive-tinted rows. ---- */

.dropdown-menu {
    padding: 0;
    font: inherit !important;
}

#MainHeader .dropdown-menu {
    padding: 4px 0;
    background: #fff;
    border: 1px solid #e3e6d2;
    border-top: 3px solid #971119;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

#MainHeader .dropdown-item {
    padding: 8px 16px;
    color: #222;
    font-weight: normal;
}

#MainHeader .dropdown-item:hover,
#MainHeader .dropdown-item:focus {
    background: #e3e6d2;
    color: #222;
}

#MainHeader .dropdown-item:active {
    background: #babf8b;
    color: #222;
}

#MainHeader .dropdown-item:focus-visible {
    outline: 2px solid #1f2a37;
    outline-offset: -2px;
}

/* ---- Administration: the slate pill. ---- */

#MainHeader .navbar-nav .nav-link.nav-admin {
    display: inline-block;
    margin: 2px 0 2px .5rem;
    padding: .3rem .95rem;
    border-radius: 999px;
    background: #1f2a37;
    color: #fff;
}

#MainHeader .navbar-nav .nav-link.nav-admin:hover,
#MainHeader .navbar-nav .nav-link.nav-admin:focus {
    background: #3b5068;
    color: #fff;
}

#MainHeader .navbar-nav .nav-link.nav-admin::after {
    left: .95rem;
    right: .95rem;
    bottom: -6px;
}

#MidWorper {
    background: #f8f8f6;
    padding-top: 0;
    padding-bottom: 15px;
    box-shadow: 0 0 15px -10px;
    border-radius: 0 0 10px 10px;
    margin-bottom: 60px;
    min-height: 650px;
}

    #MidWorper img {
        opacity: 1;
    }

a.Learn_More {
    font-size: 10px;
    font-family: "Open Sans";
    color: rgb( 153, 153, 153 );
    text-transform: uppercase;
}



#buttonGorug {
    padding: 0;
}

.donate {
    border-radius: 0;
    background-color: rgb( 228, 106, 14 );
    font-size: 16px;
    font-family: "Open Sans";
    color: rgb( 255, 255, 255 );
    text-transform: uppercase;
    line-height: 2.2;
}


.bookOnline, .TaPa {
    border-radius: 0;
    background-color: rgb( 186, 191, 139 );
    font-size: 14px;
    font-family: "Open Sans";
    color: rgb( 255, 255, 255 );
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.5;
}


#faceBook {
    text-align: center;
    background-color: #fff;
    margin: 10px 0;
    /*border-radius: 6px;*/
    padding: 20px 0;
    border: 1px solid #e7e7e7;
}

    #faceBook img {
        width: 100%;
        padding: 10px;
    }

#Sponsers {
    background-color: #fff;
    padding: 0 15px 30px 15px;
    margin-top: 10px;
    /*border-radius: 6px;*/
    border: 1px solid #e7e7e7;
}

    #Sponsers h3 {
        padding: 0 0 0 40px;
        background: url(../Images/Icons/bcas-icon-round.png) no-repeat;
        font-size: 16px;
        font-family: "Open Sans";
        color: rgb( 151, 17, 25 );
        text-transform: uppercase;
        line-height: 1.8;
        margin: 5px 0 0 0;
        background-size: 30px;
    }

.sponsorImage {
    display: inline-block;
    padding-bottom: 10px;
    width: 49%;
}

    .sponsorImage:nth-child(odd) {
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
    }

    .sponsorImage:nth-child(even) {
        border-bottom: 1px solid #fff;
    }

/*.sponsorImage:nth-child(3) {
        border-right: 1px solid #ccc;
         border-right: 1px solid #ccc;
    }*/



/*.form-group input {
    border: solid 1px rgb( 204, 204, 204 );
    background-color: rgb( 244, 244, 244 );
    width: 100%;
    font-size: 12px;
    font-family: "Arial";
    color: rgb( 153, 153, 153 );
    line-height: 1.834;
}*/

.checkbox label {
    font-size: 12px;
    font-family: "Arial";
    color: rgb( 102, 102, 102 );
    line-height: 1.834;
}

input[type=checkbox] {
    height: 15px;
    width: 15px;
    /* border-radius: 0; */
    /* background-color: #fff; */
}

.signUp {
    background-color: rgb( 186, 191, 139 );
    font-size: 12px;
    font-family: "Open Sans";
    color: rgb( 255, 255, 255 );
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.834;
    border-radius: 0;
}



#footerLeft h3 {
    font-size: 12px;
    font-family: "Arial";
    color: rgb( 151, 17, 25 );
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

#footerLeft p {
    font-size: 11px;
    font-family: "Arial";
    color: #000;
    font-weight: bold;
    line-height: 1.5;
}

#footerLeft img {
    float: left;
    margin: 0 20px 20px 0;
}

#footerRigt p {
    text-align: right;
    border-right: 1px solid #ccc;
    padding: 0 12px 0 0;
    font-size: 11px;
    font-family: "Arial";
    color: rgb( 102, 102, 102 );
    line-height: 1.636;
}

#footerRigt a {
    float: right;
}

.social {
    padding: 0;
}

    .social a.fb {
        background: url(../Images/Icons/facebook_1.png);
        background-repeat: no-repeat;
        display: block;
        padding: 15px;
        margin: 0 3px;
    }




#MainFooter {
    margin-top: -40px;
}

.btnPhotoGallery {
    height: 40px;
    border-radius: 0;
    background: url('../Images/Patterns/gallerythumb.png') #f9f9f9;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 15px;
    font-family: "Open Sans";
    font-weight: bold;
    color: rgb( 255, 255, 255 );
    text-transform: uppercase;
    line-height: 2.2;
    text-align: center;
    margin-bottom: 8px;
    padding-top: 3px;
}

    .btnPhotoGallery a {
        color: rgb( 255, 255, 255 );
        text-shadow: 0 1px 2px #000;
    }

        .btnPhotoGallery a:hover {
            text-shadow: 0 2px 2px #000;
            text-decoration: none;
        }

        .btnPhotoGallery a:active {
            text-decoration: none;
        }

.RamadansProgramPage {
    padding: 25px;
}

.google-maps {
    position: relative;
    padding-bottom: 75%;
    margin-right: 2%;
    margin-top: 3%;
    height: 0;
    overflow: hidden;
    text-align: right;
}

    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 80% !important;
    }

.contactPage, .contactPageMap .contentPage {
    padding-top: 40px;
    padding-left: 60px;
    font-family: "Arial";
}

    .contactPage, .contentPage h3, .contactPageMap {
        font-size: 20px;
        color: rgb( 151, 17, 25 );
        font-weight: bold;
        margin: 0;
    }

    .contactPage h4 {
        font-size: 18px;
        line-height: 1.3;
    }

.contactPageMap {
    padding-left: 0 !important;
}

.partialPages {
    padding: 10px 20px 10px;
    margin-top: -50px;
}

.loginPages {
    margin-top: 50px;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid #CCCC99;
    border-radius: 10px;
}

.modal-dialog {
    overflow-y: initial !important;
    z-index: 1000;
}

.modal-body {
    overflow-y: auto;
    z-index: 1;
}

.modal-header {
    color: rgb( 151, 17, 25 );
    background-color: #CCCC99;
    border-radius: 5px 5px 0 0;
    border-bottom-color: rgb( 151, 17, 25 );
    height: 58px;
}

.donationMain {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -200px;
}

    .donationMain label {
        font-weight: normal;
    }

    .donationMain a {
        color: blue;
        font-weight: bolder;
    }

.dividerLine {
    border-left: 1px solid rgb( 151, 17, 25 );
}

.form-group.required > div:first-child:after {
    position: absolute;
    content: '*';
    color: red;
    right: 15px;
    top: 5px;
    font-family: 'FontAwesome';
    font-size: 20px;
}

.form-group.requiredAll > div:after {
    position: absolute;
    content: '*';
    color: red;
    right: 15px;
    top: 5px;
    font-family: 'FontAwesome';
    font-size: 20px;
}

.verticalCenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    line-height: 2.8;
}

.cardImage {
    padding-top: 10px;
    padding-bottom: 20px;
}

    .cardImage img {
        display: inline-block;
        background-repeat: no-repeat;
        width: 51px;
        height: 32px;
        margin: 0 7px 0 0;
    }

.cke_skin_kama .cke_contents iframe {
    min-height: 500px;
}

#cke_editor1 + input {
    display: none;
}

.cke_reset {
    min-height: 500px !important;
}

#divBookLokale {
    margin-top: 10px;
}

/* Web grid styles */
.pagingWebGrid {
    margin: 4px;
    border-collapse: collapse;
    width: 100%;
    background-color: #B4CFC3;
}

.pagingHeader {
    background-color: #C1D4E6;
    font-weight: bold;
    color: #FFF;
}

.pagingWebGrid th, .pagingWebGrid td {
    border: 1px solid #C0C0C0;
    padding: 5px;
}

.paginAlt {
    background-color: #E4E9F5;
    color: #000;
}

.gridHead a:hover {
    text-decoration: underline;
}

.paginSelect {
    background-color: #71857C;
}

.img-rounded {
    border-radius: 4px !important;
    margin: 5px;
}

.icon-details {
    display: block;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASAAAAEgABBYbsXQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHzSURBVEiJvZY/aBRREMZ/35vZPf9AOFJZiKApkspKLSws0gQEwSoKIoIg2CmK2Al2wcomtRY2th5GG+0sJAiKTVLZ2AhGEDTqHbtjcTm9u1yxu4cODOy+N7PfzHzz3ixA25I9MPkPk0dD/ZTwOxHBuCrhtyTuAa+AzzQQwULAfAqd6EZ3fWTT5M9MHoAmRVBFHT9p8kj47fG91A8AIiKaRN/PQOXfZEYlNf1oVfGRF/ky0uUqjkWk6xG/NmoBBDoiWKoCkBHtKnYjAEX0VoCVKo5V5Z9z8L9Jzq9IcbOKo0LnutF9VwsgoAVUIk9gg+ceacsoJt8CJn9u8qh7egHPyY86fgqYAfZCa26XXROAjOy4yzeHLrvtRHZtkm1tkiXNloonAW2Ju0RcBN5KcT9XfmzqEiWyqyYPw5aHyrXH5Fsm70ydQUoxB5QFxdpgLSJ+Ir0IOLzLvi5AlNoAkmFnB2uS9hOxJOnN1AAFvccQH5BW3XzVlN1I8tfADBGzkmzEoUkXQWve5OtDXfTR5NsmD0vZI8CG2/TpzkTLG5yFQ5Av7Ey1RZN/HwfxCK1Jcdpkm5ayr3XKleRAiaUspURHJWdCdIi4YClD0iUv6T10+cEIzgsO1OWkL/GtLPWliN7LTNkfkIS/bzTkK/wELJq8A+z7DQYoASroTMG5AAAAAElFTkSuQmCC') /*../Images/Icons/details.png*/;
}

.icon-edit {
    display: block;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABPAAAATwBTZvJDgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFJSURBVEiJrdO7LgRRGMDx34rtJJKN3noChUdQaoS4v4io9AqNjodQohCJRmFFNiJxKRQKlUujsTIKZ2SME3PZPcmXyZyT8//PdxlJkugnMIdbHKD957xP+Ax6SEI85CX9Cs4z8KhkSH/rMrI3jpNGo9FG9QwwgVk0MYqzSBY/mVSFr2Vq3kGrQHJYBb7qd0MTXBRIbsrCVyLwIkkPc2Xgy//AY5I939M1UzimWCoBT6ODZukfDYsV4GnMlhIE+EdFeA8ThQIs1ISvRT82B58fJPyXAGN4RXdQ8LxgHe9h3DYHAc8LrrCbef9PUgr+I8BkuDiZ60lMUhqeFWzhGSORqdqsCw/3DeExAE7zktCTbh14KpjOleAUI6Fsu6HxL1isCk8FO5E6P4fnNTbQqgNPBXc5+BO2MVUXmo1hvOEeR9jHcZIknwa0vgBCwwXxxip5HAAAAABJRU5ErkJggg==') /*../Images/Icons/edit.png*/;
}

.icon-delete {
    display: block;
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAbgAAAG4BI+U+pwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFMSURBVEiJ7da/SlxREAbw3wQTYiFImgQRH8BKmxQ2dha+QSwSCCltkt7K2s7awiYp8xJ5ABtBLQxsEbFYBck/MI7FntW7smc3q53sB8O5c+fM93Hm3DPnykw1wxqukBX7h7eDOCYMxgra2K7E17GK3RpBj0BETGAeT8qrF7jA10r+O0xHxELxr7CfmZc3MxrlmEFLvRz/ay3M9CvRG8yW8U9tyUPwHJ8Lxxa9JZoq49N7kjdzu1x9N7m6YfdBlPqLiGnMYQ+b2BmR6z028BpHmXlOYwWZeR4RXbedmd8j4pnO5p9m5q+IeFXmnkTEJF7iR2b+jYh2yW11ybn9HGuYx7HOeYAvxWC5xBYHEQwTeDDGAmOBscBjEBh2Jx/o9Jrj4n9oxL6V2OEoAr/xE6ulfd+g0Wl7nhv+Usm/6An2+VX5iDOj38Vn+HSX7xrGMbrKLqIbHwAAAABJRU5ErkJggg==') /*../Images/Icons/delete.png*/;
}

.LinkToPage {
    float: left;
    padding: 0 5px 0 5px;
}

.ThreeLink {
    width: 115px;
}

.webgrid-minmaxcolwidth {
    min-width: 50px;
    max-width: 350px;
}

.form-textarea > textarea {
    width: 100%;
    height: 55px;
}

/* The field panel on the member registration and update forms. Was `style="min-width: 350px"` on
   the two views; the value is unchanged, it moved here so responsive.css can drop the minimum on a
   phone, which an inline style cannot be overridden from. See responsive.css section 2. */
.memberFormPanel {
    min-width: 350px;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    .modal-dialog {
        overflow-y: initial !important;
        top: 55px;
        outline: none;
    }

    .modal-body {
        overflow-y: auto;
        height: 350px;
    }
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
    .modal-dialog {
        overflow-y: initial !important;
        top: 55px;
        outline: none;
    }

    .modal-body {
        overflow-y: auto;
        height: 350px;
    }

    .dropdown-menu {
        margin-left: 12px !important;
        box-shadow: 0 0 0 0;
    }
}

@media (max-width: 750px) {
    #logoLeft img {
        width: 250px !important;
        padding-bottom: 5px;
        margin-left: -20px;
        /*display: none;*/
    }

    #PoweredBy {
        text-align: right;
    }

        #PoweredBy span img {
            height: 40px;
            margin-left: 10px;
        }

    #logoRight img {
        /*width: 170px;
        padding-bottom: 5px;*/
        display: none;
    }

    .dropdown-menu {
        margin-left: 38px;
        box-shadow: 0 0 0 0;
    }

    .modal-dialog {
        overflow-y: initial !important;
        /*top: 55px;*/
        outline: none;
    }

    .modal-body {
        overflow-y: auto;
        height: 350px;
    }
}

@media (max-width: 990px) {
    #logoRight a {
        float: right;
        margin-bottom: 0;
    }

    #logoLeft img {
        width: 470px;
        /*padding-bottom: 5px;*/
    }

    #logoRight img {
        width: 140px;
        /*padding-bottom: 5px;*/
    }

    .dropdown-menu {
        margin-left: 42px !important;
        box-shadow: 0 0 0 0;
    }

    .modal-dialog {
        overflow-y: initial !important;
        top: 55px;
        outline: none;
    }

    .modal-body {
        overflow-y: auto;
        height: 570px;
    }
}

@media (max-width: 2570px) {
    #logoLeft img {
        width: 70px;
        margin-bottom: 5px;
    }

    #logoRight img {
        width: 140px;
    }

    .dropdown-menu {
        margin-left: 10px !important;
        box-shadow: 0 0 0 0;
    }

    .modal-dialog {
        overflow-y: initial !important;
        top: 55px;
        outline: none;
    }

    .modal-body {
        overflow-y: auto;
        height: 570px;
    }
}
.btn-default {
    background-color: #96C2DD;
}

/* ==========================================================================================
   The BCAS block vocabulary
   ==========================================================================================

   Defined in prds/2026-09-18-content-page-redesign/design-blocks.md, where it had to live as inline
   style attributes because that cycle was forbidden from touching CSS. This is the promotion that
   document was written for: the declarations are transcribed unchanged, so the content pages render
   identically whether they carry their inline attributes or not, and the attributes can be stripped
   in a later, purely mechanical pass.

   Palette, and nothing outside it:
     maroon #971119 · olive #babf8b · olive tint #f4f5ec · olive tint border #e3e6d2
     orange #e46a0e · card white #fff · card border #e7e7e7
     page background #f8f8f6 · body text #444 · muted text #8a8a8a
*/

#homemain .bcas-page {
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    padding: 8px 0 24px;
}

#homemain .bcas-page-title {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    color: #971119;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#homemain .bcas-lead {
    margin: 0 0 20px;
    padding: 2px 0 2px 16px;
    border-left: 4px solid #e46a0e;
    font-size: 17px;
    line-height: 1.75;
    color: #3f3f3f;
}

#homemain .bcas-card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 20px 22px;
    margin: 0 0 18px;
}

#homemain .bcas-card-title {
    margin: 0 0 12px;
    padding: 0 0 0 38px;
    min-height: 28px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    color: #971119;
    text-transform: uppercase;
    letter-spacing: .04em;
    background-image: url('../Images/Icons/bcas-icon-round.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 28px 28px;
}

#homemain .bcas-prose {
    margin: 0 0 14px;
}

/* -- The hero -------------------------------------------------------------------------------
   Text and photograph are separate columns, never stacked layers. Four of the five available
   photographs are group portraits with faces edge to edge and the fifth carries a burned-in
   watermark along its lower edge, so an overlay obscures either faces or the watermark. This is a
   requirement of the PRD (AC 2), not a preference. */

#homemain .bcas-hero {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 24px;
    margin: 0 0 18px;
}

#homemain .bcas-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#homemain .bcas-hero-title {
    margin: 0 0 12px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #971119;
}

#homemain .bcas-hero-lead {
    margin: 0 0 20px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: #444;
}

#homemain .bcas-hero-cta {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 12px 22px;
    background: #e46a0e;
    border-radius: 3px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}

#homemain .bcas-hero-cta:hover,
#homemain .bcas-hero-cta:focus {
    background: #e46a0e;
    filter: brightness(0.92);
    color: #fff;
    text-decoration: none;
}

#homemain .bcas-hero-media {
    padding: 0;
}

/* object-position is set per slide from HomeSlide.FocalPoint, because the source photographs run
   from 1.50 to 1.98 in ratio and a single crop cuts through faces on half of them. */
#homemain .bcas-hero-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    background: #f4f5ec;
}

#homemain .bcas-hero-caption {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8a8a8a;
    text-align: center;
}

/* -- Panels: Det Sker, Seneste nyheder ------------------------------------------------------ */

#homemain .bcas-panel-title {
    margin: 0 0 14px;
    padding: 0 0 0 38px;
    min-height: 28px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
    color: #971119;
    text-transform: uppercase;
    letter-spacing: .04em;
    background-image: url('../Images/Icons/bcas-icon-round.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 28px 28px;
}

#homemain .bcas-event-row {
    display: flex;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid #efefef;
}

#homemain .bcas-event-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#homemain .bcas-event-date {
    flex: 0 0 64px;
    margin-right: 16px;
    padding: 8px 0;
    background: #f4f5ec;
    border: 1px solid #e3e6d2;
    border-radius: 4px;
    text-align: center;
}

#homemain .bcas-event-day {
    display: block;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    color: #971119;
}

#homemain .bcas-event-month {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8a8a;
}

#homemain .bcas-event-body {
    flex: 1 1 auto;
    min-width: 0;
}

#homemain .bcas-event-title {
    display: block;
    margin: 0 0 4px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    color: #971119;
}

#homemain .bcas-event-title:hover {
    color: #971119;
}

#homemain .bcas-news-row {
    padding: 12px 0;
    border-bottom: 1px solid #efefef;
}

#homemain .bcas-news-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#homemain .bcas-news-title {
    display: block;
    margin: 0 0 4px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 700;
    color: #971119;
}

/* -- The quotation block -------------------------------------------------------------------
   Was .WelcomText with a double text-shadow — an off-palette colour from the home page.
   Restated as an olive-tinted card. */

#homemain .bcas-quote {
    background: #f4f5ec;
    border: 1px solid #e3e6d2;
    border-left: 4px solid #babf8b;
    border-radius: 4px;
    padding: 20px 22px;
    margin: 0 0 18px;
}

#homemain .bcas-quote-heading {
    display: block;
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8a8a8a;
}

#homemain .bcas-quote-verse {
    margin: 0 0 12px;
    font-family: 'Open Sans', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    font-style: italic;
    color: #971119;
}

#homemain .bcas-quote-translation {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* ---------------------------------------------------------------------------------------------
   TWO BLOCK VOCABULARIES LIVE IN THIS FILE, and the duplicated class names are deliberate.

   Above: the home page's vocabulary, unscoped. It dresses the hero, the Det Sker and Seneste
   nyheder panels, the event and news rows and the quotation, none of which render inside
   #contentmain.

   Below: the content pages' vocabulary, scoped to #contentmain, promoted out of the inline style
   attributes on the twelve dbo.PageContent rows.

   Six class names appear in both — bcas-page, bcas-card, bcas-card-title, bcas-lead, bcas-prose and
   bcas-page-title — because both were transcribed from the same source,
   prds/2026-09-18-content-page-redesign/design-blocks.md, and their declarations are identical. On
   a content page the #contentmain rules win on specificity and say the same thing; on the home page
   only the unscoped ones match. If you change a shared block, change it in both places or the two
   surfaces drift apart.
   --------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------
   Content page blocks
   ---------------------------------------------------------------------------------------------

   The block vocabulary the twelve rows of dbo.PageContent are built from. See
   prds/2026-09-18-content-page-redesign/design-blocks.md for what each block is for and the
   palette the colours come from.

   These rules were carried here from the stored markup rather than written fresh. Every block used
   to carry its declarations twice - once as a semantic bcas-* class and once as an inline style
   attribute saying exactly the same thing - because that redesign was delivered as an UPDATE to
   dbo.PageContent and no code change was permitted at the time. AC 2 of that PRD existed to make
   this promotion a deletion rather than a rewrite, and it was: the 274 inline style attributes were
   audited first and every one of the 26 classes carried identical declarations at every occurrence,
   so each class had exactly one rule to become.

   Scoped to #contentmain, which is the element the page body is rendered into, so nothing here can
   reach the rest of the site.

   Two consequences worth knowing:

     - The stored content now depends on this stylesheet. A database holding the redesigned bodies
       and a deployment without these rules renders unstyled prose. They ship together.
     - The live legacy site does not serve responsive.css but does serve Bootstrap 4.3.1, so these
       blocks use the Bootstrap grid and set their own widths rather than leaning on the port's
       mobile overrides.
   --------------------------------------------------------------------------------------------- */

#contentmain .bcas-badge {
    display:inline-block;
    padding:4px 10px;
    border-radius:3px;
    background:#babf8b;
    color:#fff;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:700;
}

#contentmain .bcas-card {
    background:#fff;
    border:1px solid #e7e7e7;
    border-radius:4px;
    padding:20px 22px;
    margin:0 0 18px;
}

#contentmain .bcas-card-title {
    margin:0 0 12px;
    padding:0 0 0 38px;
    min-height:28px;
    font-size:16px;
    line-height:28px;
    font-weight:700;
    color:#971119;
    text-transform:uppercase;
    letter-spacing:.04em;
    background-image:url('/Images/Icons/bcas-icon-round.png');
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:28px 28px;
}

#contentmain .bcas-fact {
    padding:14px 18px;
}

#contentmain .bcas-fact-label {
    display:block;
    font-size:11px;
    line-height:1.4;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#8a8a8a;
    margin:0 0 4px;
}

#contentmain .bcas-fact-value {
    display:block;
    font-size:15px;
    line-height:1.4;
    font-weight:700;
    color:#971119;
}

#contentmain .bcas-facts {
    margin:0 0 18px;
    background:#f4f5ec;
    border:1px solid #e3e6d2;
    border-radius:4px;
}

#contentmain .bcas-figure {
    margin:0 0 18px;
    padding:0;
}

#contentmain .bcas-figure-caption {
    margin:8px 0 0;
    font-size:12px;
    line-height:1.5;
    color:#8a8a8a;
    text-align:center;
}

#contentmain .bcas-figure-img {
    display:block;
    width:100%;
    height:auto;
    border:1px solid #e7e7e7;
    border-radius:4px;
    background:#f4f5ec;
}

#contentmain .bcas-lead {
    margin:0 0 20px;
    padding:2px 0 2px 16px;
    border-left:4px solid #e46a0e;
    font-size:17px;
    line-height:1.75;
    color:#3f3f3f;
}

#contentmain .bcas-link {
    color:#971119;
    font-weight:700;
    text-decoration:underline;
}

#contentmain .bcas-links {
    background:#f4f5ec;
    border:1px solid #e3e6d2;
    border-radius:4px;
    padding:16px 20px;
    margin:0 0 18px;
}

#contentmain .bcas-links-item {
    display:inline-block;
    margin:0 18px 6px 0;
}

#contentmain .bcas-links-list {
    list-style:none;
    margin:0;
    padding:0;
}

#contentmain .bcas-links-title {
    margin:0 0 12px;
    padding:0 0 0 38px;
    min-height:28px;
    font-size:16px;
    line-height:28px;
    font-weight:700;
    color:#971119;
    text-transform:uppercase;
    letter-spacing:.04em;
    background-image:url('/Images/Icons/bcas-icon-round.png');
    background-repeat:no-repeat;
    background-position:0 0;
    background-size:28px 28px;
}

#contentmain .bcas-page {
    font-family:'Open Sans','Segoe UI',Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.7;
    color:#444;
    padding:8px 0 24px;
}

#contentmain .bcas-page-head {
    margin:0 0 20px;
    padding:0 0 14px;
    border-bottom:3px solid #babf8b;
}

#contentmain .bcas-page-kicker {
    margin:8px 0 0;
    font-size:12px;
    line-height:1.5;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#8a8a8a;
}

#contentmain .bcas-page-title {
    margin:0;
    font-size:26px;
    line-height:1.25;
    font-weight:700;
    color:#971119;
    text-transform:uppercase;
    letter-spacing:.06em;
}

#contentmain .bcas-prose {
    margin:0 0 14px;
}

#contentmain .bcas-prose-last {
    margin:0;
}

#contentmain .bcas-video {
    padding:0 9px;
    margin:0 0 18px;
}

#contentmain .bcas-video-card {
    background:#fff;
    border:1px solid #e7e7e7;
    border-radius:4px;
    padding:20px 22px;
    margin:0;
}

#contentmain .bcas-video-grid {
    margin:0 -9px;
}

#contentmain .bcas-video-title {
    margin:0 0 10px;
    font-size:14px;
    line-height:1.4;
    font-weight:700;
    color:#971119;
}


/* The honeypot on the newsletter sign-up. Deliberately not a bcas-* name: that prefix means "content
   page block" by a convention ContentBlockStyleTests enforces, and every such rule has to sit under
   #contentmain. This field is in the home page sidebar and is not a content block. Off-screen rather than display:none or visibility:hidden,
   because a scraper worth the name checks those two properties and skips the field - and skipping it
   is exactly what a real visitor's browser does not do. Taken out of the layout so it shifts
   nothing, and the view removes it from the tab order and the accessibility tree as well, so nobody
   using a keyboard or a screen reader can reach it either. */
.signup-honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The account corner at the right end of the navigation bar (Views/Shared/Components/AccountBar).
   A visitor sees "Member login", an ordinary .nav-link styled by the rules above. A signed-in
   account sees its photo in a circle - or its initials in one, until a photo is uploaded - beside
   three small lines: email address, name, Log off.

   The right padding is not decoration. The menu container it sits in, #navbarNavDropdown, carries
   Bootstrap's .row, whose -15px right margin reaches past the bar's own 10px padding, so without it
   the end of a signed-in email address and name drew 5px outside the olive bar. 15px puts the
   corner's right edge 10px inside the bar, level with the logo's gap on the left. */

   The footer's old signed-in block showed what an email address does in a flex container: a flex
   item's default min-width:auto refuses to shrink below its content, and a long address pushed every
   signed-in page 15px past a tablet viewport. #accountBar and the text column are flex items, so
   each is let shrink, and overflow-wrap lets an address with no spaces in it break.

   Contrast on the bar's olive #babf8b: text #222 8.3:1, Log off maroon #971119 4.5:1. */
#accountBar,
#accountBar .acct-lines {
    min-width: 0;
}

#accountBar {
    overflow-wrap: anywhere;
    padding-right: 15px;
}

/* "Member login" is quieter than the menu items beside it: regular weight, a size smaller than
   their bold 15px, so it reads as a utility link rather than another section of the site. */
#accountBar #loginLink {
    font-size: 13px;
    font-weight: normal;
}

#accountBar .acct {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
}

#accountBar .acct-photo {
    flex: none;
    text-decoration: none;
}

#accountBar .acct-photo img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    background: #fff;
}

/* The stand-in for a photo: the account's initials, white on the site's maroon (8.4:1), in a circle
   the photo's size and rim. */
#accountBar .acct-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #971119;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: .5px;
    line-height: 1;
}

/* The photo is the link to the profile page. Hover, keyboard focus and being on the profile page
   draw a maroon ring outside its white rim, the photo's version of the bar items' maroon underline. */
#accountBar .acct-photo:hover img,
#accountBar .acct-photo:hover .acct-initials,
#accountBar .acct-photo:focus img,
#accountBar .acct-photo:focus .acct-initials,
#accountBar .acct-photo.active img,
#accountBar .acct-photo.active .acct-initials {
    box-shadow: 0 0 0 2px #971119;
}

#accountBar .acct-photo:focus-visible {
    outline: 2px solid #1f2a37;
    outline-offset: 4px;
    border-radius: 50%;
}

/* Right-aligned, so the three lines end against the photo they sit beside. */
#accountBar .acct-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 12px;
    line-height: 1.3;
    color: #222;
}

#accountBar .acct-name {
    font-weight: bold;
}

#accountBar .acct-logoff {
    color: #971119;
    font-weight: bold;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------------------------
   The enrollment flow's two outcome pages: EnrollSuccess and EnrollClosed.

   SCOPED TO #enrollmain, which is the third page-body container on the site and is new here. The
   other two are #contentmain (the CMS pages) and #homemain (the front page); ContentBlockStyleTests
   holds the list and fails an unscoped bcas-* rule, deliberately, so that adding to it is an act
   somebody has to explain. The explanation: these two pages render neither CMS content nor the home
   page, they are the only pages on the site whose job is to announce an outcome rather than carry a
   body of text, and a rule of theirs reaching an admin screen is exactly what that test exists to
   prevent. Nothing outside these two views uses the container.

   Their own vocabulary rather than the shared blocks, because nothing on them is
   administrator-authored and the treatment is meant to be festive where the shared card block is
   meant to be quiet. Every colour is from prds/2026-09-18-content-page-redesign/design-blocks.md: maroon
   #971119, olive #babf8b, olive tint #f4f5ec, olive tint border #e3e6d2, orange #e46a0e, card white
   #fff, card border #e7e7e7, body #444, muted #8a8a8a. Nothing here is invented.

   The marks are emoji. font-src is 'self' under the Content-Security-Policy, so an icon font is not
   available to these pages - which is also why the Font Awesome <link> that used to sit in
   EnrollSuccess.cshtml was deleted rather than vendored.
   --------------------------------------------------------------------------------------------- */

#enrollmain .bcas-outcome {
    font-family: 'Open Sans','Segoe UI',Arial,Helvetica,sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 0 32px;
}

/* The band. Filled rather than outlined: this is the one element on either page whose job is to be
   seen before anything is read. */
#enrollmain .bcas-outcome-band {
    border-radius: 6px;
    padding: 28px 24px 24px;
    margin: 0 0 20px;
    text-align: center;
    color: #fff;
}

#enrollmain .bcas-outcome-band-glad {
    background: #971119;
}

/* Closed is not a failure, so it is not the maroon of an alert - it is the olive the navigation and
   the buttons already use, with body text on it rather than white. White on olive would not clear
   4.5:1 without darkening the olive past the palette; #3f3f3f on it does. */
#enrollmain .bcas-outcome-band-quiet {
    background: #babf8b;
    color: #3f3f3f;
}

#enrollmain .bcas-outcome-mark {
    font-size: 44px;
    line-height: 1;
    margin: 0 0 10px;
}

#enrollmain .bcas-outcome-title {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: inherit;
}

#enrollmain .bcas-outcome-lead {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
}

#enrollmain .bcas-outcome-sub {
    margin: 8px 0 0;
    font-size: 15px;
    opacity: .9;
}

#enrollmain .bcas-outcome-card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 20px 22px;
    margin: 0 0 18px;
}

#enrollmain .bcas-outcome-card-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #971119;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* The facts strip. A dl rather than a table: these are label/value pairs, and a table would promise
   a grid that the single fact on the closed page would not fill. */
#enrollmain .bcas-outcome-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

#enrollmain .bcas-outcome-fact {
    flex: 1 1 150px;
    background: #f4f5ec;
    border: 1px solid #e3e6d2;
    border-radius: 4px;
    padding: 10px 12px;
}

#enrollmain .bcas-outcome-fact-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a8a8a;
}

#enrollmain .bcas-outcome-fact-value {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #444;
}

/* Monospaced, because it is a string to be copied or read out rather than read. */
#enrollmain .bcas-outcome-reference {
    font-family: Consolas,'Courier New',monospace;
    letter-spacing: .08em;
    color: #971119;
}

#enrollmain .bcas-outcome-section {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8a8a8a;
}

#enrollmain .bcas-outcome-list,
#enrollmain .bcas-outcome-names {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The orange accent rule the content pages give their lead paragraph, here marking each session
   signed up for - the lines on this page most likely to be checked against a calendar. */
#enrollmain .bcas-outcome-list-item {
    padding: 6px 0 6px 14px;
    border-left: 4px solid #e46a0e;
    margin: 0 0 6px;
}

#enrollmain .bcas-outcome-name {
    display: inline-block;
    background: #f4f5ec;
    border: 1px solid #e3e6d2;
    border-radius: 14px;
    padding: 3px 12px;
    margin: 0 6px 6px 0;
    font-size: 14px;
}

#enrollmain .bcas-outcome-prose {
    margin: 0 0 12px;
}

#enrollmain .bcas-outcome-prose-last {
    margin-bottom: 0;
}

#enrollmain .bcas-outcome-contact {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #e7e7e7;
    font-size: 14px;
    color: #444;
}

#enrollmain .bcas-outcome-actions {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Sized to the 48px minimum the enrollment form's own submit button was audited to, since these are
   the only controls on either page. */
#enrollmain .bcas-outcome-btn {
    display: inline-block;
    background: #971119;
    color: #fff;
    border-radius: 6px;
    padding: 12px 22px;
    min-height: 48px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease-in-out;
}

#enrollmain .bcas-outcome-btn:hover,
#enrollmain .bcas-outcome-btn:focus {
    background: #7a0d14;
    color: #fff;
    text-decoration: none;
}

#enrollmain .bcas-outcome-btn-quiet {
    background: #f4f5ec;
    border: 1px solid #e3e6d2;
    color: #444;
}

#enrollmain .bcas-outcome-btn-quiet:hover,
#enrollmain .bcas-outcome-btn-quiet:focus {
    background: #e3e6d2;
    color: #444;
}

/* Outside the button, against the page, where a pale ring would vanish - the same reasoning the
   enrollment form's submit button carries. */
#enrollmain .bcas-outcome-btn:focus-visible {
    outline: 3px solid #202124;
    outline-offset: 2px;
}

@media only screen and (max-width: 600px) {
    #enrollmain .bcas-outcome-band {
        padding: 22px 16px 18px;
    }

    #enrollmain .bcas-outcome-fact {
        flex-basis: 100%;
    }

    /* Full-width stacked targets rather than two half-width ones, which is what the gap would
       otherwise leave at this size. */
    #enrollmain .bcas-outcome-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------------------------
   The account pages: sign in, password recovery, lockout, access denied, registration, email
   confirmation and external sign-up.

   SCOPED TO #accountmain, the fourth page-body container, rendered by
   Views/Account/_AccountLayout.cshtml. ContentBlockStyleTests holds the list of containers and
   fails an unscoped bcas-* rule. These pages are neither CMS content, nor the home page, nor an
   enrollment outcome: they are forms a visitor fills in to get into the site, so none of the three
   existing containers was theirs to borrow.

   Every colour is from prds/2026-09-18-content-page-redesign/design-blocks.md: maroon #971119,
   olive #babf8b, olive tint #f4f5ec, olive tint border #e3e6d2, orange #e46a0e, card white #fff,
   card border #e7e7e7, body #444, muted #8a8a8a. The one addition is the error red and its tint.
   The red is Bootstrap's text-danger (#dc3545) darkened to #b02a37, which clears 4.5:1 on the
   pale tint (#fbeaec, bordered #f1c6cb) the error summary sits on. It is not the maroon: the
   maroon is the brand and would read as decoration rather than a problem. And the muted grey is
   #666 here, not #8a8a8a: the password rules and "Or sign in with" are small text a visitor needs
   to read, and #8a8a8a is 3.5:1 on white where #666 is 5.7:1.

   The button is sized to the 48px minimum the enrollment form's submit button and the outcome
   pages' buttons were audited to, and it is the same maroon, so a visitor meets one kind of
   primary button whichever flow they are in.
   --------------------------------------------------------------------------------------------- */

#accountmain .bcas-account {
    font-family: 'Open Sans','Segoe UI',Arial,Helvetica,sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    max-width: 460px;
    margin: 0 auto;
    padding: 32px 0 40px;
}

/* The maroon rule along the top is the one flourish: it is what ties the card to the maroon
   titles on the home and content pages without another band of colour. */
#accountmain .bcas-account-card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-top: 4px solid #971119;
    border-radius: 6px;
    padding: 28px 28px 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

#accountmain .bcas-account-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #971119;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#accountmain .bcas-account-lead {
    margin: 0 0 20px;
    font-size: 16px;
    color: #3f3f3f;
}

#accountmain .bcas-account-text {
    margin: 0 0 20px;
}

#accountmain .bcas-account-field {
    margin: 0 0 16px;
}

#accountmain .bcas-account-label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

#accountmain .bcas-account-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
    color: #444;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* 16px above is not a size preference: iOS zooms the page into any focused input smaller than
   that, and does not zoom back out. */

#accountmain .bcas-account-input:focus {
    outline: none;
    border-color: #971119;
    box-shadow: 0 0 0 3px rgba(151, 17, 25, .15);
}

#accountmain .bcas-account-input.input-validation-error {
    border-color: #b02a37;
}

#accountmain .bcas-account-hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: #666;
}

/* A value the visitor sees but cannot change - the provider's address on the external sign-up
   form - on the olive tint, so it does not read as an input someone forgot to make editable. */
#accountmain .bcas-account-static {
    margin: 0;
    padding: 10px 12px;
    background: #f4f5ec;
    border: 1px solid #e3e6d2;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

#accountmain .bcas-account-field-error {
    display: block;
    margin: 6px 0 0;
    font-size: 13px;
    color: #b02a37;
}

/* The summary renders on every page load, empty, with the class validation-summary-valid; only
   one with something to say should take up room. */
#accountmain .bcas-account-errors.validation-summary-valid {
    display: none;
}

#accountmain .bcas-account-errors {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: #fbeaec;
    border: 1px solid #f1c6cb;
    border-radius: 4px;
    color: #b02a37;
    font-size: 14px;
}

#accountmain .bcas-account-errors ul {
    margin: 0;
    padding-left: 18px;
}

#accountmain .bcas-account-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 20px;
}

/* The label is the tap target, not the 18px box inside it: it wraps the input, so a tap anywhere on
   it toggles the box, and 44px tall makes it one a thumb can hit. measure-layout reports the input
   itself, so it will go on saying 18px here. */
#accountmain .bcas-account-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    font-size: 14px;
    cursor: pointer;
}

#accountmain .bcas-account-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #971119;
}

#accountmain .bcas-account-link {
    font-size: 14px;
    color: #971119;
    text-decoration: underline;
}

#accountmain .bcas-account-link:hover,
#accountmain .bcas-account-link:focus {
    color: #7a0d14;
}

#accountmain .bcas-account-btn {
    display: inline-block;
    min-height: 48px;
    padding: 12px 22px;
    background: #971119;
    border: 1px solid #971119;
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease-in-out;
}

/* On a form it spans the card: it is the one thing on the page to press. */
#accountmain .bcas-account-form .bcas-account-btn {
    display: block;
    width: 100%;
}

#accountmain .bcas-account-btn:hover,
#accountmain .bcas-account-btn:focus {
    background: #7a0d14;
    border-color: #7a0d14;
    color: #fff;
    text-decoration: none;
}

#accountmain .bcas-account-btn-quiet {
    background: #f4f5ec;
    border-color: #e3e6d2;
    color: #444;
}

#accountmain .bcas-account-btn-quiet:hover,
#accountmain .bcas-account-btn-quiet:focus {
    background: #e3e6d2;
    border-color: #e3e6d2;
    color: #444;
}

/* Outside the button, against the page, where a pale ring would vanish - the same reasoning the
   enrollment form's submit button carries. */
#accountmain .bcas-account-btn:focus-visible {
    outline: 3px solid #202124;
    outline-offset: 2px;
}

#accountmain .bcas-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 0;
}

#accountmain .bcas-account-footer {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e7e7e7;
    text-align: center;
}

#accountmain .bcas-account-external {
    margin: 24px 0 0;
}

/* "Or sign in with", drawn as a rule with the words sitting in a gap in it. */
#accountmain .bcas-account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#accountmain .bcas-account-divider::before,
#accountmain .bcas-account-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #e7e7e7;
}

@media only screen and (max-width: 600px) {
    #accountmain .bcas-account {
        padding: 16px 0 24px;
    }

    #accountmain .bcas-account-card {
        padding: 22px 16px 18px;
    }

    /* Full-width stacked targets rather than two half-width ones, as on the outcome pages. */
    #accountmain .bcas-account-actions .bcas-account-btn {
        flex: 1 1 100%;
    }
}

/* ---- The blocked-video message ----------------------------------------------------------------
   What cookie-consent.js puts in place of a YouTube video Cookiebot is holding back until the
   visitor accepts marketing cookies. Scoped to both page containers, because the frames it
   replaces are on the home page (#homemain) and inside stored content (#contentmain) alike. */
#homemain .bcas-video-consent,
#contentmain .bcas-video-consent {
    padding: 24px 16px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f7f7f7;
    text-align: center;
}

#homemain .bcas-video-consent p,
#contentmain .bcas-video-consent p {
    margin-bottom: 6px;
}

#homemain .bcas-video-consent .btn,
#contentmain .bcas-video-consent .btn {
    margin-top: 6px;
}

/* ---- The administration landing page ---------------------------------------------------------
   /admin (Views/Admin/Index.cshtml): every admin screen, in five category cards.

   SCOPED TO #adminmain, the fifth page-body container. ContentBlockStyleTests holds the list and
   fails an unscoped bcas-* rule. The admin landing page is none of the other four - not CMS content,
   not the home page, not an enrollment outcome, not an account form - so it has its own.

   Slate rather than the site's maroon, on purpose: the colour is what tells an administrator they
   are in the back office (prds/2026-09-27-admin-landing-page-redesign). Contrast, on the colours
   they sit on:
     band      #1f2a37, text #fff 14.5:1, the signed-in line #cbd5e1 9.8:1
     card      #fff, title #1f2a37 14.5:1, link label #2b4a6f 9.1:1, description #5b6673 5.8:1
     hover     #eef2f6, title 12.9:1, link label 8.1:1, description 5.2:1
   --------------------------------------------------------------------------------------------- */

#adminmain .bcas-admin {
    font-family: 'Open Sans','Segoe UI',Arial,Helvetica,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1f2a37;
    padding: 20px 0 40px;
}

#adminmain .bcas-admin-band {
    margin: 0 0 24px;
    padding: 20px 24px;
    background: #1f2a37;
    border-radius: 6px;
    color: #fff;
}

#adminmain .bcas-admin-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#adminmain .bcas-admin-user {
    margin: 4px 0 0;
    font-size: 14px;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

#adminmain .bcas-admin-user strong {
    color: #fff;
    font-weight: 600;
}

/* min(100%, 300px), not a plain 300px: at 320px the column is narrower than 300px, and a fixed
   minimum would push the grid past the edge of the page. */
#adminmain .bcas-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 20px;
    align-items: start;
}

#adminmain .bcas-admin-group {
    background: #fff;
    border: 1px solid #dde3ea;
    border-top: 4px solid #3b5068;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(31, 42, 55, .06);
}

#adminmain .bcas-admin-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px 18px 12px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #1f2a37;
    border-bottom: 1px solid #eef2f6;
}

#adminmain .bcas-admin-icon {
    flex: 0 0 auto;
    color: #3b5068;
}

#adminmain .bcas-admin-links {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

/* The whole row is the link, and it is at least 48px tall: the tap-target size the enrollment and
   account buttons were audited to. */
#adminmain .bcas-admin-link {
    display: block;
    min-height: 48px;
    padding: 8px 18px;
    color: #2b4a6f;
    text-decoration: none;
}

#adminmain .bcas-admin-link:hover,
#adminmain .bcas-admin-link:focus {
    background: #eef2f6;
    color: #2b4a6f;
    text-decoration: none;
}

#adminmain .bcas-admin-link:focus-visible {
    outline: 3px solid #1f2a37;
    outline-offset: -3px;
}

#adminmain .bcas-admin-link-label {
    display: block;
    font-weight: 600;
}

#adminmain .bcas-admin-link:hover .bcas-admin-link-label {
    text-decoration: underline;
}

#adminmain .bcas-admin-link-desc {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: #5b6673;
}

@media only screen and (max-width: 600px) {
    #adminmain .bcas-admin {
        padding: 12px 0 24px;
    }

    #adminmain .bcas-admin-band {
        padding: 16px;
        margin-bottom: 16px;
    }

    #adminmain .bcas-admin-grid {
        gap: 16px;
    }
}

/* ---- The enrollment session editor ---------------------------------------------------------------
   /enrollreport/editsessions/{id} (Views/EnrollReport/EditSessions.cshtml): one enrollment's festival
   as a day x session grid (prds/2026-09-28-admin-edit-enrollment-sessions).

   In #adminmain, like the landing page, and in its slate: the band above it is the landing page's
   own. Its grid is its own rather than the public form's .session-grid, whose rules are the
   visitor's. Contrast, on the colours they sit on:
     day card  #fff, day name #1f2a37 14.5:1, date and times #5b6673 5.8:1
     error     #fdecea, text #8a1c12 8.1:1
     cancel    #2b4a6f on the page white 9.1:1
     save      #1f2a37, text #fff 14.5:1; hover #3b5068, text #fff 8.3:1
   --------------------------------------------------------------------------------------------- */

#adminmain .bcas-admin-error {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #fdecea;
    border-left: 4px solid #8a1c12;
    border-radius: 4px;
    color: #8a1c12;
    font-weight: 600;
}

#adminmain .bcas-admin-note {
    margin: 0 0 12px;
    color: #5b6673;
}

#adminmain .bcas-admin-days {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

#adminmain .bcas-admin-day {
    min-width: 0;
    margin: 0;
    padding: 10px 18px 12px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-left: 4px solid #3b5068;
    border-radius: 6px;
}

/* A legend, so each row of boxes is announced with its day. Floated full width, which is what takes
   a legend off the fieldset's border and into the card like a heading; the options below clear it. */
#adminmain .bcas-admin-day-name {
    float: left;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2a37;
}

#adminmain .bcas-admin-day-date {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #5b6673;
    white-space: nowrap;
}

#adminmain .bcas-admin-day-options {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
}

/* The whole label is the hit area, and at least 44px of it: this is a grid of small targets that
   may well be used from a phone during the festival. */
#adminmain .bcas-admin-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

#adminmain .bcas-admin-option input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
}

#adminmain .bcas-admin-option input:focus-visible {
    outline: 3px solid #1f2a37;
    outline-offset: 2px;
}

/* min-width and the wrap together: the receipt line carries the devotee's email address, which has
   no spaces to break at and would otherwise push a 320px page sideways. */
#adminmain .bcas-admin-option-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

#adminmain .bcas-admin-option-time {
    color: #5b6673;
    white-space: nowrap;
}

/* A control over the sessions beside it rather than one of them. */
#adminmain .bcas-admin-whole-day {
    font-style: italic;
}

#adminmain .bcas-admin-receipt {
    margin-bottom: 20px;
}

#adminmain .bcas-admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

#adminmain .bcas-admin-save {
    min-height: 48px;
    padding: 10px 24px;
    border: 0;
    border-radius: 6px;
    background: #1f2a37;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

#adminmain .bcas-admin-save:hover,
#adminmain .bcas-admin-save:focus {
    background: #3b5068;
}

#adminmain .bcas-admin-save:focus-visible {
    outline: 3px solid #1f2a37;
    outline-offset: 2px;
}

#adminmain .bcas-admin-cancel {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: #2b4a6f;
}

@media only screen and (max-width: 600px) {
    #adminmain .bcas-admin-day {
        padding: 8px 12px 10px;
    }

    /* One session per line on a phone, so the times line up and nothing wraps mid-row. */
    #adminmain .bcas-admin-day-options {
        flex-direction: column;
    }

    #adminmain .bcas-admin-save {
        flex: 1 1 100%;
    }
}

/* ---- Enrollment confirmation (prds/2026-09-29-confirmed-counts-capacity-colours-and-english) ----
   The confirmed headcount beside a report cell's enrolled one. The green the enrollment form's
   counts use: 5.3:1 on white. */
.confirmed-count {
    color: #1e7b34;
    font-weight: 600;
}
/* ---- Door check-in (prds/2026-10-03-durga-puja-check-in, AC 4) ----
   Used standing at the door, on a phone: one column, nothing narrower than a thumb, and a check box
   whose whole row is the tap target. Capped in width so it reads the same on a desktop. Scoped to
   #checkinmain, the container both check-in views render into, like every other bcas- block. */
#checkinmain .bcas-checkin {
    max-width: 640px;
    margin: 0 auto 24px;
}

#checkinmain .bcas-checkin-note,
#checkinmain .bcas-checkin-day {
    margin-top: 16px;
}

#checkinmain .bcas-checkin-big {
    padding: 14px 16px;
    font-size: 1.15rem;
    margin-bottom: 10px;
    white-space: normal;
}

/* Three labelled fields stacked, then a full-width button: one thumb's reach each. */
#checkinmain .bcas-checkin-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
}

#checkinmain .bcas-checkin-search label {
    margin: 6px 0 0;
    font-weight: 600;
}

#checkinmain .bcas-checkin-search input {
    flex: 1 1 auto;
    min-width: 0;
}

#checkinmain .bcas-checkin-party fieldset {
    margin-bottom: 16px;
}

#checkinmain .bcas-checkin-party legend {
    font-size: 1.1rem;
    font-weight: 600;
}

#checkinmain .bcas-checkin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e3e3e3;
}

#checkinmain .bcas-checkin-row input[type="checkbox"] {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

#checkinmain .bcas-checkin-row label {
    flex: 1 1 auto;
    margin: 0;
    padding: 12px 0;
    cursor: pointer;
}

#checkinmain .bcas-checkin-row.is-checked-in label,
#checkinmain .bcas-checkin-row.is-closed label {
    color: #6c757d;
}

/* The family's contribution (prds/2026-10-14-door-contribution-paid): a tinted box above the party,
   amber until paid and green after, so the state reads before the words do. */
#checkinmain .bcas-checkin-contribution {
    margin: 16px 0;
    padding: 12px 14px 2px;
    border-left: 4px solid #e0a800;
    border-radius: 4px;
    background: #fff8e1;
}

#checkinmain .bcas-checkin-contribution.is-paid {
    border-left-color: #1e7b34;
    background: #eaf6ec;
}

#checkinmain .bcas-checkin-pledge {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

#checkinmain .bcas-checkin-attendee-line {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

#checkinmain .bcas-checkin-match .bcas-checkin-attendee {
    color: #495057;
    font-size: 0.9rem;
}

/* "x of n enrolled have checked in" on the door page (prds/2026-10-14-door-contribution-paid,
   AC 12): large enough to read from beside the desk, and no larger, so the search stays near the top
   of a phone's screen. On a narrow phone it wraps to a second line rather than scrolling. */
#checkinmain .bcas-checkin-count-big {
    margin: 8px 0 4px;
    font-size: 1.6rem;
    line-height: 1.25;
}

/* Every small link and button on the check-in pages is a thumb's height (AC 15): the links between
   pages, Refresh, the sort buttons, Undo and the overview's rows. The big buttons and match rows
   were already taller than this. 44px, against the site-wide floor of 32px. */
#checkinmain .bcas-checkin-tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* The links between pages: separate buttons that wrap rather than scroll on a narrow phone (AC 16, 20). */
#checkinmain .bcas-checkin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 8px;
}

/* Admin enrollment list (Home/EnrollList, in #adminmain like the other English admin screens):
   the Day(s) column holds a line per day ("Saptami: Morning, Night") and
   was squeezed by the auto layout, while the counts beside it never need more than a few digits. */
#adminmain .bcas-enroll-list .bcas-col-days {
    min-width: 15rem;
}

#adminmain .bcas-enroll-list .bcas-col-num {
    width: 1%;
    white-space: nowrap;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    text-align: right;
}

/* The Confirmation column: what, by whom and when on lines of their own, so a step done by email
   and phone does not stretch the column. A badge is inline and centred by default; this one is a
   left-aligned block, one per step. */
#adminmain .bcas-enroll-list .badge.bcas-confirmation {
    display: block;
    width: fit-content;
    text-align: left;
    line-height: 1.3;
}

#adminmain .bcas-enroll-list .badge.bcas-confirmation + .badge.bcas-confirmation {
    margin-top: 4px;
}

/* Several matches at the door (AC 8, amended): one large row per enrollment, the name on the left and
   the phone number on the right, tapped to open that party. */
#checkinmain .bcas-checkin-match {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 16px;
    font-size: 1.1rem;
}

#checkinmain .bcas-checkin-match-name {
    min-width: 0;
}

#checkinmain .bcas-checkin-match-phone {
    flex: 0 0 auto;
    color: #6c757d;
    white-space: nowrap;
}

/* Who has checked in, grouped by enrollment (prds/2026-10-10-checked-in-search-and-grouping): one
   bordered block per enrollment, headed by its enroller, every other block tinted so neighbours read
   apart. A name the search matched is marked in amber, which neither tint is. */
#checkinmain .bcas-attendance-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

#checkinmain .bcas-attendance-group {
    border: 1px solid #dfe5ec;
    border-radius: 6px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: #fff;
}

#checkinmain .bcas-attendance-group.is-alt {
    background: #eaf1f8;
}

#checkinmain .bcas-attendance-enroller {
    font-size: 1rem;
    font-weight: 600;
    margin: 4px 0 6px;
}

#checkinmain .bcas-attendance-person {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 6px;
    border-top: 1px solid #dfe5ec;
    font-size: 1.1rem;
}

#checkinmain .bcas-attendance-person.is-match {
    background: #fff3cd;
    box-shadow: inset 4px 0 0 #d39e00;
    font-weight: 600;
}