main {
  padding: 5% 4%;
}

#nav-tab .active {
  border: none;
  border-bottom: solid #fc8c74;
}

#nav-tab .nav-item {
  color: black;
}

.profile img {
  width: 218px;
}

.user-info > p {
  font-size: 14px;
  margin: 0;
}

.main-info {
  margin: 20px 0;
}

.main-info p {
  font-size: 15px;
  margin-top: 0;
  font-weight: 500;
}

.profile-summary .interest {
  margin-bottom: 30px;
}

.profile-summary .interest ul {
  margin: 0 20px;
}

.profile-summary h4 {
  font-size: 16px;
}

.profile-summary h5 {
  font-size: 18px;
}

.profile-summary p,
.profile-summary li {
  font-size: 14px;
}

.profile-summary button {
  font-size: 13px;
  background-color: #fc8c74;
  border-radius: 10px;
  border: none;
  color: white;
  padding: 10px;
}

.contact p {
  margin-bottom: 5px;
}

.card {
  padding: 3px 15px;
  min-height: 200px;
  max-height: 300px;
}

.card-body {
  margin: 0;
}
text-truncate-container > a {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-container > p {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-container > a {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-container > p {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.profil-penjawab p {
  margin-bottom: 0;
}

.profil-penjawab small {
  font-size: 10px;
  margin-top: 0;
}

.profil-penjawab .time {
  font-size: 8px;
}

.profil-penjawab img {
  width: 50px;
}

/* TAB UPDATE PROFILE */
.profile button {
  font-size: 13px;
  border: none;
  background-color: #fc8c74;
  color: white;
  font-weight: 600;
  border-radius: 10px;
}
.interest-ket{
  margin-top: 2%;
  text-align: justify;
  font-size: 8px;
}
#nav-update form label {
  font-size: 15px;
  font-weight: 600;
}

#nav-update form input,
textarea,
select,
optgroup,
option {
  font-size: 13px !important;
}

/* Button save profile */
.btn-save-profile:hover{
  background-color: #e07d66;
  color: white;
}

/*//////////////
Anonymous Fitur
//////////////*/
.input-anon{
  display: flex;
  margin-bottom: -5%;
}
.label-anon{
  width: 300%;
}
.check-anon{
  margin-left: 30%;
}

.modal-content{
  height: 10%;
}
/* Button tanyakan kepada user */
.btn-ask-user{
  padding: 3%;
}
.btn-ask-user:hover{
  background-color: #bb6855;
}
/* Button tampilkan lebih */

#load_more_pertanyaan_button, #load_more_pertanyaan_mention_button,
#load_more_jawaban_button {
  font-size: 13px;
  background-color: #fc8c74;
  border-radius: 10px;
  border: none;
  color: white;
  margin: 0 30%;
  font-weight: 600;
}
#load_more_pertanyaan_button:hover{
  background-color: #72BDFF;
  color: rgb(199, 199, 199);
}
#load_more_pertanyaan_mention_button:hover{
  background-color: #72BDFF;
  color: rgb(199, 199, 199);
}

#load_more_jawaban_button:hover{
  background-color: #72BDFF;
  color: rgb(199, 199, 199);
}
.empty-data {
  width: 300px;
}


@media (max-width: 576px) {
  .profile {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
  }

  .profile img {
    min-width: 120px;
    margin-right: 5%;
    width: 150px;
  }

  .main-info {
    margin: 0;
  }

  .profile .main-info h3 {
    font-size: 20px;
  }

  .profile .main-info p {
    font-size: 12px;
  }

  .interest h4,
  .contact h4 {
    font-size: 14px;
  }

  .interest li,
  .contact p {
    font-size: 13px;
  }

  #nav-tab a {
    font-size: 13px;
  }

  .jawaban > h5,
  .pertanyaan > h5 {
    margin: 30px 0 20px;
  }

  .card {
    margin-bottom: 10px;
  }

  .profile-summary button {
    font-size: 10px;
  }
}

@media (min-width: 576px) {
  .profile {
    display: block;
    text-align: start;
  }

  nav {
    display: flex;
    justify-content: center;
  }

  .card {
    margin-bottom: 10px;
  }

  .profile button {
    margin-top: 3%;
    margin-bottom: 5%;
  }
}

@media (min-width: 768px) {
  .profile img {
    width: 180px;
  }

  nav {
    justify-content: start;
  }
  .profile button {
    margin-top: 10%;
  }
}