body {
  background: #ffffff;
  font-family: 'Content', Verdana;
}

#landing-page::after {
  content: '';
  background: url('https://source.unsplash.com/user/svprak/1920x1080');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.chord {
  color: red;
}

.search-box-center {
  margin-top: 350px;
}

.login-box-center {
  margin-top: 110px;
}

tr a.view-song {
  display: none;
}

tr:hover a.view-song {
  display: inline-block;
}

.table-head-font {
  font-family: 'Khmer', Sans-serif;
}

.content-font {
  font-family: 'Khmer', Sans-serif;
}

.fontForSongLyric {
  font-family: 'Khmer', Sans-serif;
  font-size: 1em;
}

.metalFont {
  font-family: 'Metal', Sans-serif;
}

.bookTitle-1 {
  font-family: 'Khmer', Sans-serif;
  font-size: 1.5em;
}

#randomSongTitle {
  font-size: 0.8em;
  color: red;
}

.title-size-1 {
  font-family: 'Khmer', cursive;
  font-size: 1em;
}

.title-size-6 {
  font-family: 'Khmer', cursive;
  font-size: 6em;
}

.title-size-2 {
  font-family: 'Khmer', cursive;
  font-size: 1.7em;
  margin-bottom: 25px;
}

.title-size-3 {
  font-family: 'Khmer', cursive;
  font-size: 3em;
}

.title-size-4 {
  font-family: 'Khmer', cursive;
  font-size: 4em;
}

.heading-font {
  font-family: 'Khmer', cursive;
  font-size: 1.2em;
  font-weight: bold;
}

.book-title-3 {
  font-family: 'Khmer', cursive;
  font-size: 0.7em;
}

.nokora-font {
  font-family: 'Nokora', cursive;
}

.listbook {
  list-style: none;
  padding-left: 0;
  margin-bottom: 10px;
}

.found-song-msg {
  display: inline-block;
  margin-right: 35px;
}

a {
  text-decoration: none;
}

tr a {
  text-decoration: none;
  color: rgba(31, 33, 36, 0.863);
}

tr a:hover {
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a>img:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.operation {
  border-top: 1px solid #c0c0c0;
  padding-top: 10px;
}

.descrition {
  font-size: 0.8em;
}

.svp_inputWidth {
  width: 200px;
}

.table-row-highlight:hover {
  background: rgb(226, 255, 250);
}

.myForm input {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #007bff;
}

.myForm button {
  border-radius: 0;
}

.search-form input {
  border: none;
  border-radius: 0;
}

.search-form button {
  border-radius: 0;
}

.loginAs {
  color: red;
}

li i.fa-unlock {
  display: none;
}

li:hover i.fa-unlock {
  display: block;
  color: #fff;
}

li:hover i.fa-lock {
  display: none;
}

li i.fa-lock {
  display: block;
  position: absolute;
  color: rgba(38, 43, 48, 0.5);
}

.lock {
  margin-left: 800px;
}

.sign-out i.fa-lock {
  display: none;
}

.sign-out:hover i.fa-lock {
  display: block;
  color: #fff;
}

.sign-out:hover i.fa-unlock {
  display: none;
}

.sign-out i.fa-unlock {
  display: block;
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
}

.warning {
  color: red;
}

#delete-form {
  display: inline;
}

.search-btn {
  display: inline;
}

.bg-search-box {
  background: #74ebd5;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #acb6e5, #74ebd5);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #acb6e5, #74ebd5);
}

.bg-footer {
  background: #457fca;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #5691c8, #457fca);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #5691c8, #457fca);
}

#main-footer {
  /* background: rgba(255, 254, 253, 0.966); */
  color: #b4b4b4;
}

/* .img-hover:hover {
  border-bottom: 2px solid rgba(0, 17, 250, 0.849);
} */

/* TOOL TIPS */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* Print Stylesheet */
@media print {
  * {
    margin: 0;
    color: #000;
    box-shadow: none;
    text-shadow: none;
    background: transparent !important;
  }

  #randomSongTitle,
  .chord,
  a,
  hr,
  .print-button,
  header,
  #search-box,
  .bg-search-box,
  footer {
    display: none;
  }

  #lyric {
    font-size: 1.2em;
    width: 100%;
  }

  @page {
    margin: 2cm;
  }

  @page: first {
    margin: 0cm;
  }

  @page: last {
    margin: 5cm;
  }

  @page: left {
    margin: 2cm 1.5cm 2cm 2cm;
  }

  @page: right {
    margin: 2cm 2cm 2cm 1.5cm;
  }

  article {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.5em !important;
  }

  a:after {
    content: '('attr(href) ')';
  }
}

/* Khmer Unicode font face - from Angkor Nation */