:root {
    --sfs-primary-color: #0254ae;
    --sfs-highlight-color: #39e1b7;
    --bs-purple: var(--sfs-primary-color) !important;
}
.hidden {
    display: none;
}

/** fonts **/
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 300 to 800

.kalam-light {
  font-family: "Kalam", cursive;
  font-weight: 300;
  font-style: normal;
}

.kalam-regular {
  font-family: "Kalam", cursive;
  font-weight: 400;
  font-style: normal;
}

.kalam-bold {
  font-family: "Kalam", cursive;
  font-weight: 700;
  font-style: normal;
}

.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.noto-sans-<uniquifier> {
  font-family: "Noto Sans", system-ui;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.ubuntu-light {
  font-family: "Ubuntu", system-ui;
  font-weight: 300;
  font-style: normal;
}

.ubuntu-regular {
  font-family: "Ubuntu", system-ui;
  font-weight: 400;
  font-style: normal;
}

.ubuntu-medium {
  font-family: "Ubuntu", system-ui;
  font-weight: 500;
  font-style: normal;
}

.ubuntu-bold {
  font-family: "Ubuntu", system-ui;
  font-weight: 700;
  font-style: normal;
}

.ubuntu-light-italic {
  font-family: "Ubuntu", system-ui;
  font-weight: 300;
  font-style: italic;
}

.ubuntu-regular-italic {
  font-family: "Ubuntu", system-ui;
  font-weight: 400;
  font-style: italic;
}

.ubuntu-medium-italic {
  font-family: "Ubuntu", system-ui;
  font-weight: 500;
  font-style: italic;
}

.ubuntu-bold-italic {
  font-family: "Ubuntu", system-ui;
  font-weight: 700;
  font-style: italic;
}
.roboto-thin {
  font-family: "Roboto", system-ui;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", system-ui;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", system-ui;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", system-ui;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", system-ui;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", system-ui;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", system-ui;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", system-ui;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", system-ui;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", system-ui;
  font-weight: 900;
  font-style: italic;
}

/** end fonts **/

/** Home page related **/
.home-email {
 border-bottom-left-radius: 0px !important;
 border-top-left-radius: 0px !important;
}

.company-name {
    font-size: 1.15em !important;
    font-family: "Kalam", cursive !important;
    padding: 0px !important;
    text-transform: capitalize !important;
    color: var(--sfs-primary-color) !important;
}
.company-name:hover {
    color: var(--sfs-primary-color) !important;
}

/** Wizard related **/
.filter-border::before {
    border-right: 0px;
}
.wizard-title {
    margin-bottom: 1em;
    margin-top: 1em;
}

.wizard-title span {
    border-bottom: 2px solid var(--sfs-primary-color);
    color: var(--sfs-primary-color);
    font-size: 1.5em;
}

.registration-form .form-control {
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    font-weight: 400;
}

.footer-alt a {
    color: inherit;
}

.wizard {
    background-color: #f3f3f3;
    min-height: 100vh;
}

.wizard-container {
    padding: 20px;
    border-radius: 5px;
    width: 100ch !important;
    margin-left: auto;
    margin-right: auto;
}

.wizard-margin {
    margin-top: 5em;
}

.wizard-container form {
    margin-left: auto;
    margin-right: auto;
}

.wizard-home {
    padding-top: 200px !important;
}

.wizard-form {
    margin-bottom: 10px
}

.wizard-form label {
    font-size: 1.2em;
    display: inline;
    text-align: left;
}

.wizard-form input {
    padding-left: 10px;
    display: inline;
}

.wizard-form input[type="date"] {
    display: inline;
    width: 70%;
    margin-left: 10px;
}

.wizard-form input[type="checkbox"] {
    display: inline;
    transform: scale(1.5); /* Adjust the scale value as needed */
    -webkit-transform: scale(1.5); /* For Safari */
    -ms-transform: scale(1.5); /* For IE */
    margin-left: 30px;
}

.wizard-form input:invalid + span::after {
  content: " ✖";
}

.wizard-form input:valid + span::after {
  content: " ✓";
}

.wizard-form textarea {
    padding-left: 10px;
}
.wizard-form select {
    padding-left: 10px;
}

/** Progress Menu **/
.next-step {
    float: right;
    width: 30% !important;
    background-color: var(--sfs-primary-color) !important;
    border-color: var(--sfs-primary-color) !important;
}

.current-step {
    float: left; /* Align the button to the left */
    border-radius: 8px 0px 0px 8px !important;
    background-color: var(--sfs-primary-color) !important;
    border-color: var(--sfs-primary-color) !important;
}

.progress-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0;
}
.mobile-progress-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 0;
}

