/* ---------------------------------------------------------------------------
   wwwroot/css/shared/global/12-modal.css

   Loaded by _Layout.cshtml as part 12 of 17 for every page.
   Cascade order is the file order in that <link> list:
     previous: 11-top-navigation.css
     next:     13-panel.css

   Split out of a single monolithic stylesheet. Do not reorder the <link>
   tags and do not move a rule between these files: both change the cascade.
--------------------------------------------------------------------------- */
/* ==========================================================================
   LAYER 7 - MODAL (canonical)
   One copy replacing four duplicates. Top-level rules only: the responsive .modal overrides stay inside their @media blocks in the page stylesheets.
   ========================================================================== */
.modal {
    display: none; 
    position: fixed; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    z-index: 1000;
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    max-width: 90vw;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.close {
    color: white;
    float: right;
    font-size: 1.75rem;
    font-weight: bold;
}

.close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
.modal-body {
    padding: 2px 16px;
    background-color: #f4f4f4;
}

.left-column {
    width: 20%;
    float: left;
    margin-top: 3px;
}

.right-column {
    width: 80%;
    float: right;
}

.clear {
    clear: both;
}

#form-button-prev {
    background-color: rgb(57,57,57);
    border: 1px solid #ccc;
    color: #fff;
    margin-top: 28.5px;
    margin-left: 18px;
    margin-bottom: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 3px;
    font-size: 0.75rem;
}

#form-button-next {
    background-color: rgb(57,57,57);
    border: 1px solid #ccc;
    color: #fff;
    margin-top: 28.5px;
    margin-right: 22px;
    margin-bottom: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 3px;
    font-size: 0.75rem;
    min-width: 70px;
}

.modal-product-preview-close {
    margin-top: 8px;
    font-size: 0.75rem;
    margin-top: 9px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 7px;
}

.modal-product-preview-close:hover {
    color: #fff;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Shared modal / product-grid helpers.
   Each replaces an inline style attribute that was repeated across 
    _LandingProductGrid and _DashboardProductGrid -
   partials that render on more than one page, so the rules belong here.
   -------------------------------------------------------------------------- */

.product-grid-tabs {
/*    margin-top: 2rem;*/
}

.product-grid__head-cell,
.product-grid__cell {
    padding-top: 5px;
    padding-left: 0;
}

.product-grid__head-cell--first {
    padding-left: 9px;
}

.product-grid__cell--indent {
    padding-left: 7px;
}

.product-grid__subscribed-note {
    color: #ccc;
}

/* Contact links rendered inside the marketing banners. */
.invoke-contact-us {
    cursor: pointer;
    text-decoration: none;
}

a.invoke-contact-us {
    color: #0f62fe;
}