/************************************************************************
 *  File    : vm-isa-maturities.css
 *  Author  : Incremental Group
 *  Date    : 18th May 2023
************************************************************************/

:root {
    /* colours */
    --vm-white: #ffffff;
    --vm-black: #000000;
    --vm-red: #E10A0A;
    --vm-red-line: #C20000;
    --vm-green: #D3E629;
    --vm-grey: #DFE3E6;
    --vm-orange: #FF7300;
    --vm-dark-grey: #6D7173;
    --vm-blue-black: #1e2332;
    --vm-message-default:#FAFAFA;
    --vm-message-success:#E9F294;
    --vm-message-error:#ffad9d;
    --vm-message-warning:#FFA441;

    /* fonts */
    --ff-loop: "VirginMoneyLoopMedium", Helvetica, Arial, sans-serif;
    --ff-loop-l: "VirginMoneyLoop", Helvetica, Arial, sans-serif;
    --ff-sans: "VirginMoneySans", Helvetica, Arial, sans-serif;
    --ff-sans-m: "VirginMoneySansMedium", Helvetica, Arial, sans-serif;
    --ff-inte: "Inter", Helvetica, Arial, sans-serif;
    --ff-inte-m: "InterSemiBold", Helvetica, Arial, sans-serif;

    /* images */
    --ic-window: url(/assets/img/vm-icon-new-window.svg);
    --ic-downarrow: url(/assets/img/vm-icon-down-arrow.svg);
    --ic-exclamation: url(/assets/img/vm-icon-exclamation.svg);
    --ic-info: url(/assets/img/vm-icon-info.svg);
    --ic-tick: url(/assets/img/vm-icon-tick.svg);
    --ic-tick-white: url(/assets/img/vm-icon-tick-white.svg);
    --ic-plus: url(/assets/img/vm-icon-plus.svg);
    --ic-bell: url(/assets/img/vm-icon-bell.svg);
	--ic-search: url(/assets/img/vm-search.svg);
    --ic-dropdown: url(/assets/img/vm-chevron-down.svg);
	
    /* input sizes */
    --si-height: 48px;
    --si-width: 560px;
    --si-width-small: 300px;
    --si-width-full: 100%;

    /* margins */
    --ma-14: 14px;
    --ma-16: 16px;
    --ma-18: 18px;
    --ma-21: 21px;
    --ma-24: 24px;
    --ma-32: 32px;
    --ma-38: 38px;
    --ma-48: 48px;
    --ma-80: 80px;
    
    /* font sizes */
    --fs-14:0.875rem;           /* 14 */
    --fs-16:1rem;               /* 16 */
    --fs-18:1.125rem;           /* 18 */
    --fs-21:1.313rem;           /* 21 */
    --fs-24:1.5rem;             /* 24 */
    --fs-28:1.75rem;            /* 28 */
    --fs-32:2rem;               /* 32 */
    --fs-36:2.25rem;            /* 36 */
    --fs-40:2.5rem;             /* 40 */
    --fs-48:3rem;               /* 48 */
    --fs-54:3.375rem;           /* 54 */
    --fs-60:3.75rem;            /* 60 */
    --fs-80:5rem;               /* 80 */
}

/************************************************************************
 * DEBUG
************************************************************************/

#debug { position:fixed; left:0px; bottom:0px; padding:20px; z-index:100; display:none; }


/************************************************************************
 * VM CONTAINER
************************************************************************/

#vm-container { margin:0px auto; font-family:var(--ff-inte); font-size:var(--fs-16); }
#vm-container .container a:hover { opacity:0.8; }
#vm-container h1 { color:var(--vm-white); font-size:var(--fs-80); letter-spacing:-1.5px; font-family:var(--ff-loop); font-feature-settings: "calt" 0; }
#vm-container h2 { color:var(--vm-red); font-size:var(--fs-48); letter-spacing:-0.75px; margin:0px; margin-bottom:var(--ma-32); font-family:var(--ff-sans); }
#vm-container h3 { color:var(--vm-red); font-size:var(--fs-32); letter-spacing:-0.75px; margin:0px; margin-bottom:var(--ma-48); font-family:var(--ff-sans); }
#vm-container h4 { color:var(--vm-red); font-size:var(--fs-24); letter-spacing:-0.75px; margin:0px; margin-bottom:var(--ma-32); font-family:var(--ff-sans-m); }
#vm-container p { color:var(--vm-black); font-family:var(--ff-inte); font-size:var(--fs-16); font-weight:300; }
#vm-container h2:focus-visible { outline:0px; }

/************************************************************************
 * FONTS
************************************************************************/

/*  src: url("/assets/fonts/vm-loop-regular.woff2") format('woff2'), url("/assets/fonts/vm-loop-regular.woff") format('woff'); */

