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: #381565;
16
  --publication-background-color: #adcfff;
17

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

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

    
28
  /*--other-color: #00CCCC;*/
29
  /*--other-background-color: #CCF4F4;*/
30
  --other-color: #00554e;
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
.mapContainer {
141
  /*background: #F7F7F7 0% 0% no-repeat padding-box;*/
142
  /*border: 1px solid #E0E0E0;*/
143
  /*opacity: 0.4;*/
144
  /*padding: 15px;*/
145
  position: relative;
146
  height: 100%;
147
}
148

    
149
.mapContainerEmbed {
150
  height: 100%;
151
}
152

    
153
.map {
154
  /*height: 398px;*/
155
  /*border: 1px solid #707070;*/
156
  /*margin: 15px;*/
157
  position: absolute;
158
  height: 88%;
159
  width: 100%;
160
}
161

    
162
.mapControls {
163
  /*position: absolute;*/
164
  bottom: 20px;
165
}
166

    
167
.uk-nav-label {
168
  width: 12px;
169
  height: 12px;
170
  display: inline-block;
171
  vertical-align: -1px;
172
  margin-right: 8px;
173
  border-radius: 50%;
174
}
175

    
176
.uk-nav-horizontal li {
177
  display: inline-block;
178
}
179

    
180
.uk-nav > li > a {
181
  padding: 5px 15px;
182
}
183

    
184
.uk-nav-side > li > a {
185
  color: #444;
186
}
187

    
188
.mapControls .text {
189
  opacity: 0.5;
190
}
191

    
192
.mapControls .text.active {
193
  opacity: 1;
194
}
195

    
196
.dark-blue-box {
197
  background: #002D60 0% 0% no-repeat padding-box;
198
  border: 1px solid #707070;
199
  border-radius: 2px;
200
  opacity: 1;
201
  color: #fff;
202
}
203

    
204
.dark-blue-box a, .dark-blue-box a:hover, .dark-blue-box a:focus {
205
  color: #fff;
206
}
207

    
208
.dark-grey-box {
209
  background: #2A2D34 0% 0% no-repeat padding-box;
210
  border: 1px solid #707070;
211
  border-radius: 2px;
212
  opacity: 1;
213
  color: #fff;
214
}
215

    
216
.dark-grey-box h3 {
217
  color: #fff;
218
}
219

    
220
.dark-grey-box a, .dark-grey-box a:hover, .dark-grey-box a:focus {
221
  color: #fff;
222
}
223

    
224
.openaire-symbol-wrapper {
225
  background-color: #fff;
226
  border-radius: 50%;
227
  padding: 12px 10px 17px 13px;
228
}
229

    
230

    
231
.infoBox {
232
  /*font-weight: 300;*/
233
  /*font-size: 15px;*/
234

    
235
  background: #FFFFFF 0% 0% no-repeat padding-box;
236
  box-shadow: 0px 2px 6px #00000038;
237
  border-radius: 3px;
238
  opacity: 1;
239
}
240

    
241
.infoBox h3 {
242
  font-weight: bold;
243
}
244

    
245
.infoBox ul {
246
  padding-left: 18px;
247
}
248

    
249
.infoBox ul li {
250
  margin-bottom: 20px;
251
  letter-spacing: 0px;
252
  line-height: 27px;
253
}
254

    
255
.dark-blue-box h3 {
256
  color: #fff;
257
}
258

    
259
a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:focus  {
260
  color: #fff;
261
}
262

    
263
.greyBoldDivider {
264
  border: 1px solid #E0E0E0;
265
}
266

    
267
.numbers .number {
268
  font-size: 16px;
269
}
270

    
271
div.indicator {
272
  display: flex;
273
}
274

    
275
div.indicator span {
276
  padding-right: 10px;
277
}
278

    
279
.primary {
280
  color: var(--primary-color);
281
}
282

    
283
.publications {
284
  color: var(--publication-color);
285
}
286

    
287
.datasets {
288
  color: var(--dataset-color);
289
}
290

    
291
.software {
292
  color: var(--software-color);
293
}
294

    
295
.other {
296
  color: var(--other-color);
297
}
298

    
299
.repositories {
300
  color: var(--repository-color);
301
}
302

    
303
.journals {
304
  color: var(--journal-color);
305
}
306

    
307
.policies {
308
  color: var(--policies-color);
309
}
310

    
311
.indicatorCards {
312
  font-size: 13px;
313
}
314

    
315
.indicatorCards .md-card {
316
  box-shadow: 0px 2px 6px #00000038;
317
  border: 1px solid #E0E0E0;
318
  border-radius: 3px;
319
}
320

    
321
/********* Mock chart for country **********/
322
.epc_chart {
323
  display: block;
324
  position: relative;
325
}
326

    
327
.epc_chart_text {
328
  position: absolute;
329
  top: 0;
330
  left: 0;
331
  right: 0;
332
  bottom: 0;
333
  text-align: center;
334
  font: 400 20px/110px Roboto,sans-serif;
335
}
336

    
337
/********************************************/
338

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

    
353
.md-btn {
354
  border-radius: 23px;
355
  padding: 7px 25px;
356
  font: 500 14px / 31px 'Open Sans', sans-serif !important;
357
}
358

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

    
373
.md-btn-primary:hover, .md-btn-primary:focus, .md-btn-primary:active {
374
  background: var(--secondary-color) 0% 0% no-repeat padding-box;
375
}
376

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

    
392
.number {
393
  font-weight: bold;
394
}
395

    
396
#sect-tabs .uk-tab > li > a {
397
  text-transform: none;
