Project

General

Profile

1
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');
2

    
3
:root {
4
  --primary-color: #EC4386;
5
  /*fixme I need a pinkish color*/
6
  /*--primary-color-background: #eff6e6;*/
7
  --primary-color-background: #F6D6E5;
8
  --secondary-color: #CA4D9A;
9

    
10
  --link-color: #EC4386;
11
  --link-hover-color: #CA4D9A;
12

    
13
  --publication-color: #F17AA9;
14
  --publication-background-color: #f8d5e3;
15
  /*--publication-color: #0d6b96;*/
16
  /*--publication-background-color: #8197D9;*/
17

    
18
  --dataset-color: #A98BD4;
19
  --dataset-background-color: #e2daf0;
20
  /*--dataset-color: #2ec0f9;*/
21
  /*--dataset-background-color: #e2daf0;*/
22

    
23
  --software-color: #C2155A;
24
  --software-background-color: #F2D0DE;
25
  /*--software-color: #8affc1;*/
26
  /*--software-background-color: #F2D0DE;*/
27

    
28
  --other-color: #00CCCC;
29
  --other-background-color: #CCF4F4;
30
  /*--other-color: #4ea699;*/
31
  /*--other-background-color: #CCF4F4;*/
32

    
33
  --repository-color: #708AA5;
34
  --repository-background-color: #ADD3E0;
35
  /*--repository-color: #639C66;*/
36
  /*--repository-background-color: #D4ECD6;*/
37

    
38
  --journal-color: #FFCE4E;
39
  --journal-background-color: #FBE8B1;
40
  /*--journal-color: #FFCE4E;*/
41
  /*--journal-background-color: #FBE8B1;*/
42

    
43
  --policies-color: #639C66;
44
  --policies-background-color: #D4ECD6;
45

    
46
  --muted-color: #4d4d4d;
47
}
48

    
49
html {
50
  color: #292929;
51
}
52

    
53
body {
54
  font: 400 14px/19px 'Open Sans';
55
}
56

    
57
h1, h2, h3, h4, h5, h6 {
58
  font-family: 'Open Sans', sans-serif;
59
}
60

    
61
h3 {
62
  font-weight: 600;
63
  font-size: 24px;
64
}
65

    
66
.uk-h6, h6 {
67
  font-size: 18px;
68
  font-weight: 400;
69
}
70

    
71
.uk-flex-space-between {
72
  justify-content: space-between;
73
}
74

    
75
.uk-container-large {
76
  max-width: 1600px;
77
}
78

    
79
.uk-container-expand {
80
  max-width: none;
81
}
82

    
83
.uk-container-center {
84
  margin-left: auto;
85
  margin-right: auto;
86
}
87

    
88
.uk-navbar-nav > li > a, .uk-navbar-nav > li.uk-active > a {
89
  font-size: 14px;
90
  font-weight: bold;
91
  letter-spacing: 0px;
92
  color: #000;
93
}
94

    
95
.large-beta-indication {
96
  height: 83px;
97
  position: fixed;
98
  top: 0;
99
  left: 0;
100
  z-index: 10000;
101
}
102

    
103
.medium-beta-indication-nonFixed {
104
  height: 65px;
105
  position: absolute;
106
  top: 0;
107
  left: 0;
108
  z-index: 10000;
109
}
110

    
111
.medium-beta-indication-fixed {
112
  height: 65px;
113
  position: fixed;
114
  top: 0;
115
  left: 0;
116
  z-index: 10000;
117
}
118

    
119
.uk-text-muted {
120
  color: var(--muted-color) !important;
121
}
122

    
123
/*#sect-overview, #sect-tabs {*/
124
  /*padding: 20px 0;*/
