/* ----------------------------------------------------------------
	Colors
	Replace the HEX Code with your Desired Color HEX
-----------------------------------------------------------------*/
:root {
  --theme-color: rgb(103, 211, 195);
  --theme-color-2: #ffffff;
  --theme-sub-color: #9c9c9c;
  --bg-color: #63d9c4;
  --bg-color-2: #ffffff;

  --bg-line: rgba(255, 255, 255, 0.49);
  --border-color: 1px solid var(--bg-line);
  /* gd background */
  --bg-s1: rgb(103, 211, 195);
  --bg-s2: -moz-linear-gradient(90deg, rgba(103, 211, 195, 1) 0%, rgba(94, 207, 190, 1) 100%);
  --bg-s3: -webkit-linear-gradient(90deg, rgba(103, 211, 195, 1) 0%, rgba(94, 207, 190, 1) 100%);
  --bg-s4: linear-gradient(90deg, rgba(103, 211, 195, 1) 0%, rgba(94, 207, 190, 1) 100%);
  --bg-s5: progid:DXImageTransform.Microsoft.gradient(startColorstr="#96F9E8",endColorstr="#5ecfbe",GradientType=1);

  /* menu filter */
  --nav-bg-active: #63d9c4;
  --nav-color-active: #ffffff;
  --nav-bg: #e0f2f0;
  --nav-color: #53b5a6;
  --nav-svg-filler: invert(64%) sepia(9%) saturate(1814%) hue-rotate(121deg) brightness(158%) contrast(93%);
  --nav-svg-filler-active: brightness(0) invert(1);

  /* icon list */
  --icon-list-color: rgb(103, 211, 195);
  --icon-list-bg: #ffffff;
  --filter-icon: invert(49%) sepia(30%) saturate(792%) hue-rotate(308deg) brightness(124%) contrast(91%);
  --filter-icon-after: brightness(2);
  /* sticker feed */
  --modal-sticker-header: #63d9c4;
  --modal-sticker-title: #ffffff;
  --modal-sticker-close: #ffffff;

  /* Deail tab */
  --nav-tab-boxed-color: #rgb(103, 211, 195);
  --nav-tab-boxed-bg: #e0f2f0;
  --nav-tab-boxed-color-active: #ffffff;
  --nav-tab-boxed-bg-active: #63d9c4;

  /* sidebar buttons */
  --sidebar-bg: #fff;
  --sidebar-color: #ed84a6;

  /*  Live AD */
  --LiveAD-bg: #63d9c4;
  --LiveAD-AdDate-color: #ffffff;
  --LiveAD-border: 1px solid #ffffff;
  --LiveAD-url-bg: #3cb5a0;
  --LiveAD-ItemName-color: #000;
  --LiveAD-ItemName-bg: #ffffff;
  --LiveAD-ItemTime-color: #ffffff;
  --LiveAD-ItemTime-bg: #3cb5a0;
}

