/**
 * FOSSID AB CONFIDENTIAL
 *
 * Copyright (c) 2020 FOSSID AB. All Rights Reserved.
 *
 * All information contained herein is proprietary to FOSSID AB and
 * confidential and is protected under applicable laws and international
 * treaties.
 *
 * ANY DISCLOSURE, REPRODUCTION, MODIFICATION, DISTRIBUTION OR USE OF THIS
 * INFORMATION, INCLUDING SOURCE CODE CONTAINED HEREIN, IN WHOLE OR IN PART,
 * WITHOUT THE EXPRESS WRITTEN CONSENT OF FOSSID AB IS STRICTLY PROHIBITED, AND
 * IN VIOLATION OF APPLICABLE LAWS AND INTERNATIONAL TREATIES.
 */

/* *****************************************************************************
*************************** jQuery UI Fixes ************************************
*******************************************************************************/


/* *****************************************************************************
*************************** DataTables Fixes ***********************************
*******************************************************************************/

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
	margin-bottom: 18px;
}


/* *****************************************************************************
***************************** AlertWidget **************************************
*******************************************************************************/
.alertWidget .col-1 {
	flex: 0 0 20px;
}

.alertWidget img {
	width: 20px;
}

/* *****************************************************************************
***************************** CSRF AlertWidget **************************************
*******************************************************************************/
.window-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	opacity: 0.8;
	z-index: 1031;
	/* menu has z-index 1030 */
}

/* *****************************************************************************
*************************** scheduledTasksWidget *******************************
*******************************************************************************/

.scheduledTasksWidget td {
	cursor: pointer;
}

/* *****************************************************************************
************************** BlueHeaderWidget ************************************
*******************************************************************************/

.blueHeaderWidget {
	padding: 24px !important;
}

.blueHeaderWidget img {
	height: 100%;
}


/* *****************************************************************************
************************* GenerateReportWidget *********************************
*******************************************************************************/
.generateReportWidget {
	height: auto!important;
}
.generateReportWidget textarea {
	width: 300px;
	height: 43px;
}

/* *****************************************************************************
************************ GrayTopWithIconWidget *********************************
*******************************************************************************/

.grayTopWithIconWidget {
	border: 2px solid var(--bright-gray);
	width: 200px;
	height: 200px;
	margin: 12px;
	font-family: FOSSIdFont;
}

.grayTopWithIconWidget:hover {
	border: 2px solid var(--blue-scrapped);
	cursor: pointer;
}

.grayTopWithIconWidget .topBar {
	background-color: var(--bright-gray);
	height: 50px;
}

.grayTopWithIconWidget .topBar img {
	width: 33%;
}

/* *****************************************************************************
**************************** ButtonsWidget *************************************
*******************************************************************************/

.buttonsWidget {
	width: 100%;
}

.buttonsWidget .ui-button {
	min-width: 80px;
}

.buttonsWidget .okButton,
.buttonsWidget .previewButton {
	background-color: #4297d4;
	border-color: #4297d4;
	color:white !important;
	padding: 8px 24px;
}

.buttonsWidget .okButton.disabled {
	pointer-events: none;
	opacity: 0.5;
    cursor: auto;
}

.buttonsWidget .okButton:hover,
.buttonsWidget .previewButton:hover {
	background-color: #4685b3;
	border-color: #4685b3;
}

.buttonsWidget .cancelButton {
	background-color: var(--bright-gray);
	border-color: var(--cancel-button-gray);
	color: var(--cancel-button-gray) !important;
}

.buttonsWidget .cancelButton:hover {
	background-color: #e0e0e0;
}


/* *****************************************************************************
********************************* ToggleButton *********************************
*******************************************************************************/

.buttonsWidget .toggleButton-active {
	background-color: #0086aa !important;
}

.canvas .toggleButton-menu {
	padding: 0;
	margin: 0;
	border: 1px solid #bfbfbf;
	background-color: white;
	overflow-y: auto;
	z-index: 990;
	position: absolute;
}

.canvas .toggleButton-menu .toggleButton-item {
	display: block;
	list-style: none;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}

.canvas .toggleButton-menu .toggleButton-item:hover {
	color: #27a0f2;
}

/* *****************************************************************************
****************************** ListLicensesWidget ******************************
*******************************************************************************/