398
}
399

    
400
.uk-tab > li.uk-active > a {
401
  border-bottom-color: var(--primary-color);
402
}
403

    
404
.uk-tab > li > a:hover, .uk-tab > li > a:focus {
405
  background: none;
406
  color: #212121;
407
  border-bottom-color: var(--secondary-color);
408
}
409

    
410
.uk-tab::before {
411
  border-bottom: none;
412
}
413

    
414
.dataContainer {
415
  background: #F9fbfc 0% 0% no-repeat padding-box;
416
  border: 1px solid #E0E0E0;
417
}
418

    
419
.tabContent {
420
  padding: 30px 50px;
421
}
422

    
423
.uk-tab {
424
  display: flex;
425
}
426

    
427
.uk-tab > li.uk-active > a {
428
  font-weight: bold;
429
}
430
/*.uk-tab-center.uk-tab {*/
431

    
432
  /*position: relative;*/
433
  /*right: 50%;*/
434
  /*border: none;*/
435
  /*float: right;*/
436

    
437
/*}*/
438

    
439
.uk-subnav-pill > .uk-active > a {
440
  /*background: #1F73F7;*/
441
  background: var(--primary-color);
442
}
443

    
444
.dataView.uk-subnav-pill > * > * {
445
  width: 16px;
446
  height: 16px;
447
  padding: 8px;
448
  border-radius: 50%;
449
  border: 1px solid;
450
  display: inline-block;
451
}
452

    
453
.tabContent hr {
454
  margin: 30px 0;
455
}
456

    
457
.dataContent {
458
  background-color: #FFFFFF;
459
  border: 1px solid #E0E0E0;
460
  padding: 30px;
461
}
462

    
463
.goToDetailedViewLink {
464
  margin-top: -50px;
465
}
466

    
467
.actionButtons a, .actionButtonsCountryPage a {
468
  color: #000000;
469
}
470

    
471
.actionButtons a i, .actionButtonsCountryPage a i {
472
  color: var(--primary-color);
473
}
474

    
475
.md-card .md-card-toolbar {
476
  /*height: 48px;*/
477
}
478

    
479
.infoBox.md-card .md-card-toolbar {
480
  /*height: 48px;*/
481
  background: transparent linear-gradient(115deg, var(--primary-color) 0%, var(--secondary-color) 100%) 0% 0% no-repeat padding-box;
482
  border-radius: 3px 3px 0px 0px;
483
  opacity: 1;
484
  padding: 16px 25px 0;
485
  color: #292929;
486
}
487

    
488
.infoBox.md-card .md-card-toolbar h3 {
489
  color: #fff;
490
  font-size: 16px;
491
}
492

    
493
.md-card .md-card-toolbar .md-card-toolbar-actions {
494
  padding-top: 15px;
495
}
496

    
497
.md-card .md-card-content {
498
  padding: 20px;
499
}
500

    
501
/*.uk-table td {*/
502
  /*border-bottom: 1px solid #e0e0e0;*/
503
/*}*/
504

    
505
.uk-table th {
506
  text-transform: none;
507
}
508

    
509

    
510
a.publicationsSubnav {
511
  color: var(--publication-color) !important;
512
}
513

    
514
.uk-subnav-pill > .uk-active > a.publicationsSubnav {
515
  background: var(--publication-background-color);
516
}
517

    
518
a.datasetsSubnav {
519
  color: var(--dataset-color) !important;
520
}
521

    
522
.uk-subnav-pill > .uk-active > a.datasetsSubnav {
523
  background: var(--dataset-background-color);
524
}
525

    
526
a.softwareSubnav {
527
  color: var(--software-color) !important;
528
}
529

    
530
.uk-subnav-pill > .uk-active > a.softwareSubnav {
531
  background: var(--software-background-color);
532
}
533

    
534
a.otherSubnav {
535
  color: var(--other-color) !important;
536
}
537

    
538
.uk-subnav-pill > .uk-active > a.otherSubnav {
539
  background: var(--other-background-color);
540
}
541

    
542
/*a.publicationsSubnav, a.datasetsSubnav, a.softwareSubnav, a.otherSubnav {*/
543
  /*width: 16px;*/
544
  /*height: 16px;*/
545
  /*padding: 8px;*/
546
  /*!*border-radius: 50%;*!*/
547
  /*!*border: 1px solid;*!*/
548
  /*display: inline-block;*/
549
/*}*/
550

    
551
a.publicationsSubnav img, a.datasetsSubnav img, a.softwareSubnav img, a.otherSubnav img {
552
  vertical-align: baseline;
553
}
554

    
555

    
556
/**************** HEADER ****************/
557

    
558
/*.tm-header .uk-navbar-container {*/
559
  /*padding-top: 10px;*/
560
  /*padding-bottom: 15px;*/
