/* This file contains *only* all the styles needed for a correct integration of Qlik charts into an OE subtheme */

/*

Index:

1. General

2. Overrides
	2.1 ECL rules
	2.2 Qlik rules
	2.3 sms_heatmap rules

3. Layout
	3.1 Defaults
	3.2 Wrapper
	3.3 Width
	3.4 "qlik-masonry" class to lay out 50% wide charts
	3.5 "Map + table" special case
	3.6 "Wide charts" special case

4. Print

X. Other

*/

/*
1. General
*/

/* Provide placeholder */
.qvplaceholder {
	flex: 1 1 auto;
	height: 400px;
	min-width: 320px;
}

/*
2. Overrides
*/

/* 2.1 Override ECL rules */

/* Remove border for Qlik buttons inside charts */
.qlik-chart button {
	border: none;
}

/* Fix lui-tab display */
.qlik-chart .qsc-tab-row {
	padding: 0 5px;
}
.qlik-chart .lui-button.lui-buttongroup__button {
	border: 1px solid #b3b3b3;
	color: #595959;
}
.qlik-chart .lui-button.lui-buttongroup__button:hover {
	background-color: transparent;
	color: #333;
	border-color: #666;
}
.qlik-chart .lui-button.lui-buttongroup__button:focus {
	padding: 0;
}
.qlik-chart .lui-button.dropdown {
	border: 1px solid #b3b3b3;
	color: #595959;
}
.qlik-chart .lui-button.dropdown:hover {
	background-color: transparent;
	color: #333;
	border-color: #666;
}
.qlik-chart .lui-tabset {
	padding-left: 0!important;
	width: 100%;
}
.qlik-chart .lui-tab {
	margin-top: 0!important;
	margin-bottom: 0!important;
}

/* Remove default article margins */
.ecl article.qv-object {
	margin: 0;
}

