:root {
    --primary-color: #5c6bc0;
    --secondary-color: #e0e0e0;
    --tertiary-color: #f4f7f6;
    --gradient-color: linear-gradient(to right, #385bd0, #354987);
    --upload-button-color: #e7e7e7;

    --blue-violet: #913dff;
    --next-button-color: linear-gradient(to bottom, #4AAEA3, #4AAEA3);

    --builder-header: #3e4b6d;
    --font: #3e4b6d;
    --use-this-template: linear-gradient(to bottom, #4AAEA3, #4AAEA3);
    ;
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

/* body {
    font-family: "Arial", sans-serif;
    margin: 0;
    padding: 0;
} */

h2 {
    /* font-weight: 600; */
    font-weight: 600;
    font-size: 1.5em
}

/* ---------  Font size of the summer note */
.note-editable {
    font-size: 15px !important;
    color: #232222;
}

#summernote {
    font-size: 15px !important;
    color: #232222;
}

.heading-a {
    font-weight: normal;
    font-size: 15px !important;
    font-family: 'Poppins'
}



.navbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: 10px 20px;

}

.navbar h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 5px 0;
}

.navbar .nav-links {
    display: flex;
    gap: 20px;
}

.navbar .nav-links a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
}

.navbar .nav-links a:hover {
    background-color: #ddd;
    border-radius: 5px;
}

.navbar .nav-links .button {
    /* background-image: var(--next-button-color); */
    background-color: #4AAEA3;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.navbar .nav-links .button:hover {
    background-color: #4aaea2a7;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

button:disabled,
button:disabled:hover {
    /* Styling for disabled button */
    background-color: #EFEFEF;
    /* Light gray */
    color: white;
    /* Text color */
    border: 1px solid #EFEFEF;
    /* Border color */
    transform: none;
    /* Ensure no transform is applied */
    cursor: not-allowed;
    /* Change cursor to indicate the button is disabled */
}

.app-left-label {
    color: #333;
    font-weight: 600;
}

.app-left-value {
    color: #2A9D8F;
    font-weight: 600;
}

#refreshApplications {
    opacity: 0
}

/*------------------------------------------------------- first page -------------------------------------------------  */


.onboarding-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    margin-top: 20px;

}

.onboarding-container h1 {
    font-size: 15px;
    font-weight: 600;
}

.onboarding-container h2 {
    margin: 40px 0 7px 0;
}

.progress-bar-heading {
    height: 7px;
    background: #e0e0e0;
    border-radius: 5px;
    margin: 10px 0;
    width: 100%;
}

.progress-heading {
    height: 100%;
    background: black;
    border-radius: 5px;
    width: 0%;
    /* Start with 0% width */
    animation: loadProgress 2s ease forwards;
    /* Animation name, duration, easing, and forwards to retain the end state */
}

@keyframes loadProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 33%;
    }
}


.heading-section p {

    color: #333333;
}

.errorP {
    color: red !important;
    display: none;
    font-weight: 500 !important;
    margin-top: 10px;
}

section p {

    color: #333333;
}

.selected-btn {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7 !important;
}

.switch-lang-divs {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

.switch-lang-divs p {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;

}

.switch-a {
    color: #333333;
    text-decoration: none;
    border: 1px solid #3f3f3f;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px;

}

.switch-a:hover {
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

.upload-section {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0 0;
}

.upload-option {
    width: 48%;
}

.upload-option p {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
}

.upload-button {
    background-color: var(--upload-button-color);
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 11px;
    box-shadow: 0 1px 1px rgba(103, 103, 103, 0.2);
    transition: transform 0.5 ease;
}

.upload-button:hover {
    transform: scale(1.02);
}


.upload-option .Or-span {
    display: block;
    text-align: center;
    margin: 25px 0;
}

.showFile {
    display: inline-block;
    margin-top: 10px;
    color: #333;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.upload-box {
    position: relative;
    width: 100%;
    padding: 10px;
    border: 2px dashed #ccc;
    text-align: center;
    border-radius: 10px;
}

.input-label-div {
    display: flex;
    flex-direction: column;
}

.showFile {}

.upload-icon {

    display: flex;
    justify-content: center;
}

.remove-file-button {
    background: none;
    border: none;
    color: red;
    font-size: 20px;
    cursor: pointer;
    margin-left: 10px;
}

.remove-file-button:hover {
    color: darkred;
}

#cv-show-file,
#jobpost-show-file {
    display: inline-block;
    margin-bottom: 4px;
    color: #434343;
    font-size: 14px;
    font-weight: 400;
}

.upload-box {
    border: 2px dashed #ccc;
    padding: 20px;
    border-radius: 8px;

    cursor: pointer;
    position: relative;
    background-color: #e7e7e7;

}

.upload-box label {
    display: block;
    cursor: pointer;
}

.upload-box input[type="file"] {
    display: none;
}

.upload-icon img {
    width: 50px;
    height: 50px;
}

.upload-text {
    margin-top: 8px;
    color: #333;
    font-size: 14px;
}

.supported-formats {
    font-size: 11px !important;
    color: #666 !important;
    margin-top: 5px !important;
}

#file-name {
    display: inline-block;
    margin-top: 10px;
    color: #333;
    font-size: 14px;
}

.remove-file-button {
    background: transparent;
    border: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
}

.remove-file-button:hover {
    color: darkred;
}



.textarea-with-button-container {
    /* margin-top: 20px; */
}

