:root {
  --primary: #1070A9;
  --primaryDark: #0b4b71;
}

body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #797979;
  background-color: #fff;
}

a { box-sizing: border-box;}

/* ===== TYPOGRAPHY ===== */
@font-face {
  font-family: "chep-icon-font";
  src: url("../fonts/chep-icon-font.eot");
  src: url("../fonts/chep-icon-font.eot?#iefix") format("embedded-opentype"), url("../fonts/chep-icon-font.woff") format("woff"), url("../fonts/chep-icon-font.ttf") format("truetype"), url("../fonts/chep-icon-font.svg#chep-icon-font") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'univers_57';
  src: url("../fonts/univers-57-condensed.eot");
  src: url("../fonts/univers-57-condensed.eot?#iefix") format("embedded-opentype"), url("../fonts/univers-57-condensed.woff") format("woff"), url("../fonts/univers-57-condensed.ttf") format("truetype"), url("../fonts/univers-57-condensed.svg#univers_57_condensedregular") format("svg");
  font-weight: normal;
  font-style: normal; }

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

p {
  margin-top: 4px;
}

.title {
  font-family: "univers_57", Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif !important;
  font-size: 18px;
}

.title.small { font-size: 16px;}
.title.medium { font-size: 24px;}
.title.large { font-size: 34px;}

.txt-primary { color: var(--primary);}
.txt-white { color: white;}

/* ===== FORM ===== */
input, select {
  margin-bottom: 8px;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 8px;
  font-size: 16px;
  height: 44px;
  line-height: 1.428571429;
  color: #797979;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.form-control:focus {
  border-color: #1070A9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(16, 112, 169, 0.6); }
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1; }
.form-control:-ms-input-placeholder {
  color: #999; }
.form-control::-webkit-input-placeholder {
  color: #999; }

/* ===== UTILS ===== */
.text-center { text-align: center;}
.text-right { text-align: right;}
.text-left { text-align: left;}



/* Portrait and Landscape */
@media only screen
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)  {
  .hide-for-mobile { display: none;}
}

@media only screen
and (max-width: 812px) {
  .hide-for-mobile { display: none;}
}

/* ===== HEADER ===== */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: var(--primary);;
}

header > .grid {
  padding: 8px 12px;
}

/* ===== CONTENT ===== */

#loadingSpinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mainContent {
  padding-top: 74px;
}

.section-wrapper {
  margin:  0 auto;
  padding: 0 12px;
  max-width: 520px;
}

.section-wrapper.guidelines {
  max-width: 1024px;
}

.envImage {
  display: block;
  margin: 8px auto;
  max-width: 224px;
}

.tabs {
  display: flex;
  width: 100%;
  margin-bottom: 8px;
}

.tab-item {
  padding: 8px 16px;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-weight: bold;
  font-size: 16px;
  flex: 1;
  text-align: center;
  transition: 40ms;
  cursor: pointer;
}

#mainContent[data-selected-platform='ios'] .ios.tab-item {
  background-color: var(--primary);
  color: white;
}
#mainContent[data-selected-platform='ios'] .ios.tab-item:active {
  background-color: var(--primary);
}
#mainContent[data-selected-platform='android'] .android.tab-item {
  background-color: var(--primary);
  color: white;
}
#mainContent[data-selected-platform='android'] .android.tab-item:active {
  background-color: var(--primary);
}

.guideline {
  display: none;
}

#mainContent[data-selected-platform='ios'] .ios.guideline {
  display: block;
}

#mainContent[data-selected-platform='android'] .android.guideline {
  display: block;
}

.envImage { display: none; }
#mainContent[data-selected-platform=''] .unknown.envImage { display: block; }
#mainContent[data-selected-platform='ios'] .ios.envImage { display: block; }
#mainContent[data-selected-platform='android'] .android.envImage { display: block; }

.tab-item:active {
  transition: 40ms;
  background-color: #ededed;
}

.tab-item:first-child {
  border-right: 0;
}

.guidelines-section {
  margin: 16px 0;
}

.stepNumber {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 34px;
  width: 34px;
  margin-right: 4px;
  font-weight: bold;
  font-size: 22px;
  border-radius: 124px;
  background-color: var(--primary);
  color: white;
}

.stepImage {
  margin-left: 44px;
  max-height: 404px;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.32);
  -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.32);
  box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.32);
}

/* ===== SPINNER ==== */
#loadingSpinner {
  width: 100%;
  text-align: center;
  padding-top: 24px;
}

