/* General Layout */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
	font-family: "Poppins", sans-serif !important;
	min-width: 320px;
}

.custom-bg {
background-color: #eef2f4;
  transition: background-color 0.5s ease;
}

.bgc{
font-weight: 600 !important;
    color: #212529 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    max-width: -webkit-fill-available !important;
}

/* Sticky right column */
.sticky-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  padding-bottom:20px;
}

/* Disable sticky on small screens where columns stack */
@media (max-width: 767.98px) {
  .sticky-aside {
    position: static;
  }
}

/* Force container max-width to be consistent */
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px !important; /* Set this to the largest size you prefer */
}

@media (max-width: 767px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	padding-left:10px !important; padding-right:10px !important;
    }
	
	.row{ margin-left:-10px !important; margin-right:-10px !important;}
}

.mh-section{ background-color:#fff; border-top: 1px solid #eef2f4;}
.mh-title{ font-size:40px; font-weight:500; color:#343a40; margin:30px 0 20px 0;}
.mh-desk-m{ font-size:16px; font-weight:300; margin:0 0 20px 0; color:#343a40;}
.mh-desk{ font-size:14px; font-weight:300; margin:0 0 20px 0; color:#343a40;}
.mh-button{ border-radius:30px; margin-top:15px;}


@media (max-width: 767px) {
.mh-title{ font-size:30px; margin-top:30px;}
.mh-desk{ font-size:14px; margin:0 0 20px 0;}
.mh-button{ width:100%;}
}


.part_of_speech {
    display: inline;
    font-size: 14px;
    padding: 0px;}


.button-focus:focus, .button-focus:active{

    outline: none !important;
    box-shadow: none !important;
    border: none !important;
	}
	
	
	.like-link{ font-size:14px; color: #8A2BE2 !important; margin: 0px 0px 0px 10px !important; padding:0px 8px; border-radius: 30px !important;}
	.like-link:hover{ text-decoration:underline !important;}



.card-item .bi-heart,
.card-item .bi-heart-fill {
    font-size: 1.2rem;
    color: #d3d3d3; /* Light gray for unliked state */
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.card-item .bi-heart:hover,
.card-item .bi-heart-fill:hover {
    color: red; /* Red on hover */
}

.card-item .like-form span {
    margin-left: 4px;
    font-size: 1rem;
    vertical-align: middle;
}

/* Styles for the move icon */
.card-item .bi-arrows-move {
    transition: transform 0.2s ease-in-out;
    cursor: grab;
}

.card-item .bi-arrows-move:hover {
    transform: scale(1.2); /* Slight zoom on hover */
}


/* header */
.collapse-always {
    display: contents !important;
}
.nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover; 
}

.c-shadow-sm {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
    transition: box-shadow 0.3s ease;
}



/* --- */
.avatar, .f-avatar, .sl-avatar, .link-op {
	opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.avatar.loaded,.f-avatar.loaded, .sl-avatar.loaded, .link-op.loaded  {
    opacity: 1;
}
		
.f-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
}
		


.box-sizing{none; }


.search-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* Buttons */
.btn-primary {
    background-color: #8A2BE2 !important;
    border-color: #8A2BE2 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #5E35B1 !important; /* Slightly darker shade */
    border-color: #5E35B1 !important;
    color: #fff !important;
}

.btn-primary:disabled {
    background-color: #C0A9D6 !important;
    border-color: #C0A9D6 !important;
    color: #e6e6e6 !important; /* Light gray text to indicate disabled state */
    opacity: 0.2; /* Slight transparency to reinforce the disabled look */
    cursor: not-allowed;
}


.btn-outline-primary {
    color: #8A2BE2 !important; /* Text color */
    background-color: #fff !important; /* Background color */
    border-color: #8A2BE2 !important; /* Border color */
}

.btn-outline-primary:hover {
    color: #fff !important; /* Hover text color */
    background-color: #5E35B1 !important; /* Hover background color */
    border-color: #5E35B1 !important; /* Hover border color */
}

/* Badges */
.badge-primary {
    background-color: #8A2BE2 !important;
    color: #fff !important;
}

.badge-primary:hover {
    background-color: #5E35B1 !important;
    color: #fff !important;
}

/* Text and Links */
.text-primary {
    color: #8A2BE2 !important;
	text-decoration:none;
}

.text-primary:hover {
    color: #5E35B1 !important;
}

/* Text and Links */
.text-primary-c {
    color: #8A2BE2 !important;
	text-decoration:none;
}

.text-primary-c:hover {
    color: #5E35B1 !important;
}

/* Text and Links */
.x-primary {
border:2px solid #8A2BE2;
    background-color: #fff !important;
	color:#8A2BE2!important;
	dispay:table;
	    border-radius: 50% !important;
}

.x-primary:hover {
    background-color: #5E35B1 !important; 
	color:#fff!important;
}

.all-r {
    border-radius: 30px !important;
	}
	
	.all-r2 {
    border-radius: 10px !important;
	}
	
	
	.all-sh{
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  transition: box-shadow 0.3s ease;
}

@media (min-width: 767px) {
    .all-m {
        margin-bottom: 20px !important;
    }
	
}

.all-r{position: relative;}

.custom-link-layer {
    position: absolute; /* Position the layer independently */
    top: 0;             /* Align it to the top of the container */
    right: 0;           /* Align it to the right of the container */
    width: 100%;        /* Match the container width */
    z-index: 10;        /* Ensure it stays above other content */
}

.custom_profile_name {
    font-size: 12px;
    margin: 0;
    color: #212529 !important;
    position: absolute; /* Position relative to .custom-link-layer */
    top: 10px;          /* Adjust distance from the top of the layer */
    right: 20px;        /* Adjust distance from the right of the layer */
    z-index: 1;         /* Ensure it appears within the link layer */
    background-color: rgba(255, 255, 255, 1);
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    max-width: 90%;     /* Ensure it doesn't overflow the container */
    border-radius: 24px;
    padding: 4px 8px 3px 8px;
    text-decoration: none;
    text-align: center;
}

.custom_profile_name:hover, 
.custom_profile_name:active {
    text-decoration: none;
}

.custom-share-btn {
    background-color:transparent  !important; /* Set background to white */
    border: 0px solid #ddd; /* Optional: Light border */
    color: #000 !important; /* Text/icon color */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.custom-share-btn:hover {
    background-color: transparent !important;
    color: #5E35B1 !important;
}

.custom-share-btn i {
    font-size: 20px; 
}

.custom-stats-container {
    display: flex;
    align-items: left;
    justify-content: left;
	margin-top:6px;
}

.custom-stat-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
}

.custom-stat-label {
    font-size: 14px;
	margin-bottom:0;
}


/* Text and Links */
.text-primary-c {

}

.text-primary-c:hover {
    color: #5E35B1 !important;
}



.custom-divider {
    width: 2px;
    height: 2px;
    background-color: #212529; /* Divider color */
	margin:10px 10px 0 10px;
}





/* Pagination Links */
.page-link {
    background-color: transparent !important; /* Transparent background */
    border-color: #8A2BE2 !important; /* Border color matches button */
    color: #8A2BE2 !important; /* Text color matches button */
}

.page-link:hover {
    background-color: transparent !important; /* Transparent on hover */
    border-color: #5E35B1 !important; /* Darker border on hover */
    color: #5E35B1 !important; /* Darker text on hover */
}

.page-item.disabled .page-link {
    background-color: transparent !important; /* Transparent for disabled */
    border-color: #8A2BE2 !important;
    color: #8A2BE2 !important; /* Gray text for disabled */
    opacity: 0.5 !important; /* Slight transparency for disabled */
}




/* Change background on hover */
.dropdown-item:hover {
    background-color: #8A2BE2; /* Customize the hover background color */
    color: #fff; /* Optional: text color on hover */
}

/* Change background on click (active state) */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #8A2BE2; /* Customize the active background color */
    color: #fff; /* Optional: text color for active state */
}

/* Change background on focus (keyboard navigation) */
.dropdown-item:focus {
    background-color: #8A2BE2; /* Customize the focus background color */
    color: #fff; /* Optional: text color on focus */
}


.dropdown-menu .dropdown-item:hover {
    background-color: #8A2BE2 !important; /* Add !important to force */
    color: #fff !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: #8A2BE2 !important;
    color: #fff !important;
}

.dropdown-menu .dropdown-item:focus {
    background-color: #8A2BE2 !important;
    color: #fff !important;
}



.small-link {
    font-size: 0.775rem; /* Small font size */
    color: #929fa8 !important; /* Bootstrap's default link color */
    text-decoration: none;
	padding:0 10px;
}

.small-link:hover {
    color: #6c757d !important; /* Darker shade on hover */
    text-decoration: underline; /* Underline on hover */
}

.sidebar-content{
    position: relative;
    z-index: 2; 
}

.sidebar-lc-bg {
background-color:#FFFFFF;
  position: relative;
  background-position: right 0px;
  background-repeat: no-repeat;
  width: 100%;
  height:150px;
  position: absolute;
  z-index: 1;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.9s ease-in-out; /* Smooth fade-in effect */

  /* Modern browsers */
  @supports (background-size: clamp(320px, 150vw, 750px)) {
    background-size: clamp(320px, 150vw, 750px);
  }
}

.sidebar-lc-bg.loaded {
opacity: 1;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sidebar-lc-bg000 {
        background-image: url('selfolio-bg@2x.png'); /* Higher-resolution image */
    }
}

.sidebar-lc-bg000 {
    position: relative; 
    background: linear-gradient(to bottom, #8A2BE2 90px, transparent 90px);
    background-size: cover; 
    background-repeat: no-repeat;
}

.box-opacity{background: rgb(255 255 255 / 50%) !important;}

.box-style-0{
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  transition: box-shadow 0.3s ease;
  border:none !important;
  overflow:hidden;
}

.box-style-00{
  border-radius: 8px !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:1px;
  border:none !important;
  overflow:hidden;
}

.box-style-1{
  border-radius: 8px !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:16px 16px 10px 16px;
  overflow:hidden;
  position: relative;
}

.box-style-1 .card-body{ padding:10px !important;}

.box-style-b{
border-radius: 8px !important;
  box-shadow: 0 2px 2px rgba(192, 162, 226, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:16px 16px 10px 16px;
  border-top: 1px solid #C8A2E2 !important;
  border-right: 1px solid #C8A2E2 !important;
  border-bottom: 3px solid #C8A2E2 !important;
  border-left: 1px solid #C8A2E2 !important;
}

.box-style-b .card-body{ padding:10px !important;}



.box-style-2{
  border-radius: 8px !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:0px;
  border:none !important;
  overflow:hidden;
}

.box-style-2 .card-body{ padding:10px !important;}

.box-style-search{
  border-radius: 50px !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:16px;
  border:none !important;
  overflow:hidden;
}

.box-style-pagination{
  border-radius: 50px !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:8px 6px;
  border:none !important;
 
}

.box-style-pagination dl, .box-style-pagination ol, .box-style-pagination ul {
    margin-top: 0;
    margin-bottom: 0rem;
}


.box-style-3{
  border-radius: 8px !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16) !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:0px;
  border:none !important;
  overflow:hidden;
}

.box-style-3 .card-body{ padding:0 10px !important;}


.u-bubble {
  position: relative;
  background: #eef2f4;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0px 10px 0px;
  color: #333;
  font-size: 14px;
}

.u-bubble::after {
content: "";
  position: absolute;
  bottom: -9px;
  left: 25px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #eef2f4;
  
}

.f-bubble {
  position: relative;
  background: #eef2f4;
  border-radius: 8px;
  padding: 10px;
  margin: 10px 0px 10px 0px;
  color: #333;
  font-size: 14px;
}

.f-bubble::after {
content: "";
  position: absolute;
  bottom: -9px;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #eef2f4;
  
}






.point-snippet-box{}



/* Wrapper for horizontal scrolling */
.sl-masonry-grid-wrapper {
    position: relative; /* For arrow positioning */
    overflow-x: hidden; /* Hide scrollbars */
    width: 100%; /* Full-width layout */
    display: flex;
    align-items: center; /* Center-align arrows vertically */
}

/* Horizontal masonry grid */
.sl-masonry-grid {
    display: flex; /* Use flex for horizontal scrolling */
    gap: 16px; /* Maintain space between items */
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: nowrap; /* Prevent cards from wrapping */
    scroll-behavior: smooth; /* Smooth scrolling */
}
.sl-masonry-grid::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

.sl-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space evenly within each card */
    border-radius: 8px;
    background-color: #FFFFFF;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .125);
    flex: 0 0 auto; /* Ensure cards don’t shrink or grow */
	width:180px;
}

/* Navigation arrows */
.sl-masonry-arrow {
    position: absolute;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    top: 50%;
    transform: translateY(-50%);
	padding-top:3px;
}

/* Left Arrow */
.sl-masonry-arrow-left {
    left: 5px;
}

/* Right Arrow */
.sl-masonry-arrow-right {
    right: 5px;
}

/* Arrow hover effect */
.sl-masonry-arrow:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.sl-masonry-arrow:active {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Disable arrows on small screens */
@media (max-width: 767px) {
    .sl-masonry-arrow {
        display: none; /* Hide arrows */
    }
}




















.sl-grid-item:hover {
    background-color: rgba(255, 255, 255, 0.5) !important; /* 90% opacity */
}

.sl-card{}

.sl-grid-item:hover .sl-avatar {
	filter: alpha(opacity=80) !important;
	opacity: 0.8 !important;
}

.sl-card-link > .sl-avatar {
    background-color: #000000 !important;
}

.sl-card-link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-decoration: none;
    color: inherit;
	border: none !important;
}

.sl-avatar {
    width: 100%; /* Image spans full width of the container */
    height: 180px; /* Fixed height for consistent layout */
    object-fit: cover; /* Ensures the image fills the container without distortion */
    object-position: top; /* Aligns the image to the top of the container */
    display: block; /* Removes any extra inline spacing */
    margin: 0; /* No unwanted margins */
}





.sl-grid-item .card-body {
    padding: 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    flex-grow: 1; 
    text-align: center;
}

.sl-grid-item .card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; 
    line-height: 1.2;
    max-height: calc(1.2em * 2); 
    white-space: normal;
    word-wrap: break-word; 
}









.box-style-sp{
  border-radius: 8px !important;
  background-color: #FFFFFF;
  transition: box-shadow 0.3s ease;
  padding:0px;
  border:1px solid #eef2f4 !important;
  overflow:hidden;
}

.box-style-sp .card-body{ padding:0 8px !important; margin:0;}


.sp-bubble {
  position: relative;
  background: #eef2f4;
  border-radius: 6px;
  padding: 8px;
  margin: 8px 0px 8px 0px;
  color: #333;
  font-size: 12px;
}

.sp-bubble::after {
content: "";
  position: absolute;
  bottom: -9px;
  left: 15px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #eef2f4;
  
}

        .sp-card-link {
            text-decoration: none;
            color: inherit;
        }
        .sp-card-link:hover {
            text-decoration: none;
            color: inherit;
        }
		


.sp-card-link:hover .sp-bubble{
  background: #8A2BE2;
  color:#fff;
}

.sp-card-link:hover .sp-bubble::after {
  border-top-color: #8A2BE2;
}



.card-link:hover .u-bubble, .card-link:hover .f-bubble {
  background: #8A2BE2;
  color:#fff;
}

.card-link:hover .u-bubble::after, .card-link:hover .f-bubble::after {
  border-top-color: #8A2BE2;
}


/* Non-active nav-link (override only color) */
.nav-link {
    color: #8A2BE2 !important;  /* Primary purple text color */
}

/* Hover state for non-active nav-link */
.nav-link:hover {
    color: #5E35B1 !important;  /* Darker purple text on hover */
}



/* Navigation */
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #8A2BE2 !important;
    border-color: #8A2BE2 !important;
	border-radius:30px;
}

.navbar {
    padding: .0rem 1rem !important;
	height:56px !important;
}

/* Avatar */
.avatar-b1 {
    border: #f8f9fa 3px solid;
	background-color: #f8f9fa;
}

/* Cards */
.card:hover {
    background-color: rgba(255, 255, 255, 0.5) !important; /* 90% opacity */
}

.card-link:hover .image-wrapper img {
    opacity: 0.8 !important;
    filter: alpha(opacity=80) !important;
}

.card-link > .image-wrapper {
    background-color: #000000 !important;
}

/* Card Titles and Ellipsis */
.bm-card-title {
    display: flex;
    overflow: hidden;
}

.bm-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Search Bar with Rounded Corners */
.rounded-left {
    background-color: #eef2f4;
	border:1px solid #eef2f4;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
	padding-left:15px !important;
	padding-right:15px !important;
	height: 52px;
}

.rounded-right {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Miscellaneous */
.logotype img {
    max-width: 15% !important;
    margin: 25px 0 30px 0;
}

@media (max-width: 767px) {
.logotype img {
margin: 10px 0 20px 0;
    max-width: 25% !important;
}
}

.clear-search {
    cursor: pointer;
}

/* Custom container */
.bm-container-sm {
    max-width: 400px;
    margin: 0 auto;
}

    .mb-top-text {
        line-height: 30px;
    }

/* Responsive Text */
@media (max-width: 500px) {
    .mb-top-text {
        font-size: 15px !important;
        line-height: normal;
    }
}