@font-face {
	font-family: 'BrandingFont';
	src: url('../font/primaryBrandingFonts.ttf') format('truetype');
}

@font-face {
	font-family: 'SecondaryBrandingFont';
	src: url('../font/secondaryBrandingFonts.ttf') format('truetype');
}

body, html{
	padding: 0;
	margin: 0;
}

#legal-content{
	margin-left: 20px;
}

h1, h2, h3, h4, h5 {
	color: #005AFF;
	font-family: 'BrandingFont';
}

p {
	font-family: 'SecondaryBrandingFont';
}

/* Generic class for hiding content */
.hideMe {
	/*display: none;*/
	visibility: hidden;
	height: 0px;
}


.main-content {
	margin-top:20px;
}

/* Banner and nav */
.banner {
	width: 100%;
	position: relative;
	display: inline-flex;

}

/* Keep title and nav together in the banner*/
#nokia-logo{
	padding-left: 50px;
}

#nokia-logo a{
	padding-top: 23px;
	content: url(../images/nokia_blue.svg);
}

.bannerText {
	float:left;
	padding-left:40px;
	text-align: left;
	width: 100%;
}

.bannerText h2 a{
	color:#005AFF;
	text-decoration: none;
	cursor: pointer;
}

.nav {
	float:right;
	margin-top: 15px;
	width: 100%;
	padding-bottom: 10px;
	font-family: 'BrandingFont';
	z-index: 9;
	left: 0px;
	position: relative;
	display: inline-flex;
	justify-content: flex-end;
	margin-right: 100px;
}

.nav-dropdown{
	float: right;
	padding-top: 5px;
}

.nav-dropdown a{
	text-decoration: none;
    color: #005AFF;
    font-size: 20px;
	padding-left: 5px;
    border-bottom: solid 1px;
    padding-right: 5px;
}


#hamburger-menu{
	width: 25px;
	height: 25px;
	margin-left: 50px;
	margin-top: 5px;
}

#hamburger-icon{
	background: url(../images/menu.svg);
	width: 25px;
	height: 25px;
	cursor: pointer;
}

#main-banner-div{
	width: 100%;
}
#banner-container{
	background: url(../images/banner.png);
	background-repeat: repeat-x;
	height: 83px;
}

.button-container{
	margin-left: 20px;
	margin-top: -38px;
}

/* For tool tip for filter */

.tooltip-text {
	visibility: hidden;
    width: 120px;
    background-color: #4D5766;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 999;
    margin-left: -50px;
    margin-top: 35px;
    opacity: 0;
    transition: opacity 0.3s;
	font-family: 'SecondaryBrandingFont';
}

#toggle-button:hover + #filter-tooltip-text {
    visibility: visible;
    opacity: 1;
}

#toggle-button{
	background: url(../images/filter.svg) no-repeat;
	height: 30px;
	width: 30px;
	border: none;
	cursor: pointer;
	z-index: 99;
}

#toggle-button-dropdown{
	background: url(../images/arrow_right.svg) no-repeat;
	height: 30px;
	width: 30px;
	border: none;
}

/* Initially hide the nk-col-toggles div */
.hidden {
    display: none;
}

/* Style for the toggle-button-dropdown when active */
#toggle-button-dropdown.active {
    background: url(../images/arrow_down.svg) no-repeat;
}

/* Add any additional styling for the nk-col-toggles div */
#nk-col-toggles {
	margin-left: 20px;
    padding: 5px 5px 20px 20px;
	width: auto;
	font-family: 'BrandingFont';
	border: solid #005AFF 2px;
	position: absolute;
	height: auto;
	overflow: auto;
	background: white;
	z-index: 999;
	min-width: 250px;
}

/* Style for the checkbox container to display items in two columns */

.checkbox-label-container {
    /* display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; */
}

#cancel-container{
	display: inline-flex;
	width: 100%;
	justify-content: end;
}

#cancel-button{
	content: url(../images/cancel-button.svg);
	cursor: pointer;
}