.upload-option textarea {
    width: 100%;
    padding: 10px;
    height: 200px;
    resize: none;
    box-sizing: border-box;
    border-radius: 10px;
    outline: 0.5px solid rgb(164, 163, 163);
    border: none;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px rgba(103, 103, 103, 0.2);
}



.upload-option textarea:focus {
    outline: 1px solid black;

}

.textarea-with-button-container {
    position: relative;
    display: inline-block;
    /* Adjust depending on layout needs */
    width: 100%;
    margin-bottom: 20px;
    /* Space for after the container */
}

#cv-textarea-container textarea {
    width: 100%;
    padding: 10px;
    height: 200px;
    /* Adjust height as needed to fit content and button */
    resize: none;
    box-sizing: border-box;
    border-radius: 10px;
    outline: 0.5px solid rgb(164, 163, 163);
    border: 1px solid #ccc;
    /* Mimic border to match other textareas */
    box-shadow: 0 1px 1px rgba(103, 103, 103, 0.2);

    padding-bottom: 45px;

}

#cv-textarea-container .textarea-button {
    position: absolute;
    bottom: 10px;
    /* Adjust to position the button correctly within the container */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border: 2px dashed grey;
    /* Dashed grey border */
    border-radius: 5px;
    background-color: transparent;
    /* Transparent background */
    color: grey;
    /* Match the border color for seamless design */
    cursor: pointer;
    font-size: 14px;
    /* Adjust font size as needed */
    text-align: center;
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
}

#cv-textarea-container .textarea-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Slight highlight on hover */
    color: black;
    /* Darken text to indicate interactivity */
    border-color: black;
    /* Darken border on hover for visibility */
}


#cv-textarea-container textarea:focus {
    outline: 1px solid black;
    /* Maintain focus style */
}


/*----------------------------------------------------cv dropdown-------------------------------  */
.next-btn-div {
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
    align-items: flex-end;
}

.next-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-image: var(--next-button-color);
    padding: 12px 40px;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: transform 0.1s ease, box-shadow 0.3s ease, filter 0.3s ease;
    /* Transition for shadow and filter */
    /* Initial shadow with slightly more visibility */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.pg5-copy-btn {
    background-color: #124774;
}

.next-button:hover {
    /* Increase the brightness on hover */
    filter: brightness(1.1);
    /* More pronounced shadow animation for visibility */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.next-button:active {
    transform: scale(0.95);
    /* Scale down slightly on click */
}




.back-button {
    width: 95px;
    padding: 12px 40px;
    background-color: #007bff;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: transform 0.1s ease, box-shadow 0.3s ease;
    /* Smooth transitions for shadow and press effect */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    /* Initial subtle shadow for depth */
    display: flex;
    justify-content: center;
    background-color: var(--upload-button-color);
    color: rgb(0, 0, 0);
}

.back-button:hover {
    /* background-color: #3f51b5; */
    /* Enhanced visible shadow for hover state */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.back-button:active {
    transform: scale(0.95);
    /* Press down animation on click */
}


/*--------------------------------------------------------------- Page-2 -------------------------------------------------------------------- */
.listening {
    fill: greenyellow;
    /* Listening color */
}

.mic-btns {

    cursor: pointer;
    padding: 5px !important;
    background-image: none !important;
    outline: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white !important;
}

.template {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    gap: 40px;
}

.template : hover {
    background-color: "light-grey";
}

.template img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    max-height: 100%;
}

.template .content button {
    padding: 10px;
    display: block;
    width: 100%;
    border: none;
    background-image: var(--use-this-template);
    background-color: #EFEFEF;
    color: rgb(255, 255, 255);
    border-radius: 8px;
    cursor: pointer;
    max-width: -moz-fit-content;
    max-width: fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin-top: 20px;
}



.template .content {
    margin: 0;
}

.template .content h2 {
    font-size: 1.1em;
    margin-bottom: 5px;
    margin-top: 1px;
    font-weight: 600;
}

.template .content h3 {
    color: #a1a5b9;
    font-size: 0.9em;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: 300;
}

.template .content p {
    color: #4A4A4A;
    font-size: 1.1em;
    /* margin-bottom: 5px; */
    margin-top: 1px;
    font-weight: 300;
}

.template button:hover {
    background-color: #3f51b5;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    text-align: right;
    margin-right: 2%;
    margin-bottom: 30px;
}

.navigation-buttons button.skip-button {
    width: -moz-fit-content;
    width: fit-content;
    padding: 12px;
    border: none;
    background-color: #EFEFEF;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    margin-right: 10px;
}

.navigation-buttons button.primary {
    background-color: #808ee1;
    color: white;
    padding-left: 3%;
    padding-right: 3%;
}

.navigation-buttons button.primary:hover {
    background-color: #3f51b5;
}


/* Loader CSS */
.textarea-container.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #333;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.textarea-container {
    position: relative;
}



/* ------------------------------------- Page 3 -------------------------------------------------- */

.get-started-p {
    margin-bottom: 40px;
}

.form-section {
    margin-bottom: 30px;
}

.form-section label {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 8px;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 10px;
}

.form-section .textarea-container {
    position: relative;
    width: 100%;
}

.form-section textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    height: 200px;
    resize: none;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(103, 103, 103, 0.2);

    padding-right: 34px;
}

.form-section .info-icon {
    margin-top: 3px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    /* Smooth transition for the opacity change */
}

