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-color: #263C7E;
15
  /*--publication-background-color: #f8d5e3;*/
16
  --publication-background-color: #8197D9;
17
  /*--dataset-color: #A98BD4;*/
18
  --dataset-color: #916AC8;
19
  --dataset-background-color: #e2daf0;
20
  /*--software-color: #C2155A;*/
21
  --software-color: #9C0D38;
22
  --software-background-color: #F2D0DE;
23
  /*--other-color: #00CCCC;*/
24
  --other-color: #17BEBB;
25
  --other-background-color: #CCF4F4;
26

    
27
  /*--repository-color: #708AA5;*/
28
  /*--repository-background-color: #ADD3E0;*/
29
  --repository-color: #639C66;
30
  --repository-background-color: #D4ECD6;
31
  --journal-color: #FFCE4E;
32
  --journal-background-color: #FBE8B1;
33
  --policies-color: #639C66;
34
  --policies-background-color: #D4ECD6;
35

    
36
  --muted-color: #4d4d4d;
37
}
38

    
39
html {
40
  color: #292929;
41
}
42

    
43
body {
44
  font: 400 14px/19px 'Open Sans';
45
}
46

    
47
h1, h2, h3, h4, h5, h6 {
48
  font-family: 'Open Sans', sans-serif;
49
}
50

    
51
h3 {
52
  font-weight: 600;
53
  font-size: 24px;
54
}
55

    
56
.uk-h6, h6 {
57
  font-size: 18px;
58
  font-weight: 400;
59
}
60

    
61
.uk-flex-space-between {
62
  justify-content: space-between;
63
}
64

    
65
.uk-container-large {
66
  max-width: 1600px;
67
}
68

    
69
.uk-container-expand {
70
  max-width: none;
71
}
72

    
73
.uk-container-center {
74
  margin-left: auto;
75
  margin-right: auto;
76
}
77

    
78
.uk-navbar-nav > li > a, .uk-navbar-nav > li.uk-active > a {
79
  font-size: 14px;
80
  font-weight: bold;
81
  letter-spacing: 0px;
82
  color: #000;
83
}
84

    
85
.large-beta-indication {
86
  height: 83px;
87
  position: fixed;
88
  top: 0;
89
  left: 0;
90
  z-index: 10000;
91
}
92

    
93
.medium-beta-indication-nonFixed {
94
  height: 65px;
95
  position: absolute;
96
  top: 0;
97
  left: 0;
98
  z-index: 10000;
99
}
100

    
101
.medium-beta-indication-fixed {
102
  height: 65px;
103
  position: fixed;
104
  top: 0;
105
  left: 0;
106
  z-index: 10000;
107
}
108

    
109
.uk-text-muted {
110
  color: var(--muted-color) !important;
111
}
112

    
113
/*#sect-overview, #sect-tabs {*/
114
  /*padding: 20px 0;*/
115
/*}*/
116

    
117
.greySection {
118
  /*background-color: #F0F0F0;*/
119
  background-color: #F9FBFC;
120
}
121

    
122
a {
123
  color: var(--link-color);
124
}
125

    
126
a:hover, a:focus, a:active {
127
  color: var(--link-hover-color);
128
}
129

    
130
.mapContainer {
131
  /*background: #F7F7F7 0% 0% no-repeat padding-box;*/
132
  /*border: 1px solid #E0E0E0;*/
133
  /*opacity: 0.4;*/
134
  /*padding: 15px;*/
135
  position: relative;
136
  height: 100%;
137
}
138

    
139
.mapContainerEmbed {
140
  height: 100%;
141
}
142

    
143
.map {
144
  /*height: 398px;*/
145
  /*border: 1px solid #707070;*/
146
  /*margin: 15px;*/
147
  position: absolute;
148
  height: 88%;
149
  width: 100%;
150
}
151

    
152
.mapControls {
153
  /*position: absolute;*/
154
  bottom: 20px;
155
}
156

    
157
.uk-nav-label {
158
  width: 12px;
159
  height: 12px;
160
  display: inline-block;
161
  vertical-align: -1px;
162
  margin-right: 8px;
163
  border-radius: 50%;
164
}
165

    
166
.uk-nav-horizontal li {
167
  display: inline-block;
168
}
169

    
170
.uk-nav > li > a {
171
  padding: 5px 15px;
172
}
173

    
174
.uk-nav-side > li > a {
175
  color: #444;
176
}
177

    
178
.mapControls .text {
179
  opacity: 0.5;
180
}
181

    
182
.mapControls .text.active {
183
  opacity: 1;
184
}
185

    
186
.dark-blue-box {
187
  background: #002D60 0% 0% no-repeat padding-box;
188
  border: 1px solid #707070;
189
  border-radius: 2px;
190
  opacity: 1;
191
  color: #fff;
192
}
193

    
194
.dark-blue-box a, .dark-blue-box a:hover, .dark-blue-box a:focus {
195
  color: #fff;
196
}
197

    
198
.dark-grey-box {
199
  background: #2A2D34 0% 0% no-repeat padding-box;
200
  border: 1px solid #707070;
201
  border-radius: 2px;
202
  opacity: 1;
203
  color: #fff;
204
}
205

    
206
.dark-grey-box h3 {
207
  color: #fff;
208
}
209

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

    
214
.openaire-symbol-wrapper {
215
  background-color: #fff;
216
  border-radius: 50%;
217
  padding: 12px 10px 17px 13px;
218
}
219

    
220

    
221
.infoBox {
222
  /*font-weight: 300;*/
223
  /*font-size: 15px;*/
224

    
225
  background: #FFFFFF 0% 0% no-repeat padding-box;
226
  box-shadow: 0px 2px 6px #00000038;
227
  border-radius: 3px;
228
  opacity: 1;
229
}
230

    
231
.infoBox h3 {
232
  font-weight: bold;
233
}
234

    
235
.infoBox ul {
236
  padding-left: 18px;
237
}
238

    
239
.infoBox ul li {
240
  margin-bottom: 20px;
241
  letter-spacing: 0px;
242
  line-height: 27px;
243
}
244

    
245
.dark-blue-box h3 {
246
  color: #fff;
247
}
248

    
249
a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:focus  {
250
  color: #fff;
251
}
252

    
253
.greyBoldDivider {
254
  border: 1px solid #E0E0E0;
255
}
256

    
257
.numbers .number {
258
  font-size: 16px;
259
}
260

    
261
div.indicator {
262
  display: flex;
263
}
264

    
265
div.indicator span {
266
  padding-right: 10px;
267
}
268

    
269
.primary {
270
  color: var(--primary-color);
271
}
272

    
273
.publications {
274
  color: var(--publication-color);
275
}
276

    
277
.datasets {
278
  color: var(--dataset-color);
279
}
280

    
281
.software {
282
  color: var(--software-color);
283
}
284

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

    
289
.repositories {
290
  color: var(--repository-color);
291
}
292

    
293
.journals {
294
  color: var(--journal-color);
295
}
296

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

    
301
.indicatorCards {
302
  font-size: 13px;
303
}
304

    
305
.indicatorCards .md-card {
306
  box-shadow: 0px 2px 6px #00000038;
307
  border: 1px solid #E0E0E0;
308
  border-radius: 3px;
309
}
310

    
311
/********* Mock chart for country **********/
312
.epc_chart {
313
  display: block;
314
  position: relative;
315
}
316

    
317
.epc_chart_text {
318
  position: absolute;
319
  top: 0;
320
  left: 0;
321
  right: 0;
322
  bottom: 0;
323
  text-align: center;
324
  font: 400 20px/110px Roboto,sans-serif;
325
}
326

    
327
/********************************************/
328

    
329
/*.md-btn-primary {*/
330
  /*background: #1F73F7 0% 0% no-repeat padding-box;*/
