/* 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, .csharp, .vbnet {
    font-family: Courier New, Courier, monospace;
    padding: 5px;
    border: 1px solid gray;
    display: block;
    margin: 10px 0 10px 0;
    xwidth: fit-content;
    overflow-wrap: anywhere;
}

    .vbnet::before {
        content: "VB.NET";
        background-color: #FFE77B;
        border: 1px black solid;
        display: block;
        padding: 3px;
    }

.vbnet {
    background-color: #E7FF7B;
}

.csharp::before {
    content: "C#";
    background-color: #9BB0BA;
    border: 1px black solid;
    display: block;
    padding: 3px;
}

.csharp {
    background-color: lightblue;
}

.link {
    font-family: Courier New, Courier, monospace;
    padding: 5px;
    margin: 10px 0 10px 0;
    font-weight: bold;
}

.error {
    font-family: Courier New, Courier, monospace;
    color: red;
    font-weight: bold;
}

.prev-next {
    display: flex;
    grid-gap: 5px;
}

/* 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;
    overflow-wrap: anywhere;
}

.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 */

/* Contents Page */
#products .contents {
    padding: 20px;
}

.contents ol li {
    padding: 10px 0 0 0;
}

.contents ol#livedemo li {
    margin: 0px 0 0 10px;
}


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

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

/* Example links */
.example-links {
    display: grid;
    border-left: 5px solid var(--clr-logo-lightblue);
    padding-left: 5px;
    overflow-wrap: anywhere;
    grid-template-columns: auto 1fr;
    grid-column-gap: 10px;
    grid-template-areas:
        "link1 image"
        "link2 image"
}

.example-links a:nth-of-type(1) {
    grid-area: link1;
}

.example-links a:nth-of-type(2) {
    grid-area: link2;
}

.example-links div {
    grid-area: image;
    align-items: center;
    display: grid;
}


ol li {
    margin-left: 15px;
}

/* 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: 110px;
}

/* Table 3 columns */
.table-3-columns {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    border: 1px solid black;
}

.table-3-columns div {
    border: 1px solid black;
    padding: 2px;
    overflow-x: anywhere;
}

.table-3-columns div:nth-of-type(1), .table-3-columns div:nth-of-type(2), .table-3-columns div:nth-of-type(3) {
    font-weight: bold;
    text-align: center;
}

.table-3-columns div:nth-child(3n+1){
    background-color: #A0A0A0;
}

.table-3-columns div:nth-child(3n+2) {
    background-color: #E0E0E0;
}

.table-3-columns div:nth-child(3n+3) {
    background-color: #F0F0F0;
}
/* End of Table 3 columns */

/* Barcode table (chapter 12) */
.barcode-table {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border: 1px solid gray;
}

.barcode-table div {
    border: 1px solid gray;
    padding: 5px;
}

.barcode-table div.comment {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: #EEEEEE;
}

.table-2-columns {
    display: grid;
    grid-template-columns: auto auto;
}

.table-2-columns div {
    display: grid;
    align-items: center;
    justify-items: center;
}

.table-6-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    border: 1px solid black;
}

    .table-6-columns div {display: grid;
        border: 1px solid black;
        padding: 3px;
        align-items: center;
        justify-items: center;
    }

.color-table {
    display: grid;
    xborder: 1px solid gray;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
}

    .color-table > div {
        padding: 3px;
        border: 1px solid gray;
    }

    .color-table > div div:first-child {
        padding-bottom: 5px;
        font-weight: bold;
    }

        .color-table > div div:nth-of-type(2) {
            font-family: Courier New, Courier, monospace;
        }

/* End of Barcode table (chapter 12) */

.object-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@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;
    }

    .table-3-columns {
        grid-template-columns: 1fr;
        overflow-wrap: anywhere;
    }
}

@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;
    }

    .barcode-table {
        grid-template-columns: 1fr;
    }

    .barcode-table div.comment {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .table-6-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .table-6-columns div:nth-of-type(1), .table-6-columns div:nth-of-type(2), .table-6-columns div:nth-of-type(3) {
        display: none;
    }

    .color-table {
        grid-template-columns: 1fr 1fr;
    }

    .object-list {
        grid-template-columns: 1fr 1fr;
    }
}