125
/*}*/
126

    
127
.greySection {
128
  /*background-color: #F0F0F0;*/
129
  background-color: #F9FBFC;
130
}
131

    
132
a {
133
  color: var(--link-color);
134
}
135

    
136
a:hover, a:focus, a:active {
137
  color: var(--link-hover-color);
138
}
139

    
140
select.md-input {
141
  border-radius: 6px;
142
  border-width: 1px;
143
  background: rgba(0, 0, 0, 0.02);
144
}
145

    
146
.mapContainer {
147
  /*background: #F7F7F7 0% 0% no-repeat padding-box;*/
148
  /*border: 1px solid #E0E0E0;*/
149
  /*opacity: 0.4;*/
150
  /*padding: 15px;*/
151
  position: relative;
152
  height: 100%;
153
}
154

    
155
.mapContainerEmbed {
156
  height: 100%;
157
}
158

    
159
.map {
160
  /*height: 398px;*/
161
  /*border: 1px solid #707070;*/
162
  /*margin: 15px;*/
163
  position: absolute;
164
  height: 88%;
165
  width: 100%;
166
}
167

    
168
.mapControls {
169
  /*position: absolute;*/
170
  bottom: 20px;
171
}
172

    
173
.uk-nav-label {
174
  width: 12px;
175
  height: 12px;
176
  display: inline-block;
177
  vertical-align: -1px;
178
  margin-right: 8px;
179
  border-radius: 50%;
180
}
181

    
182
.uk-nav-horizontal li {
183
  display: inline-block;
184
}
185

    
186
.uk-nav > li > a {
187
  padding: 5px 15px;
188
}
189

    
190
.uk-nav-side > li > a {
191
  color: #444;
192
}
193

    
194
.mapControls .text {
195
  opacity: 0.5;
196
}
197

    
198
.mapControls .text.active {
199
  opacity: 1;
200
}
201

    
202
.dark-blue-box {
203
  background: #002D60 0% 0% no-repeat padding-box;
204
  border: 1px solid #707070;
205
  border-radius: 2px;
206
  opacity: 1;
207
  color: #fff;
208
}
209

    
210
.dark-blue-box a, .dark-blue-box a:hover, .dark-blue-box a:focus {
211
  color: #fff;
212
}
213

    
214
.dark-grey-box {
215
  background: #2A2D34 0% 0% no-repeat padding-box;
216
  border: 1px solid #707070;
217
  border-radius: 2px;
218
  opacity: 1;
219
  color: #fff;
220
}
221

    
222
.dark-grey-box h3 {
223
  color: #fff;
224
}
225

    
226
.dark-grey-box a, .dark-grey-box a:hover, .dark-grey-box a:focus {
227
  color: #fff;
228
}
229

    
230
.openaire-symbol-wrapper {
231
  background-color: #fff;
232
  border-radius: 50%;
233
  padding: 12px 10px 17px 13px;
234
}
235

    
236

    
237
.infoBox {
238
  /*font-weight: 300;*/
239
  /*font-size: 15px;*/
240

    
241
  background: #FFFFFF 0% 0% no-repeat padding-box;
242
  box-shadow: 0px 2px 6px #00000038;
243
  border-radius: 3px;
244
  opacity: 1;
245
}
246

    
247
.infoBox h3 {
248
  font-weight: bold;
249
}
250

    
251
.infoBox ul {
252
  padding-left: 18px;
253
}
254

    
255
.infoBox ul li {
256
  margin-bottom: 20px;
257
  letter-spacing: 0px;
258
  line-height: 27px;
259
}
260

    
261
.dark-blue-box h3 {
262
  color: #fff;
263
}
264

    
265
a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:focus  {
266
  color: #fff;
267
}
268

    
269
.greyBoldDivider {
270
  border: 1px solid #E0E0E0;
271
}
272

    
273
.numbers .number {
274
  font-size: 16px;
275
}
276

    
277
div.indicator {
278
  display: flex;
279
}
280

    
281
div.indicator span {
282
  padding-right: 10px;
283
}
284

    
285
.primary {
286
  color: var(--primary-color);
287
}
288

    
289
.publications {
290
  color: var(--publication-color);
291
}
292

    
293
.datasets {
294
  color: var(--dataset-color);
295
}
296

    
297
.software {
298
  color: var(--software-color);
299
}
300

    
301
.other {
302
  color: var(--other-color);
303
}
304

    
305
.repositories {
306
  color: var(--repository-color);
307
}
308

    
309
.journals {
310
  color: var(--journal-color);
311
}
312

    
313
.policies {
314
  color: var(--policies-color);
315
}
316

    
317
.indicatorCards {
318
  font-size: 13px;
319
}
320

    
321
.indicatorCards .md-card {
322
  box-shadow: 0px 2px 6px #00000038;
323
  border: 1px solid #E0E0E0;
324
  border-radius: 3px;
325
}
326

    
327
/********* Mock chart for country **********/
328
.epc_chart {
329
  display: block;
330
  position: relative;
331
}
332

    
333
.epc_chart_text {
334
  position: absolute;
335
  top: 0;
336
  left: 0;
337
  right: 0;
338
  bottom: 0;
339
  text-align: center;
340
  font: 400 20px/110px Roboto,sans-serif;
341
}
342

    
343
/********************************************/
344

    
345
/*.md-btn-primary {*/
346
  /*background: #1F73F7 0% 0% no-repeat padding-box;*/
347
  /*box-shadow: 0px 3px 6px #00000029;*/
348
  /*border-radius: 26px;*/
349
  /*opacity: 1;*/
350
  /*text-align: left;*/
351
  /*font: 14px/19px Open Sans;*/
352
  /*font-weight: 400;*/
353
  /*letter-spacing: 0;*/
354
  /*color: #FFFFFF;*/
355
  /*text-transform: none;*/
356
  /*!*padding: 10px 30px;*!*/
357
/*}*/
358

    
359
.md-btn {
360
  border-radius: 23px;
361
  padding: 7px 25px;
362
  font: 500 14px / 31px 'Open Sans', sans-serif !important;
363
}
364

    
365
.md-btn-primary {
366
  background: var(--primary-color) 0% 0% no-repeat padding-box;
367
  box-shadow: 0px 3px 6px #00000029;
368
  border-radius: 23px;
369
  opacity: 1;
370
  text-align: left;
371
  font: 14px/19px Open Sans;
372
  font-weight: 400;
373
  letter-spacing: 0;
374
  color: #FFFFFF;
375
  text-transform: none;
376
  /*padding: 10px 30px;*/
377
}
378

    
379
.md-btn-primary:hover, .md-btn-primary:focus, .md-btn-primary:active {
380
  background: var(--secondary-color) 0% 0% no-repeat padding-box;
381
}
382

    
383
.md-btn-secondary {
384
  background: var(--secondary-color) 0% 0% no-repeat padding-box;
385
  box-shadow: 0px 2px 6px #00000038;
386
  border-radius: 23px;
387
  opacity: 1;
388
  opacity: 1;
389
  text-align: left;
390
  font: 14px/19px Open Sans;
391
  font-weight: 400;
392
  letter-spacing: 0;
393
  color: #FFFFFF;
394
  text-transform: none;
395
  /*padding: 7px 30px;*/
396
}
397

    
398
.number {
399
  font-weight: bold;
400
}
401

    
402
#sect-tabs .uk-tab > li > a {
403
  text-transform: none;
404
}
405

    
406
.uk-tab > li.uk-active > a {
407
  border-bottom-color: var(--primary-color);
408
}
409

    
410
.uk-tab > li > a:hover, .uk-tab > li > a:focus {
411
  background: none;
412
  color: #212121;
413
  border-bottom-color: var(--secondary-color);
414
}
415

    
416
.uk-tab::before {
417
  border-bottom: none;
418
}
419

    
420
.dataContainer {
421
  background: #F9fbfc 0% 0% no-repeat padding-box;
422
  border: 1px solid #E0E0E0;
423
}
424

    
425
.tabContent {
426
  padding: 30px 50px;
427
}
428

    
429
.uk-tab {
430
  display: flex;
431
}
432

    
433
.uk-tab > li.uk-active > a {
434
  font-weight: bold;
435
}
436
/*.uk-tab-center.uk-tab {*/
437

    
438
  /*position: relative;*/
439
  /*right: 50%;*/
440
  /*border: none;*/