561
/*}*/
562

    
563
.tm-header .uk-navbar-left {
564
  position: relative;
565
  z-index: 9999 !important;
566
}
567

    
568
.navbar .brand, .uk-logo {
569
  font-size: 24px;
570
  font-family: 'Open Sans';
571
  color: #666;
572
  text-decoration: none;
573
}
574

    
575
.tm-header .uk-logo {
576
  position: relative;
577
  z-index: 1000 !important;
578
  /*padding-left: 100px;*/
579
}
580

    
581
.uk-logo > img {
582
  max-height: 70px;
583
}
584

    
585
/********************************************/
586

    
587
/**************** FOOTER ****************/
588

    
589
.footerLink {
590
  color: #000;
591
  text-decoration: underline;
592
}
593

    
594
.footerImage {
595
  opacity: 0.8;
596
  float: left;
597
  margin-top: 7px;
598
}
599

    
600
/********************************************/
601

    
602

    
603
#sidebar_main {
604
  position: fixed;
605
  right: 0;
606
  top:0;
607
  bottom:0;
608
  overflow-x: hidden;
609
  overflow-y: auto;
610
  /*background-color: #222;*/
611
  /*width: 260px;*/
612
  width: 20%;
613
  z-index:1;
614
}
615

    
616
#left-col {
617
  position: fixed;
618
  left: 0;
619
  top:0;
620
  bottom:0;
621
  overflow-x: hidden;
622
  overflow-y: auto;
623
  background-color: #222;
624
  width: 260px;
625
  z-index:1;
626
}
627
.bar-wrap {
628
  padding: 2rem;
629
}
630
#right-col {
631
  margin-left: 260px;
632
}
633

    
634

    
635

    
636
/*#sc-sidebar-main {*/
637

    
638
  /*position: fixed;*/
639
  /*top: 48px;*/
640
  /*left: 0;*/
641
  /*bottom: 0;*/
642
  /*-webkit-box-sizing: border-box;*/
643
  /*box-sizing: border-box;*/
644
  /*width: 260px;*/
645
  /*z-index: 1300;*/
646
  /*border-right: 1px solid*/
647

    
648
  /*rgba(0,0,0,.08);*/
649

    
650
  /*background:*/
651

    
652
    /*#fff;*/
653
  /*display: -webkit-box;*/
654
  /*display: -ms-flexbox;*/
655
  /*display: flex;*/
656
  /*-webkit-box-orient: vertical;*/
657
  /*-webkit-box-direction: normal;*/
658
  /*-ms-flex-direction: column;*/
659
  /*flex-direction: column;*/
660

    
661
/*}*/
662

    
663
/*#sc-sidebar-main .uk-offcanvas-bar {*/
664

    
665
  /*padding: 0;*/
666

    
667
/*}*/
668

    
669
/*#sc-sidebar-main .uk-offcanvas-bar {*/
670

    
671
  /*top: 0;*/
672
  /*display: -webkit-box;*/
673
  /*display: -ms-flexbox;*/
674
  /*display: flex;*/
675
  /*-webkit-box-orient: vertical;*/
676
  /*-webkit-box-direction: normal;*/
677
  /*-ms-flex-direction: column;*/
678
  /*flex-direction: column;*/
679
  /*position: static;*/
680
  /*background: 0 0;*/
681
  /*-webkit-box-shadow: none;*/
682
  /*box-shadow: none;*/
683
  /*-webkit-transform: none;*/
684
  /*transform: none;*/
685
  /*overflow-x: hidden;*/
686
  /*overflow-y: visible;*/
687
  /*height: 100%;*/
688
  /*width: 260px;*/
689

    
690
/*}*/
691

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

    
694
  /*height: calc(100% - 48px);*/
695
  /*-webkit-box-flex: 1;*/
696
  /*-ms-flex: 1;*/
697
  /*flex: 1;*/
698

    
699
/*}*/
700

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

    
703
  /*padding-left: 260px;*/
704
  /*-webkit-transition: padding 140ms ease-out;*/
705
  /*transition: padding 140ms ease-out;*/
706

    
707
/*}*/
708

    
709

    
710

    
711

    
712
/********************************************/
713

    
714
/*.contentSectionContainer .md-card-content {*/
715
  /*max-height: 300px;*/
716
/*}*/
717

    
718
.contentSectionContainer .md-card-content img {
719
  height:  350px;
720
  width: 100%;
721
}
722

    
723
/*.contentSectionContainer .md-card-content {*/
724
  /*text-align: center;*/