331
  /*box-shadow: 0px 3px 6px #00000029;*/
332
  /*border-radius: 26px;*/
333
  /*opacity: 1;*/
334
  /*text-align: left;*/
335
  /*font: 14px/19px Open Sans;*/
336
  /*font-weight: 400;*/
337
  /*letter-spacing: 0;*/
338
  /*color: #FFFFFF;*/
339
  /*text-transform: none;*/
340
  /*!*padding: 10px 30px;*!*/
341
/*}*/
342

    
343
.md-btn {
344
  border-radius: 23px;
345
  padding: 7px 25px;
346
  font: 500 14px / 31px 'Open Sans', sans-serif !important;
347
}
348

    
349
.md-btn-primary {
350
  background: var(--primary-color) 0% 0% no-repeat padding-box;
351
  box-shadow: 0px 3px 6px #00000029;
352
  border-radius: 23px;
353
  opacity: 1;
354
  text-align: left;
355
  font: 14px/19px Open Sans;
356
  font-weight: 400;
357
  letter-spacing: 0;
358
  color: #FFFFFF;
359
  text-transform: none;
360
  /*padding: 10px 30px;*/
361
}
362

    
363
.md-btn-primary:hover, .md-btn-primary:focus, .md-btn-primary:active {
364
  background: var(--secondary-color) 0% 0% no-repeat padding-box;
365
}
366

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

    
382
.number {
383
  font-weight: bold;
384
}
385

    
386
#sect-tabs .uk-tab > li > a {
387
  text-transform: none;
388
}
389

    
390
.uk-tab > li.uk-active > a {
391
  border-bottom-color: var(--primary-color);
392
}
393

    
394
.uk-tab > li > a:hover, .uk-tab > li > a:focus {
395
  background: none;
396
  color: #212121;
397
  border-bottom-color: var(--secondary-color);
398
}
399

    
400
.uk-tab::before {
401
  border-bottom: none;
402
}
403

    
404
.dataContainer {
405
  background: #F9fbfc 0% 0% no-repeat padding-box;
406
  border: 1px solid #E0E0E0;
407
}
408

    
409
.tabContent {
410
  padding: 30px 50px;
411
}
412

    
413
.uk-tab {
414
  display: flex;
415
}
416

    
417
.uk-tab > li.uk-active > a {
418
  font-weight: bold;
419
}
420
/*.uk-tab-center.uk-tab {*/
421

    
422
  /*position: relative;*/
423
  /*right: 50%;*/
424
  /*border: none;*/
425
  /*float: right;*/
