/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

.select2-search__field{
    min-width: 160px !important;
    font-size: 12px !important;
}

.content-left{
    background-color: #206875 !important;
}

/* ---------------------------------------------------------------------------------------------------------------------
PRELOADER CUSTOM CSS ---------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

#preloader {
       position: fixed; /* Needed for absolute positioning of children */
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       background-color: rgba(255, 255, 255, 0.95);
       z-index: 9999;
       opacity: 1; /* Make sure the preloader is fully visible initially */
       transition: opacity 0.2s ease-out; /* Smooth transition for the fade-out, matching the fadeOutDuration */
   }

.arrow {
    position: absolute;
    width: 250px; /* Adjust the size as needed */
    height: 250px; /* Adjust the size as needed */
    background-size: contain;
    background-repeat: no-repeat;
    animation: slideIn 0.3s ease-out forwards; /* Adjust duration and timing as needed */
    margin-bottom: 10px;
    opacity: 0;
}

#arrow1 {
    animation-delay: 0s;
    background-image: url('/assets/media/logos/logo-careerpath-1.svg');
}

#arrow2 {
    animation-delay: 0.1s;
    background-image: url('/assets/media/logos/logo-careerpath-2.svg');
}

#arrow3 {
    animation-delay: 0.2s;
    background-image: url('/assets/media/logos/logo-careerpath-3.svg');
}

@keyframes slideIn {
    from {
        transform: translate(-60%, 60%);
        opacity: 0;
    }
    to {
        transform: translate(0%, 0%);
        opacity: 1;
    }
}

#preloader p {
    font-size: 20px;
    margin-top: 20px;
    animation: fadeIn 1.5s ease-in-out forwards;
    animation-delay: 0.2s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bg-purple {
    background-color: #CD9FCC !important;
}

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

/* ---------------------------------------------------------------------------------------------------------------------
AI RELATED EFFECTS -----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.ai-btn {
    background: linear-gradient(45deg, #facb77, #f66d74, #e5c0e4);
    background-size: 200% 200%;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-position 1.5s ease-in-out;
}

.ai-btn:hover {
    background-position: right center; /* Change the position on hover */
}

/* ---------------------------------------------------------------------------------------------------------------------
SIGN UP SIDEBAR --------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .stepper-nav {
        flex-direction: row !important;
    }
    .stepper-label {
        display: none !important;
    }
    .stepper-line {
        display: none !important;
    }
    .footer-desktop {
        display: none;
    }
}

@media (min-width: 992px) {
    .footer-mobile {
        display: none;
    }
}

.footer-mobile {
    justify-content: center !important;
    margin-bottom: 10px !important;
    border-top: unset !important;
    padding-top: 20px;
}

/* ---------------------------------------------------------------------------------------------------------------------
CSS FOR TYPING ---------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

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

.typing-dots .dot {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    background-color: #333; /* You can change the color */
    border-radius: 50%;
    opacity: 0.4;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}


/* ---------------------------------------------------------------------------------------------------------------------
ROUND ICONS ------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.icon-circle {
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(240, 240, 240, 0.35); /* Set your desired background color here */
}

.btn-icon-wrapper {
    text-align: center;
}

.btn-icon-wrapper a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.btn-icon-wrapper a:hover {
    text-decoration: none;
}

.btn-icon-wrapper .btn:hover .icon-circle i {
    transform: scale(1.2); /* Enlarge the icon by 20% */
    transition: transform 0.2s ease-in-out; /* Smooth transition */
}

/* ---------------------------------------------------------------------------------------------------------------------
SIDEBAR WIDTH ----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

:root {
    --bs-app-sidebar-width: 245px !important; /* Your new width */
}


/* ---------------------------------------------------------------------------------------------------------------------
GRADIENT CARD WITH FOX -------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.profile-card {
    border-radius: 15px;
    background-image: linear-gradient(to top, #16c4b2b0 0%, #227d9de6 100%);
    padding-top: 80px;
    padding-bottom: 80px;
}

.profile-card-inner {
    border-radius: 15px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    max-width: 75%;
    margin: auto;
    text-align: center;
    position: relative;
}

/* Avatar styling */
.profile-card .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: -60px auto 25px;
    box-shadow: 0px 3px 50px 0px #0ad3bf, 0px 0px 0px 7px rgba(18, 128, 168, 0.69);
    background-color: #ffffffe6;
    transition: box-shadow 2s ease;
}

.profile-card .avatar img {
    width: 100%;
    height: auto;
    padding: 15px;
}

.profile-card-inner:hover .avatar {
    box-shadow: 0px 10px 50px 5px #16c4b2, 0px 0px 0px 7px #227d9db0;
}

