/* Import guilibs css :root constants */
@import '/modules/guilibs/look_and_feel/css/constants.css';

/*
 * Download fonts from the page itself.
 * We will only use fonts that are contained in the fonts directory of the
 * corresponding look_and_feel.
 */

@font-face {
  font-family: "Open Sans" ;
  src:	url('/look_and_feel/fonts/OpenSans-Regular.woff2') format('woff2'),
		url('/look_and_feel/fonts/OpenSans-Regular.woff') format('woff'),
		url('/look_and_feel/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans" ;
  src:	url('/look_and_feel/fonts/OpenSans-Italic.woff2') format('woff2'),
		url('/look_and_feel/fonts/OpenSans-Italic.woff') format('woff'),
		url('/look_and_feel/fonts/OpenSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Open Sans" ;
  src:	url('/look_and_feel/fonts/OpenSans-Bold.woff2') format('woff2'),
		url('/look_and_feel/fonts/OpenSans-Bold.woff') format('woff'),
		url('/look_and_feel/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

table, th {
	border-collapse: collapse;
	cursor: default;
}

.text--font {
	font-family: "Open Sans";
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

	text-transform: none;
    text-decoration: none;
    line-height: normal;
}

.text--normal {
    font-size: 14px;
	color: var(--body-text-color);
	margin: 0;
}

.text--title {
    font-size: 18px;
    color: var(--blue-color);
}

.text--right {
    text-align: right !important;
}

.text--in-out {
    text-align: center;
    font-size: 28px;
    line-height: 150%;
    color: white;
}

.win {
	z-index: 101;
    position: relative;
	max-height: calc(100vh - 15vh);
}

.win__btn-close {
	z-index: 4;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 48px;
	height: 48px;
	line-height: 60px;
	cursor: pointer;
	background-image: url('../resources/button_close.png');
	background-size: contain;
}

.win__title {
	z-index: 4;
	top: 0px;
	width: auto;
	height: 32px;
	font-size: 16px;
}

.win__icon {
	z-index: 4;
	position: absolute;
	width: 64px;
	height: 64px;
	line-height: 48px;
	text-align: center !important;
}

.win--popup__icon {
	left: 45%;
	right: 0;
	top: -10px;
}

.win--popup__det {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 400px;
	max-height: 1500px;
	max-width: 1200px;
	border: rgb(255, 255, 255) 2px solid;
	border-radius: 10px;
	background-color: var(--popup-win-bg-color);
	display: inline-block;
	overflow-x: hidden;
	overflow-y: auto;
}

.tbl-win__det {
	overflow: auto;
}

.win--login {
	z-index: 3;
    position: absolute;
	left: 40%;
    top: 30%;
    width: 400px;
	background-color: #000000;
	border: #878787 .5px solid;
	border-radius: 10px;
	box-shadow: 0 0 2px #cecece;
	padding: 20px 0;
	height: max-content;
}

.win--login__name, .win--logout__name {
	z-index: 4;
	text-align: center !important;
}

.win--login__name {
	width: 100%;
	height: 32px;
	font-size: 18px;
}

.win--login__icon {
	left: 46%;
	top: -10px;
}

.win--login__detail, .win--logout__detail {
	z-index: 1;
}

.win--login__detail {
	right: 0;
	width: 100%;
	height: max-content;
}

.win--login__table, .win--logout__table {
	z-index: 1;
	width: 100%;
	background-size: 100% 100%;
	border-collapse: separate;
	border-spacing: 0;
	padding: 0 5%;
}

.win--login input:not([type=submit]) {
	background: #000000 !important;
}

.button--log-in, .button--log-out {
	display: inline;
	position: static;
}

div > .button--log-in, div > .button--log-out {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

div > .button--log-out {
	width: fit-content !important;
}

.button--log-out {
	font-size: 9px;
}

.win--logout {
	z-index: 3;
	position: relative;
	width: 170px !important;
	background-color: black;
	border: #878787 .5px solid;
	border-radius: 10px;
	box-shadow: 0 0 2px #cecece;
	padding: 15px 0;
	height: max-content;
}

.win--logout__name {
	width: 100%;
	font-size: 14px;
}

.win--logout__detail {
	width: 100%;
	height: max-content;
}

.win--login__comp-container {
	height: 80px;
	padding: 30px;
}

.win--login__comp-container > * {
	display: inline-block;
}

.win--login__comp-container > :first-child {
	width: 30%;
}

/* Selects the second element of win--login__comp-container */
.win--login__comp-container > :nth-child(2) {
	margin-left: 10px;
	width: 64% !important;
}

.win--logout__table > div:last-child {
	height: 50px;
	padding: 15px 0 0 0;
}

#idHtmlElementDivUpdtPwdWin {
	width: 550px;
}

#idHtmlDivUpdtPwdDet {
	height: max-content;
}

#idHtmlLoginInputUser {
	width: 70%;
}

.login-inputPwd-container {
	width: 70%;
	margin-left: 0;
	margin-right: 0;
	position: relative;
}

td > .login-inputPwd-container {
	left: 50%;
	transform: translateX(-50%);
}

.tbl__row__col {
	height: 42px;
    word-wrap: break-word;
    vertical-align: middle !important;
	/* border: 1px solid rgba(255,0,0,0.3); */
}

.tbl__row {
	height: 42px;
    word-wrap: break-word;
	/* border: 1px solid rgba(255,0,0,0.3); */
}

.text--white {
	color: white;
}

.text--black {
	color: #000000;
}

.text--left-aligned {
	text-align: left !important;
}

.height-80px {
	height: 80px;
}

.hidden {
	visibility: hidden;
}

/* Overlay Styles */
.overlay {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 100;
	opacity: 0.8;
	background: var(--background-color);
	/* Theoretically for IE 8 & 9 (more valid)
	...but not required as filter works too
	should come BEFORE filter */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	/* This works in IE 8 & 9 too, but also 5, 6, 7
	* Remove "filter" because it is browser specific and the csstree/validator
	* returns error becasuse W3's validators validate based on the official standards.
	* filter: alpha(opacity=80);
	*/
}

/*** Styles for tab window ***/
.tab-win > div > div {
	width: max-content;
}

.tab-win--accordion {
	top: 0;
	background-color: #333;
}

.tab-win--accordion > div {
	width: 95% !important;
	margin: 2.5% !important;
	border: 2px solid #000000;
}

.tab-win__tab {
	list-style-type: none;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab:not(.accordion) {
	position: relative;
	background: #eaeaed;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.top,
.tab-win:not(.tab-win--header) ul.tab-win__tab.bottom {
	overflow: auto;
}

.tab-win__tab li {
	list-style-type: none;
	display: table;
	position: relative;
	overflow: auto;
}

.tab-win__tab.top li,
.tab-win__tab.bottom li {
	float: left;
	height: 100%;
	width: auto;
}

.tab-win__tab.left li,
.tab-win__tab.right li {
	height: auto;
	width: 100%;
}

ul.tab-win__tab li a.active:focus,
ul.tab-win__tab li.active:focus,
ul.tab-win__tab li:hover,
.active {
	-webkit-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5) !important;
  	-moz-box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5) !important;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5) !important;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab li.active:focus,
.tab-win:not(.tab-win--header) ul.tab-win__tab li:hover,
.tab-win:not(.tab-win--header) .active {
	-webkit-box-shadow: inset 0 0 0 1000px #eaeaed !important;
  	-moz-box-shadow: inset 0 0 0 1000px #eaeaed !important;
	box-shadow: inset 0 0 0 1000px #eaeaed !important;
}

ul.tab-win__tab li a:not(.active):hover,
.tab-win:not(.tab-win--header) ul.tab-win__tab li *:not(.active):hover {
	background-color: #ddd;
}

.tab-win--nested {
	position: relative;
	margin: 10px 10px;
	border: #878787 2px solid;
	border-radius: 10px;
	overflow: auto;
}

.tab-win--nested > div > div {
	width: 100%;
	position: relative;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab li.active *:focus,
.tab-win:not(.tab-win--header) ul.tab-win__tab li.active * {
	background-color: #333 !important;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab:not(.accordion) > li * {
	background: #eaeaed;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	padding: 0px 30px;
}

.tab-win:not(.tab-win--header) > div > ul.tab-win__tab:not(.accordion),
.tab-win:not(.tab-win--header) > div > ul.tab-win__tab:not(.accordion) li * {
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li * {
	color: var(--blue-color);
	background-color: #212121;
	width: 100%;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li.active *:focus,
.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li.active * {
	color: var(--body-text-color);
	background-color: var(--background-color) !important;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li:not(.active):hover * {
	background-color: var(--background-color);
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li > :first-child > * {
	padding-right: calc(2em + 1%);
	width: 98%;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li > :first-child::after {
	content: '\25BC';
	width: 2em;
	text-align: center;
	transition: all 0.35s;
	position: absolute;
	right: 1%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li.active > :first-child:after {
	content: '\25B2';
}

.tab-win:not(.tab-win--header) ul.tab-win__tab.accordion > li:not(:first-of-type):not(.display-none) {
	border-top: 2px solid #333;
}

.tab-text {
	width: 100%;
	height: 100%;
	padding: 0;
	border: 2px solid transparent;
	display: table-cell;
	vertical-align: middle;
	cursor: pointer;
}

li.active * {
	border-bottom-color: transparent;
	color: var(--body-text-color);;
	cursor: default !important;
}

li.active.tab-closed-by-click * {
	cursor: pointer !important;
}

/**************************************************************/

table.tbl {
	z-index: 1;
	position: relative;
	width: 95%;
	padding: 0 5%;
	border-spacing: 0;
	border-collapse: separate;
	background-size: 100% 100%;
}

.win--tbl-col-50per > div > table.tbl--win > tbody tr td {
	width: 50% !important;
}

.width-30per {
	width: 30%;
}

.width-70per {
	width: 70%;
}

.tbl__row--width-100per {
	width: 100%;
	display: table;
}

.cont-win__container {
	width: 100%;
	height: 100%;
}

.cont-win__container-itm {
	margin: 0 !important;
}

.sec-win__container--row-dir {
    display: flex;
    height: calc(100% - 20px);
    background-color: #333;
    flex-wrap: wrap;
    padding: 10px;
	box-sizing:border-box;
	margin: auto;
	overflow: auto;
}

.sec-win__container--col-dir {
    display: flex;
	flex-direction: column;
    height: calc(100% - 20px);
    background-color: blue;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 10px;
	box-sizing:border-box;
}

.sec-win__container--row-dir__itm {
	flex: 0 0 100px; /*grow shrink basis (basis = width)*/
    height: 100px;
    margin: 1% 1% 2% 1% !important;
	box-sizing:border-box;
}

.sec-win__container--col-dir__itm {
	flex: 0 0 100px; /*grow shrink basis (basis = height)*/
    width: 100px;
    background-color: green;
	border: 2px solid #000000;
    margin: 10px;
	box-sizing:border-box;
}

.section-body {
	width: 100%;
	height: 95%;
	background-color: var(--popup-win-bg-color);
	border: 2px solid #000000;
	overflow: auto;
}

.section--no-frame > div.section-body {
	border: 0;
}

.tbl-text--header,
.tbl-text--header > * {
	font-size: 14px;
	text-align: center;
	color: var(--blue-color);
	margin: 0 !important;
}

.text--centered {
	text-align: center;
}

.text--underlined {
	text-decoration: underline;
}

.flex-content {
	display: flex !important;
	margin: 0 !important;
	width: 100%;
}

.flex-content--col-dir {
	flex-direction: column;
}

.content--centered {
	justify-content: center;
	align-items: center;
}

.content--left {
	justify-content: left;
	align-items: flex-start;
}

.content--space-between {
	justify-content: space-between;
}

.position-relative {
	position: relative;
}

.text--bold {
	font-weight: bold;
}

.tbl-win--left-aligned-tbl > div > table > tbody tr td * {
	text-align: left;
	margin-left: 20px !important;
}

.tab-volumes-container {
	margin: 0 !important;
}

.tab-volumes-container > *:not(:last-of-type) {
	border-bottom: 2px solid #333;
}

.display-none {
	display: none !important;
}

.margin-0 {
	margin: 0 !important;
}

.tab-win--cfg-volumes {
	max-height: fit-content;
}

.files-tab-content {
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	text-align: center;
	flex-direction: column;
	margin: 10px !important;
}

table.tbl--cfg-files,
table.tbl--cert-files,
table.tbl--log-lines {
	width: 100% !important;
	float: left;
}

table.tbl--log-lines {
	border: 2px solid #555;
	padding: 0;
}

table.tbl--cfg-files,
table.tbl--cert-files {
	padding: 2% 0%;
}

table.tbl--cfg-files > tbody tr:hover td,
table.tbl--cert-files > tbody tr:hover td,
table.tbl--cfg-files.dataTable.display tbody tr:hover,
table.tbl--cfg-files > tbody tr:hover td .input--not-editable,
table.tbl--cert-files > tbody tr:hover td .input--not-editable,
table.tbl--log-lines > tbody tr:hover td {
	background: #555;
}

table.tbody-text--left tbody tr td * {
	text-align: left !important;
}

.col--cfg-files, .col--log-files, .col--cert-files {
	padding: 5px;
	border-left: 1px solid #555;
	border-right: 1px solid #777;
	border-top: 1px solid #555;
	border-bottom: 1px solid #777;
}

.col--cfg-files {
	text-align: left;
}

.col--cfg-files:first-child {
    border-left: 1px solid #777;
}

.col--log-lines {
	padding: 5px;
}

.col--log-lines:first-child {
	border: 0;
	border-right: 2px solid #555;
	background-color: #292929;
}

.col--log-lines:first-child > p {
	text-align: right !important;
}

.row--log-lines:not(:last-child) > .col--log-lines:not(:first-child) {
	border-bottom: 1px solid #444;
}

.win--login__rules-container {
	padding: 0 30px;
	border: #878787 .5px solid;
}

.rules-container {
	flex: 0 0 100%;
	margin: 10px 0;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	max-width: 550px;
	white-space: normal;
}

.alert-message > .rules-container {
	border: #878787 .5px solid;
}

.rules-container li {
    box-sizing: border-box;
    flex: 0 0 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.rules-container li:before {
	content: '\279B';
}

.alert-message > .rules-container li:before {
	content: '\2714';
}

li.failed-rule {
	color: red;
}

.rules-container li.failed-rule:before {
    content: '\2717';
}

.tooltip, [data-tooltip] {
    cursor: default;
	font-family: "Open Sans";
	font-size: 14px;
}

/* Remember iput and image are self closing elements and
can't use pseudo elements because they aren't “container elements” */

/** the left arrow of a tooltip **/
.tooltip:hover::before {
	content:'';
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 7px solid #fff9c8;
	position: absolute;
	top: 18%;
	left: calc(105% - 6px);
	z-index: 8;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
}

.tooltip:hover::after{
    content: attr(data-title);
    white-space: pre-wrap;
    color: black;
    background-color: #fff9c8;
    padding: 1em;
    position: absolute;
	width: 100%;
	top: -18%;
	left: 105%;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	z-index: 9;
}

/** FileConfigWindow and FileLogWindow styles */

.sec-win--file-cfg {
	width: 100%;
	height: max-content;
	max-height: fit-content;
	position: static;
}

.sec-win--file-log {
	max-height: fit-content;
}

.sec-win--file-cfg-section,
.sec-win--file-log-section,
.sec-win--file-cert-section,
.sec-win--log-viewer-section {
	margin: 10px 0 !important;
}

/** LogViewerWindow styles */
.sec-win--log-viewer {
	width: 40vw !important;
	padding: 1%;
	background-color: var(--popup-win-bg-color);
}

.show-logs-area {
	margin: 10px;
	border: 2px solid #000000;
	padding: 5px;
	height: 85%;
	overflow: auto;
}

.log-viewer-component {
	margin: 10px 0 !important;
	display: block;
	width: calc(50% - 20px);
	float: left;
}

.result-summary-text {
	display: inline-block;
	width: calc(100% - 20px);
	margin: 0 !important;
}

.file-text-in-tbl,
.log-line-text-in-tbl {
	word-break: break-all;
	word-wrap: break-word;
	white-space: pre-line;
}

.file-text-in-tbl {
	display: inline;
}

.log-line-text-in-tbl > b,
.log-line-text-in-tbl > p {
	color: black;
	background-color: #d4d17e;
	display: inline;
}

.log-viewer--panel-component {
	padding: 10px 1.25em;
	display: inline-block;
	width: 100%;
}

.log-viewer--filter-panel {
	border: 2px solid black;
	display: inline-block;
	width: calc(100% - 2.5em - 4px);
	margin: 0 1.25em 10px 1.25em;
	padding: 0 1.25em;
}

.filter-panel-component {
	margin: 10px 5px !important;
	display: inline-block;
	position: static;
}

.tbl-win--hor-bordered > div> table > tbody > tr:first-child > * {
	border-top: 2px solid #212121;
}

.tbl-win--hor-bordered > div> table > tbody > tr:not(:last-child) > * {
	border-bottom: 1px solid #3d3d3d;
}

.tbl-win--hor-bordered > div> table > tbody > tr:last-child > * {
	border-bottom: 2px solid #212121;
}

.tbl-win--hor-bordered > div > table > tbody > tr > *:first-child {
	border-left: 2px solid #212121;
}

.tbl-win--hor-bordered > div > table > tbody > tr > *:last-child {
	border-right: 2px solid #212121;
}

table.tbl--cert-details {
	border: 2px solid #212121;
	padding: 0px !important;
	margin: 4% 2%;
}

table.tbl--cert-details th {
	background-color: #2e2e2e;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #3d3d3d;
	padding: 0 20px !important;
}

table.tbl--cert-details tbody tr:not(:last-child) td {
	border-bottom: 1px solid #3d3d3d;
}

/* do something in this width range, for Mobile devices*/
@media only screen and (min-width: 480px) and (max-width: 768px) {
	.sec-win--log-viewer {
		width: 50vw !important;
	}
}

/** for iPads, Tablets*/
@media only screen and (min-width: 769px) and (max-width: 992px) {
	.sec-win--log-viewer {
		width: 55vw !important;
	}
}

/** for Small screens, laptops*/
@media only screen and (min-width: 993px) and (max-width:  1200px) {

}

/** for Extra large screens, TV*/
@media only screen and (min-width: 1201px) {

}