.listLicensesWidget .dataTable .ui-button,
.setPolicy div {
	border-width: 1px;
	border-style: solid;
	padding: 4px 8px;
	border-color: #eee;
	width: 72px;
	color: var(--dark-gray);
	line-height: 1;
}

.listLicensesWidget .dataTable .ui-button:hover {
	border-color: #ccc;
}

.listLicensesWidget .license-policy-reject.ui-state-active,
.setPolicy .license-policy-reject {
	background-color: var(--reject-red);
	border-color: var(--reject-red);
	color: white;
}

.listLicensesWidget .license-policy-reject.ui-button.ui-state-active:hover,
.setPolicy .license-policy-reject.ui-state-active:hover {
	border-color: var(--reject-red-2);
}

.listLicensesWidget .license-policy-manual.ui-state-active,
.setPolicy .license-policy-manual {
	background-color: var(--bright-yellow);
	border-color: var(--bright-yellow);
}

.listLicensesWidget .license-policy-manual.ui-button.ui-state-active:hover,
.setPolicy .license-policy-manual.ui-state-active:hover {
	border-color: var(--bright-yellow-2);
}

.listLicensesWidget .license-policy-approve.ui-state-active,
.setPolicy .license-policy-approve {
	background-color: var(--bright-green);
	border-color: var(--bright-green);
}

.listLicensesWidget .license-policy-approve.ui-button.ui-state-active:hover,
.setPolicy .license-policy-approve.ui-state-active:hover {
	border-color: var(--bright-green-2);
}

.listLicensesWidget tr td:nth-child(1) {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 350px;
}

.listLicensesWidget tr td:nth-child(2) {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 150px;
}

/* *****************************************************************************
***************************** NoticeExtractWidget ******************************
*******************************************************************************/

.noticeExtractWidget img {
	width: 100%;
}

/* *****************************************************************************
***************************** addComponentIdentificationWidget *****************
*******************************************************************************/

.addComponentIdentificationWidget .componentStyle {
	min-height: 32px;
	width: 300px;
}

/* *****************************************************************************
***************************** custom.formEditor ********************************
*******************************************************************************/

.formEditor {
	min-width: 455px;
}