725
/*}*/
726

    
727

    
728

    
729
.progress {
730
  height: 20px;
731
  /*margin-bottom: 20px;*/
732
  overflow: hidden;
733
  background-color: #f5f5f5;
734
  border-radius: 4px;
735
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
736
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
737
}
738

    
739
.progress {
740
  height: 12px;
741
  background-color: #e9ecee;
742
  background-image: none;
743
  box-shadow: none;
744
  filter: none;
745
}
746

    
747
.progress {
748
  /*margin-bottom: 10px;*/
749
}
750

    
751
.progress {
752
  /*margin-top: 3px;*/
753
  /*width: 85px;*/
754
  /*display: inline-block;*/
755
  width: 50%;
756
}
757

    
758
.progress-bar {
759

    
760
  float: left;
761
  width: 0;
762
  height: 100%;
763
  font-size: 12px;
764
  line-height: 20px;
765
  color: #fff;
766
  text-align: center;
767
  background-color: #337ab7;
768
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
769
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
770
  -webkit-transition: width .6s ease;
771
  -o-transition: width .6s ease;
772
  transition: width .6s ease;
773

    
774
}
775

    
776
.progress-bar {
777

    
778
  box-shadow: none;
779
  border-radius: 3px;
780
  background-color: #0090D9;
781
  background-image: none;
782
  -webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
783
  transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
784
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
785
  -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
786
  -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
787
  -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
788
  -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
789
  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
790
  float: left;
791
  filter: none;
792

    
793
}
794

    
795
.progress-bar-publications {
796
  /*background-color: #F6C4D8;*/
797
  background-color: var(--publication-background-color);
798
  background-image: none;
799
}
800

    
801
.progress-bar-datasets {
802
  /*background-color: #D6CBEB;*/
803
  background-color: var(--dataset-background-color);
804
  background-image: none;
805
}
806

    
807
.progress-bar-repositories {
808
  /*background-color: #ADD3E0;*/
809
  background-color: var(--repository-background-color);
810
  background-image: none;
811
}
812

    
813
.progress-bar-journals {
814
  /*background-color: #FBE8B1;*/
815
  background-color: var(--journal-background-color);
816
  background-image: none;
817
}
818

    
819

    
820
/*.progress-bar-software {*/
821
  /*background-color: #F88306;*/
822
  /*background-image: none;*/
823
/*}*/
824

    
825
/*.progress-bar-otherProducts {*/
826
  /*background-color: #987CD6;*/
827
  /*background-image: none;*/
828
/*}*/
829

    
830

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

    
833
.uk-breadcrumb > :last-child > * {
834
  color: var(--primary-color);
835
}
836

    
837
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
838
  content: ">";
