/* =========================================================
   MODULE CARD
   ========================================================= */
.module-card-serialization {
    --module-accent: #0F8F87 !important;
    --brand: #0F8F87 !important;
    border-top: 3px solid #0F8F87 !important;
}

    .module-card-serialization .module-icon {
        color: #087443;
        background: #e8f6ee;
    }

        .module-card-serialization .module-icon .fa {
            font-size: 27px;
            line-height: 1;
        }

        .module-card-serialization .module-icon svg {
            width: 44px;
            height: 44px;
        }

    .module-card-serialization .module-code {
        color: #087443;
    }

    .module-card-serialization .module-status {
        color: #087443;
        background: #e8f6ee;
    }

    .module-card-serialization .module-button-primary {
        background: #087443;
        color: #fff;
    }

    .module-card-serialization .module-button-secondary {
        color: #087443;
        border-color: #b8ddc8;
    }

    .module-card-serialization .module-actions {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .module-card-serialization .module-button-primary {
        width: min(100%, 240px);
    }


/* =========================================================
   GENERIC MODULE ICON
   ========================================================= */

.module-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .module-icon svg {
        width: 46px;
        height: 46px;
    }


/* =========================================================
   SERIALIZATION AUTH BRAND
   LOGIN + REGISTER
   ========================================================= */

.serialization-auth {
    --brand: #087443;
    --primary: #087443;
}

    .serialization-auth .register-next-step-button,
    .serialization-auth .existing-account-login-link {
        background: #087443;
        color: #fff;
    }

    .serialization-auth .mm-hero-kicker,
    .serialization-auth .dtts-main-title {
        color: #087443;
    }


/* =========================================================
   SELECTED PRINT BUNDLE
   ========================================================= */

.serialization-selected {
    color: #315f49;
    margin: 12px 0 18px;
}

    .serialization-selected strong {
        color: #244f3a;
        font-weight: 800;
    }

    .serialization-selected a {
        color: #087443;
        font-weight: 700;
        text-decoration: underline;
    }

.serialization-selected-separator {
    display: inline-block;
    margin: 0 5px;
    opacity: .55;
}


/* =========================================================
   SERIALIZATION BUNDLES PAGE
   ========================================================= */

.serialization-bundles {
    min-height: 100vh;
    padding: 36px max(24px, calc((100vw - 1200px) / 2));
    background: linear-gradient( 140deg, #eef8f2, #ffffff 55%, #edf7f1 );
    color: #173b29;
}

    .serialization-bundles header {
        margin: 54px 0 32px;
        text-align: center;
    }

        .serialization-bundles header h1 {
            font-size: clamp(27px, 4vw, 43px);
            font-weight: 800;
        }

        .serialization-bundles header p {
            color: #607571;
            font-size: 17px;
        }

.serialization-eyebrow {
    color: #087443;
    font-weight: 800;
    letter-spacing: .12em;
}

.serialization-back {
    color: #087443;
    font-weight: 700;
}


/* =========================================================
   BUNDLE GRID
   ========================================================= */

.serialization-bundle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.serialization-bundle {
    padding: 28px 22px;
    border: 1px solid #c8e4d3;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(8, 116, 67, .07);
    text-align: center;
}

.serialization-bundle-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    color: #087443;
    background: #e8f6ee;
    font-size: 25px;
}

.serialization-bundle h2 {
    margin: 20px 0 0;
    color: #075d38;
    font-size: 40px;
    font-weight: 800;
}

.serialization-bundle p {
    min-height: 42px;
    color: #526965;
}

.serialization-price {
    display: block;
    min-height: 52px;
    color: #174744;
    font-size: 18px;
}

.serialization-bundle button,
.serialization-placeholder .serialization-primary {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 11px;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
}


/* =========================================================
   BUNDLE BUTTONS
   ========================================================= */

.serialization-primary {
    border: 1px solid #087443;
    background: #087443;
    color: #fff;
}

    .serialization-primary:hover,
    .serialization-primary:focus {
        background: #06683c;
        border-color: #06683c;
        color: #fff;
    }

.serialization-secondary {
    margin-top: 8px;
    border: 1px solid #b8ddc8;
    background: #fff;
    color: #087443;
}

    .serialization-secondary:hover,
    .serialization-secondary:focus {
        background: #f2faf5;
        color: #06683c;
    }


/* =========================================================
   PLACEHOLDER PAGE
   ========================================================= */

.serialization-placeholder {
    padding-top: 18vh;
    text-align: center;
}

    .serialization-placeholder .serialization-primary {
        max-width: 220px;
        margin: 22px auto;
    }


/* =========================================================
   MODULE GRID RESPONSIVE
   ========================================================= */

@media (min-width: 1100px) {

    .modules-page .modules-shell {
        width: min( 1350px, calc(100% - 48px) );
    }

    .modules-page .modules-grid {
        max-width: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }
}

@media (min-width: 701px) and (max-width: 1099px) {

    .modules-page .modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {

    .modules-page .modules-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   BUNDLES RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

    .serialization-bundle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 570px) {

    .serialization-bundle-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   KEEP CONTENT ABOVE GRAPHIC
   ========================================================= */

.serialization-auth .mm-hero-kicker,
.serialization-auth .dtts-main-title,
.serialization-auth .mm-hero-copy,
.serialization-auth .mm-hero-proof,
.serialization-auth .dtts-get-started-wrap {
    position: relative;
    z-index: 2;
}


/* =========================================================
   REGISTER PROOF CARD
   ========================================================= */

.html-registration-page
.serialization-auth
.mm-hero-proof {
    position: relative;
    z-index: 2;
    max-width: 375px;
    margin-top: 34px;
}


/* =========================================================
   ARABIC / RTL
   ========================================================= */

.serialization-auth.mm-arabic {
    direction: rtl;
}

    .serialization-auth.mm-arabic .mm-reg-hero {
        text-align: right;
    }

    .serialization-auth.mm-arabic .mm-hero-kicker,
    .serialization-auth.mm-arabic .dtts-main-title,
    .serialization-auth.mm-arabic .mm-hero-copy {
        text-align: right;
    }


    /*
    Since the watermark is mathematically centered,
    Arabic should NOT use right:115px etc.
*/
    .serialization-auth.mm-arabic
    .serialization-hero-watermark {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) rotate(3deg) !important;
    }


/* Login Arabic */
.html-login-page
.serialization-auth.mm-arabic
.serialization-hero-watermark {
    top: 49% !important;
    transform: translate(-50%, -50%) rotate(3deg) !important;
}


/* Register Arabic */
.html-registration-page
.serialization-auth.mm-arabic
.serialization-hero-watermark {
    top: 45% !important;
    transform: translate(-50%, -50%) rotate(3deg) !important;
}


/* =========================================================
   ARABIC FORM
   ========================================================= */

.serialization-auth.mm-arabic
.serialization-selected {
    direction: rtl;
    text-align: center;
}

.serialization-auth.mm-arabic
.mm-reg-fieldset,
.serialization-auth.mm-arabic
.inputs {
    direction: rtl;
    text-align: right;
}

.serialization-auth.mm-arabic input {
    text-align: right;
}


    /*
    Email/password remain LTR because their actual
    values are generally Latin/numeric.
*/
    .serialization-auth.mm-arabic
    input[type="email"],
    .serialization-auth.mm-arabic
    input[type="password"] {
        direction: ltr;
        text-align: left;
    }


/* =========================================================
   AUTH BUTTON HOVER
   ========================================================= */

.serialization-auth .register-next-step-button:hover,
.serialization-auth .register-next-step-button:focus,
.serialization-auth .existing-account-login-link:hover,
.serialization-auth .existing-account-login-link:focus {
    background: #06683c;
    color: #fff;
}

/* =========================================================
   centered + bigger + slightly rotated
   ========================================================= */

.serialization-auth .mm-reg-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

    /* remove inherited DTTS artwork */
    .serialization-auth .mm-reg-hero::before,
    .serialization-auth .mm-reg-hero::after,
    .serialization-auth::before,
    .serialization-auth::after,
    .serialization-auth .mm-reg-row::before,
    .serialization-auth .mm-reg-row::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
    }

/* -----------------------------------------
   BASE WATERMARK
   ----------------------------------------- */
.serialization-auth .serialization-hero-watermark {
    position: absolute !important;
    left: 52% !important;
    top: 54% !important;
    width: 430px !important;
    height: 430px !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) rotate(-7deg) !important;
    transform-origin: center center !important;
    color: #087443;
    opacity: .065;
    pointer-events: none;
    z-index: 0;
}

    .serialization-auth .serialization-hero-watermark svg {
        display: block;
        width: 100%;
        height: 100%;
    }

