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

    
18
  --dataset-color: #A98BD4;
19
  /*--dataset-color: #916AC8;*/
20
  --dataset-background-color: #e2daf0;
21

    
22
  --software-color: #C2155A;
23
  /*--software-color: #9C0D38;*/
24
  --software-background-color: #F2D0DE;
25

    
26
  --other-color: #00CCCC;
27
  /*--other-color: #17BEBB;*/
28
  --other-background-color: #CCF4F4;
29

    
30
  --repository-color: #708AA5;
31
  --repository-background-color: #ADD3E0;
32
  /*--repository-color: #639C66;*/
33
  /*--repository-background-color: #D4ECD6;*/
34

    
35
  --journal-color: #FFCE4E;
36
  --journal-background-color: #FBE8B1;
37

    
38
  --policies-color: #639C66;
39
  --policies-background-color: #D4ECD6;
40

    
41
  --muted-color: #4d4d4d;
42
}
43

    
44
html {
45
  color: #292929;
46
}
47

    
48
body {
49
  font: 400 14px/19px 'Open Sans';
50
}
51

    
52
h1, h2, h3, h4, h5, h6 {
53
  font-family: 'Open Sans', sans-serif;
54
}
55

    
56
h3 {
57
  font-weight: 600;
58
  font-size: 24px;
59
}
60

    
61
.uk-h6, h6 {
62
  font-size: 18px;
63
  font-weight: 400;
64
}
65

    
66
.uk-flex-space-between {
67
  justify-content: space-between;
68
}
69

    
70
.uk-container-large {
71
  max-width: 1600px;
72
}
73

    
74
.uk-container-expand {
75
  max-width: none;
76
}
77

    
78
.uk-container-center {
79
  margin-left: auto;
80
  margin-right: auto;
81
}
82

    
83
.uk-navbar-nav > li > a, .uk-navbar-nav > li.uk-active > a {
84
  font-size: 14px;
85
  font-weight: bold;
86
  letter-spacing: 0px;
87
  color: #000;
88
}
89

    
90
.large-beta-indication {
91
  height: 83px;
92
  position: fixed;
93
  top: 0;
94
  left: 0;
95
  z-index: 10000;
96
}
97

    
98
.medium-beta-indication-nonFixed {
99
  height: 65px;
100
  position: absolute;
101
  top: 0;
102
  left: 0;
103
  z-index: 10000;
104
}
105

    
106
.medium-beta-indication-fixed {
107
  height: 65px;
108
  position: fixed;
109
  top: 0;
110
  left: 0;
111
  z-index: 10000;
112
}
113

    
114
.uk-text-muted {
115
  color: var(--muted-color) !important;
116
}
117

    
118
/*#sect-overview, #sect-tabs {*/
119
  /*padding: 20px 0;*/
