p.ridge {border-style: ridge;}
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {height: 800px }

/* Set gray background color and 100% height */
.sidenav {
  height: 80%;
  
}
h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}
#pageheaderpc {
  color: #555;
}
#pageheadersp {
  display: none;
}

.word_textstl{
  font-size:2.5em;
}
.kanji_textstl{
  font-size:4.5em;
}
.word_readingstl{
  font-size:0.8em;
}
.word_meaningstl{
  font-size:0.8em;
}
.word_notestl{
  font-size:1.2em;
}

/* Set black background color, white text and some padding */
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}
.page_title{
  width: 100%; border-style: none none groove none;
}
#result_list{
  height: 80%;
}
#scroll_word{
  height: 80%;
}
#word_pos {
    font-size: 10px;
    color: #787676;
    margin-left: 8px;
    font-style: italic;
}
.leftImage {
  top: 100px; /* your required value */
  align-self: flex-start;
  position: fixed;
  display: flex;
  height: 400px;
  align-items: center;
  justify-content: center;
}

.rightImage {
  top: 100px; /* your required value */
  right: 0;
  position: fixed;
  display: flex;
  height: 400px;
  align-items: center;
  justify-content: center;
}

/* Placeholder color and alignment */
::placeholder {
  color: #cccccc; /* Paler color */
  text-align: left; /* Align left */
}

.input-group input:focus + .clear-btn,
.input-group input:not(:placeholder-shown) + .clear-btn {
  display: block;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
  .sidenav {
    height: fit-content;
  }
  .nav-link{
    font-size: small;
  }
  .page_title{
    width: 100%; 
    border: none;
  }
  .leftImage {
    left: 0;
  }
  .sp-center{
    text-align: center!important;
    width: 100%;
  }
  #result_list{
    display: none;
    height:350px;
  }
  #scroll_word{
    height:350px;
  }
  #word_reading{
    float: right; width:100%; text-align:  right;
  }
  #word_text{
    float: left;  width:100%; text-align:  left;
  }
  #word_meaning{
    float: left;  width:100%; text-align:  left;
  }
  #word_note{
    float: left;  width:100%; text-align:  left;
  }
  #pageheaderpc {
    color: #555;
    display: none;
  }

  #pageheadersp {
    color: #555;
    display:contents;
  }

  .row.content {height: auto;} 
}

.avatar{
  height: 50px; 
  width:50px ;
}
.unit{
    margin: 5px; 
    width: 80px;
  }

  .combobutton{
    background-color: #59a1ee; 
    border: none;
    width: 40%; 
    border-radius: 3px; 
    color: #FFFFFF; 
    margin: 4px; 
    padding: 8px; 
    font-size: 12px;
  }

  #added_by {
    width: 25%;
    float: right;
    border: none;
    text-align: right;  
  }

/* Navbar styles */
.navbar-nav .dropdown-menu {
  border: none;
  background-color: rgba(9, 110, 235, 0.5);
}

.dropdown-item {
  color: #333;
  padding: 0.5rem 1.5rem;
}

.dropdown-item:hover, 
.dropdown-item:focus {
  color: #fff;
  background-color: rgba(9, 110, 235, 0.754);
}

.dropdown-item.active {
  color: #fff;
  background-color: rgba(9, 110, 235, 0.754);
}

/* Mobile styles */
@media (max-width: 991px) {
  .navbar-collapse {
    padding: 1rem 0;
  }
  
  .navbar-nav .dropdown-menu {
    padding: 0;
    margin: 0;
    background-color: transparent;
  }
  
  .dropdown-item {
    padding: 0.5rem 1.5rem;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .dropdown-item:hover,
  .dropdown-item:focus,
  .dropdown-item.active {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .navbar-nav .nav-item {
    padding: 0.25rem 0;
  }
}