@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
body {
    margin: 0;
    font-family: 'Sarabun', sans-serif;
    font-size: 14px;
}
.fixed {
    position: sticky;
    top: 0px; 
    z-index: 99;
  }
.navbar {
    overflow:visible;
    top: 0;
    width: 100%;
    padding: 0px;
    z-index: 99;
    color: #ffffff;
    background-color: #66c07c;
}

.navbar-nav a {
    float: left; 
    display: block;
    color: #292929;
    text-align: left;
    padding: 10px 10px;
    text-decoration: none; 
    z-index: 99;    
}
.navbar ul li a{
    color: #000000;
    z-index: 99; 
}

.navbar ul li a:hover { 
    background-color:#ffffff;
    color: #000000;
    z-index: 99;
}

.navbar ul li ul li a{
    color: #120450;
    z-index: 99; 
    padding: 5px 5px; 
    font-size: 14px;
}


.navbar ul li ul li a:hover{
    color: #120450;
    z-index: 99;  
    background-color: #66c07c;
}

.bg-logo{
    background-image: url("../image/headbg.jpg") ;
}

.color-pink{
    background-color: #e04ce0; 
}

.color-black{ 
    color: #000000;
}
.active{
    background-color: #ffffff;
}
a{
 text-decoration: none; 
 color: #292929;
}


#logo{
    background-image:url("../image/logo-spt.png");
    width:150px;
    height:150px;
    position:absolute; 
    background-size: 100% 100%;
    margin-top:-20px;
    
}
.sidebar{   
    width: 25%;
    
}
.sidebar ul{
    margin-left: -35px;
    margin-top: 10px;
}
.sidebar li{
    width: 100%;
    display: table; 
    margin-top: 2px;
 
}
.sidebar li a{ 
   width: 100%; 
   display: table;
   padding-left: 5px;
   height: 35px;
   padding-top: 5px;
   padding-bottom: 5px;
   border: #a1a1a1 solid 1px;
}
.sidebar li a:hover{ 
    width: 100%;
    display: table;
    background-color: #c4ebcd; 
    padding-left: 5px;
}
.content{ 
    margin-top: 2px;
    width: 100%;
    min-height: 700px;
    background-color: #ffffff;
    border-left: solid 1px #969696;
}
.active2{
    background-color: #c4ebcd; 
}
.paper{
    margin-right:10%;
    margin-left:10%;
    width: 80%;
    border: #000000 solid 1px;;
}
.center-left{
    width: 100%;
    padding-left: 50%;
}
.line-head{
    padding-top: 5px;
    padding-bottom: 5px;
}
.line-content{
    padding-top: 5px;
    text-indent:40px;
}
.border1{
    border: #000000 solid 1px;
    margin-left:10px;
    margin-right: 10px;
    min-height: 100px;
    margin-bottom: 10px;
}
.stepper-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  
    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
  
  .stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
  }
  
  .stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #ccc;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
  }
  
  .stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ccc;
    margin-bottom: 6px;
  }
  
  .stepper-item.active {
    font-weight: bold;
  }
  
  .stepper-item.completed .step-counter {
    background-color: #4bb543;
  }
  
  .stepper-item.completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #4bb543;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
  }
  
  .stepper-item:first-child::before {
    content: none;
  }
  .stepper-item:last-child::after {
    content: none;
  } 
  .monitor{
    margin: 10px;;
    padding: 10px; 
    border: #d8d8d8 solid 1px;
  }
  .school-nav{
    background-color: #66c07c;
    color: #292929;  
  }
   
  .school-a:hover{
     background-color: #86e09c;
  }
  .school-drop-menu{   
    background-color: #ebecec;
    font-size: 14px;
  } 
  .school-drop-menu a{
    padding-top: 4px; 
    padding-bottom: 4px; 
  }
  .radius-0{
    border-radius: 0px;
  }
  .gdriveVideo {
    width:730px; 
    height:415px; 
  }

  @media only screen and (max-width: 600px) {
  
   
  }