.iconbutton {
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #A0A0A0; /*darkblue, #00008B */
    background-color: #ccbe00; /*pink, darkgold #ccbe00, darkblue*/
    margin-top: 3px;
    padding-top: 2px;
    padding-bottom: 5px;
    width: 42px;
    height: 32px;
    margin-bottom: 2px;
    vertical-align: top;
}

.iconbutton:focus {
    outline: none;
    background-color: #e6d600; /*deeppink, lightgold #e6d600, dodgerblue*/
}

.iconbutton:hover {
    background-color: #e6d600; /*deeppink, lightgold #e6d600, dodgerblue*/
}

.contentCard100 {
    border-radius: 25px;
    border: 2px solid gray; /* #0d2c8c */
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    min-width: 665px;
    width: calc(100vw - 265px);
    max-width: 1200px;
    /*background-color: white;*/
    /*background: rgb(177,204,223);
    background: linear-gradient(135deg, rgba(177,204,223,1) 0%, rgba(236,236,189,1) 20%, rgba(236,236,189,1) 80%, rgba(177,204,223,1) 100%);*/
}

.contentCard80 {
    border-radius: 25px;
    border: 2px solid gray; /* #0d2c8c */
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    max-width: calc(100vw - 260px - 20%);
    /*background-color: white;*/
    /*background: rgb(177,204,223);
    background: linear-gradient(135deg, rgba(177,204,223,1) 0%, rgba(236,236,189,1) 20%, rgba(236,236,189,1) 80%, rgba(177,204,223,1) 100%);*/
}

.contentCard50 {
    border-radius: 25px;
    border: 2px solid gray; /* #0d2c8c */
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    min-width: 300px;
    width: calc((100vw - 330px) / 2);
    max-width: 550px;
    background-color: white;
}

.contentCard {
    border-radius: 25px;
    border: 2px solid gray; /* #0d2c8c */
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
    /*background-color: white;*/
    /*background: rgb(177,204,223);
    background: linear-gradient(135deg, rgba(177,204,223,1) 0%, rgba(236,236,189,1) 20%, rgba(236,236,189,1) 80%, rgba(177,204,223,1) 100%);*/
}

.divFlexCol1 {
    /* this should work - will likely need to create a dependency on height vs items in the list and make height greater as vw changes */
    /* looks to be working - need to decrease height for low item count and increase height for high item count */
    /* also may need to adjust height if the average name length is > N */
    /* also adjust the width height adjustment size based on the item count as well, less items less of an increase in height is needed based on a narrow view port */
    /* some of these adjustment can't be done server side because the server side does NOT know the viewport width or height */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    border: none;
}

.divFlexCol1 table {
    margin-right: 10px;
}

/* successmessage */

.messageSuccess {
    position: absolute;
    padding: 10px;
    white-space: nowrap;
    height: auto;
    width: auto;
    top: 65px;
    left: 200px;
    background-image: linear-gradient(rgba(118, 219, 154,0.3), rgba(118, 219, 154,1),rgba(118, 219, 154,0.3));
    border-radius: 5px;
    border: 2px solid #bfbfbf;
    font-weight: bold;
}
/* failedmessage */
.messageFail {
    position: absolute;
    padding: 10px;
    white-space: nowrap;
    height: auto;
    width: auto;
    top: 65px;
    left: 200px;
    background-image: linear-gradient(rgba(255, 148, 148,0.5), rgba(255, 148, 148,1),rgba(255, 148, 148,0.5));
    border-radius: 5px;
    border: 2px solid #bfbfbf;
    font-weight: bold;
}

/* dataGrid class */

.dataGrid {
    margin-top: 5px;
    /*padding-top: 0px;
    background-color: palegoldenrod;*/
}

.dataGrid a:link {
    color: #0033cc;
    text-decoration: none;
}

.dataGrid a:visited {
    color: #0033cc;
    text-decoration: none;
}

/* light green #33CC66
    dark dark blue #000099
    blue #0000ff
    light blue #0066FF
*/
/* blue #0033cc  dark gold #997a00*/
.dataGrid a:hover {
    color: #997a00;
    text-decoration: underline;
}

