body {
  font-family: "Bai Jamjuree", "Sarabun", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #7C7A7A;
}

h1 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

h6 {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.have-underline {
  border-bottom: 2px solid #000;
}

button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active {
  opacity: 0.8;
}
button.disabled, .btn.disabled {
  cursor: not-allowed;
  background: #cccccc;
}

.btn-main {
  padding: 11px 36px;
}
.btn-orange {
  color: #ffffff;
  background-color: #FF725E;
}
.btn-orange:hover, .btn-orange:focus, .btn-orange:active {
  color: #ffffff;
  background-color: #FF725E;
}
.btn-yellow {
  color: #252525;
  background-color: #FFBE4F;
}
.btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active {
  color: #252525;
  background-color: #FFBE4F;
}
.btn-fb {
  color: #ffffff;
  background-color: #3C599B;
}
.btn-fb:hover, .btn-fb:focus, .btn-fb:active {
  color: #ffffff;
  background-color: #3C599B;
}
.btn-outline-orange {
  border-color: #FF725E;
}

audio {
  visibility: hidden;
}

.choice {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  background: #F4F3F4;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}
.choice > div:first-child {
  width: 85%;
}
.choice > div:last-child {
  width: 15%;
  text-align: right;
}

@media (min-width: 992px) {
  h1, h6 {
    text-align: left;
  }
  h1 {
    font-size: 40px;
  }
  h6 {
    font-size: 24px;
  }
}
header {
  height: 62px;
  box-shadow: 0 2px 3px 3px rgba(238, 238, 238, 0.6);
  -webkit-box-shadow: 0 2px 3px 3px rgba(238, 238, 238, 0.6);
  -moz-box-shadow: 0 2px 3px 3px rgba(238, 238, 238, 0.6);
}
header #nav-top {
  font-size: 12px;
}
header #nav-top a {
  color: #D9328A;
  text-decoration: none;
  font-weight: 500;
}
header #nav-top .btn-logout {
  font-family: "Sarabun";
  color: #D9328A;
  text-decoration: none;
  font-weight: 500;
}
header #nav-top .btn-logout:focus, header #nav-top .btn-logout:focus-visible {
  box-shadow: none;
  border: transparent;
}
header #nav-top img {
  width: 32px;
}
header #nav-top .divider {
  height: 24px;
  border-right: 1px solid #D9328A;
}
@media (min-width: 1200px) {
  header #nav-top {
    font-size: 16px;
  }
}

#footer {
  background-color: #ffffff;
  height: 80px;
  box-shadow: 0 2px 3px 3px rgba(238, 238, 238, 0.6);
  -webkit-box-shadow: 0px -2px 3px 3px rgba(238, 238, 238, 0.6);
  -moz-box-shadow: 0px -2px 3px 3px rgba(238, 238, 238, 0.6);
}

.banner {
  margin-bottom: 2rem;
}
.banner img {
  width: 100%;
}

a {
  color: #292C86;
}