/* ===== BUTTON ===== */
.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: bold;
  text-decoration: none;
  transition: 40ms;
  transform: scale(1);
}

.btn:focus, .btn:active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none; }

.btn:active {
  transition: 40ms;
  outline: 0;
  background-image: none;
  transform: scale(0.98);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-lg {
  padding: 12px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 0; }

.btn-block {
  display: block;
  width: 100%; }

.btn.expanded { width: 100%;}

/*  Button Color  */

.btn-primary {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  color: #fff;
  background-color: var(--primaryDark);
  border-color: var(--primaryDark);
}

.btn-primary.hollow {
  background-color: transparent !important;
  border-color: var(--primary);
  color: var(--primary);
}

.btn-white {
  color: var(--primary);
  background-color: white;
  border-color: white;
}

.btn-white:hover, .btn-white:focus, .btn-white:active {
  color: #fff;
  background-color: white;
  border-color: white;
}

.btn.white {
  background-color: white;
  color: var(--primary);
}

.btn.white.hollow {
  background-color: transparent !important;
  border-color: white;
  color: white;
}

/*  Button Style  */

.btn.hollow {
  border-width: 2px;
  border-style: solid;
}

.platform { font-weight: bold }
.platform .app-store { color: var(--primary); }
.platform .enterprise { color: red; }
.platform .android { color: #a0c038; }
.platform .ios { color: #636363; }

/*  Grid (https://flexgridlite.elliotdahl.com/)  */
.grid{box-sizing:border-box;display:-webkit-flex;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;-webkit-box-flex:0;flex:0 1 auto;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 -8px 0 -8px}.grid.grid-nogutter{margin:0}.grid.grid-nogutter>.col{padding:0}.col{box-sizing:border-box;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-flex-grow:1;-ms-flex-positive:1;-webkit-box-flex:1;flex-grow:1;-ms-flex-preferred-size:0;-webkit-flex-basis:0;flex-basis:0;max-width:100%;min-width:0;padding:0 8px 0 8px}.col-align-top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.col-align-bottom{align-self:flex-end}.col-align-middle{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.col-top{justify-content:flex-start !important;flex-direction:column;display:flex}.col-bottom{justify-content:flex-end !important;flex-direction:column;display:flex}.col-middle{justify-content:center;flex-direction:column;display:flex}.grid-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.grid-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.grid-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.grid-around{justify-content:space-around}.grid-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.col-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.col-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.col-fixed{flex:initial}.col-grow-2{flex-grow:2}.col-grow-3{flex-grow:3}.col-grow-4{flex-grow:4}.col-grow-5{flex-grow:5}.col-grow-6{flex-grow:6}.col-grow-7{flex-grow:7}.col-grow-8{flex-grow:8}.col-grow-9{flex-grow:9}.col-grow-10{flex-grow:10}.col-grow-11{flex-grow:11}.col-1{-ms-flex-preferred-size:8.33333%;-webkit-flex-basis:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.col-2{-ms-flex-preferred-size:16.66667%;-webkit-flex-basis:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.col-3{-ms-flex-preferred-size:25%;-webkit-flex-basis:25%;flex-basis:25%;max-width:25%}.col-4{-ms-flex-preferred-size:33.33333%;-webkit-flex-basis:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.col-5{-ms-flex-preferred-size:41.66667%;-webkit-flex-basis:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.col-6{-ms-flex-preferred-size:50%;-webkit-flex-basis:50%;flex-basis:50%;max-width:50%}.col-7{-ms-flex-preferred-size:58.33333%;-webkit-flex-basis:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.col-8{-ms-flex-preferred-size:66.66667%;-webkit-flex-basis:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.col-9{-ms-flex-preferred-size:75%;-webkit-flex-basis:75%;flex-basis:75%;max-width:75%}.col-10{-ms-flex-preferred-size:83.33333%;-webkit-flex-basis:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.col-11{-ms-flex-preferred-size:91.66667%;-webkit-flex-basis:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.col-12{-ms-flex-preferred-size:100%;-webkit-flex-basis:100%;flex-basis:100%;max-width:100%}@media only screen and (max-width: 480px){.col-sm{flex:100%;max-width:100%}}@media only screen and (max-width: 624px){.col-md{flex:100%;max-width:100%}}@media only screen and (max-width: 744px){.col-lg{flex:100%;max-width:100%}}