441
  /*float: right;*/
442

    
443
/*}*/
444

    
445
.uk-subnav-pill > .uk-active > a {
446
  /*background: #1F73F7;*/
447
  background: var(--primary-color);
448
}
449

    
450
.dataView.uk-subnav-pill > * > * {
451
  width: 16px;
452
  height: 16px;
453
  padding: 8px;
454
  border-radius: 50%;
455
  border: 1px solid;
456
  display: inline-block;
457
}
458

    
459
.tabContent hr {
460
  margin: 30px 0;
461
}
462

    
463
.dataContent {
464
  background-color: #FFFFFF;
465
  border: 1px solid #E0E0E0;
466
  padding: 30px;
467
}
468

    
469
.goToDetailedViewLink {
470
  margin-top: -50px;
471
}
472

    
473
.actionButtons a, .actionButtonsCountryPage a {
474
  color: #000000;
475
}
476

    
477
.actionButtons a i, .actionButtonsCountryPage a i {
478
  color: var(--primary-color);
479
}
480

    
481
.md-card .md-card-toolbar {
482
  /*height: 48px;*/
483
}
484

    
485
.infoBox.md-card .md-card-toolbar {
486
  /*height: 48px;*/
487
  background: transparent linear-gradient(115deg, var(--primary-color) 0%, var(--secondary-color) 100%) 0% 0% no-repeat padding-box;
488
  border-radius: 3px 3px 0px 0px;
489
  opacity: 1;
490
  padding: 16px 25px 0;
491
  color: #292929;
492
}
493

    
494
.infoBox.md-card .md-card-toolbar h3 {
495
  color: #fff;
496
  font-size: 16px;
497
}
498

    
499
.md-card .md-card-toolbar .md-card-toolbar-actions {
500
  padding-top: 15px;
501
}
502

    
503
.uk-flex-bottom .md-card-content {
504
  width: 100%;
505
}
506

    
507
.md-card .md-card-content {
508
  padding: 20px;
509
}
510

    
511
/*.uk-table td {*/
512
  /*border-bottom: 1px solid #e0e0e0;*/
513
/*}*/
514

    
515
.uk-table th {
516
  text-transform: none;
517
}
518

    
519

    
520
a.publicationsSubnav {
521
  color: var(--publication-color) !important;
522
}
523

    
524
.uk-subnav-pill > .uk-active > a.publicationsSubnav {
525
  background: var(--publication-background-color);
526
}
527

    
528
a.datasetsSubnav {
529
  color: var(--dataset-color) !important;
530
}
531

    
532
.uk-subnav-pill > .uk-active > a.datasetsSubnav {
533
  background: var(--dataset-background-color);
534
}
535

    
536
a.softwareSubnav {
537
  color: var(--software-color) !important;
538
}
539

    
540
.uk-subnav-pill > .uk-active > a.softwareSubnav {
541
  background: var(--software-background-color);
542
}
543

    
544
a.otherSubnav {
545
  color: var(--other-color) !important;
546
}
547

    
548
.uk-subnav-pill > .uk-active > a.otherSubnav {
549
  background: var(--other-background-color);
550
}
551

    
552
/*a.publicationsSubnav, a.datasetsSubnav, a.softwareSubnav, a.otherSubnav {*/
553
  /*width: 16px;*/
554
  /*height: 16px;*/
555
  /*padding: 8px;*/
556
  /*!*border-radius: 50%;*!*/
557
  /*!*border: 1px solid;*!*/
558
  /*display: inline-block;*/
559
/*}*/
560

    
561
a.publicationsSubnav img, a.datasetsSubnav img, a.softwareSubnav img, a.otherSubnav img {
562
  vertical-align: baseline;
563
}
564

    
565

    
566
/**************** HEADER ****************/
567

    
568
/*.tm-header .uk-navbar-container {*/
569
  /*padding-top: 10px;*/
570
  /*padding-bottom: 15px;*/
571
/*}*/
572

    
573
.tm-header .uk-navbar-left {
574
  position: relative;
575
  z-index: 9999 !important;
576
}
577

    
578
.navbar .brand, .uk-logo {
579
  font-size: 24px;
580
  font-family: 'Open Sans';
581
  color: #666;
582
  text-decoration: none;
583
}
584

    
585
.tm-header .uk-logo {
586
  position: relative;
587
  z-index: 1000 !important;
588
  /*padding-left: 100px;*/
589
}
590

    
591
.uk-logo > img {
592
  max-height: 70px;
593
}
594

    
595
/********************************************/
596

    
597
/**************** FOOTER ****************/
598

    
599
.footerLink {
600
  color: #000;
601
  text-decoration: underline;
602
}
603

    
604
.footerImage {
605
  opacity: 0.8;
606
  float: left;
607
  margin-top: 7px;
608
}
609

    
610
/********************************************/
611

    
612

    
613
#sidebar_main {
614
  position: fixed;
615
  right: 0;
616
  top:0;
617
  bottom:0;
618
  overflow-x: hidden;
619
  overflow-y: auto;
620
  /*background-color: #222;*/
621
  /*width: 260px;*/
622
  width: 20%;
623
  z-index:1;
624
}
625

    
626
#left-col {
627
  position: fixed;
628
  left: 0;
629
  top:0;
630
  bottom:0;
631
  overflow-x: hidden;
632
  overflow-y: auto;
633
  background-color: #222;
634
  width: 260px;
635
  z-index:1;
636
}
637
.bar-wrap {
638
  padding: 2rem;
639
}
640
#right-col {
641
  margin-left: 260px;
642
}
643

    
644

    
645

    
646
/*#sc-sidebar-main {*/
647

    
648
  /*position: fixed;*/
649
  /*top: 48px;*/
650
  /*left: 0;*/
651
  /*bottom: 0;*/
652
  /*-webkit-box-sizing: border-box;*/
653
  /*box-sizing: border-box;*/
654
  /*width: 260px;*/
655
  /*z-index: 1300;*/
656
  /*border-right: 1px solid*/
657

    
658
  /*rgba(0,0,0,.08);*/