.form-section .textarea-container a {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Hide the icon when the textarea is focused */
.form-section .textarea-container:focus-within .info-icon {
    opacity: 0;
    visibility: hidden;
}



.form-section button {
    color: white;
    padding: 10px;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-image: linear-gradient(to right, #385bd0, #e14e42, #f9d423);
    background-size: 300% 100%;
    background-position: 0% 50%;
    transition: background-position 1s ease, background-size 1s ease, transform 0.1s ease;
    /* Smooth transition for the transform effect */
}

.form-section button:hover {
    background-position: 100% 50%;
    background-size: 200% 100%;
}

.form-section button:active {

    transform: scale(0.95);
    /* Button scales down when clicked */
}



/* Optional: Keyframes for a pulsating effect */
@keyframes pulseAnimation {
    0% {
        background-size: 200% 100%;
    }

    50% {
        background-size: 250% 100%;
    }

    100% {
        background-size: 200% 100%;
    }
}

.form-section button:hover {
    animation: pulseAnimation 2s ease infinite;
}


.dotted {
    border-bottom: 2px dotted #ccc;
    margin: 20px 0;
}

.footer-buttons {
    display: flex;
    justify-content: space-between;
}

.footer-buttons button {
    width: calc(50% - 10px);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f4f7f6;
    cursor: pointer;
    /* Smooth transition for the press effect */
    transition: transform 0.1s ease;
}

.footer-buttons button:active {
    /* Scales down the button when clicked, giving a pressed effect */
    transform: scale(0.95);
}

/* You might have additional hover styles */
.footer-buttons button:hover {
    /* Example hover effect - adjust or remove according to your design */
    background-color: #e2e6e9;
}





.footer-buttons button.primary {
    background-color: #5c6bc0;
    color: white;
    border: none;
}

.footer-buttons button.primary:hover {
    background-color: #3f51b5;
}

/* General button styling for a professional look */
.view-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    /* Bootstrap primary color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.view-button:hover {
    background-color: #0056b3;
    /* Darker shade for hover effect */
}

/* Styling for the container to position the button over the image */
.image {
    position: relative;
    display: inline-block;
}

/* Position the button at the bottom-right of the image */
/* Adjusted button styling for transparency */
.view-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    font-size: 16px;
    color: #fff;
    background-color: rgba(0, 123, 255, 0.7);
    /* Blue with transparency */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.view-button:hover {
    background-color: rgba(0, 86, 179, 0.7);
    /* Darker blue on hover with the same transparency */
}



.image img {
    display: block;
    width: 100%;
    /* or specific width, depending on your layout */
    height: 150px;
    cursor: zoom-in;
}

#lightbox {
    z-index: 10000;
    position: fixed;
    /* Full viewport overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Semi-transparent black background */

    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    cursor: pointer;
    /* Optional: Changes the cursor to indicate the overlay can be clicked */
}


#lightboxClose {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: #fff;
}

#lightbox img {
    max-width: 80%;

    max-height: 80%;

    object-fit: contain;

}




.lightbox {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.lightbox-content img {
    /* max-width: 100%; */
    /* Ensures image is not wider than the screen */
    /* max-height: 100vh; */
    /* Ensures image is not taller than the screen */
    /* display: block; */
    /* Remove extra space below the image */
    margin: auto;
    width: 80%;
    height: 90%;
    /* Center the image horizontally in the lightbox */
}

.selected-template {
    border: 2px solid #4A4A4A;
    /* Blue border to indicate selection */
    background-color: #e9e9e9;
    /* Light blue background for visibility */
}



/* --------------------- Page 4 ------------------------------ */
.page-4 {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    margin-top: 20px;
}

.editable-section {
    /* display: flex;
    justify-content: center;
    gap: 30px; */
    margin-bottom: 20px;
}

.text-div {
    /* flex-basis: 80%; */
    /* width: 610px;*/

}

.model-div {
    display: none !important;
    flex-direction: column;
    justify-content: center;
}

.toggle-switch {
    position: relative;
    width: 163px;
    height: 50px;
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
}



.toggle-switch input[type="radio"] {
    display: none;
}

.toggle-switch label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    position: absolute;
    width: 50%;
    line-height: 50px;
    text-align: center;
    font-weight: 500;
    color: #ffffff;
    z-index: 2;
    cursor: pointer;
    transition: color 0.3s ease;
}

.toggle-switch label[for="chatgpt"],
.toggle-switch label[for="chatgpt1"],
.toggle-switch label[for="chatgpt3"],
.toggle-switch label[for="chatgpt4"] {
    left: 0;
    font-size: 10px;
}

.toggle-switch label[for="hamdan"],
.toggle-switch label[for="hamdan1"],
.toggle-switch label[for="hamdan3"],
.toggle-switch label[for="hamdan4"] {
    right: 0;
    font-size: 10px;
}


.switch-background {
    position: absolute;
    top: 0;
    left: 0;
    /* Start from the left side */
    width: 50%;
    height: 100%;
    background-color: #124774;
    /* Green by default */
    border-radius: 10px;
    transition: left 0.3s ease;
}

.toggle-switch input[type="radio"]:checked+label {
    color: #ffffff;
    /* Change text color when selected */
}

.toggle-switch input[type="radio"]:first-child:checked~.switch-background {
    left: 0;
    /* Stay on the left when GPT is checked */
}

.toggle-switch input[type="radio"]:nth-child(2):checked~.switch-background {
    left: 50%;
    /* Move to the right when Cluade is checked */
    background-color: #124774;

}


.heading-btn-div {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
}

.rewrite-btn {
    background-color: #4AAEA3;
    border: none;

    width: fit-content;
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
}

.textarea-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.edit-controls {
    margin-bottom: 10px;
}