/* keep hero content above watermark */
.serialization-auth .mm-hero-kicker,
.serialization-auth .dtts-main-title,
.serialization-auth .mm-hero-copy,
.serialization-auth .mm-hero-proof,
.serialization-auth .dtts-get-started-wrap {
    position: relative;
    z-index: 2;
}

/* -----------------------------------------
   LOGIN PAGE
   ----------------------------------------- */
.html-login-page .serialization-auth .serialization-hero-watermark
{left: 50% !important;
/* smaller % = move upward */
top: 36% !important;
/* bigger graphic */
width: 440px !important;
height: 440px !important;
transform: translate(-50%, -50%) rotate(-7deg) !important;
opacity: .07 !important;
}
/* -----------------------------------------
   REGISTER PAGE
   put it more in the middle and bigger
   ----------------------------------------- */
.html-registration-page .serialization-auth .serialization-hero-watermark {
    left: 50% !important;
    /* smaller % = move upward */
    top: 36% !important;
    /* bigger graphic */
    width: 440px !important;
    height: 440px !important;
    transform: translate(-50%, -50%) rotate(-7deg) !important;
    opacity: .07 !important;
}

/* keep proof card nicely visible */
.html-registration-page .serialization-auth .mm-hero-proof {
    position: relative;
    z-index: 2;
    max-width: 375px;
    margin-top: 34px;
}

