/* 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: 2px;
    margin-top: 2px;
  }
  
.thai, .eng {
    background-color: #941DA3;
    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: #941DA3;
    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 {
    max-width:800px;
    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:#941DA3;
  
  }
  
.buttonsentence:focus {
    background-color: #941DA3;
    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 10px;;
}


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

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



  .max {
    max-width: 800px;
  }

  .sbtncontainer {
    width: 280px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
  }
  
  .sbtn {
    width: calc(20% - 8px); /* 각 버튼의 너비를 조정하고자 할 경우 */
    margin: 4px; /* 버튼 사이의 간격 조정 */
    background-color: transparent;
    width: 35px;
    border-radius: 5px;
    border:none;
  }


    /* 비디오 컨테이너 스타일 */
    #video-container {
      max-width: 800px;
      margin: 0 auto;
  }
   /* 모달 스타일 */
   .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

/* PC 버전에서의 모달 내용 스타일 */
.modal-content {
    margin: 2% auto;
    padding: 2px;
    width: 90%;
    height: 90%;
    background-color: #fefefe;
    border: 1px solid #888;
    border-radius: 5px;
    position: relative;
}

/* 모바일 버전에서의 모달 내용 스타일 */
@media only screen and (max-width: 600px) {
    .modal-content {
        margin: 30% auto;
        width: 95%;
        height: 55%;

    }
}

.nclose {
    color: black;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.nclose:hover,
.nclose:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}



.vdolinkbtn {
    border: none;
    border-radius: 30px;
    background-color: #941DA3;
    color: white;
    width: 250px;
    font-size: 17px;
    padding: 1px 2px;
}

  .repeatcontainer {  
    padding: 20px;
  
  }
  
  
  
          .controls {
              display: flex;
     
              gap: 40px;
              align-items: center;
            
          }
          label {
              margin-top: 20px;
          }
          select {
              padding: 5px;
              margin-top: 8px;
              border-radius: 10px;
         
        
          }