120
/*}*/
121

    
122
.greySection {
123
  /*background-color: #F0F0F0;*/
124
  background-color: #F9FBFC;
125
}
126

    
127
a {
128
  color: var(--link-color);
129
}
130

    
131
a:hover, a:focus, a:active {
132
  color: var(--link-hover-color);
133
}
134

    
135
.mapContainer {
136
  /*background: #F7F7F7 0% 0% no-repeat padding-box;*/
137
  /*border: 1px solid #E0E0E0;*/
138
  /*opacity: 0.4;*/
139
  /*padding: 15px;*/
140
  position: relative;
141
  height: 100%;
142
}
143

    
144
.mapContainerEmbed {
145
  height: 100%;
146
}
147

    
148
.map {
149
  /*height: 398px;*/
150
  /*border: 1px solid #707070;*/
151
  /*margin: 15px;*/
152
  position: absolute;
153
  height: 88%;
154
  width: 100%;
155
}
156

    
157
.mapControls {
158
  /*position: absolute;*/
159
  bottom: 20px;
160
}
161

    
162
.uk-nav-label {
163
  width: 12px;
164
  height: 12px;
165
  display: inline-block;
166
  vertical-align: -1px;
167
  margin-right: 8px;
168
  border-radius: 50%;
169
}
170

    
171
.uk-nav-horizontal li {
172
  display: inline-block;
173
}
174

    
175
.uk-nav > li > a {
176
  padding: 5px 15px;
177
}
178

    
179
.uk-nav-side > li > a {
180
  color: #444;
181
}
182

    
183
.mapControls .text {
184
  opacity: 0.5;
185
}
186

    
187
.mapControls .text.active {
188
  opacity: 1;
189
}
190

    
191
.dark-blue-box {
192
  background: #002D60 0% 0% no-repeat padding-box;
193
  border: 1px solid #707070;
194
  border-radius: 2px;
195
  opacity: 1;
196
  color: #fff;
197
}
198

    
199
.dark-blue-box a, .dark-blue-box a:hover, .dark-blue-box a:focus {
200
  color: #fff;
201
}
202

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

    
211
.dark-grey-box h3 {
212
  color: #fff;
213
}
214

    
215
.dark-grey-box a, .dark-grey-box a:hover, .dark-grey-box a:focus {
216
  color: #fff;
217
}
218

    
219
.openaire-symbol-wrapper {
220
  background-color: #fff;
221
  border-radius: 50%;
222
  padding: 12px 10px 17px 13px;
223
}
224

    
225

    
226
.infoBox {
227
  /*font-weight: 300;*/
228
  /*font-size: 15px;*/
229

    
230
  background: #FFFFFF 0% 0% no-repeat padding-box;
231
  box-shadow: 0px 2px 6px #00000038;
232
  border-radius: 3px;
233
  opacity: 1;
234
}
235

    
236
.infoBox h3 {
237
  font-weight: bold;
238
}
239

    
240
.infoBox ul {
241
  padding-left: 18px;
242
}
243

    
244
.infoBox ul li {
245
  margin-bottom: 20px;
246
  letter-spacing: 0px;
247
  line-height: 27px;
248
}
249

    
250
.dark-blue-box h3 {
251
  color: #fff;
252
}
253

    
254
a.backToOriginalInfoBox, a.backToOriginalInfoBox:hover, a.backToOriginalInfoBox:focus  {
255
  color: #fff;
256
}
257

    
258
.greyBoldDivider {
259
  border: 1px solid #E0E0E0;
260
}
261

    
262
.numbers .number {
263
  font-size: 16px;
264
}
265

    
266
div.indicator {
267
  display: flex;
268
}
269

    
270
div.indicator span {
271
  padding-right: 10px;
272
}
273

    
274
.primary {
275
  color: var(--primary-color);
276
}
277

    
278
.publications {
279
  color: var(--publication-color);
280
}
281

    
282
.datasets {
283
  color: var(--dataset-color);
284
}
285

    
286
.software {
287
  color: var(--software-color);
288
}
289

    
290
.other {
291
  color: var(--other-color);
292
}
293

    
294
.repositories {
295
  color: var(--repository-color);
296
}
297

    
298
.journals {
299
  color: var(--journal-color);
300
}
301

    
302
.policies {
303
  color: var(--policies-color);
304
}
305

    
306
.indicatorCards {
307
  font-size: 13px;
308
}
309

    
310
.indicatorCards .md-card {
311
  box-shadow: 0px 2px 6px #00000038;
312
  border: 1px solid #E0E0E0;
313
  border-radius: 3px;
314
}
315

    
316
/********* Mock chart for country **********/
317
.epc_chart {
318
  display: block;
319
  position: relative;
320
}
321

    
322
.epc_chart_text {
323
  position: absolute;
324
  top: 0;
325
  left: 0;
326
  right: 0;
327
  bottom: 0;
328
  text-align: center;
329
  font: 400 20px/110px Roboto,sans-serif;
330
}
331

    
332
/********************************************/
333

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

    
348
.md-btn {
349
  border-radius: 23px;
350
  padding: 7px 25px;
351
  font: 500 14px / 31px 'Open Sans', sans-serif !important;
352
}
353

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

    
368
.md-btn-primary:hover, .md-btn-primary:focus, .md-btn-primary:active {
369
  background: var(--secondary-color) 0% 0% no-repeat padding-box;
370
}
371

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

    
387
.number {
388
  font-weight: bold;
389
}
390

    
391
#sect-tabs .uk-tab > li > a {
392
  text-transform: none;
