/* =========================================================
   EDUCATION TABLE
   ========================================================= */

.education-table-wrapper {
    width: 100%;
    margin-top: 25px;

    direction: rtl;

    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);

    background: rgba(255, 255, 255, 0.035);

    overflow: hidden;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   HEADER
   ========================================================= */

.education-table-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   EDUCATION TABLE HEADER TITLE
   ATTENTION ANIMATION
   ========================================================= */

.education-table-header h3 {

    margin: 0;

    font-size: 12px;

    font-weight: 600;

    color: #fff;

    animation:
        educationTitleAttention 2.8s ease-in-out infinite;

    transform-origin: center;

}


/* =========================================================
   ATTENTION KEYFRAMES
   ========================================================= */

@keyframes educationTitleAttention {

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

    70% {
        transform: scale(1.06);
        opacity: 1;
    }

    75% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(1.06);
        opacity: 1;
    }

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

}


/* =========================================================
   ADD BUTTON
   ========================================================= */

.education-add-btn {

    border: none;

    border-radius: 999px;

    padding: 10px 18px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    background: #bfd730;

    color: #111;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.education-add-btn:not(:disabled):hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px rgba(191, 215, 48, 0.25);
}


.education-add-btn:disabled {

    opacity: 0.35;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   TABLE SCROLL
   Persian Red Scrollbar
   ========================================================= */

.education-table-scroll {

    width: 100%;

    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color: #a21c43 #ffffff;

}


/* =========================================================
   CHROME / EDGE / OPERA
   ========================================================= */

.education-table-scroll::-webkit-scrollbar {

    height: 8px;

}

.education-table-scroll::-webkit-scrollbar-track {

    background: #ffffff;

    border-radius: 999px;

}

.education-table-scroll::-webkit-scrollbar-thumb {

    background: #a21c43;

    border-radius: 999px;

    border: 2px solid #ffffff;

}

.education-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #8c1739;

}


/* =========================================================
   TABLE
   ========================================================= */

.education-table {

    width: 100%;

    min-width: 1250px;

    border-collapse: collapse;

    direction: rtl;
}


.education-table th {

    padding: 13px 12px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    color: #ffffff;

    background: rgba(255, 255, 255, 0.045);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    text-align: center;
}


.education-table td {

    padding: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;

    vertical-align: middle;
}


/* =========================================================
   INPUTS / SELECTS INSIDE TABLE
   ========================================================= */

.education-table input,
.education-table select {

    width: 100%;

    min-width: 120px;

    box-sizing: border-box;

    padding: 9px 10px;

    border-radius: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    outline: none;
}


.education-table input:focus,
.education-table select:focus {

    border-color: #bfd730;

    box-shadow:
        0 0 0 2px rgba(191, 215, 48, 0.10);
}


.education-table select option {

    background: #202020;

    color: #ffffff;
}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.education-file {

    min-width: 190px;
}


.education-file input[type="file"] {

    padding: 7px;

    cursor: pointer;
}


/* =========================================================
   DELETE BUTTON
   ========================================================= */

.education-delete-btn {

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

    font-family: inherit;

    cursor: pointer;

    background: rgba(220, 50, 50, 0.15);

    color: #ff7777;

    transition: 0.25s ease;
}


