/* ==========================================================================
   css/v2/chart-settings.css - the saved chart settings row of the big chart
   page (/screens/bse/graphics/graphics_v2_settings.jsp, linked from there so
   the include stays self contained). Buttons: .btn_action from markets.css.
   ========================================================================== */

body.v2 .graph_settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
    font-size: 15px;
}

body.v2 .graph_settings_login { margin: 0; color: #5b6675; }

body.v2 .graph_settings_login a { color: #1e4280; font-weight: 600; }

body.v2 .gs_pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

body.v2 .gs_lbl {
    font-weight: 600;
    color: #5b6675;
    white-space: nowrap;
}

body.v2 select.gs_select,
body.v2 input.gs_input {
    min-width: 0;
    max-width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #cdd6e2;
    border-radius: 6px;
    background: #fff;
    color: #1f2733;
    font-family: inherit;
    font-size: 16px;
}

body.v2 select.gs_select { width: 200px; cursor: pointer; }

body.v2 input.gs_input { width: 190px; }

body.v2 select.gs_select:focus,
body.v2 input.gs_input:focus {
    outline: none;
    border-color: #1e4280;
    box-shadow: 0 0 0 3px rgba(30, 66, 128, .12);
}

/* the no-javascript "load" button; chart-settings.js hides it */
body.v2 .gs_btn {
    height: 40px;
    padding: 0 14px;
    border: 1px solid #cdd6e2;
    border-radius: 6px;
    background: #fff;
    color: #1e4280;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

body.v2 .gs_btn[hidden] { display: none; }

/* rename / delete / save look like links (the old page's .speclnk) */
body.v2 .gs_link {
    margin: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #1e4280;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

body.v2 .gs_link:hover { text-decoration: underline; }

body.v2 summary.gs_link::-webkit-details-marker { display: none; }

body.v2 .gs_delete { color: #b3261e; }

body.v2 .gs_pop_save { margin-left: auto; }

/* The <details> popup: the old 250px popup windows, anchored under the link. */
body.v2 .gs_pop { position: relative; }

body.v2 .gs_pop[open] > summary.gs_link { text-decoration: underline; }

body.v2 .gs_pop_body {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px;
    width: max-content;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid #cdd6e2;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(20, 35, 60, .14);
}

body.v2 .gs_pop_save .gs_pop_body { left: auto; right: 0; }

body.v2 .gs_pop_body .btn_action { min-height: 40px; }

@media (max-width: 640px) {
    body.v2 .gs_pick { flex: 1 1 100%; }

    body.v2 select.gs_select { flex: 1 1 auto; width: auto; }

    body.v2 .gs_pop_save { margin-left: 0; }

    /* on a phone the popup is a full width panel in the flow */
    body.v2 .gs_pop[open] { flex: 1 1 100%; }

    body.v2 .gs_pop_body {
        position: static;
        width: auto;
        max-width: none;
        box-shadow: none;
    }

    body.v2 .gs_pop_body input.gs_input { flex: 1 1 140px; width: auto; }
}