@font-face { font-family: "VirginMoneyLoop"; src: url("/assets/fonts/vm-loop-light.woff") format("woff"); font-weight:normal; font-style:normal; }
@font-face { font-family: "VirginMoneyLoopMedium"; src: url("/assets/fonts/vm-loop-regular.woff") format('woff'); font-weight:normal; font-style:normal;  }
@font-face { font-family: "VirginMoneySans"; src: url("/assets/fonts/vm-sans-regular.woff2") format('woff2'); font-weight:normal; font-style:normal;   }
@font-face { font-family: "VirginMoneySansMedium"; src: url("/assets/fonts/vm-sans-medium.woff2") format('woff2'); font-weight:bold;  }
@font-face { font-family: "InterSemiBold"; src: url("/assets/fonts/vm-inter-semibold.woff2") format('woff2'); font-style:italic; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/vm-inter-light.woff2") format('woff2'); font-style:italic; }

/************************************************************************
 * LOGO
************************************************************************/

#vm-logo { position:relative; padding:30px 114px; }
#vm-logo img { max-width:198px; height:auto; }
#vm-logo a { opacity:1; display:block; }

/************************************************************************
 * HEAD
************************************************************************/

#vm-head { background:var(--vm-red); padding:102px 120px; position:relative; z-index:-1; overflow:hidden; min-height:20rem; }
#vm-head .vm-heading { color:var(--vm-white); font-size:var(--fs-80); letter-spacing:-1.5px; font-family:var(--ff-loop); font-feature-settings: "calt" 0; }
#vm-head .vm-pattern { position:relative; width:100%; }
#vm-head .vm-pattern svg { position:absolute; transform:translate(-50%, -50%) rotate(90deg); transform-origin:49% 68%; left:90%; top:50%; height:18rem; z-index:-1; }
#vm-head .vm-pattern svg { fill:none; stroke:var(--vm-red-line); stroke-width:32; stroke-dasharray:5786px; stroke-dashoffset:4326px; animation:3s ease-out draw-in 0.5s forwards; }
@keyframes draw-in { 0% { stroke-dashoffset:4326px; stroke-dasharray:5786px; } 100% { stroke-dashoffset:1460px; stroke-dasharray:5786px; } }

/************************************************************************
 * BODY
************************************************************************/

#vm-body { padding:80px 25%; counter-reset:step; }
#vm-body .vm-strapline { font-size:var(--fs-21); margin-bottom:22px; font-family:var(--ff-sans); }
#vm-body .vm-sub  { font-size:var(--fs-21); margin-bottom:var(--ma-48); font-weight:300; }
#vm-body .vm-window { background:var(--ic-window) no-repeat right center; padding-right:30px; margin-right:10px; }
#vm-body small { font-size:var(--fs-14); margin-bottom:var(--ma-38); display:block; }
#vm-body small strong { font-weight:bold; font-family:var(--ff-sans-m); }
#vm-body p a { color:var(--vm-black); text-decoration:underline; position:relative; }

/************************************************************************
 * BODY > FULL
************************************************************************/

#vm-body.full { padding:80px 195px; }

/************************************************************************
 * BODY > START
************************************************************************/

#vm-body .welcome h2 { font-size:var(--fs-60); font-family:var(--ff-sans); letter-spacing:-1px; margin-bottom:var(--ma-32); }
#vm-body .welcome .vm-sub { font-size:var(--fs-28); font-family:var(--ff-sans); letter-spacing: -0.25px; }
#vm-body .welcome h4 { color:var(--vm-black); }

/************************************************************************
 * PROGRESS BAR
************************************************************************/

#vm-progress ul { background:var(--vm-message-default); display:flex; justify-content: space-between;align-items: center; padding:32px; box-shadow: 0 1px 0 0 var(--vm-grey); margin:0px; }
#vm-progress ul { counter-reset:step 0; }
#vm-progress ul li { list-style:none; display:inline-block; width:30.33%; position:relative; text-align:center; cursor:pointer; }
#vm-progress ul li:before {content:counter(step); counter-increment:step; width:32px; height:32px; line-height:28px; border:1px solid var(--vm-grey); border-radius:100%; display:block; text-align:center; margin:0 auto 10px auto; background-color:#fff; font-family:var(--ff-inte-m); color:#6D7173; }
#vm-progress ul li:after { content:""; position:absolute; width:75%; height:2px; background:var(--vm-red); top:15px; left:-45%; z-index:1; }
/* vm-progress ul li:nth-child(1):after { content:none; } */
#vm-progress ul li:nth-child(2):after { content:none; }
#vm-progress ul li.active { color:#000000; font-family:var(--ff-inte-m); }
#vm-progress ul li.active:before { background:var(--vm-red); border-color:var(--vm-red); color:#ffffff; } 
#vm-progress ul li.complete:before { /*content:"";*/ text-indent:-500px; background:var(--ic-tick-white) no-repeat center center var(--vm-red); background-size:50%; border-color:var(--vm-red); color:#ffffff; } 
#vm-progress #vm-mobile-progress { display:none; }

/************************************************************************
 * FORM
************************************************************************/

/* summary */
.vm-form .summary { font-family:var(--ff-sans); font-size:var(--fs-18); margin:60px 0px; }

/* message */
.vm-form .form-message { margin-bottom:54px; background:var(--vm-grey); position:relative; }
.vm-form .form-message .inner { background:var(--vm-message-default); margin-left:80px; padding:32px 35px; padding-top:25px; }
.vm-form .form-message .head { font-size:var(--fs-32); font-family:var(--ff-sans-m); letter-spacing:-0.5px; margin-bottom:10px; }
.vm-form .form-message .body { font-size:var(--fs-16); margin-bottom:30px; }
.vm-form .form-message .body:last-child { margin-bottom:0px; }
.vm-form .form-message ul { list-style:none; margin:0px; padding:0px 15px; }
.vm-form .form-message ul li { padding:5px 0px; background: var(--ic-downarrow) no-repeat left center; padding-left:25px; }
.vm-form .form-message ul li a { color:var(--vm-black); text-decoration:underline; }
.vm-form .form-message .glyphicon { position:absolute; left:24px; top:24px; font-size:var(--fs-32) }
.vm-form .form-message.success { background:var(--vm-green); }
.vm-form .form-message.success .inner { background:var(--vm-message-success); }
.vm-form .form-message.error { background:var(--vm-red);  }
.vm-form .form-message.error .inner { background:var(--vm-message-error); }
.vm-form .form-message.warning { background:var(--vm-orange); }
.vm-form .form-message.warning .inner { background:var(--vm-message-warning); }
.vm-form .form-message .vm-icon { position:absolute; width:32px; height:32px; left:24px; top:30px; }
.vm-form .form-message .vm-icon.vm-error { background:var(--ic-exclamation) no-repeat center center; background-size:100%; }
.vm-form .form-message .vm-icon.vm-info { background:var(--ic-info) no-repeat center center; background-size:100%; }
.vm-form .form-message .vm-icon.vm-tick { background:var(--ic-tick) no-repeat center center; background-size:100%; }
.vm-form .form-message .vm-icon.vm-bell { background:var(--ic-bell) no-repeat center center; background-size:auto; }
.vm-form .form-message.short { margin-bottom:var(--ma-48); width:var(--si-width);  }

/* inputs sizes */
.vm-form .form-group { margin-bottom:var(--ma-48); width:var(--si-width); }
.vm-form .form-group.full { margin-bottom:var(--ma-48); width:var(--si-width-full); }
.vm-form .form-group.small { margin-bottom:var(--ma-48); }
.vm-form .form-group.small .input-with-icon { width:var(--si-width-small); }

/* inputs */
.vm-form .form-group label { font-family:var(--ff-sans-m);  font-size:var(--fs-18); margin-bottom:var(--ma-16); }
.vm-form .form-group .form-control { background-color:var(--vm-white); border:1px solid var(--vm-dark-grey); width:100%; padding:13px 15px; height:var(--si-height); border-radius:0px; font-size:var(--fs-16); position:relative;  }
.vm-form .form-group .form-control:focus-visible { outline:1px solid var(--vm-black); border:1px solid var(--vm-black); box-shadow:none; } /* was red before */
.vm-form .form-group .form-control.search { background:var(--ic-search) no-repeat left 15px top 12px; padding-left:50px; }
.vm-form .form-group select.form-control { -webkit-appearance:none; -moz-appearance:none; background:var(--ic-dropdown) no-repeat right 15px center; }
.vm-form .form-group select.form-control::-ms-expand { display:none; }
.vm-form .form-group .input-help { margin:0px; color:var(--vm-dark-grey); font-size:var(--fs-14); margin-top:-5px; margin-bottom:var(--ma-16); pointer-events:none; }
.vm-form .form-group .input-help a { text-decoration:none; border:0px; color:inherit; }
.vm-form .form-group .input-error { display:none; color:var(--vm-red); font-family:var(--ff-inte-m); margin-bottom:25px; margin-top:-5px; }
.vm-form .form-group textarea.form-control { min-height:200px; width:100%; resize:none; }
.vm-form .form-group p { margin-bottom:30px; }
.vm-form .form-group p a { color:var(--vm-black);; text-decoration:underline; position:relative; }
.vm-form .form-group hr { height:1px; background:#cccccc; border:0px; margin-bottom:var(--ma-48); }
.vm-form .form-group .input-with-icon { position:relative; }
.vm-form .form-group .input-with-icon input { padding-left:40px; }
.vm-form .form-group .input-with-icon span.pound::before { content:'\00A3'; position: absolute; font-family:var(--ff-sans); font-size:var(--fs-18); top:11px; left:16px; z-index:10; } 
.vm-form .form-group .signature-help::before { content:"Click and hold your mouse to sign below"; }
.vm-form .form-group .signature-clear { text-align:right; margin-top:16px; }
.vm-form .form-group .signature-clear a { text-decoration:none; }
.vm-form .form-group .provider-container { }
.vm-form .form-group .provider-container ul { list-style:none; margin:0px; padding:10px; background:#eeeeee; }
.vm-form .form-group .provider-container li { padding:8px; }
.vm-form .form-group .provider-container li:hover { cursor:pointer; background:#e3e3e3; }
.vm-form .form-group .provider-container li:focus, .vm-form .form-group .provider-container li:focus-visible { background:#ccc; outline:none; }
.vm-form .form-group legend { font-family:var(--ff-sans-m);  font-size:var(--fs-18); margin-bottom:var(--ma-16); border:0px; }
.vm-form .form-group #signature:focus-visible { outline:1px solid var(--vm-black); border:1px solid var(--vm-black); box-shadow:none; } /* was red before */
.vm-form .form-group #signature:focus { outline:1px solid var(--vm-black); border:1px solid var(--vm-black); box-shadow:none; } /* was red before */

#signature-wrapper:focus-visible { outline:1px solid var(--vm-black); border:1px solid var(--vm-black); box-shadow:none; } /* was red before */
#signature-wrapper:focus { outline:1px solid var(--vm-black); border:1px solid var(--vm-black); box-shadow:none; } /* was red before */


/* form a */
.vm-form .form-group.border { border-top:2px solid var(--vm-grey); margin-bottom:var(--ma-48); padding-top:var(--ma-48); }

.vm-form .form-group a { border-bottom:1px solid #000000; padding-bottom:3px; color:#000000; }

/* indent */
.vm-form .indent { border-left:4px solid var(--vm-grey); padding-left:16px; /* margin-top:-30px; */ width:var(--si-width); }
.vm-form .indent .form-group { width:width:var(--si-width-full); }
.vm-form .indent .form-group.invalid { margin-left:-20px; }
.vm-form .indent.invalid { border-left:4px solid var(--vm-red); }

/* error styling */
.vm-form .form-group.invalid { border-left:4px solid var(--vm-red); padding-left:15px; margin-left:-15px; width:575px;  }
.vm-form .form-group.invalid.full { width:100%; }
.vm-form .form-group.invalid .form-control { border:1px solid var(--vm-red); /* width:70%; */ }
.vm-form .form-group.invalid .form-control:focus-visible { border:1px solid var(--vm-red); outline:1px solid var(--vm-red); }
.vm-form .form-group.invalid .input-error { display:block; }
.vm-form .form-group.invalid .form-control:focus { /*outline:1px solid var(--vm-red);*/ box-shadow:none; }

/* dob control */
.vm-form .form-group .vm-inline { display:flex; }
.vm-form .form-group .vm-inline .form-control { display:inline-block; margin-right:15px; }

/* sizing */
.vm-form .form-group .form-control.one-char { width:45px; }
.vm-form .form-group .form-control.two-char { width:60px; }
.vm-form .form-group .form-control.three-char { width:70px; }
.vm-form .form-group .form-control.four-char { width:80px; } 
.vm-form .form-group .form-control.five-char { width:90px; }
.vm-form .form-group .form-control.six-char { width:105px; }
.vm-form .form-group .form-control.seven-char { width:115px; }
.vm-form .form-group .form-control.fifteen-char { width:190px; }
.vm-form .form-group .form-control.half { width:50% }
.vm-form .form-group .form-control.quarter { width:25% }

/* expand */
.vm-form .vm-expand { margin-top:35px; position:relative; }
.vm-form .vm-expand a::before { content:""; position:absolute; left:0px; top:2px; width:16px; height:16px; transition:transform .35s; mask:var(--ic-plus) no-repeat center center; mask-size:100%; -webkit-mask-image:var(--ic-plus); -webkit-mask-size:100%; background-size:100%; background-color:var(--vm-black); }
.vm-form .vm-expand a[aria-expanded="true"]{ color:var(--vm-red); border-bottom:1px solid var(--vm-red);  }
.vm-form .vm-expand a[aria-expanded="true"]::before { transform:rotate(45deg); transform-origin: 50% 50%; color:var(--vm-red); background-color:var(--vm-red); margin: -1px; }
.vm-form .vm-expand a { font-family:var(--ff-sans-m); border-bottom:1px solid var(--vm-black); padding-bottom:2px; color:var(--vm-black); text-decoration:none; margin-left:20px;  }
.vm-form .vm-expand a:hover { outline:none; }
.vm-form .vm-expand .result { padding:12px 20px; padding-bottom:0px; }
.vm-form .vm-expand .result p { margin:0px; padding:0px; }

/* buttons */
.vm-form .btn { border-radius:0px; border:0px; padding:20px 32px; font-size:var(--fs-18); margin-right:9px; outline-offset:0; font-family:var(--ff-sans-m); }
.vm-form .btn.btn-thin { padding:12px 24px; font-size:var(--fs-16); }
.vm-form .btn.btn-default { border:1px solid var(--vm-red); color:var(--vm-red); background:var(--vm-white); }
.vm-form .btn.btn-default:hover { outline:0px solid var(--vm-red); background:var(--vm-red); color:var(--vm-white); outline-offset:0; opacity:1 !important; }
.vm-form .btn.btn-default:active { outline:0px solid #c20000; background:#c20000; color:var(--vm-white); outline-offset:0; opacity:1 !important;  }
.vm-form .btn.btn-default:focus { outline:2px solid var(--vm-black); background:var(--vm-red); color:var(--vm-white); outline-offset:0; opacity:1 !important; }
.vm-form .btn.btn-primary { border:1px solid var(--vm-red); background:var(--vm-red); color:var(--vm-white);  }
.vm-form .btn.btn-primary:hover { outline:0px solid var(--vm-red); background:#e73b3b; outline-offset:0; opacity:1 !important; }
.vm-form .btn.btn-primary:active { outline:0px solid #c20000; background:#c20000; color:var(--vm-white); outline-offset:0; opacity:1 !important;  }
.vm-form .btn.btn-primary:focus { outline:2px solid var(--vm-black); background:#e73b3b; color:var(--vm-white); outline-offset:0; opacity:1 !important; }

/* options */
.vm-form .options { position:relative; }
.vm-form .options input { position:absolute; opacity:0; pointer-events:none; appearance:initial; }
.vm-form .options input:focus-visible + label { outline: 1px solid var(--vm-black); border:1px solid var(--vm-black); } 
/*.vm-form .options input:focus-visible + label { outline: 1px solid var(--vm-red); border:1px solid var(--vm-red); } */
/* .vm-form .options input:focus-visible + label::before { border:1px solid var(--vm-red); } */
.vm-form .options label { padding:15px; background:var(--vm-message-default); display:inline-flex; border:1px solid var(--vm-grey); align-items:center; margin-right:12px; cursor:pointer; margin-bottom:0px; }
.vm-form .options label::before { background: var(--vm-white); width:22px; height:22px; flex-shrink:0; border-radius:50%; content:''; display:inline-block; margin:0px; margin-right:15px; border:1px solid var(--vm-dark-grey); }
.vm-form .options label:hover { border:1px solid var(--vm-dark-grey); }
.vm-form .options label:hover::before { background:radial-gradient(var(--vm-black) 35%, var(--vm-white) 38%); border:1px solid var(--vm-dark-grey);  }
.vm-form .options input:checked + label { background:var(--vm-blue-black); color:var(--vm-white); border:1px solid var(--vm-blue-black); }
.vm-form .options input:checked + label::before { background:radial-gradient(var(--vm-black) 35%, var(--vm-white) 38%); border:1px solid var(--vm-blue-black); }
.vm-form .options.block label { display:flex; margin:0px; margin-bottom:16px; width:100%;  }
.vm-form .options label:focus { outline:1px solid var(--vm-black);  }

/* checkboxes */
.vm-form .checkboxes input { position:absolute; opacity:0; pointer-events:none; appearance:initial; }
.vm-form .checkboxes input:focus-visible + label { outline: 1px solid var(--vm-black); border:1px solid var(--vm-black); }
/* .vm-form .checkboxes input:focus-visible + label { outline: 1px solid var(--vm-red); border:1px solid var(--vm-red); } */
.vm-form .checkboxes label { position:relative; padding-left:35px; cursor:pointer; }
.vm-form .checkboxes label:before { content:""; position:absolute; left:0; top:2px; width:25px; height:25px; border:1px solid var(--vm-dark-grey); background-color:var(--vm-white);  }
.vm-form .checkboxes input:checked + label:before { background-color:var(--vm-blue-black); border-color:var(--vm-blue-black); }
.vm-form .checkboxes label:after { content:""; position:absolute; display:none; }
.vm-form .checkboxes input:checked + label:after { display:block; }
.vm-form .checkboxes label:after { left:10px; top:7px; width:5px; height:12px; border:solid var(--vm-white); border-width:0 2px 2px 0; transform:rotate(45deg); }
.vm-form .checkboxes label:hover:before { background-color:var(--vm-grey); }
.vm-form .checkboxes input:checked + label:hover:before { background-color:var(--vm-blue-black); }

/* checkboxes */
.vm-form .next-steps { counter-reset:step-counter; padding:0px; margin-bottom:var(--ma-48); }
.vm-form .next-steps span { font-family:var(--ff-inte-m); display:block; }
.vm-form .next-steps li {list-style:none; position:relative; padding-left:52px; margin-bottom:40px; }
.vm-form .next-steps li:before { content:counter(step-counter); counter-increment:step-counter; position:absolute; left:0; top:0; width:32px; height:32px; border:1px solid var(--vm-red);; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; color:var(--vm-red);; font-size:var(--fs-18); }
.vm-form .next-steps li:last-child { margin:0px; }
.vm-form .next-steps p { margin:0px; padding:0px;  }

/* checkboxes */
.vm-form .start-steps { padding:0px; margin-bottom:var(--ma-48); }
.vm-form .start-steps span { font-family:var(--ff-sans-m); display:block; font-size:var(--fs-18); }
.vm-form .start-steps li {list-style:none; position:relative; padding-left:52px; margin-bottom:40px; }
.vm-form .start-steps li:before { content:""; position:absolute; left:0; top:0; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; color:var(--vm-red); font-size:var(--fs-18); mask:url("/assets/img/vm-icon-tick.svg") no-repeat center center; mask-size:100%; -webkit-mask-image:url("/assets/img/vm-icon-tick.svg"); -webkit-mask-size:100%; background-size:100%; background-color:var(--vm-red); }
.vm-form .start-steps li:last-child { margin:0px; }
.vm-form .start-steps p { margin:0px; padding:0px; }

.vm-form .investment-heading { position:relative; }
.vm-form .investment-heading a { position:absolute; right:0; top:5px; text-decoration:none !important; }

/* text formatting */
.text-formatting p { font-size:var(--fs-16); padding-bottom:var(--ma-24); line-height:24px; color:var(--vm-black); }
.text-formatting a { font-family:var(--ff-inte-m); color:#000000; text-decoration:underline; font-weight:normal; }
.text-formatting a:hover, .text-formatting a:focus { color:#000000; }
.text-formatting p strong { font-family:var(--ff-inte-m); font-weight:normal; }

/* table */
.vm-table { width:100%; margin-bottom:var(--ma-80); }
.vm-table thead { font-family:var(--ff-sans); font-size:var(--fs-18); }
.vm-table thead a { border-bottom:1px solid #000000; padding-bottom:5px; color:#000000; text-decoration:none; }
.vm-table thead th { padding:16px; border-bottom:2px solid var(--vm-grey); border-top:2px solid var(--vm-grey); }
.vm-table thead td { padding:16px; border-bottom:2px solid var(--vm-grey); border-top:2px solid var(--vm-grey); }
.vm-table tbody th { padding:16px; border-bottom:1px solid var(--vm-grey); font-family:var(--ff-sans-m);  }
.vm-table tbody td { padding:16px; border-bottom:1px solid var(--vm-grey); font-weight:300; }
.vm-table .vm-grey { background:var(--vm-message-default); font-family:var(--ff-sans); font-size:var(--fs-18); }
.vm-table.last { margin-bottom:var(--ma-48); }

/* button container */
.btn-container { display:flex; }

/************************************************************************
 * SIGNATURE
************************************************************************/

#signature-wrapper {  position:relative; width:100%; height:200px; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
#signature-wrapper .signature { position:absolute; left:0; top:0; right:0px; bottom:0px; background-color:white; border:1px solid #000000; width:100%; height:200px; }

/************************************************************************
 * FOOT
************************************************************************/

#vm-foot { height:145px; background:var(--vm-blue-black); position:relative; }

/************************************************************************
 * LOAD
************************************************************************/

#vm-load { position:fixed; left:0px; right:0px; top:0px; bottom:0px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.95); z-index:100; }
#vm-load-content { text-align: center; }
#vm-load-content div { font-family:var(--ff-loop); font-feature-settings: "calt" 0; font-size:var(--fs-48); color:var(--vm-red); display:block; }
#vm-load-content svg { max-width:150px; }

/************************************************************************
 * MARGINS
************************************************************************/

.mb-14 { margin-bottom:14px; }
.mb-16 { margin-bottom:16px; }
.mb-18 { margin-bottom:18px; }
.mb-21 { margin-bottom:21px; }
.mb-24 { margin-bottom:24px; }
.mb-32 { margin-bottom:32px; }
.mb-38 { margin-bottom:38px; }
.mb-42 { margin-bottom:42px; }
.mb-48 { margin-bottom:48px; }
.mb-80 { margin-bottom:80px; }

/************************************************************************
 * MODAL WINDOW
************************************************************************/

#vm-modal { position:fixed; left:0px; right:0px; top:0px; bottom:0px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.95); z-index:100; }
#vm-modal .modal.modal-centered { display: flex; align-items: center; justify-content: center; }
#vm-modal .modal.modal-centered .modal-dialog { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#vm-modal h4 { margin-bottom:0px; }
#vm-modal .close:hover, #vm-modal .close:focus  { background:none; }

/************************************************************************
 *  Author  : Incremental Group
 *  Date    : 18th May 2023
 *  Purpose : Default
************************************************************************/

@media (min-width:1440px) {

    /************************************************************************
     * DEBUG
    ************************************************************************/
        
    #debug { background:orange;  }
    #debug::after { content:"default-responsive.css"; } 

    /************************************************************************
    * SETUP
    ************************************************************************/

    html { font-size:100%; }

    /************************************************************************
    * SETUP
    ************************************************************************/

    .container { padding:0px; width:1440px; }
                  
}

/************************************************************************
 *  Author  : Incremental Group
 *  Date    : 18th May 2023
 *  Purpose : Large device/stylesheet
************************************************************************/

@media (min-width:1200px) and (max-width:1450px) {

    /************************************************************************
     * DEBUG
    ************************************************************************/
        
    #debug { background:purple;  }
    #debug::after { content:"xxx-responsive.css"; }

    /************************************************************************
    * SETUP
    ************************************************************************/

    html { font-size:100%; }

    /************************************************************************
    * CONTAINER
    ************************************************************************/

    .container { width:100%; padding:0px; }
                  
}

/************************************************************************
 *  Author  : Incremental Group
 *  Date    : 18th May 2023
 *  Purpose : Medium device/stylesheet
************************************************************************/

@media (min-width:992px) and (max-width:1199px) {


    /************************************************************************
    * SETUP
    ************************************************************************/

    html { font-size:100%; }

    /************************************************************************
    * CONTAINER
    ************************************************************************/

    .container { width:100%; padding:0px; }

    /************************************************************************
     * DEBUG
    ************************************************************************/
        
    #debug { background:lime;  }
    #debug::after { content:"md-responsive.css"; }

    /************************************************************************
    * LOGO
    ************************************************************************/

    #vm-logo { padding:34px 160px; }

    /************************************************************************
    * HEAD
    ************************************************************************/

    #vm-head { min-height:auto; padding:70px 160px; }
    #vm-head h1 { font-size:var(--fs-60); }

    /************************************************************************
    * BODY
    ************************************************************************/

    #vm-body { padding:50px 160px; }
                                
}
    
/************************************************************************
 *  Author  : Incremental Group
 *  Date    : 18th May 2023
 *  Purpose : Small device/stylesheet
************************************************************************/

@media (min-width:768px) and (max-width:991px) {
       
    /************************************************************************
     * DEBUG
    ************************************************************************/
        
    #debug { background:pink;  }
    #debug::after { content:"sm-responsive.css"; }

    /************************************************************************
    * SETUP
    ************************************************************************/

    html { font-size:100%; }

    /************************************************************************
    * CONTAINER  
    ************************************************************************/

    .container { width:100%; padding:0px; }

    /************************************************************************
    * LOGO
    ************************************************************************/

    #vm-logo { padding:34px 80px; }

    /************************************************************************
    * HEAD
    ************************************************************************/

    #vm-head { min-height:auto; padding:60px 80px; }
    #vm-head h1 { font-size:var(--fs-60); }
    #vm-head .vm-pattern svg { left:80%; }

    /************************************************************************
    * BODY
    ************************************************************************/

    #vm-body { padding:60px 80px; padding-bottom:60px; }

    /************************************************************************
    * PROGRESS
    ************************************************************************/

    #vm-progress ul { padding:32px 0px; }
                            
}
    

/************************************************************************
 *  File    : xs-responsive.css
 *  Author  : Guy Whammond
 *  Date    : 18th May 2023
 *  Purpose : X-Small device/stylesheet
************************************************************************/

@media (max-width:767px) {



    /************************************************************************
     * DEBUG
    ************************************************************************/
        
    #debug { background:yellow;  }
    #debug::after { content:"xs-responsive.css"; }

    /************************************************************************
    * SETUP
    ************************************************************************/

    html { font-size:100%; }

    /************************************************************************
    * CONTAINER
    ************************************************************************/

    .container { width:100%; padding:0px; }

    /************************************************************************
    * HEAD
    ************************************************************************/

    #vm-head { min-height:auto; padding:48px 20px; }
    #vm-head h1 { font-size:var(--fs-40); margin:0px; }
    #vm-head .vm-pattern svg { left:65%; }

    /************************************************************************
    * LOGO
    ************************************************************************/
    
    #vm-logo { padding:30px 25px; }
    #vm-logo img { min-width:158px; height:32px; }

    /************************************************************************
    * BODY
    ************************************************************************/

    #vm-body { padding:60px 20px; padding-bottom:60px; }
    #vm-body h1 { margin-bottom:40px; font-size:var(--fs-40);  } 

    /************************************************************************
    * H2
    ************************************************************************/

    #vm-body .welcome h2 { font-size:var(--fs-36); }
    #vm-container h2 { font-size:var(--fs-36); }

    /************************************************************************
    * SUB
    ************************************************************************/

    #vm-body .welcome .vm-sub { font-size:var(--fs-21); }
    #vm-body .vm-sub { font-size:var(--fs-21); }
    
    /************************************************************************
    * FORM
    ************************************************************************/

    .vm-form .form-group .form-control { width:100%; }
    .vm-form .form-group.invalid { width:103%; }
    .vm-form .form-message .glyphicon { font-size:var(--fs-16); left:15px; top:15px; }
    .vm-form .form-message .vm-icon { position:absolute; width:22px; height:22px; left:15px; top:15px; }
    .vm-form .form-message .inner { margin-left:50px; }
    .vm-form .form-group.invalid .form-control { /* width:100%; */ }

    /************************************************************************
    * MESSAGES
    ************************************************************************/

    .vm-form .form-message.short { width:100%; }
    .vm-form .form-message { width:100%; }
    .vm-form .form-message .head { font-size:28px; }

    /************************************************************************
    * TABLE
    ************************************************************************/

    .vm-table { margin-bottom:var(--ma-48); }

    /************************************************************************
     * BUTTONS
    ************************************************************************/

    .vm-form .btn-container.btn-complete .btn.btn-default { margin-bottom:var(--ma-16); }
    .vm-form .btn-container.btn-complete .btn.btn-primary { margin-bottom:0px; }

    /************************************************************************
    * HEAD
    ************************************************************************/

    #vm-head .vm-heading { font-size:var(--fs-48); }

    /************************************************************************
    * PROGRESS
    ************************************************************************/

    #vm-progress { font-size:var(--fs-14); }
    #vm-progress ul { padding:32px 15px; }
    #vm-progress ul li { width:10%; }
    #vm-progress ul li::before { width:24px; height:24px; line-height:21px; font-size:12px; }
    #vm-progress ul li::after { top:10px; width:360%; left:-355%; }
    #vm-progress ul li span { display:none; }
    #vm-progress #vm-mobile-progress { display:block; margin-top:-35px; text-align:center; font-family: var(--ff-inte-m); }  

    /************************************************************************
    * FIELD
    ************************************************************************/

    .vm-form .form-group { width:var(--si-width-full); }
    .vm-form .form-group .form-control { width:var(--si-width-full); }

    /************************************************************************
    * BUTTONS
    ************************************************************************/

    .vm-form .btn-container { flex-direction:column-reverse; }
    .vm-form .btn-container .btn { margin:0px; }
    .vm-form .btn-container .btn.btn-primary { margin-bottom: var(--ma-16); }
    .vm-form .btn-container .btn.mb-16 { margin-bottom: var(--ma-16); }

    /************************************************************************
    * MODAL 
    ************************************************************************/
    #vm-modal .modal.modal-centered .modal-dialog { left:auto; transform:none; }

                            
}

/************************************************************************
    * Error Screen 
    ************************************************************************/
.error-screen .start-steps a { font-family: var(--ff-inte);}
.error-screen .start-steps li { margin-bottom:20px; }
.error-screen h3 { color:var(--vm-red); font-size:var(--fs-24); letter-spacing:-0.75px; margin:0px; margin-bottom:0px; margin-bottom:var(--ma-32); font-family:var(--ff-sans-m); }

/************************************************************************
 *  File    : xs-responsive.css
 *  Author  : Guy Whammond
 *  Date    : 18th May 2023
 *  Purpose : Touch screen devices
************************************************************************/

@media (pointer:coarse) 
{
    .vm-form .form-group .signature-help::before { content:"Tap and drag your finger to sign below"; }
    .text-formatting a { font-family:var(--ff-inte-m); color:#000000; text-decoration:underline; font-weight:bold; }
    .vm-form .next-steps span { font-family:var(--ff-inte-m); display:block; font-weight:bold; }
    .vm-form .form-group p { font-weight:100 !important; }
}