/* User Manual and object reference-specific styles are going here not to overload the main styles.css file */
:root {
    --clr-yellow: #FFD435;
    --clr-product-border: black /*#C7D7DB*/;
    --clr-logo-darkblue: #240E39;
    --clr-logo-lightblue: #6189B3;
    --product-corner-radius: 5px;
    --clr-product-title-bk: #598AB7;
    --clr-product-descr-bk: #F7FBFF;
    --main-font: Arial;
}

.script, .aspscript, .vbscript {
    font-family: Courier New, Courier, monospace;
    padding: 5px;
    border: 1px solid gray;
    display: block;
    margin: 10px 0 10px 0;
    width: fit-content;
}

/* Propertied and Methods Table */
.properties-methods-table {
    display: grid;
    border: 1px solid gray;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto 1fr;
    width: fit-content;
}

.properties-methods-delimiter {
    border-left: 1px solid gray;
}

.properties-column {
    width: 100%;
    height: min-content;
}

.methods-column {
    width: 100%;
    height: min-content;
}

.properties-column div:first-child, .methods-column div:first-child {
    background-color: var(--clr-yellow);
    color: white;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid gray;
}

.methods-column div a, .properties-column div a{
    padding: 0 5px 0 5px;
    color: black;
}

.methods-column div a:hover, .properties-column div a:hover {
    color: var(--clr-logo-lightblue);
}

.properties-column div:first-child a, .methods-column div:first-child a {
    color: black;
}

.properties-column div:first-child a:hover, .methods-column div:first-child a:hover {
    color: var(--clr-logo-lightblue);
}

/* End of Propertied and Methods Table */

/* Property and method descriptions */

.property-name, .method-name {
    font-weight: bold;
}

.property-name span:first-child {
    font-weight: bold;
    color: #000080;
}

.property-name span:last-child {
    font-weight: normal;
}

.property-name ~ blockquote, .method-name ~ blockquote {
    padding: 10px 20px 10px 20px;
}

.method-name span:first-child {
    color: #F00000;
}

/* End of Property and method descriptions */
b {
    font-weight: bold;
}

i {
    font-style: italic;
}

a {
    text-decoration: none;
    color: #064260;
}

a:hover {
    color: var(--clr-logo-lightblue);
}

/* Other Products Box */
.other-products {
    font-weight: bold;
    font-size: 14px;
    display: grid;
    height: max-content;
    background-color: white;
    border-radius: var(--product-corner-radius);
    border: 1px solid black;
    overflow: hidden; /* to fix boxes overlapping rounded corners */
}

    .other-products .other-products-title {
        background-color: var(--clr-logo-lightblue);
        color: white;
        display: grid;
        align-items: center;
        padding: 0 10px 0 10px;
        text-shadow: 1px 1px 2px black;
        border-bottom: 1px solid black;
    }

.other-products .other-products-product {
    display: grid;
    grid-template-columns: 1fr 7fr;
    padding: 0 10px 0 10px;
    align-items: center;
    color: black;
    font-size: 12px;
}


.other-products .other-products-product a {
    color: black;
}

.other-products .other-products-product a:hover {
    color: white;
}

.other-products .other-products-product:has(a:hover) {
    background-color: var(--clr-logo-lightblue);
}

.other-products .other-products-product img {
    width: 20px;
    display: inline-block;
}

/* End of Other Products Box */

hr {
    border: none;
    height: 1px;
    background: black;
}

hr.objectseparator {
    margin-bottom: 5px;
}

/* Important: to make the jump-to anchor appear right below the header and not hidden behind it.*/
hr.objectseparator ~ a, a[name*="_"] {
    scroll-margin-top: 100px;
}


@media screen and (max-width: 900px) {
    .other-products {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .other-products .other-products-title {
        grid-column-start: 1;
        grid-column-end: 4;
    }
}

@media screen and (max-width: 500px) {
    .other-products {
        grid-template-columns: 1fr 1fr;
    }

        .other-products .other-products-title {
            grid-column-start: 1;
            grid-column-end: 3;
        }
}