#aTbl thead tr .nk-col p::after{
	content: none;
}

#nk-col-toggles h3{
	margin-top: 0;
}

#selectall-container{
	padding-top: 50px;
}

#selectall-container label{
	width: 40%;
}

#select-all{
	font-family: 'SecondaryBrandingFont';
    background: #005AFF;
    color: white;
    /* min-height: 35px; */
    border: solid #005AFF;
    /* border-radius: 4px; */
    cursor: pointer;
	/* min-width: 85px; */
}

/* Style for the checklist items */
#nk-col-toggles label {
    display: flex;
    align-items: center;
	cursor: pointer;
}

.dataTables_wrapper{
	/* margin-top: -10px; */
	max-height: 90vh;
	overflow: auto;
}

table.dataTable{
	width: 100% !important;
}

.dataTables_scrollHeadInner{
	width: 100% !important;
}


  
.menu-container {
	position: relative;
	display: inline-block;
}

.menu-dropdown {
	display: none;
	position: absolute;
	background-color: #fff;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	text-align: center;
	font-size: 16px;
}

.menu-dropdown a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	border-top: solid 1px;
	font-family: 'SecondaryBrandingFont';
}

.menu-dropdown a:hover {
	background-color: #ddd;
	color: #005AFF;
}

.show {display: block;}





.icon-container{
	width: 100%;
	display: inline-flex;
	justify-content: end;
	margin-top: -14px;
}


/* List for nav */
.nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.nav ul li {
    float: left;
	border-top: solid 1px;
}


#tbl-content-Interim{
	margin-top: -13px;
}

.active-tab{
	border-bottom: 2px solid #005AFF;
	padding-bottom: 5px;
}

/*.nav ul li a {*/
/*    display: block;*/
/*    text-align: center;*/
/*    padding: 18px 20px 0 20px;*/
/*    text-decoration: none;*/
/*	!*color:#124191;*!*/
/*	color:#ffffff;*/
/*}*/

.nav-item{
	background-color:transparent; /* bec8d2 */
	/*width: 30%;*/
	text-decoration: none;
	text-align: center;
	display: block;
	padding: 0 20px 0 20px;
	font-size: 16px;
	color: black;
	font-family: 'SecondaryBrandingFont';
}

.nav-item:hover{ color:#005AFF; }

/* Space below the column visibility toggles */
#nk-col-toggles, #nk-col-toggles-Interim {
	padding-bottom:20px;
}

/* Set all tables to fixed width */
.sorting, .sorting_asc{
	overflow: hidden;
}

/* resize columns */
/* th{
	min-width: 25px !important;
	resize: horizontal;
	overflow: auto;
	padding-bottom: 0 !important;
}

.dataTable tbody tr td{
	resize: horizontal;
} */

table.dataTable thead th, table.dataTable thead td{
	overflow: hidden;
	word-wrap: break-word;
	resize: horizontal;
}


.dataTables_scrollBody{
	height: -webkit-fill-available !important;
	max-height: 70vh !important;
	min-height: 70vh !important;
}

th p{
	margin: 0 !important;
}
 
tbody { 
	/* width: 100%; */
	overflow-y: scroll; 
}