.save-btn,
.cancel-btn {
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
}

.save-btn {
    background-color: #4CAF50;

    color: white;
    border: none;
    border-radius: 5px;
}

.cancel-btn {
    background-color: lightgray;
    color: white;
    border: none;
    border-radius: 5px;
}

.hidden {
    display: none;
}

#text-section textarea.content {
    box-sizing: border-box;
    border: none;
    width: 100%;
    outline: none;
    resize: none;

}

.icons-control-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(249, 250, 251, .8);
    padding: 5px;
    font-size: 13px;
}

.textArea-editable {
    box-sizing: border-box;
    padding: 15px;
    background-color: lightgray;
}

#newImg {
    width: 100px;
    margin-left: auto;
}

#model-Div1 {
    justify-content: flex-start;
}

/* the animation of the copy btn to tick btn  */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 0.5s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

.rewrite-reason-div {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(94, 93, 93, 0.9);
    backdrop-filter: blur(0.5px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.057);
    border-radius: 10px;
    box-sizing: border-box;
    top: 0;
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20%;


}

.rewrite-reason-div textarea {
    width: calc(100% - 20px);
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 10px;
    min-height: 50px;
    border-radius: 10px;
}

.rewrite-reason-div div {
    margin-top: 10px;
    align-self: flex-end;
}

.rewrite-reason-div button {
    border: none;
    padding: 5px;
    border-radius: 3px;
}

.content {
    min-height: auto;
}



.paragraph-wrapper {
    position: relative;
    min-height: 50px;
    /* Ensure the wrapper can contain absolutely positioned children */
}

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    /* Adjust the overlay background as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

.skeleton-loader {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    overflow: hidden;
    position: relative;
}

.skeleton-loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}



@keyframes shimmer {
    0% {
        left: -150%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 150%;
    }
}




@keyframes pulse {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.response-navigation {
    display: flex;
    align-items: center;
    border: 1px solid #d3d3d3;
    border-radius: 3px;
    padding: 5px;
    background-color: white;
}

.response-navigation button {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0;

}

.response-line {
    width: 1px;
    height: 21px;
    background-color: #d3d3d3 !important;
    margin: 0 auto !important;
    opacity: 0.5;
}

/* changings */
.read-text {
    color: #7d7c7c;
}

.response-counter {
    color: #7d7c7c;
}

.textarea.content {
    width: 100%;
    /* Full-width */
    padding: 10px;
    /* Padding inside the textarea */
    margin: 5px 0;
    /* Margin for spacing around each textarea */
    box-sizing: border-box;
    /* Include padding in total width and height */
    border: 1px solid #ccc;
    /* Light grey border */
    border-radius: 4px;
    /* Rounded borders */
    background-color: #f8f8f8;
    /* Light grey background */
    resize: none;
    /* Disable resizing */
    font-family: Arial, sans-serif;
    /* Professional font */
    font-size: 14px;
    /* Readable font size */
    line-height: 1.5;
    /* Spacing between lines */
    height: auto;
}

/* Additional styling for the rewrite reason div for consistency */
.rewrite-reason-div textarea {
    width: calc(100% - 20px);
    /* Adjusting width considering padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 10px;
    /* Spacing above the textarea */
}

#copyAll-next-div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;

}

.markdown-body p {
    margin-bottom: 10px !important;
}

/* --------------------- Page 5 ------------------------------ */
.first-template {
    border: 1px solid black;
    padding-bottom: 30px;
    font-family: 'Times New Roman', serif;
}

.div-main {
    font-family: 'Georgia Pro', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    width: 1414px;
    height: fit-content;
}

.header-headings {
    text-align: left;
}

.header {
    text-align: center;
    padding: 20px;

}

#first-template-hr {
    border: none;
    height: 1px;
    background-color: #000;
}

#first-template-last-hr {
    border: none;
    height: 1px;
    background-color: #000;
    width: calc(100% - 40px);
    margin: 0 auto;
}

.header h1 {
    font-size: 37px;
    margin-bottom: 0;
    margin-top: 0;
}


.subtitle {
    font-weight: 500;
    margin: 3px 0;
    font-size: 18.3px;

}

.header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 30px;
}

.contact-info p {
    margin: 5px 0;
    display: inline-block;
    margin-right: 15px;
    font-size: 0.9em;
}

.contact-info i {
    margin-right: 5px;
    color: #333;
}

.header hr {
    margin: 0;
    background-color: black !important;
}

.dark-horizontal-lines {
    border: none;
    height: 3px;
    background-color: #000;
}

.introduction {
    padding: 20px;
}

.introduction h2 {
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.footer {
    text-align: center;
    padding: 20px;

    font-size: 0.9em;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

main {
    padding: 0 50px;
}

textarea {
    width: 100%;
    resize: none;
    border: none;
    outline: none;

}

.carousel-container {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

.carousel-slide {
    display: flex;
    justify-content: center;
    transition: transform 0.5s ease-in-out;
    gap: 40px;
}

.carousel-slide img {
    max-width: 100%;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    /* Smooth scale on hover */
}

.carousel-slide img:hover {
    transform: scale(1.05);
    /* Slightly enlarge images on hover */
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    /* Light background for visibility */
    color: #333;
    /* Dark arrows for contrast */
    border: 1px solid #ddd;
    /* Subtle border */
    border-radius: 50%;
    /* Circular buttons */
    cursor: pointer;
    padding: 10px 15px;
    z-index: 100;
    opacity: 0.75;
    /* Slightly transparent for a softer look */
    transition: opacity 0.2s ease-in-out;
    /* Smooth fade on hover */
}

.arrow:hover {
    opacity: 1;
    /* Full opacity on hover */
}

#prevBtn {
    left: 10px;
}

#nextBtn {
    right: 10px;
}



.main1 {
    font-family: 'Georgia Pro', sans-serif;
    max-width: 800px;
    margin: 0 auto;
    width: 1414px;
    /*height: 2000px;*/
    position: relative;
    background-color: #F5F5F3;
    padding-bottom: 30px;
    font-family: 'Times New Roman', serif;
}


.header1 {
    text-align: center;
    padding: 20px;

    background-color: #6C708E;

    padding-left: 130px;
}

.header1 h1 {
    font-size: 37px;
    margin-bottom: 5px;
    margin-top: 0;
    color: #F6F6FA;
}

.header-headings1 {
    text-align: left;
}

.template-edit-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0px;
}

