/* 
 * Overall account area:
 */



 .account-area .subtle { opacity: 0.5; } 



 .account-area {
    display: flex;
    gap: 2em;
    gap: 60px;
    padding-bottom: 200px;

    /* override default */
    line-height: 1.35em;
}


.lo--account .banner-region {
  margin: 0;
}

.lo--account .main-content {
    width: auto; 
}

  /* .lo--account .account-area {
    margin: 0 auto;
  } */




/* 
 * Generic headings
 */

.account-area h1,
.account-area h2,
.account-area h3,
.account-area h4,
.account-area h5,
.account-area h6,
.account-area p,
.account-area ul,
.account-area ol,
.account-area table {
    margin-bottom: var(--size-3);
}

.account-area h1,
.account-area h2,
.account-area h3,
.account-area h4,
.account-area h5,
.account-area h6 {
    line-height: 1.3em;

    display: flex;
    align-items: center;
}


.account-area dl {
    margin-bottom: var(--size-4);
}

.account-area dt {
    font-weight: 700;
    margin-bottom: var(--size-2);
}

.account-area dd {
    margin: 0;
}

.account-area dl div+div {
    margin-top: var(--size-4);
}




/* 
 * Layout
 */

.account-area article,
.account-area aside {
    float: none;
    margin: 0;
    width: auto;
}

.account-area article {
    flex: 1 0 50%;
    padding-top: 20px;
}

.account-area aside {
  display: none;
  flex: 0 0 120px;
  padding-top: 175px;
}

.account-area .admin-menu-wrap {
    padding: 24px 26px;
    background: var(--theme-white);
    border-radius: var(--border-radius-default);
}

.account-area.public {
    justify-content: center;
}

    .account-area.public article {
        flex: 0 0 50%;
        margin: 0 auto;
    }


@media screen and (min-width: 960px){

    .account-area article {
        padding-top: 68px;
    }

    .account-area.public article {
        flex: 0 0 760px;
        margin: 0 auto;
    }
  
    .account-area aside {
        display: block;
      flex: 0 0 330px;
      padding-top: 175px;
    }

}




.admin-page-list {

}

.admin-page {
    
}

    .admin-page + .admin-page { 
        margin-top: var(--size-1);
    }

.admin-page__link {
    display: flex;
    padding: 13px 15px;
    background: var(--theme-white);
    color: var(--theme-pale-text);
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;;

    border-radius: var(--border-radius-default);
}

    .admin-page__link span {
        width: 20px;
        margin-right: 0.5em;
    }

    .admin-page__link:active,
    .admin-page__link:hover {
        color: var(--theme-pale-bg);
        background: var(--theme-pale-text);
        text-decoration: none;;
    }

    .admin-page--active .admin-page__link,
    .admin-page__link:active {
        color: var(--theme-pale-bg);
        background: var(--theme-pale-text);
        text-decoration: none;;
    }

    .admin-page__link:focus,
    .admin-page__link:hover {
        color: var(--theme-white);
        background: var(--theme-primary);
        text-decoration: none;;
    }



/**
 * 
 * Replacement styles for account area etc.
 *
 */

/* 
 * Account registrations list 
 */

 .registration-list {
    list-style: none;
}

