/**
 * The CBUIPanel element is a viewport element that is the exact size of the
 * viewport and does not grow. If its content is taller that its height the
 * content will scroll.
 */
.CBUIPanel {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

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


/**
 * @NOTE 2019_09_18
 *
 *      When the deprecated CBUIPanel functions are removed the display
 *      declaration can be removed from CBUIPanel and this rule set can be
 *      removed.
 */
.CBUIPanel_showing {
    display: block;
}



/**
 * The background element has the transparent black background and 10px of
 * padding to draw a translucent border around the surface element. It is a
 * flexbox so that the surface element can grow to fill its height it it is
 * shorter.
 */
.CBUIPanel_background
{
    display:
    flex;

    flex-direction:
    column;

    background-color:
    hsla(0, 0%, 0%, 0.8);

    box-sizing:
    border-box;

    min-height:
    100vh;

    padding:
    3%;
}



/**
 * @deprecated 2019_09_18
 *
 * The surface element has a white background and rounded corners. It is a
 * flexbox so that the interface element can always be aligned with its bottem
 * edge by having a margin-top value of "auto".
 */
.CBUIPanel_surface {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color:
    var(--CBBackgroundColor1);

    border-radius: 10px;
    box-sizing: border-box;

    color:
    var(--CBTextColor1);

    flex: 1 0 auto;
}



/**
 * The surface element has a white background and rounded corners. It's single
 * child element will be styled to fill its full area.
 */
.CBUIPanel_surface2
{
    display:
    flex;

    background-color:
    var(--CB_UI_paperColor);

    border:
    1px solid var(--CB_UI_borderColor);

    border-radius:
    10px;

    box-sizing:
    border-box;

    color:
    var(--CBTextColor1);

    flex:
    1 0 auto;

    overflow:
    hidden;
}



.CBUIPanel_surface2 > * {
    flex: 1 1 auto;
    max-width: 100%;
}



/**
 * The CBUIPanel_message and CBUIPanel_content mimic the styles of a
 * CBMessageView.
 */
.CBUIPanel_message {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    line-height: 1.5;
    max-width: 100%;
    padding: 20px;
}

/**
 * The content element contains the HTML generated from the message. The text is
 * centered by default. It has the same maximum width as the CBMessageView to
 * maintain readability.
 */
.CBUIPanel_content {
    max-width: 100%;
    width: 36em;
}

/**
 * The interface element the button elements that are currently used by the
 * panel.
 */
.CBUIPanel_interface {
    margin-top: 3em;
}