select {
  border-color: #FF725E !important;
  background-image: url("data:image/jpeg;base64,/9j/7gAhQWRvYmUAZIAAAAABAwAQAwIDBgAAAAAAAAAAAAAAAP/bAIQADAgICAkIDAkJDBELCgsRFQ8MDA8VGBMTFRMTGBEMDAwMDAwRDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAENCwsNDg0QDg4QFA4ODhQUDg4ODhQRDAwMDAwREQwMDAwMDBEMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM/8IAEQgAlgCWAwEiAAIRAQMRAf/EALkAAQEBAQEBAQAAAAAAAAAAAAABBwYFBAIBAQACAwEAAAAAAAAAAAAAAAAEBQECAwYQAAEDAwMDBAMBAAAAAAAAAAEAEQIDBAUgQDFQBhYwEhMUECEVNREAAQMBAwkFBwUAAAAAAAAAAQAxAgMgQBEwIUFREiKS4gRhMkKCNBCRUmJyExSistIjcxIAAgADBAUMAwAAAAAAAAAAAQIAETEgUBIyECFBoUIwUWGBsSJScqLSEzOC4gP/2gAMAwEBAhEDEQAAAPSJVesqCoKgqCoKgqCoKBLAAAAAAAACgSwAAAAAAAAoEsAAPt9P1Pvm0vOuib8ednRjh/k6rlYdwHOQBQJYAAe702e9nMp/vEmsHm438jxSt9IGvQCgSwAAfX8jONB/XN9JY+b/ABxHp+HFtQj2AAFAlgAAA/f4AAAAFAlgAAAAAAABQJYAAAAAAAAUBjA2djA2djA2djA2djA2djA2djA2djA2djA2djA//9oACAECAAEFAOg07eHt+vSX16SrQEJ6raq4UpCInMzlqBINOoJxuKvuPTP/2gAIAQMAAQUA6DcZGuKv9G6X9G6VnWlWo6sna+0qlTlUnRpRpU9U4RnG4oSo1Mba/HD0CAeif//aAAgBAQABBQAku5TlOU5TlOU5TlOU5TlOU5TlOU5TlAlHnYhHnYhHnYhHnYhHnYhHnTjsVdZCXiUl4lJeJSXiUl4lNZDGXOPnpCPOnBQpxxWnur/P0hHnT21kvjqae5MiLivpCPOkExOGyIv7T85zJfRtdQR51Yy/nYXVOpCpBVq1OhSyF7UvrrUEedfbmWhTDhu4srGvLWEefQ+at7PQCPOxCPOxCPOxCPOxCPOxCI/bJkyZMmTJkyZMmTJkyZMgF//aAAgBAgIGPwC4QWEyROsZd5jLvMEClvAdmXQWNBBY7bYIqIBHXGEUHbdv/9oACAEDAgY/ALhZUOBVJWgOXnxR9npT2x9npT2wHaWKZBl0W/mUamz+bxfloVFqxlC/zWi7zta2VYTVhIwUNOFvEsfK4770nwp+3I67k//aAAgBAQEGPwA506dOnTp06dOnTp06dOnTo50bkUbkUbkUbkUbkUbR+1hGnE4SqSYHV80l6ocHOvVDg516ocHOvVDg51m6ocHOhGsAYy7lSPdNoo2qGx4gZSPzEnatU/8AaP7aloo2vwap3KhxpE6JfB57Q6SmcadA7x1zb9HdtFG0JA4EZwRrQlI/3U92qO3RPz2NmmcK9Xdp9g8VTy2yjbjWGJgd2pHXFRqQO1CYBiRpB9k61Q4QgDKR7Ap155gc0I6ojuxtlHIfhdRMRi9GUjgAS9P+Kx0a0Oj6eW1Sicakg0paI/TDIFHI7H3JbHw4nD3ZEo3Io3Io3Io3Io3Io506dOnTp06dOnTp06dOnTo51//Z") !important;
  background-position: right center !important;
  background-size: 48px 48px !important;
  padding-right: 56px !important;
}

.text-orange {
  color: #FF725E !important;
}

.text-green {
  color: #28B56F !important;
}

.text-black {
  color: #1C1716 !important;
}

.form-text {
  font-size: 14px !important;
}

