html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font: 62.5%/1 sans-serif; }
body { margin:0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul { margin:0; padding:0; }
ol, ul { list-style-position: inside; }
h1, h2, h3, h4 { font-size: inherit; font-weight: normal; }
a, button { color: inherit; }
a { text-decoration: none; }
img { vertical-align: top; }
input, select, textarea, button, .pp-bambora-payment-field-wrapper { font: inherit; }
table { border-collapse: collapse; }

/* General */
html, body { height: 100%; }
body { font: 400 15px 'Open sans', sans-serif; display: flex; flex-direction: column; background: #143f62; }

/* Overrides */
.u-mt--large { margin-top: 115px!important; }
.u-mt--medium { margin-top: 50px!important; }
.u-mt--small { margin-top: 20px!important; }
.u-mb--large { margin-bottom: 115px!important; }
.u-mb--medium { margin-bottom: 50px!important; }
.u-mb--small { margin-bottom: 20px!important; }

/* Vex Plugin Overrides */ 
.vex-content { font: 400 17px 'Open sans', sans-serif!important; border-top-color: #152e44!important; }
.vex-dialog-button-primary.vex-dialog-button.vex-first { background: #db0000!important;} 
.vex-dialog-button-secondary.vex-dialog-button.vex-last { background: white!important; }

/* Input fields */ 
input[type=text], input[type=password], textarea, select, .pp-bambora-payment-field-wrapper { width: 100%; max-width: 275px; }
input, textarea, select, .pp-bambora-payment-field-wrapper { height: 35px; box-sizing: border-box; padding: 5px; border-radius: 0.2em; border: 1px solid #d9dee6; background-color: #ffffff; outline: none; }
input:focus:not([disabled]):not([readonly]), .pp-bambora-payment-field-focused, 
textarea:focus:not([disabled]):not([readonly]), select:focus:not([disabled]):not([readonly]) { box-shadow: 0 0 0 2px rgba(160, 160, 160, 0.2); }
input[disabled], select[disabled], textarea[disabled], input[readonly]:not(.pp-val), select[readonly], textarea[readonly] { opacity: 100%; background: #efefef; color: #818181; }
label { color: #102d47; font-weight: bold; padding: 10px 0 1px; display: flex; align-items: center; flex-wrap: wrap; }

/* Titles */
.title { font-size: 1.6em; color: black; padding-bottom: 20px; position: relative; line-height: 1; }
.title--white { color: white; }
.title--bold { font-weight: 700; }
.title--small { font-size: 1em; font-weight: 400; padding-bottom: 0; }
.title--subtitle { font-size: 1.3em; font-weight: 300; max-width: 70%; }
.title--separated { margin-top:40px;  }
.title--separated:before { width: 50px; height: 1px; content : ""; position: absolute; left: 0; top: -15px; border-bottom: 1px solid #c51b1e; }
.title--login { padding: 40px 0 30px; }

/* Header */ 
.pp-header { max-width: 925px; width: 96%; margin: auto; display: flex; align-items: center; padding: 40px 0; }
.pp-header__image { width: 250px; min-height: 0; height: 40px; }
.pp-header__list { flex:1; list-style: none; display: flex; align-items: center; justify-content: flex-end; }
.pp-header__item:not(:last-child) { padding-right: 30px; }
.pp-header__link { text-transform: uppercase; text-decoration: none; color: white; font-weight: 600; }

/* Main Content */ 
.pp-content { flex:1; }
.pp-content__inner { max-width: 925px; width: 96%; margin: auto; border-radius: 10px; overflow: hidden; }
.pp-content__inner--white { background: #fff; padding: 30px; box-sizing: border-box; }
.pp-pane { display: flex; }
.pp-pane--input .pp-pane__item { padding: 0 30px; }
.pp-pane__item { flex: 1; min-width: 0; background: #fff; padding: 30px; box-sizing: border-box; }
.pp-pane__item--contrasted { background: #152e44; color: #fff; }
.pp-pane__item--promoted { background: url('../../v3/images/pp-promo-background.png') no-repeat; background-size: cover; display: flex; flex-direction: column; }
.pp-content__inner--white .pp-pane__item:first-child { padding-left:0; }
.pp-content__inner--white .pp-pane__item:last-child { padding-right:0; }
.pp-buttons { padding-top: 20px; display: flex; }
.pp-buttons > *:first-child { flex:1; }
.pp-buttons > div { align-self: end; }

/* Footer */ 
.pp-footer { line-height: 1; padding: 30px 0 15px; box-sizing:border-box; text-align: center; font-size: 12px; color: #ffffffd1; }
.pp-preprod-info { font-weight:bold; margin-top:5px; }
/* Errors */
.pp-error, .error { max-width: 925px; width: 96%; margin: 20px auto 10px; padding: 10px 20px 10px 60px; box-sizing: border-box; 
 background: url("../../v3/images/pp-icon_exclamation_white_red_tr_38x38.png") 10px center no-repeat #ff3737; color: white; border-radius:10px; }
.pp-error ul, .error ul { margin:0; padding:0; list-style: none; }
.pp-error span.errors, .error span.errors { overflow: hidden; }

/* Buttons */
.pp-button { font-size: 1.1em; background: #c51b1e; padding: 8px 5px 8px 20px; border: 1px solid #c51b1e; border-radius: 5px; outline: none;
  color: white; font-weight: 600; display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; cursor: pointer; }
.pp-button:hover { transition: background 0.5s; background: #db0000; }
.pp-button.pp-next { align-self: flex-end; padding: 8px 5px 8px 20px; }
.pp-button.pp-previous { align-self: flex-start; background: none; border: 1px solid #c51b1e; color: #c51b1e; padding: 8px 20px 8px 5px; }
.pp-button > .fa  { margin: 0 15px; font-size: 1.3em; }
.pp-pane__item button.pp-button {margin-top: 10px; display:flex;}

/* Tables */
table { table-layout: fixed; width: 100%; color: #6f6f6f; background: #f9f9f9; border-radius: 5px; text-align: left; }
table tr td, table tr th { padding: 5px 0 0 12px; }
table tr td:last-child, table tr th:last-child  { padding-right: 12px; }
table tr:last-child td, table tr:last-child th { padding-top: 10px; padding-bottom: 5px; }
table span { font-size: 0.7em;  line-height: 1; color: red; display: block; width: 65%; }

.pp-table--prices { table-layout: auto; margin: 30px 0 20px; text-align: right; }
.pp-table--prices td:first-child, .pp-table--prices th:first-child  { width: 50%; text-align: left; }
.pp-table--prices td, .pp-table--prices th  { height: 25px; }
.pp-table--prices input[type=text] { width: auto; height: 20px; background: transparent; }
.pp-table--prices__separated td { border-bottom: 1px solid #e8e8e8; padding-bottom: 8px; padding-top: 8px; }

/* Others */
.pp-explanations { margin-top: auto; border-top: 1px solid #ffffff26; padding-top: 50px; padding-bottom:20px; }

.pp-promo-banner { width: 90%; height: 50px; display: flex; flex-direction: column; justify-content: center; line-height: 1; background: #c51b1e; 
 color: white; position: relative; margin: 0px -30px 20px 0; padding-left: 40px; box-sizing: border-box; align-self: flex-end; }
.pp-promo-banner:before { content: " "; position: absolute; right: 100%; bottom: 0; width: 0; height: 0; border-left: 20px solid transparent; border-top: 25px solid #c51b1e; border-bottom: 25px solid #c51b1e; } 
.pp-promo-banner__title { text-transform: uppercase; font-size: 2em; font-weight: 600; }
.pp-promo-features { clear: both; padding-top: 8px; font-size: 1.05em; line-height: 1.6; font-weight: 600; }
.pp-promo-price { font-size: 2em; padding: 15px 0; font-weight: 600; }
.pp-promo-price__sub { font-size: 0.6em; }

.pp-telephone { display: flex; align-items: center; }
.pp-telephone:not(:last-child) { padding-bottom: 4px; }
.pp-telephone .pp-prefered { padding: 0; margin: 0; margin-right: 10px; }
.pp-telephone select { max-width: 75px; margin-right: 5px; }
.pp-telephone .pp-numero { flex:1; margin-right: 10px; max-width: 180px; }  
.pp-telephone .pp-numero:last-child { margin-right: 0; }
.pp-telephone .pp-extension { width:45px; }

.pp-password-forgotten { text-decoration: none; font-weight: 400; color: #0f2d47; display: block; margin-top: 20px; }
.pp-password-forgotten:hover { text-decoration: underline; }
.pp-password-forgotten i { color: #c51b1e; }

.boardinfo { width: 60%; line-height: 1; margin-bottom: 5px; }
.boardinfo img { margin-top: 10px; max-width: 180px; }

.pp-type-abonnement { display: flex; padding: 10px 0 20px; }
.pp-type-abonnement label:not(:first-of-type) { padding-left: 10px; } 
.pp-type-abonnement input { width: 25px; height: 25px; margin: 0px 5px 0 0; }

.pp-pricing { margin: 20px 0; font-weight: 300; }
.pp-pricing__item { font-size: 1.6em; color: #0f2e45; display:inline-block; }
.pp-pricing__item--savings { padding-left: 10px; color: #c51b1e; }

.pp-legend { border: 1px solid #e8e8e8; border-radius: 5px; padding: 20px; box-sizing: border-box; background: #f9f9f9; color: #626262; }
.pp-legend--license { height: 250px; overflow-y: scroll; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pp-legend--license h3 { padding-top: 10px; font-weight: 600; }
.pp-legend--license-check { background: #e9e9e9; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 5px 20px; }

.pp-paragraph { padding: 10px 0; }

/* Config */
/* Password */
.pp-pwd-securitylevel { height:17px; width:102px; background-image: url(../../v2/themes/pp2/images/pp-pwd-security-levels.png); }
.pp-pwd-securitylevel-0 { background-position: 0 0; }
.pp-pwd-securitylevel-1 { background-position: 0 -20px; }
.pp-pwd-securitylevel-2 { background-position: 0 -40px; }
.pp-pwd-securitylevel-3 { background-position: 0 -60px; }
.pp-pwd-securitylevel-4 { background-position: 0 -80px; }
.pp-pwd-securitylevel-5 { background-position: 0 -100px; }

/* Media Queries */
@media only screen and (max-width: 600px) {
	.pp-content__inner { width: 100%; border-radius: 0; flex-direction: column; }
	.pp-header { flex-wrap: wrap; justify-content: center; padding: 30px 0; }
	.pp-header__list { justify-content: center; }
	.title--login { padding: 10px 0 15px; }
	.title--login.title--separated { margin-top: 20px; }
	.boardinfo { width: 100%; }
	.boardinfo img { max-width: 140px; }
	.hide-mobile { display: none; }
	.pp-promo-banner { padding-left: 22px; }
	.pp-promo-banner__title { font-size: 1.6em; }
}

@media only screen and (min-width: 601px) {
	.hide-desktop { display: none; }
}