/* Variables. */

:root {
    --primary-color: #364966;
    --secondary-color: #003366;
    --cta-primary-color: #ffcc00;
    --cta-secondary-color: #ffbf00;
    --gray1-color: #d1d1d1;
    --gray2-color: #e8e8e8;
    --gray3-color: #f1f1f1;
    --info-color: #87cefa;
    --box-shadow-color: #d3d3d3;
    --box-shadow-dark-color: #2a2a2a;
    --page-color: #f7f7f7;
}

/* Main styles. */

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: IBM Plex Sans, sans-serif;
    background-color: var(--page-color);
}

a {
    display: block;
    max-width: fit-content;
    margin-top: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
}

.pageMainContainer {
    justify-items: center;
    margin: 4rem;
}

.packageMainContainer {
    display: grid;
    grid-template-columns: 64rem 1fr;
    max-width: 96rem;
    margin-bottom: 1rem;
    border-radius: 2rem 2rem 1rem 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
}

.packageSelect {
    text-align: center;
    margin-bottom: 1rem;
    border-radius: 2rem 0 0 2rem;
    background-color: #fff;
}

.packageBoxContainer {
    display: flex;
    gap: 1rem;
    padding: 1rem 4rem;
}

.packageBox {
    display: grid;
    width: 18rem;
    height: fit-content;
    background-color: var(--gray3-color);
    border-radius: 1rem;
    transition: all 0.3s;
}

.packageBoxRecommended {
    display: grid;
    width: 18rem;
    height: fit-content;
    background: radial-gradient(circle at 30% 20%, #1a3298 0%, var(--box-shadow-dark-color) 100%);
    color: white;
    border-radius: 1rem;
    transition: all 0.3s;
}

.perCVTag {
    box-sizing: border-box;
    display: inline-block;
    justify-self: end;
    padding: 0.25rem 0.5rem;
    border-radius: 0 0.5rem;
    background-color: var(--cta-primary-color);
    color: #000;
    font-size: 0.75rem;
}

.recommendedTag {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--info-color);
    opacity: 0.8;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    font-size: 0.7rem;
}

.recommendedIcon {
    color: var(--secondary-color);
    font-size: 0.85rem;
    align-self: center;
}

.packageName {
    display: inline-block;
    justify-self: start;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1rem;
}

.packagePrice {
    display: inline-block;
    justify-self: start;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 1rem;
}

.packageSubtitle {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 0 1rem 0 1rem;
}

.packageIncludes {
    display: inline-block;
    justify-self: start;
    font-weight: 600;
    margin: 1rem 1rem 0.5rem 1rem;
}

.packageElementsContainer {
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap: 0.25rem;
    align-items: center;
    margin: 0 1rem 1rem 1rem;
}

.packageElement {
    display: block;
    justify-self: start;
    white-space: nowrap;
}

.packageElementsContainer span {
    display: inline-flex;
    justify-self: start;
    text-align: left;
    font-size: 0.75rem;
}

.infoIcon {
    color: var(--secondary-color);
    cursor: help;
}

.infoIconRecommended {
    color: var(--info-color);
    cursor: help;
}

.infoIconStart {
    font-size: 1rem;
}

.lock {
    color: var(--gray1-color);
}

.lockRecommended {
    color: #4373c3;
}

.add {
    font-weight: 600;
}

.packageSelectButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    margin: 0 1rem 1rem 1rem;
    font-family: inherit;
    color: #fff;
    background-color: var(--primary-color);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.packageSelectButtonRecommended {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    box-sizing: border-box;
    width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    margin: 0 1rem 1rem 1rem;
    font-family: inherit;
    color: #000;
    background-color: var(--cta-primary-color);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.packageSelectButtonIcon {
    font-size: 1rem;
}

.packageExtraButton {
    position: relative;
    overflow: hidden;
    align-items: start;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.5rem;
    box-sizing: border-box;
    padding: 1rem 1rem 1rem 0.5rem;
    margin: 1rem 4rem;
    background-color: #fff;
    border: 1px solid var(--gray2-color);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.packageExtraButton--selected {
    background-color: var(--gray3-color);
    border: 1px solid var(--gray1-color);
}

.packageExtraCheckbox {
    font-variation-settings: 'wght' 200;
    font-size: 1.2rem;
    margin-top: 0.25rem;
}

.packageExtraButtonContent {
    display: block;
    padding-right: 1rem;
}

.packageExtraButtonHeader {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.packageExtraName {
    justify-self: start;
    font-size: 1.2rem;
    font-weight: 600;
}

.packageExtraPrice {
    text-align: right;
    white-space: nowrap;
    font-size: 1.2rem;
    font-weight: 600;
}

.packageExtraSpan {
    display: flex;
    text-align: left;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.packageExtraInputAndButton {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.packageExtraInputContainer {
    gap: 0.5rem;
    justify-content: left;
}

.packageExtraInput {
    display: flex;
    text-align: left;
    width: 12rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem 0.5rem 0.5rem 1rem;
    transition: all 0.3s;
}

.packageExtraCheckButton {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: var(--gray2-color);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.packageSummary {
    display: grid;
    align-items: end;
    width: 22rem;
    box-sizing: border-box;
    padding: 1rem 2rem;
    background-color: var(--gray3-color);
    border-radius: 0 2rem 1rem 0;
}

.fixedSummary {
    width: 18rem;
    position: sticky;
    bottom: 1rem;
}

.packageSummaryTitle {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.packageSummaryDetails {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.packageFullDetails {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 2rem;
}

.packageSummaryItem {
    color: var(--primary-color);
}

.packageSummaryItemPrice {
    font-weight: 500;
}

.packageFullItem {
}

.packageFullPrice {
    font-weight: 500;
}

.accept {
    display: inline-flex;
    align-items: start;
    padding-top: 2rem;
    font-size: 0.85rem;
}

.goToFormButton {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    font-family: inherit;
    font-weight: 500;
    background-color: var(--cta-primary-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.pageBlend {
    z-index: 2;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
}

.modalContainer, .fileSizeInfo {
    height: auto;
    display: grid;
    gap: 0.5rem;
    z-index: 5;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem;
    border: 1px solid var(--gray3-color);
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-dark-color);
}

.modalListItem {
    display: grid;
    align-content: center;
    gap: 1rem;
    width: 20rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--gray3-color);
}

.modalContent {
    font-size: 1rem;
    font-weight: 500;
}

.modalButtonsContainer {
    display: flex;
    gap: 0.5rem;
}

.modalButton {
    position: relative;
    overflow: hidden;
    flex: 1;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    align-items: center;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
}

.heroCoverContainer {
    position: relative;
    width: 100%;
    height: 24rem;
    overflow: hidden;
}

.heroCover {
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 2rem 2rem 1rem 1rem;
}

.coverButtonsContainer {
    z-index: 1;
    display: flex;
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    overflow: hidden;
    gap: 0.5rem;
}

.coverContactButton {
    display: flex;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    align-items: center;
    background-color: var(--cta-primary-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.coverContactButton .material-symbols-rounded {
    font-weight: 200;
    font-size: 1.3rem;
}

.coverMoreButton {
    display: flex;
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    overflow: hidden;
    margin: 0;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    background-color: var(--gray3-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.coverMoreButton .material-symbols-rounded {
    font-size: 1rem;
}

.coverMoreList {
    z-index: 1;
    position: absolute;
    top: -1rem;
    right: 1.5rem;
    padding: 0;
    border: 1px solid var(--gray3-color);
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
}

.coverMoreList ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.coverMoreList ul li {
    margin: 0.25rem 0.5rem;
}

.coverMoreList ul li:first-child {
    margin-top: 0.5rem;
}

.coverMoreList ul li:last-child {
    margin-bottom: 0.5rem;
}

.coverMoreListButton {
    display: flex;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0.5rem 1rem;
    text-align: left;
    align-items: center;
    font-family: inherit;
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.shareProfileContainer {
    z-index: 5;
    display: grid;
    gap: 0.5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem;
    border: 1px solid var(--gray3-color);
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-dark-color);
}

.shareProfileListItem {
    display: flex;
    position: relative;
    overflow: hidden;
    min-width: 24rem;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    border-radius: 0.5rem;
    border: none;
    background-color: var(--gray3-color);
    cursor: pointer;
}

.qrContainer {
    display: flex;
    z-index: 10;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 176px;
    height: 176px;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--gray3-color);
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-dark-color);
}

.heroContentContainer {
    display: flex;
    position: relative;
    padding: 1rem 8rem 0 8rem;
}

.heroPictureContainer {
    min-width: 14rem;
    min-height: 14rem;
    max-width: 14rem;
    max-height: 14rem;
    transform: translateY(-8rem);
}

.heroPicture {
    width: calc(100% - 8px);
    border: 4px solid #fff;
    border-radius: 2rem;
}

.heroAboutContainer {
    padding: 0 4rem 0 1rem;
}

.heroName {
    padding: 2rem 1rem 0;
    margin: 0;
    font-size: 3rem;
    font-weight: 800;
}

.heroProfession {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.material-symbols-rounded {
    font-variation-settings: 'wght' 400;
}

.heroContactTagsContainer {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    gap: 0.5rem;
    list-style-type: none;
}

.heroContactTag {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: #000;
    background-color: var(--gray2-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.heroContactTag .material-symbols-rounded, .coverMoreListButton .material-symbols-rounded, .coverContactButtonAction .material-symbols-rounded, .shareProfileListItem .material-symbols-rounded {
    font-weight: 200;
    font-size: 1.2rem;
}

.heroShortDescription {
    font-size: 1.1rem;
    font-weight: 400;
}

.navigationButtonsContainer {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.navigationButton {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0.5rem 1rem;
    font-family: inherit;
    background-color: var(--gray3-color);
    border: none;
    border-bottom: 2px solid var(--gray3-color);
    cursor: pointer;
    transition: background-color 0.3s;
}

.navigationButton--first {
    border-top-left-radius: 1rem;
}

.navigationButton--last {
    border-top-right-radius: 1rem;
}

.navigationButton--active {
    font-weight: 500;
    border-bottom: 2px solid var(--primary-color);
}

.formMainContainer {
    width: calc(100% - 2rem);
    max-width: 94rem;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
}

.formMainContainer:last-of-type {
    border-radius: 1rem 1rem 2rem 2rem;
}

.mainPackageChoice {
    display: flex;
    margin-top: 1rem;
    gap: 1rem;
}

.mainPackageChoice input[type="radio"] {
    display: none;
}

.mainPackageChoice input[type="radio"]:checked + label {
    background-color: var(--cta-primary-color);
    border: 2px solid black;
}

.mainPackageChoice label {
    display: block;
    padding: 0.5rem 1rem;
    background-color: var(--gray2-color);
    border: 2px solid var(--gray1-color);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.mainPackageChoice label h3 {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.mainPackageChoice label span {
    display: block;
    margin: 0;
}

.mainUpgradePackage {
    margin-top: 1rem;
    margin-bottom: 0;
}

.mainUpgradePackage input[type="checkbox"] {
    background-color: black;
}

.mainUpgradePackage label {
    cursor: pointer;
    transition: all 0.3s;
}

.formHeaderContainer {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gray2-color);
}

.formHeaderContent {
    margin: 0;
    font-size: 1rem;
}

.inputMainContainer {
    justify-items: center;

}

.inputInnerContainer {
    max-width: 46rem;
}

hr {
    box-sizing: border-box;
    margin: 2rem 0.5rem 0 0.5rem;
    border: 1px solid var(--gray2-color);
}

.inputInnerHeader {
    text-align: left;
    margin: 2rem 0 0 0;
}

.inputTextForm {
    display: block;
}

.inputTextForm label,
.inputPhoneForm label,
.tagsMainContainer label,
.inputDateBlock label {
    display: block;
    max-width: fit-content;
    padding: 0 0.25rem;
    font-size: 0.8rem;
    transform: translate(1rem, 0.5rem);
    background-color: #fff;
}

.inputTextForm input {
    width: 32rem;
    padding: 0.75rem 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem;
    transition: all 0.3s;
}

.inputPhoneForm {
    height: fit-content;
    display: grid;
    grid-template-columns: 0.3fr 0.6fr 0.1fr;
    align-items: end;
    gap: 0.5rem;
}

.inputPhoneBlock, .inputDateBlock {
    display: block;
}

.inputPhoneForm select {
    width: 9.35rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.8rem;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem 0.5rem 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.inputPhoneForm input {
    width: 18.7rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.inputPhoneForm button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #ee1848;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray1-color);
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    font-family: inherit;
    width: 2.95rem;
    cursor: pointer;
    transition: all 0.3s;
}

.formAddButtonsContainer {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.formAddButtonsContainer label,
.formAddButtonsContainer button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    background-color: var(--gray2-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
}

.formAddButtonsContainer input[type="file"] {
    display: none;
}

.formAddButtonsContainer label .material-symbols-rounded,
.formAddButtonsContainer button .material-symbols-rounded,
.inputPhoneForm button .material-symbols-rounded,
.inputRemovableFormGrid button .material-symbols-rounded,
.inputRemovableTextContainer button .material-symbols-rounded,
.jobHistoryAddButton .material-symbols-rounded,
.previousFormSectionButton .material-symbols-rounded,
.nextFormSectionButton .material-symbols-rounded,
.skipFormSectionButton .material-symbols-rounded,
.startFormSectionButton .material-symbols-rounded,
.experienceHeader button .material-symbols-rounded,
.experienceTab button .material-symbols-rounded,
.inputDateButton .material-symbols-rounded {
    font-size: 1.1rem;
    font-variation-settings: 'wght' 300;
}

.inputRemovableFormGrid {
    display: grid;
    grid-template-columns: 0.9fr 0.1fr;
    align-items: end;
    gap: 0.5rem;
}

.inputRemovableTextForm,
.inputRemovableTextFormLink {
    display: block;
}

.inputRemovableTextForm label,
.inputRemovableTextFormLink label {
    display: block;
    max-width: fit-content;
    padding: 0 0.25rem;
    font-size: 0.8rem;
    transform: translate(1rem, 0.5rem);
    background-color: #fff;
}

.inputRemovableTextForm input,
.inputRemovableTextFormLink input {
    width: 28.55rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem 0.5rem 0.5rem 1rem;
    transition: all 0.3s;
}

.inputRemovableTextFormLink input:first-of-type {
    display: block;
    border-top: 1px solid var(--gray1-color);
    border-right: 1px solid var(--gray1-color);
    border-bottom: none;
    border-left: 1px solid var(--gray1-color);
    border-radius: 1rem 0.5rem 0 0;
}

.inputRemovableTextFormLink input:last-of-type {
    display: block;
    font-size: 0.65rem;
    background-color: var(--gray3-color);
    border-top: none;
    border-right: 1px solid var(--gray1-color);
    border-bottom: 1px solid var(--gray1-color);
    border-left: 1px solid var(--gray1-color);
    border-radius: 0 0 0.5rem 1rem;
}

.inputRemovableFormGrid button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #ee1848;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray1-color);
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    font-family: inherit;
    width: 2.95rem;
    cursor: pointer;
    transition: all 0.3s;
}

.inputDescription {
    display: block;
    max-width: 34rem;
    margin: 0.5rem 0 0.25rem 0;
}

.inputTextFrameWrap {
    height: 7rem;
    width: 32rem;
    resize: none;
    padding: 0.75rem 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem;
    transition: all 0.3s;
}

.inputTextFrameWrap::-webkit-scrollbar {
    display: none;
}

.nextFormSectionButtonContainer {
    display: flex;
    width: 34rem;
    justify-self: center;
    justify-content: flex-end;
}

.previousFormSectionButtonContainer {
    display: flex;
    width: 34rem;
    justify-self: center;
    justify-content: flex-start;
    margin-bottom: -1.5rem;
}

.startFormSectionButton {
    display: flex;
    justify-self: flex-start;
    position: relative;
    overflow: hidden;
    margin: 0 0 2rem 0;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 1rem;
    background-color: var(--primary-color);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.nextFormSectionButton {
    display: flex;
    justify-self: flex-end;
    position: relative;
    overflow: hidden;
    margin: 2rem 0 1rem 0;
    padding: 0.6rem 0.9rem 0.6rem 1.3rem;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 3rem;
    background-color: var(--primary-color);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.skipFormSectionButton {
    display: flex;
    justify-self: flex-end;
    position: relative;
    overflow: hidden;
    margin: 2rem 0 1rem 0;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray1-color);
    background-color: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0.6rem 0.9rem 0.6rem 1.3rem;
    border-radius: 3rem;
}

.previousFormSectionButton {
    display: flex;
    justify-self: flex-end;
    position: relative;
    overflow: hidden;
    margin: 2rem 0 1rem 0;
    padding: 0.5rem 1rem;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem;
    background-color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.formAddButtonsContainer button,
.formAddButtonsContainer label,
.previousFormSectionButton {
    padding: 0.6rem 1.3rem 0.6rem 0.9rem;
    border-radius: 3rem;
}

.tagsMainContainer {
    display: block;
}

.tagsBox {
    width: 32rem;
    height: fit-content;
    padding: 1rem;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem;
}

.tagsListContainer {
    width: 32rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tagsListContainer span {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    font-size: 0.8rem;
    background-color: var(--gray2-color);
    border-radius: 1rem;
}

.tagsListContainer button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    margin: 0 0 0 0.25rem;
    border: none;
    border-radius: 1rem;
    background-color: var(--gray2-color);
    cursor: pointer;
    transition: all 0.3s;
}

.tagsListContainer button .material-symbols-rounded {
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    padding: 0;
    background-color: transparent;
}

.tagsButtonsContainer {
    display: flex;
    overflow: hidden;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.tagsButtonsContainer button {
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    font-family: inherit;
    background-color: var(--gray2-color);
    border: 1px solid var(--gray2-color);
    
    cursor: pointer;
    transition: all 0.3s;
}

.softSkillsAddTagButton,
.experienceAddTagButton,
.educationAddTagButton {
    border-radius: 0.25rem;
}

.tagInput {
    min-width: 32rem;
    box-sizing: border-box;
    padding: 0.5rem;
    border: 1px solid var(--gray3-color);
    border-radius: 0.25rem;
    font-family: inherit;
    background-color: var(--gray3-color);
    transition: all 0.3s;
}

.tagInput--experienceFocus {
    min-width: 27rem;
}

.tagInput--withNumbersFocus {
    min-width: 11rem;
}

.tagInput--withLanguageFocus {
    min-width: 5rem;
}

.tagsFlex {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.tagRangeButtonContainer {
    display: inline-flex;
    flex-wrap: nowrap;
}

.tagRangeButton {
    display: inline-flex;
    border-radius: 0;
}

.tagRangeButton:first-of-type {
    border-radius: 0.25rem 0 0 0.25rem;
}

.tagRangeButton:last-of-type {
    border-radius: 0 0.25rem 0.25rem 0;
}

.tagRangeButton--active {
    background-color: var(--gray1-color) !important;
    border-color: var(--gray1-color) !important;
}

.tagRangeAddButton {
    display: inline-flex;
    border-radius: 0.25rem;
}

.inputDateForm {
    display: grid;
    grid-template-columns: 0.4fr 0.4fr 0.2fr;
    width: 34rem;
    align-items: end;
    gap: 0.5rem;
    margin: 0;
}

.inputDateForm input {
    width: 11.2rem;
    padding: 0.5rem 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    transition: all 0.3s;
}

.inputDateButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.9rem;
    height: calc(100% - 1rem);
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    font-style: inherit;
    font-size: 0.8rem;
    background-color: var(--gray2-color);
    border: 1px solid var(--gray1-color);
    border-left-style: none;
    border-radius: 0 1rem 1rem 0;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.inputDateButton--selected {
    justify-content: flex-start;
    background-color: var(--gray1-color);
    margin-left: -13.4rem;
    width: 20.3rem;
    border-radius: 0.5rem 1rem 1rem 0.5rem;
}

.inputDateButton input[type="checkbox"] {
    display: none;
}

.inputDateFrom-MM-RRRR {
    border-radius: 1rem 0.5rem 0.5rem 1rem;
}

.inputDateTo-MM-RRRR {
    border-radius: 0.5rem 0 0 0.5rem;
    margin-right: -0.5rem;
}

.inputDateTo-MM-RRRR--disabled {
    color: transparent;
    background-color: var(--gray2-color);
    border: none;
}

.inputDateFrom-RRRR {
    border-radius: 1rem 0.5rem 0.5rem 1rem;
}

.inputDateTo-RRRR {
    border-radius: 0.5rem 1rem 1rem 0.5rem;
}

.inputTextFrameWrapRemovable {
    height: 7rem;
    width: 28.55rem;
    resize: none;
    padding: 1rem;
    font-family: inherit;
    border: 1px solid var(--gray1-color);
    border-radius: 1rem 0.5rem 1rem 1rem;
    transition: all 0.3s;
}

.inputRemovableTextContainer {
    display: grid;
    grid-template-columns: 0.9fr 0.1fr;
    gap: 0.5rem;
    margin-bottom: -0.25rem;
}

.inputRemovableTextContainer button {
    width: 2.95rem;
    height: fit-content;
    margin-top: 1rem;
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #ee1848;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray1-color);
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.jobHistoryAddButton {
    display: flex;
    position: relative;
    overflow: hidden;
    width: 34rem;
    height: 3.5rem;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    background-color: var(--gray3-color);
    border: 1px dashed var(--primary-color);
    border-radius: 1rem;
    margin-top: 2rem;
    cursor: pointer;
    transition: all 0.3s;
}

.experienceHeader {
    display: flex;
    justify-content: space-between;
    margin-top: 2.5rem;
}

.experienceHeader .inputInnerHeader {
    margin: 0;
    align-self: center;
}

.experienceTab {
    display: flex;
    justify-content: space-between;
    width: 34rem;
    margin-top: 2rem;
    margin-bottom: -1rem;
    border-radius: 1rem;
}

.experienceTab .inputInnerHeader {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 1rem 0 0 1rem;
    background-color: var(--gray2-color);
    border: 1px solid var(--gray1-color);
    border-right: none;
    align-self: center;
    cursor: pointer;
    transition: all 0.3s;
    background-color: #f7f7f7;
}

.experienceTab .inputInnerHeader span {
    font-size: 0.85rem;
    font-weight: 400;
}

.experienceHeader button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    height: fit-content;
    align-self: flex-end;
    background-color: #fff;
    color: #ee1848;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem 1rem 1rem 0.5rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.experienceTab button {
    height: initial;
    align-self: initial;
    padding: 0 1.5rem;
    border: 1px solid var(--gray1-color);
    border-left: none;
    border-radius: 0 1rem 1rem 0;
    background-color: #f7f7f7;
}

.info {
    width: 34rem;
    display: block;
    box-sizing: border-box;
    padding: 1rem;
    font-size: 0.85rem;
    background-color: var(--info-color);
    border: 1px solid var(--secondary-color);
    border-radius: 1rem;
}

.inputMainContainer .info {
    margin-top: 2rem;
    margin-bottom: -1rem;
}

.userFilesPreviewContainer {
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    box-sizing: border-box;
    width: 34rem;
    gap: 0.5rem;
    border: 1px solid var(--gray1-color);
    margin-top: 1rem;
    padding: 0.5rem;
    border-radius: 1rem;
}

.userFileItemContainer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    background-color: #bbdefb;
    padding: 0 0.5rem 0 0;
    border-radius: 0.5rem;
}

.userFilePreview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    gap: 0.5rem;
    border-radius: 0.5rem;
}

.fileType {
    font-size: 0.85rem;
    font-weight: 500;
}

.fileName {
    font-size: 0.65rem;
}

.userFileItem {
    display: flex;
    height: 2.5rem;
    box-sizing: border-box;
    border-radius: 0.5rem 0 0 0.5rem;
}

.userFileItemDeleteButton {
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 0.25rem;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}

.userFileItemDeleteButton span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}

.galleryTitleInput {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.5rem;
    border: 1px solid var(--gray3-color);
    font-family: inherit;
    padding: 0.5rem 1rem;
    background-color: var(--gray3-color);
    transition: all 0.3s;
}

.spinnerBlend {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #000;
    opacity: 0.85;
    z-index: 4;
}

.spinner {
    position: absolute;
    width: 3rem;
    height: 3rem;
    border: 4px solid #ccc;
    border-top: 4px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 5;
}

.experienceContent {
    
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hover. */

.mainPackageChoice label:hover,
.formAddButtonsContainer label:hover,
.formAddButtonsContainer button:hover {
    background-color: var(--gray1-color);
}

.inputPhoneForm button:hover,
.inputRemovableFormGrid button:hover,
.inputRemovableTextContainer button:hover,
.experienceHeader button:hover,
.experienceTab button:hover {
    color: #fff;
    background-color: #ee1848;
    border-color: #ee1848;
}

.nextFormSectionButton:hover,
.startFormSectionButton:hover {
    background-color: var(--secondary-color);
}

.skipFormSectionButton:hover {
    background-color: var(--gray2-color);
    border: 1px solid var(--gray2-color);
}

.previousFormSectionButton:hover {
    background-color: var(--gray2-color);
}

.tagInput:hover,
.galleryTitleInput:hover {
    border: 1px solid var(--gray1-color);
}

.tagsButtonsContainer button:hover {
    background-color: var(--gray1-color);
    border: 1px solid var(--gray1-color);
}

.tagsListContainer button:hover {
    background-color: var(--gray1-color);
}

.jobHistoryAddButton:hover {
    background-color: var(--gray2-color);
}

.experienceTab .inputInnerHeader:hover {
    background-color: #f0f0f0;
}

.inputDateButton:hover {
    background-color: var(--gray1-color);
}

.userFileItemDeleteButton:hover {
    color: #fff;
    background-color: #ee1848;
}

/*.packageExtraButton:hover {
    background-color: var(--gray3-color);
}*/

.packageBox:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
}

.packageBoxRecommended:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
}

.packageExtraCheckButton:hover {
    background-color: var(--gray1-color);
}

.packageSelectButton:hover {
    background-color: var(--secondary-color);
}

.packageSelectButtonRecommended:hover {
    background-color: var(--cta-secondary-color);
}

.goToFormButton:hover {
    background-color: var(--cta-secondary-color);
}

/* Focus. */

.inputTextForm input:focus,
.inputPhoneForm input:focus,
.inputPhoneForm select:focus,
.inputRemovableTextForm input:focus,
.inputTextFrameWrap:focus {
    border: 1px solid var(--primary-color);
    outline: none;
}

.tagInput:focus,
.galleryTitleInput:focus {
    background-color: var(--gray2-color);
    border: 1px solid var(--gray1-color);
    outline: none;
}

/* Hidden class. */

.hidden {
    display: none;
}


/* --- */




.leftAccordionHeader {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 2rem;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    background-color: #fff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.leftAccordionHeader--first {
    margin-top: 1rem;
}

.leftAccordionContent {
    max-height: 0;
    overflow: hidden;
    padding: 0 2rem 0 1rem;
    margin: 0 1rem;
    border-left: 1px solid var(--gray2-color);
    transition: all 0.3s ease;
}

.videoButton, .imageButton {
    display: block;
    margin-top: 0.5rem;
    font-family: inherit;
    font-size: inherit;
    color: var(--primary-color);
    text-align: left;
    padding: 0;
    text-decoration: underline;
    background-color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.urlButton {
    display: block;
    margin: 0.5rem 0 0 0;
    color: var(--primary-color);
    text-decoration: underline;
    transition: all 0.3s;
}

.experienceRightBlock {
    padding: 1rem;
    border-radius: 1rem 1rem 2rem 1rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
}

.rightAccordionContainer {
    display: block;
    padding: 1rem 0 0;
    gap: 1rem;
}

.rightAccordionHeader {
    display: grid;
    position: relative;
    overflow: hidden;
    width: 100%;
    grid-template-columns: 3.4rem 1fr 3rem;
    margin-bottom: 1rem;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    font-family: inherit;
    background-color: var(--gray3-color);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.iconRightBlock {
    max-width: 2.4rem;
    max-height: 2.4rem;
    padding: 0.5rem;
    text-align: center;
    align-content: center;
    background-color: var(--secondary-color);
    border-radius: 50%;
    font-size: 2.4rem;
    font-variation-settings: 'wght' 200;
    color: #fff;
}

.rightAccordionMainTitle {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: left;
}

.rightAccordionSecondTitle {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
}

.rightAccordionContent {
    position: relative;
    max-height: 3rem;
    overflow: hidden;
    padding: 0 0rem 0 1rem;
    margin: 0.5rem 2rem 1rem 1rem;
    border-left: 1px solid var(--gray2-color);
    transition: all 0.3s ease;
}

.rightColumnTagsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rightColumnTag {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0.5rem 1rem;
    font-family: inherit;
    background-color: var(--gray3-color);
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s;
}

.rightColumnTag .material-symbols-rounded {
    font-weight: 200;
    font-size: 1rem;
}

.rightAccordionContentDescription {
    display: block;
    margin-top: 0.5rem;
    align-content: center;
}

.rightAccordionContentDescription--first {
    margin-top: 0;
}

.description--bold {
    font-weight: 500;
}

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

.experienceLevelContainer .material-symbols-rounded {
    margin-left: 1rem;
    font-size: 1.0rem;
    color: var(--secondary-color)
}

.videoPlayer, .imageViewer {
    z-index: 5;
    position: fixed;
    width: 560px;
    height: 315px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
    box-shadow: 0 0.25rem 0.5rem var(--box-shadow-dark-color);
}

.onlyPrint {
    display: none;
}

.mainSectionsContainerPDF {
    display: none;
}

/* ::Hover. */

a:hover {
    color: var(--secondary-color)
}

.buttonHeader:hover {
    background-color: #272727;
}

.coverMoreButton:hover {
    background-color: var(--gray2-color);
}

.coverMoreListButton:hover {
    background-color: var(--gray3-color);
}

.shareProfileListItem:hover {
    background-color: var(--gray2-color);
}

.coverContactButtonAction:hover {
    color: #000;
}

.heroContactTag:hover {
    color: #000;
    background-color: var(--gray1-color);
}

.navigationButton:hover {
    background-color: var(--gray2-color);
    border-bottom: 2px solid var(--gray2-color);
}

.navigationButton--active:hover {
    border-bottom: 2px solid var(--primary-color);
}

.leftAccordionHeader:hover {
    background-color: var(--gray3-color);
}

.rightAccordionHeader:hover {
    background-color: var(--gray2-color);
}

.rightColumnTag:hover {
    background-color: var(--gray2-color);
}

.videoButton:hover, imageButton:hover {
    color: var(--secondary-color);
}

/* ::After. */

.rightAccordionContent::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 1) 100%);
}

.heroCoverContainer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.rightAccordionContent--reset::after {
    content: none;
}

/* Visual effects. */

.button--ripple {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-effect 0.5s linear;
}

@keyframes ripple-effect {
    to {
        transform: scale(20);
        opacity: 0;
    }
}

/* Responsive. */

@media (max-width: 1400px) {
    .packageMainContainer {
        display: block;
        border-radius: 2rem;
    }

    .packageSelect {
        border-radius: 2rem;
    }

    .packageSummary {
        width: 100%;
        border-radius: 0 0 2rem 2rem;
        padding: 1rem 4rem;
    }

    .fixedSummary {
        width: auto;
    }

    .packageFullDetails, .packageSummaryDetails {
        justify-content: end;
        gap: 1rem;
    }

    .hidden {
        display: none;
    }
}

@media (max-width: 1060px) {
    html {
        font-size: 15px;
    }

    body {
        padding: 0;
        margin: 0;
    }
    
    .header {
        display: none;
    }

    .pageMainContainer {
        max-width: 100%;
        margin: 0 0 2rem 0;
    }

    .packageMainContainer {
        display: block;
        max-width: 100%;
        margin: 0 0 1rem;
        border-radius: 0;
    }

    .packageSelect {
        max-width: 100%;
        border-radius: 0;
    }

    .packageBoxContainer {
        padding: 1rem 0.5rem;
        max-width: 100%;
        overflow-y: hidden;
    }

    .packageBoxContainer::-webkit-scrollbar {
        display: none;
    }

    .packageBox, .packageBoxRecommended {
        min-width: 18rem;
    }

    .packageBox:hover, .packageBoxRecommended:hover {
        transform: initial;
        box-shadow: initial;
    }

    .packageExtraButton {
        margin: 1rem 0.5rem;
        max-width: 100%;
    }

    /*.packageExtraButton:hover {
        background: none;
    }*/

    .packageExtraInput {
        width: initial;
        flex: 1;
    }

    .packageSummary {
        width: 100%;
        padding: 1rem;
        border-radius: 0;
    }

    .fixedSummary {
        width: 100%;
    }

    .pageBlend {
        touch-action: none;
    }

    .coverContactContent {
        font-size: 1.2rem;
    }

    .coverContactButtonAction, .coverContactButtonCopy {
        font-size: 1rem;
    }

    .heroCoverContainer {
        max-height: 12rem;
    }

    .heroCover {
        border-radius: 0;
    }

    .coverButtonsContainer {
        position: fixed;
        overflow: visible;
        bottom: 1rem;
        right: 1.5rem;
    }

    .coverContactButton {
        padding: 0.75rem 1.75rem 0.75rem 1.5rem;
        box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
    }

    .coverMoreButton {
        padding: 1.5rem 1.5rem;
        box-shadow: 0 0.25rem 0.5rem var(--box-shadow-color);
    }

    .coverMoreList {
        z-index: 2;
        position: fixed;
        top: auto;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 0;
        touch-action: none;
    }

    .coverMoreListButton {
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1.1rem;
    }

    #qrButton {
        margin-bottom: 2rem;
    }

    .coverMoreListButton .material-symbols-rounded {
        font-size: 1.4rem;
    }

    .shareProfileListItem {
        font-size: 1.1rem;
    }

    .heroContentContainer {
        display: grid;
        padding: 0rem;
    }

    .heroPictureContainer {
        max-width: 12rem;
        max-height: 12rem;
        margin-left: 0.5rem;
        transform: translateY(-8rem);
        margin-bottom: -8rem;
    }

    .heroPicture {
        width: calc(100% - 8px);
        border: 4px solid #fff;
        border-radius: 50%;
    }

    .heroAboutContainer {
        overflow-y: hidden;
        padding: 0;
    }

    .heroName {
        margin: 0;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        font-size: 1.8rem;
    }

    .heroProfession {
        margin-left: 0.5rem;
        font-size: 1.4rem;
        font-weight: 400;
    }

    .heroContactTagsContainer {
        margin: 1rem 0.5rem;
    }

    .heroContactTag {
        margin: 0;
    }

    .heroShortDescription {
        margin: 0 0.5rem 1rem 0.5rem;
        font-size: 1rem;
    }

    .navigationButtonsContainer {
        overflow-y: auto;
        max-width: 100%;
    }

    .navigationButtonsContainer::-webkit-scrollbar {
        display: none;
    }

    .navigationButton {
        white-space: nowrap;
    }

    .navigationButton--first {
        margin-left: 0.5rem;
    }

    .navigationButton--last {
        margin-right: 0.5rem;
    }

    .experienceMainContainer {
        display: block;
        max-width: 100%;
    }

    .experienceLeftBlock {
        padding: 1rem 0.5rem;
        margin-bottom: 1rem;
        border-radius: 0;
    }

    .leftAccordionContent {
        padding-left: 1rem;
    }

    .experienceRightBlock {
        padding: 1rem 0.5rem;
        border-radius: 0;
    }

    .rightAccordionHeader {
        grid-template-columns: 1fr 3rem;
    }

    .iconRightBlock {
        display: none;
    }

    .rightAccordionMainTitle {
        font-size: 1.1rem;
    }

    .rightAccordionContent {
        margin-right: 1rem;
        padding: 0 1rem;
    }

    .formMainContainer {
        box-sizing: border-box;
        width: 100%;
        border-radius: 0;
        margin: 0 0 2rem;
    }

    .inputMainContainer {
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .inputInnerContainer {
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }

    .inputTextForm input {
        width: 100%;
        box-sizing: border-box;
    }

    .inputPhoneForm {
        display: grid;
        grid-template-columns: 0.4fr 0.6fr 2.95rem;
        width: 100%;
        box-sizing: border-box;
    }

    .inputPhoneForm select {
        width: 100%;
    }

    .inputPhoneForm input {
        width: 100%;
        box-sizing: border-box;
    }

    .inputPhoneForm button {
        width: 100%;
    }

    .inputRemovableFormGrid {
        display: grid;
        grid-template-columns: 1fr 2.95rem;
        width: 100%;
        box-sizing: border-box;
    }

    .inputRemovableTextForm {
        width: 100%;
        box-sizing: border-box;
    }

    .inputRemovableTextForm input {
        width: 100%;
        box-sizing: border-box;
    }

    .inputTextFrameWrap {
        height: 8rem;
        width: 100%;
        box-sizing: border-box;
    }

    .nextFormSectionButtonContainer,
    .previousFormSectionButtonContainer {
        width: 100%;
        box-sizing: border-box;
    }

    .userFilesPreviewContainer {
        width: 100%;
        box-sizing: border-box;
    }

    .info {
        width: 100%;
    }

    .jobHistoryAddButton {
        width: 100%;
    }

    .inputDateForm {
        display: grid;
        grid-template-columns: 32vw 32vw auto;
        padding-right: 0;
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .inputDateForm input {
        width: 100%;
        box-sizing: border-box;
    }

    .inputDateButton {
        margin-left: -0.5rem;
        width: calc(100% + 0.5rem);
        box-sizing: border-box;
    }

    .inputDateButton--selected {
        margin-left: calc(-32vw - 0.5rem);
        width: calc(100% + 32vw + 0.5rem);
    }

    .tagsBox {
        width: 100%;
        box-sizing: border-box;
    }

    .tagsListContainer {
        width: 100%;
        box-sizing: border-box;
    }

    .tagsMobile {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tagInput {
        min-width: 100%;
        max-width: 100%;
    }

    .tagsFlex {
        gap: 0.5rem;
        display: flex;
        flex-wrap: nowrap;
        flex: 1;
        flex-grow: 1;
        width: 100%;
        box-sizing: border-box;
    }

    .tagRangeButton {
        padding: 0 !important;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
    }

    .tagInput--experienceFocus {
        max-width: calc(100% - 5.25rem);
        min-width: calc(100% - 5.25rem);
    }

    .tagInput--withNumbersFocus {
        display: block;
    }

    .tagInput--withLanguageFocus {
        display: block;
    }

    .tagRangeButtonContainer {
        flex-wrap: nowrap;
        flex-grow: 1;
        display: flex;
    }

    .tagRangeAddButton {
        display: flex;
        box-sizing: border-box;
    }

    .experienceAddTagButton {
        width: 5rem;
    }

    .inputTextForm {
        width: 100%;
    }

    .inputRemovableTextContainer {
        grid-template-columns: 1fr 2.95rem;
    }

    .inputTextFrameWrapRemovable {
        height: 8rem;
        width: 100%;
        box-sizing: border-box;
    }

    .experienceTab {
        width: 100%;
    }

    .inputRemovableTextFormLink input {
        width: 100%;
        box-sizing: border-box;
    }

    .formAddButtonsContainer button,
    .formAddButtonsContainer label,
    .previousFormSectionButton {
        font-size: 0.85rem;
        padding: 0.75rem 1.3rem 0.75rem 0.9rem;
        border-radius: 3rem;
    }

    .nextFormSectionButton,
    .skipFormSectionButton {
        font-size: 0.85rem;
        padding: 0.75rem 1rem 0.75rem 1.35rem;
        border-radius: 3rem;
    }

    .videoPlayer, .imageViewer {
        z-index: 5;
        width: 100%;
        aspect-ratio: 560 / 315;
        height: auto;
        border-radius: 0;
    }

    .mainSectionsContainerPDF {
        display: none;
    }

    .hidden {display: none;}
}