
.navbar {
  background-color: rgb(116, 116, 239); /*#9932CC;#b406edd8; c97b14; #b406edd8;*/
  color:#f2f2f2;
  /* overflow: hidden; */
}

.navbar input.btn-sm {
  width: 100px; /* 或你想要的寬度 */
  min-width: unset;
}

.dropdown-menu input.btn-sm {
  width: 100%; /* 或你想要的寬度 */
  min-width: unset;
}


.navbar a,
.navbar input {
  float: left;
  color: #f2f2f2; 
  text-align: left;
  padding: 5px 20px 0px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover,
.navbar input:hover {
  background-color: #CFCFEA; /*#4CAF50;*/
  color:black;
}



/* 第一層選單顯示在下側 */
.navbar .dropdown-menu {
  background-color: #c772d8;
  top: 100%;
  left: 0;
  position: absolute;
  margin-top: 0;
  padding-top: 0;
  min-width: 230px;
  z-index: 1000;
  display: none; /* 預設隱藏，hover 時顯示 */
}


.dropdown-menu a,
.dropdown-menu input{
  color:#f2f2f2; 
  text-align: left;
  padding: 5px 20px 0px;
/*   background-color: #FFA500;*/
}


.dropdown-menu a:hover,
.dropdown-menu input:hover { 
  background-color: #4CAF50;
}

/* 第二層 dropdown-toggle 往右箭頭 */
/* .dropdown-submenu > .dropdown-toggle::after {
  content: "▶";
  float: right;
  margin-left: 8px;
  font-size: 20px;
} */

/* 第二層選單 */
.dropdown-submenu > .dropdown-menu{
  background-color: #64b7ef;
}
.dropdown-submenu{
  position: relative;
}
/* .dropdown-submenu > .dropdown-menu > .dropdown-item  {
  position: relative;
} */

.dropdown-submenu > .dropdown-menu a:hover,
.dropdown-submenu > .dropdown-menu input:hover { 
  background-color: #ef7d64;
}

.dropdown-submenu > .dropdown-menu {
  position: absolute;
  left: 70%;    /*讓第二層選單完全在右側 */
  /* margin-top: 0; */
  display: none;
  min-width: 180px;
  background-color: #64b7ef;
  z-index: 99;
}
/* Style the footer */
  footer {
    font-family: DFKai-sb,Arial, Helvetica, sans-serif  ;
    background-color: #9f9f9f;
    text-align: center;
    color: white;
    bottom: 0;
    position:fixed;
    width:100%;
  }

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 800px) {
  img {
    width: 100%;
    height: auto;
  }
  footer {
    background-color: #9f9f9f;
    padding:0.01px;
    text-align: center;
    color: white;
    position:relative;
    width: 100%;
  }
}