tbody td{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dataTable {
	table-layout:fixed;
}

.descriptions_table {
	font-family: 'SecondaryBrandingFont';
}

td.detail-body{
	white-space: break-spaces !important;
}

/* Cell overflow */
div.DTS tbody th, div.DTS tbody td  {
	/* white-space:normal; */
	/* Comment out these lines to restore cell overflow
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	Comment out the above lines to restore cell overflow */

}
/* Prevent default row properties from preventing sticky from working
in Chrome and Edge */
@supports not ( -moz-appearance:none ){
	/* Add non-firefox CSS code here */
	div.DTS tbody tr.detail-row td,  div.DTS tbody tr.detail-row  th{
		text-overflow:clip;
		overflow:visible;
	}
}
span.detail-ttl {
	/* color: #2F4F4F; */
}

.panel-ttl {
	margin: 2px 0 2px 0;
}

#aTbl, #aTbl-Interim {
	table-layout:fixed;
	word-wrap:break-word;
	word-break:break-word;
	overflow-wrap: break-word;
	font-family: 'SecondaryBrandingFont';
	border-bottom: solid 1px;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody{
	border-bottom: none;
}

/* Change icon to pointer when over a column header (to indicate
	that content can be sorted.)
 */

.nk-col {
	font-family: 'SecondaryBrandingFont';
}

.nk-col p, .nk-col-Interim {
	cursor: pointer;
}
.nk-col p:hover, .nk-col-Interim:hover {
	color:#005AFF;
	box-shadow: inset 0 -4px 2px -2px #005AFF;
}

/* Add some decoration for the column toggles */
a.toggle-vis, a.toggle-group, a.toggle-vis-interim {
	font-family: 'SecondaryBrandingFont';
	cursor:pointer;
	color:#005AFF;
	padding:0 5px 0 5px;
}

.colHidden {
	background-color:#d8d9da;
	text-decoration:line-through;
	font-family: 'SecondaryBrandingFont';
}

.toggle-vis, .toggle-vis-interim {
	font-family: 'SecondaryBrandingFont';
}

#include-filter, #exclude-filter, #reset-button, #include-filter-Interim, #exclude-filter-Interim, #reset-button-Interim {
	display:inline-block;
	padding-right:20px;
}

.panel-block {
	padding-bottom:10px;
}

.guideName {
	padding-top: 15px;
	font-family: 'BrandingFont';
}

/* For the count of selected rows */
div.displayCount {
	clear:both;
	margin:0;
	padding-top:10px;
	padding-left:20px;
}

div.displayCount p {
	margin:0;
	padding-right: 30px;
    padding-top: 3px;
}

div.dt-buttons{
	padding-top:5px;
	display:block;
	position:static;
	clear:both;
	margin-right: 30px;
}

.dt-button.buttons-csv.buttons-html5 { 
	font-family: 'SecondaryBrandingFont';
	background: #005AFF;
	color: white;
	border-radius: 4px;
}

button.dt-button {
	font-family: 'SecondaryBrandingFont';
	background: #005AFF;
	color: white;
	top: -11px;
	z-index: 99;
	margin-left: 10px;
	border-radius: 4px;
}

.dt-button.buttons-csv.buttons-html5:hover,
button.dt-button:hover{
	background: #0049B4 !important;
	font-weight: bold;
}

.nk-input {
	font-family: 'SecondaryBrandingFont';
}

/* Loading */
#loading {
	opacity:.5;
	width:350px;
	height:80px;
	margin:0 auto;
	background: rgba(24,18,39,.10);
	color:#005AFF;
	position:fixed;
	left:50%;
	top:50%;
	margin-left:-175px;	/* Adjust to half width */
	margin-top:-40px;	/* Adjust to half height */

	font-size:50pt;
	font-weight:bold;
	text-align:center;
	line-height:80px;
	vertical-align:middle;
}


/* Formatting for the show/hide details icon */
/* Adjust column width to fit title (usually, "Show" */
.detail-wrapper {
	position:sticky;
	left:0;
	width:300px;
}

.nk-details {
	font-family: 'BrandingFont';
}

tbody  td.nk-details, tbody td.nk-details-Interim {
    /* background: url('../images/details_open.png') no-repeat center top; */
	background: url(../images/arrow_right.svg) no-repeat center top;
    cursor: pointer;
	max-width:30px;
	min-width:30px;
	width:30px;
	vertical-align:top;
	position:sticky;
	left:0;
	background-color:white;
	border-left: solid 1px;

}
tr.shown td.nk-details, tr.shown td.nk-details-Interim {
    /* background: url('../images/details_close.png') no-repeat center top; */
	background: url(../images/arrow_down.svg) no-repeat center top;
	cursor:pointer;
	max-width:50px;
	min-width:50px;
	width:50px;
	vertical-align:top;
	background-color:white;

}
/* Add a border */
#aTbl td, #aTbl-Interim td {
	border-right: solid 1px;
	vertical-align:top;
}
#aTbl tr td:last-child, #aTbl-Interim tr td:last-child {

}