.step {
    position: relative;
    padding: 15px 14px; /* Increased height by 50% */
    background-color: gray; /* Default background color */
    color: white;
    flex: 1;
    text-align: center;
    font-size: 2em; /* Increased font size */
}
.step span {
    display: inline-block;
    width: 50px; /* Adjust the size as needed */
    height: 50px; /* Adjust the size as needed */
    line-height: 50px; /* Center the text vertically */
    border-radius: 50%; /* Make the border circular */
    border: 2px solid; /* Add border */
    text-align: center; /* Center the text horizontally */
    margin-right: 0.5em; /* Add some spacing between the number and text */
}

.step:not(:first-child) {
    margin-left: -30px; /* Overlap the previous step's triangle */
}

.step.active {
    background-color: var(--sfs-primary-color); /* Blue background for the active step */
}

.step.completed {
    background-color: var(--sfs-highlight-color); /* Green background for completed steps */
}

.step::after {
    content: '';
    position: absolute;
    top: 0;
    right: -30px; /* Adjusted to accommodate the increased width */
    width: 0;
    height: 0;
    border-top: 40px solid transparent; /* Increased height by 50% */
    border-bottom: 40px solid transparent; /* Increased height by 50% */
    border-left: 30px solid gray; /* Default color for the triangle */
}
/** Hide the triangle on the last step */
.step:last-child::after {
    display: none;
}

/* Set higher z-index for steps based on their position */
.step:nth-child(1) { z-index: 10; }
.step:nth-child(2) { z-index: 9; }
.step:nth-child(3) { z-index: 8; }
.step:nth-child(4) { z-index: 7; }
.step:nth-child(5) { z-index: 6; }
.step:nth-child(6) { z-index: 5; }
.step:nth-child(7) { z-index: 4; }
.step:nth-child(8) { z-index: 3; }
.step:nth-child(9) { z-index: 2; }
.step:nth-child(10) { z-index: 1; }

/* Set the border-left color of the triangle to match the background color of the current step */
.step.completed::after {
    border-left-color:  var(--sfs-highlight-color) ;
}

.step.active::after {
    border-left-color: var(--sfs-primary-color);
}

.mobile-progress-menu .step {
    display: none; /* Hide all steps by default */
}

.mobile-progress-menu .step.active {
    display: block; /* Display only the active step */
}

.step:not(.completed):not(.active)::after {
    border-left-color: gray;
}

.next-step {
    float: right; /* Align the button to the right */
    width: 30% !important; /* Set the width to 30% */
    line-height: 4em;
}


/* Adjust the size of the buttons for different screen sizes */
@media (max-width: 575.98px) { /* Extra small devices (portrait phones, less than 576px) */
    .next-step, .current-step {
        width: 100% !important; /* Full width */
        line-height: 2em; /* Adjust line height */
    }
}

@media (min-width: 576px) and (max-width: 767.98px) { /* Small devices (landscape phones, 576px and up) */
    .next-step, .current-step {
        width: 50% !important; /* Half width */
        line-height: 3em; /* Adjust line height */
    }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* Medium devices (tablets, 768px and up) */
    .next-step, .current-step {
        width: 40% !important; /* 40% width */
        line-height: 3.5em; /* Adjust line height */
    }
}