.registration {
    list-style: none;
    background: var(--theme-white);
    color: var(--theme-pale-text);
    line-height: 1.45em;
    padding: 0;
    margin: 0;

    border-left: 8px solid var(--theme-grey);
    border-radius: var(--border-radius-default);

    overflow: hidden;
}

    .registration--problem,
    .registration--cancelled,
    .registration--refunded {
        background: #edd;
    }

        .registration--cancelled .registration__label {
            display: block;
            font-weight: 700;
            padding: 0 0 0.5em;
            color: var(--theme-primary);
        }

    .registration--paid {
        
    }

    .registration--outstanding {
        
    }    


    .registration + .registration {
        margin-top: var(--size-4);;
    }

    .registration__header {
        display: flex;
        justify-content: space-between;
    }

    .registration__delivery-info {
        display: flex;
        align-items: center;
        
        font-weight: 400;
        padding: 0;
        margin: 0 0 0.75em 0;
    }


     

  
    .registration__date {
        display: inline-block;
    }

    
    .registration__delivery {
        display: inline-flex;
        align-items: center;
    }

    .registration__date + .registration__group-info::before {
            content: ' • ';
            display: inline-block;
            padding: 0 0.5em
    }

    .registration__name {
        display: block;
        font-weight: 700;
        padding: 0 0 1em;
    }

    .registration__info {
        padding: 0;
        list-style: none;
    }

    .registration__label {
    }

    ul.registration__info-list {
        display: flex;
        
        gap: 1em;
        padding: 0;
        margin: 0;
    }

    .registration .registration__info {
        flex: 1 1 25%;
        background: none;
        margin: 0;
        padding: 0 0 0.5em 0;
    }

    .registration__group-info {
        display: inline-flex;
    }

    .registration .registration__info__value {
        display: flex;
        align-items: center;
        font-weight: 700;
        /* font-size: larger; */
    }

    .registration .registration__info--booking {
        text-align: left;
    }

    .registration .registration__info--amount {
        text-align: left;
    }      

    .registration .registration__info--details {
        text-align: right;
        flex: 0 0 150px;
    }

        .registration .registration__info--details .btn {
            padding: 0.75em;
        }

    /* .registration--paid .registration__info--booking,
    .registration--paid .registration__info--amount,
    .registration--paid .registration__info--status {
        color: var(--theme-success-fg);
    }   */

    .registration .alert {
        margin-bottom: 0;
    }

    .registration__notice {

    }

    .attendee-form {
        margin-bottom: 24px;
    }

        .attendee-form input {
            float: none;
        }

        .attendee-form button {
            font-weight: 400;
        }




    .registration--paid {
        border-left-color: var(--theme-success);
    }

        .registration--paid .registration__notice {
            background: var(--theme-success);  
            color: var(--theme-success-text);
        }

    .registration--unpaid {
        border-left-color: var(--theme-default);
    }    

        .registration--unpaid .registration__notice {
            background: var(--theme-default);  
            color: var(--theme-default-text);
        }

    .registration--outstanding {
        border-left-color: var(--theme-primary);
    }

        .registration--outstanding .registration__notice {
            background: var(--theme-primary);  
            color: var(--theme-primary-text);
        }

    .registration--problem {
        background: var(--theme-danger-light); 
        border-color: var(--theme-danger);
    }

        .registration--problem .registration__notice {
            background: var(--theme-danger-light);  
            color: var(--theme-danger-light-text);
        }

    .registration--cancelled {
        background: var(--theme-danger-light);
        border-color: var(--theme-primary);
    }  

        .registration--cancelled .registration__notice {
            background: var(--theme-warning);  
            color: var(--theme-warning-text);
        }

    .registration--refunded {
        background: var(--theme-warning-light);  
        border-color: var(--theme-warning);
    }

        .registration--refunded .registration__notice  {
            background: var(--theme-warning);  
            color: var(--theme-warning-text);
        }