.icon-edit {
  display: inline-block;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background-image: url("../assets/icon/pencil.png");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.card.article {
  margin-bottom: 1rem;
}
.card.article > div:first-child {
  position: relative;
}
.card.article .i-draft {
  width: 96px;
  height: 96px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.card.article .card-title {
  font-weight: 700;
  color: black;
}
.card.article .card-body {
  border: 1px solid #B0AEAE;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-top: 1.5rem;
}
.card.article .card-body .date {
  color: #7C7A7A;
}
.card.article .card-text {
  color: #7C7A7A;
}
.card.article .thumbnail {
  background-position: center;
  background-size: cover;
}
.card.article .share-by {
  position: relative;
  color: #1F1A1A;
  background-color: #FEDC67;
  padding: 0.375rem 0.75rem;
  border-right: 1px solid #B0AEAE;
  border-left: 1px solid #B0AEAE;
}
.card.article .share-by p {
  margin-bottom: 0;
}
.card.article .share-by:after {
  position: absolute;
  left: 40px;
  bottom: -16px;
  content: "";
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #FEDC67;
}
.card.article .share-by .avatar {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 48px;
  border-radius: 50%;
}
.card.article .share-by .avatar img {
  width: 100%;
}

.profile-image {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: #aaaaaa;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/icon/profile.png");
}

#fixed-error-success-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
#fixed-error-success-message > div {
  border-radius: 0;
}

.nav-logged-in div {
  line-height: 32px;
}
.nav-logged-in .nav-with-menu {
  position: relative;
  margin-right: 1rem;
  cursor: pointer;
}
.nav-logged-in .nav-with-menu a {
  color: black !important;
}
.nav-logged-in .nav-with-menu span {
  vertical-align: top;
}
.nav-logged-in .nav-with-menu .profile-nav, .nav-logged-in .nav-with-menu .notification-nav {
  position: absolute;
  width: 200px;
  left: -80px;
  z-index: 9000;
}
.nav-logged-in #notification {
  margin-right: 0;
}
.nav-logged-in #notification .fa-bell.active {
  color: #FF725E !important;
}
.nav-logged-in #notification .notification-nav {
  width: 340px;
  left: -310px;
  margin-top: 0.5rem;
}

.start-page {
  background-color: #FFF8E0;
  min-height: calc(100vh - 80px);
  padding: 1rem 0;
}
.start-page .logo, .start-page .img {
  width: 80%;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .start-page .logo, .start-page .img {
    width: 35%;
    margin-top: 3rem;
  }
}
.start-page .logo img, .start-page .img img {
  width: 100%;
}
.start-page .lead {
  font-weight: 700;
  color: #FF725E;
}
.start-page .for-pc {
  font-size: 30px;
}
.start-page .for-pc .lead {
  font-size: 34px;
}
.start-page .btn {
  font-weight: 700;
}

#profile {
  color: black !important;
}
#profile a {
  text-decoration: none;
}
#profile #banner {
  position: relative;
  background-image: url("../assets/img/banner3-1.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  min-height: 180px;
}
@media (min-width: 576px) {
  #profile #banner {
    background-image: url("../assets/img/banner3.png");
    min-height: 208px;
  }
}
#profile .section-avatar {
  position: absolute;
  bottom: -40px;
  left: calc(50% - 70px);
}
#profile .section-avatar .profile-image {
  width: 140px;
  height: 140px;
}
#profile .section-avatar .icon-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  z-index: 20;
}
#profile .section-exclamation div {
  display: inline-block;
  border: 1px solid red;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
}
#profile .section-desc, #profile .section-social {
  min-height: 224px;
}
#profile .section-desc .icon-edit, #profile .section-social .icon-edit {
  width: 24px;
  height: 24px;
}
#profile .section-social > div {
  padding: 0.375rem 0;
}
#profile .section-social > div:first-child {
  padding: 0;
}
#profile .section-social .icon-edit {
  vertical-align: bottom;
}
#profile .section-social img {
  width: 24px;
  vertical-align: text-bottom;
  margin-right: 0.5px;
}
#profile #section-join {
  flex-direction: column;
}
#profile #section-join .form {
  width: 100%;
  background-color: #FFE99D;
}
#profile #section-join .form .btn {
  background-color: #FFBE57;
}
#profile #section-join .form .btn:hover {
  background-color: #FFBE57;
}
@media (min-width: 576px) {
  #profile #section-join {
    flex-direction: row;
  }
  #profile #section-join .bg {
    width: 60%;
  }
  #profile #section-join .form {
    width: 40%;
  }
}
#profile .profile-activities img {
  border: 2px solid transparent;
  border-radius: 50%;
}
#profile .profile-activities img:hover {
  border-color: #FF725E;
}
#profile .act-info {
  font-size: 18px;
}
#profile .act-info a {
  color: #4556EA;
}
#profile .act-info a:hover {
  color: #4556EA;
}