/* ---------------------------------------------------------------------------------------------------------------------
PULSATING GUILLETES ----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

@keyframes pulsate {
    0% { filter: grayscale(100%); }
    50% { filter: grayscale(0%); }
    100% { filter: grayscale(100%); }
}
.pulsating {
    animation: pulsate 2s infinite;
}

/* ---------------------------------------------------------------------------------------------------------------------
        SEPARATOR LINES WITH TEXT ----------------------------------------------------------------------------------------------
        --------------------------------------------------------------------------------------------------------------------- */

.hr-text {
    border: 0;
    line-height: 1em;
    position: relative;
    text-align: center;
    height: 1.5em;
    font-size: 16px;
    margin: 30px 0;
}

.hr-text::before {
    content: "";
    background: #545151;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}

.hr-text::after {
    content: attr(data-content);
    position: relative;
    padding: 7px 7px;
    line-height: 1.5em;
    background: white;
    color: #3a3838;
}

/* ---------------------------------------------------------------------------------------------------------------------
PROGRESS BARS ----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0; /* Light background for progress bar track */
    border-radius: 1.5rem;
    overflow: hidden;
    margin-top: 15px;
}

.progress-bar {
    height: 100%;
    background: var(--cp-blue); /* Gradient similar to Duolingo */
    transition: width 0.5s ease;
}

/* ---------------------------------------------------------------------------------------------------------------------
AI RELATED EFFECTS -----------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.cp-ai-btn {
    background: linear-gradient(#fff, #fff) padding-box, var(--cp-gradient-primary);
    color: #313149;
    padding: 15px 20px;
    border: 2px solid transparent;
    border-radius: 0.85rem;
    display: inline-block;
    font-size: 16px !important;
}

/* ---------------------------------------------------------------------------------------------------------------------
DAILY ACTIVITIES -------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* Common Styles */
.card-daily-tip,
.card-daily-task,
.inactive-card-activities {
    border-radius: 50%;
    height: 150px;
    width: 150px;
}

.card-daily-tip {
    border: 10px solid var(--cp-orange);
    background: var(--cp-orange);
}

.card-daily-task {
    border: 10px solid var(--cp-blue);
    background: var(--cp-blue);
}

.inactive-card-activities {
    border: 10px solid lightgrey;
    background: lightgrey;
}

.inactive-card-activities > img {
    filter: grayscale(1);
}

.activity-img {
    max-width: 70%;
    max-height: 100%;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
}

/* Blinking effect for the first uncompleted card */

/* Blinking for card-daily-tip (orange) */
.blinking-card.card-daily-tip {
    animation: blink-animation-orange 3s steps(50, start) infinite;
}

.blinking-card.card-daily-tip > img {
    animation: blink-animation-img 3s steps(50, start) infinite;
}

/* Blinking for card-daily-task (blue) */
.blinking-card.card-daily-task {
    animation: blink-animation-blue 3s steps(50, start) infinite;
}

.blinking-card.card-daily-task > img {
    animation: blink-animation-img 3s steps(50, start) infinite;
}

/* Keyframes for blinking effect (orange) */
@keyframes blink-animation-orange {
    0% {
        background-color: grey;
        border-color: grey;
    }
    50% {
        border-color: var(--cp-orange);
        background-color: var(--cp-orange);
    }
    100% {
        background-color: grey;
        border-color: grey;
    }
}

/* Keyframes for blinking effect (blue) */
@keyframes blink-animation-blue {
    0% {
        background-color: grey;
        border-color: grey;
    }
    50% {
        border-color: var(--cp-blue);
        background-color: var(--cp-blue);
    }
    100% {
        background-color: grey;
        border-color: grey;
    }
}

/* Keyframes for blinking image (common for both types) */
@keyframes blink-animation-img {
    0% {
        filter: grayscale(1);
    }
    50% {
        filter: grayscale(0);
    }
    100% {
        filter: grayscale(1);
    }
}

/* Grey out inactive buttons */
.btn-greyed-out {
    background-color: grey;
    pointer-events: none; /* Disable clicks */
}

/* Optional styling for greyed-out cards */
.greyed-out {
    opacity: 0.5;
}

