:root {
    --p: 16px;
    --p-m: 21px;
    --p-l: 24px;
    --alegreya: 'Alegreya Sans', sans-serif;
    --garamond: 'EB Garamond', serif;
    --h3: 40px;
    --h4: 22px;
    --label-color: #8b8b8b;
}
@media only screen and (max-width: 992px) {
    :root {
        --p: 13px;
        --p-m: 15px;
        --p-l: 15px;
        --h3: 30px;
        --h4: 17px;
    }
}
live-preview-root{
    height:0px;
    bottom: 0px;
    position:absolute;
}

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;700&family=EB+Garamond:wght@400;500&display=swap');

.alegreya {
    font-family: 'Alegreya Sans', sans-serif;
}

.garamond {
    font-family: 'EB Garamond', serif;
}


*, ::after, ::before {
    box-sizing: border-box;
}
html, body {
    box-sizing: border-box;
    font-family: 'Alegreya Sans', sans-serif;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    position: relative;
    display: grid;
    grid-template-areas:
        'topContent'
        'footer';
    row-gap: 0;
    align-content: space-between;
}
.topContent {
    grid-area: topContent;
}
header {
    font-family: var(--garamond);
    font-size: var(--p-l);
    border-bottom: 1px solid #f3f3f3;
    height: 160px;
}
.header{
    height: 160px;
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    padding:0px 12px;
}
@media only screen and (max-width: 992px) {
    header {
        height: 95px;
    }
    .header {
        height: 95px;
    }
}
.header .headerLogo{
    width: 33%;
}
@media only screen and (max-width: 992px) {
    .header .headerLogo svg {
        width: 200px;
    }
}
.header .headerMainMenu {
    width: 47%;
    color: black;
    text-align: right;
}
@media only screen and (max-width: 576px) {
    .header .headerLogo {
        width: 25%;
    }
    .header .headerMainMenu {
        width: 50%;
    }
    .header .headerLanguageMenu {
        width: 25% !important;
    }
    .header .headerLogo svg {
        width: 170px;
    }
}
.header .headerLanguageMenu {
    font-size: var(--p);
    width: 20%;
    text-align: right;
}
.header a {
    text-decoration: none;
    color: black;
}

    .header a:focus, .header a:hover {
        text-decoration: underline;
        color: black;
    }




#divMainContainer {
    max-width: 1200px;
    padding: 60px 12px;
    margin: 0px auto;
    background-color: white;
    position: relative;
    grid-area: main;
    align-self: start;
}
@media only screen and (max-width:992px) {
    #divMainContainer {
        padding: 40px 12px !important;
    }
}
footer {
    background-color: #191919;
    padding: 16px 0;
    grid-area: footer;
    box-sizing: border-box;
}

footer .footerArea {
    padding: 0px 12px;
    max-width: 1200px;
    color: #8b8b8b;
    font-size: 13px;
    margin: auto;
    line-height: 24px;
}
#divRenderedBody{
    
}
.mainWindowHeader {
    padding: 30px 0px;
    font-family: 'EB Garamond', serif;
    font-weight:400;
}
h1, h2, h3, h4 {
    font-family: 'EB Garamond', serif;
    padding: 0px !important;
}
h3 {
    text-align: center;
    font-size: var(--h3);
    margin: 0px 0px var(--h3) 0px;
}
h4{
    font-size: var(--h4);
}
label{
    color: var(--label-color);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 12px;
}
p {
    font-size: var(--p-m);
}
#divPaymentCreation {
    width: 100%;
}
.paymentCreationFormAreaTop {
    width: 100%;
    background-color: #f2f5f2;
    text-align: center;
}
#paymentCreationFormArea {
    /*border:1px solid #e4e4e4;*/
    padding: 20px 15px 20px 15px;
    box-sizing: border-box;
    position: relative;
    vertical-align: top;
    margin: auto;
    width: 70%;
    display: flex;
    flex-flow: row wrap;
}


    #paymentCreationFormArea dl {
        flex: 0 0 auto;
        width: calc(50% - 1.5rem);
        margin-left: 0.75rem;
        margin-right: 0.75rem;
        text-align: left;
    }
    @media only screen and (max-width: 576px){
        #paymentCreationFormArea dl {
            width: calc(100% - 1.5rem);
        }
    }
    #paymentCreationFormArea input[type=text] {
    }
    #paymentCreationFormArea dl.fullWidth {
        width: calc(100% - 1.5rem);
    }

.referenceImgArea {
    vertical-align: top;
    background-color: #f2f5f2;
    text-align: center;
    padding: 15px 0px;
}

.referenceImg {
    width: 75%;
    border: 5px solid #0a0a0a;
    border-radius: 15px;
    margin: auto;
}

@media only screen and (max-width: 992px) {
    #paymentCreationFormArea {
        width: 90%;
    }

    .referenceImg {
        width: 95%;
    }
}