659

    
660
  /*background:*/
661

    
662
    /*#fff;*/
663
  /*display: -webkit-box;*/
664
  /*display: -ms-flexbox;*/
665
  /*display: flex;*/
666
  /*-webkit-box-orient: vertical;*/
667
  /*-webkit-box-direction: normal;*/
668
  /*-ms-flex-direction: column;*/
669
  /*flex-direction: column;*/
670

    
671
/*}*/
672

    
673
/*#sc-sidebar-main .uk-offcanvas-bar {*/
674

    
675
  /*padding: 0;*/
676

    
677
/*}*/
678

    
679
/*#sc-sidebar-main .uk-offcanvas-bar {*/
680

    
681
  /*top: 0;*/
682
  /*display: -webkit-box;*/
683
  /*display: -ms-flexbox;*/
684
  /*display: flex;*/
685
  /*-webkit-box-orient: vertical;*/
686
  /*-webkit-box-direction: normal;*/
687
  /*-ms-flex-direction: column;*/
688
  /*flex-direction: column;*/
689
  /*position: static;*/
690
  /*background: 0 0;*/
691
  /*-webkit-box-shadow: none;*/
692
  /*box-shadow: none;*/
693
  /*-webkit-transform: none;*/
694
  /*transform: none;*/
695
  /*overflow-x: hidden;*/
696
  /*overflow-y: visible;*/
697
  /*height: 100%;*/
698
  /*width: 260px;*/
699

    
700
/*}*/
701

    
702
/*#sc-page-wrapper {*/
703

    
704
  /*height: calc(100% - 48px);*/
705
  /*-webkit-box-flex: 1;*/
706
  /*-ms-flex: 1;*/
707
  /*flex: 1;*/
708

    
709
/*}*/
710

    
711
/*#sc-page-wrapper {*/
712

    
713
  /*padding-left: 260px;*/
714
  /*-webkit-transition: padding 140ms ease-out;*/
715
  /*transition: padding 140ms ease-out;*/
716

    
717
/*}*/
718

    
719

    
720

    
721

    
722
/********************************************/
723

    
724
/*.contentSectionContainer .md-card-content {*/
725
  /*max-height: 300px;*/
726
/*}*/
727

    
728
.contentSectionContainer .md-card-content img {
729
  height:  350px;
730
  width: 100%;
731
}
732

    
733
/*.contentSectionContainer .md-card-content {*/
734
  /*text-align: center;*/
735
/*}*/
736

    
737

    
738

    
739
.progress {
740
  height: 20px;
741
  /*margin-bottom: 20px;*/
742
  overflow: hidden;
743
  background-color: #f5f5f5;
744
  border-radius: 4px;
745
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
746
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
747
}
748

    
749
.progress {
750
  height: 12px;
751
  background-color: #e9ecee;
752
  background-image: none;
753
  box-shadow: none;
754
  filter: none;
755
}
756

    
757
.progress {
758
  /*margin-bottom: 10px;*/
759
}
760

    
761
.progress {
762
  /*margin-top: 3px;*/
763
  /*width: 85px;*/
764
  /*display: inline-block;*/
765
  width: 50%;
766
}
767

    
768
.progress-bar {
769

    
770
  float: left;
771
  width: 0;
772
  height: 100%;
773
  font-size: 12px;
774
  line-height: 20px;
775
  color: #fff;
776
  text-align: center;
777
  background-color: #337ab7;
778
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
779
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
780
  -webkit-transition: width .6s ease;
781
  -o-transition: width .6s ease;
782
  transition: width .6s ease;
783

    
784
}
785

    
786
.progress-bar {
787

    
788
  box-shadow: none;
789
  border-radius: 3px;
790
  background-color: #0090D9;
791
  background-image: none;
792
  -webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
793
  transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
794
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
795
  -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
796
  -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
797
  -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
798
  -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
799
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
800
  float: left;
801
  filter: none;
802

    
803
}
804

    
805
.progress-bar-publications {
806
  /*background-color: #F6C4D8;*/
807
  background-color: var(--publication-background-color);
808
  background-image: none;
809
}
810

    
811
.progress-bar-datasets {
812
  /*background-color: #D6CBEB;*/
813
  background-color: var(--dataset-background-color);
814
  background-image: none;
815
}
816

    
817
.progress-bar-repositories {
818
  /*background-color: #ADD3E0;*/
819
  background-color: var(--repository-background-color);
820
  background-image: none;
821
}
822

    
823
.progress-bar-journals {
824
  /*background-color: #FBE8B1;*/
825
  background-color: var(--journal-background-color);
826
  background-image: none;
827
}
828

    
829

    
830
/*.progress-bar-software {*/
831
  /*background-color: #F88306;*/
832
  /*background-image: none;*/
833
/*}*/
834

    
835
/*.progress-bar-otherProducts {*/
836
  /*background-color: #987CD6;*/
837
  /*background-image: none;*/
838
/*}*/
839

    
840

    
841
/**************** BREADCRUMB ****************/
842

    
843
.uk-breadcrumb > :last-child > * {
844
  color: var(--primary-color);
845
}
846

    
847
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
848
  content: ">";
