/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Variables */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
:root {
    --main-color: 0, 109, 255;
    --logo-orange-color: 254, 106, 40;
    --project-color: 49, 167, 116;
    --event-color: 128, 97, 222;
    --program-color: 126, 201, 255;
    --offer-color: 250, 106, 88;
    --challenge-color: 237, 159, 0;
    --white-color: 255, 255, 255;
    --black-color: 35, 35, 35;
    --success-color: 56, 191, 132;
    --warning-color: 255, 176, 13;
    --error-color: 255, 40, 56;
    --paleblue-color: 178, 209, 255;
    --lightblue-color: 240, 246, 255;
    --skyblue-color: 126, 201, 255;
    --palegreen-color: 209, 242, 228;
    --palered-color: 255, 207, 209;
    --text-main-color: 35, 35, 36;
    --text-sub-color: 89, 89, 89;
    --text-placeholder-color: 157, 157, 157;
    --text-inactive-color: 89, 89, 89;
    --border-color: 207, 208, 209;
    --border: 1px solid rgb(var(--border-color));
    --border-alternative-color: 231, 231, 231;
    --border-alternative: 1px solid rgb(var(--border-alternative-color));
    --background-main-color: 248, 247, 246;
    --background-sub-color: 255, 255, 255;
    --background-private-color: 36, 37, 38;
    --background-private-header-color: 64, 65, 70;
    --background-information-color: 247, 247, 247;
    --background-privacy-color: 231, 231, 231;
    --separator-color: 231, 231, 231;
    --shadow-color: 0, 0, 0;
    --box-shadow: 0px 4px 10px 0px rgba(var(--shadow-color), 0.07);
    --darker-box-shadow: 0px 4px 10px 0px rgba(var(--shadow-color), 0.27);
    --filter-color: rgba(0, 0, 0, 0.5);
    --gradientMask: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Dark Theme */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
[data-theme="dark"] {
    --main-color: 0, 109, 255;
    --logo-orange-color: 254, 106, 40;
    --project-color: 49, 167, 116;
    --event-color: 128, 97, 222;
    --program-color: 126, 201, 255;
    --offer-color: 250, 106, 88;
    --challenge-color: 237, 159, 0;
    --white-color: 255, 255, 255;
    --black-color: 35, 35, 35;
    --success-color: 56, 191, 132;
    --warning-color: 255, 176, 13;
    --error-color: 191, 56, 56;
    --paleblue-color: 178, 209, 255;
    --lightblue-color: 240, 246, 255;
    --skyblue-color: 126, 201, 255;
    --palegreen-color: 209, 242, 228;
    --palered-color: 255, 207, 209;
    --text-main-color: 255, 255, 255;
    --text-sub-color: 176, 179, 184;
    --text-placeholder-color: 157, 157, 157;
    --text-inactive-color: 89, 89, 89;
    --border-color: 120, 120, 120;
    --border: 1px solid rgb(var(--border-color));
    --border-alternative-color: 120, 120, 120;
    --border-alternative: 1px solid rgb(var(--border-alternative-color));
    --background-main-color: 41, 41, 41;
    --background-sub-color: 56, 56, 56;
    --background-private-color: 18, 18, 18;
    --background-private-header-color: 29, 29, 29;
    --background-information-color: 36, 36, 36;
    --background-privacy-color: 56, 56, 56;
    --separator-color: 231, 231, 231;
    --shadow-color: 0, 0, 0;
    --box-shadow: 0px 4px 10px 0px rgba(var(--shadow-color), 0.07);
    --darker-box-shadow: 0px 4px 10px 0px rgba(var(--shadow-color), 0.27);
    --filter-color: rgba(0, 0, 0, 0.5);
    --gradientMask: linear-gradient(180deg, rgba(56, 56, 56, 0) 0%, rgba(56, 56, 56, 1) 80%);
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Defaults */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    border: none;
    background: none;
    scroll-behavior: smooth;
    outline: none;
    /* ---------------------------- */
    /* Default font-size has to be removed, since the font-size seems to be different in a lot of site's locations */
    /* ---------------------------- */
    /* font-size: 14px; */
    /* color: rgb(var(--text-main-color)); */
    -webkit-tap-highlight-color: transparent;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Scroll Bar */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgb(var(--background-main-color));
}
::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Body */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
body {
    padding: 0px;
    background-color: rgb(var(--background-main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Titles */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.mainTitleBold {
    font-family: "Nunito Sans";
    font-weight: 800;
}
.mainTitleNormal {
    font-family: "Nunito Sans";
    font-weight: 500;
}
.alternativeTitleBold {
    font-family: "Open Sans";
    font-weight: 800;
}
.alternativeTitleNormal {
    font-family: "Open Sans";
    font-weight: 500;
}
.sectionTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 0px 0px 0px 0px;
    padding: 8px 8px 8px 8px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(var(--main-color));
    border-radius: 10px;
    background-color: rgba(var(--paleblue-color));
}
p, label, span, a, input, textarea, button, *::placeholder {
    font-family: "Open Sans";
    font-weight: 500;
    font-size: 14px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Actions */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
button, a, input[type="submit"] {
    cursor: pointer;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Icons */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
svg {
    overflow: visible;
}
i {
    transition: color 0.05s ease;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Buttons */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
button.callToAction,
a.callToAction,
button.callToActionAlternative,
a.callToActionAlternative,
button.callToActionLesser,
a.callToActionLesser,
button.seeMoreOrLess,
a.seeMoreOrLess {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    width: fit-content;
    padding: 8px 16px;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--white-color));
    border: var(--border);
    border-color: rgb(var(--main-color));
    border-width: 2px;
    border-radius: 40px;
    background-color: rgb(var(--main-color));
    transition: filter 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
button.callToAction.wide,
a.callToAction.wide,
button.callToActionAlternative.wide,
a.callToActionAlternative.wide,
button.callToActionLesser.wide,
a.callToActionLesser.wide,
button.seeMoreOrLess.wide,
a.seeMoreOrLess.wide {
    width: 100% !important;
    padding: 16px 32px;
    border-radius: 10px;
}
button.callToAction.redButton,
a.callToAction.redButton {
    border-color: rgb(var(--error-color));
    background-color: rgb(var(--error-color));
}
button.callToAction:hover,
a.callToAction:hover {
    color: rgb(var(--main-color));
    background-color: rgb(var(--background-sub-color));
}
button.callToAction.redButton:hover,
a.callToAction.redButton:hover {
    color: rgb(var(--error-color));
    background-color: rgb(var(--background-sub-color));
}
button.callToAction > svg,
a.callToAction > svg {
    fill: rgb(var(--white-color));
    transition: fill 0.3s ease;
}
button.callToAction:hover > svg,
a.callToAction:hover > svg {
    fill: rgb(var(--main-color));
}
button.callToActionAlternative,
a.callToActionAlternative {
    color: rgb(var(--main-color));
    border-color: transparent;
    background-color: transparent;
    transition: filter 0.3s ease, border-color 0.3s ease;
}
button.callToActionAlternative:hover,
a.callToActionAlternative:hover {
    border-color: rgb(var(--main-color));
}
button.callToActionAlternative > svg,
a.callToActionAlternative > svg {
    fill: rgb(var(--main-color));
}
button.callToActionLesser,
a.callToActionLesser {
    justify-content: flex-start;
    padding: 0px;
    color: rgb(var(--main-color));
    text-transform: initial;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: transparent;
    border: none;
    background: none;
    transition: text-decoration-color 0.3s ease;
}
button.callToActionLesser:hover,
a.callToActionLesser:hover {
    text-decoration-color: rgb(var(--main-color));
}
button.callToActionLesser > i,
a.callToActionLesser > i {
    color: rgb(var(--main-color));
}
button.seeMoreOrLess,
a.seeMoreOrLess {
    color: rgb(var(--text-inactive-color));
    border-color: rgb(var(--text-inactive-color));
    background-color: transparent;
    transition: color 0.3s ease, background-color 0.3s ease;
}
button.seeMoreOrLess:hover,
a.seeMoreOrLess:hover {
    color: rgb(var(--white-color));
    background-color: rgb(var(--text-inactive-color));
}
button.seeMoreOrLess > i,
a.seeMoreOrLess > i {
    color: rgb(var(--text-inactive-color));
}
button.seeMoreOrLess:hover > i,
a.seeMoreOrLess:hover > i {
    color: rgb(var(--white-color));
}
button.callToAction > i,
a.callToAction > i,
button.callToActionAlternative > i,
a.callToActionAlternative > i,
button.callToActionLesser > i,
a.callToActionLesser > i,
button.seeMoreOrLess > i,
a.seeMoreOrLess > i {
    margin: 0px 8px 0px 0px;
}
button.callToAction.disabled,
a.callToAction.disabled,
button.callToActionAlternative.disabled,
a.callToActionAlternative.disabled,
button.callToActionLesser.disabled,
a.callToActionLesser.disabled,
button.seeMoreOrLess.disabled,
a.seeMoreOrLess.disabled {
    filter: grayscale(1);
    pointer-events: none;
}
a.landingButton,
button.landingButton{
    color: #006dff;
    background-color: white;
    box-shadow: 5px 5px 10px gray;
    border-radius: 10px;
    width: 368px;
    transition: ease 0.5s;
}
a.landingButton span,
button.landingButton span{
font-weight: 700;
}
a.landingButton:hover,
button.landingButton:hover{
    box-shadow: 10px 10px 10px gray;
    transition: ease 0.5s;
}
a.landingButton span > svg path,
button.landingButton span > svg path{
fill: #006dff;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Backgrounds */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.cardBackground {
    flex: 1;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Utilities */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.removeShadow {
    box-shadow: none;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Masks */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.disabledMask {
    filter: grayscale(1);
    pointer-events: none;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Fields Informations & Actions */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.fieldInfo {
    width: fit-content;
    margin: 8px 0px 0px 0px;
    color: rgb(var(--text-placeholder-color));
    font-size: 11px;
}
.fieldLink {
    width: fit-content;
    margin: 8px 0px 0px 0px;
    padding: 0px;
    color: rgb(var(--main-color));
    font-size: 11px;
    text-decoration: underline;
    text-align: inherit;
    pointer-events: all;
}
.fieldText {
    width: fit-content;
    margin: 8px 0px 0px 0px;
    color: rgb(var(--text-inactive-color));
    font-size: 11px;
}
.fieldInfo.hidden,
.fieldLink.hidden,
.fieldText.hidden {
    visibility: hidden;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Input */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.forinovInput {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    position: relative;
    /* background-color: rgb(var(--background-sub-color)); */
    animation: fadeIn 0.3s ease;
}
.forinovInput.readOnly {
    filter: grayscale(1);
    pointer-events: none;
}
.forinovInput > input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    padding: 0px;
    border-bottom: var(--border);
    color: rgb(var(--text-main-color));
    transition: border-color 0.3s ease;
}
.forinovInput > input[type="file"] {
    display: none;
}
.formEditOption .forinovInput > input {
    border-bottom: var(--border);
}
.forinovInput > input::placeholder {
    color: rgb(var(--text-placeholder-color));
}
.forinovInput > input.filled,
.forinovInput > input:focus,
.forinovInput > input.focus {
    border-color: rgb(var(--main-color));
}
.forinovInput > input.error {
    border-color: rgb(var(--error-color));
}
.forinovInput.readOnly > input {
    border-color: rgb(var(--border-color));
}
.forinovInput > label {
    width: 100%;
    margin: 0px;
    position: absolute;
    top: 8px;
    color: rgb(var(--text-placeholder-color));
    text-align: left;
    pointer-events: none;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
}
.forinovInput > input[type="file"] + label {
    pointer-events: all;
}
.forinovInput > input:not([type="file"]).filled + label,
.forinovInput > input:not([type="file"]):focus + label,
.forinovInput > input:not([type="file"]).focus + label {
    top: -16px;
    color: rgb(var(--main-color));
    font-size: 12px;
    pointer-events: none;
    cursor: default;
}
.forinovInput > input:not([type="file"]).white + label {
    color: rgb(var(--white-color));
}
.forinovInput > input:not([type="file"]).error + label {
    top: -16px;
    color: rgb(var(--error-color));
    font-size: 12px;
}
.forinovInput.readOnly > input.filled,
.forinovInput.readOnly > input:focus,
.forinovInput.readOnly > input.focus,
.forinovInput.readOnly > input.error {
    color: rgb(var(--text-placeholder-color));
}
.forinovInput.readOnly > input.filled + label,
.forinovInput.readOnly > input:focus + label,
.forinovInput.readOnly > input.focus + label,
.forinovInput.readOnly > input.error + label {
    color: rgb(var(--text-placeholder-color));
}
.forinovInput > .showPassword {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 39px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    border: none;
    background: rgb(var(--background-sub-color));
}
.forinovInput > .showPassword > i {
    color: rgb(var(--text-placeholder-color));
}
.forinovInput > .passwordConditions {
    display: flex;
    flex-wrap: wrap;
}
.forinovInput > .passwordConditions > p {
    max-height: 30px;
    margin: 0px 16px 0px 0px;
    color: rgb(var(--text-placeholder-color));
    transition: color 0.3s ease;
}
.forinovInput > .passwordConditions > p > span {
    font-size: 32px;
    color: rgb(var(--text-placeholder-color));
    transition: color 0.3s ease;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Tags */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.tagsContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.forinovTag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    position: relative;
    background-color: rgb(var(--background-sub-color));
    animation: fadeIn 0.3s ease;
}
.forinovTag.readOnly {
    filter: grayscale(1);
    pointer-events: none;
}
.forinovTag > input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    padding: 0px;
    border-bottom: var(--border);
    color: rgb(var(--text-main-color));
    transition: border-color 0.3s ease;
}
.forinovTag > input[type="file"] {
    display: none;
}
.forinovTag > input {
    border-bottom: var(--border);
}
.forinovTag > input::placeholder {
    color: rgb(var(--text-placeholder-color));
}
.forinovTag > input.error {
    border-color: rgb(var(--error-color));
}
.forinovTag > input.filled,
.forinovTag > input:focus,
.forinovTag > input.focus {
    border-color: rgb(var(--main-color));
}
.forinovTag > label {
    width: 100%;
    margin: 0px;
    position: absolute;
    top: 8px;
    color: rgb(var(--text-placeholder-color));
    text-align: left;
    pointer-events: none;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1;
}
.forinovTag > input[type="file"] + label {
    pointer-events: all;
}
.forinovTag > input.error + label {
    top: -16px;
    color: rgb(var(--error-color));
    font-size: 12px;
}
.forinovTag > input:not([type="file"]).filled + label,
.forinovTag > input:not([type="file"]):focus + label,
.forinovTag > input:not([type="file"]).focus + label {
    top: -16px;
    color: rgb(var(--main-color));
    font-size: 12px;
    pointer-events: none;
    cursor: default;
}
.forinovTag > input:not([type="file"]).white + label {
    color: rgb(var(--white-color));
}
.tagsList {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    margin: 8px 0px 0px 0px;
}
.tagsList > .tag {
    display: flex;
    align-items: center;
    margin: 0px 8px 8px 0px;
    padding: 4px 8px;
    color: rgb(var(--main-color));
    border-radius: 3px;
    background-color: rgba(var(--lightblue-color));
}
.tagsList > .tag.main {
    font-size: 16px;
    background-color: rgba(var(--paleblue-color));
}
.tagsList > .tag > p {
    margin: 0px;
    color: rgb(var(--main-color));
}
.tagsList > .tag.main > p {
    font-size: 16px;
}
.tagsList > .tag > button {
    display: flex;
    margin: 0px 0px 0px 8px;
    padding: 0px;
}
.tagsList > .tag > button > svg {
    fill: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom SVG Colors */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.svgBlue span > svg path  {
    fill: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Select */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.forinovSelect {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.forinovSelect.readOnly {
    filter: grayscale(1);
    pointer-events: none;
}
.forinovSelect > select {
    display: none;
}
.forinovSelect > .forinovSelectContent {
    position: relative;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
}
.forinovSelect > .forinovSelectContent > div,
.forinovSelect > .forinovSelectContent > button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    height: fit-content;
    position: absolute;
}
.forinovSelect > .forinovSelectContent > div.placeholder {
    width: calc(100% - 30px);
}
.forinovSelect > .forinovSelectContent > button {
    justify-content: flex-end;
    border-bottom: var(--border);
    z-index: 10;
}
.forinovSelect.filled > .forinovSelectContent > button,
.forinovSelect.focus > .forinovSelectContent > button {
    border-color: rgb(var(--main-color));
}
.forinovSelect > .forinovSelectContent > div > p,
.forinovSelect > .forinovSelectContent > div > span,
.forinovSelect > .forinovSelectContent > button > span {
    position: absolute;
    margin: 0px;
    color: rgb(var(--text-placeholder-color));
    transition: all 0.3s ease;
}
.forinovSelect > .forinovSelectContent > button > i {
    position: absolute;
    letter-spacing: 0.5px;
    color: rgb(var(--text-placeholder-color));
    transition: all 0.3s ease;
}
.forinovSelect > .forinovSelectContent > div > p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px 50px 0px 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.forinovSelect > .forinovSelectContent > div > p > span {
    margin: 0px 8px 0px 0px;
    padding: 4px 8px;
    font-size: 14px;
    color: rgb(var(--main-color));
    border-radius: 3px;
    background-color: rgb(var(--lightblue-color));
}
.forinovSelect > .forinovSelectContent > div > span {
    max-width: calc(100% - 20px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.forinovSelect.filled > .forinovSelectContent > div > span,
.forinovSelect.focus > .forinovSelectContent > div > span {
    color: rgb(var(--main-color));
    font-size: 12px;
    transform: translateY(calc((-40px / 2) - 8px));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 150px;
    height: auto;
    max-height: 180px;
    padding: 10px;
    position: absolute;
    top: 100%;
    opacity: 0;
    pointer-events: none;
    border-radius: 0px 0px 6px 6px;
    border: var(--border);
    border-top: none;
    background-color: rgb(var(--background-sub-color));
    box-shadow: var(--box-shadow);
    overflow-x: hidden;
    overflow-y: auto;
    transition: opacity 0.3s ease;
    z-index: 20;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.show {
    opacity: 1;
    pointer-events: all;
    z-index: 100;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > input,
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div {
    width: 100%;
    min-height: 40px;
    height: 40px;
    appearance: none;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > input {
    padding: 0px 10px;
    color: rgb(var(--text-main-color));
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    overflow: hidden;
    border-bottom: var(--border);
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > input::placeholder {
    color: rgb(var(--text-placeholder-color));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div:not(.searchIcon) {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 8px 0px 0px 0px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div:not(.placeholderBlock):hover {
    background-color: rgb(var(--main-color));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div.selected::after {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px 10px 0px 0px;
    position: absolute;
    content: "•";
    font-size: 40px;
    color: rgb(var(--main-color));
    opacity: 0;
    transition: color 0.3s ease;
    animation: fadeIn 0.3s ease forwards;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div.selected:hover::after {
    color: rgb(var(--white-color));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div > p {
    margin: 0px;
    padding: 0px 40px 0px 10px;
    color: rgb(var(--text-placeholder-color));
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
    transition: color 0.3s ease;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div:not(.placeholderBlock):hover > p {
    color: rgb(var(--white-color));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div.noResults {
    pointer-events: none;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options > div.selected > p {
    color: rgb(var(--main-color));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.multi > input,
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.mono > input {
    padding: 0px 40px 0px 10px;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.multi > .searchIcon,
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.mono > .searchIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: none;
    z-index: 1;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.multi > .searchIcon > svg,
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.mono > .searchIcon > svg {
    fill: rgb(var(--text-placeholder-color));
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.multi > .selectAll {
    width: 100%;
    min-height: 40px;
    height: 40px;
    margin: 0px;
    padding: 0px 40px 0px 10px;
    cursor: pointer;
    color: rgb(var(--text-placeholder-color));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    border-bottom: var(--border);
    transition: color 0.3s ease;
    z-index: 1;
}
.forinovSelect > .forinovSelectContent > .optionsContainer > .options.multi > .selectAll:hover {
    color: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Textarea */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.forinovTextarea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    position: relative;
    background-color: rgb(var(--background-sub-color));
}
.forinovTextarea.readOnly {
    filter: grayscale(1);
    pointer-events: none;
}
.forinovTextarea > textarea {
    width: 100%;
    min-height: 40px;
    /* margin: 24px 0px 0px 0px; */
    padding: 0px;
    border-bottom: var(--border);
    color: rgb(var(--text-main-color));
    resize: none;
    transition: height, 0.3s ease, border-color 0.3s ease;
}
.forinovTextarea > textarea.extend {
    margin: 32px 0px 0px 0px;
    min-height: 140px;
}
.forinovTextarea > textarea.inputSize {
    min-height: 40px;
    height: 40px;
    /* padding: 10px 0px 0px 0px; */
}
.forinovTextarea > textarea::placeholder {
    color: rgb(var(--text-placeholder-color));
}
.forinovTextarea > textarea.error {
    border-color: rgb(var(--error-color));
}
.forinovTextarea > textarea.filled,
.forinovTextarea > textarea:focus,
.forinovTextarea > textarea.focus {
    border-color: rgb(var(--main-color));
}
.forinovTextarea > label {
    margin: 0px;
    position: absolute;
    top: 10px;
    color: rgb(var(--text-placeholder-color));
    pointer-events: all;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1;
}
.forinovTextarea.readOnly > label {
    pointer-events: none;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.forinovTextarea > label > span {
    display: flex;
    align-items: center;
    color: rgb(var(--text-placeholder-color));
}
.forinovTextarea > label > span > svg {
    margin: 0px 8px 0px 0px;
    fill: rgb(var(--text-placeholder-color));
}
.forinovTextarea > textarea.filled + label,
.forinovTextarea > textarea.filled + label *,
.forinovTextarea > textarea:focus + label,
.forinovTextarea > textarea:focus + label *,
.forinovTextarea > textarea:focus + label,
.forinovTextarea > textarea.focus + label * {
    /* width: calc(100% - 5px); */
    top: 0px;
    color: rgb(var(--main-color));
    font-size: 12px;
    pointer-events: none;
    cursor: default;
}
.forinovTextarea > textarea.filled + label > span > svg,
.forinovTextarea > textarea:focus + label > span > svg,
.forinovTextarea > textarea.focus + label > span > svg {
    fill: rgb(var(--main-color));
}
.forinovTextarea > textarea.white + label {
    color: rgb(var(--white-color));
}
.forinovTextarea > textarea.white + label > span > svg {
    fill: rgb(var(--white-color));
}
.forinovTextarea > textarea.error + label {
    top: 0px;
    color: rgb(var(--error-color));
    font-size: 12px;
}
.forinovTextarea > textarea.error + label svg {
    fill: rgb(var(--error-color));
}
.forinovTextarea > textarea.inputSize.error + label,
.forinovTextarea > textarea.inputSize.error + label > span {
    top: 0px;
    color: rgb(var(--error-color));
    font-size: 12px;
}
.forinovTextarea > textarea.inputSize.error + label > span > svg {
    fill: rgb(var(--error-color));
}
.forinovTextarea > textarea.inputSize.filled + label,
.forinovTextarea > textarea.inputSize.filled + label > span,
.forinovTextarea > textarea.inputSize:focus + label,
.forinovTextarea > textarea.inputSize:focus + label > span,
.forinovTextarea > textarea.inputSize.focus + label,
.forinovTextarea > textarea.inputSize.focus + label > span {
    /* width: calc(100% - 5px); */
    top: 0px;
    color: rgb(var(--main-color));
    pointer-events: none;
    cursor: default;
}
.forinovTextarea > textarea.inputSize.filled + label > span > svg,
.forinovTextarea > textarea.inputSize:focus + label > span > svg,
.forinovTextarea > textarea.inputSize.focus + label > span > svg {
    fill: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Radio & Checkbox */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.forinovCheckbox {
    position: relative;
    background-color: rgb(var(--background-sub-color));
}
.forinovRadio {
    background-color: rgb(var(--background-sub-color));
}
.forinovCheckbox.readOnly,
.forinovRadio.readOnly {
    filter: grayscale(1);
    pointer-events: none;
}
.forinovRadio > div:only-child,
.forinovCheckbox > div:only-child {
    margin: 0px 24px 0px 0px;
}
.forinovRadio > div,
.forinovCheckbox > div {
    display: flex;
    align-items: center;
}
.forinovCheckbox > .popup {
    display: flex;
    align-items: center;
    padding: 16px;
    position: absolute;
    top: calc(100% + 8px);
    background-color: rgb(var(--background-sub-color));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}
.forinovCheckbox:hover > .popup {
    opacity: 1;
}
.forinovCheckbox > .popup > div {
    width: 100%;
    height: 100%;
}
.forinovRadio > div > input,
.forinovCheckbox > div > input,
.forinovCheckbox > .popup > div > input {
    display: none;
}
.forinovRadio > div > .radio,
.forinovCheckbox > div > .checkbox,
.forinovCheckbox > .popup > div > .checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 16px;
    width: 16px;
    min-height: 16px;
    height: 16px;
    cursor: pointer;
    border: var(--border);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.forinovCheckbox > div > .checkbox,
.forinovCheckbox > .popup > div > .checkbox {
    border-radius: 2px;
    border-color: rgb(var(--main-color));
}
.forinovRadio > div > .radio,
.forinovCheckbox > div > .checkbox,
.forinovCheckbox > .popup > div > .checkbox {
    border-color: rgb(var(--border-color));
}
.forinovRadio > div > input:checked + .radio,
.forinovCheckbox > div > input:checked + .checkbox,
.forinovCheckbox > .popup > div > input:checked + .checkbox {
    border-color: rgb(var(--main-color));
    background-color: rgb(var(--main-color));
}
.forinovRadio > div > label,
.forinovCheckbox > div > label {
    margin: 0px 0px 0px 8px;
    position: initial;
    top: inherit;
    color: rgb(var(--text-placeholder-color));
    cursor: pointer;
}
.forinovCheckbox > .popup label {
    margin: 0px;
    white-space: nowrap;
    font-size: 14px;
    color: rgb(var(--text-main-color));
}
.forinovRadio > div > input:checked + .radio + label,
.forinovCheckbox > div > input:checked + .checkbox + label,
.forinovCheckbox > .popup > div > input:checked + .checkbox + label {
    color: rgb(var(--main-color));
}
.forinovCheckbox > div > .checkbox > span,
.forinovCheckbox > .popup > div > .checkbox > span {
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.forinovCheckbox > div > input:checked + .checkbox > span,
.forinovCheckbox > .popup > div > input:checked + .checkbox > span {
    color: rgb(var(--white-color));
    opacity: 1;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Switch */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.forinovSwitch {
    width: max-content;
    height: max-content;
}
.forinovSwitch > input {
    display: none;
}
.forinovSwitch > label {
    width: 40px;
    height: 20px;
    margin: 0px;
    padding: 2.5px;
    position: relative;
    top: inherit;
    pointer-events: all;
    cursor: pointer;
    border-radius: 100px;
    background-color: var(--input-color-border);
    transition: all 0.3s ease;
}
.forinovSwitch > label:before {
    width: 15px;
    height: 15px;
    position: absolute;
    left: 2.5px;
    content: "";
    border-radius: 50px;
    background-color: var(--input-color-placeholder);
    transition: all 0.3s ease;
}
.forinovSwitch > input:checked + label {
    background-color: var(--main-color);
}
.forinovSwitch > input:checked + label:before {
    left: calc(100% - (15px + 2.5px));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Date And Time */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.dateAndTime {
    display: flex;
    flex-direction: row !important;
}
.dateAndTime > .forinovInput:last-of-type {
    max-width: 100px;
    margin: 0px 0px 0px 8px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Labels ( Special Cases ) */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
section > p.forinovLabel {
    margin: 16px 0px 8px 0px;
    color: rgb(var(--main-color));
    font-size: 14px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Opportunity Card */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.opportunityContainer.hide {
    display: none;
}
.opportunityContainer > .opportunity {
    display: flex;
    flex-direction: column;
    min-height: 376px;
    height: 100%;
    background-color: rgb(var(--background-sub-color));
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.opportunityContainer > .opportunity:hover {
    transform: scale(1.02);
    box-shadow: var(--darker-box-shadow);
}
.opportunityContainer > .opportunity > .opportunityBackground {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 152px;
    height: 152px;
}
.opportunityContainer > .opportunity > .opportunityBackground[data-type="1"] {
    background-color: rgb(var(--project-color));
}
.opportunityContainer > .opportunity > .opportunityBackground[data-type="2"] {
    background-color: rgb(var(--program-color));
}
.opportunityContainer > .opportunity > .opportunityBackground[data-type="3"] {
    background-color: rgb(var(--challenge-color));
}
.opportunityContainer > .opportunity > .opportunityBackground[data-type="4"] {
    background-color: rgb(var(--event-color));
}
.opportunityContainer > .opportunity > .opportunityBackground[data-type="5"] {
    background-color: rgb(var(--offer-color));
}
.opportunityContainer > .opportunity > .opportunityBackground > img {
    width: 100%;
    height: calc(100% - 40px);
    object-fit: cover;
}
.opportunityContainer > .opportunity > .opportunityBackground > img:only-child {
    height: 100%;
}
.opportunityContainer > .opportunity > .opportunityBackground > .opportunityAdditionalInformations {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: auto 0px 0px 0px;
    color: rgb(var(--white-color));
    background-color: rgba(var(--background-private-color));
}
.opportunityContainer > .opportunity > div:not(.opportunityBackground) {
    height: 100%;
}
.opportunityContainer > .opportunity > div > .opportunityOwnerLogo > img {
    min-width: 64px;
    width: 64px;
    max-width: 64px;
    min-height: 64px;
    height: 64px;
    max-height: 64px;
    margin: 16px 0px 16px 16px;
    border: var(--border);
    border-color: rgb(var(--main-color));
    border-radius: 100%;
}
.opportunityContainer > .opportunity > div > .opportunityDetails {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .privacy {
    display: flex;
    align-items: center;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .privacy > svg {
    margin: 0px 8px 0px 0px;
    fill: rgb(var(--text-sub-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .privacy > p {
    margin: 0px;
    font-size: 12px;
    color: rgb(var(--text-sub-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .opportunityOwner {
    margin: 0px;
    color: rgb(var(--main-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > h3 {
    height: 100%;
    margin: 16px 0px;
    font-size: 18px;
    color: rgb(var(--text-main-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .type {
    width: fit-content;
    margin: 0px;
    padding: 4px 8px;
    font-size: 14px;
    color: rgb(var(--text-main-color));
    border-radius: 5px;
    background-color: rgb(var(--skyblue-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .type[data-type="1"] {
    color: rgb(var(--white-color));
    background-color: rgb(var(--project-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .type[data-type="2"] {
    color: rgb(var(--black-color));
    background-color: rgb(var(--program-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .type[data-type="3"] {
    color: rgb(var(--black-color));
    background-color: rgb(var(--challenge-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .type[data-type="4"] {
    color: rgb(var(--white-color));
    background-color: rgb(var(--event-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .type[data-type="5"] {
    color: rgb(var(--black-color));
    background-color: rgb(var(--offer-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .separator {
    width: 30%;
    min-height: 1px;
    height: 1px;
    max-height: 1px;
    margin: 16px 0px;
    background-color: rgb(var(--separator-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats {
    display: flex;
    flex-direction: column;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .applications {
    margin: 0px 0px 8px 0px;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .applications > p {
    margin: 0px;
    color: rgb(var(--main-color));
    font-weight: bold;
    font-size: 12px;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .applications > svg {
    fill: rgb(var(--main-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .participants > p {
    margin: 0px;
    color: rgb(var(--text-sub-color));
    font-size: 12px;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .participants > svg {
    fill: rgb(var(--text-sub-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > div > .count {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 24px;
    width: 24px;
    min-height: 24px;
    height: 24px;
    border: var(--border);
    border-color: rgb(var(--text-sub-color));
    border-radius: 100%;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > div > .count > p {
    margin: 0px;
    color: rgb(var(--text-sub-color));
    font-size: 11px;
    font-weight: bold;
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .applications > .count {
    border-color: rgb(var(--main-color));
}
.opportunityContainer > .opportunity > div > .opportunityDetails > .stats > .applications > .count > p {
    color: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Progress Buttons */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.progressButtons {
    display: flex;
    justify-content: space-between;
    margin: 16px 0px 0px 0px;
    padding: 16px;
    background-color: rgb(var(--background-sub-color));
    animation: fadeInAndPopFromBottom 0.3s ease forwards;
}
.progressButtons > #saveDraftButton {
    margin: 0px 16px 0px auto;
}
@media screen and (max-width: 500px) {
    .progressButtons {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .progressButtons > #saveDraftButton {
        margin: inherit;
    }
    .progressButtons > * {
        justify-content: center !important;
    }
    .progressButtons > * + * {
        margin: 16px 0px 0px 0px;
    }
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Form Edit */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.formEditorContainer {
    display: flex;
    flex-direction: column;
}
.formEdit {
    padding: 16px;
    background-color: rgba(var(--lightblue-color));
}
.formEdit div,
.formEdit section {
    padding: 0px;
}
.formEdit > div:last-child {
    display: flex;
    flex-direction: column;
    margin: 16px 0px 0px 0px;
}
.formEdit > div:empty {
    margin: 0px;
}
.formEdit > div > h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 0px 0px 0px 0px;
    padding: 8px 8px 8px 8px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(var(--main-color));
    border-radius: 10px;
    background-color: rgba(var(--paleblue-color));
}
.formEdit > div > section {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 112px;
    margin: 0px 0px 16px 0px;
    padding: 16px;
    border: var(--border-alternative);
    border-radius: 10px;
    background-color: rgb(var(--background-sub-color));
}
.formEdit > div > section:last-of-type {
    margin: 0px;
}
.formEdit > div > section.fieldContainer.remove {
    animation: fadeOut 0.3s ease forwards;
}
.formEdit > div > section > .fieldStep {
    margin: 0px 24px 0px 0px;
    font-weight: bold;
    color: rgb(var(--text-menu-color));
}
.formEdit > div > section > section {
    flex: 1;
}
.formEdit > div > section > p {
    margin: 0px 0px 26px 0px;
    color: rgb(var(--text-placeholder-color));
}
.formEdit > div > section > section > p {
    margin: 0px 0px 8px 0px;
    color: rgb(var(--text-placeholder-color));
}
.formEdit > div > section > section span.checkbox {
    border-color: rgb(var(--border-color));
}
.formEdit .editFormButtons {
    display: flex;
    height: 40px;
    margin: 0px 0px 0px 24px;
    animation: fadeIn 0.3s ease;
}
.formEdit .editFormButtons > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}
.formEdit .editFormButtons > button:not(.deleteField):hover {
    background-color: rgb(var(--paleblue-color));
}
.formEdit .editFormButtons > button.deleteField:hover {
    background-color: rgb(var(--palered-color));
}
.formEdit .editFormButtons > .incrementField > img {
    transform: rotate(180deg);
}
.createFormButton,
.editFormButton,
.addFieldButton {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 30px 10px 30px;
    border: var(--border);
    border-width: 2px;
    border-color: rgb(var(--success-color));
    border-radius: 100px;
    background-color: rgb(var(--success-color));
    transition: background-color 0.3s ease;
    animation: fadeIn 0.3s ease;
}
.createFormButton:hover,
.editFormButton:hover,
.addFieldButton:hover {
    background-color: transparent;
}
.createFormButton > span,
.editFormButton > span,
.addFieldButton > span {
    color: rgb(var(--white-color));
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
}
.createFormButton:hover > span,
.editFormButton:hover > span,
.addFieldButton:hover > span {
    color: rgb(var(--success-color));
}
.createFormButton > i,
.editFormButton > i,
.addFieldButton > i {
    margin: 0px 8px 0px 0px;
    font-size: 16px;
    color: rgb(var(--white-color));
    transition: color 0.3s ease;
}
.createFormButton:hover > i,
.editFormButton:hover > i,
.addFieldButton:hover > i {
    color: rgb(var(--success-color));
}
.formEdit > div > section:first-of-type > .editFormButtons > .incrementField,
.formEdit > div > section:last-of-type > .editFormButtons > .decrementField {
    filter: grayscale(1);
    pointer-events: none;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Remaining Time */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.remainingTime {
    display: flex;
    align-items: center;
}
.remainingTime > svg {
    margin: 0px 8px 0px 0px;
    fill: rgb(var(--text-sub-color));
}
.remainingTime > p {
    margin: 0px;
    color: rgb(var(--text-sub-color));
    font-size: 12px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Steps */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.stepsContainer {
    display: flex;
    flex-direction: column;
}
.stepsContainer.standalone {
    margin: 0px 0px 16px 0px;
    background-color: rgb(var(--background-sub-color));
}
.stepsContainer > .steps {
    display: flex;
    width: 100%;
    height: fit-content;
}
.stepsContainer > .steps > .step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 50px;
    margin: 0px 8px 0px 0px;
    /* cursor: pointer; */
}
.stepsContainer > .steps > .step:only-of-type,
.stepsContainer > .steps > .step:last-of-type {
    margin: 0px;
}
.stepsContainer > .steps > .step > p {
    margin: auto;
    color: rgb(var(--text-placeholder-color));
    transition: color 0.3s ease;
}
.stepsContainer > .steps > .step.active > p {
    color: rgb(var(--main-color));
}
.stepsContainer > .steps > .step > .progress {
    display: flex;
    width: 100%;
    height: 2px;
    background-color: transparent;
}
.stepsContainer > .steps > .step > .progress > .bar {
    flex: 1;
    margin: 0px 8px 0px 0px;
    background-color: rgb(var(--border-color));
    transition: background-color 0.3s ease;
}
.stepsContainer > .steps > .step > .progress > .bar:last-of-type {
    margin: 0px;
}
.stepsContainer > .steps > .step.active > .progress > .bar.active {
    background-color: rgb(var(--main-color));
}
.stepsContainer > .ghost {
    margin: 8px 0px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Search Bar */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.searchBarContent {
    padding: 16px;
    position: relative;
}
.searchBarContent > input {
    width: 100%;
    height: 40px;
    padding: 0px 56px 0px 16px;
    text-overflow: ellipsis;
    color: rgb(var(--text-main-color));
    border: var(--border);
    border-radius: 20px;
}
.searchBarContent > input::placeholder {
    color: rgb(var(--text-placeholder-color));
}
.searchBarContent > .activityTrackingSearchButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    border: var(--border);
    border-color: rgb(var(--main-color));
    border-radius: 50%;
    background-color: rgb(var(--main-color));
    transition: background-color 0.3s ease;
}
.searchBarContent > .activityTrackingSearchButton:hover {
    background-color: rgb(var(--background-sub-color));
}
.searchBarContent > .activityTrackingSearchButton > i {
    color: rgb(var(--white-color));
}
.searchBarContent > .activityTrackingSearchButton:hover > i {
    color: rgb(var(--main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* News */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.news > .newsContainer {
    padding: 16px;
    position: relative;
    background-color: rgb(var(--background-private-color));
}
.news > .newsContainer > h2 {
    margin: 0px 0px 8px 0px;
    font-size: 26px;
    color: rgb(var(--white-color));
}
.news > .newsContainer > p {
    margin: 0px;
    font-size: 12px;
    color: rgb(var(--white-color));
}
.news > .newsContainer > .widgets {
    display: flex;
    flex-wrap: wrap;
    margin: 16px 0px 0px 0px;
}
.news > .newsContainer > .widgets > .widget {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    min-width: 152px;
    width: 152px;
    max-width: 152px;
    min-height: 128px;
    height: 128px;
    max-height: 128px;
    margin: 0px 16px 0px 0px;
    padding: 16px;
    border-radius: 10px;
    background-color: rgb(var(--background-sub-color));
}
.news > .newsContainer > .widgets > .widget > p {
    margin: 0px;
}
.news > .newsContainer > .widgets > .widget > .stat {
    font-size: 32px;
    color: rgb(var(--text-main-color));
}
.news > .newsContainer > .widgets > .widget > .name {
    color: rgb(var(--text-main-color));
}
.news > .newsContainer > .widgets > .widget:last-of-type {
    margin: 0px;
}
.news > .newsContainer > .widgets > .addWidget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 152px;
    width: 152px;
    max-width: 152px;
    min-height: 128px;
    height: 128px;
    max-height: 128px;
    border-radius: 10px;
}
.news > .newsContainer > .widgets > .addWidget {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='10' ry='10' stroke='%23FFFFFF' stroke-width='1' stroke-dasharray='5' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.news > .newsContainer > .widgets > .addWidget > svg {
    fill: rgb(var(--white-color));
}
.news > .newsContainer > .widgets > .addWidget > p {
    margin: 0px;
    color: rgb(var(--white-color));
}
.news > .newsContainer > .settings {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    position: absolute;
    top: 16px;
    right: 16px;
    border-radius: 100%;
}
.news > .newsContainer > .settings > svg {
    fill: rgb(var(--white-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* External Calendars */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.externalCalendars {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0px auto 0px auto;
}
.externalCalendars > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.externalCalendars > a > p {
    margin: 0px;
    color: rgb(var(--text-placeholder-color));
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s ease;
}
.externalCalendars > a:hover > p {
    text-decoration-color: rgb(var(--text-placeholder-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Notifications */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.notification {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 16px;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 300px;
    background-color: rgb(var(--background-sub-color));
    box-shadow: var(--box-shadow);
    animation: fadeInNotificationAndPopFromBottom 0.3s ease;
    z-index: 3000;
}
.notification > i {
    margin: 0px 16px 0px 0px;
    transform: scale(1.3);
    color: rgb(var(--main-color));
}
.notification.error > i {
    color: rgb(var(--error-color));
}
.notification.success > i {
    color: rgb(var(--success-color));
}
.notification.hide {
    animation: fadeOutNotificationAndUnpopFromTop 0.3s ease forwards;
}
.notification > p {
    margin: 0px;
    color: rgb(var(--main-color));
}
.notification.error > p {
    color: rgb(var(--error-color));
}
.notification.success > p {
    color: rgb(var(--success-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Company Preview Card */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.previewCard {
    display: flex;
    max-width: 450px;
    padding: 16px;
}
.previewCard > .companyLogo > img {
    min-width: 64px;
    width: 64px;
    max-width: 64px;
    min-height: 64px;
    height: 64px;
    max-height: 64px;
    margin: 0px 16px 0px 0px;
    border: 2px solid rgb(var(--logo-orange-color));
    border-radius: 100%;
}
.previewCard > .previewCardContent {
    display: flex;
    flex-direction: column;
}
.previewCard > .previewCardContent > h3 {
    margin: 0px 0px 8px 0px;
    font-size: 19px;
    color: rgb(var(--text-main-color));
}
.previewCard > .previewCardContent > .companyTags > .tagsList {
    margin: 0px;
}
.previewCard > .previewCardContent > .companyDescription {
    margin: 0px;
    color: rgb(var(--text-main-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Captcha */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#recaptcha {
    height: fit-content;
    padding: 16px;
    border: var(--border);
    border-color: transparent;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
#recaptcha.error {
    border-color: rgb(var(--error-color));
}
#recaptcha #g-recaptcha-response {
    opacity: 0;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Redirects Links Menu */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#redirectsAsNavigationContainer {
    height: calc(35px + (16px * 2));
    padding: 16px;
    position: fixed;
    top: 96px;
    left: 16px;
    background-color: rgb(var(--background-sub-color));
    overflow: hidden;
    transition: height 0.3s ease;
}
#redirectsAsNavigationContainer.open {
    height: calc(100% - (96px + 16px));
}
#redirectsAsNavigationContainer > #redirectsAsNavigationButton {
    display: flex;
    align-items: center;
    width: calc(100% - (16px * 2));
    height: 35px;
    padding: 8px;
    position: absolute;
    color: rgb(var(--main-color));
    font-size: 17px;
    border-radius: 5px;
    background-color: rgb(var(--lightblue-color));
    transition: color 0.3s ease, background-color 0.3s ease;
}
#redirectsAsNavigationContainer > #redirectsAsNavigationButton:hover {
    color: rgb(var(--white-color));
    background-color: rgb(var(--main-color));
}
#redirectsAsNavigationContainer > * + * {
    margin: 16px 0px 0px 0px;
}
#redirectsAsNavigationContainer > div:first-of-type {
    margin: calc(35px + 16px) 0px 0px 0px;
}
#redirectsAsNavigationContainer > div {
    width: 100%;
    height: calc((100% / 3) - (35px / 3) - 16px);
    overflow: hidden;
}
#redirectsAsNavigationContainer > div > h3 {
    display: flex;
    align-items: center;
    width: 100%;
    height: 35px;
    margin: 0px 0px 8px 0px;
    padding: 8px;
    color: rgb(var(--main-color));
    border-radius: 5px;
    background-color: rgb(var(--lightblue-color));
}
#redirectsAsNavigationContainer > div > ul {
    max-height: calc(100% - (35px + 8px));
    margin: 0px;
    padding: 0px;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
}
#redirectsAsNavigationContainer > div > ul > li > a {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0px 8px 0px 0px;
    font-size: 14px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Label With Hover Informations */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.labelHoverInfo {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0px 0px 8px 0px;
    position: relative;
}
.labelHoverInfo > label {
    margin: 0px 8px 0px 0px;
    color: rgb(var(--main-color));
    font-size: 12px;
}
.labelHoverInfo > i {
    color: rgb(var(--text-placeholder-color));
}
.labelHoverInfo > .infoTextHover {
    display: flex;
    flex-direction: column;
    width: fit-content;
    padding: 8px;
    position: absolute;
    left: calc(100% + 8px);
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    background-color: rgb(var(--background-sub-color));
    box-shadow: var(--box-shadow);
    z-index: 10;
    transition: opacity 0.3s ease;
}
.labelHoverInfo > .infoTextHover::before {
    width: 16px;
    height: 16px;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(-8px * 2);
    border: 8px solid rgb(var(--main-color));
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    box-shadow: var(--box-shadow);
}
@media screen and (max-width: 800px) {
    .labelHoverInfo > .infoTextHover {
        left: 0px;
        bottom: calc(100% + 8px);
    }
    .labelHoverInfo > .infoTextHover::before {
        top: inherit;
        transform: inherit;
        bottom: calc(-8px * 2);
        left: calc(8px * 2);
        border: 8px solid rgb(var(--main-color));
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}
.labelHoverInfo > .infoTextHover > p {
    margin: 0px 8px 0px 0px;
    color: rgb(var(--main-color));
    font-size: 12px;
    white-space: nowrap;
}
.labelHoverInfo > i:hover + .infoTextHover {
    opacity: 1;   
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Modals */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.modal [class*="col-"] {
    padding: 0px;
}
.modal {
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding: 0px 10px 0px 10px !important;
    background-color: var(--filter-color);
}
@media screen and (max-width: 550px) {
    .modal {
        padding: 0px !important;
    }
}
.modal.custom.show {
    display: flex !important;
}
.modal.custom > .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: inherit;
    width: inherit;
    max-width: inherit;
    min-height: inherit;
    height: inherit;
    max-height: inherit;
    margin: auto;
}
.modal.custom > .modal-dialog > .modal-content {
    min-width: 650px;
    width: fit-content;
    max-width: 864px;
    padding: 16px;
    background-color: rgb(var(--background-sub-color));
}
@media screen and (max-width: 920px) {
    .modal.custom > .modal-dialog > .modal-content {
        min-width: calc(100% - (16px * 2));
    }
}
@media screen and (max-width: 480px) {
    .modal.custom > .modal-dialog > .modal-content {
        min-width: inherit;
        width: 100%;
        height: 100%;
        padding: 0px;
        border-radius: inherit;
    }
}
.modal.custom > .modal-dialog > .modal-content > .modal-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border: none;
}
.modal.custom > .modal-dialog > .modal-content > .modal-header > h2 {
    margin: 0px;
    font-size: 16px;
    color: rgb(var(--text-main-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-header > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin: auto 0px auto auto;
    padding: inherit;
    opacity: 1;
    border-radius: calc(30px / 2);
    transition: background-color 0.3s ease;
}
.modal.custom > .modal-dialog > .modal-content > .modal-header > button:hover {
    background-color: rgb(var(--paleblue-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-header > button > i {
    font-size: 20px;
    color: rgb(var(--main-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-separator {
    width: 100%;
    height: 2px;
    margin: 0px 0px 24px 0px;
    background-color: rgb(var(--border-alternative-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-body {
    padding: 0px 16px 16px 16px;
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > i {
    font-size: 100px;
    color: rgb(var(--main-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > h3 {
    margin: 16px auto 0px 0px;
    font-size: 32px;
    color: rgb(var(--main-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > p {
    margin: 8px auto 0px 0px;
    font-size: 14px;
    color: rgb(var(--text-inactive-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-paragraph + .modal-paragraph {
    margin: 16px 0px 0px 0px;
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-paragraph > h6,
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-paragraph > p {
    font-size: 16px;
    color: rgb(var(--text-inactive-color));
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-paragraph > h6 {
    margin: 0px;
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-paragraph > * + * {
    margin: 16px 0px 0px 0px;
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit,
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons {
    display: flex;
    flex-direction: column;
    margin: 80px 0px 0px 0px;
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit > * + *,
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons > * + * {
    margin: 16px 0px 0px 0px;
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit > div,
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons > div {
    display: flex;
    align-items: center;
}
@media screen and (max-width: 380px) {
    .modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit > div,
    .modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons > div {
        flex-direction: column;
        align-items: flex-start;
    }
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit > div > * + *,
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons > div > * + * {
    margin: 0px 0px 0px 16px;
}
@media screen and (max-width: 380px) {
    .modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit > div > * + *,
    .modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons > div > * + * {
        margin: 16px 0px 0px 0px;
    }
}
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-submit > div > a > i,
.modal.custom > .modal-dialog > .modal-content > .modal-body > .modal-buttons > div > a > i {
    font-size: 16px;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Custom Forms */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.customForm {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.customForm > .formName,
.customForm > .opportunityPreview {
    margin: 16px;
    color: rgb(var(--text-inactive-color));
}
.customForm > div:not(.modal, .formEditorContainer) {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0px 0px 16px 0px;
    padding: 16px;
    position: relative;
    background-color: rgb(var(--lightblue-color));
}
.customForm > div:last-of-type:not(.modal, .formEditorContainer) {
    margin: 0px;
}
.customForm > div.default {
    background-color: rgb(var(--background-sub-color));
}
.customForm > div.default > .forinovCheckbox {
    background-color: transparent;
}
.customForm > div.default > .forinovCheckbox > div {
    margin: 0px;
}
.customForm > div.private {
    background-color: rgb(var(--background-private-color));
}
.customForm > div.banner {
    display: flex;
    flex-direction: column;
    padding: 0px;
    background-color: rgb(var(--background-sub-color));
    overflow: hidden;
}
.customForm > div > h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    margin: 0px 0px 16px 0px;
    padding: 8px 8px 8px 8px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(var(--main-color));
    border-radius: 10px;
    background-color: rgba(var(--paleblue-color));
}
.customForm > div > h4 > i {
    margin: 0px 8px 0px 0px;
    color: rgb(var(--main-color));
}
.customForm > div > .information {
    margin: 8px 0px 0px 0px;
    font-size: 11px;
    color: rgb(var(--text-inactive-color));
}
.customForm > div:not(.modal) > .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0px 0px 16px 0px;
}
.customForm > div:not(.modal) > .headerColumn {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0px 0px 16px 0px;
}
.customForm > div:not(.modal) > .header > h2,
.customForm > div:not(.modal) > .headerColumn > h2 {
    margin: 0px;
    color: rgb(var(--text-sub-color));
    font-size: 16px;
}
.customForm > div.private > .header > h2 {
    color: rgb(var(--white-color));
}
.customForm > div:not(.modal) > .header > a {
    display: flex;
    align-items: center;
}
.customForm > div:not(.modal) > .header > a > span {
    color: rgb(var(--main-color));
    text-decoration: underline;
    text-decoration-color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .header > a > i {
    margin: 0px 8px 0px 0px;
    color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .buttonContainer {
    display: flex;
    flex-direction: column;
    width: calc((100% / 2) - 8px);
}
.customForm > div:not(.modal) > button:not(.createFormButton, .addFieldButton),
.customForm > div:not(.modal) > .radioButton,
.customForm > div:not(.modal) > .buttonContainer > .radioButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc((100% / 2) - 8px);
    height: 112px;
    padding: 16px;
    font-size: 16px;
    color: rgb(var(--text-main-color));
    cursor: pointer;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.customForm > div:not(.modal) > button > svg {
    margin: 0px 8px 0px 0px;
    fill: rgb(var(--text-main-color));
}
.customForm > div:not(.modal) > .radioButton:not(.externalChoice, .language) {
    margin: 0px 0px 16px 0px;
}
.customForm > div:not(.modal) > .radioButton:last-of-type {
    margin: 0px;
}
.customForm > div:not(.modal) > .radioButton,
.customForm > div:not(.modal) > .buttonContainer > .radioButton {
    padding: 0px;
}
.customForm > div:not(.modal) > .buttonContainer > .radioButton {
    width: 100%;
}
@media screen and (max-width: 1100px) {
    .customForm > div:not(.modal) {
        flex-direction: column;
        margin: 0px 0px 16px 0px;
    }
    .customForm > div:not(.modal):last-of-type {
        margin: 0px;
    }
    .customForm > div:not(.modal) > button:not(.createFormButton, .addFieldButton),
    .customForm > div:not(.modal) > .radioButton,
    .customForm > div:not(.modal) > .buttonContainer {
        width: 100%;
    }
    .customForm > div:not(.modal) > .externalChoice:first-of-type,
    .customForm > div:not(.modal) > .language:nth-of-type(2),
    .customForm > div:not(.modal) > .buttonContainer {
        margin: 0px 0px 16px 0px;
    }
    .customForm > div:not(.modal) > .buttonContainer:last-of-type {
        margin: 0px;
    }
}
.customForm > div:not(.modal) > button:not(.createFormButton, .addFieldButton):hover,
.customForm > div:not(.modal) > .radioButton:hover,
.customForm > div:not(.modal) > .buttonContainer > .radioButton:hover {
    box-shadow: var(--darker-box-shadow);
}
.customForm > div:not(.modal) > .radioButton > label,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 16px;
    font-size: 16px;
    color: rgb(var(--text-main-color));
    text-align: center;
    cursor: pointer;
    background-color: rgb(var(--background-sub-color));
    transition: background-color 0.3s ease, color 0.3s ease;
}
.customForm > div:not(.modal) > .radioButton > input[type="radio"]:checked + label,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > input[type="radio"]:checked + label {
    background-color: rgb(var(--paleblue-color));
}
.customForm > div:not(.modal) > .radioButton > label > .title,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > label > .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: rgb(var(--text-main-color));
}
.customForm > div:not(.modal) > .radioButton > label > .title > i,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > label > .title > i {
    color: rgb(var(--text-main-color));
}
.customForm > div:not(.modal) > .radioButton > input[type="radio"]:checked + label > .title,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > input[type="radio"]:checked + label > .title {
    font-weight: bold;
    color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .radioButton > label > .title > i,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > label > .title > i {
    margin: 0px 8px 0px 0px;
    filter: grayscale(1);
}
.customForm > div:not(.modal) > .radioButton > input[type="radio"]:checked + label > .title > i,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > input[type="radio"]:checked + label > .title > i {
    filter: grayscale(0);
    color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .radioButton > label > span:not(.title),
.customForm > div:not(.modal) > .buttonContainer > .radioButton > label > span:not(.title) {
    font-size: 14px;
    color: rgb(var(--text-placeholder-color));
}
.customForm > div:not(.modal) > .radioButton > input[type="radio"]:checked + label > span:not(.title),
.customForm > div:not(.modal) > .buttonContainer > .radioButton > input[type="radio"]:checked + label > span:not(.title) {
    color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .radioButton > label > a,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > label > a {
    color: rgb(var(--main-color));
    text-decoration: underline;
    text-decoration-color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .radioButton > input,
.customForm > div:not(.modal) > .buttonContainer > .radioButton > input {
    display: none;
}
.customForm > div:not(.modal) > .text,
.customForm > div:not(.modal) > .buttonContainer > .text {
    width: 100%;
    margin: 8px 0px 0px 0px;
}
.customForm > div:not(.modal) > .text > p,
.customForm > div:not(.modal) > .buttonContainer > .text > p {
    margin: 0px;
    color: rgb(var(--text-inactive-color));
}
.customForm > div:not(.modal) > .andOrSeparator {
    width: 55px;
    margin: auto 0px;
    color: rgb(var(--text-inactive-color));
}
.customForm > div:not(.modal) > .containerFull,
.customForm > div:not(.modal) > .containerHalf {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 112px;
    padding: 16px;
    border: var(--border-alternative);
    border-radius: 10px;
    background-color: rgb(var(--background-sub-color));
}
.customForm > div:not(.modal) > .containerFull.noStyle,
.customForm > div:not(.modal) > .containerHalf.noStyle {
    padding: 0px;
    border: none;
    background: none;
}
.customForm > div:not(.modal) > .containerFull {
    margin: 0px 0px 16px 0px;
}
.customForm > div:not(.modal) > .containerFull:last-of-type {
    margin: 0px;
}
.customForm > div:not(.modal) > .containerFull.defaultQuestions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.customForm > div:not(.modal) > .containerFull.defaultQuestions > p {
    margin: 0px;
    color: rgb(var(--text-main-color));
}
.customForm > div:not(.modal) > .containerHalf {
    width: calc((100% / 2) - 8px);
    height: fit-content;
    margin: 0px 0px 16px 0px;
}
.customForm > div:not(.modal) > .containerHalf.splittedByWord {
    width: calc((100% / 2) - 8px - 55px);
}
@media screen and (max-width: 1100px) {
    .customForm > div:not(.modal) > .containerHalf,
    .customForm > div:not(.modal) > .containerHalf.splittedByWord {
        width: 100%;
    }
    .customForm > div:not(.modal) > .andOrSeparator {
        margin: 16px auto;
    }
}
.customForm > div:not(.modal) > .containerFull.noStyle > input {
    display: none;
}
.customForm > div:not(.modal) > .containerFull.noStyle > label[for="opportunityAttachments"]  {
    width: 100%;
    min-height: 64px;
    height: 64px;
    margin: 16px 0px 0px 0px;
    padding: 16px;
    color: rgb(var(--text-main-color));
    text-decoration: underline;
    text-decoration-color: transparent;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    background-color: rgb(var(--background-sub-color));
    transition: text-decoration-color 0.3s ease, box-shadow 0.3s ease;
}
.customForm > div:not(.modal) > .containerFull.noStyle > label[for="opportunityAttachments"]:hover {
    text-decoration-color: rgb(var(--text-main-color));
    box-shadow: var(--darker-box-shadow);
}
.customForm > div:not(.modal) > .containerFull.noStyle > label[for="opportunityAttachments"] > i {
    margin: 0px 8px 0px 0px;
    font-size: 16px;
    color: rgb(var(--text-main-color));
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList {
    display: flex;
    flex-direction: column;
    margin: 32px 0px 0px 0px;
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList > .filePreview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 0px 8px 0px;
    padding: 8px 8px 8px 16px;
    border-radius: 10px;
    background-color: rgb(var(--background-sub-color));
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList > .filePreview:last-of-type {
    margin: 0px;
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList > .filePreview > .fileName {
    margin: 0px;
    color: rgb(var(--main-color));
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList > .filePreview > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList > .filePreview > button:hover {
    background-color: rgb(var(--palered-color));
}
.customForm > div:not(.modal) > .containerFull.noStyle > .attachmentsPreviewList > .filePreview > button > svg {
    fill: rgb(var(--error-color));
}
.customForm > div.banner > .background {
    width: 100%;
    height: 480px;
    position: relative;
}
.customForm > div.banner > .background > .backgroundPlaceholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--palegreen-color));
}
.customForm > div.banner > .background > .backgroundPlaceholder > input {
    display: none;
}
.customForm > div.banner > .background > .backgroundPlaceholder > label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    cursor: pointer;
    border-radius: 100%;
    background-color: rgb(var(--background-sub-color));
}
.customForm > div.banner > .background > .backgroundPlaceholder > label > i {
    font-size: 30px;
    color: rgb(var(--success-color));
}
.customForm > div.banner > .background > .backgroundPlaceholder > p,
.customForm > div.banner > .background > .backgroundPlaceholder > p > span {
    margin: 0px;
    text-align: center;
    font-size: 21px;
    color: rgb(var(--success-color));
}
.customForm > div.banner > .background > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.customForm > div.banner > .background > .forinovInput {
    width: 190px;
    position: absolute;
    bottom: 16px;
    right: 16px;
    border: var(--border);
    border-width: 2px;
    border-color: rgb(var(--success-color));
    border-radius: 10px;
    background-color: rgb(var(--success-color));
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.customForm > div.banner > .background > .forinovInput:hover {
    background-color: rgb(var(--background-sub-color));
}
.customForm > div.banner > .background > .forinovInput label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px 0px;
    top: inherit;
    position: initial;
    font-weight: 600;
    font-size: 19px;
    color: rgb(var(--white-color));
    transition: 0.3s ease;
}
.customForm > div.banner > .background > .forinovInput:hover label {
    color: rgb(var(--success-color));
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Loader */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.forinovLoader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(100% + (16px * 2));
    min-height: 500px;
    height: calc(100% + (16px * 2));
    position: absolute;
    top: -16px;
    left: -16px;
    border-radius: 10px;
    background-color: rgb(var(--background-main-color));
    z-index: 100;
}
.forinovLoader > h1 {
    font-size: 36px;
    color: rgb(var(--text-main-color));
}
.forinovLoader.hide {
    animation: fadeOut 0.3s ease forwards;
}
@keyframes ldio-if8hy44434 {
    0% { transform: translate(12px,80px) scale(0); }
    25% { transform: translate(12px,80px) scale(0); }
    50% { transform: translate(12px,80px) scale(1); }
    75% { transform: translate(80px,80px) scale(1); }
    100% { transform: translate(148px,80px) scale(1); }
}
 @keyframes ldio-if8hy44434-r {
    0% { transform: translate(148px,80px) scale(1); }
    100% { transform: translate(148px,80px) scale(0); }
}
 @keyframes ldio-if8hy44434-c {
    0% { background: rgb(var(--main-color)) }
    25% { background: #FFFFFF }
    50% { background: #64D31A }
    75% { background: #FF6927 }
    100% { background: rgb(var(--main-color)) }
}
.ldio-if8hy44434 div {
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 50%;
    background: rgb(var(--main-color));
    transform: translate(80px, 80px) scale(1);
    animation: ldio-if8hy44434 1s infinite cubic-bezier(0, 0.5, 0.5, 1);
}
.ldio-if8hy44434 div:nth-child(1) {
    background: #FF6927;
    transform: translate(148px, 80px) scale(1);
    animation: ldio-if8hy44434-r 0.3s infinite cubic-bezier(0, 0.5, 0.5, 1), ldio-if8hy44434-c 1s infinite step-start;
}
.ldio-if8hy44434 div:nth-child(2) {
    animation-delay: -0.3s;
    background: rgb(var(--main-color));
}
.ldio-if8hy44434 div:nth-child(3) {
    animation-delay: -0.5s;
    background: #FF6927;
}
.ldio-if8hy44434 div:nth-child(4) {
    animation-delay: -0.75s;
    background: #64D31A;
}
.ldio-if8hy44434 div:nth-child(5) {
    animation-delay: -1s;
    background: #FFFFFF;
}
.loadingio-spinner-ellipsis-dao1hy7g857 {
    display: inline-block;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: none;
}
.ldio-if8hy44434 {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    transform-origin: 0 0;
    backface-visibility: hidden;
}
.ldio-if8hy44434 div {
    box-sizing: content-box;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Hidding Bootstrap's Carousel's Buttons Texts */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.visually-hidden {
    display: none;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Removing Top Bar Bottom's Margin */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#container-TopBar {
    margin-bottom: 0px !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Removing Top Bar Bottom's Border */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#container-TopBar > .navbar > #TopBar {
    border: none !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Scaling And Adjusting Percantage Text ( Left Bar ) Position And Size */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* #percent_text {
    transform: scale(0.6) translateX(12px) translateY(14px);
} */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Messaging's Textarea */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#chat_form form {
    width: 100%;
}
#chat_form form > div {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 40px;
}
#chat_form form > div * {
    margin: 0px !important;
}
#chat_form form > div > .form-group {
    flex: 1;
}
#chat_form form > div > .input-group-append {
    width: 40px;
}
#chat_form form > div > .input-group-append > span,
#chat_form form > div > .input-group-append > span > button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0px !important;
}
#chat_form form > div > .input-group-append > span > button > span {
    padding: 0px !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Profile's Card Buttons */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.profil-background-button button:hover i {
    color: rgb(var(--main-color)) !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Profile's Left Section's Card */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.profil-startup-menu,
.profil-startup-menu > div,
.profil-startup-menu > div > div {
    min-width: inherit !important;
    width: 100% !important;
    max-width: inherit !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Wallet's Folder's Edit Button Popup */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.table-responsive {
    overflow: visible;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Top Bar's Search */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#searchBar {
    display: flex;
    flex-wrap: nowrap;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Top Bar's Search Popup */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#dropdownCustomSearch {
    top: 24px !important;
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Forcing Sidebars Width Transition */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* .LeftBar,
.RightBar {
    width: 70px;
    overflow: hidden;
    background-color: rgb(var(--background-main-color));
    transition: min-width 0.3s ease, width 0.3s ease;
}
.LeftBar:hover,
.RightBar:hover {
    width: 180px;
} */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* FIX - Forcing Sidebars Text And SVG Color And Hover Effects */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* .LeftBar #logo-home {
    min-height: 60px;
    height: 60px;
}
.LeftBar #logo-home .Forinov {
    text-transform: capitalize;
}
.LeftBar *,
.RightBar * {
    color: rgb(var(--white-color));
}
.LeftBar li,
.RightBar li {
    transition: background-color 0.3s ease;
}
.LeftBar li.onHover:hover,
.RightBar li.onHover:hover {
    background-color: rgb(var(--background-main-color));
}
.LeftBar li a,
.LeftBar li a *,
.RightBar li a,
.RightBar li a * {
    transition: fill 0.3s ease, color 0.3s ease;
}
.LeftBar li.onHover:hover a,
.LeftBar li.onHover:hover a *:not(svg),
.RightBar li.onHover:hover a,
.RightBar li.onHover:hover a *:not(svg),
.RightBar li.onHover:hover div,
.RightBar li.onHover:hover div *:not(svg),
.LeftBar li.onHover.active a,
.LeftBar li.onHover.active a *:not(svg),
.RightBar li.onHover.active a,
.RightBar li.onHover.active a *:not(svg),
.RightBar li.onHover.active div,
.RightBar li.onHover.active div *:not(svg) {
    color: rgb(var(--main-color));
}
.LeftBar li.onHover:hover a,
.LeftBar li.onHover:hover a svg,
.RightBar li.onHover:hover a,
.RightBar li.onHover:hover a svg,
.RightBar li.onHover:hover div,
.RightBar li.onHover:hover div svg,
.LeftBar li.onHover.active a,
.LeftBar li.onHover.active a svg,
.RightBar li.onHover.active a,
.RightBar li.onHover.active a svg,
.RightBar li.onHover.active div,
.RightBar li.onHover.active div svg {
    fill: rgb(var(--main-color));
}
.LeftBar .text-profil {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.RightBar .white-bloc {
    width: 100% !important;
    height: fit-content !important;
}
.RightBar .white-bloc * {
    width: 100%;
    color: rgb(var(--main-color));
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.RightBar .white-bloc span.display-hover {
    padding: 0px 0px 8px 0px;
}
.LeftBar ul li .span-item,
.RightBar ul li .span-item {
    margin: 0px 0px 0px 8px !important;
    font-size: 12px;
    letter-spacing: inherit;
}
.RightBar:hover .add-outil {
    width: 100% !important;
    padding: 8px;
}
.RightBar:hover .add-outil span {
    font-size: 12px;
    letter-spacing: inherit;
}
.LeftBar .collapse * {
    font-size: 12px;
    letter-spacing: inherit;
} */