/* @import url("https://font.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap"); */
/* EXEMPLE POUR IMPORTER UNE LIBRAIRIE DE FONTS !*/

.grfk-addEpigraphyForm-form {
    background-color: var(--mainColor1);
    margin: 0 var(--gaps1);
    padding: var(--gaps2) 10vw var(--gaps2) 10vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gaps1);
}

.grfk-addEpigraphyForm-progressContainer {
    display: flex;
    flex-direction: row;
}

.grfk-addEpigraphyForm-progress {
    display: flex;
    flex-direction: row;
    min-height: 50px;
    height: 50px;
    gap: var(--gaps1);
}

.grfk-addEpigraphyForm-stepsContainer {
    display: flex;
    flex-direction: column;
    gap: var(--gaps1);
}

.grfk-addEpigraphyForm-step {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
    gap: var(--gaps1);
}

.grfk-addEpigraphyForm-step-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--gaps1);
}

.epigraphyForm-div-datation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    gap: calc(var(--gaps05)/2);
}

.grfk-addform-displayTermAndCheckbox2,
.grfk-addform-displayIndividualCheckboxAndChildTerm {
    display: flex;
    flex-direction: row;
    gap: calc(var(--gaps05)/2);
    align-items: center;
    border-radius: var(--borderRadius1);
    margin: calc(var(--gaps05)/2);
}

.grfk-addform-displayTermAndCheckbox2:hover,
.grfk-addform-displayIndividualCheckboxAndChildTerm:hover {
    box-shadow: 0px 0px 0px 1px var(--mainColor2);
}

.grfk-addEpigraphyForm-terms-container,
.grfk-addform-displayChildTerms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gaps05);
}

.grfk-addform-displayTermsAndChildTerms-parentName {
    margin: var(--gaps1) 0 var(--gaps05) 0;
}

.grfk-addEpigraphyForm-substeps {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gaps05);
}


.grfk-addEpigraphyForm-step.grfk-addEpigraphyForm-step-active {
    display: flex;
}


.grfk-addEpigraphyForm-horizontal-dotted-separator {
    width: 100%;
    height: 0%;
    border: 1px dotted var(--mainColor4);
}



/* ------------*/
/* --- TYPO ---*/
/* ------------*/

.grfk-addEpigraphyForm-step-form h3 {
    font-size: var(--fontSizeBig);
    width: 100%;
    font-weight: 400;
    text-align: left;
}

.grfk-addEpigraphyForm-substeps p {
    text-align: center;
    font-style: italic;
    font-size: var(--fontSizeNormal);
    font-family: "Ubuntu", sans-serif;
}

.grfk-addEpigraphyForm-substeps h4 {
    text-align: center;
    font-weight: 600;
    font-size: var(--fontSizeNormal);
    font-family: "Ubuntu", sans-serif;
}

/* -------------------*/
/* --- STEPS ICONS ---*/
/* -------------------*/


/* Icon1 */

.grfk-addEpigraphyForm-step1-icon {
    background-size: cover;
    min-height: 40px;
    min-width: 34px;
    height: 40px;
    width: 34px;
    background-repeat: no-repeat;
}

.grfk-addEpigraphyForm-step1-icon-off {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step1-off.svg");
}

.grfk-addEpigraphyForm-step1-icon-on {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step1-on.svg");
}


/* Icon2 */

.grfk-addEpigraphyForm-step2-icon {
    background-size: cover;
    min-height: 40px;
    min-width: 44px;
    height: 40px;
    width: 44px;
    background-repeat: no-repeat;
}

.grfk-addEpigraphyForm-step2-icon-off {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step2-off.svg");
}

.grfk-addEpigraphyForm-step2-icon-on {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step2-on.svg");
}


/* Icon3 */

.grfk-addEpigraphyForm-step3-icon {
    background-size: cover;
    min-height: 40px;
    min-width: 40px;
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
}

.grfk-addEpigraphyForm-step3-icon-off {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step3-off.svg");
}

.grfk-addEpigraphyForm-step3-icon-on {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step3-on.svg");
}


/* Icon4 */

.grfk-addEpigraphyForm-step4-icon {
    background-size: cover;
    min-height: 40px;
    min-width: 40px;
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
}

.grfk-addEpigraphyForm-step4-icon-off {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step4-off.svg");
}

.grfk-addEpigraphyForm-step4-icon-on {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step4-on.svg");
}


/* Icon5 */

.grfk-addEpigraphyForm-step5-icon {
    background-size: cover;
    min-height: 40px;
    min-width: 40px;
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
}

.grfk-addEpigraphyForm-step5-icon-off {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step5-off.svg");
}

.grfk-addEpigraphyForm-step5-icon-on {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step5-on.svg");
}


/* Icon6 */

.grfk-addEpigraphyForm-step6-icon {
    background-size: cover;
    min-height: 40px;
    min-width: 32px;
    height: 40px;
    width: 32px;
    background-repeat: no-repeat;
}

.grfk-addEpigraphyForm-step6-icon-off {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step6-off.svg");
}

.grfk-addEpigraphyForm-step6-icon-on {
    background-image: url("../images/epigraphy-addform-icons/epigraphy-addform-step6-on.svg");
}

.grfk-addEpigraphyForm-controls {
    display: flex;
    flex-direction: row;
    gap: var(--gaps05);
}


@media (max-width: 700px) {

    .grfk-addEpigraphyForm-step1-icon {
        min-height: 20px;
        min-width: 17px;
        height: 20px;
        width: 17px;
    }

    .grfk-addEpigraphyForm-step2-icon {
        min-height: 20px;
        min-width: 22px;
        height: 20px;
        width: 22px;
    }

    .grfk-addEpigraphyForm-step3-icon {
        min-height: 20px;
        min-width: 20px;
        height: 20px;
        width: 20px;
    }

    .grfk-addEpigraphyForm-step4-icon {
        background-size: cover;
        min-height: 20px;
        min-width: 20px;
        height: 20px;
        width: 20px;
        background-repeat: no-repeat;
    }

    .grfk-addEpigraphyForm-step5-icon {
        min-height: 20px;
        min-width: 20px;
        height: 20px;
        width: 20px;
    }

    .grfk-addEpigraphyForm-step6-icon {
        min-height: 20px;
        min-width: 16px;
        height: 20px;
        width: 16px;
    }

}