@media (min-width: 992px) { /* Large devices (desktops, 992px and up) */
    .next-step, .current-step {
        width: 30% !important; /* 30% width */
        line-height: 4em; /* Adjust line height */
    }
}


/** Hide the status bar from tinymce **/
.tox-statusbar {
    display: none !important;
}
.tox-tinymce {
    margin-bottom: 10px;
}

.col-lg-12 {
    margin-top: 20px;
}

.wizard .col-lg-8 {
    margin-top: 20px;
}

/** Reviewer related **/
.resume-page {
    padding: 20px;
    border-radius: 5px;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding: 4em;
    margin-top: 60px;
}

.resume-page .container {
    max-width: 90% !important;
}

.resume-page .container .row {
    max-width: 100% !important;
}

 .resume-page-summary {
 }

 .resume-page-summary ul li p {
     margin-bottom: 0px !important;
 }

 /** home page **/
 .bg-home {
    background-color: var(--sfs-primary-color) !important;
 }

 .bg-home .container {
    max-width: 80% !important;
 }

 .bg-home p {
    text-transform: capitalize;
 }

 .bg-home h1 {
    text-transform: capitalize;
 }

 .bg-home h1 span {
    color: var(--sfs-highlight-color) !important;
 }

 .filter-search-form i {
   color: var(--sfs-highlight-color) !important;
 }

 .process-menu.nav-pills .nav-link.active {
    color: var(--sfs-primary-color) !important;
 }

 .navbar-brand {
    display: flex !important;
    align-items: center !important;
 }

 .process-menu.nav-pills .nav-link.active .number {
      background-color: var(--sfs-primary-color);
 }
 .footer-alt {
    padding: 10px !important;
    margin-top: auto;
 }
.footer-alt .col-lg-12 {
    margin-top: 0 !important;
}
.footer-alt .col-lg-12 p {
    font-size: 0.8em;
    text-transform: none;
}
 #createUserForm .submit-btn {
    background-color: var(--sfs-highlight-color) !important;
    border-color: var(--sfs-highlight-color) !important;
    color: white;
    font-size: 1.2em;
    text-transform: uppercase;
 }

.resume-page-ai-feedback {
    border: 1px solid #d3d3d3; /* Subdued gray color */
    border-radius: 5px; /* Rounded border */
    position: relative; /* Positioning context for the pseudo-element */
    padding: 10px; /* Optional: Add padding inside the border */
}

.resume-page-ai-feedback::before {
    content: 'AI Feedback';
    position: absolute;
    top: -10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    background-color: white; /* Match the background color */
    padding: 0 5px; /* Add some padding around the text */
    font-size: 0.8em; /* Optional: Adjust font size */
    color: #6c757d; /* Subdued gray color for the text */
}

.resume-page-hi-feedback {
    border: 1px solid #d3d3d3; /* Subdued gray color */
    border-radius: 5px; /* Rounded border */
    position: relative; /* Positioning context for the pseudo-element */
    padding: 10px; /* Optional: Add padding inside the border */
}

.resume-page-hi-feedback::before {
    content: 'Expert Feedback';
    position: absolute;
    top: -10px; /* Adjust as needed */
    left: 10px; /* Adjust as needed */
    background-color: white; /* Match the background color */
    padding: 0 5px; /* Add some padding around the text */
    font-size: 0.8em; /* Optional: Adjust font size */
    color: #6c757d; /* Subdued gray color for the text */
}

.feedback-button {
    text-align: center;
    margin-bottom: 1.2em;
}

.feedback-button a {
    border-bottom: 2px solid;
    text-transform: capitalize;
    font-size: 1.2em;
    color: var(--sfs-primary-color);
}

.disabled-link {
    pointer-events: none;
    color: gray;
    cursor: not-allowed;
}

.candidate-details .bg-soft-primary {
    background-color: var(--sfs-primary-color) !important;
    color: white !important;
}

.candidate-contact-details .bg-soft-primary {
    background-color: var(--sfs-primary-color) !important;
    color: white !important;
}