.formEditor .hiddenFieldNames {
	color: #bbb;
	margin-left: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.formEditor .showLess,
.formEditor .showMore {
	color: var(--ok-button-blue);
	cursor: pointer;
}

.formEditor .userAvatar {
	height: 30px;
	width: 30px;
	border-radius: 50%;
	border: 2px solid #6a7077;
}

.formEditor .userField {
	min-height: 30px;
}

.formEditor .requiredField {
	color: var(--red);
}

.formEditor .errorMessage {
	color: var(--red);
}

.formEditor .licenseField {
	width: 300px;
}

/* *****************************************************************************
************************************ Footer ************************************
*******************************************************************************/

.canvas {
	/* height: 100%;
	overflow: hidden;
	background-color: #F6FAFD;
	box-sizing: border-box; */
	flex: 1
}

.footer {
	font-family: FOSSIdFont;
	font-weight: 600;
	width: 100%;
	color: #212529;
	background-color: #fff;
	border-top: 1px solid #e5e8ed;
	padding: 20px;
	box-sizing: border-box;
	min-height: 60px;
	z-index: 2;
}

.footer .content-wide > div:hover {
	color: #ddd;
}

.footer .content-wide > div {
	cursor: pointer;
}

.btn {
	padding: 8px 24px;
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary {
	background-color: #4297d4;
	border-color: #4297d4;
}

.btn-primary:hover {
	background-color: #4685b3;
	border-color: #4685b3;
}

.btn-outline-primary {
	color: #4297d4;
	border-color: #4297d4;
}

.btn-outline-primary:not(:disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
	color: #fff;
	background-color: #4297d4;
	border-color: #4297d4;
}

/* *****************************************************************************
************************************* Menu *************************************
*******************************************************************************/
.userMenuWidget {
	height: 64px;
	background: #3b3c60;
	z-index: 51;
}

.content-wide {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	position: relative !important;
}

.userMenuWidget .mainMenu {
	background-color: transparent;
}

.userMenuWidget .userAvatar {
	width: 50px;
	height: 25px;
	border-radius: 50%;
	cursor: pointer;
}

.userMenuWidget .userAvatar.customAvatar {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	cursor: pointer;
	margin-top: 6px;
	margin-bottom: 6px;
	margin-left: 6px;
	margin-right: 21px;
}

.userMenuWidget .ui-menu,
.userMenuWidget .ui-menu-item {
	display: inline-block;
	border: 0px solid transparent;
	white-space: nowrap;
}

.userMenuWidget .ui-menu-item .ui-menu,
.userMenuWidget .ui-menu-item .ui-menu-item {
	display: block;
	margin: 0 30px;
}

html[lang="ja"] .userMenuWidget .mainMenu .ui-menu-item .ui-menu-item,
.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item {
	margin: 0;
	padding: 15px 30px;
}

html[lang="ja"] .userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:first-child,
.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:first-child {
	padding-top: 30px;
	border-top: 5px solid #4297d4;
}

html[lang="ja"] .userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:last-child,
.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:last-child {
	padding-bottom: 30px;
}

.userMenuWidget .mainMenu .ui-menu {
	/*border: 1px solid #bfbfbf;*/
	border-radius: 0.125rem;
	/*border-top: 5px solid #27a0f2;*/
}

.userMenuWidget .mainMenu .ui-menu-item {
	padding: 24px 8px 20px 8px;
	position: relative;
	flex: 0 1 auto;
	align-self: auto;
	white-space: nowrap;
	margin: 0 4px;
	font-size: 15px;
	line-height: 1;
	color: #fff;
}

.userMenuWidget .mainMenu>.ui-menu-item {
	border-bottom: 5px solid transparent;
}

.userMenuWidget .ui-menu-item .ui-menu-item-wrapper {
	border: none;
	background: none;
	font-weight: 400;
	font-variant: proportional-nums;
	color: #FFF;
	opacity: 0.8;
	margin: 0;
	padding: 0;
}

.userMenuWidget .ui-menu-item.selected .ui-menu-item-wrapper,
.userMenuWidget .ui-menu-item:hover .ui-menu-item-wrapper {
	opacity: 1
}

.userMenuWidget .mainMenu .ui-menu-item.disabled,
.mainMenu .ui-menu-item.disabled:hover {
	color: #AAA;
	cursor: not-allowed;
}

.userMenuWidget .ui-menu-item .ui-menu-icon.ui-icon.ui-icon-blank,
.userMenuWidget .ui-menu-item-selected .ui-menu-icon.ui-icon.ui-icon-blank {
	display: none;
}

.userMenuWidget .mainMenu>.ui-menu-item:hover,
.userMenuWidget .mainMenu>.ui-menu-item.selected {
	border-bottom: 5px solid #4297d4;
}

.userMenuWidget .mainMenu .ui-menu-item:hover,
.userMenuWidget .mainMenu .ui-menu-item.selected {
	color: white;
}

/*  Apply different styles to items in submenus */
.mainMenu>li>ul>li>.ui-menu-item-wrapper {
	color: #4b45a1 !important;
}

/*  Apply different styles to items in submenus */
.mainMenu>li>ul>li>.ui-menu-item-wrapper:hover {
	color: #4b45a1 !important;
	text-decoration: underline !important;
}

.canvas,
.legacyElementsWidget,
.loginWidget { 
	flex: 1;
	flex-direction: column;
	display: flex;
}


.legacyElementsWidget.hasButtons {
	height: calc(100% - 80px) !important;
}

.legacyPageButtons.hasButtons {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
}

.loginButton,
.logoutButton,
.userAvatar.menuButton {
	width: 25px;
	height: 25px;
	display: inline-block;
	position: relative;
	color: #FFF;
	opacity: 0.5;
	padding: 8px;
	box-sizing: content-box;
	cursor: pointer;
}

.notificationBubble {
	background-color: #CD4B5B;
	color: #FFF;
	display: block;
	border-radius: 12px;
	min-width: 20px;
	text-align: center;
	padding: 3px;
	position: absolute;
	top: -7px;
	right: 14px;
	line-height: 1;
}

.notificationBubble:hover {
	color: white;
}

.sbom-container .card-body li,
.tools-container .card-body li,
.dashboardContainer-widget .card-body li {
	list-style: square;
}
.sbom-container .card-body,
.tools-container .card-body,
.dashboardContainer-widget .card-body {
	background-color: #faf9fa;
}

.sbom-container .card, 
.tools-container .card, 
.dashboardContainer-widget {
	width: calc(33.33333% - 24px);
}

.sbom-container .card:not(:last-of-type), 
.tools-container .card:not(:last-of-type) {
	margin-right: 34px;
}

.pre-dark,
kbd {
	width: 100%;
	display: block;
	background-color: #393842;
	border-radius: 4px;
	margin: 0;
	padding: 10px 12px;
	color: #FFF;
}

@media screen and (max-width: 1636px) {
	.list-page-tabs {
		min-height: calc(100vh - 126px);
		display: flex;
		flex-direction: column;
	}

	.content-wide {
		padding: 0 24px;
	}

	.userMenuWidget {
		padding: 0px 20px;
	}

	.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item {
		margin: 0 !important;
		padding: 10px 20px !important;
	}

	.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:first-child {
		padding-top: 20px !important;
	}

	.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:last-child {
		padding-bottom: 20px !important;
	}

	html[lang="ja"] .userMenuWidget .mainMenu .ui-menu-item {
		font-size: 14px;
	}
}


@media screen and (max-width: 1437px) {
	.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item {
		margin: 0;
		padding: 10px 20px;
	}

	.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:first-child {
		padding-top: 20px;
	}

	.userMenuWidget .mainMenu .ui-menu-item .ui-menu-item:last-child {
		padding-bottom: 20px;
	}
}

@media screen and (max-width: 1200px) {
	.sbom-container .card,
	.tools-container .card,
	.dashboardContainer-widget {
		width: 100%;
		margin-bottom: 24px;
	}

	.list-page-tabs {
		min-height: calc(100vh - 173px);
		display: flex;
		flex-direction: column;
	}
	
	#snippet_search_container,
	#view_container_vsf,
	#view_container {
			height: calc(100vh - 175px);
			padding: 0px !important;
	}

	#view_container_scan {
		height: calc(100vh - 287px);
	}
	#view_container_scan.with-warnings {
		height: calc(100vh - 320px);
	}
	/* Temporary solution until Burger menu is implemented */
	.userMenuWidget {
		height: 110px;
		padding: 12px 20px
	}

	.userMenuWidget .content-wide {
		flex-wrap: wrap;
	}

	.userMenuWidget .mainMenu {
		order: 2;
		width: 100%;
	}

	.userMenuWidget .mainMenu .ui-menu-item {
		padding: 6px 8px 20px 8px;
		margin-left: -6px;
	}

	.fossid-tabs {
		flex-wrap: wrap;
	}

	.fossid-tabs .breadcrumbs-wrapper {
		width: 100%;
	}

}