#selectSite img {
  max-width: 175px;
}
.title-theme {
  font-size: 25px;
  font-weight: 800;
  color: var(--bg-color);
  text-transform: uppercase;
}
.title-theme-sub {
  font-size: 18px;
  font-weight: 500;
  color: var(--theme-sub-color);
}
.text-topbar {
  color: var(--theme-color-2) !important;
}
/* menu filter */
.dialogbox .modal-dialog .modal-content .modal-header {
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}
.dialogbox .modal-dialog .modal-content .modal-header .modal-title {
  color: var(--theme-color-2);
}
.dialogbox .modal-dialog .modal-content .modal-header .close {
  color: var(--theme-color-2);
}
.dailyPic .listview-title {
  color: var(--theme-color-2);
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}
/* upload */
.modalbox .modal-dialog .modal-content .modal-header {
  border-bottom: 1px solid var(--theme-color-2);
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}
.modalbox .modal-dialog .modal-content .modal-header .modal-title {
  color: var(--theme-color-2);
}
.modalbox .modal-dialog .modal-content .modal-header .close {
  color: var(--theme-color-2);
}
/* menu filter */
nav.feed-filter ul li {
  background: var(--nav-bg);
}
nav.feed-filter ul li a {
  color: var(--nav-color);
}
nav.feed-filter ul li.active {
  background-color: var(--nav-bg-active);
}
nav.feed-filter ul li.active a {
  color: var(--nav-color-active);
}
nav.feed-filter ul li a img {
  filter: var(--nav-svg-filler);
}
nav.feed-filter ul li.active a img {
  filter: var(--nav-svg-filler-active);
}
nav.feed-filter .des {
  color: rgb(113, 113, 113);
}
nav.feed-filter ul li.Filter .badge.badge-filter {
  border: none;
}
/* sticker feed */
.modal.action-sheet.sticker .modal-content .modal-header {
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}
.modal.action-sheet.sticker .modal-content .modal-header .modal-title {
  color: var(--modal-sticker-title);
}
.modal.action-sheet.sticker .modal-content .modal-header .close {
  color: var(--modal-sticker-close);
}
/* Modal Price */
.modal-price {
  background: var(--bg-color);
  color: white;
}
/* Deail tab */
.nav-tabs.boxed .nav-item .nav-link {
  color: var(--nav-tab-boxed-color);
  background: var(--nav-tab-boxed-bg);
}
.nav-tabs.boxed .nav-item .nav-link.active {
  color: var(--nav-tab-boxed-color-active);
  background: var(--nav-tab-boxed-bg-active);
}
/* MEMBER PACKAGES */
ul.package li.item-package {
  background: #f3868b;
  color: rgb(23, 23, 23);
}
/* Button theme */
.btn-theme,
.btn-theme:focus {
  color: var(--theme-color-2);
  background-color: var(--bg-color);
  font-size: 30px;
  font-weight: 600;
  border: none;
}
.btn-theme.active,
.btn-theme:not(:disabled):not(.disabled):active,
.btn-theme.active:focus,
.btn-theme:not(:disabled):not(.disabled):active:focus,
.btn-theme:not(:disabled):not(.disabled):active:hover,
.btn-theme .show .dropdown-toggle.btn-theme {
  background-color: var(--bg-color);
  color: var(--theme-color-2);
  box-shadow: none;
}
.btn-theme.hover:not(.active),
.btn-theme:hover:not(.active),
.btn-theme .show .dropdown-toggle.btn-theme {
  background-color: var(--bg-color);
  color: var(--theme-color-2);
}
.btn-theme.disabled,
.btn-theme.disabled:hover,
.btn-theme.disabled:focus,
.btn-theme.disabled:active,
.btn-theme.disabled.active,
.btn-theme[disabled],
.btn-theme[disabled]:hover,
.btn-theme[disabled]:focus,
.btn-theme[disabled]:active,
.btn-theme[disabled].active,
fieldset[disabled] .btn-theme,
fieldset[disabled] .btn-theme:hover,
fieldset[disabled] .btn-theme:focus,
fieldset[disabled] .btn-theme:active,
fieldset[disabled] .btn-theme.active {
  background-color: var(--bg-color);
}
/* Button theme End*/
.text-theme {
  color: var(--theme-color) !important;
}
.bg-theme {
  background-color: var(--bg-color) !important;
  color: var(--theme-color-2);
  font-weight: 500;
  text-transform: uppercase !important;
}
.head-theme {
  background-color: var(--bg-color) !important;
  color: var(--theme-color-2);
  font-weight: 500;
  text-transform: uppercase !important;
}
.m-logo {
  background-size: 160px !important;
  border-bottom: none;
  background-image: url(../../images/theme/theidols/head.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
  text-align: center;
}
.m-search {
  background: var(--bg-color);
  background-image: url(../../images/theme/theidols/search.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
}
.m-search .has-search .form-control {
  color: var(--theme-color-2) !important;
  background-color: rgba(255, 255, 255, 0.2) !important ;
  border: none;
}
.has-search .form-control-i-search {
  color: var(--theme-color-2);
}
.has-search .form-control {
  color: var(--bg-color) !important;
  background-color: #dedede;
  border: 1px solid #dedede;
  border-top-color: none;
}
.has-search .form-control:focus {
  color: var(--theme-color-2);
  opacity: 1;
}

.has-search input::-webkit-input-placeholder {
  color: var(--theme-color-2); /*Change the placeholder color*/
  opacity: 0.8; /*Change the opacity between 0 and 1*/
}
.has-search input::placeholder {
  color: var(--theme-color-2);
}
.bar-theme {
  color: var(--theme-color-2) !important;
  background: var(--bg-color) !important;
}
.b-theme {
  border-top: none !important;
  background-image: url(../../images/theme/theidols/footer.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
}
/* button profile */
.menu-item {
  background: var(--bg-color);
}
.menu-item:focus,
.menu-item.active,
.menu-item:hover {
  background-color: var(--bg-color);
}
.menu-item.active .sub8,
.menu-item:hover .sub8 {
  font-family: "Material Icons";
  color: var(--theme-color-2) !important;
}
.menu-item:focus .menu-item-label,
.menu-item.active .menu-item-label,
.menu-item:hover .menu-item-label {
  color: #fff !important;
}
.menu-item-label {
  color: var(--theme-color-2);
}
/*pageing*/
.page-item.active .page-link,
.page-link:hover,
.page-link:focus {
  background-color: var(--bg-color) !important;
}
/*modoal rule*/
.modalbox .modal-dialog .modal-content .modal-header .rule {
  color: var(--theme-color-2);
}
.modalbox .modal-dialog .modal-content .modal-header .rule i {
  color: var(--theme-color-2);
}
.dialogbox .modal-dialog .modal-content .modal-header .rule {
  color: var(--theme-color-2);
}
.dialogbox .modal-dialog .modal-content .modal-header .rule i {
  color: var(--theme-color-2);
}
/* side menu */
#sidebarPanel .modal-content {
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}

.profileBox {
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}
.panelbox-left .title-center {
  color: var(--theme-color-2);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.profileBox .username .text-theme {
  color: var(--theme-color-2) !important;
}

.profileBox .profile-img-wrapper.big {
  border: none;
}

.profileBox .id-number span.num {
  color: var(--theme-color-2);
  border: var(--border-color);
}

.profileBox .btn-side {
  color: var(--theme-color);
  background: var(--bg-color-2);
}
.listview.theme {
  border-top: var(--border-color);
  border-bottom: var(--border-color);
  background: var(--bg-color);
}
.link-listview.theme > li a {
  color: var(--theme-color-2) !important;
}
.link-listview.theme .title-header {
  border-top: var(--border-color);
}
.link-listview.theme > li a:first {
  border-top: var(--border-color);
}
.link-listview > li a:after {
  opacity: 0.5;
  filter: var(--filter-icon-after);
}
.listview.theme > li:after {
  background: var(--bg-line);
}
.listview.sub {
  border-top: var(--border-color);
  background: var(--bg-color);
}

.sidebar-buttons {
  border-top: var(--border-color);
  background: var(--bg-color);
}
.sidebar-buttons .bg-button-theme {
  background: var(--sidebar-bg);
  color: var(--sidebar-color);
}
.sidebar-buttons .btn:hover:not(.active) {
  background: var(--sidebar-bg);
  color: var(--sidebar-color);
}
.panelbox.side-right .modal-dialog .modal-content {
  background: var(--bg-s1);
  background: var(--bg-s2);
  background: var(--bg-s3);
  background: var(--bg-s4);
  filter: var(--bg-s5);
}
/* icon menu */
.listview.sub .item .icon-list {
  font-size: 18px;
  background: var(--icon-list-bg);
  color: var(--icon-list-color) !important;
}
.listview.sub .item .icon-list .sprite {
  filter: var(--filter-icon);
}
/* menu setting */
.m-setting {
  color: var(--theme-color-2);
}
.m-setting .title-header {
  border-top: var(--border-color);
}

/* button profile */
.menu-item {
  background: var(--theme-color-2);
}
.menu-item:focus,
.menu-item.active,
.menu-item:hover {
  background-color: var(--theme-color-2);
}
.menu-item.active .sub8,
.menu-item:hover .sub8 {
  font-family: "Material Icons";
  color: var(--theme-color-2) !important;
}
.menu-item:focus .menu-item-label,
.menu-item.active .menu-item-label,
.menu-item:hover .menu-item-label {
  color: #fff !important;
}
.menu-item-label {
  color: #fff;
}
/*pageing*/
.page-item.active .page-link,
.page-link:hover,
.page-link:focus {
  background-color: var(--theme-color-2) !important;
}
/*modoal rule*/
.modalbox .modal-dialog .modal-content .modal-header .rule {
  color: var(--theme-color-2);
}
.modalbox .modal-dialog .modal-content .modal-header .rule i {
  color: var(--theme-color-2);
}
.dialogbox .modal-dialog .modal-content .modal-header .rule {
  color: var(--theme-color-2);
}
.dialogbox .modal-dialog .modal-content .modal-header .rule i {
  color: var(--theme-color-2);
}
/* top100 */

.top100-title {
  color: var(--theme-color);
}

/*  Live AD */

.LiveAD {
  background: var(--LiveAD-bg);
}

.LiveAD .AdDate {
  color: #ffffff;
}
.LiveAD .AdUrl {
  flex-grow: 0;
  color: #ffffff;
  background: var(--LiveAD-url-bg);
}
.LiveAD .AdItem {
  border: var(--LiveAD-border);
}

.LiveAD .ItemName {
  color: var(--LiveAD-ItemName-color);
  background: var(--LiveAD-ItemName-bg);
}
.LiveAD .ItemTime {
  color: var(--LiveAD-ItemTime-color);
  background: var(--LiveAD-ItemTime-bg);
}
/* more five item */
.LiveAD.more .AdItem {
  border: var(--LiveAD-border);
}
.LiveAD.more .ItemName {
  color: var(--LiveAD-ItemName-color);
  background: var(--LiveAD-ItemName-bg);
}
.LiveAD.more .ItemTime {
  color: var(--LiveAD-ItemTime-color);
  background: var(--LiveAD-ItemTime-bg);
}
/* LoginTheme */
body.LoginTheme,
.LoginTheme a {
  color: #39635d !important;
}
.LoginTheme .headback {
  color: #39635d !important;
  background: rgb(103, 211, 195);
  border-bottom: 1px solid rgba(57, 153, 91, 0.43);
  box-shadow: none;
}
.LoginTheme .headback a {
  color: #39635d !important;
}
.LoginTheme .LoginContainer {
  background: rgb(103, 211, 195);
}
.LoginTheme .LogoTheme {
  width: 85%;
}
.LoginTheme .btn-theme {
  color: #fff !important;
  background: #009181 !important;
  border-radius: 15px;
}
/* error */
.LoginTheme label.error,
.LoginTheme .validate-error-text,
.LoginTheme .text-danger {
  color: #d62d52 !important;
}
.LoginTheme .formbox .form-control.error {
  border: #d62d52 1px solid;
}
/* LoginTheme register login plus*/
.LoginTheme .LoginContainer .title-center {
  color: #39635d;
}
.LoginTheme .LoginContainer .color-support {
  color: #39635d;
}
.LoginTheme .LoginContainer .divider.mline {
  background: rgba(90, 57, 153, 0.2);
}
.LoginTheme .feed-mobile .id-number span.num {
  color: #39635d;
  border: 1px solid rgba(147, 147, 147, 0.3);
}
.LoginTheme .LoginContact img {
  filter: invert(1);
  margin: 0 4px;
  opacity: 1;
  transition: 0.3s;
}
.LoginTheme .LoginContact img:hover {
  filter: invert(1);
  margin: 0 4px;
  opacity: 1;
  transform: scale(1.1);
}
.btn.rounded {
  border-radius: 8px !important;
}
.btn.rounded {
  border-radius: 8px !important;
}

/*action sheet Qr Code Access */

.modal.action-sheet.QrAccess .modal-content {
  background: var(--bg-color);
}
.modal.action-sheet.QrAccess .modal-content .modal-header {
  color: var(--theme-color-2);
  background: var(--bg-color);
}
.modal.action-sheet.QrAccess .modal-content .modal-header .close .material-icons {
  color: var(--theme-color-2);
  text-shadow: none;
}
.modal.action-sheet.QrAccess .modal-content .CountTime {
  color: var(--theme-color-2);
}

/* End action sheet Qr Code Access */
/* Menu Action Sheet */
.menubox .item {
  color: var(--theme-color-2) !important;
  background: #3cb5a0 !important;
}
.menubox .item .menuIcon {
  filter: invert(1);
}