/*------------------------------------------FONTS---------------------------------------------------------------*/
/*
@font-face {
    font-family: gobold;
    src: url(/img/font/gobold_regular.otf);
  }
  @font-face {
    font-family: barlow;
    src: url(/img/font/barlow_regular.ttf);
  }
*/
/*--------------------------------------------BODY------------------------------------------------------*/
html {
    width:100%;
    height:100%;
}

body {
    width:100%;
    height:100%;
    margin:0px !important;
    display:flex;
}

/*****************************************BACKGROUND**********************************************************/
.background {
  background: url(/img/background/bg001.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/*------------------------------------------TREEVIEW---------------------------------------------------------------*/
/*
.left {
    width: 25%;
    display: flex;
    flex-direction : column;
    justify-content: flex-start;

    background-color : #1A1C1D;
    color : #C8A675;
}

.treeview {
    overflow-y:auto;

    align-items: flex-start;
    display: flex;
    flex-direction : column;
    justify-content: flex-start;

    background-color : #1A1C1D;
    color : #C8A675;
}

.resizer {
background-color: #C8A675;
cursor: ew-resize;
height: 100%;
width: 5px;
}

.countryName {
font-size : 16px;
margin-bottom : 5px;
}

.flagImg {
align-self: center;
height : 1 em;
margin-left : auto;
margin-right : auto;
}


ul {list-style : none;}
.treeclass summary::marker {display: none;}
.treeclass summary::-webkit-details-marker {display: none;}
ul li {position: relative; display:flex; flex-direction:row;}
ul li:last-child::after {display : none;}

.highlight:hover {
    font-weight : bold;
    color : #F3DCBB;
}

.highlight {cursor: pointer;}

summary:hover {
    font-weight : bold;
    color : #F3DCBB;
}

.topleft {
  width:100%;
  display:flex;
  flex-direction : row;
  justify-content: center;
  align-items: center;
}

.viewbutton{
  width : 30px;
  height : auto;
  align-self:flex-end;
}
*/
/*------------------------------------------TITLE---------------------------------------------------------------*/
/*
.main{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    color: #C8A675; 
    background-color : #1A1C1D;
}

.main2{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  color: #C8A675; 
  background-color : #1A1C1D;
}

.maintitle {
    font-family: gobold;
    letter-spacing: 1px;
    padding-left : 5px;
    display : flex;
    padding-top : 5px;
    padding-bottom : 5px;
    border-bottom : 1px solid #C8A675;

  }

/*------------------------------------------number inputs---------------------------------------------------------------*/
  /* Chrome, Safari, Edge, Opera */


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*firefox*/
input[type=number] {
  -moz-appearance: textfield;
  color: #C8A675; 
  background-color : #1A1C1D;
  border: 2px solid #C8A675;
  border-radius: 4px;
}

input[type=number]:focus {
    color : #F3DCBB; 
    border: 2px solid  #F3DCBB !important;
    outline: none !important;
}

input[type=number]:hover {
    color : #F3DCBB; 
}

input[type=text] {
  -moz-appearance: textfield;
  color: #C8A675; 
  background-color : #1A1C1D;
  border: 2px solid #C8A675;
  border-radius: 4px;
}

input[type=text]:focus {
    color : #F3DCBB; 
    border: 2px solid  #F3DCBB !important;
    outline: none !important;
}

input[type=text]:hover {
    color : #F3DCBB; 
}

input[type=password] {
  -moz-appearance: textfield;
  color: #C8A675; 
  background-color : #1A1C1D;
  border: 2px solid #C8A675;
  border-radius: 4px;
}

input[type=password]:focus {
    color : #F3DCBB; 
    border: 2px solid  #F3DCBB !important;
    outline: none !important;
}

input[type=password]:hover {
    color : #F3DCBB; 
}

/*------------------------------------------ table and buttons---------------------------------------------------------------*/


  .button {
    font-size: 14px  !important; 
    border : solid; 
    border-width: 0.2em;
    color: #C8A675; 
    background-color : #1A1C1D;
    font-weight : bold;
    border-radius: 10px;
  }

  .button:hover {
    color : #F3DCBB;
  }

  .menuTable {
    padding-left : 10px;
    margin-left:10px;
  }

  .menuSelect {
    color: #C8A675; 
    background-color : #1A1C1D;
    border: 2px solid #C8A675;
    border-radius: 4px;
  }

  .menuSelect:hover {
    color : #F3DCBB; 
    border: 2px solid  #F3DCBB !important;
  }

.tabQuiz {
    display:flex;
    flex-direction:row;
    margin-top : 5px;
    margin-bottom : 5px;
}

.spanQuiz {
    margin-left: auto;
    margin-right:10px;
    align-self : flex-end;
}

.treebutton {
  font-size : 12px;
  border-width : 0.1em !important;
  margin-top:1px;
  margin-bottom : 1px;
  margin-left : 8px;
}
/*------------------------------------------------COLORS-------------------------------------------------------*/

.green {background-color : #223B26;}
.green:hover {background-color : #226C32;}

.red {background-color : #4B262A;}
.red:hover {background-color : #932A35;}

.blue {background-color : #26384B;}
.blue:hover { background-color : #1C5395;}

.purple{ background-color : #5938FF }
.purple:hover {background-color : #7f00ff;}

.bluebutton {
  border : solid; 
  color: #C8A675; 
  background-color : #26384B;
  border-radius: 10px;
}

.bluebutton:hover {
  color : #F3DCBB;
  background-color : #1C5395;
}

.redbutton {
  border : solid; 
  color: #C8A675; 
  background-color : #4B262A;
  border-radius: 10px;
}

.redbutton:hover {
  color : #F3DCBB;
  background-color : #932A35;
}

.greenbutton {
  border : solid; 
  color: #C8A675; 
  background-color : #223B26;
  border-radius: 10px;
}

.greenbutton:hover {
  color : #F3DCBB;
  background-color : #226C32;
}



.hidden {
  display : none;
}

button {
  outline: none !important;
}

/************************************************************************search******************************************************************/
/*
.searchButton {
  height:2em;
  width:auto;
}

/*************************************************************************map styles****************************************************************/

   .map {
    z-index: 1;
    width:100%;
    height:100%;
    color : black;
   }

.infoQ {
    padding: 6px 8px;
    font: 12px/14px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
  }
  .infoQ h2 {
    margin: 0 0 5px;
    font-size: 16px;
    color: #777;
  }
  
  .infoQ h3 {
    margin: 0 0 5px;
    font-size: 14px;
    color: #777;
  }
  
  .infoTimer {
    padding: 6px 8px;
    /*font: 12px/14px Arial, Helvetica, sans-serif;*/
    font-size: 12px;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
  }
  .infoTimer h2 {
    margin: 0 0 5px;
    color: #777;
    font-size: 12px;
  }
  
  .infoError {
    padding: 6px 8px;
    font: 12px/14px Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
  }
  .infoError h3 {
    margin: 0 0 5px;
    color: #777;
  }
  
  
  .leaflet-popup-content-wrapper, .leaflet-popup.tip {
  background-color: "transparent";
  }

  .infoScore {
    font-size:28px;
  }

  /*------------------------------------------MEDIA---------------------------------------------------------------*/

/*
@media only screen and (min-width: 100px) {

    .maintitle { font-size: 20px; }
    .main { margin-left: 35px; }

    }

@media only screen and (min-width: 1024px) {

    .maintitle { font-size: 28px; }
    .main { margin-left:75px;}


    }

    @media ( width <= 700px) {
        .maintitle {font-size:16px;}
        .nomobile{display:none;}
        .tabQuiz{font-size:12px;}
        .button{font-size:12px !important;}
     }

     @media (width > 1023px) {
      .skipbutton {display:none;}
     }

     @media (width < 1024px) {

      .spanQuiz {display:none;}
      .tabQuiz {
        display:flex;
        flex-direction:column !important;}
      #quiz {
        width:calc(100%-35px);
      }
     }

/*************************************************menu img*************************************************************/
/*
.menuLine {
    margin-top:auto;
    align-self : center;
    display : block;
}

.imgMenu {
    max-height : 65px;
    width:auto;

}

img[alt="Google"] {
  display:none;
}





/*******************************************************SIDE MENU*******************************************************/


.sideMenuContainer {
  width:100%;
  flex:1;
  background-color : #1A1C1D;
  color: #C8A675;
  justify-content : center;
  align-items : center;
  overflow-y:auto;
  border-radius:20px;
  max-width:300px;
  opacity : 0.95;
}

.sideMenu{
  max-width: 600px;
  padding: 20px 12px 10px 20px;
  font-size: 15px;
  font-weight : normal;
  display : flex;
  flex-direction : column;
  border : 1px solid #C8A675;
  border-radius: 20px;
}

.sideMenu-heading{
  font-weight: bold;
  font-style: italic;
  border-bottom: 2px solid #C8A675;
  margin-bottom: 20px;
  font-size: 18px;
  padding-bottom: 3px;
}
.sideMenu label{
  display: block;
  margin: 0px 0px 15px 0px;
}
.sideMenu label > span {
  width: 100px;
  font-weight: normal;
  float: left;
  padding-top: 8px;
  padding-right: 5px;
}


.sideMenu input.input-field, .sideMenu .select-field{
  width: 48%;	
}



/***********************************************leaflet tooltips**************************************************/
.leaflet-tooltip-top:before, 
.leaflet-tooltip-bottom:before, 
.leaflet-tooltip-left:before, 
.leaflet-tooltip-right:before {
    border: none !important;
}


/******************************************sound button************************************************************/

@media ( width >= 1600px) {
.imgSound { width: 50px; height:50px;}
}

@media ( width < 1600px) {
  .imgSound { width: 25px; height:25px;}
  }