@media screen and (max-width: 1024px) {
	#scan_page_tabs.fossid-tabs > nav > ul li {
		height: 55px
	}

	#view_container_scan {
		height: calc(100vh - 298px);
	}

	#view_container_scan.with-warnings {
		height: calc(100vh - 330px);
	}
}

@media screen and (max-width: 875px) {
	.userMenuWidget .mainMenu .ui-menu-item {
		margin: 0 10px;
	}

	html[lang="ja"] .userMenuWidget .mainMenu .ui-menu-item:first-child,
	.userMenuWidget .mainMenu .ui-menu-item:first-child {
		margin: 0 20px;
	}

	html[lang="ja"] .userMenuWidget .mainMenu .ui-menu-item {
		padding-top: 13px;
		padding-bottom: 21px;
		margin: 0 9px;
		letter-spacing: -0.5px;
	}
}

html.loading {
	cursor: wait !important;
}


input[type="time"],
input[type="date"] {
	width: 147px;
	padding-top: 5px !important;
}
input[type="number"]::-webkit-inner-spin-button{
	opacity:1;
}


/* *****************************************************************************
*************************** Roboto fonts    ************************************
*******************************************************************************/

@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-variant: proportional-nums;
}

body {
	margin: 0;
	font-family: roboto, "Gill Sans", Calibri, sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-variant: proportional-nums;
	letter-spacing: normal;
	word-spacing: 0px;
	line-height: 21px;
	color: #1c1c21;
	text-align: left;
	background-color: #f6fafd;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #ffffff;
	background-clip: border-box;
	border: 1px solid rgba(0, 0, 0, 0.125);
	border-radius: 2px;
}

.card-header {
	font-size: 1.125rem;
	background-color: white;
	font-weight: 600;
}

.card-footer {
	background-color: white;
}

