html, body{
    width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    justify-content: center;    
    font-family: 'Calibri'
}

.centered, #pageheader {
    min-width: 100px;
    width: 60%;
    text-align: left;
    margin-left: auto;
    margin-right: auto
}

#header {
    border: none;
    width: 100vw; /*full width across the screen*/
    background-color: white
}

#header-combo {
    display:flex;
    align-items: center;
}

#header-logo {
    width: 100px;
}

#header-title {
    justify-content: left;
    padding: 30px 0px 30px 30px;
    font-family: Calibri;
    /* color: #00305e; */
    color: #004280;
    font-weight: bold;
    font-size: 28px
}

/* banner image, usually a collage of ITS images*/
#banner {
    width: 100%
}

#pageheader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#pageheader-left {
    display: flex;
    justify-content: left;
    align-items: baseline;
}

.bullet {
    width: 24px;
    height: 23px
}

h1 {
    font-family: "niveau-grotesk", Helvetica, sans-serif;
    font-size: 28px;
    letter-spacing: 0px;
    word-spacing: 0px;
    color: #ff6d22;
    font-weight: 700;
    text-decoration: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    margin-top: 15px
    }

.buttonFeedback {
	/* MSI background-color:#dad6cb; */
        background-color:#f0efea;
	border-radius:33px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	/* MSI color:black; */
        color:#00305e;
	font-family:Arial;
	font-size:15px;
	padding:10px 20px;
        margin: 10px;
	text-decoration:none;
}
.buttonFeedback:hover {
	background-color:#FDD6BD;
}
.buttonFeedback:active {
	position:relative;
	top:1px;
}

    
#footer {
    font-weight: bold;
}

#pageheader-hr {
    border: 2px solid #445c6d;
    width: 60%
}

/*
#content {
    height: calc(100%-100px)
}

/*************************************************
************  table specific items  **************
************                        **************
**************************************************/

.alternate-row-color tr:nth-of-type(even) {
    background-color: #e9e7e1;
}

.grid1 .col1 {
    width: 100%
}

.grid2 .col1 {
    width: 40%
}

.grid3 .col1 {
    width: 25%;
}

.grid3 .col2 {
    width: 40%;
}

.grid4 .col1 {
    width: 25%
}

.grid4 .col2 {
    width: 25%;
}

.grid4 .col3 {
    width: 25%;
}

#triplesTable .col2, #triplesTable .col3 {
    width: 25%;
}

#table-wrapper {
    height: 90vh;
    width: 100%;
    overflow: auto;
    border-bottom-style: ridge;
    border-width: thin;
}

#table-scroll {
    overflow-y: auto;
    height: 100%
}

thead {
    position: sticky;
    top:0;
    /* background: #beb9a6 */
    /* background: #51626f; */
    background: #004280;
    color:white;
}

table {
    border: .5px solid black;
    border-spacing: 0px;
    border-collapse: separate;
    width: 100%;
}

th, td {
    border: .5px solid black;
    padding: 3px 7px;
}

/* MSI */
/** anchors inside table **/

table td a { color: #004280; text-decoration: none; font-weight: normal; }
table td a:hover { color: #004280; text-decoration: underline; font-weight: normal; }

/** borders on sp page images **/

td.spinstanceTable {
    border: none;
    border-spacing: 0px;
}

/* end MSI */

#opsconTable {
    border-collapse: collapse
}


/*************************************************
**********  index.htm specific items  ************
************                        **************
**************************************************/
.button-index {
	background-color:#f0efea;
	border-radius:16px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:black;
	font-family: "calibri";
	font-size:16px;
	padding:16px 50px;
	text-decoration:none;
    width: 300px
}
.button-index:hover {
	background-color:#FDD6BD;
}
.button-index:active {
	position:relative;
	top:1px;
}

#index-link {
    display: flex;
    justify-content: flex-start;
}

#index-link .right-index {
    justify-content: flex-end;
    margin: 2px;
    padding: 5px;
}


/*************************************************
**** conformance.content.htm specific items  *****
********                               ***********
**************************************************/

#conformance-table {
    border: hidden;
    border-collapse: collapse;
}

#conformance-table tr {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