839
}
840

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

    
843
.small-flag-image {
844
  border: 2px solid #eee;
845
  border-radius: 100px;
846
}
847

    
848
.flag-image {
849
  border: 10px solid #eee;
850
  border-radius: 100px;
851
}
852

    
853

    
854
.demo-chart {
855
  /*max-height: 600px;*/
856
  height: 65vh;
857
}
858

    
859
/********* LOADERS *********/
860

    
861
.loader {
862
  color: var(--primary-color);
863
  margin: 25% auto;
864
}
865

    
866
.whiteFilm {
867
  background: #ffffff;
868
  z-index: 105;
869
  width: 100%;
870
  height: 100%;
871
  opacity: 0.7;
872
  position: absolute;
873
  top: 0;
874
  left: 0;
875

    
876
  display: flex;
877
  align-items: center;
878
}
879

    
880
.transparentFilm {
881
  background: transparent;
882
  z-index: 105;
883
  width: 100%;
884
  height: 100%;
885
  opacity: 0.7;
886
  position: absolute;
887
  top: 0;
888
  left: 0;
889

    
890
  display: flex;
891
  align-items: center;
892
}
893
/**************************/
894

    
895
.lastUpdateInfo {
896
  opacity: 0.4;
897
  color: #000;
898
  letter-spacing: 0px;
899
}
900

    
901
.entitiesContainer {
902
  height: 300px;
903
  display: flex;
904
  align-items: flex-end;
905
}
906

    
907
.publicationsColumn {
908
  /*background-color: #f181ae;*/
909
  background-color: var(--publication-color);
910
  box-shadow: 3px 3px 6px #00000029;
911
  opacity: 1;
912
  z-index: 10;
913
}
914

    
915
.publicationsDot {
916
  background-color: var(--publication-color);
917
  /*width: 50px;*/
918
  width: 35px;
919
  height: 33px;
920
  border-radius: 50%;
921
}
922

    
923
.datasetsColumn {
924
  background-color: var(--dataset-color);
925
  box-shadow: 3px 3px 6px #00000029;
926
  opacity: 1;
927
  z-index: 8;
928
}
929

    
930
.datasetsDot {
931
  background-color: var(--dataset-color);
932
  /*width: 50px;*/
933
  width: 35px;
934
  height: 33px;
935
  border-radius: 50%;
936
}
937

    
938
.softwareColumn {
939
  background-color: var(--software-color);
940
  box-shadow: 3px 3px 6px #00000029;
941
  opacity: 1;
942
  z-index: 6;
943
}
944

    
945
.softwareDot {
946
  background-color: var(--software-color);
947
  /*width: 50px;*/
948
  width: 35px;
949
  height: 33px;
950
  border-radius: 50%;
951
}
952

    
953
.otherColumn {
954
  background-color: var(--other-color);
955
  box-shadow: 3px 3px 6px #00000029;
956
  opacity: 1;
957
  z-index: 4;
958
}
959

    
960
.otherDot {
961
  background-color: var(--other-color);
962
  /*width: 50px;*/
963
  width: 35px;
964
  height: 33px;
965
  border-radius: 50%;
966
}
967

    
968
.entityColumnContent {
969
  color: #fff;
970
  width: 100%;
971
  height: 100%;
972
  display: flex;
973
  flex-direction: column;
974
  justify-content: center;
975
  text-align: center;
976
}
977

    
978
hr.entitiesDivider {
979
  border: 2px solid #B4B4B4;
980
  margin-left: -90px;
981
  margin-right: -50px;
982
  margin-top: 0px;
983
}
984

    
985
.entityLegendContent {
986
  display: flex;
987
  padding-right: 40px;
988

    
989
}
990

    
991

    
992

    
993

    
994
.countryPageHeader {
995
  display: flex;
996
  justify-content: space-between;
997
}
998

    
999

    
1000
.chartCard.md-card {
1001
  box-shadow: 1px 10px 12px #00000026;
1002
  border: 1px solid #E0E0E0;
1003
  border-radius: 5px;
1004
}
1005

    
1006

    
1007
/********* DONUT - CIRCLE ********/
1008

    
1009
.circular-chart {
1010
  display: block;
1011
  margin: 10px auto;
1012
  max-width: 80%;
1013
  /*max-height: 250px;*/
1014
  max-height: 110px;
1015
}
1016

    
1017
.circle-bg {
1018
  fill: none;
1019
  stroke: #eee;
1020
  stroke-width: 3.8;
1021
}
1022

    
1023
.circle {
1024
  fill: none;
1025
  /*stroke-width: 2.8;*/
1026
  stroke-width: 4.2;
1027
  stroke-linecap: round;
1028
  animation: progress 1s ease-out forwards;
1029
}
1030

    
1031
@keyframes progress {
1032
  0% {
1033
    stroke-dasharray: 0 100;
1034
  }
1035
}
1036

    
1037
.circular-chart.publications .circle {
1038
  stroke: var(--publication-color);
1039
}
1040

    
1041
.circular-chart.datasets .circle {
1042
  /*stroke: #BB9CE6;*/
1043
  stroke: var(--dataset-color);
1044
}
1045

    
1046
.circular-chart.software .circle {
1047
  stroke: var(--software-color);
1048
}
1049

    
1050
.circular-chart.other .circle {
1051
  stroke: var(--other-color);
1052
}
1053

    
1054
.percentage {
1055
  fill: #666;
1056
  font-family: sans-serif;
1057
  font-size: 0.5em;
1058
  text-anchor: middle;
1059
}
1060

    
1061
/*********************************/
1062

    
1063
/********* MAP ********/
1064

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

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

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

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

    
1085
/*********************************/
1086

    
1087
/********* MENU ********/
1088

    
1089
.uk-navbar-dropdown {
1090
  width: 280px;
1091
  padding: 25px 0px;
1092
}
1093

    
1094
.uk-navbar-dropdown-nav > li {
1095
  padding: 0px 25px;
1096
}
1097

    
1098
.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover {
1099
  color: #212121;
1100
}
1101

    
1102
.uk-navbar-dropdown-nav > li:hover {
1103
  color: #212121;
1104
  background: var(--primary-color-background) 0% 0% no-repeat padding-box;
1105
  opacity: 1;
1106
}
1107

    
1108

    
1109
/*********************************/
1110

    
1111

    
1112
/**************** OFF-Canvas menu ****************/
1113

    
1114
.custom-offcanvas-close {
1115
  position: relative;
1116
  right: 0;
1117
  top: 0;
1118
}
1119

    
1120
.uk-offcanvas-bar-light {
1121
  text-transform: uppercase;
1122
}
1123

    
1124
.uk-offcanvas-bar-light {
1125
  position: absolute;
1126
  top: 0;
1127
  bottom: 0;
1128
  left: -270px;
1129
  box-sizing: border-box;
1130
  width: 270px;
1131
  padding: 20px 20px;
1132
  background: #fff;
1133
  overflow-y: auto;
1134
  -webkit-overflow-scrolling: touch;
1135
}
1136

    
1137
.uk-nav-sub a {
1138
  padding: 2px 15px;
1139
}
1140

    
1141
.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a {
1142
  color: #333;
1143
}
1144

    
1145
.uk-nav-default .uk-nav-sub a:hover {
1146
  color: var(--secondary-color);
1147
}
1148

    
1149
.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover,
1150
.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus,
1151
.uk-offcanvas-bar-light .uk-nav-default > li > a:active {
1152
  color: var(--secondary-color);
1153
}
1154

    
1155
.uk-offcanvas-bar-animation {
1156
  transition: left 0.3s ease-out;
1157
}
1158

    
1159
@media (min-width: 960px) {
1160
  .uk-offcanvas-bar-light {
1161
    left: -350px;
1162
    width: 350px;
1163
    padding: 40px 40px;
1164
  }
1165
}
1166

    
1167
.uk-offcanvas-flip .uk-offcanvas-bar-light {
1168
  left: auto;
1169
  right: -270px;
1170
}
1171

    
1172
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
1173
  transition-property: right;
1174
}
1175

    
1176
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
1177
  left: auto;
1178
  right: 0;
1179
}
1180

    
1181
@media (min-width: 960px) {
1182
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
1183
    right: -350px;
1184
  }
