/* Style overall */

body {
  font-family: Arial,sans-serif
}

.highcharts-container {
  height: calc(100vh -150px) !important;
}

footer{
  font-size: 80%;
  font-style: italic;
  text-align: center;
}

.selectlabel, .option span {
  padding-left: 1ex;
}

.text_nodata {
  height: 300px;
  text-align:center;
  padding-top: 100px;
  font-style:italic;
}

.option.disabled {
  color: silver;
  pointer-events: none;
}

.homebox{
  width: 200px;
  opacity: 0.8;
  color: white;
  font-size: 25px;
  font-weight: bold;
  border-radius: 10px;
  border-width: 3px;
  border-style: solid;
  border-bottom-color: #bbbbaa;
  margin:20px;
}

.homeboxsmall{
  height: 50px;
  width: 200px;
  opacity: 0.8;
  color: white;
  font-size: 15px;
  font-weight: bold;
  border-radius: 10px;
  border-width: 3px;
  border-style: solid;
  border-bottom-color: #bbbbaa;
  margin:20px;
}

.homeicon{
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  position: absolute;
  right: 50px;
  z-index: 0;
  font-size: 50px;
  color: rgba(0,0,0,.15);
}

span.uncertain, span.break {
  /*filter: blur(1px);*/
  opacity: 0.9;
}

span.uncertain:hover, span.break.hover {
  filter:none;
  opacity: 1;
}

span.uncertain::after {
  content: "u";
  vertical-align: super;
  font-size: 40%;
}

span.break::after {
  content: "b";
  vertical-align: super;
  font-size: 40%;
}

span.uncertain_break::after {
  content: "ub";
  vertical-align: super;
  font-size: 40%;
}


/*Style Overview PES */
.OPESboxesNoShow{
  visibility: hidden;
}

/*Style Summaryreport */
.summarymodalbody{
  background-color: whitesmoke;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-transform: capitalize;
}
.summarymodalcontent{
  border-radius: 10px;
  background-color:#bfd0e4;;
}
.summarybox{
  background-color: red;
}

/*Style HOME*/
.intro-header-index {
  /*padding-top: 30px;*/
  padding-bottom: 0;
  color: black;
  /*font-family: Roboto,'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;*/
  background-image: url("./img/learn_bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-right: -29px;
  margin-left: -29px;
  margin-top: -15px;
  min-height: 600px;
  padding-left: 30px;
  padding-right: 40px;
}


.carouselstyle {
  background-color: #bfd0e4;
  opacity: 0.8;
}
.titelcarousel {
  color: white;
  font-size: 280%;
  /* margin-left: 200px; */
  height: 1.5em;
  font-weight: bold;
  font-style: italic;
}

.titel_bluebar {
  font-size: 350%;
  font-style: normal;
  background: url(img/PES_logo.png);
  background-repeat: no-repeat;
  background-position-x: 16px;
  padding-left: 152px;
  background-size: auto 45px;
  overflow: visible;
}

.carousel-control {
  visibility: hidden;
}

.intro-photo-click{
  border-style: solid;
  border-width: 5px;
  border-color:white;
  height: 100%;
  width: 100%;
}


.rowbutton {
  margin-top: 4em;
}


.network{
  background-image: url("./img/network2.jpg");
  background-repeat: no-repeat;
  background-size: 450px 300px;

}
.data{
  background-image: url("./img/matrix2.jpg");
  background-repeat: no-repeat;
  background-size: 450px 300px;
}


.Agenda{
  background-image: url("./img/agenda2.jpg");
  background-repeat: no-repeat;
  background-size: 450px 300px;
}

.PESbackground{
  background-image: url("./img/PESbackground2.jpg");
  background-repeat: no-repeat;
  background-size: 450px 300px;
}




#f1_container {
  position: relative;
  margin: 10px auto;
  width: 90%;
  max-width:450px;
  height: 300px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}


.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  color: #004494;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}


.back.face.center.intro-photo-click{
    color: #271d6c;
    font-size: 120%;
    background-color: #bfd0e4;
    /* height: 300px; */
    width: 100%;
    position: relative;
    margin: 10px auto;
    z-index: 1;
    border: 0;
}


.bottontitle  {
    color: #ffffff;
    padding-top: 5%;
    font-size: 28px;
    font-weight: bold;
    /* font-style: italic; */
    text-align: center;
    margin-top: 90px;
    /* top: 50%; */
    vertical-align: middle;
    background-color: #bfd0e4;
    opacity: 0.8;
    hyphens: manual;
}

