@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/Light/StagSans-Light.eot"); src: url("fonts/StagSans/Light/StagSans-Light.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/Light/StagSans-Light.woff2") format("woff2"), url("fonts/StagSans/Light/StagSans-Light.woff") format("woff"), url("fonts/StagSans/Light/StagSans-Light.ttf") format("truetype"), url("fonts/StagSans/Light/StagSans-Light.svg#StagSans-Light") format("svg"); font-weight: 300; font-style: normal; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/LightItalic/StagSans-LightItalic.eot"); src: url("fonts/StagSans/LightItalic/StagSans-LightItalic.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/LightItalic/StagSans-LightItalic.woff2") format("woff2"), url("fonts/StagSans/LightItalic/StagSans-LightItalic.woff") format("woff"), url("fonts/StagSans/LightItalic/StagSans-LightItalic.ttf") format("truetype"), url("fonts/StagSans/LightItalic/StagSans-LightItalic.svg#StagSans-LightItalic") format("svg"); font-weight: 300; font-style: italic; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/Book/StagSans-Book.eot"); src: url("fonts/StagSans/Book/StagSans-Book.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/Book/StagSans-Book.woff2") format("woff2"), url("fonts/StagSans/Book/StagSans-Book.woff") format("woff"), url("fonts/StagSans/Book/StagSans-Book.ttf") format("truetype"), url("fonts/StagSans/Book/StagSans-Book.svg#VNFStagSansBook") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/BookItalic/StagSans-BookItalic.eot"); src: url("fonts/StagSans/BookItalic/StagSans-BookItalic.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/BookItalic/StagSans-BookItalic.woff2") format("woff2"), url("fonts/StagSans/BookItalic/StagSans-BookItalic.woff") format("woff"), url("fonts/StagSans/BookItalic/StagSans-BookItalic.ttf") format("truetype"), url("fonts/StagSans/BookItalic/StagSans-BookItalic.svg#StagSans-BookItalic") format("svg"); font-weight: normal; font-style: italic; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/Medium/StagSans-Medium.eot"); src: url("fonts/StagSans/Medium/StagSans-Medium.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/Medium/StagSans-Medium.woff2") format("woff2"), url("fonts/StagSans/Medium/StagSans-Medium.woff") format("woff"), url("fonts/StagSans/Medium/StagSans-Medium.ttf") format("truetype"), url("fonts/StagSans/Medium/StagSans-Medium.svg#StagSans-Medium") format("svg"); font-weight: 500; font-style: normal; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/SemiboldItalic/StagSans-SemiboldItalic.eot"); src: url("fonts/StagSans/SemiboldItalic/StagSans-SemiboldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/SemiboldItalic/StagSans-SemiboldItalic.woff2") format("woff2"), url("fonts/StagSans/SemiboldItalic/StagSans-SemiboldItalic.woff") format("woff"), url("fonts/StagSans/SemiboldItalic/StagSans-SemiboldItalic.ttf") format("truetype"), url("fonts/StagSans/SemiboldItalic/StagSans-SemiboldItalic.svg#StagSans-SemiboldItalic") format("svg"); font-weight: 600; font-style: italic; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/Bold/StagSans-Bold.eot"); src: url("fonts/StagSans/Bold/StagSans-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/Bold/StagSans-Bold.woff2") format("woff2"), url("fonts/StagSans/Bold/StagSans-Bold.woff") format("woff"), url("fonts/StagSans/Bold/StagSans-Bold.ttf") format("truetype"), url("fonts/StagSans/Bold/StagSans-Bold.svg#StagSans-Bold") format("svg"); font-weight: bold; font-style: normal; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/BoldItalic/StagSans-BoldItalic.eot"); src: url("fonts/StagSans/BoldItalic/StagSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/BoldItalic/StagSans-BoldItalic.woff2") format("woff2"), url("fonts/StagSans/BoldItalic/StagSans-BoldItalic.woff") format("woff"), url("fonts/StagSans/BoldItalic/StagSans-BoldItalic.ttf") format("truetype"), url("fonts/StagSans/BoldItalic/StagSans-BoldItalic.svg#StagSans-BoldItalic") format("svg"); font-weight: bold; font-style: italic; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/Black/StagSans-Black.eot"); src: url("fonts/StagSans/Black/StagSans-Black.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/Black/StagSans-Black.woff2") format("woff2"), url("fonts/StagSans/Black/StagSans-Black.woff") format("woff"), url("fonts/StagSans/Black/StagSans-Black.ttf") format("truetype"), url("fonts/StagSans/Black/StagSans-Black.svg#StagSans-Black") format("svg"); font-weight: 900; font-style: normal; }