/* ---------------------------------------------------------------------------------------------------------------------
CUSTOM COLORS ----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

:root {
    --cp-blue: #1CB0F6;
    --cp-blue-light: #c1e6fa;
    --cp-blue-extra-light: #f1f9ff;
    --cp-green: #2DD881;
    --cp-green-light: #7dd5a8;
    --cp-green-extra-light: #d6efe2;
    --cp-yellow: #FFF275;
    --cp-yellow-light: #ece1a4;
    --cp-orange: #EF7B45;
    --cp-orange-light: #e39f80;
    --cp-orange-extra-light: #efd8cd;
    --cp-red: #A5243D;
    --cp-red-light: #ad5d6d;
    --cp-red-extra-light: #e3bbc3;
    --cp-gradient-primary: linear-gradient(60deg, var(--cp-blue) 0%, var(--cp-green) 50%, var(--cp-yellow) 100%) border-box;
    --transition-default: all 0.27s cubic-bezier(0, 0, 0.58, 1);
}

.bg-danger{
    background-color: var(--cp-red) !important;
}

.bg-danger-light{
    background-color: var(--cp-red-light) !important;
}

.text-danger{
    color: var(--cp-red) !important;
}

.bg-primary{
    background-color: var(--cp-blue) !important;
}

.bg-primary-light{
    background-color: var(--cp-blue-light) !important;
}

.text-primary{
    color: var(--cp-blue) !important;
}

.bg-success{
    background-color: var(--cp-green) !important;
}

.bg-success-light{
    background-color: var(--cp-green-light) !important;
}

.text-success{
    color: var(--cp-green) !important;
}


.bg-alert{
    background-color: var(--cp-orange) !important;
}

.bg-alert-light{
    background-color: var(--cp-orange-light) !important;
}

.text-alert{
    color: var(--cp-orange) !important;
}

.form-check-input:checked{
    background-color: var(--cp-blue);
    border-color: var(--cp-blue-light);
}

/* ---------------------------------------------------------------------------------------------------------------------
CUSTOM FORM FORMATTING -------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* For WebKit browsers (Chrome, Safari, etc.) */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px; /* Adjust track height */
    background-color: var(--cp-blue-extra-light); /* Track color */
    border-radius: 5px; /* Optional: Rounded corners for track */
    outline: none; /* Remove default outline */
}

/* Thumb for WebKit browsers */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; /* Adjust thumb size */
    height: 20px; /* Adjust thumb size */
    border-radius: 50%; /* Make it a circle */
    background-color: var(--cp-blue); /* Thumb color */
    border: 2px solid var(--cp-blue-light); /* Optional border */
    margin-top: -6px; /* Align thumb vertically with track */
    cursor: pointer;
}

/* For Firefox */
input[type="range"]::-moz-range-thumb {
    width: 20px; /* Adjust thumb size */
    height: 20px; /* Adjust thumb size */
    border-radius: 50%; /* Make it a circle */
    background-color: var(--cp-blue); /* Thumb color */
    border: 2px solid var(--cp-blue-light); /* Optional border */
    cursor: pointer;
}

/* For IE/Edge (legacy) */
input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--cp-blue);
    border: 2px solid var(--cp-blue-light);
}

/* ---------------------------------------------------------------------------------------------------------------------
SIDEBAR DESIGN ---------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.app-sidebar{
    border-radius: 0 !important;
    background-color: transparent !important;
    margin: 0 !important;
    border-right: 2px solid #e1dada !important;
}

.menu-title{
    text-transform: uppercase;
    color: #757171;
}

.menu-item:hover .menu-title,
.menu-link:hover .menu-title,
.menu-link.active .menu-title {
    color: #757171 !important; /* Prevent any color change on hover or active states */
}

.menu-item{
    height: 50px !important;
}

.menu-icon{
    max-height: 40px;
}

.menu-link{
    height: 60px;
}

.sidebar-active{
    border: 2px solid #e1dada !important;
}