/* -----------------------------------------
   RTL / Arabic
   still centered, only reverse angle
   ----------------------------------------- */
.serialization-auth.mm-arabic .serialization-hero-watermark {
    left: 52% !important;
    right: auto !important;
    transform: translate(-50%, -50%) rotate(8deg) !important;
}

.html-login-page .serialization-auth.mm-arabic .serialization-hero-watermark {
    left: 53% !important;
    top: 56% !important;
    transform: translate(-50%, -50%) rotate(7deg) !important;
}

.html-registration-page .serialization-auth.mm-arabic .serialization-hero-watermark {
    left: 50% !important;
    top: 52% !important;
    width: 460px !important;
    height: 460px !important;
    transform: translate(-50%, -50%) rotate(8deg) !important;
}

/* -----------------------------------------
   TABLET
   ----------------------------------------- */
@media (max-width: 1100px) {

    .serialization-auth .serialization-hero-watermark {
        width: 400px !important;
        height: 400px !important;
    }

    .html-login-page .serialization-auth .serialization-hero-watermark {
        left: 52% !important;
        top: 45% !important;
        width: 400px !important;
        height: 400px !important;
    }

    .html-registration-page .serialization-auth .serialization-hero-watermark {
        left: 50% !important;
        /* move upward */
        top: 38% !important;
        /* make larger */
        width: 430px !important;
        height: 430px !important;
        transform: translate(-50%, -50%) rotate(-7deg) !important;
    }
}
/* -----------------------------------------
   MOBILE
   ----------------------------------------- */
@media (max-width: 900px) {

    .serialization-auth .serialization-hero-watermark {
        left: 50% !important;
        top: 43% !important;
        width: 350px !important;
        height: 350px !important;
        opacity: .06 !important;
        transform: translate(-50%, -50%) rotate(-7deg) !important;
    }

    .html-registration-page
    .serialization-auth
    .serialization-hero-watermark {
        left: 50% !important;
        /* MOVE UP */
        top: 39% !important;
        /* MAKE BIGGER */
        width: 380px !important;
        height: 380px !important;
        opacity: .07 !important;
        transform: translate(-50%, -50%) rotate(-8deg) !important;
    }

    .serialization-auth.mm-arabic
    .serialization-hero-watermark {
        transform: translate(-50%, -50%) rotate(8deg) !important;
    }

    .html-registration-page
    .serialization-auth
    .mm-hero-proof {
        max-width: 100%;
    }
}

/* -----------------------------------------
   SMALL MOBILE
   ----------------------------------------- */
@media (max-width: 570px) {
    .serialization-auth .serialization-hero-watermark {
        width: 230px !important;
        height: 230px !important;
        top: 48% !important;
        opacity: .045 !important;
    }

    .html-registration-page .serialization-auth .serialization-hero-watermark {
        width: 245px !important;
        height: 245px !important;
        top: 47% !important;
    }
}
.html-registration-page .serialization-auth .mm-reg-hero .serialization-hero-watermark {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(72vw, 600px) !important;
    height: auto !important;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-7deg) !important;
}

.html-registration-page .serialization-auth.mm-arabic .mm-reg-hero .serialization-hero-watermark {
    transform: translate(-50%, -50%) rotate(7deg) !important;
}
<link href="@Url.Content(" ~ /Content/User/Modules/Modules-Page.css")"
rel="stylesheet"
type="text/css" / >

<link href="@Url.Content(" ~ /Content/User/Serialization/Serialization-Auth.css")"
rel="stylesheet"
type="text/css" / >

<style >
/* =========================================
       SERIALIZATION MODULE - TEAL THEME
       ========================================= */
.module-card-serialization {
    border-top-color: #0F8F87 !important;
}

/* Barcode icon */
.module-card-serialization .module-icon {
    color: #0F8F87 !important;
    background: #E7F7F5 !important;
}

/* SERIALIZATION label */
.module-card-serialization .module-code {
    color: #0F8F87 !important;
}

/* Available badge */
.module-card-serialization .module-status {
    color: #08776F !important;
    background: #E4F6F3 !important;
}

    /* Status dot */
    .module-card-serialization .module-status::before {
        background: #0F8F87 !important;
    }

/* Feature dots */
.module-card-serialization .module-features span::before {
    background: #0F8F87 !important;
}

/* Choose bundle button */
.module-card-serialization .module-button-primary {
    background: #0F8F87 !important;
    border-color: #0F8F87 !important;
    color: #fff !important;
}

    .module-card-serialization .module-button-primary:hover,
    .module-card-serialization .module-button-primary:focus {
        background: #0B746E !important;
        border-color: #0B746E !important;
        color: #fff !important;
    }

/* Decorative corner/background shape */
.module-card-serialization::before,
.module-card-serialization::after {
    border-color: rgba(15, 143, 135, 0.12) !important;
}

</style >