393
}
394

    
395
.uk-tab > li.uk-active > a {
396
  border-bottom-color: var(--primary-color);
397
}
398

    
399
.uk-tab > li > a:hover, .uk-tab > li > a:focus {
400
  background: none;
401
  color: #212121;
402
  border-bottom-color: var(--secondary-color);
403
}
404

    
405
.uk-tab::before {
406
  border-bottom: none;
407
}
408

    
409
.dataContainer {
410
  background: #F9fbfc 0% 0% no-repeat padding-box;
411
  border: 1px solid #E0E0E0;
412
}
413

    
414
.tabContent {
415
  padding: 30px 50px;
416
}
417

    
418
.uk-tab {
419
  display: flex;
420
}
421

    
422
.uk-tab > li.uk-active > a {
423
  font-weight: bold;
424
}
425
/*.uk-tab-center.uk-tab {*/
426

    
427
  /*position: relative;*/
428
  /*right: 50%;*/
429
  /*border: none;*/
430
  /*float: right;*/
431

    
432
/*}*/
433

    
434
.uk-subnav-pill > .uk-active > a {
435
  /*background: #1F73F7;*/
436
  background: var(--primary-color);
437
}
438

    
439
.dataView.uk-subnav-pill > * > * {
440
  width: 16px;
441
  height: 16px;
442
  padding: 8px;
443
  border-radius: 50%;
444
  border: 1px solid;
445
  display: inline-block;
446
}
447

    
448
.tabContent hr {
449
  margin: 30px 0;
450
}
451

    
452
.dataContent {
453
  background-color: #FFFFFF;
454
  border: 1px solid #E0E0E0;
455
  padding: 30px;
456
}
457

    
458
.goToDetailedViewLink {
459
  margin-top: -50px;
460
}
461

    
462
.actionButtons a, .actionButtonsCountryPage a {
463
  color: #000000;
464
}
465

    
466
.actionButtons a i, .actionButtonsCountryPage a i {
467
  color: var(--primary-color);
468
}
469

    
470
.md-card .md-card-toolbar {
471
  /*height: 48px;*/
472
}
473

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

    
483
.infoBox.md-card .md-card-toolbar h3 {
484
  color: #fff;
485
  font-size: 16px;
486
}
487

    
488
.md-card .md-card-toolbar .md-card-toolbar-actions {
489
  padding-top: 15px;
490
}
491

    
492
.md-card .md-card-content {
493
  padding: 20px;
494
}
495

    
496
/*.uk-table td {*/
497
  /*border-bottom: 1px solid #e0e0e0;*/
498
/*}*/
499

    
500
.uk-table th {
501
  text-transform: none;
502
}
503

    
504

    
505
a.publicationsSubnav {
506
  color: var(--publication-color) !important;
507
}
508

    
509
.uk-subnav-pill > .uk-active > a.publicationsSubnav {
510
  background: var(--publication-background-color);
511
}
512

    
513
a.datasetsSubnav {
514
  color: var(--dataset-color) !important;
515
}
516

    
517
.uk-subnav-pill > .uk-active > a.datasetsSubnav {
518
  background: var(--dataset-background-color);
519
}
520

    
521
a.softwareSubnav {
522
  color: var(--software-color) !important;
523
}
524

    
525
.uk-subnav-pill > .uk-active > a.softwareSubnav {
526
  background: var(--software-background-color);
527
}
528

    
529
a.otherSubnav {
530
  color: var(--other-color) !important;
531
}
532

    
533
.uk-subnav-pill > .uk-active > a.otherSubnav {
534
  background: var(--other-background-color);
535
}
536

    
537
/*a.publicationsSubnav, a.datasetsSubnav, a.softwareSubnav, a.otherSubnav {*/
538
  /*width: 16px;*/
539
  /*height: 16px;*/
540
  /*padding: 8px;*/
541
  /*!*border-radius: 50%;*!*/
542
  /*!*border: 1px solid;*!*/
543
  /*display: inline-block;*/
544
/*}*/
545

    
546
a.publicationsSubnav img, a.datasetsSubnav img, a.softwareSubnav img, a.otherSubnav img {
547
  vertical-align: baseline;
548
}
549

    
550

    
551
/**************** HEADER ****************/
552

    
553
/*.tm-header .uk-navbar-container {*/
554
  /*padding-top: 10px;*/
555
  /*padding-bottom: 15px;*/
