/* Mailservice-specific styles.
   Shared foundation: /shared/assets/css/main.css
   Keep Mailservice-only layout and view details here. */

:root{
    --mail-bg:#f2f4f7;
    --mail-content-bg:#f7f7f5;
    --mail-sidebar-bg:#f5f3ee;
    --mail-sidebar-border:rgba(15,59,102,.14);
    --mail-brand:#0f3b66;
    --mail-brand-dark:#0a2c4d;
    --mail-gold:#b08d57;
    --mail-text:#1f2f3f;
    --mail-text-soft:#586574;
    --mail-text-muted:#7a8491;
    --mail-shadow-mobile:12px 0 30px rgba(15,23,42,.14);
}

.mailservice-progress{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.mailservice-memberlist-panel .mailservice-progress{
    max-width:none;
}

.mailservice-code-form{
    max-width:520px;
}
.form-grid.mailservice-signup-grid{
    grid-template-columns:minmax(96px, 120px) minmax(220px, 340px) minmax(360px, 1fr);
}
.mailservice-signup-member{
    grid-column:1;
    grid-row:1;
}
.mailservice-signup-member input{
    max-width:92px;
    text-align:center;
}
.mailservice-signup-lastname{
    grid-column:2;
    grid-row:1;
}
.mailservice-signup-email{
    grid-column:1 / span 2;
    grid-row:2;
}
.mailservice-signup-privacy{
    grid-column:3;
    grid-row:1;
    justify-self:start;
}
.mailservice-privacy-consent{
    width:max-content;
    max-width:none;
}
.mailservice-privacy-consent .checkbox-item{
    width:max-content;
    min-height:50px;
    height:50px;
    align-items:center;
    padding:0 16px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:0;
    box-shadow:none;
}
.mailservice-privacy-consent .checkbox-text{
    line-height:1.35;
}
.mailservice-privacy-consent .checkbox-control{
    margin-top:0;
}
.mailservice-layout .mobile-menu-toggle{
    background:var(--mail-brand);
}
/* =========================
   MAILSERVICE
   ========================= */

.mailservice-layout{
    min-height:100vh;
    width:100%;
}

.mailservice-layout .view-title{
    color:var(--mail-brand);
}

.mailservice-layout .view-intro{
    color:var(--site-copy-color);
}

.mailservice-layout .view-section-text{
    color:var(--site-copy-color);
}

.mailservice-layout .info-card p{
    color:var(--site-copy-color);
}

.mailservice-unsubscribe-copy{
    max-width:820px;
}

.mailservice-layout .mailservice-unsubscribe-section{
    border-bottom:0;
}

.mailservice-member-summary{
    width:100%;
    max-width:720px;
    margin:26px 0 24px;
    border-top:2px solid var(--mail-brand);
    border-bottom:1px solid rgba(15,59,102,.18);
    background:rgba(255,255,255,.32);
}

.mailservice-member-summary-row{
    display:grid;
    grid-template-columns:minmax(160px,190px) minmax(0,1fr);
    align-items:baseline;
    gap:22px;
    padding:14px 20px 15px;
    border-top:1px solid rgba(15,59,102,.08);
}

.mailservice-member-summary-row:first-child{
    border-top:0;
}

.mailservice-member-summary-row-title{
    padding-top:16px;
    background:rgba(15,59,102,.04);
}

.mailservice-member-summary-row dt,
.mailservice-member-summary-row dd{
    margin:0;
}

.mailservice-member-summary-row dt,
.mailservice-member-summary-row span{
    color:var(--mail-text-soft);
    font-size:14px;
    line-height:1.35;
    font-weight:800;
}

.mailservice-member-summary-row-title dt,
.mailservice-member-summary-row-title dd{
    color:var(--mail-brand);
}

.mailservice-member-summary-row dd,
.mailservice-member-summary-row strong{
    min-width:0;
    color:var(--mail-text);
    font-size:16px;
    line-height:1.45;
    font-weight:750;
    overflow-wrap:anywhere;
}

.mailservice-memberlist-fields .checkbox-text .form-hint{
    display:block;
    margin-top:3px;
    color:var(--mail-text-muted);
    font-size:13px;
    line-height:1.3;
}

.mailservice-memberlist-panel{
    max-width:none;
}

.mailservice-memberlist-hero{
    max-width:none;
    padding:0 0 18px;
    border-bottom:1px solid rgba(15,59,102,.12);
}

.mailservice-memberlist-section{
    max-width:none;
    border-bottom:1px solid rgba(15,59,102,.10);
}

.mailservice-memberlist-panel > .alert{
    max-width:none;
}

.mailservice-memberlist-panel .mailservice-member-summary{
    max-width:760px;
    margin:18px 0 8px;
    border:1px solid rgba(15,59,102,.14);
    border-top:3px solid var(--mail-brand);
    border-radius:0;
    background:#fff;
    overflow:hidden;
}

.mailservice-memberlist-verified{
    margin:18px 0 20px;
    color:var(--mail-text-soft);
    font-size:14px;
    line-height:1.45;
    font-weight:750;
}

.mailservice-memberlist-verified strong{
    color:var(--mail-text);
    font-weight:850;
}

.mailservice-memberlist-verified span::before{
    content:"·";
    margin:0 8px;
    color:rgba(15,59,102,.45);
}

.mailservice-memberlist-panel .checkbox-stack{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    max-width:760px;
}

.mailservice-memberlist-panel .checkbox-item{
    min-height:72px;
    align-items:flex-start;
    padding:16px 18px;
    border:1px solid rgba(15,59,102,.14);
    border-radius:0;
    background:#fff;
    box-shadow:0 1px 0 rgba(15,59,102,.04);
}

.mailservice-memberlist-panel .checkbox-item:hover,
.mailservice-memberlist-panel .checkbox-item:focus-within{
    border-color:rgba(15,59,102,.32);
    box-shadow:0 8px 24px rgba(15,59,102,.08);
}

.mailservice-memberlist-fields .checkbox-stack{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.mailservice-memberlist-privacy .checkbox-stack{
    grid-template-columns:1fr;
    width:max-content;
    max-width:100%;
}

.mailservice-memberlist-privacy .checkbox-item{
    width:max-content;
    max-width:100%;
    min-height:50px;
    padding:12px 16px;
    align-items:center;
}

.mailservice-memberlist-lookup-form{
    margin-top:16px;
    max-width:none;
}

.form-grid.mailservice-signup-grid.mailservice-memberlist-check-grid{
    grid-template-columns:minmax(96px, 120px) minmax(220px, 340px) minmax(360px, 1fr);
    max-width:none;
}

.form-grid.mailservice-signup-grid.mailservice-memberlist-email-grid{
    grid-template-columns:minmax(96px, 120px) minmax(220px, 340px) minmax(360px, 1fr);
    max-width:none;
}

.mailservice-memberlist-check-grid .mailservice-signup-member,
.mailservice-memberlist-check-grid .mailservice-signup-lastname{
    min-width:0;
}

.mailservice-memberlist-email-grid .mailservice-signup-email{
    grid-column:1 / span 2;
    grid-row:1;
    min-width:0;
}

.mailservice-memberlist-email-grid .mailservice-signup-email input{
    width:100%;
    max-width:none;
}

.mailservice-memberlist-mailservice-option{
    grid-column:3;
    grid-row:1;
    justify-self:start;
}

.mailservice-memberlist-panel .mailservice-memberlist-mailservice-choice{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    width:max-content;
    max-width:none;
}

.mailservice-memberlist-panel .mailservice-memberlist-mailservice-choice .checkbox-item{
    width:max-content;
    min-height:50px;
    height:50px;
    align-items:center;
    padding:0 16px;
    border:1px solid var(--border);
    border-radius:0;
    background:#fff;
    box-shadow:none;
}

.mailservice-memberlist-panel .mailservice-memberlist-mailservice-choice .checkbox-item + .checkbox-item{
    margin-top:8px;
}

.mailservice-memberlist-mailservice-choice .checkbox-control{
    margin-top:0;
}

.mailservice-memberlist-mailservice-choice .checkbox-text{
    line-height:1.35;
}

.mailservice-memberlist-mailservice-note{
    width:max-content;
    max-width:560px;
    min-height:50px;
    padding:14px 16px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--site-copy-color);
    font-size:15px;
    line-height:1.45;
    font-weight:650;
}

.mailservice-memberlist-email-field{
    min-width:0;
}

.mailservice-memberlist-code-form{
    max-width:640px;
}

.mailservice-memberlist-code-card{
    max-width:460px;
    padding:18px 20px;
    border:1px solid rgba(15,59,102,.16);
    border-top:3px solid var(--mail-brand);
    border-radius:0;
    background:#fff;
}

.mailservice-memberlist-code-card label{
    display:block;
    margin:0 0 8px;
    color:var(--mail-brand);
    font-size:14px;
    line-height:1.3;
    font-weight:850;
}

.mailservice-memberlist-code-card input{
    width:100%;
    max-width:220px;
    height:54px;
    padding:0 14px;
    border:1px solid rgba(15,59,102,.22);
    border-radius:0;
    color:var(--mail-text);
    font-size:24px;
    line-height:1;
    font-weight:850;
    letter-spacing:6px;
    text-align:center;
}

.mailservice-memberlist-code-card p{
    margin:10px 0 0;
    color:var(--mail-text-soft);
    font-size:13px;
    line-height:1.4;
    font-weight:700;
}

.mailservice-jahrestagung-panel{
    max-width:var(--content-max);
}

.mailservice-jahrestagung-panel .mailservice-memberlist-hero{
    max-width:none;
}

.mailservice-jahrestagung-unavailable{
    max-width:760px;
}

.mailservice-jahrestagung-status{
    display:grid;
    gap:6px;
    margin:2px 0 17px;
    padding-left:16px;
    border-left:4px solid var(--mail-gold);
}

.mailservice-jahrestagung-status span{
    color:var(--mail-gold);
    font-size:12px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mailservice-jahrestagung-status strong{
    color:var(--mail-brand);
    font-size:24px;
    line-height:1.18;
    font-weight:850;
}

.mailservice-jahrestagung-unavailable .view-section-text{
    max-width:720px;
    margin:0 0 6px;
}

.mailservice-jahrestagung-unavailable .view-section-text:last-child{
    margin-bottom:0;
}

.mailservice-jahrestagung-registration-grid{
    grid-template-columns:minmax(190px,250px) minmax(110px,140px) minmax(110px,140px) minmax(190px,250px);
    max-width:980px;
    align-items:start;
    gap:18px 18px;
}

.mailservice-jahrestagung-registration-grid .field{
    min-width:0;
}

.mailservice-jahrestagung-registration-grid label span{
    color:#64748b;
    font-size:12px;
    font-weight:700;
}

.mailservice-jahrestagung-registration-grid input[type="date"],
.mailservice-jahrestagung-registration-grid input[type="number"],
.mailservice-jahrestagung-registration-grid textarea{
    width:100%;
}

.mailservice-custom-dropdown{
    position:relative;
    display:block;
    width:100%;
}

.mailservice-custom-dropdown-button{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:52px;
    padding:0 46px 0 18px;
    border:1px solid rgba(15,59,102,.22);
    border-radius:0;
    background:#fff;
    color:#1f2937;
    font:inherit;
    font-size:16px;
    font-weight:750;
    line-height:1.2;
    text-align:left;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
    transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.mailservice-custom-dropdown-button::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:9px;
    height:9px;
    border-right:2px solid #64748b;
    border-bottom:2px solid #64748b;
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
}

.mailservice-custom-dropdown-button:hover{
    border-color:rgba(15,59,102,.42);
    background:#fbfdff;
}

.mailservice-custom-dropdown-button:focus{
    outline:2px solid rgba(15,59,102,.16);
    outline-offset:2px;
    border-color:#0f3b66;
}

.mailservice-custom-dropdown.is-open .mailservice-custom-dropdown-button{
    border-color:#0f3b66;
    box-shadow:0 8px 18px rgba(15,59,102,.10);
}

.mailservice-custom-dropdown.is-open .mailservice-custom-dropdown-button::after{
    transform:translateY(-35%) rotate(225deg);
}

.mailservice-custom-dropdown-menu{
    position:absolute;
    z-index:20;
    top:calc(100% + 6px);
    left:0;
    right:0;
    display:none;
    max-height:230px;
    overflow:auto;
    border:1px solid rgba(15,59,102,.24);
    border-radius:0;
    background:#fff;
    box-shadow:0 18px 34px rgba(15,23,42,.16);
    padding:6px;
}

.mailservice-custom-dropdown.is-open .mailservice-custom-dropdown-menu{
    display:block;
}

.mailservice-custom-dropdown-option{
    display:block;
    width:100%;
    min-height:42px;
    padding:10px 12px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#1f2937;
    font:inherit;
    font-size:15px;
    line-height:1.3;
    font-weight:750;
    text-align:left;
    cursor:pointer;
}

.mailservice-custom-dropdown-option:hover,
.mailservice-custom-dropdown-option:focus{
    outline:0;
    background:rgba(15,59,102,.07);
    color:#0f3b66;
}

.mailservice-custom-dropdown-option.is-selected{
    background:#0f3b66;
    color:#fff;
}

.mailservice-jahrestagung-remark{
    grid-column:1 / -1;
    max-width:640px;
}

.mailservice-jahrestagung-remark textarea{
    min-height:104px;
    resize:vertical;
}

.mailservice-unsubscribe-card{
    width:100%;
    max-width:720px;
    margin:26px 0 24px;
    border:0;
    border-top:2px solid var(--mail-brand);
    border-bottom:1px solid rgba(15,59,102,.18);
    border-radius:0;
    background:rgba(255,255,255,.32);
    box-shadow:none;
    overflow:hidden;
}

.mailservice-unsubscribe-card-header{
    display:grid;
    grid-template-columns:minmax(160px,190px) minmax(0,1fr);
    align-items:baseline;
    gap:22px;
    padding:16px 20px 15px;
    border-bottom:1px solid rgba(15,59,102,.10);
    background:rgba(15,59,102,.04);
}

.mailservice-unsubscribe-card-kicker{
    margin:0;
    color:var(--mail-brand);
    font-size:14px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:0;
    text-transform:none;
}

.mailservice-unsubscribe-card-name{
    color:var(--mail-brand);
    font-size:20px;
    line-height:1.3;
    font-weight:850;
}

.mailservice-unsubscribe-card-details{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
}

.mailservice-unsubscribe-card-detail{
    display:grid;
    grid-template-columns:minmax(160px,190px) minmax(0,1fr);
    gap:22px;
    min-width:0;
    padding:14px 20px 15px;
    border-top:1px solid rgba(15,59,102,.08);
}

.mailservice-unsubscribe-card-detail + .mailservice-unsubscribe-card-detail{
    border-left:0;
}

.mailservice-unsubscribe-card-detail span,
.mailservice-unsubscribe-card-detail strong{
    display:block;
}

.mailservice-unsubscribe-card-detail span{
    margin:0;
    color:var(--mail-text-soft);
    font-size:14px;
    line-height:1.35;
    font-weight:800;
}

.mailservice-unsubscribe-card-detail strong{
    color:var(--mail-text);
    font-size:16px;
    line-height:1.45;
    font-weight:750;
    overflow-wrap:anywhere;
}

.mailservice-layout .privacy-kicker{
    color:var(--mail-gold);
}

.mailservice-layout .privacy-text{
    color:var(--site-copy-color);
}

.mailservice-sidebar{
    --sidebar-footer-border:var(--mail-sidebar-border);
    --sidebar-note-color:var(--mail-text-soft);
    position:fixed;
    top:0;
    left:0;
    width:var(--sidebar-width);
    height:100vh;
    height:100dvh;
    background:var(--mail-sidebar-bg);
    border-right:1px solid var(--mail-sidebar-border);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:4px 16px 18px;
    z-index:1000;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

.mailservice-sidebar-top{
    display:flex;
    flex-direction:column;
    min-height:0;
    flex:1 1 auto;
}

.mailservice-sidebar-brand{
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid var(--mail-sidebar-border);
}

.mailservice-sidebar-title{
    font-size:21px;
    line-height:1.15;
    font-weight:800;
    color:var(--mail-brand);
    letter-spacing:-.01em;
}

.mailservice-sidebar-subtitle{
    margin-top:5px;
    font-size:10px;
    line-height:1.35;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--mail-gold);
}

.mailservice-nav{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.mailservice-nav-link{
    position:relative;
    display:block;
    padding:10px 12px 10px 14px;
    border-radius:0;
    color:#31485d;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    transition:background .18s ease,color .18s ease,padding-left .18s ease;
}

.mailservice-nav-link:hover,
.mailservice-nav-link:focus{
    background:rgba(15,59,102,.06);
    color:var(--mail-brand);
    padding-left:16px;
}

.mailservice-nav-link.is-active{
    background:var(--mail-brand);
    color:#f8fbff;
    padding-left:18px;
    box-shadow:0 8px 18px rgba(15,59,102,.18);
}

.mailservice-nav-link.is-active:hover,
.mailservice-nav-link.is-active:focus{
    background:var(--mail-brand-dark);
    color:#ffffff;
    padding-left:18px;
}

.mailservice-nav-link.is-active::before{
    content:"";
    position:absolute;
    left:7px;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:0;
    background:var(--mail-gold);
}

.mailservice-content{
    margin-left:var(--sidebar-width);
    min-height:100vh;
    padding:var(--site-content-pad);
    background:
        linear-gradient(rgba(245,243,238,0.52), rgba(245,243,238,0.52)),
        url('/shared/assets/sidebar-paper.jpg');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.mailservice-panel{
    width:100%;
    max-width:var(--content-max);
    margin:0 auto;
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
}

.mailservice-panel.is-narrow{
    max-width:var(--content-narrow);
}

.mailservice-panel.is-text{
    max-width:var(--content-text);
}
.mailservice-public-home{
    max-width:var(--content-max);
}
.mailservice-public-header{
    max-width:none;
}
.mailservice-association-subtitle{
    color:var(--mail-gold);
}
.mailservice-public-subtitle{
    margin:0 0 12px;
    letter-spacing:.10em;
    color:var(--mail-gold);
}
.mailservice-public-copy-section .view-section-text{
    display:block;
    max-width:none;
}
.mailservice-public-copy-section .view-section-text p{
    margin-block-start:1em;
    margin-block-end:1em;
}
.mailservice-public-side{
    min-width:0;
}
.mailservice-public-membership-card{
    min-height:220px;
}

@media (max-width:980px){
    .mailservice-public-main,
    .mailservice-public-side{
        display:contents;
    }

    .mailservice-public-copy-section:first-child{
        order:1;
    }

    .mailservice-public-copy-section:nth-child(2){
        order:2;
    }

    .mailservice-public-membership-card{
        order:3;
    }
}

@media (max-width:991px){
    .mailservice-layout,
    .mailservice-content,
    .mailservice-panel,
    .mailservice-public-home,
    .mailservice-public-grid,
    .mailservice-public-header,
    .mailservice-public-main,
    .mailservice-public-side{
        min-width:0;
        max-width:100%;
    }

    .mailservice-layout{
        width:100%;
        overflow-x:hidden;
    }

    .mailservice-content{
        width:100%;
        margin-left:0;
        padding:84px var(--site-content-pad-mobile) 44px;
        padding-top:calc(84px + var(--mobile-safe-top));
        padding-right:calc(var(--site-content-pad-mobile) + var(--mobile-safe-right));
        padding-bottom:calc(24px + var(--mobile-scroll-extra) + var(--mobile-safe-bottom));
        padding-left:calc(var(--site-content-pad-mobile) + var(--mobile-safe-left));
        overflow-x:hidden;
    }

    .mailservice-public-grid{
        grid-template-columns:minmax(0, 1fr);
    }

    .mailservice-layout .view-title,
    .mailservice-layout .view-section-title,
    .mailservice-layout .view-intro,
    .mailservice-layout .view-section-text,
    .mailservice-layout .start-join-text{
        overflow-wrap:break-word;
        word-break:normal;
        hyphens:none;
    }

    .mailservice-sidebar{
        box-shadow:var(--mail-shadow-mobile);
    }

    .mailservice-jahrestagung-registration-grid{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        max-width:720px;
    }

    .mailservice-jahrestagung-remark{
        max-width:none;
    }
}

@media (max-width:760px){
    .mailservice-progress{
        grid-template-columns:1fr;
    }

    .form-grid.mailservice-signup-grid{
        grid-template-columns:1fr;
    }

    .mailservice-jahrestagung-registration-grid{
        grid-template-columns:1fr;
        max-width:none;
    }

    .mailservice-memberlist-check-grid,
    .mailservice-memberlist-email-grid{
        grid-template-columns:1fr;
        max-width:none;
    }

    .mailservice-signup-member,
    .mailservice-signup-lastname,
    .mailservice-signup-email,
    .mailservice-signup-privacy{
        grid-column:auto;
        grid-row:auto;
    }

    .mailservice-memberlist-email-grid .mailservice-signup-email,
    .mailservice-memberlist-mailservice-option{
        grid-column:auto;
        grid-row:auto;
        justify-self:stretch;
    }

    .mailservice-signup-member input{
        max-width:none;
        text-align:left;
    }

    .mailservice-privacy-consent{
        width:100%;
        margin-top:0;
    }

    .mailservice-privacy-consent .checkbox-item{
        width:100%;
        height:auto;
        min-height:46px;
        padding:11px 16px;
    }

    .mailservice-privacy-consent .checkbox-text{
        line-height:1.55;
    }

    .mailservice-memberlist-mailservice-choice,
    .mailservice-memberlist-panel .mailservice-memberlist-mailservice-choice .checkbox-item,
    .mailservice-memberlist-mailservice-note{
        width:100%;
        max-width:none;
    }

    .mailservice-memberlist-panel .mailservice-memberlist-mailservice-choice .checkbox-item{
        height:auto;
        min-height:46px;
        padding:11px 16px;
    }

    .mailservice-unsubscribe-card{
        max-width:none;
        margin:22px 0;
    }

    .mailservice-member-summary{
        max-width:none;
        margin:22px 0;
    }

    .mailservice-member-summary-row{
        grid-template-columns:1fr;
        gap:5px;
        padding:13px 16px 15px;
    }

    .mailservice-unsubscribe-card-header{
        grid-template-columns:1fr;
        gap:5px;
        padding:15px 16px 14px;
    }

    .mailservice-unsubscribe-card-name{
        font-size:20px;
    }

    .mailservice-unsubscribe-card-details{
        grid-template-columns:1fr;
    }

    .mailservice-unsubscribe-card-detail{
        grid-template-columns:1fr;
        gap:5px;
        padding:13px 16px 15px;
    }

    .mailservice-unsubscribe-card-detail + .mailservice-unsubscribe-card-detail{
        border-left:0;
        border-top:1px solid rgba(15,59,102,.10);
    }

    .mailservice-memberlist-panel .checkbox-stack,
    .mailservice-memberlist-fields .checkbox-stack{
        grid-template-columns:1fr;
    }

    .mailservice-memberlist-code-card input{
        max-width:100%;
    }
}