/* light grey #e6e6e6
    dark grey #a6a6a6
    darker grey #737373
*/

    .dataGrid table {
        background-color: gray; /*#a6a6a6*/
        /*    border-spacing: 5px;
    border-collapse: separate;*/
        /*    background-color: purple;*/
        /*    border-top: 2px solid yellow;*/
        position: relative;
        top: -5px;
    }

    .dataGrid table thead tr {
        /*    border-top: 3px solid red;*/
        height: 40px;
    }

        .dataGrid table tbody tr {
            background-color: gray;
        }

.dataGrid table tbody tr:nth-of-type(odd) {
    background-color: #fff;
}

    .dataGrid table thead th {
        position: sticky;
        top: 0px;
        border-top: 2px solid #a6a6a6;
        border-bottom: 2px solid #a6a6a6;
        background-color: #B8DBFD;
        /*    border-top: 1px solid #999;*/
        /*    box-shadow: inset 1px 1px #999, 0 1px #999;*/
    }

    .dataGrid input:read-only {
        background-color: gainsboro;
    }

.dataGrid table td {
/*    box-shadow: inset 1px -1px #999;*/
}

.dataGridTitle {
    margin-top: 5px;
/*    border: 1px solid purple;*/
/*    height: 20px;*/
}
    .dataGridTitle a:link {
        color: #0033cc;
        text-decoration: none;
    }

    .dataGridTitle a:visited {
        color: #0033cc;
        text-decoration: none;
    }

    .dataGridTitle a:hover {
        color: #997a00;
        text-decoration: underline;
    }

.tdAT {
    vertical-align: top;
}
.tdBW {
    word-break:break-word;
}
.tdBWAT {
    word-break: break-word;
    vertical-align: top;
}

/* dataNestedGrid class */

.dataNestedGrid {
    margin-top: 5px;
    /*padding-top: 0px;
    background-color: palegoldenrod;*/
}

    .dataNestedGrid a:link {
        color: #0033cc;
        text-decoration: none;
    }

    .dataNestedGrid a:visited {
        color: #0033cc;
        text-decoration: none;
    }

    /* light green #33CC66
    dark dark blue #000099
    blue #0000ff
    light blue #0066FF
*/
    /* blue #0033cc  dark gold #997a00*/
    .dataNestedGrid a:hover {
        color: #997a00;
        text-decoration: underline;
    }

    /* light grey #e6e6e6
    dark grey #a6a6a6
    darker grey #737373
*/

    .dataNestedGrid table {
        background-color: #a6a6a6;
        /*    border-spacing: 5px;
    border-collapse: separate;*/
        /*    background-color: purple;*/
        /*    border-top: 2px solid yellow;*/
        position: relative;
        top: -5px;
    }

        .dataNestedGrid table thead tr {
            /*    border-top: 3px solid red;*/
            height: 40px;
            background-color: #e6e6e6;
        }

        .dataNestedGrid table tbody tr {
            background-color: #e6e6e6;
        }

        .dataNestedGrid table tbody:nth-child(even) tr { /* even child */
            background-color: #e6e6e6;
        }

        .dataNestedGrid table tbody:nth-child(even) tr:nth-child(1) { /* even parent */
            background-color: #e6e6e6;
        }

        .dataNestedGrid table tbody:nth-child(odd) tr { /* odd child */
            background-color: #fff;
        }

        .dataNestedGrid table tbody:nth-child(odd) tr:nth-child(1) { /* odd parent */
            background-color: #fff;
        }

        .dataNestedGrid table thead th {
            position: sticky;
            top: 0px;
            border-top: 2px solid #a6a6a6;
            border-bottom: 2px solid #a6a6a6;
            background-color: #B8DBFD;
            /*    border-top: 1px solid #999;*/
            /*    box-shadow: inset 1px 1px #999, 0 1px #999;*/
        }

        .dataNestedGrid table td {
            /*    box-shadow: inset 1px -1px #999;*/
        }

.dataNestedGridTitle {
    margin-top: 5px;
    /*    border: 1px solid purple;*/
    /*    height: 20px;*/
}

    .dataNestedGridTitle a:link {
        color: #0033cc;
        text-decoration: none;
    }

    .dataNestedGridTitle a:visited {
        color: #0033cc;
        text-decoration: none;
    }

    .dataNestedGridTitle a:hover {
        color: #997a00;
        text-decoration: underline;
    }