.normalButton {
    transition: color .3s ease-in-out,background-color .3s ease-in-out,border-color .3s ease-in-out;
    font-weight: 700;
    background-color: #0a0a0a;
    letter-spacing: .04rem;
    line-height: 1;
    vertical-align: middle;
    border: 2px solid #0a0a0a;
    position: relative;
    color: #fefefe;
    padding: 0.45em 0.6em;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: var(--p-m);
    font-family: var(--alegreya);
    cursor: pointer;
}
.normalButton:hover {
    background-color: #09c;
    color: #fefefe;
}






#divHeader {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#divHeader img {
    margin: 0px;
    padding: 0px;
    display: block;
}

#divTopMenu {
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    position: relative;
}

#topMenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

#topMenu li {
    display: inline-block;
}

#topMenu a {
    text-decoration: none;
    padding: 5px 20px;
    display: block;
}

#topMenu a, div.language_selection a {
    text-decoration: none;
    /*padding:5px 20px;*/
    color: #09c;
    font-weight: bold;
}
    #topMenu a:focus, div.language_selection a:focus, #topMenu a:hover, div.language_selection a:hover {
        color: #0084af;
    }


/*#f2f5f2*/



input[type="text"] {
    height: 3.15625rem;
    padding: 0.625rem 1.2rem;
    font-size: var(--p-m);
    border: none !important;
    border-radius: 0;
    background-color: #fefefe;
    box-shadow: none;
    width: 100%;
    font-family: var(--alegreya);
}

input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 1px #0099cc;
    /*padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;*/
    border: 1px solid #0099cc;

}
@media only screen and (max-width: 992px) {
    input[type="text"] {
        height: 2.556rem;
    }
}



#divPaymentConfirmForm {
    /*border:1px solid #e4e4e4;
    float: left;*/
    padding: 20px 15px 20px 15px;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
    background-color: #f2f5f2;
    border-radius: 5px;
}
.cl_mainFormHeader {
    color: #0099cc;
    display: inline-block;
    margin: 15px 0px;
    font-size: 15px;
}


/*confirm form*/

#divConfirmForm {
    float: left;
    padding: 15px 15px 15px 30px;
    box-sizing: border-box;
    border-radius: 2px;
    font-size: var(--p-m);
}

    #divConfirmForm dd {
        color: #0099cc;
        margin-bottom: 8px;
    }

#divAcceptForm {
    /*float: left;*/
    padding: 15px 0px 15px 30px;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
    font-size: var(--p-m);
}

    #divAcceptForm dd {
        color: #0099cc;
        margin-bottom: 8px;
    }

#divProgressBar {
    border-radius: 3px;
    margin-top: 55px;
    text-align: left;
    display: inline-block;
}

.cl_divProgressBarField {
    border-top: 1px solid #0099cc;
    border-bottom: 1px solid #0099cc;
    display: inline-block;
    margin-right: -4px;
    position: relative;
}
    .cl_divProgressBarField:first-of-type {
        border-left: 1px solid #0099cc;
    }
    .cl_divProgressBarField:last-of-type {
        border-right: 1px solid #0099cc;
    }
    cl_wordSpan::after, cl_wordSpan::before {
        box-sizing: initial;
    }
divProgressBar::after, divProgressBar::before {
    box-sizing: initial;
}
cl_divProgressBarField::after, cl_divProgressBarField::before {
    box-sizing: initial;
}

.cl_divProgressBarFieldArrow {
    position: absolute;
    left: 0px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #dadada;
    z-index: 2;
}

.cl_divProgressBarFieldArrowSecond {
    position: absolute;
    left: 1px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #0099cc;
    z-index: 1;
}

.cl_divProgressBarFieldText {
    display: inline-block;
    line-height: 28px;
    background-color: #dadada;
    width: 100%;
    padding-left: 30px;
    cursor: pointer;
    font-size: var(--p-m);
}

    .cl_divProgressBarFieldText .cl_numberingSpan {
        font-weight: bold;
        color: #0099cc;
        padding-right: 10px;
        vertical-align: 0px;
        white-space: nowrap;
        display: inline-block;
    }

    .cl_divProgressBarFieldText .cl_wordSpan {
        display: inline-block;
        white-space: nowrap;
        padding-right: 15px !important;
    }

.cl_progressBarPast {
    background-color: white;
}

.cl_arrowCurrent {
    border-left-color: white !important;
}

.cl_progressBarCurrent {
    background-color: white;
}

    .cl_progressBarCurrent .cl_wordSpan {
        font-weight: 700 !important;
        padding-right: 25px !important;
    }

div.reception_body {
    padding: 15px 30px;
    box-sizing: border-box;
}

    div.reception_body p {
        margin-bottom: 60px;
    }

a {
    text-decoration: none;
    color: #09c;
}
a:focus, a:hover {
    color: #0084af;
}

.cl_logos_div{
    text-align: center;
}

.cl_logos_div img:not(:first-child) {
    vertical-align: middle;
    margin-top: 40px;
    margin-left: 55px;
}

.cl_logos_div img:first-child {
    vertical-align: middle;
    margin-top: 40px;
    margin-left: 20px;
}

@media only screen and (max-width: 576px){
    .cl_logos_div img {
        margin-left: 0px !important;
    }
}