426

    
427
/*}*/
428

    
429
.uk-subnav-pill > .uk-active > a {
430
  /*background: #1F73F7;*/
431
  background: var(--primary-color);
432
}
433

    
434
.dataView.uk-subnav-pill > * > * {
435
  width: 16px;
436
  height: 16px;
437
  padding: 8px;
438
  border-radius: 50%;
439
  border: 1px solid;
440
  display: inline-block;
441
}
442

    
443
.tabContent hr {
444
  margin: 30px 0;
445
}
446

    
447
.dataContent {
448
  background-color: #FFFFFF;
449
  border: 1px solid #E0E0E0;
450
  padding: 30px;
451
}
452

    
453
.goToDetailedViewLink {
454
  margin-top: -50px;
455
}
456

    
457
.actionButtons a, .actionButtonsCountryPage a {
458
  color: #000000;
459
}
460

    
461
.actionButtons a i, .actionButtonsCountryPage a i {
462
  color: var(--primary-color);
463
}
464

    
465
.md-card .md-card-toolbar {
466
  /*height: 48px;*/
467
}
468

    
469
.infoBox.md-card .md-card-toolbar {
470
  /*height: 48px;*/
471
  background: transparent linear-gradient(115deg, var(--primary-color) 0%, var(--secondary-color) 100%) 0% 0% no-repeat padding-box;
472
  border-radius: 3px 3px 0px 0px;
473
  opacity: 1;
474
  padding: 16px 25px 0;
475
  color: #292929;
476
}
477

    
478
.infoBox.md-card .md-card-toolbar h3 {
479
  color: #fff;
480
  font-size: 16px;
481
}
482

    
483
.md-card .md-card-toolbar .md-card-toolbar-actions {
484
  padding-top: 15px;
485
}
486

    
487
.md-card .md-card-content {
488
  padding: 20px;
489
}
490

    
491
/*.uk-table td {*/
492
  /*border-bottom: 1px solid #e0e0e0;*/
493
/*}*/
494

    
495
.uk-table th {
496
  text-transform: none;
497
}
498

    
499

    
500
a.publicationsSubnav {
501
  color: var(--publication-color) !important;
502
}
503

    
504
.uk-subnav-pill > .uk-active > a.publicationsSubnav {
505
  background: var(--publication-background-color);
506
}
507

    
508
a.datasetsSubnav {
509
  color: var(--dataset-color) !important;
510
}
511

    
512
.uk-subnav-pill > .uk-active > a.datasetsSubnav {
513
  background: var(--dataset-background-color);
514
}
515

    
516
a.softwareSubnav {
517
  color: var(--software-color) !important;
518
}
519

    
520
.uk-subnav-pill > .uk-active > a.softwareSubnav {
521
  background: var(--software-background-color);
522
}
523

    
524
a.otherSubnav {
525
  color: var(--other-color) !important;
526
}
527

    
528
.uk-subnav-pill > .uk-active > a.otherSubnav {
529
  background: var(--other-background-color);
530
}
531

    
532
/*a.publicationsSubnav, a.datasetsSubnav, a.softwareSubnav, a.otherSubnav {*/
533
  /*width: 16px;*/
534
  /*height: 16px;*/
535
  /*padding: 8px;*/
536
  /*!*border-radius: 50%;*!*/
537
  /*!*border: 1px solid;*!*/
538
  /*display: inline-block;*/
539
/*}*/
540

    
541
a.publicationsSubnav img, a.datasetsSubnav img, a.softwareSubnav img, a.otherSubnav img {
542
  vertical-align: baseline;
543
}
544

    
545

    
546
/**************** HEADER ****************/
547

    
548
/*.tm-header .uk-navbar-container {*/
549
  /*padding-top: 10px;*/
550
  /*padding-bottom: 15px;*/
551
/*}*/
552

    
553
.tm-header .uk-navbar-left {
554
  position: relative;
555
  z-index: 9999 !important;
556
}
557

    
558
.navbar .brand, .uk-logo {
559
  font-size: 24px;
560
  font-family: 'Open Sans';
561
  color: #666;
562
  text-decoration: none;
563
}
564

    
565
.tm-header .uk-logo {
566
  position: relative;
567
  z-index: 1000 !important;
568
  /*padding-left: 100px;*/
569
}
570

    
571
.uk-logo > img {
572
  max-height: 70px;
573
}
574

    
575
/********************************************/
576

    
577
/**************** FOOTER ****************/
578

    
579
.footerLink {
580
  color: #000;
581
  text-decoration: underline;
582
}
583

    
584
.footerImage {
585
  opacity: 0.8;
586
  float: left;
587
  margin-top: 7px;
588
}
589

    
590
/********************************************/
591

    
592

    
593
#sidebar_main {
594
  position: fixed;
595
  right: 0;
596
  top:0;
597
  bottom:0;
598
  overflow-x: hidden;
599
  overflow-y: auto;
600
  /*background-color: #222;*/
601
  /*width: 260px;*/
602
  width: 20%;
603
  z-index:1;
604
}
605

    
606
#left-col {
607
  position: fixed;
608
  left: 0;
609
  top:0;
610
  bottom:0;
611
  overflow-x: hidden;
612
  overflow-y: auto;
613
  background-color: #222;
614
  width: 260px;
615
  z-index:1;
616
}
617
.bar-wrap {
618
  padding: 2rem;
619
}
620
#right-col {
621
  margin-left: 260px;
622
}
623

    
624

    
625

    
626
/*#sc-sidebar-main {*/
627

    
628
  /*position: fixed;*/
629
  /*top: 48px;*/
630
  /*left: 0;*/
631
  /*bottom: 0;*/
632
  /*-webkit-box-sizing: border-box;*/
633
  /*box-sizing: border-box;*/
634
  /*width: 260px;*/
635
  /*z-index: 1300;*/
636
  /*border-right: 1px solid*/
637

    
638
  /*rgba(0,0,0,.08);*/
639

    
640
  /*background:*/
641

    
642
    /*#fff;*/
643
  /*display: -webkit-box;*/
644
  /*display: -ms-flexbox;*/
645
  /*display: flex;*/