.subtitle1 {
    font-weight: 600;

    font-size: 18.3px;

    color: #CEBAB9;
}

.header-content1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px;
}

.contact-info1 p {
    margin: 5px 0;
    display: inline-block;
    margin-right: 15px;
    font-size: 0.9em;
    color: #F6F6FA;
}

.contact-info1 i {
    margin-right: 5px;
    color: #CEBAB9;
}









.contact-info1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}




.bar {
    position: absolute;
    width: 248px;
    height: 88px;
    background-color: #CEBAB9;
    transform: rotate(90deg);
    top: 0;
    left: -48px;
}

#footer1 {
    background-color: #6C708E;
    height: 60px;
    width: 100%;
    position: relative;

}


.copy-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    color: #124774;
    background-color: #fff;
    border: 1px solid #124774;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    outline: none;
    user-select: none;
    height: fit-content;
}

/* Additional CSS remains unchanged */

.copy-all-btn:hover {
    background-color: #1d6bb09b;
}

.copy-all-btn:active {
    transform: scale(0.95);
}


.btn-primary1 {
    color: #fff;
    background-color: #124774;
    border-color: #124774;
}

.btn-primary2 {
    color: #fff;
    background-color: #4AAEA3;
    border-color: #4AAEA3;
}



/* --------------------- Page 6 ------------------------------ */

/* .container-page6 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
} */

/* Statistics Section */
.stats-section {
    background-color: white;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
}

.stat-icon {
    color: #4AAEA3;
    margin-right: 0.75rem;
}

.stat-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 0;
}

.stat-value {
    font-size: 16px;
    font-weight: bold;
    margin-top: 0;
    color: #333333;
}

.divider {
    height: 3rem;
    width: 1px;
    background-color: #e5e7eb;
}

/* Search and Filter Section */
.search-filter-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.search-container {
    position: relative;
    flex-grow: 1;
    margin-bottom: 0.5rem;
}

.search-input {
    width: 99%;
    padding: 0.5rem 0.5rem 0.5rem 3rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.filter-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.filter-select {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.47rem;
    background-color: white;
    cursor: pointer;
}

.view-toggle-button {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.47rem;
    background-color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-button.active {
    background-color: #e5e7eb;
}

/* Application Cards */
.applications-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

.application-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.application-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.application-header {
    background-color: #f3f4f6;
    padding: 1rem;
}

.application-title {
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.application-title span {
    color: #333333;
}



.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.status-not-sent {
    background-color: #e5e7eb;
}

.status-sent {
    background-color: #bfdbfe;
}

.status-interview {
    background-color: #bbf7d0;
}

.status-rejected {
    background-color: #fecaca;
}

.view-button {
    background-color: #4AAEA3;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    border: none;
}

.view-button:hover {
    background-color: #0d9488;
}

.application-content {
    padding: 1rem;
    border-top: 1px solid #e5e7eb;
}



.copy-button {
    display: flex;
    align-items: center;
    background-color: #004578;
    color: white;
    padding: 5px 7.5px;
    border-radius: 0.375rem;
    border: none;
    margin-top: 22px;
    margin-bottom: 11px;
    margin-left: 10px;
}

.copy-button:hover {
    background-color: #00447870;
}

/* Responsive Design */
@media (min-width: 768px) {
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .applications-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1rem;
    align-items: start;
}

.block {
    display: block;
    width: 100%;
}

.list-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.application-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
    height: fit-content;
}

.application-header {
    background-color: #f3f4f6;
    padding: 1rem;
}

.application-title {
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 0.25rem 0 !important;
}

.application-date {
    font-size: 14px;
    color: #333;
    margin: 0;
}

.application-actions {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 10px;
}

.application-content {
    border-top: 1px solid #e5e7eb;
}

.content-text {
    background-color: #f9fafb;
    padding: 1rem;
    margin: 1rem;
    border-radius: 0.375rem;
    white-space: pre-wrap;
    max-height: 35rem;
    overflow-y: auto;
    margin-top: 10px;
}

.application-content {
    transition: all 0.9s ease;
}

.status-badge.loading {
    background-color: #f0f0f0;
    /* Example background to indicate loading */
    color: #888;
    /* Example color to indicate it is processing */
    cursor: wait;
}

.delete-icon.loading {
    color: #888;
    /* Example color to indicate it is processing */
    cursor: wait;
}

.no-applications {
    text-align: center;
    margin-top: 30px;
}



/* *********************************** asking questions style ******************************************/


.dk_job_cta_2024_container {

    padding: 15px;
    margin-top: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 2px;

    background-color: #EAF1F8;
    /* Right border */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dk_job_cta_2024_content_wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;

}



.dk_job_cta_2024_text_content {
    flex: 1;
}

#dk_job_cta_2024_heading {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

#dk_job_cta_2024_description {
    color: #333;
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

#dk_job_cta_2024_button1,
#dk_job_cta_2024_button {
    background-color: #4AAEA3;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    margin-left: 15px;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

#dk_job_cta_2024_button1:hover,
#dk_job_cta_2024_button:hover {
    background-color: #3a9584;
}

@media screen and (max-width: 600px) {
    .dk_job_cta_2024_container {
        flex-direction: column;
        gap: 20px;
    }

    #dk_job_cta_2024_button1,
    #dk_job_cta_2024_button {
        width: 100%;
    }
}