#adm-activities {
  min-height: calc(100vh - 142px);
}
#adm-activities #search-activities {
  cursor: pointer;
  background-color: #FF725E;
}
#adm-activities #search-activities i {
  color: #ffffff;
}
#adm-activities .info {
  margin-bottom: 1rem;
}
#adm-activities .info img {
  width: 100%;
}
#adm-activities .info .box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#adm-activities .info .box > div {
  color: black;
  text-align: center;
  font-weight: 600;
}
#adm-activities .info .box > div:nth-child(2) {
  font-size: 1.25rem;
}
@media (min-width: 576px) {
  #adm-activities .info .box > div {
    font-size: 1.5rem;
  }
  #adm-activities .info .box > div:nth-child(2) {
    font-size: 2rem;
  }
}
#adm-activities .info .detail {
  font-size: 20px;
}
#adm-activities .info .detail .title {
  font-weight: 700;
  text-align: center;
  color: #1C1716;
  font-size: 1.5rem;
}
#adm-activities .info .btn-create-activity {
  width: 240px;
}
#adm-activities #activities .title-event {
  font-weight: 700;
  text-align: center;
  color: #28B56F;
  font-size: 1.5rem;
}
#adm-activities #activities .activity-list {
  min-height: 320px;
}
#adm-activities #activities .activity-list a {
  text-decoration: none;
}
#adm-activities #activities .activity-list .item {
  position: relative;
  background-color: #DFF4EB;
  border-top: 8px solid #28B56F;
  border-radius: 8px;
  padding: 8px 24px 8px 8px;
  margin-bottom: 1rem;
  color: #7C7A7A;
}
#adm-activities #activities .activity-list .item .title {
  font-weight: 700;
  font-size: 1.5rem;
  color: #292C86;
}
#adm-activities #activities .activity-list .item .title:hover {
  color: #0a58ca;
}
#adm-activities #activities .activity-list .item .menu {
  position: absolute;
  bottom: 8px;
  right: 12px;
  height: 28px;
  cursor: pointer;
  color: #FF725E;
  font-weight: 500;
  font-size: 1.1rem;
  z-index: 500;
}
#adm-activities #activities .activity-list .logo {
  width: 72px;
  height: 72px;
  background-color: #ffffff;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/icon/activity.png");
}
#adm-activities .see-all-activity a {
  font-weight: 700;
  color: #FF725E;
  text-decoration: none;
  font-size: 18px;
}
#adm-activities-create {
  padding-bottom: 8px;
}
#adm-activities-create img {
  width: 100%;
}
#adm-activities-create select {
  width: 100px;
}
#adm-activities-create h1 {
  font-weight: 700;
  color: #28B56F;
  font-size: 30px;
  text-align: center;
}
#adm-activities-create form {
  color: #1C1716;
}
#adm-activities-create .logo {
  font-weight: 700;
  margin: 0 auto;
  width: 200px;
  height: 200px;
  background-color: #D9D9D9;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  background-image: url("../assets/icon/activity_create.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#adm-activities-create .logo div {
  padding-top: 132px;
}
#adm-activities-create .calendar {
  position: relative;
}
#adm-activities-create .calendar i {
  position: absolute;
  right: 20px;
  bottom: 10px;
}
#adm-activities-create #generate-section {
  font-weight: 700;
  background-color: #FFE99D;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