1185
}
1186

    
1187
.uk-offcanvas-flip .uk-offcanvas-reveal .uk-offcanvas-bar-light {
1188
  left: auto;
1189
  right: 0;
1190
}
1191

    
1192
.uk-offcanvas-reveal .uk-offcanvas-bar-light {
1193
  left: 0;
1194
}
1195

    
1196
.uk-open > .uk-offcanvas-bar-light {
1197
  left: 0;
1198
}
1199

    
1200
.uk-close::after {
1201
  opacity: 0 !important;
1202
  color: #fff;
1203
  content: '';
1204
  font-family: "Material Icons";
1205
}
1206

    
1207
/********************************************/
1208

    
1209

    
1210
/********* METHODOLOGY ********/
1211

    
1212
/********* Terminology ********/
1213

    
1214
.terminologySection table {
1215
  font-size: 14px;
1216
  background-color: #FFFFFF;
1217
  width:100%;
1218
  table-layout: fixed;
1219
  overflow-wrap: break-word;
1220
}
1221

    
1222
.terminologySection table th {
1223
  width: 20%;
1224
}
1225

    
1226
.terminologySection table th, .terminologySection table td {
1227
  border: 1px solid #DEDEDE;
1228
  padding: 25px 40px;
1229
  vertical-align: top;
1230
  text-align: start;
1231
}
1232

    
1233
.terminologySection table th.important {
1234
  background-color: var(--primary-color-background);
1235
}
1236

    
1237
.terminologySection ul.portal-circle {
1238
  list-style: none;
1239
  padding-left: 40px;
1240
  font-family: "Open Sans", sans-serif;
1241
}
1242

    
1243
.terminologySection ul.portal-circle li {
1244
  margin: 0 0 2px 0;
1245
  position: relative;
1246
}
1247

    
1248
.terminologySection ul.portal-circle li:before {
1249
  content: "";
1250
  border: 5px var(--primary-color) solid !important;
1251
  border-radius: 50px;
1252
  line-height: 21px;
1253
  margin-left: -20px;
1254
  position: absolute;
1255
  top: 7px;
1256
}
1257

    
1258
@media only screen and (max-width: 959px) {
1259
  /*.terminologySection table th {*/
1260
    /*width: 50%;*/
1261
  /*}*/
1262

    
1263
  .terminologySection ul.portal-circle {
1264
    padding-left: 20px;
1265
  }
1266
}
1267

    
1268
/********* Overview ********/
1269

    
1270
@media only screen and (min-width: 640px) {
1271
  .how .first > div:first-child {
1272
    position: relative;
1273
  }
1274

    
1275
  .how .first > div:first-child:after {
1276
    content: "we";
1277
    text-align: center;
1278
    padding-bottom: 5%;
1279
    position: absolute;
1280
    background-image: url("../img/methodology/arrows/1.svg");
1281
    right: -21%;
1282
    top: 33%;
1283
    width: 20%;
1284
    background-size: contain;
1285
    background-repeat: no-repeat;
1286
    background-position: bottom center;
1287
  }
1288

    
1289
  .how .second > div:first-child {
1290
    position: relative;
1291
    padding: 0 22% 0 22%;
1292
  }
1293

    
1294
  .how .second > div:first-child:after {
1295
    content: "and";
1296
    text-align: center;
1297
    padding-bottom: 5%;
1298
    position: absolute;
1299
    background-image: url("../img/methodology/arrows/2.svg");
1300
    right: -10%;
1301
    top: 31%;
1302
    width: 30%;
1303
    background-size: contain;
1304
    background-repeat: no-repeat;
1305
    background-position: bottom center;
1306
  }
1307

    
1308
  .how .third {
1309
    position:  relative;
1310
  }
1311

    
1312
  .how .third > div:first-child {
1313
    padding: 0 12% 0 12%;
1314
  }
1315

    
1316
  .how .third:after {
1317
    content: "on which";
1318
    padding-right: 30%;
1319
    padding-top: 5%;
1320
    padding-bottom: 5%;
1321
    position: absolute;
1322
    background-image: url("../img/methodology/arrows/3.svg");
1323
    bottom: 6%;
1324
    left: 6%;
1325
    transform: translateY(100%);
1326
    width: 55%;
1327
    background-size: contain;
1328
    background-repeat: no-repeat;
1329
    background-position: center;
1330
  }
1331

    
1332
  .how .fourth {
1333
    padding: 10% 3% 0 3%;
1334
  }
1335

    
1336
  .how .fourth > div:first-child {
1337
    position:  relative;
1338
    padding: 0 15% 0 15%;
1339
  }
1340

    
1341
  .how .fourth> div:first-child:after {
1342
    content: "and";
1343
    text-align: center;
1344
    padding-bottom: 5%;
1345
    position: absolute;
1346
    background-image: url("../img/methodology/arrows/4.svg");
1347
    left: -18%;
1348
    top: 35%;
1349
    width: 30%;
1350
    background-size: contain;
1351
    background-repeat: no-repeat;
1352
    background-position: bottom center;
1353
  }
1354

    
1355
  .how .fifth {
1356
    padding: 10% 2% 0 2%;
1357
  }
1358

    
1359
  .how .fifth > div:first-child {
1360
    position:  relative;
1361
  }
1362

    
1363
  .how .fifth > div:first-child:after {
1364
    content: "We";
1365
    text-align: center;
1366
    padding-bottom: 5%;
1367
    position: absolute;
1368
    background-image: url("../img/methodology/arrows/5.svg");
1369
    left: -35%;
1370
    top: 36%;
1371
    width: 30%;
1372
    background-size: contain;
1373
    background-repeat: no-repeat;
1374
    background-position: bottom center;
1375
  }
1376

    
1377
  .how .sixth {
1378
    padding: 10% 5% 0 0;
1379
  }
1380

    
1381
  .how .sixth > div:first-child {
1382
    padding: 0 15% 0 15%;
1383
  }
1384

    
1385
  .how .final {
1386
    padding: 10% 20% 0 20%;
1387
  }
1388

    
1389
  .how .final > div:first-child {
1390
    position: relative;
1391
  }
1392

    
1393
  .how .final img {
1394
    display: block;
1395
    margin-left: auto;
1396
    margin-right: auto;
1397
  }
1398

    
1399
  .how .final > div:first-child:before {
1400
    content: "";
1401
    position: absolute;
1402
    background-image: url("../img/methodology/arrows/6.svg");
1403
    left: -20%;
1404
    /*top: -20%;*/
1405
    /*height: 70%;*/
1406
    top: -8%;
1407
    height: 42%;
1408
    /*width: 30%;*/
1409
    width: 34%;
1410
    background-size: contain;
1411
    background-repeat: no-repeat;
1412
    background-position: bottom center;
1413
  }
1414

    
1415
  .how .final > div:first-child:after {
1416
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1417
    position: absolute;
1418
    background-image: url("../img/methodology/circle.png");
1419
    /*right: -220px;*/
1420
    /*top: -20%;*/
1421
    right: -203px;
1422
    top: -8%;
1423
    width: 300px;
1424
    padding: 8% 0 5% 220px;
1425
    background-size: contain;
1426
    background-repeat: no-repeat;
1427
    background-position: bottom center;
1428
  }
1429
}
1430

    
1431
@media only screen and (min-width: 960px) {
1432
  .how .third:after {
1433
    bottom: -6%;
1434
  }
1435
}
1436

    
1437
@media only screen and (min-width: 1200px) {
1438
  .how .third:after {
1439
    bottom: -10%;
1440
    left: 25%;
1441
    width: 25%;
1442
  }
1443
}
1444

    
1445
@media only screen and (max-width: 639px) {
1446
  .how .first {
1447
    position: relative;
1448
    padding-bottom: 30%;
1449
  }
1450

    
1451
  .how .first:after {
1452
    content: "we";
1453
    text-align: center;
1454
    padding: 25px 105px 25px 0;
1455
    position: absolute;
1456
    background-image: url("../img/methodology/arrows/3.svg");
1457
    /*left: 26%;*/
1458
    left: 33%;
1459
    top: 72%;
1460
    background-size: contain;
1461
    background-repeat: no-repeat;
1462
    background-position: center;
1463
  }
1464

    
1465
  .how .second {
1466
    position: relative;
1467
    padding: 0 15% 30% 15%;
1468
  }
1469

    
1470
  .how .second:after {
1471
    content: "and";
1472
    text-align: center;
1473
    padding: 25px 105px 25px 0;
1474
    position: absolute;
1475
    background-image: url("../img/methodology/arrows/3.svg");
1476
    /*left: 25%;*/
1477
    left: 32%;
1478
    top: 70%;
1479
    background-size: contain;
1480
    background-repeat: no-repeat;
1481
    background-position: center;
1482
  }
1483

    
1484
  .how .third {
1485
    position:  relative;
1486
    padding: 0 5% 30% 5%;
1487
  }
1488

    
1489
  .how .third:after {
1490
    content: "on which";
1491
    text-align: center;
1492
    padding: 25px 105px 25px 0;
1493
    position: absolute;
1494
    background-image: url("../img/methodology/arrows/3.svg");
1495
    /*left: 17%;*/
1496
    left: 27%;
1497
    top: 75%;
1498
    background-size: contain;
1499
    background-repeat: no-repeat;
1500
    background-position: center;
1501
  }
1502

    
1503
  .how .fourth {
1504
    position:  relative;
1505
    padding: 0 0 30% 0;
1506
  }
1507

    
1508
  .how .fourth > div:first-child {
1509
    padding: 0 10% 0 10%;
1510
  }
1511

    
1512
  .how .fourth:after {
1513
    content: "and";
1514
    text-align: center;
1515
    padding: 25px 105px 25px 0;
1516
    position: absolute;
1517
    background-image: url("../img/methodology/arrows/3.svg");
1518
    /*left: 26%;*/
1519
    left: 32%;
1520
    top: 79%;
1521
    background-size: contain;
1522
    background-repeat: no-repeat;
1523
    background-position: center;
1524
  }
1525

    
1526
  .how .fifth {
1527
    position:  relative;
1528
    padding: 0 2% 30% 2%;
1529
  }
1530

    
1531
  .how .fifth:after {
1532
    content: "We";
1533
    text-align: center;
1534
    padding: 25px 105px 25px 0;
1535
    position: absolute;
1536
    background-image: url("../img/methodology/arrows/3.svg");
1537
    /*left: 27%;*/
1538
    left: 33%;
1539
    top: 76%;
1540
    background-size: contain;
1541
    background-repeat: no-repeat;
1542
    background-position: center;
1543
  }
1544

    
1545
  .how .sixth {
1546
    padding: 0 5% 30% 0;
1547
  }
1548

    
1549
  .how .sixth > div:first-child {
1550
    padding: 0 15% 0 15%;
1551
  }
1552

    
1553
  .how .final {
1554
    padding: 20% 0 20% 0;
1555
  }
1556

    
1557
  .how .final > div:first-child {
1558
    position: relative;
1559
  }
1560

    
1561
  .how .final > div:first-child:before {
1562
    content: "";
1563
    position: absolute;
1564
    background-image: url("../img/methodology/arrows/6.svg");
1565
    left: 32%;
1566
    /*top: -80%;*/
1567
    /*height: 70%;*/
1568
    top: -37%;
1569
    height: 33%;
1570
    width: 30%;
1571
    background-size: contain;
1572
    background-repeat: no-repeat;
1573
    background-position: center;
1574
  }
1575

    
1576
  .how .final > div:first-child:after {
1577
    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
1578
    position: absolute;
1579
    background-image: url("../img/methodology/circle.png");
1580
    /*left: -62%;*/
1581
    /*top: 85%;*/
1582
    left: -52%;
1583
    top: 91%;
1584
    width: 300px;
1585
    padding: 12% 0 0 70%;
1586
    background-size: contain;
1587
    background-repeat: no-repeat;
1588
    background-position: center;
1589
  }
1590
}
1591

    
1592

    
1593
/*********************************/
1594

    
1595
/********* MOBILE ********/
1596
@media only screen and (max-width: 960px) {
1597

    
1598
  body {
1599
    background: #F9FBFC;
1600
  }
1601

    
1602
  ::-webkit-scrollbar {
1603
    width: 0px;
1604
    background: transparent; /* make scrollbar transparent */
1605
  }
1606

    
1607
  .uk-navbar-container:not(.uk-navbar-transparent) {
1608
    background: #F9FBFC;
1609
  }
1610

    
1611
  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
1612
    min-height: 60px;
1613
  }