/* Modal container for centering */
.dk-jobs-questions-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    /* Optional: For overlay effect */
    z-index: 1000;
    /* Ensures it stays on top */
}

/* Modal styles */
.dk-jobs-question-modal {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    position: relative;

    width: 800px;
    overflow-y: auto;
    /* Adds scroll if modal content overflows */
}



/* Close button styles */
.dk-jobs-close-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: color 0.2s;
}

.dk-jobs-close-button:hover {
    color: #374151;
}

/* Title styles */
.dk-jobs-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;

    margin: 0;
    margin-bottom: 1rem !important;
    padding-right: 2rem;
}

.dk-jobs-modal-subtitle {
    color: #4B5563;
    margin-bottom: 1rem !important;
    font-size: 15px;
}

/* Question display styles */
.dk-jobs-question-display {
    background-color: #F3F4F6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;

}

.dk-jobs-question-text {
    color: #333;
    margin-bottom: 0.5rem !important;
    padding-right: 2.5rem;
    font-size: 15px;
}

.dk-jobs-question-tip {

    font-style: italic;
    color: #4B5563;
    font-size: 13px;
    margin-bottom: 0 !important;
}

/* Copy button styles */
.dk-jobs-copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.5rem;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 0.375rem;
    transition: color 0.2s;
}

.dk-jobs-copy-button:hover {
    color: #4AAEA3;
}

.dk-jobs-hidden {
    display: none;
}

/* Navigation controls styles */
.dk-jobs-navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.dk-jobs-nav-button {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: 15px;
}

.dk-jobs-prev-button {
    background-color: #E5E7EB;
    color: #374151 !important;
}

.dk-jobs-next-button {
    background-color: #4AAEA3 !important;
    color: white;
}

.dk-jobs-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dk-jobs-nav-button svg {
    margin: 0 0.5rem;
}

.dk-jobs-question-counter {
    color: rgb(75, 85, 99) !important;
    font-size: 15px;
    padding-right: 13px;
}

/* Tip box styles */
.dk-jobs-tip-box {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #EFF6FF;
    border-radius: 0.375rem;
    display: flex;
    align-items: flex-start;
}

.dk-jobs-info-icon {
    color: #004578;
    margin-right: 0.75rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.dk-jobs-tip-text {
    font-size: 13px;
    color: #004578;
    margin-bottom: 0 !important;
}

/* Back button styles */
.dk-jobs-back-button {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: #4AAEA3;
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 15px;
    margin-bottom: 40px !important;
}

.dk-jobs-back-button:hover {
    background-color: #0D9488;
}

/* Animation for copy feedback */
@keyframes dk-jobs-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes dk-jobs-fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.dk-jobs-fade-in {
    animation: dk-jobs-fadeIn 0.2s ease-in forwards;
}

.dk-jobs-fade-out {
    animation: dk-jobs-fadeOut 0.2s ease-out forwards;
}

/* Focus styles for accessibility */
.dk-jobs-questions-container button:focus,
.dk-jobs-questions-container button:focus-visible {
    outline: 2px solid #4AAEA3;
    outline-offset: 2px;
}

/* Hover states */
.dk-jobs-nav-button:hover:not(:disabled) {
    opacity: 0.9;
}

/* Active states */
.dk-jobs-nav-button:active:not(:disabled) {
    transform: translateY(1px);
}

/* Transition utilities */
.dk-jobs-transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .dk-jobs-questions-container {
        padding: 0.5rem;
    }

    .dk-jobs-question-modal {
        padding: 1rem;
    }

    .dk-jobs-modal-title {
        font-size: 1.25rem;
    }

    .dk-jobs-navigation-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .dk-jobs-question-counter {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }
}


.dk-jobs-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    /* Adjust overlay opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dk-jobs-skeleton-loader {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    overflow: hidden;
    position: relative;
}

.dk-jobs-skeleton-loader::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.593), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 150%;
    }
}


/* -------------- model code ------------------ */
.model-div {
    display: flex;
    align-items: center;
    justify-content: center;

}

.toggle-button {
    padding: 5px 14px;

    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.toggle-button[data-model="simple"] {
    background-color: #f0f0f0;

}

.toggle-button[data-model="premium"] {
    color: #fff;
}

.rewrite-model-div {
    display: flex;
    gap: 12px;
}


/* ======================================================= premium button ======================================= */
.premium-btn {
    position: relative;

    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: white;
    border: 1px solid #64748b;
    color: #333 !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}



.premium-btn[data-model="simple"] {
    background-color: white;
    border: 1px solid #64748b;
    color: #333 !important;
}



.premium-btn svg {
    width: 15px;
    height: 15px;
    stroke: #333;
}

.premium-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 60%;
    /* Increase width for a wider shimmer */
    height: 100%;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(249, 250, 251, .8) 50%,
            transparent 100%);
    animation: shimmer 20s infinite;
    /* Slower animation duration */
}

