/* =========================================================
   Mapping Table
   ========================================================= */

.stampli-mapping-table {
    width: 100%;
}


/* Intro
   --------------------------------------------------------- */

.stampli-mapping-table__heading {
    max-width: 620px;
    margin: 0 auto 24px;
    text-align: center;
	color: var(--Stampli-Navy, #1E3C74);
	/* Web UI/Display L */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 500;
	line-height: 42px; /* 105% */
	letter-spacing: -0.5px;
}

.stampli-mapping-table__description {
    max-width: 55%;
    margin: 0 auto 58px;

	color: var(--Stampli-Navy, #1E3C74);
	text-align: center;

	/* Web UI/Subhead */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px; /* 136.364% */
}


/* Diagram
   --------------------------------------------------------- */

.stampli-mapping-table__viewport {
    width: 100%;
}

.stampli-mapping-table__diagram {
    width: 100%;
    max-width: 790px;
    margin: 0 auto;
}

.stampli-mapping-table__columns,
.stampli-mapping-table__section,
.stampli-mapping-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
}


/* Column headers
   --------------------------------------------------------- */

.stampli-mapping-table__column {
    position: relative;
    min-height: 105px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 20px 22px;
    border: 1px solid #cfe3fa;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

/* Top accent line */
.stampli-mapping-table__column::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: #84a9d0;
}

.stampli-mapping-table__column--right::before {
    background: linear-gradient(
        90deg,
        #008fd3 0%,
        #635bd5 55%,
        #a536b8 100%
    );
}

.stampli-mapping-table__column-name {
	color: var(--Brand-Pallette-Brand-navy, #1E3C74);

	/* Web UI/Heading S */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 116.667% */
}

.stampli-mapping-table__logo {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfe3fa;
    border-radius: 8px;
}

.stampli-mapping-table__logo img {
    display: block;
    max-width: 35px;
    max-height: 35px;
}


/* Section headings
   --------------------------------------------------------- */

.stampli-mapping-table__section-band {
    min-height: 44px;
    background: #eaf4ff;
    border: 1px solid #cfe3fa;
    border-bottom: 0;
}

.stampli-mapping-table__section-title {
    display: flex;
    align-items: center;
    justify-content: center;
	color: var(--Brand-Pallette-Brand-navy, #1E3C74);
	text-align: center;

	/* Web UI/Body L - Medium */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px; /* 133.333% */
}


/* Rows
   --------------------------------------------------------- */

.stampli-mapping-table__cell {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 15px 24px;
    border: 1px solid #cfe3fa;
    border-bottom: 0;
	color: var(--Navy, #1E3C74);
	/* Web UI/Body S */
	font-family: 'Aeonik', 'Inter', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px; /* 142.857% */
}

.stampli-mapping-table__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #58a1ff;
}

.stampli-mapping-table__arrow svg {
    display: block;
    width: 33px;
    height: auto;
}


/* Bottom edge
   --------------------------------------------------------- */

.stampli-mapping-table__row:last-child .stampli-mapping-table__cell {
    border-bottom: 1px solid #cfe3fa;
}

.stampli-mapping-table__row:last-child .stampli-mapping-table__cell:first-child,
.stampli-mapping-table__row:last-child .stampli-mapping-table__cell:last-child {
    border-radius: 0 0 8px 8px;
}


/* Tablet
   --------------------------------------------------------- */

@media (max-width: 1032px) {

    .stampli-mapping-table__diagram {
        max-width: 650px;
    }

    .stampli-mapping-table__columns,
    .stampli-mapping-table__section,
    .stampli-mapping-table__row {
        grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
    }
	
	.stampli-mapping-table__logo {
		flex: 0 0 48px;
		width: 48px;
		height: 48px;
	}

    .stampli-mapping-table__column,
    .stampli-mapping-table__cell {
        padding-left: 16px;
        padding-right: 16px;
    }
	.stampli-mapping-table__column {
		align-self: stretch;
		padding: 24px 16px;
	}
	
	.stampli-mapping-table__cell{
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
	}
	
	.stampli-mapping-table__description {
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px;
		max-width: 85%;
	}
	
	.stampli-mapping-table__column-name {
		font-size: 18px;
		font-style: normal;
		font-weight: 500;
		line-height: 24px;
	}
	
	.stampli-mapping-table__arrow svg {
		height: 32px;
		width:33px;
	}
	

}


/* Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .stampli-mapping-table__heading,
    .stampli-mapping-table__description {
        text-align: left;
		max-width: calc(100% - 32px) !important;
    }

	
	.stampli-mapping-table__heading {
		font-size: 24px;
		line-height: 28px;
	}

    .stampli-mapping-table__description {
        margin: 0 auto 40px;
		font-size: 18px;
		line-height: 28px;
		max-width: 95%;
    }

    .stampli-mapping-table__viewport {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
	
	.stampli-mapping-table__diagram {
        width: 500px;
        min-width: 500px;
        max-width: none;
        margin: 0;
    }
	
    .stampli-mapping-table__diagram {
        position: relative;
		padding-left: 16px;
    }


	.stampli-mapping-table__scroll-wrapper {
        position: relative;
    }

    .stampli-mapping-table__scroll-wrapper::before,
    .stampli-mapping-table__scroll-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50px;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    /* Left */
    .stampli-mapping-table__scroll-wrapper::before {
        left: 0;
        background: linear-gradient(
            to right,
            #fff 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    /* Right */
    .stampli-mapping-table__scroll-wrapper::after {
        right: 0;
        background: linear-gradient(
            to left,
            #fff 0%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    .stampli-mapping-table__scroll-wrapper.can-scroll-left::before {
        opacity: 1;
    }

    .stampli-mapping-table__scroll-wrapper.can-scroll-right::after {
        opacity: 1;
    }

	
	
	.stampli-mapping-table__column {
		display: flex;
		padding: 24px 16px;
		align-items: center;
		gap: 14px;
		align-self: stretch;
	}
	
	.stampli-mapping-table__column-name {
		font-size: 16px;
		line-height: 21px;
	}
	
	.stampli-mapping-table__logo {
		display: flex;
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1/1;
	}
	
	.stampli-mapping-table__logo img {
		width: 18px;
		height: 18px;
	}
	
	.stampli-mapping-table__section-title {
		font-size: 14.159px;
		font-style: normal;
		font-weight: 500;
		line-height: 21.238px;
	}
	
	.stampli-mapping-table__cell {
		font-size: 14px;
		font-weight: 400;
	}
	

}