/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* Disable Feather Fonts - Using Font Awesome Instead */
@font-face {
    font-family: 'feather' !important;
    src: none !important;
}

/* Override feather icon font to use Font Awesome */
.ficon,
[class*="ficon"],
.feather {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Fix Font Awesome Icons - Force Use Font Awesome */
.breadcrumb-item a i,
.breadcrumb-item i,
.navbar-toggler i,
.menu-toggle i,
[data-toggle="collapse"] i,
.modern-nav-toggle i,
.toggle-icon {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Fix Sidebar Toggle Icon */
.header-navbar .navbar-container .nav .nav-item.nav-toggle a i,
.nav-link.modern-nav-toggle i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Ensure all icons use Font Awesome */
i[class*="fa-"],
i[class*="fas "],
i[class*="far "],
i[class*="fab "],
i.ficon {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
}

/* Force Font Awesome for all icon elements */
i {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override any Feather icon specific classes */
.feather-icon,
[data-feather],
.icon-disc,
.icon-circle {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Ensure sidebar menu icons work */
.navigation .nav-item a i,
.main-menu-content i,
.menu-title i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Custom Avatar Styles for Initials */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.avatar-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cursor Pointer for Password Toggle */
.cursor-pointer {
    cursor: pointer;
}

/* Input Group Styling for Password Toggle */
.input-group-text {
    background-color: #fff;
    border-left: 0;
}

.input-group .form-control:focus ~ .input-group-append .input-group-text {
    border-color: #7367f0;
}

/* Toastr Custom Styling - Fix Transparency Issue */
#toast-container > div {
    opacity: 1 !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.175) !important;
    padding: 15px 15px 15px 50px !important;
    width: 300px !important;
}

.toast-success {
    background-color: #28c76f !important;
}

.toast-error {
    background-color: #ea5455 !important;
}

.toast-info {
    background-color: #00cfe8 !important;
}

.toast-warning {
    background-color: #ff9f43 !important;
}

#toast-container > div:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

.toast-title {
    font-weight: bold !important;
    color: #fff !important;
}

.toast-message {
    color: #fff !important;
}

.toast-close-button {
    color: #fff !important;
    opacity: 0.8 !important;
}

.toast-close-button:hover {
    opacity: 1 !important;
}

/* Star Rating Styling */
.star-rating {
    margin-top: 5px;
}

.star-rating .stars {
    display: inline-block;
    font-size: 2.5rem;
}

.star-rating .star {
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 5px;
}

.star-rating .star:hover {
    /* font-size:50px; */
    color:#FFF;
    /* text-shadow(0 0 5px lighten(#34495e,50%)); */
}

.star-rating .star.fas {
    color: #ff9f43;
}

.star-rating .star.far {
    color: #ddd;
}