h1,
h2,
h3 {
	font-weight: 600;
}

/***************************** System Information Chart *************************
*******************************************************************************/
.system-chart-comment {
	max-width: 350px;
}



table.dataTable {
	background-color: #FFF;
	box-shadow: inset 0 0 0 1px hsl(244deg 8% 84%);
	border-radius: 2px;
	padding: 0px 16px;
	border-bottom: none!important;
	border-radius: 4px;
}

table.dataTable thead th,
table.dataTable tfoot th {
	text-transform: uppercase;
	padding: 12px;
	color: #6B4AB2;
	font-size: 14px;
	font-weight: 400;
}

table.dataTable tbody th,
table.dataTable tbody td {
	padding: 12px;
	vertical-align: middle;
	font-size: 15px;
	color: #393838;
	border-bottom: 1px solid #D3D3D9;
}

#fossid_result_table thead th,
#fossid_result_table tbody td {
  padding: 10px 6px;
}

#fossid_result_table thead th {
  padding-right: 26px;
}

.field_license:not(:empty) {
  min-width: 145px!important;
}

#fossid_result_table .field_license > * {
  transform: scale(.9);
}

#fossid_result_table .field_license > *:not(:last-child) {
  margin-bottom: 5px;
}

table#components_table tbody td:not(.dataTables_empty) {
	padding: 0;
}

table#components_table tbody td:has(.fullheight-cell){
	height: 1px;
}

table#components_table tbody td div.fullheight-cell {
	padding: 12px;
	height: 100%;
	display: flex;
	align-items: center;
}

.dataTables_wrapper .dataTables_info {
	color: #727184;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.dataTables_wrapper .dataTables_paginate {
	color: #727184;
	font-size: 0.8125rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	background: none !important;
	border-color: transparent !important;
	color: #727184 !important;
	box-shadow: none !important;
	padding: 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: none;
	border-color: transparent !important;
	color: #727184 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	color: #461d9f !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
	opacity: 0.5;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
	content: "\25b2";
	font-size: 0.75em;
	margin-bottom: 2px;
	right: 5px;
}

table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
	content: "\25b2";
	transform: rotate(180deg) translate(1.5px, 0);
	font-size: 0.75em;
	margin-top: 2px;
	right: 3.5px;
}

#file_search,
#message_search,
#search_ignored_files.fossid-input,
#search_failed_files.fossid-input,
.dataTables_wrapper .dataTables_filter input[type="search"] {
	background-color: #fff;
	border: none;
	border-radius: 4px;
	display: inline-block;
	width: 100%;
	transition: box-shadow 0.2s ease;
	padding-left: 42px !important;
	padding-right: 12px !important;
	min-width: 200px;
	font-size: 1em !important;
	background: url('../images/ui_icons/search_black.svg') #FFF 10px 8px no-repeat;
}

.dataTables_wrapper div.dataTables_processing {
	top: 70px;
	color: #727184;
}

.fossid-tabs {
	width: 100%;
	position: relative;
	top: 1px;
	padding-top: 18px;
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.fossid-tabs ul {
	display: flex;
	margin-bottom: 0;
	padding-left: 0;
}

.fossid-tabs > nav > ul li {
	list-style: none;
	border-color: transparent;
	border-style: solid;
	border-width: 3px 1px 0;
	color: #727184;
	cursor: pointer;
	font-size: 0.9375rem;
	height: 44px;
	position: relative;
	padding: 8px 18px 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.fossid-tabs > nav > ul li:last-child {
	margin-right: 30px;
}

.fossid-tabs > nav > ul li.selected {
	background-color: #fff;
	border-left-color: #d3d3d9;
	border-right-color: #d3d3d9;
	border-top-color: #4b45a1;
	color: #555463;
	position: relative;
}

.fossid-tab-content {
	border-top: 1px solid #d3d3d9;
	background-color: white;
	padding: 12px 24px;
}
.fossid-tab-content.scans {
	display: flex;
	flex-grow: 1;
  padding: 12px 0;
}

.fossid-tab-content.scan-info {
	padding: 20px 0 0 0;
}

#fossid-scans-list {
  width:100%;
}

#fossid-scans-list table {
  overflow-x: scroll;
}
table#projects_table tbody td,
#fossid-scans-list table.dataTable tbody td {
  word-break: break-word;
}

