/*———— README ————*/

/*
This CSS file adds additional styling to Community Hub beyond what
is possible in Theme Settings (on the Community Hub Settings tab).
This includes several corrections to the Bold Theme that are not
accessible via Theme Settings.

If you are using the Bold Theme and want to rapidly change the
most prominently featured color in Community Hub, simply do a
Find and Replace All on the current primary color, which is #000000.
This assumes your primary color contrasts well with white (#FFFFFF).
If not, you will find many elements hard to read. We strongly advise
selecting a primary color that contrasts well with white.
In either case, you will need to make additional changes in Theme Settings
since this file is only meant to supplement Theme Settings, not replace it.
*/


/*———— GENERAL ————*/

flowruntime-lwc-field > div {
  max-width: 100%;
}

/* Imports a Google Font so it can be declared in Theme Settings. */
@import url(https://fonts.googleapis.com/css?family=Arial:300,400,700);


/*———— GLOBAL HEADER ————*/

/* Sets a minimum height on the global nav. This is more so pertinent for the mobile menu. */
.navbar {
    min-height: 50px;
}

/* Sets a maximum height on the mobile logo. */
.m-logo-retina {
    max-height: 45px;
}

/* Fix the Font Color of the "MENU" Button on Mobile when it's "Active." */
.navbar-default .m-toggle-button.s-active .m-toggle-button-text {
    color: #00945F;
}

/*———— MAIN CANVAS ————*/

/* Colors NC filters. */
.card-list .m-filter-group .btn {
    background-color: #FFFFFF;
    border-color: #E0E0E0;
    color: #00945F;
}
.card-list .m-filter-group .btn.m-btn-selected {
    background-color: #00945F;
    border-color: #00945F;
    color: #FFFFFF;
}

/* Changes the border color on cards (default is white). */
.card,
.card-list {
    border-color: #00945F !important;
}

/* Changes the top border color on the "Account" navigation menu for larger viewports. */
.l-canvas .list-group {
    border-top-color: #00945F;
}

/* Changes the default dark gray page header background color. */
.page-header.page-header-anchor.m-page-header {
    background-color: #00945F;
}

/* Indents and shrinks child navigation menu items (mobile and desktop). */
.nav-child {
    margin-left: 2em;
    font-size: .9em;
}

/* Removes unnecessary spacing from text-based lists in Read Only Field Set cards. */
.card ul.card-detail li > span > ul li,
.card ul.card-detail li > span > ol li {
    padding-left: 0px;
    padding-right: 0px;
}
.card ul.card-detail li > span > ul li:before,
.card ul.card-detail li > span > ol li:before {
    content: none;
}

/* Makes Community Hub show bullets for unordered text-based lists in the Read Only Field Set card type.
   Styles up to six levels deep. */
.card ul.card-detail li > span > ul > li,                                                     /* level 1 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li {                      /* level 4 */
    list-style-type: disc;                                                                    /* solid bullets */
}
.card ul.card-detail li > span > ul > li > ul > li,                                           /* level 2 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li {            /* level 5 */
    list-style-type: circle;                                                                  /* hollow bullets */
}
.card ul.card-detail li > span > ul > li > ul > li > ul > li,                                 /* level 3 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {  /* level 6 */
    list-style-type: square;                                                                  /* solid squares */
}

/* Makes Community Hub show bullets for ordered text-based lists in the Read Only Field Set card type.
   Styles up to six levels deep. */
.card ul.card-detail li > span > ol > li,                                                     /* level 1 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li {                      /* level 4 */
    list-style-type: decimal;                                                                 /* numbers like 1. 2. 3. */
}
.card ul.card-detail li > span > ol > li > ol > li,                                           /* level 2 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li {            /* level 5 */
    list-style-type: lower-alpha;                                                             /* lowercase letters like a. b. c. */
}
.card ul.card-detail li > span > ol > li > ol > li > ol > li,                                 /* level 3 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li {  /* level 6 */
    list-style-type: lower-roman;                                                             /* lowercase roman numerals like i. ii. iii. */
}

/* Makes Community Hub show bullets for unordered text-based lists in the Event card type.
   Styles up to six levels deep. */