.formPanelTitle {
    margin-top: 5px;
/*    border: 1px solid purple;*/
    /*    height: 20px;*/
}
.formPanelTitle a:link {
    color: #0033cc;
    text-decoration: none;
}
.formPanelTitle a:visited {
    color: #0033cc;
    text-decoration: none;
}
.formPanelTitle a:hover {
    color: #997a00;
    text-decoration: underline;
}

.searchQuickForm table {
    /*    border-spacing: 5px;*/
    margin-top: 5px;
    border: 1px solid #a6a6a6 /* #bf8040 dark brown/tan; #a6a6a6 light grey */;
    border-collapse: collapse;
}
    .searchQuickForm table td {
        background-color: #FAF0E6 /* antiquewhite (#FAEBD7), #FAF0E6 (linen) */;
    }



.formPanel {
    margin-top: 5px;
/*    border: 1px solid green;*/
}

.formPanel .labelCol {
    background-color: lightgray;
    
}

    .formPanel table {
        background-color: #a6a6a6; /* light gray - #a6a6a6; dark brown - #bf8040*/
        border-spacing: 1px;
    }

    .formPanel th {
        text-align: right;
/*        background-color: #d5e6f6;*/
    }

    .formPanel .valueCol {
        background-color: #FAF0E6; /* light pink - #f5eef7, pale tan - #fcf2cf, #fdf9e7 (decent), antiquewhite, (linen) #FAF0E6 */
    }

    .formPanel .formActions {
        /*height: 50px;*/
        background-color: #FAF0E6; /* light pink - #f5eef7 */
    }
    .formPanel .formActions td {
        padding: 5px 5px 5px 5px;
    }

    .formPanel input:read-only {
        background-color: gainsboro;
    }

.formPanel .formTitle th {
    text-align:left;
}

/* forms */

.inputWrapper1 {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 8px;
    border-radius: 25px;
    border: 2px solid #00008B;
    height: auto;
    background-color: #dbe4f0;
    vertical-align: top;
}
/*        
.inputWrapper1:focus-within {
    background-color:lightblue;
}
*/

.tbox2 {
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 38px;
    border: none;
    background-color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #00008B;
}

.tbox2:focus {
    outline: none;
    background-image: linear-gradient(to right, transparent, white, transparent);
}

.formControlContainer1 {
    display: block;
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    border: 1px solid #00008B; /* navy */
    height: auto;
    background-color: #dbe4f0; /* #dbe4f0 - gray blue, #ebf5f9 - light blue */
}

.forminputWrapper1 {
    display: inline-table;
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    border: 1px solid #00008B; /* navy */
    height: auto;
    background-color: #dbe4f0; /* #dbe4f0 - gray blue, #ebf5f9 - light blue */
    vertical-align: middle;
    white-space: nowrap;
}

.forminputWrapper1 * {
    display: table-cell;
}

.forminputWrapper1 label {
    color: darkslategrey;
    font-weight: bold;
    font-size: 10pt;
    width: 1%;
}

.forminputWrapper1 .formtbox2 {
    width: 100%;
}

.forminputWrapper1 .formdropdown1 {
    width: 100%;
}

.formtbox2 {
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 30px;
    border: none;
    background-color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    color: #00008B;
}

.formtbox2:focus {
    outline: none;
    background-image: linear-gradient(to right, transparent, white, transparent);
}

.formdropdown1 {
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 30px;
    border: none;
    background-color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    color: #00008B;
}

.formdropdown1:focus {
    outline: none;
    background-image: linear-gradient(to right, transparent, white, transparent);
}

.tbox1 {
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    color: #00008B;
    height: 30px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 20px;
    border-radius: 25px;
    border: 2px solid #00008B;
    background-color: #dbe4f0;
}

.tbox1:focus {
    outline: none;
}

.dropdown1 {
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 38px;
    border: none;
    background-color: transparent;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    color: #00008B;
}

