/* Sign-in page, from VargoCargo's design. Sizes and colours are measured from
   his 1365x881 mockup. Icons: Photos and the g+ glyph are Google's own files
   from the Google+ 6.4.0 Android app; Circles and Communities are taken from
   his mockup. Background: "Quartz Peak Sunset" by Mikesanchez1109, CC BY-SA 3.0. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url(../theme-2015/fonts/roboto-v15-300.ttf) format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(../theme-2015/fonts/roboto-v15-400.ttf) format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(../theme-2015/fonts/roboto-v15-700.ttf) format('truetype'); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.vl {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #3a2a2a url(../login/quartz-peak-sunset.jpg) no-repeat;
  /* The mockup shows the photo at about 1425px wide on a 1365px window. */
  background-size: max(104.4vw, 130.6vh) auto;
  background-position: 40% 97%;
  color: #fff;
  font: 400 15px Roboto, Arial, sans-serif;
}
a { text-decoration: none; }

.vl-top { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 35px 0 12px; background: rgba(0, 0, 0, .3); }
.vl-top img { display: block; width: 140px; height: auto; }
.vl-help { color: #fff; font-size: 16px; }
.vl-help:hover { text-decoration: underline; }

.vl-main { flex: 1; position: relative; display: flex; justify-content: space-between; align-items: flex-start; width: 1227px; max-width: 100%; padding: 0 0 40px 42px; }

.vl-hero { padding-top: 105px; max-width: 440px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.vl-hero h1 { margin: 0 0 22px; font: 300 41px/49px Roboto, Arial, sans-serif; letter-spacing: -.2px; }
.vl-lead { margin: 0 0 40px; font-size: 16px; line-height: 25px; font-weight: 300; }
.vl-features { list-style: none; margin: 0; padding: 0; }
.vl-features li { position: relative; min-height: 64px; margin: 0 0 30px; padding: 6px 0 0 75px; }
.vl-features img { position: absolute; left: -2px; top: 0; width: 64px; height: 64px; }
.vl-features b { display: block; font: 400 20px/24px Roboto, Arial, sans-serif; }
.vl-features span { display: block; font-size: 15px; line-height: 22px; font-weight: 300; }

.vl-card { width: 355px; margin-top: 178px; background: #eaeaea; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); color: #333; }
.vl-tabs { display: flex; height: 54px; background: #d2d2d2; }
.vl-tab { position: relative; flex: 1; line-height: 50px; text-align: center; font-size: 15px; color: #777; }
.vl-tab:hover { color: #333; }
.vl-tab.on { color: #333; }
.vl-tab.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: #c4513f; }
.vl-body { padding: 37px 27px 37px; }
.vl-body h2 { margin: 0 0 21px; font: 300 22px Roboto, Arial, sans-serif; color: #333; }
.vl-body h2 b { font-weight: 400; }
.vl-error { margin: -8px 0 12px; color: #c4513f; font-size: 13px; }
.vl-input { display: block; width: 100%; height: 38px; margin: 0 0 21px; padding: 0 12px; border: 1px solid #c8c8c8; border-radius: 1px; background: #f3f3f3; color: #333; font: 400 15px Roboto, Arial, sans-serif; }
.vl-input::placeholder { color: #999; }
.vl-input:focus { outline: none; border-color: #4a85e8; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }
.vl-field { margin: 0 0 21px; }
.vl-field .vl-input { margin: 0; }
.vl-field.has-error .vl-input { border-color: #c4513f; }
.vl-field-error { display: block; margin-top: 5px; color: #c4513f; font-size: 12px; }
.vl-turnstile { margin: 0 0 18px; }
.vl-terms { margin: 14px 0 0; color: #777; font-size: 12px; text-align: center; }
.vl-terms a { color: #2b65d9; }
.vl-terms a:hover { text-decoration: underline; }
.vl-note { margin: 0; color: #555; font-size: 14px; }
.vl-signin { display: block; width: 100%; height: 38px; border: 0; border-radius: 2px; background: #4a85e8; color: #fff; font: 700 15px Roboto, Arial, sans-serif; cursor: pointer; }
.vl-signin:hover { background: #3f78d8; }
.vl-signin:disabled { opacity: .7; cursor: default; }
.vl-row { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 0; font-size: 13px; }
.vl-row label { display: flex; align-items: center; gap: 9px; color: #333; cursor: pointer; }
.vl-row input { position: absolute; opacity: 0; }
.vl-check { width: 17px; height: 17px; border: 1px solid #b8b8b8; border-radius: 1px; background: #f3f3f3; position: relative; }
.vl-row input:checked + .vl-check::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #666; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vl-row input:focus-visible + .vl-check { outline: 2px solid #4a85e8; }
.vl-row a { color: #2b65d9; }
.vl-row a:hover { text-decoration: underline; }
.vl-or { position: relative; margin: 30px 0 29px; height: 14px; text-align: center; font-size: 12px; color: #777; }
.vl-or::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px solid #d6d6d6; }
.vl-or span { position: relative; padding: 0 6px; background: #eaeaea; }
.vl-create { display: flex; height: 40px; border-radius: 2px; background: #be5741; color: #fff; }
.vl-create:hover { background: #b14f3a; }
.vl-gplus { display: flex; align-items: center; justify-content: center; width: 46px; border-right: 1px solid rgba(255, 255, 255, .35); }
.vl-gplus img { width: 24px; height: auto; }
.vl-create-text { flex: 1; display: flex; align-items: center; justify-content: center; font: 700 15px Roboto, Arial, sans-serif; }

.vl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 17px; min-height: 39px; padding: 8px 12px; background: #f2f2f2; font-size: 12px; color: #777; }
.vl-foot a { color: #555; }
.vl-foot a:hover { text-decoration: underline; }
.vl-credit { margin-left: auto; color: #888; font-size: 11px; }
.vl-credit a { color: #888; }

@media (max-width: 900px) {
  .vl-main { flex-direction: column; align-items: center; width: auto; padding: 0 16px 32px; }
  .vl-hero { padding-top: 28px; max-width: 355px; }
  .vl-hero h1 { font-size: 30px; line-height: 37px; }
  .vl-features { display: none; }
  .vl-card { width: 100%; max-width: 355px; margin-top: 0; }
  .vl-top { padding-right: 16px; }
  .vl-credit { margin-left: 0; }
}