/* Adapt figure spacing */
.ecl figure figcaption {
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.ecl figcaption>h1,
.ecl figcaption>h2,
.ecl figcaption>h3,
.ecl figcaption>h4,
.ecl figcaption>h5,
.ecl figcaption>h6 {
    margin: unset;
}

/* Remove underline for links inside some charts */
.ecl .qlik-chart .dtable td a {
  text-decoration: none;
}

/* 2.2 Override Qlik rules */

/* Use Arial everywhere */
#block-useraccountmenu,
.ecl-accordion,
.ecl-accordion2,
.ecl-button__label,
.ecl figure figcaption,
.form-item,
.reporting-period {
  font-family: Arial, sans-serif;
}
.ecl-button {
  font-family: Arial, sans-serif!important;
}

/* Headings */
h2,
h3,
h4,
h5,
h6 {
    margin: 1em 0 .5em;
    color: #404040;
}

/* Restore spacing */
.ecl p,
.ecl ul,
.ecl ol,
.ecl li,
.ecl table,
.ecl figure {
    margin-top: 0;
    margin-bottom: .5rem;
}

/* Fix lui-tab display */
.qlik-chart .lui-tab {
	min-width: 0;
}

/* Remove empty last column misteriously added by Qlik */
.qlik-chart .qv-object-table tr th:last-of-type,
.qlik-chart .qv-object-table tr td:last-of-type,
.qlik-chart .qv-object-table colgroup col:last-of-type {
	display: none!important;
}


/* 2.3 Override sms_heatmap rules for tables */
.ecl .qlik-chart table,
.ecl .qlik-chart table tfoot {
	color: inherit;
	font: inherit;
  font-size: 14px;
}
.qlik-chart table td {
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 1px;
	padding-right: 1px;
	text-align: center;
}
.qv-object .qv-object-content-container table tbody tr td,
.qv-object .qv-object-content-container table tfoot tr td{
	padding-left: 1px;
	padding-right: 1px;
	color: #000000;
}
.qv-object .qv-object-content-container table tfoot tr td {
  font-size: 14px;
}
.qv-object .qv-object-content-container table tfoot {
	border-top: 3px solid #ddd;
}


/*
3. Charts layout
*/

/* 3.1 Defaults */
.qvobject {
	width: 100%; /* If width is not specified, default is 100% */
	height: 400px; /* If height is not specified, default is 400px */
}

/* 3.2 Make charts wrapper a flex container */
.qlik-chart {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	align-content: stretch;
	justify-content: space-between;
}

/* 3.3 Charts width */
/* Make charts 100% wide by default */
.qlik-chart figure,
.qlik-chart>.qvobject {
	width: 100%;
}

/* 3.4 Provide class to make charts 50% wide, but only on big devices */
@media (min-width: 768px) {
	.ecl .qlik-masonry>figure,
	.ecl .qlik-masonry>.qvobject {
		width: calc(50% - .5rem)!important;
		margin-top: .5rem;
		margin-bottom: .5rem;
	}
}

/* 3.5 Provide class for "map + table" special case */
/* Both 100% wide on small devices, but adapt height */
.qlik-maps>.qvobject:first-of-type {
	width: 100%!important;
	height: 400px;
}
.qlik-maps>.qvobject:last-of-type {
	width: 100%!important;
	height: 900px;
}

/* Adapt width and height on bigger devices */
@media (min-width: 767px){
	.qlik-maps>.qvobject:first-of-type {
		width: 60%!important;
		height: 600px;
	}
	.qlik-maps>.qvobject:last-of-type {
		width: 40%!important;
		height: 900px;
	}
}
@media (min-width: 996px){
	.qlik-maps>.qvobject:first-of-type {
		width: 75%!important;
		height: 900px;
	}
	.qlik-maps>.qvobject:last-of-type {
		width: 25%!important;
		height: 900px;
	}
}

/* 3.6 Provide class for charts that need more width to be correctly displayed */
.qlik-chart--wide {
	overflow-x: auto;
	padding-bottom: 1rem;
}
.qlik-chart--wide > .qvobject {
	min-width: 1108px; /* This value can be adapted if needed */
}


/*
4. Print
*/

@media print {

	/* Override awful Qlik font again */
	body, button, input, select, textarea {
		font-family: Arial, sans-serif!important;
	}
	/* Resize charts on print to avoid them being cutoff */
	.qlik-chart:not(.qlik-maps):not(.qlik-masonry) {
	  transform: scale(1.7);
		transform-origin: top left;
		-moz-transform: scale(1.7);
		-moz-transform-origin: top left;
	}
	.qlik-chart:not(.qlik-maps):not(.qlik-masonry)>.qvobject {
		transform: scale(0.588);
		transform-origin: top left;
		-moz-transform: scale(0.588);
		-moz-transform-origin: top left;
	}

	/* Arrange masonry charts (country pages) */
	.ecl .qlik-masonry>figure,
	.ecl .qlik-masonry>.qvobject {
	  width: calc(50% - .5cm)!important;
	}

	/* Arrange maps charts */
	.ecl .qlik-maps p,
	.ecl .qlik-maps a ,
	.ecl .qlik-maps th {
	  font-size: 16pt;
	}
	.ecl .qlik-maps>.qvobject:first-of-type  {
	  width: calc(75% - .5cm)!important;
	}
	.ecl .qlik-maps>.qvobject:last-of-type  {
	  width: calc(25% - .5cm)!important;
	}
}

/* Avoid confusing page breaks */
.qlik-chart {
    break-before: avoid;
    break-inside: avoid;
}
.qvobject {
    break-inside: avoid !important;
}
.ecl .qlik-masonry>figure,
.ecl .qlik-masonry>.qvobject {
    width: calc(50% - .5cm)!important;
    break-inside: avoid;
}


/*
X. Other
*/

.flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.flex-container.title,
.flex-container.title .qvobject {
    margin: 0px;
}

.qlik-selector-header {
    top: 35px;
    z-index: 10;
    height: auto;
    margin: 0;
}

.qlik-selector-header.sticky {
    position: fixed;
}

@media (min-width: 1140px) {
    .qlik-selector-header.sticky {
        max-width: 100%;
        width: 1140px
    }
}

#popup {
    background-color: #c3534b;
    color: #FFFFFF;
    position: fixed;
    max-width: 250px;
    padding: 10px;
    margin: 10px;
    bottom: 0;
    right: 0;
    display: none;
    border-radius: 5px;
    z-index: 6;
    font-family: sans-serif;
}

.close {
    cursor: pointer;
    background: 0 0;
    border: 0;
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    position: absolute;
    right: 9px;
    top: 7px;
}

.close:hover {
    opacity: .5;
}

#popupText {
    margin-right: 23px;
}

.page-node-type-data .node-qlik-indicator {
    border: 2px solid #004494;
    margin-top: 5em;
}

.page-node-type-data .node-qlik-indicator h2 {
    padding: 1em;
    cursor: pointer;
    border-bottom: 1px solid #004494;
}

.page-node-type-data .node-qlik-indicator .ecl-table {
    margin-bottom: 1em;
}

.page-node-type-data strong.node_view {
    display: none;
}

.indicator-data {
	padding: 0 1em;
}

.published-indicator {
	background: #BFD0E4;
}

.page-node-type-data .node-qlik-indicator h2 a:after {
    content: '+';
}

.page-node-type-data .node-qlik-indicator h2.open a:after {
    content: '-';
}

.data-table-diff h2 {
    display: none;
}

.flex-container.filter,
.qlik-chart.filter,
.flex-container .qv-object-header,
.qlik-chart .qv-object-header,
.qvobject .qv-object-header {
	display: none;
}