.fossid-tab-counter {
	border: 1px solid #d6d6db;
	background: #f4f4f6;
	padding: 0 6px;
	border-radius: 12px;
	font-size: 10px;
	color: #8c8c9b;
	margin-left: 8px;
	width: 38px;
	height: 22px;
	text-align: center;
}

.dark.fossid-tabs ul li.selected {
	background-color: #f7fafd;
}

.bg-dark {
	background-color: #f7fafd!important
}

#main-logo {
	cursor:pointer;
	height: 64px;
	margin-left: -10px;
}

table.dataTable tbody td.dataTables_empty {
	padding: 24px 0;
	color: #808080;
}

div.dataTables_length[id*='component_scans'],
div.dataTables_length[id*='approvals_table'],
#vulnerabilities_cves_table_length,
#fossid_result_table_length,
.fossid-wbtable .dataTables_length {
	position: absolute;
	bottom: -11px;
	left: 0;
	color: #727184;
	font-size: 0.8125rem;
}

.quick_view_rules .dataTables_length {
	display: none;
}

div.dataTables_length[id*='component_scans'] select,
div.dataTables_length[id*='approvals_table'] select,
#vulnerabilities_cves_length select,
#fossid_result_length select,
.fossid-wbtable .dataTables_length select {
	font-size: 0.75rem;
	margin: 0 4px;
}

div.dataTables_filter[id*='component_scans'] label,
div.dataTables_filter[id*='approvals_table'] label,
#vulnerabilities_cves_table_filter label,
#fossid_result_table_filter label,
.fossid-wbtable .dataTables_filter label {
	color: rgba(0, 0, 0, 0);
	display: block;
	flex-grow: 1;
}

div.dataTables_filter[id*='component_scans'],
div.dataTables_filter[id*='approvals_table'],
#fossid_result_table_filter,
#vulnerabilities_cves_table_filter,
.fossid-wbtable .dataTables_filter {
	width: 100%;
	display: flex;
	height: 34px;
	align-items: flex-end;
	margin-bottom: 44px !important;
}


div.dataTables_filter[id*='component_scans'] input[type="search"],
div.dataTables_filter[id*='approvals_table'] input[type="search"],
#fossid_result_table_filter input[type="search"],
#vulnerabilities_cves_filter input[type="search"],
.fossid-wbtable .dataTables_filter input[type="search"] {
	width: 100%;
	float: left;
}

div.dataTables_info[id*='component_scans'],
div.dataTables_info[id*='approvals_table'],
#vulnerabilities_cves_table_wrapper.dataTables_wrapper .dataTables_info,
#snippet_search_center_container #fossid_result_table_wrapper.dataTables_wrapper .dataTables_info,
.fossid-wbtable .dataTables_info,
#quick_view_center_container #fossid_result_table_wrapper.dataTables_wrapper .dataTables_info {
	position: absolute;
	top: 42px;
}

.quick_view_rules .dataTables_paginate {
	margin-top: -20px;
}

.quick_view_rules td {
	box-shadow: none!important;
}

#quick-view-rules-table td span:hover {
	color: #595883;
}


.quick_view_rules .dataTables_info,
#fossid_result_table_wrapper.dataTables_wrapper .dataTables_info {
	position: absolute;
	top: -30px;
}

.page-header {
	font-size: 1.125rem;
	margin-bottom: 24px;
  word-wrap: break-word;
}

#view_container_scan #fossid_result_table_filter {
	display: none;
}

/* Note: to be remover after all tables refactoring */
#project_component_approval_table {
	max-width: 100%;
	overflow: scroll;
}

/*  */

.dropout-menu {
	position: relative;
}

.dropout-menu-icon {
	cursor: pointer;
}

.dropout-menu-content {
	display: none;
	position: absolute;
	background-color: #FFF;
	border: 1px solid #ECECEF;
	border-radius: 6px;
	z-index: 26;
	padding: 16px 0;
	opacity: 0
}

.dots-menu-content {
	width: 280px;
}

.dropout-menu-content ul {
	padding-left: 0;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

.dropout-menu-content li {
	list-style: none;
	display: flex;
	padding: 4px 16px;
	align-items: center;
	cursor: pointer;
	color: #000;
}

.dropout-menu-content li:hover {
	background-color: #D6D6D6;
}

.fossid-loader,
#fossid-overlay {
	position: fixed;
	background: rgba(170, 170, 170, 0.4);
	z-index: 51;
	width: 100%;
	height: 100%;
	top: 0;
}
.fossid-loader {
	display: flex;
	justify-content: center;
  align-items: center;
}