556
/*}*/
557

    
558
.tm-header .uk-navbar-left {
559
  position: relative;
560
  z-index: 9999 !important;
561
}
562

    
563
.navbar .brand, .uk-logo {
564
  font-size: 24px;
565
  font-family: 'Open Sans';
566
  color: #666;
567
  text-decoration: none;
568
}
569

    
570
.tm-header .uk-logo {
571
  position: relative;
572
  z-index: 1000 !important;
573
  /*padding-left: 100px;*/
574
}
575

    
576
.uk-logo > img {
577
  max-height: 70px;
578
}
579

    
580
/********************************************/
581

    
582
/**************** FOOTER ****************/
583

    
584
.footerLink {
585
  color: #000;
586
  text-decoration: underline;
587
}
588

    
589
.footerImage {
590
  opacity: 0.8;
591
  float: left;
592
  margin-top: 7px;
593
}
594

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

    
597

    
598
#sidebar_main {
599
  position: fixed;
600
  right: 0;
601
  top:0;
602
  bottom:0;
603
  overflow-x: hidden;
604
  overflow-y: auto;
605
  /*background-color: #222;*/
606
  /*width: 260px;*/
607
  width: 20%;
608
  z-index:1;
609
}
610

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

    
629

    
630

    
631
/*#sc-sidebar-main {*/
632

    
633
  /*position: fixed;*/
634
  /*top: 48px;*/
635
  /*left: 0;*/
636
  /*bottom: 0;*/
637
  /*-webkit-box-sizing: border-box;*/
638
  /*box-sizing: border-box;*/
639
  /*width: 260px;*/
640
  /*z-index: 1300;*/
641
  /*border-right: 1px solid*/
642

    
643
  /*rgba(0,0,0,.08);*/
644

    
645
  /*background:*/
646

    
647
    /*#fff;*/
648
  /*display: -webkit-box;*/
649
  /*display: -ms-flexbox;*/
650
  /*display: flex;*/
651
  /*-webkit-box-orient: vertical;*/
652
  /*-webkit-box-direction: normal;*/
653
  /*-ms-flex-direction: column;*/
654
  /*flex-direction: column;*/
655

    
656
/*}*/
657

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

    
660
  /*padding: 0;*/
661

    
662
/*}*/
663

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

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

    
685
/*}*/
686

    
687
/*#sc-page-wrapper {*/
688

    
689
  /*height: calc(100% - 48px);*/
690
  /*-webkit-box-flex: 1;*/
691
  /*-ms-flex: 1;*/
692
  /*flex: 1;*/
693

    
694
/*}*/
695

    
696
/*#sc-page-wrapper {*/
697

    
698
  /*padding-left: 260px;*/
699
  /*-webkit-transition: padding 140ms ease-out;*/
700
  /*transition: padding 140ms ease-out;*/
701

    
702
/*}*/
703

    
704

    
705

    
706

    
707
/********************************************/
708

    
709
/*.contentSectionContainer .md-card-content {*/
710
  /*max-height: 300px;*/
711
/*}*/
712

    
713
.contentSectionContainer .md-card-content img {
714
  height:  350px;
715
  width: 100%;
716
}
717

    
718
/*.contentSectionContainer .md-card-content {*/
719
  /*text-align: center;*/
720
/*}*/
721

    
722

    
723

    
724
.progress {
725
  height: 20px;
726
  /*margin-bottom: 20px;*/
727
  overflow: hidden;
728
  background-color: #f5f5f5;
729
  border-radius: 4px;
730
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
731
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
732
}
733

    
734
.progress {
735
  height: 12px;
736
  background-color: #e9ecee;
737
  background-image: none;
738
  box-shadow: none;
739
  filter: none;
740
}
741

    
742
.progress {
743
  /*margin-bottom: 10px;*/
744
}
745

    
746
.progress {
747
  /*margin-top: 3px;*/
748
  /*width: 85px;*/
749
  /*display: inline-block;*/
750
  width: 50%;
751
}
752

    
753
.progress-bar {
754

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

    
769
}
770

    
771
.progress-bar {
772

    
773
  box-shadow: none;
774
  border-radius: 3px;
775
  background-color: #0090D9;
776
  background-image: none;
777
  -webkit-transition: all 1000ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
778
  transition: all 1000ms 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
  -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
781
  -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
782
  -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
783
  -o-transition-timing-function: 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
  float: left;
786
  filter: none;
787

    
788
}
789

    
790
.progress-bar-publications {
791
  /*background-color: #F6C4D8;*/
792
  background-color: var(--publication-background-color);
793
  background-image: none;
794
}
795

    
796
.progress-bar-datasets {
797
  /*background-color: #D6CBEB;*/
798
  background-color: var(--dataset-background-color);
799
  background-image: none;
800
}
801

    
802
.progress-bar-repositories {
803
  /*background-color: #ADD3E0;*/
804
  background-color: var(--repository-background-color);
805
  background-image: none;
806
}
807

    
808
.progress-bar-journals {
809
  /*background-color: #FBE8B1;*/
810
  background-color: var(--journal-background-color);
811
  background-image: none;
812
}
813

    
814

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

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

    
825

    
826
/**************** BREADCRUMB ****************/
827

    
828
.uk-breadcrumb > :last-child > * {
829
  color: var(--primary-color);
830
}
831

    
832
.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
833
  content: ">";