.card div.m-event-description > ul > li,                                                      /* level 1 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li {                       /* level 4 */
    list-style-type: disc;                                                                    /* solid bullets */
}
.card div.m-event-description > ul > li > ul > li,                                            /* level 2 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li {             /* level 5 */
    list-style-type: circle;                                                                  /* hollow bullets */
}
.card div.m-event-description > ul > li > ul > li > ul > li,                                  /* level 3 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {   /* level 6 */
    list-style-type: square;                                                                  /* solid squares */
}

/* Makes Community Hub show bullets for ordered text-based lists in the Event card type.
   Styles up to six levels deep. */
.card div.m-event-description > ol > li,                                                      /* level 1 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li {                       /* level 4 */
    list-style-type: decimal;                                                                 /* numbers like 1. 2. 3. */
}
.card div.m-event-description > ol > li > ol > li,                                            /* level 2 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li {             /* level 5 */
    list-style-type: lower-alpha;                                                             /* lowercase letters like a. b. c. */
}
.card div.m-event-description > ol > li > ol > li > ol > li,                                  /* level 3 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li {   /* level 6 */
    list-style-type: lower-roman;                                                             /* lowercase roman numerals like i. ii. iii. */
}


/*———— MOBILE MENU CANVAS ————*/

/* Removes margin from the top of the mobile menu so it aligns with the container div. */
.m-off-canvas-nav {
    margin-top: 0px;
}

/* Changes dark gray background color of mobile menu to light gray. */
.l-off-canvas.l-off-canvas-left {
    background-color: #F9F9F9;
}

/* Sets the color of Navigation Menu Items in the mobile menu to the primary color. */
.m-off-canvas-nav a.list-group-item {
    background-color: #00945F;
    border-color: #ffffff;
    color: #fff !important;
}

/* Simplifies mobile menu Nav Menu Item hover and focus colors to be a shade of the primary color. */
.m-off-canvas-nav a.list-group-item:focus,
.m-off-canvas-nav a.list-group-item:hover {
    background-color: #00945F;
    box-shadow: 0 3000px rgba(0, 0, 0, 0.2) inset;
}

/* In mobile menu, converts left margin of child Nav Menu Items to left padding
   to prevent white background from appearing. */
.m-off-canvas-nav a.list-group-item.nav-child {
    margin-left: 0;
    padding-left: 2.5em;
}

/* Simplify Mobile Menu "list group" border to be a shade of the primary color using ARGB. */
.l-off-canvas .m-off-canvas-nav .list-group {
    border-bottom-color: #00945F99;
}

/* Changes the dark gray color of a selected item in a list to the primary color (e.g., Checkout page). */
.m-list-group-select a.list-group-item.active,
.m-list-group-select a.list-group-item.active:focus,
.m-list-group-select a.list-group-item.active:hover,
.m-list-group-select div.list-group-item.active {
    background-color: #00945F;
}


/*———— FLOWS ————*/

/* Corrects checkbox option display within a flow. */
.nu-lightning-wrapper .uiBlock .bBody .slds-form-element__control .slds-checkbox {
    width: auto;
}

/* Corrects text area label display within a flow. */
.nu-lightning-wrapper .bBody .inputHeader .richTextLabel {
    display: inline-block;
    float: none;
    text-align: left;
	width: 100%;
}

/* Corrects previous button display within a flow. */
.slds-button.slds-button_neutral.uiButton--default.uiButton{
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #00945F;
    transition: border .15s linear;
    background-color: #00945F;
    color: rgb(255, 255, 255);
}

/* Allows Address lightning component country picklist to behave correctly within a flow. */
.slds-scope .slds-form_compound .slds-form-element__group .slds-form-element__row{
	display: inherit;
}

/* Relocates the required asterisk on Lightning-wrapped components. */
.nu-lightning-wrapper .uiBlock .bBody .inputHeader .required{
	margin-right: auto;
	margin-left: auto;
}

/* Adds padding to radio button inputs within a flow. */
.flowruntimeRadioButtonInput .bBody .slds-form-element__control{
    padding-top: 25px;
}

.card-detail.card-actions a.btn {
	margin-bottom:1px;
}