@keyframes shimmer {
    0% {
        left: -50%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: -50%;
    }
}


.icon-transition {
    transition: transform 0.3s ease;
}

.premium-btn:hover .icon-transition {
    transform: scale(1.1);
}



.copy-btn-div {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.speaker-div {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}


/* =============================================================== rewrite modal =========================================== */
/* Modal styles */
.dk-hamdan-modal-container {
    width: 550px;
    max-width: 95vw;
    background: white;
    border-radius: 5px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Header styles */
.dk-hamdan-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.dk-hamdan-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    margin: 0 0 4px 0;
}

.dk-hamdan-modal-subtitle {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
}

.dk-hamdan-close-button {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 5px;
    transition: all 0.2s;
}

.dk-hamdan-close-button:hover {
    background-color: #f3f4f6;
    color: #374151;
}

/* Options grid */
.dk-hamdan-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.dk-hamdan-option-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: white;
    cursor: pointer;

}



.dk-hamdan-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;

}



.dk-hamdan-option-title {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
}

.dk-hamdan-option-description {
    font-size: 13px;
    color: #4b5563;
    text-align: center;
}

/* Custom input section */
.dk-hamdan-custom-input-section {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 16px;
    transition: all 0.2s;
}


.dk-hamdan-custom-input-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.dk-hamdan-custom-input-label {
    background: white;
    padding: 6px 12px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dk-hamdan-input-container {
    position: relative;
}

.dk-hamdan-custom-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding-right: 110px !important;
}

.dk-hamdan-custom-input:focus {
    border-color: #14b8a6 !important;
    /* focus:border-transparent */
    box-shadow: 0 0 0 2px #14b8a6;
}

.dk-hamdan-custom-input:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    /* hover:shadow-md */
}

.dk-hamdan-custom-input::placeholder {
    color: #9ca3af;
}

.dk-hamdan-enter-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: #6b7280;
}

.dk-hamdan-enter-key {
    background: #e5e7eb;
    color: #4b5563;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Icons */
.dk-hamdan-icon {
    width: 20px;
    height: 20px;
    color: #14b8a6;
}

.dk-hamdan-icon-small {
    width: 16px;
    height: 16px;
}

.dk-hamdan-modal-container {
    display: none;
    /* Initially hidden */
    /* Your other existing styles */
}


#convencing:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

#simplify:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

#elaborate:hover {
    background-color: rgba(236, 72, 153, 0.1);
}

#concise:hover {
    background-color: rgba(124, 58, 237, 0.1);
}

.clear-icon {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #14b8a6;
    cursor: pointer;
    display: none;
    /* Hidden by default */
    padding: 5px;
}

.clear-icon:hover {

    background-color: rgba(128, 128, 128, 0.232);
    border-radius: 5px;

}


/* ----------------- mic CSS ----------------- */
.mic-icon.listening-glow {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        filter: drop-shadow(0 0 5px #28a745);
    }

    50% {
        filter: drop-shadow(0 0 15px #28a745);
    }

    100% {
        filter: drop-shadow(0 0 5px #28a745);
    }
}

.rewrite-mic {
    border: none;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}


.loader {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #7d7c7c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.speaker-div {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.speaker-text {
    color: #7d7c7c;
    font-size: 14px;
}




/* ================1================= small screens ================================= */
@media (max-width: 768px) {
    main {
        padding: 0;
    }

    .upload-section {
        flex-wrap: wrap;
    }

    .upload-option {
        width: 100%;
    }

    .middle-section {
        flex-wrap: wrap;
    }

    .template {
        flex-basis: 100%;
    }

    .container {
        padding: 0;
    }

    .page-4Section {
        padding: 0px;
    }

    .next-button {
        margin-top: 0;
    }

    .write-applicationDiv {
        margin-top: 0;
    }

    .back-button {
        margin-top: 0;
    }

    .two-lower-btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
    }

    .navigation-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 18px;
    }

    .onboarding-container {
        padding: 0;
    }

    .icons-control-div {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    .navbar {
        justify-content: center;
    }

    .heading-a {
        font-size: 11px !important;
    }

    #dk_job_cta_2024_button1,
    #dk_job_cta_2024_button {
        margin-left: 0;
    }

    .next-btn-div {
        display: flex;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 15px;
    }

    .dk_job_cta_2024_container {
        margin-bottom: 15px;
    }

    .last-next-btn {
        display: none !important;
    }

    .app-left-container {
        display: none;
    }

    #brosher {
        display: none;
    }

    .stat-label {
        font-size: 10px;
    }

    .grid-view {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .last-next-btn {
        display: none !important;
    }

    .skip-button {
        display: none;
    }
}

@media (max-width: 400px) {
    .copy-text {
        display: none;
    }
}




#jobpost-spinner,
#cv-spinner {
    display: none;
}

.spinner {
    width: 27px;
    height: 27px;
    border: 4px solid grey;
    border-top-color: black;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* --------------------------------- download-------------------------------- */
.download-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 200px;
    margin-top: 4px;
}

.download-option {
    padding: 8px 16px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    transition: background-color 0.2s;
}

.download-option:hover {
    background-color: #f5f5f5;
}

/*------------------------------- ! new uploading code  --------------------------------*/


/* Initial Upload Box */
.upload-box {
    border: 2px dashed #D9D9D9;
    border-radius: 8px;
    /* padding: 40px 20px; */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #F8F9FA;
    position: relative;
}

