/*essential*/
@media (min-width: 500px)
{
    .container
    {
        max-width: 500px;
    }
}

/*img-icon*/
img.icon-13
{
	width:13px;
    height:13px;
}

img.icon
{
    width:20px;
    height:20px;
}

img.icon-32h
{
	height:32px;
}

img.icon-32
{
    width:32px;
    height:32px;
}

img.icon-44
{
    width:44px;
    height:44px;
}

img.icon-60
{
    width:60px;
    height:60px;
}

img.icon-64
{
    width:64px;
    height:64px;
}

img.icon-80
{
    width:80px;
    height:80px;
}

img.icon-100
{
    width:128px;
    height:128px;
}

/*navbar*/
nav
{
    /* 1. FALLBACK WARNA SOLID (Jika browser gagal memproses semua gradien) */
    background: #9976F5;
    
    /* 2. FALLBACK GRADIENT LAMA (Jika browser gagal memproses oklch(), tapi bisa memproses linear-gradient biasa) */
    /* Warna yang mendekati: #9976F5 ke #8D74F1 */
    background: linear-gradient(
        to right, 
        #9976F5,
        #8D74F1
    );

    /* 3. PRIORITAS UTAMA (Jika browser mendukung oklch()) */
    background: linear-gradient(
        to right, 
        oklch(54.6% .245 262.881), /* Warna Awal (Kiri) */
        oklch(51.1% .262 276.966)  /* Warna Akhir (Kanan) */
    );
}

div.chatbot-header
{
	
	/* 1. FALLBACK WARNA SOLID (Jika browser gagal memproses semua gradien) */
    background: #9976F5;
    
    /* 2. FALLBACK GRADIENT LAMA (Jika browser gagal memproses oklch(), tapi bisa memproses linear-gradient biasa) */
    /* Warna yang mendekati: #9976F5 ke #8D74F1 */
    background: linear-gradient(
        to right, 
        #9976F5,
        #8D74F1
    );

    /* 3. PRIORITAS UTAMA (Jika browser mendukung oklch()) */
    background: linear-gradient(
        to right, 
        oklch(54.6% .245 262.881), /* Warna Awal (Kiri) */
        oklch(51.1% .262 276.966)  /* Warna Akhir (Kanan) */
    );
}

nav input
{
    border-radius: 44px !important;
	height:44px !important;
	font-size:14px !important;
	background: #ad91f7 !important;
	color: #FFFFFF !important;
}

nav input::placeholder
{
    color:white !important;
}

.ultra-z-index
{
    z-index:999999 !important;
}

body
{
    background-color:#F7F7F7;
    font-family: 'Rubik', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #696672;
    padding-bottom: 60px;
}

h1,h2,h3,h4,h5
{
    color: #19064C;
}

.jumbo
{
	font-style: normal;
	font-weight: 700;
	font-size: 40px;
	line-height: 48px;
	text-align: center;
}

.h1
{
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 33px;
	color: #19064C;
}

.h2
{
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 27px;
	color: #19064C;
}

.h3
{
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: #19064C;
}

p
{
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #696672;
}

p.lh10
{
	line-height: 10px;
}

a
{
	font-weight: 600;
	font-size: 12px;
	line-height: 14px;
	color: #696672;
	text-decoration:none;
}

a.lh12
{
	line-height: 12px !important;
}

a.btn-tag
{
	font-weight: 600;
	font-size: 10px;
	line-height: 12px;
    color: #AAAAAA;
    background-color: #F2F2F2;
    border-color: #F2F2F2;
}

a:hover , button:hover
{
	opacity: 0.8;
}


#ref-login-logo
{
	margin-top: 60px;
	margin-bottom: 30px;
}

#facebook-login
{
background: #3B5998;
border-radius: 48px;
}

#facebook-login img
{
position: absolute;
	top: 10px;
	right: 30px;
}



#google-login
{
background: #4285F4;
border-radius: 48px;
}

#google-login img
{
	position: absolute;
	top: 10px;
	right: 30px;
}

.half-opacity
{
	opacity:0.5 !important;
}

div.mw-20
{
    max-width: 20% !important;
}

#section_category .card-header
{
	background: #FFF !important;
}

.btn-outline-primary
{
    color: #ad91f7;
    border-color: #ad91f7;
}

.btn-outline-primary:hover
{
	background-color: #ad91f7;
	color: white;
}


.btn-outline-danger
{
	border: 1.5px solid #FF3156 !important;
	box-sizing: border-box;
	border-radius: 32px;
	color: #FF3156 !important;
}

.btn-outline-danger:hover
{
	border: 1.5px solid #FF3156 !important;
	color: #F2F2F2 !important;
}



