@import url('../fonts/style.css');
  body{
  	font-family: 'Roboto', sans-serif;
    /* background-image: url('../images/Textured Background (1).png'); */
  }
  .css-chart {
  display: inline-block;
  position: relative;
  min-width: var(--widget-size);
}
.left-music-image{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 10%;
  bottom: 0px;
 
}
.font-color-link{
  color: #af5417;
  text-decoration: none;
  list-style-type: none;
}
.play-button {
  position: fixed;
  top: 5%; 
  left: 95%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1em 0 1em 2em;
  border-color: transparent transparent transparent #000;
  opacity: .75; 
   
}
/*.pause-button {
  position: fixed;
  top: 5%; 
  left: 90%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width:  1em;
  border-color: transparent transparent transparent #000;
  opacity: .75; 
   
}*/
.play-button:hover {
  background-color: rgba(0, 0, 0, .5);
}

.play-button:hover  {
  opacity: 1;
}
 .img-logo {
  position: absolute;
  bottom: 53%;
  left: 45.2% ;
  width: 18%;
  /* z-index: 1; */
  /*margin: 5em 15em 1em 5em;*/
 

 }

.top-title-1 {
  position: absolute;
  bottom: 90.85%;
  left: 40.1% ;
  width: 20%;
  color: #af5417;
  z-index: 1;
  font-size: 2vw;
  margin-right: 5em;
  margin-left: 2.5em ;
  word-spacing: normal;
  font-weight: bold;
 

}

.top-title-2 {
  position: absolute;
  bottom: 88.85%;
  left: 42.5% ;
  width: 40%;
  color: #af5417;
  z-index: 1;
  font-size: 0.8vw;
  margin-right: 5em;
  margin-left: 2.5em;
  word-spacing: normal;
  font-weight: bold;

}

.width-right-icon{
  width: 70px;
}
.bottom-title-1 {
  position: absolute;
  bottom: 1.85%;
  left: 42.1% ;
  width: 40%;
  color: #00a764;
  z-index: 1;
  font-size: 2vw;
  margin-right: 5em;
  margin-left: 2.5em ;
  font-weight: normal;

}
.line-chart {
  list-style: none;
  margin: 0;
  padding: 0;

}

.data-point {
  background-color: var(--fillColor);
  /*border: solid var(--fillColor);*/
  border-radius: 50%;
  bottom: calc(var(--y) - 4px);
  height: 8px;
  left: calc(var(--x) - 5px);
  position: absolute;
  width: 8px;
  z-index: 1;
  cursor: pointer;
  
}
.left-x-axis{
	margin-left: 9.15%;
	margin-bottom:1.1%;
}
.data-point:hover .show{
  display: block;
  /* width: 30%; */
  

}
 .img-logo:hover {
  transition: 1s;
  width: 30%;
  bottom: 48%;
  left: 39.5%;
  cursor: hand;
 }


.data-point:hover {
   transition: 0.3s;
  height: 12px;
  width: 12px;
  background-color: lightgreen;
  box-shadow: 0 0 0 4px whitesmoke;
}
.point-text {
  position: absolute;
  bottom: var(--Point-Text-y);
  left: var(--Point-Text-x);
  color: var(--Point-Text-Color);
  font-size: var(--Point-Text-Font-Size) ;
  width: var(--Point-Text-Width) ;
  text-decoration: none;
  list-style-type: none;
  text-align: var(--Point-Text-Align);
  /*display: none;*/
  line-height: 1.2;
}



.line-segment {
  /*margin-top: ;*/
  /*transition: 0.5s;*/
  background-color: gray;
  bottom: var(--y);
  height: 0.9px;
  left: var(--x);
  position: absolute;
  transform: rotate(calc(var(--angle) * 1deg));
  transform-origin: left bottom;
  width: calc(var(--hypotenuse) * 1%);
}


.tooltip-div {
  position: absolute;
  width: 150px;
  background: white;
  padding: 0px px;
  margin: 0px;
 font-size: 13px;
  /* border-radius: 100%; */
  color: black;
  transition: 0.5s;
  display: none;
  /* top: 10px; */
  /* bottom:10%; */

} 

 .tooltip-div:before,
.tooltip-div:after {
  /* position: absolute; */
  /* content: ''; */
  opacity: 10;
  transition: 0.4s ;

}

.tooltip-div:before {
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: white transparent transparent transparent;
  /* top: -10px; */
  font-size: 2em;
   transform: translateY(20px);

}


.tooltip-div {
  /* content: ''; */
  background-color: white;
  width: 120px;
  height: 80px;
  font-size:10px;
  font-weight: 300;
  top: -105px;
  left: -6px;
  padding: 3px;
  /* margin-bottom: 10px; */
  border-radius: 5px;
  /* letter-spacing: 1px; */
  transform: translateY(20px);
  opacity: 1 !important;
  color:#8E3E09;

} 
.tooltip-icons{
  bottom:2px;
  padding-left: 4px;
}
.Header {
  color: #8E3E09;
  font-size: 18px;
  font-weight: bolder;
}
.Subject {
  color: #8E3E09;
  font-size: 13px;
  font-weight: normal;
}
/*.fade-item {
    transition: 0.2s;
    opacity: 0;
}

.fadein {
    animation: fadeIn  1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}*/

 