849
}
850

    
851
/********************************************/
852

    
853
.small-flag-image {
854
  border: 2px solid #eee;
855
  border-radius: 100px;
856
}
857

    
858
.flag-image {
859
  border: 10px solid #eee;
860
  border-radius: 100px;
861
}
862

    
863

    
864
.demo-chart {
865
  /*max-height: 600px;*/
866
  height: 65vh;
867
}
868

    
869
/********* LOADERS *********/
870

    
871
.loader {
872
  color: var(--primary-color);
873
  margin: 25% auto;
874
}
875

    
876
.whiteFilm {
877
  background: #ffffff;
878
  z-index: 105;
879
  width: 100%;
880
  height: 100%;
881
  opacity: 0.7;
882
  position: absolute;
883
  top: 0;
884
  left: 0;
885

    
886
  display: flex;
887
  align-items: center;
888
}
889

    
890
.transparentFilm {
891
  background: transparent;
892
  z-index: 105;
893
  width: 100%;
894
  height: 100%;
895
  opacity: 0.7;
896
  position: absolute;
897
  top: 0;
898
  left: 0;
899

    
900
  display: flex;
901
  align-items: center;
902
}
903
/**************************/
904

    
905
.lastUpdateInfo {
906
  opacity: 0.4;
907
  color: #000;
908
  letter-spacing: 0px;
909
}
910

    
911
.entitiesContainer {
912
  height: 300px;
913
  display: flex;
914
  align-items: flex-end;
915
}
916

    
917
.publicationsColumn {
918
  /*background-color: #f181ae;*/
919
  background-color: var(--publication-color);
920
  box-shadow: 3px 3px 6px #00000029;
921
  opacity: 1;
922
  z-index: 10;
923
}
924

    
925
.publicationsDot {
926
  background-color: var(--publication-color);
927
  /*width: 50px;*/
928
  width: 35px;
929
  height: 33px;
930
  border-radius: 50%;
931
}
932

    
933
.datasetsColumn {
934
  background-color: var(--dataset-color);
935
  box-shadow: 3px 3px 6px #00000029;
936
  opacity: 1;
937
  z-index: 8;
938
}
939

    
940
.datasetsDot {
941
  background-color: var(--dataset-color);
942
  /*width: 50px;*/
943
  width: 35px;
944
  height: 33px;
945
  border-radius: 50%;
946
}
947

    
948
.softwareColumn {
949
  background-color: var(--software-color);
950
  box-shadow: 3px 3px 6px #00000029;
951
  opacity: 1;
952
  z-index: 6;
953
}
954

    
955
.softwareDot {
956
  background-color: var(--software-color);
957
  /*width: 50px;*/
958
  width: 35px;
959
  height: 33px;
960
  border-radius: 50%;
961
}
962

    
963
.otherColumn {
964
  background-color: var(--other-color);
965
  box-shadow: 3px 3px 6px #00000029;
966
  opacity: 1;
967
  z-index: 4;
968
}
969

    
970
.otherDot {
971
  background-color: var(--other-color);
972
  /*width: 50px;*/
973
  width: 35px;
974
  height: 33px;
975
  border-radius: 50%;
976
}
977

    
978
.entityColumnContent {
979
  color: #fff;
980
  width: 100%;
981
  height: 100%;
982
  display: flex;
983
  flex-direction: column;
984
  justify-content: center;
985
  text-align: center;
986
}
987

    
988
hr.entitiesDivider {
989
  border: 2px solid #B4B4B4;
990
  margin-left: -90px;
991
  margin-right: -50px;
992
  margin-top: 0px;
993
}
994

    
995
.entityLegendContent {
996
  display: flex;
997
  padding-right: 40px;
998

    
999
}
1000

    
1001

    
1002

    
1003

    
1004
.countryPageHeader {
1005
  display: flex;
1006
  justify-content: space-between;
1007
}
1008

    
1009

    
1010
.chartCard.md-card {
1011
  box-shadow: 1px 10px 12px #00000026;
1012
  border: 1px solid #E0E0E0;
1013
  border-radius: 5px;
1014
}
1015

    
1016

    
1017
/********* DONUT - CIRCLE ********/
1018

    
1019
.circular-chart {
1020
  display: block;
1021
  margin: 10px auto;
1022
  max-width: 80%;
1023
  /*max-height: 250px;*/
1024
  max-height: 110px;
1025
}
1026

    
1027
.circle-bg {
1028
  fill: none;
1029
  stroke: #eee;
1030
  stroke-width: 3.8;
1031
}
1032

    
1033
.circle {
1034
  fill: none;
1035
  /*stroke-width: 2.8;*/
1036
  stroke-width: 4.2;
1037
  stroke-linecap: round;
1038
  animation: progress 1s ease-out forwards;
1039
}
1040

    
1041
@keyframes progress {
1042
  0% {
1043
    stroke-dasharray: 0 100;
1044
  }
1045
}
1046

    
1047
.circular-chart.publications .circle {
1048
  stroke: var(--publication-color);
1049
}
1050

    
1051
.circular-chart.datasets .circle {
1052
  /*stroke: #BB9CE6;*/
1053
  stroke: var(--dataset-color);
1054
}
1055

    
1056
.circular-chart.software .circle {
1057
  stroke: var(--software-color);
1058
}
1059

    
1060
.circular-chart.other .circle {
1061
  stroke: var(--other-color);
1062
}
1063

    
1064
.percentage {
1065
  fill: #666;
1066
  font-family: sans-serif;
1067
  font-size: 0.5em;
1068
  text-anchor: middle;
1069
}
1070

    
1071
/*********************************/
1072

    
1073
/********* MAP ********/
1074

    
1075
.publicationMapControlLabel {
1076
  background-color: var(--publication-background-color) !important;
1077
  border: 1px solid var(--publication-color);
1078
}
1079

    
1080
.datasetMapControlLabel {
1081
  background-color: var(--dataset-background-color) !important;
1082
  border: 1px solid var(--dataset-color);
1083
}
1084

    
1085
.repositoryMapControlLabel {
1086
  background-color: var(--repository-background-color) !important;
1087
  border: 1px solid var(--repository-color);
1088
}
1089

    
1090
.journalMapControlLabel {
1091
  background-color: var(--journal-background-color) !important;
1092
  border: 1px solid var(--journal-color);
1093
}
1094

    
1095
/*********************************/
1096

    
1097
/********* MENU ********/
1098

    
1099
.uk-navbar-dropdown {
1100
  width: 280px;
1101
  padding: 25px 0px;
1102
}
1103

    
1104
.uk-navbar-dropdown-nav > li {
1105
  padding: 0px 25px;
1106
}
1107

    
1108
.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover {
1109
  color: #212121;
1110
}
1111

    
1112
.uk-navbar-dropdown-nav > li:hover {
1113
  color: #212121;
1114
  background: var(--primary-color-background) 0% 0% no-repeat padding-box;
1115
  opacity: 1;
1116
}
1117

    
1118

    
1119
/*********************************/
1120

    
1121

    
1122
/**************** OFF-Canvas menu ****************/
1123

    
1124
.custom-offcanvas-close {
1125
  position: relative;
1126
  right: 0;
1127
  top: 0;
1128
}
1129

    
1130
.uk-offcanvas-bar-light {
1131
  text-transform: uppercase;
1132
}
1133

    
1134
.uk-offcanvas-bar-light {
1135
  position: absolute;
1136
  top: 0;
1137
  bottom: 0;
1138
  left: -270px;
1139
  box-sizing: border-box;
1140
  width: 270px;
1141
  padding: 20px 20px;
1142
  background: #fff;
1143
  overflow-y: auto;
1144
  -webkit-overflow-scrolling: touch;
1145
}
1146

    
1147
.uk-nav-sub a {
1148
  padding: 2px 15px;
1149
}
1150

    
1151
.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a {
1152
  color: #333;
1153
}
1154

    
1155
.uk-nav-default .uk-nav-sub a:hover {
1156
  color: var(--secondary-color);
1157
}
1158

    
1159
.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover,
1160
.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus,
1161
.uk-offcanvas-bar-light .uk-nav-default > li > a:active {
1162
  color: var(--secondary-color);
1163
}
1164

    
1165
.uk-offcanvas-bar-animation {
1166
  transition: left 0.3s ease-out;
1167
}
1168

    
1169
@media (min-width: 960px) {
1170
  .uk-offcanvas-bar-light {
1171
    left: -350px;
1172
    width: 350px;
1173
    padding: 40px 40px;
1174
  }
1175
}
1176

    
1177
.uk-offcanvas-flip .uk-offcanvas-bar-light {
1178
  left: auto;
1179
  right: -270px;
1180
}
1181

    
1182
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
1183
  transition-property: right;