.loader-icon {
	width: 50px;
	height: 50px;
}
.fossid-modal {
	background: #FFF;
	border-radius: 4px;
	padding: 16px;
}

.fossid-modal-header {
	font-size: 24px;
	display: flex;
	margin-bottom: 24px;
}

.fossid-modal-header > span:nth-child(1){
	flex: 1;
	text-align: center;
}

.fossid-modal-header .icon-close {
	cursor: pointer;
}

.fossid-modal-actions {
	margin-top: 16px;
	display: flex;
	justify-content: flex-end;
}

.fossid-modal input,
.fossid-modal textarea { 
	border: none;
	flex: 1
}

.fossid-modal textarea { 
	box-shadow: inset 0 0 0 1px hsl(244deg 8% 84%);
	resize: none;
}

.fossid-modal input:not([type="button"]):focus,
.fossid-modal textarea:focus {
	box-shadow: inset 0 0 0 1px #4b45a1;
}

.fossid-modal-body > div { 
	margin-bottom: 12px;
	display: flex;
	flex-wrap: wrap;
}

.fossid-modal-label {
	min-width: 120px;
	color: #4b45a1;
}

[lang="ja"] #project_create_form .fossid-modal-label {
	min-width: 165px;
}

[lang="ja"] #project_create_form.fossid-modal #selected_user_information {
		width: calc(100% - 165px);
    margin-left: 165px;
}

.fossid-form-tips {
	text-align: right;
	font-size: 15px;
	color: #4b45a1;
	display: block;
	width:100%
}

.required_filed_text {
	color: #B54A4A;
	text-align: right;
	display: block;
	width:100%
}

.fossid-modal .search_result_div:hover {
	color: #4b45a1!important;
	background-color: transparent!important;
}

.loginWidget {
	background: hsla(238, 25%, 51%, 1);
	background: linear-gradient(225deg, hsla(238, 25%, 51%, 1) 2%, hsla(238, 25%, 30%, 1) 50%, hsla(238, 24%, 23%, 1) 96%);
	background: -moz-linear-gradient(225deg, hsla(238, 25%, 51%, 1) 2%, hsla(238, 25%, 30%, 1) 50%, hsla(238, 24%, 23%, 1) 96%);
	background: -webkit-linear-gradient(225deg, hsla(238, 25%, 51%, 1) 2%, hsla(238, 25%, 30%, 1) 50%, hsla(238, 24%, 23%, 1) 96%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6466A2", endColorstr="#393A5E", GradientType=1 );
}

.login-page {
	background: url(../images/Login-Animation.svg);
	background-size: 65%;
	background-repeat: no-repeat;
	flex: 1;
	background-position: -15% 50%;
}

.login-form {
	width: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(50%, -50%);
}

.login-form-input {
	width: 100%;
	margin-bottom: 16px!important;
}

.loginWidget .loginError {
	color: #B54A4A;
	font-size: 14px;
	text-align: right;
	/*margin-top: -16px;*/
}

.fossid_asterisk:after {
	content: '*';
	color: #B54A4A;
	margin-left: 4px;
}

.fossid_field_error {
	border: 1px solid #B54A4A!important;
}

.fossid-link {
	cursor: pointer;
  color: #4297d4!important;
  text-decoration: none!important;
}

.user_avatar {
	background: #6B4AB2;
	color: #FFF;
	height: 36px;
	width: 36px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.user_avatar .initials {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	width: 36px;
}

.user_data {
	border-bottom: 1px solid #ECECEF;
	padding: 0 16px 16px 16px;
	margin-bottom: 16px;
}

.user_data_name > span:nth-of-type(1) {
	font-weight: 700;
	font-size: 14px;
}

.user_data_name > span:nth-of-type(2) {
	color: #7D7D86;
	font-size: 12px;
	line-height: 12px;
}

.user-menu-content li {
 cursor: pointer;
 color: #3F2599
}

#project_create_form.fossid-modal #selected_user_information {
	width: calc(100% - 120px);
	margin-left: 120px;
}

#scan_form_update td input,
#project_create_form td input {
	width:100%!important;
}

