.cal-blk { margin: 0 0 10px; }
.cal-blk:last-child { margin-bottom: 0; }

.cal-blk-heading { font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.cal-blk-h-sm { font-size: 14px; }
.cal-blk-h-md { font-size: 17px; }
.cal-blk-h-lg { font-size: 21px; }
.cal-blk-h-xl { font-size: 26px; }

.cal-blk-paragraph { line-height: 1.55; margin: 0 0 8px; }
.cal-blk-p-sm { font-size: 12px; }
.cal-blk-p-md { font-size: 14px; }

.cal-blk-align-left { text-align: left; }
.cal-blk-align-center { text-align: center; }
.cal-blk-align-right { text-align: right; }
.cal-blk-align-block { text-align: left; align-self: stretch; }
/* The hover/focus/active/visited states below carry the same specificity as a
   plain ".cal-blk-align-block .cal-cbtn" and come later in the file, so they
   used to win and flip a full-width button back to inline-flex on hover - which
   dropped its icon and label to the far left. Matching their state list keeps
   the button centred in every state.

   flex rather than block, so the base rule's icon gap and vertical centring
   still apply; text-align alone cannot centre flex children. */
.cal-blk-align-block .cal-cbtn,
.cal-blk-align-block .cal-cbtn:hover,
.cal-blk-align-block .cal-cbtn:focus,
.cal-blk-align-block .cal-cbtn:active,
.cal-blk-align-block .cal-cbtn:visited {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
}

.cal-blk-heading,
.cal-blk-paragraph,
.cal-blk-divider,
.cal-blk-html {
    align-self: stretch;
}

.cal-cbtn,
.cal-cbtn:hover,
.cal-cbtn:focus,
.cal-cbtn:active,
.cal-cbtn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    font-weight: 600;
    border: 1px solid #337ab7;
    cursor: pointer;
    line-height: 1.4;
}
.cal-cbtn-solid { background: #337ab7; color: #fff; }
.cal-cbtn-outline { background: transparent; color: #337ab7; }
.cal-cbtn-gradient { background: linear-gradient(90deg, #337ab7, #5bc0de); color: #fff; border-color: transparent; }

.cal-cbtn-sm { padding: 5px 12px; font-size: 12px; }
.cal-cbtn-md { padding: 8px 16px; font-size: 13px; }
.cal-cbtn-lg { padding: 11px 22px; font-size: 15px; }

.cal-cbtn-radius-sm { border-radius: 3px; }
.cal-cbtn-radius-md { border-radius: 6px; }
.cal-cbtn-radius-lg { border-radius: 12px; }
.cal-cbtn-radius-pill { border-radius: 999px; }

.cal-blk-badge {
    display: inline-block;
    background: #eef4ff;
    color: #1a4d80;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 10px;
    border-radius: 999px;
}

/* Surface the section's blocks are drawn on. No styling of its own - every
   visible property comes from the admin's design values, so an enabled but
   unstyled background is invisible rather than a stray grey box.

   position:relative so an image block set to Behind or Over has something to
   be positioned against; without it the image would escape to the page. */
.cal-section-bg,
.whmp-cal-section { display: block; position: relative; }

/* An image lifted out of the flow: Behind sits under the other blocks, Over
   sits on top of them. Over is click-through, otherwise it would swallow every
   button and link underneath it.

   align-items/justify-content default to flex-start so the Vertical and
   Horizontal controls have something to act on. Without them the flex default
   (stretch) made the image fill the box and all three vertical options looked
   identical. */
.cal-blk-image.cal-blk-img-layer-behind,
.cal-blk-image.cal-blk-img-layer-front {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
}
.cal-blk-image.cal-blk-img-layer-behind { z-index: 0; }
.cal-blk-image.cal-blk-img-layer-front { z-index: 5; pointer-events: none; }
.cal-blk-image.cal-blk-img-layer-front a { pointer-events: auto; }

/* Vertical and horizontal placement INSIDE a layered image. These only mean
   anything here: in normal flow the block is exactly as tall as its image, so
   there is no spare height for top/centre/bottom to move it through. */
.cal-blk-img-layer-behind.cal-blk-imgv-top,
.cal-blk-img-layer-front.cal-blk-imgv-top { align-items: flex-start; }
.cal-blk-img-layer-behind.cal-blk-imgv-center,
.cal-blk-img-layer-front.cal-blk-imgv-center { align-items: center; }
.cal-blk-img-layer-behind.cal-blk-imgv-bottom,
.cal-blk-img-layer-front.cal-blk-imgv-bottom { align-items: flex-end; }
.cal-blk-img-layer-behind.cal-blk-imgh-left,
.cal-blk-img-layer-front.cal-blk-imgh-left { justify-content: flex-start; }
.cal-blk-img-layer-behind.cal-blk-imgh-center,
.cal-blk-img-layer-front.cal-blk-imgh-center { justify-content: center; }
.cal-blk-img-layer-behind.cal-blk-imgh-right,
.cal-blk-img-layer-front.cal-blk-imgh-right { justify-content: flex-end; }

/* The remaining blocks need a stacking context of their own, or a Behind image
   would paint over them instead of under.

   The preview wrappers are listed alongside the client-area ones: the preview
   builds its own markup, so without them a Behind image sat on top of the
   content in the editor while rendering correctly on the site. */
.cal-section-bg > .cal-blk:not(.cal-blk-img-layer-behind):not(.cal-blk-img-layer-front),
.whmp-cal-section > .cal-blk:not(.cal-blk-img-layer-behind):not(.cal-blk-img-layer-front),
.cal_preview_section_bg > .cal-blk:not(.cal-blk-img-layer-behind):not(.cal-blk-img-layer-front),
.cal_preview_section > .cal-blk:not(.cal-blk-img-layer-behind):not(.cal-blk-img-layer-front),
.cal_blocks_preview > .cal-blk:not(.cal-blk-img-layer-behind):not(.cal-blk-img-layer-front),
.cal_slide_preview_wrap > .cal-blk:not(.cal-blk-img-layer-behind):not(.cal-blk-img-layer-front) {
    position: relative;
    z-index: 1;
}

.cal-blk-divider { border-top: 1px solid #e0dfdf; margin: 12px 0; }

.cal-blk-image { margin: 0 0 8px; text-align: inherit; }
.cal-blk-img-el { max-width: 100%; height: auto; display: inline-block; }
.cal-blk-img-radius-sm { border-radius: 3px; }
.cal-blk-img-radius-md { border-radius: 6px; }
.cal-blk-img-radius-lg { border-radius: 12px; }
.cal-blk-img-radius-full { border-radius: 50%; }
.cal-blk-html { width: 100%; }

.whmp-cal-element-content {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
    position: relative;
}
.whmp-cal-element-content > .cal-blk:first-child,
.whmp-cal-section > .cal-blk:first-child { margin-top: 0; }
.whmp-cal-element-content > .cal-blk:last-child,
.whmp-cal-section > .cal-blk:last-child { margin-bottom: 0; }
.whmp-cal-section { box-sizing: border-box; max-width: 100%; }
.whmp-cal-section + .whmp-cal-section { margin-top: 18px; }
.whmp-cal-element-content img { max-width: 100%; height: auto; }
.panel-body > .whmp-cal-element-content:not(:first-child),
.card-body > .whmp-cal-element-content:not(:first-child) { margin-top: 12px; }


.whmp-cal-element-content,
.whmp-cal-element-content.whmp-cal-element-content {
    box-sizing: border-box !important;
    display: block !important;
}

.cal-blk-imgh-left { text-align: left; }
.cal-blk-imgh-center { text-align: center; }
.cal-blk-imgh-right { text-align: right; }
.cal-blk-imgv-top { align-items: flex-start; }
.cal-blk-imgv-center { display: flex; min-height: 100%; align-items: center; }
.cal-blk-imgv-bottom { display: flex; min-height: 100%; align-items: flex-end; }
.cal-blk-imgv-center.cal-blk-imgh-center, .cal-blk-imgv-bottom.cal-blk-imgh-center { justify-content: center; }
.cal-blk-imgv-center.cal-blk-imgh-right, .cal-blk-imgv-bottom.cal-blk-imgh-right { justify-content: flex-end; }