* {
  font-family: poppins;
  text-decoration: none;
}

.clear-both {
  clear: both;
}

body {
  background-color: #eaeaea;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #f1f1f1;

}

body::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}


label {
  font-weight: normal;
}

table td {
  font-weight: normal;
}

/* *** SPLASH SCREEN *** */
.splash-screen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 99999999;
  height: 100vh;
  background-color: #fff;
  transition: 1s;
}

.splash-screen .logo-header {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d849fc;
  text-align: center;
  font-size: 3em;
}

.splash-screen .logo {
  width: 120px;
  position: relative;
  display: inline-block;
  bottom: -20px;
  opacity: 0;
}

.splash-screen .logo.active {
  bottom: 0;
  opacity: 1;
  transition: ease-in-out 0.5s;
}

.splash-screen .logo.fade {
  transition: ease-in-out 0.5s;
}

.splash-screen .text-loading {
  text-align: center;
  width: 300px;
}

/* *** CONTAINER APP*** */
.container {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 0;
  position: absolute;
}

.container-app {
  background-color: #fff;
  max-width: 600px;
  margin: auto;
  height: 100%;
  position: relative;
  padding: 0px;
}

/* top bar */
.container-top-bar {
  width: 100%;
  position: fixed;
  background-color: transparent;
  left: 0;
  top: 0;
  z-index: 2;
}

.top-bar {
  background-color: #d849fc;
  background: linear-gradient(90deg, #b832da 0%, #d849fc 100%);
  margin: auto;
  max-width: 600px;
  padding: 10px 20px 20px 20px;
}

.top-bar a {
  margin-top: -5px;
  float: left;
  color: #fff;
  font-size: 28px;
}

.top-bar h3 {
  color: #fff;
  justify-content: center;
  font-size: 14px;
  margin: auto;
  box-sizing: border-box;
}

.top-bar .top-bar-settings {
  float: right;
}

.top-bar .top-bar-settings .btn {
  margin-top: -30px;
}

.top-bar .top-bar-settings button {
  color: #fff;
  font-size: 24px;
  background-color: transparent;
}


.top-bar .top-bar-settings .dropdown-menu button {
  font-size: 14px;
  padding: 10px;
  width: 100%;
  background-color: transparent;
  text-align: left;
  display: block;
  border: none;
  outline: none;
  cursor: pointer;
  color: #111;
}

.top-bar .top-bar-settings .dropdown-menu button:hover {
  background-color: #ddd;
}

.top-bar .btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn.dropdown-toggle-split:first-child,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
  border-radius: 50px;
  padding: 5px;
  width: 40px;
  height: 40px;
}

/* end top bar */




/* *** FAVORITE *** */
.favorites {
  background-color: #fff;
  padding: 50px 0px 150px 0px;
}

.favorites .item-favorites {
  box-shadow: 1px 1px 7px #ccc;
  width: 90%;
  border-radius: 10px;
  margin-top: 20px !important;
  margin: auto;
}

.favorites .item-favorites:hover {
  background-color: #f5f5f5;
}


.favorites .item-favorites span {
  display: block;
  margin-top: -15px;
  font-size: 16px;
  color: #000;
}

.favorites .item-favorites small {
  color: #777;
  max-width: 80%;
}

.favorites .item-favorites i {
  font-size: 52px;
  float: left;
  color: #d849fc;
  margin-right: 20px;
}

.remove-favorites {
  border: none;
  float: right;
  display: block;
  margin-top: -55px;
  margin-right: 30px;
  font-size: 16px;
  background-color: #dc3a453a;
  height: 30px;
  width: 30px;
  color: #DC3A45;
  right: 0;
  line-height: 34px;
  border-radius: 50%;
  text-align: center;
}

.remove-favorites:hover {
  background-color: #dc3a45;
  color: #fff;
}


.favorites .empty-favorites {
  text-align: center;
  margin-top: 50px;
}

.favorites .empty-favorites img {
  user-select: none;
  pointer-events: none;
  margin-bottom: 20px;
  width: 200px;
}

.favorites .empty-favorites h5 {
  font-size: 18;
  margin-bottom: 15px;
  color: #d849fc;
}

.favorites .empty-favorites a {
  border-radius: 50px;
  padding: 5px;
  background-color: #d849fc;
  color: #fff;
}

.favorites .empty-favorites a:hover {
  background-color: #9714b8;
}


/* *** FAVORITE *** */