#adm-activities-create #generate-section div:first-child {
  line-height: 38px;
  font-size: 1.25rem;
}
#adm-activities-create #generate-section #generate-pwd {
  cursor: pointer;
}
#adm-activities-create #generate-section input {
  font-size: 1.25rem;
}
#adm-activities-create #cert-question {
  font-weight: 700;
  margin: 0.5rem 0;
  font-size: 1.25rem;
}
#adm-activities-create #certificate-group {
  font-weight: 700;
}
#adm-activities-create #certificate-group button {
  color: #FF725E;
  padding-right: 36px;
  padding-left: 36px;
  border-radius: 15px;
  font-size: 14px;
  margin-bottom: 0.5rem;
}
#adm-activities-create #certificate-group [data-component=cert-img], #adm-activities-create #certificate-group [data-component=delete-file] {
  cursor: pointer;
}
#adm-activities-create #certificate-group [data-component=cert-file-input] {
  position: fixed;
  top: -300px;
}
#adm-activities-create #activity-detail textarea {
  min-height: 152px;
}
#adm-activities-create #activity-detail .bg-set {
  background-color: #ddd;
}
#adm-activities-create #activity-detail .bg-set img {
  width: 100%;
}
#adm-activities-create #activity-detail .bg-set .bg-list img {
  cursor: pointer;
  border: 1px solid #ddd;
}
#adm-activities-create #activity-detail .bg-set .bg-list img:hover, #adm-activities-create #activity-detail .bg-set .bg-list img.active {
  border-color: #B0AEAE;
}
#adm-activities-create #people {
  font-size: 14px;
}
#adm-activities-create #people .title {
  font-weight: 700;
  font-size: 26px;
  color: #FF725E;
  text-align: center;
}
#adm-activities-create #people .topic::after, #adm-activities-create #people .choices::after {
  display: block;
  clear: both;
  content: "";
}
#adm-activities-create #people .topic > div, #adm-activities-create #people .choices > div {
  display: inline-block;
  float: left;
  width: 50%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#adm-activities-create #people .topic > div {
  background-color: #FFBE57;
  height: 80px;
}
@media (min-width: 576px) {
  #adm-activities-create #people .topic > div {
    height: auto;
  }
}
#adm-activities-create #people .topic > div:first-child {
  border-top-left-radius: 10px;
}
#adm-activities-create #people .topic > div:last-child {
  border-top-right-radius: 10px;
}
#adm-activities-create #people .choices > div {
  border: 1px solid #d9d9d9;
  padding-left: 4px;
  padding-right: 4px;
  height: 240px;
}
@media (min-width: 576px) {
  #adm-activities-create #people .choices > div {
    height: 216px;
  }
}
#adm-activities-create #people .choices > div:first-child {
  border-bottom-left-radius: 10px;
  border-right: none;
}
#adm-activities-create #people .choices > div:last-child {
  border-bottom-right-radius: 10px;
}
#adm-activities-create #people .choices .form-check-input {
  margin-top: 0.5rem;
}
@media (min-width: 576px) {
  #adm-activities-create .frm-header::after {
    display: block;
    clear: both;
    content: "";
  }
  #adm-activities-create .frm-header > div {
    display: inline-block;
    width: calc(100% - 240px);
  }
  #adm-activities-create .frm-header > div:first-child {
    width: 240px;
    float: left;
  }
}
#adm-activities-show {
  min-height: calc(100vh - 190px);
  padding-bottom: 16px;
}
#adm-activities-show .fa-calendar-days {
  position: absolute;
  top: 10px;
  right: 20px;
}
#adm-activities-show select#selected-question {
  min-width: 300px;
}
#adm-activities-show #banner {
  font-weight: 700;
  position: relative;
  color: #1C1716;
  background-image: url("../assets/banner/bg1_.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
#adm-activities-show #banner .logo {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../assets/icon/activity.png");
}
#adm-activities-show #banner h1, #adm-activities-show #banner p {
  padding-bottom: 0.5rem;
  text-align: center;
}
#adm-activities-show #banner h1 {
  padding-top: 1rem;
  font-size: 30px;
}
#adm-activities-show #banner p {
  font-size: 18px;
}
#adm-activities-show #banner .pwd-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  background-color: #FFBE57;
  border-radius: 40px;
  font-size: 1.5rem;
  width: calc(100% - 24px);
  margin: 0 auto;
  padding: 4px 0;
}
@media (min-width: 576px) {
  #adm-activities-show #banner {
    background-image: url("../assets/banner/bg1.jpg");
  }
  #adm-activities-show #banner .pwd-info {
    width: 400px;
    bottom: -16px;
  }
}
#adm-activities-show .tag-list {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}
#adm-activities-show .tag-list .badge {
  margin-right: 8px;
}
#adm-activities-show .tag-list .badge.bg-tag {
  background-color: #D1DEFF;
  color: #7C7A7A;
}
#adm-activities-show #topic ul, #adm-activities-show #split-question {
  border-bottom: 1px dashed #B0AEAE;
}
#adm-activities-show #topic {
  font-weight: 700;
}
#adm-activities-show #topic ul {
  list-style: none;
  padding-left: 0;
  font-size: 18px;
  padding-bottom: 1rem;
}
#adm-activities-show #topic ul::after {
  display: block;
  clear: both;
  content: "";
}
@media (min-width: 576px) {
  #adm-activities-show #topic ul {
    font-size: 22px;
  }
}
#adm-activities-show #topic ul li {
  float: left;
  display: inline-block;
  padding: 0 0.5rem;
  border-right: 1px solid #B0AEAE;
}
#adm-activities-show #topic ul li:first-child {
  padding-left: 0;
}
#adm-activities-show #topic ul li:last-child {
  padding-right: 0;
  border: none;
}
#adm-activities-show #topic ul li a {
  color: #7C7A7A;
  text-decoration: none;
}
#adm-activities-show #topic ul li.active a {
  color: #28B56F;
}
#adm-activities-show #split-question {
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
#adm-activities-show #split-question .title {
  color: #FF725E;
  font-size: 24px;
}
#adm-activities-show #split-question img {
  max-width: 100%;
}
#adm-activities-show #split-question label, #adm-activities-show #split-question select {
  font-size: 20px;
}
#adm-activities-show #split-question select {
  width: 300px;
}
#adm-activities-show #split-question .question-timeout {
  color: #6974FB;
  cursor: pointer;
  line-height: 44px;
}
#adm-activities-show #split-question .question-timeout .hourglass {
  width: 32px;
  vertical-align: middle;
}
@media (min-width: 576px) {
  #adm-activities-show #split-question select {
    width: 200px;
  }
  #adm-activities-show #split-question .question-timeout {
    text-align: right;
  }
}
#adm-activities-show #add-question .topic-count-question {
  margin-bottom: 0;
}
#adm-activities-show #add-question #add-more-question {
  font-weight: 700;
  color: #FF725E;
  cursor: pointer;
}
#adm-activities-show #add-question [data-component=form] .question-no, #adm-activities-show #add-question [data-component=question] .question-no {
  font-size: 24px;
  text-decoration: underline;
}
#adm-activities-show #add-question [data-component=question] {
  font-weight: 700;
  color: #1C1716;
}
#adm-activities-show #add-question [data-component=question] > div {
  margin-bottom: 2rem;
}
#adm-activities-show #add-question [data-component=question] .form-text {
  font-weight: normal;
  color: #aaaaaa;
}
#adm-activities-show #add-question [data-component=question] .label {
  font-size: 20px;
  margin-bottom: 0.5rem;
}
#adm-activities-show #add-question [data-component=question].done .title {
  color: #28B56F;
  text-align: center;
  font-size: 22px;
}
#adm-activities-show #add-question [data-component=question].done .announcement .profile-image {
  width: 88px;
  height: 88px;
}
#adm-activities-show #add-question [data-component=question].done .btn-feedback {
  padding: 11px 36px;
}
#adm-activities-show .btn-action .btn {
  padding: 11px 36px;
}
#adm-activities-show .appendix .btn {
  color: #FF725E;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 16px;
}
#adm-activities-show table thead th:first-child {
  vertical-align: middle;
}
#adm-activities-show table th, #adm-activities-show table td {
  font-weight: normal;
}
#adm-activities-show table td {
  word-break: break-word;
  word-wrap: break-word;
}
#adm-activities-show table td:last-child {
  text-align: center;
}
#adm-activities-show #answer .item {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed #B0AEAE;
}
#adm-activities-show #answer .item .profile-image {
  width: 56px;
  height: 56px;
}
#adm-activities-show #answer .item img {
  width: 72px;
}
#adm-activities-show #answer .item .icon-smile {
  text-align: right;
}
#adm-activities-show #answer .item .send-smile {
  color: #625B56;
}
#adm-activities-show #answer .item .send-smile, #adm-activities-show #answer .item .view-answer {
  cursor: pointer;
}
#adm-activities-show #icon-article-create {
  position: fixed;
  right: 0;
  bottom: 160px;
  width: 120px;
}
#adm-activities-show #icon-article-create img {
  max-width: 100%;
}
#adm-activities-show #tab-list {
  margin-top: 1.5rem;
}
#adm-activities-show #tab-list .item {
  color: #797979;
  padding-bottom: 1rem;
  border-bottom: 1px dotted #B0AEAE;
  margin-bottom: 1rem;
}
@media (min-width: 576px) {
  #adm-activities-show #tab-list .item div {
    display: inline-block;
    margin-left: 1rem;
  }
}
#adm-activities-show #tab-list .item a {
  color: #FF725E;
  text-decoration: none;
}
#adm-activities-show #frm-article-create {
  color: black;
}
#adm-activities-show #frm-article-create [data-component=article-browse-image] {
  cursor: pointer;
}
#adm-activities-show .btn-download {
  width: 140px;
  font-weight: 700;
  border-radius: 20px;
  color: #FF725E;
}

