#main_div{
  width:100%;
  overflow:hidden;
  border:1px solid black;
  }

  
.hashs_span{
    margin-right:1em;

     
}

.Search {
      position: relative;
      margin-top: 1em;
     
}

#hash_container{
  float: left;
  width: 45%;
  border:1px solid green;
}

#html_hint_container{
  float: right;
  min-height:200px;
  width: 45%;
  border:1px solid yellow;
  overflow:hidden;
}

#html_files_container{
  width: 45%;
  border:1px dashed yellow;
}

#inner_html_hint_container{

  margin-left:2em;

  }
  
#hash_container_intern {
  
 
}

#hash_container_intern span{
   color:BEBEBE !important;
   font-family: var(--font-family-4);
   font-size:17px;

}

#hash_container_intern span:nth-child(even) {
  background: none;
  color:#0FBFE2 !important;
  border-bottom: 3px solid #102B39;
  opacity: 0.8;

}
#hash_container_intern span:nth-child(odd) {
  background: none;
  color:#A568C4 !important;
  border-bottom: 3px solid #102B39;
  opacity: 0.8;

}







  #html_files_container{
    float:left;
  }

#endframe{
height:255px;
width:100% !important;
}
      
#bookmarks_list{

  width:100%;
  display:inline-block;
  list-style: none;
  padding: 0;

}

#bookmarks_list > li{
  text-align: none;
  line-height: 2;
  background: slategrey;
  padding-left:15px;
}

#bookmarks_list:nth-child(odd){
  /*   background: #34495e; */
  }

#bookmarks_list li:nth-child(even) {
    background: #34495e;
}





/* 
@media (max-width: 1100px) { */

  .first_span_user{
    margin-left:45px;
  }

      
  #bookmarks_list > li{
    text-align: center;
  }

  #hash_container{
    float: none;
    width: 100% !important;
    border:1px solid green;
  }
  
  #html_hint_container{
    float: none;
    width: 100% !important;
    min-height:0px;
    border:1px solid yellow;    
  }

  #html_files_container{
    width: 100% !important;
    border:1px dashed yellow;
  }

  #inner_html_hint_container{
   
    margin-left:0em;
  
    }







.field {
  display:flex;
  position:realtive;
  margin-left:5em;
/*   margin-right:5em auto; */
  margin-top:1em;
/*   width:70%; */
  width:400px;
  flex-direction:row;
  box-shadow:
   1px 1px 0 rgb(136, 172, 212),
   2px 2px 0 rgb(136, 172, 212),
   3px 3px 0 rgb(136, 172, 212),
   4px 4px 0 rgb(136, 172, 212),
   5px 5px 0 rgb(136, 172, 212),
   6px 6px 0 rgb(136, 172, 212),
   7px 7px 0 rgb(90, 120, 139)
  ;
}

.field>input[type=text],
.field>button {
  display:block;
  font:1.2em 'Montserrat Alternates';
}

.field>input[type=text] {
  flex:1;
  padding:0.6em;
  border:0.2em solid rgb(90, 120, 139);
}

.field>button {
  padding:0.6em 0.8em;
  background-color:rgb(90, 120, 139);
  color:white;
  border:none;
}
      


li:hover{
    background-color: grey;
}

.data_li:hover{
/*     color:blue; */
/*     background-color:black; */
/*      border:1px solid white;  */
     font-weight:italic;
}
hr {
  clear: both;
  padding-top: 1em;
  border: 0;
  border-bottom: 1px solid grey;
}

.one{
    cursor:pointer;
    overflow: hidden;
}


.microlight {

     font-family : monospace;
    white-space : pre;
    background-color : #C4E4E8;
    color            : #052C36;
}





/* Clearing floats */
.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

/* .cf *{
  zoom: 1;
} */

/* Mini reset, no margins, paddings or bullets */
.menu,
.submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Main level */
.menu {			
  margin: 50px auto;
  width: 800px;
  /* http://www.red-team-design.com/horizontal-centering-using-css-fit-content-value */
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;	
}

.menu > li {
    z-index:99999;
/*   background: #34495e; */
   background: #87acd3;
  float: left;
  position: relative;
  transform: skewX(25deg);
}

.menu a {
  display: block;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-family: Arial, Helvetica;
  font-size: 14px;
}		

.menu li:hover {
/*   background: #e74c3c; */
  background: #34495e;
/*   background: #87acd3; */
  
}		

.menu > li > a {
  transform: skewX(-25deg);
  padding: 1em 2em;
}

/* Dropdown */
.submenu {
  position: absolute;
  width: 200px;
  left: 50%; margin-left: -100px;
  transform: skewX(-25deg);
  transform-origin: left top;
}

.submenu li {
  background-color: #34495e;
  background: #87acd3;
  position: relative;
  overflow: hidden;		
}						

.submenu > li > a {
  padding: 1em 2em;			
}

.submenu > li::after {
  content: '';
  position: absolute;
  top: -125%;
  height: 100%;
  width: 100%;			
  box-shadow: 0 0 50px rgba(0, 0, 0, .9);			
}		

/* Odd stuff */
.submenu > li:nth-child(odd){
  transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
  transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
  right: -50%;
  transform: skewX(-25deg) rotate(3deg);
}				

/* Even stuff */
.submenu > li:nth-child(even){
  transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
  transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
  left: -50%;
  transform: skewX(25deg) rotate(3deg);
}

/* Show dropdown */
.submenu,
.submenu li {
  opacity: 0;
  visibility: hidden;			
}

.submenu li {
  transition: .2s ease transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
  opacity: 1;
  visibility: visible;
}		

.menu > li:hover .submenu li:nth-child(even){
  transform: skewX(25deg) translateX(15px);			
}

.menu > li:hover .submenu li:nth-child(odd){
  transform: skewX(-25deg) translateX(-15px);			
}

iframe {
  background:transparent;
    
    
/*   transform: scale(1.2, 1.0); */
/*   height: 1000px; */
/*   width: 1000px; */
}

#end_frame{
/* transition:1s ease-in-out; */
/*     background: pink; */

    transform:scale(1.2);
    transform-origin: left top;
    width:83% !important;
}

#end_frame:hover{

}

.Search {
  position: relative;
}
.Search.is-Search-open .Search-input {
  width: 200px;
  color: #fff;
}
.Search.is-Search-open .Search-input ~ .Search-control {
  z-index: 0;
  cursor: pointer;
  left:10px;
}
.Search.is-Search-open .Search-input ~ .Search-control::before {
  transform: rotate(45deg);
}
.Search.is-Search-open .Search-input ~ .Search-control::after {
  transform: rotate(-45deg) translateY(0);
}
.Search-label {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Search-input {
  color:whitesmoke !important;
  width: 55px;
  height: 30px;
  padding: 10px 15px;
  padding-left:35px;
  border: 2px solid #ccc;
  border-radius: 99px;
  background: transparent;
  color: transparent;
  font-size: 1.1rem;
  transition: 0.4s width ease, 0.4s color ease;
}
.Search-input:focus {
  outline: none;
}
.Search-control {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 15px;
  height: 25px;
  width: 25px;
  padding: 0;
  border: none;
  background: transparent;
  transform: translateY(-50%);
}
.Search-control::before, .Search-control::after {
  position: absolute;
  display: block;
  top: 3px;
  left: 42%;
  width: 2px;
  height: 80%;
  border-radius: 99px;
  background: #fff;
  transition: 0.4s transform cubic-bezier(0.17, 0.67, 0.48, 1.34);
  content: "";
  outline:none;
}