646
  /*-webkit-box-orient: vertical;*/
647
  /*-webkit-box-direction: normal;*/
648
  /*-ms-flex-direction: column;*/
649
  /*flex-direction: column;*/
650

    
651
/*}*/
652

    
653
/*#sc-sidebar-main .uk-offcanvas-bar {*/
654

    
655
  /*padding: 0;*/
656

    
657
/*}*/
658

    
659
/*#sc-sidebar-main .uk-offcanvas-bar {*/
660

    
661
  /*top: 0;*/
662
  /*display: -webkit-box;*/
663
  /*display: -ms-flexbox;*/
664
  /*display: flex;*/
665
  /*-webkit-box-orient: vertical;*/
666
  /*-webkit-box-direction: normal;*/
667
  /*-ms-flex-direction: column;*/
668
  /*flex-direction: column;*/
669
  /*position: static;*/
670
  /*background: 0 0;*/
671
  /*-webkit-box-shadow: none;*/
672
  /*box-shadow: none;*/
673
  /*-webkit-transform: none;*/
674
  /*transform: none;*/
675
  /*overflow-x: hidden;*/
676
  /*overflow-y: visible;*/
677
  /*height: 100%;*/
678
  /*width: 260px;*/
679

    
680
/*}*/
681

    
682
/*#sc-page-wrapper {*/
683

    
684
  /*height: calc(100% - 48px);*/
685
  /*-webkit-box-flex: 1;*/
686
  /*-ms-flex: 1;*/
687
  /*flex: 1;*/
688

    
689
/*}*/
690

    
691
/*#sc-page-wrapper {*/
692

    
693
  /*padding-left: 260px;*/
694
  /*-webkit-transition: padding 140ms ease-out;*/
695
  /*transition: padding 140ms ease-out;*/
696

    
697
/*}*/
698

    
699

    
700

    
701

    
702
/********************************************/
703

    
704
/*.contentSectionContainer .md-card-content {*/
705
  /*max-height: 300px;*/
706
/*}*/
707

    
708
.contentSectionContainer .md-card-content img {
709
  height:  350px;
710
  width: 100%;
711
}
712

    
713
/*.contentSectionContainer .md-card-content {*/
714
  /*text-align: center;*/
715
/*}*/
716

    
717

    
718

    
719
.progress {
720
  height: 20px;
721
  /*margin-bottom: 20px;*/
722
  overflow: hidden;
723
  background-color: #f5f5f5;
724
  border-radius: 4px;
725
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
726
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
727
}
728

    
729
.progress {
730
  height: 12px;
731
  background-color: #e9ecee;
732
  background-image: none;
733
  box-shadow: none;
734
  filter: none;
735
}
736

    
737
.progress {
738
  /*margin-bottom: 10px;*/
739
}
740

    
741
.progress {
742
  /*margin-top: 3px;*/
743
  /*width: 85px;*/
744
  /*display: inline-block;*/
745
  width: 50%;
746
}
747

    
748
.progress-bar {
749

    
750
  float: left;
751
  width: 0;
752
  height: 100%;
753
  font-size: 12px;
754
  line-height: 20px;
755
  color: #fff;
756
  text-align: center;
757
  background-color: #337ab7;
758
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
759
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
760
  -webkit-transition: width .6s ease;
761
  -o-transition: width .6s ease;
762
  transition: width .6s ease;
763

    
764
}
765

    
766
.progress-bar {
767

    
768
  box-shadow: none;
769
  border-radius: 3px;
770
  background-color: #0090D9;
771
  background-image: none;
772
  -webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
773
  transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
774
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
775
  -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
776
  -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
777
  -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
778
  -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
779
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
780
  float: left;
781
  filter: none;
782

    
783
}
784

    
785
.progress-bar-publications {
786
  /*background-color: #F6C4D8;*/
787
  background-color: var(--publication-background-color);
788
  background-image: none;
789
}
790

    
791
.progress-bar-datasets {
792
  /*background-color: #D6CBEB;*/
793
  background-color: var(--dataset-background-color);
794
  background-image: none;
795
}
796

    
797
.progress-bar-repositories {
798
  /*background-color: #ADD3E0;*/
799
  background-color: var(--repository-background-color);
800
  background-image: none;
801
}
802

    
803
.progress-bar-journals {
804
  /*background-color: #FBE8B1;*/
805
  background-color: var(--journal-background-color);
806
  background-image: none;
807
}
808

    
809

    
810
/*.progress-bar-software {*/
811
  /*background-color: #F88306;*/
812
  /*background-image: none;*/
813
/*}*/
814

    
815
/*.progress-bar-otherProducts {*/
816
  /*background-color: #987CD6;*/
817
  /*background-image: none;*/
818
/*}*/
819

    
820

    
821
/**************** BREADCRUMB ****************/
822

    
823
.uk-breadcrumb > :last-child > * {
824
  color: var(--primary-color);
825
}
826

    
827
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
828
  content: ">";