/* *** HOME *** */
/* home-header */
.home-header {
  top: 0;
  position: fixed;
  width: 600px;
  margin: auto;
  background-color: #d849fc;
  background: linear-gradient(90deg, #b832da 0%, #d849fc 100%);
  padding-bottom: 80px;
}

.home-header .logo-home-header {
  width: 60px;
  height: 60px;
  float: left;
  padding: 5px;
  margin-right: 10px;
  border-radius: 50%;
}

.home-header .logo-home-header img {
  width: 100%;
  float: left;
  user-select: none;
  pointer-events: none;
}

.home-header a {
  color: #fff;
  text-decoration: none;
}

.home-header .header-brand {
  backdrop-filter: blur(15px);
  position: fixed;
  color: #fff;
  font-size: 12px;
  border-radius: 50px;
  padding: 5px;
  top: 0px;
  box-shadow: rgba(0, 0, 0, 0.349) 0px 0px 50px 0px;
  margin: 10px 0px 0px 20px;
  z-index: 2;
}

.home-header .carousel-home .carousel-item {
  height: 100%;
  width: 100% !important;
}

.home-header .carousel-home .carousel-item img {
  height: 250px;
  margin: 0px;
  padding: 0px;
}

.home-header .header-notifications {
  font-size: 22px;
  background-color: #b832da;
  border-radius: 50%;
  cursor: pointer;
  width: 60px;
  float: right;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.home-header .header-notifications span {
  float: right;
  z-index: 99999999999999999999999999;
}

.home-header .header-notifications i {
  font-size: 22px;
}

.home-header .header-notifications:hover {
  background-color: #2c5db1;
}

.home-header .header-notifications img {
  width: 100%;
  border-radius: 50%;
}

/* end home-header */


.container-home {
  height: 100%;
  width: 100%;
  left: 0;
  position: relative;
  right: 0px;
}

.home {
  z-index: 1;
  max-width: 600px;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  margin-top: 222px;
}


/* home menu action 1*/
.home-menu-action1 {
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
  z-index: 99999999999999999999;
  padding: 20px;
  margin-top: -70px;
  border-radius: 10px;
}

.home-menu-action1 a {
  display: inline-block;
}



.home-menu-action1 span {
  font-size: 14px;
  display: inline-block;
  line-height: 15px;
}

.home-menu-action1 .col-4 {
  margin-bottom: 10px;
}

.home-menu-action1 .icon-heart {
  width: 70px;
  height: 70px;
  font-size: 24px;
  color: #fff;
  background-color: #b832da;
  line-height: 70px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.home-menu-action1 .icon-heart:hover {
  background-color: #2c5fb8;
}

.home-menu-action1 .icon-square {
  background-color: #FEC23A;
  width: 70px;
  height: 70px;
  font-size: 24px;
  color: #fff;
  line-height: 70px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.home-menu-action1 .icon-square:hover {
  background-color: #eeb530;
}

.home-menu-action1 .icon-calendar {
  width: 70px;
  height: 70px;
  font-size: 24px;
  color: #fff;
  background-color: #0DCAF0;
  line-height: 70px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.home-menu-action1 .icon-calendar:hover {
  background-color: #9714b8;
}

.home-menu-action1 .icon-robot {
  width: 70px;
  height: 70px;
  font-size: 24px;
  color: #fff;
  background-color: #fb6753;
  line-height: 70px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.home-menu-action1 .icon-robot:hover {
  background-color: #e75c4a;
}

.home-menu-action1 .icon-video {
  width: 70px;
  height: 70px;
  font-size: 24px;
  color: #fff;
  background-color: #55d69a;
  line-height: 70px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.home-menu-action1 .icon-video:hover {
  background-color: #43bd84;
}

.home-menu-action1 .icon-chat {
  width: 70px;
  height: 70px;
  font-size: 24px;
  color: #fff;
  background-color: #e15de6;
  line-height: 70px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.home-menu-action1 .icon-chat:hover {
  background-color: #cd4ad1;
}

/* end home menu action 1*/



/* home menu action 2*/
.home-menu-action2 {
  text-align: center;
  z-index: 99999999999999999999;
  padding: 20px 0px 20px 0px;
  margin: 20px;
  border-radius: 10px;
  margin-top: 20px;
}

.home-menu-action2 a {
  width: 47%;
  box-shadow: 1px 1px 7px #616c6e28;
  background-color: #d849fc27;
  padding: 10px;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  text-align: center;
  border-radius: 10px;
  transition: .2s;
}

.home-menu-action2 a:hover i {
  color: #fff;
}

/* CSS untuk menyembunyikan elemen yang tidak diinginkan */
.element-to-hide {
  display: none;
}

.home-menu-action2 a:hover {
  color: #fff;
  background-color: #d849fc;
  transition: .2s;
}


.home-menu-action2 span {
  margin-top: 10px;
  display: block;
  text-align: left;
}

.home-menu-action2 i {
  font-size: 28px;
  display: block;
  text-align: right;
  color: #d849fc;
}

.home-menu-action2 .list-item-favorite {
  right: 20px;
  position: absolute;
}

/* end home menu action 2*/

/* article recommendation */
.home .article-recommendation {
  width: 100%;
  margin-top: 20px;
}

.home .article-recommendation::-webkit-scrollbar {
  height: 10px;
}

.home .article-recommendation::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #f1f1f1;

}

.home .article-recommendation::-webkit-scrollbar-thumb {
  background-color: #d849fc;
  border-radius: 5px;
}

.home .article-recommendation::-webkit-scrollbar-thumb:hover {
  background-color: #9714b8;
}

.article-recommendation a {
  color: #fff;
}

.article-recommendation h3 {
  font-size: 18px;
}

.home .card {
  border: none;
}

.home .item-article {
  margin-bottom: 5px;
  width: 275px;
  min-height: 100px;
  display: inline-block;
  color: #fff;
  padding: 35px 20px 35px 20px;
  background-color: #d849fc;
  border-radius: 10px;
}

.home .item-article h4 {
  font-weight: bold;
  font-size: 16px;
}

.home .item-article span {
  font-weight: normal;
  font-size: 13px;
  margin-top: 5px;
}

.home .item-article i {
  font-size: 36px;
  margin-top: 10px;
  margin-left: 25px;
}

.home .item-article {
  color: #fff;
  text-decoration: none;
}

.home .item-article:hover {
  background-color: #9714b8;
}

/* end article recommendation */


/* article videos */
.home .article-videos {
  width: 100%;
  height: 100%;
  /* overflow-x: hidden; */
  overflow-x: auto;
  margin-top: 30px;
  white-space: nowrap;
  margin-bottom: 150px;
}

.home .article-videos::-webkit-scrollbar {
  height: 10px;
}

.home .article-videos::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #f1f1f1;

}

.home .article-videos::-webkit-scrollbar-thumb {
  background-color: #d849fc;
  border-radius: 5px;
}

.home .article-videos::-webkit-scrollbar-thumb:hover {
  background-color: #9714b8;
}

.home .article-videos h3 {
  font-size: 18px;
}

.home .item-videos {
  margin-right: 15px;
  display: inline-block;
  color: #000;
}


.home .item-videos h4 {
  font-weight: bold;
  font-size: 18px;
}

.home .item-videos span {
  font-weight: normal;
  font-size: 14px;
}

.home .item-videos iframe {
  width: 100%;
  height: 190px;
  font-size: 58px;
  margin-top: 10px;
  border-radius: 10px;
  background-color: #ddd;
}

/* end article videos */


/* *** end HOME *** */




/* *** NAV-BOTTOM *** */
.container-nav-bottom {
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 1;
  bottom: 0;
}

.nav-bottom {
  max-width: 600px;
  text-align: center;
  margin: auto;
  background-color: #fff;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.nav-bottom table {
  width: 100%;
}

.nav-bottom td {
  font-size: 12px;
  text-decoration: none;
  width: 100px;
  color: #000;
  height: 100%;
}

.nav-bottom .link-nav-bottom a {
  font-size: 12px;
  display: inline-block;
  text-decoration: none;
  color: #000;
  width: 100%;
  height: 100%;
}

.nav-bottom .link-nav-bottom img {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  background-color: #ccc;
  box-sizing: border-box;
}

.nav-bottom .link-nav-bottom a:hover i {
  color: #9714b8;
}

.nav-bottom .link-nav-bottom .active i {
  color: #9714b8;
}

.nav-bottom i {
  font-size: 24px;
}

.nav-bottom .menu-disabled {
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.nav-bottom .link-nav-bottom i {
  color: #aaa;
}

.nav-bottom .menu-center a {
  display: inline-block;
  margin: auto;
  width: 70px;
  height: 70px;
  background-color: #d849fc;
  box-shadow: 1px 1px 7px #09214b7c;
  border-radius: 50%;
  padding-top: 5px;
  color: #fff;
  text-decoration: none;
}

.nav-bottom .menu-center a:hover {
  background-color: #9714b8;
}

.nav-bottom .menu-center i {
  font-size: 22px;
  color: #fff;
}

.link-nav-bottom-center {
  opacity: 0;
  user-select: none;
  pointer-events: none;
}

.link-nav-bottom-right img {
  width: 30px;
  height: 30px;
}

/* *** end NAV-BOTTOM *** */



/* *** MI - MOTIVATIONAL INTERVIEW *** */
.mi {
  padding: 20px;
  padding-bottom: 120px;
  background-color: #fff;
  margin-top: 50px;
}

.mi .box-mi {
  padding-bottom: 20px;
  text-align: center;
}

.mi .box-mi a:hover {
  text-decoration: underline !important;
}

.mi .box-mi img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  box-sizing: border-box;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

.mi .box-mi .img-disabled {
  filter: grayscale(100%);
  cursor: not-allowed;
  opacity: 0.6;
}

.detail-mi {
  padding: 80px 20px 100px 20px;
  background-color: #fff;
}

.detail-mi .description-mi {
  font-size: 13px;
  margin-top: -15px;
}

.detail-mi .question {
  font-size: 13px;
  background-color: rgba(255, 22, 204, 0.158);
  color: rgb(180, 0, 141);
  width: 100%;
  display: inline-block;
  padding: 5px;
  border-radius: 10px;
  margin-top: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.detail-mi .answer {
  margin-bottom: 20px;
  display: block;
  font-size: 13px;
}


.table-mi td {
  text-align: center;
  width: 100%;
  padding: 5px;
  border: 1px solid #000;
}

.table-mi input {
  border: 1px solid #555;
}

.bg-check-td {
  background-color: #47ffb2;
}

/* *** end MI - MOTIVATIONAL INTERVIEW *** */

/* *** QUIZ *** */
.list-quiz {
  width: 100%;
  background-color: rgb(175, 0, 175);
  margin-bottom: 10px;
}

.list-quiz:hover {
  background-color: rgb(146, 0, 146);
}

.detail-quiz {
  background-color: #fff;
}

.detail-quiz iframe {
  margin-top: 50px;
  width: 100%;
}


/* *** end QUIZ *** */

/* *** MY ACTIVITY *** */
.activity {
  overflow-x: auto;
  padding-top: 70px;
  padding-bottom: 100px;
  overflow-y: auto;
}

.box-check-activity {
  margin: 10px;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.activity .accordion-header {
  margin: 10px;
  display: block;
}

.activity .accordion-button {
  padding: 10px;
  background-color: #d849fc !important;
}

.box-check-activity input {
  box-shadow: none;
  border: 1px solid #b300a4;
  cursor: pointer;
}

.box-check-activity label {
  cursor: pointer;
}

.box-check-activity input:checked {
  background-color: #b300a4;
}

.box-check-activity .form-check {
  margin-bottom: 10px;
  font-size: 18px;
}

.table-activity {
  font-size: 13px;
}

.table-activity table {
  width: 95%;
  margin: auto;
}

.table-activity td {
  border: 1px solid #000;
  padding: 5px;
  margin: 5px;
}



/* *** AI *** */
.box-ai {
  padding-top: 80px;
  padding-bottom: 200px;
}

.box-ai h5 {
  text-align: center;
}

.box-ai label {
  margin: auto;
  width: 200px;
  display: block;
}

.box-ai img {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.box-ai form {
  margin: 20px;
}

.box-ai span {
  background-color: #0dcaf033;
  color: #00c1e7;
  display: block;
  margin: auto;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.box-ai form button {
  width: 100%;
  margin-top: 20px;
}

.box-ai .loading {
  text-align: center;
}

/* Style untuk preview gambar */
.uploaded-image {
  margin: auto;
  margin: 10px;
  box-shadow: 1px 1px 10px #ccc;
  border-radius: 10px;
}


/* Garis scanning */
.scanner-line {
  display: none;
  position: absolute;
  width: 100%;
  height: 5px;
  background-color: rgb(7, 255, 7);
  top: 0;
  left: 0;
  z-index: 99999999999999;
  /* Agar berada di atas gambar */
  animation: scanAnimation 1.5s infinite linear;
}

/* Animasi garis scanning maju-mundur */
@keyframes scanAnimation {
  0% {
    top: 0;
  }

  50% {
    top: 100%;
  }

  100% {
    top: 0;
  }
}

/* *** end AI *** */



/* *** TRAINING *** */
.training {
  background-color: #fff;
  padding: 70px 0px 150px 0px;
}

.training .item-training {
  background-color: #fff;
  border-radius: 10px;
  margin: 5px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
  transition: .2s;
  text-align: center;
  padding: 5px;
}

.training .item-training a {
  color: #d849fc;
}

.training .item-training:hover {
  background-color: #d849fc;
  transition: .2s;
}

.training .item-training:hover a {
  color: #fff;
}

.training .item-training i {
  font-size: 52px;
  margin-top: 5px;
  display: block;
}

.training .item-training a {
  font-size: 13px;
  line-height: 15px;
  display: block;
  text-decoration: none;
}


.training .time-quiz span {
  margin-bottom: 20px;
  text-align: center;
  display: block;
  font-size: 18px;
}

.training .quiz-time-out {
  text-align: center;
}

.training .quiz-waiting-time img {
  width: 300px;
  margin: auto;
  display: block;
}

.training .quiz-waiting-time span {
  font-size: 20px;
  color: #d849fc;
}

.training .quiz-time-out img {
  width: 300px;
  margin: auto;
  display: block;
}

.training .quiz-time-out span {
  font-size: 24px;
  color: #d849fc;
}

.training .soal {
  padding: 20px;
  margin-bottom: 100px;
  font-size: 14px !important;
}

.training .soal .head-soal .no-soal {
  font-size: 18px;
  float: left !important;
  display: inline-block;
  font-weight: bold;
}

.training .soal .paragraf-soal {
  width: 95%;
  float: right;
}

.training .soal img {
  width: 100px;
}

.training .soal table {
  width: 100%;
  display: block;
}

.training .soal table thead {
  width: 100%;
  display: block;
  border-radius: 5px;
  background-color: #2a77fb1f;
  color: #000;
  box-sizing: border-box;
  padding: 5px;
  margin-bottom: 10px;
}

.training .soal table thead img {
  margin-left: 15px;
}

.training .soal .objectif {
  font-weight: bold;
}

.training .soal table tbody {
  display: block;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-bottom: 10px;
}


.training .soal table tbody tr {
  display: block;
  padding: 5px 0px 5px 0px;
}

.training .soal table tbody label {
  border: none;
  min-width: 100px;
  text-align: left;
  margin: 0px 8px 0px 8px;
}

.training .soal table tbody span {
  font-size: 14px !important;
  float: left;
  /* padding-left: 25px; */
}

.training .soal table tbody td {
  font-size: 16px !important;
}

/* Jawaban */
.training .jawaban {
  text-align: center;
  margin-top: 20px;
}


.training .btn-outline-light {
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 2px;
  border: none;
  color: #000;
}


.training .btn-outline-light:hover {
  background-color: #d849fc;
  color: #fff;
}

.training .btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: #fff;
  background-color: #d849fc;
}

/* .training .btn-outline-light::before {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  display: block;
  background-color: #fff;
  border: 2px solid #005b6d;
}

.training .btn-check:checked+.btn::before {
  content: '\2713';
  width: 20px;
  height: 20px;
  font-size: 28px;
  border-radius: 3px;
  line-height: 20px;
  text-align: center;
  color: #d849fc;
  display: block;
  background-color: #fff;
  border: 2px solid #005b6d;
} */



.training .soal table input {
  margin-right: 10px !important;
}

.training .button-soal {
  margin-top: 20px;
}

.training .button-soal button {
  border: none;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  margin-right: 10px;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
}

/* *** end TRAINING *** */




/* *** ARTICLE *** */
/* CSS Styling for Loading Card */
.loading-card {
  border: 1px solid #ddd;
  padding: 30px 15px 15px 15px;
  margin-bottom: 15px;
  text-align: center;
  background-color: #f9f9f9;
}

.loading-image {
  width: 100px;
  margin-right: 10px;
  margin-top: -20px;
  height: 70px;
  border-radius: 5px;
  float: left;
  background-color: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.loading-title {
  height: 20px;
  width: 75%;
  display: block;
  margin-top: 100px;
  margin-bottom: 10px;
  margin-left: 120px;
  background-color: #ddd;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

.loading-description {
  display: block;
  margin-left: 120px;
  height: 15px;
  width: 60%;
  background-color: #ddd;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
}

/* Hide default item-article */
.hidden {
  display: none;
}





.article {
  background-color: #fff;
  padding: 50px 0px 150px 0px;
}

.article .item-article {
  box-shadow: 1px 1px 7px #ccc;
  width: 90%;
  border-radius: 10px;
  margin-top: 20px !important;
  margin: auto;
}

.article .item-article iframe {
  float: left;
  margin: 10px 10px 10px 0px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.article .item-article:hover {
  background-color: #f5f5f5;
}


.article .item-article span {
  display: block;
  margin-top: -15px;
  font-size: 16px;
  color: #000;
}

.article .item-article small {
  color: #777;
  max-width: 80%;
}

.article .item-article img {
  float: left;
  margin: 10px 20px 10px 0px;
  height: 70px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.article .item-article i {
  font-size: 52px;
  float: left;
  color: #d849fc;
  margin-right: 20px;
}


.article .view-article {
  margin-top: -60px;
}

.description-article {
  padding: 60px 30px 100px 30px;
  background-color: #fff;
}

.description-article h4 {
  color: #d849fc;
  text-align: left;
  margin-top: 20px;
}

.description-article .admin-article {
  font-size: 13px;
}

.description-article .share-article {
  margin-bottom: 15px;
}

.description-article .share-article li {
  list-style: none;
  transition: .2s;
  margin-right: 5px;
  display: inline-block;
}

.description-article .share-article li:hover {
  transform: scale(1.1);
  transition: .2s;
}

.description-article .share-article li a {
  display: block;
  font-size: 20px;
}

.description-article .share-article li a i {
  width: 30px;
  padding: 1px;
  border-radius: 50%;
  text-align: center;
  height: 30px;
  color: #fff;
  display: block;
}

.description-article .share-article .bi-facebook {
  background-color: #2569df;
}

.description-article .share-article .bi-whatsapp {
  background-color: rgb(48, 197, 48);
}

.description-article .share-article .bi-link {
  background-color: rgb(173, 173, 173);
}

.description-article .add-favorites {
  text-align: right;
}

.description-article .add-favorites button {
  background-color: transparent;
  border: none;
  font-size: 22px;
  outline: none;
  color: red;
}

.description-article .add-favorites .like-article {
  font-size: 13px;
  display: inline-block;
  float: right;
  margin-top: 5px;
  margin-left: 5px;
}

.description-article .cover-article iframe {
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}

.description-article video {
  width: 100%;
  background-color: #fff;
}

#myVideo::-webkit-media-controls {
  display: none !important;
}

#myVideo::-moz-media-controls {
  display: none !important;
}

#myVideo::-ms-media-controls {
  display: none !important;
}

#myVideo {
  pointer-events: none;
  background-color: #fff;
  /* Ini mencegah interaksi langsung dengan kontrol video */
}



.description-article .cover-article img {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #eee;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.description-article .paragraf-article {
  padding-top: 15px;
  text-align: justify;
  margin-top: 5px;
  border-top: 1px solid #eee;
}

.description-article .tag-article .tag {
  margin-right: 5px;
  padding: 5px;
  color: #d849fc;
  border-radius: 50px;
}

.description-article .tag-article .tag:hover {
  color: #9714b8;
}

.description-article .comment-article .box-comment-article {
  border: 1px solid #ddd;
  margin-bottom: 40px;
  border-radius: 10px;
}

.description-article .comment-article .box-comment-article form textarea {
  padding: 10px;
  border: none;
  box-shadow: none;
  border-radius: 10px;
  height: 150px;
}

.description-article .comment-article .box-comment-article .footer-form-comment {
  border-top: 1px solid #ddd;
  padding: 15px;
}

.description-article .comment-article .box-comment-article .footer-form-comment span {
  text-align: left;
  color: #444;
  font-size: 13px;
}

.description-article .comment-article .box-comment-article .footer-form-comment .send-comment-article,
.description-article .comment-article .box-comment-article .footer-form-comment button {
  background-color: #d849fc;
  float: right;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  margin-top: -5px;
  width: 100px;
  padding: 5px;
  box-sizing: border-box;
}

.description-article .comment-article .box-comment-article .footer-form-comment .send-comment-article:hover,
.description-article .comment-article .box-comment-article .footer-form-comment button:hover {
  background: #9714b8;
}

.description-article .comment-article .box-comment-article-disabled textarea {
  padding: 10px;
  border: none;
  box-shadow: none;
  cursor: no-drop;
  border-radius: 10px;
  height: 150px;
}

.description-article .comment-article .box-comment-article-disabled a {
  background-color: #d849fc;
  color: #fff;
  float: right;
}

.description-article .comment-article .box-comment-article-disabled a:hover {
  background-color: #9714b8;
}

.description-article .comment-article .footer-form-comment {
  margin-bottom: 15px;
}

.description-article .comment-article .box-comment-user {
  background-color: #f4f4f4;
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 10px;
}

.description-article .comment-article .box-comment-user img {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
  background-color: #ccc;
  object-fit: cover;
  border: 1px solid #bbb;
}

.description-article .comment-article .box-comment-user span {
  color: #d849fc;
  font-size: 15px;
}

.description-article .comment-article .box-comment-user small {
  font-size: 12px;
  color: #666;
  display: block;
}

.description-article .comment-article .box-comment-user .comment-user-description {
  width: 100%;
  margin-top: 10px;
  float: left;
  color: #444;
  font-size: 14px;
}


/* .description-article .text-to-speech-play {
  position: fixed;
  bottom: 0;
  margin-left: 390px;
} */

.description-article #speak-button {
  position: fixed;
  bottom: 0;
  margin-left: 390px;
}

.description-article #stop-button {
  position: fixed;
  bottom: 0;
  margin-left: 450px;
}

.description-article .text-to-speech-play p {
  border-radius: 50px;
  cursor: pointer;
  color: #fff;
  padding: 5px;
  background: linear-gradient(90deg, #b832da 0%, #d849fc 100%);
}

.description-article .text-to-speech-play p:hover {
  background: linear-gradient(90deg, #d849fc 100%, #d6c02d 100%);
}


/* *** end ARTICLE *** */



/* *** APP BOT *** */
.app {
  background-color: #fff;
  padding: 50px 0px 120px 0px;
}

.app-chat-bot {
  padding-bottom: 70px;
}


.app .chat-bot {
  width: 100%;
}

/* CSS */
@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
    /* Titik mulai dan akhir - elemen tidak bergerak */
  }

  40% {
    transform: translateY(-30px);
    /* Puncak pemantulan - elemen melompat ke atas */
  }

  60% {
    transform: translateY(-15px);
    /* Puncak tengah - elemen melompat sedikit lebih rendah */
  }
}

#scroll-bottom .Sub-Bot {
  opacity: 0;
  /* Mulai dengan elemen transparan */
  animation: bounce 1s ease forwards, fadeIn 0.5s ease forwards;
  /* Animasi pemantulan dan fade-in */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.app #chat-box {
  padding: 20px;
}

.app .chat-bot .send-message-bot {
  bottom: 0;
  margin: auto;
  width: 600px;
  background-color: #fff;
  box-shadow: 0px -4px 6px 2px rgba(173, 173, 173, 0.23);
  -webkit-box-shadow: 0px -4px 6px 2px rgba(173, 173, 173, 0.23);
  -moz-box-shadow: 0px -4px 6px 2px rgba(173, 173, 173, 0.23);
  position: fixed;
  padding: 20px;
}

.app .send-message-bot table {
  z-index: 9999;
  width: 100%;
}

.app .send-message-bot table input {
  width: 100%;
  padding: 8px;
  outline: none;
  border: 1px solid #aaa;
  border-radius: 50px;
}

.app .send-message-bot table button {
  width: 100%;
  width: 45px;
  margin-left: 5px;
  margin-right: -15px;
  height: 45px;
  border-radius: 50%;
  background-color: #d849fc;
  color: #fff;
  padding: 4px;
  border: 1px solid #d849fc;
}

.app .send-message-bot table button:hover {
  background-color: #9714b8;
}

.app .send-message-bot table i {
  font-size: 21px;
  transform: rotate(45deg) !important;
  display: block;
}

.app .send-message-bot #searchResults {}

.app .send-message-bot .result {
  cursor: pointer;
  padding: 5px;
}

.app .send-message-bot .selected {
  background-color: #eee;
  border-left: 2px solid #2569df;
}

.Bot {
  margin-bottom: 20px;
  width: 100%;
}

.Sub-Bot {
  background: linear-gradient(10deg, #eee, #ccc 100%);
  padding: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: inline-block;
}

.You {
  width: 100%;
  text-align: right;
  margin-bottom: 20px;
}

.Sub-You {
  text-align: right;
  display: inline-block;
  padding: 10px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #fff;
  background-color: #d849fc;
  background: linear-gradient(90deg, #b832da 0%, #d849fc 100%);

}

/* *** end BOT *** */

/* *** MY ACCOUNT *** */

/* offcanvas my account */
.offcanvas-my-account {
  width: 600px;
  margin: auto;
  background-color: #fff;
}

.offcanvas-my-account .offcanvas-header {
  margin: auto;
  text-align: center;
  cursor: pointer;
  top: 0;
  width: 100%;
  background-color: #d849fc;
  background: linear-gradient(90deg, #b832da 0%, #d849fc 100%);
  padding: 0px;
}

.offcanvas-my-account .offcanvas-header i {
  cursor: pointer;
  margin: auto;
  color: #78e4ff;
  font-size: 38px;
}

.offcanvas-my-account .offcanvas-body::-webkit-scrollbar {
  width: 5px;
}

.offcanvas-my-account .offcanvas-body::-webkit-scrollbar-track {
  border-radius: 5px;
  background-color: #f1f1f1;

}

.offcanvas-my-account .offcanvas-body::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 5px;
}

.offcanvas-my-account .offcanvas-body::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
}


.offcanvas-my-account .card-profile {
  background-color: #fff;
  float: left;
  padding: 30px;
  border-radius: 10px;
  width: 100%;
  z-index: 1;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
}

.offcanvas-my-account .card-profile img {
  margin-right: 20px;
  width: 70px;
  height: 70px;
  float: left;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.offcanvas-my-account .card-profile span {
  color: #999;
}

.offcanvas-my-account .container-card-profile {
  padding-top: 30px;
  padding: 20px;
}

.offcanvas-my-account .container-card-profile h5 {
  margin-top: 20px;
  color: #666;
  margin-left: -10px;
  font-size: 16px;
}

.offcanvas-my-account .container-card-profile .list-menu-profile {
  border: 0.5px solid #ddd;
  margin-bottom: 15px;
  border-radius: 8px;
  color: #000;
}

.offcanvas-my-account .container-card-profile .list-menu-profile:hover {
  background-color: #f2f2f2;
}

.offcanvas-my-account .container-card-profile i {
  color: #d849fc;
  margin-right: 5px;
  font-size: 22px;
}

.offcanvas-my-account .logout {
  padding: 0px;
  border-radius: 8px;
}

.offcanvas-my-account .logout i {
  color: #fff;
}

.offcanvas-backdrop.show {
  opacity: 0;
}

.offcanvas.show:not(.hiding),
.offcanvas.showing {
  height: 100%;
}

.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing {
  height: 100%;
}

/* *** end MY ACCOUNT *** */

/* *** CHAT AI *** */
.option-chat-ai h4 {
  margin-bottom: 20px;
  text-align: center;
}

.option-chat-ai .list-chat-ai {
  background-color: #fff;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
  text-align: center;
  width: 45%;
  color: #000;
  border-radius: 10px;
  padding: 10px;
  display: inline-block;
  margin: 5px;
  transition: .1s;
}

.option-chat-ai .list-chat-ai:hover {
  background-color: #d849fc;
  color: #fff;
  transition: .1s;
}

.option-chat-ai .list-chat-ai img {
  transition: .1s;
  width: 30px;
  margin: 5px 0px 5px 0px;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

.option-chat-ai .list-chat-ai:hover img {
  filter: brightness(0) invert(1);
  transition: .1s;
}


.option-chat-ai .list-chat-ai i {
  font-size: 28px;
  margin-bottom: -5px;
  display: block;
}

/* *** GAME *** */
.option-game h4 {
  margin-bottom: 20px;
  text-align: center;
}

.option-game .list-game {
  text-align: center;
  transition: .2s;
  color: #000;
  padding: 10px;
  border-radius: 10px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
  background-color: #ddd;
}

.option-game .list-game:hover {
  transform: scale(1.1);
  transition: .2s;
}

.option-game .list-game img {
  width: 200px;
  margin-left: -10px;
}

.option-game .game-settings {
  text-align: right;
}

.option-game .game-settings a {
  margin: 20px;
  color: #000;
  border: none;
  background-color: transparent;
}

.option-game .game-settings a:hover {
  color: #000 !important;
  background-color: transparent;
  color: #fff;
}

.option-game .game-settings .dropdown-menu {
  margin: 0px;
  padding: 0px;
  padding-left: 5px;
  padding-right: 5px;
}

.option-game .game-settings .dropdown-menu a {
  background-color: #eee;
  font-size: 18px;
  color: #000;
  border: navajowhite;
}

.option-game .game-settings .dropdown-menu a:hover {
  background-color: #ddd;
}

.option-game .notifikasi-gambar img {
  position: absolute;
  text-align: center;
  margin: auto;
  left: 37%;
  float: none;
  margin-top: -40px;
}

.option-game .current-game {
  width: 90%;
  margin-top: 50px !important;
  background-color: #9714b841;
  padding-top: 20px;
  text-align: center;
  border: 1px solid #9714b84b;
  border-radius: 15px;
  margin: auto;

}

.option-game .current-game #hasil {
  text-align: center;
  width: 250px;
  border-radius: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: auto;
  font-size: 24px;
}

.option-game .current-game #skor {
  text-align: center;
  font-size: 24px;
}

.option-game .current-game #gambar {
  text-align: center !important;
  background-color: #fff;
  padding: 10px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 0px 50px 0px;
  border-radius: 10px;
  margin-bottom: 20px;
  width: 200px;
  float: none;
}

.img-jawaban-benar {
  width: 150px !important;
}

.img-dikit-lagi {
  width: 150px !important;
  height: 150px !important;
}

.img-jawaban-salah {
  width: 150px !important;
  height: 150px !important;
}

.option-game .current-game table {
  margin: auto;
  margin-bottom: 20px;
  width: 80%;
}

.option-game .current-game span {
  padding: 0;
  border: none;
  background-color: transparent;
}

.option-game .current-game .error-answer {
  color: red;
}

.option-game .current-game .success-answer {
  color: rgb(33, 185, 66);
}

.option-game .current-game form input {
  width: 100%;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  box-shadow: none;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
}

.option-game .current-game form button {
  outline: none;
  width: 100%;
  background-color: #d849fc;
  color: #fff;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 7px;
}

/* *** end GAME *** */


/* *** SIGN UP *** */
.container-sign-up {
  background-color: red;
  max-width: 600px;
  margin: auto;
  height: 100%;
  background-color: #d849fc;
  position: relative;
  padding: 0px;
}

.header-sign-up {
  text-align: center;
}

.header-sign-up img {
  margin-top: 10px;
  width: 100px;
}

.header-sign-up h3 {
  color: #fff;
  padding-top: 10px;
  font-weight: bold;
}

.container-form-sign-up {
  padding: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  transition: .4s;
  width: 100%;
  position: absolute;
}

.container-form-sign-up {
  padding: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  transition: .4s;
  width: 100%;
}

.container-form-sign-up button,
.container-form-sign-up select,
.container-form-sign-up input,
.container-form-sign-up label {
  font-size: 14px;
}

#checked-register {
  display: none;
}


.container-form-sign-up::before {
  content: '';
  width: 30px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  height: 3px;
  background-color: #ddd;
  display: block;
}

.container-form-sign-up h3 {
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 20px;
}

.container-form-sign-up form button {
  margin-top: 15px;
  padding: 10px;
  color: #fff;
  width: 100%;
  background-color: #d849fc;
}

.container-form-sign-up form button:hover {
  color: #fff;
  background-color: #9714b8;
}

.container-form-sign-up .footer-sign-up {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.container-form-sign-up .footer-sign-up p {
  color: #888;
}

.container-form-sign-up .footer-sign-up a {
  color: #d849fc;
  font-weight: bold;
  text-decoration: none;
}

.container-form-sign-up .footer-sign-up a:hover {
  color: #9714b8;
}

.container-form-sign-up .footer-sign-up .forgot-password {
  margin-bottom: 20px;
  display: block;
}

/* *** end SIGN UP *** */


/* *** SIGN IN *** */
.container-sign {
  background-color: red;
  max-width: 600px;
  margin: auto;
  height: 100%;
  background-color: #d849fc;
  position: relative;
  padding: 0px;
}

.header-sign {
  text-align: center;
}

.header-sign img {
  margin-top: 10px;
  width: 100px;
}

.header-sign h3 {
  color: #fff;
  padding-top: 10px;
  font-weight: bold;
}


.container-form-sign {
  padding: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  bottom: 0;
  transition: .4s;
  width: 100%;
  min-height: 300px;
  position: absolute;
}

#checked-login {
  display: none;
}

#checked-login:checked~label .container-form-sign {
  min-height: 100%;
  transition: .4s;
}

.container-form-sign::before {
  content: '';
  width: 30px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  height: 3px;
  background-color: #ddd;
  display: block;
}

.container-form-sign h3 {
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 20px;
}

.container-form-sign form button {
  margin-top: 15px;
  padding: 10px;
  color: #fff;
  width: 100%;
  background-color: #d849fc;
}

.container-form-sign form button:hover {
  color: #fff;
  background-color: #9714b8;
}

.container-form-sign .footer-sign {
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.container-form-sign .footer-sign p {
  color: #888;
}

.container-form-sign .footer-sign a {
  color: #d849fc;
  font-weight: bold;
  text-decoration: none;
}

.container-form-sign .footer-sign a:hover {
  color: #9714b8;
}

.container-form-sign .footer-sign .forgot-password {
  margin-bottom: 20px;
  display: block;
}

/* *** end SIGN IN*** */


/* *** SLIDER *** */
.swiper-navBtn {
  color: #6E93f7;
  transition: color 0.3s ease;
}

.swiper-navBtn:hover {
  color: #4070F4;
}

.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 35px;
}

.swiper-button-next {
  right: 0;
}

.swiper-button-prev {
  left: 0;
}

.swiper-pagination-bullet {
  background-color: #6E93f7;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #4070F4;
}

@media screen and (max-width: 768px) {
  .slide-content {
    margin: 0 10px;
  }

  .swiper-navBtn {
    display: none;
  }
}

@media screen and (max-width: 550px) {
  .home .item-article {
    width: 100% !important;
    margin-right: 100px !important;
  }
}

/* *** end SLIDER *** */



/* chat box ai */
.chat-box {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 auto !important;
  max-width: 600px !important;
  width: 100%;
  min-height: 100% !important;
  background-image: url('../../assets/images/backgrounds/bg-chat.jpg') !important;
  padding: 60px 0px 0px 0px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 80px 0px 0px 0px !important;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

/* bubble umum */
.message {
  margin-bottom: 12px;
  font-size: 14px;
  max-width: 80%;
  word-wrap: break-word;
}

/* bot di kiri dengan foto profil */
.message.bot {
  display: flex;
  align-items: flex-start;
}

.message.bot .profile-pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.message.bot .text-content {
  background: #e0e0e0;
  padding: 10px 14px;
  border-radius: 12px;
  display: inline-block;
}

/* user di kanan */
.message.user {
  background: #9a2adb;
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  margin-left: auto;
  margin-right: 0;
  display: inline-block;
  text-align: left;
  max-width: 80%;
}

.chat-input {
  position: fixed;
  bottom: 0;
  margin: 0 auto;
  align-items: center;
  left: 50%;
  padding-bottom: 10px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  padding: 15px;
  background: transparent;
  border-top: 1px solid #ddd;
  display: flex;
  z-index: 10;
  box-sizing: border-box;
}

.chat-input input[type="text"] {
  flex: 1;
  border-radius: 25px !important;
  font-size: 14px;
  border: 1px solid #ccc;
  outline: none;
  padding: 15px;
  background: #f7f7f7;
  margin-right: 10px;
  -webkit-border-radius: 25px !important;
  -moz-border-radius: 25px !important;
  -ms-border-radius: 25px !important;
  -o-border-radius: 25px !important;
}

.chat-input input:focus {
  box-shadow: none;
}

.chat-input button {
  background: #d849fc;
  color: #fff;
  border: none;
  border-radius: 50% !important;
  width: 50px;
  height: 50px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  -ms-transition: background 0.2s;
  -o-transition: background 0.2s;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -o-border-radius: 50% !important;
}

.chat-input button:hover {
  background: #9714b8;
}

.chat-input .bi-send {
  display: block;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}