.th-file-extension {
  width: 128px;
}

#section-article .profile-image {
  width: 48px;
  height: 48px;
}
#section-article .card-text {
  height: 120px;
  overflow: hidden;
}
#section-article a {
  text-decoration: none !important;
}
#section-article a:hover, #section-article a:focus, #section-article a:visited {
  color: inherit;
}

#article-answer .profile-image, #question-answer .profile-image {
  width: 72px;
  height: 72px;
}
#article-answer [data-component=article-answer] .profile-image, #article-answer .user-answer .profile-image, #article-answer [data-component=question-answer] .profile-image, #question-answer [data-component=article-answer] .profile-image, #question-answer .user-answer .profile-image, #question-answer [data-component=question-answer] .profile-image {
  width: 54px;
  height: 54px;
}

[data-component=question-group-list] [data-component=upload-document] {
  cursor: pointer;
}

#activities-calendar .month-display {
  font-weight: 700;
  position: relative;
  text-align: center;
  font-size: 20px;
  padding: 16px 0;
}
#activities-calendar .month-display img {
  position: absolute;
  cursor: pointer;
  width: 36px;
}
#activities-calendar .month-display img.arrow-left {
  left: 0;
}
#activities-calendar .month-display img.arrow-right {
  right: 0;
}
#activities-calendar .day {
  font-weight: 700;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}
