* {
    box-sizing: padding-box;
    padding: 0;
    margin: 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   img {
        fill: none;
        outline: none;
   }
}


body {
    
    
    font-family: 'Yu Gothic', sans-serif;
    padding: 0;
    margin: 0;
}

img {
      user-drag: none; 
      -webkit-user-drag: none; 
      -moz-user-drag: none; 
      fill: none;
      outline: none;
    }

nav {
    display: flex;
    justify-content: center;
    background-color: #F6F1F1;
    padding: 5px;
    color: black !important;
}

nav .container {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 600;
}

nav .container div {
    text-align: center;
    padding: 10px;
}

nav .container2 div {
    text-align: center;
    padding: 10px;
    color: black !important;
}


main .container {
    max-width: 1200px;
    margin: 0 auto;
}




* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
   img {
        fill: none;
        outline: none;
   }
}


body {
    
    
    font-family: 'Yu Gothic', sans-serif;
    padding: 0;
    margin: 0;
}

img {
      user-drag: none; 
      -webkit-user-drag: none; 
      -moz-user-drag: none; 
      fill: none;
      outline: none;
    }

nav {
    display: flex;
    justify-content: center;
    background-color: #F6F1F1;
    padding: 5px;
    
}

nav .container {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 600;
}

.logout {
    font-size: 24px;
}

main .container {
    max-width: 900px;
    margin: 0 auto;
}

.body-container {
    display: flex;
    flex-direction: column;
    
    
    
}

.guide-home {
    margin: 10px auto 30px -5px;
}


.instruction {
    display: flex;
    flex-direction: column;
    border: 1px solid #C00000;
    padding: 20px;
    gap: 20px;
    line-height: 1.6;
}


.lesson-info-container {
    margin: 60px 5%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lesson-header {
    border-bottom: 2px solid #C00000;
    text-align: center;
    font-size: 24px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    
}

.lesson-header-down {
    padding-top: 60px !important;
    
}

.ghomebtn {
    padding: 3px 5px;
    border-radius: 3px;
    
}

.ghomebtn:hover {
    background-color: rgba(246, 241, 241, 0.7);
    cursor: pointer;
    padding: 3px 5px;
    transition: background-color 0.25s ease;
}

.gcc-rlc {
    display: flex;
    justify-content:space-between;
    gap: 5px;
    font-size: 24px;
}

.gcc-rlc-info-container{
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
}

.rlc-type-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    
}



.rlc-type-info span:first-child {
    font-size: 12px;
}

.rlc-type-info span:nth-child(2) {
    font-weight: bold;
    font-size: 14px;
}

.gcc-rlc-info {
    display: flex;
    justify-content: center;
    background-color: #AEDFFA;
    align-items: center;
    padding: 10px;
    width: 100%;
    
}

.gcc-rlc-info-t2 {
    display: flex;
    justify-content: center;
    background-color: #AEDFFA;
    align-items: center;
    padding: 10px;
    width: 70%;
}

.rcl-type-select-container {
    display: flex;
    background-color: #E9D1DD;
    width: 30%;
    padding: 5px;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
}

.gcc-rlc-redirect {
    display: flex;
    background-color: #0070C0;
    color: white;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100px;
    min-width: 100px;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
    
    
}

.gcc-rlc-redirect-2 {
    display: flex;
    background-color: rgba(0, 112, 192, 0.5);
    color: white;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100px;
    min-width: 100px;
    cursor: pointer;
    transition: box-shadow 0.25s ease;
    font-size: 20px;
    
}

.gcc-rlc-redirect:hover {
    
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}

.old-lessons {
    margin: 0 5%;
    margin-bottom: 30px;
    margin-top: -20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
   
}

.old-lessons-info {
    display: flex;
    justify-content:space-between;
    gap: 5px;
    width: 100%;
}


.old-lessons-d{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    width: 100%;
    color: #2F87FB;
    cursor: pointer;
    
}

.old-lessons-d span {
    
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.25s ease;

}

.old-lessons-d span:hover {
    
    border-bottom: 1px solid #ccc;

}

.old-lessons-blank {
    padding: 0 10px;
    width: 100px;
    min-width: 100px;
}

.play-container {
        
        align-items: center;
    }
    
.lesson-tips {
        display: flex;
        margin: 10px auto 30px 12%;
        font-weight: bold;
    }

.point-x-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(246, 241, 241, 0.2);
    border-radius: 6px 6px 0 0;
}


.point-xs {
    border: 3px dotted black;
    padding: 10px;
}

.point-x {
    margin: 10px auto;
}

.toggle input {
  display: none;
}

/* Circle */
.circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
  border: 1px solid black;
}

/* Arrow */
.arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg); /* Down */
  transition: transform 0.3s ease;
}

/* Toggle effect */
.toggle input:checked + .circle .arrow {
  transform: rotate(-135deg); /* Up */
}

/* Optional hover effect */
.circle:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}


.circle {
  border: 1px solid black;
}