829
}
830

    
831
/********************************************/
832

    
833
.small-flag-image {
834
  border: 2px solid #eee;
835
  border-radius: 100px;
836
}
837

    
838
.flag-image {
839
  border: 10px solid #eee;
840
  border-radius: 100px;
841
}
842

    
843

    
844
.demo-chart {
845
  /*max-height: 600px;*/
846
  height: 65vh;
847
}
848

    
849
/********* LOADERS *********/
850

    
851
.loader {
852
  color: var(--primary-color);
853
  margin: 25% auto;
854
}
855

    
856
.whiteFilm {
857
  background: #ffffff;
858
  z-index: 105;
859
  width: 100%;
860
  height: 100%;
861
  opacity: 0.7;
862
  position: absolute;
863
  top: 0;
864
  left: 0;
865

    
866
  display: flex;
867
  align-items: center;
868
}
869

    
870
.transparentFilm {
871
  background: transparent;
872
  z-index: 105;
873
  width: 100%;
874
  height: 100%;
875
  opacity: 0.7;
876
  position: absolute;
877
  top: 0;
878
  left: 0;
879

    
880
  display: flex;
881
  align-items: center;
882
}
883
/**************************/
884

    
885
.lastUpdateInfo {
886
  opacity: 0.4;
887
  color: #000;
888
  letter-spacing: 0px;
889
}
890

    
891
.entitiesContainer {
892
  height: 300px;
893
  display: flex;
894
  align-items: flex-end;
895
}
896

    
897
.publicationsColumn {
898
  /*background-color: #f181ae;*/
899
  background-color: var(--publication-color);
900
  box-shadow: 3px 3px 6px #00000029;
901
  opacity: 1;
902
  z-index: 10;
903
}
904

    
905
.publicationsDot {
906
  background-color: var(--publication-color);
907
  /*width: 50px;*/
908
  width: 35px;
909
  height: 33px;
910
  border-radius: 50%;
911
}
912

    
913
.datasetsColumn {
914
  background-color: var(--dataset-color);
915
  box-shadow: 3px 3px 6px #00000029;
916
  opacity: 1;
917
  z-index: 8;
918
}
919

    
920
.datasetsDot {
921
  background-color: var(--dataset-color);
922
  /*width: 50px;*/
923
  width: 35px;
924
  height: 33px;
925
  border-radius: 50%;
926
}
927

    
928
.softwareColumn {
929
  background-color: var(--software-color);
930
  box-shadow: 3px 3px 6px #00000029;
931
  opacity: 1;
932
  z-index: 6;
933
}
934

    
935
.softwareDot {
936
  background-color: var(--software-color);
937
  /*width: 50px;*/
938
  width: 35px;
939
  height: 33px;
940
  border-radius: 50%;
941
}
942

    
943
.otherColumn {
944
  background-color: var(--other-color);
945
  box-shadow: 3px 3px 6px #00000029;
946
  opacity: 1;
947
  z-index: 4;
948
}
949

    
950
.otherDot {
951
  background-color: var(--other-color);
952
  /*width: 50px;*/
953
  width: 35px;
954
  height: 33px;
955
  border-radius: 50%;
956
}
957

    
958
.entityColumnContent {
959
  color: #fff;
960
  width: 100%;
961
  height: 100%;
962
  display: flex;
963
  flex-direction: column;
964
  justify-content: center;
965
  text-align: center;
966
}
967

    
968
hr.entitiesDivider {
969
  border: 2px solid #B4B4B4;
970
  margin-left: -90px;
971
  margin-right: -50px;
972
  margin-top: 0px;
973
}
974

    
975
.entityLegendContent {
976
  display: flex;
977
  padding-right: 40px;
978

    
979
}
980

    
981

    
982

    
983

    
984
.countryPageHeader {
985
  display: flex;
986
  justify-content: space-between;
987
}
988

    
989

    
990
.chartCard.md-card {
991
  box-shadow: 1px 10px 12px #00000026;
992
  border: 1px solid #E0E0E0;
993
  border-radius: 5px;
994
}
995

    
996

    
997
/********* DONUT - CIRCLE ********/
998

    
999
.circular-chart {
1000
  display: block;
1001
  margin: 10px auto;
1002
  max-width: 80%;
1003
  /*max-height: 250px;*/
1004
  max-height: 110px;
1005
}
1006

    
1007
.circle-bg {
1008
  fill: none;
1009
  stroke: #eee;
1010
  stroke-width: 3.8;
1011
}
1012

    
1013
.circle {
1014
  fill: none;
1015
  /*stroke-width: 2.8;*/
1016
  stroke-width: 4.2;
1017
  stroke-linecap: round;
1018
  animation: progress 1s ease-out forwards;
1019
}
1020

    
1021
@keyframes progress {
1022
  0% {
1023
    stroke-dasharray: 0 100;
1024
  }
1025
}
1026

    
1027
.circular-chart.publications .circle {
1028
  stroke: var(--publication-color);
1029
}
1030

    
1031
.circular-chart.datasets .circle {
1032
  /*stroke: #BB9CE6;*/
1033
  stroke: var(--dataset-color);
1034
}
1035

    
1036
.circular-chart.software .circle {
1037
  stroke: var(--software-color);
1038
}
1039

    
1040
.circular-chart.other .circle {
1041
  stroke: var(--other-color);
1042
}
1043

    
1044
.percentage {
1045
  fill: #666;
1046
  font-family: sans-serif;
1047
  font-size: 0.5em;
1048
  text-anchor: middle;
1049
}
1050

    
1051
/*********************************/
1052

    
1053
/********* MAP ********/
1054

    
1055
.publicationMapControlLabel {
1056
  background-color: var(--publication-background-color) !important;
1057
  border: 1px solid var(--publication-color);
1058
}
1059

    
1060
.datasetMapControlLabel {
1061
  background-color: var(--dataset-background-color) !important;
1062
  border: 1px solid var(--dataset-color);
1063
}
1064

    
1065
.repositoryMapControlLabel {
1066
  background-color: var(--repository-background-color) !important;
1067
  border: 1px solid var(--repository-color);
1068
}
1069

    
1070
.journalMapControlLabel {
1071
  background-color: var(--journal-background-color) !important;
1072
  border: 1px solid var(--journal-color);
1073
}
1074

    
1075
/*********************************/
1076

    
1077
/********* MENU ********/
1078

    
1079
.uk-navbar-dropdown {
1080
  width: 280px;
1081
  padding: 25px 0px;
1082
}
1083

    
1084
.uk-navbar-dropdown-nav > li {
1085
  padding: 0px 25px;
1086
}
1087

    
1088
.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover {
1089
  color: #212121;
1090
}
1091

    
1092
.uk-navbar-dropdown-nav > li:hover {
1093
  color: #212121;
1094
  background: var(--primary-color-background) 0% 0% no-repeat padding-box;
1095
  opacity: 1;
1096
}
1097

    
1098

    
1099
/*********************************/
1100

    
1101

    
1102
/**************** OFF-Canvas menu ****************/
1103

    
1104
.custom-offcanvas-close {
1105
  position: relative;
1106
  right: 0;
1107
  top: 0;
1108
}
1109

    
1110
.uk-offcanvas-bar-light {
1111
  text-transform: uppercase;
1112
}
1113

    
1114
.uk-offcanvas-bar-light {
1115
  position: absolute;
1116
  top: 0;
1117
  bottom: 0;
1118
  left: -270px;
1119
  box-sizing: border-box;
1120
  width: 270px;
1121
  padding: 20px 20px;
1122
  background: #fff;
1123
  overflow-y: auto;
1124
  -webkit-overflow-scrolling: touch;
1125
}
1126

    
1127
.uk-nav-sub a {
1128
  padding: 2px 15px;
1129
}
1130

    
1131
.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a {
1132
  color: #333;
1133
}
1134

    
1135
.uk-nav-default .uk-nav-sub a:hover {
1136
  color: var(--secondary-color);
1137
}
1138

    
1139
.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover,
1140
.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus,
1141
.uk-offcanvas-bar-light .uk-nav-default > li > a:active {
1142
  color: var(--secondary-color);
1143
}
1144

    
1145
.uk-offcanvas-bar-animation {
1146
  transition: left 0.3s ease-out;
1147
}
1148

    
1149
@media (min-width: 960px) {
1150
  .uk-offcanvas-bar-light {
1151
    left: -350px;
1152
    width: 350px;
1153
    padding: 40px 40px;
1154
  }
1155
}
1156

    
1157
.uk-offcanvas-flip .uk-offcanvas-bar-light {
1158
  left: auto;
1159
  right: -270px;
1160
}
1161

    
1162
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
1163
  transition-property: right;