.btn-outline-success
{
	border: 1.5px solid #2BB557 !important;
	box-sizing: border-box;
	border-radius: 32px;
	color: #2BB557 !important;
}

.btn-outline-success:hover
{
	border: 1.5px solid #2BB557 !important;
	color: #F2F2F2 !important;
}



.btn-outline-warning
{
	border: 1.5px solid #F1C102 !important;
	box-sizing: border-box;
	border-radius: 32px;
	color: #F1C102 !important;
}

.btn-outline-warning:hover
{
	border: 1.5px solid #F1C102 !important;
	color: #F2F2F2 !important;
}


.btn-outline-primary-dark
{ 
	background-color: #ad91f7;
    color: white;
    border-color: #ad91f7;
}

.btn-outline-primary-dark:hover
{
    background-color: white;
  color: #ad91f7;
}

#my_bio
{
	background-color: #9976F5 !important;
}

#my_bio p, #my_bio a, #my_bio .h3, #my_bio .btn
{
	color: white !important;
}

#my_bio .badge
{
	border-color:white !important;
	background-color: #9976F5 !important;
	border-style: solid;
	border-radius: 12px;
	border-width:1.5px;
}

.text-purple
{
	color:#9976F5 !important;
}

.bg-green
{
	background: #09BA17 !important;
}
.bg-purple
{
    background: #9976F5 !important;
}
.bg-purple-link
{
	background: #F2F2F2 !important;
	border-radius: 4px;
	color: #9976F5;
}



.btn-rounded-44
{
	border: 1.5px solid #9976F5;
	box-sizing: border-box;
	border-radius: 44px;
}

.btn-share-whatsapp
{
	background: #09BA17;
	border-radius: 44px;
}

.btn-share-facebook
{
	background: #3B5998;
	border-radius: 44px;
}

.btn-share-copylink
{
	border: 1.5px solid #9976F5;
	box-sizing: border-box;
	border-radius: 44px;
}

.btn-rounded-12
{
border: 1.5px solid #F2F2F2;
box-sizing: border-box;
border-radius: 12px;
}

.user_menu
{
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 33px;
	color: #19064C;
}

.user_sub_menu
{
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #696672;
}

.input-group > input.form-control
{
	background: #F2F2F2;
	border-radius: 44px;
}

.input-group > textarea.form-control
{
	background: #F2F2F2;
border-radius: 20px;
}

.input-group > input.btn,
.input-group > button.btn
{
	background: #9976F5;
	border-radius: 44px;
	font-weight: 600;
	color: white;
	border-color: transparent;
}

.input-group > input.btn.btn-secondary,
.input-group > button.btn.btn-secondary
{
	background: #F2F2F2;
	border-radius: 44px;
	border-color:#ced4da;	

	font-style: normal;
	font-weight: 600;
	color: #19064C;
}

footer > a.btn
{
width:20%;
}


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;	
	background: #9976F5;
}
.nav-pills .nav-link {
    border-radius: 44px;

}
.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

.modal-content
{
	border-radius:16px;
}


section#statistics span
{
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	/* identical to box height */

	text-align: center;

	/* Body Color */

	color: #696672;
}

section#statistics p
{

	font-family: 'Rubik';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
/* identical to box height */


/* Title Color */

color: #19064C;

}

section#statistics thead
{
/* Primary Color */

background: #9976F5;
border-radius: 10px;
color:#FFF
}


#section_notification .h3
{
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #19064C;
}

#section_notification .h4
{
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
color: #19064C;
}

#section_notification p.title
{
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #696672;
}

#section_notification p.description
{
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	line-height: 22px;
	color: #696672;
}

#section_notification p.date
{
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	display: flex;
	align-items: center;
	color: #696672;
}

/*




h3
{
    font-size:16px;
    line-height:21.82px;
    font-weight: 700;
}

h2
{
    font-size:16px;
    line-height:21.82px;
    font-weight: 700;
}

a:hover
{
    text-decoration:none;
}

a.category
{
    font-size:10px;
    line-height:16px;
    color:#525252;
}

a.category-14
{
    font-size:14px;
    line-height:21px;
    color:#525252;
}

a.all
{
    font-size:12px;
    line-height:18px;
    color:#ac145a;
}

a.featured-post
{
    font-size:12px;
    line-height:20px;
    color:#000000;
}

a.featured-post-16
{
    font-size:16px;
    line-height:24px;
    color:#525252;
}



.main-product-info .title, .main-product-info .price
{
    font-size: 14px;
    line-height: 21px;
}

.featured-post .stat
{
    font-size:10px;
    line-height:16px;
    color:#999999;
}

.bg-light-purple
{
    background: #9976F5;
}







section.main h2
{
	
}

*/


.ellipsis-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}