/**
 * 2019_01_15
 */
.CBUI_action {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    color: var(--CBTextColorForLinks);
    cursor: default;
    min-height: 44px;
    padding: 5px 10px;
    text-align: center;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/**
 * 2019_09_05
 */
a.CBUI_action {
    cursor: auto;
    text-decoration: none;
}



.CBUI_alignItems_end {
    align-items: flex-end;
}



.CBUI_backgroundColor1 {
    background-color: var(--CBBackgroundColor1);
}



.CBUI_backgroundColor2 {
    background-color: var(--CBBackgroundColor2);
}



.CBUI_backgroundColor3 {
    background-color: var(--CBBackgroundColor3);
}



.CBUI_border_rounded {
    border-radius: 10px;
}



/**
 * The class styles an element to look like a button which can be used instead
 * of a link style for high priority user interface items that don't cause
 * navigation.
 *
 * This class will work properly on <input type="submit"> elements.
 *
 * CBUI_button1 elements are often children of CBUI_container1 elements.
 */
.CBUI_button1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(var(--CBButtonBackgroundColorHighlight),
                var(--CBButtonBackgroundColor));
    border: 1px solid var(--CBButtonBackgroundColor);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--CBButtonTextColor);
    font: inherit;
    max-width: 100%;
    min-height: 44px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    width: 640px;

    cursor: default;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.CBUI_section > .CBUI_button1 {
    border-radius: 0;
}

.CBUI_button1.CBUI_button1_disabled {
    opacity: 0.1;
}


/**
 * 2020_09_19
 *
 *      The CBUI_container_ classes were created to create combinable classes
 *      that can be used to create a container with the behavior desired without
 *      having to create a custom style sheet.
 *
 *      The old container classes were good in many cases, but also weren't good
 *      in many cases.
**/

.CBUI_container_flexCenterHorizontal {
    display: flex;
    justify-content: center;
}

.CBUI_container_paddingHalfTopBottom {
    padding-bottom: 10px;
    padding-top: 10px;
}



/**
 * 2019_01_06
 *
 *      This container is was created to hold one item centered horizontally
 *      will 10px of padding to separate it from adjacent items.
 *
 *      It might be used to hold each selectable item in a list of selectable
 *      items.
 */
.CBUI_container1 {
    display: flex;
    justify-content: center;
    padding: 10px;
}



/**
 * 2019_01_06
 *
 *      This container was created to hold items that will be centered
 *      horizontally and wrap if there are to many to fit on one line.
 */
.CBUI_container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}



/**
 * 2019_02_17
 *
 *      This container centers its children vertically.
 */
.CBUI_container3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



/**
 * 2019_06_14
 *
 *      This container is was created to hold one item centered horizontally
 *      will 20px of padding to separate it from adjacent items.
 *
 *      It is the same as CBUI_container1 but with 20px padding.
 */
.CBUI_container4 {
    display: flex;
    justify-content: center;
    padding: 20px;
}



/**
 * 2019_07_18
 *
 *      This container has horizontal children that will each take up an equal
 *      amount of the container's width. It's initial use was as a section item
 *      of actions.
 */

.CBUI_container_horizontalEqual {
    display: flex;
}

.CBUI_container_horizontalEqual > * {
    flex: 1 1 320px;
}

.CBUI_container_horizontalEqual > * + * {
    border-left: 1px solid var(--CB_UI_borderColor);
}



/**
 * 2019_12_26
 *
 *      This container has horizontal children that will wrap and are spaced
 *      evenly.
 */
.CBUI_container_spaceEvenly {
    display: flex;
    flex-wrap: wrap;

    /* remove space-around when space-evenly has greater support */
    justify-content: space-around;
    justify-content: space-evenly;
}



/**
 * 2019_06_25
 *
 *      CBUI_container_topAndBottom styles vertically aligned container elements
 *      meant to hold two text elements.
 *
 *      CBUI_container_leftAndRight and CBUI_container_sideBySide style
 *      horizontally aligned container elements meant to hold two text elements.
 *      With short strings, they will look roughly the same. With long strings,
 *      CBUI_container_leftAndRight will wrap its two text elements.
 *
 *      CBUI_container_leftAndRight is better suited when the text elements
 *      contain longer text.
 *
 *      Elements with these class names can be used as either section item
 *      elements or section item part elements.
 */