/* .upload-box:hover {
    border-color: #d7d7d754;
    background: #b9b9b989;
} */

.upload-box.highlight {
    border-color: #209183;
    background: #fff5f7;
}


.upload-icon svg {
    color: #209183;
}


.supported-formats {

    font-size: 12px;
    color: #777;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 19px;
}

.format-icons {
    background-color: #efefef;
    border-radius: 16px;
    padding: 4px 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.format-icons span {
    font-size: 12px;
    color: #777777;
    line-height: 21.6px;
    font-weight: 400;
}

.upload-instructions {
    font-size: 14px;
    color: #b3b3b3;
    font-weight: 400;
}

/* Uploading Progress Container */
.uploading-container {
    border: 2px dashed #D9D9D9;
    border-radius: 8px;
    padding: 20px;
    background: #F8F9FA;
    text-align: center;
}


.uploading-container p {
    margin: 10px 0 !important;
    color: #434343;
    font-weight: 400;
    font-family: Poppins, sans-serif;
}

.file-preview {
    display: flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 10px;
    background-color: #f5f5f5;
    margin-top: 9px;
    border: 1px solid #B2B2B2;
}

.file-icon {
    width: 50px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uploading-container-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.file-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-name-preview {
    font-size: 14px;
    color: #979797;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    margin-bottom: 4px;
}

.file-size {
    font-size: 12px;
    color: #B2B2B2;
}

/* Progress Bar Styles */
.progress-container {
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0;
    background-color: #209183;
    transition: width 0.3s ease;
}

/* Success Container */
.success-container {
    border: 2px dashed #D9D9D9;
    border-radius: 8px;
    padding: 20px;
    background: #F8F9FA;
    text-align: center;
    margin-bottom: 20px;
}

.success-icon {
    margin-bottom: 15px;
}

.success-text-p {
    margin: 10px 0 20px 0;
    color: #414141;
    font-weight: normal;
}

.success-text {
    color: #4CAF50;
    font-weight: bold;
}

.file-preview-success {
    display: flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 10px;
    background-color: #f5f5f5;
    margin-top: 9px;
    border: 1px solid #B2B2B2;
}

.file-info-success {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}

.file-actions,
.file-remove {
    display: flex;
    gap: 4px;
}

.preview-btn,
.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.preview-btn:hover {
    background-color: #e6e6e6;
}

.remove-btn {
    color: #209183;
    font-size: 18px;
}

.remove-btn:hover {
    background-color: #ffebee;
}

/* Error Styles */
.errorP {
    color: #209183;
    font-size: 12px;
    margin: 10px 0;
    display: none;
    text-align: center;
    padding: 10px;
}

.textarea-with-button-container {
    position: relative;
}

/* Hide file inputs */
input[type="file"] {
    display: none !important;
}

/* Remove button in upload box */
.remove-file-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #209183;
    font-size: 18px;
    background: none;
    border: none;
    display: none;
}

/* Bubble Loader Animation */
.bubble-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    gap: 8px;
    margin: 20px 0;
}

.bubble {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff9daf;
    animation: bubble-animation 1.8s ease-in-out infinite;
}

.bubble:nth-child(2) {
    animation-delay: 0.2s;
}

.bubble:nth-child(3) {
    animation-delay: 0.4s;
}

.bubble:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes bubble-animation {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(3);
        opacity: 0.8;
    }
}

/* Loader backdrop */
.loader-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    animation: fadeIn 0.3s ease-in-out;
    border-radius: 8px;
}

.loader-text {
    font-family: Poppins, sans-serif;
    color: #414141;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 19px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Loading and Error States */
.loading {
    text-align: center;
    /* padding: 20px; */
    color: #979797;
}

.loading:after {
    content: "...";
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: ".";
    }

    40% {
        content: "..";
    }

    60% {
        content: "...";
    }

    80%,
    100% {
        content: "";
    }
}

.error {
    color: #209183;
    text-align: center;
    padding: 20px;
}

/* File modal preview */
.file-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.file-preview-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

.close-preview {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

/* Success file name styling */
#cv-success-file-name,
#jobpost-success-file-name {
    margin: 0 !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .upload-section {
        padding: 10px;
    }

    .upload-option {
        padding: 15px;
    }

    .supported-formats {
        flex-direction: column;
        gap: 10px;
    }

    .file-name-preview {
        max-width: 200px;
    }
}


/*! --------------- markdown code  */
.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 45px;
    color: #000;
}

/* Custom styles to match textarea behavior */
.content.application-part {
    min-height: 100px;
    border-radius: 6px;
    padding: 12px;
    font-family: 'Poppins';
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    color: #000;
}

.content.application-part:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

.textArea-editable {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* Hide markdown-body default margins when editing */
.textArea-editable.markdown-body>* {
    margin: 0 !important;
}


/* --------------- history fixed   */
.content-text.markdown-body {
    padding: 16px !important;
}

.content-text.markdown-body p {
    margin: 0 !important;
}

.content-text.markdown-body ul {
    margin-top: -29px !important;
    margin-bottom: -12px !important;
}

.history-download-copy {
    display: flex;
    align-items: center;
    gap: 10px;

}

.download-history-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #124774;
    background-color: #fff;
    border: 1px solid #124774;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    outline: none;
    user-select: none;
    height: fit-content;
    display: flex;
    padding: 5px 7.5px;
    border-radius: 0.375rem;
    margin-top: 22px;
    margin-bottom: 11px;
    margin-left: 10px;
}