1184
}
1185

    
1186
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
1187
  left: auto;
1188
  right: 0;
1189
}
1190

    
1191
@media (min-width: 960px) {
1192
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
1193
    right: -350px;
1194
  }
1195
}
1196

    
1197
.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
1198
  left: auto;
1199
  right: 0;
1200
}
1201

    
1202
.uk-offcanvas-reveal .uk-offcanvas-bar-light {
1203
  left: 0;
1204
}
1205

    
1206
.uk-open > .uk-offcanvas-bar-light {
1207
  left: 0;
1208
}
1209

    
1210
.uk-close::after {
1211
  opacity: 0 !important;
1212
  color: #fff;
1213
  content: '';
1214
  font-family: "Material Icons";
1215
}
1216

    
1217
/********************************************/
1218

    
1219

    
1220
/********* METHODOLOGY ********/
1221

    
1222
/********* Terminology ********/
1223

    
1224
.terminologySection table {
1225
  font-size: 14px;
1226
  background-color: #FFFFFF;
1227
  width:100%;
1228
  table-layout: fixed;
1229
  overflow-wrap: break-word;
1230
}
1231

    
1232
.terminologySection table th {
1233
  width: 20%;
1234
}
1235

    
1236
.terminologySection table th, .terminologySection table td {
1237
  border: 1px solid #DEDEDE;
1238
  padding: 25px 40px;
1239
  vertical-align: top;
1240
  text-align: start;
1241
}
1242

    
1243
.terminologySection table th.important {
1244
  background-color: var(--primary-color-background);
1245
}
1246

    
1247
.terminologySection ul.portal-circle {
1248
  list-style: none;
1249
  padding-left: 40px;
1250
  font-family: "Open Sans", sans-serif;
1251
}
1252

    
1253
.terminologySection ul.portal-circle li {
1254
  margin: 0 0 2px 0;
1255
  position: relative;
1256
}
1257

    
1258
.terminologySection ul.portal-circle li:before {
1259
  content: "";
1260
  border: 5px var(--primary-color) solid !important;
1261
  border-radius: 50px;
1262
  line-height: 21px;
1263
  margin-left: -20px;
1264
  position: absolute;
1265
  top: 7px;
1266
}
1267

    
1268
@media only screen and (max-width: 959px) {
1269
  /*.terminologySection table th {*/
1270
    /*width: 50%;*/
1271
  /*}*/
1272

    
1273
  .terminologySection ul.portal-circle {
1274
    padding-left: 20px;
1275
  }
1276
}
1277

    
1278
/********* Overview ********/
1279

    
1280
@media only screen and (min-width: 640px) {
1281
  .how .first > div:first-child {
1282
    position: relative;
1283
  }
1284

    
1285
  .how .first > div:first-child:after {
1286
    content: "we";
1287
    text-align: center;
1288
    padding-bottom: 5%;
1289
    position: absolute;
1290
    background-image: url("../img/methodology/arrows/1.svg");
1291
    right: -21%;
1292
    top: 33%;
1293
    width: 20%;
1294
    background-size: contain;
1295
    background-repeat: no-repeat;
1296
    background-position: bottom center;
1297
  }
1298

    
1299
  .how .second > div:first-child {
1300
    position: relative;
1301
    padding: 0 22% 0 22%;
1302
  }
1303

    
1304
  .how .second > div:first-child:after {
1305
    content: "and";
1306
    text-align: center;
1307
    padding-bottom: 5%;
1308
    position: absolute;
1309
    background-image: url("../img/methodology/arrows/2.svg");
1310
    right: -10%;
1311
    top: 31%;
1312
    width: 30%;
1313
    background-size: contain;
1314
    background-repeat: no-repeat;
1315
    background-position: bottom center;
1316
  }
1317

    
1318
  .how .third {
1319
    position:  relative;
1320
  }
1321

    
1322
  .how .third > div:first-child {
1323
    padding: 0 12% 0 12%;
1324
  }
1325

    
1326
  .how .third:after {
1327
    content: "on which";
1328
    padding-right: 30%;
1329
    padding-top: 5%;
1330
    padding-bottom: 5%;
1331
    position: absolute;
1332
    background-image: url("../img/methodology/arrows/3.svg");
1333
    bottom: 6%;
1334
    left: 6%;
1335
    transform: translateY(100%);
1336
    width: 55%;
1337
    background-size: contain;
1338
    background-repeat: no-repeat;
1339
    background-position: center;
1340
  }
1341

    
1342
  .how .fourth {
1343
    padding: 10% 3% 0 3%;
1344
  }
1345

    
1346
  .how .fourth > div:first-child {
1347
    position:  relative;
1348
    padding: 0 15% 0 15%;
1349
  }
1350

    
1351
  .how .fourth> div:first-child:after {
1352
    content: "and";
1353
    text-align: center;
1354
    padding-bottom: 5%;
1355
    position: absolute;
1356
    background-image: url("../img/methodology/arrows/4.svg");
1357
    left: -18%;
1358
    top: 35%;
1359
    width: 30%;
1360
    background-size: contain;
1361
    background-repeat: no-repeat;
1362
    background-position: bottom center;
1363
  }
1364

    
1365
  .how .fifth {
1366
    padding: 10% 2% 0 2%;
1367
  }
1368

    
1369
  .how .fifth > div:first-child {
1370
    position:  relative;
1371
  }
1372

    
1373
  .how .fifth > div:first-child:after {
1374
    content: "We";
1375
    text-align: center;
1376
    padding-bottom: 5%;
1377
    position: absolute;
1378
    background-image: url("../img/methodology/arrows/5.svg");
1379
    left: -35%;
1380
    top: 36%;
1381
    width: 30%;
1382
    background-size: contain;
1383
    background-repeat: no-repeat;
1384
    background-position: bottom center;
1385
  }
1386

    
1387
  .how .sixth {
1388
    padding: 10% 5% 0 0;
1389
  }
1390

    
1391
  .how .sixth > div:first-child {
1392
    padding: 0 15% 0 15%;
1393
  }
1394

    
1395
  .how .final {
1396
    padding: 10% 20% 0 20%;
1397
  }
1398

    
1399
  .how .final > div:first-child {
1400
    position: relative;
1401
  }
1402

    
1403
  .how .final img {
1404
    display: block;
1405
    margin-left: auto;
1406
    margin-right: auto;
1407
  }
1408

    
1409
  .how .final > div:first-child:before {
1410
    content: "";
1411
    position: absolute;
1412
    background-image: url("../img/methodology/arrows/6.svg");
1413
    left: -20%;
1414
    /*top: -20%;*/
1415
    /*height: 70%;*/
1416
    top: -8%;
1417
    height: 42%;
1418
    /*width: 30%;*/
1419
    width: 34%;
1420
    background-size: contain;
1421
    background-repeat: no-repeat;
1422
    background-position: bottom center;
1423
  }
1424

    
1425
  .how .final > div:first-child:after {
1426
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1427
    position: absolute;
1428
    background-image: url("../img/methodology/circle.png");
1429
    /*right: -220px;*/
1430
    /*top: -20%;*/
1431
    right: -203px;
1432
    top: -8%;
1433
    width: 300px;
1434
    padding: 8% 0 5% 220px;
1435
    background-size: contain;
1436
    background-repeat: no-repeat;
1437
    background-position: bottom center;
1438
  }
1439
}
1440

    
1441
@media only screen and (min-width: 960px) {
1442
  .how .third:after {
1443
    bottom: -6%;
1444
  }
1445
}
1446

    
1447
@media only screen and (min-width: 1200px) {
1448
  .how .third:after {
1449
    bottom: -10%;
1450
    left: 25%;
1451
    width: 25%;
1452
  }
1453
}
1454

    
1455
@media only screen and (max-width: 639px) {
1456
  .how .first {
1457
    position: relative;
1458
    padding-bottom: 30%;
1459
  }
1460

    
1461
  .how .first:after {
1462
    content: "we";
1463
    text-align: center;
1464
    padding: 25px 105px 25px 0;
1465
    position: absolute;
1466
    background-image: url("../img/methodology/arrows/3.svg");
1467
    /*left: 26%;*/
1468
    left: 33%;
1469
    top: 72%;
1470
    background-size: contain;
1471
    background-repeat: no-repeat;
1472
    background-position: center;
1473
  }
1474

    
1475
  .how .second {
1476
    position: relative;
1477
    padding: 0 15% 30% 15%;
1478
  }
1479

    
1480
  .how .second:after {
1481
    content: "and";
1482
    text-align: center;
1483
    padding: 25px 105px 25px 0;
1484
    position: absolute;
1485
    background-image: url("../img/methodology/arrows/3.svg");
1486
    /*left: 25%;*/
1487
    left: 32%;
1488
    top: 70%;
1489
    background-size: contain;
1490
    background-repeat: no-repeat;
1491
    background-position: center;
1492
  }
1493

    
1494
  .how .third {
1495
    position:  relative;
1496
    padding: 0 5% 30% 5%;
1497
  }
1498

    
1499
  .how .third:after {
1500
    content: "on which";
1501
    text-align: center;
1502
    padding: 25px 105px 25px 0;
1503
    position: absolute;
1504
    background-image: url("../img/methodology/arrows/3.svg");
1505
    /*left: 17%;*/
1506
    left: 27%;
1507
    top: 75%;
1508
    background-size: contain;
1509
    background-repeat: no-repeat;
1510
    background-position: center;
1511
  }
1512

    
1513
  .how .fourth {
1514
    position:  relative;
1515
    padding: 0 0 30% 0;
1516
  }
1517

    
1518
  .how .fourth > div:first-child {
1519
    padding: 0 10% 0 10%;
1520
  }
1521

    
1522
  .how .fourth:after {
1523
    content: "and";
1524
    text-align: center;
1525
    padding: 25px 105px 25px 0;
1526
    position: absolute;
1527
    background-image: url("../img/methodology/arrows/3.svg");
1528
    /*left: 26%;*/
1529
    left: 32%;
1530
    top: 79%;
1531
    background-size: contain;
1532
    background-repeat: no-repeat;
1533
    background-position: center;
1534
  }
1535

    
1536
  .how .fifth {
1537
    position:  relative;
1538
    padding: 0 2% 30% 2%;
1539
  }
1540

    
1541
  .how .fifth:after {
1542
    content: "We";
1543
    text-align: center;
1544
    padding: 25px 105px 25px 0;
1545
    position: absolute;
1546
    background-image: url("../img/methodology/arrows/3.svg");
1547
    /*left: 27%;*/
1548
    left: 33%;
1549
    top: 76%;
1550
    background-size: contain;
1551
    background-repeat: no-repeat;
1552
    background-position: center;
1553
  }
1554

    
1555
  .how .sixth {
1556
    padding: 0 5% 30% 0;
1557
  }
1558

    
1559
  .how .sixth > div:first-child {
1560
    padding: 0 15% 0 15%;
1561
  }
1562

    
1563
  .how .final {
1564
    padding: 20% 0 20% 0;
1565
  }
1566

    
1567
  .how .final > div:first-child {
1568
    position: relative;
1569
  }
1570

    
1571
  .how .final > div:first-child:before {
1572
    content: "";
1573
    position: absolute;
1574
    background-image: url("../img/methodology/arrows/6.svg");
1575
    left: 32%;
1576
    /*top: -80%;*/
1577
    /*height: 70%;*/
1578
    top: -37%;
1579
    height: 33%;
1580
    width: 30%;
1581
    background-size: contain;
1582
    background-repeat: no-repeat;
1583
    background-position: center;
1584
  }
1585

    
1586
  .how .final > div:first-child:after {
1587
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1588
    position: absolute;
1589
    background-image: url("../img/methodology/circle.png");
1590
    /*left: -62%;*/
1591
    /*top: 85%;*/
1592
    left: -52%;
1593
    top: 91%;
1594
    width: 300px;
1595
    padding: 12% 0 0 70%;
1596
    background-size: contain;
1597
    background-repeat: no-repeat;
1598
    background-position: center;
1599
  }
1600
}
1601

    
1602

    
1603
/*********************************/
1604

    
1605
/********* MOBILE ********/
1606
@media only screen and (max-width: 960px) {
1607

    
1608
  body {
1609
    background: #F9FBFC;
1610
  }
1611

    
1612
  ::-webkit-scrollbar {
1613
    width: 0px;
1614
    background: transparent; /* make scrollbar transparent */
1615
  }
1616

    
1617
  .uk-navbar-container:not(.uk-navbar-transparent) {
1618
    background: #F9FBFC;
1619
  }
1620

    
1621
  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
1622
    min-height: 60px;
1623
  }