.CBUI_container_leftAndRight,
.CBUI_container_sideBySide,
.CBUI_container_topAndBottom {
    display: flex;

    box-sizing: border-box;
    min-height: 44px;
    overflow-wrap: break-word;
    padding: 5px 0;

    /* enable CBUI_ellipsis on direct child elements */
    min-width: 0;
}

.CBUI_container_leftAndRight,
.CBUI_container_sideBySide {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.CBUI_container_topAndBottom {
    flex-direction: column;
    justify-content: center;
}

.CBUI_container_leftAndRight > *,
.CBUI_container_sideBySide > *,
.CBUI_container_topAndBottom > * {
    box-sizing: border-box;
    padding: 0 10px;
}

.CBUI_container_leftAndRight > :nth-child(2),
.CBUI_container_sideBySide > :nth-child(2) {
    /**
     * A justify-content value of "space-between" will not work when the items
     * are wrapped. A margin-left of auto on string 2 will create the same
     * result when wrapped or not.
     */
    margin-left: auto;

    text-align: right;
}

.CBUI_container_leftAndRight > * {
    max-width: 80%;
}

.CBUI_container_sideBySide > * {
    max-width: 50%;
}



/**
 * 2019_01_15
 *
 *      This class was created to hold content in section item parts. It is
 *      designed to hold content from a single string to full message content.
 */
.CBUI_content {
    padding: 5px 10px;
}



/**
 * 2019_03_01
 *
 *      This class styles an element to hold a single string or full message
 *      content with padding similar to what is standard for most view elements.
 */
.CBUI_content2 {
    padding: 20px;
}



/**
 * 2019_03_01
 *
 *      This class styles an element to use the default pointer which is
 *      appropriate for user interface elements that shouldn't display the text
 *      bar.
 */
.CBUI_cursorDefault {
    cursor: default;
}



/**
 * 2019_03_01
 *
 *      This class styles an element so that its text will only be shown on one
 *      line and truncated with an ellipsis. The class should only be used on
 *      elements that directly contain text content. This means if you're using
 *      message markup you will want to use it only on elements that are
 *      explicitly paragraph (<p>) elements.
 *
 *      The parent element will need to have "min-width: 0" applied in some
 *      cases.
 */
.CBUI_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/**
 * 2019_03_01
 */
.CBUI_flexGrow {
    flex-grow: 1;
}



/**
 * 2019_03_23
 */
.CBUI_flexNone {
    flex: none;
}



/**
 * 2019_09_04
 */
.CBUI_fontFamily_monospace {
    font-family: var(--CBMonospaceFontFamily), monospace;
}



.CBUI_navigationArrow {
    align-items: center;
    color: var(--CBTextColor3);
    display: flex;
    flex: none;
    min-height: 44px;
    padding: 0 10px;
}

.CBUI_navigationArrow::after {
    content: ">";
}



/**
 * 2019_06_17
 */
.CBUI_padding_standard {
    padding: 20px;
}



/**
 * 2020_02_18
 */
.CBUI_padding_standard_vertical {
    padding-bottom: 20px;
    padding-top: 20px;
}



/**
 * 2019_06_17
 */
.CBUI_padding_half {
    padding: 10px;
}

/**
 * 2019_07_07
 */
.CBUI_panel {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    overflow-y: scroll;
    overscroll-behavior: contain;
    position: fixed;
    z-index: 1500; /* see CBEqualizePageSettingsPart.css */
}


.CBUI_section {
    background-color: var(--CB_UI_paperColor);
    border-color: var(--CB_UI_borderColor);
    border-style: solid;
    border-width: 1px 0;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    width: 640px;

    /*
    Stop double-tap zooming on all CBUISections

    Interactive user interfaces are meant to be readable (don't need to be
    zoomed) and often meant to be tapped, potentially quickly.
    */
    touch-action: manipulation;
}

@media (min-width: 641px) {
    .CBUI_section {
        border-radius: 10px;
        border-width: 1px;
    }
}

.CBUI_section > * + * {
    border-top-color: var(--CB_UI_borderColor);
    border-top-style: solid;
    border-top-width: 1px;
}

/**
 * 2019_02_01
 *
 *      Add this style to a CBUI_section element to make sure the side borders
 *      are never hidden.
 */
.CBUI_section_inner {
    border-radius: 10px;
    border-width: 1px;
}

.CBUI_section_noborder {
    border: none;
}

.CBUI_section_noborder > * + * {
    border: none;
}

.CBUI_section_width {
    width: 640px;
}



/**
 * 2019_03_01
 *
 *      The class styles an element to apply the appropriate white space and
 *      layout to hold a child element with the CBUI_section class.
 */
.CBUI_section_container, /* deprecated use CBUI_sectionContainer */
.CBUI_sectionContainer {
    display: flex;
    justify-content: center;

    box-sizing: border-box;
    max-width: 100%;

    padding-bottom: 10px;
    padding-top: 10px;
}



/**
 * 2019_03_01
 *
 *      This class styles an element as a horizontal flex box that can hold one
 *      or more "section item parts". One of the parts should grow so that the
 *      part or parts will fill the horizontal width of the section item.
 *
 *      @NOTE
 *
 *          This class should not make assumptions about its cursor or whether
 *          its section item parts are selectable. Substyles may be created for
 *          those purposes later.
 */
.CBUI_sectionItem {
    display: flex;
    min-height: 44px;
}

/**
 * 2019_03_23
 */
.CBUI_sectionItem_separated > * + * {
    border-left-color: var(--CB_UI_borderColor);
    border-left-style: solid;
    border-left-width: 1px;
}

/**
 * 2019_03_09
 *
 *      When a section item is a link to another page the section item should
 *      not inherit typical link styles.
 */
a.CBUI_sectionItem {
    text-decoration: none;
    color: inherit;
}

/**
 * 2019_03_05
 *
 *      This class is usually applied to an anchor element that is a direct
 *      child of an element with the "CBUI_sectionItem" class and is acting as a
 *      section item part.
 */
.CBUI_sectionItemPart_anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;

    box-sizing: border-box;
    min-height: 44px;
    padding: 5px 10px;
    text-align: center;
}