#activities-calendar .day > div, #activities-calendar .date > div {
  display: inline-block;
  width: calc(14.2857142857% - 4px);
  text-align: center;
  color: #1C1716;
}
#activities-calendar .day > div.text-muted, #activities-calendar .date > div.text-muted {
  color: #B0AEAE;
}
#activities-calendar .date {
  margin-bottom: 0.5rem;
}
#activities-calendar .date > div {
  position: relative;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
}
#activities-calendar .date > div > div {
  position: absolute;
  width: 36px;
  height: 36px;
  top: 12px;
  left: calc(50% - 18px);
  border-radius: 50%;
  border: 1px solid #28B56F;
}

.owl-carousel {
  position: relative;
}
.owl-carousel .owl-nav > button {
  position: absolute;
  top: calc(50% - 30px);
  width: 40px;
  height: 40px;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
  border: 1px solid #eee !important;
}
.owl-carousel .owl-nav > button:hover {
  background: #ffffff !important;
  color: inherit !important;
}
.owl-carousel .owl-nav > button.owl-prev {
  left: -20px;
}
.owl-carousel .owl-nav > button.owl-next {
  right: -20px;
}

[data-component=fb-share] {
  cursor: pointer;
}

#modal-login .modal-title {
  font-weight: 700;
  color: #FF725E;
  font-size: 22px;
  width: 100%;
  text-align: center;
  padding-left: 16px;
}
#modal-login .btn-yellow {
  position: relative;
}
#modal-login .btn-yellow img.envelop {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 34px;
}
@media (min-width: 576px) {
  #modal-login .btn-yellow img.envelop {
    top: 14px;
    left: 24px;
    width: 48px;
  }
}
#modal-login .btn-fb {
  position: relative;
}
#modal-login .btn-fb i {
  position: absolute;
  top: 34px;
  left: 2px;
}
@media (min-width: 576px) {
  #modal-login .btn-fb i {
    left: 44px;
  }
}
#modal-login .forgot-pwd a {
  color: #FF725E;
  text-decoration: none;
}
#modal-login .term a {
  text-decoration: none;
}

