:root {
    --forms-item-margin: 2px;
}

.axa-forms-content-container-items-horizontal {
    /* display: flex; */
    flex-wrap: wrap;
}

.axa-forms-content-container-items-vertical {
    display: table;
}
.axa-forms-content-container-center {
    text-align:center;
}

/* item container */
.axa-forms-content-container.axa-forms-content-container-items-horizontal > .gridFluidLayout > .guideLayout{
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
}

.axa-forms-content-container.axa-forms-content-container-items-horizontal > .gridFluidLayout > .guideLayout > * {
    flex: 0 1 calc(222px + var(--forms-item-margin));
}

.axa-forms-content-container.axa-forms-content-container-items-horizontal.strech > .gridFluidLayout > .guideLayout > * {
    flex: 1 1 calc(222px + var(--forms-item-margin));
}

/* item to align */
.axa-forms-content-container > .gridFluidLayout > .guideLayout .row{
    display: flex!important;
    flex-wrap: wrap!important;
    margin: var(--forms-item-margin)!important;
}

.axa-forms-content-container > .gridFluidLayout > .guideLayout .row > * {
    flex: 1 1 calc(222px + var(--forms-item-margin));
}

@media (max-width: 768px) {
    /* fix layout margins for guide forms axacore */
    #guideContainerForm .l-container__row {
        margin-right:0px!important;
        margin-left:0px!important;
    }
}

@media (min-width: 768px) {
    /** override flexbox config for two col layout**/
    .axa-forms-content-container.axa-forms-content-container-items-horizontal.strech.flex-two-col-4-1 > .gridFluidLayout > .guideLayout .row:nth-child(1) {
        flex-grow: 4;
        flex-shrink: 0;
        flex-basis: auto;
    }

    .axa-forms-content-container.axa-forms-content-container-items-horizontal.strech.flex-two-col-4-1 > .gridFluidLayout > .guideLayout .row:nth-child(2) {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 5rem;
    }

    .axa-forms-content-container.axa-forms-content-container-items-horizontal.strech.flex-two-col-1-4 > .gridFluidLayout > .guideLayout .row:nth-child(1) {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 5rem;
    }

    .axa-forms-content-container.axa-forms-content-container-items-horizontal.strech.flex-two-col-1-4 > .gridFluidLayout > .guideLayout .row:nth-child(2) {
        flex-grow: 4;
        flex-shrink: 0;
        flex-basis: auto;
    }
}