1164
}
1165

    
1166
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
1167
  left: auto;
1168
  right: 0;
1169
}
1170

    
1171
@media (min-width: 960px) {
1172
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
1173
    right: -350px;
1174
  }
1175
}
1176

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

    
1182
.uk-offcanvas-reveal .uk-offcanvas-bar-light {
1183
  left: 0;
1184
}
1185

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

    
1190
.uk-close::after {
1191
  opacity: 0 !important;
1192
  color: #fff;
1193
  content: '';
1194
  font-family: "Material Icons";
1195
}
1196

    
1197
/********************************************/
1198

    
1199

    
1200
/********* METHODOLOGY ********/
1201

    
1202
/********* Terminology ********/
1203

    
1204
.terminologySection table {
1205
  font-size: 14px;
1206
  background-color: #FFFFFF;
1207
  width:100%;
1208
  table-layout: fixed;
1209
  overflow-wrap: break-word;
1210
}
1211

    
1212
.terminologySection table th {
1213
  width: 20%;
1214
}
1215

    
1216
.terminologySection table th, .terminologySection table td {
1217
  border: 1px solid #DEDEDE;
1218
  padding: 25px 40px;
1219
  vertical-align: top;
1220
  text-align: start;
1221
}
1222

    
1223
.terminologySection table th.important {
1224
  background-color: var(--primary-color-background);
1225
}
1226

    
1227
.terminologySection ul.portal-circle {
1228
  list-style: none;
1229
  padding-left: 40px;
1230
  font-family: "Open Sans", sans-serif;
1231
}
1232

    
1233
.terminologySection ul.portal-circle li {
1234
  margin: 0 0 2px 0;
1235
  position: relative;
1236
}
1237

    
1238
.terminologySection ul.portal-circle li:before {
1239
  content: "";
1240
  border: 5px var(--primary-color) solid !important;
1241
  border-radius: 50px;
1242
  line-height: 21px;
1243
  margin-left: -20px;
1244
  position: absolute;
1245
  top: 7px;
1246
}
1247

    
1248
@media only screen and (max-width: 959px) {
1249
  /*.terminologySection table th {*/
1250
    /*width: 50%;*/
1251
  /*}*/
1252

    
1253
  .terminologySection ul.portal-circle {
1254
    padding-left: 20px;
1255
  }
1256
}
1257

    
1258
/********* Overview ********/
1259

    
1260
@media only screen and (min-width: 640px) {
1261
  .how .first > div:first-child {
1262
    position: relative;
1263
  }
1264

    
1265
  .how .first > div:first-child:after {
1266
    content: "we";
1267
    text-align: center;
1268
    padding-bottom: 5%;
1269
    position: absolute;
1270
    background-image: url("../img/methodology/arrows/1.svg");
1271
    right: -21%;
1272
    top: 33%;
1273
    width: 20%;
1274
    background-size: contain;
1275
    background-repeat: no-repeat;
1276
    background-position: bottom center;
1277
  }
1278

    
1279
  .how .second > div:first-child {
1280
    position: relative;
1281
    padding: 0 22% 0 22%;
1282
  }
1283

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

    
1298
  .how .third {
1299
    position:  relative;
1300
  }
1301

    
1302
  .how .third > div:first-child {
1303
    padding: 0 12% 0 12%;
1304
  }
1305

    
1306
  .how .third:after {
1307
    content: "on which";
1308
    padding-right: 30%;
1309
    padding-top: 5%;
1310
    padding-bottom: 5%;
1311
    position: absolute;
1312
    background-image: url("../img/methodology/arrows/3.svg");
1313
    bottom: 6%;
1314
    left: 6%;
1315
    transform: translateY(100%);
1316
    width: 55%;
1317
    background-size: contain;
1318
    background-repeat: no-repeat;
1319
    background-position: center;
1320
  }
1321

    
1322
  .how .fourth {
1323
    padding: 10% 3% 0 3%;
1324
  }
1325

    
1326
  .how .fourth > div:first-child {
1327
    position:  relative;
1328
    padding: 0 15% 0 15%;
1329
  }
1330

    
1331
  .how .fourth> div:first-child:after {
1332
    content: "and";
1333
    text-align: center;
1334
    padding-bottom: 5%;
1335
    position: absolute;
1336
    background-image: url("../img/methodology/arrows/4.svg");
1337
    left: -18%;
1338
    top: 35%;
1339
    width: 30%;
1340
    background-size: contain;
1341
    background-repeat: no-repeat;
1342
    background-position: bottom center;
1343
  }
1344

    
1345
  .how .fifth {
1346
    padding: 10% 2% 0 2%;
1347
  }
1348

    
1349
  .how .fifth > div:first-child {
1350
    position:  relative;
1351
  }
1352

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

    
1367
  .how .sixth {
1368
    padding: 10% 5% 0 0;
1369
  }
1370

    
1371
  .how .sixth > div:first-child {
1372
    padding: 0 15% 0 15%;
1373
  }
1374

    
1375
  .how .final {
1376
    padding: 10% 20% 0 20%;
1377
  }
1378

    
1379
  .how .final > div:first-child {
1380
    position: relative;
1381
  }
1382

    
1383
  .how .final img {
1384
    display: block;
1385
    margin-left: auto;
1386
    margin-right: auto;
1387
  }
1388

    
1389
  .how .final > div:first-child:before {
1390
    content: "";
1391
    position: absolute;
1392
    background-image: url("../img/methodology/arrows/6.svg");
1393
    left: -20%;
1394
    /*top: -20%;*/
1395
    /*height: 70%;*/
1396
    top: -8%;
1397
    height: 42%;
1398
    /*width: 30%;*/
1399
    width: 34%;
1400
    background-size: contain;
1401
    background-repeat: no-repeat;
1402
    background-position: bottom center;
1403
  }
1404

    
1405
  .how .final > div:first-child:after {
1406
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1407
    position: absolute;
1408
    background-image: url("../img/methodology/circle.png");
1409
    /*right: -220px;*/
1410
    /*top: -20%;*/
1411
    right: -203px;
1412
    top: -8%;
1413
    width: 300px;
1414
    padding: 8% 0 5% 220px;
1415
    background-size: contain;
1416
    background-repeat: no-repeat;
1417
    background-position: bottom center;
1418
  }
1419
}
1420

    
1421
@media only screen and (min-width: 960px) {
1422
  .how .third:after {
1423
    bottom: -6%;
1424
  }
1425
}
1426

    
1427
@media only screen and (min-width: 1200px) {
1428
  .how .third:after {
1429
    bottom: -10%;
1430
    left: 25%;
1431
    width: 25%;
1432
  }
1433
}
1434

    
1435
@media only screen and (max-width: 639px) {
1436
  .how .first {
1437
    position: relative;
1438
    padding-bottom: 30%;
1439
  }
1440

    
1441
  .how .first:after {
1442
    content: "we";
1443
    text-align: center;
1444
    padding: 25px 105px 25px 0;
1445
    position: absolute;
1446
    background-image: url("../img/methodology/arrows/3.svg");
1447
    /*left: 26%;*/
1448
    left: 33%;
1449
    top: 72%;
1450
    background-size: contain;
1451
    background-repeat: no-repeat;
1452
    background-position: center;
1453
  }
1454

    
1455
  .how .second {
1456
    position: relative;
1457
    padding: 0 15% 30% 15%;
1458
  }
1459

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

    
1474
  .how .third {
1475
    position:  relative;
1476
    padding: 0 5% 30% 5%;
1477
  }
1478

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

    
1493
  .how .fourth {
1494
    position:  relative;
1495
    padding: 0 0 30% 0;
1496
  }
1497

    
1498
  .how .fourth > div:first-child {
1499
    padding: 0 10% 0 10%;
1500
  }
1501

    
1502
  .how .fourth:after {
1503
    content: "and";
1504
    text-align: center;
1505
    padding: 25px 105px 25px 0;
1506
    position: absolute;
1507
    background-image: url("../img/methodology/arrows/3.svg");
1508
    /*left: 26%;*/
1509
    left: 32%;
1510
    top: 79%;
1511
    background-size: contain;
1512
    background-repeat: no-repeat;
1513
    background-position: center;
1514
  }
1515

    
1516
  .how .fifth {
1517
    position:  relative;
1518
    padding: 0 2% 30% 2%;
1519
  }
1520

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

    
1535
  .how .sixth {
1536
    padding: 0 5% 30% 0;
1537
  }
1538

    
1539
  .how .sixth > div:first-child {
1540
    padding: 0 15% 0 15%;
1541
  }
1542

    
1543
  .how .final {
1544
    padding: 20% 0 20% 0;
1545
  }
1546

    
1547
  .how .final > div:first-child {
1548
    position: relative;
1549
  }
1550

    
1551
  .how .final > div:first-child:before {
1552
    content: "";
1553
    position: absolute;
1554
    background-image: url("../img/methodology/arrows/6.svg");
1555
    left: 32%;
1556
    /*top: -80%;*/
1557
    /*height: 70%;*/
1558
    top: -37%;
1559
    height: 33%;
1560
    width: 30%;
1561
    background-size: contain;
1562
    background-repeat: no-repeat;
1563
    background-position: center;
1564
  }
1565

    
1566
  .how .final > div:first-child:after {
1567
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1568
    position: absolute;
1569
    background-image: url("../img/methodology/circle.png");
1570
    /*left: -62%;*/
1571
    /*top: 85%;*/
1572
    left: -52%;
1573
    top: 91%;
1574
    width: 300px;
1575
    padding: 12% 0 0 70%;
1576
    background-size: contain;
1577
    background-repeat: no-repeat;
1578
    background-position: center;
1579
  }
1580
}
1581

    
1582

    
1583
/*********************************/
1584

    
1585
/********* MOBILE ********/
1586
@media only screen and (max-width: 960px) {
1587

    
1588
  body {
1589
    background: #F9FBFC;
1590
  }
1591

    
1592
  ::-webkit-scrollbar {
1593
    width: 0px;
1594
    background: transparent; /* make scrollbar transparent */
1595
  }
1596

    
1597
  .uk-navbar-container:not(.uk-navbar-transparent) {
1598
    background: #F9FBFC;
1599
  }
1600

    
1601
  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
1602
    min-height: 60px;
1603
  }