#conformance-table td {
    border: none;
}
.conformance-item {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    width: 200px;
    padding: 5px;
    margin: 8px;
    text-align: center;
}

.conformance-item:active {
    color:#ff6d22;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}

/*************************************************
************ how-to specific items  **************
********                               ***********
**************************************************/

.how-to-screenshot {
    width: 100%;
}

#how-to-table {
    border: hidden;
    border-collapse: collapse;
}

#how-to-table tr {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

#how-to-table td {
    border: none;
}
.how-to-item {
    display:inline-block;
    color:#444;
    border:1px solid #CCC;
    background:#DDD;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
    cursor:pointer;
    vertical-align:middle;
    width: 400px;
    padding: 5px;
    margin: 8px;
    text-align: center;
}

.how-to-item:active {
    color:#ff6d22;
    box-shadow: 0 0 5px -1px rgba(0,0,0,0.6);
}

/*************************************************
*********** spinstance specific items  **************
********                               ***********
**************************************************/

#spinstance-table {
    border: 0px;
    table-layout: auto;
    width: 100%;
}

#spinstance-table-left {
    max-width: 100px;
}

#spinstance-table-center {
    text-align: center;
    max-width: 100%;
}

#spinstance-table-right {
    text-align: right;
    max-width: 100px;
}

#spinstance-img {
    width: 100%;
    height: auto;
}

/*************************************************
********** projdetail specific items  ************
********                               ***********
**************************************************/

#table4 .col1, #table4 .col2, #table4 .col3, #table4 .col4 {
    width: 25%;
    display: table-cell;
}

/*************************************************
************ opscon specific items  **************
********                               ***********
**************************************************/

#opscon-table .col3 {
    width: 5%
}

#opscon-table > #functional-area {
    vertical-align: center;
}

/*************************************************
**********  navigation menu bar stuff  ***********
************                        **************
**************************************************/
#menu {
    border: none;
    width: 100vw;
    height: auto;
    text-align: center;
}

nav {
    overflow: hidden;
    background-color: #f0efea;
    width: 100%;
    height: auto;
    text-align: center;
}

#nav-ul-wrapper {
    width: 100%;
    text-align: center;
}

nav > div > ul {
    list-style: none;
    margin: 0px auto;
    padding: 0; 
}

nav > div > ul > li {
    display: inline-block;
    text-align: left;
}

/* all menu links and dropdown buttons */
nav a, .dropbutton {
    text-decoration: none;
    color: #001574;
    font-size: 16px;
    background-color: inherit;
    font-family: inherit;
    padding: 14px 12px;
    margin: 0 1px
}

/* top level links */
nav > div > ul > li > a {
    display: inline;
    position: relative;
}

/* formats the entire dropdown unit 
.has-submenu {
    overflow: hidden;
}

/* formats the links within the dropdown unit */
.has-submenu a {
    display: block;
    background-color: inherit;
    font-family: inherit
}

/* formats the dropdown buttons */
.has-submenu .dropbutton {
    border: none
}

/* highlights the navigation bar item being selected */
nav a:hover, .has-submenu:hover .dropbutton {
    background-color: #FDD6BD
}

/* formats the dropdown menu box */
.dropdown-content {
    display: none;
    position: relative;
    background-color: #f0f0ef;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 14px 10px;
}

/* formats the dropdown list */
.dropdown-content li {
    float: none;
    padding: 12px 4px;
    text-decoration: none;
    display: inline;
    position: relative
}

/* sizing the links in the dropdown to fit the whole width*/
.dropdown-content li a {
    width: 90%
}

/* adds a background color to the link hovered over in the dropdown menu */
.dropdown-content a:hover {
    background-color: #FDD6BD;
    
}

/* keeps dropdown menu visible when mousing over or focusing on dropdown button or submenu */
.has-submenu:hover .dropdown-content, .has-submenu:focus-within .dropdown-content {
    display: block;
    position: absolute
}


@media screen and (max-width: 1300px) {
    .centered, #pageheader {
        width: 90%; /* Adjust width for smaller screens */
    }

}

@media only print {
    .centered {
        width: 100%;
    }
    #table-wrapper {
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
    }
}