.manage_backups_line {
	display: grid;
  grid-template-areas: "A A"
											"B D"
											"C C";
  grid-auto-columns: 200px;
}

.manage_backups_line > span {
	grid-area: C;
	text-align: left!important;
}
 .manage_backups_line > input {
	grid-area: B;
 }
 .manage_backups_line > label {
	grid-area: A;
}

.manage_backups_line > button {
	grid-area: D;
}

.user-form-grid {
	display: grid;
  grid-template-areas: "A B"
											"A C";
	grid-template-columns: 60% 40%;
	grid-template-rows: 280px;
}

.user-form-grid > div:nth-of-type(1) {
	grid-area: A;
}

.user-form-grid > div:nth-of-type(2) {
	grid-area: B;
}

.user-form-grid > div:nth-of-type(3) {
	grid-area: C;
}

#user_form {
	display: flex;
    flex-direction: column;
}

#roles-form > div,
#user_form > div { 
	margin-bottom: 12px;
	display: flex;
	justify-content: flex-start;
}
#roles-form > div > div,
#user_form > div > div {
	display: flex;
    flex-grow: 1;
	flex-direction: column;
}
#roles-form {
	width: 446px;
}


.userMenuRight .material-icons-outlined {
	color: #9E90CA
}

.userMenuRight li {
	white-space: nowrap;
}

.userMenuRight .dropout-menu:nth-of-type(2) {
	margin: 0 8px;
}

.identification-copyright {
	margin-top: 5px;
	border-radius: 2px;
	padding: 4px;
	border: 1px solid #D8D8D8;
	background-color: #FFFFFF;
}

.identification-copyright textarea {
	width: 96%;
	height: 80px;
	min-height: 35px;
}

.comment-number {
	width: 15px;
	height: 15px;
	position: absolute;
	border-radius: 50%;
	margin-left: 14px;
	margin-top: -36px;
	background-color: #CD4B5B;
	font-size: 8px;
	color: #fff;
	text-align: center;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

#fossid_result_container .panel-top-menu {
	background: #D9D9D9;
}

.select-outline-big,
#ignore_rule_type, #ignore_rule_apply_to, #string_match_rule_type, #string_match_rule_apply_to {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
	font-size: 14px;
	height: 32px
}

#form_title_container {
	background: #3b3c60;
	font-size: 16px;
	padding: 10px; 
	width: calc(100%-30px);
	height: 20px;
	color: #FFF;
}

.folder_path {
	font-size: 16px;
	border-bottom: 1px solid hsl(244deg 8% 84%);
	padding-bottom: 8px;
	margin-bottom: 14px;
}

.identification_loader,
#load_screen {
	background: url(../images/ui_icons/fossid-loading-animation.svg) #FFF no-repeat;
	background-position: 50%;
	opacity: 1;
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-size: 72px;
}

.identification_loader {
	z-index: 5000
}

.identification_loader{
	background-size: 50px;
	background-color: #f7fafd;
	position: absolute;
	height: 100%;
}

.fossid-notification {
	width: 400px;
	margin: 0 14px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	background-color: #FFF;
	z-index: 53;
	position: relative;
}

.fossid-notification .warning {
	font-size: 12px
}

.fossid-notification .icon-close {
	cursor: pointer;
}

.fossid-notification-success {
	border: 1px solid #69bf65;
	border-radius: 4px;
}

.fossid-notification-success .notification-icon {
	color: #69bf65;
}

.fossid-notification-info {
	border: 1px solid #6bc7f1;
	border-radius: 4px;
}

.fossid-notification-info .notification-icon {
	color: #6bc7f1;
}

.fossid-notification-error {
	border: 1px solid #ed6f6b;
	border-radius: 4px;
}

.fossid-notification-error .notification-icon {
	color: #ed6f6b;
}

#notificationsStack {
  position: fixed;
  right: 0;
  bottom: 70px;
  z-index: 51;
}

.vsfinder-loader,
#local_file_loading {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

#jira_form_container input[type="text"],
#jira_form_container input[type="password"],
#jira_form_container textarea {
	min-width:100%!important;
	max-width:100%!important;
}

#specific_project_selection_wrapper,
#specific_scan_selection_wrapper {
	margin: 8px 0 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}

#specific_project_code,
#specific_scan_code {
	height: 32px;
}