/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}

html{overflow-x:hidden}


hr{border:0;border-top:1px solid #eee;margin:20px 0}
.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-button{white-space:normal}
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}


#navbar {
    overflow: hidden;
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
  }
  
.main {
    padding: 5px;
    margin-top: 5px;
    height: 3000px; /* Used in this example to enable scrolling */
   

  
  }
  
.thai, .eng {
    background-color: brown;
    border: none; 
    box-shadow: 0 0.5px 4px 0  rgba(0,0,0,0.5);
  }
  
.thai.active, .eng.active {
    background: grey;
    color: #fff;
    box-shadow: 0 0.5px 4px 0  rgba(0,0,0,0.5);
  }
  
button{
    cursor: pointer; 
    font-family:Tahoma; 
    font-weight: bold;
    background-color: brown;
    border: 1px;
    padding: 0px 0px;
    box-shadow: 0 0.5px 4px 0  rgba(0,0,0,0.5);
    font-family: 'Noto Sans Thai', sans-serif;
  }
  
#vdo {
    height : 35px;
    border: none;
    padding: 1px 6px;
    box-shadow: 0 0.5px 4px 0 rgba(0,0,0,0.2);
  }
  
.speedcontrolcontainer {
    width:100%;
    display: block;
    border: 1px solid white;
    padding: 5px;
    font-family: Sans-serif;
    margin: auto;
    background:white;
    left: 0;
    right:0;
    top: 0;
  }

.speedcontrolcontainer audio {
    width: 100%;
    display: block;
  }

.speedcontrolcontainer div {
    display: flex;
    padding: .2em 0;
    gap: 8px;
  }

.speedcontrolcontainer label {
    flex: 1
  }

.speedcontrolcontainer input[type="range"] {
    flex: 5
  }

.speedcontrolcontainer span {
    flex: 1;
    text-align: center;
  }
  
.buttonsentence {
    max-width: 100%;
    background-color: white; 
  /* border: 2px solid gray; */
    padding: 2px 5px;
    text-align: center;
    text-decoration: none;
    line-height:45%;
   
    cursor: pointer;
    border-radius: 20px;
    box-shadow:  0 0.5px 4px 0 rgb(0, 0, 0, 0.4);
  }
  
.thai1 {
    color:gray;
    
  }
      
.eng1 {
    color:brown;
  
  }
  
.buttonsentence:focus {
    background-color: brown;
    color: white;
    .eng1, .thai1 {
        color:white;
      }
  }
        
#panel, #flip {
    width: 100%;
    text-align: center;
    background-color: pink;
    border: solid 1px #c3c3c3;
  }
  
#panel {
    display: none;
  }

.vocabtn {
  background-color: white;
  box-shadow:  0 0.5px 4px 0 rgb(0, 0, 0, 0.4);
  border-radius: 8px;
}

.vocasen {
  border-radius: 20px;
  background-color: lightgray;
  padding: 5px 15px;;
}

.footer {
 position: fixed;
  right: 0;
  bottom: 0;

  background-color: transparent;
  color: white;
  text-align: center;
  }  


  .max {
    max-width: 800px;

  }