1604

    
1605
  .uk-logo > img {
1606
    max-height: 125px;
1607
  }
1608

    
1609
  .uk-navbar-toggle-icon {
1610
    color: var(--primary-color);
1611
  }
1612

    
1613
  .searchForCountry.uk-search.uk-search-default {
1614
    width: 100%;
1615
    background: #FFFFFF 0% 0% no-repeat padding-box;
1616
    border: 1px solid #C7C7C7;
1617
    border-radius: 4px;
1618
  }
1619

    
1620
  .searchForCountry.uk-search .uk-search-icon {
1621
    color: #4687f4;
1622
    z-index: 10;
1623
  }
1624

    
1625
  .progress {
1626
    width: 100%;
1627
  }
1628

    
1629
  .overviewMobile .number.big {
1630
    font-size: 24px;
1631
  }
1632

    
1633
  .overviewMobile {
1634
    font-size: 12px;
1635
  }
1636

    
1637
  .goToDetailedViewLink {
1638
    text-align: center;
1639
    margin-top: 0px;
1640
  }
1641

    
1642
  .leadingOpenScienceCard {
1643
    font-size: 10px;
1644
  }
1645

    
1646
  .leadingOpenScienceCard .number {
1647
    font-size: 14px;
1648
  }
1649

    
1650
  .leadingOpenScienceCard .countryName {
1651
    font-size: 16px;
1652
    font-weight: bold;
1653
  }