/* ---------------------------------------------------------------------------------------------------------------------
BUTTONS ----------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.btn-cp-primary {
    background-color: var(--cp-blue);
    color: white;
}

.btn-cp-primary-light {
    background-color: var(--cp-blue-extra-light);
    border-color: var(--cp-blue-light);
    color: var(--cp-blue)
}

.btn-cp-success {
    background-color: var(--cp-green);
    color: white;
}

.btn-cp-primary:hover, .btn-cp-primary:focus {
    background-color: var(--cp-blue-extra-light);
    border-color: var(--cp-blue-light);
    color: var(--cp-blue)
}

.btn-cp-primary-light:hover, .btn-cp-primary-light:focus {
    background-color: var(--cp-blue);
    color: white;
}

.btn-cp-success:hover, .btn-cp-success:focus {
    background-color: var(--cp-green-extra-light);
    border-color: var(--cp-green-light);
    color: var(--cp-green)
}

.btn-cp-danger {
    background-color: var(--cp-red);
    color: white;
}

.btn-cp-danger-light {
    background-color: var(--cp-red-extra-light);
    border-color: var(--cp-red-light);
    color: var(--cp-red);
}

.btn-cp-danger:hover, .btn-cp-danger:focus {
    background-color: var(--cp-red-extra-light);
    border-color: var(--cp-red-light);
    color: var(--cp-red);
}

.btn-cp-danger-light:hover, .btn-cp-danger-light:focus {
    background-color: var(--cp-red);
    color: white;
}

.btn-cp-warning {
    background-color: var(--cp-orange);
    color: white;
}

.btn-cp-warning-light {
    background-color: var(--cp-orange-extra-light);
    border-color: var(--cp-orange-light);
    color: var(--cp-orange);
}

.btn-cp-warning:hover, .btn-cp-warning:focus {
    background-color: var(--cp-orange-extra-light);
    border-color: var(--cp-orange-light);
    color: var(--cp-orange);
}

.btn-cp-warning-light:hover, .btn-cp-warning-light:focus {
    background-color: var(--cp-orange);
    color: white;
}

/* ---------------------------------------------------------------------------------------------------------------------
MISC DESIGN ------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.card{
    box-shadow: none;
}

.cp-bordered{
    border: 1.5px solid #e1dada !important;
}

.cp-bordered-lightblue{
    border: 1.5px solid var(--cp-blue-light) !important;
}

.progress{
    height: 25px !important;
}

.app-page{
    background-color: white !important;
    font-family: 'Baloo Tamma 2', system-ui !important;
    font-size: 15px !important;
    font-weight: 600;
}

.resume{
    font-weight: 400 !important;
}

.select2-search__field{
    font-size: 16px !important;
}

.form-control{
    font-size: 16px !important;
}

.form-select{
    font-size: 16px !important;
}

.disabled-look {
    opacity: 0.6; /* Gray out the button */
    cursor: not-allowed; /* Show a disabled cursor */
}

/* ---------------------------------------------------------------------------------------------------------------------
UPPER MENU DESIGN ------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.app-left-menu{
    background-color: #1cb0f6;
    border-radius: 1.5rem;
    color: white;
    margin-top: 50px;
    padding: 30px 20px 20px 20px;
    height: max-content;
}

.app-right-menu{
    border-radius: 0.85rem;
    color: white;
    margin-top: 50px;
    padding: 10px 20px 20px 20px;
    display: flow;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------------------------
SIGN IN / UP -----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

.fv-row {
    position: relative;
}

#togglePassword {
    font-size: 20px;
    color: #333;
}

.stepper.stepper-pills .stepper-item.current .stepper-icon{
    background-color: var(--cp-green);
}

.stepper-check{
    color: var(--cp-blue-extra-light) !important;
}

.btn-check:active+.btn.btn-active-light-primary, .btn-check:checked+.btn.btn-active-light-primary, .btn.btn-active-light-primary.active, .btn.btn-active-light-primary.show, .btn.btn-active-light-primary:active:not(.btn-active), .btn.btn-active-light-primary:focus:not(.btn-active), .btn.btn-active-light-primary:hover:not(.btn-active), .show>.btn.btn-active-light-primary {
    color: var(--cp-blue-extra-light);
    border-color: var(--cp-blue-light) !important;
    background-color: var(--cp-blue-extra-light) !important;
}

.invalid-feedback{
    font-size: 16px !important;
}

/* ---------------------------------------------------------------------------------------------------------------------
MOBILE FRIENDLY DESIGN (MAINLY SIDEBAR AND MENU) -----------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------- */

/* Hamburger icon styling */
.hamburger-icon {
    display: block;
    cursor: pointer;
    background: none;
    border: none;
    top: 15px;
    left: 15px;
}

.hamburger-icon span {
    display: block;
    width: 25px;
    height: 3px;
    margin-bottom: 4px;
    background-color: #444444;
}

.hamburger-menu{
    position: fixed;
    min-height: fit-content;
    background-color: white;
    z-index: 1000; /* Ensure it's above other elements (except sidebar) */
    border-bottom: 1.5px solid #e1dada !important;
}

#kt_app_sidebar{
    width: 275px !important;
    background-color: white !important;
    z-index: 1010;
}

/* Media query for larger screens */
@media (min-width: 992px) {
    .hamburger-menu {
        display: none !important; /* Hide hamburger icon on larger screens */
    }
}

@media (max-width: 991px) {
    .app-left-menu{
        position: relative !important;
        z-index: 1 !important;
        margin-top: 100px !important;
    }

    .app-right-menu{
        padding: 0 !important;
    }

    .app-sidebar{
        min-width: 325px !important;
    }
}