:root {
        --primary-color: #5025d1;
        --primary-light-color: #EFF2F8;
        --font-poppins: 'Poppins', sans-serif;

        --dark-color-1: #2f1c6a;
    }

    /* custom styles */
    .light-bg {
        background-color: var(--primary-light-color);
        padding: 90px 0;
    }

  html, body, h1, h2, h3, h4, h5, h6,
    p, span, a, li, small, strong, label,
    input, button, textarea {
      font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }


    .font-poppins {
        font-family: 'Poppins', sans-serif !important;
    }

    .font-noto {
        font-family: "Noto Serif JP", serif;
    }

    /* Style for the outer scroll container */
    .scroll-container {
        width: 928px;
        height: 80vh;
        min-height: 800px;
        overflow: auto;
        border: 3px solid #ddd;
        background-color: #f9f9f9;
        border-radius: 10px;
        position: relative;
    }

    /* Style for the resume content (two pages side by side) */
    /* .resume-container {
        width: 1800px;
        margin: 20px 25px;
        cursor: grab;
        position: absolute;
    }  */

    /* Fixed page width and height for each page */
    .fixed-page {
        width: 900px;
        background-color: white;
        padding: 20px;
    }

    /* Custom styling for table content */
    .table-bordered th,
    .table-bordered td {
        padding: 10px;
        vertical-align: middle;
    }

    .photo {
        text-align: center;
        background-color: #e0e0e0;
        color: #666;
        font-style: italic;
        height: 40px;
        line-height: 150px;
    }

    /* Date column */
    .date {
        text-align: center;
    }

    @media print {
        body {
            margin: 0;
            padding: 0;
            font-size: 12pt;
            /* Adjust font size for print */
        }

        /* Hide all other elements except the scroll container */
        header,
        footer,
        .scroll-container {
            display: none;
        }

        .scroll-container {
            display: block;
            /* Ensure the scroll container is displayed */
            width: auto;
            /* Use full width */
            height: auto;
            /* Use auto height for print */
            border: none;
            /* Remove border */
        }

        .resume-container {
            width: 100%;

            margin: 0;

        }

        .fixed-page {
            margin: 0;
            /* Remove margin */
            padding: 20px;
            /* Maintain padding */
            border: 1px solid #ddd;
            /* Optional: Add border for pages */
        }
    }



    /* ////////////////////// */
    * {
        margin: 0;
        padding: 0;
        text-indent: 0;
    }

    .s1 {
        color: black;
        font-family: "Noto Serif JP", serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        font-size: 15px;
    }

    .s2 {
        color: black;
        font-family: "Noto Serif JP", serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        font-size: 13px;
    }

    .s3 {
        color: black;
        font-family: "Noto Serif JP", serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        font-size: 10px;
    }

    .s4 {
        color: black;
        font-family: "Noto Serif JP", serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        font-size: 10px;
    }

    .s5 {
        color: black;
        font-family: "Noto Serif JP", serif;
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        font-size: 6pt;
    }

    .td-title-common {
        padding-top: 9pt;
    }


    p {
        color: black;
        /* font-family: "Noto Serif JP", serif; */
        font-style: normal;
        font-weight: normal;
        text-decoration: none;
        /* font-size: 13px; */
        margin: 0pt;
    }

    table,
    tbody {
        vertical-align: top;
        overflow: visible;
        font-size: 13px;
        border-collapse: collapse;
        width: 100%;
    }

    td {
        border-color: #000;
    }

    .answer-value {
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        padding: 3px;
    }

    .main-name {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 63pt;
        border-bottom: none;
        border-top: 0;
        border-left: 1px solid;
    }


    /* resume title  */
    #resume_title {
        max-width: 928px;
        margin: 0px auto;
    }

    .answer-input-field {
        width: 100%;
        height: 100%;
        padding: 10px;
        font-size: 15px;

        font-weight: 500;
        border: none;
        outline: none;
        padding-left: 2px;
        padding-right: 0;
    }

    .answer-field-textarea {
        box-sizing: border-box;
        padding: 28px 10px;
        height: 57pt;
        width: 100%;
        resize: none;
        /* height: 100%; */
        border: none;
        outline: none;
    }

    .answer-field-textarea-address1 {
        box-sizing: border-box;
        padding: 0px 8px;
        height: 36pt;
        /* Set a fixed height */
        width: 100%;
        resize: none;
        /* Disable resizing */
        border: none;
        outline: none;
        overflow: hidden;
        /* Hide scrollbars */
        font-size: 15px;
    }

    .answer-field-textarea-prefrence {
        box-sizing: border-box;
        padding: 0px 8px;
        width: 100%;
        resize: none;
        /* Disable resizing */
        border: none;
        outline: none;
        overflow: hidden;
        /* Hide scrollbars */
        font-size: 15px;
    }

    .info-button-container {
        position: relative;
    }

    .info-btn {
        position: absolute;
        font-family: "Poppins", sans-serif;
        text-transform: uppercase;

        right: 0px;
        height: 20px;
        top: 0px;
        border: none;
        /* background: none; */
        font-size: 16px;
        outline: none;
        height: 25px;
        padding: 2px 4px;
        border-radius: 0;

    }

    .header-date p {
        padding-top: 1pt;
        padding-left: 7pt;
        text-indent: 0pt;
        text-align: left;
        position: absolute;
        right: 0px;
        bottom: 0px;

    }

    .resume-header .header-date {
        border-color: grey;
        border-radius: 5px;
        padding: 3px;
        margin: 5px;

    }

    /* /for gokkaou listing */
    .td-w-45 {
        width: 90px;
        /* border-top-style: solid;
        border-top-width: 1pt;
        border-left-style: solid;
        border-left-width: 1pt;
        border-bottom-style: solid;
        border-bottom-width: 1pt;
        border-right-style: dotted;
        border-right-width: 1pt; */
        border: 1px solid black;
    }

    .td-w-548 {
        width: 697px;
        border-top-style: solid;
        border-top-width: 1px;
        border-left-style: dotted;
        border-left-width: 1px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-right-style: solid;
        border-right-width: 1px;
    }

    .tr-title-same-header {
        height: 38px;
    }

    .rirek-profile-image {
        position: absolute;
        width: 160px;
        /* height: 219px; */
        left: 32px;
        bottom: 20px;

    }

    .rirek-profile-image div {
        position: relative;
    }

    .rirek-profile-image div label {
        position: absolute;
        bottom: 10px;
        left: 5px;
        background: var(--primary-light-color);
        color: #000;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 15px;
    }

    .rirek-profile-image div img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .feature-btn {
        height: 28px;
        width: 23px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
        padding: 10px 20px;
        color: #fff;
    }

    .btn:focus {
        outline: none;
        box-shadow: none;
        /* This removes the glow effect */
    }

    .form-control:focus {
        outline: none;
        box-shadow: none;
        /* This removes the glow effect */
    }


    /* /////////////////////////////echekcbox desing */
    .custom-checkbox-form-group {
        position: absolute;
        right: 8px;
        text-transform: uppercase;
        top: 8px;
        font-weight: bold;
    }

    .custom-checkbox-form-group input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    .custom-checkbox-form-groupp label {
        position: relative;
        cursor: pointer;
    }

    .custom-checkbox-form-group label:before {
        content: '';
        -webkit-appearance: none;
        background-color: transparent;
        border: 2px solid var(--primary-color);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 10px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 5px;
    }

    .custom-checkbox-form-group input:checked+label:after {
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        left: 9px;
        width: 6px;
        height: 14px;
        border: solid var(--primary-color);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* /////////////////////////////echekcbox desing */
    /* /////////////////////////////checkbox_women checkbox_man desing */
    #checkbox_women,
    #checkbox_man {
        display: none;
    }

    .td-title-men-women label {
        cursor: pointer;
    }

    .td-title-men-women label.active {
        border: 1px solid black;
        width: 30px;
        height: 27px;
        border-radius: 50%;
        padding: 2px 7px;
    }

    /* /////////////////////////////checkbox_women checkbox_man desing */


    /* year select for all the education and work and skils */
    .work-edu-year-month {
        border: none;
        outline: none;
        box-shadow: none;
        /* Remove the box shadow */
        width: 55pt;
        margin-top: 5px;
    }

    .work-edu-year-month:focus {
        border: none;
        /* Remove border on focus */
        outline: none;
        /* Remove outline on focus */
        box-shadow: none;
        /* Remove shadow on focus */
    }

    /* Hide scrollbar in Webkit browsers (Chrome, Safari) */
    .work-edu-year-month::-webkit-scrollbar {
        display: none;
    }

    /* For Internet Explorer, Edge */
    .work-edu-year-month {
        -ms-overflow-style: none;
    }

    input:focus,
    select:focus {

        outline: none;
        box-shadow: none;
    }

    .spouse-input,
    .commuting-time {
        width: 120px;
        text-align: center;
    }

    /* year select for all the education and work and skils */
    /* style for spouse  section  */
    .spouse_presence-absence-container label,
    .spouse_support_presence-absence-container label {
        cursor: pointer;
    }

    .spouse_presence-absence-container label.active,
    .spouse_support_presence-absence-container label.active {
        width: 30px;
        height: 30px;
        border: 1px solid black;
        border-radius: 50%;
        padding-top: 4px;
    }

    /* style for spouse  section  */

    /* style for search  section  */
    .search-btn {
        color: #fff;
    }





    .selectpicker option {
        border: none;
        background-color: white;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        color: #14B1B2;
        font-weight: bold;
        font-size: 30px;
        margin: 0;
        padding-left: 0;
        margin-top: -20px;
        background: none;
    }

    .selectpicker {
        border: none;
        background-color: white;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        color: #14B1B2;
        font-weight: bold;
        font-size: 30px;
        margin: 0;
        padding-left: 0;
        margin-top: -20px;
        background: none;
    }

    #dropdownItems {
        max-height: 200px;
        /* Set the maximum height */
        overflow-y: auto;
        /* Enable vertical scrolling */
        overflow-x: hidden;
        /* Hide horizontal overflow */
    }

    .country-dropdown-button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .country-dropdown-items {
        width: 100%;
    }

    /* style for search  section  */

    /* style for Help Button and section */
    .help-btn {
        font-weight: 500;
        color: #fff;
        height: 27px;
        /* width: 61px; */
        font-size: 15px;
        padding-top: 2px;
    }

    .help-bt:hover {
        color: #fff;
    }

    /* Custom CSS for horizontal scrolling */
    .scrollable-tabs {
        overflow-x: auto;
        /* Enable horizontal scrolling */
        white-space: nowrap;
        /* Prevent line breaks */
    }

    .scrollable-tabs .nav {
        flex-wrap: nowrap;
        /* Prevent wrapping of tabs */
    }

    .scrollable-tabs .nav-link {
        margin-right: 10px;
        /* Optional spacing between tabs */
    }

    /* Optional: Hide scrollbars on certain browsers */
    .scrollable-tabs::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar on WebKit browsers */
    }




    .academic-table-example {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .academic-table-example th,
    .academic-table-example td {
        border: 1px solid #000;
        padding: 8px 12px;
        text-align: center;
    }

    .academic-table-example th {
        background-color: #f4f4f4;
    }

    .academic-table-example td {
        text-align: left;
    }

    .academic-table-example td:first-child,
    .academic-table-example td:nth-child(2) {
        text-align: center;
    }


    .work-history-table-example {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }

    .work-history-table-example th,
    .work-history-table-example td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .work-history-table-example th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    .work-history-table-example td {
        padding: 12px;
    }

    .work-history-table-example td[colspan="3"] {
        text-align: center;
        font-weight: bold;
    }


    table.licenses-qualifications-table-example {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background-color: #fff;
        border: 1px solid #ccc;
    }

    .licenses-qualifications-table-example thead {
        background-color: #f2f2f2;
    }

    .licenses-qualifications-table-example th,
    .licenses-qualifications-table-example td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
    }

    .licenses-qualifications-table-example th {
        font-weight: bold;
    }

    .licenses-qualifications-table-example td {
        font-size: 14px;
    }


    /* style for Help Button and section */
    /* style for  Button  */
    .btn {
        background-color: var(--primary-color) !important;
        border: 0;
    }

    .btn:hover,
    .btn:focus {
        color: #fff;
        /* Text color on hover and focus */
        outline: none;
        /* Removes the default focus outline */
    }

    .btn-black {
        color: #fff;
        background-color: black !important;
    }


    #download-pdf {
        border: 1px solid black;
        background: transparent !important;
    }

    #download-pdf:hover {
        color: black;
    }

    #download-pd i {
        font-size: 18px;
    }

    /* end for  Button */









    /* -----------------------------loading for resume creationg------------------------------- */
    /* Full-page overlay */
    #resumeLoadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        /* Semi-transparent black background */
        z-index: 9999;
        /* Ensure it's on top of everything */
        display: none;
        /* Hidden by default */
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /* Prevent scrolling */
    }

    /* Spinner */
    .resume-loader-content {
        text-align: center;
        color: white;
        font-size: 1.5rem;
    }

    .resume-loader-content p {

        display: block;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        font-family: var(--font-poppins);

    }

    .resume-spinner {
        border: 8px solid rgba(255, 255, 255, 0.3);
        /* Light border */
        border-top: 8px solid #fff;
        /* White color */
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: resume-spin 1s linear infinite;
    }

    /* Spinner animation */
    @keyframes resume-spin {
        0% {
            transform: rotate(0deg);
        }

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

    /* -----------------------------loading for resume creationg------------------------------- */
    /* Media qeurise */
    @media (max-width: 600px) {

        .academic-table-example th,
        .academic-table-example td {
            font-size: 12px;
            padding: 6px 8px;
        }
    }

    @media(max-width:1024px) {
        .scroll-container {

            min-height: 600px;

        }
    }

    /* -----------------------------view_design start------------------------------- */
    .view_header-date {
        position: relative;
        width: 670px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
    }

    .view_header-date span {
        display: block;
        width: 35px;
    }

    .view-text {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 15px;
        color: #000;
        padding: 10px 2px;
        -webkit-touch-callout: none;
        /* Disable the 'call' action on iOS */
        -webkit-user-select: none;
        /* Prevent selecting the text */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer */
        user-select: none;
    }

    .basic-info-table td {
        border: 1px solid #000;
    }

    .td-info-title {
        width: 90px;
        padding: 10px 0px;
    }

    .td-info-title p {
        font-size: 15px;
        font-family: "Noto Serif JP", serif;
    }

    .td-title-sm {
        padding: 2px 0;
        text-align: center;
    }

    .view-text-sm {
        font-size: 14px;
        padding: 2px 0px;
        text-align: center;
        word-break: break-all;
    }

    .history-year-month {
        text-align: center;
        font-size: 15px;
        padding: 6px;
        height: 35px;
        word-break: break-all;
    }

    .history-desc {
        font-size: 15px;
        padding: 6px;
        height: 35px;
        word-break: break-all;
    }

    .total-spouse-count,
    .travel_time {
        font-size: 15px;
        text-align: center;
        word-break: break-all;
    }

    .skills-request {
        font-size: 15px;
        padding: 8px;
        word-break: break-all;
    }

    .border-l-0 {
        border-left: 0 !important;
    }

    .border-t-0 {
        border-top: 0 !important;
    }

    .border-b-0 {
        border-bottom: 0 !important;
    }

    .border-r-dotted {
        border-right: 1px dotted !important;
    }

    .border-b-dotted {
        border-bottom: 1px dotted !important;
    }


    /* -----------------------------view_design start------------------------------- */