834
}
835

    
836
/********************************************/
837

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

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

    
848

    
849
.demo-chart {
850
  /*max-height: 600px;*/
851
  height: 65vh;
852
}
853

    
854
/********* LOADERS *********/
855

    
856
.loader {
857
  color: var(--primary-color);
858
  margin: 25% auto;
859
}
860

    
861
.whiteFilm {
862
  background: #ffffff;
863
  z-index: 105;
864
  width: 100%;
865
  height: 100%;
866
  opacity: 0.7;
867
  position: absolute;
868
  top: 0;
869
  left: 0;
870

    
871
  display: flex;
872
  align-items: center;
873
}
874

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

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

    
890
.lastUpdateInfo {
891
  opacity: 0.4;
892
  color: #000;
893
  letter-spacing: 0px;
894
}
895

    
896
.entitiesContainer {
897
  height: 300px;
898
  display: flex;
899
  align-items: flex-end;
900
}
901

    
902
.publicationsColumn {
903
  /*background-color: #f181ae;*/
904
  background-color: var(--publication-color);
905
  box-shadow: 3px 3px 6px #00000029;
906
  opacity: 1;
907
  z-index: 10;
908
}
909

    
910
.publicationsDot {
911
  background-color: var(--publication-color);
912
  /*width: 50px;*/
913
  width: 35px;
914
  height: 33px;
915
  border-radius: 50%;
916
}
917

    
918
.datasetsColumn {
919
  background-color: var(--dataset-color);
920
  box-shadow: 3px 3px 6px #00000029;
921
  opacity: 1;
922
  z-index: 8;
923
}
924

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

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

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

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

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

    
963
.entityColumnContent {
964
  color: #fff;
965
  width: 100%;
966
  height: 100%;
967
  display: flex;
968
  flex-direction: column;
969
  justify-content: center;
970
  text-align: center;
971
}
972

    
973
hr.entitiesDivider {
974
  border: 2px solid #B4B4B4;
975
  margin-left: -90px;
976
  margin-right: -50px;
977
  margin-top: 0px;
978
}
979

    
980
.entityLegendContent {
981
  display: flex;
982
  padding-right: 40px;
983

    
984
}
985

    
986

    
987

    
988

    
989
.countryPageHeader {
990
  display: flex;
991
  justify-content: space-between;
992
}
993

    
994

    
995
.chartCard.md-card {
996
  box-shadow: 1px 10px 12px #00000026;
997
  border: 1px solid #E0E0E0;
998
  border-radius: 5px;
999
}
1000

    
1001

    
1002
/********* DONUT - CIRCLE ********/
1003

    
1004
.circular-chart {
1005
  display: block;
1006
  margin: 10px auto;
1007
  max-width: 80%;
1008
  /*max-height: 250px;*/
1009
  max-height: 110px;
1010
}
1011

    
1012
.circle-bg {
1013
  fill: none;
1014
  stroke: #eee;
1015
  stroke-width: 3.8;
1016
}
1017

    
1018
.circle {
1019
  fill: none;
1020
  /*stroke-width: 2.8;*/
1021
  stroke-width: 4.2;
1022
  stroke-linecap: round;
1023
  animation: progress 1s ease-out forwards;
1024
}
1025

    
1026
@keyframes progress {
1027
  0% {
1028
    stroke-dasharray: 0 100;
1029
  }
1030
}
1031

    
1032
.circular-chart.publications .circle {
1033
  stroke: var(--publication-color);
1034
}
1035

    
1036
.circular-chart.datasets .circle {
1037
  /*stroke: #BB9CE6;*/
1038
  stroke: var(--dataset-color);
1039
}
1040

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

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

    
1049
.percentage {
1050
  fill: #666;
1051
  font-family: sans-serif;
1052
  font-size: 0.5em;
1053
  text-anchor: middle;
1054
}
1055

    
1056
/*********************************/
1057

    
1058
/********* MAP ********/
1059

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

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

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

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

    
1080
/*********************************/
1081

    
1082
/********* MENU ********/
1083

    
1084
.uk-navbar-dropdown {
1085
  width: 280px;
1086
  padding: 25px 0px;
1087
}
1088

    
1089
.uk-navbar-dropdown-nav > li {
1090
  padding: 0px 25px;
1091
}
1092

    
1093
.uk-navbar-dropdown-nav > li > a, .uk-navbar-dropdown-nav > li > a:hover {
1094
  color: #212121;
1095
}
1096

    
1097
.uk-navbar-dropdown-nav > li:hover {
1098
  color: #212121;
1099
  background: var(--primary-color-background) 0% 0% no-repeat padding-box;
1100
  opacity: 1;
1101
}
1102

    
1103

    
1104
/*********************************/
1105

    
1106

    
1107
/**************** OFF-Canvas menu ****************/
1108

    
1109
.custom-offcanvas-close {
1110
  position: relative;
1111
  right: 0;
1112
  top: 0;
1113
}
1114

    
1115
.uk-offcanvas-bar-light {
1116
  text-transform: uppercase;
1117
}
1118

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

    
1132
.uk-nav-sub a {
1133
  padding: 2px 15px;
1134
}
1135

    
1136
.uk-offcanvas-bar-light .uk-nav-default > li > a, .uk-offcanvas-bar-light .uk-nav-default .uk-nav-sub a {
1137
  color: #333;
1138
}
1139

    
1140
.uk-nav-default .uk-nav-sub a:hover {
1141
  color: var(--secondary-color);
1142
}
1143

    
1144
.uk-offcanvas-bar-light .uk-nav-default > li.uk-active > a, .uk-offcanvas-bar-light .uk-nav-default > li > a:hover,
1145
.uk-offcanvas-bar-light .uk-nav-default > li > a.uk-active, .uk-offcanvas-bar-light .uk-nav-default > li > a:focus,
1146
.uk-offcanvas-bar-light .uk-nav-default > li > a:active {
1147
  color: var(--secondary-color);
1148
}
1149

    
1150
.uk-offcanvas-bar-animation {
1151
  transition: left 0.3s ease-out;
1152
}
1153

    
1154
@media (min-width: 960px) {
1155
  .uk-offcanvas-bar-light {
1156
    left: -350px;
1157
    width: 350px;
1158
    padding: 40px 40px;
1159
  }
1160
}
1161

    
1162
.uk-offcanvas-flip .uk-offcanvas-bar-light {
1163
  left: auto;
1164
  right: -270px;
1165
}
1166

    
1167
.uk-offcanvas-flip .uk-offcanvas-bar-animation {
1168
  transition-property: right;
1169
}
1170

    
1171
.uk-offcanvas-flip .uk-open > .uk-offcanvas-bar-light {
1172
  left: auto;
1173
  right: 0;
1174
}
1175

    
1176
@media (min-width: 960px) {
1177
  .uk-offcanvas-flip .uk-offcanvas-bar-light {
1178
    right: -350px;
1179
  }
1180
}
1181

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

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

    
1191
.uk-open > .uk-offcanvas-bar-light {
1192
  left: 0;
1193
}
1194

    
1195
.uk-close::after {
1196
  opacity: 0 !important;
1197
  color: #fff;
1198
  content: '';
1199
  font-family: "Material Icons";
1200
}
1201

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

    
1204

    
1205
/********* METHODOLOGY ********/
1206

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

    
1209
.terminologySection table {
1210
  font-size: 14px;
1211
  background-color: #FFFFFF;
1212
  width:100%;
1213
  table-layout: fixed;
1214
  overflow-wrap: break-word;
1215
}
1216

    
1217
.terminologySection table th {
1218
  width: 20%;
1219
}
1220

    
1221
.terminologySection table th, .terminologySection table td {
1222
  border: 1px solid #DEDEDE;
1223
  padding: 25px 40px;
1224
  vertical-align: top;
1225
  text-align: start;
1226
}
1227

    
1228
.terminologySection table th.important {
1229
  background-color: var(--primary-color-background);
1230
}
1231

    
1232
.terminologySection ul.portal-circle {
1233
  list-style: none;
1234
  padding-left: 40px;
1235
  font-family: "Open Sans", sans-serif;
1236
}
1237

    
1238
.terminologySection ul.portal-circle li {
1239
  margin: 0 0 2px 0;
1240
  position: relative;
1241
}
1242

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

    
1253
@media only screen and (max-width: 959px) {
1254
  /*.terminologySection table th {*/
1255
    /*width: 50%;*/
1256
  /*}*/
1257

    
1258
  .terminologySection ul.portal-circle {
1259
    padding-left: 20px;
1260
  }
1261
}
1262

    
1263
/********* Overview ********/
1264

    
1265
@media only screen and (min-width: 640px) {
1266
  .how .first > div:first-child {
1267
    position: relative;
1268
  }
1269

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

    
1284
  .how .second > div:first-child {
1285
    position: relative;
1286
    padding: 0 22% 0 22%;
1287
  }
1288

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

    
1303
  .how .third {
1304
    position:  relative;
1305
  }
1306

    
1307
  .how .third > div:first-child {
1308
    padding: 0 12% 0 12%;
1309
  }
1310

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

    
1327
  .how .fourth {
1328
    padding: 10% 3% 0 3%;
1329
  }
1330

    
1331
  .how .fourth > div:first-child {
1332
    position:  relative;
1333
    padding: 0 15% 0 15%;
1334
  }
1335

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

    
1350
  .how .fifth {
1351
    padding: 10% 2% 0 2%;
1352
  }
1353

    
1354
  .how .fifth > div:first-child {
1355
    position:  relative;
1356
  }
1357

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

    
1372
  .how .sixth {
1373
    padding: 10% 5% 0 0;
1374
  }
1375

    
1376
  .how .sixth > div:first-child {
1377
    padding: 0 15% 0 15%;
1378
  }
1379

    
1380
  .how .final {
1381
    padding: 10% 20% 0 20%;
1382
  }
1383

    
1384
  .how .final > div:first-child {
1385
    position: relative;
1386
  }
1387

    
1388
  .how .final img {
1389
    display: block;
1390
    margin-left: auto;
1391
    margin-right: auto;
1392
  }
1393

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

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

    
1426
@media only screen and (min-width: 960px) {
1427
  .how .third:after {
1428
    bottom: -6%;
1429
  }
1430
}
1431

    
1432
@media only screen and (min-width: 1200px) {
1433
  .how .third:after {
1434
    bottom: -10%;
1435
    left: 25%;
1436
    width: 25%;
1437
  }
1438
}
1439

    
1440
@media only screen and (max-width: 639px) {
1441
  .how .first {
1442
    position: relative;
1443
    padding-bottom: 30%;
1444
  }
1445

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

    
1460
  .how .second {
1461
    position: relative;
1462
    padding: 0 15% 30% 15%;
1463
  }
1464

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

    
1479
  .how .third {
1480
    position:  relative;
1481
    padding: 0 5% 30% 5%;
1482
  }
1483

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

    
1498
  .how .fourth {
1499
    position:  relative;
1500
    padding: 0 0 30% 0;
1501
  }
1502

    
1503
  .how .fourth > div:first-child {
1504
    padding: 0 10% 0 10%;
1505
  }
1506

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

    
1521
  .how .fifth {
1522
    position:  relative;
1523
    padding: 0 2% 30% 2%;
1524
  }
1525

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

    
1540
  .how .sixth {
1541
    padding: 0 5% 30% 0;
1542
  }
1543

    
1544
  .how .sixth > div:first-child {
1545
    padding: 0 15% 0 15%;
1546
  }
1547

    
1548
  .how .final {
1549
    padding: 20% 0 20% 0;
1550
  }
1551

    
1552
  .how .final > div:first-child {
1553
    position: relative;
1554
  }
1555

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

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

    
1587

    
1588
/*********************************/
1589

    
1590
/********* MOBILE ********/
1591
@media only screen and (max-width: 960px) {
1592

    
1593
  body {
1594
    background: #F9FBFC;
1595
  }
1596

    
1597
  ::-webkit-scrollbar {
1598
    width: 0px;
1599
    background: transparent; /* make scrollbar transparent */
1600
  }
1601

    
1602
  .uk-navbar-container:not(.uk-navbar-transparent) {
1603
    background: #F9FBFC;
1604
  }
1605

    
1606
  .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
1607
    min-height: 60px;
1608
  }
1609

    
1610
  .uk-logo > img {
1611
    max-height: 125px;
1612
  }
1613

    
1614
  .uk-navbar-toggle-icon {
1615
    color: var(--primary-color);
1616
  }
1617

    
1618
  .searchForCountry.uk-search.uk-search-default {
1619
    width: 100%;
1620
    background: #FFFFFF 0% 0% no-repeat padding-box;
1621
    border: 1px solid #C7C7C7;
1622
    border-radius: 4px;
1623
  }
1624

    
1625
  .searchForCountry.uk-search .uk-search-icon {
1626
    color: #4687f4;
1627
    z-index: 10;
1628
  }
1629

    
1630
  .progress {
1631
    width: 100%;
1632
  }
1633

    
1634
  .overviewMobile .number.big {
1635
    font-size: 24px;
1636
  }
1637

    
1638
  .overviewMobile {
1639
    font-size: 12px;
1640
  }
1641

    
1642
  .goToDetailedViewLink {
1643
    text-align: center;
1644
    margin-top: 0px;
1645
  }
1646

    
1647
  .leadingOpenScienceCard {
1648
    font-size: 10px;
1649
  }
1650

    
1651
  .leadingOpenScienceCard .number {
1652
    font-size: 14px;
1653
  }
1654

    
1655
  .leadingOpenScienceCard .countryName {
1656
    font-size: 16px;
1657
    font-weight: bold;
1658
  }
1659

    
1660
  .footerSection {
1661
    text-align: center;
1662
    background-color: #fff;
1663
  }
1664

    
1665
  .footerImage {
1666
    opacity: 0.8;
1667
    float: none;
1668
    margin-top: 0px;
1669
  }
1670

    
1671
  [class*="uk-navbar-dropdown-bottom"] {
1672
    margin-top: -5px;
1673
    left: 200px !important;
1674
  }
1675

    
1676
  .tm-header-mobile .uk-nav-divider {
1677
    margin: 15px 0;
1678
  }
1679

    
1680
  .tm-header-mobile .smallHeader {
1681
    background: #FFFFFF 0% 0% no-repeat padding-box;
1682
    box-shadow: 0px 3px 6px #00000029;
1683
    opacity: 1;
1684
  }
1685

    
1686
  .continentPageEntitiesOverview .number.big {
1687
    font-size: 24px;
1688
  }
1689

    
1690
  .continentPageEntitiesOverview .entityName {
1691
    font-size: 16px;
1692
    font-weight: 600;
1693
  }
1694

    
1695
  .uk-tab {
1696
    flex-wrap: nowrap;
1697
    overflow-x: auto;
1698
    background: #fff;
1699
    padding-bottom: 15px;
1700
    padding-top: 10px;
1701
    margin-right: -20px;
1702
  }
1703

    
1704
  .entitiesContainer {
1705
    margin-left: 0px;
1706
    height: 200px;
1707
  }
1708

    
1709
  hr.entitiesDivider {
1710
    margin-left: -15px;
1711
    margin-right: -15px;
1712
  }
1713

    
1714
  .dataContainer {
1715
    border: none;
1716
  }
1717

    
1718
  .tabContent {
1719
    padding: 30px 0px;
1720
  }
1721

    
1722
  .dataContainer .tabContent {
1723
    padding: 0px;
1724
  }
1725

    
1726
  .autocomplete-container .input-container input {
1727
    padding: 0 15px 0 40px !important;
1728
  }
1729
}
1730

    
(3-3/4)