1624

    
1625
  .uk-logo > img {
1626
    max-height: 125px;
1627
  }
1628

    
1629
  .uk-navbar-toggle-icon {
1630
    color: var(--primary-color);
1631
  }
1632

    
1633
  .searchForCountry.uk-search.uk-search-default {
1634
    width: 100%;
1635
    background: #FFFFFF 0% 0% no-repeat padding-box;
1636
    border: 1px solid #C7C7C7;
1637
    border-radius: 4px;
1638
  }
1639

    
1640
  .searchForCountry.uk-search .uk-search-icon {
1641
    color: #4687f4;
1642
    z-index: 10;
1643
  }
1644

    
1645
  .progress {
1646
    width: 100%;
1647
  }
1648

    
1649
  .overviewMobile .number.big {
1650
    font-size: 24px;
1651
  }
1652

    
1653
  .overviewMobile {
1654
    font-size: 12px;
1655
  }
1656

    
1657
  .goToDetailedViewLink {
1658
    text-align: center;
1659
    margin-top: 0px;
1660
  }
1661

    
1662
  .leadingOpenScienceCard {
1663
    font-size: 10px;
1664
  }
1665

    
1666
  .leadingOpenScienceCard .number {
1667
    font-size: 14px;
1668
  }
1669

    
1670
  .leadingOpenScienceCard .countryName {
1671
    font-size: 16px;
1672
    font-weight: bold;
1673
  }