1614

    
1615
  .uk-logo > img {
1616
    max-height: 125px;
1617
  }
1618

    
1619
  .uk-navbar-toggle-icon {
1620
    color: var(--primary-color);
1621
  }
1622

    
1623
  .searchForCountry.uk-search.uk-search-default {
1624
    width: 100%;
1625
    background: #FFFFFF 0% 0% no-repeat padding-box;
1626
    border: 1px solid #C7C7C7;
1627
    border-radius: 4px;
1628
  }
1629

    
1630
  .searchForCountry.uk-search .uk-search-icon {
1631
    color: #4687f4;
1632
    z-index: 10;
1633
  }
1634

    
1635
  .progress {
1636
    width: 100%;
1637
  }
1638

    
1639
  .overviewMobile .number.big {
1640
    font-size: 24px;
1641
  }
1642

    
1643
  .overviewMobile {
1644
    font-size: 12px;
1645
  }
1646

    
1647
  .goToDetailedViewLink {
1648
    text-align: center;
1649
    margin-top: 0px;
1650
  }
1651

    
1652
  .leadingOpenScienceCard {
1653
    font-size: 10px;
1654
  }
1655

    
1656
  .leadingOpenScienceCard .number {
1657
    font-size: 14px;
1658
  }
1659

    
1660
  .leadingOpenScienceCard .countryName {
1661
    font-size: 16px;
1662
    font-weight: bold;
1663
  }