/* guide page */
.guide_block {
  margin-top: 20px;
  background-color: #ffffff;
}




















.intro-message {
  padding-top: 2%;
  padding-bottom: 2%;
  position: relative;
  text-align: center;
  font-size: 65%;
  background: rgba(0, 68, 148, 0.85);
  /* background-repeat: no-repeat; */
  /* background-position: right; */
  /* background-origin: content-box; */
  /* background-size: auto 64%; */
  margin-right: -40px;
}

.intro-message > h3 {
  text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

.intro-divider{
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding-bottom: 30px;
}

div.item, div.option {
  /*font-family: Roboto,'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;*/
  font-size: 90%;
}

div.option i{
  margin-left: 0.5ex;
  color: #ddd;
}

.indicator .item {
  /*font-family: Roboto,'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;*/
  font-size: 100%;
  font-weight: bold;
}

label.control-label {
  /*font-family: Roboto Condensed,'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;*/
}


/* Usability hack */
span.usability-high:before {
  content: "\f005";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
/*--adjust as necessary--*/
  color: #27ae60;
  margin-right: 1ex;
}

.sparkline {
  padding-left: 1ex;
}

a.summaryreports {
  color: #3c8dbc;
  font-weight: bold;
}

a.summaryreports:hover {
  color: #00c0ef;
}

/*Style Maturity tab header*/
.oneline {
  white-space: nowrap;
  display: inline-box;
}

.well {
  margin-bottom: 8px;
  padding-bottom: 5px;
}

i.fa-download {
  padding-top: 20px;
}

/* make sure that the annotation does not block mouse over events*/
g.highcharts-annotation, g.highcharts-annotations{
  pointer-events: none;
}

.ref-country {
  stroke-width: 1px;
  stroke: black;
}

/* define colors columnrange context adjusted */

.mapColorT {fill: "#008066";}
.mapColorH {background: "#4fe39b";}
.mapColorM {background-color: "#ba4ce6";}
.mapColorL {color: "#8000b3";}

/* define mouse pointer on data table rows that are clickable */
#shiny-tab-Mati .display tbody tr{
  cursor: pointer;
}


/* Dirty hack to style the tooltip of network*/
.vis-network + div {
  z-index: 300;
}

/* To prevent resizing of the indicator box */
.small-box p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.small-box p:hover {
    overflow: visible;
    white-space: nowrap;
    text-overflow: unset;
}

div.option {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dataTable th {
  vertical-align: bottom;
}


.leafbase {
  color: green;
  opacity: 0.8;
}

.leafnew {
  color: green;
  filter: drop-shadow(0px 0px 5px lightgreen);
}

.leafold {
  color: brown;
  opacity: 0.3;
}

.r1.leafbase {
  color: brown;
  opacity: 0.8;
}

.leaf {
  color: green;  
}

.r1.leaf {
  opacity: 0.6;
}

.r1.leafnew {
  color: green;
  opacity: 0.2;
}

.r1.leafold {
  color: brown;
  opacity: 1;
}

.vis-button {
  filter: grayscale(100%);
}

.modal-lg {
width: 100%;
height: calc(100vh -30px);
overflow-y: auto;
}



div.bg-blue, div.bg-yellow, div.bg-aqua {
  background-color: whitesmoke !important;
  border: 1px solid #bfd0e4;
  color: #004494!important;
}

h1 {
  color: #004494;
}


/* Timevis (agenda) style */
.vis-item.vis-selected {
  border: 2px solid black;
  box-shadow: 10px 10px 5px grey;
  background-color: #7cc3ff;
}

.meeting {
  background-color: blue;
  color: white;
}

.learning {
  background-color: green;
  color: white;
}

.webinar {
  background-color: yellow;
  color: white;
}

.workshop {
  background-color: orange;
  color: white;
}

.conference {
  background-color: red;
  color: white;
}

.selectedAgendaItem {
  border-style: solid;
  border-width: 5px;
  border-color: white;
  box-shadow: 10px 10px 5px grey;
}

/* end Timevis (agenda) style */


/*
guide styling
*/

.mermaid .node{
  cursor: pointer;
}

.mermaid .node rect,
.node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    fill: rgb(191, 208, 228);
    stroke: rgb(1, 68, 148);
    stroke-width: 1px;
}

.mermaid .node rect:hover,
.mermaid .node ellipse:hover,
.mermaid .node polygon:hover {
    fill: white;
}


.DiagrammeR g .label {
    font-family: Arial;
    font-size: 14px;
    color: rgb(1, 68, 148);
    pointer-events: none;
}