.details tbody tr td{
	border-right: solid lightgray 1px !important;
	background: #EBEBEB;
	white-space: normal !important;
	resize: horizontal;
}

.filter-item {
	font-family: 'SecondaryBrandingFont';
}

.hide_field {
	font-family: 'SecondaryBrandingFont';
}

/* Modify width of input boxes within the table header */
table.tbl-marker input {
    width: 100%;
}

/* Specific overrides for datatables styles */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	/* Changes the default cursor over the search filter inputs */
	cursor: default;

}

/* hide filter input */
#aTbl_filter{
	display: none;
}

/* Remove background striping for empty matches */
div.DTS div.dataTables_scrollBody {
	background-image:none;
	background-color: white;
}

.dataTables_empty {
	font-family: 'SecondaryBrandingFont';
}

select.filterSelect {
	font-family: Arial, Helvetica, sans-serif;
	font-size:small;
	padding:2px 0 2px;
	width: 100%;
}
table.dataTable tbody td.detail-head, table.dataTable tbody td.detail-body {
	padding:2px;
	background: #EBEBEB;
}
table.details {
	table-layout: fixed;
	border: solid 2px;
}
.detail-head {
	padding: 5px !important;
	width:200px;
	border-right: solid lightgray 1px !important;
}
.detail-body {
	padding-left: 5px !important;
	width:100%;
	border-right: none !important;
}

.attr-block {
	display:flex;
	width:100%;
	padding-bottom:10px;
}
.block-ttl {
	width:180px;
	min-width:180px;
	display:inline-block;
	vertical-align:top;
}
.block-content {
	display:inline-block;
	vertical-align: top;

}
h4.topicTitle {
	padding-bottom: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-top:2px;
}
p.data {
	margin-bottom: 2px;
	margin-top: 2px;
}

.row-detail {
	max-width:800px;
}
.print {
	margin-left:15px;
}


table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, 
table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
  background-image:none;
}

/* Custom for intro content */
#splash {
	line-height:normal;
	margin-left: 30px;
    max-width: 90%;
	max-height: 10px;
}
#splash table {
	border-collapse: collapse;
	max-width: 80%;
	display: none;
}
#splash td, #splash th {
	border:1px black solid;
	vertical-align:top;
	padding:5px;
	white-space: normal;
}


#splash table thead tr th {
    background-color: lightgray;
}

/* Scroll to top button */
#scrollToTopBtn {
    display: none; /* Hidden by default */
    position: absolute; 
    bottom: 20px;
    right: 30px; 
    z-index: 99; /* Make sure it does not overlap with other elements */
    border: none; 
    outline: none; 
    background-color: #555; 
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px;
	text-align: center;
	white-space: nowrap;
	width: 25px;
	height: 25px;
}

#scrollToTopBtn:hover {
    background-color: #333; /* Darker background on hover */
}

.scroll_span{
	content: url(../images/up-arrow.svg);
}

/* for About page */
.about-main-content{
	margin-left: 30px;
    max-width: 90%;
}

/* for Contact page */
.contact-main-content{
	margin-left: 30px;
    max-width: 90%;
	min-height: 500px;
}

.contact-main-content p a{
    text-decoration: none;
    cursor: pointer;
    color: #005AFF;
}

body::-webkit-scrollbar,
.dataTables_wrapper::-webkit-scrollbar,
.nav-dropdown-content.show::-webkit-scrollbar{
	width: 7px;
	height: 7px;
}

body::-webkit-scrollbar-track,
.dataTables_wrapper::-webkit-scrollbar-track,
.nav-dropdown-content.show::-webkit-scrollbar-track{
  background: lightgray;
}

body::-webkit-scrollbar-thumb,
.dataTables_wrapper::-webkit-scrollbar-thumb,
.nav-dropdown-content.show::-webkit-scrollbar-thumb{
  background-color: gray;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}