.candidate-profile .bg-soft-success {
    background-color: rgba(4, 133, 101, .15) !important;
    color: var(--sfs-highlight-color) !important;
    margin-right: 1em;
}

.terms-link {
    color: inherit;
}
.terms-link:hover {
    color: inherit;
}

.support-email {
    text-transform: lowercase !important;
}

.edit-button {
    color: inherit;
    margin-left: 2em;
}

.edit-button a {
    font-size: inherit !important;
    color: var(--sfs-primary-color) !important;
}

.wizard .resume-page-summary-feedback {
    padding: 2em;
}

::selection {
  color: white;
  background: var(--sfs-primary-color);
}


.form-check-input:checked {
    background-color: var(--sfs-primary-color) !important;
    border-color: var(--sfs-primary-color) !important;
}
.wizard .resume-page-summary-feedback::before {
    font-size: 1em;
}



.add-wizard-btn {
    background-color: var(--sfs-primary-color) !important;
    border-color: var(--sfs-primary-color) !important;
    line-height: 3em;
    border-radius: 5px !important;
    min-width: 30%;
    margin-left: 1em;
}

.skip-btn {
    border-color: var(--sfs-primary-color);
    background-color: white;
    border-radius: 5px !important;
    margin-left: 5% !important;
    color: var(--sfs-primary-color);
    min-width: 15%;
    line-height: 4em;
}

.skills-badge {
    margin-right: 10px;
}

.date-range {
    font-weight: 400;
    font-size: 1em;
}

.share-buttons {
    text-align: center;
    font-size: 1.2em;
    border: 1px solid var(--sfs-primary-color);
    padding: 1em;
    border-radius: 5px;
    margin-bottom: 2em;
}
.share-buttons span {
    line-height: 1.5em;
    font-size: 1.2em;
}
.share-buttons i {
    color: var(--sfs-primary-color) !important;
    font-size: 1.2em;
    margin-right: 0.25em;
    margin-left: 0.25em;
}

.btn-primary {
    background-color: var(--sfs-primary-color) !important;
    border-color: var(--sfs-primary-color) !important;
}

.question-container {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.question-container h2 {
    border-bottom: 1px dotted lightgray;
    line-height: 2em;
    font-size: 1.4em;
    margin-bottom: 1em;
}

.answer-form {
}

.answer-form input {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.answer-form label {
    font-size: 1.2em;
    margin-left: 0.5em !important;
}
.answer-form .input-group {
}

::selection {
  color: $white;
  background: $primary;
}
a:hover {
    text-decoration: none;
    color: inherit;
}

.navbar .navbar-nav .nav-link {
    font-size: 1em;
    color: inherit !important;
}
.text-primary {
    color: var(--sfs-primary-color) !important;
}

/** Default resume format **/
.resume-format-default {
}

.resume-format-default .circled-text {
    background-color: black;
    color: white;
}
.resume-format-default h1 {
    font-size: 1.45rem !important;
    line-height: 2.5rem !important;
}
.resume-format-default * {
    box-sizing: unset !important;
}

.resume-format-default .default-skill {
    margin-right: 1em;
    font-size: 1em;
    font-weight: 500;
    font-style: normal;
}

.resume-format-default .key-skills-container {
    border: 1px solid #636363;
    padding: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.resume-format-default h2 {
    font-size: 1.2rem !important;
    line-height: 2rem !important;
}

.resume-format-default *::before,
.resume-format-default *::after {
    box-sizing: unset !important;
}
.resume-format-default .text-center {
    justify-content: center;
    display: flex;
}

.candidate-section-content {
    position: relative;
}

.candidate-section-content .circle {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 40px;
}
.candidate-education-content::before {
    all: unset !important;
}

.resume-format-default .hr-border {
    border-bottom: 1px solid #636363;
    margin-bottom: 1em;
}

.resume-format-default .text-center span {
    display: flex;
}

.resume-format-default .text-center i {
    display: flex;
}

/* Add this at the end of your CSS file */
* {
    font-family: "Roboto", system-ui !important;
}