.dropdown1:focus {
    outline: none;
    background-image: linear-gradient(to right, transparent, white, transparent);
}

.formiconbutton {
    display: inline-block;
    border-radius: 15px;
    border: 2px solid #A0A0A0; /*darkblue, #00008B */
    background-color: #ccbe00; /*pink, darkgold #ccbe00, darkblue*/
    margin-top: 0px;
    margin-left: 0px;
    padding-top: 2px;
    padding-bottom: 5px;
    width: 45px;
    height: 32px;
    margin-bottom: 0px;
    vertical-align: top;
    cursor: pointer;
}

.formiconbutton:focus {
    outline: none;
    background-color: #e6d600; /*deeppink, lightgold #e6d600, dodgerblue*/
    border-color: blue;
}

.formiconbutton:hover {
    background-color: #e6d600; /*deeppink, lightgold #e6d600, dodgerblue*/
    border-color: blue;
}

/* grids */

.gridiconbutton {
    display: inline-block;
    border-radius: 15px;
    border: 1px solid #A0A0A0; /*darkblue, #00008B */
    background-color: transparent; /*pink, darkgold #ccbe00, darkblue*/
    margin-top: 0px;
    margin-left: 0px;
    padding-top: 1px;
    padding-bottom: 0px;
    width: 25px;
    height: 20px;
    margin-bottom: 0px;
    vertical-align: top;
    cursor: pointer;
}

.gridiconbutton:focus {
    outline: none;
    border-color: blue;
}

.gridiconbutton:hover {
    border-color: blue;
}

/* patents */

table.patentTable {
    border-collapse: collapse;
    border: 0px solid #a6a6a6;
}

table.patentTable th {
    background-color: #B8DBFD; /* #B8DBFD - darker light blue */
    color: #333;
    font-weight: bold;
    padding: 2px;
    text-align: left;
    padding-right: 5px;
    padding-left: 5px;
    border-bottom: 1px solid #a6a6a6;
}

table.patentTable td {
    padding: 2px;
    border-bottom: 1px solid #a6a6a6;
}

div.patentCard {
    float: left;
    min-width: 650px;
    max-width: 850px;
    width: calc(100vw - 260px);
    background-color: white;
    box-shadow: 5px 5px 5px grey;
    margin-bottom: 10px;
    border-radius: 25px;
    border: 2px solid gray; /* #0d2c8c */
    padding: 20px;
    margin-top: 20px;
    margin-left: 20px;
}

div.patentViewer {
    overflow-y: auto;
    max-height: calc(100vh - 340px);
}

ul.basiclist {
    list-style-type: disc;
    color: #0d2c8c;
}

li.basiclistitem {
    margin: 4px;
}

.priceTable table {
    border: 1px solid grey;
    border-collapse: separate;
    border-spacing: 0px;
}

.priceTable th {
    border: 1px solid grey;
    width: 100px;
    text-align: center;
    background-color: #B8DBFD; /* light blue */
    color: #333;
    font-weight: bold;
}

.priceTable td {
    border: 1px solid grey;
    text-align: center;
    padding: 1px;
}

    .priceTable td:hover {
        background-color: inherit; /* palegoldenrod, #e6d500, #e6d500, #ccbe00 */
        border-left: 5px solid #ccbe00;
        padding-left: 5px;
        padding-right: 1px;
    }

    .priceTable td:focus-within {
        background-color: inherit; /* palegoldenrod, #e6d500, #e6d500, #ccbe00 */
        border-left: 5px solid #ccbe00;
        padding-left: 5px;
        padding-right: 1px;
    }

.priceTable a {
    display: inline-block;
    width: 100%;
}

    .priceTable a:link {
        color: #0059b3; /* #0033cc - blue */
        text-decoration: none;
        font-weight: bold;
    }

    .priceTable a:visited {
        color: #0059b3;
        text-decoration: none;
        font-weight: bold;
    }

    .priceTable a:hover {
        color: blue; /* #997a00 - gold, 0033cc blue */
        text-decoration: none;
        font-weight: bold;
    }

    .priceTable a:focus {
        outline: none;
        color: blue; /* #997a00 - gold, 0033cc blue */
        text-decoration: none;
        font-weight: bold;
    }