1654

    
1655
  .footerSection {
1656
    text-align: center;
1657
    background-color: #fff;
1658
  }
1659

    
1660
  .footerImage {
1661
    opacity: 0.8;
1662
    float: none;
1663
    margin-top: 0px;
1664
  }
1665

    
1666
  [class*="uk-navbar-dropdown-bottom"] {
1667
    margin-top: -5px;
1668
    left: 200px !important;
1669
  }
1670

    
1671
  .tm-header-mobile .uk-nav-divider {
1672
    margin: 15px 0;
1673
  }
1674

    
1675
  .tm-header-mobile .smallHeader {
1676
    background: #FFFFFF 0% 0% no-repeat padding-box;
1677
    box-shadow: 0px 3px 6px #00000029;
1678
    opacity: 1;
1679
  }
1680

    
1681
  .continentPageEntitiesOverview .number.big {
1682
    font-size: 24px;
1683
  }
1684

    
1685
  .continentPageEntitiesOverview .entityName {
1686
    font-size: 16px;
1687
    font-weight: 600;
1688
  }
1689

    
1690
  .uk-tab {
1691
    flex-wrap: nowrap;
1692
    overflow-x: auto;
1693
    background: #fff;
1694
    padding-bottom: 15px;
1695
    padding-top: 10px;
1696
    margin-right: -20px;
1697
  }
1698

    
1699
  .entitiesContainer {
1700
    margin-left: 0px;
1701
    height: 200px;
1702
  }
1703

    
1704
  hr.entitiesDivider {
1705
    margin-left: -15px;
1706
    margin-right: -15px;
1707
  }
1708

    
1709
  .dataContainer {
1710
    border: none;
1711
  }
1712

    
1713
  .tabContent {
1714
    padding: 30px 0px;
1715
  }
1716

    
1717
  .dataContainer .tabContent {
1718
    padding: 0px;
1719
  }
1720

    
1721
  .autocomplete-container .input-container input {
1722
    padding: 0 15px 0 40px !important;
1723
  }
1724
}
1725

    
(3-3/4)