.booking {
    margin-bottom: 2em;
}

    .booking .alert {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .booking__line {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.5em 0;
    }

    .booking__icon {
        flex: 0 0 40px;
    }

        .booking__icon svg {
            display: block;
            margin: 0;
            padding: 0;
        }

    .booking__label {
        flex: 0 0 200px;
    }

    .booking__value {
        flex: 1 1 auto;
        line-height: 1.5em;
    }

    .booking__value ul,
    .booking__value li {
        background: none;
        color: inherit;
        padding: 0; 
        list-style: none;
        margin-left: 0;
    }

    .booking__actions {

        /* background: var(--theme-pale-bg); */
        /* margin: 2em 0 4em 0; */
        /* padding: 1em 2em 1em 2em; */
        display: flex;
        justify-content: center;
        gap: 1em;
    }

    .booking__payment-info {
        background: rgba( 255, 255, 255, 0.2 );
    }





/* 
 * Account registrations list 
 */

 .mailinglist-list.mailinglist-list {
    list-style: none;
    margin-bottom: 2em;

    margin-bottom: 75px;
}

.mailinglist {
    list-style: none;
    background: var(--theme-white);
    color: var(--theme-pale-text);
    padding: 0;
    line-height: 1.45em;
    margin-left: 0;

    border-radius: var(--border-radius-default);
}

    .mailinglist + .mailinglist {
        margin-top: 25px;
    }

    .mailinglist__name {
        display: block;
        font-weight: 700;
        padding: 0 0 1em;
    }

    .mailinglist__content {
        display: block;      
    }

    .mailinglist__left {
        display: block; 
        margin-bottom: 12px;
    }

    .mailinglist__right {
        display: block;      
    }



    .mailinglist__info {
        padding: 0 0 0.5em 0;
    }

    .mailinglist__label {
    }

    .mailinglist__info-list {
        display: block;
        padding: 0;
        margin: 0;
        background: none !important;
    }

    .mailinglist__info-list li {
        padding: 0;
        margin: 0;
        background: none !important;
    }
/* 
    .mailinglist .mailinglist__info {
        background: none !important;
    }

    .mailinglist .mailinglist__info li {
        background: none !important;
    } */

    .mailinglist .mailinglist__info span {
        display: block;
        font-weight: bold;
        /* font-size: larger; */
    }

    .mailinglist .mailinglist__info--details {
        flex: 0 0 120px;
        text-align: right;
    }

        .mailinglist .mailinglist__info--details .btn {
            padding: 0.75em;
        }


@media screen and (min-width: 960px){

  .mailinglist__content {
    display: flex;
    align-items: center;
  }

    .mailinglist__left {
        margin: 0;
        flex: 1 0 50%;
    }

    .mailinglist__right {
        flex: 0 0 auto;
    }

  
}





/* 
 * Account FAQs
 */

.faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq {
    list-style: none;
    margin: 0;
    background: var(--theme-white);
    color: var(--theme-pale-text);
    border-radius: var(--border-radius-default);
}

    .faq + .faq {
        margin-top: var(--size-4);
    }

    .faq__question {
        display: block;
        font-weight: 700;
        margin: 0;
        margin-bottom: var(--size-4);
        padding: 0;
    }

    .faq__answer {
        margin: 0;
        padding: 0;
    }

        .faq__answer p:last-child {
            padding: 0;
            margin-bottom: 0;
        }









/* 
 * Generic buttons
 * Note btn-back already exists elsewhere
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 0.5em 1em; */
    /* background: #333; */
    /* color: white; */
    border: none;
    font-weight: 700;

    padding: 9px 26px;
    border-radius: var(--border-radius-default);
    white-space: nowrap;
}

    .btn.btn--slim {
        padding-left: var(--size-3);
        padding-right: var(--size-3);
        padding-top: var(--size-1);
        padding-bottom: var(--size-1);
    }

    .btn.btn--large {
        padding-left: var(--size-4);
        padding-right: var(--size-4);
        padding-top: var(--size-3);
        padding-bottom: var(--size-3);
    }



/*
 * Other generic styles
 */

.underline {
    text-decoration: underline;
}






/**
* Icon related
*/

.material-symbols-outlined {
    font-size: inherit !important;
    line-height: inherit !important;
}

    .alert .material-symbols-outlined {
        font-size: 1.5em !important;
        line-height: 1.2em !important;
    }

    .material-symbols-outlined.large {
        font-size: 1.5em !important;
        line-height: 1.2em !important;
    }    





.alert {
    padding: 30px 35px;
    margin-bottom: var(--size-5);
    line-height: 1.5em;
    border-radius: var(--border-radius-default)
}

.alert p {
    margin: 0;
    padding: 0;
}

.alert p + p {
    margin-top: 0.5em;
}






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

.text-left {
    text-align: center;
}

.text-right {
    text-align: center;
}





/*
 * Registration form styling/proceess
 */

.account-area form div {
    overflow: unset;
    align-items: flex-start;
}

.registration-choices {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}




.main-content form {
    
    margin-left: auto;
    margin-right: auto;
}

.main-content fieldset {
    background: var(--theme-white);
    color: var(--theme-default);
    border-radius: var(--border-radius-default);
}



