body {
        font-family: inter;
        background: #FFFEFA;
    }

    .cms-login-title, .cms-login {
        text-align: center;
        margin: 0 auto;
        width: 350px;
    }

    .chips-input {
        min-height: 48px;
        border: 2px solid #46635e;
        border-radius: 8px;
        background: #fff;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 12px;
        cursor: pointer;
        position: relative;
    }
    .chip {
        background: #46635e;
        color: #fff;
        border-radius: 999px;
        padding: 6px 16px 6px 16px;
        display: flex;
        align-items: center;
        margin-right: 4px;
        font-size: 1rem;
    }
    .chip .remove-chip {
        margin-left: 8px;
        cursor: pointer;
        font-weight: bold;
    }
    .dropdown-arrow {
        margin-left: auto;
        color: #e0e0e0;
        font-size: 1.5em;
        pointer-events: none;
    }
    .dropdown-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        background: #fff;
        border: 2px solid #46635e;
        border-top: none;
        border-radius: 0 0 8px 8px;
        max-height: 220px;
        overflow-y: auto;
        display: block;
    }
    .dropdown-option {
        padding: 10px 16px;
        cursor: pointer;
        transition: background 0.2s;
    }
    .dropdown-option:hover {
        background: #e6f0ee;
    }
    .dropdown-option.selected {
        background: #46635e;
        color: #fff;
        pointer-events: none;
    }
        .chip {
            display: inline-flex;
            align-items: center;
            border-radius: 16px;
            padding: 3px 10px 3px 10px;
            margin: 2px 4px 2px 0;
            font-size: 15px;
        }
        .chip .remove-chip {
            margin-left: 6px;
            cursor: pointer;
            font-weight: bold;
        }
        .dropdown-option {
            padding: 8px 12px;
            cursor: pointer;
        }
        .dropdown-option:hover {
            background: #f5f5f5;
        }
        .dropdown-group-label {
            font-weight: bold;
            padding: 8px 12px 4px 12px;
            color: #555;
            background: #fafafa;
        }

    .cms-login-input {
        width: 330px;
        text-align: left;
        display: inline-block;
        padding: 10px;
        padding-left: 20px;
        margin-bottom: 25px;
    }

    .cms-login-submit {
        width: 250px;
        padding: 5px;
        color: #000;
        background-color: #fff;
        border: solid 1px #000;
        cursor: pointer;
    }

    .cms-logo-container {
        text-align: center;
        height: auto;
        display: block;
        margin-top: 60px;
    }

    .cms-login-logo {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 80%;
        height: auto;
    }

    .button-container {
        font-family: 'Inter';
        text-align: center;
        margin-top: 20px;
    }

    .button-container a {
        text-align: center;
        font-size: 16px;
        color: #000;
    }

    .navbar-nav {
        list-style: none;
        display: flex;
        border: solid 1px;
    }

    .navbar-nav li {
        margin: 20px 20px;
    }

    .nav-link {
        font-size: 12px;
    }

    .alert-danger {
        color: #9D1414;
        font-size: 16px;
        font-weight: bold;
    }

    .alert-danger ul {
        list-style-type: none;
    }

    .alert-danger-field {
        border-color: #9D1414;
    }

    .item-single-title div {
        margin: 10px;
        margin-left: 20px;
    }

    .item-single-title, .item-single {
        display: flex;
        border: solid 1px;
    }

    .item-single-education {
        display: block;
    }

    .item-single div {
        margin: 10px;
        margin-left: 20px;
        border: solid 1px;
    }

    .item-width {
        width: 130px;
    }

    .item-width-numeric {
        width: 40px;
    }

    .item-width-scan {
        width: 170px;
    }

    .item-width-long {
        width: 300px;
    }

    .item-edit button {
        background-color: orange;
        color: white;
    }

    .item-delete button {
        background-color: red;
        color: white;
    }

    .item-add button, .item-update, .item-insert {
        background-color: green;
        color: white;
    }

    .item-add {
        border: none !important;
        margin-top: 25px !important;
    }

    .candidate-delete {
        background-color: red;
        color: white;
        width: 70px;
    }

    .candidate-add {
        background-color: #1D3A8A;
        color: white;
        width: 50px;
    }

    .tab-education {
        display: none;
    }

    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }

    .tabcontent {
        animation: fadeEffect 1s; /* Fading effect takes 1 second */
    }

    .candidate-details {
        margin-top: 15px;
        margin-left: 15px;
    }

    /* Go from zero to full opacity */
    @keyframes fadeEffect {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    .show-candidate, .show-company {
        display: flex;
    }

    .personal-details, .company-details{
        float: left;
        border : solid 1px;
        border-color: #000;
        border-radius: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .personal-image img, .personal-search-results img, .personal-search-results-details img,
    .company-image img{
        border-radius: 50%;
        overflow: hidden;
    }

    .personal-image {
        margin-top: 20px;
    }

    .personal-search-results-img, .personal-search-results-details {
        position: relative;
    }

    .personal-search-results-experience-details {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .personal-name {
        margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .personal-color {
        color: #000;
    }

    .personal-data {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 12px;
    }

    .personal-buttons, .company-buttons {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .personal-buttons button, .company-buttons button {
        width: 100%;
        margin-bottom: 10px;
        border-radius: 0%;
        border-width: 1px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .personal-button-csv {
        background-color: #000;
        border-color: #000;
        color: #fff;
    }

    .personal-button-cv {
        background-color: #fff;
        border-color: #000;
        color: #000;
    }

    .personal-skillset-wrap, .personal-education-wrap, .personal-videos-wrap {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .personal-skillset-title, .personal-education-title, .personal-videos-title {
        font-size: 16px;
        line-height: 30px;
    }

    .personal-skillset-item, .personal-education-item, .personal-videos-item {
        font-size: 10px;
        font-weight: bold;
    }

    .personal-videos-item a {
        color: #000;
    }

    .personal-about-item {
        font-size: 14px;
    }

    .roles-wrap, .company-people-wrap {
        float: left;
        width: 80%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .roles-current, .roles-previous, .company-people-current, .company-people-previous, .company-bio,
    .about-wrap, .comments, .news {
        margin-bottom: 10px;
        border : solid 2px;
        border-color: #e9e9e9;
        padding: 25px;
    }

    .roles-current span, .roles-previous span, .company-people-current span, .company-people-previous span {
        font-size: 12px;
        line-height: 25px;
    }

    .company-bio-title {
        font-size: 18px;
        line-height: 30px;
    }

    .company-share-wrap {
        background-color: #D9D9D9;
        height: 200px;
        text-align: center;
    }

    .roles-previous {
        margin-top: 10px;
    }

    .roles-previous-title, .roles-current-title {
        font-size: 18px;
    }

    .comments-news {
        display: flex;
    }

    .comments, .news {
        width: 43%;
    }

    .news {
        margin-left: 3%;
    }

    /* General table styles - commented out to avoid conflicts with Quasar tables */
    /* table {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid #000;
    }

    td, th {
        text-align: left;
        padding: 8px;
        font-size: 10px;
        border-left: 1px solid #000;
    }

    th:not(:first-child) {
        border-left: 1px solid #000;
    }

    tr:nth-child(even) {
        background-color: #e9e9e9;
    }

    tr:nth-child(odd):not(:first-child) {
        background-color: #dddddd;
    }

    tr:first-child {
        background-color: none !important;
    } */

    /* Quasar table row shading - more specific selectors */
    .q-table tbody tr:nth-child(odd) {
        background-color: #e9e9e9 !important;
    }

    .q-table tbody tr:nth-child(even) {
        background-color: #dddddd !important;
    }

    .q-table tbody tr:first-child {
        background-color: #e9e9e9 !important;
    }

    /* Remove all table borders and outlines to match candidate dialog */
    .q-table td,
    .q-table th {
        border: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }

    .q-table__container {
        border: none !important;
        box-shadow: none !important;
    }

    .q-table__card {
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove all table borders and outlines */
    .q-table {
        border: none !important;
        outline: none !important;
    }

    .q-table table {
        border: none !important;
        outline: none !important;
    }

    .q-table thead {
        border: none !important;
    }

    .q-table tbody {
        border: none !important;
    }

    .q-table tr {
        border: none !important;
    }

    /* Additional specificity for Quasar tables */
    .q-table .q-table__container tbody tr:nth-child(odd) {
        background-color: #e9e9e9 !important;
    }

    .q-table .q-table__container tbody tr:nth-child(even) {
        background-color: #dddddd !important;
    }

    .q-table .q-table__container tbody tr:first-child {
        background-color: #e9e9e9 !important;
    }

    /* Force background colors with maximum specificity */
    .q-table tbody tr:nth-child(odd) td {
        background-color: #e9e9e9 !important;
    }

    .q-table tbody tr:nth-child(even) td {
        background-color: #dddddd !important;
    }

    /* Compact table styling for profile preview to match candidate dialog */
    .q-table tbody tr td {
        padding: 4px 8px !important;
        line-height: 1.2 !important;
        font-size: 13px !important;
    }

    .q-table thead tr th {
        padding: 6px 8px !important;
        line-height: 1.2 !important;
        font-size: 13px !important;
    }

    /* Reduce spacing between header and body */
    .q-table thead {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    /* Compact row height */
    .q-table tbody tr {
        height: auto !important;
        min-height: 32px !important;
    }

    /* Reduce vertical spacing in table cells */
    .q-table td, .q-table th {
        vertical-align: middle !important;
    }

    /* Additional compact styling for profile preview tables */
    .q-table {
        font-size: 13px !important;
    }

    /* Reduce spacing in dense tables */
    .q-table--dense tbody tr td {
        padding: 2px 6px !important;
    }

    .q-table--dense thead tr th {
        padding: 4px 6px !important;
    }

    /* Compact table container */
    .q-table__container {
        font-size: 13px !important;
    }

    /* Reduce card padding for tables in profile preview */
    .q-card .q-table {
        margin: 0 !important;
    }

    .q-card .q-table .q-table__container {
        padding: 0 !important;
    }

    /* Enhanced spacing for profile preview tables to match candidate dialog */
    .q-table tbody tr td {
        padding: 8px 12px !important;
        line-height: 1.4 !important;
        font-size: 13px !important;
        vertical-align: middle !important;
    }

    .q-table thead tr th {
        padding: 12px 12px 8px 12px !important;
        line-height: 1.4 !important;
        font-size: 13px !important;
        vertical-align: middle !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    }

    /* Add spacing between rows */
    .q-table tbody tr {
        height: auto !important;
        min-height: 40px !important;
        margin-bottom: 2px !important;
    }

    /* Enhanced spacing for profile preview table headers */
    .q-table thead {
        border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
        margin-bottom: 4px !important;
    }

    /* Add subtle spacing between table sections */
    .q-card .q-table {
        margin-bottom: 8px !important;
    }

    /* Enhanced table container spacing */
    .q-table__container {
        font-size: 13px !important;
        padding: 4px 0 !important;
    }

    svg {
        width: 20px !important;
    }

    .search-title, .create-project, .select-candidates, .quick-search {
        float: left;
    }

    .select-project {
        float: right;
        margin-top: -5px;
    }

    .create-project input, .create-project button {
        padding: 10px
    }

    .create-project form {
        display: flex;
    }

    .select-candidates {
        width: 60%;
        margin-left: 20%;
        text-align: center;
        margin-bottom: 25px;
        margin-top: 15px;
    }

    .select-candidates input {
        width: 90%;
        padding: 10px;
        color: #000;
        background-color: #fff;
        border: solid 1px #4A6661;
        font-size: 14px;
    }

    .select-project select {
        width: 70%;
        background-color: #fff;
        color: #000;
        padding: 10px;
        border: #fff;
    }

    .select-project button {
        width: 70%;
        background-color: #fff;
        color: #000;
        padding: 10px;
        border: #fff;
        cursor: pointer;
        text-align: left;
    }

    .select-project, .create-project {
        width: 12%;
    }

    .model-add-project {
        display: none;
    }

    .model-add-project-inner {
        padding: 50px;
        background-color: #fff;
        border: solid 1px;
    }

    .set_rank {
        background-color: #000;
        color: white;
    }

    .add-project-open {
        background-color: #000;
        color: #fff;
        position: absolute;
        display: block;
        margin: auto;
        width: 50%;
    }

    .search-filters-full {
        margin-top: 20px;
        margin-left: 3%;
        background-color: #fff;
        width: 83%;
        padding: 10px;
        height: auto;
        float: left;
        border: solid 4px #000;
    }

    .search-filters-left {
        margin-top: 20px;
        border: 1px solid #000;
        height: auto;
        float: left;
    }

    .search-results-wrap {
        display: inline-block;
    }

    .search-results-open {
        float: left;
        margin-top: 20px;
        width: 100px;
        padding: 5px;
        padding-left: 3px;
        background-color: #000;
    }

    .search-results-open button{
        cursor: pointer;
    }

    .search-results-open img{
       width: 85%;
    }

    .search-results-clear {
        width: 105px;
        text-align: end;
        margin-top: 140px;
        position: static;
    }

    .search-results-clear span, .search-results-clear button {
        color: #6C1717;
    }

    .search-filters-top-full, .search-filters-bottom-full {
        width: 50%;
        float: left;
    }

    .search-filters-top-left {
        width: 100%;
        clear: both;
        display: flex;
    }

    .search-filters-bottom-left {
        width: 100%;
        margin-top: 10px;
    }

    .search-filters-bottom-first-width {
        width: 65%;
        float: left;
    }

    .search-filters-bottom-second-width {
        width: 35%;
        float: left;
    }

    .filter-button-all {
        width: 87%;
        border: solid 3px #1D3A8A !important;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .filter-button-more-width {
        width: 94% !important;
    }

    .filter-button-max-width {
        width: 100% !important;
    }

    .filter-button {
        width: 100%;
        border-radius: 5px;
        margin-top: 5px;
    }

    .open-filter {
        width: 1px;
        display: inline-block;
        cursor: pointer;
        top: 5px;
        position: relative;
    }

    .clear-filter {
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        font-family: inter;
    }

    .results-clear-filter {
        float: right;
        margin-right: 10px;
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .hunter-index {
        margin-left: 50px;
    }

    .hunter-index button{
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .quick-search {
        text-align: center;
        width: 100%;
        padding-top: 10px;
        border-top: solid 4px #000;
        padding-bottom: 25px;
        border-bottom: solid 4px #000;
    }

    .quick-search-no-border {
        text-align: center;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 25px;
        clear: both;
    }

    .landing-new-search {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 50px;
    }

    .landing-new-search img {
        position: relative;
        top: 5px;
        width: 20px;
    }

    .landing-new-search button {
        background-color: #fff;
        padding-top: 10px;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-right: 25px;
        border-radius: 5px;
        cursor: pointer;
    }

    .select-projects {
        text-align: center;
        width: 100%;
    }

    .select-projects button {
        background-color: #fff;
        width: 55%;
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
        text-align: left;
    }

    .select-projects img {
        float: right;
        padding-right: 120px;
    }

    .quick-search span, .quick-search-no-border span {
        font-size: 14px;
    }

    .quick-search img, .quick-search-no-border img{
        position: relative;
        top: 5px;
        width: 20px;
    }

    .quick-button {
        padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        font-family: inter;
    }

    .quick-plc {
        background-color: #823272;
        color: #fff;
    }

    .quick-plc-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-ftse250 {
        background-color: #67709E;
        color: #fff;
    }

    .quick-ftse250-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-plcremco {
        background-color: #783E3E;
        color: #fff;
    }

    .quick-plcremco-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-account {
        background-color: #3C4250;
        color: #fff;
    }

    .quick-account-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-auditchair {
        background-color: #755B7E;
        color: #fff;
    }

    .quick-auditchair-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-remcochair {
        background-color: #525059;
        color: #fff;
    }

    .quick-remcochair-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-chair {
        background-color: #576247;
        color: #fff;
    }

    .quick-chair-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-ned {
        background-color: #2A2626;
        color: #fff;
    }

    .quick-ned-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-female {
        background-color: #58373E;
        color: #fff;
    }

    .quick-female-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .quick-ethnic {
        background-color: #857B4B;
        color: #fff;
    }

    .quick-ethnic-selected {
        border-color: #af2424;
        background-color: #fff;
        color: #af2424;
    }

    .clear-quick-search {
        padding-left: 10px;
        padding-right: 10px;
        background-color: #fff;
        border-radius: 5px;
        cursor: pointer;
        font-family: inter;
    }

    .selected-button {
        background-color: #62626c !important;
        color: #fff !important;
        box-shadow: inset 0px 2px 2px 0px #3b3b3b;
    }

    .personal-filters-full, .professional-filters-full {
        float: left;
        width: 50%;
        background-color: #fff;
    }

    .personal-filters-left, .professional-filters-left {
        width: 50%;
        background-color: #fff;
    }

    .personal-filters {
        margin-right: 2px;
    }

    .professional-filters {
        margin-left: 2px;
    }

    .gender-filter, .age-filter, .languages-filter, .residence-filter, .qualification-filter, .chairman-filter, .role-filter
    , .sector-filter, .video-filter, .opento-filter, .plc-filter, .indices-filter, .diversity-filter {
        background-color: #fff;
        padding: 10px;
    }

    .gender-filter button, .age-filter button, .languages-filter button, .residence-filter button, .qualification-filter button, .chairman-filter button,
    .role-filter button, .sector-filter button, .video-filter button, .opento-filter button, .plc-filter button, .indices-filter button, .diversity-filter button {
        color: #1D3A8A;
        background-color: #fff;
        border: solid 1px #1D3A8A;
        padding: 10px;
        cursor: pointer;
    }

    .gender-filter-items, .age-filter-items, .languages-filter-items, .residence-filter-items, .chairman-filter-items, .role-filter-items
    , .sector-filter-items, .video-filter-items, .opento-filter-items, .qualification-filter-items, .plc-filter-items, .indices-filter-items, .diversity-filter-items {
        padding: 15px;
        border: solid 1px #000;
    }

    .sector-filter-items {
        overflow: auto;
    }

    .sector-buttons-row {
        overflow: auto;
    }

    .sector-filter-items button {
        width: 48%;
        float: left;
        margin-right: 2%;
    }

    .sector option.selected, .expertise option.selected, .interests option.selected, .committee option.selected  {
        background-color: #29d;
        color: #fff;
    }

    .filter-andor-buttons {
        display: flex;
    }

    .other-details {
        width: 180px;
    }

    .filter-time-buttons, .filter-membership-buttons {
        display: flex;
    }

    .filter-time-buttons button, .filter-membership-buttons button{
        width: 49%;
    }

    .filter-input-find {
        width: 94%;
        padding: 4px;
        margin-top: 5px;
    }

    .filter-input-find-space {
        margin-bottom: 10px;
    }

    .search-results {
        margin-top: 20px;
        float: left;
    }

    .results-count {
        margin-top: 10px;
        margin-right: 30px;
        width: 100%;
        clear: both;
    }

    .results-count, .results-count span {
        float: right;
    }

    .results-count span {
        border: solid 1px #9D1414;
        color: #9D1414;
        border-radius: 5px;
        padding: 10px;
    }

    .personal-search-contact {
        margin: 10px;
        clear: both;
        float: left;
        left: 35px;
        position: relative;
    }

    .personal-search-contact a{
        padding-right: 40px;
    }

    .personal-search-rankings {
        margin: 10px;
        clear: both;
        float: right;
    }

    .personal-search-rankings button, .view-type button {
        background-color: #fff;
        border: 1px #000 groove;
        padding: 5px;
        margin: 5px;
        min-width: 30px;
        cursor: pointer;
    }

    .candidate-ranks-wrapper {
        padding: 15px;
        margin-left: 15px;
        margin-right: 15px;
        border: solid 2px #000;
        overflow: auto;
    }

    .cand-rank-title {
        padding: 3px;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 15px;
        border: solid 2px #000;
        background-color: #000;
        color: #fff;
    }

    .candidate-search-results {
        padding: 15px;
        margin: 15px;
        border: solid 2px #000;
        overflow: auto;
    }

    .personal-search-select {
        float: left;
        display: flex;
    }

    .personal-search-results {
        float: left;
    }

    .personal-search-list-results {
        width: 100%;
    }

    .personal-search-button {
        height: 22px;
        margin-right: 10px;
    }

    .role-search-results {
        width: 56%;
        float: left;
        padding: 15px;
    }

    .personal-search-results-img {
        width: 100%;
        margin-bottom: 20px;
    }

    .personal-search-results-card, .personal-search-results-details {
        width: 100%;
        float: left;
        color: #1D3A8A;
    }

    .personal-bold {
        font-weight: bold;
        font-size: 15px;
    }

    .personal-search-list-results span {
        font-size: 12px;
    }

    .personal-search-details-wrapper {
        float: left;
    }

    .personal-search-select-details, .personal-search-results-details, .personal-search-results-experience-details {
        width: 100%;
        float: left;
    }

    .personal-search-results-experience-details {
        left: 70px;
        position: relative;
        color: #1D3A8A;
    }

    .personal-search-select-details img {
        height: 10px;
    }

    .personal-list {
        width: 20%;
        display: inline-block;
        margin-left: 20px;
    }

    .personal-search-delete button {
        background-color: #fff;
        border: none;
        float: inline-end;
        cursor: pointer;
    }

    .personal-list-age {
        width: 10%;
        display: inline-block;
    }

    .role-search-results tr:first-child {
        background-color: #fff;
        border: 1px solid #000;
    }

    .role-search-results tr:nth-child(even) {
        background-color: #fff;
        border: 1px solid #000;
    }

    .role-search-results tr:nth-child(odd):not(:first-child) {
        background-color: #fff;
        border: 1px solid #000;
    }

    .view-type {
        display: flex;
        padding: 20px 20px 0 25px;
    }

    .view-type button{
        margin-right: 5px;
    }

    .view-type img, .personal-search-select img, .personal-rank-search-select img {
        height: 10px;
    }

    .view-type-list, .view-type-grid, .view-type-smart {
        margin-left: 30px;
    }

    .select-all-persons {
        margin-right: 30px;
        margin-top: 10px;
    }

    .select-all-persons label{
        padding-left: 10px;
    }

    .select-all-persons input{
        -ms-transform: scale(2); /* IE */
        -moz-transform: scale(2); /* FF */
        -webkit-transform: scale(2); /* Safari and Chrome */
        -o-transform: scale(2); /* Opera */
        transform: scale(2);
    }

    .select-all-persons input[type="checkbox"] {
        accent-color: initial;
    }

    .project-modal {
        position: fixed;
        z-index: 1;
        left: 25%;
        top: 25%;
        width: 50%;
        overflow: auto;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0,0.4);
        box-shadow: 2px 2px 15px 2px;
    }

    .project-modal-content {
        background-color: #fff;
        padding: 30px;
        border: 1px solid #000;
        width: auto;
    }

    .project-modal-content h4 {
        text-align: center;
    }

    .project-modal-content form {
        text-align: end;
        margin-right: 15%;
    }

    .project-modal-content label {
        font-weight: bold;
        text-align: center;
    }

    .project-modal-content input {
        width: 600px;
        padding: 5px;
    }

    .project-modal-content button {
        background-color: #fff;
        color: #000;
        border: solid 1px #000;
        width: 130px;
        text-align: center;
        border-radius: 5%;
    }

    .option-disable {
        color: #4A6661;
    }

    .candidate-rank-results {
        display: flex;
        border-bottom: solid 1px #000;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .personal-rank-search-select {
        width: 10%;
        float: left;
        display: flex;
    }

    .personal-rank-search-list-results {
        width: 100%;
    }

    .personal-rank-search-list-results span {
        font-size: 12px;
    }

    .personal-rank-list {
        width: 25%;
        display: inline-block;
        margin-left: 20px;
    }

    .personal-rank-list-age {
        width: 10%;
        display: inline-block;
    }

    /* The Close Button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .application-wrapper {
        margin: 0 auto;
        background-color: #FFFEFA;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .application-title, .application-footer, .application-submit, .landing-title {
        text-align: center;
    }

    .button-wrapper {
        text-align: center;
        margin-top: 20px;
    }

    .application-submit {
        white-space: nowrap;
        width: 100%;
        padding: 10px;
    }

    .application-wrapper button {
        color: #000;
        width:fit-content;
        background-color: #E8E8E8;
        border-radius: 5px;
        text-align: center;
    }

    .application-wrapper select{
        width: 86%;
        padding: 5px;
        background-color: #fff;
    }

    .application-wrapper h2 {
        font-size: 20px;
    }

    .application-wrapper label {
        font-size: 16px;
    }

    .application-wrapper form {
        margin-top: 20px;
    }

    /* Reset checkbox and radio button colors to default in application forms */
    .application-wrapper input[type="checkbox"],
    .application-wrapper input[type="radio"] {
        accent-color: initial;
    }

    .text-caption{
        font-size: 13px;
       margin-bottom: 10px;
       display: inline-block;
    }

    /* Modernised application form layout */
    .application-shell {
        background: #fffefa;
        padding: clamp(24px, 5vw, 64px) 16px clamp(48px, 8vw, 96px);
    }

    .application-brand {
        text-align: center;
        margin-bottom: clamp(24px, 4vw, 48px);
    }

    .application-brand--footer {
        margin-top: clamp(24px, 6vw, 72px);
    }

    .application-brand .application-logo {
        max-width: 400px;
        width: 90%;
        height: auto;
    }

    .application-wrapper--modern {
        width: min(100%, 960px);
        margin: 0 auto;
        padding: 0;
        background: transparent;
    }

    .application-wrapper--modern button {
        background: none;
        width: auto;
        border-radius: 0;
    }

    .application-wrapper--modern .form-card {
        background: #ffffff;
        border-radius: 24px;
        padding: clamp(24px, 5vw, 56px);
        box-shadow: 0 35px 80px rgba(15, 23, 42, 0.12);
        border: 1px solid rgba(226, 232, 240, 0.6);
    }

    .application-wrapper--modern .form-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    .form-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 1rem;
        color: #9D1414;
        font-weight: 600;
        margin: 0;
    }

    .application-wrapper--modern .form-title {
        font-size: clamp(1.5rem, 3vw, 1.6rem);
        font-weight: 600;
        color: #0f172a;
        margin: 0;
    }

    .application-wrapper--modern .form-title {
        line-height: 2rem !important;
    }

    .application-wrapper--modern .form-subtitle {
        font-size: 1rem;
        color: #475569;
        margin: 0;
    }

    .form-progress {
        list-style: none;
        padding: 0;
        margin: 24px 0 0;
        display: grid;
        gap: 12px;
        grid-template-columns: 1fr; /* default: single column */
    }

    @media (min-width: 720px) { /* 4 × 180px */
        .form-progress {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .form-progress li {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 12px 16px;
        border-radius: 999px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        font-weight: 600;
        color: #475569;
    }

    .form-progress li.is-active {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

    .form-progress .step-index {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        flex: 0 0 auto;
        background: rgba(15, 23, 42, 0.08);
    }

    .form-progress li.is-active .step-index {
        background: rgba(255, 255, 255, 0.2);
    }

    .progress-content {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 5px 0;
    }

    .step-label {
        font-weight: 600;
        color: inherit;
    }

    .step-caption {
        font-size: 0.8rem;
        color: #94a3b8;
        font-weight: 500;
    }

    .application-wrapper--modern .form-intro {
        margin: 0;
        color: #475569;
        font-size: 0.95rem;
    }

    .application-wrapper--modern .form-helper {
        color: #64748b;
        margin-top: 12px;
    }

    .application-wrapper--modern .form-helper a {
        color: inherit;
        text-decoration: underline;
    }

    .form-section {
        padding-bottom: 32px;
    }

    .form-section:first-of-type {
        border-top: none;
        padding-top: 0;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-label {
        display: block;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .form-check {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .form-check-input {
        width: 16px;
        height: 16px;
        margin: 0;
        margin-right: 8px;
        cursor: pointer;
    }

    .form-check-label {
        font-size: 0.9rem;
        color: #222;
        cursor: pointer;
    }

    .form-hint {
        margin-bottom: 10px;
    }

    .section-heading {
        font-size: 1.25rem;
        margin-bottom: 20px;
        color: #0f172a;
        font-weight: 600;
    }

    .field-grid {
        display: grid;
        gap: 24px;
    }

    .field-grid--two {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .field-grid--three {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .form-field {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .form-field--full {
        grid-column: 1 / -1;
    }

    .field-optional {
        font-weight: 400;
        color: #94a3b8;
    }

    .field-helper,
    .application-wrapper--modern .grey-text {
        color: #64748b;
        font-size: 0.95rem;
        margin: 0;
    }

    .field-helper-inline {
        font-weight: 400;
        color: #64748b;
    }

    .field-helper--indented {
        display: block;
        margin-left: 24px;
    }

    .field-helper--block {
        display: block;
        margin-top: 8px;
    }

    .application-wrapper--modern .text-input,
    .application-wrapper--modern .comp-lookup,
    .application-wrapper--modern select,
    .application-wrapper--modern textarea,
    .application-wrapper--modern .form-control,
    .application-wrapper--modern .uploadFile {
        width: 100%;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid #dbe2ef;
        background: #fff;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        font-size: 1rem;
    }

    .application-wrapper--modern .text-input:focus,
    .application-wrapper--modern .comp-lookup:focus,
    .application-wrapper--modern select:focus,
    .application-wrapper--modern textarea:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .application-wrapper--modern .text-input.alert-danger-field,
    .application-wrapper--modern select.alert-danger-field {
        border-color: #b91c1c;
        box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12);
    }

    .form-choice {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 16px;
    }

    .form-choice input[type="checkbox"],
    .form-choice input[type="radio"] {
        margin-top: 4px;
    }

    .form-choice label span {
        display: block;
        color: #0f172a;
    }

    .dynamic-collection {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .dynamic-item {
        position: relative;
        padding: 24px 20px 20px;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    .dynamic-item .link-button--nolabel {
        position: absolute;
        top: 50%;
        right: 40px;
        transform: translate(0%, -50%);
        display: none;
    }

    .dynamic-item .link-button--danger {
        position: absolute;
        top: 16px;
        right: 16px;
        display: none;
    }

    .link-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        background: none;
        border: none;
        font-weight: 600;
        color: #1f2937;
        cursor: pointer;
    }

    .link-button--inline {
        margin-top: 12px;
        padding-bottom: 12px;
    }

    .link-button--danger {
        color: #b91c1c;
    }

    .link-button:hover {
        color: #0f172a;
    }

    .link-button--danger:hover {
        color: #991b1b;
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 28px;
        border-radius: 999px;
        font-weight: 600;
        border: none;
        cursor: pointer;
    }

    .button--primary {
        height: 51px !important;
        border-radius: 10px !important;
        border: 1.5px solid #62626C !important;
        background: rgba(98, 98, 108, 0.13) !important;
        cursor: pointer !important;
        font-size: 18px !important;
    }

    .button--primary:hover {
        box-shadow: 0 14px 24px rgba(15, 23, 42, 0.2);
        background-color: #62626c !important;
        color: #fff;
    }

    .button--secondary {
        background: #e2e8f0;
        color: #0f172a;
        padding: 10px 20px;
    }

    .button--secondary .las {
        margin-left: 8px;
    }

    .form-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 32px;
    }

    .file-upload {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .file-input-hidden {
        display: none;
    }

    .uploadFile {
        background: #f8fafc;
        border: 1px dashed #cbd5f5;
        padding: 10px 14px;
        border-radius: 14px;
        color: #475569;
    }

    .option-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .option-stack--indented {
        margin-left: 24px;
    }

    .dropdown-wrapper {
        position: relative;
        margin-bottom: 16px;
    }

    .chips-input {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 48px;
        align-items: center;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid #dbe2ef;
        cursor: pointer;
        background: #fff;
    }

    .chips-input:focus-within {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .chips-trigger {
        border: none;
        background: transparent;
        outline: none;
        min-width: 140px;
        color: #475569;
        font-size: 0.95rem;
    }

    .chips-input .chip {
        background: #3f3f3f;
        color: #fff;
        padding: 6px 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .chips-input .remove-chip {
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
    }

    .dropdown-list {
        width: 100%;
        max-height: 220px;
        overflow-y: auto;
        border-radius: 12px;
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
        border: 1px solid #e2e8f0;
        background: #fff;
        padding: 8px 0;
        z-index: 20;
    }

    .dropdown-option {
        padding: 10px 16px;
        cursor: pointer;
    }

    .dropdown-option.selected,
    .dropdown-option:hover {
        background: rgba(37, 99, 235, 0.12);
    }

    .application-wrapper--modern .button-wrapper,
    .application-wrapper--modern .application-submit,
    .application-wrapper--modern .application-title,
    .application-wrapper--modern .application-steps {
        display: none;
    }

    @media (max-width: 1650px) {
        .form-progress {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 720px) {
        .form-progress {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    @media (max-width: 720px) {
        .form-actions {
            justify-content: stretch;
        }

        .form-actions .button {
            width: 100%;
            border-radius: 50%;
        }

        .dynamic-item {
            padding: 16px;
        }
    }

    .thanks-message {
        text-align: center;
        margin-top: 70px;
        margin-bottom: 40px;
        font-weight: bold;
    }

    .location-additional {
        width: 180px;
        cursor: pointer;
    }

    .nationality-additional {
        cursor: pointer;
    }

    .location {
        margin-bottom: 10px;
    }

    .step-highlighted {
        color: #9D1414;
        font-weight: bold;
    }

    .grey-text, .application-form input::placeholder {
        color: #7F7F7F;
    }

    .text-input {
        width: 85%;
        padding: 5px;
    }

    .previous-page {
        color: #000;
        padding: 20px;
    }

    .previous-page {
        border: solid 1px #000 !important;
        cursor: pointer;
        background-color: #E8E8E8;
        border-radius: 5px;
    }

    .applicant-new a{
        color: #857B4B;
    }

    .applicant-denied a{
        color: #6C1717;
    }

    .applicant-accepted a{
        color: #000;
    }

    .applicant-header {
        font-weight: bold;
    }

    .comp-lookup, .sector-lookup {
        width: 85%;
    }

    .candidate-rank-show-1, .candidate-rank-show-2, .candidate-rank-show-3, .candidate-rank-show-4, .candidate-rank-show-5, .candidate-rank-show-6 {
        display: none;
    }

    .cand-open-ranks button{
        float: right;
        background-color: #fff;
        border: none;
        cursor: pointer;
    }

    .and-symbol {
        /* color: #1D3A8A; */
        color: #000;
    }

    .andor-symbol {
        padding-right: 2%;
    }

    .search-bar-results {
        position: absolute;
        background-color: #fff;
        border: 1px solid;
        width: 60%;
        display: flex;
        z-index: 1;
    }

    .search-bar-person, .search-bar-company {
        width: 50%;
    }

    .services {
        padding: 10px;
    }

    .has-capacity {
        padding-left: 20px;
    }

    /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 16px;
    }

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 15px;
        left: 2px;
        bottom: 0px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        /* background-color: #1D3A8A; */
        background-color: #ccc;
    }

    input:focus + .slider {
        /* box-shadow: 0 0 1px #1D3A8A; */
        box-shadow: 0 0 1px #ccc;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    /* Company Website Button Styling */
    .company-website-btn {
        background-color: #3F5752 !important;
        color: white !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
        height: 40px !important;
        border: 2px solid #3F5752 !important;
        box-shadow: none !important;
    }

    .company-website-btn:hover {
        background-color: #2d403b !important;
    }

    /* Company Info Card Styling - Override all other styles */
    .search-partner-template .company-info-card {
        background-color: white !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border: 1px solid #e0e0e0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .search-partner-template .company-info-card .q-card__section {
        background-color: white !important;
        padding: 24px !important;
        width: 100%;
    }

    /* Company Bio Card Styling - Override all other styles */
    .search-partner-template .company-bio-card {
        background-color: white !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        border: 1px solid #e0e0e0 !important;
        height: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .search-partner-template .company-bio-card .q-card__section {
        background-color: white !important;
        padding: 24px !important;
    }

    /* Override any Quasar card styles that might be hiding the cards */
    .search-partner-template .q-card {
        background-color: white !important;
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Consultants Table Styling - Override all other table styles */
    .search-partner-template .consultants-table .q-table {
        background-color: white !important;
        border-radius: 0 !important;
        border: 1px solid #e0e0e0 !important;
    }

    .search-partner-template .consultants-table .q-table .q-table__container {
        border: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .search-partner-template .consultants-table .q-table table {
        border-collapse: collapse !important;
        width: 100% !important;
        border: 1px solid #e0e0e0 !important;
    }

    .search-partner-template .consultants-table .q-table th {
        background-color: #f8f9fa !important;
        border: 1px solid #e0e0e0 !important;
        font-weight: 600 !important;
        color: #000 !important;
        padding: 12px 16px !important;
        text-align: left !important;
    }

    .search-partner-template .consultants-table .q-table td {
        padding: 12px 16px !important;
        border: 1px solid #e0e0e0 !important;
        background-color: white !important;
        text-align: left !important;
        vertical-align: top !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr:nth-child(odd) {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr:nth-child(even) {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr:hover {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr:nth-child(odd) td {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr:nth-child(even) td {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .q-table tbody tr:first-child td {
        background-color: white !important;
    }

    .search-partner-template .consultants-table .bio-content {
        max-width: none !important;
        width: 100% !important;
    }

    .search-partner-template .consultants-table .bio-text {
        line-height: 1.5 !important;
        color: #333 !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }

    .search-partner-template .consultants-table .bio-text-wrapper {
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
        color: #333 !important;
        font-size: 13px !important;
        white-space: normal !important;
    }

    .search-partner-template .consultant-card-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .search-partner-template .consultant-card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .search-partner-template .consultant-card__content {
        flex-wrap: wrap;
    }

    .search-partner-template .consultant-meta {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .search-partner-template .consultant-name {
        font-size: 1.05rem;
        text-decoration: underline;
    }

    .search-partner-template .consultant-role {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .search-partner-template .consultant-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ececec;
    }

    .search-partner-template .consultant-avatar__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .search-partner-template .consultant-avatar__placeholder {
        width: 100%;
        height: 100%;
    }

    .search-partner-template .consultant-bio .bio-text-wrapper {
        line-height: 1.5 !important;
        font-size: 0.95rem;
        color: #333 !important;
    }

    @media (max-width: 767px) {
        .search-partner-template .consultant-card__content {
            row-gap: 16px;
        }
    }

    /* Ensure bio column has proper width and wrapping */
    .search-partner-template .consultants-table .q-table td:last-child {
        text-align: left !important;
        line-height: 1.4 !important;
        width: 25% !important;
        min-width: 150px !important;
        max-width: 200px !important;
    }

    /* Mobile responsive bio column */
    @media (max-width: 768px) {
        .search-partner-template .consultants-table .q-table td:last-child {
            width: 30% !important;
            min-width: 120px !important;
            max-width: 150px !important;
        }
    }

    .picture {
        background-color: transparent;
        color: #000;
        padding: 10px;
        padding-left: 20px;
        border: 1px solid #000;
        display: flex;
        width: 130px;
        cursor: pointer;
    }

    .picture img {
        margin-left: 10px;
        margin-top: -3px;
    }

    .uploadFile {
        text-align: left;
        border: none;
        background-color: white;
        color: black;
    }

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .personal-details {
            width:100%;
        }

        .application-steps {
            width:100%;
        }

        .search-filters-left {
            width: 100%;
            padding: 1px;
        }

        .cand-rank-title {
            width: 25%;
        }

        .personal-search-select {
            width: 50%;
        }

        .quick-search span {
            width: 100%;
            display: inline-block;
            margin-bottom: 20px;
        }

        .clear-quick-search {
            margin-top: 20px;
            width: 95%;
            padding: 10px;
        }

        .search-filters-top-full, .search-filters-bottom-full, .search-filters-bottom-first-width, .search-filters-bottom-second-width {
            width: 100%;
        }

        .search-filters-full {
            margin-left: 0%;
            width: 98%;
            padding: 0;
        }

        .search-results {
            width: 100%;
        }

        .role-search-results {
            width: 100%;
            padding: 0px;
        }

        .personal-search-details-wrapper {
            width: 100%;
        }

        .personal-search-results {
            width: 100%;
        }

        .personal-search-results-img, .personal-search-results-details {
            left: 5px;
        }

        .personal-search-results-experience-details {
            left: 10px;
        }
    }

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
        .personal-details {
            width:100%;
        }

        .application-steps {
            width:100%;
        }

        .filter-time-buttons button, .filter-membership-buttons button {
            font-size: 10px;
            padding: 1px;
        }

        .application-wrapper {
            width: 90%;
            padding-left: 10px;
        }

        .search-filters-left {
            width: 100%;
            padding: 1px;
            margin-left: 0px;
        }

        .cand-rank-title {
            width: 25%;
        }

        .personal-search-select {
            width: 50%;
        }

        .quick-search span {
            width: 100%;
            display: inline-block;
            margin-bottom: 20px;
        }

        .clear-quick-search {
            margin-top: 20px;
            width: 95%;
            padding: 10px;
        }

        .search-results {
            width: 100%;
        }

        .role-search-results {
            width: 100%;
            padding: 0px;
        }

        .personal-search-details-wrapper {
            width: 100%;
        }

        .personal-search-results {
            width: 100%;
        }

        .personal-search-results-experience-details {
            left: 5px;
        }

        .personal-search-results-img, .personal-search-results-details {
            left: 10px;
        }
    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
        .personal-details {
            width:20%;
        }

        .application-steps {
            width:50%;
        }

        .filter-time-buttons button, .filter-membership-buttons button {
            font-size: 10px;
            padding: 1px;
        }

        .application-wrapper {
            width: 90%;
            padding-left: 10px;
        }

        .search-filters-left {
            width: 34%;
        }

        .search-results {
            border-top: solid 1px #000;
            margin-top: 20px;
            width: 62%;
            margin-right: 3%;
        }

        .cand-rank-title {
            width: 25%;
        }

        .personal-search-select {
            width: 17%;
        }

        .quick-search span {
            display: inline-block;
            width: 100%;
        }

        .clear-quick-search {
            margin-top: 20px;
            width: 95%;
            padding: 6px;
        }

        .role-search-results {
            width: 93%;
            float: left;
            padding: 15px;
        }

        .personal-search-details-wrapper {
            width: 100%;
        }

        .personal-search-results {
            width: 80%;
        }

        .personal-search-results-experience-details {
            left: 70px;
        }

        .personal-search-results-img, .personal-search-results-details {
            left: 5%;
        }

        .personal-search-contact {
            top: 45px;
        }
    }

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
        .personal-details {
            width:20%;
        }

        .filter-time-buttons button, .filter-membership-buttons button {
            font-size: 10px;
            padding: 1px;
        }

        .application-wrapper {
            width: 70%;
            padding-left: 20px;
        }

        .search-filters-left {
            width: 29%;
        }

        .search-results {
            border-top: solid 1px #000;
            margin-top: 20px;
            width: 63%;
            margin-right: 3%;
        }

        .cand-rank-title {
            width: 8%;
        }

        .personal-search-select {
            width: 17%;
        }

        .quick-search span {
            display: initial;
        }

        .clear-quick-search {
            width: 7%;
        }

        .role-search-results {
            width: 56%;
            float: left;
            padding: 15px;
        }

        .personal-search-details-wrapper {
            width: 39%;
        }

        .personal-search-results {
            width: 22%;
        }

        .personal-search-results-experience-details {
            left: 70px;
        }

        .personal-search-results-img, .personal-search-results-details {
            left: 5%;
        }

        .personal-search-contact {
            top: 45px;
        }
    }

    @media only screen and (min-width: 1300px) {
        .and-symbol {
            padding-left: 5px;
            padding-right: 5px;
        }

        .filter-time-buttons button, .filter-membership-buttons button {
            font-size: 12px;
        }

        .filter-input-find {
            width: 95% !important;
        }
    }