/**
 * @deprecated 2019_06_25
 *
 *      Use CBUI_container_topAndBottom, CBUI_textSize_small, CBUI_textColor2,
 *      and CBUI_ellipsis.
 */
.CBUI_sectionItemPart_strings,
.CBUI_sectionItemPart_titleDescription {
    display: flex;
    flex-direction: column;
    justify-content: center;

    box-sizing: border-box;
    min-height: 44px;
    padding: 5px 0;

    /* enable ellipsis */
    min-width: 0;
}

.CBUI_sectionItemPart_strings > *,
.CBUI_sectionItemPart_titleDescription > * {
    padding-left: 10px;
    padding-right: 10px;
}

.CBUI_sectionItemPart_titleDescription > :nth-child(2) {
    color: var(--CBTextColor2);
    font-size: 80%;
}


/**
 * 2019_03_23
 */
.CBUI_sectionItemPart_strings_miniTitle {
    color: var(--CBTextColor2);
    font-size: 50%;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.CBUI_selectable {
    border: 2px solid var(--CBTextColor3);
    border-radius: 5px;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 44px;
    min-height: 44px;
    overflow: hidden;
}

.CBUI_selectable.CBUI_selected {
    border-color: var(--CBTextColorForLinks);
}

/**
 * 2019_03_02
 */
.CBUI_spinner {
    display: inline-block;

    height: 50px;
    width: 50px;

    border-width: 2px;
    border-style: solid;
    border-radius: 50%;

    border-color: hsla(240, 100%, 50%, 0.2);
}

.CBUI_spinner.CBUI_spinner_active {
    border-left-color: hsla(240, 100%, 50%, 1.0);
    animation: CBUI_spinner_animaton 2.0s infinite linear;
}

@keyframes CBUI_spinner_animaton {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/**
 * 2019_02_23
 *
 *      This class styles an element to stick to the top of the viewport as long
 *      as its parent element is visible. It is intended to be used for high
 *      priority user interface items, such as a container for a subtotal and
 *      buy button on a tall product builder page.
 */
.CBUI_sticky_top {
    background-color: var(--CB_UI_paperColor);
    margin-bottom: 40px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 500;
}

/**
 * 2019_02_13
 *
 *      This class was created for an element that contains a single string of
 *      text that will be centered horizontally and vertically inside an element
 *      at least 44px high.
 */
.CBUI_text1 {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    min-height: 44px;
    padding: 5px 10px;
    text-align: center;
}

/**
 * 2019_03_23
 */
.CBUI_textAlign_center {
    text-align: center;
}



.CBUI_textColor1 {
    color: var(--CBTextColor1);
}



.CBUI_textColor2 {
    color: var(--CBTextColor2);
}



.CBUI_textColor3 {
    color: var(--CBTextColor3);
}



/**
 * 2019_12_20
 */
.CBUI_textColor_link {
    color: var(--CBTextColorForLinks);
}


.CBUI_textSize_small {
    font-size: 80%;
}


/**
 * 2019_01_15
 *
 *      This simple title class can be used before a section or a set of related
 *      sections. It is generally used on an h1-h6 element.
 */
.CBUI_title1 {
    font-size: 100%;
    padding: 50px 20px 10px;
    text-align: center;
}

/**
 * 2019_02_17
 *
 *      This sets the minimum height of an element to a height the is
 *      appropriate for touch user interface.
 */
.CBUI_touch_height {
    min-height: 44px;
}

/**
 * 2019_03_01
 *
 *      This class styles an element so that its contents are unable to be
 *      selected. This sould be used when an element is a user interface
 *      control.
 */
.CBUI_userSelectNone {
    cursor: default;

    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

/**
 * 2019_06_17
 *
 *      All view and view-like root elements should have this class. Many views
 *      will also add the CBUI_padding_standard or the
 *      CBUI_padding_standard_vertical class.
 */
.CBUI_view {
    display: flex;
    justify-content: center;

    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
}

/**
 * 2019_06_17
 *
 *      All view and view-like root elements should have a single child with
 *      this class.
 */
.CBUI_viewContent {
    max-width: 100%;
}


/**
 * 2019_09_19
 */
.CBUI_whiteSpace_preWrap {
    white-space: pre-wrap;
}



/**
 * 2020_01_04
 *
 *      This class gives an element styles that meet the general definition of
 *      what an outer view element should be.
 */
.CBUI_view_outer {
    display: flex;
    justify-content: center;

    box-sizing: border-box;
    max-width: 100%;
    padding: 20px;
}



/**
 * 2020_01_04
 *
 *      This class is used to display text content. It may be used in
 *      conjunction with CBContentStyleSheet. An element using this class should
 *      be placed inside a element using the class CBUI_view_outer.
 */
.CBUI_view_inner_text {
    line-height: 1.5;
    max-width: 100%;
    width: var(--CB_UI_readableWidth);
}



/* old style classes */

.CBUIRoot
{
    background-color: var(--CB_UI_paperColor);
    /* can grow, cannot shrink, therefore can fill a flexible container */
    flex: 1 0 auto;
}



.CBUIRoot +
.flex-fill
{
    display: none;
}



.CBUIHalfSpace
{
    height: 22px;
}



.CBUIHeader
{
    background-color: var(--CB_UI_paperColor);
    border-bottom-color: var(--CB_UI_borderColor);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
}



/**
 * On CB_UI pages the CBUIHeader should use the appropriate colors.
 */
.CB_UI .CBUIHeader {
    background-color: var(--CB_UI_paperColor);
    border-bottom-color: var(--CB_UI_borderColor);
}



.CBUIHeader > .left {
    display: flex;
    flex: 1 1 100px;
    min-width: 0;
}

.CBUIHeader > .center {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

.CBUIHeader > .right {
    display: flex;
    flex: 1 1 100px;
    justify-content: flex-end;
    min-width: 0;
}

.CBUIHeaderItem {
    align-items: center;
    display: flex;
    min-height: 44px;
    min-width: 0;
}

.CBUIHeaderItem > a {
    color: inherit;
    cursor: default;
    font-weight: bold;
    padding: 0 5px;
    text-decoration: none;

    /* ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.CBUIHeaderItem.action > a {
    color: var(--CBTextColorForLinks);
    cursor: pointer;
    font-weight: normal;
}

.CBUIKeyValue {
    padding: 5px 10px;
}

.CBUIKeyValue > .key {
    color: hsl(0, 0%, 50%);
}

.CBUILink {
    align-items: center;
    display: flex;
    min-height: 44px;
    padding: 5px 10px;
}

.CBUILink > span {
    text-align: center;
    width: 100%;
}

.CBUIMessageSectionItemPart {
    flex: 1 1 auto;
    padding: 20px;
}

.CBUISectionHeader {
    box-sizing: border-box;
    color: var(--CBTextColor2);
    font-size: 14px;
    font-weight: normal;
    margin: 0 auto;
    max-width: 100%;
    padding: 5px 10px;
    width: 640px;
}

.CBUISectionHeader > h1 {
    font: inherit;
    text-transform: uppercase;
}

.CBUISectionHeader > div > p + p {
    margin-top: 0.5em;
}

.CBUISectionItem {
    background-color: var(--CB_UI_paperColor);
    min-height: 44px;
}

.CBUISectionItem a {
    color: var(--CBTextColorForLinks);
    text-decoration: none;
}

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

/**
 * 2018.04.02 minimum width of flex items
 *
 * By default, a flexible item cannot be smaller than it's content size along
 * the main axis. This may prevent multiple flex items from fitting in their
 * container.
 *
 * To remedy this there are some solutions. You can either set:
 *
 *      "overflow: hidden;"
 *
 *      "min-width: 0;" (or height for vertical flex boxes)
 *
 * This is very important for enabling the display of ellipsis. Often the flex
 * item containing the text uses the overflow method while flexbox parents use
 * the "min-width" method.
 */

.CBUISectionItem .ellipsisTextContainer {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    min-width: 0; /* min-width method */
    padding: 5px 10px;
}

.CBUISectionItem .ellipsisText {
    overflow: hidden; /* overflow method */
    text-overflow: ellipsis;
    white-space: nowrap;
}

.CBUISectionItem > .information {
    color: hsl(0, 0%, 50%);
    font-size: 14px;
}

.CBUISectionItem2 {
    display: flex;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.CBUISectionItem2 > .thumbnail {
    display: none;
}

.CBUISectionItem2 > .thumbnail.set {
    display: block;
    padding: 5px 0 5px 5px;
}

.CBUISectionItem2 > .thumbnail img {
    display: block;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.CBUISectionItem2 > .title {
    cursor: pointer;
    flex: 1 1 auto;
    padding: 5px 10px;
}

.CBUISectionItem2 > .CBUIDropdown {
    background-color: inherit;
    display: flex;
    flex: none;
    flex-direction: row-reverse;
    position: relative;
}

.CBUISectionItem2 > .CBUIDropdown.expanded {
    z-index: 1001;
}

.CBUISectionItem2 > .CBUIDropdown > .button {
    align-items: center;
    border-left-color: var(--CB_UI_borderColor);
    border-left-style: solid;
    border-left-width: 1px;
    box-sizing: border-box;
    display: flex;
    flex: none;
    justify-content: center;
    width: 50px;
}

.CBUISectionItem2 > .CBUIDropdown > .button::after {
    content: "<";
}

.CBUISectionItem2 > .CBUIDropdown.expanded > .button::after {
    content: ">";
}

.CBUISectionItem2 > .CBUIDropdown > .menu {
    display: none;
}

.CBUISectionItem2 > .CBUIDropdown.expanded > .menu {
    display: flex;
}

.CBUISectionItem2 .command {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-width: 50px;
    padding: 5px 10px;
}