.event-form {
    box-sizing: border-box;
}

.event-form {
    /* font-size: 13px; */
}

.event-form fieldset {
   
    margin-bottom: 3em;
}

.event-form.event-form fieldset h3 {
    font-size: 24px;
    line-height: 28.8px;
    margin-top: 0;
    padding-top: 0;
}

.event-form label {
    padding: 15px 20px 15px 0;
    line-height: 20px;
    border: none;
}

.event-form label.auto {
    width: auto;
    flex: 0 1 auto;
}

.event-form [type=text],
.event-form [type=number],
.event-form [type=email] {
    padding: 15px 20px;
    line-height: 20px;
    border: none;
}

.event-form [type=text]:focus,
.event-form [type=number]:focus,
.event-form [type=email]:focus,
.event-form select:focus {
    outline: 2px solid var(--theme-primary);
    border-radius: var(--border-radius-default);
}

.event-form [type=checkbox] {
    margin: 20px 20px 15px 5px;
    line-height: 20px;
    border: none;
}

.event-form button {
    max-width: 100%;
}

.event-form select {
    /* flex: 0 0 auto; */
    /* padding: 0.25em 0.5em; */
    width: auto;
    /* max-width: 382px; */
    overflow-x: hidden;
    flex: 1 0 auto;
    padding: 15px 20px;
    max-width: 100%;
}
  .event-form option {
    padding: 0.25em 0.5em;
    line-height: 1.5em;
  }



.event-form label {
    border: 2px solid transparent;
}

form legend {
    padding: 0.75em 1em;
    color: white;
}

.field-required label::after {
    content: ' *';
    color: var(--theme-primary);
}






.bottom-spacer {
    padding: 0;
    padding-top: 5em;
}





form.login-form div {
    margin-bottom: 0;
}

    form.login-form div + div {
        margin-top: 0.5em;
    }

    form.login-form .btn {
        padding: 16px 26px;
    }

    form.login-form label {
        flex: 0 0 125px;
    }

    /* .login-form label {
        padding: 0.75em 1em 0.75em 0;
        flex: 1 1 auto;
    }

    .login-form input[type=text],
    .login-form input[type=email] {
        padding: 0.75em 1em;
        border: none;
    } */







.card-wrapper {
    padding: 15px 16px;
}

@media screen and (min-width: 960px) {
    .card-wrapper {
        padding: 39px 48px;
    }
}




.fieldset-wrapper {
    padding: 15px 15px;
}

@media screen and (min-width: 960px) {
    .fieldset-wrapper {
        padding: 40px 44px;
    }
}




.cta-list {
    display: block;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    width: 100%;
    max-width: 760px;
}

  .cta + .cta {
    margin-top: 10px;
  }




.cta {
    background: var(--theme-white);
    padding: 15px 16px;
    display: flex;
    gap: 20px;
    align-items: center;
    color: var(--theme-default);
    border-radius: var(--border-radius-default);
    text-decoration: none;
}

.cta-list--dashboard .cta:nth-child(1) {
    grid-column: span 2;
}

.cta__icon {
    position: relative;
    width: 50px;
    padding: 25px 30px;
    background: var(--theme-pale);
    border-radius: var(--border-radius-default);
}

.cta__notification {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
    background: var(--theme-primary);
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;;
    text-align: center;
    color: var(--theme-white);
    transform: translateX(33%) translateY(-33%);
}

.cta__label {
    line-height: 1em;
    padding: 0;
    margin: 0;
}

.cta__label .h1 {
    font-size: 24px;
    line-height: 28.8px;
}


.cta:hover {
  background: var(--theme-primary);
  color: var(--theme-primary-text); 
  text-decoration: none;
}

.cta:hover .cta__icon {
  background: var(--theme-danger);
}

.cta:hover .cta__notification {
    background: var(--theme-white);
    color: var(--theme-primary);
}

@media screen and (min-width: 960px ){
  
  
  .cta-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 20px;

      width: 100%;
      max-width: 760px;
  }
  
  .cta {
    padding: 29px 30px; 
  }
  
    .cta + .cta {
    margin-top: 0;
  }

}