.modal-ilme {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  padding-top: 1.3%; /* Location of the box */
  padding-bottom: 1.3%; /* Location of the box */
  padding-left: 12%; /* Location of the box */
  padding-right: 12%; /* Location of the box */
  left: 0;
  top: 0;
   width: 100%; 
   height: 100%; 
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.modal-content-ilme {
  /* background-color: #fefefe;*/
  /* background-image: url('../images/Textured Background (1).png'); */
  margin: auto; 
  padding-top: 7.8%; 
  /* padding-bottom: 7.8%;  */
  padding-left: 7.8%; 
   padding-right: 7.8%; 
   border: 1px solid #888; 
   width: 100%;
  height: 100%; 
}


.close-ilme {
  float: right;
    background: url(..//images/close.svg);
    width: 27px;
    height: 27px;
    cursor: pointer;
}

#object-details h2 {
    text-align: left;
    width: 880px;
    font-size: 18px;
    text-transform: uppercase;
    margin: 0;
    color: #8E3E09;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid #8E3E09;
    font-weight: bold;
}
.border-b {
  border-bottom: 1px solid #8E3E09;
}
.border-t {
  border-top: 1px solid #8E3E09;
}
.text-ilme{
  color: #8E3E09;
  list-style-type: none;
}
#object-details-video h2 {
  text-align: left;
  width: 880px;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
  color: #8E3E09;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid #8E3E09;
  font-weight: bold;
}
#right-side-object-title{
  /*height: 120px;*/
  margin-bottom: 10px;
}

#right-side-object-title h3 {
    /*margin: 0;*/
    color: #8E3E09;
    font-size: 14px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #8E3E09;
    font-weight: bold;
}
.object-description {
    display: inline-block;
    box-sizing: border-box;
    padding-right: 2px;
    width: 100%; 
    height: 830px;
    overflow: auto;
    font-size: 14px;
    font-weight: 400;
    color: #8E3E09;
}
.position-back-icon{
  left:15%;
   top:8%;
}
.row-border{
  margin-bottom: 5%;
  border-bottom: 1px solid #8E3E09;
}
.border-blue{
  border-bottom: 1px solid #0087BC;
}
.close-ilme:hover,
.close-ilme:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
::-webkit-scrollbar {
  width: 7px;
  
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #8E3E09; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

 



  

 

  /* The Close Button */
  .close-ilme {
    float: right;
    background: url(../images/close.svg);
    width: 27px;
    height: 27px;
    cursor: pointer;
  }

  .close-ilme-video {
    float: right;
    background: url(../images/close.svg);
    width: 27px;
    height: 27px;
    cursor: pointer;
  }

  /* .audio-player {
    width: 15rem;
    height: 15rem;
  } */
  
  .icon-container {
    width: 100%;
    height: 150px;
    background-color: #4f2306;
    color: #fff;
    /* display: flex; */
    position: relative;
    justify-content: center;
    align-items: center;
  }
  
  .scroll {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
  }
  .scroll-text {
    display: inline-block;
    padding-left: 100%;
    padding-right: 100%;
    animation: scroll-left 10s linear infinite;
  }
  @keyframes scroll-left {
    100% {
      transform: translateX(-100%);
    }
  }

  .audio-icon {
     width: 30%;
     height: 30%;
     position: absolute;
     left: 30.5%;
     right: 25.5%;
     top: 30.5%;
     bottom: 25.5%;
     
  }

  .audio-text{
    width: 300px;
    position: absolute;
    left: 5%;
    right: 0%;
    top: 60.5%;
    bottom: 0%;
  }

  .audio-player {
    --player-button-width: 3em;
  }

  .controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 10px;
  }
  #play-logo-sound svg{
    background-color: transparent;
    border: 0;
    position: fixed;
    width: 3em;
    height: 3em;
    float: right;
    cursor: pointer;
    padding-top:20px;
    margin-right:50px ;
    
   
  }
  .player-button {
    background-color: transparent;
    border: 0;
    width: var(--player-button-width);
    height: var(--player-button-width);
    cursor: pointer;
    padding: 0;
  }
  .timeline {
    -webkit-appearance: none;
    width: calc(100% - var(--player-button-width));
    height: .5em;
    background-color: #e5e5e5;
    border-radius: 5px;
    background-size: 0% 100%;
    background-image: linear-gradient(#4f2306, #4f2306);
    background-repeat: no-repeat;
  }
  .timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: #4f2306;
  }
  
  .timeline::-webkit-slider-thumb:hover {
    background-color: #4f2306;
  }
  
  .timeline:hover::-webkit-slider-thumb {
    opacity: 1;
  }
  .timeline::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  .audio-player {
    --player-button-width: 3em;
    --sound-button-width: 2em;
    --space: .5em;
    
  }
  .timeline {
    width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
margin-right: var(--space);
   
}
.sound-button {
  background-color: transparent;
  color:#4f2306;
  border: 0;
  width: var(--sound-button-width);
  height: var(--sound-button-width);
  cursor: pointer;
  padding: 0;
}



g{
  stroke: #4f2306;
  background-color:#4f2306;
  stroke-width: 1;
  stroke-miterlimit: 10;

  
}
path {
  fill: #4f2306;
}
.audio-icon path {
  fill: white;
}
.audio-icon g {
  stroke: white;
  background-color:white;
  stroke-width: 1;
  stroke-miterlimit: 10;
}

.max-height-500{
  max-height: 500px !important;
}