1674

    
1675
  .footerSection {
1676
    text-align: center;
1677
    background-color: #fff;
1678
  }
1679

    
1680
  .footerImage {
1681
    opacity: 0.8;
1682
    float: none;
1683
    margin-top: 0px;
1684
  }
1685

    
1686
  [class*="uk-navbar-dropdown-bottom"] {
1687
    margin-top: -5px;
1688
    left: 200px !important;
1689
  }
1690

    
1691
  .tm-header-mobile .uk-nav-divider {
1692
    margin: 15px 0;
1693
  }
1694

    
1695
  .tm-header-mobile .smallHeader {
1696
    background: #FFFFFF 0% 0% no-repeat padding-box;
1697
    box-shadow: 0px 3px 6px #00000029;
1698
    opacity: 1;
1699
  }
1700

    
1701
  .continentPageEntitiesOverview .number.big {
1702
    font-size: 24px;
1703
  }
1704

    
1705
  .continentPageEntitiesOverview .entityName {
1706
    font-size: 16px;
1707
    font-weight: 600;
1708
  }
1709

    
1710
  .uk-tab {
1711
    flex-wrap: nowrap;
1712
    overflow-x: auto;
1713
    background: #fff;
1714
    padding-bottom: 15px;
1715
    padding-top: 10px;
1716
    margin-right: -20px;
1717
  }
1718

    
1719
  .entitiesContainer {
1720
    margin-left: 0px;
1721
    height: 200px;
1722
  }
1723

    
1724
  hr.entitiesDivider {
1725
    margin-left: -15px;
1726
    margin-right: -15px;
1727
  }
1728

    
1729
  .dataContainer {
1730
    border: none;
1731
  }
1732

    
1733
  .tabContent {
1734
    padding: 30px 0px;
1735
  }
1736

    
1737
  .dataContainer .tabContent {
1738
    padding: 0px;
1739
  }
1740

    
1741
  .autocomplete-container .input-container input {
1742
    padding: 0 15px 0 40px !important;
1743
  }
1744
}
1745

    
(3-3/4)