.education-delete-btn:hover {

    background: rgba(220, 50, 50, 0.25);

    transform: translateY(-1px);
}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.education-table-empty {

    padding: 18px 20px;

    text-align: center;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.education-table-wrapper.active {

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   DISABLED TABLE ROW
   ========================================================= */

.education-table-wrapper.disabled
.education-table {

    opacity: 0.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .education-table-header {

        align-items: flex-start;

        flex-direction: column;
    }

    .education-add-btn {

        width: 100%;
    }

}


/* =========================================================
   STEP 4 EDUCATION TABLE
   Full width, independent from fields-grid
   ========================================================= */

/* =========================================================
   SPECIAL SKILLS TABLE
   HIDDEN BY DEFAULT
   ========================================================= */

.skills-table-wrapper {

    width: 100%;
    box-sizing: border-box;

    /* IMPORTANT */
    grid-column: 1 / -1;

    margin-top: 0px;

    direction: rtl;

    border-radius: 16px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    background: rgba(255, 255, 255, 0.035);

    overflow: hidden;

    display: none;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   SHOW TABLE
   ========================================================= */

.skills-table-wrapper.show {

    display: block;

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.skills-table-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.skills-table-header h3 {

    margin: 0;

    font-size: 17px;

    font-weight: 600;

    color: #ffffff;
}


/* =========================================================
   ADD BUTTON
   ========================================================= */

.skills-add-btn {

    border: none;

    border-radius: 999px;

    padding: 10px 18px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    background: #bfd730;

    color: #111;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.skills-add-btn:not(:disabled):hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px rgba(191, 215, 48, 0.25);
}


.skills-add-btn:disabled {

    opacity: 0.35;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   TABLE SCROLL
   PERSIAN RED SCROLLBAR
   ========================================================= */

.skills-table-scroll {

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;

    /* Firefox */
    scrollbar-color: #a21c43 #ffffff;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   CHROME / EDGE / OPERA / SAFARI
   ========================================================= */

.skills-table-scroll::-webkit-scrollbar {

    height: 8px;
}


.skills-table-scroll::-webkit-scrollbar-track {

    background: #ffffff;

    border-radius: 999px;
}


.skills-table-scroll::-webkit-scrollbar-thumb {

    background: #a21c43;

    border-radius: 999px;

    border: 2px solid #ffffff;
}


.skills-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #861638;
}


/* =========================================================
   TABLE
   ========================================================= */

.skills-table {

    width: 100%;

    min-width: 1050px;

    border-collapse: collapse;

    direction: rtl;
}

.skills-institute-cell {
    min-width: 150px;
}

.skills-institute-cell input {
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   HEADER CELLS
   ========================================================= */

.skills-table th {

    padding: 13px 12px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.045);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    text-align: center;
}


/* =========================================================
   TABLE CELLS
   ========================================================= */

.skills-table td {

    padding: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;

    vertical-align: middle;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.skills-table input,
.skills-table select {

    width: 100%;

    min-width: 120px;

    box-sizing: border-box;

    padding: 9px 10px;

    border-radius: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    outline: none;
}


.skills-table input:focus,
.skills-table select:focus {

    border-color: #bfd730;

    box-shadow:
        0 0 0 2px rgba(191, 215, 48, 0.10);
}


.skills-table select option {

    background: #202020;

    color: #ffffff;
}


/* =========================================================
   DELETE BUTTON
   ========================================================= */

.skill-delete-btn {

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

    font-family: inherit;

    cursor: pointer;

    background:
        rgba(220, 50, 50, 0.15);

    color: #ff7777;

    transition: 0.25s ease;
}


.skill-delete-btn:hover {

    background:
        rgba(220, 50, 50, 0.25);

    transform: translateY(-1px);
}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.skills-table-empty {

    padding: 18px 20px;

    text-align: center;

    font-size: 13px;

    color:
        rgba(255, 255, 255, 0.55);
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.skills-table-wrapper.active {

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   DISABLED STATE
   ========================================================= */

.skills-table-wrapper.disabled {

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .skills-table-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .skills-add-btn {

        width: 100%;
    }
}



/* =========================================================
   FOREIGN LANGUAGE SKILLS TABLE
   HIDDEN BY DEFAULT
   ========================================================= */

.language-skills-table-wrapper {

    width: 100%;

    box-sizing: border-box;

        /* IMPORTANT */
    grid-column: 1 / -1;

    margin-top: 0px;

    direction: rtl;

    border-radius: 16px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.035);

    overflow: hidden;

    display: none;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   SHOW TABLE
   ========================================================= */

.language-skills-table-wrapper.show {

    display: block;

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.language-skills-table-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.language-skills-table-header h3 {

    margin: 0;

    font-size: 17px;

    font-weight: 600;

    color: #ffffff;
}


/* =========================================================
   ADD BUTTON
   ========================================================= */

.language-skills-add-btn {

    border: none;

    border-radius: 999px;

    padding: 10px 18px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    background: #bfd730;

    color: #111;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.language-skills-add-btn:not(:disabled):hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px rgba(191, 215, 48, 0.25);
}


.language-skills-add-btn:disabled {

    opacity: 0.35;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   TABLE SCROLL
   PERSIAN RED SCROLLBAR
   ========================================================= */

.language-skills-table-scroll {

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: thin;

    /* Firefox */
    scrollbar-color: #a21c43 #ffffff;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   CHROME / EDGE / OPERA / SAFARI
   ========================================================= */

.language-skills-table-scroll::-webkit-scrollbar {

    height: 8px;
}


.language-skills-table-scroll::-webkit-scrollbar-track {

    background: #ffffff;

    border-radius: 999px;
}


.language-skills-table-scroll::-webkit-scrollbar-thumb {

    background: #a21c43;

    border-radius: 999px;

    border: 2px solid #ffffff;
}


.language-skills-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #861638;
}


/* =========================================================
   TABLE
   ========================================================= */

.language-skills-table {

    width: 100%;

    min-width: 900px;

    border-collapse: collapse;

    direction: rtl;
}


/* =========================================================
   HEADER CELLS
   ========================================================= */

.language-skills-table th {

    padding: 13px 12px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.045);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    text-align: center;
}


/* =========================================================
   TABLE CELLS
   ========================================================= */

.language-skills-table td {

    padding: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;

    vertical-align: middle;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.language-skills-table input,
.language-skills-table select {

    width: 100%;

    min-width: 120px;

    box-sizing: border-box;

    padding: 9px 10px;

    border-radius: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    outline: none;
}


.language-skills-table input:focus,
.language-skills-table select:focus {

    border-color: #bfd730;

    box-shadow:
        0 0 0 2px rgba(191, 215, 48, 0.10);
}


.language-skills-table select option {

    background: #202020;

    color: #ffffff;
}


/* =========================================================
   DELETE BUTTON
   ========================================================= */

.language-skills-delete-btn {

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

    font-family: inherit;

    cursor: pointer;

    background:
        rgba(220, 50, 50, 0.15);

    color: #ff7777;

    transition: 0.25s ease;
}


.language-skills-delete-btn:hover {

    background:
        rgba(220, 50, 50, 0.25);

    transform: translateY(-1px);
}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.language-skills-table-empty {

    padding: 18px 20px;

    text-align: center;

    font-size: 13px;

    color:
        rgba(255, 255, 255, 0.55);
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.language-skills-table-wrapper.active {

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   DISABLED STATE
   ========================================================= */

.language-skills-table-wrapper.disabled {

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .language-skills-table-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .language-skills-add-btn {

        width: 100%;
    }
}

/* =========================================================
   FOREIGN LANGUAGE CERTIFICATE TABLE
   HIDDEN BY DEFAULT
   ========================================================= */

.language-certificate-table-wrapper {

    width: 100%;

    box-sizing: border-box;

    /* IMPORTANT */
    grid-column: 1 / -1;

    margin-top: 0px;

    direction: rtl;

    border-radius: 16px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.035);

    overflow: hidden;

    display: none;

    transition:
        opacity 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   SHOW TABLE
   ========================================================= */

.language-certificate-table-wrapper.show {

    display: block;

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.language-certificate-table-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 18px 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.language-certificate-table-header h3 {

    margin: 0;

    font-size: 17px;

    font-weight: 600;

    color: #ffffff;
}


/* =========================================================
   ADD BUTTON
   ========================================================= */

.language-certificate-add-btn {

    border: none;

    border-radius: 999px;

    padding: 10px 18px;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    background: #bfd730;

    color: #111;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.language-certificate-add-btn:not(:disabled):hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 18px rgba(191, 215, 48, 0.25);
}


.language-certificate-add-btn:disabled {

    opacity: 0.35;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* =========================================================
   TABLE SCROLL
   PERSIAN RED SCROLLBAR
   ========================================================= */

.language-certificate-table-scroll {

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: thin;

    scrollbar-color:
        #a21c43
        #ffffff;

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   CHROME / EDGE / OPERA / SAFARI
   ========================================================= */

.language-certificate-table-scroll::-webkit-scrollbar {

    height: 8px;
}


.language-certificate-table-scroll::-webkit-scrollbar-track {

    background: #ffffff;

    border-radius: 999px;
}


.language-certificate-table-scroll::-webkit-scrollbar-thumb {

    background: #a21c43;

    border-radius: 999px;

    border: 2px solid #ffffff;
}


.language-certificate-table-scroll::-webkit-scrollbar-thumb:hover {

    background: #861638;
}


/* =========================================================
   TABLE
   ========================================================= */

.language-certificate-table {

    width: 100%;

    min-width: 1000px;

    border-collapse: collapse;

    direction: rtl;
}


/* =========================================================
   HEADER CELLS
   ========================================================= */

.language-certificate-table th {

    padding: 13px 12px;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.045);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);

    text-align: center;
}


/* =========================================================
   TABLE CELLS
   ========================================================= */

.language-certificate-table td {

    padding: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;

    vertical-align: middle;
}


/* =========================================================
   INPUTS / SELECTS
   ========================================================= */

.language-certificate-table input,
.language-certificate-table select {

    width: 100%;

    min-width: 120px;

    box-sizing: border-box;

    padding: 9px 10px;

    border-radius: 8px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    outline: none;
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

.language-certificate-table input:focus,
.language-certificate-table select:focus {

    border-color: #bfd730;

    box-shadow:
        0 0 0 2px rgba(191, 215, 48, 0.10);
}


/* =========================================================
   SELECT OPTIONS
   ========================================================= */

.language-certificate-table select option {

    background: #202020;

    color: #ffffff;
}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.language-certificate-table input[type="file"] {

    min-width: 170px;

    padding: 7px 8px;

    cursor: pointer;
}


/* =========================================================
   FILE UPLOAD BUTTON
   ========================================================= */

.language-certificate-table
input[type="file"]::file-selector-button {

    margin-left: 8px;

    padding: 6px 10px;

    border: none;

    border-radius: 6px;

    background: #bfd730;

    color: #111;

    font-family: inherit;

    font-size: 12px;

    cursor: pointer;

    transition: 0.25s ease;
}


.language-certificate-table
input[type="file"]::file-selector-button:hover {

    opacity: 0.85;
}


/* =========================================================
   DELETE BUTTON
   ========================================================= */

.language-certificate-delete-btn {

    border: none;

    border-radius: 8px;

    padding: 8px 12px;

    font-family: inherit;

    cursor: pointer;

    background:
        rgba(220, 50, 50, 0.15);

    color: #ff7777;

    transition: 0.25s ease;
}


.language-certificate-delete-btn:hover {

    background:
        rgba(220, 50, 50, 0.25);

    transform: translateY(-1px);
}


/* =========================================================
   EMPTY MESSAGE
   ========================================================= */

.language-certificate-table-empty {

    padding: 18px 20px;

    text-align: center;

    font-size: 13px;

    color:
        rgba(255, 255, 255, 0.55);
}


/* =========================================================
   PLACEHOLDER ROW
   ========================================================= */

/*
   The placeholder row is visible when the table
   is shown but the user has not added a record.

   It does NOT participate in form validation.
*/

.language-certificate-default-record td {

    opacity: 0.65;
}


.language-certificate-default-record input,
.language-certificate-default-record select {

    cursor: not-allowed;

    opacity: 0.45;
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.language-certificate-table-wrapper.active {

    border-color:
        rgba(191, 215, 48, 0.25);

    box-shadow:
        0 0 25px rgba(191, 215, 48, 0.04);
}


/* =========================================================
   DISABLED STATE
   ========================================================= */

.language-certificate-table-wrapper.disabled {

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .language-certificate-table-header {

        align-items: flex-start;

        flex-direction: column;
    }


    .language-certificate-add-btn {

        width: 100%;
    }


    .language-certificate-table {

        min-width: 1000px;
    }
}