@font-face { font-family: 'Stag Sans'; src: url("fonts/StagSans/BlackItalic/StagSans-BlackItalic.eot"); src: url("fonts/StagSans/BlackItalic/StagSans-BlackItalic.eot?#iefix") format("embedded-opentype"), url("fonts/StagSans/BlackItalic/StagSans-BlackItalic.woff2") format("woff2"), url("fonts/StagSans/BlackItalic/StagSans-BlackItalic.woff") format("woff"), url("fonts/StagSans/BlackItalic/StagSans-BlackItalic.ttf") format("truetype"), url("fonts/StagSans/BlackItalic/StagSans-BlackItalic.svg#StagSans-BlackItalic") format("svg"); font-weight: 900; font-style: italic; }

html, html * { -webkit-font-smoothing: antialiased; }

html, body { height: 100%; }

body { background-color: #FFF; font-family: 'Stag Sans'; font-size: 16px; }

a { color: #505050; text-decoration: underline; }

a:active, a:focus, a:hover { color: #9d0214; }

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0px; }

hr { border-top-color: #dfdede; }

.valign-wrapper { display: table; height: 100%; width: 100%; }

.valign-wrapper .valign-object { display: table-cell; vertical-align: middle; width: 100%; }

.material-icons { vertical-align: middle; }

.alert.alert-with-icon { padding-left: 56px; position: relative; }

.alert.alert-with-icon > ul { padding-left: 20px; }

.alert.alert-with-icon .alert-icon { position: absolute; left: 10px; top: 10px; width: 36px; height: 36px; }

.alert.alert-with-icon .alert-icon .material-icons { font-size: 36px; }

.warmflow-logo { display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; max-width: 290px; width: 100%; }

.login-container { padding-top: 50px; padding-bottom: 50px; margin: 0px auto; max-width: 540px; width: 100%; }

.login-box { background-color: #F5F5F5; border-radius: 2px; padding: 11.11111% 16.66667%; }

.register-container { padding-top: 50px; padding-bottom: 50px; margin: 0px auto; max-width: 780px; width: 100%; }

.register-title { max-width: 780px; width: 100%; margin-left: auto; margin-right: auto; font-size: 21px; text-align: center; padding-bottom: 3%; }

@media (max-width: 767px) { .register-title { font-size: 16px !important; padding: 0 20px 50px 20px; } }

.register-box { background-color: #F5F5F5; border-radius: 2px; max-width: 780px; padding: calc(30 / 540 * 100%) calc(90 / 540 * 100%); }

@media (max-width: 767px) { .register-box h2 { font-size: 20px !important; }
  .register-box p { font-size: 14px; } }

.banner-image { display: block; margin-left: auto; margin-right: auto; max-width: 780px; width: 100%; height: 170px; object-fit: cover; object-position: 40% 43%; }

.register-inner-box { max-width: 780px; }

.full-width { max-width: none; width: 100%; }

label { font-size: 16px; font-weight: normal; margin: 10px 0px; }

.form-group { margin-bottom: 30px; }

.form-group > label { margin-top: 0px; }

.checkbox-label { cursor: pointer; margin-top: 0px; margin-bottom: 0px; }

.checkbox-label > input { margin-left: 10px; }

.checkbox-label > .icheckbox, .checkbox-label > .iradiobox { margin-left: 10px; }

.form-control { background: #FFFFFF; border: 1px solid #D3D1D1; border-radius: 0px; box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2); color: #000; display: block; font-size: 16px; font-family: 'Stag Sans'; font-weight: normal; line-height: 1; height: auto; padding: 15px; }

.form-control::-webkit-input-placeholder { color: #B2B2B2; }

.form-control:-moz-placeholder { color: #B2B2B2; }

.form-control::-moz-placeholder { color: #B2B2B2; }

.form-control:-ms-input-placeholder { color: #B2B2B2; }

.form-control:focus { border-color: #bab7b7; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(186, 183, 183, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(186, 183, 183, 0.6); }

.btn-default { background-image: linear-gradient(-180deg, #FFFFFF 0%, #D2D1D1 100%); border: 1px solid #D3D1D1; border-radius: 5px; font-size: 16px; line-height: 1; padding: 15px 45px; }

.btn-default:active, .btn-default:focus, .btn-default:hover { background-image: linear-gradient(-180deg, #f2f2f2 0%, #c5c4c4 100%); border: 1px solid #c7c4c4; }

.btn-primary { background-image: linear-gradient(-1deg, #A2001A 0%, #D0021B 100%); border: 1px solid #AA011A; border-radius: 5px; font-size: 16px; line-height: 1; padding: 16px 78px; }

.btn-primary:active, .btn-primary:focus, .btn-primary:hover { background-image: linear-gradient(-1deg, #890016 0%, #b70218 100%); border: 1px solid #910116; }

.rounded { border-radius: 29px; }

#register-here { color: #857F7F; text-align: center; }

.account-type-cards { margin-top: 40px; max-width: 1000px; margin-left: auto; margin-right: auto; }

.account-card { background: white; border: 2px solid transparent; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); overflow: hidden; cursor: pointer; transition: all 0.3s ease; margin-bottom: 30px; height: 100%; position: relative; }

.account-card h2 { font-size: 26px; }

.account-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #D0021B; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; }

.account-card:hover::before { opacity: 0.15; }

.account-card.selected { border-color: #D0021B; border-radius: 5px; }

.card-image { height: 200px; overflow: hidden; position: relative; }

.card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.card-content { padding: 25px; }

.card-content h3 { font-size: 26px; font-weight: 700; margin-bottom: 15px; }

@media (max-width: 767px) { .account-card { display: flex; flex-direction: row; align-items: stretch; }
  .account-card .card-image { flex: 0 0 40%; max-width: 40%; height: auto; }
  .account-card .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .account-card .card-content { flex: 1 1 auto; padding: 12px 14px; text-align: left; } }

.thank-you-message { font-size: 21px; margin-bottom: 24px; }

.d-none { display: none !important; }

.form-group .sm-input { max-width: 174px; }

.help-block { font-size: 14px; }

.postcode-row { display: flex; align-items: center; gap: 16px; margin-bottom: 13px; }

.btn-find-address { border-radius: 20px; padding: 14px 28px; }

.manual-link { text-decoration: underline; }

@media (max-width: 767px) { .row > [class^="col-"] { margin-bottom: 10px; } }

.banner-wrap { position: relative; max-width: 780px; margin: 0 auto; }

.banner-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; }

.banner-wrap:not(.has-title) .banner-overlay { display: none; }

.banner-title { font-size: 32px; position: absolute; z-index: 2; margin: 0; color: #fff; font-weight: 500; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); padding: 0 16px; line-height: 1.2; }

.pos-bottom-center { left: 50%; bottom: 35px; transform: translateX(-50%); text-align: center; width: 100%; }

.pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; }

.pos-top-left { top: 16px; left: 16px; text-align: left; }

.pos-top-right { top: 16px; right: 16px; text-align: right; }

.pos-bottom-left { bottom: 16px; left: 16px; text-align: left; }

.pos-bottom-right { bottom: 16px; right: 16px; text-align: right; }

@media (max-width: 767px) { .banner-title { font-size: 20px; } }

.submit-button a { text-decoration: none; }