/*
 * DSDillon Mail
 * More Options V7
 */

.compose-more-panel{
    width:360px !important;
    max-height:min(500px,calc(100vh - 32px)) !important;

    overflow-y:auto !important;

    padding:10px !important;
}

#composePriority{
    display:none !important;
}

.dsd-v7-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:8px;
}

.dsd-v7-head strong{
    color:#263146;

    font-size:.72rem;
}

.dsd-v7-head small{
    color:#8a929e;

    font-size:.55rem;
}

.dsd-v7-section{
    margin-top:8px;

    padding-top:8px;

    border-top:
        1px solid #edf0f5;
}

.dsd-v7-section:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:0;
}

.dsd-v7-label{
    margin:
        0 1px 6px;

    color:#737c8b;

    font-size:.55rem;
    font-weight:850;

    letter-spacing:.055em;
    text-transform:uppercase;
}

.dsd-v7-row{
    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:5px;
}

.dsd-v7-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:5px;
}

.dsd-v7-control,
.dsd-v7-select{
    min-height:31px;

    border:
        1px solid #e0e4eb;

    border-radius:8px;

    background:#f9fafc;

    color:#465163;

    font-size:.62rem;
    font-weight:700;
}

.dsd-v7-control{
    padding:0 8px;

    cursor:pointer;
}

.dsd-v7-control:hover{
    border-color:
        #ccd2dd;

    background:
        #f1f3f7;
}

.dsd-v7-select{
    height:31px;

    padding:0 7px;
}

.dsd-v7-wide{
    width:100%;
}

.dsd-v7-swatch{
    width:25px;
    height:25px;

    padding:0;

    border:
        2px solid #fff;

    border-radius:7px;

    background:
        var(--swatch);

    box-shadow:
        0 0 0 1px #d7dce5;

    cursor:pointer;
}

.dsd-v7-toggle{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:100%;
    min-height:33px;

    padding:
        0 8px;

    border:
        1px solid transparent;

    border-radius:8px;

    background:transparent;

    color:#465163;

    font-size:.62rem;
    font-weight:700;

    cursor:pointer;
}

.dsd-v7-toggle:hover{
    background:#f2f4f8;
}

.dsd-v7-toggle strong{
    color:#7a8290;

    font-size:.57rem;
}

.dsd-v7-subview{
    display:none;
}

.dsd-v7-subview.open{
    display:block;
}

.dsd-v7-back{
    height:27px;

    padding:0 8px;

    border:
        1px solid #e0e4eb;

    border-radius:7px;

    background:#f8f9fc;

    color:#535d6e;

    font-size:.59rem;
    font-weight:700;

    cursor:pointer;
}

.dsd-v7-field{
    display:block;

    margin-bottom:7px;
}

.dsd-v7-field span{
    display:block;

    margin-bottom:3px;

    color:#737c8b;

    font-size:.55rem;
    font-weight:800;

    text-transform:uppercase;
}

.dsd-v7-field input,
.dsd-v7-field select,
.dsd-v7-field textarea{
    width:100%;
    min-height:32px;

    padding:6px 8px;

    border:
        1px solid #dfe3ea;

    border-radius:8px;

    background:#fafbfe;

    color:#202a3c;

    outline:none;

    font-size:.67rem;
}

.dsd-v7-field textarea{
    min-height:62px;

    resize:vertical;
}

.dsd-v7-actions{
    display:flex;

    justify-content:flex-end;

    gap:6px;

    margin-top:8px;
}

.dsd-v7-primary,
.dsd-v7-secondary{
    height:31px;

    padding:0 10px;

    border-radius:8px;

    font-size:.62rem;
    font-weight:750;

    cursor:pointer;
}

.dsd-v7-primary{
    border:0;

    background:#000033;

    color:#fff;
}

.dsd-v7-secondary{
    border:
        1px solid #e0e4eb;

    background:#fff;

    color:#515b6b;
}

.dsd-v7-preview{
    display:none;

    align-items:center;
    justify-content:center;

    min-height:150px;

    margin:8px 0;

    border:
        1px solid #e2e6ed;

    border-radius:10px;

    background:#fff;
}

.dsd-v7-preview.open{
    display:flex;
}

.dsd-v7-preview img{
    width:136px;
    height:136px;

    object-fit:contain;
}

.dsd-v7-card{
    display:inline-block;

    padding:10px 12px;

    margin:8px 0;

    border:
        1px solid #e0e4eb;

    border-radius:9px;

    background:#f8f9fc;
}

.dsd-v7-state-on{
    color:#21845c !important;
}

.dsd-v7-state-off{
    color:#8a929e !important;
}

@media(max-width:580px){

    .compose-more-panel{
        width:
            min(
                350px,
                calc(100vw - 20px)
            ) !important;
    }
}
/* ============================================================
   DSDILLON_MORE_OPTIONS_MOBILE_DRAWER_FINAL_V1

   Mobile More Options / Smart Insert is a bounded application
   drawer, not an extension of the document page.
   ============================================================ */

@media (max-width:580px) {

    .compose-more-panel {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;
        bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            ) !important;

        top: auto !important;

        box-sizing: border-box !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;

        max-height:
            min(
                76dvh,
                620px
            ) !important;

        margin: 0 !important;

        padding:
            10px
            10px
            max(
                12px,
                env(safe-area-inset-bottom)
            ) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior:
            contain !important;

        -webkit-overflow-scrolling:
            touch;

        touch-action:
            pan-y;

        scrollbar-gutter:
            stable;

        border-radius:
            16px !important;

        z-index:
            10050 !important;

        contain:
            layout paint;

        isolation:
            isolate;
    }

    /*
     * Keep the Smart Insert heading visible while the tool
     * collection scrolls beneath it.
     */
    .compose-more-panel
    .dsd-v7-head {
        position:
            sticky !important;

        top:
            -10px !important;

        z-index:
            4 !important;

        margin:
            -10px
            -10px
            8px !important;

        padding:
            11px
            10px
            9px !important;

        background:
            #fff !important;

        border-bottom:
            1px solid #edf0f5;
    }

    /*
     * A subview Back control stays available without forcing
     * the user to scroll to recover navigation.
     */
    .compose-more-panel
    .dsd-v7-back {
        position:
            sticky !important;

        top:
            38px !important;

        z-index:
            3 !important;
    }

    .compose-more-panel
    .dsd-v7-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

    .compose-more-panel
    .dsd-v7-control,
    .compose-more-panel
    .dsd-v7-select {
        min-width:
            0 !important;

        max-width:
            100% !important;
    }

    /*
     * Inputs remain inside the drawer width even while the
     * Android keyboard changes the visual viewport.
     */
    .compose-more-panel
    .dsd-v7-field input,
    .compose-more-panel
    .dsd-v7-field select,
    .compose-more-panel
    .dsd-v7-field textarea {
        box-sizing:
            border-box !important;

        max-width:
            100% !important;
    }
}

/*
 * Narrow handsets receive a single-column tool grid rather
 * than compressed controls.
 */
@media (max-width:360px) {

    .compose-more-panel
    .dsd-v7-grid {
        grid-template-columns:
            1fr !important;
    }
}