#modal-answer .modal-title .profile-image {
  width: 72px;
  height: 72px;
}

#modal-profile-social img {
  width: 32px;
}

#modal-alert .modal-content, #modal-confirm-delete .modal-content, #modal-suggest .modal-content {
  border: 6px solid #F38585;
  font-weight: 700;
  font-size: 20px;
  color: #F38585;
}
#modal-alert .modal-content button, #modal-confirm-delete .modal-content button, #modal-suggest .modal-content button {
  font-size: 18px;
}

#modal-success .modal-content {
  border: 6px solid;
  font-weight: 700;
  font-size: 20px;
  color: #198754;
}
#modal-success .modal-content button {
  font-size: 18px;
}

#modal-publish .modal-content {
  border: 6px solid #F38585;
}
#modal-publish .modal-content button {
  font-size: 18px;
}
#modal-publish .topic {
  color: #FF725E;
}

#modal-terms .modal-body {
  height: 380px;
}
#modal-terms .btn-section button {
  width: 160px;
  font-weight: 700;
}
#modal-terms .btn-section .btn-outline-orange {
  color: #FF725E;
}

#modal-register .modal-title, #modal-registered .modal-title {
  color: #FF725E;
}

.modal-activity-hint .modal-content {
  border: 6px solid #F38585;
}
.modal-activity-hint .sub-topic > div {
  display: inline-block;
}
.modal-activity-hint .sub-topic > div:first-child {
  border-right: 2px solid #1C1716;
}
.modal-activity-hint .sub-topic hr {
  border-top: 2px dashed #DBDBDB;
}
.modal-activity-hint .arrow {
  position: absolute;
  width: 48px;
  top: calc(50% - 24px);
  cursor: pointer;
}
.modal-activity-hint .arrow.left {
  left: -24px;
}
.modal-activity-hint .arrow.right {
  right: -24px;
}

#modal-request-admin {
  font-size: 1rem;
  font-weight: 600;
}

#section-article .card-img-top {
  border: 1px solid #B0AEAE;
  border-bottom: none;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
#section-article .card-img-top.mh-160 {
  height: 160px;
}
#section-article .card-img-top.mh-210 {
  height: 210px;
}

#article-input-thumbnail {
  position: fixed;
  top: -200px;
}

.no-top {
  margin-top: 0;
}
@media (min-width: 576px) {
  .no-top {
    margin-top: 1rem;
  }
}

.btn {
  font-size: 1.5rem;
}

.form-label, .form-check-label {
  font-size: 1.25rem;
}

.article-title {
  font-size: 2.2rem !important;
}