1664

    
1665
  .footerSection {
1666
    text-align: center;
1667
    background-color: #fff;
1668
  }
1669

    
1670
  .footerImage {
1671
    opacity: 0.8;
1672
    float: none;
1673
    margin-top: 0px;
1674
  }
1675

    
1676
  [class*="uk-navbar-dropdown-bottom"] {
1677
    margin-top: -5px;
1678
    left: 200px !important;
1679
  }
1680

    
1681
  .tm-header-mobile .uk-nav-divider {
1682
    margin: 15px 0;
1683
  }
1684

    
1685
  .tm-header-mobile .smallHeader {
1686
    background: #FFFFFF 0% 0% no-repeat padding-box;
1687
    box-shadow: 0px 3px 6px #00000029;
1688
    opacity: 1;
1689
  }
1690

    
1691
  .continentPageEntitiesOverview .number.big {
1692
    font-size: 24px;
1693
  }
1694

    
1695
  .continentPageEntitiesOverview .entityName {
1696
    font-size: 16px;
1697
    font-weight: 600;
1698
  }
1699

    
1700
  .uk-tab {
1701
    flex-wrap: nowrap;
1702
    overflow-x: auto;
1703
    background: #fff;
1704
    padding-bottom: 15px;
1705
    padding-top: 10px;
1706
    margin-right: -20px;
1707
  }
1708

    
1709
  .entitiesContainer {
1710
    margin-left: 0px;
1711
    height: 200px;
1712
  }
1713

    
1714
  hr.entitiesDivider {
1715
    margin-left: -15px;
1716
    margin-right: -15px;
1717
  }
1718

    
1719
  .dataContainer {
1720
    border: none;
1721
  }
1722

    
1723
  .tabContent {
1724
    padding: 30px 0px;
1725
  }
1726

    
1727
  .dataContainer .tabContent {
1728
    padding: 0px;
1729
  }
1730

    
1731
  .autocomplete-container .input-container input {
1732
    padding: 0 15px 0 40px !important;
1733
  }
1734
}
1735

    
(3-3/4)